:root{
  --navy:#0d1b3e;--navy-soft:#142a5c;--blue:#1a9fe8;--blue-dark:#1a4a9e;--bg:#f7f9fc;--card:#fff;--line:#dde5f1;--muted:#6b7fa3;--text:#0d1b3e;--ok:#17834d;--warn:#b26b00;--bad:#b42318;--radius:16px;--shadow:0 8px 28px rgba(13,27,62,.08)
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:var(--navy);color:#fff;padding:24px 18px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}.brand img{width:42px;height:42px;border-radius:10px;background:#fff;object-fit:contain}.brand strong{font-size:1rem}.navlinks{display:flex;flex-direction:column;gap:6px}.navlinks a{padding:11px 12px;border-radius:10px;text-decoration:none;color:rgba(255,255,255,.75);font-weight:600;font-size:.92rem}.navlinks a:hover,.navlinks a.active{background:rgba(255,255,255,.10);color:#fff}.main{padding:28px;max-width:1260px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}.topbar h1{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.8rem}.business-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--muted);font-size:.9rem}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,1fr)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.stat-num{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.75rem;font-weight:800}.stat-label{font-size:.86rem;color:var(--muted);margin-top:4px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;text-decoration:none;cursor:pointer;font-size:.92rem}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}.btn.danger{background:#fff;border-color:#f3b4ad;color:var(--bad)}.btn:disabled{opacity:.55;cursor:not-allowed}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:12px;font-size:.92rem}.table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.82rem;font-weight:700;color:var(--navy)}.field input,.field select,.field textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--text)}.field textarea{min-height:90px;resize:vertical}.full{grid-column:1/-1}.notice{padding:13px 15px;border-radius:12px;background:#eef8ff;border:1px solid #c9ecff;color:#14517a;margin-bottom:16px}.error{padding:13px 15px;border-radius:12px;background:#fff1f0;border:1px solid #ffd0cc;color:#a31d13;margin-bottom:16px;display:none}.success{padding:13px 15px;border-radius:12px;background:#ecfdf3;border:1px solid #b7efcd;color:#11633a;margin-bottom:16px;display:none}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%)}.login-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:34px}.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:24px}.login-logo img{width:58px;height:58px;object-fit:contain}.login-logo h1{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.3rem}.muted{color:var(--muted);font-size:.9rem}.items{display:flex;flex-direction:column;gap:10px}.item-row{display:grid;grid-template-columns:1.5fr .6fr .6fr .7fr .7fr 44px;gap:8px;align-items:end}.totals{max-width:360px;margin-left:auto;margin-top:18px}.totals div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}.totals div:last-child{font-weight:800;font-size:1.15rem;border-bottom:0}.badge{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:.75rem;font-weight:800;background:#eef2f9;color:var(--muted)}.badge.ok{background:#e8f8ef;color:var(--ok)}.badge.warn{background:#fff4df;color:var(--warn)}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.navlinks{display:grid;grid-template-columns:repeat(2,1fr)}.main{padding:20px}.grid.cards{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.item-row{grid-template-columns:1fr 1fr}.item-row .field:first-child{grid-column:1/-1}.topbar{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.grid.cards{grid-template-columns:1fr}.navlinks{grid-template-columns:1fr}.table{display:block;overflow-x:auto}.login-card{padding:24px}.actions .btn{width:100%}}

/* ===== Bedrijfswisselaar ===== */
.business-switcher{
  margin: -10px 0 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
}
.business-switcher label{
  display:block;
  margin-bottom: 7px;
  font-size: .72rem;
  line-height:1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.business-switcher select{
  width:100%;
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: rgba(5,11,26,.55);
  color:#fff;
  font: inherit;
  font-size:.86rem;
  font-weight:700;
  padding: 10px 36px 10px 11px;
  outline:none;
  cursor:pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%), linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.business-switcher select:focus{
  border-color: rgba(79,195,247,.9);
  box-shadow: 0 0 0 3px rgba(79,195,247,.16);
}
.business-switcher select option{
  color:#0d1b3e;
  background:#fff;
}
.business-switcher-hint{
  margin-top:8px;
  color:rgba(255,255,255,.48);
  font-size:.74rem;
  line-height:1.35;
}
@media(max-width:900px){
  .business-switcher{
    margin: 0 0 14px;
  }
}


/* ===== Veilige actiemenu's + bevestigingspopup ===== */
.actions-cell{
  min-width: 170px;
}
.safe-action-select{
  width:100%;
  min-width:150px;
  appearance:none;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:.88rem;
  font-weight:700;
  padding:10px 34px 10px 11px;
  cursor:pointer;
  outline:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.safe-action-select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,159,232,.12);
}
.safe-action-select option[value="delete"]{
  color:var(--bad);
  font-weight:800;
}
.edit-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.edit-toolbar .btn{
  min-width:140px;
}
.safe-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(5,11,26,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:99999;
}
.safe-modal{
  width:100%;
  max-width:460px;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  padding:24px;
}
.safe-modal-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff1f0;
  color:var(--bad);
  font-size:1.4rem;
  margin-bottom:14px;
}
.safe-modal h3{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:1.25rem;
  margin-bottom:8px;
}
.safe-modal p{
  color:var(--muted);
  line-height:1.65;
  margin-bottom:18px;
}
.safe-modal strong{
  color:var(--text);
}
.safe-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.safe-modal-actions .btn{
  min-width:130px;
}
@media(max-width:700px){
  .safe-action-select{min-width:140px}
  .safe-modal{padding:20px}
  .safe-modal-actions .btn{width:100%}
}

/* ===== Fix: dropdowns en popups netjes in donkere modus ===== */
html[data-theme="dark"] .safe-action-select,
html[data-theme="dark"] .field select,
html[data-theme="dark"] select.safe-action-select{
  background-color:#0a1528 !important;
  color:#ecf5ff !important;
  border-color:#334766 !important;
  box-shadow:none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb0c9 50%),
    linear-gradient(135deg, #9fb0c9 50%, transparent 50%) !important;
}

html[data-theme="dark"] .safe-action-select:hover,
html[data-theme="dark"] .field select:hover{
  border-color:#4a6388 !important;
  background-color:#0d1b30 !important;
}

html[data-theme="dark"] .safe-action-select:focus,
html[data-theme="dark"] .field select:focus{
  border-color:#1a9fe8 !important;
  box-shadow:0 0 0 3px rgba(26,159,232,.18) !important;
}

html[data-theme="dark"] .safe-action-select option,
html[data-theme="dark"] .field select option,
html[data-theme="dark"] .business-switcher select option{
  background:#0f1b2e !important;
  color:#ecf5ff !important;
}

html[data-theme="dark"] .safe-action-select option[value="delete"]{
  color:#ff8f86 !important;
  font-weight:800;
}

html[data-theme="dark"] .actions-cell{
  background:transparent !important;
}

html[data-theme="dark"] .safe-modal-backdrop{
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(3px);
}

html[data-theme="dark"] .safe-modal{
  background:#0f1b2e !important;
  color:#ecf5ff !important;
  border-color:#334766 !important;
  box-shadow:0 24px 80px rgba(0,0,0,.55) !important;
}

html[data-theme="dark"] .safe-modal-icon{
  background:#361717 !important;
  color:#ff8f86 !important;
}

html[data-theme="dark"] .safe-modal h3,
html[data-theme="dark"] .safe-modal strong{
  color:#ecf5ff !important;
}

html[data-theme="dark"] .safe-modal p{
  color:#b8c8e4 !important;
}

html[data-theme="dark"] .safe-modal-actions .btn:not(.danger){
  background:#0a1528 !important;
  border-color:#334766 !important;
  color:#ecf5ff !important;
}

html[data-theme="dark"] .safe-modal-actions .btn.danger{
  background:#3a1715 !important;
  border-color:#8f332b !important;
  color:#ffd1cc !important;
}

html[data-theme="dark"] .safe-modal-actions .btn.danger:hover{
  background:#4a1b18 !important;
  border-color:#b5473f !important;
}

/* ===== Websitebeheer / Mijn website beheren ===== */
.website-status-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:18px;margin-bottom:18px}.website-hero-card h2{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.55rem;margin:4px 0 8px}.website-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#eef8ff;color:#14517a;font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.website-small{font-size:.82rem;margin-top:8px}.website-section{margin-top:18px}.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.section-title-row h2{font-family:'Space Grotesk',Inter,sans-serif;margin:0 0 4px}.website-status-pill{display:inline-flex;margin-top:12px;padding:10px 14px;border-radius:999px;font-weight:900}.website-status-pill.offline{background:#fff4df;color:#8a5b00}.website-status-pill.preview{background:#eef8ff;color:#14517a}.website-status-pill.live{background:#ecfdf3;color:#11633a}.website-hours{display:grid;gap:10px}.website-hour-row{display:grid;grid-template-columns:140px 120px 150px 32px 150px;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.62)}.website-hour-row input[type="time"],.website-hour-row input[type="text"],.website-menu-table input{width:100%;padding:10px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font:inherit}.website-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;color:var(--muted)!important}.website-check input{width:auto!important}.website-menu-table-wrap{overflow-x:auto}.website-menu-table input[type="checkbox"]{width:auto}.website-menu-table input[type="number"]{min-width:92px}.website-preview-box{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#fffdf9,#fff7ef);color:#4b433d}.website-preview-announcement{background:#d8a65a;color:#fff;padding:12px 18px;font-weight:900;text-align:center}.website-preview-head{padding:28px;background:linear-gradient(135deg,#c99386,#d8a65a);color:#fff}.website-preview-head span{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:900}.website-preview-head h3{font-family:'Space Grotesk',Inter,sans-serif;font-size:2rem;margin:6px 0}.website-preview-head p{margin:0;color:#fff8ec}.website-preview-grid{display:grid;grid-template-columns:260px 1fr;gap:18px;padding:20px}.website-preview-grid h4{margin:0 0 12px;color:#4e5968}.website-preview-hours{list-style:none;display:grid;gap:8px;padding:0;margin:0}.website-preview-hours li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid rgba(203,141,123,.10)}.website-preview-cat{margin-bottom:16px}.website-preview-cat h4{padding:10px 12px;border-radius:14px;background:#fff7ef;border:1px solid rgba(203,141,123,.10)}.website-preview-item{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px;border-bottom:1px solid rgba(203,141,123,.10)}.website-preview-item small{display:block;color:#7e746c;margin-top:3px}.website-preview-item b{white-space:nowrap;color:#7b5a2f}.btn.btn-small{min-height:36px;padding:8px 12px;font-size:.84rem}
html[data-theme="dark"] .website-kicker{background:#0a2440!important;color:#bde6ff!important}html[data-theme="dark"] .website-status-pill.offline{background:#3b2a0b!important;color:#ffd789!important}html[data-theme="dark"] .website-status-pill.preview{background:#0a2440!important;color:#bde6ff!important}html[data-theme="dark"] .website-status-pill.live{background:#0b3420!important;color:#a8f0c5!important}html[data-theme="dark"] .website-hour-row{background:#0a1528!important;border-color:#263852!important}html[data-theme="dark"] .website-hour-row input[type="time"],html[data-theme="dark"] .website-menu-table input{background:#0f1b2e!important;color:#ecf5ff!important;border-color:#334766!important}html[data-theme="dark"] .website-preview-box{background:#0a1528!important;color:#ecf5ff!important;border-color:#334766!important}html[data-theme="dark"] .website-preview-grid h4{color:#ecf5ff!important}html[data-theme="dark"] .website-preview-hours li,html[data-theme="dark"] .website-preview-cat h4{background:#0f1b2e!important;border-color:#334766!important;color:#ecf5ff!important}html[data-theme="dark"] .website-preview-item{border-color:#334766!important}html[data-theme="dark"] .website-preview-item small{color:#b8c8e4!important}html[data-theme="dark"] .website-preview-item b{color:#ffd789!important}
@media(max-width:900px){.website-status-grid,.website-preview-grid{grid-template-columns:1fr}.section-title-row{flex-direction:column}.website-hour-row{grid-template-columns:1fr 1fr}.website-hour-row strong{grid-column:1/-1}.website-hour-row span{display:none}}@media(max-width:560px){.website-hour-row{grid-template-columns:1fr}.website-hour-row input[type="time"]{width:100%}.website-status-grid .actions .btn{width:100%}}

/* ===== Modulebeheer per klant ===== */
.module-admin-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:18px;align-items:start}.module-business-info{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.62);line-height:1.7}.module-toggle-list{display:grid;gap:18px}.module-group h3{font-family:'Space Grotesk',Inter,sans-serif;margin:0 0 10px;font-size:1rem}.module-toggle-group{display:grid;gap:10px}.module-toggle-card{display:grid!important;grid-template-columns:auto 1fr;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72);cursor:pointer;transition:.18s ease}.module-toggle-card:hover{border-color:rgba(26,159,232,.42);box-shadow:0 8px 22px rgba(13,27,62,.06)}.module-toggle-card input{width:20px!important;height:20px;margin-top:2px;accent-color:var(--blue)}.module-toggle-card strong{display:block;color:var(--text);font-size:.95rem}.module-toggle-card small{display:block;color:var(--muted);line-height:1.45;margin-top:3px}.module-presets{display:flex;gap:10px;flex-wrap:wrap}.module-locked-card{max-width:720px;text-align:left}.module-locked-icon{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#eef8ff;color:#14517a;font-size:1.6rem;margin-bottom:14px}.module-locked-card h2{font-family:'Space Grotesk',Inter,sans-serif;margin-bottom:8px}.module-locked-card p{color:var(--muted);line-height:1.7;margin-bottom:18px}.module-disabled-row{opacity:.72}.module-disabled-row small{color:var(--warn);font-weight:800}a[hidden],.navlinks a[hidden]{display:none!important}
html[data-theme="dark"] .module-business-info,html[data-theme="dark"] .module-toggle-card{background:#0a1528!important;border-color:#263852!important}html[data-theme="dark"] .module-toggle-card:hover{border-color:#1a9fe8!important;box-shadow:0 8px 26px rgba(0,0,0,.25)}html[data-theme="dark"] .module-toggle-card strong{color:#ecf5ff!important}html[data-theme="dark"] .module-toggle-card small{color:#b8c8e4!important}html[data-theme="dark"] .module-locked-icon{background:#0a2440!important;color:#bde6ff!important}html[data-theme="dark"] .module-disabled-row small{color:#ffd789!important}
@media(max-width:900px){.module-admin-grid{grid-template-columns:1fr}.module-presets .btn{width:100%}}


/* ===== Super-admin knop in zijmenu ===== */
.admin-environment-link{
  margin:10px 0 4px!important;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(26,159,232,.32)!important;
  background:linear-gradient(135deg,rgba(26,159,232,.18),rgba(124,92,255,.14))!important;
  color:#ecf5ff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.admin-environment-link:hover{
  transform:translateY(-1px);
  border-color:rgba(26,159,232,.62)!important;
  background:linear-gradient(135deg,rgba(26,159,232,.26),rgba(124,92,255,.20))!important;
}
.admin-environment-link.active{
  border-color:rgba(255,255,255,.55)!important;
  background:linear-gradient(135deg,#1a9fe8,#7c5cff)!important;
}
.admin-environment-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.14);
  font-size:1rem;
}
.admin-environment-copy strong{
  display:block;
  font-size:.92rem;
  line-height:1.1;
}
.admin-environment-copy small{
  display:block;
  margin-top:3px;
  color:rgba(236,245,255,.72);
  font-size:.72rem;
  line-height:1.2;
}
html[data-theme="light"] .admin-environment-link{
  color:#eaf6ff!important;
}
@media(max-width:760px){
  .admin-environment-link{grid-template-columns:30px 1fr;padding:10px!important}
  .admin-environment-icon{width:30px;height:30px}
}

/* ===== Admin omgeving boven Licht/Donker ===== */
.sidebar > .admin-environment-top{
  width:100%;
  margin:0 0 12px!important;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  border-radius:12px;
  text-decoration:none!important;
  border:1px solid rgba(26,159,232,.38)!important;
  background:linear-gradient(135deg,rgba(26,159,232,.20),rgba(124,92,255,.16))!important;
  color:#ecf5ff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.sidebar > .admin-environment-top:hover{
  transform:translateY(-1px);
  border-color:rgba(26,159,232,.68)!important;
  background:linear-gradient(135deg,rgba(26,159,232,.28),rgba(124,92,255,.24))!important;
}
.sidebar > .admin-environment-top.active{
  border-color:rgba(255,255,255,.58)!important;
  background:linear-gradient(135deg,#1a9fe8,#7c5cff)!important;
}
.sidebar > .admin-environment-top + .ag-theme-toggle{
  margin-top:0!important;
}
.sidebar .navlinks [data-nav="owner"]{
  display:none!important;
}
@media(max-width:900px){
  .sidebar > .admin-environment-top{
    max-width:420px;
  }
}

/* ===== Fix: admin boven licht/donker + documentacties ===== */
.sidebar > .admin-environment-top{
  order:1;
  width:100%;
  margin:0 0 10px!important;
}
.sidebar > .ag-theme-toggle{
  order:2;
}
.sidebar .navlinks{
  order:3;
}
.document-new-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.actions-cell{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.actions-cell .btn-small{
  min-height:38px;
  padding:8px 12px;
  border-radius:10px;
  white-space:nowrap;
}
.actions-cell .safe-action-select{
  min-width:150px;
}
.email-doc:disabled{
  opacity:.48;
  cursor:not-allowed;
}
@media(max-width:900px){
  .document-new-actions{
    width:100%;
    justify-content:flex-start;
  }
  .document-new-actions .btn{
    flex:1 1 180px;
  }
}

/* AG Solutions extra fixes: donkere dropdowns + mobielvriendelijke Klanten/Documenten */

html[data-theme="dark"] select,
html[data-theme="dark"] .status-change,
html[data-theme="dark"] .safe-action-select,
html[data-theme="dark"] .field select {
  background-color: #0a1528 !important;
  color: #ecf5ff !important;
  border-color: #334766 !important;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] .status-change option,
html[data-theme="dark"] .safe-action-select option,
html[data-theme="dark"] .field select option {
  background-color: #0f1b2e !important;
  color: #ecf5ff !important;
}

html[data-theme="dark"] .status-change:hover,
html[data-theme="dark"] .safe-action-select:hover,
html[data-theme="dark"] .field select:hover {
  background-color: #0d1b30 !important;
  border-color: #4a6388 !important;
}

html[data-theme="dark"] .status-change:focus,
html[data-theme="dark"] .safe-action-select:focus,
html[data-theme="dark"] .field select:focus {
  border-color: #1a9fe8 !important;
  box-shadow: 0 0 0 3px rgba(26,159,232,.18) !important;
  outline: none !important;
}

html[data-theme="dark"] .status-change {
  min-width: 150px;
  border-radius: 10px;
  padding: 9px 10px;
}

@media (max-width: 760px) {
  main:has(#documentsBody) .topbar,
  main:has(#customersBody) .topbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  main:has(#documentsBody) .topbar .btn,
  main:has(#customersBody) .topbar .btn,
  main:has(#documentsBody) .document-new-actions,
  main:has(#customersBody) .document-new-actions {
    width: 100%;
  }

  main:has(#documentsBody) .document-new-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  main:has(#documentsBody) .form-grid,
  main:has(#customersBody) .form-grid {
    grid-template-columns: 1fr !important;
  }

  main:has(#documentsBody) .card,
  main:has(#customersBody) .card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  main:has(#documentsBody) .table,
  main:has(#customersBody) .table,
  main:has(#documentsBody) .table tbody,
  main:has(#customersBody) .table tbody,
  main:has(#documentsBody) .table tr,
  main:has(#customersBody) .table tr,
  main:has(#documentsBody) .table td,
  main:has(#customersBody) .table td {
    display: block !important;
    width: 100% !important;
  }

  main:has(#documentsBody) .table thead,
  main:has(#customersBody) .table thead {
    display: none !important;
  }

  #documentsBody tr,
  #customersBody tr {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--card);
    box-shadow: 0 10px 24px rgba(20, 40, 80, .06);
  }

  html[data-theme="dark"] #documentsBody tr,
  html[data-theme="dark"] #customersBody tr {
    background: #0f1b2e !important;
    border-color: #263852 !important;
    box-shadow: none !important;
  }

  #documentsBody td,
  #customersBody td {
    border-bottom: 1px solid var(--line) !important;
    padding: 10px 0 !important;
    font-size: .95rem !important;
  }

  #documentsBody td:last-child,
  #customersBody td:last-child {
    border-bottom: 0 !important;
  }

  #documentsBody td::before,
  #customersBody td::before {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  #documentsBody td:nth-child(1)::before { content: "Type"; }
  #documentsBody td:nth-child(2)::before { content: "Nummer"; }
  #documentsBody td:nth-child(3)::before { content: "Klant"; }
  #documentsBody td:nth-child(4)::before { content: "Status"; }
  #documentsBody td:nth-child(5)::before { content: "Totaal"; }
  #documentsBody td:nth-child(6)::before { content: "Datum"; }
  #documentsBody td:nth-child(7)::before { content: "Acties"; }

  #customersBody td:nth-child(1)::before { content: "Naam"; }
  #customersBody td:nth-child(2)::before { content: "Contact"; }
  #customersBody td:nth-child(3)::before { content: "E-mail"; }
  #customersBody td:nth-child(4)::before { content: "Telefoon"; }
  #customersBody td:nth-child(5)::before { content: "Plaats"; }
  #customersBody td:nth-child(6)::before { content: "Actie"; }

  #documentsBody .actions-cell,
  #customersBody .actions-cell {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #documentsBody .actions-cell .btn,
  #customersBody .actions-cell .btn,
  #documentsBody .actions-cell select,
  #customersBody .actions-cell select,
  #documentsBody .status-change {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* AG Solutions - status dropdown + mobiele tabellen fix
   Plak dit helemaal onderaan portal/css/portal.css */

/* Status- en actievelden overal even groot in licht en donker */
.status-change,
.safe-action-select,
.document-action,
.customer-action,
#typeFilter,
#sortBy,
#sortDirection {
  min-height: 44px !important;
  height: 44px !important;
  width: 100% !important;
  min-width: 150px !important;
  padding: 0 42px 0 14px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  appearance: auto !important;
}

.status-change {
  max-width: 190px !important;
}

.actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.actions-cell .btn,
.actions-cell .btn-small {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
}

html:not(.dark) .status-change,
html:not(.dark) .safe-action-select,
html:not(.dark) .document-action,
html:not(.dark) .customer-action,
html:not(.dark) #typeFilter,
html:not(.dark) #sortBy,
html:not(.dark) #sortDirection {
  background-color: #ffffff !important;
  color: #172033 !important;
  border: 1px solid rgba(23, 32, 51, 0.16) !important;
}

html.dark .status-change,
html.dark .safe-action-select,
html.dark .document-action,
html.dark .customer-action,
html.dark #typeFilter,
html.dark #sortBy,
html.dark #sortDirection,
[data-theme="dark"] .status-change,
[data-theme="dark"] .safe-action-select,
[data-theme="dark"] .document-action,
[data-theme="dark"] .customer-action,
[data-theme="dark"] #typeFilter,
[data-theme="dark"] #sortBy,
[data-theme="dark"] #sortDirection,
body.dark .status-change,
body.dark .safe-action-select,
body.dark .document-action,
body.dark .customer-action,
body.dark #typeFilter,
body.dark #sortBy,
body.dark #sortDirection {
  background-color: #071426 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
}

html.dark .status-change option,
html.dark .safe-action-select option,
html.dark .document-action option,
html.dark .customer-action option,
[data-theme="dark"] .status-change option,
[data-theme="dark"] .safe-action-select option,
[data-theme="dark"] .document-action option,
[data-theme="dark"] .customer-action option,
body.dark .status-change option,
body.dark .safe-action-select option,
body.dark .document-action option,
body.dark .customer-action option {
  background-color: #071426 !important;
  color: #f8fafc !important;
}

/* Smartphone: klanten en documenten worden kaartjes in plaats van brede tabellen */

@media (max-width: 760px) {
  .table-wrap,
  .table-card,
  .data-table-wrap,
  .portal-table-wrap {
    width: 100% !important;
    overflow: visible !important;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    box-sizing: border-box !important;
  }

  table.portal-table,
  table.data-table,
  .panel table,
  main table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 14px !important;
  }

  table.portal-table thead,
  table.data-table thead,
  .panel table thead,
  main table thead {
    display: none !important;
  }

  table.portal-table tbody,
  table.data-table tbody,
  .panel table tbody,
  main table tbody {
    display: block !important;
    width: 100% !important;
  }

  table.portal-table tr,
  table.data-table tr,
  .panel table tr,
  main table tr {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
    background: var(--card, rgba(255,255,255,0.92)) !important;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12)) !important;
  }

  html.dark table.portal-table tr,
  html.dark table.data-table tr,
  html.dark .panel table tr,
  html.dark main table tr,
  [data-theme="dark"] table.portal-table tr,
  [data-theme="dark"] table.data-table tr,
  [data-theme="dark"] .panel table tr,
  [data-theme="dark"] main table tr,
  body.dark table.portal-table tr,
  body.dark table.data-table tr,
  body.dark .panel table tr,
  body.dark main table tr {
    background: #0b1728 !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
  }

  table.portal-table td,
  table.data-table td,
  .panel table td,
  main table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .actions-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .actions-cell .btn,
  .actions-cell .btn-small,
  .actions-cell select,
  .status-change,
  .safe-action-select,
  .document-action,
  .customer-action {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .filters,
  .filter-grid,
  .form-grid,
  .toolbar,
  .topbar,
  .document-new-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .topbar .btn,
  .document-new-actions .btn {
    width: 100% !important;
  }
}

/* ===== Professionele dropdown fix v4 =====
   Doel: geen dubbele pijltjes, geen te dikke tekst, consistente hoogte,
   nette lichte/donkere modus voor filters, status en actiemenu's.
*/

:root{
  --select-bg:#ffffff;
  --select-text:var(--text);
  --select-border:var(--line);
  --select-muted:#6b7fa3;
}

/* Basis voor alle portaal-dropdowns */
.field select,
.card select,
.table select,
.safe-action-select,
.status-select,
.document-status-select,
select[data-status-select],
select[data-filter],
select[data-sort],
select[data-order]{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  width:100%;
  min-height:46px!important;
  height:46px!important;
  padding:0 42px 0 14px!important;
  border:1.5px solid var(--select-border)!important;
  border-radius:12px!important;
  background-color:var(--select-bg)!important;
  color:var(--select-text)!important;
  font:inherit!important;
  font-size:.94rem!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  cursor:pointer;
  outline:none!important;
  box-shadow:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' stroke='%236b7fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:18px 18px!important;
}

.field select::-ms-expand,
.card select::-ms-expand,
.table select::-ms-expand,
.safe-action-select::-ms-expand,
.status-select::-ms-expand,
.document-status-select::-ms-expand{
  display:none!important;
}

.field select:hover,
.card select:hover,
.table select:hover,
.safe-action-select:hover,
.status-select:hover,
.document-status-select:hover{
  border-color:#b8c5d8!important;
}

.field select:focus,
.card select:focus,
.table select:focus,
.safe-action-select:focus,
.status-select:focus,
.document-status-select:focus{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(26,159,232,.14)!important;
}

.field select option,
.card select option,
.table select option,
.safe-action-select option,
.status-select option,
.document-status-select option{
  font-weight:500!important;
  color:#0d1b3e!important;
  background:#ffffff!important;
}

/* Status-dropdown niet te klein en niet te dik */
.table td select,
.table .status-select,
.table .document-status-select,
select.status-select,
select.document-status-select{
  min-width:160px!important;
  max-width:190px!important;
}

/* Actiemenu rechts netjes compact */
.actions-cell .safe-action-select,
.safe-action-select{
  min-width:150px!important;
  max-width:210px;
}

.safe-action-select option[value="delete"],
.safe-action-select option[data-danger="true"]{
  color:var(--bad)!important;
  font-weight:700!important;
}

/* Dark mode: exact dezelfde vorm, maar donkere kleuren */
html[data-theme="dark"]{
  --select-bg:#0a1528;
  --select-text:#ecf5ff;
  --select-border:#334766;
  --select-muted:#9fb0c9;
}

html[data-theme="dark"] .field select,
html[data-theme="dark"] .card select,
html[data-theme="dark"] .table select,
html[data-theme="dark"] .safe-action-select,
html[data-theme="dark"] .status-select,
html[data-theme="dark"] .document-status-select,
html[data-theme="dark"] select[data-status-select],
html[data-theme="dark"] select[data-filter],
html[data-theme="dark"] select[data-sort],
html[data-theme="dark"] select[data-order]{
  background-color:#0a1528!important;
  color:#ecf5ff!important;
  border-color:#334766!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' stroke='%23b8c8e4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}

html[data-theme="dark"] .field select:hover,
html[data-theme="dark"] .card select:hover,
html[data-theme="dark"] .table select:hover,
html[data-theme="dark"] .safe-action-select:hover,
html[data-theme="dark"] .status-select:hover,
html[data-theme="dark"] .document-status-select:hover{
  background-color:#0d1b30!important;
  border-color:#4a6388!important;
}

html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .card select:focus,
html[data-theme="dark"] .table select:focus,
html[data-theme="dark"] .safe-action-select:focus,
html[data-theme="dark"] .status-select:focus,
html[data-theme="dark"] .document-status-select:focus{
  border-color:#1a9fe8!important;
  box-shadow:0 0 0 3px rgba(26,159,232,.18)!important;
}

html[data-theme="dark"] .field select option,
html[data-theme="dark"] .card select option,
html[data-theme="dark"] .table select option,
html[data-theme="dark"] .safe-action-select option,
html[data-theme="dark"] .status-select option,
html[data-theme="dark"] .document-status-select option{
  background:#0f1b2e!important;
  color:#ecf5ff!important;
  font-weight:500!important;
}

html[data-theme="dark"] .safe-action-select option[value="delete"],
html[data-theme="dark"] .safe-action-select option[data-danger="true"]{
  color:#ff9b92!important;
  font-weight:700!important;
}

/* Mobiel: dropdowns vullen de breedte en tabellen blijven rustiger */
@media(max-width:760px){
  .field select,
  .card select,
  .table select,
  .safe-action-select,
  .status-select,
  .document-status-select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .actions-cell{
    width:100%;
    align-items:stretch!important;
  }
  .actions-cell .btn,
  .actions-cell .btn-small,
  .actions-cell .safe-action-select{
    width:100%!important;
  }
}

/* ===== AG Solutions final: donkere dropdowns + nette datumweergave support =====
   Plak dit HELEMAAL ONDERAAN portal/css/portal.css
   Doel: filter/sorteer/status/dropdown-boxen volgen donkere modus en tonen maar 1 pijl.
*/

html[data-theme="dark"] #typeFilter,
html[data-theme="dark"] #sortBy,
html[data-theme="dark"] #sortDirection,
html[data-theme="dark"] select.status-change,
html[data-theme="dark"] select.safe-action-select,
html[data-theme="dark"] .documents-filter select,
html[data-theme="dark"] .filter-card select,
html[data-theme="dark"] .card select {
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: dark !important;
  background-color: #071326 !important;
  color: #ecf5ff !important;
  border: 1px solid #2b3f60 !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  padding: 11px 44px 11px 16px !important;
  font-size: .94rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath fill='%239fb0c9' d='M5.5 7.5 10 12l4.5-4.5 1.3 1.3L10 14.6 4.2 8.8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}

html[data-theme="dark"] #typeFilter:hover,
html[data-theme="dark"] #sortBy:hover,
html[data-theme="dark"] #sortDirection:hover,
html[data-theme="dark"] select.status-change:hover,
html[data-theme="dark"] select.safe-action-select:hover,
html[data-theme="dark"] .documents-filter select:hover,
html[data-theme="dark"] .filter-card select:hover,
html[data-theme="dark"] .card select:hover {
  background-color: #0b1a30 !important;
  border-color: #3a5579 !important;
}

html[data-theme="dark"] #typeFilter:focus,
html[data-theme="dark"] #sortBy:focus,
html[data-theme="dark"] #sortDirection:focus,
html[data-theme="dark"] select.status-change:focus,
html[data-theme="dark"] select.safe-action-select:focus,
html[data-theme="dark"] .documents-filter select:focus,
html[data-theme="dark"] .filter-card select:focus,
html[data-theme="dark"] .card select:focus {
  outline: none !important;
  background-color: #0b1a30 !important;
  border-color: #1a9fe8 !important;
  box-shadow: 0 0 0 3px rgba(26,159,232,.18) !important;
}

html[data-theme="dark"] #typeFilter option,
html[data-theme="dark"] #sortBy option,
html[data-theme="dark"] #sortDirection option,
html[data-theme="dark"] select.status-change option,
html[data-theme="dark"] select.safe-action-select option,
html[data-theme="dark"] .documents-filter select option,
html[data-theme="dark"] .filter-card select option,
html[data-theme="dark"] .card select option {
  background: #071326 !important;
  color: #ecf5ff !important;
  font-weight: 500 !important;
}

/* Lichte modus ook rustig houden: 1 pijl, gelijke hoogte, niet overdreven dik. */
html[data-theme="light"] #typeFilter,
html[data-theme="light"] #sortBy,
html[data-theme="light"] #sortDirection,
html[data-theme="light"] select.status-change,
html[data-theme="light"] select.safe-action-select,
html:not([data-theme]) #typeFilter,
html:not([data-theme]) #sortBy,
html:not([data-theme]) #sortDirection,
html:not([data-theme]) select.status-change,
html:not([data-theme]) select.safe-action-select {
  -webkit-appearance: none !important;
  appearance: none !important;
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #0d1b3e !important;
  border: 1px solid #dde5f1 !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  padding: 11px 44px 11px 16px !important;
  font-size: .94rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7fa3' d='M5.5 7.5 10 12l4.5-4.5 1.3 1.3L10 14.6 4.2 8.8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}

/* Acties blijven iets smaller, maar professioneel. */
select.safe-action-select {
  min-width: 160px !important;
}

select.status-change {
  min-width: 170px !important;
}

@media (max-width: 700px) {
  #typeFilter,
  #sortBy,
  #sortDirection,
  select.status-change,
  select.safe-action-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ===== Boekhouder-export / UBL export ===== */
.bookkeeper-export-grid{
  display:grid;
  grid-template-columns:minmax(180px, 260px) minmax(220px, 1fr);
  gap:14px;
  align-items:end;
}
.bookkeeper-export-action .btn{
  min-height:46px;
  width:fit-content;
}
.bookkeeper-export-status{
  margin-top:14px;
  padding:13px 15px;
  border-radius:12px;
  font-weight:700;
  line-height:1.45;
}
.bookkeeper-export-status.info{
  background:#eef8ff;
  border:1px solid #c9ecff;
  color:#14517a;
}
.bookkeeper-export-status.success{
  background:#ecfdf3;
  border:1px solid #b7efcd;
  color:#11633a;
}
.bookkeeper-export-status.error{
  background:#fff1f0;
  border:1px solid #ffd0cc;
  color:#a31d13;
}
html[data-theme="dark"] .bookkeeper-export-status.info{
  background:#0a2440!important;
  border-color:#265a84!important;
  color:#bde6ff!important;
}
html[data-theme="dark"] .bookkeeper-export-status.success{
  background:#0b3420!important;
  border-color:#1f7a4a!important;
  color:#a8f0c5!important;
}
html[data-theme="dark"] .bookkeeper-export-status.error{
  background:#3a1715!important;
  border-color:#8f332b!important;
  color:#ffd1cc!important;
}
html[data-theme="dark"] input[type="month"]{
  background:#0a1528!important;
  color:#ecf5ff!important;
  border-color:#334766!important;
}
html[data-theme="dark"] input[type="month"]:focus{
  border-color:#1a9fe8!important;
  box-shadow:0 0 0 3px rgba(26,159,232,.18)!important;
}
@media(max-width:760px){
  .bookkeeper-export-grid{grid-template-columns:1fr}
  .bookkeeper-export-action .btn{width:100%}
}

/* ===== Boekhouder-export / UBL export ===== */
.bookkeeper-export-grid{
  display:grid;
  grid-template-columns:minmax(180px, 260px) minmax(220px, 1fr);
  gap:14px;
  align-items:end;
}
.bookkeeper-export-action .btn{
  min-height:46px;
  width:fit-content;
}
.bookkeeper-export-status{
  margin-top:14px;
  padding:13px 15px;
  border-radius:12px;
  font-weight:700;
  line-height:1.45;
}
.bookkeeper-export-status.info{
  background:#eef8ff;
  border:1px solid #c9ecff;
  color:#14517a;
}
.bookkeeper-export-status.success{
  background:#ecfdf3;
  border:1px solid #b7efcd;
  color:#11633a;
}
.bookkeeper-export-status.error{
  background:#fff1f0;
  border:1px solid #ffd0cc;
  color:#a31d13;
}
html[data-theme="dark"] .bookkeeper-export-status.info{
  background:#0a2440!important;
  border-color:#265a84!important;
  color:#bde6ff!important;
}
html[data-theme="dark"] .bookkeeper-export-status.success{
  background:#0b3420!important;
  border-color:#1f7a4a!important;
  color:#a8f0c5!important;
}
html[data-theme="dark"] .bookkeeper-export-status.error{
  background:#3a1715!important;
  border-color:#8f332b!important;
  color:#ffd1cc!important;
}
html[data-theme="dark"] input[type="month"]{
  background:#0a1528!important;
  color:#ecf5ff!important;
  border-color:#334766!important;
}
html[data-theme="dark"] input[type="month"]:focus{
  border-color:#1a9fe8!important;
  box-shadow:0 0 0 3px rgba(26,159,232,.18)!important;
}
@media(max-width:760px){
  .bookkeeper-export-grid{grid-template-columns:1fr}
  .bookkeeper-export-action .btn{width:100%}
}


/* ===== FIX: Admin knop weer boven Licht/Donker + boekhouder-export zichtbaar ===== */
.sidebar > .admin-environment-top{
  display:grid!important;
  width:100%;
  margin:0 0 12px!important;
  padding:12px!important;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  border-radius:12px;
  text-decoration:none!important;
  border:1px solid rgba(26,159,232,.42)!important;
  background:linear-gradient(135deg,rgba(26,159,232,.22),rgba(124,92,255,.16))!important;
  color:#ecf5ff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.sidebar > .admin-environment-top:hover{
  transform:translateY(-1px);
  border-color:rgba(26,159,232,.72)!important;
  background:linear-gradient(135deg,rgba(26,159,232,.30),rgba(124,92,255,.24))!important;
}
.sidebar > .admin-environment-top.active{
  border-color:rgba(255,255,255,.58)!important;
  background:linear-gradient(135deg,#1a9fe8,#7c5cff)!important;
}
.sidebar .navlinks [data-nav="owner"]{
  display:none!important;
}
.admin-environment-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.14);
}
.admin-environment-copy strong{display:block;font-size:.92rem;line-height:1.1}
.admin-environment-copy small{display:block;margin-top:3px;color:rgba(236,245,255,.72);font-size:.72rem;line-height:1.2}

/* Boekhouder-export kaart duidelijk zichtbaar in Documenten */
.bookkeeper-export-card{
  margin:18px 0!important;
  border:1px solid var(--line);
}
.bookkeeper-export-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.bookkeeper-export-kicker{
  display:inline-flex;
  margin:0 0 6px;
  padding:5px 9px;
  border-radius:999px;
  background:#eef8ff;
  color:#14517a;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bookkeeper-export-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-top:16px;
}
.bookkeeper-export-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff8e8;
  border:1px solid #ffe2a8;
  color:#72501a;
  font-size:.9rem;
}
.bookkeeper-export-status{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#eef8ff;
  color:#14517a;
  font-weight:700;
}
.bookkeeper-export-status.success{background:#ecfdf3;border-color:#b7efcd;color:#11633a}
.bookkeeper-export-status.error{background:#fff1f0;border-color:#ffd0cc;color:#a31d13}
html[data-theme="dark"] .bookkeeper-export-kicker{background:#0a2440!important;color:#bde6ff!important}
html[data-theme="dark"] .bookkeeper-export-note{background:#3b2a0b!important;border-color:#6b4a12!important;color:#ffd789!important}
html[data-theme="dark"] .bookkeeper-export-status{background:#0a2440!important;border-color:#25415f!important;color:#bde6ff!important}
html[data-theme="dark"] .bookkeeper-export-status.success{background:#0b3420!important;border-color:#1f6b42!important;color:#a8f0c5!important}
html[data-theme="dark"] .bookkeeper-export-status.error{background:#361717!important;border-color:#8f332b!important;color:#ffd1cc!important}
@media(max-width:900px){
  .bookkeeper-export-grid{grid-template-columns:1fr}
  .bookkeeper-export-head .btn{width:100%}
}

/* ===== Opslaan + E-mail knop netter ===== */
#saveAndEmail{
  white-space:nowrap;
}
@media(max-width:700px){
  #saveAndEmail{width:100%;}
}
/* ===== Boekhouder e-mail export + instellingen ===== */
.settings-section-head h2{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:1.25rem;
  margin:0 0 4px;
}
.settings-section-divider{
  margin-top:14px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.bookkeeper-export-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bookkeeper-export-actions .btn{
  min-height:42px;
}
.accountant-preview{
  margin:14px 0 16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.66);
  color:var(--text);
  line-height:1.5;
}
.accountant-preview a{
  color:var(--blue);
  font-weight:800;
}
.bookkeeper-export-history{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.bookkeeper-export-history-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.bookkeeper-export-history-head h3{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:1.05rem;
  margin:0;
}
.export-history-table-wrap{
  width:100%;
  overflow-x:auto;
}
.export-history-table th,
.export-history-table td{
  white-space:nowrap;
}
html[data-theme="dark"] .settings-section-divider,
html[data-theme="dark"] .bookkeeper-export-history{
  border-color:#263852!important;
}
html[data-theme="dark"] .accountant-preview{
  background:#0a1528!important;
  border-color:#263852!important;
  color:#ecf5ff!important;
}
html[data-theme="dark"] .accountant-preview a{
  color:#7dd3fc!important;
}
html[data-theme="dark"] .bookkeeper-export-actions .btn.dark{
  background:#111d33!important;
  color:#ecf5ff!important;
  border-color:#334766!important;
}
@media(max-width:760px){
  .bookkeeper-export-head{
    flex-direction:column;
    align-items:stretch!important;
  }
  .bookkeeper-export-actions{
    width:100%;
    justify-content:stretch;
  }
  .bookkeeper-export-actions .btn{
    flex:1 1 100%;
    width:100%;
  }
  .bookkeeper-export-history-head{
    flex-direction:column;
    align-items:stretch;
  }
  .export-history-table,
  .export-history-table thead,
  .export-history-table tbody,
  .export-history-table tr,
  .export-history-table td{
    display:block;
    width:100%;
  }
  .export-history-table thead{display:none;}
  .export-history-table tr{
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .export-history-table td{
    border-bottom:0!important;
    padding:4px 0!important;
    white-space:normal;
  }
  .export-history-table td:nth-child(1)::before{content:'Verzonden: ';font-weight:800;color:var(--muted)}
  .export-history-table td:nth-child(2)::before{content:'Periode: ';font-weight:800;color:var(--muted)}
  .export-history-table td:nth-child(3)::before{content:'Ontvanger: ';font-weight:800;color:var(--muted)}
  .export-history-table td:nth-child(4)::before{content:'Facturen: ';font-weight:800;color:var(--muted)}
  .export-history-table td:nth-child(5)::before{content:'Status: ';font-weight:800;color:var(--muted)}
}

/* ===== Boekhouding aparte pagina ===== */
.bookkeeper-intro-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.bookkeeper-intro-card h2{
  font-family:'Space Grotesk',Inter,sans-serif;
  margin:4px 0 6px;
}
.bookkeeper-export-card{
  margin-top:0!important;
}
.bookkeeper-export-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.bookkeeper-export-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#eef8ff;
  color:#14517a;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.bookkeeper-export-head h2,
.bookkeeper-export-history h3{
  font-family:'Space Grotesk',Inter,sans-serif;
  margin:0 0 6px;
}
.bookkeeper-export-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.accountant-preview,
.bookkeeper-export-note{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.62);
  padding:13px 14px;
  margin:12px 0 16px;
  color:var(--muted);
}
.accountant-preview strong,
.bookkeeper-export-note strong{
  color:var(--text);
}
.bookkeeper-export-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin:14px 0;
}
.bookkeeper-export-status{
  display:none;
  margin:14px 0;
  padding:13px 15px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#eef8ff;
  color:#14517a;
  font-weight:700;
}
.bookkeeper-export-status.success{background:#ecfdf3;border-color:#b7efcd;color:#11633a;display:block}
.bookkeeper-export-status.error{background:#fff1f0;border-color:#ffd0cc;color:#a31d13;display:block}
.bookkeeper-export-status.warning{background:#fff8e8;border-color:#f6d392;color:#8a5b00;display:block}
.bookkeeper-export-status.info{background:#eef8ff;border-color:#c9ecff;color:#14517a;display:block}
.bookkeeper-export-history{
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.bookkeeper-export-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
#bookkeeperExportHistoryBody{
  max-height:360px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;
  background:rgba(255,255,255,.45);
}
#bookkeeperExportHistoryBody > .muted,
#bookkeeperExportHistoryBody > span{
  display:block;
  padding:16px;
}
.export-history-table-wrap{
  overflow:auto;
}
.export-history-table{
  margin:0;
}
.export-history-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--card);
}

html[data-theme="dark"] .bookkeeper-export-kicker{
  background:#0a2440!important;
  color:#bde6ff!important;
}
html[data-theme="dark"] .accountant-preview,
html[data-theme="dark"] .bookkeeper-export-note,
html[data-theme="dark"] #bookkeeperExportHistoryBody{
  background:#0a1528!important;
  border-color:#263852!important;
  color:#b8c8e4!important;
}
html[data-theme="dark"] .accountant-preview strong,
html[data-theme="dark"] .bookkeeper-export-note strong{
  color:#ecf5ff!important;
}
html[data-theme="dark"] .export-history-table thead th{
  background:#101f35!important;
}

@media(max-width:900px){
  .bookkeeper-intro-card,
  .bookkeeper-export-head,
  .bookkeeper-export-history-head{
    flex-direction:column;
  }
  .bookkeeper-export-actions,
  .bookkeeper-export-actions .btn,
  .bookkeeper-intro-card .btn{
    width:100%;
  }
  .bookkeeper-export-grid{
    grid-template-columns:1fr;
  }
  #bookkeeperExportHistoryBody{
    max-height:320px;
  }
}

/* Betaalmodule - AG Solutions */
.payment-status-note {
  margin-top: 6px;
  font-size: .78rem;
  color: rgba(255,255,255,.68);
}
.payment-status-note:not(.muted) {
  color: #7dd3a8;
  font-weight: 700;
}
.settings-section-divider {
  border-top: 1px solid rgba(148,163,184,.22);
  padding-top: 22px;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .payment-status-note {
    font-size: .76rem;
  }
}

/* ===== Fase 1: producten/diensten, e-mailsjablonen en betaalstatus ===== */
.product-page-grid{
  grid-template-columns:minmax(320px,.85fr) minmax(520px,1.15fr);
  align-items:start;
}
.product-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.compact-filters{
  grid-template-columns:1.4fr .7fr;
  margin-bottom:14px;
}
.small-muted{
  display:block;
  margin-top:4px;
  font-size:.78rem;
  line-height:1.35;
}
.template-textarea{
  min-height:150px !important;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
}
.item-row:has(.product-select-field){
  grid-template-columns:1.05fr 1.45fr .5fr .52fr .65fr .78fr 44px;
}
.product-select-field select{
  font-size:.88rem;
}
.payment-status-note{
  margin-top:6px;
  font-size:.78rem;
  line-height:1.3;
}
.payment-status-note.overdue,
.overdue-row td{
  color:#b45309;
}
html[data-theme="dark"] .payment-status-note.overdue,
html[data-theme="dark"] .overdue-row td{
  color:#fbbf24;
}
@media(max-width:1100px){
  .product-page-grid{grid-template-columns:1fr;}
  .item-row:has(.product-select-field){grid-template-columns:1fr 1fr;}
  .item-row:has(.product-select-field) .product-select-field,
  .item-row:has(.product-select-field) .field:nth-child(2){grid-column:1/-1;}
}
@media(max-width:700px){
  .compact-filters{grid-template-columns:1fr;}
  .product-form-actions .btn{width:100%;}
}
/* ===== Fase 1 correctie: klanten/relaties + CSV import ===== */
.import-card .import-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.csv-import-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.csv-import-row input[type="file"]{
  flex:1;
  min-width:260px;
  padding:12px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
}
.settings-section-head h3{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:1.05rem;
}
@media(max-width:700px){
  .import-card .import-head{flex-direction:column}
  .csv-import-row input[type="file"],
  .csv-import-row .btn{width:100%;min-width:0}
}
html[data-theme="dark"] .csv-import-row input[type="file"]{
  background:#0a1528 !important;
  color:#ecf5ff !important;
  border-color:#334766 !important;
}

/* =========================================================
   AG Solutions fix: Documenten statuslijst + tabelscheidingen
   Plak helemaal onderaan portal/css/portal.css
   ========================================================= */

@media (min-width: 761px) {
  main:has(#documentsBody) .table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  main:has(#documentsBody) .table thead th,
  main:has(#documentsBody) .table tbody td {
    border-bottom: 1px solid var(--line) !important;
    vertical-align: middle !important;
  }

  main:has(#documentsBody) .table tbody tr:last-child td {
    border-bottom: 1px solid var(--line) !important;
  }

  /* Belangrijk: een td mag op desktop geen flex-container zijn,
     anders breekt de horizontale scheidingslijn bij Acties. */
  main:has(#documentsBody) .table td.actions-cell {
    display: table-cell !important;
    white-space: nowrap !important;
    min-width: 220px !important;
  }

  main:has(#documentsBody) .table td.actions-cell .btn,
  main:has(#documentsBody) .table td.actions-cell .btn-small {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
  }

  main:has(#documentsBody) .table td.actions-cell .safe-action-select,
  main:has(#documentsBody) .table td.actions-cell .document-action {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: 155px !important;
  }
}

@media (max-width: 760px) {
  main:has(#documentsBody) .table td.actions-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* ===== AG Solutions theme flash fix: dark mode direct vanuit portal.css ===== */
/* ===== AG Solutions donkere modus ===== */
    html[data-theme="dark"] {
      --navy:#050b1a;
      --navy-soft:#0b1730;
      --blue:#1a9fe8;
      --blue-dark:#177dc0;
      --bg:#08111f;
      --card:#0f1b2e;
      --line:#26354f;
      --muted:#9fb0c9;
      --text:#ecf5ff;
      --shadow:0 12px 32px rgba(0,0,0,.34);
    }

    html[data-theme="dark"],
    html[data-theme="dark"] body {
      background:#08111f !important;
      color:#ecf5ff !important;
    }

    html[data-theme="dark"] .sidebar {
      background:#050b1a !important;
      border-right:1px solid #1b2b47;
    }

    html[data-theme="dark"] .brand img,
    html[data-theme="dark"] .login-logo img {
      background:#ffffff;
    }

    html[data-theme="dark"] .main,
    html[data-theme="dark"] .app,
    html[data-theme="dark"] .login-wrap {
      background:#08111f !important;
    }

    html[data-theme="dark"] .login-wrap {
      background:linear-gradient(180deg,#08111f 0%,#0f1b2e 100%) !important;
    }

    html[data-theme="dark"] .card,
    html[data-theme="dark"] .login-card,
    html[data-theme="dark"] .business-pill,
    html[data-theme="dark"] .contact-form-card,
    html[data-theme="dark"] .price-card,
    html[data-theme="dark"] .phase-card,
    html[data-theme="dark"] .portal-list-row,
    html[data-theme="dark"] .portal-stat-box {
      background:#0f1b2e !important;
      border-color:#26354f !important;
      color:#ecf5ff !important;
      box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
    }

    html[data-theme="dark"] .topbar h1,
    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] h3,
    html[data-theme="dark"] h4,
    html[data-theme="dark"] .section-title,
    html[data-theme="dark"] .price-name,
    html[data-theme="dark"] .price-amount,
    html[data-theme="dark"] .login-logo h1,
    html[data-theme="dark"] .field label {
      color:#ecf5ff !important;
    }

    html[data-theme="dark"] .muted,
    html[data-theme="dark"] .stat-label,
    html[data-theme="dark"] .section-desc,
    html[data-theme="dark"] .price-desc,
    html[data-theme="dark"] .price-period,
    html[data-theme="dark"] .price-plus,
    html[data-theme="dark"] .price-features li,
    html[data-theme="dark"] .contact-row-sub,
    html[data-theme="dark"] .table th {
      color:#9fb0c9 !important;
    }

    html[data-theme="dark"] .table th,
    html[data-theme="dark"] .table td,
    html[data-theme="dark"] .price-divider,
    html[data-theme="dark"] .phase-head,
    html[data-theme="dark"] .totals div {
      border-color:#26354f !important;
    }

    html[data-theme="dark"] .field input,
    html[data-theme="dark"] .field select,
    html[data-theme="dark"] .field textarea,
    html[data-theme="dark"] .form-field input,
    html[data-theme="dark"] .form-field select,
    html[data-theme="dark"] .form-field textarea {
      background:#0a1528 !important;
      border-color:#26354f !important;
      color:#ecf5ff !important;
    }

    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder {
      color:#7184a2 !important;
    }

    html[data-theme="dark"] .btn:not(.primary):not(.dark):not(.danger),
    html[data-theme="dark"] .btn-secondary {
      background:#0f1b2e !important;
      border-color:#26354f !important;
      color:#ecf5ff !important;
    }

    html[data-theme="dark"] .btn.dark {
      background:#050b1a !important;
      border-color:#26354f !important;
      color:#ecf5ff !important;
    }

    html[data-theme="dark"] .notice {
      background:#10253d !important;
      border-color:#29506f !important;
      color:#bfe7ff !important;
    }

    html[data-theme="dark"] .success {
      background:#0d2a1b !important;
      border-color:#1d6a42 !important;
      color:#bff5d5 !important;
    }

    html[data-theme="dark"] .error {
      background:#321212 !important;
      border-color:#722720 !important;
      color:#ffd1cc !important;
    }

    html[data-theme="dark"] .badge {
      background:#17243a !important;
      color:#b8c8e4 !important;
    }

    html[data-theme="dark"] .badge.ok {
      background:#10351f !important;
      color:#7ee2a5 !important;
    }

    html[data-theme="dark"] .badge.warn {
      background:#3b260a !important;
      color:#ffd58c !important;
    }

    /* Publieke website donker */
    html[data-theme="dark"] .site-header {
      background:rgba(8,17,31,.92) !important;
      border-color:#26354f !important;
    }

    html[data-theme="dark"] .nav-logo-text,
    html[data-theme="dark"] .nav-menu a,
    html[data-theme="dark"] .hero h1,
    html[data-theme="dark"] .card h3,
    html[data-theme="dark"] .why-item h4,
    html[data-theme="dark"] .contact-row-title {
      color:#ecf5ff !important;
    }

    html[data-theme="dark"] .hero,
    html[data-theme="dark"] .section-alt {
      background:#08111f !important;
    }

    html[data-theme="dark"] .hero-lead,
    html[data-theme="dark"] .card p,
    html[data-theme="dark"] .why-item p,
    html[data-theme="dark"] .contact-info p.lead,
    html[data-theme="dark"] .pricing-footnote {
      color:#9fb0c9 !important;
    }

    html[data-theme="dark"] .eyebrow,
    html[data-theme="dark"] .card-icon,
    html[data-theme="dark"] .contact-row-icon {
      background:#132238 !important;
      color:#4fc3f7 !important;
    }

    html[data-theme="dark"] .security-section,
    html[data-theme="dark"] .site-footer,
    html[data-theme="dark"] .portal-preview {
      background:#050b1a !important;
    }

    .ag-theme-toggle {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:40px;
      border:1px solid rgba(13,27,62,.12);
      background:#ffffff;
      color:#0d1b3e;
      padding:9px 12px;
      border-radius:999px;
      font-weight:800;
      font-size:.86rem;
      line-height:1;
      cursor:pointer;
      transition:background .15s, border-color .15s, transform .15s, box-shadow .15s, color .15s;
      box-shadow:0 6px 18px rgba(13,27,62,.08);
      flex:0 0 auto;
      white-space:nowrap;
    }

    .ag-theme-toggle:hover {
      background:#f7f9fc;
      border-color:rgba(26,159,232,.35);
      transform:translateY(-1px);
      box-shadow:0 10px 22px rgba(13,27,62,.12);
    }

    /* In het portaal komt de knop netjes in de sidebar */
    .sidebar .ag-theme-toggle {
      width:100%;
      margin:0 0 14px;
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.18);
      color:#fff;
      box-shadow:none;
      border-radius:12px;
    }

    .sidebar .ag-theme-toggle:hover {
      background:rgba(255,255,255,.14);
      border-color:rgba(255,255,255,.34);
      box-shadow:none;
    }

    /* Op de publieke website staat de knop gewoon in de navigatie, niet meer zwevend */
    .nav-right .ag-theme-toggle {
      margin:0;
      height:42px;
      padding:0 14px;
      box-shadow:none;
      background:#ffffff;
      border-color:var(--gray-200, #dde5f1);
      color:var(--navy, #0d1b3e);
    }

    .nav-right .ag-theme-toggle:hover {
      box-shadow:none;
      color:var(--blue-bright, #1a9fe8);
      border-color:var(--blue-bright, #1a9fe8);
      transform:none;
    }

    /* Op login/losse pagina's staat de knop rustig in de kaart */
    .login-card .ag-theme-toggle {
      width:auto;
      margin:0 0 18px auto;
      box-shadow:none;
      border-radius:999px;
    }

    /* Alleen als er geen duidelijke plek is, dan pas zwevend rechtsonder */
    .ag-theme-toggle.floating {
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:9999;
      width:auto;
      margin:0;
      background:#ffffff;
      border-color:#dde5f1;
      color:#0d1b3e;
      box-shadow:0 10px 28px rgba(0,0,0,.18);
    }

    html[data-theme="dark"] .ag-theme-toggle {
      background:#0f1b2e;
      border-color:#26354f;
      color:#ecf5ff;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }

    html[data-theme="dark"] .sidebar .ag-theme-toggle {
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.18);
      color:#ecf5ff;
      box-shadow:none;
    }

    html[data-theme="dark"] .nav-right .ag-theme-toggle {
      background:#0f1b2e;
      border-color:#26354f;
      color:#ecf5ff;
      box-shadow:none;
    }

    html[data-theme="dark"] .nav-right .ag-theme-toggle:hover {
      border-color:#4fc3f7;
      color:#4fc3f7;
    }

    @media(max-width:900px) {
      .sidebar .ag-theme-toggle {
        width:100%;
        margin:0 0 12px;
      }
    }

    @media(max-width:720px) {
      .nav-right {
        gap:8px !important;
      }

      .nav-right .ag-theme-toggle {
        width:42px;
        min-width:42px;
        height:42px;
        padding:0;
        border-radius:12px;
      }

      .nav-right .ag-theme-toggle span:last-child {
        display:none;
      }
    }

    @media(max-width:420px) {
      .nav-portal-btn {
        padding:10px 12px !important;
        font-size:.8rem !important;
      }

      .nav-portal-btn svg {
        display:none;
      }

      .nav-right .ag-theme-toggle {
        width:38px;
        min-width:38px;
        height:38px;
      }
    }
/* ===== einde theme flash fix ===== */

/* AG Solutions fase 2: projecten, uren en abonnementen */
.phase2-page-grid {
  grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.35fr);
  align-items: start;
}

.phase2-inline-actions {
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}

.mini-cell-text {
  display: block;
  max-width: 340px;
  margin-top: 4px;
  font-size: .82rem;
  line-height: 1.35;
  white-space: normal;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(148, 163, 184, .12);
}

.status-active { background: rgba(34,197,94,.13); color: #16a34a; border-color: rgba(34,197,94,.25); }
.status-paused { background: rgba(245,158,11,.13); color: #d97706; border-color: rgba(245,158,11,.25); }
.status-completed { background: rgba(59,130,246,.13); color: #2563eb; border-color: rgba(59,130,246,.25); }
.status-archived { background: rgba(100,116,139,.14); color: #64748b; border-color: rgba(100,116,139,.25); }

.phase2-dashboard-card {
  margin: 18px 0;
}

.phase2-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.phase2-stat {
  border: 1px solid var(--border, rgba(148,163,184,.2));
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, .035);
}

.phase2-stat strong {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.phase2-stat span,
.phase2-stat a {
  display: block;
  font-size: .86rem;
}

.phase2-stat a {
  margin-top: 8px;
  font-weight: 800;
  text-decoration: none;
}

body.dark .phase2-stat,
[data-theme="dark"] .phase2-stat {
  background: rgba(255,255,255,.035);
}

@media (max-width: 1100px) {
  .phase2-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .phase2-page-grid .table {
    min-width: 850px;
  }

  .phase2-page-grid > .card:last-child {
    overflow-x: auto;
  }

  .phase2-inline-actions .btn,
  .phase2-inline-actions .muted {
    width: 100%;
  }
}


/* ===== Fase 2 admin abonnementen ===== */
.admin-subscription-top {
  margin-top: 8px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
}
.admin-subscription-top.active,
.admin-subscription-top:hover {
  background: linear-gradient(135deg, rgba(31,143,255,.22), rgba(31,143,255,.08));
  border-color: rgba(31,143,255,.45);
}
.admin-subscription-intro .admin-subscription-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.admin-subscription-mini-grid > div {
  border: 1px solid var(--border, rgba(148,163,184,.22));
  border-radius: 14px;
  padding: 14px;
  background: rgba(148,163,184,.06);
}
.admin-subscription-mini-grid strong,
.admin-subscription-mini-grid span {
  display: block;
}
.admin-subscription-mini-grid span {
  color: var(--muted, #8aa0bd);
  margin-top: 4px;
  font-size: .92rem;
}
.admin-subscriptions-page .admin-subscription-stats {
  margin-bottom: 18px;
}
.admin-subscription-layout {
  grid-template-columns: minmax(360px, .8fr) minmax(520px, 1.2fr);
  align-items: start;
}
.admin-subscription-table-wrap {
  max-height: 620px;
  overflow: auto;
  border-radius: 16px;
}
.admin-subscription-table-wrap .table {
  min-width: 980px;
}
.overdue-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-right: 8px;
  vertical-align: middle;
}
.status-pill.cancelled {
  background: rgba(148,163,184,.18);
  color: inherit;
}
@media (max-width: 980px) {
  .admin-subscription-layout,
  .admin-subscription-intro .admin-subscription-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AG Solutions Fase 3A - professionele layout + mobiel
   ========================================================= */
.app{grid-template-columns:250px minmax(0,1fr)}
.sidebar{padding:18px 14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.sidebar .brand{margin-bottom:6px;position:relative;min-height:46px}
.sidebar .brand strong{line-height:1.15}.sidebar .brand img{width:38px;height:38px;border-radius:12px}
.main{padding:26px;max-width:1380px}.topbar{align-items:flex-start}.topbar>div:first-child{min-width:0}.topbar h1{font-size:1.65rem}
.business-pill[data-business-name]{display:none!important}
.topbar-business-switcher{margin-left:auto;min-width:230px;display:flex;flex-direction:column;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow)}
.topbar-business-switcher label,.topbar-switcher-label{font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.topbar-business-switcher strong{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-business-switcher select{border:0;background:transparent;color:var(--text);font:inherit;font-weight:800;outline:none;min-width:0;width:100%;padding:0}
.admin-action-stack{display:grid;gap:8px;margin:2px 0 4px}.admin-stack-link{display:flex;align-items:center;gap:9px;text-decoration:none;color:rgba(255,255,255,.82);background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:9px 10px;transition:.15s}.admin-stack-link:hover,.admin-stack-link.active{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}.admin-stack-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.10);flex:0 0 auto}.admin-stack-link span:last-child{display:flex;flex-direction:column;line-height:1.1;min-width:0}.admin-stack-link strong{font-size:.84rem}.admin-stack-link small{font-size:.68rem;color:rgba(255,255,255,.55);margin-top:3px}
.sidebar .ag-theme-toggle{width:42px!important;min-width:42px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:12px!important;margin:2px 0 0 auto!important;gap:0!important;font-size:.92rem!important}.sidebar .ag-theme-toggle span:last-child{display:none!important}.sidebar .ag-theme-toggle span:first-child{line-height:1}
.navlinks{gap:6px}.navlinks>a,.nav-sublinks>a,.nav-nested a{display:flex;align-items:center;min-height:38px;padding:9px 10px;border-radius:10px;text-decoration:none;color:rgba(255,255,255,.72);font-weight:750;font-size:.88rem}.navlinks>a:hover,.navlinks>a.active,.nav-sublinks>a:hover,.nav-sublinks>a.active,.nav-nested a:hover,.nav-nested a.active{background:rgba(255,255,255,.10);color:#fff}.nav-home{background:rgba(26,159,232,.16)!important;color:#fff!important}.nav-group{border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.035);overflow:hidden}.nav-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px;color:rgba(255,255,255,.88);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:900}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary:after{content:'▾';margin-left:auto;color:rgba(255,255,255,.45);font-size:.75rem;transition:.15s}.nav-group:not([open]) summary:after{transform:rotate(-90deg)}.nav-sublinks{display:grid;gap:2px;padding:0 6px 8px}.nav-nested{margin:2px 0;border-radius:10px}.nav-nested summary{list-style:none;cursor:pointer;color:rgba(255,255,255,.68);font-size:.84rem;font-weight:800;padding:8px 10px}.nav-nested summary::-webkit-details-marker{display:none}.nav-nested div{display:grid;gap:2px;padding:0 0 4px 12px}.nav-mini-link{font-size:.82rem!important;min-height:32px!important}.nav-separator{height:1px;background:rgba(255,255,255,.10);margin:6px 2px}
.mobile-menu-toggle{display:none;margin-left:auto;width:38px;height:34px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}.mobile-menu-toggle span{width:16px;height:2px;background:#fff;border-radius:999px}
.dashboard-stat-sub{display:block;font-family:Inter,system-ui,sans-serif;font-size:.72rem;font-weight:800;color:var(--muted);margin-top:2px}.card .stat-label{font-weight:800}
.settings-accordion{border:1px solid var(--line);border-radius:16px;background:rgba(13,27,62,.025);padding:0;margin:6px 0}.settings-accordion summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-accordion summary::-webkit-details-marker{display:none}.settings-accordion summary span{font-weight:900;color:var(--text)}.settings-accordion summary small{color:var(--muted);font-weight:700}.settings-accordion-grid{padding:0 18px 18px}.compact-notice{margin:0!important}
.customer-list-tools{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin:10px 0 14px}.customer-list-footer{display:flex;justify-content:center;margin-top:14px}.customers-list-card .table{table-layout:auto}.customer-row td:first-child strong{font-size:.95rem}
.table-scroll{width:100%;overflow:auto}.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.admin-subscription-archive-card{margin-top:18px}.status-pill.paid{background:#e8f8ef;color:var(--ok)}.status-pill.sent{background:#eef8ff;color:#14517a}.status-pill.concept{background:#eef2f9;color:var(--muted)}.status-pill.cancelled{background:#fff1f0;color:var(--bad)}
html[data-theme="dark"] .topbar-business-switcher,html[data-theme="dark"] .settings-accordion{background:#0f1b2e!important;border-color:#26354f!important}html[data-theme="dark"] .topbar-business-switcher select{color:#ecf5ff!important}html[data-theme="dark"] .settings-accordion summary span{color:#ecf5ff!important}html[data-theme="dark"] .nav-group{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.035)}
@media(max-width:900px){.app{display:block}.sidebar{position:sticky;top:0;height:auto;z-index:30;border-bottom:1px solid rgba(255,255,255,.10)}.sidebar .brand{margin-bottom:0}.mobile-menu-toggle{display:flex}.sidebar .ag-theme-toggle{position:absolute;right:58px;top:20px;margin:0!important}.admin-action-stack,.sidebar .navlinks{display:none}.sidebar.is-open .admin-action-stack,.sidebar.is-open .navlinks{display:grid}.sidebar.is-open .admin-action-stack{margin-top:12px}.navlinks{grid-template-columns:1fr!important}.main{padding:18px}.topbar{flex-direction:column;gap:12px;margin-bottom:18px}.topbar-business-switcher{width:100%;margin-left:0;min-width:0}.customer-list-tools{grid-template-columns:1fr}.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.actions .btn{width:auto}}
@media(max-width:640px){.main{padding:14px}.grid.cards{grid-template-columns:1fr}.card{padding:16px;border-radius:14px}.topbar h1{font-size:1.35rem}.customer-list-tools{gap:10px}.customers-list-card .table thead{display:none}.customers-list-card .table,.customers-list-card .table tbody,.customers-list-card .table tr,.customers-list-card .table td{display:block;width:100%}.customers-list-card .table tr{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:10px;background:var(--card)}.customers-list-card .table td{border:0!important;padding:5px 0!important;display:flex;justify-content:space-between;gap:12px;font-size:.88rem}.customers-list-card .table td::before{content:attr(data-label);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:900;color:var(--muted);min-width:88px}.customers-list-card .table td:first-child{display:block}.customers-list-card .table td:first-child::before{display:none}.customers-list-card .actions-cell{padding-top:8px!important}.customers-list-card .actions-cell .safe-action-select{max-width:190px}.settings-accordion summary{align-items:flex-start;flex-direction:column}.section-title-row{flex-direction:column}.table-scroll{border:1px solid var(--line);border-radius:14px}.table-scroll .table{min-width:760px}}
/* =========================================================
   AG Solutions - Fase 3A menu/layout + abonnementdatum fix
   Plaats dit helemaal onderaan portal/css/portal.css
   ========================================================= */

/* Verberg oude/statische menu heel kort tot de module-navigatie klaar is.
   Hiermee verdwijnt de flits van het oude menu bij paginawissel. */
.sidebar:not(.nav-ready) .navlinks,
.sidebar:not(.nav-ready) .admin-action-stack {
  visibility: hidden;
}

/* Thema-knop professioneel klein in de brandregel */
.sidebar .brand {
  position: relative !important;
  padding-right: 44px !important;
}
.sidebar .brand .ag-theme-toggle {
  position: absolute !important;
  right: 0 !important;
  top: 1px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 11px !important;
  gap: 0 !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.sidebar .brand .ag-theme-toggle span:last-child {
  display: none !important;
}

/* Admin-acties rustiger en minder speels */
.admin-action-stack {
  gap: 6px !important;
  margin: 8px 0 10px !important;
}
.admin-stack-link {
  min-height: 44px !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.105) !important;
  color: rgba(255,255,255,.84) !important;
}
.admin-stack-link:hover,
.admin-stack-link.active {
  background: rgba(26,159,232,.17) !important;
  border-color: rgba(26,159,232,.38) !important;
  color: #fff !important;
}
.admin-stack-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: rgba(255,255,255,.095) !important;
}
.admin-stack-link strong {
  font-size: .82rem !important;
}
.admin-stack-link small {
  font-size: .66rem !important;
}

/* Professioneler menu: geen kinderachtige emoji-blokken, maar rustige secties */
.navlinks {
  gap: 3px !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.nav-group {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 3px 0 5px !important;
}
.nav-group summary {
  min-height: auto !important;
  padding: 10px 8px 6px !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .68rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: .105em !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.nav-group summary strong,
.nav-group-title {
  font: inherit !important;
  color: inherit !important;
}
.nav-group summary > span:not(.nav-group-title):empty,
.nav-group summary > span:not(.nav-group-title) {
  display: none !important;
}
.nav-group summary:after {
  content: '' !important;
  margin-left: auto !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
  opacity: .8 !important;
  transition: transform .16s ease !important;
}
.nav-group:not([open]) summary:after {
  transform: rotate(-45deg) !important;
}
.nav-sublinks {
  display: grid !important;
  gap: 2px !important;
  margin-left: 10px !important;
  padding: 0 0 7px 9px !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
}
.nav-sublinks > a,
.nav-nested a,
.navlinks > a {
  min-height: 34px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: .84rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,.74) !important;
}
.nav-sublinks > a:hover,
.nav-nested a:hover,
.navlinks > a:hover,
.nav-sublinks > a.active,
.nav-nested a.active,
.navlinks > a.active {
  background: rgba(255,255,255,.085) !important;
  color: #fff !important;
}
.nav-home {
  background: rgba(26,159,232,.18) !important;
  color: #fff !important;
  margin-bottom: 5px !important;
}
.nav-nested {
  margin: 1px 0 !important;
  border-radius: 9px !important;
}
.nav-nested summary {
  padding: 8px 10px !important;
  color: rgba(255,255,255,.62) !important;
  font-size: .82rem !important;
  font-weight: 820 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.nav-nested summary:after {
  content: '›' !important;
  float: right !important;
  opacity: .55 !important;
  transform: rotate(90deg) !important;
}
.nav-nested:not([open]) summary:after {
  transform: rotate(0deg) !important;
}
.nav-nested div {
  padding: 0 0 4px 10px !important;
}
.nav-mini-link {
  min-height: 30px !important;
  font-size: .81rem !important;
}
.nav-separator {
  margin: 8px 4px !important;
  background: rgba(255,255,255,.085) !important;
}

@media(max-width:900px) {
  .sidebar .brand .ag-theme-toggle {
    right: 52px !important;
    top: 2px !important;
  }
  .sidebar:not(.is-open) .navlinks,
  .sidebar:not(.is-open) .admin-action-stack {
    display: none !important;
  }
  .sidebar.is-open:not(.nav-ready) .navlinks,
  .sidebar.is-open:not(.nav-ready) .admin-action-stack {
    visibility: hidden;
  }
}
/* =========================================================
   AG Solutions - Fase 3A menu polish fix
   Plaats dit helemaal onderaan portal/css/portal.css
   ========================================================= */

/* 1) Smartphone: thema-icoon naast hamburger, nooit eroverheen */
@media (max-width: 900px) {
  .sidebar.sidebar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 0 !important;
  }

  .sidebar.sidebar .brand strong {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .sidebar.sidebar .brand .ag-theme-toggle {
    position: static !important;
    order: 3 !important;
    margin: 0 4px 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: .9rem !important;
    transform: none !important;
  }

  .sidebar.sidebar .brand .ag-theme-toggle span:last-child {
    display: none !important;
  }

  .sidebar.sidebar .mobile-menu-toggle {
    order: 4 !important;
    margin-left: 0 !important;
    flex: 0 0 38px !important;
  }
}

/* 2) Dubbele pijlen bij details/summary verwijderen */
.sidebar details > summary {
  list-style: none !important;
}
.sidebar details > summary::-webkit-details-marker {
  display: none !important;
}
.sidebar details > summary::marker {
  content: '' !important;
  font-size: 0 !important;
}

/* 3) Menu rustiger: minder dik gedrukt en zakelijker */
.sidebar .navlinks,
.sidebar .navlinks a,
.sidebar .nav-group summary,
.sidebar .nav-nested summary {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.sidebar .navlinks > a:not(.nav-home),
.sidebar .nav-sublinks > a,
.sidebar .nav-nested a {
  font-weight: 600 !important;
  font-size: .835rem !important;
  letter-spacing: 0 !important;
}

.sidebar .nav-home {
  font-weight: 680 !important;
}

.sidebar .nav-group summary {
  font-weight: 720 !important;
  font-size: .67rem !important;
  letter-spacing: .095em !important;
  color: rgba(255,255,255,.54) !important;
}

.sidebar .nav-nested summary {
  font-weight: 620 !important;
  font-size: .815rem !important;
  color: rgba(255,255,255,.68) !important;
}

/* 4) Laatste losse links minder zwaar: Instellingen / Publieke website / Uitloggen */
.sidebar .navlinks > a[data-nav="instellingen"],
.sidebar .navlinks > a[data-nav="website"],
.sidebar .navlinks > a[data-logout] {
  font-weight: 560 !important;
  color: rgba(255,255,255,.70) !important;
  min-height: 32px !important;
  padding: 7px 9px !important;
}

.sidebar .navlinks > a[data-nav="instellingen"]:hover,
.sidebar .navlinks > a[data-nav="website"]:hover,
.sidebar .navlinks > a[data-logout]:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.075) !important;
}
/* =========================================================
   AG Solutions - Fase 3A dubbele pijl fix
   Plaats dit helemaal onderaan portal/css/portal.css
   ========================================================= */

/* Verwijder alle oude/native pijlen bij het subitem Nieuw document */
.sidebar .nav-nested > summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-weight: 560 !important;
}

.sidebar .nav-nested > summary::-webkit-details-marker {
  display: none !important;
}

.sidebar .nav-nested > summary::marker {
  content: '' !important;
  font-size: 0 !important;
}

.sidebar .nav-nested > summary::before,
.sidebar .nav-nested > summary::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  transform: none !important;
}

/* Eén nette, zakelijke caret via markup uit auth.js */
.sidebar .nav-nested > summary .nav-caret {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  margin-left: auto !important;
  border-right: 1.4px solid rgba(255,255,255,.46) !important;
  border-bottom: 1.4px solid rgba(255,255,255,.46) !important;
  transform: rotate(-45deg) !important;
  transition: transform .16s ease, border-color .16s ease !important;
}

.sidebar .nav-nested[open] > summary .nav-caret {
  transform: rotate(45deg) !important;
}

.sidebar .nav-nested > summary:hover .nav-caret {
  border-color: rgba(255,255,255,.82) !important;
}

/* Menu nog iets minder vet, vooral losse links onderin */
.sidebar .navlinks > a,
.sidebar .nav-sublinks > a,
.sidebar .nav-nested a,
.sidebar .nav-nested > summary {
  font-weight: 560 !important;
}

.sidebar .nav-home,
.sidebar .nav-sublinks > a.active,
.sidebar .navlinks > a.active {
  font-weight: 650 !important;
}

.sidebar .navlinks > a[data-nav="instellingen"],
.sidebar .navlinks > a[href="../index.html"],
.sidebar .navlinks > a[data-logout] {
  font-weight: 520 !important;
}
/* =========================================================
   FASE 3A FIX - Nieuw document submenu zichtbaar
   Doel: de klikbare regel "Nieuw document" weer zichtbaar maken
   zonder dubbele caret/pijl terug te brengen.
   Plak dit helemaal onderaan portal/css/portal.css
   ========================================================= */

/* Zorg dat submenu-knoppen altijd tekst tonen */
.portal-sidebar .nav-group-toggle,
.portal-sidebar .nav-sub-toggle,
.portal-sidebar button.nav-link,
.portal-sidebar .nav-link[data-nav-toggle],
.portal-sidebar .nav-link.has-children {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specifiek: tekst binnen submenu-toggle zichtbaar houden */
.portal-sidebar .nav-sub-toggle span,
.portal-sidebar .nav-sub-toggle .nav-label,
.portal-sidebar .nav-link.has-children span,
.portal-sidebar .nav-link[data-nav-toggle] span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 600 !important;
}

/* Alleen de echte caret tonen; oude/dubbele pseudo-caret uitschakelen */
.portal-sidebar .nav-sub-toggle::before,
.portal-sidebar .nav-sub-toggle::after,
.portal-sidebar .nav-link.has-children::before,
.portal-sidebar .nav-link.has-children::after,
.portal-sidebar .nav-link[data-nav-toggle]::before,
.portal-sidebar .nav-link[data-nav-toggle]::after {
  content: none !important;
  display: none !important;
}

/* Nieuwe enkele caret, professioneel en subtiel */
.portal-sidebar .nav-sub-toggle .nav-caret,
.portal-sidebar .nav-link.has-children .nav-caret,
.portal-sidebar .nav-link[data-nav-toggle] .nav-caret {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(198,213,236,.68) !important;
  opacity: 1 !important;
  transform: none !important;
}

.portal-sidebar .nav-sub-toggle[aria-expanded="true"] .nav-caret,
.portal-sidebar .nav-link.has-children[aria-expanded="true"] .nav-caret,
.portal-sidebar .nav-link[data-nav-toggle][aria-expanded="true"] .nav-caret {
  transform: rotate(90deg) !important;
}

/* Subitems onder Nieuw document netjes zichtbaar */
.portal-sidebar .nav-submenu,
.portal-sidebar .nav-children {
  margin: 4px 0 6px 12px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(148,163,184,.22) !important;
}

.portal-sidebar .nav-submenu a,
.portal-sidebar .nav-children a {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  color: rgba(235,242,255,.86) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.portal-sidebar .nav-submenu a:hover,
.portal-sidebar .nav-children a:hover {
  background: rgba(59,130,246,.14) !important;
  color: #ffffff !important;
}
/* =========================================================
   FASE 3A - Nieuw document definitief zichtbaar
   Doel:
   - "Nieuw document" weer zichtbaar maken onder Documenten
   - uitklappen blijft werken
   - geen dubbele pijl/caret
   - menu blijft rustig/professioneel
   Plak helemaal onderaan portal/css/portal.css
   ========================================================= */

/* Details/summary basis voor het sub-menu Nieuw document */
.sidebar .nav-sublinks > .nav-nested,
.sidebar details.nav-nested {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 2px 0 2px 0 !important;
  padding: 0 !important;
}

.sidebar .nav-nested > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: rgba(235,242,255,.82) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .835rem !important;
  font-weight: 560 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
}

.sidebar .nav-nested > summary:hover {
  background: rgba(255,255,255,.075) !important;
  color: #ffffff !important;
}

.sidebar .nav-nested > summary::-webkit-details-marker {
  display: none !important;
}

.sidebar .nav-nested > summary::marker {
  content: '' !important;
  font-size: 0 !important;
}

/* Verwijder oude pseudo-pijlen zodat er geen dubbele pijl terugkomt */
.sidebar .nav-nested > summary::before,
.sidebar .nav-nested > summary::after {
  content: none !important;
  display: none !important;
}

.sidebar .nav-nested > summary > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 0 !important;
}

/* Eén subtiele caret via auth.js markup */
.sidebar .nav-nested > summary .nav-caret {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  margin-left: 10px !important;
  border-right: 1.5px solid rgba(198,213,236,.66) !important;
  border-bottom: 1.5px solid rgba(198,213,236,.66) !important;
  transform: rotate(-45deg) !important;
  transition: transform .16s ease, border-color .16s ease !important;
}

.sidebar .nav-nested[open] > summary .nav-caret {
  transform: rotate(45deg) !important;
}

.sidebar .nav-nested:not([open]) > div {
  display: none !important;
}

.sidebar .nav-nested[open] > div {
  display: grid !important;
  gap: 2px !important;
  margin: 2px 0 4px 10px !important;
  padding: 0 0 0 10px !important;
  border-left: 1px solid rgba(148,163,184,.20) !important;
}

.sidebar .nav-nested[open] > div > a {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  color: rgba(235,242,255,.76) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: .815rem !important;
  font-weight: 500 !important;
}

.sidebar .nav-nested[open] > div > a:hover,
.sidebar .nav-nested[open] > div > a.active {
  background: rgba(255,255,255,.075) !important;
  color: #ffffff !important;
}


/* ===== Fase 3B: Boekhouder toegang ===== */
.bookkeeper-access-intro,
.bookkeeper-access-grid .card {
  overflow: hidden;
}

.bookkeeper-access-grid {
  grid-template-columns: minmax(320px, .95fr) minmax(360px, 1.25fr);
  align-items: start;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: rgba(15, 23, 42, .025);
}

.permissions-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .58);
  font-weight: 700;
  color: var(--text);
}

.permissions-grid input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.small-note {
  margin-top: 8px;
  font-size: .86rem;
}

.bookkeeper-access-list {
  display: grid;
  gap: 12px;
}

.bookkeeper-access-item {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.bookkeeper-access-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bookkeeper-access-main h3 {
  margin: 0 0 3px;
  font-family: var(--heading-font);
}

.bookkeeper-access-meta,
.permission-chips,
.bookkeeper-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.bookkeeper-access-meta span,
.permission-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
}

.permission-chips span {
  background: rgba(37, 99, 235, .09);
  color: var(--text);
}

.btn.danger {
  border-color: rgba(220, 38, 38, .28);
  color: #b91c1c;
  background: rgba(254, 226, 226, .72);
}

.btn.danger:hover {
  border-color: rgba(220, 38, 38, .42);
  background: rgba(254, 202, 202, .86);
}

html[data-theme="dark"] .permissions-grid,
html[data-theme="dark"] .bookkeeper-access-item {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .54);
}

html[data-theme="dark"] .permissions-grid label {
  background: rgba(15, 23, 42, .68);
}

html[data-theme="dark"] .permission-chips span {
  background: rgba(96, 165, 250, .15);
  color: #dbeafe;
}

@media (max-width: 1040px) {
  .bookkeeper-access-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .permissions-grid {
    grid-template-columns: 1fr;
  }
  .bookkeeper-access-main {
    display: grid;
  }
  .bookkeeper-access-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   FASE 3B v7 - Navigatie verfijning Basisgegevens
   - zichtbare caret/pijltjes voor details/dropdowns
   - Producten / diensten weer als enkele knop
   - submenu links rustiger, zonder geselecteerde tekst-look
   ========================================================= */
.sidebar .nav-group > summary,
.sidebar .nav-nested > summary {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.sidebar .nav-group > summary::before,
.sidebar .nav-group > summary::after,
.sidebar .nav-nested > summary::before,
.sidebar .nav-nested > summary::after {
  content: none !important;
  display: none !important;
}

.sidebar .nav-group > summary .nav-group-title,
.sidebar .nav-nested > summary > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 0 !important;
}

.sidebar .nav-group > summary .nav-caret,
.sidebar .nav-nested > summary .nav-caret {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  margin-left: auto !important;
  border-right: 1.5px solid rgba(198,213,236,.68) !important;
  border-bottom: 1.5px solid rgba(198,213,236,.68) !important;
  transform: rotate(-45deg) !important;
  transition: transform .16s ease, border-color .16s ease !important;
}

.sidebar .nav-group[open] > summary .nav-caret,
.sidebar .nav-nested[open] > summary .nav-caret {
  transform: rotate(45deg) !important;
}

.sidebar .nav-group > summary:hover .nav-caret,
.sidebar .nav-nested > summary:hover .nav-caret {
  border-color: rgba(255,255,255,.9) !important;
}

.sidebar .nav-sublinks > a[data-nav="producten"] {
  margin-top: 3px !important;
}

.sidebar .nav-sublinks > a[data-nav="producten"].active,
.sidebar .nav-sublinks > a[data-nav="klanten"].active,
.sidebar .nav-sublinks > a[data-nav="klanten-nieuw"].active,
.sidebar .nav-sublinks > a[data-nav="klanten-importeren"].active {
  background: rgba(26,159,232,.16) !important;
  color: #ffffff !important;
}

/* =========================================================
   Fase 3B.1 - Modulebeheer basislaag/pro-modules
   ========================================================= */
.module-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}
.module-group-head h3{margin:0!important}
.module-group-head span{
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
}
.module-group-core .module-toggle-group{
  background:rgba(26,159,232,.06);
  border:1px solid rgba(26,159,232,.18);
  border-radius:16px;
  padding:10px;
}
.module-toggle-card-locked{
  cursor:default!important;
  background:rgba(26,159,232,.055)!important;
  border-color:rgba(26,159,232,.24)!important;
}
.module-toggle-card-locked:hover{
  box-shadow:none!important;
}
.module-toggle-card-locked input{
  cursor:not-allowed!important;
}
.module-badge{
  display:inline-flex;
  align-items:center;
  margin-left:7px;
  padding:3px 7px;
  border-radius:999px;
  font-size:.68rem;
  line-height:1;
  font-weight:900;
  vertical-align:middle;
}
.module-badge.system{
  color:#0f5d86;
  background:rgba(26,159,232,.14);
  border:1px solid rgba(26,159,232,.22);
}
.module-badge.pro{
  color:#7a4b00;
  background:rgba(245,158,11,.16);
  border:1px solid rgba(245,158,11,.25);
}
.module-dependency{
  display:block!important;
  margin-top:7px!important;
  color:#4f6f95!important;
  font-weight:800!important;
}
.module-business-summary{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.module-locked-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
html[data-theme="dark"] .module-group-core .module-toggle-group{
  background:rgba(26,159,232,.08)!important;
  border-color:rgba(26,159,232,.22)!important;
}
html[data-theme="dark"] .module-toggle-card-locked{
  background:#0d1d33!important;
  border-color:#24415f!important;
}
html[data-theme="dark"] .module-badge.system{
  color:#bde6ff!important;
  background:rgba(26,159,232,.18)!important;
  border-color:rgba(125,211,252,.24)!important;
}
html[data-theme="dark"] .module-badge.pro{
  color:#ffe1a8!important;
  background:rgba(245,158,11,.16)!important;
  border-color:rgba(245,158,11,.24)!important;
}
html[data-theme="dark"] .module-dependency{
  color:#9fbae2!important;
}
html[data-theme="dark"] .module-business-summary{
  border-top-color:#263852!important;
}

/* Fase 3C.0 - update- en cachebeheer */
.ag-update-banner{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:9999;
  width:min(720px,calc(100% - 28px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(26,159,232,.24);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 50px rgba(13,27,62,.18);
  backdrop-filter:blur(12px);
}
.ag-update-banner--reload{border-color:rgba(26,74,158,.28)}
.ag-update-banner-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-update-banner-copy strong{font-size:.95rem;color:var(--text)}
.ag-update-banner-copy span{font-size:.86rem;color:var(--muted)}
.ag-update-banner-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ag-update-banner-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:.84rem;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.ag-update-banner-btn--primary{background:var(--blue);border-color:var(--blue);color:#fff}
.ag-update-banner-close{
  border:0;
  background:rgba(13,27,62,.08);
  color:var(--muted);
  width:30px;
  height:30px;
  border-radius:999px;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}
.updates-card{max-width:920px}
.updates-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.updates-list{display:grid;gap:12px;margin-top:18px;padding-left:0;list-style:none}
.updates-list li{position:relative;padding:12px 14px 12px 42px;border:1px solid var(--line);border-radius:14px;background:rgba(26,159,232,.05);color:var(--text)}
.updates-list li::before{content:'✓';position:absolute;left:14px;top:12px;width:18px;height:18px;border-radius:999px;background:rgba(23,131,77,.12);color:var(--ok);display:grid;place-items:center;font-size:.75rem;font-weight:900}

html[data-theme="dark"] .ag-update-banner{background:rgba(13,27,62,.96);border-color:rgba(123,211,255,.22);box-shadow:0 18px 50px rgba(0,0,0,.38)}
html[data-theme="dark"] .ag-update-banner-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#ecf5ff}
html[data-theme="dark"] .ag-update-banner-btn--primary{background:var(--blue);border-color:var(--blue);color:#fff}
html[data-theme="dark"] .ag-update-banner-close{background:rgba(255,255,255,.12);color:#c9d8ea}
html[data-theme="dark"] .updates-list li{background:rgba(26,159,232,.08);border-color:rgba(255,255,255,.1);color:#ecf5ff}

@media (max-width:700px){
  .ag-update-banner{align-items:flex-start;flex-direction:column;bottom:12px;padding:13px;width:calc(100% - 20px)}
  .ag-update-banner-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .ag-update-banner-btn{flex:1;text-align:center}
  .updates-head{flex-direction:column}
}

/* Fase 3C - Boekhouderportaal */
.bookkeeper-dashboard-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;width:100%}
.bookkeeper-dashboard-card .bookkeeper-section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.bookkeeper-page-root{display:block}
.bookkeeper-client-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;width:100%}
.bookkeeper-client-card{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm)}
.bookkeeper-client-card h2{margin:10px 0 4px;font-size:1.18rem}
.bookkeeper-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bookkeeper-card-stats div{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(148,163,184,.08)}
.bookkeeper-card-stats strong{display:block;font-size:1.15rem}
.bookkeeper-card-stats span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
.bookkeeper-rights-line{font-size:.86rem;color:var(--muted);line-height:1.45;margin:0}
.bookkeeper-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.bookkeeper-readonly-note{border:1px solid rgba(56,189,248,.28);background:rgba(14,165,233,.10);color:var(--info-text,#bfdbfe);padding:12px 14px;border-radius:14px;margin-bottom:14px;line-height:1.45}
.readonly-actions{display:flex;gap:8px;flex-wrap:wrap}
.bookkeeper-readonly-modal{max-width:860px;width:min(860px,calc(100vw - 28px));text-align:left}
.bookkeeper-readonly-modal .table{margin-top:14px}
.bookkeeper-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.bookkeeper-modal-head h3{margin:4px 0 0;font-size:1.35rem}
.bookkeeper-modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.bookkeeper-modal-grid div{border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(148,163,184,.08)}
.bookkeeper-modal-grid strong{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.bookkeeper-modal-grid span{font-weight:700}
.empty-state{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:24px;text-align:center}
.empty-state h2{margin-bottom:8px}
.bookkeeper-export-card .bookkeeper-export-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.bookkeeper-export-card .bookkeeper-export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:14px}
.bookkeeper-export-status{margin-top:14px;border-radius:14px;padding:12px 14px;border:1px solid var(--border);background:rgba(148,163,184,.08)}
.bookkeeper-export-status.success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
.bookkeeper-export-status.error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.bookkeeper-export-status.info{border-color:rgba(56,189,248,.35);background:rgba(14,165,233,.10)}
@media (max-width: 760px){.bookkeeper-card-stats{grid-template-columns:1fr}.bookkeeper-export-card .bookkeeper-export-head{flex-direction:column}.bookkeeper-dashboard-actions .btn{width:100%;justify-content:center}}

/* ===== Fase 3B.2: urenregistratie + factuurregels ===== */
.hours-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.hours-stat-card {
  padding: 18px 20px;
}

.hours-page-grid {
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.42fr);
}

.hours-page-grid > .card {
  min-width: 0;
}

.hours-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.hours-table-scroll .table {
  min-width: 920px;
}

.hours-table td:nth-child(5) {
  max-width: 280px;
  white-space: normal;
}

.hours-table .actions-cell .safe-action-select {
  min-width: 122px;
  max-width: 150px;
}

.status-pill.concept {
  background: rgba(59,130,246,.13);
  color: #2563eb;
  border-color: rgba(59,130,246,.25);
}

.status-pill.muted {
  background: rgba(100,116,139,.14);
  color: #64748b;
  border-color: rgba(100,116,139,.25);
}

.invoice-hours-hint {
  margin-top: -4px;
  margin-bottom: 14px;
}

.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(5px);
}

.portal-modal-card {
  width: min(980px, 100%);
  max-height: min(82vh, 820px);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 24px 80px rgba(2, 6, 23, .34);
  padding: 22px;
}

.invoice-hours-list {
  margin-top: 12px;
}

.invoice-hours-table {
  min-width: 760px;
}

.invoice-hours-table td:nth-child(4) {
  max-width: 360px;
  white-space: normal;
}

html[data-theme="dark"] .portal-modal-backdrop {
  background: rgba(0, 0, 0, .62);
}

html[data-theme="dark"] .portal-modal-card {
  background: #0f1b2e;
  border-color: #263852;
}

html[data-theme="dark"] .status-pill.concept {
  background: rgba(59,130,246,.16);
  color: #bfdbfe;
  border-color: rgba(59,130,246,.34);
}

html[data-theme="dark"] .status-pill.muted {
  background: rgba(148,163,184,.14);
  color: #cbd5e1;
  border-color: rgba(148,163,184,.24);
}

@media (max-width: 1180px) {
  .hours-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hours-stat-grid {
    grid-template-columns: 1fr;
  }

  .portal-modal-backdrop {
    align-items: flex-start;
    padding: 12px;
  }

  .portal-modal-card {
    max-height: calc(100vh - 24px);
    padding: 16px;
    border-radius: 16px;
  }
}
.status-pill.warn{background:#fff4df;color:var(--warn);border-color:rgba(245,158,11,.25)}
html[data-theme="dark"] .status-pill.warn{background:rgba(245,158,11,.16);color:#ffd789;border-color:rgba(245,158,11,.32)}

/* Fase 3B.2 fix v15 - compact urenoverzicht + stabiele updatebanner */
.hours-table-scroll {
  overflow-x: visible;
}
.hours-table-scroll .table.hours-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
.hours-table th,
.hours-table td {
  padding: 12px 10px;
  vertical-align: middle;
}
.hours-table th:nth-child(1),
.hours-table td:nth-child(1) { width: 34px; }
.hours-table th:nth-child(2),
.hours-table td:nth-child(2) { width: 92px; }
.hours-table th:nth-child(3),
.hours-table td:nth-child(3) { width: 132px; }
.hours-table th:nth-child(4),
.hours-table td:nth-child(4) { width: 86px; }
.hours-table th:nth-child(5),
.hours-table td:nth-child(5) { width: auto; max-width: none; }
.hours-table th:nth-child(6),
.hours-table td:nth-child(6) { width: 64px; text-align: right; }
.hours-table th:nth-child(7),
.hours-table td:nth-child(7) { width: 88px; text-align: right; }
.hours-table th:nth-child(8),
.hours-table td:nth-child(8) { width: 124px; }
.hours-table th:nth-child(9),
.hours-table td:nth-child(9) { width: 96px; }
.hours-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hours-table .status-pill {
  padding: 7px 10px;
  font-size: .78rem;
  line-height: 1.15;
  white-space: nowrap;
}
.hours-table .actions-cell .safe-action-select {
  min-width: 0;
  width: 86px;
  max-width: 86px;
  padding: 9px 28px 9px 10px;
}

@media (max-width: 980px) {
  .hours-table-scroll { overflow-x: auto; }
  .hours-table-scroll .table.hours-table { min-width: 760px; }
}

/* Fase 3B.2 fix v16 - urenoverzicht zonder horizontale scroll op desktop */
.hours-table-scroll {
  overflow-x: visible;
  border-radius: 16px;
}
.hours-table-scroll .table.hours-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.hours-table th,
.hours-table td {
  padding: 10px 8px;
  font-size: .88rem;
  vertical-align: middle;
}
.hours-table th:nth-child(1),
.hours-table td:nth-child(1) { width: 30px; }
.hours-table th:nth-child(2),
.hours-table td:nth-child(2) { width: 84px; white-space: nowrap; }
.hours-table th:nth-child(3),
.hours-table td:nth-child(3) { width: 120px; }
.hours-table th:nth-child(4),
.hours-table td:nth-child(4) { width: auto; }
.hours-table th:nth-child(5),
.hours-table td:nth-child(5) { width: 54px; text-align: right; }
.hours-table th:nth-child(6),
.hours-table td:nth-child(6) { width: 78px; text-align: right; }
.hours-table th:nth-child(7),
.hours-table td:nth-child(7) { width: 108px; }
.hours-table th:nth-child(8),
.hours-table td:nth-child(8) { width: 76px; }
.hours-description-cell,
.hours-customer-cell {
  overflow: hidden;
}
.hours-desc-main,
.hours-customer-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-desc-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: .76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-number-cell,
.hours-money-cell,
.hours-date-cell {
  white-space: nowrap;
}
.hours-table .status-pill {
  max-width: 100%;
  justify-content: center;
  padding: 6px 8px;
  font-size: .72rem;
  line-height: 1.1;
  white-space: nowrap;
}
.hours-table .actions-cell .safe-action-select {
  width: 68px;
  max-width: 68px;
  min-width: 0;
  padding: 8px 24px 8px 9px;
  font-size: .82rem;
}
@media (max-width: 1280px) {
  .hours-page-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .hours-table-scroll {
    overflow-x: auto;
  }
  .hours-table-scroll .table.hours-table {
    min-width: 680px;
  }
}

/* Fase 3B.2 fix v17 - professioneel urenoverzicht zonder tabel-scroll */
.hours-overview-card .compact-filters {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}
.hours-overview-card .phase2-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 14px;
}
.hours-overview-card #createInvoiceFromHours {
  min-height: 42px;
  padding-inline: 16px;
  white-space: normal;
}
.hours-list {
  display: grid;
  gap: 10px;
  width: 100%;
}
.hours-list-row {
  display: grid;
  grid-template-columns: 26px minmax(180px, 1fr) 66px 88px 112px 78px;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  min-width: 0;
}
.hours-list-select {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hours-list-select input {
  width: 16px;
  height: 16px;
}
.hours-list-main {
  min-width: 0;
}
.hours-list-title {
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-list-desc {
  margin-top: 3px;
  font-size: .92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-list-meta {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-list-value {
  display: grid;
  gap: 2px;
  justify-items: end;
  white-space: nowrap;
}
.hours-list-value span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 900;
}
.hours-list-value strong {
  font-size: .92rem;
  font-weight: 900;
}
.hours-list-status {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}
.hours-list-status .status-pill {
  max-width: 100%;
  padding: 7px 10px;
  font-size: .74rem;
  line-height: 1.05;
  white-space: nowrap;
}
.hours-list-action .safe-action-select {
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  padding: 8px 24px 8px 10px;
  font-size: .82rem;
}
.hours-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255,255,255,.35);
}
html[data-theme="dark"] .hours-list-row,
html[data-theme="dark"] .hours-empty {
  background: rgba(15, 27, 46, .74);
  border-color: #263852;
}
@media (max-width: 860px) {
  .hours-overview-card .compact-filters {
    grid-template-columns: 1fr;
  }
  .hours-list-row {
    grid-template-columns: 26px minmax(0, 1fr) 84px;
    gap: 10px;
  }
  .hours-list-main {
    grid-column: 2 / 4;
  }
  .hours-list-value {
    justify-items: start;
    grid-column: span 1;
  }
  .hours-list-status,
  .hours-list-action {
    grid-column: span 1;
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .hours-list-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .hours-list-main,
  .hours-list-value,
  .hours-list-status,
  .hours-list-action {
    grid-column: 2 / 3;
  }
  .hours-list-value {
    justify-items: start;
  }
  .hours-list-action .safe-action-select {
    width: 100%;
    max-width: 220px;
  }
  .hours-overview-card #createInvoiceFromHours {
    width: 100%;
    justify-content: center;
  }
}


/* Fase 3B.2 fix v18 - urenoverzicht stabiel binnen kaart */
.hours-overview-card {
  overflow: hidden;
}
.hours-overview-card .compact-filters {
  grid-template-columns: minmax(190px, 260px) minmax(260px, 1fr);
  gap: 14px;
}
.hours-overview-card .phase2-inline-actions {
  align-items: center;
  gap: 12px;
}
.hours-overview-card #createInvoiceFromHours {
  max-width: 420px;
}
.hours-list {
  display: grid;
  gap: 10px;
  width: 100%;
}
.hours-list-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) minmax(320px, 370px) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.hours-list-select {
  min-width: 0;
}
.hours-list-main {
  min-width: 0 !important;
  overflow: hidden !important;
}
.hours-list-title,
.hours-list-desc,
.hours-list-meta {
  max-width: 100%;
}
.hours-list-side {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px 74px minmax(88px, auto) 88px;
  gap: 10px;
  align-items: center;
  justify-content: end;
}
.hours-list-value {
  min-width: 0;
  justify-items: end;
}
.hours-list-value span {
  font-size: .64rem;
}
.hours-list-value strong {
  font-size: .9rem;
}
.hours-list-status {
  min-width: 0;
  justify-content: flex-end !important;
}
.hours-list-status .status-pill {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 7px 9px !important;
  font-size: .72rem !important;
}
.hours-list-action {
  min-width: 0;
  width: 88px;
  justify-self: end;
}
.hours-list-action select.safe-action-select,
.hours-list-action .safe-action-select,
html[data-theme="dark"] .hours-list-action select.safe-action-select,
html[data-theme="dark"] .hours-list-action .safe-action-select {
  width: 88px !important;
  min-width: 0 !important;
  max-width: 88px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 30px 0 12px !important;
  border-radius: 14px !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
  background-position: right 10px center !important;
}
@media (max-width: 1180px) {
  .hours-list-row {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }
  .hours-list-side {
    grid-column: 2 / 3;
    justify-content: start;
    grid-template-columns: 54px 74px minmax(88px, auto) 88px;
    margin-top: 8px;
  }
}
@media (max-width: 760px) {
  .hours-overview-card .compact-filters {
    grid-template-columns: 1fr;
  }
  .hours-overview-card #createInvoiceFromHours {
    width: 100%;
    max-width: none;
  }
  .hours-list-row {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    padding: 13px !important;
  }
  .hours-list-side {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  .hours-list-value {
    justify-items: start;
  }
  .hours-list-status {
    justify-content: flex-start !important;
  }
  .hours-list-action {
    justify-self: start;
  }
}


/* Fase 3B.2 fix v19 - urenoverzicht compact met alle info zichtbaar */
.hours-list-row.hours-list-row-v19 {
  display: grid !important;
  grid-template-columns: 28px minmax(170px, 1.15fr) minmax(122px, .72fr) 58px 86px 112px 88px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.hours-list-row-v19 .hours-list-main {
  min-width: 0 !important;
  overflow: hidden !important;
}
.hours-list-row-v19 .hours-list-title,
.hours-list-row-v19 .hours-list-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-list-row-v19 .hours-list-extra {
  min-width: 0;
  display: grid;
  gap: 2px;
  align-content: center;
}
.hours-list-row-v19 .hours-list-extra span,
.hours-list-row-v19 .hours-list-value span {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 900;
  line-height: 1.1;
}
.hours-list-row-v19 .hours-list-extra strong {
  font-size: .84rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-list-row-v19 .hours-list-extra em {
  font-style: normal;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-list-row-v19 .hours-list-value {
  min-width: 0;
  justify-items: start !important;
  text-align: left;
}
.hours-list-row-v19 .hours-list-value strong {
  font-size: .9rem;
  line-height: 1.15;
  white-space: nowrap;
}
.hours-list-row-v19 .hours-list-status {
  justify-content: flex-start !important;
}
.hours-list-row-v19 .hours-list-status .status-pill {
  max-width: 112px !important;
  padding: 7px 9px !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}
.hours-list-row-v19 .hours-list-action {
  width: 88px !important;
  justify-self: end !important;
}
.hours-list-row-v19 .hours-list-action select.safe-action-select,
.hours-list-row-v19 .hours-list-action .safe-action-select,
html[data-theme="dark"] .hours-list-row-v19 .hours-list-action select.safe-action-select,
html[data-theme="dark"] .hours-list-row-v19 .hours-list-action .safe-action-select {
  width: 88px !important;
  max-width: 88px !important;
  min-width: 0 !important;
}
@media (max-width: 1100px) {
  .hours-list-row.hours-list-row-v19 {
    grid-template-columns: 28px minmax(170px, 1fr) minmax(116px, .72fr) 54px 80px !important;
  }
  .hours-list-row-v19 .hours-list-status {
    grid-column: 3 / 4;
  }
  .hours-list-row-v19 .hours-list-action {
    grid-column: 4 / 6;
    justify-self: end !important;
  }
}
@media (max-width: 820px) {
  .hours-list-row.hours-list-row-v19 {
    grid-template-columns: 26px minmax(0, 1fr) minmax(96px, auto) !important;
    gap: 10px !important;
  }
  .hours-list-row-v19 .hours-list-main {
    grid-column: 2 / 4;
  }
  .hours-list-row-v19 .hours-list-extra,
  .hours-list-row-v19 .hours-list-value-hours,
  .hours-list-row-v19 .hours-list-value-amount,
  .hours-list-row-v19 .hours-list-status,
  .hours-list-row-v19 .hours-list-action {
    grid-column: 2 / 4;
  }
  .hours-list-row-v19 .hours-list-action {
    justify-self: start !important;
  }
}

/* ===== Fase 3C v21: boekhouder UX polish ===== */
html,
body{
  background:#08111f;
}

html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body{
  background:var(--bg);
}

.bookkeeper-count-pill{
  display:inline-flex;
  align-items:flex-start;
  flex-direction:column;
  gap:3px;
  min-width:150px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.bookkeeper-count-pill span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.15;
}
.bookkeeper-count-pill strong{
  color:var(--text);
  font-size:1rem;
  line-height:1.2;
  white-space:nowrap;
}

.bookkeeper-client-grid{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;
  gap:18px!important;
}
.bookkeeper-client-card{
  padding:20px!important;
  gap:16px!important;
  border-color:var(--line)!important;
}
.bookkeeper-client-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.bookkeeper-client-title h2{
  margin:8px 0 4px!important;
  line-height:1.18;
}
.bookkeeper-client-title p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}
.bookkeeper-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.28);
  color:#15803d;
  font-size:.78rem;
  font-weight:900;
}
.bookkeeper-status-pill::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
}
.bookkeeper-card-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.bookkeeper-card-stats div{
  padding:12px!important;
  min-width:0;
}
.bookkeeper-card-stats strong{
  font-size:1.08rem!important;
  line-height:1.2;
  white-space:nowrap;
}
.bookkeeper-card-footer{
  display:grid;
  gap:12px;
  padding-top:2px;
}
.bookkeeper-rights-line{
  margin:0!important;
  color:var(--muted)!important;
}
.bookkeeper-rights-line strong{
  color:var(--text);
}
.bookkeeper-card-actions{
  margin-top:0!important;
}
.bookkeeper-card-actions .btn{
  min-width:110px;
}

.bookkeeper-client-picker{
  min-width:min(360px,100%);
  align-self:flex-start;
}
.bookkeeper-client-picker small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.25;
}
.bookkeeper-client-picker select{
  min-width:260px;
}

/* Duidelijke dropdown-pijltjes in sidebar voor ondernemer én boekhouder */
.sidebar .nav-group > summary .nav-caret,
.sidebar .nav-nested > summary .nav-caret{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  margin-left:auto!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:rgba(219,234,254,.82)!important;
  transform:none!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
.sidebar .nav-group > summary .nav-caret::before,
.sidebar .nav-nested > summary .nav-caret::before{
  content:'›';
  display:block;
  font-size:18px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .16s ease;
}
.sidebar .nav-group[open] > summary .nav-caret::before,
.sidebar .nav-nested[open] > summary .nav-caret::before{
  transform:rotate(90deg);
}
.sidebar .nav-group > summary:hover .nav-caret,
.sidebar .nav-nested > summary:hover .nav-caret{
  background:rgba(26,159,232,.18)!important;
  color:#fff!important;
}

html[data-theme="dark"] .bookkeeper-count-pill,
html[data-theme="dark"] .bookkeeper-client-card,
html[data-theme="dark"] .bookkeeper-card-stats div,
html[data-theme="dark"] .bookkeeper-client-picker{
  background:#0f1b2e!important;
  border-color:#26354f!important;
  color:#ecf5ff!important;
}
html[data-theme="dark"] .bookkeeper-status-pill{
  background:rgba(34,197,94,.13)!important;
  border-color:rgba(34,197,94,.34)!important;
  color:#86efac!important;
}
html[data-theme="dark"] .bookkeeper-client-title p,
html[data-theme="dark"] .bookkeeper-client-picker small,
html[data-theme="dark"] .bookkeeper-rights-line,
html[data-theme="dark"] .bookkeeper-count-pill span{
  color:#9fb0c9!important;
}

@media(max-width:900px){
  .bookkeeper-count-pill{width:100%}
  .bookkeeper-client-picker{width:100%}
  .bookkeeper-client-picker select{min-width:0;width:100%}
}
@media(max-width:640px){
  .bookkeeper-client-grid{grid-template-columns:1fr!important}
  .bookkeeper-card-stats{grid-template-columns:1fr!important}
  .bookkeeper-card-actions .btn{width:100%}
}


/* =========================================================
   Fase 3C v22 - exportfilter + zichtbare menu-pijltjes
   ========================================================= */
.bookkeeper-export-grid .field-hint{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.35;
}
.bookkeeper-export-grid select,
.bookkeeper-export-grid input[type="date"]{
  width:100%;
}
.sidebar .nav-group > summary,
.sidebar .nav-nested > summary{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.sidebar .nav-group > summary .nav-caret,
.sidebar .nav-nested > summary .nav-caret{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin-left:auto!important;
  border:1px solid rgba(148,163,184,.20)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  color:rgba(219,234,254,.90)!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:900!important;
  transform:rotate(0deg)!important;
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease!important;
}
.sidebar .nav-group > summary .nav-caret::before,
.sidebar .nav-nested > summary .nav-caret::before{
  content:none!important;
  display:none!important;
}
.sidebar .nav-group[open] > summary .nav-caret,
.sidebar .nav-nested[open] > summary .nav-caret{
  transform:rotate(90deg)!important;
  background:rgba(26,159,232,.16)!important;
  border-color:rgba(26,159,232,.35)!important;
  color:#fff!important;
}
.sidebar .nav-group > summary:hover .nav-caret,
.sidebar .nav-nested > summary:hover .nav-caret{
  background:rgba(26,159,232,.22)!important;
  border-color:rgba(26,159,232,.45)!important;
  color:#fff!important;
}


/* =========================================================
   Fase 3C v23 - rustige exportpagina + subtiele menu-caret
   ========================================================= */
.sidebar .nav-group > summary .nav-caret,
.sidebar .nav-nested > summary .nav-caret{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  margin-left:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(203,213,225,.72)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  transform:rotate(0deg)!important;
  transition:transform .16s ease,color .16s ease!important;
}
.sidebar .nav-group > summary .nav-caret::before,
.sidebar .nav-nested > summary .nav-caret::before,
.sidebar .nav-group > summary::after,
.sidebar .nav-nested > summary::after{
  content:none!important;
  display:none!important;
}
.sidebar .nav-group[open] > summary .nav-caret,
.sidebar .nav-nested[open] > summary .nav-caret{
  transform:rotate(180deg)!important;
  background:transparent!important;
  border:0!important;
  color:#dbeafe!important;
}
.sidebar .nav-group > summary:hover .nav-caret,
.sidebar .nav-nested > summary:hover .nav-caret{
  background:transparent!important;
  border:0!important;
  color:#fff!important;
}

.bookkeeper-export-card-clean{
  padding:24px!important;
}
.bookkeeper-export-card-clean .bookkeeper-export-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:22px!important;
}
.bookkeeper-export-card-clean .bookkeeper-export-head h2{
  margin:0 0 6px!important;
}
.bookkeeper-export-card-clean .bookkeeper-export-head .muted{
  margin:0!important;
  max-width:720px!important;
  line-height:1.55!important;
}
.bookkeeper-export-grid-clean{
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) minmax(220px,1.1fr) minmax(170px,.9fr) minmax(170px,.9fr)!important;
  gap:14px!important;
  align-items:end!important;
}
.bookkeeper-export-grid-clean .field{
  min-width:0!important;
}
.bookkeeper-export-grid-clean label{
  margin-bottom:7px!important;
}
.bookkeeper-export-grid-clean select,
.bookkeeper-export-grid-clean input[type="date"]{
  min-height:46px!important;
}
.bookkeeper-export-card-clean .bookkeeper-export-status{
  margin-top:16px!important;
}
.bookkeeper-readonly-note,
.bookkeeper-export-grid .field-hint{
  display:none!important;
}
@media(max-width:1050px){
  .bookkeeper-export-grid-clean{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:700px){
  .bookkeeper-export-card-clean .bookkeeper-export-head{
    display:grid!important;
  }
  .bookkeeper-export-card-clean .bookkeeper-export-actions,
  .bookkeeper-export-card-clean .bookkeeper-export-actions .btn{
    width:100%!important;
  }
  .bookkeeper-export-grid-clean{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Fase 4.0A v25 - UI/UX fundament, compacter portaal + mobiel menu
   ========================================================= */
:root{
  --radius:14px;
  --shadow:0 6px 18px rgba(13,27,62,.065);
}
.main{
  max-width:1320px!important;
  padding:22px!important;
}
.topbar{
  gap:12px!important;
  margin-bottom:18px!important;
}
.topbar h1{
  font-size:1.48rem!important;
  line-height:1.15!important;
  letter-spacing:-.025em!important;
}
.topbar .muted,
.section-title-row .muted{
  line-height:1.45!important;
}
.grid{gap:14px!important;}
.grid.cards{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
.card{
  padding:18px!important;
  border-radius:14px!important;
  box-shadow:0 6px 18px rgba(13,27,62,.055)!important;
}
.card h2{
  font-size:1.08rem!important;
  line-height:1.22!important;
}
.card h3{
  font-size:.98rem!important;
}
.stat-num{
  font-size:1.42rem!important;
  line-height:1.05!important;
}
.stat-label{
  font-size:.78rem!important;
  line-height:1.25!important;
}
.dashboard-stat-sub{
  font-size:.68rem!important;
}
.btn{
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:9px!important;
  font-size:.86rem!important;
}
.actions{
  gap:8px!important;
  margin:14px 0!important;
}
.field{gap:5px!important;}
.field label{
  font-size:.76rem!important;
}
.field input,
.field select,
.field textarea{
  min-height:40px!important;
  padding:9px 11px!important;
  border-radius:9px!important;
  font-size:.9rem!important;
}
.notice,.error,.success{
  padding:11px 13px!important;
  border-radius:11px!important;
  line-height:1.45!important;
}
.table th,.table td{
  padding:10px 11px!important;
  font-size:.875rem!important;
}
.table th{
  font-size:.7rem!important;
}
.section-title-row{
  gap:10px!important;
  margin-bottom:12px!important;
}

/* Subtiele kleine v-caret in alle menu-dropdowns */
.sidebar details > summary,
.sidebar .nav-group > summary,
.sidebar .nav-nested > summary{
  list-style:none!important;
}
.sidebar details > summary::-webkit-details-marker,
.sidebar .nav-group > summary::-webkit-details-marker,
.sidebar .nav-nested > summary::-webkit-details-marker{
  display:none!important;
}
.sidebar .nav-group > summary::before,
.sidebar .nav-group > summary::after,
.sidebar .nav-nested > summary::before,
.sidebar .nav-nested > summary::after{
  content:none!important;
  display:none!important;
}
.sidebar .nav-group > summary .nav-caret,
.sidebar .nav-nested > summary .nav-caret{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  margin-left:auto!important;
  border:0!important;
  background:transparent!important;
  color:rgba(226,238,255,.62)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  transform:none!important;
  transition:transform .16s ease,color .16s ease!important;
}
.sidebar .nav-group[open] > summary .nav-caret,
.sidebar .nav-nested[open] > summary .nav-caret{
  transform:rotate(180deg)!important;
  color:rgba(255,255,255,.9)!important;
}
.sidebar .nav-group > summary:hover .nav-caret,
.sidebar .nav-nested > summary:hover .nav-caret{
  color:#fff!important;
}

/* Mobiel menu: eigen scrollpaneel, achtergrond blijft stil */
body.ag-mobile-menu-open{
  overflow:hidden!important;
  touch-action:none!important;
}
@media(max-width:900px){
  .sidebar{
    max-height:72px!important;
    overflow:visible!important;
  }
  .sidebar.is-open{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    z-index:9998!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:14px 14px 28px!important;
    border-bottom:0!important;
    box-shadow:0 18px 55px rgba(0,0,0,.28)!important;
  }
  .sidebar.is-open .brand{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    margin:-14px -14px 10px!important;
    padding:14px!important;
    background:var(--navy)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
  }
  .sidebar.is-open .navlinks,
  .sidebar.is-open .admin-action-stack{
    width:100%!important;
  }
  .sidebar.is-open .navlinks{
    display:grid!important;
    gap:3px!important;
    padding-bottom:44px!important;
  }
  .sidebar.is-open .admin-action-stack{
    display:grid!important;
    margin:8px 0 10px!important;
  }
  .main{
    padding:16px!important;
  }
  .grid.cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .main{
    padding:12px!important;
  }
  .topbar h1{
    font-size:1.24rem!important;
  }
  .topbar{
    margin-bottom:12px!important;
  }
  .grid.cards{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .card{
    padding:13px!important;
    border-radius:12px!important;
  }
  .stat-num{
    font-size:1.26rem!important;
  }
  .btn{
    min-height:36px!important;
    padding:8px 11px!important;
    font-size:.84rem!important;
  }
  .actions .btn{
    width:100%!important;
  }
  .table th,.table td{
    padding:8px 9px!important;
  }
}

/* Admin modulebeheer: minder bulky, klaar voor Fase 4 onboarding/templates */
.owner-admin-page .phase40-compact-intro{
  margin-bottom:14px!important;
}
.owner-admin-page .phase40-compact-intro .section-title-row{
  align-items:center!important;
}
.owner-admin-page .admin-subscription-mini-grid{
  gap:10px!important;
}
.owner-admin-page .admin-subscription-mini-grid > div{
  padding:12px!important;
  border-radius:12px!important;
}
.module-admin-grid{
  grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr)!important;
  gap:14px!important;
}
.module-admin-side-card h2,
.module-admin-main-card h2,
.module-presets-card h2{
  margin:0 0 10px!important;
}
.module-business-info{
  padding:12px!important;
  border-radius:12px!important;
  line-height:1.45!important;
  font-size:.86rem!important;
}
.module-business-summary{
  margin-top:9px!important;
  padding-top:9px!important;
}
.module-admin-note{
  margin-top:10px!important;
  font-size:.84rem!important;
}
.module-toggle-list{
  gap:12px!important;
}
.module-group{
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  padding:10px!important;
  background:rgba(255,255,255,.48)!important;
}
.module-group-head{
  margin:0 0 8px!important;
}
.module-group-head h3{
  font-size:.88rem!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
  font-family:Inter,system-ui,sans-serif!important;
}
.module-group-head span{
  font-size:.68rem!important;
}
.module-toggle-group{
  gap:6px!important;
}
.module-group-core .module-toggle-group{
  padding:7px!important;
  border-radius:12px!important;
}
.module-toggle-card{
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:9px!important;
  align-items:center!important;
  padding:9px 10px!important;
  border-width:1px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.module-toggle-card:hover{
  box-shadow:0 4px 12px rgba(13,27,62,.045)!important;
}
.module-toggle-card input{
  width:17px!important;
  height:17px!important;
  margin-top:0!important;
}
.module-toggle-card strong{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  font-size:.86rem!important;
  line-height:1.2!important;
}
.module-toggle-card small{
  font-size:.76rem!important;
  line-height:1.34!important;
  margin-top:2px!important;
}
.module-badge{
  margin-left:0!important;
  padding:2px 6px!important;
  font-size:.62rem!important;
}
.module-dependency{
  margin-top:3px!important;
  font-size:.7rem!important;
}
.module-presets-card{
  margin-top:14px!important;
}
.module-presets{
  gap:8px!important;
}
.module-presets .btn{
  min-height:36px!important;
}
html[data-theme="dark"] .module-group{
  background:#0b1728!important;
  border-color:#263852!important;
}
@media(max-width:1000px){
  .module-admin-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:640px){
  .owner-admin-page .phase40-compact-intro .section-title-row,
  .module-admin-main-card .section-title-row{
    display:grid!important;
  }
  .owner-admin-page .phase40-compact-intro .btn,
  .module-admin-main-card .section-title-row .btn{
    width:100%!important;
  }
  .owner-admin-page .admin-subscription-mini-grid{
    grid-template-columns:1fr!important;
  }
  .module-group{
    padding:8px!important;
  }
  .module-toggle-card{
    padding:8px!important;
  }
  .module-toggle-card small{
    display:none!important;
  }
  .module-dependency{
    display:block!important;
  }
  .module-presets .btn{
    width:100%!important;
  }
}


/* =========================================================
   Fase 4A v26 - Ondernemer onboarding
   ========================================================= */
.phase4-admin-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.admin-onboarding-page .topbar{align-items:flex-start}
.onboarding-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,.75fr);gap:16px;margin-bottom:16px}
.onboarding-form-card,.onboarding-side-card,.onboarding-list-card{border:1px solid var(--line)}
.onboarding-form{display:grid;gap:14px}
.form-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.checkbox-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.checkbox-row input{margin-top:3px}
.onboarding-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.onboarding-steps{margin:10px 0 16px;padding-left:20px;color:var(--muted);line-height:1.7}
.onboarding-toolbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.onboarding-toolbar input{min-height:40px;max-width:240px}
.onboarding-table td strong{font-size:.95rem}
.small-btn{padding:8px 10px!important;font-size:.82rem!important;min-height:auto!important}
.compact-title-row{gap:12px}
.badge.info{background:rgba(26,159,232,.12);border-color:rgba(26,159,232,.28);color:#0f79b8}
html[data-theme="dark"] .badge.info{color:#8bd6ff;background:rgba(26,159,232,.15);border-color:rgba(26,159,232,.28)}
@media(max-width:1050px){.onboarding-grid{grid-template-columns:1fr}.onboarding-side-card{order:-1}.phase4-admin-actions{justify-content:flex-start}}
@media(max-width:720px){.form-2col{grid-template-columns:1fr}.onboarding-toolbar{width:100%;justify-content:stretch}.onboarding-toolbar input,.onboarding-toolbar .btn{width:100%;max-width:none}.onboarding-actions .btn,.phase4-admin-actions .btn{width:100%}.admin-onboarding-page .card{padding:16px!important}}


/* =========================================================
   Fase 4A v28 - onboarding polish + menu bedrijfswisselaar
   ========================================================= */
.sidebar-business-switcher{
  display:grid!important;
  gap:5px!important;
  padding:8px 9px!important;
  margin:0 0 8px!important;
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.055)!important;
}
.sidebar-business-switcher label,
.sidebar-switcher-label{
  font-size:.64rem!important;
  line-height:1!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  color:rgba(226,232,240,.60)!important;
}
.sidebar-business-switcher strong{
  color:#fff!important;
  font-size:.82rem!important;
  line-height:1.22!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sidebar-business-switcher select{
  width:100%!important;
  min-height:28px!important;
  padding:0 20px 0 0!important;
  border:0!important;
  outline:0!important;
  color:#fff!important;
  background:transparent!important;
  font:inherit!important;
  font-size:.82rem!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.sidebar-business-switcher select option{color:#0f172a!important;background:#fff!important}
.sidebar .nav-group > summary .nav-caret,
.sidebar .nav-nested > summary .nav-caret{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  margin-left:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(203,213,225,.82)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  transform:rotate(0deg)!important;
  transition:transform .16s ease,color .16s ease!important;
}
.sidebar .nav-group > summary .nav-caret::before,
.sidebar .nav-nested > summary .nav-caret::before,
.sidebar .nav-group > summary::after,
.sidebar .nav-nested > summary::after{content:none!important;display:none!important}
.sidebar .nav-group[open] > summary .nav-caret,
.sidebar .nav-nested[open] > summary .nav-caret{transform:rotate(180deg)!important;color:#fff!important}
.admin-onboarding-page .onboarding-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr)!important;
  align-items:start!important;
}
.admin-onboarding-page .onboarding-form-card,
.admin-onboarding-page .onboarding-side-card,
.admin-onboarding-page .onboarding-list-card{
  box-shadow:0 10px 26px rgba(13,27,62,.055)!important;
}
.admin-onboarding-page .onboarding-form-card{padding:20px!important}
.package-preview{
  border:1px solid var(--line)!important;
  background:linear-gradient(180deg,rgba(26,159,232,.06),rgba(255,255,255,.02))!important;
  border-radius:16px!important;
  padding:13px 14px!important;
}
.package-preview-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:7px!important;
}
.package-preview-head strong,
.package-side-title{
  color:var(--text)!important;
  font-size:.96rem!important;
  font-weight:900!important;
}
.package-preview-head small{
  color:var(--muted)!important;
  font-size:.72rem!important;
  font-weight:800!important;
}
.package-preview p,
.package-side-summary p{
  margin:0 0 10px!important;
  color:var(--muted)!important;
  font-size:.86rem!important;
  line-height:1.45!important;
}
.package-module-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
.package-module-pills span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(26,159,232,.18)!important;
  background:rgba(26,159,232,.09)!important;
  color:#137ab2!important;
  font-size:.72rem!important;
  font-weight:850!important;
}
.package-module-pills.compact span{font-size:.7rem!important;padding:3px 7px!important}
.onboarding-polish-card{padding:18px!important}
.onboarding-polish-card h2{margin-bottom:8px!important}
.onboarding-polish-card > .muted{margin-bottom:14px!important;line-height:1.5!important}
.checkbox-row{padding:9px 11px!important;border-radius:12px!important;font-size:.88rem!important}
@media(max-width:900px){
  .sidebar.is-open{
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  .sidebar.is-open .navlinks{
    max-height:calc(100dvh - 88px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    padding-right:2px!important;
  }
  .sidebar-business-switcher{margin-top:2px!important}
  .sidebar .nav-group > summary .nav-caret,
  .sidebar .nav-nested > summary .nav-caret{display:inline-flex!important;opacity:1!important;visibility:visible!important}
}
@media(max-width:1050px){
  .admin-onboarding-page .onboarding-grid{grid-template-columns:1fr!important}
  .admin-onboarding-page .onboarding-side-card{order:0!important}
}
@media(max-width:720px){
  .admin-onboarding-page .onboarding-form-card{padding:15px!important}
  .package-preview-head{display:grid!important;gap:4px!important}
  .package-preview-head small{font-size:.68rem!important}
  .package-preview{padding:11px!important;border-radius:13px!important}
  .package-module-pills span{font-size:.68rem!important;min-height:22px!important}
}
html[data-theme="dark"] .package-preview{
  background:linear-gradient(180deg,rgba(26,159,232,.12),rgba(15,27,46,.55))!important;
  border-color:#263852!important;
}
html[data-theme="dark"] .package-module-pills span{color:#9bdcff!important;background:rgba(26,159,232,.14)!important;border-color:rgba(26,159,232,.28)!important}


/* =========================================================
   Fase 4A v31 - Pakketoverzicht verwijderd
   ========================================================= */
.admin-onboarding-page .onboarding-grid{
  grid-template-columns:1fr!important;
}
.admin-onboarding-page .onboarding-form-card{
  max-width:none!important;
}
.admin-onboarding-page .package-preview{
  margin-top:4px!important;
}


/* =========================================================
   Fase 4A v32 - ondernemerslijst acties
   ========================================================= */
.onboarding-row-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.onboarding-row-actions .small-btn{
  min-height:34px!important;
  padding:8px 11px!important;
  white-space:nowrap;
}
.onboarding-row-actions .small-btn.danger{
  border-color:rgba(180,35,24,.35)!important;
  color:var(--bad)!important;
  background:rgba(180,35,24,.06)!important;
}
.onboarding-row-actions .small-btn.danger:hover{
  border-color:rgba(180,35,24,.55)!important;
  background:rgba(180,35,24,.11)!important;
}
html[data-theme="dark"] .onboarding-row-actions .small-btn.danger{
  border-color:rgba(248,113,113,.35)!important;
  color:#fecaca!important;
  background:rgba(127,29,29,.18)!important;
}
@media(max-width:720px){
  .onboarding-row-actions{display:grid;grid-template-columns:1fr;gap:7px}
  .onboarding-row-actions .small-btn{width:100%!important}
}


/* =========================================================
   Fase 4B v35 - Branchetemplates
   ========================================================= */
.branch-templates-page .topbar{margin-bottom:18px}
.branch-apply-card{margin-bottom:18px}
.branch-apply-form .form-3col{
  display:grid;
  grid-template-columns:minmax(220px,1.15fr) minmax(220px,1fr) auto;
  gap:14px;
  align-items:end;
}
.branch-form-actions .btn{min-height:46px;white-space:nowrap}
.branch-apply-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.compact-checkbox{
  padding:10px 12px!important;
  margin:0!important;
  font-size:.92rem!important;
}
.branch-template-catalog{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.branch-template-card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow-soft);
}
.branch-template-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.branch-template-card h2{
  margin:0 0 5px;
  font-size:1.15rem;
}
.branch-template-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.template-plan-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(26,159,232,.28);
  background:rgba(26,159,232,.12);
  color:var(--accent-2);
  border-radius:999px;
  padding:7px 10px;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.template-block{margin-top:13px}
.template-block strong{
  display:block;
  margin-bottom:8px;
  color:var(--text);
  font-size:.84rem;
}
.template-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.template-pill-row span{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.16);
  border-radius:999px;
  padding:6px 9px;
  font-size:.78rem;
  font-weight:800;
  color:var(--text);
}
.template-pill-row.service-pills span{
  color:var(--accent-2);
  border-color:rgba(26,159,232,.26);
  background:rgba(26,159,232,.10);
}
.template-note{
  margin-top:14px!important;
  font-size:.9rem;
}
@media(max-width:980px){
  .branch-template-catalog{grid-template-columns:1fr}
  .branch-apply-form .form-3col{grid-template-columns:1fr}
  .branch-form-actions .btn{width:100%}
}
@media(max-width:620px){
  .branch-template-card{padding:16px;border-radius:16px}
  .branch-template-card-head{display:grid}
  .template-plan-pill{width:max-content}
  .branch-apply-options{display:grid}
}


/* =========================================================
   Fase 4C v37 - Transport workflow
   ========================================================= */
.transport-page .topbar{align-items:flex-start;gap:16px}.transport-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.transport-stat-card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:16px}.transport-stat-card span{display:block;color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.transport-stat-card strong{display:block;font-size:1.75rem;margin-top:4px}.transport-grid{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(460px,1.35fr);gap:18px;align-items:start}.transport-form-card,.transport-list-card{padding:24px}.transport-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.transport-toolbar input,.transport-toolbar select{min-height:42px}.transport-request-list{display:grid;gap:12px}.transport-request-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);padding:16px}.transport-request-main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.transport-request-main h3{margin:4px 0 3px;font-size:1.1rem}.transport-request-kicker{color:var(--muted);font-size:.78rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.transport-request-status{white-space:nowrap}.transport-route{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:12px 0}.transport-route span,.transport-meta-row span{display:block;color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.transport-route strong{display:block;margin-top:3px}.transport-route small{display:block;color:var(--muted);margin-top:2px}.transport-route-arrow{color:var(--muted);font-weight:900}.transport-meta-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:12px}.transport-meta-row span{text-transform:none;letter-spacing:0;font-weight:700}.transport-meta-row strong{color:var(--text)}.transport-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.transport-actions select{min-height:40px;max-width:220px}.empty-state{border:1px dashed var(--line);border-radius:18px;padding:22px;text-align:center;color:var(--muted)}
@media(max-width:1100px){.transport-grid{grid-template-columns:1fr}.transport-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.transport-page .topbar{display:grid}.transport-page .topbar .btn{width:100%}.transport-stats{grid-template-columns:1fr 1fr}.transport-form-card,.transport-list-card{padding:18px}.transport-toolbar{display:grid;grid-template-columns:1fr;width:100%}.transport-route{grid-template-columns:1fr}.transport-route-arrow{display:none}.transport-request-main,.transport-actions{display:grid;justify-content:stretch}.transport-actions select,.transport-actions .btn{width:100%;max-width:none}.transport-meta-row{display:grid;gap:8px}.transport-stat-card{padding:14px}.transport-stat-card strong{font-size:1.35rem}}

/* =========================================================
   Fase 4C.1 v38 - Compact transportoverzicht + statuspijlen
   ========================================================= */
.transport-list-card{overflow:hidden}.transport-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.transport-stat-card.compact{padding:12px 14px;border-radius:14px}.transport-stat-card.compact span{font-size:.74rem}.transport-stat-card.compact strong{font-size:1.35rem}.transport-request-list{display:block}.transport-compact-list{width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.018)}.transport-compact-head,.transport-compact-row{display:grid;grid-template-columns:135px minmax(170px,.95fr) minmax(230px,1.25fr) minmax(190px,1fr) 115px minmax(330px,1.45fr);gap:12px;align-items:center}.transport-compact-head{padding:10px 14px;background:rgba(255,255,255,.035);color:var(--muted);font-size:.75rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line)}.transport-compact-row{padding:10px 14px;border-bottom:1px solid var(--line);min-height:66px}.transport-compact-row:last-child{border-bottom:0}.transport-compact-row:hover{background:rgba(26,159,232,.055)}.transport-cell{min-width:0}.transport-cell strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}.transport-cell small{display:block;color:var(--muted);font-size:.77rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.status-cell .badge{margin-bottom:4px}.route-cell strong{color:var(--text)}.actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.transport-stepper{display:inline-flex;gap:5px;align-items:center}.transport-step-btn{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:10px!important;font-size:1.25rem!important;line-height:1!important}.transport-step-btn.primary-step{background:rgba(26,159,232,.18)!important;border-color:rgba(26,159,232,.45)!important;color:#fff!important}.transport-step-btn:disabled{opacity:.35;cursor:not-allowed}.compact-action{min-height:34px!important;padding:7px 10px!important;border-radius:10px!important;font-size:.82rem!important}.transport-special-status{min-height:34px!important;width:92px!important;padding:6px 8px!important;border-radius:10px!important;font-size:.82rem!important}.transport-toolbar input,.transport-toolbar select{min-height:38px}.transport-form-card .form-2col{gap:12px}.transport-form-card textarea{min-height:88px}@media(max-width:1300px){.transport-grid{grid-template-columns:1fr}.transport-compact-head,.transport-compact-row{grid-template-columns:125px minmax(160px,1fr) minmax(220px,1.2fr) minmax(170px,.9fr) 110px minmax(300px,1.35fr)}}@media(max-width:980px){.transport-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.transport-compact-head{display:none}.transport-compact-list{border:0;background:transparent;display:grid;gap:10px}.transport-compact-row{display:grid;grid-template-columns:1fr;gap:8px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);padding:12px;min-height:auto}.transport-cell{display:grid;grid-template-columns:105px minmax(0,1fr);gap:8px;align-items:start}.transport-cell::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.transport-cell strong,.transport-cell small{white-space:normal}.actions-cell{display:flex;justify-content:flex-start}.actions-cell::before{display:none}.compact-action,.transport-special-status{flex:0 0 auto}}@media(max-width:600px){.transport-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.transport-stat-card.compact{padding:10px}.transport-stat-card.compact strong{font-size:1.15rem}.transport-cell{grid-template-columns:88px minmax(0,1fr);gap:6px}.actions-cell{gap:6px}.compact-action{padding:7px 8px!important}.transport-special-status{width:100%!important;max-width:170px}.transport-step-btn{width:32px!important;height:32px!important}}


/* =========================================================
   Fase 4C.1 v39 - statuspijlen zichtbaar + compacter transportoverzicht
   ========================================================= */
.transport-grid{
  grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr)!important;
}
.transport-list-card{
  overflow:visible!important;
}
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:150px minmax(145px,.8fr) minmax(220px,1.25fr) minmax(190px,1fr) minmax(250px,1.1fr)!important;
  gap:10px!important;
}
.transport-compact-row{
  min-height:58px!important;
  padding:9px 12px!important;
}
.transport-status-top{
  display:grid;
  gap:3px;
}
.transport-status-stepper{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:7px;
  min-width:0;
}
.transport-status-stepper span{
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.transport-status-stepper .transport-step-btn{
  width:26px!important;
  height:26px!important;
  min-height:26px!important;
  border-radius:8px!important;
  font-size:1.05rem!important;
}
.transport-cell strong{
  font-size:.88rem!important;
}
.transport-cell small{
  font-size:.72rem!important;
}
.transport-cell .badge{
  font-size:.68rem!important;
  padding:4px 7px!important;
  width:max-content;
}
.actions-cell{
  justify-content:flex-start!important;
  gap:6px!important;
}
.compact-action{
  min-height:30px!important;
  padding:6px 8px!important;
  font-size:.76rem!important;
}
.transport-special-status{
  min-height:30px!important;
  width:86px!important;
  font-size:.76rem!important;
}
@media(max-width:1700px){
  .transport-grid{
    grid-template-columns:1fr!important;
  }
  .transport-list-card{order:1;}
  .transport-form-card{order:2;}
  .transport-form-card .section-title-row .muted{
    max-width:780px;
  }
}
@media(max-width:980px){
  .transport-compact-head{
    display:none!important;
  }
  .transport-compact-row{
    grid-template-columns:1fr!important;
  }
  .transport-status-stepper span{
    white-space:normal;
  }
  .actions-cell{
    display:flex!important;
    flex-wrap:wrap!important;
  }
}

/* =========================================================
   Fase 4C.1 v40 - strakker overzicht + documentflow
   ========================================================= */
.transport-grid{
  grid-template-columns:1fr!important;
}
.transport-list-card{order:1!important; padding:18px!important; overflow:hidden!important;}
.transport-form-card{order:2!important; padding:18px!important;}
.transport-form-card.is-collapsed{display:none!important;}
.transport-list-card .section-title-row{align-items:flex-start!important; gap:12px!important;}
.transport-toolbar{margin-left:auto!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:8px!important;}
.transport-toolbar input{width:190px!important; min-height:36px!important;}
.transport-toolbar select{width:230px!important; min-height:36px!important;}
.transport-request-list{overflow-x:auto!important; padding-bottom:2px!important;}
.transport-compact-list{min-width:1120px!important; border-radius:14px!important;}
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:168px minmax(175px,.9fr) minmax(250px,1.3fr) minmax(220px,1fr) minmax(360px,1.35fr)!important;
  gap:12px!important;
}
.transport-compact-head{padding:9px 12px!important;}
.transport-compact-row{padding:9px 12px!important; min-height:62px!important;}
.transport-action-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.actions-cell{display:grid!important; gap:7px!important; justify-content:stretch!important;}
.actions-cell .compact-action{width:auto!important; white-space:nowrap!important;}
.compact-action.dark{background:rgba(26,159,232,.16)!important; border-color:rgba(26,159,232,.42)!important; color:#e8f6ff!important;}
.transport-manual-status{min-height:30px!important; width:190px!important; max-width:100%!important; padding:6px 8px!important; border-radius:10px!important; font-size:.76rem!important;}
.transport-status-stepper span{max-width:115px!important;}
@media(max-width:980px){
  .transport-list-card{padding:14px!important;}
  .transport-request-list{overflow-x:visible!important;}
  .transport-compact-list{min-width:0!important;}
  .transport-toolbar{width:100%!important; display:grid!important; grid-template-columns:1fr!important; margin-left:0!important;}
  .transport-toolbar input,.transport-toolbar select{width:100%!important;}
  .transport-compact-row{padding:11px!important;}
  .actions-cell{display:grid!important; grid-template-columns:1fr!important;}
  .transport-action-row{display:flex!important; flex-wrap:wrap!important;}
  .transport-manual-status{width:100%!important;}
}


/* =========================================================
   Fase 4C.1 v41 - transportaanvraag pagina + nette statuskolom
   ========================================================= */
.transport-list-shell,
.transport-form-shell{display:block;max-width:100%;}
.transport-list-card-full{padding:20px!important;}
.transport-form-card-full{display:block!important;max-width:980px;margin:0 auto;padding:22px!important;}
.transport-request-page .topbar{max-width:980px;margin:0 auto 18px;}
.transport-request-page .success,.transport-request-page .error{max-width:980px;margin-left:auto;margin-right:auto;}
.transport-list-card .section-title-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;}
.transport-list-card .section-title-row h2{margin-bottom:4px!important;}
.transport-toolbar{display:flex!important;align-items:center!important;gap:10px!important;margin-left:auto!important;}
.transport-toolbar input{width:210px!important;min-height:38px!important;}
.transport-toolbar select{width:210px!important;min-height:38px!important;border-radius:12px!important;}
.transport-request-list{overflow-x:auto!important;padding-bottom:4px!important;}
.transport-compact-list{min-width:1180px!important;border:1px solid var(--line)!important;border-radius:16px!important;overflow:hidden!important;background:rgba(255,255,255,.018)!important;}
.transport-compact-head,
.transport-compact-row{grid-template-columns:190px minmax(165px,.85fr) minmax(235px,1.15fr) minmax(210px,1fr) minmax(300px,1.15fr) 110px!important;gap:12px!important;}
.transport-compact-head{padding:10px 14px!important;background:rgba(255,255,255,.04)!important;}
.transport-compact-row{padding:11px 14px!important;min-height:74px!important;align-items:center!important;}
.transport-status-control{display:grid;gap:7px;align-items:start;min-width:0;}
.transport-request-number{display:block;color:var(--muted);font-size:.72rem!important;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.transport-status-select{width:100%!important;max-width:165px!important;min-height:34px!important;height:34px!important;padding:5px 30px 5px 10px!important;border-radius:10px!important;background:rgba(4,12,24,.54)!important;border:1px solid rgba(148,163,184,.22)!important;color:var(--text)!important;font-size:.78rem!important;font-weight:800!important;box-shadow:none!important;}
.transport-status-stepper{display:flex!important;align-items:center!important;gap:7px!important;margin-top:0!important;}
.transport-status-stepper .transport-step-btn{width:32px!important;height:32px!important;min-height:32px!important;border-radius:10px!important;font-size:1.25rem!important;font-weight:900!important;line-height:1!important;}
.transport-status-stepper .transport-step-btn.primary-step{background:rgba(26,159,232,.18)!important;border-color:rgba(26,159,232,.45)!important;color:#fff!important;}
.transport-status-stepper span{font-size:.72rem!important;font-weight:800!important;color:var(--muted)!important;max-width:88px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.document-cell{display:block!important;}
.document-cell .transport-action-row{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important;}
.actions-cell{display:flex!important;align-items:center!important;justify-content:flex-start!important;}
.actions-cell .compact-action,.document-cell .compact-action{min-height:32px!important;padding:7px 10px!important;border-radius:10px!important;font-size:.78rem!important;white-space:nowrap!important;}
.transport-cell strong{font-size:.9rem!important;}
.transport-cell small{font-size:.74rem!important;line-height:1.3!important;}
@media(max-width:1100px){
  .transport-compact-list{min-width:0!important;border:0!important;background:transparent!important;display:grid!important;gap:10px!important;}
  .transport-compact-head{display:none!important;}
  .transport-compact-row{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:rgba(255,255,255,.025)!important;padding:12px!important;min-height:auto!important;}
  .transport-cell{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;gap:8px!important;align-items:start!important;}
  .transport-cell::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
  .status-cell{grid-template-columns:1fr!important;}
  .status-cell::before{display:none!important;}
  .transport-status-control{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding-bottom:2px!important;}
  .transport-status-select{max-width:100%!important;}
  .transport-status-stepper span{max-width:none!important;white-space:normal!important;}
  .document-cell,.actions-cell{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;}
  .document-cell .transport-action-row,.actions-cell .compact-action{min-width:0;}
}
@media(max-width:720px){
  .transport-list-card-full,.transport-form-card-full{padding:14px!important;}
  .transport-list-card .section-title-row{display:grid!important;}
  .transport-toolbar{width:100%!important;display:grid!important;grid-template-columns:1fr!important;margin-left:0!important;}
  .transport-toolbar input,.transport-toolbar select{width:100%!important;}
  .transport-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .transport-cell{grid-template-columns:86px minmax(0,1fr)!important;}
  .document-cell,.actions-cell{grid-template-columns:86px minmax(0,1fr)!important;}
  .document-cell .transport-action-row{display:flex!important;flex-wrap:wrap!important;}
  .document-cell .compact-action,.actions-cell .compact-action{width:auto!important;}
  .transport-status-stepper .transport-step-btn{width:34px!important;height:34px!important;}
}


/* =========================================================
   Fase 4C.1 v42 - transportoverzicht netter + compacte inputs
   ========================================================= */
.app input:not([type="checkbox"]):not([type="radio"]),
.app select,
.app textarea{
  min-height:38px!important;
  padding:8px 11px!important;
  border-radius:10px!important;
  font-size:.9rem!important;
}
.app textarea{min-height:78px!important;line-height:1.45!important;}
.app .field label{margin-bottom:5px!important;font-size:.78rem!important;}
.transport-list-card-full{overflow:hidden!important;}
.transport-request-list{width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;padding-bottom:2px!important;}
.transport-compact-list{
  min-width:1040px!important;
  width:100%!important;
  border:1px solid var(--line)!important;
  border-radius:15px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.018)!important;
}
.transport-compact-head,
.transport-compact-row{
  display:grid!important;
  grid-template-columns:175px minmax(135px,.85fr) minmax(185px,1fr) minmax(155px,.85fr) 145px minmax(220px,1.05fr) 90px!important;
  gap:10px!important;
  align-items:center!important;
}
.transport-compact-head{
  padding:9px 12px!important;
  background:rgba(255,255,255,.04)!important;
  color:var(--muted)!important;
  font-size:.72rem!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
.transport-compact-row{
  padding:10px 12px!important;
  min-height:76px!important;
  border-bottom:1px solid var(--line)!important;
}
.transport-cell{min-width:0!important;}
.transport-cell strong{font-size:.88rem!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.transport-cell small{font-size:.74rem!important;line-height:1.3!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.request-cell strong{color:#bfe2ff!important;font-size:.78rem!important;font-weight:900!important;letter-spacing:.01em!important;}
.transport-status-control{display:grid!important;gap:6px!important;align-items:start!important;justify-items:start!important;}
.transport-status-select{
  width:132px!important;
  max-width:132px!important;
  min-height:32px!important;
  height:32px!important;
  padding:6px 28px 6px 10px!important;
  border-radius:10px!important;
  background:rgba(4,12,24,.58)!important;
  border:1px solid rgba(148,163,184,.26)!important;
  color:var(--text)!important;
  font-size:.78rem!important;
  font-weight:850!important;
  box-shadow:none!important;
}
.transport-status-stepper{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;}
.transport-status-stepper span{display:none!important;}
.transport-status-stepper .transport-step-btn{
  width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:10px!important;
  font-size:1.35rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.transport-status-stepper .transport-step-btn.primary-step{
  background:rgba(26,159,232,.18)!important;
  border-color:rgba(26,159,232,.45)!important;
  color:#fff!important;
}
.transport-status-stepper .transport-step-btn:not(:disabled):hover{transform:translateY(-1px)!important;}
.transport-action-row{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;max-width:100%!important;}
.document-cell .compact-action,
.actions-cell .compact-action{
  min-height:32px!important;
  height:32px!important;
  padding:6px 9px!important;
  border-radius:10px!important;
  font-size:.76rem!important;
  line-height:1!important;
  max-width:100%!important;
  white-space:nowrap!important;
}
.actions-cell{justify-content:flex-start!important;overflow:hidden!important;}
.transport-toolbar{gap:8px!important;}
.transport-toolbar input,
.transport-toolbar select{min-height:36px!important;height:36px!important;border-radius:10px!important;font-size:.85rem!important;}
.transport-toolbar input{width:185px!important;}
.transport-toolbar select{width:210px!important;}
@media(max-width:1180px){
  .transport-compact-list{min-width:980px!important;}
  .transport-compact-head,.transport-compact-row{grid-template-columns:165px minmax(130px,.85fr) minmax(170px,1fr) minmax(145px,.85fr) 140px minmax(200px,1fr) 86px!important;gap:9px!important;}
}
@media(max-width:980px){
  .transport-request-list{overflow-x:visible!important;}
  .transport-compact-list{min-width:0!important;border:0!important;background:transparent!important;display:grid!important;gap:10px!important;overflow:visible!important;}
  .transport-compact-head{display:none!important;}
  .transport-compact-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:rgba(255,255,255,.025)!important;padding:11px!important;min-height:auto!important;}
  .transport-cell{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:8px!important;align-items:start!important;}
  .transport-cell::before{content:attr(data-label);color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
  .transport-cell strong,.transport-cell small{white-space:normal!important;}
  .status-cell .transport-status-control{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
  .transport-status-select{width:160px!important;max-width:160px!important;}
  .document-cell .transport-action-row{justify-content:flex-start!important;}
  .actions-cell{display:flex!important;justify-content:flex-start!important;}
  .actions-cell::before{display:none!important;}
}
@media(max-width:620px){
  .app input:not([type="checkbox"]):not([type="radio"]),.app select,.app textarea{min-height:36px!important;font-size:.86rem!important;}
  .transport-toolbar{width:100%!important;display:grid!important;grid-template-columns:1fr!important;}
  .transport-toolbar input,.transport-toolbar select{width:100%!important;}
  .transport-cell{grid-template-columns:82px minmax(0,1fr)!important;gap:6px!important;}
  .status-cell .transport-status-control{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;}
  .transport-status-select{width:100%!important;max-width:190px!important;}
  .transport-status-stepper .transport-step-btn{width:34px!important;height:34px!important;}
  .document-cell .compact-action,.actions-cell .compact-action{height:32px!important;min-height:32px!important;}
}


/* =========================================================
   Fase 4C.1 v43 - transportregels opnieuw uitgelijnd
   ========================================================= */
.transport-list-card-full{
  overflow:hidden!important;
}
.transport-list-card .section-title-row{
  gap:18px!important;
  align-items:flex-start!important;
}
.transport-list-card .section-title-row .muted{
  max-width:640px!important;
  line-height:1.45!important;
}
.transport-toolbar input,
.transport-toolbar select{
  height:34px!important;
  min-height:34px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}
.transport-request-list{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  width:100%!important;
}
.transport-compact-list{
  width:100%!important;
  min-width:1040px!important;
  border-radius:15px!important;
}
.transport-compact-head,
.transport-compact-row{
  display:grid!important;
  grid-template-columns:minmax(170px,.92fr) minmax(210px,1.15fr) minmax(180px,.95fr) 150px minmax(250px,1.15fr) 84px!important;
  gap:12px!important;
  align-items:center!important;
}
.transport-compact-head{
  padding:9px 12px!important;
}
.transport-compact-head span{
  font-size:.73rem!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
}
.transport-compact-row{
  min-height:82px!important;
  padding:12px!important;
}
.transport-cell strong{
  display:block!important;
  font-size:.9rem!important;
  line-height:1.24!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.transport-cell small{
  display:block!important;
  font-size:.73rem!important;
  line-height:1.28!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  margin-top:2px!important;
}
.customer-cell small:first-of-type{
  color:#7dd3fc!important;
  font-weight:800!important;
}
.status-cell .transport-status-control{
  width:150px!important;
  display:grid!important;
  gap:6px!important;
  justify-items:start!important;
}
.transport-status-select{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  width:150px!important;
  max-width:150px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 28px 0 10px!important;
  border-radius:10px!important;
  background:rgba(4,12,24,.70)!important;
  border:1px solid rgba(148,163,184,.28)!important;
  color:#f8fafc!important;
  font-size:.82rem!important;
  line-height:34px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.transport-status-select:focus{
  border-color:rgba(26,159,232,.60)!important;
  box-shadow:0 0 0 3px rgba(26,159,232,.13)!important;
}
.transport-status-stepper{
  display:flex!important;
  gap:6px!important;
  align-items:center!important;
  margin:0!important;
}
.transport-status-stepper .transport-step-btn{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  border-radius:9px!important;
  font-size:1.25rem!important;
  line-height:1!important;
  font-weight:950!important;
}
.document-cell .transport-action-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  max-width:100%!important;
}
.document-cell .compact-action,
.actions-cell .compact-action{
  height:32px!important;
  min-height:32px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:.76rem!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.actions-cell{
  justify-self:end!important;
}
.actions-cell .compact-action{
  max-width:84px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:1180px){
  .transport-compact-list{min-width:1000px!important;}
  .transport-compact-head,.transport-compact-row{
    grid-template-columns:minmax(160px,.9fr) minmax(190px,1.05fr) minmax(160px,.85fr) 150px minmax(230px,1.1fr) 82px!important;
    gap:10px!important;
  }
}
@media(max-width:820px){
  .transport-request-list{overflow-x:visible!important;}
  .transport-compact-list{min-width:0!important;border:0!important;background:transparent!important;display:grid!important;gap:10px!important;overflow:visible!important;}
  .transport-compact-head{display:none!important;}
  .transport-compact-row{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:rgba(255,255,255,.025)!important;padding:12px!important;min-height:auto!important;}
  .transport-cell{display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;gap:8px!important;align-items:start!important;}
  .transport-cell::before{content:attr(data-label);color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;line-height:1.3;}
  .transport-cell strong,.transport-cell small{white-space:normal!important;}
  .status-cell .transport-status-control{width:auto!important;display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
  .transport-status-select{width:150px!important;max-width:150px!important;}
  .transport-status-stepper{gap:6px!important;}
  .document-cell .transport-action-row{justify-content:flex-start!important;}
  .actions-cell{justify-self:stretch!important;}
  .actions-cell .compact-action{max-width:none!important;}
}
@media(max-width:560px){
  .transport-toolbar{width:100%!important;display:grid!important;grid-template-columns:1fr!important;margin-left:0!important;}
  .transport-toolbar input,.transport-toolbar select{width:100%!important;}
  .transport-cell{grid-template-columns:76px minmax(0,1fr)!important;}
  .status-cell .transport-status-control{display:grid!important;grid-template-columns:1fr!important;justify-items:start!important;}
  .transport-status-select{width:100%!important;max-width:190px!important;}
}


/* =========================================================
   Fase 4C.1 v44 - compacte zakelijke status + documentenmenu
   ========================================================= */
.app input:not([type="checkbox"]):not([type="radio"]),
.app select{
  min-height:34px!important;
  height:34px!important;
  border-radius:10px!important;
  font-size:.84rem!important;
  line-height:1.15!important;
}
.app textarea{
  border-radius:10px!important;
  font-size:.84rem!important;
  line-height:1.45!important;
}
.transport-list-card .section-title-row .muted{
  max-width:720px!important;
  font-size:.92rem!important;
}
.transport-compact-list{
  min-width:960px!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:minmax(170px,.95fr) minmax(210px,1.2fr) minmax(165px,.9fr) 132px 132px 78px!important;
  gap:10px!important;
  align-items:center!important;
}
.transport-compact-row{
  min-height:76px!important;
  padding:10px 12px!important;
}
.transport-cell strong{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:.86rem!important;
  line-height:1.22!important;
  font-weight:760!important;
  letter-spacing:-.015em!important;
}
.transport-cell small{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:.71rem!important;
  line-height:1.24!important;
  font-weight:500!important;
  color:#9fc2f4!important;
}
.customer-cell .transport-request-number,
.customer-cell .transport-request-date{
  color:#93a4ba!important;
  font-size:.68rem!important;
  font-weight:750!important;
  text-transform:uppercase!important;
  letter-spacing:.035em!important;
}
.customer-cell .transport-customer-contact{
  color:#7dd3fc!important;
  font-weight:650!important;
}
.status-cell .transport-status-control{
  width:132px!important;
  gap:5px!important;
}
.transport-status-select{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  width:132px!important;
  max-width:132px!important;
  min-width:132px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 22px 0 8px!important;
  border-radius:9px!important;
  background:rgba(3,10,23,.62)!important;
  border:1px solid rgba(148,163,184,.25)!important;
  color:#f8fafc!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:.72rem!important;
  line-height:30px!important;
  font-weight:760!important;
  letter-spacing:-.02em!important;
  box-shadow:none!important;
}
.transport-status-select option{
  font-size:.82rem!important;
  color:#0f172a!important;
  background:#fff!important;
}
.transport-status-select:focus{
  border-color:rgba(26,159,232,.62)!important;
  box-shadow:0 0 0 2px rgba(26,159,232,.13)!important;
}
.transport-status-stepper{
  display:flex!important;
  gap:5px!important;
  margin:0!important;
}
.transport-status-stepper .transport-step-btn{
  width:28px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  border-radius:8px!important;
  font-size:1.22rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.document-cell{overflow:visible!important;}
.document-cell .transport-action-row{display:none!important;}
.transport-doc-menu{
  position:relative!important;
  width:128px!important;
  max-width:128px!important;
}
.transport-doc-menu summary{
  list-style:none!important;
  cursor:pointer!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:128px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 9px!important;
  border-radius:9px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  background:rgba(3,10,23,.60)!important;
  color:#f8fafc!important;
  font-size:.74rem!important;
  font-weight:760!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}
.transport-doc-menu summary::-webkit-details-marker{display:none!important;}
.transport-doc-menu summary::after{
  content:"⌄"!important;
  margin-left:8px!important;
  color:#9fc2f4!important;
  font-size:.78rem!important;
  line-height:1!important;
}
.transport-doc-menu[open] summary{
  border-color:rgba(26,159,232,.48)!important;
  background:rgba(26,159,232,.10)!important;
}
.transport-doc-menu[open] summary::after{transform:rotate(180deg)!important;}
.transport-doc-menu-panel{
  position:absolute!important;
  z-index:30!important;
  top:34px!important;
  left:0!important;
  min-width:190px!important;
  display:grid!important;
  gap:5px!important;
  padding:7px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  border-radius:12px!important;
  background:#071224!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28)!important;
}
.transport-doc-action{
  width:100%!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 9px!important;
  border-radius:8px!important;
  border:1px solid rgba(148,163,184,.18)!important;
  background:rgba(255,255,255,.035)!important;
  color:#f8fafc!important;
  font-size:.73rem!important;
  font-weight:740!important;
  text-align:left!important;
  cursor:pointer!important;
}
.transport-doc-action.primary{
  background:rgba(26,159,232,.14)!important;
  border-color:rgba(26,159,232,.34)!important;
}
.transport-doc-action:hover{
  background:rgba(26,159,232,.16)!important;
  border-color:rgba(26,159,232,.42)!important;
}
.actions-cell .compact-action{
  width:78px!important;
  max-width:78px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 8px!important;
  border-radius:9px!important;
  font-size:.73rem!important;
  font-weight:740!important;
}
@media(max-width:1180px){
  .transport-compact-list{min-width:920px!important;}
  .transport-compact-head,.transport-compact-row{
    grid-template-columns:minmax(160px,.95fr) minmax(190px,1.15fr) minmax(145px,.85fr) 132px 132px 76px!important;
    gap:8px!important;
  }
}
@media(max-width:820px){
  .transport-compact-list{min-width:0!important;overflow:visible!important;}
  .transport-compact-row{padding:10px!important;}
  .transport-cell{grid-template-columns:78px minmax(0,1fr)!important;}
  .status-cell .transport-status-control{width:auto!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;}
  .transport-status-select{width:132px!important;max-width:132px!important;min-width:132px!important;}
  .transport-doc-menu{width:128px!important;max-width:128px!important;}
  .document-cell,.actions-cell{overflow:visible!important;}
}
@media(max-width:560px){
  .transport-cell{grid-template-columns:74px minmax(0,1fr)!important;}
  .status-cell .transport-status-control{display:grid!important;grid-template-columns:1fr!important;justify-items:start!important;}
  .transport-status-select{width:146px!important;max-width:146px!important;}
  .transport-doc-menu,.transport-doc-menu summary{width:146px!important;max-width:146px!important;}
  .transport-doc-menu-panel{left:0!important;right:auto!important;min-width:190px!important;}
}

/* =========================================================
   Fase 4C.1 v45 - statuskolom breder + route/object compacter
   ========================================================= */
.transport-compact-list{
  min-width:940px!important;
}
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:minmax(185px,1.05fr) minmax(170px,.74fr) minmax(145px,.62fr) 168px 128px 76px!important;
  gap:8px!important;
}
.transport-status-control,
.status-cell .transport-status-control{
  width:168px!important;
  max-width:168px!important;
}
.transport-status-select{
  width:168px!important;
  max-width:168px!important;
  min-width:168px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 28px 0 10px!important;
  border-radius:9px!important;
  font-size:.76rem!important;
  font-weight:760!important;
  letter-spacing:-.015em!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.transport-status-stepper{
  width:168px!important;
  justify-content:flex-start!important;
  gap:6px!important;
}
.transport-status-stepper .transport-step-btn{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
}
.transport-cell strong,
.transport-cell small{
  max-width:100%!important;
}
.route-cell strong,
.route-cell small,
.object-cell strong,
.object-cell small{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.document-cell{justify-self:start!important;}
.actions-cell{justify-self:start!important;}
@media(max-width:1180px){
  .transport-compact-list{min-width:900px!important;}
  .transport-compact-head,.transport-compact-row{
    grid-template-columns:minmax(170px,1fr) minmax(160px,.74fr) minmax(135px,.62fr) 164px 124px 74px!important;
    gap:8px!important;
  }
  .transport-status-control,
  .status-cell .transport-status-control,
  .transport-status-select,
  .transport-status-stepper{
    width:164px!important;
    max-width:164px!important;
    min-width:164px!important;
  }
}
@media(max-width:820px){
  .transport-compact-list{min-width:0!important;}
  .transport-compact-head,.transport-compact-row{
    grid-template-columns:1fr!important;
  }
  .status-cell .transport-status-control{
    width:auto!important;
    max-width:none!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .transport-status-select{
    width:170px!important;
    max-width:170px!important;
    min-width:170px!important;
  }
  .transport-status-stepper{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
}
@media(max-width:560px){
  .transport-status-select{
    width:100%!important;
    max-width:190px!important;
    min-width:0!important;
  }
}

/* =========================================================
   Fase 4C.1 v46 - transportkolommen gelijkmatiger verdeeld
   ========================================================= */
.transport-compact-list{
  min-width:1044px!important;
  overflow-x:auto!important;
}
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:220px 220px 210px 176px 136px 82px!important;
  column-gap:10px!important;
  row-gap:0!important;
  justify-content:start!important;
}
.transport-compact-head .transport-cell,
.transport-compact-row .transport-cell{
  min-width:0!important;
}
.transport-compact-head,
.transport-compact-row{
  padding-left:14px!important;
  padding-right:14px!important;
}
.status-cell{justify-self:start!important;}
.document-cell{justify-self:start!important;}
.actions-cell{justify-self:start!important;}
.transport-status-control,
.status-cell .transport-status-control,
.transport-status-select,
.transport-status-stepper{
  width:176px!important;
  max-width:176px!important;
  min-width:176px!important;
}
.transport-status-select{
  padding-right:30px!important;
}
@media(max-width:1180px){
  .transport-compact-list{min-width:980px!important;}
  .transport-compact-head,.transport-compact-row{
    grid-template-columns:205px 205px 190px 172px 128px 70px!important;
    column-gap:8px!important;
  }
  .transport-status-control,
  .status-cell .transport-status-control,
  .transport-status-select,
  .transport-status-stepper{
    width:172px!important;
    max-width:172px!important;
    min-width:172px!important;
  }
}
@media(max-width:820px){
  .transport-compact-list{min-width:0!important;overflow:visible!important;}
  .transport-compact-head,.transport-compact-row{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }
  .transport-status-control,
  .status-cell .transport-status-control{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
  .transport-status-select{
    width:190px!important;
    max-width:190px!important;
    min-width:190px!important;
  }
  .transport-status-stepper{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
}
@media(max-width:560px){
  .transport-status-select{
    width:100%!important;
    max-width:210px!important;
    min-width:0!important;
  }
}

/* =========================================================
   Fase 4C.1 v47 - transportoverzicht volledige breedte / betere balans
   ========================================================= */
.transport-request-list{
  overflow-x:visible!important;
}
.transport-compact-list{
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
.transport-compact-head,
.transport-compact-row{
  display:grid!important;
  width:100%!important;
  grid-template-columns:
    minmax(190px,1.05fr)
    minmax(190px,1.02fr)
    minmax(175px,.92fr)
    196px
    146px
    96px!important;
  column-gap:14px!important;
  align-items:center!important;
  justify-content:stretch!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
.transport-compact-row{
  min-height:78px!important;
}
.transport-compact-head .transport-cell,
.transport-compact-row .transport-cell{
  min-width:0!important;
  max-width:100%!important;
}
.status-cell,
.document-cell,
.actions-cell{
  justify-self:start!important;
  overflow:visible!important;
}
.status-cell .transport-status-control,
.transport-status-control{
  width:196px!important;
  max-width:196px!important;
  min-width:196px!important;
}
.transport-status-select{
  width:196px!important;
  max-width:196px!important;
  min-width:196px!important;
  height:32px!important;
  min-height:32px!important;
  line-height:32px!important;
  font-size:.78rem!important;
  font-weight:760!important;
  padding-left:10px!important;
  padding-right:28px!important;
  text-overflow:clip!important;
}
.transport-status-stepper{
  width:196px!important;
  max-width:196px!important;
  min-width:196px!important;
}
.transport-status-stepper .transport-step-btn{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
}
.transport-doc-menu,
.transport-doc-menu summary{
  width:146px!important;
  max-width:146px!important;
}
.actions-cell .compact-action{
  width:96px!important;
  max-width:96px!important;
}
@media(max-width:1160px){
  .transport-request-list{
    overflow-x:auto!important;
  }
  .transport-compact-list{
    min-width:1040px!important;
  }
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:190px 190px 175px 196px 146px 96px!important;
    column-gap:12px!important;
  }
}
@media(max-width:820px){
  .transport-request-list{
    overflow-x:visible!important;
  }
  .transport-compact-list{
    min-width:0!important;
    overflow:visible!important;
  }
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:1fr!important;
    column-gap:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select,
  .transport-status-stepper{
    width:190px!important;
    max-width:190px!important;
    min-width:190px!important;
  }
  .transport-doc-menu,
  .transport-doc-menu summary{
    width:150px!important;
    max-width:150px!important;
  }
  .actions-cell .compact-action{
    width:auto!important;
    max-width:none!important;
  }
}
@media(max-width:560px){
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select,
  .transport-status-stepper{
    width:100%!important;
    max-width:220px!important;
    min-width:0!important;
  }
}

/* =========================================================
   Fase 4C.1 v48 - documentnummers zichtbaar in transportoverzicht
   ========================================================= */
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:
    minmax(200px,.95fr)
    minmax(170px,.78fr)
    minmax(180px,.84fr)
    196px
    minmax(230px,1.05fr)
    96px!important;
  column-gap:14px!important;
}
.document-cell{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  overflow:visible!important;
}
.transport-document-summary{
  display:grid!important;
  gap:5px!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.transport-doc-link{
  appearance:none!important;
  border:1px solid rgba(59,130,246,.16)!important;
  background:rgba(15,23,42,.20)!important;
  color:#dbeafe!important;
  border-radius:9px!important;
  min-height:28px!important;
  padding:5px 7px!important;
  display:grid!important;
  grid-template-columns:48px minmax(72px,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
  cursor:pointer!important;
  font:inherit!important;
  text-align:left!important;
  max-width:100%!important;
}
.transport-doc-link:hover{
  border-color:rgba(34,158,221,.45)!important;
  background:rgba(14,165,233,.10)!important;
}
.transport-doc-link span{
  color:#93c5fd!important;
  font-size:.68rem!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
.transport-doc-link strong{
  color:#fff!important;
  font-size:.72rem!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.transport-doc-link .doc-status{
  border-radius:999px!important;
  padding:2px 6px!important;
  color:#bfdbfe!important;
  background:rgba(59,130,246,.13)!important;
  font-size:.64rem!important;
  font-weight:850!important;
  font-style:normal!important;
  white-space:nowrap!important;
}
.transport-doc-link .doc-status.ok{color:#86efac!important;background:rgba(34,197,94,.15)!important;}
.transport-doc-link .doc-status.info{color:#bae6fd!important;background:rgba(14,165,233,.16)!important;}
.transport-doc-link .doc-status.warn{color:#fde68a!important;background:rgba(245,158,11,.16)!important;}
.transport-doc-link .doc-status.draft{color:#c4b5fd!important;background:rgba(139,92,246,.14)!important;}
.transport-doc-empty{
  color:#93a4bd!important;
  font-size:.72rem!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.document-cell .transport-doc-menu{
  flex:0 0 auto!important;
}
.document-cell .transport-doc-menu,
.document-cell .transport-doc-menu summary{
  width:96px!important;
  max-width:96px!important;
  height:30px!important;
  min-height:30px!important;
  font-size:.72rem!important;
}
@media(max-width:1180px){
  .transport-request-list{overflow-x:auto!important;}
  .transport-compact-list{min-width:1110px!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:190px 165px 175px 196px 230px 90px!important;
    column-gap:12px!important;
  }
}
@media(max-width:820px){
  .transport-compact-list{min-width:0!important;}
  .transport-compact-head,
  .transport-compact-row{grid-template-columns:1fr!important;}
  .document-cell{
    display:grid!important;
    grid-template-columns:96px minmax(0,1fr)!important;
    align-items:start!important;
  }
  .transport-document-summary{grid-column:2!important;}
  .document-cell .transport-doc-menu{grid-column:2!important;}
  .transport-doc-link{grid-template-columns:50px minmax(0,1fr) auto!important;}
}


/* =========================================================
   Fase 4C.1 v50 - documentchips naast statuspijlen, actiesmenu weg
   ========================================================= */
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:
    minmax(190px,.9fr)
    minmax(175px,.82fr)
    minmax(170px,.78fr)
    minmax(390px,1.55fr)
    98px!important;
  column-gap:14px!important;
  align-items:center!important;
}
.transport-compact-head span:nth-child(4){
  min-width:0!important;
}
.transport-cell.status-cell{
  overflow:visible!important;
}
.status-cell .transport-status-control,
.transport-status-control{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
.transport-status-select{
  width:184px!important;
  min-width:184px!important;
  max-width:184px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 30px 0 11px!important;
  font-size:.78rem!important;
  font-weight:780!important;
  line-height:34px!important;
  border-radius:11px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  overflow:hidden!important;
}
.transport-status-doc-row{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:7px!important;
  min-width:0!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
}
.transport-status-stepper{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
.transport-status-stepper .transport-step-btn{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  border-radius:9px!important;
  font-size:1rem!important;
  line-height:1!important;
}
.status-cell .transport-document-summary{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  flex:1 1 210px!important;
  flex-wrap:wrap!important;
}
.status-cell .transport-doc-link{
  min-height:24px!important;
  max-width:170px!important;
  padding:3px 6px!important;
  border-radius:8px!important;
  grid-template-columns:auto minmax(54px,1fr) auto!important;
  gap:5px!important;
}
.status-cell .transport-doc-link span{
  font-size:.58rem!important;
  letter-spacing:.02em!important;
}
.status-cell .transport-doc-link strong{
  font-size:.66rem!important;
  max-width:76px!important;
}
.status-cell .transport-doc-link .doc-status{
  font-size:.56rem!important;
  padding:1px 5px!important;
}
.status-cell .transport-doc-empty{
  color:#7fa0c8!important;
  font-size:.66rem!important;
  font-weight:750!important;
}
.document-cell,
.transport-doc-menu{
  display:none!important;
}
.actions-cell .compact-action{
  width:96px!important;
  max-width:96px!important;
  height:30px!important;
  min-height:30px!important;
}
@media(max-width:1200px){
  .transport-request-list{overflow-x:auto!important;}
  .transport-compact-list{min-width:1040px!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:180px 170px 165px 380px 92px!important;
    column-gap:12px!important;
  }
}
@media(max-width:820px){
  .transport-request-list{overflow-x:visible!important;}
  .transport-compact-list{min-width:0!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:1fr!important;
  }
  .transport-status-select{
    width:100%!important;
    min-width:0!important;
    max-width:220px!important;
  }
  .transport-status-doc-row{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:start!important;
  }
  .status-cell .transport-document-summary{
    flex:1 1 auto!important;
  }
  .status-cell .transport-doc-link{
    max-width:100%!important;
  }
}
@media(max-width:520px){
  .transport-status-doc-row{
    grid-template-columns:1fr!important;
  }
  .transport-status-stepper{
    margin-bottom:2px!important;
  }
}


/* =========================================================
   Fase 4C.1 v51 - status en documenten weer aparte kolommen
   ========================================================= */
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:
    minmax(200px,1fr)
    minmax(190px,.98fr)
    minmax(175px,.9fr)
    190px
    minmax(245px,1.2fr)
    96px!important;
  column-gap:14px!important;
  align-items:center!important;
}
.transport-cell.status-cell{
  min-width:0!important;
  overflow:visible!important;
}
.status-cell .transport-status-control,
.transport-status-control{
  width:190px!important;
  min-width:0!important;
  max-width:190px!important;
  display:block!important;
}
.transport-status-select{
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 30px 0 12px!important;
  border-radius:11px!important;
  font-size:.78rem!important;
  font-weight:760!important;
  line-height:34px!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.transport-status-doc-row{
  display:block!important;
  margin-top:7px!important;
  min-width:0!important;
}
.transport-status-stepper{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
}
.transport-status-stepper .transport-step-btn{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  border-radius:9px!important;
  font-size:1rem!important;
  line-height:1!important;
}
.document-cell{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  overflow:visible!important;
}
.document-cell .transport-document-summary,
.transport-document-summary{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
  width:100%!important;
}
.document-cell .transport-doc-link,
.transport-doc-link{
  min-height:28px!important;
  max-width:118px!important;
  padding:4px 7px!important;
  border-radius:8px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-rows:auto!important;
  gap:1px!important;
  line-height:1.08!important;
}
.document-cell .transport-doc-link span,
.transport-doc-link span{
  font-size:.56rem!important;
  line-height:1!important;
  letter-spacing:.035em!important;
}
.document-cell .transport-doc-link strong,
.transport-doc-link strong{
  font-size:.67rem!important;
  max-width:100%!important;
  line-height:1.08!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.document-cell .transport-doc-link .doc-status,
.transport-doc-link .doc-status{
  justify-self:start!important;
  font-size:.56rem!important;
  line-height:1!important;
  padding:2px 5px!important;
  margin-top:2px!important;
}
.document-cell .transport-doc-empty,
.transport-doc-empty{
  color:#91a9c9!important;
  font-size:.72rem!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.transport-doc-menu{
  display:none!important;
}
.actions-cell .compact-action{
  width:96px!important;
  max-width:96px!important;
  height:30px!important;
  min-height:30px!important;
}
@media(max-width:1180px){
  .transport-request-list{overflow-x:auto!important;}
  .transport-compact-list{min-width:1110px!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:190px 180px 170px 188px 245px 92px!important;
    column-gap:12px!important;
  }
}
@media(max-width:820px){
  .transport-request-list{overflow-x:visible!important;}
  .transport-compact-list{min-width:0!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:1fr!important;
  }
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select{
    width:100%!important;
    max-width:230px!important;
    min-width:0!important;
  }
  .document-cell .transport-document-summary,
  .transport-document-summary{
    justify-content:flex-start!important;
  }
  .document-cell .transport-doc-link,
  .transport-doc-link{
    max-width:145px!important;
  }
}

/* =========================================================
   Fase 4C.1 v52 - documentboxen lang en onder elkaar
   ========================================================= */
.document-cell{
  align-items:center!important;
  overflow:visible!important;
}
.document-cell .transport-document-summary,
.transport-document-summary{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:6px!important;
  width:100%!important;
  max-width:310px!important;
  min-width:0!important;
}
.document-cell .transport-doc-link,
.transport-doc-link{
  width:100%!important;
  max-width:310px!important;
  min-height:32px!important;
  padding:5px 8px!important;
  border-radius:9px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:7px!important;
  row-gap:0!important;
  line-height:1.1!important;
}
.document-cell .transport-doc-link span,
.transport-doc-link span{
  font-size:.57rem!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  opacity:.9!important;
  white-space:nowrap!important;
}
.document-cell .transport-doc-link strong,
.transport-doc-link strong{
  font-size:.68rem!important;
  line-height:1.1!important;
  font-weight:800!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  min-width:0!important;
}
.document-cell .transport-doc-link .doc-status,
.transport-doc-link .doc-status{
  justify-self:end!important;
  align-self:center!important;
  font-size:.56rem!important;
  line-height:1!important;
  padding:3px 6px!important;
  margin-top:0!important;
  white-space:nowrap!important;
}
.document-cell .transport-doc-empty,
.transport-doc-empty{
  display:flex!important;
  align-items:center!important;
  min-height:32px!important;
  width:100%!important;
  max-width:310px!important;
  padding:5px 8px!important;
  border:1px dashed rgba(148,163,184,.22)!important;
  border-radius:9px!important;
  color:#91a9c9!important;
  font-size:.68rem!important;
  font-weight:760!important;
  white-space:nowrap!important;
}
@media(max-width:1180px){
  .transport-compact-list{min-width:1140px!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:190px 180px 160px 188px 285px 92px!important;
  }
  .document-cell .transport-document-summary,
  .transport-document-summary,
  .document-cell .transport-doc-link,
  .transport-doc-link{
    max-width:285px!important;
  }
}
@media(max-width:820px){
  .document-cell .transport-document-summary,
  .transport-document-summary,
  .document-cell .transport-doc-link,
  .transport-doc-link,
  .document-cell .transport-doc-empty,
  .transport-doc-empty{
    max-width:100%!important;
  }
}

/* =========================================================
   Fase 4C.1 v53 - status volledig leesbaar
   ========================================================= */
@media (min-width: 981px){
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:
      minmax(180px,1fr)
      minmax(170px,.9fr)
      minmax(185px,.95fr)
      230px
      minmax(300px,1.15fr)
      100px!important;
    column-gap:14px!important;
  }
}
.transport-cell.status-cell{
  min-width:230px!important;
  width:230px!important;
  max-width:230px!important;
}
.status-cell .transport-status-control,
.transport-status-control{
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
}
.transport-status-select{
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 30px 0 12px!important;
  font-size:.74rem!important;
  font-weight:760!important;
  letter-spacing:-.02em!important;
  line-height:34px!important;
  text-overflow:clip!important;
}
.transport-status-select option{
  font-size:.82rem!important;
  font-weight:700!important;
}
.transport-status-stepper{
  width:230px!important;
  min-width:230px!important;
}
@media (max-width: 980px){
  .transport-cell.status-cell,
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select,
  .transport-status-stepper{
    width:100%!important;
    min-width:0!important;
    max-width:260px!important;
  }
  .transport-status-select{
    font-size:.78rem!important;
  }
}

/* =========================================================
   Fase 4C.1 v54 - acties binnen kader + kolommen in balans
   ========================================================= */
@media (min-width: 981px){
  .transport-list-card-full,
  .transport-list-card{
    overflow:hidden!important;
  }
  .transport-request-list{
    overflow-x:hidden!important;
    width:100%!important;
  }
  .transport-compact-list{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .transport-compact-head,
  .transport-compact-row{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    grid-template-columns:
      minmax(170px,1fr)
      minmax(155px,.9fr)
      minmax(145px,.82fr)
      220px
      minmax(230px,1.08fr)
      86px!important;
    column-gap:12px!important;
  }
  .transport-cell,
  .transport-cell strong,
  .transport-cell small{
    min-width:0!important;
  }
  .transport-cell.status-cell{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .status-cell .transport-status-control,
  .transport-status-control{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .transport-status-select{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
    font-size:.73rem!important;
    padding-left:11px!important;
    padding-right:28px!important;
  }
  .transport-status-stepper{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .document-cell{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .document-cell .transport-document-summary,
  .transport-document-summary,
  .document-cell .transport-doc-link,
  .transport-doc-link,
  .document-cell .transport-doc-empty,
  .transport-doc-empty{
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .document-cell .transport-doc-link,
  .transport-doc-link{
    grid-template-columns:54px minmax(0,1fr) auto!important;
    column-gap:6px!important;
  }
  .actions-cell{
    justify-self:end!important;
    justify-content:flex-end!important;
    width:86px!important;
    min-width:0!important;
    max-width:86px!important;
    overflow:visible!important;
  }
  .actions-cell .compact-action{
    width:86px!important;
    max-width:86px!important;
    min-width:0!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}
@media (max-width: 1180px) and (min-width: 981px){
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:
      minmax(160px,1fr)
      minmax(145px,.86fr)
      minmax(135px,.78fr)
      214px
      minmax(210px,1fr)
      82px!important;
    column-gap:10px!important;
  }
  .transport-cell.status-cell,
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select,
  .transport-status-stepper{
    width:214px!important;
    min-width:214px!important;
    max-width:214px!important;
  }
  .actions-cell,
  .actions-cell .compact-action{
    width:82px!important;
    max-width:82px!important;
  }
}

/* Fase 4C.1 v59 - publieke offerte acceptatiepagina */
.public-accept-page{min-height:100vh;background:linear-gradient(135deg,#08111f,#0f2138);padding:28px;display:flex;align-items:flex-start;justify-content:center;color:#eef7ff;font-family:Inter,Arial,sans-serif}
.public-accept-card{width:min(920px,100%);background:rgba(15,30,51,.94);border:1px solid rgba(124,171,230,.22);border-radius:22px;padding:28px;box-shadow:0 22px 60px rgba(0,0,0,.25)}
.public-quote-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.public-quote-summary>div,.public-transport-box{background:rgba(8,17,31,.62);border:1px solid rgba(124,171,230,.18);border-radius:16px;padding:14px}
.public-quote-summary span,.public-transport-box dt{display:block;color:#9fc4f4;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.public-quote-summary strong,.public-transport-box dd{margin:0;color:#fff;font-weight:800}
.public-transport-box{margin-top:12px}.public-transport-box h2{font-size:1rem;margin:0 0 10px}.public-transport-box dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.public-items>div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(124,171,230,.16);padding:9px 0}.public-items>div:first-child{border-top:0}.public-response-note{margin-top:18px}.public-accept-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.public-accept-result{background:rgba(8,17,31,.62);border:1px solid rgba(124,171,230,.18);border-radius:18px;padding:24px}.success-result{border-color:rgba(34,197,94,.35)}.warn-result{border-color:rgba(245,158,11,.35)}.error-result{border-color:rgba(248,113,113,.38)}.public-accept-notice{padding:12px 14px;border:1px solid rgba(26,159,232,.25);background:rgba(26,159,232,.10);border-radius:14px;margin:14px 0;color:#bfdbfe}
@media(max-width:760px){.public-accept-page{padding:14px}.public-accept-card{padding:18px;border-radius:18px}.public-quote-summary,.public-transport-box dl{grid-template-columns:1fr}.public-accept-actions .btn{width:100%}}


/* =========================================================
   Fase 4C.1 v61.1 - Documentkoppelingen + acties binnen kader
   ========================================================= */
@media (min-width: 761px){
  main:has(#documentsBody) .table{
    table-layout: fixed !important;
  }
  main:has(#documentsBody) .table th:nth-child(1),
  main:has(#documentsBody) .table td:nth-child(1){width:9% !important;}
  main:has(#documentsBody) .table th:nth-child(2),
  main:has(#documentsBody) .table td:nth-child(2){width:19% !important;}
  main:has(#documentsBody) .table th:nth-child(3),
  main:has(#documentsBody) .table td:nth-child(3){width:16% !important;}
  main:has(#documentsBody) .table th:nth-child(4),
  main:has(#documentsBody) .table td:nth-child(4){width:17% !important;}
  main:has(#documentsBody) .table th:nth-child(5),
  main:has(#documentsBody) .table td:nth-child(5){width:11% !important;}
  main:has(#documentsBody) .table th:nth-child(6),
  main:has(#documentsBody) .table td:nth-child(6){width:12% !important;}
  main:has(#documentsBody) .table th:nth-child(7),
  main:has(#documentsBody) .table td:nth-child(7){width:16% !important;}

  main:has(#documentsBody) .table td.actions-cell.documents-actions-cell{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
  main:has(#documentsBody) .table td.actions-cell.documents-actions-cell .btn,
  main:has(#documentsBody) .table td.actions-cell.documents-actions-cell .btn-small{
    margin-right:0 !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 14px !important;
  }
  main:has(#documentsBody) .table td.actions-cell.documents-actions-cell .safe-action-select.documents-action-select{
    width:116px !important;
    min-width:116px !important;
    max-width:116px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 32px 0 13px !important;
    border-radius:12px !important;
    font-size:.84rem !important;
    font-weight:750 !important;
    background-position:right 10px center !important;
    background-size:14px 14px !important;
  }
}

.document-number-cell{
  min-width:0;
}
.document-number-main{
  display:block;
  font-weight:850;
  letter-spacing:-.01em;
  line-height:1.2;
}
.document-link-chips{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:7px;
  max-width:100%;
}
.document-link-chip{
  appearance:none;
  border:1px solid rgba(26,159,232,.30);
  background:rgba(26,159,232,.075);
  color:var(--text);
  border-radius:999px;
  padding:5px 8px;
  display:inline-grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  cursor:pointer;
  font:inherit;
  text-align:left;
  line-height:1.05;
}
.document-link-chip span{
  color:var(--blue);
  font-size:.68rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.document-link-chip strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:.78rem;
  font-weight:850;
}
.document-link-chip em{
  font-style:normal;
  border-radius:999px;
  padding:2px 6px;
  background:rgba(108,92,231,.18);
  color:#8f7dff;
  font-size:.65rem;
  font-weight:850;
  white-space:nowrap;
}
.document-link-chip:hover{
  border-color:rgba(26,159,232,.60);
  background:rgba(26,159,232,.14);
}
html[data-theme="dark"] .document-link-chip{
  border-color:rgba(26,159,232,.28);
  background:rgba(26,159,232,.08);
}
@media(max-width:760px){
  .document-link-chip{
    width:100%;
  }
  #documentsBody .document-number-cell{
    display:block !important;
  }
  #documentsBody .document-link-chips{
    width:100%;
  }
  #documentsBody .document-link-chip{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
}


/* =========================================================
   Fase 4C.1 v61.2 - documentenlijst polish
   ========================================================= */
main:has(#documentsBody) .card:has(#documentsBody){
  overflow:hidden!important;
}
main:has(#documentsBody) .table{
  width:100%!important;
  table-layout:fixed!important;
  border-collapse:collapse!important;
}
main:has(#documentsBody) .table th,
main:has(#documentsBody) .table td{
  box-sizing:border-box!important;
  vertical-align:middle!important;
}
main:has(#documentsBody) .table th:nth-child(1),
main:has(#documentsBody) .table td:nth-child(1){width:9%!important;}
main:has(#documentsBody) .table th:nth-child(2),
main:has(#documentsBody) .table td:nth-child(2){width:19%!important;}
main:has(#documentsBody) .table th:nth-child(3),
main:has(#documentsBody) .table td:nth-child(3){width:16%!important;}
main:has(#documentsBody) .table th:nth-child(4),
main:has(#documentsBody) .table td:nth-child(4){width:18%!important;}
main:has(#documentsBody) .table th:nth-child(5),
main:has(#documentsBody) .table td:nth-child(5){width:11%!important;}
main:has(#documentsBody) .table th:nth-child(6),
main:has(#documentsBody) .table td:nth-child(6){width:12%!important;}
main:has(#documentsBody) .table th:nth-child(7),
main:has(#documentsBody) .table td:nth-child(7){width:15%!important;}
main:has(#documentsBody) .table tbody td{
  padding-top:14px!important;
  padding-bottom:14px!important;
  border-bottom:1px solid var(--line)!important;
}
main:has(#documentsBody) .table tbody tr:last-child td{
  border-bottom:0!important;
}
.document-number-cell{
  min-width:0!important;
}
.document-number-open{
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  color:var(--text)!important;
  padding:0!important;
  margin:0!important;
  cursor:pointer!important;
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font:inherit!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:-.01em!important;
  text-align:left!important;
}
.document-number-open:hover{
  color:var(--blue)!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
.document-number-open:disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
  text-decoration:none!important;
}
.document-number-main{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.document-link-chips{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:4px!important;
  margin-top:7px!important;
  max-width:100%!important;
}
.document-link-chip{
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  padding:4px 7px!important;
  border-radius:9px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
  line-height:1!important;
  background:rgba(26,159,232,.075)!important;
  border-color:rgba(26,159,232,.25)!important;
}
.document-link-chip span{
  font-size:.62rem!important;
  letter-spacing:.045em!important;
  font-weight:850!important;
  color:var(--blue)!important;
}
.document-link-chip strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:.72rem!important;
  font-weight:850!important;
}
.document-link-chip em{
  font-size:.58rem!important;
  line-height:1!important;
  padding:2px 5px!important;
  border-radius:999px!important;
  font-weight:850!important;
}
main:has(#documentsBody) .table td.actions-cell.documents-actions-cell{
  display:table-cell!important;
  text-align:right!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.documents-action-wrap{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  min-width:0!important;
}
main:has(#documentsBody) .table td.actions-cell.documents-actions-cell .documents-action-select{
  width:104px!important;
  min-width:104px!important;
  max-width:104px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 30px 0 12px!important;
  border-radius:12px!important;
  font-size:.82rem!important;
  font-weight:800!important;
  background-position:right 10px center!important;
  background-size:13px 13px!important;
}
main:has(#documentsBody) .table td.status-cell,
main:has(#documentsBody) .table .status-change{
  max-width:100%!important;
}
main:has(#documentsBody) .table .status-change{
  height:40px!important;
  min-height:40px!important;
  border-radius:12px!important;
  font-size:.86rem!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
@media(max-width:920px){
  main:has(#documentsBody) .card:has(#documentsBody){overflow-x:auto!important;}
  main:has(#documentsBody) .table{min-width:820px!important;}
}
@media(max-width:760px){
  #documentsBody .document-link-chip{
    width:100%!important;
  }
}


/* =========================================================
   Fase 4C.1 v61.3 - documentenoverzicht gekoppelde kolom + typografie
   ========================================================= */
main:has(#documentsBody) .table{
  table-layout:fixed!important;
}
main:has(#documentsBody) .table th,
main:has(#documentsBody) .table td{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
main:has(#documentsBody) .table tbody td{
  font-size:.84rem!important;
  font-weight:520!important;
  line-height:1.35!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
}
main:has(#documentsBody) .table th:nth-child(1),
main:has(#documentsBody) .table td:nth-child(1){width:8%!important;}
main:has(#documentsBody) .table th:nth-child(2),
main:has(#documentsBody) .table td:nth-child(2){width:13%!important;}
main:has(#documentsBody) .table th:nth-child(3),
main:has(#documentsBody) .table td:nth-child(3){width:20%!important;}
main:has(#documentsBody) .table th:nth-child(4),
main:has(#documentsBody) .table td:nth-child(4){width:12%!important;}
main:has(#documentsBody) .table th:nth-child(5),
main:has(#documentsBody) .table td:nth-child(5){width:16%!important;}
main:has(#documentsBody) .table th:nth-child(6),
main:has(#documentsBody) .table td:nth-child(6){width:10%!important;}
main:has(#documentsBody) .table th:nth-child(7),
main:has(#documentsBody) .table td:nth-child(7){width:10%!important;}
main:has(#documentsBody) .table th:nth-child(8),
main:has(#documentsBody) .table td:nth-child(8){width:11%!important;}
.document-number-open{
  font-weight:680!important;
  font-size:.86rem!important;
  letter-spacing:-.005em!important;
}
.linked-documents-cell{
  min-width:0!important;
}
.linked-documents-cell .document-link-chips{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:5px!important;
  margin:0!important;
  width:100%!important;
  max-width:250px!important;
}
.linked-documents-cell .document-link-chip,
.linked-doc-panel .transport-doc-link{
  appearance:none!important;
  border:1px solid rgba(59,130,246,.16)!important;
  background:rgba(15,23,42,.20)!important;
  color:#dbeafe!important;
  border-radius:9px!important;
  min-height:30px!important;
  padding:5px 7px!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
  cursor:pointer!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  text-align:left!important;
  width:100%!important;
  max-width:100%!important;
  line-height:1.08!important;
}
.linked-documents-cell .document-link-chip:hover,
.linked-doc-panel .transport-doc-link:hover{
  border-color:rgba(34,158,221,.45)!important;
  background:rgba(14,165,233,.10)!important;
}
.linked-documents-cell .document-link-chip span,
.linked-doc-panel .transport-doc-link span{
  color:#93c5fd!important;
  font-size:.57rem!important;
  font-weight:780!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.linked-documents-cell .document-link-chip strong,
.linked-doc-panel .transport-doc-link strong{
  color:#fff!important;
  font-size:.68rem!important;
  font-weight:720!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  min-width:0!important;
}
.linked-documents-cell .document-link-chip .doc-status,
.linked-doc-panel .transport-doc-link .doc-status{
  justify-self:end!important;
  border-radius:999px!important;
  padding:2px 6px!important;
  color:#bfdbfe!important;
  background:rgba(59,130,246,.13)!important;
  font-size:.56rem!important;
  font-weight:760!important;
  font-style:normal!important;
  white-space:nowrap!important;
}
.linked-documents-cell .document-link-chip .doc-status.ok,
.linked-doc-panel .doc-status.ok{color:#86efac!important;background:rgba(34,197,94,.15)!important;}
.linked-documents-cell .document-link-chip .doc-status.info,
.linked-doc-panel .doc-status.info{color:#bae6fd!important;background:rgba(14,165,233,.16)!important;}
.linked-documents-cell .document-link-chip .doc-status.warn,
.linked-doc-panel .doc-status.warn{color:#fde68a!important;background:rgba(245,158,11,.16)!important;}
.linked-documents-cell .document-link-chip .doc-status.draft,
.linked-doc-panel .doc-status.draft{color:#c4b5fd!important;background:rgba(139,92,246,.14)!important;}
.document-linked-empty{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:4px 8px!important;
  border:1px dashed rgba(148,163,184,.18)!important;
  border-radius:9px!important;
  color:#8fa6c6!important;
  font-size:.70rem!important;
  font-weight:620!important;
  white-space:nowrap!important;
}
main:has(#documentsBody) .table td.actions-cell.documents-actions-cell{
  text-align:right!important;
  min-width:0!important;
}
main:has(#documentsBody) .table td.actions-cell.documents-actions-cell .documents-action-select{
  width:100px!important;
  min-width:100px!important;
  max-width:100px!important;
  font-weight:680!important;
}
main:has(#documentsBody) .table .status-change{
  font-weight:620!important;
  font-size:.82rem!important;
}
/* Consistente, iets zakelijkere tabeltypografie in transport en documenten */
.transport-compact-row,
.transport-compact-row *:not(.btn):not(button):not(select),
main:has(#documentsBody) .table tbody td,
main:has(#documentsBody) .table tbody td *:not(button):not(select){
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
.transport-compact-row strong,
.transport-compact-row b,
.transport-doc-link strong{
  font-weight:720!important;
}
.linked-doc-panel{
  margin:0 0 16px!important;
  padding:14px!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:rgba(15,27,46,.72)!important;
  display:grid!important;
  gap:10px!important;
}
.linked-doc-panel-head{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.linked-doc-panel-head strong{
  font-size:.92rem!important;
  font-weight:760!important;
}
.linked-doc-panel-head span{
  color:var(--muted)!important;
  font-size:.78rem!important;
}
.linked-doc-panel-list{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.linked-doc-panel .transport-doc-link{
  width:260px!important;
  max-width:100%!important;
}
@media(max-width:920px){
  main:has(#documentsBody) .table{min-width:980px!important;}
}
@media(max-width:760px){
  #documentsBody td:nth-child(1)::before { content:"Type"; }
  #documentsBody td:nth-child(2)::before { content:"Nummer"; }
  #documentsBody td:nth-child(3)::before { content:"Gekoppeld"; }
  #documentsBody td:nth-child(4)::before { content:"Klant"; }
  #documentsBody td:nth-child(5)::before { content:"Status"; }
  #documentsBody td:nth-child(6)::before { content:"Totaal"; }
  #documentsBody td:nth-child(7)::before { content:"Datum"; }
  #documentsBody td:nth-child(8)::before { content:"Acties"; }
  #documentsBody .linked-documents-cell .document-link-chips,
  #documentsBody .linked-documents-cell .document-link-chip{width:100%!important;max-width:100%!important;}
  .linked-doc-panel-head{display:grid!important;}
  .linked-doc-panel .transport-doc-link{width:100%!important;}
}


/* =========================================================
   Fase 4C.1 v61.4 - gekoppelde documentchips zonder status
   ========================================================= */
.linked-documents-cell .document-link-chip,
.linked-doc-panel .transport-doc-link{
  grid-template-columns:58px minmax(0,1fr)!important;
  min-height:28px!important;
  padding:5px 8px!important;
  gap:7px!important;
}
.linked-documents-cell .document-link-chip .doc-status,
.linked-doc-panel .transport-doc-link .doc-status{
  display:none!important;
}
.linked-documents-cell .document-link-chip span,
.linked-doc-panel .transport-doc-link span{
  font-size:.56rem!important;
  letter-spacing:.045em!important;
}
.linked-documents-cell .document-link-chip strong,
.linked-doc-panel .transport-doc-link strong{
  font-size:.69rem!important;
  font-weight:700!important;
}
.linked-documents-cell .document-link-chips{
  max-width:230px!important;
}
.linked-doc-panel .linked-doc-panel-list{
  gap:6px!important;
}

/* =========================================================
   Fase 4C.1 v61.5 - gekoppelde documentchips normaal formaat
   ========================================================= */
main:has(#documentsBody) .linked-documents-cell .document-link-chips{
  align-items:flex-start!important;
  width:auto!important;
  max-width:none!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip{
  width:auto!important;
  max-width:180px!important;
  min-width:0!important;
  display:inline-grid!important;
  grid-template-columns:auto auto!important;
  min-height:26px!important;
  padding:4px 8px!important;
  gap:8px!important;
  border-radius:8px!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip span{
  font-size:.54rem!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip strong{
  font-size:.68rem!important;
  max-width:105px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
main:has(#documentsBody) .document-linked-empty{
  min-height:24px!important;
  padding:4px 7px!important;
  font-size:.66rem!important;
  border-radius:8px!important;
}
@media(max-width:760px){
  #documentsBody .linked-documents-cell .document-link-chips{
    align-items:flex-end!important;
    width:auto!important;
    max-width:none!important;
  }
  #documentsBody .linked-documents-cell .document-link-chip{
    width:auto!important;
    max-width:180px!important;
  }
}

/* =========================================================
   Fase 4C.1 v61.6 - documentenoverzicht centreren + compacter
   ========================================================= */
main:has(#documentsBody) .table{
  table-layout:fixed!important;
}
main:has(#documentsBody) .table thead th,
main:has(#documentsBody) .table tbody td{
  vertical-align:middle!important;
}
main:has(#documentsBody) .table tbody td{
  padding-top:10px!important;
  padding-bottom:10px!important;
}
main:has(#documentsBody) .table tbody tr{
  min-height:unset!important;
}
/* Rustigere uitlijning per kolom */
main:has(#documentsBody) .table th:nth-child(1),
main:has(#documentsBody) .table td:nth-child(1),
main:has(#documentsBody) .table th:nth-child(2),
main:has(#documentsBody) .table td:nth-child(2),
main:has(#documentsBody) .table th:nth-child(4),
main:has(#documentsBody) .table td:nth-child(4){
  text-align:left!important;
}
main:has(#documentsBody) .table th:nth-child(3),
main:has(#documentsBody) .table td:nth-child(3),
main:has(#documentsBody) .table th:nth-child(5),
main:has(#documentsBody) .table td:nth-child(5),
main:has(#documentsBody) .table th:nth-child(6),
main:has(#documentsBody) .table td:nth-child(6),
main:has(#documentsBody) .table th:nth-child(7),
main:has(#documentsBody) .table td:nth-child(7),
main:has(#documentsBody) .table th:nth-child(8),
main:has(#documentsBody) .table td:nth-child(8){
  text-align:center!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chips{
  align-items:center!important;
  justify-content:center!important;
}
main:has(#documentsBody) .table td:nth-child(5) .status-change,
main:has(#documentsBody) .table td:nth-child(8) .documents-action-select{
  margin-left:auto!important;
  margin-right:auto!important;
}
/* Betaaltekst onder status verwijderen voor compactere regels */
main:has(#documentsBody) .payment-status-note,
main:has(#documentsBody) .status-payment-note,
main:has(#documentsBody) .document-payment-note,
#documentsBody .payment-status-note,
#documentsBody .status-payment-note,
#documentsBody .document-payment-note{
  display:none!important;
}
/* Tabel-tekst iets rustiger en minder zwaar */
main:has(#documentsBody) .table tbody td,
main:has(#documentsBody) .table tbody td strong,
main:has(#documentsBody) .document-number-open{
  font-weight:620!important;
}
main:has(#documentsBody) .document-number-open{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip,
main:has(#documentsBody) .document-linked-empty{
  margin-top:0!important;
  margin-bottom:0!important;
}
@media(max-width:760px){
  main:has(#documentsBody) .table tbody td{
    text-align:left!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  #documentsBody .linked-documents-cell .document-link-chips{
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  #documentsBody .status-change,
  #documentsBody .documents-action-select{
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* =========================================================
   Fase 4C.1 v62 - transportorder extra gegevens
   ========================================================= */
.transport-form-extended{
  display:grid;
  gap:18px;
}
.transport-form-section{
  padding:16px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:rgba(15,23,42,.16);
}
.transport-form-section h3{
  margin:0 0 4px;
  font-family:Inter,system-ui,sans-serif;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:-.01em;
}
.transport-form-section .section-title-row{
  margin-bottom:12px;
}
.transport-form-section .muted{
  margin:0;
  font-size:.86rem;
}
.transport-form-extended .notes-grid textarea{
  min-height:88px;
}
.transport-route-contact,
.transport-execution-meta{
  display:block;
  color:var(--muted);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.transport-request-date{
  color:rgba(186,218,255,.9)!important;
}
@media(max-width:780px){
  .transport-form-section{padding:13px;border-radius:16px;}
  .transport-form-section .section-title-row{margin-bottom:10px;}
  .transport-form-extended{gap:14px;}
}

/* =========================================================
   Fase 4D v63 - Transport planning basis
   ========================================================= */
.transport-planning-page .topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.planning-toolbar-card{padding:18px 20px!important}
.planning-quick-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.planning-controls{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(150px,.8fr) minmax(170px,1fr) minmax(170px,1fr) minmax(220px,1.4fr);gap:12px;align-items:end;margin-top:14px}
.planning-controls .field{margin:0!important}.planning-controls label{font-size:.72rem!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--muted-strong,var(--muted));font-weight:700}
.planning-controls input,.planning-controls select,.planning-status-select{min-height:38px!important;height:38px!important;padding:0 12px!important;border-radius:11px!important;font-size:.88rem!important;font-weight:600!important;line-height:1.1!important}
.planning-board-card,.planning-driver-card{padding:18px 20px!important}.planning-board{margin-top:8px}.planning-table{display:grid;border:1px solid rgba(148,163,184,.18);border-radius:16px;overflow:hidden;background:rgba(15,23,42,.18)}
.planning-table-head,.planning-table-row{display:grid;grid-template-columns:92px minmax(150px,1fr) minmax(210px,1.35fr) minmax(170px,1fr) minmax(145px,.9fr) 170px 92px;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.16)}
.planning-table-head{background:rgba(148,163,184,.09);color:#a9c7ed;text-transform:uppercase;letter-spacing:.06em;font-size:.73rem;font-weight:700}.planning-table-row:last-child{border-bottom:0}.planning-table-row strong{font-weight:650;font-size:.91rem;color:#f3f8ff}.planning-table-row small{display:block;margin-top:3px;color:#92b9e8;font-size:.76rem;line-height:1.25}.planning-status-select{width:100%!important;max-width:168px!important}.week-planning-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px}.week-day-card{border:1px solid rgba(148,163,184,.18);border-radius:15px;background:rgba(15,23,42,.18);min-height:190px;padding:10px}.week-day-head{display:flex;justify-content:space-between;align-items:center;color:#a9c7ed;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:800;margin-bottom:8px}.week-day-head span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:rgba(14,165,233,.16);color:#d9f0ff}.week-ride-card{display:block;text-decoration:none;border:1px solid rgba(56,189,248,.16);border-radius:12px;padding:8px 9px;margin-bottom:7px;background:rgba(2,6,23,.24);color:inherit}.week-ride-card:hover{border-color:rgba(56,189,248,.36);background:rgba(14,165,233,.10)}.week-ride-card span{font-size:.74rem;color:#7dd3fc;font-weight:800}.week-ride-card strong{display:block;margin-top:2px;font-size:.84rem}.week-ride-card small,.week-ride-card em{display:block;margin-top:2px;color:#96bde9;font-size:.72rem;font-style:normal;line-height:1.25}.week-empty{font-size:.8rem;margin:10px 0 0}.driver-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:8px}.driver-summary-card{border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.18);padding:13px}.driver-summary-card>div{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}.driver-summary-card strong{font-weight:650}.driver-summary-card span{color:#91b7e5;font-size:.78rem;font-weight:700}.driver-summary-card ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.driver-summary-card li{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:start;padding-top:7px;border-top:1px solid rgba(148,163,184,.12)}.driver-summary-card li span{font-size:.74rem;color:#7dd3fc}.driver-summary-card li strong{font-size:.84rem}.driver-summary-card li small{grid-column:2;color:#92b9e8;font-size:.74rem;line-height:1.25}
@media(max-width:1180px){.planning-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.planning-search-field{grid-column:1/-1}.planning-table{overflow-x:auto}.planning-table-head,.planning-table-row{min-width:980px}.week-planning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.transport-planning-page .topbar{gap:12px}.transport-planning-page .topbar-actions{width:100%;justify-content:stretch}.transport-planning-page .topbar-actions .btn{flex:1}.planning-controls{grid-template-columns:1fr}.planning-quick-actions{width:100%;justify-content:stretch}.planning-quick-actions .btn{flex:1}.planning-table{display:grid;gap:10px;border:0;background:transparent;overflow:visible}.planning-table-head{display:none}.planning-table-row{display:grid;grid-template-columns:1fr;min-width:0;padding:13px;border:1px solid rgba(148,163,184,.18);border-radius:15px;background:rgba(15,23,42,.20)}.planning-table-row>div{display:grid;grid-template-columns:112px 1fr;gap:10px}.planning-table-row>div::before{content:attr(data-label);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8fb3df;font-weight:800}.planning-status-select{max-width:none!important}.week-planning-grid{grid-template-columns:1fr}.driver-board{grid-template-columns:1fr}}

/* =========================================================
   Fase 4D v64 - Nog te plannen + echte planning
   ========================================================= */
.transport-planning-page .transport-stats{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.planning-unplanned-card{
  padding:18px 20px!important;
}
.planning-count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(14,165,233,.14);
  border:1px solid rgba(56,189,248,.22);
  color:#d9f0ff;
  font-size:.82rem;
  font-weight:750;
}
.planning-unplanned-board{
  margin-top:10px;
}
.unplanned-list{
  display:grid;
  gap:9px;
}
.unplanned-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(220px,1.35fr) minmax(330px,1.55fr) auto;
  gap:12px;
  align-items:center;
  padding:11px 12px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:14px;
  background:rgba(15,23,42,.16);
}
.unplanned-row:hover{
  border-color:rgba(56,189,248,.26);
  background:rgba(14,165,233,.06);
}
.unplanned-main strong,
.unplanned-route span{
  display:block;
  color:var(--text);
  font-size:.9rem;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.unplanned-main small,
.unplanned-route small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.unplanned-plan-fields{
  display:grid;
  grid-template-columns:minmax(175px,1fr) minmax(135px,.85fr);
  gap:9px;
  align-items:end;
}
.unplanned-plan-fields label{
  display:grid;
  gap:4px;
  margin:0!important;
}
.unplanned-plan-fields label span{
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  font-weight:750;
}
.unplanned-plan-fields input{
  min-height:34px!important;
  height:34px!important;
  padding:6px 9px!important;
  border-radius:10px!important;
  font-size:.8rem!important;
  font-weight:550!important;
}
.unplanned-actions{
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
}
.planning-empty{
  padding:16px!important;
  border-radius:14px!important;
}
.planning-empty h3{
  margin:0 0 4px;
  font-size:.98rem;
}
.planning-empty p{
  margin:0;
  font-size:.82rem;
}
.transport-planning-page .planning-table-row{
  min-height:58px;
  padding-top:10px!important;
  padding-bottom:10px!important;
}
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:88px minmax(150px,1fr) minmax(230px,1.45fr) minmax(165px,.95fr) minmax(145px,.85fr) 160px 82px;
}
.transport-planning-page .planning-table-row strong{
  font-weight:620!important;
}
.transport-planning-page .planning-table-row small{
  font-size:.74rem!important;
}
@media(max-width:1280px){
  .transport-planning-page .transport-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .unplanned-row{grid-template-columns:1fr 1.25fr;}
  .unplanned-plan-fields{grid-column:1/-1;}
  .unplanned-actions{grid-column:1/-1;justify-content:flex-start;}
}
@media(max-width:760px){
  .transport-planning-page .transport-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .planning-unplanned-card{padding:15px!important;}
  .unplanned-row{grid-template-columns:1fr;gap:9px;padding:12px;}
  .unplanned-main strong,.unplanned-route span,.unplanned-main small,.unplanned-route small{white-space:normal;}
  .unplanned-plan-fields{grid-template-columns:1fr;}
  .unplanned-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .unplanned-actions .btn{width:100%;}
}
@media(max-width:520px){
  .transport-planning-page .transport-stats{grid-template-columns:1fr 1fr;}
  .unplanned-actions{grid-template-columns:1fr;}
}


/* =========================================================
   Fase 4D v65 - planning regel polish + automatisch naar plandatum
   ========================================================= */
.planning-unplanned-card .compact-title-row{
  align-items:flex-start;
}
.unplanned-row{
  grid-template-columns:minmax(170px,.9fr) minmax(230px,1.15fr) minmax(190px,.78fr) minmax(170px,.70fr) auto!important;
  gap:12px!important;
  padding:12px 13px!important;
}
.unplanned-inline-field{
  display:grid;
  gap:4px;
  margin:0!important;
  min-width:0;
}
.unplanned-inline-field span{
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  font-weight:750;
}
.unplanned-inline-field input{
  width:100%!important;
  min-height:34px!important;
  height:34px!important;
  padding:6px 9px!important;
  border-radius:10px!important;
  font-size:.8rem!important;
  font-weight:550!important;
}
.unplanned-actions{
  align-self:end;
  min-width:max-content;
  gap:7px!important;
}
.unplanned-actions .compact-action{
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  white-space:nowrap!important;
}
@media(max-width:1320px){
  .unplanned-row{
    grid-template-columns:minmax(170px,1fr) minmax(220px,1.25fr) minmax(180px,.8fr) minmax(160px,.8fr)!important;
  }
  .unplanned-actions{
    grid-column:1/-1;
    justify-content:flex-start;
    align-self:start;
  }
}
@media(max-width:860px){
  .unplanned-row{
    grid-template-columns:1fr 1fr!important;
  }
  .unplanned-main,
  .unplanned-route,
  .unplanned-actions{
    grid-column:1/-1;
  }
}
@media(max-width:620px){
  .unplanned-row{
    grid-template-columns:1fr!important;
  }
  .unplanned-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
}


/* =========================================================
   Fase 4D v66 - Planning uitstellen / terug naar nog te plannen
   ========================================================= */
.planning-actions-cell{
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.planning-actions-cell .compact-action{
  height:34px!important;
  min-height:34px!important;
  padding:0 11px!important;
  font-size:.78rem!important;
}
.planning-actions-cell .subtle{
  color:#cfe6ff!important;
  background:rgba(15,23,42,.34)!important;
  border-color:rgba(148,163,184,.20)!important;
}
.planning-actions-cell .subtle:hover{
  background:rgba(14,165,233,.12)!important;
  border-color:rgba(56,189,248,.32)!important;
}
body.planning-modal-open{
  overflow:hidden;
}
.planning-postpone-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.planning-postpone-modal.is-open{
  display:flex;
}
.planning-postpone-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(7px);
}
.planning-postpone-panel{
  position:relative;
  width:min(620px,100%);
  max-height:min(92vh,760px);
  overflow:auto;
  border:1px solid rgba(148,163,184,.22);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(8,17,31,.98));
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  padding:20px;
}
.planning-postpone-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.planning-postpone-head h2{
  margin:0 0 4px;
  font-size:1.08rem;
}
.planning-postpone-head p{
  margin:0;
  font-size:.86rem;
  line-height:1.45;
}
.planning-postpone-summary{
  display:grid;
  gap:3px;
  padding:12px 13px;
  margin-bottom:14px;
  border:1px solid rgba(56,189,248,.16);
  border-radius:14px;
  background:rgba(14,165,233,.07);
}
.planning-postpone-summary strong{
  font-size:.94rem;
  font-weight:650;
}
.planning-postpone-summary span,
.planning-postpone-summary small{
  color:#9fc4ed;
  font-size:.78rem;
}
.planning-postpone-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.planning-postpone-panel .field{
  margin:0 0 12px!important;
}
.planning-postpone-panel .field span,
.planning-postpone-panel .field label,
.planning-postpone-panel label.field>span{
  display:block;
  margin-bottom:6px;
  color:#a9c7ed;
  font-size:.72rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  font-weight:750;
}
.planning-postpone-panel input,
.planning-postpone-panel textarea{
  width:100%!important;
  font-size:.86rem!important;
}
.planning-postpone-check{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  margin:2px 0 13px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:13px;
  background:rgba(15,23,42,.18);
  color:#dcecff;
  font-size:.86rem;
  font-weight:600;
}
.planning-postpone-check input{
  width:18px!important;
  height:18px!important;
  min-height:18px!important;
  margin:0!important;
  accent-color:#38bdf8;
}
.planning-postpone-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:14px;
}
@media(max-width:720px){
  .planning-postpone-panel{padding:16px;border-radius:18px;}
  .planning-postpone-grid{grid-template-columns:1fr;gap:0;}
  .planning-postpone-actions{display:grid;grid-template-columns:1fr;}
  .planning-postpone-actions .btn{width:100%;}
}


/* =========================================================
   Fase 4D v67 - planning indeling + ritten per chauffeur polish
   ========================================================= */
.transport-planning-page .planning-board-card,
.transport-planning-page .planning-driver-card{
  padding:18px 20px!important;
}
.transport-planning-page .planning-table{
  width:100%;
}
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:78px minmax(170px,1.08fr) minmax(190px,1.12fr) minmax(160px,.95fr) minmax(145px,.82fr) 158px 92px!important;
  gap:14px!important;
  align-items:center!important;
}
.transport-planning-page .planning-table-head{
  text-align:left;
}
.transport-planning-page .planning-table-head span,
.transport-planning-page .planning-table-row > div{
  min-width:0;
}
.transport-planning-page .planning-table-row{
  min-height:54px!important;
  padding:10px 14px!important;
}
.transport-planning-page .planning-table-row strong{
  display:block;
  font-size:.86rem!important;
  font-weight:600!important;
  line-height:1.25!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.transport-planning-page .planning-table-row small,
.transport-planning-page .planning-table-row em{
  display:block;
  margin-top:2px;
  color:#93b9e6;
  font-size:.70rem!important;
  font-style:normal;
  line-height:1.22!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.transport-planning-page .planning-time-cell{
  text-align:center;
}
.transport-planning-page .planning-time-cell strong{
  font-size:.92rem!important;
  color:#f8fbff!important;
}
.transport-planning-page .planning-customer-cell em{
  color:#76d8ff;
  font-weight:650;
}
.transport-planning-page .planning-status-select{
  max-width:158px!important;
  height:36px!important;
  min-height:36px!important;
  font-size:.80rem!important;
  font-weight:650!important;
}
.transport-planning-page .planning-actions-cell{
  justify-content:center!important;
  gap:6px!important;
}
.transport-planning-page .planning-actions-cell .compact-action{
  height:32px!important;
  min-height:32px!important;
  padding:0 10px!important;
  font-size:.74rem!important;
}
.driver-board{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.driver-summary-card-wide{
  padding:12px!important;
}
.driver-summary-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:8px!important;
}
.driver-summary-list{
  display:grid;
  gap:0;
  border:1px solid rgba(148,163,184,.12);
  border-radius:12px;
  overflow:hidden;
  background:rgba(2,6,23,.12);
}
.driver-ride-line{
  display:grid;
  grid-template-columns:58px minmax(145px,.95fr) minmax(190px,1.2fr) minmax(145px,.9fr) 112px;
  gap:12px;
  align-items:center;
  padding:9px 10px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(148,163,184,.10);
}
.driver-ride-line:last-child{border-bottom:0;}
.driver-ride-line:hover{
  background:rgba(14,165,233,.07);
}
.driver-ride-time{
  color:#7dd3fc;
  font-size:.78rem;
  font-weight:800;
  text-align:center;
}
.driver-ride-main strong{
  display:block;
  font-size:.84rem;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.driver-ride-main small,
.driver-ride-route,
.driver-ride-object,
.driver-ride-status{
  color:#93b9e6;
  font-size:.73rem;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.driver-ride-status{
  justify-self:start;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(14,165,233,.10);
  border:1px solid rgba(56,189,248,.16);
  color:#d9f0ff;
  font-weight:650;
}
@media(max-width:1180px){
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{
    min-width:1040px!important;
  }
}
@media(max-width:860px){
  .driver-ride-line{
    grid-template-columns:54px 1fr;
    gap:8px 10px;
  }
  .driver-ride-route,
  .driver-ride-object,
  .driver-ride-status{
    grid-column:2;
  }
}
@media(max-width:720px){
  .transport-planning-page .planning-table-row{
    min-height:0!important;
  }
  .transport-planning-page .planning-table-row strong,
  .transport-planning-page .planning-table-row small,
  .transport-planning-page .planning-table-row em{
    white-space:normal;
  }
  .transport-planning-page .planning-time-cell{
    text-align:left;
  }
  .transport-planning-page .planning-actions-cell{
    justify-content:flex-start!important;
  }
}


/* =========================================================
   Fase 4D v68 - dagplanning klantinformatie netter
   ========================================================= */
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:76px minmax(180px,1.05fr) minmax(200px,1.12fr) minmax(170px,.95fr) minmax(145px,.82fr) 158px 92px!important;
  gap:16px!important;
}
.transport-planning-page .planning-customer-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
}
.transport-planning-page .planning-customer-cell strong,
.transport-planning-page .planning-customer-cell small{
  max-width:100%;
}
.transport-planning-page .planning-request-chip{
  display:inline-flex;
  align-items:center;
  width:auto;
  max-width:100%;
  margin-top:2px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.18);
  background:rgba(14,165,233,.10);
  color:#78dcff;
  font-size:.68rem;
  line-height:1.15;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.transport-planning-page .planning-time-cell small{
  color:#93b9e6!important;
  font-size:.68rem!important;
}
.transport-planning-page .planning-table-row{
  min-height:50px!important;
}
.transport-planning-page .planning-table-row > div{
  align-self:center;
}
@media(max-width:720px){
  .transport-planning-page .planning-request-chip{
    white-space:normal;
  }
}


/* =========================================================
   Fase 4D v69 - planningrijen echt netter + cachebuster
   ========================================================= */
.transport-planning-page .planning-table{
  width:100%!important;
  overflow:hidden!important;
}
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:86px minmax(150px,1.05fr) minmax(185px,1.08fr) minmax(210px,1.16fr) minmax(145px,.82fr) minmax(150px,.88fr) 92px!important;
  gap:14px!important;
  align-items:center!important;
  padding:13px 16px!important;
}
.transport-planning-page .planning-table-head span,
.transport-planning-page .planning-table-row > div{
  min-width:0!important;
}
.transport-planning-page .planning-time-cell{
  text-align:center!important;
  align-items:center!important;
}
.transport-planning-page .planning-time-cell strong{
  display:block!important;
  font-size:.98rem!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.transport-planning-page .planning-time-cell small{
  display:block!important;
  margin-top:3px!important;
  font-size:.70rem!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.transport-planning-page .planning-customer-cell{
  display:grid!important;
  gap:2px!important;
  justify-items:start!important;
  align-content:center!important;
}
.transport-planning-page .planning-customer-cell strong,
.transport-planning-page .planning-route-cell strong,
.transport-planning-page .planning-object-cell strong,
.transport-planning-page .planning-driver-cell strong{
  font-weight:650!important;
  font-size:.88rem!important;
  line-height:1.18!important;
}
.transport-planning-page .planning-customer-cell small,
.transport-planning-page .planning-route-cell small,
.transport-planning-page .planning-object-cell small,
.transport-planning-page .planning-driver-cell small{
  margin-top:2px!important;
  font-size:.73rem!important;
  line-height:1.22!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:none!important;
  display:block!important;
}
.transport-planning-page .planning-request-chip{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:4px!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  border:1px solid rgba(56,189,248,.22)!important;
  background:rgba(14,165,233,.10)!important;
  color:#7dd3fc!important;
  font-size:.68rem!important;
  line-height:1.25!important;
  font-weight:750!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.transport-planning-page .planning-object-cell{
  overflow:visible!important;
}
.transport-planning-page .planning-object-cell small{
  color:#94c6f5!important;
}
.transport-planning-page .planning-status-select{
  max-width:150px!important;
  min-height:38px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
}
.transport-planning-page .planning-actions-cell{
  justify-content:flex-end!important;
  align-items:center!important;
  gap:7px!important;
}
.transport-planning-page .driver-summary-card-wide{
  padding:14px!important;
}
.transport-planning-page .driver-summary-list{
  display:grid!important;
  gap:0!important;
}
.transport-planning-page .driver-ride-line{
  grid-template-columns:70px minmax(150px,.9fr) minmax(180px,1fr) minmax(180px,1fr) minmax(120px,.7fr)!important;
  gap:14px!important;
  align-items:center!important;
}
.transport-planning-page .driver-ride-object,
.transport-planning-page .driver-ride-route{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(max-width:1180px){
  .transport-planning-page .planning-table{overflow-x:auto!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:1040px!important;}
}
@media(max-width:720px){
  .transport-planning-page .planning-table{overflow:visible!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:0!important;}
  .transport-planning-page .planning-time-cell{text-align:left!important;align-items:start!important;}
  .transport-planning-page .planning-status-select{max-width:none!important;}
}


/* =========================================================
   Fase 4D v70 - dagplanning kolommen uitlijnen + objectprijs
   ========================================================= */
.transport-planning-page .planning-table{
  width:100%!important;
  overflow:hidden!important;
}
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:84px minmax(185px,1fr) minmax(210px,1.05fr) minmax(220px,1.08fr) minmax(155px,.72fr) minmax(150px,.70fr) 84px!important;
  gap:18px!important;
  padding:12px 14px!important;
  align-items:center!important;
}
.transport-planning-page .planning-table-head span{
  justify-self:start!important;
  text-align:left!important;
  padding:0!important;
}
.transport-planning-page .planning-table-row > div{
  justify-self:stretch!important;
  text-align:left!important;
  min-width:0!important;
}
.transport-planning-page .planning-time-cell{
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
}
.transport-planning-page .planning-customer-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  text-align:left!important;
}
.transport-planning-page .planning-customer-cell strong,
.transport-planning-page .planning-route-cell strong,
.transport-planning-page .planning-object-cell strong,
.transport-planning-page .planning-driver-cell strong{
  display:block!important;
  max-width:100%!important;
  font-size:.86rem!important;
  font-weight:620!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.transport-planning-page .planning-customer-cell small,
.transport-planning-page .planning-route-cell small,
.transport-planning-page .planning-object-cell small,
.transport-planning-page .planning-driver-cell small,
.transport-planning-page .planning-object-price{
  display:block!important;
  max-width:100%!important;
  margin-top:2px!important;
  color:#8db8e8!important;
  font-size:.72rem!important;
  line-height:1.22!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-style:normal!important;
}
.transport-planning-page .planning-object-price{
  color:#bae6fd!important;
  font-weight:650!important;
}
.transport-planning-page .planning-request-chip{
  align-self:flex-start!important;
  margin-left:0!important;
  margin-top:3px!important;
  padding:2px 7px!important;
  max-width:100%!important;
  width:auto!important;
  justify-content:flex-start!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.transport-planning-page .planning-status-select{
  max-width:150px!important;
  width:150px!important;
  justify-self:start!important;
}
.transport-planning-page .planning-actions-cell{
  justify-content:flex-start!important;
  align-items:center!important;
  gap:6px!important;
}
.transport-planning-page .planning-actions-cell .compact-action{
  width:74px!important;
  justify-content:center!important;
}
.transport-planning-page .driver-ride-object,
.transport-planning-page .driver-ride-route{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(max-width:1180px){
  .transport-planning-page .planning-table{overflow-x:auto!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:1040px!important;}
}
@media(max-width:720px){
  .transport-planning-page .planning-table{overflow:visible!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:0!important;}
  .transport-planning-page .planning-table-row > div{display:grid!important;grid-template-columns:112px 1fr!important;gap:10px!important;}
  .transport-planning-page .planning-status-select{width:100%!important;max-width:none!important;}
  .transport-planning-page .planning-actions-cell .compact-action{width:auto!important;}
}


/* =========================================================
   Fase 4D v71 - dagplanning zonder transportnummer-chip
   ========================================================= */
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:88px minmax(185px,1fr) minmax(220px,1.05fr) minmax(235px,1.10fr) minmax(150px,.76fr) minmax(152px,.74fr) 86px!important;
  gap:16px!important;
  padding:12px 16px!important;
  align-items:center!important;
}
.transport-planning-page .planning-table-head span{
  justify-self:start!important;
  text-align:left!important;
}
.transport-planning-page .planning-table-row > div{
  justify-self:stretch!important;
  min-width:0!important;
  text-align:left!important;
}
.transport-planning-page .planning-time-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
.transport-planning-page .planning-customer-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:1px!important;
  padding-left:0!important;
}
.transport-planning-page .planning-request-chip{
  display:none!important;
}
.transport-planning-page .planning-request-meta{
  display:block!important;
  margin-top:2px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#7dd3fc!important;
  font-size:.70rem!important;
  line-height:1.2!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.transport-planning-page .planning-route-cell,
.transport-planning-page .planning-object-cell,
.transport-planning-page .planning-driver-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
.transport-planning-page .planning-object-cell strong,
.transport-planning-page .planning-object-cell small,
.transport-planning-page .planning-object-price{
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.transport-planning-page .planning-object-price{
  margin-top:3px!important;
}
.transport-planning-page .planning-status-select{
  width:152px!important;
  max-width:152px!important;
}
.transport-planning-page .planning-actions-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:6px!important;
}
.transport-planning-page .planning-actions-cell .compact-action{
  width:78px!important;
  min-height:30px!important;
}
.transport-planning-page .driver-ride-main small{
  color:#7dd3fc!important;
  font-weight:650!important;
}
@media(max-width:1180px){
  .transport-planning-page .planning-table{overflow-x:auto!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:1050px!important;}
}
@media(max-width:720px){
  .transport-planning-page .planning-table{overflow:visible!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:0!important;}
  .transport-planning-page .planning-table-row > div{display:grid!important;grid-template-columns:112px 1fr!important;gap:10px!important;}
  .transport-planning-page .planning-status-select{width:100%!important;max-width:none!important;}
  .transport-planning-page .planning-actions-cell{align-items:start!important;}
  .transport-planning-page .planning-actions-cell .compact-action{width:auto!important;}
}


/* =========================================================
   Fase 4D v72 - neutrale compacte planning + ritdetails
   ========================================================= */
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:82px minmax(170px,.95fr) minmax(205px,1.10fr) minmax(205px,1.05fr) minmax(138px,.72fr) minmax(150px,.74fr) minmax(118px,.68fr)!important;
  gap:18px!important;
  padding:10px 16px!important;
  align-items:center!important;
}
.transport-planning-page .planning-table-row{
  min-height:78px!important;
}
.transport-planning-page .planning-time-cell strong{
  font-size:1rem!important;
  line-height:1!important;
}
.transport-planning-page .planning-customer-cell strong,
.transport-planning-page .planning-route-cell strong,
.transport-planning-page .planning-object-cell strong,
.transport-planning-page .planning-driver-cell strong{
  font-size:.84rem!important;
  line-height:1.15!important;
}
.transport-planning-page .planning-customer-cell small,
.transport-planning-page .planning-route-cell small,
.transport-planning-page .planning-object-cell small,
.transport-planning-page .planning-driver-cell small{
  font-size:.70rem!important;
  line-height:1.18!important;
}
.transport-planning-page .planning-request-meta,
.transport-planning-page .planning-object-price{
  display:none!important;
}
.transport-planning-page .planning-actions-cell{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  align-items:center!important;
  justify-items:stretch!important;
}
.transport-planning-page .planning-actions-cell .compact-action{
  width:100%!important;
  min-height:28px!important;
  padding:5px 9px!important;
  font-size:.74rem!important;
}
.transport-planning-page .driver-ride-line{
  grid-template-columns:70px minmax(150px,.95fr) minmax(210px,1.2fr) minmax(180px,1fr) minmax(120px,.7fr)!important;
  min-height:42px!important;
  padding:9px 0!important;
}
.transport-planning-page .driver-ride-object strong,
.transport-planning-page .driver-ride-main strong{
  display:block!important;
  font-size:.82rem!important;
  line-height:1.15!important;
}
.transport-planning-page .driver-ride-object small,
.transport-planning-page .driver-ride-main small{
  display:block!important;
  font-size:.68rem!important;
  line-height:1.18!important;
  color:#8db8e8!important;
  font-weight:500!important;
}
.planning-detail-modal,
.planning-postpone-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.planning-detail-modal.is-open,
.planning-postpone-modal.is-open{
  display:block;
}
.planning-detail-backdrop,
.planning-postpone-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(5px);
}
.planning-detail-panel{
  position:relative;
  width:min(760px,calc(100vw - 28px));
  max-height:calc(100dvh - 36px);
  overflow:auto;
  margin:18px auto;
  border:1px solid rgba(148,163,184,.22);
  border-radius:20px;
  background:#0f1d31;
  box-shadow:0 24px 80px rgba(0,0,0,.40);
  padding:18px;
}
.planning-detail-head,
.planning-detail-actions{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.planning-detail-head h2{
  margin:0 0 4px;
}
.planning-detail-summary{
  display:grid;
  gap:2px;
  margin:14px 0;
  padding:12px 14px;
  border:1px solid rgba(56,189,248,.20);
  border-radius:14px;
  background:rgba(14,165,233,.08);
}
.planning-detail-summary strong{font-size:1rem;}
.planning-detail-summary span{color:#dbeafe;font-weight:650;}
.planning-detail-summary small{color:#93c5fd;}
.planning-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.planning-detail-field{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:12px;
  background:rgba(15,23,42,.38);
}
.planning-detail-field span{
  color:#93c5fd;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}
.planning-detail-field strong{
  color:#f8fafc;
  font-size:.84rem;
  font-weight:620;
  line-height:1.3;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.planning-detail-actions{align-items:center;justify-content:flex-end;}
@media(max-width:1180px){
  .transport-planning-page .planning-table{overflow-x:auto!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:1060px!important;}
}
@media(max-width:720px){
  .transport-planning-page .planning-table{overflow:visible!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:0!important;}
  .transport-planning-page .planning-actions-cell{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;}
  .transport-planning-page .planning-actions-cell .compact-action{width:auto!important;}
  .planning-detail-grid{grid-template-columns:1fr;}
  .planning-detail-panel{padding:14px;border-radius:16px;}
}


/* =========================================================
   Fase 4D v73 - details opnieuw openen + compactere acties
   ========================================================= */
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  grid-template-columns:82px minmax(175px,1fr) minmax(210px,1.14fr) minmax(230px,1.18fr) minmax(138px,.72fr) minmax(150px,.74fr) minmax(92px,.48fr)!important;
  gap:16px!important;
}
.transport-planning-page .planning-table-row{
  min-height:70px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.transport-planning-page .planning-actions-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:5px!important;
  max-width:86px!important;
  margin-left:auto!important;
}
.transport-planning-page .planning-actions-cell .compact-action{
  width:86px!important;
  min-height:28px!important;
  padding:5px 8px!important;
  font-size:.73rem!important;
}
.transport-planning-page .planning-object-cell small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(max-width:1180px){
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:1010px!important;}
}
@media(max-width:720px){
  .transport-planning-page .planning-table-row{min-width:0!important;}
  .transport-planning-page .planning-actions-cell{max-width:none!important;margin-left:0!important;flex-direction:row!important;flex-wrap:wrap!important;}
  .transport-planning-page .planning-actions-cell .compact-action{width:auto!important;}
}


/* =========================================================
   Fase 4D v74 - dagplanning kolommen strak uitlijnen
   ========================================================= */
.transport-planning-page .planning-table-balanced{
  width:100%!important;
  overflow:visible!important;
}
.transport-planning-page .planning-table-head,
.transport-planning-page .planning-table-row{
  display:grid!important;
  grid-template-columns:76px minmax(150px,.95fr) minmax(195px,1.14fr) minmax(205px,1.12fr) minmax(135px,.78fr) minmax(150px,.82fr) 92px!important;
  column-gap:18px!important;
  align-items:center!important;
}
.transport-planning-page .planning-table-head{
  padding:10px 16px!important;
}
.transport-planning-page .planning-table-row{
  min-height:66px!important;
  padding:8px 16px!important;
}
.transport-planning-page .planning-table-head span,
.transport-planning-page .planning-table-row > div{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.transport-planning-page .planning-table-head span{
  letter-spacing:.07em!important;
  white-space:nowrap!important;
}
.transport-planning-page .planning-table-head span:nth-child(1),
.transport-planning-page .planning-table-row > div:nth-child(1){
  text-align:left!important;
  justify-self:start!important;
}
.transport-planning-page .planning-table-head span:nth-child(6),
.transport-planning-page .planning-table-row > div:nth-child(6){
  text-align:center!important;
  justify-self:center!important;
}
.transport-planning-page .planning-table-head span:nth-child(7),
.transport-planning-page .planning-table-row > div:nth-child(7){
  text-align:center!important;
  justify-self:center!important;
}
.transport-planning-page .planning-time-cell,
.transport-planning-page .planning-customer-cell,
.transport-planning-page .planning-route-cell,
.transport-planning-page .planning-object-cell,
.transport-planning-page .planning-driver-cell{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:1px!important;
  line-height:1.24!important;
}
.transport-planning-page .planning-time-cell strong,
.transport-planning-page .planning-customer-cell strong,
.transport-planning-page .planning-route-cell strong,
.transport-planning-page .planning-object-cell strong,
.transport-planning-page .planning-driver-cell strong{
  font-size:.88rem!important;
  font-weight:650!important;
  line-height:1.2!important;
}
.transport-planning-page .planning-customer-cell small,
.transport-planning-page .planning-route-cell small,
.transport-planning-page .planning-object-cell small,
.transport-planning-page .planning-driver-cell small{
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:.76rem!important;
  line-height:1.22!important;
}
.transport-planning-page .planning-status-select{
  width:100%!important;
  max-width:150px!important;
  min-height:36px!important;
  height:36px!important;
  padding:7px 28px 7px 12px!important;
  font-size:.82rem!important;
  font-weight:650!important;
  margin:0 auto!important;
}
.transport-planning-page .planning-actions-cell{
  width:92px!important;
  max-width:92px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:5px!important;
}
.transport-planning-page .planning-actions-cell .compact-action{
  width:92px!important;
  min-height:28px!important;
  padding:5px 8px!important;
  font-size:.72rem!important;
}
.transport-planning-page .planning-object-cell{
  padding-right:6px!important;
}
@media(max-width:1180px){
  .transport-planning-page .planning-table-balanced{overflow-x:auto!important;}
  .transport-planning-page .planning-table-head,
  .transport-planning-page .planning-table-row{min-width:1030px!important;}
}
@media(max-width:720px){
  .transport-planning-page .planning-table-head{display:none!important;}
  .transport-planning-page .planning-table-row{
    min-width:0!important;
    grid-template-columns:1fr!important;
    row-gap:8px!important;
    padding:12px!important;
  }
  .transport-planning-page .planning-table-row > div{
    display:grid!important;
    grid-template-columns:104px 1fr!important;
    gap:10px!important;
    align-items:start!important;
    text-align:left!important;
  }
  .transport-planning-page .planning-table-row > div::before{
    content:attr(data-label);
    color:#93c5fd;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .transport-planning-page .planning-time-cell,
  .transport-planning-page .planning-customer-cell,
  .transport-planning-page .planning-route-cell,
  .transport-planning-page .planning-object-cell,
  .transport-planning-page .planning-driver-cell{
    display:grid!important;
    grid-template-columns:104px 1fr!important;
  }
  .transport-planning-page .planning-time-cell::before,
  .transport-planning-page .planning-customer-cell::before,
  .transport-planning-page .planning-route-cell::before,
  .transport-planning-page .planning-object-cell::before,
  .transport-planning-page .planning-driver-cell::before{
    grid-row:1 / span 2;
  }
  .transport-planning-page .planning-status-select,
  .transport-planning-page .planning-actions-cell,
  .transport-planning-page .planning-actions-cell .compact-action{
    max-width:none!important;
    width:100%!important;
  }
  .transport-planning-page .planning-actions-cell{margin:0!important;flex-direction:row!important;}
}


/* =========================================================
   Fase 4D v75 - Transport workflow rustiger route/object + NL documentstatus
   ========================================================= */
.transport-list-card-full .transport-compact-head,
.transport-list-card-full .transport-compact-row{
  grid-template-columns:minmax(190px,.95fr) minmax(185px,.9fr) minmax(165px,.78fr) 220px minmax(260px,1.08fr) 96px!important;
  column-gap:16px!important;
  align-items:center!important;
}
.transport-list-card-full .transport-compact-row{
  min-height:88px!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
}
.transport-list-card-full .transport-cell{
  align-self:center!important;
  justify-content:center!important;
}
.transport-list-card-full .route-cell strong,
.transport-list-card-full .object-cell strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.transport-list-card-full .route-cell small,
.transport-list-card-full .object-cell small{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin-top:3px!important;
  color:#7dd3fc!important;
  font-size:.70rem!important;
  line-height:1.25!important;
}
.transport-list-card-full .transport-route-contact,
.transport-list-card-full .transport-execution-meta{
  display:none!important;
}
.transport-list-card-full .document-cell .transport-document-summary,
.transport-list-card-full .transport-document-summary{
  max-width:270px!important;
}
.transport-list-card-full .document-cell .transport-doc-link,
.transport-list-card-full .transport-doc-link{
  max-width:270px!important;
  min-height:30px!important;
}
.transport-list-card-full .document-cell .transport-doc-link .doc-status,
.transport-list-card-full .transport-doc-link .doc-status{
  font-size:.55rem!important;
  padding:2px 5px!important;
}
@media(max-width:1180px){
  .transport-list-card-full .transport-request-list{overflow-x:auto!important;}
  .transport-list-card-full .transport-compact-list{min-width:1120px!important;}
  .transport-list-card-full .transport-compact-head,
  .transport-list-card-full .transport-compact-row{
    grid-template-columns:190px 185px 165px 220px 260px 92px!important;
    column-gap:12px!important;
  }
}
@media(max-width:820px){
  .transport-list-card-full .transport-request-list{overflow-x:visible!important;}
  .transport-list-card-full .transport-compact-list{min-width:0!important;}
  .transport-list-card-full .transport-compact-head,
  .transport-list-card-full .transport-compact-row{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .transport-list-card-full .route-cell strong,
  .transport-list-card-full .object-cell strong,
  .transport-list-card-full .route-cell small,
  .transport-list-card-full .object-cell small{
    white-space:normal!important;
  }
}


/* =========================================================
   Fase 4D v76 - transport objectregels + document/transportkoppeling
   ========================================================= */
.transport-compact-list{
  overflow:hidden!important;
}
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:minmax(180px,1.05fr) minmax(175px,1fr) minmax(170px,.95fr) minmax(190px,1.05fr) minmax(260px,1.25fr) 92px!important;
  column-gap:16px!important;
}
.transport-cell.object-cell strong,
.transport-cell.object-cell small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.transport-cell.object-cell small + small{
  margin-top:1px!important;
}
.transport-document-summary .transport-doc-link .doc-status{
  text-transform:none!important;
}
.linked-documents-cell .document-link-chips{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  width:auto!important;
  max-width:100%!important;
}
.linked-documents-cell .document-link-chip,
.linked-doc-panel .transport-doc-link{
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  padding:4px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  border-radius:9px!important;
  font-size:.72rem!important;
  line-height:1.1!important;
}
.linked-documents-cell .document-link-chip span,
.linked-doc-panel .transport-doc-link span{
  font-size:.64rem!important;
  letter-spacing:.05em!important;
}
.linked-documents-cell .document-link-chip strong,
.linked-doc-panel .transport-doc-link strong{
  font-size:.75rem!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.linked-documents-cell .document-transport-chip{
  border-color:rgba(14,165,233,.32)!important;
  background:rgba(14,165,233,.10)!important;
}
.linked-documents-cell .document-transport-chip span,
.linked-documents-cell .document-transport-chip strong{
  color:#93c5fd!important;
}
.document-linked-empty{
  width:auto!important;
  max-width:fit-content!important;
  padding:4px 8px!important;
  font-size:.7rem!important;
  border-radius:8px!important;
}
@media(max-width:1180px){
  .transport-compact-list{min-width:980px!important;overflow:auto!important;}
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:175px 165px 170px 190px 250px 88px!important;
    column-gap:12px!important;
  }
}
@media(max-width:980px){
  .transport-compact-list{min-width:0!important;overflow:visible!important;}
  .transport-compact-head,.transport-compact-row{grid-template-columns:1fr!important;}
  .linked-documents-cell .document-link-chips{width:100%!important;}
  .linked-documents-cell .document-link-chip{max-width:100%!important;}
}


/* =========================================================
   Fase 4D v78 - publieke offerte-acceptatiepagina polish
   ========================================================= */
.public-accept-body.public-quote-accept-page{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(26,159,232,.22), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(37,99,235,.18), transparent 32rem),
    linear-gradient(135deg,#07111f 0%,#0b1728 48%,#0f2138 100%);
  color:#eaf3ff;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.public-accept-shell{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  box-sizing:border-box;
}
.public-accept-panel{
  width:min(980px,100%);
  border:1px solid rgba(148,163,184,.22);
  background:rgba(8,17,31,.82);
  backdrop-filter:blur(18px);
  border-radius:28px;
  box-shadow:0 26px 90px rgba(0,0,0,.34);
  overflow:hidden;
}
.public-accept-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.035);
}
.public-accept-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f8fbff;
  text-decoration:none;
  font-size:.94rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.public-accept-logo img{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.08);
}
.public-accept-secure{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(26,159,232,.12);
  border:1px solid rgba(26,159,232,.24);
  color:#bfdbfe;
  font-size:.78rem;
  font-weight:700;
}
.public-accept-state{padding:26px;}
.public-quote-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:20px;
  margin-bottom:18px;
}
.public-kicker{
  margin:0 0 8px;
  color:#7dd3fc;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.public-quote-hero h1{
  margin:0;
  color:#fff;
  font-size:clamp(1.7rem,3vw,2.45rem);
  line-height:1.08;
  letter-spacing:-.045em;
}
.public-quote-intro{
  margin:12px 0 0;
  max-width:680px;
  color:#cbd5e1;
  font-size:.98rem;
  line-height:1.6;
}
.public-total-card{
  min-width:190px;
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(26,159,232,.18),rgba(26,159,232,.08));
  border:1px solid rgba(125,211,252,.26);
  text-align:right;
}
.public-total-card span,
.public-summary-item span,
.public-detail-grid span,
.public-section-head span{
  display:block;
  color:#94a3b8;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.public-total-card strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:1.55rem;
  font-weight:800;
  letter-spacing:-.035em;
}
.public-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.public-summary-item,
.public-section-card,
.public-response-card{
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,30,51,.64);
  border-radius:18px;
}
.public-summary-item{padding:13px 14px;}
.public-summary-item strong{
  display:block;
  margin-top:5px;
  color:#f8fbff;
  font-size:.94rem;
  font-weight:750;
  line-height:1.35;
  word-break:break-word;
}
.public-section-card{padding:16px;margin-top:12px;}
.public-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.public-section-head strong{
  color:#eaf3ff;
  font-size:.88rem;
  font-weight:750;
}
.public-detail-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
}
.public-detail-grid>div{
  padding:12px;
  border-radius:14px;
  background:rgba(2,6,23,.28);
  border:1px solid rgba(148,163,184,.12);
}
.public-detail-grid strong{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:.93rem;
  font-weight:700;
  line-height:1.45;
}
.public-line-items{display:grid;gap:8px;}
.public-line-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-top:1px solid rgba(148,163,184,.14);
}
.public-line-item:first-child{border-top:0;padding-top:0;}
.public-line-item:last-child{padding-bottom:0;}
.public-line-item span{color:#e2e8f0;font-weight:600;line-height:1.4;}
.public-line-item strong{color:#fff;font-size:.95rem;white-space:nowrap;}
.public-response-card{padding:16px;margin-top:14px;}
.public-response-card label{
  display:block;
  margin:0 0 8px;
  color:#dbeafe;
  font-size:.82rem;
  font-weight:800;
}
.public-response-card textarea{
  width:100%;
  min-height:90px;
  resize:vertical;
  box-sizing:border-box;
  border:1px solid rgba(148,163,184,.24);
  border-radius:16px;
  background:rgba(2,6,23,.35);
  color:#f8fbff;
  padding:12px 13px;
  font:500 .92rem/1.5 Inter,system-ui,sans-serif;
  outline:none;
}
.public-response-card textarea:focus{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
}
.public-accept-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.public-btn{
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  min-height:44px;
  padding:0 18px;
  font:800 .9rem/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .14s ease,filter .14s ease,background .14s ease,border-color .14s ease;
}
.public-btn:hover{transform:translateY(-1px);}
.public-btn:disabled{opacity:.52;cursor:not-allowed;transform:none;}
.public-btn-accept{
  color:#052e16;
  background:linear-gradient(180deg,#86efac,#4ade80);
  border-color:rgba(134,239,172,.65);
}
.public-btn-reject{
  color:#f8fbff;
  background:rgba(255,255,255,.07);
}
.public-small-note{
  margin:10px 0 0;
  color:#94a3b8;
  font-size:.82rem;
  line-height:1.45;
}
.public-accept-notice{
  margin:16px 0;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(56,189,248,.26);
  background:rgba(56,189,248,.11);
  color:#dbeafe;
  font-size:.9rem;
  font-weight:650;
}
.public-accept-loading,
.public-accept-result{
  display:grid;
  place-items:center;
  text-align:center;
  min-height:340px;
  padding:22px;
}
.public-accept-loading h1,
.public-accept-result h1{margin:16px 0 8px;color:#fff;font-size:clamp(1.45rem,3vw,2.1rem);letter-spacing:-.035em;}
.public-accept-loading p,
.public-accept-result p{margin:0;max-width:560px;color:#cbd5e1;line-height:1.6;}
.public-accept-spinner{
  width:42px;
  height:42px;
  border-radius:999px;
  border:3px solid rgba(148,163,184,.25);
  border-top-color:#38bdf8;
  animation:publicSpin .8s linear infinite;
}
@keyframes publicSpin{to{transform:rotate(360deg)}}
.public-result-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:18px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.24);
  color:#e0f2fe;
  font-size:1.5rem;
  font-weight:900;
}
.public-result-success .public-result-icon{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28);color:#bbf7d0;}
.public-result-warn .public-result-icon{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.30);color:#fde68a;}
.public-result-error .public-result-icon{background:rgba(248,113,113,.13);border-color:rgba(248,113,113,.30);color:#fecaca;}
@media(max-width:860px){
  .public-accept-shell{align-items:flex-start;padding:14px;}
  .public-accept-panel{border-radius:22px;}
  .public-accept-topbar{padding:14px 15px;}
  .public-accept-state{padding:16px;}
  .public-quote-hero{grid-template-columns:1fr;gap:14px;}
  .public-total-card{min-width:0;text-align:left;}
  .public-summary-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .public-detail-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .public-accept-shell{padding:10px;}
  .public-accept-topbar{align-items:flex-start;}
  .public-accept-secure{font-size:.72rem;padding:0 9px;white-space:nowrap;}
  .public-summary-grid{grid-template-columns:1fr;}
  .public-line-item{align-items:flex-start;flex-direction:column;gap:4px;}
  .public-line-item strong{white-space:normal;}
  .public-accept-actions{display:grid;grid-template-columns:1fr;}
  .public-btn{width:100%;}
  .public-quote-hero h1{font-size:1.55rem;}
}


/* =========================================================
   Fase 4D v79 - generieke offerteflow + documentenoverzicht
   ========================================================= */
.document-new-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
main:has(#documentsBody) .documents-table{
  table-layout:fixed;
  width:100%;
}
main:has(#documentsBody) .documents-table th,
main:has(#documentsBody) .documents-table td{
  vertical-align:middle;
  font-size:.86rem;
  font-weight:600;
  line-height:1.25;
  padding-top:13px;
  padding-bottom:13px;
}
main:has(#documentsBody) .documents-table th:nth-child(1),
main:has(#documentsBody) .documents-table td:nth-child(1){width:9%;}
main:has(#documentsBody) .documents-table th:nth-child(2),
main:has(#documentsBody) .documents-table td:nth-child(2){width:15%;}
main:has(#documentsBody) .documents-table th:nth-child(3),
main:has(#documentsBody) .documents-table td:nth-child(3){width:18%;}
main:has(#documentsBody) .documents-table th:nth-child(4),
main:has(#documentsBody) .documents-table td:nth-child(4){width:14%;}
main:has(#documentsBody) .documents-table th:nth-child(5),
main:has(#documentsBody) .documents-table td:nth-child(5){width:17%;}
main:has(#documentsBody) .documents-table th:nth-child(6),
main:has(#documentsBody) .documents-table td:nth-child(6){width:10%; text-align:center;}
main:has(#documentsBody) .documents-table th:nth-child(7),
main:has(#documentsBody) .documents-table td:nth-child(7){width:10%; text-align:center;}
main:has(#documentsBody) .documents-table th:nth-child(8),
main:has(#documentsBody) .documents-table td:nth-child(8){width:9%; text-align:right;}
main:has(#documentsBody) .document-number-open{
  font-weight:650!important;
  letter-spacing:-.015em;
  font-size:.88rem!important;
  color:#f8fbff!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chips{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  width:auto!important;
  max-width:100%!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip{
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:4px 9px!important;
  min-height:25px!important;
  border-radius:9px!important;
  font-size:.75rem!important;
  line-height:1!important;
  white-space:nowrap!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip span{
  font-size:.62rem!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:#7dd3fc!important;
  font-weight:750!important;
}
main:has(#documentsBody) .linked-documents-cell .document-link-chip strong{
  font-size:.75rem!important;
  letter-spacing:-.01em!important;
  color:#fff!important;
  font-weight:700!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:120px!important;
}
main:has(#documentsBody) .document-linked-empty{
  display:inline-flex!important;
  width:auto!important;
  padding:4px 8px!important;
  min-height:24px!important;
  font-size:.72rem!important;
  border-radius:8px!important;
  color:rgba(191,219,254,.74)!important;
}
main:has(#documentsBody) .documents-actions-cell .documents-action-select{
  width:110px!important;
  min-width:110px!important;
  height:38px!important;
  min-height:38px!important;
  font-size:.82rem!important;
  font-weight:650!important;
}
@media(max-width:900px){
  main:has(#documentsBody) .documents-table{min-width:860px;}
}


/* =========================================================
   Fase 4D v80 - Documentgenerator typevolgorde + statuspijlen
   ========================================================= */
#generatorStatusStepper,
.generator-status-stepper{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-top:7px!important;
}
.generator-status-step-btn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(148,163,184,.24)!important;
  border-radius:9px!important;
  background:rgba(9,20,36,.72)!important;
  color:#fff!important;
  font-size:1.18rem!important;
  line-height:1!important;
  font-weight:800!important;
  cursor:pointer!important;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease!important;
}
.generator-status-step-btn.primary-step{
  background:rgba(26,159,232,.14)!important;
  border-color:rgba(26,159,232,.32)!important;
}
.generator-status-step-btn:not(:disabled):hover{
  transform:translateY(-1px)!important;
  background:rgba(26,159,232,.22)!important;
  border-color:rgba(26,159,232,.48)!important;
}
.generator-status-step-btn:disabled{
  opacity:.32!important;
  cursor:not-allowed!important;
}
#docForm #status,
#docForm #type{
  font-size:.92rem!important;
  font-weight:650!important;
}


/* =========================================================
   Fase 4D v81 - statuspijlen in Documenten overzicht
   ========================================================= */
#generatorStatusStepper,
.generator-status-stepper{display:none!important;}
.documents-status-cell{min-width:132px!important;text-align:center!important;vertical-align:middle!important;}
.document-status-control{display:inline-flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;width:auto!important;max-width:136px!important;}
.document-status-control .status-change{width:128px!important;min-width:128px!important;max-width:128px!important;height:34px!important;min-height:34px!important;padding:0 28px 0 10px!important;font-size:.78rem!important;font-weight:600!important;line-height:1!important;border-radius:9px!important;text-align:left!important;}
.document-status-stepper{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;margin:0!important;width:100%!important;}
.document-status-step-btn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border-radius:9px!important;border:1px solid var(--border)!important;background:rgba(255,255,255,.045)!important;color:var(--text)!important;font-size:1.05rem!important;font-weight:800!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;}
.document-status-step-btn.primary-step{background:rgba(26,159,232,.14)!important;border-color:rgba(26,159,232,.38)!important;}
.document-status-step-btn:not(:disabled):hover{transform:translateY(-1px)!important;background:rgba(26,159,232,.18)!important;border-color:rgba(26,159,232,.45)!important;}
.document-status-step-btn:disabled{opacity:.32!important;cursor:not-allowed!important;transform:none!important;}
@media(max-width:760px){.documents-status-cell{text-align:left!important}.document-status-control{align-items:flex-start!important;max-width:none!important}.document-status-control .status-change{width:150px!important;max-width:150px!important}.document-status-stepper{justify-content:flex-start!important}}


/* =========================================================
   Fase 4D v83 - Aanvragen & ritten statusdropdown compact
   ========================================================= */
.transport-list-card-full .transport-compact-head,
.transport-list-card-full .transport-compact-row,
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:minmax(175px,1fr) minmax(175px,1fr) minmax(170px,.95fr) 158px minmax(280px,1.28fr) 82px!important;
  column-gap:14px!important;
  align-items:center!important;
}
.transport-list-card-full .transport-compact-row,
.transport-compact-row{
  min-height:78px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.transport-cell.status-cell,
.status-cell .transport-status-control,
.transport-status-control{
  width:158px!important;
  min-width:158px!important;
  max-width:158px!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.transport-status-select{
  width:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 26px 0 9px!important;
  border-radius:9px!important;
  font-size:.72rem!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
  line-height:1!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
}
.transport-status-select option{
  font-size:.80rem!important;
  font-weight:600!important;
}
.transport-status-doc-row,
.transport-status-stepper{
  width:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  margin:0!important;
}
.transport-status-stepper .transport-step-btn,
.transport-step-btn{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border-radius:9px!important;
  font-size:1.05rem!important;
  font-weight:800!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.transport-list-card-full .actions-cell,
.transport-compact-row .actions-cell{
  justify-content:flex-end!important;
  min-width:0!important;
}
.transport-list-card-full .actions-cell .compact-action,
.transport-compact-row .actions-cell .compact-action{
  min-height:32px!important;
  height:32px!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:.76rem!important;
}
.transport-list-card-full .document-cell .transport-document-summary,
.transport-list-card-full .transport-document-summary,
.transport-document-summary{
  max-width:280px!important;
}
.transport-list-card-full .document-cell .transport-doc-link,
.transport-list-card-full .transport-doc-link,
.transport-doc-link{
  max-width:280px!important;
}
@media(max-width:1180px){
  .transport-list-card-full .transport-request-list{overflow-x:auto!important;}
  .transport-list-card-full .transport-compact-list{min-width:1060px!important;}
  .transport-list-card-full .transport-compact-head,
  .transport-list-card-full .transport-compact-row,
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:175px 175px 170px 158px 280px 82px!important;
    column-gap:12px!important;
  }
}
@media(max-width:820px){
  .transport-list-card-full .transport-compact-list{min-width:0!important;}
  .transport-list-card-full .transport-compact-head,
  .transport-list-card-full .transport-compact-row,
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .transport-cell.status-cell,
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select,
  .transport-status-doc-row,
  .transport-status-stepper{
    width:100%!important;
    min-width:0!important;
    max-width:220px!important;
    align-items:flex-start!important;
  }
  .transport-status-stepper,
  .transport-status-doc-row{
    justify-content:flex-start!important;
  }
  .transport-status-select{max-width:220px!important;}
}


/* =========================================================
   Fase 4D v84 - Transport statusdropdown leesbaar compact
   ========================================================= */
.transport-list-card-full .transport-compact-head,
.transport-list-card-full .transport-compact-row,
.transport-compact-head,
.transport-compact-row{
  grid-template-columns:minmax(170px,1.02fr) minmax(165px,1fr) minmax(150px,.82fr) 184px minmax(250px,1.18fr) 76px!important;
  column-gap:12px!important;
  align-items:center!important;
}
.transport-list-card-full .transport-compact-row,
.transport-compact-row{
  min-height:76px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}
.transport-cell.status-cell,
.status-cell .transport-status-control,
.transport-status-control{
  width:184px!important;
  min-width:184px!important;
  max-width:184px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}
.transport-status-select{
  width:176px!important;
  min-width:176px!important;
  max-width:176px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 24px 0 10px!important;
  border-radius:9px!important;
  font-size:.68rem!important;
  font-weight:650!important;
  letter-spacing:-.035em!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.transport-status-select option{
  font-size:.78rem!important;
  font-weight:600!important;
}
.transport-status-doc-row,
.transport-status-stepper{
  width:176px!important;
  min-width:176px!important;
  max-width:176px!important;
  justify-content:center!important;
  gap:6px!important;
}
.transport-status-stepper .transport-step-btn,
.transport-step-btn{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  border-radius:8px!important;
  font-size:1rem!important;
}
.transport-list-card-full .document-cell .transport-document-summary,
.transport-list-card-full .transport-document-summary,
.transport-document-summary,
.transport-list-card-full .document-cell .transport-doc-link,
.transport-list-card-full .transport-doc-link,
.transport-doc-link{
  max-width:250px!important;
}
.transport-list-card-full .actions-cell .compact-action,
.transport-compact-row .actions-cell .compact-action{
  min-height:30px!important;
  height:30px!important;
  padding:0 9px!important;
  font-size:.74rem!important;
}
@media(max-width:1180px){
  .transport-list-card-full .transport-compact-list{min-width:1060px!important;}
  .transport-list-card-full .transport-compact-head,
  .transport-list-card-full .transport-compact-row,
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:170px 165px 150px 184px 250px 76px!important;
    column-gap:10px!important;
  }
}
@media(max-width:820px){
  .transport-list-card-full .transport-compact-list{min-width:0!important;}
  .transport-list-card-full .transport-compact-head,
  .transport-list-card-full .transport-compact-row,
  .transport-compact-head,
  .transport-compact-row{
    grid-template-columns:1fr!important;
  }
  .transport-cell.status-cell,
  .status-cell .transport-status-control,
  .transport-status-control,
  .transport-status-select,
  .transport-status-doc-row,
  .transport-status-stepper{
    width:100%!important;
    min-width:0!important;
    max-width:240px!important;
  }
  .transport-status-select{font-size:.74rem!important;max-width:240px!important;}
}


/* =========================================================
   Fase 4D v85 - smartphone audit + compacte mobiele widgets
   ========================================================= */
@media (max-width: 900px){
  html, body{max-width:100%;overflow-x:hidden!important;}
  .app{display:block!important;min-width:0!important;width:100%!important;}
  .main{width:100%!important;max-width:100%!important;margin:0!important;padding:14px!important;overflow-x:hidden!important;}
  .topbar{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;gap:10px!important;margin-bottom:14px!important;}
  .topbar h1{font-size:1.34rem!important;line-height:1.08!important;margin:0!important;}
  .topbar .muted,.topbar p{font-size:.82rem!important;line-height:1.36!important;}
  .card{padding:14px!important;border-radius:14px!important;}
  .grid{gap:10px!important;}
  .form-grid{grid-template-columns:1fr!important;gap:10px!important;}
  .actions{gap:8px!important;margin:12px 0!important;}
  .btn{min-height:38px!important;padding:9px 12px!important;border-radius:10px!important;font-size:.82rem!important;}
  .field{gap:5px!important;}
  .field label{font-size:.72rem!important;letter-spacing:.01em!important;}
  .field input,.field select,.field textarea,
  input, select, textarea{font-size:.82rem!important;min-height:38px!important;padding:9px 11px!important;border-radius:10px!important;}
  .field textarea, textarea{min-height:76px!important;}
  .notice,.error,.success{font-size:.82rem!important;padding:10px 12px!important;border-radius:11px!important;margin-bottom:10px!important;}
  .section-title-row,.compact-title-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;align-items:start!important;}
  .section-title-row h2,.card h2{font-size:1.02rem!important;line-height:1.15!important;}
  .muted{font-size:.80rem!important;line-height:1.38!important;}

  /* Mobiel menu blijft zelfstandig scrollbaar */
  body.ag-mobile-menu-open{overflow:hidden!important;position:fixed!important;width:100%!important;}
  .sidebar{max-height:64px!important;overflow:visible!important;}
  .sidebar.is-open{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding:12px 12px 28px!important;z-index:9999!important;}
  .sidebar.is-open .brand{position:sticky!important;top:0!important;z-index:3!important;margin:-12px -12px 8px!important;padding:12px!important;background:var(--navy)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;}
  .sidebar.is-open .navlinks{display:grid!important;gap:3px!important;max-height:none!important;overflow:visible!important;padding-bottom:54px!important;}
  .sidebar.is-open .admin-action-stack{display:grid!important;margin:8px 0 10px!important;}
  .navlinks a,.sidebar .nav-group > summary,.sidebar .nav-nested > summary{min-height:36px!important;padding:9px 10px!important;font-size:.82rem!important;border-radius:10px!important;}
  .business-switcher{padding:9px!important;border-radius:12px!important;margin:0 0 10px!important;}
  .business-switcher label{font-size:.62rem!important;margin-bottom:5px!important;}
  .business-switcher select{font-size:.78rem!important;min-height:35px!important;padding:8px 32px 8px 9px!important;}
}

@media (max-width: 760px){
  /* Dashboard/stat widgets: veel compacter, maar niet verbergen */
  .grid.cards,
  .hours-stat-grid,
  .admin-subscription-stats,
  .transport-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:12px!important;
  }
  .grid.cards > .card,
  .hours-stat-card,
  .transport-stat-card,
  .admin-subscription-stats > .card{
    min-height:58px!important;
    padding:9px 10px!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }
  .stat-num,
  .transport-stat-card strong,
  .hours-stat-card .stat-num{
    font-size:1.08rem!important;
    line-height:1.05!important;
    margin-top:2px!important;
    font-weight:760!important;
  }
  .stat-label,
  .transport-stat-card span,
  .hours-stat-card .stat-label{
    font-size:.62rem!important;
    line-height:1.15!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
    margin-top:2px!important;
    font-weight:800!important;
  }
  .transport-stat-card.compact{min-height:52px!important;}

  /* Filters boven tabellen niet meer groot en lomp */
  .document-filter-card,
  .transport-filter-card,
  .planning-filter-card,
  .bookkeeper-export-card,
  .bookkeeper-documents-card,
  .customers-list-card,
  .products-list-card{
    padding:12px!important;
  }
  .document-filters,
  .transport-toolbar,
  .planning-filter-grid,
  .bookkeeper-export-grid,
  .bookkeeper-documents-toolbar,
  .customer-list-tools{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .table-scroll,.documents-table-wrap,.transport-request-list,.planning-table{max-width:100%!important;}
  .table{font-size:.80rem!important;}
  .table th,.table td{padding:8px 9px!important;font-size:.80rem!important;}

  /* Transport workflow: kaartweergave op mobiel, geen brede tabel */
  .transport-list-card-full .transport-request-list{overflow:visible!important;}
  .transport-list-card-full .transport-compact-list{min-width:0!important;width:100%!important;display:grid!important;gap:9px!important;}
  .transport-list-card-full .transport-compact-head{display:none!important;}
  .transport-list-card-full .transport-compact-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:11px!important;border:1px solid var(--line)!important;border-radius:13px!important;margin:0!important;background:rgba(255,255,255,.025)!important;}
  .transport-list-card-full .transport-cell{padding:0!important;border:0!important;display:grid!important;gap:2px!important;}
  .transport-list-card-full .transport-cell::before{content:attr(data-label);font-size:.62rem!important;text-transform:uppercase!important;letter-spacing:.07em!important;font-weight:900!important;color:var(--muted)!important;}
  .transport-list-card-full .status-cell,.transport-list-card-full .document-cell,.transport-list-card-full .actions-cell{align-items:start!important;text-align:left!important;justify-content:start!important;}
  .transport-status-select{width:100%!important;max-width:240px!important;height:36px!important;min-height:36px!important;font-size:.76rem!important;}
  .transport-status-stepper{justify-content:flex-start!important;gap:6px!important;}
  .transport-status-stepper .transport-step-btn{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;font-size:.95rem!important;}
  .transport-document-summary{align-items:flex-start!important;}
  .transport-doc-link{max-width:100%!important;}

  /* Documentenoverzicht: mobiel leesbaar houden */
  .documents-table-card{padding:12px!important;}
  .documents-table{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .documents-table .table{min-width:780px!important;}
  .documents-status-cell{min-width:118px!important;}
  .document-status-control .status-change{height:32px!important;min-height:32px!important;font-size:.74rem!important;}
  .document-status-step-btn{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;font-size:.95rem!important;}
  .linked-document-chip,.document-link-chip{font-size:.63rem!important;padding:4px 7px!important;border-radius:8px!important;}

  /* Planning: compacte mobiele kaartweergave */
  .transport-planning-page .planning-table{overflow:visible!important;}
  .transport-planning-page .planning-table-head{display:none!important;}
  .transport-planning-page .planning-table-row{display:grid!important;grid-template-columns:1fr!important;min-width:0!important;gap:8px!important;padding:11px!important;border:1px solid var(--line)!important;border-radius:13px!important;margin-bottom:9px!important;}
  .transport-planning-page .planning-table-row > div{display:grid!important;grid-template-columns:92px 1fr!important;gap:8px!important;align-items:start!important;}
  .transport-planning-page .planning-table-row > div::before{content:attr(data-label);font-size:.62rem!important;text-transform:uppercase!important;letter-spacing:.07em!important;font-weight:900!important;color:var(--muted)!important;}
  .transport-planning-page .planning-status-select{width:100%!important;max-width:220px!important;height:35px!important;min-height:35px!important;font-size:.76rem!important;}
  .transport-planning-page .planning-actions-cell{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
  .transport-planning-page .planning-actions-cell::before{width:92px!important;}
  .transport-planning-page .driver-ride-line{display:grid!important;grid-template-columns:64px 1fr!important;gap:8px!important;padding:8px 0!important;}
}

@media (max-width: 430px){
  .main{padding:10px!important;}
  .grid.cards,.hours-stat-grid,.admin-subscription-stats,.transport-stats{gap:6px!important;}
  .grid.cards > .card,.hours-stat-card,.transport-stat-card,.admin-subscription-stats > .card{padding:8px!important;min-height:50px!important;}
  .stat-num,.transport-stat-card strong,.hours-stat-card .stat-num{font-size:1rem!important;}
  .stat-label,.transport-stat-card span,.hours-stat-card .stat-label{font-size:.56rem!important;letter-spacing:.04em!important;}
  .topbar h1{font-size:1.22rem!important;}
  .btn{width:100%!important;}
  .actions .btn{width:100%!important;}
  .safe-action-select{width:100%!important;min-width:0!important;}
  .card{padding:11px!important;}
}


/* =========================================================
   Fase 4D v86 - mobiele Documenten/Aanvragen polish
   ========================================================= */
@media (max-width: 760px){
  /* algemene mobiele typografie iets rustiger */
  .main{font-size:14px!important;}
  .main h1{font-size:1.18rem!important;}
  .main h2{font-size:1rem!important;}

  /* Aanvragen & ritten: echte compacte kaartweergave */
  .transport-page .transport-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .transport-page .transport-toolbar input,
  .transport-page .transport-toolbar select{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    font-size:.82rem!important;
  }
  .transport-list-card-full .transport-compact-list{
    display:grid!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .transport-list-card-full .transport-compact-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:12px!important;
    border-radius:14px!important;
    border:1px solid rgba(148,163,184,.18)!important;
    background:rgba(255,255,255,.025)!important;
  }
  .transport-list-card-full .transport-cell{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    column-gap:8px!important;
    row-gap:2px!important;
    align-items:start!important;
    padding:0!important;
    min-width:0!important;
    border:0!important;
    text-align:left!important;
  }
  .transport-list-card-full .transport-cell::before{
    content:attr(data-label)!important;
    grid-column:1!important;
    grid-row:1 / span 5!important;
    font-size:.62rem!important;
    line-height:1.15!important;
    letter-spacing:.07em!important;
    text-transform:uppercase!important;
    font-weight:850!important;
    color:var(--muted)!important;
    padding-top:2px!important;
  }
  .transport-list-card-full .transport-cell > *{
    grid-column:2!important;
    min-width:0!important;
  }
  .transport-list-card-full .transport-cell strong{
    font-size:.86rem!important;
    line-height:1.25!important;
    font-weight:720!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .transport-list-card-full .transport-cell small{
    font-size:.72rem!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .transport-list-card-full .route-cell strong,
  .transport-list-card-full .object-cell strong{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .transport-list-card-full .status-cell .transport-status-control{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:5px!important;
  }
  .transport-list-card-full .transport-status-select{
    width:min(100%, 205px)!important;
    min-width:185px!important;
    max-width:205px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 30px 0 10px!important;
    font-size:.73rem!important;
    font-weight:700!important;
    line-height:1!important;
    border-radius:10px!important;
  }
  .transport-list-card-full .transport-status-doc-row{
    width:min(100%, 205px)!important;
    display:flex!important;
    justify-content:flex-start!important;
  }
  .transport-list-card-full .transport-status-stepper{
    justify-content:flex-start!important;
    gap:6px!important;
  }
  .transport-list-card-full .transport-step-btn{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    border-radius:8px!important;
    font-size:.92rem!important;
  }
  .transport-list-card-full .document-cell .transport-document-summary{
    display:grid!important;
    gap:6px!important;
    align-items:start!important;
    width:100%!important;
  }
  .transport-list-card-full .transport-doc-link{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    min-height:25px!important;
    padding:4px 8px!important;
    gap:7px!important;
    border-radius:8px!important;
    font-size:.68rem!important;
  }
  .transport-list-card-full .transport-doc-link strong{
    font-size:.70rem!important;
    max-width:130px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .transport-list-card-full .transport-doc-link .doc-status{
    font-size:.58rem!important;
    padding:2px 5px!important;
  }
  .transport-list-card-full .actions-cell .compact-action{
    width:auto!important;
    min-width:96px!important;
    height:34px!important;
    min-height:34px!important;
    font-size:.78rem!important;
  }

  /* Documenten: geen brede tabel op smartphone, maar nette kaartregels */
  .documents-table-card,
  main:has(#documentsBody) > .card:last-child{
    padding:10px!important;
    overflow:visible!important;
  }
  .documents-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    overflow:visible!important;
  }
  .documents-table thead{display:none!important;}
  .documents-table tbody{
    display:grid!important;
    gap:10px!important;
    width:100%!important;
  }
  .documents-table tr{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    width:100%!important;
    padding:12px!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.025)!important;
  }
  .documents-table td{
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
    padding:7px 0!important;
    border:0!important;
    min-width:0!important;
    width:100%!important;
    text-align:left!important;
    font-size:.82rem!important;
  }
  .documents-table td + td{border-top:1px solid rgba(148,163,184,.12)!important;}
  .documents-table td::before{
    font-size:.62rem!important;
    line-height:1.15!important;
    letter-spacing:.07em!important;
    text-transform:uppercase!important;
    font-weight:850!important;
    color:var(--muted)!important;
    align-self:start!important;
    padding-top:3px!important;
  }
  .documents-table td:nth-child(1)::before{content:'Type';}
  .documents-table td:nth-child(2)::before{content:'Nummer';}
  .documents-table td:nth-child(3)::before{content:'Documenten';}
  .documents-table td:nth-child(4)::before{content:'Klant';}
  .documents-table td:nth-child(5)::before{content:'Status';}
  .documents-table td:nth-child(6)::before{content:'Totaal';}
  .documents-table td:nth-child(7)::before{content:'Datum';}
  .documents-table td:nth-child(8)::before{content:'Acties';}
  .documents-table .document-number-open{
    width:max-content!important;
    max-width:100%!important;
    font-size:.84rem!important;
    font-weight:720!important;
    text-align:left!important;
    padding:0!important;
  }
  .documents-table .linked-documents-cell,
  .documents-table .documents-status-cell,
  .documents-table .documents-actions-cell{
    text-align:left!important;
  }
  .documents-table .document-link-chips,
  .documents-table .document-link-chips-column{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    justify-content:flex-start!important;
    align-items:center!important;
  }
  .documents-table .document-link-chip,
  .documents-table .document-linked-empty{
    width:max-content!important;
    max-width:100%!important;
    min-height:24px!important;
    padding:4px 7px!important;
    font-size:.64rem!important;
    border-radius:8px!important;
  }
  .documents-table .document-link-chip strong{
    font-size:.66rem!important;
    max-width:135px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .documents-table .document-status-control{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:5px!important;
    width:100%!important;
    max-width:none!important;
  }
  .documents-table .document-status-control .status-change{
    width:min(100%, 205px)!important;
    min-width:170px!important;
    max-width:205px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 30px 0 10px!important;
    font-size:.73rem!important;
    font-weight:700!important;
    border-radius:10px!important;
  }
  .documents-table .document-status-stepper{
    width:min(100%, 205px)!important;
    justify-content:flex-start!important;
    gap:6px!important;
  }
  .documents-table .document-status-step-btn{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    border-radius:8px!important;
    font-size:.92rem!important;
  }
  .documents-table .documents-action-select{
    width:min(100%, 205px)!important;
    min-width:150px!important;
    max-width:205px!important;
    height:34px!important;
    min-height:34px!important;
    font-size:.76rem!important;
    border-radius:10px!important;
  }
}

@media (max-width: 430px){
  .transport-list-card-full .transport-cell,
  .documents-table td{
    grid-template-columns:78px minmax(0,1fr)!important;
    column-gap:7px!important;
  }
  .transport-list-card-full .transport-status-select,
  .documents-table .document-status-control .status-change{
    min-width:180px!important;
    max-width:190px!important;
  }
  .transport-list-card-full .transport-doc-link strong,
  .documents-table .document-link-chip strong{
    max-width:110px!important;
  }
}

/* =========================================================
   Fase 4D v87 - smartphone smalle regels voor Documenten/Klanten
   ========================================================= */
.mobile-document-meta,
.customer-mobile-meta{display:none;}
.customer-name-open{
  appearance:none;border:0;background:transparent;color:inherit;padding:0;margin:0;
  font:inherit;font-weight:720;cursor:pointer;text-align:left;
}
.customer-name-open:hover{text-decoration:underline;}
.customer-detail-modal{max-width:560px!important;width:min(92vw,560px)!important;text-align:left!important;}
.customer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.customer-detail-grid div{border:1px solid rgba(148,163,184,.16);border-radius:10px;padding:9px 10px;background:rgba(255,255,255,.025);}
.customer-detail-grid span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:850;margin-bottom:4px;}
.customer-detail-grid strong{display:block;font-size:.88rem;line-height:1.35;font-weight:650;overflow-wrap:anywhere;}

@media (max-width:760px){
  /* Documenten: smalle, leesbare regels in plaats van grote blokken */
  .documents-table tbody{display:grid!important;gap:8px!important;}
  .documents-table tr.document-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"main status" "links actions"!important;
    gap:7px 10px!important;
    padding:9px 10px!important;
    min-height:72px!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    align-items:center!important;
  }
  .documents-table tr.document-row td{
    display:block!important;
    padding:0!important;
    border:0!important;
    min-width:0!important;
    width:auto!important;
    font-size:.78rem!important;
    text-align:left!important;
  }
  .documents-table tr.document-row td::before{content:none!important;display:none!important;}
  .documents-table .document-type-cell,
  .documents-table .document-customer-cell,
  .documents-table .document-total-cell,
  .documents-table .document-date-cell{display:none!important;}
  .documents-table .document-number-cell{grid-area:main!important;align-self:center!important;min-width:0!important;}
  .documents-table .document-number-open{
    display:block!important;width:max-content!important;max-width:100%!important;
    font-size:.84rem!important;line-height:1.2!important;font-weight:720!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .documents-table .mobile-document-meta{
    display:flex!important;gap:6px!important;align-items:center!important;flex-wrap:nowrap!important;
    margin-top:3px!important;color:var(--muted)!important;font-size:.68rem!important;line-height:1.15!important;
    min-width:0!important;max-width:100%!important;overflow:hidden!important;
  }
  .documents-table .mobile-document-meta span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;min-width:0!important;max-width:50%!important;}
  .documents-table .mobile-document-meta span + span::before{content:'•';margin-right:6px;color:rgba(148,163,184,.65);}
  .documents-table .documents-status-cell{grid-area:status!important;justify-self:end!important;align-self:center!important;min-width:0!important;}
  .documents-table .document-status-control{display:grid!important;gap:4px!important;justify-items:center!important;width:auto!important;max-width:none!important;}
  .documents-table .document-status-control .status-change{
    width:132px!important;min-width:132px!important;max-width:132px!important;
    height:31px!important;min-height:31px!important;border-radius:9px!important;
    font-size:.68rem!important;font-weight:720!important;padding:0 26px 0 9px!important;
  }
  .documents-table .document-status-stepper{width:132px!important;justify-content:center!important;gap:5px!important;}
  .documents-table .document-status-step-btn{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;border-radius:7px!important;font-size:.86rem!important;}
  .documents-table .linked-documents-cell{grid-area:links!important;align-self:center!important;}
  .documents-table .linked-documents-cell.no-linked-docs{display:none!important;}
  .documents-table .document-link-chips,
  .documents-table .document-link-chips-column{display:flex!important;gap:5px!important;flex-wrap:wrap!important;justify-content:flex-start!important;}
  .documents-table .document-link-chip,
  .documents-table .document-linked-empty{font-size:.60rem!important;min-height:22px!important;padding:3px 6px!important;border-radius:7px!important;width:max-content!important;max-width:100%!important;}
  .documents-table .document-link-chip strong{font-size:.62rem!important;max-width:92px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .documents-table .documents-actions-cell{grid-area:actions!important;justify-self:end!important;align-self:center!important;}
  .documents-table .documents-action-select{width:112px!important;min-width:112px!important;max-width:112px!important;height:31px!important;min-height:31px!important;font-size:.68rem!important;border-radius:9px!important;padding:0 26px 0 9px!important;}

  /* Klanten: smalle regels met alleen naam + telefoon/e-mail, details via klik/modal */
  .customers-list-card table.table thead{display:none!important;}
  .customers-list-card table.table tbody{display:grid!important;gap:8px!important;}
  .customers-list-card tr.customer-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    padding:9px 10px!important;
    min-height:58px!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
  }
  .customers-list-card tr.customer-row td{display:none!important;padding:0!important;border:0!important;min-width:0!important;}
  .customers-list-card tr.customer-row .customer-name-cell,
  .customers-list-card tr.customer-row .customer-actions-cell{display:block!important;}
  .customers-list-card .customer-name-open{font-size:.86rem!important;line-height:1.2!important;font-weight:720!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important;}
  .customers-list-card .customer-kvk{display:none!important;}
  .customers-list-card .customer-mobile-meta{display:flex!important;gap:7px!important;align-items:center!important;flex-wrap:wrap!important;margin-top:3px!important;font-size:.70rem!important;line-height:1.15!important;color:var(--muted)!important;}
  .customers-list-card .customer-mobile-meta span{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .customers-list-card .customer-actions-cell{justify-self:end!important;}
  .customers-list-card .customer-action{width:104px!important;min-width:104px!important;max-width:104px!important;height:31px!important;min-height:31px!important;font-size:.68rem!important;border-radius:9px!important;padding:0 26px 0 9px!important;}
  .customer-detail-grid{grid-template-columns:1fr!important;}
}

@media (max-width:430px){
  .documents-table tr.document-row{grid-template-columns:minmax(0,1fr) 126px!important;gap:6px 8px!important;padding:8px 9px!important;}
  .documents-table .document-status-control .status-change,
  .documents-table .document-status-stepper{width:122px!important;min-width:122px!important;max-width:122px!important;}
  .documents-table .document-status-control .status-change{font-size:.66rem!important;}
  .documents-table .documents-action-select{width:96px!important;min-width:96px!important;max-width:96px!important;font-size:.66rem!important;}
}


/* =========================================================
   Fase 4D v88 - smartphone echte smalle regels Documenten/Klanten
   Hardfix: targets #documentsBody/#customersBody direct so old table/card rules cannot win.
   ========================================================= */
@media (max-width:900px){
  main:has(#documentsBody) .card:has(#documentsBody),
  main:has(#customersBody) .card:has(#customersBody){
    padding:8px!important;
    overflow:visible!important;
    border-radius:14px!important;
  }
  main:has(#documentsBody) .table-scroll,
  main:has(#customersBody) .table-scroll{
    overflow:visible!important;
    border:0!important;
  }

  /* Documenten: compacte regels, geen grote mobiele kaart */
  table.documents-table,
  table.documents-table tbody,
  table.documents-table tr,
  table.documents-table td,
  table.documents-table th{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  table.documents-table{
    display:block!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    overflow:visible!important;
  }
  table.documents-table thead{display:none!important;}
  #documentsBody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  #documentsBody tr.document-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 132px 88px!important;
    grid-template-areas:"main status actions" "links status actions"!important;
    gap:5px 8px!important;
    align-items:center!important;
    min-height:58px!important;
    padding:7px 8px!important;
    margin:0!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.025)!important;
    box-shadow:none!important;
  }
  #documentsBody tr.document-row td{
    display:none!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    min-width:0!important;
    width:auto!important;
    text-align:left!important;
  }
  #documentsBody tr.document-row td::before{content:none!important;display:none!important;}
  #documentsBody .document-number-cell{display:block!important;grid-area:main!important;align-self:center!important;overflow:hidden!important;}
  #documentsBody .linked-documents-cell{display:block!important;grid-area:links!important;align-self:center!important;overflow:hidden!important;}
  #documentsBody .linked-documents-cell.no-linked-docs{display:none!important;}
  #documentsBody .documents-status-cell{display:block!important;grid-area:status!important;justify-self:center!important;align-self:center!important;}
  #documentsBody .documents-actions-cell{display:flex!important;grid-area:actions!important;justify-self:end!important;align-self:center!important;}

  #documentsBody .document-number-open{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:.78rem!important;
    line-height:1.15!important;
    font-weight:650!important;
    text-align:left!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #documentsBody .mobile-document-meta{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    margin-top:2px!important;
    max-width:100%!important;
    overflow:hidden!important;
    color:var(--muted)!important;
    font-size:.61rem!important;
    line-height:1.1!important;
  }
  #documentsBody .mobile-document-meta span{
    display:block!important;
    min-width:0!important;
    max-width:50%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  #documentsBody .mobile-document-meta span + span::before{
    content:'•';
    margin-right:5px;
    color:rgba(148,163,184,.65);
  }
  #documentsBody .document-link-chips,
  #documentsBody .document-link-chips-column{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  #documentsBody .document-link-chip,
  #documentsBody .document-linked-empty{
    width:max-content!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:19px!important;
    padding:2px 5px!important;
    border-radius:6px!important;
    font-size:.55rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #documentsBody .document-link-chip span{font-size:.53rem!important;line-height:1!important;}
  #documentsBody .document-link-chip strong{
    font-size:.56rem!important;
    line-height:1!important;
    max-width:82px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #documentsBody .document-status-control{
    display:grid!important;
    justify-items:center!important;
    gap:3px!important;
    width:132px!important;
    max-width:132px!important;
  }
  #documentsBody .document-status-control .status-change{
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 24px 0 8px!important;
    border-radius:8px!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:650!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #documentsBody .document-status-stepper{
    display:flex!important;
    width:132px!important;
    justify-content:center!important;
    gap:5px!important;
  }
  #documentsBody .document-status-step-btn{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
    padding:0!important;
    border-radius:6px!important;
    font-size:.78rem!important;
    line-height:1!important;
  }
  #documentsBody .documents-action-wrap{display:flex!important;justify-content:flex-end!important;width:100%!important;}
  #documentsBody .documents-action-select{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 22px 0 8px!important;
    border-radius:8px!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:650!important;
  }

  /* Klanten: compacte regels, alleen naam + telefoon/mail + actie */
  table:has(#customersBody),
  table:has(#customersBody) tbody,
  table:has(#customersBody) tr,
  table:has(#customersBody) td,
  table:has(#customersBody) th{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  table:has(#customersBody){display:block!important;border-collapse:separate!important;border-spacing:0!important;overflow:visible!important;}
  table:has(#customersBody) thead{display:none!important;}
  #customersBody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  #customersBody tr.customer-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 88px!important;
    gap:8px!important;
    align-items:center!important;
    min-height:50px!important;
    padding:7px 8px!important;
    margin:0!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.025)!important;
    box-shadow:none!important;
  }
  #customersBody tr.customer-row td{
    display:none!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    min-width:0!important;
    width:auto!important;
  }
  #customersBody tr.customer-row td::before{content:none!important;display:none!important;}
  #customersBody .customer-name-cell{display:block!important;overflow:hidden!important;}
  #customersBody .customer-actions-cell{display:flex!important;justify-content:flex-end!important;align-items:center!important;}
  #customersBody .customer-name-open{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:.78rem!important;
    line-height:1.15!important;
    font-weight:650!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  #customersBody .customer-kvk{display:none!important;}
  #customersBody .customer-mobile-meta{
    display:flex!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
    margin-top:2px!important;
    color:var(--muted)!important;
    font-size:.61rem!important;
    line-height:1.1!important;
    overflow:hidden!important;
  }
  #customersBody .customer-mobile-meta span{
    display:block!important;
    min-width:0!important;
    max-width:50%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  #customersBody .customer-mobile-meta span + span::before{
    content:'•';
    margin-right:5px;
    color:rgba(148,163,184,.65);
  }
  #customersBody .customer-action{
    width:84px!important;
    min-width:84px!important;
    max-width:84px!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 22px 0 8px!important;
    border-radius:8px!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:650!important;
  }
}

@media (max-width:430px){
  #documentsBody tr.document-row{
    grid-template-columns:minmax(0,1fr) 124px!important;
    grid-template-areas:"main status" "links actions"!important;
    min-height:64px!important;
    gap:5px 7px!important;
  }
  #documentsBody .documents-actions-cell{justify-self:end!important;}
  #documentsBody .document-status-control,
  #documentsBody .document-status-control .status-change,
  #documentsBody .document-status-stepper{
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
  }
  #documentsBody .document-status-control .status-change{font-size:.60rem!important;}
  #customersBody tr.customer-row{grid-template-columns:minmax(0,1fr) 82px!important;}
  #customersBody .customer-action{width:82px!important;min-width:82px!important;max-width:82px!important;}
}


/* =========================================================
   Fase 4D v89 - echte mobiele lijsten voor Documenten/Klanten
   Niet meer proberen tabelcellen mobiel te verbouwen; aparte compacte lijsten.
   ========================================================= */
.mobile-list{display:none;}
.mobile-empty-state{
  border:1px dashed rgba(148,163,184,.22);
  border-radius:12px;
  padding:12px;
  color:var(--muted);
  font-weight:650;
  font-size:.82rem;
}
@media (max-width: 860px){
  main.main{max-width:100vw!important;overflow-x:hidden!important;}
  main:has(#documentsMobileList) .documents-table,
  main:has(#customersMobileList) .customers-table,
  main:has(#customersMobileList) table.table:not(.documents-table){display:none!important;}
  #documentsMobileList,
  #customersMobileList{display:grid!important;gap:7px!important;width:100%!important;min-width:0!important;}
  .documents-table-card,
  .customers-list-card,
  #klanten-overzicht{padding:8px!important;overflow:hidden!important;border-radius:14px!important;}

  .mobile-doc-row,
  .mobile-customer-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px 8px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    padding:8px 9px!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.025)!important;
    box-shadow:none!important;
  }
  .mobile-doc-row{grid-template-areas:"main status" "links actions";}
  .mobile-doc-main{grid-area:main!important;min-width:0!important;overflow:hidden!important;}
  .mobile-doc-status{grid-area:status!important;justify-self:end!important;align-self:center!important;min-width:0!important;}
  .mobile-doc-links{grid-area:links!important;min-width:0!important;overflow:hidden!important;}
  .mobile-doc-actions{grid-area:actions!important;justify-self:end!important;align-self:center!important;}
  .mobile-doc-number,
  .mobile-customer-name{
    display:block!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    text-align:left!important;
    font-size:.82rem!important;
    line-height:1.2!important;
    font-weight:680!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .mobile-doc-meta,
  .mobile-customer-meta{
    display:flex!important;
    gap:6px!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    margin-top:2px!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    color:var(--muted)!important;
    font-size:.64rem!important;
    line-height:1.15!important;
    font-weight:620!important;
  }
  .mobile-doc-meta span,
  .mobile-customer-meta span{
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .mobile-doc-meta span + span::before,
  .mobile-customer-meta span + span::before{
    content:'•';
    margin-right:6px;
    color:rgba(148,163,184,.65);
  }
  .mobile-doc-links .document-link-chips,
  .mobile-doc-links .document-link-chips-column{
    display:flex!important;
    gap:4px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    max-width:100%!important;
  }
  .mobile-doc-links .document-link-chip,
  .mobile-doc-links .document-linked-empty{
    width:max-content!important;
    max-width:100%!important;
    min-height:20px!important;
    padding:3px 6px!important;
    border-radius:7px!important;
    font-size:.56rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .mobile-doc-links .document-link-chip span{font-size:.54rem!important;line-height:1!important;}
  .mobile-doc-links .document-link-chip strong{font-size:.58rem!important;line-height:1!important;max-width:98px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .mobile-doc-status .document-status-control{
    width:132px!important;
    max-width:132px!important;
    display:grid!important;
    justify-items:center!important;
    gap:3px!important;
  }
  .mobile-doc-status .status-change{
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 24px 0 8px!important;
    border-radius:8px!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:650!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .mobile-doc-status .document-status-stepper{
    width:132px!important;
    display:flex!important;
    justify-content:center!important;
    gap:5px!important;
  }
  .mobile-doc-status .document-status-step-btn{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
    padding:0!important;
    border-radius:6px!important;
    font-size:.78rem!important;
    line-height:1!important;
  }
  .mobile-doc-actions .documents-action-select,
  .mobile-customer-actions .customer-action{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 22px 0 8px!important;
    border-radius:8px!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:650!important;
  }
  .mobile-customer-row{min-height:50px!important;}
  .mobile-customer-main{min-width:0!important;overflow:hidden!important;}
  .mobile-customer-actions{justify-self:end!important;}

  main:has(#documentsMobileList) .topbar,
  main:has(#customersMobileList) .topbar{gap:8px!important;}
  main:has(#documentsMobileList) .topbar .btn,
  main:has(#customersMobileList) .topbar .btn{min-height:38px!important;border-radius:10px!important;font-size:.82rem!important;}
  main:has(#documentsMobileList) .form-grid,
  main:has(#customersMobileList) .form-grid{gap:9px!important;}
  main:has(#documentsMobileList) .field label,
  main:has(#customersMobileList) .field label{font-size:.70rem!important;}
  main:has(#documentsMobileList) input,
  main:has(#documentsMobileList) select,
  main:has(#customersMobileList) input,
  main:has(#customersMobileList) select{min-height:38px!important;height:38px!important;border-radius:10px!important;font-size:.82rem!important;}
}
@media (max-width:430px){
  .mobile-doc-row{grid-template-columns:minmax(0,1fr) 124px!important;grid-template-areas:"main status" "links actions"!important;gap:6px 7px!important;}
  .mobile-doc-status .document-status-control,
  .mobile-doc-status .status-change,
  .mobile-doc-status .document-status-stepper{width:124px!important;min-width:124px!important;max-width:124px!important;}
  .mobile-doc-status .status-change{font-size:.60rem!important;}
  .mobile-doc-actions .documents-action-select,
  .mobile-customer-actions .customer-action{width:82px!important;min-width:82px!important;max-width:82px!important;}
}


/* =========================================================
   Fase 4D v90 - smartphone Documenten/Klanten status & acties polish
   Doel: status onder tekst links, dropdowns volledig leesbaar, actieknoppen niet afgekapt.
   ========================================================= */
@media (max-width: 860px){
  /* Documenten: geen status rechts naast de tekst; die neemt te veel ruimte in.
     Status staat nu op de tweede regel links, acties rechts. */
  .mobile-doc-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "main main"
      "status actions"
      "links links"!important;
    align-items:center!important;
    gap:7px 8px!important;
    padding:9px 10px!important;
  }
  .mobile-doc-main{grid-area:main!important;max-width:100%!important;}
  .mobile-doc-status{grid-area:status!important;justify-self:start!important;align-self:center!important;width:100%!important;min-width:0!important;}
  .mobile-doc-actions{grid-area:actions!important;justify-self:end!important;align-self:center!important;}
  .mobile-doc-links{grid-area:links!important;justify-self:start!important;width:100%!important;margin-top:0!important;}

  .mobile-doc-number{
    font-size:.84rem!important;
    line-height:1.15!important;
    letter-spacing:-.01em!important;
  }
  .mobile-doc-meta{
    font-size:.65rem!important;
    line-height:1.15!important;
    max-width:100%!important;
  }
  .mobile-doc-status .document-status-control{
    width:min(190px, 100%)!important;
    max-width:190px!important;
    display:grid!important;
    justify-items:center!important;
    gap:3px!important;
  }
  .mobile-doc-status .status-change{
    width:100%!important;
    min-width:170px!important;
    max-width:190px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0 26px 0 10px!important;
    border-radius:9px!important;
    font-size:.70rem!important;
    line-height:1!important;
    font-weight:650!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .mobile-doc-status .document-status-stepper{
    width:100%!important;
    min-width:170px!important;
    max-width:190px!important;
    display:flex!important;
    justify-content:center!important;
    gap:6px!important;
  }
  .mobile-doc-status .document-status-step-btn{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    border-radius:6px!important;
    font-size:.78rem!important;
    line-height:1!important;
  }
  .mobile-doc-actions .documents-action-select,
  .mobile-customer-actions .customer-action{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0 24px 0 10px!important;
    border-radius:9px!important;
    font-size:.70rem!important;
    line-height:1!important;
    font-weight:650!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Klanten: compacte regels, maar actie-dropdown volledig leesbaar. */
  .mobile-customer-row{
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:7px 9px!important;
    min-height:54px!important;
    padding:9px 10px!important;
  }
  .mobile-customer-name{
    font-size:.84rem!important;
    line-height:1.15!important;
    font-weight:680!important;
  }
  .mobile-customer-meta{
    font-size:.65rem!important;
    line-height:1.2!important;
    flex-wrap:wrap!important;
    row-gap:2px!important;
  }
}
@media (max-width: 430px){
  .mobile-doc-row{
    grid-template-columns:minmax(0,1fr) 108px!important;
    grid-template-areas:
      "main main"
      "status actions"
      "links links"!important;
  }
  .mobile-doc-status .document-status-control,
  .mobile-doc-status .status-change,
  .mobile-doc-status .document-status-stepper{
    width:176px!important;
    min-width:176px!important;
    max-width:176px!important;
  }
  .mobile-doc-status .status-change{font-size:.68rem!important;}
  .mobile-doc-actions .documents-action-select,
  .mobile-customer-actions .customer-action{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    font-size:.68rem!important;
  }
  .mobile-customer-row{grid-template-columns:minmax(0,1fr) 108px!important;}
}
@media (max-width: 370px){
  .mobile-doc-row{grid-template-columns:1fr!important;grid-template-areas:"main" "status" "actions" "links"!important;}
  .mobile-doc-actions{justify-self:start!important;}
}

/* =========================================================
   Fase 4D v91 - smartphone header/brand centreren
   ========================================================= */
@media (max-width: 900px){
  .sidebar:not(.is-open){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:58px!important;
    max-height:58px!important;
    padding:7px 10px!important;
    overflow:hidden!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
  }
  .sidebar:not(.is-open) .brand{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:44px!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    gap:9px!important;
  }
  .sidebar:not(.is-open) .brand img{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:10px!important;
    display:block!important;
    align-self:center!important;
  }
  .sidebar:not(.is-open) .brand strong{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:34px!important;
    line-height:1.05!important;
    font-size:.98rem!important;
    transform:translateY(-1px)!important;
  }
  .sidebar:not(.is-open) .brand strong span{
    line-height:1.05!important;
    margin-top:2px!important;
  }
  .sidebar:not(.is-open) .brand .ag-theme-toggle,
  .sidebar:not(.is-open) .mobile-menu-toggle{
    align-self:center!important;
    margin-top:0!important;
    margin-bottom:0!important;
    transform:none!important;
  }
  .sidebar:not(.is-open) .brand .ag-theme-toggle{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    flex:0 0 32px!important;
    border-radius:10px!important;
  }
  .sidebar:not(.is-open) .mobile-menu-toggle{
    width:38px!important;
    height:34px!important;
    min-height:34px!important;
    flex:0 0 38px!important;
  }
}

/* =========================================================
   Fase 4D v92 - Chauffeursrol en chauffeursbeheer
   ========================================================= */
.transport-drivers-page .topbar-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.driver-admin-grid{display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(280px,.75fr);gap:16px;align-items:start;margin-bottom:16px}
.driver-invite-card,.driver-explain-card,.drivers-list-card{padding:18px 20px!important}
.driver-role-preview{margin:14px 0;border:1px solid rgba(56,189,248,.20);background:rgba(14,165,233,.08);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.driver-role-preview strong{font-size:.9rem;color:#e8f6ff}.driver-role-preview span{font-size:.82rem;color:#a9c7ed;line-height:1.45}
.driver-info-steps{display:grid;gap:10px}.driver-info-steps div{border:1px solid rgba(148,163,184,.16);border-radius:13px;background:rgba(15,23,42,.20);padding:12px}.driver-info-steps strong{display:block;font-size:.9rem;margin-bottom:3px}.driver-info-steps span{display:block;color:#a9c7ed;font-size:.82rem;line-height:1.45}
.drivers-table{table-layout:fixed}.drivers-table th:nth-child(1),.drivers-table td:nth-child(1){width:28%}.drivers-table th:nth-child(2),.drivers-table td:nth-child(2){width:22%}.drivers-table th:nth-child(3),.drivers-table td:nth-child(3){width:14%;text-align:center}.drivers-table th:nth-child(4),.drivers-table td:nth-child(4){width:17%;text-align:center}.drivers-table th:nth-child(5),.drivers-table td:nth-child(5){width:19%;text-align:right}
.driver-row-actions{display:flex;gap:7px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.driver-row.is-muted{opacity:.72}.driver-coming-card{max-width:720px}.driver-coming-card p{line-height:1.6}
.unplanned-driver-field select.unplanned-driver{min-height:34px!important;height:34px!important;border-radius:10px!important;font-size:.84rem!important;padding:0 10px!important}
.sidebar .navlinks a[data-nav="mijn-ritten"]{font-weight:800}
@media(max-width:900px){.driver-admin-grid{grid-template-columns:1fr}.transport-drivers-page .topbar-actions{width:100%;justify-content:stretch}.transport-drivers-page .topbar-actions .btn{flex:1}.drivers-table thead{display:none}.drivers-table,.drivers-table tbody,.drivers-table tr,.drivers-table td{display:block;width:100%}.drivers-table tr{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:11px;background:rgba(15,23,42,.22)}.drivers-table td{border:0!important;padding:6px 0!important;display:grid;grid-template-columns:92px 1fr;gap:10px;text-align:left!important}.drivers-table td::before{content:attr(data-label);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#8fb3df;font-weight:900}.driver-row-actions{justify-content:flex-start}.driver-row-actions .btn{min-height:34px!important;padding:7px 10px!important}.driver-invite-card,.driver-explain-card,.drivers-list-card{padding:14px!important}}

/* Fase 4D v93 - Mijn ritten mobiele chauffeursomgeving */
.driver-rides-page{max-width:980px;margin:0 auto;width:100%;}
.driver-mobile-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.driver-mobile-hero h1{margin:2px 0 4px;font-family:'Space Grotesk',Inter,sans-serif;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.05;}
.driver-mobile-hero .muted{max-width:620px;line-height:1.45;}
.driver-refresh-btn{white-space:nowrap;}
.driver-rides-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.driver-summary-tile{border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.20);padding:13px 14px;min-width:0;}
.driver-summary-tile span{display:block;color:#9dbde3;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.driver-summary-tile strong{display:block;margin-top:4px;font-size:1.35rem;line-height:1;color:#eef7ff;}
.driver-rides-toolbar-card{padding:12px!important;margin-bottom:14px;}
.driver-rides-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.driver-tab{appearance:none;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.22);color:#b7d4f7;border-radius:12px;min-height:38px;padding:0 10px;font-weight:850;font-size:.86rem;cursor:pointer;}
.driver-tab:hover{border-color:rgba(56,189,248,.34);background:rgba(14,165,233,.10);}
.driver-tab.is-active{background:linear-gradient(135deg,rgba(14,165,233,.28),rgba(59,130,246,.22));border-color:rgba(125,211,252,.45);color:#f4fbff;box-shadow:0 12px 28px rgba(14,165,233,.12);}
.driver-rides-hint{margin:9px 2px 0;font-size:.82rem;}
.my-rides-list{display:grid;gap:12px;}
.my-ride-card{border:1px solid rgba(148,163,184,.18);border-radius:18px;background:linear-gradient(180deg,rgba(15,23,42,.30),rgba(15,23,42,.18));padding:15px;box-shadow:0 18px 42px rgba(2,6,23,.18);position:relative;overflow:hidden;}
.my-ride-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(56,189,248,.55);}
.my-ride-card.status-pickup::before{background:rgba(251,191,36,.75);}
.my-ride-card.status-in_transit::before{background:rgba(14,165,233,.85);}
.my-ride-card.status-delivered::before,.my-ride-card.status-completed::before,.my-ride-card.status-invoiced::before{background:rgba(34,197,94,.75);}
.my-ride-card.status-problem::before{background:rgba(248,113,113,.85);}
.my-ride-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;padding-left:3px;}
.my-ride-head strong{display:block;color:#eff8ff;font-size:1.05rem;line-height:1.05;margin-top:2px;}
.my-ride-date{display:block;color:#7dd3fc;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
.my-ride-status{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(14,165,233,.14);border:1px solid rgba(56,189,248,.25);color:#d9f2ff;font-size:.76rem;font-weight:900;white-space:nowrap;}
.my-ride-main h2{margin:0;font-size:1.05rem;line-height:1.2;color:#f5fbff;}
.my-ride-main p{margin:4px 0 0;color:#a6c6eb;font-size:.85rem;line-height:1.35;}
.my-ride-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;}
.my-ride-info div{border:1px solid rgba(148,163,184,.13);border-radius:13px;background:rgba(2,6,23,.16);padding:9px 10px;min-width:0;}
.my-ride-info span{display:block;color:#8fb3df;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.my-ride-info strong{display:block;color:#e8f5ff;font-size:.82rem;line-height:1.25;font-weight:750;overflow-wrap:anywhere;}
.my-ride-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;}
.my-ride-actions .btn{min-height:38px!important;padding:8px 10px!important;border-radius:12px!important;font-size:.82rem!important;font-weight:850!important;text-align:center;display:inline-flex;align-items:center;justify-content:center;line-height:1.15;}
.my-ride-actions .btn[disabled],.my-ride-actions .btn[aria-disabled="true"]{opacity:.48;pointer-events:none;}
.driver-rides-loading,.driver-rides-empty{text-align:center;padding:28px 18px!important;}
.driver-empty-icon{font-size:2rem;margin-bottom:8px;}
.driver-rides-empty h2{margin:0 0 5px;font-size:1.08rem;}
.driver-ride-detail-modal{position:fixed;inset:0;z-index:9999;display:none;}
.driver-ride-detail-modal.is-open{display:block;}
.driver-ride-detail-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(7px);}
.driver-ride-detail-panel{position:absolute;right:22px;top:22px;bottom:22px;width:min(520px,calc(100vw - 44px));overflow:auto;border:1px solid rgba(148,163,184,.22);border-radius:22px;background:#0b1628;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:18px;}
.driver-ride-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.driver-ride-detail-head h2{margin:2px 0 4px;font-size:1.25rem;line-height:1.15;}
.driver-ride-detail-body{display:grid;gap:8px;}
.driver-detail-line{border:1px solid rgba(148,163,184,.15);border-radius:13px;background:rgba(15,23,42,.26);padding:10px 11px;}
.driver-detail-line span{display:block;font-size:.69rem;color:#90b4df;text-transform:uppercase;letter-spacing:.06em;font-weight:900;margin-bottom:2px;}
.driver-detail-line strong{display:block;font-size:.88rem;color:#edf7ff;line-height:1.35;overflow-wrap:anywhere;}
.driver-ride-detail-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;}
.driver-ride-detail-actions .btn{justify-content:center;min-height:40px!important;}
body.driver-detail-open{overflow:hidden;}
@media(max-width:720px){
  .driver-rides-page{padding-left:0!important;padding-right:0!important;}
  .driver-mobile-hero{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px;text-align:left;}
  .driver-mobile-hero h1{font-size:1.9rem;}
  .driver-refresh-btn{width:100%;min-height:40px!important;}
  .driver-rides-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px;}
  .driver-summary-tile{padding:10px 8px;border-radius:13px;text-align:center;}
  .driver-summary-tile span{font-size:.62rem;line-height:1.15;min-height:1.4em;}
  .driver-summary-tile strong{font-size:1.25rem;}
  .driver-rides-toolbar-card{padding:9px!important;border-radius:15px!important;}
  .driver-rides-tabs{gap:6px;}
  .driver-tab{min-height:35px;border-radius:10px;padding:0 6px;font-size:.75rem;}
  .driver-rides-hint{font-size:.75rem;line-height:1.35;margin-top:8px;}
  .my-rides-list{gap:9px;}
  .my-ride-card{border-radius:16px;padding:12px 11px 12px 14px;box-shadow:none;}
  .my-ride-head{align-items:center;margin-bottom:8px;}
  .my-ride-head strong{font-size:.98rem;}
  .my-ride-status{min-height:26px;padding:0 8px;font-size:.68rem;max-width:128px;text-align:center;}
  .my-ride-main h2{font-size:.98rem;line-height:1.22;}
  .my-ride-main p{font-size:.78rem;}
  .my-ride-info{grid-template-columns:1fr;gap:6px;margin-top:9px;}
  .my-ride-info div{padding:7px 9px;border-radius:11px;}
  .my-ride-info span{font-size:.62rem;}
  .my-ride-info strong{font-size:.78rem;}
  .my-ride-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;}
  .my-ride-actions .btn{min-height:38px!important;font-size:.76rem!important;padding:7px 7px!important;}
  .driver-ride-detail-panel{left:0;right:0;bottom:0;top:auto;width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:16px;}
  .driver-ride-detail-head h2{font-size:1.1rem;}
}
@media(max-width:390px){
  .driver-mobile-hero h1{font-size:1.72rem;}
  .driver-summary-tile span{font-size:.58rem;}
  .driver-tab{font-size:.70rem;padding:0 4px;}
  .my-ride-status{max-width:112px;}
  .my-ride-actions .btn{font-size:.72rem!important;}
}

/* =========================================================
   Fase 4D v94 - Light-mode leesbaarheid chauffeurs + Mijn ritten
   Fix: v92/v93 gebruikte donkere kaartkleuren ook in lichte weergave.
   Deze overrides herstellen contrast in light mode en laten dark mode intact.
   ========================================================= */
html[data-theme="light"] .transport-drivers-page .driver-role-preview,
html:not([data-theme="dark"]) .transport-drivers-page .driver-role-preview{
  background:#eef8ff!important;
  border-color:#bfe7ff!important;
  color:var(--text)!important;
}
html[data-theme="light"] .transport-drivers-page .driver-role-preview strong,
html:not([data-theme="dark"]) .transport-drivers-page .driver-role-preview strong{
  color:#0d1b3e!important;
}
html[data-theme="light"] .transport-drivers-page .driver-role-preview span,
html:not([data-theme="dark"]) .transport-drivers-page .driver-role-preview span{
  color:#3f5878!important;
}
html[data-theme="light"] .transport-drivers-page .driver-info-steps div,
html:not([data-theme="dark"]) .transport-drivers-page .driver-info-steps div{
  background:#f8fbff!important;
  border-color:#dde8f5!important;
  color:var(--text)!important;
}
html[data-theme="light"] .transport-drivers-page .driver-info-steps strong,
html:not([data-theme="dark"]) .transport-drivers-page .driver-info-steps strong{
  color:#0d1b3e!important;
}
html[data-theme="light"] .transport-drivers-page .driver-info-steps span,
html:not([data-theme="dark"]) .transport-drivers-page .driver-info-steps span{
  color:#526985!important;
}
html[data-theme="light"] .transport-drivers-page .drivers-table td::before,
html:not([data-theme="dark"]) .transport-drivers-page .drivers-table td::before{
  color:#526985!important;
}
@media(max-width:900px){
  html[data-theme="light"] .transport-drivers-page .drivers-table tr,
  html:not([data-theme="dark"]) .transport-drivers-page .drivers-table tr{
    background:#fff!important;
    border-color:var(--line)!important;
    color:var(--text)!important;
  }
  html[data-theme="light"] .transport-drivers-page .drivers-table td,
  html:not([data-theme="dark"]) .transport-drivers-page .drivers-table td{
    color:var(--text)!important;
  }
}

html[data-theme="light"] .driver-rides-page .driver-summary-tile,
html:not([data-theme="dark"]) .driver-rides-page .driver-summary-tile{
  background:#fff!important;
  border-color:#dce8f6!important;
  box-shadow:0 8px 24px rgba(13,27,62,.06)!important;
  color:var(--text)!important;
}
html[data-theme="light"] .driver-rides-page .driver-summary-tile span,
html:not([data-theme="dark"]) .driver-rides-page .driver-summary-tile span{
  color:#526985!important;
}
html[data-theme="light"] .driver-rides-page .driver-summary-tile strong,
html:not([data-theme="dark"]) .driver-rides-page .driver-summary-tile strong{
  color:#0d1b3e!important;
}
html[data-theme="light"] .driver-rides-page .driver-tab,
html:not([data-theme="dark"]) .driver-rides-page .driver-tab{
  background:#f8fbff!important;
  border-color:#d8e6f5!important;
  color:#274364!important;
}
html[data-theme="light"] .driver-rides-page .driver-tab:hover,
html:not([data-theme="dark"]) .driver-rides-page .driver-tab:hover{
  background:#eef8ff!important;
  border-color:#bfe7ff!important;
  color:#0d3a5c!important;
}
html[data-theme="light"] .driver-rides-page .driver-tab.is-active,
html:not([data-theme="dark"]) .driver-rides-page .driver-tab.is-active{
  background:linear-gradient(135deg,#e8f7ff,#f1f8ff)!important;
  border-color:#7fcdf6!important;
  color:#0b4670!important;
  box-shadow:0 8px 22px rgba(26,159,232,.12)!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-card,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-card{
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  border-color:#dce8f6!important;
  box-shadow:0 14px 34px rgba(13,27,62,.08)!important;
  color:var(--text)!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-head strong,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-head strong,
html[data-theme="light"] .driver-rides-page .my-ride-main h2,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-main h2{
  color:#0d1b3e!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-date,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-date{
  color:#0b77b7!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-status,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-status{
  background:#e8f7ff!important;
  border-color:#bce8ff!important;
  color:#075985!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-main p,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-main p{
  color:#526985!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-info div,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-info div{
  background:#f7fbff!important;
  border-color:#dce8f6!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-info span,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-info span{
  color:#60758f!important;
}
html[data-theme="light"] .driver-rides-page .my-ride-info strong,
html:not([data-theme="dark"]) .driver-rides-page .my-ride-info strong{
  color:#172b4d!important;
}
html[data-theme="light"] .driver-rides-page .driver-rides-loading,
html:not([data-theme="dark"]) .driver-rides-page .driver-rides-loading,
html[data-theme="light"] .driver-rides-page .driver-rides-empty,
html:not([data-theme="dark"]) .driver-rides-page .driver-rides-empty{
  background:#fff!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="light"] .driver-rides-page .driver-rides-empty h2,
html:not([data-theme="dark"]) .driver-rides-page .driver-rides-empty h2{
  color:#0d1b3e!important;
}
html[data-theme="light"] .driver-rides-page .driver-ride-detail-panel,
html:not([data-theme="dark"]) .driver-rides-page .driver-ride-detail-panel{
  background:#fff!important;
  border-color:#dce8f6!important;
  color:var(--text)!important;
  box-shadow:0 30px 80px rgba(13,27,62,.24)!important;
}
html[data-theme="light"] .driver-rides-page .driver-ride-detail-head h2,
html:not([data-theme="dark"]) .driver-rides-page .driver-ride-detail-head h2{
  color:#0d1b3e!important;
}
html[data-theme="light"] .driver-rides-page .driver-detail-line,
html:not([data-theme="dark"]) .driver-rides-page .driver-detail-line{
  background:#f8fbff!important;
  border-color:#dce8f6!important;
}
html[data-theme="light"] .driver-rides-page .driver-detail-line span,
html:not([data-theme="dark"]) .driver-rides-page .driver-detail-line span{
  color:#60758f!important;
}
html[data-theme="light"] .driver-rides-page .driver-detail-line strong,
html:not([data-theme="dark"]) .driver-rides-page .driver-detail-line strong{
  color:#172b4d!important;
}