/* Muscat Hub design-system tokens — RUNTIME CSS (authoritative).
 *
 * Mirrors values from ../design-tokens.json. When you change a colour:
 *   1. Edit design-tokens.json first.
 *   2. Mirror into this file.
 *   3. Mirror into Theming/BrandColors.cs (only the slots MudTheme references).
 *
 * The --mud-palette-* override block below is the key mechanism that lets us
 * keep the brand identity in CSS even though MudBlazor's MudColor parser
 * rejects "var(--…)" strings. MudBlazor components read --mud-palette-*
 * at render time, so updating those CSS variables here is sufficient to
 * change every <MudButton Color="Primary">, <MudChip Color="Secondary">, etc.
 *
 * If this file ever disagrees with BrandColors.cs, this file wins — it is
 * what the browser actually renders. C# is downstream.
 *
 * Full workflow: ../design-tokens.README.md.
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── Brand anchors (raw) ───────────────────────── */
    --mh-navy:        #1E293B;
    --mh-navy-light:  #334155;
    --mh-navy-dark:   #0F172A;
    --mh-blue:        #2563EB;
    --mh-blue-light:  #60A5FA;
    --mh-blue-dark:   #1D4ED8;
    --mh-cloud:       #F8FAFC;
    --mh-slate:       #0F172A;
    --mh-slate-mid:   #64748B;

    /* ── Semantic roles ────────────────────────────── */
    --color-primary:       #1E293B;  /* navy — sidebar, topbar, primary chrome */
    --color-primary-hover: #0F172A;
    --color-primary-light: #334155;
    --color-on-primary:    #FFFFFF;  /* white text/icons on navy */

    --color-cta:           #2563EB;  /* blue — primary CTAs / buttons */
    --color-cta-hover:     #1D4ED8;
    --color-cta-text:      #FFFFFF;

    --color-secondary:     #334155;  /* slate between foreground and muted */

    --color-accent:        #2563EB;  /* blue — accents, active indicators */
    --color-accent-hover:  #1D4ED8;
    --color-accent-dark:   #1D4ED8;
    --color-accent-light:  #60A5FA;
    --color-accent-soft:   #EFF6FF;

    /* ── Surfaces ──────────────────────────────────── */
    --color-bg:        #F8FAFC;  /* slate-50 — page canvas */
    --color-surface:   #FFFFFF;
    --color-surface-2: #F1F5F9;
    --color-surface-3: #E2E8F0;

    /* ── Text ──────────────────────────────────────── */
    --color-foreground: #0F172A;
    --color-muted:      #64748B;
    --color-muted-2:    #94A3B8;

    /* ── Borders ───────────────────────────────────── */
    --color-border:        #E2E8F0;
    --color-border-strong: #CBD5E1;

    /* ── Semantic states ───────────────────────────── */
    --color-success:      #16A34A;
    --color-success-soft: #DCFCE7;
    --color-success-ink:  #166534;
    --color-warning:      #D97706;
    --color-warning-soft: #FEF3C7;
    --color-warning-ink:  #92400E;
    --color-danger:       #DC2626;
    --color-danger-soft:  #FEE2E2;
    --color-danger-ink:   #991B1B;
    --color-info:         #2563EB;
    --color-info-soft:    #DBEAFE;
    --color-info-ink:     #1E40AF;

    /* ── Scope badges ──────────────────────────────── */
    --color-scope-tenant-bg:    #EFF6FF;
    --color-scope-tenant-text:  #1E40AF;
    --color-scope-company-bg:   #F1F5F9;
    --color-scope-company-text: #334155;
    --color-scope-both-bg:      #F1F5F9;
    --color-scope-both-text:    #0F172A;

    /* ── Sidebar ───────────────────────────────────── */
    --color-sidebar-bg:            #1E293B;
    --color-sidebar-text:          #CBD5E1;
    --color-sidebar-active-bg:     rgba(37,99,235,0.12);
    --color-sidebar-active-border: #2563EB;
    --color-sidebar-active-text:   #FFFFFF;
    --color-sidebar-hover-bg:      rgba(255,255,255,0.04);
    --color-sidebar-divider:       rgba(255,255,255,0.10);

    /* ── Spacing (4 px base) ───────────────────────── */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* ── Radii ─────────────────────────────────────── */
    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   6px;
    --r-lg:   8px;
    --r-xl:  12px;
    --r-2xl: 16px;
    --r-pill: 999px;

    /* ── Shadows (cool slate tint) ─────────────────── */
    --sh-xs:    0 1px 2px rgba(15,23,42,0.04);
    --sh-sm:    0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --sh-md:    0 4px 8px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05);
    --sh-lg:    0 8px 24px rgba(15,23,42,0.09), 0 2px 6px rgba(15,23,42,0.05);
    --sh-xl:    0 20px 48px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
    --sh-navy:  0 4px 16px rgba(30,41,59,0.24);
    --sh-blue:  0 4px 16px rgba(37,99,235,0.28);

    /* ── Type scale ────────────────────────────────── */
    --fs-xs:   11px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;
    --fs-4xl:  36px;

    /* ── Line heights ──────────────────────────────── */
    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;

    /* ── Font weights ──────────────────────────────── */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Letter spacing ────────────────────────────── */
    --ls-tight:  -0.02em;
    --ls-snug:   -0.01em;
    --ls-normal:  0em;
    --ls-wide:    0.04em;
    --ls-wider:   0.08em;
    --ls-widest:  0.12em;

    /* ── Type families ─────────────────────────────── */
    --ff-display: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* ── App shell ─────────────────────────────────── */
    --sidebar-w:   248px;
    --topbar-h:    56px;
    --content-max: 1280px;

    /* ═══════════════════════════════════════════════════════════════════════
       MudBlazor palette remap — the trick that makes MudBlazor honor our brand.
       MudBlazor's component CSS reads --mud-palette-* directly; overriding
       them here means <MudButton Color="Primary"> renders blue even though
       MuscatHubTheme.cs sets PaletteLight.Primary to a literal hex.
       ═══════════════════════════════════════════════════════════════════════ */
    --mud-palette-primary:         var(--color-cta);
    --mud-palette-primary-rgb:     37, 99, 235;
    --mud-palette-primary-text:    var(--color-cta-text);
    --mud-palette-primary-darken:  var(--color-cta-hover);
    --mud-palette-primary-lighten: var(--color-accent-light);

    --mud-palette-secondary:       var(--color-accent);
    --mud-palette-secondary-rgb:   37, 99, 235;
    --mud-palette-secondary-text:  #FFFFFF;

    --mud-palette-tertiary:        var(--color-primary-light);

    --mud-palette-success:         var(--color-success);
    --mud-palette-success-text:    #FFFFFF;
    --mud-palette-warning:         var(--color-warning);
    --mud-palette-warning-text:    #FFFFFF;
    --mud-palette-error:           var(--color-danger);
    --mud-palette-error-text:      #FFFFFF;
    --mud-palette-info:            var(--color-info);
    --mud-palette-info-text:       #FFFFFF;

    --mud-palette-background:      var(--color-bg);
    --mud-palette-background-gray: var(--color-surface-2);
    --mud-palette-surface:         var(--color-surface);

    --mud-palette-text-primary:    var(--color-foreground);
    --mud-palette-text-secondary:  var(--color-muted);
    --mud-palette-text-disabled:   var(--color-border-strong);

    --mud-palette-action-default:             var(--color-muted);
    --mud-palette-action-disabled:            var(--color-border-strong);
    --mud-palette-action-disabled-background: var(--color-surface-2);

    --mud-palette-divider:         var(--color-border);
    --mud-palette-divider-light:   var(--color-border);

    --mud-palette-lines-default:   var(--color-border);
    --mud-palette-lines-inputs:    var(--color-border-strong);

    --mud-palette-appbar-background: var(--color-primary);
    --mud-palette-appbar-text:       var(--color-on-primary);
    --mud-palette-drawer-background: var(--color-primary);
    --mud-palette-drawer-text:       var(--color-sidebar-text);
    --mud-palette-drawer-icon:       var(--color-accent);

    /* ---- Auth pages sub-palette (login/MFA/enrollment) ----
       The /account/* Razor Pages adopted the design-system navy/blue mockup
       palette first (product decision 2026-05-29); the rest of the app has
       since converged on the same palette. These explicit --auth-* slots
       remain so the auth split-panel gradients/glows stay self-contained. */
    --auth-accent:        #2563EB;
    --auth-accent-hover:  #1D4ED8;
    --auth-accent-soft:   #EFF6FF;
    --auth-accent-ring:   rgba(37, 99, 235, 0.18);
    --auth-panel-from:    #0F172A;
    --auth-panel-to:      #1E293B;
    --auth-panel-glow-1:  rgba(37, 99, 235, 0.30);
    --auth-panel-glow-2:  rgba(96, 165, 250, 0.20);
    --auth-panel-muted:   #94A3B8;
    --auth-panel-text:    #CBD5E1;
    --auth-panel-chip:    rgba(37, 99, 235, 0.18);
    --auth-panel-chip-ink:#93C5FD;
    --auth-bg-from:       #F8FAFC;
    --auth-bg-to:         #EEF2F7;
    --auth-danger-soft:   #FEF2F2;
    --auth-danger-border: #FCA5A5;
    --auth-danger-ink:    #7F1D1D;
}

/* === Base type === */
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    color: var(--color-foreground);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

code, .mono { font-family: var(--ff-mono); font-size: 12px; }

/* === Shared design-system component classes ===
 * These mirror the class names used in the mockup HTML so that
 * raw-markup components in MuscatHub.Web.Components can render
 * the same way without scoped CSS.
 */

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 8px 14px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    height: 34px;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { height: 28px; padding: 4px 10px; font-size: var(--fs-xs); }
.btn-lg { height: 40px; padding: 10px 18px; font-size: var(--fs-md); }
.btn-primary { background: var(--color-cta); color: var(--color-cta-text); }
.btn-primary:hover:not(:disabled) { background: var(--color-cta-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-foreground); border-color: var(--color-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-2); }
.btn-ghost { background: transparent; color: var(--color-cta); }
.btn-ghost:hover:not(:disabled) { background: var(--color-accent-soft); }
.btn-danger { background: var(--color-danger); color: #FFFFFF; } /* one-off — intentional white-on-red */
.btn-danger:hover:not(:disabled) { background: var(--color-danger-ink); }

/* Badge / dot */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1;
}
.badge-neutral { background: var(--color-surface-2); color: var(--color-muted); }
.badge-success { background: var(--color-success-soft); color: var(--color-success-ink); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger-ink); }
.badge-info    { background: var(--color-info-soft);    color: var(--color-info-ink); }
.badge-outline { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }

.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.dot-success { background: var(--color-success); }
.dot-warning { background: var(--color-warning); }
.dot-danger  { background: var(--color-danger); }
.dot-info    { background: var(--color-info); }
.dot-muted   { background: var(--color-muted-2); }

/* Scope pill */
.scope-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.scope-tenant   { background: var(--color-scope-tenant-bg);  color: var(--color-scope-tenant-text); }
.scope-company  { background: var(--color-scope-company-bg); color: var(--color-scope-company-text); }
.scope-both     { background: var(--color-scope-both-bg);    color: var(--color-scope-both-text); }

/* Card */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.card-header { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.card-header h3 { font-size: 15px; font-weight: 600; }
.card-body { padding: var(--s-5); }
.card-footer { padding: var(--s-3) var(--s-5); background: var(--color-surface-2); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-muted); }

/* Form field base — applied only to raw <input>, <select>, <textarea> controls. */
input.field,
select.field,
textarea.field {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-md);
    background: var(--color-surface);
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    color: var(--color-foreground);
    transition: border-color 120ms, box-shadow 120ms;
}
input.field:focus,
select.field:focus,
textarea.field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15,76,92,0.15); }
input.field:disabled,
select.field:disabled,
textarea.field:disabled { background: var(--color-surface-2); color: var(--color-muted); cursor: not-allowed; }
input.field.field--error,
select.field.field--error,
textarea.field.field--error { border-color: var(--color-danger); }
input.field.field--error:focus,
select.field.field--error:focus,
textarea.field.field--error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,0.15); }
textarea.field { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }

/* Field wrapper — stacks label above control with a small gap */
.ds-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Field label / help text */
.field-label { display: block; font-size: var(--fs-xs); color: var(--color-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.field-help  { display: block; font-size: var(--fs-xs); color: var(--color-muted); margin-top: 4px; }
.field-help--error { color: var(--color-danger); }

/* MudBlazor selective shape overrides (additive — not invasive). */
.mud-button-root { border-radius: var(--r-md) !important; text-transform: none !important; font-family: var(--ff-body) !important; }
.mud-input-control .mud-input-slot { font-family: var(--ff-body); }
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 { font-family: var(--ff-display); }

/* Data table — applied via DataTable<TRow> wrapper on MudSimpleTable.Class="ds-table". */
.ds-table thead th {
    background: var(--color-surface-2);
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 10px 12px;
}
.ds-table tbody td { font-size: 13px; padding: 10px 12px; }
.ds-table tbody tr:hover { background: var(--color-accent-soft); }
.ds-table td.num, .ds-table th.num { text-align: right; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }