:root{
  --bg:#EEF3F6;
  --panel:#FFFFFF;
  --ink:#16222C;
  --ink-soft:#5B6B78;
  --ink-faint:#8B99A5;
  --line:#D7E1E8;
  --line-soft:#E6EDF2;
  --ice:#1E6E8C;
  --ice-deep:#123B4D;
  --ice-tint:#E4F1F6;
  --good:#3C8858;
  --good-tint:#E4F3E9;
  --warn:#C6533F;
  --warn-tint:#FBE7E3;
  --mid:#C98A2E;
  --mid-tint:#FBF0DD;
  --radius:8px;
  --shadow:0 1px 2px rgba(18,59,77,0.06), 0 4px 16px rgba(18,59,77,0.06);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, sans-serif; font-size:14px; line-height:1.5;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; margin:0; letter-spacing:-0.01em;}
a{color:var(--ice-deep);}
button, .btn{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit; font-size:13.5px; color:var(--ink);}

.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:9px 14px; border-radius:var(--radius); font-size:13.5px; font-weight:500;
  transition:border-color .15s, background .15s;
}
.btn:hover{border-color:var(--ice); background:var(--ice-tint);}
.btn-primary{background:var(--ice-deep); color:#fff; border-color:var(--ice-deep);}
.btn-primary:hover{background:var(--ice); border-color:var(--ice);}
.btn-danger{color:var(--warn); border-color:var(--line);}
.btn-danger:hover{background:var(--warn-tint); border-color:var(--warn);}
.btn-sm{padding:6px 10px; font-size:12.5px;}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.field label{font-size:12px; color:var(--ink-soft); font-weight:500;}
.field input, .field select{
  padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:#fbfcfd; width:100%;
}
.field input:focus, .field select:focus{outline:2px solid var(--ice); outline-offset:1px;}

.error-box{background:var(--warn-tint); color:var(--warn); border-radius:6px; padding:10px 14px; font-size:13px; margin-bottom:16px;}
.notice-box{background:var(--good-tint); color:var(--good); border-radius:6px; padding:10px 14px; font-size:13px; margin-bottom:16px;}

.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:32px; width:100%; max-width:360px;}
.auth-card h1{font-size:22px; font-weight:600; color:var(--ice-deep); margin-bottom:6px;}
.auth-card .tag{color:var(--ink-soft); font-size:13px; margin-bottom:20px;}

.app-header{
  background:var(--panel); border-bottom:1px solid var(--line); padding:14px 24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  max-width:100vw; box-sizing:border-box;
}
.app-header .brand{font-family:'Fraunces', serif; font-size:18px; font-weight:600; color:var(--ice-deep);}
.app-header .user{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--ink-soft); min-width:0;}
.app-header .user form{flex-wrap:wrap; min-width:0;}
.app-header .user select{max-width:100%;}
.app-header .rol-badge{background:var(--ice-tint); color:var(--ice-deep); border-radius:20px; padding:3px 10px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}

.app-subnav{
  display:flex; gap:4px; align-items:center; background:var(--panel); border-bottom:1px solid var(--line);
  padding:0 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; max-width:100vw; box-sizing:border-box;
  scrollbar-width:none; -ms-overflow-style:none;
}
.app-subnav::-webkit-scrollbar{display:none; height:0;}
.app-subnav a{
  display:inline-block; padding:10px 12px; font-size:12.5px; font-weight:500; color:var(--ink-soft);
  text-decoration:none; border-bottom:2px solid transparent; flex-shrink:0;
}
.app-subnav a:hover{color:var(--ice-deep);}
.app-subnav a.actief{color:var(--ice-deep); border-bottom-color:var(--ice-deep); font-weight:600;}
@media (max-width:640px){
  .app-subnav{padding:0 16px;}
}

.app-main{max-width:1100px; margin:0 auto; padding:24px; box-sizing:border-box;}

table.simple-table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
table.simple-table th{text-align:left; font-size:11.5px; color:var(--ink-faint); font-weight:600; padding:10px 14px; background:var(--line-soft);}
table.simple-table td{padding:10px 14px; border-top:1px solid var(--line-soft); font-size:13.5px;}

@media (max-width:640px){
  /* NIET ook overflow-x:hidden op html zetten: op iOS Safari breekt dat het horizontaal
     kunnen scrollen van geneste scroll-containers (zoals de tabbladen-strip en de
     openingstijden-tabel) door de hele pagina heen — juist het omgekeerde van de bedoeling.
     De echte fix voor breed-uitschietende content is een eigen scroll-container per element
     (zie .rooster-scroll, .table-scroll, .tabs-nav) i.p.v. dit op document-niveau afdwingen. */
  body{overflow-x:hidden; max-width:100vw;}
  /* iOS Safari zoomt automatisch in op een invoerveld met font-size < 16px — dit voorkomt
     dat (i.p.v. user-scalable=no te gebruiken, wat zoomen voor iedereen zou blokkeren). */
  input, select, textarea{font-size:16px;}
  .app-main{padding:16px;}
  .app-header{padding:12px 16px;}
  .app-header .user{width:100%; justify-content:flex-start;}
  .app-header .user form label{display:none;}
}