*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f7fa;
    margin: 0;
    padding: 0;
    height: 100%;
}

#blazor-error-ui {
    background: #ffebee;
    border-top: 1px solid #ef9a9a;
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0,0,0,.15);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #c62828;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* MudBlazor nav tweaks */
.mud-nav-link { border-radius: 8px !important; margin: 2px 8px !important; }
.mud-nav-link.active { background-color: #e3f2fd !important; color: #1565c0 !important; font-weight: 600; }
.mud-drawer-content { padding-top: 8px; }

/* Card hover */
.mud-card:hover { box-shadow: 0 8px 24px rgba(21,101,192,0.15) !important; transition: box-shadow 0.2s; }

/* Table */
.mud-table-head th { background: #e3f2fd !important; font-weight: 600 !important; color: #1565c0 !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bbdefb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1565c0; }

/* ── Compact report tables (2026-05-19) ──────────────────────────────
   Applied via Class="report-compact" on every Pages/Report/* MudTable.
   Centers all cells, trims horizontal padding, and sizes the table to
   its content instead of stretching to the viewport (the stretch was
   distributing slack across columns = big gaps under short columns). */
.report-compact .mud-table-cell {
    text-align: center !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.report-compact .mud-table-cell:first-child { padding-left: 10px !important; }
.report-compact .mud-table-cell:last-child  { padding-right: 10px !important; }
.report-compact table { width: auto !important; min-width: 0 !important; }

/* report-stretch — opt back into full-viewport width for report tables that
   have enough columns to fill the screen (added 2026-05-19). Used together
   with report-compact: Class="report-compact report-stretch". Declared AFTER
   the report-compact block so this width rule wins the !important tie-break. */
.report-stretch table { width: 100% !important; }

/* Pending-invoice dropdown items on /report/calistore-order — hover highlight
   (2026-05-24). Items rendered as plain divs; this gives them a subtle blue
   background on hover so staff sees what's being targeted before clicking. */
.cso-pending-item:hover { background: #e3f2fd; }