/* Oxygevity Agenda — huisstijl afgeleid van oxygevity.nl */

:root {
  --bg:#F5F4F0; --surface:#F8F7F4; --surface-2:#FAFAF8; --offset:#EDECEA;
  --divider:#DDD9D4; --border:#D0CCC7; --card:#FFFFFF;
  --text:#1E1D1A; --muted:#6B6966; --faint:#B0ADA9;
  --primary:#0A6E72; --primary-hover:#085860; --primary-subtle:#E4F0EF; --primary-high:#C8DCDA;
  --accent:#1B3A5C; --accent-high:#C6D3E0;
  --warn:#8A5A12; --warn-bg:#FBF0DC; --danger:#9B2C2C; --danger-bg:#FBE9E9;
  --ok:#0A6E72;
  --r-sm:.3rem; --r-md:.55rem; --r-lg:.9rem; --r-xl:1.25rem;
  --shadow-sm:0 1px 3px rgba(20,18,15,.06);
  --shadow-md:0 4px 16px rgba(20,18,15,.08);
  --font:'Switzer','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Instrument Serif',Georgia,serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); }
h1,h2,h3 { line-height:1.25; letter-spacing:-.015em; margin:0 0 .5em; font-weight:500; }
h1 { font-size:1.75rem; }
h2 { font-size:1.25rem; }
h3 { font-size:1.02rem; font-weight:600; }
p { margin:0 0 1em; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }

/* ------------------------------------------------------------- topbar --- */
.topbar { background:var(--card); border-bottom:1px solid var(--divider); position:sticky; top:0; z-index:20; }
.topbar-inner { display:flex; align-items:center; gap:20px; min-height:62px; flex-wrap:wrap; }
.brand { font-size:1.22rem; font-weight:600; color:var(--primary); text-decoration:none; letter-spacing:-.02em; }
.brand span { color:var(--muted); font-weight:400; font-size:.8rem; margin-left:.45em; letter-spacing:0; }
.nav { margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:.92rem; }
.nav a { color:var(--text); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.nav a:hover { color:var(--primary); }
.nav a.on { color:var(--primary); border-bottom-color:var(--primary); }
.nav .who { color:var(--muted); font-size:.86rem; padding-left:14px; border-left:1px solid var(--divider); }
.nav a.quiet { color:var(--muted); font-size:.86rem; }

main.wrap { padding-top:26px; padding-bottom:60px; }

/* -------------------------------------------------------------- cards --- */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px 24px; margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.card.tight { padding:16px 18px; }
.card h1:first-child, .card h2:first-child { margin-top:0; }
.cards { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.page-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { margin:0; }
.page-head .spacer { margin-left:auto; }
.lead { color:var(--muted); margin:.2em 0 0; }

/* ------------------------------------------------------------ knoppen --- */
.btn {
  display:inline-block; background:var(--primary); color:#fff; border:1px solid var(--primary);
  padding:10px 18px; border-radius:var(--r-md); text-decoration:none; font:inherit;
  font-size:.94rem; font-weight:500; cursor:pointer; transition:background .15s ease;
}
.btn:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn.ghost { background:transparent; color:var(--primary); }
.btn.ghost:hover { background:var(--primary-subtle); }
.btn.neutral { background:var(--card); color:var(--text); border-color:var(--border); }
.btn.neutral:hover { background:var(--offset); }
.btn.danger { background:var(--danger); border-color:var(--danger); }
.btn.sm { padding:6px 12px; font-size:.86rem; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btnrow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------------------------------------------------------- formulier --- */
label { display:block; font-size:.86rem; font-weight:500; margin-bottom:5px; color:var(--text); }
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=password],select,textarea {
  width:100%; padding:10px 12px; font:inherit; font-size:.95rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--primary-high); outline-offset:1px; border-color:var(--primary); }
textarea { min-height:80px; resize:vertical; }
.field { margin-bottom:16px; }
.field .hint { font-size:.8rem; color:var(--muted); margin-top:5px; }
.grid2 { display:grid; gap:0 18px; grid-template-columns:1fr 1fr; }
.grid3 { display:grid; gap:0 18px; grid-template-columns:repeat(3,1fr); }
.checkline { display:flex; align-items:center; gap:9px; margin-bottom:8px; font-size:.92rem; }
.checkline input { width:auto; margin:0; }
.checkline label { margin:0; font-weight:400; }
fieldset { border:1px solid var(--divider); border-radius:var(--r-md); padding:14px 16px; margin:0 0 18px; }
legend { font-size:.82rem; font-weight:600; color:var(--muted); padding:0 6px; text-transform:uppercase; letter-spacing:.06em; }

/* ------------------------------------------------------------ meldingen -- */
.flash { padding:12px 16px; border-radius:var(--r-md); margin-bottom:20px; font-size:.94rem; border:1px solid; }
.flash-ok   { background:var(--primary-subtle); border-color:var(--primary-high); color:#064b4f; }
.flash-warn { background:var(--warn-bg); border-color:#E6CFA0; color:var(--warn); }
.flash-err  { background:var(--danger-bg); border-color:#EBC4C4; color:var(--danger); }

/* -------------------------------------------------------------- tabel --- */
table.list { width:100%; border-collapse:collapse; font-size:.93rem; }
table.list th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; padding:0 12px 9px; border-bottom:1px solid var(--divider); }
table.list td { padding:11px 12px; border-bottom:1px solid var(--offset); vertical-align:top; }
table.list tr:last-child td { border-bottom:0; }
table.list tr:hover td { background:var(--surface); }
table.list td a { text-decoration:none; font-weight:500; }

/* ------------------------------------------------------------- badges --- */
.badge { display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; border:1px solid; white-space:nowrap; }
.b-komt     { background:var(--primary-subtle); border-color:var(--primary-high); color:#064b4f; }
.b-open     { background:var(--warn-bg); border-color:#E6CFA0; color:var(--warn); }
.b-niet     { background:var(--offset); border-color:var(--border); color:var(--muted); }
.b-proef    { background:var(--accent-high); border-color:#A9BDD1; color:var(--accent); }
.b-blok     { background:#E9E7E3; border-color:var(--border); color:var(--muted); }
.b-gevolgd  { background:#DCEAE8; border-color:#B9D2CF; color:#064b4f; }
.b-noshow   { background:var(--danger-bg); border-color:#EBC4C4; color:var(--danger); }
.b-vrij     { background:#fff; border-color:var(--divider); color:var(--faint); }

/* ------------------------------------------------------- weekroosters --- */
.weekbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.weekbar .title { font-size:1.15rem; font-weight:500; }
.weekbar .spacer { margin-left:auto; }

.gridwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--card); }
table.week { border-collapse:collapse; width:100%; min-width:900px; font-size:.84rem; }
table.week th, table.week td { border:1px solid var(--offset); vertical-align:top; }
table.week thead th { background:var(--surface); padding:9px 8px; font-weight:600; font-size:.82rem;
  text-align:center; position:sticky; top:0; z-index:5; border-bottom:1px solid var(--divider); }
table.week thead th.today { background:var(--primary-subtle); color:#064b4f; }
table.week thead th small { display:block; font-weight:400; color:var(--muted); font-size:.74rem; }
table.week th.slotcol { width:96px; background:var(--surface); text-align:left; padding:10px;
  font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.week td { padding:0; width:14.5%; }

.cell { display:block; min-height:74px; padding:8px 9px; text-decoration:none; color:inherit; height:100%; }
.cell:hover { background:var(--surface); }
.cell .who { font-weight:600; display:block; line-height:1.3; margin-bottom:3px; }
.cell .sub { color:var(--muted); font-size:.76rem; display:block; line-height:1.35; }
.cell.free { color:var(--faint); }
.cell.free .plus { font-size:1.1rem; }
.cell.past { opacity:.55; }
.c-komt    { background:var(--primary-subtle); box-shadow:inset 3px 0 0 var(--primary); }
.c-open    { background:var(--warn-bg); box-shadow:inset 3px 0 0 #C79A3E; }
.c-afgemeld{ background:repeating-linear-gradient(135deg,#fff,#fff 6px,#F3F1ED 6px,#F3F1ED 12px); }
.c-proef   { background:var(--accent-high); box-shadow:inset 3px 0 0 var(--accent); }
.c-blok    { background:#E9E7E3; box-shadow:inset 3px 0 0 var(--faint); }
.c-gevolgd { background:#DCEAE8; box-shadow:inset 3px 0 0 #7FAFAA; }
.c-noshow  { background:var(--danger-bg); box-shadow:inset 3px 0 0 var(--danger); }

.legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:.8rem; color:var(--muted); }
.legend i { display:inline-block; width:13px; height:13px; border-radius:3px; margin-right:6px;
  vertical-align:-2px; border:1px solid var(--border); }

/* ----------------------------------------------------- klantoverzicht --- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  background:var(--card); border:1px solid var(--divider); border-radius:var(--r-md); overflow:hidden; margin:16px 0 0; }
.stat { padding:13px 15px; box-shadow:1px 0 0 var(--divider), 0 1px 0 var(--divider); }
.stat b { display:block; font-size:1.5rem; font-weight:500; letter-spacing:-.02em; line-height:1.2; }
.stat span { font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.stat.hi b { color:var(--primary); }

.daylist { display:flex; flex-direction:column; gap:10px; }
.day {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-left-width:4px;
  border-radius:var(--r-md); padding:13px 16px;
}
.day.s-komt { border-left-color:var(--primary); background:var(--primary-subtle); }
.day.s-open { border-left-color:#C79A3E; }
.day.s-niet { border-left-color:var(--divider); background:var(--surface); }
.day.s-locked { opacity:.7; }
.day .when { min-width:215px; }
.day .when b { display:block; font-weight:600; }
.day .when span { color:var(--muted); font-size:.87rem; font-variant-numeric:tabular-nums; }
.day .acts { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.weekhead { display:flex; align-items:baseline; gap:10px; margin:22px 0 10px; }
.weekhead h3 { margin:0; white-space:nowrap; }
.weekhead span { color:var(--muted); font-size:.85rem; }

/* -------------------------------------------------------------- login --- */
.auth { max-width:440px; margin:6vh auto; }
.auth .card { padding:30px 30px 26px; }
.auth h1 { font-family:var(--display); font-size:2rem; font-weight:400; letter-spacing:-.01em; margin-top:.15em; }
.auth .stap { margin:0; font-size:.76rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--primary); }
.codeinput { font-size:1.8rem !important; letter-spacing:.5em; text-align:center; font-variant-numeric:tabular-nums; padding:14px !important; }

.foot { border-top:1px solid var(--divider); padding:22px 0 40px; color:var(--muted); font-size:.84rem; background:var(--surface); }
.foot a { color:var(--muted); }
.foot .sep { margin:0 6px; }

@media (max-width:760px) {
  .wrap { padding:0 14px; }
  h1 { font-size:1.45rem; }
  .card { padding:18px 16px; }
  .grid2,.grid3 { grid-template-columns:1fr; }
  .nav { gap:12px; font-size:.86rem; width:100%; }
  .nav .who { display:none; }
  .day .when { min-width:100%; }
  .day .acts { margin-left:0; width:100%; }
  .day .acts .btn { flex:1; text-align:center; white-space:nowrap; }
}