/* ============================================================================
   Shared theme — the application palette applied to Bootstrap primitives and
   element defaults, in both themes and both shells.

   Load order is part of the contract. App.razor links this sheet after every
   other core sheet (and after ui-data-table.css on workspace routes), so these
   rules settle colour for generic elements over component styles of equal
   specificity. Route feature sheets load later still and can refine them.

   Only generic selectors belong here: elements, Bootstrap classes, `.ui-*`
   primitives and the workspace content shell. A rule that names a page,
   feature or component belongs beside its owner — in that component's
   .razor.css or the feature's stylesheet — including its dark-theme variant.
   ============================================================================ */

/* ---- Document --------------------------------------------------------- */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .workspace-body {
    background: var(--sp-color-canvas);
    color: var(--sp-color-ink);
}

/* Headings, labels and cells take the colour of their surface in the dark
   theme; captions that compactFormLabels.js reveals stay muted. :where keeps
   this default at element weight so a component's own colour (an error, a
   muted hint) still wins in the dark theme. */
html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6, label, legend, th, td, p, .form-label) {
    color: inherit;
}

html[data-theme="dark"] :is(label.compact-label-inside, label.visible-field-label, label.auto-field-label) {
    color: var(--sp-color-ink-muted);
}

:root .ui-field {
    gap: 5px;
}
.row > .ui-field {
    margin-bottom: 0;
}

/* Shared reference labels and compact desktop controls; public forms retain
   their larger composition and touch targets stay accessible. */
.ui-field > .form-label {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}
.ui-field > :is(.form-control, .form-select),
.ui-field > .ui-currency-input > .form-control {
    min-height: var(--sp-control-height);
    padding: 7px 10px;
    border-radius: var(--sp-control-radius);
    font-size: 13px;
    line-height: 1.25;
    background-color: var(--sp-color-surface);
    border-color: var(--sp-color-border);
}
.public-layout .ui-field > :is(.form-control, .form-select),
.public-layout .ui-field > .ui-currency-input > .form-control {
    min-height: var(--sp-control-height-touch);
    padding: 10px 12px;
    border-radius: var(--sp-radius-md);
    font-size: 16px;
}
.ui-select-control {
    background-color: var(--sp-color-surface);
}
.ui-field > :is(.form-control-sm, .form-select-sm),
.ui-field > .ui-currency-input > .form-control-sm {
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 13px;
}

.ui-field:has(
        > .form-control-sm,
        > .form-select-sm,
        > .ui-select[data-size="sm"],
        > .ui-currency-input > .form-control-sm
    )
    > .form-label {
    font-size: 11px;
}
.ui-button {
    min-height: var(--sp-control-height);
    padding: 7px 12px;
    border-radius: var(--sp-control-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.ui-button.btn-lg {
    min-height: 46px;
    padding: 12px 16px;
    font-size: 16px;
}
.ui-button.btn-sm {
    min-height: var(--sp-control-height-sm);
    padding: 4px 8px;
    border-radius: var(--sp-control-radius);
    font-size: 12.5px;
}
.ui-modal {
    border-radius: var(--sp-radius-dialog);
}
.modal-content {
    --bs-modal-bg: var(--sp-color-surface);
    --bs-modal-border-color: var(--sp-color-border);
    --bs-modal-border-radius: var(--sp-radius-dialog);
    box-shadow: var(--sp-shadow-md);
}
.ui-button.ui-table-filter-chip {
    --sp-control-radius: var(--sp-radius-pill);
    padding-inline: var(--sp-space-3);
}
.ui-button.ui-table-filter-chip[aria-pressed="false"] {
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    border-color: var(--sp-color-border);
}
.ui-button.ui-table-filter-chip[aria-pressed="false"]:hover {
    background: var(--sp-color-brand-soft);
    border-color: var(--sp-color-brand-border);
}
.ui-modal > .modal-header,
.ui-modal > .modal-footer {
    padding: 14px 18px;
}
.ui-modal .modal-title {
    font-size: 17px;
    font-weight: 700;
}
/* A long unbroken title, such as an accepted 160-character company name, wraps
   inside the header instead of widening the dialog past the viewport. */
.ui-modal > .modal-header > :is(h1, h2, h3, h4, h5, h6) {
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (pointer: coarse), (max-width: 700px) {
    .ui-button,
    .ui-button.btn-sm,
    .ui-field > :is(.form-control, .form-select),
    .ui-field > .ui-currency-input > .form-control {
        min-height: var(--sp-control-height-touch);
    }
    .ui-field > :is(.form-control, .form-select),
    .ui-field > .ui-currency-input > .form-control {
        font-size: 16px;
    }
    /* Bootstrap fixes the colour swatch height; it matches the fields beside it. */
    .ui-field > .form-control-color {
        height: var(--sp-control-height-touch);
    }
}

/* ---- Actions: Bootstrap mechanics, semantic palette ------------------- */

.btn-primary {
    --bs-btn-color: var(--sp-color-button-on-primary);
    --bs-btn-bg: var(--sp-color-button-primary);
    --bs-btn-border-color: var(--sp-color-button-primary);
    --bs-btn-hover-color: var(--sp-color-button-on-primary);
    --bs-btn-hover-bg: var(--sp-color-button-primary-hover);
    --bs-btn-hover-border-color: var(--sp-color-button-primary-hover);
    --bs-btn-active-color: var(--sp-color-button-on-primary);
    --bs-btn-active-bg: var(--sp-color-button-primary-active);
    --bs-btn-active-border-color: var(--sp-color-button-primary-active);
    --bs-btn-disabled-color: var(--sp-color-button-on-primary);
    --bs-btn-disabled-bg: var(--sp-color-button-primary);
    --bs-btn-disabled-border-color: var(--sp-color-button-primary);
    border-color: var(--sp-color-button-primary);
    background-color: var(--sp-color-button-primary);
    color: var(--sp-color-button-on-primary);
    box-shadow: 0 1px 2px rgb(var(--sp-rgb-brand) / 0.2);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    border-color: var(--sp-color-button-primary-hover);
    background-color: var(--sp-color-button-primary-hover);
    color: var(--sp-color-button-on-primary);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    border-color: var(--sp-color-button-primary-active);
    background-color: var(--sp-color-button-primary-active);
}

.btn-success {
    --sp-action-fill: var(--sp-color-success-button);
}

.btn-danger {
    --sp-action-fill: var(--sp-color-danger-button);
}

.btn-success,
.btn-danger {
    --bs-btn-color: var(--sp-color-white);
    --bs-btn-bg: var(--sp-action-fill);
    --bs-btn-border-color: var(--sp-action-fill);
    --bs-btn-hover-color: var(--sp-color-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sp-action-fill) 88%, black);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--sp-color-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--sp-action-fill) 78%, black);
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-disabled-color: var(--sp-color-white);
    --bs-btn-disabled-bg: var(--sp-action-fill);
    --bs-btn-disabled-border-color: var(--sp-action-fill);
}

.btn-secondary,
.btn-light {
    --bs-btn-color: var(--sp-color-ink-secondary);
    --bs-btn-bg: var(--sp-color-surface-raised);
    --bs-btn-border-color: var(--sp-color-border-strong);
    --bs-btn-hover-color: var(--sp-color-ink);
    --bs-btn-hover-bg: var(--sp-color-brand-soft);
    --bs-btn-hover-border-color: var(--sp-color-brand-border);
    --bs-btn-active-color: var(--sp-color-ink);
    --bs-btn-active-bg: var(--sp-color-surface-muted);
    --bs-btn-active-border-color: var(--sp-color-brand-border);
    --bs-btn-disabled-color: var(--sp-color-ink-muted);
    --bs-btn-disabled-bg: var(--sp-color-surface-raised);
    --bs-btn-disabled-border-color: var(--sp-color-border);
    border-color: var(--sp-color-border-strong);
    background-color: var(--sp-color-surface-raised);
    color: var(--sp-color-ink-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-light:hover,
.btn-light:focus-visible {
    border-color: var(--sp-color-brand-border);
    background-color: var(--sp-color-brand-soft);
    color: var(--sp-color-ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--sp-color-brand-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sp-color-brand-border);
    --bs-btn-hover-color: var(--sp-color-button-on-primary);
    --bs-btn-hover-bg: var(--sp-color-button-primary);
    --bs-btn-hover-border-color: var(--sp-color-button-primary);
    --bs-btn-active-color: var(--sp-color-button-on-primary);
    --bs-btn-active-bg: var(--sp-color-button-primary-active);
    --bs-btn-active-border-color: var(--sp-color-button-primary-active);
    --bs-btn-disabled-color: var(--sp-color-brand-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--sp-color-brand-border);
    border-color: var(--sp-color-brand-border);
    background-color: transparent;
    color: var(--sp-color-brand-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    border-color: var(--sp-color-button-primary);
    background-color: var(--sp-color-button-primary);
    color: var(--sp-color-button-on-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sp-color-ink-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sp-color-border-strong);
    --bs-btn-hover-color: var(--sp-color-ink);
    --bs-btn-hover-bg: var(--sp-color-surface-muted);
    --bs-btn-hover-border-color: var(--sp-color-brand-border);
    --bs-btn-active-color: var(--sp-color-ink);
    --bs-btn-active-bg: var(--sp-color-brand-soft);
    --bs-btn-active-border-color: var(--sp-color-brand-border);
    --bs-btn-disabled-color: var(--sp-color-ink-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--sp-color-border);
    border-color: var(--sp-color-border-strong);
    background-color: transparent;
    color: var(--sp-color-ink-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    border-color: var(--sp-color-brand-border);
    background-color: var(--sp-color-surface-muted);
    color: var(--sp-color-ink);
}

/* Bootstrap's fixed #dc3545 label falls below 4.5:1 on dark and tinted cards;
   the danger text token is readable on both. Hover keeps Bootstrap's fill. */
.btn-outline-danger {
    --bs-btn-color: var(--sp-color-danger-text);
    --bs-btn-disabled-color: var(--sp-color-danger-text);
}

/* ---- Fields ----------------------------------------------------------- */

html[data-theme="dark"]
    :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
    border-color: var(--sp-color-border-strong);
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
}

html[data-theme="dark"]
    :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select)::placeholder {
    color: var(--sp-color-ink-subtle);
}

.workspace-body :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: var(--sp-color-border-strong);
    background-color: var(--sp-color-surface);
    color: var(--sp-color-ink);
}

html[data-theme="dark"]
    .workspace-body
    :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: var(--sp-color-border-strong);
    background-color: var(--sp-color-surface);
    color: var(--sp-color-ink);
    color-scheme: dark;
}

/* The workspace field colours above also outrank the base focus border, which left only a faint
   20% ring (about 1.15:1) on a focused field. A focused field keeps the info border and a solid
   inner ring so keyboard focus stays visible (WCAG 2.4.7 / 1.4.11) in both themes; an invalid
   field below still shows its danger border. */
.workspace-body
    :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
html[data-theme="dark"]
    .workspace-body
    :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--sp-color-info);
    outline: none;
    box-shadow:
        0 0 0 1px var(--sp-color-info),
        0 0 0 4px rgb(var(--sp-rgb-info) / 0.25);
}

/* The workspace field colours above outrank Bootstrap's .is-invalid border, so a
   field marked invalid restores the danger border in both themes. */
.workspace-body
    :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea).is-invalid,
html[data-theme="dark"]
    .workspace-body
    :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea).is-invalid {
    border-color: var(--sp-color-danger);
}

.workspace-body
    :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
    color: var(--sp-color-ink-subtle);
    opacity: 1;
}

.workspace-body :is(.form-field > label, .form-group > label, .field > label) {
    color: var(--sp-color-ink-muted);
}

/* ---- Tables ----------------------------------------------------------- */

html[data-theme="dark"] :is(table, .table) {
    --bs-table-bg: var(--sp-color-surface);
    --bs-table-color: var(--sp-color-ink);
    --bs-table-border-color: var(--sp-color-border);
    color: var(--sp-color-ink);
}

html[data-theme="dark"] :is(th, .table > :not(caption) > * > th) {
    background: var(--sp-color-surface-raised);
}

html[data-theme="dark"] :is(td, th) {
    border-color: var(--sp-color-border);
}

.workspace-body .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Surfaces --------------------------------------------------------- */

.card {
    --bs-card-border-radius: var(--sp-radius-lg);
    --bs-card-border-color: var(--sp-color-border);
    --bs-card-bg: var(--sp-color-surface);
    --bs-card-color: var(--sp-color-ink);
    --bs-card-spacer-x: var(--sp-panel-padding);
    --bs-card-spacer-y: var(--sp-panel-padding);
    --bs-card-cap-padding-x: var(--sp-panel-padding);
    --bs-card-cap-padding-y: var(--sp-space-3);
    --bs-card-cap-bg: var(--sp-color-surface);
}

.badge:is(.text-bg-primary, .text-bg-info) {
    background-color: var(--sp-color-brand-soft) !important;
    color: var(--sp-color-brand-text) !important;
}

.badge.text-bg-success {
    background-color: var(--sp-color-success-soft) !important;
    color: var(--sp-color-success-text) !important;
}

.badge.text-bg-warning {
    background-color: var(--sp-color-warning-soft) !important;
    color: var(--sp-color-warning-text) !important;
}

.badge.text-bg-danger {
    background-color: var(--sp-color-danger-soft) !important;
    color: var(--sp-color-danger-text) !important;
}

.text-danger {
    color: var(--sp-color-danger-text) !important;
}

.text-primary {
    color: var(--sp-color-brand-text) !important;
}

.badge:is(.text-bg-secondary, .text-bg-light) {
    background-color: var(--sp-color-surface-muted) !important;
    color: var(--sp-color-ink-muted) !important;
}

/* Content cards in the workspace share one surface regardless of the
   component that renders them. */
.workspace-body :is(.card-panel, .table-card) {
    border-color: var(--sp-color-border);
    border-radius: var(--sp-radius-lg);
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    box-shadow: var(--sp-shadow-sm);
}

.workspace-body :is(.table-card-header, .card-header) {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface-raised);
    color: var(--sp-color-ink);
}

.workspace-body :is(.card-panel, .table-card) :is(h1, h2, h3, h4) {
    color: var(--sp-color-ink);
}

.workspace-body :is(.card-panel p, .table-card p, .empty-state) {
    color: var(--sp-color-ink-muted);
}

html[data-theme="dark"] :is(.card, .card-panel, .table-card) {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    box-shadow: var(--sp-shadow-sm);
}

html[data-theme="dark"] :is(.table-card-header, .card-header) {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface-raised);
    color: var(--sp-color-ink);
}

/* Bootstrap 5.3 colour mode follows data-bs-theme while the application owns
   the palette; keep Bootstrap cards and utilities on the workspace surfaces. */
html[data-theme="dark"] .workspace-body .card {
    --bs-card-bg: var(--sp-color-surface);
    --bs-card-color: var(--sp-color-ink);
    --bs-card-border-color: var(--sp-color-border);
    border-color: var(--sp-color-border);
    background-color: var(--sp-color-surface);
    color: var(--sp-color-ink);
}

html[data-theme="dark"] .workspace-body :is(.card-header.bg-body, .card-footer.bg-body) {
    border-color: var(--sp-color-border);
    background-color: var(--sp-color-surface-raised) !important;
    color: var(--sp-color-ink);
}

html[data-theme="dark"] .workspace-body .bg-body-tertiary {
    background-color: var(--sp-color-surface-muted) !important;
    color: var(--sp-color-ink);
}

html[data-theme="dark"] .workspace-body .text-body-secondary {
    color: var(--sp-color-ink-muted) !important;
}

html[data-theme="dark"] .workspace-body .text-bg-light {
    border-color: var(--sp-color-border) !important;
    background-color: var(--sp-color-surface-raised) !important;
    color: var(--sp-color-ink) !important;
}

/* Dialogs and drawers. */
html[data-theme="dark"] :is(.modal-content, [role="dialog"], .drawer) {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
}

html[data-theme="dark"] :is(.modal-header, .modal-footer) {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface-raised);
}

/* Leaflet controls outside the shared zoom and tool groups. */
html[data-theme="dark"] .leaflet-control {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface-raised);
    color: var(--sp-color-ink);
}

/* Leaflet's default attribution link blue is 3:1 on the raised dark surface. */
html[data-theme="dark"] .leaflet-control-attribution a {
    color: var(--bs-link-color);
}

/* ---- Responsive page contract ------------------------------------------
   Feature styles keep their domain layouts; these rules stop common headers,
   forms, cards and action groups from staying desktop-shaped on a phone. */

.workspace-body .ui-page-header {
    min-width: 0;
}

.workspace-body .ui-page-header h1 {
    overflow-wrap: anywhere;
}

.workspace-body .ui-page-header p {
    max-width: 75ch;
}

@media (max-width: 700px) {
    /* The page header has no surface of its own, so its title and actions sit
       on the workspace gutter, flush with the cards below, with no blank band
       above the first action row. */
    .workspace-body .ui-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        margin-bottom: var(--sp-space-3);
        padding: 0;
    }

    /* WorkspaceHeader already shows the title and description, so a header
       without actions or a visible title only keeps its h1 for assistive
       technology and must not leave a blank band above the first card. */
    .workspace-body .ui-page-header:not(:has(.ui-page-header-actions, .ui-eyebrow, h1:not(.visually-hidden))) {
        gap: 0;
        margin: 0;
        padding: 0;
    }

    /* A header that keeps only its actions lines them up with the content edge
       below instead of insetting them by the header padding. */
    .workspace-body .ui-page-header:has(.ui-page-header-actions):not(:has(.ui-eyebrow, h1:not(.visually-hidden))) {
        gap: 0;
        padding: 0;
    }

    .workspace-body .ui-page-header h1 {
        font-size: 1.35rem;
        line-height: 1.08;
    }

    .workspace-body .ui-page-header p:not(.ui-eyebrow) {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .workspace-body :is(.ui-page-header-actions, .page-header-actions, .button-row) {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .workspace-body :is(.card-panel, .table-card) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .workspace-body :is(.card-panel, .table-card) > :is(.table-card-header, .card-header) {
        gap: 9px;
        padding: 12px 14px;
    }

    .workspace-body :is(.card-panel, .table-card) > :is(.table-card-header, .card-header) > :last-child {
        max-width: 100%;
    }

    .workspace-body .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-body :is(.form-field-wide, .full, .two, .three) {
        grid-column: auto;
    }
}

.ui-select:not(.ui-select-enhanced) > .form-select {
    background-color: var(--sp-color-surface);
    border-color: var(--sp-color-border);
}
.form-check-input {
    border-color: var(--sp-color-border-control);
    background-color: var(--sp-color-surface);
}
.form-check-input:checked {
    background-color: var(--sp-color-brand);
    border-color: var(--sp-color-brand);
}

/* Keep the native picker as the accessible, clickable dropzone surface. */
.ui-file-upload__dropzone > .ui-file-upload__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.ui-file-upload__input--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}