/* ================================================================
   PPA Tools — Dark Design System (upbyte Visual System 2026)
   ================================================================ */

:root {
    --bg-void: #08090C;
    --bg-dark: #0F1115;
    --bg-graphite: #161A22;
    --bg-slate: #1E232D;
    --bg-charcoal: #282E3A;
    --bg-steel: #353C4A;

    --text-cream: #F0F2F7;
    --text-silver: #D0D5E0;
    --text-secondary: rgba(240,242,247,0.85);
    --text-muted: #9AA3B8;
    --text-dim: #7E87A0;

    --accent-cyan: #00C8F0;
    --accent-cyan-bright: #00dcff;
    --accent-cyan-70: rgba(0,200,240,0.7);
    --accent-cyan-40: rgba(0,200,240,0.4);
    --accent-cyan-15: rgba(0,200,240,0.15);
    --accent-cyan-06: rgba(0,200,240,0.06);
    --accent-violet: #B090FF;

    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;

    --border: rgba(240,242,247,0.06);
    --border-mid: rgba(240,242,247,0.10);
    --border-strong: rgba(240,242,247,0.15);

    --surface: rgba(240,242,247,0.02);
    --surface-hover: rgba(240,242,247,0.05);
    --surface-active: rgba(0,200,240,0.04);

    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    --neon-glow: 0 0 20px rgba(0,200,240,0.15), 0 0 60px rgba(0,200,240,0.05);
    --neon-glow-strong: 0 0 15px rgba(0,200,240,0.3), 0 0 45px rgba(0,200,240,0.1);
    --neon-text-glow: 0 0 8px rgba(0,200,240,0.4);
}

/* --- Font Faces --- */
@font-face { font-family: 'DM Sans'; src: url('https://upbyte.de/fonts/DMSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('https://upbyte.de/fonts/DMSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('https://upbyte.de/fonts/DMSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('https://upbyte.de/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('https://upbyte.de/fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* --- Global Reset --- */
*, *::before, *::after { border-radius: 0 !important; box-sizing: border-box; }

html, html.dark {
    background: var(--bg-void);
    color: var(--text-cream);
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body, .font-sans {
    font-family: var(--font-body) !important;
    font-size: 0.9375rem;
    line-height: 1.65;
    background: var(--bg-void) !important;
    color: var(--text-cream) !important;
}

.font-mono, code, pre, kbd { font-family: var(--font-mono) !important; }

::selection { background: var(--accent-cyan-15); color: var(--text-cream); }

/* --- Override ALL Tailwind light --- */
.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200 { background-color: var(--bg-graphite) !important; }
.bg-gray-800, .bg-gray-900 { background-color: var(--bg-dark) !important; }
.text-gray-900, .text-gray-800, .text-gray-700 { color: var(--text-cream) !important; }
.text-gray-600, .text-gray-500 { color: var(--text-muted) !important; }
.text-gray-400, .text-gray-300 { color: var(--text-dim) !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400 { border-color: var(--border) !important; }
.min-h-screen { background: var(--bg-void) !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
.ring-1, [class*="ring-indigo"], [class*="ring-offset"] { --tw-ring-color: transparent !important; }
.text-indigo-600, .text-indigo-500 { color: var(--accent-cyan) !important; }
.bg-indigo-600, .bg-indigo-500 { background-color: var(--accent-cyan) !important; color: var(--bg-void) !important; }
.text-red-600, .text-red-500 { color: var(--color-error) !important; }
.text-green-600, .text-green-500 { color: var(--color-success) !important; }

/* ================================================================
   NAVIGATION
   ================================================================ */
nav { background: var(--bg-dark) !important; border-bottom: 1px solid var(--border) !important; }

.ppa-nav-brand {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--accent-cyan);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-shadow: var(--neon-text-glow);
}

.ppa-nav-link {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.5rem 0.625rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
    white-space: nowrap;
}
.ppa-nav-link:hover { color: var(--text-cream); }
.ppa-nav-link.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
    text-shadow: var(--neon-text-glow);
}

.ppa-mobile-link {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.625rem 1rem;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.ppa-mobile-link:hover { color: var(--text-cream); background: var(--surface-hover); }
.ppa-mobile-link.active { color: var(--accent-cyan); border-left-color: var(--accent-cyan); background: var(--surface-active); }

.ppa-user-btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400;
    color: var(--text-silver); background: transparent;
    border: 1px solid var(--border); padding: 0.375rem 0.75rem;
    cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.ppa-user-btn:hover { border-color: var(--accent-cyan-40); color: var(--accent-cyan); }
.ppa-user-btn svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }

.ppa-hamburger { color: var(--text-muted); background: transparent; border: none; padding: 0.5rem; cursor: pointer; }
.ppa-hamburger:hover { color: var(--text-cream); }

nav .absolute { background: var(--bg-slate) !important; border: 1px solid var(--border-mid) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }
nav a[class*="block"] { color: var(--text-muted) !important; transition: color 0.2s; }
nav a[class*="block"]:hover { color: var(--text-cream) !important; background: var(--surface-hover) !important; }

/* ================================================================
   PAGE HEADER
   ================================================================ */
header, header.bg-white { background: var(--bg-dark) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; }
header h2 { color: var(--text-cream) !important; font-family: var(--font-body); font-weight: 600; }

/* ================================================================
   LAYOUT: Constrain content width
   ================================================================ */
.py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* ================================================================
   CARDS
   ================================================================ */
.ppa-card {
    display: block;
    background: var(--bg-graphite);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25,0.1,0.25,1);
    position: relative;
    overflow: hidden;
}
.ppa-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-cyan-06) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.3s;
}
.ppa-card:hover {
    border-color: var(--border-mid);
    border-left-color: var(--accent-cyan);
    background: var(--bg-slate);
    box-shadow: var(--neon-glow);
}
.ppa-card:hover::before { opacity: 1; }

.ppa-card-icon {
    width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-cyan-06);
    border: 1px solid rgba(0,200,240,0.1);
    margin-bottom: 0.75rem;
    position: relative; z-index: 1;
}
.ppa-card-icon svg { width: 1.25rem; height: 1.25rem; color: var(--accent-cyan); }

.ppa-card-title {
    font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
    color: var(--text-cream); margin-bottom: 0.25rem; position: relative; z-index: 1;
}
.ppa-card-desc {
    font-size: 0.775rem; color: var(--text-muted); line-height: 1.5;
    position: relative; z-index: 1;
}

/* ================================================================
   TABLES
   ================================================================ */
table { width: 100%; border-collapse: collapse; background: var(--bg-graphite); }
thead, thead tr { background: var(--bg-dark) !important; }
th {
    font-family: var(--font-mono) !important;
    font-size: 0.65rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-dim) !important;
    padding: 0.625rem 0.875rem;
    text-align: left; border-bottom: 1px solid var(--border-mid);
}
td {
    padding: 0.625rem 0.875rem;
    color: var(--text-silver);
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
}
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--surface-hover); }

/* ================================================================
   FORMS — CONSTRAINED WIDTH
   ================================================================ */
.ppa-form-container {
    max-width: 640px;
}

.ppa-form-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
}
.ppa-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppa-form-grid .col-span-2 { grid-column: span 2; }
@media (max-width: 639px) {
    .ppa-form-grid { grid-template-columns: 1fr; }
    .ppa-form-grid .col-span-2 { grid-column: span 1; }
}

label, .ppa-label, [for] {
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted) !important;
    margin-bottom: 0.375rem;
    display: block;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
    background: var(--bg-void) !important;
    color: var(--text-cream) !important;
    border: 1px solid var(--border-mid) !important;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    outline: none;
    max-width: 640px;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 0 2px var(--accent-cyan-15), var(--neon-glow) !important;
    outline: none !important;
    --tw-ring-color: transparent !important;
}

input::placeholder, textarea::placeholder { color: var(--text-dim); }

/* Override Tailwind w-full on form inputs inside grid contexts */
.grid input, .grid select, .grid textarea,
.ppa-form-grid input, .ppa-form-grid select, .ppa-form-grid textarea {
    max-width: 100% !important;
}

input[type="checkbox"], input[type="radio"] {
    background: var(--bg-void) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--accent-cyan) !important;
    width: auto; max-width: none;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.ppa-btn, .ppa-btn-primary, button[type="submit"], [class*="primary-button"] {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--accent-cyan) !important;
    color: var(--bg-void) !important;
    border: 1px solid var(--accent-cyan) !important;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.ppa-btn:hover, .ppa-btn-primary:hover, button[type="submit"]:hover, [class*="primary-button"]:hover {
    background: transparent !important;
    color: var(--accent-cyan) !important;
    box-shadow: var(--neon-glow-strong);
}

.ppa-btn-outline {
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    background: transparent; color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan-40); padding: 0.5rem 1.25rem;
    cursor: pointer; transition: all 0.25s; text-decoration: none;
    display: inline-flex; align-items: center;
}
.ppa-btn-outline:hover { border-color: var(--accent-cyan); box-shadow: var(--neon-glow); color: var(--accent-cyan-bright); }

.ppa-btn-ghost {
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    background: transparent; color: var(--text-muted);
    border: 1px solid transparent; padding: 0.5rem 1.25rem;
    cursor: pointer; transition: all 0.2s;
}
.ppa-btn-ghost:hover { color: var(--accent-cyan); border-color: var(--border-mid); }

.ppa-btn-danger {
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    background: var(--color-error); color: #fff;
    border: 1px solid var(--color-error); padding: 0.5rem 1.25rem;
    cursor: pointer; transition: all 0.25s;
}
.ppa-btn-danger:hover { background: transparent; color: var(--color-error); box-shadow: 0 0 20px rgba(239,68,68,0.2); }

/* ================================================================
   BADGES
   ================================================================ */
.ppa-badge {
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem; display: inline-block;
}
.ppa-badge-cyan { color: var(--accent-cyan); background: var(--accent-cyan-15); border: 1px solid rgba(0,200,240,0.25); }
.ppa-badge-success { color: var(--color-success); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); }
.ppa-badge-warning { color: var(--color-warning); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); }
.ppa-badge-error { color: var(--color-error); background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); }

/* ================================================================
   NEON / GLOW EFFECTS
   ================================================================ */
.neon-text { color: var(--accent-cyan); text-shadow: var(--neon-text-glow); }
.neon-box { box-shadow: var(--neon-glow); border-color: var(--accent-cyan-40) !important; }
.neon-border { border-color: var(--accent-cyan) !important; box-shadow: 0 0 10px rgba(0,200,240,0.1); }

/* Neon result value */
.ppa-result-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-shadow: var(--neon-text-glow);
}
.ppa-result-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Stat panel */
.ppa-stat {
    background: var(--bg-graphite);
    border: 1px solid var(--border);
    padding: 1rem 1.25rem;
    transition: border-color 0.2s;
}
.ppa-stat:hover { border-color: var(--accent-cyan-40); }
.ppa-stat .value {
    font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700;
    color: var(--accent-cyan); text-shadow: var(--neon-text-glow);
}
.ppa-stat .label {
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}

/* Cyan glow pulse animation */
@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(0,200,240,0.1); }
    50% { box-shadow: 0 0 20px rgba(0,200,240,0.25); }
}
.neon-pulse { animation: neon-pulse 2.5s ease infinite; }

/* ================================================================
   CHARTS — Viewport-constrained
   ================================================================ */
.ppa-chart-container {
    position: relative;
    width: 100%;
    max-height: 35vh;
    min-height: 180px;
}
.ppa-chart-container canvas {
    max-height: 35vh !important;
    width: 100% !important;
}

/* Two charts side by side on larger screens */
.ppa-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .ppa-chart-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================
   MODULE LAYOUT: Calculator grids (3-col)
   ================================================================ */
.ppa-calc-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
}
@media (max-width: 767px) { .ppa-calc-grid { grid-template-columns: 1fr; } }

/* Result grid — compact */
.ppa-result-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-width: 800px;
}

/* Flight comparison columns */
.ppa-flight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 900px;
}
@media (max-width: 767px) { .ppa-flight-grid { grid-template-columns: 1fr; } }

.ppa-flight-card {
    background: var(--bg-graphite);
    border: 1px solid var(--border);
    padding: 1.25rem;
    transition: all 0.25s;
}
.ppa-flight-card.cheapest {
    border-color: var(--accent-cyan);
    box-shadow: var(--neon-glow);
}
.ppa-flight-card.cheapest .ppa-flight-total {
    color: var(--accent-cyan);
    text-shadow: var(--neon-text-glow);
}

/* Password result cards */
.ppa-pw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 800px;
}
@media (max-width: 767px) { .ppa-pw-grid { grid-template-columns: 1fr; } }

.ppa-pw-card {
    background: var(--bg-graphite);
    border: 1px solid var(--border);
    padding: 1.25rem;
    text-align: center;
}
.ppa-pw-card .pw-value {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-shadow: var(--neon-text-glow);
    word-break: break-all;
    margin: 0.5rem 0;
}
.ppa-pw-card .pw-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* ================================================================
   GUEST LAYOUT (Login / Register)
   ================================================================ */
.ppa-guest-wrapper {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: var(--bg-void);
}
.ppa-guest-brand {
    font-family: var(--font-mono);
    font-size: 1.5rem; font-weight: 500;
    color: var(--accent-cyan);
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
    text-decoration: none;
    text-shadow: var(--neon-text-glow);
}
.ppa-guest-card {
    width: 100%; max-width: 26rem;
    background: var(--bg-graphite);
    border: 1px solid var(--border);
    padding: 2rem;
}
.ppa-guest-card input { max-width: 100% !important; }

.ppa-link, a.underline {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: 0.775rem;
    transition: color 0.2s;
}
.ppa-link:hover, a.underline:hover { color: var(--accent-cyan) !important; }

/* ================================================================
   RESPONSIVE: Fit everything in viewport
   ================================================================ */

/* Tighter spacing on smaller monitors */
@media (max-height: 800px) {
    .py-12 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .ppa-card { padding: 1rem; }
    .p-6 { padding: 1rem !important; }
    .mb-8 { margin-bottom: 1rem !important; }
    .mb-6 { margin-bottom: 0.75rem !important; }
    .ppa-chart-container { max-height: 28vh; }
}

@media (max-height: 600px) {
    .ppa-chart-container { max-height: 22vh; min-height: 120px; }
    .py-12 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--bg-charcoal); }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    body { background: #fff !important; color: #000 !important; }
    nav, header, .no-print { display: none !important; }
    .ppa-card, table, td, th { border-color: #ccc !important; background: #fff !important; color: #000 !important; }
    .ppa-result-value, .ppa-stat .value, .neon-text { color: #000 !important; text-shadow: none !important; }
    a { color: #000 !important; }
}