/* =========================================================
   Makeover 2026 — modern, rustig en gericht op makkelijk gebruik
   ========================================================= */
:root{
  --tap: 48px;
  --bg: #edf5f3;
  --bg-2: #f8fafc;
  --card: rgba(255,255,255,.92);
  --text: #0f172a;
  --muted: #64748b;
  --brand: #0f766e;
  --brand-2: #14b8a6;
  --brand-soft: #ccfbf1;
  --ok: #16a34a;
  --danger: #dc2626;
  --warn: #d97706;
  --border: rgba(15,23,42,.10);
  --shadow-sm: 0 10px 24px rgba(15,23,42,.07);
  --shadow-md: 0 20px 55px rgba(15,23,42,.11);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

html{background:var(--bg);scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% -8%, rgba(20,184,166,.25), transparent 32rem),
    radial-gradient(circle at 90% 2%, rgba(15,118,110,.18), transparent 30rem),
    linear-gradient(180deg, #f0fdfa 0%, #f8fafc 42%, #eef2f7 100%) !important;
  color:var(--text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.container{
  width:min(1180px, 100%);
  max-width:none !important;
  padding:clamp(14px, 3vw, 30px) !important;
}

.header{
  margin:0 0 20px !important;
  padding:14px !important;
  border:1px solid rgba(255,255,255,.68);
  border-radius:28px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.25) !important;
}

.brand{min-width:220px;gap:12px !important}
.brand-logo{
  width:58px !important;
  height:58px !important;
  object-fit:contain;
  border-radius:18px;
  background:linear-gradient(135deg,#ecfeff,#fff);
  box-shadow:0 12px 28px rgba(15,118,110,.14);
  padding:6px;
}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-kicker{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}
.brand-title{font-size:clamp(1.15rem, 2.3vw, 1.75rem);font-weight:900;letter-spacing:-.04em;color:#0f172a}
.week-chip{
  background:var(--brand-soft) !important;
  color:#115e59 !important;
  border:1px solid rgba(20,184,166,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.nav{
  gap:8px !important;
  align-items:center;
}
.nav button, .btn{
  border:1px solid var(--border) !important;
  background:rgba(255,255,255,.88) !important;
  color:#0f172a !important;
  border-radius:999px !important;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.nav button:hover, .btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,23,42,.10) !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 16px 30px rgba(15,118,110,.24) !important;
}
.btn.btn-danger{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#ef4444,#dc2626) !important;
}
.btn.btn-xs{min-height:38px;padding:8px 12px !important;font-size:.82rem}
.icon-btn{
  width:auto !important;
  min-width:48px;
  height:48px !important;
  padding:0 14px !important;
  gap:8px;
}
.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:.9rem;
}
.icon-btn svg{width:20px !important;height:20px !important;flex:0 0 auto}

.card, .login-card, dialog{
  border:1px solid rgba(255,255,255,.78) !important;
  background:var(--card) !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:#0f172a;margin-top:0}
.login-card{max-width:460px !important;margin:clamp(36px, 10vh, 96px) auto !important;padding:28px !important}
.login-card h2{font-size:2rem;margin:0 0 6px}.login-card h2:after{content:'Welkom terug';display:block;font-size:.95rem;font-weight:700;color:var(--muted);letter-spacing:0;margin-top:6px}

input[type="text"], input[type="password"], input[type="date"], select, textarea{
  min-height:48px;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:var(--text);
  padding:12px 14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
input:focus, select:focus, textarea:focus{
  outline:3px solid rgba(20,184,166,.22);
  border-color:var(--brand-2) !important;
}
label{color:#334155;font-weight:800 !important}
.muted{color:var(--muted) !important}.row{gap:10px !important}.hidden{display:none !important}

.alert{
  border:1px solid transparent !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  font-weight:650;
}
.alert.info{background:#ecfeff !important;color:#155e75 !important;border-color:#bae6fd !important}
.alert.warn{background:#fff7ed !important;color:#9a3412 !important;border-color:#fed7aa !important}
.pill{border-radius:999px !important;font-weight:900 !important;background:#e0f2fe !important;color:#075985 !important;padding:6px 10px !important}

/* Dashboard cards die uit JavaScript komen */
#schedule-content > .card:first-child{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(204,251,241,.65)) !important;
  border-left:0 !important;
}
#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:18px !important;
  background:#fff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
#schedule-content .card div[style*="border-left:4px solid #667eea"]:before,
#schedule-content .card div[style*="border-left:4px solid #28a745"]:before{
  content:'🎾';float:right;opacity:.45;font-size:1.2rem;
}

table{border-collapse:separate !important;border-spacing:0 !important;overflow:hidden;border-radius:18px;background:#fff}
th,td{border:0 !important;border-bottom:1px solid var(--border) !important;padding:12px 10px !important}
thead th{background:#f1f5f9 !important;color:#334155;font-size:.83rem;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover td{background:#f8fafc !important}
td.available, .day-tile.available{background:#ecfdf5 !important}.day-tile.available{border-color:#bbf7d0 !important;border-left:0 !important}
td.unavailable, .day-tile.unavailable{background:#fef2f2 !important}.day-tile.unavailable{border-color:#fecaca !important;border-left:0 !important}

.weeks-wrap{gap:16px !important}.week-card{background:rgba(255,255,255,.90) !important}.week-title{font-size:1.1rem;font-weight:900;letter-spacing:-.02em}.week-range{color:var(--muted);font-size:.9rem;font-weight:700}.week-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important;gap:12px !important}
.day-tile{
  min-height:96px !important;
  justify-content:space-between;
  border-radius:20px !important;
  padding:14px !important;
  box-shadow:0 7px 18px rgba(15,23,42,.05);
}
.day-tile:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 15px 26px rgba(15,23,42,.10)}
.day-label{font-size:1rem;color:#0f172a !important}.day-state{font-weight:800;color:#334155}

.timeline-wrap, .timeline-scroll, div[style*="overflow:auto"]{border-radius:18px;-webkit-overflow-scrolling:touch}
.timeline-card{border-radius:22px !important;box-shadow:var(--shadow-sm) !important;background:#fff !important}.timeline-legend{background:#f8fafc !important}
.leg-play,.tl-cell.play{background:#14b8a6 !important}.leg-no,.tl-cell.no{background:#f87171 !important}.tl-cell.free{background:#cbd5e1 !important}

.footer{
  border-top:0 !important;
  background:rgba(255,255,255,.64);
  border-radius:22px;
  padding:16px !important;
  margin-top:28px !important;
  box-shadow:var(--shadow-sm);
}

dialog{width:min(560px, calc(100vw - 28px));padding:24px !important}dialog::backdrop{background:rgba(15,23,42,.42) !important;backdrop-filter:blur(5px)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}

@media (max-width:760px){
  .container{padding:12px !important}
  .header{border-radius:22px;position:sticky;top:8px;align-items:flex-start !important}
  .brand{width:100%;min-width:0}.brand-logo{width:52px !important;height:52px !important}.week-chip{margin-left:auto}
  .nav{width:100%;display:grid !important;grid-template-columns:repeat(4, minmax(0,1fr));justify-content:stretch !important;gap:8px !important}
  .nav button,.btn.icon-btn{min-width:0;width:100% !important;height:54px !important;padding:6px 8px !important;flex-direction:column;border-radius:16px !important}
  .nav .sr-only{font-size:.72rem;line-height:1.05;white-space:normal !important}
  .icon-btn svg{width:19px !important;height:19px !important}
  .card{border-radius:20px !important;padding:16px !important}
  .row{align-items:stretch !important}.row .btn{flex:1 1 auto}
  .week-grid{grid-template-columns:1fr !important}.day-tile{min-height:82px !important}
  table{font-size:.9rem}th,td{padding:10px 8px !important}
}

@media (max-width:420px){
  .brand-copy{display:none}.nav{grid-template-columns:repeat(3, minmax(0,1fr))}.login-card{margin-top:24px !important}
}