/* ============================================================ Tema: Moderne (2026) — valgfritt tema for Ordresystem Buss Aktiveres med klassen "tema-moderne" på (Bytt tema-knappen). Inspirert av Linear / Stripe / Vercel: lys flate, én primærfarge, diskrete gråtoner, konsekvent radius/skygge/høyder, WCAG AA. Standarddesignet ligger urørt i app.css — dette er kun overstyringer. ============================================================ */ html.tema-moderne { /* Designtokens */ --mod-font: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mod-bg: #f8f9fb; --mod-flate: #ffffff; --mod-tekst: #18181b; --mod-tekst-dus: #6b7280; --mod-kant: #e5e7eb; --mod-kant-sterk: #d1d5db; --mod-primar: #4f46e5; --mod-primar-mork: #4338ca; --mod-primar-tint: #eef2ff; --mod-fokus: rgba(79, 70, 229, 0.35); --mod-radius: 0.625rem; --mod-radius-liten: 0.5rem; --mod-skygge: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); --mod-skygge-hover: 0 4px 12px rgba(16, 24, 40, 0.10); --mod-fart: 180ms; /* Statusfarger (tekst på lys tint = AA-kontrast) */ --mod-gul-bg: #fef3c7; --mod-gul-tekst: #92400e; --mod-gul: #f59e0b; --mod-bla-bg: #dbeafe; --mod-bla-tekst: #1e40af; --mod-bla: #3b82f6; --mod-gronn-bg: #dcfce7; --mod-gronn-tekst: #166534; --mod-gronn: #22c55e; --mod-brun-bg: #f3e8db; --mod-brun-tekst: #6b4423; --mod-brun: #a16207; --mod-teal-bg: #ccfbf1; --mod-teal-tekst: #115e59; --mod-teal: #14b8a6; --mod-rod-bg: #fee2e2; --mod-rod-tekst: #991b1b; --mod-rod: #dc2626; } /* ---------- Grunnflate og typografi ---------- */ html.tema-moderne body { font-family: var(--mod-font); background-color: var(--mod-bg); color: var(--mod-tekst); -webkit-font-smoothing: antialiased; } html.tema-moderne h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--mod-tekst); margin-bottom: 1.5rem; } html.tema-moderne .content { padding-top: 1.75rem; padding-bottom: 3rem; } html.tema-moderne a { color: var(--mod-primar); transition: color var(--mod-fart) ease; } /* ---------- Sidemeny ---------- */ html.tema-moderne .sidebar { background-image: none; background-color: var(--mod-flate); border-right: 1px solid var(--mod-kant); } html.tema-moderne .sidebar .top-row { background-color: var(--mod-flate); border-bottom: 1px solid var(--mod-kant); } html.tema-moderne .sidebar .navbar-brand { color: var(--mod-tekst); font-weight: 700; letter-spacing: -0.01em; } html.tema-moderne .sidebar .nav-item .nav-link { color: #3f3f46; font-weight: 500; border-radius: var(--mod-radius-liten); transition: background-color var(--mod-fart) ease, color var(--mod-fart) ease; } html.tema-moderne .sidebar .nav-item .nav-link:hover { background-color: #f4f4f5; color: var(--mod-tekst); } html.tema-moderne .sidebar .nav-item a.active { background-color: var(--mod-primar-tint); color: var(--mod-primar); font-weight: 600; } html.tema-moderne .sidebar .bi-house-door-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233f3f46' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } html.tema-moderne .sidebar .navbar-toggler { border: 1px solid var(--mod-kant); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2863, 63, 70, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--mod-flate); border-radius: var(--mod-radius-liten); } html.tema-moderne .sidebar .navbar-toggler:checked { background-color: var(--mod-primar-tint); } /* ---------- Knapper ---------- */ html.tema-moderne .btn-ny, html.tema-moderne .btn-avbryt, html.tema-moderne .btn-rediger, html.tema-moderne .btn-visning, html.tema-moderne .btn-beregn-rute, html.tema-moderne .btn-dagvelger, html.tema-moderne .btn-fjern-linje { transition: background-color var(--mod-fart) ease, border-color var(--mod-fart) ease, color var(--mod-fart) ease, box-shadow var(--mod-fart) ease; } html.tema-moderne .btn-ny { background-color: var(--mod-primar); color: var(--merkevarefarge-tekst, white); border-radius: var(--mod-radius-liten); font-weight: 600; box-shadow: var(--mod-skygge); } html.tema-moderne .btn-ny:hover, html.tema-moderne .btn-ny:focus { background-color: var(--mod-primar-mork); } /* Når .btn-ny brukes på en lenke må teksten følge merkevarefargen (temaets a-regel gir ellers indigo tekst). */ html.tema-moderne a.btn-ny { color: var(--merkevarefarge-tekst, white); text-decoration: none; } html.tema-moderne .btn-avbryt { color: var(--mod-tekst); background-color: var(--mod-flate); border: 1px solid var(--mod-kant-sterk); border-radius: var(--mod-radius-liten); box-shadow: var(--mod-skygge); } html.tema-moderne .btn-avbryt:hover, html.tema-moderne .btn-avbryt:focus { background-color: #f4f4f5; } html.tema-moderne .btn-rediger { color: var(--mod-primar); border: 1px solid var(--mod-kant-sterk); border-radius: var(--mod-radius-liten); background-color: var(--mod-flate); } html.tema-moderne .btn-rediger:hover, html.tema-moderne .btn-rediger:focus { background-color: var(--mod-primar-tint); border-color: var(--mod-primar); } html.tema-moderne .btn-visning { color: var(--mod-tekst-dus); background-color: transparent; border: 1px solid var(--mod-kant); border-radius: var(--mod-radius-liten); font-weight: 500; } html.tema-moderne .btn-visning:hover:not(.aktiv) { background-color: #f4f4f5; color: var(--mod-tekst); } html.tema-moderne .btn-visning.aktiv { background-color: var(--mod-primar); border-color: var(--mod-primar); color: white; font-weight: 600; } html.tema-moderne .btn-tilbud { color: var(--mod-primar); border: 1px solid var(--mod-primar); border-radius: var(--mod-radius-liten); } html.tema-moderne .btn-tilbud:hover:not(:disabled), html.tema-moderne .btn-tilbud:focus:not(:disabled) { background-color: var(--mod-primar-tint); } html.tema-moderne .btn-beregn-rute { color: var(--mod-primar); background-color: var(--mod-primar-tint); border: 1px dashed var(--mod-primar); border-radius: var(--mod-radius-liten); } html.tema-moderne .btn-beregn-rute:hover:not(:disabled), html.tema-moderne .btn-beregn-rute:focus:not(:disabled) { background-color: #e0e7ff; } html.tema-moderne .btn-dagvelger { color: var(--mod-primar); background-color: var(--mod-flate); border: 1px solid var(--mod-kant-sterk); border-radius: var(--mod-radius-liten); } html.tema-moderne .btn-dagvelger:hover, html.tema-moderne .btn-dagvelger:focus { background-color: var(--mod-primar-tint); } html.tema-moderne .btn-fjern-linje { color: var(--mod-rod); border: 1px solid #fecaca; background-color: #fef2f2; border-radius: var(--mod-radius-liten); } html.tema-moderne .btn-fjern-linje:hover { background-color: #fee2e2; border-color: var(--mod-rod); } /* Synlige fokusmarkeringer (WCAG) */ html.tema-moderne button:focus-visible, html.tema-moderne a:focus-visible, html.tema-moderne input:focus-visible, html.tema-moderne select:focus-visible, html.tema-moderne textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mod-fokus); } /* ---------- Skjema og inndata ---------- */ html.tema-moderne .search-input { border: 1px solid var(--mod-kant-sterk); border-radius: var(--mod-radius-liten); background-color: var(--mod-flate); color: var(--mod-tekst); transition: border-color var(--mod-fart) ease, box-shadow var(--mod-fart) ease; } html.tema-moderne .search-input:focus { border-color: var(--mod-primar); box-shadow: 0 0 0 3px var(--mod-fokus); } html.tema-moderne .form-felt label { font-size: 0.875rem; font-weight: 600; color: #3f3f46; } html.tema-moderne .skjema-handlinger { border-bottom: 1px solid var(--mod-kant); } 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); } html.tema-moderne .kunde-kontaktinfo { color: var(--mod-tekst-dus); font-size: 0.875rem; } html.tema-moderne .ordre-tidsrom { color: var(--mod-primar); 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); } 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); } 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); } /* ---------- 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); border-color: var(--mod-primar); 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; } }