/* Dark theme for the hand-written styles (THEME_PLAN 3). Tailwind classes
   follow the theme by themselves (theme-palette.css); this file covers what
   isn't a Tailwind class: public/css/app.css and the few colours written
   into partials/head. Everything here is under
   html.dark, so the light theme is untouched. */

/* ---- The Tailwind pages' surfaces (Bootstrap is gone, CORE_TAILWIND4_PLAN P7.7) ---- */
html.dark .theme-static .bg-white { background-color: #fff !important; background-image: none !important; }

/* ---- app.css: base tokens and the member shell ---- */
html.dark {
    --surface-color: #1e2a45;
    --background-color: #141d33;
    --border-color: #2b3a5a;
    --text-muted: #94a3b8;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --fill-soft: #2b3a5a;
    --fill-faint: #25334f;
    --line-soft: #2b3a5a;
    --line-faint: rgba(148, 163, 184, 0.16);
}
html.dark body { color: #e2e8f0; }
html.dark .app-shell {
    background-color: #141d33;
    background-image:
        radial-gradient(46rem 46rem at 100% -12%, rgba(37, 99, 235, 0.14), transparent 58%),
        radial-gradient(40rem 40rem at -10% 2%, rgba(129, 140, 248, 0.10), transparent 55%),
        linear-gradient(180deg, #18223a 0%, #141d33 60%, #141d33 100%);
}
html.dark .modern-scope .bg-white { background-image: linear-gradient(180deg, #23304d 0%, #1e2a45 100%); }
html.dark .modern-scope .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -16px rgba(0, 0, 0, 0.6) !important; }
html.dark .modern-scope .hover\:shadow-md:hover,
html.dark .modern-scope .hover\:shadow-lg:hover { box-shadow: 0 14px 28px -12px rgba(37, 99, 235, 0.3), 0 26px 55px -24px rgba(0, 0, 0, 0.7) !important; }
html.dark .modern-scope .border-slate-200 { border-color: #2b3a5a !important; }
html.dark .modern-scope .border-slate-100 { border-color: #25334f !important; }
html.dark .app-topbar { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -22px rgba(0, 0, 0, 0.8); }

/* The sidebar. */
html.dark .app-sidebar .sidebar-item { color: #cbd5e1; }
html.dark .app-sidebar .sidebar-item:hover { background-color: #2b3a5a; }
html.dark .app-sidebar .sidebar-section > .sidebar-items { border-left-color: #2b3a5a; }
html.dark .app-sidebar .sidebar-toggle:hover { background: #2b3a5a; }
html.dark .app-sidebar .sidebar-finder .sidebar-finder-input,
html.dark .app-sidebar .sidebar-finder .sidebar-finder-input:focus { background: #18223a; }
html.dark .app-sidebar .sidebar-tour-link { border-top-color: #2b3a5a; color: #94a3b8; }
html.dark .app-sidebar .sidebar-tour-link:hover { color: #e2e8f0; }

/* ---- app.css: the admin panel ---- */
html.dark .admin-scope {
    --admin-border: #2b3a5a;
    --admin-muted: #94a3b8;
    --admin-ink: #f1f5f9;
    --admin-brand: #60a5fa;
    --admin-brand-soft: rgba(59, 130, 246, 0.14);
    --admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -18px rgba(0, 0, 0, 0.6);
}
html.dark .admin-scope .app-sidebar .sidebar-item { color: #cbd5e1; }
html.dark .admin-scope .app-sidebar .sidebar-item:hover { background: #2b3a5a; }
html.dark .admin-scope .app-sidebar .sidebar-item.active { color: #93c5fd; }
html.dark .admin-scope .app-sidebar .sidebar-item i { color: #64748b; }
html.dark .admin-count { color: #cbd5e1; background: #2b3a5a; }
html.dark .admin-chip { background: #1e2a45; color: #cbd5e1; }
html.dark .admin-chip:hover { background: #2b3a5a; }
html.dark .admin-chip.active, html.dark .admin-chip[aria-pressed="true"] { border-color: rgba(59, 130, 246, 0.45); color: #93c5fd; }
html.dark .admin-chip-count { background: rgba(148, 163, 184, 0.14); }
html.dark .admin-stat { background: #1e2a45; }
html.dark .tone-primary { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
html.dark .tone-success { background: rgba(16, 185, 129, 0.16); color: #34d399; }
html.dark .tone-info    { background: rgba(6, 182, 212, 0.16); color: #22d3ee; }
html.dark .tone-warning { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
html.dark .tone-danger  { background: rgba(239, 68, 68, 0.16); color: #f87171; }
html.dark .tone-neutral { background: #2b3a5a; color: #cbd5e1; }
html.dark .tone-violet  { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }
html.dark .admin-attention { border-bottom-color: #2b3a5a; }
html.dark .admin-attention:hover { background: #25334f; }
html.dark .admin-action { background: #1e2a45; color: #cbd5e1; }
html.dark .admin-action:hover { border-color: rgba(59, 130, 246, 0.45); background: #25334f; color: #93c5fd; }
html.dark .admin-avatar.muted { background: #3b4c6e; }
html.dark .admin-request, html.dark .admin-setting { border-bottom-color: #2b3a5a; }
html.dark .admin-scope .empty-state .empty-title { color: #e2e8f0; }
html.dark .admin-savebar { background: #2b3a5a; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8); }
html.dark .link-tile { background: rgba(59, 130, 246, 0.14); }
html.dark .admin-code { background: #141d33; border: 1px solid #2b3a5a; }

/* Fields styled with Tailwind and no background class would show the
   browser's grey dark-mode field; give them the inset surface instead.
   Zero specificity, so any class (bg-…) still wins. */
html.dark :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
    background-color: #18223a;
    color: inherit;
}

/* ---- Pages' own colours ---- */
/* Messages: the chat wallpaper's ground (its line art is a faint blue on transparent). */
html.dark [data-chat-wallpaper] { background-color: #18223a !important; }
/* Topbar notification bell (partials.user-notifications). */
html.dark #userNotifications .nb-panel { border-color: #2b3a5a; }
html.dark #userNotifications .nb-head,
html.dark #userNotifications .nb-foot { border-color: #2b3a5a; }
html.dark #userNotifications .nb-title,
html.dark #userNotifications .is-unread .nb-item-title { color: #f1f5f9; }
html.dark #userNotifications .nb-item-title { color: #cbd5e1; }
html.dark #userNotifications .nb-text { color: #94a3b8; }
html.dark #userNotifications .nb-pill { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
html.dark #userNotifications .nb-link,
html.dark #userNotifications .nb-foot a { color: #a5b4fc; }
html.dark #userNotifications .nb-link:hover,
html.dark #userNotifications .nb-foot a:hover { color: #c7d2fe; }
html.dark #userNotifications .nb-empty-icon,
html.dark #userNotifications .nb-skel span { background: #2b3a5a; }
html.dark #userNotifications .nb-item:hover,
html.dark #userNotifications .nb-item:focus-visible,
html.dark #userNotifications .nb-foot a:hover { background: #25334f; }
html.dark #userNotifications .nb-item.is-unread { background: rgba(99, 102, 241, 0.08); }
html.dark #userNotifications .nb-item.is-unread:hover { background: rgba(99, 102, 241, 0.14); }
html.dark #userNotifications .nb-empty-title { color: #e2e8f0; }

/* Phone number picker search (partials.phone-input-assets). */
html.dark .iti__search-input { border-color: #2b3a5a; }
html.dark .iti__search-input:focus { background: #25334f; }
html.dark .iti__country-list { background: #1e2a45; border-color: #3b4c6e; }
html.dark .iti__country.iti__highlight, html.dark .iti__country:hover { background: #2b3a5a; }

/* Messages: in-chat search hits. */
html.dark mark.msg-hit { background: rgba(245, 158, 11, 0.35); color: #fef3c7; }
html.dark mark.msg-hit.msg-hit-current { background: #f59e0b; color: #1e2a45; }

/* Admin pages' own rows and panels. */
html.dark .api-endpoints { background: #1e2a45; }
html.dark .api-endpoint > summary:hover,
html.dark .api-endpoint[open] > summary,
html.dark .audit-row > summary:hover,
html.dark .audit-row[open] > summary,
html.dark .gov-tree .node-company > summary:hover,
html.dark .gov-tree .leaf:hover,
html.dark .admin-tree-row:hover { background: #25334f; }
html.dark .api-code { border: 1px solid #2b3a5a; background: #141d33; }
html.dark .gov-tree .node-company { border-bottom-color: #2b3a5a; }
html.dark .endpoint-code { background-color: #2b3a5a; color: #e2e8f0; }
html.dark .timestamp-cell .date-part { color: #f1f5f9; }
html.dark .timestamp-cell .time-part { color: #94a3b8; }
html.dark .secret-hint { color: #4ade80; }
/* System settings: sticky tab strip, phone country picker. */
html.dark .settings-tabs { background: #141d33; }
html.dark .country-item { border-color: #3b4c6e; background: #1e2a45; }
html.dark .country-item:hover { background: #25334f; }
html.dark .country-item.selected,
html.dark .selection-info { background: rgba(59, 130, 246, 0.14); }
html.dark .country-name { color: #e2e8f0; }
html.dark .country-code, html.dark .section-header { color: #94a3b8; }

/* Phone shell skeletons and offline strip (public/css/app.css). */
html.dark .skeleton { background-color: #2b3a5a; }
html.dark .skeleton::after { background-image: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.06) 50%, transparent 100%); }
html.dark [data-mobile-status] { background-color: #25334f; color: #cbd5e1; }
html.dark [data-mobile-status][data-tone='warn'] { background-color: #3b2f17; color: #fcd34d; }
html.dark [data-mobile-tabs] a[data-pending], html.dark [data-mobile-tabs] a[data-pending] i { color: #60a5fa !important; }
html.dark .access-row-changed { background-color: #1e3a5f; box-shadow: inset 3px 0 0 #60a5fa; }