/* ============================================================
   ClearMint Essentials — Control Center DARK theme
   Loaded LAST (after lite.css, hub.css, hub-cc.css, hub-lux.css).

   The console toggles theme by setting  html[data-theme="dark"].
   Light mode is the untouched default — every rule below is scoped
   under html[data-theme="dark"], so this file NEVER affects light.

   Palette family: warm graphite (brand mint undertone), emerald
   accents, rare soft gold — cohesive with the light console + the
   existing `.ujp.dark` portal palette in hub.css.
   ============================================================ */

/* ============================================================
   1. TOKEN FLIP — override lite.css :root custom properties.
   Most CC modules read these vars, so this recolors them for free.
   ============================================================ */
html[data-theme="dark"] {
  /* page + elevated surfaces (warm charcoal, faint mint undertone) */
  --app-bg:      #141a17;
  --app-bg-alt:  #101512;
  --paper:       #141a17;
  --surface:     #1b2320;
  --surface-2:   #212b26;
  --tint:        #1c2a23;

  /* light text ramp (ink scale inverts: 900 = brightest) */
  --ink-900: #f4f6f4;
  --ink-800: #e6eae7;
  --ink-700: #cfd6d1;
  --ink-600: #b3bdb7;
  --ink-500: #94a09a;
  --ink-400: #79857f;
  --ink-300: #55605a;
  --ink-200: #3a453f;
  --ink-100: #2a332e;

  /* subtle light-on-dark borders */
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);

  /* brand mint — nudged a touch brighter so it reads on dark */
  --mint-50:  #10201a;
  --mint-100: #163027;
  --mint-200: #1f4436;
  --mint-300: #3f9a74;
  --mint-400: #52b98c;
  --mint-500: #4bbd8a;
  --mint-600: #3da77c;
  --mint-700: #2f8b66;

  /* status colors — brightened for contrast on dark */
  --good: #4bbd8a;
  --warn: #e2b45a;
  --bad:  #e57e7e;
  --info: #7fb0e0;

  /* gold accent — slightly warmer/brighter so it glows on graphite */
  --gold:      #dcb56c;
  --gold-soft: #ecd6a6;
  --cream:     #22282a;

  /* deeper shadows read better against dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .32);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, .48), 0 2px 8px rgba(0, 0, 0, .34);

  color-scheme: dark;
}

/* body/page background so the shell backdrop is dark too */
html[data-theme="dark"] body {
  background: var(--app-bg-alt);
  color: var(--ink-800);
}

/* ============================================================
   2. .uj VARIABLE BLOCK — override hub.css's `.uj{ --uj-* }`.
   uj-based components (tables, cards, posts, menus, inputs,
   chips, empty states) all read these, so flipping them here
   recolors the whole Product-Hub surface at once.
   ============================================================ */
html[data-theme="dark"] .uj {
  --uj-bg:       #10150f;
  --uj-side:     #171e18;
  --uj-ink:      #f4f6f4;
  --uj-ink-2:    #d4dbd6;
  --uj-muted:    #9aa79f;
  --uj-faint:    #74817a;
  --uj-line:     rgba(255, 255, 255, .09);
  --uj-line-2:   rgba(255, 255, 255, .05);
  --uj-hover:    rgba(255, 255, 255, .06);
  --uj-active:   rgba(255, 255, 255, .09);
  --uj-primary:    var(--mint-500);
  --uj-primary-hi: var(--mint-600);
  --uj-bg-2:     #10150f;

  background: var(--uj-bg);
  color: var(--uj-ink);
}

/* scrollbar thumbs read as light-on-dark */
html[data-theme="dark"] .uj ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-color: var(--uj-bg);
}
html[data-theme="dark"] .uj-side ::-webkit-scrollbar-thumb {
  border-color: var(--uj-side);
}

/* ============================================================
   3. SMOOTH THEME TRANSITION (tasteful — only the big surfaces)
   ============================================================ */
html[data-theme] .uj-content,
html[data-theme] .uj-top,
html[data-theme] .uj-side,
html[data-theme] .uj-card,
html[data-theme] .uj-table td,
html[data-theme] .kpi,
html[data-theme] .panel {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .uj-content,
  html[data-theme] .uj-top,
  html[data-theme] .uj-side,
  html[data-theme] .uj-card,
  html[data-theme] .uj-table td,
  html[data-theme] .kpi,
  html[data-theme] .panel {
    transition: none;
  }
}

/* ============================================================
   4. SIDEBAR — stays dark, but lifted a hair off the (also dark)
   content so it doesn't blend. Slightly lighter panel + a crisp
   right border. Active item stays mint (from hub-lux gradient).
   ============================================================ */
html[data-theme="dark"] .uj-side {
  background: #1a221d;                             /* a hair lighter than content */
  border-right: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .03),
              1px 0 22px -14px rgba(0, 0, 0, .9);
}
html[data-theme="dark"] .uj-side-hd {
  border-bottom: 0;
}
html[data-theme="dark"] .uj-side-hd h1 { color: #fff; }
html[data-theme="dark"] .uj-side-hd .uj-side-logo { background: rgba(255, 255, 255, .06); }
/* "open board" glass link — matches the light chrome's subtle ext button */
html[data-theme="dark"] .uj-side-hd .ext {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
}
html[data-theme="dark"] .uj-side-hd .ext:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
/* the dark rail (product-hub modules) already dark — nudge separator */
html[data-theme="dark"] .uj-rail {
  background: #12160f;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}
/* sidebar footer / who row */
html[data-theme="dark"] .uj-side .uj-side-ft,
html[data-theme="dark"] .uj-side .who,
html[data-theme="dark"] .uj-foot {
  border-top-color: rgba(255, 255, 255, .08);
}

/* ============================================================
   5. TOP BAR + CONTENT SURFACE
   ============================================================ */
html[data-theme="dark"] .uj-top {
  background: var(--app-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .uj-top h2 {
  color: var(--ink-900);
}
html[data-theme="dark"] .uj-content {
  background: var(--app-bg);
}

/* ============================================================
   6. BUTTONS / SEARCH — hub.css hardcodes #fff backgrounds
   ============================================================ */
html[data-theme="dark"] .uj-btn,
html[data-theme="dark"] .uj-search,
html[data-theme="dark"] .uj-sel,
html[data-theme="dark"] .uj-iconbtn,
html[data-theme="dark"] .uj-uppill,
html[data-theme="dark"] .uj-minipill,
html[data-theme="dark"] .uj-react,
html[data-theme="dark"] .uj-tag,
html[data-theme="dark"] .uj-cm-foot .att,
html[data-theme="dark"] .ujp-btn,
html[data-theme="dark"] .ujp-iconbtn,
html[data-theme="dark"] .ujp-sort,
html[data-theme="dark"] .uj-ai-chip {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-800);
}
html[data-theme="dark"] .uj-btn:hover,
html[data-theme="dark"] .uj-sel:hover,
html[data-theme="dark"] .uj-iconbtn:hover,
html[data-theme="dark"] .uj-react:hover,
html[data-theme="dark"] .ujp-btn:hover,
html[data-theme="dark"] .ujp-iconbtn:hover,
html[data-theme="dark"] .ujp-sort:hover,
html[data-theme="dark"] .uj-ai-chip:hover,
html[data-theme="dark"] .uj-cm-foot .att:hover {
  background: var(--surface-2);
  color: var(--ink-900);
}
html[data-theme="dark"] .uj-search input {
  color: var(--ink-900);
}
/* mint primary buttons keep their identity */
html[data-theme="dark"] .uj-btn.dark,
html[data-theme="dark"] .uj-chip.on,
html[data-theme="dark"] .uj-ai-ask .go {
  background: var(--mint-500);
  border-color: var(--mint-500);
  color: #fff;
}
html[data-theme="dark"] .uj-btn.dark:hover {
  background: var(--mint-600);
}
html[data-theme="dark"] .uj-btn.ghost,
html[data-theme="dark"] .uj-btn.ghost:hover {
  background: transparent;
}

/* ============================================================
   7. CARDS / STATS / PANELS — hub.css + inline #fff surfaces
   ============================================================ */
html[data-theme="dark"] .uj-card,
html[data-theme="dark"] .uj-stat,
html[data-theme="dark"] .uj-rcard,
html[data-theme="dark"] .uj-kcard,
html[data-theme="dark"] .uj-log,
html[data-theme="dark"] .uj-composer,
html[data-theme="dark"] .uj-survey-card,
html[data-theme="dark"] .uj-cle-stats,
html[data-theme="dark"] .uj-ai-answer,
html[data-theme="dark"] .uj-live,
html[data-theme="dark"] .uj-share .uj-sig,
html[data-theme="dark"] .uj-social a,
html[data-theme="dark"] .ujp-card,
html[data-theme="dark"] .uj-mock {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-800);
}
html[data-theme="dark"] .uj-social a:hover {
  background: var(--surface-2);
}
html[data-theme="dark"] .uj-kbody {
  background: var(--surface-2);
  border-color: var(--line);
}

/* ============================================================
   8. TABLES — header, rows, hover (hub.css + hub-lux + hub-cc)
   ============================================================ */
html[data-theme="dark"] .uj-table th,
html[data-theme="dark"] .uj-content .uj-table th {
  color: var(--ink-500);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .uj-table td,
html[data-theme="dark"] .uj-content .uj-table td {
  color: var(--ink-700);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .uj-table tr:hover td,
html[data-theme="dark"] .uj-content .uj-table tbody tr:hover td {
  background: var(--surface-2);
}
html[data-theme="dark"] .uj-table select {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-700);
}

/* ============================================================
   9. CHIPS / TAGS / PILLS-in-hub
   ============================================================ */
html[data-theme="dark"] .uj-chip {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-700);
}
html[data-theme="dark"] .uj-chip:hover {
  background: var(--surface-2);
}
html[data-theme="dark"] .uj-chip.on {
  border-color: var(--mint-500);
  color: #fff;
}

/* ============================================================
   10. POSTS / VOTES / DETAIL / BOARD
   ============================================================ */
html[data-theme="dark"] .uj-post:hover {
  background: rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .uj-vote {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-700);
}
html[data-theme="dark"] .uj-vote:hover,
html[data-theme="dark"] .uj-vote.on {
  border-color: var(--mint-400);
}
html[data-theme="dark"] .uj-vote.on,
html[data-theme="dark"] .uj-uppill.on {
  background: var(--mint-500);
  color: #fff;
}
html[data-theme="dark"] .uj-tab.active {
  color: var(--ink-900);
  border-bottom-color: var(--mint-400);
}
html[data-theme="dark"] .uj-back:hover,
html[data-theme="dark"] .uj-dtitle,
html[data-theme="dark"] .uj-cm-title,
html[data-theme="dark"] .uj-cle-title {
  color: var(--ink-900);
}

/* ============================================================
   11. MENUS / POPOVERS / MODALS / OVERLAY
   The hub.css glassmorphism uses translucent WHITE — that reads
   milky on dark, so re-tint the frost to translucent graphite.
   ============================================================ */
html[data-theme="dark"] .uj-menu,
html[data-theme="dark"] .uj-npop,
html[data-theme="dark"] .uj-inbox,
html[data-theme="dark"] .ujp-menu {
  background: rgba(26, 33, 29, .82);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--ink-800);
}
html[data-theme="dark"] .uj-mi,
html[data-theme="dark"] .ujp-menu .row {
  color: var(--ink-700);
}
html[data-theme="dark"] .uj-mi:hover,
html[data-theme="dark"] .ujp-menu .row:hover,
html[data-theme="dark"] .uj-menu .uj-mi:hover,
html[data-theme="dark"] .uj-npop a:hover {
  background: rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .uj-mi.sel,
html[data-theme="dark"] .uj-menu .uj-mi.sel {
  background: rgba(255, 255, 255, .09);
  color: var(--ink-900);
}
html[data-theme="dark"] .uj-npop a,
html[data-theme="dark"] .uj-npop-h,
html[data-theme="dark"] .uj-inbox-item,
html[data-theme="dark"] .ujp-menu .sep {
  border-color: rgba(255, 255, 255, .07);
}

/* overlay + create modal */
html[data-theme="dark"] .uj-overlay {
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
html[data-theme="dark"] .uj-cmodal,
html[data-theme="dark"] .uj-modal {
  background: rgba(26, 33, 29, .88);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .7),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--ink-800);
}
html[data-theme="dark"] .uj-modal-h,
html[data-theme="dark"] .uj-modal-ft {
  border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .uj-modal-ft {
  background: rgba(255, 255, 255, .02);
}
html[data-theme="dark"] .uj-cmodal .uj-sel,
html[data-theme="dark"] .uj-cmodal .att {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .uj-cmodal .uj-sel:hover,
html[data-theme="dark"] .uj-cmodal .att:hover {
  background: rgba(255, 255, 255, .1);
}
html[data-theme="dark"] .uj-cm-title::placeholder,
html[data-theme="dark"] .uj-cm-details::placeholder,
html[data-theme="dark"] .uj-cle-title::placeholder,
html[data-theme="dark"] .uj-cle-body::placeholder {
  color: var(--ink-400);
}
/* opaque fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .uj-menu,
  html[data-theme="dark"] .uj-npop,
  html[data-theme="dark"] .uj-inbox,
  html[data-theme="dark"] .ujp-menu,
  html[data-theme="dark"] .uj-cmodal,
  html[data-theme="dark"] .uj-modal {
    background: #1e2622;
  }
}

/* ============================================================
   12. INPUTS / TEXTAREAS / SELECTS
   ============================================================ */
html[data-theme="dark"] .uj-input,
html[data-theme="dark"] .uj-ta,
html[data-theme="dark"] .uj-composer textarea,
html[data-theme="dark"] .uj-ai-ask,
html[data-theme="dark"] .uj-ai-in,
html[data-theme="dark"] .uj-cle-stats {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-900);
}
html[data-theme="dark"] .uj-input:focus,
html[data-theme="dark"] .uj-ta:focus {
  border-color: var(--mint-400);
  box-shadow: 0 0 0 3px rgba(75, 189, 138, .18);
}
html[data-theme="dark"] .uj input,
html[data-theme="dark"] .uj textarea,
html[data-theme="dark"] .uj-composer textarea,
html[data-theme="dark"] .uj-ai-ask input,
html[data-theme="dark"] .uj-ai-in textarea {
  color: var(--ink-900);
  background: transparent;
}
html[data-theme="dark"] .uj ::placeholder {
  color: var(--ink-400);
}

/* ============================================================
   13. NOTES / ERRORS / MISC hardcoded blocks in hub.css
   ============================================================ */
html[data-theme="dark"] .uj-note {
  background: rgba(226, 180, 90, .10);
  border-color: rgba(226, 180, 90, .28);
}
html[data-theme="dark"] .uj-note .h {
  color: var(--gold);
}
html[data-theme="dark"] .uj-note a {
  color: var(--ink-700);
}
html[data-theme="dark"] .uj-err {
  background: rgba(229, 126, 126, .12);
  border-color: rgba(229, 126, 126, .32);
  color: var(--bad);
}
html[data-theme="dark"] .uj-dir-empty,
html[data-theme="dark"] .uj-empty,
html[data-theme="dark"] .uj-content .uj-empty {
  color: var(--ink-500);
}
html[data-theme="dark"] .uj-boardpill {
  background: rgba(75, 189, 138, .12);
  border-color: rgba(75, 189, 138, .28);
  color: var(--mint-300);
}
html[data-theme="dark"] .uj-mock-bar {
  background: rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .uj-ver {
  background: var(--mint-600);
  color: #fff;
}
html[data-theme="dark"] .uj-modbar {
  background: #22282a;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .uj-modbar .div {
  background: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .uj-cm-head .av .rk,
html[data-theme="dark"] .ujp-av .on {
  border-color: var(--surface);
}

/* ============================================================
   14. KPI CARDS — dark surface, accent stays premium emerald
   ============================================================ */
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .uj-content .kpi {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .kpi:hover,
html[data-theme="dark"] .uj-content .kpi:hover {
  border-color: var(--mint-300);
}
html[data-theme="dark"] .kpi .val,
html[data-theme="dark"] .uj-content .kpi .val {
  color: var(--ink-900);
}
/* accent KPI: deep emerald gradient still reads on dark, gold-tinted lift */
html[data-theme="dark"] .kpi.accent,
html[data-theme="dark"] .uj-content .kpi.accent {
  background: linear-gradient(155deg, var(--mint-600), var(--mint-700));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7),
              0 2px 12px -4px rgba(220, 181, 108, .30),
              inset 0 1px 0 rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .kpi.accent .lbl,
html[data-theme="dark"] .kpi.accent .sub,
html[data-theme="dark"] .uj-content .kpi.accent .lbl,
html[data-theme="dark"] .uj-content .kpi.accent .sub {
  color: rgba(255, 255, 255, .86);
}
html[data-theme="dark"] .kpi.accent .val,
html[data-theme="dark"] .uj-content .kpi.accent .val {
  color: #fff;
}

/* ============================================================
   15. PANELS — dark surface, mint header marker preserved
   ============================================================ */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .uj-content .panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4),
              0 8px 24px -16px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .panel:hover,
html[data-theme="dark"] .uj-content .panel:hover {
  border-color: var(--line-strong);
}
html[data-theme="dark"] .panel .head,
html[data-theme="dark"] .uj-content .panel .head {
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .panel .head h3,
html[data-theme="dark"] .uj-content .panel .head h3 {
  color: var(--ink-900);
}

/* ============================================================
   16. PILLS — legible on dark (lite.css hardcodes some hex)
   ============================================================ */
html[data-theme="dark"] .pill.paid,
html[data-theme="dark"] .pill.income {
  background: rgba(75, 189, 138, .16);
  color: #7fd9ae;
}
html[data-theme="dark"] .pill.unpaid {
  background: rgba(226, 180, 90, .16);
  color: #e8c583;
}
html[data-theme="dark"] .pill.expense {
  background: rgba(229, 126, 126, .16);
  color: #ef9d9d;
}
html[data-theme="dark"] .pill.transfer,
html[data-theme="dark"] .pill.cc_payment {
  background: rgba(255, 255, 255, .08);
  color: var(--ink-600);
}
html[data-theme="dark"] .pill.src {
  background: rgba(127, 176, 224, .16);
  color: #9cc0e8;
}

/* ============================================================
   17. MUTED text + generic links
   ============================================================ */
html[data-theme="dark"] .muted {
  color: var(--ink-500);
}
html[data-theme="dark"] .uj a {
  color: inherit;
}