/* ================================================================
   ZABooks — "Cape Ledger"
   Editorial minimalism layered on top of MudBlazor. Paper-warm canvas,
   Fraunces display, IBM Plex body, JetBrains Mono for numbers.
   ================================================================ */

:root {
    --zb-paper: #F4EFE4;
    --zb-paper-deep: #ECE6D7;
    --zb-surface: #FBF8F1;
    --zb-ink: #0F1613;
    --zb-ink-soft: #2B332E;
    --zb-ink-faded: #575C54;
    --zb-ochre: #C9661F;
    --zb-ochre-deep: #A1501A;
    --zb-forest: #2D5A3F;
    --zb-terracotta: #8B3A2F;
    --zb-hairline: #D6CEC0;
    --zb-hairline-soft: #E6DFD0;
}

html, body {
    background-color: var(--zb-paper);
    color: var(--zb-ink);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "ss01", "cv11", "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Very faint grain — ~2% opacity noise gives the paper-print feel without
   competing with content. Purely decorative; skipped for prefers-reduced-motion. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1, h2, h3, h4,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-feature-settings: "ss01", "ss02", "ss03";
    font-variation-settings: "opsz" 72;
}

/* Overline — uppercase eyebrow above section titles. */
.mud-typography-overline, .eyebrow {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--zb-ink-faded);
}

/* Tabular figures globally for any numeric cell. */
.mud-table-cell, .mud-input, .numeric, td.numeric, th.numeric,
.mud-table .mud-table-cell[data-type="number"] {
    font-variant-numeric: tabular-nums;
}

.mono {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-feature-settings: "tnum", "zero", "ss01";
    font-size: 0.92em;
    letter-spacing: -0.005em;
}

.numeric, td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.9em;
    letter-spacing: -0.005em;
}

/* Buttons — let MudBlazor handle the colour but tighten the geometry. */
.mud-button-root {
    border-radius: 2px;
    letter-spacing: 0.03em;
    text-transform: none;
}
.mud-button-filled.mud-button-filled-primary {
    box-shadow: none;
    background-color: var(--zb-ochre);
    color: var(--zb-paper);
}
.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--zb-ochre-deep);
    box-shadow: none;
}
.mud-button-outlined {
    border-width: 1px;
}

/* App bar treatment — paper background with a hairline bottom border,
   no shadow. Reads as part of the paper, not a floating header. */
.mud-appbar {
    background-color: var(--zb-paper) !important;
    color: var(--zb-ink) !important;
    border-bottom: 1px solid var(--zb-hairline);
    box-shadow: none !important;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--zb-ink);
}
.app-brand__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid var(--zb-ink);
    border-radius: 50%;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 0.88rem;
    color: var(--zb-ink);
}
.app-brand__word {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    line-height: 1;
}
.app-brand__dot {
    color: var(--zb-ochre);
    font-size: 1rem;
    line-height: 0.7;
}
.app-brand__mark {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--zb-ink-faded);
}
@media (max-width: 820px) {
    .app-brand__dot, .app-brand__mark { display: none; }
}

/* Drawer — same cream surface, separated by a single hairline. */
.mud-drawer {
    border-right: 1px solid var(--zb-hairline);
    box-shadow: none !important;
}
.mud-nav-link.active-server,
.mud-nav-link.active-server:hover {
    background-color: var(--zb-paper-deep);
    color: var(--zb-ink);
    font-weight: 600;
}
.mud-nav-link:hover {
    background-color: var(--zb-hairline-soft);
}

/* Page content sits above the grain overlay (which has z-index: 1).
   Touch z-index only — `position` stays MudBlazor's (fixed for app bar
   and drawer). Overriding position turns them into in-flow elements
   and the main content shifts down by the app bar's height. */
.mud-appbar, .mud-drawer, .mud-main-content, .mud-layout {
    z-index: 2;
}

/* Editorial page header. */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--zb-hairline);
}
.page-header h1 {
    margin: 0 0 0.25rem 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.025em;
}
.page-header .subtitle {
    color: var(--zb-ink-faded);
    font-size: 0.95rem;
}

/* MudPaper surfaces — hairline border, no shadow, gentle cream. */
.mud-paper {
    box-shadow: none !important;
}
.mud-paper.mud-elevation-0 {
    background-color: var(--zb-surface);
}

/* Dialog chrome — hairline + ochre top stripe to match the login card.
   MudBlazor's default card-style shadow is replaced with a thin border. */
.mud-dialog-container .mud-dialog {
    background-color: var(--zb-surface);
    border: 1px solid var(--zb-hairline);
    border-radius: 2px;
    box-shadow: 0 12px 40px rgba(15, 22, 19, 0.12) !important;
    position: relative;
    overflow: hidden;
}
.mud-dialog-container .mud-dialog::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--zb-ochre);
    z-index: 1;
}
.mud-dialog-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    letter-spacing: -0.02em !important;
    padding-top: 1.75rem !important;
    padding-bottom: 0.25rem !important;
    color: var(--zb-ink) !important;
}
.mud-dialog-content {
    padding-top: 1rem !important;
    font-size: 0.92rem;
    color: var(--zb-ink-soft);
}
.mud-dialog-actions {
    border-top: 1px solid var(--zb-hairline-soft);
    padding: 1rem 1.25rem !important;
    background-color: transparent;
}

/* Snackbar — same hairline treatment, no shadow soup. */
.mud-snackbar {
    border: 1px solid var(--zb-hairline) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 24px rgba(15, 22, 19, 0.1) !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Alerts — outlined variant matches the editorial grain better. */
.mud-alert {
    border-radius: 2px !important;
}

/* Table chrome — applies to both MudDataGrid's .mud-table and
   MudSimpleTable's .mud-simple-table so reports and list pages read
   the same. */
.mud-table, .mud-simple-table, .mud-simple-table table {
    background-color: var(--zb-surface);
}
.mud-table thead th,
.mud-simple-table thead th {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--zb-ink-faded) !important;
    border-bottom: 1px solid var(--zb-hairline) !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}
.mud-simple-table tbody tr:last-child td {
    /* Totals row in reports — the report templates put the grand total
       in the last <tr>. Mark it with a strong ink rule above and heavier
       weight so it reads as a closing figure. */
    border-top: 1px solid var(--zb-ink) !important;
    font-weight: 600 !important;
    padding-top: 1.1rem !important;
    color: var(--zb-ink) !important;
}
.mud-simple-table tbody td {
    color: var(--zb-ink);
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

/* Report meta-line (period + generated-at + balanced chip). The
   reports emit a MudStack directly above the MudSimpleTable with
   these children; this gives it a bit more breathing room. */
.report-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 0.75rem 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--zb-ink-faded);
}

/* Balanced / out-of-balance chip treatment for reports. */
.report-chip {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
    color: var(--zb-paper);
}
.report-chip--balanced {
    background-color: var(--zb-forest);
}
.report-chip--unbalanced {
    background-color: var(--zb-terracotta);
}

/* Focus rings — ochre, thin. Scoped to interactive elements so Blazor's
   FocusOnNavigate (which focuses <h1> after every route change for
   screen readers) doesn't draw a ring around section headings. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--zb-ochre);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Programmatically-focusable-but-not-tabbable elements (tabindex="-1",
   what Blazor stamps on the target of FocusOnNavigate) must not draw
   an outline — the focus exists for assistive tech, not sight. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus, h2:focus, h3:focus, h4:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible {
    outline: none;
}

/* Blazor error UI — restyled to fit. */
#blazor-error-ui {
    background: var(--zb-ink);
    color: var(--zb-paper);
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(15, 22, 19, 0.12);
    display: none;
    left: 0;
    padding: 0.9rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.85rem;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    color: var(--zb-ochre);
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

/* Print styles for reports — clean monochrome. */
@media print {
    body::before { display: none; }
    .mud-appbar, .mud-drawer, .mud-nav-link, .no-print {
        display: none !important;
    }
    .mud-main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .mud-paper {
        background: white !important;
        border: 1px solid #ddd;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before { display: none; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}