/*
 * CFM Operations design tokens — Open WebUI-inspired look & feel.
 *
 * This file recreates the *design language* of Open WebUI (neutral gray
 * scale, soft 12–24px radii, near-borderless surfaces, pill composer and
 * black/white primary actions) in our own tokens. No Open WebUI code,
 * components, names or logos are included; branding stays CFM / Aiden.
 *
 * Reference values (open-webui/open-webui, src/tailwind.css @theme, oklch
 * converted to sRGB — identical to the pre-v4 hex palette within ±1/255):
 *   gray-50  #f9f9f9  oklch(.98 0 0)    gray-500 #9b9b9b  oklch(.69 0 0)
 *   gray-100 #ececec  oklch(.94 0 0)    gray-600 #676767  oklch(.51 0 0)
 *   gray-200 #e3e3e3  oklch(.92 0 0)    gray-700 #4e4e4e  oklch(.42 0 0)
 *   gray-300 #cdcdcd  oklch(.85 0 0)    gray-800 #333333  oklch(.32 0 0)
 *   gray-400 #b4b4b4  oklch(.77 0 0)    gray-850 #262626  oklch(.27 0 0)
 *                                       gray-900 #171717  oklch(.20 0 0)
 *                                       gray-950 #0d0d0d  oklch(.16 0 0)
 * Light: app bg-white, sidebar bg-gray-50, hover bg-gray-100, active
 * bg-black/[.035]. Dark (class based, `html.dark`): app bg-gray-900,
 * sidebar bg-gray-950, hover bg-gray-900, elevated bg-gray-850.
 *
 * Theme choice is applied before first paint by static/js/owui-theme.js
 * (`cfm-theme` = system | light | dark in localStorage).
 */

/* Inter 3.19 (SIL OFL 1.1, static/vendor/inter/LICENSE.txt), upright wght 400–700, Latin subset. */
@font-face {
    font-family: "Inter";
    src: url("/static/vendor/inter/InterVariable-latin.woff2?v=3.19") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    --owui-font: -apple-system, BlinkMacSystemFont, "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --owui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --owui-gray-50: #f9f9f9;
    --owui-gray-100: #ececec;
    --owui-gray-200: #e3e3e3;
    --owui-gray-300: #cdcdcd;
    --owui-gray-400: #b4b4b4;
    --owui-gray-500: #9b9b9b;
    --owui-gray-600: #676767;
    --owui-gray-700: #4e4e4e;
    --owui-gray-800: #333333;
    --owui-gray-850: #262626;
    --owui-gray-900: #171717;
    --owui-gray-950: #0d0d0d;

    /* Type scale (Tailwind text-xs / sidebar 0.8125rem / text-sm / chat 0.9375rem) */
    --owui-text-2xs: .6875rem;
    --owui-text-xs: .75rem;
    --owui-text-nav: .8125rem;
    --owui-text-sm: .875rem;
    --owui-text-md: .9375rem;
    --owui-text-lg: 1.125rem;
    --owui-text-xl: 1.25rem;
    --owui-text-2xl: 1.5rem;
    --owui-text-3xl: 1.875rem;

    /* Radii (rounded-md / lg / xl / 2xl / 3xl / 4xl / full) */
    --owui-radius-sm: 6px;
    --owui-radius: 8px;
    --owui-radius-lg: 12px;
    --owui-radius-xl: 16px;
    --owui-radius-2xl: 24px;
    --owui-radius-3xl: 32px;
    --owui-radius-pill: 9999px;

    --owui-sidebar-width: 245px;
    --owui-sidebar-rail: 52px;
    --owui-topbar-height: 48px;
    --owui-ease: cubic-bezier(.22, 1, .36, 1);

    /* Semantic surfaces */
    --owui-bg: #ffffff;
    --owui-bg-sidebar: var(--owui-gray-50);
    --owui-surface: #ffffff;
    --owui-surface-2: var(--owui-gray-50);
    --owui-surface-3: var(--owui-gray-100);
    --owui-elevated: #ffffff;
    --owui-modal: #ffffff;
    --owui-hover: rgba(0, 0, 0, .04);
    --owui-hover-strong: var(--owui-gray-100);
    --owui-active: rgba(0, 0, 0, .055);
    --owui-backdrop: rgba(0, 0, 0, .45);

    /* Lines */
    --owui-border-subtle: #f3f3f3;
    --owui-border: var(--owui-gray-100);
    --owui-border-strong: var(--owui-gray-200);
    --owui-border-input: var(--owui-gray-200);

    /* Text */
    --owui-text-strong: var(--owui-gray-900);
    --owui-text: var(--owui-gray-800);
    --owui-text-secondary: var(--owui-gray-700);
    --owui-text-muted: var(--owui-gray-600);
    --owui-text-faint: var(--owui-gray-600);
    --owui-placeholder: var(--owui-gray-600);

    /* Actions: Open WebUI primary = black pill (white in dark) */
    --owui-primary: #000000;
    --owui-primary-hover: var(--owui-gray-900);
    --owui-primary-fg: #ffffff;
    --owui-secondary: var(--owui-gray-50);
    --owui-secondary-hover: var(--owui-gray-100);
    --owui-secondary-ring: var(--owui-gray-200);
    --owui-secondary-fg: var(--owui-gray-900);
    --owui-accent: #2563eb;
    --owui-accent-hover: #1d4ed8;
    --owui-accent-soft: rgba(59, 130, 246, .12);
    --owui-link: #2563eb;
    --owui-focus: #2563eb;
    --owui-focus-ring: 0 0 0 3px rgba(59, 130, 246, .28);
    --owui-disabled-bg: var(--owui-gray-200);
    --owui-disabled-fg: #ffffff;

    /* Status (Badge: bg-{c}-500/20 text-{c}-700 dark:text-{c}-200) */
    --owui-success: #16a34a;
    --owui-success-soft: rgba(34, 197, 94, .12);
    --owui-success-badge: rgba(34, 197, 94, .2);
    --owui-success-border: rgba(34, 197, 94, .3);
    --owui-success-text: #15803d;
    --owui-warning: #ca8a04;
    --owui-warning-soft: rgba(234, 179, 8, .12);
    --owui-warning-badge: rgba(234, 179, 8, .2);
    --owui-warning-border: rgba(234, 179, 8, .35);
    --owui-warning-text: #a16207;
    --owui-danger: #dc2626;
    --owui-danger-hover: #b91c1c;
    --owui-danger-soft: rgba(239, 68, 68, .1);
    --owui-danger-badge: rgba(239, 68, 68, .2);
    --owui-danger-border: rgba(239, 68, 68, .3);
    --owui-danger-text: #b91c1c;
    --owui-info: #2563eb;
    --owui-info-soft: rgba(59, 130, 246, .1);
    --owui-info-badge: rgba(59, 130, 246, .2);
    --owui-info-border: rgba(59, 130, 246, .3);
    --owui-info-text: #1d4ed8;
    --owui-purple: #9333ea;
    --owui-purple-soft: rgba(168, 85, 247, .1);
    --owui-purple-badge: rgba(168, 85, 247, .2);
    --owui-purple-border: rgba(168, 85, 247, .3);
    --owui-purple-text: #7e22ce;

    /* CFM brand (kept for the Aiden orb, logo tiles and chart accents) */
    --owui-brand: #123c69;
    --owui-brand-accent: #e67e22;

    /* Elevation (shadow-sm / shadow-lg / shadow-xl) */
    --owui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --owui-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --owui-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --owui-shadow-composer: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .06);

    --owui-scrollbar-thumb: rgba(215, 215, 215, .6);
    --owui-selection: rgba(180, 213, 255, .5);
    --owui-skeleton: var(--owui-gray-100);
    --owui-composer-bg: #ffffff;
}

:root.dark {
    color-scheme: dark;

    --owui-bg: var(--owui-gray-900);
    --owui-bg-sidebar: var(--owui-gray-950);
    --owui-surface: var(--owui-gray-900);
    --owui-surface-2: #1f1f1f;
    --owui-surface-3: var(--owui-gray-850);
    --owui-elevated: var(--owui-gray-850);
    --owui-modal: var(--owui-gray-900);
    --owui-hover: rgba(255, 255, 255, .045);
    --owui-hover-strong: var(--owui-gray-850);
    --owui-active: rgba(255, 255, 255, .06);
    --owui-backdrop: rgba(0, 0, 0, .6);

    --owui-border-subtle: rgba(38, 38, 38, .6);
    --owui-border: var(--owui-gray-850);
    --owui-border-strong: var(--owui-gray-800);
    --owui-border-input: var(--owui-gray-800);

    --owui-text-strong: #ffffff;
    --owui-text: var(--owui-gray-100);
    --owui-text-secondary: var(--owui-gray-300);
    --owui-text-muted: var(--owui-gray-400);
    --owui-text-faint: var(--owui-gray-500);
    --owui-placeholder: var(--owui-gray-600);

    --owui-primary: #ffffff;
    --owui-primary-hover: var(--owui-gray-100);
    --owui-primary-fg: #000000;
    --owui-secondary: var(--owui-gray-850);
    --owui-secondary-hover: var(--owui-gray-800);
    --owui-secondary-ring: var(--owui-gray-800);
    --owui-secondary-fg: var(--owui-gray-100);
    --owui-accent: #3b82f6;
    --owui-accent-hover: #60a5fa;
    --owui-accent-soft: rgba(59, 130, 246, .18);
    --owui-link: #60a5fa;
    --owui-focus: #3b82f6;
    --owui-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);
    --owui-disabled-bg: var(--owui-gray-700);
    --owui-disabled-fg: var(--owui-gray-900);

    --owui-success: #22c55e;
    --owui-success-soft: rgba(34, 197, 94, .12);
    --owui-success-badge: rgba(34, 197, 94, .2);
    --owui-success-border: rgba(34, 197, 94, .28);
    --owui-success-text: #bbf7d0;
    --owui-warning: #eab308;
    --owui-warning-soft: rgba(234, 179, 8, .12);
    --owui-warning-badge: rgba(234, 179, 8, .2);
    --owui-warning-border: rgba(234, 179, 8, .3);
    --owui-warning-text: #fef08a;
    --owui-danger: #ef4444;
    --owui-danger-hover: #f87171;
    --owui-danger-soft: rgba(239, 68, 68, .14);
    --owui-danger-badge: rgba(239, 68, 68, .22);
    --owui-danger-border: rgba(239, 68, 68, .32);
    --owui-danger-text: #fecaca;
    --owui-info: #3b82f6;
    --owui-info-soft: rgba(59, 130, 246, .14);
    --owui-info-badge: rgba(59, 130, 246, .22);
    --owui-info-border: rgba(59, 130, 246, .32);
    --owui-info-text: #bfdbfe;
    --owui-purple: #a855f7;
    --owui-purple-soft: rgba(168, 85, 247, .14);
    --owui-purple-badge: rgba(168, 85, 247, .22);
    --owui-purple-border: rgba(168, 85, 247, .32);
    --owui-purple-text: #e9d5ff;

    --owui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);
    --owui-shadow: 0 10px 15px -3px rgba(0, 0, 0, .45), 0 4px 6px -4px rgba(0, 0, 0, .4);
    --owui-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .45);
    --owui-shadow-composer: 0 10px 15px -3px rgba(0, 0, 0, .35), 0 4px 6px -4px rgba(0, 0, 0, .3);

    --owui-scrollbar-thumb: rgba(67, 67, 67, .6);
    --owui-selection: rgba(59, 130, 246, .35);
    --owui-skeleton: var(--owui-gray-850);
    --owui-composer-bg: color-mix(in srgb, var(--owui-gray-500) 5%, var(--owui-gray-900));
}

/* ---------------------------------------------------------------------------
 * Base — kept low-specificity so page stylesheets can still refine it.
 * ------------------------------------------------------------------------ */

html {
    font-family: var(--owui-font);
    word-break: normal;
    font-variant-ligatures: no-contextual;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html body {
    font-family: var(--owui-font);
    background-color: var(--owui-bg);
    color: var(--owui-text);
}

html.owui-theme-switching *,
html.owui-theme-switching *::before,
html.owui-theme-switching *::after {
    transition: none !important;
}

::selection { background: var(--owui-selection); }

html * {
    scrollbar-width: thin;
    scrollbar-color: var(--owui-scrollbar-thumb) transparent;
}

::-webkit-scrollbar { width: .45rem; height: .45rem; }
::-webkit-scrollbar-track { background-color: transparent; border-radius: 9999px; }
::-webkit-scrollbar-thumb {
    background-color: var(--owui-scrollbar-thumb);
    border: 1px solid transparent;
    border-radius: 9999px;
}
::-webkit-scrollbar-corner { background: transparent; }

html input::placeholder,
html textarea::placeholder { color: var(--owui-placeholder); opacity: 1; }

html a { text-underline-offset: 2px; }

html :focus-visible {
    outline: 2px solid var(--owui-focus);
    outline-offset: 2px;
}

html select option { background-color: var(--owui-elevated); color: var(--owui-text); }

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

/* ---------------------------------------------------------------------------
 * Shared primitives used by the shell, auth screens and restyled pages.
 * ------------------------------------------------------------------------ */

.owui-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: var(--owui-radius-pill);
    background: var(--owui-secondary);
    box-shadow: inset 0 0 0 1px var(--owui-secondary-ring);
    color: var(--owui-secondary-fg);
    padding: 6px 14px;
    font: inherit;
    font-size: var(--owui-text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.owui-btn:hover { background: var(--owui-secondary-hover); }
.owui-btn:disabled { opacity: .5; cursor: not-allowed; }
.owui-btn-primary {
    background: var(--owui-primary);
    box-shadow: none;
    color: var(--owui-primary-fg);
}
.owui-btn-primary:hover { background: var(--owui-primary-hover); }
.owui-btn-ghost { background: transparent; box-shadow: none; color: var(--owui-text-secondary); }
.owui-btn-ghost:hover { background: var(--owui-hover); color: var(--owui-text-strong); }
.owui-btn-danger { background: var(--owui-danger); box-shadow: none; color: #ffffff; }
.owui-btn-danger:hover { background: var(--owui-danger-hover); }

.owui-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: var(--owui-radius);
    background: transparent;
    color: var(--owui-text-muted);
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.owui-icon-btn:hover { background: var(--owui-hover-strong); color: var(--owui-text-strong); }

.owui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--owui-radius-sm);
    background: var(--owui-surface-3);
    color: var(--owui-text-secondary);
    padding: 1px 7px;
    font-size: var(--owui-text-xs);
    font-weight: 500;
    line-height: 1.5;
}
.owui-badge.success { background: var(--owui-success-badge); color: var(--owui-success-text); }
.owui-badge.warning { background: var(--owui-warning-badge); color: var(--owui-warning-text); }
.owui-badge.danger { background: var(--owui-danger-badge); color: var(--owui-danger-text); }
.owui-badge.info { background: var(--owui-info-badge); color: var(--owui-info-text); }

.owui-input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--owui-border);
    border-radius: var(--owui-radius-lg);
    background: var(--owui-surface-2);
    color: var(--owui-text);
    padding: 8px 12px;
    font: inherit;
    font-size: var(--owui-text-sm);
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.owui-input:focus { border-color: var(--owui-focus); }

.owui-card {
    border: 1px solid var(--owui-border);
    border-radius: var(--owui-radius-xl);
    background: var(--owui-surface);
}

.owui-kbd {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--owui-border-strong);
    border-radius: 5px;
    color: var(--owui-text-faint);
    padding: 0 4px;
    font: 500 .625rem/1.5 var(--owui-font);
}

@media (prefers-reduced-motion: reduce) {
    .owui-btn, .owui-icon-btn, .owui-input { transition: none; }
}