/* Shell chrome for the two logged-in consoles: the operator admin console
   (header + tenant sidebar + main panel) and the tenant portal (hero + centred
   content column). Depends on tokens.css, base.css, components.css.

   Only page-frame layout lives here. Anything reusable inside the frame is a
   component. */

/* ============================================================
   ADMIN CONSOLE SHELL
   ============================================================ */
body.console { height: 100vh; display: flex; flex-direction: column; }

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: 64px;
  padding: var(--space-2) var(--space-6);
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.app-header h1 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); }
.app-header .grad {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--weight-heading);
}
.logomark { flex-shrink: 0; }

.pill {
  padding: 3px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: var(--font-size-caption);
}

.layout { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; }

.sidebar {
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--panel2);
  border-right: 1px solid var(--line);
}
.sidebar h2 {
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tlist { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
/* A tenant row is a whole-card target leading to one destination, so the whole
   row is clickable — per the standard's clickable-card rule. */
.titem {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text);
  font-family: inherit;
  font-size: var(--font-size-label);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.titem:hover { border-color: var(--accent2); background: rgba(59, 130, 246, .06); }
/* Selected carries a background as well as a border colour. */
.titem.active { border-color: var(--accent); background: var(--accent-soft); }
.titem small { display: block; color: var(--muted); font-size: var(--font-size-caption); }

.main { padding: var(--space-6); overflow-y: auto; min-width: 0; }

/* ============================================================
   TENANT PORTAL SHELL
   ============================================================ */
.hero {
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(135deg, #0e2a3f 0%, var(--bg) 60%);
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.hero h1 {
  font-size: var(--font-size-h2);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub { color: var(--muted); font-size: var(--font-size-label); }

.wrap { max-width: 900px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-16); }

/* Login / activation / reset: a single centred card, one job per screen. */
.center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: radial-gradient(60% 50% at 50% 0%, #0e2a3f 0%, var(--bg) 70%);
}
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--text);
  font-size: var(--font-size-label);
  font-weight: var(--weight-heading);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.login-card { width: 400px; max-width: 100%; }
.login-card h2 { font-size: var(--font-size-h3); margin-bottom: var(--space-1); }
.login-card p { color: var(--muted); font-size: var(--font-size-label); margin-bottom: var(--space-4); }

/* ============================================================
   RESPONSIVE
   Reorganise and reprioritise — never just shrink.
   ============================================================ */
@media (max-width: 1023px) {
  body.console { height: auto; min-height: 100vh; }
  /* Sidebar becomes a bounded scrolling strip above the panel rather than a
     column squeezed to an unusable width. */
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .main { overflow-y: visible; }
  /* Fleet overview: drop lower-priority columns rather than relying on
     horizontal scroll alone — real tenant names and emails are long enough to
     force a scroll on every row otherwise. The high-priority columns (name,
     plan, usage, setup state) always survive. */
  .fleettable .col-email,
  .fleettable .col-leads,
  .fleettable .col-bookings,
  .fleettable .col-phone { display: none; }
}

@media (max-width: 640px) {
  .app-header { padding: var(--space-2) var(--space-4); min-height: 56px; }
  .app-header .muted { display: none; }
  .main { padding: var(--space-4); }
  .hero { padding: var(--space-6) var(--space-4); }
  .wrap { padding: var(--space-4) var(--space-4) var(--space-12); }
}