/* North Ferry colors: navy with a brass accent (John, Oct 5). The MudBlazor theme in
   Layout/MainLayout.razor uses the same values. */
:root {
    --nfco-navy: #0B2A4A;
    --nfco-navy-2: #163E66;
    --nfco-brass: #C9A227;
    --nfco-bg: #F4F6F9;
    --nfco-tint-soft: #EEF3F9;
    --nfco-tint: #E6ECF4;
    --nfco-tint-strong: #D2E0F0;
    --nfco-focus: rgba(11, 42, 74, 0.25);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Payroll pages: Timesheet, batch print, ADP Entry Report ----
   Same structure as the FoxPro timesheet (entry blocks, indented "hours at rate" lines,
   day totals) in a clean modern face. */
/* Matches MudAppBar's height: 56px on phones, 48px in a short landscape window, 64px from 600px. */
.app-content { padding-top: 56px; }
@media (orientation: landscape) { .app-content { padding-top: 48px; } }
@media (min-width: 600px) { .app-content { padding-top: 64px; } }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.page-actions { display: flex; gap: 1.5rem; align-items: center; max-width: 820px; margin: 1.25rem auto 0.5rem; padding: 0 1rem; }
.print-button { margin-left: auto; padding: 0.4rem 1.1rem; border: 1px solid #555; border-radius: 4px; background: #fff; cursor: pointer; }

.timesheet, .report {
    max-width: 820px; margin: 0.5rem auto 2rem; padding: 1.5rem 1.75rem; background: #fff;
    border: 1px solid #d0d5dd; border-radius: 6px;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem; color: #1d2433; font-variant-numeric: tabular-nums;
}
.ts-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #1d2433; padding-bottom: 0.6rem; margin-bottom: 0.9rem; }
.ts-company { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5b6476; }
.ts-name { font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.ts-sub { color: #4a5263; }
.ts-period { text-align: right; color: #4a5263; }
.ts-period strong { color: #1d2433; }
.ts-error { margin: 0.75rem 0; padding: 0.6rem 0.8rem; background: #fff4e5; border: 1px solid #f0b56a; border-radius: 4px; }

.ts-lines { width: 100%; border-collapse: collapse; }
.ts-lines .c-date { width: 7.5rem; }
.ts-lines .c-amt, .ts-lines .c-total { width: 6.5rem; }
.ts-lines td { padding: 0.12rem 0.4rem; vertical-align: baseline; }
.ts-block td { padding-top: 0.55rem; font-weight: 600; }
.ts-date { color: #1d2433; white-space: nowrap; }
.ts-indent { padding-left: 2.25rem !important; }
.ts-line { color: #2c3445; }
.ts-note td { font-style: italic; color: #5b6476; }
.ts-daytotal td { padding-bottom: 0.55rem; border-bottom: 1px solid #e3e6ec; color: #4a5263; }
.ts-daytotal td:last-child { color: #1d2433; font-weight: 700; }

.ts-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-top: 1.1rem; }
.ts-totals { border-collapse: collapse; min-width: 300px; }
.ts-totals td { padding: 0.2rem 0.5rem; }
.ts-grand td { border-top: 2px solid #1d2433; font-weight: 700; }

/* The two numbers entered in ADP and printed on the paystub (PAY-31). */
.ts-paystub { min-width: 270px; padding: 0.75rem 1rem; border: 2px solid var(--nfco-navy); border-radius: 6px; background: var(--nfco-tint); }
.ts-paystub-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nfco-navy); font-weight: 700; margin-bottom: 0.35rem; }
.ts-paystub-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; padding: 0.15rem 0; }
.ts-paystub-row strong { font-size: 1.15rem; }
.ts-paystub-row small { color: #4a5263; }
.ts-foot { margin-top: 0.9rem; font-size: 0.75rem; color: #7a8294; }

.adp-lines { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.adp-lines th { text-align: left; border-bottom: 1px solid #99a0ae; padding: 0.3rem 0.4rem; font-weight: 600; }
.adp-lines th.num { text-align: right; }
.adp-lines td { padding: 0.2rem 0.4rem; border-bottom: 1px solid #eef0f3; }

@media print {
    /* One timesheet per Letter page (John): tighter type and spacing than on screen,
       stepped down further by TimesheetView for long weeks (.ts-compact, .ts-dense). */
    @page { size: letter; margin: 0.4in; }
    .no-print, .mud-appbar { display: none !important; }
    .app-content { padding-top: 0 !important; }
    body { background: #fff; }
    .timesheet, .report { border: none; margin: 0 auto; max-width: none; padding: 0; border-radius: 0; }
    .timesheet { font-size: 9.5pt; }
    .ts-head { padding-bottom: 0.3rem; margin-bottom: 0.4rem; }
    .ts-name { font-size: 14pt; }
    .ts-lines td { padding-top: 0.04rem; padding-bottom: 0.04rem; }
    .ts-block td { padding-top: 0.3rem; }
    .ts-daytotal td { padding-bottom: 0.25rem; }
    .ts-bottom { margin-top: 0.5rem; }
    .ts-totals td { padding: 0.08rem 0.4rem; }
    .ts-paystub { padding: 0.45rem 0.75rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ts-paystub-row { font-size: 10.5pt; padding: 0.05rem 0; }
    .ts-paystub-row strong { font-size: 11pt; }
    .ts-balances { margin-top: 0.5rem; padding-top: 0.35rem; }
    .ts-days td, .ts-days th { padding-top: 0.02rem; padding-bottom: 0.02rem; }
    .ts-bank-row { padding: 0.02rem 0; }
    .timesheet .ts-bank-row > span:first-of-type { white-space: nowrap; }

    .timesheet.ts-compact { font-size: 8.5pt; }
    .ts-compact .ts-name { font-size: 12.5pt; }
    .ts-compact .ts-lines td { padding-top: 0; padding-bottom: 0; }
    .ts-compact .ts-block td { padding-top: 0.2rem; }
    .ts-compact .ts-daytotal td { padding-bottom: 0.15rem; }

    .timesheet.ts-dense { font-size: 7.5pt; }
    .ts-dense .ts-name { font-size: 11pt; }
    .ts-dense .ts-lines td { padding-top: 0; padding-bottom: 0; line-height: 1.15; }
    .ts-dense .ts-block td { padding-top: 0.12rem; }
    .ts-dense .ts-daytotal td { padding-bottom: 0.1rem; }
    .ts-dense .ts-paystub-row { font-size: 9.5pt; }
    .ts-dense .ts-paystub-row strong { font-size: 10pt; }

    .page-break { break-after: page; }
    .page-break:last-child { break-after: auto; }
}
/* Days & balances (placeholder until benefit days, prorata and the leave ledger exist). */
.ts-balances { margin-top: 1.1rem; padding-top: 0.6rem; border-top: 1px solid #d0d5dd; }
.ts-balances-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5b6476; font-weight: 700; margin-bottom: 0.4rem; }
.ts-balances-body { display: flex; gap: 2rem; align-items: flex-start; }
.ts-days { border-collapse: collapse; min-width: 260px; }
.ts-days th { font-weight: 600; font-size: 0.8rem; color: #4a5263; padding: 0.1rem 0.5rem; border-bottom: 1px solid #d0d5dd; }
.ts-days th.num { text-align: right; }
.ts-days td { padding: 0.1rem 0.5rem; }
.ts-bank { flex: 1; }
.ts-bank-row { display: grid; grid-template-columns: 1fr 3rem 10rem 3rem; gap: 0.5rem; padding: 0.12rem 0; }
.ts-bank-row strong { text-align: right; }
/* Dots from each label to its number, and a bar before the second half, so the first number doesn't read as the
   second label's (John, Oct 13). */
.ts-bank-row > span { display: flex; align-items: baseline; white-space: nowrap; }
.ts-bank-row > span::after { content: ""; flex: 1; min-width: 0.75rem; margin-left: 0.3rem; border-bottom: 1px dotted #9aa3b2; }
/* On screen the first label may wrap ("Vacation Holidays at current Prorata"), so the row stays inside the sheet; print keeps it on one line. */
.ts-bank-row > span:first-of-type { white-space: normal; }
.ts-bank-row > span:nth-of-type(2) { border-left: 1px solid #b0b7c3; padding-left: 0.75rem; margin-left: 0.5rem; }

/* ---- Weekly entry screen: entry on the left, live timesheet on the right (widescreen) ----
   Outlined fields, dark readable headings, grey sample text (John, Oct 2). */
.entry-bar { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; padding: 0.6rem 1rem; border-bottom: 1px solid #c3c8d2; background: #f2f5f9; }
.entry-week, .entry-who { display: flex; gap: 0.5rem; align-items: center; }
.entry-week a, .entry-who button { text-decoration: none; padding: 0.2rem 0.55rem; border: 1px solid #8a93a3; border-radius: 4px; background: #fff; color: #1d2433; }
.entry-who select { min-width: 22rem; padding: 0.3rem; border: 1px solid #8a93a3; border-radius: 4px; }
/* Weekly entry's Days left strip (John, Oct 20): red at 5 or less, solid red when out */
.dl-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.6rem; font-size: 0.9rem; }
.dl-title { font-weight: 600; color: #3b4a5e; }
.dl-chip { border: 1px solid #c3c8d2; border-radius: 999px; padding: 0.15rem 0.65rem; background: #fff; color: #263238; cursor: help; }
.dl-chip.dl-low { border-color: #c62828; color: #b71c1c; background: #fdecea; }
.dl-chip.dl-out { border-color: #b71c1c; color: #fff; background: #c62828; }
/* Low days report (John, Oct 20) */
.low-days .low-low { color: #b71c1c; font-weight: 700; }
.low-days .low-out { color: #fff; background: #c62828; padding: 0 0.35rem; border-radius: 3px; font-weight: 700; }
.low-days .low-missing { color: #8a93a3; font-style: italic; }
.low-none { margin: 1rem 0; }
@media print { .low-days .low-out { color: #b71c1c; background: none; text-decoration: underline; } }
.entry-layout { display: grid; grid-template-columns: minmax(760px, 1fr) minmax(460px, 760px); gap: 1rem; padding: 0.75rem 1rem; align-items: start; }
.entry-right { position: sticky; top: 72px; max-height: calc(100vh - 84px); overflow: auto; }
.entry-right .timesheet { margin-top: 0; }
/* On a vertical (portrait) display or a narrow window, the preview drops below the form (John, Oct 2). */
@media (orientation: portrait), (max-width: 1279px) {
    .entry-layout { grid-template-columns: 1fr; }
    .entry-right { position: static; max-height: none; overflow: visible; }
}
.entry-preview-label { font-size: 0.8rem; color: #2c3445; margin-bottom: 0.25rem; }
.entry-fields { border: none; margin: 0; padding: 0; }

.entry-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; color: #1d2433; }
.entry-table thead th {
    text-align: left; font-weight: 700; font-size: 0.78rem; line-height: 1.2; color: #1d2433;
    background: #e8edf5; padding: 0.35rem 0.35rem; border-bottom: 1px solid #b8c1d1; vertical-align: bottom;
}
.entry-table thead th[title] { cursor: help; }
.entry-table thead tr.entry-sub th { background: #f1f4f9; font-weight: 600; border-bottom: 2px solid #8a93a3; }
.entry-table td { padding: 0.15rem 0.3rem; vertical-align: middle; }
.entry-day:nth-of-type(even) td { background: #f8f9fb; }
.entry-day tr:first-child td { padding-top: 0.45rem; border-top: 1px solid #d0d5dd; }
.entry-day tr:last-child td { padding-bottom: 0.45rem; }
.entry-date { font-weight: 700; white-space: nowrap; }
/* The day being edited, and the day under the mouse, stand out (John, Oct 5). */
.entry-day:hover td { background: var(--nfco-tint-soft); }
.entry-day:focus-within td { background: var(--nfco-tint-strong); }

/* Outlined fields with grey sample text. */
.entry-table input[type=number], .entry-table input[type=text], .entry-table select {
    border: 1px solid #8a93a3; border-radius: 4px; background: #fff; color: #1d2433;
    padding: 0.22rem 0.35rem; font: inherit; font-variant-numeric: tabular-nums;
}
.entry-table input[type=number] { width: 4.9rem; }
.entry-table input[type=text] { width: 100%; box-sizing: border-box; }
.entry-table input::placeholder { color: #9aa1ad; opacity: 1; }
.entry-table input:focus, .entry-table select:focus { outline: none; border-color: var(--nfco-navy); box-shadow: 0 0 0 2px var(--nfco-focus); }
.entry-table input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--nfco-navy); }
.entry-comment { min-width: 13rem; }
.entry-check { text-align: center; }
.entry-taken { display: block; font-size: 0.7rem; color: #5b6476; white-space: nowrap; }
.entry-all { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 600; cursor: pointer; }
.entry-weekly { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.6rem; padding: 0.45rem 0.75rem; border: 1px solid #b8c1d1; border-radius: 6px; background: var(--nfco-tint-soft); font-size: 0.9rem; }
.entry-weekly label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; cursor: pointer; }
.entry-weekly input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--nfco-navy); }
.entry-weekly-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.entry-weekly-note { color: #4a5263; }

.entry-add, .entry-remove, .entry-clear-button {
    font-size: 0.75rem; padding: 0.12rem 0.45rem; margin-right: 0.2rem; border: 1px solid #8a93a3;
    border-radius: 4px; background: #fff; color: #1d2433; cursor: pointer; white-space: nowrap;
}
.entry-clear { text-align: right; }
.entry-clear-button { border-color: #b3261e; color: #b3261e; }
.entry-clear-button:hover:not(:disabled) { background: #fdecea; }
.entry-add:hover, .entry-remove:hover { background: #eef3fb; }
button:disabled { opacity: 0.45; cursor: default; }
.entry-hint { font-size: 0.8rem; color: #2c3445; font-weight: 600; }
.entry-extra td { background: #f4f7fc !important; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] button { background: #eef0f3; color: #4a5263; border-color: #c3c8d2; }
/* Fast entry: suspicious hours (missing decimal point?) and the Save & next target. */
.entry-table input.entry-suspicious { background: #fff3b0; border-color: #c9a400; }
#save-next:focus, #save-next:focus-visible { outline: 3px solid #f5b800; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.35); }

/* Pay-week lifecycle (PAY-20): status panel on the week page, draft banner on reports. */
.ts-draft { margin: 0.75rem 0; padding: 0.6rem 0.8rem; background: #fde8e8; border: 2px solid #c62828; border-radius: 4px; color: #8e1b1b; font-weight: 700; }
.week-status { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid #cfd8dc; border-radius: 6px; background: #fafcfd; }
.week-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.week-status-label { font-weight: 600; }
.week-status-chip { padding: 0.15rem 0.7rem; border-radius: 999px; font-weight: 700; color: #fff; }
.week-status-chip.status-open { background: var(--nfco-navy); }
.week-status-chip.status-review { background: #ef6c00; }
.week-status-chip.status-approved { background: #2e7d32; }
.week-status-chip.status-locked { background: #455a64; }
.week-status-help { color: #37474f; }
.week-status-reason { flex: 1 1 22rem; padding: 0.35rem 0.5rem; border: 1px solid #90a4ae; border-radius: 4px; }
.week-status-button { padding: 0.4rem 0.9rem; border-radius: 4px; border: 1px solid; cursor: pointer; font-weight: 600; }
.week-status-button.forward { background: var(--nfco-navy); border-color: var(--nfco-navy); color: #fff; }
.week-status-button.reopen { background: #fff; border-color: #c62828; color: #c62828; }
.week-status-button:disabled { opacity: 0.45; cursor: default; }
.week-status-error { margin: 0.4rem 0; color: #b71c1c; }
.week-status-history ul { margin: 0.3rem 0 0 1.2rem; padding: 0; }
@media print { .ts-draft { border-width: 3px; } .week-status { display: none; } }

/* Year-end exports page */
.export-form { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.export-form input { width: 6rem; margin-left: 0.5rem; padding: 0.3rem 0.4rem; border: 1px solid #90a4ae; border-radius: 4px; }

/* PR-45 personal-day flags on the week page */
.week-flags { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid #f0b56a; border-radius: 6px; background: #fff8ec; }
.week-flags-title { font-weight: 700; margin-bottom: 0.4rem; color: #7a4b00; }
.week-flag { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.3rem 0; border-top: 1px solid #f3dcb5; }
.week-flag-what { flex: 1 1 22rem; }
.week-flag.resolved .week-flag-what { color: #4a5263; }
.week-flag-done { color: #2e7d32; }

/* Employee page (ADM-06) */
.emp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.emp-sub { color: #37474f; margin-top: 0.2rem; }
.emp-status { font-weight: 700; }
.emp-status.on { color: #2e7d32; }
.emp-status.off { color: #b71c1c; }
.emp-links { display: flex; gap: 1rem; }
.emp-step { display: inline-flex; gap: .75rem; margin-right: .5rem; font-weight: 600; }
.emp-card { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid #cfd8dc; border-radius: 6px; background: #fff; }
.emp-card h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.emp-subtitle { margin: 0.8rem 0 0.4rem; font-weight: 600; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem 1rem; }
.emp-grid label, .emp-action label { display: flex; flex-direction: column; font-size: 0.82rem; color: #37474f; gap: 0.15rem; }
.emp-grid label.wide { grid-column: span 2; }
.emp-card input, .emp-card select { padding: 0.3rem 0.4rem; border: 1px solid #90a4ae; border-radius: 4px; font-size: 0.9rem; }
.emp-action { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-top: 0.6rem; }
.emp-reason { flex: 1 1 20rem; }
.emp-hint { color: #5b6476; font-size: 0.82rem; margin-top: 0.4rem; }
.emp-table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; font-size: 0.88rem; }
.emp-table th { text-align: left; border-bottom: 1px solid #b8c1d1; padding: 0.25rem 0.4rem; background: #eef2f7; }
.emp-table td { padding: 0.2rem 0.4rem; border-bottom: 1px solid #eceff4; }
.emp-table .num { text-align: right; }
.emp-tag { font-size: 0.7rem; padding: 0.05rem 0.4rem; border: 1px solid #8a93a3; border-radius: 3px; vertical-align: middle; color: #5b6476; }
.emp-done { color: #2e7d32; }
.row-inactive td { color: #8a93a3; }
.emp-onepager h3 { margin: 1.1rem 0 0.3rem; font-size: 1rem; }
.emp-facts { border-collapse: collapse; margin-top: 0.6rem; }
.emp-facts th { text-align: left; padding: 0.15rem 1.2rem 0.15rem 0; color: #4a5263; font-weight: 600; }
.emp-facts td { padding: 0.15rem 0; }

/* Sign-in pages and the app bar user menu */
.account-card { max-width: 26rem; margin: 3rem auto; padding: 1.5rem 1.75rem; border: 1px solid #cfd8dc; border-radius: 8px; background: #fff; }
.account-card.wide { max-width: 34rem; }
/* Passkeys (John, Oct 19): the Face ID / fingerprint button above the password form, and the Passkeys page */
.account-passkey { margin: 0.75rem 0 0.25rem; }
.account-passkey .account-button { width: 100%; }
.account-or { text-align: center; color: #5b6476; font-size: 0.85rem; margin: 0.6rem 0 0; }
.passkey-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.passkey-list li { border: 1px solid #d5dce6; border-radius: 6px; padding: 0.5rem 0.65rem; }
.passkey-list form { display: inline-flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin: 0.3rem 0.5rem 0 0; }
.account-card h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
.account-sub { color: #37474f; margin: 0 0 1rem; }
/* Account/Notifications (PUSH-01; John, Oct 16). */
.account-h2 { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; }
.account-ok { background: #eef8ee; border: 1px solid #2e7d32; color: #1b5e20; border-radius: 6px; padding: 0.5rem 0.7rem; margin-bottom: 0.8rem; }
.push-device { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.push-state { margin: 0; font-weight: 600; }
.push-devices { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.push-devices li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid #e3e8ef; }
.push-devices small, .push-category small { display: block; color: #546e7a; font-size: 0.8rem; }
.account-card label.push-category { align-items: flex-start; }
.account-card label.push-category input { margin-top: 0.2rem; }
.push-back { margin: 1.2rem 0 0; }
.account-card label { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.7rem; font-size: 0.9rem; color: #2c3445; }
.account-card label.account-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.account-card input[type=text], .account-card input[type=email], .account-card input[type=password], .account-card input:not([type]) { padding: 0.45rem 0.55rem; border: 1px solid #90a4ae; border-radius: 4px; font-size: 1rem; }
.account-button { display: inline-block; margin-top: 0.4rem; padding: 0.5rem 1.1rem; border: 1px solid var(--nfco-navy); border-radius: 4px; background: var(--nfco-navy); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.account-error { margin-bottom: 0.8rem; padding: 0.5rem 0.7rem; border: 1px solid #e57373; border-radius: 4px; background: #fdecea; color: #8e1b1b; }
.account-hint { margin-top: 1rem; font-size: 0.85rem; color: #5b6476; }
.account-steps li { margin-bottom: 0.7rem; }
.account-qr svg { width: 200px; height: 200px; display: block; margin: 0.5rem 0; }
.account-key { font-size: 1rem; letter-spacing: 0.05em; }
.account-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin: 0.6rem 0 1rem; }
.account-codes code { padding: 0.3rem; background: #f2f5f9; border-radius: 4px; text-align: center; font-size: 1rem; }
.appbar-user { margin-right: 1rem; font-size: 0.9rem; }
.appbar-link { color: inherit; background: none; border: none; font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; margin-left: 0.8rem; padding: 0; }
.appbar-form { display: inline; }

.users-temp code.kiosk-admin-code { font-size: 1.6rem; letter-spacing: 0.2em; }
.users-temp { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 2px solid #2e7d32; border-radius: 6px; background: #eef8ee; }
.users-temp code { font-size: 1.1rem; padding: 0.1rem 0.4rem; background: #fff; }
.users-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Additional Overtime (State OT above Contract OT), flagged in red (John, Oct 5). */
.ts-additional, .ts-additional td { color: #c62828; font-weight: 700; }

/* ---- Branding: app bar, home banner, sign-in cards, printed headers (John, Oct 5) ---- */
@media screen { body { background: var(--nfco-bg); } }
.nfco-appbar { border-bottom: 3px solid var(--nfco-brass); }
.appbar-brand { display: flex; align-items: center; gap: 0.6rem; margin-right: 1.5rem; color: #fff; text-decoration: none; }
.appbar-brand img { height: 46px; width: auto; display: block; }
.appbar-brand span { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

.home-hero {
    display: flex; align-items: center; gap: 2rem; padding: 1.75rem 2rem; color: #fff;
    background: linear-gradient(135deg, var(--nfco-navy) 0%, var(--nfco-navy-2) 100%);
    border-bottom: 3px solid var(--nfco-brass);
}
.home-hero img { height: 110px; width: auto; flex: none; }
.home-hero h1 { margin: 0.1rem 0 0.3rem; font-size: 2rem; font-weight: 600; }
.home-hero-kicker { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nfco-brass); font-weight: 700; }
.home-hero-sub { color: #dbe4ef; }
@media (max-width: 600px) { .home-hero { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem 1rem; } .home-hero img { height: 80px; } }

.account-card { border-top: 4px solid var(--nfco-navy); box-shadow: 0 2px 10px rgba(11, 42, 74, 0.08); }
.account-logo { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 1rem; }

.ts-brand { display: flex; align-items: center; gap: 0.9rem; }
.ts-logo { height: 44px; width: auto; flex: none; }
.report-logo { float: right; height: 44px; width: auto; margin-left: 1rem; }
@media print {
    .ts-logo, .report-logo { height: 0.4in; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ts-compact .ts-logo { height: 0.35in; }
    .ts-dense .ts-logo { height: 0.3in; }
}

/* ---- Phones and small windows (John, Oct 6) ----
   App bar: full links from 1100px; below that a hamburger opens a drawer. The drawer is
   CSS-only (MainLayout is rendered statically): the hidden #nav-toggle checkbox opens it, and
   js/nav.js closes it after a link, Escape or an enhanced navigation. */
.appbar-wide { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; }
.nav-links .nav-group { display: flex; align-items: center; }
.nav-links a {
    color: #fff; text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 4px;
    font-size: 0.875rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.1); }
.nav-links a.active { box-shadow: inset 0 -3px 0 var(--nfco-brass); }

.nav-toggle { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0.25rem 0 -0.5rem; border-radius: 50%; color: #fff; cursor: pointer; }
.nav-burger:hover { background: rgba(255, 255, 255, 0.1); }
.nav-toggle:focus-visible ~ .mud-layout .nav-burger { outline: 2px solid var(--nfco-brass); outline-offset: 2px; }

.nav-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1400; width: min(18rem, 85vw); overflow-y: auto;
    background: #fff; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s;
}
.nav-toggle:checked ~ .nav-drawer { transform: none; visibility: visible; }
.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 1350; background: rgba(11, 42, 74, 0.45); }
.nav-toggle:checked ~ .nav-backdrop { display: block; }
.nav-drawer-user { padding: 1.1rem 1.25rem; background: var(--nfco-navy); color: #fff; font-weight: 600; border-bottom: 3px solid var(--nfco-brass); }
.nav-links.vertical, .nav-links.vertical .nav-group { flex-direction: column; align-items: stretch; }
.nav-heading { padding: 0.9rem 1.25rem 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5b6476; }
.nav-links.vertical a, .nav-drawer-home, .nav-drawer-account a, .nav-drawer-account button {
    display: block; width: 100%; box-sizing: border-box; padding: 0.75rem 1.25rem; border: none; border-radius: 0;
    background: none; color: #1d2433; font: inherit; font-size: 1rem; letter-spacing: normal; text-transform: none;
    text-align: left; text-decoration: none; cursor: pointer;
}
.nav-links.vertical a:hover, .nav-drawer-home:hover, .nav-drawer-account a:hover, .nav-drawer-account button:hover { background: var(--nfco-tint-soft); }
.nav-links.vertical a.active, .nav-drawer-home.active { background: var(--nfco-tint); box-shadow: inset 4px 0 0 var(--nfco-navy); font-weight: 600; }
.nav-drawer-home { margin-top: 0.4rem; }
.nav-drawer-account { margin-top: 0.5rem; padding-top: 0.25rem; border-top: 1px solid #d0d5dd; }
.nav-drawer-account form { margin: 0; }

@media (max-width: 1099px) {
    .appbar-wide { display: none; }
    .nav-burger { display: inline-flex; }
}
@media (min-width: 1100px) { .nav-drawer, .nav-backdrop { display: none !important; } }
@media (max-width: 599px) {
    .appbar-brand { margin-right: 0; }
    .appbar-brand img { height: 34px; }
}
@media (max-width: 359px) { .appbar-brand span { display: none; } }

/* Module picker (Pages/Home.razor) */
.module-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.module-tile {
    display: block; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid #d0d5dd; border-top: 4px solid var(--nfco-navy);
    border-radius: 8px; background: #fff; color: #1d2433; text-decoration: none;
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.08); transition: box-shadow 0.15s, border-color 0.15s;
}
a.module-tile:hover { border-top-color: var(--nfco-brass); box-shadow: 0 6px 18px rgba(11, 42, 74, 0.16); }
.module-tile .module-tile-icon { color: var(--nfco-navy); font-size: 2.25rem; }
.module-tile-name { margin-top: 0.4rem; font-size: 1.25rem; font-weight: 600; }
.module-tile-desc { margin-top: 0.2rem; color: #4a5263; }
.module-tile.disabled { background: #f8f9fb; border-top-color: #9aa1ad; box-shadow: none; opacity: 0.6; cursor: default; }
.module-tile.disabled .module-tile-icon { color: #5b6476; }

/* Scheduling's quick buttons (Pages/SchedulingHome.razor; John, Oct 15) */
.sched-quick { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.sched-quick-button {
    display: flex; flex-direction: column; min-width: 11rem; padding: 0.6rem 1rem; border-radius: 8px;
    background: var(--nfco-navy); color: #fff; text-decoration: none; box-shadow: 0 2px 8px rgba(11, 42, 74, 0.15);
}
.sched-quick-button strong { font-size: 1.05rem; }
.sched-quick-button span { font-size: 0.85rem; opacity: 0.85; }
a.sched-quick-button:hover { background: var(--nfco-navy-2); }
.sched-quick-button.disabled { background: #e4e7ec; color: #5b6476; box-shadow: none; }
@media (max-width: 599px) { .sched-quick-button { flex: 1 1 100%; } }

/* Sign-in splash (Layout/AccountLayout.razor) */
.account-splash {
    display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh;
    box-sizing: border-box; padding: 2.5rem 16px;
    background: linear-gradient(135deg, var(--nfco-navy) 0%, var(--nfco-navy-2) 100%);
}
.account-splash-logo { display: block; width: 220px; max-width: 60%; height: auto; margin: 0 auto 1.5rem; }
.account-splash .account-card {
    width: 100%; box-sizing: border-box; margin: 0 auto; border: none; border-top: 4px solid var(--nfco-brass);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Wide tables scroll inside their own box instead of the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Not in print: a scroll box loses columns after the first printed page (the ADP report's page 2 had no Overtime; John, Oct 13). */
@media print { .table-scroll { overflow: visible; } }
.entry-layout > * { min-width: 0; }

/* Week page: keep the name column in view while the figures scroll. */
@media (max-width: 899px) {
    .sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
    .sticky-first.mud-table-striped tbody tr:nth-of-type(odd) td:first-child { background-color: var(--mud-palette-background-gray); }
}

@media screen and (max-width: 599px) {
    .page-actions { flex-wrap: wrap; gap: 0.75rem; }
    .timesheet, .report { margin: 0.5rem 0 1rem; padding: 0.75rem; border-left: none; border-right: none; border-radius: 0; }
    .ts-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .ts-period { text-align: left; }
    .ts-lines .c-date { width: auto; }
    .ts-indent { padding-left: 1rem !important; }
    .ts-bottom, .ts-balances-body { flex-direction: column; align-items: stretch; gap: 1rem; }
    .ts-totals, .ts-days { min-width: 0; width: 100%; }
    .ts-paystub { min-width: 0; }
    .ts-bank-row { grid-template-columns: 1fr 2.5rem 8rem 2.5rem; }
    .ts-bank-row > span { white-space: normal; }
    .account-card { margin: 1rem auto; }
    .entry-layout { padding: 0.5rem; }
    .entry-who { flex-wrap: wrap; width: 100%; }
    .entry-who select { min-width: 0; width: 100%; }
    .emp-grid label.wide { grid-column: auto; }
}

/* Employee page: scheduling profile (SCH-47) */
.emp-grid + .emp-grid { margin-top: 0.6rem; }
.emp-grid label.sched-check { flex-direction: row; align-items: center; gap: 0.4rem; align-self: end; padding-bottom: 0.35rem; font-size: 0.9rem; color: #1d2433; }
.emp-grid label.sched-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--nfco-navy); }
.sched-preview { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.6rem 0; }
.sched-preview span { min-width: 2.6rem; padding: 0.2rem 0.3rem; border-radius: 4px; font-size: 0.72rem; line-height: 1.2; text-align: center; }
.sched-preview .on { background: var(--nfco-navy); color: #fff; }
.sched-preview .off { background: #e3e6ec; color: #4a5263; }
.sched-prefs select { padding: 0.2rem 0.3rem; border: 1px solid #90a4ae; border-radius: 4px; font-size: 0.85rem; }
.sched-prefs .sched-reads { color: #37474f; font-style: italic; }
.sched-prefs .sched-row-buttons { white-space: nowrap; }
.sched-prefs tr.sched-avoid td { background: #fff4f2; }

/* Phone list and seniority list (John, Oct 6): laid out like data/phonelist.pdf, one Letter page. */
.phonelist table, .sen-table, .training-report table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.phonelist th, .phonelist td, .sen-table th, .sen-table td, .training-report th, .training-report td { border: 1px solid #1d2433; padding: 0.08rem 0.35rem; text-align: left; white-space: nowrap; }
.phonelist .num, .sen-table .num, .training-report .num { text-align: right; }
.phonelist .pl-title th { border-bottom: 1px solid #1d2433; }
.phonelist .pl-section td, .sen-table .pl-section td, .training-report .pl-section td { font-weight: 700; background: #f2f5f9; }
.phonelist .pl-foot td { border-top: 2px solid #1d2433; }
.training-report table { margin: 0.75rem 0 0.5rem; font-size: 0.95rem; }
.training-report th, .training-report td { padding: 0.2rem 0.5rem; }
.seniority h2 { margin: 0 0 0.2rem; }
.sen-table { margin-top: 0.8rem; }
.sen-table tr.sen-editing td { background: var(--nfco-tint-strong); }
.sen-check { color: #b3261e; font-weight: 600; }
.sen-tie { display: inline-block; margin: 0 0.5rem; font-weight: 600; }
.sen-ok { margin: 0.6rem 0; padding: 0.5rem 0.7rem; border: 1px solid #2e7d32; border-radius: 4px; background: #eef8ee; }
.sen-editor { margin: 0.8rem 0; padding: 0.8rem 1rem; border: 2px solid var(--nfco-navy); border-radius: 6px; background: #fff; }
.sen-editor-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.6rem; }
.sen-editor-head button { margin-left: auto; }
@media print {
    .phonelist table, .sen-table { font-size: 8pt; }
    .phonelist .pl-section td, .sen-table .pl-section td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media screen and (max-width: 599px) {
    .phonelist, .seniority { overflow-x: auto; }
}
/* Scheduling profile save bar: stays at the bottom of the screen while there are unsaved changes. */
.sched-savebar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid #d0d5dd; border-radius: 6px; background: #f8f9fb; }
.sched-savebar.dirty { position: sticky; bottom: 0.5rem; z-index: 5; border: 2px solid var(--nfco-brass); background: #fffbea; box-shadow: 0 4px 16px rgba(11, 42, 74, 0.18); }
.sched-savebar .emp-reason { flex: 1 1 18rem; }

/* Scheduling: standard times editor, day checkboxes, period skeleton (SCH-40) */
.std-table td { white-space: nowrap; }
.std-table input[type=time] { width: 6.5rem; }
.std-table .std-seats { width: 3.2rem; }
.std-table .std-marks { width: 3.5rem; }
.std-table .std-days label { display: inline-flex; flex-direction: column; align-items: center; font-size: 0.7rem; margin-right: 0.15rem; }
.std-table tr.std-dirty td { background: #fffbea; }
.day-grid th { font-size: 0.78rem; }
.day-grid tr.day-weekend td, .sk-table tr.day-weekend td { background: #f4f7fc; }
.day-grid tr.day-holiday td, .sk-table tr.day-holiday td { background: #fff4e5; }
.sk-table { border-collapse: collapse; font-size: 0.82rem; background: #fff; }
.sk-table th, .sk-table td { border: 1px solid #c3c8d2; padding: 0.25rem 0.4rem; vertical-align: top; }
.sk-table thead th { background: #e8edf5; text-align: center; }
.sk-table .sk-day { white-space: nowrap; }
.sk-table .sk-options { font-size: 0.7rem; color: #4a5263; white-space: normal; max-width: 9rem; }
.sk-table .sk-time { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-table .sk-meta { font-size: 0.72rem; color: #4a5263; white-space: nowrap; letter-spacing: 0.05em; }
.day-reminders span { display: inline-block; margin: 0.1rem 0.2rem 0.1rem 0; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.7rem; white-space: nowrap; }
.rem-federal { background: #e3ecf8; color: var(--nfco-navy); border: 1px solid #b8c9e2; }
.rem-local { background: #fff1d6; color: #7a4b00; border: 1px solid #f0cf8a; }
.rem-list { columns: 2; margin: 0; padding-left: 1.1rem; }
/* Shaping (SCH-41) */
.sk-table td.sk-click { cursor: pointer; }
.sk-table td.sk-click:hover { background: var(--nfco-tint-soft); }
.sk-table td.sk-hand { outline: 2px solid var(--nfco-brass); outline-offset: -2px; }
.sk-table td.sk-selected { background: var(--nfco-tint-strong) !important; }
.sk-table .sk-note { font-size: 0.7rem; color: #7a4b00; font-style: italic; white-space: normal; max-width: 10rem; }
.shift-editor .shift-hours { align-self: end; padding-bottom: 0.35rem; }
/* Leave requests and vacation schedule (SCH-20, SCH-42) */
.leave-denied td, .leave-withdrawn td { color: #8a93a3; }
.leave-approved td:nth-child(5) { color: #2e7d32; font-weight: 600; }
.vac-table td { vertical-align: top; }
.vac-table tr.vac-over td { background: #fde8e8; }
.vac-table tr.vac-over td:nth-child(2) { color: #b3261e; }
.vac-fits, .vac-wait { display: inline-block; margin: 0 0.4rem 0.1rem 0; white-space: nowrap; }
.vac-wait { color: #7a4b00; font-style: italic; }

/* Schedule names and checks (SCH-44/45) */
.mode-switch { display: inline-flex; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; overflow: hidden; margin-bottom: .5rem; }
.mode-switch button { background: none; border: 0; padding: .3rem .8rem; cursor: pointer; color: inherit; }
.mode-switch button.mode-on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.sk-names { font-weight: 600; font-size: .8rem; }
.sk-flag-block { box-shadow: inset 3px 0 0 #c62828; }
.sk-flag-warn { box-shadow: inset 3px 0 0 #ef8f00; }
.seat-table td, .seat-table th { padding: .2rem .5rem; text-align: left; }
.seat-table select { min-width: 12rem; max-width: 100%; }
.seat-flags, .flag-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.seat-flags li, .flag-list li { padding: .25rem .5rem; margin-bottom: .2rem; border-left: 3px solid transparent; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.flag-block { border-left-color: #c62828 !important; background: rgba(198, 40, 40, .07); }
.flag-warn { border-left-color: #ef8f00 !important; background: rgba(239, 143, 0, .08); }
.flag-accepted { border-left-color: #9e9e9e !important; opacity: .75; }
.flag-rule { font-family: monospace; font-size: .8rem; }
.flag-why { font-style: italic; font-size: .85rem; }
.flag-count { font-size: .8rem; font-weight: normal; margin-left: .6rem; }
.flag-count.block { color: #c62828; }
.flag-count.warn { color: #ef8f00; }

/* Fill and confirm (SCH-43/45) */
.nm-fill { color: #1565c0; font-style: italic; }
.nm-hand { color: inherit; }
.nm-ok { color: #2e7d32; }
.seat-trainee td { font-size: .85rem; }
.seat-how { font-size: .8rem; max-width: 26rem; }
.seat-actions { white-space: nowrap; }
.seat-pick { margin-top: .6rem; border-top: 1px solid var(--mud-palette-lines-default); padding-top: .4rem; }
.seat-options { list-style: none; padding: 0; margin: 0; max-height: 22rem; overflow-y: auto; }
.seat-options li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; padding: .15rem .3rem; border-left: 3px solid transparent; }
.seat-options button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; font-weight: 600; }
.seat-options button:disabled { cursor: default; font-weight: normal; }
.seat-options .opt-ok { border-left-color: #2e7d32; }
.seat-options .opt-flag { border-left-color: #ef8f00; }
.seat-options .opt-no { opacity: .6; }
.opt-class { font-weight: normal; font-size: .8rem; opacity: .8; }
.opt-why { font-size: .8rem; }

.flag-cost { font-weight: 600; font-size: .85rem; color: #c62828; }

/* Suggestions and the replacement list (John, Oct 8) */
.nm-suggest { color: #e65100; font-weight: 600; }
.seat-options .opt-group { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; opacity: .75; margin-top: .4rem; border-left: 0; }

.sched-num { width: 4.5rem; }

.sched-lands { font-size: .8rem; }

.vac-pending { font-style: italic; }
.vac-pending .entry-add { font-style: normal; margin-left: .25rem; }

.flag-info { border-left-color: #90a4ae !important; color: #546e7a; }

/* Highlight one person's shifts (John, Oct 8) */
.sk-table td.sk-hl { background: rgba(255, 213, 79, .35); }
.nm-hl { background: #ffd54f; color: #000 !important; border-radius: 3px; padding: 0 .15rem; }
.nm-open { color: var(--mud-palette-text-secondary, #888); font-weight: normal; }
.sk-names span, .sk-table td span[class^="nm-"] { cursor: pointer; }
.sk-hl-bar { margin: .25rem 0 .5rem; }

/* The highlighted person's leave days (John, Oct 9): a tint on the day and a tag naming the kind */
.sk-table td.sk-day.lv-day { box-shadow: inset 4px 0 0 var(--lv-color); background: color-mix(in srgb, var(--lv-color) 14%, transparent); }
.lv-vacation { --lv-color: #1E6FD9; }
.lv-sick { --lv-color: #C62828; }
.lv-personal { --lv-color: #7B3FB8; }
.lv-lop { --lv-color: #6B7280; }
.lv-tag { display: inline-block; margin-top: .15rem; padding: 0 .35rem; border-radius: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--lv-color); }
.lv-tag.lv-requested { color: var(--lv-color); background: transparent; border: 1px dashed var(--lv-color); }
.lv-unpaidmedicalleave { --lv-color: #B45309; }

/* Publishing (SCH-48) */
.pub-list { margin: 0 0 .5rem; font-size: .85rem; }
.pub-item { display: inline-block; margin-right: .5rem; padding: .05rem .4rem; border-radius: 3px; background: var(--nfco-tint); }
.pub-item.pub-final { background: #1E6B3A; color: #fff; }
.pub-problems { margin: .25rem 0 .5rem 1.25rem; font-size: .85rem; max-height: 14rem; overflow: auto; }

/* ---- Printed schedule sheets (SCH-48): the schedule on Legal landscape, the vacation/traffic sheet and the
   daycheck on Letter, laid out like the FoxPro printouts (data/schedule1.pdf, vacmaint1.pdf, daycheck1.pdf). ---- */
.sp-sheet { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; padding: 0.5rem; overflow-x: auto; }
.vt-sheet, .dc-sheet { background: #fff; color: #000; padding: 0.5rem; overflow-x: auto; }
.sp-sheet, .vt-sheet, .dc-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.sp-table { width: 100%; min-width: 60rem; border-collapse: collapse; table-layout: fixed; font-size: 9.5pt; }
.sp-table th, .sp-table td { border: 1px solid #000; padding: 0.1rem 0.25rem; vertical-align: top; }
.sp-table thead th { border: none; border-bottom: 1px solid #000; font-weight: 400; font-size: 11pt; }
.sp-boat { text-align: center; white-space: nowrap; }
.sp-ampm { font-size: 9pt; margin: 0 0.6rem; }
.sp-day { width: 6.5%; white-space: nowrap; }
.sp-printed { font-size: 7.5pt !important; text-align: left; }
.sp-version { font-weight: 700; }
.sp-dayname { width: 3%; text-align: center; vertical-align: middle !important; }
.sp-oncall { font-size: 8pt; }
.sp-note { font-size: 7pt; font-style: italic; }
.sp-holiday .sp-day strong { text-decoration: underline; }
.sp-line { display: flex; justify-content: space-between; gap: 0.25rem; min-height: 1.1em; white-space: nowrap; overflow: hidden; }
.sp-times { font-size: 9pt; }
.sp-third { justify-content: center; position: relative; padding-right: 1.6rem; }
.sp-hours { position: absolute; right: 0; bottom: 0; font-size: 6.5pt; font-family: "Courier New", monospace; }
.sp-cell.sp-tieup { outline: 2px solid #2EAE48; outline-offset: -3px; }
.sp-cell.sp-gpstart { outline: 2px solid #E5C400; outline-offset: -3px; }
.sp-foot { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 0.3rem; font-size: 8.5pt; font-weight: 700; }
.sp-key { padding: 0.05rem 0.5rem; font-weight: 400; }
.sp-key.sp-tieup { border: 2px solid #2EAE48; }
.sp-key.sp-gpstart { border: 2px solid #E5C400; }

.vt-table { border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 9.5pt; }
.vt-table th { font-weight: 400; font-size: 11pt; padding: 0 0.5rem; vertical-align: bottom; }
.vt-times { font-size: 9pt; }
.vt-table td { border: 1px solid #000; border-top: none; vertical-align: top; padding: 0.1rem 0.4rem; height: 0.62in; min-width: 1.1in; }
.vt-table td.vt-date { border: none; vertical-align: middle; white-space: nowrap; }
.vt-table td.vt-leave { min-width: 1.6in; }
.vt-leave.vt-two { column-count: 2; column-gap: 0.4rem; }
.vt-foot { margin-top: 0.4rem; font-size: 8pt; }

.dc-table { border-collapse: collapse; font-family: "Courier New", monospace; font-size: 9pt; }
.dc-table th, .dc-table td { border-left: 1px solid #000; border-bottom: 1px solid #000; padding: 0 0.3rem; text-align: left; min-width: 1.4rem; }
.dc-table .dc-head th { font-weight: 700; border-left: none; }
.dc-name { min-width: 6rem; }
.dc-today { background: #F6C79A; }
.dc-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-family: "Courier New", monospace; font-size: 8pt; font-weight: 700; }

@media print {
    .sp-sheet, .vt-sheet, .dc-sheet { padding: 0; overflow: visible; }
    .sp-table { min-width: 0; }
}

/* Change records after the final (SCH-49): red = office, blue = crew switch, like the PDF marks */
.nm-red { color: #C62828 !important; font-weight: 700; }
.nm-blue { color: #1565C0 !important; font-weight: 700; }
/* Crossed off (John, Oct 27): a red line through the name, "needs replacing"; prints too. */
.nm-crossed { text-decoration: line-through !important; text-decoration-color: #C62828 !important; text-decoration-thickness: 2px !important; }
.seat-crossed-note { font-size: .78rem; color: #C62828; }
.sp-change { border: 1.5px solid currentColor; padding: 0 0.15rem; font-weight: 700; }
.sp-change.sp-red { color: #D32F2F; }
.sp-change.sp-blue { color: #1565C0; }
.sp-change.sp-green { color: #2E7D32; } /* a trainee, beside the person they're with (John, Oct 16) */
.sp-was { text-decoration: line-through; color: #555; font-size: 7pt; margin-right: 0.15rem; }

/* Printed schedule (John, Oct 9): every day the same height so it fits one Legal page; larger on screen than in
   print; empty cells a centred -----; the split's names centred with room either side; a dark line between the
   two pay weeks. */
.sp-table { font-size: 11pt; }
.sp-names, .sp-third { font-size: 12pt; }
.sp-cell.sp-blank { text-align: center; vertical-align: middle; }
.sp-table tr.sp-payweek > td, .sp-table tr.sp-payweek > th { border-top: 3px solid #000; }
/* The midweek sheet (John, Oct 15): where the next schedule starts, a heavier double line and a tag on the day. */
.sp-table tr.sp-period > td { border-top: 6px double #000; }
.sp-newperiod { display: table; margin-bottom: 0.1rem; padding: 0 0.3rem; background: #000; color: #fff; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; }
.sp-midweek-note { margin: 0.5rem 0; padding: 0.4rem 0.7rem; background: #fff8e1; border: 1px solid #c9a227; border-radius: 4px; color: #5c4a00; }
@media print {
    .sp-table { font-size: 9.5pt; }
    .sp-names, .sp-third { font-size: 10.5pt; }
    .sp-table tbody tr { height: 0.5in; }
    .sp-table tbody td { overflow: hidden; }
}

/* The period page grid: names a little larger; the pay-week line (John, Oct 9) */
.sk-table .sk-names { font-size: 0.95rem; }
.sk-table tr.sk-payweek > td { border-top: 3px solid #333; }

/* Contract holidays (John, Oct 9): clipart and a light tint of the holiday's colour on the day */
.hol-newyear { --hol: #C9A227; }
.hol-washington { --hol: #1F3A93; }
.hol-easter { --hol: #9C7AC9; }
.hol-memorial { --hol: #B71C1C; }
.hol-independence { --hol: #C62828; }
.hol-labor { --hol: #1565C0; }
.hol-columbus { --hol: #00897B; }
.hol-veterans { --hol: #1F3A93; }
.hol-thanksgiving { --hol: #E65100; }
.hol-christmaseve { --hol: #2E7D32; }
.hol-christmas { --hol: #C62828; }
.hol-generic { --hol: #C9A227; }
.sp-table tr.sp-holiday > td { background: color-mix(in srgb, var(--hol) 13%, #fff); }
.sp-table tr.sp-holiday > td.sp-day { box-shadow: inset 4px 0 0 var(--hol); }
.sp-holname, .sk-holname { font-size: 8pt; font-weight: 700; color: var(--hol); }
.sk-table tr.day-holiday > td.sk-day { background: color-mix(in srgb, var(--hol) 16%, transparent); box-shadow: inset 4px 0 0 var(--hol); }

/* Daycheck fills a Letter page (John, Oct 9); a dark line where each pay week starts */
.dc-table { width: 100%; font-size: 11pt; table-layout: fixed; }
.dc-table th:first-child, .dc-table td.dc-name { width: 1.15in; }
.dc-table .dc-payweek { border-left: 3px solid #000; }

/* Print fixes (John, Oct 9): nothing clipped at the edges (0.35in Legal margins), the footer notes on one line in
   their boxes, the split laid out like the other shifts; the daycheck at page width on screen and one page in print. */
.sp-foot { flex-wrap: nowrap; gap: 0.8rem; font-size: 8pt; white-space: nowrap; }
.sp-key { padding: 0.05rem 0.4rem; font-weight: 700; }
@media print {
    .sp-table tbody tr { height: 0.5in; }
}
.dc-sheet { max-width: 9in; }
.dc-table { font-size: 10pt; }
.dc-table th, .dc-table td { padding: 0 0.15rem; line-height: 1.1; }
@media print {
    .dc-sheet { max-width: none; }
    .dc-table { height: auto; font-size: 9.5pt; }
    .dc-table tr { height: calc(10.2in / var(--dc-rows, 56)); }
}

/* Printing (John, Oct 9): each print page sets its own @page (size and margins) inline, so there are no named pages
   and no forced blank pages; the layout wrapper adds nothing around the sheet. The split prints as an inset box,
   like John's corrected print: AM times left, PM times right, the crew together in the middle, hours in the corners. */
@media print {
    html, body { margin: 0 !important; padding: 0 !important; }
    .app-content, .mud-main-content, .mud-layout { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
}
.sp-cell.sp-split { padding: 0.1rem 0; }
.sp-split-box { margin: 0 15%; padding: 0 0.3rem; }
.sp-split-box.sp-tieup { outline: 2px solid #2EAE48; outline-offset: 0; }
.sp-split-box.sp-gpstart { outline: 2px solid #E5C400; outline-offset: 0; }
.sp-split-names { justify-content: center; gap: 1.5rem; }
.sp-split-third { justify-content: space-between; align-items: flex-end; }
.sp-split-hours { font-size: 6.5pt; font-family: "Courier New", monospace; }

/* The vacation / traffic sheet on Letter landscape lines up with the schedule on Legal (John, Oct 9): the same header
   height and the same 0.5in day rows. */
.vt-table thead tr { height: 0.42in; }
@media print {
    .sp-table thead tr { height: 0.42in; }
    .vt-table tbody tr { height: 0.5in; }
    .vt-table td { height: auto; }
}

/* ---- Crew portal (Phase 3; John, Oct 9): phone first, static pages, large tap targets ---- */
.crew-page { max-width: 40rem; margin: 0 auto; padding: 1rem; }
.crew-title { font-size: 1.5rem; margin: 0.25rem 0 0.75rem; color: var(--nfco-navy); }
.crew-sub { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }
.crew-empty { padding: 1rem; background: var(--nfco-tint-soft); border-radius: 6px; }
.crew-period { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-bottom: 0.75rem; }
.crew-period a, .crew-links a { padding: 0.35rem 0; }
.crew-badge { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; }
.crew-final { background: #1E6B3A; color: #fff; }
.crew-prelim { background: #FFF3CD; color: #6B4E00; }
.crew-days { list-style: none; margin: 0; padding: 0; }
.crew-day { border: 1px solid #cfd8e3; border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; background: #fff; }
.crew-day.crew-today { border: 2px solid var(--nfco-navy); }
.crew-day.crew-off { background: var(--nfco-tint-soft); }
.crew-date { display: flex; justify-content: space-between; gap: 0.5rem; }
.crew-holiday { font-size: 0.85rem; font-weight: 600; }
.crew-shift { margin-top: 0.4rem; padding-left: 0.6rem; border-left: 4px solid var(--nfco-navy); }
.crew-shift.crew-red { border-left-color: #C62828; }
.crew-shift.crew-blue { border-left-color: #1565C0; }
.crew-what { font-weight: 600; }
.crew-when, .crew-with, .crew-partial, .crew-changed { font-size: 0.9rem; }
.crew-changed, .crew-partial { color: #555; font-style: italic; }
.crew-leave { margin-top: 0.3rem; font-weight: 600; color: #1E6FD9; }
.crew-offtext { color: #666; margin-top: 0.2rem; }
.crew-cshift { display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; margin-top: 0.35rem; font-size: 0.9rem; }
.crew-cshift .crew-with { grid-column: 1 / -1; color: #333; }
.crew-links { padding-left: 1.1rem; }
.crew-asof { color: #555; font-size: 0.9rem; }
.crew-figures { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.crew-figures li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #e3e8ef; background: #fff; }
.crew-figures li strong { white-space: nowrap; }
.crew-details { margin: 0.5rem 0 1rem; }
.crew-details summary { cursor: pointer; padding: 0.4rem 0; color: var(--nfco-navy); }
.crew-list { list-style: none; padding: 0; margin: 0; }
.crew-list li { padding: 0.45rem 0.25rem; border-bottom: 1px solid #e3e8ef; }
.crew-list li span { display: inline-block; min-width: 6rem; font-weight: 600; }
.crew-msg { padding: 0.6rem 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; }
.crew-msg-ok { background: #E8F5E9; color: #1B5E20; }
.crew-msg-err { background: #FDECEA; color: #8A1C1C; }
.crew-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
/* My timecard (TC-01; John, Oct 16): a day per card, phone first. */
.tc-weeks { display: flex; justify-content: space-between; align-items: center; margin: 0.4rem 0 0.8rem; }
.tc-status { border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; font-weight: 600; }
.tc-status small { font-weight: 400; }
.tc-status.tc-in { background: #E8F5E9; color: #1B5E20; }
.tc-status.tc-due { background: #FFF8E1; color: #6B4E00; }
.tc-status.tc-closed { background: #ECEFF1; color: #37474F; }
.tc-day { border: 1px solid #cfd8dc; border-radius: 8px; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; background: #fff; }
.tc-day.tc-vacation, .tc-day.tc-sick, .tc-day.tc-personal, .tc-day.tc-lop { border-color: #F9A825; background: #FFFDF5; }
.tc-day.tc-off { background: #FAFAFA; }
.tc-date { font-size: 1.05rem; margin: 0; }
.tc-shifts { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; color: #263238; }
.tc-shifts.tc-none { padding-left: 0; color: #607d8b; }
.tc-taken-off { margin: 4px 0; padding: 4px 8px; border-left: 3px solid #f9a825; background: #fff8e1; color: #5d4037; }
.tc-kinds { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; }
.tc-kind { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.95rem; min-height: 32px; }
.tc-fixed { margin: 0; font-weight: 600; min-height: 32px; align-items: center; } /* a scheduled shift: Worked, not a choice (John, Oct 19) */
.tc-numbers { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.tc-numbers label { display: flex; flex-direction: column; font-size: 0.85rem; }
.tc-numbers input { width: 6rem; }
.tc-note { display: flex; flex-direction: column; font-size: 0.85rem; }
.tc-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
/* Payroll → Timecards and a card's edit page (TC-07). */
.tc-office-bar { align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.disabled-link { opacity: 0.45; pointer-events: none; }
tr.tc-missing td { background: #FFF8E1; }
tr.tc-needed td { background: #FDECEA; }
.tc-needed-mark { margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: #C62828; color: #fff; font-size: 0.8em; white-space: nowrap; }
.tc-needed-count { color: #C62828; margin-left: 6px; }
.tc-edit .tc-num { width: 4.5rem; }
.tc-edit input[type=text] { width: 100%; min-width: 10rem; }
.tc-week-note { display: flex; flex-direction: column; flex: 1; font-size: 0.9rem; }
.tc-week-note input { width: 100%; }
/* John, Nov 2: payroll's notes on the card (read-only), and moving between cards. */
.tc-payroll-note { font-size: 0.85rem; color: #1565C0; margin-top: 2px; }
.tc-person-nav { display: inline-flex; align-items: center; gap: 8px; }
.tc-person-nav select { max-width: 14rem; }
/* Seniority list for the union: no dates (John, Nov 2), on screen and printed. */
.sen-nodates .sen-date, .sen-nodates .sen-leave { display: none; }
/* Do payroll (John, Nov 2): the week's steps in order, the next one marked. */
.pay-steps { list-style: none; counter-reset: paystep; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pay-step { counter-increment: paystep; position: relative; padding: 12px 16px 12px 56px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; }
.pay-step::before { content: counter(paystep); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 600; background: rgba(0, 0, 0, 0.08); }
.pay-step-done::before { content: "✓"; background: #2E7D32; color: #fff; }
.pay-step-next { border: 2px solid #1565C0; }
.pay-step-next::before { background: #1565C0; color: #fff; }
.pay-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pay-step-name { font-weight: 600; font-size: 1.05rem; }
.pay-step-tick { color: #2E7D32; font-size: 0.9rem; }
.pay-step-left { color: #C62828; font-size: 0.9rem; }
.pay-step-who { font-size: 0.85rem; padding: 1px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.08); }
.pay-step .week-status-button { margin-top: 6px; }
.pay-step-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-step-bookkeeper { margin-top: 8px; border-style: dashed; }
.sched-week-only { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 12px;
    border-left: 4px solid #1565C0; background: rgba(21, 101, 192, 0.08); }
/* Timecards 4 to a letter page (TC-08), each card a quarter page like the paper one. */
.tcp-page { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.2in; width: 8in; height: 10.4in; margin: 0 auto 0.3in; page-break-after: always; break-after: page; }
.tcp-card { border: 1px solid #000; padding: 0.12in 0.14in; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.tcp-head { display: flex; justify-content: space-between; gap: 0.15in; font-size: 10pt; margin-bottom: 0.04in; }
.tcp-head u { text-decoration: none; border-bottom: 1px solid #000; padding: 0 0.08in; font-weight: 700; }
.tcp-state { font-size: 7pt; color: #444; align-self: flex-end; }
.tcp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tcp-table th { font-size: 6.5pt; font-weight: 400; text-align: left; border-bottom: 1px solid #000; }
.tcp-table td { border-bottom: 1px solid #000; vertical-align: middle; padding: 0 0.03in; line-height: 1.1; }
.tcp-day { width: 0.62in; font-size: 8.5pt; }
.tcp-h { width: 0.42in; text-align: center; border-left: 1px solid #000; border-right: 1px solid #000; font-size: 9pt; }
.tcp-other { font-size: 7pt; height: 0.13in; border-bottom: none !important; }
.tcp-boxes { font-size: 6.5pt; display: flex; flex-wrap: wrap; gap: 0 0.1in; line-height: 1.05; }
.tcp-box { font-size: 7pt; margin-right: 0.01in; }
.tcp-on { font-weight: 700; }
.tcp-notes { margin-top: 0.04in; font-size: 7.5pt; border-top: 1px solid #000; padding-top: 0.03in; flex: 1; min-height: 0.3in; overflow: hidden; }
@media print { .tcp-page { margin: 0; } }
.crew-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.95rem; }
.crew-form input[type=checkbox] { width: auto; }
.crew-form input, .crew-form select { font-size: 1rem; padding: 0.45rem; border: 1px solid #90a4ae; border-radius: 6px; }
.crew-card { border: 1px solid #cfd8e3; border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; background: #fff; }
.crew-status { font-size: 0.9rem; color: #444; margin-top: 0.2rem; }
.crew-note { font-size: 0.85rem; color: #555; margin-top: 0.2rem; }
.crew-buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.crew-button { font-size: 1rem; padding: 0.55rem 1rem; border-radius: 6px; border: none; background: var(--nfco-navy); color: #fff; cursor: pointer; }
.crew-button-plain { background: #fff; color: var(--nfco-navy); border: 1px solid var(--nfco-navy); }
.crew-news { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.crew-news li { padding: 0.5rem 0.75rem; margin-bottom: 0.35rem; border-radius: 6px; background: var(--nfco-tint-soft); }
.crew-news li.crew-news-action { background: #FFF3CD; font-weight: 600; }
.crew-footer { display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e3e8ef; }
.crew-footer a.crew-button { text-decoration: none; }
.crew-figures li.crew-state-overdue { background: #FDECEA; }
.crew-figures li.crew-state-overdue strong { color: #8A1C1C; }
.crew-figures li.crew-state-soon { background: #FFF8E1; }
.crew-figures li.crew-state-ok { background: #E8F5E9; }
.crew-figures li.crew-state-na { color: #777; }
.crew-figures small { color: #555; }

/* Training & licenses (John, Oct 9) */
.training-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.15rem 1rem; margin: 0.5rem 0; }
.emp-table td.due-overdue { background: #FDECEA; }
.emp-table td.due-soon { background: #FFF8E1; }
.emp-table td.due-ok { background: #E8F5E9; }
.emp-table td.due-na { color: #777; }
.training-hidden { color: #777; font-style: italic; }
.emp-training { margin: 0 0 0.5rem 1.1rem; }
.emp-inline { display: flex; gap: 0.35rem; align-items: center; }
.emp-request { border: 1px solid #f0b56a; background: #fff8ec; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.emp-request ul { margin: 0.25rem 0 0.25rem 1.1rem; }

/* Swap two people (John, Oct 9) */
.swap-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: #E3F2FD; border: 1px solid #90CAF9; }
.swap-bar.swap-done { background: #F1F8E9; border-color: #AED581; }
.swap-flags { flex-basis: 100%; margin: 0 0 0 1.1rem; }

/* Inbox (John, Oct 10): the app bar icon with the unread count, and the crew list and message pages. */
.appbar-inbox { position: relative; display: inline-flex; align-items: center; color: inherit; margin-right: 0.6rem; padding: 0.25rem; }
.appbar-inbox-count { position: absolute; top: -0.2rem; right: -0.45rem; min-width: 1.1rem; padding: 0 0.3rem; border-radius: 999px; background: #c62828; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-list li { border-bottom: 1px solid #e0e0e0; }
.inbox-list a { display: block; padding: 0.7rem 0.25rem; color: inherit; text-decoration: none; }
.inbox-subject { display: block; }
.inbox-unread .inbox-subject { font-weight: 700; }
.inbox-unread a { border-left: 4px solid var(--nfco-navy); padding-left: 0.6rem; }
.inbox-meta { display: block; font-size: 0.8rem; color: #616161; margin-top: 0.15rem; }
/* The office timecard's Paid column (John, Nov 2). */
.tc-paid { font-weight: 600; white-space: nowrap; }
/* INBOX-05 (John, Nov 2): a request someone already dealt with. */
.inbox-outcome { margin: 8px 0; padding: 6px 10px; border-left: 4px solid #2E7D32; background: rgba(46, 125, 50, 0.08); color: #2E7D32; font-weight: 600; }
.inbox-body { white-space: pre-wrap; margin: 1rem 0; line-height: 1.45; }
.inbox-table { width: 100%; border-collapse: collapse; }
.inbox-table td, .inbox-table th { padding: 0.35rem 0.5rem; border-bottom: 1px solid #e0e0e0; text-align: left; vertical-align: top; }
.inbox-table tr.inbox-unread td { font-weight: 700; }
.inbox-pick { max-height: 16rem; overflow-y: auto; border: 1px solid #e0e0e0; padding: 0.4rem; columns: 2 14rem; }
.inbox-pick label { display: block; }
.inbox-receipt { font-size: 0.8rem; color: #616161; margin-right: 0.8rem; }
.inbox-link { background: none; border: none; padding: 0; font: inherit; color: var(--nfco-navy); text-decoration: underline; cursor: pointer; text-align: left; }
/* Inbox filters and Important (INBOX-02, INBOX-03; John, Oct 22): a row of category buttons, wrapping on a phone. */
.inbox-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.inbox-filter { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid #bdbdbd; border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: 0.9rem; text-decoration: none; cursor: pointer; }
.inbox-filter.on { background: var(--nfco-navy); border-color: var(--nfco-navy); color: #fff; }
.inbox-filter-count { font-weight: 700; }
.inbox-important { display: inline-block; padding: 0 0.4rem; margin-right: 0.35rem; border-radius: 4px; background: #c62828; color: #fff; font-size: 0.75rem; font-weight: 700; vertical-align: 0.1em; }
.inbox-list li.inbox-flagged a { border-left: 4px solid #c62828; padding-left: 0.6rem; }
.inbox-table tr.inbox-flagged td:first-child { border-left: 4px solid #c62828; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }

/* The alert banner and the Development-mode label (Admin → Settings; John, Oct 10). */
.site-banner { background: #c62828; color: #fff; padding: 0.55rem 1rem; text-align: center; font-weight: 600; white-space: pre-wrap; }
.site-banner-mode { background: #4a148c; font-size: 0.85rem; letter-spacing: 0.04em; }
.site-banner a { color: #fff; text-decoration: underline; margin-left: 0.4rem; }
/* Hand-placing (John, Oct 10): pick a person, click shifts. */
.hand-panel { border: 1px solid #c9d2df; background: var(--nfco-tint-soft); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.hand-group { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin: 0.2rem 0; }
.hand-group-name { font-size: 0.75rem; font-weight: 700; color: #5b6476; min-width: 7rem; }
.hand-person { border: 1px solid #c9d2df; background: #fff; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.85rem; cursor: pointer; }
.hand-person.hand-on { background: var(--nfco-navy); color: #fff; border-color: var(--nfco-navy); }
.hand-count { font-size: 0.7rem; opacity: 0.7; margin-left: 0.2rem; }

/* The crew leave calendar (John, Oct 10): tick the days off; plain checkboxes so it works without script. */
.crew-cal-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0.3rem 0; font-size: 0.9rem; }
.crew-cal-nav a { min-height: 32px; display: inline-flex; align-items: center; font-weight: 600; }
.crew-cal-wrap { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.crew-cal { border-collapse: collapse; font-size: 0.9rem; }
.crew-cal caption { font-weight: 600; text-align: left; padding: 0.2rem 0; color: var(--nfco-navy); }
.crew-cal th { font-weight: 500; color: #5b6476; font-size: 0.75rem; padding: 0.1rem; }
.crew-cal td { width: 2.4rem; height: 2.2rem; text-align: center; padding: 0; }
.crew-cal td label { display: block; cursor: pointer; }
.crew-cal td input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crew-cal td span { display: block; line-height: 2.1rem; border-radius: 6px; border: 1px solid #d7dde6; margin: 1px; }
.crew-cal td input:checked + span { background: var(--nfco-navy); color: #fff; border-color: var(--nfco-navy); font-weight: 700; }
.crew-cal td input:focus-visible + span { outline: 2px solid var(--nfco-brass); }
.crew-cal-past { color: #b9c0cb; }
.crew-form label.crew-check { flex-direction: row; align-items: center; gap: 0.4rem; }
/* Offering a switch (CP-05; John, Oct 27): which part of a split, and starts / finishes and hours. */
.crew-form fieldset.crew-choice { border: 1px solid #cfd8dc; border-radius: 6px; padding: 0.35rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }
.crew-form .crew-inline { display: flex; gap: 0.25rem 1rem; flex-wrap: wrap; align-items: center; }
.crew-form input[type=radio] { width: auto; }
.crew-form input.crew-hours { width: 5.5em; }
.crew-leave-day { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; padding: 0.15rem 0; }
.crew-button-small { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.leave-batch td { background: var(--nfco-tint-soft); border-top: 2px solid #c9d2df; }
.leave-batch-day td:first-child { padding-left: 1.5rem; color: #5b6476; }
.vac-other { display: inline-block; margin-right: 0.6rem; }
.leave-charge { font-size: 0.8rem; color: #2e5d34; margin-top: 0.15rem; }
.leave-charge-free { color: #6b7380; }
.leave-charge-as { font-size: 0.8rem; margin-top: 0.15rem; }
.crew-charge { font-size: 0.85rem; color: #2e5d34; }
.entry-from-leave { margin: 0.25rem 0 0; padding-left: 1.2rem; }
/* Towage Report (John, Oct 10): projected gross for the schedule, highest first. */
.tw-sheet { max-width: 8in; margin: 0 auto; padding: 0.5rem; font-size: 0.9rem; }
.tw-title { font-size: 1.3rem; margin: 0 0 0.2rem; color: var(--nfco-navy); }
.tw-title.tw-small { font-size: 1.05rem; margin-top: 1rem; }
.tw-sub { color: #5b6476; font-size: 0.8rem; margin: 0 0 0.6rem; }
.tw-table { width: 100%; border-collapse: collapse; }
.tw-table th, .tw-table td { border-bottom: 1px solid #d7dde6; padding: 0.15rem 0.35rem; text-align: left; }
.tw-table th { font-size: 0.75rem; color: #5b6476; }
.tw-table .num { text-align: right; white-space: nowrap; }
.tw-table tfoot td { border-top: 2px solid #5b6476; border-bottom: none; }
.period-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.period-tools .mode-switch { margin: 0 0.6rem 0 0; }
.tw-sort a { color: inherit; text-decoration: none; }
.tw-sort a:hover { text-decoration: underline; }
.tw-sorted { color: var(--nfco-navy); }
@media print { .tw-sort a { color: inherit; } }
/* Seat editor arrows (John, Oct 10): move someone between seats on a shift. */
.seat-move { border: 1px solid #c9d2df; background: #fff; border-radius: 4px; padding: 0 0.35rem; margin-right: 0.15rem; font-size: 0.85rem; line-height: 1.4; cursor: pointer; }
.seat-move:disabled { opacity: 0.5; cursor: default; }
/* Show / Hide password (John, Oct 10): a real button beside the box, shown only when nav.js runs. */
.pw-field { display: flex; align-items: flex-end; gap: 0.4rem; }
.pw-field { margin-bottom: 0.7rem; }
.account-card .pw-field label { flex: 1; margin-bottom: 0; }
.pw-toggle { display: none; min-height: 2.5rem; padding: 0 0.8rem; border: 1px solid #9aa5b4; border-radius: 6px; background: #fff; color: var(--nfco-navy); font-weight: 600; cursor: pointer; }
.js .pw-toggle { display: inline-block; }
.pw-toggle:focus-visible { outline: 2px solid var(--nfco-brass); outline-offset: 2px; }
.pw-toggle[aria-pressed="true"] { background: var(--nfco-tint-soft); }
.users-name { width: 12rem; padding: 0.2rem 0.35rem; border: 1px solid #c9d2df; border-radius: 4px; }
/* Schedule vs payroll (John, Oct 11). */
.sched-check-lines { margin: 0.15rem 0 0.3rem 1.2rem; padding: 0; font-size: 0.85rem; }
.sched-check-hours { color: #5b6476; }
/* Help popup (John, Oct 11). */
.appbar-help { background: none; border: none; cursor: pointer; }
.nav-drawer-help { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-align: left; }
.help-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 1px solid #c9d2df; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.help-dialog::backdrop { background: rgba(10, 25, 47, 0.45); }
.help-head { position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--nfco-navy); color: #fff; }
.help-head h2 { margin: 0; font-size: 1.15rem; }
.help-close { border: none; background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.help-close:focus-visible { outline: 2px solid var(--nfco-brass); outline-offset: 2px; }
.help-body { padding: 0.5rem 1.25rem 1.25rem; font-size: 0.92rem; line-height: 1.45; }
.help-body h3 { font-size: 1rem; color: var(--nfco-navy); margin: 1rem 0 0.35rem; }
.help-body li { margin: 0.2rem 0; }
/* Daycheck changes after the final (John, Oct 11): red office, blue crew switch. */
.dc-red { color: #D32F2F; font-weight: 700; }
.dc-blue { color: #1565C0; font-weight: 700; }
/* A shift cancelled after the final (RULE-09; John, Oct 11). */
.sp-cancelled { color: #D32F2F; font-weight: 700; letter-spacing: 0.03em; }
/* Crew home (John, Oct 11): big buttons, two per row on a phone; Previous / Next / All schedules. */
.crew-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.75rem 0 1rem; }
.crew-tile { display: flex; flex-direction: column; justify-content: center; min-height: 5.2rem; padding: 0.7rem 0.8rem; border-radius: 8px;
    background: var(--nfco-navy); color: #fff; font-size: 1.1rem; font-weight: 600; text-decoration: none; line-height: 1.25; }
.crew-tile small { font-size: 0.8rem; font-weight: 400; opacity: 0.85; margin-top: 0.2rem; }
.crew-tile[aria-disabled="true"] { background: #c9ced6; color: #555; cursor: default; }
.crew-pager { display: flex; gap: 0.5rem; justify-content: space-between; margin: 0.5rem 0; flex-wrap: wrap; }
.crew-pager .crew-button { text-decoration: none; flex: 1 1 0; text-align: center; white-space: nowrap; }
.crew-button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.crew-period a.crew-button { text-decoration: none; padding: 0.35rem 0.75rem; }
.crew-schedules { list-style: none; padding: 0; margin: 0.5rem 0; }
.crew-schedules li { padding: 0.6rem 0; border-bottom: 1px solid #e3e6ea; }
.crew-schedules-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.crew-schedules-actions .crew-button { text-decoration: none; }
.crew-schedules .crew-badge { margin-left: 0.4rem; }
.page-actions + .crew-pager { margin: 0.5rem 1rem; }
/* Help topics, contents and search (John, Oct 11). */
.help-dialog { width: min(64rem, calc(100vw - 2rem)); }
.help-search { flex: 1; min-width: 10rem; padding: 0.35rem 0.6rem; border-radius: 6px; border: none; font-size: 0.95rem; }
.help-main { display: grid; grid-template-columns: 15rem 1fr; max-height: calc(100vh - 7rem); }
.help-contents { overflow-y: auto; border-right: 1px solid #e3e6ea; padding: 0.5rem 0; background: #f5f7fa; }
.help-module { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #607080; padding: 0.6rem 0.9rem 0.2rem; }
.help-contents button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 0.3rem 0.9rem; font: inherit; font-size: 0.9rem; cursor: pointer; color: #1d2b3a; }
.help-contents button:hover { background: #e7ecf2; }
.help-contents button[aria-current="true"] { background: var(--nfco-navy); color: #fff; }
.help-select { display: none; }
.help-main .help-body { overflow-y: auto; }
.help-topic-title { font-size: 1.1rem !important; margin-top: 0.6rem !important; }
.help-topic-module { font-size: 0.75rem; font-weight: 400; color: #607080; margin-left: 0.4rem; }
.help-foot { margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid #e3e6ea; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
.help-go { font-weight: 700; }
.help-link { border: none; background: none; color: #1565C0; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.help-tip { color: #607080; }
.help-count, .help-none { color: #607080; margin: 0.6rem 0; }
.help-hit { display: block; width: 100%; text-align: left; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; padding: 0.5rem 0.7rem; margin: 0.35rem 0; font: inherit; cursor: pointer; }
.help-hit:hover { border-color: var(--nfco-navy); }
.help-snippet { display: block; color: #455; font-size: 0.85rem; margin-top: 0.15rem; }
@media (max-width: 700px) {
    .help-main { grid-template-columns: 1fr; }
    .help-contents { display: none; }
    .help-select { display: block; margin: 0.5rem 1rem 0; padding: 0.4rem; font-size: 1rem; }
}
/* Drill schedule (John, Oct 11): the memo's calendars, each drill date circled in its time's colour. */
.drill-sheet { max-width: 46rem; }
.drill-title { font-size: 1.2rem; color: var(--nfco-navy); margin: 0.5rem 0; }
.drill-intro { line-height: 1.45; }
.drill-months { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0; }
.drill-month { border: 1px solid #1f3fbf; background: #f0f0f0; border-collapse: collapse; min-width: 13rem; flex: 1 1 13rem; }
.drill-month caption { caption-side: top; background: #dcdcdc; color: #4a5fc1; font-size: 1.15rem; padding: 0.15rem; border: 1px solid #1f3fbf; border-bottom: none; }
.drill-month th { font-weight: 400; font-size: 0.85rem; padding: 0.15rem; }
.drill-month td { text-align: center; padding: 0.1rem; font-size: 0.95rem; height: 1.9rem; }
.drill-month td > span, .drill-pick { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; }
.drill-pick { border: 1px dashed transparent; background: none; font: inherit; cursor: pointer; padding: 0; }
.drill-pick:hover { border-color: #888; }
.drill-day { border: 3px solid currentColor; font-weight: 700; }
.drill-month .drill-red, .drill-ring.drill-red { border-color: #e01b1b; }
.drill-month .drill-blue, .drill-ring.drill-blue { border-color: #18a7e0; }
.drill-month .drill-green, .drill-ring.drill-green { border-color: #2e9e3e; }
.drill-month .drill-orange, .drill-ring.drill-orange { border-color: #f08a00; }
.drill-month .drill-purple, .drill-ring.drill-purple { border-color: #8e3fc9; }
.drill-day.drill-red, .drill-day.drill-blue, .drill-day.drill-green, .drill-day.drill-orange, .drill-day.drill-purple { border-style: solid; }
.drill-also-red { box-shadow: 0 0 0 2px #e01b1b; } .drill-also-blue { box-shadow: 0 0 0 2px #18a7e0; }
.drill-also-green { box-shadow: 0 0 0 2px #2e9e3e; } .drill-also-orange { box-shadow: 0 0 0 2px #f08a00; } .drill-also-purple { box-shadow: 0 0 0 2px #8e3fc9; }
.drill-ring { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid; vertical-align: middle; margin-right: 0.3rem; }
.drill-key { list-style: none; padding: 0; margin: 0.75rem 0; }
.drill-key li { margin: 0.5rem 0; }
.drill-none { color: #607080; }
.drill-choice { display: inline-flex; align-items: center; gap: 0.2rem; margin-right: 0.6rem; }
.drill-list { margin: 0.5rem 0 0; padding-left: 1rem; list-style: none; }
.emp-action label.drill-choice { flex-direction: row; align-items: center; }
.page-actions ~ .drill-sheet { margin: 0 1.5rem; }
/* Crew phone list (John, Oct 11): the printed layout, scrolling sideways on a phone; numbers tap to call. */
.crew-page.crew-wide { max-width: none; }
.crew-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-tel { color: inherit; text-decoration: none; }
@media (hover: none) { .pl-tel { text-decoration: underline; } }
/* On a phone the name stays put while the numbers scroll sideways. */
@media (max-width: 700px) {
    .crew-scroll .phonelist td:first-child, .crew-scroll .phonelist th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 #333; }
    .crew-scroll .phonelist tr.pl-section td:first-child { background: inherit; }
}
/* Traffic columns narrower (John, Oct 12): fit the names, the times wrap under the heading. "AM Traffic" itself stays on
   one line, so the heading doesn't grow and push the sheet onto a second page (John, Oct 13). */
.vt-table th.vt-traffic { width: 0.85in; white-space: nowrap; padding: 0 0.15rem; }
.vt-table th.vt-traffic .vt-times { white-space: normal; }
.vt-table td.vt-traffic { min-width: 0; width: 0.85in; }
.vt-table th.vt-traffic .vt-times { font-size: 8pt; }

/* Print text a little larger (John, Oct 12), and still one page: the schedule's three lines a cell (times, names,
   third seat) at a tighter line height, so a day stays 0.5in. Without it the rows grew past the page and the browser
   shrank the whole sheet to fit, which is what printed small. The daycheck one step larger. */
@media print {
    .sp-table { font-size: 10pt; }
    .sp-times { font-size: 9.5pt; }
    .sp-names, .sp-third { font-size: 11pt; }
    .sp-table .sp-line, .sp-table td.sp-day > *, .sp-table td.sp-day { line-height: 1.05; }
    .sp-table td.sp-cell { padding-top: 0; padding-bottom: 0; }
    .dc-table { font-size: 10.5pt; }
}

/* Correcting a partial switch (SeatEditor; John, Oct 12): the radios beside their words, the person list a sensible width. */
.partial-edit .emp-action label:has(input[type=radio]), .partial-edit .emp-action label:has(input[type=number]) { flex-direction: row; align-items: center; gap: 0.3rem; }
.partial-edit select.partial-who { max-width: 22rem; }
.partial-row { margin-top: 0.3rem; align-items: center; }
/* The phone clock (Crew/TimeClock.razor; ENG-02): what's running on top, big buttons below, a cost center opens its jobs. */
.tc-default { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tc-running { border: 2px solid #1E6B3A; border-radius: 8px; padding: 0.75rem; background: #E8F5E9; margin-bottom: 0.5rem; }
.tc-running.tc-break { border-color: #B26A00; background: #FFF8E1; }
.tc-on { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #1E6B3A; font-weight: 700; }
.tc-what { font-size: 1.25rem; font-weight: 700; margin: 0.15rem 0; }
.tc-since { color: #333; }
.tc-stop { display: block; width: 100%; margin-top: 0.6rem; padding: 0.8rem; font-size: 1.15rem; background: #C62828; }
.tc-resume { display: block; width: 100%; margin-top: 0.6rem; padding: 0.8rem; font-size: 1.15rem; background: #1E6B3A; }
.tc-resume[hidden] { display: none; }
.tc-stopat { margin-top: 0.5rem; }
.tc-stopat summary { cursor: pointer; color: var(--nfco-navy); padding: 0.3rem 0; }
.tc-stopat label { display: flex; gap: 0.5rem; align-items: center; margin: 0.3rem 0; }
.tc-stopat input { font-size: 1rem; padding: 0.35rem; }
.tc-off { padding: 0.75rem; background: var(--nfco-tint-soft); border-radius: 8px; }
.tc-recent, .tc-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.tc-job { display: flex; flex-direction: column; justify-content: center; min-height: 3.4rem; padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--nfco-navy);
    background: #fff; color: var(--nfco-navy); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.tc-job small { font-weight: 400; font-size: 0.85rem; color: #333; }
.tc-centers { display: flex; flex-direction: column; gap: 0.45rem; }
.tc-center summary { list-style: none; cursor: pointer; padding: 0.8rem 0.9rem; border-radius: 8px; background: var(--nfco-navy); color: #fff; font-size: 1.1rem; font-weight: 600; }
.tc-center summary::-webkit-details-marker { display: none; }
.tc-center[open] summary { border-radius: 8px 8px 0 0; }
.tc-center[open] .tc-jobs { border: 1px solid var(--nfco-navy); border-top: none; border-radius: 0 0 8px 8px; padding: 0.6rem; }
.tc-other { grid-column: 1 / -1; display: flex; gap: 0.4rem; }
.tc-other input { flex: 1; font-size: 1rem; padding: 0.5rem; border: 1px solid #90a4ae; border-radius: 6px; min-width: 0; }
.tc-queue { background: #FFF3CD; color: #6B4E00; }
.tc-queue.crew-msg-err { background: #FDECEA; color: #8A1C1C; }
.tc-offline { background: #E3EAF3; color: var(--nfco-navy); font-weight: 600; }
.tc-today li span { min-width: 8.5rem; }
/* Time review (Crew/TimeDay.razor, TimeWeek.razor; ENG-02, ENG-07). */
.tk-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.tk-entry { display: flex; flex-direction: column; gap: 0.4rem; }
.tk-entry label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; }
.tk-entry label.crew-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.tk-entry input[type=text], .tk-entry input[type=time], .tk-entry select { font-size: 1rem; padding: 0.4rem; border: 1px solid #90a4ae; border-radius: 6px; min-width: 0; }
.tk-what { font-weight: 700; }
.tk-times { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tk-more summary { cursor: pointer; color: var(--nfco-navy); padding: 0.3rem 0; }
.tk-more { display: flex; flex-direction: column; gap: 0.4rem; }
.tk-more .crew-button { margin: 0.25rem 0.4rem 0 0; }
.tk-flag { background: #FFF3CD; color: #6B4E00; }
.tk-open { background: var(--nfco-tint-soft); }
.tk-total { margin: 0.25rem 0 0.75rem; }
.tk-flagcount { color: #8A1C1C; margin-left: auto; margin-right: 0.75rem; }
.crew-figures li.tk-weektotal { font-weight: 700; border-top: 2px solid var(--nfco-navy); }
/* Approving time (Pages/EngineersTime.razor, Crew/TimeApprove.razor; ENG-07). */
.tk-selected td { background: var(--nfco-tint-soft); }
.tk-staff-cols { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.tk-staff-flags { margin: 0.5rem 0; padding-left: 1.2rem; color: #8A1C1C; }
.tk-staff-flags li.tk-gap { color: #777; }
.tk-staff-entries input[type=time] { width: 7.5rem; }
.tk-staff-entries input[type=text] { width: 100%; min-width: 8rem; }
.tk-reason { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0 0.6rem; max-width: 36rem; }
.tk-reason input { padding: 0.35rem; }
.tk-approve details { margin: 0.4rem 0; }
.tk-approve summary { cursor: pointer; color: var(--nfco-navy); }
.tk-sendback { width: 100%; font-size: 1rem; padding: 0.45rem; margin: 0.5rem 0 0.3rem; border: 1px solid #90a4ae; border-radius: 6px; box-sizing: border-box; }
/* Inventory (Phase 4 step 2a): the item list and item page. */
.inv-filters input[type=search] { min-width: 18rem; padding: 0.4rem 0.55rem; border: 1px solid #90a4ae; border-radius: 4px; font-size: 0.95rem; }
.emp-action label.inv-choice, .emp-grid label.inv-choice { flex-direction: row; align-items: center; gap: 0.3rem; }
.inv-table td { vertical-align: top; }
.inv-table tr.inv-low td { background: #FDECEA; }
.inv-note { color: #6B4E00; font-size: 0.85rem; max-width: 18rem; }
.emp-grid label.inv-wide { grid-column: span 2; }
.inv-notes { max-height: 22rem; overflow-y: auto; font-size: 0.9rem; }
.inv-merge-search { min-width: 18rem; padding: 0.4rem 0.55rem; border: 1px solid #90a4ae; border-radius: 4px; }
/* Purchasing (Phase 4 step 2b): the To-order list and the orders board. */
.inv-table tr.inv-for-mgmt td { background: #FFF8E1; }
.inv-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: start; }
.inv-col h3 { margin: 0 0 0.5rem; }
.inv-card { display: block; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; border: 1px solid #cfd8dc; border-radius: 6px; background: #fff; color: inherit; text-decoration: none; }
.inv-card:hover { border-color: var(--nfco-navy); }
.inv-card.inv-overdue { border: 2px solid #C62828; background: #FDECEA; }
.inv-late { color: #C62828; font-weight: 700; }
.inv-receive { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
/* Inventory on the phone (Crew/MyParts, MyPart, MyOrders, MyOrder; INV-09). */
.inv-phone-search { flex-direction: row; }
.inv-phone-search input { flex: 1; min-width: 0; font-size: 1rem; padding: 0.5rem; border: 1px solid #90a4ae; border-radius: 6px; }
.inv-phone-item { display: flex; flex-direction: column; gap: 0.15rem; color: inherit; text-decoration: none; }
.inv-phone-item small { color: #555; }
.crew-day.inv-phone-low { border-left: 4px solid #C62828; }
.inv-phone-line { border-top: 1px solid #e3e8ef; padding: 0.4rem 0; }
.inv-phone-qty { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.inv-phone-qty input { width: 6rem; font-size: 1rem; padding: 0.35rem; }
/* Parts on jobs (Crew/MyJobParts, the clock's running card, Fix today's times; ENG-11). */
.tc-parts { display: block; margin-top: 0.5rem; font-weight: 600; color: var(--nfco-navy); }
.tk-parts { font-weight: 400; font-size: 0.9rem; margin-left: 0.4rem; }
.jp-back summary { cursor: pointer; color: var(--nfco-navy); padding: 0.3rem 0; }
/* Job cost (Pages/JobCostPage.razor; ENG-09 … ENG-11). */
.jc-period { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.jc-period input[type=date] { padding: 0.3rem; margin-left: 0.3rem; }
.jc-totals { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0.75rem 1rem; border: 1px solid #d0d5dd; border-radius: 6px; background: var(--nfco-tint-soft); margin-bottom: 0.5rem; }
.jc-totals span { display: block; font-size: 0.8rem; color: #4a5263; text-transform: uppercase; letter-spacing: 0.05em; }
.jc-totals strong { font-size: 1.25rem; }
.jc-totals .jc-grand strong { color: var(--nfco-navy); }
.jc-notes { margin: 0.25rem 0 1rem; padding-left: 1.2rem; color: #4a5263; font-size: 0.9rem; }
.jc-notes .jc-warn { color: #8A1C1C; }
.jc-table td.num, .jc-table th.num { text-align: right; }
.jc-table tr.jc-center { cursor: pointer; font-weight: 600; }
.jc-table tr.jc-center:hover td { background: var(--nfco-tint-soft); }
.jc-table tr.jc-job td:first-child { padding-left: 2rem; }
.jc-table tr.jc-return td { color: #1E6B3A; }
.jc-caret { display: inline-block; width: 1rem; color: var(--nfco-navy); }
.link-button { background: none; border: none; padding: 0; color: var(--nfco-navy); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---- Documentation library (DOC-04): Contents beside the page like Help, search, a document's page. Shared by staff
   (library) and the phone (me/library). */
.lib-search { display: flex; gap: 0.5rem; margin: 0 0 0.75rem; }
.lib-search input { flex: 1; min-width: 0; font-size: 1rem; padding: 0.5rem 0.6rem; border: 1px solid #90a4ae; border-radius: 6px; }
.lib-count { color: #5b6476; font-size: 0.9rem; margin: 0 0 0.5rem; }
.lib-main { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lib-contents { position: sticky; top: 0.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding: 0.4rem 0; border: 1px solid #e3e6ea; border-radius: 6px; background: #f5f7fa; }
.lib-contents a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.28rem 0.6rem; font-size: 0.88rem; color: #1d2b3a; text-decoration: none; }
.lib-contents a:hover { background: #e7ecf2; }
.lib-contents a.lib-open { font-weight: 600; }
.lib-contents a.lib-current { background: var(--nfco-navy); color: #fff; }
.lib-contents small, .lib-folders small { color: #7a8494; font-weight: 400; }
.lib-contents a.lib-current small { color: #d7dfea; }
.lib-crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; font-size: 0.9rem; margin: 0 0 0.5rem; }
.lib-crumbs span { color: #90a4ae; }
.lib-folders { list-style: none; padding: 0; margin: 0 0 0.75rem; display: none; }
.lib-folders li a { display: flex; justify-content: space-between; padding: 0.55rem 0.4rem; border-bottom: 1px solid #e3e8ef; color: var(--nfco-navy); font-weight: 600; text-decoration: none; }
.lib-folders li a::before { content: "\1F4C1"; margin-right: 0.45rem; font-weight: 400; }
.lib-folders li a small { margin-left: auto; padding-left: 0.5rem; }
.lib-docs { list-style: none; padding: 0; margin: 0 0 1rem; }
.lib-doc { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.2rem; border-bottom: 1px solid #e3e8ef; }
.lib-doc-body { flex: 1; min-width: 0; }
.lib-tidy input[type=checkbox] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; }
.lib-tidy-bar { flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.lib-rename input[type=text] { min-width: 18rem; max-width: 100%; }
.lib-title { font-weight: 600; color: var(--nfco-navy); overflow-wrap: anywhere; }
.lib-meta { color: #5b6476; font-size: 0.82rem; margin-top: 0.1rem; overflow-wrap: anywhere; }
.lib-kind { flex: none; display: inline-block; min-width: 2.9rem; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-align: center; text-transform: uppercase; background: #e6ecf4; color: var(--nfco-navy); }
.lib-kind-pdf { background: #fbe4e1; color: #9b2c1f; }
.lib-kind-cad { background: #e3f1e6; color: #22603a; }
.lib-kind-image { background: #fdf1d6; color: #7a5a00; }
.lib-doc .lib-open { flex: none; text-decoration: none; }
.lib-missing, .lib-flag { flex: none; font-size: 0.75rem; color: #8a5a00; background: #fff4d6; border-radius: 4px; padding: 0.1rem 0.35rem; }
.lib-flag { margin-left: 0.35rem; }
.lib-snippet { font-size: 0.85rem; color: #333; margin-top: 0.25rem; overflow-wrap: anywhere; }
.lib-snippet strong { background: #fff1b8; font-weight: 600; }
.lib-sections { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.lib-sections a { font-size: 0.8rem; padding: 0.15rem 0.5rem; border: 1px solid #c9d2df; border-radius: 999px; text-decoration: none; color: var(--nfco-navy); background: #fff; }
.lib-sections a small { color: #7a8494; }
.lib-doc-title { font-size: 1.45rem; color: var(--nfco-navy); margin: 0.2rem 0 0.3rem; overflow-wrap: anywhere; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.lib-actions a { text-decoration: none; }
.lib-notice { padding: 0.5rem 0.75rem; border-left: 4px solid var(--nfco-brass); background: #fdf8e8; border-radius: 4px; }
.lib-h2 { font-size: 1.05rem; color: var(--nfco-navy); margin: 1.25rem 0 0.4rem; }
.lib-toc { list-style: none; padding: 0; margin: 0; columns: 2 22rem; column-gap: 2rem; }
.lib-toc li { break-inside: avoid; padding: 0.2rem 0; font-size: 0.9rem; }
.lib-toc small, .lib-paths { color: #7a8494; }
.lib-paths { font-size: 0.82rem; padding-left: 1.1rem; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .lib-main { grid-template-columns: minmax(0, 1fr); }
    .lib-contents { display: none; }
    .lib-folders { display: block; }
}
.lib-phone .lib-snippet { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-suggested { color: #5b6476; background: #eef1f5; }
.lib-related li { margin: 0.15rem 0; }
.lib-systems { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.4rem 0; }
.lib-addlink select, .lib-addlink input { max-width: 22rem; }
.lib-group > summary { cursor: pointer; }
.lib-group > summary small { color: #7a8494; font-weight: 400; margin-left: 0.3rem; }
/* Repair photos (DOC-06): a grid of thumbnails, the full photo a tap away. */
.photo-grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.photo-grid li { border: 1px solid #e3e8ef; border-radius: 6px; padding: 0.4rem; background: #fff; break-inside: avoid; }
.photo-grid img { display: block; width: 100%; height: 9rem; object-fit: cover; border-radius: 4px; background: #eef1f5; }
.photo-caption { font-size: 0.88rem; margin-top: 0.3rem; overflow-wrap: anywhere; }
.photo-edit { display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.photo-edit input { flex: 1; min-width: 0; }
.photo-preview { max-width: 100%; max-height: 14rem; border-radius: 6px; }
@media print { .photo-grid { grid-template-columns: repeat(3, 1fr); } .photo-grid img { height: 2.2in; } }
.tk-centers { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0.4rem 0; }

/* ---- Maintenance board (MNT-01 … 05; John, Oct 19): lists side by side, scrolling sideways on a phone ---- */
.mb-page { padding: 1rem 1.25rem; }
.mb-page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.mb-page-head h1 { font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--nfco-navy); }
.crew-page.mb-crew { max-width: none; }
.mb-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.mb-addlist, .mb-rename { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.mb-addlist input, .mb-rename input { padding: 0.4rem 0.5rem; border: 1px solid #b8c2d0; border-radius: 4px; min-height: 36px; }
.mb-link { font-weight: 600; }
.mb-button { background: var(--nfco-navy); color: #fff; border: 0; border-radius: 4px; padding: 0.45rem 0.9rem; min-height: 36px; cursor: pointer; font: inherit; }
.mb-button:disabled { opacity: 0.5; cursor: default; }
.mb-button.mb-plain { background: transparent; color: var(--nfco-navy); border: 1px solid #b8c2d0; }
.mb-button.mb-done { background: #2e7d32; }
.mb-button.mb-danger { background: #c62828; }
.mb-button.mb-small { padding: 0.2rem 0.6rem; min-height: 30px; font-size: 0.85rem; }
.mb-icon { background: none; border: 0; cursor: pointer; color: #5b6476; font-size: 1rem; min-width: 32px; min-height: 32px; }
.mb-icon:disabled { opacity: 0.3; cursor: default; }
.mb-msg { padding: 0.5rem 0.75rem; border-radius: 4px; margin-bottom: 0.75rem; }
.mb-msg-ok { background: #e8f5e9; color: #1b5e20; }
.mb-msg-err { background: #fdecea; color: #b71c1c; }
.mb-empty { color: #5b6476; padding: 0.5rem; }
.mb-lists { display: flex; gap: 0.75rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.mb-list { flex: 0 0 17rem; max-width: 85vw; background: var(--nfco-tint); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; max-height: calc(100vh - 12rem); }
.mb-list-head { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.15rem 0.4rem; }
.mb-list-handle { cursor: grab; color: #8a94a6; padding: 0 0.25rem; user-select: none; touch-action: none; }
.mb-list-name { font-size: 1rem; margin: 0; flex: 1; color: var(--nfco-navy); }
.mb-list-name small { color: #5b6476; font-weight: 400; margin-left: 0.25rem; }
.mb-cards { display: flex; flex-direction: column; gap: 0.45rem; min-height: 2.5rem; overflow-y: auto; padding: 0.1rem; }
.mb-card { display: block; background: #fff; border-radius: 6px; padding: 0.5rem 0.6rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.15); border-left: 4px solid #b8c2d0; cursor: pointer; color: inherit; text-decoration: none; }
.mb-card:focus-visible { outline: 2px solid var(--nfco-navy); }
.mb-card-ghost { opacity: 0.4; }
.mb-p-low { border-left-color: #b8c2d0; }
.mb-p-normal { border-left-color: #4a78a8; }
.mb-p-high { border-left-color: #ef8f00; }
.mb-p-urgent { border-left-color: #c62828; }
.mb-card-title { font-weight: 600; line-height: 1.25; }
.mb-card-meta { font-size: 0.82rem; color: #5b6476; margin-top: 0.2rem; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.mb-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.35rem; gap: 0.35rem; }
.mb-chip { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #e0e6ee; color: #263238; }
.mb-chip-high { background: #fff1d6; color: #8a4b00; }
.mb-chip-urgent { background: #fdecea; color: #b71c1c; font-weight: 600; }
.mb-due { font-size: 0.78rem; color: #5b6476; }
.mb-due-overdue { color: #b71c1c; font-weight: 600; }
.mb-due-today { color: #8a4b00; font-weight: 600; }
.mb-people { display: flex; gap: 0.2rem; }
.mb-person { font-size: 0.7rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nfco-navy-2); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.mb-addtask { background: none; border: 0; text-align: left; color: #3b4a5e; padding: 0.45rem 0.25rem; cursor: pointer; font: inherit; min-height: 36px; }
.mb-addtask:hover { color: var(--nfco-navy); text-decoration: underline; }
/* List colours and tags (MNT-09; John, Oct 27): one fixed palette, a pale shade behind a list and a solid one for a
   tag; every solid shade keeps white text at 4.5:1 or better (Yellow uses dark text). */
.mb-c-grey { background: #eceff1; } .mb-c-blue { background: #e3f2fd; } .mb-c-green { background: #e8f5e9; }
.mb-c-yellow { background: #fff8e1; } .mb-c-orange { background: #fff3e0; } .mb-c-red { background: #ffebee; }
.mb-c-purple { background: #f3e5f5; } .mb-c-teal { background: #e0f2f1; } .mb-c-pink { background: #fce4ec; } .mb-c-brown { background: #efebe9; }
.mb-tag { font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 4px; color: #fff; background: #546e7a; white-space: nowrap; text-decoration: none; display: inline-block; }
.mb-tag-grey { background: #546e7a; } .mb-tag-blue { background: #1565c0; } .mb-tag-green { background: #2e7d32; }
.mb-tag-yellow { background: #f9a825; color: #3e2723; } .mb-tag-orange { background: #bf360c; } .mb-tag-red { background: #c62828; }
.mb-tag-purple { background: #6a1b9a; } .mb-tag-teal { background: #00796b; } .mb-tag-pink { background: #ad1457; } .mb-tag-brown { background: #6d4c41; }
.mb-card-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.3rem; }
.mb-filter { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; font-size: 0.85rem; color: #3b4a5e; }
.mb-filter .mb-tag { font-size: 0.85rem; padding: 0.25rem 0.6rem; min-height: 32px; display: inline-flex; align-items: center; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.mb-filter .mb-tag-off { opacity: 0.45; }
.mb-filter .mb-tag-on { border-color: var(--nfco-navy); box-shadow: 0 0 0 2px #fff inset; }
.mb-swatches { display: flex; gap: 0.3rem; flex-wrap: wrap; padding: 0.3rem 0.15rem 0.5rem; }
.mb-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #b8c2d0; cursor: pointer; padding: 0; }
.mb-swatch-on { box-shadow: 0 0 0 2px var(--nfco-navy); }
.mb-swatch-none { background: #fff; position: relative; }
.mb-swatch-none::after { content: ""; position: absolute; inset: 12px 2px; background: #c62828; transform: rotate(45deg); }
.mb-tagpick { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.mb-tagpick .mb-tag { font-size: 0.85rem; padding: 0.25rem 0.6rem; min-height: 32px; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.mb-tagpick .mb-tag-off { opacity: 0.4; }
.mb-tagpick .mb-tag-on { border-color: var(--nfco-navy); }
.mb-tags-panel { background: #fff; border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; box-shadow: 0 1px 3px rgba(11, 42, 74, 0.18); display: flex; flex-direction: column; gap: 0.5rem; max-width: 34rem; }
.mb-tag-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.mb-tag-row input[type=text], .mb-tag-row select { font: inherit; padding: 0.3rem 0.45rem; border: 1px solid #b8c2d0; border-radius: 4px; min-height: 32px; }
.mb-readonly .mb-card { cursor: default; }
.mb-readonly a.mb-card { cursor: pointer; }
.mb-overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, 0.35); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 0.75rem; overflow-y: auto; z-index: 1400; }
.mb-editor { background: #fff; border-radius: 8px; padding: 1rem 1.1rem; width: 100%; max-width: 38rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 0.6rem; }
.mb-editor h2 { margin: 0; font-size: 1.25rem; color: var(--nfco-navy); }
.mb-editor label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: #3b4a5e; }
.mb-editor input[type=text], .mb-editor input[type=date], .mb-editor select, .mb-editor textarea { font: inherit; padding: 0.4rem 0.5rem; border: 1px solid #b8c2d0; border-radius: 4px; min-height: 36px; }
.mb-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mb-row label { flex: 1 1 9rem; }
.mb-assignees { border: 1px solid #d5dce6; border-radius: 6px; padding: 0.4rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.mb-assignees legend { font-size: 0.85rem; color: #3b4a5e; }
.mb-editor label.mb-check { flex-direction: row; align-items: center; gap: 0.35rem; font-size: 0.95rem; color: inherit; min-height: 32px; }
.mb-editor-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.25rem; }
.mb-spacer { flex: 1; }
.mb-small-note { font-size: 0.8rem; color: #5b6476; }
.mb-done-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mb-done-list li { background: #fff; border-radius: 6px; padding: 0.5rem 0.7rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); }

/* My tasks and a task's page (MNT-06, MNT-07) */
.mb-tasklist { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.mb-task-title { margin-bottom: 0.35rem; }
.mb-task-facts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; color: #3b4a5e; }
.mb-description { white-space: pre-wrap; background: #fff; border-radius: 6px; padding: 0.6rem 0.75rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); }
.mb-task-actions { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.mb-task-actions .crew-button { width: 100%; }

/* Checklist, comments, photos and documents on a task (MNT-04 step 3; John, Oct 20) */
.mb-card-counts { display: flex; gap: 0.6rem; font-size: 0.78rem; color: #5b6476; margin-top: 0.3rem; }
.mb-count-done { color: #2e7d32; font-weight: 600; }
/* The task's page from a card (MNT-10; John, Oct 30): blue like Save, so it stands out. */
.mb-card-open { font-size: 0.9rem; font-weight: 600; margin-left: auto; padding: 0.35rem 0.8rem; border-radius: 4px; background: var(--nfco-navy); color: #fff; text-decoration: none; }
.mb-card-open:hover, .mb-card-open:focus-visible { background: #16416e; color: #fff; }
.mb-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.mb-editor-head a.mb-button { text-decoration: none; }
.mb-steps { border: 1px solid #d5dce6; border-radius: 6px; padding: 0.4rem 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.mb-steps legend { font-size: 0.85rem; color: #3b4a5e; }
.mb-step { display: flex; align-items: center; gap: 0.3rem; }
.mb-step input { flex: 1; min-width: 0; }
.mb-step-done { width: 1.2rem; text-align: center; color: #2e7d32; font-weight: 700; }
/* The parts list, photos and documents in the task editor (MNT-10, MNT-11; John, Nov 3) */
.mb-part { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; border-bottom: 1px solid #eef1f5; padding-bottom: 0.3rem; }
.mb-part-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.mb-part-name small, .mb-found small { color: #5b6476; margin-left: 0.3rem; }
.mb-part-qty { width: 5rem; }
.mb-part-note { flex: 1 1 8rem; min-width: 0; }
.mb-part-find { display: flex; gap: 0.4rem; align-items: center; }
.mb-part-find input { flex: 1; min-width: 0; }
.mb-found { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mb-found li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.6rem; }
.mb-found li > span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.mb-photos { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); margin-bottom: 0.3rem; }
.mb-photos img { height: 7rem; }
.tw-page { max-width: 52rem; }
.tw-section { margin-top: 1rem; }
.tw-section .crew-sub small { font-weight: 400; color: #5b6476; font-size: 0.85rem; margin-left: 0.4rem; }
.tw-checklist, .tw-comments, .tw-docs { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tw-checklist li { display: flex; align-items: center; gap: 0.5rem; background: #fff; border-radius: 6px; padding: 0.3rem 0.5rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); }
.tw-checklist li.tw-done .tw-text { color: #5b6476; text-decoration: line-through; }
.tw-checklist .tw-text { flex: 1; overflow-wrap: anywhere; }
.tw-checklist .tw-text small { display: block; text-decoration: none; font-size: 0.78rem; }
.tw-tick { margin: 0; }
.tw-box { width: 2.1rem; height: 2.1rem; border: 2px solid #90a4ae; border-radius: 6px; background: #fff; color: #2e7d32; font-size: 1.2rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.tw-done .tw-box { border-color: #2e7d32; background: #e8f5e9; }
.tw-comments li, .tw-docs li { background: #fff; border-radius: 6px; padding: 0.45rem 0.65rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); }
.tw-comment-head { font-size: 0.85rem; color: #3b4a5e; }
.tw-comment-body { white-space: pre-wrap; margin: 0.25rem 0; overflow-wrap: anywhere; }
.tw-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.tw-docs li a { overflow-wrap: anywhere; }
.tw-docs small { color: #5b6476; }
.tw-inline { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.3rem 0; }
.tw-inline input[type=text], .tw-inline input[type=search] { flex: 1 1 12rem; min-width: 0; font-size: 1rem; padding: 0.45rem; border: 1px solid #90a4ae; border-radius: 6px; }
.tw-inline form { margin: 0; }
.crew-form textarea { font: inherit; font-size: 1rem; padding: 0.45rem; border: 1px solid #90a4ae; border-radius: 6px; }

/* Installed on the home screen (John, Oct 19): a Back button, since there's no browser one */
.appbar-back { display: none; background: none; border: 0; color: #fff; font-size: 1.9rem; line-height: 1; padding: 0 0.5rem 0.15rem 0; cursor: pointer; min-width: 36px; min-height: 40px; }
@media (display-mode: standalone) { .appbar-back { display: inline-flex; align-items: center; } }
html.standalone .appbar-back { display: inline-flex; align-items: center; }

/* Inventory counts (INV-10 … 12; John, Oct 20): the count's page, counting a bin, the printed sheets */
.cnt-page { padding: 1rem 1.25rem; max-width: 70rem; }
.cnt-page.cnt-narrow { max-width: 40rem; }
.cnt-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cnt-head h1 { font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--nfco-navy); }
.cnt-inline { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.3rem 0; }
.cnt-inline form { margin: 0; }
.cnt-inline input[type=search], .cnt-inline input[type=text] { flex: 1 1 12rem; min-width: 0; font-size: 1rem; padding: 0.45rem; border: 1px solid #90a4ae; border-radius: 6px; }
.cnt-list, .cnt-found, .cnt-lines, .cnt-bins { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cnt-list li, .cnt-found li { background: #fff; border-radius: 6px; padding: 0.5rem 0.7rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: center; }
.cnt-list small, .cnt-found small { color: #5b6476; }
.cnt-list-open { border-left: 4px solid var(--nfco-navy); }
.cnt-areas { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; padding-left: 1.5rem; }
.cnt-lines li { display: flex; align-items: center; gap: 0.6rem; background: #fff; border-radius: 6px; padding: 0.45rem 0.6rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); border-left: 4px solid #b8c2d0; }
.cnt-lines li.cnt-ok { border-left-color: #2e7d32; }
.cnt-lines li.cnt-differs { border-left-color: #ef8f00; }
.cnt-what { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.cnt-what small { color: #5b6476; }
.cnt-what .cnt-diff { color: #8a4b00; font-weight: 600; }
.cnt-what .cnt-recount { color: #b71c1c; font-weight: 600; }
.cnt-qty { width: 5.5rem; font-size: 1.1rem; padding: 0.45rem; border: 1px solid #90a4ae; border-radius: 6px; text-align: right; }
.cnt-qty-read { width: 5.5rem; text-align: right; font-weight: 600; }
.cnt-table-wrap { overflow-x: auto; }
.cnt-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; background: #fff; }
.cnt-table th, .cnt-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #e3e8ef; text-align: left; vertical-align: top; }
.cnt-table .num { text-align: right; white-space: nowrap; }
.cnt-table .cnt-short { color: #b71c1c; font-weight: 600; }
.cnt-table tr.cnt-decided { color: #5b6476; }
.cnt-reason { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.6rem 0 0.2rem; max-width: 30rem; }
.cnt-reason input { font-size: 1rem; padding: 0.45rem; border: 1px solid #90a4ae; border-radius: 6px; }
.cnt-area { background: #fff; border-radius: 6px; padding: 0.4rem 0.7rem; margin-bottom: 0.5rem; box-shadow: 0 1px 2px rgba(11, 42, 74, 0.12); }
.cnt-area summary { cursor: pointer; min-height: 32px; }
.cnt-area summary small { color: #5b6476; margin-left: 0.4rem; }
.cnt-bins { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.cnt-bins li { border: 1px solid #d5dce6; border-radius: 6px; padding: 0.3rem 0.5rem; display: flex; flex-direction: column; min-width: 7rem; }
.cnt-bins li a { font-weight: 600; }
.cnt-bins li small { color: #5b6476; font-size: 0.78rem; }
.cnt-bins li.cnt-bin-done { background: #e8f5e9; border-color: #a5d6a7; }
.cnt-bins li.cnt-bin-counting { background: #fff8e1; border-color: #ffe082; }
.cnt-sheet { padding: 1rem; }
.cnt-sheet-area { break-after: page; }
.cnt-sheet-area h2 { font-size: 1.2rem; margin: 0.6rem 0; }
.cnt-sheet-bin { width: 100%; border-collapse: collapse; margin-bottom: 0.9rem; break-inside: avoid; font-size: 0.9rem; }
.cnt-sheet-bin th, .cnt-sheet-bin td { border: 1px solid #90a4ae; padding: 0.25rem 0.4rem; text-align: left; }
.cnt-sheet-bin th { background: #eef1f5; }
.cnt-sheet-bin .num { text-align: right; white-space: nowrap; width: 5rem; }
.cnt-sheet-bin .cnt-write { width: 6rem; }
.cnt-sheet-bin .cnt-write-line { height: 1.6rem; }
.cnt-sheet-extra, .cnt-sheet-sign { font-size: 0.8rem; color: #3b4a5e; }

/* Engine hours (MNT-12; John, Nov 4): the readings form and the meters table, phone first. */
.eh-form .eh-boat { border: 1px solid #c9d3df; border-radius: 6px; padding: 0.4rem 0.7rem 0.6rem; margin: 0 0 0.6rem; }
.eh-form .eh-boat legend { font-weight: 600; padding: 0 0.3rem; }
.eh-form .eh-boat label { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.3rem 0; }
.eh-form .eh-boat label small { display: block; color: #5b6b7d; font-weight: normal; }
.eh-form .eh-boat input { width: 8.5rem; }
.eh-form .eh-check { display: flex; gap: 0.4rem; align-items: center; }
.eh-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; background: #fff; }
.eh-table th, .eh-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #e3e8ee; text-align: left; vertical-align: middle; }
.eh-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Repeating tasks and engine hours on a card and a task page (MNT-12, MNT-13). */
.mb-hours { font-size: 0.78rem; color: #3b4c5e; white-space: nowrap; }
.mb-repeat-line { color: #3b4c5e; }

/* List rules (MNT-14): the rule under a list's name, and its editor. */
.mb-rule { font-size: 0.78rem; color: #3b4c5e; margin: -0.2rem 0 0.4rem; }
.mb-rule-edit { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border-radius: 6px; padding: 0.5rem; margin: 0 0 0.5rem; font-size: 0.85rem; }
.mb-rule-edit input[type="number"] { width: 4.5rem; }

/* Failures (MNT-15): the chips on a card and a task page, the report. */
.mb-chip-failure { background: #fde7e4; color: #8a1c0f; border: 1px solid #e6a59b; }
.mb-chip-out { background: #8a1c0f; color: #fff; }
.mb-failure-line { color: #3b4c5e; }
.fr-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin: 0 0 1rem; }
.fr-table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; background: #fff; font-size: 0.9rem; }
.fr-table th, .fr-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #e3e8ee; text-align: left; vertical-align: top; }
.fr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fr-table tr.fr-repeat td { background: #fff4f2; }
.fr-flag { color: #8a1c0f; font-weight: 600; white-space: nowrap; }
.fr-dates { font-size: 0.8rem; color: #5b6b7d; }