/* Ops theme - Central's visual language, taken from HatzalahAngular/src/assets/scss/_color.scss,
   styles.scss (.main-wrapper, .inner-wrapper), the header component and the garages module.
   Tokens are Central's names so a value can be checked against the source. */

:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-black-2: #333333;
    --color-black-3: #222F3F;
    --color-primary: #5B78ED;
    --color-primary-dark: #4762D1;
    --color-primary-1: #6885F7;
    --color-primary-2: #8198F0;
    --color-primary-light: #F4F4FF;
    --color-vilot-light: #E6EAFD;
    --color-deep-light: #F7F7F7;
    --color-secondary: #48484a;
    --color-gray: #A8B3C1;
    --color-gray-1: #E0E0E0;
    --color-gray-3: #888888;
    --color-gray-8: #F0F0F0;
    --color-gray-4: #EBEBEB;
    --color-gray-9: #FCFCFC;
    --color-vilot: #9227FB;
    --color-warning: #FD9A27;
    --color-yellow-dark: #D5A835;
    --color-success-1: #58CB79;
    --color-success-dark: #4FB030;
    --color-success: #5FA950;
    --color-danger: #CD504B;
    --color-red-light: #FDEBEB;
    --color-text: #26262B;
    --color-muted: #606071;
    --color-border: #D9D9DE;
    --color-input-border: #C4CFF9;

    /* Bootstrap hooks, so its components pick the palette up without overrides everywhere. */
    --bs-primary: #5B78ED;
    --bs-primary-rgb: 91, 120, 237;
    --bs-link-color: #5B78ED;
    --bs-link-hover-color: #4762D1;
    --bs-body-font-family: "Poppins", sans-serif;
    --bs-body-color: #26262B;
    --bs-border-radius: 4px;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

/* The page is a column that fills the viewport: header, then the content area, which hands
   its remaining height to the panel so a table can scroll inside the card instead of
   leaving dead space under it (Central's .inner-wrapper does the same). */
html, body { height: 100%; }

body {
    font-family: "Poppins", sans-serif;
    background: var(--color-primary-light);
    color: var(--color-text);
    margin: 0;
    height: 100vh;
    /* Phones: the address bar comes and goes; dvh follows it, vh does not. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ------------------------------------------------------------------ header */

.ops-header {
    background: var(--color-deep-light);
    height: 70px;
    /* A flex item in the page column: without this the header gets squeezed whenever the
       content below wants more height than the viewport has (a 500-row table does). */
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 28px;
}

.ops-header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-black-3);
}

.ops-header .brand img {
    height: 44px;
    width: auto;
}

.ops-header .brand span {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
}

.ops-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.ops-nav a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 50px;
    white-space: nowrap;
    line-height: 20px;
}

.ops-nav a:hover {
    background: var(--color-vilot-light);
    color: var(--color-primary-dark);
}

.ops-nav a.active {
    background: var(--color-primary);
    color: var(--color-white);
}

.ops-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--color-secondary);
}

.ops-user .login-user-name {
    font-weight: 500;
}

.ops-avatar-menu .dropdown-menu {
    min-width: 200px;
    font-size: 13px;
    border-color: var(--color-gray-4);
    box-shadow: 0 10px 30px rgba(34, 47, 63, .12);
}

.ops-avatar-menu .dropdown-header {
    font-weight: 600;
    color: var(--color-text);
}

.ops-avatar-menu .dropdown-item { padding: 7px 16px; }

.ops-nav .nav-icon { display: none; }

.ops-user .avatar {
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: var(--color-primary);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    /* Unit line height: with the body's 1.45 the line box, not the glyphs, is what gets
       centred, and a dotted capital (İ) reads as sitting low. */
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    /* Poppins capitals sit a hair below the centre of their line box; lift them. */
    padding-bottom: 1px;
}

/* --------------------------------------------------------------- page frame */

/* Central's .main-wrapper-content: a 75px primary band the page title sits on, then the
   light background the white panel floats over. */
.ops-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, var(--color-primary-dark) 75px, var(--color-primary-light) 75px);
    padding: 20px 30px 20px;
    overflow-y: auto;
    /* A picker gaining focus must not scroll this column to "reveal" itself. */
    overflow-anchor: none;
    scroll-padding-top: 0;
}

.ops-content > main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Pages that own a scrolling table fill the height; the rest size to their content. */
.ops-content > main > .panel.fill-height {
    flex: 1 1 auto;
    min-height: 0;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 35px;
    flex-shrink: 0;
    margin-bottom: 10px;
    color: var(--color-white);
}

.page-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    color: var(--color-white);
}

.page-title small {
    font-size: 12px;
    font-weight: 400;
    opacity: .85;
    margin-left: 8px;
}

.page-head a {
    color: var(--color-white);
}

/* Filter pills on the band (garages' In service / Out of service buttons). */
.band-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.band-filter .btn {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    border-radius: 20px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 14px;
}

.band-filter .btn:hover,
.band-filter .btn.active {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Central's .inner-wrapper_content / .grid-wrapper. */
.panel {
    background: var(--color-white);
    border-radius: 8px;
    padding: 14px 19px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
}

.panel-narrow {
    max-width: 560px;
}

.panel h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 12px;
}

/* Toolbar row above a grid: search left, actions right (grid-wrapper_header). */
.panel-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.panel-toolbar .toolbar-search {
    flex: 1 1 320px;
    position: relative;
}

.panel-toolbar .toolbar-search .form-control {
    padding-left: 32px;
    border-color: var(--color-input-border);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
}

.panel-toolbar .toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.panel-toolbar .form-check {
    margin: 0;
    font-size: 12px;
    color: var(--color-muted);
}

.grid-total {
    font-size: 10px;
    color: var(--color-muted);
    padding-top: 6px;
}

/* ---------------------------------------------------------------- controls */

.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50px;
    padding: 6px 16px;
    line-height: 20px;
}

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

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-border,
.btn-outline-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary-1);
    --bs-btn-bg: var(--color-white);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-white);
}

.btn-outline-danger {
    --bs-btn-color: #FF0000;
    --bs-btn-border-color: #FF0000;
    --bs-btn-hover-bg: #FF0000;
    --bs-btn-hover-border-color: #FF0000;
}

.btn-outline-success {
    --bs-btn-color: #1bc5bd;
    --bs-btn-border-color: #1bc5bd;
    --bs-btn-hover-bg: #1bc5bd;
    --bs-btn-hover-border-color: #1bc5bd;
}

.btn-link {
    border-radius: 0;
    padding: 0;
    font-weight: 500;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

.form-control,
.form-select {
    font-family: inherit;
    font-size: 13px;
    color: #393941;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: .5rem .85rem;
}

.form-control-sm {
    font-size: 12px;
    padding: .35rem .7rem;
}

/* Keeps Bootstrap's right padding so the chevron never sits on the text. */
.form-select-sm {
    font-size: 12px;
    padding: .35rem 2rem .35rem .7rem;
}

.form-control::placeholder {
    color: #727285;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible {
    border-color: var(--color-primary-1);
    box-shadow: 0 0 0 3px rgba(91, 120, 237, .18);
}

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

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    margin-bottom: 4px;
}

.form-text {
    font-size: 11px;
    color: var(--color-gray-3);
}

.table {
    font-size: 13px;
    color: var(--color-text);
}

.table thead th {
    background: var(--color-gray-8);
    color: var(--color-black);
    font-weight: 500;
    font-size: 12px;
    border-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .55rem .75rem;
}

.badge {
    font-weight: 500;
    border-radius: 15px;
    padding: 3px 9px;
}

.text-bg-info { background: #2C7BE5 !important; color: #fff !important; }
.text-bg-success { background: #1AD70B !important; color: #fff !important; }
.text-bg-danger { background: #FF0000 !important; color: #fff !important; }

.alert {
    border-radius: 6px;
    font-size: 13px;
}

.modal-content {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(34, 47, 63, .18);
}

.modal-header {
    background: var(--color-deep-light);
    border-bottom: 1px solid var(--color-gray-1);
    border-radius: 10px 10px 0 0;
}

.modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black-3);
}

.modal-footer {
    border-top: 1px solid var(--color-gray-1);
}

/* ------------------------------------------------------------------- grids */

/* Grid hosts. Height lives here rather than in a style attribute: the CSP allows styles only
   from files under wwwroot, and an inline attribute would be dropped silently - the grid
   would render zero rows tall and look empty. */
.ops-grid {
    flex: 1 1 auto;
    min-height: 320px;
}

.panel.fill-height {
    display: flex;
    flex-direction: column;
}

.panel.fill-height .panel-toolbar,
.panel.fill-height .grid-total { flex-shrink: 0; }

/* A plain table inside a fill-height panel: the panel stays put and the table scrolls,
   the way the grids do, instead of the whole page moving under a fixed header. */
.panel.fill-height > .panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

/* Bootstrap's .table-responsive is its own scroll container, which would pin the sticky
   header to a box that never scrolls. Horizontal overflow moves up to .panel-scroll. */
.panel.fill-height > .panel-scroll > .table-responsive { overflow: visible; }

.panel.fill-height > .panel-scroll .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-gray-8);
}

/* Central's ag-grid-overrides.scss on the balham theme. */
.ag-theme-balham {
    --ag-font-family: "Poppins", sans-serif;
    --ag-font-size: 12px;
    --ag-border-color: #ddd;
    --ag-header-background-color: var(--color-gray-8);
    --ag-header-foreground-color: var(--color-black);
    --ag-header-height: 34px;
    --ag-row-height: 32px;
    --ag-odd-row-background-color: var(--color-gray-9);
    --ag-selected-row-background-color: var(--color-primary-light);
    --ag-range-selection-border-color: var(--color-primary);
    --ag-input-focus-box-shadow: none;
    --ag-checkbox-checked-color: var(--color-primary);
}

.ag-theme-balham .ag-header-cell {
    padding: 5px 12px;
}

.ag-theme-balham .ag-header-cell-text {
    font-weight: 500;
}

.ag-theme-balham .ag-root-wrapper {
    border-radius: 6px;
}

.ag-theme-balham .ag-overlay-no-rows-wrapper {
    color: var(--color-gray-3);
}

/* ----------------------------------------------------------------- garages */

/* Central's garages module: .buses-wrapper_boxes / .buses-list. */
/* A grid rather than Central's wrapping flex row: with grid-auto-rows: 1fr every row is as
   tall as the tallest card on the board, so a card's size never depends on what happens to
   be next to it - the same card is the same size whether its neighbours are out of service
   or empty. */
/* The scrolling box is the flex child with the definite height; the grid inside it is
   auto-height. That matters: 1fr rows inside a definite-height box are sized one by one
   (any row that does not fit falls back to its own content height, so rows differ), while
   in an auto-height box every 1fr row takes the largest row's height. */
.buses-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 5px 2px 2px;
}

.buses-boxes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 20px;
}

.buses-box {
    min-width: 0;
    display: flex;
}

@media (max-width: 1400px) { .buses-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .buses-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .buses-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .buses-boxes { grid-template-columns: 1fr; } }

.buses-list {
    width: 100%;
    border: 1px solid #B7B7C2;
    border-radius: 5px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-white);
}

.buses-list_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.buses-list_number {
    padding-left: 34px;
    position: relative;
    color: #1AD70B;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    align-items: center;
    min-height: 24px;
}

.buses-list_number::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background-color: #1AD70B;
    position: absolute;
    left: 0;
}

.buses-list_number.danger-out { color: red; }
.buses-list_number.danger-out::after { background: red; }

.buses-list_status {
    font-size: 12px;
    background: #1AD70B;
    color: #fff;
    padding: 2px 8px;
    border-radius: 15px;
    line-height: 20px;
    font-weight: 500;
}

.buses-list_status.danger-out { background: red; }
.buses-list_status.mobile-in-area-status { background: #2C7BE5; }

.physical-bus-panel {
    border: 1px solid #E4E4EB;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buses-result {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 18px;
    color: var(--color-text);
}

.buses-result .bus-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.buses-result .result-value { font-weight: 600; }

/* Central reserves two lines for the address, which is the only row that wraps, so the
   rows under it start at the same offset on every card. */
.buses-result .current-location { min-height: 36px; }
.buses-result .parking-value { color: #0D6EFD; }

.pending-change-arrow {
    font-size: 13px;
    font-weight: 600;
    color: #8A6D1D;
}

.pending-change-info {
    font-size: 11px;
    color: #8A6D1D;
}

.pending-change-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
}

.pending-change-actions .btn-link { font-size: 12px; }
.pending-approve { color: #1bc5bd !important; }
.pending-deny { color: #FF0000 !important; }

.parking-spot-status {
    font-size: 12px;
    color: var(--color-muted);
}

.parking-spot-status .status-view {
    margin: 0;
    line-height: 18px;
}

.buses-action {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.buses-action .bus-btn {
    border: 1px solid var(--color-primary-1);
    color: var(--color-primary);
    text-align: center;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    padding: 4px;
    display: block;
    background: transparent;
    width: 100%;
    text-decoration: none;
}

.buses-action .bus-btn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.buses-action .make-it-active { color: #1bc5bd; border-color: #1bc5bd; }
.buses-action .make-it-active:hover { background: #1bc5bd; color: #fff; }
.buses-action .take-out-of-services { color: #FF0000; border-color: #FF0000; }
.buses-action .take-out-of-services:hover { background: #FF0000; color: #fff; }
.buses-action .mobile-in-area,
.buses-action .in-garage { color: #2C7BE5; border-color: #2C7BE5; }
.buses-action .in-garage { background: #E7F1FD; }
.buses-action .mobile-in-area:hover,
.buses-action .in-garage:hover { background: #2C7BE5; color: #fff; }

.see-in-map {
    font-size: 12px;
    color: var(--color-primary);
    text-decoration: none;
    text-align: center;
}


/* ------------------------------------------------------------- night list roster */

/* Central's member-night-list component. Tabs sit on the band beside the title. */
.night-list-tabs {
    display: flex;
    gap: 18px;
    margin-left: 16px;
}

.night-list-tabs button {
    border: none;
    background: transparent;
    padding: 2px 0 5px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.night-list-tabs button.active {
    color: var(--color-white);
    border-bottom-color: var(--color-white);
}

.night-list-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
}

.night-list-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.night-list-filter {
    min-width: 220px;
}

.night-list-filter .filter-label {
    display: block;
    font-size: 12px;
    color: var(--color-primary);
    margin-bottom: 4px;
}


.night-list-filter.show-all-filter {
    margin-inline-start: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
}

.night-list-filter.add-member {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.show-all-toggle {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.show-all-hint {
    font-size: 11px;
    color: var(--color-gray-3);
    max-width: 260px;
}

.add-member-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.night-list-truncated {
    font-size: 12px;
    color: var(--color-black-2);
    background: #FFF9F0;
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.night-list-table-wrapper {
    overflow-y: scroll;
    /* The gutter is reserved whether or not the list is long enough to scroll, so the
       columns sit in the same place at 8 rows as at 541 and line up with the coverage row. */
    scrollbar-gutter: stable;
    flex: 1 1 auto;
    min-height: 240px;
    border-left: 1px solid var(--color-gray-4);
    border-right: 1px solid var(--color-gray-4);
}

/* Same reserved gutter under the scrolling table, so its columns match the ones above. */
.coverage-wrapper {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    flex-shrink: 0;
}

.coverage-wrapper::-webkit-scrollbar { background: transparent; }

.night-list-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.night-list-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 5px 8px;
    background: var(--color-primary-light);
}

.night-list-table td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--color-gray-4);
    text-align: center;
    vertical-align: middle;
}

.night-list-table .unit-col {
    text-align: left;
    width: 320px;
    white-space: nowrap;
}

.night-list-table .day-col { width: auto; }
.night-list-table .action-col { width: 40px; }

.night-list-table .empty-row {
    height: 200px;
    text-align: center;
    color: var(--color-gray-3);
    padding: 24px 8px;
}

.unit-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black-2);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.unit-name.is-different-division { color: var(--color-primary); }

.night-list-table .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-expertise {
    background: var(--color-vilot-light);
    color: var(--color-vilot);
}

.badge-unavailable {
    background: #FFEFD6;
    color: var(--color-yellow-dark);
    border: 1px solid var(--color-warning);
    white-space: nowrap;
}

.badge-scheduled {
    background: transparent;
    color: var(--color-gray-3);
    border: 1px dashed var(--color-gray-1);
    white-space: nowrap;
}

.day-cell {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-1);
    background: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: transparent;
}

.day-cell:hover:not(:disabled) { border-color: var(--color-primary-1); }
.day-cell:disabled { cursor: default; }
.day-cell.is-saving { cursor: wait; opacity: .5; }
.day-cell.state-off { background: var(--color-white); }

.day-cell.state-onCall {
    background: #E1F6E4;
    border-color: var(--color-success-1);
    color: var(--color-success-dark);
}

.day-cell.state-unavailable {
    background: #FFEFD6;
    border-color: var(--color-warning);
    color: var(--color-yellow-dark);
}

/* Tinted end to end so a member who is away tonight cannot be read as on call. */
tr.is-unavailable > td { background: #FFF9F0; }
tr.is-unavailable > td.unit-col { box-shadow: inset 3px 0 0 var(--color-warning); }

.kebab-btn {
    border: none;
    background: transparent;
    color: var(--color-gray-3);
    cursor: pointer;
    padding: 0 6px;
    font-size: 16px;
    line-height: 1;
}

.dropdown-menu { font-size: 13px; }

.coverage-table {
    border-left: 1px solid var(--color-gray-4);
    border-right: 1px solid var(--color-gray-4);
    border-bottom: 1px solid var(--color-gray-4);
}

.coverage-row td {
    background: var(--color-primary-light);
    border-bottom: none;
    border-top: 1px solid var(--color-gray-4);
}

.coverage-count {
    font-weight: 700;
    font-size: 14px;
}

.coverage-count.text-success { color: var(--color-success-dark) !important; }
.coverage-count.text-danger { color: var(--color-danger) !important; }

.coverage-unavailable {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-yellow-dark);
    white-space: nowrap;
}

.night-list-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-gray-4);
    flex-shrink: 0;
}

.night-list-toolbar { flex-shrink: 0; }

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-gray-3);
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-1);
    display: inline-block;
}

.legend-swatch.state-onCall { background: #E1F6E4; border-color: var(--color-success-1); }
.legend-swatch.state-off { background: var(--color-white); }
.legend-swatch.state-unavailable { background: #FFEFD6; border-color: var(--color-warning); }
.legend-swatch.state-unavailable-row { background: #FFF9F0; border-color: var(--color-warning); }
.legend-swatch.state-different-division { background: var(--color-white); border-color: var(--color-primary); }

/* --------------------------------------------------------------- ops-select */

/* ng-select as Central styles it (_form.scss .ng-select-control): 8px radius, 34px box,
   light chips, primary highlight on the marked option. */
.ops-select {
    position: relative;
    width: 100%;
    font-size: 13px;
}

.ops-select-box {
    display: flex;
    align-items: center;
    min-height: 34px;
    max-height: 64px;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    background: var(--color-white);
    padding: 3px 26px 3px 9px;
    cursor: text;
    position: relative;
}

.ops-select.open .ops-select-box {
    border-color: var(--color-primary-1);
    box-shadow: 0 0 0 3px rgba(91, 120, 237, .12);
}

.ops-select-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ops-select-input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1 1 60px;
    min-width: 60px;
    font: inherit;
    color: var(--color-text);
    padding: 3px 0;
}

.ops-select-input::placeholder { color: #999; }

.ops-select-single {
    color: var(--color-text);
    padding: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-select-chip {
    display: inline-flex;
    align-items: center;
    background: #ebf5ff;
    border: 1px solid #c2e0ff;
    border-radius: 2px;
    font-size: 12px;
    color: #333;
    line-height: 18px;
}

.ops-select-chip-remove {
    padding: 0 5px;
    border-right: 1px solid #c2e0ff;
    cursor: pointer;
}

.ops-select-chip-remove:hover { background: #d8eafd; }
.ops-select-chip-label { padding: 0 6px; }

.ops-select-clear {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #999;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.ops-select-clear:hover { color: var(--color-danger); }

.ops-select-arrow {
    position: absolute;
    right: 9px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #999;
}

.ops-select.open .ops-select-arrow {
    border-top: none;
    border-bottom: 5px solid #999;
}

.ops-select-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 1050;
    background: var(--color-white);
    border: 1px solid #e4e6ef;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .1);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.ops-select.open .ops-select-panel { display: block; }

.ops-select-option {
    padding: 4px 12px;
    margin-bottom: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-select-option.selected {
    background: #e6ebff;
    color: var(--color-primary);
    font-weight: 600;
}

.ops-select-option.marked,
.ops-select-option:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.ops-select-empty {
    padding: 6px 12px;
    color: var(--color-gray-3);
}

/* ------------------------------------------------------------------ dialogs */

/* Central's app-dialog: centred title with a closer, plain body, bordered footer whose
   only action is Save. Bootstrap's modal supplies the backdrop and animation. */
.ops-dialog .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(34, 47, 63, .18);
}

.ops-dialog .dialog-header {
    text-align: center;
    position: relative;
    padding: 15px 32px 20px;
}

.ops-dialog .dialog-header_title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #26262B;
}

.ops-dialog .dialog-header_closer {
    position: absolute;
    top: 17px;
    right: 34px;
    border: 0;
    background: transparent;
    color: #26262B;
    padding: 4px;
    cursor: pointer;
    line-height: 0;
}

.ops-dialog .dialog-body {
    padding: 0 32px 3px;
}

.ops-dialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #D9D9DE;
    min-height: 64px;
}

.ops-dialog .form-group { margin-bottom: 16px; }

.ops-dialog .control-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.ops-dialog .control-label .optional {
    font-weight: 400;
    color: var(--color-gray-3);
}

.ops-dialog .form-control {
    font-size: 14px;
    padding: .6rem 1rem;
    border-radius: 4px;
    border-color: #e4e6ef;
}

.ops-dialog .ops-select-box {
    min-height: 40px;
    border-radius: 4px;
    padding: 8px 26px 8px 9px;
}

.ops-select-no-arrow .ops-select-arrow { display: none; }

.btn-xl {
    min-width: 82px;
    height: 36px;
    padding: 6px 20px;
    font-size: 14px;
}

.btn-primary:disabled {
    background: var(--color-primary-2);
    border-color: var(--color-primary-2);
    opacity: 1;
}

.day-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.day-checkbox-grid .form-check {
    min-height: auto;
    padding-left: 1.8em;
    line-height: 21px;
    margin: 0;
}

.day-checkbox-grid .form-check-input {
    border-color: #e4e6ef;
    border-radius: 4px;
}

.day-checkbox-grid .form-check-label {
    font-size: 12px;
    color: var(--color-text);
}

.member-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--color-primary-light);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.member-summary .member-badge { font-weight: 600; color: #BABABA; }
.member-summary .member-name { font-weight: 600; color: var(--color-black-2); }

.member-summary .badge-expertise {
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preset {
    border: 1px solid var(--color-gray-1);
    background: var(--color-white);
    color: #BABABA;
    border-radius: 999px;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
}

.preset.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
}

.date-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.clear-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--color-danger);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
}

.range-note {
    font-size: 12px;
    color: var(--color-gray-3);
    margin: 0 0 12px;
}

.range-note-error { color: var(--color-danger); }

/* ----------------------------------------------------------------- snackbar */

/* Central's SnackbarComponent, positioned the way its pages open it: bottom centre. */
.ops-snackbar-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 2000;
}

.snackbar {
    pointer-events: auto;
    max-width: 360px;
    padding: 20px 15px 20px 60px;
    border-radius: 4px;
    background: #ffffff url("../images/alert-icon.png") no-repeat 15px center;
    box-shadow: 0 12px 30px rgba(153, 153, 153, .1);
    color: #383838;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
}

.snackbar.show {
    opacity: .92;
    transform: translateY(0);
}

.snackbar:hover { opacity: 1; }
.snackbar.snackbar-success { background-color: #51A351; color: #fff; }
.snackbar.snackbar-error { background-color: #BD362F; color: #fff; }
.snackbar.snackbar-warning { background-color: #ffa800; color: #fff; }
.snackbar.snackbar-info { background-color: #2F96B4; color: #fff; }

/* ------------------------------------------------------- grid wrapper (Central) */

/* grid-wrapper-header: search box with an icon, actions on the right (pill buttons). */
.grid-wrapper_header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.grid-wrapper_header-search {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    padding: 0 10px;
    min-height: 36px;
    background: var(--color-white);
}

.grid-wrapper_header-search .search-icon {
    color: #667085;
    display: inline-flex;
}

.grid-wrapper_header-search .search-input {
    flex: 1;
    box-shadow: none;
    padding-left: 4px;
}

.grid-wrapper_header-search .search-input:focus { box-shadow: none; }

.grid-wrapper_header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.font-12 { font-size: 12px; }
.font-500 { font-weight: 500; }

.grid-wrapper_footer {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-top: 6px;
    flex-shrink: 0;
}

.grid-wrapper_footer .grid-total {
    font-size: 10px;
    padding: 0;
    white-space: nowrap;
}

.grid-note {
    font-size: 10px;
    color: var(--color-gray-3);
}

/* The rest of Central's ag-grid-overrides.scss: a two-row header (column names over the
   floating filters), a thin scrollbar, search-style filter inputs. */
/* Outranks balham's own ".ag-ltr input[class^=ag-][type=text] { padding-left }" (0,4,1),
   which otherwise wins over a class-only selector and puts the typed text on the icon. */
.ag-theme-balham .ag-ltr .ag-header-row-column-filter .ag-floating-filter-input input.ag-input-field-input {
    border-radius: 3px;
    height: 20px;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 6px center;
    padding-left: 20px;
}

.ag-theme-balham .ag-floating-filter-button { display: none; }

.ag-theme-balham .ag-cell {
    display: flex;
    align-items: center;
}

.ag-theme-balham .ag-cell-label-container { padding: 0; }

.ag-theme-balham ::-webkit-scrollbar { width: 8px; height: 8px; }
.ag-theme-balham ::-webkit-scrollbar-track { background: #f4f4f4; border-radius: 10px; }
.ag-theme-balham ::-webkit-scrollbar-thumb { background: #e1dede; border-radius: 10px; }

/* Material slide toggle, as drawn by Central's ToggleCellRendererComponent. */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 14px;
    border-radius: 7px;
    background: rgba(0, 0, 0, .38);
    vertical-align: middle;
}

.switch-toggle > span {
    position: absolute;
    top: -3px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fafafa;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    transition: left .15s ease;
}

.switch-toggle.on { background: rgba(91, 120, 237, .5); }
.switch-toggle.on > span { left: 17px; background: var(--color-primary); }

.grid-action-icon {
    border: 0;
    background: transparent;
    color: var(--color-primary-dark);
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

.grid-action-icon:hover { color: var(--color-primary); }

/* ---------------------------------------------------------- dialog controls */

/* Buttons inside Central's app-dialog are 4px-radius, not pills. */
.ops-dialog .btn { border-radius: 4px; text-transform: capitalize; }
.ops-dialog .btn-border { border-radius: 4px; }
.ops-dialog .rounded-pill { border-radius: 50px !important; }

.ops-dialog .btn-dark-outline {
    background: transparent;
    color: #4B4B59;
    border: 1px solid #D9D9DE;
    padding: 0.625rem 1.2rem;
}

.ops-dialog .btn-dark-outline:hover { color: var(--color-primary-dark); }

.ops-dialog .btn-danger-link {
    background: transparent;
    border: 0;
    color: var(--color-danger);
    font-weight: 600;
    padding: 0;
}

.ops-dialog .dialog-footer .flex-1 { flex: 1; }

.ops-dialog .modal-lg { max-width: 900px; }

.ops-dialog .form-static {
    font-size: 13px;
    color: var(--color-text);
    padding: .6rem 0;
}

/* Labelled Material slide toggle (the "Hide On Map" field). */
.switch-toggle-input {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    cursor: pointer;
}

.switch-toggle-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-toggle-input input:checked + .switch-toggle { background: rgba(91, 120, 237, .5); }
.switch-toggle-input input:checked + .switch-toggle > span { left: 17px; background: var(--color-primary); }
.switch-toggle-input input:focus-visible + .switch-toggle { outline: 2px solid var(--color-primary-1); outline-offset: 4px; }

/* Radios chip control on the bus form: Central's .custom-dropdown with .bus-id chips. */
.custom-dropdown {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    border: 1px solid #e4e6ef;
    border-radius: 4px;
    background: var(--color-white);
    padding: 6px 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.radio-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.bus-id {
    display: inline-flex;
    align-items: center;
    background: var(--color-vilot-light);
    color: var(--color-primary);
    border-radius: 24px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}

.bus-id-plus {
    display: inline-flex;
    align-items: center;
    background: var(--color-gray-8);
    color: var(--color-muted);
    border-radius: 24px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* Central's BusRadioDropdownPopUpComponent. */
.modal-sm-480 { max-width: 480px; }

.radios-popup {
    position: relative;
    padding: 18px 20px 14px;
    border-radius: 8px;
    border: 0;
}

.radios-popup_close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: 0;
    background: transparent;
    color: #26262B;
    line-height: 0;
    padding: 4px;
    cursor: pointer;
}

.radios-popup_title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black-3);
    margin-bottom: 14px;
}

.radios-popup_add { margin-bottom: 14px; }

.radios-popup_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 16px;
}

.radios-popup_chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-vilot-light);
    color: var(--color-primary);
    border-radius: 24px;
    padding: 4px 8px 4px 12px;
    font-size: 12px;
    font-weight: 500;
}

.radios-popup_remove {
    border: 0;
    background: transparent;
    color: #9090A0;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.radios-popup_empty {
    font-size: 12px;
    color: var(--color-gray-3);
    align-self: center;
}

/* ------------------------------------------------------------ authentication */

/* Central's _auth-card.scss: full-bleed agency photo, the card to the right. */
.auth-body {
    display: block;
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

/* The card's tokens live on :root, not on .authentication: the same fields are used on
   the signed-in change-password page, and a var() that resolves to nothing there takes
   the whole border declaration with it. */
:root {
    --auth-ink: #22222b;
    --auth-ink-2: #5a5a6b;
    --auth-ink-3: #8a8a9b;
    --auth-line: #d9d9de;
    --auth-note-bg: #f2f3f8;
    --auth-danger: #c0392f;
}

.authentication {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 40px 0;
    overflow: hidden;
    background: #1b2134;
}

.auth-visual { position: absolute; inset: 0; }

.auth-visual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin-right: 12vw;
    padding: 38px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--auth-ink);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 32px 70px -22px rgba(4, 7, 13, .7), 0 3px 8px rgba(4, 7, 13, .22);
}

@media (max-width: 700px) {
    .authentication { justify-content: center; padding: 24px 16px; }
    .auth-card { margin-right: 0; }
}

.auth-card__head { display: flex; flex-direction: column; gap: 6px; }

.auth-card__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
}

.auth-card__subtitle { margin: 0; font-size: 14px; color: var(--auth-ink-2); }

.auth-form { display: flex; flex-direction: column; gap: 18px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-field__label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-ink-2);
}

/* Label on the left, a small link (Forgot password?) on the right. */
.auth-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.auth-link:hover { color: var(--color-primary-dark); text-decoration: underline; }

.auth-field__wrap { position: relative; display: flex; }

.auth-field__input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--auth-ink);
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-field__input--reveal { padding-right: 44px; }
.auth-field__input:hover { border-color: #c2c2cc; }

.auth-field__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.auth-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--auth-ink-3);
    cursor: pointer;
}

.auth-field__toggle:hover { color: var(--auth-ink-2); }
.auth-field__toggle .eye-off { display: none; }
.auth-field__toggle[aria-pressed="true"] .eye { display: none; }
.auth-field__toggle[aria-pressed="true"] .eye-off { display: inline; }

.auth-field__error { font-size: 12px; color: var(--auth-danger); }
.auth-field__error:empty { display: none; }

.auth-btn {
    min-height: 48px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color .15s ease;
}

.auth-btn--primary { background: var(--color-primary); color: #fff; }
.auth-btn--primary:hover { background: var(--color-primary-dark); }

/* Secondary on purpose (Central): Cancel is an alternative route, not a second primary action. */
.auth-btn--secondary {
    background: #fff;
    color: var(--auth-ink, #22222b);
    border-color: var(--auth-line, #d9d9de);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.auth-btn--secondary:hover { background: #fafafc; border-color: #c2c2cc; color: var(--auth-ink, #22222b); }

/* Links styled as buttons share the button box; centring the text is what a <button> does by default. */
a.auth-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Two buttons sharing a row, e.g. Submit / Cancel. */
.auth-actions { display: flex; gap: 12px; }
/* Content-based rather than equal halves: "Set password & sign in" must not wrap next to "Cancel". */
.auth-actions > * { flex: 1 1 auto; min-width: 0; white-space: nowrap; }

.auth-card__head--center { text-align: center; align-items: center; }

.auth-field__hint { margin: 2px 0 0; font-size: 12px; color: var(--auth-ink-3, #8a8a9b); }

@media (max-width: 480px) {
    .auth-actions { flex-direction: column; }
}

.auth-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
    background: var(--auth-note-bg, #f2f3f8);
    color: var(--auth-ink-2, #5a5a6b);
}

.auth-note--error { background: var(--color-red-light); color: var(--auth-danger, #c0392f); }

.auth-note__icon {
    flex: 0 0 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: var(--auth-ink-3, #8a8a9b);
    color: #fff;
}

.auth-note--error .auth-note__icon { background: var(--auth-danger, #c0392f); }

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--auth-line);
}

.auth-brand__logo { height: 44px; width: auto; }

.auth-brand__app {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 8px;
    padding: 4px 12px;
    line-height: 22px;
}

/* Centred narrow pages (one-time password, access denied, validation fallbacks). */
.panel-centered {
    margin: 24px auto 0;
    padding: 28px 32px;
}

/* A pill on the blue band, like the garages filters, for the page's one action. */
.band-btn {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
}

.band-btn:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.ops-dialog .form-control { font-size: 14px; }
.ops-dialog .form-text { font-size: 11px; color: var(--color-gray-3); }
.ops-dialog .auth-note { margin-top: 4px; }

/* ---------------------------------------------------------------- permissions
   One line per permission grouped by module, divisions as chips, a summary column and a
   fixed save bar. Same tokens as the rest of the portal. */
.perm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
    padding-bottom: 76px; /* room for the fixed bar */
}

.perm-panel { padding: 0; overflow: hidden; }

.perm-lead {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-gray-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.perm-lead p { margin: 0; color: var(--color-muted); font-size: 13px; }
.perm-legend { display: flex; gap: 14px; font-size: 12px; color: var(--color-gray-3); }
.perm-legend_swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.perm-legend_swatch--division { background: #ebf5ff; border: 1px solid #c2e0ff; }
.perm-legend_swatch--granted { background: #e6f6ec; }
.perm-legend_swatch--changed { background: #fbf1dc; }

.perm-module { border-bottom: 1px solid var(--color-gray-4); }
.perm-module:last-child { border-bottom: 0; }

.perm-module_head,
.perm-row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 150px;
    align-items: center;
    padding: 8px 18px;
}

.perm-module_head {
    padding: 10px 18px;
    background: var(--color-gray-8);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 600;
}

.perm-module_count { text-align: right; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--color-gray-3); }
.perm-module_count em { font-style: normal; color: #b7791f; }

.perm-row { min-height: 52px; border-top: 1px solid var(--color-gray-4); }
.perm-row:first-of-type { border-top: 0; }
.perm-row--off .perm-scope { opacity: .45; pointer-events: none; }
.perm-row--changed { background: #fffdf7; }
.perm-row--empty .perm-chips_picker .ops-select-box { border-color: #b7791f; }

.perm-name { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.perm-name input { width: 16px; height: 16px; accent-color: var(--color-primary); margin: 0; flex-shrink: 0; }
.perm-name_label { font-weight: 500; font-size: 13px; }
.perm-name_hint { display: block; font-size: 11px; color: var(--color-gray-3); }
.perm-kind { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: var(--color-gray-8); color: var(--color-muted); font-weight: 500; margin-left: 4px; vertical-align: 1px; }

.perm-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 12px; }
.perm-implied { font-size: 12px; color: var(--color-gray-3); }

.perm-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-muted); cursor: pointer; margin: 0; white-space: nowrap; }
.perm-switch input { display: none; }
.perm-switch_track { width: 30px; height: 16px; border-radius: 8px; background: #c9c9d4; position: relative; transition: background .15s; flex-shrink: 0; }
.perm-switch_track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.perm-switch input:checked + .perm-switch_track { background: var(--color-primary); }
.perm-switch input:checked + .perm-switch_track::after { left: 16px; }
.perm-switch input:disabled + .perm-switch_track { opacity: .6; }

.perm-chips { flex: 1 1 260px; min-width: 0; }
.perm-chips_all {
    display: none;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px dashed var(--color-gray-4);
    border-radius: 4px;
    background: var(--color-gray-8);
    color: var(--color-gray-3);
    font-size: 12px;
}
.perm-chips--all .perm-chips_picker { display: none; }
.perm-chips--all .perm-chips_all { display: block; }

.perm-state { text-align: right; }
.perm-tag { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.perm-tag--ok { background: #e6f6ec; color: #2e9e5b; }
.perm-tag--none { background: var(--color-gray-8); color: var(--color-gray-3); }
.perm-tag--changed { background: #fbf1dc; color: #b7791f; }

.perm-side { position: sticky; top: 0; display: grid; gap: 14px; }
.perm-card { padding: 14px 16px; }
.perm-card_title { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }
.perm-note { font-size: 11px; color: var(--color-gray-3); margin: 6px 0 0; }

.perm-who { display: flex; align-items: center; gap: 12px; }
.perm-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.perm-who_name { font-weight: 600; font-size: 14px; }
.perm-who_meta { font-size: 12px; color: var(--color-gray-3); word-break: break-all; }
.perm-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; margin: 12px 0 0; }
.perm-kv dt { color: var(--color-gray-3); font-weight: 400; }
.perm-kv dd { margin: 0; }

.perm-effective { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.perm-effective li { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 12px; align-items: baseline; }
.perm-effective_module { font-weight: 600; }
.perm-effective_divs { display: flex; flex-wrap: wrap; gap: 4px; }
.perm-effective_none { color: var(--color-gray-3); }
.perm-mini { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--color-gray-8); color: var(--color-muted); }
.perm-mini--edit { background: #ebf5ff; color: var(--color-primary-dark); font-weight: 500; }

.perm-copy { display: flex; gap: 8px; margin-top: 10px; }
.perm-copy select { flex: 1; min-width: 0; }

.perm-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: #fff;
    border-top: 1px solid var(--color-gray-4);
    padding: 12px 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 16px rgba(20, 20, 60, .06);
}
.perm-bar_changes { color: var(--color-muted); font-size: 12px; }
.perm-bar_changes b { color: #b7791f; font-weight: 600; }
.perm-bar_spacer { flex: 1; }

@media (max-width: 1100px) {
    .perm-layout { grid-template-columns: minmax(0, 1fr); }
    .perm-side { position: static; }
    .perm-module_head, .perm-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .perm-scope { padding-right: 0; }
    .perm-chips { min-width: 0; }
    .perm-state, .perm-module_count { text-align: left; }
}


/* =============================================================== phone layer
   Everything above is Central's desktop. This layer, last so it wins ties, folds the same
   markup for phones and tablets: the header at 900px, the content at 768px, the fine
   detail at 600px and the dialogs at 576px (Bootstrap's own phone breakpoint). Nothing
   here touches a viewport wider than 900px. */

/* A narrow desktop window: the name folds into the avatar's menu and the pills tighten,
   so five entries and the two buttons still share one row. */
@media (max-width: 1100px) {
    .ops-header { gap: 16px; padding: 0 16px; }
    .ops-user .login-user-name { display: none; }
    .ops-nav a { padding: 8px 11px; }
}

/* Under 1000px the roster runs out of room for its three-part toolbar and the full day
   names: two columns (Division beside the member search, Show all beside Add member),
   SHABBOS as SHAB (data-short), "1 unavailable" as "1 away". */
@media (max-width: 1000px) {
    /* The roster toolbar as two columns: Division beside the member search, the Show all
       toggle beside Add member. Below 768px the phone rules restack it further. */
    .night-list-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 10px 16px;
    }

    .night-list-filter { min-width: 0; }
    .night-list-filter.show-all-filter { margin: 0; order: 3; }
    .night-list-filter.add-member { display: contents; }
    .night-list-filter.add-member > #nl-member { order: 2; }
    .add-member-trigger { order: 4; justify-self: end; }

    /* "1 unavailable" under a coverage count runs into the next column here. */
    .coverage-unavailable-word { display: none; }
    .coverage-unavailable::after { content: " away"; }

    /* SHABBOS does not fit a day column this narrow; data-short does. */
    .night-list-table th.day-col { font-size: 0; }

    .night-list-table th.day-col::before {
        content: attr(data-short);
        font-size: 11px;
        letter-spacing: .06em;
    }
}

/* Tablets: brand and user on the first row, the menu as a swipeable pill row under them. */
@media (max-width: 900px) {
    .ops-header {
        height: auto;
        flex: 0 0 auto;
        flex-wrap: wrap;
        padding: 8px 16px 0;
        gap: 4px 10px;
        border-bottom: 1px solid var(--color-gray-4);
    }

    .ops-header .brand { order: 1; gap: 10px; }
    .ops-header .brand img { height: 36px; }

    .ops-user { order: 2; margin-left: auto; gap: 8px; }
    .ops-user .login-user-name { display: inline; }

    .ops-nav {
        order: 3;
        flex: 1 0 100%;
        margin: 0 -16px;
        padding: 4px 16px 8px;
        gap: 4px;
        scrollbar-width: none;
    }

    .ops-nav::-webkit-scrollbar { display: none; }

    .ops-nav a {
        padding: 7px 14px;
        font-size: 13px;
    }

}

/* Phones: a one-row header with the avatar as the account menu, and the pages as a tab
   bar along the bottom, icons over labels, where the thumb already is. */
@media (max-width: 768px) {
    :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom)); }

    .ops-header {
        flex-wrap: nowrap;
        padding: 8px 16px;
        gap: 12px;
        border-bottom: 1px solid var(--color-gray-4);
    }

    .ops-user .login-user-name,
    .ops-user .btn,
    .ops-user > form { display: none; }

    .ops-user .avatar {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .ops-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        order: 0;
        flex: none;
        margin: 0;
        box-sizing: border-box;
        height: var(--tabbar-h);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        display: flex;
        justify-content: space-around;
        gap: 0;
        overflow: visible;
        background: var(--color-white);
        border-top: 1px solid var(--color-gray-4);
        box-shadow: 0 -6px 20px rgba(34, 47, 63, .08);
    }

    .ops-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 5px 2px 4px;
        border-radius: 12px;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--color-gray-3);
        background: transparent;
    }

    .ops-nav a span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ops-nav .nav-icon {
        display: block;
        width: 24px;
        height: 24px;
    }

    .ops-nav a:hover { background: transparent; color: var(--color-primary-dark); }

    .ops-nav a.active {
        background: transparent;
        color: var(--color-primary);
        font-weight: 600;
    }

    .ops-nav a.active .nav-icon { stroke-width: 2.4; }

    /* Whatever sits at the bottom of the page moves up over the bar. The room under the
       content is padding on main, not on the scroll container: Chrome shrinks a sticky
       element's box by the scroller's own padding, which would float the coverage strip
       above the bar. */
    .ops-content > main { padding-bottom: calc(var(--tabbar-h) + 16px); }
    .perm-bar { bottom: var(--tabbar-h); }
    .ops-snackbar-host { bottom: calc(var(--tabbar-h) + 12px); }
    .modal-dialog { z-index: 1; }
}

/* Content frame, cards, tables, the roster. */
@media (max-width: 768px) {
    /* The primary band becomes the page head's own background, so it grows with a wrapped
       title row instead of being a fixed 75px stripe the content runs over. The panel still
       overlaps its lower edge by 12px, which is what makes it read as floating. */
    .ops-content {
        padding: 0 12px 0;
        background: var(--color-primary-light);
    }

    .page-head {
        margin: 0 -12px;
        padding: 14px 16px 26px;
        min-height: 0;
        flex-wrap: wrap;
        gap: 8px 12px;
        background: var(--color-primary-dark);
    }

    .ops-content > main { margin-top: -14px; }

    .page-title { font-size: 18px; }

    .page-title small {
        display: block;
        margin: 3px 0 0;
    }

    .page-head > .small { font-size: 12px; }

    /* The garages filters: one swipeable row on the band. */
    .band-filter {
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .band-filter::-webkit-scrollbar { display: none; }
    .band-filter .btn { flex-shrink: 0; }

    .panel {
        padding: 12px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(34, 47, 63, .06);
    }

    .panel-centered { margin-top: 0; padding: 20px 16px; }

    /* Pages marked .mobile-flow (and the roster) scroll as one page here: a list inside a
       box inside a page is two scrollbars fighting under a thumb. Grid pages (buses) keep
       the desktop arrangement; ag-Grid scrolls itself. */
    .ops-content > main:has(> .panel.mobile-flow),
    .ops-content > main:has(> .panel.night-list-card) {
        flex: 1 0 auto;
        min-height: 0;
    }

    .ops-content > main > .panel.fill-height.mobile-flow,
    .ops-content > main > .panel.night-list-card { flex: 0 0 auto; }

    .panel.fill-height.mobile-flow > .panel-scroll { overflow: visible; }
    .panel.fill-height.mobile-flow > .panel-scroll .table thead th { position: static; }
    .mobile-flow .buses-scroll { overflow: visible; padding: 2px 0; }

    /* A wide table (.table-stack) turns into one block per row with its column names down
       the left; a narrow one stays a table. */
    .mobile-flow .table-responsive { overflow: visible; }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td { display: block; }

    .table-stack thead { display: none; }

    .table-stack tr {
        padding: 10px 0 12px;
        border-bottom: 1px solid var(--color-gray-4);
    }

    .table-stack > :not(caption) > * > * {
        padding: 3px 0;
        border: 0;
        background: transparent;
    }

    /* Flex, not grid: a cell's text and its inline "Edit" button are separate items and
       must share the value column, which a two-column grid would split. */
    .table-stack td[data-label] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        text-align: left !important;
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 84px;
        font-size: 11px;
        font-weight: 500;
        color: var(--color-gray-3);
    }

    .table-stack td.row-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 10px;
        white-space: normal !important;
    }

    .table-stack td.row-actions form { display: inline; }

    /* ---------------------------------------------------------------- garages
       One column, each card its own height (the desktop's equal rows would leave the
       bottom button floating in dead space), the inner panel tinted instead of boxed, and
       the actions side by side where a thumb reaches them. */
    .buses-boxes {
        grid-auto-rows: auto;
        gap: 12px;
    }

    .buses-list {
        padding: 12px;
        gap: 10px;
        border-color: var(--color-gray-4);
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(34, 47, 63, .05);
    }

    .buses-list_number { font-size: 16px; }

    .physical-bus-panel {
        border: 0;
        border-radius: 10px;
        padding: 10px 12px 12px;
        background: var(--color-primary-light);
        gap: 10px;
    }

    .buses-result { gap: 4px; font-size: 13px; }
    .buses-result .current-location { min-height: 0; }
    .buses-result .result-value { min-width: 0; overflow-wrap: anywhere; }
    .pending-change-actions { margin-left: 0; }

    .buses-action {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .buses-action .bus-btn {
        flex: 1 1 45%;
        width: auto;
        padding: 8px 6px;
        font-size: 13px;
    }

    .buses-action .see-in-map {
        flex: 1 1 45%;
        padding: 8px 6px;
        border: 1px solid var(--color-primary-1);
        border-radius: 50px;
        font-size: 13px;
        font-weight: 500;
        line-height: 20px;
    }

    .parking-spot-status { padding: 0 2px; }

    /* Grid pages: search on its own line, the actions under it. */
    .grid-wrapper_header { gap: 8px 10px; }
    .grid-wrapper_header-search { flex: 1 1 100%; }
    .grid-wrapper_header-actions { margin-left: 0; }
    .ops-grid { min-height: 60vh; }

    /* Permissions. */
    .perm-lead,
    .perm-module_head,
    .perm-row { padding-left: 12px; padding-right: 12px; }
    .perm-bar { padding: 10px 12px; gap: 8px; }
    .perm-bar_changes { font-size: 11px; line-height: 1.25; }
    .perm-bar .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
    .perm-bar .btn-xl { min-width: 0; }
    .perm-layout { gap: 12px; padding-bottom: 84px; }

    /* iOS zooms into any field smaller than 16px on focus. */
    .form-control,
    .form-select,
    .ops-select-input,
    .ops-select-single,
    .auth-field__input { font-size: 16px; }

    .snackbar {
        max-width: calc(100vw - 32px);
        padding: 16px 15px 16px 56px;
    }

    /* ---------------------------------------------------------------- roster
       The table is the same nine cells per row, laid out as a card: the name across the
       top with the row menu at its right, the seven days as a strip under it. The day
       names sit in one sticky strip over the list and the coverage in one under it, so
       both stay in view through five hundred rows. */
    .night-list-card { padding: 0; }

    .night-list-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        margin: 0;
        padding: 12px 12px 10px;
    }

    .night-list-filter { min-width: 0; }
    .night-list-filter .filter-label { display: none; }
    .night-list-filter:first-child { grid-column: 1 / -1; }

    .night-list-filter.show-all-filter {
        order: 3;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .show-all-hint { font-size: 10px; max-width: none; }

    /* Its two children join the grid directly: the search box on a full line, the button
       beside the toggle. */
    .night-list-filter.add-member { display: contents; }
    .night-list-filter.add-member > #nl-member { grid-column: 1 / -1; order: 2; }

    .add-member-trigger {
        order: 4;
        justify-self: end;
        padding: 7px 14px 7px 12px;
        border: 1px solid var(--color-primary-1);
        border-radius: 50px;
        font-size: 13px;
        white-space: nowrap;
    }

    .night-list-truncated { margin: 0 12px 8px; }

    .night-list-table-wrapper {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        border: 0;
    }

    .night-list-table,
    .night-list-table thead,
    .night-list-table tbody { display: block; }

    .night-list-table tr {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px 4px;
        align-items: center;
        padding: 10px 12px 12px;
        border-bottom: 1px solid var(--color-gray-4);
    }

    .night-list-table td,
    .night-list-table th {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }

    .night-list-table thead {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .night-list-table thead tr {
        padding: 7px 12px;
        background: var(--color-primary-light);
        border-bottom: 1px solid var(--color-gray-4);
    }

    .night-list-table th { position: static; }
    .night-list-table th.day-col::before { font-size: 10px; }

    .night-list-table th.unit-col,
    .night-list-table th.action-col { display: none; }

    .night-list-table td.unit-col {
        grid-column: 1 / 7;
        white-space: normal;
    }

    .night-list-table td.action-col {
        grid-column: 7;
        grid-row: 1;
        justify-self: end;
    }

    .night-list-table td.day-col { text-align: center; }

    .night-list-table .empty-row {
        grid-column: 1 / -1;
        height: auto;
        padding: 40px 8px;
    }

    .unit-name {
        font-size: 14px;
        line-height: 1.3;
        gap: 4px 8px;
    }

    .night-list-table .badge { font-size: 10px; }

    .day-cell {
        width: 100%;
        max-width: 48px;
        height: 38px;
        border-radius: 9px;
    }

    .day-cell svg { width: 18px; height: 18px; }

    tr.is-unavailable { box-shadow: inset 3px 0 0 var(--color-warning); }
    tr.is-unavailable > td.unit-col { box-shadow: none; }

    .kebab-btn {
        width: 36px;
        height: 36px;
        margin: -6px -10px -6px 0;
        font-size: 20px;
    }

    .coverage-wrapper {
        position: sticky;
        bottom: var(--tabbar-h);
        z-index: 3;
        overflow: visible;
    }

    .coverage-table {
        display: block;
        border: 0;
    }

    .coverage-table tbody { display: block; }

    .coverage-row {
        padding: 6px 12px 8px;
        gap: 2px 4px;
        background: var(--color-primary-light);
        border-top: 1px solid var(--color-gray-4);
        border-bottom: 0;
        box-shadow: 0 -8px 20px rgba(34, 47, 63, .07);
    }

    .coverage-row td { background: transparent; border: 0; }

    .coverage-row td.coverage-label {
        grid-column: 1 / -1;
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .coverage-row td.action-col { display: none; }

    .coverage-count { font-size: 15px; line-height: 1.2; }
    .coverage-unavailable { font-size: 9px; }

    .night-list-legend {
        margin: 0;
        padding: 10px 12px 12px;
        gap: 6px 14px;
        border-top: 0;
    }

    .night-list-legend .legend-item { font-size: 11px; }
}

/* Dialogs become bottom sheets: they slide up, keep a grab handle, scroll inside, and
   their Save spans the width where a thumb lands. */
@media (max-width: 576px) {
    .modal-dialog,
    .modal-dialog.modal-dialog-centered {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        align-items: flex-end;
    }

    .modal.fade .modal-dialog { transform: translateY(100%); }
    .modal.show .modal-dialog { transform: none; }

    .modal-content {
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 18px 18px 0 0 !important;
    }

    .modal-content::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 2px;
        background: var(--color-gray-1);
    }

    .modal-header { border-radius: 0; }

    .modal-body,
    .ops-dialog .dialog-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .modal-footer { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }

    .ops-dialog .dialog-header { padding: 10px 48px 16px 20px; text-align: left; }
    .ops-dialog .dialog-header_closer { top: 8px; right: 12px; padding: 10px; }
    .ops-dialog .dialog-body { padding: 0 20px 4px; }

    .ops-dialog .dialog-footer {
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    }

    .ops-dialog .dialog-footer .btn-xl {
        flex: 1 1 auto;
        height: 44px;
    }

    .ops-dialog .dialog-footer .btn-dark-outline { flex: 0 0 auto; }

    .ops-dialog .modal-lg,
    .modal-sm-480 { max-width: none; }

    .radios-popup { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
    .ops-header .brand span { font-size: 14px; }
}