/* ===== Dark theme for the whole app =====
   <html> gets the class theme-dark when the user picks "Dark", or picks "Auto" while the
   computer / phone is in dark mode (static/js/theme-init.js). Most colours come from the
   variables in style.css, so changing the variables darkens almost everything; the rules
   below fix the places that use fixed light colours. Printing always uses the light colours. */
@media screen {
html.theme-dark {
  color-scheme: dark;
  --bg: #12141c; --card: #1b1e29; --text: #e3e6ef; --muted: #9aa1b5; --line: #2c3142;
  --brand-soft: #3b1623;
  --ok-bg: #11301f;   --ok: #4ade80;
  --warn-bg: #33260c; --warn: #fbbf24;
  --bad-bg: #3a1517;  --bad: #f87171;
  --info-bg: #142443; --info: #7aa7ff;
  --off-bg: #252a38;  --off: #b9bfd0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  /* work boards */
  --bx-surface: #1b1e29; --bx-list: #0e1016; --bx-btn: #262b3a; --bx-btn-hover: #313749; --bx-dialog: #20242f;
  --bx-text: #d5dae6; --bx-sub: #a6adc0; --bx-muted: #8b93a8; --bx-link: #7aa7ff; --bx-input: #12141c;
  --in-field: #12141c; --in-border: #3a4055; --soft: #20242f; --soft-2: #262b3a;
}
html.theme-dark body { background: var(--bg); color: var(--text); }
html.theme-dark .clock { color: var(--text); }
html.theme-dark .btn-dark { background: #2f3446; border-color: #3a4055; }

/* top bar, buttons, form fields */
html.theme-dark .topbar { background: rgba(18, 20, 28, .94); border-bottom-color: var(--line); }
html.theme-dark .icon-btn, html.theme-dark .btn:not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-light) {
  background: var(--soft); border-color: var(--line); color: var(--text); }
html.theme-dark .icon-btn:hover, html.theme-dark .btn:not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-light):hover { background: var(--soft-2); }
html.theme-dark input:not([type=checkbox]):not([type=radio]):not([type=range]), html.theme-dark select, html.theme-dark textarea {
  background: var(--in-field); border-color: var(--in-border); color: var(--text); }
html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #6f7790; }
html.theme-dark input:disabled, html.theme-dark select:disabled, html.theme-dark textarea:disabled { opacity: .6; }
html.theme-dark .file-input { background: var(--in-field); border-color: var(--in-border); }
html.theme-dark code { background: var(--soft-2); color: #ffb4c4; }
html.theme-dark dialog { background: var(--card); color: var(--text); }
html.theme-dark .flash-success { border-color: #1f5a37; } html.theme-dark .flash-warning { border-color: #5c4614; }
html.theme-dark .flash-error { border-color: #6b2326; }

/* tables, cards, lists */
html.theme-dark .table th { background: var(--soft); color: #aab1c4; }
html.theme-dark .table tbody tr:hover { background: #1f2330; }
html.theme-dark .table tfoot th { background: var(--soft); }
html.theme-dark .table td, html.theme-dark .table th { border-color: var(--line); }
html.theme-dark .quick-link, html.theme-dark .login-shell, html.theme-dark .channel-pick,
html.theme-dark .emp-tabs a.active { background: var(--card); }
html.theme-dark .emp-tabs a { background: var(--soft); }
html.theme-dark .reply { background: var(--soft); }
html.theme-dark .notif.unread { background: #2a1820; }
html.theme-dark .badge-not_yet { background: #2c3142; color: #c3c8d6; }

/* attendance ring and 7-day timeline */
html.theme-dark .ck-track { stroke: #2a2f3d; }
html.theme-dark .ck-dot:not(.on) { fill: #2f3546; }
html.theme-dark .ck-bar { background: #2a2f3d; }
html.theme-dark .ck-face { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
html.theme-dark .ck-ring::before { box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35); }
html.theme-dark .ck-card { background: linear-gradient(180deg, #343c52 0%, #343c52 50%, #2a3144 50%, #2a3144 100%); }
html.theme-dark .tl-track { fill: #222634; }
html.theme-dark .tl-office, html.theme-dark .tl-legend-office { fill: #343a4b; background: #343a4b; }
html.theme-dark .tl-tag { fill: #9aa1b5; }

/* calendar */
html.theme-dark .cal-day { background: var(--card); border-color: var(--line); }
html.theme-dark .cal-day.is-weekend { background: #161923; }
html.theme-dark .cal-day.is-selected { background: #3a3115; border-color: #6b5a1f; }

/* KPI sheet */
html.theme-dark .ksheet { background: var(--card); }
html.theme-dark .ksheet th, html.theme-dark .ksheet td { border-color: var(--line); }
html.theme-dark .ksheet thead th { background: var(--soft); }
html.theme-dark .ks-label td { background: #2a2f3d; color: #cbd0dc; }
html.theme-dark .ks-future td { background: #171a23; }
html.theme-dark .ks-absent td, html.theme-dark .ks-rejected td { background: #3a1517; }
html.theme-dark .ks-today td { background: #33290f; }

/* office rules FAQ */
html.theme-dark .faq summary:hover { background: var(--soft); }
html.theme-dark .faq-a { background: #10281a; }

/* team chat */
html.theme-dark .cx-msg:hover { background: #1f2330; }
html.theme-dark .cx-msg.pinned { background: #2e2812; }
html.theme-dark .cx-msg.mentions-me { background: #332a10; }
html.theme-dark .cx-body a, html.theme-dark .cx-react b, html.theme-dark .cx-thread-sum b { color: #7aa7ff; }
html.theme-dark .cx-body code { background: var(--soft-2); border-color: var(--line); color: #ff8fa8; }
html.theme-dark .cx-pre { background: #0e1016; border-color: var(--line); color: var(--text); }
html.theme-dark .cx-quote { border-left-color: #3a4055; color: #b3b9c9; }
html.theme-dark .cx-mention { background: #1c2b41; color: #85b8ff; }
html.theme-dark .cx-mention.me, html.theme-dark .cx-mention.all { background: #3a3012; color: #f6cf62; }
html.theme-dark .cx-pinned-tag { color: #f6cf62; }
html.theme-dark .cx-react { background: var(--soft-2); }
html.theme-dark .cx-react.mine { background: #1c2b41; border-color: #7aa7ff; }
html.theme-dark .cx-comp, html.theme-dark .cx-edit-box { border-color: var(--in-border); }
html.theme-dark .cx-comp:focus-within { border-color: #6f7790; }
html.theme-dark .cx-fmt { border-bottom-color: var(--line); }
html.theme-dark .cx-fmt button { color: #b3b9c9; }
html.theme-dark .cx-fmt button:hover, html.theme-dark .cx-icon-btn:hover { background: var(--soft-2); }
html.theme-dark .cx-dot { border-color: var(--card); }
html.theme-dark .cx-tools { box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
html.theme-dark .cx-tools button, html.theme-dark .cx-name, html.theme-dark .cm-title { color: var(--text); }
html.theme-dark .cx-mention-opt, html.theme-dark .cx-menu button { color: var(--text); }
html.theme-dark .cx-chip { background: var(--soft); }
html.theme-dark .cx-dialog::backdrop { background: rgba(0, 0, 0, .7); }
html.theme-dark .cx-img { background: var(--soft); }
}
@media screen {
html.theme-dark .btn:disabled, html.theme-dark .btn[disabled] { background: #2a2f3d !important; border-color: #343a4b !important; color: #7d859b !important; }

/* home office calendars */
html.theme-dark .wfh-c.standing, html.theme-dark .wfh-m.standing { background: #0c4a6e; color: #e0f2fe; }
html.theme-dark .wfh-c.pending, html.theme-dark .wfh-m.pending { background: repeating-linear-gradient(45deg, #78350f 0 4px, #92400e 4px 8px); color: #fef3c7; }
html.theme-dark .wfh-cal .is-today { background: rgba(232, 24, 76, .18); }
html.theme-dark .wfh-c.lv-holiday, html.theme-dark .wfh-m.lv-holiday { background: #5b1a3a; color: #fbcfe8; }
}

/* extra stat-tile colours and icon touches (style.css "3D pictures" block) */
@media screen {
html.theme-dark .t-purple .stat-ico { background: #2e1a45; color: #c084fc; }
html.theme-dark .t-teal .stat-ico { background: #0f2f2c; color: #2dd4bf; }
html.theme-dark .btn-big .btn-pic { background: rgba(255, 255, 255, .88); }
html.theme-dark .phone-link { color: #4ade80; }
html.theme-dark .dropzone { background: var(--soft); }
}

/* colourful icons: lighter tones on dark backgrounds */
@media screen {
html.theme-dark {
  --tn-green: #4ADE80; --tn-orange: #FB923C; --tn-red: #F87171; --tn-blue: #60A5FA; --tn-indigo: #818CF8;
  --tn-violet: #C084FC; --tn-amber: #FBBF24; --tn-teal: #2DD4BF; --tn-pink: #FB7185; --tn-slate: #94A3B8;
}
}