/* f2b-house.css — Long's house UI for Field2Bill (ui-house-style skill, 2026-09-25).
 * A layer over the app's inline styles; Field2Bill-App.html keeps its markup.
 *  - Inter (body) + Sora (headings, numbers) replace IBM Plex Sans / Space Grotesk.
 *  - Dark is the default (<html data-theme="dark" class="dk">, set by f2b-house.js).
 *    React renders inline styles normalised ("background: rgb(255, 255, 255)"), so the
 *    dark remap below matches that form. It is GENERATED from every colour in the app
 *    (neutral greys -> surface/text tokens, tints -> translucent hue chips); regenerate
 *    it with tools/gen-dark-remap.py when new colours are added; do not hand-edit it.
 *  - Paper documents (#f2b-*-sheet: invoices, tags, print sheets) stay white in both themes.
 *  - Everything dark lives under @media screen, so printing is always the light original.
 */
:root {
  --bg:#eceef2; --surface:#ffffff; --surface-2:#f8f9fb; --text:#0c1322; --text-2:#404a5c; --muted:#8a92a4;
  --border:#e6e8ee; --border-strong:#0c1322; --brand:#2f6bff; --cyan:#06b6d4;
  --t-in:#2563eb; --t-out:#f59e0b; --t-net:#059669;
  --grad:linear-gradient(135deg,#2f6bff,#06b6d4);
}
html.dk {
  --bg:#070d1a; --surface:#0f1a2e; --surface-2:#13213a; --text:#e7edf9; --text-2:#c3cde0; --muted:#8b9bb8;
  --border:#1f2e4b; --border-strong:#3a4e75; --brand:#5b8cff; --cyan:#22d3ee;
  --t-in:#5b8cff; --t-out:#fbbf24; --t-net:#34d399;
  --grad:linear-gradient(135deg,#5b8cff,#22d3ee);
  color-scheme: dark;
}

/* ---------- type: Inter + Sora (both themes) ---------- */
body, [style*='"IBM Plex Sans"'] { font-family:'Inter','IBM Plex Sans',system-ui,sans-serif !important; }
[style*='"Space Grotesk"'] { font-family:'Sora','Space Grotesk','Inter',sans-serif !important; letter-spacing:-.02em; }
[style*='"IBM Plex Mono"'][style*="text-transform: uppercase"] { font-family:'Inter',system-ui,sans-serif !important; letter-spacing:.06em !important; }
input, select, textarea, button { font-family:'Inter',system-ui,sans-serif; }

/* ---------- theme toggle ---------- */
.f2b-theme-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:11px; border:1px solid #e1e4ea; background:#fff; color:#404a5c; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, color .15s ease; }
.f2b-theme-btn:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }
.f2b-theme-btn.floating { position:fixed; top:16px; right:16px; z-index:400; box-shadow:0 4px 14px rgba(16,24,40,.12); }
html.dk .f2b-theme-btn { background:var(--surface-2); border-color:var(--border); color:#fbbf24; }
@media (max-width:860px) { .f2b-theme-btn { width:36px; height:36px; } }
/* phone header: the toggle costs 44px, so "New ticket" goes icon-only and the title ellipsises */
@media (max-width:600px) {
  [data-m="header-actions"] > button:last-child { font-size:0 !important; gap:0 !important; padding:0 12px !important; }
  [data-m="header"] > div:first-child > div:last-child { min-width:0; overflow:hidden; }
  [data-m="header"] > div:first-child > div:last-child > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- tables: sort arrows + Excel bar (both themes) ---------- */
[data-m="main"] thead th { cursor:pointer; user-select:none; white-space:nowrap; }
[data-m="main"] thead th:hover { color:var(--brand) !important; }
thead th.s-asc::after { content:' ▲'; font-size:.8em; color:var(--brand); }
thead th.s-desc::after { content:' ▼'; font-size:.8em; color:var(--brand); }
[data-m="main"] tbody tr { transition:background-color .12s ease; }
[data-m="main"] tbody tr:hover > td { background-color:rgba(47,107,255,.04); }
html.dk [data-m="main"] tbody tr:hover > td { background-color:rgba(91,140,255,.07); }
.xl-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 8px;
  font:500 11.5px 'Inter',sans-serif; color:var(--muted); }
.xl-bar button { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--t-net); font:600 11.5px 'Inter',sans-serif; }
.xl-bar button:hover { border-color:var(--t-net); }
@media (max-width:600px) { .xl-bar span { display:none; } .xl-bar { justify-content:flex-end; } }

/* ---------- phone: the app's own grid-collapse rules match the authored style text
   ("repeat(auto-fit"), but React renders "repeat(auto-fit, ..." with spaces; these
   match what is actually in the DOM. minmax(0,1fr) so a wide table can't push the page. */
@media (max-width:860px) {
  [data-m="main"] [style*="grid-template-columns: repeat(auto-fit"],
  [data-m="main"] [style*="grid-template-columns: 1fr 1fr"],
  [data-m="main"] [style*="grid-template-columns: 1fr 150px"],
  [data-m="main"] [style*="grid-template-columns: 2fr 1fr"],
  [data-m="main"] [style*="grid-template-columns: 1.4fr 1fr"],
  [data-m="main"] [style*="grid-template-columns: 1.5fr 1fr"] { grid-template-columns:minmax(0,1fr) !important; }
  [data-m="main"] [style*="grid-column: span 2"] { grid-column:auto !important; }
}

@media screen {
  /* ---------- dark base ---------- */
  html.dk, html.dk body { background:
      radial-gradient(900px 600px at 100% -10%, rgba(91,140,255,.16), transparent 60%),
      radial-gradient(800px 600px at -10% 110%, rgba(34,211,238,.10), transparent 60%),
      var(--bg) fixed !important; color:var(--text); }
  html.dk ::selection { background:#5b8cff; color:#fff; }
  html.dk ::-webkit-scrollbar-thumb { background:#24365a; background-clip:content-box; }
  html.dk ::-webkit-scrollbar-thumb:hover { background:#31497a; background-clip:content-box; }
  /* page canvases become transparent so the glow shows through */
  html.dk [style*="background: rgb(236, 238, 242)"]:not([id$="-sheet"] *) { background:transparent !important; }
  html.dk [data-m="header"] { background:rgba(7,13,26,.72) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--border) !important; }
  html.dk [data-m="sidebar"] { background:linear-gradient(180deg,#0b1427,#070d1a) !important; border-right:1px solid var(--border); }
  html.dk [data-m="login-form"] { background:transparent !important; }

  /* cards: white panels become the house gradient card with depth */
  html.dk :is([style*="background: rgb(255, 255, 255)"][style*="border-radius: 15px"],
              [style*="background: rgb(255, 255, 255)"][style*="border-radius: 16px"],
              [style*="background: rgb(255, 255, 255)"][style*="border-radius: 14px"],
              [style*="background: rgb(255, 255, 255)"][style*="border-radius: 18px"]):not([id$="-sheet"], [id$="-sheet"] *) {
    background:linear-gradient(180deg,var(--surface-2),var(--surface)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.35) !important; }

  /* form controls */
  html.dk :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):not([id$="-sheet"] *) {
    background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border) !important; }
  html.dk :is(input, textarea)::placeholder { color:#5f7090 !important; }
  html.dk :is(input, select, textarea):focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(91,140,255,.18) !important; }
  html.dk option { background:#0f1a2e; color:#e7edf9; }

  /* primary buttons: house gradient + glow */
  html.dk button:is([style*="background: rgb(47, 107, 255)"], [style*="background: rgb(35, 86, 214)"]) {
    background:var(--grad) !important; box-shadow:0 6px 18px rgba(91,140,255,.35) !important; }

  /* big numbers glow in their own colour (KPI cards, totals) */
  html.dk [style*='"Space Grotesk"']:is([style*="29px"], [style*="27px"], [style*="28px"], [style*="30px"], [style*="32px"]) {
    text-shadow:0 0 22px rgba(91,140,255,.35); }

  /* charts: gridlines recede, series lines glow */
  html.dk svg :is([stroke="#eef0f3"], [stroke="#eceef2"], [stroke="#f1f2f5"], [stroke="#e6e8ee"], [stroke="#e1e4ea"], [stroke="#f3f4f6"]) { stroke:var(--border); }
  html.dk svg :is(path, polyline, line)[stroke="#2f6bff"] { stroke:#5b8cff; filter:drop-shadow(0 0 6px rgba(91,140,255,.6)); }
  html.dk svg [stroke="#fff"] { stroke:var(--surface); }
  /* icons drawn in the light theme's ink colours */
  html.dk svg:not([id$="-sheet"] *) [stroke="#0c1322"], html.dk svg[stroke="#0c1322"]:not([id$="-sheet"] *),
  html.dk svg[stroke="#5b6477"]:not([id$="-sheet"] *), html.dk svg[stroke="#404a5c"]:not([id$="-sheet"] *) { stroke:var(--text-2); }
  html.dk svg[fill="#0c1322"]:not([id$="-sheet"] *), html.dk svg:not([id$="-sheet"] *) [fill="#0c1322"] { fill:var(--text-2); }
  html.dk svg text[fill="#9aa1b0"], html.dk svg text[fill="#8a92a4"] { fill:var(--muted); }

  /* ---------- generated remap (python3 tools/gen-dark-remap.py) ---------- */
  .dk :is([style*="background: rgb(253, 233, 234);"], [style*="background: rgb(253, 236, 236);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: rgba(248, 113, 113, .14) !important; }
  .dk :is([style*="background: rgb(253, 241, 225);"], [style*="background: rgb(255, 248, 237);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: rgba(251, 191, 36, .14) !important; }
  .dk :is([style*="background: rgb(226, 246, 241);"], [style*="background: rgb(234, 247, 230);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: rgba(52, 211, 153, .14) !important; }
  .dk :is([style*="background: rgb(238, 243, 255);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: rgba(91, 140, 255, .14) !important; }
  .dk :is([style*="background: rgb(236, 238, 242);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: var(--bg) !important; }
  .dk :is([style*="background: rgb(251, 251, 252);"], [style*="background: rgb(255, 255, 255);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: var(--surface) !important; }
  .dk :is([style*="background: rgb(205, 210, 220);"], [style*="background: rgb(230, 232, 238);"], [style*="background: rgb(232, 246, 239);"], [style*="background: rgb(238, 240, 243);"], [style*="background: rgb(241, 242, 245);"], [style*="background: rgb(243, 238, 252);"], [style*="background: rgb(243, 244, 247);"], [style*="background: rgb(243, 246, 251);"], [style*="background: rgb(247, 248, 250);"], [style*="background: rgb(247, 249, 255);"], [style*="background: rgb(248, 249, 251);"], [style*="background: rgb(250, 251, 252);"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { background: var(--surface-2) !important; }
  .dk :is([style*="border-bottom: 1px solid rgb(225, 228, 234)"], [style*="border-bottom: 1px solid rgb(226, 229, 236)"], [style*="border-bottom: 1px solid rgb(236, 238, 242)"], [style*="border-bottom: 1px solid rgb(241, 242, 245)"], [style*="border-bottom: 1px solid rgb(242, 243, 246)"], [style*="border-bottom: 1px solid rgb(243, 244, 246)"], [style*="border-bottom: 2px solid rgb(236, 238, 242)"], [style*="border-bottom: 2px solid rgb(241, 242, 245)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-bottom-color: var(--border) !important; }
  .dk :is([style*="border-color: rgb(240, 197, 198)"], [style*="border-color: rgb(243, 192, 194)"], [style*="border: 1px solid rgb(243, 192, 194)"], [style*="border: 1px solid rgb(247, 201, 202)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-color: rgba(248, 113, 113, .35) !important; }
  .dk :is([style*="border: 1px solid rgb(243, 224, 192)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-color: rgba(251, 191, 36, .35) !important; }
  .dk :is([style*="border: 1px solid rgb(216, 227, 255)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-color: rgba(91, 140, 255, .35) !important; }
  .dk :is([style*="border: 1.5px solid rgb(216, 220, 228)"], [style*="border: 1.5px solid rgb(255, 255, 255)"], [style*="border: 1px dashed rgb(216, 220, 228)"], [style*="border: 1px dashed rgb(217, 221, 230)"], [style*="border: 1px dashed rgb(225, 228, 234)"], [style*="border: 1px solid rgb(216, 220, 228)"], [style*="border: 1px solid rgb(225, 228, 234)"], [style*="border: 1px solid rgb(230, 232, 238)"], [style*="border: 1px solid rgb(233, 235, 240)"], [style*="border: 1px solid rgb(236, 238, 242)"], [style*="border: 1px solid rgb(238, 240, 243)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-color: var(--border) !important; }
  .dk :is([style*="border-right: 1px solid rgb(236, 238, 242)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-right-color: var(--border) !important; }
  .dk :is([style*="border-top: 1px solid rgb(236, 238, 242)"], [style*="border-top: 1px solid rgb(241, 242, 245)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { border-top-color: var(--border) !important; }
  .dk :is([style*="; color: rgb(107, 63, 214)"], [style^="color: rgb(107, 63, 214)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: rgb(167, 139, 250) !important; }
  .dk :is([style*="; color: rgb(210, 59, 63)"], [style*="; color: rgb(229, 72, 77)"], [style^="color: rgb(210, 59, 63)"], [style^="color: rgb(229, 72, 77)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: rgb(248, 113, 113) !important; }
  .dk :is([style*="; color: rgb(154, 106, 28)"], [style*="; color: rgb(179, 118, 10)"], [style*="; color: rgb(246, 169, 59)"], [style^="color: rgb(154, 106, 28)"], [style^="color: rgb(179, 118, 10)"], [style^="color: rgb(246, 169, 59)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: rgb(251, 191, 36) !important; }
  .dk :is([style*="; color: rgb(14, 138, 114)"], [style*="; color: rgb(15, 157, 107)"], [style*="; color: rgb(44, 160, 28)"], [style^="color: rgb(14, 138, 114)"], [style^="color: rgb(15, 157, 107)"], [style^="color: rgb(44, 160, 28)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: rgb(52, 211, 153) !important; }
  .dk :is([style*="; color: rgb(31, 79, 208)"], [style*="; color: rgb(35, 86, 214)"], [style*="; color: rgb(47, 107, 255)"], [style*="; color: rgb(95, 123, 214)"], [style^="color: rgb(31, 79, 208)"], [style^="color: rgb(35, 86, 214)"], [style^="color: rgb(47, 107, 255)"], [style^="color: rgb(95, 123, 214)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: rgb(91, 140, 255) !important; }
  .dk :is([style*="; color: rgb(107, 116, 136)"], [style*="; color: rgb(125, 136, 160)"], [style*="; color: rgb(138, 146, 164)"], [style*="; color: rgb(138, 147, 168)"], [style*="; color: rgb(152, 162, 184)"], [style*="; color: rgb(154, 161, 176)"], [style*="; color: rgb(154, 163, 186)"], [style*="; color: rgb(170, 177, 191)"], [style*="; color: rgb(170, 180, 204)"], [style*="; color: rgb(179, 185, 197)"], [style*="; color: rgb(185, 192, 204)"], [style^="color: rgb(107, 116, 136)"], [style^="color: rgb(125, 136, 160)"], [style^="color: rgb(138, 146, 164)"], [style^="color: rgb(138, 147, 168)"], [style^="color: rgb(152, 162, 184)"], [style^="color: rgb(154, 161, 176)"], [style^="color: rgb(154, 163, 186)"], [style^="color: rgb(170, 177, 191)"], [style^="color: rgb(170, 180, 204)"], [style^="color: rgb(179, 185, 197)"], [style^="color: rgb(185, 192, 204)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: var(--muted) !important; }
  .dk :is([style*="; color: rgb(12, 19, 34)"], [style*="; color: rgb(43, 51, 68)"], [style*="; color: rgb(58, 68, 86)"], [style^="color: rgb(12, 19, 34)"], [style^="color: rgb(43, 51, 68)"], [style^="color: rgb(58, 68, 86)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: var(--text) !important; }
  .dk :is([style*="; color: rgb(64, 74, 92)"], [style*="; color: rgb(68, 79, 102)"], [style*="; color: rgb(77, 86, 108)"], [style*="; color: rgb(91, 100, 119)"], [style^="color: rgb(64, 74, 92)"], [style^="color: rgb(68, 79, 102)"], [style^="color: rgb(77, 86, 108)"], [style^="color: rgb(91, 100, 119)"]):not([id$="-sheet"], [id$="-sheet"] *, [data-m="sidebar"] *, [data-m="login-brand"] *, .f2b-keep *) { color: var(--text-2) !important; }
}