/* ============================================================
   EnforceGuard · Fluent 2 Design System — COMPONENTS
   Bespoke .fui-* vocabulary used across all pages.
   ============================================================ */

/* ── Typography ramp ────────────────────────────────────── */
.fui-display   { font-family: var(--f-font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--f-fg-1); }
.fui-title1    { font-family: var(--f-font-display); font-size: 2rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--f-fg-1); }
.fui-title2    { font-family: var(--f-font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--f-fg-1); }
.fui-title3    { font-family: var(--f-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--f-fg-1); }
.fui-subtitle  { font-size: 1.05rem; font-weight: 600; color: var(--f-fg-1); }
.fui-body      { font-size: 0.94rem; line-height: 1.6; color: var(--f-fg-2); }
.fui-body-strong { font-size: 0.94rem; font-weight: 600; color: var(--f-fg-1); }
.fui-caption   { font-size: 0.8rem; color: var(--f-fg-3); }
.fui-eyebrow   { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--f-brand-fg); }
.fui-muted     { color: var(--f-fg-3); }

/* ── Page header ────────────────────────────────────────── */
.fui-page { max-width: 1180px; margin: 0 auto; padding-bottom: 3rem; animation: fui-fade-up var(--f-dur-gentle) var(--f-ease-decel) both; }
.fui-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0.25rem 0 1.5rem; }
.fui-page-title { font-family: var(--f-font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--f-fg-1); }
.fui-page-sub { color: var(--f-fg-3); margin: 0.35rem 0 0; font-size: 0.94rem; max-width: 60ch; }
.fui-page-head-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* ── Surfaces ───────────────────────────────────────────── */
.fui-card {
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-2);
    padding: 1.5rem;
}
.fui-card--flush { padding: 0; overflow: hidden; }
.fui-card--pad-lg { padding: 2rem; }
.fui-card--interactive { transition: transform var(--f-dur) var(--f-ease-decel), box-shadow var(--f-dur) var(--f-ease-decel), border-color var(--f-dur) var(--f-ease); cursor: pointer; }
.fui-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--f-shadow-16); border-color: var(--f-brand-stroke); }
.fui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.fui-card-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--f-fg-1); }
.fui-card-sub { font-size: 0.82rem; color: var(--f-fg-3); margin: 0.15rem 0 0; }

.fui-divider { height: 1px; background: var(--f-stroke-2); border: 0; margin: 1.25rem 0; }

/* ── Buttons ────────────────────────────────────────────── */
.fui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--f-font); font-size: 0.9rem; font-weight: 600; line-height: 1;
    padding: 0.62rem 1.1rem; border-radius: var(--f-radius-m);
    border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color var(--f-dur-fast) var(--f-ease), box-shadow var(--f-dur-fast) var(--f-ease), border-color var(--f-dur-fast) var(--f-ease), transform var(--f-dur-fast) var(--f-ease), color var(--f-dur-fast) var(--f-ease);
}
.fui-btn svg { width: 18px; height: 18px; flex: none; }
.fui-btn:active { transform: scale(0.97); }
.fui-btn:disabled, .fui-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.fui-btn--primary { background: var(--f-brand); color: #fff; box-shadow: var(--f-shadow-2); }
.fui-btn--primary:hover { background: var(--f-brand-hover); color: #fff; box-shadow: var(--f-shadow-4); }
.fui-btn--primary:active { background: var(--f-brand-pressed); }

.fui-btn--brand { background: var(--f-brand-grad); color: #fff; box-shadow: var(--f-shadow-brand); }
.fui-btn--brand:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(91, 91, 214, 0.42); }

.fui-btn--secondary { background: var(--f-surface); color: var(--f-fg-1); border-color: var(--f-stroke-1); box-shadow: var(--f-shadow-2); }
.fui-btn--secondary:hover { background: var(--f-surface-hover); color: var(--f-fg-1); }
.fui-btn--secondary:active { background: var(--f-surface-pressed); }

.fui-btn--subtle { background: transparent; color: var(--f-fg-1); }
.fui-btn--subtle:hover { background: var(--f-subtle-hover); color: var(--f-fg-1); }

.fui-btn--outline { background: transparent; color: var(--f-brand-fg); border-color: var(--f-brand-stroke); }
.fui-btn--outline:hover { background: var(--f-brand-tint-bg); color: var(--f-brand-fg-hover); border-color: var(--f-brand); }

.fui-btn--danger { background: var(--f-danger); color: #fff; }
.fui-btn--danger:hover { background: color-mix(in srgb, var(--f-danger) 86%, black); color: #fff; }

.fui-btn--ghost-light { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.22); backdrop-filter: blur(6px); }
.fui-btn--ghost-light:hover { background: rgba(255,255,255,0.2); color: #fff; }

.fui-btn--sm { padding: 0.42rem 0.8rem; font-size: 0.82rem; }
.fui-btn--lg { padding: 0.8rem 1.5rem; font-size: 0.98rem; }
.fui-btn--icon { padding: 0.5rem; width: 2.3rem; height: 2.3rem; }
.fui-btn--block { width: 100%; }

/* ── Icon tiles ─────────────────────────────────────────── */
.fui-ic {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: var(--f-radius-l);
    background: var(--f-brand-tint-bg); color: var(--f-brand-tint-fg);
}
.fui-ic svg { width: 22px; height: 22px; }
.fui-ic--sm { width: 34px; height: 34px; border-radius: var(--f-radius-m); }
.fui-ic--sm svg { width: 18px; height: 18px; }
.fui-ic--lg { width: 56px; height: 56px; border-radius: var(--f-radius-xl); }
.fui-ic--brand { background: var(--f-brand-grad); color: #fff; box-shadow: var(--f-shadow-brand); }
.fui-ic--success { background: var(--f-success-bg); color: var(--f-success-fg); }
.fui-ic--warning { background: var(--f-warning-bg); color: var(--f-warning-fg); }
.fui-ic--danger { background: var(--f-danger-bg); color: var(--f-danger-fg); }
.fui-ic--info { background: var(--f-info-bg); color: var(--f-info-fg); }
.fui-ic--neutral { background: var(--f-surface-3); color: var(--f-fg-2); }

/* ── Badges / pills ─────────────────────────────────────── */
.fui-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; font-weight: 600; line-height: 1;
    padding: 0.32rem 0.6rem; border-radius: var(--f-radius-circle);
    background: var(--f-surface-3); color: var(--f-fg-2); border: 1px solid transparent;
}
.fui-badge svg { width: 13px; height: 13px; }
.fui-badge::before { content: ""; }
.fui-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.fui-badge--brand { background: var(--f-brand-tint-bg); color: var(--f-brand-tint-fg); }
.fui-badge--success { background: var(--f-success-bg); color: var(--f-success-fg); border-color: var(--f-success-stroke); }
.fui-badge--warning { background: var(--f-warning-bg); color: var(--f-warning-fg); border-color: var(--f-warning-stroke); }
.fui-badge--danger { background: var(--f-danger-bg); color: var(--f-danger-fg); border-color: var(--f-danger-stroke); }
.fui-badge--info { background: var(--f-info-bg); color: var(--f-info-fg); border-color: var(--f-info-stroke); }
.fui-badge--neutral { background: var(--f-surface-3); color: var(--f-fg-3); border-color: var(--f-stroke-2); }
.fui-badge--solid { background: var(--f-brand); color: #fff; }

/* ── Stat / KPI tiles ───────────────────────────────────── */
.fui-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.fui-stat {
    background: var(--f-surface); border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl); padding: 1.25rem 1.35rem; box-shadow: var(--f-shadow-2);
    display: flex; flex-direction: column; gap: 0.55rem; position: relative; overflow: hidden;
}
.fui-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fui-stat-label { font-size: 0.8rem; font-weight: 600; color: var(--f-fg-3); }
.fui-stat-value { font-family: var(--f-font-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--f-fg-1); letter-spacing: -0.02em; }
.fui-stat-value small { font-size: 0.95rem; font-weight: 600; color: var(--f-fg-3); }
.fui-stat-foot { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--f-fg-3); }
.fui-trend { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 600; }
.fui-trend--up { color: var(--f-success-fg); }
.fui-trend--down { color: var(--f-danger-fg); }

/* ── Toolbar / command bar ──────────────────────────────── */
.fui-toolbar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.6rem; background: var(--f-surface); border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-xl); box-shadow: var(--f-shadow-2);
}
.fui-toolbar .spacer { flex: 1; }

/* ── Segmented tabs ─────────────────────────────────────── */
.fui-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--f-surface-3); border-radius: var(--f-radius-l); }
.fui-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--f-font); font-size: 0.85rem; font-weight: 600; color: var(--f-fg-3);
    padding: 0.45rem 0.9rem; border-radius: var(--f-radius-m);
    transition: background var(--f-dur-fast) var(--f-ease), color var(--f-dur-fast) var(--f-ease);
}
.fui-tab:hover { color: var(--f-fg-1); }
.fui-tab.is-active { background: var(--f-surface); color: var(--f-brand-fg); box-shadow: var(--f-shadow-2); }

/* Underline tabs */
.fui-tabline { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--f-stroke-2); margin-bottom: 1.25rem; flex-wrap: wrap; }
.fui-tabline-item {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--f-font); font-size: 0.9rem; font-weight: 600; color: var(--f-fg-3);
    padding: 0.65rem 0.85rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--f-dur-fast) var(--f-ease), border-color var(--f-dur-fast) var(--f-ease);
}
.fui-tabline-item:hover { color: var(--f-fg-1); }
.fui-tabline-item.is-active { color: var(--f-brand-fg); border-bottom-color: var(--f-brand); }

/* ── Toggle switch ──────────────────────────────────────── */
.fui-switch { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.fui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fui-switch-track { width: 40px; height: 20px; border-radius: var(--f-radius-circle); background: var(--f-surface-pressed); border: 1px solid var(--f-stroke-accessible); transition: background var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease); flex: none; }
.fui-switch-thumb { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--f-fg-2); transition: left var(--f-dur) var(--f-ease-decel), background var(--f-dur) var(--f-ease); }
.fui-switch input:checked + .fui-switch-track { background: var(--f-brand); border-color: var(--f-brand); }
.fui-switch input:checked + .fui-switch-track .fui-switch-thumb { left: 23px; background: #fff; }

/* ── Progress ───────────────────────────────────────────── */
.fui-progress { height: 6px; border-radius: var(--f-radius-circle); background: var(--f-surface-pressed); overflow: hidden; }
.fui-progress-fill { height: 100%; border-radius: inherit; background: var(--f-brand-grad); transition: width var(--f-dur-slow) var(--f-ease-decel); }

/* ── Terminal / code ────────────────────────────────────── */
.fui-terminal { border-radius: var(--f-radius-xl); overflow: hidden; border: 1px solid var(--f-stroke-1); box-shadow: var(--f-shadow-4); background: #0c0c14; }
.fui-terminal-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: #161622; border-bottom: 1px solid rgba(255,255,255,0.07); }
.fui-terminal-bar .tdot { width: 10px; height: 10px; border-radius: 50%; }
.fui-terminal-bar .tdot.r { background: #ff5f57; } .fui-terminal-bar .tdot.y { background: #febc2e; } .fui-terminal-bar .tdot.g { background: #28c840; }
.fui-terminal-name { margin-left: 0.4rem; font-size: 0.76rem; color: rgba(255,255,255,0.5); font-family: var(--f-font-mono); }
.fui-terminal-body { padding: 0.9rem 1rem; font-family: var(--f-font-mono); font-size: 0.82rem; color: #e6e6f0; overflow-x: auto; }
.fui-terminal-body .prompt { color: #7f86f5; margin-right: 0.5rem; }
.fui-code { font-family: var(--f-font-mono); font-size: 0.84rem; background: var(--f-surface-3); border: 1px solid var(--f-stroke-2); border-radius: var(--f-radius-m); padding: 0.15rem 0.4rem; color: var(--f-brand-fg); }

/* ── Avatar ─────────────────────────────────────────────── */
.fui-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--f-brand-grad); color: #fff; font-weight: 700; font-size: 0.85rem; flex: none; }
.fui-avatar--lg { width: 52px; height: 52px; font-size: 1.1rem; }
.fui-avatar--sm { width: 28px; height: 28px; font-size: 0.72rem; }

/* ── Empty state ────────────────────────────────────────── */
.fui-empty { text-align: center; padding: 3rem 1.5rem; color: var(--f-fg-3); }
.fui-empty .fui-ic { margin: 0 auto 1rem; }
.fui-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--f-fg-1); margin: 0 0 0.35rem; }

/* ── Data list rows ─────────────────────────────────────── */
.fui-list { display: flex; flex-direction: column; }
.fui-list-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--f-stroke-2); }
.fui-list-row:last-child { border-bottom: 0; }
.fui-list-grow { flex: 1; min-width: 0; }

/* ── Table card ─────────────────────────────────────────── */
.fui-table-card { background: var(--f-surface); border: 1px solid var(--f-stroke-card); border-radius: var(--f-radius-2xl); box-shadow: var(--f-shadow-2); overflow: hidden; }
.fui-table-card .table { margin: 0; }
.fui-table-card .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.fui-table-card .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }

/* ── Helper layout ──────────────────────────────────────── */
.fui-grid { display: grid; gap: 1rem; }
.fui-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fui-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fui-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fui-row { display: flex; align-items: center; gap: 0.6rem; }
.fui-spread { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fui-stack { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) {
    .fui-grid--2, .fui-grid--3, .fui-grid--4 { grid-template-columns: 1fr; }
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes fui-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fui-spin { to { transform: rotate(360deg); } }
.fui-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: fui-spin 0.7s linear infinite; }

/* ── Auth / Setup layout ────────────────────────────────── */
/* Centred column that fills the content area */
.auth-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 70vh;
    padding: 2.5rem 1rem 3rem;
    animation: fui-fade-up var(--f-dur-gentle) var(--f-ease-decel) both;
}
.setup-center { align-items: center; min-height: 80vh; }

/* The main auth card */
.auth-card {
    width: 100%;
    max-width: 440px;
}
.setup-card {
    width: 100%;
    max-width: 540px;
}

/* Brand row at the top of every auth card */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.auth-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--f-radius-xl);
}

/* Page title inside the card */
.auth-title {
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Field wrapper: consistent vertical rhythm */
.auth-field {
    margin-bottom: 1rem;
}

/* Password input + eye-toggle wrapper */
.auth-pw-wrap {
    position: relative;
}
.auth-pw-wrap .form-control {
    padding-right: 2.8rem;
}
.auth-eye-btn {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--f-fg-4);
    transition: color var(--f-dur-fast) var(--f-ease);
}
.auth-eye-btn:hover { color: var(--f-fg-2); }
.auth-eye-btn svg { width: 18px; height: 18px; }

/* Submit button spacing */
.auth-submit { margin-top: 0.5rem; }

/* "Already have an account?" link row */
.auth-switch {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Divider row with "oder" label */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
}
.auth-divider .fui-divider { flex: 1; margin: 0; }

/* Provider button stack inside ExternalLoginPicker */
.ext-providers { display: flex; flex-direction: column; gap: 0.5rem; }
.ext-provider-btn { justify-content: center; font-size: 0.88rem; }

/* Status/error cards (AccessDenied, Lockout, ExternalLogin error) */
.auth-status-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 2rem;
}
.auth-status-icon { margin-bottom: 0.25rem; }

/* Setup: org selection list */
.setup-org-list { border: 1px solid var(--f-stroke-2); border-radius: var(--f-radius-xl); overflow: hidden; }
.setup-org-item {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--f-stroke-2);
    transition: background var(--f-dur-fast) var(--f-ease);
    padding: 0.75rem 0.9rem;
}
.setup-org-item:last-child { border-bottom: 0; }
.setup-org-item:hover { background: var(--f-subtle-hover); }
.setup-org-item.is-selected { background: var(--f-brand-tint-bg); }