/* Screen-reader only (visually hidden but accessible) */ .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; } /* Adrbog.com Web — Design tokens from gui/theme.py */ :root { --blue: #008CD7; --blue-hover: #006FA8; --link: #006FA8; /* link/clickable TEXT — brand #008CD7 is 3.66:1 (fails AA); this is 5.47:1 on white (F11) */ --blue-light: #E8F4FC; --blue-pale: #F2F9FD; --white: #FFFFFF; --gray-50: #F8F9FA; --gray-100: #F0F1F3; --gray-200: #E2E4E8; --gray-300: #C8CCD2; --gray-500: #6B7280; --gray-700: #374151; --gray-800: #1F2937; --dark: #131214; --orange: #F97316; --orange-light: #FFF7ED; --orange-dark: #C2410C; --danger: #DC2626; --danger-bg: #FEF2F2; --success: #059669; --success-bg: #D1FAE5; --warning-bg: #FEF3C7; --definition-bg: #D1FAE5; --definition-text: #065F46; --highlight: #FFDD57; --radius: 6px; --radius-sm: 4px; --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ── Semantic theme tokens (light defaults; dark overrides below) ────── Structural surfaces/ink/borders route through these so the whole app + the SEO pages can switch light↔dark from one place. Brand accents (--blue/--orange/--danger/--success) are intentionally theme-invariant. */ --bg: var(--white); /* page background */ --surface: var(--white); /* cards, panels, search box */ --surface-2: var(--gray-50); /* secondary surface / hover */ --surface-3: var(--gray-100); /* tertiary fill / striping */ --text: var(--gray-800); /* primary body text */ --text-muted: var(--gray-500); /* secondary text */ --border: var(--gray-200); /* hairlines / dividers */ --border-strong: var(--gray-300); --header-bg: var(--dark); /* top bar — dark in both themes */ --header-text: #FFFFFF; /* ink on the dark header bar */ --on-accent: #FFFFFF; /* ink on blue/orange/danger fills */ --link-color: var(--link); /* themeable link text */ --shadow: rgba(0,0,0,0.12); } /* Dark theme. Default follows the OS via prefers-color-scheme (unless the user forced light); an explicit choice via the toggle sets data-theme on and is stored in localStorage (NOT a cookie → SEO pages stay edge-cacheable). The dark palette is the existing SEO-page palette so both surfaces share it. */ /* The dark palette re-maps the base tokens (--white, gray ramp, pastel tints, link) so the app's existing var(--white)/var(--gray-*) usages flip in one place. White INK is pinned to literal #fff above, so flipping --white only affects surfaces. The header keeps var(--dark). Brand hues (blue/orange/ danger/success) stay; only their pale tint backgrounds get dark variants. NOTE: this block is duplicated verbatim in the @media (prefers-color-scheme: dark) block below — keep the two in sync (plain CSS, no preprocessor). */ :root[data-theme="dark"] { --bg: #0F172A; --surface: #1E293B; --surface-2: #243348; --surface-3: #1A2433; --text: #E2E8F0; --text-muted: #94A3B8; --border: #334155; --border-strong: #475569; --shadow: rgba(0,0,0,0.5); --header-bg: #0B1220; --white: #1E293B; --gray-50: #1A2433; --gray-100: #243348; --gray-200: #334155; --gray-300: #3F4D63; --gray-500: #94A3B8; --gray-700: #CBD5E1; --gray-800: #E2E8F0; --link: #4DABF0; --blue-hover: #6CC0FF; --link-color: #4DABF0; --blue-light: #16324A; --blue-pale: #13283B; --orange-light: #3A2410; --orange-dark: #FDBA74; --definition-bg: #0F3324; --definition-text: #86EFAC; --success-bg: #0F3324; --warning-bg: #3A3410; --danger-bg: #3A1717; --highlight: rgba(184,134,11,.22); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F172A; --surface: #1E293B; --surface-2: #243348; --surface-3: #1A2433; --text: #E2E8F0; --text-muted: #94A3B8; --border: #334155; --border-strong: #475569; --shadow: rgba(0,0,0,0.5); --header-bg: #0B1220; --white: #1E293B; --gray-50: #1A2433; --gray-100: #243348; --gray-200: #334155; --gray-300: #3F4D63; --gray-500: #94A3B8; --gray-700: #CBD5E1; --gray-800: #E2E8F0; --link: #4DABF0; --blue-hover: #6CC0FF; --link-color: #4DABF0; --blue-light: #16324A; --blue-pale: #13283B; --orange-light: #3A2410; --orange-dark: #FDBA74; --definition-bg: #0F3324; --definition-text: #86EFAC; --success-bg: #0F3324; --warning-bg: #3A3410; --danger-bg: #3A1717; --highlight: rgba(184,134,11,.22); } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ── Disclaimer ──────────────────────────────────── */ .disclaimer-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; } .disclaimer-overlay.hidden { display: none; } .disclaimer-card { background: var(--white); border-radius: var(--radius); max-width: 520px; padding: 40px 32px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .disclaimer-title { font-size: 24px; font-weight: 700; color: var(--link); margin-bottom: 4px; } .disclaimer-subtitle { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; } .disclaimer-text { text-align: left; font-size: 13px; line-height: 1.6; color: var(--gray-700); margin-bottom: 24px; } .disclaimer-text p { margin-bottom: 10px; } .disclaimer-beta { background: var(--blue-pale); border-left: 3px solid var(--blue); padding: 10px 14px; margin-bottom: 24px; text-align: left; font-size: 12px; line-height: 1.5; color: var(--gray-700); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .disclaimer-beta p { margin: 0; } .disclaimer-accept { background: #006FA8; /* AA: 5.47:1 for white text. --blue #008CD7 is 3.66:1 (fails AA); fixed value so it stays AA in dark theme too. */ color: #fff; border: none; padding: 12px 32px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s; } .disclaimer-accept:hover { background: #005F99; } /* darker AA hover (6.78:1), theme-invariant */ /* ── Header ──────────────────────────────────────── */ .header-bar { background: var(--dark); height: 56px; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; } .header-title { color: #fff; font-size: 20px; font-weight: 700; } .header-subtitle { color: #C8CCD2; font-size: 11px; margin-left: 8px; } .header-spacer { flex: 1; } /* ── Announcement bar (admin-controlled) ──────────── */ .announce-bar { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 12px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid transparent; line-height: 1.3; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .announce-bar:hover { filter: brightness(1.1); } .announce-icon { flex-shrink: 0; font-size: 14px; } .announce-text { overflow: hidden; text-overflow: ellipsis; } .announce-info { background: rgba(0, 140, 215, 0.18); color: #cfe9f8; border-color: rgba(0, 140, 215, 0.5); } .announce-warning { background: rgba(249, 115, 22, 0.2); color: #fde0c4; border-color: rgba(249, 115, 22, 0.55); } .announce-maintenance { background: rgba(220, 38, 38, 0.2); color: #fcd5d5; border-color: rgba(220, 38, 38, 0.6); } a.announce-bar { cursor: pointer; } div.announce-bar { cursor: default; } .header-stats { color: rgba(255,255,255,0.6); font-size: 11px; } .header-contact-btn { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; font-family: var(--font); cursor: pointer; margin-right: 8px; transition: color 0.15s, border-color 0.15s; } .header-contact-btn:hover { color: #fff; border-color: var(--orange); } .header-feedback-btn { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; font-family: var(--font); cursor: pointer; margin-right: 12px; transition: color 0.15s, border-color 0.15s; } .header-feedback-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); } /* Header overflow menu (Hjælp / Changelog / Kontakt / Tema / Feedback) */ .header-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 180px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 9997; padding: 4px; display: flex; flex-direction: column; } .header-menu.hidden { display: none; } .header-menu-item { background: transparent; border: none; color: var(--gray-800); text-align: left; padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 4px; white-space: nowrap; } .header-menu-item:hover { background: var(--blue-pale); color: var(--text); } /* ── Feedback modal ─────────────────────────────── */ .feedback-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; } .feedback-overlay.hidden { display: none; } /* Fragtbrev builder modal — a large full-screen-ish card */ .fragtbrev-card { background: var(--white); border-radius: var(--radius); width: 92vw; max-width: 960px; height: 90vh; box-shadow: 0 8px 32px rgba(0,0,0,0.35); display: flex; flex-direction: column; overflow: hidden; } .fragtbrev-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .fb-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .fb-box { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; } .fb-label { font-size: 12px; font-weight: 600; color: var(--gray-800); } .fb-input { padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--white); color: var(--text); } .fb-input:focus { outline: 2px solid var(--blue); outline-offset: -1px; } .fb-subrow { display: flex; gap: 8px; } .fb-subrow .fb-input { flex: 1; } .fb-subrow .fb-postnr { flex: 0 0 90px; } .fb-goods { border-top: 1px solid var(--gray-200); padding-top: 12px; margin-top: 4px; } .fb-goods-title { font-size: 14px; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; } .fb-antal-input { padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 13px; width: 64px; font-family: inherit; background: var(--white); color: var(--text); } .fb-art-input, .fb-bem-input { padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 13px; min-width: 110px; font-family: inherit; background: var(--white); color: var(--text); } .fb-bem-note { font-size: 11px; color: var(--gray-500); margin-top: 2px; } /* Native controls (date picker, select dropdowns) follow the dark theme inside the modal */ :root[data-theme="dark"] .fragtbrev-card { color-scheme: dark; } .fb-goods-list { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; } .fb-goods-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); } .fb-goods-line { font-size: 12.5px; color: var(--text); } .fb-adr-line { font-family: 'Courier New', monospace; font-weight: 600; } .fb-packages, .fb-qty { color: var(--gray-500); } .fb-goods-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .fb-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .fb-waste-label { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--gray-800); } .fb-checkbox-label { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--gray-800); } .header-fragtbrev-btn { background: var(--blue); color: #fff; border-color: var(--blue); } .header-fragtbrev-btn:hover { background: var(--blue-hover); color: #fff; border-color: var(--blue-hover); } .fragtbrev-btn-wrap { position: relative; display: inline-block; } .fragtbrev-beta { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; color: #fff; background: var(--orange); padding: 1px 3px; border-radius: 2px; pointer-events: none; } .feedback-card { background: var(--white); border-radius: var(--radius); width: 420px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .feedback-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 2px solid var(--blue); } .feedback-header h2 { font-size: 16px; font-weight: 700; color: var(--text); } .feedback-close { background: none; border: none; font-size: 22px; color: var(--gray-500); cursor: pointer; padding: 0 4px; line-height: 1; } .feedback-close:hover { color: var(--danger); } .feedback-field { padding: 8px 20px; } .feedback-field label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; } .feedback-field textarea, .feedback-field input[type="email"] { width: 100%; padding: 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font); resize: vertical; } .feedback-field textarea:focus, .feedback-field input[type="email"]:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px rgba(0,140,215,0.15); } .feedback-field select { width: 100%; } .feedback-actions { padding: 12px 20px 20px; } .feedback-submit { background: var(--blue); color: #fff; border: none; padding: 10px 24px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background 0.15s; } .feedback-submit:hover { background: var(--blue-hover); } .feedback-success { padding: 32px 20px; text-align: center; color: var(--success); font-size: 16px; font-weight: 600; } .feedback-success-sub { color: var(--gray-500); font-size: 13px; font-weight: 400; margin-top: 8px; } /* ── Changelog ───────────────────────────────────── */ .changelog-entry { margin-bottom: 16px; } .changelog-entry:last-child { margin-bottom: 0; } .changelog-date { font-weight: 700; font-size: 13px; color: var(--link); margin-bottom: 4px; } .changelog-entry ul { margin: 0; padding-left: 18px; color: var(--gray-700); } .changelog-entry li { margin-bottom: 3px; } /* ── Search ──────────────────────────────────────── */ .search-container { background: var(--white); padding: 10px 16px; flex-shrink: 0; position: relative; } .search-frame { display: flex; align-items: center; border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 4px 8px; transition: border-color 0.15s; } .search-frame:focus-within { border-color: var(--link); } .search-input { flex: 1; border: none; outline: none; font-size: 15px; padding: 6px 4px; color: var(--gray-800); background: transparent; } .intent-badge { background: var(--blue-light); color: var(--link); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; white-space: nowrap; } .intent-badge:empty { display: none; } /* ── Autocomplete ────────────────────────────────── */ .autocomplete-dropdown { position: absolute; top: 100%; left: 16px; right: 16px; z-index: 100; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 320px; overflow-y: auto; } .autocomplete-dropdown.hidden { display: none; } .autocomplete-list { list-style: none; } .autocomplete-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--gray-100); } .autocomplete-item:hover, .autocomplete-item.ac-active { background: var(--blue-pale); } /* Recently viewed dropdown */ .recent-dropdown { position: absolute; top: 100%; right: 0; width: 320px; max-height: 400px; overflow-y: auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 9997; } .recent-dropdown.hidden { display: none; } .recent-item { padding: 8px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--gray-100); } .recent-item:hover { background: var(--blue-pale); } .recent-un { font-weight: 700; font-size: 12px; white-space: nowrap; } .recent-name { font-size: 12px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-empty { padding: 16px; text-align: center; color: var(--gray-500); font-size: 12px; } .ac-text { flex: 1; font-size: 13px; } .ac-detail { color: var(--gray-500); font-size: 11px; } .ac-type { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 8px; text-transform: uppercase; } .ac-type-un { background: var(--blue-light); color: var(--link); } .ac-type-substance { background: var(--gray-100); color: var(--gray-700); } .ac-type-fts { background: var(--gray-100); color: var(--gray-500); } .ac-type-section { background: var(--orange-light); color: var(--orange-dark); } /* ── Filter bar ──────────────────────────────────── */ .filter-bar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; } .filter-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; } .filter-select { padding: 4px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 12px; background: var(--white); color: var(--gray-800); cursor: pointer; max-width: 160px; } .csv-btn { margin-left: auto; padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--link); border: 1px solid var(--blue); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; } .csv-btn:hover { background: var(--blue-light); } .csv-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ── Main layout ─────────────────────────────────── */ .main-layout { display: grid; grid-template-columns: 250px 1fr 1fr; flex: 1; overflow: hidden; } /* ── TOC sidebar ─────────────────────────────────── */ .toc-sidebar { background: var(--gray-50); overflow-y: auto; border-right: 1px solid var(--gray-200); } .header-bar .toc-toggle-btn { display: none; } /* hamburger — shown only as the TOC drawer toggle at <=1024 */ .toc-backdrop { display: none; } .toc-header { color: var(--gray-500); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 10px 12px 6px; } .toc-header-national { color: var(--orange); border-top: 1px solid var(--gray-200); margin-top: 8px; } .toc-list { list-style: none; padding: 0 4px; } .toc-item { padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toc-item:hover { background: var(--blue-light); } .toc-level-0 { padding-left: 6px; font-weight: 600; } .toc-level-1 { padding-left: 6px; font-weight: 600; } .toc-level-2 { padding-left: 20px; } .toc-level-3 { padding-left: 32px; font-size: 10.5px; } .toc-level-4 { padding-left: 44px; font-size: 10.5px; } .toc-parent { user-select: none; } .toc-parent:hover { background: var(--blue-light); } .toc-arrow { display: inline-block; font-size: 8px; margin-right: 4px; transition: transform 0.15s; color: var(--gray-500); } .toc-parent.open > .toc-arrow { transform: rotate(90deg); } .toc-child.hidden { display: none; } /* ── Center panel ────────────────────────────────── */ .center-panel { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--gray-200); } .tab-bar { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; } .nav-btn { background: none; border: none; color: var(--gray-300); font-size: 11px; padding: 6px 8px; cursor: pointer; line-height: 1; } .nav-btn:not(:disabled) { color: var(--gray-700); } .nav-btn:not(:disabled):hover { color: var(--link); } .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Global focus-visible + disabled states */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } button:disabled { opacity: 0.45; cursor: not-allowed; } .tab { padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--gray-800); border: none; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; } .tab:hover { color: var(--link); } .tab.active { color: var(--link); border-bottom-color: var(--link); } .tab-content { display: none; flex: 1; overflow-y: auto; } .tab-content.active { display: flex; flex-direction: column; } /* ── Results ─────────────────────────────────────── */ #results { flex: 1; overflow-y: auto; padding: 4px; } .result-count { color: var(--gray-500); font-size: 11px; font-weight: 600; padding: 8px 12px 4px; } .results-header { padding: 8px 12px 4px; font-size: 11px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; } .results-count { font-weight: 600; } .load-more-container { padding: 12px; text-align: center; } .load-more-btn { background: var(--blue); color: #fff; border: none; padding: 8px 24px; border-radius: 4px; cursor: pointer; font-size: 13px; } .load-more-btn:hover { background: var(--blue-hover); } .results-intent { background: var(--gray-100); padding: 1px 8px; border-radius: 4px; font-size: 10px; } .result-card { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background 0.1s; } .result-card:hover { background: var(--blue-pale); } .result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .result-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .badge-definition { background: var(--definition-bg); color: var(--definition-text); } .badge-table-a { background: var(--blue-light); color: var(--link); } .badge-toc { background: var(--gray-100); color: var(--gray-700); } .badge-national { background: var(--orange-light); color: var(--orange-dark); } .badge-page { background: var(--gray-100); color: var(--gray-500); } .result-title { font-weight: 600; font-size: 13px; color: var(--gray-800); } .result-snippet { font-size: 12px; color: var(--gray-500); line-height: 1.4; margin-bottom: 4px; } .result-snippet mark { background: var(--highlight); color: var(--gray-800); padding: 0 2px; border-radius: 2px; } .result-meta { display: flex; flex-wrap: wrap; gap: 4px; } .meta-tag { font-size: 10px; padding: 2px 6px; background: var(--gray-100); border-radius: var(--radius-sm); color: var(--gray-700); cursor: pointer; } .meta-link { cursor: pointer; } .meta-link:hover { background: var(--blue-light); color: var(--link); } /* Transport-category + tunnel + frimængde chips. Same base as .meta-tag, with category-specific accents. */ .transport-cat-chip { background: rgba(0, 140, 215, 0.12); color: var(--link); font-weight: 600; } .transport-cat-chip:hover { background: rgba(0, 140, 215, 0.22); } .tunnel-chip { background: rgba(107, 114, 128, 0.15); color: var(--gray-700); font-weight: 600; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; letter-spacing: 0.3px; } .tunnel-chip:hover { background: rgba(0, 140, 215, 0.18); color: var(--link); } .frimaengde-chip { background: rgba(5, 150, 105, 0.12); color: #047857; font-weight: 600; } .frimaengde-chip:hover { background: rgba(5, 150, 105, 0.22); } .frimaengde-chip.footnote-a { background: rgba(249, 115, 22, 0.15); color: #c2410c; border: 1px solid rgba(249, 115, 22, 0.4); } .frimaengde-chip.footnote-a:hover { background: rgba(249, 115, 22, 0.25); } .nos-warning { font-size: 10px; padding: 2px 6px; background: var(--warning-bg); border: 1px solid #f5a623; border-radius: var(--radius-sm); color: #8a5a00; font-weight: 600; cursor: pointer; } .nos-warning:hover { background: #fde2a0; } /* ── Editorial notes (Layer 2, 2026-07-11) ────────────────────────────── Curated 'Redaktionel anmærkning' blocks rendered ADJACENT to source text (bestemmelse/substance pages, detail cards, definition result cards). Visually distinct by design: the source text stays exactly as printed; these explain verified print errors. Semantic tokens → both themes. */ .editorial-note { margin: 10px 0 4px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.45; color: var(--text); } .editorial-note .editorial-note-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px; } .editorial-note p { margin: 0; } /* Inline clickable code references (detail view, tank expansions, etc.) */ .code-link { cursor: pointer; color: var(--link); border-bottom: 1px dotted var(--link); /* opaque — the rgba(.4) underline was ~1.65:1 (F11) */ transition: color 120ms, border-bottom-color 120ms; } .code-link:hover { color: var(--blue-hover, #006fa5); border-bottom-color: var(--link); } .code-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; } .label-sep { color: var(--gray-500); margin: 0 2px; } /* .detail-status: status-phrase / dash values that look like they could be clickable chips but aren't (e.g. "IKKE OMFATTET AF BESTEMMELSERNE I ADR" in Emballagegruppe, or "-" in Transportkategori tunnel). Same gray as .label-sep plus italics + default cursor so users know these are notes, not lookup targets. */ .detail-status { color: var(--gray-500); font-style: italic; cursor: default; } .meta-label { font-size: 10px; color: var(--gray-500); font-weight: 600; padding: 2px 2px 2px 0; } .empty-state { text-align: center; padding: 60px 20px; color: var(--gray-500); } .empty-state .hint { font-size: 12px; margin-top: 8px; color: var(--gray-500); } .empty-browse { margin-top: 34px; } .empty-browse-lead { font-size: 13px; color: var(--gray-500); margin: 0 0 12px; } .empty-browse-primary { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; } .empty-browse-primary a { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 16px; } .empty-browse-primary a:hover { border-color: var(--blue); } .empty-browse-classes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .empty-browse-classes a { font-size: 12px; color: var(--blue); text-decoration: none; border: 1px solid var(--gray-200); border-radius: 6px; padding: 4px 10px; } .empty-browse-classes a:hover { border-color: var(--blue); } /* ── Detail card ─────────────────────────────────── */ .detail-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); margin: 8px; position: relative; } .detail-header { font-size: 18px; font-weight: 700; padding: 12px 12px 8px; background: var(--blue-pale); border-bottom: 2px solid var(--blue); border-radius: var(--radius) var(--radius) 0 0; color: var(--text); } .detail-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gray-500); } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; } .detail-field { padding: 4px 8px; } .detail-label { display: block; color: var(--gray-500); font-weight: 600; font-size: 11px; } .detail-value { display: block; font-size: 13px; color: var(--gray-800); } .detail-actions { padding: 8px 12px 12px; display: flex; gap: 8px; flex-wrap: wrap; } .btn-secondary { padding: 6px 14px; background: transparent; color: var(--link); border: 1px solid var(--blue); border-radius: var(--radius); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 120ms; } .btn-secondary:hover { background: var(--blue-light); } /* ── PDF viewer ──────────────────────────────────── */ .pdf-viewer { display: flex; flex-direction: column; background: #4A4E54; overflow: hidden; } .viewer-toolbar { display: flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--gray-800); flex-shrink: 0; min-height: 36px; } .viewer-btn { background: transparent; color: var(--gray-300); border: 1px solid var(--gray-700); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 13px; cursor: pointer; min-width: 28px; } .viewer-btn:hover { background: var(--gray-700); color: #fff; } .viewer-page-label, .viewer-zoom-label { color: var(--gray-300); font-size: 11px; padding: 0 8px; white-space: nowrap; } .viewer-spacer { width: 16px; } .viewer-source-select { background: var(--gray-700); color: var(--gray-300); border: 1px solid var(--gray-700); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 11px; } .viewer-scroll { flex: 1; overflow-y: auto; padding: 8px; } .pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 8px; } .pdf-page-img { max-width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .pdf-page-svg { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.3); overflow: hidden; line-height: 0; max-width: 100%; } .pdf-page-svg svg { display: block; width: 100%; height: 100%; } .pdf-page-svg rect.adr-highlight { pointer-events: none; } .pdf-page-error { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; background: var(--gray-100); color: var(--gray-500); font-size: 13px; cursor: pointer; /* 28-R5: it's a retry button (role=button + keyboard) */ cursor: pointer; border-radius: 4px; } /* ── Calculator ──────────────────────────────────── */ .calc-panel { padding: 0; } .calc-title { font-size: 16px; font-weight: 700; padding: 12px 16px 4px; color: var(--text); } .calc-subtitle { font-size: 11px; color: var(--gray-500); padding: 0 16px 8px; } .calc-add-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; } .calc-un-input { width: 80px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; background: var(--white); color: var(--text); } .calc-qty-input { width: 90px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; background: var(--white); color: var(--text); } .calc-unit { color: var(--gray-500); font-size: 12px; } .calc-error { color: var(--danger); font-size: 12px; padding: 4px 16px; font-weight: 600; } .calc-entries { padding: 4px 16px; } .calc-entry { display: flex; align-items: center; gap: 8px; background: var(--gray-100); border-radius: var(--radius-sm); padding: 8px; margin: 2px 0; } .calc-un { font-weight: 700; color: var(--link); font-size: 13px; } .calc-name { flex: 1; font-size: 12px; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-cat { color: var(--gray-500); font-size: 11px; font-weight: 600; } .calc-qty { font-size: 12px; color: var(--gray-800); } .calc-pts { font-weight: 700; font-size: 12px; color: var(--gray-800); } .calc-pts-unlimited { color: var(--danger); } .calc-pts-exempt { color: var(--success); } .calc-exempt-rule { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 4px; } /* Wrapper for the variant+mode selects (rebuilt as a unit by /calc/modes). display:contents keeps the selects as DIRECT flex items of .calc-add-form — without it the span is one flex cell and the selects lose the form's gap and flex-shrink. */ .calc-selects { display: contents; } .calc-mode-select { flex: 0 1 auto; min-width: 180px; max-width: 280px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 12px; background: var(--white); color: var(--text); } .calc-info-lq, .calc-info-eq { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-300); padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 600; cursor: help; } .calc-5-5-3 { background: var(--orange-light); color: var(--orange-dark); border: 1px solid var(--orange); padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 700; margin-left: 4px; cursor: help; } .calc-info-lq:hover, .calc-info-eq:hover { background: var(--blue-pale); color: var(--blue-hover); border-color: var(--link); } .calc-fna { background: var(--blue-pale); color: var(--blue-hover); border: 1px solid var(--blue); padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; } .calc-overcap { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; margin-left: 4px; } .calc-remove { background: none; border: none; color: var(--danger); font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 4px; } .calc-total { font-size: 20px; font-weight: 700; padding: 12px 16px; } .calc-total-ok { color: var(--success); } .calc-total-danger { color: var(--danger); } .calc-verdict { font-size: 14px; font-weight: 600; padding: 4px 16px 12px; } .verdict-ok { color: var(--success); } .verdict-danger { color: var(--danger); } .calc-clear { background: none; border: none; color: var(--gray-500); font-weight: 600; padding: 4px 16px; cursor: pointer; } /* ── Compare ─────────────────────────────────────── */ .compare-panel { padding: 16px; } .compare-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .compare-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .compare-input { width: 100px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; } .compare-vs { color: var(--gray-500); font-weight: 600; } .compare-table { width: 100%; border-collapse: collapse; font-size: 12px; } .compare-table th { background: var(--gray-50); padding: 8px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--gray-200); } .compare-table td { padding: 6px 8px; border-bottom: 1px solid var(--gray-100); } .compare-diff { background: var(--highlight); } .compare-label { color: var(--gray-500); font-weight: 600; } .compare-hint { color: var(--gray-500); font-style: italic; } .compare-link { color: var(--link); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; } .compare-link:hover { color: var(--blue-hover); text-decoration-style: solid; } .compare-actions { display: flex; gap: 8px; padding: 12px 0; } /* ── Buttons ─────────────────────────────────────── */ .btn-primary { background: var(--blue); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer; } .btn-primary:hover { background: var(--blue-hover); } /* ── Status bar ──────────────────────────────────── */ .status-bar { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 4px 12px; font-size: 11px; color: var(--gray-500); flex-shrink: 0; display: flex; justify-content: space-between; } .visitor-count { color: var(--gray-500); /* was --gray-300 (1.6:1) — privacy link inherits this (F15) */ } .footer-company { color: var(--gray-500); } /* ── Responsive ──────────────────────────────────── */ @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr 1fr; } /* TOC becomes an off-canvas drawer, toggled by the header hamburger */ .header-bar .toc-toggle-btn { display: inline-flex; align-items: center; margin-right: 4px; } .toc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 84vw; z-index: 1001; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35); } .toc-sidebar.open { transform: translateX(0); } .toc-backdrop.open { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.45); } } @media (max-width: 768px) { .main-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .center-panel { max-height: 50vh; overflow-y: auto; } .pdf-viewer { max-height: 50vh; } .filter-bar { flex-wrap: wrap; } .header-bar { height: auto; min-height: 44px; flex-wrap: wrap; padding: 6px 10px; gap: 4px; } .header-title { font-size: 16px; } .header-subtitle { display: none; } .announce-bar { flex-basis: 100%; order: 99; margin: 4px 0 0 0; white-space: normal; } .header h1 { font-size: 18px; } .header-stats { display: none; } .header-contact-btn, .header-feedback-btn { padding: 3px 6px; font-size: 10px; margin-right: 4px; } } /* ── Scrollbar styling ───────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } /* Hazard label icons in results */ .label-icon { height: 28px; vertical-align: middle; margin: 0 1px; } .label-icon-lg { height: 36px; vertical-align: middle; margin: 0 2px; } .result-labels { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--gray-200); flex: 1; min-width: 0; } .result-footer { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .result-footer .result-labels { border-top: none; margin-top: 0; padding-top: 0; } .result-detail-btn { margin-left: auto; background: transparent; border: 1px solid transparent; color: var(--link); font-size: 12px; font-weight: 600; font-family: var(--font); padding: 6px 10px; min-height: 28px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; } .result-detail-btn:hover { text-decoration: underline; background: rgba(0, 140, 215, 0.08); } .result-detail-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Detail card nested inside a result card (Vis mere expansion). The result-card's onclick navigates to PDF; without this guard, any click inside the expanded detail (other than chips, which already stopPropagation) would fire navigation. */ .result-card > .detail-card { margin-top: 8px; border-top: 1px solid var(--gray-200); padding-top: 8px; background: transparent; box-shadow: none; border-radius: 0; cursor: default; } .result-card > .detail-card .detail-header, .result-card > .detail-card .detail-close { display: none; } .detail-labels { display: inline-block; margin-left: 8px; } /* SP/PI definition text formatting */ .definition-text { white-space: pre-line; max-height: 200px; overflow-y: auto; } /* Cookie consent overlay */ .cookie-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; } .cookie-overlay.hidden { display: none; } /* Global error toast (F3) — a persistent role="alert" live region, status-keyed Danish copy */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 90vw; background: var(--gray-800); color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); font-size: 14px; z-index: 11000; } .toast.hidden { display: none; } /* F30: native "Gå til side" — centered in the top layer, styled ::backdrop */ .goto-dialog { border: none; border-radius: 8px; padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); min-width: 240px; margin: auto; /* re-centre in the top layer (a global margin reset zeroes the UA dialog centering) */ } .goto-dialog::backdrop { background: rgba(0, 0, 0, 0.4); } .goto-dialog label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--gray-800); } .goto-dialog input { width: 100%; padding: 8px; border: 1px solid var(--gray-200); border-radius: 4px; font-size: 16px; box-sizing: border-box; } .goto-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .goto-actions button { padding: 8px 16px; border-radius: 4px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); cursor: pointer; font-size: 14px; min-height: 36px; } .goto-actions button.goto-ok { background: var(--blue); color: #fff; border-color: var(--blue); } .cookie-card { background: var(--white); border-radius: var(--radius); max-width: 420px; padding: 32px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .cookie-title { font-size: 20px; font-weight: 700; color: var(--link); margin-bottom: 12px; } .cookie-description { font-size: 13px; line-height: 1.6; color: var(--gray-700); margin-bottom: 24px; } .cookie-description a { color: var(--link); } .cookie-buttons { display: flex; gap: 10px; justify-content: center; } .cookie-accept { background: var(--blue); color: #fff; border: none; padding: 10px 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.15s; } .cookie-accept:hover { background: var(--blue-hover); } .cookie-reject { background: transparent; color: var(--gray-500); border: 1px solid var(--gray-200); padding: 10px 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; } .cookie-reject:hover { background: var(--gray-50); } /* ── Basket add button ──────────────────────────── */ .basket-add { float: right; background: var(--blue); color: #fff; border: none; width: 24px; height: 24px; border-radius: 4px; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1; } .basket-add:hover { background: var(--blue-hover); } /* F25: comfortable touch targets on coarse (touch) pointers. The 24px floor (WCAG 2.2 SC 2.5.8) is unconditional above; 44px here is the AAA SC 2.5.5 enhancement, and it reverses the mobile header-button shrink rather than shrinking targets further. */ @media (pointer: coarse) { .basket-add { min-width: 44px; min-height: 44px; } .header-contact-btn, .header-feedback-btn { min-height: 44px; padding: 10px 14px; font-size: 13px; } .filter-select, .viewer-btn { min-height: 44px; } } .basket-badge { background: var(--orange); color: #000; border-radius: 8px; padding: 0 5px; font-size: 10px; margin-left: 4px; } /* ── Checklist ──────────────────────────────────── */ .checklist-empty { padding: 24px; text-align: center; color: var(--gray-500); } .checklist-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--gray-100); } .checklist-header h2 { font-size: 14px; margin: 0; } .checklist-print { background: var(--blue); color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px; } .checklist-print:hover { background: var(--blue-hover); } .checklist-table-wrap { overflow-x: auto; } .checklist-table { width: 100%; border-collapse: collapse; font-size: 12px; } .checklist-table th { text-align: left; padding: 6px 8px; background: var(--gray-100); font-weight: 600; font-size: 11px; } .checklist-table td { padding: 6px 8px; border-bottom: 1px solid var(--gray-100); } .cl-un { font-weight: 700; white-space: nowrap; } .cl-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-label-icon { height: 20px; margin-right: 2px; } .cl-remove { background: none; border: none; color: var(--gray-500); cursor: pointer; font-size: 16px; } .cl-remove:hover { color: red; } .checklist-summary { padding: 12px; } .cl-section { margin-bottom: 16px; } .cl-section h3 { font-size: 12px; margin: 0 0 6px; color: var(--gray-500); } .cl-labels-row { display: flex; gap: 6px; flex-wrap: wrap; } .cl-verdict { padding: 8px 12px; border-radius: 4px; font-size: 13px; font-weight: 600; } .cl-danger { background: rgba(239,68,68,0.15); color: #f87171; } .cl-ok { background: rgba(34,197,94,0.15); color: #22c55e; } .cl-sp-list { display: flex; flex-wrap: wrap; gap: 4px; } .cl-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cl-hint { font-size: 12px; color: var(--gray-500); font-style: italic; } .checklist-actions { padding: 12px; border-top: 1px solid var(--gray-100); } .cl-clear { background: transparent; border: 1px solid var(--gray-200); color: var(--gray-500); padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px; } .cl-clear:hover { background: var(--gray-50); } /* ── Print ──────────────────────────────────────── */ @media print { /* The screen layout uses body { height: 100vh; overflow: hidden } plus several nested containers with overflow: hidden / auto to pin the app shell to the viewport. That clips print output to one page. Override every print-visible ancestor so content flows naturally across pages. */ html, body { height: auto !important; overflow: visible !important; } .main-layout, main, .tab-content, #results, .center-panel { height: auto !important; max-height: none !important; overflow: visible !important; } body { background: white; color: black; font-size: 11pt; } .header-bar, .toc-sidebar, .pdf-viewer, .viewer-toolbar, .status-bar, .cookie-overlay, .disclaimer-overlay, .feedback-overlay, #autocompleteDropdown, .filter-bar, .tab-bar { display: none !important; } .main-layout { display: block; } .center-panel { max-height: none; overflow: visible; max-width: 100%; } .result-card { break-inside: avoid; border-color: #ccc; background: white; color: black; } /* NB: no break-inside on .detail-card — the full card (fields + Tankvurdering with 60+ alternative tank codes) routinely exceeds one A4 page. Letting the browser flow it across pages is correct; sub-sections below have their own break-inside: avoid to keep related blocks together. */ .detail-card { background: white; color: black; } .compare-table { break-inside: avoid; } .calc-panel { break-inside: avoid; background: white; color: black; } .meta-tag { border-color: #999; color: #333; } a { text-decoration: none; color: black; } .label-icon { filter: none; } .detail-close, .detail-actions, .no-print { display: none !important; } /* Tankvurdering print styling: light bg, readable ink */ .tank-assessment { background: white !important; color: black !important; border: 1pt solid #aaa !important; break-inside: avoid; } .tank-assessment-title { color: black !important; } .tank-sub-header { color: #555 !important; } .tank-pos-row { background: #f5f5f5 !important; break-inside: avoid; } .tank-pos-idx { color: #666 !important; } .tank-pos-letter { color: #0066a0 !important; background: #e0eef6 !important; border: 0.5pt solid #b0cfe0 !important; } .tank-pos-name { color: #444 !important; } .tank-pos-meaning { color: black !important; } .tank-alt-chip { color: #0066a0 !important; background: #f0f6fc !important; border-color: #a0c0d8 !important; } .tank-col13-item { background: #f8f8f8 !important; border-left-color: #888 !important; } .tank-col13-code { color: #0066a0 !important; } .tank-col13-section, .tank-alternatives-note, .tank-alternatives-count { color: #666 !important; } .tank-col13-text, .tank-label { color: black !important; } .tank-code-value { color: black !important; background: #eee !important; } .tank-checker, .tank-plus-notice { break-inside: avoid; } .tank-plus-notice { background: #fff4e0 !important; border-left-color: #c68500 !important; color: #333 !important; } .tank-plus-notice strong { color: #c68500 !important; } /* Hide interactive form in print */ .tank-check-form, .tank-verdict-container { display: none !important; } .tank-checker h4::after { content: " (interaktiv - kun online)"; color: #888; font-weight: normal; } /* Linkified codes: remove the dotted underline, make them look like static refs */ .code-link { color: #0066a0 !important; border-bottom: none !important; cursor: default; } /* When user clicks Udskriv on a detail card: hide everything except that one card. Detail cards nest inside a result-card via toggleDetail (2026-05-07 inline-expand); the direct-child legacy-showDetail arm was removed 2026-07 (08-F2) together with the showDetail shim itself. */ body.printing-detail > *:not(.main-layout), body.printing-detail .main-layout > *:not(main):not(#results), body.printing-detail main > *:not(.tab-content), body.printing-detail #results > *:not(:has(.detail-card.print-target)) { display: none !important; } body.printing-detail #results > .result-card:has(.detail-card.print-target) { background: white !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body.printing-detail #results > .result-card:has(.detail-card.print-target) > *:not(.detail-card) { display: none !important; } body.printing-detail #results > .result-card:has(.detail-card.print-target) > .detail-card .detail-header { display: block !important; } body.printing-detail .detail-card { box-shadow: none !important; border: none !important; } body.printing-detail .detail-card .detail-header { font-size: 14pt; padding-bottom: 6pt; border-bottom: 1pt solid #333; } /* Print-only header/footer with source + timestamp */ body.printing-detail::before { content: "Adrbog.com"; display: block; font-size: 8pt; color: #666; padding-bottom: 4pt; border-bottom: 0.5pt solid #ccc; margin-bottom: 8pt; } } /* ============================================================ Tankvurdering (tank-hierarchy UI) — 2026-04-19 Styled to match existing .detail-card chrome. ============================================================ */ .tank-assessment-wrap { margin-top: 16px; } .tank-assessment-loading { padding: 12px; color: #888; font-style: italic; text-align: center; } .tank-assessment { margin-top: 16px; padding: 14px 16px; background: #1a1d23; border: 1px solid #2b303a; border-radius: 8px; color: #d5d5d5; } .tank-assessment-title { margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; color: #e0e0e0; display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; } .tank-assessment-title-text { display: inline-flex; align-items: center; gap: 8px; } .tank-assessment-actions { display: inline-flex; gap: 6px; } .tank-action-btn { padding: 4px 10px; font-size: 0.82rem; font-weight: 500; color: #b8dcff; background: rgba(70,130,200,0.15); border: 1px solid rgba(70,130,200,0.4); border-radius: 4px; cursor: pointer; transition: background 120ms; } .tank-action-btn:hover { background: rgba(70,130,200,0.35); color: #fff; } .tank-assessment-body > * + * { margin-top: 12px; } .tank-sub-header { font-size: 0.9rem; font-weight: 600; color: #cfcfcf; margin: 10px 0 6px 0; text-transform: uppercase; letter-spacing: 0.5px; } .tank-label { color: #9a9a9a; margin-right: 6px; font-size: 0.9rem; } .tank-code-value { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: #f0f0f0; padding: 2px 6px; background: rgba(70,130,200,0.18); border-radius: 4px; margin-right: 10px; } .tank-required { font-size: 1rem; margin-bottom: 10px; } .tank-warning-plus { background: #f5a623; color: #1a1a1a; font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: 0.85rem; } .tank-badge-megc { background: #6c7a89; color: #fff; font-weight: 600; padding: 1px 6px; border-radius: 4px; font-size: 0.85rem; } /* Position decoder grid */ .tank-decoder-grid { display: flex; flex-direction: column; gap: 4px; } .tank-decoder-section + .tank-decoder-section { margin-top: 8px; } .tank-pos-row { display: grid; grid-template-columns: 70px 36px 190px 1fr; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); font-size: 0.9rem; } .tank-pos-row + .tank-pos-row { margin-top: 3px; } .tank-pos-idx { color: #888; font-size: 0.8rem; } .tank-pos-letter { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #5ec1ff; text-align: center; background: rgba(94,193,255,0.12); border-radius: 3px; padding: 2px 0; } .tank-pos-name { color: #b8b8b8; font-size: 0.85rem; } .tank-pos-meaning { color: #d5d5d5; } /* (+) notice */ .tank-plus-notice { padding: 10px 12px; background: rgba(245,166,35,0.12); border-left: 3px solid #f5a623; border-radius: 4px; color: #e8c68a; font-size: 0.9rem; line-height: 1.45; } .tank-plus-notice strong { color: #f5a623; } /* Alternatives chip list */ .tank-alternatives { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .tank-alt-chip { display: inline-block; padding: 4px 10px; font-family: ui-monospace, Consolas, monospace; font-weight: 600; font-size: 0.85rem; color: #b8dcff; background: rgba(70,130,200,0.15); border: 1px solid rgba(70,130,200,0.35); border-radius: 14px; cursor: pointer; user-select: none; transition: background 120ms; } .tank-alt-chip:hover { background: rgba(70,130,200,0.35); } .tank-alternatives-note { margin-top: 6px; color: #9a9a9a; font-size: 0.85rem; } .tank-alternatives-count { color: #9a9a9a; font-weight: 400; font-size: 0.85rem; text-transform: none; letter-spacing: normal; margin-left: 4px; } .tank-tooltip-more { color: #9a9a9a; font-size: 0.8rem; margin-left: 4px; font-style: italic; } /* Column 13 expansion list */ .tank-col13-list { list-style: none; padding: 0; margin: 0; } .tank-col13-item { padding: 8px 10px; margin-bottom: 6px; background: rgba(255,255,255,0.05); border-radius: 4px; border-left: 2px solid rgba(70,130,200,0.5); font-size: 0.9rem; line-height: 1.45; } .tank-col13-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #5ec1ff; margin-right: 8px; } .tank-col13-section { color: #888; font-size: 0.8rem; margin-right: 10px; } .tank-col13-text { color: #dcdcdc; } /* Checker form */ .tank-checker { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.1); } .tank-check-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .tank-check-label { color: #cfcfcf; font-size: 0.9rem; } .tank-check-input { padding: 6px 10px; font-family: ui-monospace, Consolas, monospace; font-weight: 600; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: #fff; width: 140px; } .tank-check-input:focus { outline: none; border-color: #5ec1ff; background: rgba(255,255,255,0.12); } .tank-check-btn { padding: 6px 14px; background: #2d7ccf; color: #fff; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; } .tank-check-btn:hover { background: #3b8cdf; } /* Verdict */ .tank-verdict { margin-top: 10px; padding: 12px 14px; border-radius: 4px; font-size: 0.92rem; } .tank-verdict-allowed { background: rgba(72,180,97,0.12); border-left: 3px solid #48b461; color: #c8f0d2; } .tank-verdict-denied { background: rgba(220,80,80,0.12); border-left: 3px solid #dc5050; color: #f0c8c8; } .tank-verdict-unknown { background: rgba(180,180,80,0.12); border-left: 3px solid #b4b450; color: #eae1a0; } .tank-verdict-headline { font-weight: 700; font-size: 1rem; margin-bottom: 6px; } .tank-verdict-codes { margin-bottom: 8px; font-size: 0.88rem; } .tank-verdict-reason { margin: 6px 0; line-height: 1.4; } .tank-verdict-rule { margin-top: 8px; color: #999; } .tank-verdict-positions { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 0.85rem; } .tank-verdict-positions th, .tank-verdict-positions td { padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); } .tank-verdict-positions th { color: #999; font-weight: 500; } .tank-pos-ok { color: #9de0a8; } .tank-pos-fail { color: #e69d9d; } /* Hover tooltip (results list) */ .tank-tooltip { position: absolute; z-index: 100; padding: 10px 12px; background: #1e2128; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); max-width: 420px; font-size: 0.85rem; animation: tank-tooltip-fade 120ms ease-out; } @keyframes tank-tooltip-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } .tank-tooltip-header { font-weight: 700; color: #5ec1ff; margin-bottom: 6px; font-family: ui-monospace, Consolas, monospace; } .tank-tooltip-pos { list-style: none; padding: 0; margin: 0 0 8px 0; font-size: 0.82rem; color: #d5d5d5; } .tank-tooltip-pos li { padding: 2px 0; } .tank-tooltip-pos b { color: #5ec1ff; font-family: ui-monospace, Consolas, monospace; margin-right: 4px; } .tank-tooltip-alts { color: #b8b8b8; font-size: 0.82rem; margin-top: 6px; } .tank-tooltip-alts .tank-alt-chip { font-size: 0.78rem; padding: 2px 8px; } .tank-tooltip-note { color: #9a9a9a; font-size: 0.82rem; } /* Mobile */ @media (max-width: 640px) { .tank-pos-row { grid-template-columns: 50px 30px 1fr; grid-template-areas: "idx letter name" "idx letter meaning"; } .tank-pos-idx { grid-area: idx; } .tank-pos-letter { grid-area: letter; } .tank-pos-name { grid-area: name; } .tank-pos-meaning { grid-area: meaning; } .tank-tooltip { max-width: 280px; font-size: 0.8rem; } } /* ── Language switcher (header flags, right of the logo) ─────────────────── */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; } .lang-switch .ls-item { display: inline-flex; line-height: 0; border-radius: 3px; } .lang-switch .ls-flag { width: 21px; height: 14px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.28); } .lang-switch .ls-active .ls-flag { box-shadow: 0 0 0 2px var(--blue, #008CD7); } .lang-switch a.ls-link .ls-flag { opacity: .78; } .lang-switch a.ls-link:hover .ls-flag { opacity: 1; } .lang-switch .ls-disabled { cursor: not-allowed; } .lang-switch .ls-disabled .ls-flag { opacity: .35; filter: grayscale(85%); } /* ── P2: print-language checkboxes (fragtbrev modal + checklist toolbar) ── */ .fb-print-langs .fb-checkbox-label { margin-right: 10px; } .checklist-print-langs { font-size: .85rem; color: var(--gray-700); margin-right: 8px; } .checklist-print-langs .cl-print-lang-label { margin-left: 8px; white-space: nowrap; cursor: pointer; }