/* ===========================================================================
   The staff application (ARCHITECTURE-SAAS section 8)
   ---------------------------------------------------------------------------
   Same design language as the customer app, deliberately not the same skin.

   It borrows the whole shell from app.css + nav.css (.app-shell, .sidebar,
   .app-main, .topbar, .app-content, .nav-link, the rail and the hover-peek) so
   a support engineer's muscle memory carries across, and adds only three
   things on top:

     1. a staff identity - accent strip, badged sidebar header, tinted rail,
        so nobody ever mistakes /platform for a tenant's own workspace;
     2. the components the customer app has no use for - KPI tiles, filter
        bars, definition grids, the status badge vocabulary;
     3. the impersonation banner (section 7), which is loud on purpose.

   Everything here reads tokens.css. Nothing hard-codes a colour except the
   staff accent itself and the impersonation banner, both of which are defined
   for all three theme states below.
   =========================================================================== */

:root {
  /* The staff app uses the PRODUCT palette. A second hue is what made this
     read as decoration rather than design. What sets the staff app apart is
     structural instead: the fixed strip, the PLATFORM badge, the role chip,
     and a rail one surface step away from the page. */
  --pf-accent: var(--ss-primary);
  --pf-accent-ink: var(--ss-primary-ink);
  --pf-accent-bg: var(--ss-primary-50);
  --pf-accent-line: var(--ss-line);
  --pf-rail-bg: var(--ss-surface-2);

  /* Impersonation: not a token colour, because it must not drift with a theme
     tweak. Section 7 wants it unmissable, in both themes. */
  --pf-imp-bg: var(--ss-err);
  --pf-imp-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pf-accent: var(--ss-primary);
    --pf-accent-ink: var(--ss-primary-ink);
    --pf-accent-bg: var(--ss-primary-50);
    --pf-accent-line: var(--ss-line);
    --pf-rail-bg: var(--ss-surface-2);
    --pf-imp-bg: var(--ss-err);
    --pf-imp-ink: #ffffff;
  }
}

:root[data-theme="dark"] {
  --pf-accent: var(--ss-primary);
  --pf-accent-ink: var(--ss-primary-ink);
  --pf-accent-bg: var(--ss-primary-50);
  --pf-accent-line: var(--ss-line);
  --pf-rail-bg: var(--ss-surface-2);
  --pf-imp-bg: var(--ss-err);
  --pf-imp-ink: #ffffff;
}

/* ---------------------------------------------------------------------------
   Shell
--------------------------------------------------------------------------- */

/* The staff app runs wider than the customer app: these are tables of tenants,
   not a single workspace's forms. */
.pf-body { --ss-content-max: 1440px; background: var(--ss-bg); color: var(--ss-ink); }

/* The strip. 3px of accent across the very top of the viewport, above the
   sidebar and the topbar both, present on every screen and every breakpoint.
   Nothing scrolls it away and nothing can cover it. */
.pf-strip {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100;
  background: var(--pf-accent); pointer-events: none;
}
.pf-body .app-shell { padding-top: 3px; }

/* The rail carries a tint and an accent hairline on its inner edge, so the
   difference is legible even when the header scrolls out of a phone viewport. */
.pf-body .sidebar {
  background: var(--pf-rail-bg);
  border-right-color: var(--pf-accent-line);
}

.pf-body .sidebar-brand { gap: 10px; }
.pf-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--ss-ink); }
.pf-brand:hover { text-decoration: none; }
.pf-brand:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; border-radius: var(--ss-r-sm); }
.pf-brand .brand-mark { height: 22px; width: auto; flex: none; display: block; color: var(--ss-ink); }
.pf-brand-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pf-brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }

/* The badge that says which application you are in. */
.pf-tag {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
  border-radius: 999px; background: var(--pf-accent); color: var(--pf-accent-ink);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}

/* In the rail the lettering collapses the way nav.css collapses everything
   else, and the mark alone stands in. The tag survives as a dot of accent so
   the marker never disappears entirely. */
.pf-brand-stack { white-space: nowrap; overflow: hidden; opacity: 1; max-width: 200px;
  transition: max-width var(--ss-dur-slow) var(--ss-ease), opacity var(--ss-dur) var(--ss-ease); }
:root[data-nav="rail"] .sidebar:not(.is-peek) .pf-brand-stack { max-width: 0; opacity: 0; }
@media (min-width: 861px) {
  :root[data-nav="rail"] .sidebar:not(.is-peek) .sidebar-brand { justify-content: center; }
  :root[data-nav="rail"] .sidebar:not(.is-peek) .pf-brand { gap: 0; }
  :root[data-nav="rail"] .sidebar:not(.is-peek) .pf-brand .brand-mark { color: var(--pf-accent); }
}

/* --- grouped navigation ---------------------------------------------------- */
/* Six groups, never a flat wrapping list. Nineteen destinations have to fit a
   laptop viewport without scrolling, so the rows run tighter than the customer
   app's eight - still above the 40px tap floor on a coarse pointer. */
.pf-body .sidebar-nav { gap: 0; padding: 4px 10px 8px; }
.pf-body .nav-link { padding: 6px 10px; font-size: 13px; }
.pf-navgroup + .pf-navgroup { margin-top: 6px; }
.pf-navgroup-head {
  padding: 3px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ss-muted); white-space: nowrap; overflow: hidden;
  opacity: 1; max-width: 200px;
  transition: max-width var(--ss-dur-slow) var(--ss-ease), opacity var(--ss-dur) var(--ss-ease);
}
/* In the rail the words go and a hairline keeps the grouping readable. */
@media (min-width: 861px) {
  :root[data-nav="rail"] .sidebar:not(.is-peek) .pf-navgroup-head {
    max-width: 0; opacity: 0; padding: 0; height: 1px; margin: 8px 14px;
    background: var(--ss-line); border-radius: 1px;
  }
  :root[data-nav="rail"] .sidebar:not(.is-peek) .pf-navgroup:first-child .pf-navgroup-head { margin-top: 0; height: 0; }
}
.pf-body .nav-link.is-active { background: var(--pf-accent-bg); color: var(--ss-ink); box-shadow: inset 2px 0 0 var(--pf-accent); }
.pf-body .nav-link.is-active .icon { color: var(--pf-accent); }

/* --- topbar ---------------------------------------------------------------- */
.pf-body .topbar { background: var(--ss-surface); border-bottom-color: var(--ss-line); }
.pf-role { flex: none; }
.pf-role .badge { background: var(--pf-accent-bg); color: var(--pf-accent); text-transform: capitalize; }
.pf-role .badge::before { background: var(--pf-accent); opacity: 1; }
.pf-who { display: flex; flex-direction: column; min-width: 0; }
.pf-who-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-who-mail { font-size: 12px; color: var(--ss-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The way back to the customer app is a first-class control, not a footnote. */
.pf-exit { white-space: nowrap; }

.sidebar-foot .pf-exit { width: 100%; justify-content: center; }
.pf-body .sidebar-foot { border-top-color: var(--ss-line); display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pf-foot-note { font-size: 11.5px; color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 861px) {
  :root[data-nav="rail"] .sidebar:not(.is-peek) .pf-foot-note { display: none; }
  :root[data-nav="rail"] .sidebar:not(.is-peek) .sidebar-foot .pf-exit .btn-label { display: none; }
  :root[data-nav="rail"] .sidebar:not(.is-peek) .sidebar-foot { padding-left: 12px; padding-right: 12px; }
}

/* ---------------------------------------------------------------------------
   Page furniture
--------------------------------------------------------------------------- */

.pf-body .app-content { display: flex; flex-direction: column; gap: 18px; }
/* h2 inside a card head is a section label, not a page title. */
.pf-body .card-head h2 { font-size: 14.5px; font-weight: 600; margin: 0; }
.pf-body .card-head h3 { font-size: 13px; font-weight: 600; margin: 0; }
.pf-body .card-body h3 { margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-muted); margin: 0; }
.an-hint { font-size: 12.5px; color: var(--ss-muted); }
.pf-body .card-head .an-hint { margin-left: auto; text-align: right; }

.pf-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.pf-grid-2 > .card { min-width: 0; }

/* --- KPI tiles ------------------------------------------------------------ */
/* The old tiles clipped their figures: a fixed-height box with a 22px bold
   number inside it had nowhere to put "1,284,006 MB". Nothing here constrains
   height, the value wraps rather than overflows, and the type scale is real. */
.pf-kpis, .pf-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 164px), 1fr));
}
.pf-kpi, .pf-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 14px 16px; background: var(--ss-surface);
  border: 1px solid var(--ss-line); border-radius: var(--ss-r-lg);
  box-shadow: var(--ss-shadow-sm);
  overflow: visible;
}
.pf-kpi-label, .pf-stat span {
  order: 1;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ss-muted); line-height: 1.35;
}
.pf-kpi-value, .pf-stat b {
  order: 2;
  font-family: var(--ss-font-heading);
  font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ss-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; min-width: 0;
}
.pf-kpi-value .pf-kpi-unit { font-size: .55em; font-weight: 600; color: var(--ss-muted); margin-left: 3px; letter-spacing: 0; }
.pf-kpi-note { order: 3; font-size: 12px; color: var(--ss-muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.pf-kpi-note.is-ok { color: var(--ss-on-ok-tint); }
.pf-kpi-note.is-warn { color: var(--ss-on-warn-tint); }
.pf-kpi-note.is-err { color: var(--ss-err); }

/* --- filter bars ---------------------------------------------------------- */
.pf-filters {
  display: grid; gap: 12px 14px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.pf-filters .field { min-width: 0; }
.pf-filters .check { align-self: center; padding-top: 18px; }
/* The buttons finish the bar on their own full-width row, right-aligned, so a
   filter form with four fields and one with nine still read the same. */
.pf-filter-actions {
  grid-column: 1 / -1; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end;
  padding-top: 12px; border-top: 1px solid var(--ss-line);
}

/* Feature and flag checkboxes: a grid reads as a list of options; a wrapping
   flex row reads as a paragraph of them. */
.pf-checks { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .pf-filters { grid-template-columns: 1fr; }
  .pf-filters .check { padding-top: 0; }
}

/* --- definition grids ----------------------------------------------------- */
.pf-kv { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; font-size: 13.5px; margin: 0; }
.pf-kv dt { color: var(--ss-muted); font-weight: 500; }
.pf-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .pf-kv { grid-template-columns: 1fr; gap: 2px 0; } .pf-kv dd { margin-bottom: 8px; } }

/* --- tables --------------------------------------------------------------- */
/* .table-wrap already scrolls; inside a card it should not draw a second box. */
.pf-body .card { overflow: hidden; }
.pf-body .card > .table-wrap { border: 0; border-radius: 0; background: transparent; overflow-x: auto; }
.pf-body .table th a { color: inherit; text-decoration: none; }
.pf-body .table th a:hover { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 3px; }
.pf-body .table td { vertical-align: top; }
.pf-body .table td .badge + .badge { margin-left: 4px; }

/* The leading cell is a name or a timestamp: wrapping it into four lines to
   save width the table can simply scroll is the wrong trade. */
.pf-body .table td:first-child:not(.pf-empty) { white-space: nowrap; }

/* Every "nothing here" cell reads the same. */
.pf-empty { color: var(--ss-muted); font-size: 13px; text-align: center; padding: 28px 16px !important; }

/* Pagination sits in the card, not floating under it. */
.pf-body .card > nav[aria-label="Pagination"] {
  padding: 12px 20px; border-top: 1px solid var(--ss-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.h-meta { font-size: 12.5px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.h-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- limit-pressure bar (platform/_bar) ----------------------------------- */
.pf-bar { min-width: 130px; }
.pf-bar-track { height: 6px; border-radius: 3px; background: var(--ss-surface-3); overflow: hidden; }
.pf-bar-fill { height: 100%; border-radius: 3px; }

/* ---------------------------------------------------------------------------
   Status vocabulary (section 6 lifecycle)
   ---------------------------------------------------------------------------
   One class per state, applied as `badge pf-st-{{ $status }}`, so the same word
   is the same colour on every screen and an unknown state degrades to the
   neutral .badge rather than to nothing.
--------------------------------------------------------------------------- */
.pf-st-trial, .pf-st-trialing        { background: var(--ss-info-bg); color: var(--ss-info); }
.pf-st-active, .pf-st-published,
.pf-st-completed, .pf-st-succeeded,
.pf-st-paid, .pf-st-ok               { background: var(--ss-ok-bg); color: var(--ss-on-ok-tint); }
.pf-st-past_due, .pf-st-pending,
.pf-st-incomplete, .pf-st-degraded,
.pf-st-open, .pf-st-unpaid           { background: var(--ss-warn-bg); color: var(--ss-on-warn-tint); }
.pf-st-suspended, .pf-st-error,
.pf-st-failed, .pf-st-disabled,
.pf-st-spam, .pf-st-blocked          { background: var(--ss-err-bg); color: var(--ss-err); }
.pf-st-cancelled, .pf-st-canceled,
.pf-st-expired, .pf-st-ended,
.pf-st-draft, .pf-st-archived,
.pf-st-paused, .pf-st-void,
.pf-st-inactive                      { background: var(--ss-surface-2); color: var(--ss-on-muted-tint); }
/* Deleted is terminal, so it is the only status that fills solid. */
.pf-st-deleted, .pf-st-purged        { background: var(--ss-err); color: var(--ss-err-ink); }
.pf-st-deleted::before, .pf-st-purged::before { opacity: 1; }
/* Staff roles read as staff, everywhere. */
.pf-role-badge { background: var(--pf-accent-bg); color: var(--pf-accent); text-transform: capitalize; }
.pf-role-badge::before { background: var(--pf-accent); opacity: 1; }

/* ---------------------------------------------------------------------------
   Impersonation banner (section 7)
   ---------------------------------------------------------------------------
   Rendered inside the customer app, above everything. It is meant to be
   impossible to ignore or to mistake for ordinary chrome.
--------------------------------------------------------------------------- */
.impersonation-banner {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--pf-imp-bg); color: var(--pf-imp-ink);
  font-size: 13.5px; line-height: 1.45;
  border-bottom: 3px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5);
}
.impersonation-banner strong { font-weight: 700; letter-spacing: .01em; }
.impersonation-banner .btn {
  background: var(--pf-imp-ink); color: var(--pf-imp-bg);
  border-color: var(--pf-imp-ink); font-weight: 700;
}
.impersonation-banner .btn:hover { background: #fff; color: var(--pf-imp-bg); border-color: #fff; }
.impersonation-banner .btn:focus-visible { box-shadow: 0 0 0 2px var(--pf-imp-bg), 0 0 0 4px var(--pf-imp-ink); }
@media (prefers-reduced-motion: reduce) {
  .pf-brand-stack, .pf-navgroup-head { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Small screens (down to 390px)
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* nav.css sets .app-main { margin-left: var(--ss-nav-offset) } at top level and
     loads after app.css, so it outranks app.css's own `margin-left: 0` inside
     this breakpoint and the drawer's 248px offset survives on a phone. Undo it
     here for the staff app; the customer app needs the same fix in nav.css. */
  .pf-body .app-main { margin-left: 0; }

  /* Back to app.css's coarse-pointer sizing: the desktop rows above are denser
     than the 40px comfortable-tap floor, and specificity would keep them. */
  .pf-body .nav-link { padding: 11px 12px; font-size: 14px; }
  .pf-body .sidebar-nav { padding: 8px 12px 12px; }
  .pf-body .app-content { padding: 18px 14px 40px; gap: 14px; }
  .pf-kpis, .pf-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
  .pf-kpi, .pf-stat { padding: 12px 13px; }
  .pf-kpi-value, .pf-stat b { font-size: 25px; }
}
@media (max-width: 430px) {
  .pf-kpis, .pf-stats { grid-template-columns: 1fr 1fr; }
  .pf-kpi-label, .pf-stat span { font-size: 11px; letter-spacing: .03em; }
  .pf-kpi-value, .pf-stat b { font-size: 23px; }
  .pf-body .card-head { padding: 14px 16px; flex-wrap: wrap; }
  .pf-body .card-body { padding: 16px; }
  .pf-body .card > nav[aria-label="Pagination"] { padding: 12px 16px; }
  .impersonation-banner { padding: 10px 14px; font-size: 13px; }
}