:root {
    --ziggis-espresso: #4a2613;
    --ziggis-espresso-dark: #2A1A10;
    --ziggis-espresso-light: #5A4030;
    --ziggis-tan: #d9ad6d;
    --ziggis-tan-light: #E5CCA9;
    --ziggis-cream: #F5F0E6;
    /* Height of the always-present app top bar (ADR-0013). Drives both the bar's
       own height (MainLayout.razor.css) and the top offset of fixed full-bleed
       shells (.grid-shell) so page titles never tuck under the bar. */
    --app-topbar-height: 44px;

    /* Status palette (ADR-0109 phase 1) */
    --status-slate: #94a3b8;
    --status-blue: #3b82f6;
    --status-green: #10b981;
    --status-purple: #8b5cf6;
    --status-amber: #f59e0b;
    --status-gray: #6b7280;
    --status-red: #ef4444;
    --status-orange: #f97316;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--ziggis-cream);
    color: #2A1A10;
}

/* Titles use an elegant sans (Montserrat); the serif (Playfair) is reserved for brand wordmarks — see .brand-text. */
h1, h2, h3, h4, h5, h6,
.build-hero h1,
.gallery-header h1,
.equipment-header h1 {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    color: var(--ziggis-espresso);
    letter-spacing: -0.01em;
}

a {
    color: var(--ziggis-espresso);
    text-decoration: underline;
    text-decoration-color: rgba(58,38,24,0.3);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: var(--ziggis-tan);
}

.btn-primary {
    color: var(--ziggis-cream);
    background-color: var(--ziggis-espresso);
    border-color: var(--ziggis-espresso);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ziggis-espresso-dark);
    border-color: var(--ziggis-espresso-dark);
    color: var(--ziggis-cream);
}

.btn-secondary {
    color: var(--ziggis-espresso);
    background-color: var(--ziggis-tan);
    border-color: var(--ziggis-tan);
}

.btn-secondary:hover {
    background-color: var(--ziggis-tan-light);
    border-color: var(--ziggis-tan-light);
    color: var(--ziggis-espresso);
}

.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 0.1rem var(--ziggis-cream), 0 0 0 0.25rem var(--ziggis-tan);
}

.content {
    padding-top: 1.5rem;
}

.ziggis-content {
    max-width: 1280px;
    margin: 0 auto;
    flex: 1 1 auto;          /* fill main below the topbar... */
    min-height: 0;
    overflow-y: auto;        /* ...and scroll its OWN content so the PAGE never scrolls (#74) */
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.build-hero {
    background: linear-gradient(135deg, var(--ziggis-espresso) 0%, var(--ziggis-espresso-light) 100%);
    color: var(--ziggis-cream);
    padding: 1.75rem 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(58,38,24,0.15);
    display: grid;
    grid-template-columns: 1fr minmax(0, 1.5fr);
    gap: 2rem;
    align-items: center;
}

.build-hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.build-hero-title .home-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.build-hero-title h1 {
    color: var(--ziggis-cream);
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.1;
}

.build-hero-timelapse {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.build-hero-timelapse .time-lapse-video {
    width: 100%;
    max-height: 300px;
    background: #000;
    border-radius: 8px;
    border: 1px solid rgba(217, 173, 109, 0.25);
}

.build-hero-timelapse .time-lapse-caption {
    color: var(--ziggis-tan-light);
    font-size: 0.8rem;
    text-align: right;
}

@media (max-width: 800px) {
    .build-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .build-hero-title h1 {
        font-size: 1.9rem;
    }
}

.equipment-header, .gallery-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.equipment-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(58,38,24,0.06);
    margin-bottom: 1rem;
}

.equipment-table thead {
    background: var(--ziggis-espresso);
    color: var(--ziggis-cream);
}

.equipment-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.equipment-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(58,38,24,0.08);
    vertical-align: top;
    font-size: 0.9rem;
}

.equipment-table tbody tr:nth-child(even) {
    background: rgba(245,240,230,0.5);
}

.equipment-table tbody tr:hover {
    background: rgba(210,180,140,0.15);
}

.equipment-table input,
.equipment-table select {
    background: white;
    border: 1px solid rgba(58,38,24,0.15);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    width: 100%;
}

.equipment-table input:focus,
.equipment-table select:focus {
    outline: 2px solid var(--ziggis-tan);
    outline-offset: 1px;
    border-color: var(--ziggis-tan);
}

.filter-bar {
    background: white;
    border: 1px solid rgba(58,38,24,0.1);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(58,38,24,0.65);
    font-weight: 600;
}

.filter-group input,
.filter-group select {
    border: 1px solid rgba(58,38,24,0.2);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    background: white;
    min-width: 12rem;
}

.thumb-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Previous 2-week time-lapses strip (home page, above Recent media) */
.tl-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.tl-strip .tl-card {
    flex: 0 0 auto;
    width: 260px;
}

.tl-strip .tl-card video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    border: 1px solid rgba(217, 173, 109, 0.25);
    display: block;
}

.tl-strip .tl-range {
    color: var(--ziggis-tan-light);
    font-size: 0.8rem;
    text-align: center;
    margin-top: 0.25rem;
}

.thumb-strip .thumb {
    position: relative;
    flex: 0 0 auto;
    width: 160px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(58,38,24,0.1);
    transition: transform 0.15s;
}

.thumb-strip .thumb:hover {
    transform: translateY(-2px);
}

.thumb-strip .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-strip .badge-video {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(58,38,24,0.85);
    color: var(--ziggis-cream);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.time-lapse-section {
    margin: 1rem 0 2rem;
    background: var(--ziggis-espresso);
    border-radius: 12px;
    padding: 1.5rem;
    color: var(--ziggis-cream);
    box-shadow: 0 4px 12px rgba(58,38,24,0.18);
}

.time-lapse-section h2 {
    color: var(--ziggis-cream);
    margin: 0;
}

.time-lapse-section .text-muted {
    color: var(--ziggis-tan-light) !important;
}

.time-lapse-video {
    width: 100%;
    border-radius: 8px;
    background: #000;
    display: block;
    border: 1px solid rgba(217, 173, 109, 0.25);
}

.recent-strip-section {
    margin: 2rem 0;
    background: var(--ziggis-espresso);
    border-radius: 12px;
    padding: 1.5rem;
    color: var(--ziggis-cream);
}

.recent-strip-section h2 {
    color: var(--ziggis-cream);
    margin-bottom: 1rem;
}

.recent-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.recent-strip-clip {
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 1px solid rgba(217, 173, 109, 0.25);
}

.recent-strip-clip video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .recent-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .recent-strip-clip:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 600px) {
    .recent-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .recent-strip-clip:nth-child(n+3) {
        display: none;
    }
}

.status-summary {
    width: auto;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(58,38,24,0.06);
}

.status-summary th, .status-summary td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(58,38,24,0.08);
    text-align: left;
}

.status-summary thead {
    background: var(--ziggis-tan);
    color: var(--ziggis-espresso);
}

.alert-info {
    background: var(--ziggis-tan-light);
    color: var(--ziggis-espresso-dark);
    border: 1px solid var(--ziggis-tan);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.alert-secondary {
    background: rgba(245,240,230,0.7);
    color: var(--ziggis-espresso-dark);
    border: 1px solid rgba(58,38,24,0.15);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.alert-danger {
    background: #fdecec;
    color: #8b1f1f;
    border: 1px solid #e7b6b6;
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(58,38,24,0.6);
}

.empty-state h2 {
    color: var(--ziggis-espresso);
    margin-bottom: 0.5rem;
}

.breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--ziggis-espresso);
}

.text-muted {
    color: rgba(58,38,24,0.55) !important;
}

/* ---------------------------------------------------------------------------
   MudDataGrid density + ellipsis
   - Body cells: nowrap + ellipsis so a long value doesn't blow the row height.
   - Tighter padding (default mud is ~16px each side, way too generous).
   - Header text: nowrap + flex inline with the filter funnel so titles like
     "Item #" don't wrap to two lines.
   - Cells the user often wants wider (Notes, Description) opt out by adding
     class="dg-wrap" on the column markup. That class lets text wrap.
   --------------------------------------------------------------------------- */

.mud-table-root .mud-table-cell {
    padding: 4px 8px !important;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.mud-table-root .mud-table-head .mud-table-cell {
    padding: 6px 8px !important;
    font-weight: 600;
    white-space: nowrap;
}

/* MudDataGrid puts header sort/filter controls in a flex container; keep them
   on the same line as the title text. */
.mud-table-root .mud-table-head .sortable-column-header,
.mud-table-root .mud-table-head .column-header {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
}

.mud-table-root .mud-table-row {
    height: auto;
}

/* Action columns (icon buttons) — keep buttons on one row, snug spacing. */
.mud-table-root .mud-table-cell .mud-icon-button {
    padding: 2px;
}
.mud-table-root .mud-table-cell:has(.mud-icon-button) {
    white-space: nowrap;
    overflow: visible;  /* let stacked icon buttons sit side-by-side without clipping */
}

/* Opt-out class for columns where wrapping is desired (e.g. long notes). */
.mud-table-root .mud-table-cell.dg-wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* ---------------------------------------------------------------------------
   .grid-shell — full-height content frame for data-grid pages.
   Escapes the article px-4 padding via position:fixed (like the 3D viewer)
   so the grid can fill the area to the right of the compact sidebar with
   no awkward horizontal scroll. Inside, the page title takes natural height
   and a child .grid-region with flex:1 + min-height:0 lets MudDataGrid
   (Height="100%") size itself with FixedHeader/Footer for internal scroll.
   --------------------------------------------------------------------------- */
.grid-shell {
    /* FLEXBOX, not fixed — fills <main> (which is flex:1 beside the sidebar), so it responds to ANY
       sidebar width with no hardcoded offset. Was position:fixed; left:64px (coupled to the old 64px
       compact rail), which overlapped the sidebar once compaction was disabled. The host article is
       made full-bleed + flex-fill by the .ziggis-content:has(.grid-shell) rule below. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;   /* tight, uniform p2 — was 1.25/1.5/0.5/1.5 */
    background: var(--ziggis-cream);
    overflow: hidden;
}

/* A grid-shell page is full-bleed + flex-fills its column (drop the reading-width cap, centering, AND
   the article's heavy 2rem/1.5rem px-4 padding — the .grid-shell's own p2 is the only outer padding). */
.ziggis-content:has(.grid-shell) {
    max-width: none;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;        /* grid-shell clips + the grid scrolls internally — no double scroll (#74) */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* erp-shell — same fill-height chain for tabbed ERP pages (AppPage Variant=Tabbed). */
.erp-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--ziggis-cream);
    overflow: hidden;
}
.ziggis-content:has(.erp-shell) {
    max-width: none;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.grid-shell .grid-region {
    flex: 1 1 auto;
    min-height: 0;     /* lets the flex child shrink and scroll internally */
    display: flex;
    flex-direction: column;
}

/* MudDataGrid renders its toolbar, table container, and pager as siblings of
   .mud-data-grid. Stretch the root to fill .grid-region, then flex its body
   to consume remaining space so toolbar + pager stay pinned and only the
   table body scrolls. */
.grid-shell .grid-region .mud-data-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.grid-shell .grid-region .mud-data-grid .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.grid-shell .grid-region .mud-data-grid .mud-toolbar,
.grid-shell .grid-region .mud-data-grid .mud-table-pagination,
.grid-shell .grid-region .mud-data-grid .mud-table-pagination-toolbar {
    flex: 0 0 auto;
}

/* Reserve breadcrumb height so the row doesn't appear after first paint
   and bump the grid down. */
.grid-shell .mud-breadcrumbs {
    min-height: 1.75rem;
}

/* AppPage Variant=Grid hosts one ErpGrid (root .erp-grid-host) inside .grid-region —
   make that host fill the region so the grid scrolls internally (erp-shell pages do
   this via .erp-fill; grid-shell pages get it here). ADR-0042. */
.grid-shell .grid-region > .erp-grid-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;          /* a flex column so the inner MudDataGrid fills + scrolls internally */
    flex-direction: column; /* (without this the grid grows to content and the whole page scrolls) */
}

/* Equipment: rows with no/zero/N-A quantity read as out-of-scope (buttons stay live). */
.equip-row-dim {
    opacity: 0.45;
}

/* ErpGrid card view (ports Aedium AedGridV2) — a responsive deck inside the grid host. */
.erp-card-deck {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    padding: 0.75rem 0.25rem 1.5rem;
    align-content: start;
}
.erp-card-empty { grid-column: 1 / -1; text-align: center; }

/* Menu item cards — larger image; hover the image for a big centered preview. */
.menu-card {
    border: 1px solid #e7ddcf;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
}
.menu-card-imgwrap {
    position: relative;   /* positioning context for the out-of-stock ban overlay */
    aspect-ratio: 1 / 1;
    background: #f6f1e9;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
}
/* #82: red ban badge when any recipe ingredient is out of stock (z-index below the z-4000 hover zoom). */
.menu-card-ban {
    position: absolute; top: 6px; left: 6px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(220, 38, 38, .92); color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.menu-card-ban .mud-icon-root { font-size: 20px; }
.menu-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* #87: show the FULL image (was cover → chopped the bottom) */
    background: #fff;       /* white letterbox filler */
    display: block;
}
.menu-card-noimg { color: #cbd5e1; }
.menu-card-body { padding: 8px 10px 10px; }
.menu-card-name { font-weight: 600; font-size: 13px; color: #4a3a26; line-height: 1.25; }
.menu-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 3px; font-size: 12px; color: #8a7a63; }
.menu-card-price { font-weight: 700; color: #5b4a33; white-space: nowrap; }

/* Hover preview — a fixed-position card (escapes the scroll clip): big image + mini recipe panel. */
.menu-card-zoom {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.96);
    z-index: 4000;
    display: flex;
    gap: 14px;
    max-width: 86vw;
    max-height: 82vh;
    padding: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}
.menu-card-imgwrap:hover .menu-card-zoom {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.menu-card-zoom-img { max-width: 40vw; max-height: 74vh; width: auto; height: auto; border-radius: 10px; object-fit: contain; }
.menu-card-zoom-side { width: 480px; min-width: 400px; display: flex; flex-direction: column; justify-content: center; overflow: auto; }
.menu-card-zoom-name { font-weight: 800; font-size: 18px; color: #4a3a26; line-height: 1.2; }
.menu-card-zoom-cat { font-size: 11px; color: #8a7a63; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.menu-card-zoom-recipe-h { font-size: 11px; font-weight: 700; color: #b0a48f; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 2px; }
.menu-card-zoom-recipe { width: 100%; border-collapse: collapse; font-size: 13px; }
.menu-card-zoom-recipe th { font-size: 10px; font-weight: 700; color: #b0a48f; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 2px 8px 3px; border-bottom: 1px solid #ece5d8; }
.menu-card-zoom-recipe th.menu-card-zoom-szcol { text-align: right; width: 62px; }
.menu-card-zoom-recipe td.menu-card-zoom-szcell { min-width: 62px; }
.menu-card-zoom-recipe td { padding: 4px 8px; vertical-align: top; }
.menu-card-zoom-ing { color: #4a3a26; }
.menu-card-zoom-stk { margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; }
.menu-card-zoom-est { margin-left: 6px; font-size: 10px; font-style: italic; color: #b0a48f; vertical-align: 1px; }
.menu-card-zoom-szcell { color: #8a7a63; white-space: nowrap; text-align: right; }
.menu-card-zoom-recipe tr.stk-low td { background: #fbe7c6; }
.menu-card-zoom-recipe tr.stk-low .menu-card-zoom-szcell, .menu-card-zoom-recipe tr.stk-low .menu-card-zoom-stk { color: #9a6b00; font-weight: 700; }
.menu-card-zoom-recipe tr.stk-out td { background: #f6d2cc; }
.menu-card-zoom-recipe tr.stk-out .menu-card-zoom-szcell, .menu-card-zoom-recipe tr.stk-out .menu-card-zoom-stk { color: #a4503e; font-weight: 800; }
.menu-card-zoom-empty { font-size: 13px; color: #b0a48f; font-style: italic; padding: 6px 8px; }
.menu-card-zoom-price { margin-top: 12px; font-weight: 800; font-size: 17px; color: #5b4a33; }

/* (the old `.grid-shell { left: 0 }` mobile override is gone — in-flow flex needs no offset) */


/* Inventory grid row shading (Food Inventory tab). GLOBAL because the MudDataGrid <tr> is rendered by the
   shared ErpGrid component, so a scoped InventoryTab ::deep rule can't reach it. OUT (red) > LOW (amber);
   !important beats MudBlazor Striped/Hover row backgrounds. */
tr.inv-row-low, tr.inv-row-low td { background-color: #fbe7c6 !important; color: #9a6b00; }
tr.inv-row-out, tr.inv-row-out td { background-color: #f6d2cc !important; color: #a4503e; font-weight: 700; }

/* ADR-0102 — tight form treatment (.erp-form): compress Mud's default vertical rhythm toward an Ant-like density.
   Global (not scoped) so it reaches fly-out/teleported content. */
.erp-form .erp-form-title { font-weight: 600; font-size: 12px; color: #5b4a33; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.erp-form .erp-form-hint { font-size: 11px; color: #8a7a63; line-height: 1.3; margin-top: 4px; }
.erp-form .mud-grid-item { padding-top: 3px; padding-bottom: 3px; }
.erp-form .mud-input-control { margin-bottom: 0; }
/* drop the always-reserved helper-text gap that makes Mud feel spread out */
.erp-form .mud-input-control .mud-input-helper-text { margin-top: 2px; font-size: 10.5px; line-height: 1.2; }
/* outlined + dense: trim the field height so it reads tight like Ant */
.erp-form .mud-input.mud-input-outlined .mud-input-slot { padding-top: 6px; padding-bottom: 6px; min-height: 0; }

/* ==================== Project Tracker ==================== */
.tracker-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tracker-count { font-size:13px; color:var(--mud-palette-text-secondary); }
.tracker-filter-toggle { font-size:12px; color:var(--mud-palette-text-secondary); display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }
.tracker-sort { font-size:12px; padding:2px 4px; border:1px solid var(--mud-palette-lines-default); border-radius:4px; background:transparent; color:var(--mud-palette-text-secondary); }
.tracker-search { font-size:12px; padding:3px 8px; border:1px solid var(--mud-palette-lines-default); border-radius:4px; background:transparent; color:var(--mud-palette-text-primary); min-width:120px; }
.tracker-build-time { font-size:11px; color:var(--mud-palette-text-secondary); font-family:monospace; }
.tracker-q-badge { font-size:12px; font-weight:700; padding:1px 8px; border-radius:10px; cursor:pointer;
    background:#eab308; color:#fff; white-space:nowrap; }
.tracker-q-badge:hover { filter:brightness(1.05); }
/* "ready to Accept": Proposed ADR with all child work done */
.tracker-ready-badge { font-size:12px; font-weight:700; padding:1px 8px; border-radius:10px; cursor:pointer;
    background:#16a34a; color:#fff; white-space:nowrap; }
.tracker-ready-badge:hover { filter:brightness(1.05); }
.tracker-ready-badge.on { outline:2px solid rgba(22,163,74,.45); outline-offset:1px; }
.tracker-row.adr-ready { box-shadow:inset 3px 0 0 #16a34a; }
.adr-ready-glyph { color:#16a34a; font-weight:700; margin-right:5px; }
/* ADR-0119 derived release footprint */
.adr-rel-pill { display:inline-block; font-size:10px; font-weight:700; line-height:1.5; padding:0 5px; margin:0 3px 2px 0;
    border-radius:6px; background:#eef2f7; color:#475569; }
.adr-rel-pill.span { background:#e0edff; color:#1d4ed8; }
.adr-rel-breakdown { margin:8px 0 2px; }
.arb-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.arb-slice { font-size:11px; padding:2px 8px; border-radius:8px; background:#f1f5f9; color:#334155; font-variant-numeric:tabular-nums; }
.arb-slice b { color:#0f172a; }
.arb-unsched { background:#fef3c7; color:#92400e; }
/* ADR-0119 supersession link badge */
.link-kind-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; white-space:nowrap; flex:none; }
.link-kind-badge.super { background:#fee2e2; color:#b91c1c; }
.tracker-list { display:flex; flex-direction:column; gap:2px; }

/* ADR-0118 roadmap */
.roadmap { display:flex; flex-direction:column; gap:12px; padding:8px 4px; }
.rm-rel { border:1px solid var(--mud-palette-lines-default,#e6ddcd); border-radius:12px; padding:14px 16px; background:var(--mud-palette-surface,#fff); }
.rm-active { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.14); }
.rm-unscheduled { background:#faf7f0; border-style:dashed; }
.rm-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rm-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rm-name { font-weight:700; font-size:1.05rem; color:var(--mud-palette-text-primary,#3b2f1e); }
.rm-date { font-size:.8rem; color:#8a7a66; }
.rm-goal { color:#6b5c49; font-size:.9rem; margin:6px 0 10px; }
.rm-bar { height:8px; border-radius:6px; background:#ece2d0; overflow:hidden; margin-bottom:8px; }
.rm-bar-fill { height:100%; background:#16a34a; transition:width .3s; }
.rm-stats { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.82rem; color:#6b5c49; font-variant-numeric:tabular-nums; }
.rm-stats b { color:#3b2f1e; }
/* clickable rollup stats (drill-down to a filtered ADRs/Backlog list) */
.rm-stat { appearance:none; background:none; border:none; padding:0; margin:0; font:inherit; color:#6b5c49;
    cursor:pointer; border-bottom:1px dashed transparent; line-height:1.3; font-variant-numeric:tabular-nums; }
.rm-stat:hover { border-bottom-color:currentColor; filter:brightness(.9); }
.rm-stat.rm-rfv { color:#06b6d4; } .rm-stat.rm-prog { color:#3b82f6; }
.rm-stat.rm-blocked { color:#ef4444; } .rm-stat.rm-adrs { color:#8a7a66; }
/* active drill filter chip on the ADRs/Backlog toolbar */
.tracker-drill-chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
    padding:2px 4px 2px 10px; border-radius:10px; background:#e0edff; color:#1d4ed8; white-space:nowrap; }
.tracker-drill-x { appearance:none; border:none; background:none; cursor:pointer; color:inherit;
    font-size:13px; line-height:1; padding:1px 5px; border-radius:8px; }
.tracker-drill-x:hover { background:rgba(29,78,216,.18); }
.tracker-row {
    display:grid; align-items:center; gap:6px 8px; padding:6px 10px;
    grid-template-columns: 20px 28px 76px minmax(0,1fr) 116px 44px 20px 22px 70px 84px 62px;
    grid-template-rows: auto auto;
    border-radius:4px; cursor:pointer; user-select:none;
    border:1px solid transparent; transition:background .12s;
}
.tracker-row:hover { background:var(--mud-palette-action-default-hover); }
.tracker-row.selected { border-color:var(--mud-palette-primary); background:rgba(var(--mud-palette-primary-rgb),.06); }
.tracker-row[draggable="true"] { cursor:grab; }
.tracker-drag-handle { color:var(--mud-palette-text-disabled); font-size:16px; line-height:1; align-self:center; }
.tracker-rank-action { align-self:center; justify-self:center; cursor:default; }
.tracker-rank-action .mud-icon-button { padding:2px; }
.tracker-number { font-family:monospace; font-size:13px; color:var(--mud-palette-text-secondary); align-self:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tracker-title { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:center; }
/* backlog kind glyph (Feature / Bug / Chore) */
.tracker-kind.mud-icon-root { width:15px; height:15px; font-size:15px; vertical-align:-3px; margin-right:5px; }
.tracker-kind.kind-bug { color:#ef4444; }
.tracker-kind.kind-feature { color:#60a5fa; }
.tracker-kind.kind-chore { color:#a8998a; }
.tracker-summary { grid-column:4/12; font-size:12px; color:var(--mud-palette-text-secondary); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tracker-status { font-size:11px; padding:1px 6px; border-radius:8px; background:var(--mud-palette-surface);
    text-align:center; white-space:nowrap; align-self:center; justify-self:center;
    display:inline-block; max-width:max-content; line-height:1.4; }
.tracker-pct { font-size:12px; text-align:right; color:var(--mud-palette-text-secondary); align-self:center; }
.tracker-critical { color:#ef4444; font-weight:700; font-size:16px; align-self:center; text-align:center; }
.tracker-flags { align-self:center; display:flex; align-items:center; justify-content:center; }
.tracker-notes-count { font-size:11px; background:var(--mud-palette-info); color:#fff; border-radius:50%;
    width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.app-select-label-wrap { display:flex; flex-direction:column; gap:2px; flex:1; }
.app-field-label { font-size:14px; color:rgba(0,0,0,.85); }
.tracker-assigned { font-size:11px; color:var(--mud-palette-text-secondary); align-self:center;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracker-assigned .tracker-agent { font-size:10px; background:#8b5cf6; color:#fff; border-radius:3px;
    padding:1px 4px; font-weight:600; letter-spacing:0.5px; }
.tracker-category { font-size:11px; color:var(--mud-palette-text-secondary); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; align-self:center; }
.tracker-updated { font-size:10px; color:var(--mud-palette-text-secondary); align-self:center; text-align:right; white-space:nowrap; }
.tracker-updated.is-latest { color:#ef4444; font-weight:700; }
.tracker-adr-link { font-size:11px; color:var(--mud-palette-primary); align-self:center; }
.tracker-row.status-done { border-left:3px solid var(--status-green); }
.tracker-row.status-active { border-left:3px solid var(--status-blue); }
.tracker-row.status-blocked { border-left:3px solid var(--status-red); }
.tracker-row.status-reopened { border-left:3px solid var(--status-orange); }
.tracker-row.status-inprogress { border-left:3px solid var(--status-amber); background:rgba(245,158,11,.08); }
.tracker-row.status-closed { opacity:.55; }
/* Grouped panels (#8 rules by agent, #11 backlog by parent ADR). */
.tracker-group-header { display:flex; align-items:center; gap:8px; padding:8px 10px; margin-top:6px;
    cursor:pointer; user-select:none; border-radius:4px; background:var(--mud-palette-surface);
    font-size:13px; font-weight:600; color:var(--mud-palette-text-primary); }
.tracker-group-header:hover { background:var(--mud-palette-action-default-hover); }
.tracker-group-caret { width:14px; color:var(--mud-palette-text-secondary); }
.tracker-group-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracker-group-meta { font-size:11px; color:var(--mud-palette-text-secondary); font-weight:400; white-space:nowrap; }
.tracker-group-list { margin:2px 0 6px; padding-left:10px; }
/* ADR-0118 two-level Release → ADR grouping */
.tracker-group-release { background:#eef2ff; color:#1e3a8a; font-size:14px; font-weight:800;
    box-shadow:inset 3px 0 0 #3b82f6; margin-top:10px; }
.tracker-group-sub { margin-left:18px; background:var(--mud-palette-surface); font-weight:600; }
.tracker-group-list-nested { padding-left:28px; }
.badge-draft { background:var(--status-slate); color:#fff; }
.badge-proposed { background:var(--status-blue); color:#fff; }
.badge-accepted { background:var(--status-green); color:#fff; }
.badge-implemented { background:var(--status-purple); color:#fff; }
.badge-superseded { background:var(--status-amber); color:#fff; }
.badge-deprecated { background:var(--status-gray); color:#fff; }
.badge-rejected { background:var(--status-red); color:#fff; }
.badge-inactive { background:var(--status-gray); color:#fff; }
.badge-open { background:var(--status-slate); color:#fff; }
.badge-inprogress { background:var(--status-blue); color:#fff; }
.badge-blocked { background:var(--status-red); color:#fff; }
.badge-question { background:#eab308; color:#fff; }
.badge-deferred { background:var(--status-amber); color:#fff; }
.badge-reopened { background:var(--status-orange); color:#fff; }
.badge-readyforverification { background:#06b6d4; color:#fff; }
.badge-completed { background:var(--status-green); color:#fff; }
.badge-skipped { background:var(--status-gray); color:#fff; }
.badge-active { background:var(--status-green); color:#fff; }
.badge-info { background:var(--status-slate); color:#fff; }
.badge-watch { background:var(--status-blue); color:#fff; }
.badge-warning { background:var(--status-amber); color:#fff; }
.badge-critical { background:var(--status-red); color:#fff; }
.tracker-row.signal-critical { border-left:3px solid var(--status-red); }
.tracker-row.signal-warning { border-left:3px solid var(--status-amber); }
.tracker-row.signal-watch { border-left:3px solid var(--status-blue); }
.tracker-row.signal-info { border-left:3px solid var(--status-slate); }
.tracker-form { display:flex; flex-direction:column; gap:12px; }
.tracker-form .form-row { display:flex; gap:12px; }
.tracker-form .form-row > * { flex:1; }

.tracker-form .form-actions { display:flex; gap:8px; margin-top:8px; }
.tracker-note-form { margin-bottom:16px; }
.tracker-note-form .form-row { display:flex; gap:8px; align-items:flex-end; }
.tracker-notes-list { display:flex; flex-direction:column; gap:8px; }
.tracker-note { padding:8px 12px; border-radius:4px; border-left:3px solid var(--mud-palette-lines-default); }
.tracker-note .note-badge { font-size:10px; font-weight:600; padding:1px 6px; border-radius:8px; background:var(--mud-palette-surface); margin-right:6px; }
.tracker-note .note-author { font-size:11px; color:var(--mud-palette-text-secondary); }
.tracker-note .note-date { font-size:11px; color:var(--mud-palette-text-disabled); margin-left:6px; }
.tracker-note .note-pct { font-size:11px; color:var(--mud-palette-text-secondary); margin-left:6px; }
.tracker-note .note-text { margin:4px 0 0; font-size:13px; }
.note-blocker { border-left-color:#ef4444; }
.note-gotcha { border-left-color:#f59e0b; }
.note-decision { border-left-color:#8b5cf6; }
.note-completed { border-left-color:#10b981; }
.note-question { border-left-color:#3b82f6; }
.note-reference { border-left-color:#6b7280; }
.tracker-audit-list { display:flex; flex-direction:column; gap:2px; }
.tracker-audit-row { display:grid; gap:6px 8px; padding:6px 10px; grid-template-columns:130px 60px 1fr 160px;
    font-size:13px; background:var(--mud-palette-background); border-radius:4px; align-items:center; }
.tracker-audit-row:nth-child(even) { background:var(--mud-palette-surface); }
.audit-timestamp { font-size:12px; color:var(--mud-palette-text-secondary); font-family:monospace; }
.audit-action { font-size:11px; padding:2px 8px; border-radius:10px; text-align:center; }
.badge-insert { background:var(--status-green); color:#fff; }
.badge-update { background:var(--status-blue); color:#fff; }
.badge-delete { background:var(--status-red); color:#fff; }
.audit-entity { font-weight:500; }
.audit-user { font-size:12px; color:var(--mud-palette-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-columns { grid-column:1/-1; font-size:11px; color:var(--mud-palette-text-disabled); padding-left:8px; }
.tracker-empty { padding:24px; text-align:center; color:var(--mud-palette-text-disabled); }

/* #53: markdown preview under the ADR/Backlog/Rule description editors + shared AppMarkdown styling. */
.md-preview { margin-top:6px; border:1px solid var(--mud-palette-lines-default); border-radius:6px; padding:8px 12px; background:var(--mud-palette-background-grey); }
.md-preview-label { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--mud-palette-text-disabled); margin-bottom:4px; }
.app-markdown { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.app-markdown > :first-child { margin-top:0; }
.app-markdown > :last-child { margin-bottom:0; }
.app-markdown table { border-collapse:collapse; margin:6px 0; width:auto; }
.app-markdown th, .app-markdown td { border:1px solid var(--mud-palette-lines-default); padding:3px 8px; text-align:left; }
.app-markdown th { background:var(--mud-palette-background-grey); font-weight:600; }
.app-markdown code { background:var(--mud-palette-background-grey); padding:1px 4px; border-radius:3px; font-size:.92em; }
.app-markdown pre { background:var(--mud-palette-background-grey); padding:8px 10px; border-radius:6px; overflow-x:auto; }
.app-markdown pre code { background:none; padding:0; }
.app-markdown blockquote { border-left:3px solid var(--mud-palette-lines-default); margin:6px 0; padding:2px 10px; color:var(--mud-palette-text-secondary); }

.adr-desc-details > summary { cursor:pointer; font-size:12px; color:var(--mud-palette-text-secondary); margin-top:4px; }
.adr-desc-toolbar { display:flex; justify-content:flex-end; margin:4px 0; }
.adr-desc-empty { font-size:12px; color:var(--mud-palette-text-disabled); font-style:italic; padding:8px 0; }
/* ADR-0104 BL-75 pay-bills flyout table */
.pay-bills-table { width:100%; border-collapse:collapse; font-size:13px; }
.pay-bills-table th, .pay-bills-table td { padding:4px 8px; border-bottom:1px solid var(--mud-palette-lines-default,#eee); }
.pay-bills-table th.num, .pay-bills-table td.num { text-align:right; font-variant-numeric:tabular-nums; }