:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --border: #e2e4e9;
  --line: #edeef2;
  --text: #1c2230;
  --text-muted: #67707f;
  --primary: #1f6feb;
  --primary-ink: #ffffff;
  --danger: #c23b3b;
  --danger-bg: #fdecec;
  --ok: #1f9d55;
  --active-row: #e3edff;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 25, 40, 0.08), 0 1px 2px rgba(20, 25, 40, 0.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the hidden attribute must always win, even over a .class that sets display */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

.app-loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--text-muted);
}

/* ---------- primitives ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.muted { color: var(--text-muted); }
.small { font-size: 13px; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 0.9em;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 8px;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.btn-primary:hover { background: #1a5fd0; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

.banner {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
.banner-error { background: var(--danger-bg); color: var(--danger); }

/* ---------- auth screens ---------- */
.auth-screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}
.auth-screen-space {
  background: radial-gradient(ellipse at 50% 40%, #131c33 0%, #0a0f1e 55%, #05070f 100%);
}
.spider-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-card h1 { margin: 0; font-size: 22px; }
.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.auth-card input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.auth-card input:focus {
  outline: 2px solid rgba(31, 111, 235, 0.35);
  border-color: var(--primary);
}

/* ---------- app frame ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-brand { font-weight: 700; letter-spacing: -0.01em; }
.topbar-nav { display: flex; gap: 4px; flex: 1; }
.navlink {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 550;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.navlink:hover { background: var(--surface-2); color: var(--text); }
.navlink[aria-current="page"] { background: var(--surface-2); color: var(--primary); }

.topbar-user { display: flex; align-items: center; gap: 10px; }
.who { font-weight: 550; font-size: 14px; }
.role-chip {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.role-chip.role-superadmin { color: #8a5a00; border-color: #f0d9b0; background: #fdf4e3; }
.role-chip.role-admin { color: var(--primary); border-color: #cfe0fb; background: #eef4fe; }

.page { padding: 24px; max-width: 1200px; margin: 0 auto; }
body.wide-view .page { max-width: none; padding: 16px 20px; }

/* Rota view goes full-bleed: fills the viewport below the top bar. */
body.rota-view { overflow: hidden; }
body.rota-view #app { display: flex; flex-direction: column; height: 100vh; }
body.rota-view .topbar { flex: none; }
body.rota-view .page { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; }
body.rota-view .rota {
  flex: 1;
  min-height: 0;
  min-width: 0;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  transition: grid-template-columns 0.26s ease;
}
body.rota-view .rota.no-anim { transition: none; }
body.rota-view .rota.side-collapsed { grid-template-columns: 0px minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { body.rota-view .rota { transition: none; } }

body.rota-view .rota-side {
  position: static;
  height: auto;
  width: auto;
  min-width: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
}
body.rota-view .rota-side-inner { width: 200px; padding: 12px; box-sizing: border-box; }
body.rota-view .rota.side-collapsed .rota-side { border-right-width: 0; }
body.rota-view .rota-main {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.rota-view .rota-scroll { flex: 1; min-height: 0; max-height: none; }

/* ---------- toast ---------- */
#toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  background: var(--text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.toast-in { opacity: 1; transform: none; }
.toast-error { background: var(--danger); }
.toast-ok { background: var(--ok); }

@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .topbar-nav { order: 3; width: 100%; overflow-x: auto; }
  .page { padding: 16px; }
}

/* ===================== rota grid ===================== */
.rota { display: flex; gap: 16px; align-items: flex-start; }

.rota-side {
  flex: none;
  width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  position: sticky;
  top: 72px;
}
.rota-side-h {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.rota-side-list { display: flex; flex-direction: column; gap: 5px; }
.emp-chip {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--surface);
  cursor: grab;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.emp-chip:hover { background: var(--surface-2); }
.emp-name { font-weight: 600; font-size: 13px; }
.emp-pos { font-size: 11px; color: var(--text-muted); }
.emp-tot { font-size: 10px; color: var(--primary); font-weight: 600; margin-top: 1px; }
.emp-tot:empty { display: none; }
.emp-off { font-size: 10px; color: #b06a1a; font-weight: 600; margin-top: 1px; }
.side-count {
  font-size: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
  color: var(--text-muted);
  font-weight: 700;
}
.rota-side-h { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.rota-side-h:first-child { margin-top: 0; }

.dept-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 6px;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.dept-group:first-child .dept-h { margin-top: 0; }
/* Smooth expand/collapse: animate grid-template-rows (0fr <-> 1fr) instead of
   toggling display, since height can't be transitioned to/from "auto". */
.dept-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.dept-collapse.is-expanded { grid-template-rows: 1fr; }
.dept-collapse > .rota-side-list { overflow: hidden; min-height: 0; }
.dept-vis-cb { flex: none; width: 13px; height: 13px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.dept-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.dept-caret { flex: none; width: 9px; font-size: 10px; color: var(--text-muted); }
.emp-chip-head { display: flex; align-items: center; gap: 6px; }
.emp-vis-cb { flex: none; width: 13px; height: 13px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.emp-chip.cat-short { border-color: #f0d9b0; background: #fffaf1; cursor: grab; }
.emp-chip.cat-long { opacity: 0.6; background: var(--surface-2); cursor: not-allowed; }
.rg-day.is-nodrop { background-color: rgba(194, 59, 59, 0.08); box-shadow: inset 0 0 0 2px var(--danger); cursor: not-allowed; }
.rota-side-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.slot-chip {
  background: linear-gradient(180deg, rgba(15, 39, 92, 0.92), rgba(20, 52, 120, 0.82));
  border: 1px solid rgba(10, 30, 80, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(15, 39, 92, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: grab;
}
.slot-chip .emp-name { color: #fff; }
.slot-chip .emp-pos { color: rgba(255, 255, 255, 0.7); }
.slot-chip.is-dragging { opacity: 0.4; }
/* REC (recording) — glassy dark red. EXT (external coverage) — glassy dark green. */
.slot-chip-rec {
  background: linear-gradient(180deg, rgba(92, 20, 20, 0.92), rgba(130, 26, 26, 0.82));
  border-color: rgba(64, 10, 10, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(92, 20, 20, 0.35);
}
.slot-chip-ext {
  background: linear-gradient(180deg, rgba(15, 74, 40, 0.92), rgba(20, 110, 58, 0.82));
  border-color: rgba(8, 48, 26, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(15, 74, 40, 0.35);
}

/* ---- Mark Live Qatar / UAE: glassy LIGHT rose and green ----
   Sidebar chips (dragged onto the time bar), the tinted band across each day,
   and the handle on the time bar itself where a mark is resized. */
.mark-chip {
  cursor: grab;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mark-chip.is-dragging { opacity: 0.4; }
.mark-chip-qatar {
  background: linear-gradient(180deg, rgba(255, 214, 224, 0.95), rgba(248, 172, 192, 0.78));
  border: 1px solid rgba(214, 120, 150, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(214, 120, 150, 0.3);
}
.mark-chip-uae {
  background: linear-gradient(180deg, rgba(209, 244, 218, 0.95), rgba(150, 218, 174, 0.78));
  border: 1px solid rgba(86, 168, 118, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(86, 168, 118, 0.3);
}
.mark-chip-qatar .emp-name { color: #7a1f3a; }
.mark-chip-qatar .emp-pos { color: rgba(122, 31, 58, 0.7); }
.mark-chip-uae .emp-name { color: #14532d; }
.mark-chip-uae .emp-pos { color: rgba(20, 83, 45, 0.7); }

.rg-mark {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none; /* purely a background — shifts and slots stay fully clickable */
}
.rg-mark.mark-qatar {
  background: linear-gradient(180deg, rgba(255, 206, 219, 0.5), rgba(248, 172, 192, 0.34));
  border-top: 1px solid rgba(214, 120, 150, 0.7);
  border-bottom: 1px solid rgba(214, 120, 150, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.rg-mark.mark-uae {
  background: linear-gradient(180deg, rgba(200, 240, 212, 0.5), rgba(150, 218, 174, 0.34));
  border-top: 1px solid rgba(86, 168, 118, 0.7);
  border-bottom: 1px solid rgba(86, 168, 118, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.rg-axis.is-mark-drop { background: rgba(31, 111, 235, 0.07); box-shadow: inset 0 0 0 2px var(--primary); }
.rg-mark-handle {
  position: absolute;
  width: 13px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
}
.rg-mark-handle.mark-qatar {
  right: 17px;
  background: linear-gradient(90deg, rgba(255, 214, 224, 0.98), rgba(248, 172, 192, 0.85));
  border: 1px solid rgba(214, 120, 150, 0.9);
}
.rg-mark-handle.mark-uae {
  right: 2px;
  background: linear-gradient(90deg, rgba(209, 244, 218, 0.98), rgba(150, 218, 174, 0.85));
  border: 1px solid rgba(86, 168, 118, 0.9);
}
.rg-mark-handle.is-grabbing { box-shadow: 0 4px 12px rgba(20, 25, 40, 0.3); }
.rg-mark-label {
  position: absolute;
  inset: 8px 0;
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  line-height: 11px;
  pointer-events: none;
}
.rg-mark-handle.mark-qatar .rg-mark-label { color: #7a1f3a; }
.rg-mark-handle.mark-uae .rg-mark-label { color: #14532d; }
.rg-mark-grip {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 3;
  touch-action: none;
}
.rg-mark-grip-t { top: 0; }
.rg-mark-grip-b { bottom: 0; }
.rg-mark-handle.is-editable:hover .rg-mark-grip { background: rgba(20, 25, 40, 0.22); }
.rg-mark-x {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  display: none;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  line-height: 12px;
  cursor: pointer;
  color: var(--danger);
  z-index: 3;
}
.rg-mark-handle.is-editable:hover .rg-mark-x { display: block; }

/* ---- Admin Console tabs ---- */
.console-tabs { flex-wrap: wrap; row-gap: 4px; }
.console-tabs .tab-btn { padding: 9px 14px; display: inline-flex; align-items: center; }
.tab-ico { margin-right: 7px; font-size: 14px; line-height: 1; }
/* The tab already names the page, so hide a page's own title-only header. */
.console-pane .plan-bar:has(> strong:only-child) { display: none; }

/* ---- on-air segments inside a shift bar ---- */
.rg-shift.is-slot-target { outline: 2px dashed rgba(15, 39, 92, 0.9); outline-offset: -2px; }
.rg-seg {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(15, 39, 92, 0.94), rgba(20, 52, 120, 0.86));
  border: 1px solid rgba(8, 24, 66, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  padding: 10px 4px 1px;
  overflow: hidden;
  cursor: grab;
  z-index: 5;
}
.rg-seg.is-grabbing { z-index: 30; box-shadow: 0 6px 16px rgba(8, 24, 66, 0.5); cursor: grabbing; }
.rg-seg.is-sliding { transition: top 120ms ease-out; }
/* REC (recording) — glassy dark red. EXT (external coverage) — glassy dark green. */
.rg-seg.type-rec {
  background: linear-gradient(180deg, rgba(92, 20, 20, 0.94), rgba(130, 26, 26, 0.86));
  border-color: rgba(64, 10, 10, 0.9);
}
.rg-seg.type-ext {
  background: linear-gradient(180deg, rgba(15, 74, 40, 0.94), rgba(20, 110, 58, 0.86));
  border-color: rgba(8, 48, 26, 0.9);
}
.rg-seg-type { font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; margin-right: 3px; }
.rg-seg.has-note::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 0 1px rgba(8, 24, 66, 0.6);
}
.rg-seg-time { font-weight: 700; white-space: nowrap; }
.rg-seg-label { display: block; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-seg-grip {
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
  z-index: 2;
}
.rg-seg-grip-t { top: -1px; }
.rg-seg-grip-b { bottom: -1px; }
.rg-seg-grip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
}
.rg-seg:hover .rg-seg-grip::after { opacity: 1; }
.rg-seg-grip-t::after { top: 1px; }
.rg-seg-grip-b::after { bottom: 1px; }
.rg-seg-x {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  text-align: center;
  border: none;
  background: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 10px;
  cursor: pointer;
  padding: 1px 0;
  opacity: 0;
  z-index: 3;
}
.rg-seg:hover .rg-seg-x { opacity: 0.85; }
.rg-seg-x:hover { opacity: 1; }

.rota-main {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rota-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.rota-week { font-weight: 650; margin-left: 4px; }
.rota-mode {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}
.topbar-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 7px;
  font-size: 15px;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
}
.topbar-toggle:hover { background: var(--surface-2); }

.rota-scroll { overflow: auto; max-height: calc(100vh - 190px); }

.rota-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 80px); /* overridden inline per week */
  column-gap: 8px;
  background: var(--surface-2);
  position: relative;
  width: max-content;
}
.rota-grid.is-loading { opacity: 0.5; }

.rg-corner { position: sticky; top: 0; left: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); }
.rg-dayhead {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 6px 2px;
  font-weight: 650;
  font-size: 13px;
}
.rg-dayhead small { display: block; color: var(--text-muted); font-weight: 500; font-size: 11px; }
.rg-day-event {
  display: inline-block;
  max-width: 100%;
  margin-top: 3px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #4a2f7a;
  background: linear-gradient(180deg, rgba(230, 220, 250, 0.95), rgba(206, 188, 240, 0.88));
  border: 1px solid rgba(122, 92, 178, 0.4);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-day-event:hover { filter: brightness(1.05); }
.rg-add {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--primary);
  border-radius: 6px;
  width: 20px;
  height: 20px;
  line-height: 1;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.rg-add:hover { background: var(--primary); color: #fff; }
.rg-dayhead.is-today { color: var(--primary); }
.rg-dayhead.is-today small { color: var(--primary); }

.rg-axis {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.rg-hour {
  height: 52px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.rg-hour span {
  position: absolute;
  top: 3px;
  right: 36px;
  font-size: 10px;
  color: var(--text-muted);
}

.rg-day {
  position: relative;
  z-index: 0; /* own stacking context — a dragged/resized shift's raised
                 z-index (.is-grabbing, up to 30) must never out-rank the
                 sticky axis/headers, which live in the parent grid's context */
  height: var(--grid-height);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 51px,
    var(--line) 51px,
    var(--line) 52px
  );
}

.rg-shift {
  position: absolute;
  border: 1.5px solid var(--shift-border, #8fb6f6);
  background: var(--shift, #dbe8ff);
  border-radius: 7px;
  padding: 2px 4px;
  font-size: 10px;
  overflow: hidden;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
}
.rg-shift.is-open {
  background: linear-gradient(#dbe8ff 55%, rgba(219, 232, 255, 0.15));
  border-style: dashed;
}
/* Technical/production departments (Director, Studio, Audio, Lighting,
   Drivers, MCR, TX, Library, Graphic, Engineers) — glassy light yellow bar. */
.rg-shift.dept-tech {
  background: linear-gradient(180deg, rgba(255, 249, 219, 0.95), rgba(255, 237, 163, 0.88));
  border-color: rgba(196, 162, 42, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rg-shift.dept-tech.is-open {
  background: linear-gradient(rgba(255, 249, 219, 0.95) 55%, rgba(255, 249, 219, 0.15));
  border-style: dashed;
}
.rg-shift-name {
  font-weight: 700;
  color: #1c2230;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-shift-mid { flex: 1; min-height: 0; overflow: hidden; }
.rg-shift-time { color: #3b5b8c; white-space: nowrap; }
.rg-shift-prog { color: #3b5b8c; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-shift-foot {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #3b5b8c;
  border-top: 1px solid rgba(59, 91, 140, 0.25);
  padding-top: 1px;
  margin-top: 2px;
}
.rg-shift.is-compact .rg-shift-mid { display: none; }
.rg-shift.is-compact .rg-shift-foot { border-top: none; margin-top: 0; }
.rg-shift.is-compact { font-size: 10px; }
.rg-badge {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fff;
  border: 1px solid var(--shift-border, #8fb6f6);
  border-radius: 999px;
  padding: 0 5px;
  color: #3b5b8c;
}
/* Bureau tint on just the little badge, not the whole bar — glassy red/green. */
.rg-badge.loc-doha {
  background: linear-gradient(180deg, rgba(253, 223, 223, 0.95), rgba(247, 190, 190, 0.88));
  border-color: rgba(196, 76, 76, 0.55);
  color: #8a2e2e;
}
.rg-badge.loc-dubai {
  background: linear-gradient(180deg, rgba(214, 246, 222, 0.95), rgba(179, 232, 195, 0.88));
  border-color: rgba(59, 158, 94, 0.55);
  color: #1f6b3d;
}

.emp-chip.is-dragging { opacity: 0.4; }
.rg-day.is-drop { background-color: rgba(31, 111, 235, 0.08); box-shadow: inset 0 0 0 2px var(--primary); }
.rg-shift.is-editable { cursor: default; }
.rg-shift.is-editable:hover { filter: brightness(0.97); box-shadow: 0 2px 8px rgba(20, 25, 40, 0.18); }
.rg-shift.is-grabbing { z-index: 20; box-shadow: 0 6px 20px rgba(20, 25, 40, 0.3); cursor: grabbing; user-select: none; }
.rg-shift.is-grabbing .rg-shift-mid { display: block; }
.rg-shift.is-grabbing .rg-shift-time { font-weight: 700; color: var(--text); }
.rg-shift.is-grabbing .rg-shift-foot span:last-child { font-weight: 700; color: var(--text); }

.rg-move {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 11px;
  color: #3b5b8c;
  cursor: grab;
  line-height: 1;
  padding: 2px;
  z-index: 3;
}
.rg-grip {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 3;
}
.rg-grip-t { top: -2px; }
.rg-grip-b { bottom: -2px; }
.rg-grip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--shift-border, #8fb6f6);
  opacity: 0;
}
.rg-shift.is-editable:hover .rg-grip::after { opacity: 1; }
.rg-grip-t::after { top: 1px; }
.rg-grip-b::after { bottom: 1px; }

.rg-drag-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--text);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 25;
}
.rg-drag-label.is-on { opacity: 1; }

@media (max-width: 720px) {
  .rota { flex-direction: column; }
  .rota-side { width: 100%; position: static; }
  .rota-side-list { flex-direction: row; flex-wrap: wrap; }
  .emp-chip { flex: 1 1 45%; }
}

/* ===================== modal + forms ===================== */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 32, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.modal {
  background: var(--surface);
  border-radius: 12px;
  width: 380px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 15px; }
.modal-x { border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.modal-body { padding: 16px; }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.modal-foot .spacer { flex: 1; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.stack input, .stack select, .stack textarea {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.stack textarea { resize: vertical; }
.stack input:focus, .stack select:focus, .stack textarea:focus { outline: 2px solid rgba(31, 111, 235, 0.35); border-color: var(--primary); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.calfield-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}
.calfield-btn:hover { background: var(--surface-2); }
.calfield-btn:focus { outline: 2px solid rgba(31, 111, 235, 0.35); border-color: var(--primary); }

/* Month-grid calendar picker (Daily Plan → 📅 jump-to-date) */
.calpick { display: flex; flex-direction: column; gap: 10px; }
.calpick-head { display: flex; align-items: center; justify-content: space-between; }
.calpick-title { font-weight: 650; font-size: 15px; }
.calpick-nav {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}
.calpick-nav:hover { background: var(--surface-2); }
.calpick-dow, .calpick-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.calpick-dow span { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 4px 0; }
.calpick-day {
  border: none;
  background: none;
  border-radius: 999px;
  aspect-ratio: 1;
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.calpick-day:hover { background: var(--surface-2); }
.calpick-day.is-muted { color: var(--text-muted); opacity: 0.55; }
.calpick-day.is-today { background: var(--active-row); font-weight: 700; }
.calpick-day.is-selected { background: var(--primary); color: var(--primary-ink); font-weight: 700; }

/* Guest picker (Daily Plan → Assign. Desk double-click) */
.guestpick { display: flex; flex-direction: column; gap: 10px; }
.guestpick-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.guestpick-field input {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.guestpick-field input:focus { outline: 2px solid rgba(31, 111, 235, 0.35); border-color: var(--primary); }
.guestpick-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.guestpick-group {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.guestpick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
.guestpick-item:hover { background: var(--surface); }
.guestpick-item input { width: 16px; height: 16px; flex: none; }
.guestpick-empty { padding: 10px; }

.timefield, .datefield { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.timefield select, .datefield select {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 6px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.timefield-sep { font-weight: 700; color: var(--text-muted); }
.check-inline { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; color: var(--text) !important; }
.check-inline input { width: auto; }

.days-field { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin: 0; }
.days-field legend { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 0 4px; }
.days-row { display: flex; gap: 4px; }
.day-toggle { flex: 1; }
.day-toggle input { position: absolute; opacity: 0; }
.day-toggle span {
  display: block;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.day-toggle input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.day-toggle input:focus-visible + span { outline: 2px solid rgba(31, 111, 235, 0.4); }

.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--danger-bg); }

/* ===================== tables / leave page ===================== */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.tbl tbody tr:hover { background: var(--surface-2); }
.emp-row-offboarded td {
  background: linear-gradient(180deg, rgba(253, 223, 223, 0.95), rgba(247, 190, 190, 0.88));
}
.emp-row-offboarded:hover td {
  background: linear-gradient(180deg, rgba(249, 210, 210, 0.95), rgba(240, 175, 175, 0.88));
}
.pill {
  display: inline-block;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
}

/* ===================== Daily Plan spreadsheet ===================== */
.plan { display: flex; flex-direction: column; gap: 10px; }
.plan-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.plan-bar > strong { font-size: 16px; }
.plan-daybtn { min-width: 150px; font-weight: 650; }
.plan-daybtn.is-current { border-color: var(--primary); color: var(--primary); }
.plan-icon-btn { font-size: 15px; line-height: 1; padding: 6px 9px; }
.plan-readonly-pill { color: var(--text-muted); font-weight: 600; }
.plan-status { font-size: 12px; }
.plan-status.is-ok { color: var(--ok); }
.plan-status.is-err { color: var(--danger); }

.plan-scroll, .grid-scroll {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  max-height: calc(100vh - 220px);
}
.grid-wrap { display: flex; flex-direction: column; gap: 8px; }
.grid-pager { display: flex; align-items: center; gap: 4px; }
.grid-page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.grid-page-btn:hover:not(:disabled) { background: var(--surface-2); }
.grid-page-btn:disabled { opacity: 0.4; cursor: default; }
.grid-page-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 650; }
.grid-page-ellipsis { color: var(--text-muted); padding: 0 2px; }
.grid-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid-status { font-size: 12px; }
.grid-status.is-ok { color: var(--ok); }
.grid-status.is-err { color: var(--danger); }

.plan-table, .grid-table { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.plan-table thead th, .grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}
.grid-th { position: sticky; }
.grid-th-label { display: inline-block; }
.grid-th.is-asc .grid-th-label::after { content: " ▲"; color: var(--primary); }
.grid-th.is-desc .grid-th-label::after { content: " ▼"; color: var(--primary); }
.grid-th-menu {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 3px;
  margin-left: 3px;
  border-radius: 4px;
}
.grid-th-menu:hover { background: var(--border); color: var(--text); }
.grid-th.is-filtered .grid-th-menu { color: var(--primary); background: #eef4fe; }
.grid-th.is-filtered .grid-th-menu::after { content: " ⧩"; }

/* Grid free-text search toolbar */
.grid-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.grid-search-all {
  width: 320px;
  max-width: 60vw;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
}
.grid-search-all:focus { outline: 2px solid rgba(31, 111, 235, 0.35); border-color: var(--primary); }
.grid-count { white-space: nowrap; }

/* Cell autocomplete dropdown (column.suggest) */
.grid-suggest {
  position: fixed;
  z-index: 320;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  padding: 4px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}
.grid-suggest-opt {
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.grid-suggest-opt:hover { background: var(--surface-2); }
.grid-suggest-opt.is-hi { background: var(--primary); color: #fff; }

.grid-menu {
  position: fixed;
  z-index: 300;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}
.grid-menu-sort { display: flex; gap: 6px; }
.grid-menu-sort button {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 5px;
  font: inherit;
  cursor: pointer;
}
.grid-menu-sort button:hover { background: var(--border); }
.grid-menu-search {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}
.grid-menu-all { font-weight: 600; padding: 2px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.grid-menu-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.grid-menu-list label { display: flex; align-items: center; gap: 6px; padding: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-menu-foot { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }

/* Active (focused) row — so a long row keeps its identity while you scroll right. */
.grid-table tbody tr.is-active-row td { background: var(--active-row); }
.grid-table tbody tr.is-active-row .grid-rownum { background: var(--active-row); font-weight: 700; color: var(--text); }

.plan-table tbody, .grid-table tbody { counter-reset: gridrow; }
.plan-table tbody tr, .grid-table tbody tr { counter-increment: gridrow; }
.plan-table td, .grid-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0;
}
.plan-rownum, .grid-rownum {
  width: 34px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  background: var(--surface-2);
  position: sticky;
  left: 0;
  z-index: 1;
}
.plan-table tbody .plan-rownum::before,
.grid-table tbody .grid-rownum::before { content: counter(gridrow); }
.plan-table td input:not([type]),
.plan-table td input[type="text"],
.grid-table td input:not([type]),
.grid-table td input[type="text"] {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  padding: 6px 8px;
  color: var(--text);
}
.plan-table td textarea,
.grid-table td textarea {
  width: 100%;
  display: block;
  border: none;
  background: transparent;
  font: inherit;
  padding: 6px 8px;
  color: var(--text);
  resize: none;
  line-height: 1.35;
}
.plan-table td input:focus, .grid-table td input:focus,
.plan-table td textarea:focus, .grid-table td textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: #fffef0;
}
.grid-auto { background: var(--surface-2); }
.grid-auto input { color: var(--text-muted); cursor: default; }
.plan-check, .grid-check { text-align: center; }
.plan-check input, .grid-check input { width: 16px; height: 16px; }
.plan-del, .grid-del { width: 30px; text-align: center; }
.plan-x, .grid-x {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 6px;
}
.plan-x:hover, .grid-x:hover { color: var(--danger); }


/* ===================== Employees & logins ===================== */
.emp-head-tools { display: flex; align-items: center; gap: 8px; }
.emp-search {
  width: 260px;
  max-width: 45vw;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
}
.emp-search:focus { outline: 2px solid rgba(31, 111, 235, 0.35); border-color: var(--primary); }
.tbl-scroll { overflow-x: auto; }
.tbl-actions { white-space: nowrap; text-align: right; }
.tbl-actions .btn { margin-left: 6px; }
.emp-out-cell { text-align: center; }
.emp-out-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.pill-ok { color: #1f7a3d; border-color: #bfe3cb; background: #eef8f1; }
.pill-warn { color: #8a5a00; border-color: #f0d9b0; background: #fdf4e3; }
.pill-danger { color: var(--danger); border-color: #f3c9c9; background: var(--danger-bg); }

/* ===================== Activity log ===================== */
.al-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.al-toolbar .input { width: auto; }
#al-search { min-width: 220px; flex: 1; }
.al-date-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.al-sortable { cursor: pointer; user-select: none; }
.al-sortable:hover { color: var(--text); }
.al-row { cursor: pointer; }
.al-diff { margin-top: 6px; }
.al-diff th, .al-diff td { font-size: 12.5px; }
.al-diff td:first-child { font-weight: 600; white-space: nowrap; }

/* ===================== Print: Daily Plan ===================== */
.print-area { display: none; }

@media print {
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block !important; }
  @page { size: A4 landscape; margin: 12mm; }

  /* Force browsers to actually print the background colors below — most
     strip them by default unless the page opts in. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

  .print-head { margin-bottom: 12px; }
  .print-title { font-size: 20px; font-weight: 700; color: #15316b; }
  .print-sub { font-size: 13px; color: #3d5590; margin-top: 2px; }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #0d2b34;
    font-family: var(--font);
  }
  .print-table th, .print-table td {
    border: 1px solid #fff;
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
  }
  .print-table th {
    background: #15316b;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.01em;
  }
  .print-table tbody tr:nth-child(odd) { background: #bfe6f5; }
  .print-table tbody tr:nth-child(even) { background: #7fc7e6; }
  .print-table tr { break-inside: avoid; }
  .print-empty { text-align: center; color: #3d5590; padding: 16px; background: #fff !important; }
  .print-foot { margin-top: 10px; font-size: 10px; color: #666; }
}

/* ===================== Guests: tabs + Add-form ===================== */
/* Folder-tab strip, left-aligned, active tab glassy dark-blue and "raised"
   above the others — same glass formula as .slot-chip. */
.tabbar {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 2px solid rgba(15, 39, 92, 0.3);
}
.tab-btn {
  position: relative;
  top: 2px;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 9px 20px;
  border-radius: 10px 10px 0 0;
  font: inherit;
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
}
.tab-btn:hover { top: 0; background: var(--surface); color: var(--text); }
.tab-btn.is-active {
  top: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(18, 46, 108, 0.96), rgba(24, 60, 138, 0.88));
  border: 1px solid rgba(10, 30, 80, 0.9);
  border-bottom: 2px solid rgba(24, 60, 138, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 8px rgba(15, 39, 92, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding-top: 11px;
  padding-bottom: 11px;
  margin-bottom: -2px;
}
.tab-btn.is-active:hover { filter: brightness(1.06); }

.guestform-card { max-width: 760px; }
.guestform { display: flex; flex-direction: column; gap: 12px; }
.guestform-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.guestform-label {
  flex: 0 0 170px;
  color: #fff;
  background: linear-gradient(180deg, rgba(96, 150, 245, 0.92), rgba(66, 118, 224, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 650;
  font-size: 13px;
}
.guestform-input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
textarea.guestform-input { resize: vertical; min-height: 60px; }
.guestform-input:focus { outline: 2px solid rgba(31, 111, 235, 0.35); outline-offset: -2px; }
.guestform-submit { align-self: flex-start; margin-top: 4px; }

.star-picker { display: flex; align-items: center; gap: 4px; padding: 0 10px; }
.star-btn { border: none; background: none; font-size: 22px; line-height: 1; color: var(--border); cursor: pointer; padding: 2px; }
.star-btn:hover { color: #e0ac3f; }
.star-btn.is-filled { color: #f5a623; }

/* Grid cell with a trailing open-link icon (e.g. Email -> mailto:) */
.grid-link-cell { display: flex; align-items: center; }
.grid-link-cell input { flex: 1; min-width: 0; }
.grid-link-btn {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
}
.grid-link-btn:hover { background: var(--surface-2); }
.grid-link-btn.is-empty { color: var(--border); cursor: default; }

/* ===================== Dashboard ===================== */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

.dash-stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 14px; }
.dash-stat-sep { flex: none; width: 1px; background: var(--border); margin: 4px 0; }
.dash-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 100px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.dash-stat-pill-muted { opacity: 0.75; }
.dash-stat-num { font-size: 24px; font-weight: 700; color: var(--primary); }
.dash-stat-pill-muted .dash-stat-num { color: var(--text-muted); }
.dash-stat-pill-danger { background: #fdecec; border-color: #f3c9c9; }
.dash-stat-pill-danger .dash-stat-num { color: #c0362c; }
.dash-stat-pill-danger .dash-stat-label { color: #b04a42; }
.dash-stat-of { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.dash-stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.vac-summary-line { font-size: 17px; }
.vac-week-list { margin: 4px 0 0; padding-left: 22px; font-size: 17px; }
.vac-week-list li { margin-bottom: 4px; }
.vac-week-list li:last-child { margin-bottom: 0; }

.dash-charts { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.dash-chart-box { flex: 2 1 420px; min-width: 320px; }
.dash-chart-box-small { flex: 1 1 260px; min-width: 240px; max-width: 340px; }
.dash-chart-box h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); font-weight: 650; }
.dash-chart-box canvas { max-height: 320px; }

.dash-topics-row { display: flex; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.dash-topics-list { flex: 1 1 260px; max-width: 340px; }
.dash-topics-list h3 { margin: 0 0 4px; font-size: 14px; color: var(--text-muted); font-weight: 650; }
.dash-topic-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-topic-btn {
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text);
}
.dash-topic-btn:hover { background: var(--active-row); border-color: var(--primary); }
.dash-topic-count { color: var(--text-muted); font-size: 12px; }

.dash-map-box { flex: 2 1 480px; min-width: 320px; }
.dash-map-box h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); font-weight: 650; }
.dash-map { position: relative; width: 100%; height: 420px; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }