/* dashboard-role.css — role-composite grid + chip/preset/table/link primitives
   ADR-008 (S10d) + D-S10-6 (S10e, 2026-04-23): single CSS sidecar for all role-level
   dashboard composites (VendorDashboard + WarehouseManagerDashboard + future Owner/Admin).
   Renamed from dashboard-vendor.css when WarehouseManagerDashboard joined the grid pattern.
   Loaded by App.razor (<link rel="stylesheet" href="css/dashboard-role.css" />).
   Constraint: zero hex, zero raw px, zero raw rem — every value via var(--et-*).
   All tokens consumed here are defined in wwwroot/css/app.css :root. */

/* ── Grid layout ──
   Removed in S10g: .et-dash-role-grid and .et-grid-full have been consolidated
   into the canonical .et-dashboard-grid / .et-dashboard-grid__item--span-full
   pair declared in app.css. Role composites (Vendor, WarehouseManager, Owner,
   Admin) reference those classes directly. */

/* ── Chip primitive (consumed by EndoChip.razor) ── */
.et-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--et-space-1) var(--et-space-3);
    border-radius: var(--et-radius-pill);
    font-size: var(--et-text-sm);
    line-height: var(--et-line-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--et-text);
    cursor: pointer;
    transition: background var(--et-transition-fast), color var(--et-transition-fast);
}
.et-chip--filled   { background: var(--et-accent); color: var(--et-on-accent); }
.et-chip--outlined { border-color: var(--et-border); }
.et-chip--text     { /* default state — no border, no fill */ }
.et-chip--small    { font-size: var(--et-text-sm);   padding: var(--et-space-1) var(--et-space-3); }
.et-chip--medium   { font-size: var(--et-text-base); padding: var(--et-space-2) var(--et-space-4); }
.et-chip:disabled  { opacity: var(--et-opacity-disabled); cursor: not-allowed; }

/* Toggle state (aria-pressed="true") — visual equivalent to .et-chip--filled.
   Supports EndoChip's toggle pattern used by EndoDateRangePreset. */
.et-chip[aria-pressed="true"] { background: var(--et-accent); color: var(--et-on-accent); }

/* ── Preset row container (consumed by EndoDateRangePreset.razor) ── */
.et-range-preset { display: flex; flex-direction: column; gap: var(--et-space-2); }
.et-range-chips  { display: flex; flex-wrap: wrap; gap: var(--et-space-1); margin-bottom: var(--et-space-2); }

/* ── Table scroll wrapper ── */
.et-table-scroll { overflow-x: auto; }

/* ── Invoice table (OutstandingInvoicesTableWidget + ProductCommissionsTableWidget) ── */
.et-invoices-table           { width: 100%; border-collapse: collapse; background: transparent; }
.et-invoices-table thead th  { color: var(--et-text-muted); font-weight: var(--et-font-semibold); text-align: left; padding: var(--et-space-2) var(--et-space-3); }
.et-invoices-table tbody td  { color: var(--et-text); padding: var(--et-space-2) var(--et-space-3); border-top: 1px solid var(--et-border-subtle); }
.et-invoices-table .td--numeric { text-align: right; }
.et-invoices-table .td--muted   { color: var(--et-text-muted); }
.et-invoices-table .td--balance { color: var(--et-status-error); font-weight: var(--et-font-semibold); text-align: right; }

/* ── Link + accent value (replaces MudLink and Typo.h5 tokens) ── */
.et-link         { background: none; border: none; padding: 0; color: var(--et-accent); cursor: pointer; font: inherit; text-decoration: none; }
.et-link:hover   { text-decoration: underline; }
.et-value-accent { color: var(--et-accent); font-size: var(--et-text-h5); font-weight: var(--et-font-bold); }
.et-value-accent--h6 { font-size: var(--et-text-h6); }
.et-muted        { color: var(--et-text-muted); }

/* ── Divider (replaces raw MudDivider at Dashboard.razor:301) ── */
.et-divider { height: 1px; background: var(--et-border-subtle); margin: var(--et-space-2) 0; border: 0; }

/* ── Dashboard page-level loading wrapper (S10f) ── */
.et-dash-loading {
    display: flex;
    justify-content: center;
    padding: var(--et-space-12);
}

/* ── Owner dashboard (S10f F3c) — executive summary + 4 KPI tiles + salesperson breakdown ── */
.et-dash-owner {
    margin-top: var(--et-space-6);
}
.et-dash-owner__title {
    color: var(--et-text);
    font-weight: var(--et-font-semibold);
    margin-bottom: var(--et-space-3);
}
/* .et-dash-owner__kpis removed in S10g — OwnerDashboard now uses the canonical
   .et-dashboard-grid. The KPI-value modifier classes below are retained because
   they are still referenced by the salesperson breakdown / legacy alert blocks. */

/* 2026-05-06: Owner grid uses a fixed 5-card layout for the executive summary.
   Below 1280px it falls back to 2 columns to avoid squeezing cards. The
   default .et-dashboard-grid uses auto-fill with 240px min, which leaves the
   final card orphaned at intermediate widths. */
.et-dash-owner .et-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1280px) {
    .et-dash-owner .et-dashboard-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.et-dash-owner__kpi-label {
    color: var(--et-text-muted);
    font-size: var(--et-text-sm);
}
.et-dash-owner__kpi-value {
    color: var(--et-text);
    font-size: var(--et-text-h5);
    font-weight: var(--et-font-bold);
}
.et-dash-owner__kpi-value--warning { color: var(--et-status-warning); }
.et-dash-owner__kpi-value--success { color: var(--et-status-success); }
.et-dash-owner__kpi-value--error   { color: var(--et-status-error); }

.et-dash-owner__breakdown {
    margin-top: var(--et-space-4);
}
.et-dash-owner__breakdown-title {
    color: var(--et-text);
    font-weight: var(--et-font-semibold);
    font-size: var(--et-text-h6);
}
.et-dash-owner__period-note {
    color: var(--et-text-muted);
    font-size: var(--et-text-sm);
    margin-top: var(--et-space-2);
}
.et-dash-owner__legacy {
    margin-top: var(--et-space-2);
}

/* ── Setup checklist block (S10f F3c) ── */
.et-dash-setup {
    margin-top: var(--et-space-8);
}
.et-dash-setup__title {
    color: var(--et-text);
    margin-bottom: var(--et-space-1);
}
.et-dash-setup__subtitle {
    color: var(--et-text-muted);
    margin-bottom: var(--et-space-4);
}
.et-dash-setup__progress {
    margin-bottom: var(--et-space-5);
}
.et-dash-setup__progress-text {
    color: var(--et-text-muted);
    margin-top: var(--et-space-1);
}
.et-dash-setup__items {
    display: flex;
    flex-direction: column;
    gap: var(--et-space-2);
    margin-bottom: var(--et-space-6);
}
.et-dash-setup__row {
    display: flex;
    align-items: center;
    gap: var(--et-space-3);
    background: var(--et-surface);
    border: 1px solid var(--et-border);
    border-radius: var(--et-radius-card);
    padding: var(--et-space-3) var(--et-space-4);
}
.et-dash-setup__icon {
    color: var(--et-text-muted);
    flex-shrink: 0;
}
.et-dash-setup__icon--done { color: var(--et-accent); }
.et-dash-setup__row-body {
    flex: 1;
    min-width: 0;
}
.et-dash-setup__row-label {
    color: var(--et-text);
    font-size: var(--et-text-sm);
    font-weight: var(--et-font-semibold);
}
.et-dash-setup__row-count {
    color: var(--et-text-muted);
    font-size: var(--et-text-xs);
    margin-left: var(--et-space-2);
}
.et-dash-setup-complete {
    margin-top: var(--et-space-8);
}