/* panel.css — structural classes shared across panel templates.
 *
 * Many templates (platform_ops, billing, intel, accounts, sales) reference a
 * family of layout classes that had no definition, so those pages rendered as
 * unstyled stacked text. This file backs them with token-based styles. Loaded in
 * shell.html right after components.css.
 */

/* --- page header ---------------------------------------------------------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3);
}
.page-head__title { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.page-head__subtitle { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--fs-body); flex-basis: 100%; order: 5; }
.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.eyebrow {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--muted); font-weight: var(--fw-semibold); margin: var(--space-6) 0 var(--space-2);
}

/* --- cards / grids -------------------------------------------------------- */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.card__title { margin: 0 0 var(--space-1); font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.card__meta { color: var(--muted); font-size: var(--fs-sm); }
.card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.card--link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.card--link:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); text-decoration: none; }
.card--warn { border-left: 3px solid var(--warning); }

/* --- forms ---------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form--narrow { max-width: 560px; margin-inline: auto; }
.form__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field-row > * { flex: 1 1 160px; }

/* --- toolbar / search ----------------------------------------------------- */
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.toolbar__grow { flex: 1; }
.search input, .search { min-height: 40px; }

/* --- numeric -------------------------------------------------------------- */
.num, .tabular-nums { font-variant-numeric: tabular-nums; }

/* --- plain lists ---------------------------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.list > li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); min-height: var(--row-h); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
}

/* --- horizontal-scroll wrapper for wide tables (360px safety) ------------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.table-scroll > table { min-width: 560px; }
.table-scroll > .table th:first-child,
.table-scroll > .table td:first-child { padding-left: var(--space-4); }

/* --- platform_ops admin chrome ------------------------------------------- */
.ops-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); flex-wrap: wrap; }
.ops-tab {
  padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: var(--fw-medium);
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.ops-tab:hover { color: var(--text); text-decoration: none; }
.ops-tab--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--fw-semibold); }
.ops-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--card-pad); box-shadow: var(--shadow-xs); }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }

/* --- intel panel ---------------------------------------------------------- */
.intel__list { display: flex; flex-direction: column; gap: var(--space-3); }
.intel__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.intel__msg { font-size: var(--fs-body); }
.intel__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* --- generic helpers ------------------------------------------------------ */
.checkbox { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; }

/* Subscription state banner (trial countdown / billing alerts) — refined in the
   UI pass; tokens only, theme-safe via color-mix on accent tokens. */
.sub-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--primary);
  font-size: var(--fs-body, .9rem); line-height: 1.35; flex-wrap: wrap;
}
.sub-banner__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.sub-banner__icon i, .sub-banner__icon svg { width: 17px; height: 17px; }
.sub-banner__text { flex: 1 1 auto; min-width: 0; color: var(--text); }
.sub-banner__text strong { font-weight: var(--fw-semibold, 600); }
.sub-banner__cta { flex-shrink: 0; }

.sub-banner--warn {
  background: color-mix(in srgb, var(--st-reserved, #d97706) 12%, var(--surface));
  box-shadow: inset 3px 0 0 var(--st-reserved, #d97706);
}
.sub-banner--warn .sub-banner__icon {
  color: var(--st-reserved, #d97706);
  background: color-mix(in srgb, var(--st-reserved, #d97706) 16%, transparent);
}
.sub-banner--danger {
  background: color-mix(in srgb, var(--st-sold, #dc2626) 12%, var(--surface));
  box-shadow: inset 3px 0 0 var(--st-sold, #dc2626);
}
.sub-banner--danger .sub-banner__text { color: color-mix(in srgb, var(--st-sold, #dc2626) 72%, var(--text)); }
.sub-banner--danger .sub-banner__icon {
  color: var(--st-sold, #dc2626);
  background: color-mix(in srgb, var(--st-sold, #dc2626) 16%, transparent);
}
@media (max-width: 640px) {
  .sub-banner { padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .sub-banner__cta { width: 100%; margin-top: var(--space-1); }
}

/* topbar title duplicates the page-head h1 → hide on desktop (kept on mobile where the
   sidebar collapses). Removes the wasted duplicate-title band at the top of every page. */
@media (min-width: 861px) { .topbar__title { display: none; } }

/* ============================================================================
   Reusable panel patterns (UI/UX audit follow-up) — table polish, form grid,
   stat cards, ops panels, timeline. Token-driven, theme-safe.
   ========================================================================== */
.table__row:hover, .table tbody tr:hover { background: var(--surface-2); }
.table__row--available { box-shadow: inset 3px 0 0 var(--st-available); }
.table__row--sold      { box-shadow: inset 3px 0 0 var(--st-sold); }
.table__row--reserved  { box-shadow: inset 3px 0 0 var(--st-reserved); }
.table__row--hold      { box-shadow: inset 3px 0 0 var(--st-hold); }
.table__row--resale    { box-shadow: inset 3px 0 0 var(--st-resale); }
.table__row--unknown   { box-shadow: inset 3px 0 0 var(--st-unknown); }

/* 2-up form grid (label/field pairs side by side, stacks on narrow) */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); }
.form-row > .field { margin: 0; }

/* stat-card grid (numbers that read as KPIs) */
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stat-tile { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); }
.stat-tile__v { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-tile__l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; }


/* timeline / activity list (calls, history) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
.timeline__item:first-child { border-top: 0; }

/* ============================================================================
   Premium polish pass (8 → 9+): restraint, rhythm, micro-interaction.
   Shared primitives only — lifts every page at once. Token-driven, theme-safe.
   ========================================================================== */
:root{
  --shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lift: 0 12px 30px rgba(15,23,42,.10);
}
/* cards: soft elevation + lift on interactive cards */
.card, .settings-card, .ops-panel, .table-scroll, .stat-card, .stat-tile, .imp-card{
  box-shadow: var(--shadow-card);
}
.card, .stat-card, .stat-tile, .region-card, .inq-card, .lcard{
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.card-grid > .card:hover, a.card:hover, .stat-card:hover, .stat-tile:hover,
.lcard:hover, .inq-card:hover, .region-card:hover{
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #4178b8) 32%, var(--border));
}
/* buttons: smooth micro-interaction */
.btn{ transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease; }
.btn:active{ transform: translateY(1px); }
.btn--primary:hover{ box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 38%, transparent); }
/* page header rhythm + weight */
.page-head{ margin-bottom: var(--space-4); }
.page-head__title{ font-weight: 700; letter-spacing: -0.015em; }
.page-head__subtitle{ color: var(--muted); margin: 4px 0 0; font-size: var(--fs-sm); }
.eyebrow{ font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 0 0 2px; }
/* badges: a touch more refined */
.badge{ letter-spacing: .015em; }
/* empty states: more breathing room */
.empty-state{ padding: 46px 24px; }

/* Topbar has backdrop-filter (a stacking context) but no z-index, so the page content painted
   over its user-menu/theme dropdowns. Lift it above content (below modals/toasts). */
.topbar{position:relative;z-index:40}
.user-menu__panel{z-index:80}
/* The base panel opens UPWARD (bottom:100%) for the sidebar-footer menu. In the topbar the
   trigger sits at the TOP, so opening up clipped it to a sliver — open downward here. */
.topbar .user-menu__panel{top:calc(100% + var(--space-2));bottom:auto;right:0;left:auto}