/* ==========================================================
   /ui/css/core/ljh-base.css
   LJH – Base Layer
   ----------------------------------------------------------
   Ansvar:
   1. Reset
   2. Design tokens (CSS-variabler)
   3. HTML/body bas
   4. Global Aqua-bakgrund (ONE SOURCE OF TRUTH)
   5. Layout-struktur (inga ytor)
   6. Nav badge
   ----------------------------------------------------------
   BASE RULE: Denna fil känner ALDRIG till:
   - specifika vyer eller sidor
   - header / footer
   - bakgrund per sida
   ----------------------------------------------------------
   INGA: formulär, knappar, inputs, paneler, modaler
   Laddas via: head_loader.php (globalt, alltid först)
========================================================== */


/* ==========================================================
   1. RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ==========================================================
   2. DESIGN TOKENS
========================================================== */

:root {
    /* Text */
    --ljh-text:         #e5e7eb;
    --ljh-text-soft:    #cbd5e1;
    --ljh-text-muted:   #94a3b8;

    /* Aqua */
    --ljh-aqua:         #60a5fa;
    --ljh-aqua-light:   #93c5fd;
    --ljh-aqua-deep:    #1e3a8a;

    /* Radius */
    --radius-sm:        10px;
    --radius-md:        16px;
    --radius-lg:        22px;

    /* Shadows */
    --shadow-soft:      0 18px 45px rgba(0,0,0,0.55);
}


/* ==========================================================
   3. HTML / BODY BAS
========================================================== */

html, body { min-height: 100%; }

body { position: relative; }


/* ==========================================================
   4. GLOBAL BAKGRUND – ONE SOURCE OF TRUTH
========================================================== */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        #0f1c2a,
        #0b121a
    );
}

/* Allt innehåll ovanför bakgrunden */
body > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   5. LAYOUT – Struktur only
   Aldrig färg, blur, bakgrund eller skugga
========================================================== */

.ljh-layout {
    display: grid;
    gap: 28px;
    max-width: 1500px;
    margin: 40px auto 60px;
    padding: 0;
    background: none;
}

.ljh-left,
.ljh-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: none;
}


/* ==========================================================
   6. NAV BADGE
========================================================== */

.ljh-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    color: white;
    background: #ff4d4d;
    box-shadow: 0 0 6px rgba(255,80,80,0.8);
}