/* --------------------------------------------------
   Bentzen Økonomi - Stylesheet
   Version: 100.280 (Opdelt fra v100.270)
   --------------------------------------------------
*/

:root { 
    --bg: #f7fafc; 
    --card: #ffffff; 
    --primary: #1a365d; 
    --secondary: #4a5568; 
    --accent: #2f855a; 
    --danger: #c53030; 
    --warning: #d69e2e; 
    --text: #2d3748; 
    --border: #a0aec0; 
}

body { 
    font-family: 'Segoe UI', system-ui, sans-serif; 
    margin: 0; 
    background: var(--bg); 
    color: var(--text); 
    padding-bottom: 90px; 
}

/* --- LOGIN SCREEN --- */
#login-screen { 
    position: fixed; 
    inset: 0; 
    background: var(--bg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 2000; 
}

.login-card { 
    background: white; 
    padding: 30px; 
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    width: 90%; 
    max-width: 350px; 
    text-align: center; 
    border: 1px solid var(--border); 
}

/* --- LAYOUT & NAVIGATION --- */
.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 20px; 
    background: white; 
    border-bottom: 1px solid var(--border); 
}

.header h1 { 
    font-size: 13px; 
    margin: 0; 
    color: #a0aec0; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-weight: 600; 
}

.v-num { 
    font-size: 10px; 
    color: #cbd5e0; 
    font-weight: bold; 
}

.nav { 
    display: flex; 
    justify-content: center; 
    gap: 6px; 
    margin: 10px auto; 
    background: #edf2f7; 
    padding: 8px; 
    border-radius: 10px; 
    max-width: 100%; 
    overflow-x: auto; 
    border: 1px solid #e2e8f0; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
}

.nav-btn { 
    flex: 0 0 auto; 
    padding: 8px 16px; 
    border: none; 
    border-radius: 7px; 
    background: transparent; 
    color: var(--secondary); 
    font-weight: 600; 
    cursor: pointer; 
    font-size: 11px; 
}

.nav-btn.active { 
    background: var(--card); 
    color: var(--primary); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    border: 1px solid var(--border); 
}

.container { 
    max-width: 100%; 
    padding: 0 10px; 
    box-sizing: border-box; 
    display: none; 
}

.page { display: none; }
.page.active { display: block; }

/* --- CARDS & GENERAL UI --- */
.card { 
    background: var(--card); 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
    border: 1px solid var(--border); 
    margin-bottom: 15px; 
}

.status-group-header { 
    text-align: center; 
    font-size: 14px; 
    font-weight: 800; 
    color: var(--primary); 
    margin: 25px 0 12px 0; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

/* --- FORMS & INPUTS --- */
.form-group { margin-bottom: 12px; }

.form-label { 
    display: block; 
    font-size: 12px; 
    font-weight: 600; 
    color: var(--secondary); 
    margin-bottom: 4px; 
}

input, select { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    font-size: 14px; 
    box-sizing: border-box; 
}

#d-dato { width: 130px; }

.action-btn { 
    width: 100%; 
    padding: 12px; 
    border-radius: 8px; 
    border: none; 
    font-size: 13px; 
    font-weight: 700; 
    cursor: pointer; 
    text-transform: uppercase; 
}

.save-btn { 
    background: var(--primary); 
    color: white; 
    margin-top: 5px; 
}

.transfer-btn { 
    background: var(--accent); 
    color: white; 
    font-size: 9px; 
    padding: 4px 8px; 
    border-radius: 4px; 
    border: none; 
    cursor: pointer; 
    font-weight: bold; 
}

/* Bilag Upload Button */
.bilag-btn {
    background-color: #38a169;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    width: 100%;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.bilag-btn:hover { background-color: #276749; }

/* --- SALDO BAR --- */
.saldo-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #1a365d; 
    color: white; 
    padding: 10px 15px; 
    border-radius: 10px; 
    margin: 0 auto 15px auto; 
    max-width: 500px; 
    font-size: 13px; 
    font-weight: 600; 
    border: 1px solid var(--primary); 
}

.saldo-bar input { 
    width: 140px; 
    background: rgba(255,255,255,0.15); 
    border: 1px solid rgba(255,255,255,0.3); 
    color: white; 
    text-align: right; 
    padding: 4px 8px; 
    border-radius: 5px; 
    font-weight: 800; 
    font-size: 13px; 
}

.saldo-bar input:focus { 
    background: white; 
    color: var(--primary); 
    outline: none; 
    border-color: var(--primary); 
}

/* --- DASHBOARD GRIDS --- */
.dash-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 15px; 
    align-items: stretch; 
}
@media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } }

.stock-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 20px; 
}
@media (max-width: 700px) { .stock-grid { grid-template-columns: 1fr; } }

.dash-card { 
    background: white; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
    padding: 12px; 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
    overflow: hidden; 
    box-sizing: border-box; 
}

.dash-card-header { 
    font-weight: 800; 
    font-size: 12px; 
    color: var(--primary); 
    text-transform: uppercase; 
    margin-bottom: 8px; 
    border-bottom: 2px solid #edf2f7; 
    padding-bottom: 4px; 
    flex-shrink: 0; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
}

/* Simulation Items in Dashboard */
.sim-list-container { flex: 1; overflow: visible; padding-right: 0; }
.sim-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 4px 0; 
    border-bottom: 1px dashed #edf2f7; 
    font-size: 11px; 
}
.sim-label { font-weight: 600; color: var(--text); }
.sim-input-row { display: flex; align-items: center; gap: 5px; }
.sim-val-input { 
    width: 45px; 
    padding: 2px; 
    border: 1px solid var(--accent); 
    border-radius: 4px; 
    text-align: center; 
    font-weight: bold; 
    color: var(--accent); 
    font-size: 10px; 
}

/* --- FINANCIAL TABLES (General) --- */
.f-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.f-table td { padding: 12px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.f-table td:last-child { text-align: right; padding-right: 0 !important; }

.f-input-box { 
    width: 110px; 
    text-align: right; 
    padding: 8px; 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    font-weight: 700; 
    color: var(--primary); 
    font-family: inherit; 
    font-size: 13px; 
    box-sizing: border-box; 
    margin-right: -2px; 
    white-space: nowrap; 
}

.f-static-val { 
    font-weight: 700; 
    color: var(--primary); 
    text-align: right; 
    font-size: 13px; 
    display: inline-block; 
    width: 110px; 
    padding: 8px 0; 
    box-sizing: border-box; 
    margin-right: -2px; 
    white-space: nowrap; 
}
/* Datovælger fix - iPhone optimeret */
.f-date-box {
    font-size: 13px;
    padding: 6px;           /* Lidt mindre padding sparer plads */
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: white;
    
    /* FIX: Responsiv bredde */
    width: 100%;            /* Udnyt pladsen */
    max-width: 125px;       /* Men stop ved 125px (passer perfekt til datoer) */
    min-width: 110px;       /* Så man altid kan se årstallet */
    box-sizing: border-box; /* Sikrer at padding ikke gør den bredere */
    
    display: inline-block;
    margin-bottom: 5px;     /* Luft ned til tal-feltet */
}

}

.f-subtotal-row { background: rgba(0,0,0,0.03); font-weight: 800; color: var(--primary); }
.f-subtotal-row td { border-top: 1px solid var(--border); padding: 15px 0; }

.f-hist-container { 
    display: none; 
    background: #fcfcfc; 
    padding: 10px; 
    font-size: 11px; 
    color: var(--secondary); 
    border-left: 3px solid var(--primary); 
    margin: 5px 0; 
    line-height: 1.6; 
    border-bottom: 1px solid var(--border); 
    border-right: 1px solid var(--border); 
}

/* --- BUDGET TABLE (Horizontal scrolling) --- */
.b-table-wrapper { 
    width: auto; 
    display: inline-block; 
    max-width: 100%; 
    overflow-x: auto; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
}

.b-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.b-table th, .b-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: right; }
.b-table th { background: #f8fafc; font-weight: 600; color: var(--secondary); white-space: nowrap; }
.b-table th:first-child, .b-table td:first-child { 
    text-align: left; 
    width: auto; 
    min-width: 110px; 
    padding-left: 6px; 
    font-weight: bold; 
    border-right: 1px solid var(--border); 
    white-space: nowrap; 
}
.b-table td:last-child, .b-table th:last-child { width: 50px; padding-right: 4px; background: #f0fff4; }
.b-table tr:nth-child(even) { background-color: #fbfbfb; } 
.b-table tr:hover { background-color: #f0f7ff; }

.pct-input { 
    width: 55px; 
    padding: 4px; 
    font-size: 11px; 
    text-align: right; 
    border: 1px solid #cbd5e0; 
    border-radius: 4px; 
    font-weight: bold; 
    color: var(--secondary); 
}
.pct-input:focus { border-color: var(--primary); color: var(--primary); outline: none; background: #ebf8ff; }

/* --- INCOME MODULE --- */
.inc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px; }

#inc-summary-dashboard { 
    background: linear-gradient(135deg, #1a365d 0%, #2a4365 100%); 
    border-radius: 12px; 
    padding: 15px; 
    color: white; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin: 0 auto 20px auto; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    border: 1px solid var(--border); 
    max-width: 600px; 
}

.inc-dash-item { text-align: center; flex: 1; }
.inc-dash-label { font-size: 10px; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; margin-bottom: 5px; }
.inc-dash-val { font-size: 16px; font-weight: 800; }
.inc-dash-total { font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.inc-dash-divider { width: 1px; height: 35px; background: rgba(255,255,255,0.2); }

.inc-control-panel { 
    background: white; 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    padding: 20px; 
    margin-bottom: 25px; 
    position: relative; 
    overflow: hidden; 
    max-width: 100%; 
}

.inc-cp-header { 
    font-size: 12px; 
    font-weight: 800; 
    color: var(--secondary); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-bottom: 15px; 
    border-bottom: 2px solid #edf2f7; 
    padding-bottom: 8px; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
}

.inc-card-modern { 
    background: white; 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    overflow: hidden; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
.inc-card-modern:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.inc-card-header-modern { 
    padding: 6px 15px; 
    font-size: 12px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
.inc-header-blue { background: #ebf8ff; color: #2b6cb0; border-bottom: 1px solid #bee3f8; }
.inc-header-pink { background: #fff5f7; color: #b83280; border-bottom: 1px solid #fed7e2; }

.inc-list-item { 
    padding: 6px 12px; 
    border-bottom: 1px solid #f7fafc; 
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
} 
.inc-list-item:last-child { border-bottom: none; }

.inc-list-top { display: flex; justify-content: space-between; align-items: center; }
.inc-list-name { font-weight: 700; color: var(--text); font-size: 13px; }
.inc-list-amount { font-weight: 800; color: var(--primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.inc-list-details { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #718096; }
.inc-pill { background: #edf2f7; padding: 1px 5px; border-radius: 4px; font-weight: 600; }

.btn-transfer-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-size: 9px; padding: 2px 8px; border-radius: 20px; cursor: pointer; font-weight: 700; transition: all 0.2s; text-transform: uppercase; }
.btn-transfer-outline:hover { background: var(--accent); color: white; }

.btn-delete-outline { background: transparent; border: 1px solid var(--danger); color: var(--danger); font-size: 9px; padding: 2px 6px; border-radius: 20px; cursor: pointer; font-weight: 700; transition: all 0.2s; margin-left:5px; }
.btn-delete-outline:hover { background: var(--danger); color: white; }

.inc-group-container { margin: 6px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.inc-group-header { background: #f7fafc; padding: 4px 10px; font-weight: 800; font-size: 10px; color: #4a5568; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.5px; border-bottom:1px solid #edf2f7; }

/* --- LONG TERM PROJECTION TABLE --- */
.prof-proj-container { max-width: 100%; overflow-x: auto; display: flex; justify-content: center; height: 100%; align-items: flex-start; }
.prof-proj-card { border: none; background: white; display: inline-block; width: 100%; } 
.prof-proj-header { background: #2d3748; color: white; padding: 8px 15px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-top-left-radius: 8px; border-top-right-radius: 8px; text-align: center; }

.prof-proj-table { border-collapse: collapse; font-size: 11px; width: 100%; font-family: inherit; margin: 0 auto; }
.prof-proj-table th { background: #f7fafc; color: #4a5568; font-weight: 700; padding: 4px 6px; text-align: right; border-bottom: 2px solid #e2e8f0; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.prof-proj-table th:first-child { text-align: center; }
.prof-proj-table td { padding: 4px 6px; border-bottom: 1px solid #edf2f7; text-align: right; color: #2d3748; white-space: nowrap; }
.prof-proj-table td:first-child { text-align: center; font-weight: 600; color: #4a5568; background: #fcfcfc; border-right: 1px solid #f0f0f0; }
.prof-proj-table tr:nth-child(even) { background-color: #f9f9f9; } 
.prof-proj-row-current { background-color: #ebf8ff !important; } 
.prof-proj-row-current td:first-child { background-color: #bee3f8; color: #2c5282; }

/* --- GAVER / GIFTS --- */
.gave-person-card { background: white; border-radius: 12px; border: 1px solid var(--border); padding: 15px; margin-bottom: 15px; }
.gave-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 2px solid var(--primary); padding-bottom: 5px; }
.gave-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.gave-input-small { padding: 6px; font-size: 11px; border-radius: 5px; border: 1px solid #ddd; width: 100%; box-sizing: border-box; }
.rest-beloeb { font-weight: 800; font-size: 14px; color: var(--accent); }
.gave-quick-add { background: #f1f5f9; padding: 10px; border-radius: 8px; margin-top: 10px; display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: flex-end; }
.gave-quick-add > div.full-width { grid-column: span 2; }

/* --- CHARTS WRAPPER --- */
.chart-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
@media (max-width: 600px) { .chart-wrapper { grid-template-columns: 1fr; } }
.chart-box { background: white; border-radius: 12px; padding: 10px; border: 1px solid var(--border); text-align: center; }
.chart-title { font-size: 11px; font-weight: 800; color: var(--secondary); margin-bottom: 10px; text-transform: uppercase; }

/* --- SUBSCRIPTIONS / FASTE UDGIFTER --- */
.subs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 20px; }
.sub-box { background: white; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sub-header { padding: 10px; text-align: center; font-weight: 800; font-size: 13px; color: white; text-transform: uppercase; }
.sub-bg-abo { background: #e53e3e; } .sub-bg-tv { background: #3182ce; } .sub-bg-kon { background: #38a169; } .sub-bg-tel { background: #805ad5; }
.sub-list { padding: 0; margin: 0; list-style: none; flex: 1; }
.sub-item { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #f1f1f1; font-size: 12px; align-items: center; }
.sub-item:last-child { border-bottom: none; }
.sub-total { background: #f8fafc; padding: 10px; font-weight: 800; font-size: 13px; text-align: right; border-top: 2px solid var(--border); color: var(--text); }
.sub-add { padding: 10px; border-top: 1px solid var(--border); background: #fff; display: grid; grid-template-columns: 2fr 1fr 40px; gap: 5px; }
.sub-add input { padding: 4px; font-size: 11px; border: 1px solid #ddd; border-radius: 4px; width: 100%; box-sizing:border-box; }
.sub-add-btn { background: var(--secondary); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; padding: 0; text-transform:uppercase; }

/* --- SETTINGS PAGE --- */
.settings-list { margin-top: 8px; font-size: 11px; border: 1px solid var(--border); border-radius: 6px; }
.settings-item { padding: 6px 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: white; }
.settings-item:last-child { border-bottom: none; }
.settings-btn-group { display: flex; gap: 8px; }
.edit-setting-btn { border: none; background: none; color: var(--warning); font-weight: bold; cursor: pointer; font-size:10px; }
.del-setting-btn { border: none; background: none; color: var(--danger); font-weight: bold; cursor: pointer; font-size:10px; }

/* --- STATUS BARS (Large) --- */
.big-status-bar-container { background: white; border-radius: 12px; border: 1px solid var(--border); padding: 15px; margin-bottom: 20px; text-align: center; }
.big-status-label { font-size: 12px; font-weight: 800; color: var(--secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.big-progress-bg { height: 12px; background: #e2e8f0; border-radius: 6px; overflow: hidden; width: 100%; position: relative; }
.big-progress-fill { height: 100%; transition: width 0.8s ease; }
.big-status-text { margin-top: 8px; font-size: 14px; font-weight: bold; color: var(--primary); }
.big-status-sub { font-size: 10px; color: #a0aec0; }

/* --- FORMUE SECTIONS --- */

/* --- FORMUE SECTIONS (Opdateret B1.1 Uniform Design) --- */

/* Fælles kort-design for ALLE formue-sektioner */
.formue-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden; /* Sikrer at headeren følger de runde hjørner */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Ensartet overskrift til alle bokse */
.formue-header {
    background: var(--primary);
    color: white;
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--primary);
}

/* iPhone-venlige inputs (Mindst 16px for at undgå auto-zoom) */
.f-input-box { 
    width: 100%; 
    text-align: right; 
    padding: 10px; /* Mere luft til fingrene */
    border: 1px solid #cbd5e0; 
    border-radius: 6px; 
    font-weight: 700; 
    color: var(--text); 
    font-family: inherit; 
    font-size: 16px; /* VIGTIGT for iPhone */
    box-sizing: border-box; 
    background: #fcfcfc;
    appearance: none; /* Fjerner standard iOS skygger */
}

.f-input-box:focus {
    border-color: var(--primary);
    background: white;
    outline: none;
}

/* Tabel justeringer */
.f-table td {
    padding: 12px 10px; /* Mere luft */
    border-bottom: 1px solid #edf2f7;
    font-size: 14px;
}

/* Datovælger fix */
.f-date-box {
    font-size: 13px;
    padding: 8px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: white;
}

/* Fjern de gamle farve-specifikke klasser hvis de stadig driller */
.f-sec-joergen, .f-sec-anette, .f-sec-aktier, .f-sec-kontant {
    background: white !important;
    border: none !important;
}





/* --- FERIE TABLES --- */
.ferie-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ferie-table th { background: #f0fff4; text-align: left; padding: 8px; color: var(--accent); font-weight: 800; border-bottom: 2px solid var(--accent); }
.ferie-table td { padding: 8px; border-bottom: 1px solid #edf2f7; }
.ferie-pos { color: var(--accent); font-weight: bold; }
.ferie-neg { color: var(--danger); font-weight: bold; }
.ferie-saldo-col { font-weight: 800; color: var(--primary); text-align: right; }
.ferie-plan-th { background: #e6fffa !important; color: #319795 !important; border-bottom: 2px solid #319795 !important; }

/* --- STATUS HISTORIK TABLE --- */
.sh-table { width: 100%; border-collapse: collapse; margin-top: 5px; }
.sh-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; font-size: 11px; vertical-align: middle; color: var(--text); }
.sh-table tr:last-child td { border-bottom: none; }
.sh-table tr:nth-child(even) { background-color: #f8fafc; } 
.sh-table tr:hover { background-color: #edf2f7; transition: background 0.1s; }
.sh-date { color: #718096; width: 70px; white-space: nowrap; font-size: 10px; font-weight: 600; vertical-align: top; }
.sh-desc { font-weight: 500; vertical-align: top; }
.sh-amount { text-align: right; font-weight: 700; white-space: nowrap; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; width: 80px; vertical-align: top; }
.sh-actions { text-align: right; width: 60px; white-space: nowrap; vertical-align: top; }

.sh-btn { border: none; background: transparent; cursor: pointer; font-size: 9px; font-weight: bold; padding: 2px 6px; border-radius: 4px; transition: all 0.2s; display: inline-block; }
.sh-btn-edit { color: var(--primary); background: #ebf8ff; margin-right: 2px; border: 1px solid #bee3f8; }
.sh-btn-edit:hover { background: var(--primary); color: white; border-color: var(--primary); }
.sh-btn-del { color: var(--danger); background: #fff5f5; border: 1px solid #fed7e2; }
.sh-btn-del:hover { background: var(--danger); color: white; border-color: var(--danger); }

.sh-tag { display: inline-block; background: #e2e8f0; color: #4a5568; padding: 1px 4px; border-radius: 3px; font-size: 9px; margin-left: 5px; font-weight: 600; vertical-align: text-top; }

/* --- FOOTER / TOTALS --- */
.bottom-totals { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: white; 
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    padding: 12px; 
    border-top: 2px solid var(--primary); 
    font-size: 13px; 
    font-weight: bold; 
    z-index: 1000; 
}

.bottom-bank-input {
    width: 120px;
    background: #f7fafc;
    border: 1px solid var(--primary);
    color: var(--primary);
    text-align: right;
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 13px;
    margin-left: 8px;
    font-family: inherit;
}

.bottom-bank-input:focus {
    background: #edf2f7;
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

/* --- TOAST NOTIFICATIONS --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    background: white;
    color: var(--text);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 5px solid var(--primary);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    min-width: 250px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-left-color: var(--accent); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--primary); }

/* --- PRINT MEDIA QUERY --- */
@media print {
    #main-app, #login-screen, #toast-container { display: none !important; } 
    body { padding: 0; background: white; font-size: 10pt; color: black; font-family: 'Segoe UI', sans-serif; overflow: visible; }
    #print-view { display: block !important; width: 100%; margin: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 9999; }
    .print-frame { border: 2px solid #1a365d; border-radius: 8px; padding: 30px; min-height: 95vh; position: relative; }
    .print-header { border-bottom: 2px solid #1a365d; padding-bottom: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; }
    .print-header h1 { margin: 0; font-size: 24px; color: #1a365d; text-transform: uppercase; letter-spacing: 2px; }
    .print-header h2 { margin: 0; font-size: 16px; color: #4a5568; font-weight: 400; }
    .print-footer { position: absolute; bottom: 10px; left: 30px; right: 30px; border-top: 1px solid #e2e8f0; padding-top: 10px; font-size: 10px; color: #a0aec0; display: flex; justify-content: space-between; }
    
    .p-table { width: 100%; border-collapse: collapse; font-size: 10px; }
    .p-table th { text-align: left; border-bottom: 2px solid #000; padding: 6px 4px; font-weight: 700; text-transform: uppercase; color: #000; vertical-align: bottom; }
    .p-table th.p-right, .p-table td.p-right { text-align: right; }
    .p-table td { border-bottom: 1px solid #eee; padding: 6px 4px; color: #333; vertical-align: middle; }
    .p-table tr:last-child td { border-bottom: 2px solid #000; }
    .p-bold { font-weight: 700; color: #000; }
    
    .print-chart-img { max-width: 100%; height: auto; display: block; margin: 20px auto; border: 1px solid #eee; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
#print-view { display: none; }
/* Eksisterende variabler (Standard / Light Mode) */
:root { 
    --bg: #f7fafc; 
    --card: #ffffff; 
    --primary: #1a365d; 
    --secondary: #4a5568; 
    --text: #2d3748; 
    --border: #a0aec0;
    /* ... dine andre farver */
}

/* NYT: Dark Mode overskrivelser */
body.dark-mode {
    --bg: #1a202c;           /* Mørk baggrund */
    --card: #2d3748;         /* Mørkere kort */
    --primary: #90cdf4;      /* Lysere blå til tekst på mørk baggrund */
    --secondary: #a0aec0;    /* Lysere grå */
    --text: #f7fafc;         /* Hvid tekst */
    --border: #4a5568;       /* Mørk border */
}

/* Fix for inputs i dark mode (så man kan se hvad man skriver) */
body.dark-mode input, 
body.dark-mode select {
    background-color: #4a5568;
    color: white;
    border-color: #718096;
}
/* --- DARK MODE FIXES (LAPPELØSNING) --- */

/* 1. Tving alle "hvide" kort til at bruge den mørke baggrundsfarve */
body.dark-mode .card,
body.dark-mode .settings-item,
body.dark-mode .inc-card-modern,
body.dark-mode .inc-control-panel,
body.dark-mode .login-card,
body.dark-mode .dash-card,
body.dark-mode .sub-box,
body.dark-mode .sub-add,
body.dark-mode .gave-person-card,
body.dark-mode .big-status-bar-container,
body.dark-mode .year-selector-container select {
    background-color: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* 2. Fix striber i tabeller (så de ikke er kridhvide) */
body.dark-mode tr:nth-child(even),
body.dark-mode .sh-table tr:nth-child(even),
body.dark-mode .prof-proj-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 3. Fix specifikke overskrifter i Indstillinger */
body.dark-mode .settings-item b {
    color: var(--primary) !important;
}

/* 4. Fix ferie-tabellens overskrifter */
body.dark-mode .ferie-table th {
    background-color: rgba(47, 133, 90, 0.2) !important; /* Mørkegrøn gennemsigtig */
    color: #9ae6b4 !important;
    border-bottom-color: var(--accent) !important;
}

/* 5. Fix små knapper (RET/SLET) så de kan ses */
body.dark-mode .sh-btn-edit {
    background-color: rgba(66, 153, 225, 0.2);
    color: #90cdf4;
    border-color: #4299e1;
}
body.dark-mode .sh-btn-del {
    background-color: rgba(245, 101, 101, 0.2);
    color: #feb2b2;
    border-color: #f56565;
}
/* --- MOBIL MENU (HAMBURGER) STYLES --- */

/* 1. Skjul hamburger-knappen på computeren */
#mobile-menu-btn {
    display: none; /* Skjult som standard */
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--primary);
    margin-right: 10px;
}

/* 2. Regler der KUN gælder på mobil (skærme mindre end 768px) */
@media (max-width: 768px) {
    
    /* Vis hamburger-knappen */
    #mobile-menu-btn {
        display: block;
    }

    /* Lav navigations-baren om til en lodret menu */
    .nav {
        display: none; /* Skjult som standard på mobil */
        flex-direction: column; /* Lodret liste */
        position: absolute; /* Læg den ovenpå indholdet */
        top: 60px; /* Lige under headeren */
        left: 0;
        right: 0;
        background-color: var(--card);
        padding: 15px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1000; /* Sørg for den ligger øverst */
        border-bottom: 2px solid var(--primary);
    }

    /* Når vi tilføjer klassen 'show', skal den vises */
    .nav.show {
        display: flex;
    }

    /* Gør knapperne større og mere tryk-venlige på mobil */
    .nav-btn {
        width: 100%;
        text-align: left;
        padding: 12px;
        margin-bottom: 5px;
        font-size: 14px;
        border: 1px solid var(--border);
    }
}
/* --- MOBIL FIXES (B1.1 UPDATE) --- */

/* 1. Den Gyldne Regel: Sørg for at rammer og padding ikke gør ting bredere end 100% */
* {
    box-sizing: border-box;
}

/* 2. Fix af Menu-bredde */
@media (max-width: 768px) {
    .nav {
        width: 100%;
        left: 0;
        right: 0;
        margin: 0; /* Fjern evt. margin */
        border-radius: 0 0 10px 10px; /* Kun rund i bunden */
    }
}

/* --- MOBIL FIXES (B1.2 "Sledgehammer") --- */

/* 1. Generel mobil-regel */
@media (max-width: 768px) {
    
    /* MENU FIX: Tving menuen helt ud til kanten */
    .nav {
        width: 100% !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important; /* Firkantede hjørner så den flugter */
        position: absolute !important;
        z-index: 9999 !important;
        top: 55px !important; /* Juster så den passer under headeren */
    }

    /* Gør knapperne i menuen store og firkantede */
    .nav-btn {
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 15px !important;
        border-bottom: 1px solid #eee !important;
    }
}

/* --- MOBIL FIXES (B1.3 - Menu & Layout Update) --- */

/* 1. Global Box Sizing (Vigtig for bredde) */
* { box-sizing: border-box; }

/* 2. MOBIL MENU (Fuld skærm) */
@media (max-width: 768px) {
    /* Skjul menuen som standard */
    .nav {
        display: none; 
    }

    /* Når menuen er åben (.show klassen tilføjes af JS) */
    .nav.show {
        display: flex !important;
        flex-direction: column !important;
        
        /* Lås menuen til skærmen */
        position: fixed !important;
        top: 50px !important; /* Lige under headeren */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important; /* Helt ned til bunden */
        background-color: var(--bg) !important; /* Brug sidens baggrundsfarve */
        
        z-index: 10000 !important; /* Øverst af alt */
        padding: 20px !important;
        overflow-y: auto !important; /* Scroll hvis den er for lang */
        border-top: 1px solid var(--border) !important;
        gap: 10px !important; /* Luft mellem knapper */
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Store, tydelige knapper i menuen */
    .nav-btn {
        width: 100% !important;
        text-align: left !important;
        padding: 15px !important;
        font-size: 16px !important; /* Større tekst */
        border: 1px solid var(--border) !important;
        background-color: var(--card) !important;
        margin: 0 !important;
    }
}

/* --- MOBIL FIXES (B1.4 - Dato & Layout Update) --- */

/* 1. Global Box Sizing */
* { box-sizing: border-box; }

/* 2. MOBIL MENU (Uændret, den virkede godt) */
@media (max-width: 768px) {
    .nav { display: none; }
    .nav.show {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: var(--bg) !important;
        z-index: 10000 !important;
        padding: 20px !important;
        overflow-y: auto !important;
        border-top: 1px solid var(--border) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .nav-btn {
        width: 100% !important;
        text-align: left !important;
        padding: 15px !important;
        font-size: 16px !important;
        border: 1px solid var(--border) !important;
        background-color: var(--card) !important;
        margin: 0 !important;
    }
}

/* 3. FIXES TIL SMÅ SKÆRME */
@media (max-width: 600px) {

    /* --- FORMUE FIX (Smal dato + ens tal) --- */
    /* Vi splitter stadig formue-tabellen op for læsbarhed */
    .f-table tr {
        display: flex !important;
        flex-direction: column !important;
        border-bottom: 2px solid #eee !important;
        padding: 8px 0 !important;
    }
    /* ... MEN vi undtager Gave-historikken (se længere nede) */
    
    .f-table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 2px 0 !important;
        border: none !important;
    }
    
    /* Tal og inputs i Formue */
    .f-input-box, .f-static-val {
        font-size: 16px !important;
        width: 100% !important;
        height: 35px !important;
        text-align: left !important;
        display: block !important;
        padding: 5px !important;
    }
    
    /* DATO I FORMUE - Gøres smal! */
    .f-date-box {
        width: auto !important;      /* Må kun fylde det den skal */
        max-width: 120px !important; /* Max bredde */
        margin-bottom: 5px !important;
        font-size: 14px !important;
    }

    .f-table td:first-child {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: var(--secondary) !important;
        margin-bottom: 5px !important;
        text-transform: uppercase !important;
    }

    /* --- GAVE HISTORIK FIX (Samlet på én linje) --- */
    /* Vi tvinger gave-tabellen TILBAGE til normal tabel-visning */
    #gift-full-history .f-table tr {
        display: table-row !important;
        border-bottom: 1px solid #eee !important;
    }
    #gift-full-history .f-table td {
        display: table-cell !important;
        width: auto !important;
        padding: 6px 2px !important;
        vertical-align: top !important;
    }
    #gift-full-history .f-table td:first-child {
        font-size: 11px !important; /* Mindre skrift for dato */
        font-weight: normal !important;
        width: 70px !important; /* Fast smal bredde til dato */
        color: #718096 !important;
    }
    #gift-full-history .f-table td:nth-child(3) { /* Beløb */
        text-align: right !important;
        font-weight: bold !important;
    }

    /* --- GENEREL INPUT FIX (Datoer må ikke være 100% brede overalt) --- */
    input[type="date"] {
        max-width: 140px !important; /* Begræns dato-bredde generelt */
        width: auto !important;
    }
    
    /* Undtagelse: I "Indtast" (Gaver/Indkøb) må dato gerne være fuld bredde for nemheds skyld */
    .gave-quick-add input[type="date"],
    #d-dato {
        max-width: 100% !important;
    }

    /* --- GAVER INDTASTNING (Stabel elementer) --- */
    .gave-quick-add {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .gave-quick-add input[type="text"], 
    .gave-quick-add input[type="number"] {
        width: 100% !important;
    }

    /* --- DASHBOARD RAPPORT DATOER (Side om side hvis plads) --- */
    #print-opt-period {
        display: flex !important;
        gap: 5px !important;
    }
    #print-opt-period input {
        flex: 1 !important; /* Del pladsen ligeligt */
        min-width: 0 !important;
    }
    
    /* --- BUDGET FERIE DATO (Smal) --- */
    div[style*="grid-template-columns: 50px 1fr 60px"] {
        display: flex !important;
        gap: 5px !important;
        align-items: center !important;
    }
    /* Dato feltet i ferie rækken */
    div[style*="grid-template-columns: 50px 1fr 60px"] div:nth-child(2) input {
        width: 110px !important;
    }
}
/* --- CSS FIX: Ensartede tal overalt --- */

/* Standardiseret visning af tal (ikke inputs) */
.f-static-val { 
    display: block;
    width: 100%;
    text-align: right; 
    font-weight: 700; 
    color: var(--primary); 
    font-size: 15px; /* Fast størrelse, ikke for stor, ikke for lille */
    padding: 10px;   /* Samme luft som input felterne */
    box-sizing: border-box;
    white-space: nowrap;
}

/* Sikrer at input felter og statiske tal flugter perfekt */
.f-input-box {
    font-size: 16px; /* Beholder 16px for at undgå iPhone zoom */
    padding: 9px;    /* Justeret let så højden matcher tekst-tallene */
}
/* --- Begræns bredden på Indstillinger --- */
#p-set, 
#p-indstillinger {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
}
/* Fikser for brede dropdown-menuer */
#inc-year-select, 
#budget-year-select {
    width: auto;
    min-width: 120px;
    display: inline-block;
}
/* Fikser læsbarheden i Analysemodulet under Dark Mode */
body.dark-mode #p-ana div[style*="color: #2d3748"],
body.dark-mode #p-ana div[style*="color:#2d3748"],
body.dark-mode #p-ana td[style*="color: #2d3748"],
body.dark-mode #p-ana td[style*="color:#2d3748"] {
    color: #f7fafc !important; /* Gør teksten hvid */
}

body.dark-mode #p-ana div[style*="color: #4a5568"],
body.dark-mode #p-ana td[style*="color: #4a5568"] {
    color: #e2e8f0 !important; /* Gør undertekster lysegrå */
}

/* Fikser Pop-up (Drill-down) vinduet i Dark mode */
body.dark-mode #drilldown-overlay > div {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
}

body.dark-mode #drilldown-overlay h3 {
    color: #63b3ed !important; /* Lysere blå til overskriften */
}

body.dark-mode #drilldown-overlay td[style*="color: #2d3748"] {
    color: #f7fafc !important;
}

body.dark-mode #drilldown-overlay td[style*="color: #4a5568"] {
    color: #e2e8f0 !important;
}

body.dark-mode #drilldown-overlay span[style*="background:#edf2f7"] {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

/* ==========================================
   BENTZEN BI - Analyse CSS
   ========================================== */

/* Fælles tabel */
.bi-table { width: 100%; border-collapse: collapse; font-size: 12px; }

/* Shop-liste rækker */
.bi-shop-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--border);
    cursor: pointer; font-size: 13px; transition: background .15s, padding-left .15s;
    border-radius: 4px;
}
.bi-shop-row:hover { background: var(--bg-main); padding-left: 6px; }
.bi-shop-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }

/* Rang-badge */
.bi-rank {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
    text-align: center; background: var(--border); color: var(--secondary);
    border-radius: 4px; font-size: 10px; font-weight: 700; margin-right: 4px;
}

/* Konto-badge */
.bi-badge {
    display: inline-block; background: var(--border); color: var(--secondary);
    padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 600;
    margin-left: 4px; vertical-align: middle;
}

/* Top10 tabel */
.bi-top10-row { border-bottom: 1px solid var(--border); transition: background .1s; }
.bi-top10-row:hover { background: var(--bg-main); }
.bi-top10-dato  { padding: 9px 4px; color: var(--secondary); width: 38px; font-size: 11px; vertical-align: top; white-space: nowrap; }
.bi-top10-besk  { padding: 9px 6px; color: var(--text-main); font-weight: 600; line-height: 1.5; }
.bi-top10-beloeb { padding: 9px 4px; text-align: right; font-weight: 800; color: #e53e3e; white-space: nowrap; vertical-align: top; }

/* Drill-down tabel */
.bi-drill-row { border-bottom: 1px solid var(--border); }
.bi-empty { text-align: center; padding: 20px; color: var(--secondary); font-style: italic; }

/* Balance bar */
.bi-bar-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--secondary); margin-bottom: 6px;
}
.bi-bar-track {
    display: flex; height: 30px; border-radius: 15px; overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.12);
}
.bi-bar-faste {
    background: linear-gradient(90deg, #2c5282, #3182ce);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; cursor: pointer; transition: opacity .2s;
}
.bi-bar-faste:hover { opacity: .85; }
.bi-bar-var {
    background: linear-gradient(90deg, #c05621, #ed8936);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; cursor: pointer; transition: opacity .2s;
}
.bi-bar-var:hover { opacity: .85; }
.bi-bar-footer {
    display: flex; justify-content: space-between;
    margin-top: 5px; font-size: 11px; color: var(--secondary);
}

/* Sektion-titel */
.bi-section-title {
    font-size: 11px; font-weight: 800; text-align: center;
    margin-bottom: 18px; color: var(--text-main);
    text-transform: uppercase; letter-spacing: .08em; opacity: .75;
}

/* Fade-in animation til analyse-modal */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ==========================================
   📱 iPHONE OPTIMERING
   Påvirker KUN skærme under 430px
   ========================================== */

@media (max-width: 430px) {

    /* --- GENERELT --- */
    body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
    }

    /* Forhindre zoom på input-felter (iOS zoomer ved font-size < 16px) */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Undgå vandret scroll */
    .page, .main-content, .dash-card {
        overflow-x: hidden;
    }

    /* --- HEADER --- */
    .header {
        padding: 8px 12px;
    }
    .header h1, .app-title {
        font-size: 15px !important;
    }

    /* --- INDHOLD: padding og bredde --- */
    .page {
        padding: 10px 8px !important;
    }
    .dash-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }
    .dash-card-header {
        font-size: 13px !important;
    }

    /* --- DASH GRID: altid 1 kolonne på iPhone --- */
    .dash-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* --- KNAPPER: store nok til fingre --- */
    .btn, button:not(.nav-btn):not(.sh-btn):not([style]) {
        min-height: 44px;
    }
    .sh-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* --- UAFSTEMTE POSTERINGER --- */
    .status-item, #uafstemte-list > div {
        padding: 10px !important;
    }

    /* --- INDTASTNINGS-FORMULAR --- */
    #d-dato, #d-beloeb, #d-besk, #d-konto, #d-tag {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .bilag-btn {
        font-size: 13px !important;
        padding: 12px !important;
        min-height: 44px !important;
    }
    #save-btn-main {
        min-height: 50px !important;
        font-size: 15px !important;
    }

    /* --- NAVIGATIONS-MENU --- */
    #mobile-menu-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
    }

    /* --- TABELLER: undgå klip --- */
    table {
        font-size: 12px !important;
    }
    td, th {
        padding: 6px 4px !important;
    }

    /* --- GRAFER: fuld bredde --- */
    .chart-wrapper, .chart-box {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
    canvas {
        max-width: 100% !important;
    }

    /* --- ANALYSE --- */
    #faste-var-container {
        padding: 10px !important;
    }

    /* --- KPI BOKSE --- */
    .kpi-box, .stat-box {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    /* --- NOTATER --- */
    #notat-content {
        padding: 8px 0 !important;
    }
    #not-editor-card {
        padding: 12px !important;
    }

    /* --- FORMUE TABEL --- */
    .f-table {
        font-size: 12px !important;
    }

    /* --- SAFE AREA (iPhone notch/hjemmebar) --- */
    .header {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}