/* ============================================================================
   Workspace density — the compact sizing contract for the administrative
   workspace: control heights, field padding, label rhythm, card spacing and
   the shared status banner.

   Load order is part of the contract. App.razor links this sheet after the
   scoped component bundle (and the route's scoped slice) and before the rest
   of core/, so these sizes replace component defaults of equal specificity
   while shared primitives and feature sheets still refine them. Public
   layouts do not load it.
   ============================================================================ */

:root {
    --compact-control-height: var(--sp-control-height);
    --compact-control-font-size: 14px;
    --compact-radius: var(--sp-control-radius);
}

@media (max-width: 767.98px), (pointer: coarse) {
    :root {
        --compact-control-height: var(--sp-control-height-touch);
        --compact-control-font-size: 16px;
    }
}

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

.card-panel {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: var(--sp-radius-lg);
}

.table-card-header {
    padding: 10px 14px;
}

.card-panel > :last-child,
.table-card-header > :last-child,
.form-field > :last-child {
    margin-bottom: 0;
}

.empty-state {
    padding: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

/* ---- Forms ------------------------------------------------------------ */

.form-grid {
    gap: 8px 10px;
}

.form-field {
    gap: 0;
    margin-bottom: 0;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(
        .ui-select-search
    ),
select,
textarea,
.form-control {
    min-height: var(--compact-control-height);
    padding: 6px 9px;
    border-radius: var(--compact-radius);
    font-size: var(--compact-control-font-size);
    line-height: 1.2;
}

/* Default-size enhanced selects take the same text size and line height as
   the compact inputs above, so a select beside a text or date field keeps
   its height (the trigger padding fits inside the shared control height). */
.ui-select:not([data-size="sm"]) {
    font-size: var(--compact-control-font-size);
    line-height: 1.2;
}

textarea,
textarea.form-control {
    min-height: 64px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--sp-color-ink-subtle);
    opacity: 1;
}

label:not(.compact-label-inside) {
    margin-bottom: 3px;
    font-size: 13px;
    line-height: 1.15;
}

/* Field labels that compactFormLabels.js restores or generates from a
   placeholder: a small, heavy caption directly above the control. */
label.compact-label-inside,
label.visible-field-label,
label.auto-field-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 3px;
    padding: 0;
    overflow: visible;
    clip: auto;
    border: 0;
    color: var(--sp-color-ink-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
}

label.auto-field-label {
    letter-spacing: 0.01em;
}

.visible-label-form-field {
    gap: 3px;
}

/* ---- Actions ---------------------------------------------------------- */

.button-row {
    margin-top: 9px;
    gap: 6px;
}

.btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
}

.btn-sm {
    min-height: 27px;
    padding: 4px 7px;
    font-size: 12px;
}

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

.table th,
.table td {
    padding: 7px 9px;
}

/* ---- Status banners ---------------------------------------------------
   Bootstrap alerts become one banner: tone border on the leading edge, a
   status glyph, and tone colours from semantic tokens in both themes. */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 12px 0 16px;
    padding: 12px 14px;
    border-width: 1px;
    border-left-width: 4px;
    border-style: solid;
    border-radius: var(--sp-radius-md);
    box-shadow: var(--sp-shadow-sm);
    font-size: var(--sp-font-size-sm);
    font-weight: 650;
    letter-spacing: 0;
    line-height: var(--sp-line-height-body);
    overflow-wrap: anywhere;
    animation: var(--sp-motion-rise-in);
}

.alert::before {
    --sp-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    content: "";
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    background: currentColor;
    -webkit-mask: var(--sp-status-icon) center / contain no-repeat;
    mask: var(--sp-status-icon) center / contain no-repeat;
}

.alert-success {
    border-color: var(--sp-color-success);
    background: var(--sp-color-success-soft);
    color: var(--sp-color-success);
}

.alert-success::before {
    --sp-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.7 2.7L16.5 9'/%3E%3C/svg%3E");
}

.alert-warning {
    border-color: var(--sp-color-warning);
    background: var(--sp-color-warning-soft);
    color: var(--sp-color-warning);
}

.alert-warning::before {
    --sp-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.alert-danger {
    border-color: var(--sp-color-danger);
    background: var(--sp-color-danger-soft);
    color: var(--sp-color-danger-text);
}

.alert-danger::before {
    --sp-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6'/%3E%3Cpath d='m15 9-6 6'/%3E%3C/svg%3E");
}

.alert-info,
.alert-primary {
    border-color: var(--sp-color-brand);
    background: var(--sp-color-brand-soft);
    color: var(--sp-color-brand-strong);
}

/* Neutral notes sit on the raised surface in the dark theme; Bootstrap's own
   dark greys do not belong to the application palette. */
html[data-theme="dark"] :is(.alert-secondary, .alert-light) {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface-raised);
    color: var(--sp-color-ink);
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .alert {
        gap: 10px;
        margin: 10px 0 14px;
        padding: 11px 12px;
    }

    .alert::before {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }
}