/* ============================================================================
   Self-hosted fonts (work offline). Inter for UI, JetBrains Mono for IDs/SKUs.
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* ============================================================================
   App-specific tokens MudBlazor has no native slot for. Light values on :root;
   dark values keyed off the body.app-dark class set by the layout.
   ========================================================================== */
:root {
    --app-recessed: #F1F5F9;          /* slate-100 — recessed band, below canvas */
    --app-surface-elevated: #FFFFFF;  /* popovers/modals in light */
    --app-focus-ring: rgba(13, 148, 136, 0.4);   /* teal @ 40% */
    --app-selected-row: rgba(13, 148, 136, 0.08); /* teal @ 8% */
    --app-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.app-dark {
    --app-recessed: #131B2B;          /* slightly lighter than the #0C1322 canvas */
    --app-surface-elevated: #1F2A3D;  /* one step above surface */
    --app-focus-ring: rgba(45, 212, 191, 0.45);   /* teal-400 @ 45% */
    --app-selected-row: rgba(45, 212, 191, 0.12);
    --app-shadow-sm: none;            /* dark elevation = lightness, not shadow */
}

/* ============================================================================
   Global type: tabular numerals everywhere numbers appear.
   ========================================================================== */
body,
.mud-typography,
.mud-table,
.mud-input,
.mud-chip {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.app-mono,
.mud-table .app-mono {
    font-family: var(--app-mono);
    font-feature-settings: "tnum" 1;
}

/* ============================================================================
   Focus: always-visible teal ring in both themes.
   ========================================================================== */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
a:focus-visible,
.app-focusable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--app-focus-ring);
    border-radius: var(--mud-default-borderradius, 8px);
}

/* ============================================================================
   Motion: guides, never performs. Respect reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Stat strip — one borderless flex row, hairlines top/bottom + between items.
   Never one box per metric.
   ========================================================================== */
.app-stat-strip {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--app-recessed);
    border-radius: var(--mud-default-borderradius, 8px);
}

.app-stat {
    flex: 1 1 0;
    min-width: 140px;
    padding: 12px 16px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.app-stat:first-child {
    border-left: none;
}

.app-stat-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.app-stat-value {
    display: block;
    font-size: 1.75rem;     /* 28px */
    font-weight: 600;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.app-stat-value.app-mono {
    font-size: 1.5rem;
}

/* ============================================================================
   Section header — hairline + 15px/600 type header, not a box.
   ========================================================================== */
.app-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    margin-bottom: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.app-section-title {
    font-size: 0.9375rem;   /* 15px */
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

.app-count-chip {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--mud-palette-primary-text, var(--mud-palette-primary));
    background-color: rgba(13, 148, 136, 0.12);
}

body.app-dark .app-count-chip {
    background-color: rgba(45, 212, 191, 0.16);
    color: var(--mud-palette-primary);
}

/* ============================================================================
   Recessed band utility (meta rail / stat band).
   ========================================================================== */
.app-recessed {
    background-color: var(--app-recessed);
    border-radius: var(--mud-default-borderradius, 8px);
}

/* ============================================================================
   Status pill — color + icon + label, tonal fill (~12% of the hue).
   ========================================================================== */
.app-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.app-status .mud-icon-root {
    font-size: 1rem;
}

.app-status-success { background-color: rgba(22, 163, 74, 0.12);  color: var(--mud-palette-success); }
.app-status-warning { background-color: rgba(217, 119, 6, 0.12);  color: var(--mud-palette-warning); }
.app-status-error   { background-color: rgba(220, 38, 38, 0.12);  color: var(--mud-palette-error); }
.app-status-info    { background-color: rgba(37, 99, 235, 0.12);  color: var(--mud-palette-info); }
.app-status-neutral { background-color: var(--app-recessed);      color: var(--mud-palette-text-secondary); }

/* ============================================================================
   Tables: sticky overline header, 40px rows, tinted hover/selected.
   Tables sit directly on the canvas — no card wrapper.
   ========================================================================== */
.app-table {
    background-color: transparent;
}

.app-table .mud-table-head th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-table .mud-table-row {
    height: 40px;
}

.app-table .mud-table-body td {
    font-size: 0.8125rem;   /* 13px */
}

.app-table .mud-table-body tr:hover {
    background-color: var(--app-recessed);
}

.app-table .mud-table-body tr.app-row-selected {
    background-color: var(--app-selected-row);
}

/* Numbers right-aligned, tabular. */
.app-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Row actions revealed on hover/focus. */
.app-row-actions {
    opacity: 0;
    transition: opacity 120ms ease;
}

.mud-table-row:hover .app-row-actions,
.mud-table-row:focus-within .app-row-actions {
    opacity: 1;
}

/* ============================================================================
   Skeleton loading rows — match final table layout, not a centered spinner.
   ========================================================================== */
.app-skeleton {
    display: flex;
    flex-direction: column;
}

.app-skeleton-header,
.app-skeleton-row {
    display: flex;
    gap: 24px;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-skeleton-header {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-skeleton-header .app-skeleton-line {
    flex: 1 1 0;
    opacity: 0.6;
}

.app-skeleton-row .app-skeleton-line {
    flex: 1 1 0;
}

.app-skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--app-recessed) 25%,
        var(--mud-palette-lines-default) 50%,
        var(--app-recessed) 75%);
    background-size: 200% 100%;
    animation: app-shimmer 1.2s ease-in-out infinite;
}

@keyframes app-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================================
   Empty state — icon + one-line explanation + CTA, compact.
   ========================================================================== */
.app-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.app-empty .mud-icon-root {
    font-size: 2.5rem;
    color: var(--mud-palette-text-disabled);
}

/* Inline sub-panel empty ("No notes."), not a big centered block. */
.app-empty-inline {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    padding: 8px 0;
}

/* ============================================================================
   Buttons — press feedback, no layout shift on loading.
   ========================================================================== */
.mud-button-root:active:not(:disabled) {
    transform: scale(0.97);
}

.mud-button-root {
    transition: transform 120ms ease, background-color 120ms ease;
}

/* ============================================================================
   Cards/paper that remain: single hairline, soft tight shadow in light only.
   ========================================================================== */
.app-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 8px);
    box-shadow: var(--app-shadow-sm);
    background-color: var(--mud-palette-surface);
}

/* ============================================================================
   App chrome — appbar hairline, drawer hairline (no shadow-based elevation).
   ========================================================================== */
.app-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ============================================================================
   Sidebar navigation — overline section labels, active teal rail + tinted bg.
   ========================================================================== */
.app-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 8px;
}

.app-nav-section {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 12px 12px 4px;
}

.app-nav .mud-nav-link {
    border-radius: 6px;
    margin: 1px 4px;
    min-height: 38px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-drawer-text);
}

.app-nav .mud-nav-link:hover {
    background-color: var(--app-recessed);
}

.app-nav .mud-nav-link.active {
    color: var(--mud-palette-primary);
    background-color: var(--app-selected-row);
    box-shadow: inset 2px 0 0 0 var(--mud-palette-primary);
}

.app-nav .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.app-nav-spacer {
    flex: 1 1 auto;
}

.app-nav-account {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px 8px 0;
    margin-top: 8px;
}

.app-nav-account-name {
    color: var(--mud-palette-text-secondary);
    padding: 4px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Page-level scaffold shared by data pages. */
.app-page-header {
    margin-bottom: 20px;
}

.app-page-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* ============================================================================
   Identity (/Account) statically-rendered form inputs — blend with the theme.
   ========================================================================== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.8125rem;
}

.blazor-error-boundary {
    background: var(--mud-palette-error);
    padding: 1rem;
    color: white;
}

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

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.account-field {
    margin-bottom: 1rem;
}

.account-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.account-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 8px);
    box-sizing: border-box;
}

.account-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--app-focus-ring);
}

.account-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.account-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--mud-palette-primary);
}

.account-checkbox label {
    margin: 0;
}