/**
 * css/main.css
 * Globale layout, navigatie en gedeelde componenten
 * Terminal/cyberpunk aesthetic
 */

/* ─── Design tokens ──────────────────────────────────────────────────────── */

:root {
    /* Kleuren */
    --clr-bg:          #090d0f;
    --clr-bg-2:        #0f1517;
    --clr-bg-3:        #161d20;
    --clr-surface:     #1a2227;
    --clr-border:      #1e2d33;
    --clr-border-2:    #243540;

    --clr-green:       #00e676;
    --clr-green-dim:   #00c853;
    --clr-amber:       #ffab00;
    --clr-red:         #ff1744;
    --clr-blue:        #40c4ff;

    --clr-text:        #e0eaef;
    --clr-text-2:      #8fa8b4;
    --clr-text-3:      #4d6b78;

    /* Typografie */
    --font-mono:       'JetBrains Mono', 'Courier New', monospace;
    --font-ui:         'JetBrains Mono', monospace;

    --text-xs:         0.75rem;
    --text-sm:         0.8125rem;
    --text-base:       0.875rem;
    --text-md:         1rem;
    --text-lg:         1.125rem;
    --text-xl:         1.375rem;
    --text-2xl:        1.75rem;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-bold:     700;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Layout */
    --nav-height:  56px;
    --max-width:   1400px;

    /* Animaties */
    --duration-fast:   120ms;
    --duration-base:   220ms;
    --duration-slow:   380ms;
    --ease-out:        cubic-bezier(0.2, 0, 0, 1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--clr-bg);
    color:            var(--clr-text);
    font-family:      var(--font-ui);
    font-size:        var(--text-base);
    line-height:      1.6;
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
}

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

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    cursor:      pointer;
    border:      none;
    background:  none;
}

ul, ol {
    list-style: none;
}

/* ─── Navigatie ──────────────────────────────────────────────────────────── */

.nav {
    position:         sticky;
    top:              0;
    z-index:          100;
    height:           var(--nav-height);
    background-color: rgba(9, 13, 15, 0.95);
    backdrop-filter:  blur(12px);
    border-bottom:    1px solid var(--clr-border);
}

.nav__inner {
    max-width:   var(--max-width);
    margin:      0 auto;
    padding:     0 var(--space-6);
    height:      100%;
    display:     flex;
    align-items: center;
    gap:         var(--space-8);
}

.nav__logo {
    font-family:    var(--font-mono);
    font-size:      var(--text-lg);
    font-weight:    var(--weight-bold);
    color:          var(--clr-text);
    flex-shrink:    0;
    letter-spacing: -0.02em;
    transition:     opacity var(--duration-fast) var(--ease-out);
}

.nav__logo:hover { opacity: 0.75; }

.nav__logo-prefix { color: var(--clr-green); }

.nav__links {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex:        1;
}

.nav__link {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--weight-medium);
    color:          var(--clr-text-2);
    padding:        var(--space-2) var(--space-3);
    border-radius:  3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:     color var(--duration-fast) var(--ease-out),
                    background-color var(--duration-fast) var(--ease-out);
}

.nav__link:hover {
    color:            var(--clr-text);
    background-color: var(--clr-bg-3);
}

.nav__link--active {
    color:            var(--clr-green);
    background-color: rgba(0, 230, 118, 0.08);
}

.nav__link--active:hover {
    color:            var(--clr-green);
    background-color: rgba(0, 230, 118, 0.12);
}

.nav__user {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    margin-left: auto;
    flex-shrink: 0;
}

.nav__user-email {
    font-size:     var(--text-xs);
    color:         var(--clr-text-3);
    max-width:     160px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.nav__user-link {
    font-size:      var(--text-sm);
    color:          var(--clr-text-2);
    padding:        var(--space-1) var(--space-3);
    border:         1px solid var(--clr-border-2);
    border-radius:  3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:     color var(--duration-fast) var(--ease-out),
                    border-color var(--duration-fast) var(--ease-out);
}

.nav__user-link:hover {
    color:        var(--clr-green);
    border-color: var(--clr-green);
}

.nav__toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           32px;
    height:          32px;
    padding:         4px;
    margin-left:     auto;
}

.nav__toggle span {
    display:          block;
    width:            100%;
    height:           2px;
    background-color: var(--clr-text-2);
    border-radius:    1px;
    transition:       transform var(--duration-base) var(--ease-out),
                      opacity var(--duration-base) var(--ease-out);
}

/* ─── Hoofdinhoud ────────────────────────────────────────────────────────── */

.main {
    flex:      1;
    width:     100%;
    max-width: var(--max-width);
    margin:    0 auto;
    padding:   var(--space-8) var(--space-6);
}

/* ─── Gedeelde componenten ───────────────────────────────────────────────── */

.loading {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     var(--space-8) 0;
    color:       var(--clr-text-3);
    font-size:   var(--text-sm);
}

.loading__dot {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background-color: var(--clr-green);
    animation:        loading-pulse 1.2s ease-in-out infinite;
}

.loading__dot:nth-child(2) { animation-delay: 0.2s; }
.loading__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-pulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1);   }
}

.error-msg {
    padding:       var(--space-4) var(--space-6);
    background:    rgba(255, 23, 68, 0.08);
    border:        1px solid rgba(255, 23, 68, 0.3);
    border-radius: 4px;
    color:         var(--clr-red);
    font-size:     var(--text-sm);
    margin:        var(--space-4) 0;
}

.filter-group {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.filter-group--right {
    margin-left: auto;
}

.filter-btn {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-medium);
    color:          var(--clr-text-2);
    padding:        var(--space-1) var(--space-3);
    border:         1px solid var(--clr-border-2);
    border-radius:  3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:     color var(--duration-fast) var(--ease-out),
                    border-color var(--duration-fast) var(--ease-out),
                    background-color var(--duration-fast) var(--ease-out);
}

.filter-btn:hover {
    color:        var(--clr-text);
    border-color: var(--clr-text-3);
}

.filter-btn--active {
    color:            var(--clr-green);
    border-color:     var(--clr-green);
    background-color: rgba(0, 230, 118, 0.08);
}

.filter-toggle {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    cursor:      pointer;
}

.filter-toggle__input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.filter-toggle__track {
    position:      relative;
    width:         36px;
    height:        20px;
    background:    var(--clr-bg-3);
    border:        1px solid var(--clr-border-2);
    border-radius: 10px;
    transition:    background var(--duration-base) var(--ease-out);
    flex-shrink:   0;
}

.filter-toggle__track::after {
    content:       '';
    position:      absolute;
    top:           2px;
    left:          2px;
    width:         14px;
    height:        14px;
    background:    var(--clr-text-3);
    border-radius: 50%;
    transition:    transform var(--duration-base) var(--ease-out),
                   background var(--duration-base) var(--ease-out);
}

.filter-toggle__input:checked + .filter-toggle__track {
    background:   rgba(0, 230, 118, 0.15);
    border-color: var(--clr-green);
}

.filter-toggle__input:checked + .filter-toggle__track::after {
    transform:  translateX(16px);
    background: var(--clr-green);
}

.filter-toggle__label {
    font-size:      var(--text-xs);
    color:          var(--clr-text-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge {
    display:        inline-flex;
    align-items:    center;
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    letter-spacing: 0.08em;
    padding:        2px 6px;
    border-radius:  2px;
    text-transform: uppercase;
}

.badge--hot   { color: #ff1744; background: rgba(255,23,68,0.12);   border: 1px solid rgba(255,23,68,0.3); }
.badge--warm  { color: #ffab00; background: rgba(255,171,0,0.12);   border: 1px solid rgba(255,171,0,0.3); }
.badge--watch { color: #40c4ff; background: rgba(64,196,255,0.12);  border: 1px solid rgba(64,196,255,0.3); }
.badge--cold  { color: #4d6b78; background: rgba(77,107,120,0.12);  border: 1px solid rgba(77,107,120,0.3); }

.placeholder {
    padding:    var(--space-12);
    text-align: center;
    color:      var(--clr-text-3);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .nav__inner {
        padding: 0 var(--space-4);
        gap:     var(--space-4);
    }

    .nav__links {
        display:         none;
        position:        absolute;
        top:             var(--nav-height);
        left:            0;
        right:           0;
        flex-direction:  column;
        align-items:     stretch;
        gap:             0;
        background:      var(--clr-bg-2);
        border-bottom:   1px solid var(--clr-border);
        padding:         var(--space-2) 0;
    }

    .nav__links--open { display: flex; }

    .nav__link {
        padding:       var(--space-3) var(--space-6);
        border-radius: 0;
    }

    .nav__user  { display: none; }
    .nav__toggle { display: flex; }

    .main { padding: var(--space-6) var(--space-4); }
}

@media (max-width: 480px) {
    .main { padding: var(--space-4) var(--space-3); }
}