/* Shared theme layer. Existing layouts keep their dimensions and interactions. */
.app-theme-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line,#dbe6df);border-radius:10px;background:var(--surface,#fff);flex:none}
.app-theme-switch button{border:0;border-radius:7px;padding:8px 10px;min-height:34px;background:transparent;color:var(--text,#18221d);font:600 12px/1.2 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}
.app-theme-switch button[aria-pressed=true]{background:var(--primary,#145c39);color:#fff}
.app-theme-switch button:focus-visible{outline:3px solid var(--accent,#25b96b);outline-offset:2px}
.app-theme-toolbar{position:absolute;top:14px;right:16px;z-index:10}
body:has(>.app-theme-toolbar){padding-top:70px}
.access-manager .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.access-manager .access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.access-manager .access-check{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line,#dbe6df);border-radius:10px;font-size:13px;cursor:pointer}
.access-manager input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--primary,#145c39)}
.access-manager .actions{display:flex;gap:10px;flex-wrap:wrap}
html[data-theme=dark],html[data-theme=dark] body.secretary-page{
 --primary:#e5e5e5;--primary-2:#ffffff;--accent:#d4d4d4;--bg:#090909;--surface:#141414;--surface-soft:#202020;--surface-green:#282828;
 --text:#f5f5f5;--ink:#f5f5f5;--muted:#bdbdbd;--ink-soft:#bdbdbd;--line:#383838;
 --green-dark:#e5e5e5;--green-dark-2:#ffffff;--green-main:#e5e5e5;--green-main-hover:#ffffff;--green-mid:#bdbdbd;
 --green-light:#282828;--green-light-2:#303030;--cream:#090909;--cream-2:#202020;--white:#141414;
 --yellow:#fff;--yellow-bg:#303030;--red:#fff;--red-bg:#262626;--green-ok:#fff;--green-ok-bg:#202020;
 --danger:#fff;--warning:#d4d4d4;--orange:#bdbdbd;--info:#e5e5e5;--lime:#d4d4d4;
 --shadow:0 12px 36px #0003;--shadow-soft:0 7px 22px #0002;
 --sd-bg:#090909;--sd-panel:#141414;--sd-text:#f5f5f5;--sd-muted:#bdbdbd;--sd-line:#383838;--sd-accent:#e5e5e5;--sd-track:#090909;--sd-glow:transparent;
 color-scheme:dark;
}
/* Apply at the document root: legacy inline colors, media, canvas, emoji, and
   future components are monochrome too, without reparenting fixed overlays. */
html[data-theme=dark]{filter:grayscale(1);background:var(--bg)}
html[data-theme=dark] body{background:var(--bg);color:var(--text)}
html[data-theme=dark] :is(.sidebar,.topbar,.panel,.stat-card,.stat,.modal,.modal-content,.modal-box,.calendar-modal-content,.profile-menu,.verify-card,.login-right,.security-shell .panel,.chat-card,.chat-list,.chat-head,.chat-bubble,.contact-panel,.contact-bubble,.contact-file,.contact-emoji-panel,.chat-compose-shell,.chat-emoji-panel,.ai-kpi,.ai-source,.notifications-panel,.employee-notifications-panel){background:var(--surface)!important;color:var(--text);border-color:var(--line)}
html[data-theme=dark] :is(.main,.content,.chat-messages,.contact-messages){background-color:var(--bg);color:var(--text)}
html[data-theme=dark] :is(input,select,textarea){background-color:var(--surface-soft);color:var(--text);border-color:var(--line);color-scheme:dark}
html[data-theme=dark] body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme=dark] .sidebar .nav-item:not(.active){color:var(--muted)}
html[data-theme=dark] :is(.profile-menu .nav-item,.statistics-tabs a,.statistics-card,.employee-notification-panel,.employee-reminder-popup,.notification-bell){background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme=dark] :is(.contact-launcher,.chat-send-button,.contact-panel>header,.contact-compose-actions>button:not(.contact-emoji-toggle),.contact-list>button){background:#262626;color:#fff;border-color:var(--line)}
html[data-theme=dark] :is(.user-role,.user-employment-status,.badge,.status-badge):not(.badge-success):not(.badge-danger):not(.badge-warning):not(.badge-info){background:var(--surface-soft);color:var(--text)}
html[data-theme=dark] :is(input,textarea)::placeholder{color:#a3a3a3;opacity:1}
html[data-theme=dark] :is(input[type=checkbox],input[type=radio]){accent-color:#d4d4d4}
html[data-theme=dark] :is(table,thead,th,td,fieldset){border-color:var(--line)}
html[data-theme=dark] :is(th,.chat-composer-modern,.chat-compose-shell,.contact-room-link,.contact-emoji-grid button,.emoji-picker-tabs,.emoji-search-wrap,.emoji-picker-scroll,.ai-message,.date-pill,.sidebar-close,.unit-user-supervisors,.access-check,.passkey-card){background:var(--surface-soft)!important;color:var(--text);border-color:var(--line)}
html[data-theme=dark] tbody tr:hover,html[data-theme=dark] .chat-list-item:hover{background:var(--surface-soft)}
html[data-theme=dark] :is(.chat-list-item.active,.chat-message.mine .chat-bubble,.mine .contact-bubble,.nav-item.active){background:var(--surface-green);color:var(--primary)}
html[data-theme=dark] :is(.contact-widget,.chat-emoji-panel,.contact-widget input,.contact-widget textarea,.contact-widget select){color:var(--text)}
html[data-theme=dark] :is(.contact-widget small,.contact-room-link small,.contact-message>small,.ai-kpi small,.label,.unit-user-help){color:var(--muted)}
html[data-theme=dark] :is(.contact-attach,.contact-file,.contact-widget [data-older],.contact-room-head button){color:var(--primary)}
html[data-theme=dark] :is(.btn-primary,.btn:not(.btn-outline):not(.alt):not(.danger):not(.btn-danger),.app-theme-switch button[aria-pressed=true]){background:var(--primary);color:#111111;border-color:var(--primary)}
html[data-theme=dark] :is(.btn-outline,.btn.alt){background:var(--surface);color:var(--primary);border-color:var(--line)}
html[data-theme=dark] :is(.alert-success,.verify-status.valid,.badge-success,.badge-green){background:var(--green-ok-bg);color:var(--green-ok);border-color:var(--line)}
html[data-theme=dark] :is(.alert-error,.verify-status.invalid,.badge-danger,.badge-red){background:var(--red-bg);color:var(--red);border-color:#737373}
html[data-theme=dark] :is(.alert-warning,.badge-warning,.badge-yellow){background:var(--yellow-bg);color:var(--yellow);border-color:#737373}
html[data-theme=dark] :is(.badge-info,.alert-info){background:#262626;color:#fff;border-color:#737373}
html[data-theme=dark] :is(.unit-report-card,.dinas-action-item,.statistics-card,.statistics-tabs a){background:var(--surface-soft);color:var(--text);border-color:var(--line)}
html[data-theme=dark] :is(.unit-report-category,.unit-report-counts,.statistics-note){color:var(--muted)}
html[data-theme=dark] .unit-report-percentage{color:var(--primary)}
html[data-theme=dark] .sidebar .nav-item:hover{background:var(--surface-soft);color:var(--primary)}
html[data-theme=dark] .login-body:before{background:linear-gradient(#090909db,#090909db),url('../images/WhatsApp Image 2026-09-07 at 08.23.30.jpeg') center/cover no-repeat}
html[data-theme=dark] .login-left,html[data-theme=dark] .login-left .brand{color:#fff}
html[data-theme=dark] .login-left :is(.brand-subtitle,.brand-title,.login-hero h1,.login-hero p){color:#fff}
html[data-theme=dark] [style*="background:#fff"],html[data-theme=dark] [style*="background: #fff"],html[data-theme=dark] [style*="background:white"],html[data-theme=dark] [style*="background: white"]{background-color:var(--surface)!important;color:var(--text)}
/* Neutral surfaces also cover module-local palettes and legacy components. */
html[data-theme=dark] .division-dashboard{--dd-bg:var(--bg);--dd-panel:var(--surface);--dd-text:var(--text);--dd-muted:var(--muted);--dd-border:var(--line);--dd-track:#303030;--dd-accent:var(--primary);--dd-glow:transparent}
html[data-theme=dark] :is(.dashboard-hero,.hero-banner,.dinas-hero,.page-hero,.welcome-banner){background:linear-gradient(120deg,#171717,#292929);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .secretary-page .main{background:var(--bg)}
html[data-theme=dark] body.secretary-page :is(.nav-item.active,.nav-item:hover,.date-pill,.mobile-menu-toggle,.sidebar-close,.notification-bell){background:var(--surface-soft);color:var(--text);border-color:var(--line)}
html[data-theme=dark] body.secretary-page :is(.btn:hover,.contact-room-link:hover,.contact-emoji-grid button:hover){background:#303030;color:var(--text)}
html[data-theme=dark] :is(.unit-report-card,.statistics-kpi,.kpi-card,.calendar-modal-card,.calendar-cell,.recipient-results,.recipient-chip,.planning-card,.document-card){background:var(--surface-soft)!important;color:var(--text);border-color:var(--line)}
html[data-theme=dark] .unit-report-card :is(h4,dt,dd){color:var(--text)}
html[data-theme=dark] :is(.unit-report-counts div,.calendar-event-card){border-color:var(--line)}
html[data-theme=dark] .unit-reports-warning{background:var(--yellow-bg);color:var(--yellow);border-color:#737373}
html[data-theme=dark] .unit-reports-dot.empty{background:#525252}
html[data-theme=dark] .unit-report-pie [fill="#e2e8e5"]{fill:#525252}
html[data-theme=dark] .calendar-cell.empty{background:transparent!important;border-color:transparent}
html[data-theme=dark] :is(.calendar-event-count,.calendar-modal-close){color:var(--text)}
html[data-theme=dark] .calendar-cell.has-event{border-color:#737373}
html[data-theme=dark] :is(.stat-ic,.profile-avatar,.user-avatar,.avatar){background:#303030;color:var(--text)}
html[data-theme=dark] .mobile-menu-toggle{background:var(--surface-soft);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .statistics-tabs a.active{background:var(--primary);color:#111;border-color:var(--primary)}
html[data-theme=dark] .employee-statistics{--stats-muted:var(--muted);--stats-blue:#e5e5e5}
html[data-theme=dark] .ai-kpi strong{color:var(--text)}
html[data-theme=dark] :is(.statistics-chart-tag,.statistics-status.belum_dinilai,.statistics-details-filters button,.employee-notification-foot){background:var(--surface-soft);color:var(--muted);border-color:var(--line)}
html[data-theme=dark] :is(.statistics-status.menunggu_tahap_1,.statistics-status.menunggu_akhir){background:#303030;color:#fff}
html[data-theme=dark] .statistics-bar-track{background:#303030}
html[data-theme=dark] .statistics-bar-track span{background:#141414e6;color:var(--text)}
html[data-theme=dark] .notification-bell-count{background:#fff;color:#000;border-color:var(--surface)}
html[data-theme=dark] :is(.nav-count,.chat-unread){background:#fff;color:#000}
html[data-theme=dark] .verify-card>p{color:var(--muted)!important}
html[data-theme=dark] :is(.multi-search-results,.multi-chip){background:var(--surface-soft);color:var(--text);border-color:var(--line)}
html[data-theme=dark] :is(.recipient-results>div:hover,.multi-search-item:hover){background:#303030;color:var(--text)}
html[data-theme=dark] .contact-feedback.error{color:var(--red)}
html[data-theme=dark] :is(.contact-compose-actions .contact-emoji-toggle,.contact-emoji-heading button){background:var(--surface-soft);color:var(--text);border-color:var(--line)}
html[data-theme=dark] .contact-widget :is(.contact-list button,[data-retry]){background:var(--surface-soft);color:var(--text);border-color:var(--line)}
/* Matching shades for each chart series and its legend, including inline SVG. */
html[data-theme=dark] .unit-reports-dot.submitted{background:#fff}
html[data-theme=dark] .unit-reports-dot.missing{background:#999}
html[data-theme=dark] .unit-report-pie [fill="#23734f"]{fill:#fff}
html[data-theme=dark] .unit-report-pie [fill="#edb452"]{fill:#999}
html[data-theme=dark] :is(.dinas-chart-bar,.dinas-chart-dot)[style*="#2f8456"]{background:#fff!important}
html[data-theme=dark] :is(.dinas-chart-bar,.dinas-chart-dot)[style*="#d39b10"]{background:#999!important}
html[data-theme=dark] :is(.dinas-chart-bar,.dinas-chart-dot)[style*="#4c78b8"]{background:#525252!important}
.form-back-row{display:flex;grid-column:1/-1;flex-basis:100%;margin:0 0 14px;align-items:center}
@media print{.form-back-row{display:none}}
@media(max-width:700px){.topbar,.top-actions{flex-wrap:wrap;gap:10px}.app-theme-switch button{padding:7px 9px}.app-theme-toolbar{top:12px;right:12px}.access-manager .panel-head{align-items:flex-start}}
@media print{.app-theme-switch,.app-theme-toolbar{display:none!important}html[data-theme=dark],html[data-theme=dark] body.secretary-page{--bg:#fff;--surface:#fff;--surface-soft:#fff;--text:#111;--ink:#111;--muted:#444;--ink-soft:#444;--line:#ccc;--primary:#145c39;--sd-bg:#fff;--sd-panel:#fff;--sd-text:#111;--sd-muted:#444;--sd-line:#ccc;color-scheme:light}html[data-theme=dark] body{background:#fff;color:#111}}