/* ─── Basis: donkere modus (standaard) ──────────────────────────────── */
body {
    background-color: #0f172a;
    color: #f1f5f9;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

header {
    background-color: #1e293b;
    border-bottom: 1px solid #334155;
}

.card {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

footer {
    border-top: 1px solid #334155;
    color: #64748b;
}

kbd {
    background-color: #334155;
    color: #cbd5e1;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* ─── Lichte modus ────────────────────────────────────────────────── */
body:not(.dark) {
    background-color: #f1f5f9;
    color: #0f172a;
}

body:not(.dark) header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

body:not(.dark) .card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

body:not(.dark) footer {
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
}

body:not(.dark) kbd {
    background-color: #e2e8f0;
    color: #475569;
}

/* Teksten in lichte modus */
body:not(.dark) .text-gray-400,
body:not(.dark) .text-gray-500 {
    color: #475569 !important;
}

body:not(.dark) .text-gray-600 {
    color: #64748b !important;
}

/* Koppen en witte tekst zwart in lichte modus */
body:not(.dark) .text-white,
body:not(.dark) h1, body:not(.dark) h2, body:not(.dark) h3 {
    color: #0f172a !important;
}

/* Spans met donkere achtergrond → lichtgrijs met zwarte tekst */
body:not(.dark) span.bg-gray-800,
body:not(.dark) span.bg-gray-700,
body:not(.dark) span.bg-gray-900,
body:not(.dark) .bg-gray-800 {
    background-color: #e8edf3 !important;
    color: #1e293b !important;
}

/* Monospace tekst (UUID, hash, etc.) zwart in lichte modus */
body:not(.dark) .text-gray-200,
body:not(.dark) .text-gray-300,
body:not(.dark) .font-mono {
    color: #1e293b !important;
}

/* Kopieer-knoppen: blauw met witte tekst in lichte modus */
body:not(.dark) button.bg-gray-700,
body:not(.dark) button.bg-gray-700:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}
body:not(.dark) button.bg-gray-700:hover {
    background-color: #4338ca !important;
}

/* Tabellen in lichte modus */
body:not(.dark) th,
body:not(.dark) td {
    color: #0f172a !important;
}

body:not(.dark) .border-gray-700 {
    border-color: #e2e8f0 !important;
}

/* ─── Kopieer knop ───────────────────────────────────────────────── */
#copyBtn {
    background-color: #4f46e5;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}
#copyBtn:hover {
    background-color: #4338ca;
}

/* ─── Dark mode knop ─────────────────────────────────────────────── */
#darkBtn {
    background-color: #334155;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 150ms ease;
}
#darkBtn:hover {
    background-color: #475569;
}

body:not(.dark) #darkBtn {
    background-color: #e2e8f0;
}
body:not(.dark) #darkBtn:hover {
    background-color: #cbd5e1;
}

/* ─── IP adres display ───────────────────────────────────────────── */
#ipDisplay {
    cursor: pointer;
    color: #f1f5f9;
    transition: color 150ms ease;
}
#ipDisplay:hover {
    color: #6366f1;
}

body:not(.dark) #ipDisplay {
    color: #0f172a;
}

/* ─── Toast animatie ─────────────────────────────────────────────── */
#copyToast {
    transition: opacity 300ms ease;
}

/* ─── CTA bladwijzer blok ────────────────────────────────────────── */
.cta-bladwijzer {
    border: 1px solid rgba(99, 102, 241, 0.35);
    background-color: rgba(99, 102, 241, 0.08);
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
}

body:not(.dark) .cta-bladwijzer {
    background-color: rgba(99, 102, 241, 0.06);
}

/* ─── Kaart subtitels ────────────────────────────────────────────── */
.card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 0.75rem;
}

body:not(.dark) .card-label {
    color: #94a3b8;
}

body:not(.dark) .trend-count {
    color: #0f172a !important;
}

/* Actieve protocol badge */
.protocol-active {
    color: #c4b5fd;
}
body:not(.dark) .protocol-active {
    color: #ffffff;
}

/* ─── Inputs & textareas lichte modus ───────────────────────────── */
body:not(.dark) input[type="text"],
body:not(.dark) input[type="number"],
body:not(.dark) input[type="url"],
body:not(.dark) input[type="email"],
body:not(.dark) input[type="datetime-local"],
body:not(.dark) textarea,
body:not(.dark) select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
}

body:not(.dark) input::placeholder,
body:not(.dark) textarea::placeholder {
    color: #94a3b8 !important;
}

/* ─── Inputs donkere modus ───────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="datetime-local"],
textarea,
select {
    background-color: #1e293b;
    color: #f1f5f9;
    border: 1.5px solid #334155;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.875rem;
    width: 100%;
    outline: none;
    transition: border-color 150ms ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #6366f1 !important;
}

/* ─── PWA standalone ─────────────────────────────────────────────── */
@media (display-mode: standalone) {
    header {
        padding-top: env(safe-area-inset-top, 1rem);
    }
}