/* ============================================================================
   HomeOS Dubai — ops console (DARK surface)
   ----------------------------------------------------------------------------
   The console is its own page theme: fully dark, scoped to body.ops so it can
   never leak into the public light pages. Density is higher here on purpose
   (VISUAL_DENSITY ~7): this is a work tool, not a marketing page.
   ============================================================================ */

body.ops {
  background: var(--d-canvas);
  color: var(--d-text);
  background-image:
    radial-gradient(900px 480px at 92% -10%, rgba(79, 209, 192, 0.07), transparent 60%),
    radial-gradient(700px 420px at -8% 8%, rgba(11, 61, 92, 0.35), transparent 62%);
  background-attachment: fixed;
}
body.ops .wrap { max-width: 1400px; }
body.ops a { color: var(--d-accent); }
body.ops a:hover { color: #7ce4d6; }
body.ops h1, body.ops h2, body.ops h3, body.ops h4 { color: #fff; }
body.ops h4 { color: var(--d-dim); }
body.ops strong, body.ops b { color: #fff; }
body.ops .dim, body.ops .small { color: var(--d-muted); }

/* nav: same floating island, dark glass */
body.ops .nav { background: linear-gradient(180deg, rgba(7, 23, 32, 0.94), rgba(7, 23, 32, 0)); }
body.ops .nav-in {
  background: rgba(11, 33, 41, 0.82);
  border-color: var(--d-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
}
body.ops .nav.scrolled .nav-in { background: rgba(11, 33, 41, 0.96); }
body.ops .brand { color: #fff; }
body.ops .brand small { color: var(--d-dim); }
body.ops .brand .logo { background: rgba(79, 209, 192, 0.14); color: var(--d-gold); }
body.ops .nav-links a { color: var(--d-muted); }
body.ops .nav-links a:hover, body.ops .nav-links a[aria-current="page"] { color: #fff; }
body.ops .nav-links a::after { background: var(--d-accent); }

/* header band */
body.ops .bk-head { padding-block: var(--s6) var(--s5); }
body.ops .bk-head p { color: var(--d-muted); max-width: 78ch; }

/* buttons on dark: the accent must stay readable, so light accent + dark ink */
body.ops .btn { --btn-bg: rgba(255, 255, 255, 0.06); --btn-fg: var(--d-text); --btn-bd: var(--d-line-2); }
body.ops .btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
body.ops .btn-primary, body.ops .btn-accent, body.ops .btn-gold {
  --btn-bg: var(--d-accent); --btn-fg: #052a28; --btn-bd: transparent; font-weight: 650;
}
body.ops .btn-primary:hover, body.ops .btn-accent:hover, body.ops .btn-gold:hover { background: #6ee0d0; color: #052a28; }
body.ops .btn-ghost { --btn-bg: transparent; --btn-fg: var(--d-muted); --btn-bd: var(--d-line-2); }
body.ops .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.ops .btn .ico { background: rgba(0, 0, 0, 0.12); }

/* KPI strip: no card boxes, hairlines between data (density 7) */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--d-line); border: 1px solid var(--d-line);
  border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--s5);
}
.kpis2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--d-line); }
.kpi { background: var(--d-surface); padding: var(--s4) var(--s5); }
.kpi .lab { font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--d-dim); }
.kpi .val { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 660; color: #fff; letter-spacing: -0.02em; margin-top: 6px; }
.kpi .sub { font-size: 11.5px; color: var(--d-muted); margin-top: 4px; }
.gate { font-family: var(--font-mono); font-size: 11px; color: var(--d-dim); }

/* toolbar */
.toolbar {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
  background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-card);
  padding: var(--s3) var(--s4); margin-bottom: var(--s5);
}
body.ops .toolbar input[type="search"], body.ops .toolbar input[type="text"], body.ops .toolbar select {
  background: var(--d-canvas); border: 1px solid var(--d-line-2); color: var(--d-text);
  border-radius: var(--r-input); padding: 0.6rem 0.85rem; font-size: var(--t-small); min-width: 200px;
}
body.ops .toolbar input::placeholder { color: var(--d-dim); }
body.ops .toolbar input:focus, body.ops .toolbar select:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(79, 209, 192, 0.15); }

/* panels + split */
.ops-panel { animation: none; min-width: 0; }
body.ops .split { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
body.ops .split > aside { position: sticky; top: 92px; min-width: 0; }
body.ops .split > *, body.ops .kpis > *, body.ops .toolbar > *, body.ops .tab { min-width: 0; }
body.ops .tbl-wrap { max-width: 100%; }
@media (max-width: 1100px) { body.ops .split { grid-template-columns: 1fr; } body.ops .split > aside { position: static; } }

/* drawer + cards */
.drawer, body.ops .card-lite {
  background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-card);
  padding: var(--s5); box-shadow: var(--sh-d); margin-bottom: var(--s5);
}
.drawer h3 { margin-bottom: var(--s3); }
.drawer .sub { color: var(--d-muted); margin-bottom: var(--s4); }
body.ops .card-lite h3 { color: #fff; }
body.ops .sub { color: var(--d-muted); }
body.ops .tag { background: rgba(255, 255, 255, 0.07); color: var(--d-muted); }

/* tables: hairline rows on dark, mono numerals */
body.ops .tbl-wrap { background: var(--d-surface); border-color: var(--d-line); box-shadow: var(--sh-d); }
body.ops .tbl { color: var(--d-text); }
body.ops .tbl th, body.ops .tbl td { border-bottom-color: var(--d-line); }
body.ops .tbl thead th { background: var(--d-surface-2); color: var(--d-dim); border-bottom-color: var(--d-line-2); }
body.ops .tbl tbody tr:hover { background: rgba(79, 209, 192, 0.07); }
body.ops .tbl td .sub { color: var(--d-muted); }
body.ops .tbl .num { color: #fff; }
body.ops tr[data-ref] { cursor: pointer; }
body.ops tr[data-ref]:focus-visible { outline: 2px solid var(--d-accent); outline-offset: -2px; }

/* tabs */
body.ops .tabs { background: rgba(255, 255, 255, 0.05); }
body.ops .tab { color: var(--d-muted); }
body.ops .tab:hover { color: #fff; }
body.ops .tab.on { background: var(--d-surface-2); color: #fff; box-shadow: var(--sh-d); }

/* chips */
body.ops .chip { background: rgba(255, 255, 255, 0.05); border-color: var(--d-line-2); color: var(--d-muted); }
body.ops .chip:hover { border-color: var(--d-accent); color: var(--d-accent); }
body.ops .chip.on { background: var(--d-accent); border-color: var(--d-accent); color: #052a28; font-weight: 620; }

/* forms on dark */
body.ops .field > label { color: var(--d-muted); }
body.ops .field input, body.ops .field select, body.ops .field textarea {
  background: var(--d-canvas); border-color: var(--d-line-2); color: var(--d-text);
}
body.ops .field input::placeholder, body.ops .field textarea::placeholder { color: var(--d-dim); }
body.ops .field input:focus, body.ops .field select:focus { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(79, 209, 192, 0.15); }
body.ops .field .hint { color: var(--d-dim); }
body.ops select option { background: var(--d-surface); color: var(--d-text); }

/* notices */
body.ops .notice {
  background: var(--d-surface-2); border-color: var(--d-line-2); border-left-color: var(--d-accent);
  color: var(--d-text);
}
body.ops .notice.warn { background: rgba(216, 180, 106, 0.12); border-left-color: var(--d-gold); }
body.ops .notice.err { background: rgba(220, 90, 80, 0.14); border-left-color: #e0756a; }
body.ops .notice.ok { background: rgba(79, 209, 192, 0.10); border-left-color: var(--d-accent); }

/* badges keep their semantic tint but read on dark */
body.ops .badge { background: rgba(255, 255, 255, 0.08); color: var(--d-text); border-color: transparent; }
body.ops .st-received { background: rgba(120, 170, 210, 0.18); color: #b6d8ef; }
body.ops .st-quoted { background: rgba(216, 180, 106, 0.18); color: #e8cd97; }
body.ops .st-scheduled { background: rgba(79, 209, 192, 0.16); color: #9fe7dc; }
body.ops .st-progress { background: var(--d-accent); color: #052a28; }
body.ops .st-done { background: rgba(90, 200, 130, 0.16); color: #a6e3bd; }
body.ops .st-cancelled { background: rgba(224, 117, 106, 0.16); color: #f0b0a8; }

/* lists, timelines, jobs */
body.ops .rowline { border-bottom-color: var(--d-line); }
body.ops .tl::before { background: var(--d-line-2); }
body.ops .tl .dot { background: var(--d-surface-2); border-color: var(--d-surface); }
body.ops .tl.done .dot, body.ops .tl.current .dot { background: var(--d-accent); }
body.ops .tl.current .dot { box-shadow: 0 0 0 4px rgba(79, 209, 192, 0.16); }
body.ops .tl .tx { color: var(--d-text); }
body.ops .tl .tm { color: var(--d-dim); }
body.ops .job { border-bottom-color: var(--d-line); }
body.ops .job.off { opacity: 0.5; }
body.ops .job .photo { border-color: var(--d-line-2); }
body.ops .ref { color: #fff; }
body.ops .big { color: #fff; }
body.ops .raw { color: var(--d-muted); }
body.ops .stars { color: rgba(255, 255, 255, 0.2); }
body.ops .stars i.on { color: var(--d-gold); }
body.ops .empty { color: var(--d-muted); }
body.ops .empty b { color: #fff; }
body.ops .kv dt { color: var(--d-dim); }
body.ops .kv dd { color: var(--d-text); }
body.ops .gold { color: var(--d-gold); }

/* the price inputs inside the repricing panel */
input.price {
  width: 96px; text-align: right; font-family: var(--font-mono); font-size: var(--t-small);
  background: var(--d-canvas); border: 1px solid var(--d-line-2); color: #fff;
  border-radius: var(--r-input); padding: 6px 9px;
}
input.price:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(79, 209, 192, 0.15); }

/* footer */
body.ops .site-foot { background: #04121a; }
body.ops .legal { color: var(--d-dim); border-top-color: var(--d-line); }

/* focus visible on dark */
body.ops :focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }

/* scrollbars, for a tool used all day */
body.ops * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; scrollbar-width: thin; }
body.ops ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ops ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
body.ops ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: content-box; }