main { max-width: 1600px; margin: 16px auto; }
    .card { background:#12203a; border:1px solid #1e3358; border-radius:12px; padding:16px; margin-bottom:16px; }
    .row { display:flex; gap:12px; flex-wrap:nowrap; align-items:flex-end; }
    .row > div { display:flex; flex-direction:column; }
    label { font-size:12px; opacity:.8; margin-bottom:4px; }
    input, select, textarea { background:#0f1b2d; border:1px solid #2a406b; color:#e7eefc; padding:8px; border-radius:8px; }
    table { width:100%; border-collapse:collapse; margin-top:8px; }
    th, td { border-bottom:1px solid #23395e; padding:8px; }
    th { background:#152649; }
    .tag { padding:2px 8px; border-radius:999px; font-size:12px; background:#1d3557; }
    .muted { opacity:.7; }
    .danger { background:#b41e2a; }
    .ok { background:#2e7d32; }
    .btn { background:#2b74ff; border:none; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; }
    .btn:hover { filter:brightness(1.1); }
    .btn.sec { background:#32496e; }
  
    .chips{ display:flex; flex-wrap:wrap; gap:6px; }
    .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
           background:#0f1b2d; border:1px solid #22344c; border-radius:999px; color:#e7eefc; }
    .chip button{ background:none; border:none; color:#9fb3c8; cursor:pointer; font-size:16px; line-height:1; }
  

/* --- Admin-specific layout overrides --- */
@media (max-width: 1280px){
  .row { flex-wrap: wrap; }
}

/* Make text inputs for destinations a bit wider for single-line fit */
.row input[type="text"] { min-width: 200px; }

/* Keep date/time fields compact but readable */
.row input[type="date"],
.row input[type="time"],
.row input[type="number"],
.row select { min-width: 140px; }

/* Let table scroll nicely on narrow screens */


/* Slightly larger buttons for admin actions */
.btn { padding: 10px 14px; border-radius: 10px; }


/* --- Fix: keep header (thead) above rows and maintain table layout --- */
.card table { width: 100%; border-collapse: collapse; table-layout: auto; }
.card table thead th { font-weight: 600; }


/* --- Beheer Templates: labels boven inputs & dagen links --- */
.tpl-controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start}
.tpl-controls > div{display:flex;flex-direction:column}
.tpl-controls > div > label{order:0;margin-bottom:6px}
.tpl-controls > div > input,
.tpl-controls > div > select,
.tpl-controls > div > button{order:1}
.tpl-days{order:-1;min-width:320px}
#tmpl_days{display:flex;flex-wrap:wrap;gap:8px}
.tpl-days .muted{width:100%;margin-top:4px}

/* Dock compact */
#cr_dock{width:120px}

/* Opmerking niet te breed */
#cr_remarks{max-width:600px;width:100%}

/* Override: headers niet sticky */
.bar{position:static !important; top:auto !important;}

/* Reistijden compact input */
.rt-minutes{width:72px;max-width:72px;height:28px;padding:4px 6px;}

/* Geolocatie inputs */
.rt-lat,.rt-lon{ width:120px; max-width:140px; padding:4px 6px; height:28px; }

.rt-lat, .rt-lon{width:120px;max-width:140px;height:28px;padding:4px 6px;}

/* === Fix (Combi-regels dagen): keep checkboxes inside #cr_days; horizontal chips layout === */
#cr_days{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
#cr_days label{ display:inline-flex; align-items:center; gap:6px; background:#0f1b2d; border:1px solid #22344c; color:#e7eefc; padding:6px 10px; border-radius:999px; }
#cr_days input[type="checkbox"]{ margin:0; }


/* === Vertraging chips (beheren redenen) === */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:#0f1b2d; border:1px solid #22344c; color:#e7eefc; padding:6px 10px; border-radius:999px; }
.chip-x{ margin-left:6px; border:none; background:transparent; color:inherit; cursor:pointer; }