/* SlowBooks Blazor shell - global CSS overrides for MudBlazor's own stylesheet.
   Load AFTER MudBlazor.min.css (App.razor) so rules here win the cascade. Keep this
   file for genuine MudBlazor-library-level overrides only - page-specific styling
   belongs in that page's own scoped .razor.css. */

/* SLOW-19: MudNavLink collapsed-rail accessible-name gap.

   MudBlazor 9.6.0's own MudBlazor.min.css hides a nav link's text label with
   `display:none` while the shell's <MudDrawer Variant="DrawerVariant.Mini"> is
   collapsed to its icon-only rail (selector copied verbatim below, confirmed in
   the shipped MudBlazor.min.css). display:none removes an element from the
   accessible-name computation (WAI-ARIA Accessible Name and Description
   Computation spec: a hidden node contributes no text unless referenced via
   aria-labelledby), so a screen reader announces every collapsed-rail nav link
   as an unlabeled icon-only link/button - a real accessibility gap, not
   theoretical (this is also why Playwright's role/name locator can't find
   "Dashboard" etc. while the rail is collapsed - it follows the same accname
   algorithm a screen reader does).

   Tried and confirmed does NOT work: `title=`/`aria-label=` on <MudNavLink> -
   neither reaches the rendered <a>, because MudNavLink doesn't splat unmatched
   attributes onto its root element (same reason a plain HTML attribute approach
   fails; see NavMenu.razor's own note history).

   Fix: override MudBlazor's rule with the standard "visually hidden" pattern
   (Bootstrap .visually-hidden / WordPress .screen-reader-text) instead of
   display:none. It still removes the label from the VISUAL layout - the rail
   stays icon-only, exactly as designed - but keeps the element in the
   accessibility tree (not display:none, not visibility:hidden), so assistive
   tech reads it as the link's accessible name. `display:none` in MudBlazor's
   rule is why the plain <MudNavLink title=/aria-label=> attempt never mattered
   in the first place - even if the attribute HAD reached the <a>, an aria-label
   is unaffected by display:none on descendants, so that path would have worked
   too, but this fix needs no MudNavLink attribute-forwarding fix at all: it is
   pure CSS, targets MudBlazor's own class names (not scoped Blazor CSS
   isolation, which can't reach into a child component's internally-rendered
   markup without MudNavLink forwarding attributes - the same limitation that
   sank the title=/aria-label= attempt above).

   Selector matches MudBlazor.min.css's own selector exactly for equal
   specificity; !important guarantees the override regardless of link order,
   matching how DotNetShared.MudMobile's mud-mobile.css already overrides this
   same library's CSS elsewhere. */
.mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
    display: inline-block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===========================================================================
   SLOW-6 4.1 - SlowBooks' own shared components on Mud.

   Canonical CSS for the plain-HTML pieces SlowBooks' own pages build directly (not full
   MudSelect/MudTable, deliberately - see TransactionsIndex/ReportsIndex's own history for why a
   real GET <form> and a plain sortable <table> beat their Blazor-bound Mud equivalents on those
   pages), mapped onto the Mud palette so they don't look like unstyled browser chrome dropped into
   a Mud page. Was independently redefined per-page (11+ local <style> blocks, minor drift in each
   copy) before this phase - see PROGRESS.md's SLOW-6 entry for the full inventory. New pages should
   use these classes (or the StatCard/AmountText components below) instead of adding another local
   copy.
   =========================================================================== */

/* Amount formatting (old site.css:41-49's .amount-positive/.amount-negative). AmountText.razor
   renders these; .sb-pos/.sb-neg are AccountsIndex's pre-existing differently-named twin, and
   .sb-var-good/.sb-var-bad are BudgetVsActual's (SLOW-23) - all kept as aliases so those pages
   didn't need every usage site renamed too. */
.sb-amount-pos, .sb-pos, .sb-var-good { color: var(--mud-palette-success); }
.sb-amount-neg, .sb-neg, .sb-var-bad { color: var(--mud-palette-error); }

/* Filter panel plain-HTML form controls (old site.css:51-56's .filter-panel). Three sizes, each
   matching one of the three variants that had independently drifted across pages before this phase
   (kept as three real tiers, not collapsed into one, since collapsing them would itself change each
   page's existing look):
     .sb-label/.sb-input           - full-size forms: CompanyCreate/Edit/Setup, ImportIndex's own
                                      non-filter fields.
     .sb-label-compact/-input-compact - dense filter bars: TransactionsIndex, ImportIndex's filter row.
     .sb-label-sm/.sb-input-sm     - the 4 Report pages + ReportsIndex's own smaller, muted-label
                                      filter controls (no bold, secondary-colored label, no fixed
                                      width on the input - those pages size inputs by content/layout,
                                      not a stretched 100%). */
.sb-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.875rem;
}
.sb-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-input);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
}
.sb-label-compact {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.8rem;
}
.sb-input-compact {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-input);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
}
.sb-label-sm {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 2px;
    color: var(--mud-palette-text-secondary);
}
.sb-input-sm {
    display: block;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
}
.sb-date-input {
    width: 145px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-input);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
}
/* CompanyCreate/Edit/Setup's shared switch-row label (identical in all 3, was defined 3x). */
.sb-switch-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }

/* Data table shell (old site.css:82-88's .txn-row/.txn-unclassified, generalized beyond just
   Transactions). .sb-row-flag is the generic "this row needs attention" amber highlight;
   .sb-row-total is the generic "shaded totals row" highlight (SLOW-23, ex-BudgetVsActual's
   `.sb-vsactual-table tfoot tr`). AccountsIndex/ChartOfAccountsIndex/BudgetVsActual (SLOW-23) use
   this class directly - their old `.sb-acct-table`/`.sb-coa-table`/`.sb-vsactual-table` were
   verified byte-identical to this shell's own th/td rules, so no modifier was needed for them. */
.sb-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sb-table th { text-align: left; padding: 8px; background: var(--mud-palette-table-lines); border-bottom: 2px solid var(--mud-palette-lines-default); white-space: nowrap; }
.sb-table td { padding: 8px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: middle; }
.sb-table tr.sb-row-flag { background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent); }
.sb-table tr.sb-row-total { font-weight: 600; background: var(--mud-palette-table-lines); }
.sb-empty-row { text-align: center; color: var(--mud-palette-text-secondary); padding: 24px; }
.sb-sort-link { color: inherit; text-decoration: none; cursor: pointer; }

/* SLOW-23 - the 4 Report pages' (.sb-report-table: BalanceSheet/CashFlow/IncomeStatement/
   TrialBalance) shared summary-table shape. Deliberately kept as its OWN class, not merged onto
   `.sb-table` above: report tables are a lighter "totals summary" shape (no full-grid borders, no
   header shading, tighter row padding) that would fight `.sb-table td`'s per-row border-bottom and
   8px padding and `.sb-table th`'s shaded background property-by-property - the exact "real
   per-page differences ... carry real regression risk" this task's own description called out.
   Kept in this same shared file instead, once, rather than 4 near-identical page-local copies.

   Auditing this (SLOW-23) found the 4 pages' "identical" local copies had themselves drifted from
   each other (PROGRESS.md has the itemized diff) - none of it looked deliberate. Reconciled to one
   canonical definition below (CashFlow/IncomeStatement's values, already identical to each other
   and the majority shape); BalanceSheet and TrialBalance keep a small local <style> override for
   their own genuinely-different padding/border/net-row values so their rendered output is
   unchanged - see those two pages' own <style> blocks. .sb-section-* is the generic section-color
   row highlight (was CashFlow/IncomeStatement-only; harmless to share since the class name is
   otherwise unused). */
.sb-report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sb-report-table th { text-align: left; padding: 8px; border-bottom: 2px solid var(--mud-palette-lines-default); }
.sb-report-table td { padding: 6px 8px; }
.sb-report-table .text-end { text-align: right; }
/* Kept as plain, unscoped single-class selectors (not `.sb-report-table tr.x`) deliberately - same
   specificity as the per-page <style> overrides below (BalanceSheet/TrialBalance), so their later
   position in the DOM (page markup renders after this app.css <link>) is what wins the override,
   not a specificity fight this canonical definition would otherwise always win. */
.sb-section-income { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.sb-section-expense { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
.sb-section-info { background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); }
.sb-section-equity { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.sb-total-row { border-top: 1px solid var(--mud-palette-lines-default); font-weight: 600; }
.sb-net-row { border-top: 3px solid var(--mud-palette-lines-default); font-size: 1.05rem; }
.sb-empty { color: var(--mud-palette-text-secondary); padding-left: 1.5rem; }
.sb-row-parent { font-weight: 600; }

/* SLOW-6 4.1 - print styles for the Blazor shell's left rail. Old site.css:68-79 already hides the
   MVC chrome flavor's .navbar for print; MainLayout.razor's MudDrawer/MudAppBar needed the same
   treatment or every printed report (Reports/BalanceSheet etc - the actual reason anyone prints a
   SlowBooks page) carried the nav rail, app bar, environment banner and chat bubble along with it.
   margin/padding are reset with !important rather than matched to MudBlazor's own responsive/mini
   drawer margin rules (.mud-drawer-open-mini-<bp>-left etc) - !important always wins over those
   (none of which are themselves !important) regardless of which breakpoint/open-state class combo
   is active, so this doesn't need to track MudBlazor's own selector logic. */
@media print {
    .mud-drawer, .mud-appbar, .eb-banner, .cw-container {
        display: none !important;
    }
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}