/* Blodtryk-app styling, porteret 1:1 fra C:\Repos\Blodtryk\BlodtrykApp\wwwroot\css\app.css.
   Alt er scopet under .bt-page (via CSS nesting) så det ikke rammer resten af appen. */

.bt-page {
    --groen: #1a6b3c;
    --groen-lys: #D1FAE5;
    --groen-tekst: #065F46;
    --gul-lys: #FEF3C7;
    --gul-tekst: #92400E;
    --orange-lys: #FFEDD5;
    --orange-tekst: #9A3412;
    --roed-lys: #FEE2E2;
    --roed-tekst: #991B1B;
    --baggrund: #F5F7F5;
    --hvid: #FFFFFF;
    --tekst: #111827;
    --tekst-lys: #6B7280;
    --kant: #E5E7EB;
    --input-bg: #F9FAFB;
    --radius-kort: 20px;
    --radius-input: 12px;
    --skygge: 0 1px 3px rgba(0,0,0,0.08);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--tekst);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;

    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 40px;

    & *, & *::before, & *::after { box-sizing: border-box; }

    & a { color: inherit; text-decoration: none; }

    /* ===== Blodtryk pill-faneblade (erstatter appens tab-bar) ===== */
    & .bt-tabs {
        display: flex;
        height: 56px;
        border-radius: 32px;
        background: var(--hvid);
        border: 1px solid var(--kant);
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        padding: 4px;
        gap: 2px;
    }

    & .bt-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border-radius: 26px;
        border: none;
        background: none;
        color: #9CA3AF;
        transition: background 0.15s, color 0.15s;
        cursor: pointer;
    }

    & .bt-tab span {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    & .bt-tab.active {
        background: var(--groen);
        color: #FFFFFF;
    }

    /* ===== Pagina titler ===== */
    & .side-titel {
        font-size: 24px;
        font-weight: 700;
        color: var(--tekst);
        margin: 0;
    }

    /* ===== Kort ===== */
    & .kort {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 20px;
        box-shadow: var(--skygge);
    }

    /* ===== Seneste måling kort ===== */
    & .seneste-kort {
        background: var(--groen);
        border-radius: var(--radius-kort);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    & .seneste-kort.gul    { background: #D97706; }
    & .seneste-kort.orange { background: #EA580C; }
    & .seneste-kort.roed   { background: #DC2626; }

    & .seneste-label {
        font-size: 11px;
        font-weight: 600;
        color: #A8D5B5;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    & .seneste-vaerdi {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    & .tal-stort {
        font-size: 52px;
        font-weight: 700;
        line-height: 1;
        color: #FFFFFF;
    }

    & .tal-enhed {
        font-size: 16px;
        color: #A8D5B5;
        font-weight: 500;
    }

    & .seneste-detaljer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    & .seneste-detaljer span { font-size: 13px; color: #C8E6D0; }

    & .seneste-dato { font-size: 12px; color: #A8D5B5; }

    & .ingen-data-kort {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 32px 20px;
        text-align: center;
        color: var(--tekst-lys);
        box-shadow: var(--skygge);
    }

    & .ingen-data-kort p { margin: 0; }

    /* ===== Kategori badges ===== */
    & .kategori-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    & .groen  { background: var(--groen-lys); color: var(--groen-tekst); }
    & .gul    { background: var(--gul-lys);   color: var(--gul-tekst); }
    & .orange { background: var(--orange-lys); color: var(--orange-tekst); }
    & .roed   { background: var(--roed-lys);  color: var(--roed-tekst); }

    /* ===== Input kort ===== */
    & .input-kort {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 20px;
        box-shadow: var(--skygge);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    & .input-kort form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    & .input-kort-titel {
        font-size: 14px;
        font-weight: 600;
        color: #6B7280;
        margin: 0;
    }

    /* ===== Session fremgang ===== */
    & .session-fremgang {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    & .session-trin {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid var(--kant);
        background: var(--baggrund);
        color: #9CA3AF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        transition: all 0.3s;
        flex-shrink: 0;
    }

    & .session-trin.aktiv   { border-color: var(--groen); background: var(--groen-lys); color: var(--groen); }
    & .session-trin.faerdig { border-color: var(--groen); background: var(--groen); color: #fff; }

    & .session-linje {
        flex: 1;
        max-width: 60px;
        height: 2px;
        background: var(--kant);
        transition: background 0.3s;
    }

    & .session-linje.aktiv { background: var(--groen); }

    & .maaling-nr-label {
        text-align: center;
        font-weight: 600;
        color: var(--groen);
        font-size: 13px;
        margin: 0;
    }

    /* ===== Nedtæller ===== */
    & .nedtaeller-boks {
        text-align: center;
        padding: 28px 20px;
        background: var(--groen-lys);
        border-radius: var(--radius-input);
    }

    & .nedtaeller-tekst { font-size: 14px; color: var(--tekst-lys); margin-bottom: 8px; }
    & .nedtaeller-tid { font-size: 52px; font-weight: 700; color: var(--groen); letter-spacing: 2px; font-variant-numeric: tabular-nums; line-height: 1; }
    & .nedtaeller-sub { font-size: 13px; color: var(--tekst-lys); margin-top: 8px; }

    /* ===== Session færdig ===== */
    & .session-faerdig-boks {
        text-align: center;
        padding: 28px 20px;
        background: var(--groen-lys);
        border-radius: var(--radius-input);
        color: var(--groen-tekst);
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    & .session-faerdig-ikon { font-size: 40px; }

    /* ===== Formular ===== */
    & .form-tre-rad {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    & .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    & .form-gruppe {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    & .form-gruppe-fuld { grid-column: 1 / -1; }
    & .form-dato { display: flex; flex-direction: column; gap: 6px; }

    & label {
        font-size: 12px;
        font-weight: 600;
        color: var(--tekst-lys);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    & .form-input {
        padding: 14px;
        border: 1.5px solid var(--kant);
        border-radius: var(--radius-input);
        font-size: 18px;
        font-weight: 600;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
        width: 100%;
        background: var(--input-bg);
        color: var(--tekst);
        -webkit-appearance: none;
    }

    & .form-input:focus {
        border-color: var(--groen);
        box-shadow: 0 0 0 3px rgba(26, 107, 60, 0.10);
        background: var(--hvid);
    }

    /* ===== Primær knap ===== */
    & .gem-knap, & .eksport-knap {
        background: var(--groen);
        color: white;
        border: none;
        padding: 0 20px;
        height: 54px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    & .gem-knap:hover, & .eksport-knap:hover { background: #155730; }
    & .gem-knap:active, & .eksport-knap:active { transform: scale(0.98); }
    & .eksport-knap:disabled { background: #9CA3AF; cursor: not-allowed; }

    & .annuller-session-knap {
        background: none;
        border: none;
        color: #9CA3AF;
        font-size: 13px;
        padding: 4px 12px;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    & .annuller-session-knap:active { color: #6B7280; }

    /* ===== Beskeder ===== */
    & .fejl-besked   { background: var(--roed-lys);  color: var(--roed-tekst);  padding: 12px 16px; border-radius: var(--radius-input); font-size: 14px; }
    & .succes-besked { background: var(--groen-lys); color: var(--groen-tekst); padding: 12px 16px; border-radius: var(--radius-input); font-size: 14px; }
    & .info-besked   { background: #DBEAFE;          color: #1E40AF;            padding: 12px 16px; border-radius: var(--radius-input); font-size: 14px; }

    /* ===== WHO info boks ===== */
    & .info-boks {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 20px;
        box-shadow: var(--skygge);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    & .info-boks h3 { font-size: 14px; font-weight: 700; color: var(--tekst); margin: 0; }

    & .kategori-liste { display: flex; flex-direction: column; gap: 6px; }

    & .kategori-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
    }

    /* ===== Historik kort ===== */
    & .historik-kort {
        background: var(--hvid);
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: var(--skygge);
    }

    & .historik-ikon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 20px;
    }

    & .historik-info { flex: 1; min-width: 0; }
    & .historik-vaerdi { font-size: 20px; font-weight: 700; color: var(--tekst); }
    & .historik-meta { font-size: 12px; color: var(--tekst-lys); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    & .slet-knap {
        background: none;
        border: none;
        color: #D1D5DB;
        cursor: pointer;
        padding: 6px;
        border-radius: 8px;
        transition: color 0.15s, background 0.15s;
        display: flex;
        align-items: center;
    }

    & .slet-knap:hover { color: var(--roed-tekst); background: var(--roed-lys); }

    /* ===== Session gruppering ===== */
    & .session-gruppe {
        background: var(--hvid);
        border-radius: 20px;
        margin-bottom: 12px;
        overflow: hidden;
        box-shadow: var(--skygge);
    }

    & .session-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #F3F4F6;
    }

    & .session-header-info { display: flex; align-items: baseline; gap: 8px; }
    & .session-dato { font-size: 14px; font-weight: 600; color: var(--tekst); }
    & .session-gns  { font-size: 12px; color: var(--tekst-lys); }

    & .session-handlinger { display: flex; gap: 2px; }

    & .session-rediger-knap,
    & .session-slet-knap {
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        color: #9CA3AF;
        transition: color 0.15s, background 0.15s;
    }

    & .session-rediger-knap:hover { color: var(--groen); background: var(--groen-lys); }
    & .session-slet-knap:hover    { color: var(--roed-tekst); background: var(--roed-lys); }

    & .slet-bekraeft-tekst { font-size: 12px; font-weight: 600; color: var(--roed-tekst); align-self: center; padding-right: 2px; }
    & .session-bekraeft-ja  { background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--roed-tekst); transition: background 0.15s; }
    & .session-bekraeft-nej { background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 14px; color: #9CA3AF; transition: background 0.15s; }
    & .session-bekraeft-ja:hover  { background: var(--roed-lys); }
    & .session-bekraeft-nej:hover { background: #F3F4F6; }

    & .session-gruppe .historik-kort.session-maaling {
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #F3F4F6;
        padding: 12px 16px;
    }
    & .session-gruppe .historik-kort.session-maaling:last-child { border-bottom: none; }

    /* ===== Rediger session sheet ===== */
    & .rediger-sheet { max-height: 80vh; overflow-y: auto; }
    & .rediger-dato  { padding: 0 20px 12px; font-size: 13px; color: var(--tekst-lys); }
    & .rediger-maaling-kort { margin: 0 16px 12px; }

    /* ===== Stats grid ===== */
    & .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    & .stat-kort {
        background: var(--input-bg);
        border-radius: 14px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    & .stat-label { font-size: 11px; color: var(--tekst-lys); font-weight: 500; }
    & .stat-vaerdi { font-size: 28px; font-weight: 700; color: var(--groen); line-height: 1.1; }

    /* ===== Filter knapper ===== */
    & .filter-gruppe {
        display: flex;
        gap: 8px;
    }

    & .filter-knap {
        flex: 1;
        padding: 0;
        height: 38px;
        border-radius: 10px;
        border: none;
        background: var(--input-bg);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: var(--tekst-lys);
        transition: all 0.15s;
    }

    & .filter-knap.aktiv { background: var(--groen); color: white; }
    & .filter-knap:hover:not(.aktiv) { background: var(--groen-lys); color: var(--groen-tekst); }

    /* ===== Eksport ===== */
    & .eksport-kort {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 20px;
        box-shadow: var(--skygge);
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    & .eksport-kort h2 { font-size: 15px; font-weight: 700; color: var(--tekst); margin: 0; }
    & .eksport-kort p  { font-size: 13px; color: var(--tekst-lys); margin: 0; }

    /* ===== Indstillinger ===== */
    & .indst-kort {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 8px 0;
        box-shadow: var(--skygge);
        overflow: hidden;
    }

    & .indst-rad {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
    }

    & .indst-rad-ikon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 16px;
    }

    & .indst-rad-tekst {
        flex: 1;
        font-size: 15px;
        font-weight: 500;
        color: var(--tekst);
    }

    & .indst-rad-tekst.roed { color: #DC2626; background: none; }

    & .indst-divider { height: 1px; background: var(--kant); margin: 0; }

    & .indst-profil-kort {
        background: var(--hvid);
        border-radius: var(--radius-kort);
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: var(--skygge);
    }

    & .profil-avatar {
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background: var(--groen);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        flex-shrink: 0;
    }

    & .profil-navn { font-size: 16px; font-weight: 700; color: var(--tekst); }
    & .profil-email { font-size: 13px; color: var(--tekst-lys); margin-top: 2px; }

    & .beskrivelse { font-size: 13px; color: var(--tekst-lys); }
    & .toggle-gruppe { margin: 4px 0; }
    & .toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tekst); font-weight: 500; }
    & .hjaelp-tekst { font-size: 12px; color: var(--tekst-lys); margin-top: 12px; line-height: 1.5; }
    & .version-tekst { font-size: 12px; color: var(--tekst-lys); text-align: center; margin-top: 8px; padding-bottom: 8px; }

    /* ===== Side header ===== */
    & .side-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* ===== TidVaelger komponent ===== */
    & .tv-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #FFFFFF;
        border: 1.5px solid #E5E7EB;
        border-radius: 16px;
        padding: 14px 18px;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        text-align: left;
    }
    & .tv-trigger-ikon { font-size: 20px; flex-shrink: 0; }
    & .tv-trigger-tekst { display: flex; flex-direction: column; gap: 1px; }
    & .tv-trigger-label { font-size: 11px; font-weight: 600; color: #9CA3AF; letter-spacing: 0.5px; }
    & .tv-trigger-vaerdi { font-size: 17px; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }

    & .tv-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    & .tv-sheet {
        background: #F5F7F5;
        border-radius: 28px 28px 0 0;
        width: 100%;
        max-width: 430px;
        padding: 20px 20px 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    & .tv-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    & .tv-sheet-titel { font-size: 17px; font-weight: 700; color: #111827; }
    & .tv-sheet-luk {
        width: 32px; height: 32px; border-radius: 50%;
        background: #E5E7EB; border: none; cursor: pointer;
        font-size: 18px; display: flex; align-items: center; justify-content: center;
        color: #6B7280;
    }

    & .tv-sektion-label {
        font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
        color: #9CA3AF; margin-bottom: 6px;
    }

    & .tv-dato-kort {
        background: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        height: 100px;
        overflow: hidden;
    }

    & .tv-dato-felt {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 100%;
        position: relative;
    }

    & .tv-divider { width: 1px; height: 60px; background: #F3F4F6; flex-shrink: 0; }

    & .tv-felt-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #9CA3AF;
        pointer-events: none;
        position: relative;
        z-index: 1;
    }

    & .tv-tid-kort {
        background: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        padding: 0 24px;
        gap: 0;
    }

    & .tv-tid-felt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: relative;
    }

    & .tv-felt-label-lys {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #9CA3AF;
        pointer-events: none;
        position: relative;
        z-index: 1;
    }

    & .tv-tal-boks {
        width: 110px;
        height: 64px;
        border-radius: 16px;
        background: #ECFDF5;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    & .tv-overlay-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        font-size: 16px;
        border: none;
        background: transparent;
        z-index: 2;
    }

    & .tv-vis {
        font-size: 40px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
        position: relative;
        z-index: 1;
    }

    & .tv-moerk { color: #111827; background: none; }
    & .tv-groen { color: #1a6b3c; background: none; }
    & .tv-tid-groen { color: #1a6b3c; background: none; }

    & .tv-tid-kolon {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        padding: 0 12px;
        flex-shrink: 0;
        margin-top: 16px;
    }

    & .tv-tid-kolon span {
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #A8D5B5;
    }

    & .tv-gem-knap {
        width: 100%;
        padding: 16px;
        background: #1a6b3c;
        color: #fff;
        border: none;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        cursor: pointer;
        margin-top: 4px;
    }

    /* ===== Manuel indtastning ===== */
    & .manuel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #1a6b3c;
        padding: 0 16px;
        height: 62px;
        border-radius: var(--radius-kort);
    }
    & .manuel-back {
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(255,255,255,0.15); border: none;
        color: #fff; font-size: 20px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    & .manuel-header-titel { font-size: 17px; font-weight: 700; color: #fff; }
    & .manuel-scroll { display: flex; flex-direction: column; gap: 16px; }
    & .manuel-kort {
        background: #fff;
        border-radius: 20px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: var(--skygge);
    }
    & .manuel-kort-header { display: flex; align-items: center; justify-content: space-between; }
    & .manuel-kort-titel { font-size: 13px; font-weight: 700; color: #111827; }
    & .manuel-obligatorisk {
        font-size: 11px; font-weight: 600; color: #1a6b3c;
        background: #ECFDF5; border-radius: 20px; padding: 4px 10px;
    }
    & .manuel-gem { margin-top: 4px; margin-bottom: 20px; }

    & .historik-graf-kort {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 16px;
        box-shadow: var(--skygge);
    }
    & .historik-graf-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    & .historik-graf-titel {
        font-size: 13px;
        font-weight: 700;
        color: #111827;
    }
    & .historik-graf-legend {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        color: #6B7280;
        font-weight: 500;
    }
    & .legend-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    & .historik-fab {
        position: fixed;
        bottom: 100px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #1a6b3c;
        color: #fff;
        font-size: 28px;
        font-weight: 300;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(26,107,60,0.4);
        z-index: 50;
        line-height: 1;
    }
}

/* =====================================================================
   Desktop-layout (≥900px — samme breakpoint som agentens side-nav).
   Mobilversionen ovenfor er uændret — alle regler her gælder kun
   brede skærme.
   ===================================================================== */
@media (min-width: 900px) {

    .bt-page {
        max-width: 1080px;
        gap: 20px;
    }

    /* Faneblade som centreret pille i fast bredde */
    .bt-page .bt-tabs {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
        justify-self: center;
    }

    /* Modal-sheets centreres som dialoger i stedet for bottom-sheets */
    .bt-page .tv-overlay {
        align-items: center;
    }
    .bt-page .tv-sheet {
        border-radius: 28px;
        max-width: 480px;
        padding-bottom: 24px;
    }
    .bt-page .tv-sheet.rediger-sheet {
        max-width: 640px;
    }

    /* ---- Hjem: registrering til venstre, seneste + WHO til højre ---- */
    .bt-page.bt-hjem {
        display: grid;
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }
    .bt-page.bt-hjem .bt-tabs {
        grid-column: 1 / -1;
    }
    .bt-page.bt-hjem .input-kort {
        grid-column: 1;
        grid-row: 2 / span 3;
    }
    .bt-page.bt-hjem .seneste-kort,
    .bt-page.bt-hjem .ingen-data-kort {
        grid-column: 2;
        grid-row: 2;
    }
    .bt-page.bt-hjem .info-boks {
        grid-column: 2;
        grid-row: 3;
    }
    .bt-page.bt-hjem .tal-stort {
        font-size: 64px;
    }

    /* ---- Historik: stats i én række, bred graf, sessioner i 2 kolonner ---- */
    .bt-page.bt-historik {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        align-items: start;
    }
    .bt-page.bt-historik .bt-tabs,
    .bt-page.bt-historik .side-header,
    .bt-page.bt-historik .ingen-data-kort,
    .bt-page.bt-historik .stats-grid,
    .bt-page.bt-historik .historik-graf-kort {
        grid-column: 1 / -1;
    }
    .bt-page.bt-historik .filter-gruppe {
        grid-column: 1 / -1;
        max-width: 520px;
    }
    .bt-page.bt-historik .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .bt-page.bt-historik .historik-graf-kort {
        padding: 20px;
    }
    .bt-page.bt-historik .session-gruppe {
        margin-bottom: 0;
        align-self: start;
    }

    /* ---- Manuel: de 3 målinger side om side ---- */
    .bt-page.bt-manuel {
        max-width: 1080px;
    }
    .bt-page.bt-manuel .manuel-scroll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        align-items: start;
    }
    .bt-page.bt-manuel .manuel-dato-wrap,
    .bt-page.bt-manuel .fejl-besked,
    .bt-page.bt-manuel .succes-besked,
    .bt-page.bt-manuel .manuel-gem {
        grid-column: 1 / -1;
    }
    .bt-page.bt-manuel .manuel-dato-wrap {
        max-width: 520px;
    }
    .bt-page.bt-manuel .manuel-gem {
        max-width: 420px;
        justify-self: start;
    }

    /* ---- Eksport: periode i fuld bredde, øvrige kort i 2 kolonner ---- */
    .bt-page.bt-eksport {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        align-items: start;
    }
    .bt-page.bt-eksport .bt-tabs,
    .bt-page.bt-eksport .side-titel,
    .bt-page.bt-eksport .eksport-kort:first-of-type {
        grid-column: 1 / -1;
    }

    /* ---- Indstillinger: kort i 2 kolonner ---- */
    .bt-page.bt-indst {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        align-items: start;
    }
    .bt-page.bt-indst .bt-tabs,
    .bt-page.bt-indst .side-titel,
    .bt-page.bt-indst .indst-profil-kort,
    .bt-page.bt-indst .succes-besked,
    .bt-page.bt-indst .version-tekst {
        grid-column: 1 / -1;
    }
    .bt-page.bt-indst .gem-knap {
        grid-column: 1 / -1;
        max-width: 420px;
        justify-self: start;
    }
}