/* ============================================================ BeTally Console — moderne minimalistisk tema (design-handoff). Bygget over betally-theme.css (trin 1) + shell/stepper/faner (trin 2). Dark er default; light via prefers-color-scheme; manuel toggle skriver data-bt-theme på (shell.js). Fonte: Instrument Sans (UI) + JetBrains Mono (tal/kode). ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { --bg: #0b0d10; --panel: #111418; --panel2: #171b21; --line: #1f242c; --text: #e8edf2; --muted: #8d98a5; --faint: #5f6975; --ok: #3dd68c; --warn: #f0b429; --crit: #ff6b62; --okbg: rgba(61, 214, 140, .1); --warnbg: rgba(240, 180, 41, .1); --critbg: rgba(255, 107, 98, .1); --accent: #45c4b0; --radius: 14px; --radius-sm: 9px; --font-ui: "Instrument Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media (prefers-color-scheme: light) { :root { --bg: #f6f7f9; --panel: #ffffff; --panel2: #f0f2f5; --line: #e4e7ec; --text: #181c22; --muted: #5c6672; --faint: #98a1ab; --ok: #0e9f6e; --warn: #b7791f; --crit: #d93025; --okbg: rgba(14, 159, 110, .09); --warnbg: rgba(183, 121, 31, .1); --critbg: rgba(217, 48, 37, .08); --accent: #0d8c7f; } } /* Manuel toggle vinder over prefers-color-scheme (højere specificitet). */ html[data-bt-theme="dark"] { --bg: #0b0d10; --panel: #111418; --panel2: #171b21; --line: #1f242c; --text: #e8edf2; --muted: #8d98a5; --faint: #5f6975; --ok: #3dd68c; --warn: #f0b429; --crit: #ff6b62; --okbg: rgba(61, 214, 140, .1); --warnbg: rgba(240, 180, 41, .1); --critbg: rgba(255, 107, 98, .1); --accent: #45c4b0; } html[data-bt-theme="light"] { --bg: #f6f7f9; --panel: #ffffff; --panel2: #f0f2f5; --line: #e4e7ec; --text: #181c22; --muted: #5c6672; --faint: #98a1ab; --ok: #0e9f6e; --warn: #b7791f; --crit: #d93025; --okbg: rgba(14, 159, 110, .09); --warnbg: rgba(183, 121, 31, .1); --critbg: rgba(217, 48, 37, .08); --accent: #0d8c7f; } * { box-sizing: border-box; } /* display-klasser (flex/grid) må aldrig overtrumfe hidden-attributten */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; } h1 { font-size: 21px; font-weight: 650; letter-spacing: -.015em; margin: 0; } /* Sektionsetiketter: small-caps i stedet for grå headings */ h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); margin: 28px 0 10px; } h2:first-child { margin-top: 0; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } code { font-family: var(--font-mono); font-size: .9em; } .mono { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; } .muted { color: var(--muted); } .faint { color: var(--faint); } .warn-text { color: var(--warn); } button { background: none; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; } button:hover { color: var(--text); border-color: var(--muted); } button:disabled { opacity: .55; cursor: default; } /* Primær handling: monokrom (tekstfarve som flade) */ button.primary, form button[type="submit"] { background: var(--text); color: var(--bg); border: none; font-weight: 600; } button.primary:hover, form button[type="submit"]:hover { opacity: .88; color: var(--bg); } /* Sekundær submit: ghost trods submit-rollen (fx "Gem stamdata") */ form.ghost-submit button[type="submit"] { background: none; color: var(--text); border: 1px solid var(--line); font-weight: 600; } form.ghost-submit button[type="submit"]:hover { opacity: 1; border-color: var(--muted); } button.danger { border-color: var(--line); color: var(--crit); } button.danger:hover { border-color: var(--crit); background: none; color: var(--crit); } /* Destruktiv hovedhandling (luk-saga): tonet crit-flade */ button.btn-critical { background: var(--critbg); color: var(--crit); border: 1px solid var(--critbg); border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 600; } button.btn-critical:hover { opacity: .85; color: var(--crit); border-color: var(--critbg); } button.linklike { border: none; padding: 0; font-size: 12px; color: var(--muted); border-radius: 0; } button.linklike:hover { color: var(--text); } input[type="password"], input[type="email"], input[type="text"], input:not([type]), select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 13px; font: inherit; font-size: 13.5px; min-width: 220px; outline: none; } input:focus, select:focus { border-color: var(--accent); } .error { background: var(--critbg); border: 1px solid var(--crit); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--crit); } .note { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--muted); font-size: 13px; } @keyframes btpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ── Statusprikker og badges ───────────────────────────────── Prik + tekst til tilstande; farvet tekst på tonet flade til række-statusser (failed/pending/ok). */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--faint); margin-right: 8px; flex-shrink: 0; } .dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-crit { background: var(--crit); } .status-inline { font-size: 12.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; } .status-inline .dot { margin-right: 6px; width: 7px; height: 7px; } .status-inline.ok { color: var(--ok); } .status-inline.warn { color: var(--warn); } .status-inline.crit { color: var(--crit); } .status-inline.unknown { color: var(--faint); } .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel2); white-space: nowrap; } .pill-ok { color: var(--ok); background: var(--okbg); } .pill-warn { color: var(--warn); background: var(--warnbg); } .pill-crit { color: var(--crit); background: var(--critbg); } .pill-muted { color: var(--faint); background: none; border: 1px solid var(--line); } .pill-unknown { color: var(--faint); background: var(--panel2); } /* Miljø-tags: PRODUKTION råber, sandbox hvisker */ .env-tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; white-space: nowrap; } .env-tag.env-prod { color: var(--crit); background: var(--critbg); border-color: var(--critbg); } /* ── Shell: sidebar + indhold ────────────────────────────────── */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 216px; flex-shrink: 0; border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; } .wordmark { display: flex; align-items: center; gap: 9px; padding: 4px 12px 18px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .wordmark-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); flex-shrink: 0; } .nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 2px 12px 6px; } .nav-label + .nav-label, .nav-item + .nav-label { padding-top: 14px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; cursor: pointer; text-align: left; padding: 8px 12px; border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted); } .nav-item:hover { color: var(--text); border: none; } .nav-item.active { background: var(--panel2); color: var(--text); } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .sidebar-spacer { flex: 1; } .sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .sidebar-foot .theme-toggle { font-size: 13px; padding: 7px 12px; } .sidebar-foot .theme-toggle svg { width: 15px; height: 15px; } .sidebar-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 4px; } .sidebar-mail { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { flex: 1; min-width: 0; max-width: 1180px; padding: 32px 40px 56px; } .content > header { margin-bottom: 20px; } .page-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .page-head-row .spacer { flex: 1; } .head-meta { font-size: 12.5px; color: var(--faint); } a.back { font-size: 13px; color: var(--muted); display: inline-block; margin-bottom: 8px; } a.back:hover { color: var(--text); } .content > footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--faint); font-size: 12px; padding-top: 28px; } /* ── Login (begge gates) ─────────────────────────────────────── */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .login-col { width: 380px; display: flex; flex-direction: column; gap: 24px; } .login-col .wordmark { justify-content: center; padding: 0; font-size: 19px; } .login-col .wordmark-dot { width: 10px; height: 10px; } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; } .login-title { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: 0; text-transform: none; color: var(--text); } .login-text { font-size: 13px; color: var(--muted); margin: -8px 0 0; } .login-card form { display: flex; flex-direction: column; gap: 12px; margin: 0; } .login-card input { width: 100%; min-width: 0; padding: 11px 14px; font-size: 14px; border-radius: 10px; } .login-card button[type="submit"] { width: 100%; padding: 11px 14px; font-size: 14px; border-radius: 10px; } .login-error { color: var(--crit); font-size: 13px; margin: 0; background: none; border: none; padding: 0; } .login-foot { font-size: 12px; color: var(--faint); text-align: center; margin: 0; } /* ── Statussiden ─────────────────────────────────────────────── */ .banner { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .banner-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--faint); flex-shrink: 0; } .banner-dot.ok { background: var(--ok); } .banner-dot.warn { background: var(--warn); } .banner-dot.crit { background: var(--crit); } .banner-dot.pulse { animation: btpulse 2.4s ease-in-out infinite; } .banner-text { flex: 1; min-width: 220px; } .banner-title { font-size: 16px; font-weight: 650; } .banner-sub { font-size: 13px; color: var(--muted); } .banner-locs { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); align-items: center; } .banner-locs .dot { width: 7px; height: 7px; margin-right: 6px; } .banner-locs span { display: inline-flex; align-items: center; } ul#problems { list-style: none; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } ul#problems li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; } ul#problems li:last-child { border-bottom: none; } ul#problems li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--warn); flex-shrink: 0; } ul#problems li.crit::before { background: var(--crit); } ul#problems li .scope { color: var(--muted); font-size: 11.5px; font-weight: 600; background: var(--panel2); border-radius: 6px; padding: 2px 8px; flex-shrink: 0; } /* Nøgletal (KPI-kort) */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card .card-head .dot { width: 7px; height: 7px; margin: 0; } .card .label { color: var(--muted); font-size: 12px; } .card .value { font-family: var(--font-mono); font-size: 23px; font-weight: 500; font-variant-numeric: tabular-nums; margin: 4px 0 2px; } .card .value .unit { font-size: 13px; color: var(--faint); } .card.warn .value { color: var(--warn); } .card.crit .value { color: var(--crit); } .card .detail { color: var(--faint); font-size: 11.5px; min-height: 16px; } /* Lokationskort */ .loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; } .loc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .loc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .loc-head .spacer { flex: 1; } .loc-head a.loc-link { font-size: 15.5px; font-weight: 650; color: var(--text); } .loc-head a.loc-link:hover { color: var(--accent); } .loc-bar { height: 4px; border-radius: 999px; background: var(--panel2); margin: 12px 0 10px; overflow: hidden; } .loc-bar-fill { height: 4px; border-radius: 999px; background: var(--faint); } .loc-bar-fill.ok { background: var(--ok); } .loc-bar-fill.warn { background: var(--warn); } .loc-bar-fill.crit { background: var(--crit); } .loc-stats { font-size: 12.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; } .loc-stats b { color: var(--text); font-weight: 600; } .loc-stats .warn, .loc-stats .warn b { color: var(--warn); font-weight: 600; } .loc-stats .crit, .loc-stats .crit b { color: var(--crit); font-weight: 600; } a.loc-diag { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent); } a.loc-diag:hover { opacity: .8; color: var(--accent); } /* ── Radio-diagnose ──────────────────────────────────────────── */ .table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } table.outlets { width: 100%; border-collapse: collapse; background: none; border: none; font-size: 13px; } table.outlets th, table.outlets td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; } table.outlets th:first-child, table.outlets td:first-child { padding-left: 18px; } table.outlets th { color: var(--faint); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } table.outlets tbody tr:last-child td { border-bottom: none; } table.outlets tr.offline td { background: var(--critbg); } table.outlets .name { font-weight: 600; font-size: 13.5px; } table.outlets td.detail, table.outlets .detail { color: var(--faint); font-size: 12px; } table.outlets tr.row-click { cursor: pointer; } table.outlets tr.row-click td, .tbl tr.row-link td { transition: background 0.12s; } table.outlets tr.row-click:hover td { background: var(--panel2); } table.outlets tr.offline.row-click:hover td { background: var(--panel2); } table.outlets td.chev { color: var(--faint); font-size: 11px; text-align: center; width: 40px; } table.outlets .status-sub { font-size: 11.5px; color: var(--faint); margin-left: 16px; white-space: normal; } table.outlets .status-sub.crit { color: var(--crit); } .q-wrap { display: flex; align-items: center; gap: 10px; } .q-num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; min-width: 26px; font-variant-numeric: tabular-nums; } .q-num.warn { color: var(--warn); } .q-num.crit { color: var(--crit); } .q-bar { width: 44px; height: 3px; border-radius: 999px; background: var(--panel2); display: inline-block; overflow: hidden; } .q-fill { display: block; height: 3px; border-radius: 999px; background: var(--ok); } .q-fill.warn { background: var(--warn); } .q-fill.crit { background: var(--crit); } table.outlets tr.muted-outlet td { opacity: .5; } table.outlets tr.muted-outlet td:first-child { opacity: .75; } table.outlets tr.placement-row td { padding: 12px 18px 6px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); background: none; } .placement-count { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; } /* Udvidet detaljerække: de 8 gamle kolonner bor her */ table.outlets tr.expand-row td { background: var(--panel2); padding: 14px 18px; white-space: normal; } .expand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; } .expand-item .expand-label { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .expand-item .expand-value { font-family: var(--font-mono); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; } a.tally-link { font-family: var(--font-mono); font-size: 11.5px; } a.tally-link:hover { text-decoration: underline; } .master-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; } .spark-cell { min-width: 130px; } svg.spark polyline { fill: none; stroke: var(--ok); stroke-width: 1.5; } svg.spark.spark-warn polyline { stroke: var(--warn); } svg.spark.spark-crit polyline { stroke: var(--crit); } svg.spark line.mark-up { stroke: var(--ok); stroke-width: 1; } svg.spark line.mark-down { stroke: var(--crit); stroke-width: 1; } .empty-spark { font-style: italic; } .table-foot { margin-top: 14px; font-size: 12px; color: var(--faint); } /* ── Admin ───────────────────────────────────────────────────── */ .page-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .meta-line { font-size: 13px; color: var(--muted); margin: 4px 0 24px; } .intro-line { font-size: 13px; color: var(--muted); margin: 6px 0 20px; } .inline-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; align-items: center; } /* Formular-kort (stamdata, ny kunde) og dashed tilknyt-kort */ .form-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 14px; } .form-card .inline-form { margin: 0; } .form-card .inline-form input { flex: 1; } .form-card.dashed { border-style: dashed; border-radius: 12px; } .form-card .form-note { flex-basis: 100%; font-size: 12.5px; color: var(--muted); margin: 0 0 10px; } /* Tabeller som kort */ .tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 14px; font-size: 13.5px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .tbl th { text-align: left; color: var(--faint); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); padding: 11px 14px; } .tbl td { border-bottom: 1px solid var(--line); padding: 12px 14px; vertical-align: middle; } .tbl th:first-child, .tbl td:first-child { padding-left: 18px; } .tbl th:last-child, .tbl td:last-child { padding-right: 18px; } .tbl tr:last-child td { border-bottom: none; } .tbl td button { margin-right: 6px; padding: 5px 12px; font-size: 12.5px; border-radius: 8px; } .tbl td button:last-child { margin-right: 0; } .tbl td .pill { margin-left: 8px; } .tbl td.actions { text-align: right; white-space: nowrap; } .tbl td.chev { color: var(--faint); font-size: 12px; text-align: center; width: 40px; } .tbl tr.row-link { cursor: pointer; } .tbl tr.row-link:hover td { background: var(--panel2); } .tbl .cell-name { font-size: 13.5px; font-weight: 600; } .tbl .cell-sub { font-size: 11.5px; color: var(--faint); font-family: var(--font-mono); font-weight: 400; } /* Fejlceller: lange fejltekster skal kunne wrappe */ .tbl td .err-text, .err-text { color: var(--crit); font-size: 12px; max-width: 320px; white-space: normal; word-break: break-word; display: inline-block; } /* Faner (Drift) */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; } .tab { background: none; border: none; border-radius: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--text); border-color: transparent; border-bottom-color: transparent; } .tab.active { color: var(--text); border-bottom-color: var(--accent); } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .chip { border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font-size: 12px; padding: 4px 13px; cursor: pointer; } .chip:hover { color: var(--text); border-color: var(--line); } .chip-active { border-color: var(--muted); background: var(--panel2); color: var(--text); font-weight: 600; } /* Reconcile-resumékort */ .recon-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 14px; } .recon-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .recon-card strong { color: var(--text); font-size: 13.5px; } /* ── Testordre-siden ─────────────────────────────────────────── */ .test-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; } .card-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .panel-title { font-size: 15px; font-weight: 650; margin: 0 0 4px; } .panel-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; } .panel-sub.mono { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; } .start-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0; } .start-form select { width: 100%; min-width: 0; } .start-form button[type="submit"] { padding: 11px 16px; font-size: 13.5px; } .side-stack { display: flex; flex-direction: column; gap: 14px; } .side-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; } .side-card.tinted { background: var(--panel2); padding: 18px; overflow: visible; } .side-label { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; } .side-card > .side-label { padding: 14px 18px 6px; margin: 0; } .side-text { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin: 0; } .side-empty { padding: 4px 18px 14px; margin: 0; font-size: 12.5px; color: var(--muted); } table.recent { width: 100%; border-collapse: collapse; font-size: 13px; } table.recent td { padding: 11px 18px; border-top: 1px solid var(--line); vertical-align: middle; } table.recent td:nth-child(2) { padding: 11px 8px; } table.recent td:last-child { text-align: right; } table.recent .ref { font-family: var(--font-mono); font-size: 12px; font-weight: 600; } table.recent .when { font-size: 11.5px; color: var(--faint); } /* Stepper */ .stepper { display: flex; flex-direction: column; margin-bottom: 8px; } .step { display: flex; gap: 14px; } .step-rail { display: flex; flex-direction: column; align-items: center; } .step-circle { width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); } .step-circle.done { background: var(--okbg); color: var(--ok); border-color: var(--okbg); } .step-circle.crit { background: var(--critbg); color: var(--crit); border-color: var(--critbg); } .step-line { width: 1px; flex: 1; background: var(--line); min-height: 18px; } .step-body { padding-bottom: 20px; flex: 1; min-width: 0; } .step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .step-label { font-size: 13.5px; font-weight: 600; } .step-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .step-detail.warn-text { color: var(--warn); } .step-body button { margin-top: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--text); border-radius: 8px; } .step-body button:hover { border-color: var(--muted); } /* Kvittering */ .receipt { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 6px; } .receipt h4 { margin: 0 0 8px; font-size: 14px; font-weight: 650; } .receipt p { margin: 6px 0; font-size: 13px; } .receipt button { margin-top: 8px; } /* ── Modals (nøgle + pinkode) ───────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(5, 7, 9, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 24px; } .modal-overlay[hidden] { display: none; } .modal { width: 520px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; box-shadow: 0 24px 64px rgba(0, 0, 0, .4); } .modal.modal-center { width: 420px; text-align: center; } .modal h2 { font-size: 16px; font-weight: 650; margin: 0 0 6px; letter-spacing: 0; text-transform: none; color: var(--text); } .modal .warn-text { font-size: 13px; margin: 0 0 16px; } .modal button.primary { width: 100%; padding: 10px 16px; } .key-box { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .key-box code { font-size: 12.5px; word-break: break-all; user-select: all; flex: 1; text-align: left; } .key-box button { flex-shrink: 0; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); border-radius: 8px; } code.pin-display { display: block; font-size: 42px; font-weight: 600; letter-spacing: .3em; padding: 14px 0 14px .3em; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 18px; text-align: center; } /* ── Responsivt ──────────────────────────────────────────────── */ @media (max-width: 860px) { .shell { flex-direction: column; } .sidebar { position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; border-right: none; border-bottom: 1px solid var(--line); padding: 10px 12px; } .wordmark { padding: 4px 10px; } .nav-label { display: none; } .nav-item { width: auto; } .sidebar-spacer { flex: 1; } .sidebar-foot { border-top: none; padding-top: 0; flex-direction: row; align-items: center; } .sidebar-user { padding: 0 6px; } .content { padding: 22px 18px 40px; } .loc-grid { grid-template-columns: 1fr; } .test-grid { grid-template-columns: 1fr; } }