@import url('../assets/mobile-common.css?v=20261025-r1');
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    --page-pattern-size: 360px;
    --page-pattern-opacity: 0.05;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f4f6fa;
    color: #1f2937;
    margin: 0;
    padding: 24px;
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("assets/pattern_2x2.png");
    background-repeat: repeat;
    background-size: var(--page-pattern-size) auto;
    opacity: var(--page-pattern-opacity);
}
body > * {
    position: relative;
    z-index: 1;
}
.container { width: 100%; max-width: 880px; margin: 0 auto; }
.container.narrow { max-width: 460px; }
.container.wide { max-width: 1400px; }
body:has(.version-sidebar) .container.wide {
    padding-left: 62px;
    transition: padding-left .2s ease;
}
body:has(.version-sidebar:hover) .container.wide,
body:has(.version-sidebar:focus-within) .container.wide {
    padding-left: 292px;
}

h1 { margin: 0 0 4px; font-size: 26px; }
h3 { margin: 0 0 4px; font-size: 18px; }
.workbook-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.workbook-title small {
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
}

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.page-head .right { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.export-menu { position: relative; }
.export-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu-options {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.export-menu-options a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: #111827;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.export-menu-options a:hover { background: #eef2f7; }

.card {
    background: #fff; border-radius: 10px; padding: 20px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    margin-bottom: 16px;
}

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.field small { font-weight: 400; color: #6b7280; }
.field input[type=text],
.field input[type=password],
.field input[type=date],
.field textarea {
    width: 100%; padding: 9px 11px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 14px; font-family: inherit;
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.radio-row { display: flex; gap: 14px; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.radio input { margin: 0; }

.range-list {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px;
}
.range-row {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
}
.range-cell {
    flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.range-label {
    font-size: 12px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: .04em;
}
.range-row .btn-icon { align-self: flex-end; }

/* ---- Period box on a date range --------------------------------------------
   Narrower than the date cells either side of it: it holds one of three short
   words, not a date. Everything else - height, border, radius, focus ring -
   matches .field input[type=date] so the row reads as one control, which a
   browser's own select emphatically does not. */
.range-cell.range-period { flex: 0 1 150px; }

.range-period-select {
    width: 100%;
    padding: 9px 32px 9px 11px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background-color: #fff;
    /* Its own chevron: appearance:none removes the native one, and the native
       one never matched the rest of the form anyway. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s;
}
.range-period-select:hover { border-color: #9ca3af; }
.range-period-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
/* A half day is the exception, so it is tinted amber: which rows are half days
   is then something you can see down the column without reading any of them.
   Set from the value by JS - CSS cannot select on a select's current value. */
.range-period-select[data-period="am"],
.range-period-select[data-period="pm"] {
    background-color: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
    font-weight: 600;
}

.range-owner {
    flex: 0 0 100%;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.range-display {
    margin: 4px 0 0; padding-left: 18px; display: flex;
    flex-direction: column; gap: 2px;
}
.range-display li { font-variant-numeric: tabular-nums; }

.btn {
    display: inline-block; padding: 9px 16px; border-radius: 6px;
    border: 1px solid transparent; font-size: 14px; font-weight: 500;
    cursor: pointer; text-decoration: none; transition: filter .12s, transform .05s;
}
.btn:hover { filter: brightness(.95); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: #2563eb; color: #fff; }
.btn-secondary { background: #fff; color: #1f2937; border-color: #d1d5db; }
/* Small icon inside a button, tinted to match the button's text color.
   brightness(0) first flattens the source PNG (black or white art) to solid
   black, then invert/opacity re-tints it. */
.btn-ico {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 7px;
    filter: brightness(0) opacity(.78);
}
.btn-primary .btn-ico,
.btn-success .btn-ico,
.btn-danger .btn-ico { filter: brightness(0) invert(1); }
.btn-success { background: #10b981; color: #fff; }
.btn-danger { background: #ef4444; color: #fff; }
/* Light yellow, matching the pending card/status colours. Dark amber text
   keeps it readable on the pale background. */
.btn-warning { background: #fde68a; color: #78350f; border-color: #fcd34d; }
/* Light grey twin of .btn-warning, matching the unreviewed card/status colours. */
.btn-neutral { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.comp-map-btn { background: #facc15; color: #fff; border-color: #eab308; }
.comp-map-btn:hover { background: #eab308; color: #fff; }
/* Toggle for the HV / PT / AKN location pills. */
.slot-badge-toggle { background: #0ea5e9; color: #fff; border-color: #0284c7; }
.slot-badge-toggle:hover { background: #0284c7; color: #fff; }
.slot-badge-toggle-off { background: #94a3b8; border-color: #64748b; }
.slot-badge-toggle-off:hover { background: #64748b; }
.hide-slot-badges .slot-badge { display: none; }

/* ---- Header action pills -------------------------------------------------
   The buttons in the page header are pills: a white circular icon badge on the
   left, then the label in white caps on one solid colour. Colour is what tells
   them apart at a glance — sky blue pushes the feed out to the Leave & Duty
   List, amber exports the AL list, green downloads, red is the PDF, slate is
   the way out. Each button sets --pill once; the badge reads that same value
   for its glyph, so a colour is changed in one place. */
.pill-btn {
    --pill: #2563eb;
    --pill-hover: #1d4ed8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px 5px 5px;
    border: 0;
    border-radius: 999px;
    background: var(--pill);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(15,23,42,.18);
    transition: background .15s, box-shadow .15s, transform .05s;
}
.pill-btn:hover { background: var(--pill-hover); box-shadow: 0 5px 14px rgba(15,23,42,.24); }
.pill-btn:active { transform: translateY(1px); }
.pill-btn:focus-visible { outline: 2px solid var(--pill-hover); outline-offset: 2px; }
.pill-btn[disabled] { opacity: .6; cursor: default; box-shadow: none; }

.pill-ico {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--pill);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(15,23,42,.22);
}
.pill-ico svg { width: 18px; height: 18px; display: block; }
.pill-label { white-space: nowrap; }

.pill-blue  { --pill: #2563eb; --pill-hover: #1d4ed8; }
.pill-sky   { --pill: #38bdf8; --pill-hover: #0ea5e9; }
.pill-amber { --pill: #f59e0b; --pill-hover: #d97706; }
.pill-green { --pill: #22c55e; --pill-hover: #16a34a; }
.pill-red   { --pill: #ef4444; --pill-hover: #dc2626; }
.pill-slate { --pill: #475569; --pill-hover: #334155; }
/* Direct Export reports its own result in place of its label, so it borrows
   green or red for the few seconds that message is up. */
.pill-btn.is-ok  { --pill: #16a34a; --pill-hover: #15803d; }
.pill-btn.is-bad { --pill: #dc2626; --pill-hover: #b91c1c; }

.btn-icon {
    width: 32px; height: 32px; border-radius: 6px; border: 1px solid #d1d5db;
    background: #fff; cursor: pointer; font-size: 18px; line-height: 1;
    color: #6b7280;
}
.btn-icon:hover { background: #fef2f2; color: #ef4444; border-color: #fecaca; }

/* ---- Icon action buttons (admin request cards) --------------------------
   Each button keeps its original background colour (.btn-success/.btn-danger/
   .btn-warning/.btn-neutral/.btn-secondary) but shows only its icon. The text
   label appears as a floating tooltip on hover/focus. The icon sits on a small
   white chip so the colourful status icons stay legible even on the saturated
   green/red buttons. (On small screens the label shows inline instead — see the
   mobile block below — since touch devices have no hover.) */
.ico-btn {
    position: relative;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.ico-btn-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: #fff;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}
.ico-btn-img { width: 30px; height: 30px; object-fit: contain; display: block; }
.ico-btn-text {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #111827; color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1;
    white-space: nowrap;
    padding: 6px 9px; border-radius: 6px;
    opacity: 0; pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 30;
}
.ico-btn-text::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #111827;
}
.ico-btn:hover .ico-btn-text,
.ico-btn:focus-visible .ico-btn-text {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Small icon-button variant: the "modify remark" pencil shown inline beside an
   existing admin remark. Not a .btn, so it stays compact on mobile too. */
.ico-btn-sm { padding: 3px; vertical-align: middle; margin-left: 8px; }
.ico-btn-sm .ico-btn-chip { width: 26px; height: 26px; border-radius: 6px; }
.ico-btn-sm .ico-btn-img { width: 20px; height: 20px; }
.remark-modify-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; }
.remark-modify-btn:hover { background: #f3f4f6; }

.actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.flash {
    padding: 12px 14px; border-radius: 8px; margin-bottom: 16px;
    font-size: 14px;
    animation: flashFadeIn 0.4s ease both;
    transition: opacity 0.6s ease, transform 0.6s ease, margin 0.6s ease, padding 0.6s ease, max-height 0.6s ease;
}
@keyframes flashFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.flash.flash-hide {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
.flash-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.link { color: #2563eb; text-decoration: none; font-size: 14px; }
.link:hover { text-decoration: underline; }
.muted { color: #6b7280; }
.small { font-size: 12px; }
.warn { color: #b45309; }

.tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs-row .tabs { margin-bottom: 0; }
.tabs-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.tab {
    padding: 8px 14px; border-radius: 8px; background: #fff;
    color: #4b5563; text-decoration: none; font-size: 14px;
    border: 1px solid #e5e7eb; display: inline-flex; gap: 8px; align-items: center;
    justify-content: center;
}
.tab:hover { background: #f9fafb; }
.tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }
/* Sort buttons under the status tabs. */
.sort-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.sort-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
.sort-btn {
    padding: 6px 12px;
    font-size: 13px;
}
.tab .badge {
    background: rgba(0,0,0,.08); color: inherit; padding: 1px 8px;
    border-radius: 999px; font-size: 12px;
}
.tab.active .badge { background: rgba(255,255,255,.25); }

.layout-toggle {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 8px;
    flex-wrap: wrap;
}
.pagination .btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.pagination-info {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

.compact-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border: 2px solid #111827;
    border-radius: 4px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}
.compact-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}
.compact-table th,
.compact-table td {
    border: 1px solid #374151;
    padding: 6px 8px;
    vertical-align: top;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.compact-table th {
    color: #dc2626;
    background: #fff;
    font-style: italic;
    text-transform: uppercase;
    text-align: left;
}
.compact-table .compact-title {
    background: #fbfba6;
    color: #0891b2;
    text-align: center;
    font-size: 20px;
    text-decoration: underline;
}
.compact-table tbody tr:nth-child(even) td {
    background: #f9fafb;
}
.compact-table tbody tr.compact-pending td {
    background: #ffff00;
}
.compact-table tbody tr.compact-unreviewed td,
.compact-table tbody tr.compact-unreviewed:nth-child(even) td {
    background: #e9ebee;
}
.compact-table tbody tr.row-over-limit td,
.compact-table tbody tr.row-over-limit:nth-child(even) td {
    background: #fee2e2;
}
.table-action {
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid #b91c1c;
    border-radius: 4px;
    background: #ef4444;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.table-action:hover { filter: brightness(.95); }

.workbook-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 6px 0;
    background: #f4f6fa;
}
.excel-toolbar {
    position: sticky;
    top: 48px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.excel-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.excel-toolbar input[type=color] {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}
.excel-toolbar select {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}
.excel-wrap {
    width: 100%;
    overflow: auto;
    max-height: calc(100vh - 210px);
    background: #fff;
    border: 1px solid #9ca3af;
    -webkit-overflow-scrolling: touch;
}
.excel-grid {
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
    font-size: 12px;
}
.excel-grid td {
    min-width: 42px;
    height: 24px;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    vertical-align: middle;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.excel-grid td[contenteditable=true] {
    cursor: cell;
    min-height: 24px;
}
.excel-grid td[contenteditable=true]:focus,
.excel-grid .selected-cell {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.date-box-table td { position: relative; }
.row-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.date-box-table tr:hover .row-delete { opacity: 1; }
.row-delete:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.date-box-table tr[data-extra] td { border-left: 3px solid #93c5fd; text-align: center; }
.date-box-table tr.dragging { opacity: 0.4; }
.drag-handle {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    user-select: none;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1;
}
.drag-handle:hover { color: #475569; }
.drag-handle:active { cursor: grabbing; }
.add-row-btn {
    display: block;
    width: 100%;
    padding: 6px 8px;
    background: #f3f4f6;
    border: none;
    border-top: 1px solid #e5e7eb;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.add-row-btn:hover { background: #e5e7eb; }
/* Center chooser shown after pressing "+ Add row": the pick decides the new
   row's color and which column block it fills in the AL-list export. */
.add-row-choice {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 5px 6px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}
.add-row-choice-btn {
    padding: 5px 4px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    color: #1f2937;
}
.add-row-choice-hv { background: #ffffff; }
.add-row-choice-pt { background: #dbeef4; }
.add-row-choice-akn { background: #b9cde5; }
.add-row-choice-btn:hover { filter: brightness(0.93); }
/* Center pill at the right edge of each calendar row (admin view). Shows
   which center's AL-list block (HV / PT / AKN) the row occupies, colored to
   match the center; red FULL means that block has no free column left. */
.slot-badge {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    min-width: 13px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #64748b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    user-select: none;
    opacity: .85;
}
.slot-badge-hv { background: #ffffff; color: #334155; border: 1px solid #cbd5e1; }
.slot-badge-pt { background: #dbeef4; color: #1e3a5f; border: 1px solid #a8cfdd; }
.slot-badge-akn { background: #b9cde5; color: #1e3a5f; border: 1px solid #8fb0d4; }
.slot-badge-full { background: #dc2626; color: #fff; border: none; }
/* Get out of the way of the hover delete button. */
.date-box-table tr:hover .slot-badge { opacity: 0; }
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    @page {
        size: A4 landscape;
        margin: 8mm;
    }
    body { padding: 0; background: #fff; }
    .primary-nav, .month-switch, .layout-toggle, .excel-toolbar, .comp-panel,
    .add-row-btn, .add-row-choice, .row-delete, .slot-badge, .page-head .right, .flash { display: none !important; }
    .page-head { margin-bottom: 8px !important; }
    .workbook-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
    .calendar-weekdays { display: grid !important; }
    .date-box-grid { gap: 4px !important; }
    .date-box { break-inside: avoid; box-shadow: none !important; border-color: #d1d5db !important; }
    .date-box-today { outline: none !important; box-shadow: none !important; border-color: #d1d5db !important; }
    .date-box-past { opacity: 1 !important; filter: none !important; }
    /* Compact day boxes so each day takes less space in the PDF */
    .date-box-head {
        min-height: 0 !important;
        padding: 2px 6px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }
    .date-box-weekday { font-size: 9px !important; }
    .date-box-links { padding: 3px 6px !important; gap: 3px !important; }
    .date-box-table { font-size: 10px !important; }
    .date-box-table td {
        height: auto !important;
        min-height: 0 !important;
        padding: 1px 4px !important;
        line-height: 12px !important;
    }
    .calendar-title { font-size: 22px; }
    .pdf-month-page {
        break-after: page;
        page-break-after: always;
    }
    .pdf-month-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }
    .pdf-comp-legend {
        break-inside: avoid;
        margin-top: 10px;
    }
    .pdf-comp-legend .comp-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    .pdf-comp-legend .comp-pair {
        padding: 5px 7px;
        font-size: 12px;
    }
    a { color: inherit !important; text-decoration: none !important; }
}
.primary-nav {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    background: #eef2f7;
    border-radius: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.primary-nav-item {
    padding: 10px 18px;
    border-radius: 10px;
    color: #6b7280;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    transition: background .15s, color .15s, box-shadow .15s;
}
.primary-nav-item:hover { color: #111827; }
.primary-nav-item.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);
}
@media (max-width: 600px) {
    .primary-nav { width: 100%; justify-content: stretch; }
    .primary-nav-item { flex: 1; text-align: center; padding: 10px 8px; font-size: 14px; }
}
.fill-presets { display: inline-flex; gap: 4px; align-items: center; }
.comp-toolbar-palette {
    padding-left: 6px;
    border-left: 1px solid #d1d5db;
    flex-wrap: wrap;
    row-gap: 4px;
}
.fill-preset {
    width: 22px; height: 22px;
    min-width: 22px; min-height: 22px;
    flex: 0 0 22px;
    box-sizing: border-box;
    border: 1px solid #9ca3af;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.go-back-form { display: inline-block; margin: 0; }
.go-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
}
.go-back-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.go-back-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
.go-back-count {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
}
.fill-preset:hover { outline: 2px solid #2563eb; outline-offset: 1px; }
.month-switch {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    background: #f3f4f6;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow-x: auto;
}
.month-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border-radius: 10px;
    text-decoration: none;
    color: #6b7280;
    transition: background .15s, color .15s, box-shadow .15s;
}
.month-pill:hover { color: #111827; }
.month-pill-name { font-size: 16px; font-weight: 700; line-height: 1.1; }
.month-pill-year { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.month-pill.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);
}
.month-pill.active .month-pill-year { color: #6b7280; }
@media (max-width: 900px) {
    .month-switch { grid-template-columns: repeat(6, minmax(72px, 1fr)); }
}
@media (max-width: 480px) {
    .month-switch { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
    .month-pill-name { font-size: 14px; }
}
.calendar-wrap { min-width: 0; }
.calendar-title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    color: #111827;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 6px 0;
}
.date-box-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
/* 7 day columns + 1 narrower per-week compensation column */
.calendar-weekdays.with-week-comp,
.date-box-grid.with-week-comp {
    grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(88px, 0.6fr);
}
.calendar-weekday-comp { color: #6b7280; }
.week-comp-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    align-self: center;
}
.week-comp-item {
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    border: 1px solid rgba(15, 23, 42, .15);
    overflow-wrap: anywhere;
}
.week-comp-empty { min-height: 1px; }
.comp-label-note {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-style: italic;
    color: #b45309;
}
.comp-inconsistent-icon {
    margin-left: 5px;
    color: #d97706;
    cursor: help;
    font-size: 14px;
}
.cc-list {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cc-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.cc-list .comp-swatch,
.cc-new .comp-swatch {
    width: 26px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, .25);
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}
.cc-hex {
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: #6b7280;
}
.cc-target { color: #b45309; font-size: 0.82rem; }
.cc-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-box-past {
    opacity: 0.65;
    filter: grayscale(0.3);
}
.date-box-today {
    border-color: #facc15 !important;
    outline: 3px solid #facc15;
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.35);
    position: relative;
    z-index: 1;
}
.date-box-today .date-box-head {
    background: #fef9c3 !important;
    color: #111827 !important;
}
.date-box-weekday {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-left: 0;
}
/* Preserve each date's weekday and week row at every screen width. */
@media (max-width: 1100px) {
    .workbook-layout { grid-template-columns: minmax(0, 1fr); }
    .comp-panel { position: static; max-height: none; }
}
.pdf-export .calendar-weekdays,
.pdf-month-page .calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.pdf-date-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.date-box {
    background: #fff;
    border: 1px solid #9ca3af;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.date-box-head {
    min-height: 58px;
    padding: 8px 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    border-bottom: 1px solid #9ca3af;
    background: #f9fafb;
}
.date-box-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid #d1d5db;
    background: #fff;
}
.comp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid #9ca3af;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.comp-chip-in { border-style: dashed; }
.comp-chip .comp-arrow { font-size: 11px; opacity: .8; }

.workbook-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: center;
}
.workbook-admin-shell {
    display: block;
}
.workbook-admin-main {
    min-width: 0;
}
.comp-panel {
    align-self: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 18px 20px;
    max-height: calc(100vh - 24px);
    overflow: auto;
}
.comp-panel h3 { margin: 0 0 14px; font-size: 17px; }
.version-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 62px;
    z-index: 80;
    display: grid;
    grid-template-columns: 62px 230px;
    background: #232b32;
    border: 1px solid #111820;
    border-left: 0;
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.18);
    overflow: hidden;
    transition: width .2s ease;
}
.version-sidebar:hover,
.version-sidebar:focus-within {
    width: 292px;
}
.version-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    background: #1b2228;
    border-right: 1px solid #34404a;
}
.version-rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #20a7db;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.28);
    color: #fff;
    font-weight: 800;
}
.version-rail-count {
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #111820;
    color: #d7e2ea;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.version-sidebar-panel {
    min-width: 0;
    padding: 0;
    overflow: auto;
    background: #232b32;
    color: #c9d3dc;
}
.version-sidebar h3 {
    margin: 0;
    padding: 14px 16px;
    background: #1b2228;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.version-current {
    position: relative;
    border: 0;
    background: #0f91c7;
    border-radius: 0;
    padding: 12px 16px;
    margin: 0;
}
.version-current::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 18px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #f4f6fa;
}
.version-kicker {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.84);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.version-number {
    margin-top: 2px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}
.version-current dl {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
}
.version-current dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.version-current dt {
    color: rgba(255,255,255,.72);
    font-size: 12px;
}
.version-current dd {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}
.version-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 12px;
}
.version-clear-form {
    margin: 0;
    padding: 12px 0 4px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #e5e7eb;
}
.version-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 8px;
    border-radius: 6px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.version-clear-btn .version-clear-x {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.version-clear-btn .version-clear-label {
    white-space: nowrap;
}
.version-clear-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}
.version-clear-btn:active { transform: translateY(1px); }
.workbook-reset-form {
    padding-top: 8px;
    border-top: 0;
}
.workbook-reset-btn {
    border-color: #991b1b;
    background: #991b1b;
    color: #fff;
}
.workbook-reset-btn:hover {
    background: #7f1d1d;
    border-color: #7f1d1d;
}
.version-item {
    position: relative;
    border: 0;
    border-radius: 0;
    padding: 10px 34px 10px 18px;
    background: transparent;
    border-left: 3px solid transparent;
    color: #c9d3dc;
}
.version-item-current {
    border-left-color: #20a7db;
    background: #2f3942;
}
.version-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}
.version-item-head strong {
    color: #fff;
}
.version-item-head span,
.version-meta,
.version-distance {
    color: #a9b6c0;
    font-size: 12px;
}
.version-meta {
    margin-top: 4px;
    text-transform: capitalize;
}
.version-distance {
    margin-top: 6px;
    font-weight: 700;
    color: #d7e2ea;
}
.version-restore-form {
    margin-top: 8px;
}
.version-restore-btn {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    background: #1b2228;
    color: #d7e2ea;
    border-color: #44515d;
}
.version-restore-btn:hover {
    background: #111820;
    color: #fff;
}
.version-delete-form {
    position: absolute;
    top: 7px;
    right: 8px;
    margin: 0;
}
.version-delete-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #44515d;
    border-radius: 4px;
    background: #1b2228;
    color: #a9b6c0;
    line-height: 18px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}
.version-delete-btn:hover {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fff;
}
.comp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comp-pair {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 15px; padding: 8px 10px;
    border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb;
}
.comp-pair-in { border-style: dashed; }
.comp-end { font-weight: 700; color: #111827; text-decoration: none; }
.comp-end:hover { text-decoration: underline; }
.comp-range {
    display: block;
    margin-top: 2px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
}
.comp-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px;
    border: 1px solid #9ca3af; border-radius: 4px; font-weight: 700;
}
.comp-swatch {
    display: inline-block; width: 38px; height: 24px;
    border: 1px solid #9ca3af; border-radius: 5px;
}
.comp-eq { color: #6b7280; font-weight: 700; }
.comp-kind { margin-left: auto; font-size: 11px; color: #6b7280; }
.comp-form {
    display: grid;
    gap: 8px;
    padding: 10px;
    margin-bottom: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.comp-form label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
}
.comp-form input[type=text],
.comp-form input[type=date] {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
}
.comp-form input[type=color] {
    width: 100%;
    height: 34px;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}
.al-comp-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-width: calc(100vw - 32px);
    text-align: center;
    pointer-events: none;
}
.al-comp-selected {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.comp-template-toggle { width: 100%; margin-top: 10px; margin-bottom: 16px; }
.comp-template-panel {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
}
.comp-template-panel .comp-form { gap: 8px; }
.comp-template-panel select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}
.comp-color-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.comp-color-form input[type=color] {
    width: 34px;
    height: 30px;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}
.comp-color-form .btn {
    padding: 5px 8px;
    font-size: 12px;
}
.comp-fill-preset {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
    position: relative;
}
/* Instant tooltip for the comp palette (native title tooltips take ~1-2s,
   which the browser does not let us shorten). */
.comp-fill-preset::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 9px;
    border-radius: 6px;
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .08s;
    z-index: 40;
}
.comp-fill-preset:hover::after,
.comp-fill-preset:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
.comp-map-modal[hidden] { display: none; }
.comp-map-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15,23,42,.45);
}
.comp-map-dialog {
    width: min(860px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(15,23,42,.24), 0 8px 18px rgba(15,23,42,.12);
}
.comp-map-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}
.comp-map-head h3 {
    margin: 0;
    font-size: 18px;
}
.comp-map-close {
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 22px;
    line-height: 26px;
    cursor: pointer;
}
.comp-map-body {
    overflow: auto;
    padding: 16px 18px 18px;
}
.comp-map-add-form {
    grid-template-columns: minmax(180px, 1.3fr) repeat(2, minmax(130px, .8fr)) 96px auto;
    align-items: end;
}
.comp-map-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.comp-map-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.comp-map-table th,
.comp-map-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}
.comp-map-table th {
    background: #f9fafb;
    color: #4b5563;
    font-size: 12px;
    text-transform: uppercase;
}
.comp-slot-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center !important;
}
.comp-map-table tr:last-child td { border-bottom: 0; }
.comp-delete-form { margin: 0; }
.comp-delete-form .btn {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}
.pdf-export-sheets {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.pdf-month-page {
    background: #fff;
}
.pdf-comp-legend {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
}
.pdf-comp-legend h3 {
    margin: 0 0 10px;
    font-size: 16px;
}
@media (max-width: 900px) {
    .workbook-layout { grid-template-columns: 1fr; }
    .workbook-admin-shell { grid-template-columns: 1fr; }
    body:has(.version-sidebar) .container.wide,
    body:has(.version-sidebar:hover) .container.wide,
    body:has(.version-sidebar:focus-within) .container.wide {
        padding-left: 62px;
    }
    .comp-panel { position: static; max-height: none; }
    .version-sidebar {
        top: 0;
        bottom: 0;
        width: 62px;
        max-width: calc(100vw - 24px);
    }
    .version-sidebar:hover,
    .version-sidebar:focus-within {
        width: min(292px, calc(100vw - 24px));
    }
}
.date-box-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}
.date-box-table td {
    height: 34px;
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid #e5e7eb;
    vertical-align: middle;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* Fixed line-height so a cell's font size (e.g. the Sunday column's 14pt
       Century Gothic) can't make its rows taller than the other days. */
    line-height: 20px;
}
.date-box-table td:empty::before {
    content: '\00a0';
    display: inline-block;
    pointer-events: none;
}
.date-box [contenteditable=true] {
    cursor: cell;
    min-height: 28px;
}
.al-suggest-popup {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15,23,42,.15), 0 2px 6px rgba(15,23,42,.08);
    min-width: 140px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    display: none;
    font-size: 13px;
}
.al-suggest-item {
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    color: #111827;
}
.al-suggest-item:hover,
.al-suggest-item.active {
    background: #dbeafe;
    color: #1e3a8a;
}
.date-box [contenteditable=true]:focus,
.date-box .selected-cell {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.request-card .request-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10px; gap: 12px; flex-wrap: wrap;
}
.request-card-approved { background: #d1fae5; }
.request-card-pending { background: #fef3c7; }
.request-card-rejected { background: #fee2e2; }
/* Not looked at by the admin yet — deliberately the quietest of the four. */
.request-card-unreviewed { background: #e9ebee; }
.request-card .request-head > div:first-child { min-width: 0; }
.request-card h3 { overflow-wrap: anywhere; }
.request-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
    padding: 3px 10px; border-radius: 999px; font-size: 13px;
    font-weight: 700; letter-spacing: .04em;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.tag-add { background: #2563eb; }
.tag-cancel { background: #dc2626; }
.tag-swap { background: #7c3aed; }
/* Requests imported from the Excel workbook's leave-request sheet. */
.tag-excel { background: #15803d; }
.status-unreviewed { background: #6b7280; }
.status-pending { background: #b45309; }
.status-approved { background: #059669; }
.status-rejected { background: #dc2626; }
.tag-period { background: #0284c7; }

.request-body { font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.request-body, .admin-remark, .range-display { overflow-wrap: anywhere; }
.admin-remark {
    background: #f9fafb; padding: 8px 10px; border-radius: 6px;
    border-left: 3px solid #2563eb;
}

.request-actions {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.request-actions input[type=text] {
    flex: 1 1 220px; min-width: 0; padding: 8px 10px;
    border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
}

/* Transfer status spans the card body above the independent action row. */
.request-actions.request-actions-transfer { align-items: flex-start; }
.request-actions-transfer > input[type=text] { min-height: 48px; }
.request-actions .al-transfer-action {
    display: inline-flex; flex-direction: column; align-items: stretch;
    gap: 6px; min-width: 0; max-width: 100%; flex: 0 1 230px;
}
.request-actions .al-transfer-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; min-height: 48px; width: 100%; padding: 8px 12px;
    line-height: 1.35; white-space: normal; text-align: center;
}
.request-actions .al-transfer-button .al-transfer-icon {
    width: 24px; height: 24px; flex: 0 0 24px;
}
.request-actions .al-transfer-button:disabled {
    opacity: 1; cursor: default; background: #dcfce7; color: #166534;
    border-color: #a7f3d0;
}
.request-actions .al-transfer-button[aria-busy="true"] {
    background: #dbeafe; color: #1e40af; border-color: #93c5fd; cursor: wait;
}
.request-card .al-transfer-hint {
    display: block; width: 100%; max-width: none; min-width: 0; margin-top: 12px;
    font-size: 12px; line-height: 1.45;
    overflow-wrap: anywhere; color: #475569;
}
.request-card .al-transfer-hint[hidden] { display: none; }
.request-card .al-transfer-hint.is-success { color: #166534; }
.request-card .al-transfer-hint.is-error { color: #991b1b; }
.request-card .al-transfer-note {
    display: block; margin-top: 4px; color: #475569; font-size: 11.5px;
}
.al-transfer-form[hidden] { display: none; }

@media (max-width: 640px) {
    .request-actions.request-actions-transfer { align-items: stretch; }
    .request-card .request-actions.request-actions-transfer {
        padding-right: 0; padding-bottom: 70px;
    }
    .request-actions-transfer > input[type=text] { flex: 0 0 auto; }
    .request-actions .al-transfer-action { width: 100%; flex-basis: auto; }
    .request-actions .al-transfer-button { justify-content: flex-start; text-align: left; }
}

.empty { text-align: center; color: #6b7280; padding: 40px 20px; }
code {
    background: #f3f4f6; padding: 2px 6px; border-radius: 4px;
    font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 640px) {
    body { padding: 12px; }
    h1 { font-size: 22px; }
    h3 { font-size: 16px; }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .page-head .right {
        width: 100%;
        justify-content: flex-start;
        gap: 8px 12px;
    }
    /* Narrower pills so three or four still fit across a phone. */
    .pill-btn {
        gap: 8px;
        padding: 4px 14px 4px 4px;
        font-size: 12px;
        letter-spacing: .03em;
    }
    .pill-ico { width: 28px; height: 28px; }
    .pill-ico svg { width: 15px; height: 15px; }

    .card {
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 12px;
    }

    .field { margin-bottom: 14px; }
    .field input[type=text],
    .field input[type=password],
    .field input[type=date],
    .field textarea {
        font-size: 16px;
        min-height: 44px;
    }


    .range-period-select {
        font-size: 16px;
        min-height: 44px;
    }
    .radio-row {
        flex-direction: column;
        gap: 10px;
    }
    .radio {
        min-height: 32px;
    }

    .range-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 10px;
        padding: 10px;
    }
    .range-cell {
        grid-column: 1 / -1;
        width: 100%;
    }
    /* The first cell (From) shares row 1 with the remove button so they don't
       overlap; the To cell drops to its own full-width row below. */
    .range-cell:first-child {
        grid-column: 1;
    }
    .range-row .btn-icon {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: end;
    }
    .range-owner {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .actions,
    .request-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn,
    .request-actions input[type=text] {
        width: 100%;
        min-height: 44px;
        text-align: center;
    }
    /* Icon action buttons: show the label inline (no hover on touch screens). */
    .ico-btn { justify-content: flex-start; gap: 12px; padding: 6px 14px; }
    .ico-btn-text {
        position: static; transform: none; opacity: 1;
        background: none; color: inherit;
        font-size: 15px; padding: 0; pointer-events: auto;
    }
    .ico-btn-text::after { display: none; }

    .tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .tabs-row {
        align-items: stretch;
    }
    .tabs-row .tabs,
    .tabs-actions {
        width: 100%;
    }
    .tabs-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-left: 0;
    }
    .tab {
        min-width: 0;
        padding: 9px 10px;
    }

    .request-head {
        flex-direction: column;
        align-items: stretch;
    }
    .request-tags {
        width: 100%;
    }
    .tag {
        font-size: 12px;
    }

    .layout-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .excel-toolbar {
        position: static;
        align-items: stretch;
        gap: 6px;
        padding: 8px;
    }
    .excel-toolbar .btn,
    .excel-toolbar select,
    .excel-toolbar label {
        width: 100%;
        justify-content: center;
    }
    .fill-presets {
        width: 100%;
        justify-content: center;
    }
    .comp-map-modal {
        align-items: stretch;
        padding: 10px;
    }
    .comp-map-dialog {
        max-height: calc(100vh - 20px);
    }
    .comp-map-add-form {
        grid-template-columns: 1fr;
    }
    .workbook-tabs {
        position: static;
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }
    .workbook-tabs .tab {
        flex: 0 0 auto;
        min-width: 72px;
    }
    .excel-wrap {
        max-height: 70vh;
    }
    .excel-grid {
        font-size: 11px;
    }
    .excel-grid td {
        min-width: 54px;
        height: 30px;
    }
    .date-box-head {
        font-size: 16px;
    }
    .compact-table-wrap {
        margin-left: -2px;
        margin-right: -2px;
    }
    .compact-table {
        min-width: 720px;
        font-size: 13px;
    }
    .compact-table th,
    .compact-table td {
        padding: 5px 6px;
    }
    .compact-table .compact-title {
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    body { padding: 8px; }
    body:has(.version-sidebar) .container.wide,
    body:has(.version-sidebar:hover) .container.wide,
    body:has(.version-sidebar:focus-within) .container.wide {
        padding-left: 56px;
    }
    .version-sidebar {
        width: 56px;
        max-width: calc(100vw - 8px);
        grid-template-columns: 56px 224px;
    }
    .version-sidebar:hover,
    .version-sidebar:focus-within {
        width: min(280px, calc(100vw - 8px));
    }
    .version-rail-icon {
        width: 32px;
        height: 32px;
    }
    .tabs { grid-template-columns: 1fr; }
    .layout-toggle { grid-template-columns: 1fr; }
    .card { padding: 12px; }
}

/* Staff-name autocomplete dropdown (mobile-friendly) */
.staff-ac-wrap { position: relative; }
.staff-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    z-index: 1200;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.staff-suggest-item {
    padding: 11px 14px;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}
.staff-suggest-item:last-child { border-bottom: none; }
.staff-suggest-item.active,
.staff-suggest-item:hover { background: #e0edff; }

/* Monthly-code popup */
.code-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.code-modal[hidden] { display: none; }
.code-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, .5);
}
.code-modal-box {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.code-modal-box h3 { margin: 0 0 8px; }
.code-modal-box input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    margin-top: 6px;
}
.code-modal-error {
    color: #b91c1c;
    font-size: .85rem;
    margin-top: 6px;
}
.code-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---- which kind of request, in the card's corner ------------------------
   A filled triangle across the bottom-right corner, coloured to match the
   request's own tag. Drawn with a rotated bar the card clips, so it needs no
   image and scales with the text.

   Every request on this site is annual leave; add, swap and cancel are the
   three shapes it comes in. The corner says what the request is, and leaves
   the tags along the top to say which shape it is and what state it is in.
   ========================================================================= */
.request-card { position: relative; overflow: hidden; }
.card-flag {
    position: absolute; right: -58px; bottom: 30px;
    width: 200px; padding: 4px 0;
    transform: rotate(-45deg);
    text-align: center;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.18);
    pointer-events: none;
}
/* One colour, because there is one kind of request here. */
.card-flag-al { background: #059669; }

/* Room for it, so the buttons never run under the corner. */
.request-card .request-actions { padding-right: 118px; }

/* Full Leave & Duty menu; the expanded panel floats above the calendar. */
.duty-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: 64px; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 10px 8px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-right: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
    transition: width .18s ease, box-shadow .18s ease;
}
.duty-nav.open,
.duty-nav:not(.collapsed):has(.duty-nav-body:focus-within) {
    width: min(340px, calc(100vw - 12px));
    box-shadow: 4px 0 18px rgba(15,23,42,.12);
}
@media (hover: hover) {
    .duty-nav:not(.collapsed):hover {
        width: min(340px, calc(100vw - 12px));
        box-shadow: 4px 0 18px rgba(15,23,42,.12);
    }
}
.duty-nav-title {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
    width: 100%; min-height: 44px; padding: 10px; margin: 0 0 6px;
    border: 0; border-radius: 8px; background: transparent;
    color: #6b7280; font: inherit; font-size: 16px; font-weight: 700;
    white-space: nowrap; text-align: left; cursor: pointer;
}
.duty-nav-title:hover { background: #f3f4f6; color: #111827; }
.duty-nav-title:focus-visible,
.duty-nav-item:focus-visible {
    outline: 2px solid #2563eb; outline-offset: -2px;
}
.duty-nav-body {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
}
.duty-nav-group {
    display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto;
    border-top: 1px solid #eef2f7; margin-top: 6px; padding-top: 10px;
}
.duty-nav-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.duty-nav-head {
    height: 0; padding: 0 10px; margin: 0; overflow: hidden; opacity: 0;
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #9ca3af; white-space: nowrap;
    transition: opacity .18s ease;
}
.duty-nav-item {
    position: relative; display: flex; align-items: center; gap: 12px;
    flex: 0 0 auto; min-height: 44px; padding: 10px; border-radius: 8px;
    color: #4b5563; text-decoration: none;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background .15s, color .15s;
}
.duty-nav-item:hover { background: #eff6ff; color: #1d4ed8; }
.duty-nav-item.active { background: #f3f4f6; color: #111827; font-weight: 700; }
.duty-nav-item[aria-disabled="true"] {
    color: #9ca3af; background: transparent; cursor: not-allowed;
}
.duty-nav-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.duty-nav-img { object-fit: contain; }
.duty-nav-mask {
    display: inline-block; background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.duty-nav-badge {
    position: absolute; top: 3px; left: 24px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px #fff; pointer-events: none;
}
.duty-nav-item.active .duty-nav-badge { box-shadow: 0 0 0 2px #f3f4f6; }
.duty-nav-text { opacity: 0; transition: opacity .18s ease; }
.duty-nav.open .duty-nav-head,
.duty-nav:not(.collapsed):has(.duty-nav-body:focus-within) .duty-nav-head {
    opacity: 1; height: auto; padding: 0 10px 4px;
}
.duty-nav.open .duty-nav-text,
.duty-nav:not(.collapsed):has(.duty-nav-body:focus-within) .duty-nav-text { opacity: 1; }
@media (hover: hover) {
    .duty-nav:not(.collapsed):hover .duty-nav-head { opacity: 1; height: auto; padding: 0 10px 4px; }
    .duty-nav:not(.collapsed):hover .duty-nav-text { opacity: 1; }
}
body:has(.duty-nav) { padding-left: 64px; }
body:has(.duty-nav) .container.wide { padding-left: 28px; }
/* Admin version history keeps its own rail beside the menu. */
body:has(.duty-nav) .version-sidebar { left: 64px; max-width: calc(100vw - 72px); }
body:has(.duty-nav):has(.version-sidebar) .container.wide { padding-left: 90px; }
body:has(.duty-nav):has(.version-sidebar:hover) .container.wide,
body:has(.duty-nav):has(.version-sidebar:focus-within) .container.wide { padding-left: 320px; }
@media (max-width: 900px) {
    body:has(.duty-nav):has(.version-sidebar) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:hover) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:focus-within) .container.wide { padding-left: 90px; }
}
@media (max-width: 380px) {
    body:has(.duty-nav):has(.version-sidebar) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:hover) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:focus-within) .container.wide { padding-left: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .duty-nav, .duty-nav-text, .duty-nav-head { transition: none; }
}
@media print {
    .duty-nav { display: none !important; }
    body:has(.duty-nav) { padding-left: 0; }
    body:has(.duty-nav) .container.wide,
    body:has(.duty-nav):has(.version-sidebar) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:hover) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:focus-within) .container.wide { padding-left: 0; }
}

/* Calendar sizing is a view preference; every date keeps its real week/day. */
.calendar-view-controls { display: none; }
button.version-rail-icon { border: 0; padding: 0; font: inherit; font-weight: 800; cursor: pointer; }
button.version-rail-icon:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.version-sidebar.open { width: 292px; }

@media screen and (max-width: 1100px) {
    body::before { width: 100vw; height: 100vh; height: 100dvh; right: auto; bottom: auto; }
    body:has(.version-sidebar):not(:has(.duty-nav)) { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    body:has(.version-sidebar):not(:has(.duty-nav)) .container.wide { padding-left: 0; }
    body:has(.duty-nav) {
        padding: calc(72px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(78px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    }
    body:has(.duty-nav) .container.wide,
    body:has(.duty-nav):has(.version-sidebar) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:hover) .container.wide,
    body:has(.duty-nav):has(.version-sidebar:focus-within) .container.wide { padding-left: 0; }
    .container.wide, .workbook-admin-main, .workbook-admin-shell { min-width: 0; max-width: 100%; }
    .workbook-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .excel-toolbar { position: static; }
    .calendar-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 3px 10px; }
    .calendar-title { position: sticky; left: 0; width: fit-content; max-width: 100%; margin-bottom: 8px; font-size: 23px; }
    .calendar-view-controls { position: sticky; left: 0; display: flex; width: fit-content; max-width: 100%; gap: 4px; margin: 0 0 12px; padding: 3px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; }
    .calendar-view-controls button { border: 0; border-radius: 7px; min-height: 40px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 700; color: #475569; background: transparent; cursor: pointer; }
    .calendar-view-controls button[aria-pressed="true"] { color: #1d4ed8; background: #eff6ff; box-shadow: 0 1px 2px #0f172a14; }
    .calendar-view-controls button:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
    .calendar-wrap:not(.pdf-month-page) .calendar-weekdays { display: grid; }
    .calendar-wrap .calendar-weekdays,
    .calendar-wrap .date-box-grid:not(.pdf-date-grid) { grid-template-columns: repeat(7, 128px); width: max-content; min-width: 100%; gap: 8px; }
    .calendar-wrap .calendar-weekdays.with-week-comp,
    .calendar-wrap .date-box-grid.with-week-comp:not(.pdf-date-grid) { grid-template-columns: repeat(7, 128px) 88px; }
    .calendar-wrap[data-calendar-view="fit"] .calendar-weekdays,
    .calendar-wrap[data-calendar-view="fit"] .date-box-grid:not(.pdf-date-grid) { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; min-width: 0; gap: 5px; }
    .calendar-wrap[data-calendar-view="fit"] .calendar-weekdays.with-week-comp,
    .calendar-wrap[data-calendar-view="fit"] .date-box-grid.with-week-comp:not(.pdf-date-grid) { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(40px, .65fr); }
    .calendar-wrap[data-calendar-view="fit"] .date-box { min-width: 0; border-radius: 6px; }
    .calendar-wrap[data-calendar-view="fit"] .date-box-head { min-height: 46px; padding: 6px 2px; font-size: clamp(10px, 1.7vw, 16px) !important; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
    .calendar-wrap[data-calendar-view="fit"] .date-box-weekday { font-size: clamp(9px, 1.4vw, 12px); }
    .calendar-wrap[data-calendar-view="fit"] .calendar-weekday { font-size: clamp(8px, 1.5vw, 12px); letter-spacing: 0; }
    .calendar-wrap[data-calendar-view="fit"] .date-box-table td { padding: 5px 2px; font-size: clamp(8px, 1.5vw, 13px) !important; line-height: 1.3; }
    .calendar-wrap[data-calendar-view="fit"] .week-comp-item { padding: 4px 2px; font-size: clamp(8px, 1.4vw, 11px); }
    .calendar-wrap[data-calendar-view="fit"] .add-row-btn { min-width: 0; width: 100%; padding: 7px 1px; font-size: 10px; }
    .calendar-wrap[data-calendar-view="fit"] .row-delete { right: 0; width: 16px; height: 16px; font-size: 12px; line-height: 14px; }
    .calendar-wrap[data-calendar-view="fit"] .date-box-table td:has(.row-delete) { padding-right: 12px; }
    .month-switch { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
    .month-pill { min-width: 0; min-height: 44px; padding: 7px 3px; }
    .month-pill-name { font-size: 14px; }
    /* A top menu frees the width formerly occupied by two permanent rails. */
    body:has(.duty-nav) .duty-nav { top: 0; left: 0; right: 0; bottom: auto; width: 100vw; max-width: 100vw; height: calc(56px + env(safe-area-inset-top, 0px)); padding: calc(6px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); border-right: 0; border-bottom: 1px solid #e5e7eb; transition: none; }
    body:has(.duty-nav) .duty-nav-title { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 10px; }
    body:has(.duty-nav) .duty-nav:not(.open) .duty-nav-body { display: none; }
    body:has(.duty-nav) .duty-nav.open { width: min(360px, 100vw); height: 100vh; height: 100dvh; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 4px 0 24px #0f172a2b; }
    body:has(.duty-nav) .duty-nav.open .duty-nav-title { margin-bottom: 8px; }
    body:has(.duty-nav) .duty-nav-text { opacity: 1; }
    body:has(.version-sidebar) .version-sidebar { top: auto; left: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; max-width: calc(100vw - 24px); display: block; border: 1px solid #34404a; border-radius: 12px; transition: none; }
    body:has(.version-sidebar) .version-sidebar .version-rail { padding: 5px; height: 48px; width: 48px; border-right: 0; }
    body:has(.version-sidebar) .version-sidebar .version-rail-count,
    body:has(.version-sidebar) .version-sidebar .version-sidebar-panel { display: none; }
    body:has(.version-sidebar) .version-sidebar.open { width: min(320px, calc(100vw - 24px)); height: min(560px, 78vh); height: min(560px, 78dvh); display: grid; grid-template-columns: 48px minmax(0, 1fr); }
    body:has(.version-sidebar) .version-sidebar.open .version-rail-count { display: block; }
    body:has(.version-sidebar) .version-sidebar.open .version-rail { height: 100%; }
    body:has(.version-sidebar) .version-sidebar.open .version-sidebar-panel { display: block; }
    .comp-map-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
    .comp-map-head { gap: 8px; padding: 12px; }
    .comp-map-head h3 { overflow-wrap: anywhere; }
    .comp-map-close { flex: 0 0 40px; width: 40px; height: 40px; }
    .comp-map-body { padding: 12px; }
    /* Hidden swatch tooltips used to widen the whole page on phones. */
    .comp-fill-preset::after { display: none; }
    .fill-presets { max-width: 100%; min-width: 0; flex-wrap: wrap; }
    .comp-toolbar-palette { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 5px; border: 1px solid #d1d5db; border-radius: 8px; -webkit-overflow-scrolling: touch; }
    .fill-preset { width: 36px; height: 36px; min-width: 36px; min-height: 36px; flex-basis: 36px; }
    .export-menu-options { max-width: calc(100vw - 32px); }
    .export-menu-options a { white-space: normal; }
}
@media screen and (max-width: 480px) {
    .month-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .calendar-wrap[data-calendar-view="fit"] .calendar-weekdays,
    .calendar-wrap[data-calendar-view="fit"] .date-box-grid:not(.pdf-date-grid) { gap: 3px; }
}
@media print { .calendar-view-controls { display: none !important; } }

/* In phone landscape, Fit week includes every slot across all three centres. */
.calendar-fit-toolbar, .calendar-fit-viewport, .calendar-fit-content { display: contents; }
@media screen and (max-width: 1100px) and (orientation: landscape) {
    .calendar-screen-fit .calendar-fit-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; min-height: 44px; margin: 0 0 8px; }
    .calendar-screen-fit .calendar-title { position: static; margin: 0; font-size: 20px; }
    .calendar-screen-fit .calendar-view-controls { position: static; margin: 0; }
    .calendar-screen-fit .calendar-view-controls button { min-height: 34px; padding: 5px 12px; font-size: 13px; }
    .calendar-screen-fit .calendar-fit-viewport { display: block; position: relative; width: 100%; overflow: hidden; overflow-anchor: none; }
    .calendar-wrap.calendar-screen-fit[data-calendar-view="fit"] .date-box-table td { height: 26px; min-height: 0; padding: 3px 2px; }
    .calendar-wrap.calendar-screen-fit[data-calendar-view="fit"] .date-box-table td:has(.row-delete) { padding-right: 12px; }
    .calendar-screen-fit .calendar-fit-content { display: block; position: absolute; top: 4px; left: var(--calendar-fit-left, 4px); width: var(--calendar-fit-width, 100%); transform: scale(var(--calendar-fit-scale, 1)); transform-origin: 0 0; }
}
@media print {
    .calendar-fit-toolbar, .calendar-fit-viewport, .calendar-fit-content { display: contents !important; position: static !important; height: auto !important; width: auto !important; transform: none !important; overflow: visible !important; }
}