/* ═══════════════════════════════════════════════════════════════════
   AYE MATEY -TEEMA — asiakaspaneelin (/app) ilme
   ───────────────────────────────────────────────────────────────────
   PORTATTU Don & Brancon middlewaresta (public/css/ayematey-theme.css)
   2026-08-17. Tokenit ja säännöt ovat 1:1 lähteen kanssa; ainoa muutos
   on fonttien latausreitti, ks. alla.

   LATAUSJÄRJESTYS ON PAKOLLINEN: tämä tiedosto EI ole itsenäinen teema
   vaan admin-theme.css:n PÄÄLLE tuleva token- ja skinikerros. Mitattu
   porttauksen yhteydessä: tiedosto määrittelee 47 muuttujaa mutta
   käyttää itse vain 12:ta — 19:llä on ainoa kuluttaja admin-theme.css:ssä
   (--card, --line, --sh-*, --warn, --crit, --tr …). Jos tämä ladataan
   yksin, kortit, viivat, varjot ja semanttiset värit jäävät INERTEIKSI
   ja paneeli näyttää puoliksi tyylitellyltä. FilamentAppPanelProvider
   lataa molemmat, tässä järjestyksessä.

   D&B:ssä latausta portittaa PanelThemeService::ayeMateyActive()
   (globaalikytkin + lisenssiluokka), koska siellä sama paneeli palvelee
   sekä agentuuri- että itsepalveluasiakkaita. Täällä ei ole mitään
   portitettavaa: tämä ON Aye Matey, joten teema on ehdoton eikä
   resolveria portattu — se olisi kuollutta koodia.

   Tokenit 1:1 Aye Matey -sivustolta (sea-chart daylight + night-watch):
   cream #faf6ee · paper #fffdf8 · navy #14304d · coral #e85c4a ·
   night #0f2740/#16334f/#f3eee2 · Fraunces Supersoft (display) + Work Sans (body).
   ═══════════════════════════════════════════════════════════════════ */

/* FONTIT: lähteessä tässä oli @import fonts.googleapis.comista. Se on
   POISTETTU, koska se ei toimisi täällä eikä sen kuuluisi toimia:
   /app-polun CSP on `style-src 'self' 'unsafe-inline'; font-src 'self'`
   (deploy/nginx/http-shared.conf), joten selain estäisi sekä
   tyylitiedoston että fonttitavut. Sama syy miksi paneeli isännöi
   Interin itse eikä käytä Filamentin BunnyFontProvideria — kolmannen
   osapuolen ajonaikainen haku on tässä tuotteessa tietoinen ei.

   RATKAISTU 2026-08-18: Fraunces ja Work Sans ovat nyt itse isännöityjä
   (public/fonts/, neljä woff2-tiedostoa) ja julistettu public/css/fonts.css:ssä
   nimillä 'Fraunces' ja 'Work Sans', jotta alla olevaa fonttipinoa ei tarvinnut
   muuttaa lainkaan. Provenienssi ja tiivisteet: fonts.css. Kirjaintyyppi
   vastaa nyt D&B:tä ilman yhtään ulkoista hakua. */

/* ── DESIGN-TOKENIT: sama muuttujapinta kuin admin-theme.css → kaikki
      token-pohjainen (v3-kerros, kortit, inputit) vaihtuu kerralla. ── */
:root {
    /* Work Sans on nyt itse isännöity (ks. fonts.css), joten tämä pino
       resolvoituu ensimmäiseen nimeen kuten D&B:ssä. 'Inter' jää toiseksi
       vaihtoehdoksi tarkoituksella: se on myös itse isännöity, joten jos
       Work Sansin tavut joskus puuttuvat julkaisusta, leipäteksti putoaa
       Interiin eikä järjestelmäfonttiin (San Francisco / Segoe). */
    --font: 'Work Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* pinnat — sea-chart daylight */
    --bg: #faf6ee;
    --bg-grad: radial-gradient(1100px 640px at 100% -8%, #f2ede2 0%, transparent 56%), #faf6ee;
    --card: #fffdf8;
    --card-2: #f7f2e7;
    --line: rgba(20, 48, 77, .09);
    --line-2: rgba(20, 48, 77, .16);

    /* muste — navy */
    --ink: #14304d;
    --ink-2: #31506d;
    --ink-3: #4d6a84;
    --ink-4: #647a90;

    /* brändi — coral-aksentti (CTA:t, aktiivitilat) */
    --brand: #e85c4a;
    --brand-600: #d24e3d;
    --brand-700: #b8422f;
    --brand-tint: rgba(232, 92, 74, .12);
    --brand-tint-2: rgba(232, 92, 74, .07);

    /* semanttiset — sivuston sävyt */
    --ok: #1e9e6a;   --ok-t: rgba(30, 158, 106, .12);
    --warn: #c07b1f; --warn-t: rgba(192, 123, 31, .12);
    --crit: #c2452f; --crit-t: rgba(194, 69, 47, .12);
    --info: #4d6a84; --info-t: rgba(20, 48, 77, .07);

    /* sivupalkki — night-watch navy */
    --nav-1: #12293f;
    --nav-2: #16334f;
    --nav-3: #0b192e;
    --nav-ink: #f3eee2;
    --nav-ink-2: rgba(243, 238, 226, .62);

    /* varjot — navy-sävyiset, pehmeät */
    --sh-xs: 0 1px 2px rgba(20, 48, 77, .05);
    --sh-sm: 0 1px 2px rgba(20, 48, 77, .06), 0 1px 2px rgba(20, 48, 77, .04);
    --sh-md: 0 2px 5px -2px rgba(20, 48, 77, .08), 0 8px 20px -10px rgba(20, 48, 77, .12);
    --sh-lg: 0 14px 34px -14px rgba(20, 48, 77, .26), 0 4px 10px -4px rgba(20, 48, 77, .09);
    --sh-brand: 0 9px 22px -10px rgba(232, 92, 74, .55);

    /* liike — sivuston ease-out */
    --tr: 170ms cubic-bezier(.22, 1, .36, 1);

    /* aallonmurtaja (sivuston wave-koriste) */
    --am-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='12' viewBox='0 0 1200 12'%3E%3Cpath d='M0 8 H540 C556 8 562 3 576 3 C590 3 596 8 612 8 H1200' fill='none' stroke='rgba(20,48,77,.35)' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Filamentin primary-paletti (togglet, linkit, fokusrenkaat) → coral. */
:root, .fi-body {
    --primary-50: 253 241 239;
    --primary-100: 251 224 220;
    --primary-200: 246 195 187;
    --primary-300: 240 160 148;
    --primary-400: 236 127 110;
    --primary-500: 232 92 74;
    --primary-600: 210 78 61;
    --primary-700: 184 66 47;
    --primary-800: 147 53 31;
    --primary-900: 116 42 25;
    --primary-950: 78 27 16;
}

/* ── PERUSTA ── */
body, .fi-body, .fi-simple-layout {
    font-family: var(--font) !important;
    letter-spacing: -0.005em;
}
.fi-body { background: var(--bg-grad) !important; }

/* Oletuslogo (keskitetty otsikon yllä) pois — logo renderöidään ylimmälle
   riville kielivalitsimen kanssa (SIMPLE_PAGE_START-hook), vasempaan reunaan. */
.fi-simple-header .fi-logo { display: none !important; }

/* ── Animoitu korallimeri (sama moottori kuin etusivun hero-sea) login-taustalle.
   Host on fixed viewportin alalaidassa; aallot piirtää ayematey-login-sea.js. ── */
.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; }
.hero-buoy {
    position: absolute; left: 0; top: 0; width: 34px; opacity: 0; pointer-events: none;
    z-index: -1; transform-origin: 50% 100%; transform: translate(-50%, -100%);
    will-change: transform, opacity;
}
.hero-buoy svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .hero-buoy { display: none; } }
.sea-fish .fish-body { fill: #14304d; stroke: #faf6ee; stroke-width: 90; paint-order: stroke; }
.sea-fish .fish-eye { fill: #faf6ee; }
.sea-fish .fish-pupil { fill: #14304d; }
/* Kortti aaltojen päälle (host z-index:0). */
.fi-simple-page { position: relative !important; z-index: 1 !important; }

/* Otsikot Frauncesilla — sivuston display-ääni.
 *
 * .fi-simple-header-heading ON LISÄTTY PORTTAUKSESSA. Lähteen selektorilista
 * (.fi-simple-page .fi-simple-page-heading, .fi-simple-page h2) EI osu tämän
 * Filamentin kirjautumissivun otsikkoon: mitattu tuotannon HTML:stä
 * 2026-08-18, luokka on `fi-simple-header-heading`. Ilman tätä riviä
 * kirjautumisen otsikko piirtyi leipätekstifontilla — teema latautui oikein,
 * mutta sivun näkyvin sana oli väärällä kirjaintyypillä.
 *
 * font-variation-settings kiinnittää Frauncesin SOFT- ja WONK-akselit samoihin
 * arvoihin jotka D&B pyysi Googlelta URL:ssa (SOFT=100, WONK=0). Itse
 * isännöity full-tiedosto sisältää akselit oletusarvoillaan (SOFT=0), joten
 * ilman tätä kirjaimet olisivat kovempia kuin D&B:ssä. opsz jää selaimelle
 * (font-optical-sizing: auto on oletus). Ks. public/css/fonts.css. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading,
.fi-simple-page .fi-simple-page-heading,
.fi-simple-page h2,
.fi-logo {
    font-family: 'Fraunces', Georgia, serif !important;
    font-variation-settings: "SOFT" 100, "WONK" 0 !important;
    letter-spacing: -0.02em !important;
}
.fi-header-heading { font-weight: 700 !important; color: var(--ink) !important; }

/* ── SIVUPALKKI: night-watch navy + coral-indikaattori ── */
.fi-sidebar {
    background:
        radial-gradient(120% 55% at 100% 0%, rgba(232, 92, 74, .14) 0%, transparent 55%),
        linear-gradient(192deg, var(--nav-2) 0%, var(--nav-1) 44%, var(--nav-3) 100%) !important;
    border-right: 1px solid rgba(232, 92, 74, .12) !important;
}
.fi-sidebar .fi-sidebar-item-active a::before,
.fi-sidebar .fi-sidebar-item-active button::before {
    background: #e85c4a !important;
}
.fi-sidebar .fi-logo { color: var(--nav-ink) !important; font-size: 1.25rem !important; font-weight: 700 !important; }

/* ── TOPBAR: cream-lasi ── */
.fi-topbar {
    background: linear-gradient(180deg, rgba(250, 246, 238, .55) 0%, rgba(250, 246, 238, .18) 55%, rgba(250, 246, 238, .06) 100%),
                linear-gradient(180deg, rgba(255, 253, 248, .40) 0%, rgba(255, 253, 248, .28) 100%) !important;
    border-bottom: 1px solid rgba(20, 48, 77, .10) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 253, 248, .95), 0 6px 22px -12px rgba(20, 48, 77, .16) !important;
}

/* ── VÄLILEHDET & PAINIKKEET: coral CTA ── */
.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, var(--brand), var(--brand-700)) !important;
    box-shadow: var(--sh-brand) !important;
}
.fi-btn.fi-color-primary,
.fi-btn-color-primary,
button.fi-btn[type="submit"],
.fi-btn-primary {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-700)) !important;
    box-shadow: var(--sh-brand) !important;
    border: 0 !important;
}
.fi-input-wrp:focus-within {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px rgba(232, 92, 74, .14) !important;
}
.fi-ta-row:hover { background: #f7f2e7 !important; }
.fi-section-header { background: linear-gradient(135deg, #fffdf8 0%, #f7f2e7 100%) !important; border-bottom-color: rgba(20, 48, 77, .08) !important; }
.fi-section-header-heading { color: var(--ink) !important; }
.fi-section-header-description { color: var(--ink-3) !important; }
::-webkit-scrollbar-thumb { background: rgba(20, 48, 77, .28) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--brand) !important; }

/* Velhon/paneelin omat inline-napit ja bannerit (indigo → coral/navy). */
[style*="background:#5b53e8"] { background: #e85c4a !important; }
[style*="background:#eeedfc"] { background: rgba(232, 92, 74, .10) !important; border-color: #e85c4a !important; color: #14304d !important; }
[style*="color:#4035bd"] { color: #b8422f !important; }
[style*="border:1px solid #5b53e8"] { border-color: #e85c4a !important; }

/* ── KIRJAUTUMINEN & REKISTERÖINTI: sea-chart daylight ── */
.fi-simple-layout {
    background:
        radial-gradient(1000px 560px at 80% -10%, #f2ede2 0%, transparent 60%),
        #faf6ee !important;
    overflow-x: hidden !important;
}
.fi-simple-layout::before,
.fi-simple-layout::after { display: none !important; }
.fi-simple-main-ctn { position: relative; }
.fi-simple-main-ctn::after {
    content: '';
    position: fixed; left: 0; right: 0; bottom: 28px; height: 12px;
    background: var(--am-wave) repeat-x center / 1200px 12px;
    opacity: .5; pointer-events: none;
}
.fi-simple-layout .fi-logo,
.fi-simple-layout [class*="fi-logo"] * {
    color: var(--ink) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 700 !important;
}
.fi-simple-layout .fi-logo img { filter: none !important; }
.fi-simple-page {
    background: #fffdf8 !important;
    border: 1px solid rgba(20, 48, 77, .10) !important;
    box-shadow: 0 8px 32px rgba(20, 48, 77, .10), 0 32px 64px -12px rgba(20, 48, 77, .14) !important;
}
/* Kortti pysyy vaaleana myös dark modessa (admin-teeman tapaan) →
   otsikon väri kiinteä navy, EI var(--ink) joka vaalenee darkissa. */
.fi-simple-page .fi-simple-page-heading,
.fi-simple-page h2,
.fi-simple-page .text-2xl { color: #14304d !important; }
.fi-simple-page .fi-btn-primary,
.fi-simple-page button[type="submit"] {
    background: linear-gradient(135deg, #e85c4a 0%, #d24e3d 55%, #b8422f 100%) !important;
    box-shadow: 0 4px 16px rgba(232, 92, 74, .42) !important;
}
.fi-simple-page .fi-btn-primary:hover,
.fi-simple-page button[type="submit"]:hover {
    background: linear-gradient(135deg, #ec7f6e 0%, #e85c4a 55%, #d24e3d 100%) !important;
}
.fi-simple-page a:not(.fi-btn) { color: var(--brand-700) !important; }
.fi-simple-page .fi-input-wrp:focus-within {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px rgba(232, 92, 74, .14) !important;
}
.fi-simple-page .fi-checkbox-input:checked { background: var(--brand) !important; border-color: var(--brand) !important; }
.fi-simple-layout footer, .fi-simple-layout .fi-simple-footer { color: rgba(20, 48, 77, .35) !important; }

/* ── ONBOARDING-VELHON SKINI: Fraunces-askeleet, coral-aktiivi, perämies ── */
.fi-fo-wizard { position: relative; }
.fi-fo-wizard::after {
    content: '';
    position: absolute; top: -86px; right: 4px; width: 76px; height: 76px;
    background: url('/images/ayematey-avatar.svg') center / contain no-repeat;
    pointer-events: none;
}
@media (max-width: 768px) { .fi-fo-wizard::after { display: none; } }
.fi-fo-wizard-header-step-label { font-family: 'Fraunces', Georgia, serif !important; }

/* ── DASHBOARD-AKSENTIT (db3 — jos käytössä app-puolella) ── */
.db3-hero { background: linear-gradient(120deg, #0b192e 0%, #12283f 58%, #16334f 100%) !important; }
.db3-track i { background: linear-gradient(90deg, #ec7f6e, #d24e3d) !important; }
.db3-bb { background: linear-gradient(180deg, #ec7f6e, #d24e3d) !important; }
.db3-bb.pk { background: linear-gradient(180deg, #f0a094, #e85c4a) !important; }
.db-chat-user { background: linear-gradient(135deg, #e85c4a, #b8422f) !important; }

/* ── NIGHT-WATCH (dark mode) ── */
.dark {
    --bg: #0b192e;
    --bg-grad: radial-gradient(1100px 640px at 100% -8%, #12283f 0%, transparent 56%), #0b192e;
    --card: #0f2740;
    --card-2: #16334f;
    --line: rgba(243, 238, 226, .08);
    --line-2: rgba(243, 238, 226, .14);
    --ink: #f3eee2;
    --ink-2: rgba(243, 238, 226, .82);
    --ink-3: rgba(243, 238, 226, .62);
    --ink-4: rgba(243, 238, 226, .42);
    --brand: #f07b63;
    --brand-600: #e85c4a;
    --brand-700: #d24e3d;
    --brand-tint: rgba(240, 123, 99, .16);
    --brand-tint-2: rgba(240, 123, 99, .08);
    --info-t: rgba(243, 238, 226, .06);
    --sh-brand: 0 9px 22px -10px rgba(240, 123, 99, .5);
}
.dark .fi-body { background: var(--bg-grad) !important; }
.dark .fi-sidebar {
    background:
        radial-gradient(120% 55% at 100% 0%, rgba(232, 92, 74, .12) 0%, transparent 55%),
        linear-gradient(195deg, #12283f 0%, #0b192e 55%, #08142440 100%) !important;
}
/* ── db3-lohkojen KOVAKOODATUT VAALEAT PINNAT tummassa tilassa ──
   MITATTU VIKA: .db3-daterange ("Aktiviteetti 5 pv" -pilleri) on
   admin-theme.css:1588 muodossa `background:#fff` KOVAKOODATTUNA, ja sen
   teksti on `color:var(--ink-2)`. Tummassa tilassa --ink-2 on kremanvalkoinen,
   joten pilleri oli VALKOISTA TEKSTIA VALKOISELLA POHJALLA — luettavissa vain
   maalaamalla. admin-theme.css on tavu tavulta sama tiedosto kuin D&B:lla,
   joten korjaus kuuluu tahan teemakerrokseen eika sinne.
   Sama ongelma koskee jokaista db3-saantoa joka kovakoodaa vaalean pinnan;
   tassa ne kaikki yhdessa, jotta seuraava ei jaa huomaamatta. */
.dark .db3-daterange {
    background: var(--card) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-2) !important;
}
.dark .db3-daterange svg { color: var(--brand) !important; }

/* ── KYTKIMET: kontrasti tummaa navya vasten ──
   Filamentin kytkimen POIS-tila on gray-200, joka tummalla navylla katoaa
   taustaan lahes kokonaan — "Rekursiivinen crawl" nayttti silta ettei siina ole
   kytkinta lainkaan. Nyt pois-tila on nakyva krema-alfa ja paalla-tila
   brandikoralli, eli tila on luettavissa myos ilman varinakoa (kahva liikkuu). */
.dark .fi-toggle:not(:checked),
.dark button[role="switch"][aria-checked="false"] {
    background-color: rgba(243, 238, 226, .22) !important;
    box-shadow: inset 0 0 0 1px rgba(243, 238, 226, .28) !important;
}
.dark .fi-toggle:checked,
.dark button[role="switch"][aria-checked="true"] {
    background-color: var(--brand) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 123, 99, .55) !important;
}
/* NUPPI ON SUORA LAPSI, JA VAIN SE. Tama oli aluksi jalkelaisvalitsin
   (button[role="switch"] span), ja se oli mitattu virhe: Filamentin nupin
   SISALLA on kaksi <span class="absolute inset-0"> -ikonisailiota (off/on),
   joilla EI ole pyoristysta. Jalkelaisvalitsin maalasi nekin, joten nupin
   paalle piirtyi kaksi peittavaa NELIOTA jotka tayttivat sen laatikon ja
   nayttivat pursuavan pillerin pyoreiden paiden yli.

   Pyoristys kirjoitetaan tassa auki vaikka Filamentin oma rounded-full on
   nupissa: !important-taustavari ei kumoa pyoristysta, mutta ikonisailioiden
   kumoaminen alla poistaa syyn ja tama tekee lopputuloksesta riippumattoman
   siita jos Filament joskus vaihtaa luokkansa.

   KOKOA JA SISENNYSTA EI MUUTETA. Painike on h-6 (24px) + border-2, eli
   sisamitta on 20px, ja nuppi on h-5 w-5 = tasmalleen 20px. Geometria oli
   siis oikein koko ajan — vain varitys oli vaarassa elementissa. Koon
   saataminen olisi rikkonut liu'un matkan (translate-x-5). */
.dark button[role="switch"] > span {
    background-color: #fffdf8 !important;
    border-radius: 9999px !important;
}
.dark button[role="switch"] > span > span {
    background-color: transparent !important;
}

.dark .fi-topbar {
    background: rgba(11, 25, 46, .88) !important;
    border-bottom-color: rgba(243, 238, 226, .08) !important;
}
/* ── KORTIT: UMPINAINEN PINTA, EI LAPINAKYVA ──
   Lapinakyva kremapinta (rgba(243,238,226,.07)) kokeiltiin ja PALAUTETTIIN:
   kun kortti saa savynsa siita mika sen alla on, sen kontrasti alustaan on
   sita pienempi mita vaaleampi alusta on — eli juuri sivupalkin gradientin ja
   topbarin kohdalla kortin reuna katosi. Umpinainen savy on ennustettava:
   kortti on AINA sama, ja sen ero taustaan on vakio.

   Savyjen porras on merkitseva ja se on testattu (PanelVisualContractTest):
     sivun tausta  #0b192e   (tummin)
     bg-gray-50    #0e1e38   (syvennys kortin sisalla)
     kortti        #0f2740   (vaalein -> nousee esiin)
   Jarjestys ei ole makuasia: jos jokin naista menee toisen ohi, kortti
   lakkaa erottumasta eika mikaan virhe kerro siita. */
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-wi-stats-overview-stat { background: #0f2740 !important; border-color: rgba(243, 238, 226, .08) !important; }
.dark .fi-section-header { background: linear-gradient(135deg, #10263c 0%, #16334f 100%) !important; }
.dark .fi-section-header-heading, .dark .fi-header-heading { color: #f3eee2 !important; }
.dark .fi-tabs { background: #0f2740 !important; }
.dark .fi-input-wrp { background: rgba(243, 238, 226, .04) !important; border-color: rgba(243, 238, 226, .12) !important; }
.dark .fi-input-wrp:focus-within { background: #16334f !important; border-color: var(--brand) !important; }
.dark .fi-ta-row:hover { background: rgba(240, 123, 99, .06) !important; }
.dark .fi-simple-layout { background: linear-gradient(135deg, #0b192e 0%, #12283f 45%, #16334f 100%) !important; }
.dark ::-webkit-scrollbar-thumb { background: #31506d !important; }
.dark ::-webkit-scrollbar-thumb:hover { background: var(--brand) !important; }

/* Kokeilu-/pause-bannerit (CONTENT_START, AppPanelProvider): vaalea inline-bg jäi
   yönäkymässä lukukelvottomaksi (tumma teksti ~näkymätön) → tumma navy + cream. */
.dark .am-notice { color: #f3eee2 !important; }
.dark .am-notice--trial { background: #16334f !important; border-color: var(--brand) !important; }
.dark .am-notice--pause { background: #33260f !important; border-color: #e0a24a !important; }
.dark .am-notice a { color: #ffd7c9 !important; }

/* ── KATSELMOINTIKORJAUKSET (V4-review) ─────────────────────────────── */

/* Topbar EI saa palata D&B:n valkolasiksi scrollatessa: admin-teeman
   .fi-topbar.db-scrolled (0,2,0 + !important) voitti pelkän .fi-topbarin.
   Sama spesifisyys + myöhempi lataus → cream-lasi voittaa. */
.fi-topbar.db-scrolled {
    background: linear-gradient(180deg, rgba(250, 246, 238, .62) 0%, rgba(250, 246, 238, .22) 55%, rgba(250, 246, 238, .08) 100%),
                linear-gradient(180deg, rgba(255, 253, 248, .50) 0%, rgba(255, 253, 248, .38) 100%) !important;
    border-bottom-color: rgba(20, 48, 77, .12) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 253, 248, .98), 0 14px 34px -14px rgba(20, 48, 77, .22) !important;
}
.dark .fi-topbar.db-scrolled {
    background: rgba(10, 26, 43, .92) !important;
    border-bottom-color: rgba(243, 238, 226, .10) !important;
}

/* Night-watch EI saa jäädä hybridiksi: admin-teeman kovakoodatut indigo-
   .dark-säännöt (#1a1830-pinnat, #c7d2fe/#a5b4fc-tekstit) ylikirjoitetaan
   night-watch-sävyihin. */
.dark .fi-fo-repeater-item,
.dark .fi-fo-builder-item,
.dark .fi-fo-builder-block-picker-option,
.dark .fi-no-notification,
.dark .fi-fo-file-upload .filepond--panel-root {
    background: #0f2740 !important;
    border-color: rgba(243, 238, 226, .08) !important;
}
.dark .fi-fo-repeater-item-header,
.dark .fi-fo-builder-item-header {
    background: rgba(243, 238, 226, .04) !important;
    border-color: rgba(243, 238, 226, .06) !important;
}
.dark .bg-white { background-color: #0f2740 !important; }
/* Filamentin bg-gray-50 -pinnat (taulukon otsake- ja summarivit, osioiden
   alapalkit, tiedostolataajan paneeli) olivat 3 %:n kremalla kaytannossa
   nakymattomia: ne sulautuivat kortin omaan pintaan eika mikaan kertonut
   missa taulukko loppuu.

   #0e1e38 on PYKALA vaaleampi kuin sivun tausta #0b192e ja pykala tummempi
   kuin kortti #0f2740. Nain se lukeutuu syvennykseksi kortin sisalla eika
   kilpaile kortin kanssa: kortti on kolmikon vaalein pinta ja siksi se nousee
   taustasta esiin.

   Hover-tilat EIVAT osu tahan sääntöön: Tailwind kaantaa hover:bg-gray-50:n
   valitsimeksi .hover\:bg-gray-50:hover, ja Filamentin 48 bg-gray-50
   -esiintymasta valtaosa on juuri hover/focus-muotoja joilla on jo oma
   dark:bg-white/5 -vastine. Tama koskee siis vain STAATTISIA pintoja. */
.dark .bg-gray-50 { background-color: #0e1e38 !important; }

/* Tekstihierarkia: indigo-laventeli → kermanvaalea */
.dark .fi-fo-repeater-item-label,
.dark .fi-fo-builder-item-label,
.dark .fi-fo-builder-item-header button,
.dark .fi-fo-builder-item-header span,
.dark .fi-input, .dark .fi-input-wrp input,
.dark .fi-input-wrp textarea, .dark .fi-input-wrp select,
.dark textarea, .dark .fi-textarea,
.dark .fi-in-text, .dark .fi-in-text-item,
.dark .text-gray-800, .dark .text-gray-900 {
    color: #f3eee2 !important;
}
.dark .fi-fo-field-wrp label,
.dark [class*="fi-fo"] label,
.dark .fi-fo-component-ctn label,
.dark .fi-fo-checkbox-list label, .dark .fi-fo-checkbox-list span,
.dark .fi-fo-toggle label span,
.dark .fi-fo-placeholder, .dark .fi-fo-placeholder p, .dark .fi-fo-placeholder div,
.dark .fi-section-content-ctn,
.dark .fi-ta-cell,
.dark .text-gray-700 {
    color: rgba(243, 238, 226, .82) !important;
}
.dark .fi-header-subheading,
.dark .fi-breadcrumbs li a, .dark .fi-breadcrumbs li span,
.dark .fi-section-header-description,
.dark .fi-ta-header-cell,
.dark .fi-tabs-item button,
.dark .fi-fo-file-upload .filepond--drop-label label {
    color: rgba(243, 238, 226, .62) !important;
}
.dark .fi-link, .dark .fi-ac-btn-action { color: #f07b63 !important; }
.dark .fi-link:hover { color: #f0a094 !important; }