/* =========================================================
   theme-dark.css — viral.app-style dark skin (Nickolai, Aug 2026).
   Loaded on every page AFTER variables.css / app.css / ui.css so it
   overrides the design tokens. The whole app is token-driven, so
   re-pointing the neutrals + surfaces flips the entire UI to dark
   without touching component CSS. Accent (UGC Lab yellow) stays so buttons
   keep their dark-ink contrast; links/blues stay readable on dark.
   ========================================================= */
:root {
  /* surfaces — near-black canvas, elevated dark cards */
  --bg:        #0a0e13;
  --bg-soft:   #131a22;   /* input fills */
  --bg-card:   #12181f;   /* cards / panels / sidebar */
  --surface:   #12181f;   /* pill/popover surface — calendar/connections/compose pills
                             read var(--surface,#fff); the token was never defined, so
                             every one of them rendered as a WHITE pill with near-white
                             text on the dark UI (Nickolai's coloring bug, Aug 2026) */
  --bg-elev:   #171f28;   /* hover */
  --border:    #212a35;
  --border-lt: #2b3644;

  /* ink on dark */
  --text:      #eef2f7;
  --text-mute: #8a97a6;
  --text-dim:  #5c6875;

  /* accents tuned for dark */
  --violet:        #ffd84d;   /* primary = UGC Lab yellow (dark-ink buttons keep contrast) */
  --violet-dark:   #f2c93c;
  --violet-darker: #e0b62e;
  --violet-light:  #7aa2ff;   /* links a touch brighter on dark */
  --red:    #ff6b81;
  --green:  #3ce0a3;
  --blue:   #4f9dff;

  --grad-violet: linear-gradient(135deg, #ffd84d 0%, #e0b62e 100%);
  --grad-glow:   transparent;

  --shadow:    0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
  --ring:      0 0 0 1px var(--border);
}

/* Paint the ground dark even before app.css's body rule wins, and kill any
   light-canvas glow. Scrollbars + selection tuned to match. */
html, body { background: #0a0e13; }
body { color: var(--text); }
::selection { background: rgba(255, 216, 77, .28); }
* { scrollbar-color: #2b3644 transparent; }

/* A few components hardcode white/light in app.css — nudge the common ones so
   nothing stays a bright island on the dark canvas. Token-safe (no new colors). */
.appbar, .sidebar, .card, .module, .panel, .tbl-wrap, .modal__card,
.socmodal__card, .bugmodal__box, .top, .job, .empty, .tbl thead th {
  background-color: var(--bg-card);
  border-color: var(--border);
}
.apinput, .apta, input[type="text"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
  background-color: var(--bg-soft);
  border-color: var(--border-lt);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
.tbl tbody tr:hover td { background-color: var(--bg-elev); }

/* The appbar + sidebar states hardcode warm-paper light in app.css — override
   to dark so the chrome matches viral.app (Nickolai). Sidebar active is a
   restrained dark highlight, not a bright accent block ("don't randomly switch
   colors"). */
.appbar { background: rgba(10,14,19,.85) !important; border-bottom-color: var(--border) !important; }
.appbar__user:hover { background: var(--bg-elev) !important; }
.sidebar__item:hover { background: var(--bg-elev) !important; color: var(--text) !important; }
.sidebar__item.is-active { background: var(--bg-elev) !important; color: var(--text) !important; box-shadow: inset 2px 0 0 var(--violet); }
.sidebar__item.is-active svg { color: var(--violet); }

/* Linear-grade rail (Aug 2026 aesthetic pass, ADDITIVE — this file loads after
   ui.css, so equal selectors win here; !important only where ui.css uses it).
   The rail sits on the canvas itself with a hairline divider instead of the
   bluish #111b29 panel, and items are compact and quiet: smaller type, tighter
   hit areas, icons that follow the text colour. Active state stays the
   restrained elev highlight + lime inset bar from above (Nickolai's call). */
.sidebar {
  background: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
  padding: 14px 10px;
}
.sidebar__label {
  color: var(--text-dim) !important;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 16px 10px 5px;
}
.sidebar__item {
  color: var(--text-mute) !important;
  min-height: 34px; padding: 7px 10px; gap: 10px;
  border-radius: 8px; font-size: 13.5px; font-weight: 500;
}
.sidebar__item.is-active { font-weight: 600; }
.sidebar__item svg { width: 17px; height: 17px; }
.sidebar__lock { color: var(--text-dim); }
.sidebar__new {
  border-radius: 9px !important; min-height: 36px;
  font-size: 13.5px; font-weight: 700;
}
.sidebar__prof { border-top: 1px solid var(--border) !important; border-radius: 8px !important; }
.sidebar__prof:hover { background: var(--bg-elev) !important; }
.sidebar__prof-t b { color: var(--text) !important; font-size: 13px; }
.sidebar__prof-t small, .sidebar__prof-plan { color: var(--text-dim) !important; }
.sidebar__prof-out, .sidebar__prof-bell { color: var(--text-mute) !important; }
.sidebar__prof-out:hover, .sidebar__prof-bell:hover { background: var(--bg-elev) !important; color: var(--text) !important; }
.sidebar__bug { color: var(--text-dim) !important; }
/* mobile drawer needs a solid ground so content never shows through */
@media (max-width: 820px) {
  .layout.has-sidebar .sidebar { background: var(--bg) !important; }
}

/* Active pill/tab was `background: var(--text); color:#fff9ea` in the light base —
   after the token flip that's near-white bg + cream text (an unreadable white
   blob). Restore contrast: dark ink on the now-light active pill, and darken the
   count badge to match. (Sameer, Aug 29 — Orders/Mine tabs on /editor unreadable.) */
.tab.is-active { color: var(--bg) !important; }
.tab.is-active .tab__n { background: rgba(0,0,0,.16) !important; color: var(--bg) !important; }

/* ui.css hardcodes light fills on the ghost/danger buttons (background:#fff,
   #fff5f6) — white blobs on the dark UI ("why is this white?", Nickolai). Point
   them at dark tokens. Loaded after ui.css so these win without !important. */
.btn--ghost { background: var(--bg-elev); border-color: var(--border-lt); color: var(--text); }
.btn--ghost:hover { border-color: var(--violet); }
.btn--danger { background: rgba(255,107,129,.12); border-color: rgba(255,107,129,.42); color: var(--red); }
.btn--danger:hover { background: rgba(255,107,129,.2); border-color: rgba(255,107,129,.6); }

/* Pill count badges were rgba(0,0,0,.07-.08) — invisible on a dark pill. On the
   SELECTED pill (now light with dark ink) the dark tint is right, so only the
   resting state flips to a light tint. */
.cbbrand span, .pfpill__ct { background: rgba(255,255,255,.09); }
.cbbrand.is-cur span, .pfpill.is-active .pfpill__ct { background: rgba(0,0,0,.14); }
.cbbrand:hover { border-color: var(--border-lt); }

/* ui.css hardcodes light fills WITH !important on the shared card/input classes
   (.apcard/.card-block/.setcard/.module bg #fff, .apinput/.apta/.field inputs
   bg #fff) — those beat every non-important dark rule and were the "white
   island" bugs on Create post and the calendar schedule popup (Nickolai,
   Aug 2026). Equal-importance overrides here win by load order. */
.card-block, .apcard, .setcard, .module {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.field input, .field select, .field textarea,
.apinput, .apta {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-lt) !important;
  color: var(--text) !important;
  border-radius: 11px !important;
}
.field input:focus, .apinput:focus, .apta:focus,
.field select:focus, .field textarea:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(255, 216, 77, .14) !important;
}

/* ui.css mockup-library classes ship light literals (bg #fff, #edf0f2 hairlines,
   light tiles) — dark-token equivalents so no page that uses them shows a white
   card on the dark canvas. Same specificity, later load → these win. */
.secondary { background: var(--bg-elev); border-color: var(--border-lt); color: var(--text); }
.filters, .kpis, .card, .campaignrow { background: var(--bg-card); border-color: var(--border); }
.campaignrow { border-top: 1px solid var(--border); }
.campaignrow:hover { background: var(--bg-elev); }
.cardhead { border-bottom-color: var(--border); }
.chart-grid i { border-top-color: var(--border); }
.attention article { border-bottom-color: var(--border); }
.statusicon { background: var(--bg-elev); }
.pill { background: rgba(60,224,163,.12); color: var(--green); }
.danger { background: rgba(255,107,129,.12); border-color: rgba(255,107,129,.42); color: var(--red); }
.modal { background: var(--bg-card); border: 1px solid var(--border-lt); }
.close { background: var(--bg-elev); color: var(--text); }
.choice { background: var(--bg-soft); }
.drop { background: var(--bg-soft); border-color: var(--border-lt); }
.steps, .mode button, .intent, .day > button, .job { background: var(--bg-card); }
.day > button { border-color: var(--border-lt); }