/* ============================================================================
   2026 SaaS — a soft, contemporary reskin layered over MudBlazor.

   Direction (from the imported "MudBlazor Modernized" → "2026 SaaS" board):
     • Warm off-white canvas (#fafaf9) with a quiet grey sidebar (#f4f4f3).
     • White cards with hairline borders (#e7e7e4) and a barely-there shadow.
     • Soft radius — 8px on controls, 12px on cards, pill (999px) on tags.
     • Geist type with a real weight hierarchy (400 / 500 / 600).
     • The active nav item is a soft accent PILL (tinted bg + accent text/icon),
       not a hard rail — everything else is a neutral zinc scale.
     • Lucide line icons (thin stroke) instead of Material filled glyphs.

   The accent is intentionally NOT hard-coded: it bridges to --mud-palette-primary,
   which MainLayout resolves from each company's brand colour. Swap the tenant
   colour and the whole accent role follows.

   Loaded AFTER MudBlazor.min.css, so these rules win by source order without
   needing !important except where MudBlazor sets an inline-level style.
   ============================================================================ */

:root {
    --s-canvas: #fafaf9; /* app background */
    --s-sidebar: #f4f4f3; /* drawer */
    --s-card: #ffffff; /* surfaces */
    --s-ink: #18181b; /* zinc-900 — primary text */
    --s-ink-2: #3f3f46; /* zinc-700 — labels */
    --s-ink-3: #52525b; /* zinc-600 — secondary text */
    --s-ink-4: #a1a1aa; /* zinc-400 — muted / captions */
    --s-border: #e7e7e4; /* hairline structural border */
    --s-border-input: #e4e4e7; /* control border */
    --s-divider: #f0f0ee; /* faint inner rule */
    --s-hover: rgba(0,0,0,0.045); /* neutral hover tint */
    --s-shadow-card: 0 1px 2px rgba(0,0,0,0.04);

    /* Accent role — follows the tenant brand colour MudBlazor already resolved. */
    --acc: var(--mud-palette-primary, #ec3013);
    --acc-deep: color-mix(in srgb, var(--acc) 75%, black); /* text on the soft pill */
    --acc-soft: color-mix(in srgb, var(--acc) 10%, white); /* active pill / tag bg */
    --acc-ring: color-mix(in srgb, var(--acc) 22%, transparent); /* focus ring */
}

/* ── Typography — Geist throughout, quiet heading scale (weight 600) ──────── */
body,
.mud-typography-body1, .mud-typography-body2,
.mud-typography-subtitle1, .mud-typography-subtitle2,
.mud-typography-caption, .mud-typography-overline, .mud-typography-button,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.mud-input, .mud-input-root, .mud-select, input, textarea, select, button,
.mud-button-root, .mud-nav-link, .mud-chip, .mud-table, th, td, .mud-tab {
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--s-ink);
}

/* Ripple is off-brand for this quiet school — hide the animated overlay. */
.mud-ripple-element { display: none !important; }

/* ── App bar — sits on the canvas with a single hairline bottom rule ──────── */
.mud-appbar {
    background-color: var(--s-canvas);
    border-bottom: 1px solid var(--s-border);
    box-shadow: none !important;
}

/* ── Drawer / sidebar — quiet grey, hairline right rule, no shadow ────────── */
.mud-drawer {
    background-color: var(--s-sidebar);
    border-right: 1px solid var(--s-border);
    box-shadow: none !important;
}
.mud-drawer .mud-navmenu { padding: 8px; }

/* Nav links: inset rounded pills. Default is a quiet zinc; hover tints; the
   active item fills with a soft accent pill (accent text + accent icon). */
.mud-nav-link {
    border-radius: 8px;
    margin: 1px 4px;
    padding: 8px 12px;
    min-height: 40px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--s-ink-3);
}
.mud-nav-link .mud-nav-link-icon,
.mud-nav-link .mud-icon-root {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: inherit;
}
.mud-nav-link:hover {
    background-color: var(--s-hover) !important;
    color: var(--s-ink) !important;
}
.mud-nav-link.active,
.mud-nav-link.mud-nav-link-active {
    background-color: var(--acc-soft) !important;
    color: var(--acc-deep) !important;
    font-weight: 600;
}
.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-link.active .mud-icon-root,
.mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: var(--acc) !important;
}
.mud-nav-link.active::before { display: none; } /* drop MudBlazor's own active bar */

/* Nav group header + indented children (mirrors the design's settings section). */
.mud-nav-group > .mud-nav-link { font-weight: 500; }
.mud-navmenu .mud-nav-group .mud-nav-item .mud-nav-link { padding-left: 44px; }

/* ── Buttons — soft radius, centred labels, subtle depth on filled ───────── */
.mud-button-root {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.mud-button-filled {
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}
.mud-button-filled:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.14) !important;
}
.mud-button-filled-primary { background-color: var(--acc); color: var(--mud-palette-primary-text, #fff); }
.mud-button-filled-primary:hover { background-color: var(--mud-palette-primary-darken, var(--acc)); }
.mud-button-outlined {
    background-color: var(--s-card);
    border-color: var(--s-border-input);
    color: var(--s-ink-2);
}
.mud-button-outlined:hover { background-color: #f4f4f5; border-color: var(--s-border-input); }

/* ── Inputs — hairline border, soft radius, accent focus ring ────────────── */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--s-border-input);
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled):not(.mud-focused) .mud-input-outlined-border {
    border-color: #d4d4d8;
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--acc);
}
.mud-input.mud-input-outlined.mud-focused {
    box-shadow: 0 0 0 3px var(--acc-ring);
    border-radius: 8px;
}
.mud-input-label.mud-focused,
.mud-input-control .mud-focused .mud-input-label { color: var(--acc); }

/* Checkboxes / radios / switches pick up the accent when on. */
.mud-checkbox .mud-checked .mud-icon-root,
.mud-radio .mud-checked .mud-icon-root { color: var(--acc) !important; }

/* ── Cards — white, hairline border, 12px radius, barely-there shadow ─────── */
.mud-card {
    background-color: var(--s-card);
    border: 1px solid var(--s-border);
    border-radius: 12px;
    box-shadow: var(--s-shadow-card) !important;
}

/* ── Tables — quiet uppercase micro header, hairline rules, soft hover ────── */
.mud-table-root { background-color: transparent; }
.mud-table-head th,
.mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 600;
    color: var(--s-ink-4);
    border-bottom: 1px solid #ececea;
}
.mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--s-divider);
}
.mud-table-body .mud-table-row:hover {
    background-color: rgba(0,0,0,0.02) !important;
}

/* ── Chips / tags — pill-shaped, accent-tinted ───────────────────────────── */
.mud-chip {
    border-radius: 999px !important;
    font-weight: 500;
}
.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--acc-soft);
    color: var(--acc-deep);
}

/* ── Alerts — soft card, no hard edges ───────────────────────────────────── */
.mud-alert {
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* ── Overlays — hairline edge + a soft lifted shadow ─────────────────────── */
.mud-popover-paper, .mud-menu-popover {
    border: 1px solid var(--s-border);
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10) !important;
}
.mud-dialog {
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18) !important;
}

/* ── Focus — a soft accent ring, never browser blue ──────────────────────── */
.mud-nav-link:focus-visible,
.mud-button-root:focus-visible,
a:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

/* ── Wordmark fallback (shown when a tenant has no logo) ──────────────────── */
.vf-wordmark { font-weight: 700; letter-spacing: -0.01em; }
.vf-wordmark-dot { color: var(--acc); }

/* ── Mobile: keep the hairline chrome; nav pills stay inset ───────────────── */
@media (max-width: 960px) {
    .mud-appbar { border-bottom: 1px solid var(--s-border); }
    .mud-drawer.mud-drawer-responsive { border-right: 1px solid var(--s-border); }
}