/* Norse — the Viking display font the WHART logo is set in (Joël Carrouché,
   free font license: web-page embedding permitted). Self-hosted so it renders
   identically on desktop and mobile. Only downloaded on pages that actually use
   it (the login clock), since @font-face fetches lazily on first glyph use. */
@font-face {
    font-family: 'Norse';
    src: url('norse/Norsebold.otf') format('opentype'); /* bold weight — matches the logo */
    font-display: swap;
}
/* Site UI Norse (not the clock/logo). Scaled up ~18% because the runic font reads
   small/hard as body text. Two weights so the profile "Bold" toggle actually swaps
   the file: regular Norse.otf vs Norsebold.otf. */
@font-face {
    font-family: 'NorseUI';
    src: url('norse/Norse.otf') format('opentype');
    font-weight: normal;
    font-display: swap;
    size-adjust: 118%;
}
@font-face {
    font-family: 'NorseUI';
    src: url('norse/Norsebold.otf') format('opentype');
    font-weight: bold;
    font-display: swap;
    size-adjust: 118%;
}

:root {
    --bg: #f0f2f5;
    --surface: #ffffff;
    --text: #333333;
    --gray: #6b7280;
    --border: #d1d5db;
    --alt-color: #ba1125; /* logo red accent (the .dk badge). Fixed brand colour,
                             NOT user-themeable — safe to live here since nothing
                             overrides it inline (unlike --primary-color). */
}

/* background-color matcher body's --bg: uden den viser scrollbar-gutter'ens reserverede
   plads (body er smallere end html når stabil gutter er aktiv) html's egen (ellers hvide)
   baggrund igennem som en synlig lodret streg langs højre kant på enhver side.
   overflow-x:hidden på html blev forsøgt her (session 2026-07-30) som fix for tab-bar-glowens
   bleed, men brød position:sticky på navbaren på mobil (kendt WebKit/mobil-browser-bug: overflow
   sat på <html> ødelægger sticky for efterkommere). Rettet ved roden i stedet: glowen klippes nu
   lokalt af sin egen .cat-tabs-wrap (code_collection.php), så den aldrig når html/body's
   scroll-beregning — html skal derfor IKKE have overflow-x:hidden. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; background-color: var(--bg); }

body {
    /* --app-font = the user's chosen UI font (set inline per-user). Falls back to
       the system stack. Secrets/inputs/code are pinned below so they never follow it.
       --app-weight = optional site-wide bold toggle (normal by default). */
    font-family: var(--app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-weight: var(--app-weight, normal);
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* PWA standalone: drop den evige scrollbar/gutter når der intet er at scrolle (grim i app-vindue).
   I browser beholdes overflow-y:scroll + stabil gutter, så indhold ikke hopper når en scrollbar
   dukker op/forsvinder. I installeret app vises scrollbaren kun når indholdet faktisk overløber. */
@media all and (display-mode: standalone) {
    html { scrollbar-gutter: auto; }
    body { overflow-y: auto; }
}

* { box-sizing: border-box; }

/* GLOBALE ELEMENTER */
input, textarea, select {
    width: 100%; padding: 12px; margin: 0 0 12px 0; border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; background-color: #fafbfc; transition: border-color 0.2s; box-sizing: border-box;
    /* "Sensitive" font zone. Defaults to a legible system stack (--sensitive-font falls back
       to system); the user can override it in Profile, with a legibility hint. */
    font-family: var(--sensitive-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-weight: var(--sensitive-weight, normal); /* per-zone bold (default normal) */
}
/* "Sensitive" font zone: displayed vault content (notes, list items). The general --app-font
   never reaches these — only --sensitive-font does, defaulting to a legible system stack. */
.note-text, .note-markdown, .list-item-text {
    font-family: var(--sensitive-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-weight: var(--sensitive-weight, normal);
}
/* Always monospace — technical content / pasted scripts, never font-zone-controlled. */
code, pre, kbd, samp { font-family: Consolas, Menlo, monospace; }
select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    padding-right: 38px;
}
#item-category { background-image: none; } /* har egen SVG-pil via wrapper */
/* Windows Chromium/Edge render appearance:none dropdown options with a transparent
   background (text shows through / looks half-empty). Pin an explicit background. */
select option { background-color: #ffffff; color: #24292e; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); background-color: #fff; }
textarea { height: 80px; resize: vertical; }

button { cursor: pointer; border: none; border-radius: 8px; font-weight: 600; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
button svg { width: 18px; height: 18px; fill: currentColor; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary { background-color: var(--primary-color); color: white; width: 100%; padding: 14px; margin-bottom: 10px;}
.btn-green { background-color: #2ea44f; color: white; width: 100%; padding: 14px; margin-bottom: 10px;}
.btn-red { background-color: #cb2431; color: white; width: 100%; padding: 14px; margin-bottom: 10px;}
.btn-gray { background-color: #6a737d; color: white; width: 100%; padding: 14px; margin-bottom: 10px;}

.btn-icon {
    width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
    background-color: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280; border-radius: 6px;
}
.btn-icon:hover { background-color: #e5e7eb; color: #111827; border-color: #d1d5db; filter: none; }
.btn-icon.success { background-color: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.btn-icon.success:hover { background-color: #dcfce7; color: #15803d; border-color: #86efac; }
.btn-icon.warning { background-color: #fffbeb; color: #d97706; border-color: #fde68a; }
.btn-icon.warning:hover { background-color: #fef3c7; color: #b45309; border-color: #fcd34d; }
.btn-icon.danger { background-color: #fef2f2; color: #dc2626; border-color: #fecaca; }
.btn-icon.danger:hover { background-color: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.btn-icon.primary { background-color: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.btn-icon.primary:hover { background-color: #e0e7ff; color: #4338ca; border-color: #a5b4fc; }

.error { color: #cb2431; text-align: center; margin-bottom: 15px; font-weight: 600; background: #ffeef0; padding: 12px; border-radius: 6px; font-size: 14px; }
.success { color: #2ea44f; text-align: center; margin-bottom: 15px; font-weight: 600; background: #e6ffed; padding: 12px; border-radius: 6px; font-size: 14px; }

/* FIX TIL MOBIL INPUT FELTER I ADMIN */
.form-row { display: flex; gap: 12px; width: 100%; margin-bottom: 12px; }
.form-row input, .form-row button { flex: 1; min-width: 0; margin-bottom: 0 !important; width: 100%; }
@media (max-width: 650px) {
    .form-row { flex-direction: column; }
}

/* NAVBAR (Global) */
.navbar { width: 100%; background-color: var(--primary-color); color: white; padding: 6px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; transition: background-color 0.3s; box-sizing: border-box; }
.nav-logo { font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; gap: 8px; z-index: 1001; }
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; z-index: 1001; padding: 5px; }
.hamburger span { width: 25px; height: 3px; background: white; border-radius: 2px; transition: 0.3s; }
.nav-mobile-actions { display: flex; align-items: center; gap: 12px; }
.logout-icon-btn { display: none; align-items: center; justify-content: center; color: white; padding: 4px; cursor: pointer; opacity: 0.9; text-decoration: none; transition: opacity 0.2s; }
.logout-icon-btn:hover { opacity: 1; }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a { color: white; text-decoration: none; font-weight: 500; cursor: pointer; padding: 5px; opacity: 0.8; transition: opacity 0.2s; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { opacity: 1; border-bottom: 2px solid white; }
.logout-link { color: #ffb3b8 !important; opacity: 1 !important; }

/* Skillelinjer i menuen (Desktop) */
.nav-divider {
    width: 1px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
}

/* NAVBAR MOBIL & LANDSCAPE BESKYTTELSE */
@media screen and (max-width: 1200px), screen and (max-height: 600px) and (orientation: landscape) {
    .navbar { padding: 3px 12px; }
    .nav-logo { gap: 5px; }
    .nav-logo img { height: 34px !important; }
    /* T-u: ryk session-timer-pillen tættere på logoet på mobil (drop den ekstra
       8px inline-margin → kun .nav-logo gap 5px står), og lås højre handlinger
       (log ud + burger) mod at blive klemt på smalle skærme. */
    .nav-logo #freeze-timer-switch { margin-left: 0 !important; }
    .nav-mobile-actions { flex-shrink: 0; }
    .hamburger { display: flex; }
    .logout-icon-btn { display: inline-flex; }
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 42px;
        /* Align the menu's right edge with the navbar's own 12px side padding so it sits cleanly
           under the hamburger, and adapt to the viewport: never wider than 240px, and on narrow
           screens keep an even 12px gutter on BOTH sides (right:12 + width → left gap also 12) so
           it looks balanced and never crowds the edge. */
        right: 12px;
        left: auto;
        width: min(208px, calc(100vw - 24px));
        /* Nedtonet tema-farve (T-k): PHP-beregnet, blødere gradient-overlay */
        background-color: var(--nav-menu-bg, var(--primary-color));
        background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.14) 100%);
        color: var(--nav-menu-text, #fff);
        box-shadow: 0 12px 34px rgba(0,0,0,0.32);
        border: 1px solid color-mix(in srgb, var(--nav-menu-text, #fff) 16%, transparent);
        padding: 8px 0 12px 0;
        border-radius: 14px;
        z-index: 999;
        max-height: calc(100vh - 48px);
        max-height: calc(100svh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .nav-links.active {
        display: flex;
        animation: slideDown 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .nav-links a {
        padding: 12px 18px;
        margin: 1px 8px;
        width: auto;
        border-bottom: none;
        border-radius: 9px;
        box-sizing: border-box;
        justify-content: center;
        opacity: 1;
        color: var(--nav-menu-text, #fff);
        font-size: 14.5px;
        transition: background-color 0.2s;
    }
    /* Kontrast-bevidste hover/active-flader: afledt af tekstfarven → virker på både lys og mørk menu */
    /* Reset desktop underline (l.89) inde i burger-menuen — den 2px bund-border fik menu-emner
       til at vokse ved hover og hele menuen til at hoppe (T-dd). Menuen bruger baggrunds-highlight. */
    .nav-links a.active { background-color: color-mix(in srgb, var(--nav-menu-text, #fff) 20%, transparent); font-weight: 700; border-bottom: none; }
    .nav-links a:hover { background-color: color-mix(in srgb, var(--nav-menu-text, #fff) 11%, transparent); border-bottom: none; }

    .nav-divider {
        width: calc(100% - 36px);
        height: 1px;
        margin: 7px 18px;
        background-color: color-mix(in srgb, var(--nav-menu-text, #fff) 15%, transparent);
    }
    .logout-link { 
        margin-top: 0 !important; 
        padding-top: 14px !important;
        border-top: none !important; 
        border-radius: 0 0 8px 8px !important; 
    }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* MODAL */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; height: 100svh;
    background: rgba(0,0,0,0.72);
    z-index: 999999;
    justify-content: center; align-items: center;
    backdrop-filter: blur(6px);
}
.modal-box {
    background: white; padding: 32px 30px 28px; border-radius: 18px;
    text-align: center; width: 90%; max-width: 340px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.1);
    margin: auto;
    border-top: 3px solid var(--primary-color, #544692);
}
.modal-box h3 { margin-top: 0; color: #1e293b; font-size: 17px; }
.timeout-modal-box { padding: 28px 24px 0 !important; text-align: center; animation: timeout-glow 2s ease-in-out infinite; }
.timeout-pill { display: inline-flex; flex-direction: column; align-items: center; background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 999px; padding: 10px 36px; margin-bottom: 20px; gap: 2px; position: relative; }
.timeout-pill-dot { width: 8px; height: 8px; background: #e53e3e; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); animation: timeout-dot-pulse 1s infinite; }
.timeout-pill-dot-l { left: 14px; }
.timeout-pill-dot-r { right: 14px; }
.timeout-pill-num { font-size: 2.2rem; font-weight: 900; color: #e53e3e; line-height: 1; letter-spacing: -1px; }
.timeout-pill-lbl { font-size: 11px; color: #e53e3e; font-weight: 600; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; }
.timeout-modal-box h3 { margin: 0 0 6px !important; }
.timeout-modal-box p { margin: 0 0 18px; font-size: 13px; color: #64748b; }
.timeout-btn { background: var(--primary-color, #544692); color: #fff; border: none; border-radius: 10px; padding: 12px 0; width: 100%; font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 0; }
.timeout-progress-wrap { margin-top: 16px; background: #f1f5f9; height: 5px; border-radius: 3px; overflow: hidden; }
.timeout-progress-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #e53e3e, #f87171); transition: width 1s linear; }
@keyframes timeout-glow {
    0%, 100% { box-shadow: 0 24px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.1), 0 0 0px rgba(229,62,62,0); }
    50%       { box-shadow: 0 24px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.1), 0 0 32px 8px rgba(229,62,62,0.3); }
}
@keyframes timeout-dot-pulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%       { opacity: 0.35; transform: translateY(-50%) scale(0.75); }
}

/* =============== 1. LOGIN PAGE =============== */
.login-page {
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    background: radial-gradient(ellipse at 70% 20%, rgba(103, 80, 164, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(103, 80, 164, 0.08) 0%, transparent 50%),
                var(--bg);
}
.login-layout {
    position: relative;
    background-color: #fff; padding: 40px; border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
    width: 420px; max-width: 90%; text-align: center; box-sizing: border-box;
    border-top: 4px solid var(--primary-color);
}
/* Pre-login language toggle — one discreet flag button, top-right of the login card.
   Real inline-SVG flag (not emoji, so it renders on every device); click toggles language. */
.login-lang-toggle {
    position: absolute; top: 10px; right: 12px; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 24px; border-radius: 4px; overflow: hidden;
    text-decoration: none; opacity: 0.7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.login-lang-toggle:hover { opacity: 1; transform: scale(1.06); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.login-flag-svg { display: block; width: 100%; height: 100%; border-radius: 4px; }
.login-layout .logo-container { margin-top: 0; margin-bottom: 25px; }
/* Clock floats above the login box as a matching card: same white surface,
   radius, drop-shadow and purple top-accent as .login-layout below it, so the
   two read as a symmetrical pair (digits in logo purple, seconds in .dk red).
   Absolute positioning keeps the login box itself centered in the viewport. */
.login-clock {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    width: 100%; box-sizing: border-box; margin-bottom: 26px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 22px 24px 18px; border-radius: 16px; user-select: none;
    background-color: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06); /* mirrors .login-layout */
    border-top: 4px solid var(--primary-color); /* mirrors the login box accent */
}
.login-clock-time {
    font-family: 'Norse', 'Consolas', ui-monospace, monospace; /* Viking display font (logo) */
    font-size: clamp(3.4rem, 17vw, 5.6rem); font-weight: 700; line-height: 1;
    white-space: nowrap;
    color: var(--primary-color); /* logo purple (login default) */
    text-shadow: 0 1px 3px rgba(84,70,146,0.15); /* subtle lift on the white card */
}
/* Norse has proportional figures ("1"=0.29em, "0"=0.44em), so the time would
   jump as digits change. Each character gets its own fixed, centered slot so a
   digit swap can't shift its neighbours. */
.login-clock-time .lc-cell { display: inline-block; width: 0.52em; text-align: center; }
.login-clock-time .lc-colon { width: 0.30em; }
.login-clock-time .lc-sec { color: var(--alt-color); } /* logo .dk red */
.login-clock-time .lc-ampm { font-size: 0.26em; letter-spacing: 1px; vertical-align: 0.9em; margin-left: 0.14em; color: var(--primary-color); } /* 12-hour am/pm marker (English) */
.login-clock-date {
    font-family: 'Norse', sans-serif; /* Viking display font (logo) */
    font-size: clamp(14px, 3.6vw, 17px); font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: #5b5470;
    padding-top: 8px; border-top: 2px solid var(--alt-color); /* logo .dk red rule */
    width: 82%; text-align: center;
}
.login-clock-date .lc-date-wd { color: var(--primary-color); } /* weekday = logo purple */
.login-clock-date .lc-date-dm { color: var(--alt-color); }     /* date = logo red, matches clock */
@media (max-width: 500px) {
    .login-clock { margin-bottom: 20px; padding: 16px 16px 14px; gap: 6px; }
}
input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--primary-color,#544692) 0%, #e2e8f0 0%); padding: 0; margin: 0; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-color, #544692); cursor: pointer; margin-top: -5px; }
input[type=range]::-moz-range-track { height: 4px; background: #e2e8f0; border-radius: 2px; border: none; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary-color, #544692); cursor: pointer; border: none; }
input[type=range]::-moz-range-progress { height: 4px; background: var(--primary-color, #544692); border-radius: 2px; }
.login-layout .logo-container img { max-width: 290px; height: auto; display: inline-block; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter 0.35s ease; cursor: default; }
.login-layout .logo-container img:hover { transform: scale(1.07) translateY(-3px); filter: drop-shadow(0 6px 18px rgba(0,0,0,0.18)); }
/* Tagline under logoet — inline-SVG (gradient ligger i selve SVG'en). Stakken shrink-wrapper
   logoets bredde, og SVG'ens width:100% + textLength gør taglinen præcis lige så bred som
   logoet på ÉN linje, uanset logo-størrelse (290px desktop / 200px mobil). */
.login-logo-stack { display: inline-block; max-width: 100%; }
.login-tagline { display: block; width: 290px; max-width: 100%; height: auto; margin: 6px auto 0; font-weight: 700; font-size: 12px; }
@media (max-width: 500px) { .login-tagline { width: 200px; } } /* spejler logoets mobil-bredde */
.login-layout .toggle-link { text-align: center; margin-top: 20px; display: block; color: var(--primary-color); cursor: pointer; text-decoration: none; font-size: 14px; font-weight: 600; }
.login-layout .toggle-link:hover { text-decoration: underline; opacity: 0.8; }
.login-form-wrap { transition: opacity 0.2s ease, transform 0.2s ease; }
.login-form-wrap.fading { opacity: 0; transform: translateY(6px); }
@media (max-width: 500px) { .login-layout { padding: 25px; width: 95%; } .login-layout .logo-container img { max-width: 200px; } }

/* =============== 2. MAIN & ADMIN PAGE =============== */
.app-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; font-size: 14px;}
.main-layout { display: flex; width: 100%; max-width: 2560px; gap: 20px; align-items: flex-start; padding: 20px clamp(16px, 2.5vw, 80px); box-sizing: border-box; }

.view-section { display: none !important; width: 100%; box-sizing: border-box; } 
.view-section.active { display: block !important; }
#view-dashboard.active { display: block !important; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; width: 100%; align-items: flex-start; }
.admin-card { background: #fff; padding: 22px 24px; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); border: 1px solid #e8eaed; border-top: 3px solid var(--primary-color, #544692); box-sizing: border-box; max-width: 100%; overflow: hidden; transition: box-shadow 0.2s ease; }
.admin-card-wide { grid-column: 1 / -1; }
.scrollable-list { max-height: 500px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; word-break: break-word; }
.scrollable-list::-webkit-scrollbar { width: 6px; }
.scrollable-list::-webkit-scrollbar-track { background: transparent; }
.scrollable-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.sidebar-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 0; user-select: none; }
.sidebar-header h2, .sidebar-header h3 { font-size: 1.1em; margin: 0; color: #1c1e21; font-weight: 700; letter-spacing: -0.01em; }
.toggle-icon { font-size: 1.1em; color: #94a3b8; transition: transform 0.2s; }
.toggle-content { display: none; }
.toggle-content.open { display: block; }
.toggle-header.open .toggle-icon { transform: rotate(180deg); }
.admin-toggle-body { border-top: 1px solid #f0f0f2; margin-top: 8px; padding-top: 18px; }

.invite-item, .link-item { background: #f6f8fa; padding: 12px; border: 1px solid #e1e4e8; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.invite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.invite-item { border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent); font-family: monospace; font-size: 1em; word-break: break-all; background: color-mix(in srgb, var(--primary-color) 6%, #fff); border-radius: 10px; margin-bottom: 0; padding: 10px 12px; transition: border-color 0.2s, box-shadow 0.2s; }
.invite-item:hover { border-color: var(--primary-color); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.invite-item.expired { opacity: 0.45; background: #f3f4f6; border-color: #d1d5db; }

/* User card grid */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.user-item { border-radius: 12px; background: #fff; border: 1px solid #e8eaed; padding: 14px; display: flex; flex-direction: column; gap: 9px; transition: box-shadow 0.18s, border-color 0.18s; position: relative; }
.user-item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #e8eaed; border-radius: 12px 12px 0 0; }
.user-item.is-self::after { background: var(--primary-color, #544692); }
.user-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #d0d4da; }
.u-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-color, #544692); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
.u-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.u-badge-owner { background: #fef3c7; color: #92400e; }
.u-badge-admin { background: #dcfce7; color: #166534; }
.u-badge-super { background: #ede9fe; color: #5b21b6; }
.u-badge-banned { background: #fee2e2; color: #991b1b; }
.u-chip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; border: 1px solid; }
.u-chip-on { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.u-chip-off { background: #f8fafc; color: #94a3b8; border-color: #e5e7eb; }
.u-actions { border-top: 1px solid #f1f5f9; padding-top: 9px; display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.u-action-row { display: flex; gap: 5px; }
.u-btn { flex: 1; font-size: 11px; font-weight: 700; height: 28px; padding: 0 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.u-btn-green { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.u-btn-red { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.u-btn-blue { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.u-btn-gray { background: #f8fafc; color: #6b7280; border-color: #e5e7eb; }
.u-btn-purple { background: #faf5ff; color: #6d28d9; border-color: #ddd6fe; }
.u-btn-danger { background: #7f1d1d; color: #fff; border-color: transparent; }

/* Dashboard Kort */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.integrated-app-card {
    background-color: var(--primary-color);
    color: white;
    border-radius: 16px;
    padding: 22px 24px 20px;
    text-align: left;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.integrated-app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* Øverste række: ikon + navn */
.card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.integrated-app-card .icon-container {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    width: clamp(48px, 38px + 1.6vw, 60px);
    height: clamp(48px, 38px + 1.6vw, 60px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.integrated-app-card .icon-container svg {
    fill: white;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.integrated-app-card h3,
.app-link-card h3 { /* brand names + bottom-of-frontpage link titles — the "Titles" font zone.
                      Defaults to the logo's Viking font (--title-font falls back to Norse). */
    font-family: var(--title-font, 'Norse', sans-serif);
    font-weight: var(--title-weight, 700); /* per-zone bold (default 700 = current brand look) */
    letter-spacing: 1.5px;
}
.integrated-app-card h3 {
    color: white;
    margin: 0; /* ingen bund-margin → h3 centreres lodret ift. ikonet ved siden af (card-top align-items:center) */
    font-size: clamp(1.35em, 1.15em + 0.7vw, 1.65em);
    font-weight: var(--title-weight, 700);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    padding-right: 26px; /* plads til arrow-hint */
    width: 100%;
}
.integrated-app-card p {
    color: rgba(255,255,255,0.9); margin: 0; font-size: 13px; line-height: 1.5;
    padding-right: 26px;
}

.integrated-app-card .secure-badge {
    position: absolute;
    top: 0;
    right: 16px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.22);
    border-top: none;
    padding: 5px 11px 4px;
    border-radius: 0 0 10px 10px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.integrated-app-card .arrow-hint {
    position: absolute;
    right: 18px;
    bottom: 20px;
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
}
.integrated-app-card:hover .arrow-hint {
    opacity: 0.6;
    transform: translateX(3px);
}

/* EKSTRA LINKS */
.app-link-card { border: 1px solid #e1e4e8; padding: 20px; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; background:#f9fafb; text-decoration: none; color: inherit; display: block; text-align: left; }
.app-link-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: var(--primary-color); }

.app-link-card.has-color {
    background-color: var(--primary-color);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.12) 100%);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.app-link-card.has-color:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.4);
}
.app-link-card.has-color h3 { color: white !important; }
.app-link-card.has-color p { color: rgba(255,255,255,0.9) !important; }

/* Farve-grader: forskyder BAGGRUNDEN relativt til den enkelte brugers egen --primary-color
   (color-mix, samme teknik som --primary-dark/--primary-light i header.php) i stedet for en
   fast hex-farve — en administrator-valgt farve ville ellers se ens ud for alle, uanset den
   enkelte brugers temavalg. Negative grader = mørkere, positive = lysere. */
.app-link-card.has-color.shade-n50 { background-color: color-mix(in srgb, var(--primary-color) 50%, black); }
.app-link-card.has-color.shade-n40 { background-color: color-mix(in srgb, var(--primary-color) 60%, black); }
.app-link-card.has-color.shade-n30 { background-color: color-mix(in srgb, var(--primary-color) 70%, black); }
.app-link-card.has-color.shade-n20 { background-color: color-mix(in srgb, var(--primary-color) 80%, black); }
.app-link-card.has-color.shade-n10 { background-color: color-mix(in srgb, var(--primary-color) 90%, black); }
.app-link-card.has-color.shade-p10 { background-color: color-mix(in srgb, var(--primary-color) 90%, white); }
.app-link-card.has-color.shade-p20 { background-color: color-mix(in srgb, var(--primary-color) 80%, white); }
.app-link-card.has-color.shade-p30 { background-color: color-mix(in srgb, var(--primary-color) 70%, white); }
.app-link-card.has-color.shade-p40 { background-color: color-mix(in srgb, var(--primary-color) 60%, white); }
.app-link-card.has-color.shade-p50 { background-color: color-mix(in srgb, var(--primary-color) 50%, white); }

/* Admin farve-grad-vælger: 10 klikbare swatches, samme shade-klasser som ovenfor så prøven
   viser den korrekte, live-beregnede farve for DEN admin der kigger (deres egen temafarve). */
.link-shade-swatch {
    width: 30px; height: 30px; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
    padding: 0; flex-shrink: 0; background-color: var(--primary-color); transition: transform 0.15s, border-color 0.15s;
}
.link-shade-swatch:hover { transform: scale(1.08); }
.link-shade-swatch.selected { border-color: #1f2937; box-shadow: 0 0 0 2px white inset; }
.link-shade-swatch.shade-n50 { background-color: color-mix(in srgb, var(--primary-color) 50%, black); }
.link-shade-swatch.shade-n40 { background-color: color-mix(in srgb, var(--primary-color) 60%, black); }
.link-shade-swatch.shade-n30 { background-color: color-mix(in srgb, var(--primary-color) 70%, black); }
.link-shade-swatch.shade-n20 { background-color: color-mix(in srgb, var(--primary-color) 80%, black); }
.link-shade-swatch.shade-n10 { background-color: color-mix(in srgb, var(--primary-color) 90%, black); }
.link-shade-swatch.shade-p10 { background-color: color-mix(in srgb, var(--primary-color) 90%, white); }
.link-shade-swatch.shade-p20 { background-color: color-mix(in srgb, var(--primary-color) 80%, white); }
.link-shade-swatch.shade-p30 { background-color: color-mix(in srgb, var(--primary-color) 70%, white); }
.link-shade-swatch.shade-p40 { background-color: color-mix(in srgb, var(--primary-color) 60%, white); }
.link-shade-swatch.shade-p50 { background-color: color-mix(in srgb, var(--primary-color) 50%, white); }

@media (max-width: 650px) {
    .dashboard-cards { grid-template-columns: 1fr; gap: 14px; }
    .integrated-app-card { padding: 18px 20px 16px; }
    .integrated-app-card .icon-container { width: 48px; height: 48px; }
    .integrated-app-card .icon-container svg { width: 24px; height: 24px; }
}

/* =============== 3. KODEHUSKEREN PAGE =============== */
.kodehusker-layout { display: flex; width: 100%; gap: 20px; align-items: flex-start; }
.kodehusker-layout .sidebar { width: clamp(260px, 20vw, 340px); background: color-mix(in srgb, var(--primary-color) 55%, white); padding: 6px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); position: sticky; top: 80px; flex-shrink: 0; border: none; align-self: flex-start; max-width: 100%; box-sizing: border-box; }
.kodehusker-layout .sidebar-inner { background: color-mix(in srgb, var(--primary-color) 10%, white); border-radius: 8px; padding: 16px; box-sizing: border-box; width: 100%; }
/* Kun form-felter forbliver hvide — knapper beholder deres egne farver */
.kodehusker-layout .sidebar-inner input,
.kodehusker-layout .sidebar-inner textarea,
.kodehusker-layout .sidebar-inner select { background: #fff !important; }
.kodehusker-layout .content { flex-grow: 1; width: 100%; min-width: 0; box-sizing: border-box; }

/* SØGE CONTAINER STYRING */
.search-container { background: #fff; padding: 10px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #e1e4e8; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-input-wrapper { position: relative; flex-grow: 1; display: flex; align-items: center; min-width: 200px; }
.search-input-wrapper .search-icon { position: absolute; left: 10px; color: #9ca3af; pointer-events: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.search-input-wrapper .search-icon svg { width: 100%; height: 100%; fill: currentColor; }
.search-input-wrapper input { margin: 0; padding-left: 35px; background-color: #fff; width: 100%; padding-right: 35px; border-color: #e5e7eb; height: 40px; }
.search-clear { position: absolute; right: 10px; cursor: pointer; color: #9ca3af; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; }
.search-clear:hover { color: #cb2431; }

.sort-actions { display: flex; gap: 10px; flex: 1 1 auto; }
.sort-actions select { margin: 0; cursor: pointer; background-color: #fff; font-weight: 500; padding: 6px 10px; height: 40px; flex: 1; }
.sort-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; height: 40px; margin: 0; padding: 0 12px; background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 8px; font-weight: 600; transition: background 0.2s; flex: 1; }
.sort-actions button:hover { background: #e5e7eb; }

#data-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 15px; width: 100%; transition: padding 0.3s ease; }
.data-item { background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; padding: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.data-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #c8cdd4; transform: translateY(-1px); }
.data-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; cursor: pointer; user-select: none; min-height: 40px; }
.data-header strong { font-size: 1.15em; color: #24292e; word-break: break-word; line-height: 1.3; padding-right: 10px; }
.header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.header-actions .btn-icon { border-radius: 6px; }

.data-row { background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; }
/* T-jj: admin-link-liste låst mens ét link redigeres — alle rækkeknapper deaktiveres,
   den aktive række fremhæves. Save/Annuller sker via formularen over listen. */
#admin-links-list.links-editing .data-row button { pointer-events: none; opacity: 0.4; }
#admin-links-list.links-editing .data-row:not(.link-row-editing) { opacity: 0.55; }
#admin-links-list .data-row.link-row-editing { outline: 2px solid var(--primary-color); outline-offset: -2px; background: rgba(99, 102, 241, 0.07); }
.data-info { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; margin-right: 12px; }
.data-label { font-size: clamp(9px, calc(var(--vault-scale, 1) * 11px), 15px); color: #586069; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 3px; display: block; }
.data-value { font-size: clamp(12px, calc(var(--vault-scale, 1) * 15px), 20px); color: #24292e; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.note-text { background: #fffbdd; border-left: 4px solid #f9c513; padding: 10px 12px; font-size: 0.85rem; color: #5c4c0a; border-radius: 4px; margin-top: 2px; word-break: break-word; line-height: 1.4; }

/* FLYDENDE STATUS BESKED (TOAST) */
.status-msg { 
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%) translateY(20px); 
    background: #1f2937; 
    color: white; 
    padding: 10px 24px; 
    border-radius: 30px; 
    font-size: 14px; 
    font-weight: 600; 
    z-index: 10000; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s, transform 0.3s; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.status-msg.show { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0); 
}

/* Custom Scrollbox til tekster/lister */
.scroll-box { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; box-sizing: border-box; max-height: 200px; }
.scroll-box::-webkit-scrollbar { width: 6px; }
.scroll-box::-webkit-scrollbar-track { background: transparent; }
.scroll-box::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }

@media (min-width: 1051px) and (orientation: landscape) {
    .sidebar-toggle-icon { display: none !important; }
    #opret-container { display: block !important; }
    .sidebar-header-main { cursor: default; }
}

/* Portræt-skærme (fx monitor på højkant) får top-layout uanset bredde */
@media (max-width: 1050px), (orientation: portrait) {
    .main-layout { padding: 6px; gap: 10px; flex-direction: column; }
    #view-kodehuskeren.active { display: flex !important; flex-direction: column; gap: 10px; }
    .kodehusker-layout { flex-direction: column; gap: 10px; }
    .kodehusker-layout .sidebar { width: 100% !important; position: static; top: auto; padding: 12px; }
}

@media (max-width: 850px) {
    .admin-grid { grid-template-columns: 1fr !important; }
    .admin-card { margin-bottom: 20px; }
    .scrollable-list { max-height: 350px; }
    .invite-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    #newsline-container .newsline-editor-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
    .kodehusker-layout .sidebar { margin-bottom: 5px; padding: 5px; }
    .kodehusker-layout .sidebar-inner { padding: 10px; }

    .search-container { flex-direction: column; align-items: stretch; margin-top: 5px; padding: 10px; gap: 8px; }
    .search-input-wrapper { width: 100%; }
    .sort-actions { width: 100%; display: flex; gap: 8px; flex-direction: row; }

    #data-list { gap: 8px; }
    .data-item { padding: 10px; gap: 8px; }
    .data-row { padding: 6px 8px; }

    /* Export-knapper: 2×2 grid på mobil */
    #btn_export, #btn_export_logins, #btn_export_notes, #btn_export_lists {
        flex: 1 1 calc(50% - 3px);
        width: auto;
        font-size: 13px;
        padding: 10px 6px;
        margin-bottom: 0;
    }
}

/* =============== 4. P2P SHARE PAGE (soft-UI) =============== */
/* Soft-UI design tokens — brand base (NexuShare purple/red) + theme accent (--primary-color).
   Scoped to .p2p-layout so nothing outside the P2P page is affected. */
.p2p-layout {
    width: 100%; max-width: 1200px; padding: 30px 15px; display: flex; flex-direction: column;
    gap: 15px; margin: 0 auto; box-sizing: border-box;
    --p2p-brand: #544692;
    --p2p-brand-2: #ba1125;
    --p2p-ink: #1e293b;
    --p2p-muted: #64748b;
    --p2p-line: #e8eaf0;
    --p2p-surface: #ffffff;
    --p2p-bg: #f6f7fb;
    --p2p-radius: 18px;
    --p2p-radius-sm: 12px;
    --p2p-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --p2p-shadow-md: 0 6px 20px -6px rgba(84,70,146,.18), 0 2px 6px rgba(16,24,40,.05);
    --p2p-shadow-lg: 0 18px 48px -12px rgba(84,70,146,.28);
    --p2p-brand-wash: color-mix(in srgb, var(--p2p-brand) 6%, #fff);
}
.p2p-layout .container { background: var(--p2p-surface); padding: 32px; border-radius: var(--p2p-radius); box-shadow: var(--p2p-shadow-md); border: 1px solid var(--p2p-line); text-align: center; position: relative; box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden;}
.p2p-layout .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--p2p-brand), var(--p2p-brand-2)); }

.p2p-layout h1 { margin-top: 0; font-size: 2.2em; color: var(--p2p-ink); margin-bottom: 5px; }
.p2p-layout .subtitle { font-size: 12px; color: #15803d; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, #22c55e 10%, #fff); border: 1px solid color-mix(in srgb, #22c55e 25%, #fff); margin: 0 auto 15px; }
.p2p-layout .subtitle svg { width: 13px; height: 13px; fill: currentColor; }

.p2p-layout .global-conn-bar { display: none; background: color-mix(in srgb, #22c55e 8%, #fff); border: 1px solid color-mix(in srgb, #22c55e 25%, #fff); padding: 10px 15px; border-radius: var(--p2p-radius-sm); margin-bottom: 12px; align-items: center; justify-content: space-between; box-shadow: var(--p2p-shadow-sm); animation: fadeIn 0.3s; }
.p2p-layout .conn-pulse, .p2p-layout .wait-pulse { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right: 8px; animation: pulse 2s infinite; }
.p2p-layout .conn-pulse { background:#10b981; } .p2p-layout .wait-pulse { background:#f9c513; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.p2p-layout .btn-disconnect-small { background:#ef4444; color:#fff; border:none; padding:6px 14px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background 0.15s; width:auto;}
.p2p-layout .btn-disconnect-small:hover { background:#dc2626; }
.p2p-layout .partner-status { font-size: 13px; color: var(--primary-color); font-style: italic; margin-bottom: 15px; min-height: 18px; }

/* Segmented control (replaces the old underline tabs) */
.p2p-layout .tabs { display: flex; margin-bottom: 22px; gap: 4px; padding: 4px; background: var(--p2p-bg); border: 1px solid var(--p2p-line); border-radius: var(--p2p-radius-sm); }
.p2p-layout .tab { flex: 1; padding: 9px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--p2p-muted); border-radius: 9px; transition: background 0.15s, color 0.15s; text-align: center; }
.p2p-layout .tab:hover { color: var(--p2p-ink); }
.p2p-layout .tab.active { color: #fff; background: var(--primary-color); box-shadow: var(--p2p-shadow-sm); }
.p2p-layout .view { display: none; }
.p2p-layout .view.active { display: block; animation: fadeIn 0.2s; }

.p2p-layout .drop-zone { border: 2px dashed color-mix(in srgb, var(--p2p-brand) 30%, var(--p2p-line)); border-radius: 16px; padding: 34px 15px; text-align: center; background: var(--p2p-bg); transition: all 0.2s ease; cursor: pointer; margin: 15px 0; position: relative; }
.p2p-layout .drop-zone:hover { background: color-mix(in srgb, var(--p2p-brand) 4%, #fff); border-color: color-mix(in srgb, var(--p2p-brand) 45%, #fff); transform: translateY(-1px); }
.p2p-layout .drop-zone.dragover { background: var(--p2p-brand-wash); border-color: var(--p2p-brand); transform: none; }
.p2p-layout .drop-zone svg { width: 44px; height: 44px; fill: color-mix(in srgb, var(--p2p-brand) 55%, var(--p2p-muted)); margin-bottom: 10px; transition: fill 0.2s; }
.p2p-layout .drop-zone:hover svg { fill: var(--p2p-brand); }
.p2p-layout .drop-zone-text { color: var(--p2p-muted); font-size: 14px; font-weight: 500; pointer-events: none; }
.p2p-layout input[type="file"] { display: none; }

.p2p-layout .btn-main { background: var(--primary-color); color: #fff; border: none; padding: 13px 20px; width: 100%; border-radius: var(--p2p-radius-sm); font-size: 15px; cursor: pointer; font-weight: 700; margin-top: 10px; box-shadow: var(--p2p-shadow-sm); transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s;}
.p2p-layout .btn-main:hover { transform: translateY(-1px); box-shadow: var(--p2p-shadow-md); }
.p2p-layout .btn-main:active { transform: translateY(0); }
.p2p-layout .btn-download-small { background: var(--primary-color); color: white; border: none; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: bold; text-decoration: none; display: inline-block; margin-top: 5px; width: auto;}

.p2p-layout .btn-remove-file { background: transparent; border: none; color: #ef4444; font-size: 16px; font-weight: bold; cursor: pointer; padding: 0 5px; opacity: 0.6; width: auto; }
/* Hero code-box (brand identity) */
.p2p-layout .status-box { margin-top: 15px; padding: 22px 20px; background: var(--p2p-brand-wash); border: 1px solid color-mix(in srgb, var(--p2p-brand) 18%, #fff); border-radius: var(--p2p-radius-sm); box-shadow: var(--p2p-shadow-sm); }
.p2p-layout #my-id { color: var(--p2p-brand); font-size: 2.5em; letter-spacing: 6px; font-weight: 800; display: block; margin-top: 10px; font-variant-numeric: tabular-nums; }

.p2p-layout .file-list { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; text-align: left; max-height: 350px; overflow-y: auto; padding-right: 5px; }
.p2p-layout .file-item { background: var(--p2p-surface); border: 1px solid var(--p2p-line); padding: 14px 14px; border-radius: var(--p2p-radius-sm); box-shadow: var(--p2p-shadow-sm); }
.p2p-layout .file-name { font-size: 13px; font-weight: 600; margin-bottom: 8px; word-wrap: break-word; overflow-wrap: anywhere; min-width: 0; color: var(--p2p-ink); flex: 1; }
.p2p-layout .progress-container { background: var(--p2p-line); height: 8px; border-radius: 999px; overflow: hidden; margin-top: 6px; width: 100%; }
.p2p-layout .progress-bar { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, #22c55e)); transition: width 0.1s linear; }
.p2p-layout .progress-text { font-size: 11px; color: var(--p2p-muted); margin-top: 6px; text-align: right; font-weight: 600; }

.p2p-layout .confirm-box { background: color-mix(in srgb, #22c55e 7%, #fff); border: 1px solid color-mix(in srgb, #22c55e 25%, #fff); padding: 16px; border-radius: var(--p2p-radius-sm); margin-top: 15px; text-align: left; display: none; }
/* P2P-scoped accept/decline (global .btn-green/.btn-red in main.php untouched) */
.p2p-layout .btn-green { background: #22c55e; border-radius: var(--p2p-radius-sm); font-weight: 700; padding: 12px; transition: background 0.15s; }
.p2p-layout .btn-green:hover { background: #16a34a; }
.p2p-layout .btn-red { background: #ef4444; border-radius: var(--p2p-radius-sm); font-weight: 700; padding: 12px; transition: background 0.15s; }
.p2p-layout .btn-red:hover { background: #dc2626; }
.p2p-layout .info-muted { font-size: 11px; color: var(--p2p-muted); margin-top: 6px; display: block; text-align: center; line-height: 1.4; }
.p2p-layout .warning-text { background:#fffbeb; border-left:3px solid #f59e0b; color:#92400e; padding:11px 12px; font-size:12px; border-radius:10px; margin-top:15px; text-align:left; display:none; }
.p2p-layout .error-text { background:#fef2f2; border-left:3px solid #ef4444; color:#b91c1c; padding:11px 12px; font-size:13px; font-weight:500; border-radius:10px; margin-top:15px; text-align:left; display:none; }

.p2p-layout .global-footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--p2p-line); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.p2p-layout .reset-link { color: var(--p2p-muted); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.p2p-layout .reset-link:hover { color: #ef4444; }
.p2p-layout .footer-copyright { font-size: 11px; color: var(--p2p-muted); }

@media (prefers-reduced-motion: reduce) {
    .p2p-layout .btn-main, .p2p-layout .drop-zone { transition: none; }
    .p2p-layout .btn-main:hover, .p2p-layout .drop-zone:hover { transform: none; }
}

@media (max-width: 500px) {
    .p2p-layout { padding: 15px 10px; }
}

/* ==================================================== */
/* A-Z INDEX (ALFABET-RULLE TIL SIKRET BOKS)            */
/* ==================================================== */
.az-index {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 10px 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.4);
}
.az-letter {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray);
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 1px 0;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent; 
}
.az-letter.active {
    background-color: var(--primary-color);
    color: white;
}
.az-letter.az-unloaded {
    opacity: 0.35;
    font-style: italic;
}
.az-letter.az-unloaded:hover {
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .az-letter:hover {
        background-color: var(--primary-color);
        color: white;
        opacity: 0.85;
    }
}
@media (max-width: 850px) {
    .az-index { padding: 6px 2px; border-radius: 12px; }
    .az-letter { font-size: 10px; width: 18px; height: 18px; margin: 0; }
}

/* ==================================================== */
/* PASSWORD WRAPPER (ØJE IKON OG FELTER)                */
/* ==================================================== */
.pass-wrapper { 
    position: relative; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    margin-bottom: 12px; 
}
.pass-wrapper input { 
    margin-bottom: 0 !important; 
    padding-right: 45px; 
}
.pass-toggle { 
    position: absolute; 
    right: 10px; 
    cursor: pointer; 
    color: var(--gray); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 28px; 
    height: 28px; 
    background: transparent; 
    border: none; 
    padding: 0; 
    transition: color 0.2s; 
    -webkit-tap-highlight-color: transparent;
}
.pass-toggle:hover { 
    color: var(--primary-color); 
    filter: none; 
}
.pass-toggle svg { 
    width: 20px; 
    height: 20px; 
    fill: currentColor; 
}