har ingen klasse); bare de offentlige sidene skjerpes. Selektoren «main.tom-layout» (ikke bare «.tom-layout») er en bevisst spesifisitetsjustering, ikke en tilfeldighet: den treffer nøyaktig TomLayout.razor sitt

og INGEN andre

. Spesifisiteten blir dermed (0,2,1). Den sto opprinnelig nøyaktig lik regelen over og vant på rekkefølge; etter UI-67 er den regelen «:where(html.tema-moderne) .search-input» (0,1,0), så denne vinner nå på vekt. Utfallet er det samme, og den står fortsatt SENERE. Den er lavere enn merkevare.css sin «.merkevare-side.merkevare-aktiv .search-input» (0,3,0), som derfor alltid vinner der den treffer — merkevaresider er uendret, uten en eneste :not(). Fokusringen over (0,3,1) og feilkanten «.invalid» (lenger ned i denne fila, samme spesifisitet men enda senere) er begge urørt og vinner fortsatt over denne raden. #6b7280 (samme gråtone som --mod-tekst-dus): 4,83 : 1 mot #ffffff og 4,44 : 1 mot #f4f5f8 (egen instans, 15.09.2026) — begge over kravet med god margin. */ main.tom-layout .search-input { border-color: #6b7280; } /* UI-67 — de ovrige felttypene. Designsystemet dekket tekstfeltet og avkryssingen; nedtrekk, tall, tekstomrade, dato og tid hadde ingen regler i det hele tatt. Alle fem bruker husets ene feltklasse (.search-input, 443 steder), sa de arver kanten, radiusen, skriften og fokusringen over — det som star her er bare det hver type trenger utover det. */ /* Nedtrekket far var egen chevron, ellers tegner Chrome, Safari og Android hver sin pil. appearance: none fjerner nettleserens pil, sa bildet MA vises — kontrollert i nettleser, ikke bare i regelen. UI-79: en data-URI kan ikke lese CSS-variabler, sa fargen ma bakes inn i selve bildet. Derfor sender Merkevare.CssVariabler() hele url()-verdien som --mv-chevron, ferdig farget med tekst-dus-tokenet (4,5 : 1 mot bade flate og felt). Uten merkevare finnes ikke variabelen, fallbacken treffer, og de 51 nedtrekkene i kontorpanelet er uendret. En variabel — ikke en ny regel pa merkevaresida: denne selektoren er (0,2,1), og en overstyring matte hatt (0,3,0). Variabelen har ingen vekt; den leses der regelen star. Fallbacken er --mod-tekst-dus skrevet som %235f6673. UI-52 flyttet tokenet pa linje 20 fra #6b7280 til #5f6673, men denne URI-en ble staende — bade fargen og kommentaren som pastod at den fulgte tokenet var feil fra 20.09.2026 til na. Endrer du tokenet, ma du endre dette tallet i samme slengen: %235f6673 er en streng, ingen var(). Og fallbacken er ikke valgfri — en var() som peker pa noe udefinert resolverer stille til ingenting, bygget blir gront, testene gronne, og pila er borte. */ html.tema-moderne select.search-input { appearance: none; padding-right: var(--sp-6); background-image: var(--mv-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")); background-repeat: no-repeat; background-position: right var(--sp-3) center; } /* Tall hoyrestilles med like brede siffer, sa kolonner med belop og antall kan sammenliknes loddrett. Trinnpilene fjernes: de er 10 px hoye, umulige a treffe pa mobil, og stjeler plassen sifrene trenger. */ html.tema-moderne .search-input[type=number] { text-align: right; font-variant-numeric: tabular-nums; } html.tema-moderne .search-input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0; } html.tema-moderne textarea.search-input { min-height: 96px; resize: vertical; line-height: 1.5; } /* Breddetaket for tall, dato og tid star bevisst med :where() rundt temaprefikset. Uten den ville selektoren bli (0,3,1) og SLA de lokale reglene som allerede eier bredden i tette rader — «.kjoreplan-dato input[type=date]» (0,2,1, 11rem) er den som biter: UI-16 satte den etter at datoraden malte 490 px pa en 375 px-skjerm, og 200 px her ville gitt de to feltene 48 px tilbake. :where() teller null, sa regelen lander pa (0,2,0) — den gjelder de ~100 feltene som ikke har noen lokal bredde, og taper for hver eneste som har en (.kjoreplan-dato, .prissats-rad, .stopp-tider, .avbestilling-rad, .minifelt). Det er nettopp rangeringen UI-67 ba om. */ :where(html.tema-moderne) .search-input[type=number] { max-width: 160px; } :where(html.tema-moderne) .search-input[type=date] { max-width: 200px; } :where(html.tema-moderne) .search-input[type=time] { max-width: 140px; } html.tema-moderne .form-felt label { font-size: 0.875rem; font-weight: 600; color: #3f3f46; } /* UI-92: fargen bor i app.css, sa lokale regler kan nulle streken */ html.tema-moderne .feilmelding, html.tema-moderne .validation-message { color: var(--mod-rod); font-size: 0.875rem; } html.tema-moderne .valid.modified:not([type=checkbox]) { outline: none; border-color: var(--mod-gronn); } html.tema-moderne .invalid { outline: none; border-color: var(--mod-rod); } /* ORD-165: en feltfeil skjemaet setter selv («invalid» på et felt Blazor kaller «valid modified» — samme buss to ganger på turen) skal ha rød kant. Uten raden vant den grønne over (0,4,1 mot 0,2,1) og feltet så riktig ut over en rød linje. */ html.tema-moderne .valid.modified.invalid:not([type=checkbox]) { border-color: var(--mod-rod); } html.tema-moderne .kunde-kontaktinfo { color: var(--mod-tekst-dus); font-size: 0.875rem; } html.tema-moderne .ordre-tidsrom { color: var(--mod-primar-mork); font-size: 0.875rem; } /* ---------- Kort og lister ---------- */ html.tema-moderne .kunde-liste li, html.tema-moderne .buss-dag-kort, html.tema-moderne .prislinje-rad { background-color: var(--mod-flate); border: 1px solid var(--mod-kant); border-radius: var(--mod-radius); box-shadow: var(--mod-skygge); padding: 1rem; transition: box-shadow var(--mod-fart) ease, border-color var(--mod-fart) ease; } html.tema-moderne .kunde-liste li:hover, html.tema-moderne .buss-dag-kort:hover { box-shadow: var(--mod-skygge-hover); border-color: var(--mod-kant-sterk); } /* Utleggsraden (PRI-3). Regelen over setter `border` på alle fire sidene og ville ellers spist den venstre aksenten som skiller et utlegg fra firmaets eget salg. Bompanelet arver samme kant og radius som resten av temaet. */ html.tema-moderne .prislinje-rad.prislinje-utlegg { border-left: 4px solid #8a6d3b; background-color: #fdf9f0; } html.tema-moderne .bompanel { border-radius: var(--mod-radius); border-color: var(--mod-kant); border-left: 4px solid #8a6d3b; box-shadow: var(--mod-skygge); } html.tema-moderne .prislinje-totaler { background-color: var(--mod-bg); border: 1px solid var(--mod-kant); border-radius: var(--mod-radius-liten); font-size: 0.9rem; } html.tema-moderne .buss-dag-status { background-color: var(--mod-bg); border: 1px solid var(--mod-kant); color: var(--mod-tekst-dus); } html.tema-moderne .oppdrag-tid { color: var(--mod-primar-mork); } html.tema-moderne .ledig-tekst { color: var(--mod-gronn-tekst); } /* ---------- Statusfilter (piller) ---------- */ html.tema-moderne .status-pille { background-color: var(--mod-flate); border: 1px solid var(--mod-kant); color: var(--mod-tekst); font-weight: 500; box-shadow: var(--mod-skygge); transition: background-color var(--mod-fart) ease, border-color var(--mod-fart) ease, color var(--mod-fart) ease; } html.tema-moderne .status-pille:hover:not(.aktiv) { border-color: var(--mod-kant-sterk); background-color: #fcfcfd; } html.tema-moderne .status-knapp { width: 0.9rem; height: 0.9rem; margin-right: 0.35rem; } html.tema-moderne .status-alle .status-knapp { background-color: var(--mod-gronn); } html.tema-moderne .status-foresporsel .status-knapp { background-color: var(--mod-gul); } html.tema-moderne .status-tilbudledigbuss .status-knapp { background-color: var(--mod-bla); } html.tema-moderne .status-bekreftetavkunde .status-knapp { background-color: var(--mod-gronn); } html.tema-moderne .status-bekreftetavsjafor .status-knapp { background-color: var(--mod-brun); } html.tema-moderne .status-fullfort .status-knapp { background-color: var(--mod-teal); } html.tema-moderne .status-busskansellert .status-knapp { background-color: var(--mod-rod); } html.tema-moderne .status-pille.aktiv { color: white; font-weight: 600; } html.tema-moderne .status-alle.aktiv { background-color: var(--mod-gronn-tekst); border-color: var(--mod-gronn-tekst); } html.tema-moderne .status-foresporsel.aktiv { background-color: var(--mod-gul-tekst); border-color: var(--mod-gul-tekst); } html.tema-moderne .status-tilbudledigbuss.aktiv { background-color: var(--mod-bla-tekst); border-color: var(--mod-bla-tekst); } html.tema-moderne .status-bekreftetavkunde.aktiv { background-color: var(--mod-gronn-tekst); border-color: var(--mod-gronn-tekst); } html.tema-moderne .status-bekreftetavsjafor.aktiv { background-color: var(--mod-brun-tekst); border-color: var(--mod-brun-tekst); } html.tema-moderne .status-fullfort.aktiv { background-color: var(--mod-teal-tekst); border-color: var(--mod-teal-tekst); } html.tema-moderne .status-busskansellert.aktiv { background-color: var(--mod-rod-tekst); border-color: var(--mod-rod-tekst); } html.tema-moderne .status-pille.aktiv .status-knapp { background-color: rgba(255, 255, 255, 0.9); } /* ---------- Statusmerker på kort ---------- */ html.tema-moderne .status-merke { font-weight: 600; border: 1px solid transparent; } html.tema-moderne .status-merke.status-foresporsel { background-color: var(--mod-gul-bg); color: var(--mod-gul-tekst); } html.tema-moderne .status-merke.status-tilbudledigbuss { background-color: var(--mod-bla-bg); color: var(--mod-bla-tekst); } html.tema-moderne .status-merke.status-bekreftetavkunde { background-color: var(--mod-gronn-bg); color: var(--mod-gronn-tekst); } html.tema-moderne .status-merke.status-bekreftetavsjafor { background-color: var(--mod-brun-bg); color: var(--mod-brun-tekst); } html.tema-moderne .status-merke.status-fullfort { background-color: var(--mod-teal-bg); color: var(--mod-teal-tekst); } html.tema-moderne .status-merke.status-busskansellert { background-color: var(--mod-rod-bg); color: var(--mod-rod-tekst); } /* UI-129: generelle tilstander for merker som ikke er ordrestatus — fire av statusparene i DESIGNSYSTEM.md 3.3. Før disse fantes, lånte sidene prisskjermens produktmerker (.produkt-merke .merke-aktiv/-kommer/-tillegg/-fare, egne hex og merkevaretint). Navnene er valgt så de ikke kolliderer med .merke-aktiv/.merke-tillegg/.merke-fare i app.css. Kategori («Buss», «Partner», rollen) er .merke-kategori i UI-59-blokka under. */ html.tema-moderne .status-merke.merke-ok { background-color: var(--mod-gronn-bg); color: var(--mod-gronn-tekst); } html.tema-moderne .status-merke.merke-venter { background-color: var(--mod-gul-bg); color: var(--mod-gul-tekst); } html.tema-moderne .status-merke.merke-feil { background-color: var(--mod-rod-bg); color: var(--mod-rod-tekst); } html.tema-moderne .status-merke.merke-info { background-color: var(--mod-bla-bg); color: var(--mod-bla-tekst); } /* UI-59: kategori, ikke tilstand. «Fast rute» og bestillingstaggen sier hva ordren ER, ikke hvor den står — et fargelagt merke er forbeholdt statusparene over (DESIGNSYSTEM.md 6.2). Står her og ikke i app.css: vekten 0,3,1 må slå html.tema-moderne .status-merke (0,2,1), ellers vinner den gjennomsiktige kanten. «fra produkt» (.prislinje-produktmerke) har samme drakt i Ordre.razor.css. */ html.tema-moderne .status-merke.serie-merke, html.tema-moderne .status-merke.bestilling-merke, html.tema-moderne .status-merke.merke-kategori { background-color: var(--mod-flate); color: var(--mod-tekst-dus); border: 1px solid var(--mod-kant); } /* ---------- Faneindikatorer (✓/!) ---------- */ html.tema-moderne .fane-status { font-size: 0.7rem; } html.tema-moderne .fane-status.utfylt { background-color: var(--mod-gronn); } html.tema-moderne .fane-status.mangler { background-color: var(--mod-gul); } /* ---------- Hjem-siden ---------- */ html.tema-moderne .menu-button { color: var(--mod-tekst); background-color: var(--mod-flate); border: 1px solid var(--mod-kant); border-radius: var(--mod-radius); box-shadow: var(--mod-skygge); font-weight: 600; transition: box-shadow var(--mod-fart) ease, border-color var(--mod-fart) ease, color var(--mod-fart) ease; } html.tema-moderne .menu-button:hover, html.tema-moderne .menu-button:focus { background-color: var(--mod-flate); color: var(--mod-primar-mork); border-color: var(--mod-primar-markor); box-shadow: var(--mod-skygge-hover); } /* ---------- Temabytter-knappen ---------- */ html.tema-moderne .tema-knapp { color: var(--mod-tekst-dus); } /* ---------- Mobil ---------- */ @media (max-width: 640.98px) { html.tema-moderne .content { padding-top: 1.1rem; } html.tema-moderne h1 { font-size: 1.35rem; } }