/*
 * Gedeelde opmaak voor alle pagina's: één lettertype en één moderne stijl.
 *
 * Elke pagina heeft nog zijn eigen <style>, maar dit bestand wordt overal
 * ingeladen en zet de gezamenlijke look eroverheen (menu, kaarten, knoppen,
 * invulvelden, tabellen). "html body ..." staat voor de regels zodat ze
 * voorrang krijgen op de losse pagina-stijlen.
 *
 * Lettertype: Inter (gratis, via Google Fonts). Zonder internet valt de
 * browser terug op Arial.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --main: #66C6DA;
  --main-donker: #1c7a8c;
  --accent: #6366f1;
  --verloop: linear-gradient(135deg, #66C6DA 0%, #4f9bd9 55%, #6366f1 100%);
  --nacht: #0f172a;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e6eaf0;
  --schaduw: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --schaduw-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 32px rgba(15, 23, 42, .10);
}

html, body, button, input, select, textarea, table, th, td, h1, h2, h3, h4, label, a, p, span, div {
  font-family: 'Inter', Arial, Helvetica, sans-serif !important;
}

/* ---------- Achtergrond ---------- */
html body {
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(99, 102, 241, .08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(102, 198, 218, .14), transparent 60%),
    #f5f7fb;
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

html body h2 { font-weight: 800; letter-spacing: -.02em; }
html body h3 { font-weight: 700; letter-spacing: -.01em; }

/* ---------- Bovenbalk ---------- */
html body .topbar {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(230, 234, 240, .9);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
html body .topbar strong {
  font-weight: 800;
  letter-spacing: -.01em;
  background: var(--verloop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html body .topbar .topbar-logo { height: 32px; width: auto; display: block; margin-right: 8px; }

/* ---------- Inlogpagina ---------- */
html body .login-box { box-shadow: 0 20px 60px rgba(15, 23, 42, .12); border-radius: 22px; }
html body .login-box h2 { font-size: 26px; }
html body .login-box button {
  background: var(--verloop); box-shadow: 0 8px 20px rgba(79, 155, 217, .35); font-weight: 700; padding: 13px;
}
html body .login-box button:hover { background: var(--verloop); filter: brightness(1.05); }
/* "Wachtwoord vergeten?" en "Terug naar inloggen": een tekstlink, geen knop */
html body .login-box button.link-knop, html body .login-box button.link-knop:hover {
  background: none; box-shadow: none; filter: none; transform: none; color: var(--muted, #6b7280);
  font-weight: 500; padding: 6px; min-height: 0; width: auto;
}
html body .login-box button.link-knop:hover { color: var(--text, #1f2937); }
html body .hamburger {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; transition: background .15s ease;
}
html body .hamburger:hover { background: #eef6f9; }

/* ---------- Zijmenu ---------- */
html body .sidebar {
  background: var(--nacht);
  border-right: none;
  color: #e2e8f0;
  box-shadow: 8px 0 30px rgba(15, 23, 42, .25);
}
html body .sidebar h3 {
  color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  margin: 6px 0 14px;
}
html body .sidebar .menu-item {
  color: #cbd5e1; border-radius: 10px; font-size: 14px; font-weight: 500;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
html body .sidebar .menu-item:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: translateX(2px); }
html body .sidebar .menu-item.active {
  background: var(--verloop); color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px rgba(79, 155, 217, .35);
}
html body .sidebar .logout, html body .sidebar .menu-item[onclick*="uitloggen"] { color: #fca5a5 !important; }
html body .sidebar .logout:hover, html body .sidebar .menu-item[onclick*="uitloggen"]:hover { background: rgba(239, 68, 68, .12); }
html body .overlay { background: rgba(15, 23, 42, .30); }

/* ---------- Kaarten ---------- */
html body .card,
html body .add-box,
html body .column,
html body .stat,
html body .festcard,
html body .feature,
html body .selected-bar,
html body .login-box,
html body .archief-item,
html body .category {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--schaduw);
}
html body .festcard:hover, html body .feature:hover {
  box-shadow: var(--schaduw-hover); border-color: rgba(102, 198, 218, .7);
}
html body .card h3 { color: var(--text); }
html body .stat .val, html body .stat .num { font-weight: 800; letter-spacing: -.02em; }

/* Welkomstblokken krijgen het verloop */
html body .welkom, html body .welcome-card {
  background: var(--verloop);
  box-shadow: 0 12px 30px rgba(79, 155, 217, .30);
  position: relative; overflow: hidden;
}
html body .welkom::after, html body .welcome-card::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, .12);
}

/* ---------- Knoppen ---------- */
html body button {
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
html body button:not(:disabled):hover { transform: translateY(-1px); }
html body button:not(:disabled):active { transform: translateY(0); }
html body button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(102, 198, 218, .45); }
html body .btn-primary, html body button.save-btn {
  background: var(--verloop) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px rgba(79, 155, 217, .30);
}

/* ---------- Invulvelden ---------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]),
html body select,
html body textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body input:not([type=checkbox]):not([type=radio]):focus,
html body select:focus,
html body textarea:focus {
  outline: none; border-color: var(--main); box-shadow: 0 0 0 3px rgba(102, 198, 218, .22);
}
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--main); }

/* ---------- Tabellen ---------- */
html body th { letter-spacing: .06em; font-weight: 600; }
html body tbody tr { transition: background .12s ease; }
html body tbody tr:hover td { background-color: rgba(102, 198, 218, .05); }

/* ---------- Kleine details ---------- */
html body ::selection { background: rgba(102, 198, 218, .3); }
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid #f5f7fb; }
html body ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Telefoon (smal scherm) ----------
 * Geldt voor alle pagina's. Tabellen worden horizontaal scrollbaar in plaats
 * van de pagina breder te maken, kolommen komen onder elkaar, en knoppen en
 * velden zijn groot genoeg voor een vinger. Invulvelden zijn 16px zodat de
 * iPhone niet inzoomt. */
@media (max-width: 760px) {
  html, html body { overflow-x: hidden; }
  html body .main, html body main, html body .container, html body .wrap { padding: 12px !important; max-width: 100% !important; }
  html body .topbar { padding: 0 10px !important; gap: 8px !important; height: 56px; }
  html body .topbar strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html body .topbar .topbar-logo { height: 28px; margin-right: 2px; }
  html body #profielKnop .pv-naam { display: none; }
  html body .sidebar { width: 82vw !important; max-width: 300px; }
  html body .sidebar .menu-item { padding: 12px !important; font-size: 15px; }
  html body .card { padding: 14px !important; border-radius: 14px; }
  html body h2 { font-size: 20px; }
  html body button, html body .knop, html body .btn { min-height: 40px; }
  html body input:not([type=checkbox]):not([type=radio]):not([type=file]), html body select, html body textarea { font-size: 16px !important; }
  /* Losse tabellen scrollen zijwaarts binnen hun kaart */
  html body .card table:not(.uurgrid), html body .tabel-wrap > table, html body table.week { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  /* Twee-koloms indelingen onder elkaar */
  html body .layout, html body .grid-2, html body .twee-kolom { grid-template-columns: 1fr !important; display: grid; }
  html body .twee { grid-template-columns: 1fr 1fr; }
  /* Pop-ups passen op het scherm */
  html body .modal, html body .modal-bg > div, html body #bewerkVenster > div, html body #profielVenster > div { max-height: 90vh; overflow-y: auto; }
}

/* Aanraakschermen hebben geen "muis erover": knopjes die anders pas bij hover
 * verschijnen (✕ weghalen, + inplannen) zijn daar altijd zichtbaar. */
@media (pointer: coarse) {
  html body .weg, html body .rij-weg { opacity: 1 !important; }
  html body .cel .plus { opacity: .6 !important; }
}

@media print {
  html body { background: #fff; }
  html body .card { box-shadow: none; }
}