/* ============================================================================
   Strandhorst Waterpeil – centraal stylesheet
   Geladen op ELKE pagina via includes/header.php voor een consistente layout.
   ========================================================================== */

:root {
    --bg:          #0a1628;
    --bg-soft:     #0f2133;
    --panel:       rgba(31, 41, 55, 0.6);
    --panel-brd:   rgba(75, 85, 99, 0.4);
    --ocean-300:   #7fe0ff;
    --ocean-400:   #44cefe;
    --ocean-500:   #1ab3f5;
    --ocean-600:   #038fd2;
    --ocean-700:   #0472aa;
    --ocean-800:   #085f8b;
    --ocean-900:   #0d4f73;
    --sand-200:    #fdf0c7;
    --text:        #f3f4f6;
    --text-dim:    #9ca3af;
    --text-faint:  #6b7280;
    --green:       #22c55e;
    --yellow:      #facc15;
    --red:         #ef4444;
    --radius:      14px;
    --coffee:      #ffdd00;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ocean-400); text-decoration: none; transition: color .15s; }
a:hover { color: var(--ocean-300); }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ocean-600); border-radius: 4px; }

/* ── Layout container ──────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.page { flex: 1 0 auto; padding: 2.5rem 0 3.5rem; }

/* ============================================================================
   HEADER / NAVIGATIE
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(10, 22, 40, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(26, 179, 245, 0.25);
}
.site-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: .7rem; padding-bottom: .7rem; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand .logo { font-size: 1.6rem; line-height: 1; }
.brand h1 { font-size: 1.05rem; color: var(--ocean-300); font-weight: 700; }
.brand p  { font-size: .72rem; color: var(--text-faint); }

.site-nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.site-nav a.nav-link {
    font-size: .9rem; color: var(--text-dim); font-weight: 500;
    padding: .35rem 0; position: relative;
}
.site-nav a.nav-link:hover,
.site-nav a.nav-link.active { color: var(--ocean-300); }
.site-nav a.nav-link.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--ocean-500); border-radius: 2px;
}

/* Buy me a coffee knop */
.btn-coffee {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--coffee); color: #0a1628 !important;
    font-weight: 700; font-size: .85rem;
    padding: .45rem .9rem; border-radius: 10px;
    box-shadow: 0 2px 12px rgba(255, 221, 0, .35);
    transition: transform .12s, box-shadow .12s;
}
.btn-coffee:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(255, 221, 0, .5);
    color: #0a1628 !important;
}

/* Mobiele nav-toggle */
.nav-toggle {
    display: none; background: none; border: 1px solid var(--panel-brd);
    color: var(--text); border-radius: 8px; padding: .3rem .55rem;
    font-size: 1.1rem; cursor: pointer;
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(75, 85, 99, 0.3);
    padding: 1.8rem 0;
    margin-top: 2rem;
    font-size: .8rem; color: var(--text-faint);
}
.footer-nav {
    display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; justify-content: center;
    margin-bottom: .9rem;
}
.footer-nav a { color: var(--text-dim); }
.footer-nav a:hover { color: var(--ocean-400); }
.footer-meta { text-align: center; color: var(--text-faint); }

/* ============================================================================
   PANELEN, KNOPPEN, FORMULIEREN
   ========================================================================== */
.panel {
    background: var(--panel);
    border: 1px solid var(--panel-brd);
    border-radius: var(--radius);
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}
.panel + .panel { margin-top: 1.25rem; }

h2.section-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .35rem; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 1.2rem 0 .5rem; color: var(--ocean-300); }
p  { margin-bottom: .8rem; color: #d1d5db; }
ul, ol { margin: 0 0 .9rem 1.4rem; color: #d1d5db; }
li { margin-bottom: .3rem; }
.lead { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 1.5rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--ocean-600); color: #fff; font-weight: 600;
    border: none; border-radius: 10px; padding: .7rem 1.2rem;
    font-size: .95rem; cursor: pointer; transition: background .15s, opacity .15s;
}
.btn:hover { background: var(--ocean-500); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; border: 1px solid var(--panel-brd); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--text); }
.btn-danger { background: #b91c1c; }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: .3rem .6rem; font-size: .78rem; border-radius: 8px; }

label { display: block; font-size: .88rem; color: #d1d5db; margin-bottom: .35rem; font-weight: 500; }
input, select, textarea {
    width: 100%; background: #0d1b2e; color: var(--text);
    border: 1px solid #334155; border-radius: 9px;
    padding: .6rem .75rem; font-size: .92rem; color-scheme: dark;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--ocean-500);
    box-shadow: 0 0 0 2px rgba(26,179,245,.3);
}
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.field { margin-bottom: 1rem; }
.req { color: var(--red); }

.divider {
    display: flex; align-items: center; gap: .8rem;
    color: var(--text-faint); font-size: .8rem; margin: 1.3rem 0;
}
.divider::before, .divider::after {
    content: ''; flex: 1; height: 1px; background: var(--panel-brd);
}

/* OAuth-knoppen */
.oauth-grid { display: grid; gap: .6rem; }
.oauth-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: #0d1b2e; border: 1px solid var(--panel-brd);
    color: var(--text); border-radius: 10px; padding: .65rem;
    font-weight: 600; font-size: .9rem; transition: background .15s;
}
.oauth-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
.oauth-btn .oauth-icon {
    width: 22px; height: 22px; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 800; border-radius: 4px;
}

/* ── Badges, vlaggen, alerts ──────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.badge-goed   { background: rgba(34,197,94,.18);  color: #86efac; }
.badge-matig  { background: rgba(250,204,21,.18);  color: #fde68a; }
.badge-slecht { background: rgba(239,68,68,.18);   color: #fca5a5; }
.badge-admin  { background: rgba(26,179,245,.18);  color: var(--ocean-300); }
.badge-role   { background: rgba(148,163,184,.2);  color: #cbd5e1; }

.flag {
    display: inline-flex; align-items: center; gap: .3rem;
    color: #fca5a5; font-weight: 700; font-size: .8rem;
}
tr.row-flagged { background: rgba(239, 68, 68, 0.1); }
tr.row-flagged td { border-left: 0; }

.alert {
    border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem;
    border: 1px solid transparent;
}
.alert-info    { background: rgba(26,179,245,.12); border-color: rgba(26,179,245,.3); color: var(--ocean-300); }
.alert-success { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3);  color: #86efac; }
.alert-error   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3);  color: #fca5a5; }

/* ── Tabellen ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--panel-brd); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data thead { background: rgba(10,22,40,.7); }
table.data th {
    text-align: left; padding: .7rem .8rem; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim);
}
table.data td { padding: .7rem .8rem; border-top: 1px solid rgba(75,85,99,.3); }
table.data tbody tr:hover { background: rgba(255,255,255,.03); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: ui-monospace, 'Cascadia Code', monospace; }

/* ── Filterbalk ────────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: 1.2rem; }
.filters .field { margin-bottom: 0; min-width: 150px; }

/* ── Changelog / prose ─────────────────────────────────────────────────────── */
.prose h1 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text); }
.prose h2 {
    font-size: 1.3rem; margin: 1.8rem 0 .6rem; color: var(--ocean-300);
    border-bottom: 1px solid var(--panel-brd); padding-bottom: .3rem;
}
.prose h3 { font-size: 1.05rem; color: var(--sand-200); }
.prose code {
    background: #0d1b2e; padding: .1rem .35rem; border-radius: 5px;
    font-family: ui-monospace, monospace; font-size: .85em; color: var(--ocean-300);
}
.prose pre {
    background: #0d1b2e; border: 1px solid var(--panel-brd); border-radius: 10px;
    padding: 1rem; overflow-x: auto; margin-bottom: 1rem;
}
.prose pre code { background: none; padding: 0; color: #d1d5db; }
.prose a { text-decoration: underline; }
.prose hr { border: none; border-top: 1px solid var(--panel-brd); margin: 1.6rem 0; }

/* ── Hero (home & surfadvisor) ─────────────────────────────────────────────── */
.hero {
    text-align: center; padding: 2.5rem 1rem;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    border-radius: var(--radius); margin-bottom: 1.5rem;
}
.hero h2 {
    font-size: 2.2rem; font-weight: 800;
    background: linear-gradient(90deg, #00c9ff, #92fe9d);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p { color: rgba(255,255,255,.7); max-width: 560px; margin: .6rem auto 0; }

.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
#toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2000;
    max-width: 22rem; padding: .8rem 1.1rem; border-radius: 12px;
    font-size: .88rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.4);
    display: none; align-items: center; gap: .6rem;
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
#toast.toast-success { background: #15803d; color: #dcfce7; }
#toast.toast-error   { background: #b91c1c; color: #fee2e2; }
#toast.toast-info    { background: var(--ocean-700); color: #e0f2fe; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .form-row, .grid-2 { grid-template-columns: 1fr; }
    .nav-toggle { display: inline-flex; }
    .site-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: .4rem;
        background: rgba(10,22,40,.98); padding: 1rem;
        border-bottom: 1px solid rgba(26,179,245,.25);
    }
    .site-nav.open { display: flex; }
    .site-header .wrap { position: relative; }
}