/* ════════════════════════════════════════════════════════
   COLOR THEMES
   ════════════════════════════════════════════════════════ */

/* ── MIDNIGHT ── */
[data-theme="midnight"]{
  --bg-body:#050508;
  --bg-card:#0F1015;
  --bg-sidebar:#080A0F;
  --bg-hover:#1A1C24;
  --bg-muted:#12141A;
  --bg-subtle:#0D0F14;
  --t-base:#E8EAF2;
  --t-muted:#8891A8;
  --t-light:#626D85;
  --t-inverse:#000;
  --border:#1E2130;
  --border-soft:#171929;
  --primary:#4F8EF7;
  --primary-light:#C5D9FF;
  --primary-dark:#2D67D0;
  --primary-soft:#0D1F3C;
  --primary-ring:rgba(79,142,247,.2);
  --link:#60A5FA;
  --link-hover:#93C5FD;
  --line:var(--border);
  --line-2:var(--primary);
  --glass:var(--bg-card);
  --text:var(--t-base);
  --t3:var(--t-muted);
  --b2:var(--border);
}

/* ── BLUE / OCEAN ── */
[data-theme="blue"]{
  --bg-body:#020B18;
  --bg-card:#06172B;
  --bg-sidebar:#03101F;
  --bg-hover:#0E2540;
  --bg-muted:#081A30;
  --bg-subtle:#051428;
  --t-base:#E0EEFF;
  --t-muted:#7BA7CC;
  --t-light:#4E7899;
  --t-inverse:#000;
  --border:#102A47;
  --border-soft:#0C2139;
  --primary:#38BDF8;
  --primary-light:#BAE6FD;
  --primary-dark:#0EA5E9;
  --primary-soft:#082940;
  --primary-ring:rgba(56,189,248,.2);
  --link:#60A5FA;
  --link-hover:#93C5FD;
  --line:var(--border);
  --line-2:var(--primary);
  --glass:var(--bg-card);
  --text:var(--t-base);
  --t3:var(--t-muted);
  --b2:var(--border);
}

/* ── PURPLE / COSMIC ── */
[data-theme="purple"]{
  --bg-body:#0C0614;
  --bg-card:#16102A;
  --bg-sidebar:#100A20;
  --bg-hover:#211840;
  --bg-muted:#1A1432;
  --bg-subtle:#130E24;
  --t-base:#EDE8FF;
  --t-muted:#9B8ED0;
  --t-light:#6A5E9B;
  --t-inverse:#000;
  --border:#2A1E4A;
  --border-soft:#221740;
  --primary:#A855F7;
  --primary-light:#E9D5FF;
  --primary-dark:#7C3AED;
  --primary-soft:#2D1052;
  --primary-ring:rgba(168,85,247,.2);
  --link:#C084FC;
  --link-hover:#D8B4FE;
  --line:var(--border);
  --line-2:var(--primary);
  --glass:var(--bg-card);
  --text:var(--t-base);
  --t3:var(--t-muted);
  --b2:var(--border);
}

/* ── GREEN / FOREST ── */
[data-theme="green"]{
  --bg-body:#030F09;
  --bg-card:#071A0F;
  --bg-sidebar:#050E08;
  --bg-hover:#0D2818;
  --bg-muted:#091509;
  --bg-subtle:#061209;
  --t-base:#DCFCE7;
  --t-muted:#6EBC8F;
  --t-light:#3D7D5A;
  --t-inverse:#000;
  --border:#0E3020;
  --border-soft:#0B2619;
  --primary:#22C55E;
  --primary-light:#BBF7D0;
  --primary-dark:#16A34A;
  --primary-soft:#052E16;
  --primary-ring:rgba(34,197,94,.2);
  --link:#4ADE80;
  --link-hover:#86EFAC;
  --line:var(--border);
  --line-2:var(--primary);
  --glass:var(--bg-card);
  --text:var(--t-base);
  --t3:var(--t-muted);
  --b2:var(--border);
}

/* ── AMBER / GOLDEN ── */
[data-theme="amber"]{
  --bg-body:#0F0900;
  --bg-card:#1A1100;
  --bg-sidebar:#130B00;
  --bg-hover:#2B1C00;
  --bg-muted:#221500;
  --bg-subtle:#1A1000;
  --t-base:#FEF3C7;
  --t-muted:#C4950E;
  --t-light:#8A6509;
  --t-inverse:#000;
  --border:#3A2200;
  --border-soft:#2E1A00;
  --primary:#F59E0B;
  --primary-light:#FDE68A;
  --primary-dark:#D97706;
  --primary-soft:#451A03;
  --primary-ring:rgba(245,158,11,.2);
  --link:#FCD34D;
  --link-hover:#FDE68A;
  --line:var(--border);
  --line-2:var(--primary);
  --glass:var(--bg-card);
  --text:var(--t-base);
  --t3:var(--t-muted);
  --b2:var(--border);
}

/* ── ROSE / RUBY ── */
[data-theme="rose"]{
  --bg-body:#0F0408;
  --bg-card:#1C0B12;
  --bg-sidebar:#14060D;
  --bg-hover:#2D1020;
  --bg-muted:#230E18;
  --bg-subtle:#1A0910;
  --t-base:#FFE4E6;
  --t-muted:#C06080;
  --t-light:#8A3D56;
  --t-inverse:#000;
  --border:#3D1228;
  --border-soft:#320E22;
  --primary:#F43F5E;
  --primary-light:#FDA4AF;
  --primary-dark:#E11D48;
  --primary-soft:#4C0519;
  --primary-ring:rgba(244,63,94,.2);
  --link:#FB7185;
  --link-hover:#FDA4AF;
  --line:var(--border);
  --line-2:var(--primary);
  --glass:var(--bg-card);
  --text:var(--t-base);
  --t3:var(--t-muted);
  --b2:var(--border);
}

/* ════════════════════════════════════════════════════════
   SIDEBAR POSITION TOGGLE
   ════════════════════════════════════════════════════════ */
html[data-sidebar-side="left"] .shell{
  grid-template-columns:280px minmax(0,1fr)!important;
}
html[data-sidebar-side="left"] .shell>.d-sidebar{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  border-left:none!important;
  border-right:1px solid var(--border-soft)!important;
}
html[data-sidebar-side="left"] .shell>.main{
  grid-column:2!important;
  grid-row:1 / span 2!important;
}
html[data-sidebar-side="left"] .d-sidebar .nav-link,
html[data-sidebar-side="left"] .d-sidebar .brand,
html[data-sidebar-side="left"] .d-sidebar .workspace{
  flex-direction:row;
  text-align:left;
}
html[data-sidebar-side="left"] .d-sidebar .nav-label{
  text-align:left;
}

/* ════════════════════════════════════════════════════════
   ENHANCED TABLE STYLES
   ════════════════════════════════════════════════════════ */
.tbl th{
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.025) 100%);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--t-light);
  padding:13px 14px;
  border-bottom:2px solid var(--border);
}
.tbl td{
  padding:12px 14px;
  vertical-align:middle;
}
.duty-session-line{padding:4px 0}
.duty-session-line+.duty-session-line{border-top:1px dashed var(--border-soft)}
.duty-day-detail-row td{background:var(--bg-subtle)}
.duty-day-row{cursor:pointer}
.duty-day-row:hover td{background:var(--bg-hover)}
.tbl tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.014);
}
.tbl tbody tr:hover td{
  background:rgba(255,255,255,.042)!important;
  transition:background .12s ease;
}
.tbl tbody tr:last-child td{
  border-bottom:none;
}

/* ════════════════════════════════════════════════════════
   CARD & NAV VISUAL ENHANCEMENT
   ════════════════════════════════════════════════════════ */
.card{
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.05);
}
.card-head{
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 100%);
}
.nav-link.is-active,.nav-link.active{
  background:linear-gradient(135deg,var(--primary-soft) 0%,rgba(255,255,255,.018) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 28%, transparent);
}
.d-topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.03),var(--bg-card));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ════════════════════════════════════════════════════════
   SETTINGS PANEL
   ════════════════════════════════════════════════════════ */
.settings-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:798;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:fade-in .2s ease;
}
.settings-overlay.open{display:block}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.settings-panel{
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:auto;
  width:min(300px,92vw);
  background:var(--bg-card);
  border-left:1px solid var(--border);
  z-index:799;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-28px 0 56px rgba(0,0,0,.5);
  direction:rtl;
}
html[data-sidebar-side="left"] .settings-panel{
  right:auto;
  left:0;
  border-left:none;
  border-right:1px solid var(--border);
  box-shadow:28px 0 56px rgba(0,0,0,.5);
  transform:translateX(-100%);
}
.settings-panel.open{transform:translateX(0)!important}

.settings-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 16px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}
.settings-panel-title{
  font-size:15px;
  font-weight:800;
  color:var(--t-base);
  letter-spacing:-.01em;
}
.settings-panel-body{
  flex:1;
  overflow-y:auto;
  padding:22px 18px 28px;
  display:grid;
  gap:28px;
  align-content:start;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.settings-section-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--t-light);
  margin-bottom:14px;
}
.theme-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  gap:8px;
}
.theme-swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:10px 6px 8px;
  border:2px solid transparent;
  border-radius:14px;
  background:transparent;
  cursor:pointer;
  transition:border-color .18s,background .18s,transform .12s;
  font:inherit;
  color:var(--t-muted);
}
.theme-swatch:hover{
  background:rgba(255,255,255,.05);
  color:var(--t-base);
  transform:translateY(-1px);
}
.theme-swatch.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary-light);
}
.theme-swatch-dot{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 3px 10px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.04);
  transition:transform .15s ease,box-shadow .15s ease;
}
.theme-swatch:hover .theme-swatch-dot{
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.06);
  transform:scale(1.06);
}
.theme-swatch.active .theme-swatch-dot{
  box-shadow:0 0 0 3px var(--primary-ring);
}
.theme-swatch-label{
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.sidebar-side-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.sidebar-side-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:16px 10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-subtle);
  color:var(--t-muted);
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s,box-shadow .18s;
  font:inherit;
  font-size:12px;
  font-weight:700;
}
.sidebar-side-btn:hover{
  border-color:var(--primary);
  background:rgba(255,255,255,.04);
  color:var(--t-base);
}
.sidebar-side-btn.active{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary-light);
  box-shadow:0 0 0 3px var(--primary-ring);
}