/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --bg:#f6f8fb; --panel:#ffffff; --text:#0b1220; --muted:#64748b; --line:#e6ebf3;
  --accent:#2563eb; --accent-hover:#1d4ed8; --brand-blue:#14326e;
  --focus-ring:#c7d2fe;

  --delete-bg:#fff; --delete-text:#374151; --delete-border:#e5e7eb;
  --delete-bg-hover:#f3f4f6; --delete-border-hover:#d1d5db;

  --fs-h1:20px; --fs-h2:16px;
  --form-col-gap:8px;
  --control-h:36px;

  /* Rechterkaart sticky-hoogtes */
  --stam-sticky-grid: 56px;   /* hoogte van het 'Kleur' blok */
  --stam-sticky-title: 28px;  /* hoogte van 'Bill of Materials' titel */
}

/* =========================================================
   BASE
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:14px/1.5 Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; display:flex; flex-direction:column;
}
h1{ margin:0 0 14px; font-size:var(--fs-h1); }
h2{ margin:0 0 12px; font-size:var(--fs-h2); }
label{ display:block; font-size:13px; color:var(--muted); margin:10px 0 6px; }
.hint{ color:var(--muted); font-size:12px; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:linear-gradient(180deg,#fff 60%, rgba(255,255,255,.94));
  border-bottom:1px solid var(--line); backdrop-filter:saturate(160%) blur(6px);
}
.brand-wrap{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.brand-logo{ height:52px; width:auto; display:block; }
.page-tag{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12px; background:#eef2ff; color:#1e3a8a; border:1px solid #dbe3ff; }

/* NAV & USER MENU */
.topbar nav{ display:flex; gap:12px; align-items:center; }
.nav-link{ font-size:14px; color:var(--muted); text-decoration:none; margin-right:16px; }
.nav-link:hover{ color:var(--text); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--text); text-decoration:none; cursor:pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn:hover{ background:#f7f9ff; border-color:#dbe3ff; }
.btn:active{ transform:translateY(1px); }
.btn:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost{ background:#fff; color:var(--text); border-color:var(--line); }
.btn.ghost:hover{ border-color:#cfd7e6; color:var(--accent); }

/* User menu */
.user-menu{ position:relative; }
.userchip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--line); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.userchip:hover{ border-color:#cfd7e6; background:#fbfcff; }
.userchip.open{ border-color:#9bb4ff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.userchip .avatar{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; background:var(--accent); color:#fff; }
.userchip .name{ font-weight:600; }
.role-badge{ font-size:11px; padding:2px 6px; border-radius:999px; background:#ecfdf5; color:#065f46; border:1px solid #c9f2e3; }
.caret .chev{ width:16px; height:16px; display:block; transition:transform .14s; opacity:.85; }
.userchip.open .chev{ transform:rotate(180deg); }

.menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:6px; display:none; box-shadow:0 10px 26px rgba(16,24,40,.08);
}
.menu.open{ display:block; }
.menu a{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; color:var(--text); text-decoration:none; }
.menu a:hover{ background:#f5f7ff; }

/* =========================================================
   LAYOUT
   ========================================================= */
.container{ max-width:1100px; margin:28px auto; padding:0 18px; flex:1 0 auto; }
.footer{ margin-top:40px; padding:14px 18px; color:var(--muted); border-top:1px solid var(--line); text-align:center; background:#fff; display:block!important; flex:0 0 auto; }

/* =========================================================
   CARDS & GRID
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:stretch; }
@media (max-width:960px){ .cards{ grid-template-columns:1fr; } }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 8px 20px rgba(16,24,40,.04); display:flex; flex-direction:column; }
.card.narrow{ max-width:400px; margin:0 auto; }

/* =========================================================
   FORMULIEREN
   ========================================================= */
.input{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus{ border-color:#9bb4ff; box-shadow:0 0 0 3px rgba(37,99,235,.12); outline:none; }
.input.half{ width:50%; min-width:240px; }

/* algemene form-grid */
.reg-root .form-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--form-col-gap); row-gap:10px; }
.reg-root .form-grid .field{ margin:0; }
.reg-root .form-grid .input{ width:100%; min-width:220px; }

/* =========================================================
   TABELLEN (GLOBAL)
   ========================================================= */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table thead th{ text-align:left; font-size:12px; letter-spacing:.2px; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:#fafcff; }
.table td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:hover td{ background:#fafcff; }

/* =========================================================
   FLASH
   ========================================================= */
.flashes{ margin-bottom:16px; display:grid; gap:8px; }
.flash{ padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; transition: opacity .25s, transform .25s, max-height .25s, margin .25s, padding .25s, border-width .25s; max-height:120px; }
.flash.success{ border-color:#c9f2e3; background:#ecfdf5; color:#065f46; }
.flash.warning{ border-color:#fee2a0; background:#fffbeb; color:#92400e; }
.flash.danger{ border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.flash.info{ border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a; }
.flash.hide{ opacity:0; transform:translateY(-4px); max-height:0; margin:0; padding:0; border-width:0; }

/* =========================================================
   DELETE
   ========================================================= */
.btn.delete,button.delete,a.delete,[data-action="delete"]{
  background:var(--delete-bg); color:var(--delete-text); border:1px solid var(--delete-border);
  border-radius:10px; padding:10px 12px; transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.btn.delete:hover,button.delete:hover,a.delete:hover,[data-action="delete"]:hover{
  background:var(--delete-bg-hover); color:#111827; border-color:var(--delete-border-hover);
}
.btn.delete:focus,button.delete:focus,a.delete:focus,[data-action="delete"]:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.btn.delete:active,button.delete:active,a.delete:active,[data-action="delete"]:active{ transform:translateY(1px); }

/* =========================================================
   IFRAMES
   ========================================================= */
iframe,.iframe{ display:block; width:100%; border:0; background:#fff; }
.iframe-wrap{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.iframe-wrap > iframe{ width:100%; height:100%; display:block; border:0; }

/* =========================================================
   RESPONSIVE (globaal)
   ========================================================= */
@media (max-width:640px){
  .userchip .name,.role-badge{ display:none; }
  .brand-logo{ height:48px; }
  .reg-root .form-grid{ grid-template-columns:1fr; }
  .reg-root .form-grid .input{ width:100%; min-width:0; }
}

/* =========================================================
   CONTAINER BEHEREN – layout tweaks
   ========================================================= */
.table th:first-child,.table td:first-child{ padding-left:0; }
.content-scroll{ overflow-y:auto; overflow-x:hidden; padding-right:0!important; scrollbar-gutter:stable both-edges; }
.results-wrap{ padding-right:0!important; scrollbar-gutter:stable both-edges; }

/* =========================================================
   FILTERKAART POLISH
   ========================================================= */
.filter-card .input,
.filter-card .input.sm,
.filter-card select.input,
.filter-card select.input.sm,
.filter-card .filter-actions .btn{
  height:var(--control-h); line-height:var(--control-h); padding-top:0; padding-bottom:0;
}
.filter-card .filter-actions .btn{ padding-left:12px; padding-right:12px; border-radius:10px; }
.filter-card .check-inline{ height:var(--control-h); display:inline-flex; align-items:center; gap:8px; margin-left:4px; }
.filter-card .filter-row{ align-items:end; gap:8px 12px; }
.filter-card .filter-field label{ margin:0 0 4px; }
.filter-card select.input,.filter-card select.input.sm{ padding-right:28px; }
.filter-card{ padding-left:18px; padding-right:18px; }

/* =========================================================
   FORCE OVERRIDES (manage)
   ========================================================= */
.manage-root .filter-card .input,
.manage-root .filter-card .input.sm,
.manage-root .filter-card select.input,
.manage-root .filter-card select.input.sm,
.manage-root .filter-card .filter-actions .btn{
  height:var(--control-h)!important; line-height:var(--control-h)!important; padding-top:0!important; padding-bottom:0!important;
}
.manage-root .filter-card .filter-actions .btn{ padding-left:12px!important; padding-right:12px!important; border-radius:10px!important; }
.manage-root .filter-card .check-inline{ height:var(--control-h)!important; display:inline-flex!important; align-items:center!important; gap:8px!important; margin-left:4px!important; }
.manage-root .filter-card .filter-row{ align-items:end!important; gap:8px 12px!important; }
.manage-root .filter-card .filter-field label{ margin:0 0 4px!important; }
.manage-root .filter-card{ padding-left:18px!important; padding-right:18px!important; }
.manage-root .content-scroll{ padding-right:0!important; scrollbar-gutter:stable both-edges; }
.manage-root .table th:first-child,.manage-root .table td:first-child{ padding-left:0!important; }
.manage-root .container{ padding-left:18px!important; padding-right:18px!important; }

/* =========================================================
   REG – container registreren
   ========================================================= */
/* Vier kolommen grid (template elders) */
.reg-root .inputs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px 12px;
  align-items:end;
  justify-items:stretch;
}

/* Coördinaten onder 'Locatie' */
.reg-root .coords-line{
  display:block;
  margin-top:10px;
  font:12px/1.4 Inter, ui-sans-serif, system-ui;
  color:#475569;
  white-space:nowrap;
}

/* Knoppen rechts uitgelijnd */
.reg-root .field.actions{
  grid-column:3 / -1;
  display:flex!important;
  flex-direction:row;
  justify-content:flex-end;
  align-items:end;
  gap:10px;
  position:static;
}
.reg-root .btn-wrap{ display:flex; gap:10px; }
.reg-root .btn-wrap .btn{ width:220px; height:36px; }

/* Nulmeting naast locatie */
.reg-root .field--nulmeting{
  grid-column:span 1;
  align-self:start;
  padding-top:50px;
}
.reg-root .check-inline{ display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; margin:0; }
.reg-root .check-inline input[type="checkbox"]{ width:16px; height:16px; margin:0; }

/* Mobiel */
@media (max-width:980px){
  html,body{ height:auto!important; }
  body{ overflow:auto!important; }
  .reg-root{ width:100%!important; height:auto!important; margin:0!important; padding-bottom:16px; }
  .reg-root .two-col{ grid-template-columns:1fr!important; }
  .reg-root .inputs{ grid-template-columns:1fr!important; }
  .reg-root .input,.reg-root select{ font-size:16px; }
  .reg-root .btn-wrap .btn{ width:100%; height:44px; }
  .reg-root .field--nulmeting{ padding-top:6px; }
  .reg-root .field.actions{
    grid-column:1 / -1;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .reg-root .coords-line{ margin-top:6px; }
}

/* =========================================================
   ADMIN-ONLY POLISH
   ========================================================= */
.admin-root .stam-narrow{ max-width:920px; margin:0; }
.admin-root .form-width{ width:50% !important; }
.admin-root .btn.primary.form-width{ width:50% !important; }
.admin-root .field-row,.admin-root .field-subrow,.admin-root .bom-row{
  display:flex !important; align-items:center !important; gap:7px !important;
}
.admin-root .bom-row input[type="number"]{
  flex:0 0 88px !important; width:88px !important; text-align:center;
}
.admin-root .icon-btn{
  flex:0 0 40px !important; width:40px !important; height:36px !important; margin:0 !important;
}
.admin-root .icon-btn.add{
  background:#fff !important; border-color:rgba(0,0,0,.12) !important; color:inherit !important; box-shadow:none !important;
}
.admin-root .icon-btn.remove{
  background:#fff !important; border-color:rgba(0,0,0,.12) !important; color:#dc2626 !important;
}
.admin-root .icon-btn.remove:hover{ box-shadow:0 6px 18px rgba(220,38,38,.25) !important; }
.admin-root .fieldset{ margin-bottom:20px; }
.admin-root .field-subrow{ margin-top:3px !important; }
.admin-root .bom-list{ display:grid; gap:3px; }
.admin-root .form-width{ margin-bottom:3px; }
@media (max-width:920px){
  .admin-root .stam-narrow{ max-width:100%; }
  .admin-root .form-width{ width:100% !important; max-width:none !important; margin-bottom:10px; }
  .admin-root .bom-row{ flex-wrap:wrap; }
  .admin-root .fieldset{ margin-bottom:16px; }
}

/* =========================================================
   MODAL
   ========================================================= */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  display:none; align-items:center; justify-content:center;
  z-index:1000;
}
.modal-backdrop.open{ display:flex; }
.modal{
  width:min(520px, 92vw);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 50px rgba(2,6,23,.18);
  padding:18px;
}
.modal h3{ margin:0 0 6px; font-size:16px; }
.modal p{ margin:0 0 14px; color:#334155; }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; }
.modal .btn.danger{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.modal .btn.danger:hover{
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* =========================================================
   REGISTER PAGE OVERRIDES
   ========================================================= */
/* Footer verbergen op registratiepagina (grijze balk voorkomen) */
.reg-root ~ .footer{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}
/* Reg-root kan 100vh gebruiken */
.reg-root{ height:100vh !important; }

/* Rechterkaart: flex + interne scroll + veilige bodem */
#stam-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
}
#stam-card .right-header{ flex:0 0 auto !important; }
#stam-card .right-body{
  position:relative;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  padding-bottom:48px !important;
  scrollbar-gutter:stable both-edges;
}
#stam-card .right-body::after{ content:""; display:block; height:32px; }

/* Sticky: 'Kleur' blok en BOM titel */
#stam-card .right-body{ position: relative; }
#stamGrid{
  position: sticky;
  top: 0;
  z-index: 7;
  background: #fff;
  padding-top: 2px;
  padding-bottom: 8px;
}
#bomTitle{
  position: sticky;
  top: var(--stam-sticky-grid);
  z-index: 8;
  background:#fff;
  margin: 0;
  padding: 4px 0 6px;
}

/* =========================================================
   BOM TABLE — definitieve sticky header fix
   ========================================================= */
#stamBomTable{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: transparent;
  position: relative;              /* stacking context voor sticky th */
}
#stamBomTable thead th{
  position: sticky;
  top: calc(var(--stam-sticky-grid) + var(--stam-sticky-title));
  z-index: 20;                     /* boven body-rijen */
  background: #fff;                /* geen doorschijnen */
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  text-align: left;
}
#stamBomTable th,
#stamBomTable td{
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
#stamBomTable tbody td{
  position: static;
  z-index: auto;
}

/* Zorg dat grid-kolomkinderen kunnen krimpen (hoogteketen) */
.reg-root .two-col > *{ min-height:0 !important; min-width:0 !important; }