/* =========================================================
   Egon's Tennisplanner — Court makeover 2026-09
   Presentatielaag only: geen API-, JS- of databasewijzigingen.
   ========================================================= */
:root{
  --tap:48px;
  --bg:#f4f7f2;
  --surface:#ffffff;
  --surface-2:#f8faf7;
  --text:#17231c;
  --muted:#68756d;
  --brand:#176b43;
  --brand-2:#22945d;
  --brand-3:#b8dc45;
  --brand-soft:#e9f6ee;
  --ok:#18864f;
  --danger:#c83f45;
  --warn:#b7791f;
  --border:#dfe7e1;
  --shadow-sm:0 8px 24px rgba(24,57,39,.08);
  --shadow-md:0 20px 55px rgba(24,57,39,.14);
  --radius-lg:24px;
  --radius-md:17px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 0%,rgba(184,220,69,.18),transparent 24rem),
    radial-gradient(circle at 92% 4%,rgba(34,148,93,.12),transparent 28rem),
    linear-gradient(180deg,#f8fbf6 0%,#f2f6f2 52%,#edf3ee 100%) !important;
  color:var(--text) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(23,107,67,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(23,107,67,.025) 1px,transparent 1px);background-size:32px 32px}
.container{width:min(1180px,100%);max-width:none !important;margin:0 auto;padding:clamp(14px,3vw,30px) !important;position:relative}

/* Header */
.header{margin:0 0 22px !important;padding:13px 14px !important;border:1px solid rgba(255,255,255,.85);border-radius:26px;background:rgba(255,255,255,.88);box-shadow:var(--shadow-sm);backdrop-filter:blur(18px) saturate(1.15) !important;gap:16px}
.brand{min-width:250px;gap:12px !important}.brand-logo{width:58px !important;height:58px !important;object-fit:contain;border-radius:17px;background:linear-gradient(145deg,#fff,#edf8f0);box-shadow:0 9px 24px rgba(23,107,67,.13);padding:6px}.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-kicker{font-size:.73rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--brand)}.brand-title{font-size:clamp(1.15rem,2.2vw,1.72rem);font-weight:900;letter-spacing:-.04em;color:#10251a}.week-chip{margin-left:2px;padding:6px 10px !important;border-radius:999px;background:var(--brand-soft) !important;color:var(--brand) !important;border:1px solid #cde9d8 !important;font-weight:800;font-size:.78rem;white-space:nowrap}
.nav{gap:7px !important;align-items:center}.nav button,.btn{min-height:44px;border:1px solid var(--border) !important;background:#fff !important;color:#25372c !important;border-radius:13px !important;font-weight:800;box-shadow:0 4px 12px rgba(24,57,39,.045);transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease}.nav button:hover,.btn:hover{transform:translateY(-1px);border-color:#bdd4c4 !important;box-shadow:0 9px 20px rgba(24,57,39,.09) !important}.nav button.active,.btn.btn-primary,.btn.btn-ok{color:#fff !important;border-color:transparent !important;background:linear-gradient(135deg,var(--brand),var(--brand-2)) !important;box-shadow:0 10px 24px rgba(23,107,67,.22) !important}.btn.btn-danger{color:#fff !important;border-color:transparent !important;background:linear-gradient(135deg,#d84d53,#b92f37) !important}.btn.btn-xs{min-height:36px;padding:7px 11px !important;font-size:.8rem}.icon-btn{width:auto !important;min-width:46px;height:46px !important;padding:0 12px !important;gap:7px}.nav .sr-only{position:static !important;width:auto !important;height:auto !important;padding:0 !important;margin:0 !important;overflow:visible !important;clip:auto !important;white-space:nowrap !important;border:0 !important;font-size:.84rem}.icon-btn svg{width:19px !important;height:19px !important;flex:0 0 auto}

/* Cards, login en formulieren */
.card,.login-card,dialog{border:1px solid rgba(223,231,225,.9) !important;background:rgba(255,255,255,.96) !important;border-radius:var(--radius-lg) !important;box-shadow:var(--shadow-sm) !important}.card{padding:clamp(16px,2.2vw,24px) !important;margin:16px 0 !important;overflow:hidden}.card h2,.card h3,section h2,section h3{letter-spacing:-.03em;color:#14291c;margin-top:0}.login-card{max-width:460px !important;margin:clamp(34px,9vh,90px) auto !important;padding:30px !important;border-top:5px solid var(--brand-2) !important}.login-card h2{font-size:2rem;margin:0 0 8px}.login-card h2:after{content:'Welkom bij de tennisplanner';display:block;font-size:.92rem;font-weight:650;color:var(--muted);letter-spacing:0;margin-top:7px}.form-row{gap:7px !important;margin:12px 0 !important}input[type="text"],input[type="password"],input[type="date"],select,textarea{min-height:48px;border:1px solid var(--border) !important;border-radius:13px !important;background:#fff !important;color:var(--text);padding:11px 13px !important;box-shadow:inset 0 1px 1px rgba(24,57,39,.03)}input:focus,select:focus,textarea:focus{outline:3px solid rgba(34,148,93,.15);border-color:var(--brand-2) !important}label{color:#34473b;font-weight:800 !important}.muted{color:var(--muted) !important}.row{gap:9px !important}.hidden{display:none !important}
.alert{border:1px solid transparent !important;border-radius:15px !important;padding:13px 15px !important;font-weight:650}.alert.info{background:#edf8f1 !important;color:#155d3b !important;border-color:#cce9d7 !important}.alert.warn{background:#fff8e8 !important;color:#815515 !important;border-color:#f0dfb7 !important}.pill{border-radius:999px !important;font-weight:850 !important;background:var(--brand-soft) !important;color:var(--brand) !important;padding:6px 10px !important}

/* Dashboard */
#schedule-content > .card:first-child{background:linear-gradient(135deg,#fff 15%,#eff9f2 100%) !important;border:1px solid #d7eadc !important;position:relative}#schedule-content > .card:first-child:after{content:'🎾';position:absolute;right:22px;top:16px;font-size:2.4rem;opacity:.12;transform:rotate(-12deg)}#schedule-content .card div[style*="border-left:4px solid #667eea"],#schedule-content .card div[style*="border-left:4px solid #28a745"],#specials-content .card[style*="border-left"]{border-left:0 !important;border-radius:16px !important;background:#fbfdfb !important;border:1px solid var(--border) !important;box-shadow:none !important}

/* Tabellen */
table{border-collapse:separate !important;border-spacing:0 !important;width:100%;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#fff}th,td{border:0 !important;border-bottom:1px solid #e8ede9 !important;padding:11px 10px !important}thead th{background:#f0f5f1 !important;color:#425248;font-size:.79rem;text-transform:uppercase;letter-spacing:.055em;font-weight:850}tbody tr:last-child td{border-bottom:0 !important}tbody tr:hover td{background:#f8fbf8 !important}td.diag{background:#f1f4f2 !important}td.available,.day-tile.available{background:#edf9f1 !important}td.unavailable,.day-tile.unavailable{background:#fff1f1 !important}

/* Beschikbaarheid */
.weeks-wrap{gap:16px !important}.week-card{background:rgba(255,255,255,.96) !important;border:1px solid var(--border) !important}.week-title{font-size:1.08rem;font-weight:900;letter-spacing:-.02em;color:#183323}.week-range{color:var(--muted);font-size:.88rem;font-weight:700}.week-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr)) !important;gap:11px !important}.day-tile{min-height:94px !important;justify-content:space-between;border:1px solid var(--border) !important;border-radius:16px !important;padding:13px !important;box-shadow:0 4px 12px rgba(24,57,39,.04);transition:.14s ease}.day-tile.available{border-color:#bfe4cc !important}.day-tile.unavailable{border-color:#f0caca !important}.day-tile:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(24,57,39,.09)}.day-label{font-size:.98rem;color:#183323 !important;font-weight:850}.day-state{font-weight:800;color:#526258}

/* Statistieken */
.timeline-wrap,.timeline-scroll,div[style*="overflow:auto"]{border-radius:16px;-webkit-overflow-scrolling:touch}.timeline-card{border:1px solid var(--border) !important;border-radius:19px !important;box-shadow:var(--shadow-sm) !important;background:#fff !important}.timeline-legend{background:#f6f9f6 !important;border-color:var(--border) !important}.legend-chip{background:#fff}.leg-play,.tl-cell.play{background:#36a66d !important}.leg-no,.tl-cell.no{background:#df6a6e !important}.tl-cell.free{background:#dfe7e1 !important}

/* Admin en dialogs */
#admin-screen .card:first-child{border-top:4px solid var(--brand) !important}dialog{width:min(570px,calc(100vw - 28px));padding:24px !important}dialog::backdrop{background:rgba(16,37,26,.48) !important;backdrop-filter:blur(5px)}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:18px}
.footer{border:1px solid rgba(223,231,225,.85) !important;background:rgba(255,255,255,.72);border-radius:18px;padding:14px !important;margin-top:26px !important;box-shadow:0 5px 18px rgba(24,57,39,.045);color:#718078 !important}

/* Backupbeheer */
.backup-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.backup-list{display:grid;gap:10px;margin-top:14px}
.backup-item{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--border,#d8e2dc);border-radius:14px;background:rgba(255,255,255,.72)}
.backup-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted,#667085);font-size:.9rem;margin-top:4px}
.backup-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#edf7f0;color:#176b3a;font-size:.8rem;font-weight:700}
.backup-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.backup-status{margin-top:12px}

/* =========================================================
   Responsive layout 2026-09-21
   Alleen vormgeving. Geen JS/API/database-logica.
   ========================================================= */

/* Hidden blijft altijd leidend, ook wanneer nav-knoppen display:flex/grid krijgen. */
.hidden,
.nav .hidden,
.nav button.hidden,
.nav .btn.hidden,
.nav .icon-btn.hidden {
  display: none !important;
}

/* Bijzonderheden staat in de HTML buiten .container; visueel gelijk trekken. */
#specials-screen {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 30px) 30px;
}

/* Tablet: header mag netjes over twee regels lopen. */
@media (max-width: 900px) {
  .header {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .nav {
    width: 100% !important;
  }
}

/* Telefoon: vaste app-navigatie onderaan in twee rijen.
   6 knoppen regulier en 7 voor admin passen allebei zonder afsnijden. */
@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .container {
    width: 100% !important;
    padding: 10px !important;
    padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important;
  }

  #specials-screen {
    width: 100% !important;
    padding: 0 10px calc(142px + env(safe-area-inset-bottom)) !important;
  }

  .header {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 10px 11px !important;
    border-radius: 19px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .brand {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
  }

  .brand-logo {
    width: 48px !important;
    height: 48px !important;
  }

  .brand-copy {
    min-width: 0 !important;
  }

  .brand-title {
    font-size: 1.08rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-kicker {
    font-size: .65rem !important;
  }

  .week-chip {
    margin-left: 0 !important;
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }

  .nav {
    position: fixed !important;
    z-index: 1000 !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 7px !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 52px !important;
    gap: 6px !important;

    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(223,231,225,.98) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 38px rgba(16,37,26,.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    overflow: visible !important;
  }

  .nav button,
  .nav .btn,
  .nav .icon-btn,
  .nav .btn.icon-btn {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 4px 3px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;

    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .nav .sr-only {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    border: 0 !important;
    font-size: clamp(.58rem, 2.6vw, .69rem) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .nav .icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    flex: 0 0 18px !important;
  }

  /* De hidden-regel moet NA de mobiele display:flex-regels blijven staan. */
  .nav .hidden,
  .nav button.hidden,
  .nav .btn.hidden,
  .nav .icon-btn.hidden {
    display: none !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin: 12px 0 !important;
    border-radius: 17px !important;
  }

  .login-card {
    width: 100% !important;
    margin: 22px auto !important;
    padding: 22px !important;
  }

  .row {
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }

  .row .btn {
    flex: 1 1 145px;
  }

  .week-grid {
    grid-template-columns: 1fr !important;
  }

  .day-tile {
    min-height: 78px !important;
  }

  .table-wrap,
  .timeline-wrap,
  .timeline-scroll,
  div[style*="overflow:auto"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: .86rem;
  }

  th, td {
    padding: 8px 7px !important;
  }

  dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 18px !important;
  }

  .dialog-actions .btn {
    flex: 1 1 120px;
  }

  .footer {
    margin-bottom: 0 !important;
  }

  .backup-item {
    grid-template-columns: 1fr !important;
  }

  .backup-actions {
    justify-content: flex-start !important;
  }
}

/* Zeer smalle telefoons: vier kolommen blijven staan, maar compacter. */
@media (max-width: 390px) {
  .container {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  #specials-screen {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .nav {
    left: max(5px, env(safe-area-inset-left)) !important;
    right: max(5px, env(safe-area-inset-right)) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .nav button,
  .nav .btn,
  .nav .icon-btn,
  .nav .btn.icon-btn {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .nav .sr-only {
    font-size: .58rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}