/* ═══════════════════════════════════════════════════════════════════ CANVA-PASS - synlig visuel redesign-overlay Bygger på design-tokens.css. Rammer eksisterende klasser med de nye, mere generøse værdier: større padding, blødere shadows, rundere kort. Kan slås fra via . ═══════════════════════════════════════════════════════════════════ */ /* ── Ikke aktiv hvis classic er valgt ──────────────────────── */ [data-visual="classic"] .canva-only { display: none; } /* ═══════════════════════════════════════════════════════════════ CARDS - alle varianter får luftige hjørner + diffus shadow ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) .glass-card, html:not([data-visual="classic"]) .bv-card, html:not([data-visual="classic"]) .bv-mini-card, html:not([data-visual="classic"]) .kpi-card { border-radius: var(--radius-lg) !important; padding: var(--space-5) !important; box-shadow: var(--shadow-sm); border-color: var(--color-border); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1) !important; } html:not([data-visual="classic"]) .glass-card:hover, html:not([data-visual="classic"]) .bv-card:hover, html:not([data-visual="classic"]) .bv-mini-card:hover, html:not([data-visual="classic"]) .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; } /* KPI-card specifikt - større padding, tykkere accent-bar */ html:not([data-visual="classic"]) .kpi-card { padding: var(--space-5) var(--space-5) !important; border-top-width: 4px !important; } /* ═══════════════════════════════════════════════════════════════ GRIDS - mere luft mellem kort ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) .kpi-grid, html:not([data-visual="classic"]) .bv-dash, html:not([data-visual="classic"]) .bv-grid { gap: var(--space-5) !important; margin-bottom: var(--space-5) !important; } html:not([data-visual="classic"]) .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; } /* ═══════════════════════════════════════════════════════════════ MAIN CONTAINERS - generøs whitespace rundt om indhold ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) .content-wrapper, html:not([data-visual="classic"]) .bv-main, html:not([data-visual="classic"]) .main-content { padding: var(--space-6) var(--space-7) !important; } @media (max-width: 900px) { html:not([data-visual="classic"]) .content-wrapper, html:not([data-visual="classic"]) .bv-main, html:not([data-visual="classic"]) .main-content { padding: var(--space-4) !important; } } /* Section-separation bliver roligere */ html:not([data-visual="classic"]) section + section, html:not([data-visual="classic"]) .view-section + .view-section { margin-top: var(--space-6); } /* ═══════════════════════════════════════════════════════════════ BUTTONS - rundere, lidt højere, blødere shadow ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) .bv-btn, html:not([data-visual="classic"]) .btn, html:not([data-visual="classic"]) .widget-action-btn, html:not([data-visual="classic"]) button.ds-btn { border-radius: var(--radius-md) !important; padding: 10px 18px; font-weight: var(--font-weight-semibold); letter-spacing: 0.01em; } html:not([data-visual="classic"]) .bv-btn-primary { box-shadow: 0 4px 14px var(--color-accent-dim); } html:not([data-visual="classic"]) .bv-btn-primary:hover { box-shadow: 0 6px 20px var(--color-accent-soft); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════ SIDEBAR - blødere navigation (kun på ikke-mobil for at undgå at overskrive eksisterende mobile-overlay styles) ═══════════════════════════════════════════════════════════════ */ @media (min-width: 901px) { html:not([data-visual="classic"]) .sidebar .nav-btn, html:not([data-visual="classic"]) .bv-sidebar .nav-btn { border-radius: var(--radius-md); transition: background var(--motion-base), color var(--motion-base), transform var(--motion-fast); } html:not([data-visual="classic"]) .sidebar .nav-btn:hover { background: var(--color-surface-hover); transform: translateX(2px); } html:not([data-visual="classic"]) .sidebar .nav-btn.active { background: var(--color-accent-dim); color: var(--color-accent); } } /* ═══════════════════════════════════════════════════════════════ TOP-BAR - mere luft, blødere rande ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) .topbar, html:not([data-visual="classic"]) .bv-topbar { padding: var(--space-4) var(--space-6) !important; border-bottom: 1px solid var(--color-border); background: var(--color-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ═══════════════════════════════════════════════════════════════ INPUTS - rundere, blødere fokusring ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) input[type="text"], html:not([data-visual="classic"]) input[type="number"], html:not([data-visual="classic"]) input[type="search"], html:not([data-visual="classic"]) input[type="email"], html:not([data-visual="classic"]) input[type="password"], html:not([data-visual="classic"]) textarea, html:not([data-visual="classic"]) select { border-radius: var(--radius-md) !important; padding: 10px 14px !important; transition: border-color var(--motion-fast), box-shadow var(--motion-fast) !important; } html:not([data-visual="classic"]) input:focus, html:not([data-visual="classic"]) textarea:focus, html:not([data-visual="classic"]) select:focus { border-color: var(--accent) !important; } /* ═══════════════════════════════════════════════════════════════ TABLES - mere whitespace, subtile rækker ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) table td, html:not([data-visual="classic"]) table th { padding: 12px 14px !important; } html:not([data-visual="classic"]) table { border-radius: var(--radius-md); overflow: hidden; } /* ═══════════════════════════════════════════════════════════════ HEADERS - typografisk roligere ═══════════════════════════════════════════════════════════════ */ html:not([data-visual="classic"]) h1, html:not([data-visual="classic"]) h2 { letter-spacing: -0.02em; font-weight: var(--font-weight-bold); } /* ═══════════════════════════════════════════════════════════════ A/B TOGGLE - flydende knap nederst i højre hjørne ═══════════════════════════════════════════════════════════════ */ .visual-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9500; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-card-solid); color: var(--color-text-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-family: inherit; cursor: pointer; box-shadow: var(--shadow-md); transition: transform var(--motion-fast), box-shadow var(--motion-fast); } .visual-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--color-text-1); } .visual-toggle__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-soft); transition: background var(--motion-base); } [data-visual="classic"] .visual-toggle__dot { background: var(--color-text-3); box-shadow: none; } /* FIX 2026-06-10 (audit css-design-3): fjern emoji + Danglish — "Classic" → "Klassisk", drop ✨/○ glyffer (ingen emoji-regel) */ .visual-toggle__label::before { content: "Canva"; } [data-visual="classic"] .visual-toggle__label::before { content: "Klassisk"; } @media (max-width: 900px) { .visual-toggle { bottom: auto; top: 12px; right: 12px; padding: 6px 10px; font-size: 10px; } } /* ═══════════════════════════════════════════════════════════════ DASHBOARD-VIEW - specifik redesign af hovedoversigt ═══════════════════════════════════════════════════════════════ */ /* Hero-agtig indramning af KPI-grid */ html:not([data-visual="classic"]) #dashboard-view #kpi-grid { gap: var(--space-4) !important; margin-bottom: var(--space-6) !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; } /* Større, roligere KPI-kort */ html:not([data-visual="classic"]) #dashboard-view .kpi-card { padding: var(--space-5) var(--space-5) var(--space-4) !important; border-radius: var(--radius-lg) !important; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; background: var(--color-card) !important; border: 1px solid var(--color-border) !important; border-top: 4px solid var(--color-accent); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* Subtil accent-wash i øverste højre hjørne */ html:not([data-visual="classic"]) #dashboard-view .kpi-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--color-accent-dim), transparent 70%); pointer-events: none; opacity: 0.6; } html:not([data-visual="classic"]) #dashboard-view .kpi-label { font-size: var(--font-size-xs) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-weight: var(--font-weight-semibold) !important; color: var(--color-text-3) !important; } html:not([data-visual="classic"]) #dashboard-view .kpi-value { font-size: 2rem !important; font-weight: 800 !important; line-height: 1.1 !important; margin-top: var(--space-2) !important; color: var(--color-text-1); } /* Dashboard-modul kort */ html:not([data-visual="classic"]) #dashboard-inner > * { margin-bottom: var(--space-5); border-radius: var(--radius-lg) !important; padding: var(--space-5) !important; } /* Sektionstitler mere markante */ html:not([data-visual="classic"]) #dashboard-view h2, html:not([data-visual="classic"]) #dashboard-view h3, html:not([data-visual="classic"]) #dashboard-view .section-title, html:not([data-visual="classic"]) #dashboard-view .glass-card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; margin-bottom: var(--space-3); } /* Toolbar knapper: ds-btn primær */ html:not([data-visual="classic"]) #dashboard-view .ds-btn--secondary { background: var(--color-card-solid); box-shadow: var(--shadow-xs); }