:root{
  --bg:            #10141B;
  --bg-panel:      #161B24;
  --bg-panel-alt:  #1C222D;
  --bg-side:       #12161D;
  --line:          #262E3B;
  --line-soft:     #1E2530;
  --text:          #EDEFF3;
  --text-dim:      #8993A6;
  --text-faint:    #5A6478;
  --shadow:        rgba(0,0,0,.45);

  --sig-avail:     #34D399;
  --sig-avail-dim: #1B4438;
  --sig-break:     #F2B84B;
  --sig-break-dim: #4A3A18;
  --sig-task:      #E0793A;
  --sig-task-dim:  #4A2E18;
  --sig-out:       #F0555C;
  --sig-out-dim:   #4A1D20;
  --accent:        #7EC8E3;
  --accent-dim:    #163643;
  --accent-ink:    #0B222B;

  --nav-active-bg: var(--sig-avail-dim);
  --nav-active-fg: var(--text);

  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

.theme-check:checked ~ .app{
  --bg:            #FFFFFF;
  --bg-panel:      #F8F9FB;
  --bg-panel-alt:  #EFF2F6;
  --bg-side:       #FFFFFF;
  --line:          #DDE2EA;
  --line-soft:     #E6EAF0;
  --text:          #1B2129;
  --text-dim:      #5B6472;
  --text-faint:    #8B93A2;
  --shadow:        rgba(30,41,59,.10);

  --sig-avail:     #15803D;
  --sig-avail-dim: #DCFCE7;
  --sig-break:     #B45309;
  --sig-break-dim: #FEF3C7;
  --sig-task:      #C2410C;
  --sig-task-dim:  #FFEDD5;
  --sig-out:       #DC2626;
  --sig-out-dim:   #FEE2E2;
  --accent:        #0E7C99;
  --accent-dim:    #E0F2FE;
  --accent-ink:    #FFFFFF;

  --nav-active-bg: #ECEEF1;
  --nav-active-fg: #16181D;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
.theme-check{ position:absolute; opacity:0; pointer-events:none; }
.sidebar-check{ position:absolute; opacity:0; pointer-events:none; }

body{
  font-family:var(--font-body);
  color:var(--text);
}

.app{
  display:flex;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(52,211,153,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(126,200,227,0.05), transparent 55%),
    var(--bg);
  transition:background .2s, color .2s;
}

.sidebar{
  position:sticky; top:0; align-self:flex-start; height:100vh;
  width:240px; flex-shrink:0;
  background:var(--bg-side);
  border-right:none;
  display:flex; flex-direction:column;
  padding:18px 14px;
  transition:width .18s ease, padding .18s ease;
  z-index:100;
  overflow:visible;
}

.sidebar-check{ position:absolute; opacity:0; pointer-events:none; }

.sidebar-collapse-btn{
  position:relative; margin-left:auto; width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); cursor:pointer;
  transition:background .12s, color .12s;
}
.sidebar-collapse-btn:hover{ background:var(--nav-active-bg); color:var(--text); }
.collapse-ico{ width:15px; height:15px; transition:transform .18s ease; }

.collapse-tip{
  position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  white-space:nowrap; background:#15181D; border:none;
  color:#FFFFFF; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:7px;
  box-shadow:0 8px 18px var(--shadow);
  opacity:0; visibility:hidden; transition:opacity .12s, visibility .12s;
  pointer-events:none; z-index:20;
}
.sidebar-collapse-btn:hover .collapse-tip{ opacity:1; visibility:visible; }

@media (min-width: 769px){
  .sidebar-check:checked ~ .app .collapse-ico{ transform:scaleX(-1); }
  .collapse-tip-show{ display:none; }
  .sidebar-check:checked ~ .app .collapse-tip-hide{ display:none; }
  .sidebar-check:checked ~ .app .collapse-tip-show{ display:block; }

  .sidebar-check:checked ~ .app .sidebar{ width:64px; padding:18px 10px; }
  .sidebar-check:checked ~ .app .nav-text,
  .sidebar-check:checked ~ .app .nav-caret,
  .sidebar-check:checked ~ .app .tenant-text{ display:none; }
  .sidebar-check:checked ~ .app .nav-sub{ display:none; }
  .sidebar-check:checked ~ .app .nav-link,
  .sidebar-check:checked ~ .app summary.nav-link{ justify-content:center; padding:10px; }
  .sidebar-check:checked ~ .app .tenant{ justify-content:center; gap:8px; padding:2px 0 12px; flex-direction:column; }
  .sidebar-check:checked ~ .app .sidebar-collapse-btn{ margin-left:0; }
  .sidebar-check:checked ~ .app .profile-trigger{ justify-content:center; padding:4px 0; }
  .sidebar-check:checked ~ .app .profile-menu{ left:6px; right:auto; width:210px; }
}

.sidebar-burger{ display:none; }
.sidebar-backdrop{ display:none; }

.tenant{
  display:flex; align-items:center; gap:11px;
  padding:2px 2px 14px; margin-bottom:8px;
  flex-shrink:0;
}
.tenant-logo{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(145deg,#232B38,#10141B);
  border:none;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.tenant-logo img{ width:100%; height:100%; object-fit:cover; }
.tenant-logo span{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--sig-avail); }
.tenant-name{ font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.15; }
.tenant-sub{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); letter-spacing:.08em; margin-top:1px; }

nav.sidenav{
  flex:1;
  min-height:0;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
}
nav.sidenav::-webkit-scrollbar{ display:none; }

.nav-link, summary.nav-link{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; color:var(--text-dim); text-decoration:none;
  padding:9px 12px; border-radius:10px; cursor:pointer; list-style:none;
  min-width:0;
  transition:background .12s, color .12s;
}
summary.nav-link::-webkit-details-marker{ display:none; }
.nav-link:hover, summary.nav-link:hover{ background:var(--bg-panel-alt); color:var(--text); }
.nav-link.active{ background:var(--nav-active-bg); color:var(--nav-active-fg); font-weight:600; }

.nav-ico{ width:18px; height:18px; flex-shrink:0; opacity:.65; }
.nav-link:hover .nav-ico{ opacity:.9; }
.nav-link.active .nav-ico{ opacity:1; }
.nav-ico svg{ width:100%; height:100%; }
.nav-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

.nav-caret{
  margin-left:auto; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.55; transition:transform .15s;
}
details[open] > summary .nav-caret{ transform:rotate(225deg); }

.nav-sub{ padding:2px 0 4px 34px; display:flex; flex-direction:column; gap:1px; }
.nav-sub a{
  display:block; font-size:15px; color:var(--text-dim); text-decoration:none;
  padding:7px 10px 7px 12px; border-radius:8px;
}
.nav-sub a:hover{ background:var(--bg-panel-alt); color:var(--text); }
.nav-sub a.active{ background:var(--nav-active-bg); color:var(--nav-active-fg); font-weight:600; }

.sidebar-foot-wrap{
  padding-top:6px; margin-top:4px;
  flex-shrink:0;
}
.sidebar-foot{
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);
  padding:0 8px 6px;
}

.profile-toggle{ position:absolute; opacity:0; pointer-events:none; }

.profile-trigger{
  display:flex; align-items:center; gap:6px;
  padding:3px; border-radius:7px; cursor:pointer;
  transition:background .12s;
}
.profile-trigger:hover{ background:var(--bg-panel-alt); }

.avatar{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:11px;
  color:#4A3300; background:#F5C955;
}

.profile-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.profile-name{
  font-size:15px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-role{ font-size:10.5px; color:var(--text-faint); }

.profile-caret{ width:10px; height:10px; color:var(--text-faint); flex-shrink:0; transition:transform .15s; }

.profile-trigger .avatar{
  width:24px; height:24px; border-radius:50%;
  font-size:11px; font-weight:700;
  color:#4A3300; background:#F5C955;
}
.profile-toggle:checked ~ .profile-trigger .profile-caret{ transform:rotate(180deg); }

.profile-menu-backdrop{ display:none; position:fixed; inset:0; z-index:9990; cursor:default; }
.profile-toggle:checked ~ .profile-menu-backdrop{ display:block; }

.profile-block{ position:relative; z-index:9995; }

.profile-menu{
  display:none; position:absolute; left:0; right:0; bottom:calc(100% + 8px);
  background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 40px var(--shadow); padding:6px; z-index:9999;
}
.profile-toggle:checked ~ .profile-menu{ display:block; }

.profile-menu-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px;
  font-size:15px; font-weight:500; color:var(--text-dim); text-decoration:none;
}
.profile-menu-item svg{ width:15px; height:15px; flex-shrink:0; opacity:.85; }
.profile-menu-item:hover{ background:var(--bg-panel-alt); color:var(--text); }
.profile-menu-item.danger{ color:var(--sig-out); }
.profile-menu-item.danger:hover{ background:var(--sig-out-dim); }
.profile-menu-sep{ height:1px; background:var(--line); margin:6px 4px; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:18px 32px; border-bottom:1px solid var(--line);
}

.account{
  font-family:var(--font-mono); font-size:14px; color:var(--text-dim);
  display:flex; align-items:center; gap:9px; padding-right:14px; border-right:1px solid var(--line);
}
.account .dot{ width:7px; height:7px; border-radius:50%; background:var(--sig-avail); box-shadow:0 0 8px var(--sig-avail); }

.theme-switch{ display:flex; align-items:center; gap:8px; }
.theme-switch-track{
  width:44px; height:24px; border-radius:20px;
  background:var(--bg-panel-alt); border:1px solid var(--line);
  position:relative; cursor:pointer; display:inline-block; transition:background .2s;
}
.theme-switch-track .knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--text-dim); transition:transform .2s ease, background .2s;
  display:flex; align-items:center; justify-content:center;
}
.theme-switch-track .knob svg{ width:10px; height:10px; color:var(--bg-side); }
.theme-check:checked ~ .app .theme-switch-track .knob{ transform:translateX(20px); background:var(--sig-break); }
.theme-label{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); letter-spacing:.05em; text-transform:uppercase; width:34px; }

.bell-wrap{ position:relative; }
.bell{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-panel-alt);
  display:flex; align-items:center; justify-content:center; position:relative;
  color:var(--text-dim); cursor:pointer;
}
.bell:hover{ color:var(--text); border-color:var(--text-faint); }
.bell::after{
  content:''; position:absolute; top:7px; right:8px; width:6px; height:6px; border-radius:50%;
  background:var(--sig-task); box-shadow:0 0 0 2px var(--bg-panel-alt);
}
.bell svg{ width:16px; height:16px; }
.bell-tip{
  position:absolute; top:calc(100% + 10px); right:0; width:250px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:11px;
  padding:14px 15px; box-shadow:0 16px 32px var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:30;
}
.bell-wrap:hover .bell-tip, .bell-wrap:focus-within .bell-tip{ opacity:1; visibility:visible; transform:translateY(0); }
.bell-tip-title{ font-size:15px; font-weight:600; margin-bottom:6px; }
.bell-tip-body{ font-size:13.5px; color:var(--text-dim); line-height:1.55; }
.bell-tip-list{ margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.bell-tip-list li{ list-style:none; font-size:13px; color:var(--text-dim); display:flex; gap:7px; align-items:flex-start; }
.bell-tip-list li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--sig-task); margin-top:5px; flex-shrink:0; }

.content{ padding:28px 32px 56px; flex:1; }

.page-head{ margin-bottom:26px; }
.eyebrow{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; color:var(--accent);
  text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.eyebrow{
  display: none;
}
.eyebrow .rule{ width:22px; height:1px; background:var(--accent); opacity:.5; }
h1{ font-family:var(--font-display); font-size:33px; font-weight:600; letter-spacing:-.01em; }
.page-sub{ color:var(--text-dim); font-size:15px; margin-top:6px; }
.live-pill{
  font-family:var(--font-mono); font-size:13px; color:var(--sig-avail);
  background:var(--sig-avail-dim); border:1px solid rgba(52,211,153,.35);
  padding:7px 12px; border-radius:20px; display:inline-flex; align-items:center; gap:7px; letter-spacing:.04em;
}
.pulse-dot{ position:relative; width:7px; height:7px; }
.pulse-dot::before, .pulse-dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--sig-avail); }
.pulse-dot::before{ animation:pulse-ring 1.8s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes pulse-ring{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3.2); opacity:0; } }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:15.5px; font-weight:600;
  padding:11px 18px; border-radius:9px; border:1px solid transparent;
  cursor:pointer; transition:filter .15s, transform .1s;
}
.btn svg{ width:14px; height:14px; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:var(--bg-panel-alt); color:var(--text-dim); border-color:var(--line); }
.btn-ghost:hover{ color:var(--text); border-color:var(--text-faint); }

.filter-panel{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; margin-bottom:24px; display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.select-wrap, .date-wrap{
  background:var(--bg-panel-alt); border:1px solid var(--line); border-radius:9px;
  display:flex; align-items:center; transition:border-color .15s;
}
.select-wrap{ position:relative; }
.select-wrap:focus-within, .date-wrap:focus-within{ border-color:var(--accent); }
select{
  appearance:none; background:transparent; border:none; color:var(--text);
  font-family:var(--font-body); font-size:15.5px; font-weight:500; padding:11px 34px 11px 14px; min-width:160px; cursor:pointer;
}
select:focus{ outline:none; }
.select-wrap::after{
  content:''; position:absolute; right:13px; top:50%; margin-top:-3px;
  width:7px; height:7px; border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint);
  transform:rotate(45deg); pointer-events:none;
}
.date-wrap input{
  background:transparent; border:none; color:var(--text);
  font-family:var(--font-mono); font-size:15px; padding:11px 10px 11px 14px; min-width:168px;
}
.date-wrap input:focus{ outline:none; }
.date-wrap .cal-ico{
  width:32px; height:32px; margin-right:5px; border-radius:7px; background:var(--bg-panel);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); flex-shrink:0;
}
.date-wrap .cal-ico svg{ width:14px; height:14px; }
.field-actions{ display:flex; gap:10px; }

.report-panel{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:14px;
  min-height:380px; display:flex; align-items:center; justify-content:center;
}
.empty-state{ text-align:center; max-width:340px; padding:40px; }
.empty-icon{
  width:64px; height:64px; margin:0 auto 22px; border-radius:16px;
  background:var(--bg-panel-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--text-faint);
}
.empty-icon svg{ width:26px; height:26px; }
.empty-title{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:8px; }
.empty-sub{ color:var(--text-dim); font-size:15.5px; line-height:1.6; }
.empty-range{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13.5px; color:var(--text-faint);
  background:var(--bg-panel-alt); border:1px solid var(--line); padding:8px 14px; border-radius:20px;
}
.empty-range .sep{ opacity:.5; }

.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.stat-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; position:relative; overflow:hidden; }
.stat-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.stat-card.avail::before{ background:var(--sig-avail); }
.stat-card.brk::before{ background:var(--sig-break); }
.stat-card.task::before{ background:var(--sig-task); }
.stat-card.out::before{ background:var(--sig-out); }
.stat-label{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.stat-label .sw{ width:6px; height:6px; border-radius:50%; }
.avail .sw{ background:var(--sig-avail); }
.brk .sw{ background:var(--sig-break); }
.task .sw{ background:var(--sig-task); }
.out .sw{ background:var(--sig-out); }
.stat-value{ font-family:var(--font-display); font-size:42.5px; font-weight:600; line-height:1; }
.stat-foot{ font-family:var(--font-mono); font-size:13px; color:var(--text-faint); margin-top:10px; }

.panel{ background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.panel-title{ font-family:var(--font-display); font-size:17.5px; font-weight:600; }
.panel-tools{ display:flex; gap:10px; }
.chip{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); border:1px solid var(--line); background:var(--bg-panel-alt); padding:6px 11px; border-radius:7px; }

.panel table{ width:100%; border-collapse:collapse; }
.panel thead th{
  text-align:left; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; padding:12px 22px; border-bottom:1px solid var(--line); background:var(--bg-panel-alt);
}
.panel tbody tr{ border-bottom:1px solid var(--line-soft); transition:background .12s; position:relative; }
.panel tbody tr:last-child{ border-bottom:none; }
.panel tbody tr:hover{ background:rgba(127,127,127,.05); }
.panel tbody td{ padding:13px 22px; font-size:15px; vertical-align:middle; }

.row-flag{ position:absolute; left:0; top:0; bottom:0; width:3px; }
tr.st-avail .row-flag{ background:var(--sig-avail); }
tr.st-break .row-flag{ background:var(--sig-break); }
tr.st-task  .row-flag{ background:var(--sig-task); }
tr.st-out   .row-flag{ background:var(--sig-out); }

.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; }
tr.st-avail .status-dot{ background:var(--sig-avail); }
tr.st-break .status-dot{ background:var(--sig-break); }
tr.st-task  .status-dot{ background:var(--sig-task); }
tr.st-out   .status-dot{ background:var(--sig-out); }

.agent-cell{ display:flex; align-items:center; gap:11px; }
.avatar{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:14px; font-weight:600;
  background:var(--bg-panel-alt); border:1px solid var(--line); color:var(--text-dim);
}
.agent-name{ font-weight:500; color:var(--text); }
.ext{ font-family:var(--font-mono); font-size:15px; color:var(--text-dim); }
.ext.none{ color:var(--text-faint); font-style:italic; }

.status-badge{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; padding:5px 11px; border-radius:20px; }
.status-badge .d{ width:6px; height:6px; border-radius:50%; }
.st-avail .status-badge{ background:var(--sig-avail-dim); color:var(--sig-avail); }
.st-avail .status-badge .d{ background:var(--sig-avail); }
.st-break .status-badge{ background:var(--sig-break-dim); color:var(--sig-break); }
.st-break .status-badge .d{ background:var(--sig-break); }
.st-task .status-badge{ background:var(--sig-task-dim); color:var(--sig-task); }
.st-task .status-badge .d{ background:var(--sig-task); }
.st-out .status-badge{ background:var(--sig-out-dim); color:var(--sig-out); }
.st-out .status-badge .d{ background:var(--sig-out); }

.state-txt{ color:var(--text-dim); font-size:15px; }
.state-txt.queue{ color:var(--accent); }
.timer{ font-family:var(--font-mono); font-size:15px; color:var(--text-dim); }
.num{ font-family:var(--font-mono); font-size:15px; }
.num.zero{ color:var(--text-faint); }
.num.hit{ color:var(--sig-avail); font-weight:500; }

.panel-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:13px; color:var(--text-faint);
}

.icon-btn{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); cursor:pointer;
}
.icon-btn svg{ width:14px; height:14px; }
.icon-btn.edit-btn{ background:var(--accent-dim); color:var(--accent); border-color:transparent; }
.icon-btn.edit-btn:hover{ filter:brightness(1.15); }
.icon-btn.delete-btn{ background:var(--sig-out-dim); color:var(--sig-out); border-color:transparent; }
.icon-btn.delete-btn:hover{ filter:brightness(1.15); }

.tag-solid{
  display:inline-block; font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--accent-ink); background:var(--accent); padding:5px 10px; border-radius:6px; white-space:nowrap;
}
.plain-select.select-sm, select.select-sm{
  min-width:0; width:100%; padding:9px 30px 9px 12px; font-size:15px;
}

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.btn-excel{ background:var(--sig-avail); color:#0B2A20; }
.btn-excel:hover{ filter:brightness(1.08); }

.info-banner{
  display:flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-body); font-size:15.5px; font-weight:600;
  padding:12px 18px; border-radius:10px; margin-bottom:18px;
}
.info-banner svg{ width:16px; height:16px; flex-shrink:0; }

footer.site-foot{
  text-align:center; padding:10px 20px; font-size:12.5px; color:var(--text-faint);
  background:var(--bg-side);
  border-top:1px solid var(--line);
}

/* Footer lives outside .app, so the theme toggle doesn't reach it — apply light vars directly */
.theme-check:checked ~ footer.site-foot,
.theme-check:checked ~ .app footer.site-foot{
  --bg-side:    #FFFFFF;
  --line:       #DDE2EA;
  --text-faint: #8B93A2;
}
footer.site-foot b{ color:var(--text-dim); font-weight:600; }

.settings-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:14px;
  padding:0; max-width:760px;
}
.tab-radio{ position:absolute; opacity:0; pointer-events:none; }

.tab-bar{ display:flex; gap:4px; padding:10px 14px 0; border-bottom:1px solid var(--line); }
.tab-bar label{
  font-family:var(--font-body); font-size:15.5px; font-weight:600; color:var(--text-dim);
  padding:12px 16px; border-radius:9px 9px 0 0; cursor:pointer; margin-bottom:-1px;
  border:1px solid transparent; transition:color .12s, background .12s;
}
.tab-bar label:hover{ color:var(--text); }

.tab-panel{ display:none; padding:26px 26px 28px; }

#tab-sl:checked ~ .tab-bar label[for="tab-sl"],
#tab-bt:checked ~ .tab-bar label[for="tab-bt"],
#tab-ivr:checked ~ .tab-bar label[for="tab-ivr"],
#tab-tp:checked ~ .tab-bar label[for="tab-tp"]{
  color:var(--text); background:var(--bg-panel); border-color:var(--line); border-bottom-color:var(--bg-panel);
}
#tab-sl:checked ~ .tab-panels .panel-sl,
#tab-bt:checked ~ .tab-panels .panel-bt,
#tab-ivr:checked ~ .tab-panels .panel-ivr,
#tab-tp:checked ~ .tab-panels .panel-tp{ display:block; }

.form-group{ margin-bottom:22px; max-width:360px; }
.form-group label{
  display:block; font-size:15.5px; font-weight:500; color:var(--text); margin-bottom:9px;
}
.form-group label .req{ color:var(--sig-out); }
.form-group .hint{ color:var(--text-dim); font-weight:400; }
.text-input, .plain-select{
  width:100%; background:var(--bg-panel-alt); border:1px solid var(--line); border-radius:9px;
  color:var(--text); font-family:var(--font-body); font-size:16px; padding:11px 14px;
}
.text-input:focus, .plain-select:focus{ outline:none; border-color:var(--accent); }
.plain-select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size:5px 5px; background-repeat:no-repeat;
}

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title{ font-family:var(--font-display); font-size:17px; font-weight:600; }

.mini-table-wrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:22px; }
.mini-table-wrap table{ width:100%; border-collapse:collapse; }
.mini-table-wrap thead th{
  text-align:left; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--bg-panel-alt);
}
.mini-table-wrap tbody tr{ border-bottom:1px solid var(--line-soft); }
.mini-table-wrap tbody tr:last-child{ border-bottom:none; }
.mini-table-wrap tbody td{ padding:12px 16px; font-size:15.5px; color:var(--text); vertical-align:middle; }
.mini-table-wrap td.dim{ color:var(--text-dim); font-family:var(--font-mono); font-size:15px; }
td.dim{ color:var(--text-faint); font-family:var(--font-mono); font-size:15px; }
.btn-sm{
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-dim);
  background:var(--bg-panel-alt); border:1px solid var(--line); border-radius:7px; padding:7px 13px; cursor:pointer;
}
.btn-sm:hover{ color:var(--text); border-color:var(--text-faint); }
.btn-outline-danger{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:15.5px; font-weight:600; color:var(--sig-out);
  background:transparent; border:1px solid var(--sig-out); border-radius:9px; padding:11px 18px; cursor:pointer;
}
.btn-outline-danger:hover{ background:var(--sig-out-dim); }
.btn-outline-danger svg{ width:14px; height:14px; }

.chip-field{
  display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-panel-alt); margin-bottom:14px;
}
.kw-chip{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--accent);
  background:var(--accent-dim); border-radius:20px; padding:6px 8px 6px 13px;
}
.kw-chip button{
  all:unset; display:flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; color:var(--accent); cursor:pointer; font-size:14px; line-height:1;
}
.kw-chip button:hover{ background:rgba(126,200,227,.25); }
.chip-add-row{ display:flex; gap:10px; margin-bottom:22px; }
.chip-add-row .text-input{ flex:1; }

.day-toggle{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:6px;
  width:58px; height:28px; border-radius:20px; padding:0 4px; cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.02em;
  position:relative; transition:background .15s;
}
.day-toggle.on{ background:var(--accent); color:var(--accent-ink); justify-content:flex-start; }
.day-toggle.off{ background:var(--bg-panel-alt); border:1px solid var(--line); color:var(--text-faint); justify-content:flex-end; }
.day-toggle .txt{ padding-left:6px; }
.day-toggle.off .txt{ padding-right:6px; padding-left:0; }
.day-toggle .knob{ width:18px; height:18px; border-radius:50%; background:#fff; margin-left:auto; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.day-toggle.off .knob{ margin-left:0; margin-right:auto; background:var(--text-faint); }

.oh-table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.oh-table th{
  text-align:left; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; padding:0 16px 6px;
}
.oh-table td{ padding:12px 16px; background:var(--bg-panel-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; }
.oh-table td:first-child{ border-left:1px solid var(--line); border-radius:10px 0 0 10px; font-weight:500; }
.oh-table td:last-child{ border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
.oh-table .date-wrap{ min-width:150px; }
.oh-table .date-wrap input{ min-width:0; width:100%; }

.play-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; background:var(--accent); border:none; cursor:pointer;
  color:var(--accent-ink); flex-shrink:0;
}
.play-btn:hover{ filter:brightness(1.08); }
.play-btn svg{ width:14px; height:14px; }
.audio-cell{ display:flex; align-items:center; gap:10px; }

audio{ height:34px; max-width:230px; filter:invert(.88) hue-rotate(180deg); vertical-align:middle; }
.theme-check:checked ~ .app audio{ filter:none; }
td audio{ display:block; }

.modal-toggle{ position:absolute; opacity:0; pointer-events:none; }
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(8,10,14,.6);
  align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-toggle:checked + .modal-overlay{ display:flex; }
.modal-box{
  width:100%; max-width:420px; background:var(--bg-panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 24px 48px var(--shadow); overflow:hidden;
}
.modal-box.modal-lg{ max-width:600px; }
.modal-box-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-box-title{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.modal-box-close{ color:var(--text-faint); font-size:23.5px; line-height:1; cursor:pointer; background:none; border:none; }
.modal-box-close:hover{ color:var(--text); }
.modal-box-body{ padding:22px; }
.modal-box-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }

.dataTables_wrapper{ font-family:var(--font-body); color:var(--text); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{ color:var(--text-dim); font-size:15px; padding:12px 4px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
table.dataTable thead select{
  background:var(--bg-panel-alt); border:1px solid var(--line); border-radius:7px;
  color:var(--text); font-family:var(--font-body); font-size:15px; padding:7px 10px; margin-left:6px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{ outline:none; border-color:var(--accent); }
table.dataTable{ border-collapse:collapse !important; width:100% !important; }
table.dataTable thead th{
  text-align:left; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; padding:12px 16px; border-bottom:1px solid var(--line) !important;
  background:var(--bg-panel-alt);
}
table.dataTable tbody td{ padding:12px 16px; font-size:15.5px; color:var(--text); border-bottom:1px solid var(--line-soft); }
table.dataTable tbody tr:hover{ background:rgba(127,127,127,.05); }
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd{ background:transparent; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--text-dim) !important; border:1px solid var(--line) !important; border-radius:7px;
  padding:5px 11px; margin-left:5px; background:var(--bg-panel-alt) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--accent) !important; color:var(--accent-ink) !important; border-color:transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{ opacity:.4; }

.bootstrap-datetimepicker-widget{
  background:var(--bg-panel) !important; border:1px solid var(--line) !important; border-radius:12px !important;
  box-shadow:0 16px 32px var(--shadow) !important; font-family:var(--font-body) !important; overflow:hidden;
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td{ color:var(--text) !important; }
.bootstrap-datetimepicker-widget table th.picker-switch,
.bootstrap-datetimepicker-widget .picker-switch{ font-weight:600 !important; }
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table th:hover,
.bootstrap-datetimepicker-widget .btn:hover{ background:var(--bg-panel-alt) !important; }
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new{ color:var(--text-faint) !important; }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover{ background:var(--accent) !important; color:var(--accent-ink) !important; text-shadow:none !important; }
.bootstrap-datetimepicker-widget table td.today::before{ border-bottom-color:var(--accent) !important; }
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover{ color:var(--text-faint) !important; opacity:.5; }
.bootstrap-datetimepicker-widget .datepicker-days table thead tr:last-child th{ color:var(--text-dim) !important; }
.bootstrap-datetimepicker-widget::before,
.bootstrap-datetimepicker-widget::after{ border-bottom-color:var(--line) !important; }

img{ max-width:100%; }

@media (max-width: 1024px){
  .sidebar{ width:210px; }
  .content{ padding:24px 22px 48px; }
  h1{ font-size:28px; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px){

  .sidebar{
    position:fixed; top:0; left:0; height:100vh; height:100dvh; width:266px;
    transform:translateX(-105%);
    transition:transform .22s ease, box-shadow .22s ease;
    z-index:120; box-shadow:none;
  }
  .sidebar-check:checked ~ .app .sidebar{ transform:translateX(0); box-shadow:0 12px 44px var(--shadow); }

  .sidebar-burger{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:110;
    width:38px; height:38px; border-radius:10px;
    background:var(--bg-panel); border:1px solid var(--line);
    color:var(--text-dim); cursor:pointer;
    box-shadow:0 4px 12px var(--shadow);
  }
  .sidebar-burger svg{ width:17px; height:17px; }
  .sidebar-burger:hover{ color:var(--text); }
  .sidebar-check:checked ~ .sidebar-burger{ display:none; }

  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:115;
    background:rgba(8,10,14,.45);
    opacity:0; visibility:hidden;
    transition:opacity .2s, visibility .2s;
    cursor:pointer;
  }
  .sidebar-check:checked ~ .sidebar-backdrop{ opacity:1; visibility:visible; }

  .main{ width:100%; }
  .topbar{ padding:14px 16px 14px 64px; gap:10px; }
  .account{ font-size:12.5px; padding-right:10px; }
  .theme-label{ display:none; }
  .content{ padding:20px 16px 40px; }
  h1{ font-size:25px; }
  .page-sub{ font-size:14px; }

  .filter-panel{ padding:16px; gap:14px; }
  .field{ flex:1 1 150px; }
  select{ min-width:0; width:100%; }
  .date-wrap{ width:100%; }
  .date-wrap input{ min-width:0; width:100%; }
  .field-actions{ width:100%; }
  .field-actions .btn{ flex:1; justify-content:center; }

  .stat-strip{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card{ padding:16px; }
  .stat-value{ font-size:32px; }
  .stat-foot{ font-size:12px; }

  .toolbar{ gap:10px; }
  .panel-head{ flex-wrap:wrap; gap:10px; }
  .panel{ overflow-x:auto; }
  .panel table{ min-width:640px; }
  .panel-foot{ flex-wrap:wrap; gap:8px; }

  .settings-card{ max-width:100%; }
  .tab-bar{ overflow-x:auto; scrollbar-width:none; }
  .tab-bar::-webkit-scrollbar{ display:none; }
  .tab-bar label{ white-space:nowrap; }
  .tab-panel{ padding:20px 16px 22px; }
  .form-group{ max-width:100%; }

  .modal-overlay{ padding:12px; align-items:flex-end; }
  .modal-box{ max-width:100%; }
  .modal-box.modal-lg{ max-width:100%; }
}

@media (max-width: 480px){
  .account{ display:none; }
  .btn{ padding:10px 14px; font-size:14.5px; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .live-pill{ font-size:12px; padding:6px 10px; }
  .bell-tip{ width:210px; right:-40px; }
  .page-head{ margin-bottom:18px; }
}

h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{ color:var(--text); font-family:var(--font-display); }
a{ color:var(--accent); }
a:hover{ color:var(--accent); filter:brightness(1.1); }
hr{ border-top-color:var(--line); }
.text-muted{ color:var(--text-dim) !important; }
.text-primary{ color:var(--accent) !important; }
.text-success{ color:var(--sig-avail) !important; }
.text-danger{ color:var(--sig-out) !important; }
.text-warning{ color:var(--sig-break) !important; }
label{ color:var(--text-dim); }
.border, .border-top, .border-bottom, .border-left, .border-right{ border-color:var(--line) !important; }

.form-control{
  background:var(--bg-panel-alt); border:1px solid var(--line); border-radius:9px;
  color:var(--text); font-family:var(--font-body); font-size:15px; padding:10px 13px;
  box-shadow:none !important; transition:border-color .15s;
}
.form-control:focus{ background:var(--bg-panel-alt); border-color:var(--accent); color:var(--text); box-shadow:none !important; }
.form-control::placeholder{ color:var(--text-faint); }
.form-control:disabled, .form-control[readonly]{ background:var(--bg-panel); color:var(--text-faint); }
select.form-control{
  appearance:none; -webkit-appearance:none; min-width:0; width:100%; padding-right:32px;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center; background-size:5px 5px; background-repeat:no-repeat;
}
select.form-control option{ background:var(--bg-panel); color:var(--text); }
.input-group-text{
  background:var(--bg-panel-alt); border:1px solid var(--line); color:var(--text-dim);
  font-size:14px;
}
.input-group > .form-control:not(:first-child){ border-radius:0 9px 9px 0; }
.input-group > .form-control:not(:last-child){ border-radius:9px 0 0 9px; }
.input-group-append .btn{ border-radius:0 9px 9px 0; }

.btn{ border-radius:9px; font-size:15px; font-weight:600; padding:10px 16px; transition:filter .15s; border-width:1px; }
.btn:focus, .btn.focus{ box-shadow:none !important; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn-primary:hover, .btn-primary:focus{ background:var(--accent); color:var(--accent-ink); filter:brightness(1.08); }
.btn-secondary{ background:var(--bg-panel-alt); color:var(--text-dim); border-color:var(--line); }
.btn-secondary:hover, .btn-secondary:focus{ background:var(--bg-panel-alt); color:var(--text); border-color:var(--text-faint); }
.btn-success{ background:var(--sig-avail); color:#0B2A20; border-color:transparent; }
.btn-success:hover, .btn-success:focus{ background:var(--sig-avail); color:#0B2A20; filter:brightness(1.08); }
.btn-danger{ background:var(--sig-out); color:#fff; border-color:transparent; }
.btn-danger:hover, .btn-danger:focus{ background:var(--sig-out); color:#fff; filter:brightness(1.1); }
.btn-warning{ background:var(--sig-break); color:#3A2C07; border-color:transparent; }
.btn-warning:hover, .btn-warning:focus{ background:var(--sig-break); color:#3A2C07; filter:brightness(1.08); }
.btn-info{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn-info:hover, .btn-info:focus{ background:var(--accent); color:var(--accent-ink); filter:brightness(1.08); }
.btn-default, .btn-light{ background:var(--bg-panel-alt); color:var(--text-dim); border-color:var(--line); }
.btn-default:hover, .btn-light:hover{ color:var(--text); border-color:var(--text-faint); }
.btn-outline-primary{ color:var(--accent); border-color:var(--accent); }
.btn-outline-primary:hover{ background:var(--accent); color:var(--accent-ink); }
.btn-outline-danger{ color:var(--sig-out); border-color:var(--sig-out); }
.btn-outline-danger:hover{ background:var(--sig-out); color:#fff; }
.btn-outline-secondary{ color:var(--text-dim); border-color:var(--line); }
.btn-outline-secondary:hover{ background:var(--bg-panel-alt); color:var(--text); border-color:var(--text-faint); }

.alert{ border-radius:10px; border:1px solid var(--line); padding:12px 18px; font-size:15.5px; font-weight:500; background:var(--bg-panel-alt); color:var(--text); }
.alert-info{ background:var(--accent-dim); color:var(--accent); border-color:rgba(126,200,227,.3); }
.alert-success{ background:var(--sig-avail-dim); color:var(--sig-avail); border-color:rgba(52,211,153,.3); }
.alert-danger{ background:var(--sig-out-dim); color:var(--sig-out); border-color:rgba(240,85,92,.3); }
.alert-warning{ background:var(--sig-break-dim); color:var(--sig-break); border-color:rgba(242,184,75,.3); }
.alert-dismissible .close{ color:var(--text-dim); text-shadow:none; opacity:.7; }
.alert-dismissible .close:hover{ color:var(--text); opacity:1; }

.card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; }
.card-header{ background:var(--bg-panel-alt); border-bottom:1px solid var(--line); color:var(--text); font-weight:600; border-radius:13px 13px 0 0 !important; }
.card-body{ color:var(--text); }
.card-footer{ background:var(--bg-panel-alt); border-top:1px solid var(--line); border-radius:0 0 13px 13px !important; }
.card-title{ color:var(--text); }

.table{ color:var(--text); }
.table th{ border-top:none; border-bottom:1px solid var(--line) !important; color:var(--text-faint); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }
.table td{ border-top:1px solid var(--line-soft) !important; vertical-align:middle; font-size:15px; }
.table-hover tbody tr:hover{ background:rgba(127,127,127,.05); color:var(--text); }
.table thead th{ border-bottom:1px solid var(--line) !important; }

.page-link{ background:var(--bg-panel-alt); border:1px solid var(--line); color:var(--text-dim); border-radius:7px !important; margin-left:5px; }
.page-link:hover{ background:var(--bg-panel-alt); color:var(--text); border-color:var(--text-faint); }
.page-item.active .page-link{ background:var(--accent); border-color:transparent; color:var(--accent-ink); }
.page-item.disabled .page-link{ background:var(--bg-panel-alt); border-color:var(--line); color:var(--text-faint); opacity:.5; }

.dropdown-menu{ background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 32px var(--shadow); }
.dropdown-item{ color:var(--text-dim); font-size:15px; }
.dropdown-item:hover, .dropdown-item:focus{ background:var(--bg-panel-alt); color:var(--text); }
.dropdown-divider{ border-top-color:var(--line); }

.modal-content{ background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; color:var(--text); }
.modal-header{ border-bottom-color:var(--line); }
.modal-footer{ border-top-color:var(--line); }
.modal-title{ color:var(--text); font-weight:600; }
.close{ color:var(--text-faint); text-shadow:none; }
.close:hover{ color:var(--text); }

.badge{ font-weight:600; border-radius:7px; padding:4px 8px; font-size:12px; }
.badge-primary{ background:var(--accent); color:var(--accent-ink); }
.badge-success{ background:var(--sig-avail); color:#0B2A20; }
.badge-danger{ background:var(--sig-out); color:#fff; }
.badge-warning{ background:var(--sig-break); color:#3A2C07; }
.badge-info{ background:var(--accent); color:var(--accent-ink); }
.badge-secondary{ background:var(--bg-panel-alt); color:var(--text-dim); border:1px solid var(--line); }

.tooltip-inner{ background:#15181D; color:#fff; border-radius:7px; font-size:13px; }
.popover{ background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; }
.popover-body{ color:var(--text-dim); }

.list-group-item{ background:var(--bg-panel); border-color:var(--line-soft); color:var(--text-dim); }
.list-group-item.active{ background:var(--accent-dim); border-color:var(--line); color:var(--accent); }
.list-group-item-action:hover{ background:var(--bg-panel-alt); color:var(--text); }

.radio-row{ display:flex; gap:22px; margin-top:6px; flex-wrap:wrap; }
.radio-item, .check-item{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:15.5px; color:var(--text); font-weight:400; margin:0;
}

input[type="radio"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; border-radius:50%; margin:0; flex-shrink:0;
  border:2px solid var(--text-faint); background:transparent; cursor:pointer;
  position:relative; transition:border-color .12s, box-shadow .12s;
}
input[type="radio"]:hover{ border-color:var(--text-dim); }
input[type="radio"]:checked{ border-color:var(--accent); }
input[type="radio"]:checked::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent);
}
input[type="radio"]:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-dim); }

input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; border-radius:5px; margin:0; flex-shrink:0;
  border:2px solid var(--text-faint); background:transparent; cursor:pointer;
  position:relative; transition:border-color .12s, background .12s, box-shadow .12s;
}
input[type="checkbox"]:hover{ border-color:var(--text-dim); }
input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
input[type="checkbox"]::after{
  content:''; position:absolute; left:4.5px; top:1px;
  width:5px; height:9px; border:solid var(--accent-ink); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .12s;
}
input[type="checkbox"]:checked::after{ transform:rotate(45deg) scale(1); }
input[type="checkbox"]:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-dim); }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

.seperator{ margin:20px 0; border:0; border-top:1px solid var(--line); }

@media (min-width: 769px){
  .sidebar-check:checked ~ .app .sidebar-foot-wrap{
    width:44px; margin-left:auto; margin-right:auto; padding-top:0;
  }
  .sidebar-check:checked ~ .app .sidebar-foot{ display:none; }
  .sidebar-check:checked ~ .app .profile-info{ display:none; }
  .sidebar-check:checked ~ .app .profile-caret{ display:none; }
}

/* ============ Login page (AdminLTE) — dark theme fix ============ */
body.login-page{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(52,211,153,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(126,200,227,0.05), transparent 55%),
    var(--bg) !important;
}
.login-box{ width:370px; max-width:calc(100vw - 32px); }
.login-logo{ margin-bottom:20px; }
.login-logo a{ color:var(--text); display:inline-block; }
.login-logo a img{ max-height:56px; }
.login-box > .card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 48px var(--shadow);
}
.login-card-body{
  background:transparent;
  padding:28px;
  color:var(--text);
}
.login-box-msg{
  color:var(--text-dim) !important;
  font-size:15px;
  margin-bottom:20px;
}
.login-page .input-group{ margin-bottom:16px; }
.login-page .input-group .form-control{ border-radius:9px 0 0 9px; }
.login-page .input-group-append .input-group-text{ border-radius:0 9px 9px 0; }
.login-page form .btn-primary{
  display:flex; width:fit-content; margin:8px auto 0; padding-left:38px; padding-right:38px;
}
.login-page .icheck-primary label,
.login-page .mb-1 a,
.login-page a{ color:var(--text-dim); }
.login-page .mb-1 a:hover,
.login-page a:hover{ color:var(--accent); }

@media (max-width: 480px){
  .login-box{ width:100%; }
  .login-card-body{ padding:22px 18px; }
}

/* ============ Login page — Light mode ============ */
body.login-page:has(.theme-check:checked),
body.login-page.light-mode{
  --bg:            #FFFFFF;
  --bg-panel:      #F8F9FB;
  --bg-panel-alt:  #EFF2F6;
  --line:          #DDE2EA;
  --line-soft:     #E6EAF0;
  --text:          #1B2129;
  --text-dim:      #5B6472;
  --text-faint:    #8B93A2;
  --shadow:        rgba(30,41,59,.10);

  --sig-avail:     #15803D;
  --sig-break:     #B45309;
  --sig-task:      #C2410C;
  --sig-out:       #DC2626;
  --accent:        #0E7C99;
  --accent-ink:    #FFFFFF;

  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(21,128,61,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(14,124,153,0.05), transparent 55%),
    var(--bg) !important;
}
body.login-page:has(.theme-check:checked) .login-box > .card,
body.login-page.light-mode .login-box > .card{
  box-shadow:0 16px 36px rgba(30,41,59,.10);
}


/* ============ Login page — theme toggle ============ */
.login-theme-switch{
  position:fixed; top:18px; right:18px; z-index:200;
}
body.login-page:has(.theme-check:checked) .theme-switch-track,
body.login-page.light-mode .theme-switch-track{ background:var(--bg-panel-alt); }
body.login-page:has(.theme-check:checked) .theme-switch-track .knob,
body.login-page.light-mode .theme-switch-track .knob{ transform:translateX(20px); background:var(--sig-break); }


/* ============ Login page — center Sign In text ============ */
.login-page .btn-primary{ justify-content:center; text-align:center; }

/* ============ Datepicker popup position fix ============ */
.date-wrap{ position:relative; }
.bootstrap-datetimepicker-widget{
  z-index:1060;
  top: 100% !important;
  left: 0 !important;
  margin-top: 6px;
}

/* ============ Login page (AdminLTE) — dark theme fix ============ */
body.login-page{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(52,211,153,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(126,200,227,0.05), transparent 55%),
    var(--bg) !important;
}
.login-box{ width:370px; max-width:calc(100vw - 32px); }
.login-logo{ margin-bottom:20px; }
.login-logo a{ color:var(--text); display:inline-block; }
.login-logo a img{ max-height:56px; }
.login-box > .card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 48px var(--shadow);
}
.login-card-body{
  background:transparent;
  padding:28px;
  color:var(--text);
}
.login-box-msg{
  color:var(--text-dim) !important;
  font-size:15px;
  margin-bottom:20px;
}
.login-page .input-group{ margin-bottom:16px; }
.login-page .input-group .form-control{ border-radius:9px 0 0 9px; }
.login-page .input-group-append .input-group-text{ border-radius:0 9px 9px 0; }
.login-page form .btn-primary{
  display:flex; width:fit-content; margin:8px auto 0; padding-left:38px; padding-right:38px;
}
.login-page .icheck-primary label,
.login-page .mb-1 a,
.login-page a{ color:var(--text-dim); }
.login-page .mb-1 a:hover,
.login-page a:hover{ color:var(--accent); }

@media (max-width: 480px){
  .login-box{ width:100%; }
  .login-card-body{ padding:22px 18px; }
}

/* ============ Login page — Light mode ============ */
body.login-page:has(.theme-check:checked),
body.login-page.light-mode{
  --bg:            #FFFFFF;
  --bg-panel:      #F8F9FB;
  --bg-panel-alt:  #EFF2F6;
  --line:          #DDE2EA;
  --line-soft:     #E6EAF0;
  --text:          #1B2129;
  --text-dim:      #5B6472;
  --text-faint:    #8B93A2;
  --shadow:        rgba(30,41,59,.10);

  --sig-avail:     #15803D;
  --sig-break:     #B45309;
  --sig-task:      #C2410C;
  --sig-out:       #DC2626;
  --accent:        #0E7C99;
  --accent-ink:    #FFFFFF;

  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(21,128,61,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(14,124,153,0.05), transparent 55%),
    var(--bg) !important;
}
body.login-page:has(.theme-check:checked) .login-box > .card,
body.login-page.light-mode .login-box > .card{
  box-shadow:0 16px 36px rgba(30,41,59,.10);
}

/* ============ Login page — theme toggle ============ */
.login-theme-switch{
  position:fixed; top:18px; right:18px; z-index:200;
}
body.login-page:has(.theme-check:checked) .theme-switch-track,
body.login-page.light-mode .theme-switch-track{ background:var(--bg-panel-alt); }
body.login-page:has(.theme-check:checked) .theme-switch-track .knob,
body.login-page.light-mode .theme-switch-track .knob{ transform:translateX(20px); background:var(--sig-break); }

/* ============ Login page — center Sign In text ============ */
.login-page .btn-primary{ justify-content:center; text-align:center; }