/* =========================================================================
   Seniors' leave sheet.

   The colours are the workbook's own, lifted out of Duty Roster_Seniors.xlsx
   rather than picked to look like it, so a senior reading the page and a
   senior reading the spreadsheet are reading the same thing:

       #eaf1dd  light green   Saturday, including special Saturday
       #fde9d9  orange        Sunday
       #ff0000  red           working public holiday
       #e5b8b7  light red     everyone off, department closed
       #dbe5f1  light blue    late shift
       #ffffcc  light yellow  half a day of leave - am or pm

   The rest of the page borrows style.css, so it sits with the other sheets.
   ========================================================================= */

:root {
    --sr-sat:     #eaf1dd;
    --sr-sun:     #fde9d9;
    --sr-holiday: #ff0000;
    --sr-closed:  #e5b8b7;
    --sr-late:    #dbe5f1;
    --sr-half:    #ffffcc;
    --sr-line:    #d7dbe3;
    --sr-cell:    30px;
}

/* --------------------------------------------------------------- month bar */

.sr-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.sr-bar-spacer { margin-left: auto; }

.sr-monthnav { display: flex; align-items: center; gap: 6px; }

.sr-monthpick {
    padding: 7px 12px; font-size: 14px; font-weight: 600;
    border: 1px solid #d1d5db; border-radius: 8px;
    background: #fff; color: #1f2937; min-width: 180px;
}

/* ------------------------------------------------------------------ legend */

.sr-legend {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 16px; margin-bottom: 12px; font-size: 12px;
}
.sr-legend-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr-legend-title {
    font-weight: 700; color: #6b7280; text-transform: uppercase;
    letter-spacing: .04em; font-size: 11px; min-width: 44px;
}
.sr-legend-item { display: inline-flex; align-items: center; gap: 6px; color: #4b5563; }

.sr-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 20px; padding: 0 6px;
    border: 1px solid var(--sr-line); border-radius: 4px;
    font-size: 11px; font-weight: 700; background: #fff; color: #1f2937;
}
.sr-swatch {
    width: 20px; height: 20px; border-radius: 4px;
    border: 1px solid var(--sr-line); display: inline-block;
}
.sr-swatch.sr-day-sat     { background: var(--sr-sat); }
.sr-swatch.sr-day-sun     { background: var(--sr-sun); }
.sr-swatch.sr-day-holiday { background: var(--sr-holiday); }
.sr-swatch.sr-day-closed  { background: var(--sr-closed); }

/* -------------------------------------------------------------------- grid */

.sr-card { padding: 0; overflow: hidden; }

/* The grid is wider than any screen, so it scrolls inside its own card rather
   than pushing the page sideways - the side rail and the month bar stay put. */
.sr-scroll { overflow: auto; max-height: calc(100dvh - 300px); }

.sr-grid {
    border-collapse: separate; border-spacing: 0;
    font-size: 12px; white-space: nowrap;
}

.sr-grid th, .sr-grid td {
    border-right: 1px solid var(--sr-line);
    border-bottom: 1px solid var(--sr-line);
    padding: 0; text-align: center; vertical-align: middle;
}

/* Two sticky headers and one sticky first column. The name column has to sit
   above the day headers where they cross, hence the third z-index. */
.sr-grid thead th {
    position: sticky; background: #f8fafc; z-index: 2;
    font-weight: 700; color: #374151;
}
.sr-row-dow th { top: 0; height: 22px; font-size: 10px; color: #6b7280; }
.sr-row-num th { top: 22px; height: 22px; font-size: 11px; }

.sr-name, .sr-name-head {
    position: sticky; left: 0; z-index: 3;
    background: #f8fafc; min-width: 96px;
    font-weight: 600; color: #1f2937;
}
.sr-name-head { z-index: 4; }
/* The line between the names and the days: heavier and darker than the
   count dividers, because the names are the sheet's edge and this line was
   asked for three times. The first two attempts put it on `.sr-name` above,
   where `.sr-grid th` - a class and an element against a bare class - beat
   it, and the sheet went on drawing the 1px line it always had. The same
   contest is why the names sit centred with no padding, whatever the rule
   above once said; that look is the one everybody knows and is kept. */
.sr-grid th.sr-name, .sr-grid th.sr-name-head { border-right: 4px solid #3b4149; }

.sr-day { width: var(--sr-cell); min-width: var(--sr-cell); }

/* The day's colour, on the header and on every cell in the column alike. */
.sr-day-sat     { background: var(--sr-sat); }
.sr-day-sun     { background: var(--sr-sun); }
.sr-day-holiday { background: var(--sr-holiday); color: #fff; }
.sr-day-closed  { background: var(--sr-closed); }

/* The header keeps the day colour even though thead sets its own background. */
.sr-grid thead th.sr-day-sat     { background: var(--sr-sat); }
.sr-grid thead th.sr-day-sun     { background: var(--sr-sun); }
.sr-grid thead th.sr-day-holiday { background: var(--sr-holiday); color: #fff; }
.sr-grid thead th.sr-day-closed  { background: var(--sr-closed); }

/* ---- the gap between the treatment and the planning seniors -----------
   A thin dark band across the whole row: the two groups read as two blocks
   rather than one list of twelve. Dark on purpose - the day colours around
   it are all pale, and a pale gap would read as an empty row. */
.sr-grid tbody tr.sr-gap td.sr-gap-cell {
    height: 5px; padding: 0; border: 0;
    background: #475569;
    border-top: 1px solid #334155; border-bottom: 1px solid #334155;
}
/* The name column is sticky and painted; the band runs under it too. */
.sr-grid tbody tr.sr-gap td.sr-gap-cell { position: static; }

/* ------------------------------------------------------------------- cells */

.sr-cell {
    height: var(--sr-cell); width: var(--sr-cell); min-width: var(--sr-cell);
    font-size: 10px; font-weight: 700; color: #1f2937;
    cursor: default; user-select: none; -webkit-user-select: none;
    position: relative;
}
body.is-editable .sr-cell:not(.sr-locked) { cursor: pointer; }
.sr-cell:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

/* A closed day takes no mark at all, so it does not offer to. */
.sr-locked { cursor: not-allowed; }

/* The marks that carry a colour, and the two that deliberately do not.
   
   **AL and CL are left plain.** They are most of what is on the sheet - 243
   and 99 days of 2026 between them - and colouring them painted over the day
   colours underneath, which are the ones that have to be read: which Saturday,
   which holiday, which closure. Leave is legible from the letters. The one
   time leave takes a colour is when it is half a day, and that yellow - the
   workbook's own - means something precisely because nothing around it is
   coloured. */
.sr-code-trip { background: #fae8ff; font-size: 9px; }
.sr-code-p    { background: var(--sr-late); }
.sr-code-od   { background: #dcfce7; }
.sr-code-x    { background: #e5e7eb; color: #6b7280; }
.sr-code-al, .sr-code-cl { color: #374151; }

/* A mark on a coloured day keeps the mark's colour - what somebody is doing
   matters more than which day it is, and the column header still says the day.
   OD on a red holiday is the exception: it is the whole point of the red. */
.sr-cell.sr-day-holiday          { color: #fff; }
.sr-cell.sr-day-holiday.sr-code-od {
    background: var(--sr-holiday); color: #fff;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--sr-holiday);
}


/* Selected, while a run is being painted. */
.sr-sel {
    box-shadow: inset 0 0 0 2px #2563eb;
    background-image: linear-gradient(rgba(37, 99, 235, .12), rgba(37, 99, 235, .12));
}

/* ------------------------------------------------------------------ counts */

.sr-count-head {
    border-left: 2px solid #cbd5e1;
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; padding: 0 6px;
}
.sr-count-sub { font-size: 10px; color: #9ca3af; font-weight: 600; width: 34px; }

/* Each block's head wears the colour its figures are written in, so the two
   totals read as two things - duties and late shifts - rather than grey
   columns that all say Mth and Yr. Grey was the old head, and the feedback
   was that it did not stand apart from the days beside it. */
.sr-grid thead th.sr-count-head-late, .sr-grid thead th.sr-count-sub-late { background: #dbeafe; color: #1d4ed8; }
.sr-grid thead th.sr-count-sub-late { opacity: .85; }

/* Sat OD - the seniors' own tally, and the only Sat OD column there is now.
   The header is a button for whoever may edit, the way to the panel, and
   reads as a heading to everyone else. */
.sr-grid thead th.sr-count-head-tally {
    background: #dcfce7; color: #166534; padding: 0; min-width: 52px;
    border-left: 2px solid #cbd5e1;
}
.sr-tally-open, .sr-count-head-tally > span {
    display: block; width: 100%; height: 100%; padding: 4px 6px; box-sizing: border-box;
    font: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; line-height: 1.25; color: inherit;
}
.sr-tally-open {
    border: 0; background: none; cursor: pointer; border-radius: 0;
}
.sr-tally-open:hover, .sr-tally-open:focus-visible { background: #86efac; outline: none; }
/* The i beside the heading: it says the column can be pressed. Part of the
   button rather than a control of its own, so a press anywhere - the word or
   the i - opens the panel. */
.sr-tally-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 11px; height: 11px; margin-left: 3px; vertical-align: 1px;
    border: 1px solid currentColor; border-radius: 50%;
    font: italic 700 8px/1 Georgia, "Times New Roman", serif;
    text-transform: none; letter-spacing: 0; cursor: help;
}
.sr-tally-open:hover .sr-tally-i { background: #166534; color: #dcfce7; border-color: #166534; }
.sr-count-tally {
    color: #166534; background: #f0fdf4; border-left: 2px solid #cbd5e1;
}
.sr-grid thead th.sr-count-head-ph {
    background: #ffe4e6; color: #9f1239; min-width: 52px;
}
.sr-count.sr-count-ph { background: #fff1f2; color: #9f1239; }
/* A tally changed in the panel and not yet saved: the amber the rest of the
   page uses for work in hand, so the column and the Save button agree. */
.sr-count-tally.sr-count-pending { background: #fef3c7; color: #b45309; }

.sr-count {
    width: 34px; min-width: 34px; height: var(--sr-cell);
    font-weight: 700; font-size: 12px; background: #f8fafc; color: #374151;
}
.sr-count-late { color: #1d4ed8; }
.sr-count-ytd  { background: #eef2f7; }
/* The month column of the pair carries the divider, so the late shifts read
   as one block rather than two loose columns. */
td.sr-count-late:not(.sr-count-ytd) { border-left: 2px solid #cbd5e1; }

/* ---- the tally panel ---------------------------------------------------- */
.sr-tally-box { max-width: 660px; }

/* Without the lock: said once, at the top, rather than on every dead button. */
.sr-tally-locked {
    margin: 0 0 12px; padding: 8px 11px; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a;
    font-size: 12px; color: #92400e;
}

/* Who a batch change is for. The two sides are the sheet's own - the
   treatment seniors above the dark band, the planning seniors below it. */
.sr-tally-pick {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 10px; font-size: 12px;
}
.sr-tally-pick-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #6b7280;
}
.sr-tally-lnk {
    background: none; border: 0; padding: 0; font: inherit;
    color: #2563eb; cursor: pointer;
}
.sr-tally-lnk:hover { text-decoration: underline; }

.sr-tally-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sr-tally-table th {
    text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: #6b7280; padding: 4px 8px; border-bottom: 1px solid #e5e7eb;
}
.sr-tally-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.sr-tally-tick  { width: 1%; padding-right: 0; }
.sr-tally-tick input { margin: 0; display: block; }
.sr-tally-name  { font-weight: 600; color: #1f2937; white-space: nowrap; }
/* Which side of the department, beside the name: the same two words the
   panel's Tick line offers, so a row and the button that picked it agree. */
.sr-tally-side {
    margin-left: 6px; padding: 1px 5px; border-radius: 999px;
    background: #eef2f7; color: #64748b;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.sr-tally-value { font-weight: 800; font-size: 15px; color: #14532d; text-align: center; width: 60px; }
.sr-tally-since { color: #6b7280; font-size: 12px; white-space: nowrap; }
.sr-tally-acts  { text-align: right; white-space: nowrap; }
.sr-tally-acts .btn { margin-left: 4px; min-width: 38px; }
/* A row with something waiting for Save, like a dirty cell on the grid. */
.sr-tally-table tr.is-dirty td { background: #fffbeb; }
.sr-tally-table tr.is-dirty .sr-tally-value { color: #b45309; }

/* The reset: an arrow going back round rather than a word, so every row's
   buttons are the same width. What it does is on hover and for a reader. */
.sr-tally-reset { color: #b45309; min-width: 38px; }
.sr-tally-reset svg { display: block; margin: 0 auto; }
.sr-tally-reset:hover:not(:disabled) { background: #fffbeb; border-color: #fcd34d; }

/* One change for everybody ticked. */
.sr-tally-batch {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f5;
}
.sr-tally-batch-what { font-size: 12px; font-weight: 600; color: #9ca3af; }
.sr-tally-batch-what.is-on { color: #1f2937; }
.sr-tally-batch-acts { display: flex; align-items: center; gap: 4px; }
.sr-tally-from-label {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
    font-size: 12px; color: #6b7280;
}
.sr-tally-from-label input[type="date"] {
    font-size: 13px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px;
    font-family: inherit; color: #1f2937;
}
/* What has been changed by hand: five lines and a pair of arrows, so a long
   history is readable without the panel growing to hold it. */
.sr-tally-log { margin-top: 14px; font-size: 12px; color: #4b5563; }
.sr-tally-log-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: #6b7280; margin-bottom: 4px;
}
.sr-tally-pager { display: inline-flex; align-items: center; gap: 4px; }
.sr-tally-page-at {
    font-size: 10px; letter-spacing: 0; color: #9ca3af;
    font-variant-numeric: tabular-nums; min-width: 66px; text-align: center;
}
.sr-tally-page {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    color: #6b7280; cursor: pointer;
}
.sr-tally-page:hover:not(:disabled) { border-color: #93c5fd; color: #2563eb; background: #eff6ff; }
.sr-tally-page:disabled { color: #e5e7eb; cursor: default; }
.sr-tally-log-line { padding: 2px 0; border-top: 1px dotted #e5e7eb; }

.sr-tally-err { margin-top: 10px; font-size: 12px; font-weight: 600; color: #b91c1c; }

/* On a wide screen the grid is narrower than its card, which left a bare strip
   down the right that read as a column somebody had forgotten to fill. This
   column takes the slack instead, so every real column keeps its own width and
   the table still finishes at the card's edge. */
.sr-fill { width: 100%; border-right: 0 !important; background: #fff; }
.sr-grid thead th.sr-fill { background: #f8fafc; }

.sr-help { padding: 10px 16px; border-top: 1px solid #eef1f5; }
.sr-help kbd {
    display: inline-block; padding: 1px 5px; border-radius: 4px;
    border: 1px solid #d1d5db; border-bottom-width: 2px;
    background: #fff; font-family: inherit; font-size: 11px; font-weight: 700;
    color: #374151;
}

/* ------------------------------------------------------- floating palette */

/* `display: flex` on a class beats the browser's own [hidden] rule, so the
   hidden state has to be said again here or the palette sits on the page from
   the moment it loads, offering to mark a cell nobody has picked. */
.sr-palette[hidden] { display: none; }

.sr-palette {
    position: fixed; z-index: 40;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 6px; border-radius: 10px;
    background: #fff; border: 1px solid #d1d5db;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
.sr-palette-count {
    font-size: 11px; font-weight: 700; color: #6b7280;
    padding: 0 6px 0 4px; border-right: 1px solid #e5e7eb; align-self: stretch;
    display: flex; align-items: center;
}
.sr-palette-btn {
    min-width: 34px; height: 28px; padding: 0 7px;
    border: 1px solid var(--sr-line); border-radius: 6px;
    background: #fff; color: #1f2937;
    font-size: 11px; font-weight: 700; cursor: pointer;
}
.sr-palette-btn:hover { filter: brightness(.94); }
/* Full / AM / PM, as one segmented control with the H key on its corner. */
/* The two rows of the palette: the marks, and - only while the cells picked
   hold AL or CL - the half-day row under them. */
.sr-palette-row { display: flex; align-items: center; gap: 4px; }
.sr-palette-half-row { display: none; padding-top: 6px; border-top: 1px solid #e5e7eb; }
.sr-palette.has-leave .sr-palette-half-row { display: flex; }
.sr-palette-half-label {
    font-size: 11px; font-weight: 700; color: #6b7280; padding: 0 6px 0 4px;
}
.sr-palette-half-hint { font-size: 10px; color: #9ca3af; padding-left: 4px; }
.sr-palette-half {
    position: relative; display: inline-flex; align-items: center;
    margin: 0 2px; padding: 0 12px 0 0;
}
.sr-palette-halfbtn {
    min-width: 30px; padding: 0 6px; border-radius: 0; margin-left: -1px;
    font-size: 10px; color: #6b7280; background: #fff;
}
.sr-palette-halfbtn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.sr-palette-halfbtn:nth-last-child(2) { border-radius: 0 6px 6px 0; }
.sr-palette-halfbtn.is-on {
    background: #1e40af; border-color: #1e40af; color: #fff; position: relative; z-index: 1;
}
.sr-key-half { right: 2px; top: 1px; }
/* The mark the cells picked out already carry: its button is ringed, so a
   glance at the palette says what the day is before anything is pressed. */
.sr-palette-btn.is-current {
    box-shadow: 0 0 0 2px #2563eb; border-color: #2563eb; filter: brightness(.97);
}
.sr-palette-btn.is-current.sr-code-al,
.sr-palette-btn.is-current.sr-code-cl { background: #eff6ff; color: #1e40af; }
.sr-palette-clear { background: #f3f4f6; color: #6b7280; font-size: 15px; }

/* -------------------------------------------------------------- batch modal */

.sr-modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sr-modal[hidden] { display: none; }

.sr-modal-box {
    background: #fff; border-radius: 12px; width: 100%; max-width: 560px;
    max-height: 90dvh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
}
.sr-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #eef1f5;
}
.sr-modal-x {
    border: 0; background: none; font-size: 24px; line-height: 1;
    color: #9ca3af; cursor: pointer; padding: 0 4px;
}
.sr-modal-body { padding: 16px 20px; overflow: auto; }
.sr-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid #eef1f5;
}

.sr-field { margin-bottom: 14px; }
.sr-field-label {
    display: block; font-size: 12px; font-weight: 700; color: #374151;
    margin-bottom: 6px;
}
.sr-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sr-field-row .sr-field { flex: 1 1 180px; }
.sr-field-check { display: flex; align-items: flex-end; padding-bottom: 8px; }

.sr-field input[type="date"], .sr-field select {
    width: 100%; padding: 7px 10px; font-size: 14px;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #1f2937;
}

.sr-people {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 132px; overflow: auto;
    padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafbfc;
}
.sr-person, .sr-dow, .sr-check {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #374151; cursor: pointer;
}
.sr-person { padding: 3px 8px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; }
.sr-person:has(input:checked) { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

.sr-people-actions { display: flex; gap: 6px; margin-top: 6px; }
.sr-dows { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }

.sr-batch-preview { margin-top: 8px; min-height: 18px; }
.sr-batch-error { margin: 10px 0 0; }

/* ------------------------------------------------------------------- toast */

.sr-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 80; padding: 10px 18px; border-radius: 999px;
    background: #111827; color: #fff; font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
}
.sr-toast[hidden] { display: none; }
.sr-toast.sr-toast-bad { background: #b91c1c; }

/* ------------------------------------------------------------------- print */

@media print {
    .no-print { display: none !important; }
    body { padding: 0; background: #fff; }
    .sr-card { border: 0; box-shadow: none; }
    .sr-scroll { overflow: visible; max-height: none; }
    .sr-grid { font-size: 9px; }
    /* Backgrounds are the whole meaning of this sheet, so they are printed. */
    .sr-grid th, .sr-grid td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* Narrow screens: the cells shrink rather than the grid growing a second
   scrollbar, and the name column gives up some of its width. */
@media (max-width: 700px) {
    :root { --sr-cell: 26px; }
    .sr-name, .sr-name-head { min-width: 76px; font-size: 11px; }
    .sr-scroll { max-height: calc(100dvh - 260px); }
}

/* =========================================================================
   Year view - the workbook's own shape, twelve blocks down the page - with a
   year-to-date table over the top of them.
   ========================================================================= */

/* The source line under the title: where the sheet came from and when. */
.sr-source { margin-top: 3px; }
.sr-source b { color: #4b5563; font-weight: 600; }

/* Month / Year, as two tabs rather than a dropdown. */
.sr-viewtabs {
    display: inline-flex; padding: 3px; gap: 2px;
    background: #e9edf3; border-radius: 9px;
}
.sr-viewtab {
    padding: 5px 14px; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: #4b5563;
    text-decoration: none; line-height: 1.4;
}
.sr-viewtab:hover  { color: #1f2937; }
.sr-viewtab.active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15,23,42,.12); }

/* ------------------------------------------------------------ YTD table */

.sr-ytd { padding: 0; margin-bottom: 12px; overflow: hidden; }
.sr-ytd-head {
    padding: 14px 16px 10px;
    display: flex; flex-direction: column; gap: 3px;
}
.sr-ytd-scroll { overflow-x: auto; }

.sr-ytd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sr-ytd-table th, .sr-ytd-table td {
    padding: 7px 10px; text-align: center; border-top: 1px solid #eef1f5;
}
.sr-ytd-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; background: #f8fafc; border-top: 0;
    position: sticky; top: 0;
}
.sr-ytd-name { text-align: left !important; font-weight: 600; color: #1f2937; white-space: nowrap; }
.sr-ytd-table tbody tr:hover { background: #f8fafc; }

/* The two columns worth comparing get a bar behind the number, so who is
   carrying the Saturdays is a glance rather than a read down the column. */
.sr-ytd-od, .sr-ytd-ph, .sr-ytd-late { position: relative; min-width: 74px; }
.sr-ytd-od b, .sr-ytd-ph b, .sr-ytd-late b { position: relative; }
.sr-ytd-bar {
    position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px;
    border-radius: 2px; background: #e5e7eb; overflow: hidden;
}
.sr-ytd-bar::before {
    content: ''; position: absolute; inset: 0 auto 0 0;
    width: var(--w, 0%); border-radius: 2px;
}
.sr-ytd-od   .sr-ytd-bar::before { background: #16a34a; }
.sr-ytd-ph   .sr-ytd-bar::before { background: #e11d48; }
.sr-ytd-late .sr-ytd-bar::before { background: #2563eb; }
.sr-ytd-od   b { color: #166534; }
.sr-ytd-ph   b { color: #9f1239; }
.sr-ytd-late b { color: #1d4ed8; }
.sr-ytd-cl   b { color: #92400e; }

/* ------------------------------------------------------- the month blocks */

.sr-monthblock { margin-bottom: 12px; }
.sr-monthblock-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 10px 16px 8px;
}
.sr-monthblock-head h2 { font-size: 15px; color: #1f2937; }

/* In year view each block sizes to its own content - twelve nested scrollers
   all claiming most of the screen would leave nothing to scroll the page by. */
.sr-monthblock .sr-scroll { max-height: none; }

@media print {
    .sr-viewtabs, .sr-monthblock-head .link { display: none !important; }
    .sr-monthblock { break-inside: avoid; page-break-inside: avoid; }
    .sr-ytd { break-after: page; page-break-after: always; }
}

/* =========================================================================
   The lock, the save, and the day's remark.
   ========================================================================= */

.sr-mark { display: block; line-height: 1; }

/* Half a day of leave: the workbook's yellow, laid over whatever day colour
   is underneath - a half day is what its yellow meant, and a Saturday's green
   would hide it - with "am" or "pm" in small under the mark, or "½" for a
   half the workbook never said which of. Empty and invisible on a whole day. */
.sr-half-tag {
    display: block; line-height: 1; margin-top: 1px;
    font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #a16207;
}
.sr-half-tag:empty { display: none; }
.sr-cell.sr-half, .sr-chip.sr-half {
    background-color: var(--sr-half);
    color: #713f12;
}
.sr-chip.sr-half { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.sr-chip.sr-half .sr-half-tag { margin-top: 1px; }

/* A dog-ear in the bottom-left corner says this day carries a note, whichever
   way the week column is set. */
.sr-has-note::before {
    content: ''; position: absolute; left: 1px; bottom: 1px;
    width: 0; height: 0;
    border-bottom: 5px solid #6366f1; border-right: 5px solid transparent;
}

/* ------------------------------------------------- the week remark column */

/* One column at the end of every week, holding that senior's notes for it.
   Written on the day, read here - see refreshWeek() in seniors.js.

   Shut, it is a 16px strip: enough to keep the week boundary visible and to
   fly a flag on the weeks that have something in them, so a hidden remark is
   never a lost one. Open, it takes the width of the words. */
.sr-wk-head, .sr-wk {
    border-left: 2px solid #cbd5e1;
    width: 16px; min-width: 16px; max-width: 16px;
    overflow: hidden; padding: 0;
    transition: width .12s ease, min-width .12s ease, max-width .12s ease;
}
.sr-wk-head { background: #f1f5f9 !important; }
.sr-wk      { background: #fbfcfe; }

.sr-wk-label, .sr-wk-text { display: none; }
.sr-wk-mini {
    display: block; font-size: 9px; color: #94a3b8; font-weight: 700;
    writing-mode: vertical-rl; line-height: 16px;
}

/* The flag on a shut column: a week with notes in it. */
.sr-wk-flag { display: none; }
.sr-wk.has-note .sr-wk-flag {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: #6366f1; margin: 0 auto;
}

/* Open. */
body.sr-remarks-on .sr-wk-head,
body.sr-remarks-on .sr-wk {
    width: 168px; min-width: 168px; max-width: 168px;
    padding: 3px 7px; white-space: normal;
}
body.sr-remarks-on .sr-wk-mini { display: none; }
/* Written to out-specify `.sr-wk.has-note .sr-wk-flag` above, which would
   otherwise keep the dot lit next to the words it stands in for. */
body.sr-remarks-on .sr-wk.has-note .sr-wk-flag,
body.sr-remarks-on .sr-wk-flag { display: none; }
body.sr-remarks-on .sr-wk-label {
    display: block; font-size: 10px; color: #64748b; letter-spacing: .02em;
    line-height: 1.3; text-transform: none; font-weight: 700;
}
body.sr-remarks-on .sr-wk-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-align: left;
    font-size: 9px; font-weight: 500; line-height: 1.25; color: #4b5563;
}
body.sr-remarks-on .sr-wk.has-note { background: #f5f3ff; }
body.sr-remarks-on .sr-cell { height: 34px; }

/* The switch beside Batch set. */
.sr-switch {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #374151; cursor: pointer; user-select: none;
}

/* ---- the remarks guide under the sheet ------------------------------------ */
.sr-guide { padding: 16px 20px; }
.sr-guide h2 { font-size: 15px; margin: 0 0 10px; }
.sr-guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
@media (max-width: 760px) { .sr-guide-cols { grid-template-columns: 1fr; } }
.sr-guide h3 {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13.5px; margin: 0 0 8px; color: #111827;
}
.sr-guide h3 .muted { font-weight: 500; font-size: 12px; }
.sr-guide-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    background: #2563eb; color: #fff; font-size: 12px; font-weight: 700;
}
.sr-guide-list { margin: 0; padding-left: 20px; font-size: 13px; color: #374151; line-height: 1.6; }
.sr-guide-list li { margin-bottom: 6px; }
.sr-guide-list li:last-child { margin-bottom: 0; }
/* The controls, drawn as they look on the page so they can be matched by eye. */
.sr-guide-ctl {
    display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
    padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600;
    border: 1px solid #d1d5db; background: #fff; color: #374151;
}
.sr-guide-box {
    width: 13px; height: 13px; border: 1.5px solid #6b7280; border-radius: 3px;
    background: #fff; position: relative;
}
.sr-switch-demo .sr-guide-box::after {
    content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
    border: solid #2563eb; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sr-guide-lock { color: #1d4ed8; border-color: #bfdbfe; }
.sr-guide-lock.is-mine { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.sr-guide-lock .lock-ico { width: 14px; height: 14px; }
.sr-guide-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: default; }
.sr-guide-cell {
    display: inline-block; width: 18px; height: 18px; vertical-align: middle;
    border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; position: relative;
}

/* ------------------------------------------------- unsaved, and read-only */

/* A cell changed but not yet saved. The corner tick is small on purpose: the
   point is to be able to find them, not to make the grid shout. */
.sr-dirty { box-shadow: inset 0 0 0 2px #f59e0b; }
.sr-dirty.sr-sel { box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #fcd34d; }

/* The counts are the server's arithmetic. While anything is unsaved they are
   no longer true, so they say so rather than sitting there looking official. */
body.sr-counts-stale .sr-count { opacity: .45; font-style: italic; }
/* The manual tally is not the server's arithmetic waiting to be redone - a
   pending change to it is already the figure it will be, so it stays bright
   while the cell counts beside it go dim. */
body.sr-counts-stale .sr-count-tally.sr-count-pending { opacity: 1; font-style: normal; }

/* Without the lock the sheet is drawn exactly the same and simply does not
   take a click - the padlock beside Save is where the explanation lives. */
body.sheet-readonly .sr-cell { cursor: default !important; }
body.sheet-readonly .sr-palette { display: none !important; }

/* ------------------------------------------------------ lock + save state */
/* Lifted from planning.css so this page carries its own copy rather than
   pulling in a 37KB stylesheet for forty lines of it. Kept visually identical:
   the padlock means the same thing on both sheets and should look it. */

.lock-slot { display: inline-flex; align-items: center; gap: 8px; }

.lock-btn {
    background: #fff; color: #1d4ed8; border: 1px solid #bfdbfe;
    display: inline-flex; align-items: center; gap: 6px;
}
.lock-btn:hover:not(:disabled) { background: #eff6ff; border-color: #60a5fa; }
.lock-btn.is-mine   { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.lock-btn.is-mine:hover:not(:disabled) { background: #d1fae5; border-color: #34d399; }
.lock-btn.is-force  { background: #fff; color: #b91c1c; border-color: #fecaca; }
.lock-btn.is-force:hover:not(:disabled) { background: #fef2f2; border-color: #fca5a5; }
.lock-ico { width: 15px; height: 15px; }

.lock-note {
    font-size: 12px; color: #6b7280;
    display: inline-flex; align-items: center; gap: 5px;
}
.lock-note.is-mine   { color: #065f46; }
.lock-note.is-theirs { color: #b91c1c; }
.lock-slot.is-nudge .lock-btn.is-mine { animation: sr-nudge 1s ease-in-out 3; }

@keyframes sr-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .lock-slot.is-nudge .lock-btn.is-mine { animation: none; outline: 2px solid #34d399; }
}

.save-state {
    font-size: 12px; color: #6b7280;
    display: inline-flex; align-items: center; gap: 6px;
}
.save-state::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #9ca3af; flex: none;
}
.save-state[data-status="lock-open"]   { color: #065f46; }
.save-state[data-status="lock-open"]::before   { background: #059669; }
.save-state[data-status="lock-held"]   { color: #1d4ed8; }
.save-state[data-status="lock-held"]::before   { background: #3b82f6; }
.save-state[data-status="lock-denied"] { color: #b91c1c; }
.save-state[data-status="lock-denied"]::before { background: #ef4444; }
.save-state[data-status="lock-warn"]   { color: #b45309; }
.save-state[data-status="lock-warn"]::before   { background: #f59e0b; }

.grid-save .cnt, .grid-undo .cnt { font-variant-numeric: tabular-nums; }

.sr-palette-note { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* The shortcut letter on each palette button, so the button and the hint line
   under the grid read as one thing rather than two lists. */
.sr-palette-btn { position: relative; padding-right: 15px; }
.sr-key {
    position: absolute; right: 2px; top: 1px;
    font: 700 8px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #9ca3af; background: none; border: 0; padding: 0;
}
.sr-palette-clear .sr-key { right: 1px; font-size: 7px; }
.sr-help-sep { color: #d1d5db; margin: 0 2px; }

/* ------------------------------------------------------- the remark editor */
/* A box of the page's own. It replaced window.prompt(), which Chrome lets a
   viewer switch off permanently - see applyRemark() in seniors.js. */

.sr-note-pop {
    position: fixed; z-index: 70; width: 300px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
    padding: 10px;
}
.sr-note-pop[hidden] { display: none; }

.sr-note-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
    font-size: 11px; font-weight: 700; color: #374151;
}
.sr-note-count { font-weight: 500; color: #9ca3af; font-variant-numeric: tabular-nums; }

.sr-note-pop textarea {
    width: 100%; resize: vertical; min-height: 54px;
    padding: 7px 9px; font: inherit; font-size: 13px; line-height: 1.4;
    border: 1px solid #d1d5db; border-radius: 7px;
    color: #1f2937; background: #fff;
}
.sr-note-pop textarea:focus {
    outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
}
.sr-note-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.sr-note-foot .btn-primary { margin-left: 0; }