/* ==========================================
   GLOBALE VARIABLER (GLASSMORPHISM)
   ========================================== */
:root {
    --bg-deep: #05080c;
    --glass-panel: rgba(20, 25, 32, 0.6);
    --glass-input: rgba(0, 0, 0, 0.35);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    --shadow-heavy: 0 10px 30px rgba(0,0,0,0.5);
    --shadow-inset: inset 0 2px 10px rgba(0,0,0,0.2);
}

* { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; }
input, textarea, select { -webkit-user-select: auto; -ms-user-select: auto; user-select: auto; }

html, body { height: 100%; margin: 0; overflow-x: hidden; background-color: var(--bg-deep); background-image: radial-gradient(circle at 15% 50%, rgba(0, 188, 212, 0.04), transparent 40%), radial-gradient(circle at 85% 30%, rgba(76, 175, 80, 0.04), transparent 40%); background-attachment: fixed; color: #e0e0e0; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.app-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-bottom: 1px solid var(--glass-border); background: var(--glass-panel); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); position: sticky; top: 0; z-index: 1000; }
.header-title-group { display: flex; align-items: center; gap: 15px; margin: 0 auto; }
.app-icon { width: 40px; height: 40px; border-radius: 10px; }
.app-title { font-size: 1.8rem; color: #e0e0e0; margin: 0; }
.btn-back { display: none; background: none; border: none; color: #e0e0e0; padding: 5px; cursor: pointer; }
.header-spacer { width: 34px; display: none; }
.app-body { display: flex; flex-direction: column; height: calc(100% - 61px); }

/* Menuen på mobil */
#main-navigation { width: 100%; padding: 15px; display: none; }
body.on-home #main-navigation { display: block; }
body.on-home .btn-back { display: none; }
body:not(.on-home) .btn-back { display: block; }
body:not(.on-home) .header-spacer { display: block; }
#app-content { flex-grow: 1; padding: 15px; overflow-y: auto; overflow-x: hidden; }
.container { width: 100%; margin: 0 auto; }

/* ==========================================
   GLASSMORPHISM KOMPONENTER & KASSER
   ========================================== */
.app-view { display: none; background: transparent; padding: 0; }
.app-view.active { display: block; animation: slideInFade 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
@keyframes slideInFade { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }

.input-block, .calculation-table, .sv-data-box, .ft-result-box, .ka-diagram-wrap, .ka-status-box {
    background: var(--glass-input); border: 1px solid var(--glass-border); border-radius: 12px; padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow-inset); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.p48-guide, .rf-instruction-box { border: 1px solid #4caf50; background: rgba(76, 175, 80, 0.1); color: #a8e6ab; padding: 15px; border-radius: 8px; margin-top: 10px; line-height: 1.4; }

/* ==========================================
   TEMA FARVER
   ========================================== */
h1 { text-align: center; margin-top: 0; margin-bottom: 20px; font-size: 1.5rem; border-bottom: 2px solid; padding-bottom: 8px; letter-spacing: 1px; }
h2 { display: none; }
.theme-nav h1 { color: #4caf50; border-color: #4caf50; }
.theme-vek h1 { color: #00bcd4; border-color: #00bcd4; }
.theme-kim h1 { color: #ff9800; border-color: #ff9800; }
.theme-pub h1 { color: #2196f3; border-color: #2196f3; }
.text-red { color: #ef5350; }
.text-green { color: #76ff03; }
#p48_btnBB.active { background-color: #f44336; color: #fff; border-color: #f44336; box-shadow: 0 0 15px rgba(244, 67, 54, 0.3); }

/* ==========================================
   MENU & KNAPPER (UNIVERSAL HOVER)
   ========================================== */
.nav-category { color: #64748b; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; margin: 24px 0 10px 5px; }

/* Basis-styling til knapperne */
.btn-menu {
    display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; padding: 16px 20px; margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; color: #e0e0e0; font-weight: 600; font-size: 1.05rem; cursor: pointer;
    transition: all 0.3s ease;
}

/* Base gradients (Non-hover) */
.btn-menu.nav-btn { background: linear-gradient(to left, rgba(118, 255, 3, 0.25) 0%, rgba(42, 42, 42, 0.4) 60%, rgba(42, 42, 42, 0.2) 100%); }
.btn-menu.vek     { background: linear-gradient(to left, rgba(0, 188, 212, 0.25) 0%, rgba(42, 42, 42, 0.4) 60%, rgba(42, 42, 42, 0.2) 100%); }
.btn-menu.kim     { background: linear-gradient(to left, rgba(255, 152, 0, 0.25) 0%, rgba(42, 42, 42, 0.4) 60%, rgba(42, 42, 42, 0.2) 100%); }
.btn-menu.pub     { background: linear-gradient(to left, rgba(33, 150, 243, 0.25) 0%, rgba(42, 42, 42, 0.4) 60%, rgba(42, 42, 42, 0.2) 100%); }

/* Hover Gradients for alle kategorier */
.btn-menu.nav-btn:hover { background: linear-gradient(to left, rgba(118, 255, 3, 0.4) 0%, rgba(118, 255, 3, 0.2) 75%, rgba(42, 42, 42, 0.1) 100%); transform: translateX(4px); }
.btn-menu.vek:hover     { background: linear-gradient(to left, rgba(0, 188, 212, 0.4) 0%, rgba(0, 188, 212, 0.2) 75%, rgba(42, 42, 42, 0.1) 100%); transform: translateX(4px); }
.btn-menu.kim:hover     { background: linear-gradient(to left, rgba(255, 152, 0, 0.4) 0%, rgba(255, 152, 0, 0.2) 75%, rgba(42, 42, 42, 0.1) 100%); transform: translateX(4px); }
.btn-menu.pub:hover     { background: linear-gradient(to left, rgba(33, 150, 243, 0.4) 0%, rgba(33, 150, 243, 0.2) 75%, rgba(42, 42, 42, 0.1) 100%); transform: translateX(4px); }

/* Ikon-farver */
.btn-menu.nav-btn svg { color: #76ff03; pointer-events: none; }
.btn-menu.vek svg     { color: #00bcd4; pointer-events: none; }
.btn-menu.kim svg     { color: #ff9800; pointer-events: none; }
.btn-menu.pub svg     { color: #2196f3; pointer-events: none; }

.mode-selector { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.mode-btn { flex: 1; background: var(--glass-input); color: #c0c0c0; border: 1px solid var(--glass-border); padding: 12px 5px; font-size: 0.85rem; font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.mode-btn.active { background-color: #4caf50; color: #121212; border-color: #4caf50; box-shadow: 0 0 15px rgba(76, 175, 80, 0.3); }
.theme-vek .mode-btn.active { background-color: #00bcd4; border-color: #00bcd4; box-shadow: 0 0 15px rgba(0, 188, 212, 0.3); }

/* ==========================================
   INPUTS & SYMMETRI
   ========================================== */
.controls-row { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.controls-row > input, .controls-row > select { flex: 0 0 100%; order: 1; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #555; padding: 12px 10px; font-size: 1.2rem; font-weight: bold; border-radius: 8px; text-align: center; }
.controls-row > input:focus, .controls-row > select:focus { border-color: #4caf50; box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); outline: none; }
.controls-row > .btn-fine, .controls-row > .p48-time-btn { flex: 1; order: 2; height: 44px; background: rgba(0,0,0,0.5); color: #4caf50; border: 1px solid #555; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-size: 1.4rem; }
.controls-row > .btn-fine:active { background-color: #4caf50; color: #121212; border-color: #4caf50; }
.theme-vek .btn-fine { color: #00bcd4; }
.theme-kim .btn-fine { color: #ff9800; }
.controls-row > .p48-time-btn { color: #fff; font-size: 1rem; font-weight: bold; }
.controls-row.multi-grid { flex-wrap: nowrap; gap: 8px; }
.controls-row.multi-grid > .grid-col { flex: 1; order: 1; display: flex; flex-direction: column; align-items: center; }
.controls-row.multi-grid input, .controls-row.multi-grid select { flex: unset; width: 100%; font-size: 1rem; padding: 8px; }

/* FIX: SEJLTID & MISVISNING SIDE-OM-SIDE */
.controls-row > .grid-col { flex: 1 1 40%; order: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.controls-row > .grid-col > .sub-label { text-align: center; margin-top: 6px; color: #aaa; font-size: 0.85rem; font-weight: normal; }
.grid-col input, .grid-col select { background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #555; border-radius: 8px; text-align: center; padding: 12px 10px; font-size: 1.2rem; font-weight: bold; width: 100%; }
.grid-col select { appearance: none; -webkit-appearance: none; }

/* Range sliders */
input[type=range] { -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.1); height: 8px; border-radius: 4px; outline: none; padding: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #222; border: 3px solid #4caf50; cursor: pointer; }

/* Publikations dropdowns */
.dropdown-row { display: flex; gap: 10px; width: 100%; align-items: center; margin-bottom: 10px; }
.dropdown-row select { flex: 1; min-width: 0; padding: 12px 10px; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #555; border-radius: 8px; font-size: 1.1rem; }
.dropdown-row button { flex-shrink: 0; padding: 12px 20px; background: rgba(33, 150, 243, 0.2); color: #2196f3; border: 1px solid #2196f3; border-radius: 8px; font-weight: bold; cursor: pointer; }

/* Ryd Data Knap */
.btn-bottom-row { display: flex; margin-top: 20px; width: 100%; }
.btn-clear { flex-grow: 1; background: rgba(211, 47, 47, 0.2); color: #ff8a65; border: 1px solid #d32f2f; padding: 15px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: background 0.3s ease; }
.btn-clear:hover { background: rgba(211, 47, 47, 0.4); color: #fff; }

/* ==========================================
   TABELLER & TEKSTER
   ========================================== */
.table-header { color: #76ff03; font-size: 1rem; font-weight: bold; text-align: center; border-bottom: 2px solid #76ff03; padding-bottom: 8px; margin-bottom: 10px; letter-spacing: 0.5px; }
.calc-row { display: grid; grid-template-columns: 80px 1fr 70px; gap: 6px; align-items: center; padding: 6px 0; font-family: monospace; font-size: 0.95rem; }
.calc-row.line-below { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; margin-bottom: 4px; }
.calc-row.double-line-below { border-bottom: 3px double #76ff03; padding-bottom: 8px; margin-bottom: 4px; }
.val-num { text-align: right; font-weight: bold; color: #fff; }
.val-num.highlight { color: #76ff03; font-size: 1.15rem; }
.p48-result-text strong { color: #76ff03; font-size: 1.15rem; }
.section-title { font-size: 0.95rem; font-weight: bold; color: #b0b0b0; margin: 5px 0 10px 0; }
.input-label { display: block; font-size: 0.85rem; color: #c0c0c0; margin-bottom: 6px; }
.center-bold { text-align: center; font-weight: bold; margin-top: 8px; color: #fff; font-size: 1.1rem;}

/* ==========================================
   KIMNINGSAFSTAND (NYT DESIGN)
   ========================================== */
.ka-value-display { text-align: center; font-weight: bold; font-size: 1.3rem; color: #ff9800; background: rgba(0,0,0,0.5); border: 1px solid #555; padding: 12px; border-radius: 8px; margin: 5px 0 15px 0; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); width: 100%; }

/* Status Boksen */
.ka-status-box { padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 10px; border: 2px solid transparent; transition: all 0.5s ease; }
.ka-status-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; }
.ka-status-val { font-size: 1.2rem; font-weight: bold; }

/* Status Farver */
.ka-status-red { border-color: #f44336; background: rgba(244, 67, 54, 0.1); color: #f44336; }
.ka-status-red .ka-status-val { color: #ffcdd2; }

.ka-status-yellow { border-color: #ff9800; background: rgba(255, 152, 0, 0.1); color: #ff9800; }
.ka-status-yellow .ka-status-val { color: #ffe0b2; }

.ka-status-green { border-color: #4caf50; background: rgba(76, 175, 80, 0.1); color: #4caf50; }
.ka-status-green .ka-status-val { color: #c8e6c9; }

/* Orange Sliders på kimnings siden */
.theme-kim input[type=range]::-webkit-slider-thumb { border-color: #ff9800; }
.theme-kim input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 10px rgba(255, 152, 0, 0.5); }

/* Skjul Ryd Data Knap på kimning */
#view-kimning .btn-bottom-row { display: none; }


/* ==========================================
   LÆRREDER / CANVAS (Fyld skærmen)
   ========================================== */
canvas { width: 100%; height: auto; min-height: 250px; object-fit: contain; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
.sv-canvas-wrap, .ka-diagram-wrap { background: transparent; border: none; padding: 0; display: flex; flex-direction: column; flex-grow: 1; }
.ka-diagram-wrap canvas { min-height: 150px; flex-grow: 0; }

@media (min-width: 1024px) {
    .split-right > canvas, .sv-canvas-wrap > canvas { flex-grow: 1; max-height: calc(100vh - 200px); }
}

/* ==========================================
   RESPONSIVE DESIGN (PC/Tablet)
   ========================================== */
@media (min-width: 768px) {
    .app-body { flex-direction: row; }
    #main-navigation { display: block; width: 280px; border-right: 1px solid var(--glass-border); background: var(--glass-panel); backdrop-filter: blur(var(--glass-blur)); }
    #app-content { padding: 30px; }
    .app-view { background: var(--glass-panel); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 16px; padding: 30px; box-shadow: var(--shadow-heavy); max-width: 800px; margin: 0 auto; }
    body.on-home #view-home { display: block; }
    .mobile-only-tip { display: none; }
    .btn-back { display: none; }
    .header-spacer { display: block; }
    .desktop-split { display: flex; flex-direction: column; gap: 20px; }
}

@media (min-width: 1024px) {
    .app-view { max-width: 1100px; padding: 40px; }
    .desktop-split { display: flex; flex-direction: row; gap: 40px; align-items: stretch; }
    .split-left { flex: 0 0 380px; display: flex; flex-direction: column; }
    .split-right { flex: 1; display: flex; flex-direction: column; position: sticky; top: 20px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 20px; border: 1px solid var(--glass-border); box-shadow: inset 0 0 50px rgba(0,0,0,0.5); height: calc(100vh - 120px); }
}

@media (min-width: 1440px) {
    .app-view { max-width: 1400px; }
    .split-left { flex: 0 0 420px; }
    .split-right { padding: 30px; box-shadow: inset 0 0 80px rgba(0,0,0,0.6); }
}