/* Low Cost Pet Vax design system, applied app-wide. Loaded after bootstrap.css and app.css.
   Navy #2A4065 is structure (headings, sidebar, secondary actions); red #EC2127 is money and action
   (prices, primary buttons, eyebrows). Barlow Semi Condensed display caps over Barlow body text --
   both Google Fonts stand-ins for the unsupplied logo typeface. Flat fills only: no gradients. */
:root {
    --navy-900: #16233A;
    --navy-800: #1E2F4D;
    --navy-700: #2A4065;
    --navy-600: #354E79;
    --navy-500: #4A6493;
    --navy-300: #8496B4;
    --navy-200: #C3CDDD;
    --navy-100: #E3E8F0;
    --navy-50: #F2F5F9;
    --red-700: #A8121A;
    --red-600: #C81419;
    --red-500: #EC2127;
    --red-300: #F5878B;
    --red-100: #FDE7E8;
    --gray-50: #F7F8FA;
    --gray-100: #EDEFF3;
    --gray-200: #E1E4EA;
    --gray-300: #D3D8E0;
    --gray-500: #6B7688;
    --gray-700: #414A5C;
    --green-600: #177A4C;
    --green-500: #1E8E5A;
    --green-100: #E4F4EC;
    --amber-500: #E0930F;
    --amber-100: #FDF1DA;
    --amber-ink: #8A5A00;

    --font-display: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(22, 35, 58, 0.08);
    --shadow-md: 0 4px 12px rgba(22, 35, 58, 0.10);
    --shadow-lg: 0 14px 36px rgba(22, 35, 58, 0.16);
    --shadow-press: inset 0 2px 4px rgba(13, 20, 32, 0.22);
    --ring-focus: 0 0 0 3px rgba(42, 64, 101, 0.28);
    --ring-focus-red: 0 0 0 3px rgba(236, 33, 39, 0.26);
    --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;

    /* Bootstrap's own variables, so its components pick the brand up without per-class overrides. */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--navy-900);
    --bs-body-bg: #fff;
    --bs-emphasis-color: var(--navy-900);
    --bs-secondary-color: var(--gray-500);
    --bs-heading-color: var(--navy-700);
    --bs-link-color: var(--navy-700);
    --bs-link-color-rgb: 42, 64, 101;
    --bs-link-hover-color: var(--red-600);
    --bs-link-hover-color-rgb: 200, 20, 25;
    --bs-border-color: var(--gray-200);
    --bs-border-radius: var(--radius-sm);
    --bs-primary: var(--navy-700);
    --bs-primary-rgb: 42, 64, 101;
    --bs-danger: var(--red-600);
    --bs-danger-rgb: 200, 20, 25;
    --bs-success: var(--green-600);
    --bs-success-rgb: 23, 122, 76;
    --bs-focus-ring-color: rgba(42, 64, 101, 0.28);
}

html, body {
    font-family: var(--font-body);
    color: var(--navy-900);
    font-size: 16px;
    line-height: 1.5;
}

/* ---- Type: headlines, labels and rules are ALL CAPS display; prose stays sentence case ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-700);
    letter-spacing: 0.005em;
}

h1, .h1 { font-weight: 800; font-size: 40px; line-height: 1.05; margin-bottom: 16px; }
h2, .h2 { font-weight: 800; font-size: 32px; line-height: 1.05; }
h3, .h3 { font-weight: 800; font-size: 26px; line-height: 1.2; }
h4, .h4 { font-weight: 700; font-size: 21px; line-height: 1.2; }
h5, .h5 { font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: 0.04em; }
h6, .h6 { font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.14em; }

@media (max-width: 640.98px) {
    h1, .h1 { font-size: 32px; }
}

a, .btn-link {
    color: var(--navy-700);
    transition: color var(--dur-fast) var(--ease-out);
}

a:hover, .btn-link:hover {
    color: var(--red-600);
}

.text-muted, .form-text {
    color: var(--gray-500) !important;
}

.text-danger { color: var(--red-600) !important; }
.text-success { color: var(--green-600) !important; }

hr {
    border-color: var(--gray-200);
    opacity: 1;
}

code { color: var(--red-700); }

/* ---- Buttons: 2px border so filled and outline variants share a footprint ---- */
.btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 20px;
    border-width: 2px;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.btn-sm {
    font-size: 14px;
    padding: 4px 12px;
}

.btn:focus-visible,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    box-shadow: var(--ring-focus);
}

.btn:active {
    box-shadow: var(--shadow-press) !important;
    transform: translateY(1px);
}

.btn:disabled, .btn.disabled {
    opacity: 0.45;
}

/* Primary = red (the call to action), hover/press one step darker each. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red-500);
    --bs-btn-border-color: var(--red-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-600);
    --bs-btn-hover-border-color: var(--red-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red-700);
    --bs-btn-active-border-color: var(--red-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--red-500);
    --bs-btn-disabled-border-color: var(--red-500);
}

/* Secondary = navy fill. */
.btn-secondary, .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy-700);
    --bs-btn-border-color: var(--navy-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-800);
    --bs-btn-hover-border-color: var(--navy-800);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-900);
    --bs-btn-active-border-color: var(--navy-900);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--navy-700);
    --bs-btn-disabled-border-color: var(--navy-700);
}

/* Outline buttons invert to a navy fill on hover. */
.btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: var(--navy-700);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--navy-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-700);
    --bs-btn-hover-border-color: var(--navy-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-800);
    --bs-btn-active-border-color: var(--navy-800);
    --bs-btn-disabled-color: var(--navy-700);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--navy-700);
}

.btn-outline {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-outline:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* Green is for confirmations only (approve, save-and-post). */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--green-600);
    --bs-btn-border-color: var(--green-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #12633D;
    --bs-btn-hover-border-color: #12633D;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0E4F31;
    --bs-btn-active-border-color: #0E4F31;
    --bs-btn-disabled-bg: var(--green-600);
    --bs-btn-disabled-border-color: var(--green-600);
}

/* Destructive actions: the dark end of the red ramp, so they read apart from the red primary. */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red-700);
    --bs-btn-border-color: var(--red-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8A0E15;
    --bs-btn-hover-border-color: #8A0E15;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6E0B11;
    --bs-btn-active-border-color: #6E0B11;
    --bs-btn-disabled-bg: var(--red-700);
    --bs-btn-disabled-border-color: var(--red-700);
}

.btn-outline-danger {
    --bs-btn-color: var(--red-700);
    --bs-btn-border-color: var(--red-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-700);
    --bs-btn-hover-border-color: var(--red-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8A0E15;
    --bs-btn-active-border-color: #8A0E15;
}

.btn-link {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    --bs-btn-color: var(--navy-700);
    --bs-btn-hover-color: var(--red-600);
    --bs-btn-active-color: var(--red-600);
}

.btn-link:active {
    box-shadow: none !important;
    transform: none;
}

/* ---- Badges: condensed caps pills ---- */
.badge {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    line-height: 1.35;
}

.badge.bg-success { background-color: var(--green-100) !important; color: var(--green-600) !important; }
.badge.bg-warning { background-color: var(--amber-100) !important; color: var(--amber-ink) !important; }
.badge.bg-primary { background-color: var(--navy-700) !important; color: #fff !important; }
.badge.bg-dark { background-color: var(--navy-900) !important; color: #fff !important; }
.badge.bg-info { background-color: var(--navy-100) !important; color: var(--navy-700) !important; }
.badge.bg-secondary { background-color: transparent !important; color: var(--navy-700) !important; box-shadow: inset 0 0 0 1px var(--navy-200); }
.badge.bg-danger { background-color: var(--red-500) !important; color: #fff !important; }
.badge.bg-light { background-color: var(--gray-100) !important; color: var(--navy-700) !important; }

/* ---- Forms ---- */
.form-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    margin-bottom: 6px;
}

.form-control, .form-select {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--navy-900);
    border: 1px solid var(--navy-200);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.form-select {
    padding-right: 34px;
}

.form-control-sm, .form-select-sm {
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--navy-700);
    box-shadow: var(--ring-focus);
}

.form-control::placeholder {
    color: var(--gray-500);
}

.form-check-input {
    border-color: var(--navy-200);
}

.form-check-input:checked {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
}

.form-check-label {
    color: var(--navy-900);
}

.invalid, .form-control.invalid {
    outline: none;
    border-color: var(--red-500);
}

.invalid:focus {
    box-shadow: var(--ring-focus-red);
}

.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--green-500);
}

.validation-message {
    font-size: 14px;
    color: var(--red-600);
}

/* ---- Cards ---- */
.card {
    --bs-card-border-color: var(--gray-200);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-spacer-y: 24px;
    --bs-card-spacer-x: 24px;
    --bs-card-cap-bg: var(--navy-50);
}

.card-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-700);
}

/* ---- Tables: condensed caps header on a hairline, no zebra ---- */
.table {
    --bs-table-color: var(--navy-900);
    --bs-table-border-color: var(--gray-200);
    --bs-table-hover-bg: var(--navy-50);
    --bs-table-striped-bg: var(--gray-50);
}

.table > thead th {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    border-bottom: 2px solid var(--navy-200);
    white-space: nowrap;
}

.table > tbody td {
    vertical-align: middle;
}

/* ---- Alerts: the Callout pattern -- tinted fill with a 4px top bar ---- */
.alert {
    border: 0;
    border-top: 4px solid var(--navy-700);
    border-radius: var(--radius-md);
    background: var(--navy-50);
    color: var(--navy-800);
    padding: 16px;
}

.alert-success { border-top-color: var(--green-500); background: var(--green-100); color: var(--green-600); }
.alert-danger { border-top-color: var(--red-500); background: var(--red-100); color: var(--red-700); }
.alert-warning { border-top-color: var(--amber-500); background: var(--amber-100); color: var(--amber-ink); }

/* ---- Tabs and list groups ---- */
.nav-tabs {
    border-bottom: 2px solid var(--gray-200);
}

.nav-tabs .nav-link {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
    color: var(--navy-700);
    border-bottom-color: var(--navy-200);
}

.nav-tabs .nav-link.active {
    color: var(--navy-700);
    background: transparent;
    border-bottom-color: var(--red-500);
}

.list-group {
    --bs-list-group-border-color: var(--gray-200);
    --bs-list-group-border-radius: var(--radius-lg);
    --bs-list-group-active-bg: var(--navy-700);
    --bs-list-group-active-border-color: var(--navy-700);
}

/* ---- Dialogs and pop-overs: solid white, 14px corners, restrained shadow ---- */
.modal-backdrop-custom {
    background: rgba(22, 35, 58, 0.55) !important;
}

.shift-form-dialog, .vet-conflict-dialog, .export-panel, .context-menu {
    border-radius: var(--radius-lg) !important;
    border-color: var(--gray-200) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ---- Scheduling calendar: day headers and the date picker in brand navy. Shift chip styles
   live with the rest of the calendar CSS in app.css. ---- */
.calendar-day-header {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy-700);
}

.calendar-day-weekend {
    background-color: var(--navy-50);
}

.toggle-calendar-col-header {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--gray-500);
}

.toggle-calendar-cell {
    border-radius: var(--radius-sm);
}

.toggle-calendar-cell:hover {
    background: var(--navy-100);
}

.toggle-calendar-cell-on, .toggle-calendar-cell-on:hover {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
}

.context-menu button:hover {
    background-color: var(--navy-50);
}

.loading-progress circle:last-child {
    stroke: var(--red-500);
}

.loading-progress-text {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-700);
}

/* ==== Brand components (ShiftCard, page heading) ==== */

/* ---- Section heading: red eyebrow, navy heavy uppercase title, muted sub ---- */
.lcpv-heading {
    margin-bottom: 24px;
}

.lcpv-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red-600);
    margin-bottom: 8px;
}

.lcpv-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin: 0;
}

.lcpv-sub {
    font-size: 18px;
    line-height: 1.5;
    color: var(--gray-500);
    margin: 12px 0 0;
    max-width: 720px;
}

.lcpv-count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    margin-bottom: 12px;
}

.lcpv-message {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-lg);
    padding: 24px;
    font-size: 18px;
    color: var(--navy-900);
}

.lcpv-message.is-error {
    background: #FDE7E8;
    border-color: #F5878B;
}

.lcpv-shift-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 900px) {
    .lcpv-title {
        font-size: 32px;
    }
}

/* ---- Shift card (ClinicCard pattern) ---- */
.lcpv-shift-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.lcpv-shift-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* The card whose locations the map is framing gets the brand's one accent rule: a top bar. */
.lcpv-shift-card.is-focused {
    border-top: 4px solid var(--red-500);
}

/* Its map pin is selected: red ring round the whole card. */
.lcpv-shift-card.is-selected {
    border-color: var(--red-500);
    box-shadow: 0 0 0 2px var(--red-500), var(--shadow-md);
}

.lcpv-shift-date {
    flex: 0 0 88px;
    background: var(--navy-700);
    color: #fff;
    padding: 16px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.lcpv-shift-date-day,
.lcpv-shift-date-month {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--navy-200);
}

.lcpv-shift-date-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
}

.lcpv-shift-body {
    flex: 1;
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcpv-shift-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lcpv-shift-hours {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--navy-800);
}

.lcpv-shift-location {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-900);
}

.lcpv-shift-leg-time {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-right: 8px;
}

.lcpv-shift-address,
.lcpv-shift-note {
    font-size: 14px;
    color: var(--gray-500);
}

/* Available Shifts on phones (ShiftCard CompactOnPhones): "Vax Clinic on {street}" instead of the
   store name, and no address line (it's on the shift's Details page). */
.lcpv-shift-location-short {
    display: none;
}

@media (max-width: 900px) {
    .is-compact-phone .lcpv-shift-location-full,
    .is-compact-phone .lcpv-shift-street {
        display: none;
    }

    .is-compact-phone .lcpv-shift-location-short {
        display: inline;
    }
}

.lcpv-shift-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Price first, red, display-weight numerals. */
.lcpv-shift-pay {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    color: var(--red-600);
}

.lcpv-shift-pay-increase {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-600);
    font-size: 14px;
    vertical-align: middle;
}

.lcpv-shift-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ---- Badge ---- */
.lcpv-badge {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    line-height: 1.35;
    display: inline-block;
}

.lcpv-badge-success { background: var(--green-100); color: var(--green-600); }
.lcpv-badge-warn { background: var(--amber-100); color: var(--amber-ink); }
.lcpv-badge-denied { background: var(--red-100); color: var(--red-700); }
.lcpv-badge-outline { background: transparent; color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-200); }

.lcpv-shift-actions .text-success {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
}

.lcpv-shift-actions .text-danger {
    flex-basis: 100%;
    font-size: 14px;
    margin: 0;
}

.lcpv-shift-extra {
    margin-top: 8px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.lcpv-shift-card {
    max-width: 720px;
    margin-bottom: 12px;
}

.lcpv-shift-list {
    gap: 0;
}

.lcpv-detail-card {
    max-width: 560px;
    margin-bottom: 24px;
}

/* ==== Signed-out chrome: public header + Login pop-over (Layout/PublicHeader.razor) ==== */
.public-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.public-header-logo img {
    display: block;
    height: 48px;
    width: auto;
}

.public-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.public-content {
    padding: 24px;
    max-width: 1440px;
    margin: 0 auto;
}

.login-popover-anchor {
    position: relative;
}

.login-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.login-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 24px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.login-popover-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-bottom: 16px;
}

@media (max-width: 640.98px) {
    .public-header {
        padding: 8px 16px;
    }

    .public-header-logo img {
        height: 34px;
    }

    .public-header-actions {
        gap: 8px;
    }

    .public-header-actions .btn {
        font-size: 14px;
        padding: 4px 10px;
    }

    .public-content {
        padding: 16px;
    }
}

/* ==== Register / Login pages (Layout/AuthLayout.razor) ==== */
.auth-layout {
    min-height: 100vh;
    background: var(--gray-50);
    padding: 24px;
}

.auth-back-link {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.auth-layout-content {
    max-width: 560px;
    margin: 32px auto 0;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (max-width: 640.98px) {
    .auth-layout {
        padding: 16px;
    }

    .auth-layout-content {
        margin-top: 16px;
        padding: 20px;
    }
}

/* ==== Available Shifts board (Pages/Public/AvailableShifts.razor, wwwroot/js/shiftBoard.js) ====
   The board is sized to the window below the heading (--avs-h, set by shiftBoard.js) so the map is
   always fully visible. Wide: scrolling list column beside the map. Narrow: the map fills the board
   and the list is a bottom sheet over it, as tall as the user drags it (--sheet-h). */
.avs-board {
    --avs-h: 75vh;
    display: grid;
    grid-template-columns: minmax(320px, min(460px, 50%)) minmax(0, 1fr);
    gap: 24px;
    height: var(--avs-h);
}

.avs-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.avs-panel-head {
    flex: none;
}

.avs-sheet-handle {
    display: none;
}

.avs-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
}

.avs-panel-bar .lcpv-count {
    margin-bottom: 0;
}

.avs-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    background: #fff;
    border: 2px solid var(--navy-200);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.avs-filter-toggle:hover,
.avs-filter-toggle.is-open {
    border-color: var(--navy-700);
    background: var(--navy-50);
}

.avs-filter-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.avs-filter-count {
    min-width: 20px;
    padding: 0 6px;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: var(--red-600);
    border-radius: var(--radius-pill);
}

.avs-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
}

.avs-filter-toggle.is-open .avs-chevron {
    transform: translateY(2px) rotate(-135deg);
}

/* Filters + cards scroll together under the fixed count/Filters bar. */
.avs-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* room for the selected card's ring and the hover lift */
    padding: 4px 6px 12px 4px;
    margin: -4px -6px 0 -4px;
}

.lcpv-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: end;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-lg);
}

.avs-filter-wide {
    grid-column: 1 / -1;
}

.lcpv-filter .form-label {
    margin-bottom: 4px;
}

.lcpv-filter-clear .btn-link {
    padding-left: 0;
    padding-right: 0;
}

.lcpv-filter-clear .btn-link:disabled {
    color: var(--gray-500);
}

.avs-map {
    min-width: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ---- Selected-marker callout: just the shift card(s), pinned above the enlarged pin ----
   .avs-callout is only a positioning box (mapInterop.js sets its transform every map move) that
   casts the shadow; .avs-callout-card inside it carries the grow/shrink animations below. No frame
   or title of its own -- the card is the callout. */
.avs-callout {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    visibility: hidden; /* until mapInterop.anchorElement has positioned it */
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100% - 24px));
    max-height: 60%;
    filter: drop-shadow(0 12px 24px rgba(22, 35, 58, 0.22));
}

.avs-callout-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--radius-lg);
    transform-origin: 50% 100%;
}

/* Pointer from the (last) card down to the pin. */
.avs-callout-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    transform: translateX(-50%) rotate(45deg);
}

/* Red wash over the card: what the pin "blooms" through on the way in, and folds back into on the way out. */
.avs-callout-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--red-500);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.avs-callout-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    font-size: 22px;
    line-height: 1;
    color: var(--gray-500);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-pill);
}

.avs-callout-close:hover {
    color: var(--navy-900);
    background: var(--gray-100);
}

.avs-callout-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg);
}

.avs-callout-body .lcpv-shift-card {
    margin-bottom: 0;
    flex: none;
}

.avs-callout-body .lcpv-shift-card:hover {
    transform: none;
    box-shadow: none;
}

/* Keep the status badge clear of the close button. */
.avs-callout-body .lcpv-shift-card:first-child .lcpv-shift-head {
    padding-right: 32px;
}

.avs-callout .lcpv-shift-date {
    flex-basis: 72px;
}

/* Phones and short windows: drop the intro line so the map gets the height. */
@media (max-width: 900px), (max-height: 700px) {
    .avs-page .lcpv-heading {
        margin-bottom: 12px;
    }

    .avs-page .lcpv-sub {
        display: none;
    }
}

@media (max-width: 900px) {
    .avs-board {
        position: relative;
        display: block;
    }

    .avs-map {
        position: absolute;
        inset: 0;
    }

    .avs-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4;
        height: var(--sheet-h, 42%);
        background: #fff;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -6px 24px rgba(22, 35, 58, 0.18);
        transition: height var(--dur-base) var(--ease-out);
    }

    .avs-panel.is-dragging {
        transition: none;
    }

    .avs-panel-head {
        padding: 8px 16px 0;
        cursor: grab;
        touch-action: none;
        user-select: none;
    }

    .avs-panel.is-dragging .avs-panel-head {
        cursor: grabbing;
    }

    .avs-sheet-handle {
        display: block;
        width: 44px;
        height: 5px;
        margin: 0 auto 10px;
        background: var(--gray-300);
        border-radius: var(--radius-pill);
    }

    .avs-panel-scroll {
        padding: 4px 16px 16px;
        margin: -4px 0 0;
    }

    .lcpv-shift-list .lcpv-shift-card {
        max-width: none;
    }
}

/* ---- Pin -> card transition ----
   Enter: the pin pops and ripples, then a red dot springs up out of its head and unfolds into the
   card while it turns white; the card's pieces then fade up one after another. Leave reverses it,
   folding the card back down into the pin. Classes come from mapInterop.js (anchorElement /
   collapseAnchor), which waits for these animations to finish before removing the card. */
.avs-callout.map-anchor-enter .avs-callout-card {
    animation:
        avs-card-spring 560ms cubic-bezier(0.22, 1.35, 0.36, 1) 90ms both,
        avs-card-reveal 420ms cubic-bezier(0.4, 0, 0.2, 1) 90ms both;
}

.avs-callout.map-anchor-enter .avs-callout-card::before {
    animation: avs-wash-out 380ms var(--ease-out) 90ms both;
}

.avs-callout.map-anchor-enter .avs-callout-card::after {
    animation: avs-card-tint 380ms var(--ease-out) 90ms both;
}

.avs-callout.map-anchor-enter .avs-callout-close {
    animation: avs-fade-in 200ms linear 260ms both;
}

.avs-callout.map-anchor-enter .lcpv-shift-body > * {
    animation: avs-rise 340ms var(--ease-out) both;
}

.avs-callout.map-anchor-enter .lcpv-shift-body > :nth-child(1) { animation-delay: 300ms; }
.avs-callout.map-anchor-enter .lcpv-shift-body > :nth-child(2) { animation-delay: 345ms; }
.avs-callout.map-anchor-enter .lcpv-shift-body > :nth-child(3) { animation-delay: 390ms; }
.avs-callout.map-anchor-enter .lcpv-shift-body > :nth-child(4) { animation-delay: 435ms; }
.avs-callout.map-anchor-enter .lcpv-shift-body > :nth-child(n+5) { animation-delay: 480ms; }

.avs-callout.map-anchor-enter .lcpv-shift-date {
    animation: avs-slide-in 420ms cubic-bezier(0.22, 1.2, 0.36, 1) 240ms both;
}

.avs-callout.map-anchor-leave .avs-callout-card {
    animation: avs-card-fold 300ms cubic-bezier(0.55, 0, 0.75, 0.2) both;
}

.avs-callout.map-anchor-leave .avs-callout-card::before {
    animation: avs-wash-in 120ms linear both;
}

.avs-callout.map-anchor-leave .avs-callout-close {
    animation: avs-fade-out 80ms linear both;
}

@keyframes avs-card-spring {
    0% { transform: translateY(46px) scale(0.08); border-radius: 50%; }
    45% { border-radius: 28px; }
    100% { transform: none; border-radius: var(--radius-lg); }
}

@keyframes avs-card-reveal {
    0% { clip-path: circle(12% at 50% 100%); }
    100% { clip-path: circle(150% at 50% 100%); }
}

@keyframes avs-card-tint {
    0%, 30% { background-color: var(--red-500); border-color: var(--red-500); }
    100% { background-color: #fff; border-color: var(--gray-200); }
}

@keyframes avs-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes avs-slide-in {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

@keyframes avs-card-fold {
    0% { transform: none; clip-path: circle(150% at 50% 100%); }
    85% { opacity: 1; }
    100% { transform: translateY(46px) scale(0.08); clip-path: circle(12% at 50% 100%); border-radius: 50%; opacity: 0; }
}

@keyframes avs-wash-out {
    0%, 30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes avs-wash-in {
    to { opacity: 1; }
}

@keyframes avs-fade-in {
    from { opacity: 0; }
}

@keyframes avs-fade-out {
    to { opacity: 0; }
}

.avs-list-item {
    cursor: pointer;
}

.avs-card-actions {
    display: contents;
}

@media (max-width: 420px) {
    .lcpv-filters {
        grid-template-columns: 1fr;
    }
}

/* My Schedule: Request Cancelation button / Cancelation Requested badge, under the card's map. */
.my-schedule-cancel {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.my-schedule-cancel:empty {
    display: none;
}

/* Pending Approvals: let a long cancelation reason wrap instead of stretching the table. */
.cancel-reason-cell {
    max-width: 320px;
    overflow-wrap: anywhere;
}

.cancel-reason-text {
    white-space: pre-wrap;
}

/* ==== My Schedule "Request Cancelation" pop-up (Shared/CancellationRequestDialog.razor) ==== */
.cancel-request-dialog {
    width: calc(100% - 32px);
    max-width: 520px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.cancel-request-dialog .card-body {
    padding: 24px;
}

.cancel-request-title {
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 16px;
}

.cancel-request-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* ==== Scheduling Calendar drag-to-copy ==== */
.calendar-shift-chip[draggable="true"] {
    cursor: grab;
}

.calendar-shift-chip[draggable="true"]:active {
    cursor: grabbing;
}

.calendar-day-drop-target {
    outline: 2px dashed var(--navy-700);
    outline-offset: -2px;
    background-color: var(--navy-100) !important;
}

/* ==== Maps (Mapbox GL JS, wwwroot/js/mapInterop.js) ==== */
/* isolation keeps Mapbox's own z-indexed controls inside the map, so modals and pop-overs cover them. */
.map-view {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.map-view-canvas {
    width: 100%;
    height: 100%;
}

.shifter-map-pin {
    cursor: pointer;
}

.shifter-map-pin-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: 50% calc(100% - 9px); /* the pin's tip (mapInterop.js PIN_TIP_OFFSET) */
    transition: transform var(--dur-base) var(--ease-out);
}

/* A one-color icon used as a mask and filled with --freq (MapMarker.TintClass, mapInterop.js applyPinLook). */
.shifter-map-pin-tinted {
    filter: drop-shadow(0 1px 2px rgba(22, 35, 58, 0.45));
}
.shifter-map-pin-tinted .shifter-map-pin-img {
    background: var(--freq, var(--gray-500));
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
/* Short text under the pin's tip (MapMarker.Badge). */
.shifter-map-pin-badge {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gray-200);
    color: var(--navy-900);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none;
}

.shifter-map-pin.is-selected .shifter-map-pin-img {
    transform: scale(1.3); /* mapInterop.js SELECTED_PIN_SCALE */
    animation: shifter-pin-pop 560ms cubic-bezier(0.22, 1.4, 0.36, 1);
}

/* Ground ripple from the pin's tip when it's selected (a flattened ring, so it reads as on the map). */
.shifter-map-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px; /* the pin's tip */
    width: 18px;
    height: 18px;
    margin: 0 0 -9px -9px;
    border: 2px solid var(--red-500);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.shifter-map-pin.is-selected::after,
.shifter-map-pin.is-hovered::after {
    animation: shifter-pin-ripple 900ms var(--ease-out) 2;
}
/* Hovered from its card in the list (mapInterop.js hoverMarkers): ripple and label, no enlarging. */
.shifter-map-pin.is-hovered { z-index: 1; }

@keyframes shifter-pin-pop {
    0% { transform: scale(1); }
    35% { transform: translateY(-12px) scale(1.5); }
    65% { transform: translateY(0) scale(1.18); }
    100% { transform: scale(1.3); }
}

@keyframes shifter-pin-ripple {
    0% { transform: scale(0.4, 0.2); opacity: 0.9; }
    100% { transform: scale(4.2, 2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .shifter-map-pin.is-selected .shifter-map-pin-img,
    .shifter-map-pin.is-selected::after,
    .avs-callout .avs-callout-card,
    .avs-callout .avs-callout-card::before,
    .avs-callout .avs-callout-card::after,
    .avs-callout .avs-callout-close,
    .avs-callout .lcpv-shift-date,
    .avs-callout .lcpv-shift-body > * {
        animation: none !important;
    }

    .avs-callout.map-anchor-enter .avs-callout-card { animation: avs-rise 150ms linear both !important; }
    .avs-callout.map-anchor-leave .avs-callout-card { animation: avs-fade-out 120ms linear both !important; }
}

.mapboxgl-popup-content {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.map-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 14px;
}

/* ==== Import Schedule dialog (Shared/ImportScheduleDialog.razor) ==== */
.import-dialog {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    max-width: 960px;
    max-height: calc(100vh - 48px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.import-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--gray-200);
}

.import-title {
    font-size: 26px;
    margin-bottom: 8px;
}

.import-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: import-step;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}

.import-steps li {
    counter-increment: import-step;
}

.import-steps li::before {
    content: counter(import-step) ". ";
}

.import-steps li.is-done {
    color: var(--navy-500);
}

.import-steps li.is-current {
    color: var(--red-600);
}

.import-dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px;
}

.import-dialog-foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 24px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.import-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.import-source {
    position: relative;
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
}

.import-source-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-bottom: 4px;
}

/* The whole card is the file input (invisible on top), so it takes clicks and dropped files. */
.import-dropzone {
    border: 2px dashed var(--navy-200);
    background: var(--navy-50);
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.import-dropzone:hover,
.import-dropzone:focus-within {
    border-color: var(--navy-700);
    background: var(--navy-100);
}

.import-dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.import-dropzone.is-busy {
    opacity: 0.6;
}

.import-mapping {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 24px;
}

.import-mapping-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.2fr);
    gap: 8px;
    align-items: center;
}

.import-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-md);
}

.import-options select {
    max-width: 200px;
}

.import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.import-creates {
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--amber-100);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.import-table-wrap {
    overflow-x: auto;
}

.import-table td {
    vertical-align: top;
}

.import-table .lcpv-badge {
    white-space: nowrap;
}

.import-table tr.is-duplicate td {
    color: var(--gray-500);
}

.import-table tr.is-error td {
    background: var(--red-100);
}

.import-done {
    text-align: center;
    padding: 24px 0;
}

.import-done ul {
    display: inline-block;
    text-align: left;
}

.import-done-count {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    color: var(--green-600);
}

/* Google's Picker opens on top of the import dialog, not behind it. */
.picker-dialog-bg { z-index: 2000 !important; }
.picker-dialog { z-index: 2001 !important; }

/* ---- Homebase onboarding indicator (Staff Members / Users) ---- */
.hb-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
}
.hb-bar-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--navy-800);
}
.hb-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--gray-700);
    cursor: default;
}
.hb-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--gray-300);
}
.hb-on .hb-dot { background: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.hb-on .hb-label { color: var(--green-600); }
.hb-off .hb-dot { background: var(--red-500); box-shadow: 0 0 0 3px var(--red-100); }
.hb-off .hb-label { color: var(--red-700); }
.hb-unknown .hb-label { color: var(--gray-500); }

.staff-search { max-width: 280px; }
.staff-filter { max-width: 220px; }
.staff-name-input { min-width: 210px; }

/* ---- Staff Members > Employee Details ---- */
.employee-details-dialog {
    width: calc(100% - 32px);
    max-width: 560px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    margin: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.employee-details-dialog .card-body { padding: 24px; }
.employee-details-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.employee-details-title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}
.employee-details-list {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px 16px;
    margin: 0;
}
.employee-details-list dt {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding-top: 2px;
}
.employee-details-list dd { margin: 0; overflow-wrap: anywhere; }
.employee-details-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}
@media (max-width: 480px) {
    .employee-details-list { grid-template-columns: 1fr; gap: 2px; }
    .employee-details-list dd { margin-bottom: 10px; }
}
.staff-details-link { padding: 4px 0 0; font-size: 0.85rem; }
.staff-row-hidden > td { background: var(--gray-50); }
.staff-row-hidden .staff-name-input { color: var(--gray-500); }

/* ---- Scheduling Calendar: Prev/Next week − n + steppers ---- */
.calendar-filter-select { min-width: 150px; }
.calendar-month-select { min-width: 180px; }
.calendar-location-select { min-width: 170px; max-width: 240px; }
.calendar-range-text { line-height: 44px; }
.calendar-week-stepper .btn { min-width: 40px; }
.calendar-week-stepper .calendar-week-count { opacity: 1; font-variant-numeric: tabular-nums; }

/* ---- Staff Members: eligible role levels (Shared/RoleLevelPicker.razor) ---- */
.role-level-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 6px 10px;
    min-width: 260px;
}
.role-level { display: flex; flex-direction: column; gap: 2px; }
.role-level-name { font-size: 0.8rem; font-weight: 600; color: var(--gray-700); margin: 0; }
.role-level.is-unset .role-level-name { color: var(--gray-500); font-weight: 400; }
.role-level.is-unset .form-select { color: var(--gray-500); }
.role-level.is-level-0 .form-select { border-color: var(--amber-500); background-color: var(--amber-100); color: var(--amber-ink); }
.role-level[class*="is-level-"]:not(.is-level-0) .form-select { border-color: var(--green-500); background-color: var(--green-100); }

/* ---- Staff Members: Venn view (Shared/StaffVennDiagram.razor) ---- */
.staff-view-toggle .btn { min-width: 0; }
.venn-scroll { overflow-x: auto; margin: 8px 0 12px; }
.venn {
    position: relative;
    width: 100%;
    min-width: 760px;
    max-width: 1100px;
    aspect-ratio: 1000 / 900;
    margin: 0 auto;
}
.venn-circles { position: absolute; inset: 0; width: 100%; height: 100%; }
.venn-circle { stroke-width: 3; }
.venn-circle-checkin { fill: rgba(30, 142, 90, 0.08); stroke: var(--green-500); }
.venn-circle-tech { fill: rgba(42, 64, 101, 0.08); stroke: var(--navy-700); }
.venn-circle-checkout { fill: rgba(200, 20, 25, 0.06); stroke: var(--red-600); }
.venn-circle-label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-anchor: middle;
    fill: var(--navy-700);
}
.venn-region {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    /* "safe": when a region overflows, start at the top so every marker can be scrolled to. */
    align-content: safe center;
    justify-content: safe center;
    gap: 4px;
    overflow-y: auto;
    padding: 2px;
}
.venn-marker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--gray-700);
    font-size: 12px;
    line-height: 1.3;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.venn-marker:hover, .venn-marker:focus-visible { border-color: var(--navy-500); outline: none; box-shadow: 0 0 0 2px var(--navy-200); }
.venn-marker.is-tech { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.venn-marker.is-assist { background: #6B4FA0; border-color: #6B4FA0; color: #fff; }
.venn-marker.is-hidden { opacity: 0.55; border-style: dashed; }
.venn-marker-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.venn-chip {
    flex: none;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.venn-chip.is-training { background: var(--amber-100); color: var(--amber-ink); }
.venn-marker.is-tech .venn-chip:not(.is-training), .venn-marker.is-assist .venn-chip:not(.is-training) { background: rgba(255, 255, 255, 0.22); color: #fff; }
.venn-trainer { flex: none; color: var(--amber-500); font-size: 13px; }
.venn-outside { margin-bottom: 12px; }
.venn-outside-label { display: block; font-size: 0.85rem; color: var(--gray-500); margin-bottom: 4px; }
.venn-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 0.85rem; color: var(--gray-500); margin-bottom: 16px; }
.venn-legend-swatch { cursor: default; box-shadow: none; }

/* Staff Members rows at medium widths (sidebar + ~750-950px of content): stack the row's buttons
   and narrow the name box and role picker so the whole row fits without scrolling. */
.staff-account-badge { white-space: normal; overflow-wrap: anywhere; text-align: left; }
@media (min-width: 641px) and (max-width: 1399.98px) {
    .staff-actions { width: 1%; }
    .staff-actions .btn { display: block; width: 100%; margin-bottom: 4px; }
    .staff-name-input { min-width: 130px; }
    .role-level-picker { min-width: 206px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 8px; }
}
/* Long headings ("Eligible roles (In-training to Level 3)") wrap rather than set the column's width. */
.table-stack > thead th { white-space: normal; vertical-align: bottom; }
@media (max-width: 640.98px) {
    .table-stack .role-level-picker { min-width: 0; }
    .table-stack .staff-name-input { min-width: 0; }
}
.staff-account-inline { display: none; margin-top: 4px; }
@media (min-width: 641px) and (max-width: 1199.98px) {
    .staff-account-col { display: none; }
    .staff-account-inline { display: block; }
}

/* ---- Invoices (Pages/Invoices/Invoices.razor) ---- */
.invoice-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.invoice-summary-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: left;
    color: var(--navy-900);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.invoice-summary-tile:hover { border-color: var(--navy-300); }
.invoice-summary-tile.is-active { border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700); }
.invoice-summary-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}
.invoice-summary-total { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.invoice-summary-count { font-size: 0.8rem; color: var(--gray-500); }

.invoice-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.invoice-filters > div { min-width: 130px; }
.invoice-filters .invoice-filter-search { flex: 1 1 220px; }

.invoice-paybar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--green-100);
    border-radius: var(--radius-md);
}
.invoice-paybar input:not([type=date]) { flex: 1 1 200px; width: auto; }
.invoice-paybar input[type=date] { width: auto; }

.invoice-select-col { width: 34px; }
.invoice-row-open > td { border-bottom-color: transparent; background: var(--navy-50); }
.invoice-receipt-row > td { background: var(--navy-50); padding: 0 8px 12px; }
.invoice-receipt {
    max-width: 560px;
    margin-left: auto;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.invoice-receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.invoice-receipt-number { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy-700); }
.invoice-receipt-shift { padding: 8px 0 10px; border-top: 1px dashed var(--gray-300); margin-bottom: 4px; }
.invoice-lines th { font-weight: 600; }
.invoice-lines-total th { border-top: 2px solid var(--navy-700); font-size: 1.05rem; }
.invoice-receipt-foot { margin-bottom: 10px; }
.invoice-receipt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invoice-badge-void { text-decoration: line-through; color: var(--gray-500); }

/* The receipt table is its own small table; keep it a table on phones. */
@media (max-width: 640.98px) {
    .invoice-receipt { max-width: none; padding: 12px; }
    .table-stack .invoice-receipt-row > td { display: block; padding: 0 0 8px; }
    .table-stack .invoice-receipt-row > td::before { content: none; }
    .table-stack td.invoice-select-col:empty { display: none; }
    .invoice-table > tbody > tr > td > .lcpv-badge { justify-self: start; }
    .invoice-table > tbody > tr > td.text-end { text-align: left !important; } /* beats Bootstrap's !important .text-end */
}

/* Printing a receipt (shifterLayout.printElement): only the copy in #print-root is on paper. */
#print-root { display: none; }
@media print {
    body.is-printing > *:not(#print-root) { display: none !important; }
    body.is-printing { background: #fff !important; padding: 0 !important; margin: 0 !important; }
    body.is-printing #print-root { display: block; }
    #print-root .invoice-receipt { max-width: none; width: 100%; margin: 0; box-shadow: none; border: 0; }
    #print-root .invoice-receipt-actions { display: none; }
}

/* ---- Admin Settings (Pages/Admin/Settings/AdminSettings.razor) ---- */
.admin-defaults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}
.page-access-table th:not(:first-child), .page-access-table td:not(:first-child) { width: 1%; white-space: nowrap; }
.invoice-badge-referral { background: var(--navy-100); color: var(--navy-700); }

/* ---- Referrals (Pages/Referrals/Referrals.razor) ---- */
.referral-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 1rem;
    align-items: start;
}
.referral-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.referral-code {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.18em;
    color: var(--navy-700);
    padding: 4px 14px;
    background: var(--navy-50);
    border: 1px dashed var(--navy-300);
    border-radius: var(--radius-md);
}
.referral-code-input { text-transform: uppercase; letter-spacing: 0.12em; }
.referral-preview { width: 100%; height: 720px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; }
.referral-results li { overflow-wrap: anywhere; }
.admin-defaults-wide { grid-column: 1 / -1; }
.admin-calendar-defaults {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: 1.5rem;
}
@media (max-width: 767.98px) {
    .admin-calendar-defaults { grid-template-columns: minmax(0, 1fr); }
}

/* Staff Members map view (Shared/StaffMap.razor): StaffMarkers over the map, each bottom-centre on
   the person's address (mapInterop.js placeOverlay sets the transform), with a small pointer below. */
.staff-map-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.staff-map-pin {
    position: absolute;
    left: 0;
    top: 0;
    padding-bottom: 7px;
    pointer-events: none;
    will-change: transform;
}
.staff-map-pin .venn-marker {
    pointer-events: auto;
    white-space: nowrap;
    max-width: none;
}
.staff-map-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom: 0;
    border-top: 7px solid var(--navy-900);
}
.staff-map-pin:hover { z-index: 1; }

/* ==== Available Shifts: FAQ for vets, under the shift board (Pages/Public/AvailableShifts.razor) ==== */
.avs-faq {
    max-width: 880px;
    margin: 40px 0 24px;
}
/* Signed out: under the board, centered. Signed in it's the FAQ tab (.avs-tabs), left-aligned under it. */
.avs-faq-centered .avs-faq {
    margin-left: auto;
    margin-right: auto;
}
.avs-faq-centered .avs-faq-title {
    text-align: center;
}
.avs-tabs { margin-bottom: 16px; }
.avs-tabs + .avs-faq { margin-top: 8px; }
.avs-faq-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--navy-700);
    margin: 4px 0 16px;
}
.avs-faq-list {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
}
.avs-faq-item + .avs-faq-item {
    border-top: 1px solid var(--gray-200);
}
.avs-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 17px;
    color: var(--navy-900);
    cursor: pointer;
    list-style: none;
}
.avs-faq-item summary::-webkit-details-marker { display: none; }
.avs-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--navy-700);
    background: var(--gray-100, #F3F4F7);
    transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out), background-color var(--dur-base, 200ms);
}
.avs-faq-item[open] summary::after {
    transform: rotate(45deg);
    background: var(--navy-700);
    color: #fff;
}
.avs-faq-item summary:hover { background: #F8F9FB; }
.avs-faq-item summary:focus-visible {
    outline: 2px solid var(--navy-700);
    outline-offset: -2px;
}
.avs-faq-item p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--gray-700, #3E4A5E);
    line-height: 1.6;
}
@media (max-width: 640px) {
    .avs-faq { margin-top: 28px; }
    .avs-faq-title { font-size: 24px; }
    .avs-faq-item summary { padding: 14px 16px; font-size: 16px; }
    .avs-faq-item p { padding: 0 16px 16px; }
}

/* ==== Messages page (Pages/Messages/Messages.razor): conversation list | open conversation. On narrow
   screens it's one column: the list, or (once one is open) the conversation with a back link. ==== */
.msg-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    min-height: 60vh;
}
.msg-list-col {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 12rem);
}
.msg-list-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--gray-200);
}
.msg-list { overflow-y: auto; }
.msg-list-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
    padding: 10px 12px;
    color: var(--navy-900);
}
.msg-list-item:hover { background: #F6F7F9; }
.msg-list-item.is-active { background: #EEF3FB; box-shadow: inset 3px 0 0 var(--navy-700); }
.msg-list-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-list-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-list-item.is-unread .msg-list-who::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--red-500, #EC2127);
    vertical-align: 1px;
}
.msg-list-item.is-unread .msg-list-who,
.msg-list-item.is-unread .msg-list-subject { font-weight: 800; }
.msg-list-time { flex: 0 0 auto; font-size: 12px; color: var(--gray-500); }
.msg-list-subject { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-list-preview { font-size: 13px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-pane {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.msg-pane-head { padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); margin-bottom: 10px; }
.msg-empty { margin: auto; text-align: center; padding: 24px; }
.msg-back { display: none; align-self: flex-start; }
.msg-bubbles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 24rem);
    min-height: 8rem;
    padding: 4px 2px 10px;
}
.msg-bubble {
    max-width: min(80%, 620px);
    padding: 8px 12px;
    border-radius: 12px;
    background: #F1F3F6;
    align-self: flex-start;
}
.msg-bubble.is-mine { align-self: flex-end; background: var(--navy-700); color: #fff; }
.msg-bubble-meta { font-size: 11px; opacity: 0.75; margin-bottom: 2px; }
.msg-bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-reply { border-top: 1px solid var(--gray-200); padding-top: 10px; margin-top: auto; }
.msg-announcements { display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
.msg-announcement {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md, 10px);
    background: #fff;
    padding: 10px 14px;
}
.msg-announcement summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; cursor: pointer; }
.msg-announcement-subject { font-weight: 700; }
.msg-announcement-meta { font-size: 13px; color: var(--gray-500); }
.msg-announcement-body { white-space: pre-wrap; margin: 8px 0; }
@media (max-width: 767.98px) {
    .msg-layout { grid-template-columns: minmax(0, 1fr); }
    .msg-layout.has-pane .msg-list-col { display: none; }
    .msg-layout:not(.has-pane) .msg-pane { display: none; }
    .msg-back { display: inline-block; }
    .msg-list-col { max-height: none; }
    .msg-bubbles { max-height: none; }
}

/* Request Shift for a signed-in non-vet (Shared/ClaimShiftButton.razor): greyed out, not just faded brand red. */
.btn.claim-btn-disabled:disabled {
    background-color: var(--gray-200, #E1E4EA);
    border-color: var(--gray-200, #E1E4EA);
    color: var(--gray-500, #6B7688);
    opacity: 1;
    pointer-events: none;
}

/* My Settings > Signature (Shared/SignatureCard.razor): a white pad with a sign-here line, and the saved one. */
.signature-pad {
    position: relative;
    max-width: 520px;
    height: 180px;
    border: 1px solid var(--gray-300, #C9CFD8);
    border-radius: var(--radius-md, 10px);
    background: #fff;
}
.signature-pad canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    z-index: 1;
}
.signature-pad-line {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 40px;
    border-bottom: 1px dashed var(--gray-300, #C9CFD8);
}
.signature-saved {
    max-width: 520px;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md, 10px);
    background: #fff;
    margin-bottom: 6px;
}
.signature-saved img { display: block; max-width: 100%; max-height: 140px; }