/* ============================================================
   EnforceGuard · Fluent 2 Design System — THEME
   Design tokens (light + dark), base elements, Bootstrap reskin.
   Adapted from Microsoft Fluent 2 (fluent2.microsoft.design).
   ============================================================ */

:root {
    /* ── Type ───────────────────────────────────────────── */
    --f-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --f-font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --f-font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

    /* ── Brand ramp — EnforceGuard defense red ─────────────────── */
    --f-brand: #9e2b2b;
    --f-brand-hover: #872424;
    --f-brand-pressed: #6f1d1d;
    --f-brand-fg: #962727;
    --f-brand-fg-hover: #6f1d1d;
    --f-brand-tint-bg: #f7e9e9;
    --f-brand-tint-bg-hover: #f0d8d8;
    --f-brand-tint-fg: #8a2222;
    --f-brand-stroke: #e3bcbc;
    --f-brand-2: #c8453f;
    --f-brand-grad: linear-gradient(135deg, #b23a33 0%, #9e2b2b 55%, #822323 100%);
    --f-brand-grad-soft: linear-gradient(135deg, #b23a33 0%, #9e2b2b 100%);

    /* ── Neutrals — surfaces ────────────────────────────── */
    --f-canvas: #f0f0f4;
    --f-canvas-2: #e9e9ef;
    --f-surface: #ffffff;
    --f-surface-2: #fafafa;
    --f-surface-3: #f5f5f7;
    --f-surface-hover: #f5f5f7;
    --f-surface-pressed: #ebebef;
    --f-subtle-hover: rgba(0, 0, 0, 0.034);
    --f-subtle-pressed: rgba(0, 0, 0, 0.058);
    --f-overlay: rgba(0, 0, 0, 0.4);
    --f-glass: rgba(255, 255, 255, 0.72);

    /* ── Neutrals — foreground ──────────────────────────── */
    --f-fg-1: #242424;
    --f-fg-2: #424242;
    --f-fg-3: #616161;
    --f-fg-4: #707070;
    --f-fg-disabled: #bdbdbd;
    --f-fg-on-accent: #ffffff;

    /* ── Neutrals — stroke ──────────────────────────────── */
    --f-stroke-1: #d1d1d1;
    --f-stroke-2: #e6e6e6;
    --f-stroke-card: #ececf0;
    --f-stroke-accessible: #595959;

    /* ── Status ─────────────────────────────────────────── */
    --f-success: #0e8a0e;
    --f-success-fg: #0b6a0b;
    --f-success-bg: #e9f6e9;
    --f-success-stroke: #bfe0bf;
    --f-warning: #e9a200;
    --f-warning-fg: #8a5300;
    --f-warning-bg: #fdf3e1;
    --f-warning-stroke: #f3d9a0;
    --f-danger: #c50f1f;
    --f-danger-fg: #b10e1c;
    --f-danger-bg: #fdeced;
    --f-danger-stroke: #f1bdc2;
    --f-info: #0f6cbd;
    --f-info-fg: #0c5ba2;
    --f-info-bg: #eaf3fb;
    --f-info-stroke: #b9d8f2;

    /* ── Radius ─────────────────────────────────────────── */
    --f-radius-s: 3px;
    --f-radius-m: 4px;
    --f-radius-l: 6px;
    --f-radius-xl: 8px;
    --f-radius-2xl: 12px;
    --f-radius-3xl: 16px;
    --f-radius-4xl: 24px;
    --f-radius-circle: 9999px;

    /* ── Spacing ────────────────────────────────────────── */
    --f-sp-xs: 4px;
    --f-sp-s: 8px;
    --f-sp-m: 12px;
    --f-sp-l: 16px;
    --f-sp-xl: 20px;
    --f-sp-2xl: 24px;
    --f-sp-3xl: 32px;
    --f-sp-4xl: 48px;

    /* ── Elevation ──────────────────────────────────────── */
    --f-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.10);
    --f-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.10), 0 0 2px rgba(0, 0, 0, 0.10);
    --f-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.10), 0 0 2px rgba(0, 0, 0, 0.10);
    --f-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.10);
    --f-shadow-28: 0 14px 28px rgba(0, 0, 0, 0.14), 0 0 8px rgba(0, 0, 0, 0.10);
    --f-shadow-64: 0 32px 64px rgba(0, 0, 0, 0.18), 0 0 8px rgba(0, 0, 0, 0.10);
    --f-shadow-brand: 0 10px 28px rgba(158, 43, 43, 0.30);

    /* ── Motion ─────────────────────────────────────────── */
    --f-ease: cubic-bezier(0.33, 0, 0.67, 1);
    --f-ease-decel: cubic-bezier(0.1, 0.9, 0.2, 1);
    --f-ease-accel: cubic-bezier(0.7, 0, 1, 0.5);
    --f-dur-fast: 100ms;
    --f-dur: 200ms;
    --f-dur-slow: 300ms;
    --f-dur-gentle: 400ms;

    color-scheme: light;
}

[data-theme="dark"] {
    --f-brand: #c4453c;
    --f-brand-hover: #d2564c;
    --f-brand-pressed: #ab362f;
    --f-brand-fg: #e0837a;
    --f-brand-fg-hover: #ea9a92;
    --f-brand-tint-bg: #281312;
    --f-brand-tint-bg-hover: #371917;
    --f-brand-tint-fg: #e89a90;
    --f-brand-stroke: #4a211d;

    --f-canvas: #141414;
    --f-canvas-2: #0f0f0f;
    --f-surface: #1f1f1f;
    --f-surface-2: #242424;
    --f-surface-3: #2b2b2b;
    --f-surface-hover: #2e2e2e;
    --f-surface-pressed: #383838;
    --f-subtle-hover: rgba(255, 255, 255, 0.05);
    --f-subtle-pressed: rgba(255, 255, 255, 0.08);
    --f-overlay: rgba(0, 0, 0, 0.6);
    --f-glass: rgba(31, 31, 31, 0.72);

    --f-fg-1: #ffffff;
    --f-fg-2: #dedede;
    --f-fg-3: #adadad;
    --f-fg-4: #969696;
    --f-fg-disabled: #5c5c5c;

    --f-stroke-1: #404040;
    --f-stroke-2: #2e2e2e;
    --f-stroke-card: #333333;
    --f-stroke-accessible: #adadad;

    --f-success: #5ec25e;
    --f-success-fg: #6fd06f;
    --f-success-bg: #14260f;
    --f-success-stroke: #234d1f;
    --f-warning: #f0b94a;
    --f-warning-fg: #f0b94a;
    --f-warning-bg: #2a1f06;
    --f-warning-stroke: #4d3a10;
    --f-danger: #e9707f;
    --f-danger-fg: #ef8f9b;
    --f-danger-bg: #2a1012;
    --f-danger-stroke: #4d1f24;
    --f-info: #5aa9e6;
    --f-info-fg: #7cbcec;
    --f-info-bg: #0c2236;
    --f-info-stroke: #1f4060;

    --f-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 1px rgba(0, 0, 0, 0.50);
    --f-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.40), 0 0 2px rgba(0, 0, 0, 0.50);
    --f-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.45), 0 0 2px rgba(0, 0, 0, 0.50);
    --f-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.50), 0 0 2px rgba(0, 0, 0, 0.50);
    --f-shadow-28: 0 14px 28px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.50);
    --f-shadow-64: 0 32px 64px rgba(0, 0, 0, 0.65), 0 0 8px rgba(0, 0, 0, 0.50);
    --f-shadow-brand: 0 10px 28px rgba(196, 69, 60, 0.5);

    color-scheme: dark;
}

/* ============================================================
   Base elements
   ============================================================ */
html, body {
    font-family: var(--f-font);
    background-color: var(--f-canvas);
    color: var(--f-fg-1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-font-display);
    color: var(--f-fg-1);
    letter-spacing: -0.02em;
    font-weight: 600;
}

a {
    color: var(--f-brand-fg);
    text-decoration: none;
    transition: color var(--f-dur-fast) var(--f-ease);
}
a:hover { color: var(--f-brand-fg-hover); text-decoration: none; }

hr { border-color: var(--f-stroke-2); opacity: 1; }

code, kbd, samp, pre { font-family: var(--f-font-mono); }

::selection { background: color-mix(in srgb, var(--f-brand) 26%, transparent); }

:focus-visible {
    outline: 2px solid var(--f-brand);
    outline-offset: 1px;
    border-radius: var(--f-radius-s);
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--f-stroke-1) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--f-stroke-1);
    border-radius: var(--f-radius-circle);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--f-fg-4); background-clip: content-box; }

/* Smooth theme transitions */
body, .fui-card, .card, .btn, .app-topbar, .app-nav,
.form-control, .form-select, .table, .dropdown-menu, .modal-content {
    transition: background-color var(--f-dur) var(--f-ease),
                border-color var(--f-dur) var(--f-ease),
                color var(--f-dur) var(--f-ease);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   Bootstrap remap → Fluent
   ============================================================ */
:root {
    --bs-body-bg: var(--f-canvas);
    --bs-body-color: var(--f-fg-1);
    --bs-body-font-family: var(--f-font);
    --bs-body-font-size: 14px;
    --bs-emphasis-color: var(--f-fg-1);
    --bs-secondary-color: var(--f-fg-3);
    --bs-tertiary-color: var(--f-fg-4);
    --bs-border-color: var(--f-stroke-1);
    --bs-border-color-translucent: var(--f-stroke-2);
    --bs-border-radius: var(--f-radius-m);
    --bs-border-radius-lg: var(--f-radius-xl);
    --bs-border-radius-sm: var(--f-radius-s);
    --bs-link-color: var(--f-brand-fg);
    --bs-link-color-rgb: 150, 39, 39;
    --bs-link-hover-color: var(--f-brand-fg-hover);
    --bs-primary: var(--f-brand);
    --bs-primary-rgb: 158, 43, 43;
    --bs-secondary-bg: var(--f-surface-3);
    --bs-tertiary-bg: var(--f-surface-2);
    --bs-heading-color: var(--f-fg-1);
    --bs-code-color: var(--f-brand-fg);
    --bs-highlight-bg: var(--f-warning-bg);
}

/* Buttons */
.btn {
    border-radius: var(--f-radius-m);
    font-weight: 600;
    font-size: 14px;
    padding: 0.42rem 0.95rem;
    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);
}
.btn:active { transform: scale(0.985); }
.btn-primary {
    --bs-btn-bg: var(--f-brand);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--f-brand-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--f-brand-pressed);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--f-surface-pressed);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: var(--f-fg-disabled);
    --bs-btn-color: #fff;
    box-shadow: var(--f-shadow-2);
}
.btn-secondary {
    --bs-btn-bg: var(--f-surface);
    --bs-btn-border-color: var(--f-stroke-1);
    --bs-btn-color: var(--f-fg-1);
    --bs-btn-hover-bg: var(--f-surface-hover);
    --bs-btn-hover-border-color: var(--f-stroke-1);
    --bs-btn-hover-color: var(--f-fg-1);
    --bs-btn-active-bg: var(--f-surface-pressed);
    --bs-btn-active-color: var(--f-fg-1);
    box-shadow: var(--f-shadow-2);
}
.btn-danger {
    --bs-btn-bg: var(--f-danger);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in srgb, var(--f-danger) 86%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--f-danger) 76%, black);
}
.btn-success { --bs-btn-bg: var(--f-success); --bs-btn-border-color: transparent; }
.btn-outline-primary {
    --bs-btn-color: var(--f-brand-fg);
    --bs-btn-border-color: var(--f-brand-stroke);
    --bs-btn-hover-bg: var(--f-brand-tint-bg);
    --bs-btn-hover-color: var(--f-brand-fg-hover);
    --bs-btn-hover-border-color: var(--f-brand);
    --bs-btn-active-bg: var(--f-brand-tint-bg-hover);
    --bs-btn-active-color: var(--f-brand-fg-hover);
}
.btn-outline-secondary {
    --bs-btn-color: var(--f-fg-2);
    --bs-btn-border-color: var(--f-stroke-1);
    --bs-btn-hover-bg: var(--f-subtle-hover);
    --bs-btn-hover-color: var(--f-fg-1);
    --bs-btn-hover-border-color: var(--f-stroke-1);
}
.btn-link { --bs-btn-color: var(--f-brand-fg); --bs-btn-hover-color: var(--f-brand-fg-hover); text-decoration: none; font-weight: 600; }

/* Forms */
.form-control, .form-select {
    background-color: var(--f-surface);
    color: var(--f-fg-1);
    border: 1px solid var(--f-stroke-1);
    border-bottom-color: var(--f-stroke-accessible);
    border-radius: var(--f-radius-m);
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    transition: border-color var(--f-dur-fast) var(--f-ease), box-shadow var(--f-dur-fast) var(--f-ease);
}
.form-control::placeholder { color: var(--f-fg-4); }
.form-control:focus, .form-select:focus {
    background-color: var(--f-surface);
    color: var(--f-fg-1);
    border-color: var(--f-brand);
    border-bottom-width: 2px;
    box-shadow: none;
    outline: none;
}
.form-control:disabled, .form-select:disabled { background-color: var(--f-surface-3); color: var(--f-fg-disabled); }
.form-label { color: var(--f-fg-2); font-weight: 600; font-size: 13px; margin-bottom: 0.35rem; }
.form-text { color: var(--f-fg-3); }
.form-check-input { border-color: var(--f-stroke-accessible); background-color: var(--f-surface); }
.form-check-input:checked { background-color: var(--f-brand); border-color: var(--f-brand); }
.form-check-input:focus { border-color: var(--f-brand); box-shadow: 0 0 0 2px var(--f-brand-tint-bg); }
.input-group-text { background: var(--f-surface-3); border-color: var(--f-stroke-1); color: var(--f-fg-3); }

/* Floating labels (Identity pages) */
.form-floating > label { color: var(--f-fg-4); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--f-fg-3); }

/* Cards */
.card {
    background-color: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-xl);
    box-shadow: var(--f-shadow-2);
    color: var(--f-fg-1);
}
.card-header, .card-footer { background-color: transparent; border-color: var(--f-stroke-2); }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--f-fg-1); color: var(--f-fg-1); vertical-align: middle; }
.table > thead { color: var(--f-fg-3); }
.table > thead th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-color: var(--f-stroke-1); }
.table > :not(caption) > * > * { border-color: var(--f-stroke-2); padding: 0.7rem 0.75rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--f-subtle-hover); color: var(--f-fg-1); }

/* Badges */
.badge { font-weight: 600; border-radius: var(--f-radius-circle); padding: 0.3em 0.7em; }
.badge.bg-primary { background-color: var(--f-brand) !important; }
.badge.bg-success { background-color: var(--f-success) !important; }
.badge.bg-danger { background-color: var(--f-danger) !important; }
.badge.bg-warning { background-color: var(--f-warning) !important; color: #1a1a1a !important; }
.badge.bg-secondary { background-color: var(--f-surface-pressed) !important; color: var(--f-fg-2) !important; }

/* Alerts */
.alert { border-radius: var(--f-radius-l); border: 1px solid transparent; font-size: 14px; }
.alert-success { background: var(--f-success-bg); border-color: var(--f-success-stroke); color: var(--f-success-fg); }
.alert-danger { background: var(--f-danger-bg); border-color: var(--f-danger-stroke); color: var(--f-danger-fg); }
.alert-warning { background: var(--f-warning-bg); border-color: var(--f-warning-stroke); color: var(--f-warning-fg); }
.alert-info, .alert-primary { background: var(--f-info-bg); border-color: var(--f-info-stroke); color: var(--f-info-fg); }

/* Dropdowns / modals / popovers */
.dropdown-menu {
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-xl);
    box-shadow: var(--f-shadow-16);
    --bs-dropdown-link-color: var(--f-fg-1);
    --bs-dropdown-link-hover-bg: var(--f-subtle-hover);
    --bs-dropdown-link-hover-color: var(--f-fg-1);
    --bs-dropdown-link-active-bg: var(--f-brand-tint-bg);
    --bs-dropdown-link-active-color: var(--f-brand-tint-fg);
    padding: 6px;
}
.dropdown-item { border-radius: var(--f-radius-m); padding: 0.45rem 0.6rem; }
.modal-content {
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-64);
    color: var(--f-fg-1);
}
.modal-header, .modal-footer { border-color: var(--f-stroke-2); }

/* Nav tabs / pills */
.nav-tabs { border-bottom-color: var(--f-stroke-2); }
.nav-tabs .nav-link { color: var(--f-fg-3); border: none; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--f-fg-1); border-bottom-color: var(--f-stroke-1); }
.nav-tabs .nav-link.active { color: var(--f-brand-fg); background: transparent; border-bottom-color: var(--f-brand); }
.nav-pills .nav-link { color: var(--f-fg-2); border-radius: var(--f-radius-l); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--f-brand); color: #fff; }

/* List groups */
.list-group-item { background: var(--f-surface); border-color: var(--f-stroke-2); color: var(--f-fg-1); }

/* Validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--f-success); }
.invalid { outline: 1px solid var(--f-danger); }
.validation-message { color: var(--f-danger-fg); font-size: 13px; }