[data-bs-theme=light] {
    --bs-body-color: #111111;
    --bs-body-color-rgb: 17, 17, 17;
    --bs-heading-color: #000000;
    --bs-headings-color: #000000;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: #4b5563;
    --bs-secondary-color-rgb: 75, 85, 99;
    --bs-tertiary-color: #5f6b7a;
    --bs-tertiary-color-rgb: 95, 107, 122;
}

[data-bs-theme=dark] {
    --bs-body-color: #c3c9d6;
    --bs-body-color-rgb: 195, 201, 214;
    --bs-heading-color: #f5f7fa;
    --bs-headings-color: #f5f7fa;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #9aa3b5;
    --bs-secondary-color-rgb: 154, 163, 181;
    --bs-tertiary-color: #7b849a;
    --bs-tertiary-color-rgb: 123, 132, 154;
}

body {
    color: var(--bs-body-color);
}

.text-muted,
.text-body-secondary,
small,
.small,
.form-text {
    color: var(--bs-secondary-color) !important;
}

.form-control,
.form-select,
.dropdown-menu,
.card,
.table {
    color: var(--bs-body-color);
}

.form-control::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Give fields a subtle background tint so they read as inputs against a
   white/dark card instead of blending into it, and a stronger tint on
   focus so it is clear which field is active. */
.form-control,
.form-select,
.bootstrap-select > .dropdown-toggle {
    background-color: var(--bs-tertiary-bg);
    transition: background-color .15s ease;
}

[data-bs-theme=light] .form-control:focus,
[data-bs-theme=light] .form-select:focus,
[data-bs-theme=light] .bootstrap-select.open > .dropdown-toggle,
[data-bs-theme=light] .bootstrap-select > .dropdown-toggle:focus {
    background-color: var(--bs-primary-bg-subtle);
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus,
[data-bs-theme=dark] .bootstrap-select.open > .dropdown-toggle,
[data-bs-theme=dark] .bootstrap-select > .dropdown-toggle:focus {
    background-color: #333a68;
}

.app-navbar .menu-item .menu-link,
.app-navbar .menu-arrow > .menu-link,
.app-navbar .menu-inner .menu-item > .menu-link {
    color: var(--bs-heading-color);
}

.app-navbar .menu-item .menu-link > i,
.app-navbar .menu-inner .menu-item > .menu-link::after {
    color: var(--bs-secondary-color);
}

@media (min-width: 1200px) {
    .app-sidebar-end {
        display: block;
    }
}

@media (max-width: 1199.98px) {
    :has(.app-sidebar-end) .app-wrapper,
    :has(.app-sidebar-end) .footer-wrapper {
        margin-right: 0;
    }
}

.crew-rendezvous-brand {
    align-items: center;
    display: flex;
    max-width: 100%;
    width: 100%;
}

.crew-rendezvous-logo {
    display: block;
    height: auto;
    max-height: 48px;
    max-width: 100%;
    width: auto;
}

.app-header-mobile-logo {
    display: flex;
    align-items: center;
}

.app-header-mobile-logo .crew-rendezvous-logo {
    max-height: 32px;
}

.bulk-shifts-grid-header {
    display: grid;
    gap: 0.75rem;
    /* Row, Job, Quantity, Booking, Start, End, Notes - always one line on desktop:
       fixed time columns, Job and Notes share the rest */
    grid-template-columns: 44px minmax(150px, 1.2fr) 80px 115px 115px 115px minmax(150px, 1fr);
    padding: 0.85rem 1rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.bulk-shift-row {
    display: grid;
    align-items: start;
    gap: 0.75rem;
    /* Row, Job, Quantity, Booking, Start, End, Notes - always one line on desktop:
       fixed time columns, Job and Notes share the rest */
    grid-template-columns: 44px minmax(150px, 1.2fr) 80px 115px 115px 115px minmax(150px, 1fr);
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.bulk-shift-row:last-child {
    border-bottom: 0;
}

.bulk-shift-number {
    align-items: center;
    display: flex;
    min-height: 44px;
}

.bulk-shift-row .form-control,
.bulk-shift-row .bootstrap-select > .dropdown-toggle {
    min-height: 44px;
}

/* The bootstrap-select plugin (used on the Job field for its search box)
   replaces the <select> with a widget that defaults to inline-block,
   which sits beside the field's own <label> instead of stacking below
   it like the plain Quantity/Start/End/Notes controls do. Force it to
   behave like a normal block-level form control. */
.bulk-shift-row .bootstrap-select {
    display: block;
    width: 100%;
}

.bulk-shift-row .input {
    margin: 0;
}

.bulk-shift-row small.text-danger:empty {
    display: none;
}

/* Bulk Add Shifts mobile layout: each row becomes its own card and its
   fields group onto three lines instead of stacking one field per line -
   Job+Quantity, then Booking+Start+End, then Notes full width. */
@media (max-width: 991.98px) {
    .bulk-shift-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 1rem;
    }

    .bulk-shift-row .bulk-shift-number {
        flex: 0 0 auto;
        min-height: 0;
    }

    .bulk-shift-row .bulk-shift-field-job {
        flex: 3 1 55%;
        min-width: 160px;
    }

    .bulk-shift-row .bulk-shift-field-quantity {
        flex: 1 1 25%;
        min-width: 90px;
    }

    .bulk-shift-row .bulk-shift-field-booking,
    .bulk-shift-row .bulk-shift-field-start,
    .bulk-shift-row .bulk-shift-field-end {
        flex: 1 1 30%;
        min-width: 110px;
    }

    .bulk-shift-row .bulk-shift-field-notes {
        flex: 1 1 100%;
    }
}

.report-row.is-active {
    border-left: 4px solid #316aff;
    background: #f6f9ff;
}

[data-bs-theme=dark] .report-row.is-active {
    background: var(--bs-primary-bg-subtle);
}

.print-layout {
    background: #fff;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.print-report {
    padding: 16px;
}

.print-report-header {
    align-items: flex-start;
    border-bottom: 2px solid #000;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.print-report-header h1 {
    font-size: 22px;
    margin: 0 0 4px;
}

.print-report-header p,
.print-report-meta span {
    color: #374151;
    margin: 0;
}

.print-report-meta {
    display: grid;
    gap: 4px;
    text-align: right;
}

.print-report-table-wrap {
    overflow: visible;
}

.print-report-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.print-report-table th,
.print-report-table td {
    border: 1px solid #cbd5e1;
    padding: 5px;
    vertical-align: top;
    word-break: break-word;
}

.print-report-table thead th {
    background: #eef2f7;
}

.print-report-table .staff-col {
    width: 130px;
}

.event-heading {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.print-report-table dl {
    display: grid;
    gap: 1px 5px;
    grid-template-columns: 50px 1fr;
    margin: 0;
}

.print-report-table dt {
    color: #374151;
    font-weight: 600;
}

.print-report-table dd {
    margin: 0;
}

.qualification-row th {
    background: #000;
    color: #fff;
    font-size: 12px;
}

.empty-row {
    color: #374151;
    text-align: center;
}

@page {
    margin: 0.25in;
    size: landscape;
}

@media print {
    .print-report {
        padding: 0;
    }

    .print-report-table thead {
        display: table-header-group;
    }
}


/* Mobile Device Handoff - QR control pinned to the bottom of the left
   side menu. See docs/features/mobile-device-handoff.md. */

.app-menubar {
    display: flex;
    flex-direction: column;
}

.app-menubar .app-navbar {
    flex: 1 1 auto;
    min-height: 0;
}

.app-menubar-handoff {
    flex: 0 0 auto;
    padding: 18px 14px;
    text-align: center;
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, .08));
}

.app-header-group {
    align-self: center;
    margin-right: 8px;
}

.app-header-beta {
    align-self: center;
    margin-right: 12px;
    border: 0;
    cursor: pointer;
}

.ai-answers-trigger {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-right: 12px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ai-answers-trigger:hover,
.ai-answers-trigger:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, .45);
}

.app-menubar-handoff-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    padding: 0;
    margin: 0 auto;
    border: 0;
    background: none;
    cursor: pointer;
    transition: width .15s ease, height .15s ease;
}

.app-menubar-handoff-qr img {
    width: 100%;
    height: 100%;
}

.app-menubar-handoff:hover .app-menubar-handoff-qr,
.app-menubar-handoff-qr.is-expanded {
    width: 160px;
    height: 160px;
}

.app-menubar-handoff-qr--unavailable {
    color: var(--bs-secondary-color, #6b7280);
    font-size: 1.5rem;
    cursor: default;
}

.app-menubar-handoff-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.app-menubar-handoff-label {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bs-heading-color, #111111);
}

.app-menubar-handoff-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    padding: 0;
    line-height: 1;
    font-size: .9rem;
    color: var(--bs-secondary-color, #6b7280);
    transition: background-color .15s ease, color .15s ease;
}

.app-menubar-handoff-toggle:hover,
.app-menubar-handoff-toggle:focus-visible {
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, .05));
    color: var(--bs-heading-color, #111111);
}

.app-menubar-handoff-advanced {
    margin-top: 8px;
}

.app-menubar-handoff-advanced.hidden {
    display: none;
}

/* SetupCase "Responsive Table" code block - see AGENTS.md.
   Add the stack-on-sm class to a .table and a data-label attribute
   matching each column header to every <td> to make it stack on narrow
   screens instead of scrolling horizontally. */
.stack-on-sm {
    width: 100%;
}

@media (max-width: 640px) {
    .stack-on-sm thead {
        display: none;
    }

    .stack-on-sm,
    .stack-on-sm tbody,
    .stack-on-sm tr,
    .stack-on-sm td {
        display: block;
        width: 100%;
    }

    .stack-on-sm tr {
        margin: 0 0 0.75rem;
    }

    .stack-on-sm td {
        position: relative;
        padding-left: 9rem;
        text-align: left;
    }

    .stack-on-sm td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8.5rem;
        padding: 0.5rem 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* First column of every stacked row acts as that row's header band -
       a distinct background and a slightly larger size make it obvious
       where one row ends and the next begins. */
    .stack-on-sm td:first-child {
        background-color: var(--bs-tertiary-bg);
        border-radius: 0.375rem 0.375rem 0 0;
        font-size: 1.05rem;
        font-weight: 600;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Optional modifier for a stack-on-sm table: keeps the first column
       first, but moves the last column (usually Actions) right after it
       instead of leaving it at the bottom, so consecutive stacked rows
       are easier to tell apart at a glance. */
    .stack-actions-second tbody tr {
        display: flex;
        flex-direction: column;
    }

    .stack-actions-second tbody td:first-child {
        order: 0;
    }

    .stack-actions-second tbody td:last-child {
        order: 1;
    }

    .stack-actions-second tbody td:not(:first-child):not(:last-child) {
        order: 2;
    }
}

/* Event form staffing calculator (docs/features/MVP-event-types-feature.md).
   One state for all calculation fields: orange = unsaved changes, green = just saved.
   Translucent colours so light and dark mode both work. */
.calc-dirty [data-calc-field],
.calc-dirty .bootstrap-select > .dropdown-toggle {
    background-color: rgba(253, 126, 20, 0.14);
    border-color: #fd7e14;
}

/* the state colours switch instantly (no fade) so the feedback is unmistakable */
.calc-dirty [data-calc-field],
.calc-dirty .bootstrap-select > .dropdown-toggle,
.calc-done [data-calc-field],
.calc-done .bootstrap-select > .dropdown-toggle {
    transition: none;
}

/* green once the 2 s recompute has run (form) */
.calc-done [data-calc-field],
.calc-done .bootstrap-select > .dropdown-toggle {
    background-color: rgba(25, 135, 84, 0.14);
    border-color: #198754;
}

.event-calc-summary.calc-saved dd {
    background-color: rgba(25, 135, 84, 0.14);
    border-radius: 0.25rem;
}

.event-calc-summary.calc-saved {
    border-top-color: #198754 !important;
}

/* Event Type dropdown items coloured against the guest count. bootstrap-select 1.14
   copies each option's class onto its a.dropdown-item. */
.bootstrap-select .dropdown-menu a.event-type-in-range {
    background-color: rgba(25, 135, 84, 0.14);
}

.bootstrap-select .dropdown-menu a.event-type-out-of-range {
    background-color: rgba(220, 53, 69, 0.18);
}

.bootstrap-select .dropdown-menu .selected > a.event-type-in-range,
.bootstrap-select .dropdown-menu .selected > a.event-type-out-of-range {
    box-shadow: inset 4px 0 0 var(--bs-primary);
}

/* Let the searchable Event Type picker behave like a normal block form control
   (same fix as the Bulk add shifts Job picker) */
.event-type-field .bootstrap-select {
    display: block;
    width: 100%;
}

.event-type-field .bootstrap-select > .dropdown-toggle {
    min-height: 44px;
    color: var(--bs-body-color);
}

/* Budget & staffing card: text-only parts of the equations and their operators */
.calc-text {
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.calc-operator {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* One equation per line: inputs share the free width, text and operators keep theirs */
.calc-equation {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.calc-equation > * {
    flex: 0 0 auto;
}

.calc-equation > .calc-equation-input {
    flex: 1 1 0;
    min-width: 0;
}

.calc-equation .form-label {
    white-space: nowrap;
}

/* Event form: two cards stacked per column. The theme gives every card
   height: calc(100% - gutter), which only suits one card per column. */
.event-form-stack > .card {
    --bs-card-height: auto;
    height: auto;
}

/* Day grid (docs/features/MVP-day-grid-auto-assign.md): events across, staff
   down. Scrolls sideways inside its card; the staff column stays visible. */
.day-grid {
    min-width: max-content;
}

.day-grid .day-grid-staff {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 11rem;
    max-width: 14rem;
    background-color: var(--bs-body-bg);
    white-space: normal;
}

.day-grid thead .day-grid-staff {
    z-index: 3;
    background-color: var(--bs-tertiary-bg);
}

.day-grid .day-grid-event {
    min-width: 15rem;
    max-width: 18rem;
    white-space: normal;
}

.day-grid .day-grid-line {
    padding: 0.125rem 0.25rem;
    border-radius: var(--bs-border-radius-sm);
}

.day-grid .day-grid-line + .day-grid-line {
    margin-top: 0.25rem;
}

.day-grid .day-grid-conflict {
    background-color: var(--bs-danger-bg-subtle);
    outline: 1px solid var(--bs-danger);
}

.day-grid .day-grid-open-row th,
.day-grid .day-grid-open-row td {
    background-color: var(--bs-tertiary-bg);
}

.day-grid .day-grid-add .form-select {
    min-width: 0;
}

/* Cancelled shifts (docs/features/MVP-cancel-assigned-shifts.md): greyed out.
   The theme's "secondary" is orange, so grey is set explicitly. */
.badge-cancelled {
    background-color: var(--bs-gray-600);
    color: #fff;
}

.shift-cancelled > td {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-color: var(--bs-secondary-color);
    color: var(--bs-secondary-color);
}

.shift-cancelled > td:not(:last-child) {
    opacity: 0.7;
}

.day-grid .day-grid-cancelled {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
    opacity: 0.75;
}

/* Cancel not allowed yet (lowest seniority goes first): clearly grey, unlike
   the active orange Cancel. The wrapper keeps the reason tooltip working. */
.cancel-not-allowed {
    cursor: not-allowed;
}

.btn.btn-cancel-disabled,
.btn.btn-cancel-disabled:disabled {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-300);
    opacity: 1;
    pointer-events: none;
}