:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --accent:#0ea5e9;
  --accent2:#22c55e;
  --danger:#ef4444;

  --namew:260px;   /* sticky name column */
  --dayw:92px;     /* day column width */
  --daygap:0px;    /* keep columns perfectly aligned */
  --openh:92px;    /* height of open strip area */
  --radius:14px;
}

body.dark{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:#1f2a3d;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* themed scrollbars */
*{scrollbar-width:thin; scrollbar-color: rgba(100,116,139,.55) transparent;}
body.dark *{scrollbar-color: rgba(148,163,184,.55) transparent;}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.35);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
body.dark *::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28)}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
body.dark .topbar{
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.8));
}
.brand{display:flex; align-items:center; gap:10px; min-width:280px}
.brandIcon{
  width:38px;height:38px;border-radius:12px;
  background:rgba(14,165,233,.15);
  display:grid;place-items:center;
}
.brandTitle{font-weight:800; letter-spacing:.3px}
.brandSub{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.topControls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.navGroup{display:flex; align-items:center; gap:8px}
.datePill{
  padding:7px 10px; border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,.65);
  font-weight:600; font-size:13px;
}
body.dark .datePill{background:rgba(15,23,42,.65)}

.iconBtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  color:var(--text);
  display:grid;place-items:center;
  cursor:pointer;
}
body.dark .iconBtn{background:rgba(15,23,42,.7)}
.iconBtn:hover{filter:brightness(.98)}

.btn{
  height:36px; padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(14,165,233,.12);
  color:var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700;
}
.btn.ghost{background:rgba(255,255,255,.6)}
body.dark .btn.ghost{background:rgba(15,23,42,.6)}
.btn:disabled{opacity:.45; cursor:not-allowed}

.segmented{
  display:inline-flex; border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.55);
}
body.dark .segmented{background:rgba(15,23,42,.55)}
.segBtn{
  height:36px; padding:0 12px;
  border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); font-weight:800;
}
.segBtn.active{color:var(--text); background:rgba(14,165,233,.15)}

/* inputs / selects */
.inputWrap{
  height:36px; display:flex; align-items:center; gap:8px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
}
body.dark .inputWrap{background:rgba(15,23,42,.65)}
.inputWrap i{color:var(--muted)}
.input{
  border:0; outline:0; background:transparent; color:var(--text);
  width:190px;
}
.selectWrap{
  position:relative;
  height:36px;
  display:inline-flex; align-items:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
  padding:0 32px 0 34px;
}
body.dark .selectWrap{background:rgba(15,23,42,.65)}
.selectIcon{position:absolute; left:10px; color:var(--muted)}
.selectChevron{position:absolute; right:10px; color:var(--muted); pointer-events:none}
.select{
  height:34px;
  border:0; outline:0;
  background:transparent; color:var(--text);
  appearance:none;
  font-weight:800;
  padding-right:2px;
}
.selectBare{
  height:36px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
  color:var(--text);
  padding:0 10px;
}
body.dark .selectBare{background:rgba(15,23,42,.65)}

/* fatal banner */
.fatal{
  margin:10px 14px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}
.fatalTitle{font-weight:900; display:flex; gap:8px; align-items:center}
.hidden{display:none !important}

/* layout */
.page{
  padding:12px 14px 20px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  min-height: calc(100vh - 62px);
}
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel.grow{min-height:420px}
.panelHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  gap:10px;
}
.panelTitle{font-weight:900; display:flex; align-items:center; gap:10px}
.panelTools{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* open */
.scrollX{overflow:auto}
.openGrid{display:grid; grid-template-columns: var(--namew) 1fr}
.openSpacer{
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(2,6,23,.03), transparent);
}
.openDays{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--dayw);
  gap: var(--daygap);
  padding: 0;
  min-height: var(--openh);
}
.openDay{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-left:0;
  border-top:0;
  border-radius:0;
  background:rgba(2,6,23,.02);
  padding:8px 6px;
  display:flex; flex-direction:column; gap:6px;
}
body.dark .openDay{background:rgba(148,163,184,.06)}
.openDayHead{
  display:flex; flex-direction:column; gap:2px;
  text-align:center;
}
.openDow{font-size:11px; color:var(--muted); font-weight:800}
.openDate{font-size:13px; font-weight:950}
.openStripList{
  margin-top:2px;
  display:flex; flex-direction:column; gap:6px;
  overflow:auto;
  padding-right:2px;
}
.strip{
  height:18px;
  border-radius:999px;
  border:1px solid rgba(14,165,233,.25);
  background:rgba(14,165,233,.12);
  display:flex; align-items:center; justify-content:center;
  padding:0 8px;
  font-size:12px;
  font-weight:900;
  cursor:grab;
  user-select:none;
}
.strip:hover{filter:brightness(.98)}

/* matrix */
.matrixWrap{display:flex; flex-direction:column; height:100%}
.matrixHeader{
  display:grid;
  grid-template-columns: var(--namew) 1fr;
  border-bottom:1px solid var(--border);
}
.headerNameCell{
  padding:10px 12px;
  border-right:1px solid var(--border);
  font-weight:900;
  color:var(--muted);
}
.headerDays{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--dayw);
  gap: var(--daygap);
}
.dayHead{
  padding:10px 6px;
  text-align:center;
  border-right:1px solid var(--border);
}
.dayHead .dow{font-size:11px; font-weight:900; color:var(--muted)}
.dayHead .date{font-size:13px; font-weight:950}
.matrixBodyScroll{overflow:auto; height:100%}
.matrixBody{
  display:grid;
  grid-template-columns: var(--namew) 1fr;
}
.nameCol{
  border-right:1px solid var(--border);
}
.dataCol{
  display:grid;
  grid-auto-flow:row;
}
.rowName{
  height:46px;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(2,6,23,.02), transparent);
  position:sticky; left:0;
  z-index:2;
}
.rowName .n{font-weight:950}
.rowName .s{font-size:11px; color:var(--muted); font-weight:800}
.rowGrid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--dayw);
  border-bottom:1px solid var(--border);
  gap: var(--daygap);
}
.cell{
  height:46px;
  border-right:1px solid var(--border);
  display:grid;
  place-items:center;
  padding:6px;
}
.cell.dropHover{outline:2px dashed rgba(14,165,233,.6); outline-offset:-3px}
.pill{
  width:100%;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(34,197,94,.25);
  background:rgba(34,197,94,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  font-size:12px;
  font-weight:950;
  cursor:grab;
  user-select:none;
}
.pill .mini{font-size:10px; font-weight:900; color:var(--muted)}
.pill:hover{filter:brightness(.98)}

/* details */
.details{padding:12px}
.detailGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.kv{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:rgba(2,6,23,.02);
}
body.dark .kv{background:rgba(148,163,184,.06)}
.kv .k{font-size:11px; font-weight:900; color:var(--muted)}
.kv .v{margin-top:4px; font-weight:950}

/* modal */
.modal{position:fixed; inset:0; z-index:100}
.modalBackdrop{position:absolute; inset:0; background:rgba(2,6,23,.55)}
.modalCard{
  position:relative;
  width:min(980px, calc(100vw - 20px));
  max-height:calc(100vh - 20px);
  overflow:hidden;
  margin:10px auto;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.modalCardSmall{width:min(520px, calc(100vw - 20px))}
.modalHeader{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-weight:950; display:flex; gap:10px; align-items:center}
.modalTabs{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border)}
.tabBtn{
  height:34px; padding:0 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.6);
  cursor:pointer;
  font-weight:900;
  color:var(--muted);
}
body.dark .tabBtn{background:rgba(15,23,42,.6)}
.tabBtn.active{color:var(--text); background:rgba(14,165,233,.15)}
.modalBody{padding:12px; overflow:auto}
.modalFooter{padding:10px 12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px}
.twoCol{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.subTitle{font-weight:950; margin-bottom:8px}
.row{display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap}
.list{display:flex; flex-direction:column; gap:8px}
.listItem{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:rgba(2,6,23,.02);
}
body.dark .listItem{background:rgba(148,163,184,.06)}
.listItem .left{display:flex; flex-direction:column; gap:2px}
.listItem .title{font-weight:950}
.listItem .sub{font-size:11px; color:var(--muted); font-weight:800}
.listItem .actions{display:flex; gap:6px}
.pickList{max-height:50vh}

/* responsive */
@media (max-width: 980px){
  :root{ --namew:220px; --dayw:84px; }
  .input{width:150px}
}
@media (max-width: 720px){
  :root{ --namew:190px; --dayw:78px; }
  .brand{min-width:unset}
  .datePill{display:none}
  .twoCol{grid-template-columns:1fr}
  .panelTools{gap:8px}
  .input{width:140px}
}

/* better dropdown look */
.selectWrap:hover{filter:brightness(.99)}
.selectWrap:has(select:focus){outline:2px solid rgba(14,165,233,.35); outline-offset:2px}
.select{cursor:pointer; min-width:140px}

/* weekend/holiday highlight (accent blue) */
.isWeekend, .isHoliday{ background:rgba(14,165,233,.10) !important; }
body.dark .isWeekend, body.dark .isHoliday{ background:rgba(14,165,233,.14) !important; }


/* select: prevent native blue focus ring, keep theme */
.select:focus{outline:none}
.selectWrap:has(select:focus){
  box-shadow: 0 0 0 3px rgba(14,165,233,.22);
  outline: none;
}
body.dark .selectWrap:has(select:focus){
  box-shadow: 0 0 0 3px rgba(14,165,233,.28);
}
/* try to theme dropdown list (supported in some browsers) */
select option{
  background: var(--card);
  color: var(--text);
}


/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(2,6,23,.88);
  color:var(--text);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:999px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  z-index:9999;
  max-width:min(520px, calc(100vw - 24px));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.dark .toast{ background:rgba(2,6,23,.92); }





.cell.selectedCell{ outline:2px solid rgba(14,165,233,.45); outline-offset:-2px; }


.listRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(2,6,23,.04);
}
body.dark .listRow{ background:rgba(148,163,184,.06); }
.rowLeft{ display:flex; align-items:center; gap:10px; }
.rowRight{ display:flex; align-items:center; gap:8px; }
.iconBtn.small{ width:34px; height:34px; border-radius:12px; }
.pillTag{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  font-weight:950;
  border:1px solid rgba(14,165,233,.25);
  background:rgba(14,165,233,.10);
}


/* Absence pill */
.pill.absence{
  background:rgba(14,165,233,.10);
  border:1px dashed rgba(14,165,233,.35);
}
body.dark .pill.absence{
  background:rgba(14,165,233,.12);
  border:1px dashed rgba(14,165,233,.45);
}
.pill.absence .mini{ display:none; }

/* Toast pastel (like sample) */
.toast{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:9999;
  width:min(760px, calc(100vw - 24px));
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.14);
  border:1px solid rgba(2,6,23,.08);
}
.toast .tIcon{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  border:2px solid rgba(2,6,23,.14);
  background:rgba(255,255,255,.55);
  flex:0 0 auto;
}
.toast .tText{display:flex;flex-direction:column;gap:2px}
.toast .tTitle{font-weight:950;font-size:18px;line-height:1.1}
.toast .tMsg{font-weight:750;color:rgba(2,6,23,.62)}
.toast .tClose{
  margin-left:auto;
  width:34px;height:34px;border-radius:12px;
  border:0;background:transparent;
  color:rgba(2,6,23,.55);
  cursor:pointer;
  display:grid;place-items:center;
}
.toast--success{background:#c9f7d2}
.toast--info{background:#c8f0fb}
.toast--warn{background:#f6e3c7}
.toast--error{background:#f7c7c7}
body.dark .toast{border-color:rgba(148,163,184,.18)}
body.dark .toast--success{background:rgba(34,197,94,.25)}
body.dark .toast--info{background:rgba(14,165,233,.25)}
body.dark .toast--warn{background:rgba(250,204,21,.22)}
body.dark .toast--error{background:rgba(239,68,68,.22)}
body.dark .toast .tMsg{color:rgba(248,250,252,.75)}
body.dark .toast .tClose{color:rgba(248,250,252,.70)}
body.dark .toast .tIcon{background:rgba(2,6,23,.25);border-color:rgba(248,250,252,.18)}

/* Table (settings shortcuts) */
.tableWrap{ overflow:auto; border:1px solid var(--border); border-radius:16px; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.tbl th, .tbl td{ padding:10px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl thead th{ position:sticky; top:0; background:var(--card); z-index:2; text-align:left; font-weight:950; }
.tbl tbody tr:hover{ background:rgba(14,165,233,.06); }
.colorCell{ display:flex; align-items:center; gap:10px; }
.colorDot{ width:16px; height:16px; border-radius:6px; border:1px solid rgba(2,6,23,.15); }
body.dark .colorDot{ border-color: rgba(248,250,252,.18); }

.chip{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(2,6,23,.04);
  color:var(--muted);
  font-weight:800;
}
body.dark .chip{background:rgba(148,163,184,.06)}
.chip input{accent-color: var(--accent);}

/* Confirm modal uses existing modal styling + backdrop */
.modalBackdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.modalCard{ position:relative; }



/* Context menu */
.ctxMenu{
  position:fixed;
  z-index:9998;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:6px;
}
.ctxItem{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}
.ctxItem:hover{ background:rgba(14,165,233,.10); }
.ctxIcon{ width:18px; text-align:center; color:var(--muted); }
.ctxLabel{ flex:1; font-weight:900; }
.ctxHint{ color:var(--muted); font-weight:800; font-size:12px; }
.ctxSep{ height:1px; background:var(--border); margin:6px 6px; border-radius:999px; }

/* Toast & Confirm Modal */

:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --accent:#0ea5e9;
  --accent2:#22c55e;
  --danger:#ef4444;

  --namew:260px;   /* sticky name column */
  --dayw:92px;     /* day column width */
  --daygap:0px;    /* keep columns perfectly aligned */
  --openh:92px;    /* height of open strip area */
  --radius:14px;
}

body.dark{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:#1f2a3d;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* themed scrollbars */
*{scrollbar-width:thin; scrollbar-color: rgba(100,116,139,.55) transparent;}
body.dark *{scrollbar-color: rgba(148,163,184,.55) transparent;}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.35);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
body.dark *::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28)}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
body.dark .topbar{
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.8));
}
.brand{display:flex; align-items:center; gap:10px; min-width:280px}
.brandIcon{
  width:38px;height:38px;border-radius:12px;
  background:rgba(14,165,233,.15);
  display:grid;place-items:center;
}
.brandTitle{font-weight:800; letter-spacing:.3px}
.brandSub{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.topControls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.navGroup{display:flex; align-items:center; gap:8px}
.datePill{
  padding:7px 10px; border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,.65);
  font-weight:600; font-size:13px;
}
body.dark .datePill{background:rgba(15,23,42,.65)}

.iconBtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  color:var(--text);
  display:grid;place-items:center;
  cursor:pointer;
}
body.dark .iconBtn{background:rgba(15,23,42,.7)}
.iconBtn:hover{filter:brightness(.98)}

.btn{
  height:36px; padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(14,165,233,.12);
  color:var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700;
}
.btn.ghost{background:rgba(255,255,255,.6)}
body.dark .btn.ghost{background:rgba(15,23,42,.6)}
.btn:disabled{opacity:.45; cursor:not-allowed}

.segmented{
  display:inline-flex; border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.55);
}
body.dark .segmented{background:rgba(15,23,42,.55)}
.segBtn{
  height:36px; padding:0 12px;
  border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); font-weight:800;
}
.segBtn.active{color:var(--text); background:rgba(14,165,233,.15)}

/* inputs / selects */
.inputWrap{
  height:36px; display:flex; align-items:center; gap:8px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
}
body.dark .inputWrap{background:rgba(15,23,42,.65)}
.inputWrap i{color:var(--muted)}
.input{
  border:0; outline:0; background:transparent; color:var(--text);
  width:190px;
}
.selectWrap{
  position:relative;
  height:36px;
  display:inline-flex; align-items:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
  padding:0 32px 0 34px;
}
body.dark .selectWrap{background:rgba(15,23,42,.65)}
.selectIcon{position:absolute; left:10px; color:var(--muted)}
.selectChevron{position:absolute; right:10px; color:var(--muted); pointer-events:none}
.select{
  height:34px;
  border:0; outline:0;
  background:transparent; color:var(--text);
  appearance:none;
  font-weight:800;
  padding-right:2px;
}
.selectBare{
  height:36px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
  color:var(--text);
  padding:0 10px;
}
body.dark .selectBare{background:rgba(15,23,42,.65)}

/* fatal banner */
.fatal{
  margin:10px 14px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}
.fatalTitle{font-weight:900; display:flex; gap:8px; align-items:center}
.hidden{display:none !important}

/* layout */
.page{
  padding:12px 14px 20px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  min-height: calc(100vh - 62px);
}
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel.grow{min-height:420px}
.panelHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  gap:10px;
}
.panelTitle{font-weight:900; display:flex; align-items:center; gap:10px}
.panelTools{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* open */
.scrollX{overflow:auto}
.openGrid{display:grid; grid-template-columns: var(--namew) 1fr}
.openSpacer{
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(2,6,23,.03), transparent);
}
.openDays{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--dayw);
  gap: var(--daygap);
  padding: 0;
  min-height: var(--openh);
}
.openDay{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-left:0;
  border-top:0;
  border-radius:0;
  background:rgba(2,6,23,.02);
  padding:8px 6px;
  display:flex; flex-direction:column; gap:6px;
}
body.dark .openDay{background:rgba(148,163,184,.06)}
.openDayHead{
  display:flex; flex-direction:column; gap:2px;
  text-align:center;
}
.openDow{font-size:11px; color:var(--muted); font-weight:800}
.openDate{font-size:13px; font-weight:950}
.openStripList{
  margin-top:2px;
  display:flex; flex-direction:column; gap:6px;
  overflow:auto;
  padding-right:2px;
}
.strip{
  height:18px;
  border-radius:999px;
  border:1px solid rgba(14,165,233,.25);
  background:rgba(14,165,233,.12);
  display:flex; align-items:center; justify-content:center;
  padding:0 8px;
  font-size:12px;
  font-weight:900;
  cursor:grab;
  user-select:none;
}
.strip:hover{filter:brightness(.98)}

/* matrix */
.matrixWrap{display:flex; flex-direction:column; height:100%}
.matrixHeader{
  display:grid;
  grid-template-columns: var(--namew) 1fr;
  border-bottom:1px solid var(--border);
}
.headerNameCell{
  padding:10px 12px;
  border-right:1px solid var(--border);
  font-weight:900;
  color:var(--muted);
}
.headerDays{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--dayw);
  gap: var(--daygap);
}
.dayHead{
  padding:10px 6px;
  text-align:center;
  border-right:1px solid var(--border);
}
.dayHead .dow{font-size:11px; font-weight:900; color:var(--muted)}
.dayHead .date{font-size:13px; font-weight:950}
.matrixBodyScroll{overflow:auto; height:100%}
.matrixBody{
  display:grid;
  grid-template-columns: var(--namew) 1fr;
}
.nameCol{
  border-right:1px solid var(--border);
}
.dataCol{
  display:grid;
  grid-auto-flow:row;
}
.rowName{
  height:46px;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(2,6,23,.02), transparent);
  position:sticky; left:0;
  z-index:2;
}
.rowName .n{font-weight:950}
.rowName .s{font-size:11px; color:var(--muted); font-weight:800}
.rowGrid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--dayw);
  border-bottom:1px solid var(--border);
  gap: var(--daygap);
}
.cell{
  height:46px;
  border-right:1px solid var(--border);
  display:grid;
  place-items:center;
  padding:6px;
}
.cell.dropHover{outline:2px dashed rgba(14,165,233,.6); outline-offset:-3px}
.pill{
  width:100%;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(34,197,94,.25);
  background:rgba(34,197,94,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  font-size:12px;
  font-weight:950;
  cursor:grab;
  user-select:none;
}
.pill .mini{font-size:10px; font-weight:900; color:var(--muted)}
.pill:hover{filter:brightness(.98)}

/* details */
.details{padding:12px}
.detailGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.kv{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:rgba(2,6,23,.02);
}
body.dark .kv{background:rgba(148,163,184,.06)}
.kv .k{font-size:11px; font-weight:900; color:var(--muted)}
.kv .v{margin-top:4px; font-weight:950}

/* modal */
.modal{position:fixed; inset:0; z-index:100}
.modalBackdrop{position:absolute; inset:0; background:rgba(2,6,23,.55)}
.modalCard{
  position:relative;
  width:min(980px, calc(100vw - 20px));
  max-height:calc(100vh - 20px);
  overflow:hidden;
  margin:10px auto;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.modalCardSmall{width:min(520px, calc(100vw - 20px))}
.modalHeader{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-weight:950; display:flex; gap:10px; align-items:center}
.modalTabs{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border)}
.tabBtn{
  height:34px; padding:0 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.6);
  cursor:pointer;
  font-weight:900;
  color:var(--muted);
}
body.dark .tabBtn{background:rgba(15,23,42,.6)}
.tabBtn.active{color:var(--text); background:rgba(14,165,233,.15)}
.modalBody{padding:12px; overflow:auto}
.modalFooter{padding:10px 12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px}
.twoCol{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.subTitle{font-weight:950; margin-bottom:8px}
.row{display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap}
.list{display:flex; flex-direction:column; gap:8px}
.listItem{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:rgba(2,6,23,.02);
}
body.dark .listItem{background:rgba(148,163,184,.06)}
.listItem .left{display:flex; flex-direction:column; gap:2px}
.listItem .title{font-weight:950}
.listItem .sub{font-size:11px; color:var(--muted); font-weight:800}
.listItem .actions{display:flex; gap:6px}
.pickList{max-height:50vh}

/* responsive */
@media (max-width: 980px){
  :root{ --namew:220px; --dayw:84px; }
  .input{width:150px}
}
@media (max-width: 720px){
  :root{ --namew:190px; --dayw:78px; }
  .brand{min-width:unset}
  .datePill{display:none}
  .twoCol{grid-template-columns:1fr}
  .panelTools{gap:8px}
  .input{width:140px}
}

/* better dropdown look */
.selectWrap:hover{filter:brightness(.99)}
.selectWrap:has(select:focus){outline:2px solid rgba(14,165,233,.35); outline-offset:2px}
.select{cursor:pointer; min-width:140px}

/* weekend/holiday highlight (accent blue) */
.isWeekend, .isHoliday{ background:rgba(14,165,233,.10) !important; }
body.dark .isWeekend, body.dark .isHoliday{ background:rgba(14,165,233,.14) !important; }


/* select: prevent native blue focus ring, keep theme */
.select:focus{outline:none}
.selectWrap:has(select:focus){
  box-shadow: 0 0 0 3px rgba(14,165,233,.22);
  outline: none;
}
body.dark .selectWrap:has(select:focus){
  box-shadow: 0 0 0 3px rgba(14,165,233,.28);
}
/* try to theme dropdown list (supported in some browsers) */
select option{
  background: var(--card);
  color: var(--text);
}


/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(2,6,23,.88);
  color:var(--text);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:999px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  z-index:9999;
  max-width:min(520px, calc(100vw - 24px));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.dark .toast{ background:rgba(2,6,23,.92); }





.cell.selectedCell{ outline:2px solid rgba(14,165,233,.45); outline-offset:-2px; }


.listRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(2,6,23,.04);
}
body.dark .listRow{ background:rgba(148,163,184,.06); }
.rowLeft{ display:flex; align-items:center; gap:10px; }
.rowRight{ display:flex; align-items:center; gap:8px; }
.iconBtn.small{ width:34px; height:34px; border-radius:12px; }
.pillTag{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  font-weight:950;
  border:1px solid rgba(14,165,233,.25);
  background:rgba(14,165,233,.10);
}


/* Absence pill */
.pill.absence{
  background:rgba(14,165,233,.10);
  border:1px dashed rgba(14,165,233,.35);
}
body.dark .pill.absence{
  background:rgba(14,165,233,.12);
  border:1px dashed rgba(14,165,233,.45);
}
.pill.absence .mini{ display:none; }

/* Toast pastel (like sample) */
.toast{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:9999;
  width:min(760px, calc(100vw - 24px));
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.14);
  border:1px solid rgba(2,6,23,.08);
}
.toast .tIcon{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  border:2px solid rgba(2,6,23,.14);
  background:rgba(255,255,255,.55);
  flex:0 0 auto;
}
.toast .tText{display:flex;flex-direction:column;gap:2px}
.toast .tTitle{font-weight:950;font-size:18px;line-height:1.1}
.toast .tMsg{font-weight:750;color:rgba(2,6,23,.62)}
.toast .tClose{
  margin-left:auto;
  width:34px;height:34px;border-radius:12px;
  border:0;background:transparent;
  color:rgba(2,6,23,.55);
  cursor:pointer;
  display:grid;place-items:center;
}
.toast--success{background:#c9f7d2}
.toast--info{background:#c8f0fb}
.toast--warn{background:#f6e3c7}
.toast--error{background:#f7c7c7}
body.dark .toast{border-color:rgba(148,163,184,.18)}
body.dark .toast--success{background:rgba(34,197,94,.25)}
body.dark .toast--info{background:rgba(14,165,233,.25)}
body.dark .toast--warn{background:rgba(250,204,21,.22)}
body.dark .toast--error{background:rgba(239,68,68,.22)}
body.dark .toast .tMsg{color:rgba(248,250,252,.75)}
body.dark .toast .tClose{color:rgba(248,250,252,.70)}
body.dark .toast .tIcon{background:rgba(2,6,23,.25);border-color:rgba(248,250,252,.18)}

/* Table (settings shortcuts) */
.tableWrap{ overflow:auto; border:1px solid var(--border); border-radius:16px; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.tbl th, .tbl td{ padding:10px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl thead th{ position:sticky; top:0; background:var(--card); z-index:2; text-align:left; font-weight:950; }
.tbl tbody tr:hover{ background:rgba(14,165,233,.06); }
.colorCell{ display:flex; align-items:center; gap:10px; }
.colorDot{ width:16px; height:16px; border-radius:6px; border:1px solid rgba(2,6,23,.15); }
body.dark .colorDot{ border-color: rgba(248,250,252,.18); }

.chip{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(2,6,23,.04);
  color:var(--muted);
  font-weight:800;
}
body.dark .chip{background:rgba(148,163,184,.06)}
.chip input{accent-color: var(--accent);}

/* Confirm modal uses existing modal styling + backdrop */
.modalBackdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.modalCard{ position:relative; }



/* Context menu */
.ctxMenu{
  position:fixed;
  z-index:9998;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:6px;
}
.ctxItem{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}
.ctxItem:hover{ background:rgba(14,165,233,.10); }
.ctxIcon{ width:18px; text-align:center; color:var(--muted); }
.ctxLabel{ flex:1; font-weight:900; }
.ctxHint{ color:var(--muted); font-weight:800; font-size:12px; }
.ctxSep{ height:1px; background:var(--border); margin:6px 6px; border-radius:999px; }

/* Toast & Confirm Modal (v38) */
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;width:min(720px,calc(100vw - 24px));border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 18px 60px rgba(0,0,0,.14);border:1px solid rgba(2,6,23,.08);backdrop-filter: blur(8px);}
.toast .tIcon{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;border:2px solid rgba(2,6,23,.12);background:rgba(255,255,255,.55);}
.toast .tText{display:flex;flex-direction:column;gap:2px;}
.toast .tTitle{font-weight:950;font-size:18px;line-height:1.1;}
.toast .tMsg{font-weight:750;color:rgba(2,6,23,.65);}
.toast .tClose{margin-left:auto;width:34px;height:34px;border-radius:12px;border:0;background:transparent;color:rgba(2,6,23,.55);cursor:pointer;display:grid;place-items:center;}
.toast--success{background:#c9f7d2;} .toast--info{background:#c8f0fb;} .toast--warn{background:#f6e3c7;} .toast--error{background:#f7c7c7;}
body.dark .toast{border-color:rgba(148,163,184,.18);} 
body.dark .toast--success{background:rgba(34,197,94,.28);} 
body.dark .toast--info{background:rgba(14,165,233,.28);} 
body.dark .toast--warn{background:rgba(250,204,21,.25);} 
body.dark .toast--error{background:rgba(239,68,68,.25);} 
body.dark .toast .tMsg{color:rgba(248,250,252,.72);} 
body.dark .toast .tClose{color:rgba(248,250,252,.7);} 
body.dark .toast .tIcon{background:rgba(2,6,23,.25);border-color:rgba(248,250,252,.18);}

.uiModal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:14px;}
.uiModalBackdrop{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter: blur(6px);}
.uiModalCard{position:relative;width:min(560px,100%);background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.35);overflow:hidden;}
.uiModalHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--border);}
.uiModalTitle{font-weight:950;}
.uiModalBody{padding:12px;color:var(--text);} 
.uiModalBody p{margin:0;color:var(--muted);font-weight:750;line-height:1.4;}
.uiModalFooter{display:flex;justify-content:flex-end;gap:10px;padding:12px;border-top:1px solid var(--border);}
.btn.danger{background:rgba(239,68,68,.92);border-color:rgba(239,68,68,.92);color:white;}

/* Mobile actions button (opens context menu for selected cell) */
.cellActionBtn{
  margin-left:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.cellActionBtn:hover{ background: rgba(14,165,233,.10); }
.cellActionBtn:active{ transform: translateY(1px); }
@media (max-width: 900px){
  .cellActionBtn{ width:42px; height:42px; border-radius:14px; font-size:18px; }
}

/* Floating plus for mobile cell actions */
.cellQuickPlus{
  position:fixed;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(14,165,233,.92);
  color:white;
  display:grid;
  place-items:center;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  z-index:9997;
}
.cellQuickPlus.hidden{ display:none; }
@media (min-width: 901px){
  /* desktop: keep but smaller */
  .cellQuickPlus{ width:38px; height:38px; border-radius:12px; }
}

/* Plus button inside pick list items to open shortcuts/context menu */
.pickItemRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pickItemMain{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.pickItemPlus{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.pickItemPlus:hover{ background: rgba(14,165,233,.10); }
.pickItemPlus:active{ transform: translateY(1px); }
@media (max-width: 900px){
  .pickItemPlus{ width:40px; height:40px; border-radius:14px; font-size:18px; }
}