/* ============================================================ BROKIER SKADEPORTAL — DESIGN SYSTEM Navy #1a2b4a · Coral #e74c5e · Serif Georgia (kursiv) ============================================================ */ :root { --navy: #1a2b4a; --navy-dark: #0f1a30; --coral: #e74c5e; --coral-dark: #c93a4a; --coral-light: #fceaea; --text-primary: #1a2b4a; --text-secondary: #5a6478; --text-muted: #8892a5; --text-very-muted: #b4b8c3; --bg-body: #f7f6f2; --bg-card: #ffffff; --bg-secondary: #f1efe8; --bg-tertiary: #eae7dd; --border: #e3e0d5; --border-soft: #efece2; --border-strong: #c8c4b7; --success: #0F6E56; --success-bg: #EAF3DE; --warning: #854F0B; --warning-bg: #FAEEDA; --danger: #A32D2D; --danger-bg: #FCEBEB; --info: #0C447C; --info-bg: #E6F1FB; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ============================================================ TEMA: SYSTEM ("Sagsbord" / retning 3B) — operatør-siden ------------------------------------------------------------ Aktiveres pr. (sættes i header.php for master/mægler). Kundesiden har IKKE klassen og beholder derfor det oprindelige navy/coral-tema uændret. Kun tokens ændres — alle komponenter (kort, knapper, badges, topbar) arver automatisk. Petrol-identitet + Spectral/Figtree/IBM Plex Mono. ============================================================ */ body.tema-system { --navy: #123f3c; /* dyb petrol — chrome (topbar, primær-knap) */ --navy-dark: #0d302e; --coral: #1c5b57; /* petrol — accent/handling */ --coral-dark: #164a47; --coral-light: #e8f0ed; --text-primary: #18231f; --text-secondary: #4a544e; --text-muted: #79817b; --text-very-muted: #a4aca6; --bg-body: #eef0ee; --bg-card: #ffffff; --bg-secondary: #e8ece8; --bg-tertiary: #dfe4df; --border: #e2e5e0; --border-soft: #eaeee9; --border-strong: #cdd3cc; --surface-1: #e8ece8; --surface-2: #ffffff; --font-sans: "Inter", "Figtree", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: "Inter", "Figtree", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; } /* Inter-typografi (valgt 09-2026): overskrifter er OPRET (ingen kursiv serif), og store nøgletal står i Inter med lige cifre — ikke skrivemaskine-mono. !important slår inline font-style:italic på tværs af operatør-siderne, så det virker overalt uden at røre hver enkelt side. Små mono-tal (sagsnr, kolonner) beholdes bevidst — de giver systemet dets tekstur. */ body.tema-system h1, body.tema-system h2, body.tema-system h3, body.tema-system .serif { font-family: var(--font-sans) !important; font-style: normal !important; letter-spacing: -0.01em; } body.tema-system .kpi-value, body.tema-system .kpi-v, body.tema-system .mc-tile .num, body.tema-system .qt .v { font-family: var(--font-sans); font-variant-numeric: tabular-nums; } /* Utility: monospace-tal med lige cifre — policenr, beløb, sags-ID */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tnum { font-variant-numeric: tabular-nums; } .kpi-value, .kpi-v { font-variant-numeric: tabular-nums; } /* ============================================================ LISTE-TABEL — kompakt sagstabel-look til operatør-lister (sager, koncerner, selskaber m.fl.). Token-drevet. ============================================================ */ .sk-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px;} .sk-chip{font-size:12px;font-weight:600;padding:5px 12px;border-radius:7px;text-decoration:none;background:var(--bg-secondary);color:var(--text-secondary);border:0.5px solid transparent;} .sk-chip:hover{color:var(--text-primary);} .sk-chip.on{background:var(--coral-light);color:var(--coral-dark);border-color:var(--coral);} .sk-koncern{padding:6px 11px;font-size:12.5px;border:0.5px solid var(--border);border-radius:7px;background:var(--bg-card);color:var(--text-primary);font-family:inherit;margin-left:auto;} .sk-wrap{background:var(--bg-card);border:0.5px solid var(--border);border-radius:10px;overflow:hidden;} .sk-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px;} .sk-table th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-very-muted);padding:9px 10px;background:var(--bg-secondary);border-bottom:0.5px solid var(--border);white-space:nowrap;} .sk-table td{padding:7px 10px;border-top:0.5px solid var(--border-soft);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sk-table tbody tr{cursor:pointer;} .sk-table.sk-static tbody tr{cursor:default;} .sk-table tbody tr:hover td{background:var(--bg-secondary);} .sk-table tbody tr.ulaest td{background:var(--info-bg);} .sk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;} .sk-nr{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);} .sk-cust{color:var(--text-primary);font-weight:600;} .sk-r{text-align:right;} .sk-c{text-align:center;} .sk-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--text-secondary);} .sk-pill{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;} .sk-pill.warn{background:var(--danger-bg);color:var(--danger);} .sk-late{font-family:var(--font-mono);font-size:10px;color:var(--warning);margin-left:5px;} .sk-late.kritisk{color:var(--danger);} * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg-body); -webkit-font-smoothing: antialiased; } /* ============================================================ HOVED-NAVIGATION ============================================================ */ .topbar { background: var(--navy); color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; } .topbar-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .topbar-brand .logo { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: #fff; } .topbar-brand .divider { opacity: 0.5; margin: 0 6px; } .topbar-brand .subtitle { font-size: 12px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.7); } .topbar-nav { display: flex; gap: 4px; margin-left: 16px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topbar-nav::-webkit-scrollbar { display: none; } .topbar-nav a { padding: 8px 14px; font-size: 13px; color: rgba(255, 255, 255, 0.85); text-decoration: none; border-radius: 4px; transition: background 0.15s; white-space: nowrap; flex-shrink: 0; } .topbar-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .topbar-nav a.aktiv { background: rgba(255, 255, 255, 0.15); color: #fff; } .topbar-hoejre { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; white-space: nowrap; } .topbar-hoejre a[href="/logout.php"] { white-space: nowrap; } .mode-switch { display: inline-flex; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 2px; gap: 2px; white-space: nowrap; } .mode-switch a { padding: 5px 10px; font-size: 12px; color: rgba(255,255,255,0.75); text-decoration: none; border-radius: 4px; transition: background 0.15s; white-space: nowrap; } .mode-switch a:hover { color: #fff; } .mode-switch a.aktiv { background: #fff; color: var(--navy); font-weight: 500; } .kodeord-wrap { position: relative; } .kodeord-wrap input { padding-right: 40px !important; } .kodeord-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px 8px; color: var(--text-muted); font-size: 12px; } .kodeord-toggle:hover { color: var(--navy); } .kodeord-toggle svg { width: 18px; height: 18px; } .land-picker { position: relative; } .land-input { width: 100%; padding: 8px 12px; padding-right: 32px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--bg-card); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; } .land-input:focus { outline: none; border-color: var(--navy); } .land-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 100; } .land-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 0.5px solid var(--border-soft); } .land-item:last-child { border-bottom: none; } .land-item:hover, .land-item.aktiv { background: var(--bg-secondary); } .notif-widget { position: relative; } .notif-knap { background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; color: rgba(255,255,255,0.85); cursor: pointer; padding: 5px 8px; position: relative; display: flex; align-items: center; } .notif-knap:hover { background: rgba(255,255,255,0.05); } .notif-badge { position: absolute; top: -6px; right: -6px; background: #e74c5e; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; line-height: 1; } .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 200; display: none; } .notif-dropdown.vis { display: block; } .notif-header { padding: 12px 16px; border-bottom: 0.5px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--text-primary); font-size: 13px; } .notif-liste { max-height: 400px; overflow-y: auto; } .notif-tom { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 12px; } .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); text-decoration: none; color: var(--text-primary); } .notif-item:hover { background: var(--bg-secondary); } .notif-item.laest { opacity: 0.65; } .notif-ikon { font-size: 16px; line-height: 1; padding-top: 2px; flex-shrink: 0; } .notif-tekst { flex: 1; min-width: 0; } .notif-titel { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; } .notif-besk { font-size: 11px; color: var(--text-secondary); line-height: 1.4; } .notif-footer { padding: 10px 16px; border-top: 0.5px solid var(--border); text-align: center; } .notif-footer a { font-size: 12px; color: var(--coral); text-decoration: none; } .topbar-avatar { width: 32px; height: 32px; background: var(--coral); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; } /* Avataren er et link til profilsiden — hover gør det synligt. */ a.topbar-avatar { text-decoration: none; transition: box-shadow 0.15s; } a.topbar-avatar:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); color: #fff; } /* ============================================================ INDHOLD ============================================================ */ .container { max-width: 1400px; margin: 0 auto; padding: 24px; } .page-header { margin-bottom: 20px; } .page-header .rolle { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; } .page-header h1 { font-family: var(--font-serif); font-style: italic; font-size: 28px; font-weight: 400; margin: 4px 0 4px; color: var(--text-primary); } .page-header .undertekst { font-size: 13px; color: var(--text-secondary); } /* ============================================================ KORT ============================================================ */ .card { background: var(--bg-card); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; } .card-header { font-size: 14px; font-weight: 500; margin-bottom: 12px; } /* KPI-kort */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .kpi { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 14px 16px; } .kpi-label { font-size: 12px; color: var(--text-secondary); } .kpi-value { font-size: 26px; font-weight: 500; margin-top: 4px; color: var(--navy); } .kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ============================================================ KNAPPER & FORMULARER ============================================================ */ .btn { display: inline-block; padding: 8px 14px; font-size: 13px; font-weight: 500; border: 0.5px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; font-family: inherit; } .btn:hover { background: var(--bg-secondary); border-color: var(--text-muted); } .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); } .btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); } .btn-coral { background: var(--coral); color: #fff; border-color: var(--coral); } .btn-coral:hover { background: var(--coral-dark); border-color: var(--coral-dark); } .btn-sm { padding: 4px 10px; font-size: 12px; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], textarea, select { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--bg-card); transition: border-color 0.15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); } label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; } .felt { margin-bottom: 14px; } /* ============================================================ ALERTS ============================================================ */ .alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 14px; font-size: 13px; line-height: 1.5; } .alert-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); } .alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); } .alert-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); } .alert-info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info); } /* ============================================================ LOGIN-SIDE ============================================================ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg-body); } .login-card { background: var(--bg-card); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 40px 36px; width: 100%; max-width: 420px; } .login-brand { text-align: center; margin-bottom: 24px; } .login-brand .logo { font-family: var(--font-serif); font-style: italic; font-size: 28px; color: var(--navy); } .login-brand .subtitle { font-size: 12px; letter-spacing: 2px; color: var(--text-secondary); margin-top: 4px; } .login-titel { font-family: var(--font-serif); font-style: italic; font-size: 22px; text-align: center; color: var(--text-primary); margin-bottom: 20px; } /* ============================================================ TABELLER ============================================================ */ table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; padding: 10px 14px; background: var(--bg-secondary); font-size: 11px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 0.5px solid var(--border); } tbody td { padding: 12px 14px; border-bottom: 0.5px solid var(--border); } tbody tr:hover { background: var(--bg-secondary); } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-neutral { background: var(--bg-secondary); color: var(--text-secondary); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .topbar { flex-wrap: wrap; padding: 12px 16px; } .topbar-nav { order: 3; margin-left: 0; width: 100%; overflow-x: auto; margin-top: 12px; } .container { padding: 16px; } .page-header h1 { font-size: 22px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } } /* Dropdown-menuer i topbaren — samler beslægtede punkter */ .nav-grp { position: relative; flex-shrink: 0; } .nav-grp > button { padding: 8px 14px; font-size: 13px; color: rgba(255, 255, 255, 0.85); background: none; border: none; cursor: pointer; border-radius: 4px; white-space: nowrap; display: flex; align-items: center; gap: 5px; font-family: inherit; } .nav-grp > button:hover, .nav-grp.aaben > button { background: rgba(255, 255, 255, 0.08); color: #fff; } .nav-grp > button.har-aktiv { background: rgba(255, 255, 255, 0.15); color: #fff; } .nav-grp .chev { font-size: 10px; opacity: 0.6; transition: transform 0.15s; } .nav-grp.aaben .chev { transform: rotate(180deg); } .nav-drop { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 0.5px solid #e5e2d9; border-radius: 10px; padding: 6px; min-width: 190px; box-shadow: 0 8px 24px rgba(26, 43, 74, 0.15); z-index: 200; } .nav-grp.aaben .nav-drop { display: block; } .nav-drop a { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 9px 11px; border-radius: 6px; color: #1a2b4a; text-decoration: none; white-space: nowrap; } .nav-drop a:hover { background: #f1efe8; color: #1a2b4a; } .nav-drop a.aktiv { background: #eef2f8; color: #1a2b4a; font-weight: 500; } .nav-drop .drop-h { font-size: 10px; color: #b4b2a9; padding: 8px 11px 4px; text-transform: uppercase; letter-spacing: 0.4px; } /* ============================================================ Udskrift (print) — ren dokument-udskrift uden app-ramme. .no-print skjules ved tryk; .kun-print vises kun ved tryk. ============================================================ */ .kun-print { display: none; } @media print { .topbar, .no-print, .app-bundnav, .bundnav, .notif-widget { display: none !important; } .kun-print { display: block !important; } html, body { background: #fff !important; } /* Bevar brandfarver på tryk — kort, badges og den mørke boks trykkes i farve */ body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .container { max-width: none !important; margin: 0 !important; padding: 0 !important; } .page-header .rolle, .page-header .undertekst { display: none !important; } .page-header h1 { margin-top: 0 !important; color: #1a2b4a !important; } .card { box-shadow: none !important; } /* Undgå at kort/blokke/tabeller knækkes midt over to sider */ .card, table, tr, .mf-mork, .container [style*="border-radius"] { break-inside: avoid; } /* Interaktive drill-links ("se skader →") skjules på tryk */ .stat-drill-hint { display: none !important; } a { text-decoration: none !important; color: inherit !important; } @page { margin: 13mm; } } /* ============================================================ SIDEBAR-LAYOUT — operatør-siden (mægler/skadeschef/behandler). Genbruger topbar-HTML'en (.topbar-brand/.topbar-nav/.topbar-hoejre); skifter kun rammen til en lodret sidebar. Kunde-roller = uændret topbar. ============================================================ */ body.har-sidebar{ margin:0; height:100vh; display:flex; flex-direction:column; overflow:hidden; } .app-shell{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:224px 1fr; } .app-main{ min-height:0; overflow:auto; background:var(--bg-body); } .sidebar{ flex-direction:column; align-items:stretch; gap:0; padding:0; height:100%; min-height:0; overflow:hidden; flex-wrap:nowrap; } .sidebar .topbar-brand{ padding:14px 16px 11px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; } .sidebar .topbar-brand .logo{ font-family:var(--font-sans); font-style:normal; font-weight:700; font-size:16px; letter-spacing:.2px; } .sidebar .topbar-brand .divider{ display:none; } .sidebar .topbar-brand .subtitle{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-left:7px; } .sidebar .topbar-nav{ flex:1 1 auto; min-height:0; flex-direction:column; align-items:stretch; gap:1px; margin:0; padding:8px 9px 12px; overflow-y:auto; overflow-x:hidden; } .sidebar .topbar-nav a{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:8px; font-size:13px; } .sidebar .topbar-nav a.aktiv{ background:rgba(255,255,255,.14); font-weight:600; } .sidebar .sb-grp{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.38); padding:12px 11px 4px; } .sidebar .topbar-hoejre{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:7px; margin:0; padding:10px 13px; border-top:1px solid rgba(255,255,255,.08); white-space:normal; flex-shrink:0; } .sidebar .mode-switch{ flex-basis:100%; justify-content:center; } /* Brugernavn-linket fylder resten af rækken, venstrestillet og kompakt */ .sidebar .topbar-hoejre > a[href="/profil.php"]:not(.topbar-avatar){ flex:1 1 auto; min-width:0; text-align:left !important; overflow:hidden; } .sidebar .topbar-hoejre > a[href="/profil.php"]:not(.topbar-avatar) div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar .topbar-hoejre .notif-dropdown{ right:auto; left:0; } /* ── Bruger-chip i sidebarens bund: kun navn + avatar + log ud ───────────── Konto-tingene (mode-switch, sprog, notifikationer) er flyttet op i topstrippen, så foden bliver lav og rolig i stedet for en klemt stak. ── */ .sidebar .sb-foot{ flex-shrink:0; display:flex; align-items:center; gap:9px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08); } .sidebar .sb-foot .topbar-avatar{ order:-1; flex:none; } .sidebar .sb-foot .bruger-navn{ flex:1 1 auto; min-width:0; text-align:left; } .sidebar .sb-foot .bruger-navn div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar .sb-foot .log-ud{ flex:none; padding:5px 9px !important; font-size:12px !important; } /* ── Topstrip: tynd konto-/kontekst-linje øverst i indholdet (operatør) ────── Samme petrol-chrome som sidebaren, så rammen hænger sammen; de hvide kontroller (mode-switch, sprog, klokke) virker uændret på den mørke bund. ── */ .app-strip{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:48px; flex-shrink:0; padding:0 20px; background:var(--navy); color:#fff; border-bottom:1px solid rgba(0,0,0,.14); position:sticky; top:0; z-index:30; } .app-strip .strip-crumb{ font-family:var(--font-sans); font-style:normal; font-weight:600; font-size:14px; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .app-strip .strip-hoejre{ display:flex; align-items:center; gap:10px; flex:none; } .app-strip .strip-hoejre > a{ white-space:nowrap; } .app-strip .mode-switch{ flex-basis:auto; margin:0; } .app-strip .notif-dropdown{ right:0; left:auto; } /* Mobil: fald tilbage til vandret bjælke i toppen */ @media(max-width:820px){ body.har-sidebar{ height:auto; overflow:visible; display:block; } .app-shell{ display:block; } .sidebar{ flex-direction:row; align-items:center; height:auto; overflow:visible; flex-wrap:wrap; } .sidebar .topbar-nav{ flex-direction:row; overflow-x:auto; padding:8px; } .sidebar .topbar-nav a{ white-space:nowrap; } .sidebar .sb-foot{ border-top:none; padding:6px 12px; margin-left:auto; } .sidebar .sb-foot .bruger-navn{ display:none; } .sidebar .sb-grp{ display:none; } .app-main{ overflow:visible; } .app-strip{ position:static; height:auto; flex-wrap:wrap; padding:8px 14px; gap:10px; } .app-strip .strip-crumb{ display:none; } }