* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; height:100%; }
button, input, select, textarea, a { touch-action:manipulation; }
button { user-select:none; -webkit-user-select:none; }
input, select, textarea { font-size:16px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline:none; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } }
:root {
  /* Light: warm off-white surfaces, indigo accent, calmer contrast */
  --bg:#F4F5FB; --card:#FFFFFF; --card-2:#F0F2FA; --accent:#5B5BD6; --al:#EEEEFB;
  --accent-dark:#4747C2; --accent-2:#8B7FE0;
  --green:#0E9F6E; --gl:#E8F7F0; --red:#E11D48; --rl:#FEEBEF;
  --yellow:#D97706; --yl:#FFF6E5; --text:#1B1F36; --muted:#6B729E;
  --border:#E5E7F2; --r:16px;
  --sh:0 1px 3px rgba(27,31,54,0.05), 0 4px 14px rgba(27,31,54,0.07);
  --sh-md:0 4px 16px rgba(27,31,54,0.08), 0 2px 4px rgba(27,31,54,0.04);
  --sh-lg:0 12px 32px rgba(27,31,54,0.12), 0 4px 10px rgba(27,31,54,0.05);
  --auth-grad-1:#5B5BD6; --auth-grad-2:#8B7FE0;
  /* Category colours (semantic) */
  --cat-leave-bg:#EFF6FF; --cat-leave-bg-soft:#DBEAFE; --cat-leave-fg:#1E40AF; --cat-leave-bd:#1E40AF;
  --cat-swap-bg:#FFFBEB; --cat-swap-bg-soft:#FEF3C7; --cat-swap-fg:#92400E; --cat-swap-bd:#92400E;
  --cat-avail-bg:#ECFDF5; --cat-avail-bg-soft:#D1FAE5; --cat-avail-fg:#065F46; --cat-avail-bd:#0E9F6E;
  --cat-match-bg:#F5F3FF; --cat-match-bg-soft:#EDE9FE; --cat-match-fg:#5B21B6; --cat-match-bd:#7C3AED;
  --cat-error-bg:#FEE2E2; --cat-error-fg:#991B1B;
  --tr:0.17s cubic-bezier(0.4,0,0.2,1);
}
html.dark {
  /* Dark: deep midnight blue, soft lavender accent, easy on the eyes */
  --bg:#0F1124; --card:#1A1D38; --card-2:#22264A; --accent:#8B85F4; --al:#262A52;
  --accent-dark:#A29DF8; --accent-2:#B5A8F8;
  --green:#34D399; --gl:#0E2F22; --red:#FB7185; --rl:#3B1620;
  --yellow:#FCD34D; --yl:#2B2010; --text:#E8EAFA; --muted:#9097C4;
  --border:#2C3055; --sh:0 1px 2px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.34);
  --sh-md:0 4px 16px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.22);
  --sh-lg:0 12px 32px rgba(0,0,0,0.52), 0 4px 10px rgba(0,0,0,0.28);
  --auth-grad-1:#1A1D52; --auth-grad-2:#2D2470;
  /* Category colours adapted for dark mode — softer, legible on dark surfaces */
  --cat-leave-bg:#1B2A4F; --cat-leave-bg-soft:#1E3A6A; --cat-leave-fg:#93C5FD; --cat-leave-bd:#60A5FA;
  --cat-swap-bg:#3B2410; --cat-swap-bg-soft:#4A2D12; --cat-swap-fg:#FCD34D; --cat-swap-bd:#F59E0B;
  --cat-avail-bg:#10322A; --cat-avail-bg-soft:#15463A; --cat-avail-fg:#6EE7B7; --cat-avail-bd:#34D399;
  --cat-match-bg:#2A1F50; --cat-match-bg-soft:#3A2870; --cat-match-fg:#C4B5FD; --cat-match-bd:#A78BFA;
  --cat-error-bg:#3B1620; --cat-error-fg:#FB7185;
  --tr:0.17s cubic-bezier(0.4,0,0.2,1);
}
html.dark body { background:var(--bg); color:var(--text); }
html.dark input, html.dark select, html.dark textarea { color:var(--text); background:var(--bg); }
html.dark .topbar { background:#1A1745; }
html.dark .modal-close { background:var(--card-2); color:#A0A8D0; }
html.dark .modal-close:hover { background:var(--rl); color:var(--red); }
html.dark .ndot { border-color:var(--card); }
html.dark #auth { background:linear-gradient(150deg, var(--auth-grad-1) 0%, var(--auth-grad-2) 60%, #5B21B6 100%); }
html.dark .auth-card { background:var(--card); }
html.dark .field input, html.dark .field select { background:var(--card-2); color:var(--text); }
html.dark .field input:focus, html.dark .field select:focus { background:var(--card); }
html.dark .tab-row { background:var(--card-2); }
html.dark .tbtn.on { background:var(--card); }
body { font-family:'Nunito',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; min-height:100dvh; max-width:480px; margin:0 auto; overscroll-behavior:none; -webkit-overflow-scrolling:touch; }
@media (min-width:540px) { body { max-width:540px; } }
@media (min-width:768px) { body { max-width:768px; } }

/* AUTH */
#auth { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; background:linear-gradient(150deg, var(--auth-grad-1) 0%, var(--auth-grad-2) 60%, #A855F7 100%); }
.auth-logo { font-size:50px; font-weight:900; color:white; margin-bottom:4px; letter-spacing:-1.5px; }
.auth-logo span { color:#C4B5FD; }
.auth-tag { color:rgba(255,255,255,0.8); font-size:15px; margin-bottom:14px; text-align:center; font-weight:600; line-height:1.5; }
.auth-features { display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap; justify-content:center; }
.auth-feat { background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22); border-radius:100px; padding:5px 14px; font-size:12px; font-weight:800; color:rgba(255,255,255,0.92); white-space:nowrap; letter-spacing:0.2px; }
.auth-card { background:var(--card); border-radius:26px; padding:28px 22px; width:100%; box-shadow:var(--sh-lg); }
.tab-row { display:flex; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:22px; }
.tbtn { flex:1; padding:10px; border:none; background:transparent; color:var(--muted); border-radius:10px; cursor:pointer; font-family:'Nunito',sans-serif; font-size:15px; font-weight:700; }
.tbtn.on { background:var(--card); color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; font-weight:800; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
.field input, .field select { width:100%; background:var(--bg); border:2px solid transparent; border-radius:12px; padding:13px 15px; color:var(--text); font-family:'Nunito',sans-serif; font-size:16px; font-weight:600; outline:none; }
.field input:focus, .field select:focus { border-color:var(--accent); background:var(--card); }
.big-btn { width:100%; padding:16px; border:none; border-radius:14px; background:var(--accent); color:white; font-family:'Nunito',sans-serif; font-size:17px; font-weight:800; cursor:pointer; margin-top:6px; transition:opacity var(--tr), transform var(--tr), background var(--tr); }
.big-btn:hover { opacity:0.92; }
.big-btn:active { opacity:0.85; transform:scale(0.985); }
.big-btn.g { background:var(--green); }
.big-btn:disabled { opacity:0.55; cursor:not-allowed; transform:none; }
.err-box { background:var(--rl); border-radius:12px; padding:12px; font-size:14px; color:var(--red); margin-bottom:14px; font-weight:700; display:none; }
.privacy-link { text-align:center; margin-top:14px; font-size:12px; color:var(--muted); font-weight:600; }
.privacy-link a { color:var(--accent); text-decoration:none; }

/* APP */
#app { display:none; flex-direction:column; min-height:100vh; min-height:100dvh; }
.topbar { background:var(--accent); padding:14px 18px; padding-top:calc(14px + env(safe-area-inset-top,0px)); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  .topbar { background:color-mix(in srgb, var(--accent) 82%, transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); }
  html.dark .topbar { background:color-mix(in srgb, #1A1745 80%, transparent); }
}
.topbar-logo { font-size:22px; font-weight:900; color:white; }
.topbar-logo span { color:#A5B4FC; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-name { color:white; font-size:14px; font-weight:700; text-align:right; }
.topbar-sub { color:rgba(255,255,255,0.7); font-size:11px; text-align:right; }
.ava { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:white; flex-shrink:0; }
.ava.md { width:44px; height:44px; font-size:16px; }
.logout-btn { background:rgba(255,255,255,0.2); border:none; color:white; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:800; cursor:pointer; font-family:'Nunito',sans-serif; }

/* CONTENT */
.content { flex:1; padding:18px 14px calc(92px + env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch; }
.page { display:none; }
.page.on { display:block; }

/* BOTTOM NAV */
.bnav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--card); border-top:1px solid var(--border); display:flex; padding:6px 4px calc(14px + env(safe-area-inset-bottom,0px)); padding-left:calc(4px + env(safe-area-inset-left,0px)); padding-right:calc(4px + env(safe-area-inset-right,0px)); z-index:100; box-shadow:0 -1px 0 var(--border), 0 -8px 24px rgba(14,17,34,0.06); }
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  .bnav { background:color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); }
  html.dark .bnav { background:color-mix(in srgb, var(--card) 82%, transparent); }
}
@media (min-width:540px) { .bnav { max-width:540px; } }
@media (min-width:768px) { .bnav { max-width:768px; } }
.nb { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px; border:none; background:none; cursor:pointer; position:relative; min-width:0; -webkit-tap-highlight-color:transparent; }
.nb-icon-wrap { width:46px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:100px; transition:background var(--tr); position:relative; }
.nb.on .nb-icon-wrap { background:var(--al); }
.nb-icon { font-size:20px; line-height:1; transition:transform var(--tr); display:block; }
.nb.on .nb-icon { transform:scale(1.1); }
.nb-lbl { font-size:9px; font-weight:800; color:var(--muted); font-family:'Nunito',sans-serif; white-space:nowrap; transition:color var(--tr); letter-spacing:0.2px; }
.nb.on .nb-lbl { color:var(--accent); }
.ndot { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; background:var(--red); color:white; font-size:10px; font-weight:900; font-family:'Nunito',sans-serif; border-radius:9px; display:none; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--card); z-index:1; line-height:1; letter-spacing:-0.3px; box-sizing:border-box; pointer-events:none; }

/* DECISION HELPER — same visual family as help-card */
.decision-card { background:var(--al); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:16px; position:relative; overflow:hidden; }
.decision-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.decision-title { font-size:13px; font-weight:900; color:var(--accent); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:12px; }
html.dark .decision-title { color:var(--accent-dark); }
.decision-row { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:12px; margin-bottom:6px; border-left:4px solid var(--border); background:var(--card); }
.decision-row:last-child { margin-bottom:0; }
.decision-row.leave { border-left-color:var(--cat-leave-bd); background:var(--cat-leave-bg); }
.decision-row.swap { border-left-color:var(--cat-swap-bd); background:var(--cat-swap-bg); }
.decision-row.period { border-left-color:var(--cat-avail-bd); background:var(--cat-avail-bg); }
.decision-icon { font-size:20px; flex-shrink:0; line-height:1.2; }
.decision-text { font-size:13px; line-height:1.45; }
.decision-text b { display:block; font-size:14px; font-weight:800; color:var(--text); margin-bottom:2px; }
.decision-text span { color:var(--muted); font-weight:600; }

/* TAB ACCENTS */
.tab-row.vtabs .tbtn.on.leave { color:var(--cat-leave-fg); box-shadow:inset 0 -3px 0 var(--cat-leave-bd), 0 2px 8px rgba(0,0,0,0.1); }
.tab-row.vtabs .tbtn.on.swap { color:var(--cat-swap-fg); box-shadow:inset 0 -3px 0 var(--cat-swap-bd), 0 2px 8px rgba(0,0,0,0.1); }
.tab-row.vtabs .tbtn.on.period { color:var(--cat-avail-fg); box-shadow:inset 0 -3px 0 var(--cat-avail-bd), 0 2px 8px rgba(0,0,0,0.1); }

/* FORM CARD ACCENT TOP-BORDER */
.fcard.accent-leave { border-top:3px solid var(--cat-leave-bd); }
.fcard.accent-swap { border-top:3px solid var(--cat-swap-bd); }
.fcard.accent-period { border-top:3px solid var(--cat-avail-bd); }
.fcard p { font-size:13px; color:var(--text); font-weight:600; margin-bottom:18px; line-height:1.55; opacity:0.78; }

/* EXAMPLES ROW */
.examples-row { background:var(--al); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:12px; font-weight:700; color:var(--text); opacity:0.85; margin-bottom:14px; line-height:1.45; }

/* PERIOD PER-DAY LIST */
.period-list { display:flex; flex-direction:column; gap:6px; }
.period-day { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.period-day.skipped { background:var(--bg); opacity:0.6; }
.period-day-date { font-size:13px; font-weight:700; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.period-day-shift { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:6px 8px; font-family:'Nunito',sans-serif; font-size:16px; font-weight:600; color:var(--text); outline:none; flex-shrink:0; max-width:170px; transform-origin:right center; }
.period-day-shift:disabled { opacity:0.5; }
.period-day-skip { background:transparent; border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; color:var(--muted); cursor:pointer; flex-shrink:0; }
.period-day-skip:hover { background:var(--rl); color:var(--red); border-color:var(--rl); }
.period-day.skipped .period-day-skip { background:var(--gl); color:var(--green); border-color:var(--gl); }

/* PASSWORD EYE TOGGLE */
.pwd-wrap { position:relative; display:block; }
.pwd-wrap input { padding-right:48px !important; width:100%; }
.pwd-toggle {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer;
  padding:8px 10px; font-size:18px; line-height:1; opacity:0.75; border-radius:8px;
  z-index:5;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.pwd-toggle:hover, .pwd-toggle:active { opacity:1; background:rgba(0,0,0,0.06); }
.pwd-toggle.on { opacity:1; }

/* DAYS PILL & EXPAND */
.days-pill { display:inline-block; background:var(--accent); color:white; font-size:11px; font-weight:800; padding:2px 8px; border-radius:8px; margin-left:6px; }
.expand-btn { width:100%; background:var(--bg); border:none; border-radius:10px; padding:8px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; color:var(--accent); cursor:pointer; margin-top:8px; }
.expand-btn:hover { background:var(--al); }
.expanded-list { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.expanded-row { display:flex; align-items:center; justify-content:space-between; background:var(--bg); border-radius:8px; padding:6px 10px; font-size:13px; font-weight:600; color:var(--text); }
.leave-del.small { position:static; padding:3px 6px; font-size:13px; }

/* COMPACT LEAVE ROW */
.leave-row { background:var(--card); border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:var(--sh); position:relative; }
.leave-row-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-right:32px; }
.leave-type { font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px; flex-shrink:0; }
.leave-date { font-size:15px; font-weight:800; color:var(--text); }
.leave-shift { font-size:13px; color:var(--muted); font-weight:600; flex:1; min-width:0; }
.leave-status { flex-shrink:0; }
.leave-row-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; padding-right:32px; }
.meta-pill { display:inline-flex; align-items:center; background:var(--bg); border-radius:8px; padding:4px 9px; font-size:12px; font-weight:700; color:var(--muted); }
.meta-pill.swap { background:var(--cat-swap-bg-soft); color:var(--cat-swap-fg); }
.meta-pill.match { background:var(--gl); color:var(--green); }
.leave-del { position:absolute; top:8px; right:8px; background:transparent; border:none; cursor:pointer; padding:6px; border-radius:8px; font-size:14px; opacity:0.55; transition:opacity 0.15s, background 0.15s; }
.leave-del:hover, .leave-del:active { opacity:1; background:var(--rl); }

/* CARDS */
.stitle { font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; margin:22px 0 10px; }
.stitle:first-child { margin-top:0; }
.card { background:var(--card); border-radius:var(--r); padding:16px; margin-bottom:12px; box-shadow:var(--sh); }
.card-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.card-info { flex:1; min-width:0; }
.card-name { font-size:16px; font-weight:800; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-dept { font-size:13px; color:var(--muted); font-weight:600; }
.cdetail { background:var(--bg); border-radius:10px; padding:12px 14px; margin-bottom:12px; }
.drow { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; margin-bottom:5px; }
.drow:last-child { margin-bottom:0; }
.dicon { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
.cacts { display:flex; gap:8px; }
.abtn { flex:1; padding:12px 10px; border:none; border-radius:10px; font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; cursor:pointer; transition:opacity var(--tr), transform var(--tr); }
.abtn:hover { opacity:0.88; }
.abtn:active { transform:scale(0.96); opacity:0.82; }
.abtn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }
.abtn.a { background:var(--al); color:var(--accent); }
.abtn.g { background:var(--gl); color:var(--green); }
.abtn.r { background:var(--rl); color:var(--red); }
.abtn.y { background:var(--yl); color:var(--yellow); }
.chip { display:inline-flex; align-items:center; padding:5px 12px; border-radius:100px; font-size:12px; font-weight:800; white-space:nowrap; flex-shrink:0; }
.chip.g { background:var(--gl); color:var(--green); }
.chip.y { background:var(--yl); color:var(--yellow); }
.chip.r { background:var(--rl); color:var(--red); }
.chip.p { background:var(--al); color:var(--accent); }
.chip.gr { background:var(--card-2); color:var(--muted); }

/* STATS */
.sgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.scard { background:var(--card); border-radius:var(--r); padding:18px 14px; box-shadow:var(--sh); text-align:center; }
.scard[onclick] { cursor:pointer; transition:transform var(--tr), box-shadow var(--tr); }
.scard[onclick]:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.12); }
.snum { font-size:40px; font-weight:900; line-height:1; margin-bottom:5px; }
.slbl { font-size:13px; font-weight:700; color:var(--muted); }

/* ROSTER CALENDAR */
.roster-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.roster-legend { display:flex; gap:14px; margin-top:12px; font-size:12px; font-weight:700; color:var(--muted); flex-wrap:wrap; }
.roster-legend span { display:flex; align-items:center; gap:5px; }
.roster-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.roster-dot.leave { background:var(--red); }
.roster-dot.match { background:var(--yellow); }
.roster-dot.avail { background:var(--green); }
/* Month view */
.roster-month-cell { cursor:pointer; position:relative; }
.roster-month-cell:hover { background:var(--al); }
.roster-month-badge { position:absolute; top:3px; right:3px; background:var(--accent); color:#fff; font-size:9px; font-weight:900; border-radius:6px; padding:1px 4px; line-height:1.4; }
/* Week view */
.roster-grid-week { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.roster-hdr-row { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.roster-body-row { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.roster-day-hdr { font-size:11px; font-weight:800; color:var(--muted); text-align:center; text-transform:uppercase; padding:6px 4px 3px; }
.roster-day-hdr.today-hdr { color:var(--accent); }
.roster-day-num { font-size:13px; font-weight:900; color:var(--text); display:block; }
.roster-day { background:var(--card-2); border-radius:10px; min-height:80px; padding:6px 5px; }
.roster-day.today { outline:2px solid var(--accent); }
.roster-day.empty-day { opacity:0.45; }
.roster-empty-day { text-align:center; color:var(--muted); font-size:16px; margin-top:10px; }
.roster-item { border-radius:6px; padding:3px 6px; margin-bottom:3px; font-size:11px; font-weight:800; line-height:1.4; cursor:default; overflow:hidden; }
.roster-item.leave { background:var(--rl); color:var(--red); }
.roster-item.avail { background:var(--gl); color:var(--green); }
.roster-item.matched { background:var(--yl); color:var(--yellow); }
.roster-item-shift { display:block; font-size:9px; font-weight:600; opacity:0.8; margin-top:1px; }
body.desktop .roster-day { min-height:100px; padding:8px; }
body.desktop .roster-item { font-size:12px; padding:4px 7px; }
body.desktop .roster-day-hdr { font-size:12px; padding:8px 4px 4px; }

/* AUDIT LOG */
.audit-row { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.audit-row:last-child { border-bottom:none; }
.audit-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.audit-body { flex:1; min-width:0; }
.audit-action { font-size:13px; font-weight:800; color:var(--text); }
.audit-meta { font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }

/* FORM CARD */
.fcard { background:var(--card); border-radius:var(--r); padding:20px; margin-bottom:18px; box-shadow:var(--sh); }
.fcard h3 { font-size:18px; font-weight:800; margin-bottom:6px; }
.fcard p { font-size:13px; color:var(--muted); font-weight:600; margin-bottom:18px; }

/* MATCH CARD */
.mcard { background:var(--card); border-radius:var(--r); padding:16px; margin-bottom:12px; box-shadow:var(--sh); border-left:4px solid var(--green); }
.mcard.pending { border-left-color:var(--yellow); }
.mcard.approved { border-left-color:var(--green); }
.mcard.rejected { border-left-color:var(--red); }
.mrow { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.mperson { text-align:center; flex:1; min-width:0; }
.mpname { font-size:12px; font-weight:800; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpdept { font-size:11px; color:var(--muted); font-weight:600; }
.mprole { font-size:11px; font-weight:800; margin-top:3px; }
.mprole.r { color:var(--red); }
.mprole.g { color:var(--green); }
.mmid { text-align:center; padding:10px 6px; background:var(--bg); border-radius:10px; flex:1.3; }
.mdate { font-size:13px; font-weight:800; }
.mshift { font-size:10px; color:var(--muted); font-weight:600; margin-top:2px; }
.mscore { font-size:11px; font-weight:800; margin-top:5px; padding:3px 8px; border-radius:100px; display:inline-block; }
.mscore.full { background:var(--gl); color:var(--green); }
.mscore.part { background:var(--yl); color:var(--yellow); }
.mstatus { border-radius:10px; padding:10px 14px; font-size:14px; font-weight:800; text-align:center; margin-bottom:10px; }
.mstatus.pending { background:var(--yl); color:var(--yellow); }
.mstatus.approved { background:var(--gl); color:var(--green); }
.mstatus.rejected { background:var(--rl); color:var(--red); }
.mapprove { display:flex; gap:8px; }

/* CHAT */
.citem { background:var(--card); border-radius:var(--r); padding:14px 16px; margin-bottom:10px; box-shadow:var(--sh); display:flex; align-items:center; gap:12px; cursor:pointer; }
.citem:active { transform:scale(0.98); }
.cname { font-size:16px; font-weight:800; }
.cdept { font-size:13px; color:var(--muted); font-weight:600; }
.cinfo { flex:1; }
.cunread { background:var(--red); color:white; border-radius:100px; padding:3px 9px; font-size:13px; font-weight:800; }
.cinput { flex:1; background:var(--card); border:2px solid var(--border); border-radius:100px; padding:12px 16px; font-family:'Nunito',sans-serif; font-size:16px; font-weight:600; outline:none; color:var(--text); }
.cinput:focus { border-color:var(--accent); }
.sbtn { background:var(--accent); border:none; border-radius:50%; width:46px; height:46px; color:white; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.back-btn { background:var(--card); border:none; border-radius:10px; padding:8px 14px; font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; cursor:pointer; box-shadow:var(--sh); margin-bottom:14px; }
.bubble { padding:10px 14px; border-radius:18px; font-size:15px; font-weight:600; line-height:1.4; word-break:break-word; }
.msg { display:flex; gap:8px; align-items:flex-end; max-width:82%; }
.msg.mine { align-self:flex-end; flex-direction:row-reverse; }
.msg.theirs .bubble { background:var(--card); box-shadow:var(--sh); border-bottom-left-radius:4px; }
.msg.mine .bubble { background:var(--accent); color:white; border-bottom-right-radius:4px; }
.mtime { font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }

/* LOADING */
.loading { text-align:center; padding:40px 20px; color:var(--muted); font-size:15px; font-weight:700; }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 12px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* SKELETONS — perceived-perf placeholders matching final layout */
@keyframes skel-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.skel { background:linear-gradient(90deg, var(--card-2) 0%, var(--bg) 50%, var(--card-2) 100%); background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite; border-radius:8px; display:block; }
@media (prefers-reduced-motion:reduce) { .skel { animation:none; background:var(--card-2); } }
.skel-line { height:12px; margin-bottom:8px; }
.skel-line.sm { height:10px; width:60%; }
.skel-line.lg { height:16px; width:80%; }
.skel-card { background:var(--card); border-radius:var(--r); padding:14px 16px; margin-bottom:10px; box-shadow:var(--sh); }
.skel-row { display:flex; gap:12px; align-items:center; }
.skel-circle { width:38px; height:38px; border-radius:50%; flex-shrink:0; }
.skel-grow { flex:1; min-width:0; }

/* EMPTY */
.empty { text-align:center; padding:44px 20px; color:var(--muted); }
.eicon { font-size:52px; margin-bottom:12px; }
.etitle { font-size:17px; font-weight:800; color:var(--text); margin-bottom:6px; }
.esub { font-size:14px; font-weight:600; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; display:none; align-items:flex-end; justify-content:center; }
.modal-overlay.on { display:flex; }
.modal { background:var(--card); border-radius:24px 24px 0 0; padding:28px 22px 40px; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; }
.modal h2 { font-size:20px; font-weight:800; margin-bottom:6px; }
.modal p { font-size:14px; color:var(--muted); font-weight:600; line-height:1.6; margin-bottom:14px; }
.modal-close { float:right; background:var(--bg); border:none; border-radius:50%; width:44px; height:44px; font-size:18px; cursor:pointer; margin-top:-8px; margin-right:-8px; color:var(--muted); transition:background var(--tr), color var(--tr); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--rl); color:var(--red); }

/* TOAST */
.toast { position:fixed; top:76px; left:50%; transform:translateX(-50%); background:var(--card); border-radius:14px; padding:14px 20px; font-size:15px; font-weight:700; z-index:999; display:none; box-shadow:0 8px 30px rgba(0,0,0,0.15); white-space:nowrap; max-width:90vw; }
.toast.success { border-left:4px solid var(--green); }
.toast.error { border-left:4px solid var(--red); }
.toast.info { border-left:4px solid var(--accent); }

/* NOTIF BANNER */
.notif { background:var(--green); color:white; padding:12px 16px; border-radius:var(--r); font-size:14px; font-weight:800; margin-bottom:14px; display:none; }

/* INFO BOX */
.infobox { background:var(--al); border-radius:12px; padding:14px; font-size:13px; color:var(--accent); font-weight:700; margin-bottom:16px; line-height:1.6; }
html.dark .infobox { color:var(--accent-dark); }
.infobox.yellow { background:var(--yl); color:var(--yellow); }

/* NOTIFICATION BELL */
.bell-btn { position:relative; background:rgba(255,255,255,0.2); border:none; border-radius:50%; width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; padding:0; }
.bell-btn:active { transform:scale(0.92); }
.bell-badge { position:absolute; top:-2px; right:-2px; background:var(--red); color:white; font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--accent); }
html.dark .bell-badge { border-color:#312E81; }

/* NOTIFICATION PANEL */
.notif-panel { background:var(--card); border-radius:24px 24px 0 0; padding:22px 18px 30px; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; }
.notif-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.notif-panel-head h2 { font-size:20px; font-weight:800; }
.notif-readall { background:var(--bg); border:none; border-radius:8px; padding:6px 12px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; color:var(--accent); cursor:pointer; }
.notif-item { display:flex; gap:10px; padding:12px; border-radius:12px; margin-bottom:6px; cursor:pointer; transition:background 0.15s; }
.notif-item:hover, .notif-item:active { background:var(--bg); }
.notif-item.unread { background:var(--al); }
.notif-icon { font-size:22px; flex-shrink:0; line-height:1; padding-top:2px; }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:14px; font-weight:800; color:var(--text); margin-bottom:2px; }
.notif-text { font-size:13px; color:var(--muted); font-weight:600; line-height:1.4; }
.notif-time { font-size:11px; color:var(--muted); font-weight:700; margin-top:4px; }
html.dark .notif-item.unread { background:#1F2235; }

/* ACTION INBOX (Smart Home) */
.action-section { margin-bottom:18px; }
.action-card { background:var(--card); border-radius:14px; padding:14px; margin-bottom:10px; box-shadow:var(--sh); border-left:5px solid var(--yellow); }
.action-card.urgent { border-left-color:var(--red); animation:pulse-glow 2.5s ease-in-out infinite; }
.action-card.admin { border-left-color:var(--accent); }
@keyframes pulse-glow { 0%,100%{box-shadow:var(--sh)} 50%{box-shadow:0 4px 20px rgba(220,38,38,0.25)} }
.action-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.action-icon { font-size:24px; line-height:1; }
.action-title { font-size:15px; font-weight:800; flex:1; }
.action-meta { font-size:13px; color:var(--muted); font-weight:700; margin-bottom:10px; line-height:1.4; }
.action-buttons { display:flex; gap:8px; }
.action-buttons .abtn { flex:1; padding:11px; font-size:14px; }

/* NEXT SHIFT CARD */
.next-shift { background:linear-gradient(135deg, var(--accent), #7C3AED); color:white; border-radius:16px; padding:16px; margin-bottom:18px; box-shadow:0 4px 20px rgba(79,70,229,0.25); }
.next-shift-label { font-size:11px; font-weight:800; letter-spacing:1px; opacity:0.85; text-transform:uppercase; margin-bottom:4px; }
.next-shift-date { font-size:22px; font-weight:900; margin-bottom:2px; }
.next-shift-shift { font-size:14px; font-weight:700; opacity:0.9; }
.next-shift-status { display:inline-block; background:rgba(255,255,255,0.22); border-radius:8px; padding:4px 10px; font-size:12px; font-weight:800; margin-top:8px; }

/* CONFIRM MODAL */
.confirm-modal { background:var(--card); border-radius:18px; padding:24px 22px; width:100%; max-width:380px; margin:0 16px; }
.confirm-title { font-size:18px; font-weight:800; margin-bottom:8px; }
.confirm-text { font-size:14px; color:var(--muted); font-weight:600; line-height:1.5; margin-bottom:18px; }
.confirm-actions { display:flex; gap:10px; }
.confirm-actions .abtn { flex:1; padding:12px; font-size:15px; }
.modal-overlay.center { align-items:center; }

/* CONSENT BUTTONS — accept/decline op match-kaart */
.consent-row { display:flex; gap:8px; margin-top:6px; margin-bottom:8px; }
.consent-row .abtn { flex:1; padding:13px 8px; font-size:14px; }
.consent-pending-info { text-align:center; font-size:13px; font-weight:700; color:var(--muted); padding:10px; background:var(--bg); border-radius:10px; margin-bottom:8px; }

/* NOTIFICATION PANEL — extra elementen */
.modal-overlay.top { align-items:flex-start; }
.notif-panel { position:relative; }
.modal-overlay.top .notif-panel { border-radius:0 0 24px 24px; max-height:80vh; }
.notif-panel-actions { display:flex; gap:8px; margin-bottom:14px; }
.notif-readall.danger { color:var(--red); }
.notif-readall:hover { background:var(--al); }
.notif-readall.danger:hover { background:var(--rl); }
.notif-item { position:relative; }
.notif-del { position:absolute; top:8px; right:6px; background:transparent; border:none; cursor:pointer; padding:6px 10px; font-size:14px; color:var(--muted); border-radius:6px; opacity:0; transition:opacity 0.15s, background 0.15s; }
.notif-item:hover .notif-del, .notif-item:active .notif-del { opacity:0.85; }
.notif-del:hover { background:var(--rl); color:var(--red); opacity:1; }

/* AUTH dark-mode toggle (rechtsboven naast taalknoppen) */
.auth-theme-btn { background:rgba(255,255,255,0.2); border:2px solid rgba(255,255,255,0.3); color:white; padding:6px 12px; border-radius:8px; cursor:pointer; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; }

/* OPEN-TAB take/use buttons */
.open-actions { display:flex; gap:8px; margin-top:10px; }
.open-actions .abtn { flex:1; padding:11px; font-size:14px; }

/* MATCHES tabs (Active vs Done) */
.matches-tabs { display:flex; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:14px; }
.matches-tabs button { flex:1; padding:9px; border:none; background:transparent; color:var(--muted); border-radius:10px; cursor:pointer; font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; }
.matches-tabs button.on { background:var(--card); color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.08); }

/* DARK MODE — pastel pills / inline coloured backgrounds netjes */
html.dark [style*="background:#FEF3C7"] { background:rgba(217,119,6,0.18) !important; color:#FCD34D !important; }
html.dark [style*="background:#DBEAFE"] { background:rgba(96,165,250,0.18) !important; color:#93C5FD !important; }
html.dark [style*="background:#D1FAE5"] { background:rgba(16,185,129,0.18) !important; color:#6EE7B7 !important; }
html.dark [style*="background:#FFFBEB"] { background:rgba(217,119,6,0.10) !important; }
html.dark [style*="background:#FEE2E2"] { background:rgba(220,38,38,0.18) !important; color:#FCA5A5 !important; }
html.dark [style*="background:#EFF6FF"] { background:rgba(96,165,250,0.10) !important; }
html.dark [style*="background:#FEF2F2"] { background:rgba(220,38,38,0.10) !important; }
html.dark .meta-pill.match { background:var(--gl); color:var(--green); }
html.dark .leave-type[style*="#FEF3C7"] { background:rgba(217,119,6,0.20) !important; color:#FCD34D !important; }
html.dark .leave-type[style*="#DBEAFE"] { background:rgba(96,165,250,0.20) !important; color:#93C5FD !important; }
html.dark .leave-type[style*="#D1FAE5"] { background:rgba(16,185,129,0.20) !important; color:#6EE7B7 !important; }
html.dark .scard, html.dark .card, html.dark .fcard, html.dark .leave-row, html.dark .mcard, html.dark .citem, html.dark .action-card, html.dark .decision-card, html.dark .period-day, html.dark .modal, html.dark .notif-panel, html.dark .confirm-modal, html.dark .toast, html.dark .auth-card, html.dark .bnav { background:var(--card); color:var(--text); }
html.dark .back-btn, html.dark .cinput, html.dark .msg.theirs .bubble { background:var(--card); color:var(--text); }
html.dark .cdetail { background:var(--card-2); }
html.dark .period-day-shift { background:var(--card-2); color:var(--text); }
html.dark .period-day-skip { background:var(--card-2); color:var(--muted); border-color:var(--border); }
html.dark .expand-btn { background:var(--card-2); color:var(--accent); }
html.dark .expanded-row { background:var(--card-2); color:var(--text); }
html.dark .meta-pill { background:var(--card-2); color:var(--muted); }
html.dark .matches-tabs { background:var(--card-2); }
html.dark .next-shift { background:linear-gradient(135deg, #4F46E5, #6D28D9); }
/* Inline tekstkleuren op pastel-chips: in dark mode lichte tinten gebruiken */
html.dark [style*="color:#991B1B"] { color:#FCA5A5 !important; }
html.dark [style*="color:#065F46"] { color:#6EE7B7 !important; }
html.dark [style*="color:#92400E"] { color:#FCD34D !important; }
html.dark [style*="color:#1E40AF"] { color:#93C5FD !important; }
html.dark [style*="color:#3730A3"] { color:#A5B4FC !important; }
/* Toggle-dot zichtbaar in dark mode */
html.dark #theme-toggle-dot, html.dark #chat-toggle-dot, html.dark #twofa-toggle-dot { background:#E5E7EB !important; }
/* Filterkaart en zijn inputs in dark mode */
html.dark #open-filters-card { background:var(--card); }
html.dark #flt-from, html.dark #flt-to, html.dark #flt-shift, html.dark #flt-dept, html.dark #flt-loc, html.dark #flt-co { background:var(--card-2); color:var(--text); }
/* Aankomende/Done-rij is leave-row-style, fix tekstkleur leesbaar */
html.dark .leave-row-top span, html.dark .leave-row-meta span { color:var(--text); }
html.dark .leave-shift, html.dark .meta-pill { color:var(--muted); }

/* ── Page transitions ── */
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.page.on { animation:pageIn 0.22s cubic-bezier(0.22,0.61,0.36,1); }
@media (prefers-reduced-motion:reduce) { .page.on { animation:none; } }

/* Card lift + smoother press on interactive cards */
.card[onclick], .scard[onclick], .citem, .cal-day, .quick-btn, .leave-row[onclick], .mcard[onclick], .action-card { transition:transform var(--tr), box-shadow var(--tr); will-change:transform; }
.card[onclick]:hover, .scard[onclick]:hover, .citem:hover, .quick-btn:hover { transform:translateY(-1px); box-shadow:var(--sh-md); }
.card[onclick]:active, .scard[onclick]:active, .citem:active, .quick-btn:active, .cal-day:active { transform:translateY(0) scale(0.985); }

/* Realtime pulse on unread / new-item dots — subtle marketplace heartbeat */
@keyframes ndot-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(225,29,72,0.45); } 50% { box-shadow:0 0 0 6px rgba(225,29,72,0); } }
.ndot[style*="display:flex"], .ndot[style*="display: flex"], .ndot:not([style*="display:none"]):not([style*="display: none"]) { animation:ndot-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion:reduce) { .ndot { animation:none !important; } }

/* ── Empty state refinements ── */
.empty { text-align:center; padding:52px 20px; color:var(--muted); }
.eicon { font-size:54px; margin-bottom:16px; opacity:0.75; }
.etitle { font-size:18px; font-weight:800; color:var(--text); margin-bottom:8px; }
.esub { font-size:14px; font-weight:600; line-height:1.6; max-width:260px; margin:0 auto; }

/* ── Section title — tighter rhythm on mobile ── */
.stitle { font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:18px 0 8px; }
.stitle:first-child { margin-top:0; }

/* ── Next-shift card improved ── */
.next-shift { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; border-radius:18px; padding:18px; margin-bottom:18px; box-shadow:var(--sh-md); }

/* ── Logout danger button in profile ── */
.logout-profile-btn { width:100%; padding:15px; border:none; border-radius:14px; background:var(--rl); color:var(--red); font-family:'Nunito',sans-serif; font-size:16px; font-weight:800; cursor:pointer; transition:opacity var(--tr), transform var(--tr); margin-top:0; }
.logout-profile-btn:hover { opacity:0.88; }
.logout-profile-btn:active { opacity:0.78; transform:scale(0.985); }

/* ── Card interactive refinement ── */
.citem { transition:transform var(--tr), box-shadow var(--tr); }
.citem:active { transform:scale(0.985); }

/* ── ADMIN ACTIVITY FEED ── */
.act-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; margin-bottom:6px; background:var(--bg); transition:background var(--tr); }
.act-row:last-child { margin-bottom:0; }
.act-icon { font-size:20px; flex-shrink:0; padding-top:2px; line-height:1; }
.act-body { flex:1; min-width:0; }
.act-title { font-size:13px; font-weight:700; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-sub { font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }
.act-chip { flex-shrink:0; display:flex; align-items:flex-start; padding-top:2px; }
html.dark .act-row { background:var(--card-2); }

/* ── SCORE RING ── */
.score-ring { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── HOME / WELCOME ── slimmer on mobile to feel less dashboard-y */
.welcome-card { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; border-radius:16px; padding:14px 16px 12px; margin-bottom:12px; box-shadow:var(--sh); }
.welcome-hi { font-size:17px; font-weight:900; line-height:1.2; }
.welcome-sub { font-size:13px; font-weight:600; opacity:0.92; margin-top:3px; line-height:1.4; }
.welcome-tip { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 10px; background:rgba(255,255,255,0.18); border-radius:10px; font-size:12px; font-weight:700; line-height:1.4; }

/* ── HOME CALENDAR ── */
.cal-head { display:flex; align-items:center; justify-content:space-between; margin:2px 2px 8px; }
.cal-title { font-size:15px; font-weight:900; color:var(--text); }
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-nav-btn { width:44px; height:44px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:18px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--tr); flex-shrink:0; }
.cal-nav-btn:active { transform:scale(0.92); }
.cal-range { font-size:12px; font-weight:800; color:var(--muted); min-width:118px; text-align:center; }
#dash-calendar { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cal-day { background:var(--card); border-radius:12px; padding:11px 13px; box-shadow:var(--sh); display:flex; align-items:center; gap:12px; cursor:pointer; transition:background var(--tr), transform var(--tr); border-left:3px solid transparent; }
.cal-day:active { transform:scale(0.99); }
.cal-day.today { border-left-color:var(--accent); background:linear-gradient(90deg, rgba(79,70,229,0.06), var(--card) 60%); }
.cal-day.empty { opacity:0.55; }
.cal-day-date { display:flex; flex-direction:column; align-items:center; min-width:42px; flex-shrink:0; }
.cal-day-num { font-size:18px; font-weight:900; color:var(--text); line-height:1; }
.cal-day-dow { font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.cal-day.today .cal-day-num { color:var(--accent); }
.cal-day-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cal-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:6px; line-height:1.3; }
.cal-chip.leave { background:var(--cat-error-bg); color:var(--cat-error-fg); }
.cal-chip.swap { background:var(--cat-swap-bg-soft); color:var(--cat-swap-fg); }
.cal-chip.avail { background:var(--cat-avail-bg-soft); color:var(--cat-avail-fg); }
.cal-chip.match { background:var(--cat-match-bg-soft); color:var(--cat-match-fg); }
.cal-chip.empty { background:transparent; color:var(--muted); font-weight:700; padding:0; font-size:11px; }
html.dark .cal-chip.leave { background:rgba(220,38,38,0.18); color:#FCA5A5; }
html.dark .cal-chip.swap { background:rgba(217,119,6,0.18); color:#FCD34D; }
html.dark .cal-chip.avail { background:rgba(5,150,105,0.18); color:#6EE7B7; }
html.dark .cal-chip.match { background:rgba(124,58,237,0.22); color:#C4B5FD; }
html.dark .cal-day.today { background:linear-gradient(90deg, rgba(79,70,229,0.15), var(--card) 60%); }
.cal-day-arrow { font-size:18px; color:var(--muted); flex-shrink:0; opacity:0.6; }

/* ── QUICK ACTIONS ── */
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.quick-btn { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 12px; text-align:left; cursor:pointer; box-shadow:var(--sh); transition:transform var(--tr), background var(--tr); display:flex; flex-direction:column; gap:4px; }
.quick-btn:active { transform:scale(0.97); }
.quick-btn-emoji { font-size:24px; margin-bottom:2px; }
.quick-btn-title { font-size:14px; font-weight:900; color:var(--text); }
.quick-btn-sub { font-size:11px; color:var(--muted); font-weight:600; line-height:1.3; }

/* ── ADMIN TABS ── */
.admin-tabs { display:flex; gap:6px; overflow-x:auto; padding:4px 0 12px; margin-bottom:6px; scrollbar-width:none; flex-wrap:wrap; }
.admin-tabs::-webkit-scrollbar { display:none; }
.admin-tab { flex:0 0 auto; padding:9px 14px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; transition:background var(--tr), color var(--tr), border-color var(--tr); min-height:44px; display:flex; align-items:center; }
.admin-tab.on { background:var(--accent); color:white; border-color:var(--accent); }
.admin-section { display:none; }
.admin-section.on { display:block; animation:pageIn 0.18s ease; }

/* ── PAGE INTRO HELP CARD ── */
.help-card { background:var(--al); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:16px; position:relative; overflow:hidden; }
.help-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.help-card-title { font-size:15px; font-weight:900; color:var(--accent); margin-bottom:6px; line-height:1.3; letter-spacing:-0.2px; }
html.dark .help-card-title { color:var(--accent-dark); }
.help-card-body { font-size:13px; color:var(--text); font-weight:600; line-height:1.55; opacity:0.82; }
.help-steps { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.help-step { display:flex; gap:12px; align-items:flex-start; }
.help-step-num { flex-shrink:0; width:24px; height:24px; border-radius:8px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(91,91,214,0.28); }
.help-step-text { font-size:13px; color:var(--text); font-weight:600; line-height:1.5; padding-top:2px; opacity:0.9; }

/* Month calendar */
.month-grid-head { display:grid; grid-template-columns:28px repeat(7,1fr); gap:2px; margin-bottom:4px; }
.month-week-num-head { text-align:center; font-size:9px; font-weight:800; color:var(--muted); padding:4px 0; text-transform:uppercase; letter-spacing:0.5px; }
.month-day-header { text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding:4px 0; }
.month-grid { display:grid; grid-template-columns:28px repeat(7,1fr); gap:3px; margin-bottom:18px; }
.month-week-num { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:white; background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius:6px; min-height:46px; box-shadow:var(--sh); letter-spacing:0.3px; }
.month-cell { min-height:46px; background:var(--card); border-radius:8px; padding:5px 3px 3px; cursor:pointer; border:1.5px solid var(--border); display:flex; flex-direction:column; align-items:center; transition:background 0.12s; }
.month-cell:active { background:var(--al); }
.month-cell.empty { background:transparent; border:none; cursor:default; }
.month-cell.today { border-color:var(--accent); background:var(--al); }
.month-cell.today .month-cell-num { color:var(--accent); font-weight:900; }
.month-cell-num { font-size:12px; font-weight:700; color:var(--text); line-height:1; }
.month-cell-dots { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.month-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.18); }
.month-dot.leave { background:#EF4444; }
.month-dot.avail { background:#22C55E; }
.month-dot.match { background:#5046E4; }
.cal-view-toggle { background:var(--accent); border:none; border-radius:10px; padding:6px 12px; font-size:17px; cursor:pointer; color:white; margin-left:8px; font-weight:900; line-height:1; box-shadow:0 2px 8px rgba(80,70,228,0.35); transition:transform 0.1s,box-shadow 0.1s; }
.cal-view-toggle:active { transform:scale(0.93); box-shadow:0 1px 4px rgba(80,70,228,0.2); }

/* ===== DESKTOP LAYOUT ===== */
.sidebar { display:none; }
.desktop-toggle-btn { background:rgba(255,255,255,0.18); border:none; border-radius:8px; padding:6px 10px; color:white; cursor:pointer; font-size:16px; line-height:1; flex-shrink:0; }
.desktop-toggle-btn:active { background:rgba(255,255,255,0.35); }

/* ===== SIDEBAR BASE (hidden on mobile) ===== */
.sidebar { display:none; }
.sidebar-logo { font-size:21px; font-weight:900; color:white; padding:6px 14px 20px; cursor:pointer; display:block; letter-spacing:-0.5px; }
.sidebar-logo span { color:#A5B4FC; }
.sidebar-user { font-size:12px; font-weight:700; color:rgba(255,255,255,0.55); padding:0 14px 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:10px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.snb { display:flex; align-items:center; gap:12px; padding:12px 14px; background:transparent; border:none; border-radius:14px; cursor:pointer; color:rgba(255,255,255,0.75); font-family:'Nunito',sans-serif; font-size:14px; font-weight:700; text-align:left; width:100%; transition:background 0.15s,color 0.15s; position:relative; }
.snb:hover { background:rgba(255,255,255,0.1); color:white; }
.snb.on { background:rgba(255,255,255,0.18); color:white; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
.snb-icon { font-size:19px; flex-shrink:0; width:26px; text-align:center; }
.snb-lbl { flex:1; }
.snb .ndot { position:absolute; top:8px; right:10px; min-width:20px; height:20px; border:2px solid transparent; font-size:11px; }
.sidebar-back-btn { margin-top:6px; opacity:0.5; font-size:13px; }
.sidebar-back-btn:hover { opacity:0.85; background:rgba(255,255,255,0.08); }

/* ===== DESKTOP LAYOUT ===== */
body.desktop { max-width:none; }
body.desktop #app { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
body.desktop .topbar { display:none; }
body.desktop .bnav { display:none; }

/* ── Sidebar ──────────────────────────── */
body.desktop .sidebar {
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; width:260px;
  background:linear-gradient(180deg, var(--accent) 0%, #3730A3 100%);
  padding:0 12px 20px;
  z-index:200; overflow-y:auto;
  box-shadow:4px 0 32px rgba(80,70,228,0.22);
}
html.dark body.desktop .sidebar {
  background:linear-gradient(180deg,#1E1B4B 0%,#0F0E20 100%);
  box-shadow:4px 0 32px rgba(0,0,0,0.5);
}
/* Sidebar top row: logo + bell */
.sidebar-top { display:flex; align-items:center; justify-content:space-between; padding:24px 4px 18px; }
body.desktop .sidebar-logo { font-size:24px; padding:0; cursor:pointer; letter-spacing:-0.5px; }
.sidebar-bell { background:rgba(255,255,255,0.12); border:none; border-radius:10px; width:40px; height:40px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; transition:background 0.15s; flex-shrink:0; }
.sidebar-bell:hover { background:rgba(255,255,255,0.22); }
.sidebar-bell .bell-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; background:var(--red); color:white; font-size:10px; font-weight:900; border-radius:9px; display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid transparent; }
/* Sidebar user card */
body.desktop .sidebar-user { margin-bottom:14px; }
.sidebar-user-inner { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.1); border-radius:14px; padding:10px 12px; }
.sidebar-ava { width:36px; height:36px; border-radius:50%; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:2px solid rgba(255,255,255,0.25); }
.sidebar-user-info { min-width:0; }
.sidebar-user-name { font-size:13px; font-weight:800; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-company { font-size:11px; color:rgba(255,255,255,0.55); font-weight:600; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Nav items */
body.desktop .snb { padding:12px 14px; font-size:14px; gap:12px; border-radius:12px; }
body.desktop .snb-icon { font-size:19px; width:26px; }
/* Divider before bottom toggle */
body.desktop .sidebar-back-btn { margin-top:8px; border-top:1px solid rgba(255,255,255,0.1); padding-top:12px; }

/* ── Content area ────────────────────── */
body.desktop .content {
  grid-column:2;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh;
  padding:40px clamp(24px, 4vw, 56px) 64px;
  background:var(--bg);
}

/* Each page: centred, max-width */
body.desktop .page { width:100%; }
body.desktop .page.on {
  display:block; width:100%; max-width:1120px;
  animation:none; padding-bottom:0;
}
body.desktop #page-admin.on { max-width:1280px; }

/* ── Modals ──────────────────────────── */
body.desktop .modal-overlay { padding-left:260px; align-items:center; justify-content:center; }
body.desktop .modal { max-width:580px; border-radius:22px; }
body.desktop .notif-panel { max-width:500px; border-radius:22px; margin-top:0; }
body.desktop .confirm-modal { max-width:440px; border-radius:22px; }
/* Chat view: left offset for sidebar, full height */
body.desktop #chat-view { left:260px; bottom:0; max-width:none; top:0; padding:24px 32px; }

/* ── Home 2-column layout ─────────────── */
body.desktop #page-home { display:grid; grid-template-columns:1fr 360px; gap:0 28px; align-items:start; }
body.desktop #page-home > .welcome-card { grid-column:1/-1; }
body.desktop #page-home > .action-section { grid-column:1/-1; }
body.desktop #page-home > .home-main { grid-column:1; }
body.desktop #page-home > .home-side { grid-column:2; padding-top:4px; }
body.desktop #page-home .home-side .stitle:first-child { margin-top:0; }
body.desktop #page-home .quick-grid { grid-template-columns:1fr 1fr; gap:10px; }

/* ── Admin stats 4-col ───────────────── */
body.desktop .sgrid { grid-template-columns:repeat(4,1fr); gap:14px; }

/* ── Cards & typography ──────────────── */
body.desktop .stitle { font-size:14px; font-weight:900; margin:28px 0 14px; letter-spacing:0.03em; text-transform:uppercase; }
body.desktop .welcome-card { padding:26px 28px 24px; border-radius:20px; }
body.desktop .welcome-hi { font-size:24px; }
body.desktop .welcome-sub { font-size:15px; }
body.desktop .welcome-tip { font-size:13px; padding:13px 16px; margin-top:16px; }
body.desktop .scard, body.desktop .card, body.desktop .fcard { padding:22px 24px; max-width:none; border-radius:18px; }
body.desktop .leave-row, body.desktop .mcard { padding:18px 22px; max-width:none; border-radius:18px; }
body.desktop .help-card { padding:22px 24px; border-radius:18px; }
body.desktop .help-card-title { font-size:16px; }
body.desktop .help-card-body { font-size:14px; }
body.desktop .help-step-text { font-size:14px; }

/* ── Calendar ────────────────────────── */
body.desktop .cal-head { padding:8px 0 12px; }
body.desktop .cal-title { font-size:18px; }
body.desktop .cal-range { font-size:14px; }
body.desktop .month-grid-head { grid-template-columns:36px repeat(7,1fr); gap:5px; margin-bottom:6px; }
body.desktop .month-grid { grid-template-columns:36px repeat(7,1fr); gap:5px; }
body.desktop .month-day-header { font-size:13px; padding:6px 0; }
body.desktop .month-week-num-head { font-size:11px; padding:6px 0; }
body.desktop .month-cell { min-height:88px; padding:8px 7px 6px; border-radius:11px; }
body.desktop .month-cell-num { font-size:17px; }
body.desktop .month-week-num { font-size:13px; min-height:88px; border-radius:9px; }
body.desktop .month-dot { width:8px; height:8px; }
body.desktop .month-cell-dots { gap:4px; margin-top:7px; }
body.desktop .cal-day { padding:14px 16px; min-height:68px; }
body.desktop .cal-day-num { font-size:26px; }
body.desktop .cal-day-dow { font-size:12px; }
body.desktop .cal-chip { font-size:13px; padding:5px 10px; }

/* ── Quick actions ───────────────────── */
body.desktop .quick-btn { padding:20px 16px; }
body.desktop .quick-btn-emoji { font-size:30px; }
body.desktop .quick-btn-title { font-size:14px; margin-top:8px; }
body.desktop .quick-btn-sub { font-size:12px; }

/* ── Forms ───────────────────────────── */
body.desktop .field input, body.desktop .field select { padding:14px 16px; }
body.desktop .big-btn { padding:15px 20px; font-size:16px; border-radius:14px; }
body.desktop .field label { font-size:13px; }

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet / large phone landscape (640px+) */
@media (min-width:640px) {
  .content { padding:22px 28px calc(100px + env(safe-area-inset-bottom,0px)); }
  .scard, .card, .leave-row, .mcard, .fcard { padding:18px 20px; }
  .month-cell { min-height:56px; font-size:14px; }
  .month-cell-num { font-size:14px; }
  .cal-day { min-height:52px; }
  .quick-grid { grid-template-columns:repeat(4,1fr); }
  .auth-card { max-width:440px; }
}


/* Scrollable modals on mobile */
.modal, .notif-panel { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* Better touch targets on all interactive */
.abtn, .big-btn { min-height:48px; }
.nb { min-height:48px; }
.leave-del { min-width:36px; min-height:36px; }

/* Prevent zoom on date/select in period form */
.period-day-shift { font-size:16px; }

/* Auth page safe area */
#auth { padding-top:max(24px, calc(24px + env(safe-area-inset-top,0px))); padding-bottom:max(24px, calc(24px + env(safe-area-inset-bottom,0px))); }

/* Landscape phone: shrink topbar and bnav */
@media (max-height:500px) and (orientation:landscape) {
  .topbar { padding-top:8px; padding-bottom:8px; }
  .bnav { padding-top:3px; padding-bottom:calc(3px + env(safe-area-inset-bottom,0px)); }
  .nb-lbl { display:none; }
  .nb-icon-wrap { height:24px; }
  .content { padding-top:10px; }
}

/* Legal modal — privacy & terms */
.legal-modal { max-height:88vh; }
.legal-modal h2 { margin-bottom:6px; font-size:22px; font-weight:900; }
.legal-modal h3 { font-size:15px; font-weight:800; color:var(--accent); margin:20px 0 6px; letter-spacing:-0.2px; }
html.dark .legal-modal h3 { color:var(--accent-dark); }
.legal-modal p { font-size:14px; line-height:1.6; color:var(--text); opacity:0.88; margin-bottom:8px; font-weight:500; }
.legal-modal ul { margin:6px 0 12px 22px; }
.legal-modal li { font-size:14px; line-height:1.55; color:var(--text); opacity:0.88; margin-bottom:5px; font-weight:500; }
.legal-modal li strong { font-weight:800; opacity:1; }
.legal-modal a { color:var(--accent); font-weight:700; text-decoration:underline; }
html.dark .legal-modal a { color:var(--accent-dark); }
.legal-modal .legal-meta { font-size:12px; color:var(--muted); font-weight:700; margin-bottom:18px; opacity:1; }
.legal-modal .big-btn { margin-top:24px; }
body.desktop .legal-modal { max-width:720px; }

/* Role select in user list */
.role-select { background:var(--card-2); border:2px solid var(--border); border-radius:10px; padding:6px 10px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; max-width:160px; }
.role-select:focus { border-color:var(--accent); outline:none; }
html.dark .role-select { background:var(--card-2); color:var(--text); }