/* ============================================================================
   CTZ light theme + readability sweep (2026-06-22 v2)
   Loaded LAST. Inverts the dark navy palette to white/dark and forces every
   light/white or faint-grey TEXT colour to a readable dark slate, while
   leaving accent colours (yellow/teal/green/amber/red) and coloured chips alone.
   ============================================================================ */
:root{
  --navy:#ffffff; --navy2:#eef2f6; --navy3:#f5f7fa;
  --white:#16242f;            /* was light text -> dark ink */
  --sky:#3c5468; --skyl:#3c5468; --grey:#52606c;
}
html,body{background:#f5f7fa!important;color:#16242f!important;}

/* ---- surfaces -------------------------------------------------------------*/
header{background:#ffffff!important;box-shadow:0 2px 12px rgba(0,0,0,.08)!important;}
.hdr-title,#hdr-brand-title,.hdr-logo{color:#0b2138!important;}
.mega-bar,.mega,.megamenu,.subnav,.sub-nav,.sub-nav-bar,
[class*="mega"],[class*="subnav"],[class*="sub-nav"]{background:#eef2f6!important;}
.mg-top-btn,.sub-nav-btn,.nav-link{color:#1d2c3a!important;}
.panel,.panel-hdr,.card,.stat-card,.stat-card-white,.modal,.box,.section,
[class*="panel"],[class*="card"]{background:#ffffff!important;border-color:#dde4ea!important;}
.panel-title,.panel-hdr,h1,h2,h3,h4,h5,.stat-label,.kpi-label,.section-title,label{color:#13202b!important;}
table{background:#ffffff!important;}
thead,th{background:#eef2f6!important;color:#13202b!important;}
td,tr{border-color:#e3e8ed!important;}
input,select,textarea{background:#ffffff!important;color:#16242f!important;border-color:#cdd6df!important;color-scheme:light!important;}
select option,option{background:#ffffff!important;color:#16242f!important;}
/* Force native controls (closed <select> value + popup) to render in LIGHT mode.
   Without this, Chrome on a dark-mode Windows draws the native select with OS
   white text; our white bg then gives white-on-white. */
select,html{color-scheme:light!important;}
/* 2026-08-19 ROOT-CAUSE FIX (verified live in browser, 0 white-on-white).
   The Chat page (pages/chat.html) was authored for the ORIGINAL palette:
   `color:var(--navy)` = navy TEXT, `background:var(--navy2/3)` = navy surface,
   `color:#fff` = white text. ctz-light globally inverts --navy -> #fff so that
   `background:var(--navy)` panels turn white — but that flipped every
   `color:var(--navy)` TEXT on the chat page to white (white-on-white).
   Rather than patch each element, restore the true palette values *within* the
   chat subtree so the page renders exactly as its designer intended. This is a
   single, self-documenting rule and fixes hidden panels (My Space, image config)
   too. Backgrounds on this page use explicit #fff / rgba(), so they stay light. */
#chat-page{ --navy:#002B49 !important; --navy2:#0e3a5c !important; --navy3:#12456b !important; }
/* Give the suggestion + tab/pill chips a light chip surface so they read as
   buttons on the now-white page (their text is navy via the palette above). */
#chat-page .chat-quick-btn,
#chat-page .chat-panel-tab,
#chat-page .hist-pill{ background:#f2f6f9 !important; border:1px solid #d7e0e8 !important; color:#16242f !important; }
#chat-page .chat-hist-item{ background:#ffffff !important; }
/* chat.html uses var(--navy) for BOTH text (want dark) AND the left-panel + header
   backgrounds (want light under the light theme). Restoring --navy=dark fixes the
   text but re-darkens those two surfaces, so light them explicitly. */
#chat-page #chat-wrap{ background:#ffffff !important; }
#chat-page #chat-header{ background:#eef2f6 !important; }
#chat-page #chat-input-area{ background:#ffffff !important; }
/* active pills/chips that keep a navy fill need white text. Uses 2 IDs to beat
   chat.html's `#chat-page #chat-history-panel *{color:var(--navy)}` which otherwise
   colours the label navy-on-navy. */
#chat-page #chat-history-panel .hist-pill.active,
#chat-page #chat-history-panel .hist-pill.active *{ background-color:#002B49 !important; color:#ffffff !important; }
/* 2026-08-19 layout: the reply stream was squeezed to ~150px (tall input + content-
   sized panel) so answers scrolled off. Let the chat panel fill the viewport height
   and give the message stream the growth; shrink the input to a sensible default. */
#chat-page #chat-outer{ height:calc(100vh - 215px) !important; min-height:300px !important; max-height:calc(100vh - 150px) !important; }
#chat-page #chat-wrap,
#chat-page #chat-history-panel{ height:100% !important; max-height:none !important; }
/* messages fill the leftover space and scroll INTERNALLY (min-height:0 lets it
   shrink to fit so long replies never push off-screen). */
#chat-page #chat-messages{ flex:1 1 0 !important; min-height:0 !important; overflow-y:auto !important; }
/* keep the composer compact so the reply gets the room */
#chat-page #chat-input{ height:48px !important; min-height:48px !important; max-height:96px !important; }
#chat-page #chat-input-area{ padding-top:8px !important; padding-bottom:8px !important; }
/* user question bubble: was white text on light-teal (unreadable) -> dark ink */
#chat-page .chat-bubble.user{ color:#0d1e2e !important; }
/* 2026-08-19 header compaction: was 3 stacked rows (CHAT label+dropdown / buttons /
   input). Remove the redundant "CHAT" label (already shown in the page title) and
   flatten the two header sub-rows into one flex line so dropdown + buttons share the
   top row; the ADAM·PRIVATE chip is pushed to the far right. Wraps only if narrow. */
#chat-page #chat-header{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; row-gap:6px !important; }
#chat-page #chat-header > div{ display:flex !important; align-items:center !important; gap:8px !important; }
#chat-page #chat-header > div:first-child{ flex:0 0 auto !important; flex-wrap:nowrap !important; }   /* dot + dropdown + indicator, stays one line */
#chat-page #chat-header > div:last-child{ flex:1 1 auto !important; flex-wrap:wrap !important; }      /* buttons: share the top row when wide; wrap (never cut off) when narrow */
#chat-page #chat-header > div:first-child > div:first-child{ display:none !important; } /* hide redundant CHAT label */
#chat-page #chat-mode-indicator{ order:99 !important; }
/* status chip semantics: GREEN = private / on-box model, RED = public / external model */
#chat-page #chat-mode-indicator.mode-agent{ color:#15803d !important; background:rgba(21,128,61,0.12) !important; border-color:rgba(21,128,61,0.4) !important; }
#chat-page #chat-mode-indicator.mode-claude,
#chat-page #chat-mode-indicator.mode-image{ color:#c0392b !important; background:rgba(192,57,43,0.12) !important; border-color:rgba(192,57,43,0.4) !important; }
/* compact header buttons so the dropdown + all buttons fit on one top row */
#chat-page #chat-header .hdr-btn{ width:auto !important; min-width:0 !important; padding:0 10px !important; height:30px !important; }
#chat-page #chat-header .chat-tool-btn,
#chat-page #chat-header #adam-tasks-btn,
#chat-page #chat-header #chat-send-btn{ padding:4px 12px !important; height:30px !important; font-size:12px !important; }
::placeholder{color:#8a97a3!important;}
footer,.footer,.footer-brand-centre{background:#ffffff!important;color:#37485a!important;border-top:1px solid #e3e8ed!important;}

/* ---- READABILITY SWEEP ----------------------------------------------------*/
/* faint blue-grey secondary text (4600+ inline uses) -> readable slate */
[style*="165,186,202"],[style*="165, 186, 202"],
[style*="#a5bacb"],[style*="#A5BACA"],[style*="#8aa0b0"],[style*="#7a8794"],
[style*="#70787D"],[style*="rgba(165"]{color:#475569!important;}

/* literal white / near-white inline text on light surfaces -> dark ink
   (chips set their own background; dark ink still reads on yellow/teal/sky) */
[style*="color:#fff"],[style*="color: #fff"],[style*="color:#FFF"],[style*="color:#ffffff"],
[style*="color:white"],[style*="color: white"],
[style*="color:rgba(255,255,255"],[style*="color: rgba(255,255,255"],
[style*="color:rgba(255, 255, 255"]{color:#16242f!important;}

/* generic muted vars used for body copy */
.muted,.dim,.hint,.subtle,.note,.meta,.desc,.caption,small{color:#52606c!important;}

/* ---- keep accents legible -------------------------------------------------*/
button[style*="FDC52C"],.btn-primary,.hdr-btn{color:#1a1300!important;}
a{color:#0a6c79!important;}

/* ---- page & section titles: force dark (literal #fff / accent on white) ----*/
[class*="-title"],[class*="title-"],.admin-tab-title,.pg-hdr-title,.cs-title,
.stat-label,.kpi-label,h1,h2,h3,h4,h5,h6{color:#13202b!important;}
.page-subtitle,.subtitle,.sub,.tab-subtitle{color:#52606c!important;}

/* ---- readability v3: stronger grey + minimum font sizes ----*/
:root{ --grey:#475569; --muted:#475569; }
body{ font-size:14px !important; }
/* lift tiny inline font sizes to a readable floor */
[style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"],[style*="font-size:12px"],
[style*="font-size: 9px"],[style*="font-size: 10px"],[style*="font-size: 11px"],[style*="font-size: 12px"]{font-size:13px !important;}
small,.small,.tiny,.caption,.meta,.muted,.dim,.subtle,.note,.desc,.hint,.sub,.page-subtitle{font-size:13px !important;color:#475569 !important;}
/* catch remaining faint-grey hex/rgb text tokens used in class rules */
[style*="#70787D"],[style*="#5c6b78"],[style*="#8aa0b0"],[style*="#7a8794"],[style*="#a5bacb"],
[style*="112,120,125"],[style*="rgba(165"],[style*="rgba(112"]{color:#475569 !important;}
/* paragraphs / descriptive text inside panels -> readable on white */
.panel p, .panel li, .panel small, .main p, .main li, [class*="desc"], [class*="-sub"]{color:#3a4756 !important;}


/* ===== Accountability/org dark cards — restore light text (v ctz5) =====
   These EOS-style cards use background:var(--navy) (dark) but their text uses
   var(--white) + white/blue-grey tokens that the global readability sweep forced
   dark, making them dark-on-dark. Re-lighten ONLY token-based text so the
   inline dept accent colours (#FDC52C, dept hexes) are preserved. */
#accountability-view-container [style*="var(--white)"],
#accountability-view-container [style*="255,255,255"],
#accountability-view-container [style*="165,186,202"],
#accountability-view-container ul,
#accountability-view-container ol,
#accountability-view-container li,
#accountability-view-container code { color:#e8eef5 !important; }
#accountability-view-container { color:#d7e3f0 !important; }

/* ===== Agents view (#agents-page-inner) — white cards, darken dark-theme
   class-based text that the inline-style sweep missed (v ctz6) ===== */
.tier-label{ color:#33485a !important; opacity:1 !important; }
#agents-page-inner .card-name{ color:#13202b !important; }
#agents-page-inner .card-id{ color:#5a6b78 !important; }
#agents-page-inner .card-model{ color:#46586a !important; }
#agents-page-inner [style*="165,186,202"]{ color:#5a6b78 !important; }
/* Agent card 'Doctor' button — was white-on-white; make it navy w/ white text (v ctz7) */
#agents-page-inner .card-link.doc{ background:#16304a !important; color:#ffffff !important; border:1px solid #16304a !important; }
#agents-page-inner .card-link.doc:hover{ background:#21456a !important; color:#ffffff !important; border-color:#21456a !important; }
/* v ctz8 — kill remaining near-white dark-theme text tokens that are invisible
   on the light theme (used widely in JS-rendered components: MD doc viewer,
   VAPI/voice header, agent doc bodies, etc.) */
[style*="#e2e8f0"], [style*="#c8d8e4"], [style*="#cbd5e1"], [style*="#e6edf3"], [style*="#dbe7f3"]{ color:#23323f !important; }
/* Agent Architecture Docs viewer — was dark translucent bg + faint text */
#global-doc-content{ background:#ffffff !important; color:#23323f !important; border:1px solid rgba(13,30,46,.12) !important; }
#global-doc-content [style*="165,186,202"]{ color:#46586a !important; }

/* v ctz9 — admin help bar: was grey-on-grey, make legible */
.admin-help-bar{ background:#f1f5f9 !important; border:1px solid rgba(13,30,46,.10) !important; }
.admin-help-bar-text{ color:#33424f !important; }
.admin-help-bar-text strong{ color:#13202b !important; }
.admin-help-bar-text code{ color:#0e7c8a !important; background:rgba(13,30,46,.05) !important; }

/* v ctz10 — stat cards used white-opacity text (rgba(255,255,255,.65/.85)) which is
   invisible on the light theme cards. Darken label+sub everywhere. */
.stat-label{ color:#33424f !important; }
.stat-sub{ color:#556472 !important; }
.status-bar .stat-card .stat-sub, #sales-kpi-bar .stat-card .stat-sub,
.mktg-kpi .stat-card .stat-sub, .aut-kpi .stat-card .stat-sub,
#page-admin .stat-card .stat-sub{ color:#556472 !important; }
/* generic faint white-opacity text used inline on light panels */
[style*="rgba(255,255,255,0.6)"],[style*="rgba(255,255,255,0.65)"],[style*="rgba(255,255,255,0.7)"],[style*="rgba(255,255,255,.6)"],[style*="rgba(255,255,255,.65)"],[style*="rgba(255,255,255,.7)"]{ color:#46586a !important; }
/* v ctz11 — Models tab: agent name/id columns rendered white-on-white. Force dark. */
#skill-matrix-body td, #skill-matrix-body th{ color:#16242f !important; }
#skill-matrix-body th[style*="--sky"], #skill-matrix-body th{ color:#33485a !important; }
#skill-matrix-body td:first-child{ color:#13202b !important; }
#agent-models-body [style*="#fff"], #agent-models-body [style*="#ffffff"], #agent-models-body [style*="255,255,255"]{ color:#13202b !important; }
#agent-models-body [style*="165,186,202"]{ color:#46586a !important; }
/* ============================================================================
   v ctz12 — UNIFIED DARK STAT CARDS (site-wide) + 2nd Brain cleanup
   One consistent card design: dark navy card, clear light text, accent left edge.
   Inline-coloured values keep their accent colour (bright on dark).
   ============================================================================ */
.stat-card{
  background:#16304a !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-left-width:4px !important;            /* per-card accent via inline border-left-color */
  box-shadow:0 2px 6px rgba(13,30,46,.20) !important;
}
.stat-card *:not([style*="color"]){ color:#e9eef4 !important; }   /* light text; keep inline accents */
.stat-card .stat-label{ color:#aebfce !important; }
.stat-card .stat-sub{ color:#9fb3c4 !important; }
/* keep the deliberate white variant white */
.stat-card.stat-card-white{ background:#ffffff !important; }
.stat-card.stat-card-white *:not([style*="color"]){ color:#13202b !important; }

/* 2nd Brain L0–L4 tier cards (pale inline divs) -> match the dark design */
[data-admin-tab="databases"] [style*="rgba(165,186,202,0.06)"]{ background:#16304a !important; border-color:rgba(255,255,255,.08) !important; }
[data-admin-tab="databases"] [style*="rgba(165,186,202,0.06)"] *{ color:#e9eef4 !important; }

/* 2nd Brain: remove the empty kg video animation + drop the Graph view (Cards only) */
[data-admin-tab="databases"] video,
[data-admin-tab="databases"] #brainOverlay,
[data-admin-tab="databases"] div:has(> div > video),
#sb-view-graph, #sb-view-toggle, #sb-graph-view{ display:none !important; }
/* ctz13: Environment > Involved Agents cards were dark-theme (white text) -> invisible on light bg. */
.acc-name{ color:#16304a !important; }
.acc-task{ color:#3c5468 !important; }
.acc-arrow{ color:rgba(60,84,104,0.55) !important; }
.agent-chain-card{ background:#ffffff !important; border-color:rgba(22,48,74,0.18) !important; }
.pipe-stage{ background:#f3f6f9 !important; }
.pipe-stage *:not([style*='color']){ color:#3c5468 !important; }


/* ctz14: top-right logged-in user + clock were white/yellow (dark-theme) -> invisible on light bg. */
.nav-user-name{ color:#16304a !important; }
#nav-user-name{ color:#16304a !important; }
.nav-clock, #clock{ color:#16304a !important; }
/* ctz14: sortable list-header affordance for golden-rules tables */
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:#16304a !important; }
th.sortable .arrow{ font-size:9px; margin-left:4px; }

/* ctz15: Models tab polish + OpenClaw tab cleanup */
/* Agent Models left column rendered white-on-white (var(--white)) -> invisible = fake left gap */
#agent-models-body [style*="--white"]{ color:#16304a !important; }
#agent-models-body [style*="rgba(165,186,202"]{ color:#64748b !important; }
/* light, thin scrollbars inside models-tab panels (dark navy bars looked broken on light bg) */
[data-admin-tab="models"] ::-webkit-scrollbar,
[data-admin-tab="privateclaw"] ::-webkit-scrollbar{ width:8px; height:8px; }
[data-admin-tab="models"] ::-webkit-scrollbar-track,
[data-admin-tab="privateclaw"] ::-webkit-scrollbar-track{ background:#f1f5f9; border-radius:6px; }
[data-admin-tab="models"] ::-webkit-scrollbar-thumb,
[data-admin-tab="privateclaw"] ::-webkit-scrollbar-thumb{ background:#c3cdd6; border-radius:6px; }
/* skill-matrix + agent-models rows: consistent light borders */
#agent-models-body > div{ border-bottom:1px solid #eef2f5 !important; }
/* OpenClaw tab: hide legacy WordPress-era stat cards (superseded by Agent Team panel) */
[data-admin-tab="privateclaw"] div[style*="repeat(3,1fr)"]{ display:none !important; }


/* v ctz30 — Social Hub platform tiles: force dark tile + white name + readable tagline.
   These were .stat-card with an inline #fff name and a rgba(165,186,202,0.4) tagline (40%
   opacity = too faint). Scope to .soc-plat-grid so only the platform tiles are affected. */
.soc-plat-grid .stat-card{ background:#16304a !important; }
.soc-plat-grid .stat-card > div:first-child{ color:#ffffff !important; }
.soc-plat-grid .stat-card > div:last-child{ color:#9fb3c4 !important; }


/* v ctz31 — Overview collapsible sections (Calendar/Captions/Performance/Trends folded off the tab bar). */
.soc-folds{ display:flex; flex-direction:column; gap:10px; }
.soc-fold{ background:#16304a !important; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; }
.soc-fold > summary{ cursor:pointer; padding:12px 16px; font-weight:600; color:#e9eef4 !important; list-style:none; font-size:14px; }
.soc-fold > summary::-webkit-details-marker{ display:none; }
.soc-fold > summary::before{ content:'\25B8'; margin-right:10px; color:#9fb3c4; display:inline-block; transition:transform .15s; }
.soc-fold[open] > summary::before{ transform:rotate(90deg); }
.soc-fold-body{ padding:2px 16px 16px; color:#9fb3c4 !important; font-size:13px; line-height:1.5; }