:root{
  /* ---- theme accent palette (Developer-settable, see THEMES in
     shared.js / set_user_theme() in schema.sql) — "default" values
     live here; other themes override just these six below. ---- */
  --navy:#1a2744;
  --navy-light:#25365c;
  --teal:#0e7c86;
  --teal-light:#12a0ad;
  --honey:#f5b400;
  --honey-dark:#c98a00;
  --heading-color:var(--navy); /* navy used as readable TEXT (vs. background) — swapped per colour mode below */

  /* ---- colour-mode surface/text tokens (Light/Dark/Inverted, each
     user's own choice, see COLOR_MODES in shared.js /
     set_own_color_mode() in schema.sql) — "light" values live here;
     dark/inverted override these below. Independent of theme. ---- */
  --grey-bg:#f4f5f7;
  --surface:#fff;
  --surface-alt:#f7f8fb;
  --surface-subtle:#f8fafc;
  --text:#1c2230;
  --text-muted:#667085;
  --border:#d9dce3;

  /* ---- fixed semantic colours — status/highlight meanings that stay
     the same regardless of theme or colour mode. ---- */
  --weekend:#e7e7e7;
  --holiday:#d7f4d7;
  --restrict-yellow:#fdf1b8;
  --capacity-red:#f0a3a3;
  --pending:#e6a900;
  --approved:#1f9d55;
  --rejected:#c0392b;
  --study:#2563eb;
  --toil-light:#d9baf0;
  --toil-dark:#6a1b9a;
}

/* ---- themes: accent palette only ---- */
:root[data-theme="magenta"]{
  --teal:#9c1261; --teal-light:#c43a86; --honey:#f5b400; --honey-dark:#c98a00;
}
:root[data-theme="forest"]{
  --navy:#1b3b2e; --navy-light:#234a3a; --teal:#2f855a; --teal-light:#38a169; --honey:#d69e2e; --honey-dark:#b7791f;
}
:root[data-theme="crimson"]{
  --navy:#3a1220; --navy-light:#4a1829; --teal:#b42318; --teal-light:#d4594e; --honey:#f5b400; --honey-dark:#c98a00;
}
:root[data-theme="halloween"]{
  --navy:#1b1420; --navy-light:#2a1f33; --teal:#d2601a; --teal-light:#f0821e; --honey:#7a4fa3; --honey-dark:#5e3a82;
}
:root[data-theme="christmas"]{
  --navy:#7a1621; --navy-light:#9c2430; --teal:#1f6b3a; --teal-light:#2f8f50; --honey:#d4af37; --honey-dark:#a8862b;
}
:root[data-theme="easter"]{
  --navy:#5b4b8a; --navy-light:#6f5da3; --teal:#3fa796; --teal-light:#6fc9ba; --honey:#f4a6c1; --honey-dark:#e58aab;
}

/* ---- theme decorations: a thin cartoon banner strip under the topbar,
   injected as a sibling of #topbar by renderTopbar() in shared.js. Only
   Halloween and Christmas get one for now — hidden (display:none) for
   every other theme, including the plain seasonal-palette-only ones. ---- */
.theme-banner{display:none;height:48px;background-repeat:repeat-x;background-position:left center;border-bottom:3px solid var(--honey);}
:root[data-theme="halloween"] .theme-banner{
  display:block;background-color:var(--navy);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'> <path d='M0,0 Q10,0 10,10' stroke='%23cbd5e1' stroke-width='1' fill='none'/> <path d='M0,0 Q5,8 2,16' stroke='%23cbd5e1' stroke-width='1' fill='none'/> <line x1='0' y1='0' x2='14' y2='14' stroke='%23cbd5e1' stroke-width='1'/> <rect x='42' y='16' width='6' height='9' rx='2' fill='%235a8a3a'/> <path d='M45,16 Q50,12 46,9' stroke='%235a8a3a' stroke-width='2' fill='none' stroke-linecap='round'/> <ellipse cx='45' cy='40' rx='23' ry='18' fill='%23f07f13'/> <path d='M33,25 Q31,40 33,55' stroke='%23c9600a' stroke-width='2' fill='none'/> <path d='M45,23 Q45,40 45,57' stroke='%23c9600a' stroke-width='2' fill='none'/> <path d='M57,25 Q59,40 57,55' stroke='%23c9600a' stroke-width='2' fill='none'/> <polygon points='35,34 42,34 38,42' fill='%23000000'/> <polygon points='48,34 55,34 51,42' fill='%23000000'/> <path d='M34,48 L38,52 L42,48 L46,52 L50,48 L54,52' stroke='%23000000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/> <line x1='150' y1='0' x2='150' y2='18' stroke='%239aa3b5' stroke-width='1.5'/> <circle cx='150' cy='19' r='4' fill='%23000000'/> <circle cx='150' cy='28' r='7' fill='%23000000'/> <circle cx='148' cy='18' r='1' fill='%23fff'/> <circle cx='152' cy='18' r='1' fill='%23fff'/> <polyline points='143,22 132,16 124,10' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='143,27 130,27 120,24' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='143,31 132,36 126,44' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='146,33 138,42 134,50' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='157,22 168,16 176,10' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='157,27 170,27 180,24' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='157,31 168,36 174,44' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='154,33 162,42 166,50' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/> </svg>");
  background-size:160px 48px;
}
:root[data-theme="christmas"] .theme-banner{
  display:block;background-color:var(--navy);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60'> <circle cx='8' cy='15' r='1.5' fill='%23fff'/> <circle cx='85' cy='12' r='1.5' fill='%23fff'/> <circle cx='100' cy='46' r='1.5' fill='%23fff'/> <circle cx='195' cy='15' r='1.5' fill='%23fff'/> <circle cx='207' cy='42' r='1.5' fill='%23fff'/> <g stroke='%23fff' stroke-width='1' stroke-linecap='round'> <line x1='90' y1='24' x2='90' y2='32'/><line x1='86' y1='28' x2='94' y2='28'/><line x1='87' y1='25' x2='93' y2='31'/><line x1='93' y1='25' x2='87' y2='31'/> </g> <polygon points='35,4 36.5,8 41,8 37.5,11 38.8,15.5 35,13 31.2,15.5 32.5,11 29,8 33.5,8' fill='%23d4af37'/> <polygon points='35,10 20,28 50,28' fill='%231f6b3a'/> <polygon points='35,20 16,38 54,38' fill='%232f8f50'/> <polygon points='35,30 12,50 58,50' fill='%231f6b3a'/> <rect x='31' y='50' width='8' height='8' fill='%236b4423'/> <circle cx='28' cy='24' r='2' fill='%23d4af37'/><circle cx='42' cy='24' r='2' fill='%23c0392b'/> <circle cx='35' cy='34' r='2' fill='%23d4af37'/><circle cx='24' cy='44' r='2' fill='%23c0392b'/><circle cx='46' cy='44' r='2' fill='%23d4af37'/> <line x1='128' y1='52' x2='126' y2='60' stroke='%236b4423' stroke-width='3' stroke-linecap='round'/> <line x1='135' y1='54' x2='134' y2='60' stroke='%236b4423' stroke-width='3' stroke-linecap='round'/> <line x1='146' y1='54' x2='147' y2='60' stroke='%236b4423' stroke-width='3' stroke-linecap='round'/> <line x1='152' y1='52' x2='154' y2='60' stroke='%236b4423' stroke-width='3' stroke-linecap='round'/> <circle cx='121' cy='40' r='3' fill='%236b4423'/> <ellipse cx='140' cy='42' rx='20' ry='12' fill='%238a5a2b'/> <circle cx='163' cy='32' r='9' fill='%238a5a2b'/> <polygon points='160,24 156,16 163,22' fill='%238a5a2b'/> <polyline points='161,22 158,12 152,8' stroke='%236b4423' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='158,12 162,6' stroke='%236b4423' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='166,22 169,11 176,7' stroke='%236b4423' stroke-width='2' fill='none' stroke-linecap='round'/> <polyline points='169,11 174,14' stroke='%236b4423' stroke-width='2' fill='none' stroke-linecap='round'/> <ellipse cx='171' cy='35' rx='4' ry='3' fill='%236b4423'/> <circle cx='175' cy='35' r='2.5' fill='%23e63946'/> <circle cx='166' cy='30' r='1.3' fill='%231b1420'/> </svg>");
  background-size:176px 48px;
}

/* ---- colour modes: surfaces/text only — independent of theme ---- */
:root[data-color-mode="dark"]{
  --grey-bg:#12161f; --surface:#1b212e; --surface-alt:#232a3a; --surface-subtle:#1f2531;
  --text:#e6e8ee; --text-muted:#9aa3b5; --border:#333c4f;
  --heading-color:#c9d4f0;
}
:root[data-color-mode="inverted"]{
  --grey-bg:#0d1326; --surface:#162040; --surface-alt:#1c2a52; --surface-subtle:#192646;
  --text:#eef1fa; --text-muted:#aab4d4; --border:#2c3b66;
  --heading-color:var(--honey);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  background:var(--grey-bg);
  color:var(--text);
}
a{color:var(--teal-light);}
.topbar{
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  flex-wrap:wrap;
  gap:10px;
  border-bottom:3px solid var(--honey);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.3px;}
.brand svg{height:28px;width:28px;}
.brand small{display:block;font-weight:400;color:#c9cedd;font-size:11px;}
.nav{display:flex;gap:4px;flex-wrap:wrap;}
.nav a{
  color:#e8e9ee;
  text-decoration:none;
  padding:8px 12px;
  border-radius:6px;
  font-size:14px;
}
.nav a.active,.nav a:hover{background:var(--teal);color:#fff;}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px;color:#dfe2ec;}
.userbox button{
  background:transparent;border:1px solid #566;color:#fff;border-radius:6px;
  padding:6px 10px;cursor:pointer;font-size:12px;
}
.userbox button:hover{background:var(--teal);border-color:var(--teal);}
.mode-select{
  width:auto;background:transparent;border:1px solid #566;color:#fff;border-radius:6px;
  padding:5px 8px;font-size:12px;cursor:pointer;
}
.mode-select:hover{border-color:var(--teal);}
.mode-select option{color:#000;background:#fff;} /* the dropdown list itself always renders in the OS's own popup, not the page's theme */
.wrap{max-width:none;width:100%;margin:0;padding:22px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px;margin-bottom:16px;}
h1,h2,h3{color:var(--heading-color);}
h1{font-size:24px;}
h2{font-size:19px;}
h3{font-size:16px;}
button.primary{
  background:var(--teal);color:#fff;border:none;border-radius:6px;
  padding:11px 20px;font-size:15px;cursor:pointer;font-weight:600;
}
button.primary:hover{background:var(--teal-light);}
button.secondary{
  background:var(--surface);color:var(--heading-color);border:1px solid var(--border);border-radius:6px;
  padding:8px 14px;font-size:14px;cursor:pointer;
}
button.secondary:hover{border-color:var(--navy);}
button.danger{background:var(--rejected);color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;}
button.danger:hover{opacity:.9;}
button:disabled{opacity:.5;cursor:not-allowed;}
input[type=text],input[type=password],input[type=date],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;
  background:var(--surface);color:var(--text);
}
label{display:block;font-size:13px;font-weight:600;color:var(--heading-color);margin:10px 0 4px;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;color:#fff;}
.badge.pending{background:var(--pending);}
.badge.approved{background:var(--approved);}
.badge.rejected{background:var(--rejected);}
.badge.study{background:var(--study);}
.msg{padding:10px 12px;border-radius:6px;font-size:13px;margin:10px 0;}
.msg.error{background:#fdecea;color:#8a1f11;border:1px solid #f3b3ac;}
.msg.ok{background:#e9f8ee;color:#175c31;border:1px solid #a6e3bc;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);}
th{color:var(--heading-color);background:var(--surface-alt);}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.tabs button{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:8px 16px;
  font-size:14px;cursor:pointer;color:var(--heading-color);
}
.tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.year-nav{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:17px;}
.year-nav button{background:none;border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:15px;}

/* ---- calendar grid ---- */
/* table-layout:fixed + width:100% means the grid always fits the
   viewport — columns share the available width instead of forcing a
   horizontal scrollbar, however many days are in the month. */
.cal-grid{border-collapse:collapse;width:100%;table-layout:fixed;}
.cal-grid th,.cal-grid td{border:1px solid var(--border);padding:3px;text-align:center;font-size:12px;vertical-align:middle;overflow:hidden;}
.cal-grid th{background:var(--surface);color:var(--heading-color);font-weight:700;}
.cal-grid td.daynum{background:var(--surface);font-weight:700;color:var(--text-muted);font-size:11px;padding:7px 2px;}
.cal-grid td.daynum .daynum-weekday{display:block;font-weight:400;font-size:9px;color:var(--text-muted);margin-top:1px;}
.cal-grid td.daynum.selected .daynum-weekday{color:#e6f0f1;}
.cal-grid td.weekend{background:var(--weekend);}
.cal-grid td.holiday{background:var(--holiday);}
.cal-grid td.capacity-yellow{background:var(--restrict-yellow);}
.cal-grid td.capacity-red{background:var(--capacity-red);}
.cal-grid td.today{box-shadow:inset 0 0 0 2px var(--navy);}
.cal-grid td.tile.bulk-selected{box-shadow:inset 0 0 0 3px #ffb800;cursor:pointer;}
.cal-grid td.tile.stacked-request{box-shadow:inset 0 0 0 2px #ff8800;}
.cal-grid td.tile.stacked-request.bulk-selected{box-shadow:inset 0 0 0 2px #ff8800, inset 0 0 0 4px #ffb800;}
.cal-grid td.daynum.selected{background-color:var(--teal) !important;color:#fff;outline:2px solid var(--teal-light);outline-offset:-2px;}
.cal-grid td.lanehead{
  width:100px;background:var(--surface);font-weight:700;text-align:left;color:var(--heading-color);
  padding:10px 8px;font-size:13px;vertical-align:top;
}
.cal-grid td.cell{height:36px;padding:1px;}
.cal-grid td.tile{cursor:pointer;font-weight:700;font-size:11px;color:#fff;}
.cal-grid td.tile.pending{background:var(--pending) !important;}
.cal-grid td.tile.approved{background:var(--approved) !important;}
.cal-grid td.tile.rejected{background:var(--rejected) !important;text-decoration:line-through;opacity:.85;}
.cal-grid td.tile.study{background:var(--study) !important;}
.cal-grid td.tile.study.study-pending{opacity:.65;}
.cal-grid td.tile.toil-pending{background:var(--toil-light) !important;color:#3d1259;}
.cal-grid td.tile.toil-approved{background:var(--toil-dark) !important;}
.site-heading{margin:0;}
.site-heading-row{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 20px;
  padding-bottom:8px;border-bottom:2px solid var(--honey);margin-bottom:10px;
}
.month-status-controls{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;}
.banner-warning{
  background:#fff3cd;color:#7a5b00;border:1px solid var(--honey);
  padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:10px;font-weight:600;
}
.banner-warning.banner-rota{color:var(--rejected);border-color:var(--rejected);}
tr.clash-row{background:#fff8e1;}

.overlay{
  position:fixed;inset:0;background:rgba(15,20,35,.55);display:flex;
  align-items:flex-start;justify-content:center;padding:40px 14px;z-index:50;overflow-y:auto;
}
#uiDialogOverlay{z-index:80;} /* always on top of any page-specific modal it was opened from */
.modal{background:var(--surface);border-radius:10px;padding:20px;max-width:460px;width:100%;}
.modal.modal-wide{max-width:640px;}
.modal h3{margin-top:0;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin:8px 0 4px;color:#444;}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.small{font-size:12px;color:var(--text-muted);}
.user-id-blur{filter:blur(4px);user-select:none;transition:filter .15s;display:inline-block;min-width:3em;}
.user-id-blur.revealed{filter:none;user-select:text;}
.eye-toggle{background:none;border:none;cursor:pointer;padding:2px 4px;vertical-align:middle;line-height:1;color:var(--text-muted);border-radius:4px;}
.eye-toggle:hover{color:var(--teal);background:var(--surface-subtle);}
.swatch{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid #999;vertical-align:middle;margin-right:6px;}
.center{text-align:center;}
.login-wrap{max-width:360px;margin:60px auto;padding:0 16px;}
.login-card{background:var(--surface);border-radius:10px;padding:28px;border:1px solid var(--border);border-top:4px solid var(--honey);}
.logo-row{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;}