/* SRTTS dark mode (black background, white text). Loaded after redesign.css.
   Active when <html data-theme="dark">.
   NO colours are written here. Every colour comes from the tokens in mono.css,
   so changing the palette in one place changes both modes. */

/* ---------- Toggle button (text only, works in both modes) ---------- */
.tb-right{display:flex;align-items:center;gap:16px}
.theme-toggle{min-height:44px;padding:0 18px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text-strong);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle:focus-visible{outline:3px solid var(--text-strong);outline-offset:2px}

/* ---------- Page ---------- */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body,
html[data-theme="dark"] body.page-app{background:var(--app-bg);color:var(--text)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4{color:var(--text-strong)}

/* Sidebar and topbar */
html[data-theme="dark"] .app-sidebar{background:var(--sidebar-bg)}
html[data-theme="dark"] .sidebar-brand{border-bottom-color:var(--border)}
html[data-theme="dark"] .sidebar-nav li a{color:var(--text)}
html[data-theme="dark"] .sidebar-nav li a:hover{background:var(--brand-10);color:var(--text-strong)}
html[data-theme="dark"] .sidebar-nav li.active a{background:var(--brand-solid);color:var(--on-brand);box-shadow:none}
html[data-theme="dark"] .sidebar-foot,html[data-theme="dark"] .sidebar-foot strong{color:var(--text-muted)}
html[data-theme="dark"] .app-topbar{background:var(--app-bg);border-bottom-color:var(--border)}
html[data-theme="dark"] .tb-search input{background:var(--surface-2);color:var(--text)}
html[data-theme="dark"] .tb-search input::placeholder{color:var(--text-muted)}
html[data-theme="dark"] .tb-search input:focus{background:var(--input-bg)}
html[data-theme="dark"] .avatar{background:var(--brand-solid);color:var(--on-brand);border-color:var(--app-bg)}
html[data-theme="dark"] .app-footer{border-top-color:var(--border)}

/* Surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .chart-box,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .bar-card,
html[data-theme="dark"] .req,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .faq details,
html[data-theme="dark"] .dsh-tile,
html[data-theme="dark"] .dsh-table-wrap{background:var(--surface);border-color:var(--border);box-shadow:none}
html[data-theme="dark"] .empty{border-color:var(--border-strong)}
html[data-theme="dark"] .card-header{border-bottom-color:var(--border)}
html[data-theme="dark"] .card-footer{background:var(--surface-2);border-top-color:var(--border)}
html[data-theme="dark"] .stat-card{background:var(--surface)}
html[data-theme="dark"] .welcome,
html[data-theme="dark"] .dsh-welcome,
html[data-theme="dark"] .hero{background:var(--surface-2)}
html[data-theme="dark"] .hero::after,html[data-theme="dark"] .welcome::after{opacity:.35}
html[data-theme="dark"] .welcome p,
html[data-theme="dark"] .dsh-welcome p,
html[data-theme="dark"] .hero p{color:var(--text-subtle)}
html[data-theme="dark"] .req:hover,
html[data-theme="dark"] .faq details[open]{border-color:var(--text-strong)}
html[data-theme="dark"] .stack{background:var(--surface-2)}
html[data-theme="dark"] .track li::before{background:var(--border-strong)}
html[data-theme="dark"] .legend em{color:var(--text-muted)}

/* Tables */
html[data-theme="dark"] .data-table th{color:var(--text-subtle);border-bottom-color:var(--border)}
html[data-theme="dark"] .data-table td{color:var(--text);border-bottom-color:var(--border)}
html[data-theme="dark"] .data-table tr:nth-child(even) td{background:transparent}
html[data-theme="dark"] .data-table tbody tr:hover,
html[data-theme="dark"] .data-table tr:hover td{background:var(--surface-2)}
html[data-theme="dark"] .dsh-table td{color:var(--text);border-top-color:var(--border)}
html[data-theme="dark"] .dsh-table tr{border-top-color:var(--border)}
html[data-theme="dark"] .dsh-table td a{color:var(--text-strong)}
html[data-theme="dark"] .dsh-table td strong{color:var(--text-strong)}
html[data-theme="dark"] .dsh-tile{color:var(--text-strong)}

/* Forms */
html[data-theme="dark"] .form-label{color:var(--text-subtle)}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="file"]{background:var(--input-bg);border-color:var(--input-border);color:var(--text-strong)}
html[data-theme="dark"] .form-control::placeholder{color:var(--text-muted)}
html[data-theme="dark"] .form-control:focus{border-color:var(--text-strong);box-shadow:0 0 0 3px var(--brand-ring)}
html[data-theme="dark"] .form-control option{background:var(--input-bg);color:var(--text-strong)}
html[data-theme="dark"] .form-help{color:var(--text-muted)}
html[data-theme="dark"] .required-mark{color:var(--danger-text)}

/* Buttons and links */
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-soft{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-soft:hover{background:var(--brand-100)}
html[data-theme="dark"] .btn-secondary{background:var(--brand-100);color:var(--text-strong)}
html[data-theme="dark"] .btn-secondary:hover{background:var(--surface-2)}
html[data-theme="dark"] .btn-primary{background:var(--brand-solid);color:var(--on-brand);box-shadow:none}
html[data-theme="dark"] .btn-primary:hover{background:var(--brand-600)}
html[data-theme="dark"] .link-sm,
html[data-theme="dark"] .link-btn{color:var(--text-strong)}
html[data-theme="dark"] .qa{background:var(--brand-100);color:var(--text-strong)}
html[data-theme="dark"] .qa.primary{background:var(--brand-solid);color:var(--on-brand)}

/* Alerts (status colours stay, so success / warning / error are still easy to tell apart) */
html[data-theme="dark"] .alert{border-color:var(--border)}
html[data-theme="dark"] .alert-success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}
html[data-theme="dark"] .alert-danger,html[data-theme="dark"] .alert-error{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border)}
html[data-theme="dark"] .alert-warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}
html[data-theme="dark"] .alert-info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border)}

/* Scrollbars and mobile menu */
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--border-strong)}
html[data-theme="dark"] .sidebar-mobile-toggle{background:var(--brand-solid);color:var(--on-brand)}

/* Charts and feeds */
html[data-theme="dark"] .ln-area{opacity:.18}
html[data-theme="dark"] .ln-line,html[data-theme="dark"] .ln-dot{stroke:var(--text-strong)}
html[data-theme="dark"] .ln-area,html[data-theme="dark"] .rank-fill{fill:var(--text-strong);background:var(--text-strong)}
html[data-theme="dark"] .ln-val{fill:var(--text-strong)}
html[data-theme="dark"] .feed li{border-bottom-color:var(--border)}
html[data-theme="dark"] .feed li span{color:var(--text-muted)}
html[data-theme="dark"] .stat-card:hover{box-shadow:none;border-color:var(--border-strong)}
html[data-theme="dark"] .attn li{border-top-color:var(--border)}
html[data-theme="dark"] .attn a:hover strong{text-decoration:underline}

/* Account menu */
html[data-theme="dark"] .acct-btn{background:var(--surface);border-color:var(--border-strong);color:var(--text-strong)}
html[data-theme="dark"] .acct-btn:hover{background:var(--surface-2)}
html[data-theme="dark"] .acct-btn.is-open{border-color:var(--text-strong)}
html[data-theme="dark"] .acct-chev{color:var(--text-subtle)}
html[data-theme="dark"] .acct-menu{background:var(--surface);border-color:var(--border-strong);box-shadow:0 16px 40px rgba(0,0,0,.6)}
html[data-theme="dark"] .acct-menu a,html[data-theme="dark"] .acct-menu button{color:var(--text-strong)}
html[data-theme="dark"] .acct-menu a:hover,html[data-theme="dark"] .acct-menu button:hover{background:var(--surface-2)}
html[data-theme="dark"] .acct-menu .acct-logout{color:var(--danger-text)}
html[data-theme="dark"] .acct-track{background:var(--border-strong)}
html[data-theme="dark"] #themeToggle[aria-checked="true"] .acct-track{background:var(--text-strong)}