:root {
    /* Scout Blue — sidebar & primary UI */
    --w-color-primary-hue: 212;
    --w-color-primary-saturation: 100%;
    --w-color-primary-lightness: 26.5%;

    /* Lighter scout blue — buttons, links, interactive elements */
    --w-color-secondary-hue: 212;
    --w-color-secondary-saturation: 72%;
    --w-color-secondary-lightness: 44%;
}

/* Gold accent on the active sidebar menu item indicator */
.sidebar-menu-item--active > a::before,
[data-sidebar-menu-item-active] > a::before {
    background-color: #FDB813 !important;
}

/* Login page */
.login .content-wrapper h1 {
    color: #FDB813;
}

.login .login-logo {
    width: auto;
    text-align: center;
}

/* Theme-aware notices for custom admin views. Wagtail's legacy help-* classes
   use fixed palette colors and remain light when the admin theme is dark. */
.pack94-admin-notice {
    --pack94-admin-notice-accent: var(--w-color-info-100);
    background-color: var(--w-color-surface-field);
    border: 1px solid var(--w-color-border-furniture);
    border-inline-start: 0.25rem solid var(--pack94-admin-notice-accent);
    border-radius: 0.25rem;
    color: var(--w-color-text-label);
    padding: 1rem;
}

.pack94-admin-notice--positive {
    --pack94-admin-notice-accent: var(--w-color-positive-100);
}

.pack94-admin-notice--warning {
    --pack94-admin-notice-accent: var(--w-color-warning-100);
}

.pack94-admin-notice--critical {
    --pack94-admin-notice-accent: var(--w-color-critical-200);
}

.login-logo img {
    max-width: 200px;
    height: auto;
}

/* Campaign export dialog fields must shrink below their longest option. */
.store-order-export-form,
.store-order-export-form .w-field__wrapper,
.store-order-export-form .w-field,
.store-order-export-form .w-field__input,
.store-order-export-form select {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.store-order-export-actions .button {
    width: 100%;
}

.store-order-export-actions .button + .button {
    margin-inline-start: 0;
}

/* Custom admin tables keep readable intrinsic column widths and scroll within
   the content area instead of forcing the entire admin page wider. */
.pack94-admin-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.pack94-admin-table-scroll table.listing {
    min-width: 100%;
    width: max-content;
}

.pack94-admin-table-scroll table.listing th,
.pack94-admin-table-scroll table.listing td {
    width: auto !important;
}

.pack94-admin-table-scroll:focus-visible {
    outline: 3px solid var(--w-color-focus);
    outline-offset: -3px;
}

@media screen and (min-width: 50em) {
    .store-order-export-actions {
        flex-direction: row;
    }

    .store-order-export-actions .button {
        width: auto;
    }
}

/* Listing table adjustments on mobile */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    .title {
        width: 70% !important;
    }
    .newsletter-date {
        width: 30% !important;
    }
}

/* Coloris color picker */
.clr-field input {
    padding-right: 2.5rem;
}

.clr-field button {
    border-radius: 0 0.375rem 0.375rem 0;
    right: 1px;
    height: calc(100% - 2px);
}

/* Header actions use Wagtail's native dropdown on narrow screens. */
.response-report-header-overflow,
.pack94-header-overflow {
    display: none;
}

@media screen and (max-width: 49.9375em) {
    /* Give page-level custom components room to breathe without adding a
       second gutter around tables nested inside Wagtail panels. */
    .pack94-admin-component {
        margin-block: 1rem 1.5rem;
        margin-inline: 1rem;
        max-width: calc(100% - 2rem);
    }

    .response-report-header-action,
    .pack94-header-action {
        display: none;
    }

    .response-report-header-overflow,
    .pack94-header-overflow {
        display: block;
    }

    .form-response-dashboard .w-panel--dashboard {
        width: 9rem;
    }

    .form-response-dashboard .w-panel--dashboard .w-panel__content {
        padding: 0.75rem;
    }

    .form-response-dashboard .w-panel--dashboard .w-panel__content > .w-flex {
        padding: 0.5rem;
    }

    .w-dialog--wide {
        padding: 0;
    }

    .w-dialog--wide .w-dialog__box {
        border-radius: 0;
        box-shadow: none;
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100%;
    }

    .w-dialog--wide .w-dialog__content {
        max-height: 100vh;
        min-height: 100vh;
        padding: 1.25rem;
    }

    .w-dialog--wide .w-dialog__body {
        padding: 0 0 1.25rem;
    }
}

/* Response detail dialogs use Wagtail's dialog component with a wider desktop layout. */
@media screen and (min-width: 50em) {
    .w-dialog--wide .w-dialog__box {
        max-width: 60rem;
        width: min(56rem, calc(100vw - 4rem));
    }
}