/* =========================================================================
   Agentiva Dashboard — dark theme
   Loaded after styles.css. Everything here is scoped to
   html[data-theme="dark"], so the light theme is untouched.

   The idea: a studio at night. Deep green-black glass, the brand lime as
   the only light source — the grid floor, the house plan, active states and
   the data all glow in it.
   ========================================================================= */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Text. --ink is the primary text colour throughout styles.css. */
  --ink: #f2f3ee;
  --graphite: #c8cac1;
  --muted: #92948b;
  --mist: #3a3c36;

  /* Grounds */
  --paper: #0a0b09;
  --paper-2: #111210;
  --night: #111210;          /* dark text on lime */

  /* Status, lifted so they read on dark */
  --good: #86dc94;
  --warn: #f3c55a;
  --bad: #ff8a80;

  /* Chart marks: lime is the data colour on dark */
  --mark: var(--lime);
  --mark-quiet: #4b4e45;
  --mark-surface: #161714;
  --grid: rgba(255, 255, 255, 0.08);

  /* Light still comes from the top left; shadows fall into black. */
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  --cast-sm: 3px 6px 14px -7px rgba(0, 0, 0, 0.75);
  --cast-md: 8px 16px 32px -16px rgba(0, 0, 0, 0.85), 2px 4px 10px -6px rgba(0, 0, 0, 0.6);
  --cast-lg: 24px 44px 80px -34px rgba(0, 0, 0, 0.95), 6px 14px 30px -16px rgba(0, 0, 0, 0.7);
  --neon: 0 0 0 1px rgba(212, 240, 60, 0.45), 0 6px 22px -6px rgba(212, 240, 60, 0.55);
}

html[data-theme="dark"] ::selection { background: rgba(212, 240, 60, 0.35); color: #fff; }
html[data-theme="dark"] :focus-visible { outline-color: var(--lime); box-shadow: 0 0 0 6px rgba(212, 240, 60, 0.28); }

/* ---------------------------------------------------------------- scene */

html[data-theme="dark"] .scene {
  background:
    radial-gradient(90% 60% at 50% 115%, rgba(212, 240, 60, 0.12) 0%, rgba(212, 240, 60, 0) 62%),
    radial-gradient(70% 55% at 0% 0%, #1b1d18 0%, rgba(27, 29, 24, 0) 60%),
    linear-gradient(180deg, #0d0e0b 0%, #060705 100%);
}
html[data-theme="dark"] .scene__wall {
  background-image:
    linear-gradient(rgba(212, 240, 60, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 240, 60, 0.04) 1px, transparent 1px);
}
/* The floor grid becomes the neon floor. */
html[data-theme="dark"] .scene__grid {
  background-image:
    linear-gradient(rgba(212, 240, 60, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 240, 60, 0.2) 1px, transparent 1px);
}
html[data-theme="dark"] .scene__light { opacity: 0.08; }
html[data-theme="dark"] .scene__glow--a { opacity: 0.42; }
html[data-theme="dark"] .scene__glow--b { opacity: 0.26; }
html[data-theme="dark"] .scene__grain { opacity: 0.12; }

/* The house plan is drawn in light. */
html[data-theme="dark"] .plan path,
html[data-theme="dark"] .plan circle { stroke: rgba(212, 240, 60, 0.92); }
html[data-theme="dark"] .plan .g-fit path,
html[data-theme="dark"] .plan .g-fit circle { stroke: rgba(212, 240, 60, 0.55); }
html[data-theme="dark"] .plan .g-grid path, html[data-theme="dark"] .plan .g-grid circle,
html[data-theme="dark"] .plan .g-dim path, html[data-theme="dark"] .plan .g-dim circle,
html[data-theme="dark"] .plan .g-block path { stroke: rgba(242, 243, 238, 0.42); }
html[data-theme="dark"] .plan text { fill: #f2f3ee; }
html[data-theme="dark"] .plan-room { fill: rgba(242, 243, 238, 0.5); }
html[data-theme="dark"] .plan-dim, html[data-theme="dark"] .plan-note { fill: rgba(242, 243, 238, 0.62); }
html[data-theme="dark"] .scene.is-intro .plan { opacity: 0.85; }
html[data-theme="dark"] .scene.is-drawn .plan { opacity: 0.16; }

/* ---------------------------------------------------------------- glass */

html[data-theme="dark"] .glass {
  background: linear-gradient(150deg, rgba(36, 38, 33, 0.62), rgba(12, 13, 11, 0.5));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--cast-lg);
}
html[data-theme="dark"] .iris::before { opacity: 0.5; }


/* ---------------------------------------------------------------- kit */

/* The primary action is lit: lime with dark type. */
html[data-theme="dark"] .btn--ink {
  background: var(--lime); color: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--neon);
}
html[data-theme="dark"] .btn--ink .i { color: var(--night); }
html[data-theme="dark"] .btn--ink:hover:not(:disabled) { background: #e0f75a; }
html[data-theme="dark"] .btn--gel { color: var(--night); }
html[data-theme="dark"] .btn--gel { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -6px 12px rgba(150, 176, 10, 0.35), 0 8px 26px -8px rgba(212, 240, 60, 0.6); }
html[data-theme="dark"] .btn--glass {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--cast-md);
}
html[data-theme="dark"] .btn--glass:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }

html[data-theme="dark"] .icon-btn {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--cast-md);
}
html[data-theme="dark"] .icon-btn--ink { background: var(--lime); color: var(--night); box-shadow: var(--neon); }
html[data-theme="dark"] .icon-btn .badge { color: var(--night); box-shadow: 0 0 0 2px #0e0f0c, 0 0 12px rgba(212, 240, 60, 0.6); }

html[data-theme="dark"] .lens {
  color: var(--ink);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28) 0 8%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, 0.35), inset 3px 4px 8px rgba(255, 255, 255, 0.06), var(--cast-sm);
}

html[data-theme="dark"] .search,
html[data-theme="dark"] .clock,
html[data-theme="dark"] .field__box,
html[data-theme="dark"] .check-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--cast-sm);
}
html[data-theme="dark"] .search:focus-within,
html[data-theme="dark"] .field__box:focus-within { box-shadow: var(--rim), inset 0 0 0 1.5px var(--lime), 0 0 0 5px rgba(212, 240, 60, 0.18); }
html[data-theme="dark"] .field__box.is-wrong { box-shadow: var(--rim), inset 0 0 0 1.5px var(--bad); }
html[data-theme="dark"] .field__box input::placeholder,
html[data-theme="dark"] .search input::placeholder { color: #7d7f76; }

html[data-theme="dark"] .switch {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .switch::after { background: radial-gradient(circle at 35% 30%, #f4f5f0 0 40%, #c9cbc3 100%); }
html[data-theme="dark"] .switch[aria-checked="true"] { background: linear-gradient(180deg, #e3f77a, #cbe834); box-shadow: inset 0 1px 2px rgba(120, 140, 0, 0.4), 0 0 14px -2px rgba(212, 240, 60, 0.55); }

html[data-theme="dark"] .check-chip__box { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
html[data-theme="dark"] .check-chip[aria-pressed="true"] .check-chip__box { background: var(--lime); color: var(--night); }

html[data-theme="dark"] .tabs {
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .tabs__thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--cast-sm);
}
html[data-theme="dark"] .tabs__thumb::after { background: var(--lime); box-shadow: 0 0 8px rgba(212, 240, 60, 0.8); }

html[data-theme="dark"] .chip { background: rgba(255, 255, 255, 0.07); color: var(--graphite); }
html[data-theme="dark"] .chip--good { background: rgba(134, 220, 148, 0.12); color: var(--good); }
html[data-theme="dark"] .chip--warning { background: rgba(243, 197, 90, 0.12); color: var(--warn); }
html[data-theme="dark"] .chip--critical { background: rgba(255, 138, 128, 0.13); color: var(--bad); }
html[data-theme="dark"] .chip--tbd { color: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); background: transparent; }
html[data-theme="dark"] .chip--proposed { background: var(--lime); color: var(--night); }
html[data-theme="dark"] .chip--sample { background: rgba(255, 255, 255, 0.06); color: var(--graphite); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .chip--view { background: rgba(255, 255, 255, 0.07); color: var(--ink); }

html[data-theme="dark"] .avatar {
  color: var(--ink);
  background: linear-gradient(160deg, #3a3c36, #22241f);
  box-shadow: 0 0 0 2px #121310, 2px 3px 6px -3px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .avatar--lime { color: var(--night); background: linear-gradient(160deg, #eefaa6, #d4f03c); }
html[data-theme="dark"] .avatar--ink { color: var(--lime); background: linear-gradient(160deg, #1d1f1a, #070806); box-shadow: 0 0 0 2px #121310, inset 0 0 0 1px rgba(212, 240, 60, 0.3); }
html[data-theme="dark"] .avatar--more { background: #070806; color: var(--lime); }
html[data-theme="dark"] .on-ink .avatar { box-shadow: 0 0 0 2px #070806; }

html[data-theme="dark"] .mark svg { fill: var(--night); }
html[data-theme="dark"] .mark { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -4px 8px rgba(150, 176, 10, 0.35), 0 0 22px -4px rgba(212, 240, 60, 0.6); }

/* ---------------------------------------------------------------- sign-in */

html[data-theme="dark"] .signin__word { color: #f2f3ee; text-shadow: 0 0 60px rgba(212, 240, 60, 0.12); }
html[data-theme="dark"] .signin__error { color: var(--bad); background: rgba(255, 138, 128, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 138, 128, 0.22); }
html[data-theme="dark"] .signin__error::before { background: var(--bad); color: var(--night); }

/* ---------------------------------------------------------------- app */

html[data-theme="dark"] .hero-title { color: #f2f3ee; text-shadow: 0 0 60px rgba(212, 240, 60, 0.1); }

html[data-theme="dark"] .side {
  background: linear-gradient(180deg, rgba(30, 32, 28, 0.9), rgba(16, 17, 14, 0.82));
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--cast-md);
}
html[data-theme="dark"] .nav a:hover { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .nav a[aria-current="page"] { background: var(--lime); color: var(--night); box-shadow: var(--neon); }
html[data-theme="dark"] .nav a[aria-current="page"] .i { color: var(--night); }
html[data-theme="dark"] .nav a[aria-current="page"] .nav__tag { color: var(--night); }
html[data-theme="dark"] .me { background: rgba(255, 255, 255, 0.04); }

/* Tiles: smoked glass on the frame's frosted glass. */
html[data-theme="dark"] .tile {
  background: linear-gradient(160deg, rgba(40, 42, 37, 0.74), rgba(19, 20, 17, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.045), var(--cast-md);
}
html[data-theme="dark"] .tile--clear {
  background: linear-gradient(160deg, rgba(40, 42, 37, 0.45), rgba(19, 20, 17, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--cast-md);
}
/* The dark cards go blacker still, edged in lime. */
html[data-theme="dark"] .tile--ink {
  background: radial-gradient(130% 90% at 15% 0%, #1c1e19 0%, #0a0b09 50%, #040503 100%);
  box-shadow: inset 0 1px 0 rgba(212, 240, 60, 0.18), inset 0 0 0 1px rgba(212, 240, 60, 0.12), var(--cast-lg);
  --mark-surface: #080907;
}
/* Lime cards stay lime, so everything on them is dark. (Restated here because
   the dark .tile rule above outranks .tile--gel in styles.css.) */
html[data-theme="dark"] .tile--gel {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(140deg, #f5fbd6 0%, #e8f79a 28%, #d4f03c 55%, #c9ea2c 82%, #bfe31f 100%);
}
html[data-theme="dark"] .tile--gel { color: var(--night); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -10px 30px rgba(150, 176, 10, 0.18), 0 0 40px -12px rgba(212, 240, 60, 0.45), var(--cast-md); }
html[data-theme="dark"] .tile--gel .tile__title { color: var(--night); }
html[data-theme="dark"] .tile--gel .tile__sub { color: #3c3e37; }
html[data-theme="dark"] .tile--gel .btn--glass { color: var(--night); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.8)); }
html[data-theme="dark"] .tile--gel .ring__track { stroke: rgba(17, 18, 16, 0.14); }
html[data-theme="dark"] .tile--gel .ring__fill { stroke: var(--night); }
html[data-theme="dark"] .tile--gel .ring__value span { color: #3c3e37; }
html[data-theme="dark"] .tile--gel .steps .dotmark { box-shadow: inset 0 0 0 2px var(--night); }
html[data-theme="dark"] .tile--gel .steps .dotmark--done { background: var(--night); }
html[data-theme="dark"] .tile--gel .steps .dotmark--now { background: #fff; }

html[data-theme="dark"] .mini-btn { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .mini-btn:hover { background: rgba(255, 255, 255, 0.11); }

/* Dock */
html[data-theme="dark"] .dock__track a[aria-current="true"] { color: var(--night); }
html[data-theme="dark"] .dock__thumb { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -5px 10px rgba(150, 176, 10, 0.3), 0 0 22px -4px rgba(212, 240, 60, 0.7); }
html[data-theme="dark"] .dock__scene { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .dock__scene .lens[aria-pressed="true"] { background: var(--lime); color: var(--night); }

/* ---------------------------------------------------------------- widgets */

html[data-theme="dark"] .tree__svg path { stroke: rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] .tree__dot { box-shadow: 0 0 0 2px #121310, 0 0 12px rgba(212, 240, 60, 0.9); background: var(--lime); }
html[data-theme="dark"] .node {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 8px 14px 26px -14px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] .node__icon { background: rgba(255, 255, 255, 0.07); }
html[data-theme="dark"] .node--admin { background: linear-gradient(180deg, #eefaa6, #d4f03c 60%, #c6e42e); color: var(--night); box-shadow: var(--neon); }
html[data-theme="dark"] .node--admin .node__meta { color: #3c3e37; }
html[data-theme="dark"] .node--admin .node__icon { background: var(--night); color: var(--lime); box-shadow: none; }

html[data-theme="dark"] .meter { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .meter > i { background: var(--lime); box-shadow: 0 0 10px rgba(212, 240, 60, 0.45); }
html[data-theme="dark"] .meter--lime > i { background: var(--lime); }

html[data-theme="dark"] .stat-strip > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .sev--critical { background: rgba(255, 138, 128, 0.14); }
html[data-theme="dark"] .sev--warning { background: rgba(243, 197, 90, 0.14); }
html[data-theme="dark"] .sev--good { background: rgba(134, 220, 148, 0.14); }

html[data-theme="dark"] .service,
html[data-theme="dark"] .plist li,
html[data-theme="dark"] .files li,
html[data-theme="dark"] .client-list li,
html[data-theme="dark"] .queue li { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .service__mono { color: var(--ink); background: linear-gradient(160deg, #34362f, #1c1e19); box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--cast-sm); }
html[data-theme="dark"] .services--grid .service,
html[data-theme="dark"] .client-card {
  background: linear-gradient(160deg, rgba(40, 42, 37, 0.74), rgba(19, 20, 17, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--cast-md);
}

html[data-theme="dark"] .gantt__bar { background: #2c2e28; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 6px 10px 18px -10px rgba(0, 0, 0, 0.8); }
html[data-theme="dark"] .gantt__bar .avatars .avatar { box-shadow: 0 0 0 2px #2c2e28; }
html[data-theme="dark"] .gantt__bar--hot { background: linear-gradient(180deg, #eefaa6, #d4f03c 55%, #c6e42e); color: var(--night); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 20px -4px rgba(212, 240, 60, 0.7); }
html[data-theme="dark"] .gantt__bar--hot .avatars .avatar { box-shadow: 0 0 0 2px #d4f03c; }
html[data-theme="dark"] .gantt__now { border-left-color: rgba(242, 243, 238, 0.7); }
html[data-theme="dark"] .gantt__now::before { box-shadow: 0 0 0 2px #121310, 0 0 12px rgba(212, 240, 60, 0.9); }

html[data-theme="dark"] .ring__track { stroke: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .ring__fill { stroke: var(--lime); }
html[data-theme="dark"] .chart .dot { filter: drop-shadow(0 0 4px rgba(212, 240, 60, 0.7)); }

html[data-theme="dark"] .people td { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .people tr.is-self td { background: rgba(212, 240, 60, 0.1); }
html[data-theme="dark"] .who .file-ic,
html[data-theme="dark"] .files .file-ic,
html[data-theme="dark"] .toast__ic,
html[data-theme="dark"] .recent .tick { background: rgba(212, 240, 60, 0.12); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(212, 240, 60, 0.3); }

html[data-theme="dark"] .timeline li::before { background: #161714; box-shadow: 0 0 0 2px var(--graphite); }
html[data-theme="dark"] .timeline li:first-child::before { background: var(--lime); box-shadow: 0 0 0 2px var(--lime), 0 0 12px rgba(212, 240, 60, 0.8); }

html[data-theme="dark"] .notice { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
html[data-theme="dark"] .notice--proposed { background: rgba(212, 240, 60, 0.08); box-shadow: inset 0 0 0 1px rgba(212, 240, 60, 0.28); }
html[data-theme="dark"] .notice--proposed .i { color: var(--lime); }

/* Tooltips flip to light, so they stand out from every dark surface. */
html[data-theme="dark"] .tip { background: rgba(242, 243, 238, 0.97); color: var(--night); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8); }
html[data-theme="dark"] .tip span { color: #55574f; }
html[data-theme="dark"] .tip span::before { background: #9bb418; }

html[data-theme="dark"] dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .sheet__card { background: linear-gradient(150deg, rgba(34, 36, 31, 0.96), rgba(16, 17, 14, 0.94)); }