/* ============================================================================
   Platform console — application shell
   ============================================================================

   Layout only. Every colour, space and radius here comes from a --ds-* token
   defined in design-system.css; nothing in this file introduces a new value.

   Why a sidebar rather than the tab bar this replaced: the console now has
   eight destinations across four concerns (monitoring, customers, billing,
   security). A horizontal tab strip stops working around five items — it
   either wraps or truncates, and it cannot express grouping, so "Rate card"
   and "Audit log" end up looking like peers of "Overview". A persistent
   sidebar shows the whole information architecture at once and leaves the
   top bar for identity and global controls.
   ========================================================================= */

.adm-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.adm-sidebar {
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-border);
}

/* The staff tint lives here now instead of on a top bar. It is the one piece
   of chrome always in view, so it is where "this is not the customer app"
   has to be said. */
.adm-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ds-accent-500) 26%, var(--ds-surface)),
    var(--ds-surface) 70%);
}
.adm-brand-title {
  font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semi);
  color: var(--ds-text-strong); line-height: var(--ds-leading-tight);
}
.adm-brand-sub {
  font-size: var(--ds-text-xs); color: var(--ds-text-muted);
}

.adm-nav {
  flex: 1;
  padding: var(--ds-space-3) var(--ds-space-2);
  display: flex; flex-direction: column; gap: var(--ds-space-4);
}
.adm-nav-group { display: flex; flex-direction: column; gap: 2px; }
.adm-nav-group-label {
  font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-bold);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ds-text-muted);
  padding: 0 var(--ds-space-3) var(--ds-space-1);
}
.adm-nav-item {
  display: flex; align-items: center; gap: var(--ds-space-3);
  width: 100%; box-sizing: border-box; text-align: left;
  font: inherit; font-size: var(--ds-text-md);
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid transparent; border-radius: var(--ds-radius-md);
  background: transparent; color: var(--ds-text);
  cursor: pointer;
  /* Deliberately not transitioned. Selection is a navigation state, not a
     hover affordance — it should land with the content, instantly. Animating
     it also means interpolating a color-mix() background against
     `transparent`, which passes through a washed-out midpoint on the way in
     and leaves the old item still tinted on the way out. */
}
.adm-nav-item:hover { background: var(--ds-surface-raised); color: var(--ds-text-strong); }
.adm-nav-item:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }
/* Size is pinned here, not left to each icon's width/height attributes. An
   SVG that ships without them falls back to its 300x150 intrinsic size, and
   `flex: none` then stops the sidebar from shrinking it — which is exactly how
   one nav icon ended up rendering the height of the whole menu. */
.adm-nav-item svg {
  flex: none; width: 15px; height: 15px; opacity: .75;
}
.adm-nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--ds-accent-500) 15%, transparent);
  border-color: color-mix(in srgb, var(--ds-accent-500) 38%, transparent);
  color: var(--ds-text-strong); font-weight: var(--ds-weight-semi);
}
.adm-nav-item[aria-current="page"] svg { opacity: 1; color: var(--ds-accent-500); }

.adm-sidebar-foot {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-text-xs); color: var(--ds-text-muted);
}

/* ── Main column ─────────────────────────────────────────────────────── */
.adm-main { display: flex; flex-direction: column; min-width: 0; }

.adm-topbar {
  position: sticky; top: 0; z-index: var(--ds-z-dropdown);
  display: flex; align-items: center; gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  background: color-mix(in srgb, var(--ds-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.adm-topbar-title {
  font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semi);
  color: var(--ds-text-strong); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.adm-menu-btn { display: none; }

/* Scope bar: the date range and the active org filter. Sticky under the top
   bar because a reader who has scrolled to row 80 still needs to know which
   window and which customer they are looking at. */
.adm-contextbar {
  position: sticky; top: 49px; z-index: calc(var(--ds-z-dropdown) - 1);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg-sunken);
}
.adm-contextbar-label {
  font-size: var(--ds-text-2xs); text-transform: uppercase; letter-spacing: .1em;
  font-weight: var(--ds-weight-semi); color: var(--ds-text-muted);
}

.adm-content {
  width: 100%; max-width: 1560px; box-sizing: border-box;
  padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-12);
}
.adm-view-head { margin-bottom: var(--ds-space-5); }
.adm-view-head .ds-muted { margin: var(--ds-space-1) 0 0; }
.adm-section-title { margin: var(--ds-space-6) 0 var(--ds-space-3); }
.adm-section-title:first-child { margin-top: 0; }
.adm-card-gap { margin-top: var(--ds-space-4); }

/* Grouped inputs inside the rate-card form. Two money columns side by side
   makes cost-vs-price legible as a pair rather than eight loose fields. */
.adm-form-grid {
  display: grid; gap: 0 var(--ds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.adm-form-legend {
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semi);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ds-text-muted);
  margin: var(--ds-space-4) 0 var(--ds-space-2);
  padding-bottom: var(--ds-space-1);
  border-bottom: 1px solid var(--ds-border);
}
.adm-modal-wide { max-width: 620px; }

.adm-scrim { display: none; }

/* ── Narrow viewports ────────────────────────────────────────────────────
   The sidebar becomes an overlay drawer rather than collapsing to icons:
   icon-only nav for eight items with four group headings is unreadable
   without the labels. */
@media (max-width: 900px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); }
  .adm-sidebar {
    position: fixed; top: 0; left: 0; width: 250px;
    z-index: calc(var(--ds-z-modal) + 10);
    transform: translateX(-100%);
    transition: transform var(--ds-duration-base) var(--ds-ease);
  }
  .adm-shell.adm-open .adm-sidebar { transform: none; box-shadow: var(--ds-shadow-lg); }
  .adm-scrim {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
    z-index: var(--ds-z-modal);
  }
  .adm-shell.adm-open .adm-scrim { display: block; }
  .adm-menu-btn { display: inline-flex; }
  .adm-content { padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-10); }
  .adm-topbar, .adm-contextbar { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }
  .adm-topbar-back { display: none; }   /* reachable from the sidebar footer */
}

@media (max-width: 560px) {
  .adm-contextbar { top: 0; position: static; }
  .adm-view-head .ds-h1 { font-size: var(--ds-text-2xl); }
}

/* ── Assistant scope bar ─────────────────────────────────────────────────
   The customer selector governs every tab on the AI assistant view, so it
   sits above the tabs rather than inside one card, and is tinted so it does
   not read as one more field in the panel below it. Someone who does not
   notice which customer they are editing will grant a capability to the
   wrong one. */
.adm-scope-bar {
  display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap;
  padding: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-accent-500) 7%, var(--ds-surface));
  border: 1px solid color-mix(in srgb, var(--ds-accent-500) 24%, transparent);
  border-radius: var(--ds-radius-md);
}
.adm-scope-label {
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semi);
  color: var(--ds-text-strong); margin: 0; white-space: nowrap;
}
.adm-scope-bar .ds-select { min-width: 240px; }
.adm-scope-state { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }

/* The two halves of assistant spend, shown side by side. Grid rather than
   flex so the two panels stay equal width and the numbers line up for
   comparison, which is the only reason to put them next to each other. */
.adm-split {
  display: grid; gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.adm-split-cell {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
}
.adm-split-label {
  font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-text-muted); margin-bottom: var(--ds-space-1);
}
.adm-split-value {
  font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semi);
  color: var(--ds-text-strong);
}
.adm-split-sub { font-size: var(--ds-text-sm); color: var(--ds-text-muted); margin-top: 2px; }

/* ── Opening-reply preview ────────────────────────────────────────────────
   Both languages side by side, because the failure this catches is the two
   drifting apart: an English opening that was updated and a Chinese one that
   was not is invisible in the fields but obvious here. */
.adm-greet-preview {
  display: grid; gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.adm-greet-pane {
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}
.adm-greet-bubble {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  border-bottom-left-radius: 4px;
  padding: var(--ds-space-3);
  font-size: var(--ds-text-sm); line-height: 1.6;
  color: var(--ds-text); white-space: pre-wrap;
  background: var(--ds-surface-raised);
}
.adm-greet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ds-space-2); }
.adm-greet-chip {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--ds-border);
  font-size: var(--ds-text-xs); color: var(--ds-text-muted);
}

@media (max-width: 640px) {
  .adm-scope-bar { align-items: stretch; }
  .adm-scope-bar .ds-select { min-width: 0; width: 100%; }
}