/* ═══════════════════════════════════════════════════════
   PLENIVO — DUAL THEME SYSTEM
   dark  = [data-theme="dark"]   (default)
   light = [data-theme="light"]  (wit/blauw/rood)
═══════════════════════════════════════════════════════ */

/* ── DARK THEME (default) ─────────────────────────── */
[data-theme="dark"] {
  --bg:        #0E1117;
  --bg2:       #141820;
  --bg3:       #1C2130;
  --bg4:       #252A3A;
  --bg5:       #2E3450;
  --border:    #2E3450;
  --border2:   #3a4060;
  --text:      #E8ECF4;
  --text2:     #B0B8D0;
  --muted:     #7A85A0;
  --muted2:    #4a5070;
  --surface:   #1C2130;
  --surface2:  #252A3A;
  --card-bg:   #1C2130;
  --header-bg: #141820;
  --sidebar-bg:#141820;
  --input-bg:  #0E1117;
  --shadow:    0 8px 32px rgba(0,0,0,.55);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --overlay:   rgba(0,0,0,.78);

  /* Brand — same in both themes */
  --brand:     #CC0000;
  --brand2:    #E2001A;
  --brand-hover:#a80014;
  --brand-bg:  rgba(204,0,0,.12);
  --accent:    #1A4A8A;
  --accent2:   #2A6ACC;

  /* Dept colors */
  --w:   #4A90D9; --w-bg: rgba(74,144,217,.13);
  --e:   #F5A623; --e-bg: rgba(245,166,35,.13);
  --i:   #27AE60; --i-bg: rgba(39,174,96,.13);
  --f:   #9B59B6; --f-bg: rgba(155,89,182,.13);
  --ok:  #27AE60; --ok-bg: rgba(39,174,96,.12);
  --warn:#F5A623; --warn-bg: rgba(245,166,35,.12);

  /* Table */
  --table-hdr: #111318;
  --table-row-hover: rgba(255,255,255,.02);
  --table-border: rgba(46,52,80,.5);
}

/* ── LIGHT THEME ──────────────────────────────────── */
[data-theme="light"] {
  --bg:        #F4F6FB;
  --bg2:       #FFFFFF;
  --bg3:       #EEF1F8;
  --bg4:       #E4E8F2;
  --bg5:       #CDD3E6;
  --border:    #D0D6E8;
  --border2:   #B8C0D8;
  --text:      #1A2040;
  --text2:     #3A4460;
  --muted:     #6878A0;
  --muted2:    #A0AABF;
  --surface:   #FFFFFF;
  --surface2:  #F4F6FB;
  --card-bg:   #FFFFFF;
  --header-bg: #FFFFFF;
  --sidebar-bg:#FFFFFF;
  --input-bg:  #FFFFFF;
  --shadow:    0 4px 24px rgba(26,32,64,.10);
  --shadow-sm: 0 2px 8px rgba(26,32,64,.07);
  --overlay:   rgba(26,32,64,.55);

  --brand:     #CC0000;
  --brand2:    #E2001A;
  --brand-hover:#a80014;
  --brand-bg:  rgba(204,0,0,.08);
  --accent:    #1A4A8A;
  --accent2:   #2A6ACC;

  --w:   #1A6ACC; --w-bg: rgba(26,106,204,.10);
  --e:   #D4820A; --e-bg: rgba(212,130,10,.10);
  --i:   #1A8A50; --i-bg: rgba(26,138,80,.10);
  --f:   #7B35A8; --f-bg: rgba(123,53,168,.10);
  --ok:  #1A8A50; --ok-bg: rgba(26,138,80,.10);
  --warn:#D4820A; --warn-bg: rgba(212,130,10,.10);

  --table-hdr: #F4F6FB;
  --table-row-hover: rgba(26,32,64,.03);
  --table-border: rgba(208,214,232,.8);
}

/* ═══════════════════════════════════════════════════════
   GLOBAL COMPONENT OVERRIDES (theme-aware)
═══════════════════════════════════════════════════════ */
body                      { background: var(--bg); color: var(--text); }
.site-header              { background: var(--header-bg); box-shadow: var(--shadow-sm); }
.sidebar                  { background: var(--sidebar-bg); border-right-color: var(--border); }
.sidebar-section          { color: var(--muted2); }
.nav-item                 { color: var(--muted); }
.nav-item:hover           { color: var(--text); background: var(--bg3); }
.nav-item.active          { color: var(--text); background: var(--brand-bg); border-left-color: var(--brand); }
.card                     { background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow-sm); }
.card-hdr                 { background: var(--bg3); border-bottom-color: var(--border); }
.card-title               { color: var(--text); }
.form-input,.form-select,.form-textarea { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.form-input::placeholder  { color: var(--muted2); }
.form-label               { color: var(--muted); }
.form-hint                { color: var(--muted); }
.table-wrap               { background: var(--card-bg); border-color: var(--border); }
.data-table th            { background: var(--table-hdr); color: var(--muted); border-bottom-color: var(--border); }
.data-table td            { border-bottom-color: var(--table-border); color: var(--text); }
.data-table tr:hover td   { background: var(--table-row-hover); }
.data-table .total-row td { background: var(--table-hdr); color: var(--text); }
.modal                    { background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow); }
.mhdr                     { background: var(--card-bg); border-bottom-color: var(--border); }
.mhdr-title               { color: var(--text); }
.mfooter                  { background: var(--card-bg); border-top-color: var(--border); }
.overlay                  { background: var(--overlay); }
.totals-bar               { background: var(--bg3); border-color: var(--border); }
.day-grid                 { background: var(--card-bg); border-color: var(--border); }
.day-hdr                  { background: var(--table-hdr); border-bottom-color: var(--border); }
.dh-label                 { color: var(--muted); border-right-color: var(--border); }
.dh-title                 { color: var(--text); }
.person-name              { color: var(--text2); border-right-color: var(--border); border-bottom-color: var(--table-border); }
.person-slots             { border-bottom-color: var(--table-border); }
.week-grid                { background: var(--card-bg); border-color: var(--border); }
.wg-hdr                   { background: var(--table-hdr); color: var(--muted); border-color: var(--border); }
.wg-name                  { background: var(--table-hdr); color: var(--muted); border-color: var(--border); }
.wg-cell                  { border-color: var(--table-border); }
.month-card               { background: var(--card-bg); border-color: var(--border); }
.month-hdr                { background: var(--table-hdr); border-bottom-color: var(--border); color: var(--text); }
.mini-cal .mc-dh          { color: var(--muted2); }
.mini-cal .mc-d           { color: var(--muted); }
.mini-cal .mc-d:hover     { background: var(--bg4); color: var(--text); }
.mini-cal .mc-d.has-tasks { color: var(--text); }
.hdr-user                 { background: var(--bg3); border-color: var(--border); color: var(--text); }
.hdr-btn                  { border-color: var(--border); color: var(--muted); }
.hdr-btn:hover            { border-color: var(--brand); color: var(--text); }
.plan-controls            { background: var(--bg3); border-bottom-color: var(--border); }
.dept-tab-group,.view-tab-group { background: var(--bg); border-color: var(--border); }
.dept-tab,.view-tab       { color: var(--muted); border-right-color: var(--border); }
.nav-arrow                { background: var(--bg); border-color: var(--border); color: var(--text); }
.search-field input       { background: var(--bg); border-color: var(--border); color: var(--text); }
.kpi-card                 { background: var(--card-bg); border-color: var(--border); }
.kpi-label                { color: var(--muted); }
.kpi-value                { color: var(--text); }
.kpi-sub                  { color: var(--muted); }
.login-box                { background: var(--card-bg); border-color: var(--border); }
.login-sub,.login-title   { color: var(--text); }
.spie-toast               { background: var(--card-bg); border-color: var(--border); color: var(--text); }
.info-box.blue            { background: rgba(26,106,204,.08); border-color: rgba(26,106,204,.25); color: var(--accent2); }
.info-box.red             { background: rgba(204,0,0,.08); border-color: rgba(204,0,0,.25); }
.section-hdr h3           { color: var(--text); }
.section-hdr::after       { background: var(--border); }
.badge-viewer             { background: var(--bg4); color: var(--muted); }
.page-title               { color: var(--text); }
.btn-secondary            { border-color: var(--border); color: var(--muted); }
.btn-secondary:hover      { border-color: var(--muted); color: var(--text); }
.btn-outline              { border-color: var(--border); color: var(--muted); }
.btn-outline:hover        { border-color: var(--text); color: var(--text); }
.ie                       { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.empty-hint               { color: var(--muted2); }
.chip-desc,.chip-pname    { color: var(--muted); }
[data-theme="light"] .chip-w { color: var(--w); }
[data-theme="light"] .chip-e { color: var(--e); }
[data-theme="light"] .chip-i { color: var(--i); }
[data-theme="light"] .chip-f { color: var(--f); }
[data-theme="light"] .chip-hrs { color: var(--text2); }
[data-theme="light"] .day-sub-tot { color: var(--muted); }
[data-theme="light"] .chip-del { color: var(--muted2); }
[data-theme="light"] .wg-hdr.today { color: var(--brand); }

/* ── THEME TOGGLE BUTTON ─────────────────────────── */
.theme-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); padding: 5px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--text); }
.theme-toggle .th-icon { font-size: 14px; }

/* ── TENANT BADGE ─────────────────────────────────── */
.tenant-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  background: var(--brand-bg); border: 1px solid var(--brand);
  color: var(--brand);
}