/* ══════════════════════════════════════════════════════════════════════════ KIRJAUTUMISSIVUN KONTRASTIKERROS — /admin/login JA /app/login ══════════════════════════════════════════════════════════════════════════ MIKÄ VIKA TÄMÄ TIEDOSTO ON. Kumpikaan paneeli ei kutsu ->darkMode(false) eikä ->defaultThemeMode(), joten Filamentin oletus on ThemeMode::System: vendor/filament/filament/resources/views/components/layout/base.blade.php lisää -elementtiin luokan `dark` arvosta `localStorage.theme ?? 'system'`. KÄYTTÖJÄRJESTELMÄN tumma tila kääntää siis kirjautumissivun .dark-haaraan ilman että kukaan on sitä paneelissa valinnut — ja siinä haarassa paneelin sisäpuolelle kirjoitetut säännöt osuivat kirjautumiskorttiin: admin-theme.css:557-563 .dark .fi-input-wrp input { color:#f2ede2 } → kremanvaalea teksti kremanvaaleassa kentässä (#fffdf8), 1,03:1 admin-theme.css:530-536 .dark [class*="fi-fo"] label { color:#c7d2fe } → vaalea laventeli valkoisella kortilla admin-theme.css:673 .dark .bg-white { background-color:#0e1e38 } → .fi-simple-main (jolla on Tailwindin bg-white) piirsi TUMMAN LAATIKON valkoisen kortin taakse admin-theme.css:1780 .dark .fi-simple-page .fi-input-wrp:focus-within { background:#14304d } → kenttä välähti navyksi fokusoinnissa, ja salasana näkyi VAIN silloin ayematey-theme.css:403-404, 449, 471-488 toistavat saman kuvion /app:ssa Incognito-ikkunassa localStorage on tyhjä ja käyttäjän kone oli vaaleassa tilassa → sivu näytti ehjältä. Siksi vika ei löytynyt katsomalla. RATKAISUN PERIAATE: kirjautumissivu on YKSI kontrastirikas paletti TEEMATILASTA RIIPPUMATTA. Jokainen sääntö kirjoitetaan kahdesti — ilman .dark-etuliitettä ja sen kanssa — jotta lopputulos on sama kumpaan haaraan selain päätyykin. Tämä EI kytke dark modea pois paneelista: paneelin sisäpuoli (ohjausnäkymä, resurssit, lomakkeet) noudattaa yönäkymää entiseen tapaan, koska jokainen tämän tiedoston selektori vaatii .fi-simple-layoutin, joka esiintyy VAIN SimplePage-sivuilla (login/register/password reset). Rajaus on rakenteellinen, ei ehdollinen. MIKSI .fi-body-ETULIITE JOKA RIVILLÄ. Ilman sitä osa säännöistä olisi kaskadissa TASAPELISSÄ kumottavien kanssa ja voittaisi vain latausjärjestyksen ansiosta — eli rikkoutuisi hiljaa jos joku joskus siirtää tämän -rivin ylemmäs providerissa. .fi-body on Filamentin oma body-luokka (base.blade.php), joten se on aina läsnä ja antaa +1 luokan spesifisyyttä: nyt jokainen sääntö voittaa spesifisyydellä, ei sijainnilla. MIKSI ARVOT OVAT LITERAALEJA EIKÄ var(--…)-VIITTAUKSIA. /admin lataa vain admin-theme.css:n, EI ayematey-theme.css:ää (FilamentAdminPanelProvider kirjaa sen tarkoitukselliseksi: superadminin työkalu ei näytä yhden vuokralaisen tuotteelta). Siellä --brand-700, --ink ja --card ovat määrittelemättömiä, ja var()-viittaus putoaisi hiljaa alkuarvoon eli käytännössä mustaan tai läpinäkyvään. Literaalit ovat kopioita admin-theme.css:n kirjautumislohkon vaalean tilan arvoista, joten VAALEA TILA EI MUUTU muualla kuin niissä kohdissa jotka on merkitty KONTRASTIKORJAUS-kommentilla. Tiedosto ladataan MOLEMPIIN paneeleihin samasta lähteestä (App\Support\Filament\LoginContrastStyles, PanelsRenderHook::STYLES_AFTER), koska kaksi eriytyvää kirjautumissivua on kielletty admin-theme.css:690-697 docblockissa. MIKSI OMAN VÄRIJULISTUKSEN KANTAVAT SISÄELEMENTIT ON NIMETTÄVÄ. Tämän tiedoston ensimmäinen versio asetti värin vain niille elementeille jotka se itse nimesi (label, p, h1, .fi-input) ja luotti periytymiseen muun osalta. Periytyvä väri EI voi koskaan voittaa elementin OMAA julistusta — spesifisyys eikä !important auta, koska kohde-elementti on eri. Filament laittaa labelin tekstin, pakollisuustähden, linkin tekstin ja napin tekstin kaikki sisäelementteihin joilla on oma Tailwind-väriluokka, joten kolme elementtiä jäi tummassa tilassa lukukelvottomaksi vielä korjauksen jälkeen (labelit 1,00:1, tähti 2,77:1, napin teksti 1,26:1). Säännöt 5, 9 ja 12 nimeävät ne nyt eksplisiittisesti. TESTIT: tests/Feature/AyeMateyPanelThemeTest.php — kerroksen omat arvot, rajaus ja kaskadiehdot (staattinen analyysi) tests/Feature/LoginContrastRenderedPageTest.php — RENDERÖITY sivu: jokainen oman värijulistuksen kantava elementti on nimettävä tässä tiedostossa. Tämä on se portti joka kaatuu kun Filament siirtää tekstin uuteen sisäelementtiin; ilman sitä sivu rikkoutuu hiljaa eikä mikään testi kerro siitä. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. SIVUPOHJA: kremataivas kummassakin teematilassa ─────────────────── Kumoaa: admin-theme.css:924-926 (D&B:n musta-indigo) ja ayematey-theme.css:406 (navy-gradientti). Nämä kaksi antoivat /admin- ja /app-kirjautumiselle ERI tumman taustan, eli sivut olivat jo eriytyneet. Arvo on sama kuin vaalean tilan tausta (admin-theme.css:698-700 == ayematey-theme.css:234-238), joten valkoinen kortti, navy-logo ja ayematey-login-sea.js:n koralliaallot lukevat samoin kummassakin tilassa — ne on kaikki piirretty kremapohjalle. */ .fi-body .fi-simple-layout, .dark .fi-body .fi-simple-layout { /* * ⚠️ LAPINAKYVA, EI VARI. Yotaivas on oma kiintea kerroksensa * (`App\Support\Filament\NightSeam`) layoutin ALLA; jos layout maalaa * oman taustansa, taivas jaa sen alle nakymattomiin. Tama oli mitattu * vika: kerros oli DOMissa oikein ja oikeilla vareilla, mutta ruutu oli * kermanvalkoinen. */ background: transparent !important; /* color-scheme OHJAA SELAIMEN OMAA PIIRTOA, ei vain värejä. Filamentin oma paketti asettaa `:root.dark { color-scheme: dark }` (public/css/filament/filament/app.css), ja silloin selain piirtää lomakekontrollien sisuksen, tekstikursorin ja ENNEN KAIKKEA Chromen automaattitäytön TUMMANA — ne ovat käyttöagentin piirtoa, johon tavallinen background-color ei ulotu. Ilman tätä riviä alla pakotettu tumma muste osuisi tummalle automaattitäyttöpinnalle, eli korjaus tuottaisi uudelleen sen vian jonka se poistaa. `light` on peritty ominaisuus, joten se kattaa koko kortin. */ color-scheme: light !important; } /* ── 2. KORTIN TAUSTALAATIKKO POIS ──────────────────────────────────────── .fi-simple-main saa vendorista Tailwindin luokat `bg-white dark:bg-gray-900 shadow-sm ring-1` (layout/simple.blade.php). admin-theme.css:759-768 läpinäkyvöittää sen, mutta VAIN selektorilla .fi-simple-main (0,1,0), ja admin-theme.css:673 `.dark .bg-white` (0,2,0) voitti sen tummassa tilassa — valkoisen kortin ympärille ilmestyi tumma laatikko. Sama /app:ssa (ayematey-theme.css:449). Rengas nollataan samalla, muuten dark:ring-white/10 jättää vaalean kehyksen kremataivaalle. */ .fi-body .fi-simple-layout .fi-simple-main, .dark .fi-body .fi-simple-layout .fi-simple-main { background: transparent !important; background-color: transparent !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; --tw-ring-color: transparent !important; } /* ── 3. KORTTI: yksi pinta kummassakin teematilassa ─────────────────────── Kortin pinta oli aiemmin valkoinen (admin-theme.css:929-932 "Card stays white even in dark mode"), mutta se oli kirjattu kahteen eri sääntöön kahdella eri arvolla (#faf6ee rivillä 773, #ffffff riveillä 930 ja 1803) ja ayematey-theme.css:256 lisäsi kolmannen (#fffdf8). Tässä se on yksi arvo yhdessä paikassa. Kaikki alla olevat mustesävyt on mitattu TÄTÄ pintaa vasten. 19.9.2026 pinta vaihtui yönavyksi yösiirtymän myötä. */ .fi-body .fi-simple-layout .fi-simple-page, .dark .fi-body .fi-simple-layout .fi-simple-page { background: #16334f !important; } /* ── 3b. KORTIN REUNA — ⚠️ TÄMÄ OLI MITATTU VIKA, EI MAKUASIA ───────────── Kortin korkeusjärjestelmä oli johdettu VALKOISELLE kortille kermanvärisellä sivulla, eikä sitä johdettu uudelleen kun pinta vaihtui yönavyksi: ayematey-theme.css:365-369 border: 1px solid rgba(20,48,77,.10) box-shadow: … rgba(20,48,77,.10/.14) admin-theme.css:873-884 border: none box-shadow: … rgba(0,0,0,.15/.20) Molemmat piirtävät TUMMAA tummalle. Selaimesta mitattu lopputulos: reunaviivan komposiitti #16324f kortin pinnalla #16334f = 1,01:1, eli reunaviivaa ei ollut olemassa. Kortin oma erottuvuus taustastaan mitattuna: taivaan ylin stop #071323 1,44:1 taivaan 68 %:n stop #102a46 1,12:1 syvin aaltokerros #16304d 1,04:1 ← kortti JA meri ovat sama väri keskiaalto #3F5A82 1,85:1 etuaalto #7E93B2 4,14:1 Syvin aaltokerros ja taivaan alin stop ovat #16304d ja kortti #16334f — kolmen yksikön ero kahdessa kanavassa. Kortti siis KIRJAIMELLISESTI katosi mereen, ja koska kortti ulottuu tässä näkymässä ruudun ylälaidasta alalaitaan (mitattu 0,02 vh … 1,20 vh), se leikkaa kaikki kolme vesirajaa. ⚠️ YKSI VÄRI EI VOI EROTTUA KAIKISTA VIIDESTÄ TAUSTASTA. Taustat ulottuvat lähes mustasta (#071323) vaaleaan teräkseen (#7E93B2). Reuna on siksi JOHDETTU KAHDESTA MEKANISMISTA, joista aina toinen kantaa: vaalea hiusviiva #8fb0d2 kantaa siellä missä meri on tumma kortin oma pinta #16334f kantaa siellä missä meri on vaalea Mitattu heikoin kohta kummallakin mekanismilla yhdessä = 3,11:1 (keskiaalto, reunaviiva kantaa) — eli graafisen elementin 3:1 ylittyy JOKAISESSA taustassa. Aiempi heikoin oli 1,04:1. taivas ylin 8,26 · taivas 38 % 7,52 · taivas 68 % 6,46 syvin aalto 5,95 · keskiaalto 3,11 · etuaalto 4,14 (pinta) Varjo on käännetty tummaksi ja vahvemmaksi samasta syystä: se on ainoa mekanismi joka toimii VAALEAA etuaaltoa vasten, jossa vaalea hiusviiva on heikoimmillaan (1,39:1). MIKÄ TÄMÄN KUMOAISI: kortin pinnan #16334f muuttaminen ilman että ylläoleva taulukko lasketaan uudelleen, tai aaltokerrosten värien muuttaminen NightSeam.php:ssä. Molemmat on sidottu testiin NightSeamTest::the_card_edge_reads_against_every_layer_of_the_sea. */ .fi-body .fi-simple-layout .fi-simple-page, .dark .fi-body .fi-simple-layout .fi-simple-page { border: 1px solid #8fb0d2 !important; box-shadow: 0 24px 64px rgba(3, 10, 20, .55), 0 6px 18px rgba(3, 10, 20, .40) !important; } /* ── 4. OTSIKKO JA APUTEKSTI ────────────────────────────────────────────── Vendorin

kantaa luokkaa `dark:text-white` (components/header/simple.blade.php), eli tummassa tilassa otsikko olisi valkoinen VALKOISELLA kortilla. Tailwindin utility on ilman !importantia, joten admin-theme.css:800-808 voittaa sen tänään — mutta vain niin kauan kuin se sääntö on olemassa. Tässä väri on sidottu kortin pintaan: #0e1e38 / #ffffff = 16,6:1. HUOM: fontti, koko ja paksuus EIVÄT ole täällä. Otsikon kirjaintyyppi on brändipäätös (Fraunces /app:ssa, Inter /admin:ssa) eikä kontrastiasia. */ .fi-body .fi-simple-layout .fi-simple-page .fi-simple-header-heading, .fi-body .fi-simple-layout .fi-simple-page .fi-simple-page-heading, .fi-body .fi-simple-layout .fi-simple-page h1, .fi-body .fi-simple-layout .fi-simple-page h2, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-simple-header-heading, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-simple-page-heading, .dark .fi-body .fi-simple-layout .fi-simple-page h1, .dark .fi-body .fi-simple-layout .fi-simple-page h2 { color: #f3eee2 !important; } /* #6b7280 / #ffffff = 4,83:1 — aputeksti täyttää tekstin 4,5:1 rajan. .fi-fo-field-wrp-helper-text on tässä koska /app/register-lomakkeen kenttäohje ("Kokeilu liitetään tähän verkkotunnukseen") on OMA div, jolla on oma julistus text-gray-500 dark:text-gray-400 — eli tummassa tilassa #9ca3af valkoisella kortilla = 2,4:1. Se ei ole

, joten yllä oleva p-sääntö ei tavoittanut sitä eikä periytyminen voi voittaa sen omaa luokkaa. Rekisteröinti on se sivu jolla asiakas kirjoittaa salasanansa ensimmäisen kerran, ja ohjeteksti kertoo mihin verkkotunnukseen tili syntyy. Tämän löysi LoginContrastRenderedPageTest renderöidystä sivusta. */ .fi-body .fi-simple-layout .fi-simple-page .fi-simple-page-subheading, .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-helper-text, .fi-body .fi-simple-layout .fi-simple-page p, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-simple-page-subheading, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-helper-text, .dark .fi-body .fi-simple-layout .fi-simple-page p { color: #c5cfdd !important; } /* ── 5. KENTTIEN LABELIT ─────────────────────────────────────────────────────────── Kumoaa: admin-theme.css:530-536 ja ayematey-theme.css:478-488, jotka maalasivat KAIKKI [class*="fi-fo"] label -elementit tummassa tilassa vaaleiksi (#c7d2fe / rgba(243,238,226,.82)) — paneelin sisäpuolella oikein, valkoisella kirjautumiskortilla lukukelvottomasti. #374151 / #ffffff = 10,3:1. MIKSI SPAN ON NIMETTÄVÄ ERIKSEEN — tämä oli korjauksen OMA vika, mitattu selaimesta 2026-08-27. Filament ei laita labelin tekstiä label-elementtiin vaan sen sisällä olevaan spaniin, jolla on OMA värijulistus: vendor/filament/forms/resources/views/components/field-wrapper/label.blade.php:14 Peritty väri EI voi koskaan voittaa elementin omaa julistusta — spesifisyys eikä !important auta, koska kohde-elementti on eri. Kun kerros nimesi vain label-elementin, tummassa tilassa dark:text-white jäi voimaan ja "Sähköpostiosoite", "Salasana" ja "Muista minut" olivat VALKOISIA VALKOISELLA kortilla (mitattu: rgb(255,255,255) pinnalla rgb(255,255,255) = 1,00:1) — sanat katosivat kokonaan ja kenttärivillä näkyi vain punainen tähti. MIKÄ TÄMÄN KUMOAISI: Filamentin päivitys joka siirtää tekstin vielä yhden tason syvemmälle uuteen sisäelementtiin. Sitä vahtii tests/Feature/LoginContrastRenderedPageTest.php — se lukee RENDERÖIDYN sivun ja vaatii että jokainen oman värijulistuksen kantava elementti on nimetty tässä tiedostossa, joten sellainen päivitys kaataa testin sen sijaan että rikkoisi sivun hiljaa. */ .fi-body .fi-simple-layout .fi-simple-page label, .fi-body .fi-simple-layout .fi-simple-page label span, .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label, .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label span, .dark .fi-body .fi-simple-layout .fi-simple-page label, .dark .fi-body .fi-simple-layout .fi-simple-page label span, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label span { color: #e7ecf3 !important; } /* Muista minut -valinnan selite on tarkoituksella hillitympi kuin kentän label, mutta silti 4,83:1. Span nimetään samasta syystä kuin yllä. MIKSI TÄSSÄ ON MYÖS LUOKKAMUOTO .fi-fo-field-wrp-label[for*="remember"]: pelkkä label[for*="remember"] span painaa saman verran (4) kuin yllä oleva yleinen label span, jolloin ratkaisisi lohkojen järjestys tässä tiedostossa — ja se hajoaa hiljaa jos joku siirtää lohkoja. Luokkamuoto painaa 5 ja voittaa järjestyksestä riippumatta. */ .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-label, .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-label span, .fi-body .fi-simple-layout .fi-simple-page label[for*="remember"], .fi-body .fi-simple-layout .fi-simple-page label[for*="remember"] span, .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label[for*="remember"], .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label[for*="remember"] span, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-label, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-label span, .dark .fi-body .fi-simple-layout .fi-simple-page label[for*="remember"], .dark .fi-body .fi-simple-layout .fi-simple-page label[for*="remember"] span, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label[for*="remember"], .dark .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label[for*="remember"] span { color: #c5cfdd !important; } /* Pakollisen kentän tähti kantaa myös omaa julistustaan (sama blade, rivi 15: *), joten se on nimettävä erikseen. Mitattu ennen tätä: tummassa tilassa #f87171 valkoisella kortilla = 2,77:1. #b91c1c = 6,5:1 ja on sama punainen kuin virheilmoituksessa (sääntö 10), ei uusi sävy. */ .fi-body .fi-simple-layout .fi-simple-page label sup, .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label sup, .dark .fi-body .fi-simple-layout .fi-simple-page label sup, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label sup { color: #ffa494 !important; } /* ── 6. SYÖTTÖKENTÄN PINTA ──────────────────────────────────────────────── Kumoaa: admin-theme.css:553-556 (.dark .fi-input-wrp → rgba(255,255,255,.03)) ja ayematey-theme.css:403 (rgba(243,238,226,.04)) sekä Tailwindin `bg-white dark:bg-white/5` + `ring-gray-950/10 dark:ring-white/20`. --tw-ring-color on pakko asettaa erikseen: reunus tulee tästä border-säännöstä, mutta Tailwindin rengas on box-shadow, jota border ei kumoa — tummassa tilassa dark:ring-white/20 jätti vaalean kehän kremakentän ympärille. ⚠️ KENTÄN RAJA OLI OLEMASSA VAIN NIMELLISESTI. Reunus oli rgba(20,48,77,.20) eli TUMMAA tummalla: komposiitti #1b3c5c kentän pinnalla = 1,05:1 ja #16324f kortin pinnalla = 1,01:1. WCAG 2.1 §1.4.11 vaatii syötekentän rajalle 3:1, joten tämä EI ollut tyylikysymys vaan mitattu saavutettavuusvirhe. Reunus on nyt #6b8bb0: 4,29:1 kentän pintaa ja 3,67:1 kortin pintaa vasten. ⚠️ TESTI EI OLLUT HUOMANNUT SITÄ, ja syy kannattaa muistaa: vanha väite tarkisti vain että merkkijono #6b8bb0 esiintyy TIEDOSTOSSA. Se esiintyi — valintaruudun reunuksena rivillä 359 — joten väite oli vihreä vaikka syötekentän reunus oli näkymätön. Väite on nyt ankkuroitu itse .fi-input-wrp-sääntöön. PINTA ON KÄÄNNETTY TUMMEMMAKSI KUIN KORTTI. Kenttä oli aiemmin korttia vaaleampi (#1d3f60), mikä on vaalealla kortilla oikea idiomi mutta yönavylla väärä: kenttä nousi kohti merta samalla kun kortti katosi siihen. #0f2740 on saman yöpaletin syvin sävy (ayematey-theme.css:25) ja tekee kentästä upotetun kaivon. Jokainen kentän muste paranee mittauksessa: syötetty teksti #f3eee2 9,39:1 → 13,10:1 vihjeteksti #9fb0c4 4,91:1 → 6,85:1 silmäikoni #c5cfdd 7,05:1 → 9,64:1 reunus #6b8bb0 3,08:1 → 4,29:1 ⚠️ MIKSI EI TOISEEN SUUNTAAN: kenttää KOKEILTIIN myös vaaleampana, jolloin ero korttiin kasvaisi enemmän (#24496e = 1,39:1, #2a5279 = 1,59:1). Se pudottaa vihjetekstin arvoihin 4,21:1 ja 3,67:1 eli AA:n alle. Suunta on siis mittauksen sanelema, ei makuasia. */ .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp { background: #0f2740 !important; background-color: #0f2740 !important; border: 1.5px solid #6b8bb0 !important; --tw-ring-color: transparent !important; } /* Kumoaa: admin-theme.css:1780 ja ayematey-theme.css:404, jotka vaihtoivat FOKUSOIDUN kentän navyksi (#14304d / #16334f) valkoisen kortin keskellä. Yhdessä säännön 7 kanssa se tarkoitti että käyttäjä näki kirjoittamansa tekstin VAIN fokuksessa. Pinta pysyy nyt paikallaan; fokuksen kertoo koralli reunus ja rengas. */ .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp:focus-within, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp:focus-within { background: #0f2740 !important; background-color: #0f2740 !important; border-color: #e85c4a !important; box-shadow: 0 0 0 4px rgba(232, 92, 74, .14) !important; } /* Kentän ja sen perän (salasanan silmäikoni) välinen erotinviiva. Tummassa tilassa admin-theme.css:675 muutti Tailwindin border-gray-200:n arvoon rgba(255,255,255,.08) — valkoinen viiva kremapinnalla eli ei viivaa lainkaan. Korjaus oli rgba(20,48,77,.14), joka on yönavylla sama vika toisin päin: komposiitti #1c3d5d kentän pinnalla = 1,03:1. Nyt vaalea, mitattu 3,03:1 kentän pintaa vasten. HUOM: tämä EI ole §1.4.11:n tarkoittama komponentin raja vaan kentän sisäinen erotin tekstialueen ja silmäikonin välillä — 3:1 ei siis ole vaatimus vaan valinta, jotta viiva näkyy ilman että kenttä hajoaa kahdeksi laatikoksi. */ .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp-suffix, .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp-prefix, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp-suffix, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp-prefix { border-color: rgba(143, 176, 210, .55) !important; } /* ── 7. SYÖTETTY TEKSTI — TÄMÄ OLI SE OIRE ─────────────────────────────── Kumoaa: admin-theme.css:557-563 (.dark .fi-input, .dark .fi-input-wrp input → #f2ede2) ja ayematey-theme.css:471-477 (→ #f3eee2) sekä vendorin `dark:text-white`. Kremanvaalea teksti kremanvaaleassa kentässä on 1,03:1; käyttäjä ei nähnyt kirjoittamaansa sähköpostiosoitetta. #111827 / #fffdf8 = 16,5:1. */ .fi-body .fi-simple-layout .fi-simple-page .fi-input, .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp input, .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp textarea, .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp select, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp input, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp textarea, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp select { background: transparent !important; color: #f3eee2 !important; -webkit-text-fill-color: #f3eee2 !important; } /* KONTRASTIKORJAUS MYÖS VAALEAAN TILAAN. Vihjeteksti oli #9ca3af (admin-theme.css:847-849) = 2,4:1 kremapinnalla, eli se ei täyttänyt tekstin 4,5:1 rajaa kummassakaan teematilassa; tummassa tilassa admin-theme.css:564-567 pudotti sen vielä arvoon #4b5563 kremapinnalla. #6b7280 = 4,75:1. */ .fi-body .fi-simple-layout .fi-simple-page .fi-input::placeholder, .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp input::placeholder, .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp textarea::placeholder, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input::placeholder, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp input::placeholder, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp textarea::placeholder { /* * ⚠️ PLACEHOLDER ON HIMMEAMPI KUIN LEIPATEKSTI (#c5cfdd). Sama savy * molemmissa tekisi tyhjasta kentasta sellaisen kuin siina olisi jo arvo. * #9fb0c4 / #0f2740 = 6,85:1 eli yha AA. */ color: #9fb0c4 !important; -webkit-text-fill-color: #9fb0c4 !important; opacity: 1 !important; } /* KONTRASTIKORJAUS MYÖS VAALEAAN TILAAN. Salasanan näytä/piilota-ikoni oli #9ca3af (admin-theme.css:852-854) = 2,4:1, kun toimintoelementin raja on 3:1. #6b7280 = 4,75:1. Hover-tila (admin-theme.css:855-857, #4b5563) on spesifisempi (:hover) ja jää voimaan. */ .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp button, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-input-wrp button { color: #c5cfdd !important; } /* ── 8. VALINTARUUTU ───────────────────────────────────────────────────────────── Ruudulla on Tailwindin bg-white dark:bg-white/5, joten admin-theme.css:673 (.dark .bg-white → #0e1e38) teki siitä tummassa tilassa mustan neliön valkoisella kortilla. EI background-SHORTHANDIA. Filament piirtää valintamerkin TAUSTAKUVANA: input:where([type=checkbox]):checked { background-color: currentColor; background-size: 100% 100%; background-image: url("data:image/svg+xml, …fill='%23fff'…") } (public/css/filament/filament/app.css) Aiempi background: #e85c4a nollasi background-imagen arvoon none JA background-sizen arvoon auto, ja !important esti vendorin ruksin palaamisen — valittu tila oli pelkkä korallineliö ilman ruksia, samalla kun tämän lohkon kommentti mittasi ruksin kontrastia. Siksi tässä asetetaan VAIN background-color ja border-color. Valkoinen ruksi korallilla #e85c4a = 3,46:1 → toimintoelementin 3:1 raja täyttyy. MIKÄ TÄMÄN KUMOAISI: shorthandin palauttaminen tähän lohkoon. */ .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input { background-color: #0f2740 !important; border-color: #6b8bb0 !important; --tw-ring-color: transparent !important; /* color EI ole tässä turhaan: ruutu kantaa omaa julistustaan (text-primary-600 / dark:text-primary-500), ja vendorin :checked-sääntö lukee sen arvosta background-color: currentColor. Ilman tätä valitun ruudun täyttö tulisi paneelin primary-tokenista, joka on /admin:ssa ja /app:ssa eri — eli kolmas paikka josta kaksi kirjautumissivua voisi eriytyä. Sama koralli kuin :checked-lohkossa alla. */ color: #e85c4a !important; } .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input:checked, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input:checked { background-color: #e85c4a !important; border-color: #e85c4a !important; } /* FOKUSRENGAS — TÄMÄ OLI KORJAUKSEN OMA REGRESSIO, mitattu 2026-08-27. Yllä asetettu --tw-ring-color periytyy elementille YHDESTÄ paikasta eikä ole tilariippuva, joten se voitti myös Filamentin focus:ring-primary-600 -julistuksen (0,2,0, ei !important). Lopputulos: fokusoitu ja fokusoimaton ruutu erosivat vain renkaan paksuudella (ring-1 → ring-2) SAMASSA sävyssä rgba(20,48,77,.20) ≈ 1,50:1, ja focus:ring-offset-0 + Tailwindin input:focus { outline: 2px solid transparent } poistivat kaiken muun — näppäimistöllä kirjautuva ei nähnyt mihin fokus meni. WCAG 2.1 (1.4.11, 2.4.7) vaatii fokusindikaattorille 3:1. Ratkaisu on erillinen TILASÄÄNTÖ, joka on spesifisempi kuin lepotila (:focus / :focus-visible nostaa painon 4 → 5) ja joka piirtää renkaan myös OUTLINEna: outline on oma ominaisuus, jota Tailwindin ring-muuttujat eivät voi nollata. #b8422f on brändin oma tumma koralli (ayematey-theme.css:69), valkoisella kortilla 5,44:1 ja kremakentällä 5,35:1 — molemmin puolin yli 3:1. Lepotila ja fokustila eroavat nyt sävyllä (harmaa → koralli) ja muodolla (yksi rengas → rengas + irrallinen outline), eivät vain paksuudella. */ .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input:focus, .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input:focus-visible, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input:focus, .dark .fi-body .fi-simple-layout .fi-simple-page .fi-checkbox-input:focus-visible { --tw-ring-color: #f08a78 !important; outline: 2px solid #f08a78 !important; outline-offset: 2px !important; } /* ── 9. LINKIT ───────────────────────────────────────────────────────────────── KONTRASTIKORJAUS MYÖS VAALEAAN TILAAN, ja samalla eriytymisen poisto: /admin:ssa linkki oli #e85c4a (admin-theme.css:902-905) = 3,4:1 valkoisella eli alle tekstin 4,5:1 rajan, /app:ssa se oli var(--brand-700) (ayematey-theme.css:275) = 5,4:1. Yksi arvo molemmille, se joka läpäisee: #b8422f on brändin oma tumma koralli (ayematey-theme.css:69), ei uusi väri. SPAN ON NIMETTÄVÄ SAMASTA SYYSTÄ KUIN LABELISSA: rekisteröitymislinkin teksti on :n sisällä spanissa jolla on oma julistus (vendor/filament/filament/…/link.blade.php: text-custom-600 dark:text-custom-400), joten peritty väri ei tavoita sitä. Tummassa tilassa se jäi primary-400:aan eli vaaleaksi koralliksi valkoisella kortilla. */ .fi-body .fi-simple-layout .fi-simple-page a:not(.fi-btn), .fi-body .fi-simple-layout .fi-simple-page a:not(.fi-btn) span, .dark .fi-body .fi-simple-layout .fi-simple-page a:not(.fi-btn), .dark .fi-body .fi-simple-layout .fi-simple-page a:not(.fi-btn) span { color: #f08a78 !important; } /* ── KIELIVALITSIN EI OLE KORTIN LINKKI ──────────────────────────────────── Sen pudotusvalikko piirtää OMAN VALKOISEN taustansa kortin päälle, joten sinne vuotanut vaalea koralli oli 2,44:1 eli selvästi alle AA:n (mitattu 19.9.2026). Valitsin kantaa värinsä inline-tyylinä, mutta `!important` voittaa inline-tyylin — siksi yllä oleva linkkisääntö kaappasi sen. ⚠️ NAPPI OLI KOKO AJAN KUNNOSSA (10,31:1): se on