/* Additive staff-only theme. Light mode keeps the existing Kwik interface. */
.kwik-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
    border: 1px solid #71717a; border-radius: 8px; background: transparent;
    color: inherit; cursor: pointer; vertical-align: middle;
}
.kwik-theme-toggle:hover { color: #f5c542; border-color: #f5c542; }
.kwik-theme-toggle:focus-visible { outline: 2px solid #f5c542; outline-offset: 3px; }
.kwik-theme-toggle svg { pointer-events: none; flex-shrink: 0; }
.kwik-theme-sun { display: none; }
[data-kwik-theme="dark"] .kwik-theme-sun { display: block; }
[data-kwik-theme="dark"] .kwik-theme-moon { display: none; }
.kwik-theme-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
body > nav .kwik-theme-toggle, #acctTopNav .kwik-theme-toggle { color: #e8e8ea; }
.kwik-theme-floating { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 16px; z-index: 50; background: #fffdf7; color: #27272a; }
.kwik-login-theme { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 16px; z-index: 50; color: #27272a; }
.kwik-classic-theme { margin-left: auto; order: 2; }
html[data-kwik-theme="dark"] {
    --kwik-canvas: #18181b; --kwik-surface: #27272a; --kwik-subtle: #303033;
    --kwik-border: #454549; --kwik-text: #f4f4f5; --kwik-muted: #b5b5bd;
    color-scheme: dark; background-color: var(--kwik-canvas) !important;
}
html[data-kwik-theme="dark"] body {
    background-color: var(--kwik-canvas) !important; color: var(--kwik-text);
}
html[data-kwik-theme="dark"] .kwik-login-theme { color: var(--kwik-text); }
html[data-kwik-theme="dark"] :is(.success, .ok, .ready, .draft-rail nav button.done) { color: #a7f3d0 !important; }
html[data-kwik-theme="dark"] .draft-kwik-badge.ready { background-color: #23412f !important; }
html[data-kwik-theme="dark"] .draft-kwik-badge.warn { background-color: #483e22 !important; }
html[data-kwik-theme="dark"] :is(.draft-kwik-badge.warn, .draft-kicker, .draft-eyebrow, .draft-scan-result strong) { color: #fcd34d !important; }
html[data-kwik-theme="dark"] :is(.draft-alert-error, .draft-upload-result.error, .kauth-alert, .draft-inline-status.error, .draft-kwik-message.error) { color: #fca5a5 !important; background-color: #422629 !important; }
html[data-kwik-theme="dark"] .step-number { color: #1a1a1a; }
/* Semantic HTML defaults cover native controls and otherwise unstyled pages. */
html[data-kwik-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, option) {
    background-color: var(--kwik-surface) !important; color: var(--kwik-text) !important;
    border-color: var(--kwik-border) !important;
}
html[data-kwik-theme="dark"] :is(input, textarea)::placeholder { color: #a1a1aa !important; opacity: 1; }
html[data-kwik-theme="dark"] :is(input, textarea, select):focus-visible { outline-color: #f5c542; }
html[data-kwik-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: #f5c542; }
html[data-kwik-theme="dark"] :is(dialog, .kwik-theme-floating) { background: var(--kwik-surface); color: var(--kwik-text); }
html[data-kwik-theme="dark"] :is(thead, .gcp-freeze-first thead th:first-child, #fbResTable.fb-sticky-on thead .fb-stick-1, #fbResTable.fb-sticky-on thead .fb-stick-2) { background-color: var(--kwik-subtle) !important; }
html[data-kwik-theme="dark"] :is(.gcp-freeze-first td:first-child, #fbResTable.fb-sticky-on td.fb-stick-1, #fbResTable.fb-sticky-on td.fb-stick-2) { background-color: var(--kwik-surface) !important; }
html[data-kwik-theme="dark"] :is(.gcp-freeze-first tbody tr:hover td:first-child, #fbResTable.fb-sticky-on tr:hover td.fb-stick-1, #fbResTable.fb-sticky-on tr:hover td.fb-stick-2) { background-color: var(--kwik-subtle) !important; }
html[data-kwik-theme="dark"] :is(.mobile-card td, .script-library-table td)[data-label]::before { color: var(--kwik-muted); }
html[data-kwik-theme="dark"] .scripts-workspace { background: var(--kwik-canvas) !important; }
/* Keep solid brand/status actions readable; do not globally recolour text-white. */
html[data-kwik-theme="dark"] :is(.bg-kwik-yellow, .bg-kwik-yellow-dark, .bg-yellow-300, .bg-yellow-400, .bg-yellow-500, .nv-nav-item.nv-active, #impersonationBanner),
html[data-kwik-theme="dark"] :is(.bg-kwik-yellow, .bg-kwik-yellow-dark, .bg-yellow-300, .bg-yellow-400, .bg-yellow-500, .nv-nav-item.nv-active, #impersonationBanner) :is(span, svg, strong, b, .text-kwik-dark) { color: #1a1a1a !important; }
html[data-kwik-theme="dark"] #impersonationBanner button { color: #f4f4f5 !important; }
html[data-kwik-theme="dark"] :is(.hover\:bg-kwik-yellow, .hover\:bg-yellow-400):hover { color: #1a1a1a !important; }
html[data-kwik-theme="dark"] .nv-nav-item.nv-active { background-color: #f5c542 !important; }
html[data-kwik-theme="dark"] :is(.acct-nav-item.active, .bg-kwik-dark, .bg-gray-800, .bg-gray-900, .bg-zinc-800, .bg-zinc-900, .bg-black) { color: #f4f4f5; }
html[data-kwik-theme="dark"] :is(.bg-kwik-dark, .bg-gray-800, .bg-gray-900, .bg-zinc-800, .bg-zinc-900, .bg-black) > :is(.text-kwik-dark, .text-gray-800, .text-gray-900) { color: #f4f4f5 !important; }
/* Actual inline colours in dynamic markup are handled without reading computed
   styles, replacing backgrounds at runtime, or touching images/canvas/video. */
html[data-kwik-theme="dark"] [style*="background:white" i],
html[data-kwik-theme="dark"] [style*="background: white" i],
html[data-kwik-theme="dark"] [style*="background:#fff;" i],
html[data-kwik-theme="dark"] [style*="background: #fff;" i],
html[data-kwik-theme="dark"] [style*="background:#ffffff" i],
html[data-kwik-theme="dark"] [style*="background: #ffffff" i] { background-color: var(--kwik-surface) !important; }
html[data-kwik-theme="dark"] [style*="color:#1a1a1a" i],
html[data-kwik-theme="dark"] [style*="color: #1a1a1a" i],
html[data-kwik-theme="dark"] [style*="color:#374151" i],
html[data-kwik-theme="dark"] [style*="color: #374151" i] { color: var(--kwik-text) !important; }
html[data-kwik-theme="dark"] #repInstallCard { background: #3c341e !important; }
/* Customer/brand images remain unchanged on their intentionally light tiles. */
html[data-kwik-theme="dark"] :is(#nvBrandLogo, img.object-contain.bg-white) { background-color: #fffdf7 !important; }
@media (max-width: 767px) {
    .kwik-theme-toggle { width: 44px; height: 44px; }
    body > nav:has(.kwik-theme-actions) { flex-wrap: wrap; gap: 12px; }
    body.view-new #newViewTopBar { padding-left: 12px; padding-right: 12px; }
    #newViewTopBar > .min-w-0 { flex: 1; min-width: 44px; overflow: hidden; gap: 6px; }
    #newViewTopBar .nv-top-right-items { flex-shrink: 0; }
    /* Navigation keeps its own touch target, even after async header actions
       and presence avatars arrive. Scope to the shared project header so every
       tab benefits without changing desktop or the account navigation. */
    #nvMenuButton { width: 44px; height: 44px; padding: 10px; flex: 0 0 44px; }
    #newViewTopBar .nv-top-divider { display: none; }
    #newViewTopBar #nvPresenceBar { max-width: 64px; overflow: hidden; flex-shrink: 1; }
    #newViewTopBar #nvPresenceBar > * { flex-shrink: 0; }
    #newViewTopBar .kcf-navbtn,
    #newViewTopBar #repPushBtn { width: 44px; height: 44px; flex-shrink: 0; }
    #newViewTopBar .kcf-navbtn > span { display: none; }
}
@media (max-width: 479px) {
    #newViewTopBar #nvBrandLogo { display: none; }
    #acctTopNav > .sm\:hidden { justify-content: flex-start; padding-left: 12px; }
    #acctTopNav > .sm\:hidden img { max-width: 72px; height: auto; }
}
@media (max-width: 380px) {
    #newViewTopBar .nv-top-divider { display: none; }
}