/* ── Public Roster Page — public.css ────────────────────────────────────────── */
:root {
  --pub-bg:      #f0f4f8;
  --pub-topbar:  #1a2d4a;
  --pub-line:    #cbd5e1;
  --pub-radius:  10px;
  --font:        'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--pub-bg);
  color: #1e293b;
  min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
.pub-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pub-topbar);
  color: #e8eef8;
  padding: 10px 20px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.pub-brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #e8eef8;
}
.pub-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #e8eef8;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}
.pub-print-btn:hover { background: rgba(255,255,255,0.22); }

/* ── Week Nav ───────────────────────────────────────────────────────────────── */
.pub-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px 10px;
}
.pub-week-btn {
  background: #ffffff;
  border: 1px solid var(--pub-line);
  border-radius: 8px;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.pub-week-btn:hover:not(:disabled) { background: #e8eef8; border-color: #94a3b8; }
.pub-week-btn:disabled { opacity: 0.35; cursor: default; }
.pub-week-label {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  min-width: 220px;
  text-align: center;
  line-height: 1.3;
}
.pub-week-label .pub-week-type {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 99px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}
.pub-week-label .pub-week-published {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin-top: 2px;
}

/* ── Main content ───────────────────────────────────────────────────────────── */
.pub-main {
  padding: 20px 16px 40px;
  max-width: 100%;
  overflow-x: auto;
}
.pub-loading {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  font-size: 14px;
}
.pub-error {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
}
.pub-error strong { color: #1e293b; font-size: 17px; display: block; margin-bottom: 8px; }
.pub-board-wrap { overflow-x: auto; border-radius: var(--pub-radius); border: 1.5px solid #c8d4e3; box-shadow: 0 2px 8px rgba(15,23,42,0.07); width: fit-content; max-width: 100%; margin: 0 auto; }
.pub-footer {
  margin-top: 14px;
  text-align: right;
  font-size: 11px;
  color: #94a3b8;
  padding: 0 4px;
}

/* ── Weekly board table (copied from styles.css) ───────────────────────────── */
.wb-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.weekly-board { table-layout: fixed; width: auto; min-width: 500px; border-collapse: collapse; }
.weekly-board th, .weekly-board td { padding: 2px 1px; text-align: center; vertical-align: middle; }
.weekly-board .left-col-item { text-align: left; }

.wb-smo-hdr, .wb-smo   { width: 114px; }
.wb-tr-hdr,  .wb-tr    { width: 114px; }
.wb-we-hdr-sub, .weekend-cell { width: 114px; }

.weekly-board thead th {
  background: linear-gradient(180deg, #1a2d4a 0%, #213860 100%);
  color: #e8eef8;
  font-size: 11px;
}
.weekly-board thead tr:first-child th { padding-top: 9px; padding-bottom: 9px; }
.weekly-board .wb-day-hdr,
.weekly-board .wb-we-hdr { font-size: 12px; line-height: 1.2; }
.weekly-board thead tr:nth-child(2) th {
  background: linear-gradient(180deg, #6f8193 0%, #5f7184 100%) !important;
  color: #f3f6fb !important;
}
.weekly-board .left-col-item {
  min-width: 215px; max-width: 215px; width: 215px;
  text-align: left;
  background: #e7edf4;
  color: #1e293b;
  font-weight: 700;
  font-size: 11px;
  border-right: 1px solid #cbd5e1;
  word-wrap: break-word; word-break: break-word; overflow-wrap: break-word;
}
.weekly-board thead th.left-col-item { font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0.01em; }

.weekly-board .wb-tr-hdr, .weekly-board .wb-tr, .weekly-board .wb-day-hdr { border-right: 2px solid #8fa3b8; }
.weekly-board .wb-smo-hdr, .weekly-board .wb-smo { border-right: none; }
.weekly-board .wb-tr-hdr, .weekly-board .wb-tr { border-left: none; }
.weekly-board .wb-we-hdr, .weekly-board .wb-we-hdr-sub, .weekly-board .weekend-cell { border-left: 2px solid #8fa3b8; }
.weekly-board tbody tr.wb-loc-pm td { border-bottom: 2px solid #8fa3b8; }
.weekly-board tbody tr.wb-loc-am > td.left-col-item { border-bottom: 2px solid #8fa3b8; }
.weekly-board tbody tr.wb-loc-am > td:not(.left-col-item):not(.weekend-cell) { border-bottom: 1px dotted rgba(143,163,184,0.55); }
.weekly-board tbody tr.wb-loc-pm > td:not(.left-col-item):not(.weekend-cell) { border-top: 1px dotted rgba(143,163,184,0.55); }
.weekly-board tbody tr.wb-teach-am > td.left-col-item,
.weekly-board tbody td.wb-after-teach-we { border-bottom: 3px solid #5f7184; }
.weekly-board tbody tr.wb-after-teach td { border-bottom: 3px solid #5f7184; }
.weekly-board tbody tr { height: 20px; }

.wb-we-stacked { vertical-align: top; padding: 2px 3px; }
.wb-we-stacked .wb-sat, .wb-we-stacked .wb-sun { display: block; }
.wb-we-stacked .wb-sat { border-bottom: 1px solid #cbd5e1; }
.wb-we-sat-div { border-right: 2px solid #9fb8d0 !important; }

.weekly-row-core    .left-col-item { background: #e7edf4; color: #1e293b; }
.weekly-row-support .left-col-item { background: #e7edf4; color: #1e293b; }
.weekly-row-oncall td              { background: #f0f9ff; }
.weekly-row-oncall .left-col-item  { background: #ddeaf5; color: #0369a1; }
.weekly-row-comment td             { background: #fffbeb; }
.weekly-row-comment .left-col-item { background: #f2efe1; color: #92400e; }
.weekend-cell   { background: #f5faf0 !important; }
.muted-cell     { color: #94a3b8; font-style: italic; }
.wb-holiday-col { background: #dde4bf !important; color: #3f4b1b !important; }

/* ── Cell content ──────────────────────────────────────────────────────────── */
.cell-btn {
  border: 0; width: 100%; background: transparent; padding: 1px 2px; cursor: default;
  min-height: 24px; display: flex; align-items: center; justify-content: center;
  line-height: 1.05; font-size: 12px;
}
.tag {
  display: inline-block; max-width: 100%; padding: 1px 3px; border-radius: 0;
  font-size: 12px; font-weight: 500; line-height: 1.05;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  background: none; color: #1e293b;
}
.tag-compact { font-size: 11px; }
.tag-tight   { font-size: 10px; letter-spacing: -0.01em; }
.tag.ok      { background: none; color: #065f46; font-weight: 600; }
.tag.conflict{ background: none; color: #991b1b; font-weight: 600; }

.weekly-board td.wb-gap-c { box-shadow: inset 0 0 0 2px #dc2626;  background: #fff1f1 !important; }
.weekly-board td.wb-gap-e { box-shadow: inset 0 0 0 1.5px #f87171; background: #fffafa !important; }
.weekly-board td.wb-gap-m { box-shadow: inset 0 0 0 1.5px #fbbf24; background: #fffcf2 !important; }
.weekly-board td.wb-gap-l { box-shadow: inset 0 0 0 1px #93c5fd;   background: #f7fbff !important; }

.wb-ghost {
  display: block; font-style: italic; font-size: 10px; color: #b0bac5;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; pointer-events: none;
}

/* ── Single-row (oncall/comment) ────────────────────────────────────────────── */
.wb-single-row td { border-bottom: 1.2px solid #4f647a; }

/* ── Mobile card view (< 680 px) — mirrored from styles.css ────────────────── */
.sb-wrap { display: flex; flex-direction: column; gap: 10px; }
.sb-tabs { display: flex; gap: 6px; padding-bottom: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0; padding: 7px 11px 6px; min-width: 54px;
  border: 1px solid rgba(200,216,234,0.60); border-radius: 10px;
  background: rgba(255,255,255,0.58); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sb-tab-name { font-size: 13px; font-weight: 700; color: #1e3a5f; line-height: 1; }
.sb-tab-date { font-size: 10px; color: #7a9bb5; line-height: 1; }
.sb-tab-active { background: linear-gradient(135deg,#1e6fa8 0%,#2984d4 100%); border-color: transparent; box-shadow: 0 3px 12px rgba(30,111,168,0.35); }
.sb-tab-active .sb-tab-name, .sb-tab-active .sb-tab-date { color: #fff; }
.sb-tab-today:not(.sb-tab-active) { border-color: rgba(30,111,168,0.50); box-shadow: 0 0 0 2px rgba(30,111,168,0.12); }
.sb-tab-today:not(.sb-tab-active) .sb-tab-name { color: #1e6fa8; }
.sb-tab-past:not(.sb-tab-active) { opacity: 0.48; }
.sb-card { background: rgba(255,255,255,0.68); border: 1px solid rgba(255,255,255,0.72); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(12,29,48,0.08); }
.sb-hol-banner { padding: 28px 20px 26px; text-align: center; background: rgba(253,230,138,0.38); border-bottom: 1px solid rgba(253,200,90,0.45); }
.sb-hol-banner-name { font-size: 19px; font-weight: 800; color: #713f12; line-height: 1.2; }
.sb-hol-banner-sub { font-size: 11px; font-weight: 600; color: #92400e; text-transform: uppercase; letter-spacing: 0.09em; margin-top: 7px; }
.sb-hol-badge { font-size: 10px; font-weight: 700; background: rgba(253,230,138,0.60); color: #713f12; border: 1px solid rgba(253,200,90,0.55); border-radius: 999px; padding: 2px 8px; }
.sb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sb-th-role { width: 110px; padding: 7px 6px 6px 12px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #3a556e; background: rgba(232,241,251,0.70); border-bottom: 2px solid rgba(200,216,234,0.65); }
.sb-th-sess { text-align: center; padding: 7px 8px 6px; font-size: 11px; font-weight: 800; color: #1e3a5f; background: rgba(232,241,251,0.70); border-bottom: 2px solid rgba(200,216,234,0.65); border-left: 1px solid rgba(200,216,234,0.45); }
.sb-group-hdr td { padding: 5px 13px 4px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .10em; color: #3a556e; background: rgba(220,232,246,0.50); border-top: 1px solid rgba(200,216,234,0.55); border-bottom: 1px solid rgba(200,216,234,0.55); }
.sb-row td { padding: 8px 8px 7px; vertical-align: top; border-bottom: 1px solid rgba(200,216,234,0.28); font-size: 13px; line-height: 1.3; }
.sb-row:last-child td { border-bottom: none; }
.sb-td-role { width: 110px; padding-left: 12px !important; font-size: 11.5px; font-weight: 700; color: #1e3a5f; white-space: normal; word-break: break-word; }
.sb-td-sess  { font-weight: 600; color: #132336; border-left: 1px solid rgba(200,216,234,0.28); text-align: center; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.sb-td-oncall{ font-weight: 600; color: #132336; border-left: 1px solid rgba(200,216,234,0.28); text-align: center; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.sb-row-oncall td { background: rgba(240,248,255,0.30); }
.sb-row--admin-role td { background: #e0f2f1; }
.sb-row--admin-role .sb-td-role { border-left: 3px solid #26a69a; padding-left: 9px !important; }
.sb-empty { color: rgba(84,105,127,0.32) !important; font-weight: 400 !important; }
.sb-trainee-name { display: block; font-size: 11px; font-weight: 400; color: #5b7fa6; margin-top: 2px; }
.sb-gap-badge { display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; border-radius: 4px; padding: 1px 5px; margin-left: 3px; vertical-align: middle; }
.sb-gap-c { background: #fecaca; color: #7f1d1d; }
.sb-gap-e { background: #fee2e2; color: #991b1b; }
.sb-gap-m { background: #fef3c7; color: #92400e; }
.sb-gap-l { background: #f0fdf4; color: #166534; }
.sb-comment-row { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; margin-top: 2px; font-size: 12.5px; font-style: italic; color: #713f12; background: rgba(255,251,235,0.70); border: 1px solid rgba(253,200,90,0.42); border-radius: 10px; }
.sb-comment-label { font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #92400e; flex-shrink: 0; }
.sb-wknd-grid { display: flex; flex-direction: column; gap: 16px; }
.sb-wknd-col  { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-wknd-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 6px; }
.sb-wknd-name { font-size: 15px; font-weight: 800; color: #132336; }
.sb-wknd-date { font-size: 11px; color: #54697f; }

/* ── Day panel slide animations (swipe gesture) ─────────────────────────────── */
@keyframes sb-slide-from-right {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes sb-slide-from-left {
  from { transform: translateX(-28px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.sb-panel-slide-right { animation: sb-slide-from-right 0.22s ease-out; }
.sb-panel-slide-left  { animation: sb-slide-from-left  0.22s ease-out; }

/* ── Mobile week-nav layout ─────────────────────────────────────────────────── */
@media (max-width: 679px) {
  .pub-week-nav { justify-content: space-between; padding-left: 12px; padding-right: 12px; }
  .pub-week-label { min-width: 0; flex: 1; font-size: 13px; }
  .pub-week-btn { padding: 0 12px; font-size: 13px; }
}
@media (max-width: 400px) {
  .pub-week-btn { padding: 0 10px; font-size: 12px; }
  .pub-week-label { font-size: 12px; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@page { size: A4 landscape; margin: 12mm 14mm; }

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { overflow: hidden !important; }
  body { margin: 0; padding: 0; background: #fff; }
  /* JS print mode: clone only .wb-scroll-wrap into #_rosterPrintDiv and set data-roster-print.
     body[data-roster-print] > * hides everything including fixed/sticky chrome elements. */
  body[data-roster-print] > * { display: none !important; }
  body[data-roster-print] > #_rosterPrintDiv { display: block !important; margin: 0; padding: 0; width: 100%; }
  /* 186mm = A4 landscape content height (210mm − 12mm top − 12mm bottom @page margin).
     Using explicit mm instead of 100vh — Chrome resolves 100vh to the screen viewport height,
     not the printed page height, causing the element to extend onto a 2nd page. */
  #_rosterPrintDiv .wb-scroll-wrap { border: 2px solid #1a2d4a; overflow: hidden !important; height: calc(186mm - 4px); width: 100%; page-break-inside: avoid; break-inside: avoid; }
  /* NOTE: do not set height on <table> — Safari's print engine treats it as min-height and
     distributes excess height disproportionately to the first rows, making them very tall.
     The wrapper overflow:hidden clips the table to one page without this. */
  #_rosterPrintDiv .weekly-board { width: 100%; font-size: 7px; page-break-inside: avoid; break-inside: avoid; table-layout: fixed; }

  /* Header cells */
  .weekly-board th { background: #1a2d4a !important; color: #fff !important; padding: 2px 1px; text-align: center; vertical-align: middle; }
  .weekly-board td { text-align: center; vertical-align: middle; }

  /* Row label column */
  .weekly-board .left-col-item {
    min-width: 100px; max-width: 100px; width: 100px;
    padding: 2px 2px; text-align: left;
    font-size: 8px !important; font-weight: 700 !important;
    line-height: 1.05; color: #0f172a !important;
    background: #c8d4e0 !important;
  }
  .weekly-board thead th.left-col-item { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.02em; }
  .weekly-board tbody td.left-col-item  { font-size: 9px !important; font-weight: 800 !important; }

  /* Day/sub headers */
  .weekly-board .wb-day-hdr,
  .weekly-board .wb-we-hdr  { font-size: 9px; line-height: 1.05; }
  .weekly-board .wb-sub     { font-size: 7px; }

  /* Column widths */
  .wb-smo-hdr, .wb-smo { width: calc((100% - 100px) / 12); }
  .wb-tr-hdr,  .wb-tr  { width: calc((100% - 100px) / 12); }
  .wb-we-hdr-sub, .weekend-cell { width: calc((100% - 100px) / 6); }

  /* SMO/TR header colours */
  .weekly-board .wb-smo-hdr,
  .weekly-board .wb-tr-hdr  { background: #4a5f73 !important; color: #ffffff !important; }

  /* Cell tags */
  .weekly-board .tag      { padding: 0 1px; font-size: 8px !important; line-height: 1.05; font-weight: 600 !important; }
  .weekly-board .cell-btn { min-height: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1.05; }

  /* Row height */
  .weekly-board tbody tr { height: 15px; }

  /* Borders */
  .weekly-board .wb-tr-hdr,
  .weekly-board .wb-tr,
  .weekly-board .wb-day-hdr { border-right: 1.5px solid #3b4e62 !important; }
  .weekly-board .wb-we-hdr,
  .weekly-board .wb-we-hdr-sub,
  .weekly-board .weekend-cell { border-left: 1.5px solid #3b4e62 !important; }
  .weekly-board tbody tr.wb-loc-pm td,
  .weekly-board tbody tr.wb-loc-am > td.left-col-item { border-bottom: 1.5px solid #3b4e62 !important; }
  .weekly-board tbody tr.wb-teach-am > td.left-col-item,
  .weekly-board tbody td.wb-after-teach-we { border-bottom: 1.6px solid #3b4e62 !important; }
  .weekly-board tbody tr.wb-after-teach td { border-bottom: 1.6px solid #3b4e62 !important; }
  .weekly-board tbody tr.wb-single-row td  { border-bottom: 1.2px solid #4f647a !important; }

  /* Weekend stacked cells */
  .weekly-board .wb-we-stacked { padding: 1px 1px; }
  .weekly-board tbody tr.weekly-row-oncall td.wb-we-stacked,
  .weekly-board tbody tr.weekly-row-comment td.wb-we-stacked { vertical-align: middle !important; }

  /* Gap indicators: remove on print */
  .weekly-board td.wb-gap-c,
  .weekly-board td.wb-gap-e,
  .weekly-board td.wb-gap-m,
  .weekly-board td.wb-gap-l { box-shadow: none !important; background: transparent !important; }

  /* Weekend background */
  .weekend-cell { background: #f5faf0 !important; }

  /* Hide ghost labels and config button */
  .wb-ghost  { display: none !important; }
  #wbConfigBtn, #wbConfigPanel, #wbConfigBackdrop { display: none !important; }
}

/* ── Global keyboard-focus ring ──────────────────────────────────────────── */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}