/*
  Strata design system.
  Flat, square, plain colors. No gradients, no rounded corners, no drop shadows, no decorative motion.
  Use the tokens below; don't hard-code colors or spacing in components.
  Live reference: /dev/styleguide (development only).
*/

/* ---------- Tokens ---------- */

/*
  Two themes: light (default) and dark, selected by data-theme on <html>.
  Components must only use the semantic tokens below, never raw hex values, so both themes stay correct.
  Icons that are SVG data URIs have their stroke color baked in, so each theme defines its own copy.
*/

:root {
    color-scheme: light;

    --color-page: #f4f4f4;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f4f4;
    --color-surface-active: #e0e0e0;
    --color-field: #ffffff;
    --color-disabled-bg: #e0e0e0;
    --color-table-header: #e0e0e0;
    --color-table-header-hover: #c6c6c6;
    --color-backdrop: rgba(22, 22, 22, 0.5);

    --color-border: #c6c6c6;
    --color-border-subtle: #e0e0e0;
    --color-border-strong: #8d8d8d;

    --color-text: #161616;
    --color-text-secondary: #525252;
    --color-text-muted: #6f6f6f;
    --color-text-disabled: #8d8d8d;
    --color-text-inverse: #ffffff;
    --color-link: #0f5ec7;

    --color-accent: #0f5ec7;
    --color-accent-hover: #0c4fa8;
    --color-accent-active: #093d82;
    --color-accent-subtle: #e6effb;
    --color-focus: #0f5ec7;

    --color-neutral-subtle: #e0e0e0;
    --color-neutral-text: #393939;

    --color-danger: #da1e28;
    --color-danger-fill: #da1e28;
    --color-danger-fill-hover: #b81922;
    --color-danger-text: #a2191f;
    --color-danger-subtle: #fff1f1;
    --color-danger-border: #ffb3b8;

    --color-warning: #f1c21b;
    --color-warning-text: #684e00;
    --color-warning-subtle: #fcf4d6;
    --color-warning-border: #e5c55d;

    --color-success: #198038;
    --color-success-text: #0e6027;
    --color-success-subtle: #defbe6;
    --color-success-border: #a7f0ba;

    --color-info: #0043ce;
    --color-info-text: #0043ce;
    --color-info-subtle: #edf5ff;
    --color-info-border: #a6c8ff;

    --color-shell: #161616;
    --color-shell-text: #f4f4f4;
    --color-shell-text-muted: #c6c6c6;
    --color-shell-hover: #393939;
    --color-shell-border: #161616;

    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23161616' stroke-width='1.5'/%3E%3C/svg%3E");
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23525252' stroke-width='1.5'/%3E%3C/svg%3E");

    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;

    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;

    --control-height: 32px;
    --control-height-sm: 24px;
    --row-height: 32px;
    --header-height: 48px;
    --sidenav-width: 240px;
    --explorer-tree-width: 300px;

    --transition-fast: 70ms ease-out;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-page: #161616;
    --color-surface: #262626;
    --color-surface-muted: #333333;
    --color-surface-active: #474747;
    --color-field: #262626;
    --color-disabled-bg: #393939;
    --color-table-header: #393939;
    --color-table-header-hover: #4c4c4c;
    --color-backdrop: rgba(0, 0, 0, 0.6);

    --color-border: #525252;
    --color-border-subtle: #393939;
    --color-border-strong: #6f6f6f;

    --color-text: #f4f4f4;
    --color-text-secondary: #c6c6c6;
    --color-text-muted: #a8a8a8;
    --color-text-disabled: #6f6f6f;
    --color-text-inverse: #ffffff;
    --color-link: #78a9ff;

    --color-accent: #1463df;
    --color-accent-hover: #0f55c4;
    --color-accent-active: #0b4399;
    --color-accent-subtle: #1c2f4d;
    --color-focus: #ffffff;

    --color-neutral-subtle: #393939;
    --color-neutral-text: #e0e0e0;

    --color-danger: #fa4d56;
    --color-danger-fill: #da1e28;
    --color-danger-fill-hover: #b81922;
    --color-danger-text: #ffb3b8;
    --color-danger-subtle: #3d1a1d;
    --color-danger-border: #750e13;

    --color-warning: #f1c21b;
    --color-warning-text: #fddc69;
    --color-warning-subtle: #3b3212;
    --color-warning-border: #8e6a00;

    --color-success: #42be65;
    --color-success-text: #6fdc8c;
    --color-success-subtle: #122e1c;
    --color-success-border: #0e6027;

    --color-info: #4589ff;
    --color-info-text: #a6c8ff;
    --color-info-subtle: #13233f;
    --color-info-border: #002d9c;

    --color-shell: #262626;
    --color-shell-text: #f4f4f4;
    --color-shell-text-muted: #c6c6c6;
    --color-shell-hover: #393939;
    --color-shell-border: #393939;

    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23f4f4f4' stroke-width='1.5'/%3E%3C/svg%3E");
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23c6c6c6' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 20px;
    color: var(--color-text);
    background: var(--color-page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}

h1 { font-size: var(--text-xl); line-height: 32px; font-weight: 400; }
h2 { font-size: var(--text-lg); line-height: 28px; font-weight: 400; }
h3 { font-size: var(--text-md); line-height: 24px; font-weight: 600; }
h4 { font-size: var(--text-sm); line-height: 20px; font-weight: 600; }

/* Blazor's FocusOnNavigate focuses the page h1; the outline there is noise. */
h1:focus { outline: none; }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-6) 0;
}

code, kbd, .mono {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Headings keep their own size when shown in the mono font (e.g. an equipment tag as the page title). */
h1.mono { font-size: var(--text-xl); }
h2.mono { font-size: var(--text-lg); }

/* ---------- Utilities ---------- */

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-xs); line-height: 16px; }
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-wrap; }

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Inside a stack the gap does the spacing, so drop the default text margins. */
.stack > :is(h1, h2, h3, h4, p) { margin: 0; }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Page structure ---------- */

.page {
    padding: var(--space-6) var(--space-7);
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.page-header h1 { margin: 0; }

.page-subtitle {
    margin: var(--space-1) 0 0;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--color-text-secondary);
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: var(--space-3);
    color: var(--color-text-muted);
}

.breadcrumb [aria-current="page"] { color: var(--color-text); }

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

.panel-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.panel-body { padding: var(--space-5); }

/* Read-only label/value pairs on detail pages. */
.detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-5) var(--space-6);
    margin: 0;
}

.detail-list dt {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--color-text-secondary);
}

.detail-list dd { margin: 0; }

.empty-state {
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state h3 { margin-bottom: var(--space-3); }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: var(--control-height);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: 0;
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover { text-decoration: none; }

.btn:focus-visible { outline-offset: -2px; }

.btn-primary { background: var(--color-accent); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-active); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-surface-muted); }
.btn-secondary:active { background: var(--color-surface-active); }

.btn-ghost { background: transparent; color: var(--color-link); }
.btn-ghost:hover { background: var(--color-surface-muted); }
.btn-ghost:active { background: var(--color-surface-active); }

.btn-danger { background: var(--color-danger-fill); color: var(--color-text-inverse); }
.btn-danger:hover { background: var(--color-danger-fill-hover); }

.btn-sm {
    height: var(--control-height-sm);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--color-disabled-bg);
    border-color: transparent;
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

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

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
    max-width: 800px;
}

.form-grid .span-all { grid-column: 1 / -1; }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
}

fieldset {
    margin: 0 0 var(--space-6);
    padding: 0;
    border: 0;
}

legend {
    margin-bottom: var(--space-4);
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field > label,
.field-label {
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--color-text-secondary);
}

.field-hint {
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--color-text-muted);
}

/* :where() keeps this at zero specificity, so :disabled, [readonly], .invalid and utility classes override it. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"])),
:where(select),
:where(textarea) {
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
    background: var(--color-field);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
}

textarea {
    height: auto;
    min-height: 80px;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
}

select {
    appearance: none;
    padding-right: var(--space-7);
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}

input::placeholder,
textarea::placeholder { color: var(--color-text-muted); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

input[readonly],
textarea[readonly] {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-accent);
}

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}

/* Blazor's EditForm validation classes. Valid fields stay neutral on purpose. */
input.invalid:not([type="checkbox"]):not([type="radio"]),
select.invalid,
textarea.invalid {
    border-color: var(--color-danger);
    box-shadow: inset 0 0 0 1px var(--color-danger);
}

.validation-message {
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--color-danger-text);
}

ul.validation-errors {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-7);
    background: var(--color-danger-subtle);
    border: 1px solid var(--color-danger-border);
    border-left: 3px solid var(--color-danger);
}

ul.validation-errors .validation-message { font-size: var(--text-sm); }

/* ---------- Toolbar (filters above a grid) ---------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-bottom: 0;
}

.toolbar .field { width: 200px; }
.toolbar .field.grow { flex: 1; min-width: 200px; width: auto; }
.toolbar-spacer { flex: 1; }

/* ---------- Tables (plain tables and QuickGrid) ---------- */

.table-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

/* Inside a panel the panel draws the border; the wrapper only adds horizontal scrolling for wide tables. */
.panel > .table-wrap { border: 0; }

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: var(--text-sm);
}

.table th {
    height: var(--row-height);
    padding: 0 var(--space-4);
    background: var(--color-table-header);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.table td {
    height: var(--row-height);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-surface-muted); }
.table tbody tr.selected td { background: var(--color-accent-subtle); }

.table th.num, .table td.num { text-align: right; }

/*
  QuickGrid: always use <QuickGrid Class="table" Theme="strata">. Any theme other than "default"
  switches off QuickGrid's built-in look (padding, bold headers, gray hover boxes) so these rules apply.
  Sortable headers render as a button.col-title inside the th.
*/
.table .col-title {
    gap: var(--space-2);
    color: inherit;
    font: inherit;
}

.table th:has(> .col-header-content > button.col-title):hover { background: var(--color-table-header-hover); }

.table .sort-indicator { opacity: 0.7; }

/* With pagination, QuickGrid pads short pages with blank rows to keep the table height fixed; hide them. */
.table tbody tr:not(:has(> td:not(:empty))) { display: none; }

/* QuickGrid's sort arrow is a black SVG it controls; flip it for the dark theme. */
:root[data-theme="dark"] .table .sort-indicator { filter: invert(1); }

/* A column class like "mono" applies to both th and td; keep headers in the UI font. */
.table th.mono {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}

/* Pager component (Components/Shared/Pager.razor), sits directly under a .table-wrap. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-top: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.pager-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}


/* Group heading rows inside a plain table, e.g. CMLs by component on the reading grid. */
.table .table-group td {
    height: auto;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-muted);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Inputs inside table rows (the reading grid). */
.table td.input-cell { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.input-thickness { width: 7rem; text-align: right; font-family: var(--font-mono); }
.input-note { min-width: 12rem; }

/* Photo grid on attachment panels: square-cornered tiles with a caption under each preview. */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery li { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.gallery-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
}

.gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.gallery-image:hover { border-color: var(--color-border-strong); }
.gallery-caption { font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ---------- Dashboard (Components/Pages/Home.razor) ---------- */

.dashboard-filter select { width: auto; min-width: 220px; }

/* KPI tiles: a figure that needs attention gets a red top edge, not a red fill. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-5);
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-top: 3px solid var(--color-border-subtle);
    color: var(--color-text);
}

a.kpi:hover { text-decoration: none; border-color: var(--color-border-strong); }
.kpi-alert { border-top-color: var(--color-danger); }
.kpi-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.kpi-value { font-size: 32px; line-height: 40px; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: var(--text-xs); color: var(--color-text-secondary); }

.dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 1000px) {
    .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
}

.severity-bar { display: flex; height: 16px; background: var(--color-surface-muted); }
.severity-bar span { display: block; min-width: 4px; }
.severity-critical { background: var(--color-danger-fill); }
.severity-high { background: var(--color-danger-border); }
.severity-medium { background: var(--color-warning); }
.severity-low { background: var(--color-border-strong); }

.severity-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.severity-legend li { display: flex; align-items: center; gap: var(--space-3); }
.severity-swatch { display: inline-block; width: 10px; height: 10px; flex: none; }
.severity-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

.upcoming-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--color-border-subtle); }
.upcoming-counts div { padding: var(--space-4) var(--space-5); border-left: 1px solid var(--color-border-subtle); }
.upcoming-counts div:first-child { border-left: 0; }
.upcoming-counts dt { font-size: var(--text-xs); color: var(--color-text-secondary); }
.upcoming-counts dd { margin: 0; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

/* ---------- Status badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.badge-neutral { background: var(--color-neutral-subtle); color: var(--color-neutral-text); }
.badge-info { background: var(--color-info-subtle); color: var(--color-info-text); border-color: var(--color-info-border); }
.badge-success { background: var(--color-success-subtle); color: var(--color-success-text); border-color: var(--color-success-border); }
.badge-warning { background: var(--color-warning-subtle); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.badge-danger { background: var(--color-danger-subtle); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.badge-danger-solid { background: var(--color-danger-fill); color: var(--color-text-inverse); }

/* ---------- Notices ---------- */

.notice {
    padding: var(--space-4) var(--space-5);
    border: 1px solid;
    border-left-width: 3px;
    font-size: var(--text-sm);
}

.notice-title {
    margin: 0 0 var(--space-1);
    font-weight: 600;
}

.notice p:last-child { margin-bottom: 0; }

.notice-info { background: var(--color-info-subtle); border-color: var(--color-info-border); border-left-color: var(--color-info); }
.notice-success { background: var(--color-success-subtle); border-color: var(--color-success-border); border-left-color: var(--color-success); }
.notice-warning { background: var(--color-warning-subtle); border-color: var(--color-warning-border); border-left-color: var(--color-warning); }
.notice-error { background: var(--color-danger-subtle); border-color: var(--color-danger-border); border-left-color: var(--color-danger); }

/* ---------- Charts (hand-drawn SVG, e.g. Components/Pages/Assets/ThicknessChart.razor) ---------- */

.chart { margin: 0; }

/* Thickness labels in a fixed column, the plot filling the rest; the right padding leaves room for edge labels. */
.chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); padding-right: var(--space-5); }
.chart-body svg { display: block; overflow: visible; }
.chart-plot { width: 100%; }

.chart-grid { stroke: var(--color-border-subtle); stroke-width: 1; }
.chart-frame { stroke: var(--color-border-strong); stroke-width: 1; }
.chart-today { stroke: var(--color-border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-axis { fill: var(--color-text-secondary); font-size: var(--text-xs); font-family: var(--font-mono); }
.chart-label { fill: var(--color-text-secondary); font-size: var(--text-xs); }
.chart-label-danger { fill: var(--color-danger-text); }

.chart-line { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.chart-projection { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.chart-tmin { stroke: var(--color-danger); stroke-width: 2; }
.chart-nominal { stroke: var(--color-border-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.chart-point { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 2; }
.chart-point-danger { fill: var(--color-danger); stroke: var(--color-danger); }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.chart-legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-key { display: inline-block; width: 20px; height: 0; border-top: 2px solid var(--color-accent); }
.chart-key-projection { border-top-style: dashed; }
.chart-key-tmin { border-top-color: var(--color-danger); }
.chart-key-nominal { border-top-width: 1px; border-top-style: dashed; border-top-color: var(--color-border-strong); }

/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    overflow-x: auto;
    overflow-y: hidden;
}

.tab {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-bottom: -1px;
    padding: 0 var(--space-5);
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tab:hover {
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface-muted);
}

.tab-count {
    margin-left: var(--space-3);
    padding: 0 var(--space-2);
    background: var(--color-surface-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.tab.active,
.tab[aria-selected="true"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* ---------- Tree (asset hierarchy) ---------- */

/*
  Branches are native <details>/<summary>, so expanding and collapsing needs no JavaScript and no server
  round trip. Leaves are a .tree-item with a .tree-toggle-spacer so they line up with branch labels.
*/
.tree,
.tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree ul { padding-left: var(--space-5); }

.tree summary,
.tree-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
    padding: 0 var(--space-3);
    color: var(--color-text);
}

.tree summary {
    list-style: none;
    cursor: pointer;
}

.tree summary::-webkit-details-marker { display: none; }

.tree summary::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--icon-chevron-right) center no-repeat;
}

.tree details[open] > summary::before { transform: rotate(90deg); }

.tree summary:hover,
.tree-item:hover { background: var(--color-surface-muted); }

.tree summary a,
.tree-item a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.tree-meta {
    margin-left: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.tree-item.active {
    background: var(--color-accent-subtle);
    box-shadow: inset 2px 0 0 var(--color-accent);
}

.tree-toggle-spacer {
    display: inline-block;
    flex: none;
    width: 16px;
}

/* ---------- Dialog (native <dialog>) ---------- */

dialog.dialog {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text);
}

dialog.dialog::backdrop { background: var(--color-backdrop); }

.dialog-header { padding: var(--space-5) var(--space-6) var(--space-4); }
.dialog-header h2 { margin: 0; }
.dialog-body { padding: 0 var(--space-6) var(--space-6); }

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border-subtle);
}

/* ---------- Blazor framework UI ---------- */

.blazor-error-boundary {
    padding: var(--space-4) var(--space-5);
    background: var(--color-danger-subtle);
    border: 1px solid var(--color-danger-border);
    border-left: 3px solid var(--color-danger);
    color: var(--color-text);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- App shell (Components/Layout/MainLayout.razor) ---------- */

.app {
    display: grid;
    grid-template-columns: var(--sidenav-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas: "header header" "nav main";
    min-height: 100vh;
}

.app-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding: 0 var(--space-3) 0 var(--space-5);
    background: var(--color-shell);
    border-bottom: 1px solid var(--color-shell-border);
    color: var(--color-shell-text);
}

.app-brand {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-shell-text);
}

.app-brand:hover { text-decoration: none; }

.app-header-spacer { flex: 1; }

.app-user {
    font-size: var(--text-xs);
    color: var(--color-shell-text-muted);
}

.app-header .btn-ghost { color: var(--color-shell-text); }
.app-header .btn-ghost:hover { background: var(--color-shell-hover); }
.app-header .btn-ghost:active { background: var(--color-shell-hover); }
.app-header :focus-visible { outline-color: var(--color-shell-text); }

.app-header form { display: inline-flex; margin: 0; }

.app-sidenav {
    grid-area: nav;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: var(--space-5) 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-subtle);
}

.nav-section + .nav-section { margin-top: var(--space-5); }

.nav-section-title {
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-5);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 16px;
    color: var(--color-text-muted);
}

.nav-link {
    display: flex;
    align-items: center;
    height: var(--control-height);
    padding: 0 var(--space-5);
    color: var(--color-text-secondary);
}

.nav-link:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
    text-decoration: none;
}

.nav-link.active {
    background: var(--color-surface-muted);
    color: var(--color-text);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.app-main {
    grid-area: main;
    min-width: 0;
}

/* Narrow screens: side nav becomes an overlay, toggled by a checkbox so it works without JavaScript. */
.app-nav-button { display: none; }
.nav-narrow-only { display: none; }

@media (max-width: 800px) {
    .app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "main";
    }

    .app-nav-button { display: inline-flex; }
    .app-account { display: none; }
    .nav-narrow-only { display: block; }

    .app-sidenav {
        display: none;
        position: fixed;
        left: 0;
        z-index: 15;
        width: var(--sidenav-width);
    }

    .app-nav-toggle:checked ~ .app-sidenav { display: block; }

    .page { padding: var(--space-5); }
}

/* ---------- Asset explorer (Components/Layout/AssetLayout.razor + AssetTree.razor) ---------- */

.explorer {
    display: grid;
    grid-template-columns: var(--explorer-tree-width) minmax(0, 1fr);
    min-height: calc(100vh - var(--header-height));
}

.explorer-main { min-width: 0; }

.explorer-tree {
    position: sticky;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-subtle);
}

.explorer-tree-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.explorer-tree-body {
    flex: 1;
    overflow: auto;
    padding: var(--space-3) 0 var(--space-5);
}

.explorer-tree-body > p { padding: 0 var(--space-4); }

.explorer-tree .tree ul { padding-left: var(--space-4); }

.tree summary.active,
.tree-item.active {
    background: var(--color-accent-subtle);
    box-shadow: inset 2px 0 0 var(--color-accent);
}

.tree-label {
    margin-left: var(--space-3);
    color: var(--color-text-secondary);
}
.tree-root a { font-weight: 600; }

/* Filter-box matches (asset-tree.js): each asset with where it sits underneath. */
.tree-matches > li + li { margin-top: var(--space-2); }

.tree-path {
    padding: 0 var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-empty { margin: 0; padding: var(--space-1) var(--space-3) var(--space-1) 28px; }
.tree li[hidden] { display: none; }

/* Facility picker: a <details> menu of plain links, so switching facility needs no JavaScript. */
.facility-picker { position: relative; }

.facility-picker > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--control-height);
    padding: 0 var(--space-3) 0 var(--space-4);
    background: var(--color-field) var(--icon-chevron-down) right var(--space-3) center no-repeat;
    border: 1px solid var(--color-border-strong);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.facility-picker > summary::-webkit-details-marker { display: none; }

.facility-picker-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.facility-picker-all { border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-2); padding-top: var(--space-2); }

/* On asset pages the tree needs the width, so the app nav moves behind the header's Menu button. */
@media (min-width: 801px) {
    .app:has(.explorer) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "main";
    }

    .app:has(.explorer) .app-nav-button { display: inline-flex; }

    .app:has(.explorer) .app-sidenav {
        display: none;
        position: fixed;
        left: 0;
        z-index: 15;
        width: var(--sidenav-width);
    }

    .app:has(.explorer) .app-nav-toggle:checked ~ .app-sidenav { display: block; }
}

/* Narrow screens: tree above the page, limited in height. */
@media (max-width: 800px) {
    .explorer { grid-template-columns: minmax(0, 1fr); }

    .explorer-tree {
        position: static;
        height: auto;
        max-height: 45vh;
        border-right: 0;
        border-bottom: 1px solid var(--color-border-subtle);
    }
}

/* ---------- Sign-in pages (Components/Layout/AuthLayout.razor) ---------- */

.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 12vh var(--space-5) var(--space-8);
}

.auth-brand {
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
}

.auth-brand:hover { text-decoration: none; }

.auth-panel {
    width: min(400px, 100%);
    padding: var(--space-7);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.auth-panel h1 {
    margin-bottom: var(--space-5);
    font-size: var(--text-lg);
    line-height: 28px;
}

.auth-panel .notice { margin-bottom: var(--space-5); }

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(400px, 100%);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---------- Single-column forms ---------- */

.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 400px;
}

/* A longer form with a two-column .form-grid inside (e.g. raising a finding). */
.form-stack.form-wide { max-width: 800px; }

.auth-panel .form-stack { max-width: none; }

.btn-block { width: 100%; }

/* Radio/checkbox options that carry a description (e.g. choosing a role). */
fieldset.choice-group { margin: 0; }

fieldset.choice-group > legend {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 16px;
    color: var(--color-text-secondary);
}

.choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.choice input { margin-top: 2px; }
.choice-label { display: block; }

.choice-hint {
    display: block;
    font-size: var(--text-xs);
    line-height: 16px;
    color: var(--color-text-secondary);
}

.choice:has(input:disabled) {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.choice-list-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
}

/*
  Equipment form: every type's details section renders, and only the one matching the checked Type radio
  shows. Pure CSS, so the form stays a plain server-rendered form. Hidden sections still post, but the
  server only saves the matching one.
*/
.equipment-form:has(input[name="Input.Type"]) .type-details { display: none; }
.equipment-form:has(input[name="Input.Type"][value="Vessel"]:checked) .type-details[data-type="Vessel"],
.equipment-form:has(input[name="Input.Type"][value="PipingCircuit"]:checked) .type-details[data-type="PipingCircuit"],
.equipment-form:has(input[name="Input.Type"][value="Tank"]:checked) .type-details[data-type="Tank"],
.equipment-form:has(input[name="Input.Type"][value="Pipeline"]:checked) .type-details[data-type="Pipeline"] { display: block; }
.equipment-form:has(input[name="Input.Type"]:checked) .type-details-empty { display: none; }

/* A value shown once for the user to copy, such as a temporary password. */
.secret-value {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    line-height: 28px;
    letter-spacing: 1px;
    user-select: all;
}

/* Authenticator QR code: stays black-on-white in both themes so phone cameras can read it. */
.qr-code {
    display: block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    border: 1px solid var(--color-border-subtle);
}

/* Identity's passkey helper element has no visible content; keep it out of flex/grid gaps. */
passkey-submit { display: contents; }

.link-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border-subtle);
}

/* ---------- Theme toggle (Components/Shared/ThemeToggle.razor) ---------- */

.theme-toggle {
    display: inline-flex;
    margin: 0;
}

:root:not([data-theme="dark"]) .theme-toggle-to-light,
:root[data-theme="dark"] .theme-toggle-to-dark {
    display: none;
}

/* ---------- Code list (2FA recovery codes, Components/Account/Shared/ShowRecoveryCodes.razor) ---------- */

.code-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: var(--space-3) var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
}