/* Page chrome. Grid skins live in grids.css. */

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .content-wrapper,
html:not([data-theme="dark"]) #content,
html:not([data-theme="dark"]) main,
html:not([data-theme="dark"]) .container,
html:not([data-theme="dark"]) .container-fluid,
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] #content,
html[data-theme="dark"] main,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid {
    background: var(--cp-bg);
    color: var(--cp-text);
}

hr {
    border-color: var(--cp-border);
}

a {
    color: var(--cp-secondary);
}

a:hover {
    color: var(--cp-secondary-hover);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: #C7CED8;
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: #E9EDF3;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3A4250;
    border: 2px solid var(--cp-bg);
    border-radius: 8px;
}

*:focus-visible {
    outline: 2px solid var(--focus-ring);
    box-shadow: 0 0 0 0.15rem var(--focus-ring-shadow);
}

html[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--focus-ring);
    box-shadow: 0 0 0 0.2rem var(--focus-ring-shadow);
}

.navbar,
.topbar {
    background: linear-gradient(180deg, var(--cp-primary, #E35205) 0%, color-mix(in srgb, var(--cp-primary, #E35205) 82%, #000) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--cp-primary, #E35205) 82%, #000);
    box-shadow: var(--shadow-1);
    color: #fff;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: #fff;
    font-weight: 600;
}

.navbar .nav-link:hover {
    color: #fff;
    opacity: 0.88;
}

.navbar .form-control {
    background: color-mix(in srgb, #fff 82%, var(--cp-primary, #E35205));
    border: 1px solid color-mix(in srgb, var(--cp-primary, #E35205) 70%, #000);
    color: #1E1200;
}

.navbar .form-control::placeholder {
    color: #5c5c5c;
}

.navbar .input-group-text {
    background: color-mix(in srgb, #fff 55%, var(--cp-primary, #E35205));
    border: 1px solid color-mix(in srgb, var(--cp-primary, #E35205) 70%, #000);
    color: #1E1200;
}

.card {
    background: var(--cp-surface);
    color: var(--cp-text);
    border-color: var(--cp-border);
    box-shadow: var(--shadow-1);
}

.card-header,
.card-footer {
    background: #F7F9FC;
    border-color: var(--cp-border);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background: #3A455A;
}

/* Catalog report notice. After the card; margin-top: auto rests it on the window when the report is short. */
main.report-page {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: auto;
    height: auto;
}

footer.report-disclaimer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--cp-border);
    background: transparent;
    color: var(--cp-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
}

footer.report-disclaimer p {
    margin: 0 auto;
    max-width: 68rem;
}

footer.report-disclaimer-copy {
    margin-top: 0.2rem;
    font-size: 0.6875rem;
}

footer.report-disclaimer img {
    display: block;
    height: 48px;
    width: auto;
    margin: 2.5rem auto 0.75rem;
    border: 0;
    box-shadow: none;
}

@media print {
    footer.report-disclaimer {
        display: block !important;
        color: #000;
        background: transparent;
        border-top: 1px solid #000;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

body.cp-admin main .container-fluid > .card {
    border-left: 3px solid var(--cp-primary);
}

/* Standalone buttons are pills. A joined group (7 days / 30 days, chart type) keeps Bootstrap's square ends. */
.btn:not(.btn-close):not(.btn-link):not(.btn-group:has(> .btn ~ .btn) > .btn):not(.btn-group:has(> .btn-check) > .btn) {
    border-radius: 50rem;
}

/* Hide the Combined picker until a child (the Clients button or its note) is shown. */
.page-options > .combined-client-filter:not(:has(> :not(.d-none))) {
    display: none !important;
}

.page-options-menu > .btn.is-combined,
.page-options-menu > .btn.is-combined:hover,
.page-options-menu > .btn.is-combined:focus-visible {
    color: var(--cp-primary);
    border-color: var(--cp-primary);
    background-color: transparent;
}

.btn {
    border-color: var(--cp-border);
}

html[data-theme="dark"] .btn {
    color: var(--cp-text);
}

.btn-primary {
    background: var(--cp-secondary);
    border-color: var(--cp-secondary);
    color: #FFFFFF;
}

html[data-theme="dark"] .btn-primary {
    color: #07192C;
}

.btn-primary:hover {
    background: var(--cp-secondary-hover);
}

html:not([data-theme="dark"]) .btn-secondary {
    background: var(--cp-highlight);
    border-color: var(--cp-highlight);
    color: #1E1A00;
}

html:not([data-theme="dark"]) .btn-secondary:hover {
    background: var(--cp-highlight-hover);
}

.btn-cta {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
    color: #2A1200;
}

.btn-cta:hover {
    background: var(--cp-primary-hover);
}

.btn-outline-dark,
.btn-outline-secondary {
    background: transparent;
    color: var(--cp-secondary);
    border-color: var(--cp-secondary);
}

html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-secondary {
    background: transparent;
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover {
    background: var(--cp-secondary);
    color: #FFFFFF;
}

html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--cp-secondary-strong);
    color: #041321;
}

/* Checked quick filters. Beats the dark-mode transparent background and the light-mode navy-on-gray fill. */
.btn-check:checked + .btn-outline-dark,
.btn-check:checked + .btn-outline-secondary,
html[data-theme="dark"] .btn-check:checked + .btn-outline-dark,
html[data-theme="dark"] .btn-check:checked + .btn-outline-secondary,
html[data-theme="dark"] .btn-check:checked + .btn-outline-dark:hover,
html[data-theme="dark"] .btn-check:checked + .btn-outline-secondary:hover {
    background: var(--cp-secondary);
    border-color: var(--cp-secondary);
    color: #FFFFFF;
}

html:not([data-theme="dark"]) .btn:disabled {
    opacity: .65;
    background: #F3F5F8;
}

.form-control,
.form-select {
    background: #FFFFFF;
    border: 1px solid var(--cp-border);
    color: var(--cp-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: var(--bg-muted);
    color: var(--cp-text);
}

/* Toolbar accent groups size to the select. The 6px bar is the cp-accent span. */
body.cp-admin .cp-select-accent {
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
}

body.cp-admin .cp-select-accent > .form-select,
body.cp-admin .cp-select-accent > .icon-picker-toggle {
    width: auto;
    flex: 1 1 auto;
}

/* Grid menus draw their own selects. Same 6px maintenance primary, no shared-grid change. */
body.cp-admin select.form-select:not([multiple]):not([size]),
body.cp-admin select.form-select:not([multiple]):not([size]):focus {
    border-left-width: 6px;
    border-left-color: var(--cp-primary);
}

body.cp-admin .input-group > select.form-select:not([multiple]):not([size]),
body.cp-admin .input-group > select.form-select:not([multiple]):not([size]):focus {
    border-left-width: var(--bs-border-width, 1px);
    border-left-color: var(--cp-border);
}

/* Options panel inputs match the selects above. Search boxes stay plain. */
body.cp-admin .gc-options-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body.cp-admin .gc-options-panel textarea.form-control,
body.cp-admin .gc-options-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
body.cp-admin .gc-options-panel textarea.form-control:focus {
    border-left-width: 6px;
    border-left-color: var(--cp-primary);
}

body.cp-admin .gc-options-panel .input-group > input.form-control,
body.cp-admin .gc-options-panel .input-group > textarea.form-control,
body.cp-admin .gc-options-panel .input-group > input.form-control:focus,
body.cp-admin .gc-options-panel .input-group > textarea.form-control:focus {
    border-left-width: var(--bs-border-width, 1px);
    border-left-color: var(--cp-border);
}

/* Report and Home Options panels use Reports → Primary. Maintenance stays above. */
body:not(.cp-admin) .gc-options-panel select.form-select:not([multiple]):not([size]),
body:not(.cp-admin) .gc-options-panel select.form-select:not([multiple]):not([size]):focus,
body:not(.cp-admin) .gc-options-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body:not(.cp-admin) .gc-options-panel textarea.form-control,
body:not(.cp-admin) .gc-options-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
body:not(.cp-admin) .gc-options-panel textarea.form-control:focus {
    border-left-width: 6px;
    border-left-color: var(--cp-primary);
}

body:not(.cp-admin) .gc-options-panel .input-group > select.form-select:not([multiple]):not([size]),
body:not(.cp-admin) .gc-options-panel .input-group > select.form-select:not([multiple]):not([size]):focus,
body:not(.cp-admin) .gc-options-panel .input-group > input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body:not(.cp-admin) .gc-options-panel .input-group > textarea.form-control,
body:not(.cp-admin) .gc-options-panel .input-group > input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
body:not(.cp-admin) .gc-options-panel .input-group > textarea.form-control:focus {
    border-left-width: var(--bs-border-width, 1px);
    border-left-color: var(--cp-border);
}

.form-control::placeholder {
    color: var(--cp-text-muted);
}

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

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cp-secondary);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: var(--cp-secondary-strong);
}

footer.sticky-footer {
    background: #F3F4F7;
    border-top: 1px solid var(--cp-border);
    color: var(--cp-text);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] footer.sticky-footer {
    background: #3B4452;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.35);
}

#site-theme-toggle-slot .theme-toggle.btn-group .btn[data-choice] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    color: var(--cp-primary-hover);
    padding: 0.35rem 0.6rem;
    line-height: 1.1;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

html[data-theme="dark"] #site-theme-toggle-slot .theme-toggle.btn-group .btn[data-choice] {
    border-radius: 50rem;
    transition: all .15s ease;
}

#site-theme-toggle-slot .theme-toggle .btn[data-choice] i {
    color: var(--cp-primary-hover);
}

#site-theme-toggle-slot .theme-toggle .btn[data-choice]:hover {
    background: var(--cp-highlight-soft);
    border-color: var(--cp-primary);
    color: var(--cp-primary-hover);
}

html[data-theme="dark"] #site-theme-toggle-slot .theme-toggle .btn[data-choice]:hover {
    background: rgba(255, 122, 0, 0.18);
}

#site-theme-toggle-slot .theme-toggle .btn[data-choice].active,
html:not([data-theme="dark"])[data-theme-choice="light"] #site-theme-toggle-slot [data-choice="light"],
html:not([data-theme="dark"])[data-theme-choice="dark"] #site-theme-toggle-slot [data-choice="dark"],
html:not([data-theme="dark"])[data-theme-choice="auto"] #site-theme-toggle-slot [data-choice="auto"] {
    background: rgba(255, 122, 0, 0.18);
    border-color: var(--cp-primary-hover);
    color: #7A2F00;
    box-shadow: inset 0 0 0 2px rgba(255, 122, 0, 0.35);
}

html[data-theme="dark"] #site-theme-toggle-slot .theme-toggle .btn[data-choice].active,
html[data-theme="dark"][data-theme-choice="light"] #site-theme-toggle-slot [data-choice="light"],
html[data-theme="dark"][data-theme-choice="dark"] #site-theme-toggle-slot [data-choice="dark"],
html[data-theme="dark"][data-theme-choice="auto"] #site-theme-toggle-slot [data-choice="auto"] {
    background: rgba(255, 122, 0, 0.28);
    color: #1E1200;
}

#site-theme-toggle-slot .theme-toggle .btn[data-choice].active i,
html:not([data-theme="dark"])[data-theme-choice="light"] #site-theme-toggle-slot [data-choice="light"] i,
html:not([data-theme="dark"])[data-theme-choice="dark"] #site-theme-toggle-slot [data-choice="dark"] i,
html:not([data-theme="dark"])[data-theme-choice="auto"] #site-theme-toggle-slot [data-choice="auto"] i {
    color: #7A2F00;
}

html[data-theme="dark"] #site-theme-toggle-slot .theme-toggle .btn[data-choice].active i,
html[data-theme="dark"][data-theme-choice="light"] #site-theme-toggle-slot [data-choice="light"] i,
html[data-theme="dark"][data-theme-choice="dark"] #site-theme-toggle-slot [data-choice="dark"] i,
html[data-theme="dark"][data-theme-choice="auto"] #site-theme-toggle-slot [data-choice="auto"] i {
    color: #1E1200;
}

#site-theme-toggle-slot .theme-toggle .btn[data-choice]:focus-visible {
    outline: 2px solid var(--cp-primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 122, 0, 0.35);
}

.widget-open-link {
    color: var(--cp-secondary);
}

.widget-open-link:hover,
.widget-open-link:focus-visible {
    color: var(--cp-primary);
}

html:not([data-theme="dark"]) .fa,
html:not([data-theme="dark"]) .fas,
html:not([data-theme="dark"]) .far,
html:not([data-theme="dark"]) .fal,
html:not([data-theme="dark"]) .fat,
html:not([data-theme="dark"]) .fab {
    color: var(--cp-secondary);
    transition: color .15s ease, opacity .15s ease;
}

html:not([data-theme="dark"]) .fad {
    --fa-primary-color: var(--cp-secondary);
    --fa-secondary-color: rgba(255, 122, 0, 0.28);
    transition: 0.2s ease;
}

html[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--blue-ov-12, rgba(26,140,255,.12));
    color: var(--text);
}

html[data-theme="dark"] .dropdown-header {
    color: var(--text-muted);
}

.dropdown-menu .cp-menu-group {
    --cp-group: var(--cp-primary);
}

.dropdown-menu .cp-menu-group-config {
    --cp-group: var(--cp-secondary);
}

.dropdown-menu .cp-menu-group-reports {
    --cp-group: var(--cp-primary);
}

.dropdown-menu .cp-menu-group-dev {
    --cp-group: var(--cp-highlight);
}

.dropdown-menu .cp-menu-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-left: 3px solid var(--cp-group);
    border-radius: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dropdown-menu .cp-menu-group-toggle .fa-chevron-right {
    transition: transform .15s ease;
}

.dropdown-menu .cp-menu-group-toggle:not(.collapsed) .fa-chevron-right {
    transform: rotate(90deg);
}

.dropdown-menu .cp-menu-group-items {
    border-left: 3px solid var(--cp-group);
    margin: 0 .5rem .35rem .75rem;
    background: color-mix(in srgb, var(--cp-group) 12%, transparent);
    border-radius: 0 .25rem .25rem 0;
}

html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border);
}

html[data-theme="dark"] .text-gray-400 {
    color: var(--text-muted) !important;
}

/* User icon and name. nav-grey-f is #303b46, the same color as the dark top bar. */
html[data-theme="dark"] #mainTopNav .nav-grey-f {
    color: #E6EAF0;
}

html[data-theme="dark"] #mainTopNav .nav-link:hover .nav-grey-f,
html[data-theme="dark"] #mainTopNav .nav-link:focus .nav-grey-f {
    color: #FFFFFF;
}

html[data-theme="dark"] .help-shot {
    background: var(--bg-muted);
    border-color: var(--border);
}

html[data-theme="dark"] .widget-chrome-btn {
    color: var(--text-muted);
}

html[data-theme="dark"] .icon-picker-menu {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .icon-picker-option {
    color: var(--text);
}

html[data-theme="dark"] .icon-picker-option:hover,
html[data-theme="dark"] .icon-picker-option.is-active {
    background: var(--blue-ov-12, rgba(26,140,255,.12));
    color: var(--icon-default);
}

html[data-theme="dark"] .icon-picker-toggle {
    background-color: var(--bg-muted);
    color: var(--text);
    border-color: var(--border);
}

/* theme-boot sets data-theme, so dark modals follow that attribute. */
html[data-theme="dark"] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="dark"] .modal {
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color);
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-footer-border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

html[data-theme="dark"] .modal-content {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

html[data-theme="dark"] .modal-title {
    color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .modal-body {
    color: var(--bs-body-color);
}

html[data-theme="dark"] .modal-content .form-control,
html[data-theme="dark"] .modal-content .form-select {
    background-color: var(--bs-darkmode-input-bg, #2b2b2e);
    color: var(--bs-darkmode-input-text, #f1f1f1);
    border-color: var(--bs-border-color);
}

html[data-theme="dark"] .modal-content .form-control:focus,
html[data-theme="dark"] .modal-content .form-select:focus {
    background-color: var(--bs-darkmode-input-bg, #2b2b2e);
    color: var(--bs-darkmode-input-text, #f1f1f1);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
}

/* Spinner centered on a chart while its data request is in flight. */
.chart-stage {
    position: relative;
}

.chart-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    background: var(--cp-surface);
    color: var(--cp-text-muted);
    pointer-events: none;
}

.chart-month-hint {
    margin: 0.35rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--cp-text-muted, #6c757d);
}