/* ========================================================================== Digist WH — designsystem (enterprise / SAP Fiori-inspireret) ========================================================================== Fælles for index.html, indstillinger.html, admin.html og fejl.html. Designretning: høj informationstæthed uden rod. Stramme tabeller, tynde linjer, dæmpede statusfarver, tydeligt hierarki mellem shell (mørk topbar), sidehoved og indhold. Kompakte kontroller (36px), lille radius på knapper og felter, blødere radius på kort. Struktur: 1. Tokens + mørk tilstand 2. Reset og typografi 3. Shell bar (den mørke topbar) 4. Sidehoved og indholdslayout 5. Kort og sektioner 6. Formularfelter 7. Knapper 8. Til/fra-switch 9. Tabeller 10. Faneblade 11. Statusmærkater (object status) 12. KPI-tiles 13. Modaler 14. Notifikationer, beskeder, tomme tilstande 15. Hjælpeklasser 16. Responsivt 17. Animationer ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Shell - den mørke topbar. Virksomhedens navy bruges som shell-farve, ligesom Fiori's shellbar, i stedet for som knapfarve. */ --shell-bg: #2c3e50; --shell-text: #ffffff; --shell-text-muted: #b6c2ce; --shell-hover: rgba(255,255,255,0.12); --shell-active: rgba(255,255,255,0.2); /* Mærkets accent i shell baren - samme blå som forsidens logo. Fast værdi, fordi baren har samme mørke baggrund i begge temaer; --primary er tunet til sidens lyse flader og ville stå for mørkt her. */ --shell-accent: #3b82f6; /* Interaktiv accent - knapper, links, valgte faner, fokus */ --primary: #0a66c2; --primary-hover: #08508f; --primary-active: #063a6b; --primary-subtle: #eff5fc; --accent: var(--primary); /* Tekstfarven OVENPÅ en fyldt primærflade. Skal være et token og ikke en "body.dark-mode button"-regel: den regel har højere specificitet end .vis-knap og farvede derfor også de sekundære knappers tekst næsten sort på næsten sort baggrund i mørk tilstand. */ --on-primary: #ffffff; /* Flader */ --bg-body: #f5f6f7; --bg-card: #ffffff; --bg-subtle: #f7f8f9; /* tabelhoveder, kort-headere, hover */ --bg-hover: #ebf3fc; /* rækkehover - let blå, som i Fiori-lister */ /* Tekst */ --text-main: #32363a; --text-muted: #6a6d70; --text-faint: #8c8f92; /* Linjer - to niveauer: fine linjer inde i tabeller, kraftigere om kort */ --border-color: #d9d9d9; --border-subtle: #e5e5e5; /* Semantiske statusfarver (dæmpede, ERP-agtige) */ --positive: #107e3e; --positive-bg: #f0faf4; --positive-border: #abe2c3; --critical: #a54d08; --critical-bg: #fff7f0; --critical-border: #f0c48a; --negative: #bb0000; --negative-bg: #fdf0f0; --negative-border: #f2b8b8; --information: #0a66c2; --information-bg: #eff5fc; --information-border: #b3d0ee; --neutral: #6a6d70; --neutral-bg: #f4f5f6; --neutral-border: #d9d9d9; /* Aliaser til de semantiske farver (bruges bredt i skabelonernes markup) */ --success: var(--positive); --warning: var(--critical); --danger: var(--negative); --danger-hover: #970000; --info: var(--information); /* Spacing - 4px-basis, tættere end en typisk marketing-side */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; /* Radius - små på kontroller, blødere på kort */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* Skygger - meget diskrete; dybden kommer fra linjer, ikke fra blur */ --shadow-sm: 0 1px 2px rgba(34, 42, 51, 0.06); --shadow-md: 0 2px 8px rgba(34, 42, 51, 0.08); --shadow-lg: 0 12px 32px rgba(34, 42, 51, 0.18); /* Typografi */ --text-xs: 0.6875rem; /* 11px - mikrolabels */ --text-sm: 0.75rem; /* 12px - hjælpetekst, kolonnehoveder */ --text-base: 0.8125rem; /* 13px - tabeller, kompakt UI */ --text-md: 0.875rem; /* 14px - brødtekst, felter, knapper */ --text-lg: 1rem; /* 16px - kort-titler */ --text-xl: 1.125rem; /* 18px - sektionsoverskrifter */ --text-2xl: 1.375rem; /* 22px - sidetitel */ --text-kpi: 1.75rem; /* 28px - nøgletal */ /* Kontrolhøjde - ensartet på knapper, felter og selects */ --control-h: 36px; --control-h-sm: 28px; --transition: all 0.15s ease-in-out; /* Bagudkompatible aliaser: skabelonerne refererer stadig disse navne i inline style="" og i deres sidespecifikke CSS. */ --primary-color: var(--primary); --primary-light: var(--primary-subtle); --bg-color: var(--bg-body); --card-bg: var(--bg-card); --success-color: var(--positive); --danger-color: var(--negative); --radius: var(--radius-md); --shadow: var(--shadow-sm); --focus-ring: rgba(10, 102, 194, 0.3); } body.dark-mode { --shell-bg: #172029; --shell-text: #eaecee; --shell-text-muted: #a9b4be; --primary: #4db1ff; --primary-hover: #7ac6ff; --primary-active: #a3d8ff; --primary-subtle: #14293d; --on-primary: #0b1a26; /* mørk tekst oven på den lyse accentblå */ --bg-body: #12171c; --bg-card: #1d232a; --bg-subtle: #232a31; --bg-hover: #263441; --text-main: #eaecee; --text-muted: #a9b4be; --text-faint: #8a949e; --border-color: #3a4249; --border-subtle: #2b333b; --positive: #7fd6a2; --positive-bg: #12281d; --positive-border: #2c5c3f; --critical: #f0b27a; --critical-bg: #2d1f0f; --critical-border: #6b4a1f; --negative: #ff8f8f; --negative-bg: #2d1414; --negative-border: #6b2b2b; --information: #7bb5f0; --information-bg: #14273c; --information-border: #2f4d70; --neutral: #a9b4be; --neutral-bg: #232a31; --neutral-border: #3a4249; --danger-hover: #ffb3b3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --focus-ring: rgba(77, 177, 255, 0.35); /* Aliaserne SKAL gentages her. En custom property med en var()-værdi beregnes på det element, hvor den er erklæret - ikke der hvor den bruges. `--accent: var(--primary)` i :root låste derfor accenten til :root's lyse --primary og fulgte ikke med over i mørk tilstand. Det ramte alle aliaser; værst --card-bg, der blev ved med at være #ffffff og gav hvide blokke midt i det mørke tema. */ --primary-color: var(--primary); --accent: var(--primary); --primary-light: var(--primary-subtle); --bg-color: var(--bg-body); --card-bg: var(--bg-card); --success: var(--positive); --success-color: var(--positive); --warning: var(--critical); --danger: var(--negative); --danger-color: var(--negative); --info: var(--information); --radius: var(--radius-md); --shadow: var(--shadow-sm); } /* -------------------------------------------------------------------------- 2. RESET OG TYPOGRAFI -------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-body); color: var(--text-main); font-size: var(--text-md); line-height: 1.45; padding-bottom: var(--space-8); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.2s ease, color 0.2s ease; } h1 { font-size: var(--text-2xl); font-weight: 600; color: var(--text-main); letter-spacing: -0.01em; margin-bottom: var(--space-4); } h2 { font-size: var(--text-xl); font-weight: 600; color: var(--text-main); letter-spacing: -0.005em; margin-bottom: var(--space-4); } h3 { font-size: var(--text-lg); font-weight: 600; color: var(--text-main); margin-top: var(--space-5); margin-bottom: var(--space-3); } h4 { font-size: var(--text-md); font-weight: 600; color: var(--text-main); } p { margin-bottom: var(--space-3); color: var(--text-muted); } a { color: var(--primary); } strong { font-weight: 600; } code, pre, .monospace { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } /* Talkolonner skal flugte - tabular-nums gør cifrene lige brede */ .tal, td.tal, .dashboard-kort-tal, .kpi-vaerdi { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. SHELL BAR -------------------------------------------------------------------------- */ /* Den mørke topbar er systemets faste ramme - den skifter ikke med temaet ud over en nuance, så man altid har samme visuelle "tag" over sig. */ header#hoved-navbar { background-color: var(--shell-bg); color: var(--shell-text); padding: 0; height: 48px; border-bottom: none; box-shadow: var(--shadow-sm); margin-bottom: 0; position: sticky; top: 0; z-index: 100; } header#hoved-navbar .hoved-container { display: flex; align-items: center; gap: var(--space-4); height: 100%; /* Selve BAGGRUNDEN går helt ud til skærmkanten (den ligger på
), men indholdet i baren holdes inde i samme 1600px-spor som sidens indhold - ellers klæbede logo og titel til venstre skærmkant, og log ud/mørk tilstand til højre, mens alt nedenunder startede et godt stykke inde. Derfor ingen "max-width: none" her: den arves fra .hoved-container sammen med "margin: 0 auto" og samme sidepolstring. */ padding: 0 var(--space-5); } /* Mærket tegnes med CSS, præcis som på forsiden, i stedet for som billede. Her lå før static/logo.png: en 1024x1024 PNG på 1,4 MB, vist som 26 px - og med sin egen brune baggrund indbagt, så logoet stod som en firkant på den mørkeblå bar. */ #navbar-logo { width: 26px; height: 26px; flex-shrink: 0; background: var(--shell-accent); border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: var(--text-sm); line-height: 1; } #navbar-titel { font-size: var(--text-md); font-weight: 600; color: var(--shell-text); letter-spacing: -0.005em; white-space: nowrap; } /* "WH" i navnet - samme accentfarve som mærket, ligesom på forsiden */ #navbar-titel .maerke-accent { color: var(--shell-accent); } /* Sidens eget navn efter mærket (fx System Administration) - underordnet selve navnet */ #navbar-titel .maerke-sidenavn { color: var(--shell-text-muted); font-weight: 500; margin-left: var(--space-2); padding-left: var(--space-2); border-left: 1px solid var(--shell-text-muted); } /* Appnavigation i shell baren */ #navbar-menu { display: flex; gap: var(--space-1); align-items: center; height: 100%; } #navbar-menu a { display: flex; align-items: center; height: 100%; color: var(--shell-text-muted); text-decoration: none; font-weight: 500; font-size: var(--text-md); padding: 0 var(--space-4); border-radius: 0; border-bottom: 3px solid transparent; transition: var(--transition); } #navbar-menu a:hover { background-color: var(--shell-hover); color: var(--shell-text); } #navbar-menu a.active { background-color: var(--shell-active); color: var(--shell-text); border-bottom-color: #ffffff; font-weight: 600; } #navbar-bruger { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; font-size: var(--text-sm); color: var(--shell-text-muted); white-space: nowrap; } #navbar-bruger strong { color: var(--shell-text); font-weight: 600; } /* Ikonknapper i shell baren */ .navbar-ikon-knap { background: transparent; border: none; border-radius: var(--radius-sm); width: 34px; height: 34px; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; color: var(--shell-text); transition: var(--transition); position: relative; flex-shrink: 0; padding: 0; } .navbar-ikon-knap:hover { background-color: var(--shell-hover); transform: none; box-shadow: none; } #notifikations-badge { position: absolute; top: 1px; right: 1px; background: #d32f2f; color: #ffffff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--shell-bg); } /* Log ud i shell baren - diskret, ikke advarselsrød. Den destruktive røde er reserveret til handlinger der sletter data. */ #log-ud-knap, .btn-log-ud { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; background-color: transparent; color: var(--shell-text); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-sm); box-shadow: none; margin-left: var(--space-2); } #log-ud-knap:hover, .btn-log-ud:hover { background-color: var(--shell-hover); color: #ffffff; border-color: rgba(255,255,255,0.6); transform: none; box-shadow: none; } #mobil-menu-knap { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.35); color: var(--shell-text); font-size: 1.1rem; line-height: 1; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); box-shadow: none; margin-left: auto; } #mobil-menu-knap:hover { background: var(--shell-hover); transform: none; box-shadow: none; } /* -------------------------------------------------------------------------- 4. SIDEHOVED OG INDHOLDSLAYOUT -------------------------------------------------------------------------- */ .hoved-container { max-width: 1600px; /* bred: ERP-skærme bruger pladsen */ margin: 0 auto; padding: 0 var(--space-5); } main.hoved-container { padding-top: var(--space-5); } /* Sidehoved: titel + undertitel til venstre, handlinger til højre */ .side-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-color); } .side-header h1 { margin-bottom: 2px; } .side-header p { margin: 0; font-size: var(--text-md); color: var(--text-muted); } .side-header-handlinger { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 5. KORT OG SEKTIONER -------------------------------------------------------------------------- */ section, .card, .settings-card { background: var(--bg-card); padding: var(--space-5); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); border: 1px solid var(--border-color); } /* Kort-header: tonet bånd øverst i kortet med titel og beskrivelse */ .card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); background-color: var(--bg-subtle); border-radius: var(--radius-md) var(--radius-md) 0 0; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5); } .card-header h2 { font-size: var(--text-lg); margin-bottom: 0; } .card-header p { font-size: var(--text-sm); margin: 2px 0 0; } .card-body { padding: 0; } /* Sektionsoverskrift med tynd linje under - strammere end en fuld kort-header */ .sektion-titel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-color); } .sektion-titel h2, .sektion-titel h3 { margin: 0; } .sektion-titel p { margin: 2px 0 0; font-size: var(--text-sm); } .setting-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); gap: var(--space-4); } .setting-item:last-child { border-bottom: none; padding-bottom: 0; } .setting-item:first-child { padding-top: 0; } .setting-info h3 { font-size: var(--text-md); font-weight: 600; margin: 0 0 2px; color: var(--text-main); } .setting-info p { font-size: var(--text-sm); margin: 0; } .action-row { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); } /* -------------------------------------------------------------------------- 6. FORMULARFELTER -------------------------------------------------------------------------- */ .felt-gruppe { margin-bottom: var(--space-4); } .felt-gruppe label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-1); font-weight: 600; } /* url kom til med webhook-skærmen. Uden den arvede feltet browserens egen standardbredde og stod som en tredjedel af en linje ved siden af felter i fuld bredde - og en adresse er netop det felt, hvor man har mest brug for at kunne se, hvad man har skrevet. Listen er en OPREMSNING af typer, så et nyt felt af en type, der ikke står her, falder uden for stilen i stilhed. Tjek den, når du tager en input-type i brug første gang. */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="time"], input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea { width: 100%; height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--text-md); font-family: inherit; color: var(--text-main); background-color: var(--bg-card); transition: var(--transition); box-shadow: none; } textarea { height: auto; padding: var(--space-2) var(--space-3); line-height: 1.5; resize: vertical; } select { appearance: none; -webkit-appearance: none; /* Egen dropdown-pil, så den ser ens ud på tværs af browsere */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236a6d70' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-7); } /* :not(...) er nødvendigt, ikke bare pænt: uden det slog denne regel igennem på låste og deaktiverede selects, fordi den er mere specifik end reglen længere nede, der fjerner pilen igen ("select.laast-felt, select:disabled { background-image: none }"). Oveni sætter de to regler background som SAMMENSAT egenskab, hvilket nulstiller background-repeat til 'repeat' - så pilen kom ikke bare tilbage i mørk tilstand, den blev fliselagt hen over teksten (fx Rolle-kolonnen i admin-panelet). Pilen hører kun til de selects, man rent faktisk kan ændre, så her udelades resten. */ body.dark-mode select:not(.laast-felt):not(:disabled) { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a9b4be' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); } body.dark-mode input, body.dark-mode select, body.dark-mode textarea { color-scheme: dark; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:hover, select:hover, textarea:hover { border-color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus-ring); } input:disabled, select:disabled, textarea:disabled { background: var(--bg-subtle); color: var(--text-faint); cursor: not-allowed; } .felt-raekke { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } /* Adgangskodefelt med 'Vis'-knap indeni */ .adgangskode-felt { position: relative; display: flex; align-items: center; } .adgangskode-felt input { padding-right: 62px; } .adgangskode-felt .vis-knap { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); width: auto; } /* Skrivebeskyttede felter i tabeller - ser ud som ren tekst indtil man redigerer */ input.laast-felt, select.laast-felt { border-color: transparent; background: transparent; padding: 0 var(--space-1); height: auto; box-shadow: none; cursor: default; color: var(--text-main); } input.laast-felt:hover, select.laast-felt:hover { border-color: transparent; } input.laast-felt:focus, select.laast-felt:focus { box-shadow: none; border-color: transparent; } select.laast-felt, select:disabled { background-image: none; padding-right: var(--space-1); color: inherit; opacity: 1; } .felt-fremhaevet { border-color: var(--negative) !important; box-shadow: 0 0 0 2px rgba(187, 0, 0, 0.2) !important; } .svag { color: var(--text-muted); font-size: var(--text-sm); } .middel { color: var(--critical); font-size: var(--text-sm); font-weight: 600; } .staerk { color: var(--positive); font-size: var(--text-sm); font-weight: 600; } #adgangskode-styrke, #adgangskode-match { margin-top: var(--space-1); font-weight: 600; font-size: var(--text-sm); } #adgangskode-krav, #nulstil-adgangskode-krav { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background-color: var(--information-bg); border: 1px solid var(--information-border); border-radius: var(--radius-sm); } #adgangskode-krav strong, #nulstil-adgangskode-krav strong { color: var(--text-main); } #adgangskode-krav ul, #nulstil-adgangskode-krav ul { margin: var(--space-2) 0 0 var(--space-4); } /* -------------------------------------------------------------------------- 7. KNAPPER -------------------------------------------------------------------------- */ /* Standardknappen er "emphasized" (blå) - den primære handling. Sekundære handlinger bruger .vis-knap/.knap-sekundaer (lys med kant). */ button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4); cursor: pointer; background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); font-size: var(--text-md); font-weight: 600; font-family: inherit; line-height: 1; transition: var(--transition); box-shadow: none; white-space: nowrap; } button:hover { background: var(--primary-hover); border-color: var(--primary-hover); } button:active { background: var(--primary-active); border-color: var(--primary-active); } button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--focus-ring); } button:disabled { opacity: 0.45; cursor: not-allowed; } /* Destruktiv handling */ button.fare { background: transparent; color: var(--negative); border-color: var(--negative); } button.fare:hover { background: var(--negative); color: var(--bg-card); border-color: var(--negative); } /* Sekundær/neutral knap. Ét udseende, tre historiske klassenavne. */ .vis-knap, .btn-secondary, .knap-sekundaer, .nulstil-knap, .kolonner-knap, .filter-vaelger-knap { background-color: var(--bg-card); color: var(--primary); border: 1px solid var(--border-color); box-shadow: none; font-weight: 600; } .vis-knap:hover, .btn-secondary:hover, .knap-sekundaer:hover, .nulstil-knap:hover, .kolonner-knap:hover, .filter-vaelger-knap:hover { background-color: var(--primary-subtle); border-color: var(--primary); color: var(--primary); } /* Ghost-knap - til lav-prioritets handlinger i tætte områder */ .knap-ghost { background: transparent; color: var(--primary); border-color: transparent; } .knap-ghost:hover { background: var(--primary-subtle); border-color: transparent; } .knap-raekke { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; align-items: center; } /* Handlingsknapper inde i tabelrækker - kompakte, så rækkerne forbliver lave */ .handling-knapper { display: flex; gap: var(--space-1); flex-wrap: nowrap; } .handling-knapper button { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--text-sm); background: transparent; color: var(--primary); border-color: transparent; } .handling-knapper button:hover { background: var(--primary-subtle); border-color: transparent; } .handling-knapper button.fare { color: var(--negative); border-color: transparent; background: transparent; } .handling-knapper button.fare:hover { background: var(--negative-bg); color: var(--negative); border-color: transparent; } /* Sideopdeling */ .paginering { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-2) var(--space-1); } .paginering:empty { display: none; } .paginering button { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); background: var(--bg-card); color: var(--primary); border-color: var(--border-color); } .paginering button:hover:not(:disabled) { background: var(--primary-subtle); border-color: var(--primary); } .paginering button:disabled { opacity: 0.4; cursor: default; } .paginering span { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 8. TIL/FRA-SWITCH -------------------------------------------------------------------------- */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background-color: #b8bcc0; transition: 0.2s ease; border-radius: var(--radius-full); box-shadow: none; } body.dark-mode .slider { background-color: #4a535c; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: 0.2s ease; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.25); } input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(20px); } .switch input:focus-visible + .slider { box-shadow: 0 0 0 2px var(--focus-ring); } /* -------------------------------------------------------------------------- 9. TABELLER -------------------------------------------------------------------------- */ /* Tabelkortet er rammen om tabellen: kant, radius og vandret scroll. */ .tabel-kort { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow-x: auto; margin-top: var(--space-3); box-shadow: var(--shadow-sm); } /* Værktøjslinje over en tabel: titel + antal til venstre, handlinger til højre */ .tabel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .tabel-toolbar-titel { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-lg); font-weight: 600; color: var(--text-main); } .tabel-toolbar-antal { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tabel-toolbar-handlinger { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } table { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 600px; } table.tabel-kompakt { min-width: 500px; } th { text-align: left; padding: var(--space-2) var(--space-4); height: 36px; background-color: var(--bg-subtle); color: var(--text-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); white-space: nowrap; position: sticky; /* kolonnehoveder bliver stående ved lodret scroll */ top: 0; z-index: 2; } td { padding: var(--space-2) var(--space-4); height: 40px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--text-main); } /* Felter inde i tabelceller må ikke gøre rækkerne høje */ td input, td select { height: 28px; font-size: var(--text-base); } tbody tr { transition: background-color 0.12s ease; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background-color: var(--bg-hover); } th.sorterbar { cursor: pointer; user-select: none; } th.sorterbar:hover { background: var(--border-subtle); color: var(--text-main); } .sorter-pil { font-size: 0.8em; margin-left: var(--space-1); opacity: 0.8; color: var(--primary); } /* Tom tilstand - lav profil, ingen kursiv */ .tom-liste-besked, .tom-tilstand { padding: var(--space-7) var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--text-md); background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-md); margin-top: var(--space-3); } /* -------------------------------------------------------------------------- 10. FANEBLADE -------------------------------------------------------------------------- */ /* Hovedfaner: understreget valgt tilstand (Fiori IconTabBar), ikke fyldte piller. Det giver et roligere billede, når der er 5-8 faner ved siden af hinanden. */ .tabs-container { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-5); padding-bottom: 0; flex-wrap: nowrap; overflow-x: auto; /* overflow-y SKAL stå her. Sætter man kun overflow-x, beregner browseren den anden akse til "auto" i stedet for "visible" - og fanerne stikker 1 px ud forneden på grund af "margin-bottom: -1px" på .tab-btn. Det gav en lodret scrollbar i højre side af fanebladslinjen, som hverken hørte til eller kunne rulle nogen vegne. */ overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tabs-container .tab-btn { flex: 0 0 auto; white-space: nowrap; } .tab-btn { background: transparent; color: var(--text-muted); border: none; border-bottom: 3px solid transparent; border-radius: 0; height: 42px; padding: 0 var(--space-4); font-size: var(--text-md); font-weight: 600; box-shadow: none; cursor: pointer; transition: var(--transition); margin-bottom: -1px; } .tab-btn:hover { background-color: var(--bg-subtle); color: var(--text-main); border-color: transparent; border-bottom-color: var(--border-color); } .tab-btn.active { background-color: transparent; color: var(--primary); border-bottom-color: var(--primary); } body.dark-mode .tab-btn { color: var(--text-muted); } body.dark-mode .tab-btn:hover { color: var(--text-main); } body.dark-mode .tab-btn.active { color: var(--primary); } /* Underfaner (fx Stamdata) - segmenteret kontrol, tydeligt underordnet hovedfanerne */ .stamdata-tabs { display: inline-flex; gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); margin-bottom: var(--space-5); padding: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .stamdata-tabs .stamdata-tab-btn { flex: 0 0 auto; white-space: nowrap; } .stamdata-tab-btn { background: transparent; color: var(--text-muted); border: none; border-right: 1px solid var(--border-color); border-radius: 0; height: 32px; padding: 0 var(--space-4); font-size: var(--text-base); font-weight: 600; box-shadow: none; cursor: pointer; transition: var(--transition); } .stamdata-tab-btn:last-child { border-right: none; } .stamdata-tab-btn:hover { background-color: var(--bg-subtle); color: var(--text-main); } .stamdata-tab-btn.active { background-color: var(--primary); color: #ffffff; } .stamdata-tab-btn.active { color: var(--on-primary); } .stamdata-tab-indhold.skjult { display: none; } .tab-content { display: none; animation: fadeIn 0.15s ease-out; } .tab-content.active { display: block; } .tab-indhold.skjult { display: none; } /* -------------------------------------------------------------------------- 11. STATUSMÆRKATER (OBJECT STATUS) -------------------------------------------------------------------------- */ /* Ét system til alle statusser. Dæmpet flade + tynd kant + mættet tekstfarve, så mange mærkater ved siden af hinanden ikke larmer. */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; } .badge.neutral { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); } .badge.info { background: var(--information-bg); color: var(--information); border-color: var(--information-border); } .badge.success { background: var(--positive-bg); color: var(--positive); border-color: var(--positive-border); } .badge.warning { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); } .badge.danger { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); } /* Historiske klassenavne arver badge-formen */ .alvorlighed-badge, .prognose-maerkat, .lagervis-opsummering-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; } .alvorlighed-badge.succes, .prognose-fin { background: var(--positive-bg); color: var(--positive); border-color: var(--positive-border); } .alvorlighed-badge.fejl, .prognose-kritisk { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); } .alvorlighed-badge.advarsel, .prognose-snart { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); } .alvorlighed-badge.info { background: var(--information-bg); color: var(--information); border-color: var(--information-border); } .lagervis-opsummering-tag { background: var(--neutral-bg); color: var(--text-main); border-color: var(--neutral-border); } .lagervis-opsummering-tag.kritisk { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); } /* Statusprik - hvor en fuld badge fylder for meget */ .status-prik, .lagervis-status-prik { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-prik.kritisk, .lagervis-status-prik.kritisk { background: var(--negative); } .status-prik.lav, .lagervis-status-prik.lav { background: var(--critical); } .status-prik.ok, .lagervis-status-prik.ok { background: var(--positive); } .status-prik.ukendt, .lagervis-status-prik.ukendt { background: var(--neutral); } /* -------------------------------------------------------------------------- 12. KPI-TILES -------------------------------------------------------------------------- */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .dashboard-kort { background: var(--bg-card); border: 1px solid var(--border-color); border-top: 3px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-1); min-height: 104px; transition: var(--transition); } .dashboard-kort[onclick] { cursor: pointer; } .dashboard-kort[onclick]:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } .dashboard-kort-titel { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0; } .dashboard-kort-tal { font-size: var(--text-kpi); font-weight: 600; color: var(--text-main); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .dashboard-kort-under { font-size: var(--text-sm); color: var(--text-muted); margin-top: auto; padding-top: var(--space-1); } /* Kort der kræver handling markeres i toppen, ikke med en fuld rød ramme */ .dashboard-kort.advarsel { border-top-color: var(--negative); } .dashboard-kort.advarsel .dashboard-kort-tal { color: var(--negative); } /* Listekort ved siden af KPI'erne */ .dashboard-liste-kort { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); } .dashboard-liste-kort h4 { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } .dashboard-liste-raekke { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-base); } .dashboard-liste-raekke:first-of-type { border-top: none; } .dashboard-liste-scroll { max-height: 260px; overflow-y: auto; } .dashboard-liste-kort-link { display: inline-block; margin-top: var(--space-3); padding-top: var(--space-2); font-size: var(--text-sm); color: var(--primary); text-decoration: none; font-weight: 600; } .dashboard-liste-kort-link:hover { text-decoration: underline; } .dashboard-to-kolonner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } /* -------------------------------------------------------------------------- 13. MODALER -------------------------------------------------------------------------- */ .modal-baggrund { position: fixed; inset: 0; background: rgba(15, 22, 30, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); animation: fadeIn 0.15s ease-out; } .modal-boks { background: var(--bg-card); padding: var(--space-5); border-radius: var(--radius-md); max-width: 520px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); text-align: left; position: relative; animation: scaleIn 0.15s ease-out; max-height: 88vh; overflow-y: auto; } /* Modal-titel som fast bånd øverst */ .modal-boks h3 { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4); padding: var(--space-4) var(--space-5); font-size: var(--text-lg); background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); border-radius: var(--radius-md) var(--radius-md) 0 0; } #inaktiv-boks { text-align: center; max-width: 400px; } #inaktiv-boks h3 { color: var(--negative); } #inaktiv-nedtaelling-raekke { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-4); background-color: var(--negative-bg); border: 1px solid var(--negative-border); border-radius: var(--radius-sm); } #inaktiv-nedtaelling { font-size: 2.25rem; font-weight: 600; color: var(--negative); line-height: 1; font-variant-numeric: tabular-nums; } #inaktiv-nedtaelling-tekst { font-size: var(--text-md); color: var(--negative); font-weight: 500; } /* -------------------------------------------------------------------------- 14. NOTIFIKATIONER, BESKEDER, TOMME TILSTANDE -------------------------------------------------------------------------- */ #notifikations-panel { position: absolute; top: 42px; right: 0; width: 340px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0; z-index: 500; overflow: hidden; } #notifikations-panel h4 { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); } #notifikations-liste { padding: var(--space-2); max-height: 380px; overflow-y: auto; } .notifikations-post { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-base); border-left: 3px solid var(--information); margin-bottom: var(--space-1); background: var(--bg-subtle); transition: var(--transition); } .notifikations-post:hover { background: var(--bg-hover); } .notifikations-post.alvorlig { border-left-color: var(--negative); } .notifikations-tom { color: var(--text-muted); font-size: var(--text-base); text-align: center; padding: var(--space-5) 0; } /* Toast nederst til højre */ #besked { position: fixed; bottom: var(--space-5); right: var(--space-5); background: #32363a; color: #ffffff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: var(--text-md); font-weight: 500; z-index: 2000; display: none; max-width: 420px; } #besked:not(:empty) { display: block; animation: slideIn 0.2s ease-out; } #besked.fejl { background: var(--negative); color: #ffffff; } #besked.succes { background: var(--positive); color: #ffffff; } /* Handlingen LYKKEDES, men der er noget, man skal vide - fx en salgsordre, der lover mere væk, end der er frit på lageret. Hverken rød (intet gik galt) eller grøn (så ville den drukne i de øvrige kvitteringer). */ #besked.advarsel { background: var(--warning); color: #ffffff; } body.dark-mode #besked { background: #2b333b; border: 1px solid var(--border-color); } #login-besked { margin-top: var(--space-3); font-weight: 600; color: var(--negative); text-align: center; font-size: var(--text-md); } #login-besked:not(:empty) { padding: var(--space-2) var(--space-3); background: var(--negative-bg); border: 1px solid var(--negative-border); border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 15. HJÆLPEKLASSER -------------------------------------------------------------------------- */ .skjult { display: none !important; } /* -------------------------------------------------------------------------- 16. RESPONSIVT -------------------------------------------------------------------------- */ /* Berøringsflader: 44px er den gængse anbefaling for touch. */ @media (max-width: 1024px) { .dashboard-to-kolonner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .handling-knapper { gap: var(--space-2); } .handling-knapper button, td button, td a > button { min-height: 44px; min-width: 44px; height: auto; padding: var(--space-2) var(--space-3); font-size: var(--text-md); } td input[type="checkbox"] { width: 22px; height: 22px; } a:has(> button) { display: inline-flex; } } @media (max-width: 768px) { .hoved-container { padding: 0 var(--space-3); } header#hoved-navbar { height: auto; } header#hoved-navbar .hoved-container { flex-wrap: wrap; padding: var(--space-2) var(--space-3); } #navbar-logo { order: 1; } #navbar-titel { order: 2; font-size: var(--text-base); } #mobil-menu-knap { display: block; order: 3; } #navbar-menu { order: 4; } #navbar-bruger { order: 5; } #navbar-menu, #navbar-bruger { display: none; width: 100%; gap: var(--space-2); margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid rgba(255,255,255,0.15); height: auto; } body.mobil-nav-aaben #navbar-menu, body.mobil-nav-aaben #navbar-bruger { display: flex; } #navbar-menu { flex-direction: column; align-items: stretch; } #navbar-menu a { padding: var(--space-3); height: auto; border-bottom: none; border-left: 3px solid transparent; border-radius: var(--radius-sm); } #navbar-menu a.active { border-bottom: none; border-left-color: #ffffff; } #navbar-bruger { flex-wrap: wrap; align-items: center; } #navbar-bruger > #log-ud-knap { margin-left: auto; } #notifikations-panel { position: fixed; top: auto; width: calc(100vw - 24px); right: 12px; left: 12px; } h1 { font-size: 1.25rem; } .side-header { padding-bottom: var(--space-3); margin-bottom: var(--space-4); } section, .card, .settings-card { padding: var(--space-4); } .card-header { padding: var(--space-3) var(--space-4); margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); } .modal-boks { padding: var(--space-4); } .modal-boks h3 { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3); padding: var(--space-3) var(--space-4); } .dashboard-grid { grid-template-columns: minmax(0, 1fr); } .dashboard-to-kolonner { grid-template-columns: minmax(0, 1fr); } /* Tabeller bliver til stablede kort i stedet for vandret scroll */ table { min-width: 0 !important; } table colgroup { display: none; } table thead { display: none; } table, table tbody, table tr, table td { display: block; width: 100%; box-sizing: border-box; } table tr { margin-bottom: var(--space-2); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); background: var(--bg-card); } tbody tr:hover { background-color: var(--bg-card); } table td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; height: auto; min-height: 36px; border: none; border-bottom: 1px solid var(--border-subtle); text-align: right; min-width: 0; overflow-wrap: break-word; } table td > * { min-width: 0; max-width: 100%; } table td:last-child { border-bottom: none; } table td:empty { display: none; } table td input:not([type="checkbox"]), table td select { min-width: 0 !important; width: auto !important; max-width: 60%; text-align: right; } table td::before { content: attr(data-label); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); text-align: left; margin-right: auto; white-space: nowrap; } /* Inline-grids med faste kolonner stables - minmax(0,...) så de må krympe */ [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } .felt-raekke { grid-template-columns: minmax(0, 1fr); } section, .card, .tab-content, .tab-indhold, .tabel-kort { min-width: 0; } [style*="justify-content: space-between"] { flex-wrap: wrap; gap: var(--space-2); } } /* -------------------------------------------------------------------------- 17. ANIMATIONER -------------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────────────────────── Kortet paa Ruteplanlaegning (Leaflet) ───────────────────────────────────────────────────────────────────────────── Kun det, der skal passe kortet ind i husets udseende. Selve Leaflets egen CSS ligger i static/vendor/leaflet/leaflet.css og roeres ikke - saa kan den udskiftes med en ny udgivelse uden at nogen skal lede efter vores rettelser inde i den. */ .leaflet-container { font-family: inherit; background: var(--bg-body); } /* Tilskrivningen SKAL staa der - OpenStreetMaps licens kraever den - men den maa gerne vaere diskret. Den er betalingen for fliserne, ikke en overskrift. */ .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.75); } /* MOERK TILSTAND: fliserne er lyse billeder fra OpenStreetMap, og der findes ingen moerk udgave af dem uden at skifte flisetjeneste. Filteret vender lysheden og drejer kuloerten tilbage paa plads, saa kortet ikke staar og lyser som en lommelygte midt i en moerk side. Det er en tilnaermelse og ikke et rigtigt moerkt kort - men forskellen paa at kunne kigge paa skaermen og ikke at kunne. */ body.dark-mode .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); } body.dark-mode .leaflet-control-attribution { background: rgba(20, 24, 28, 0.75); } body.dark-mode .leaflet-control-attribution a { color: var(--primary); } /* Markoererne tegnes af os selv (se stopMarkoer/bilMarkoer i ruteplan.js) og skal IKKE vendes om med fliserne - et hvidt nummer paa blaa bund skal blive ved med at vaere det. De ligger i marker-pane, som ikke rammes af filteret ovenfor. */ #ruteplan-kort-laerred { height: 460px; border-radius: var(--radius-md); overflow: hidden; } .kort-vaerktoej { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; } /* ---- FULD SKAERM ---- Rammen laegges ud over hele vinduet med css, og ikke kun med browserens egen fuldskaerm. Grunden er iOS: Safari giver kun