/* Señor Snacks huisstijl: zwart/wit basis, Snack Red als signaal, Anton + Montserrat */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/anton-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/montserrat-latin.woff2') format('woff2');
}

*{box-sizing:border-box;margin:0}
:root{
  --black:#030304;   /* Deep Black */
  --card:#111112;    /* Off Black */
  --line:#2a2a2e;
  --field:#0a0a0b;
  --white:#ffffff;
  --txt:#ffffff;
  --mut:#a5a5ab;
  --red:#E6173B;     /* Snack Red — enkel als signaal */
  --red-hi:#f42a4d;
  --radius:14px;
}
html{color-scheme:dark}
body{
  background:var(--black);
  color:var(--txt);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.5;
  min-height:100dvh;
  display:flex;justify-content:center;
  -webkit-font-smoothing:antialiased;
}
main{width:100%;max-width:440px;padding:28px 18px 44px}
main.wide{max-width:800px}

/* merk & koppen — Anton, groot en bold */
.logo{display:block;width:170px;height:auto;margin-bottom:18px}
.brand-top{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mut);margin-bottom:2px;
}
h1{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:2.1rem;line-height:1.05;letter-spacing:.01em;
  text-transform:uppercase;color:var(--white);
}
h1 .dot{color:var(--red)}
.sub{color:var(--mut);font-size:.9rem;margin:8px 0 22px}
h2{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:1.7rem;letter-spacing:.01em;text-transform:uppercase;
  margin:10px 0 2px;
}

/* kaarten — vlak, strak, geen verlopen */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:14px;
}

/* formulieren */
label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin:0 0 6px 2px;
}
input{
  width:100%;font:inherit;font-size:1rem;color:var(--txt);
  background:var(--field);
  border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;margin-bottom:14px;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:#55555c}
input:focus{outline:none;border-color:var(--white);box-shadow:0 0 0 3px rgba(255,255,255,.12)}

/* knoppen — rood = actie/signaal, wit = sterk contrast, grijs = secundair */
button{
  font-family:'Montserrat',sans-serif;font-size:.95rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  border:0;border-radius:12px;padding:15px 18px;cursor:pointer;
  background:var(--red);color:var(--white);
  transition:transform .06s, background .15s, filter .15s;
}
button:hover{background:var(--red-hi)}
button:active{transform:scale(.985)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.sec,
button.break-btn{
  background:transparent;color:var(--txt);border:1px solid var(--line);
}
button.sec:hover,.break-btn:hover{background:#1a1a1c;filter:none}
button.clock-out{
  background:var(--white);color:var(--black);
}
button.clock-out:hover{background:#e8e8e8}
.btns{display:flex;gap:10px}
.btns button{flex:1;padding:17px 12px;font-size:.95rem}

/* statuspil */
.pill{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 11px;border-radius:4px;
  background:var(--red);color:var(--white);
}

/* voortgangsbalk */
.bar{height:8px;background:#1d1d20;border-radius:99px;overflow:hidden}
.bar i{
  display:block;height:100%;border-radius:99px;
  background:var(--red);
  transition:width .6s ease;
}
.times{margin:8px 0 12px;font-variant-numeric:tabular-nums;color:var(--txt);font-weight:600}
.muted{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}

/* koppen-rij met uitloggen */
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
a{color:var(--mut);font-size:.86rem;text-decoration:none;border-bottom:1px solid transparent}
a:hover{color:var(--white);border-bottom-color:var(--mut)}

.err,.ot{color:var(--red);font-weight:700;font-size:.9rem}
footer{color:#4e4e55;font-size:.72rem;text-align:center;margin-top:22px;letter-spacing:.02em}

/* verplaatsing (vertrek/aankomst) */
.travel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.travel-btn{padding:12px 8px;font-size:.72rem;letter-spacing:.04em;text-transform:none;font-weight:700}
.travel-done{
  display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;
  background:var(--field);border:1px solid var(--line);border-radius:12px;
  padding:8px 8px;font-size:.72rem;color:var(--mut);
}
.travel-done b{color:var(--txt);font-size:.95rem}

/* ---- beheer ---- */
.filters{display:flex;gap:12px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.filters input[type=search]{flex:1;min-width:200px;margin-bottom:0}
.filters label{display:flex;align-items:center;gap:7px;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;color:var(--mut)}
.filters input[type=checkbox]{width:auto;margin:0;accent-color:var(--red)}
.count{color:var(--mut);font-size:.8rem;margin-left:auto;font-variant-numeric:tabular-nums}

.emp{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.emp:last-child{border-bottom:0}
.emp .info{flex:1;min-width:180px}
.emp .name{font-weight:700}
.emp .meta{color:var(--mut);font-size:.8rem;font-variant-numeric:tabular-nums}
.emp button{padding:9px 14px;font-size:.78rem;border-radius:9px}

.badge{
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;white-space:nowrap;
}
.badge.actief{background:var(--white);color:var(--black)}
.badge.open{background:var(--red);color:var(--white)}
.badge.geen{background:transparent;color:var(--mut);border:1px solid var(--line)}
.badge.inactief{background:transparent;color:#6b6b72;border:1px dashed var(--line)}

.linkbox{
  width:100%;background:var(--field);border:1px dashed #3d3d44;border-radius:10px;
  padding:12px 14px;font-size:.8rem;word-break:break-all;color:var(--white);
  margin-top:10px;font-variant-numeric:tabular-nums;
}
.linkbox .acts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}