/* ================================================================
   DTTASA STRATEGIC ALLOCATION PORTAL
   Design: Obsidian Command Centre — Military Luxury
   ================================================================ */
:root {
  --void:    #0c1109;
  --deep:    #111a0e;
  --base:    #172213;
  --lift:    #1e2e1b;
  --panel:   rgba(255,255,255,0.10);
  --panel2:  rgba(255,255,255,0.23);
  --border:  rgba(255,255,255,0.23);
  --border2: rgba(255,255,255,0.34);
  --gold:    #f0c832;
  --gold2:   #f7d94e;
  --gdim:    rgba(212,175,55,0.12);
  --gglow:   rgba(212,175,55,0.3);
  --green:   #4cd657;
  --grdim:   rgba(67,177,75,0.12);
  --red:     #ff4848;
  --rdim:    rgba(232,64,64,0.12);
  --blue:    #4a9eff;
  --text:    #f2f7ee;
  --t2:      rgba(242,247,238,0.92);
  --t3:      rgba(242,247,238,0.68);
  --mono:    'IBM Plex Mono', monospace;
  --display: 'Cinzel', serif;
  --body:    'DM Sans', sans-serif;
  --sb:      260px;
  --hd:      68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: auto; min-height: 100%; overflow: auto; background: var(--void); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }

/* ================================================================
   SCANLINES + AMBIENT
   ================================================================ */
#root::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99998;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
}
#root::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 15% 0%, rgba(67,177,75,0.04) 0%, transparent 55%),
              radial-gradient(ellipse at 90% 95%, rgba(212,175,55,0.04) 0%, transparent 55%);
}

/* ================================================================
   ROOT SHELL
   ================================================================ */
#root {
  position: relative; min-height: 100dvh; z-index: 50;
  display: flex; flex-direction: column; overflow: visible;
}

/* ================================================================
   HEADER
   ================================================================ */
#hdr {
  height: var(--hd); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(4,8,4,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(36px) saturate(160%); backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  position: sticky; top: 0; z-index: 200;
  animation: hdrSlide 0.6s cubic-bezier(0.16,1,0.3,1) both;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.3);
}
@keyframes hdrSlide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#hdr::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.04) 50%,transparent 100%);background-size:250% 100%;animation:hdrScan 7s linear infinite;}
@keyframes hdrScan{from{background-position:250% 0;}to{background-position:-250% 0;}}

.hdr-brand { display: flex; align-items: center; gap: 10px; }
.hdr-brand-img {
  height: 34px; width: auto; object-fit: contain; cursor: pointer; flex-shrink: 0;
  opacity: 0; animation: logoRevealHdr 0.8s cubic-bezier(0.23,1,0.32,1) 0.3s forwards;
  transition: filter 0.3s, transform 0.3s;
  filter: drop-shadow(0 0 0px rgba(212,175,55,0));
}
.hdr-brand-img:hover { filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); transform: scale(1.04); }
@keyframes logoRevealHdr { to { opacity: 1; } }
.hdr-brand-text { display: flex; flex-direction: column; gap: 2px; }
.hdr-brand-logo {
  font-family: var(--display); font-size: 22px; font-weight: 900; letter-spacing: 8px;
  background: linear-gradient(135deg, var(--green) 0%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hdr-brand-sub { font-size: 11px; letter-spacing: 3.5px; color: var(--gold); opacity: 0.85; text-transform: uppercase; }

.hdr-center {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 16px;
}
.hdr-center > * { min-width: 0; flex-shrink: 1; }
.hdr-center #hdr-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-status {
  display: flex; align-items: center; gap: 7px;
  background: var(--grdim); border: 1px solid rgba(67,177,75,0.25);
  padding: 5px 14px; border-radius: 20px;
  font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: 2px;
}
.pip-live { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pipBlink 2s infinite; }
@keyframes pipBlink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }

.hdr-right { display: flex; align-items: center; gap: 12px; }
.hdr-week-pill {
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(212,175,55,0.3); padding: 6px 14px; border-radius: 8px;
  background: var(--gdim); letter-spacing: 2px;
}
.hdr-clock { font-family: var(--mono); font-size: 13px; color: var(--t2); letter-spacing: 1px; }
.hdr-admin-chip {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--gold);
  background: var(--gdim); border: 1px solid rgba(212,175,55,0.2);
  padding: 5px 12px; border-radius: 6px;
}

/* ================================================================
   BODY LAYOUT
   ================================================================ */
#body { flex: 1; display: block; overflow: visible; position: relative; z-index: 2; }

/* ================================================================
   SIDEBAR
   ================================================================ */
#sidebar {
  position: fixed; top: var(--hd); left: 0; width: 260px; height: calc(100dvh - var(--hd)); z-index: 1000;
  background: rgba(4,8,4,.95); border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* ================================================================
   FULLSCREEN GRID MODE
   ================================================================ */
/* The alloc view panel becomes a true fixed overlay above everything */
#view-alloc.grid-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 600 !important;
  background: var(--void) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: fsIn .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fsIn { from { opacity:0; transform:scale(0.98); } to { opacity:1; transform:scale(1); } }
/* Restore flex-fill for grid in fullscreen mode */
#view-alloc.grid-fullscreen .grid-scroll { flex: 1; height: auto !important; max-height: none !important; }

/* Exit fullscreen button — top-right corner */
#fs-exit-btn {
  display: none;
  position: fixed; top: 14px; right: 18px; z-index: 700;
  align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 14px 6px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--t3);
  cursor: pointer; transition: all .2s; text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#fs-exit-btn:hover { background: var(--rdim); border-color: rgba(255,72,72,.4); color: var(--red); }
body.grid-fs #fs-exit-btn { display: flex; }

/* Lift #root above sidebar + hide sidebar so nothing bleeds through */
body.grid-fs #root    { z-index: 900 !important; background: var(--void); }
body.grid-fs #sidebar { display: none !important; }
body.grid-fs #hdr     { display: none !important; }

/* Fullscreen toggle button in toolbar */
.btn-fs-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--t3);
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.btn-fs-toggle:hover { background: var(--gdim); border-color: rgba(212,175,55,.35); color: var(--gold); }
.btn-fs-toggle i { font-size: 11px; }
body.grid-fs .btn-fs-toggle { background: var(--gdim); border-color: rgba(212,175,55,.4); color: var(--gold); }

.sidebar-inner { padding: 16px 14px 20px; flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar-inner::-webkit-scrollbar { width: 3px; }
.sidebar-inner::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); border-radius: 10px; }

.nav-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--t2);
  text-transform: uppercase; padding: 8px 8px 4px; margin-top: 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--t2);
  cursor: pointer; border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(.16,1,.3,1); letter-spacing: 0.3px;
  position: relative; overflow: hidden;
}
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent);
  transition: width 0.3s cubic-bezier(.16,1,.3,1);
}
.nav-item:hover::before { width: 100%; }
.nav-item:hover { color: var(--text); transform: translateX(3px); }
.nav-item.active { background: var(--gdim); border-color: rgba(212,175,55,0.2); color: var(--gold); }
.nav-item.active::before { width: 100%; }
.nav-item i { width: 16px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-divider { height: 1px; background: var(--border); margin: 6px 0; }
.nav-item.danger { color: rgba(232,64,64,0.75); }
.nav-item.danger:hover { color: var(--red); background: var(--rdim); border-color: rgba(232,64,64,0.15); }

/* Archive sub-list */
.archive-sub {
  margin: 2px 0 4px 28px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.archive-sub.open { max-height: 260px; overflow-y: auto; }
.archive-sub::-webkit-scrollbar { width: 3px; }
.archive-sub::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); }
.archive-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--t2); transition: all 0.2s;
  border: 1px solid transparent;
  margin-bottom: 3px;
}
.archive-entry:hover { background: var(--gdim); border-color: rgba(212,175,55,0.15); color: var(--gold); }
.archive-entry-del { color: rgba(232,64,64,0.4); cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: 0.2s; }
.archive-entry-del:hover { color: var(--red); background: var(--rdim); }

.nav-spacer { flex: 1; }

/* Staggered entrance */
.nav-item { animation: navIn 0.55s cubic-bezier(0.16,1,0.3,1) both; }
.nav-item:nth-child(1){animation-delay:.08s}.nav-item:nth-child(2){animation-delay:.13s}
.nav-item:nth-child(3){animation-delay:.18s}.nav-item:nth-child(4){animation-delay:.23s}
.nav-item:nth-child(5){animation-delay:.28s}.nav-item:nth-child(6){animation-delay:.33s}
.nav-item:nth-child(7){animation-delay:.38s}.nav-item:nth-child(8){animation-delay:.43s}
@keyframes navIn { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }

/* ================================================================
   MAIN WORKSPACE
   ================================================================ */
#workspace {
  display: block; overflow: visible;
}

/* View panels */
.view-panel { display: none; overflow: visible; height: auto; }
.view-panel.active { display: block; animation: panelIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes panelIn { from { opacity:0; transform:translateY(14px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }

/* ================================================================
   ROTA ALLOCATION VIEW
   ================================================================ */
#view-alloc {
  padding: 0;
}

/* Top toolbar */
.alloc-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2); flex-shrink: 0; flex-wrap: wrap;
}
.tab-btn {
  padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--panel); color: var(--t3); font-size: 13px; font-weight: 800;
  letter-spacing: 1.5px; cursor: pointer; transition: all 0.25s cubic-bezier(.16,1,.3,1);
  text-transform: uppercase;
}
.tab-btn.active { background: var(--gdim); border-color: rgba(212,175,55,0.3); color: var(--gold); }
.tab-btn:hover:not(.active) { border-color: var(--border2); color: var(--text); }

.week-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.week-nav-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--t2); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(.16,1,.3,1);
}
.week-nav-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gdim); transform: scale(1.1); box-shadow: 0 4px 14px rgba(212,175,55,0.2); }
.week-nav-btn:active { transform: scale(0.93); }
.week-display { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: 2px; min-width: 120px; text-align: center; }

/* Grid scroll */
.grid-scroll {
  height: 68vh; overflow: auto; position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.3) transparent;
}
.grid-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.grid-scroll::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.25); border-radius: 10px; }

/* Rota table */
.rota-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; min-width: 900px;
}
.rota-tbl thead th {
  position: sticky; top: 0; z-index: 30;
  padding: 14px 10px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--gold);
  background: var(--deep); border-bottom: 1px solid rgba(212,175,55,0.25);
  white-space: nowrap;
}
.rota-tbl thead th.col-member {
  position: sticky; left: 0; top: 0; z-index: 40;
  text-align: left; min-width: 200px; padding-left: 16px;
  border-right: 2px solid rgba(212,175,55,0.25);
}
.rota-tbl tbody td { border-bottom: 1px solid rgba(255,255,255,0.03); padding: 6px; vertical-align: top; }
.rota-tbl tbody td.col-member {
  position: sticky; left: 0; z-index: 10;
  background: var(--base); border-right: 2px solid rgba(212,175,55,0.15);
  padding: 10px 14px; min-width: 220px;
}
.rota-tbl thead th.today-col { color: var(--gold2); border-bottom-color: var(--gold); }
.rota-tbl tbody td.today-col { background: rgba(212,175,55,0.03); }

/* ── User row demarcation ── */
.rota-tbl tbody tr.user-row td {
  border-top: 2px solid rgba(212,175,55,0.18);
}
.rota-tbl tbody tr.user-row-odd td {
  background: rgba(255,255,255,0.012);
}
.rota-tbl tbody tr.user-row-odd td.col-member {
  background: rgba(255,255,255,0.025);
}
.rota-tbl tbody tr.user-row td.col-member {
  border-left: 3px solid rgba(212,175,55,0.45);
  border-top: 2px solid rgba(212,175,55,0.18);
}
.rota-tbl tbody tr.row-sep td {
  height: 5px; padding: 0; border: none;
  background: linear-gradient(90deg, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0.04) 40%, transparent 100%);
}

/* ── Net Owed column ── */
.rota-tbl thead th.col-net-owed {
  min-width: 80px; text-align: center; padding: 8px 10px;
  font-size: 11px; letter-spacing: 1.2px; color: var(--t3);
  border-left: 1px solid rgba(212,175,55,0.18);
}
.rota-tbl tbody td.col-net-owed {
  text-align: center; vertical-align: middle; padding: 6px 8px;
  border-left: 1px solid rgba(212,175,55,0.1);
}
.net-owed-val { font-family: var(--mono); font-size: 11px; font-weight: 800; display: block; text-align: center; }
.net-owed-owed   { color: var(--red); }
.net-owed-credit { color: var(--green); }
.net-owed-ok     { color: var(--gold); }

.member-name-cell { font-weight: 700; color: var(--gold); font-size: 14px; white-space: nowrap; }
.member-role-cell { font-size: 11px; color: var(--t2); margin-top: 2px; }
.member-balance {
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px;
  display: inline-block; margin-top: 5px; letter-spacing: 1px;
}
.balance-ok  { background: var(--grdim); color: var(--green); border: 1px solid rgba(67,177,75,0.3); }
.balance-over { background: var(--rdim); color: var(--red); border: 1px solid rgba(232,64,64,0.3); animation: pulseRed 2s infinite; }
@keyframes pulseRed { 0%{box-shadow:0 0 0 0 rgba(232,64,64,0.4);} 70%{box-shadow:0 0 0 8px rgba(232,64,64,0);} 100%{box-shadow:0 0 0 0 rgba(232,64,64,0);} }
.hours-debt {
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 20px;
  display: inline-block; margin-top: 3px; margin-left: 4px; letter-spacing: 0.8px;
}
.debt-owed { background: var(--rdim); color: var(--red); border: 1px solid rgba(232,64,64,0.3); }
.debt-credit { background: var(--grdim); color: var(--green); border: 1px solid rgba(67,177,75,0.3); }
.debt-clear  { background: rgba(255,255,255,0.04); color: var(--t3); border: 1px solid rgba(255,255,255,0.10); }
.debt-base   { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 20px; display: inline-block; letter-spacing: 0.6px; }
.debt-adj    { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 20px; display: inline-block; letter-spacing: 0.6px; margin-top: 2px; }

/* ── Carry-forward breakdown card ── */
.cf-card {
  margin-top: 7px; border-radius: 8px; padding: 7px 9px;
  animation: cfIn 0.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cfIn { from{opacity:0;transform:translateY(5px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} }
.cf-card-owed   { background: rgba(232,64,64,0.09); border: 1px solid rgba(232,64,64,0.3); }
.cf-card-credit { background: rgba(67,177,75,0.09);  border: 1px solid rgba(67,177,75,0.3);  }
.cf-card-clear  { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
.cf-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.cf-lbl { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--t2); text-transform: uppercase; }
.cf-val { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--text); }
.cf-val-red   { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--red); }
.cf-val-green { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--green); }
.cf-val-gold  { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--gold); }
.cf-val-dim   { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--t3); font-style: italic; }
.cf-sep { height: 1px; background: rgba(255,255,255,0.12); margin: 4px 0; }
.cf-row-total .cf-lbl { color: var(--gold); letter-spacing: 2px; }
.cf-pbar-wrap { height: 3px; background: rgba(255,255,255,0.07); border-radius: 10px; margin: 4px 0; overflow: hidden; }
.cf-pbar { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width 0.9s cubic-bezier(0.16,1,0.3,1); }
.cf-pbar-ok { background: linear-gradient(90deg, var(--green), var(--gold)); }
.cf-hist { margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 4px; }
.cf-hist-toggle {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--t3); cursor: pointer; list-style: none; padding: 2px 0;
  transition: color .2s;
}
.cf-hist-toggle::-webkit-details-marker { display: none; }
.cf-hist-toggle::before { content: '▸ '; }
details.cf-hist[open] .cf-hist-toggle::before { content: '▾ '; }
.cf-hist-toggle:hover { color: var(--gold); }

.probation-badge { background: linear-gradient(135deg,#ff4500,#ff8c00); color:#fff; font-size:11px; font-weight:800; padding:2px 5px; border-radius:3px; margin-left:5px; box-shadow:0 0 6px rgba(255,69,0,0.4); vertical-align:middle; }
@keyframes deptLeadGlow{0%,100%{box-shadow:0 0 8px rgba(240,200,50,.4);}50%{box-shadow:0 0 16px rgba(240,200,50,.75),0 0 24px rgba(240,200,50,.25);}}
.dept-lead-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:#000; background:var(--gold); border-radius:4px; padding:2px 6px; margin-left:6px; letter-spacing:.5px; vertical-align:middle; animation:deptLeadGlow 2.8s cubic-bezier(.16,1,.3,1) infinite; }

/* Allocation cell */
.alloc-cell {
  background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px;
  min-width: 120px; position: relative; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  border-top: 3px solid #333;
  animation: cellIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.alloc-cell:hover:not(.locked) { background: rgba(255,255,255,0.06); transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
@keyframes cellIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.alloc-cell.locked { border-color: rgba(212,175,55,0.4) !important; opacity: 0.85; cursor: not-allowed; }
.cell-lock-icon { position: absolute; top: 5px; right: 6px; color: var(--t3); font-size: 11px; opacity: 0.7; }
/* Published shift — locked (red, non-privileged users) */
.cell-lock-icon.pub-lock { color: var(--red); opacity: 0.75; }
/* Published shift — can override (gold open-lock, SA / Head of HR) */
.cell-lock-icon.override-lock { color: var(--gold); opacity: 0.85; cursor: default; }
.alloc-cell.flash { animation: cellFlash 0.6s cubic-bezier(.16,1,.3,1); }
@keyframes cellFlash { 0%{background:rgba(212,175,55,0);} 40%{background:rgba(212,175,55,0.2);} 100%{background:rgba(0,0,0,0.25);} }
.alloc-cell.leave-locked { cursor: default; }
.alloc-cell.leave-locked:hover { transform: none !important; box-shadow: none !important; background: rgba(0,0,0,0.25) !important; }
.leave-override-btn { position:absolute; bottom:4px; right:4px; background:rgba(255,80,80,0.18); border:1px solid rgba(255,80,80,0.45); color:#ff8080; border-radius:4px; font-size:11px; padding:2px 5px; cursor:pointer; z-index:3; line-height:1.4; }
.leave-override-btn:hover { background:rgba(255,80,80,0.35); color:#fff; }
.leave-badge { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:800; letter-spacing:.5px; padding:3px 6px; border-radius:6px; margin-bottom:2px; }
.leave-lock-icon { position:absolute; top:5px; right:6px; font-size:11px; opacity:0.65; }
.ph-crown { display:block; text-align:center; font-size:12px; margin-top:2px; color:var(--gold); animation: phBob 2s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes phBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} }
.ph-col-wash { background: rgba(212,175,55,0.03) !important; }
.ph-warning-strip { font-size:11px; color:#FF8C00; font-weight:700; display:flex; align-items:center; gap:3px; margin-top:3px; white-space:nowrap; overflow:hidden; }
.ph-clear-strip { font-size:11px; color:var(--green); font-weight:700; display:flex; align-items:center; gap:3px; margin-top:3px; }
/* MISSED SHIFT — calculator finalised: user never clocked in (unattended) */
@keyframes urgentPulse { 0%,100%{opacity:1;} 50%{opacity:0.55;} }
.missed-strip { font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--red); display:flex; align-items:center; gap:3px; margin-top:3px; text-transform:uppercase; animation: urgentPulse 1.8s cubic-bezier(.16,1,.3,1) infinite; }
.missed-col { background: rgba(232,64,64,0.04) !important; }
/* DEBT LOGGED — clocked in/out but with a deficit (late, early, break overrun) */
.debt-strip { font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--gold); display:flex; align-items:center; gap:3px; margin-top:3px; text-transform:uppercase; }
.debt-strip.debt-balanced { color:var(--green); }
.debt-col { background: rgba(240,200,50,0.04) !important; }
/* UNSUBMITTED — past finalizable shift with no activity, awaiting calculator */
.unsubmitted-strip { font-size:11px; font-weight:800; letter-spacing:.6px; color:#FF8C00; display:flex; align-items:center; gap:3px; margin-top:3px; text-transform:uppercase; }
.unsubmitted-col { background: rgba(255,140,0,0.04) !important; }
/* ACTIVE — clocked in, not yet clocked out (live or stale past-midnight shift) */
.active-strip { font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--blue); display:flex; align-items:center; gap:3px; margin-top:3px; text-transform:uppercase; animation: pipBlink 1.8s cubic-bezier(.16,1,.3,1) infinite; }
.active-col { background: rgba(74,158,255,0.04) !important; }
/* Credit badge: hoursOver reduces allocated target */
.balance-credit { background: rgba(76,214,87,0.12); color:var(--green); border: 1px solid rgba(76,214,87,0.3); }
/* Historical week card */
.cf-card-hist { background: rgba(240,200,50,0.06); border: 1px solid rgba(240,200,50,0.22); }

.shift-sel {
  width: 100%; background: transparent; border: none; color: var(--text);
  font-weight: 800; font-size: 13px; cursor: pointer; outline: none;
  margin-bottom: 6px; letter-spacing: 0.5px;
}
.shift-sel option { background: #0e160d; }

.time-row { display: flex; gap: 4px; }
.time-chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,0.05); border-radius: 5px; padding: 5px 4px;
  cursor: pointer; border: 1px solid transparent; transition: all 0.2s; font-size: 12px;
}
.time-chip:hover { border-color: var(--gold); background: var(--gdim); }
.time-chip.locked-time { pointer-events: none; opacity: 0.5; }
.time-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold); }
.time-lbl { font-size: 11px; color: var(--t2); font-weight: 700; letter-spacing: 1px; }

/* Row stagger */
.row-stagger { animation: rowIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.row-stagger:nth-child(1){animation-delay:.05s}.row-stagger:nth-child(2){animation-delay:.09s}
.row-stagger:nth-child(3){animation-delay:.13s}.row-stagger:nth-child(4){animation-delay:.17s}
.row-stagger:nth-child(5){animation-delay:.21s}.row-stagger:nth-child(6){animation-delay:.25s}
.row-stagger:nth-child(7){animation-delay:.29s}.row-stagger:nth-child(8){animation-delay:.33s}
.row-stagger:nth-child(9){animation-delay:.37s}.row-stagger:nth-child(10){animation-delay:.41s}
@keyframes rowIn { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }

/* Action bar */
.action-bar {
  padding: 16px 24px; border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.3); display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap; flex-shrink: 0;
}

/* ================================================================
   LIVE NETWORK VIEW
   ================================================================ */
#view-network {
  overflow-y: auto; padding: 28px 28px 48px;
}
#view-network::-webkit-scrollbar { width: 5px; }
#view-network::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); border-radius: 10px; }

.network-header { margin-bottom: 24px; }
.network-header h2 { font-family: var(--display); font-size: 24px; letter-spacing: 3px; font-weight: 700; }
.network-header p { font-size: 13px; color: var(--t2); letter-spacing: 1px; margin-top: 4px; }

.network-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.net-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  animation: cardIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.net-card:hover { border-color: rgba(212,175,55,0.25); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
@keyframes cardIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.net-card:nth-child(1){animation-delay:.05s}.net-card:nth-child(2){animation-delay:.10s}
.net-card:nth-child(3){animation-delay:.15s}.net-card:nth-child(4){animation-delay:.20s}
.net-card:nth-child(5){animation-delay:.25s}.net-card:nth-child(6){animation-delay:.30s}

.net-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.net-card-title { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--gold); }
.net-online { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pipBlink 2s infinite; }
.net-offline { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.net-metric { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.net-sub { font-size: 12px; color: var(--t2); letter-spacing: 0.5px; }
.net-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 10px; margin: 12px 0 4px; overflow: hidden; }
.net-bar-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--green), var(--gold)); transition: width 1.2s cubic-bezier(0.16,1,0.3,1); width: 0%; }
.net-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.net-list-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.net-list-item:last-child { border-bottom: none; }
.net-list-key { color: var(--t2); }
.net-list-val { font-family: var(--mono); font-weight: 700; color: var(--gold); font-size: 13px; }
.net-list-val.green { color: var(--green); }
.net-list-val.red { color: var(--red); }

.audit-stream {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; margin-top: 16px;
}
.audit-stream-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.audit-stream-header h3 { font-size: 12px; font-weight: 800; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; }
.audit-stream-body { max-height: 320px; overflow-y: auto; }
.audit-stream-body::-webkit-scrollbar { width: 4px; }
.audit-stream-body::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); }
.audit-entry {
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.03);
  display: flex; gap: 14px; align-items: flex-start;
  animation: auditIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
  transition: background 0.2s;
}
.audit-entry:hover { background: rgba(255,255,255,0.02); }
@keyframes auditIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.audit-dot.published { background: var(--green); box-shadow: 0 0 6px var(--green); }
.audit-dot.rejected  { background: var(--red); box-shadow: 0 0 6px var(--red); }
.audit-dot.general   { background: var(--gold); }
.audit-dot.submitted { background: var(--blue); }
.audit-info { flex: 1; }
.audit-action { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
.audit-meta { font-size: 11px; color: var(--t2); margin-top: 2px; letter-spacing: 0.5px; }
.audit-time { font-family: var(--mono); font-size: 11px; color: var(--t2); flex-shrink: 0; margin-top: 2px; }

/* Shift distribution chart */
.shift-dist { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.shift-dist-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 36px; }
.shift-dist-fill { width: 100%; border-radius: 4px; transition: height 1s cubic-bezier(0.16,1,0.3,1); min-height: 4px; }
.shift-dist-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--t2); }
.shift-dist-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  border: none; padding: 12px 24px; border-radius: 50px; font-weight: 800;
  font-size: 12px; letter-spacing: 2px; cursor: pointer; text-transform: uppercase;
  transition: all 0.3s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn::after { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.12); transform:translate(-50%,-50%); transition:width .4s,height .4s; }
.btn:active::after { width:200px; height:200px; }
.btn-gold { background: var(--gold); color: var(--void); box-shadow: 0 6px 20px rgba(212,175,55,0.25); }
.btn-gold:hover { background: var(--gold2); transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(212,175,55,0.4); }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 6px 20px rgba(67,177,75,0.25); }
.btn-green:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(67,177,75,0.4); }
.btn-outline { background: transparent; border: 1px solid var(--border2); color: var(--t2); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: var(--gdim); }
.btn-red { background: rgba(232,64,64,0.15); border: 1px solid rgba(232,64,64,0.4); color: var(--red); }
.btn-red:hover { background: rgba(232,64,64,0.25); }
.btn-ghost { background: var(--panel2); border: 1px solid var(--border); color: var(--t2); }
.btn-ghost:hover { border-color: var(--border2); color: var(--text); }
.btn-sm { padding: 8px 16px; font-size: 11px; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 8px; justify-content: center; }
@media (pointer: coarse) { .btn-icon { width: 44px; height: 44px; } }
.btn-restricted { opacity: 0.28; cursor: not-allowed !important; pointer-events: none; filter: grayscale(0.5); }
.btn-processing { opacity: 0.7; cursor: not-allowed !important; pointer-events: none; }
.spinner-ico { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,0.2); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ================================================================
   VAULT TIME PICKER OVERLAY
   ================================================================ */
#picker-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%);
  z-index: 100000;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s cubic-bezier(.16,1,.3,1);
}
#picker-overlay.show { display: flex; }
#picker-overlay.show.visible { opacity: 1; }
.picker-box {
  width: 380px; background: rgba(6,10,6,.78);
  border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 28px;
  backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 60px rgba(212,175,55,0.15), 0 40px 80px rgba(0,0,0,0.7);
  animation: glassIn .65s cubic-bezier(.16,1,.3,1) both;
  position: relative; overflow: hidden;
}
.picker-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.03) 0%, transparent 60%);
}
@keyframes pickerIn { from{transform:scale(0.82) translateY(20px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
@keyframes popIn   { from{transform:scale(0.85);opacity:0;} to{transform:scale(1);opacity:1;} }
.picker-preview {
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
  border: 1px solid rgba(212,175,55,0.35); border-radius: 12px;
  padding: 16px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 32px; font-weight: 700;
  color: var(--gold); text-align: center; letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(212,175,55,0.4);
  transition: all 0.2s cubic-bezier(.16,1,.3,1);
}
.picker-period { display: flex; gap: 10px; margin-bottom: 16px; }
.period-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border2); background: var(--panel2); color: var(--text); cursor: pointer; font-weight: 800; font-size: 14px; letter-spacing: 1px; transition: all 0.25s cubic-bezier(.16,1,.3,1); }
.period-btn:hover { transform: translateY(-1px); }
.period-btn.am { background: rgba(67,177,75,0.18); color: var(--green); border-color: rgba(67,177,75,0.4); box-shadow: 0 4px 16px rgba(67,177,75,0.15); }
.period-btn.pm { background: rgba(212,175,55,0.18); color: var(--gold); border-color: rgba(212,175,55,0.4); box-shadow: 0 4px 16px rgba(212,175,55,0.15); }
.picker-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
/* Minute grid: 6 columns, scrollable */
.picker-grid-min {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 6px;
  max-height: 210px; overflow-y: auto; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.3) transparent;
}
.picker-grid-min::-webkit-scrollbar { width: 3px; }
.picker-grid-min::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 10px; }
.pick-num {
  padding: 11px 4px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 700;
  color: var(--text); text-align: center; font-family: var(--mono);
  transition: all 0.2s cubic-bezier(.16,1,.3,1);
  user-select: none; -webkit-user-select: none;
}
.pick-num:hover { border-color: rgba(212,175,55,0.5); color: var(--gold); background: var(--gdim); transform: scale(1.06); }
.pick-num:active { transform: scale(0.94); }
.pick-num.selected {
  background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(212,175,55,0.1));
  border-color: var(--gold); color: var(--gold); transform: scale(1.06);
  box-shadow: 0 0 16px rgba(212,175,55,0.35), inset 0 0 8px rgba(212,175,55,0.08);
  animation: pickPulse 0.35s cubic-bezier(.16,1,.3,1);
}
@keyframes pickPulse { 0%{transform:scale(0.88);} 60%{transform:scale(1.12);} 100%{transform:scale(1.06);} }
.picker-back {
  background: transparent; border: none; color: rgba(212,175,55,0.7); cursor: pointer;
  font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 7px;
  margin-bottom: 14px; letter-spacing: 1.5px; padding: 6px 0;
  transition: color 0.2s, transform 0.2s;
}
.picker-back:hover { color: var(--gold); transform: translateX(-3px); }
.picker-footer { display: flex; gap: 10px; margin-top: 20px; }

/* ================================================================
   CONFIRM MODAL (replaces browser confirm)
   ================================================================ */
#confirm-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  z-index: 200000; display: none; align-items: center; justify-content: center;
}
#confirm-modal.show { display: flex; }
.confirm-box {
  width: 420px; background: rgba(6,10,6,.78); border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 36px; text-align: center;
  animation: glassIn .65s cubic-bezier(.16,1,.3,1) both;
  backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.7), 0 0 60px rgba(212,175,55,0.1);
}
@keyframes glassIn{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(6px);}to{opacity:1;transform:none;filter:blur(0);}}
.confirm-icon { font-size: 36px; margin-bottom: 16px; }
.confirm-title { font-family: var(--display); font-size: 18px; letter-spacing: 3px; color: var(--gold); margin-bottom: 10px; }
.confirm-msg { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 28px; }
.confirm-footer { display: flex; gap: 12px; }

/* ================================================================
   AUTH MODAL
   ================================================================ */
#auth-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  z-index: 200001; display: none; align-items: center; justify-content: center;
}
#auth-modal.show { display: flex; }
.auth-box {
  width: 380px; background: rgba(6,10,6,.78); border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 36px; text-align: center;
  animation: glassIn .65s cubic-bezier(.16,1,.3,1) both;
  backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.7), 0 0 60px rgba(212,175,55,0.15);
}

/* ================================================================
   PUBLISH SUCCESS OVERLAY
   ================================================================ */
#publish-success {
  position: fixed; inset: 0; background: rgba(0,0,0,0.96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  z-index: 300000; display: none; align-items: center; justify-content: center;
}
#publish-success.show { display: flex; }
.success-box {
  width: min(600px, 92vw); background: linear-gradient(135deg, #0a0e0a, #0e160d);
  border: 1px solid rgba(212,175,55,0.35); border-radius: 24px; padding: 48px 40px;
  text-align: center; position: relative; overflow: hidden;
  animation: successReveal 0.7s cubic-bezier(0.16,1,0.3,1) both;
  box-shadow: 0 0 80px rgba(212,175,55,0.12), 0 40px 80px rgba(0,0,0,0.6);
}
@keyframes successReveal { from{opacity:0;transform:scale(0.9) translateY(20px);} to{opacity:1;transform:scale(1) translateY(0);} }
.success-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--green), var(--gold), transparent);
  animation: shimmerLine 2s linear infinite;
}
@keyframes shimmerLine { from{background-position:-100% 0;} to{background-position:200% 0;} }
.success-seal {
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
  border: 2px solid rgba(212,175,55,0.4); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; font-size: 32px;
  animation: sealSpin 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}
@keyframes sealSpin { from{transform:scale(0) rotate(-90deg);} to{transform:scale(1) rotate(0);} }
.success-kicker { font-size: 11px; letter-spacing: 4px; color: var(--green); text-transform: uppercase; font-weight: 800; margin-bottom: 10px; }
.success-title { font-family: var(--display); font-size: 24px; font-weight: 900; letter-spacing: 3px; color: var(--gold); margin-bottom: 8px; }
.success-week { font-family: var(--mono); font-size: 16px; color: var(--text); margin-bottom: 20px; letter-spacing: 2px; }
.success-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent); margin: 20px 0; }
.success-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.success-stat { display: flex; flex-direction: column; gap: 4px; }
.success-stat-label { font-size: 11px; letter-spacing: 2px; color: var(--t3); text-transform: uppercase; font-weight: 800; }
.success-stat-val { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--gold); }
.success-message { font-size: 14px; color: var(--t2); line-height: 1.7; margin-bottom: 24px; }
.success-ref { font-family: var(--mono); font-size: 12px; color: var(--t3); letter-spacing: 1px; }

/* ================================================================
   PROCESSING OVERLAY
   ================================================================ */
#processing {
  position: fixed; inset: 0; background: rgba(5,9,5,0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  z-index: 500000; display: none; flex-direction: column; align-items: center; justify-content: center;
}
#processing.show { display: flex; }
.loader-ring {
  width: 72px; height: 72px; margin-bottom: 28px; position: relative;
}
.loader-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(212,175,55,0.1); border-top-color: var(--gold);
  animation: spin 0.9s cubic-bezier(0.4,0,0.2,1) infinite;
}
.loader-ring::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%;
  border: 2px solid transparent; border-bottom-color: var(--green);
  animation: spin 1.8s linear infinite reverse;
}
.proc-text { font-family: var(--display); font-size: 13px; letter-spacing: 4px; color: var(--gold); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; animation: procPulse 1.5s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes procPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.proc-log { font-family: var(--mono); font-size: 11px; color: #444; letter-spacing: 1px; height: 14px; text-transform: uppercase; }

/* ================================================================
   TOAST
   ================================================================ */
#toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(8,12,8,0.98); border: 1px solid var(--gold); border-left: 4px solid var(--gold);
  padding: 13px 22px; border-radius: 8px; display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; z-index: 600000; min-width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), opacity 0.45s;
  opacity: 0; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.error { border-color: var(--red); border-left-color: var(--red); }
#toast i { flex-shrink: 0; font-size: 14px; }
#toast:not(.error) i { color: var(--gold); }
#toast.error i { color: var(--red); }

/* ================================================================
   GLASS INPUT
   ================================================================ */
.g-input {
  width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--border2);
  border-radius: 10px; color: var(--text); padding: 12px 14px; font-size: 13px;
  outline: none; font-family: var(--body);
  transition: border-color 0.25s, box-shadow 0.25s; margin-bottom: 12px;
  text-align: center; letter-spacing: 3px;
}
.g-input:focus { border-color: rgba(212,175,55,0.5); box-shadow: 0 0 0 3px rgba(212,175,55,0.08); }
.g-input::placeholder { letter-spacing: 1px; color: var(--t3); }

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */

/* Fluid modals on ALL screen sizes */
.picker-box  { width: min(380px, 95vw); }
.confirm-box { width: min(420px, 95vw); }
.auth-box    { width: min(380px, 95vw); }

/* Sidebar overlay — global (drawer pattern on all screen sizes) */
#sb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 999; display: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#sb-overlay.show { display: block; }

/* Sidebar open state */
#sidebar.mobile-open { transform: translateX(0) !important; }

/* ---- TABLET / MOBILE ≤ 820px -------- */
@media (max-width: 820px) {
  :root { --hd: 52px; }
}

/* ---- TABLET / MOBILE ≤ 768px ---------------------------------- */
@media (max-width: 768px) {
  :root { --hd: 52px; }

  /* Header — compact */
  #hdr { padding: 0 16px; }
  .hdr-center { display: none; }
  .hdr-week-pill { display: none; }
  .hdr-clock { display: none; }
  .hdr-brand-sub { display: none; }
  .hdr-brand-logo { font-size: 18px; letter-spacing: 5px; }
  .hdr-brand-img { height: 28px; }
  .hdr-admin-chip { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; padding: 4px 8px; }

  /* Toolbar — wrap into rows */
  .alloc-toolbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .tab-btn { padding: 7px 14px; font-size: 11px; letter-spacing: 0.5px; }
  .week-nav { margin-left: 0 !important; width: 100%; justify-content: center; }
  .week-display { font-size: 13px; min-width: 100px; }

  /* Action bar */
  .action-bar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }

  /* Network view */
  #view-network { padding: 14px; }
  .network-grid { grid-template-columns: 1fr; }
  .net-dist-grid { grid-template-columns: 1fr !important; }
  .network-header h2 { font-size: 16px; }

  /* Overlays */
  .success-stats { grid-template-columns: 1fr 1fr; }
  .success-box { padding: 32px 20px; }

  /* Toast */
  #toast { left: 10px; right: 10px; transform: translateY(80px); min-width: unset; width: auto; max-width: none; }
  #toast.show { transform: translateY(0); }
}

/* ---- SMALL PHONES ≤ 480px ------------------------------------ */
@media (max-width: 480px) {
  :root { --hd: 48px; }

  /* Header */
  #hdr { padding: 0 12px; }
  .hdr-brand-logo { font-size: 16px; letter-spacing: 4px; }
  .hdr-admin-chip { display: none; }

  /* Toolbar */
  .alloc-toolbar { padding: 6px 10px; gap: 6px; }
  .tab-btn { font-size: 8px; padding: 6px 10px; flex: 1; text-align: center; }
  .week-nav { gap: 6px; }
  .week-display { font-size: 10px; min-width: 80px; }
  .week-nav-btn { width: 30px; height: 30px; font-size: 11px; }

  /* Grid */
  .grid-scroll { height: 62vh !important; }
  .rota-tbl { min-width: 680px; }
  .rota-tbl thead th { padding: 8px 5px; font-size: 10px; letter-spacing: 1px; }
  .col-member { min-width: 110px !important; padding: 8px 8px !important; }
  .alloc-cell { min-width: 80px; padding: 5px 4px; }
  .shift-sel { font-size: 12px; margin-bottom: 4px; }
  .time-chip { padding: 3px 2px; }
  .time-val { font-size: 10px; }
  .time-lbl { font-size: 8px; }
  .member-name-cell { font-size: 12px; }
  .member-role-cell { font-size: 10px; }
  .member-balance { font-size: 9px; padding: 2px 6px; }
  .hours-debt { font-size: 9px; padding: 2px 5px; }
  .ph-warning-strip, .ph-clear-strip { font-size: 9px; }
  .leave-badge { font-size: 11px; }

  /* Action bar */
  .action-bar { padding: 8px 10px; gap: 6px; }
  .action-bar .btn { font-size: 10px; padding: 7px 10px; }
  #workflow-actions { width: 100%; margin-left: 0 !important; }
  #workflow-actions .btn { flex: 1; justify-content: center; }

  /* Overlays */
  .success-stats { grid-template-columns: 1fr; }
  .success-box { padding: 28px 16px; }
  .confirm-footer { flex-direction: column; }
  .confirm-box { padding: 24px 16px; }
  .picker-box { padding: 20px 14px; }
  .pick-num { padding: 10px 4px; font-size: 14px; }
  .picker-grid { gap: 6px; }

  /* Network */
  .audit-entry { padding: 10px 14px; gap: 10px; }
  .net-metric { font-size: 22px; }
}

#hamburger { display: flex; width: 36px; height: 36px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
#hamburger span { width: 18px; height: 2px; background: var(--t2); border-radius: 2px; transition: all 0.3s; }

/* ================================================================
   TEST MODE BANNER + BODY SHIFT (Super Admin only)
   ================================================================ */
#test-mode-banner {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 999999;
  background: linear-gradient(90deg, rgba(160,0,0,0.97), rgba(220,40,40,0.97));
  border-bottom: 2px solid rgba(255,100,100,0.5);
  align-items: center; justify-content: center; gap: 16px;
  font-size: 11px; font-weight: 900; letter-spacing: 2px; color: #fff; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#test-mode-banner.show { display: flex; animation: testBannerIn 0.45s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes testBannerIn { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
.test-toggle-btn {
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); color: #fff;
  padding: 5px 16px; border-radius: 20px; cursor: pointer;
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px; white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.test-toggle-btn:hover { background: rgba(255,255,255,0.32); transform: scale(1.05); }

/* Push sticky header + sidebar down when test banner is visible */
body.test-mode #hdr { top: 40px !important; }
body.test-mode #sidebar { top: calc(var(--hd) + 40px) !important; height: calc(100dvh - var(--hd) - 40px) !important; }

/* SA sidebar test-mode item colour when active */
.nav-item.test-active { background: rgba(220,40,40,0.12) !important; border-color: rgba(220,40,40,0.3) !important; color: #ff6b6b !important; }
.nav-item.test-active i { color: #ff6b6b !important; }
/* ── LIGHT THEME ── */
[data-theme="light"]{--void:#ffffff;--deep:#f4f6f4;--base:#e8ede8;--lift:#dce4dc;--panel:rgba(4,80,30,0.05);--panel2:rgba(4,80,30,0.09);--border:rgba(4,80,30,0.16);--bord2:rgba(4,80,30,0.26);--gold:#04501e;--gold2:#065a23;--gdim:rgba(4,80,30,0.10);--gglow:rgba(4,80,30,0.22);--gsoft:rgba(4,80,30,0.04);--green:#43b14b;--gndim:rgba(67,177,75,0.12);--gnsoft:rgba(67,177,75,0.05);--red:#c42020;--rdim:rgba(196,32,32,0.10);--text:#000000;--t2:rgba(0,0,0,0.80);--t3:rgba(0,0,0,0.52);}
[data-theme="light"] body{background:#ffffff;}[data-theme="light"] body::before{display:none;}
[data-theme="light"] header{background:rgba(255,255,255,0.96)!important;border-color:rgba(4,80,30,0.14)!important;}
[data-theme="light"] aside,[data-theme="light"] #sidebar{background:rgba(244,246,244,0.98)!important;border-color:rgba(4,80,30,0.12)!important;}
[data-theme="light"] .glass,[data-theme="light"] .rota-card,[data-theme="light"] .shift-card{background:rgba(255,255,255,0.88)!important;border-color:rgba(4,80,30,0.13)!important;}
[data-theme="light"] input.gi,[data-theme="light"] textarea.gi,[data-theme="light"] select.gi{background:rgba(255,255,255,0.85)!important;border-color:rgba(4,80,30,0.20)!important;color:#000!important;}
[data-theme="light"] .btn-green{background:#43b14b;}[data-theme="light"] .btn-gold{background:#04501e;color:#fff;}

/* ── ROTA — extra standard breakpoints ── */
@media(max-width:640px){
  #hdr{padding:0 14px;}
  .hdr-brand span,.hdr-title-text{display:none;}
  .view-panel.active{padding:12px;}
  .modal-box,.picker-box,.cf-modal{max-width:calc(100vw - 20px)!important;padding:20px 14px!important;border-radius:14px;}
  .picker-grid{grid-template-columns:repeat(2,1fr)!important;}
  .balance-row,.stat-row{flex-wrap:wrap;gap:8px;}
  .rota-tabs{gap:4px;}
  .rota-tab{padding:6px 10px;font-size:10px;}
  .fs-modal-inner{max-width:calc(100vw - 20px);padding:20px 14px;}
}
@media(max-width:540px){
  #hdr{padding:0 10px;gap:8px;}
  .hdr-page-pill{display:none;}
  .rota-tab span{display:none;}
  .rota-tab{padding:8px 10px;}
  .net-card{min-width:0;flex:1 1 calc(50% - 6px);}
  .filter-row{flex-wrap:wrap;gap:6px;}
  .filter-row select,.filter-row input{flex:1 1 calc(50% - 6px);}
}
@media(max-width:400px){
  #hdr{padding:0 8px;gap:5px;}
  .hdr-back-btn span,.hdr-brand{display:none;}
  .net-card{flex:1 1 100%;}
  .rota-tbl th,.rota-tbl td{padding:4px 5px;font-size:9px;}
  .filter-row select,.filter-row input{flex:1 1 100%;}
}
/* ── Touch targets + table scroll ──
   Button min-heights are owned by css/responsive.css (centralised, 38px
   default — clears HIG 44pt once padding is added). Per CLAUDE.md
   centralised-shared-CSS rule we don't override here. Just keep the
   header back-button + scroll containers tuned for the rota grid. */
@media(max-width:640px){
  .hdr-back-btn{padding:0 12px;}
  .hdr-back-btn span{display:none;}
  .page-pill{display:none;}
  .rota-scroll,.table-scroll,.dtbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ── Weekly reconcile-to-credit row (Phase D, policy 2026-05-16) ── */
.rec-row{display:none;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.rec-row .rec-preview{font-size:11px;color:var(--t3);line-height:1.4;letter-spacing:.2px;}
.rec-row .rec-btn{font-size:10px;padding:5px 10px;border-color:rgba(240,200,50,.35);color:var(--gold);background:rgba(240,200,50,.06);transition:all .25s;}
.rec-row .rec-btn:hover:not(:disabled){background:rgba(240,200,50,.16);border-color:var(--gold);}
.rec-row .rec-btn:disabled{opacity:.45;cursor:not-allowed;}
.rec-row .rec-btn i{margin-right:5px;font-size:11px;}

/* ════════════════════════════════════════════════════════════════
   Rota sidebar header — restored brand logo block
   ════════════════════════════════════════════════════════════════ */
.rota-sb-hdr{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;
}
.rota-sb-logo{
  height:48px;width:auto;max-width:120px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 16px rgba(212,175,55,.25));
  animation:rotaLogoIn .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rotaLogoIn{
  from{opacity:0;transform:translateY(-6px) scale(.94);}
  to{opacity:1;transform:none;}
}
.rota-sb-brand-text .s-gmw93hf{
  font-family:'Cinzel',serif;font-size:18px;font-weight:700;
  letter-spacing:3px;color:var(--gold);
}