/*
================================================================================
  ML Software, LLC
  Copyright 2026. All rights reserved.

  Renewal IQ Admin - admin.renewal-iq.com

  admin/assets/css/admin.css
  Version: 1.13.0
  Created: 2026-09-01
  Updated: 2026-09-25

  Description: Complete stylesheet for the Renewal IQ admin console. Design
  tokens are copied from app_renewaliq/assets/css/app.css v2.49.0 so admin
  reads as the same product, but every class carries an adm- prefix and this
  file shares nothing with the user app. No cross-subdomain asset loading.

  Layout differs from the user app on purpose. The user app is a sidebar
  shell built for a customer working inside one account. Admin is a
  top-nav shell built for scanning many accounts at once, so the full
  window width goes to the data table rather than to navigation.

  Sections:
    1.  Reset
    2.  Tokens
    3.  Base
    4.  Login
    5.  Forms
    6.  Buttons
    7.  Shell (topbar, nav, content)
    8.  Toolbar (search, filters, sort)
    9.  Data table
    10. Badges and flags
    11. Detail panel
    12. Impersonation banner
    13. Empty, loading and error states
    14. Confirm bars
    15. Mobile (pointer: coarse)
    16. Documents: permit cards
    17. Customer detail page
    18. Revenue view

  Note: Adds the per-view refresh control (.adm-refresh) beside the count in
  every view header, and the right-hand cluster on location subrows that
  carries the permit count plus the compliance page link.

  1.9.0 adds section 18 for the Revenue view. It reuses the table, badge,
  toolbar and empty-state rules above rather than restating them -- only the
  hero, the movement bars, the stat row, the under-billing bar and a handful
  of grid cell treatments are new.
================================================================================
*/

/* -- 1. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; color-scheme: dark; }
button, [role="button"], a { touch-action: manipulation; }


/* -- 2. Tokens -------------------------------------------------------------- */
:root {
  --bg-page:      #08080a;
  --bg-base:      #0d0d0f;
  --bg-surface:   #16161a;
  --bg-raised:    #1c1c22;
  --bg-overlay:   #222228;
  --border:       #2a2a32;
  --border-light: #333340;

  --amber:      #d97706;
  --amber-dim:  #b45e04;
  --amber-glow: rgba(217, 119, 6, 0.18);

  --green:        #4cff91;
  --green-deep:   #1f6e3a;
  --yellow:       #ffc832;
  --red:          #e02020;
  --crimson:      #7a0000;
  --crimson-text: #ffaaaa;
  --blue:         #4d8fff;

  --text-primary:   #f0f0f4;
  --text-secondary: #b0b0c4;
  --text-dim:       #7a7a94;

  --topbar-h:  60px;
  --radius:    6px;
  --radius-lg: 10px;

  --font-ui:      'Inter', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
}


/* -- 3. Base ---------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


/* -- 4. Login --------------------------------------------------------------- */
.adm-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-base);
  padding: 24px;
}

.adm-login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.adm-login-brand { margin-bottom: 30px; }

.adm-login-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.04em;
}


/* -- 5. Forms --------------------------------------------------------------- */
.adm-form-group { margin-bottom: 16px; }
.adm-form-row   { display: flex; gap: 12px; }
.adm-form-row .adm-form-group { flex: 1; }

.adm-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.adm-form-input,
.adm-form-select,
.adm-form-textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  padding: 8px 12px;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.12s;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

/* Section 4.9 -- appearance:none strips the native arrow, so every select
   must supply a replacement chevron or the control looks inert. */
.adm-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,240,244,0.45)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.adm-form-input:focus,
.adm-form-input:focus-visible,
.adm-form-select:focus,
.adm-form-select:focus-visible,
.adm-form-textarea:focus,
.adm-form-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--amber);
}

.adm-form-input::placeholder { color: var(--text-dim); }

.adm-form-input:-webkit-autofill,
.adm-form-input:-webkit-autofill:hover,
.adm-form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-moz-password-reveal { display: none; }
input[type="password"] { -moz-appearance: none; }

.adm-form-textarea { resize: vertical; min-height: 90px; }

.adm-form-error {
  background: rgba(224, 32, 32, 0.12);
  border: 1px solid rgba(224, 32, 32, 0.3);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.adm-form-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}


/* -- 6. Buttons ------------------------------------------------------------- */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.adm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.adm-btn:focus, .adm-btn:focus-visible { outline: none !important; box-shadow: none !important; }

.adm-btn-primary { background: var(--amber); color: #fff; }
.adm-btn-primary:hover:not(:disabled) { background: var(--amber-dim); }

.adm-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-light);
}
.adm-btn-ghost:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-raised);
}

.adm-btn-danger { background: var(--red); color: #fff; }
.adm-btn-danger:hover:not(:disabled) { background: #c01a1a; }

.adm-btn-block { width: 100%; }
.adm-btn-sm    { padding: 5px 10px; font-size: 12px; }


/* -- 7. Shell --------------------------------------------------------------- */
.adm-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.adm-topbar {
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 300;
}

.adm-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.adm-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.adm-brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.adm-brand-sub {
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 4px;
}

.adm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  margin-left: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.adm-nav::-webkit-scrollbar { display: none; }

/* Underline rather than a filled pill. A pill reads as a button, which
   implies an action; a tab is a location. */
.adm-nav-item {
  padding: 8px 14px 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}

.adm-nav-item:hover { color: var(--text-primary); }

.adm-nav-item.is-active {
  color: var(--amber);
  border-bottom-color: var(--amber);
  background: transparent;
}

.adm-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.adm-whoami {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.adm-content {
  flex: 1;
  padding: 20px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.adm-view-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.adm-view-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.adm-view-count {
  font-size: 13px;
  color: var(--text-dim);
}

.adm-view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The refresh control is deliberately quiet. It appears on all five views,
   so a filled button would compete with the data five times over. It takes
   colour on hover and spins while its request is in flight -- the spin is
   the only signal that anything is happening, since the table keeps showing
   the previous rows until the new ones land. */
.adm-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.adm-refresh:hover:not(:disabled) {
  color: var(--amber);
  border-color: var(--border-light);
  background: var(--bg-raised);
}

.adm-refresh:focus-visible {
  outline: none;
  border-color: var(--amber);
}

.adm-refresh:disabled {
  cursor: default;
  color: var(--amber);
}

.adm-refresh-icon { display: block; }

.adm-refresh.is-spinning .adm-refresh-icon {
  animation: adm-spin 0.6s linear infinite;
}

@keyframes adm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reduced motion still needs in-flight feedback, so the spin is replaced
   rather than simply removed. */
@media (prefers-reduced-motion: reduce) {
  .adm-refresh.is-spinning .adm-refresh-icon { animation: none; }
  .adm-refresh.is-spinning { opacity: 0.45; }
}


/* -- 8. Toolbar ------------------------------------------------------------- */
.adm-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.adm-toolbar-search { flex: 1; min-width: 220px; }
.adm-toolbar-field  { width: auto; min-width: 150px; }


/* -- 9. Data table ---------------------------------------------------------- */
.adm-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.adm-table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.adm-table thead th:hover { color: var(--text-secondary); }
.adm-table thead th.is-sorted { color: var(--amber); }

.adm-sort-caret { margin-left: 4px; font-size: 10px; }

.adm-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}

.adm-table tbody tr:last-child { border-bottom: none; }
.adm-table tbody tr:hover { background: var(--bg-raised); }

/* A trialing account carrying zero permits is the churn signal. Tint the
   whole row so it reads at a glance without needing to scan the count. */
.adm-table tbody tr.is-atrisk { background: rgba(217, 119, 6, 0.07); }
.adm-table tbody tr.is-atrisk:hover { background: rgba(217, 119, 6, 0.13); }

.adm-table td {
  padding: 11px 12px;
  vertical-align: middle;
}

/* Numeric columns are centered under their own headers. The base rule
   .adm-table thead th sets text-align:left and has higher specificity than
   a bare class, so the header selector below must qualify with the table to
   win -- otherwise headers align left while values align elsewhere and each
   count reads as belonging to the next column over. */
.adm-table thead th.adm-td-num,
.adm-table td.adm-td-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.adm-table thead th.adm-td-nowrap,
.adm-table td.adm-td-nowrap { white-space: nowrap; }

.adm-cell-primary { color: var(--text-primary); font-size: 13px; }
.adm-cell-sub     { color: var(--text-dim); font-size: 11px; }

.adm-count-zero {
  color: var(--red);
  font-weight: 600;
}


/* -- 10. Badges and flags --------------------------------------------------- */
.adm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.adm-badge-trialing  { background: rgba(255, 200, 50, 0.14);  color: var(--yellow); }
.adm-badge-active    { background: rgba(76, 255, 145, 0.12);  color: var(--green); }
.adm-badge-pastdue   { background: rgba(224, 32, 32, 0.15);   color: #f87171; }
.adm-badge-cancelled { background: rgba(122, 0, 0, 0.25);     color: var(--crimson-text); }
.adm-badge-neutral   { background: var(--bg-overlay);         color: var(--text-secondary); }

.adm-badge-open        { background: rgba(77, 143, 255, 0.14); color: var(--blue); }
.adm-badge-in_progress { background: rgba(255, 200, 50, 0.14); color: var(--yellow); }
.adm-badge-closed      { background: var(--bg-overlay);        color: var(--text-dim); }

.adm-badge-normal  { background: var(--bg-overlay);        color: var(--text-secondary); }
.adm-badge-high    { background: rgba(255, 156, 58, 0.14); color: #ff9c3a; }
.adm-badge-urgent  { background: rgba(224, 32, 32, 0.15);  color: #f87171; }
.adm-badge-blocker { background: var(--crimson);           color: var(--crimson-text); }

.adm-flag-warn { color: var(--red); font-size: 12px; margin-left: 4px; }

.adm-days-critical { color: var(--red); }
.adm-days-soon     { color: var(--yellow); }
.adm-days-ok       { color: var(--text-secondary); }


/* -- 11. Detail panel ------------------------------------------------------- */
.adm-panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 400;
}

.adm-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 720px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  z-index: 401;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.adm-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.adm-panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.adm-panel-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.adm-panel-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.adm-panel-close:hover { color: var(--text-primary); }

.adm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 32px;
  -webkit-overflow-scrolling: touch;
}

.adm-section { margin-bottom: 26px; }

.adm-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.adm-kv {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}

.adm-kv-k { color: var(--text-dim); }
.adm-kv-v { color: var(--text-primary); word-break: break-word; }

.adm-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.adm-subrow:last-child { border-bottom: none; }

.adm-subrow-main { min-width: 0; }
.adm-subrow-name { color: var(--text-primary); }
.adm-subrow-meta { color: var(--text-dim); font-size: 11px; }

.adm-link {
  color: var(--amber);
  text-decoration: none;
  font-size: 12px;
}
.adm-link:hover { text-decoration: underline; }

/* Right-hand cluster on a location subrow: permit count plus the compliance
   page link. Fixed gap rather than space-between so the link lands in the
   same place on every row regardless of how long the count text is. */
.adm-subrow-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  white-space: nowrap;
}

.adm-comp-none { font-style: italic; opacity: 0.7; }


/* -- 12. Impersonation banner ----------------------------------------------- */
/* Read-only impersonation per D-117. The banner must be impossible to miss --
   forgetting you are impersonating turns every observation into a false
   bug report. */
.adm-imp-banner {
  background: var(--amber);
  color: #1a0f00;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adm-imp-banner .adm-btn {
  border-color: rgba(26, 15, 0, 0.4);
  color: #1a0f00;
}
.adm-imp-banner .adm-btn:hover { background: rgba(26, 15, 0, 0.12); }


/* -- 13. States ------------------------------------------------------------- */
.adm-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-dim);
}

.adm-empty-title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.adm-empty-sub { display: block; font-size: 13px; }

.adm-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.adm-error {
  background: rgba(224, 32, 32, 0.10);
  border: 1px solid rgba(224, 32, 32, 0.28);
  border-radius: var(--radius);
  color: #f87171;
  font-size: 13px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.adm-toast {
  background: rgba(76, 255, 145, 0.10);
  border: 1px solid rgba(76, 255, 145, 0.28);
  border-radius: var(--radius);
  color: var(--green);
  font-size: 13px;
  padding: 10px 14px;
  margin-bottom: 14px;
}


/* -- 14. Confirm bars ------------------------------------------------------- */
/* Section 4.6 / 7.8 -- never native confirm(). */
.adm-confirm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.adm-confirm-text { color: var(--text-secondary); }
.adm-confirm-btns { display: flex; gap: 8px; }


/* -- 15. Mobile ------------------------------------------------------------- */
/* Section 4.8 -- pointer:coarse, never width breakpoints. An iPad Pro in
   landscape reports 1366px, which is wider than most desktop breakpoints. */
@media (pointer: coarse) {

  .adm-content { padding: 14px; }

  .adm-topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
  }

  .adm-nav {
    margin-left: 0;
    order: 3;
    width: 100%;
    padding-bottom: 2px;
  }

  .adm-nav-item { padding: 9px 12px; min-height: 44px; display: flex; align-items: center; }

  .adm-whoami { display: none; }

  /* 16px minimum prevents iOS Safari from zooming the viewport on focus. */
  .adm-form-input,
  .adm-form-select,
  .adm-form-textarea { font-size: 16px; }

  .adm-btn { min-height: 44px; }
  .adm-btn-sm { min-height: 36px; }

  /* Section 7.6 -- 44px minimum touch target. */
  .adm-refresh { width: 44px; height: 44px; }

  .adm-table thead th,
  .adm-table td { padding: 12px 10px; }

  .adm-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .adm-kv-k { margin-top: 8px; }

  .adm-panel { max-width: 100%; }

}

/* -- 16. Documents: permit cards -------------------------------------------- */
/* A flat list of permits with repeated company headings and no boundaries
   reads as one wall of text. Each permit is a bordered card; its files sit
   on a recessed strip inside that card so they are visibly subordinate to
   the permit rather than competing with it. */

.adm-doc-group { margin-bottom: 26px; }

.adm-doc-group-head {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* The company owns everything below it, so it has to outrank the permit
   names inside its cards. At 13px against a 14px permit name the hierarchy
   read backwards -- the parent looked like a caption on its own children. */
.adm-doc-group-co {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
}

.adm-doc-group-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.adm-doc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 10px;
}

.adm-doc-card.is-missing { border-color: #4a1010; }

.adm-doc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
}

.adm-doc-card-main { min-width: 0; }

.adm-doc-card-name {
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 3px;
}

.adm-doc-card-meta {
  color: var(--text-dim);
  font-size: 11px;
}

.adm-doc-card-when {
  text-align: right;
  flex-shrink: 0;
  font-size: 12px;
}

.adm-doc-card-date {
  color: var(--text-dim);
  font-size: 11px;
  margin-top: 2px;
}

.adm-doc-strip {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
}

.adm-doc-strip.is-missing {
  background: #1a1113;
  border-top-color: #3a1010;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 15px;
}

.adm-doc-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--border);
}

.adm-doc-file:last-child { border-bottom: none; }

.adm-doc-file-last { justify-content: space-between; }

.adm-doc-file-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.adm-doc-file-icon {
  font-size: 17px;
  color: var(--amber);
  flex-shrink: 0;
}

.adm-doc-file-text { min-width: 0; }

.adm-doc-file-name {
  color: var(--text-secondary);
  font-size: 12px;
  word-break: break-word;
}

.adm-doc-file-meta {
  color: var(--text-dim);
  font-size: 10px;
}

.adm-doc-warn-icon { font-size: 16px; color: var(--red); flex-shrink: 0; }
.adm-doc-warn-text { color: #f87171; font-size: 12px; }


@media (pointer: coarse) {

  .adm-doc-group-co  { font-size: 21px; }
  .adm-doc-group-sub { font-size: 12px; }

  .adm-doc-card-head { flex-direction: column; gap: 6px; }
  .adm-doc-card-when { text-align: left; }

  .adm-doc-file,
  .adm-doc-strip.is-missing {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

}


/* ============================================================================
   17. Customer detail page

   Panels rather than hairlines: each region is a card on a darker page, so
   separation comes from gaps and elevation. Stat tiles are grouped by
   position (account health, then contents) and coloured by signal -- amber
   or red means this account needs attention, not that the field matters.

   The page itself does not scroll. Only the grid does, with its column
   header sticky inside it.
   ============================================================================ */

.adm-detail-page {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-page, #08080a);
}

.adm-detail-crumb {
  flex: none;
  padding: 16px 24px 0;
  font-size: 12.5px;
}

.adm-detail-head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 6px 24px 14px;
}

.adm-detail-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

.adm-detail-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 3px;
}

.adm-detail-acts {
  display: flex;
  gap: 8px;
  flex: none;
}

/* ---- stat tiles ---------------------------------------------------------- */

.adm-detail-stats {
  flex: none;
  display: grid;
  grid-template-columns: 300px 1fr 14px 1fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 24px 14px;
}

.adm-detail-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
}

/* The gap column separates the two groups. */
.adm-detail-stat.is-gap {
  background: none;
  border: none;
  padding: 0;
}

.adm-detail-stat.is-health { box-shadow: inset 3px 0 0 var(--amber); }
.adm-detail-stat.is-content {
  background: #131317;
  box-shadow: inset 3px 0 0 #2f2f3a;
}

.adm-detail-stat-k {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.adm-detail-stat-v {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.1;
}

.adm-detail-stat-v small {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

.adm-detail-stat-f {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* Signal overrides the group accent. */
.adm-detail-stat.sig-warn {
  border-color: rgba(217, 119, 6, .38);
  background: linear-gradient(180deg, #221a12, #16161a);
  box-shadow: inset 3px 0 0 var(--amber);
}

.adm-detail-stat.sig-warn .adm-detail-stat-v { color: var(--yellow); }

.adm-detail-stat.sig-bad {
  border-color: rgba(224, 32, 32, .45);
  background: linear-gradient(180deg, #241416, #16161a);
  box-shadow: inset 3px 0 0 var(--red);
}

.adm-detail-stat.sig-bad .adm-detail-stat-v { color: #ff6b6b; }
.adm-detail-stat.sig-bad .adm-detail-stat-f { color: #ff9a9a; }

/* ---- split --------------------------------------------------------------- */

.adm-detail-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  padding: 0 24px 18px;
}

.adm-detail-side {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 22px;
  overflow-y: auto;
}

.adm-detail-sect {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin: 0 0 10px;
}

.adm-detail-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  font-size: 13px;
  margin-bottom: 22px;
}

.adm-detail-kv .k { color: var(--text-dim); }
.adm-detail-kv .v { text-align: right; word-break: break-word; }

.adm-detail-note {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
}

.adm-detail-note-t { font-size: 12.5px; color: var(--text-secondary); }

.adm-detail-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 8px;
  line-height: 1.5;
}

.adm-detail-qty { display: flex; gap: 8px; margin-top: 10px; }

.adm-detail-input {
  width: 72px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 7px 9px;
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
  -moz-appearance: textfield;
}

.adm-detail-input::-webkit-outer-spin-button,
.adm-detail-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.adm-detail-input:focus { outline: none; border-color: var(--amber); }

/* ---- main panel ---------------------------------------------------------- */

.adm-detail-main {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.adm-detail-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 16px;
  background: #131317;
  border-bottom: 1px solid var(--border);
}

.adm-detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 13.5px;
  padding: 13px 14px;
  cursor: pointer;
  min-height: 44px;
}

.adm-detail-tab:hover { color: var(--text-secondary); }

.adm-detail-tab.is-on {
  color: var(--text-primary);
  border-bottom-color: var(--amber);
}

.adm-detail-tab .n {
  color: var(--text-dim);
  font-size: 11.5px;
  margin-left: 5px;
}

/* Only this scrolls. */
.adm-detail-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.adm-detail-gridfoot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  background: #131317;
  font-size: 11.5px;
  color: var(--text-dim);
}

.adm-gridtoggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.adm-gridtoggle input { cursor: pointer; }

.adm-detail-gridfoot .adm-btn { margin-left: auto; }

/* border-collapse:separate is required -- sticky headers lose their border
   under collapse. */
.adm-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.adm-detail-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  background: #131317;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.adm-detail-table th.no-sort { cursor: default; }
.adm-detail-table th:hover { color: var(--text-primary); }

.adm-detail-table th .ar {
  opacity: .25;
  margin-left: 5px;
  font-size: 9px;
}

.adm-detail-table th.sorted .ar { opacity: 1; color: var(--amber); }

.adm-detail-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #1f1f26;
  vertical-align: top;
}

.adm-detail-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.adm-detail-table .nm  { font-weight: 500; }
.adm-detail-table .dim { color: var(--text-dim); font-size: 12px; }
.adm-detail-table .r   { text-align: right; }

.adm-detail-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 18px 22px;
}

.adm-detail-soon { color: var(--yellow); }
.adm-detail-late { color: var(--red); }

@media (max-width: 900px) {

  .adm-detail-page { position: static; }
  .adm-detail-split { grid-template-columns: 1fr; }
  .adm-detail-side { overflow: visible; }
  .adm-detail-stats { grid-template-columns: repeat(2, 1fr); }
  .adm-detail-stat.is-gap { display: none; }
  .adm-detail-tabs { overflow-x: auto; }
  .adm-detail-head { flex-direction: column; }

}

/* A control that looks like a link but is a button, so a click handler can
   attach the JWT before opening the download. */
.adm-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--amber);
  cursor: pointer;
  text-decoration: none;
}

.adm-linkbtn:hover { text-decoration: underline; }


/* ============================================================================
   18. Revenue view

   One run-rate figure owns the top, the month's movement sits beside it, then
   cash, then the book. Colour carries meaning and nothing else: green is money
   that arrived, amber is money at stake or owed to us, red is money actively
   failing. A figure that is merely large gets no colour at all.
   ============================================================================ */

/* ---- hero ---------------------------------------------------------------- */

.adm-rev-hero {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 32px;
  align-items: center;
}

.adm-rev-hero-k {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.adm-rev-hero-v {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 800;
  line-height: 1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.adm-rev-hero-v small {
  font-size: 20px;
  color: var(--text-dim);
  font-weight: 600;
}

.adm-rev-hero-move {
  font-size: 13px;
  margin-top: 10px;
  color: var(--text-secondary);
}

.adm-rev-hero-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* ---- movement bars ------------------------------------------------------- */
/* Heights are set inline by admin.js, scaled against the largest figure in
   the set. A fixed scale here would render every bar as a stub at today's
   numbers and as an overflow later. */

.adm-rev-fall {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
}

.adm-rev-fall-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  text-align: center;
}

.adm-rev-fall-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
}

.adm-rev-base  { background: var(--bg-overlay); }
.adm-rev-new   { background: var(--green-deep); }
.adm-rev-exp   { background: #2d6f52; }
.adm-rev-churn { background: var(--crimson); }

/* An unmeasured bar is hatched rather than flat, so it does not read as a
   measurement that came back zero. */
.adm-rev-untracked {
  background: repeating-linear-gradient(
    45deg,
    #232329,
    #232329 3px,
    #1a1a20 3px,
    #1a1a20 6px
  );
}

.adm-rev-fall-n {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.adm-rev-fall-k {
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.5;
}

.adm-rev-note {
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: none;
  font-style: italic;
  opacity: 0.75;
}

/* ---- stat row ------------------------------------------------------------ */

.adm-rev-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.adm-rev-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
}

/* Cash gets the green rail. MRR is a run rate and lives in the hero; these
   two are what actually landed and what is actually coming. */
.adm-rev-stat.is-cash { box-shadow: inset 3px 0 0 var(--green-deep); }
.adm-rev-stat.is-cash .adm-rev-stat-v { color: var(--green); }

.adm-rev-stat.is-content {
  background: #131317;
  box-shadow: inset 3px 0 0 #2f2f3a;
}

.adm-rev-stat.sig-warn {
  border-color: rgba(217, 119, 6, 0.38);
  background: linear-gradient(180deg, #221a12, #16161a);
  box-shadow: inset 3px 0 0 var(--amber);
}
.adm-rev-stat.sig-warn .adm-rev-stat-v { color: var(--yellow); }

.adm-rev-stat.sig-bad {
  border-color: rgba(224, 32, 32, 0.45);
  background: linear-gradient(180deg, #241416, #16161a);
  box-shadow: inset 3px 0 0 var(--red);
}
.adm-rev-stat.sig-bad .adm-rev-stat-v { color: #ff6b6b; }
.adm-rev-stat.sig-bad .adm-rev-stat-f { color: #ff9a9a; }

.adm-rev-stat-k {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.adm-rev-stat-v {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.adm-rev-stat-v small {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

.adm-rev-stat-f {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* ---- under-billing bar --------------------------------------------------- */
/* Amber, not red: nothing is broken for the customer, only for us. Red stays
   reserved for a charge that is actively failing, and the two have to remain
   distinguishable at a glance. admin.js omits this block entirely when the
   figure is zero. */

.adm-rev-gap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #221a12, #16161a);
  border: 1px solid rgba(217, 119, 6, 0.38);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  margin-bottom: 16px;
}

.adm-rev-gap-v {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.adm-rev-gap-per {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 600;
}

.adm-rev-gap-t {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.adm-rev-gap-t b { color: var(--text-primary); font-weight: 600; }

.adm-rev-gap-act {
  background: transparent;
  border: 1px solid rgba(217, 119, 6, 0.5);
  border-radius: var(--radius);
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.adm-rev-gap-act:hover { background: rgba(217, 119, 6, 0.12); }

/* ---- grid cells ---------------------------------------------------------- */

/* Shows how far short the billed quantity is, rather than making the reader
   subtract two columns in their head. */
.adm-rev-short {
  color: var(--yellow);
  font-weight: 600;
}

.adm-rev-short-f {
  display: block;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
}

.adm-rev-tot {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.adm-table tfoot td {
  padding: 12px;
  border-top: 1px solid var(--border-light);
  background: #131317;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* A cancelled row is history, not a live concern. Dimming the whole row keeps
   it readable and scannable without it competing with the accounts that need
   something. */
.adm-table tbody tr.is-gone td { opacity: 0.55; }

.adm-rev-pos { color: var(--green); }
.adm-rev-neg { color: #ff6b6b; }
.adm-rev-dim { color: var(--text-dim); }
.adm-rev-amb { color: var(--amber); }

.adm-rev-foot-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}

.adm-rev-foot-note span.d { color: var(--amber); }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1250px) {
  .adm-rev-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .adm-rev-hero { grid-template-columns: 1fr; gap: 22px; }
  .adm-rev-hero-v { font-size: 48px; }
}

/* Section 4.8 -- pointer:coarse, never width breakpoints. */
@media (pointer: coarse) {
  .adm-rev-hero { padding: 18px 16px; }
  .adm-rev-gap-act { min-height: 44px; }
  .adm-rev-fall { height: 110px; }
}

/* -- 19. Research ----------------------------------------------------------- */
.adm-rs-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.adm-rs-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); font: 600 14px var(--font-ui); padding: 10px 14px; cursor: pointer; min-height: 44px; }
.adm-rs-tab.is-on { color: var(--text-primary); border-bottom-color: var(--amber); }
.adm-rs-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); min-height: 60vh; }
.adm-rs-queue { border-right: 1px solid var(--border); background: var(--bg-base); border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow: hidden; }
.adm-rs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }
.adm-rs-chip { height: 32px; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); font: 600 12.5px var(--font-ui); cursor: pointer; }
.adm-rs-chip i { font-style: normal; opacity: 0.7; margin-left: 5px; }
.adm-rs-chip.is-on { border-color: var(--amber); color: #f5b453; background: var(--amber-glow); }
.adm-rs-qi { padding: 12px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.adm-rs-qi:hover { background: var(--bg-raised); }
.adm-rs-qi.is-on { background: var(--bg-raised); box-shadow: inset 3px 0 0 var(--amber); }
.adm-rs-qn { font-weight: 700; color: var(--text-primary); }
.adm-rs-qs { font-size: 12.5px; color: var(--text-secondary); }
.adm-rs-qm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.adm-rs-qe { margin-top: 4px; font-size: 12px; color: var(--yellow); }
.adm-rs-none { padding: 18px 14px; color: var(--text-dim); }
.adm-rs-st { font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.adm-rs-st-ready { background: var(--amber-glow); color: #f5b453; }
.adm-rs-st-queued, .adm-rs-st-running { background: rgba(77, 143, 255, 0.14); color: var(--blue); }
.adm-rs-st-needs_you { background: rgba(255, 200, 50, 0.14); color: var(--yellow); }
.adm-rs-st-approved { background: rgba(76, 255, 145, 0.12); color: var(--green); }
.adm-rs-st-rejected { background: rgba(224, 32, 32, 0.14); color: var(--crimson-text); }
.adm-rs-tag { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.adm-rs-tag-no { background: rgba(76, 255, 145, 0.12); color: var(--green); }
.adm-rs-tag-blk { background: rgba(255, 200, 50, 0.14); color: var(--yellow); }
.adm-rs-main { padding: 22px 24px 40px; min-width: 0; }
.adm-rs-hdr { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.adm-rs-hdr h2 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text-primary); }
.adm-rs-sub { color: var(--text-secondary); }
.adm-rs-who { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-secondary); }
.adm-rs-who b { color: var(--text-primary); }
.adm-rs-banner { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: var(--bg-raised); color: var(--text-secondary); }
.adm-rs-banner b { color: var(--text-primary); }
.adm-rs-banner a { color: #f5b453; }
.adm-rs-banner-sub { margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.adm-rs-banner-ok { border-color: rgba(76, 255, 145, 0.35); background: rgba(76, 255, 145, 0.06); }
.adm-rs-banner-warn { border-color: rgba(255, 200, 50, 0.4); background: rgba(255, 200, 50, 0.06); }
.adm-rs-banner-run { border-color: rgba(77, 143, 255, 0.4); background: rgba(77, 143, 255, 0.06); }
.adm-rs-banner-bad { border-color: rgba(224, 32, 32, 0.4); background: rgba(224, 32, 32, 0.06); }
.adm-rs-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.adm-rs-sum div { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; min-width: 0; }
.adm-rs-sum b { display: block; font-size: 19px; color: var(--text-primary); }
.adm-rs-sum b.is-warn { color: var(--yellow); }
.adm-rs-sum b.is-bad { color: var(--crimson-text); }
.adm-rs-sum span { font-size: 12px; color: var(--text-dim); }
.adm-rs-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.adm-rs-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.adm-rs-ch h3 { margin: 0; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.adm-rs-ch span { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.adm-rs-pad { padding: 14px 16px; }
.adm-rs-f { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px 90px; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); align-items: start; }
.adm-rs-f:last-child { border-bottom: 0; }
.adm-rs-fl { font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.adm-rs-v { font-size: 15px; color: var(--text-primary); }
.adm-rs-f.is-miss .adm-rs-v { color: var(--text-dim); }
.adm-rs-f.is-cut .adm-rs-v { color: var(--text-dim); text-decoration: line-through; }
.adm-rs-q { margin-top: 6px; font-size: 12.5px; font-style: italic; color: var(--text-secondary); border-left: 2px solid var(--border-light); padding-left: 10px; }
.adm-rs-src, .adm-rs-sn, .adm-rs-rn { margin-top: 5px; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.adm-rs-rn b { color: var(--text-secondary); }
.adm-rs-src a, .adm-rs-sn a { color: #f5b453; }
.adm-rs-flag { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 2px 8px; }
.adm-rs-flag-blk { background: rgba(255, 200, 50, 0.14); color: var(--yellow); }
.adm-rs-flag-cut { background: rgba(224, 32, 32, 0.14); color: var(--crimson-text); }
.adm-rs-flag-edit { background: var(--amber-glow); color: #f5b453; }
.adm-rs-conf { font-size: 12px; font-weight: 700; }
.adm-rs-conf-high { color: var(--green); }
.adm-rs-conf-medium { color: var(--yellow); }
.adm-rs-conf-low { color: var(--crimson-text); }
.adm-rs-fa { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.adm-rs-lnk { background: none; border: 0; padding: 0; color: #f5b453; font: 600 12.5px var(--font-ui); cursor: pointer; }
.adm-rs-lnk.is-dim { color: var(--text-dim); }
.adm-rs-fv .adm-form-input, .adm-rs-fv .adm-form-select, .adm-rs-panel .adm-form-input { width: 100%; margin-top: 6px; }
.adm-rs-fv textarea.adm-form-input, .adm-rs-panel textarea.adm-form-input { min-height: 66px; resize: vertical; }
.adm-rs-numrow { display: flex; gap: 8px; align-items: center; }
.adm-rs-numrow .adm-form-input { max-width: 140px; }
.adm-rs-numrow span { color: var(--text-dim); margin-top: 6px; }
.adm-rs-el, .adm-rs-pl { display: block; margin: 12px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.adm-rs-erow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.adm-rs-hidden { padding: 12px 16px; color: var(--text-dim); font-size: 13px; }
.adm-rs-acct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.adm-rs-acct:last-child { border-bottom: 0; }
.adm-rs-acct span { color: var(--text-secondary); }
.adm-rs-tl { padding: 6px 16px 12px; }
.adm-rs-tli { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; color: var(--text-secondary); }
.adm-rs-tli:last-child { border-bottom: 0; }
.adm-rs-tli span:first-child { color: var(--text-dim); }
.adm-rs-acts { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0 10px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.adm-rs-acts .adm-btn { min-height: 44px; }
.adm-rs-bad { color: var(--crimson-text) !important; }
.adm-rs-note { margin-left: auto; font-size: 12.5px; color: var(--text-dim); max-width: 420px; }
.adm-rs-panel { background: var(--bg-overlay); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; }
.adm-rs-panel h4 { margin: 0 0 4px; font-size: 16px; color: var(--text-primary); }
.adm-rs-panel p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-secondary); }
.adm-rs-rad { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); margin: 4px 0; }
.adm-rs-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.adm-rs-checks label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); }
.adm-rs-rad input, .adm-rs-checks input { accent-color: var(--amber); width: 16px; height: 16px; }
.adm-rs-flash { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 380px; background: var(--bg-overlay); border: 1px solid rgba(76, 255, 145, 0.4); color: var(--text-primary); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.adm-rs-flash.is-bad { border-color: rgba(224, 32, 32, 0.5); }
.adm-rs-inst { max-width: 1000px; }
.adm-rs-pre { margin: 0; white-space: pre-wrap; font: 13.5px/1.6 'JetBrains Mono', ui-monospace, monospace; color: var(--text-secondary); }
.adm-rs-instedit { width: 100%; min-height: 380px; font: 13.5px/1.6 'JetBrains Mono', ui-monospace, monospace; }
.adm-rs-ver { display: grid; grid-template-columns: 110px 110px minmax(0, 1fr) 90px 110px; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-secondary); align-items: center; }
.adm-rs-ver:last-child { border-bottom: 0; }
.adm-rs-ver .is-cur { color: var(--green); font-weight: 700; }
.adm-rs-brief { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin: 18px 0; }
.adm-rs-box { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.adm-rs-box h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.adm-rs-box ul, .adm-rs-box ol { margin: 0; padding-left: 20px; color: var(--text-primary); }
.adm-rs-box li { margin: 6px 0; }
.adm-rs-box a { color: #f5b453; }
.adm-rs-todo { border-color: rgba(255, 200, 50, 0.45); background: rgba(255, 200, 50, 0.05); }
.adm-rs-todo .is-ok { color: var(--green); }
.adm-rs-dimp { margin: 0; color: var(--text-dim); }
.adm-rs-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; }
.adm-rs-tag2 { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.adm-rs-t-dates { background: var(--amber-glow); color: #f5b453; }
.adm-rs-t-cust { background: rgba(77, 143, 255, 0.14); color: #9cc0ff; }
.adm-rs-t-extra { background: rgba(122, 122, 148, 0.18); color: var(--text-secondary); }
.adm-rs-foldh { margin: 20px 0 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.adm-rs-row { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
.adm-rs-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 13px 16px 0; }
.adm-rs-rh b { font-size: 16px; color: var(--text-primary); }
.adm-rs-rq { flex-basis: 100%; font-size: 13.5px; color: var(--text-dim); }
.adm-rs-rb { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; padding: 10px 16px 14px; }
.adm-rs-rmain { min-width: 0; }
.adm-rs-ans { font-size: 17px; color: var(--text-primary); }
.adm-rs-ans.is-none { color: var(--text-dim); }
.adm-rs-ans.is-cut { text-decoration: line-through; }
.adm-rs-why { margin-top: 6px; font-size: 13.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.adm-rs-why a, .adm-rs-proof a, .adm-rs-raw a { color: #f5b453; }
.adm-rs-sugg { margin-top: 8px; font-size: 13.5px; color: var(--text-primary); border: 1px dashed rgba(255, 200, 50, 0.5); border-radius: var(--radius); padding: 8px 10px; }
.adm-rs-sugg b { color: var(--yellow); }
.adm-rs-proof { margin-top: 8px; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.adm-rs-proof i { display: block; border-left: 2px solid var(--border-light); padding-left: 10px; margin-bottom: 4px; }
.adm-rs-raw { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
.adm-rs-raw summary { cursor: pointer; }
.adm-rs-raw div { margin-top: 4px; overflow-wrap: anywhere; }
.adm-rs-verdict { border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 11px 13px; font-size: 13.5px; color: var(--text-secondary); align-self: start; }
.adm-rs-verdict b { display: block; margin-bottom: 3px; color: var(--text-primary); }
.adm-rs-v-ok { border-color: rgba(76, 255, 145, 0.35); } .adm-rs-v-ok b { color: var(--green); }
.adm-rs-v-check { border-color: rgba(255, 200, 50, 0.45); } .adm-rs-v-check b { color: var(--yellow); }
.adm-rs-v-fix { border-color: rgba(217, 119, 6, 0.6); background: rgba(217, 119, 6, 0.08); } .adm-rs-v-fix b { color: #f5b453; }
.adm-rs-v-bad { border-color: rgba(224, 32, 32, 0.45); } .adm-rs-v-bad b { color: var(--crimson-text); }
.adm-rs-v-normal b { color: var(--text-secondary); }
.adm-rs-vact { display: flex; gap: 16px; margin-top: 10px; }
.adm-rs-main { position: relative; }
.adm-rs-busy { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; background: rgba(13, 13, 15, 0.72); cursor: progress; }
.adm-rs-busy-box { position: sticky; top: 120px; display: flex; align-items: center; gap: 14px; background: var(--bg-overlay); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); max-width: 420px; }
.adm-rs-busy-box b { display: block; color: var(--text-primary); }
.adm-rs-busy-box span { display: block; font-size: 13px; color: var(--text-dim); }
.adm-rs-spin { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border-light); border-top-color: var(--amber); animation: adm-rs-spin 0.8s linear infinite; }
@keyframes adm-rs-spin { to { transform: rotate(360deg); } }
body.adm-rs-waiting, body.adm-rs-waiting * { cursor: progress !important; }
.adm-rs-drop { margin-top: 12px; border: 2px dashed var(--border-light); border-radius: var(--radius-lg); padding: 14px 16px; font-size: 13.5px; color: var(--text-secondary); text-align: center; transition: border-color 0.15s, background 0.15s; }
.adm-rs-drop b { color: var(--text-primary); }
.adm-rs-drop.is-over { border-color: var(--amber); background: var(--amber-glow); }
.adm-rs-drop-sm { text-align: left; padding: 10px 12px; }
.adm-rs-docnote { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.adm-rs-docnote span { display: block; margin-top: 3px; color: var(--yellow); }
.adm-rs-prop { margin-top: 10px; border: 1px solid rgba(76, 255, 145, 0.4); background: rgba(76, 255, 145, 0.05); border-radius: var(--radius-lg); padding: 12px 14px; }
.adm-rs-prop.is-no { border-color: var(--border-light); background: transparent; color: var(--text-secondary); font-size: 13.5px; }
.adm-rs-prop-h { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.adm-rs-prop-a { margin-top: 4px; font-size: 17px; color: var(--text-primary); }
.adm-rs-prop .adm-rs-vact { align-items: center; }
.adm-rs-banner-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.adm-rs-banner-act span { font-size: 13px; color: var(--text-dim); }
@media (max-width: 1024px) {
  .adm-rs-wrap { grid-template-columns: 1fr; }
  .adm-rs-queue { border-right: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 320px; overflow-y: auto; }
  .adm-rs-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .adm-rs-main { padding: 16px 14px 30px; }
  .adm-rs-f { grid-template-columns: 1fr; gap: 6px; }
  .adm-rs-rb { grid-template-columns: 1fr; }
  .adm-rs-brief { grid-template-columns: 1fr; }
  .adm-rs-fa { flex-direction: row; align-items: center; gap: 16px; }
  .adm-rs-checks { grid-template-columns: 1fr; }
  .adm-rs-ver { grid-template-columns: 1fr 1fr; }
  .adm-rs-who { margin-left: 0; text-align: left; }
  .adm-rs-note { margin-left: 0; }
  .adm-rs-tli { grid-template-columns: 1fr; gap: 2px; }
}
@media (pointer: coarse) {
  .adm-rs-lnk { min-height: 44px; }
  .adm-rs-chip { min-height: 44px; }
  .adm-rs-main .adm-form-input, .adm-rs-main .adm-form-select, .adm-rs-inst .adm-form-input { font-size: 16px; }
}