/* LOOM — Application Styles
 * Color roles (per LOOM Section 4):
 *   Blue  → Primary: nav active, data display, buttons, info states
 *   Green → Positive: success badges, resolved, live/active status
 *   Red   → Critical: alerts, escalations, failures
 *   Yellow → Accent only: notes, minor flags (use sparingly)
 *   Grey  → Muted: labels, timestamps, metadata
 */

/* ─────────────────────────────────────────────────────────────
 * Bootstrap CSS Variable Bridge
 * Maps Bootstrap 5.3 custom properties to LOOM design tokens.
 * Because loom-theme.css updates LOOM tokens on data-theme change,
 * Bootstrap components automatically inherit the correct theme.
 * ───────────────────────────────────────────────────────────── */
:root {
    /* Use literal strings here — avoids fragile nested var() chain in Bootstrap components */
    --bs-body-font-family:           'Inter', system-ui, sans-serif;
    --bs-font-monospace:             'Space Mono', monospace;
    --bs-body-bg:                    var(--loom-bg-page);
    --bs-body-color:                 var(--loom-text-primary);
    --bs-secondary-color:            var(--loom-text-secondary);
    --bs-tertiary-color:             var(--loom-text-muted);
    --bs-emphasis-color:             var(--loom-text-primary);
    --bs-secondary-bg:               var(--loom-bg-surface-alt);
    --bs-tertiary-bg:                var(--loom-bg-inset);
    --bs-border-color:               var(--loom-border);
    --bs-border-color-translucent:   var(--loom-border);
    --bs-card-bg:                    var(--loom-bg-surface);
    --bs-card-border-color:          var(--loom-border);
    --bs-card-cap-bg:                var(--loom-bg-surface-alt);
    --bs-table-bg:                   transparent;
    --bs-table-hover-bg:             var(--loom-bg-inset);
    --bs-table-border-color:         var(--loom-border);
    --bs-table-color:                var(--loom-text-primary);
    --bs-table-striped-bg:           var(--loom-bg-surface-alt);
    --bs-modal-bg:                   var(--loom-bg-surface);
    --bs-modal-border-color:         var(--loom-border);
    --bs-modal-header-bg:            var(--loom-bg-surface-alt);
    --bs-dropdown-bg:                var(--loom-bg-surface);
    --bs-dropdown-border-color:      var(--loom-border);
    --bs-dropdown-link-color:        var(--loom-text-secondary);
    --bs-dropdown-link-hover-bg:     var(--loom-bg-inset);
    --bs-dropdown-link-hover-color:  var(--loom-text-primary);
    --bs-dropdown-divider-bg:        var(--loom-border);
    --bs-input-bg:                   var(--loom-bg-inset);
    --bs-input-border-color:         var(--loom-border);
    --bs-input-color:                var(--loom-text-primary);
    --bs-input-placeholder-color:    var(--loom-text-muted);
    --bs-form-select-bg:             var(--loom-bg-inset);
    --bs-link-color:                 var(--loom-blue-bright);
    --bs-link-hover-color:           var(--loom-blue-bright);
    --bs-pagination-bg:              var(--loom-bg-inset);
    --bs-pagination-border-color:    var(--loom-border);
    --bs-pagination-color:           var(--loom-text-secondary);
    --bs-pagination-hover-bg:        var(--loom-bg-surface-alt);
    --bs-pagination-hover-color:     var(--loom-text-primary);
    --bs-list-group-bg:              var(--loom-bg-surface);
    --bs-list-group-border-color:    var(--loom-border);
    --bs-list-group-item-color:      var(--loom-text-primary);
    --bs-toast-bg:                   var(--loom-bg-surface);
    --bs-toast-border-color:         var(--loom-border);
    --bs-alert-bg:                   transparent;
    --bs-heading-color:              var(--loom-text-primary);
    --bs-code-color:                 var(--loom-blue-bright);

    /* ── Layout variables ── */
    --navbar-height: 52px;
    --transition-speed: 0.22s;
}

* { box-sizing: border-box; }

/* ── Focus styles (WCAG 2.1 SC 2.4.7 — visible focus indicator) ── */
/* Keyboard users see a clear blue ring; mouse clicks do not show it */
:focus-visible {
    outline: 2px solid var(--loom-blue-bright);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
/* Nav links need extra offset so ring clears the border-radius */
.nav-link:focus-visible,
.btn:focus-visible {
    outline-offset: 3px;
}
/* Inputs already have a border-box focus shadow — keep it, just add the outline */
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--loom-blue-bright);
    outline-offset: 0;
}
/* MvcGrid interactive cells */
.mvc-grid th:focus-visible,
.mvc-grid-pager button:focus-visible,
.mvc-grid-filter:focus-visible {
    outline: 2px solid var(--loom-blue-bright);
    outline-offset: -2px;
}

/* Anchor Inter at the root so every element inherits it without relying on cascade */
html {
    font-family: var(--loom-font-sans);
}

body {
    font-family: var(--loom-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--loom-bg-page);
    color: var(--loom-text-primary);
    min-height: 100vh;
}

/* Explicit overrides for Bootstrap/browser elements that don't inherit font-family */
input, button, select, optgroup, textarea,
.form-control, .form-select, .btn,
.table, .card, .card-body, .card-header,
.modal-body, .modal-header, .modal-footer,
.dropdown-menu, .dropdown-item,
.list-group-item, .badge, .alert,
.nav-link, .breadcrumb-item {
    font-family: var(--loom-font-sans);
}

/* ── App shell ── */
.app-shell { min-height: 100vh; }

/* ── Navbar ── */
.loom-navbar {
    background: var(--loom-bg-surface) !important;
    border-bottom: 0.5px solid var(--loom-border);
    height: var(--navbar-height);
    padding: 0 var(--space-4);
}
.loom-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--loom-text-primary);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    padding: 0;
    margin-right: var(--space-6);
}
.loom-navbar .navbar-brand:hover { color: var(--loom-text-primary); }
.loom-navbar .nav-link {
    color: var(--loom-text-secondary);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3) !important;
    border-radius: 6px;
    transition: background var(--transition-speed), color var(--transition-speed);
}
.loom-navbar .nav-link:hover {
    background: var(--loom-bg-inset);
    color: var(--loom-text-primary);
}
.loom-navbar .nav-link.active {
    background: var(--loom-blue-bg);
    color: var(--loom-blue-bright) !important;
    font-weight: 600;
}
.loom-navbar .dropdown-toggle::after { vertical-align: middle; }
.loom-navbar .dropdown-item.active,
.loom-navbar .dropdown-item:active {
    background: var(--loom-blue-bg) !important;
    color: var(--loom-blue-bright) !important;
}
.loom-navbar .dropdown-divider { border-color: var(--loom-border); }
.loom-navbar .navbar-toggler {
    border-color: var(--loom-border);
    color: var(--loom-text-secondary);
    padding: var(--space-1) var(--space-2);
}
.loom-navbar .navbar-toggler:focus { box-shadow: none; }
/* Mobile: slide-down menu inherits surface background */
@media (max-width: 767.98px) {
    .loom-navbar .navbar-collapse {
        border-top: 0.5px solid var(--loom-border);
        padding: var(--space-2) 0;
        margin-top: var(--space-1);
    }
}
/* Icon button (theme toggle) */
.loom-nav-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 0.5px solid var(--loom-border);
    background: var(--loom-bg-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--loom-text-secondary);
    cursor: pointer;
    font-size: .95rem;
    transition: background var(--transition-speed), color var(--transition-speed);
    padding: 0;
}
.loom-nav-icon-btn:hover {
    background: var(--loom-bg-surface-alt);
    border-color: var(--loom-border-hover);
    color: var(--loom-text-primary);
}
/* User chip */
.loom-nav-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    border: 0.5px solid var(--loom-border);
    background: var(--loom-bg-inset);
}
.loom-nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--loom-bg-surface);
    border: 0.5px solid var(--loom-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--loom-text-secondary);
    font-size: .8rem;
    flex-shrink: 0;
}
.loom-nav-username { color: var(--loom-text-secondary); font-size: var(--text-sm); }

/* ── Main area ── */
.main-area {
    padding-top: var(--navbar-height);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Footer ── */
.loom-footer {
    border-top: 0.5px solid var(--loom-border);
    background: var(--loom-bg-surface);
}

/* ── Stat strip (dashboard header band) ── */
.stat-strip {
    background: var(--loom-bg-surface-alt);
    border-bottom: 0.5px solid var(--loom-border);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-strip-greeting {
    flex: 1;
    color: var(--loom-text-secondary);
    font-size: .88rem;
    min-width: 160px;
}
.stat-strip-greeting strong { color: var(--loom-text-primary); }

.stat-strip-divider { width: 0.5px; height: 28px; background: var(--loom-border); }

.stat-strip-item .val {
    font-family: var(--loom-font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--loom-blue-bright);
    line-height: 1;
}
.stat-strip-item .lbl {
    font-family: var(--loom-font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--loom-text-muted);
    margin-top: 2px;
}

/* ── Content body ── */
.content-body { padding: 1.25rem 1.5rem; flex: 1; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }

.section-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--loom-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Cards / Panels ── */
.card {
    background: var(--loom-bg-surface);
    border: 0.5px solid var(--loom-border) !important;
    border-radius: 10px !important;
    box-shadow: none;
    transition: border-color var(--transition-speed);
}

.card:hover {
    border-color: var(--loom-border-hover) !important;
}

.card-header {
    background: var(--loom-bg-surface-alt) !important;
    border-bottom: 0.5px solid var(--loom-border) !important;
    font-weight: 600;
    color: var(--loom-text-primary) !important;
}

/* ── Master / Detail (Layout C) ── */
.master-detail { display: flex; gap: 1rem; }

.master-list {
    flex: 0 0 200px;
    background: var(--loom-bg-surface);
    border: 0.5px solid var(--loom-border);
    border-radius: 10px;
    overflow: hidden;
}

.master-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .65rem 1rem;
    border-bottom: 0.5px solid var(--loom-border);
    cursor: pointer;
    transition: background var(--transition-speed);
}

.master-item:last-child { border-bottom: none; }
.master-item:hover { background: var(--loom-bg-inset); }

.master-item.active {
    background: var(--loom-blue-bg);
    border-left: 2.5px solid var(--loom-blue-bright);
    padding-left: calc(1rem - 2.5px);
}

.master-item .mi-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.master-item .mi-name {
    font-weight: 600;
    font-size: .85rem;
    flex: 1;
    color: var(--loom-text-primary);
}
.master-item .mi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.detail-panel {
    flex: 1;
    background: var(--loom-bg-surface);
    border: 0.5px solid var(--loom-border);
    border-radius: 10px;
    overflow: hidden;
    min-height: 200px;
}

.detail-header {
    padding: .875rem 1.1rem .7rem;
    border-bottom: 0.5px solid var(--loom-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-header .dh-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.detail-header .dh-name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--loom-text-primary);
}
.detail-header .dh-sub {
    font-family: var(--loom-font-mono);
    font-size: .7rem;
    color: var(--loom-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.detail-body { padding: .875rem 1.1rem 1rem; }

.detail-run-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem .75rem;
    margin-bottom: .35rem;
    border: 0.5px solid var(--loom-border);
    border-radius: 6px;
    background: var(--loom-bg-inset);
    color: var(--loom-text-secondary);
    font-size: .84rem;
    cursor: pointer;
    transition: background var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
    text-align: left;
}

.detail-run-btn:hover {
    background: var(--loom-blue-bg);
    border-color: var(--loom-blue-border);
    color: var(--loom-blue-bright);
}

.detail-run-btn.locked { opacity: .35; cursor: not-allowed; pointer-events: none; }
.detail-run-btn .drb-icon { font-size: .72rem; color: var(--loom-text-muted); }

.detail-last-run {
    font-family: var(--loom-font-mono);
    font-size: .7rem;
    color: var(--loom-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 0.5px solid var(--loom-border);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.detail-blocked {
    font-size: .78rem;
    color: var(--loom-yellow);
    background: var(--loom-yellow-bg);
    border: 0.5px solid var(--loom-yellow-dim);
    border-radius: 6px;
    padding: .4rem .6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: .5rem;
}

/* ── Dot indicators ── */
.dot-ok   { width: 7px; height: 7px; border-radius: 50%; background: var(--loom-green);  display: inline-block; }
.dot-err  { width: 7px; height: 7px; border-radius: 50%; background: var(--loom-red);    display: inline-block; }
.dot-none { width: 7px; height: 7px; border-radius: 50%; background: var(--loom-grey);   display: inline-block; }

/* ── Run table ── */
.table-card {
    border: 0.5px solid var(--loom-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: var(--loom-bg-surface);
}

.table-filter-bar {
    padding: .65rem 1rem;
    background: var(--loom-bg-surface-alt);
    border-bottom: 0.5px solid var(--loom-border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.table-filter-bar .form-control,
.table-filter-bar .form-select {
    font-size: .8rem;
    border-radius: 5px;
    background: var(--loom-bg-inset);
    border: 0.5px solid var(--loom-border);
    color: var(--loom-text-primary);
    padding: .28rem .6rem;
    height: auto;
}

.table-filter-bar .form-control:focus,
.table-filter-bar .form-select:focus {
    border-color: var(--loom-blue-bright);
    box-shadow: 0 0 0 2px var(--loom-blue-bg);
    outline: none;
}

.runs-table thead th {
    background: var(--loom-bg-surface-alt);
    color: var(--loom-text-muted);
    font-family: var(--loom-font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    border-bottom: 0.5px solid var(--loom-border) !important;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.runs-table thead th:hover { background: var(--loom-bg-inset); }

.runs-table thead th .sort-icon { font-size: .7rem; color: var(--loom-text-muted); margin-left: 3px; }
.runs-table thead th.sort-asc .sort-icon::before { content: '\F235'; font-family: 'bootstrap-icons'; color: var(--loom-blue-bright); }
.runs-table thead th.sort-desc .sort-icon::before { content: '\F229'; font-family: 'bootstrap-icons'; color: var(--loom-blue-bright); }
.runs-table thead th:not(.sort-asc):not(.sort-desc) .sort-icon::before { content: '\F127'; font-family: 'bootstrap-icons'; }

.runs-table td {
    vertical-align: middle;
    font-size: .85rem;
    color: var(--loom-text-primary);
    border-color: var(--loom-border) !important;
}

.runs-table tbody tr:hover td { background: var(--loom-bg-inset) !important; }

.run-row { transition: opacity .12s; }
.run-row.filtered-out { display: none; }

.table-footer-bar {
    padding: .5rem 1rem;
    background: var(--loom-bg-surface-alt);
    font-family: var(--loom-font-mono);
    font-size: .72rem;
    color: var(--loom-text-muted);
    border-top: 0.5px solid var(--loom-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filter-reset-link {
    font-size: .72rem;
    color: var(--loom-blue-bright);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.filter-reset-link:hover { text-decoration: underline; }

/* ── Page headings ── */
h1, .h1 {
    font-family: var(--loom-font-mono);
    color: var(--loom-text-primary);
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 0.5px solid var(--loom-border);
    display: inline-block;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

h2, .h2 {
    color: var(--loom-text-primary);
    font-weight: 600;
}

/* ── Buttons ── */
.btn-primary {
    background: var(--loom-blue);
    border-color: var(--loom-blue);
    color: var(--loom-text-on-color);
    font-weight: 500;
    border-radius: 6px;
    transition: background var(--transition-speed), box-shadow var(--transition-speed);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--loom-blue-bright);
    border-color: var(--loom-blue-bright);
    color: var(--loom-text-on-color);
    box-shadow: 0 0 0 3px var(--loom-blue-bg);
}

.btn-secondary {
    background: var(--loom-bg-inset);
    border-color: var(--loom-border);
    color: var(--loom-text-secondary);
    border-radius: 6px;
}

.btn-secondary:hover {
    background: var(--loom-bg-surface-alt);
    border-color: var(--loom-border-hover);
    color: var(--loom-text-primary);
}

.btn-outline-primary {
    border-color: var(--loom-blue-bright);
    color: var(--loom-blue-bright);
    border-radius: 6px;
}

.btn-outline-primary:hover {
    background: var(--loom-blue);
    border-color: var(--loom-blue);
    color: var(--loom-text-on-color);
}

.btn-success {
    background: var(--loom-green);
    border-color: var(--loom-green);
    color: var(--loom-text-on-color);
    border-radius: 6px;
}

.btn-success:hover {
    background: var(--loom-green-bright);
    border-color: var(--loom-green-bright);
    color: var(--loom-text-on-color);
}

.btn-danger {
    background: var(--loom-red);
    border-color: var(--loom-red);
    color: var(--loom-text-on-color);
    border-radius: 6px;
}

.btn-warning {
    background: var(--loom-yellow-bg);
    border-color: var(--loom-yellow-dim);
    color: var(--loom-yellow);
    border-radius: 6px;
}

/* ── Tables (general) ── */
.table {
    color: var(--loom-text-primary);
}

.table thead th {
    background: var(--loom-bg-surface-alt);
    border-bottom: 0.5px solid var(--loom-border) !important;
    font-family: var(--loom-font-mono);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--loom-text-muted);
    padding: .75rem .75rem;
}

.table tbody tr:hover { background: var(--loom-bg-inset); }

.table td, .table th {
    border-color: var(--loom-border) !important;
    vertical-align: middle;
    padding: 0.75rem 0.75rem;
}

/* ── MvcGrid ── full LOOM override (covers all hardcoded colors in mvc-grid.css) ── */
.mvc-grid { border-radius: 8px; overflow: hidden; border: 0.5px solid var(--loom-border); font-family: var(--loom-font-sans) !important; }

/* Table header */
.mvc-grid th,
.mvc-grid-table > table > thead > tr > th {
    background: var(--loom-bg-surface-alt) !important;
    background-color: var(--loom-bg-surface-alt) !important;
    border-color: var(--loom-border) !important;
    padding: .75rem !important;
    font-family: var(--loom-font-mono) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: .7rem !important;
    letter-spacing: .08em !important;
    color: var(--loom-text-muted) !important;
}

/* Table cells */
.mvc-grid td,
.mvc-grid-table > table > tbody > tr > td,
.mvc-grid-table > table > tfoot > tr > td {
    padding: 0.7rem .75rem !important;
    border-color: var(--loom-border) !important;
    color: var(--loom-text-primary) !important;
    background-color: transparent !important;
}
.mvc-grid tbody tr:hover { background: var(--loom-bg-inset) !important; }

/* Filter/sort buttons */
.mvc-grid-sort { background: transparent !important; }
.mvc-grid-sort span { color: var(--loom-text-muted) !important; }
.mvc-grid-filter { background: transparent !important; color: var(--loom-text-muted) !important; }
.mvc-grid-filter:hover, .mvc-grid-filter:focus { background: var(--loom-bg-inset) !important; color: var(--loom-text-primary) !important; }

/* Header-mode filter input */
.mvc-grid-header-mode .mvc-grid-value {
    background: var(--loom-bg-inset) !important;
    color: var(--loom-text-primary) !important;
    border-color: var(--loom-border) !important;
}

/* Row-filter inputs */
.mvc-grid-row-filters .mvc-grid-value {
    background: var(--loom-bg-inset) !important;
    border-color: var(--loom-border) !important;
    color: var(--loom-text-primary) !important;
}
.mvc-grid-row-filters .mvc-grid-value::placeholder { color: var(--loom-text-muted) !important; }
.mvc-grid-row-filters .mvc-grid-filter { border-color: var(--loom-border) !important; }
.mvc-grid-row-filters .mvc-grid-value.invalid,
.mvc-grid-popup .mvc-grid-value.invalid { border-color: var(--loom-red) !important; outline-color: var(--loom-red) !important; }

/* Popup (filter dialog) */
.mvc-grid-popup {
    background-color: var(--loom-bg-surface) !important;
    border-color: var(--loom-border) !important;
    box-shadow: var(--loom-shadow-md) !important;
    font-family: var(--loom-font-sans) !important;
}
.mvc-grid-popup .popup-arrow { border-bottom-color: var(--loom-bg-surface) !important; }
.mvc-grid-popup .popup-arrow::after { border-bottom-color: var(--loom-border) !important; }
.mvc-grid-popup .mvc-grid-value,
.mvc-grid-popup .mvc-grid-method,
.mvc-grid-popup .mvc-grid-operator {
    background: var(--loom-bg-inset) !important;
    border-color: var(--loom-border) !important;
    color: var(--loom-text-primary) !important;
}
.mvc-grid-popup .popup-actions { font-family: var(--loom-font-sans) !important; }
.mvc-grid-popup .mvc-grid-apply { background: var(--loom-blue) !important; border-color: var(--loom-blue) !important; }
.mvc-grid-popup .mvc-grid-cancel { background: var(--loom-red) !important; border-color: var(--loom-red) !important; }
.mvc-grid-popup .mvc-grid-dragging .mvc-grid-dropzone { background: var(--loom-blue-bg) !important; opacity: 1 !important; }
.mvc-grid-popup .mvc-grid-dragging .mvc-grid-dropzone.hover { background: var(--loom-blue) !important; }
.mvc-grid-popup .mvc-grid-column:hover { background: var(--loom-bg-inset) !important; }

/* Pager */
.mvc-grid .mvc-grid-pager,
.mvc-grid-pager { padding: .75rem; background: var(--loom-bg-surface-alt) !important; border-top: 0.5px solid var(--loom-border); }
.mvc-grid-pager button {
    background: var(--loom-bg-inset) !important;
    border-color: var(--loom-border) !important;
    color: var(--loom-blue-bright) !important;
}
.mvc-grid-pager button:hover,
.mvc-grid-pager button:focus { background: var(--loom-bg-surface-alt) !important; color: var(--loom-blue-bright) !important; }
.mvc-grid-pager .active,
.mvc-grid-pager .active:focus,
.mvc-grid-pager .active:hover { background: var(--loom-blue) !important; border-color: var(--loom-blue) !important; color: var(--loom-text-on-color) !important; }
.mvc-grid-pager [disabled],
.mvc-grid-pager [disabled]:hover { background: var(--loom-bg-inset) !important; color: var(--loom-text-muted) !important; cursor: not-allowed; }

/* Page size controls */
.mvc-grid-page-sizes select,
.mvc-grid-page-sizes input {
    background: var(--loom-bg-inset) !important;
    border-color: var(--loom-border) !important;
    color: var(--loom-text-primary) !important;
}

/* ── Forms ── */
.form-control, .form-select {
    border-radius: 6px;
    padding: .5rem .85rem;
    border: 0.5px solid var(--loom-border);
    background: var(--loom-bg-inset);
    color: var(--loom-text-primary);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-control:focus, .form-select:focus {
    border-color: var(--loom-blue-bright);
    box-shadow: 0 0 0 3px var(--loom-blue-bg);
    background: var(--loom-bg-inset);
    color: var(--loom-text-primary);
    outline: none;
}

.form-control::placeholder { color: var(--loom-text-muted); }

.form-label {
    font-family: var(--loom-font-mono);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--loom-text-muted);
    margin-bottom: .4rem;
}

.form-check-input:checked {
    background-color: var(--loom-blue);
    border-color: var(--loom-blue);
}

.form-check-input {
    border-color: var(--loom-border);
    background-color: var(--loom-bg-inset);
}

/* ── Modals ── */
.modal-content {
    background: var(--loom-bg-surface);
    border: 0.5px solid var(--loom-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--loom-shadow-lg);
}

.modal-header {
    background: var(--loom-bg-surface-alt);
    border-bottom: 0.5px solid var(--loom-border) !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 1rem 1.25rem;
    color: var(--loom-text-primary);
}

.modal-header .modal-title { font-weight: 700; font-size: .95rem; }

.modal-header .btn-close {
    filter: invert(60%) sepia(0%) saturate(0%);
    opacity: 0.6;
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-body {
    padding: 1.25rem;
    color: var(--loom-text-primary);
}

.modal-footer {
    padding: .875rem 1.25rem;
    border-top: 0.5px solid var(--loom-border) !important;
    background: var(--loom-bg-surface-alt);
    border-radius: 0 0 10px 10px !important;
}

/* ── Loading overlay ── */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--loom-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
}

.loading-overlay.show { opacity: 1; visibility: visible; }
.loading-content { text-align: center; }

/* ── Alerts ── */
.alert {
    border-radius: 8px !important;
    border-width: 0.5px !important;
}

.alert-danger {
    background: var(--loom-red-bg) !important;
    border-color: var(--loom-red) !important;
    color: var(--loom-red) !important;
}

.alert-warning {
    background: var(--loom-yellow-bg) !important;
    border-color: var(--loom-yellow-dim) !important;
    color: var(--loom-yellow) !important;
}

.alert-success {
    background: var(--loom-green-bg) !important;
    border-color: var(--loom-green-border) !important;
    color: var(--loom-green-bright) !important;
}

.alert-info {
    background: var(--loom-blue-bg) !important;
    border-color: var(--loom-blue-border) !important;
    color: var(--loom-blue-bright) !important;
}

/* ── Status badges ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 4px;
    font-family: var(--loom-font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-success  { background: var(--loom-green-bg);  color: var(--loom-green-bright); border: 0.5px solid var(--loom-green-border); }
.status-danger   { background: var(--loom-red-bg);    color: var(--loom-red);          border: 0.5px solid var(--loom-red); }
.status-warning  { background: var(--loom-yellow-bg); color: var(--loom-yellow);        border: 0.5px solid var(--loom-yellow-dim); }
.status-info     { background: var(--loom-blue-bg);   color: var(--loom-blue-bright);   border: 0.5px solid var(--loom-blue-border); }
.status-processing { background: var(--loom-bg-inset); color: var(--loom-text-secondary); border: 0.5px solid var(--loom-border); }

/* ── Bootstrap badge overrides ── */
.badge.bg-success, .bg-success { background-color: var(--loom-green) !important; color: var(--loom-text-on-color) !important; }
.badge.bg-danger,  .bg-danger  { background-color: var(--loom-red) !important;   color: var(--loom-text-on-color) !important; }
.badge.bg-warning, .bg-warning { background-color: var(--loom-yellow-bg) !important; color: var(--loom-yellow) !important; border: 0.5px solid var(--loom-yellow-dim); }
.badge.bg-info,    .bg-info    { background-color: var(--loom-blue-bg) !important; color: var(--loom-blue-bright) !important; border: 0.5px solid var(--loom-blue-border); }
.badge.bg-secondary { background-color: var(--loom-bg-inset) !important; color: var(--loom-text-muted) !important; }

/* ── Dropdown ── */
.dropdown-menu {
    background: var(--loom-bg-surface);
    border: 0.5px solid var(--loom-border);
    border-radius: 8px;
    padding: .4rem;
    animation: loomFadeIn 0.15s ease-out;
}

.dropdown-item {
    color: var(--loom-text-secondary);
    border-radius: 5px;
    padding: .45rem .75rem;
    font-size: .88rem;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.dropdown-item:hover {
    background: var(--loom-bg-inset);
    color: var(--loom-text-primary);
}

.dropdown-divider { border-color: var(--loom-border); }

@keyframes loomFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Pagination ── */
.page-link {
    background: var(--loom-bg-inset);
    border-color: var(--loom-border);
    color: var(--loom-text-secondary);
}

.page-link:hover {
    background: var(--loom-bg-surface-alt);
    border-color: var(--loom-border-hover);
    color: var(--loom-text-primary);
}

.page-item.active .page-link {
    background: var(--loom-blue);
    border-color: var(--loom-blue);
    color: var(--loom-text-on-color);
}

.page-item.disabled .page-link { opacity: .4; }

/* ── Settings page ── */
.settings-nav .nav-link {
    color: var(--loom-text-secondary);
    border-radius: 6px;
    padding: .5rem .875rem;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.settings-nav .nav-link:hover { background: var(--loom-bg-inset); color: var(--loom-text-primary); }

.settings-nav .nav-link.active {
    background: var(--loom-blue-bg);
    color: var(--loom-blue-bright);
    border-left: 2px solid var(--loom-blue-bright);
    font-weight: 600;
}

.settings-section-label {
    font-family: var(--loom-font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--loom-text-muted);
    padding: .75rem .875rem .25rem;
}

.setting-row {
    padding: 1rem 1.25rem;
    border-bottom: 0.5px solid var(--loom-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.setting-row:last-child { border-bottom: none; }

.cred-row {
    padding: .85rem 1.25rem;
    border-bottom: 0.5px solid var(--loom-border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cred-row:last-child { border-bottom: none; }

/* ── Timeline ── */
.timeline-step {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
    position: relative;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-dot {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    margin-top: 2px;
}
.timeline-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 32px;
    bottom: 0;
    width: 0.5px;
    background: var(--loom-border);
}

/* ── Vendor chip ── */
.vendor-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--loom-bg-inset);
    border: 0.5px solid var(--loom-border);
    border-radius: 20px;
    padding: 2px 10px;
    font-family: var(--loom-font-mono);
    font-size: .72rem;
    color: var(--loom-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Stat card footer ── */
.stat-card-footer {
    font-family: var(--loom-font-mono);
    font-size: .72rem;
    padding-top: .5rem;
    margin-top: .5rem;
    border-top: 0.5px solid var(--loom-border);
    color: var(--loom-text-muted);
}

/* ── Utility ── */
.hover-lift { transition: transform var(--transition-speed) ease; }
.hover-lift:hover { transform: translateY(-3px); }

.text-b2-primary { color: var(--loom-blue-bright) !important; }
.bg-b2-primary   { background-color: var(--loom-blue) !important; }

/* ── Text utility overrides ── */
.text-muted   { color: var(--loom-text-muted) !important; }
.text-success { color: var(--loom-green-bright) !important; }
.text-danger  { color: var(--loom-red) !important; }
.text-warning { color: var(--loom-yellow) !important; }
.text-info    { color: var(--loom-blue-bright) !important; }

/* ── Border utility overrides ── */
.border        { border-color: var(--loom-border) !important; }
.border-top    { border-top-color: var(--loom-border) !important; }
.border-bottom { border-bottom-color: var(--loom-border) !important; }

/* ── Toast ── */
.toast {
    background: var(--loom-bg-surface) !important;
    border: 0.5px solid var(--loom-border) !important;
    color: var(--loom-text-primary) !important;
}

.text-bg-success { background: var(--loom-green-bg) !important; color: var(--loom-green-bright) !important; border: 0.5px solid var(--loom-green-border) !important; }
.text-bg-danger  { background: var(--loom-red-bg) !important;   color: var(--loom-red) !important; }
.text-bg-warning { background: var(--loom-yellow-bg) !important; color: var(--loom-yellow) !important; }
.text-bg-info    { background: var(--loom-blue-bg) !important;   color: var(--loom-blue-bright) !important; }

/* ── Page header banner (legacy — kept for compatibility) ── */
.page-header {
    background: var(--loom-bg-surface-alt);
    border-bottom: 0.5px solid var(--loom-border);
    color: var(--loom-text-primary);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0;
}
/* Breadcrumb divider on page-header colored backgrounds — avoids inline rgba in every view */
.page-header .breadcrumb {
    --bs-breadcrumb-divider-color: var(--loom-text-on-color-muted);
}

/* ── Quick cards / sidebar cards ── */
.quick-card .card-header {
    background: var(--loom-bg-surface-alt) !important;
    color: var(--loom-text-primary) !important;
    font-size: .88rem;
}

.schedule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 0.5px solid var(--loom-border);
    font-size: .86rem;
    color: var(--loom-text-secondary);
}
.schedule-item:last-child { border-bottom: none; }

/* ── Gap fallbacks for Safari < 14.1 ── */
@supports not (gap: 1px) {
    .master-item i                      { margin-right: 10px; }
    .detail-header > * + *              { margin-left: 12px; }
    .settings-nav .nav-link i           { margin-right: .6rem; }
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .content-body { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLAZOR SIDEBAR LAYOUT
   Applies to .app-shell wrapper rendered by MainLayout.razor.
   MVC pages continue to use .loom-navbar (above) until Phase 4.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 56px;
    --topbar-height: 52px;
    --sidebar-transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* ── App Shell ──────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.loom-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--loom-bg-surface);
    border-right: 1px solid var(--loom-border);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    transition: width var(--sidebar-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-shell.sidebar-collapsed .loom-sidebar {
    width: var(--sidebar-collapsed-width);
}

/* Brand header */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: var(--topbar-height);
    border-bottom: 1px solid var(--loom-border);
    flex-shrink: 0;
    text-decoration: none;
}

.sidebar-brand-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--loom-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8rem;
}

.sidebar-brand-text {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    color: var(--loom-text-primary);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.12s ease;
}

.app-shell.sidebar-collapsed .sidebar-brand-text {
    opacity: 0;
    pointer-events: none;
}

/* Nav list */
.sidebar-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.sidebar-section-label {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--loom-grey);
    padding: 14px 16px 4px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.1s ease;
}

.app-shell.sidebar-collapsed .sidebar-section-label {
    opacity: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--loom-text-primary);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 6px;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-link:hover {
    background: var(--loom-bg-inset);
    color: var(--loom-text-primary);
}

.sidebar-link.active {
    background: var(--loom-blue-bg);
    color: var(--loom-blue-bright);
}

.sidebar-link i {
    font-size: .95rem;
    min-width: 20px;
    text-align: center;
}

.sidebar-link span {
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.1s ease;
}

.app-shell.sidebar-collapsed .sidebar-link span {
    opacity: 0;
    pointer-events: none;
}

/* Footer */
.sidebar-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--loom-border);
    flex-shrink: 0;
}

.sidebar-footer-text {
    font-size: .68rem;
    color: var(--loom-grey);
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.1s ease;
}

.app-shell.sidebar-collapsed .sidebar-footer-text {
    opacity: 0;
}

/* ── Main Area ──────────────────────────────────────────────────── */
.app-shell .main-area {
    margin-left: var(--sidebar-width);
    padding-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--sidebar-transition);
}

.app-shell.sidebar-collapsed .main-area {
    margin-left: var(--sidebar-collapsed-width);
}

/* ── Top Bar ────────────────────────────────────────────────────── */
.app-topbar {
    height: var(--topbar-height);
    background: var(--loom-bg-surface);
    border-bottom: 1px solid var(--loom-border);
    display: flex;
    align-items: center;
    padding: 0 20px 0 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 8px;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-toggle-btn,
.theme-toggle-btn {
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--loom-text-primary);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.12s ease;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover,
.theme-toggle-btn:hover {
    background: var(--loom-bg-inset);
}

/* ── User Profile Chip ──────────────────────────────────────────── */
.user-chip-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--loom-bg-inset);
    border: 1px solid var(--loom-border);
    border-radius: 20px;
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    color: var(--loom-text-primary);
    font-size: .82rem;
    transition: background 0.12s ease;
}

.user-chip-btn:hover {
    background: var(--loom-bg-page);
}

.user-chip-btn::after { display: none; } /* hide BS dropdown caret */

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--loom-blue);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-chip-name {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip-chevron {
    font-size: .65rem;
    color: var(--loom-grey);
}

.user-dropdown {
    min-width: 200px;
    padding: 4px 0;
}

.user-dropdown-header {
    padding: 8px 14px 6px;
}

/* ── Content Body (Blazor) ──────────────────────────────────────── */
.app-shell .content-body {
    flex: 1;
    padding: 24px;
    background: var(--loom-bg-page);
}

/* ── Toast Container ────────────────────────────────────────────── */
.loom-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.loom-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--loom-bg-surface);
    border: 1px solid var(--loom-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    will-change: opacity, transform;
    animation: loom-toast-in .18s ease forwards;
}

@keyframes loom-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.loom-toast-success .loom-toast-icon { color: var(--loom-green); }
.loom-toast-error   .loom-toast-icon { color: var(--loom-red); }
.loom-toast-warning .loom-toast-icon { color: var(--loom-yellow); }
.loom-toast-info    .loom-toast-icon { color: var(--loom-blue-bright); }

.loom-toast-body {
    flex: 1;
    font-size: .83rem;
    color: var(--loom-text-primary);
    line-height: 1.4;
}

.loom-toast-close {
    background: none;
    border: none;
    color: var(--loom-grey);
    cursor: pointer;
    padding: 0;
    font-size: .85rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.1s;
}

.loom-toast-close:hover { color: var(--loom-text-primary); }

/* ── Loading Spinner ────────────────────────────────────────────── */
.loom-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 2rem;
}

.loom-loading-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--loom-bg-page) 85%, transparent);
    z-index: 50;
    justify-content: center;
}

.loom-loading-label {
    font-size: .82rem;
    color: var(--loom-grey);
}

/* ── Responsive: collapse sidebar on mobile ─────────────────────── */
@media (max-width: 767.98px) {
    .loom-sidebar {
        transform: translateX(-100%);
        transition: transform var(--sidebar-transition), width var(--sidebar-transition);
    }

    .app-shell:not(.sidebar-collapsed) .loom-sidebar {
        transform: translateX(0);
    }

    .app-shell .main-area {
        margin-left: 0 !important;
    }

    .loom-toast-container {
        left: 12px;
        right: 12px;
        max-width: none;
    }
}