:root {
    --brand: #1568c4;
    --brand-dark: #0d4d90;
    --brand-soft: #e7f0fc;
    --border: #e5e7eb;
    --text-muted: #6b7280;
    --topbar-height: 56px;
    --sidebar-bg: #f7f7f8;
    --content-bg: #ffffff;
}

.app-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 55;
}

.app-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--brand);
    font-size: clamp(1.05em, 0.9em + 1vw, 1.5em);
    text-decoration: none;
}

.app-topbar-logo {
    max-height: calc(var(--topbar-height) - 18px);
    max-width: 200px;
    object-fit: contain;
}

body {
    margin: 0;
    padding: 0;
    background: #f2f2f4;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1a1d29;
}

.auth-shell {
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
    padding: 40px;
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
}

.redirect-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    border: 3px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: redirect-spin 0.8s linear infinite;
}

@keyframes redirect-spin {
    to { transform: rotate(360deg); }
}

.auth-card h3 {
    margin: 0 0 8px;
    font-size: 1.7em;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.auth-subtext {
    margin: 0 0 24px;
    color: var(--text-muted);
}

.auth-split {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.auth-split .auth-shell {
    flex: 1 1 50%;
    min-height: 100vh;
}

.auth-split .auth-card {
    background: transparent;
    box-shadow: none;
    max-width: 480px;
    padding: 56px 24px;
}

.auth-showcase {
    flex: 1 1 50%;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
}

.auth-showcase__brand {
    position: absolute;
    top: 32px;
    left: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.2em;
    color: #fff;
    text-decoration: none;
}

.auth-showcase__brand-logo {
    width: 22px;
    height: 22px;
    padding: 5px;
    box-sizing: content-box;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.auth-showcase__inner {
    max-width: 400px;
}

.auth-showcase__inner h2 {
    margin: 0 0 40px;
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.auth-showcase__slides {
    position: relative;
    min-height: 170px;
}

.auth-showcase__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.auth-showcase__slide.is-active {
    opacity: 1;
    transform: translateY(0);
}

.auth-showcase__icon {
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
}

.auth-showcase__slide h3 {
    margin: 0 0 8px;
    font-size: 1.2em;
    font-weight: 700;
}

.auth-showcase__slide p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.auth-showcase__dots {
    display: flex;
    gap: 8px;
    margin-top: 32px;
}

.auth-showcase__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.3s ease;
}

.auth-showcase__dots span.is-active {
    background: #fff;
}

.auth-mobile-brand {
    display: none;
}

@media (max-width: 900px) {
    .auth-showcase {
        display: none;
    }

    .auth-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px;
        background: #fff;
        border-bottom: 1px solid var(--border);
    }

    .auth-mobile-brand a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        letter-spacing: -0.02em;
        font-size: 1.15em;
        color: var(--brand);
        text-decoration: none;
    }

    .auth-mobile-brand__logo {
        width: 26px;
        height: 26px;
    }

    /* .auth-split and its nested .auth-shell both force a full min-height: 100vh for the
       side-by-side desktop layout (assets/style.css line ~93-102) — that's still correct on
       mobile now that .auth-showcase is hidden, but .auth-mobile-brand sits above .auth-split as
       its own bar, not inside it. Left unadjusted, the page becomes 100vh + this bar's own height
       tall, and .auth-shell's centering then centers the card in that whole oversized box —
       pushing it well below the middle of the actual visible viewport. Same "subtract the bar
       above" fix .auth-shell already applies for the real topbar via var(--topbar-height) on
       every other page; that variable's 56px is close enough to this bar's real ~59px height. */
    .auth-split,
    .auth-split .auth-shell {
        min-height: calc(100vh - var(--topbar-height));
    }

    /* Vertically centering (the desktop .auth-shell default) reads fine when the showcase panel
       fills the other half of the screen, but alone on a narrow phone it just pushes a short form
       down into a big empty gap below the brand bar — the actual complaint, distinct from the
       min-height double-counting fixed above. Top-aligning instead means the form starts right
       under the bar, which is also just the more familiar mobile login/signup pattern. The split
       layout's own padding (56px 24px, sized for a spacious desktop card) shrinks to match. */
    .auth-split .auth-shell {
        align-items: flex-start;
    }

    .auth-split .auth-card {
        padding: 32px 20px;
    }
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 6px;
}

.auth-field input,
.auth-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 1em;
    margin: 0;
}

.auth-slug-row {
    flex-wrap: nowrap;
    gap: 4px;
}

.auth-slug-row span {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--text-muted);
}

.auth-slug-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.88em;
    cursor: pointer;
}
.consent-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
}

.password-toggle:hover {
    color: var(--brand);
}

.btn-auth {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: none;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.12s;
}

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

.auth-links {
    margin-top: 22px;
    text-align: center;
    font-size: 0.9em;
}

.auth-links a {
    display: block;
    color: var(--brand);
    margin: 6px 0 0;
}

#login_message:not(:empty),
#signup_message:not(:empty),
.auth-card #forgot_message:not(:empty),
.auth-card #reset_message:not(:empty) {
    margin-bottom: 16px;
}

.auth-card .error-message {
    display: block;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.92em;
    font-weight: 600;
}

.signup-success {
    text-align: center;
    padding: 12px 0 8px;
}

.signup-success__check {
    width: 56px;
    height: 56px;
    color: #16a34a;
    margin-bottom: 16px;
}

.signup-success h3 {
    margin: 0 0 10px;
    font-size: 1.3em;
    font-weight: 600;
}

.signup-success p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.stripe-connected-status {
    text-align: center;
    padding: 10px 0;
}

.stripe-connected-status__check {
    width: 40px;
    height: 40px;
    color: #16a34a;
    margin-bottom: 10px;
}

.stripe-connected-status__title {
    margin: 0 0 4px;
    font-size: 1.05em;
    font-weight: 700;
}

.stripe-connected-status__subtitle {
    color: var(--text-muted);
    margin: 0;
}

.detail-actions--centered {
    display: flex;
    justify-content: center;
}

.public-page-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.public-page-content input[type="text"],
.public-page-content input[type="email"],
.public-page-content input[type="password"],
.public-page-content input[type="number"],
.public-page-content textarea,
.public-page-content select {
    width: 100%;
    box-sizing: border-box;
}

h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

p {
    margin: 10px 0;
}

a {
    margin-right: 4px;
}

.app-shell {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--topbar-height));
}

.app-sidebar {
    width: 264px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 16px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.app-sidebar-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.app-sidebar-identity-email {
    min-width: 0;
    font-size: 0.82em;
    font-weight: 600;
    color: #1a1d29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-plan-badge {
    flex-shrink: 0;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eceef1;
    color: #44474e;
}

.app-sidebar-profile {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-sidebar-powered-by {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 0.75em;
    color: var(--text-muted);
    text-decoration: none;
}
.app-sidebar-powered-by:hover { color: var(--brand); }

.app-sidebar-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
}

.app-sidebar-profile-info {
    min-width: 0;
}

.app-sidebar-profile-name {
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-profile-role {
    font-size: 0.78em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav-search {
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 14px;
}

.app-nav-links {
    display: flex;
    flex-direction: column;
}

.app-nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 2px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #44474e;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.app-nav-links a:hover {
    background: #ececee;
    color: #1a1c20;
}

.app-nav-links a i {
    width: 16px;
    text-align: center;
    font-size: 0.95em;
    color: #80848c;
}

.app-nav-links a.app-nav-active {
    background: #fff;
    color: #15171a;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.app-nav-links a.app-nav-active i {
    color: var(--brand);
}

.app-nav-links a.app-nav-active:hover {
    background: #fff;
}

.app-nav-links a.app-nav-issue-alert,
.app-nav-links a.app-nav-issue-alert i {
    color: #dc2626;
}

.app-nav-links a.app-nav-issue-alert:hover {
    background: #fee2e2;
}

.app-nav-badge {
    margin-left: auto;
    background: #dc2626;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
}

.app-nav-badge--brand {
    background: var(--brand);
}

.app-nav-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 6px;
}

.app-sidebar-footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.app-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: #333;
    opacity: 0.6;
    text-decoration: none;
}

.app-sidebar-footer a i {
    width: 16px;
    text-align: center;
    font-size: 0.95em;
}

.app-main {
    flex: 1;
    min-width: 0;
    
    min-height: 100vh;
    box-sizing: border-box;
    padding: 20px;
    background: var(--content-bg);
}

.app-main #content {
    max-width: 1100px;
    margin: 0 auto;
}

.nav-toggle {
    display: none;
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 1.2em;
    cursor: pointer;
}

.topbar-logout {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #dc2626;
    font-size: 1.2em;
    text-decoration: none;
    transition: background 0.12s;
}

.topbar-logout:hover {
    background: #fee2e2;
}

.secondary-sidebar-toggle {
    margin-bottom: 16px;
    
    align-self: flex-start;
}

body.secondary-sidebar-hidden .route-sidebar {
    display: none;
}

.nav-backdrop {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 40;
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .app-sidebar {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        height: calc(100vh - var(--topbar-height));
        min-height: 0;
        width: 284px;
        max-width: 86vw;
        overflow-y: auto;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }

    .app-sidebar.nav-open {
        transform: translateX(0);
    }

    .nav-backdrop.nav-open {
        display: block;
    }
}

form {
    margin-bottom: 15px;
}

form label,
form span {
    margin-right: 6px;
}

input,
select,
button,
textarea {
    margin-right: 10px;
    margin-bottom: 6px;
    padding: 4px 6px;
}

input,
select,
textarea {
    border: 1px solid #ccc;
    border-radius: 7px;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

input[placeholder^="Search"]:not(:placeholder-shown) {
    background: #fef9c3;
    border-color: #eab308;
}

button {
    padding: 5px 14px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

button:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.btn-highlight {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-download-ticket {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
    margin-right: 8px;
}
.btn-download-ticket:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.btn-highlight:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* Stays visibly red rather than the app's usual greyed-out .btn-looks-disabled treatment — this
   one really is disabled (no click-through alert explaining a blocked action), so it should read
   as "not ready yet" rather than "click me to find out why not," which is what the grey/pointer
   convention signals everywhere else. */
.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-icon svg { width: 15px; height: 15px; flex-shrink: 0; }

.import-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin: 16px 0 18px;
    border: 1px solid var(--brand);
    border-radius: 7px;
    color: #fff;
    background: var(--brand);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.import-link svg { width: 15px; height: 15px; flex-shrink: 0; }

.import-link:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin: 16px 0 18px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 0.12s, color 0.12s;
}

.btn-download svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-download:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.link-dashed {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-dashed:hover {
    color: var(--brand-dark);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
    margin-bottom: 25px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-bottom: 25px;
}
.table-scroll-wrap table {
    margin-bottom: 0;
}

/* Issues' own "What's wrong" column is free-text, often a full sentence — th/td's shared
   white-space:nowrap default (meant for short, compact admin-table cells) forces it into an
   ever-widening single line that runs off past the table-scroll-wrap's own edge instead of
   staying readable in place. Fixed width + wrapping keeps every row a predictable height and
   readable without horizontal scrolling. */
#issues_table td:nth-child(2),
#issues_table th:nth-child(2) {
    white-space: normal;
    width: 480px;
    max-width: 480px;
    overflow-wrap: break-word;
}

thead {
    background: #fff;
}

th, td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 11px 14px;
    text-align: left;
    white-space: nowrap;
}

thead th {
    font-weight: 600;
    font-size: 0.82em;
    color: var(--text-muted);
    text-transform: none;
}

tbody tr:hover {
    background: #fafbfc;
}

.empty-state-cell {
    padding: 0 !important;
    text-align: center;
    white-space: normal;
}

.empty-state-cell > .empty-state {
    position: sticky;
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    min-height: 260px;
    padding: 40px 20px;
    justify-content: center;
}
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.empty-state-icon {
    font-size: 5.5em;
    color: var(--brand);
    opacity: 0.3;
    margin-bottom: 14px;
}
.empty-state-title {
    font-weight: 600;
    color: #1a1d29;
    font-size: 1.1em;
}
.empty-state-subtitle {
    color: var(--text-muted);
    font-size: 0.85em;
    max-width: 380px;
}

.empty-state--fullbody {
    min-height: calc(100vh - var(--topbar-height) - 40px);
    justify-content: center;
}

.empty-state--success .empty-state-icon {
    color: #16a34a;
    opacity: 1;
}

.route-row-clickable {
    cursor: pointer;
}

tr:last-child td {
    border-bottom: none;
}

.sort-icon {
    cursor: pointer;
}

.btn-looks-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-message {
    color: red;
}

.overlap-banner {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 14px;
    font-size: 0.92em;
    font-weight: 600;
}

/* A quiet, neutral note — used for the legal/compliance disclaimer on Tax by Province, where a red
   alert would shout about something that's informational rather than a problem. */
.notice-banner {
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: 6px;
    margin: 0 0 14px;
    font-size: 0.74em;
    line-height: 1.4;
}

.overlap-banner a {
    color: #b91c1c;
    font-weight: 600;
    text-decoration: underline;
}

.overlap-banner:empty {
    display: none;
}

.warning-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 14px;
    font-size: 0.92em;
    font-weight: 600;
}

.warning-banner--compact {
    padding: 6px 10px;
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.4;
}

.card-hint {
    font-size: 0.82em;
}

.export-filter {
    margin-top: 18px;
}

.export-filter-dates {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.export-filter-dates label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82em;
    color: var(--text-muted);
    font-weight: 600;
}

.export-filter-range {
    margin: 14px 0 0;
    font-size: 0.88em;
    color: var(--text-muted);
}

.success-banner {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 14px;
    font-size: 0.92em;
    font-weight: 600;
}

.success-banner:empty {
    display: none;
}

.info-banner {
    background: var(--brand-soft);
    border: 1px solid #b6d3f5;
    color: var(--brand-dark);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 14px;
    font-size: 0.92em;
    font-style: italic;
}

.ts-row-invalid {
    background: #fef2f2;
}

.ts-row-invalid:hover {
    background: #fee2e2;
}

.bsc-overlap-banner {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 14px;
    font-size: 0.92em;
    font-weight: 600;
}

#bsc_overlap_banner:empty {
    display: none;
}

.refund-message {
    color: red;
}

.text-danger {
    color: red;
}

.text-success {
    color: green;
}

.text-muted {
    color: var(--text-muted);
}

.temp-password-box {
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 10px 0;
}

.temp-password-box p {
    margin: 0 0 8px;
}

.temp-password-box code {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.temp-password-box .temp-password-hint {
    margin: 8px 0 0;
    font-size: 0.85em;
    color: var(--text-muted);
}

.nowrap {
    white-space: nowrap;
}

.route-sidebar {
    width: 200px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 20px;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
}

.route-sidebar-search {
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 14px;
}

.route-sidebar a,
.route-sidebar strong,
.sp-route-selected {
    display: block;
    margin: 0 0 4px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
}

.route-sidebar a {
    color: #333;
    opacity: 0.55;
    transition: background 0.12s ease, opacity 0.12s ease;
}

.route-sidebar a:hover {
    background: #f2f2f7;
    opacity: 0.85;
}

.route-sidebar strong,
.sp-route-selected {
    background: var(--brand-soft);
    color: var(--brand);
    opacity: 1;
    font-weight: 600;
}

.warning-icon {
    color: #e0a800;
    cursor: default;
}

.tt-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#bk_time_tabs {
    margin-top: 24px;
    margin-bottom: 24px;
}

#settings_tabs {
    margin-top: 28px;
}

#settings_tabs ~ div > form > button[type="submit"] {
    margin-top: 10px;
    margin-bottom: 28px;
}

.tt-tab {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 2px 10px;
    margin-bottom: -1px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.tt-tab-active {
    color: var(--brand);
    font-weight: 650;
    border-bottom: 2px solid var(--brand);
}

#sp_grid_wrap {
    overflow-x: auto;
}

.cell-disabled {
    background: #f0f0f0;
    color: #999;
    text-align: center;
}

.cell-computed {
    background: #eef6ff;
    text-align: center;
}

.price-input {
    width: 80px;
}

/* Same locked look as the diagonal/backward .cell-disabled cells right next to it — a grid full
   of live number inputs left permanently editable is an easy thing to mis-scroll or mis-arrow-key
   into changing without meaning to; #sp_edit_toggle (below) is the only thing that removes this. */
#stop_pricing_table .price-input:read-only {
    background: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

.sp-edit-toggle {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    margin: 0;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    font-weight: 500;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sp-edit-toggle:hover {
    border-color: var(--brand);
}

.sp-edit-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sp-edit-toggle:has(input:checked) {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.price-zero {
    background-color: #ffe0e0;
}

@keyframes savedFlash {
    from { background-color: #d4f7d4; }
    to { background-color: transparent; }
}

.saved-flash {
    animation: savedFlash 0.6s ease-out;
}

.qty-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.qty-selector button {
    padding: 2px 10px;
    margin: 0;
}

.qty-selector input {
    width: 50px;
    text-align: center;
    margin: 0;
}

fieldset {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 15px;
    padding: 12px 16px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
}

.stat-cards {
    display: grid;
    /* Tiles stay between 170px and 200px wide, so they're always the same square size instead of
       stretching with the window. */
    grid-template-columns: repeat(auto-fill, minmax(170px, 200px));
    gap: 16px;
    margin-top: 20px;
}

/* Phones: the 170px minimum leaves room for only one tile across, so switch to two equal columns. The tiles
   are still square and everything inside scales with them (cqw), so they simply get a little smaller. */
@media (max-width: 560px) {
    .stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Square tiles whose contents scale with the tile itself. Every size below is in cqw (1% of the
   tile's own width, via container-type) rather than em, so the icon, number and labels shrink or grow
   together with the tile — however large the page's text size or the browser zoom — and can't push
   the content past the square (which is what made some tiles taller than others). The em/px values
   declared first are only the fallback for browsers without container units. */
.stat-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    /* Percentage padding is relative to the grid cell's width, i.e. the tile's own width — cqw can't be
       used here because container units resolve against an ancestor, never the element itself. */
    padding: 16px;
    padding: 8%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    color: inherit;
    text-decoration: none;
    margin-right: 0;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.stat-card:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 10px rgba(21, 104, 196, 0.12);
    transform: translateY(-1px);
}

.stat-card-icon {
    width: 24px;
    height: 24px;
    width: 14cqw;
    height: 14cqw;
    color: var(--brand);
}

.stat-card-count {
    font-size: 1.8em;
    font-size: 21cqw;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000;
    margin-top: auto;
}

.stat-card-label {
    color: #666;
    font-size: 0.9em;
    font-size: 9.5cqw;
    line-height: 1.2;
    margin-top: 4cqw;
}

/* A tile with no "of N allowed" line reserves the same space at the bottom, so the numbers line up
   across every tile instead of the ones without a limit sitting lower. */
.stat-card-label:last-child { padding-bottom: 10.5cqw; }

.stat-card-limit {
    color: #999;
    font-size: 0.78em;
    font-size: 7.5cqw;
    line-height: 1.2;
    margin-top: 1.5cqw;
}

.stat-card-cta {
    background: var(--brand);
    border-color: var(--brand);
    cursor: pointer;
}

.stat-card-cta:hover {
    border-color: var(--brand-dark);
    box-shadow: 0 4px 10px rgba(21, 104, 196, 0.28);
}

.stat-card-cta .stat-card-icon,
.stat-card-cta .stat-card-count,
.stat-card-cta .stat-card-label {
    color: #fff;
}

.stat-card-cta .stat-card-count {
    font-size: 1.25em;
    font-size: 13cqw;
}

.plan-limit-remaining {
    display: inline-block;
    color: #666;
    font-size: 0.85em;
    margin-left: 10px;
}

.onboarding-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin-top: 16px;
}

.onboarding-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.onboarding-card__header h4 {
    margin: 0 0 4px;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.onboarding-card__header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9em;
    max-width: 46ch;
}

.onboarding-card__fraction {
    flex-shrink: 0;
    font-size: 0.85em;
    font-weight: 650;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.onboarding-progress {
    height: 6px;
    background: #eef0f4;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0 20px;
}

.onboarding-progress__fill {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.onboarding-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboarding-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8f9fb;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

a.onboarding-item:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.onboarding-item--done {
    background: #fff;
}

.onboarding-item__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.onboarding-item--done .onboarding-item__icon {
    background: #f1f2f4;
    color: #9aa1ad;
}

.onboarding-item__icon svg {
    width: 18px;
    height: 18px;
}

.onboarding-item__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.onboarding-item__title {
    font-weight: 650;
    font-size: 0.95em;
}

.onboarding-item--done .onboarding-item__title {
    color: #6b7280;
}

.onboarding-item__subtitle {
    font-size: 0.82em;
    color: var(--text-muted);
}

.revenue-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin-top: 16px;
}

.revenue-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.revenue-card__header h4 {
    margin: 0 0 4px;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.revenue-card__header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9em;
}

.revenue-filter {
    margin-top: 18px;
}

#revenue_tabs {
    margin-bottom: 0;
}

.revenue-filter-dates {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.revenue-filter-dates label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82em;
    color: var(--text-muted);
    font-weight: 600;
}

.revenue-stat {
    font-size: 2.4em;
    font-weight: 600;
    color: #000;
    margin-top: 18px;
    letter-spacing: -0.01em;
}

.revenue-stat-label {
    color: var(--text-muted);
    font-size: 0.88em;
    margin-top: 2px;
    margin-bottom: 16px;
}

.revenue-stat-count {
    margin-top: 4px;
    color: var(--text-muted, #6b7280);
    font-size: 0.95em;
}

.revenue-stat-count strong {
    color: var(--text, #1a1d29);
}

.revenue-table {
    max-width: 480px;
}

.onboarding-item__status {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8bec9;
}

.onboarding-item__status svg {
    width: 15px;
    height: 15px;
}

.onboarding-item--done .onboarding-item__status {
    background: #dcfce7;
    color: #15803d;
}

.detail-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin-top: 14px;
}

.settings-save-bar {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.detail-card h4 {
    margin: 0 0 12px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.detail-card p {
    margin: 0 0 10px;
}

.public-booking-link {
    color: var(--brand);
    text-decoration: none;
}

.public-booking-link:hover {
    text-decoration: underline;
}

.public-booking-link i {
    font-size: 0.85em;
}

.export-columns { margin: 22px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; }
.export-columns legend { padding: 0 8px; font-weight: 600; font-size: 0.95em; }
.export-columns-tools { margin: 0 0 8px; font-size: 0.85em; }
.export-columns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 18px; margin-bottom: 8px; }

.filter-checkbox-row {
    display: block;
    margin: 20px 0;
}

.notif-body {
    background: #f8f9fb;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}

.notif-body pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    margin: 8px 0 0;
    color: var(--text-muted);
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 6px;
}

.field-hint {
    margin: 6px 0 0;
    font-size: 0.82em;
    color: var(--text-muted);
}

.field input[type="text"],
.field input[type="number"] {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
}

.field textarea {
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Two fields sharing a row, equal width (e.g. Latitude/Longitude, Min/Max age) — used inside the
   Pico "Add" dialogs (partials/stops.php etc.), where Pico's own input styling makes a fixed
   pixel width (the old style="width:100px" convention) cramp badly, truncating placeholders like
   "Optional" down to "Opti". Stacks to full-width fields on mobile, same 768px breakpoint the
   rest of this stylesheet already uses. */
.field-row {
    display: flex;
    gap: 12px;
}
.field-row .field {
    flex: 1 1 0;
    min-width: 0;
}
.field-row .field input {
    width: 100%;
    max-width: none;
}
@media (max-width: 768px) {
    .field-row {
        flex-direction: column;
        gap: 0;
    }
}

/* A standalone (not .field-row) .field inside one of the Pico "Add" dialogs (Stop Name, Route
   Name, Type Name, etc.) — .field's own 320px max-width made sense on a wide settings page next
   to other content, but inside a ~510px dialog it leaves a visibly empty gap the way the old
   Latitude/Longitude fields did. dialog-scoped rather than changed globally, since .field is also
   used outside these dialogs (Settings, etc.) where the narrower cap is still wanted. */
dialog .field input[type="text"],
dialog .field input[type="number"] {
    max-width: none;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.detail-ref {
    font-size: 1.2em;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.detail-route {
    color: var(--text-muted);
    margin-top: 4px;
}

.detail-route-name {
    color: #9aa1ad;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-label {
    font-size: 0.78em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-value {
    font-weight: 550;
}

.detail-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.status-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-badge--confirmed,
.status-badge--active {
    background: #dcfce7;
    color: #15803d;
}

.status-badge--cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.status-badge--failed {
    background: #fee2e2;
    color: #b91c1c;
    text-transform: none;
    white-space: normal;
    border-radius: 12px;
}

.status-badge--neutral {
    background: var(--brand-soft);
    color: var(--brand);
    text-transform: none;
}

.rs-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 14px;
}

.rs-bulk-toggle {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    margin: 0;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    font-weight: 500;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.rs-bulk-toggle:hover {
    border-color: var(--brand);
}

.rs-bulk-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#rs_bulk_toggle_state {
    margin-left: 4px;
}

.rs-bulk-toggle:has(input:checked) {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.rs-bulk-toggle:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.rs-move-btn {
    display: none;
}

body:has(#rs_bulk_toggle:checked) .rs-move-btn {
    display: inline-block;
}

.route-issue-line {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #b91c1c;
    font-size: 0.9em;
    line-height: 1.5;
}

.route-issue-bad {
    color: #dc2626;
    flex-shrink: 0;
}

.route-issue-ok {
    color: #15803d;
    font-size: 1.15em;
}

.day-pill {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.8em;
    font-weight: 600;
}

.amenity-pill {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text);
    font-size: 0.8em;
    font-weight: 600;
}

.amenity-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    max-width: 260px;
}
.amenity-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    font-weight: 400;
}

.day-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.day-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.85em;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.day-checkbox input {
    margin: 0;
    accent-color: var(--brand);
}

.day-checkbox:has(input:checked) {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
    font-weight: 600;
}

.day-checkbox:has(input.btn-looks-disabled) {
    opacity: 0.65;
}

.deck-seats {
    display: inline-block;
    max-width: 100%;
}

.deck-front-indicator {
    display: flex;
    justify-content: flex-end;
    color: var(--text-muted);
    margin: 8px 2px -4px;
}

.seat-grid {
    display: inline-grid;
    gap: 8px;
    margin: 10px 0 20px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.seat-cell {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.8em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.seat-cell--sleeper {
    border-radius: 8px 8px 2px 2px;
    background: var(--brand-soft);
}

.seat-legend {
    display: flex;
    gap: 22px;
    margin: 10px 0 16px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.seat-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.seat-cell--legend {
    width: 16px;
    height: 16px;
    cursor: default;
}

.seat-cell-edit {
    display: flex;
    align-items: center;
    gap: 4px;
    grid-column: span 3;
}

.seat-cell-edit input[type="text"] {
    width: 48px;
}

.seat-cell-edit--error {
    outline: 2px solid red;
    border-radius: 6px;
}

.seat-cell-edit__delete {
    border: none;
    background: none;
    color: red;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 0 2px;
}

body:has(#bsc_main) #content, body:has(#dsc_main) #content {
    max-width: none;
    height: calc(100vh - var(--topbar-height) - 40px);
    display: flex;
    flex-direction: column;
}

#bsc_main, #dsc_main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.bsc-page {
    display: flex;
    flex-direction: column;
    
    flex: 1;
    min-height: 0;
}

.bsc-scroll {
    
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    background: #fff;
    flex: 1;
    min-height: 0;
}

.bsc-scroll::-webkit-scrollbar:horizontal {
    display: none;
}

.bsc-hscroll-track {
    position: relative;
    height: 26px;
    flex-shrink: 0;
    background: #eef0f3;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
}

.bsc-hscroll-tick {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: #eab308;
    border-radius: 1px;
    cursor: pointer;
}

.bsc-hscroll-tick--conflict {
    background: #dc2626;
    width: 5px;
}

.bsc-hscroll-thumb {
    position: absolute;
    top: 3px;
    height: 18px;
    min-width: 40px;
    background: rgba(167, 175, 188, 0.75);
    border-radius: 9px;
    cursor: grab;
}

.bsc-hscroll-thumb:hover {
    background: rgba(141, 151, 168, 0.8);
}

.bsc-hscroll-thumb:active {
    cursor: grabbing;
    background: rgba(118, 127, 143, 0.85);
}

.bsc-inner {
    position: relative;
    
    min-height: 100%;
}

.bsc-header {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 60px;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
}

.bsc-day-label {
    position: absolute;
    top: 0;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.bsc-hour-label {
    position: absolute;
    top: 32px;
    height: 28px;
    line-height: 28px;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--text-muted);
    padding-left: 6px;
    box-sizing: border-box;
    white-space: nowrap;
}

.bsc-vlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bsc-vline {
    position: absolute;
    top: 60px;
    bottom: 0;
    width: 1px;
    background: #e7e9ed;
}

.bsc-daylines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bsc-day-watermarks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bsc-day-watermark-col {
    position: absolute;
    top: 0;
    bottom: 0;
    background-repeat: repeat;
}

.bsc-dayline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #b7bfcc;
}

.bsc-rows {
    position: relative;
    z-index: 2;
    
    min-height: calc(100% - 60px);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 71px, var(--border) 71px, var(--border) 72px);
}

.bsc-row {
    position: relative;
    height: 72px;
}

.bsc-bar {
    position: absolute;
    top: 12px;
    height: 48px;
    min-width: 4px;
    background: var(--brand);
    border: 1px solid var(--brand-dark);
    border-radius: 7px;
    color: #fff;
    font-size: 0.94em;
    font-weight: 600;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    
    text-decoration: none;
    cursor: pointer;
}

.bsc-bar:hover,
.bsc-bar:focus-visible {
    background: var(--brand-dark);
    box-shadow: 0 0 0 2px var(--brand-soft);
}

.bsc-bar span {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsc-bar-overflow {
    position: absolute;
    top: 12px;
    height: 48px;
    line-height: 48px;
    width: 18px;
    text-align: center;
    background: #dc2626;
    color: #fff;
    font-size: 0.9em;
    font-weight: 700;
    border-radius: 0 7px 7px 0;
}

.bsc-incomplete-note {
    margin: 12px 0 0;
    font-size: 0.85em;
    color: var(--text-muted);
}

.bsc-trip-count-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.62em;
    font-weight: 700;
    vertical-align: middle;
}

/* Bus/Driver column-header shortcut on the Vehicle & Driver table (includes/trip_day_assignments_render.php)
   — a quick way out to Buses/Drivers right when "Not assigned" makes that the obvious next step. */
.th-add-link {
    display: inline-flex;
    vertical-align: -2px;
    color: #16a34a;
    text-decoration: none;
}
.th-add-link:hover { color: #15803d; }
.th-add-link i { font-size: 0.95em; }

/* Settings' refund cutoff picker (includes/settings_render.php) — presets that cover the common
   cases plus a "Custom" pill revealing the raw number+unit inputs, same chip language book.css
   already uses for its own filter/sort pills on the customer-facing site. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--content-bg);
    font-size: 0.85em;
    color: #1a1d29;
    cursor: pointer;
    font-family: inherit;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip--active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Admin-side searchable stop picker (Route Stops' "add a stop" row) — same look and class names
   as the customer booking site's own stop picker (assets/book.css), ported here since admin
   pages load this stylesheet, not that one. Sits inside a Pico dialog (.pico wrapper, same
   convention as every other admin "Add" dialog — see partials/stops.php), so Pico supplies the
   dialog chrome/backdrop and this only styles the search input, list, and trigger button.
   --card/--radius-sm don't exist as variables here (book.css's own set), so literal values below. */
.stop-picker-trigger {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font-size: 0.95em;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.stop-picker-trigger:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.stop-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.stop-picker-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.stop-picker-list li:last-child { border-bottom: none; }
.stop-picker-list li:hover { background: var(--brand-soft); }
.stop-picker-empty { cursor: default; color: var(--text-muted); }
.stop-picker-empty:hover { background: none; }
.stop-picker-marker {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #dc2626;
}
.stop-picker-name { flex: 1; }
.stop-picker-count {
    margin: -6px 0 10px;
    font-size: 0.82em;
    color: var(--text-muted);
}
.chip--active:hover { color: #fff; border-color: var(--brand); }

/* Settings → Branding: brand color picker + live preview. */
.brand-color-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand-color-picker { width: 96px; }
.brand-color-picker input[type="color"] { margin: 0; width: 96px; }
.brand-color-hex { width: 110px; margin: 0; padding: 8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; color: #1a1d29; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.brand-color-hex:focus { outline: none; border-color: var(--brand); }
.brand-color-hex-error { color: #b91c1c; font-size: 0.8em; margin-top: 6px; }
.brand-color-hex-error:empty { display: none; }
.brand-color-reset { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 0.85em; color: #4b5563; cursor: pointer; margin: 0; width: auto; }
.brand-color-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.brand-color-preview__btn { background: var(--brand); color: var(--on-brand, #fff); padding: 8px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9em; }
.brand-color-preview__chip { background: var(--brand); color: var(--on-brand, #fff); padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 0.85em; }
.brand-color-preview__soft { background: color-mix(in srgb, var(--brand) 10%, #fff); color: #1a1d29; padding: 6px 14px; border-radius: 8px; font-size: 0.85em; }
.brand-color-note { color: #92400e; font-size: 0.82em; margin: 6px 0 2px; }
.brand-color-note:empty { display: none; }
.brand-color-suggest { margin: 4px 6px 0 0; padding: 3px 10px; border: 1px solid #b45309; border-radius: 6px; background: #fff; color: #92400e; font-size: 1em; cursor: pointer; width: auto; }
.brand-color-suggest:hover { background: #fffbeb; }

/* Overview → Suggestions card (trip cost alerts). */
.suggestions-card { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 24px 28px; margin-top: 32px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.suggestions-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.suggestions-card h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.suggestions-card__settings { font-size: 0.8em; color: var(--text-muted, #6b7280); }
.suggestions-card__sub { margin: 6px 0 14px; font-size: 0.85em; color: var(--text-muted, #6b7280); }
.suggestions-list { list-style: none; margin: 0; padding: 0; }
.suggestions-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid #f3f4f6; font-size: 0.92em; line-height: 1.45; }
.suggestions-item:first-child { border-top: 0; }
.suggestions-item__icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }
.suggestions-item__icon svg { width: 20px; height: 20px; }
.suggestions-item__text { flex: 1 1 auto; }
.suggestions-item__link { flex: 0 0 auto; font-size: 0.85em; font-weight: 600; }
.suggestions-card__more { margin: 8px 0 0; font-size: 0.85em; color: var(--text-muted, #6b7280); }

/* Pico's own "primary" is a different blue (#0172ad) from the app's brand blue, so its buttons (the "Add" /
   "Add & Assign Stops" dialogs, the shared confirm dialog) looked off-brand. Set on the .pico wrapper itself
   so it wins over Pico's :root defaults whatever the stylesheet load order. */
.pico {
    --pico-primary: #1568c4;
    --pico-primary-background: #1568c4;
    --pico-primary-border: #1568c4;
    --pico-primary-underline: rgba(21, 104, 196, 0.5);
    --pico-primary-hover: #0d4d90;
    --pico-primary-hover-background: #0d4d90;
    --pico-primary-hover-border: #0d4d90;
    --pico-primary-hover-underline: #0d4d90;
    --pico-primary-focus: rgba(21, 104, 196, 0.35);
    --pico-primary-inverse: #ffffff;
}

.stop-picker-article header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Plain "X" close control for the stop picker: no fill, no border, just the icon in muted text color. The
   selector is deliberately specific — Pico styles every <button> inside .pico with a filled background. */
.stop-picker-article header button.stop-picker-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 6px;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    border-radius: 6px;
}
.stop-picker-article header button.stop-picker-close:hover { color: var(--text, #1a1d29); background: none; }
.stop-picker-article header button.stop-picker-close:focus-visible { outline: 2px solid #9ca3af; outline-offset: 1px; box-shadow: none; }

/* The account row (email + plan badge) and the profile block are links to Billing for owners: keep their
   look, drop link styling, and give a soft hover so it reads as clickable. */
a.app-sidebar-account-link {
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.12s ease;
}
a.app-sidebar-account-link:hover { background: #ececee; }
a.app-sidebar-account-link:hover .app-sidebar-plan-badge { background: #dfe3e8; }
a.app-sidebar-profile { padding-left: 6px; padding-right: 6px; }

/* Scrollbars are hidden throughout (content still scrolls with wheel, trackpad, touch and keys). The two
   schedule pages keep theirs: they have their own horizontal-scroll UI that relies on it. Chrome/Safari use
   the ::-webkit-scrollbar rule, Firefox scrollbar-width. */
html:not(:has(body.page-bus_schedule, body.page-driver_schedule)),
body:not(.page-bus_schedule):not(.page-driver_schedule) * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html:not(:has(body.page-bus_schedule, body.page-driver_schedule))::-webkit-scrollbar,
body:not(.page-bus_schedule):not(.page-driver_schedule) *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Set from script (see rsMarkLastStop() in includes/route_stops_render.php) on the last visible row of the
   admin stop picker, whose real last child is a hidden "no matches" row that defeats :last-child. */
.stop-picker-list li.stop-picker-last { border-bottom: none; }

/* Suggestions card — empty state. */
.suggestions-empty { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0 4px; }
.suggestions-empty__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.suggestions-empty__icon svg { width: 20px; height: 20px; }
.suggestions-empty__text strong { display: block; font-size: 0.95em; font-weight: 500; color: var(--text, #1a1d29); }
.suggestions-empty__text p { margin: 6px 0 0; font-size: 0.85em; color: var(--text-muted, #6b7280); line-height: 1.5; }

/* Overview page headings: the same lighter weight the home page uses. */
body.page-overview h3 { font-weight: 500; margin-top: 32px; margin-bottom: 4px; }
@media (max-width: 560px) {
    .suggestions-card { padding: 20px 18px; margin-top: 24px; }
}
body.page-overview .onboarding-card__header h4 { font-weight: 500; }

/* Bookings page: calendar / table toggle and the month calendar. */
.bk-view-toggle { display: inline-flex; gap: 2px; margin: 8px 0 16px; padding: 3px; border: 1px solid #dcdfe4; border-radius: 10px; background: #f1f2f4; }
.bk-view-toggle .bk-view-toggle__btn { margin: 0; width: auto; padding: 7px 18px; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: #6b7280; font-size: 0.9em; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.bk-view-toggle .bk-view-toggle__btn:hover { color: #111827; }
.bk-view-toggle .bk-view-toggle__btn:focus-visible { outline: 2px solid #c3c7cd; outline-offset: 1px; }
.bk-view-toggle .bk-view-toggle__btn--active,
.bk-view-toggle .bk-view-toggle__btn--active:hover { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(16, 24, 40, 0.04); }

.bk-cal { background: #fff; border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.bk-cal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bk-cal__title { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.bk-cal__nav { display: inline-flex; border: 1px solid var(--border, #ddd); border-radius: 8px; overflow: hidden; }
.bk-cal__btn { margin: 0; min-width: 40px; padding: 6px 12px; border: 0; border-radius: 0; background: #fff; color: #444; font-size: 1em; line-height: 1.2; cursor: pointer; }
.bk-cal__btn + .bk-cal__btn { border-left: 1px solid var(--border, #ddd); }
.bk-cal__btn:hover { background: #f3f4f6; }
.bk-cal__btn--text { font-size: 0.85em; font-weight: 500; }

.bk-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #eceef1; border-left: 1px solid #eceef1; }
.bk-cal__dow { padding: 6px 4px; text-align: center; font-size: 0.75em; font-weight: 600; color: #6b7280; background: #fafafa; border-right: 1px solid #eceef1; border-bottom: 1px solid #eceef1; }
.bk-cal__day { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 112px; padding: 28px 8px 8px; border-right: 1px solid #eceef1; border-bottom: 1px solid #eceef1; background: #fff; }
.bk-cal__day--out { background: #f8f9fa; }
.bk-cal__day--out .bk-cal__date { color: #c3c7cd; }
.bk-cal__day--today { background: #e3edf9; }
.bk-cal__date { position: absolute; top: 6px; right: 8px; font-size: 0.85em; color: #444; }
.bk-cal__day--today .bk-cal__date { font-weight: 600; color: #000; }

.bk-cal__trips { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-cal__trip { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; background: var(--brand); color: #fff; font-size: 0.78em; line-height: 1; text-decoration: none; cursor: default; }
a.bk-cal__trip { cursor: pointer; }
a.bk-cal__trip:hover { filter: brightness(1.12); }
.bk-cal__count { font-weight: 600; }
.bk-cal__more { white-space: nowrap; font-size: 0.72em; color: #6b7280; text-decoration: none; padding: 0 2px; }
.bk-cal__more:hover { color: var(--brand); text-decoration: underline; }
.bk-cal__legend { margin: 12px 0 0; font-size: 0.8em; color: #6b7280; }

/* Phones: the label doesn't fit, so each block shrinks to its number (tap it, or hold for the route). */
@media (max-width: 700px) {
    .bk-cal { padding: 10px; }
    .bk-cal__day { min-height: 64px; padding: 22px 3px 4px; align-items: flex-start; }
    .bk-cal__date { top: 4px; right: 5px; font-size: 0.75em; }
    .bk-cal__trips { gap: 3px; }
    .bk-cal__trip { min-width: 22px; height: 22px; padding: 0 4px; }
    .bk-cal__more-word { display: none; }
}
.bk-cal__btn:hover { color: #111827; border-color: transparent; }
/* Bookings page: Calendar / Table view on the left, Export CSV on the far right. */
.bk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.bk-toolbar .bk-view-toggle { margin: 0; }
.bk-toolbar .import-link { margin: 0; }

/* Read-only view for staff on Settings / Staff: same page an owner sees, controls greyed out. */
.readonly-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: #f6f7f9; color: #4b5563; font-size: 0.9em; }
.readonly-banner i { flex: 0 0 auto; font-size: 1.05em; }
body.is-readonly-view #content input:disabled,
body.is-readonly-view #content select:disabled,
body.is-readonly-view #content textarea:disabled { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; cursor: not-allowed; }
body.is-readonly-view button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
body.is-readonly-view button:disabled:hover { border-color: #d1d5db; color: inherit; }
body.is-readonly-view #content .btn-highlight:disabled:hover { border-color: var(--brand); color: #fff; }