/* ============================================================
   Operator OS · MudBlazor reskin + legacy bridge
   --------------------------------------------------------------
   This file:
   1) Re-maps the legacy `--lc-*` variables onto the new Operator OS
      tokens (`--z-*`, `--amber*`, status), so any `.razor.css` that
      hasn't been migrated yet still renders with the new palette.
   2) Skins MudBlazor components (AppBar, Drawer, Table, Button,
      Chip, Inputs, Switch, etc.) on top of the new tokens.
   3) Hosts the global `#blazor-error-ui` styles.

   Loaded AFTER operator-os.tokens.css and operator-os.components.css.
   ============================================================ */

:root {
    /* Legacy bridge — every reference in old .razor.css resolves here. */
    --lc-ink:          var(--z-50);
    --lc-ink-soft:     var(--z-300);
    --lc-ink-muted:    var(--z-500);
    --lc-paper:        var(--z-1000);
    --lc-paper-warm:   var(--z-975);
    --lc-paper-deep:   var(--z-925);
    --lc-card:         var(--z-925);
    --lc-line:         var(--z-850);
    --lc-line-soft:    var(--z-875);
    --lc-amber:        var(--amber);
    --lc-amber-deep:   var(--amber-deep);
    --lc-amber-soft:   var(--amber-tint-20);
    --lc-forest:       var(--emerald);
    --lc-forest-soft:  var(--emerald-tint);
    --lc-rust:         var(--rose);
    --lc-rust-soft:    var(--rose-tint);
    --lc-indigo:       var(--sky);
    --lc-indigo-soft:  var(--sky-tint);
    --lc-navy:         var(--z-1000);
    --lc-navy-2:       var(--z-975);
    --lc-navy-3:       var(--z-925);

    --lc-radius-sm: var(--r-sm);
    --lc-radius-md: var(--r-md);
    --lc-radius-lg: var(--r-lg);
    --lc-radius-xl: var(--r-2xl);

    --lc-shadow-hair: 0 0 0 1px var(--z-850);
    --lc-shadow-sm:   var(--shadow-sm);
    --lc-shadow-md:   var(--shadow-md);
    --lc-shadow-lg:   var(--shadow-lg);

    --lc-font-display: var(--font-sans);
    --lc-font-body:    var(--font-sans);
    --lc-font-mono:    var(--font-mono);

    --lc-appbar-h: var(--topbar-h);
    --lc-drawer-w: var(--drawer-w);
}

/* Cancel the legacy paper-warm radial gradient body painted */
body { background: var(--z-1000); background-image: none; }

/* ============================================================
   Form validation
   ============================================================ */
.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { outline: 1px solid var(--rose); }
.validation-message {
    color: var(--rose);
    font-size: .8125rem;
    margin-top: 4px;
    display: block;
}

/* ============================================================
   Utility helpers (kept for legacy .razor.css)
   ============================================================ */
.lc-display { font-family: var(--font-sans); }
.lc-mono    { font-family: var(--font-mono); }

.lc-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--z-500);
}

.lc-hairline {
    height: 1px;
    background: var(--z-850);
    border: 0;
    margin: 0;
}

.lc-stat,
.lc-stat-mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -.025em;
    color: var(--z-50);
    line-height: 1;
    font-feature-settings: "tnum" 1;
}

/* ============================================================
   MudBlazor reskin — Operator OS tokens
   ============================================================ */

/* AppBar — translucent topbar matching .topbar */
.mud-appbar.mud-elevation-1,
.mud-appbar.mud-appbar-fixed-top {
    box-shadow: none !important;
    border-bottom: 1px solid var(--z-875) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    background: rgba(11, 11, 14, .72) !important;
    color: var(--z-200) !important;
}

[data-theme="light"] .mud-appbar.mud-elevation-1,
[data-theme="light"] .mud-appbar.mud-appbar-fixed-top {
    background: rgba(251, 251, 248, .78) !important;
    color: var(--z-200) !important;
}

/* Drawer — Operator OS dark drawer */
.mud-drawer {
    background: var(--z-975) !important;
    border-right: 1px solid var(--z-850) !important;
    box-shadow: none !important;
    color: var(--z-200) !important;
}

.mud-drawer .mud-nav-link {
    color: var(--z-400) !important;
    border-radius: var(--r-sm);
    margin: 1px 8px;
    padding: 7px 12px !important;
    min-height: 32px !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.005em;
    transition: background .12s ease, color .12s ease;
}

.mud-drawer .mud-nav-link:hover {
    background: var(--z-875) !important;
    color: var(--z-200) !important;
}

.mud-drawer .mud-nav-link.active {
    background: var(--z-850) !important;
    color: var(--z-50) !important;
    box-shadow: none !important;
    position: relative;
}

.mud-drawer .mud-nav-link.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--amber);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--amber);
}

.mud-drawer .mud-nav-link-icon {
    color: var(--z-500) !important;
    min-width: 28px !important;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--amber) !important;
}

.mud-drawer .mud-divider {
    border-color: var(--z-875) !important;
}

/* Buttons — match Operator OS .btn */
.mud-button-root {
    border-radius: var(--r-md) !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    transition: background .12s ease, border-color .12s ease,
                color .12s ease, transform .12s ease, box-shadow .12s ease !important;
}

.mud-button-filled.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-secondary {
    background: var(--amber) !important;
    color: #0A0A0C !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
                0 0 0 1px var(--amber-deep),
                0 8px 20px var(--amber-tint-20) !important;
}

.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-secondary:hover {
    background: var(--amber-bright) !important;
    transform: translateY(-1px);
}

[data-theme="light"] .mud-button-filled.mud-button-filled-primary,
[data-theme="light"] .mud-button-filled.mud-button-filled-secondary { color: #1A1200 !important; }

.mud-button-outlined,
.mud-button-text {
    background: transparent !important;
    border-color: var(--z-800) !important;
    color: var(--z-200) !important;
}

.mud-button-outlined { background: var(--z-925) !important; }

.mud-button-outlined:hover,
.mud-button-text:hover {
    background: var(--z-875) !important;
    border-color: var(--z-700) !important;
    color: var(--z-100) !important;
}

/* IconButton — match .icon-btn */
.mud-icon-button {
    border-radius: var(--r-md) !important;
    color: var(--z-400) !important;
}
.mud-icon-button:hover {
    background: var(--z-875) !important;
    color: var(--z-100) !important;
}

/* Paper / Cards */
.mud-paper.mud-elevation-0,
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 {
    background: var(--z-925) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--z-100);
    border: 1px solid var(--z-850);
}

/* Inputs — Operator OS */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--r-md);
    border-color: var(--z-850);
}

.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--z-700);
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--amber-deep) !important;
    border-width: 1px !important;
    box-shadow: var(--ring-amber);
}

.mud-input,
.mud-input input,
.mud-input textarea,
.mud-input-control input,
.mud-input-control textarea {
    color: var(--z-100) !important;
}

.mud-input-label,
.mud-input-label-outlined {
    color: var(--z-400) !important;
    font-family: var(--font-sans);
    font-size: 12.5px !important;
    letter-spacing: -.005em;
}

.mud-input-label.mud-input-label-outlined.mud-shrink {
    background: var(--z-925);
    padding: 0 4px;
}

/* Select dropdown */
.mud-popover.mud-popover-open {
    background: var(--z-925) !important;
    border: 1px solid var(--z-800) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--r-md) !important;
}

.mud-list-item:hover {
    background: var(--z-875) !important;
    color: var(--z-50) !important;
}

.mud-selected-item.mud-list-item {
    background: var(--amber-tint-10) !important;
    color: var(--amber-bright) !important;
}

/* Table — borderless rows + sticky monospace head */
.mud-table-root { border-collapse: separate; border-spacing: 0; background: var(--z-950); }

.mud-table-container { background: transparent; border-radius: 0; }

.mud-table-head .mud-table-cell {
    background: var(--z-950) !important;
    color: var(--z-500) !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--z-850) !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

.mud-table-cell {
    background: transparent !important;
    color: var(--z-200) !important;
    font-size: 13px;
    padding: 12px !important;
    border-bottom: 1px solid var(--z-875) !important;
    vertical-align: middle;
}

.mud-table-row:hover .mud-table-cell {
    background: var(--z-925) !important;
}

.mud-table-pager-toolbar {
    background: var(--z-950) !important;
    border-top: 1px solid var(--z-875) !important;
    color: var(--z-400) !important;
}

/* Chips — match Operator OS .chip */
.mud-chip {
    border-radius: var(--r-xs) !important;
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    padding: 2px 8px !important;
    height: 22px !important;
}

.mud-chip.mud-chip-color-default,
.mud-chip.mud-chip-color-primary {
    background-color: var(--z-850) !important;
    color: var(--z-300) !important;
    border: 1px solid var(--z-800) !important;
}

.mud-chip.mud-chip-color-success {
    background-color: var(--emerald-tint) !important;
    color: var(--emerald) !important;
    border: 1px solid rgba(16, 185, 129, .25) !important;
}

.mud-chip.mud-chip-color-warning {
    background-color: var(--amber-tint-10) !important;
    color: var(--amber-bright) !important;
    border: 1px solid var(--amber-tint-20) !important;
}

.mud-chip.mud-chip-color-error {
    background-color: var(--rose-tint) !important;
    color: var(--rose) !important;
    border: 1px solid rgba(244, 63, 94, .25) !important;
}

.mud-chip.mud-chip-color-info {
    background-color: var(--sky-tint) !important;
    color: var(--sky) !important;
    border: 1px solid rgba(56, 189, 248, .25) !important;
}

/* Switch */
.mud-switch-track { background-color: var(--z-800) !important; opacity: 1 !important; }
.mud-switch-input:checked ~ .mud-switch-track { background-color: var(--amber) !important; }
.mud-switch-thumb { background-color: var(--z-300) !important; }
.mud-switch-input:checked ~ * .mud-switch-thumb { background-color: #0A0A0C !important; }

/* Progress linear */
.mud-progress-linear { border-radius: 999px; height: 3px; background: var(--z-850); }
.mud-progress-linear-bar { background: var(--amber) !important; }

/* Dialog */
.mud-dialog-container .mud-dialog {
    background: var(--z-925) !important;
    border: 1px solid var(--z-850);
    border-radius: var(--r-lg) !important;
    color: var(--z-100);
    box-shadow: var(--shadow-lg) !important;
}

.mud-dialog-title { color: var(--z-50) !important; font-weight: 600; }

/* Snackbar */
.mud-snackbar {
    background: var(--z-925) !important;
    color: var(--z-100) !important;
    border: 1px solid var(--z-850);
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Links */
.mud-link {
    color: var(--z-100);
    text-decoration-color: var(--amber);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.mud-link:hover { color: var(--amber-bright); }

/* ============================================================
   Legacy table-shell + helpers (still used by un-migrated pages)
   ============================================================ */
.lc-table-shell {
    background: var(--z-950);
    border: 1px solid var(--z-850);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.lc-table-shell .mud-table-container {
    background: transparent;
    border-radius: 0;
}

.lc-table-shell .mud-table-pager-toolbar {
    background: var(--z-950);
    border-top: 1px solid var(--z-875);
}

.lc-cell-primary { font-weight: 500; color: var(--z-50); letter-spacing: -.005em; }
.lc-cell-mono   { font-family: var(--font-mono); font-weight: 500; color: var(--z-100); }
.lc-cell-muted  { color: var(--z-400); font-size: 12.5px; }

.lc-cell-link {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.lc-cell-link:hover { border-bottom-color: var(--amber); color: var(--amber-bright); }

.lc-type-tag {
    display: inline-block;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: var(--r-xs);
    background: var(--z-875);
    color: var(--z-400);
    letter-spacing: .02em;
    font-weight: 500;
    font-family: var(--font-mono);
}

.lc-detail-cell {
    display: inline-block;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--z-400);
}

/* Empty state legacy */
.lc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 20px 40px;
    gap: 8px;
}
.lc-empty-mark { color: var(--z-500); opacity: .55; margin-bottom: 4px; }
.lc-empty-mark svg { width: 52px; height: 52px; }
.lc-empty-title { font-size: 16px; font-weight: 600; color: var(--z-100); margin: 0; }
.lc-empty-copy {
    font-size: 13px;
    color: var(--z-400);
    margin: 0;
    max-width: 48ch;
    line-height: 1.5;
}
.lc-empty-copy a { color: var(--amber); border-bottom: 1px solid var(--amber-tint-20); text-decoration: none; font-weight: 500; }
.lc-empty-copy a:hover { color: var(--amber-bright); border-bottom-color: var(--amber); }

/* Card block legacy */
.lc-card {
    background: var(--z-925);
    border: 1px solid var(--z-850);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.lc-card-xl { padding: 28px; }
.lc-stack { display: flex; flex-direction: column; gap: 18px; }
.lc-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }

/* Blazor error UI */
#blazor-error-ui {
    background: var(--z-50);
    color: var(--z-1000);
    bottom: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    display: none;
    left: 0;
    padding: 14px 24px;
    position: fixed;
    width: 100%;
    z-index: 2000;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
}

#blazor-error-ui .reload {
    color: var(--amber);
    text-decoration: underline;
    margin-left: 12px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 12px;
    opacity: .7;
}