/* ===========================================================================
   COMMAND CENTER — the shared layer
   ===========================================================================

   Extracted from the <style> block in base.html. Everything here was already
   shared by every page that extends base.html; it was just being re-sent with
   each response and could not be cached.

   WHAT LIVES HERE
     base type and resets, the two-row shell (.cc-*), and the component layer:
     .panel, .panel-head, .page-head, .btn, .badge, .alert, .data-table,
     .grid-*, .stat-card, form controls, and the billing chaos bar.

   WHAT DOES NOT
     the tokens. The ':root' / '[data-theme]' block stays in an inline <style>
     in base.html, because it is the one part a Django template may need to
     write into. Everything below spends those variables and never redeclares
     one — if you need a colour here that does not exist, add it to base.html
     rather than inventing a literal.

   Load order is base.html: tokens inline, then this file, then the page's own
   {% block extra_css %}. CSS variables resolve at use time, so the inline
   token block does not need to come first for the cascade to work — but it
   does, which keeps the file readable.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
background: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.5;
margin: 0;
padding: 0;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; }
a { color: var(--accent-cyan); text-decoration: none; }
a:hover { color: var(--accent-cyan-lt); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
::selection { background: rgba(116,157,196,0.3); }

/* Numbers align. Anything tabular, timed or counted goes mono. */
.num, .mono, code, pre,
.data-table td[data-col], .data-table td[data-val],
.stat-card .stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ═══ SHELL: top bar (identity) + row 2 (section) ═══════════ */
.cc-shell { position: sticky; top: 0; z-index: 1000; }

.cc-bar {
display: flex;
align-items: stretch;
background: var(--bg-nav);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border-subtle);
min-height: var(--nav-height);
text-align: left;
}

.cc-brand {
display: flex; align-items: center; gap: 9px;
padding: 0 16px; flex-shrink: 0;
color: var(--text-main); text-decoration: none;
}
.cc-brand svg { color: var(--accent-orange); flex-shrink: 0; }
.cc-brand b {
font-family: var(--font-head); font-size: 17px; font-weight: 700;
letter-spacing: 0.03em; white-space: nowrap; color: var(--hover-text);
}

/* Row-1 tabs — the four sections */
.cc-tabs { display: flex; align-items: center; gap: 3px; flex: 1; padding: 0 8px; min-width: 0; }
.cc-tab {
display: flex; align-items: center; gap: 7px;
padding: 7px 13px;
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-dim); background: transparent;
border: 1px solid transparent; border-radius: 0;
text-decoration: none; white-space: nowrap; cursor: pointer;
}
.cc-tab:hover { color: var(--hover-text); background: var(--hover-bg); border-color: var(--border-subtle); }
.cc-tab:active { background: var(--steel-dim); }
.cc-tab.is-active {
color: var(--bg-dark); background: var(--accent-orange);
border-color: var(--accent-orange); font-weight: 600;
}
.cc-tab.is-active:hover { color: var(--bg-dark); background: var(--accent-cyan); border-color: var(--accent-cyan); }

/* Right cluster — live state, faction, identity */
.cc-right { display: flex; align-items: center; gap: 10px; padding: 0 12px; flex-shrink: 0; }
.cc-icon-btn {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
color: var(--text-dim); background: transparent;
border: 1px solid transparent; border-radius: 0; cursor: pointer;
}
.cc-icon-btn:hover { color: var(--hover-text); background: var(--hover-bg); border-color: var(--border-subtle); }
.cc-logout { color: var(--danger-red); }
.cc-logout:hover { color: var(--danger-red); background: rgba(176,106,92,0.12); border-color: rgba(176,106,92,0.5); }

.cc-who { display: flex; flex-direction: column; line-height: 1.15; }
.cc-who b { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--hover-text); }
.cc-who span { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.04em; }

/* Live pill — one of only two places glow is allowed */
.cc-live {
display: flex; align-items: center; gap: 6px;
padding: 4px 8px; border: 1px solid rgba(217,140,63,0.55); background: rgba(217,140,63,0.1);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
color: var(--warn-yellow); white-space: nowrap;
}
.cc-live i {
width: 6px; height: 6px; background: var(--warn-yellow);
box-shadow: 0 0 8px var(--warn-yellow);
animation: cc-pulse 2s ease-in-out infinite;
}
@keyframes cc-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* ═══ ROW 2: the current section's pages ════════════════════ */
.cc-row2 {
display: flex; align-items: center; gap: 16px;
padding: 0 16px;
min-height: var(--row2-height);
background: var(--bg-dark);
border-bottom: 1px solid var(--border-subtle);
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.cc-row2::-webkit-scrollbar { height: 3px; }
.cc-row2::-webkit-scrollbar-thumb { background: var(--steel-deep); }
.cc-row2-label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--text-faint); flex-shrink: 0;
}
.cc-row2 nav { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.cc-row2 a {
font-family: var(--font-ui); font-size: 13px; color: var(--text-dim);
white-space: nowrap; padding: 3px 0; border-bottom: 1px solid transparent;
}
.cc-row2 a:hover { color: var(--hover-text); }
.cc-row2 a.is-active {
color: var(--accent-cyan); font-weight: 600; border-bottom-color: var(--accent-cyan);
}
.cc-row2 a.is-priv { color: var(--amber); }
.cc-row2 a.is-priv:hover { color: var(--amber-lt); }
.cc-group {
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--text-faint);
padding-left: 15px; border-left: 1px solid var(--border-subtle);
flex-shrink: 0; align-self: stretch; display: flex; align-items: center;
}

/* ═══ PAGE HEADER — one per page, always the same shape ════ */
.page-head {
max-width: 1400px; margin: 0 auto;
padding: 22px 16px 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.page-head .kicker {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px;
}
.page-head h1 {
font-family: var(--font-head); font-size: clamp(22px, 3vw, 30px);
font-weight: 700; letter-spacing: -0.01em; margin: 0;
color: var(--hover-text); text-transform: none; text-shadow: none;
}
.page-head .page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Legacy .site-header keeps working — restyled to the same shape. */
.site-header { max-width: 1400px; margin: 0 auto; padding: 22px 16px 0; text-align: left; }
.site-header h1 {
font-family: var(--font-head); font-size: clamp(22px, 3vw, 30px); font-weight: 700;
margin: 0; letter-spacing: -0.01em; text-transform: none;
text-shadow: none; color: var(--hover-text);
}

/* ═══ CONTENT ══════════════════════════════════════════════ */
.page-content { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; }

/* ═══ THE THREE CONTAINERS: panel · stat cell · table ══════ */
.panel {
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-radius: 0;
padding: 18px;
box-shadow: none;
margin-bottom: 16px;
}
.panel > h2, .panel > h3, .panel > h4 { margin-top: 0; }
.panel-alt { background: var(--bg-panel-alt); border-color: var(--border-subtle); }
.panel-cyan { border-color: var(--steel-deep); border-top: 2px solid var(--accent-orange); }
/* Every page was writing style="flex:0 0 100%" inline for a full-width panel. */
.panel-full { flex: 0 0 100%; }

/* Panel with a header bar — the 1B treatment */
.panel-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: -18px -18px 16px;
padding: 10px 16px;
background: var(--bg-panel-alt);
border-bottom: 1px solid var(--border-subtle);
}
/* Header-only panel: drop the body padding so there's no dead band. */
.panel > .panel-head:last-child { margin-bottom: -18px; }
.panel-head h2, .panel-head h3, .panel-head h4 {
margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700;
color: var(--hover-text);
}

.stat-card {
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-top: 2px solid var(--steel-deep);
border-radius: 0;
padding: 14px 16px;
text-align: left;
}
.stat-card .stat-value {
display: block;
font-family: var(--font-mono); font-size: 25px; font-weight: 600;
color: var(--hover-text); text-shadow: none; line-height: 1.1;
}
.stat-card .stat-label {
display: block;
font-family: var(--font-ui); font-size: 12px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px;
}

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
background: var(--bg-table-head);
color: var(--text-dim);
font-family: var(--font-ui); font-size: 11px; font-weight: 600;
padding: 9px 12px; text-align: left;
border-bottom: 1px solid var(--border-subtle);
text-transform: uppercase; letter-spacing: 0.1em;
cursor: pointer; user-select: none; white-space: nowrap;
}
.data-table th:hover { color: var(--hover-text); background: var(--hover-bg); }
.data-table th.sort-asc::after  { content: ' ▲'; color: var(--accent-cyan); }
.data-table th.sort-desc::after { content: ' ▼'; color: var(--accent-cyan); }
.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-inner); }
.data-table tbody tr:nth-child(odd) { background: var(--bg-panel); }
.data-table tbody tr:nth-child(even) { background: var(--bg-panel-alt); }
.data-table tbody tr:hover { background: var(--hover-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ═══ BUTTONS ══════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
border: 1px solid var(--border-subtle);
border-radius: 0;
background: var(--bg-panel);
color: var(--text-main);
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
letter-spacing: 0.04em; text-transform: uppercase;
cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--hover-bg); border-color: var(--steel-deep); color: var(--hover-text); }
.btn:active { background: var(--steel-dim); }
.btn-primary, .btn-cyan {
background: var(--accent-orange); border-color: var(--accent-orange);
color: var(--bg-dark); font-weight: 600;
}
.btn-primary:hover, .btn-cyan:hover {
background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--bg-dark);
}
.btn-danger { border-color: rgba(176,106,92,0.6); color: var(--danger-red); background: transparent; }
.btn-danger:hover { background: rgba(176,106,92,0.15); border-color: var(--danger-red); color: var(--danger-red-lt); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══ BADGES / TAGS — square, quiet ════════════════════════ */
.badge {
display: inline-block; padding: 2px 7px; border-radius: 0;
font-family: var(--font-mono); font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.07em;
border: 1px solid;
}
.badge-green  { color: var(--success-green); border-color: rgba(127,168,138,0.5); background: rgba(127,168,138,0.1); }
.badge-red    { color: var(--danger-red);    border-color: rgba(176,106,92,0.5);  background: rgba(176,106,92,0.1); }
.badge-yellow { color: var(--warn-yellow);   border-color: rgba(217,140,63,0.5);  background: rgba(217,140,63,0.1); }
.badge-cyan   { color: var(--accent-cyan);   border-color: var(--steel-deep);     background: rgba(116,157,196,0.1); }
.badge-orange { color: var(--accent-cyan);   border-color: var(--steel-deep);     background: rgba(116,157,196,0.1); }
/* Capacity states, from the chain watcher's sign-up grid. They were three
   hand-rolled neons; they are the green/yellow/red badges under other names. */
.badge-full  { color: var(--success-green); border-color: rgba(127,168,138,0.5); background: rgba(127,168,138,0.1); }
.badge-low   { color: var(--warn-yellow);   border-color: rgba(217,140,63,0.5);  background: rgba(217,140,63,0.1); }
.badge-empty { color: var(--danger-red);    border-color: rgba(176,106,92,0.5);  background: rgba(176,106,92,0.1); }

/* ═══ ALERTS — the other place glow is allowed ═════════════ */
.alert {
padding: 11px 15px; border-radius: 0; margin-bottom: 14px;
border: 1px solid; border-left-width: 3px;
font-size: 14px;
}
.alert-success { border-color: rgba(127,168,138,0.5); background: rgba(127,168,138,0.08); color: var(--success-green-lt); }
.alert-danger  { border-color: rgba(176,106,92,0.55); background: rgba(176,106,92,0.08);  color: var(--danger-red-lt); }
.alert-warning { border-color: rgba(217,140,63,0.55); background: rgba(217,140,63,0.08);  color: var(--warn-yellow-lt); }
.alert-info    { border-color: var(--steel-deep);     background: rgba(116,157,196,0.08); color: var(--accent-cyan); }

/* Aliases. Pages across the site had grown their own names for these — an
   .alert-error here, an .alert.success there — and each one shipped its own
   neon palette in the page's extra_css, overriding the shared layer because
   it comes later in the cascade. Accepting the alternate names means those
   redefinitions can simply be deleted. */
.alert-error   { border-color: rgba(176,106,92,0.55); background: rgba(176,106,92,0.08); color: var(--danger-red-lt); }
.alert.success { border-color: rgba(127,168,138,0.5);  background: rgba(127,168,138,0.08); color: var(--success-green-lt); }
.alert.error   { border-color: rgba(176,106,92,0.55); background: rgba(176,106,92,0.08); color: var(--danger-red-lt); }
.alert.warning { border-color: rgba(217,140,63,0.55);  background: rgba(217,140,63,0.08); color: var(--warn-yellow-lt); }
.alert-danger strong, .alert-warning strong { text-shadow: 0 0 12px rgba(217,140,63,0.35); }

/* ═══ PROGRESS BAR ════════════════════════════════════════
   A thin fill bar. Third page to want one (oc_planner, faction_readiness,
   the upgrade simulator), so it lives here. The fill's colour is always
   meaningful — capacity, affordability, completion — so it stays inline on
   the element rather than being fixed here. */
.progress-bar-track {
display: inline-block; vertical-align: middle;
width: 100px; height: 5px; overflow: hidden;
background: var(--bg-dark);
}
.progress-bar-fill { height: 100%; transition: width 0.2s; }
@media (prefers-reduced-motion: reduce) {
.progress-bar-fill { transition: none; }
}

/* ═══ TAB STRIP ═══════════════════════════════════════════
   A page-level tab strip: .tabs holds .tab-btn buttons, and one
   .tab-content per panel with .active on the visible one. Rentals and the
   armory both grew their own copy of this; the admin panel has its own
   .admin-tab variant which stays as-is because its JS keys off it. */
.tabs {
display: flex; gap: 4px; flex-wrap: wrap;
margin-bottom: 18px; border-bottom: 1px solid var(--border-subtle);
}
/* Works as a <button> or an <a> — the tactical dashboard's tabs are links
   (each is a real ?tab= URL), rentals' are buttons. */
.tab-btn {
display: inline-block; text-decoration: none;
background: transparent; color: var(--text-dim);
border: 1px solid var(--border-subtle); border-bottom: none;
padding: 9px 18px; margin-bottom: -1px; cursor: pointer;
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
}
.tab-btn:hover { background: var(--hover-bg); color: var(--hover-text); }
.tab-btn.active { background: var(--bg-panel); color: var(--accent-cyan); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ═══ CHAIN SHARED BITS ═══════════════════════════════════
   chain_intel and chain_debrief had identical copies of all four of these. */
.save-badge {
display: inline-block; padding: 1px 6px;
background: var(--amber); color: var(--bg-dark);
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
/* A milestone or shame entry — short stacked lines, not a table. */
.bonus-item {
border-left: 2px solid var(--steel-deep);
padding: 6px 10px; margin-bottom: 8px; font-size: 13px;
}
.bonus-item:last-child { margin-bottom: 0; }
.shame-item { padding: 5px 8px; border-bottom: 1px solid var(--border-inner); font-size: 13px; }
.shame-item:last-child { border-bottom: none; }
tr.member-filter-hidden { display: none; }

/* ═══ CMG MERIT ROLL-UP ═══════════════════════════════════
   Styles for _cmg_panel.html. That fragment is included by more than one
   page (chain intel and the merits tab), so its styling cannot live in
   either page's extra_css — it belongs here. The chips were pill-shaped
   (border-radius: 999px); they are square like every other chip now. */
.cmg-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.cmg-col {
flex: 1 1 260px; min-width: 240px; padding: 11px;
background: var(--bg-deep); border: 1px solid var(--border-inner);
}
.cmg-col-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
padding-bottom: 7px; margin-bottom: 9px;
border-bottom: 1px solid var(--border-inner);
}
.cmg-col-head b { color: var(--accent-cyan); font-size: 14px; }
.cmg-col-head span { color: var(--text-faint); font-size: 11px; }
.cmg-ms { font-size: 12px; color: var(--text-faint); margin-bottom: 9px; }
.cmg-ms .num { color: var(--accent-cyan); }
.cmg-counts { font-size: 12px; margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.cmg-counts .has { color: var(--success-green); }
.cmg-counts .needs { color: var(--danger-red); }
.cmg-counts .unk { color: var(--amber); }
.cmg-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 190px; overflow-y: auto; }
.cmg-chip {
padding: 2px 9px; font-size: 12px; white-space: nowrap; text-decoration: none;
border: 1px solid rgba(176,106,92,0.5); background: rgba(176,106,92,0.1);
color: var(--danger-red-lt);
}
.cmg-chip:hover { border-color: var(--danger-red); color: var(--danger-red-lt); }
.cmg-chip.unknown {
border-color: rgba(168,154,92,0.5); background: rgba(168,154,92,0.1); color: var(--amber);
}
.cmg-chip.unknown:hover { border-color: var(--amber); color: var(--amber); }

/* ═══ FILTER TOOLBAR ══════════════════════════════════════
   Written for war_intel; promoted when strike_teams needed the same filter
   strip. A .toolbar is a bordered box of .tb-row strips; each row holds a
   .tb-label kicker, .tb-group clusters, .tb-sep dividers, a .filter-search
   box and .f-btn toggles. The .active toggle takes the accent; .fav and
   .snipe take amber and light steel so a pinned or snipe filter reads apart
   from an ordinary one. */
/* ── FILTER TOOLBAR ──────────────────────────────────────── */
.toolbar {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    margin-bottom: 14px;
}
.tb-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-inner);
}
.tb-row:last-child { border-bottom: none; }
.tb-label {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint);
    min-width: 44px; flex-shrink: 0;
}
.tb-sep { width: 1px; height: 18px; background: var(--border-subtle); flex-shrink: 0; }
.tb-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tb-range { display: flex; align-items: center; gap: 4px; }
.tb-range span { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }

.filter-search {
    background: var(--bg-input); color: var(--input-text);
    border: 1px solid var(--border-subtle); border-radius: 0;
    padding: 5px 8px; width: 150px;
    font-family: var(--font-ui); font-size: 12px;
}
.filter-search::placeholder { color: var(--text-faint); }
.filter-search:focus { border-color: var(--accent-orange); }

.f-btn {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--border-subtle); border-radius: 0;
    padding: 4px 9px; cursor: pointer;
    font-family: var(--font-ui); font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.f-btn:hover { color: var(--hover-text); background: var(--hover-bg); border-color: var(--steel-deep); }
.f-btn.active {
    background: var(--accent-orange); border-color: var(--accent-orange);
    color: var(--bg-dark);
}
.f-btn.fav.active   { background: var(--warn-yellow);   border-color: var(--warn-yellow);   color: var(--bg-dark); }
.f-btn.snipe.active { background: var(--accent-cyan);   border-color: var(--accent-cyan);   color: var(--bg-dark); }
.f-btn b { font-family: var(--font-mono); font-weight: 600; }

/* ═══ FIELD HELPERS ═══════════════════════════════════════
   Written for the admin panel, where they replaced ~40 repeated inline
   declarations. Promoted here once rival_activity and war_rollcall wanted
   the same three: the mono field kicker, the small grey note under a
   control, and the bordered scroll box. */
.fs-lbl {
display: block;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px;
}
.fs-hint { font-size: 12px; color: var(--text-faint); margin: 6px 0 12px; line-height: 1.45; }
.fs-scroll {
background: var(--bg-input); border: 1px solid var(--border-inner);
overflow-y: auto; padding: 10px;
}

/* The empty-state line every list page writes for itself. */
.empty { color: var(--text-faint); padding: 24px; text-align: center; }

/* ═══ GRIDS / UTILITIES ═══════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
/* The upgrade simulator's five summary figures. */
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
@media (max-width: 900px) {
.grid-4, .grid-5 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 580px) {
.grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}
.export-strip { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

/* ═══ FORMS ═══════════════════════════════════════════════ */
input, select, textarea {
background: var(--bg-input);
color: var(--input-text);
border: 1px solid var(--border-subtle);
border-radius: 0;
font-family: var(--font-ui);
font-size: 14px;
padding: 7px 9px;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent-orange); box-shadow: none;
}
pre, code, .terminal, .intel-log {
background: var(--bg-code);
border-radius: 0;
}

/* ═══ HTMX INDICATOR ══════════════════════════════════════ */
#htmx-indicator {
display: none; position: fixed; top: 0; left: 0;
width: 100%; height: 2px;
background: var(--accent-orange);
z-index: 9999; transform-origin: left center;
animation: htmx-slide 1.2s ease-in-out infinite;
}
.htmx-request #htmx-indicator { display: block; }
@keyframes htmx-slide {
0%   { transform: scaleX(0); }
50%  { transform: scaleX(0.7); }
100% { transform: scaleX(1); opacity: 0; }
}

/* ═══ FACTION / VIEW-AS SWITCHERS ═════════════════════════ */
.faction-select {
background: var(--bg-input); color: var(--input-text);
border: 1px solid var(--border-subtle); border-radius: 0;
padding: 5px 8px; font-family: var(--font-ui); font-size: 13px;
cursor: pointer; max-width: 190px;
}
.faction-select:focus { border-color: var(--accent-orange); box-shadow: none; }

/* ═══ MOBILE: row 1 becomes a bottom tab bar ══════════════ */
.cc-mobile-tabs { display: none; }

@media (max-width: 820px) {
.cc-tabs { display: none; }
.cc-bar { min-height: 46px; }
.cc-right { gap: 8px; padding: 0 8px; }
.cc-who { display: none; }
.cc-row2 { gap: 12px; padding: 0 12px; }
.page-head, .site-header, .page-content { padding-left: 12px; padding-right: 12px; }
.panel { padding: 14px; }
.panel-head { margin: -14px -14px 12px; padding: 9px 13px; }
body { padding-bottom: 62px; }

.cc-mobile-tabs {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 1001;
    background: var(--bg-nav);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--border-subtle);
}
.cc-mobile-tabs a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    padding: 9px 4px calc(9px + env(safe-area-inset-bottom));
    min-height: 54px;
    color: var(--text-dim); text-decoration: none;
    font-family: var(--font-ui); font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    border-top: 2px solid transparent;
}
.cc-mobile-tabs a.is-active { color: var(--accent-cyan); border-top-color: var(--accent-cyan); }
.cc-mobile-tabs a:active { background: var(--hover-bg); }
}

/* ── BILLING DELINQUENCY ─────────────────────────────── */
#billing-grace-banner {
background: rgba(217,140,63,0.12);
border-bottom: 1px solid var(--warn-yellow);
padding: 9px 16px; text-align: center;
font-family: var(--font-ui); font-size: 13px; color: var(--warn-yellow-lt);
position: sticky; top: 0; z-index: 9998;
}
#billing-chaos-bar {
background: rgba(176,106,92,0.14);
border-bottom: 1px solid var(--danger-red);
padding: 8px 16px; text-align: center;
font-family: var(--font-ui); font-size: 13px; color: var(--danger-red-lt);
position: sticky; top: 0; z-index: 9998;
}
#billing-grace-banner a, #billing-chaos-bar a { font-weight: 600; text-decoration: underline; }
#billing-grace-banner a { color: var(--warn-yellow); }
#billing-chaos-bar a { color: var(--danger-red); }
.bill-tab-body, .panel.billing-surface {
background: var(--bg-panel); border-color: var(--border-subtle);
}
[data-billing-protected] { position: relative; transition: filter 0.3s; }
body.billing-chaos [data-billing-protected] {
filter: blur(5px); user-select: none; pointer-events: none;
}
body.billing-chaos [data-billing-protected]::after {
content: "BILLING REQUIRED";
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: rgba(16,18,21,0.9);
color: var(--danger-red);
padding: 5px 12px; border: 1px solid var(--danger-red);
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.1em; pointer-events: none; white-space: nowrap; z-index: 10;
}
#billing-modal-overlay {
display: none; position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(16,18,21,0.9); z-index: 99999;
align-items: center; justify-content: center;
}
#billing-modal-box {
background: var(--bg-panel);
border: 1px solid var(--danger-red);
border-radius: 0; padding: 26px;
max-width: 520px; width: 92%; text-align: center;
font-family: var(--font-ui);
}
.billing-pay-option {
display: inline-block; background: var(--bg-panel-alt);
border: 1px solid var(--border-subtle); border-radius: 0;
padding: 9px 13px; margin: 4px; cursor: default; min-width: 110px;
}
.billing-pay-option .bpo-label { font-family: var(--font-ui); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.billing-pay-option .bpo-amount { font-family: var(--font-mono); font-size: 15px; color: var(--accent-cyan); font-weight: 600; }

/* ── Company stock card: the sales-sheet figures merged into the stock table.
      Shade buckets are picked server-side (1 = smallest, 5 = top item) so no
      per-row alpha ends up inline. ── */
.sales-sheet-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
}
.sales-sheet-head .co-sub { font-weight: 400; }
.sales-sheet-csv { padding: 5px 12px; font-size: 0.85em; }
#stockTable tfoot td {
border-top: 2px solid var(--border-inner);
font-weight: 600; background: var(--bg-panel-alt);
}
.ss-pos { color: var(--success-green); }
.ss-neg { color: var(--danger-red); }
.ss-none { color: var(--text-faint); }
.ss-worth-1 { background: rgba(74,157,94,0.07); }
.ss-worth-2 { background: rgba(74,157,94,0.14); }
.ss-worth-3 { background: rgba(74,157,94,0.21); }
.ss-worth-4 { background: rgba(74,157,94,0.28); }
.ss-worth-5 { background: rgba(74,157,94,0.35); }
.ss-sales-1 { background: rgba(74,124,190,0.07); }
.ss-sales-2 { background: rgba(74,124,190,0.14); }
.ss-sales-3 { background: rgba(74,124,190,0.21); }
.ss-sales-4 { background: rgba(74,124,190,0.28); }
.ss-sales-5 { background: rgba(74,124,190,0.35); }
.sales-sheet-report { margin-top: 10px; }
.sales-sheet-report b { color: var(--hover-text); }
.sales-sheet-report b.ss-income { color: var(--success-green); }
.sales-sheet-vitals {
margin-top: 6px; display: flex; flex-wrap: wrap;
gap: 16px; color: var(--text-dim);
}