/* ============================================================================
   Workspace base — element defaults and content primitives for the
   administrative workspace and its sign-in shell.

   Load order is part of the contract. App.razor links this sheet first among
   the workspace sheets, before the scoped component bundle, so every component
   style (and every rule in ui-workspace-density.css, core/ and features/)
   outranks it at equal specificity. Public layouts do not load it.

   Only element defaults and generic primitives belong here. Theme colour that
   must win over component styles lives in ui-theme.css; compact sizing that
   must win over component styles lives in ui-workspace-density.css.
   ============================================================================ */

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--sp-color-canvas);
    color: var(--sp-color-ink-strong);
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4 {
    color: var(--sp-color-ink);
}

/* ---- Application shell ------------------------------------------------ */

/* The shell paints its canvas on a fixed layer so the optional snow photo
   (the "background image" preference) stays put while the page scrolls. */
.app-layout {
    position: relative;
    isolation: isolate;
    background: transparent;
}

.app-layout::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--sp-color-canvas);
}

body.snow-background-enabled .app-layout::before {
    background:
        linear-gradient(rgb(var(--sp-rgb-canvas) / 0.93), rgb(var(--sp-rgb-canvas) / 0.96)),
        url("/images/SnowPlow.webp?v=1") center center / cover no-repeat fixed;
}

html[data-theme="dark"] body.snow-background-enabled .app-layout::before {
    background:
        linear-gradient(rgb(var(--sp-rgb-canvas) / 0.94), rgb(var(--sp-rgb-canvas) / 0.97)),
        url("/images/SnowPlow.webp?v=1") center center / cover no-repeat fixed;
}

/* At phone width the open navigation drawer is modal: the page under its scrim
   must not scroll, as with an open dialog (body.ui-modal-open). */
@media (max-width: 700px) {
    body:has(.app-layout:not(.navigation-collapsed)) {
        overflow: hidden;
    }
}

.app-sidebar {
    align-self: flex-start;
    color: var(--sp-color-white);
}

.app-main {
    flex: 1;
    background: transparent;
}

.app-content {
    margin: 0 auto;
    background: transparent;
}

/* ---- Content primitives ---------------------------------------------- */

.card-panel {
    border: 1px solid var(--sp-color-border);
    background: var(--sp-color-surface);
    box-shadow: 0 8px 20px rgb(var(--sp-rgb-ink) / 0.08);
}

.table-card {
    overflow: hidden;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--sp-color-border);
    background: var(--sp-color-surface);
    box-shadow: 0 8px 20px rgb(var(--sp-rgb-ink) / 0.08);
}

@media (max-width: 900px) {
    .table-card {
        padding: 10px;
    }
}

.table-card-header {
    border-bottom: 1px solid var(--sp-color-border);
    background: var(--sp-color-surface-raised);
}

.table-card-header h4,
.table-card-header h2.h4 {
    margin: 0;
}

.card-panel h4,
.card-panel h2.h4,
.table-card h4,
.table-card h2.h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.15;
}

.card-panel p,
.table-card p {
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.25;
}

.empty-state {
    color: var(--sp-color-ink-subtle);
}

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

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

label {
    color: var(--sp-color-ink-secondary);
    font-weight: 700;
}

.form-field small,
small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.2;
}

/* Field sizes here apply to the types ui-workspace-density.css leaves out
   (range, colour and file inputs); every other field takes the compact size. */
input:not([type="checkbox"]):not([type="radio"]),
select,
.form-control {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--sp-color-border-strong);
    border-radius: 9px;
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    font-size: 15px;
}

select.form-control,
textarea.form-control {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
.form-control:focus {
    border-color: var(--sp-color-info);
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--sp-rgb-info) / 0.2);
}

/* Bootstrap sizes the members of an input group with `width: 1%` plus
   flex-grow so the attached button keeps its place on the same line. The
   field rule above outranks Bootstrap's, so grouped controls restore it. */
.input-group > input:not([type="checkbox"]):not([type="radio"]),
.input-group > select,
.input-group > .form-control,
.input-group > .form-select {
    width: 1%;
    min-width: 0;
}

/* Every single-select stays recognisable as a dropdown, including compact
   native selects that UiSelectField does not enhance. */
select:not([multiple]):not(.form-select) {
    appearance: none;
    padding-right: 30px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--sp-color-ink-muted) 50%),
        linear-gradient(135deg, var(--sp-color-ink-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 10px) 50%;
    background-size:
        4px 4px,
        4px 4px;
    background-repeat: no-repeat;
}

select:not([multiple]):not(.form-select):disabled {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--sp-color-ink-faint) 50%),
        linear-gradient(135deg, var(--sp-color-ink-faint) 50%, transparent 50%);
}

/* ---- Buttons ---------------------------------------------------------- */

.btn {
    /* Transparent rather than `none`: solid buttons keep the borderless look
       and outline variants paint the same box without changing its size. */
    border: 1px solid transparent;
    font-weight: 750;
    cursor: pointer;
}

/* Bootstrap outline variants publish their border colour only through a
   custom property. `:where()` keeps this at `.btn` specificity so Bootstrap's
   own hover, active and disabled rules still win. */
.btn:where([class*="btn-outline-"]) {
    border-color: var(--bs-btn-border-color);
}

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

.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.table th {
    border-bottom: 1px solid var(--sp-color-border);
    background: var(--sp-color-surface-raised);
    color: var(--sp-color-ink-muted);
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.table td {
    border-bottom: 1px solid var(--sp-color-canvas);
}

.table th,
.table td {
    font-size: 13px;
    vertical-align: middle;
}

.table-striped tbody tr:nth-child(odd) {
    background: var(--sp-color-surface);
}

/* Leaflet does not size its container; admin maps fill their host. */
.leaflet-container {
    width: 100%;
    height: 100%;
}