/* ═══════════════════════════════════════════════════════════
   DON & BRANCO — ADMIN THEME
   Static CSS that loads from public/ — no PHP OPcache issues
   ═══════════════════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS (v3 restyle, handoff 2026-06) ═══════════════
   Hillitty SEMANTTINEN paletti — yksi brändiperhe (koralli),
   semanttiset värit vain merkitykseen (ok/warn/crit/info).
   Mäpätään olemassa oleviin .fi-* -luokkiin alempana v3-kerroksessa. */
:root {
    --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* surfaces */
    /* AYE MATEY — YOVAHTI. Maapohja syva navy, kortit paperia, aksentti
       koralli. Lahtotila oli D&B:n indigo-violetti VAALEA teema
       (--bg #f5f6fa + violetti radial-gradientti, --brand #5b53e8).

       INK-TOKENIT PYSYVAT TUMMINA, ja se on paatos eika unohdus: ne
       piirtavat tekstin KORTTIEN paalle ja kortit ovat paperinvaaleita, joten
       navy paperilla on 11,5:1. Suoraan navy-maapohjalle tuleva teksti on eri
       asia ja sille on omat tokenit (--on-ground*) — tumma ink olisi siella
       navya navyllä. */
    --bg: #0b192e;
    --bg-grad: radial-gradient(1100px 640px at 100% -8%, #14304d 0%, transparent 56%), #0b192e;
    --card: #faf6ee;      /* paperi */
    --card-2: #fffdf8;
    --line: rgba(20,48,77,.16);
    --line-2: rgba(20,48,77,.26);

    /* ink */
    --ink: #14304d;
    --ink-2: #4d6a84;
    --ink-3: #647a90;
    --ink-4: #8a9cad;

    /* Teksti joka on SUORAAN navy-maapohjalla, ei kortin sisalla. */
    --on-ground: #f3eee2;
    --on-ground-2: rgba(243,238,226,.72);

    /* yksi brändiperhe (koralli) */
    --brand: #e85c4a;        /* koralli */
    --brand-600: #d94f3d;
    --brand-700: #b33d29;
    --brand-tint: rgba(232,92,74,.12);
    --brand-tint-2: rgba(232,92,74,.06);

    /* semanttiset — vain merkitykseen */
    --ok: #15a866;   --ok-t: #e6f6ee;
    --warn: #e08a1e; --warn-t: #fcf1de;
    --crit: #e2483d; --crit-t: #fdecea;
    --info: #4d6a84; --info-t: #eef0f5;

    /* sidebar */
    --nav-1: #14304d; --nav-2: #14304d; --nav-3: #0e1e38;
    --nav-ink: #e9e8fb; --nav-ink-2: #a9b6c4;

    /* varjot */
    --sh-xs: 0 1px 2px rgba(16,24,40,.04);
    --sh-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);
    --sh-md: 0 2px 5px -2px rgba(16,24,40,.06), 0 8px 20px -10px rgba(16,24,40,.10);
    --sh-lg: 0 14px 34px -14px rgba(31,28,90,.24), 0 4px 10px -4px rgba(16,24,40,.07);
    --sh-brand: 0 9px 22px -10px rgba(217, 79, 61,.5);

    /* pyöristykset & liike */
    --r-md: 13px; --r-lg: 17px; --r-xl: 22px; --r-pill: 999px;
    --tr: 170ms cubic-bezier(.2,.7,.2,1);
}

/* ═══ DARK MODE -TOKENIT — samat muuttujat uudelleen .dark:lle ════════════
   v3-kerros JA db3-ohjausnäkymä käyttävät näitä muuttujia (var(--card) jne.),
   mutta niitä ei aiemmin määritelty .dark:lle → koko custom-dashboard (ja
   kaikki token-pohjainen) jäi VAALEAKSI dark modessa. Tämä yksi lohko korjaa
   sen kerralla. Sävyt linjassa olemassa olevien .dark .fi-* / .dark .db-*
   -sääntöjen kanssa (#0e1e38-kortit, #0b192e-tausta, vaaleat indigo-tekstit). */
.dark {
    /* pinnat */
    --bg: #0b192e;
    --bg-grad: radial-gradient(1100px 640px at 100% -8%, #0e1e38 0%, transparent 56%), #0b192e;
    --card: #0e1e38;
    --card-2: #14304d;
    --line: rgba(255,255,255,.07);
    --line-2: rgba(255,255,255,.11);

    /* muste — vaaleat sävyt tummalla */
    --ink: #f2ede2;
    --ink-2: #c7d2fe;
    --ink-3: #a9b6c4;
    --ink-4: #647a90;

    /* brändi — kirkkaampi indigo tummalla, tintit läpikuultavia */
    --brand: #f08472;
    --brand-600: #d94f3d;
    --brand-700: #e85c4a;    /* oli violetti */
    --brand-tint: rgba(124,108,255,.16);
    --brand-tint-2: rgba(124,108,255,.08);

    /* semanttiset — tintit läpikuultavia, tekstit kirkkaita */
    --ok:   #34d18a;  --ok-t:   rgba(34,197,94,.15);
    --warn: #f0a93e;  --warn-t: rgba(245,158,11,.15);
    --crit: #f0655a;  --crit-t: rgba(239,68,68,.15);
    --info: #a9b6c4;  --info-t: rgba(255,255,255,.06);

    /* varjot — voimakkaammat tummalla taustalla */
    --sh-xs: 0 1px 2px rgba(0,0,0,.3);
    --sh-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --sh-md: 0 2px 5px -2px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.55);
    --sh-lg: 0 14px 34px -14px rgba(0,0,0,.7), 0 4px 10px -4px rgba(0,0,0,.5);
    --sh-brand: 0 9px 22px -10px rgba(124,108,255,.5);
}

/* ── SIDEBAR ── */
.fi-sidebar {
    background: linear-gradient(195deg, #0e1e38 0%, #14304d 40%, #1b4066 100%) !important;
    border-right: none !important;
    box-shadow: 4px 0 24px rgba(30, 27, 75, 0.15) !important;
}
.fi-sidebar .fi-sidebar-header {
    /* Läpinäkyvä → violetti sivupalkki jatkuu logon alle (valkoinen
       DON&BRANCO-wordmark erottuu, ei valkoista laatikkoa). */
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* Logo integroituna palkkiin — ei taustaa/laatikkoa. */
.fi-sidebar .fi-sidebar-header img,
.fi-sidebar .fi-logo {
    background: transparent !important;
}
.fi-sidebar-nav .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-header a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}
/* HUOM: nämä säännöt on scope:ttu .fi-sidebar:n sisälle koska globaali
   .fi-sidebar-item-label-väritys (valkoinen) valui myös record-sub-navigation
   :iin (.fi-page-sub-navigation-sidebar) joka on vaalealla taustalla.
   Tulos oli valkoinen teksti valkoisella → sub-nav näkyi haamuna.
   Sub-nav saa nyt Filament:n oletuksena tumman tekstin vaalealla. */
.fi-sidebar .fi-sidebar-item-label {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.75) !important;
}
.fi-sidebar .fi-sidebar-item-icon {
    color: rgba(255,255,255,0.5) !important;
}
.fi-sidebar .fi-sidebar-item a, .fi-sidebar .fi-sidebar-item button {
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 2px 8px !important;
}
.fi-sidebar .fi-sidebar-item a:hover, .fi-sidebar .fi-sidebar-item button:hover {
    background: rgba(255,255,255,0.1) !important;
    transform: translateX(3px);
}
.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item button:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item button:hover .fi-sidebar-item-icon {
    color: white !important;
}
.fi-sidebar .fi-sidebar-item-active a, .fi-sidebar .fi-sidebar-item-active button {
    background: rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.15) !important;
}
.fi-sidebar .fi-sidebar-item-active a:hover, .fi-sidebar .fi-sidebar-item-active button:hover {
    transform: none;
}
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: white !important;
}
.fi-sidebar .fi-sidebar-group .fi-sidebar-item {
    padding-left: 0.25rem !important;
}
.fi-sidebar-close-button,
.fi-sidebar-nav-flat-button {
    color: rgba(255,255,255,0.6) !important;
}

/* ── TOPBAR — frosted lasi (sticky). Sisältö liukuu lasin läpi scrollatessa. ── */
.fi-topbar {
    /* iOS "liquid glass" — sama kuin kanoninen lohko alempana. */
    background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.03) 100%), linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 100%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(180%) brightness(1.05) !important;
    backdrop-filter: blur(9px) saturate(180%) brightness(1.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.60) !important;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.95),
                inset 0 -1px 0 0 rgba(255,255,255,0.40),
                0 6px 22px -12px rgba(30,27,75,0.22) !important;
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Filamentin sisempi <nav>/<div> on bg-white → tehdään läpinäkyväksi, jotta
   .fi-topbar:n backdrop-filter näkyy (muuten lasiefekti jää valkoisen alle). */
.fi-topbar nav,
.fi-topbar > nav,
.fi-topbar > div {
    background: transparent !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/* Scrollatessa lasi tiivistyy + pehmeä syvyysvarjo (liquid glass). */
.fi-topbar.db-scrolled {
    background: linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.04) 100%), linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.36) 100%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.06) !important;
    backdrop-filter: blur(14px) saturate(190%) brightness(1.06) !important;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.98),
                inset 0 -1px 0 0 rgba(255,255,255,0.42),
                0 14px 34px -14px rgba(30,27,75,0.30) !important;
    border-bottom-color: rgba(255,255,255,0.7) !important;
}

/* ── PAGE BODY ── */
.fi-body {
    background: #f8f9fc !important;
}

/* ── FULL-WIDTH LAYOUT OVERRIDES ── */
.fi-main-ctn {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
.fi-header-ctn,
.fi-page-header-ctn {
    max-width: 100% !important;
}
.fi-main > div,
.fi-page > div {
    max-width: 100% !important;
}

/* ── SECTIONS / CARDS ── */
.fi-section {
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02) !important;
    transition: box-shadow 0.2s ease !important;
    overflow: visible !important;
}
.fi-section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04) !important;
}
.fi-section-header {
    background: linear-gradient(135deg, #fafbff 0%, #f5f3ff 100%) !important;
    border-bottom: 1px solid rgba(232, 92, 74,0.08) !important;
    padding: 16px 20px !important;
}
.fi-section-header-heading {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #0e1e38 !important;
}
.fi-section-header-description {
    color: #e85c4a !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    opacity: 0.8;
}
.fi-section-content-ctn {
    padding: 20px !important;
}

/* ── TABS ── */
.fi-tabs {
    background: white !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
/* All tab items (Filament v3: the item itself is the clickable element) */
.fi-tabs-item,
.fi-tabs-item > button {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
}
.fi-tabs-item:hover,
.fi-tabs-item > button:hover {
    background: #f5f3ff !important;
}
/* Active tab — broadest possible selectors */
.fi-tabs-item[aria-selected="true"],
.fi-tabs-item[aria-selected="true"] > button,
.fi-tabs-item-active,
.fi-tabs-item-active > button,
.fi-tabs-item.fi-active,
.fi-tabs-item.fi-active > button,
button[aria-selected="true"].fi-tabs-item {
    background: linear-gradient(135deg, #cf4838, #b33d29) !important;   /* valkoinen teksti: 4,53:1 -> 5,81:1 */
    color: white !important;
    box-shadow: 0 2px 8px rgba(232, 92, 74,0.35) !important;
}
/* Active tab label text — EXCLUDE badge elements */
.fi-tabs-item[aria-selected="true"] .fi-tabs-item-label,
.fi-tabs-item[aria-selected="true"] > button > span:not(.fi-badge),
.fi-tabs-item-active .fi-tabs-item-label,
.fi-tabs-item-active > button > span:not(.fi-badge),
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > button > span:not(.fi-badge) {
    color: white !important;
    font-weight: 600 !important;
}
/* Force badge text to be dark/readable on active tabs */
.fi-tabs-item[aria-selected="true"] .fi-badge,
.fi-tabs-item[aria-selected="true"] .fi-badge *,
.fi-tabs-item-active .fi-badge,
.fi-tabs-item-active .fi-badge *,
.fi-tabs-item.fi-active .fi-badge,
.fi-tabs-item.fi-active .fi-badge * {
    color: #92400e !important; /* amber-800 text for warning badge */
}
/* Active tab icon */
.fi-tabs-item[aria-selected="true"] .fi-tabs-item-icon,
.fi-tabs-item[aria-selected="true"] svg,
.fi-tabs-item-active .fi-tabs-item-icon,
.fi-tabs-item-active svg,
.fi-tabs-item.fi-active svg {
    color: rgba(255,255,255,0.9) !important;
}

/* ── DASHBOARD / PAGE WIDTH ── */
.fi-page .fi-page-content,
[class*="fi-page"] > div {
    max-width: 100% !important;
    width: 100% !important;
}
/* Override Filament's grid variables on the widget container */
.fi-wi,
[class*="fi-wi-"] {
    max-width: 100% !important;
    width: 100% !important;
    --cols-default: 1fr !important;
    --cols-sm: 1fr !important;
    --cols-md: 1fr !important;
    --cols-lg: 1fr !important;
    --cols-xl: 1fr !important;
    --cols-2xl: 1fr !important;
    grid-template-columns: 1fr !important;
}
/* Widget items span full */
.fi-wi > div {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* Override Filament's mx-auto containers */
[class*="fi-"].mx-auto {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── FORM FIELDS ── */
.fi-input-wrp {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    /* navy-alfa neutraalin harmaan sijaan, sama peruste kuin --line */
    border: 1.5px solid rgba(20,48,77,.20) !important;
}
.fi-input-wrp:focus-within {
    border-color: #e85c4a !important;
    box-shadow: 0 0 0 3px rgba(232, 92, 74,0.12) !important;
}
.fi-select-wrp {
    border-radius: 10px !important;
}

/* ── STAT CARDS ── */
.fi-wi-stats-overview-stat {
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden !important;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* ── BUTTONS ── */
.fi-btn-primary {
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(232, 92, 74,0.3) !important;
    transition: all 0.2s ease !important;
}
.fi-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(232, 92, 74,0.4) !important;
}

/* ── TABLE ── */
.fi-ta-row {
    transition: background 0.15s ease !important;
}
.fi-ta-row:hover {
    background: #fafbff !important;
}

/* ── MODAL ── */
.fi-modal-window {
    border-radius: 20px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}

/* ── REPEATER ── */
.fi-fo-repeater-item {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    transition: box-shadow 0.2s ease !important;
}
.fi-fo-repeater-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #e85c4a; }

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE: Skip rendering of inactive tab panels (ALL screens)
   Filament renders ALL tabs in the DOM; only CSS hides inactive ones.
   content-visibility: hidden tells the browser to skip layout/paint/
   compositing entirely for hidden panels.
   ══════════════════════════════════════════════════════════════ */
[x-show][style*="display: none"],
.fi-tabs-panel[style*="display: none"] {
    content-visibility: hidden !important;
    contain-intrinsic-size: 0 500px !important;
}

/* ══════════════════════════════════════════════════════════════
   EXTENSION INTERFERENCE PROTECTION
   Prevents Fonts Ninja, Grammarly, LanguageTool, and other
   extensions from injecting elements into form fields.
   ══════════════════════════════════════════════════════════════ */

/* Fonts Ninja — prevent font scanning popups inside form areas */
.fi-fo-field-wrp fonts-ninja-popup,
.fi-fo-field-wrp [class*="fontninja"],
.fi-fo-field-wrp [id*="fontninja"],
.fi-main fonts-ninja-popup {
    display: none !important;
    pointer-events: none !important;
}

/* Grammarly — prevent wrapper injection */
.fi-fo-field-wrp grammarly-extension,
.fi-fo-field-wrp [data-grammarly-shadow-root],
.fi-fo-field-wrp grammarly-desktop-integration {
    display: none !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* 1Password / iCloud Passwords — prevent field overlay */
.fi-fo-field-wrp [data-onepassword-title],
.fi-fo-field-wrp com-1password-op-button,
.fi-fo-field-wrp [id*="onepassword"] {
    display: none !important;
    pointer-events: none !important;
}

/* Isolate form inputs — prevent extension MutationObservers from
   causing expensive layout recalculations on keystroke */
.fi-input-wrp textarea,
.fi-input-wrp input {
    contain: layout style !important;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — comprehensive overrides for ALL Filament UI
   ══════════════════════════════════════════════════════════════ */

/* ── Core layout ── */
.dark .fi-sidebar {
    background: linear-gradient(195deg, #071120 0%, #0e1e38 50%, #14304d 100%) !important;
}
.dark .fi-body { background: #0b192e !important; }
.dark .fi-topbar {
    background: rgba(15,14,26,0.85) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── Pages & headings ── */
.dark .fi-header-heading { color: #f2ede2 !important; }
.dark .fi-header-subheading { color: #a5b4fc !important; }
.dark .fi-breadcrumbs li a, .dark .fi-breadcrumbs li span { color: #a5b4fc !important; }

/* ── Sections / Cards ── */
.dark .fi-section {
    background: #0e1e38 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.dark .fi-section-header {
    background: linear-gradient(135deg, #0e1e38 0%, #14304d 100%) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
.dark .fi-section-header-heading { color: #f2ede2 !important; }
.dark .fi-section-header-description { color: #a5b4fc !important; }
.dark .fi-section-content-ctn { color: #c7d2fe !important; }

/* ── Tabs ── */
.dark .fi-tabs {
    background: #0e1e38 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.dark .fi-tabs-item button { color: #a5b4fc !important; }
.dark .fi-tabs-item button:hover { background: rgba(232, 92, 74,0.15) !important; }
.dark .fi-tabs-item-active button,
.dark .fi-tabs-item[aria-selected="true"] button { color: white !important; }

/* ── ALL form field labels ── */
.dark .fi-fo-field-wrp label,
.dark .fi-fo-field-wrp .fi-fo-field-wrp-label,
.dark .fi-fo-field-wrp > div > label,
.dark [class*="fi-fo"] label,
.dark .fi-fo-component-ctn label {
    color: #c7d2fe !important;
}

/* ── Helper text ── */
.dark .fi-fo-field-wrp .fi-fo-field-wrp-helper-text,
.dark .fi-fo-field-wrp p,
.dark .fi-fo-field-wrp .text-sm.text-gray-500,
.dark p.text-sm.text-gray-500,
.dark .text-gray-500 {
    color: #6b7280 !important;
}

/* ── Placeholder / ViewField ── */
.dark .fi-fo-placeholder { color: #a5b4fc !important; }
.dark .fi-fo-placeholder p, .dark .fi-fo-placeholder span,
.dark .fi-fo-placeholder div { color: #c7d2fe !important; }

/* ── All inputs ── */
.dark .fi-input-wrp {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.03) !important;
}
.dark .fi-input,
.dark .fi-input-wrp input,
.dark .fi-input-wrp textarea,
.dark .fi-input-wrp select {
    background: transparent !important;
    color: #f2ede2 !important;
}
.dark .fi-input-wrp input::placeholder,
.dark .fi-input-wrp textarea::placeholder {
    color: #4b5563 !important;
}

/* ── Textarea ── */
.dark textarea, .dark .fi-textarea {
    background: rgba(255,255,255,0.03) !important;
    color: #f2ede2 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── Select / dropdown ── */
.dark .fi-select-wrp {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── Repeater items ── */
.dark .fi-fo-repeater-item {
    border-color: rgba(255,255,255,0.08) !important;
    background: #0e1e38 !important;
}
.dark .fi-fo-repeater-item-header {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.dark .fi-fo-repeater-item-header button { color: #a5b4fc !important; }
.dark .fi-fo-repeater-item-label { color: #f2ede2 !important; }
.dark .fi-fo-repeater-item-content { background: transparent !important; }

/* ── Builder / Tree (Myyntipolut) ── */
.dark .fi-fo-builder-item {
    background: #0e1e38 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.dark .fi-fo-builder-item-header {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.dark .fi-fo-builder-item-header button,
.dark .fi-fo-builder-item-header span,
.dark .fi-fo-builder-item-label {
    color: #f2ede2 !important;
}
.dark .fi-fo-builder-item-content {
    background: transparent !important;
}
.dark .fi-fo-builder-block-picker-option {
    background: #0e1e38 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #c7d2fe !important;
}

/* ── Checkbox group / list ── */
.dark .fi-fo-checkbox-list label,
.dark .fi-fo-checkbox-list span,
.dark .fi-checkbox-list-option-label,
.dark .fi-fo-checkbox label span,
.dark .fi-fo-checkbox-list-option label { color: #c7d2fe !important; }

/* ── Toggle ── */
.dark .fi-fo-toggle label span { color: #c7d2fe !important; }

/* ── File upload ── */
.dark .fi-fo-file-upload .filepond--panel-root { background: #0e1e38 !important; }
.dark .fi-fo-file-upload .filepond--drop-label label { color: #a5b4fc !important; }
.dark .filepond--root { background: transparent !important; }

/* ── RichEditor / Tiptap ── */
.dark .fi-fo-rich-editor .tiptap, .dark .ProseMirror {
    background: rgba(255,255,255,0.03) !important;
    color: #f2ede2 !important;
}
.dark .fi-fo-rich-editor .fi-fo-rich-editor-toolbar {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Stat cards ── */
.dark .fi-wi-stats-overview-stat {
    background: #0e1e38 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── Info list / description items ── */
.dark .fi-in-text, .dark .fi-in-text-item { color: #f2ede2 !important; }

/* ── Action / link buttons ── */
.dark .fi-link { color: #a5b4fc !important; }
.dark .fi-link:hover { color: #c7d2fe !important; }
.dark .fi-ac-btn-action { color: #a5b4fc !important; }

/* ── Table rows ── */
.dark .fi-ta-row:hover { background: rgba(232, 92, 74,0.05) !important; }
.dark .fi-ta-header-cell { color: #a5b4fc !important; }
.dark .fi-ta-cell { color: #c7d2fe !important; }

/* ── Notification ── */
.dark .fi-no-notification {
    background: #0e1e38 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Generic dark text/bg overrides for Tailwind utility classes ── */
.dark .text-gray-700 { color: #c7d2fe !important; }
.dark .text-gray-800 { color: #f2ede2 !important; }
.dark .text-gray-900 { color: #f2ede2 !important; }
.dark .text-gray-600 { color: #9ca3af !important; }
.dark .bg-white { background-color: #0e1e38 !important; }
.dark .bg-gray-50 { background-color: rgba(255,255,255,0.03) !important; }
.dark .bg-gray-100 { background-color: rgba(255,255,255,0.05) !important; }
.dark .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; }
.dark .border-gray-300 { border-color: rgba(255,255,255,0.1) !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.08) !important; }

/* ── Scrollbar dark ── */
.dark ::-webkit-scrollbar-thumb { background: #14304d; }
.dark ::-webkit-scrollbar-thumb:hover { background: #e85c4a; }

/* ══════════════════════════════════════════════════
   LOGIN PAGE — PREMIUM DESIGN
   ══════════════════════════════════════════════════ */

/* Full-page background */
.fi-simple-layout {
    /* KIRJAUTUMISSIVU ON 1:1 /app/login -MALLIN KANSSA, ei paneelin navy.
       Arvot on portattu ayematey-theme.css:234-238:sta sellaisenaan, jotta
       kaksi kirjautumissivua eivat voi eriytya: app-paneeli lataa molemmat
       tyylitiedostot ja tama on niissa sama saanto samalla arvolla.
       PANEELIN SISAPUOLI (kirjautumisen jalkeen) JAA NAVYKSI — kayttajan
       pyynto oli "naettavat navy-, koralli- ja paperipinnat" paneeliin ja
       kremataustainen aaltosivu KIRJAUTUMISEEN. .fi-simple-layout esiintyy
       vain auth-sivuilla, joten rajaus on rakenteellinen eika ehdollinen. */
    background:
        radial-gradient(1000px 560px at 80% -10%, #f2ede2 0%, transparent 60%),
        #faf6ee !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Animated gradient overlay */
.fi-simple-layout::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 20% 50%, rgba(232, 92, 74, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 60% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    animation: loginGlow 15s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes loginGlow {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-3%, 2%) scale(1.05); }
    100% { transform: translate(2%, -2%) scale(1); }
}

/* Decorative floating orbs */
.fi-simple-layout::after {
    content: '';
    position: fixed;
    bottom: 10%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(232, 92, 74, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.05); }
}

/* Login card container */
.fi-simple-main-ctn {
    position: relative;
    z-index: 1;
}

/* Remove Filament's outer white wrapper (.fi-simple-main) */
.fi-simple-main {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    --tw-shadow: 0 0 #0000 !important;
    padding: 0 !important;
}

/* Kirjautumiskortti — PAPERI, ei puhdas valkoinen. Navy-pohjalla puhdas
   valkoinen luki kliiniselta eika brandilta. */
.fi-simple-page {
    background: #faf6ee !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 32px 64px -12px rgba(0, 0, 0, 0.2) !important;
    padding: 48px 40px 40px !important;
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Brand name above the card */
.fi-simple-layout .fi-logo,
.fi-simple-layout [class*="fi-logo"] {
    margin-bottom: 8px !important;
}

.fi-simple-layout .fi-logo *,
.fi-simple-layout [class*="fi-logo"] * {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.5px !important;
}

/* Heading "Sign in" */
.fi-simple-page .fi-simple-page-heading,
.fi-simple-page h2,
.fi-simple-page .text-2xl {
    color: #0e1e38 !important;
    font-weight: 700 !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.3px !important;
    text-align: center !important;
}

/* Subheading */
.fi-simple-page .fi-simple-page-subheading,
.fi-simple-page p {
    color: #6b7280 !important;
}

/* Form labels */
.fi-simple-page label,
.fi-simple-page .fi-fo-field-wrp > label {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px !important;
}

/* Input fields */
.fi-simple-page .fi-input-wrp {
    /* Kentta on kortin sisalla, joten se on hitusen VAALEAMPI kuin kortti —
       nain se lukee upotetuksi eika irralliseksi laatikoksi. Reunus on
       navy-alfaa eika neutraalia harmaata. */
    background: #fffdf8 !important;
    border: 1.5px solid rgba(20,48,77,.20) !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}

.fi-simple-page .fi-input-wrp:focus-within {
    background: #fffdf8 !important;
    border-color: #e85c4a !important;
    box-shadow: 0 0 0 4px rgba(232, 92, 74, 0.12) !important;
}

.fi-simple-page input {
    color: #111827 !important;
    font-size: 0.95rem !important;
}

.fi-simple-page input::placeholder {
    color: #9ca3af !important;
}

/* Password toggle eye icon */
.fi-simple-page .fi-input-wrp button {
    color: #9ca3af !important;
}
.fi-simple-page .fi-input-wrp button:hover {
    color: #4b5563 !important;
}

/* Remember me checkbox */
.fi-simple-page .fi-checkbox-input {
    border-color: #d1d5db !important;
    background: #ffffff !important;
}
.fi-simple-page .fi-checkbox-input:checked {
    background: #e85c4a !important;
    border-color: #e85c4a !important;
}
.fi-simple-page label[for*="remember"],
.fi-simple-page .fi-checkbox-label {
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* Sign in button */
.fi-simple-page .fi-btn-primary,
.fi-simple-page button[type="submit"] {
    background: linear-gradient(135deg, #cf4838 0%, #c2452f 50%, #b33d29 100%) !important;   /* valkoinen teksti >= 4,53:1 koko gradientilla */
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.3px !important;
    box-shadow:
        0 4px 16px rgba(232, 92, 74, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
}
.fi-simple-page .fi-btn-primary:hover,
.fi-simple-page button[type="submit"]:hover {
    background: linear-gradient(135deg, #f08472 0%, #e85c4a 50%, #d94f3d 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 8px 24px rgba(232, 92, 74, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
}
.fi-simple-page .fi-btn-primary:active,
.fi-simple-page button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* Links (forgot password etc.) */
.fi-simple-page a:not(.fi-btn) {
    color: #e85c4a !important;
    transition: color 0.2s ease !important;
}
.fi-simple-page a:not(.fi-btn):hover {
    color: #d94f3d !important;
}

/* Validation errors */
.fi-simple-page .fi-fo-field-wrp-error-message {
    color: #ef4444 !important;
}

/* Copyright footer text */
.fi-simple-layout footer,
.fi-simple-layout .fi-simple-footer {
    color: rgba(255, 255, 255, 0.25) !important;
}

/* ── LOGIN DARK MODE — keep card white for consistent readability ── */
.dark .fi-simple-layout {
    background: linear-gradient(135deg, #050511 0%, #071120 30%, #0e1e38 60%, #0c1222 100%) !important;
}

/* Card stays white even in dark mode — matches app panel login */
.dark .fi-simple-page {
    background: #ffffff !important;
    border: none !important;
}

/* ── LOGIN RESPONSIVE ── */

/* Ensure the main container centers properly */
.fi-simple-main-ctn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    width: 100% !important;
    padding: 16px !important;
    margin: 0 !important;
}

.fi-simple-main {
    margin: 0 auto !important;
    width: 100% !important;
}

@media (max-width: 640px) {
    .fi-simple-page {
        padding: 32px 24px 28px !important;
        border-radius: 20px !important;
        max-width: calc(100% - 32px) !important;
    }
    
    .fi-simple-main-ctn {
        padding: 16px !important;
    }
}
/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE — ADMIN / APP PANELS
   ══════════════════════════════════════════════════ */

/* ── Fix: User profile dropdown hidden behind content ──
   The dropdown must be above ALL other content including
   the main content area. Force overflow visible on parents. */
.fi-dropdown-panel {
    z-index: 9999 !important;
    position: absolute !important;
}
.fi-topbar .fi-dropdown {
    position: relative;
    z-index: 9999;
}
.fi-topbar {
    z-index: 9999 !important;
    /* Sticky → header jää näkyviin scrollatessa ja lasiefekti voimistuu
       (sisältö liukuu lasin läpi). Korkea z-index pitää dropdownit päällä. */
    position: sticky !important;
    top: 0 !important;
}
/* Force the main content below the topbar dropdown */
.fi-main-ctn {
    position: relative;
    z-index: 1;
}
/* Prevent overflow:hidden on topbar from clipping the dropdown */
.fi-topbar,
.fi-topbar nav,
.fi-topbar > div {
    overflow: visible !important;
}
.fi-sidebar-close-overlay {
    top: var(--fi-topbar-height, 4rem) !important;
}

/* ── Google Calendar: prevent overflow globally ── */
.space-y-4 > div {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* ── Desktop: hide mobile-context labels ──
   Table headers provide column context on desktop;
   .fi-leads-label spans are only visible on mobile cards */
@media (min-width: 769px) {
    .fi-leads-label {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   TABLET + MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ══════════════════════════════════════════════════════════════
       CRITICAL FIX: Skip rendering of inactive Filament tab panels.
       Filament renders ALL tabs in the DOM; only CSS hides inactive ones.
       content-visibility: hidden tells the browser to skip layout/paint/
       compositing entirely for hidden panels, saving hundreds of MB RAM.
       This is the #1 fix for iOS Safari crashes on License edit pages.
       ══════════════════════════════════════════════════════════════ */
    [x-show][style*="display: none"],
    .fi-fo-component-ctn > [x-show]:not([style]),
    [x-show].fi-tabs-panel[style*="display: none"] {
        content-visibility: hidden !important;
        contain-intrinsic-size: 0 500px !important;
    }

    /* ── PERFORMANCE: Hide live preview sidebars on mobile ──
       styles-sidebar (248 lines + Alpine + SVG icons) and
       booking-preview (124 lines + calendar grid) are useless
       on phone screens and waste significant DOM budget. */
    [wire\:key*="styles_sidebar"],
    [wire\:key*="booking_preview"] {
        display: none !important;
    }

    /* ── PERFORMANCE: Prevent compositing layer explosion ──
       iOS Safari aggressively creates GPU layers for will-change.
       Force everything back to auto to reduce memory. */
    .fi-fo-field-wrp,
    .fi-input-wrp,
    .fi-fo-repeater-item,
    .fi-section,
    .fi-fo-component-ctn {
        will-change: auto !important;
        contain: layout style !important;
    }

    /* ── PERFORMANCE: Kill backdrop-filter + GPU-heavy effects ──
       Mobile Safari WebView has ~1.5 GB memory limit.
       backdrop-filter: blur() causes GPU memory exhaustion → crash. */
    .fi-topbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255,255,255,0.97) !important;
    }
    .dark .fi-topbar {
        background: rgba(15,14,26,0.97) !important;
    }
    .fi-sidebar .fi-sidebar-item-active a,
    .fi-sidebar .fi-sidebar-item-active button {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ── PERFORMANCE: Reduce transitions + transforms ──
       Every transition = GPU composite layer on mobile. */
    .fi-section,
    .fi-section:hover,
    .fi-btn-primary,
    .fi-btn-primary:hover,
    .fi-wi-stats-overview-stat,
    .fi-wi-stats-overview-stat:hover,
    .fi-fo-repeater-item,
    .fi-fo-repeater-item:hover,
    .fi-input-wrp,
    .fi-sidebar .fi-sidebar-item a,
    .fi-sidebar .fi-sidebar-item button,
    .fi-ta-row {
        transition: none !important;
        transform: none !important;
    }

    /* ── PERFORMANCE: Simplify box-shadows ──
       Multiple layered shadows = extra GPU compositing. */
    .fi-section {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }
    .fi-section:hover {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }
    .fi-btn-primary {
        box-shadow: none !important;
    }
    .fi-tabs {
        box-shadow: none !important;
    }
    .fi-wi-stats-overview-stat {
        box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }

    /* ── PERFORMANCE: Disable login page animations on mobile ── */
    .fi-simple-layout::before,
    .fi-simple-layout::after {
        animation: none !important;
    }

    /* ── TABS: Horizontal scroll strip ── */
    .fi-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        padding: 4px !important;
        scrollbar-width: none !important;
    }
    .fi-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .fi-tabs-item,
    .fi-tabs-item > button {
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        flex-shrink: 0 !important;
    }
    .fi-tabs-item svg,
    .fi-tabs-item .fi-tabs-item-icon {
        width: 14px !important;
        height: 14px !important;
    }

    /* ── SECTIONS: Tight padding for mobile ── */
    .fi-section-content-ctn {
        padding: 8px !important;
    }
    .fi-section-header {
        padding: 8px 10px !important;
    }
    .fi-section {
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── Main content padding — minimal ── */
    .fi-main {
        padding: 4px 14px !important;
    }
    /* Remove any extra padding from form component containers */
    .fi-fo-component-ctn {
        padding: 0 !important;
    }

    /* ── Page heading ── */
    .fi-header-heading {
        font-size: 2.2rem !important;
        font-weight: 900 !important;
    }

    /* ══════════════════════════════════════════════
       TABLE → COMPACT CARD VIEW
       This is the critical section. We must override
       ALL levels of Filament's internal padding.
       ══════════════════════════════════════════════ */

    /* Hide table header row */
    .fi-ta-table thead {
        display: none !important;
    }

    /* Table + tbody: block layout */
    .fi-ta-table {
        display: block !important;
        width: 100% !important;
        border-spacing: 0 !important;
    }
    .fi-ta-table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* ── CONTAINER: no horizontal scroll ── */
    .fi-ta-ctn,
    .fi-ta-content {
        overflow-x: hidden !important;
    }
    /* Remove the table wrapper's own border */
    .fi-ta-content {
        border: none !important;
        border-radius: 0 !important;
    }

    /* ═══ EACH ROW = COMPACT CARD ═══ */
    .fi-ta-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        background: white !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
        padding: 10px 12px !important;
        margin: 6px 0 !important;
        width: 100% !important;
        align-items: start !important;
    }
    .dark .fi-ta-row {
        background: #0e1e38 !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    /* ═══ STRIP ALL FILAMENT CELL PADDING ═══
       This is the KEY fix. Filament nests:
       td > div.fi-ta-col-wrp > div.fi-ta-text > div.fi-ta-text-item
       Each level adds padding. We strip it all. */
    .fi-ta-row td,
    .fi-ta-row .fi-ta-cell {
        display: block !important;
        padding: 2px 4px !important;
        border: none !important;
        background: transparent !important;
        min-height: 0 !important;
        font-size: 0.82rem !important;
    }
    .fi-ta-row .fi-ta-col-wrp {
        padding: 0 !important;
        margin: 0 !important;
    }
    .fi-ta-row .fi-ta-text {
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    .fi-ta-row .fi-ta-text-item {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Also strip padding from icon columns */
    .fi-ta-row .fi-ta-icon-item {
        padding: 0 !important;
    }

    /* ═══ FIRST CELL = CARD TITLE ═══ 
       Spans full width, bolder, with subtle separator.
       Note: td:first-child may be a checkbox; td:nth-child(2) is the name. */
    .fi-ta-row td:first-child,
    .fi-ta-row .fi-ta-cell:first-child {
        grid-column: 1 / -1 !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }
    .fi-ta-row td:nth-child(2),
    .fi-ta-row .fi-ta-cell:nth-child(2) {
        grid-column: 1 / -1 !important;
        font-weight: 700 !important;
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }
    .fi-ta-row td:first-child .fi-ta-text-item,
    .fi-ta-row .fi-ta-cell:first-child .fi-ta-text-item,
    .fi-ta-row td:nth-child(2) .fi-ta-text-item,
    .fi-ta-row .fi-ta-cell:nth-child(2) .fi-ta-text-item {
        font-weight: 700 !important;
        font-size: 1.15rem !important;
        color: #0e1e38 !important;
    }
    .dark .fi-ta-row td:first-child,
    .dark .fi-ta-row .fi-ta-cell:first-child,
    .dark .fi-ta-row td:nth-child(2),
    .dark .fi-ta-row .fi-ta-cell:nth-child(2) {
        border-bottom-color: rgba(255,255,255,0.08) !important;
    }
    .dark .fi-ta-row td:first-child .fi-ta-text-item,
    .dark .fi-ta-row .fi-ta-cell:first-child .fi-ta-text-item,
    .dark .fi-ta-row td:nth-child(2) .fi-ta-text-item,
    .dark .fi-ta-row .fi-ta-cell:nth-child(2) .fi-ta-text-item {
        color: #f2ede2 !important;
    }

    /* ═══ ACTIONS CELL = FULL WIDTH AT BOTTOM ═══ */
    .fi-ta-row .fi-ta-actions-cell,
    .fi-ta-row td:last-child {
        grid-column: 1 / -1 !important;
        padding-top: 8px !important;
        margin-top: 6px !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
    }
    .dark .fi-ta-row .fi-ta-actions-cell,
    .dark .fi-ta-row td:last-child {
        border-top-color: rgba(255,255,255,0.08) !important;
    }
    /* Action buttons: left-aligned, better touch targets */
    .fi-ta-actions {
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    .fi-ta-actions .fi-link,
    .fi-ta-actions .fi-btn {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    /* ═══ ICON COLUMNS — compact, inline ═══ 
       Icons without headers lose context on mobile.
       Keep them small and inline. */
    .fi-ta-row .fi-ta-icon-item {
        width: 18px !important;
        height: 18px !important;
    }
    .fi-ta-row .fi-ta-icon-item-wrp {
        justify-content: flex-start !important;
    }

    /* ═══ CHECKBOX CELL (bulk actions) ═══ */
    .fi-ta-row .fi-ta-record-checkbox {
        grid-column: 1 / -1 !important;
        padding: 0 !important;
    }

    /* ═══ BADGE COLUMNS — inline compact ═══ */
    .fi-ta-row .fi-badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

    /* ═══ Table empty state ═══ */
    .fi-ta-empty-state {
        display: block !important;
    }

    /* ═══ Pagination — compact ═══ */
    .fi-ta-pagination {
        padding: 8px !important;
    }

    /* ── STAT CARDS: single column ── */
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: 1fr !important;
    }

    /* ── FORMS: compact on mobile ── */
    .fi-fo-field-wrp {
        margin-bottom: 6px !important;
    }

    /* ── Google Calendar connect box: stack vertically ── */
    .space-y-4 .flex.items-start.gap-3,
    .space-y-4 .flex.items-center.gap-3 {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .space-y-4 .flex.items-start.gap-3 > .flex-shrink-0,
    .space-y-4 .flex.items-center.gap-3 > .flex-shrink-0 {
        align-self: center !important;
    }
    .space-y-4 .flex.items-start.gap-3 > div:last-child,
    .space-y-4 .flex.items-center.gap-3 > div:last-child {
        align-self: center !important;
    }
    /* Prevent long emails/tokens from overflowing */
    .space-y-4 .text-sm,
    .space-y-4 .text-xs,
    .space-y-4 p {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* ── Repeater items compact ── */
    .fi-fo-repeater-item {
        padding: 6px !important;
    }
    .fi-fo-repeater-item-content {
        padding: 4px !important;
    }

    /* ── Modals full width ── */
    .fi-modal-window {
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    /* ── Page content de-pad ── */
    .fi-page > div {
        padding: 0 !important;
    }

    /* ── Form field containers — less spacing ── */
    .fi-fo-field-wrp > .grid {
        gap: 4px !important;
    }

    /* ── Activity log / event tables inside forms ── */
    .fi-ta-ctn {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── SALES PATHS / REPEATER TREES: allow horizontal scroll ──
       Complex nested structures like Sales Paths are impossible
       to squeeze into phone width. Allow side-scrolling. */
    .fi-fo-repeater {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .fi-fo-repeater-item {
        min-width: 340px !important;
    }
    /* Builder / nested repeaters */
    .fi-fo-builder-block,
    .fi-fo-builder {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .fi-fo-builder-block {
        min-width: 340px !important;
    }
}

/* ═══════════════════════════════════════════════════
   EXTRA SMALL SCREENS (< 480px — typical phones)
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .fi-tabs-item,
    .fi-tabs-item > button {
        font-size: 0.7rem !important;
        padding: 5px 8px !important;
    }
    .fi-ta-row {
        padding: 8px 10px !important;
        border-radius: 10px !important;
        grid-template-columns: 1fr !important; /* single column on very small */
    }
    .fi-ta-row td,
    .fi-ta-row .fi-ta-cell {
        font-size: 0.78rem !important;
    }
    .fi-header-heading {
        font-size: 2.2rem !important;
    }
    .fi-simple-page {
        padding: 24px 18px 22px !important;
    }
    .fi-section-content-ctn {
        padding: 8px !important;
    }
}

/* ── Brändilogo + tenant-vaihtaja (i18n/logo-kierros 2026-06) ── */
/* Tenant-nimi tummalla sivupalkilla luettavaksi (valkoinen) */
.fi-sidebar .fi-tenant-menu-trigger,
.fi-sidebar .fi-tenant-menu-trigger * { color: #ffffff !important; }
/* Login (tumma tausta): valkaise tumma brändilogo */
.fi-simple-layout .fi-logo img,
.fi-simple-layout [class*="fi-logo"] img { filter: brightness(0) invert(1) !important; max-height: 2.5rem !important; width: auto !important; }

/* ═══════════════════════════════════════════════════════════════════
   v3 RESTYLE-KERROS (design handoff 2026-06)
   Pelkkä tyylikerros: typografia, värit, varjot, viimeistely.
   Ei rakenne-/sisältömuutoksia. Token-pohjainen; mäppää .fi-* -luokkiin.
   Tämä lohko on tarkoituksella tiedoston LOPUSSA → voittaa kaskadissa.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fontti + tausta (globaali) ── */
body,
.fi-body,
.fi-simple-layout {
    font-family: var(--font) !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}
.fi-body { background: var(--bg-grad) !important; }

/* ── Typografia ── */
.fi-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}
.fi-section-header-heading { font-weight: 700 !important; letter-spacing: -0.01em !important; }
.fi-wi-stats-overview-stat-value { font-weight: 800 !important; letter-spacing: -0.03em !important; }

/* ── Sidebar: täsmägradientti + RAUHALLINEN aktiivitila ── */
.fi-sidebar {
    background:
        radial-gradient(120% 55% at 100% 0%, rgba(124,92,252,.26) 0%, transparent 55%),
        linear-gradient(192deg, var(--nav-2) 0%, var(--nav-1) 44%, var(--nav-3) 100%) !important;
    border-right: 1px solid rgba(124,92,252,.13) !important;
    box-shadow: none !important;
}
/* poista hover-translate + aktiivinen ulkohehku → vain ohut sivuindikaattori */
.fi-sidebar .fi-sidebar-item a:hover,
.fi-sidebar .fi-sidebar-item button:hover {
    transform: none !important;
    background: rgba(255,255,255,.06) !important;
}
.fi-sidebar .fi-sidebar-item-active a,
.fi-sidebar .fi-sidebar-item-active button {
    background: rgba(255,255,255,.075) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    position: relative !important;
}
.fi-sidebar .fi-sidebar-item-active a::before,
.fi-sidebar .fi-sidebar-item-active button::before {
    content: "";
    /* Kiinni sivupalkin vasemmassa reunassa (ei leijuva): aktiivin a alkaa
       ~28px reunasta (nav-padding 24 + item 4) → -28px vie indikaattorin reunaan. */
    position: absolute; left: -28px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #d94f3d;
}

/* ── Topbar: lasitausta — VAIN .fi-topbar saa lasin; sisempi <nav> pidetään
   läpinäkyvänä (ks. .fi-topbar nav -sääntö ylempänä). Aiemmin nav oli mukana
   tässä → kaksi päällekkäistä 0.74-valkokerrosta peitti lasiefektin. ── */
.fi-topbar {
    /* iOS "liquid glass": kirkas spekulaarinen yläreuna + voimakas vibrancy
       (saturate) + iso blur. Hienovarainen ylä-alas-kiilto syvyyttä varten. */
    background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.03) 100%), linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.20) 100%) !important;
    backdrop-filter: blur(9px) saturate(180%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(9px) saturate(180%) brightness(1.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.60) !important;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.95),
                inset 0 -1px 0 0 rgba(255,255,255,0.40),
                0 6px 22px -12px rgba(30,27,75,0.22) !important;
}
/* Varmistus: sisempi nav läpinäkyväksi myös myöhemmässä lähdejärjestyksessä. */
.fi-topbar > nav,
.fi-topbar nav {
    background: transparent !important;
}

/* ── Kortit / sectionit / taulut / widget-statit ── */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-sm) !important;
}
.fi-section:hover { box-shadow: var(--sh-sm) !important; transform: none !important; }
.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--sh-md) !important;
    transform: translateY(-2px) !important;
}

/* ── Välilehdet: pill + brändigradientti aktiiviselle ── */
.fi-tabs {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--sh-xs) !important;
}
.fi-tabs-item:hover,
.fi-tabs-item > button:hover { background: var(--brand-tint-2) !important; }
.fi-tabs-item[aria-selected="true"],
.fi-tabs-item[aria-selected="true"] > button,
.fi-tabs-item-active,
.fi-tabs-item-active > button,
.fi-tabs-item.fi-active,
.fi-tabs-item.fi-active > button {
    background: linear-gradient(135deg, #cf4838, #b33d29) !important;   /* EI var(--brand): aksenttikoralli on liian vaalea valkoiselle tekstille */
    box-shadow: var(--sh-brand) !important;
}

/* ── Primääripainike: brändigradientti + sh-brand ── */
.fi-btn.fi-color-primary,
.fi-btn-color-primary,
button.fi-btn[type="submit"] {
    background-image: linear-gradient(135deg, #cf4838, #b33d29) !important;   /* sama peruste kuin yllä */
    box-shadow: var(--sh-brand) !important;
    border: 0 !important;
}
.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover,
button.fi-btn[type="submit"]:hover { transform: translateY(-1px) !important; }

/* ── Inputit: radius + fokushalo ── */
.fi-input-wrp {
    border-radius: 11px !important;
    background: var(--card-2) !important;
    border: 1px solid var(--line-2) !important;
    transition: var(--tr) !important;
}
.fi-input-wrp:focus-within {
    border-color: var(--brand) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(232, 92, 74,.12) !important;
}

/* ── Liikkeen kunnioitus ── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 OHJAUSNÄKYMÄ (.db3) — admin dashboard 1:1 demon kanssa
   Scoped .db3-prefiksillä → ei vuoda muihin näkymiin.
   ═══════════════════════════════════════════════════════════════════ */
.db3 { color: var(--ink); font-family: var(--font); }
.db3-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:2px 0 18px; }
.db3-h1 { font-size:27px; font-weight:800; letter-spacing:-0.03em; margin:0; color:var(--ink); }
.db3-sub { font-size:13.5px; color:var(--ink-3); font-weight:500; margin-top:4px; }
.db3-daterange { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--sh-xs); }

.db3-hero { position:relative; overflow:hidden; border-radius:var(--r-xl); padding:17px 28px; margin-bottom:18px; color:#fff; background:linear-gradient(120deg,#0e1e38 0%,#14304d 58%,#1b4066 100%); box-shadow:var(--sh-lg); }
.db3-hero::before { content:""; position:absolute; inset:0; opacity:.05; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.3px); background-size:32px 32px; -webkit-mask:linear-gradient(100deg,#000 14%,transparent 66%); mask:linear-gradient(100deg,#000 14%,transparent 66%); }
.db3-hero-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.db3-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:#e6dfd2; }
.db3-live { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.22); animation:db3pulse 2.4s ease-in-out infinite; }
@keyframes db3pulse { 0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.22)} 50%{box-shadow:0 0 0 6px rgba(74,222,128,.04)} }
.db3-hero-h2 { font-size:21px; font-weight:800; letter-spacing:-0.025em; margin:8px 0 11px; max-width:34ch; color:#fff; }
.db3-snap { display:flex; flex-wrap:wrap; gap:11px; }
.db3-chip { display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:var(--r-pill); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); font-size:13px; font-weight:600; color:#fff; cursor:pointer; transition:var(--tr); }
.db3-chip:hover { background:rgba(255,255,255,.18); }
.db3-chip b { font-weight:800; }
.db3-chip.att { background:rgba(224,138,30,.22); border-color:rgba(245,179,90,.45); color:#ffe5bf; }
.db3-chip.att:hover { background:rgba(224,138,30,.32); }
.db3-health { display:flex; align-items:center; gap:13px; padding:12px 16px 12px 13px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.db3-ring { position:relative; width:58px; height:58px; flex:none; }
.db3-ring-n { position:absolute; inset:0; display:grid; place-items:center; font-size:16px; font-weight:800; color:#fff; }
.db3-ralert { position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:#f5b35a; color:#3a2606; font-size:10px; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 2px #14304d; line-height:1; }
.db3-ht { font-size:11px; color:#f3eee2; font-weight:600; }
.db3-hv { font-size:14px; font-weight:700; color:#fff; margin-top:2px; }

.db3-metrics-cap { display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); margin:0 2px 11px; }
.db3-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1080px){ .db3-metrics{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .db3-metrics{grid-template-columns:1fr} }
.db3-metric { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 17px 15px; box-shadow:var(--sh-sm); transition:var(--tr); display:flex; flex-direction:column; min-height:142px; cursor:pointer; }
.db3-metric:hover { box-shadow:var(--sh-md); transform:translateY(-2px); border-color:var(--line-2); }
.db3-m-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.db3-m-badge { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand); flex:none; }
.db3-m-badge svg { width:16px; height:16px; }
.db3-m-label { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.db3-m-value { font-size:29px; font-weight:800; letter-spacing:-0.03em; line-height:1; color:var(--ink); }
.db3-m-sub { font-size:12px; color:var(--ink-3); margin-top:5px; font-weight:500; }
.db3-m-viz { margin-top:auto; padding-top:11px; position:relative; }
.db3-spark { width:100%; height:26px; display:block; overflow:visible; }
.db3-track { height:7px; border-radius:99px; background:var(--brand-tint); overflow:hidden; }
.db3-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#f08472,#d94f3d); }
.db3-track-lab { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); font-weight:600; margin-top:7px; }
.db3-mbars { display:flex; align-items:flex-end; gap:8px; height:56px; }
.db3-bc { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; height:100%; }
.db3-bv { font-size:9.5px; font-weight:700; color:var(--ink-2); }
.db3-bb { width:100%; max-width:18px; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#f5a596,#d94f3d); }
.db3-bb.pk { background:linear-gradient(180deg,#f5a596,#d94f3d); }
.db3-bl { font-size:9.5px; color:var(--ink-4); font-weight:600; }

.db3-lower { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; margin-top:24px; }
@media (max-width:980px){ .db3-lower{grid-template-columns:1fr} }
.db3-rightcol { display:flex; flex-direction:column; gap:18px; min-width:0; }
.db3-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.db3-panel-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line); }
.db3-pt { font-size:15px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.db3-pmeta { margin-left:auto; font-size:12px; color:var(--ink-3); font-weight:600; }
.db3-sic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand); flex:none; }
.db3-srow { display:flex; align-items:center; gap:13px; padding:11px 20px; border-bottom:1px solid var(--line); transition:var(--tr); }
.db3-srow:last-child { border-bottom:0; }
.db3-actionable { cursor:pointer; }
.db3-actionable:hover { background:var(--card-2); }
.db3-sicn { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--info-t); color:var(--ink-2); flex:none; }
.db3-sicn svg { width:18px; height:18px; }
.db3-stxt { min-width:0; flex:1; }
.db3-sl { font-size:13.5px; font-weight:600; color:var(--ink); }
.db3-sv { font-size:12.5px; color:var(--ink-3); margin-top:2px; font-weight:500; }
.db3-sright { margin-left:auto; display:flex; align-items:center; gap:8px; }
.db3-sgo { color:var(--ink-4); opacity:.4; transition:var(--tr); }
.db3-actionable:hover .db3-sgo { opacity:1; }
.db3-schip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.db3-srow > .db3-schip { margin-left:auto; }
.db3-schip svg { width:13px; height:13px; }
.db3-schip.ok { background:var(--ok-t); color:#0c7a47; }
.db3-schip.warn { background:var(--warn-t); color:#a4640a; }
.db3-schip.crit { background:var(--crit-t); color:#bb2c22; }
.db3-att { display:flex; flex-direction:column; gap:14px; padding:16px; }
.db3-att-glabel { display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.db3-att-glabel .gd { width:7px; height:7px; border-radius:50%; background:currentColor; }
.db3-att-glabel.crit { color:#bb2c22; }
.db3-att-glabel.warn { color:#a4640a; }
.db3-att-item { display:flex; gap:12px; padding:14px; border-radius:13px; border:1px solid var(--line); background:var(--card-2); }
.db3-att-item.crit { border-left:3px solid var(--crit); background:linear-gradient(90deg,var(--crit-t),var(--card-2) 60%); }
.db3-att-item.warn { border-left:3px solid var(--warn); background:linear-gradient(90deg,var(--warn-t),var(--card-2) 60%); }
.db3-att-item .ai { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.db3-att-item.warn .ai { background:var(--warn-t); color:#a4640a; }
.db3-att-item.crit .ai { background:var(--crit-t); color:#bb2c22; }
.db3-att-item .at { font-size:13.5px; font-weight:700; color:var(--ink); }
.db3-att-item .ad { font-size:12.5px; color:var(--ink-3); margin-top:3px; line-height:1.5; }
.db3-att-empty { display:flex; align-items:center; gap:8px; font-size:13px; color:#0c7a47; font-weight:600; }
.db3-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; }
.db3-mini { padding:13px 14px; border-radius:12px; background:var(--brand-tint-2); border:1px solid var(--line); }
.db3-mini .ml { font-size:12px; color:var(--ink-2); font-weight:600; }
.db3-mini .mv { font-size:21px; font-weight:800; letter-spacing:-0.02em; margin-top:4px; color:var(--ink); }
.db3-bk-label { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); padding:14px 16px 4px; border-top:1px solid var(--line); }
.db3-blist { display:flex; flex-direction:column; padding-bottom:6px; }
.db3-brow { display:flex; align-items:center; gap:11px; padding:9px 16px; transition:var(--tr); cursor:pointer; }
.db3-brow:hover { background:var(--card-2); }
.db3-bdot { width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none; }
.db3-bt { font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.db3-bn { font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Diagnostiikkanostojen latausskeleton (Agentin & järjestelmän tila) ── */
.db3-diag-skel .db3-sl,
.db3-diag-skel .db3-sv,
.db3-diag-skel .db3-sicn,
.db3-skelchip {
    background: linear-gradient(90deg, rgba(232, 92, 74,.07) 25%, rgba(232, 92, 74,.15) 37%, rgba(232, 92, 74,.07) 63%);
    background-size: 400% 100%;
    border-radius: 7px;
    animation: db3-shimmer 1.3s ease-in-out infinite;
    color: transparent !important;
}
.db3-diag-skel .db3-sl { width: 130px; height: 13px; }
.db3-diag-skel .db3-sv { width: 190px; height: 10px; margin-top: 5px; }
.db3-skelchip { width: 34px; height: 22px; border-radius: 99px; display: inline-block; }
@keyframes db3-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Paneelin väliotsikot (Agentin signaalit / Järjestelmä & integraatiot) ── */
.db3-subhead {
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: #8a9cad; margin: 8px 0 0; padding: 13px 20px 5px;
    border-top: 1px solid rgba(30,27,75,0.06);
}
.db3-panel-head + .db3-subhead { border-top: none; padding-top: 8px; margin-top: 0; }

/* ── Dashboard-sivun natiivi Filament-otsikko piiloon (molemmat paneelit) ──
   db3-head (.db3-h1) tuottaa otsikon → ei tuplaa. Scope .fi-dashboard-page
   varmistaa ettei muiden sivujen otsikot katoa. */
.fi-dashboard-page .fi-header {
    display: none !important;
}

/* ── Keskustelumodaalin teksti maalattavaksi ──
   session-detail.blade asettaa user-select:text, mutta varmistetaan että mikään
   Filament-modaalin parent ei estä tekstin valintaa (admin Keskustelut-välilehti). */
.fi-modal-window,
.fi-modal-window * {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Spinner deep-link-latausindikaattorille (Ohjausnäkymä → keskustelulinkki). */
@keyframes db3-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — db3-ohjausnäkymän KOVAKOODATUT sävyt + jäännöskorjaukset
   (Token-lohko ylhäällä hoitaa kaiken var()-pohjaisen; nämä ovat ne
   kohdat jotka käyttävät kiinteää väriä eivätkä tokenia.)
   ═══════════════════════════════════════════════════════════════════ */
/* Semanttiset chip-/label-tekstit (tinttitausta tulee tokenista) */
.dark .db3-schip.ok       { color: #86efac; }
.dark .db3-schip.warn     { color: #fbbf24; }
.dark .db3-schip.crit     { color: #fca5a5; }
.dark .db3-att-glabel.ok  { color: #86efac; }
.dark .db3-att-glabel.warn{ color: #fbbf24; }
.dark .db3-att-glabel.crit{ color: #fca5a5; }
.dark .db3-att-item.warn .ai { color: #fbbf24; }
.dark .db3-att-item.crit .ai { color: #fca5a5; }
.dark .db3-att-empty      { color: #86efac; }
.dark .db3-subhead        { color: #8a9cad; border-top-color: rgba(255,255,255,.08); }
/* db3-sic warn-ikonin inline color:#a4640a → !important voittaa inlinen */
.dark .db3-sic[style*="--warn-t"] { color: #fbbf24 !important; }

/* Input-fokus: v3-kerros pakottaa background:#fff focus-within → dark modessa
   fokusoitu kenttä muuttui VALKOISEKSI. Tumma vastine. */
.dark .fi-input-wrp:focus-within { background: #14304d !important; }
.dark .fi-simple-page .fi-input-wrp:focus-within { background: #14304d !important; }


/* ── KIRJAUTUMISSIVUN KORALLIMERI (portattu ayematey-theme.css:128-136) ────
   ayematey-login-sea.js luo .am-login-sea -hostin body-tasolle ja piirtaa
   siihen aallot. Nama saannot ovat inertteja jos skriptia ei ole, joten
   mikaan ei hajoa jos hook poistetaan. z-index 0 ja .fi-simple-page
   z-index 1 pitavat kortin aaltojen paalla. */
.am-login-sea {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 100vh; height: 100dvh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.am-login-sea .hero-sea__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fi-simple-layout .fi-simple-page { position: relative !important; z-index: 1 !important; }

/* Kortti: valkoinen pyoristetty pehmealla varjolla, kuten /app/login. Tama
   kumoaa taman tiedoston aiemman paperikortin VAIN auth-sivuilla — paneelin
   sisapuolen kortit jaavat paperiksi. */
.fi-simple-layout .fi-simple-page {
    background: #ffffff !important;
    box-shadow: 0 18px 48px rgba(20,48,77,.16), 0 2px 8px rgba(20,48,77,.06) !important;
}

/* FILAMENTIN OMA KESKITETTY LOGO POIS AUTH-SIVUILTA. Portattu
   ayematey-theme.css:124. SIMPLE_PAGE_START -koukku renderoi logon kortin
   vasempaan reunaan kielivalitsimen viereen, ja Filament renderoi OMAN
   keskitetyn logonsa .fi-simple-headeriin — ilman tata rivia logo nakyy
   KAHDESTI (mitattu: curl /admin/login antoi 2 osumaa
   ayematey-logo-navy.svg:hin).

   display:none eika visibility, koska keskitetty logo varaisi silloin
   pystytilaa kortin ylalaidasta ja oma logorivi asettuisi tyhjan aukon alle. */
.fi-simple-header .fi-logo { display: none !important; }