:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#17202a;background:#f4f6f8;--line:#e4e8ec;--muted:#6d7782;--accent:#1d6fe8}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}
.layout{display:flex;min-height:100vh}aside{width:255px;background:#111827;color:#fff;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;min-height:100vh;box-sizing:border-box;flex-shrink:0;overflow-y:auto}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:30px}.brand-mark{width:38px;height:38px;border-radius:10px;background:#fff;color:#111827;display:grid;place-items:center;font-weight:800}.brand small{display:block;color:#9ca3af;margin-top:2px}
nav{display:grid;gap:6px}.nav{border:0;background:transparent;color:#cbd5e1;text-align:left;padding:11px 12px;border-radius:8px}.nav:hover,.nav.active{background:#1f2937;color:#fff}.userbox{margin-top:auto;border-top:1px solid #293241;padding:14px 4px;color:#cbd5e1;font-size:13px;line-height:1.5}.logout{width:100%;background:#1f2937;border:1px solid #374151;color:#fff;padding:9px;border-radius:7px}
main{flex:1;padding:30px;max-width:1500px;margin:auto;width:100%}header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--muted)}h1{margin:4px 0 0;font-size:30px}h2{margin-top:0}.pill{padding:7px 11px;border-radius:999px;background:#e7f6ed;color:#147a3c;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 1px 2px #00000008}.metric{font-size:30px;font-weight:750;margin:8px 0}.muted{color:var(--muted)}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:14px}th{background:#f8fafb;color:#59636e}tr:last-child td{border-bottom:0}.toolbar{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-bottom:15px}.primary{background:var(--accent);color:#fff;border:0;padding:9px 13px;border-radius:8px}.secondary{background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:8px}.empty{padding:35px;text-align:center;color:var(--muted);background:#fff;border:1px dashed #ccd3da;border-radius:10px}
.modal-bg{
  position:fixed;
  inset:0;
  background:transparent;
  display:block;
  padding:24px 20px;
  overflow-y:auto;
  box-sizing:border-box;
  overscroll-behavior:contain;
  z-index:1000;
  pointer-events:auto;
}
.modal{
  background:#fff;
  border-radius:14px;
  padding:22px;
  width:min(500px,100%);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  box-sizing:border-box;
  margin:0;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid #e2e8f0;
  box-shadow:0 18px 50px rgba(15,23,42,.18);
  pointer-events:auto;
}
.modal .form-actions{
  position:sticky;
  bottom:-22px;
  background:#fff;
  padding:14px 0 0;
  margin-top:18px;
  z-index:2;
}label{display:block;font-size:13px;font-weight:600;margin:12px 0}input,textarea,select{width:100%;margin-top:6px;border:1px solid #ccd3da;border-radius:7px;padding:10px;background:#fff}textarea{min-height:90px}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.error{color:#b42318;font-size:13px;margin-top:10px}.login{min-height:100vh;display:grid;place-items:center;background:#eef2f6}.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;width:min(420px,calc(100% - 30px));box-shadow:0 15px 40px #00000012}.login-card button{width:100%;background:#111827;color:#fff;border:0;padding:11px;border-radius:8px;margin-top:8px}
#toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:12px 15px;border-radius:9px;display:none}
@media(max-width:800px){aside{width:210px}main{padding:20px}}@media(max-width:650px){aside{display:none;position:static;height:auto;min-height:0}main{padding:15px}}

input[type=checkbox]{accent-color:var(--accent)}

@supports not (height: 100dvh){
  .modal{max-height:calc(100vh - 48px)}
}

.planning-board{display:grid;grid-template-columns:72px repeat(7,minmax(150px,1fr));min-width:1120px;overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.planning-time-axis{background:var(--panel);border-right:1px solid var(--line);padding-top:36px}
.planning-hour{height:60px;box-sizing:border-box;padding:5px 8px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.planning-day{min-width:150px;position:relative;border-right:1px solid var(--line)}
.planning-day-header{height:36px;box-sizing:border-box;padding:9px 8px;font-weight:700;border-bottom:1px solid var(--line);background:var(--panel)}
.planning-day-grid{height:900px;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 59px,var(--line) 60px)}
.planning-drop-slot{height:60px;box-sizing:border-box;position:relative;z-index:1}
.planning-drop-slot.drag-over{background:rgba(80,140,255,.16)}
.planning-task{position:absolute;left:4px;right:4px;z-index:2;box-sizing:border-box;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--panel);box-shadow:0 2px 5px rgba(0,0,0,.12);cursor:grab;overflow:hidden;display:flex;flex-direction:column;gap:3px;font-size:12px}
.planning-task:active{cursor:grabbing}.planning-task.dragging{opacity:.45}.planning-task span{color:var(--muted);font-size:11px}
.planning-unscheduled-chip{margin:4px;padding:7px;border:1px dashed var(--line);border-radius:7px;background:var(--panel);cursor:grab;position:relative;z-index:2;font-size:12px}

.planning-resize-handle{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize;z-index:5}
.planning-task:hover .planning-resize-handle{background:rgba(80,140,255,.18)}
.planning-drop-slot{cursor:crosshair}

.planning-conflict-banner{margin-bottom:15px;padding:12px 14px;border:1px solid var(--danger,#d9534f);border-radius:10px;background:rgba(217,83,79,.08)}
.planning-task.planning-conflict{border:2px solid var(--danger,#d9534f)}
.planning-conflict-label{font-size:10px;font-weight:700;color:var(--danger,#d9534f)}

.availability-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:10px 12px;border-radius:9px}
.availability-row .pill{margin-left:7px}
.planning-task.planning-unavailable{border:2px solid #b42318;background:rgba(180,35,24,.06)}
.planning-unavailable-label{font-size:10px;font-weight:700;color:#b42318}

.availability-pending{margin-top:4px;font-size:12px;font-weight:700;color:#9a6700}

.planning-availability-band{
  min-height:30px;
  box-sizing:border-box;
  padding:3px 4px;
  display:flex;
  flex-direction:column;
  gap:3px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.planning-availability{
  min-height:24px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 6px;
  border:2px solid;
  border-radius:999px;
  font-size:10px;
  line-height:1.1;
  background:var(--panel);
  overflow:hidden;
}
.planning-availability > div{
  min-width:0;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  align-items:center;
}
.planning-availability span:not(.planning-availability-dot){
  color:var(--muted);
}
.planning-availability-dot{
  width:7px;
  height:7px;
  min-width:7px;
  border-radius:50%;
  background:currentColor;
}
.planning-availability-pending{
  border-color:#d97706;
  color:#d97706;
  background:rgba(217,119,6,.08);
}
.planning-availability-approved{
  border-color:#16a34a;
  color:#16a34a;
  background:rgba(22,163,74,.08);
}
.planning-availability-rejected{
  border-color:#dc2626;
  color:#dc2626;
  background:rgba(220,38,38,.08);
}

.planning-availability-band{
  min-height:30px;
  box-sizing:border-box;
  padding:3px 4px;
  display:flex;
  flex-direction:column;
  gap:3px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.planning-availability{
  min-height:24px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 6px;
  border:2px solid;
  border-radius:999px;
  font-size:10px;
  line-height:1.1;
  background:var(--panel);
  overflow:hidden;
}
.planning-availability > div{
  min-width:0;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  align-items:center;
}
.planning-availability span:not(.planning-availability-dot){color:var(--muted)}
.planning-availability-dot{
  width:7px;height:7px;min-width:7px;border-radius:50%;background:currentColor
}
.planning-availability-pending{border-color:#d97706;color:#d97706;background:rgba(217,119,6,.08)}
.planning-availability-approved{border-color:#16a34a;color:#16a34a;background:rgba(22,163,74,.08)}
.planning-availability-rejected{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.08)}
.planning-availability-timed{
  position:absolute;
  left:4px;
  right:4px;
  z-index:3;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,.10);
  align-items:flex-start;
  pointer-events:none;
}

.planning-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.planning-toolbar select{min-width:150px}
.planning-segment{display:flex;gap:5px}
.planning-persons{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.planning-person-status{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12px;cursor:default;transition:.15s}
.planning-person-status span:last-child{color:var(--muted)}
.planning-person-dot{width:8px;height:8px;border-radius:50%;background:#16a34a}
.planning-person-unavailable{border-color:#dc2626;background:rgba(220,38,38,.07)}
.planning-person-unavailable .planning-person-dot{background:#dc2626}
.planning-person-pending{border-color:#d97706;background:rgba(217,119,6,.07)}
.planning-person-pending .planning-person-dot{background:#d97706}
.planning-person-status.drag-target{outline:2px dashed #2563eb;outline-offset:2px;transform:translateY(-1px)}
.planning-conflict-dialog{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);display:grid;gap:5px;margin:12px 0}
.planning-project-0{border-left:4px solid #4f46e5}
.planning-project-1{border-left:4px solid #0891b2}
.planning-project-2{border-left:4px solid #16a34a}
.planning-project-3{border-left:4px solid #d97706}
.planning-project-4{border-left:4px solid #db2777}
.planning-project-5{border-left:4px solid #7c3aed}
.planning-project-6{border-left:4px solid #059669}
.planning-project-7{border-left:4px solid #ea580c}
.planning-project-none{border-left:4px solid var(--line)}
.planning-task{cursor:grab}
.planning-task:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.15)}

.planning-person-info{display:flex;flex-direction:column;min-width:0}
.planning-person-info span{font-size:10px;color:var(--muted)}
.planning-person-alert{font-size:10px;font-weight:600;margin-left:2px;white-space:nowrap}
.planning-person-alert-red{color:#dc2626}
.planning-person-alert-orange{color:#d97706}
.planning-person-alert-neutral{color:var(--muted)}
.planning-person-status.has-planning-conflict{
  border-color:#d97706;
  box-shadow:0 0 0 1px rgba(217,119,6,.12);
}
.planning-person-status.has-unavailability{
  border-color:#dc2626;
  box-shadow:0 0 0 1px rgba(220,38,38,.12);
}
.planning-task.planning-conflict{
  border:2px solid #d97706 !important;
  background:rgba(217,119,6,.09) !important;
  box-shadow:0 0 0 2px rgba(217,119,6,.10);
}
.planning-task.planning-unavailable{
  border:2px solid #dc2626 !important;
  background:rgba(220,38,38,.08) !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.10);
}
.planning-conflict-label,
.planning-unavailable-label{
  display:block;
  font-weight:800;
  font-size:10px;
  line-height:1.2;
  margin-top:2px;
}
.planning-conflict-label{color:#b45309}
.planning-unavailable-label{color:#b91c1c}
.planning-conflict-banner{
  border-left:5px solid #d97706;
  background:rgba(217,119,6,.08);
}
.planning-legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:11px;
  color:var(--muted);
}
.planning-legend span{display:inline-flex;align-items:center;gap:5px}
.planning-legend-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
}
.planning-legend-green{background:#16a34a}
.planning-legend-orange{background:#d97706}
.planning-legend-red{background:#dc2626}

.planning-task-form-warning{
  margin:10px 0;
  padding:10px 12px;
  border:1px solid #dc2626;
  border-left:5px solid #dc2626;
  border-radius:8px;
  background:rgba(220,38,38,.08);
  color:#991b1b;
  font-size:12px;
}
#taskSaveButton:disabled{opacity:.5;cursor:not-allowed}

.planning-person-board{overflow:auto;border:1px solid var(--line);border-radius:10px;min-width:1100px}
.planning-person-board-axis,.planning-person-row{display:grid;grid-template-columns:180px 900px}
.planning-person-board-axis{background:var(--panel);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.planning-person-board-label,.planning-person-row-label{padding:9px 10px;border-right:1px solid var(--line)}
.planning-person-board-hours{display:grid;grid-template-columns:repeat(15,60px)}
.planning-person-board-hours div{padding:9px 4px;text-align:center;font-size:10px;color:var(--muted);border-right:1px dashed var(--line)}
.planning-person-row{min-height:72px;border-bottom:1px solid var(--line)}
.planning-person-row-label{display:flex;flex-direction:column;justify-content:center;background:var(--panel)}
.planning-person-row-label span{font-size:10px;color:var(--muted)}
.planning-person-row-timeline{position:relative;height:72px;background-image:linear-gradient(to right, transparent 59px, var(--line) 60px);background-size:60px 100%;overflow:visible}
.planning-person-row-slot{position:absolute;top:0;height:72px;width:60px;border-right:1px dashed var(--line);z-index:1}
.planning-person-row-slot.drag-over{background:rgba(37,99,235,.13);outline:2px solid rgba(37,99,235,.35)}
.planning-person-unavailable-band{position:absolute;top:0;height:100%;z-index:0;pointer-events:none;opacity:.28}
.planning-person-unavailable-band.approved{background:repeating-linear-gradient(135deg,#dc2626 0,#dc2626 5px,transparent 5px,transparent 10px)}
.planning-person-unavailable-band.pending{background:repeating-linear-gradient(135deg,#d97706 0,#d97706 5px,transparent 5px,transparent 10px)}
.planning-person-task{position:absolute;top:5px;height:62px;padding:6px 8px;border-radius:7px;z-index:2;overflow:hidden;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.planning-person-task span{font-size:10px}
.planning-person-task strong{font-size:9px}

.planning-person-status{
  position:relative;
  min-width:150px;
}
.planning-person-status.drag-target{
  outline:2px dashed #2563eb;
  outline-offset:3px;
  background:rgba(37,99,235,.08);
  transform:translateY(-1px);
}
.planning-person-status.drag-target::after{
  content:"↓ Taak hier toewijzen";
  position:absolute;
  left:50%;
  top:calc(100% + 6px);
  transform:translateX(-50%);
  z-index:30;
  white-space:nowrap;
  padding:4px 8px;
  border-radius:6px;
  background:#2563eb;
  color:#fff;
  font-size:10px;
  font-weight:700;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.planning-person-alert{
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Beta 2.7: compact planning header so the week board starts higher */
main{padding-top:18px}
header{margin-bottom:12px}
header h1{font-size:26px}
.toolbar{margin-bottom:10px}
.toolbar > div:last-child{
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
#planningDate{
  width:145px !important;
  min-width:145px !important;
  margin-top:0;
}
.planning-toolbar{
  margin-bottom:10px;
  gap:6px;
}
.planning-toolbar select{
  min-width:135px;
  padding:8px 9px;
  margin-top:0;
}
.planning-toolbar .primary,
.planning-toolbar .secondary{
  padding:8px 11px;
}
.planning-person-status{
  padding:6px 9px;
}
.planning-persons{
  margin-top:8px;
  gap:6px;
}
.planning-availability-card{
  margin-bottom:10px !important;
}
.planning-toolbar + .card{
  padding:10px 13px !important;
  margin-bottom:10px !important;
}
.grid[style*="margin-bottom:15px"]{
  margin-bottom:10px !important;
}
.grid[style*="margin-bottom:15px"] .card{
  padding:12px 15px;
}
.grid[style*="margin-bottom:15px"] .metric{
  margin:4px 0;
  font-size:26px;
}

.planning-filter-button{font-weight:600;min-width:110px}
.planning-filter-button::first-letter{font-size:14px}

/* Beta 2.11 */
.planning-task-detail-card{padding:11px;margin-bottom:8px;cursor:pointer}
.planning-task-detail-head{display:flex;justify-content:space-between;gap:10px}
.planning-task-detail-meta{font-size:12px;color:var(--muted);margin-top:7px}
.planning-task-detail-people{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.planning-assignee-chip,.planning-add-person{
  border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:4px 8px;font-size:11px;cursor:pointer;
}
.planning-assignee-chip span{font-weight:700;margin-left:3px}
.planning-add-person{border-style:dashed}
.planning-inline-warning{margin-top:7px;padding:5px 7px;border-radius:6px;background:rgba(217,119,6,.10);color:#92400e;font-size:11px}
.planning-inline-danger{margin-top:7px;padding:5px 7px;border-radius:6px;background:rgba(220,38,38,.08);color:#991b1b;font-size:11px}
.planning-month{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.planning-month-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel);border-bottom:1px solid var(--line)}
.planning-month-weekdays div{padding:9px 10px;text-transform:uppercase;font-size:10px;font-weight:700;color:var(--muted);border-right:1px solid var(--line)}
.planning-month-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));overflow:auto}
.planning-month-cell{min-height:135px;padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);cursor:pointer}
.planning-month-cell:hover{background:rgba(37,99,235,.035)}
.planning-month-cell.outside{opacity:.45}
.planning-month-cell.today-cell{box-shadow:inset 0 3px 0 #2563eb}
.planning-month-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:12px}
.planning-month-date span{font-size:9px;color:#2563eb;font-weight:700}
.planning-month-task,.planning-month-leave{padding:4px 5px;border-radius:5px;margin-bottom:3px;font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planning-month-task{background:rgba(37,99,235,.08);border-left:3px solid #2563eb}
.planning-month-task.planning-conflict{border-left-color:#d97706;background:rgba(217,119,6,.10)}
.planning-month-task.planning-unavailable{border-left-color:#dc2626;background:rgba(220,38,38,.08)}
.planning-month-task small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.planning-month-leave{border-left:3px solid #16a34a;background:rgba(22,163,74,.08)}
.planning-month-leave.month-leave-pending{border-left-color:#d97706;background:rgba(217,119,6,.10)}
.planning-month-leave.month-leave-rejected{border-left-color:#dc2626;background:rgba(220,38,38,.08)}
.planning-month-more{font-size:10px;color:var(--muted);padding:3px 5px}
@media(max-width:900px){
  .planning-month-grid{grid-template-columns:repeat(7,145px)}
}

/* Beta 2.12 - availability / leave colors
   Green = available
   Red = approved leave / unavailable
   Orange = pending approval
   Purple = rejected
*/
.planning-availability-approved-unavailable{
  border-color:#dc2626;
  color:#dc2626;
  background:rgba(220,38,38,.10);
}
.planning-availability-rejected{
  border-color:#9333ea;
  color:#9333ea;
  background:rgba(147,51,234,.10);
}
.planning-month-leave-approved-unavailable{
  border-left-color:#dc2626;
  background:rgba(220,38,38,.10);
}
.planning-month-leave-approved{
  border-left-color:#16a34a;
  background:rgba(22,163,74,.08);
}
.planning-month-leave-pending{
  border-left-color:#d97706;
  background:rgba(217,119,6,.10);
}
.planning-month-leave-rejected{
  border-left-color:#9333ea;
  background:rgba(147,51,234,.10);
}
.planning-person-unavailable-band.approved-unavailable{
  background:repeating-linear-gradient(135deg,#dc2626 0,#dc2626 5px,transparent 5px,transparent 10px);
}
.planning-person-unavailable-band.pending{
  background:repeating-linear-gradient(135deg,#d97706 0,#d97706 5px,transparent 5px,transparent 10px);
}
.planning-person-unavailable-band.rejected{
  background:repeating-linear-gradient(135deg,#9333ea 0,#9333ea 5px,transparent 5px,transparent 10px);
}
.planning-person-unavailable-band.available{
  background:repeating-linear-gradient(135deg,#16a34a 0,#16a34a 5px,transparent 5px,transparent 10px);
}

.planning-legend-purple{background:#9333ea!important}

/* Beta 2.14 - definitieve verlof/beschikbaarheidskleuren
   Groen  = beschikbaar
   Rood   = goedgekeurd verlof / niet beschikbaar
   Oranje = aanvraag in behandeling
   Paars  = afgewezen
*/
.planning-month .planning-month-leave.month-leave-approved-unavailable{
  border-left:3px solid #dc2626 !important;
  background:rgba(220,38,38,.10) !important;
  color:#991b1b !important;
}
.planning-month .planning-month-leave.month-leave-pending{
  border-left:3px solid #d97706 !important;
  background:rgba(217,119,6,.10) !important;
  color:#92400e !important;
}
.planning-month .planning-month-leave.month-leave-rejected{
  border-left:3px solid #9333ea !important;
  background:rgba(147,51,234,.10) !important;
  color:#6b21a8 !important;
}
.planning-month .planning-month-leave.month-leave-approved{
  border-left:3px solid #16a34a !important;
  background:rgba(22,163,74,.08) !important;
  color:#166534 !important;
}

/* Beta 2.15 - crew/personnel UX */
.employment-badge{
  display:inline-block;
  padding:2px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  vertical-align:middle;
  white-space:nowrap;
}
.employment-badge.fixed{
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
}
.employment-badge.freelancer{
  background:rgba(147,51,234,.10);
  color:#7e22ce;
}
.planning-crew-filters{margin:10px 0}
.planning-crew-list{
  display:grid;
  gap:6px;
  max-height:320px;
  overflow:auto;
  border:1px solid var(--line);
  padding:8px;
  border-radius:8px;
}
.planning-month-task[draggable="true"]{cursor:grab}
.planning-month-task.dragging{opacity:.45}
.planning-month-cell.drag-over{
  outline:2px dashed #2563eb;
  outline-offset:-2px;
  background:rgba(37,99,235,.06);
}

/* Beta 2.16 - Project -> Crew -> Taken -> Planning */
.project-task-list{display:grid;gap:6px;margin-top:10px}
.project-task-row{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1.5fr) auto;
  gap:10px;align-items:center;padding:10px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;background:var(--panel)
}
.project-task-row:hover{background:rgba(37,99,235,.04)}
.project-task-main{min-width:0}
.project-task-crew{display:flex;flex-wrap:wrap;gap:5px}
.project-task-crew span{
  padding:4px 7px;border-radius:999px;border:1px solid var(--line);
  font-size:10px;white-space:nowrap
}
@media(max-width:900px){
  .project-task-row{grid-template-columns:1fr}
}

/* Beta 2.17 - dashboard, notifications, leave, documents and time */
.dashboard-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.dashboard-metric{min-height:100px}
.dashboard-alert{padding:10px;border-radius:8px;margin:6px 0}
.dashboard-alert.danger{background:rgba(220,38,38,.09);color:#991b1b}
.dashboard-alert.pending{background:rgba(217,119,6,.10);color:#92400e}
.dashboard-task{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.notification-list{padding:0}
.notification-row{display:flex;gap:10px;padding:13px;border-bottom:1px solid var(--line);cursor:pointer}
.notification-row:last-child{border-bottom:0}
.notification-row.unread{background:rgba(37,99,235,.05)}
.notification-icon{font-size:20px}
.availability-summary,.leave-row{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.leave-filters{display:flex;gap:8px;margin-bottom:10px}
.expiry-warning{color:#dc2626;font-weight:700}
@media(max-width:1000px){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dashboard-grid{grid-template-columns:1fr}.leave-row,.availability-summary{grid-template-columns:1fr}}

/* Beta 2.19 - compact operational navigation with configuration submenu */
.config-nav-wrap{margin-top:10px}
.config-button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  text-align:left;border:1px solid var(--line);background:var(--panel);
}
.config-button.open{background:rgba(37,99,235,.06)}
.config-chevron{font-size:12px;transition:transform .15s ease}
.config-button.open .config-chevron{transform:rotate(180deg)}
.configuration-menu{
  display:none;margin:4px 0 0 10px;padding:4px 0 4px 8px;
  border-left:1px solid var(--line);
}
.configuration-menu.open{display:block}
.configuration-menu .config-item{
  width:100%;font-size:12px;padding:8px 10px;text-align:left;
}
.configuration-menu .config-item.active{
  background:rgba(37,99,235,.10);
}

/* Beta 2.20 - explicit configuration permission and document type management under Documents */
.document-type-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.document-type-row:last-child{border-bottom:0}

/* Beta 2.21 - personnel dossier, global search and operational navigation */
.header-tools{display:flex;align-items:center;gap:10px}
.global-search{position:relative;width:min(360px,38vw)}
.global-search input{width:100%;box-sizing:border-box}
#globalSearchResults{
  display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:1000;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden
}
#globalSearchResults.open{display:block}
#globalSearchResults button{display:block;width:100%;padding:10px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer}
#globalSearchResults button:hover{background:rgba(37,99,235,.06)}
#globalSearchResults small{display:block;color:var(--muted)}
.search-empty{padding:12px;color:var(--muted)}
.person-card{cursor:pointer}
.dossier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dossier-section{margin-top:12px}
.dossier-row{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
@media(max-width:900px){.dossier-grid{grid-template-columns:1fr}.header-tools{flex:1}.global-search{width:100%}}

/* Beta 2.22 - visual dashboard redesign */
.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.dashboard-hero h1{font-size:30px;line-height:1.1;margin:5px 0 4px}
.dashboard-hero p{margin:0;color:var(--muted)}
.dashboard-date{font-size:13px;color:var(--muted);padding-bottom:5px;text-transform:capitalize}
.dashboard-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
.dash-kpi{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;min-height:92px;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.kpi-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:white;font-size:21px;font-weight:800;flex:0 0 44px}
.kpi-blue .kpi-icon{background:#3b82f6}.kpi-orange .kpi-icon{background:#f59e0b}.kpi-purple .kpi-icon{background:#7c3aed}.kpi-teal .kpi-icon{background:#0f9fa8}.kpi-red .kpi-icon{background:#ef4444}
.dash-kpi span,.dash-kpi small{display:block;color:var(--muted);font-size:11px}.dash-kpi strong{display:block;font-size:25px;line-height:1.1;margin:2px 0}.kpi-blue small{color:#15803d}.kpi-orange small{color:#d97706}.kpi-purple small{color:#7c3aed}.kpi-teal small{color:#0891b2}.kpi-red small{color:#dc2626}
.dashboard-row{display:grid;gap:14px;margin-bottom:14px}
.dashboard-row-top{grid-template-columns:1.15fr 1fr 1fr}.dashboard-row-bottom{grid-template-columns:1.25fr .8fr .9fr}
.dashboard-panel{padding:17px;overflow:hidden}
.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dash-panel-head h2{margin:0;font-size:16px}.dash-panel-head>div span{font-size:11px;color:var(--muted)}
.today-timeline{position:relative}.timeline-item{display:grid;grid-template-columns:52px 18px 1fr;align-items:center;min-height:62px}.timeline-time{font-size:12px;color:#334155}.timeline-dot{width:8px;height:8px;border-radius:50%;position:relative;z-index:2}.timeline-dot:after{content:"";position:absolute;left:3px;top:8px;height:54px;border-left:1px solid #dbe2ea}.timeline-item:last-child .timeline-dot:after{display:none}.dot-0{background:#22c55e}.dot-1{background:#3b82f6}.dot-2{background:#f59e0b}.dot-3{background:#8b5cf6}
.timeline-card{padding:9px 11px;border-radius:8px;background:#f8fafc;border:1px solid #e6ebf1}.timeline-card b,.timeline-card span{display:block}.timeline-card span{font-size:11px;color:var(--muted);margin-top:2px}
.attention-list,.project-list,.task-list{display:flex;flex-direction:column}.attention-item,.project-row,.task-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}.attention-item:last-child,.project-row:last-child,.task-row:last-child{border-bottom:0}.attention-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f1f5f9}.attention-item div{flex:1}.attention-item b,.attention-item small,.project-row b,.project-row small,.task-row b,.task-row small{display:block}.attention-item small,.project-row small,.task-row small{font-size:10px;color:var(--muted);margin-top:2px}.attention-arrow{color:#94a3b8;font-size:20px}
.project-folder{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:#eff6ff;color:#2563eb}.project-row>div{flex:1}.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:600;background:#f1f5f9;color:#475569}.status-badge.success{background:#dcfce7;color:#15803d}.status-badge.info{background:#dbeafe;color:#2563eb}
.task-row>div{flex:1}.task-date{font-size:11px;color:var(--muted);white-space:nowrap}
.hours-chart{display:flex;align-items:center;justify-content:center;gap:18px;padding:7px 0 15px}.hours-ring{width:112px;height:112px;border-radius:50%;background:conic-gradient(#3b82f6 0 var(--progress),#e2e8f0 var(--progress) 360deg);display:grid;place-items:center;position:relative}.hours-ring:after{content:"";position:absolute;inset:9px;background:var(--panel);border-radius:50%}.hours-ring>div{position:relative;z-index:1;text-align:center}.hours-ring strong,.hours-ring span{display:block}.hours-ring strong{font-size:19px}.hours-ring span{font-size:8px;color:var(--muted)}.hours-legend{font-size:10px;color:var(--muted);min-width:105px}.hours-legend div{display:grid;grid-template-columns:8px 1fr auto;gap:5px;margin:7px 0}.hours-legend i{width:7px;height:7px;border-radius:50%;background:#3b82f6;margin-top:2px}.hours-legend div:nth-child(2) i{background:#cbd5e1}.hours-legend div:nth-child(3) i{background:#ef4444}.hours-legend b{color:#334155}
.wide-secondary{width:100%;padding:9px;border:1px solid var(--line);border-radius:7px;background:transparent;cursor:pointer}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.quick-actions button{min-height:65px;border:1px solid var(--line);background:transparent;border-radius:7px;cursor:pointer;padding:7px}.quick-actions button:hover{background:#f8fafc}.quick-actions span{display:block;font-size:19px}.quick-actions small{display:block;font-size:9px;margin-top:4px}
.latest-panel{margin-bottom:20px}.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.latest-item{display:flex;gap:9px;align-items:flex-start}.latest-item b,.latest-item small{display:block}.latest-item small{font-size:10px;color:var(--muted);margin-top:3px}.latest-dot{width:8px;height:8px;border-radius:50%;background:#7c3aed;margin-top:5px;flex:0 0 8px}.latest-dot.dot-1{background:#3b82f6}.latest-dot.dot-2{background:#0f9fa8}
@media(max-width:1200px){.dashboard-kpis{grid-template-columns:repeat(3,1fr)}.dashboard-row-top,.dashboard-row-bottom{grid-template-columns:1fr 1fr}.dashboard-row-top>.dashboard-panel:first-child{grid-column:span 2}.dashboard-row-bottom>.quick-panel{grid-column:span 2}}
@media(max-width:800px){.dashboard-kpis,.dashboard-row-top,.dashboard-row-bottom{grid-template-columns:1fr}.dashboard-row-top>.dashboard-panel:first-child,.dashboard-row-bottom>.quick-panel{grid-column:auto}.dashboard-hero{align-items:flex-start;flex-direction:column}.latest-grid{grid-template-columns:1fr}.hours-chart{justify-content:flex-start}.quick-actions{grid-template-columns:repeat(3,1fr)}}

/* Beta 2.26 - clickable dashboard KPI cards and detail popups */
.dash-kpi-action{
  position:relative;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
}
.dash-kpi-action:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(15,23,42,.08)}
.dash-kpi-action:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.kpi-arrow{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:22px;color:#94a3b8;font-weight:400}
.kpi-detail-modal{max-width:720px!important}
.kpi-modal-head{margin-bottom:8px}
.kpi-modal-head h2{margin:3px 0 0;font-size:22px}
.kpi-modal-content{max-height:55vh;overflow:auto}
.kpi-modal-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 0 10px;color:var(--muted);font-size:12px}
.kpi-detail-row{
  display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)
}
.kpi-detail-row:last-child{border-bottom:0}
.kpi-detail-main{flex:1;min-width:0}
.kpi-detail-main b,.kpi-detail-main small{display:block}
.kpi-detail-main small{color:var(--muted);font-size:11px;margin-top:3px;white-space:normal}
.kpi-detail-actions{display:flex;gap:6px;flex-shrink:0}
.notification-detail{align-items:flex-start}
@media(max-width:650px){
  .kpi-detail-row{align-items:flex-start;flex-direction:column}
  .kpi-detail-actions{width:100%}
}

@media(max-width:650px){
  .modal{width:calc(100vw - 30px);max-width:500px}
}

/* Beta 2.31 - interactive dashboard panels */
.dashboard-panel-action{
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.dashboard-panel-action:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(15,23,42,.07);
  border-color:#d7dee8;
}
.dashboard-panel-action .dash-panel-head button,
.dashboard-panel-action .attention-item button,
.dashboard-panel-action .project-row button,
.dashboard-panel-action .task-row button{
  position:relative;
  z-index:3;
}
.dashboard-panel-action:focus-within{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Beta 2.32 - interactive personnel dossier */
.dossier-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.dossier-title{display:flex;align-items:center;gap:12px;margin-top:5px}.dossier-title h2{margin:0 0 3px;font-size:24px}
.person-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e0e7ff;color:#4338ca;font-weight:800;font-size:20px}
.dossier-actions{display:flex;gap:7px;flex-wrap:wrap}
.dossier-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.dossier-stat{position:relative;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px;cursor:pointer;min-height:82px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.dossier-stat:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,23,42,.08)}
.dossier-stat span,.dossier-stat small{display:block;color:var(--muted);font-size:10px}.dossier-stat strong{display:block;font-size:23px;margin:2px 0}.dossier-stat>b{position:absolute;right:11px;top:50%;font-size:20px;color:#94a3b8}
.dossier-stat.blue strong{color:#2563eb}.dossier-stat.green strong{color:#16a34a}.dossier-stat.orange strong{color:#ea580c}.dossier-stat.purple strong{color:#7c3aed}.dossier-stat.teal strong{color:#0891b2}
.dossier-info-card{min-height:140px}.dossier-section-action{cursor:pointer;transition:transform .15s,box-shadow .15s}.dossier-section-action:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(15,23,42,.06)}
.dossier-popup-tags{display:grid;gap:8px}.dossier-popup-tags>b{margin-top:5px}
@media(max-width:1000px){.dossier-stats{grid-template-columns:repeat(3,1fr)}.dossier-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.dossier-stats{grid-template-columns:repeat(2,1fr)}.dossier-actions{width:100%}}

/* Beta 2.33 - dedicated personnel dossier navigation page */
.personnel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.personnel-card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--panel);border-radius:11px;
  padding:13px;cursor:pointer;box-shadow:0 3px 12px rgba(15,23,42,.04);
}
.personnel-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,23,42,.08);border-color:#d7dee8}
.personnel-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e0e7ff;color:#4338ca;font-weight:800;flex:0 0 42px}
.personnel-card-main{flex:1;min-width:0}.personnel-card-main b,.personnel-card-main small,.personnel-card-main span{display:block}
.personnel-card-main small{font-size:10px;color:#64748b;margin-top:2px}.personnel-card-main span{font-size:10px;color:#94a3b8;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.personnel-card>strong{font-size:22px;color:#94a3b8;font-weight:400}
@media(max-width:1000px){.personnel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.personnel-grid{grid-template-columns:1fr}}

/* Beta 2.35 - personnel profile photos */
.person-avatar{overflow:hidden;background:#e0e7ff}
.person-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.photo-upload-preview{width:140px;height:140px;border-radius:50%;border:2px dashed #cbd5e1;margin:12px auto 18px;display:grid;place-items:center;overflow:hidden;color:#94a3b8;font-size:11px;text-align:center}
.photo-upload-preview img{width:100%;height:100%;object-fit:cover}

/* Beta 2.36 - personnel, reports and operational workflow additions */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid-2 textarea{grid-column:1/-1}
.report-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:15px}
.report-card{min-height:88px}
.report-bar{height:12px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:15px 0}
.report-bar span{display:block;height:100%;background:#3b82f6;border-radius:99px}
.report-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.report-line:last-child{border-bottom:0}.report-big{font-size:34px;font-weight:800;margin:12px 0}.report-big small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.search-icon{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#eef2ff}.search-icon img{width:100%;height:100%;object-fit:cover}
@media(max-width:1200px){.report-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.form-grid-2{grid-template-columns:1fr}.report-kpis{grid-template-columns:repeat(2,1fr)}}

/* Beta 2.37 - advanced planning copy */
.copy-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:9px}
.copy-options label{display:flex;align-items:center;gap:8px;font-size:12px}
.copy-preview{padding:10px 12px;background:#f8fafc;border-radius:8px;border:1px solid var(--line);margin-bottom:10px}
.copy-conflicts{margin-top:8px;max-height:180px;overflow:auto;display:grid;gap:6px}
.copy-conflicts div{padding:7px 9px;background:#fff7ed;border:1px solid #fed7aa;border-radius:7px;font-size:11px}
@media(max-width:650px){.copy-options{grid-template-columns:1fr}}

/* Beta 2.38 - live drag/drop validation */
.planning-person-status.drag-valid{outline:2px solid #22c55e;outline-offset:-2px;background:#f0fdf4!important}
.planning-person-status.drag-invalid{outline:2px solid #ef4444;outline-offset:-2px;background:#fef2f2!important}
.planning-person-status.drag-warning{outline:2px solid #f59e0b;outline-offset:-2px;background:#fffbeb!important}
.planning-person-status.drag-valid::after,
.planning-person-status.drag-invalid::after,
.planning-person-status.drag-warning::after{float:right;font-weight:800;font-size:14px}
.planning-person-status.drag-valid::after{content:"✓";color:#16a34a}
.planning-person-status.drag-invalid::after{content:"✕";color:#dc2626}
.planning-person-status.drag-warning::after{content:"!";color:#d97706}

/* Beta 2.39 - task workflow */
.task-quick-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;padding:10px;background:#f8fafc;border:1px solid var(--line);border-radius:9px}
.task-quick-status b{font-size:11px;margin-right:auto}
.task-history-box{margin-top:12px;border:1px solid var(--line);border-radius:9px;padding:10px;background:#fff}
.task-history-item{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}
.task-history-item:last-child{border-bottom:0}
.task-history-item small{grid-column:1/-1;color:#94a3b8}

/* Beta 2.40 - notifications and task collaboration */
.task-collab-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:12px}
.task-comments{max-height:210px;overflow:auto;display:grid;gap:7px;margin-bottom:8px}
.task-comment{padding:8px 10px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;font-size:11px}
.task-comment-head{display:flex;justify-content:space-between;margin-bottom:4px}.task-comment-head small{color:#94a3b8}
.task-comment-compose{display:flex;gap:6px}.task-comment-compose input{flex:1}
.task-attachments{display:grid;gap:6px;max-height:210px;overflow:auto}.task-attachment{display:flex;align-items:center;gap:7px;padding:8px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit;font-size:11px}.task-attachment small{margin-left:auto;color:#94a3b8}.task-file-btn{cursor:pointer}
.notification-prefs{display:grid;gap:9px;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:9px}.notification-prefs label{font-size:12px}
@media(max-width:800px){.task-collab-grid{grid-template-columns:1fr}}

/* Beta 2.41 - central message center */
.messages-layout{display:grid;grid-template-columns:1fr 320px;gap:14px}
.messages-list{display:grid}.message-row{display:flex;align-items:flex-start;gap:10px;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);padding:13px 4px;cursor:pointer;width:100%}.message-row:hover{background:#f8fafc}.message-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e2e8f0;font-weight:700;font-size:12px;flex:0 0 auto}.message-main{min-width:0;flex:1}.message-main>div:first-child{display:flex;justify-content:space-between;gap:10px}.message-main>div:first-child .muted{font-size:10px}.message-task{font-size:11px;font-weight:700;margin-top:4px}.message-text{font-size:12px;color:#475569;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-arrow{font-size:20px;color:#94a3b8}.message-info{align-self:start}.message-info h3{margin-top:0}
@media(max-width:850px){.messages-layout{grid-template-columns:1fr}}

/* Beta 2.42 - full chat center */
.chat-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;min-height:620px}
.chat-sidebar{padding:0;overflow:hidden}.chat-side-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat-side-head .secondary{padding:5px 9px}.chat-thread-row{width:100%;display:flex;gap:10px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer}.chat-thread-row:hover,.chat-thread-row.active{background:#f8fafc}.chat-avatar{width:38px;height:38px;border-radius:50%;background:#e2e8f0;display:grid;place-items:center;font-weight:700;flex:0 0 auto}.chat-thread-main{min-width:0;flex:1}.chat-thread-main>div{display:flex;justify-content:space-between;gap:8px}.chat-thread-main small{display:block;margin-top:4px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-unread{background:#2563eb;color:#fff;border-radius:999px;font-size:10px;line-height:18px;min-width:18px;text-align:center;padding:0 5px}.chat-window{display:flex;flex-direction:column;padding:0;overflow:hidden}.chat-empty{margin:auto;text-align:center}.chat-empty>div{font-size:40px}.chat-header{padding:15px 18px;border-bottom:1px solid var(--line)}.chat-header h3{margin:0 0 4px}.chat-header small{color:#64748b}.chat-messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px;background:#f8fafc;min-height:420px}.chat-bubble-wrap{display:flex}.chat-bubble-wrap.mine{justify-content:flex-end}.chat-bubble{max-width:72%;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}.chat-bubble-wrap.mine .chat-bubble{background:#e8f0ff}.chat-bubble b{display:block;font-size:10px;margin-bottom:3px}.chat-bubble small{display:block;color:#94a3b8;font-size:9px;margin-top:5px}.chat-compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}.chat-compose textarea{flex:1;resize:none}.chat-compose .primary{align-self:flex-end}.chat-broadcast-info{padding:10px;margin-top:8px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;font-size:12px}.modal-bg select[multiple]{height:auto;min-height:120px}.modal-bg select{width:100%}
@media(max-width:850px){.chat-layout{grid-template-columns:1fr;min-height:0}.chat-sidebar{max-height:260px}.chat-window{min-height:560px}.chat-bubble{max-width:88%}}

/* Beta 2.44 - project roles, scoped access, audit filters */
.project-role-list{display:grid;gap:8px;margin:12px 0}.project-role-card{display:flex;justify-content:space-between;align-items:center;padding:11px;border:1px solid var(--line);border-radius:10px;background:#fafcff}.project-role-card small{display:block;color:#64748b;margin:3px 0}.project-role-assigned{margin-top:16px}.project-role-assigned>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}.audit-filters{display:grid;grid-template-columns:1fr 280px auto;gap:8px;margin:12px 0 16px}.audit-filters input,.audit-filters select{width:100%}

/* Beta 2.45 - operations modules and mobile */
@media(max-width:900px){aside{width:220px}.layout{grid-template-columns:220px 1fr}.chat-layout{grid-template-columns:1fr}.audit-filters{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}}
@media(max-width:700px){body{font-size:13px}.layout{display:block}aside{position:sticky;top:0;width:100%;z-index:30;max-height:none}aside nav{display:flex;overflow-x:auto;gap:4px;padding:6px}.nav{white-space:nowrap}.userbox{display:none}main{padding:12px}.header-tools{width:100%}header{flex-wrap:wrap}.global-search{min-width:0;width:100%}.card{overflow-x:auto}.card table{min-width:680px}.modal{width:min(94vw,720px);max-height:88vh;overflow:auto}.chat-window{min-height:520px}}

/* Beta 2.46 - project workspace */
.project-head{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px}.project-head-top,.project-title-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.project-title-row{margin-top:18px}.project-title-row h1{font-size:30px;margin:4px 0}.project-status-box{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.project-status-box small{color:#64748b}.project-tabs{display:flex;gap:4px;overflow-x:auto;margin:20px -20px -18px;padding:0 20px}.project-tab{border:0;background:transparent;padding:12px 13px;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer}.project-tab.active{border-bottom-color:#2563eb;color:#2563eb;font-weight:700}.project-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}.project-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:10px}.project-kpi>span{font-size:22px}.project-kpi b{display:block;font-size:21px}.project-kpi small{display:block;color:#64748b;margin-top:2px}.project-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.project-list-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.mini-tag{display:inline-block;background:#eef2ff;border-radius:999px;padding:3px 7px;font-size:12px;margin:2px}.project-planning-grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:0}.project-planning-grid>div{padding:10px;border-bottom:1px solid var(--line)}.planning-label{font-weight:700;background:#f8fafc}.timeline{display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.timeline-dot{width:10px;height:10px;border-radius:50%;background:#2563eb;margin-top:5px}.timeline-item p{margin:5px 0}.project-head-actions{display:flex;gap:8px}
@media(max-width:1100px){.project-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.project-head-top,.project-title-row{align-items:flex-start;flex-direction:column}.project-status-box{align-items:flex-start}.project-kpis{grid-template-columns:repeat(2,1fr)}.project-grid-2{grid-template-columns:1fr}.project-planning-grid{grid-template-columns:1fr 1fr}.project-head-actions{width:100%}
}

.project-filters{display:grid;grid-template-columns:1fr 240px;gap:10px;margin-bottom:14px}.project-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.project-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:transform .12s,box-shadow .12s}.project-card:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(15,23,42,.08)}.project-card-top{display:flex;justify-content:space-between;gap:10px}.project-card h3{margin:3px 0 14px;font-size:19px}.project-card-meta{display:flex;flex-wrap:wrap;gap:7px;color:#64748b;font-size:13px}.project-card-meta span{background:#f8fafc;border:1px solid var(--line);padding:5px 8px;border-radius:8px}
@media(max-width:800px){.project-cards{grid-template-columns:1fr}.project-filters{grid-template-columns:1fr}}

/* Beta 2.47 - multi timeline project scheduling */
.timeline-info{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}.timeline-info span{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:8px 11px}.timeline-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.timeline-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.timeline-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.timeline-card h3{margin:2px 0 0;font-size:18px}.timeline-periods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.timeline-periods>div{border:1px solid var(--line);border-radius:10px;padding:11px;background:#f8fafc}.timeline-periods span,.timeline-periods b{display:block}.timeline-periods span{font-size:12px;color:#64748b;margin-bottom:5px}.timeline-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.timeline-form-grid>div{border:1px solid var(--line);border-radius:10px;padding:12px}.timeline-form-grid h3{margin-top:0;font-size:15px}.danger.ghost{background:transparent;border:0;color:#b91c1c;font-size:20px}
@media(max-width:800px){.timeline-cards,.timeline-periods,.timeline-form-grid{grid-template-columns:1fr}}

/* Beta 2.49 - project timeline / Gantt */
.planning-toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.planning-legend{display:flex;gap:16px;flex-wrap:wrap;color:#64748b;font-size:13px}.gantt-card{overflow:hidden}.gantt-scroll{overflow-x:auto;min-width:900px}.gantt-header,.gantt-row{display:grid;grid-template-columns:230px 1fr;min-width:900px}.gantt-header{border-bottom:1px solid var(--line);background:#f8fafc}.gantt-label{padding:10px 12px;border-right:1px solid var(--line);min-width:0}.header-label{font-weight:700}.gantt-track{display:grid;grid-template-columns:repeat(var(--gantt-days,45),minmax(28px,1fr));position:relative;min-height:44px;background-image:linear-gradient(to right,rgba(148,163,184,.14) 1px,transparent 1px);background-size:calc(100% / var(--gantt-days,45)) 100%}.header-track{min-height:48px}.gantt-day{font-size:10px;color:#64748b;text-align:center;padding:7px 2px;border-left:1px solid rgba(148,163,184,.14)}.gantt-row{border-bottom:1px solid var(--line)}.gantt-row.timeline-row{background:#fbfdff}.gantt-label b{display:block}.gantt-label small{display:block;color:#64748b;font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gantt-label.indent{padding-left:24px}.gantt-bar{align-self:center;margin:4px 2px;padding:5px 7px;border-radius:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;z-index:2}.gantt-bar.prep{background:#e0e7ff;border:1px solid #a5b4fc}.gantt-bar.use{background:#dcfce7;border:1px solid #86efac}.gantt-bar.task{background:#dbeafe;border:1px solid #93c5fd}.overview-timeline{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.overview-timeline:last-child{border-bottom:0}.overview-timeline small{display:block;color:#64748b;margin-top:3px}.overview-timeline>div:last-child{display:grid;gap:3px;color:#475569;font-size:13px}

/* Beta 2.50 - compact project detail layout */
.project-head{padding:14px 18px;margin-bottom:12px}
.project-head-top{margin-bottom:4px}
.project-title-row{margin-top:8px}
.project-title-row h1{margin:2px 0;font-size:28px}
.project-title-row p{margin:4px 0}
.project-tabs{margin-top:12px;margin-bottom:-14px}
.project-kpis{margin-bottom:12px}
.project-grid-2{margin-bottom:12px}
.project-grid-2 .card{min-height:0}
#projectTabContent>.card{margin-bottom:12px}
#projectTabContent{min-height:0}

.timeline-empty{border:1px dashed #cbd5e1;border-radius:10px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fbfdff}.timeline-empty p{margin:3px 0 0;color:#64748b}

/* Beta 2.51 - prevent flex auto-margin from vertically centering page content */
main{margin:0 auto}

/* Beta 2.52 - compact embedded project communication */
.project-communication-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:10px}
.project-chat-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;height:520px}
.project-chat-sidebar,.project-chat-window{padding:0;overflow:hidden;min-height:0}
.project-chat-sidebar #projectChatThreadList{overflow:auto;max-height:465px}
.project-chat-window{display:flex;flex-direction:column}
.project-chat-window .chat-messages{flex:1;min-height:0;overflow:auto}
.project-chat-window .chat-compose{flex-shrink:0}
.project-chat-window .chat-header{flex-shrink:0}
@media(max-width:850px){.project-chat-layout{grid-template-columns:1fr;height:auto}.project-chat-sidebar #projectChatThreadList{max-height:220px}.project-chat-window{min-height:480px}}

/* Beta 2.54 - one project plan period, named operational timelines */
.project-plan-period{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.project-plan-period span{display:block;font-size:11px;color:#64748b;letter-spacing:.08em}.project-plan-period b{display:block;margin-top:4px;font-size:16px}.timeline-periods.single{grid-template-columns:1fr}.timeline-periods.single>div{background:#f8fafc}.overview-plan{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.overview-plan span{font-weight:600}.project-plan-row{background:#fafbff}
@media(max-width:700px){.project-plan-period,.overview-plan{align-items:flex-start;flex-direction:column}}

/* Beta 2.55 - timeline/project times use separate date + time fields; hour-only input becomes :00 */
.timeline-form-grid input[type="text"]{font-variant-numeric:tabular-nums}

/* Beta 2.56 - production project planning */
.planning-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.planning-toolbar select,.planning-toolbar input{min-width:140px}.planning-toolbar input:disabled{opacity:.55}
.planning-conflict-banner{margin:0 0 12px;padding:10px 13px;border:1px solid #f3c27a;background:#fff8e8;border-radius:10px;color:#9a5a00}.planning-conflict-row{background:#fffaf2!important}.conflict-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#ffe5b4;color:#9a5a00;font-size:11px}.gantt-help{padding:8px 12px;border-bottom:1px solid var(--line);font-size:12px;color:#64748b}.gantt-bar{cursor:grab;user-select:none;transition:transform .12s,opacity .12s}.gantt-bar:active,.gantt-bar.dragging{cursor:grabbing;opacity:.72;transform:scaleY(.92)}.gantt-bar.gantt-conflict{outline:2px solid #e5a11a;outline-offset:-2px}.task-row .gantt-label{cursor:pointer}.task-row .gantt-track{min-height:34px}

/* Beta 2.57 - timeline page Gantt/list switch */
.timeline-list-view{overflow:hidden}.timeline-list-head,.timeline-list-row{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:16px;align-items:center;padding:12px 14px}.timeline-list-head{background:#f8fafc;border-bottom:1px solid var(--line);font-size:12px;color:#64748b}.timeline-list-row{border-bottom:1px solid var(--line)}.timeline-list-row:last-child{border-bottom:0}.timeline-list-row small{display:block;margin-top:3px;color:#64748b}.timeline-gantt-card{margin-top:0}
@media(max-width:800px){.timeline-list-head{display:none}.timeline-list-row{grid-template-columns:1fr;gap:6px}}

/* Beta 2.58 - draggable timeline Gantt bars */
.timeline-gantt-card .gantt-bar.use{cursor:grab}.timeline-gantt-card .gantt-bar.use:active,.timeline-gantt-card .gantt-bar.use.dragging{cursor:grabbing;opacity:.7;transform:scaleY(.92)}

/* Beta 2.59 - double-click timeline editing */
.timeline-edit-row{cursor:pointer}.timeline-edit-row:hover{background:#f8fafc}

/* Beta 2.60 - physical project document uploads */
.upload-rules{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#f8fafc;margin:4px 0 10px}.upload-rules b{color:#0f172a}

/* Beta 2.61 - separate project/personnel document types */
.document-type-group{margin-bottom:18px}.document-type-group h3{margin:0 0 8px;font-size:14px}.document-type-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}

/* Beta 2.64 document management */
.checkline{display:flex;align-items:center;gap:10px}.checkline input{width:auto}.document-warning{border:1px solid #f2c94c;background:#fffaf0;padding:12px 14px;margin-bottom:12px}.document-ok{border:1px solid #b8dfc5;background:#f2fbf5;padding:12px 14px;margin-bottom:12px}

/* Beta 2.65 - project operations */
.project-ops-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:16px}.ops-alert{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.ops-alert>span{font-size:16px}.ops-alert div{flex:1;display:flex;flex-direction:column}.ops-alert small,.ops-activity small{color:var(--muted)}.ops-alert.danger{background:#fff8f8}.ops-alert.warning{background:#fffdf5}.ops-empty{padding:14px 0;color:#2d7a4b}.ops-activity{display:grid;grid-template-columns:130px 1fr;gap:5px;padding:9px 0;border-bottom:1px solid var(--line)}.ops-activity small{grid-column:2}.link-button{border:0;background:none;color:var(--accent,#2563eb);cursor:pointer}.crew-click-row{cursor:pointer}.crew-click-row:hover{background:#f8fafc}
@media(max-width:900px){.project-ops-grid{grid-template-columns:1fr}}

/* Beta 2.66 - explicit timeline drag/drop target */
.gantt-track.drag-over{outline:2px dashed var(--accent,#2563eb);outline-offset:-2px;background:rgba(37,99,235,.05)}.gantt-bar.dragging{opacity:.55;cursor:grabbing}

/* Beta 2.67 - simulated Area OPS / Sync Wizard */
.demo-sync-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;margin-bottom:16px;border:1px solid #b9c8e8;background:#f5f8ff;border-radius:12px}.demo-sync-banner>div:first-child{display:flex;flex-direction:column;gap:3px}.demo-sync-banner small{color:var(--muted)}.demo-sync-actions{display:flex;gap:8px}.sync-wizard{min-width:min(820px,88vw)}.sync-stepper{display:flex;align-items:center;gap:8px;margin-bottom:22px;color:var(--muted);font-size:12px}.sync-stepper span{width:27px;height:27px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff}.sync-stepper span.active{background:var(--accent,#2563eb);color:#fff;border-color:var(--accent,#2563eb)}.sync-stepper i{height:1px;background:var(--line);flex:1}.sync-live-state{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;margin:18px 0}.sync-live-state>div{display:flex;flex-direction:column;flex:1}.sync-live-state small{color:var(--muted)}.node-dot{width:12px;height:12px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 5px #fff3d6}.sync-demo-grid,.sync-summary,.sync-final-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.sync-demo-grid>div,.sync-summary>div,.sync-final-grid>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:7px}.sync-demo-grid span{color:var(--muted)}.sync-summary>div,.sync-final-grid>div{text-align:center}.sync-summary b,.sync-final-grid b{font-size:25px}.sync-change-list{display:flex;flex-direction:column;gap:7px;max-height:440px;overflow:auto}.sync-change{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.sync-change:hover{background:#f8fafc}.sync-change.has-conflict{border-left:4px solid #f59e0b}.sync-change input{width:auto}.sync-change div{display:flex;flex-direction:column}.sync-change small{color:var(--muted)}.sync-change>span{font-size:11px;color:var(--muted)}.conflict-compare{display:grid;grid-template-columns:1fr 70px 1fr;gap:12px;align-items:center;margin:24px 0}.conflict-compare>div:not(.conflict-vs){padding:20px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px}.conflict-vs{text-align:center;font-weight:800;color:var(--muted)}.conflict-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.conflict-option{padding:15px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:10px;cursor:pointer;font-weight:600}.conflict-option:hover{border-color:var(--accent,#2563eb);transform:translateY(-1px)}.sync-success{text-align:center;font-size:46px;margin:8px 0}.sync-final-grid{grid-template-columns:repeat(3,1fr)}@media(max-width:700px){.demo-sync-banner{flex-direction:column;align-items:stretch}.sync-wizard{min-width:0}.sync-stepper b{display:none}.sync-demo-grid,.sync-summary,.sync-final-grid,.conflict-options{grid-template-columns:1fr}.conflict-compare{grid-template-columns:1fr}.conflict-vs{display:none}}

/* Beta 2.68 - sync wizard uses the width it needs */
.modal.modal-wide{
  width:min(1040px,calc(100vw - 40px));
  max-width:calc(100vw - 40px);
}
.modal.modal-wide .sync-wizard{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media(max-width:700px){
  .modal.modal-wide{width:calc(100vw - 24px);max-width:calc(100vw - 24px);padding:16px}
}

/* Beta 2.69 - Live Operations Show Dashboard demo */
.live-show-shell{min-height:calc(100vh - 28px);display:flex;flex-direction:column;gap:14px;padding:10px 4px 20px}
.live-show-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:14px 18px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:14px}
.live-show-top h1{margin:2px 0 0;font-size:28px}.live-show-project{color:var(--muted);font-size:13px}
.live-show-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.local-badge{background:#e8f8ee;color:#087a3d;padding:9px 12px;border-radius:999px;font-weight:700;font-size:12px}
.live-show-toolbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:12px}
.live-show-toolbar label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}.live-show-toolbar select{min-width:150px}
.live-clock{margin-left:auto;color:var(--muted);font-size:12px}.live-alert-strip{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #f0d69a;background:#fffaf0;border-radius:10px}.live-alert-strip span:nth-child(3){color:#775f22;flex:1}.live-alert-strip button{border:0;background:none;text-decoration:underline;cursor:pointer;font-weight:700}
.live-widget-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px;align-items:stretch}
.live-widget{position:relative;padding:15px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:13px;min-width:0;cursor:grab;box-shadow:0 1px 2px rgba(15,23,42,.03);transition:transform .12s,box-shadow .12s}.live-widget:hover{box-shadow:0 5px 18px rgba(15,23,42,.08)}.live-widget.dragging{opacity:.45;transform:scale(.98)}
.live-widget-large{grid-column:span 2;grid-row:span 2}.live-widget-medium{grid-column:span 2}.live-widget-small{grid-column:span 1}
.live-widget-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.live-widget-head>div{display:flex;align-items:center;gap:8px}.live-widget-icon{font-size:19px}.live-source{font-size:9px;font-weight:800;letter-spacing:.08em;color:#087a3d;background:#e8f8ee;padding:4px 7px;border-radius:999px}
.live-widget-main{margin-top:16px}.live-value{font-size:30px;font-weight:800;line-height:1}.live-sub{margin-top:5px;color:var(--muted);font-size:12px}.live-widget-status{position:absolute;right:14px;top:65px;font-size:11px;font-weight:700}.live-widget-status.warning{color:#a05a00}.live-widget-rows{margin-top:16px;display:flex;flex-direction:column;gap:6px}.live-widget-rows>div{display:flex;justify-content:space-between;gap:10px;font-size:12px;border-top:1px solid #eef1f5;padding-top:6px}.live-widget-rows b{font-size:11px}.live-show-footer{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:8px 4px}
.live-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:62vh;overflow:auto}.live-library-item{display:flex;align-items:center;gap:12px;text-align:left;padding:13px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:10px;cursor:pointer}.live-library-item:hover{border-color:#2563eb;background:#f8fbff}.live-library-item>span{font-size:24px}.live-library-item div{display:flex;flex-direction:column;gap:3px}.live-library-item small{color:var(--muted);line-height:1.3}
@media(max-width:1050px){.live-widget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-widget-large,.live-widget-medium{grid-column:span 2}.live-show-toolbar{flex-wrap:wrap}.live-clock{margin-left:0}}
@media(max-width:700px){.live-show-top{flex-direction:column}.live-show-top-actions{width:100%}.live-widget-grid{grid-template-columns:1fr}.live-widget-large,.live-widget-medium,.live-widget-small{grid-column:span 1}.live-show-footer{flex-direction:column;gap:5px}.live-library{grid-template-columns:1fr}}

/* Beta 2.70 - explicit Live Operations launch */
.live-show-launch{font-weight:700}

/* Beta 2.71 - Central OPS Live Dashboard Builder */
.dashboard-page{display:flex;flex-direction:column;gap:16px}.dashboard-config-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px}.dashboard-list{padding:0;overflow:hidden}.dashboard-list-head{display:flex;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line)}.dashboard-list-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:13px 15px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer}.dashboard-list-item:hover,.dashboard-list-item.active{background:#f5f8ff}.dashboard-list-item>span{font-size:20px}.dashboard-list-item div{display:flex;flex-direction:column;gap:3px}.dashboard-list-item small{color:var(--muted)}.dashboard-editor{min-width:0}.dashboard-editor-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px}.dashboard-editor-head>div:last-child{display:flex;gap:8px}.dashboard-editor-toolbar{display:flex;align-items:end;gap:12px;padding:14px 0;flex-wrap:wrap}.dashboard-editor-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700}.dashboard-editor-toolbar input,.dashboard-editor-toolbar select{min-width:150px}.dashboard-builder-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px;padding-top:4px}.dashboard-builder-grid .live-widget-large{grid-column:span 2;grid-row:span 2}.dashboard-builder-grid .live-widget-medium{grid-column:span 2}.dashboard-builder-grid .live-widget-small{grid-column:span 1}
@media(max-width:950px){.dashboard-config-grid{grid-template-columns:1fr}.dashboard-builder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-builder-grid .live-widget-large,.dashboard-builder-grid .live-widget-medium{grid-column:span 2}}
@media(max-width:600px){.dashboard-builder-grid{grid-template-columns:1fr}.dashboard-builder-grid .live-widget-large,.dashboard-builder-grid .live-widget-medium,.dashboard-builder-grid .live-widget-small{grid-column:span 1}.dashboard-editor-head{flex-direction:column}}

/* Beta 2.72 - Live widget detail / control views */
.live-detail-modal{width:min(900px,calc(100vw - 48px));max-width:900px}.live-detail-modal h2{margin-bottom:3px}.device-detail-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px;margin:18px 0;border:1px solid var(--line);border-radius:12px;background:#fafbfd}.device-detail-top>div{display:flex;align-items:center;gap:12px}.device-detail-top>div>div{display:flex;flex-direction:column;gap:3px}.device-detail-top small{color:var(--muted)}.device-icon{font-size:28px}.device-online{font-weight:800;font-size:12px}.device-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.device-kpis>div{padding:15px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:4px}.device-kpis b{font-size:22px}.device-kpis small{color:var(--muted)}.device-table{display:flex;flex-direction:column;gap:6px}.device-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:9px}.device-row>div{display:flex;flex-direction:column;gap:3px}.device-row small{color:var(--muted)}.device-row strong{font-size:12px}.device-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.danger-action{border:1px solid #e2a4a4;background:#fff6f6;color:#a52828;padding:8px 12px;border-radius:8px;cursor:pointer}.patch-detail-list{display:flex;flex-direction:column;gap:6px}.patch-detail-list>div{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}.measurement-chart{height:130px;display:flex;align-items:end;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:14px}.measurement-chart div{flex:1;background:currentColor;border-radius:4px 4px 0 0;opacity:.55}.live-widget{cursor:pointer}.live-widget.dragging{cursor:grabbing}
@media(max-width:650px){.live-detail-modal{width:calc(100vw - 24px)}.device-kpis{grid-template-columns:1fr}.device-row,.patch-detail-list>div{grid-template-columns:1fr auto}.device-row button,.patch-detail-list button{grid-column:2}.device-row strong{grid-column:2}}

/* Beta 2.73 - all Live Operations detail/config popups use content width */
.modal.modal-wide:has(.live-detail-modal),
.modal.modal-wide:has(.live-widget-picker){
  width:min(1040px,calc(100vw - 40px));
  max-width:calc(100vw - 40px);
}
.modal.modal-wide:has(.live-detail-modal) .live-detail-modal,
.modal.modal-wide:has(.live-widget-picker) .live-widget-picker{
  width:100%;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
}
@media(max-width:700px){
  .modal.modal-wide:has(.live-detail-modal),
  .modal.modal-wide:has(.live-widget-picker){
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
}

/* Beta 2.74 - dedicated Audio / Amplifier widget */
.audio-detail-modal,.audio-config-modal{width:min(980px,calc(100vw - 48px));max-width:980px}.audio-device-heading,.audio-header-row{display:flex;justify-content:space-between;align-items:center;gap:18px}.audio-device-heading>div:first-child,.audio-header-row>div:first-child{display:flex;align-items:center;gap:12px}.audio-device-heading h2,.audio-header-row h2{margin:0}.audio-device-heading small{color:var(--muted)}.audio-status{font-weight:800;font-size:12px}.audio-status.warning{color:#a05a00}.audio-fault{padding:11px 13px;border:1px solid #f0d69a;background:#fffaf0;border-radius:9px;margin:12px 0}.audio-fault.ok{border-color:#b9dfc7;background:#f1fbf4;color:#087a3d}.audio-channel-list{display:flex;flex-direction:column;gap:7px}.audio-channel-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;padding:12px;border:1px solid var(--line);background:var(--surface,#fff);border-radius:9px;text-align:left;cursor:pointer}.audio-channel-row:hover,.audio-amp-card:hover{border-color:#2563eb;background:#f8fbff}.audio-channel-row>div{display:flex;flex-direction:column;gap:3px}.audio-channel-row small{color:var(--muted)}.audio-channel-row strong{font-size:12px}.audio-channel-row>span{font-size:12px;font-weight:700}.audio-channel-info{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.audio-channel-info>div{padding:13px;border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;gap:4px}.audio-channel-info span{color:var(--muted);font-size:11px}.audio-channel-info b{font-size:13px}.audio-overview-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:13px;margin:15px 0;border:1px solid var(--line);border-radius:10px}.audio-overview-bar span{color:var(--muted);font-size:12px}.audio-amp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.audio-amp-card{border:1px solid var(--line);background:var(--surface,#fff);border-radius:11px;padding:14px;text-align:left;cursor:pointer}.audio-amp-card>div:first-child{display:flex;gap:10px;align-items:center}.audio-amp-card>div:first-child>div{display:flex;flex-direction:column;gap:3px}.audio-amp-card small{color:var(--muted)}.audio-amp-card>strong{display:block;margin:14px 0 10px;font-size:12px}.audio-mini-stats{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px;font-size:11px}.audio-config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0}.audio-config-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700}.audio-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 18px}.audio-check-grid label{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:12px}.alarm-grid input{width:90px}.audio-config-modal h3,.audio-detail-modal h3{margin-top:20px}
@media(max-width:800px){.audio-amp-grid{grid-template-columns:1fr 1fr}.audio-channel-info{grid-template-columns:1fr 1fr}.audio-config-grid{grid-template-columns:1fr}.audio-detail-modal,.audio-config-modal{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}
@media(max-width:560px){.audio-amp-grid,.audio-check-grid{grid-template-columns:1fr}.audio-channel-row{grid-template-columns:1fr auto}.audio-channel-row>span{grid-column:2}}

/* Beta 2.75 - Audio / Amp detail modal width */
.modal:has(.audio-detail-modal), .modal:has(.audio-config-modal){
  width:min(1180px,calc(100vw - 40px)) !important;
  max-width:calc(100vw - 40px) !important;
}
.modal:has(.audio-detail-modal) .audio-detail-modal,
.modal:has(.audio-config-modal) .audio-config-modal{
  width:100% !important;
  max-width:none !important;
  min-width:0;
  box-sizing:border-box;
}
.modal:has(.audio-detail-modal) .audio-amp-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:900px){
  .modal:has(.audio-detail-modal), .modal:has(.audio-config-modal){
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }
  .modal:has(.audio-detail-modal) .audio-amp-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:600px){
  .modal:has(.audio-detail-modal) .audio-amp-grid{grid-template-columns:1fr}
}

/* Beta 2.76 - dashboard "Vandaag" timeline must not inherit project timeline layout */
.dashboard-panel .today-timeline .timeline-item{
  display:grid;
  grid-template-columns:52px 18px minmax(0,1fr);
  align-items:center;
  gap:0;
  min-height:62px;
  padding:0;
  border-bottom:0;
}
.dashboard-panel .today-timeline .timeline-card{
  min-width:0;
  width:auto;
  box-sizing:border-box;
  padding:9px 11px;
}
.dashboard-panel .today-timeline .timeline-dot{
  width:8px;
  height:8px;
}
.dashboard-panel .today-timeline .timeline-time{
  width:auto;
}

/* Beta 2.77 - modular OPS package selector */
.module-selector{position:relative;z-index:50}.module-selector-button{display:flex;align-items:center;gap:7px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;white-space:nowrap}.module-selector-button strong{font-size:11px;color:#64748b;font-weight:600}.module-selector-menu{display:none;position:absolute;right:0;top:48px;width:370px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 45px rgba(15,23,42,.15);padding:10px}.module-selector-menu.open{display:block}.module-menu-head{padding:8px 10px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}.module-menu-head small{color:var(--muted);font-size:11px}.module-option{display:grid;grid-template-columns:18px 24px 1fr;align-items:center;gap:8px;padding:11px 9px;border-radius:9px;cursor:pointer}.module-option:hover{background:#f7f9fc}.module-option input{margin:0}.module-option>span{font-size:18px}.module-option div{display:flex;flex-direction:column;gap:2px}.module-option b{font-size:12px}.module-option small{font-size:10px;color:var(--muted)}.all-option{margin-bottom:4px;background:#f7faff}.module-menu-footer{border-top:1px solid var(--line);margin-top:5px;padding:10px 4px 2px;display:flex;align-items:center;justify-content:space-between;gap:8px}.module-menu-footer>span{font-size:10px;color:var(--muted)}.module-dashboard{display:flex;flex-direction:column;gap:16px}.module-dashboard-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:6px 2px}.module-dashboard-hero h1{margin:2px 0 6px}.module-dashboard-hero p{margin:0;color:var(--muted)}.active-module-pills{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.active-module-pills span{padding:8px 10px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:11px}.module-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.module-dashboard-card{padding:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px}.module-dashboard-card>div:nth-child(2) h2{margin:2px 0 4px}.module-dashboard-card>div:nth-child(2) p{margin:0;color:var(--muted);font-size:12px}.module-card-icon{font-size:30px}.module-card-status{font-size:11px;font-weight:700}.module-stat-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.module-stat-grid>div{padding:10px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:2px}.module-stat-grid small{font-size:10px;color:var(--muted)}.module-dashboard-card>button{justify-self:end}.module-info-card{padding:15px;display:flex;gap:8px;flex-direction:column}.module-placeholder{display:flex;flex-direction:column;gap:18px}.module-placeholder-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.module-placeholder-head>div{display:flex;align-items:center;gap:14px}.module-placeholder-head h1{margin:0 0 4px}.module-placeholder-head p{margin:0;color:var(--muted)}.module-placeholder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.module-placeholder-grid .card{padding:18px}.module-placeholder-grid h3{margin:8px 0 5px}.module-placeholder-grid p{font-size:12px;min-height:34px}.module-placeholder-grid button{margin-top:8px}
@media(max-width:900px){.module-dashboard-grid,.module-placeholder-grid{grid-template-columns:1fr}.module-dashboard-hero{flex-direction:column}.active-module-pills{justify-content:flex-start}.module-selector-menu{right:-80px}}
@media(max-width:650px){.module-selector-button strong{display:none}.module-selector-menu{position:fixed;right:12px;left:12px;top:70px;width:auto}.module-dashboard-card{grid-template-columns:auto 1fr}.module-dashboard-card>button{grid-column:1/-1;justify-self:start}.module-stat-grid{grid-template-columns:1fr}.module-placeholder-head{align-items:flex-start;flex-direction:column}}

/* Beta 2.78 - standalone Live Dashboards navigation */
.live-only-nav{display:flex}

.live-module-page{display:flex;flex-direction:column;gap:14px}.live-module-header{display:flex;justify-content:space-between;gap:20px}.live-module-header h1{margin:2px 0 5px}.live-module-header p{margin:0;color:var(--muted)}.live-module-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow:auto}.live-module-tabs button{border:0;background:transparent;padding:11px 13px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;font-size:12px}.live-module-tabs button.active{border-bottom-color:#2563eb;color:#155eef;font-weight:700}.live-module-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(130px,1fr));gap:12px}.live-module-hero-card{padding:18px;display:flex;justify-content:space-between;align-items:center;gap:18px}.live-module-hero-card h2{margin:3px 0 6px}.live-module-hero-card p{max-width:650px;color:var(--muted);font-size:12px}.live-module-stat-card{padding:17px;display:flex;flex-direction:column;gap:4px}.live-module-stat-card>span{font-size:22px}.live-module-stat-card b{font-size:20px}.live-module-stat-card small{color:var(--muted)}.live-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.live-quick-card{padding:17px;text-align:left;display:flex;flex-direction:column;gap:6px;cursor:pointer}.live-quick-card>span{font-size:24px}.live-quick-card small{color:var(--muted)}.live-toolbar-row{display:flex;justify-content:space-between;align-items:center}.live-dashboard-list{display:flex;flex-direction:column;gap:10px}.live-dashboard-card{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:16px}.live-dashboard-card h2{margin:2px 0 4px}.live-dashboard-card p{margin:0;color:var(--muted);font-size:12px}.live-dashboard-icon,.live-equipment-icon{font-size:30px}.live-equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.live-equipment-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:16px}.live-equipment-card h2{margin:0 0 4px}.live-equipment-card p{margin:0;color:var(--muted);font-size:11px}.live-equipment-card>span,.live-equipment-card button{grid-column:2/-1;justify-self:start;font-size:11px}.live-info-banner{padding:14px;display:flex;flex-direction:column;gap:4px}.live-info-banner span{font-size:12px;color:var(--muted)}.live-node-card{display:grid;grid-template-columns:14px 1fr auto;gap:15px;align-items:center;padding:18px}.node-status-dot{width:12px;height:12px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px #e9f8ee}.live-node-main h2{margin:2px 0 4px}.live-node-main p{margin:0 0 8px;color:var(--muted);font-size:12px}.live-node-actions{display:flex;gap:7px}.live-node-tags{display:flex;gap:6px;flex-wrap:wrap}.live-node-tags span{font-size:10px;padding:4px 7px;border-radius:999px;background:#f3f6fa;border:1px solid var(--line)}.live-node-grid,.live-config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.live-node-grid .card,.live-config-card{padding:16px}.live-node-grid p{font-size:12px;min-height:40px}.live-config-grid{grid-template-columns:repeat(2,1fr)}.live-config-card{text-align:left;display:flex;flex-direction:column;gap:6px;cursor:pointer}.live-config-card>span{font-size:25px}.live-config-card h2{margin:2px 0}.live-config-card p{margin:0;color:var(--muted);font-size:12px}.live-config-card.disabled{opacity:.6;cursor:default}@media(max-width:900px){.live-module-grid,.live-equipment-grid,.live-node-grid,.live-quick-grid,.live-config-grid{grid-template-columns:1fr}.live-module-hero-card{flex-direction:column;align-items:flex-start}}@media(max-width:600px){.live-dashboard-card,.live-node-card{grid-template-columns:42px 1fr}.live-dashboard-card button,.live-node-actions{grid-column:2}.live-module-header{flex-direction:column}}

.live-dashboard-card{border:1px solid var(--line);background:#fff;text-align:left;width:100%;font:inherit;cursor:pointer}.live-dashboard-card:hover{border-color:#93b4ee;box-shadow:0 6px 18px rgba(15,23,42,.06)}.live-dashboard-open{justify-self:end;white-space:nowrap}.live-dashboard-view-header,.live-dashboard-backbar{display:flex;justify-content:space-between;align-items:center;gap:10px}.live-dashboard-preview{padding:18px}.live-dashboard-preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:14px}.live-dashboard-preview-head h2{margin:3px 0 4px}.live-dashboard-preview-head p{margin:0;color:var(--muted);font-size:12px}.live-preview-grid{margin-top:0}.live-preview-widget{padding:18px;display:flex;flex-direction:column;gap:6px;min-height:110px}.live-preview-widget>span{font-size:25px}.live-preview-widget small{color:var(--muted)}.live-dashboard-backbar{margin-bottom:8px}
@media(max-width:650px){.live-dashboard-preview-head{flex-direction:column}.live-dashboard-view-header{align-items:flex-start;flex-direction:column}}

/* Beta 2.82 - Live Operations primary sidebar navigation */
.nav-section-label{padding:12px 12px 5px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#7f8da3;font-weight:700}
.live-only-nav{box-sizing:border-box}

/* Beta 2.83 - full Live dashboard management */
.live-dashboard-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.live-dashboard-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.live-dashboard-tags span{font-size:10px;padding:4px 7px;border-radius:999px;background:#f3f6fa;border:1px solid var(--line)}.live-editor{min-width:520px;max-width:760px;display:flex;flex-direction:column;gap:12px}.live-editor-wide{min-width:min(760px,80vw)}.live-editor label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700}.live-editor input,.live-editor select{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.editor-section{border-top:1px solid var(--line);padding-top:12px}.editor-section h3{margin:0 0 4px}.editor-section p{margin:0;color:var(--muted);font-size:11px}.editor-widget-grid{display:flex;flex-direction:column;gap:6px;margin-top:10px}.editor-widget-row{display:grid;grid-template-columns:22px 30px 1fr auto auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:grab}.editor-widget-row:active{cursor:grabbing}.drag-handle{color:#94a3b8}.widget-row-icon{font-size:19px}.editor-widget-row div{display:flex;flex-direction:column;gap:2px}.editor-widget-row small{color:var(--muted);font-size:10px}.role-checks{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}.role-checks label{display:block;font-weight:500}.permission-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;overflow:hidden}.permission-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:center;font-size:11px}.permission-row:first-child{border-top:0}.permission-row.head{background:#f6f8fb}.live-node-list{display:flex;flex-direction:column;gap:10px}.live-node-card{grid-template-columns:14px 1fr auto}.live-node-actions{justify-content:flex-end}.live-library{display:grid;grid-template-columns:1fr 1fr;gap:7px}.live-library-item{display:grid;grid-template-columns:28px 1fr;gap:8px;text-align:left;padding:10px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}.live-library-item:hover{border-color:#8fb0ea;background:#f8fbff}.live-library-item>span{font-size:20px}.live-library-item div{display:flex;flex-direction:column;gap:2px}.live-library-item small{font-size:10px;color:var(--muted)}@media(max-width:700px){.live-editor,.live-editor-wide{min-width:0;width:100%}.editor-grid,.live-library{grid-template-columns:1fr}.live-dashboard-actions{justify-content:flex-start}.permission-row{grid-template-columns:1fr}.live-dashboard-card{grid-template-columns:42px 1fr}.live-dashboard-actions{grid-column:2;justify-content:flex-start}}

/* Beta 2.84 - context-aware modal sizing */
.modal:has(.live-editor-wide),
.modal:has(.live-widget-picker),
.modal:has(.audio-detail-modal),
.modal:has(.audio-config-modal),
.modal:has(.live-dashboard-preview),
.modal:has(.sync-demo-grid),
.modal:has(.permission-table){
  width:min(900px,calc(100vw - 48px)) !important;
  max-width:900px !important;
}
.modal:has(.live-editor){
  width:min(760px,calc(100vw - 48px)) !important;
  max-width:760px !important;
}
.modal:has(.live-editor-wide){
  width:min(980px,calc(100vw - 48px)) !important;
  max-width:980px !important;
}
.modal:has(.live-widget-picker){
  width:min(760px,calc(100vw - 48px)) !important;
  max-width:760px !important;
}
.modal:has(.device-detail-top){
  width:min(1000px,calc(100vw - 48px)) !important;
  max-width:1000px !important;
}
.modal:has(.measurement-chart){
  width:min(1000px,calc(100vw - 48px)) !important;
  max-width:1000px !important;
}
.modal:has(.live-editor) .form-actions,
.modal:has(.live-widget-picker) .form-actions{
  position:sticky;
  bottom:-22px;
}
@media(max-width:700px){
  .modal:has(.live-editor),
  .modal:has(.live-widget-picker),
  .modal:has(.device-detail-top){
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }
}

/* Beta 2.85 - equipment management */
.equipment-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.equipment-summary{padding:13px;text-align:left;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;cursor:pointer}.equipment-summary span{grid-row:1/3;font-size:24px}.equipment-summary b{font-size:18px}.equipment-summary small{color:var(--muted)}.equipment-filterbar{display:grid;grid-template-columns:1fr 220px;gap:8px}.equipment-filterbar input,.equipment-filterbar select{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}.equipment-list{display:flex;flex-direction:column;gap:8px}.equipment-row{display:grid;grid-template-columns:44px minmax(0,1fr) 180px auto;gap:12px;align-items:center;padding:14px}.equipment-row-icon{font-size:28px;text-align:center}.equipment-row-main h3{margin:2px 0 3px}.equipment-row-main p{margin:0;color:var(--muted);font-size:11px}.equipment-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.equipment-tags span{font-size:9px;padding:3px 6px;border:1px solid var(--line);border-radius:999px}.equipment-row-meta{display:flex;flex-direction:column;gap:3px;font-size:10px}.equipment-row-meta small{color:var(--muted)}.equipment-row-actions{display:flex;gap:5px}.equipment-detail-modal{width:min(900px,calc(100vw - 48px));display:flex;flex-direction:column;gap:14px}.device-detail-top{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px}.equipment-big-icon{font-size:34px}.device-detail-top h2{margin:2px 0 3px}.device-detail-top p{margin:0;color:var(--muted);font-size:11px}.equipment-status{font-size:11px;font-weight:700}.equipment-status.ok{color:#087a3d}.equipment-status.warn{color:#a05a00}.device-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.device-metrics-grid>div{padding:11px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:4px}.device-metrics-grid small{color:var(--muted);font-size:9px}.device-metrics-grid b{font-size:11px}.equipment-control-panel{border-top:1px solid var(--line);padding-top:12px}.equipment-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.equipment-metric{padding:11px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:5px}.equipment-metric span{font-size:10px;color:var(--muted)}.equipment-metric b{font-size:15px}.equipment-buttons{display:flex;gap:7px;margin-top:10px}.empty-state{padding:25px;text-align:center;color:var(--muted)}.danger-action{border:1px solid #efcaca;background:#fff5f5;color:#b42318;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:11px}.danger-action:hover{background:#ffe9e9}
@media(max-width:900px){.equipment-summary-grid{grid-template-columns:repeat(2,1fr)}.equipment-row{grid-template-columns:44px 1fr}.equipment-row-meta,.equipment-row-actions{grid-column:2}.device-metrics-grid,.equipment-controls{grid-template-columns:repeat(2,1fr)}.equipment-filterbar{grid-template-columns:1fr}}
@media(max-width:600px){.equipment-summary-grid{grid-template-columns:1fr 1fr}.device-detail-top{grid-template-columns:42px 1fr}.equipment-status{grid-column:2}.device-metrics-grid,.equipment-controls{grid-template-columns:1fr}}

/* Beta 2.86 - drivers and equipment-to-widget links */
.link-capabilities{display:flex;flex-direction:column;gap:5px;padding:11px;border:1px solid var(--line);border-radius:8px;background:#f7f9fc;font-size:11px}.link-capabilities span{color:var(--muted);font-size:10px}.driver-list{display:flex;flex-direction:column;gap:8px}.driver-row{display:grid;grid-template-columns:44px 1fr 1.3fr auto;gap:12px;align-items:center;padding:13px}.driver-row h3{margin:2px 0}.driver-row p{margin:0;color:var(--muted);font-size:10px}.driver-caps{display:flex;gap:5px;flex-wrap:wrap}.driver-caps span{font-size:9px;padding:4px 6px;border-radius:999px;background:#f3f6fa;border:1px solid var(--line)}.driver-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.driver-cap-grid>div{padding:10px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:3px}.driver-cap-grid span{color:#087a3d}.driver-cap-grid small{font-size:9px;color:var(--muted)}@media(max-width:850px){.driver-row{grid-template-columns:44px 1fr}.driver-caps,.driver-row button{grid-column:2}.driver-cap-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.driver-cap-grid{grid-template-columns:1fr}}

/* Beta 2.87 - reusable driver templates */
.driver-template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.driver-template-card{padding:15px;display:flex;flex-direction:column;gap:7px}.driver-template-card h2{margin:0}.driver-template-card p{margin:0;font-size:11px}.driver-template-top{display:flex;justify-content:space-between;align-items:center}.driver-template-icon{font-size:28px}.template-status{font-size:10px}.driver-template-fields{display:flex;flex-direction:column;gap:3px;padding-top:8px;border-top:1px solid var(--line);font-size:10px}.driver-template-fields span{color:var(--muted)}.template-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.live-editor textarea{border:1px solid var(--line);border-radius:8px;padding:9px;resize:vertical;font:inherit}.live-editor textarea:focus,.live-editor input:focus,.live-editor select:focus{outline:2px solid #b9cff8;outline-offset:1px}@media(max-width:800px){.driver-template-grid{grid-template-columns:1fr}}

/* Beta 2.88 - driver template edit action */
.driver-template-card .template-actions button{position:relative;z-index:2;pointer-events:auto}

/* Beta 2.89 - restored driver protocol metadata and safe template migration */

/* Beta 2.90 - resilient page loading */
.dashboard-loading{min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px}.page-error{padding:28px}.page-error .error{margin:8px 0 16px;color:#c62828}

/* Beta 2.92 - Area Node manager and sync wizard */
.node-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.node-card{padding:15px;display:flex;flex-direction:column;gap:11px}.node-card-top{display:flex;justify-content:space-between;align-items:flex-start}.node-card-top>div{display:flex;gap:10px}.node-icon{font-size:28px}.node-card h2{margin:2px 0}.node-card p{margin:0;color:var(--muted);font-size:11px}.node-status{font-size:10px;font-weight:700;white-space:nowrap}.node-ready,.node-online{color:#087a3d}.node-sync{color:#a05a00}.node-offline{color:#b42318}.node-package{padding:10px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:3px}.node-package small{font-size:8px;color:var(--muted)}.node-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.node-stats div{padding:8px;background:#f7f9fc;border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column}.node-stats b{font-size:16px}.node-stats small{font-size:8px;color:var(--muted)}.node-sync-line{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.sync-needed{color:#a05a00}.sync-ok{color:#087a3d}.node-detail-modal{width:min(950px,calc(100vw - 48px));display:flex;flex-direction:column;gap:13px}.node-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.node-detail-grid>.card{padding:13px}.node-list-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:8px 0;border-top:1px solid var(--line)}.node-list-item small{display:block;color:var(--muted);font-size:9px}.node-list-item em{font-style:normal;font-size:8px;color:#087a3d}.node-local-data{padding:13px}.local-data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.local-data-grid span{padding:8px;border:1px solid var(--line);border-radius:7px;font-size:9px}.node-assignment{display:grid;grid-template-columns:1fr 1fr;gap:15px}.check-row{display:block;padding:7px 0;font-size:10px}.check-row input{margin-right:7px}.sync-wizard{width:min(850px,calc(100vw - 48px));display:flex;flex-direction:column;gap:13px}.sync-steps{display:flex;align-items:center;gap:7px;font-size:10px}.sync-steps span{width:25px;height:25px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.sync-steps .active{background:#2563eb;color:white;border-color:#2563eb}.sync-steps .done{background:#eaf7ef;color:#087a3d;border-color:#bfe4ca}.sync-steps i{height:1px;background:var(--line);flex:1}.sync-summary{display:flex;gap:15px;padding:12px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px}.sync-summary span{color:#a05a00}.sync-change-list,.sync-direction-grid,.sync-final-list{display:flex;flex-direction:column;gap:7px}.sync-change-row,.sync-direction-row,.sync-final-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px}.sync-change-row small{display:block;color:var(--muted);font-size:9px}.sync-change-row>strong{font-size:14px}.sync-direction-row{grid-template-columns:1fr 230px}.sync-direction-row select{height:34px;border:1px solid var(--line);border-radius:7px;padding:0 8px}.sync-final-list>div{grid-template-columns:1fr auto}.sync-final-list span{font-size:10px;color:var(--muted)}.sync-warning{padding:10px;border-radius:8px;background:#fff7ed;color:#9a5a00;font-size:10px}@media(max-width:850px){.node-grid,.node-detail-grid,.node-assignment{grid-template-columns:1fr}.local-data-grid{grid-template-columns:1fr 1fr}.node-stats{grid-template-columns:repeat(2,1fr)}.sync-direction-row{grid-template-columns:1fr}.sync-steps b{display:none}}@media(max-width:600px){.local-data-grid{grid-template-columns:1fr}.node-sync-line{flex-direction:column;gap:4px}}

.package-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.package-card{padding:15px;display:flex;flex-direction:column;gap:10px}.package-top{display:flex;justify-content:space-between}.package-top h2{margin:2px 0}.package-top p{margin:0;color:var(--muted);font-size:10px}.package-top>strong{font-size:20px}.package-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.package-stats span{padding:8px;border:1px solid var(--line);border-radius:7px;font-size:8px;color:var(--muted)}.package-stats b{display:block;font-size:15px;color:var(--text)}.package-assignment-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.package-detail-modal,.publish-wizard{width:min(850px,calc(100vw - 48px));display:flex;flex-direction:column;gap:13px}.package-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.package-detail-grid>div{padding:11px;border:1px solid var(--line);border-radius:8px}.package-detail-grid h3{margin:0 0 5px;font-size:10px}.publish-checks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.publish-checks div{padding:9px;border:1px solid var(--line);border-radius:7px;color:#087a3d}@media(max-width:800px){.package-grid,.package-assignment-grid{grid-template-columns:1fr}.package-stats{grid-template-columns:1fr 1fr}.package-detail-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.package-detail-grid,.publish-checks{grid-template-columns:1fr}}

/* Beta 2.95 - publication popup uses the required content width */
.modal.modal-wide .publish-wizard,
.modal.modal-wide .package-detail-modal,
.modal.modal-wide .node-detail-modal{
  width:100%;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
}
.modal.modal-wide .publish-wizard .publish-checks{grid-template-columns:1fr 1fr}
@media(max-width:700px){
  .modal.modal-wide .publish-wizard .publish-checks{grid-template-columns:1fr}
}

/* Beta 2.96 - publication validation/progress/result and offline simulation */
.publish-target{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.publish-target>div,.publish-result-grid>div{padding:10px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:4px}.publish-target small,.publish-result-grid small{font-size:8px;color:var(--muted)}.publish-target b,.publish-result-grid b{font-size:11px}.publish-conflict{padding:12px;border:1px solid #f2c36b;background:#fff7e8;border-radius:8px;color:#8a5600;display:flex;flex-direction:column;gap:4px}.publish-conflict span,.publish-conflict small{font-size:9px}.publish-ok{padding:11px;border:1px solid #bde3ca;background:#eefaf2;border-radius:8px;color:#087a3d;font-size:10px}.publish-progress{height:8px;background:#e8edf3;border-radius:999px;overflow:hidden}.publish-progress-bar{height:100%;width:0%;background:#2563eb;border-radius:999px;transition:width .5s ease}.publish-steps-list{display:flex;flex-direction:column;gap:7px}.publish-steps-list>div{display:grid;grid-template-columns:30px 1fr;column-gap:7px;padding:10px;border:1px solid var(--line);border-radius:8px}.publish-steps-list span{grid-row:1/3;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#f4f6f8;color:#8b95a1}.publish-steps-list b{font-size:10px}.publish-steps-list small{font-size:8px;color:var(--muted)}.publish-steps-list .running{border-color:#8ab4f8;background:#f7fbff}.publish-steps-list .running span{background:#2563eb;color:#fff}.publish-steps-list .complete{border-color:#bde3ca;background:#f4fbf6}.publish-steps-list .complete span{background:#087a3d;color:#fff}.publish-result{text-align:left}.publish-success-icon{width:52px;height:52px;border-radius:50%;background:#eaf7ef;color:#087a3d;display:grid;place-items:center;font-size:28px;font-weight:800}.publish-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.publish-note{padding:10px;background:#eef6ff;border:1px solid #bdd8f8;border-radius:8px;color:#245b91;font-size:9px}.offline-sim-card{padding:14px;border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;gap:5px}.offline-sim-card span{font-size:9px;color:var(--muted)}.offline-sim-card strong{color:#087a3d;font-size:10px}.node-simulation-actions{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.node-simulation-actions b{margin-right:auto;font-size:10px}@media(max-width:750px){.publish-target,.publish-result-grid{grid-template-columns:1fr}.node-simulation-actions{flex-wrap:wrap}}

/* Beta 2.97 - live Show Package status on dashboards */
.package-dashboard-card{padding:15px;margin-top:12px}.package-dashboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.package-dashboard-head h2{margin:3px 0}.package-dashboard-head p{margin:0;color:var(--muted);font-size:10px}.package-dashboard-list{display:flex;flex-direction:column;margin-top:12px}.package-dashboard-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.package-dashboard-icon{font-size:19px}.package-dashboard-row small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.pkg-ready{font-size:9px;color:#087a3d;font-weight:700}.pkg-warning{font-size:9px;color:#a05a00;font-weight:700}.package-dashboard-empty{display:flex;justify-content:space-between;align-items:center}.package-dashboard-empty h2{margin:3px 0}.package-dashboard-empty p{margin:0;color:var(--muted);font-size:10px}@media(max-width:700px){.package-dashboard-head,.package-dashboard-empty{flex-direction:column}.package-dashboard-row{grid-template-columns:30px 1fr}.package-dashboard-row span,.package-dashboard-row button{grid-column:2}}

/* Beta 2.98 - Show Package publication applies to actual Live Dashboards */
.live-package-active-banner{display:flex;flex-direction:column;gap:4px;padding:13px;margin-bottom:10px;border:1px solid #bde3ca;background:#f4fbf6}.live-package-active-banner b{font-size:14px}.live-package-active-banner small{font-size:9px;color:var(--muted)}.live-dashboard-tags span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Beta 2.99 - local Area Node runtime interface */
.node-runtime-body{margin:0;background:#f3f6fa;color:var(--text);min-height:100vh}.node-runtime-loading{padding:40px;text-align:center}.node-runtime-header{min-height:82px;background:#111827;color:#fff;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box}.node-runtime-header h1{margin:3px 0;font-size:23px}.node-runtime-header p{margin:0;color:#b9c2cf;font-size:11px}.node-runtime-header .eyebrow{color:#8fb5ff}.node-runtime-status{color:#fff}.node-runtime-local{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.node-runtime-local b{font-size:10px;letter-spacing:.08em}.node-runtime-local small{font-size:9px;color:#b9c2cf}.node-runtime-main{max-width:1250px;margin:0 auto;padding:22px}.node-runtime-package{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px;border:1px solid #cfe0d5;background:#f4fbf6;border-radius:12px;margin-bottom:14px}.node-runtime-package h2{margin:4px 0;font-size:17px}.node-runtime-package p{margin:0;color:var(--muted);font-size:10px}.node-runtime-package small{font-size:8px;color:#087a3d;font-weight:700}.node-runtime-package>span{font-size:10px;color:#087a3d;font-weight:700;white-space:nowrap}.node-no-package{background:#fff8ed;border-color:#ead7ad}.node-runtime-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.node-runtime-dashboard{border:1px solid var(--line);background:#fff;border-radius:12px;padding:18px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;text-align:left;gap:12px;cursor:pointer;box-shadow:0 2px 5px rgba(20,30,50,.04)}.node-runtime-dashboard:hover{border-color:#8ab4f8;transform:translateY(-1px)}.node-runtime-dashboard-icon{width:42px;height:42px;border-radius:10px;background:#edf3ff;display:grid;place-items:center;font-size:20px}.node-runtime-dashboard h2{margin:0 0 3px;font-size:14px}.node-runtime-dashboard p{margin:0;color:var(--muted);font-size:9px}.node-runtime-dashboard>span{font-size:9px;font-weight:700;color:#2563eb}.node-runtime-empty{padding:35px;border:1px dashed #c9d2dd;border-radius:12px;background:#fff;text-align:center;grid-column:1/-1}.node-runtime-empty h2{margin:0 0 6px}.node-runtime-empty p{margin:0;color:var(--muted);font-size:10px}.node-runtime-footer{border-top:1px solid #dbe1e8;padding:12px 28px;display:flex;justify-content:space-between;gap:10px;color:#718096;font-size:9px;background:#fff}.node-runtime-actions{display:flex;align-items:center;gap:10px;padding:10px 0}.node-runtime-actions .muted{font-size:9px}.node-runtime-back{border:1px solid #536174;background:#1f2937;color:#fff;padding:9px 12px;border-radius:7px;cursor:pointer}.node-live-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.node-live-toolbar span{padding:7px 10px;border:1px solid var(--line);background:#fff;border-radius:7px;font-size:9px}.node-widget-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.node-widget{padding:15px;background:#fff;border:1px solid var(--line);border-radius:11px;min-height:105px}.node-widget-top{display:flex;justify-content:space-between;font-size:10px}.node-widget-value{font-size:28px;font-weight:800;margin:15px 0 5px}.node-widget small{font-size:8px;color:var(--muted)}@media(max-width:800px){.node-runtime-grid,.node-widget-grid{grid-template-columns:1fr}.node-runtime-package,.node-runtime-header{align-items:flex-start;flex-direction:column}.node-runtime-local{align-items:flex-start}.node-runtime-footer{flex-direction:column}}

/* Beta 3.00 - Area Node local interface route */
.node-runtime-url{font-size:9px;color:#718096;margin-top:4px}.node-card .template-actions .primary{min-width:78px}.node-runtime-body button{font:inherit}

/* Beta 3.01 - node runtime data keys corrected */
.node-runtime-url{font-size:9px;color:#9aa7b8;margin-top:5px}

/* Beta 3.02 - explicit publication target selection */
.publish-target-editor{display:grid;grid-template-columns:1fr 1fr;gap:10px}.publish-target-editor label,.publish-target-editor>div{padding:10px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:5px}.publish-target-editor small{font-size:8px;color:var(--muted)}.publish-target-editor select{font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:#fff}.publish-target-editor b{font-size:11px}@media(max-width:700px){.publish-target-editor{grid-template-columns:1fr}}

/* Beta 3.03 - persistent publication target */

/* Beta 3.04 - actual local deployment snapshot */
.node-runtime-sync-state{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:12px}.node-runtime-sync-state span{font-size:9px;color:#087a3d;font-weight:800}.node-runtime-sync-state small{font-size:8px;color:var(--muted);margin-right:auto}.node-runtime-sync-state button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 8px;font-size:9px;cursor:pointer}

/* Beta 3.05 - server-backed Area Node deployment */

/* Beta 3.09 — appearance system */
:root{
  --bg:#f4f6f8; --panel:#ffffff; --panel-2:#f8fafb; --text:#17202a;
  --line:#e4e8ec; --muted:#6d7782; --accent:#1d6fe8; --sidebar:#111827;
  --sidebar-text:#cbd5e1; --sidebar-active:#1f2937;
}
html[data-theme="dark"]{
  --bg:#111418; --panel:#1b2026; --panel-2:#222830; --text:#eef2f6;
  --line:#343c46; --muted:#9aa5b1; --accent:#4d8df7; --sidebar:#0c1117;
  --sidebar-text:#c5ced8; --sidebar-active:#202b38;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] main{color:var(--text)}
html[data-theme="dark"] .card,
html[data-theme="dark"] table,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .module-selector-menu,
html[data-theme="dark"] .configuration-menu,
html[data-theme="dark"] .theme-toggle{background:var(--panel);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] th{background:var(--panel-2);color:var(--muted)}
html[data-theme="dark"] .module-selector-button{background:var(--panel);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .nav-section-label{color:#8291a2}
html[data-theme="dark"] .pill{background:#153523;color:#7ee2a6}
html[data-theme="dark"] .login{background:#0f1318}
html[data-theme="dark"] .login-card{background:var(--panel);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .modal .form-actions{background:var(--panel)}
html[data-theme="dark"] .toolbar .secondary,
html[data-theme="dark"] .form-actions .secondary{background:var(--panel);color:var(--text)}
html[data-theme="dark"] .live-show-shell,
html[data-theme="dark"] .live-global-shell{background:#111418;color:var(--text)}
html[data-theme="dark"] .node-runtime-body{background:#111418;color:var(--text)}

.theme-toggle{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  padding:8px 11px;border-radius:8px;font-size:12px;white-space:nowrap;
}
.theme-toggle:hover{border-color:var(--accent)}

.nav-section-label{
  margin:15px 8px 3px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  color:#718096;
}
.nav-section-label:first-of-type{margin-top:2px}
.config-nav-wrap{margin-top:0}
.configuration-menu{margin-left:8px;border-left:1px solid #2c3745;padding-left:6px}
.config-item{font-size:12px;padding:8px 10px}

/* Area Node / Micro Node shell — Rentman-inspired left navigation */
.node-shell{display:flex;min-height:100vh;background:var(--bg);color:var(--text)}
.node-sidebar{width:245px;flex:0 0 245px;background:var(--sidebar);color:#fff;display:flex;flex-direction:column;min-height:100vh;border-right:1px solid #202a35}
.node-brand{padding:18px 17px 16px;border-bottom:1px solid #26313d}
.node-brand-row{display:flex;align-items:center;gap:11px}
.node-brand-mark{width:36px;height:36px;border-radius:9px;background:#fff;color:#111827;display:grid;place-items:center;font-weight:900}
.node-brand b{font-size:14px}.node-brand small{display:block;color:#93a0af;font-size:10px;margin-top:2px}
.node-identity{padding:13px 17px;border-bottom:1px solid #26313d}
.node-identity small{display:block;color:#7f8d9c;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.node-identity strong{display:block;margin-top:3px;font-size:13px}
.node-status-dot{font-size:10px;color:#70e1a0;margin-top:4px}
.node-nav{padding:10px 10px;display:grid;gap:3px}
.node-nav-section{padding:13px 9px 5px;color:#718096;font-size:9px;font-weight:800;letter-spacing:.12em}
.node-nav button{border:0;background:transparent;color:#cbd5e1;text-align:left;padding:10px 11px;border-radius:7px;font:inherit;font-size:13px}
.node-nav button:hover,.node-nav button.active{background:var(--sidebar-active);color:#fff}
.node-sidebar-bottom{margin-top:auto;padding:10px;border-top:1px solid #26313d}
.node-theme-btn{width:100%;border:1px solid #303b48;background:#17202a;color:#d7dee7;border-radius:7px;padding:9px;font-size:12px}
.node-main{flex:1;min-width:0}
.node-topbar{height:64px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}
.node-topbar-title{font-weight:700;font-size:15px}.node-topbar-sub{font-size:10px;color:var(--muted);margin-top:2px}
.node-top-actions{display:flex;align-items:center;gap:9px}
.node-local-pill{font-size:11px;padding:7px 10px;border-radius:999px;background:#e7f6ed;color:#147a3c}
.node-theme-top{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;padding:7px 10px;font-size:11px}
.node-page{padding:24px;max-width:1500px;margin:0 auto}
.node-page-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.node-page-header h1{font-size:27px;margin:3px 0}
.node-page-header p{margin:0;color:var(--muted);font-size:12px}
.node-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.node-info-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px}
.node-info-card small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.node-info-card strong{display:block;font-size:24px;margin-top:5px}
.node-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.node-table th,.node-table td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}
.node-table th{background:var(--panel-2);color:var(--muted)}
.node-dashboard-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.node-dashboard-card{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:15px;text-align:left;color:var(--text);cursor:pointer}
.node-dashboard-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.node-dashboard-card h2{font-size:16px;margin:7px 0 4px}.node-dashboard-card p{font-size:11px;color:var(--muted);margin:0}
.node-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800;margin:24px 0 9px}
.node-package-banner{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px;border:1px solid #cfe0d5;background:#f4fbf6;border-radius:10px;margin-bottom:14px}
.node-package-banner h2{margin:3px 0;font-size:17px}.node-package-banner p{margin:0;color:#60706a;font-size:11px}
.node-empty{padding:40px;text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
.node-widget-grid-local{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.node-widget-local{grid-column:span 4;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px;min-height:120px}
.node-widget-local.wide{grid-column:span 6}.node-widget-local.full{grid-column:1/-1}
.node-widget-local .top{display:flex;justify-content:space-between;font-size:12px}
.node-widget-local .value{font-size:28px;font-weight:800;margin:18px 0 4px}
.node-back{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;padding:8px 11px}
@media(max-width:850px){.node-sidebar{width:205px;flex-basis:205px}.node-page{padding:16px}.node-widget-local,.node-widget-local.wide{grid-column:span 6}}
@media(max-width:650px){.node-sidebar{width:70px;flex-basis:70px}.node-brand div:not(.node-brand-mark),.node-identity,.node-nav-section,.node-nav button span.label,.node-sidebar-bottom{display:none}.node-nav button{font-size:18px;text-align:center}.node-page{padding:12px}}
html[data-theme="dark"] .node-package-banner{background:#17271d;border-color:#2f5940}
html[data-theme="dark"] .node-package-banner p{color:#a7b8ad}
html[data-theme="dark"] .node-local-pill{background:#153523;color:#7ee2a6}

/* Beta 3.10 */
.dashboard-hero-actions{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}.dashboard-edit-button{white-space:nowrap}
.dashboard-module-section{margin:0 0 14px}.dashboard-module-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin:4px 0 10px}.dashboard-module-section-head h2{margin:2px 0;font-size:17px}.dashboard-module-section-head p{margin:0;color:var(--muted);font-size:11px}.dashboard-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dashboard-module-widget{padding:16px}.dashboard-module-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.dashboard-module-head h2{margin:3px 0;font-size:16px}.dashboard-module-head p{margin:0;color:var(--muted);font-size:11px;max-width:600px}.module-widget-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.module-widget-stats>div{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:9px}.module-widget-stats b,.module-widget-stats strong{display:block}.module-widget-stats b{font-size:9px;color:var(--muted);font-weight:500}.module-widget-stats strong{font-size:13px;margin-top:3px}
.dashboard-editor-modal{max-width:760px!important}.dashboard-editor h2{margin:3px 0 5px;font-size:23px}.dashboard-editor-list{display:grid;gap:7px;margin:15px 0;max-height:55vh;overflow:auto}.dashboard-editor-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer}.dashboard-editor-item:hover{border-color:#6b8fd8}.dashboard-editor-item>input{width:18px;height:18px;accent-color:#2563eb}.dashboard-editor-main{flex:1;min-width:0}.dashboard-editor-main b,.dashboard-editor-main small,.dashboard-editor-main em{display:block}.dashboard-editor-main small{font-size:10px;color:var(--muted);margin-top:2px}.dashboard-editor-main em{font-style:normal;font-size:9px;color:#2563eb;margin-top:5px}.dashboard-editor-order{display:flex;gap:4px}.dashboard-editor-order .tiny{padding:5px 8px;min-width:31px}.module-dashboard-hero-actions{display:flex;align-items:flex-end;gap:12px;flex-direction:column}
@media(max-width:900px){.dashboard-module-grid{grid-template-columns:1fr}.dashboard-module-section-head{align-items:flex-start;flex-direction:column}}@media(max-width:650px){.dashboard-hero-actions{align-items:flex-start;flex-direction:column}.module-dashboard-hero-actions{align-items:flex-start}}
html[data-theme="dark"] .hours-ring{background:conic-gradient(#60a5fa 0 var(--progress),#3b4654 var(--progress) 360deg)}html[data-theme="dark"] .hours-legend{color:#c2cbd5}html[data-theme="dark"] .hours-legend b{color:#f3f6f9}html[data-theme="dark"] .hours-legend div:nth-child(2) i{background:#7c8794}html[data-theme="dark"] .hours-legend div:nth-child(3) i{background:#f87171}
html[data-theme="dark"] .quick-actions button{background:#1a2129;color:#eef2f6;border-color:#3a4653}html[data-theme="dark"] .quick-actions button:hover{background:#26313d;border-color:#5a6b7d}html[data-theme="dark"] .quick-actions small{color:#d2dae2}html[data-theme="dark"] .wide-secondary{background:#1a2129;color:#eef2f6;border-color:#3a4653}
html[data-theme="dark"] .timeline-time{color:#c9d2dc}html[data-theme="dark"] .timeline-card{background:#222a33;border-color:#3a4653;color:#eef2f6}html[data-theme="dark"] .timeline-dot:after{border-left-color:#46515e}html[data-theme="dark"] .attention-icon{background:#29333e}html[data-theme="dark"] .status-badge{background:#29333e;color:#d9e2eb}html[data-theme="dark"] .status-badge.success{background:#173d29;color:#8be3ad}html[data-theme="dark"] .status-badge.info{background:#173452;color:#8fc4ff}html[data-theme="dark"] .project-folder{background:#17304e;color:#82b7ff}
html[data-theme="dark"] .dashboard-module-widget{background:#1b222a}html[data-theme="dark"] .module-widget-stats>div{background:#232c35;border-color:#3b4754}html[data-theme="dark"] .dashboard-editor-item{background:#1b222a;border-color:#3b4754}html[data-theme="dark"] .dashboard-editor-item:hover{border-color:#6d93dd}html[data-theme="dark"] .dashboard-editor-main em{color:#8fb9ff}

/* Beta 3.12 — professional dashboard editor */
.dashboard-widget-canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(120px,auto);gap:14px;align-items:stretch}
.dashboard-widget-canvas>[data-dashboard-widget-id]{min-width:0;min-height:120px}
.dashboard-widget-hidden{display:none!important}
.dashboard-is-editing .dashboard-widget-canvas{padding:10px;border:1px dashed #94a3b8;border-radius:14px;background:rgba(148,163,184,.035)}
.dashboard-is-editing .dashboard-widget-canvas>[data-dashboard-widget-id]{position:relative;cursor:grab;animation:none!important;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}
.dashboard-is-editing .dashboard-widget-canvas>[data-dashboard-widget-id]:hover{box-shadow:0 0 0 2px rgba(59,130,246,.18)}
.dashboard-widget-remove{position:absolute!important;z-index:50;left:10px!important;top:10px!important;width:24px!important;height:24px!important;min-width:24px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#ef4444!important;color:#fff!important;display:grid!important;place-items:center;font-size:18px!important;line-height:24px!important;font-weight:700;box-shadow:0 2px 7px rgba(15,23,42,.3);cursor:pointer!important;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.dashboard-is-editing .dashboard-widget-canvas>[data-dashboard-widget-id]>.dashboard-widget-remove{opacity:1;pointer-events:auto}
.dashboard-widget-remove:hover{transform:scale(1.08);background:#dc2626!important}
.dashboard-widget-resize{position:absolute!important;z-index:50;right:8px!important;bottom:8px!important;width:25px!important;height:25px!important;min-width:25px!important;padding:0!important;border:1px solid rgba(100,116,139,.45)!important;border-radius:7px!important;background:var(--panel)!important;color:var(--text)!important;display:grid!important;place-items:center;font-size:15px!important;line-height:20px!important;cursor:nwse-resize!important;box-shadow:0 2px 6px rgba(15,23,42,.18)}
.dashboard-widget-resize:hover{background:var(--panel-2)!important;border-color:#3b82f6!important}
.dashboard-widget-dragging{opacity:.35;transform:scale(.985)}
.dashboard-widget-resizing{user-select:none;transition:none!important}
.dashboard-widget-drop-target{outline:2px solid #3b82f6!important;outline-offset:3px}
.dashboard-widget-placeholder{min-width:0;min-height:120px;border:2px dashed #3b82f6;border-radius:12px;background:rgba(59,130,246,.07);box-sizing:border-box}
.dashboard-widget-drag-over{background:rgba(59,130,246,.025)}
.dashboard-edit-toolbar{display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap}.dashboard-edit-toolbar .dashboard-add-widget{white-space:nowrap}
.dashboard-widget-picker{position:absolute;z-index:100;top:calc(100% + 8px);right:0;width:min(380px,calc(100vw - 32px));padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 14px 35px rgba(15,23,42,.18);display:grid;gap:4px;max-height:420px;overflow:auto}
.dashboard-widget-picker[hidden]{display:none}
.dashboard-widget-picker-item{display:flex;align-items:flex-start;gap:9px;width:100%;padding:9px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer}.dashboard-widget-picker-item:hover{background:var(--panel-2)}.dashboard-widget-picker-item>span{width:22px;flex:0 0 22px;font-size:16px}.dashboard-widget-picker-item.is-active>span{color:#16a34a}.dashboard-widget-picker-item b,.dashboard-widget-picker-item small{display:block}.dashboard-widget-picker-item small{font-size:10px;color:var(--muted);margin-top:2px}
html[data-theme="dark"] .dashboard-is-editing .dashboard-widget-canvas{background:rgba(148,163,184,.035)}
html[data-theme="dark"] .dashboard-widget-remove{background:#ef4444!important}
html[data-theme="dark"] .dashboard-widget-resize{background:#202833!important;color:#eef2f6!important;border-color:#536171!important}
html[data-theme="dark"] .dashboard-widget-placeholder{background:rgba(59,130,246,.09)}
html[data-theme="dark"] .dashboard-widget-picker{box-shadow:0 14px 35px rgba(0,0,0,.45)}
@media(max-width:1100px){.dashboard-widget-canvas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dashboard-widget-canvas{grid-template-columns:1fr}.dashboard-widget-picker{right:auto;left:0}}

/* Beta 3.13 — dashboard sizing fixes */
.dashboard-widget-canvas{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(120px,auto);align-items:stretch}
.dashboard-widget-canvas>[data-dashboard-widget-id]{box-sizing:border-box;width:auto;min-width:0;height:100%;min-height:120px}
.dashboard-widget-resize{touch-action:none;user-select:none;-webkit-user-select:none;z-index:100!important}
.dashboard-widget-resize:active{background:#dbeafe!important;color:#1d4ed8!important}
.dashboard-widget-resizing{outline:2px solid #3b82f6!important;outline-offset:2px;opacity:.96}
html[data-theme="dark"] .dashboard-widget-resize:active{background:#203a5d!important;color:#bfdbfe!important}
@media(max-width:1100px){.dashboard-widget-canvas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dashboard-widget-canvas{grid-template-columns:1fr}}

/* Beta 3.14 — real dashboard grid sizing */
.dashboard-widget-canvas{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:120px;align-items:stretch}
.dashboard-widget-canvas>[data-dashboard-widget-id]{min-width:0;min-height:0;height:100%;box-sizing:border-box}
.dashboard-widget-canvas>.dashboard-kpis{grid-column:span 3!important}
.dashboard-widget-canvas>.dashboard-widget-notifications{grid-column:span 3!important}
.dashboard-widget-canvas>.dashboard-widget-today{grid-column:span 2}
.dashboard-widget-canvas>.dashboard-widget-kpis{grid-column:span 3!important}
.dashboard-widget-resize{display:grid!important;place-items:center!important;pointer-events:auto!important;touch-action:none!important;cursor:nwse-resize!important}
.dashboard-widget-resizing{transition:none!important;outline:2px solid #3b82f6!important;outline-offset:2px}
@media(max-width:1100px){
  .dashboard-widget-canvas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-widget-canvas>.dashboard-kpis,.dashboard-widget-canvas>.dashboard-widget-notifications{grid-column:span 2!important}
  .dashboard-widget-canvas>.dashboard-widget-today{grid-column:span 2}
}
@media(max-width:700px){
  .dashboard-widget-canvas{grid-template-columns:1fr}
  .dashboard-widget-canvas>.dashboard-kpis,.dashboard-widget-canvas>.dashboard-widget-notifications,.dashboard-widget-canvas>.dashboard-widget-today{grid-column:span 1!important}
}

/* Beta 3.15 — reliable mouse/touch widget resize */
.dashboard-widget-resize{
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  right:6px!important;bottom:6px!important;z-index:9999!important;
  pointer-events:auto!important;cursor:nwse-resize!important;
  touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;
}
.dashboard-is-editing .dashboard-widget-resize{opacity:1!important;pointer-events:auto!important}
body.dashboard-resizing{cursor:nwse-resize!important}
body.dashboard-resizing *{cursor:nwse-resize!important}
.dashboard-widget-resizing{outline:2px solid #3b82f6!important;outline-offset:2px!important;transition:none!important}

/* Beta 3.16 — widget content must stay inside its resized grid cell */
.dashboard-widget-canvas>[data-dashboard-widget-id],
.dashboard-widget-canvas .dashboard-module-widget{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas .dashboard-module-head{
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
.dashboard-widget-canvas .dashboard-module-head>div{
  min-width:0!important;
  flex:1 1 180px!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas .dashboard-module-head h2,
.dashboard-widget-canvas .dashboard-module-head p{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.dashboard-widget-canvas .module-widget-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.dashboard-widget-canvas .module-widget-stats>div{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas .module-widget-stats b,
.dashboard-widget-canvas .module-widget-stats strong{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.dashboard-widget-canvas .module-widget-live,
.dashboard-widget-canvas .module-widget-material,
.dashboard-widget-canvas .module-widget-workshop,
.dashboard-widget-canvas .module-widget-billing{
  overflow:hidden!important;
}

/* Beta 3.17 — pointer resize + hard containment */
.dashboard-widget-resize{
  pointer-events:auto!important;
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  z-index:2147483647!important;
}
.dashboard-widget-canvas>[data-dashboard-widget-id]{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas .dashboard-module-widget,
.dashboard-widget-canvas .module-widget-live,
.dashboard-widget-canvas .module-widget-material,
.dashboard-widget-canvas .module-widget-workshop,
.dashboard-widget-canvas .module-widget-billing{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas .dashboard-module-head,
.dashboard-widget-canvas .module-widget-stats{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas .dashboard-module-head>*{
  min-width:0!important;
  max-width:100%!important;
}
.dashboard-widget-canvas .module-widget-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas .module-widget-stats>div{
  min-width:0!important;
  max-width:100%!important;
  width:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas .module-widget-stats b,
.dashboard-widget-canvas .module-widget-stats strong{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Beta 3.18 — active dashboard widgets must not inherit stale hidden state */
.dashboard-widget-canvas>[data-dashboard-widget-id].dashboard-widget-hidden{display:none!important}
.dashboard-widget-canvas>[data-dashboard-widget-id]:not(.dashboard-widget-hidden){display:block!important}

/* Beta 3.19 — KPI strip and module widget defaults */
.dashboard-widget-canvas > .dashboard-kpis{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  gap:14px!important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi,
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi-action{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
.dashboard-widget-canvas > .dashboard-module-widget{
  min-height:240px!important;
  overflow:hidden!important;
}
@media(max-width:900px){
  .dashboard-widget-canvas > .dashboard-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:600px){
  .dashboard-widget-canvas > .dashboard-kpis{
    grid-template-columns:1fr!important;
  }
}

/* Beta 3.20 — authoritative dashboard editor layout
   Reference layout: KPI strip + three equal content columns. */
.dashboard-widget-canvas{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:120px!important;
  grid-auto-flow:row dense!important;
  gap:12px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas>[data-dashboard-widget-id]{
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  width:auto!important;
  height:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas>.dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:auto!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
  overflow:visible!important;
}
.dashboard-widget-canvas>.dashboard-kpis > *{
  min-width:0!important;
  max-width:none!important;
}
.dashboard-widget-canvas>.dashboard-widget-today,
.dashboard-widget-canvas>.dashboard-widget-tasks,
.dashboard-widget-canvas>.dashboard-widget-attention,
.dashboard-widget-canvas>.dashboard-widget-projects,
.dashboard-widget-canvas>.dashboard-widget-quick,
.dashboard-widget-canvas>.dashboard-widget-hours,
.dashboard-widget-canvas>.dashboard-widget-live,
.dashboard-widget-canvas>.dashboard-widget-material,
.dashboard-widget-canvas>.dashboard-widget-workshop,
.dashboard-widget-canvas>.dashboard-widget-billing{
  grid-column:span 1!important;
}
.dashboard-widget-canvas .dashboard-module-widget{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas .dashboard-module-head{
  min-width:0!important;
  max-width:100%!important;
}
.dashboard-widget-canvas .module-widget-stats{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.dashboard-widget-canvas .module-widget-stats>div{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
@media(max-width:1100px){
  .dashboard-widget-canvas{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-widget-canvas>.dashboard-kpis{grid-column:1 / -1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .dashboard-widget-canvas{grid-template-columns:1fr!important}
  .dashboard-widget-canvas>.dashboard-kpis{grid-template-columns:1fr!important}
}

/* Beta 3.22 — hard state and KPI layout guard */
body:not(.dashboard-is-editing) .dashboard-edit-toolbar .dashboard-add-widget{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.dashboard-is-editing .dashboard-edit-toolbar .dashboard-add-widget{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.dashboard-widget-canvas > .dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:span 1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;
  grid-auto-flow:row!important;
  gap:12px!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi{
  grid-column:auto!important;
  grid-row:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi > div{
  min-width:0!important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi span,
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi small,
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi strong{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:1100px){
  .dashboard-widget-canvas > .dashboard-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:700px){
  .dashboard-widget-canvas > .dashboard-kpis{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
  }
}

/* Beta 3.23 — cache-busted dashboard render + normal-mode KPI guard */
.dashboard-kpis{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;
  grid-auto-flow:row!important;
  gap:14px!important;
  box-sizing:border-box!important;
}
.dashboard-kpis>.dash-kpi,
.dashboard-kpis>.dash-kpi-action{
  grid-column:auto!important;
  grid-row:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:92px!important;
  box-sizing:border-box!important;
}
body:not(.dashboard-is-editing) .dashboard-edit-toolbar .dashboard-add-widget{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}
body.dashboard-is-editing .dashboard-edit-toolbar .dashboard-add-widget{
  display:inline-flex!important;
  visibility:visible!important;
}
@media(max-width:1100px){
  .dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .dashboard-kpis{grid-template-columns:1fr!important}
}

/* Beta 3.24 — final KPI strip guard. The KPI widget is one full-width grid item;
   its five cards are always laid out horizontally on desktop. */
.dashboard-widget-canvas > .dashboard-kpis{
  grid-column:1 / -1 !important;
  grid-row:span 1 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-template-rows:1fr !important;
  grid-auto-flow:row !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  gap:14px !important;
  box-sizing:border-box !important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi,
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi-action{
  grid-column:auto !important;
  grid-row:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:92px !important;
  box-sizing:border-box !important;
}
@media (max-width:1100px){
  .dashboard-widget-canvas > .dashboard-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width:700px){
  .dashboard-widget-canvas > .dashboard-kpis{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
  }
}

/* Beta 3.25 — dashboard reference layout */
.dashboard-widget-canvas{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-rows:120px!important;
  grid-auto-flow:row!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
}
.dashboard-widget-canvas > [data-dashboard-widget-id]{
  min-width:0!important;
  max-width:none!important;
  width:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas > .dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:span 1!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  overflow:visible!important;
}
.dashboard-widget-canvas > .dashboard-widget-today{
  grid-column:1 / span 8!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-attention{
  grid-column:9 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-projects{
  grid-column:1 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-tasks{
  grid-column:5 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-hours{
  grid-column:9 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-quick{
  grid-column:1 / span 4!important;
  grid-row:span 2!important;
}
.dashboard-widget-canvas > .dashboard-widget-billing{
  grid-column:5 / span 4!important;
  grid-row:span 2!important;
}
.dashboard-widget-canvas > .dashboard-widget-workshop{
  grid-column:9 / span 4!important;
  grid-row:span 2!important;
}
.dashboard-widget-canvas > .dashboard-widget-material{
  grid-column:1 / span 6!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-live{
  grid-column:7 / span 6!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-widget-notifications{
  grid-column:1 / -1!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:1100px){
  .dashboard-widget-canvas{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .dashboard-widget-canvas > .dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dashboard-widget-canvas > .dashboard-widget-today{grid-column:1 / span 4!important}
  .dashboard-widget-canvas > .dashboard-widget-attention{grid-column:5 / span 2!important}
  .dashboard-widget-canvas > .dashboard-widget-projects,
  .dashboard-widget-canvas > .dashboard-widget-tasks,
  .dashboard-widget-canvas > .dashboard-widget-hours{grid-column:span 2!important}
  .dashboard-widget-canvas > .dashboard-widget-quick,
  .dashboard-widget-canvas > .dashboard-widget-billing,
  .dashboard-widget-canvas > .dashboard-widget-workshop{grid-column:span 2!important}
  .dashboard-widget-canvas > .dashboard-widget-material,
  .dashboard-widget-canvas > .dashboard-widget-live{grid-column:span 3!important}
}
@media(max-width:700px){
  .dashboard-widget-canvas{grid-template-columns:1fr!important}
  .dashboard-widget-canvas > [data-dashboard-widget-id]{grid-column:1 / -1!important;grid-row:span 1!important}
  .dashboard-widget-canvas > .dashboard-kpis{grid-template-columns:1fr!important}
}

/* Beta 3.26 — inline grid sizing now uses 12-column logical widths */
.dashboard-widget-canvas > [data-dashboard-widget-id]{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.dashboard-widget-canvas > .dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:span 1!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.dashboard-widget-canvas > .dashboard-kpis > .dash-kpi{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* =========================================================
   Live OPS Beta 3.27 — approved dashboard reference layout
   ========================================================= */
.dashboard-widget-canvas.dashboard-reference-layout{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-rows:120px!important;
  grid-auto-flow:row!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
  overflow:visible!important;
}

.dashboard-widget-canvas.dashboard-reference-layout > [data-dashboard-widget-id]{
  min-width:0!important;
  max-width:100%!important;
  width:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:span 1!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  overflow:visible!important;
}

.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis > .dash-kpi{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  height:100%!important;
  box-sizing:border-box!important;
}

.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-today{
  grid-column:1 / span 8!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-attention{
  grid-column:9 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-projects{
  grid-column:1 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-tasks{
  grid-column:5 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-hours{
  grid-column:9 / span 4!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-quick{
  grid-column:1 / span 4!important;
  grid-row:span 2!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-billing{
  grid-column:5 / span 4!important;
  grid-row:span 2!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-workshop{
  grid-column:9 / span 4!important;
  grid-row:span 2!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-material{
  grid-column:1 / span 6!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-live{
  grid-column:7 / span 6!important;
  grid-row:span 1!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-notifications{
  grid-column:1 / -1!important;
  grid-row:span 1!important;
}

/* Keep cards readable at the 3-column reference size. */
.dashboard-widget-canvas.dashboard-reference-layout .dashboard-widget-card,
.dashboard-widget-canvas.dashboard-reference-layout .dash-widget{
  min-width:0!important;
  box-sizing:border-box!important;
}

@media(max-width:1100px){
  .dashboard-widget-canvas.dashboard-reference-layout{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > [data-dashboard-widget-id]{
    grid-column:span 2!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-today{
    grid-column:1 / span 4!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-attention{
    grid-column:5 / span 2!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-material,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-live{
    grid-column:span 3!important;
  }
}

@media(max-width:700px){
  .dashboard-widget-canvas.dashboard-reference-layout{
    grid-template-columns:1fr!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > [data-dashboard-widget-id]{
    grid-column:1 / -1!important;
    grid-row:span 1!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   Live OPS Beta 3.28 — content-safe reference dashboard
   ========================================================= */

/* The normal dashboard has deliberate row heights instead of a
   120px auto-row. This prevents card content from being clipped. */
.dashboard-widget-canvas.dashboard-reference-layout{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-rows:145px 190px 190px 125px 76px!important;
  grid-auto-rows:unset!important;
  grid-auto-flow:row!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
  overflow:visible!important;
}

/* Every normal-mode widget gets the complete height of its row. */
.dashboard-widget-canvas.dashboard-reference-layout
  > [data-dashboard-widget-id]{
  min-width:0!important;
  max-width:100%!important;
  width:auto!important;
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  align-self:stretch!important;
  grid-row:span 1!important;
}

/* KPI strip */
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:1!important;
  width:100%!important;
  height:145px!important;
  min-width:0!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  overflow:visible!important;
}

.dashboard-widget-canvas.dashboard-reference-layout
  > .dashboard-kpis > .dash-kpi{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
}

/* Row 2 */
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-today{
  grid-column:1 / span 8!important;
  grid-row:2!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-attention{
  grid-column:9 / span 4!important;
  grid-row:2!important;
}

/* Row 3 */
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-projects{
  grid-column:1 / span 4!important;
  grid-row:3!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-tasks{
  grid-column:5 / span 4!important;
  grid-row:3!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-hours{
  grid-column:9 / span 4!important;
  grid-row:3!important;
}

/* Row 4 */
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-quick{
  grid-column:1 / span 4!important;
  grid-row:4!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-billing{
  grid-column:5 / span 4!important;
  grid-row:4!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-workshop{
  grid-column:9 / span 4!important;
  grid-row:4!important;
}

/* Row 5 */
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-material{
  grid-column:1 / span 6!important;
  grid-row:5!important;
}
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-live{
  grid-column:7 / span 6!important;
  grid-row:5!important;
}

/* Notifications */
.dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-notifications{
  grid-column:1 / -1!important;
  grid-row:6!important;
  min-height:76px!important;
}

/* Ensure internal content is allowed to shrink rather than overflow
   outside the widget. */
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-card,
.dashboard-widget-canvas.dashboard-reference-layout
  .dash-widget,
.dashboard-widget-canvas.dashboard-reference-layout
  .widget-content{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* The quick-actions grid needs enough vertical room for all three rows. */
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-quick .quick-actions-grid{
  min-height:0!important;
}

/* Hours chart and module stat blocks must stay inside their card. */
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-hours,
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-billing,
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-workshop,
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-material,
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-live{
  overflow:hidden!important;
}

/* Responsive: use the same hierarchy on smaller screens without clipping. */
@media(max-width:1100px){
  .dashboard-widget-canvas.dashboard-reference-layout{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:145px 180px 180px 180px 120px 76px!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis{
    grid-column:1 / -1!important;
    grid-row:1!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    height:145px!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-today{
    grid-column:1 / span 4!important;
    grid-row:2!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-attention{
    grid-column:5 / span 2!important;
    grid-row:2!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-projects,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-tasks,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-hours,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-quick,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-billing,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-workshop{
    grid-column:span 2!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-projects{
    grid-row:3!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-tasks{
    grid-row:3!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-hours{
    grid-row:3!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-quick,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-billing,
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-workshop{
    grid-row:4!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-material{
    grid-column:1 / span 3!important;
    grid-row:5!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-live{
    grid-column:4 / span 3!important;
    grid-row:5!important;
  }
  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-widget-notifications{
    grid-column:1 / -1!important;
    grid-row:6!important;
  }
}

@media(max-width:700px){
  .dashboard-widget-canvas.dashboard-reference-layout{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    grid-auto-rows:auto!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout
    > [data-dashboard-widget-id]{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    height:auto!important;
    min-height:150px!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout > .dashboard-kpis{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    grid-template-columns:1fr!important;
    height:auto!important;
  }

  .dashboard-widget-canvas.dashboard-reference-layout
    > .dashboard-kpis > .dash-kpi{
    min-height:110px!important;
  }
}

/* Beta 3.29 editor overrides: the reference layout is only active outside
   editor mode. In editor mode the grid is free to use saved spans. */
.dashboard-widget-canvas.dashboard-reference-layout.dashboard-editing{
  grid-auto-rows:minmax(120px,auto)!important;
  grid-template-rows:none!important;
  align-items:stretch!important;
}

.dashboard-widget-canvas.dashboard-reference-layout.dashboard-editing
  > [data-dashboard-widget-id]{
  grid-row:auto!important;
  height:auto!important;
  min-height:120px!important;
}

.dashboard-widget-canvas.dashboard-reference-layout.dashboard-editing
  > .dashboard-kpis{
  grid-column:1 / -1!important;
  grid-row:auto!important;
  height:auto!important;
}

/* A resize handle must remain on top and be large enough to grab. */
.dashboard-widget-canvas.dashboard-editing
  .widget-resize-handle,
.dashboard-widget-canvas.dashboard-editing
  [data-resize-handle]{
  position:absolute!important;
  right:7px!important;
  bottom:7px!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  z-index:100!important;
  cursor:nwse-resize!important;
  touch-action:none!important;
  opacity:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.dashboard-widget-canvas.dashboard-editing
  [data-resize-handle]::after,
.dashboard-widget-canvas.dashboard-editing
  .widget-resize-handle::after{
  content:"↘"!important;
  font-size:14px!important;
  line-height:1!important;
}

/* Hours widget: keep all information visible in its reference size. */
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-hours{
  min-height:190px!important;
}
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-hours .hours-chart,
.dashboard-widget-canvas.dashboard-reference-layout
  .dashboard-widget-hours .hours-widget-content{
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}

/* Beta 3.30: live resize is visible while the dashboard editor is open. */
.dashboard-widget-canvas.is-editing{
  overflow:visible!important;
}
.dashboard-widget-canvas.is-editing
  > [data-dashboard-widget-id].dashboard-widget-resizing{
  transition:none!important;
  will-change:grid-column,grid-row,width,height!important;
}
.dashboard-widget-canvas.is-editing
  > [data-dashboard-widget-id]{
  box-sizing:border-box!important;
}

/* Beta 3.31 drag/drop */
.dashboard-widget-canvas.dashboard-drag-active{
  user-select:none!important;
  cursor:grabbing!important;
}
.dashboard-widget-canvas .dashboard-dragging{
  transition:none!important;
  animation:none!important;
  cursor:grabbing!important;
  opacity:.94!important;
  z-index:200!important;
}
.dashboard-widget-canvas.dashboard-drag-active
  > [data-dashboard-widget-id]:not(.dashboard-dragging){
  transition:none!important;
  animation:none!important;
}
.dashboard-widget-canvas.dashboard-drag-active
  .widget-resize-handle,
.dashboard-widget-canvas.dashboard-drag-active
  [data-resize-handle]{
  cursor:nwse-resize!important;
}

/* Beta 3.32 — placeholder drag/drop */
.dashboard-widget-canvas.dashboard-drag-active{
  user-select:none!important;
  cursor:grabbing!important;
}
.dashboard-widget-canvas .dashboard-dragging{
  transition:none!important;
  animation:none!important;
  cursor:grabbing!important;
  z-index:300!important;
  will-change:transform!important;
}
.dashboard-widget-canvas .dashboard-drag-placeholder{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
  border:2px dashed currentColor!important;
  border-radius:12px!important;
  opacity:.55!important;
  pointer-events:none!important;
  background:rgba(127,127,127,.08)!important;
}
.dashboard-widget-canvas.dashboard-drag-active
  > [data-dashboard-widget-id]:not(.dashboard-dragging){
  transition:none!important;
  animation:none!important;
}

/* Beta 3.33 */
.dashboard-widget-canvas.dashboard-drag-active{
  user-select:none!important;
  cursor:grabbing!important;
}
.dashboard-widget-canvas .dashboard-dragging{
  transition:none!important;
  animation:none!important;
  cursor:grabbing!important;
  z-index:300!important;
  will-change:grid-column-start,grid-row-start!important;
}
.dashboard-widget-canvas .dashboard-drag-placeholder{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
  border:2px dashed currentColor!important;
  border-radius:12px!important;
  opacity:.5!important;
  pointer-events:none!important;
  background:rgba(127,127,127,.08)!important;
}
.dashboard-widget-canvas.dashboard-drag-active > [data-dashboard-widget-id]:not(.dashboard-dragging){
  transition:none!important;
  animation:none!important;
}

/* =========================================================
   Beta 3.34 — uniform widget remove controls
   ========================================================= */

/* All widget delete/minus controls use the same neutral gray
   circular button, independent of the widget's content. */
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-delete,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-widget,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-btn,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove-btn,
.dashboard-widget-canvas [data-dashboard-widget-id] .dashboard-widget-remove,
.dashboard-widget-canvas [data-dashboard-widget-id] [data-remove-widget] {
  position:absolute !important;
  top:7px !important;
  left:7px !important;
  right:auto !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:#66707a !important;
  color:#f4f6f8 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.35) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:22px !important;
  font-size:15px !important;
  font-weight:600 !important;
  z-index:50 !important;
  transform:none !important;
}

/* Make the minus itself visually consistent. */
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove *,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-delete *,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-widget *,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-btn *,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove-btn *,
.dashboard-widget-canvas [data-dashboard-widget-id] .dashboard-widget-remove *,
.dashboard-widget-canvas [data-dashboard-widget-id] [data-remove-widget] * {
  color:inherit !important;
  font-size:inherit !important;
  line-height:1 !important;
}

/* Keep the controls in the same place even on small/narrow widgets. */
.dashboard-widget-canvas [data-dashboard-widget-id] {
  position:relative !important;
}

/* Hover is subtle; no red warning styling. */
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove:hover,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-delete:hover,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-widget:hover,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-btn:hover,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove-btn:hover,
.dashboard-widget-canvas [data-dashboard-widget-id] .dashboard-widget-remove:hover,
.dashboard-widget-canvas [data-dashboard-widget-id] [data-remove-widget]:hover {
  background:#7b858f !important;
  border-color:rgba(255,255,255,.28) !important;
}


/* =========================================================
   Beta 3.35 — editor is geometry-identical to normal dashboard
   ========================================================= */
body.dashboard-is-editing .dashboard-widget-canvas {
  grid-auto-rows:minmax(120px,auto) !important;
  align-items:stretch !important;
}
body.dashboard-is-editing .dashboard-widget-canvas > [data-dashboard-widget-id] {
  box-sizing:border-box !important;
  min-width:0 !important;
  min-height:120px !important;
  animation:none !important;
  transform:none !important;
}

/* Uniform, compact gray minus control. */
body.dashboard-is-editing .dashboard-widget-canvas > [data-dashboard-widget-id] > .dashboard-widget-remove {
  position:absolute !important;
  left:7px !important;
  top:7px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:999 !important;
  display:flex !important;
  flex:0 0 22px !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid #78828c !important;
  border-radius:50% !important;
  background:#59636d !important;
  color:#f5f7f9 !important;
  font-size:14px !important;
  line-height:20px !important;
  font-weight:600 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.35) !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}
body.dashboard-is-editing .dashboard-widget-canvas > [data-dashboard-widget-id] > .dashboard-widget-remove:hover {
  background:#68737d !important;
  border-color:#8e98a2 !important;
  transform:none !important;
}

/* Keep the resize grip visually attached to the card without changing its size. */
body.dashboard-is-editing .dashboard-widget-canvas > [data-dashboard-widget-id] > .dashboard-widget-resize {
  box-sizing:border-box !important;
  z-index:998 !important;
}

/* Beta 3.37 — editor uses the exact same grid sizing as normal mode. */
.dashboard-widget-canvas.is-editing {
  align-items:stretch !important;
}
.dashboard-widget-canvas.is-editing > [data-dashboard-widget-id] {
  min-width:0 !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  position:relative !important;
}
.dashboard-widget-canvas.is-editing > [data-dashboard-widget-id] > * {
  max-width:100%;
}

/* =========================================================
   Beta 3.38 — one authoritative dashboard geometry
   Normal and editor mode must use the exact same grid geometry.
   ========================================================= */
.dashboard-widget-canvas{
  position:relative !important;
  grid-auto-flow:row !important;
}
body.dashboard-is-editing .dashboard-widget-canvas{
  /* Editor frame may be visible, but must not change the content geometry. */
  box-sizing:border-box !important;
}
body.dashboard-is-editing .dashboard-widget-canvas > [data-dashboard-widget-id]{
  transition:none !important;
  animation:none !important;
  transform:none !important;
}
.dashboard-widget-canvas > [data-dashboard-widget-id]{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* =========================================================
   Beta 3.39 — editor remove button position
   ========================================================= */
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-delete,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-widget,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-btn,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove-btn,
.dashboard-widget-canvas [data-dashboard-widget-id] .dashboard-widget-remove,
.dashboard-widget-canvas [data-dashboard-widget-id] [data-remove-widget] {
  top:3px !important;
  left:3px !important;
  right:auto !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  border-radius:50% !important;
}

/* Beta 3.40 — stable editor controls; no global observer */
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-delete,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-widget,
.dashboard-widget-canvas [data-dashboard-widget-id] .remove-btn,
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-remove-btn,
.dashboard-widget-canvas [data-dashboard-widget-id] .dashboard-widget-remove,
.dashboard-widget-canvas [data-dashboard-widget-id] [data-remove-widget] {
  top:3px !important;
  left:3px !important;
  right:auto !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  border-radius:50% !important;
}


/* =========================================================
   SHOWARO BRAND SYSTEM — Beta 3.41
   Centralized tokens so the entire OPS platform can use the
   Showaro identity consistently.
   ========================================================= */
:root{
  --showaro-primary:#6D5DF5;
  --showaro-primary-strong:#5847E8;
  --showaro-accent:#16C7D9;
  --showaro-accent-soft:rgba(22,199,217,.14);
  --showaro-dark:#0B0D12;
  --showaro-dark-panel:#12161D;
  --showaro-dark-card:#171C24;
  --showaro-dark-line:#2A3340;
  --showaro-light:#F5F7FA;
  --showaro-light-panel:#FFFFFF;
  --showaro-light-card:#FFFFFF;
  --showaro-light-line:#DCE2EA;
  --showaro-text:#F4F7FB;
  --showaro-muted:#8F9AAA;
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body,
body[data-theme="dark"]{
  --brand-primary:var(--showaro-primary);
  --brand-primary-strong:var(--showaro-primary-strong);
  --brand-accent:var(--showaro-accent);
}
body[data-theme="dark"]{
  --bg:var(--showaro-dark);
  --panel:var(--showaro-dark-card);
  --line:var(--showaro-dark-line);
}
body[data-theme="light"]{
  --bg:var(--showaro-light);
  --panel:var(--showaro-light-card);
  --line:var(--showaro-light-line);
  --brand-primary:var(--showaro-primary-strong);
  --brand-primary-strong:var(--showaro-primary);
  --brand-accent:#0799AA;
}

.brand{
  gap:10px !important;
}
.brand-mark,.node-brand-mark{
  background:linear-gradient(135deg,var(--showaro-primary),var(--showaro-accent)) !important;
  color:#fff !important;
  border-radius:10px !important;
  box-shadow:0 4px 14px rgba(109,93,245,.24);
  letter-spacing:-.04em;
}
.brand b,.node-brand b{
  letter-spacing:-.02em;
}
button.primary{
  background:linear-gradient(135deg,var(--showaro-primary),var(--showaro-primary-strong)) !important;
  border-color:transparent !important;
  box-shadow:0 4px 14px rgba(109,93,245,.20);
}
button.primary:hover{
  filter:brightness(1.06);
}
.nav.active{
  background:linear-gradient(90deg,rgba(109,93,245,.22),rgba(22,199,217,.08)) !important;
  border-left:2px solid var(--showaro-primary) !important;
}
.status-badge.success,.local-badge{
  border-color:rgba(22,199,217,.35) !important;
}
.live-show-shell .live-alert-strip{
  border-color:rgba(22,199,217,.35);
}

/* =========================================================
   Beta 3.42 — content-safe minimum widget heights
   ========================================================= */
.dashboard-widget-canvas [data-dashboard-widget-id]{
  box-sizing:border-box!important;
  min-width:0!important;
}

/* KPI strip */
.dashboard-widget-canvas [data-dashboard-widget-id="kpis"]{
  min-height:104px!important;
}

/* Primary content cards */
.dashboard-widget-canvas [data-dashboard-widget-id="today"],
.dashboard-widget-canvas [data-dashboard-widget-id="attention"]{
  min-height:184px!important;
}

.dashboard-widget-canvas [data-dashboard-widget-id="projects"],
.dashboard-widget-canvas [data-dashboard-widget-id="tasks"]{
  min-height:184px!important;
}

/* Hours needs room for chart, totals and the registration action. */
.dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
  min-height:214px!important;
}

/* Action/stat cards need enough room for all rows/buttons. */
.dashboard-widget-canvas [data-dashboard-widget-id="quick"],
.dashboard-widget-canvas [data-dashboard-widget-id="billing"],
.dashboard-widget-canvas [data-dashboard-widget-id="workshop"]{
  min-height:190px!important;
}

/* Wider cards contain more rows of information. */
.dashboard-widget-canvas [data-dashboard-widget-id="material"],
.dashboard-widget-canvas [data-dashboard-widget-id="live"]{
  min-height:154px!important;
}

.dashboard-widget-canvas [data-dashboard-widget-id="notifications"]{
  min-height:86px!important;
}

/* In editor mode the resize handle must respect the minimum height.
   The CSS minimum is reinforced by JS below for stored/grid sizes. */
.dashboard-widget-canvas.dashboard-editing
  [data-dashboard-widget-id],
.dashboard-widget-canvas.is-editing
  [data-dashboard-widget-id]{
  box-sizing:border-box!important;
}

/* Never clip the final content row of the cards. */
.dashboard-widget-canvas [data-dashboard-widget-id] .widget-content,
.dashboard-widget-canvas [data-dashboard-widget-id] .dashboard-widget-content{
  min-height:0!important;
  box-sizing:border-box!important;
}

/* Responsive layouts: compact screens still get safe minimums. */
@media(max-width:1100px){
  .dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
    min-height:224px!important;
  }
}
@media(max-width:700px){
  .dashboard-widget-canvas [data-dashboard-widget-id]{
    min-height:150px!important;
  }
  .dashboard-widget-canvas [data-dashboard-widget-id="kpis"]{
    min-height:104px!important;
  }
  .dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
    min-height:230px!important;
  }
}

/* =========================================================
   Beta 3.43 — final content floors for Hours + Quick Actions
   ========================================================= */
.dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
  min-height:246px!important;
  height:auto!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
  min-height:238px!important;
  height:auto!important;
}

/* Their internal content may not be clipped by an inherited fixed height. */
.dashboard-widget-canvas [data-dashboard-widget-id="hours"] .widget-content,
.dashboard-widget-canvas [data-dashboard-widget-id="hours"] .dashboard-widget-content,
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .widget-content,
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .dashboard-widget-content{
  min-height:0!important;
  overflow:visible!important;
}

/* Keep the action list fully inside the card. */
.dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
  overflow:hidden!important;
}

/* On smaller screens give these cards a little more vertical breathing room. */
@media(max-width:1100px){
  .dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
    min-height:258px!important;
  }
  .dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
    min-height:252px!important;
  }
}
@media(max-width:700px){
  .dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
    min-height:270px!important;
  }
  .dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
    min-height:260px!important;
  }
}

/* Beta 3.44 — grid-level minimums for content-heavy widgets.
   Two grid rows are required, so the widget cannot be resized to one row. */
.dashboard-widget-canvas [data-dashboard-widget-id="quick"],
.dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
  grid-row-end:span 2!important;
}

/* =========================================================
   Beta 3.45 — Quick Actions requires three complete grid rows
   ========================================================= */
.dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
  min-height:326px!important;
  grid-row-end:span 3!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .quick-actions{
  min-height:209px!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .quick-actions button{
  min-height:65px!important;
}

@media(max-width:1100px){
  .dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
    min-height:326px!important;
    grid-row-end:span 3!important;
  }
}
@media(max-width:700px){
  .dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
    min-height:326px!important;
    grid-row-end:span 3!important;
  }
}

/* =========================================================
   Beta 3.46 — Quick Actions compact 3-row minimum + deeper drag
   ========================================================= */
.dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
  min-height:326px!important;
  grid-row-end:span 3!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .quick-actions{
  min-height:209px!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .quick-actions button{
  min-height:0!important;
  height:100%!important;
}

@media(max-width:1100px){
  .dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
    min-height:326px!important;
    grid-row-end:span 3!important;
  }
}
@media(max-width:700px){
  .dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
    min-height:326px!important;
    grid-row-end:span 3!important;
  }
}

/* While editing, never clip the canvas itself. Implicit grid rows may grow
   when a widget is dragged below the existing layout. */
.dashboard-widget-canvas.is-editing,
.dashboard-is-editing .dashboard-widget-canvas{
  overflow:visible!important;
}

/* =========================================================
   Beta 3.47 — compact content-safe dashboard cards
   ========================================================= */
.dashboard-widget-canvas [data-dashboard-widget-id="quick"]{
  min-height:258px!important;
  grid-row-end:span 2!important;
  overflow:hidden!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .quick-actions{
  min-height:209px!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="quick"] .quick-actions button{
  min-height:0!important;
  height:100%!important;
}
.dashboard-widget-canvas [data-dashboard-widget-id="hours"]{
  min-height:246px!important;
  grid-row-end:span 2!important;
}

/* Beta 3.57 baseline: Quick Actions interaction is intentionally unchanged
   from the stable dashboard implementation. */

/* Beta 3.60 — Quick Actions configuration UI */
.quick-action-config{
  position:absolute!important;top:4px!important;right:7px!important;z-index:50!important;
  width:27px!important;height:27px!important;padding:0!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,.18)!important;background:#66707a!important;color:#fff!important;
  display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;
}
.quick-config-modal{
  position:fixed!important;inset:0!important;z-index:10000!important;display:flex!important;
  align-items:center!important;justify-content:center!important;padding:24px!important;
  background:rgba(5,7,10,.58)!important;backdrop-filter:blur(7px);
}
.quick-config-card{
  width:min(760px,calc(100vw - 48px))!important;max-height:min(760px,calc(100vh - 48px))!important;
  overflow:hidden!important;display:flex!important;flex-direction:column!important;
  border:1px solid var(--line,#2a3340)!important;border-radius:16px!important;
  background:var(--panel,#171c24)!important;box-shadow:0 24px 70px rgba(0,0,0,.45)!important;
}
.quick-config-header{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:18px 20px!important;border-bottom:1px solid var(--line,#2a3340)!important}
.quick-config-header strong{display:block!important;font-size:17px!important}
.quick-config-header span{display:block!important;opacity:.62!important;margin-top:3px!important}
.quick-config-close{width:32px!important;height:32px!important;padding:0!important;border-radius:50%!important}
.quick-config-content{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;padding:18px 20px!important;overflow:auto!important}
.quick-config-section-title{font-size:12px!important;text-transform:uppercase!important;letter-spacing:.05em!important;opacity:.6!important;margin-bottom:8px!important}
.quick-config-row{display:grid!important;grid-template-columns:24px 32px 1fr 28px!important;gap:8px!important;align-items:center!important;padding:8px!important;margin-bottom:6px!important;border:1px solid var(--line,#2a3340)!important;border-radius:9px!important;background:rgba(127,127,127,.05)!important}
.quick-config-drag{opacity:.5!important;cursor:grab!important}.quick-config-icon{text-align:center!important;font-size:19px!important}
.quick-config-name{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.quick-config-remove{width:26px!important;height:26px!important;padding:0!important;border-radius:50%!important;background:#66707a!important;color:#fff!important}
.quick-config-option{width:100%!important;display:grid!important;grid-template-columns:28px 1fr 24px!important;align-items:center!important;gap:8px!important;text-align:left!important;padding:9px 10px!important;margin-bottom:6px!important;border:1px solid var(--line,#2a3340)!important;border-radius:9px!important;background:rgba(127,127,127,.04)!important}
.quick-config-option>span:first-child{text-align:center!important;font-size:18px!important}.quick-config-option b{text-align:center!important;opacity:.7!important}.quick-config-option:disabled{opacity:.35!important}
@media(max-width:700px){.quick-config-content{grid-template-columns:1fr!important}}

/* Beta 3.61 — Quick Actions editor */
.dashboard-widget-quick{position:relative!important}

.quick-action-config{
  position:absolute!important;
  top:5px!important;
  right:7px!important;
  z-index:50!important;
  width:28px!important;
  height:28px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:#66707a!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.quick-action-config:hover{background:#7b8792!important}

.quick-config-modal{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:rgba(5,7,10,.60)!important;
  backdrop-filter:blur(7px)!important;
}
.quick-config-card{
  width:min(780px,calc(100vw - 48px))!important;
  max-height:min(780px,calc(100vh - 48px))!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  border:1px solid var(--line,#2a3340)!important;
  border-radius:16px!important;
  background:var(--panel,#171c24)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.48)!important;
}
.quick-config-header{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px 20px!important;
  border-bottom:1px solid var(--line,#2a3340)!important;
}
.quick-config-header strong{display:block!important;font-size:17px!important}
.quick-config-header span{display:block!important;opacity:.62!important;margin-top:3px!important}
.quick-config-close{
  flex:0 0 auto!important;
  width:32px!important;
  height:32px!important;
  padding:0!important;
  border-radius:50%!important;
}
.quick-config-content{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:18px!important;
  padding:18px 20px!important;
  overflow:auto!important;
}
.quick-config-section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:8px!important;
  font-size:13px!important;
}
.quick-config-section-head span{opacity:.55!important;font-size:12px!important}
.quick-config-row{
  display:grid!important;
  grid-template-columns:24px 32px minmax(0,1fr) 28px!important;
  gap:8px!important;
  align-items:center!important;
  padding:8px!important;
  margin-bottom:6px!important;
  border:1px solid var(--line,#2a3340)!important;
  border-radius:9px!important;
  background:rgba(127,127,127,.05)!important;
}
.quick-config-drag{opacity:.5!important;cursor:grab!important}
.quick-config-icon{text-align:center!important;font-size:19px!important}
.quick-config-name{
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.quick-config-remove{
  width:26px!important;
  height:26px!important;
  padding:0!important;
  border-radius:50%!important;
  background:#66707a!important;
  color:#fff!important;
}
.quick-config-remove:hover{background:#7b8792!important}
.quick-config-option{
  width:100%!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 24px!important;
  align-items:center!important;
  gap:8px!important;
  text-align:left!important;
  padding:9px 10px!important;
  margin-bottom:6px!important;
  border:1px solid var(--line,#2a3340)!important;
  border-radius:9px!important;
  background:rgba(127,127,127,.04)!important;
}
.quick-config-option-icon{text-align:center!important;font-size:18px!important}
.quick-config-option b{text-align:center!important;opacity:.7!important}
.quick-config-option.is-selected{opacity:.42!important}
.quick-config-option:disabled{cursor:not-allowed!important}
.quick-config-empty{opacity:.55!important;padding:12px!important}
.quick-config-footer{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 20px!important;
  border-top:1px solid var(--line,#2a3340)!important;
  font-size:12px!important;
  opacity:.9!important;
}
.quick-config-done{min-width:90px!important}
@media(max-width:700px){
  .quick-config-content{grid-template-columns:1fr!important}
}

/* Beta 3.63 — Quick Actions configuration button */
.dashboard-widget-quick{position:relative!important}
.quick-action-config{
  position:absolute!important;
  top:5px!important;
  left:7px!important;
  right:auto!important;
  z-index:100!important;
  width:28px!important;
  height:28px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:#66707a!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
}
.quick-action-config:hover{background:#7b8792!important}

/* Beta 3.64 — reliable Quick Actions config control */
.dashboard-widget-quick{position:relative!important;overflow:visible!important}
.quick-action-config{
  position:absolute!important;
  top:5px!important;
  left:7px!important;
  z-index:999!important;
  pointer-events:auto!important;
}

/* Beta 3.65 — keep widget editor control and quick-action config control separate */
.dashboard-widget-quick .quick-action-config{
  top:5px!important;
  left:38px!important;
  width:28px!important;
  height:28px!important;
  z-index:120!important;
}
.dashboard-widget-quick .quick-action-icon{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
}

/* =========================================================
   SHOWARROW — Beta 3.66 brand + Quick Actions controls
   ========================================================= */

/* The widget's own remove control remains at top-left.
   Quick Actions configuration belongs at top-right. */
.dashboard-widget-quick .quick-action-config{
  top:5px!important;
  right:7px!important;
  left:auto!important;
  width:28px!important;
  height:28px!important;
  z-index:120!important;
}

/* SHOWARROW identity: S transitions into an arrow. */
.showarrow-mark{
  position:relative!important;
  background:linear-gradient(135deg,#FF6A00 0%,#FF8A00 55%,#FFC247 100%)!important;
  color:#fff!important;
  border-radius:11px!important;
  font-weight:900!important;
  font-size:18px!important;
  letter-spacing:-1px!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 5px 18px rgba(255,106,0,.18)!important;
}
.showarrow-mark>span{
  position:absolute!important;
  right:3px!important;
  bottom:1px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  transform:rotate(-8deg)!important;
}
.brand b{
  color:#fff!important;
  letter-spacing:.02em!important;
}
.brand small{
  color:#9aa5b4!important;
}

/* SHOWARROW orange accent system. */
:root{
  --showarrow-primary:#FF6A00;
  --showarrow-primary-strong:#E85D00;
  --showarrow-accent:#FFB000;
  --showarrow-accent-soft:rgba(255,106,0,.14);
}
body,
body[data-theme="dark"]{
  --brand-primary:var(--showarrow-primary);
  --brand-primary-strong:var(--showarrow-primary-strong);
  --brand-accent:var(--showarrow-accent);
}
body[data-theme="dark"]{
  --accent:var(--showarrow-primary)!important;
}
body[data-theme="light"]{
  --accent:var(--showarrow-primary-strong)!important;
  --brand-primary:var(--showarrow-primary-strong);
  --brand-primary-strong:var(--showarrow-primary);
  --brand-accent:var(--showarrow-accent);
}

/* Primary controls and active states use the SHOWARROW accent. */
.primary,
.dashboard-edit-button,
.dashboard-add-widget{
  background:var(--showarrow-primary)!important;
}
.primary:hover,
.dashboard-edit-button:hover,
.dashboard-add-widget:hover{
  background:var(--showarrow-primary-strong)!important;
}
.nav:hover,
.nav.active{
  box-shadow:inset 2px 0 0 var(--showarrow-primary)!important;
}

/* =========================================================
   SHOWARROW — supplied official logo
   Beta 3.67
   ========================================================= */
.brand .showarrow-mark{
  width:38px!important;
  height:38px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:transparent!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
.brand .showarrow-mark img{
  display:block!important;
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
  background:transparent!important;
}
.brand .showarrow-mark::before,
.brand .showarrow-mark::after{
  content:none!important;
}
.dashboard-widget-quick .quick-action-config{
  top:5px!important;
  right:7px!important;
  left:auto!important;
}

/* =========================================================
   SHOWARROW Login — Beta 3.68
   Always dark, official supplied logo, runtime version.
   ========================================================= */
body.login-showarrow{
  min-height:100vh!important;
  margin:0!important;
  background:#0d1117!important;
  color:#eef2f6!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.login-showarrow .login-card{
  width:min(430px,calc(100vw - 32px))!important;
  background:#171d25!important;
  color:#eef2f6!important;
  border:1px solid #2e3947!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.50)!important;
  padding:30px!important;
}
.login-showarrow .login-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  margin:0 0 28px!important;
}
.login-showarrow .login-logo{
  display:block!important;
  width:170px!important;
  height:170px!important;
  object-fit:contain!important;
  background:transparent!important;
}
.login-showarrow .login-version{
  color:#9ca8b6!important;
  font-size:12px!important;
  letter-spacing:.04em!important;
}
.login-showarrow h2{
  color:#fff!important;
  margin-bottom:18px!important;
}
.login-showarrow label{color:#c7d0da!important}
.login-showarrow input{
  background:#11161d!important;
  color:#f5f7fa!important;
  border:1px solid #354150!important;
}
.login-showarrow input:focus{
  outline:none!important;
  border-color:#ff6a00!important;
  box-shadow:0 0 0 3px rgba(255,106,0,.13)!important;
}
.login-showarrow form>button{
  width:100%!important;
  margin-top:10px!important;
  background:#ff6a00!important;
  color:#fff!important;
  border:0!important;
}
.login-showarrow form>button:hover{background:#e85d00!important}
.login-showarrow .error{color:#ff7b7b!important}

/* =========================================================
   SHOWARROW Navigation — Beta 3.69
   Sidebar matches the dark login-page palette.
   ========================================================= */
:root{
  --showarrow-nav-bg:#0d1117;
  --showarrow-nav-panel:#171d25;
  --showarrow-nav-line:#2e3947;
  --showarrow-nav-text:#eef2f6;
  --showarrow-nav-muted:#9ca8b6;
}

/* Main application sidebar */
.sidebar,
.node-sidebar,
.app-sidebar,
aside.sidebar,
nav.sidebar{
  background:#0d1117!important;
  border-color:#2e3947!important;
  color:#eef2f6!important;
}

/* Sidebar header / brand area */
.sidebar .brand,
.node-sidebar .node-brand,
.app-sidebar .brand,
aside.sidebar .brand{
  background:#0d1117!important;
  border-color:#2e3947!important;
}

/* Navigation groups and links */
.sidebar a,
.sidebar button,
.node-sidebar a,
.node-sidebar button,
.app-sidebar a,
.app-sidebar button,
aside.sidebar a,
aside.sidebar button{
  color:#c7d0da!important;
}

.sidebar a:hover,
.sidebar button:hover,
.node-sidebar a:hover,
.node-sidebar button:hover,
.app-sidebar a:hover,
.app-sidebar button:hover,
aside.sidebar a:hover,
aside.sidebar button:hover{
  background:#171d25!important;
  color:#fff!important;
}

.sidebar .active,
.sidebar a.active,
.sidebar button.active,
.node-sidebar .active,
.node-sidebar a.active,
.node-sidebar button.active,
.app-sidebar .active,
.app-sidebar a.active,
.app-sidebar button.active,
aside.sidebar .active,
aside.sidebar a.active,
aside.sidebar button.active{
  background:#171d25!important;
  color:#fff!important;
  border-color:#2e3947!important;
  box-shadow:inset 2px 0 0 #ff6a00!important;
}

/* Section labels */
.sidebar .nav-section-label,
.node-sidebar .nav-section-label,
.app-sidebar .nav-section-label,
aside.sidebar .nav-section-label{
  color:#7f8c9b!important;
}

/* Sidebar bottom/configuration area */
.sidebar-bottom,
.node-sidebar-bottom,
.app-sidebar-bottom,
.sidebar .sidebar-bottom,
.node-sidebar .node-sidebar-bottom{
  background:#0d1117!important;
  border-color:#2e3947!important;
}

/* Configuration selector and logout */
.sidebar select,
.sidebar .configuration-menu,
.sidebar .node-theme-btn,
.node-sidebar .node-theme-btn{
  background:#171d25!important;
  color:#eef2f6!important;
  border-color:#2e3947!important;
}

.sidebar .logout,
.node-sidebar .logout{
  background:#171d25!important;
  color:#eef2f6!important;
  border-color:#2e3947!important;
}

/* Beta 3.70 — Project overview */
.project-list-summary{margin:0 0 14px}
.project-list-summary .project-kpi{min-height:72px}
.project-card{transition:border-color .15s ease,transform .15s ease}
.project-card:hover{border-color:rgba(255,106,0,.55)!important;transform:translateY(-1px)}


/* =========================================================
   SHOWARROW DARK MODE HARDENING — Beta 3.71
   No light-mode surface may leak into the dark interface.
   Semantic warning/success colors are kept, but converted
   to dark variants so they remain readable without white boxes.
   ========================================================= */

html[data-theme="dark"],
body[data-theme="dark"]{
  --surface-dark:#171c24;
  --surface-dark-2:#1d232c;
  --surface-dark-3:#232b35;
  --surface-dark-hover:#28313c;
  --surface-dark-input:#151a21;
  --text-dark:#eef2f6;
  --muted-dark:#9aa5b1;
  --line-dark:#343c46;
  --danger-soft-bg:#3a2024;
  --danger-soft-text:#ff9a9f;
  --warning-soft-bg:#3b2d18;
  --warning-soft-text:#ffc66d;
  --success-soft-bg:#183525;
  --success-soft-text:#8be3ad;
  --info-soft-bg:#192d47;
  --info-soft-text:#8fc4ff;
}

/* Base surfaces */
html[data-theme="dark"] body,
body[data-theme="dark"]{
  background:var(--bg)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .project-kpi,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .project-role-card,
html[data-theme="dark"] .timeline-empty,
html[data-theme="dark"] .project-plan-period,
html[data-theme="dark"] .timeline-periods>div,
html[data-theme="dark"] .timeline-periods.single>div,
html[data-theme="dark"] .overview-plan,
html[data-theme="dark"] .project-plan-row,
html[data-theme="dark"] .device-detail-top,
html[data-theme="dark"] .node-runtime-dashboard,
html[data-theme="dark"] .node-runtime-empty,
html[data-theme="dark"] .node-widget,
html[data-theme="dark"] .live-dashboard-card,
html[data-theme="dark"] .editor-widget-row,
html[data-theme="dark"] .live-library-item,
html[data-theme="dark"] .live-editor input,
html[data-theme="dark"] .live-editor select,
html[data-theme="dark"] .equipment-filterbar input,
html[data-theme="dark"] .equipment-filterbar select{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Tables, list rows and large chat surfaces */
html[data-theme="dark"] table,
html[data-theme="dark"] .message-row,
html[data-theme="dark"] .chat-thread-row,
html[data-theme="dark"] .chat-compose,
html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .chat-messages,
html[data-theme="dark"] .task-history-box{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] th,
html[data-theme="dark"] .gantt-header,
html[data-theme="dark"] .timeline-list-head{
  background:var(--surface-dark-2)!important;
  color:var(--muted)!important;
}
html[data-theme="dark"] .message-row:hover,
html[data-theme="dark"] .chat-thread-row:hover,
html[data-theme="dark"] .chat-thread-row.active,
html[data-theme="dark"] .quick-actions button:hover,
html[data-theme="dark"] .timeline-edit-row:hover,
html[data-theme="dark"] .crew-click-row:hover{
  background:var(--surface-dark-hover)!important;
}

/* Buttons, selectors and form controls */
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .module-selector-button,
html[data-theme="dark"] .module-selector-menu,
html[data-theme="dark"] .configuration-menu,
html[data-theme="dark"] .module-selector-menu .module-option,
html[data-theme="dark"] .active-module-pills span,
html[data-theme="dark"] .node-live-toolbar span,
html[data-theme="dark"] .node-runtime-sync-state,
html[data-theme="dark"] .node-runtime-sync-state button{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .publish-target-editor select{
  background:var(--surface-dark-input)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  color-scheme:dark;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#687585!important;
}

/* Project / planning surfaces */
html[data-theme="dark"] .project-head{
  background:linear-gradient(180deg,var(--surface-dark),var(--surface-dark-2))!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .project-card-meta span,
html[data-theme="dark"] .timeline-info span,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .timeline-periods>div,
html[data-theme="dark"] .planning-label,
html[data-theme="dark"] .gantt-row.timeline-row,
html[data-theme="dark"] .timeline-list-row{
  background:var(--surface-dark-2)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .planning-task,
html[data-theme="dark"] .planning-unscheduled-chip,
html[data-theme="dark"] .planning-availability-band,
html[data-theme="dark"] .planning-availability{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .planning-conflict-row{
  background:var(--warning-soft-bg)!important;
}
html[data-theme="dark"] .planning-conflict-banner{
  background:var(--warning-soft-bg)!important;
  color:var(--warning-soft-text)!important;
}
html[data-theme="dark"] .conflict-tag{
  background:#5a401c!important;
  color:#ffd38a!important;
}

/* Generic light utility blocks */
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .copy-options,
html[data-theme="dark"] .copy-preview,
html[data-theme="dark"] .task-quick-status,
html[data-theme="dark"] .task-comment,
html[data-theme="dark"] .task-attachment,
html[data-theme="dark"] .notification-prefs,
html[data-theme="dark"] .upload-rules,
html[data-theme="dark"] .equipment-metric,
html[data-theme="dark"] .link-capabilities,
html[data-theme="dark"] .driver-caps span,
html[data-theme="dark"] .node-stats div,
html[data-theme="dark"] .sync-summary,
html[data-theme="dark"] .publish-steps-list span,
html[data-theme="dark"] .publish-note{
  background:var(--surface-dark-2)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Status / semantic panels */
html[data-theme="dark"] .status-badge{
  background:var(--surface-dark-3)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .status-badge.success,
html[data-theme="dark"] .document-ok,
html[data-theme="dark"] .audio-fault.ok,
html[data-theme="dark"] .publish-ok{
  background:var(--success-soft-bg)!important;
  color:var(--success-soft-text)!important;
}
html[data-theme="dark"] .status-badge.info,
html[data-theme="dark"] .publish-note{
  background:var(--info-soft-bg)!important;
  color:var(--info-soft-text)!important;
}
html[data-theme="dark"] .status-attention,
html[data-theme="dark"] .document-warning,
html[data-theme="dark"] .audio-fault,
html[data-theme="dark"] .live-alert-strip,
html[data-theme="dark"] .sync-warning,
html[data-theme="dark"] .publish-conflict,
html[data-theme="dark"] .planning-conflict-banner{
  background:var(--warning-soft-bg)!important;
  color:var(--warning-soft-text)!important;
}
html[data-theme="dark"] .status-expired,
html[data-theme="dark"] .danger-action{
  background:var(--danger-soft-bg)!important;
  color:var(--danger-soft-text)!important;
}
html[data-theme="dark"] .ops-alert.danger{
  background:var(--danger-soft-bg)!important;
}
html[data-theme="dark"] .ops-alert.warning{
  background:var(--warning-soft-bg)!important;
}

/* Small chips / badges */
html[data-theme="dark"] .mini-tag,
html[data-theme="dark"] .live-node-tags span,
html[data-theme="dark"] .live-dashboard-tags span,
html[data-theme="dark"] .equipment-summary,
html[data-theme="dark"] .all-option{
  background:var(--surface-dark-2)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .project-folder,
html[data-theme="dark"] .attention-icon,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .message-avatar,
html[data-theme="dark"] .chat-avatar{
  background:var(--surface-dark-3)!important;
  color:var(--text)!important;
}

/* Dashboard / module editors */
html[data-theme="dark"] .dashboard-module-widget,
html[data-theme="dark"] .module-widget-stats>div,
html[data-theme="dark"] .dashboard-editor-item,
html[data-theme="dark"] .dashboard-widget-picker,
html[data-theme="dark"] .dashboard-widget-picker-item:hover{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .dashboard-widget-canvas,
html[data-theme="dark"] .dashboard-is-editing .dashboard-widget-canvas{
  background:rgba(148,163,184,.035)!important;
}
html[data-theme="dark"] .dashboard-widget-resize{
  background:#202833!important;
  color:#eef2f6!important;
}

/* Live dashboards / node runtime */
html[data-theme="dark"] .live-library-item:hover,
html[data-theme="dark"] .audio-channel-row:hover,
html[data-theme="dark"] .audio-amp-card:hover{
  background:var(--surface-dark-hover)!important;
}
html[data-theme="dark"] .node-runtime-body{
  background:var(--bg)!important;
}
html[data-theme="dark"] .node-runtime-footer,
html[data-theme="dark"] .node-runtime-sync-state{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .node-runtime-package,
html[data-theme="dark"] .node-package-banner,
html[data-theme="dark"] .live-package-active-banner{
  background:#183425!important;
  color:#dff7e7!important;
  border-color:#315a40!important;
}
html[data-theme="dark"] .node-no-package{
  background:var(--warning-soft-bg)!important;
  color:var(--warning-soft-text)!important;
}

/* Modal and login surfaces */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal .form-actions,
html[data-theme="dark"] .login-card{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .login{
  background:var(--bg)!important;
}
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .node-brand-mark{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
}

/* Explicitly eliminate the remaining light inline-style surfaces. */
html[data-theme="dark"] .inline-info-card{
  background:var(--surface-dark)!important;
}
html[data-theme="dark"] .fixed-staff-pill{
  background:#24304a!important;
  color:#a9c5ff!important;
}
html[data-theme="dark"] .pill{
  background:#153523!important;
  color:#7ee2a6!important;
}

/* Inline style fallbacks from older modules. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#f8fafb"],
html[data-theme="dark"] [style*="background: #f8fafb"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"]{
  background:var(--surface-dark)!important;
  color:var(--text)!important;
}

/* Beta 3.72 — project header readability */
html[data-theme="dark"] .project-header,
html[data-theme="dark"] .project-tabs,
html[data-theme="dark"] .project-tabs a,
html[data-theme="dark"] .project-tabs button {
  color: #d8dee8 !important;
}

html[data-theme="dark"] .project-tabs {
  background: #171b20;
  border-top: 1px solid #2b333d;
  border-bottom: 1px solid #2b333d;
}

html[data-theme="dark"] .project-tabs a,
html[data-theme="dark"] .project-tabs button {
  font-weight: 600;
  opacity: 1 !important;
  text-shadow: none;
}

html[data-theme="dark"] .project-tabs a:hover,
html[data-theme="dark"] .project-tabs button:hover {
  color: #ffffff !important;
  background: rgba(255,106,0,.10);
}

html[data-theme="dark"] .project-tabs a.active,
html[data-theme="dark"] .project-tabs button.active,
html[data-theme="dark"] .project-tabs .active {
  color: #ffffff !important;
  background: rgba(255,106,0,.14);
  border-bottom-color: #ff6a00 !important;
}

html[data-theme="dark"] .project-header .eyebrow,
html[data-theme="dark"] .project-header .muted,
html[data-theme="dark"] .project-header small {
  color: #9ca8b6 !important;
}

html[data-theme="dark"] .project-header h1,
html[data-theme="dark"] .project-header h2,
html[data-theme="dark"] .project-header h3 {
  color: #f3f6fa !important;
}

/* Generic dark-theme protection for links rendered inside project navigation */
html[data-theme="dark"] .project-tabs a:not(.active),
html[data-theme="dark"] .project-tabs button:not(.active) {
  color: #c6ced9 !important;
}


/* ================================================================
   Beta 3.73 — Project workspace redesign
   Inspired by the information density/workspace hierarchy of
   modern event/project-management tools, while retaining Showarrow.
   ================================================================ */

html[data-theme="dark"] .project-workspace-head{
  background:#15191e !important;
  border:1px solid #2a323b !important;
  border-radius:12px !important;
  padding:14px 16px 0 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}

html[data-theme="dark"] .project-workspace-head .project-head-top{
  min-height:38px;
}

html[data-theme="dark"] .project-workspace-head .project-title-row{
  margin-top:10px;
  padding:8px 2px 14px;
}

html[data-theme="dark"] .project-workspace-head .project-identity h1{
  color:#f4f7fb !important;
  font-size:28px;
  line-height:1.1;
  margin:3px 0 5px;
  letter-spacing:-.02em;
}

html[data-theme="dark"] .project-workspace-head .project-identity p{
  color:#9ca8b6 !important;
  margin:0;
}

html[data-theme="dark"] .project-workspace-head .eyebrow{
  color:#ff7a1a !important;
  font-weight:700;
  letter-spacing:.08em;
}

html[data-theme="dark"] .project-workspace-head .project-status-box{
  padding:7px 0;
}

html[data-theme="dark"] .project-workspace-head .project-status-box small{
  color:#9ca8b6 !important;
}

html[data-theme="dark"] .project-workspace-tabs{
  margin:0 -16px 0 !important;
  padding:0 12px !important;
  gap:2px !important;
  border-top:1px solid #2a323b;
  background:#12161a;
}

html[data-theme="dark"] .project-workspace-tabs .project-tab{
  color:#aeb8c5 !important;
  font-weight:600;
  padding:13px 12px 11px;
  border-bottom:3px solid transparent;
  background:transparent !important;
}

html[data-theme="dark"] .project-workspace-tabs .project-tab:hover{
  color:#ffffff !important;
  background:rgba(255,106,0,.07) !important;
}

html[data-theme="dark"] .project-workspace-tabs .project-tab.active{
  color:#ffffff !important;
  border-bottom-color:#ff6a00 !important;
  background:rgba(255,106,0,.08) !important;
}

html[data-theme="dark"] .project-workspace-head .project-back{
  color:#cbd4df !important;
}

html[data-theme="dark"] .project-workspace-head .project-back:hover{
  color:#fff !important;
  border-color:#46515e !important;
}

/* KPI strip */
html[data-theme="dark"] .project-kpis{
  gap:10px;
  margin:12px 0 14px;
}

html[data-theme="dark"] .project-kpi{
  background:#181d23 !important;
  border:1px solid #2b343e !important;
  border-radius:10px !important;
  padding:12px 13px;
  min-height:64px;
}

html[data-theme="dark"] .project-kpi b{
  color:#f3f6fa !important;
}

html[data-theme="dark"] .project-kpi small{
  color:#8f9baa !important;
}

/* Overview cards */
html[data-theme="dark"] #projectTabContent .card{
  background:#181d23 !important;
  border-color:#2b343e !important;
  border-radius:10px !important;
}

html[data-theme="dark"] #projectTabContent .card h2{
  color:#f0f3f7 !important;
}

html[data-theme="dark"] #projectTabContent .card .muted{
  color:#929eac !important;
}

html[data-theme="dark"] .project-grid-2{
  gap:12px;
  margin-bottom:12px;
}

html[data-theme="dark"] .project-list-row{
  border-bottom-color:#2b343e !important;
}

html[data-theme="dark"] .project-ops-grid{
  gap:12px;
  margin-bottom:12px;
}

html[data-theme="dark"] .ops-alert{
  border-bottom-color:#2b343e !important;
}

html[data-theme="dark"] .ops-alert.danger{
  background:rgba(120,25,25,.12) !important;
}

html[data-theme="dark"] .ops-alert.warning{
  background:rgba(120,80,20,.10) !important;
}

html[data-theme="dark"] .ops-activity{
  border-bottom-color:#2b343e !important;
}

html[data-theme="dark"] .project-overview-footer{
  margin-top:12px;
}

html[data-theme="dark"] .project-overview-note{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #2b343e;
  border-radius:10px;
  background:#151a20;
}

html[data-theme="dark"] .project-overview-note-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#183b2a;
  color:#70d69b;
  font-weight:800;
}

html[data-theme="dark"] .project-overview-note div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

html[data-theme="dark"] .project-overview-note b{
  color:#e8edf3;
}

html[data-theme="dark"] .project-overview-note small{
  color:#8f9baa;
}

/* Keep project sub-pages consistent with the same dense workspace feel. */
html[data-theme="dark"] #projectTabContent .toolbar{
  border-color:#2b343e !important;
}

html[data-theme="dark"] #projectTabContent table th{
  background:#20252b !important;
  color:#aeb8c5 !important;
}

html[data-theme="dark"] #projectTabContent table td{
  border-color:#2b343e !important;
  color:#d8dee7 !important;
}

@media(max-width:900px){
  html[data-theme="dark"] .project-workspace-head .project-title-row{
    align-items:flex-start;
  }
  html[data-theme="dark"] .project-workspace-head .project-status-box{
    align-items:flex-start;
  }
}

@media(max-width:700px){
  html[data-theme="dark"] .project-workspace-tabs{
    overflow-x:auto;
  }
  html[data-theme="dark"] .project-workspace-tabs .project-tab{
    flex:0 0 auto;
  }
}


/* ================================================================
   Beta 3.74 — Project detail workspace
   Rentman-inspired information hierarchy, Showarrow styling.
   ================================================================ */
html[data-theme="dark"] .project-rentman-head{
  background:#11161b !important;
  border:1px solid #29313a !important;
  border-radius:12px !important;
  padding:14px 16px 0 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.16);
}

html[data-theme="dark"] .project-rentman-crumbs{
  display:flex;align-items:center;gap:9px;
  color:#7f8b98;font-size:12px;font-weight:600;
  margin-bottom:10px;
}
html[data-theme="dark"] .project-crumb-back{
  border:0;background:none;color:#aab5c2;padding:0;cursor:pointer;font:inherit;
}
html[data-theme="dark"] .project-crumb-back:hover{color:#fff}

html[data-theme="dark"] .project-rentman-title-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;border-bottom:1px solid #29313a;padding-bottom:13px;
}
html[data-theme="dark"] .project-title-line{
  display:flex;align-items:center;gap:12px;
}
html[data-theme="dark"] .project-title-line h1{
  margin:0;color:#f4f7fa;font-size:26px;letter-spacing:-.025em;
}
html[data-theme="dark"] .project-status-pill{
  padding:5px 10px;border-radius:999px;
  background:#143923;color:#70d59a;font-size:12px;font-weight:700;
  border:1px solid #1e6840;
}
html[data-theme="dark"] .project-rentman-actions{display:flex;gap:8px}

html[data-theme="dark"] .project-meta-strip{
  display:grid;
  grid-template-columns:1fr 1.25fr 1.1fr 1.2fr 1.25fr .9fr 1.25fr;
  border-bottom:1px solid #29313a;
}
html[data-theme="dark"] .project-meta-strip>div{
  min-width:0;padding:12px 12px 11px 0;margin-right:12px;
  border-right:1px solid #252d35;
}
html[data-theme="dark"] .project-meta-strip>div:last-child{border-right:0}
html[data-theme="dark"] .project-meta-strip span{
  display:block;color:#7e8996;font-size:11px;margin-bottom:5px;
}
html[data-theme="dark"] .project-meta-strip b{
  display:block;color:#e7ecf2;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="dark"] .project-status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:#35c878;margin-right:6px;
}

html[data-theme="dark"] .project-rentman-tabs{
  display:flex;gap:1px;overflow-x:auto;
}
html[data-theme="dark"] .project-rentman-tab{
  border:0;background:transparent !important;color:#9ca7b3 !important;
  padding:12px 13px 10px;white-space:nowrap;font-weight:600;
  border-bottom:2px solid transparent;cursor:pointer;
}
html[data-theme="dark"] .project-rentman-tab:hover{
  color:#fff !important;background:rgba(255,106,0,.05) !important;
}
html[data-theme="dark"] .project-rentman-tab.active{
  color:#fff !important;border-bottom-color:#ff6a00 !important;
}

html[data-theme="dark"] .project-rentman-kpis{
  margin:10px 0 12px !important;
  display:grid !important;grid-template-columns:repeat(6,1fr);gap:8px;
}
html[data-theme="dark"] .project-rentman-kpis .project-kpi{
  min-height:72px;padding:11px 13px !important;
  background:#181d23 !important;border:1px solid #2a333d !important;border-radius:9px !important;
  display:flex;align-items:center;gap:10px;
}
html[data-theme="dark"] .project-rentman-kpis .project-kpi>span{
  font-size:20px;opacity:.9;
}
html[data-theme="dark"] .project-rentman-kpis .project-kpi b{
  display:block;color:#f2f5f8 !important;font-size:22px;line-height:1.05;
}
html[data-theme="dark"] .project-rentman-kpis .project-kpi small{
  display:block;color:#8f9aa7 !important;font-size:11px;margin-top:4px;
}

html[data-theme="dark"] .project-rentman-main-grid{
  display:grid;
  grid-template-columns:1.05fr 1.05fr .85fr;
  gap:10px;margin-bottom:10px;
}
html[data-theme="dark"] .project-rentman-main-grid .card,
html[data-theme="dark"] .project-rentman-bottom-grid .card{
  background:#181d23 !important;border:1px solid #2a333d !important;border-radius:9px !important;
  margin:0;
}
html[data-theme="dark"] .project-rentman-main-grid .card{
  min-height:292px;
}
html[data-theme="dark"] .project-card-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px 10px;
}
html[data-theme="dark"] .project-card-heading h2{
  margin:0 !important;color:#f1f4f7 !important;font-size:15px !important;
}
html[data-theme="dark"] .project-card-heading .muted{font-size:11px}
html[data-theme="dark"] .project-card-heading .small{
  padding:6px 9px;font-size:11px;
}

html[data-theme="dark"] .project-info-table{
  padding:0 14px;
}
html[data-theme="dark"] .project-info-table>div{
  display:grid;grid-template-columns:130px 1fr;
  padding:6px 0;border-bottom:1px solid #252d35;
  font-size:11px;
}
html[data-theme="dark"] .project-info-table span{color:#8995a2}
html[data-theme="dark"] .project-info-table b{color:#dfe5eb;font-weight:600}
html[data-theme="dark"] .project-description{
  margin:10px 14px 14px;padding:10px;border-radius:7px;
  background:#14191e;color:#8f9ba8;font-size:11px;line-height:1.45;
}
html[data-theme="dark"] .project-color-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff6a00;margin-right:5px;
}

html[data-theme="dark"] .mini-gantt{padding:0 14px 12px}
html[data-theme="dark"] .mini-gantt-head,
html[data-theme="dark"] .mini-gantt-row{
  display:grid;grid-template-columns:1.15fr .85fr .85fr 1.1fr;gap:8px;align-items:center;
}
html[data-theme="dark"] .mini-gantt-head{
  padding:6px 0;color:#7d8996;font-size:10px;border-bottom:1px solid #2a333d;
}
html[data-theme="dark"] .mini-gantt-row{
  min-height:36px;border-bottom:1px solid #242c34;font-size:10px;color:#dbe2e8;
}
html[data-theme="dark"] .mini-gantt-row b{font-size:11px}
html[data-theme="dark"] .mini-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
}
html[data-theme="dark"] .mini-dot.blue,.mini-bar.blue{background:#4d86ff}
html[data-theme="dark"] .mini-dot.orange,.mini-bar.orange{background:#ff8a24}
html[data-theme="dark"] .mini-dot.green,.mini-bar.green{background:#36c879}
html[data-theme="dark"] .mini-dot.purple,.mini-bar.purple{background:#9b6cff}
html[data-theme="dark"] .mini-gantt-row span{color:#8995a2}
html[data-theme="dark"] .mini-bar{
  display:block;height:7px;border-radius:99px;min-width:18px;
}

html[data-theme="dark"] .next-task-list{padding:0 14px 12px}
html[data-theme="dark"] .next-task-row{
  display:grid;grid-template-columns:14px 1fr auto auto;gap:8px;align-items:center;
  min-height:43px;border-bottom:1px solid #252d35;cursor:pointer;
}
html[data-theme="dark"] .next-task-row:hover{background:#1d232a}
html[data-theme="dark"] .task-check{
  width:12px;height:12px;border:1px solid #687584;border-radius:3px;
}
html[data-theme="dark"] .next-task-copy{min-width:0}
html[data-theme="dark"] .next-task-copy b{
  display:block;color:#e7ecf1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="dark"] .next-task-copy small{display:block;color:#7f8b98;font-size:9px;margin-top:3px}
html[data-theme="dark"] .task-status,
html[data-theme="dark"] .task-priority{
  font-size:9px;padding:4px 6px;border-radius:5px;border:1px solid #36414c;color:#b7c0ca;
}
html[data-theme="dark"] .task-status.open{background:#162a3b;color:#55a9ff;border-color:#204b70}
html[data-theme="dark"] .task-priority.high{background:#38231b;color:#ff9b5c;border-color:#6a3920}

html[data-theme="dark"] .project-rentman-bottom-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;
}
html[data-theme="dark"] .project-rentman-ops{margin-bottom:10px}
html[data-theme="dark"] .project-ops-bottom{margin-bottom:0}
html[data-theme="dark"] .ops-alert{
  display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;
  padding:10px 14px;border-bottom:1px solid #252d35;
}
html[data-theme="dark"] .ops-alert:last-child{border-bottom:0}
html[data-theme="dark"] .ops-alert b{display:block;color:#e6ebf0;font-size:11px}
html[data-theme="dark"] .ops-alert small{display:block;color:#7f8b98;font-size:9px;margin-top:3px}
html[data-theme="dark"] .ops-empty{padding:22px 14px;color:#45c67c;font-size:11px}
html[data-theme="dark"] .ops-activity{
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid #252d35;
}
html[data-theme="dark"] .ops-activity:last-child{border-bottom:0}
html[data-theme="dark"] .ops-activity b{display:block;color:#e7ecf1;font-size:11px}
html[data-theme="dark"] .ops-activity small{display:block;color:#7f8b98;font-size:9px;margin-top:2px}
html[data-theme="dark"] .activity-avatar{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#2a3440;color:#f1f4f7;font-size:9px;font-weight:700;
}

html[data-theme="dark"] .project-note-preview{
  margin:0 14px 14px;padding:13px;border-radius:8px;background:#24211a;border:1px solid #4c3b1d;
}
html[data-theme="dark"] .project-note-preview .note-label{
  display:block;color:#f1ad38;font-size:10px;font-weight:700;margin-bottom:7px;
}
html[data-theme="dark"] .project-note-preview b{display:block;color:#e5e8eb;font-size:11px;line-height:1.45}
html[data-theme="dark"] .project-note-preview small{display:block;color:#7f8b98;font-size:9px;margin-top:8px}

html[data-theme="dark"] .project-empty-inline{
  padding:25px 10px;color:#818d99;text-align:center;font-size:11px;
}
html[data-theme="dark"] .project-workspace-toolbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
html[data-theme="dark"] .project-workspace-toolbar h2{margin:0;color:#f1f4f7}
html[data-theme="dark"] .project-empty-workspace{
  min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:#181d23 !important;border:1px solid #2a333d !important;
}
html[data-theme="dark"] .project-empty-icon{font-size:34px;margin-bottom:8px}
html[data-theme="dark"] .project-empty-workspace h2{margin:0 0 5px}
html[data-theme="dark"] .project-empty-workspace p{color:#7f8b98}

@media(max-width:1100px){
  html[data-theme="dark"] .project-meta-strip{grid-template-columns:repeat(4,1fr)}
  html[data-theme="dark"] .project-rentman-main-grid{grid-template-columns:1fr 1fr}
  html[data-theme="dark"] .project-next-tasks{grid-column:1/-1}
}
@media(max-width:800px){
  html[data-theme="dark"] .project-rentman-title-row{align-items:flex-start;flex-direction:column}
  html[data-theme="dark"] .project-meta-strip{grid-template-columns:repeat(2,1fr)}
  html[data-theme="dark"] .project-rentman-kpis{grid-template-columns:repeat(3,1fr) !important}
  html[data-theme="dark"] .project-rentman-main-grid,
  html[data-theme="dark"] .project-rentman-bottom-grid{grid-template-columns:1fr}
}

/* Beta 3.75 — project foundation */
html[data-theme="dark"] .project-kpi{background:#181d23!important;border-color:#2b343e!important}
html[data-theme="dark"] .project-kpi b{color:#f3f6fa!important}html[data-theme="dark"] .project-kpi small{color:#929eac!important}
html[data-theme="dark"] .project-card{background:#181d23!important;border-color:#2b343e!important}
html[data-theme="dark"] .project-card:hover{border-color:rgba(255,106,0,.55)!important}

/* ================================================================
   Beta 3.76 — inline project editing
   ================================================================ */
html[data-theme="dark"] .project-meta-strip b{white-space:normal}
html[data-theme="dark"] .project-meta-sub{
  display:block;color:#6f7b88;font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="dark"] .project-inline-section{
  margin:0 14px 12px;border:1px solid #252e37;border-radius:8px;background:#151a20;
}
html[data-theme="dark"] .project-inline-section-title{
  padding:9px 11px;border-bottom:1px solid #252e37;color:#aab5c1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
}
html[data-theme="dark"] .project-inline-grid{
  display:grid;grid-template-columns:1fr 1fr;
}
html[data-theme="dark"] .project-inline-field{
  position:relative;min-width:0;padding:9px 11px;border-bottom:1px solid #242c34;cursor:text;
  transition:background .12s ease,border-color .12s ease;
}
html[data-theme="dark"] .project-inline-field:nth-child(odd){border-right:1px solid #242c34}
html[data-theme="dark"] .project-inline-field:hover{background:#1a2027}
html[data-theme="dark"] .project-inline-field span{
  display:block;color:#7e8996;font-size:9px;margin-bottom:4px;
}
html[data-theme="dark"] .project-inline-field b{
  display:block;color:#e5ebf1;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px;
}
html[data-theme="dark"] .project-inline-field i{
  position:absolute;right:9px;bottom:9px;color:#667482;font-style:normal;font-size:10px;opacity:.55;
}
html[data-theme="dark"] .project-inline-field:hover i{color:#ff7a1a;opacity:1}
html[data-theme="dark"] .project-inline-field.editing{
  background:#1c232b;box-shadow:inset 0 0 0 1px rgba(255,106,0,.65);
}
html[data-theme="dark"] .project-inline-input{
  width:100%;box-sizing:border-box;background:#10151a;border:1px solid #43515e;color:#f2f5f8;border-radius:5px;
  padding:5px 7px;font:inherit;font-size:11px;outline:none;
}
html[data-theme="dark"] .project-inline-input:focus{
  border-color:#ff6a00;box-shadow:0 0 0 2px rgba(255,106,0,.12);
}
html[data-theme="dark"] .project-contact-card{
  display:grid;grid-template-columns:1fr 1fr;
}
html[data-theme="dark"] .project-contact-card .project-inline-field:nth-child(odd){border-right:1px solid #242c34}
html[data-theme="dark"] .project-inline-description{
  margin:0 14px 14px;padding:10px 11px;border:1px solid #252e37;border-radius:8px;background:#151a20;cursor:text;
}
html[data-theme="dark"] .project-inline-description:hover{border-color:#465461}
html[data-theme="dark"] .project-inline-description span{
  display:block;color:#7e8996;font-size:9px;margin-bottom:5px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;
}
html[data-theme="dark"] .project-inline-description b{
  display:block;color:#cbd3dc;font-size:11px;line-height:1.45;font-weight:500;
}
html[data-theme="dark"] .project-inline-textarea{min-height:70px;resize:vertical}
html[data-theme="dark"] .project-inline-field.readonly{cursor:default}
html[data-theme="dark"] .project-inline-field.readonly i{display:none}

/* Create-project editor */
html[data-theme="dark"] .project-editor{width:min(920px,92vw)}
html[data-theme="dark"] .project-editor-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px;
}
html[data-theme="dark"] .project-editor-head h2{margin:2px 0 4px;color:#f3f6f9}
html[data-theme="dark"] .project-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html[data-theme="dark"] .project-editor-section{
  border:1px solid #2a333d;border-radius:8px;background:#151a20;padding:12px;
}
html[data-theme="dark"] .project-editor-full{grid-column:1/-1}
html[data-theme="dark"] .project-editor-section-title{
  color:#b4bfca;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;
}
html[data-theme="dark"] .project-editor-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
html[data-theme="dark"] .project-editor-fields label,
html[data-theme="dark"] .project-editor-full label{display:block;color:#7e8996;font-size:10px}
html[data-theme="dark"] .project-editor-fields input,
html[data-theme="dark"] .project-editor-fields select,
html[data-theme="dark"] .project-editor-full textarea{
  margin-top:4px;width:100%;box-sizing:border-box;
}
@media(max-width:900px){
  html[data-theme="dark"] .project-editor-grid,
  html[data-theme="dark"] .project-editor-fields{grid-template-columns:1fr}
  html[data-theme="dark"] .project-editor-full{grid-column:auto}
}

html[data-theme="dark"] .project-inline-period-editor{
  display:grid;grid-template-columns:1fr .7fr auto 1fr .7fr auto;gap:4px;align-items:center;
}
html[data-theme="dark"] .project-inline-period-editor input{
  min-width:0;background:#10151a;border:1px solid #43515e;color:#f2f5f8;border-radius:5px;padding:5px 6px;font-size:10px;
}
html[data-theme="dark"] .project-inline-period-editor span{color:#7e8996;text-align:center}
html[data-theme="dark"] .project-inline-save{
  border:1px solid #5a3b22;background:#ff6a00;color:#fff;border-radius:5px;padding:5px 7px;cursor:pointer;font-weight:800;
}
@media(max-width:1200px){
  html[data-theme="dark"] .project-inline-period-editor{grid-template-columns:1fr 1fr}
  html[data-theme="dark"] .project-inline-period-editor span{display:none}
}

/* Beta 3.78 — project workflow: direct editing, no intermediate edit modal */
html[data-theme="dark"] .project-inline-hint{font-size:9px;color:#697582;margin-left:8px;opacity:.8}
html[data-theme="dark"] .project-create-page{max-width:1180px;margin:0 auto;padding-bottom:28px}
html[data-theme="dark"] .project-create-topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:14px}
html[data-theme="dark"] .project-create-topbar h1{margin:2px 0 3px}
html[data-theme="dark"] .project-create-actions{display:flex;gap:8px;align-items:center}
html[data-theme="dark"] .project-create-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html[data-theme="dark"] .project-create-card{padding:0;overflow:hidden}
html[data-theme="dark"] .project-create-main{grid-column:1/-1}
html[data-theme="dark"] .project-create-full{grid-column:1/-1;padding-bottom:14px}
html[data-theme="dark"] .project-create-card-head{padding:13px 15px;border-bottom:1px solid #27303a;background:#151a20}
html[data-theme="dark"] .project-create-card-head h2{margin:0;font-size:14px}
html[data-theme="dark"] .project-create-card-head span{display:block;color:#788592;font-size:10px;margin-top:3px}
html[data-theme="dark"] .project-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
html[data-theme="dark"] .project-create-grid label{padding:11px 13px;color:#84909c;font-size:10px;border-bottom:1px solid #252e37}
html[data-theme="dark"] .project-create-grid label:nth-child(odd){border-right:1px solid #252e37}
html[data-theme="dark"] .project-create-grid label.span-2{grid-column:1/-1;border-right:0}
html[data-theme="dark"] .project-create-grid input,html[data-theme="dark"] .project-create-grid select{display:block;width:100%;box-sizing:border-box;margin-top:5px;background:#10151a;border:1px solid transparent;border-bottom-color:#3a4652;color:#eef2f5;padding:7px 3px;border-radius:3px;outline:0}
html[data-theme="dark"] .project-create-grid input:focus,html[data-theme="dark"] .project-create-grid select:focus{border-color:#ff6a00;box-shadow:0 0 0 2px rgba(255,106,0,.1)}
html[data-theme="dark"] .project-create-card>textarea{margin:13px;width:calc(100% - 26px);box-sizing:border-box;background:#10151a;color:#eef2f5;border:1px solid #35414d;border-radius:5px;padding:9px;resize:vertical;outline:0}
html[data-theme="dark"] .project-create-card>textarea:focus{border-color:#ff6a00}
html[data-theme="dark"] .project-color-field{display:flex;align-items:center;gap:8px;margin-top:5px;color:#aeb8c2}
html[data-theme="dark"] .project-color-field input{width:35px!important;height:27px!important;padding:0!important;border:0!important;box-shadow:none!important;margin:0!important}
html[data-theme="dark"] .project-contact-primary{padding:10px 11px;border-bottom:1px solid #242c34;grid-column:1/-1;cursor:text}
html[data-theme="dark"] .project-contact-primary span{display:block;color:#7e8996;font-size:9px;margin-bottom:4px}
html[data-theme="dark"] .project-contact-primary b{color:#e5ebf1;font-size:12px}
@media(max-width:900px){html[data-theme="dark"] .project-create-layout{grid-template-columns:1fr}html[data-theme="dark"] .project-create-main,html[data-theme="dark"] .project-create-full{grid-column:auto}html[data-theme="dark"] .project-create-topbar{align-items:flex-start;flex-direction:column}}

html[data-theme="dark"] .project-overview-loading{
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:#e8edf2;border:1px solid #28313a;border-radius:10px;background:#151a20;
}
html[data-theme="dark"] .project-overview-loading span{font-size:12px;color:#8d99a6}
html[data-theme="dark"] .loading-spinner{width:22px;height:22px;border:2px solid #35404b;border-top-color:#ff6a00;border-radius:50%;animation:showarrowSpin .7s linear infinite}
@keyframes showarrowSpin{to{transform:rotate(360deg)}}


/* =========================================================
   SHOWARROW THEME CONSISTENCY — Beta 4.17
   One theme state for HTML + BODY and one surface palette
   across all modules. Light and dark now change appearance
   only; layout, spacing, visibility and functionality remain equal.
   ========================================================= */

html[data-theme="light"], body[data-theme="light"]{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --panel-2:#f8fafb;
  --text:#17202a;
  --line:#e4e8ec;
  --muted:#6d7782;
  --accent:#1d6fe8;
  color-scheme:light;
}
html[data-theme="dark"], body[data-theme="dark"]{
  --bg:#111418;
  --panel:#1b2026;
  --panel-2:#222830;
  --text:#eef2f6;
  --line:#343c46;
  --muted:#9aa5b1;
  --accent:#4d8df7;
  color-scheme:dark;
}

html,body{background:var(--bg);color:var(--text)}
body,.layout,main,#content,.node-shell,.node-main,.node-page{color:var(--text)}

.card,.project-card,.project-kpi,.timeline-card,.project-role-card,
.project-plan-period,.overview-plan,.project-plan-row,.timeline-empty,
.message-row,.chat-thread-row,.chat-compose,.chat-bubble,.chat-messages,
.task-history-box,.copy-options,.copy-preview,.task-quick-status,
.task-comment,.task-attachment,.notification-prefs,.upload-rules,
.equipment-metric,.link-capabilities,.node-stats>div,.sync-summary,
.publish-steps-list span,.publish-note,.dashboard-module-widget,
.dashboard-editor-item,.live-dashboard-card,.editor-widget-row,
.live-library-item,.node-runtime-dashboard,.node-runtime-empty,.node-widget,
.node-runtime-sync-state,.planning-task,.planning-unscheduled-chip,
.planning-availability-band,.planning-availability,.planning-person-status,
.planning-conflict-dialog{
  background:var(--panel);
  color:var(--text);
  border-color:var(--line);
}

table{background:var(--panel);color:var(--text);border-color:var(--line)}
th,.gantt-header,.timeline-list-head{background:var(--panel-2);color:var(--muted)}
td{color:var(--text);border-color:var(--line)}

input,textarea,select,
.live-editor input,.live-editor textarea,.live-editor select,
.equipment-filterbar input,.equipment-filterbar select,
.publish-target-editor select{
  background:var(--panel);
  color:var(--text);
  border-color:var(--line);
}
input::placeholder,textarea::placeholder{color:var(--muted)}

.secondary,.theme-toggle,.module-selector-button,.module-selector-menu,
.configuration-menu,.module-selector-menu .module-option,
.active-module-pills span,.node-live-toolbar span,
.node-runtime-sync-state button,.dashboard-widget-picker,
.dashboard-widget-picker-item{
  background:var(--panel);
  color:var(--text);
  border-color:var(--line);
}

.modal,.modal .form-actions,.login-card{
  background:var(--panel);
  color:var(--text);
  border-color:var(--line);
}
.login{background:var(--bg)}

.planning-time-axis,.planning-day-header,.planning-month,
.planning-month-weekdays,.planning-month-cell,.planning-person-board-axis,
.planning-person-row-label{
  background:var(--panel);
  color:var(--text);
  border-color:var(--line);
}

/* Preserve the same interaction states in both themes. */
.secondary:hover,.theme-toggle:hover,.module-selector-button:hover,
.dashboard-widget-picker-item:hover{
  background:var(--panel-2);
}

/* Avoid old hard-coded light backgrounds leaking into dark mode. */
html[data-theme="dark"] .node-runtime-body,
body[data-theme="dark"].node-runtime-body{
  background:var(--bg)!important;
}
html[data-theme="dark"] .node-runtime-package{
  background:var(--success-soft-bg,#183525)!important;
  border-color:#315b43!important;
  color:var(--text)!important;
}
html[data-theme="dark"] .node-no-package{
  background:var(--warning-soft-bg,#3b2d18)!important;
  border-color:#6b5128!important;
}
html[data-theme="dark"] .node-runtime-footer,
html[data-theme="dark"] .node-live-toolbar span{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Keep sidebar structure identical; only palette changes. */
aside,.node-sidebar{
  background:var(--sidebar,#111827);
}


/* COMPLETE PROJECT LIGHT-MODE MIRROR — Beta 4.17 */
/* ================================================================
   Beta 3.73 — Project workspace redesign
   Inspired by the information density/workspace hierarchy of
   modern event/project-management tools, while retaining Showarrow.
   ================================================================ */

html[data-theme="light"] .project-workspace-head{
  background:#ffffff !important;
  border:1px solid #d8e0e8 !important;
  border-radius:12px !important;
  padding:14px 16px 0 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

html[data-theme="light"] .project-workspace-head .project-head-top{
  min-height:38px;
}

html[data-theme="light"] .project-workspace-head .project-title-row{
  margin-top:10px;
  padding:8px 2px 14px;
}

html[data-theme="light"] .project-workspace-head .project-identity h1{
  color:#17212b !important;
  font-size:28px;
  line-height:1.1;
  margin:3px 0 5px;
  letter-spacing:-.02em;
}

html[data-theme="light"] .project-workspace-head .project-identity p{
  color:#64748b !important;
  margin:0;
}

html[data-theme="light"] .project-workspace-head .eyebrow{
  color:#ff7a1a !important;
  font-weight:700;
  letter-spacing:.08em;
}

html[data-theme="light"] .project-workspace-head .project-status-box{
  padding:7px 0;
}

html[data-theme="light"] .project-workspace-head .project-status-box small{
  color:#64748b !important;
}

html[data-theme="light"] .project-workspace-tabs{
  margin:0 -16px 0 !important;
  padding:0 12px !important;
  gap:2px !important;
  border-top:1px solid #d8e0e8;
  background:#ffffff;
}

html[data-theme="light"] .project-workspace-tabs .project-tab{
  color:#52606d !important;
  font-weight:600;
  padding:13px 12px 11px;
  border-bottom:3px solid transparent;
  background:transparent !important;
}

html[data-theme="light"] .project-workspace-tabs .project-tab:hover{
  color:#ffffff !important;
  background:rgba(255,106,0,.07) !important;
}

html[data-theme="light"] .project-workspace-tabs .project-tab.active{
  color:#ffffff !important;
  border-bottom-color:#ff6a00 !important;
  background:rgba(255,106,0,.08) !important;
}

html[data-theme="light"] .project-workspace-head .project-back{
  color:#475569 !important;
}

html[data-theme="light"] .project-workspace-head .project-back:hover{
  color:#fff !important;
  border-color:#b7c3cf !important;
}

/* KPI strip */
html[data-theme="light"] .project-kpis{
  gap:10px;
  margin:12px 0 14px;
}

html[data-theme="light"] .project-kpi{
  background:#ffffff !important;
  border:1px solid #d8e0e8 !important;
  border-radius:10px !important;
  padding:12px 13px;
  min-height:64px;
}

html[data-theme="light"] .project-kpi b{
  color:#17212b !important;
}

html[data-theme="light"] .project-kpi small{
  color:#64748b !important;
}

/* Overview cards */
html[data-theme="light"] #projectTabContent .card{
  background:#ffffff !important;
  border-color:#d8e0e8 !important;
  border-radius:10px !important;
}

html[data-theme="light"] #projectTabContent .card h2{
  color:#17212b !important;
}

html[data-theme="light"] #projectTabContent .card .muted{
  color:#64748b !important;
}

html[data-theme="light"] .project-grid-2{
  gap:12px;
  margin-bottom:12px;
}

html[data-theme="light"] .project-list-row{
  border-bottom-color:#d8e0e8 !important;
}

html[data-theme="light"] .project-ops-grid{
  gap:12px;
  margin-bottom:12px;
}

html[data-theme="light"] .ops-alert{
  border-bottom-color:#d8e0e8 !important;
}

html[data-theme="light"] .ops-alert.danger{
  background:rgba(120,25,25,.12) !important;
}

html[data-theme="light"] .ops-alert.warning{
  background:rgba(120,80,20,.10) !important;
}

html[data-theme="light"] .ops-activity{
  border-bottom-color:#d8e0e8 !important;
}

html[data-theme="light"] .project-overview-footer{
  margin-top:12px;
}

html[data-theme="light"] .project-overview-note{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #d8e0e8;
  border-radius:10px;
  background:#ffffff;
}

html[data-theme="light"] .project-overview-note-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#183b2a;
  color:#70d69b;
  font-weight:800;
}

html[data-theme="light"] .project-overview-note div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

html[data-theme="light"] .project-overview-note b{
  color:#25313d;
}

html[data-theme="light"] .project-overview-note small{
  color:#64748b;
}

/* Keep project sub-pages consistent with the same dense workspace feel. */
html[data-theme="light"] #projectTabContent .toolbar{
  border-color:#d8e0e8 !important;
}

html[data-theme="light"] #projectTabContent table th{
  background:#f3f6f8 !important;
  color:#52606d !important;
}

html[data-theme="light"] #projectTabContent table td{
  border-color:#d8e0e8 !important;
  color:#334155 !important;
}

@media(max-width:900px){
  html[data-theme="light"] .project-workspace-head .project-title-row{
    align-items:flex-start;
  }
  html[data-theme="light"] .project-workspace-head .project-status-box{
    align-items:flex-start;
  }
}

@media(max-width:700px){
  html[data-theme="light"] .project-workspace-tabs{
    overflow-x:auto;
  }
  html[data-theme="light"] .project-workspace-tabs .project-tab{
    flex:0 0 auto;
  }
}


/* ================================================================
   Beta 3.74 — Project detail workspace
   Rentman-inspired information hierarchy, Showarrow styling.
   ================================================================ */
html[data-theme="light"] .project-rentman-head{
  background:#ffffff !important;
  border:1px solid #d8e0e8 !important;
  border-radius:12px !important;
  padding:14px 16px 0 !important;
  box-shadow:0 8px 30px rgba(15,23,42,.07);
}

html[data-theme="light"] .project-rentman-crumbs{
  display:flex;align-items:center;gap:9px;
  color:#64748b;font-size:12px;font-weight:600;
  margin-bottom:10px;
}
html[data-theme="light"] .project-crumb-back{
  border:0;background:none;color:#52606d;padding:0;cursor:pointer;font:inherit;
}
html[data-theme="light"] .project-crumb-back:hover{color:#fff}

html[data-theme="light"] .project-rentman-title-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;border-bottom:1px solid #d8e0e8;padding-bottom:13px;
}
html[data-theme="light"] .project-title-line{
  display:flex;align-items:center;gap:12px;
}
html[data-theme="light"] .project-title-line h1{
  margin:0;color:#17212b;font-size:26px;letter-spacing:-.025em;
}
html[data-theme="light"] .project-status-pill{
  padding:5px 10px;border-radius:999px;
  background:#143923;color:#70d59a;font-size:12px;font-weight:700;
  border:1px solid #1e6840;
}
html[data-theme="light"] .project-rentman-actions{display:flex;gap:8px}

html[data-theme="light"] .project-meta-strip{
  display:grid;
  grid-template-columns:1fr 1.25fr 1.1fr 1.2fr 1.25fr .9fr 1.25fr;
  border-bottom:1px solid #d8e0e8;
}
html[data-theme="light"] .project-meta-strip>div{
  min-width:0;padding:12px 12px 11px 0;margin-right:12px;
  border-right:1px solid #e5eaf0;
}
html[data-theme="light"] .project-meta-strip>div:last-child{border-right:0}
html[data-theme="light"] .project-meta-strip span{
  display:block;color:#64748b;font-size:11px;margin-bottom:5px;
}
html[data-theme="light"] .project-meta-strip b{
  display:block;color:#25313d;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="light"] .project-status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:#35c878;margin-right:6px;
}

html[data-theme="light"] .project-rentman-tabs{
  display:flex;gap:1px;overflow-x:auto;
}
html[data-theme="light"] .project-rentman-tab{
  border:0;background:transparent !important;color:#64748b !important;
  padding:12px 13px 10px;white-space:nowrap;font-weight:600;
  border-bottom:2px solid transparent;cursor:pointer;
}
html[data-theme="light"] .project-rentman-tab:hover{
  color:#fff !important;background:rgba(255,106,0,.05) !important;
}
html[data-theme="light"] .project-rentman-tab.active{
  color:#fff !important;border-bottom-color:#ff6a00 !important;
}

html[data-theme="light"] .project-rentman-kpis{
  margin:10px 0 12px !important;
  display:grid !important;grid-template-columns:repeat(6,1fr);gap:8px;
}
html[data-theme="light"] .project-rentman-kpis .project-kpi{
  min-height:72px;padding:11px 13px !important;
  background:#ffffff !important;border:1px solid #d8e0e8 !important;border-radius:9px !important;
  display:flex;align-items:center;gap:10px;
}
html[data-theme="light"] .project-rentman-kpis .project-kpi>span{
  font-size:20px;opacity:.9;
}
html[data-theme="light"] .project-rentman-kpis .project-kpi b{
  display:block;color:#17212b !important;font-size:22px;line-height:1.05;
}
html[data-theme="light"] .project-rentman-kpis .project-kpi small{
  display:block;color:#64748b !important;font-size:11px;margin-top:4px;
}

html[data-theme="light"] .project-rentman-main-grid{
  display:grid;
  grid-template-columns:1.05fr 1.05fr .85fr;
  gap:10px;margin-bottom:10px;
}
html[data-theme="light"] .project-rentman-main-grid .card,
html[data-theme="light"] .project-rentman-bottom-grid .card{
  background:#ffffff !important;border:1px solid #d8e0e8 !important;border-radius:9px !important;
  margin:0;
}
html[data-theme="light"] .project-rentman-main-grid .card{
  min-height:292px;
}
html[data-theme="light"] .project-card-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px 10px;
}
html[data-theme="light"] .project-card-heading h2{
  margin:0 !important;color:#17212b !important;font-size:15px !important;
}
html[data-theme="light"] .project-card-heading .muted{font-size:11px}
html[data-theme="light"] .project-card-heading .small{
  padding:6px 9px;font-size:11px;
}

html[data-theme="light"] .project-info-table{
  padding:0 14px;
}
html[data-theme="light"] .project-info-table>div{
  display:grid;grid-template-columns:130px 1fr;
  padding:6px 0;border-bottom:1px solid #e5eaf0;
  font-size:11px;
}
html[data-theme="light"] .project-info-table span{color:#64748b}
html[data-theme="light"] .project-info-table b{color:#334155;font-weight:600}
html[data-theme="light"] .project-description{
  margin:10px 14px 14px;padding:10px;border-radius:7px;
  background:#f8fafc;color:#64748b;font-size:11px;line-height:1.45;
}
html[data-theme="light"] .project-color-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff6a00;margin-right:5px;
}

html[data-theme="light"] .mini-gantt{padding:0 14px 12px}
html[data-theme="light"] .mini-gantt-head,
html[data-theme="light"] .mini-gantt-row{
  display:grid;grid-template-columns:1.15fr .85fr .85fr 1.1fr;gap:8px;align-items:center;
}
html[data-theme="light"] .mini-gantt-head{
  padding:6px 0;color:#64748b;font-size:10px;border-bottom:1px solid #d8e0e8;
}
html[data-theme="light"] .mini-gantt-row{
  min-height:36px;border-bottom:1px solid #e5eaf0;font-size:10px;color:#334155;
}
html[data-theme="light"] .mini-gantt-row b{font-size:11px}
html[data-theme="light"] .mini-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
}
html[data-theme="light"] .mini-dot.blue,.mini-bar.blue{background:#4d86ff}
html[data-theme="light"] .mini-dot.orange,.mini-bar.orange{background:#ff8a24}
html[data-theme="light"] .mini-dot.green,.mini-bar.green{background:#36c879}
html[data-theme="light"] .mini-dot.purple,.mini-bar.purple{background:#9b6cff}
html[data-theme="light"] .mini-gantt-row span{color:#64748b}
html[data-theme="light"] .mini-bar{
  display:block;height:7px;border-radius:99px;min-width:18px;
}

html[data-theme="light"] .next-task-list{padding:0 14px 12px}
html[data-theme="light"] .next-task-row{
  display:grid;grid-template-columns:14px 1fr auto auto;gap:8px;align-items:center;
  min-height:43px;border-bottom:1px solid #e5eaf0;cursor:pointer;
}
html[data-theme="light"] .next-task-row:hover{background:#f3f6f8}
html[data-theme="light"] .task-check{
  width:12px;height:12px;border:1px solid #94a3b8;border-radius:3px;
}
html[data-theme="light"] .next-task-copy{min-width:0}
html[data-theme="light"] .next-task-copy b{
  display:block;color:#25313d;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="light"] .next-task-copy small{display:block;color:#64748b;font-size:9px;margin-top:3px}
html[data-theme="light"] .task-status,
html[data-theme="light"] .task-priority{
  font-size:9px;padding:4px 6px;border-radius:5px;border:1px solid #c9d2dc;color:#52606d;
}
html[data-theme="light"] .task-status.open{background:#162a3b;color:#55a9ff;border-color:#204b70}
html[data-theme="light"] .task-priority.high{background:#38231b;color:#ff9b5c;border-color:#6a3920}

html[data-theme="light"] .project-rentman-bottom-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;
}
html[data-theme="light"] .project-rentman-ops{margin-bottom:10px}
html[data-theme="light"] .project-ops-bottom{margin-bottom:0}
html[data-theme="light"] .ops-alert{
  display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;
  padding:10px 14px;border-bottom:1px solid #e5eaf0;
}
html[data-theme="light"] .ops-alert:last-child{border-bottom:0}
html[data-theme="light"] .ops-alert b{display:block;color:#25313d;font-size:11px}
html[data-theme="light"] .ops-alert small{display:block;color:#64748b;font-size:9px;margin-top:3px}
html[data-theme="light"] .ops-empty{padding:22px 14px;color:#45c67c;font-size:11px}
html[data-theme="light"] .ops-activity{
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid #e5eaf0;
}
html[data-theme="light"] .ops-activity:last-child{border-bottom:0}
html[data-theme="light"] .ops-activity b{display:block;color:#25313d;font-size:11px}
html[data-theme="light"] .ops-activity small{display:block;color:#64748b;font-size:9px;margin-top:2px}
html[data-theme="light"] .activity-avatar{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#2a3440;color:#17212b;font-size:9px;font-weight:700;
}

html[data-theme="light"] .project-note-preview{
  margin:0 14px 14px;padding:13px;border-radius:8px;background:#fff8ea;border:1px solid #4c3b1d;
}
html[data-theme="light"] .project-note-preview .note-label{
  display:block;color:#f1ad38;font-size:10px;font-weight:700;margin-bottom:7px;
}
html[data-theme="light"] .project-note-preview b{display:block;color:#25313d;font-size:11px;line-height:1.45}
html[data-theme="light"] .project-note-preview small{display:block;color:#64748b;font-size:9px;margin-top:8px}

html[data-theme="light"] .project-empty-inline{
  padding:25px 10px;color:#64748b;text-align:center;font-size:11px;
}
html[data-theme="light"] .project-workspace-toolbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
html[data-theme="light"] .project-workspace-toolbar h2{margin:0;color:#17212b}
html[data-theme="light"] .project-empty-workspace{
  min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:#ffffff !important;border:1px solid #d8e0e8 !important;
}
html[data-theme="light"] .project-empty-icon{font-size:34px;margin-bottom:8px}
html[data-theme="light"] .project-empty-workspace h2{margin:0 0 5px}
html[data-theme="light"] .project-empty-workspace p{color:#64748b}

@media(max-width:1100px){
  html[data-theme="light"] .project-meta-strip{grid-template-columns:repeat(4,1fr)}
  html[data-theme="light"] .project-rentman-main-grid{grid-template-columns:1fr 1fr}
  html[data-theme="light"] .project-next-tasks{grid-column:1/-1}
}
@media(max-width:800px){
  html[data-theme="light"] .project-rentman-title-row{align-items:flex-start;flex-direction:column}
  html[data-theme="light"] .project-meta-strip{grid-template-columns:repeat(2,1fr)}
  html[data-theme="light"] .project-rentman-kpis{grid-template-columns:repeat(3,1fr) !important}
  html[data-theme="light"] .project-rentman-main-grid,
  html[data-theme="light"] .project-rentman-bottom-grid{grid-template-columns:1fr}
}

/* Beta 3.75 — project foundation */
html[data-theme="light"] .project-kpi{background:#ffffff!important;border-color:#d8e0e8!important}
html[data-theme="light"] .project-kpi b{color:#17212b!important}html[data-theme="light"] .project-kpi small{color:#64748b!important}
html[data-theme="light"] .project-card{background:#ffffff!important;border-color:#d8e0e8!important}
html[data-theme="light"] .project-card:hover{border-color:rgba(255,106,0,.55)!important}

/* ================================================================
   Beta 3.76 — inline project editing
   ================================================================ */
html[data-theme="light"] .project-meta-strip b{white-space:normal}
html[data-theme="light"] .project-meta-sub{
  display:block;color:#64748b;font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="light"] .project-inline-section{
  margin:0 14px 12px;border:1px solid #e5eaf0;border-radius:8px;background:#ffffff;
}
html[data-theme="light"] .project-inline-section-title{
  padding:9px 11px;border-bottom:1px solid #e5eaf0;color:#52606d;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
}
html[data-theme="light"] .project-inline-grid{
  display:grid;grid-template-columns:1fr 1fr;
}
html[data-theme="light"] .project-inline-field{
  position:relative;min-width:0;padding:9px 11px;border-bottom:1px solid #e5eaf0;cursor:text;
  transition:background .12s ease,border-color .12s ease;
}
html[data-theme="light"] .project-inline-field:nth-child(odd){border-right:1px solid #e5eaf0}
html[data-theme="light"] .project-inline-field:hover{background:#f8fafc}
html[data-theme="light"] .project-inline-field span{
  display:block;color:#64748b;font-size:9px;margin-bottom:4px;
}
html[data-theme="light"] .project-inline-field b{
  display:block;color:#25313d;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px;
}
html[data-theme="light"] .project-inline-field i{
  position:absolute;right:9px;bottom:9px;color:#64748b;font-style:normal;font-size:10px;opacity:.55;
}
html[data-theme="light"] .project-inline-field:hover i{color:#ff7a1a;opacity:1}
html[data-theme="light"] .project-inline-field.editing{
  background:#1c232b;box-shadow:inset 0 0 0 1px rgba(255,106,0,.65);
}
html[data-theme="light"] .project-inline-input{
  width:100%;box-sizing:border-box;background:#10151a;border:1px solid #43515e;color:#17212b;border-radius:5px;
  padding:5px 7px;font:inherit;font-size:11px;outline:none;
}
html[data-theme="light"] .project-inline-input:focus{
  border-color:#ff6a00;box-shadow:0 0 0 2px rgba(255,106,0,.12);
}
html[data-theme="light"] .project-contact-card{
  display:grid;grid-template-columns:1fr 1fr;
}
html[data-theme="light"] .project-contact-card .project-inline-field:nth-child(odd){border-right:1px solid #e5eaf0}
html[data-theme="light"] .project-inline-description{
  margin:0 14px 14px;padding:10px 11px;border:1px solid #e5eaf0;border-radius:8px;background:#ffffff;cursor:text;
}
html[data-theme="light"] .project-inline-description:hover{border-color:#465461}
html[data-theme="light"] .project-inline-description span{
  display:block;color:#64748b;font-size:9px;margin-bottom:5px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;
}
html[data-theme="light"] .project-inline-description b{
  display:block;color:#cbd3dc;font-size:11px;line-height:1.45;font-weight:500;
}
html[data-theme="light"] .project-inline-textarea{min-height:70px;resize:vertical}
html[data-theme="light"] .project-inline-field.readonly{cursor:default}
html[data-theme="light"] .project-inline-field.readonly i{display:none}

/* Create-project editor */
html[data-theme="light"] .project-editor{width:min(920px,92vw)}
html[data-theme="light"] .project-editor-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px;
}
html[data-theme="light"] .project-editor-head h2{margin:2px 0 4px;color:#f3f6f9}
html[data-theme="light"] .project-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html[data-theme="light"] .project-editor-section{
  border:1px solid #d8e0e8;border-radius:8px;background:#ffffff;padding:12px;
}
html[data-theme="light"] .project-editor-full{grid-column:1/-1}
html[data-theme="light"] .project-editor-section-title{
  color:#b4bfca;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;
}
html[data-theme="light"] .project-editor-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
html[data-theme="light"] .project-editor-fields label,
html[data-theme="light"] .project-editor-full label{display:block;color:#64748b;font-size:10px}
html[data-theme="light"] .project-editor-fields input,
html[data-theme="light"] .project-editor-fields select,
html[data-theme="light"] .project-editor-full textarea{
  margin-top:4px;width:100%;box-sizing:border-box;
}
@media(max-width:900px){
  html[data-theme="light"] .project-editor-grid,
  html[data-theme="light"] .project-editor-fields{grid-template-columns:1fr}
  html[data-theme="light"] .project-editor-full{grid-column:auto}
}

html[data-theme="light"] .project-inline-period-editor{
  display:grid;grid-template-columns:1fr .7fr auto 1fr .7fr auto;gap:4px;align-items:center;
}
html[data-theme="light"] .project-inline-period-editor input{
  min-width:0;background:#10151a;border:1px solid #43515e;color:#17212b;border-radius:5px;padding:5px 6px;font-size:10px;
}
html[data-theme="light"] .project-inline-period-editor span{color:#64748b;text-align:center}
html[data-theme="light"] .project-inline-save{
  border:1px solid #5a3b22;background:#ff6a00;color:#fff;border-radius:5px;padding:5px 7px;cursor:pointer;font-weight:800;
}
@media(max-width:1200px){
  html[data-theme="light"] .project-inline-period-editor{grid-template-columns:1fr 1fr}
  html[data-theme="light"] .project-inline-period-editor span{display:none}
}

/* Beta 3.78 — project workflow: direct editing, no intermediate edit modal */
html[data-theme="light"] .project-inline-hint{font-size:9px;color:#697582;margin-left:8px;opacity:.8}
html[data-theme="light"] .project-create-page{max-width:1180px;margin:0 auto;padding-bottom:28px}
html[data-theme="light"] .project-create-topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:14px}
html[data-theme="light"] .project-create-topbar h1{margin:2px 0 3px}
html[data-theme="light"] .project-create-actions{display:flex;gap:8px;align-items:center}
html[data-theme="light"] .project-create-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html[data-theme="light"] .project-create-card{padding:0;overflow:hidden}
html[data-theme="light"] .project-create-main{grid-column:1/-1}
html[data-theme="light"] .project-create-full{grid-column:1/-1;padding-bottom:14px}
html[data-theme="light"] .project-create-card-head{padding:13px 15px;border-bottom:1px solid #27303a;background:#ffffff}
html[data-theme="light"] .project-create-card-head h2{margin:0;font-size:14px}
html[data-theme="light"] .project-create-card-head span{display:block;color:#788592;font-size:10px;margin-top:3px}
html[data-theme="light"] .project-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
html[data-theme="light"] .project-create-grid label{padding:11px 13px;color:#84909c;font-size:10px;border-bottom:1px solid #e5eaf0}
html[data-theme="light"] .project-create-grid label:nth-child(odd){border-right:1px solid #e5eaf0}
html[data-theme="light"] .project-create-grid label.span-2{grid-column:1/-1;border-right:0}
html[data-theme="light"] .project-create-grid input,html[data-theme="light"] .project-create-grid select{display:block;width:100%;box-sizing:border-box;margin-top:5px;background:#10151a;border:1px solid transparent;border-bottom-color:#3a4652;color:#eef2f5;padding:7px 3px;border-radius:3px;outline:0}
html[data-theme="light"] .project-create-grid input:focus,html[data-theme="light"] .project-create-grid select:focus{border-color:#ff6a00;box-shadow:0 0 0 2px rgba(255,106,0,.1)}
html[data-theme="light"] .project-create-card>textarea{margin:13px;width:calc(100% - 26px);box-sizing:border-box;background:#10151a;color:#eef2f5;border:1px solid #35414d;border-radius:5px;padding:9px;resize:vertical;outline:0}
html[data-theme="light"] .project-create-card>textarea:focus{border-color:#ff6a00}
html[data-theme="light"] .project-color-field{display:flex;align-items:center;gap:8px;margin-top:5px;color:#aeb8c2}
html[data-theme="light"] .project-color-field input{width:35px!important;height:27px!important;padding:0!important;border:0!important;box-shadow:none!important;margin:0!important}
html[data-theme="light"] .project-contact-primary{padding:10px 11px;border-bottom:1px solid #e5eaf0;grid-column:1/-1;cursor:text}
html[data-theme="light"] .project-contact-primary span{display:block;color:#64748b;font-size:9px;margin-bottom:4px}
html[data-theme="light"] .project-contact-primary b{color:#25313d;font-size:12px}
@media(max-width:900px){html[data-theme="light"] .project-create-layout{grid-template-columns:1fr}html[data-theme="light"] .project-create-main,html[data-theme="light"] .project-create-full{grid-column:auto}html[data-theme="light"] .project-create-topbar{align-items:flex-start;flex-direction:column}}

html[data-theme="light"] .project-overview-loading{
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:#e8edf2;border:1px solid #28313a;border-radius:10px;background:#ffffff;
}
html[data-theme="light"] .project-overview-loading span{font-size:12px;color:#8d99a6}
html[data-theme="light"] .loading-spinner{width:22px;height:22px;border:2px solid #35404b;border-top-color:#ff6a00;border-radius:50%;animation:showarrowSpin .7s linear infinite}
@keyframes showarrowSpin{to{transform:rotate(360deg)}}




/* Beta 4.17 — final light project readability, geometry comes from mirrored rules above. */
html[data-theme="light"] .project-rentman-head,
html[data-theme="light"] .project-workspace-head,
html[data-theme="light"] .project-rentman-main-grid .card,
html[data-theme="light"] .project-rentman-bottom-grid .card,
html[data-theme="light"] .project-kpi,
html[data-theme="light"] #projectTabContent .card,
html[data-theme="light"] .project-inline-section{
  background:#fff!important;
  color:#17212b!important;
  border-color:#d8e0e8!important;
}
html[data-theme="light"] .project-title-line h1,
html[data-theme="light"] .project-card-heading h2,
html[data-theme="light"] #projectTabContent .card h2,
html[data-theme="light"] .project-inline-field b,
html[data-theme="light"] .project-meta-strip b,
html[data-theme="light"] .project-info-table b{
  color:#17212b!important;
}
html[data-theme="light"] .project-meta-strip span,
html[data-theme="light"] .project-meta-sub,
html[data-theme="light"] .project-card-heading .muted,
html[data-theme="light"] #projectTabContent .card .muted,
html[data-theme="light"] .project-inline-field span,
html[data-theme="light"] .project-info-table span{
  color:#64748b!important;
}
html[data-theme="light"] .project-rentman-tab,
html[data-theme="light"] .project-workspace-tabs .project-tab{
  color:#52606d!important;
}
html[data-theme="light"] .project-rentman-tab.active,
html[data-theme="light"] .project-workspace-tabs .project-tab.active{
  color:#17212b!important;
}
html[data-theme="light"] .project-inline-field:hover,
html[data-theme="light"] .next-task-row:hover{
  background:#f8fafc!important;
}


/* ================================================================
   Beta 4.17 — PROJECTS / RENTMAN-INSPIRED WORKSPACE
   Compact, data-first, flatter surfaces. Same geometry in both themes.
   ================================================================ */

:root{
  --rm-radius:6px;
  --rm-radius-sm:4px;
  --rm-row-h:48px;
}

/* Project list: replace floating cards with a dense operational table. */
.project-cards{
  display:block!important;
  gap:0!important;
}
.rm-project-table{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--rm-radius);
  overflow:hidden;
  background:var(--panel);
}
.rm-project-row{
  display:grid;
  grid-template-columns:minmax(280px,2.3fr) minmax(120px,.8fr) minmax(160px,1.15fr) 80px 80px 80px 28px;
  align-items:center;
  min-height:var(--rm-row-h);
  padding:0 12px;
  gap:12px;
  border:0;
  border-bottom:1px solid var(--line);
  width:100%;
  text-align:left;
  box-sizing:border-box;
}
.rm-project-row:last-child{border-bottom:0}
.rm-project-head{
  min-height:34px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.rm-project-data{
  appearance:none;
  cursor:pointer;
  color:var(--text);
  background:var(--panel);
  font:inherit;
  transition:background .12s ease;
}
.rm-project-data:hover{background:var(--panel-2)}
.rm-project-name{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.rm-project-name b{
  font-size:13px;
  line-height:1.2;
  color:var(--text);
}
.rm-project-name small{
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
}
.rm-project-data>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.rm-status-dot{
  width:7px;height:7px;border-radius:50%;
  display:inline-block;
  background:#2cc970;
  margin-right:7px;
}
.rm-project-open{
  font-size:22px!important;
  color:var(--muted);
  text-align:right;
}

/* Filters become a narrow Rentman-like toolbar. */
.project-filters{
  display:grid!important;
  grid-template-columns:minmax(300px,1fr) 190px!important;
  gap:8px!important;
  margin:12px 0!important;
}
.project-filters input,.project-filters select{
  height:36px!important;
  border-radius:var(--rm-radius-sm)!important;
  font-size:12px!important;
}

/* KPI summary is a single compact strip, not six floating tiles. */
.project-list-summary,
.project-rentman-kpis{
  display:grid!important;
  gap:0!important;
  border:1px solid var(--line);
  border-radius:var(--rm-radius);
  overflow:hidden;
  background:var(--panel);
}
.project-list-summary{grid-template-columns:repeat(4,1fr)!important}
.project-rentman-kpis{grid-template-columns:repeat(6,1fr)!important;margin:10px 0!important}
.project-list-summary .project-kpi,
.project-rentman-kpis .project-kpi{
  min-height:56px!important;
  border:0!important;
  border-right:1px solid var(--line)!important;
  border-radius:0!important;
  padding:8px 12px!important;
  box-shadow:none!important;
  background:var(--panel)!important;
}
.project-list-summary .project-kpi:last-child,
.project-rentman-kpis .project-kpi:last-child{border-right:0!important}
.project-kpi b{font-size:17px!important;line-height:1!important}
.project-kpi small{font-size:var(--sa-text-label)!important;text-transform:uppercase;letter-spacing:.04em}

/* Project header: flatter, tighter and more operational. */
.project-rentman-head,
.project-workspace-head{
  border-radius:var(--rm-radius)!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:hidden;
}
.project-rentman-crumbs{
  padding:9px 12px 0!important;
  font-size:var(--sa-text-label)!important;
}
.project-rentman-title-row{
  padding:7px 12px 11px!important;
  border-bottom:1px solid var(--line);
}
.project-title-line{gap:8px!important}
.project-title-line h1{
  font-size:20px!important;
  letter-spacing:-.025em!important;
  line-height:1.15!important;
}
.project-status-pill{
  border-radius:999px!important;
  font-size:9px!important;
  padding:3px 7px!important;
}
.rm-project-subline{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}
.rm-project-subline>span:not(:last-child)::after{
  content:"";
  display:inline-block;
  width:1px;height:10px;
  background:var(--line);
  margin-left:10px;
  vertical-align:-1px;
}
.project-inline-hint{font-size:var(--sa-text-label)!important}

/* Meta strip is truly a single data strip. */
.project-meta-strip{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  padding:0 12px!important;
  gap:0!important;
  border-bottom:1px solid var(--line)!important;
}
.project-meta-strip>div{
  padding:8px 10px!important;
  min-height:45px!important;
  border-right:1px solid var(--line)!important;
}
.project-meta-strip>div:first-child{padding-left:0!important}
.project-meta-strip>div:last-child{border-right:0!important}
.project-meta-strip span{
  display:block!important;
  font-size:8px!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
  margin-bottom:2px!important;
}
.project-meta-strip b{
  font-size:10px!important;
  line-height:1.25!important;
}
.project-meta-sub{font-size:var(--sa-text-label)!important;margin-top:1px!important}

/* Tabs: thin bar, almost no decoration. */
.project-rentman-tabs,
.project-workspace-tabs{
  min-height:38px!important;
  padding:0 8px!important;
  gap:0!important;
  overflow-x:auto!important;
  border:0!important;
}
.project-rentman-tab,
.project-workspace-tab{
  min-height:38px!important;
  padding:0 10px!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:2px solid transparent!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
.project-rentman-tab.active,
.project-workspace-tab.active{
  border-bottom-color:#ff6a00!important;
  background:transparent!important;
}

/* Overview cards become flatter, denser panels. */
.project-rentman-main-grid{
  gap:8px!important;
}
.project-rentman-bottom-grid{
  gap:8px!important;
  margin-top:8px!important;
}
.project-rentman-main-grid>.card,
.project-rentman-bottom-grid>.card,
#projectOperationsSummary>.card{
  border-radius:var(--rm-radius)!important;
  box-shadow:none!important;
}
.project-card-heading{
  min-height:38px!important;
  padding:9px 10px!important;
  border-bottom:1px solid var(--line);
}
.project-card-heading h2{
  font-size:12px!important;
  margin:0!important;
}
.project-card-heading .muted{
  font-size:var(--sa-text-label)!important;
  margin-top:1px!important;
}

/* Inline project information: table-like fields rather than mini cards. */
.project-info-card{padding:0!important}
.project-info-card>.project-card-heading{margin:0!important}
.project-inline-section{
  margin:0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
}
.project-inline-section:last-of-type{border-bottom:0!important}
.project-inline-section-title{
  padding:7px 10px!important;
  font-size:8px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  background:var(--panel-2)!important;
  border-bottom:1px solid var(--line)!important;
}
.project-inline-grid{
  gap:0!important;
}
.project-inline-field,
.project-contact-primary{
  min-height:43px!important;
  padding:7px 9px!important;
  border-radius:0!important;
  border:0!important;
  border-right:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--panel)!important;
}
.project-inline-field span,
.project-contact-primary span{
  font-size:var(--sa-text-label)!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
.project-inline-field b,
.project-contact-primary b{
  font-size:var(--sa-text-label)!important;
  line-height:1.25!important;
}
.project-inline-field i{opacity:.35!important;font-size:9px!important}
.project-inline-description{
  margin:0!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  border-radius:0!important;
  padding:8px 10px!important;
}
.project-inline-description span{
  font-size:var(--sa-text-label)!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}
.project-inline-description b{font-size:var(--sa-text-label)!important}

/* Buttons: smaller, squared-off business UI. */
.project-rentman-actions .primary,
.project-card-heading .secondary.small{
  border-radius:var(--rm-radius-sm)!important;
}
.project-rentman-actions .primary{
  min-height:32px!important;
  padding:0 11px!important;
  font-size:11px!important;
}

/* Keep light and dark geometry identical. */
html[data-theme="light"] .project-rentman-head,
html[data-theme="dark"] .project-rentman-head,
html[data-theme="light"] .project-rentman-main-grid,
html[data-theme="dark"] .project-rentman-main-grid,
html[data-theme="light"] .project-rentman-kpis,
html[data-theme="dark"] .project-rentman-kpis{
  box-sizing:border-box!important;
}

@media(max-width:1100px){
  .rm-project-row{grid-template-columns:minmax(220px,2fr) 110px 150px 60px 60px 60px 22px}
  .project-meta-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .rm-project-head{display:none}
  .rm-project-row.rm-project-data{
    grid-template-columns:1fr auto!important;
    min-height:auto;
    padding:10px 12px;
  }
  .rm-project-row.rm-project-data>span:nth-child(n+3):nth-child(-n+6){display:none}
  .project-list-summary{grid-template-columns:repeat(2,1fr)!important}
  .project-rentman-kpis{grid-template-columns:repeat(2,1fr)!important}
  .project-meta-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* ================================================================
   Beta 4.17 — CONTACTEN / LOCATIES
   ================================================================ */
.crm-page{display:flex;flex-direction:column;gap:10px}
.crm-toolbar{margin-bottom:0!important}
.crm-toolbar-actions{display:flex;gap:7px;align-items:center}
.crm-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);min-height:40px;align-items:flex-end}
.crm-tabs button{appearance:none;border:0;background:transparent;color:var(--muted);padding:0 14px;height:40px;border-bottom:2px solid transparent;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.crm-tabs button.active{color:var(--text);border-bottom-color:#ff6a00}
.crm-tabs button span{display:inline-flex;min-width:19px;height:18px;padding:0 5px;margin-left:5px;align-items:center;justify-content:center;border-radius:9px;background:var(--panel-2);color:var(--muted);font-size:9px}
.crm-filterbar{display:grid;grid-template-columns:1fr auto;gap:8px}.crm-filterbar input{height:36px}
.crm-table{width:100%;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.crm-row{display:grid;grid-template-columns:minmax(220px,1.8fr) minmax(180px,1.4fr) minmax(140px,1fr) minmax(130px,1fr) 80px 80px 24px;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 11px;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);text-align:left}
.crm-contact-table .crm-row,.crm-location-table .crm-row{grid-template-columns:minmax(180px,1.4fr) minmax(160px,1.2fr) minmax(150px,1.3fr) minmax(120px,1fr) minmax(120px,1fr) minmax(190px,1.5fr) 24px}
.crm-row:last-child{border-bottom:0}.crm-head{min-height:34px;background:var(--panel-2);color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.crm-data{appearance:none;background:var(--panel);color:var(--text);font:inherit;cursor:pointer;transition:background .12s ease}.crm-data:hover{background:var(--panel-2)}
.crm-data>span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crm-primary{display:flex;flex-direction:column}.crm-primary b{font-size:12px;color:var(--text)}.crm-primary small{font-size:9px;color:var(--muted);margin-top:2px}.crm-arrow{text-align:right;color:var(--muted);font-size:20px!important}
.crm-editor{width:min(900px,92vw)}.crm-editor>h2{margin:4px 0 12px}
.crm-form-section{border:1px solid var(--line);border-radius:6px;background:var(--panel);margin-bottom:10px;overflow:hidden}
.crm-form-section h3{margin:0;padding:9px 11px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.crm-form-section>textarea{width:calc(100% - 22px);margin:10px 11px}
.crm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.crm-form-grid label{display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;color:var(--muted);font-weight:700}
.crm-form-grid label:nth-child(even){border-right:0}.crm-form-grid label.span-2{grid-column:1/-1;border-right:0}.crm-form-grid input,.crm-form-grid select{height:34px}
.crm-form-grid .crm-check{display:flex;flex-direction:row;align-items:center;font-size:11px;color:var(--text)}.crm-form-grid .crm-check input{height:auto;width:auto}
@media(max-width:950px){.crm-row{grid-template-columns:minmax(200px,1.6fr) minmax(150px,1.1fr) 120px 110px 60px 60px 20px}.crm-contact-table .crm-row,.crm-location-table .crm-row{grid-template-columns:minmax(180px,1.5fr) minmax(150px,1.2fr) minmax(150px,1.2fr) minmax(170px,1.4fr) 20px}.crm-contact-table .crm-row>span:nth-child(4),.crm-contact-table .crm-row>span:nth-child(5),.crm-location-table .crm-row>span:nth-child(4),.crm-location-table .crm-row>span:nth-child(5){display:none}}
@media(max-width:700px){.crm-toolbar{align-items:flex-start!important}.crm-toolbar-actions{flex-wrap:wrap}.crm-head{display:none}.crm-row.crm-data{grid-template-columns:1fr auto!important;padding:10px 11px}.crm-data>span:not(:first-child):not(:last-child){display:none}.crm-form-grid{grid-template-columns:1fr}.crm-form-grid label{grid-column:1!important;border-right:0}}


/* Beta 4.17 — project relation selectors */
.project-relation-select{
  cursor:pointer!important;
  position:relative;
}
.project-relation-select:hover{
  background:var(--panel-2)!important;
}
.project-relation-select>i{
  margin-left:auto;
  opacity:.6;
  font-size:11px;
  font-style:normal;
}
.project-contact-primary.project-relation-select{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.project-contact-primary.project-relation-select>span,
.project-contact-primary.project-relation-select>b{
  display:block;
}
.project-contact-primary.project-relation-select>b{
  flex:1;
}
.project-relation-input{
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  padding:3px 7px!important;
  font-size:var(--sa-text-label)!important;
}
.project-inline-field.readonly{
  cursor:default!important;
}


/* Beta 4.17 — CRM modals: fit completely inside the viewport.
   The screenshot showed the client form becoming a narrow/tall column
   with its right-hand fields clipped. */
.crm-modal{
  width:min(760px, calc(100vw - 48px))!important;
  max-width:760px!important;
  max-height:calc(100vh - 48px)!important;
  overflow:hidden!important;
}
.crm-modal .modal-body{
  max-height:calc(100vh - 150px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.crm-form{
  width:100%!important;
  box-sizing:border-box!important;
}
.crm-form-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.crm-form-grid>label{
  min-width:0!important;
  width:auto!important;
}
.crm-form-grid input,
.crm-form-grid select,
.crm-form-grid textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.crm-form-grid .span-2{
  grid-column:1 / -1!important;
}
@media (max-width:720px){
  .crm-modal{
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
  }
  .crm-modal .modal-body{
    max-height:calc(100vh - 126px)!important;
  }
  .crm-form-grid{
    grid-template-columns:1fr!important;
  }
  .crm-form-grid .span-2{
    grid-column:auto!important;
  }
}

.modal:has(.crm-form){width:min(760px,calc(100vw - 48px))!important;max-width:760px!important;max-height:calc(100vh - 48px)!important;overflow:hidden!important}.modal:has(.crm-form) .modal-body{max-height:calc(100vh - 150px)!important;overflow:auto!important}


/* ================================================================
   Beta 4.17 — definitive CRM popup sizing fix
   The CRM content lives directly inside .modal as .crm-editor.
   ================================================================ */
.modal.crm-modal,
.modal:has(> .crm-editor){
  width:min(900px, calc(100vw - 64px))!important;
  max-width:900px!important;
  max-height:calc(100dvh - 48px)!important;
  padding:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

.modal.crm-modal > .crm-editor,
.modal:has(> .crm-editor) > .crm-editor{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding:20px 22px 0!important;
}

.modal.crm-modal .crm-form-section,
.modal:has(> .crm-editor) .crm-form-section{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.modal.crm-modal .crm-form-grid,
.modal:has(> .crm-editor) .crm-form-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  width:100%!important;
  max-width:100%!important;
}

.modal.crm-modal .crm-form-grid label,
.modal:has(> .crm-editor) .crm-form-grid label{
  min-width:0!important;
  overflow:hidden!important;
}

.modal.crm-modal .crm-form-grid input,
.modal.crm-modal .crm-form-grid select,
.modal.crm-modal .crm-form-section textarea,
.modal:has(> .crm-editor) .crm-form-grid input,
.modal:has(> .crm-editor) .crm-form-grid select,
.modal:has(> .crm-editor) .crm-form-section textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.modal.crm-modal .form-actions,
.modal:has(> .crm-editor) .form-actions{
  position:sticky!important;
  bottom:0!important;
  margin:12px -22px 0!important;
  padding:12px 22px!important;
  background:var(--panel)!important;
  border-top:1px solid var(--line)!important;
  z-index:5!important;
}

@media(max-width:720px){
  .modal.crm-modal,
  .modal:has(> .crm-editor){
    width:calc(100vw - 24px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 24px)!important;
  }
  .modal.crm-modal .crm-form-grid,
  .modal:has(> .crm-editor) .crm-form-grid{
    grid-template-columns:1fr!important;
  }
}

/* Beta 4.17 - CRM modal hard override.
   modal() returns the inner .modal; force dimensions inline-compatible. */
body .modal-bg > .modal.crm-modal{
  width:900px!important;
  max-width:calc(100vw - 80px)!important;
  height:auto!important;
  max-height:calc(100vh - 60px)!important;
  overflow:auto!important;
}
body .modal-bg > .modal.crm-modal > .crm-editor{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body .modal-bg > .modal.crm-modal .crm-form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
}
body .modal-bg > .modal.crm-modal .crm-form-grid > label{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
@media(max-width:760px){
 body .modal-bg > .modal.crm-modal{width:calc(100vw - 24px)!important;max-width:none!important}
 body .modal-bg > .modal.crm-modal .crm-form-grid{grid-template-columns:1fr!important}
}

/* Beta 4.17 — contact persons belong to clients, not as standalone CRM tab */
#crmTabContacts,
[data-crm-tab="contacts"],
.crm-tab[data-tab="contacts"],
button[onclick*="'contacts'"][class*="crm-tab"]{
  display:none!important;
}
.crm-client-contacts{
  border-top:1px solid var(--line);
  padding:10px 14px 12px;
  background:color-mix(in srgb,var(--panel) 92%,var(--bg));
}
.crm-client-contacts-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:8px;
}
.crm-client-contact-row{
  display:grid;grid-template-columns:minmax(140px,1.3fr) minmax(150px,1fr) minmax(170px,1.2fr) auto;
  gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line);
}
.crm-client-contact-row:first-of-type{border-top:0}
.crm-client-contact-name{font-weight:700}
.crm-client-contact-meta{color:var(--muted);font-size:12px}
@media(max-width:760px){
 .crm-client-contact-row{grid-template-columns:1fr}
}


/* Beta 4.17 — contactpersonen hangen onder de klant */
.crm-linked-contacts{overflow:hidden}
.crm-linked-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.crm-linked-heading h3{
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.crm-linked-list{width:100%}
.crm-linked-row{
  appearance:none;
  display:grid;
  grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr) minmax(130px,1fr) minmax(190px,1.35fr) 24px;
  width:100%;
  min-height:44px;
  padding:7px 10px;
  gap:10px;
  align-items:center;
  border:0;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.crm-linked-row:last-child{border-bottom:0}
.crm-linked-row:hover{background:var(--panel-2)}
.crm-linked-row>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}
.crm-linked-name{display:flex;flex-direction:column}
.crm-linked-name b{font-size:11px}
.crm-linked-name small{font-size:8px;color:var(--muted);margin-top:2px}
.crm-linked-empty{padding:14px!important}
@media(max-width:760px){
  .crm-linked-row{grid-template-columns:1fr 24px}
  .crm-linked-row>span:nth-child(2),
  .crm-linked-row>span:nth-child(3),
  .crm-linked-row>span:nth-child(4){display:none}
}
\n/* Beta 4.17 - uitgebreid klantdossier */\nbody .modal-bg > .modal.crm-client-modal{width:min(1120px,calc(100vw - 56px))!important;max-width:1120px!important}\n.crm-client-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:2px 0 14px}.crm-client-identity{display:flex;align-items:center;gap:14px}.crm-logo-box{width:68px;height:68px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);cursor:pointer}.crm-logo-box img{width:100%;height:100%;object-fit:contain;background:#fff}.crm-logo-box span{font-size:23px}.crm-logo-box small{font-size:8px}.crm-client-stats{display:flex;gap:8px}.crm-client-stats span{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:9px;color:var(--muted)}.crm-client-stats b{color:var(--text);font-size:13px;margin-right:3px}.crm-record-tabs{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -22px 14px;padding:0 22px}.crm-record-tabs button{height:42px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}.crm-record-tabs button.active{color:var(--text);border-bottom-color:#ff6a00}.crm-client-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px}.crm-client-side{display:flex;flex-direction:column;gap:10px}.crm-side-widget{border:1px solid var(--line);background:var(--panel);border-radius:7px;overflow:hidden}.crm-widget-head{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:10px}.crm-widget-head button{border:0;background:transparent;color:var(--accent,#ff6a00);font-size:16px;cursor:pointer}.crm-mini-row,.crm-note{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;font-size:9px}.crm-note{display:flex;flex-direction:column}.crm-note small,.crm-mini-row small{color:var(--muted)}.crm-doc-row{display:block;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--text);font-size:9px;text-decoration:none}.crm-doc-row:hover{background:var(--panel-2)}.crm-tab-panel{min-height:380px}.crm-panel-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.crm-panel-toolbar h3{margin:0}.crm-panel-toolbar p{margin:3px 0 0}.crm-contact-list-head,.crm-contact-list-row{display:grid;grid-template-columns:1.3fr 1fr .9fr .9fr 1.4fr;gap:10px;align-items:center}.crm-contact-list-head{padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);font-size:8px;text-transform:uppercase;color:var(--muted)}.crm-contact-list-row{width:100%;padding:10px;border:0;border-bottom:1px solid var(--line);background:var(--panel);color:var(--text);text-align:left;cursor:pointer}.crm-contact-list-row:hover{background:var(--panel-2)}.crm-contact-list-row>span{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crm-contact-list-row>span:first-child{display:flex;flex-direction:column}.crm-contact-list-row small{color:var(--muted)}.crm-percent-input{display:flex;align-items:center;gap:5px}.crm-percent-input input{flex:1}.crm-project-grid{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:7px;overflow:hidden}.crm-project-grid button{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:10px;border:0;border-bottom:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.crm-project-grid button:hover{background:var(--panel-2)}.crm-project-grid small{display:block;color:var(--muted);margin-top:2px}.crm-project-date{font-size:9px;color:var(--muted)}.crm-invoice-table{border:1px solid var(--line);border-radius:7px;overflow:hidden}.crm-invoice-row{display:grid;grid-template-columns:1.2fr 1.3fr .8fr .8fr .8fr .7fr;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line);align-items:center;font-size:9px}.crm-invoice-row.head{background:var(--panel-2);text-transform:uppercase;font-size:8px;color:var(--muted);font-weight:700}.crm-warning-section{border-color:rgba(255,170,0,.35)!important}.crm-warning-section h3{color:#d69200}@media(max-width:900px){.crm-client-layout{grid-template-columns:1fr}.crm-client-side{display:grid;grid-template-columns:repeat(3,1fr)}.crm-client-stats{display:none}}@media(max-width:700px){body .modal-bg > .modal.crm-client-modal{width:calc(100vw - 20px)!important}.crm-record-tabs{overflow-x:auto}.crm-record-tabs button{white-space:nowrap}.crm-client-side{grid-template-columns:1fr}.crm-contact-list-head{display:none}.crm-contact-list-row{grid-template-columns:1fr}.crm-contact-list-row>span:not(:first-child){display:none}.crm-invoice-row{grid-template-columns:1fr 1fr}.crm-invoice-row>*:nth-child(2),.crm-invoice-row>*:nth-child(4){display:none}}\n
/* Beta 4.17 — Contacten list mirrors the dense Rentman column layout */
.rm-contacts-page{display:flex;flex-direction:column;gap:12px;min-width:0}
.rm-contacts-titlebar{display:flex;align-items:center;justify-content:space-between;gap:20px}.rm-contacts-titlebar h2{font-size:20px;margin:0}.rm-help{display:inline-flex;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;font-size:10px;color:var(--muted)}
.rm-contacts-title-actions,.rm-controls-right{display:flex;gap:8px;align-items:center}.rm-contacts-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.rm-folder-btn{height:34px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--text);padding:0 12px;display:flex;gap:10px;align-items:center}.rm-search-wrap{height:34px;border:1px solid var(--line);border-radius:4px;background:var(--panel);display:flex;align-items:center;padding:0 8px}.rm-search-wrap input{border:0!important;background:transparent!important;height:30px!important;min-width:180px;box-shadow:none!important}.rm-contact-selection{height:38px;background:var(--panel-2);border:1px solid var(--line);padding:0 12px;align-items:center;gap:18px;font-size:11px}.rm-contact-selection .ghost{border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:700}
.rm-contact-table{border:1px solid var(--line);background:var(--panel);overflow:auto;min-height:430px}.rm-contact-row{display:grid;grid-template-columns:38px minmax(240px,1.7fr) minmax(180px,1.25fr) minmax(150px,1fr) minmax(170px,1.15fr) minmax(180px,1.2fr) minmax(130px,.85fr);align-items:center;min-width:1100px;border-bottom:1px solid var(--line)}.rm-contact-head{height:36px;background:var(--panel-2);font-size:9px;font-weight:750}.rm-contact-head>span{padding:0 9px;border-right:1px solid var(--line);height:100%;display:flex;align-items:center}.rm-contact-data{min-height:40px;font-size:10px}.rm-contact-data>span,.rm-contact-open{padding:0 9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-contact-data:hover{background:var(--panel-2)}.rm-contact-open{height:40px;text-align:left;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer}.rm-contact-open:hover{text-decoration:underline}.rm-check{justify-content:center!important}.rm-check input{width:14px;height:14px}
.crm-import-result{width:min(720px,90vw);padding:4px}.crm-import-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}.crm-import-kpis span{padding:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:5px}.crm-import-kpis b{font-size:18px;display:block}
.client-warning-popup{width:min(620px,calc(100vw - 40px))!important}.client-warning-modal{padding:20px;display:grid;grid-template-columns:48px 1fr;gap:14px}.client-warning-icon{width:42px;height:42px;border-radius:50%;background:#ff9f0a;color:#111;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900}.client-warning-text{margin-top:12px;padding:13px;border:1px solid color-mix(in srgb,#ff9f0a 55%,var(--line));background:color-mix(in srgb,#ff9f0a 12%,var(--panel));border-radius:5px;line-height:1.5}.client-warning-modal .form-actions{grid-column:1/-1}
@media(max-width:760px){.rm-contacts-titlebar,.rm-contacts-controls{align-items:flex-start;flex-direction:column}.rm-controls-right{width:100%;flex-wrap:wrap}.rm-search-wrap{flex:1}.crm-import-kpis{grid-template-columns:1fr}}


/* Beta 4.17 */
.rm-contact-data.clickable{cursor:pointer}
.rm-contact-data.clickable:hover{background:var(--panel-2)}
.crm-floating-menu{
  position:fixed;z-index:1400;width:240px;padding:6px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);box-shadow:0 14px 35px rgba(0,0,0,.35)
}
.crm-floating-menu>button{
  display:flex;width:100%;border:0;background:transparent;color:var(--text);
  padding:8px 9px;border-radius:4px;font:inherit;font-size:11px;text-align:left;cursor:pointer
}
.crm-floating-menu>button:hover{background:var(--panel-2)}
.crm-menu-empty{padding:9px}
.crm-filter-menu{display:flex;flex-direction:column;gap:9px;padding:6px}
.crm-filter-menu label{display:flex;flex-direction:column;gap:4px;font-size:9px;color:var(--muted);font-weight:700}
.crm-filter-menu select{height:32px}
.crm-filter-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}
body .modal-bg>.modal.crm-import-modal{
  width:min(680px,calc(100vw - 48px))!important;
  max-width:680px!important;
  max-height:calc(100vh - 64px)!important;
  overflow:auto!important
}
.crm-import-dialog,.crm-import-result{width:100%!important;box-sizing:border-box!important;padding:20px 22px 0!important}
.crm-import-kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:16px 0!important}
.crm-import-kpis span{display:flex!important;flex-direction:column!important;gap:3px!important;padding:12px!important;background:var(--panel-2)!important;border:1px solid var(--line)!important;border-radius:5px!important}
.crm-import-kpis b{font-size:20px}
@media(max-width:620px){.crm-import-kpis{grid-template-columns:1fr!important}}


/* Beta 4.17 — expliciet bewerken */
.rm-contact-head-actions,.rm-contact-data-actions{
  grid-template-columns:40px minmax(210px,1.35fr) minmax(180px,1.15fr) minmax(150px,1fr) minmax(150px,1fr) minmax(165px,1fr) minmax(150px,1fr) 42px!important;
}
.rm-row-edit,.crm-contact-edit-btn{
  width:28px;height:28px;display:inline-grid;place-items:center;border:1px solid var(--line);
  border-radius:4px;background:var(--panel-2);color:var(--text);cursor:pointer
}
.rm-row-edit:hover,.crm-contact-edit-btn:hover{border-color:var(--accent);color:var(--accent)}
.crm-contact-list-head-edit,.crm-contact-list-editable{
  grid-template-columns:minmax(180px,1.4fr) minmax(120px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(180px,1.4fr) 42px!important;
}
.crm-contact-list-editable{cursor:pointer}
.crm-contact-list-editable:hover{background:var(--panel-2)}

/* Beta 4.17 — import wizard, sync-stijl */
body .modal-bg>.modal.crm-import-wizard-modal{
  width:min(920px,calc(100vw - 48px))!important;
  max-width:920px!important;
  max-height:calc(100vh - 48px)!important;
  overflow:auto!important;
  padding:0!important;
}
.crm-import-wizard{padding:20px 22px 0}
.crm-sync-steps{
  display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items:center;gap:8px;padding:2px 0 20px;border-bottom:1px solid var(--line);margin-bottom:18px
}
.crm-sync-step{display:flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}
.crm-sync-step span{
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--panel-2);font-size:10px;font-weight:800
}
.crm-sync-step b{font-size:10px}
.crm-sync-step.active{color:var(--text)}
.crm-sync-step.active span{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.crm-sync-step.done{color:var(--success)}
.crm-sync-step.done span{background:color-mix(in srgb,var(--success) 18%,var(--panel));border-color:var(--success);color:var(--success)}
.crm-sync-steps>i{height:1px;background:var(--line);min-width:20px}
.crm-import-working{text-align:center;padding:46px 20px 54px}
.crm-import-spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:crmspin .8s linear infinite}
@keyframes crmspin{to{transform:rotate(360deg)}}
.crm-progress-track{height:6px;background:var(--panel-2);border-radius:99px;overflow:hidden;max-width:480px;margin:22px auto 10px;border:1px solid var(--line)}
.crm-progress-track span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.crm-progress-indeterminate span{width:38%;animation:crmprogress 1.2s ease-in-out infinite}
@keyframes crmprogress{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.crm-import-select-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.crm-import-select-head h2{margin:2px 0 4px}
.crm-import-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.crm-import-group{
  display:grid;grid-template-columns:22px 24px 1fr;gap:8px;align-items:start;padding:12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;cursor:pointer
}
.crm-import-group:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.crm-import-group.disabled{opacity:.42;cursor:not-allowed}
.crm-import-group input{margin-top:4px}
.crm-import-group-check{width:20px;height:20px;display:grid;place-items:center;border-radius:4px;background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent);font-size:10px}
.crm-import-group>span:last-child{display:flex;flex-direction:column;gap:3px}
.crm-import-group b{font-size:11px}
.crm-import-group small{font-size:9px;color:var(--muted);line-height:1.35}
.crm-import-group em{font-size:8px;color:var(--accent);font-style:normal;margin-top:2px}
.crm-import-preview{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:14px 0}
.crm-import-preview-title{display:flex;justify-content:space-between;padding:9px 11px;background:var(--panel-2);font-size:9px}
.crm-import-preview>div:not(.crm-import-preview-title){display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:10px;padding:7px 11px;border-top:1px solid var(--line);font-size:9px}
.crm-import-choice-summary{display:grid;grid-template-columns:12px auto 1fr;gap:7px;align-items:center;padding:10px 12px;border-radius:5px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));font-size:9px}
.crm-import-choice-summary small{color:var(--muted)}
.crm-import-operation-list{display:flex;flex-direction:column;gap:7px;max-width:420px;margin:24px auto 0;text-align:left;font-size:10px;color:var(--muted)}
.crm-import-operation-list span.active{color:var(--text)}
.crm-import-complete{text-align:center;padding:26px 4px 0}
.crm-import-complete-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:color-mix(in srgb,var(--success) 18%,var(--panel));border:1px solid var(--success);color:var(--success);font-size:24px;font-weight:900}
.crm-import-applied{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0;font-size:9px}
.crm-import-applied span{padding:4px 7px;border:1px solid var(--line);border-radius:99px;background:var(--panel-2)}
.crm-import-error{padding:28px 4px 0;text-align:center}
@media(max-width:760px){
  .crm-sync-steps{grid-template-columns:repeat(5,1fr)}
  .crm-sync-steps>i{display:none}
  .crm-sync-step{flex-direction:column;text-align:center;gap:4px}
  .crm-import-group-grid{grid-template-columns:1fr}
  .crm-import-preview>div:not(.crm-import-preview-title){grid-template-columns:1fr}
}


/* Beta 4.17 — importwizard ruimer en selectietegels groter */
body .modal-bg>.modal.crm-import-wizard-modal{
  width:min(1120px,calc(100vw - 56px))!important;
  max-width:1120px!important;
}
.crm-import-wizard{padding:24px 28px 0!important}
.crm-import-group-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.crm-import-group{
  min-height:112px!important;
  grid-template-columns:26px 30px 1fr!important;
  gap:10px!important;
  padding:16px!important;
  border-radius:8px!important;
}
.crm-import-group input{width:17px!important;height:17px!important;margin-top:5px!important}
.crm-import-group-check{width:25px!important;height:25px!important;font-size:12px!important}
.crm-import-group b{font-size:13px!important;line-height:1.2!important}
.crm-import-group small{font-size:var(--sa-text-label)!important;line-height:1.45!important;margin-top:2px!important}
.crm-import-group em{font-size:9px!important;margin-top:5px!important}
.danger-text{color:var(--danger)!important}
.danger-text:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)!important}

/* Geen aparte potloodkolom meer */
.rm-contact-row.rm-contact-head,
.rm-contact-row.rm-contact-data{
  grid-template-columns:40px minmax(210px,1.35fr) minmax(180px,1.15fr) minmax(150px,1fr) minmax(150px,1fr) minmax(165px,1fr) minmax(150px,1fr)!important;
}
.rm-row-edit{display:none!important}

@media(max-width:820px){
  body .modal-bg>.modal.crm-import-wizard-modal{
    width:calc(100vw - 24px)!important;
    max-width:none!important;
  }
  .crm-import-group-grid{grid-template-columns:1fr!important}
}


/* ================================================================
   Beta 4.17 — import popup definitief op de echte .modal
   ================================================================ */
body .modal-bg > .modal.crm-import-wizard-modal{
  width:min(1280px,calc(100vw - 72px))!important;
  max-width:1280px!important;
  min-width:min(980px,calc(100vw - 72px))!important;
  max-height:calc(100vh - 54px)!important;
  overflow:auto!important;
  padding:0!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-wizard{
  padding:26px 32px 0!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group{
  min-height:128px!important;
  padding:18px!important;
  gap:12px!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group b{
  font-size:14px!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group small{
  font-size:11px!important;
  line-height:1.45!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group em{
  font-size:var(--sa-text-label)!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-preview{
  margin-top:20px!important;
}
body .modal-bg > .modal.crm-import-wizard-modal .crm-import-preview > div:not(.crm-import-preview-title){
  padding:9px 13px!important;
  font-size:var(--sa-text-label)!important;
}

/* Klantdossier krijgt ook zijn class nu op de echte .modal. */
body .modal-bg > .modal.crm-client-modal{
  width:min(1180px,calc(100vw - 64px))!important;
  max-width:1180px!important;
  max-height:calc(100vh - 48px)!important;
  overflow:auto!important;
}

/* Klikbare naam duidelijk herkenbaar, zonder potloodkolom. */
.rm-contact-open.crm-client-open{
  cursor:pointer!important;
  text-align:left!important;
}
.rm-contact-open.crm-client-open:hover{
  text-decoration:underline!important;
  color:var(--accent)!important;
}

@media(max-width:1100px){
  body .modal-bg > .modal.crm-import-wizard-modal{
    min-width:0!important;
    width:calc(100vw - 32px)!important;
  }
  body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  body .modal-bg > .modal.crm-import-wizard-modal .crm-import-group-grid{
    grid-template-columns:1fr!important;
  }
}


/* Beta 4.17 — import controle */
.crm-import-warning{
  margin:14px auto;
  max-width:760px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--warning) 55%,var(--line));
  background:color-mix(in srgb,var(--warning) 10%,var(--panel));
  color:var(--text);
  border-radius:6px;
  font-size:10px;
  text-align:left;
}


/* Beta 4.17 — nette verhoudingen CRM bewerkvensters */
body .modal-bg > .modal.crm-client-modal{
  width:min(1360px,calc(100vw - 48px))!important;
  max-width:1360px!important;
  height:min(880px,calc(100dvh - 64px))!important;
  max-height:calc(100dvh - 64px)!important;
  padding:20px 22px 0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body .modal-bg > .modal.crm-client-modal .crm-client-editor{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
body .modal-bg > .modal.crm-client-modal #crmClientTabBody{
  flex:1 1 auto;
  min-height:0;
}
body .modal-bg > .modal.crm-client-modal .crm-client-layout{
  grid-template-columns:minmax(0,1fr) 270px!important;
  gap:14px!important;
}
body .modal-bg > .modal.crm-client-modal .crm-form-section{
  margin-bottom:10px!important;
}
body .modal-bg > .modal.crm-client-modal .form-actions{
  bottom:0!important;
  margin:14px -22px 0!important;
  padding:12px 22px!important;
  border-top:1px solid var(--line)!important;
  background:var(--panel)!important;
}

/* Contactpersoon-editor: breed genoeg voor twee kolommen, niet onnodig hoog. */
body .modal-bg > .modal.crm-contact-person-modal{
  width:min(900px,calc(100vw - 48px))!important;
  max-width:900px!important;
  max-height:calc(100dvh - 72px)!important;
  padding:20px 22px 0!important;
  overflow-y:auto!important;
}
body .modal-bg > .modal.crm-contact-person-modal .form-actions{
  bottom:0!important;
  margin:14px -22px 0!important;
  padding:12px 22px!important;
  border-top:1px solid var(--line)!important;
  background:var(--panel)!important;
}

@media(max-width:900px){
  body .modal-bg > .modal.crm-client-modal{
    width:calc(100vw - 24px)!important;
    height:calc(100dvh - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
  }
  body .modal-bg > .modal.crm-client-modal .crm-client-layout{
    grid-template-columns:1fr!important;
  }
  body .modal-bg > .modal.crm-contact-person-modal{
    width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
  }
}

/* Beta 4.17 — inline klantnotities + waarschuwing bij niet-opgeslagen wijzigingen */
.crm-note-compose{padding:9px 10px;border-top:1px solid var(--line);background:var(--panel-2)}
.crm-note-compose textarea{width:100%;min-height:70px;resize:vertical;margin:0 0 5px}
.crm-note-compose small{display:block;color:var(--muted);line-height:1.35}
.crm-note-pending{border-left:2px solid #ff6a00;background:rgba(255,106,0,.055)}
.crm-note-pending small{color:#ff8a32}
.crm-unsaved-dialog{width:min(520px,calc(100vw - 48px));padding:4px 2px 2px}
.crm-unsaved-dialog h2{margin:5px 0 8px}
.crm-unsaved-dialog p{color:var(--muted);margin:0 0 20px;line-height:1.5}
.crm-unsaved-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}


/* Beta 4.17 — nette popup voor niet-opgeslagen wijzigingen */
body .modal-bg > .modal.crm-unsaved-modal{
  width:min(680px,calc(100vw - 48px))!important;
  max-width:680px!important;
  min-width:0!important;
  padding:24px 26px!important;
  overflow:visible!important;
}
body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-dialog{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-dialog h2{
  margin:6px 0 10px!important;
}
body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-dialog p{
  margin-bottom:22px!important;
}
body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-actions button{
  white-space:nowrap!important;
  min-height:38px!important;
  padding:0 14px!important;
}
@media(max-width:640px){
  body .modal-bg > .modal.crm-unsaved-modal{
    width:calc(100vw - 24px)!important;
    padding:20px!important;
  }
  body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-actions{
    flex-direction:column-reverse!important;
    align-items:stretch!important;
  }
  body .modal-bg > .modal.crm-unsaved-modal .crm-unsaved-actions button{
    width:100%!important;
  }
}


/* Beta 4.17 — klantdossier verhouding en leesbare rechterwidgets */
body .modal-bg > .modal.crm-client-modal .crm-client-layout{
  grid-template-columns:minmax(0,1fr) 340px!important;
  gap:16px!important;
}
body .modal-bg > .modal.crm-client-modal{
  width:min(1400px,calc(100vw - 48px))!important;
  max-width:1400px!important;
}
body .modal-bg > .modal.crm-client-modal .crm-side-widget{
  width:100%!important;
}
body .modal-bg > .modal.crm-client-modal .crm-widget-head{
  min-height:38px!important;
  padding:9px 11px!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 28px!important;
  gap:8px!important;
  align-items:start!important;
  padding:10px 10px 10px 11px!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note-text{
  min-width:0!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note-text span{
  display:block!important;
  font-size:11px!important;
  line-height:1.45!important;
  white-space:normal!important;
  word-break:break-word!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note-text small{
  display:block!important;
  margin-top:4px!important;
  font-size:var(--sa-text-label)!important;
  color:var(--muted)!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note-delete{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid transparent!important;
  border-radius:4px!important;
  background:transparent!important;
  color:var(--muted)!important;
  cursor:pointer!important;
  font-size:16px!important;
  line-height:1!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note-delete:hover{
  color:var(--danger)!important;
  border-color:color-mix(in srgb,var(--danger) 45%,var(--line))!important;
  background:color-mix(in srgb,var(--danger) 9%,transparent)!important;
}
body .modal-bg > .modal.crm-client-modal .crm-note-compose textarea{
  min-height:86px!important;
  font-size:11px!important;
  line-height:1.45!important;
}
body .modal-bg > .modal.crm-client-modal #crmNotesList{
  max-height:330px!important;
  overflow-y:auto!important;
}

@media(max-width:1050px){
  body .modal-bg > .modal.crm-client-modal .crm-client-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
  }
}
@media(max-width:850px){
  body .modal-bg > .modal.crm-client-modal .crm-client-layout{
    grid-template-columns:1fr!important;
  }
}


/* Beta 4.17 — Showarrow bevestigingspopup */
body .modal-bg > .modal.crm-confirm-modal{
  width:min(560px,calc(100vw - 40px))!important;
  max-width:560px!important;
  padding:24px 26px!important;
  overflow:visible!important;
}
.crm-confirm-dialog h2{
  margin:5px 0 8px!important;
  font-size:20px!important;
}
.crm-confirm-dialog p{
  margin:0 0 14px!important;
  color:var(--muted)!important;
  line-height:1.5!important;
}
.crm-confirm-preview{
  padding:11px 12px!important;
  border:1px solid var(--line)!important;
  border-radius:6px!important;
  background:var(--panel-2)!important;
  color:var(--text)!important;
  margin-bottom:18px!important;
  font-size:11px!important;
  line-height:1.45!important;
  max-height:110px!important;
  overflow:auto!important;
}
.crm-confirm-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:9px!important;
}
.crm-confirm-actions .danger{
  background:var(--danger)!important;
  border-color:var(--danger)!important;
  color:#fff!important;
}
.crm-confirm-actions .danger:hover{
  filter:brightness(1.08)!important;
}

/* Bezoekadres klant als volwaardige keuze in project-locatie selector */
.project-location-client-option,
select option[value^="client_visit:"]{
  font-weight:600;
}


/* Beta 4.17 — bezoekadres klant zichtbaar in project-locatiekeuze */
select option[value^="client_visit:"]{
  font-weight:700!important;
}
.project-client-visit-hint{
  color:var(--muted);
  font-size:9px;
}


/* Beta 4.17 — geneste bevestigingspopup blijft boven klantdossier */
.modal-bg.modal-bg-nested{
  z-index:1200!important;
}
.modal-bg.modal-bg-nested > .modal{
  z-index:1201!important;
}
select option[value^="client_visit:"]{
  font-weight:700!important;
}


/* Beta 4.17 — klantopmerking en klantnotities bij projectselectie */
body .modal-bg > .modal.project-client-warning-popup{
  width:min(650px,calc(100vw - 48px))!important;
  max-width:650px!important;
  padding:24px 26px!important;
}
.client-warning-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
}
.client-warning-head h2{
  margin:3px 0 5px;
}
.client-warning-head p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}
.project-client-warning-block{
  border:1px solid color-mix(in srgb,#ff6a00 45%,var(--line));
  background:color-mix(in srgb,#ff6a00 8%,var(--panel));
  border-radius:7px;
  padding:13px 14px;
  margin-bottom:16px;
}
.project-client-warning-label,
.project-client-notes-title{
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.project-client-warning-text{
  font-size:12px;
  line-height:1.5;
}
.project-client-note-list{
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  margin-bottom:18px;
}
.project-client-note-row{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  line-height:1.45;
}
.project-client-note-row:last-child{
  border-bottom:0;
}
.project-client-note-row small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:8px;
}


/* Beta 4.17 — correcte verhoudingen klantinformatie-popup */
body .modal-bg > .modal.project-client-warning-popup{
  width:min(660px,calc(100vw - 48px))!important;
  max-width:660px!important;
  min-height:0!important;
  height:auto!important;
  padding:24px 26px!important;
  overflow:visible!important;
}
body .modal-bg > .modal.project-client-warning-popup .client-warning-modal{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding:0!important;
  width:100%!important;
}
body .modal-bg > .modal.project-client-warning-popup .client-warning-head{
  display:flex!important;
  align-items:flex-start!important;
  gap:14px!important;
  margin:0 0 18px!important;
}
body .modal-bg > .modal.project-client-warning-popup .client-warning-icon{
  flex:0 0 42px!important;
}
body .modal-bg > .modal.project-client-warning-popup .project-client-note-list{
  width:100%!important;
  margin-bottom:18px!important;
}
body .modal-bg > .modal.project-client-warning-popup .crm-confirm-actions{
  width:100%!important;
  display:flex!important;
  justify-content:flex-end!important;
  margin-top:18px!important;
}
body .modal-bg > .modal.project-client-warning-popup #clientWarningOk{
  width:auto!important;
  min-width:110px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 18px!important;
}

/* Permanente klantnotitie naast projectnaam/status, zichtbaar op elk projecttabblad */
.project-title-line{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
}
.project-client-notice{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:min(520px,42vw);
  padding:6px 10px;
  border:1px solid color-mix(in srgb,#ff8a00 48%,var(--line));
  border-radius:6px;
  background:color-mix(in srgb,#ff8a00 9%,var(--panel));
  color:var(--text);
}
.project-client-notice[hidden]{
  display:none!important;
}
.project-client-notice-icon{
  display:grid;
  place-items:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ff8a00;
  color:#111;
  font-weight:900;
  font-size:12px;
}
.project-client-notice-copy{
  display:block;
  min-width:0;
  line-height:1.15;
}
.project-client-notice-copy small{
  display:block;
  color:#ff9a32;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.project-client-notice-copy b{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
}
@media(max-width:900px){
  .project-client-notice{
    max-width:100%;
    width:100%;
  }
}


/* Beta 4.17 — nieuwe tijdlijn editor */
body .modal-bg > .modal.timeline-editor-modal{
  width:min(820px,calc(100vw - 48px))!important;
  max-width:820px!important;
  max-height:calc(100dvh - 56px)!important;
  padding:0!important;
  overflow:auto!important;
}
.timeline-editor{
  width:100%;
}
.timeline-editor-head{
  padding:24px 26px 18px;
  border-bottom:1px solid var(--line);
}
.timeline-editor-head h2{
  margin:4px 0 6px;
  font-size:22px;
}
.timeline-editor-head p{
  margin:0;
  max-width:650px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.timeline-editor-body{
  padding:18px 26px 4px;
  display:grid;
  gap:14px;
}
.timeline-editor-section{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel-2);
  padding:15px;
}
.timeline-editor-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.timeline-editor-section-title>div{
  min-width:0;
}
.timeline-editor-section-title b{
  display:block;
  font-size:12px;
}
.timeline-editor-section-title small{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:2px;
}
.timeline-step{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:50%;
  background:color-mix(in srgb,#ff6a00 18%,var(--panel));
  border:1px solid color-mix(in srgb,#ff6a00 50%,var(--line));
  color:#ff7b1a;
  font-weight:800;
  font-size:10px;
}
.timeline-copy-plan{
  margin-left:auto;
  min-height:32px!important;
  padding:0 11px!important;
  font-size:var(--sa-text-label)!important;
}
.timeline-name-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
}
.timeline-quicknames{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding-bottom:2px;
}
.timeline-chip{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--muted);
  border-radius:999px;
  min-height:30px;
  padding:0 10px;
  font-size:9px;
  cursor:pointer;
}
.timeline-chip:hover{
  border-color:#ff6a00;
  color:var(--text);
}
.timeline-period-editor{
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.timeline-period-side{
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  padding:12px;
}
.timeline-period-label{
  margin-bottom:10px;
}
.timeline-period-label span{
  display:block;
  color:#ff7b1a;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
  margin-bottom:3px;
}
.timeline-period-label b{
  font-size:10px;
}
.timeline-date-time-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  gap:8px;
}
.timeline-period-arrow{
  text-align:center;
  color:var(--muted);
  font-size:20px;
}
.timeline-period-summary{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:11px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}
.timeline-period-summary-icon{
  font-size:17px;
  color:#ff7b1a;
}
.timeline-period-summary small{
  display:block;
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.timeline-period-summary b{
  display:block;
  font-size:9px;
  margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.timeline-time-hint{
  margin-top:8px;
  color:var(--muted);
  font-size:8px;
}
.timeline-editor-error{
  margin:8px 26px 0;
}
.timeline-editor-actions{
  margin:16px 0 0!important;
  padding:13px 26px!important;
  border-top:1px solid var(--line)!important;
  background:var(--panel)!important;
  position:sticky!important;
  bottom:0!important;
  z-index:2;
}
@media(max-width:720px){
  body .modal-bg > .modal.timeline-editor-modal{
    width:calc(100vw - 24px)!important;
  }
  .timeline-name-row{
    grid-template-columns:1fr;
  }
  .timeline-period-editor{
    grid-template-columns:1fr;
  }
  .timeline-period-arrow{
    transform:rotate(90deg);
  }
  .timeline-date-time-row{
    grid-template-columns:1fr 110px;
  }
  .timeline-copy-plan{
    margin-left:0;
  }
  .timeline-editor-section-title{
    flex-wrap:wrap;
  }
}


/* Beta 4.17 — meerdere tijdlijnen vanuit één popup */
.timeline-editor-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.timeline-editor-actions-right{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.timeline-add-another{
  margin-right:auto;
}
.timeline-add-another span{
  color:#ff7b1a;
  font-size:14px;
  line-height:1;
  margin-right:4px;
}
@media(max-width:560px){
  .timeline-editor-actions{
    flex-wrap:wrap!important;
  }
  .timeline-editor-actions-right{
    width:100%;
    justify-content:flex-end;
  }
}


/* Beta 4.17 — tijdlijnmanager: planperiode eerst, alle tijdlijnen zichtbaar */
body .modal-bg > .modal.timeline-manager-modal{
  width:min(980px,calc(100vw - 48px))!important;
  max-width:980px!important;
  max-height:calc(100dvh - 46px)!important;
  padding:0!important;
  overflow:hidden!important;
}
.timeline-manager{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 46px);
}
.timeline-manager-head{
  flex:0 0 auto;
  padding:22px 26px 17px;
  border-bottom:1px solid var(--line);
}
.timeline-manager-head h2{margin:4px 0 5px;font-size:22px}
.timeline-manager-head p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.timeline-manager-body{
  min-height:0;
  overflow:auto;
  padding:17px 26px 20px;
}
.timeline-plan-master{
  border:1px solid color-mix(in srgb,#ff6a00 52%,var(--line));
  border-radius:9px;
  background:color-mix(in srgb,#ff6a00 5%,var(--panel-2));
  padding:15px;
}
.timeline-master-head{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:14px;
}
.timeline-master-number,
.timeline-row-order{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;height:28px;
  border-radius:50%;
  background:#ff6a00;
  color:#111;
  font-size:10px;
  font-weight:900;
}
.timeline-master-head h3{margin:2px 0 3px;font-size:14px}
.timeline-master-head p{margin:0;color:var(--muted);font-size:9px}
.timeline-master-kicker{
  color:#ff7b1a;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}
.timeline-master-badge{
  margin-left:auto;
  border:1px solid color-mix(in srgb,#ff6a00 48%,var(--line));
  border-radius:999px;
  padding:5px 9px;
  color:#ff8a32;
  font-size:8px;
  font-weight:700;
}
.timeline-master-period{
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.timeline-manager-divider{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 1px 10px;
}
.timeline-manager-divider>div{
  display:flex;
  align-items:center;
  gap:9px;
}
.timeline-manager-divider b{display:block;font-size:12px}
.timeline-manager-divider small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.timeline-manager-step{
  display:grid;place-items:center;
  width:25px;height:25px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  font-size:9px;font-weight:800;
}
.timeline-count{
  color:var(--muted);
  font-size:9px;
}
.timeline-manager-rows{
  display:grid;
  gap:9px;
}
.timeline-manager-row{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel-2);
  overflow:hidden;
}
.timeline-manager-row.is-new{
  border-color:color-mix(in srgb,#ff6a00 42%,var(--line));
}
.timeline-row-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.timeline-row-order{
  width:24px;height:24px;flex-basis:24px;
  background:var(--panel-3);
  border:1px solid var(--line);
  color:var(--muted);
}
.timeline-row-title{min-width:0}
.timeline-row-title span{
  display:block;
  color:var(--muted);
  font-size:6px;
  font-weight:900;
  letter-spacing:.11em;
}
.timeline-row-title b{
  display:block;
  font-size:10px;
  margin-top:1px;
}
.timeline-row-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
}
.timeline-new-badge{
  color:#ff8a32;
  font-size:7px;
  font-weight:800;
  border:1px solid color-mix(in srgb,#ff6a00 40%,var(--line));
  border-radius:999px;
  padding:3px 7px;
}
.timeline-row-delete{
  display:grid;place-items:center;
  width:25px;height:25px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:15px;
}
.timeline-row-delete:hover{
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 45%,var(--line));
}
.timeline-row-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  padding:10px 11px 8px;
}
.timeline-row-period{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);
  align-items:end;
  gap:8px;
  padding:0 11px 11px;
}
.timeline-row-period-arrow{
  text-align:center;
  color:var(--muted);
  padding-bottom:9px;
}
.timeline-manager-empty{
  border:1px dashed var(--line);
  border-radius:8px;
  padding:25px;
  text-align:center;
  color:var(--muted);
  font-size:10px;
}
.timeline-manager-actions{
  flex:0 0 auto;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  padding:12px 26px!important;
  border-top:1px solid var(--line)!important;
  background:var(--panel)!important;
}
.timeline-manager-actions .timeline-add-another{margin-right:auto}
@media(max-width:760px){
  body .modal-bg > .modal.timeline-manager-modal{width:calc(100vw - 20px)!important}
  .timeline-master-period,.timeline-row-period{grid-template-columns:1fr}
  .timeline-period-arrow,.timeline-row-period-arrow{transform:rotate(90deg);padding:0}
  .timeline-row-fields{grid-template-columns:1fr}
  .timeline-master-badge{display:none}
}


/* Beta 4.17 — project- en tijdlijnkleuren */
.project-color-field{cursor:pointer}
.project-color-field b{
  display:flex!important;
  align-items:center;
  gap:7px;
}
.project-color-dot{
  display:inline-block;
  width:12px;height:12px;
  flex:0 0 12px;
  border-radius:3px;
  background:var(--project-color,#ff6a00);
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
body .modal-bg > .modal.project-color-modal{
  width:min(540px,calc(100vw - 40px))!important;
  max-width:540px!important;
  padding:23px 25px!important;
}
.project-color-dialog h2{margin:4px 0 6px}
.project-color-dialog>p{margin:0 0 16px;color:var(--muted);font-size:10px;line-height:1.45}
.project-color-current{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:7px;
  margin-bottom:12px;
}
.project-color-current>span{
  width:32px;height:32px;border-radius:7px;
  background:var(--preview);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.project-color-current small{display:block;color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.project-color-current b{display:block;margin-top:2px;font-size:10px}
.sa-color-grid{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.sa-color-swatch{
  width:27px;height:27px;
  padding:0;
  border-radius:6px;
  border:2px solid transparent;
  background:var(--swatch);
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
}
.sa-color-swatch:hover{transform:translateY(-1px)}
.sa-color-swatch.selected{
  border-color:#fff;
  box-shadow:0 0 0 2px var(--swatch), inset 0 0 0 1px rgba(255,255,255,.2);
}
.project-custom-color{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 18px!important;
}
.project-custom-color input[type=color],
.timeline-custom-color{
  width:42px!important;height:30px!important;
  min-height:30px!important;
  padding:2px!important;
  cursor:pointer;
}
.timeline-row-color{
  display:grid;
  grid-template-columns:180px minmax(0,1fr) 48px;
  align-items:center;
  gap:12px;
  padding:0 11px 10px;
}
.timeline-color-label{
  display:block;
  font-size:9px;
  font-weight:800;
}
.timeline-row-color small{
  display:block;
  color:var(--muted);
  font-size:7px;
  margin-top:2px;
  line-height:1.35;
}
.timeline-color-grid{
  gap:5px;
}
.timeline-color-grid .sa-color-swatch{
  width:22px;height:22px;border-radius:5px;
}
.timeline-list-name{
  display:flex;
  align-items:center;
  gap:8px;
}
.timeline-list-name>span{min-width:0}
.timeline-list-color{
  width:10px;height:28px;
  border-radius:3px;
  background:var(--timeline-color,#ff6a00);
  flex:0 0 10px;
}
.gantt-bar.use{
  background:var(--timeline-color,var(--accent))!important;
  border-color:color-mix(in srgb,var(--timeline-color,var(--accent)) 75%,#fff)!important;
}
@media(max-width:760px){
  .timeline-row-color{grid-template-columns:1fr}
}


/* Beta 4.17 — Gantt positionering exact op datumkolom */
.timeline-gantt-card .gantt-bar{
  min-width:0;
}

/* Beta 4.18 — Materiaal database */
.inventory-toolbar{align-items:flex-end}.toolbar-actions{display:flex;gap:8px;align-items:center}.inventory-search{height:38px;min-width:280px;border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;padding:0 10px;background:var(--panel)}.inventory-search input{border:0!important;background:transparent!important;box-shadow:none!important;width:100%}.inventory-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;min-height:620px}.inventory-folders,.inventory-list{padding:0;overflow:hidden}.inv-pane-head,.inv-list-head{min-height:58px;padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.inv-pane-head>div,.inv-list-head>div{display:flex;flex-direction:column;gap:3px}.inv-pane-head button,.inv-folder-row button{background:transparent;border:0;color:var(--muted);cursor:pointer}.inv-folder-row{height:38px;display:grid;grid-template-columns:16px 18px minmax(0,1fr) 30px 24px;align-items:center;gap:5px;padding:0 8px 0 calc(10px + var(--depth,0)*18px);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);cursor:pointer}.inv-folder-row:hover,.inv-folder-row.active{background:color-mix(in srgb,var(--accent) 12%,transparent)}.inv-folder-row.active{box-shadow:inset 3px 0 var(--accent)}.inv-folder-row small{text-align:right}.inv-folder-arrow{color:var(--muted)}.inv-empty-folder{padding:24px 14px;text-align:center;color:var(--muted);line-height:1.6}.inventory-table tr{cursor:pointer}.inventory-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}.inventory-table td b{display:block}.inventory-table td small{display:block;color:var(--muted);margin-top:3px}.inv-code{color:#9cc7ff}.inv-list-head span{font-size:12px;color:var(--muted)}
.inventory-detail{max-width:1280px;margin:0 auto}.inv-detail-top{display:flex;align-items:center;gap:14px;margin-bottom:8px}.inv-detail-top h2{margin:2px 0}.inv-detail-top .spacer{flex:1}.inv-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow:auto}.inv-tabs button{border:0;background:transparent;color:var(--muted);padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}.inv-tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.inv-detail-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,.9fr);gap:14px;align-items:start}.inv-detail-grid>div,.inv-detail-grid>aside{display:grid;gap:14px}.inv-detail-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px}.inv-section-title{font-size:11px;font-weight:800;letter-spacing:.07em;color:var(--muted);margin:-18px -18px 18px;padding:13px 18px;border-bottom:1px solid var(--border)}.crm-form-grid.three{grid-template-columns:repeat(3,1fr)}.inv-image-placeholder{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg);border:1px dashed var(--border);border-radius:6px;color:var(--muted);font-size:30px}.inv-image-placeholder span{font-size:12px}.inv-stock-big{display:block;font-size:32px;margin-bottom:2px}.inv-detail-card hr{border:0;border-top:1px solid var(--border);margin:15px 0}.inv-empty-tab{min-height:560px;border:1px solid var(--border);background:var(--panel);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.inv-empty-tab h3{color:var(--text);margin:12px 0 5px}.inv-empty-tab p{max-width:540px}.inv-empty-icon{font-size:36px}.form-actions.split{display:grid;grid-template-columns:auto 1fr auto auto}.danger{border:1px solid #8b3535!important;color:#ff7d7d!important;background:transparent!important}
@media(max-width:900px){.inventory-workspace{grid-template-columns:1fr}.inventory-folders{max-height:300px}.inv-detail-grid{grid-template-columns:1fr}.crm-form-grid.three{grid-template-columns:1fr 1fr}.inventory-search{min-width:180px}}


/* Beta 4.21 — materiaal XLSX importwizard */
body .modal-bg > .modal.material-import-modal{
  width:min(1180px,calc(100vw - 54px))!important;
  max-width:1180px!important;
  height:min(840px,calc(100dvh - 54px))!important;
  max-height:calc(100dvh - 54px)!important;
  padding:0!important;
  overflow:hidden!important;
}
.material-import-wizard{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.material-import-wizard>.crm-sync-steps{
  flex:0 0 auto;
  margin:0!important;
  padding:22px 28px 18px!important;
  border-bottom:1px solid var(--line);
}
#materialImportStage{
  min-height:0;
  flex:1;
  overflow:auto;
  padding:22px 28px 24px;
}
.material-import-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}
.material-import-header h2{margin:4px 0 5px;font-size:22px}
.material-import-header p{margin:0}
.material-import-header-actions{display:flex;gap:8px}
.material-import-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.material-import-group{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel-2);
  overflow:hidden;
}
.material-import-group-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.material-import-group-head>label{
  display:flex!important;
  flex-direction:row!important;
  gap:9px;
  align-items:flex-start;
  margin:0!important;
  cursor:pointer;
}
.material-import-group-head input{margin-top:2px}
.material-import-group-head b{display:block;font-size:11px}
.material-import-group-head small{display:block;color:var(--muted);font-size:8px;margin-top:3px;line-height:1.35}
.material-import-group-head em{
  font-style:normal;color:#ff7b1a;font-size:8px;font-weight:800;white-space:nowrap
}
.material-import-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  max-height:210px;
  overflow:auto;
}
.material-import-columns label{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  padding:8px 10px;
  margin:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  font-size:8px;
  cursor:pointer;
}
.material-import-columns label:nth-child(odd){border-right:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.material-import-columns span{
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.35;
}
.material-row-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.material-row-tools .inventory-search{width:min(460px,55%)}
.material-master-check{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:7px;
  margin:0!important;
  font-size:9px;
  color:var(--muted);
}
.material-import-table-wrap{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:auto;
  max-height:470px;
  background:var(--panel);
}
.material-import-table{
  width:100%;
  border-collapse:collapse;
  font-size:9px;
}
.material-import-table thead{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel-2);
}
.material-import-table th,
.material-import-table td{
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  white-space:nowrap;
}
.material-import-table th:first-child,
.material-import-table td:first-child{width:34px;text-align:center}
.material-import-table th:nth-child(2),
.material-import-table td:nth-child(2){width:70px;color:var(--muted)}
.material-import-table td:nth-child(4){white-space:normal;min-width:280px}
.material-import-table tr:hover td{background:color-mix(in srgb,var(--panel-2) 75%,transparent)}
.material-import-wizard .crm-import-choice-summary{margin-top:12px}
.material-import-wizard .form-actions{
  position:sticky;
  bottom:-24px;
  margin:18px -28px -24px!important;
  padding:13px 28px!important;
  background:var(--panel)!important;
  border-top:1px solid var(--line)!important;
  z-index:4;
}
@media(max-width:800px){
  body .modal-bg > .modal.material-import-modal{
    width:calc(100vw - 20px)!important;
    height:calc(100dvh - 20px)!important;
  }
  .material-import-groups{grid-template-columns:1fr}
  .material-import-columns{grid-template-columns:1fr}
  .material-import-columns label:nth-child(odd){border-right:0}
  .material-import-header,.material-row-tools{flex-direction:column;align-items:stretch}
  .material-row-tools .inventory-search{width:100%}
}


/* Beta 4.22 — materiaalimport: leesbare XLSX-kolommen */
.material-import-groups{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.material-import-group{min-width:0}
.material-import-group-head>label{
  min-width:0;
  flex:1 1 auto;
}
.material-import-group-head>label>span{
  display:block!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
}
.material-import-group-head b{
  font-size:13px!important;
  line-height:1.3!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.material-import-group-head small{
  font-size:11px!important;
  line-height:1.35!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.material-import-group-head em{font-size:var(--sa-text-label)!important}
.material-import-columns{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  max-height:260px;
  overflow-y:auto;
  overflow-x:hidden;
}
.material-import-columns label{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:center!important;
  gap:8px!important;
  padding:9px 12px!important;
  border-right:0!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.material-import-columns label:nth-child(odd){border-right:0!important}
.material-import-columns label>input{
  width:14px!important;
  min-width:14px!important;
  height:14px!important;
  margin:0!important;
}
.material-import-columns label>span{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  writing-mode:horizontal-tb!important;
}
@media(max-width:800px){
  .material-import-groups{grid-template-columns:1fr}
}


/* Beta 4.37 — materiaalimport layoutfix: checkboxes mogen nooit de globale input-breedte erven */
body .modal-bg > .modal.material-import-modal .material-import-group-head > label {
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:start!important;
  justify-content:stretch!important;
  width:100%!important;
  min-width:0!important;
  gap:9px!important;
}
body .modal-bg > .modal.material-import-modal .material-import-group-head > label > input[type="checkbox"],
body .modal-bg > .modal.material-import-modal .material-import-columns label > input[type="checkbox"] {
  width:14px!important;
  min-width:14px!important;
  max-width:14px!important;
  height:14px!important;
  padding:0!important;
  margin:2px 0 0!important;
  box-sizing:border-box!important;
}
body .modal-bg > .modal.material-import-modal .material-import-group-head > label > span,
body .modal-bg > .modal.material-import-modal .material-import-columns label > span {
  display:block!important;
  position:static!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
body .modal-bg > .modal.material-import-modal .material-import-group-head {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
}
body .modal-bg > .modal.material-import-modal .material-import-columns {
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
}
body .modal-bg > .modal.material-import-modal .material-import-columns > label {
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  justify-content:stretch!important;
  align-items:start!important;
}


/* Beta 4.37 — materiaalimport: Rentman map/submapstructuur */
.material-import-table .material-import-folder {
  min-width: 190px;
  max-width: 300px;
  white-space: normal;
  overflow-wrap: break-word;
  color: var(--muted);
}


/* Beta 4.37 — controleerbare mapstructuur tijdens materiaalimport */
.material-import-folder-summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;
  padding:13px 16px;margin:0 0 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);
}
.material-import-folder-summary>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.material-import-folder-summary small{color:var(--muted);font-size:11px}
.material-import-folder-summary>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-end}
.material-import-folder-summary strong{font-size:18px}
.material-import-folder-summary span{font-size:10px;color:var(--muted)}
.material-import-folder-summary.warning{grid-template-columns:1fr;border-color:rgba(255,145,0,.35)}


/* Beta 4.37 — materiaal multiselect + bulkacties */
.inventory-bulk-bar{
  display:none;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);
  background:var(--panel2);border-radius:8px;
}
.inventory-bulk-bar.visible{display:flex}
.inventory-bulk-bar>div:first-child{display:flex;align-items:baseline;gap:10px}
.inventory-bulk-bar span{font-size:11px;color:var(--muted)}
.inventory-bulk-actions{display:flex;gap:8px;align-items:center}
.inventory-table .inv-check-col{width:42px;min-width:42px;text-align:center}
.inventory-table .inv-check-col input,
#inventorySelectAll{width:16px!important;height:16px!important;min-width:16px;accent-color:#ff6900;cursor:pointer}
.inventory-table tbody tr:has(.inv-row-check:checked){background:rgba(255,105,0,.07)}
.inventory-table tbody tr:has(.inv-row-check:checked) td:first-child{box-shadow:inset 3px 0 #ff6900}


/* Beta 4.37 — fallback mapkeuze bij XLSX zonder mapkolom */
.material-import-no-map{
  margin:0 0 14px;padding:14px 16px;border:1px solid rgba(255,145,0,.35);
  border-radius:9px;background:rgba(255,145,0,.055);
}
.material-import-no-map-copy{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.material-import-no-map-copy span,.material-import-no-map>small{color:var(--muted);font-size:11px;line-height:1.45}
.material-import-folder-controls{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:end}
.material-import-folder-controls label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700}
.material-import-folder-controls select,.material-import-folder-controls input{width:100%}
.material-import-folder-or{height:40px;display:grid;place-items:center;color:var(--muted);font-size:11px}


/* Beta 4.37 — materiaal Labels / Filters */
.inventory-popover{
 position:fixed;z-index:10020;width:290px;padding:12px;border:1px solid var(--line);
 border-radius:9px;background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.38);
}
.inventory-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.inventory-popover-head button{border:0;background:transparent;font-size:18px;color:var(--muted);cursor:pointer}
.inventory-popover>label{display:flex;flex-direction:column;gap:5px;margin:9px 0;font-size:11px;font-weight:700}
.inventory-filter-option{flex-direction:row!important;align-items:center!important;gap:9px!important;font-weight:500!important}
.inventory-filter-option input{width:15px!important;height:15px!important;min-width:15px}
.inventory-label-chip{display:inline-flex;padding:3px 7px;border:1px solid var(--line);border-radius:5px;background:var(--panel2)}
.inventory-popover-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.active-filter{border-color:#ff6900!important;box-shadow:inset 0 -2px #ff6900}


/* Beta 4.37 — Rentman-achtige mappenbeheerder */
.inv-folder-gear{
 width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;
 color:var(--muted);font-size:15px;cursor:pointer;border-radius:6px;
}
.inv-folder-gear:hover{background:var(--panel2);color:var(--text)}
.folder-manager-modal{width:min(900px,86vw);max-height:82vh;display:flex;flex-direction:column}
.folder-manager-titlebar{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}
.folder-manager-titlebar b{font-size:12px;letter-spacing:.04em}
.folder-manager-close{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.folder-manager-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.folder-manager-toolbar>div{display:flex;flex-direction:column;gap:3px}
.folder-manager-toolbar span{font-size:11px;color:var(--muted)}
.folder-manager-add-root{border:0;background:transparent;color:#7eb9ff;font-weight:700;cursor:pointer;font-size:11px}
.folder-manager-body{display:grid;grid-template-columns:minmax(310px,42%) 1fr;min-height:430px;overflow:hidden}
.folder-manager-tree{overflow:auto;padding:12px 0;border-right:1px solid var(--line);background:var(--panel2)}
.folder-manage-row{
 --indent:calc(var(--depth) * 20px);display:grid;grid-template-columns:18px 18px 1fr;align-items:center;
 min-height:36px;padding:0 12px 0 calc(14px + var(--indent));cursor:pointer;border-left:3px solid transparent;
}
.folder-manage-row:hover{background:rgba(255,255,255,.035)}
.folder-manage-row.selected{background:rgba(255,105,0,.10);border-left-color:#ff6900}
.folder-manage-arrow,.folder-manage-icon{color:var(--muted)}
.folder-manage-name{font-weight:600;font-size:12px}
.folder-manager-editor{padding:20px;overflow:auto;background:var(--panel)}
.folder-manager-placeholder{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center}
.folder-editor-card{display:flex;flex-direction:column;gap:14px}
.folder-editor-card h3{margin:0;font-size:22px}
.folder-editor-card label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700}
.folder-editor-path{padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);display:flex;flex-direction:column;gap:4px}
.folder-editor-path span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.folder-editor-buttons{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.folder-manager-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.folder-delete-options{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.folder-delete-options label{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:7px;cursor:pointer}
.folder-delete-options input{width:16px!important;height:16px!important;min-width:16px;margin-top:2px}
.folder-delete-options div{display:flex;flex-direction:column;gap:3px}
.folder-delete-options span{font-size:11px;color:var(--muted)}


/* Beta 4.37 — compact materiaaloverzicht */
.inventory-page{
  width:100%;
  max-width:none;
  margin:0;
}
.inventory-page .inventory-toolbar{
  padding-left:0;
  padding-right:0;
  margin-bottom:8px;
}
.inventory-page .inventory-workspace{
  --inventory-folder-width:260px;
  display:grid;
  grid-template-columns:var(--inventory-folder-width) 8px minmax(0,1fr);
  gap:0;
  width:100%;
  min-width:0;
  height:calc(100vh - 230px);
  max-height:calc(100vh - 230px);
  overflow:hidden;
}
.inventory-page .inventory-folders{
  min-width:0;
  width:auto;
  height:100%;
  max-height:100%;
  overflow:auto;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.inventory-page .inventory-list{
  min-width:0;
  width:auto;
  max-width:100%;
  height:100%;
  max-height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.inventory-page .inv-list-head{
  flex:0 0 auto;
  padding:8px 10px;
}
.inventory-page .inventory-table-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}
.inventory-page .inventory-table{
  width:100%;
  min-width:920px;
  table-layout:auto;
}
.inventory-page .inventory-table-compact th,
.inventory-page .inventory-table-compact td{
  padding:7px 9px;
}
.inventory-page .inventory-table-compact th{
  white-space:nowrap;
}
.inventory-page .inventory-table-compact td{
  line-height:1.2;
}
.inventory-page .inventory-table-compact td:nth-child(2),
.inventory-page .inventory-table-compact th:nth-child(2){
  width:88px;
}
.inventory-page .inventory-table-compact td:nth-child(4),
.inventory-page .inventory-table-compact th:nth-child(4){
  width:190px;
  max-width:240px;
}
.inventory-page .inventory-table-compact td:nth-child(5),
.inventory-page .inventory-table-compact th:nth-child(5),
.inventory-page .inventory-table-compact td:nth-child(6),
.inventory-page .inventory-table-compact th:nth-child(6),
.inventory-page .inventory-table-compact td:nth-child(7),
.inventory-page .inventory-table-compact th:nth-child(7){
  width:112px;
  white-space:nowrap;
}
.inventory-page .inv-pane-head{
  padding:9px 10px;
}
.inventory-page .inv-folder-row{
  min-height:31px;
  padding-top:0;
  padding-bottom:0;
}
.inventory-page .inventory-toolbar .toolbar-actions{
  gap:6px;
}
.inventory-page .inventory-toolbar button,
.inventory-page .inventory-search{
  margin:0;
}
.inventory-splitter{
  position:relative;
  width:8px;
  cursor:col-resize;
  user-select:none;
  touch-action:none;
  background:transparent;
}
.inventory-splitter::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:3px;
  width:2px;
  background:var(--line);
  transition:background .15s,width .15s,left .15s;
}
.inventory-splitter:hover::before,
body.inventory-resizing .inventory-splitter::before{
  left:2px;
  width:4px;
  background:#ff6900;
}
body.inventory-resizing{
  cursor:col-resize!important;
  user-select:none!important;
}

/* Minder lege marge links/rechts op materiaalpagina */
.main-content:has(.inventory-page),
.content:has(.inventory-page),
#content:has(.inventory-page){
  padding-left:12px!important;
  padding-right:12px!important;
  max-width:none!important;
}

/* Beta 4.37 — mappenbeheerder altijd breed genoeg */
.folder-manager-bg{
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
.folder-manager-bg > .modal,
.folder-manager-bg > .modal-card,
.folder-manager-bg > :first-child{
  width:min(1040px,calc(100vw - 48px))!important;
  max-width:1040px!important;
  min-width:min(760px,calc(100vw - 48px))!important;
}
.folder-manager-modal{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  max-height:min(820px,calc(100vh - 48px))!important;
}
.folder-manager-body{
  grid-template-columns:minmax(360px,42%) minmax(0,1fr)!important;
  min-height:500px;
}
.folder-manager-editor{
  min-width:0;
}
.folder-editor-card input,
.folder-editor-card select{
  width:100%;
  min-width:0;
}
@media (max-width:900px){
  .folder-manager-bg > .modal,
  .folder-manager-bg > .modal-card,
  .folder-manager-bg > :first-child{
    min-width:0!important;
    width:calc(100vw - 24px)!important;
  }
  .folder-manager-body{
    grid-template-columns:1fr!important;
  }
  .folder-manager-tree{
    max-height:260px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .inventory-page .inventory-workspace{
    --inventory-folder-width:220px;
  }
}


/* Beta 4.37 — maximale horizontale benutting materiaalpagina */
.main-content:has(.inventory-page),
.content:has(.inventory-page),
#content:has(.inventory-page){
  padding-left:4px!important;
  padding-right:4px!important;
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
}
.inventory-page{
  padding-left:0!important;
  padding-right:0!important;
}
.inventory-page .inventory-toolbar{
  padding-left:2px!important;
  padding-right:2px!important;
}
.inventory-page .inventory-workspace{
  width:100%!important;
  height:calc(100vh - 470px)!important;
  max-height:calc(100vh - 470px)!important;
  min-height:315px;
}
.inventory-page .inventory-table-compact th,
.inventory-page .inventory-table-compact td{
  padding:6px 7px!important;
}
.inventory-page .inventory-table{
  min-width:max(760px,100%);
}
.inventory-page .inventory-table [data-col="name"]{min-width:260px}
.inventory-page .inventory-table [data-col="folder"]{min-width:150px}
.inventory-page .inventory-table [data-col="quantity"],
.inventory-page .inventory-table [data-col="reserved"],
.inventory-page .inventory-table [data-col="rental_price"],
.inventory-page .inventory-table [data-col="purchase_price"]{
  white-space:nowrap;
}
.inv-list-actions{display:flex;gap:5px;align-items:center}

/* Beschikbaarheidstimeline */
.inventory-availability{
  margin-top:8px;
  height:225px;
  min-height:225px;
  max-height:225px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.inventory-availability-head{
  flex:0 0 auto;
  min-height:44px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
}
.inventory-availability-head>div:first-child{display:flex;flex-direction:column;gap:2px}
.inventory-availability-head span{font-size:10px;color:var(--muted)}
.inventory-timeline-nav{display:flex;gap:4px}
.inventory-timeline-nav button{min-width:34px;padding:5px 8px}
#inventoryAvailabilityTimeline{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.inventory-timeline-empty,
.inventory-timeline-loading{
  height:100%;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  color:var(--muted);
  text-align:center;
}
.inventory-timeline-empty b{color:var(--text)}
.inventory-timeline-grid{
  min-width:1150px;
  font-size:10px;
}
.inventory-timeline-dates{
  display:grid;
  grid-template-columns:250px repeat(21,minmax(38px,1fr));
  position:sticky;
  top:0;
  z-index:5;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.inventory-timeline-dates>div{
  min-height:31px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--line);
}
.inventory-timeline-dates>div:first-child{border-left:0}
.inventory-timeline-dates span{font-size:9px;color:var(--muted)}
.inventory-timeline-item{
  display:grid;
  grid-template-columns:250px minmax(900px,1fr);
  grid-template-rows:32px auto;
  border-bottom:1px solid var(--line);
  position:relative;
}
.timeline-item-name{
  grid-row:1 / span 2;
  padding:5px 8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  border-right:1px solid var(--line);
  background:var(--panel2);
  position:sticky;
  left:0;
  z-index:3;
}
.timeline-item-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-item-name span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-item-days{
  display:grid;
  grid-template-columns:repeat(21,minmax(38px,1fr));
}
.availability-day{
  display:flex;align-items:center;justify-content:center;
  min-height:32px;border-left:1px solid var(--line);
  background:rgba(34,197,94,.08);
}
.availability-day.partial{background:rgba(255,166,0,.10)}
.availability-day.none{background:rgba(239,68,68,.12)}
.availability-day b{font-size:10px}
.timeline-project-lane{
  grid-column:2;
  display:grid;
  grid-template-columns:repeat(21,minmax(38px,1fr));
  min-height:25px;
  padding:2px 0 4px;
  position:relative;
  background:repeating-linear-gradient(to right,transparent 0,transparent calc((100% / 21) - 1px),var(--line) calc((100% / 21) - 1px),var(--line) calc(100% / 21));
}
.inventory-project-bar{
  grid-column:calc(var(--start) + 1) / span var(--span);
  min-width:0;
  height:19px;
  margin:1px 2px;
  padding:1px 5px;
  border-radius:3px;
  background:rgba(120,120,120,.55);
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.inventory-project-bar span{font-size:9px;color:var(--text)}
.inventory-view-popover{width:330px}
.inventory-view-help{font-size:10px;line-height:1.4;margin-bottom:7px}
.inventory-column-options{max-height:330px;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 0}
@media(max-height:800px){
  .inventory-page .inventory-workspace{
    height:calc(100vh - 425px)!important;
    max-height:calc(100vh - 425px)!important;
  }
  .inventory-availability{height:190px;min-height:190px;max-height:190px}
}


/* =========================================================
   Beta 4.37 — Materiaal layout dichter bij Rentman
   ========================================================= */

/* De oude main max-width van 1500px veroorzaakte op brede schermen ~100px lege ruimte.
   Voor Materiaal benutten we nu vrijwel de volledige breedte zoals Rentman. */
main:has(.inventory-page){
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding-left:22px!important;
  padding-right:22px!important;
  padding-top:20px!important;
  padding-bottom:14px!important;
}
main:has(.inventory-page) header{
  margin-bottom:14px!important;
}
main:has(.inventory-page) #content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
.inventory-page{
  width:100%!important;
  max-width:none!important;
  height:calc(100vh - 150px);
  min-height:540px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.inventory-page .inventory-toolbar{
  flex:0 0 auto;
  margin-bottom:7px!important;
  padding:0!important;
}
.inventory-page .inventory-toolbar .toolbar-actions{
  gap:5px!important;
}
.inventory-page .inventory-bulk-bar{
  flex:0 0 auto;
  margin-bottom:6px;
}

/* Workspace en timeline vullen samen exact de beschikbare schermhoogte. */
.inventory-content-stack{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.inventory-content-stack .inventory-workspace{
  flex:1 1 auto!important;
  min-height:210px!important;
  height:auto!important;
  max-height:none!important;
  width:100%!important;
}
.inventory-content-stack.timeline-open .inventory-workspace{
  min-height:210px!important;
}
.inventory-content-stack.timeline-closed .inventory-workspace{
  flex:1 1 auto!important;
}

/* Nog compactere kolommen zonder leesbaarheid te verliezen. */
.inventory-page .inventory-table-compact th,
.inventory-page .inventory-table-compact td{
  padding:5px 6px!important;
}
.inventory-page .inventory-table [data-col="name"]{min-width:235px!important}
.inventory-page .inventory-table [data-col="folder"]{min-width:135px!important}
.inventory-page .inventory-table-scroll{
  overflow:auto!important;
  max-width:100%;
}

/* Horizontale resizer boven de timeline. */
.inventory-timeline-resizer{
  flex:0 0 8px;
  height:8px;
  cursor:row-resize;
  position:relative;
  user-select:none;
  touch-action:none;
}
.inventory-timeline-resizer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:3px;
  height:2px;
  background:var(--line);
}
.inventory-timeline-resizer span{
  position:absolute;
  left:50%;
  top:1px;
  width:42px;
  height:6px;
  transform:translateX(-50%);
  border-radius:4px;
}
.inventory-timeline-resizer:hover::before,
body.inventory-timeline-resizing .inventory-timeline-resizer::before{
  top:2px;
  height:4px;
  background:#ff6900;
}
body.inventory-timeline-resizing{
  cursor:row-resize!important;
  user-select:none!important;
}

/* Tijdlijnhoogte komt uit de door de gebruiker versleepte CSS-variable. */
.inventory-content-stack .inventory-availability{
  flex:0 0 var(--inventory-timeline-height)!important;
  height:var(--inventory-timeline-height)!important;
  min-height:150px!important;
  max-height:430px!important;
  margin-top:0!important;
}
.inventory-timeline-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.inventory-timeline-minimize{
  white-space:nowrap;
}

/* Verwijder eerdere selectors die binnen de materiaalpagina nog extra marge konden laten staan. */
.main-content:has(.inventory-page),
.content:has(.inventory-page),
#content:has(.inventory-page){
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
  max-width:none!important;
  width:100%!important;
}

@media(max-width:1000px){
  main:has(.inventory-page){
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .inventory-page{
    height:calc(100vh - 145px);
  }
}

/* Beta 4.37 — centrale dag/periodekeuze */
.inventory-availability-head{display:grid!important;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr)!important;align-items:center!important}
.inventory-timeline-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.inventory-timeline-date-center{display:flex;align-items:center;justify-content:center;gap:5px}
.inventory-timeline-head-actions{justify-self:end}
.inventory-timeline-range-button{min-width:190px;height:31px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--text);cursor:pointer;font:inherit;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.inventory-timeline-range-button small{font-size:9px;color:var(--muted)}
.inventory-timeline-arrow{min-width:31px!important;width:31px;padding:4px!important}
.inventory-date-popover{position:fixed;z-index:10060;width:390px;padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:0 18px 55px rgba(0,0,0,.45)}
.inventory-date-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.inventory-date-popover-head button{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.inventory-date-help{font-size:10px;color:var(--muted);line-height:1.4;margin-bottom:12px}
.inventory-date-fields{display:grid;grid-template-columns:1fr 24px 1fr;align-items:end;gap:7px}
.inventory-date-fields label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700}
.inventory-date-fields>span{display:grid;place-items:center;height:35px;color:var(--muted)}
.inventory-date-fields input{width:100%;height:35px}
.inventory-date-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}
.inventory-date-quick button{padding:5px}
.inventory-timeline-grid{min-width:max(100%,calc(250px + (var(--timeline-days,21) * 42px)))!important}
.inventory-timeline-dates{grid-template-columns:250px repeat(var(--timeline-days,21),minmax(42px,1fr))!important}
.timeline-item-days{grid-template-columns:repeat(var(--timeline-days,21),minmax(42px,1fr))!important}
.timeline-project-lane{grid-template-columns:repeat(var(--timeline-days,21),minmax(42px,1fr))!important;background:none!important}
.timeline-project-lane::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to right,transparent 0,transparent calc((100% / var(--timeline-days,21)) - 1px),var(--line) calc((100% / var(--timeline-days,21)) - 1px),var(--line) calc(100% / var(--timeline-days,21)))}
.inventory-project-bar{position:relative;z-index:1}
@media(max-width:1050px){.inventory-availability-head{grid-template-columns:1fr auto!important}.inventory-timeline-title{grid-column:1}.inventory-timeline-date-center{grid-column:1 / span 2;grid-row:2}.inventory-timeline-head-actions{grid-column:2;grid-row:1}}

/* Beta 4.37 — materiaal alleen bewerken via selectie + Bewerken */
.inventory-table tbody tr{cursor:default!important}
.inventory-table tbody tr:hover{background:rgba(255,255,255,.025)}
.inventory-table tbody tr.selected-row{background:rgba(104,130,255,.09)!important}
.inventory-table tbody tr.selected-row td{border-color:rgba(120,150,255,.22)}
.inventory-table .inv-row-check{cursor:pointer}
#inventoryBulkEdit:disabled{
  opacity:.38;
  cursor:not-allowed;
  pointer-events:auto;
}

/* Beta 4.37 — volledige materiaalregel is selecteerbaar */
.inventory-table tbody tr[data-id]{cursor:pointer!important}
.inventory-table tbody tr[data-id] td{user-select:none}
.inventory-table tbody tr[data-id]:hover{background:rgba(255,255,255,.035)}
.inventory-table tbody tr[data-id].selected-row{background:rgba(104,130,255,.10)!important}

/* Beta 4.37 — reserveringspopup vanuit de materiaal-tijdlijn */
.inventory-project-bar{
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.inventory-project-bar:hover{
  filter:brightness(1.14);
  border-color:rgba(150,195,255,.65);
}
.inventory-reservation-bg{
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
.inventory-reservation-bg > .modal,
.inventory-reservation-bg > .modal-card,
.inventory-reservation-bg > :first-child{
  width:min(760px,calc(100vw - 48px))!important;
  max-width:760px!important;
  min-width:min(650px,calc(100vw - 48px))!important;
  padding:0!important;
  overflow:hidden;
}
.inventory-reservation-modal{width:100%;display:flex;flex-direction:column}
.inventory-reservation-titlebar{
  min-height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);background:var(--panel2)
}
.inventory-reservation-titlebar b{font-size:11px;letter-spacing:.02em}
.inventory-reservation-close{
  border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer
}
.inventory-reservation-content{padding:20px}
.inventory-reservation-content h3{margin:2px 0 14px;font-size:14px}
.inventory-reservation-content h3:not(:first-child){margin-top:24px}
.inventory-reservation-table,
.inventory-reservation-sources{
  border:1px solid var(--line);
  background:var(--panel2)
}
.inventory-reservation-tr{
  min-height:41px;display:grid;grid-template-columns:72px minmax(0,1fr);
  align-items:center;border-bottom:1px solid var(--line)
}
.inventory-reservation-tr:last-child{border-bottom:0}
.inventory-reservation-tr>span,
.inventory-reservation-tr>strong{padding:0 10px;font-size:11px}
.inventory-reservation-th{
  min-height:36px;background:rgba(255,255,255,.025);font-weight:700
}
.inventory-reservation-th span{font-size:10px}
.inventory-reservation-source-head,
.inventory-reservation-source-row{
  display:grid;grid-template-columns:minmax(0,1fr) 150px 90px;align-items:center;
}
.inventory-reservation-source-head{
  min-height:38px;border-bottom:1px solid var(--line);font-size:9px;font-weight:700
}
.inventory-reservation-source-head span,
.inventory-reservation-source-row>span,
.inventory-reservation-source-row>strong{padding:0 10px}
.inventory-reservation-source-row{min-height:50px}
.inventory-source-name{display:flex;align-items:center;gap:12px}
.inventory-source-arrow{font-size:16px;color:var(--muted)}
.inventory-source-qty{padding:6px 10px}
.inventory-source-qty input{
  width:100%;height:31px;text-align:right;padding-right:8px
}
.inventory-reservation-footer{
  min-height:58px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);background:var(--panel2)
}
.inventory-reservation-footer>div{display:flex;gap:8px}
@media(max-width:720px){
  .inventory-reservation-bg > .modal,
  .inventory-reservation-bg > .modal-card,
  .inventory-reservation-bg > :first-child{min-width:0!important;width:calc(100vw - 20px)!important}
  .inventory-reservation-source-head,
  .inventory-reservation-source-row{grid-template-columns:minmax(0,1fr) 120px 70px}
}


/* =========================================================
   Beta 4.45 — uniforme horizontale paginamarges
   Materiaal is de referentie: alle normale Showarrow-pagina's
   gebruiken dezelfde compacte 22px ruimte naast de content.
   ========================================================= */
main{
  max-width:none;
  width:auto;
  min-width:0;
  margin:0;
  padding-left:22px;
  padding-right:22px;
}
main > #content{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  min-width:0;
}
/* Projectworkspace en overige brede grids mogen de beschikbare breedte volledig gebruiken. */
#content > .project-workspace,
#content > .project-page,
#content > .crm-page,
#content > .planning-page,
#content > .personnel-page,
#content > .tasks-page,
#content > .documents-page,
#content > .inventory-page{
  width:100%;
  max-width:none;
}
@media(max-width:1000px){
  main{padding-left:12px;padding-right:12px}
}
@media(max-width:650px){
  main{padding-left:10px;padding-right:10px}
}


/* ============================================================
   Beta 4.45 — Project > Materiaal planner
   Zelfde compacte Showarrow-layout als de centrale materiaalpagina
   ============================================================ */
.pm-page{
  width:100%;
  max-width:none;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pm-toolbar{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}
.pm-toolbar h2{margin:0 0 2px}
.pm-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.pm-toolbar-actions button:disabled{opacity:.38;cursor:not-allowed}
.pm-main-stack{
  height:calc(100vh - 310px);
  min-height:540px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.pm-workspace{
  --pm-left:330px;
  flex:1 1 auto;
  min-height:260px;
  display:grid;
  grid-template-columns:var(--pm-left) 8px minmax(0,1fr);
  overflow:hidden;
}
.pm-catalog,.pm-planned{
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:6px;
}
.pm-catalog{
  display:flex;
  flex-direction:column;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.pm-search{
  flex:0 0 auto;
  height:39px;
  margin:8px;
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:5px;
  padding:0 8px;background:var(--panel2)
}
.pm-search input{width:100%;border:0!important;background:transparent!important;padding:0!important;outline:0}
.pm-subfolders{
  flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  padding:3px 10px 8px;
  color:var(--muted);font-size:10px
}
.pm-folder-browser{
  flex:0 0 auto;
  max-height:190px;
  overflow:auto;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:4px 0
}
.pm-folder-row{
  width:100%;
  min-height:29px;
  display:grid;
  grid-template-columns:14px 15px minmax(0,1fr) 34px;
  align-items:center;
  gap:4px;
  border:0;
  border-left:2px solid transparent;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:0 7px 0 calc(7px + (var(--depth,0) * 13px));
  cursor:pointer
}
.pm-folder-row:hover{background:rgba(255,255,255,.035)}
.pm-folder-row.active{background:rgba(255,105,0,.12);border-left-color:#ff6900}
.pm-folder-row small{text-align:right;color:var(--muted)}
.pm-folder-caret{color:var(--muted)}
.pm-catalog-head{
  flex:0 0 auto;
  min-height:42px;
  display:flex;align-items:center;
  padding:6px 9px;border-bottom:1px solid var(--line)
}
.pm-catalog-head>div{display:flex;flex-direction:column;gap:2px}
.pm-catalog-head small{font-size:9px;color:var(--muted)}
.pm-catalog-items{flex:1 1 auto;min-height:0;overflow:auto}
.pm-catalog-item{
  min-height:43px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:center;
  padding:4px 8px;
  border-bottom:1px solid var(--line);
  cursor:pointer
}
.pm-catalog-item:hover{background:rgba(255,255,255,.03)}
.pm-catalog-item.selected{background:rgba(95,105,255,.10)}
.pm-catalog-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-catalog-main b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-catalog-main span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-splitter{
  position:relative;cursor:col-resize;touch-action:none;user-select:none
}
.pm-splitter::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:var(--line)}
.pm-splitter:hover::before{left:2px;width:4px;background:#ff6900}
.pm-planned{
  display:flex;flex-direction:column;
  border-top-left-radius:0;border-bottom-left-radius:0
}
.pm-planned-head{
  flex:0 0 auto;
  min-height:48px;
  padding:7px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line)
}
.pm-planned-head>div:first-child{display:flex;flex-direction:column;gap:2px}
.pm-planned-head span{font-size:9px;color:var(--muted)}
.pm-period-pill{
  display:inline-flex!important;align-items:center;
  min-height:27px;padding:0 8px;border:1px solid var(--line);border-radius:5px;
  color:var(--text)!important;background:var(--panel2)
}
.pm-planned-table{flex:1 1 auto;min-height:0;overflow:auto}
.pm-planned-header,.pm-planned-row{
  display:grid;
  grid-template-columns:30px 74px minmax(220px,1fr) 110px 110px 130px;
  align-items:center
}
.pm-planned-header{
  position:sticky;top:0;z-index:3;
  min-height:34px;background:var(--panel2);
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:9px;font-weight:700
}
.pm-planned-header span,.pm-planned-row>span{padding:0 7px}
.pm-planned-row{
  min-height:45px;border-bottom:1px solid var(--line);cursor:pointer
}
.pm-planned-row:hover{background:rgba(255,255,255,.025)}
.pm-planned-row.selected{background:rgba(95,105,255,.10)}
.pm-planned-row>span:nth-child(3){display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-planned-row b{font-size:10px}
.pm-planned-row small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-code{color:#9fc8ff}
.pm-status{
  display:inline-flex;align-items:center;min-height:22px;
  border-radius:12px;padding:0 8px;font-size:9px;font-weight:700;white-space:nowrap
}
.pm-status.ok{background:rgba(34,197,94,.13);color:#58da82}
.pm-status.warning{background:rgba(245,158,11,.13);color:#ffb33b}
.pm-status.danger{background:rgba(239,68,68,.13);color:#ff7171}
.pm-status.pending{background:rgba(148,163,184,.12);color:var(--muted)}
.pm-empty{
  min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:5px;color:var(--muted);padding:20px
}
.pm-empty b{color:var(--text)}
.pm-empty-planned{height:100%}

/* Bottom availability timeline */
.pm-timeline-area{
  --pm-timeline-height:220px;
  flex:0 0 var(--pm-timeline-height);
  min-height:150px;max-height:420px;
  display:flex;flex-direction:column;
  overflow:hidden;
  margin-top:0
}
.pm-timeline-area.collapsed{flex:0 0 0!important;min-height:0!important;height:0!important;overflow:hidden}
.pm-timeline-resizer{
  flex:0 0 8px;position:relative;cursor:row-resize;touch-action:none;user-select:none
}
.pm-timeline-resizer::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:var(--line)}
.pm-timeline-resizer:hover::before{top:2px;height:4px;background:#ff6900}
.pm-timeline-header{
  flex:0 0 45px;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:10px;
  padding:5px 8px;border:1px solid var(--line);border-bottom:0;
  border-radius:6px 6px 0 0;background:var(--panel)
}
.pm-timeline-header>div:first-child{display:flex;flex-direction:column;gap:1px}
.pm-timeline-header>div:first-child span{font-size:9px;color:var(--muted)}
.pm-period-center{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px}
.pm-period-center span{color:var(--muted)}
.pm-timeline-header>div:last-child{justify-self:end}
.pm-timeline{
  flex:1 1 auto;min-height:0;
  overflow:auto;border:1px solid var(--line);
  border-radius:0 0 6px 6px;background:var(--panel)
}
.pm-timeline-empty{
  min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;text-align:center;color:var(--muted)
}
.pm-timeline-empty b{color:var(--text)}
.pm-timeline-head{
  min-height:31px;display:grid;
  position:sticky;top:0;z-index:5;background:var(--panel2);
  border-bottom:1px solid var(--line)
}
.pm-timeline-head>div{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--line);font-size:9px
}
.pm-timeline-head>div:first-child{align-items:flex-start;padding-left:8px}
.pm-timeline-head small{color:var(--muted);font-size:8px}
.pm-timeline-item{
  display:grid;
  grid-template-rows:32px auto;
  border-bottom:1px solid var(--line)
}
.pm-timeline-name{
  grid-row:1 / span 2;
  position:sticky;left:0;z-index:3;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:4px 8px;background:var(--panel2);border-right:1px solid var(--line)
}
.pm-timeline-name b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-timeline-name span{font-size:8px;color:var(--muted)}
.pm-timeline-cells{
  display:grid;grid-column:2;grid-row:1
}
.pm-timeline-cell{
  min-height:32px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(34,197,94,.06)
}
.pm-timeline-cell b{font-size:9px}
.pm-timeline-cell small{font-size:7px;color:#8fd4ff}
.pm-timeline-cell.partial{background:rgba(245,158,11,.08)}
.pm-timeline-cell.current-project{background:rgba(67,132,255,.12)}
.pm-timeline-cell.none{background:rgba(239,68,68,.12)}
.pm-timeline-bars{
  grid-column:2;grid-row:2;
  display:grid;min-height:23px;position:relative
}
.pm-timeline-project{
  grid-column:calc(var(--start) + 1) / span var(--span);
  min-width:0;height:18px;margin:2px;padding:1px 5px;
  border:1px solid rgba(255,255,255,.15);border-radius:3px;
  background:rgba(110,115,125,.55);color:var(--text);
  text-align:left;cursor:pointer;overflow:hidden
}
.pm-timeline-project.current{background:rgba(67,132,255,.72);border-color:rgba(130,185,255,.8)}
.pm-timeline-project span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pm-reserve-modal{width:min(760px,calc(100vw - 40px))}
.pm-reserve-list{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:6px;margin:12px 0}
.pm-reserve-row{
  min-height:62px;display:grid;grid-template-columns:minmax(0,1fr) 120px 100px;
  align-items:center;gap:12px;padding:7px 10px;border-bottom:1px solid var(--line)
}
.pm-reserve-row:last-child{border-bottom:0}
.pm-reserve-row>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.pm-reserve-row>div:first-child span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-reserve-available{display:flex;flex-direction:column;gap:2px}
.pm-reserve-row label{display:flex;flex-direction:column;gap:3px}
.pm-reserve-row small{font-size:8px;color:var(--muted)}
.pm-reserve-row input{height:31px}
.danger-text{color:#ff7171}

/* Project tabs get the same compact full-width treatment as Materialen. */
.project-detail:has(.pm-page),
.project-tab-content:has(.pm-page),
#projectTabContent:has(.pm-page){
  max-width:none!important;
  width:100%!important
}
@media(max-width:1100px){
  .pm-main-stack{height:auto;min-height:620px}
  .pm-workspace{--pm-left:280px}
  .pm-planned-header,.pm-planned-row{grid-template-columns:28px 65px minmax(180px,1fr) 90px 90px 110px}
  .pm-timeline-header{grid-template-columns:1fr auto}
  .pm-period-center{grid-column:1 / span 2;grid-row:2}
}


/* ============================================================
   Beta 4.45 — Projectmateriaal: tree-selector + groepen
   ============================================================ */
.pm-workspace{--pm-left:420px!important;grid-template-columns:var(--pm-left) 12px minmax(0,1fr)!important}
.pm-catalog{min-width:300px!important;max-width:720px!important}
.pm-splitter{
  width:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:col-resize!important;background:rgba(255,255,255,.012)
}
.pm-splitter::before{left:5px!important;width:2px!important}
.pm-splitter:hover::before{left:4px!important;width:4px!important}
.pm-splitter span{position:relative;z-index:2;font-size:14px;color:var(--muted);writing-mode:vertical-rl;pointer-events:none}
.pm-search{margin:9px 9px 5px!important}
.pm-quick-add{
  display:none;min-height:48px;margin:0 9px 7px;padding:6px 7px;
  border:1px solid rgba(120,150,255,.32);border-radius:5px;background:rgba(90,90,255,.07);
  align-items:center;justify-content:space-between;gap:8px
}
.pm-quick-add.visible{display:flex}
.pm-quick-add>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.pm-quick-add small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pm-quick-add b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-tree-help{
  flex:0 0 auto;padding:6px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:8px;font-weight:800;color:var(--muted);letter-spacing:.11em;text-transform:uppercase
}
.pm-tree{flex:1 1 auto;min-height:0;overflow:auto;padding:3px 0 12px}
.pm-tree-folder{display:block}
.pm-tree-folder-head{
  min-height:31px;display:grid;grid-template-columns:14px 15px minmax(0,1fr) 28px;align-items:center;gap:4px;
  padding-left:calc(8px + (var(--depth,0) * 14px));padding-right:7px;color:var(--text)
}
.pm-tree-folder-head:hover{background:rgba(255,255,255,.025)}
.pm-tree-folder-head b{font-size:10px}
.pm-tree-folder-head small{text-align:right;color:var(--muted);font-size:8px}
.pm-tree-material{
  width:100%;min-height:39px;border:0;border-left:2px solid transparent;background:transparent;color:var(--text);
  display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:4px;text-align:left;
  padding:3px 8px 3px calc(15px + (var(--depth,0) * 14px));cursor:pointer
}
.pm-tree-material:hover{background:rgba(255,255,255,.035)}
.pm-tree-material.selected{background:rgba(91,92,255,.13);border-left-color:#7668ff}
.pm-tree-dot{color:var(--muted);font-size:10px}
.pm-tree-material.selected .pm-tree-dot{color:#8e85ff;font-weight:900}
.pm-tree-material-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-tree-material-name b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-tree-material-name small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Oude dubbele catalogusdelen zijn niet meer in de Project > Materiaal DOM. */
.pm-folder-browser,.pm-catalog-head,.pm-catalog-items,.pm-subfolders{display:none!important}

.pm-planned-groups{flex:1 1 auto;min-height:0;overflow:auto;padding:8px}
.pm-material-group{border:1px solid var(--line);border-radius:6px;margin-bottom:8px;overflow:hidden;background:var(--panel2)}
.pm-material-group:last-child{margin-bottom:0}
.pm-material-group-head{
  min-height:45px;padding:5px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)
}
.pm-material-group-head>div:first-child{display:flex;align-items:center;gap:7px;min-width:0}
.pm-material-group-head>div:first-child>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.pm-material-group-head b{font-size:10px}
.pm-material-group-head small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-group-color{width:7px;height:26px;border-radius:4px;flex:0 0 7px}
.pm-material-group .pm-planned-header{position:static!important}
.pm-material-group .pm-planned-row{background:transparent}
.pm-material-group .pm-empty.small{min-height:65px;font-size:9px}
.pm-planned{min-width:0!important}
.pm-planned-table{overflow:visible!important}
.pm-quick-add-modal{width:min(520px,calc(100vw - 40px))}
.pm-add-summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;
  min-height:42px;padding:7px 9px;margin:10px 0;border:1px solid var(--line);border-radius:5px;background:var(--panel2)
}
.pm-add-summary span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-add-summary b{font-size:10px;color:#64d68a}
.form-actions .spacer{flex:1}
@media(max-width:1100px){
 .pm-workspace{--pm-left:340px!important}
 .pm-catalog{max-width:520px!important}
}


/* ============================================================
   Beta 4.45 — projectmateriaal refinements
   ============================================================ */
.pm-workspace{--pm-left:360px!important;grid-template-columns:var(--pm-left) 8px minmax(0,1fr)!important}
.pm-catalog{min-width:280px!important;max-width:760px!important}
.pm-splitter{width:8px!important;background:transparent!important;border-left:1px solid transparent;border-right:1px solid transparent}
.pm-splitter::before{left:3px!important}
.pm-splitter:hover{background:rgba(255,105,0,.05)!important}
.pm-splitter:hover::before{left:2px!important}
.pm-splitter span{display:none!important}

.pm-quick-add{min-height:34px!important;margin:0 9px 6px!important;padding:4px 5px 4px 7px!important;gap:6px!important}
.pm-quick-add>div{max-width:calc(100% - 88px)}
.pm-quick-add button{min-height:27px!important;height:27px!important;width:auto!important;min-width:74px!important;padding:0 9px!important;font-size:var(--sa-text-label)!important;white-space:nowrap!important}
.pm-quick-add small{font-size:7px!important}
.pm-quick-add b{font-size:9px!important}

.pm-planned-groups{overflow:auto!important}
.pm-material-group{min-width:max-content}
.pm-material-group .pm-planned-header,.pm-material-group .pm-planned-row{width:100%;min-width:1050px}
.pm-planned-header span,.pm-planned-row>span{padding-left:5px!important;padding-right:5px!important}
.pm-extra-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pm-material-group[data-group]:not([data-group=""]){cursor:default}
.pm-material-group.selected-group{box-shadow:inset 0 0 0 1px rgba(255,105,0,.8)}
.pm-material-group.selected-group>.pm-material-group-head{background:rgba(255,105,0,.08)}
.pm-material-group-head{cursor:pointer}
.pm-group-color{width:9px!important;height:30px!important}

.pm-group-editor{width:min(720px,calc(100vw - 42px))}
.pm-group-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm-color-field{display:grid;grid-template-columns:48px 1fr;gap:7px}
.pm-color-field input[type="color"]{width:48px!important;height:34px!important;padding:2px!important}
.pm-group-time-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 8px}
.pm-choice-card{display:grid!important;grid-template-columns:18px 1fr;align-items:start;gap:7px;min-height:68px;padding:8px!important;border:1px solid var(--line);border-radius:6px;background:var(--panel2);cursor:pointer}
.pm-choice-card input{margin-top:3px}
.pm-choice-card span{display:flex;flex-direction:column;gap:3px}
.pm-choice-card b{font-size:10px}
.pm-choice-card small{font-size:8px;color:var(--muted);line-height:1.35}
.pm-group-time-panel{border:1px solid var(--line);border-radius:6px;padding:9px;margin-bottom:8px;background:rgba(255,255,255,.015)}

.pm-columns-modal{width:min(650px,calc(100vw - 42px))}
.pm-columns-search{height:35px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:5px;padding:0 8px;margin:10px 0;background:var(--panel2)}
.pm-columns-search input{border:0!important;background:transparent!important;padding:0!important;width:100%}
.pm-column-list{max-height:450px;overflow:auto;border:1px solid var(--line);border-radius:6px}
.pm-column-option{min-height:38px;display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:0 10px!important;border-bottom:1px solid var(--line)}
.pm-column-option:last-child{border-bottom:0}
.pm-column-option:hover{background:rgba(255,255,255,.025)}

@media(max-width:1100px){
  .pm-workspace{--pm-left:320px!important}
  .pm-group-time-choice{grid-template-columns:1fr}
  .pm-group-editor-grid{grid-template-columns:1fr}
}


/* ============================================================
   Beta 4.45 — Projectmateriaal breedtes
   ============================================================ */

/* Linker materiaalkeuze: breder, beter leesbaar en nog steeds sleepbaar. */
.pm-workspace{
  --pm-left:410px!important;
  grid-template-columns:var(--pm-left) 8px minmax(0,1fr)!important;
}
.pm-catalog{
  min-width:330px!important;
  max-width:700px!important;
}

/* Kolommen aanpassen: brede Showarrow-popup in verhouding met de inhoud. */
.pm-columns-modal{
  width:min(860px,calc(100vw - 72px))!important;
  max-width:860px!important;
  min-width:min(720px,calc(100vw - 72px))!important;
}
.modal:has(.pm-columns-modal),
.modal-content:has(.pm-columns-modal){
  width:min(900px,calc(100vw - 56px))!important;
  max-width:900px!important;
}
.pm-columns-modal h2{
  margin-bottom:5px!important;
}
.pm-columns-modal > .muted{
  max-width:760px!important;
  line-height:1.45!important;
}
.pm-columns-search{
  width:100%!important;
}
.pm-column-list{
  width:100%!important;
  max-height:520px!important;
}
.pm-column-option{
  min-height:42px!important;
  padding:0 14px!important;
}
.pm-column-option span{
  font-size:var(--sa-text-label)!important;
}
.pm-column-option input[type="checkbox"]{
  flex:0 0 auto!important;
}
.pm-columns-modal .form-actions{
  margin-top:12px!important;
}

/* Op smallere schermen blijft de popup binnen beeld. */
@media(max-width:900px){
  .pm-columns-modal{
    width:calc(100vw - 34px)!important;
    min-width:0!important;
    max-width:none!important;
  }
  .modal:has(.pm-columns-modal),
  .modal-content:has(.pm-columns-modal){
    width:calc(100vw - 24px)!important;
    max-width:none!important;
  }
  .pm-workspace{
    --pm-left:360px!important;
  }
  .pm-catalog{
    min-width:300px!important;
  }
}


/* ============================================================
   Beta 4.45 — Project > Materiaal
   ============================================================ */

/* Nieuwe breedte-key in JS voorkomt dat een oude, te smalle instelling blijft hangen. */
.pm-workspace{
  --pm-left:480px!important;
  grid-template-columns:var(--pm-left) 10px minmax(0,1fr)!important;
}
.pm-catalog{
  min-width:360px!important;
  max-width:820px!important;
}
.pm-splitter{
  width:10px!important;
  position:relative!important;
  cursor:col-resize!important;
}
.pm-splitter::before{
  left:4px!important;
  width:2px!important;
  background:var(--line)!important;
}
.pm-splitter::after{
  content:"";
  position:absolute;
  top:44%;
  left:2px;
  width:6px;
  height:38px;
  border-radius:4px;
  background:rgba(255,255,255,.08);
}
.pm-splitter:hover::before{
  left:3px!important;
  width:4px!important;
  background:#ff6900!important;
}
.pm-splitter:hover::after{
  background:rgba(255,105,0,.22);
}

/* Multi-select quick action stays compact. */
.pm-quick-add{
  min-height:38px!important;
}
.pm-quick-add>div{
  max-width:calc(100% - 118px)!important;
}
.pm-quick-add button{
  min-width:88px!important;
  max-width:125px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 10px!important;
  font-size:var(--sa-text-label)!important;
}

/* Batch add popup. */
.pm-batch-add-modal{
  width:min(880px,calc(100vw - 60px))!important;
}
.modal:has(.pm-batch-add-modal),
.modal-content:has(.pm-batch-add-modal){
  width:min(920px,calc(100vw - 44px))!important;
  max-width:920px!important;
}
.pm-batch-add-list{
  max-height:470px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:6px;
  margin:10px 0 12px;
}
.pm-batch-add-row{
  min-height:62px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 130px 105px;
  gap:10px;
  align-items:center;
  padding:7px 10px;
  border-bottom:1px solid var(--line);
}
.pm-batch-add-row:last-child{border-bottom:0}
.pm-batch-add-name{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pm-batch-add-name b{
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pm-batch-add-name span{
  font-size:8px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pm-batch-availability{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pm-batch-availability small,
.pm-batch-add-row label small{
  font-size:8px;
  color:var(--muted);
}

/* Totaalregel per materiaalgroep. */
.pm-group-total-row{
  min-height:42px;
  display:grid;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.02);
}
.pm-group-total-row>span{
  min-width:0;
  padding:4px 5px;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pm-group-total-row>span:nth-child(3){
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pm-group-total-row b{
  font-size:9px;
}
.pm-group-total-row small{
  font-size:7px;
  color:var(--muted);
}
.pm-total-na{
  color:var(--muted)!important;
}

@media(max-width:1150px){
  .pm-workspace{
    --pm-left:400px!important;
  }
  .pm-catalog{
    min-width:330px!important;
  }
}


/* ============================================================
   Beta 4.45 — beschikbaarheidsplanning
   ============================================================ */
.pm-timeline-cell small,
.availability-day small{
  display:block;
  margin-top:2px;
  font-size:7px;
  line-height:1.15;
  color:var(--muted);
  white-space:nowrap;
}
.pm-timeline-cell.current-project small{
  color:inherit;
  opacity:.88;
}
.inventory-project-bar,
.pm-timeline-project{
  border-left:3px solid var(--reservation-color,rgba(255,255,255,.22))!important;
}


/* ============================================================
   Beta 5.01 — Project > Materiaal spacing fix
   ============================================================ */
#projectMaterialWorkspace > #projectMaterialCatalog.pm-catalog{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  justify-self:stretch!important;
}

#projectMaterialWorkspace > .pm-planned{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  justify-self:stretch!important;
}

#projectMaterialWorkspace > #projectMaterialSplitter{
  margin:0!important;
  align-self:stretch!important;
}

/* De gridkolommen sluiten nu direct op elkaar aan:
   materiaal | 10px sleepgreep | gepland materiaal. */
#projectMaterialWorkspace.pm-workspace{
  column-gap:0!important;
}


/* ============================================================
   Beta 5.01 — Projectmateriaal inline editing + live refresh
   ============================================================ */

/* Breedte echt sleepbaar maken: geen vaste width/max-width op het paneel zelf. */
#projectMaterialWorkspace.pm-workspace{
  display:grid!important;
  grid-template-columns:var(--pm-left,480px) 10px minmax(0,1fr)!important;
  column-gap:0!important;
}
#projectMaterialCatalog.pm-catalog{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
#projectMaterialSplitter{
  touch-action:none!important;
  user-select:none!important;
}

/* Inline bewerkbare cellen */
.pm-editable-cell{
  cursor:text!important;
  border-radius:4px;
}
.pm-editable-cell:hover{
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.pm-inline-input{
  width:100%!important;
  min-width:58px!important;
  height:25px!important;
  padding:2px 5px!important;
  margin:0!important;
  border:1px solid rgba(120,140,255,.5)!important;
  border-radius:4px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  font-size:var(--sa-text-label)!important;
}

/* Materiaalstatus zonder voorraad-aantal in de tabel. */
.pm-status-dot{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#64748b;
  vertical-align:middle;
}
.pm-status-dot.ok{background:#35c977}
.pm-status-dot.warning{background:#f59e0b}
.pm-status-dot.danger{background:#ef4444}
.pm-status-dot.pending{background:#64748b}


/* ============================================================
   Beta 5.01 — prijs p/s + drag & drop materiaalgroepen
   ============================================================ */

.pm-planned-row[draggable="true"]{
  cursor:grab;
}
.pm-planned-row[draggable="true"]:active{
  cursor:grabbing;
}
.pm-planned-row.dragging{
  opacity:.48;
}
.pm-material-group{
  transition:box-shadow .12s ease,background .12s ease;
}
.pm-material-group.drag-over{
  box-shadow:inset 0 0 0 2px #ff6900!important;
  background:rgba(255,105,0,.06)!important;
}
.pm-material-group.drag-over>.pm-material-group-head{
  background:rgba(255,105,0,.12)!important;
}
.pm-material-group.drag-over>.pm-material-group-head::after{
  content:"Hier neerzetten";
  margin-left:auto;
  padding:3px 7px;
  border:1px solid rgba(255,105,0,.5);
  border-radius:4px;
  font-size:8px;
  color:#ff8a32;
  white-space:nowrap;
}

/* Prijs p/s is net als aantal/staffel/korting direct bewerkbaar. */
.pm-planned-row .pm-editable-cell{
  position:relative;
}
.pm-planned-row .pm-editable-cell:hover::after{
  content:"✎";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-size:7px;
  opacity:.45;
}


/* ============================================================
   Beta 5.01 — materiaalcatalogus drag & drop naar projectgroepen
   ============================================================ */

#projectMaterialCatalog [draggable="true"]{
  cursor:grab!important;
}
#projectMaterialCatalog [draggable="true"]:active{
  cursor:grabbing!important;
}
#projectMaterialCatalog [draggable="true"].dragging{
  opacity:.45!important;
}

.pm-material-group.drag-over{
  position:relative;
  box-shadow:inset 0 0 0 2px #ff6900!important;
  background:rgba(255,105,0,.055)!important;
}
.pm-material-group.drag-over::after{
  content:"Materiaal hier toevoegen";
  position:absolute;
  right:10px;
  top:8px;
  z-index:8;
  padding:4px 8px;
  border:1px solid rgba(255,105,0,.55);
  border-radius:5px;
  background:rgba(14,19,26,.96);
  color:#ff8a32;
  font-size:8px;
  font-weight:700;
  pointer-events:none;
}


/* ============================================================
   Beta 5.01 — catalogus drag & drop fix
   ============================================================ */

#projectMaterialTree .pm-tree-material{
  width:100%;
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:12px 12px minmax(0,1fr)!important;
  align-items:center;
  cursor:grab!important;
  user-select:none;
  -webkit-user-select:none;
}

#projectMaterialTree .pm-tree-material:active{
  cursor:grabbing!important;
}

#projectMaterialTree .pm-tree-material.dragging{
  opacity:.42!important;
}

.pm-tree-drag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:10px;
  color:var(--muted);
  font-size:11px;
  opacity:.45;
}

.pm-tree-material:hover .pm-tree-drag,
.pm-tree-material.selected .pm-tree-drag{
  opacity:.95;
  color:#9aa8ba;
}

.pm-material-group.catalog-drop.drag-over{
  box-shadow:inset 0 0 0 2px #ff6900!important;
  background:rgba(255,105,0,.075)!important;
}

.pm-material-group.catalog-drop.drag-over::after{
  content:"＋ Hier toevoegen"!important;
}


/* ============================================================
   Beta 5.01 — Projectmateriaal kolombreedte definitief herstel
   ============================================================ */

#projectMaterialWorkspace{
  position:relative;
}

#projectMaterialSplitter{
  position:relative!important;
  z-index:20!important;
  width:10px!important;
  min-width:10px!important;
  max-width:10px!important;
  cursor:col-resize!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  pointer-events:auto!important;
}

#projectMaterialSplitter::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:4px!important;
  width:2px!important;
  background:var(--line)!important;
}

#projectMaterialSplitter:hover::before,
body.pm-column-resizing #projectMaterialSplitter::before{
  left:3px!important;
  width:4px!important;
  background:#ff6900!important;
}

body.pm-column-resizing,
body.pm-column-resizing *{
  cursor:col-resize!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* De panelen zelf mogen de gridbreedte niet blokkeren. */
#projectMaterialWorkspace > #projectMaterialCatalog,
#projectMaterialWorkspace > .pm-planned{
  min-width:0!important;
  max-width:none!important;
}

/* Desktop default; JS overschrijft dit tijdens resizen als inline !important. */
#projectMaterialWorkspace.pm-workspace{
  --pm-left:480px!important;
  grid-template-columns:var(--pm-left) 10px minmax(0,1fr)!important;
}


/* ============================================================
   Beta 5.01 — uniforme Showarrow popupbreedtes
   ============================================================ */

/*
  Vanaf nu gebruikt elke modal automatisch één van vier breedtes:
  compact  = eenvoudige waarschuwing/bevestiging
  standard = normaal formulier
  large    = uitgebreid formulier/editor
  wide     = import, configuratie, grote tabellen/wizards

  Nieuwe popup:
    <div data-modal-size="large">...</div>
  of gewoon modal(...); dan wordt standaard automatisch toegepast.
*/

.modal{
  width:min(720px,calc(100vw - 48px))!important;
  max-width:720px!important;
  min-width:0!important;
}

.modal.modal-compact{
  width:min(520px,calc(100vw - 48px))!important;
  max-width:520px!important;
}

.modal.modal-standard{
  width:min(720px,calc(100vw - 48px))!important;
  max-width:720px!important;
}

.modal.modal-large{
  width:min(840px,calc(100vw - 48px))!important;
  max-width:840px!important;
}

.modal.modal-wide{
  width:min(1040px,calc(100vw - 48px))!important;
  max-width:1040px!important;
}

/* De binnenste popupcomponent mag nooit opnieuw de buitenste modal smaller maken. */
.modal > *{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

/* Editors/configurators vullen de door het centrale popup-systeem gekozen breedte. */
.modal:has(> .pm-group-editor) > .pm-group-editor,
.modal:has(> .pm-columns-modal) > .pm-columns-modal,
.modal:has(> .pm-batch-add-modal) > .pm-batch-add-modal,
.modal:has(> .crm-editor) > .crm-editor,
.modal:has(> .crm-import-wizard) > .crm-import-wizard,
.modal:has(> .material-import-wizard) > .material-import-wizard,
.modal:has(> .timeline-manager) > .timeline-manager,
.modal:has(> .inventory-reservation-modal) > .inventory-reservation-modal,
.modal:has(> .folder-manager-modal) > .folder-manager-modal,
.modal:has(> .dashboard-editor) > .dashboard-editor{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Specifiek Groep aanpassen: twee kolommen hebben nu echt voldoende ruimte. */
.modal.modal-large:has(> .pm-group-editor){
  width:min(840px,calc(100vw - 48px))!important;
  max-width:840px!important;
}
.pm-group-editor{
  width:100%!important;
  max-width:none!important;
}

/* Consistente binnenmarges/form spacing voor alle popupformaten. */
.modal h2{
  max-width:100%;
}
.modal input,
.modal select,
.modal textarea{
  box-sizing:border-box;
  max-width:100%;
}

/* Responsief zonder verschillende popupimplementaties per module. */
@media(max-width:760px){
  .modal,
  .modal.modal-compact,
  .modal.modal-standard,
  .modal.modal-large,
  .modal.modal-wide{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    min-width:0!important;
    padding:16px!important;
  }
}


/* ============================================================
   Beta 5.01 — groepsopsomming gepland materiaal
   ============================================================ */
.pm-group-total-edit{
  cursor:text!important;
  font-weight:700;
}
.pm-group-total-edit:hover{
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 0 0 1px rgba(120,140,255,.16);
}
.pm-group-inline-input{
  font-weight:700!important;
}


/* ============================================================
   Beta 5.01 — totaalopsomming gepland materiaal
   ============================================================ */

.pm-overall-summary{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(190px,1fr) repeat(4,minmax(105px,auto));
  align-items:stretch;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.028);
}

.pm-overall-summary-title,
.pm-overall-summary-item{
  min-height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:6px 10px;
  border-right:1px solid var(--line);
  box-sizing:border-box;
}

.pm-overall-summary-item:last-child{
  border-right:0;
}

.pm-overall-summary-title span{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

.pm-overall-summary-title small,
.pm-overall-summary-item small{
  font-size:8px;
  color:var(--muted);
}

.pm-overall-summary-item b{
  font-size:11px;
}

.pm-overall-summary-item.total b{
  font-size:12px;
}

@media(max-width:1100px){
  .pm-overall-summary{
    grid-template-columns:minmax(170px,1fr) repeat(4,minmax(90px,auto));
  }
}


/* ============================================================
   Beta 5.01 — projecttotaal exact uitgelijnd met materiaalgroepen
   ============================================================ */

.pm-overall-summary{
  flex:0 0 auto!important;
  display:grid!important;
  align-items:center!important;
  min-width:1050px!important;
  width:100%!important;
  border-bottom:1px solid var(--line)!important;
  background:rgba(255,255,255,.042)!important;
}

.pm-overall-summary > span{
  min-width:0!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  padding:4px 5px!important;
  box-sizing:border-box!important;
  font-size:var(--sa-text-label)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border-right:0!important;
}

.pm-overall-summary > span.pm-overall-summary-title{
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
}

.pm-overall-summary-title b{
  font-size:var(--sa-text-label)!important;
}

.pm-overall-summary-title small{
  font-size:7px!important;
  color:var(--muted)!important;
}

.pm-overall-summary > span > b{
  font-size:var(--sa-text-label)!important;
}

.pm-overall-total-edit{
  cursor:text!important;
  font-weight:700!important;
}

.pm-overall-total-edit:hover{
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(120,140,255,.18)!important;
}

/* Oude 4.54 card-layout volledig uitschakelen. */
.pm-overall-summary-item{
  display:contents!important;
}


/* ============================================================
   Beta 5.01 — compacte projectwerkmodus voor alle projecttabs
   ============================================================ */

.project-compact-head{
  padding:0!important;
  margin:0 0 8px!important;
  border-radius:9px!important;
  overflow:visible!important;
}

.project-compact-primary{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:7px 10px;
  border-bottom:1px solid var(--line);
  box-sizing:border-box;
}

.project-compact-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.project-compact-back{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:6px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:18px!important;
  line-height:1!important;
}

.project-compact-back:hover{
  color:var(--text)!important;
  background:rgba(255,255,255,.04)!important;
}

.project-compact-title{
  min-width:0;
}

.project-compact-titleline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
}

.project-compact-titleline h1{
  margin:0!important;
  font-size:17px!important;
  line-height:1.1!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-compact-separator{
  color:#536171;
  font-size:9px;
}

.project-compact-number,
.project-compact-period{
  color:#d4dbe5;
  font-size:10px;
  white-space:nowrap;
}

.project-compact-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 7px;
  border:1px solid rgba(53,201,119,.22);
  border-radius:999px;
  background:rgba(53,201,119,.07);
  color:#dcefe4;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}

.project-compact-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.project-details-toggle{
  min-width:78px;
}

.project-details-toggle.active{
  border-color:rgba(255,105,0,.35)!important;
  color:#ff9a53!important;
}

.project-compact-new-task{
  white-space:nowrap;
}

.project-compact-details{
  padding:8px 10px 0;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012);
}

.project-compact-details[hidden]{
  display:none!important;
}

.project-compact-detail-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 7px;
}

.project-compact-detail-name{
  font-size:12px;
  font-weight:800;
}

.project-compact-details .project-meta-strip{
  margin:0!important;
  border-top:1px solid var(--line);
}

.project-compact-details .project-meta-strip>div{
  min-height:45px!important;
  padding:6px 8px!important;
}

.project-compact-details .project-meta-strip span{
  font-size:7px!important;
}

.project-compact-details .project-meta-strip b{
  font-size:9px!important;
  line-height:1.2!important;
}

.project-compact-details .project-meta-sub{
  font-size:7px!important;
}

.project-compact-tabs{
  margin:0!important;
  padding:0 8px!important;
  min-height:36px!important;
  display:flex!important;
  align-items:flex-end!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}

.project-compact-tabs::-webkit-scrollbar{
  display:none;
}

.project-compact-tabs .project-rentman-tab{
  min-height:35px!important;
  padding:7px 10px 6px!important;
  font-size:var(--sa-text-label)!important;
  flex:0 0 auto;
}

.project-client-notice-compact{
  max-width:210px;
  min-height:25px!important;
  padding:3px 7px!important;
}

.project-client-notice-compact .project-client-notice-copy small{
  font-size:6px!important;
}

.project-client-notice-compact .project-client-notice-copy b{
  max-width:145px;
  font-size:var(--sa-text-label)!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-compact-workspace{
  margin-top:0!important;
  min-height:0!important;
}

/* Projecttabs krijgen werkruimte in plaats van extra statische marge. */
.project-compact-workspace > .toolbar:first-child,
.project-compact-workspace > .project-workspace-toolbar:first-child{
  margin-top:0!important;
}

/* Op smallere desktopbreedtes verbergen we eerst minder belangrijke compacte metadata. */
@media(max-width:1250px){
  .project-compact-period{
    display:none;
  }
}

@media(max-width:1050px){
  .project-compact-number,
  .project-compact-separator{
    display:none;
  }
  .project-client-notice-compact{
    display:none!important;
  }
}

@media(max-width:850px){
  .project-compact-primary{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .project-compact-actions{
    margin-left:auto;
  }
}


/* ============================================================
   Beta 5.01 — duidelijke compacte projectwerkbalk
   ============================================================ */

/* Hele projectheader wordt echt een werkbalk in plaats van een kaart. */
.project-compact-head{
  border-radius:7px!important;
  background:#111820!important;
  border:1px solid #2a3440!important;
  box-shadow:none!important;
  overflow:hidden!important;
  margin-bottom:6px!important;
}

/* Eerste regel nog compacter. */
.project-compact-primary{
  min-height:42px!important;
  height:42px!important;
  padding:4px 8px!important;
  background:#111820!important;
  border-bottom:1px solid #2a3440!important;
}

.project-compact-titleline{
  gap:7px!important;
}

.project-compact-titleline h1{
  font-size:16px!important;
  line-height:1!important;
}

.project-compact-meta{
  display:inline-flex;
  align-items:center;
  color:#aeb9c6;
  font-size:9px;
  font-weight:600;
  white-space:nowrap;
  padding-left:8px;
  border-left:1px solid #34404d;
}

.project-compact-status{
  padding:2px 7px!important;
  font-size:8px!important;
}

.project-compact-back{
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
}

.project-details-toggle,
.project-compact-new-task{
  min-height:29px!important;
  height:29px!important;
  padding:4px 10px!important;
  font-size:var(--sa-text-label)!important;
}

/* Duidelijke aparte menubalk zoals in de render. */
.project-compact-tabs{
  height:38px!important;
  min-height:38px!important;
  padding:0 6px!important;
  background:#0d131a!important;
  border-top:0!important;
  border-bottom:0!important;
  align-items:stretch!important;
  gap:2px!important;
}

.project-compact-tabs .project-rentman-tab{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  height:38px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#a9b5c3!important;
  font-size:var(--sa-text-label)!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  opacity:1!important;
}

.project-compact-tabs .project-rentman-tab:hover{
  color:#f2f6fb!important;
  background:rgba(255,255,255,.035)!important;
}

.project-compact-tabs .project-rentman-tab.active{
  color:#fff!important;
  background:rgba(255,105,0,.055)!important;
}

.project-compact-tabs .project-rentman-tab.active::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:#ff6900;
}

.project-tab-label{
  white-space:nowrap;
}

/* Details is bewust de enige plek waar de grote projectmetadata terugkomt. */
.project-compact-details{
  padding:6px 8px 0!important;
  background:#0e151c!important;
}

.project-compact-details .project-meta-strip>div{
  min-height:40px!important;
  padding:4px 7px!important;
}

/* In de werkomgeving minder marge boven titels en toolbars. */
.project-compact-workspace{
  margin-top:0!important;
}

.project-compact-workspace > h1:first-child,
.project-compact-workspace > h2:first-child{
  margin-top:4px!important;
  margin-bottom:2px!important;
}

.project-compact-workspace > .toolbar:first-child,
.project-compact-workspace > .project-workspace-toolbar:first-child{
  min-height:42px!important;
  margin:0 0 6px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Materiaal: title/action zone dichter op het werkvlak. */
.project-compact-workspace .project-material-head,
.project-compact-workspace .pm-page-head{
  margin-bottom:4px!important;
}

/* Groot scherm: ruimte maximaal aan de inhoud geven. */
@media(min-width:1200px){
  .project-compact-workspace{
    padding-top:0!important;
  }
}

/* Smal scherm: laat metadata weg vóór het menu onleesbaar wordt. */
@media(max-width:1150px){
  .project-compact-meta:nth-of-type(2){
    display:none!important;
  }
}


/* ============================================================
   Beta 5.01 — projectinformatie echt bovenin + globale titels weg
   ============================================================ */

/* Geen statische "LIVE OPERATIONS PLATFORM + paginanaam" meer. */
.app-topbar{
  min-height:56px!important;
  height:56px!important;
  padding:7px 12px!important;
  align-items:center!important;
  gap:12px!important;
}

.page-context{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
}

.page-context:empty{
  display:block;
}

/* Search/modules/theme/status blijven rechtsboven. */
.app-topbar .header-tools{
  margin-left:auto!important;
  flex:0 0 auto!important;
}

/* Projectinformatie staat nu echt in de bovenste applicatiebalk. */
.project-top-context{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
}

.project-context-back{
  flex:0 0 27px;
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:5px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:17px!important;
}

.project-context-main{
  min-width:0;
  flex:1 1 auto;
}

.project-context-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.project-context-line > strong{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
  font-size:15px;
}

.project-context-line > span:not(.project-context-status){
  padding-left:7px;
  border-left:1px solid #34404d;
  color:#a9b4c1;
  font-size:8px;
  font-weight:650;
}

.project-context-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(53,201,119,.08);
  border:1px solid rgba(53,201,119,.25);
  font-size:8px;
  font-weight:700;
}

.project-context-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}

.project-context-actions button{
  height:29px!important;
  min-height:29px!important;
  padding:4px 9px!important;
  font-size:var(--sa-text-label)!important;
}

/* De projectomgeving zelf begint direct met de projectnavigatie. */
.project-shell-compact{
  margin-top:0!important;
}

.project-render-tabs{
  height:40px!important;
  min-height:40px!important;
  margin:0 0 5px!important;
  padding:0 4px!important;
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  background:#111820!important;
  border:1px solid #2a3440!important;
  border-radius:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}

.project-render-tabs::-webkit-scrollbar{
  display:none;
}

.project-render-tabs .project-rentman-tab{
  position:relative!important;
  height:39px!important;
  min-height:39px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#aeb9c6!important;
  font-size:var(--sa-text-label)!important;
  font-weight:700!important;
  opacity:1!important;
}

.project-render-tabs .project-rentman-tab:hover{
  color:#fff!important;
  background:rgba(255,255,255,.035)!important;
}

.project-render-tabs .project-rentman-tab.active{
  color:#fff!important;
  background:rgba(255,105,0,.055)!important;
}

.project-render-tabs .project-rentman-tab.active::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:0;
  height:2px;
  background:#ff6900;
  border-radius:2px 2px 0 0;
}

/* Details verschijnt direct tussen topbar en menubalk, niet als tweede projectheader. */
.project-details-top{
  margin:0 0 5px!important;
  padding:0!important;
  border:1px solid #2a3440!important;
  border-radius:6px!important;
  background:#111820!important;
  overflow:hidden!important;
}

.project-details-top .project-meta-strip{
  margin:0!important;
  border:0!important;
}

.project-details-top .project-meta-strip>div{
  min-height:42px!important;
  padding:5px 7px!important;
}

/* Werkruimte begint zonder overbodige topmarge. */
.project-compact-workspace{
  margin:0!important;
  padding-top:0!important;
}

/* Oude 4.56/4.57 projectkaart wordt niet meer gebruikt; veilig verbergen mocht cache markup bestaan. */
.project-rentman-head.project-compact-head{
  display:none!important;
}

/* Desktop: projectinformatie en globale tools naast elkaar. */
@media(max-width:1320px){
  .project-context-line > span:nth-of-type(2){
    display:none;
  }
}

@media(max-width:1120px){
  .project-context-line > span:not(.project-context-status){
    display:none;
  }
}


/* ============================================================
   Beta 5.01 — Projectomgeving volgens goedgekeurde render
   ============================================================ */

/* Meer scherm voor het werk zelf. */
main{
  padding-top:8px!important;
  padding-bottom:8px!important;
}

/* Bovenste projectcontext zoals de render: compact, rustig, één lijn. */
.app-topbar{
  height:58px!important;
  min-height:58px!important;
  padding:8px 18px!important;
  border-bottom:0!important;
}

.project-top-context{
  gap:10px!important;
}

.project-context-back{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:6px!important;
}

.project-context-line{
  gap:9px!important;
}

.project-context-line > strong{
  font-size:16px!important;
  font-weight:800!important;
  max-width:320px!important;
}

.project-context-line > span:not(.project-context-status){
  font-size:9px!important;
  padding-left:9px!important;
}

.project-context-status{
  min-height:22px!important;
  padding:2px 8px!important;
  font-size:8px!important;
}

.project-context-actions{
  gap:7px!important;
}

.project-context-actions button{
  height:32px!important;
  min-height:32px!important;
  padding:0 11px!important;
  font-size:var(--sa-text-label)!important;
}

/* Zoek/Modules/Licht/Online visueel in dezelfde hoogte als de render. */
.app-topbar .header-tools{
  gap:8px!important;
}
.app-topbar .header-tools input,
.app-topbar .header-tools button{
  min-height:38px!important;
}

/* Losse duidelijke projecttabbalk. */
.project-render-tabs{
  height:46px!important;
  min-height:46px!important;
  margin:0 0 8px!important;
  padding:0 8px!important;
  border-radius:7px!important;
  background:#111820!important;
}

.project-render-tabs .project-rentman-tab{
  height:45px!important;
  min-height:45px!important;
  padding:0 14px!important;
  font-size:var(--sa-text-label)!important;
}

.project-render-tabs .project-rentman-tab.active::after{
  left:10px!important;
  right:10px!important;
  height:2px!important;
}

/* Details-paneel blijft compact als het open staat. */
.project-details-top{
  margin-bottom:7px!important;
}

/* ------------------------------------------------------------
   Materiaal: exacte verhoudingen van de goedgekeurde render
   ------------------------------------------------------------ */

.pm-page{
  height:calc(100vh - 124px)!important;
  min-height:620px!important;
  overflow:hidden!important;
}

.pm-toolbar{
  flex:0 0 58px!important;
  min-height:58px!important;
  height:58px!important;
  margin:0!important;
  padding:0 2px 7px!important;
  align-items:center!important;
}

.pm-toolbar > div:first-child{
  min-width:210px;
}

.pm-toolbar h2{
  margin:0 0 2px!important;
  font-size:22px!important;
  line-height:1!important;
}

.pm-toolbar > div:first-child > .muted{
  font-size:11px!important;
}

.pm-toolbar-actions{
  gap:6px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  scrollbar-width:none;
}
.pm-toolbar-actions::-webkit-scrollbar{display:none}

.pm-toolbar-actions button{
  height:39px!important;
  min-height:39px!important;
  padding:0 13px!important;
  border-radius:6px!important;
  white-space:nowrap!important;
}

/* Main stack vult nu daadwerkelijk alle resterende schermhoogte. */
.pm-main-stack{
  height:auto!important;
  min-height:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  overflow:hidden!important;
}

/* Bovenste planner krijgt alle ruimte die niet door beschikbaarheid gebruikt wordt. */
.pm-workspace{
  --pm-left:360px!important;
  flex:1 1 auto!important;
  min-height:300px!important;
  grid-template-columns:var(--pm-left) 10px minmax(0,1fr)!important;
  column-gap:0!important;
}

/* Linker materiaalbrowser, zoals render. */
.pm-catalog{
  border-radius:7px!important;
  background:#111820!important;
}

.pm-search{
  height:42px!important;
  margin:10px 10px 7px!important;
  padding:0 10px!important;
  border-radius:6px!important;
}

.pm-tree-help{
  min-height:31px!important;
  padding:7px 10px!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  letter-spacing:.08em!important;
}

.pm-tree{
  padding:3px 0 5px!important;
}

.pm-tree-folder-head{
  min-height:31px!important;
}

#projectMaterialTree .pm-tree-material{
  min-height:39px!important;
}

.pm-tree-material-name b{
  font-size:var(--sa-text-label)!important;
}

.pm-tree-material-name small{
  font-size:7px!important;
}

/* In de render is de geselecteerde balk alleen zichtbaar wanneer er iets geselecteerd is. */
.pm-quick-add:has(#projectMaterialSelectedLabel:empty){
  display:none!important;
}

/* Verticale resizegreep subtieler. */
#projectMaterialSplitter{
  width:10px!important;
  min-width:10px!important;
}
#projectMaterialSplitter::after{
  display:none!important;
}

/* Gepland materiaal - rustige grote werkkaart. */
.pm-planned{
  border-radius:7px!important;
  background:#111820!important;
}

.pm-planned-head{
  min-height:62px!important;
  padding:10px 13px!important;
}

.pm-planned-head b{
  font-size:15px!important;
}

.pm-planned-head>div:first-child span{
  font-size:var(--sa-text-label)!important;
}

.pm-period-pill{
  min-height:30px!important;
  padding:0 9px!important;
  font-size:var(--sa-text-label)!important;
}

/* Projecttotaal precies als aparte samenvattingsbalk. */
.pm-overall-summary{
  min-height:58px!important;
  background:rgba(255,255,255,.045)!important;
  border-bottom:1px solid var(--line)!important;
}

.pm-overall-summary > span{
  min-height:58px!important;
  padding:5px 7px!important;
}

.pm-overall-summary-title b{
  font-size:var(--sa-text-label)!important;
}

.pm-overall-summary-title small{
  font-size:7px!important;
}

/* Groepen compacter, maar materiaalregels comfortabel leesbaar. */
.pm-planned-groups{
  padding:8px 10px 10px!important;
}

.pm-material-group{
  margin-bottom:10px!important;
  border-radius:7px!important;
  background:#111820!important;
}

.pm-material-group-head{
  min-height:56px!important;
  padding:7px 9px!important;
}

.pm-group-color{
  width:7px!important;
  height:32px!important;
}

.pm-material-group-head b{
  font-size:var(--sa-text-label)!important;
}

.pm-material-group-head small{
  font-size:7px!important;
}

.pm-material-group .pm-planned-header{
  min-height:40px!important;
  background:rgba(255,255,255,.018)!important;
}

.pm-material-group .pm-planned-row{
  min-height:49px!important;
}

.pm-group-total-row{
  min-height:47px!important;
  background:rgba(255,255,255,.035)!important;
}

.pm-material-group .pm-planned-header span,
.pm-material-group .pm-planned-row>span,
.pm-group-total-row>span{
  padding-left:7px!important;
  padding-right:7px!important;
}

/* ------------------------------------------------------------
   Beschikbaarheid: geen lege onderkant meer.
   De timeline blijft resizebaar, maar de default is de renderhoogte.
   ------------------------------------------------------------ */

.pm-timeline-area{
  --pm-timeline-height:205px;
  flex:0 0 var(--pm-timeline-height)!important;
  min-height:150px!important;
  max-height:420px!important;
}

.pm-timeline-resizer{
  flex:0 0 9px!important;
}

.pm-timeline-header{
  flex:0 0 57px!important;
  min-height:57px!important;
  padding:7px 10px!important;
  border-radius:7px 7px 0 0!important;
}

.pm-timeline-header b{
  font-size:14px!important;
}

.pm-timeline-header>div:first-child span{
  font-size:var(--sa-text-label)!important;
}

.pm-period-center{
  font-size:var(--sa-text-label)!important;
}

.pm-timeline{
  border-radius:0 0 7px 7px!important;
}

.pm-timeline-head{
  min-height:43px!important;
}

.pm-timeline-item{
  grid-template-rows:52px auto!important;
}

.pm-timeline-name{
  min-height:52px!important;
  justify-content:center!important;
}

.pm-timeline-cell{
  min-height:52px!important;
}

.pm-timeline-cell b{
  font-size:11px!important;
}

/* Cards gebruiken praktisch de volledige breedte van de projectomgeving. */
.project-compact-workspace,
.project-shell-compact{
  width:100%!important;
  max-width:none!important;
}

/* De goedgekeurde render gebruikt een strakke 18px buitenmarge. */
@media(min-width:1200px){
  main{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

/* Kleinere laptops houden dezelfde verhouding zonder horizontale overflow. */
@media(max-width:1200px){
  .pm-workspace{
    --pm-left:330px!important;
  }
  .pm-toolbar-actions button{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}


/* ============================================================
   Beta 5.01 — projectworkspace exact binnen schermhoogte
   ============================================================ */

body.project-workspace-active{
  height:100dvh!important;
  overflow:hidden!important;
}

body.project-workspace-active .layout{
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}

body.project-workspace-active main{
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

body.project-workspace-active .app-topbar{
  flex:0 0 58px!important;
  height:58px!important;
  min-height:58px!important;
  margin:0!important;
}

body.project-workspace-active #content{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

body.project-workspace-active .project-shell-compact{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

body.project-workspace-active .project-render-tabs{
  flex:0 0 46px!important;
  height:46px!important;
  min-height:46px!important;
  margin-bottom:5px!important;
}

body.project-workspace-active .project-details-top:not([hidden]){
  flex:0 0 auto!important;
}

body.project-workspace-active .project-compact-workspace{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

body.project-workspace-active .pm-page{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
}

body.project-workspace-active .pm-toolbar{
  flex:0 0 54px!important;
  min-height:54px!important;
  height:54px!important;
  padding-bottom:5px!important;
}

body.project-workspace-active .pm-main-stack{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
}

body.project-workspace-active .pm-workspace{
  min-height:0!important;
}

body.project-workspace-active .pm-timeline-area{
  min-height:138px!important;
}

/* Geen ongebruikte bodyruimte onder de planner; alleen interne panelen scrollen. */
body.project-workspace-active .pm-catalog,
body.project-workspace-active .pm-planned,
body.project-workspace-active .pm-planned-groups,
body.project-workspace-active .pm-tree{
  min-height:0!important;
}

@supports not (height:100dvh){
  body.project-workspace-active,
  body.project-workspace-active .layout,
  body.project-workspace-active main{
    height:100vh!important;
  }
}


/* ============================================================
   Beta 5.01 — compacte projecttabs + echte timeline close
   ============================================================ */

/* Materiaaltijdlijn écht volledig sluiten.
   Deze regel staat bewust na de 4.60 viewportregels en heeft hogere specificiteit. */
body.project-workspace-active .pm-timeline-area.collapsed{
  display:none!important;
  flex:0 0 0!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Alle NIET-materiaal tabs krijgen een eigen interne scrollbar.
   Daardoor blijft de compacte projectheader altijd staan en wordt de pagina
   nooit onderaan afgesneden. */
body.project-workspace-active #projectTabContent:not(.project-material-tab){
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:0 2px 6px 0!important;
  scrollbar-gutter:stable;
}

/* Normale tab toolbars gelijk trekken met de compacte materiaal-toolbar. */
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .toolbar,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-workspace-toolbar,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-communication-head{
  min-height:48px!important;
  margin:0 0 7px!important;
  padding:4px 2px!important;
  gap:10px!important;
}

body.project-workspace-active #projectTabContent:not(.project-material-tab) > .toolbar h2,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-workspace-toolbar h2,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-communication-head h2{
  margin:0 0 2px!important;
  font-size:18px!important;
  line-height:1.05!important;
}

body.project-workspace-active #projectTabContent:not(.project-material-tab) > .toolbar .muted,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-workspace-toolbar .muted,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-communication-head .muted{
  font-size:var(--sa-text-label)!important;
}

/* Controls binnen projecttabs compacter. */
body.project-workspace-active #projectTabContent:not(.project-material-tab) .planning-toolbar{
  gap:5px!important;
}
body.project-workspace-active #projectTabContent:not(.project-material-tab) .planning-toolbar button,
body.project-workspace-active #projectTabContent:not(.project-material-tab) .planning-toolbar select,
body.project-workspace-active #projectTabContent:not(.project-material-tab) .planning-toolbar input,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .toolbar button,
body.project-workspace-active #projectTabContent:not(.project-material-tab) > .project-workspace-toolbar button{
  min-height:32px!important;
  height:32px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  font-size:var(--sa-text-label)!important;
}

/* Tabellen/lijsten: meer regels in beeld zonder leesbaarheid te verliezen. */
body.project-workspace-active #projectTabContent:not(.project-material-tab) .card:not(.project-info-card){
  padding:11px!important;
  border-radius:7px!important;
}
body.project-workspace-active #projectTabContent:not(.project-material-tab) table th,
body.project-workspace-active #projectTabContent:not(.project-material-tab) table td{
  padding:8px 9px!important;
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent:not(.project-material-tab) table th{
  font-size:9px!important;
}
body.project-workspace-active #projectTabContent:not(.project-material-tab) .project-task-row{
  min-height:46px!important;
  padding:7px 8px!important;
}

/* ------------------------------------------------------------
   Overzicht specifiek: dezelfde compacte informatiedichtheid als Materiaal.
   ------------------------------------------------------------ */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-kpis{
  gap:6px!important;
  margin:0 0 7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-kpis .project-kpi{
  min-height:52px!important;
  height:52px!important;
  padding:6px 9px!important;
  border-radius:7px!important;
  gap:7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-kpi>span{
  font-size:16px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-kpi b{
  font-size:16px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-kpi small{
  margin-top:1px!important;
  font-size:var(--sa-text-label)!important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-main-grid{
  gap:7px!important;
  margin-bottom:7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-main-grid .card{
  min-height:0!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-card-heading{
  min-height:36px!important;
  padding:7px 9px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-card-heading h2{
  font-size:11px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-card-heading .muted{
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-card-heading .secondary.small{
  min-height:27px!important;
  height:27px!important;
  padding:0 8px!important;
  font-size:var(--sa-text-label)!important;
}

/* Projectinformatie compacter: dit scheelt vooral veel hoogte in Overzicht. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-section-title{
  padding:5px 8px!important;
  font-size:7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-field,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-contact-primary{
  min-height:35px!important;
  padding:5px 7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-field span,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-contact-primary span{
  font-size:7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-field b,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-contact-primary b{
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-description{
  padding:6px 8px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-description span{
  font-size:7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-description b{
  font-size:var(--sa-text-label)!important;
}

/* Timeline + next tasks op overzicht compacter. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .mini-gantt{
  padding:0 9px 8px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .mini-gantt-head{
  padding:4px 0!important;
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .mini-gantt-row{
  min-height:29px!important;
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .mini-gantt-row b{
  font-size:9px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .next-task-list{
  padding:0 9px 8px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .next-task-row{
  min-height:34px!important;
}

/* Actiecentrum + recente activiteiten dichter tegen het hoofdblok. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-bottom-grid{
  gap:7px!important;
  margin-top:7px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .ops-alert,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .ops-activity{
  min-height:35px!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
}

/* Tijdlijn / planning kaarten gebruiken de beschikbare werkhoogte beter. */
body.project-workspace-active #projectTabContent[data-active-tab="timelines"] .project-plan-period{
  margin:0 0 7px!important;
  padding:7px 9px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="timelines"] .timeline-gantt-card,
body.project-workspace-active #projectTabContent[data-active-tab="planning"] .gantt-card{
  margin-bottom:6px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="timelines"] .gantt-row,
body.project-workspace-active #projectTabContent[data-active-tab="planning"] .gantt-row{
  min-height:38px!important;
}

/* Chat moet juist de resterende hoogte vullen in plaats van onder de viewport lopen. */
body.project-workspace-active #projectTabContent[data-active-tab="chat"]{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="chat"] .project-communication-head{
  flex:0 0 48px!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="chat"] .project-chat-layout{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="chat"] .project-chat-sidebar,
body.project-workspace-active #projectTabContent[data-active-tab="chat"] .project-chat-window{
  min-height:0!important;
  height:100%!important;
}

/* Lege werkruimtes hoeven geen enorm paneel te zijn. */
body.project-workspace-active #projectTabContent:not(.project-material-tab) .project-empty-workspace{
  min-height:180px!important;
  padding:24px!important;
}


/* ============================================================
   Beta 5.01 — compactere geplande materiaalregels
   Tekstgrootte blijft exact gelijk.
   ============================================================ */

/* Materiaalregels compacter door alleen verticale padding te reduceren. */
body.project-workspace-active .project-material-tab .pm-planned-table tbody tr:not(.pm-group-total-row):not(.pm-project-total-row) > td,
body.project-workspace-active .project-material-tab .pm-planned-table tbody tr:not(.pm-group-total-row):not(.pm-project-total-row) > th{
  padding-top:5px!important;
  padding-bottom:5px!important;
}

/* Eventuele controls in de regel volgen dezelfde compacte hoogte,
   zonder font-size te wijzigen. */
body.project-workspace-active .project-material-tab .pm-planned-table tbody td input,
body.project-workspace-active .project-material-tab .pm-planned-table tbody td select,
body.project-workspace-active .project-material-tab .pm-planned-table tbody td button{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* Afwisselende rijachtergrond voor betere horizontale leesbaarheid.
   Groeps-/totaalregels houden hun bestaande eigen styling. */
body.project-workspace-active .project-material-tab .pm-planned-table tbody tr:not(.pm-group-total-row):not(.pm-project-total-row):nth-of-type(odd) > td{
  background-color:rgba(255,255,255,.018)!important;
}
body.project-workspace-active .project-material-tab .pm-planned-table tbody tr:not(.pm-group-total-row):not(.pm-project-total-row):nth-of-type(even) > td{
  background-color:rgba(255,255,255,.045)!important;
}

/* Hover/selectie blijft duidelijk boven de zebra-striping liggen. */
body.project-workspace-active .project-material-tab .pm-planned-table tbody tr:not(.pm-group-total-row):not(.pm-project-total-row):hover > td{
  background-color:rgba(255,255,255,.075)!important;
}


/* ============================================================
   Beta 5.01 — geplande materiaalregels écht compacter
   ============================================================ */

/* De echte materiaalregel is een grid-div, geen tabelrij. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row{
  min-height:38px!important;
  height:38px!important;
}

/* Alleen de verticale ruimte verkleinen; lettergroottes blijven ongemoeid. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span{
  min-height:38px!important;
  height:38px!important;
  padding-top:2px!important;
  padding-bottom:2px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
}

/* Naamkolom mag nog steeds de kleine tweede regel tonen zonder de hele rij op te blazen. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span:nth-child(3){
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:0!important;
}

/* Checkbox en status verticaal gecentreerd. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span:first-child,
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span:last-child{
  justify-content:center!important;
}

/* Zebra-striping op de echte materiaalregels.
   nth-child telt binnen iedere groep, dus de afwisseling start per groep opnieuw. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:nth-of-type(odd){
  background:rgba(255,255,255,.014)!important;
}
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:nth-of-type(even){
  background:rgba(255,255,255,.038)!important;
}

/* De celachtergrond mag de zebra-kleur niet afdekken. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span{
  background:transparent!important;
}

/* Hover en selectie blijven duidelijk. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:hover{
  background:rgba(255,255,255,.07)!important;
}
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.selected{
  background:rgba(104,91,255,.12)!important;
  box-shadow:inset 2px 0 0 #7768ff!important;
}

/* Totaalregel ook iets compacter, tekstgrootte blijft hetzelfde. */
body.project-workspace-active .project-material-tab .pm-group-total-row{
  min-height:38px!important;
  height:38px!important;
}
body.project-workspace-active .project-material-tab .pm-group-total-row > span{
  min-height:38px!important;
  height:38px!important;
  padding-top:2px!important;
  padding-bottom:2px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
}

/* Kolomkop iets minder hoog zodat er daadwerkelijk extra regels in beeld komen. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-header{
  min-height:34px!important;
  height:34px!important;
}
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-header > span{
  min-height:34px!important;
  height:34px!important;
  padding-top:1px!important;
  padding-bottom:1px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
}


/* ============================================================
   Beta 5.01 — Gepland materiaal zoeken + duidelijke tekorten
   ============================================================ */

.pm-planned-head{
  gap:12px!important;
}

.pm-planned-head-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  flex:0 0 auto;
}

.pm-period-pill-large{
  min-height:36px!important;
  height:36px!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  font-size:var(--sa-text-label)!important;
  font-weight:800!important;
  letter-spacing:.01em;
}

.pm-planned-search{
  width:min(330px,27vw);
  min-width:220px;
  height:36px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#10171f;
  color:var(--muted);
  box-sizing:border-box;
}

.pm-planned-search:focus-within{
  border-color:#50657b;
  box-shadow:0 0 0 1px rgba(94,126,160,.14);
}

.pm-planned-search > span{
  flex:0 0 auto;
  font-size:14px;
}

.pm-planned-search input{
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--text)!important;
  font-size:var(--sa-text-label)!important;
}

.pm-planned-search input::placeholder{
  color:#718194;
}

/* Search verbergt alleen geplande materiaalregels/groepen, nooit de catalogus links. */
.pm-material-group.search-hidden{
  display:none!important;
}

/* Rentman-achtige tekortweergave: hele materiaalregel rood. */
body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.shortage{
  background:rgba(150,45,54,.34)!important;
  box-shadow:inset 3px 0 0 #db4d5b!important;
}

body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.shortage > span{
  background:transparent!important;
}

body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.shortage:hover{
  background:rgba(167,49,60,.42)!important;
}

/* Tekortstatus rechts altijd rood. */
body.project-workspace-active .project-material-tab .pm-planned-row.shortage .pm-status-dot{
  background:#e54c5a!important;
  border-color:#e54c5a!important;
  box-shadow:0 0 0 2px rgba(229,76,90,.12)!important;
}

/* Beschikbaarheid = groen; tekort = rood. Geen oranje tussenstatus meer voor tekort. */
body.project-workspace-active .project-material-tab .pm-status-dot.danger{
  background:#e54c5a!important;
  border-color:#e54c5a!important;
}

@media(max-width:1250px){
  .pm-planned-search{
    width:245px;
    min-width:190px;
  }
}


/* ============================================================
   Beta 5.01 — fix zoekfunctie gepland materiaal
   ============================================================ */

/* .pm-planned-row gebruikt display:grid; daardoor werkte het HTML hidden-attribuut
   niet betrouwbaar. Filtering gebruikt nu een expliciete class met !important. */
body.project-workspace-active .project-material-tab .pm-planned-row.planned-search-hidden{
  display:none!important;
}

/* Groep zonder enkele match verdwijnt volledig tijdens zoeken. */
body.project-workspace-active .project-material-tab .pm-material-group.search-hidden{
  display:none!important;
}


/* ============================================================
   Beta 5.01 — projecttabs: kaarten niet meer onnodig uitrekken
   ============================================================ */

/* OVERZICHT
   CSS-grid rekte Tijdlijn en Eerstvolgende taken mee tot de hoogte van
   Projectinformatie. Daardoor ontstonden enorme lege vlakken.
   Kaarten gebruiken voortaan hun eigen inhoudshoogte. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-main-grid,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-bottom-grid{
  align-items:start!important;
  align-content:start!important;
  grid-auto-rows:max-content!important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-main-grid > .card,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-bottom-grid > .card{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}

/* Tijdlijn-overzicht en eerstvolgende taken zijn inhoudskaarten,
   geen full-height kolommen. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-timeline-overview,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-next-tasks{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}

/* Onderste blokken eveneens alleen zo hoog als hun inhoud. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] #projectOperationsSummary,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] #projectActivitySummary{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}

/* ALGEMEEN VOOR PROJECTTABS
   Geen willekeurige full-height cards meer behalve waar dit functioneel
   nodig is (Materiaal en Communicatie). */
body.project-workspace-active #projectTabContent:not(.project-material-tab):not([data-active-tab="chat"]) .card,
body.project-workspace-active #projectTabContent:not(.project-material-tab):not([data-active-tab="chat"]) .project-card,
body.project-workspace-active #projectTabContent:not(.project-material-tab):not([data-active-tab="chat"]) .panel{
  height:auto;
  align-self:start;
}

/* Tab-inhoud begint bovenaan en gebruikt alleen verticale ruimte die nodig is. */
body.project-workspace-active #projectTabContent:not(.project-material-tab):not([data-active-tab="chat"]){
  align-content:start!important;
}

/* Tijdlijn-tab */
body.project-workspace-active #projectTabContent[data-active-tab="timelines"] .timeline-gantt-card,
body.project-workspace-active #projectTabContent[data-active-tab="timelines"] .card{
  height:auto!important;
  min-height:0!important;
}

/* Planning-tab: lijst en agenda mogen scrollen binnen hun eigen component,
   maar omringende kaarten worden niet tot de viewporthoogte uitgerekt. */
body.project-workspace-active #projectTabContent[data-active-tab="planning"] .gantt-card,
body.project-workspace-active #projectTabContent[data-active-tab="planning"] .planning-card{
  height:auto!important;
  min-height:0!important;
}

/* Crew / Taken / Transport / Financieel / Documenten / Notities / Logboek */
body.project-workspace-active #projectTabContent[data-active-tab="crew"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="tasks"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="transport"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="report"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="documents"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="notes"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="log"] .card{
  height:auto!important;
  min-height:0!important;
}

/* Lege staten blijven compact en staan bovenin. */
body.project-workspace-active #projectTabContent:not(.project-material-tab) .project-empty-workspace,
body.project-workspace-active #projectTabContent:not(.project-material-tab) .empty-state{
  height:auto!important;
  min-height:140px!important;
  max-height:260px!important;
  align-self:start!important;
}

/* De interne scrollbar blijft alleen verschijnen wanneer de inhoud echt
   hoger is dan het beschikbare projectvenster. */
body.project-workspace-active #projectTabContent:not(.project-material-tab):not([data-active-tab="chat"]){
  overflow-y:auto!important;
  overflow-x:hidden!important;
}


/* ============================================================
   Beta 5.01 — Overview layout rebuilt: independent columns
   ============================================================ */

/* Three independent columns prevent a tall Projectinformatie card from
   forcing Timeline / Tasks to become equally tall. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-columns{
  display:grid!important;
  grid-template-columns:minmax(330px,1.05fr) minmax(360px,1.05fr) minmax(320px,.85fr)!important;
  gap:7px!important;
  align-items:start!important;
  margin:0!important;
  padding:0 0 6px!important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-column{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  min-width:0!important;
  min-height:0!important;
  align-self:start!important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-column > .card,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-column > div > .card{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
}

/* No artificial vertical expansion anywhere on overview. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-timeline-overview,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-next-tasks,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-notes,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-ops-card{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* Compact empty states: do not reserve hundreds of pixels. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-empty-inline{
  min-height:62px!important;
  padding:18px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .ops-empty,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-empty-copy{
  min-height:52px!important;
  padding:14px 10px!important;
  display:flex!important;
  align-items:center!important;
}

/* Notes stay below Projectinformatie instead of creating a separate full-width row. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-notes .project-note-preview{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  padding:9px 10px!important;
}

/* Activity/action cards follow directly underneath timeline/tasks. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] #projectActionSummary,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] #projectActivitySummary{
  display:block!important;
  min-height:0!important;
  margin:0!important;
}

/* Remove legacy overview grid spacing if old cached DOM/classes appear. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-main-grid,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-bottom-grid,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-rentman-ops{
  margin:0!important;
  min-height:0!important;
}

/* Other project tabs: their top-level content should never inherit viewport-sized
   minimum heights from generic cards. */
body.project-workspace-active #projectTabContent[data-active-tab="timelines"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="planning"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="crew"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="tasks"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="transport"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="report"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="documents"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="notes"] > *,
body.project-workspace-active #projectTabContent[data-active-tab="log"] > *{
  align-self:stretch;
}

/* Responsive fallbacks without changing desktop geometry. */
@media(max-width:1250px){
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-columns{
    grid-template-columns:minmax(320px,1fr) minmax(340px,1fr)!important;
  }
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-column-right{
    grid-column:2;
  }
}
@media(max-width:900px){
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-columns{
    grid-template-columns:1fr!important;
  }
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-column-right{
    grid-column:auto;
  }
}

/* Beta 5.01 — open project tabs */
body.project-workspace-active .showarrow-open-project-bar{display:flex;align-items:center;gap:5px;width:100%;min-width:0;margin:0 0 4px}
body.project-workspace-active .showarrow-open-project-tabs{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;flex:1}
body.project-workspace-active .showarrow-project-window-tab{display:grid;grid-template-columns:minmax(0,auto) auto 18px;align-items:center;gap:7px;flex:0 0 auto;max-width:250px;min-width:130px;height:30px;padding:0 6px 0 10px;border:1px solid #2d3945;border-radius:7px 7px 3px 3px;background:#121920;color:#eef4fa;cursor:pointer;text-align:left}
body.project-workspace-active .showarrow-project-window-tab:hover{background:#17212a}
body.project-workspace-active .showarrow-project-window-tab.active{background:#1a232c;border-color:#536170;box-shadow:inset 0 -2px 0 #ff6a00}
body.project-workspace-active .showarrow-project-window-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:11px}
body.project-workspace-active .showarrow-project-window-tab small{color:#8292a4;font-size:8px;white-space:nowrap}
body.project-workspace-active .showarrow-project-window-close{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;color:#8f9aa6;font-size:15px}
body.project-workspace-active .showarrow-project-window-close:hover{background:#2b3540;color:#fff}
body.project-workspace-active .showarrow-project-window-add{flex:0 0 auto;width:30px;height:30px;padding:0;border:1px solid #2d3945;border-radius:6px;background:#121920;color:#c9d4df;font-size:17px;cursor:pointer}
body.project-workspace-active .showarrow-project-window-add:hover{background:#17212a;color:#fff}


/* ============================================================
   Beta 5.01 — topbar cleanup, icon search, light/dark parity
   ============================================================ */

/* One single non-overlapping top line for project tabs + project meta + controls. */
body.project-workspace-active .app-topbar{
  flex:0 0 52px!important;
  height:52px!important;
  min-height:52px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:10px!important;
  padding:5px 16px!important;
  overflow:visible!important;
}

body.project-workspace-active .page-context{
  min-width:0!important;
  overflow:hidden!important;
}

body.project-workspace-active .project-topline{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  width:100%!important;
  height:40px!important;
}

body.project-workspace-active .showarrow-open-project-bar{
  flex:1 1 auto!important;
  min-width:150px!important;
  margin:0!important;
  height:32px!important;
  overflow:hidden!important;
}

body.project-workspace-active .showarrow-open-project-tabs{
  min-width:0!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}

body.project-workspace-active .showarrow-project-window-tab{
  height:30px!important;
  min-width:125px!important;
  max-width:210px!important;
  border-color:var(--line)!important;
  background:var(--panel)!important;
  color:var(--text)!important;
}

body.project-workspace-active .showarrow-project-window-tab.active{
  background:var(--panel-2)!important;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;
  box-shadow:inset 0 -2px 0 #ff6a00!important;
}

body.project-workspace-active .showarrow-project-window-tab small,
body.project-workspace-active .showarrow-project-window-close{
  color:var(--muted)!important;
}

body.project-workspace-active .showarrow-project-window-add{
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

body.project-workspace-active .project-top-context{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

body.project-workspace-active .project-context-main{
  min-width:0!important;
  max-width:360px!important;
}

body.project-workspace-active .project-context-line{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}

body.project-workspace-active .project-context-line > span:not(.project-context-status){
  padding-left:7px!important;
  border-left:1px solid var(--line)!important;
  color:var(--muted)!important;
  font-size:var(--sa-text-label)!important;
  white-space:nowrap!important;
}

body.project-workspace-active .project-context-status{
  background:color-mix(in srgb,#21b96b 10%,var(--panel))!important;
  border-color:color-mix(in srgb,#21b96b 35%,var(--line))!important;
  color:var(--text)!important;
}

body.project-workspace-active .project-context-actions{
  flex:0 0 auto!important;
  gap:5px!important;
}

body.project-workspace-active .project-context-actions button{
  height:30px!important;
  min-height:30px!important;
  padding:0 9px!important;
}

/* Right-hand controls cannot overlap the project strip. */
body.project-workspace-active .header-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex:0 0 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
}

body.project-workspace-active .header-tools > *{
  flex:0 0 auto!important;
}

/* Global search is an icon by default. */
.global-search{
  position:relative!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  overflow:visible!important;
  flex:0 0 36px!important;
}

.global-search-toggle{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--line)!important;
  border-radius:7px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer!important;
}

.global-search-toggle:hover{
  background:var(--panel-2)!important;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;
}

.global-search-panel{
  display:none;
  position:absolute;
  z-index:200;
  top:calc(100% + 6px);
  right:0;
  width:min(420px,calc(100vw - 32px));
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.global-search-open .global-search-panel{
  display:block!important;
}

.global-search-panel #globalSearch{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid var(--line)!important;
  border-radius:6px!important;
  background:var(--panel-2)!important;
  color:var(--text)!important;
}

.global-search-panel #globalSearchResults{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  margin-top:5px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

.global-search-collapsed .global-search-panel{
  display:none!important;
}

/* Same dimensions and surfaces in dark and light mode. */
.app-topbar .module-selector-button,
.app-topbar .theme-toggle,
.app-topbar .pill{
  height:36px!important;
  min-height:36px!important;
  box-sizing:border-box!important;
}

.app-topbar .module-selector-button,
.app-topbar .theme-toggle{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

.app-topbar .pill{
  display:inline-flex!important;
  align-items:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs,
html[data-theme="light"] body.project-workspace-active .project-render-tabs{
  background:#111820!important;
  border-color:#26313d!important;
}

html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs .project-rentman-tab,
html[data-theme="light"] body.project-workspace-active .project-render-tabs .project-rentman-tab{
  color:#aeb9c6!important;
}

html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs .project-rentman-tab.active,
html[data-theme="light"] body.project-workspace-active .project-render-tabs .project-rentman-tab.active{
  color:#fff!important;
}

/* Hide lower-priority top metadata before any overlap can happen. */
@media(max-width:1450px){
  body.project-workspace-active .project-context-line > span:nth-child(2){
    display:none!important;
  }
}
@media(max-width:1260px){
  body.project-workspace-active .project-context-line > span:not(.project-context-status){
    display:none!important;
  }
  body.project-workspace-active .project-context-main{
    max-width:110px!important;
  }
}
@media(max-width:1080px){
  body.project-workspace-active .project-context-main{
    display:none!important;
  }
  body.project-workspace-active .showarrow-project-window-tab{
    min-width:110px!important;
    max-width:160px!important;
  }
}


/* ============================================================
   Beta 5.01 — projectworkspace light/dark parity audit
   ============================================================ */

/* Inputs/selects inside project overview must follow the active theme.
   This fixes the black STATUS select visible in light mode. */
body.project-workspace-active .project-inline-field input,
body.project-workspace-active .project-inline-field select,
body.project-workspace-active .project-inline-field textarea,
body.project-workspace-active .project-relation-input,
body.project-workspace-active .project-contact-primary input,
body.project-workspace-active .project-contact-primary select{
  background:var(--panel)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}

body.project-workspace-active .project-inline-field input:focus,
body.project-workspace-active .project-inline-field select:focus,
body.project-workspace-active .project-inline-field textarea:focus,
body.project-workspace-active .project-relation-input:focus{
  background:var(--panel-2)!important;
  color:var(--text)!important;
  border-color:var(--accent)!important;
  outline:none!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)!important;
}

body.project-workspace-active .project-inline-field option,
body.project-workspace-active .project-relation-input option{
  background:var(--panel)!important;
  color:var(--text)!important;
}

/* All overview cards and rows use theme variables; no dark surfaces leak into light mode. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .card,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-timeline-overview,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-next-tasks,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-notes,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-ops-card{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-card-heading,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-section-title,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .mini-gantt-head{
  background:var(--panel-2)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Material workspace follows the selected theme too.
   The project tab strip itself stays intentionally dark in both modes. */
html[data-theme="light"] body.project-workspace-active .pm-catalog,
html[data-theme="light"] body.project-workspace-active .pm-planned,
html[data-theme="light"] body.project-workspace-active .pm-timeline-area,
html:not([data-theme="dark"]) body.project-workspace-active .pm-catalog,
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned,
html:not([data-theme="dark"]) body.project-workspace-active .pm-timeline-area{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="light"] body.project-workspace-active .pm-search,
html[data-theme="light"] body.project-workspace-active .pm-planned-search,
html[data-theme="light"] body.project-workspace-active .pm-material-group,
html:not([data-theme="dark"]) body.project-workspace-active .pm-search,
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned-search,
html:not([data-theme="dark"]) body.project-workspace-active .pm-material-group{
  background:var(--panel-2)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="light"] body.project-workspace-active .pm-planned-header,
html[data-theme="light"] body.project-workspace-active .pm-group-total-row,
html[data-theme="light"] body.project-workspace-active .pm-project-total,
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned-header,
html:not([data-theme="dark"]) body.project-workspace-active .pm-group-total-row,
html:not([data-theme="dark"]) body.project-workspace-active .pm-project-total{
  background:#f1f4f7!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="light"] body.project-workspace-active .pm-planned-row,
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned-row{
  background:#fff!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="light"] body.project-workspace-active .pm-planned-row:nth-of-type(even),
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned-row:nth-of-type(even){
  background:#f7f9fb!important;
}

/* Shortage remains clearly red in both themes. */
html[data-theme="light"] body.project-workspace-active .pm-planned-row.shortage,
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned-row.shortage{
  background:#f5dadd!important;
  color:#5f141c!important;
  box-shadow:inset 3px 0 0 #d64555!important;
}

html[data-theme="light"] body.project-workspace-active .pm-planned-row.shortage > span,
html:not([data-theme="dark"]) body.project-workspace-active .pm-planned-row.shortage > span{
  color:inherit!important;
}

/* Material tree text remains readable in light mode. */
html[data-theme="light"] body.project-workspace-active .pm-tree-folder-head,
html[data-theme="light"] body.project-workspace-active .pm-tree-material,
html:not([data-theme="dark"]) body.project-workspace-active .pm-tree-folder-head,
html:not([data-theme="dark"]) body.project-workspace-active .pm-tree-material{
  color:var(--text)!important;
}

html[data-theme="light"] body.project-workspace-active .pm-tree-material:hover,
html[data-theme="light"] body.project-workspace-active .pm-tree-folder-head:hover,
html:not([data-theme="dark"]) body.project-workspace-active .pm-tree-material:hover,
html:not([data-theme="dark"]) body.project-workspace-active .pm-tree-folder-head:hover{
  background:#eef3f7!important;
}

/* Buttons and controls inside all project tabs inherit theme surfaces consistently. */
body.project-workspace-active #projectTabContent .secondary,
body.project-workspace-active #projectTabContent input,
body.project-workspace-active #projectTabContent select,
body.project-workspace-active #projectTabContent textarea{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Status chips should not become black in light mode. */
html[data-theme="light"] body.project-workspace-active .status-badge,
html:not([data-theme="dark"]) body.project-workspace-active .status-badge{
  color:var(--text)!important;
}

/* Keep dark mode exactly on dark theme variables. */
html[data-theme="dark"] body.project-workspace-active .pm-catalog,
html[data-theme="dark"] body.project-workspace-active .pm-planned,
html[data-theme="dark"] body.project-workspace-active .pm-timeline-area,
html[data-theme="dark"] body.project-workspace-active .pm-search,
html[data-theme="dark"] body.project-workspace-active .pm-planned-search{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}


/* ============================================================
   Beta 5.01 — light mode parity: zebra rows + light top bars
   ============================================================ */

/* ------------------------------------------------------------
   LIGHT MODE — project top navigation no longer forced dark
   ------------------------------------------------------------ */
html[data-theme="light"] body.project-workspace-active .project-render-tabs,
html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
}

html[data-theme="light"] body.project-workspace-active .project-render-tabs .project-rentman-tab,
html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs .project-rentman-tab{
  color:var(--muted)!important;
  background:transparent!important;
}

html[data-theme="light"] body.project-workspace-active .project-render-tabs .project-rentman-tab:hover,
html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs .project-rentman-tab:hover{
  background:var(--panel-2)!important;
  color:var(--text)!important;
}

html[data-theme="light"] body.project-workspace-active .project-render-tabs .project-rentman-tab.active,
html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs .project-rentman-tab.active{
  background:var(--panel-2)!important;
  color:var(--text)!important;
}

/* Keep the orange active underline in light mode. */
html[data-theme="light"] body.project-workspace-active .project-render-tabs .project-rentman-tab.active::after,
html:not([data-theme="dark"]) body.project-workspace-active .project-render-tabs .project-rentman-tab.active::after{
  background:#ff6a00!important;
}

/* Top project tabs and header controls fully light in light mode. */
html[data-theme="light"] body.project-workspace-active .showarrow-project-window-tab,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-tab{
  background:#ffffff!important;
  color:#17202a!important;
  border-color:#cfd8e2!important;
}

html[data-theme="light"] body.project-workspace-active .showarrow-project-window-tab:hover,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-tab:hover{
  background:#f3f6f9!important;
}

html[data-theme="light"] body.project-workspace-active .showarrow-project-window-tab.active,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-tab.active{
  background:#f3f6f9!important;
  color:#111820!important;
  border-color:#b9c6d3!important;
  box-shadow:inset 0 -2px 0 #ff6a00!important;
}

html[data-theme="light"] body.project-workspace-active .showarrow-project-window-tab small,
html[data-theme="light"] body.project-workspace-active .showarrow-project-window-close,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-tab small,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-close{
  color:#6f7f90!important;
}

html[data-theme="light"] body.project-workspace-active .showarrow-project-window-add,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-add{
  background:#fff!important;
  color:#17202a!important;
  border-color:#cfd8e2!important;
}

html[data-theme="light"] body.project-workspace-active .showarrow-project-window-add:hover,
html:not([data-theme="dark"]) body.project-workspace-active .showarrow-project-window-add:hover{
  background:#f3f6f9!important;
}

/* ------------------------------------------------------------
   LIGHT MODE — planned material zebra rows
   ------------------------------------------------------------ */

/* Base rows alternate clearly enough to scan horizontally. */
html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:nth-of-type(odd),
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:nth-of-type(odd){
  background:#ffffff!important;
}

html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:nth-of-type(even),
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:nth-of-type(even){
  background:#edf2f6!important;
}

/* Cells stay transparent so the alternating row color remains visible. */
html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row > span{
  background:transparent!important;
}

/* Stronger hover feedback without losing zebra effect. */
html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:hover,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row:hover{
  background:#e4ebf1!important;
}

/* Selected row remains visible in light mode. */
html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.selected,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.selected{
  background:#e9e7ff!important;
  box-shadow:inset 2px 0 0 #6f60ff!important;
}

/* Shortage overrides zebra and remains clearly red. */
html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.shortage,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-row.shortage{
  background:#e8b9be!important;
  color:#4f1017!important;
  box-shadow:inset 3px 0 0 #d54454!important;
}

/* Group/header/summary separation in light mode. */
html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group-head,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group-head{
  background:#f7f9fb!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-header,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-material-group .pm-planned-header{
  background:#eef2f6!important;
  color:var(--text)!important;
}

html[data-theme="light"] body.project-workspace-active .project-material-tab .pm-group-total-row,
html:not([data-theme="dark"]) body.project-workspace-active .project-material-tab .pm-group-total-row{
  background:#e6ecf2!important;
  color:var(--text)!important;
}


/* Beta 5.01 readability + numbering */
body.project-workspace-active #projectTabContent[data-active-tab="overview"]{font-size:11px!important}body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-card-heading h2{font-size:13px!important}body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-field span,body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-contact-primary span{font-size:8.5px!important}body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-inline-field b,body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-contact-primary b{font-size:10.5px!important}body.project-workspace-active #projectTabContent[data-active-tab="crew"] table th{font-size:10.5px!important}body.project-workspace-active #projectTabContent[data-active-tab="crew"] table td{font-size:12px!important;padding-top:9px!important;padding-bottom:9px!important}body.project-workspace-active #projectTabContent[data-active-tab="log"] .timeline-item{padding:9px 8px 9px 26px!important}body.project-workspace-active #projectTabContent[data-active-tab="log"] .timeline-item b{font-size:12px!important}body.project-workspace-active #projectTabContent[data-active-tab="log"] .timeline-item .muted{font-size:9.5px!important}body.project-workspace-active #projectTabContent[data-active-tab="log"] .timeline-item p{font-size:10.5px!important;margin:3px 0 0!important}.project-external-reference{grid-column:1/-1!important}.crm-project-reference-rule{padding:10px 12px!important;border:1px solid var(--line)!important;border-radius:7px!important;background:var(--panel-2)!important}.number-range-page{display:flex;flex-direction:column;gap:10px}.number-range-help{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px}.number-range-list{padding:0;overflow:hidden}.number-range-list-head,.number-range-row{display:grid;grid-template-columns:1.1fr 1.2fr 1.1fr .6fr .6fr .6fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.number-range-list-head{background:var(--panel-2);font-size:10px;font-weight:700}.number-range-row{font-size:11px}.number-range-row>span:first-child{display:flex;flex-direction:column}.number-range-row small{color:var(--muted)}.number-range-preview{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}.number-range-preview b{font-size:18px}


/* ============================================================
   Beta 5.01 — duidelijke PO / externe referentie instelling
   ============================================================ */

.crm-project-reference-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  width:100%!important;
  min-height:76px!important;
  padding:14px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
  background:var(--panel-2)!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}

.crm-project-reference-toggle:hover{
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line))!important;
}

.crm-project-reference-toggle.is-on{
  border-color:rgba(255,122,24,.72)!important;
  background:color-mix(in srgb,#ff7a18 7%,var(--panel-2))!important;
  box-shadow:inset 3px 0 0 #ff7a18!important;
}

.crm-project-reference-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  min-width:0!important;
}

.crm-project-reference-copy strong{
  font-size:12px!important;
  line-height:1.2!important;
  color:var(--text)!important;
}

.crm-project-reference-copy span{
  font-size:var(--sa-text-label)!important;
  line-height:1.35!important;
  color:var(--muted)!important;
  max-width:760px!important;
}

.crm-project-reference-control{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  flex:0 0 auto!important;
  min-width:145px!important;
}

.crm-project-reference-control input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}

.crm-toggle-track{
  position:relative!important;
  width:42px!important;
  height:24px!important;
  border-radius:999px!important;
  background:#687481!important;
  border:1px solid color-mix(in srgb,var(--line) 75%,#000)!important;
  box-sizing:border-box!important;
  transition:background .16s ease,border-color .16s ease!important;
  flex:0 0 auto!important;
}

.crm-toggle-track i{
  position:absolute!important;
  top:3px!important;
  left:3px!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  transition:transform .16s ease!important;
}

.crm-project-reference-toggle.is-on .crm-toggle-track{
  background:#ff7a18!important;
  border-color:#ff7a18!important;
}

.crm-project-reference-toggle.is-on .crm-toggle-track i{
  transform:translateX(18px)!important;
}

.crm-project-reference-state{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:84px!important;
  height:26px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
  color:var(--muted)!important;
  font-size:var(--sa-text-label)!important;
  font-weight:700!important;
  box-sizing:border-box!important;
}

.crm-project-reference-toggle.is-on .crm-project-reference-state{
  border-color:rgba(255,122,24,.55)!important;
  background:rgba(255,122,24,.10)!important;
  color:#ff8a33!important;
}

/* Light-mode keeps the same affordance and contrast. */
html[data-theme="light"] .crm-project-reference-toggle,
html:not([data-theme="dark"]) .crm-project-reference-toggle{
  background:#f7f9fb!important;
  border-color:#ccd5df!important;
}

html[data-theme="light"] .crm-project-reference-toggle.is-on,
html:not([data-theme="dark"]) .crm-project-reference-toggle.is-on{
  background:#fff5ec!important;
  border-color:#ff9b56!important;
  box-shadow:inset 3px 0 0 #ff7a18!important;
}

html[data-theme="light"] .crm-project-reference-state,
html:not([data-theme="dark"]) .crm-project-reference-state{
  background:#fff!important;
  color:#5f6d7a!important;
  border-color:#d6dee6!important;
}

@media(max-width:760px){
  .crm-project-reference-toggle{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .crm-project-reference-control{
    width:100%!important;
    justify-content:flex-start!important;
  }
}

/* Beta 5.01 — referentiestatus links in klantenlijst */
.crm-client-open{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
.crm-client-list-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.crm-reference-list-state{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:0 0 auto!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  font-size:var(--sa-text-label)!important;
  line-height:1.35!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.crm-reference-list-state::before{
  content:""!important;width:6px!important;height:6px!important;border-radius:50%!important;flex:0 0 6px!important;
}
.crm-reference-list-state.is-required{
  color:#ff8a33!important;background:rgba(255,122,24,.10)!important;border:1px solid rgba(255,122,24,.38)!important;
}
.crm-reference-list-state.is-required::before{background:#ff7a18!important}
.crm-reference-list-state.is-optional{
  color:var(--muted)!important;background:var(--panel-2)!important;border:1px solid var(--line)!important;
}
.crm-reference-list-state.is-optional::before{background:#7d8995!important}

/* Beta 5.01 — materiaalreservering */
.pm-status-dot.reserved{background:#26a269!important;box-shadow:0 0 0 3px rgba(38,162,105,.14)!important}
.pm-status-dot.warning{background:#e5a50a!important;box-shadow:0 0 0 3px rgba(229,165,10,.14)!important}
.pm-planned-row.reserved:not(.shortage){box-shadow:inset 2px 0 0 rgba(38,162,105,.62)}
.pm-hire-editor{max-width:720px}
.pm-hire-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
.pm-hire-summary span{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);font-size:10px;color:var(--muted)}
.pm-hire-summary b{font-size:15px;color:var(--text)}

/* Beta 5.01 — automatische materiaalreservering */
.pm-status-dot.expired{
  background:#87929e!important;
  box-shadow:0 0 0 3px rgba(135,146,158,.14)!important;
}


/* Beta 5.01 — beschikbaarheidsplanning toont werkelijk tekort als negatief aantal */
.availability-cell.shortage,
.availability-day.shortage,
.pm-availability-cell.shortage,
[data-available^="-"] {
  background: rgba(220, 53, 69, .14) !important;
}


/* ============================================================
   Beta 5.01 — leesbaardere projecttabs + correcte lichte project-aanmaak
   ============================================================ */

/* Projecttabbladen: tekst was te klein (9px). Geometry blijft compact. */
body.project-workspace-active .project-render-tabs .project-rentman-tab,
body.project-workspace-active .project-compact-tabs .project-rentman-tab{
  font-size:11px!important;
  font-weight:700!important;
  padding-left:14px!important;
  padding-right:14px!important;
  line-height:1.1!important;
}

/* Iets meer hoogte zodat 11px niet krap voelt, zonder schermruimte te verspillen. */
body.project-workspace-active .project-render-tabs{
  height:42px!important;
  min-height:42px!important;
}
body.project-workspace-active .project-render-tabs .project-rentman-tab{
  height:41px!important;
  min-height:41px!important;
}

/* ============================================================
   Project aanmaken — LIGHT MODE
   Oude light-mode regels gebruikten nog donkere inputvelden.
   ============================================================ */

html[data-theme="light"] .project-create-page,
html:not([data-theme="dark"]) .project-create-page{
  color:#17212b!important;
}

html[data-theme="light"] .project-create-topbar h1,
html:not([data-theme="dark"]) .project-create-topbar h1{
  color:#17212b!important;
}

html[data-theme="light"] .project-create-topbar .muted,
html:not([data-theme="dark"]) .project-create-topbar .muted{
  color:#64748b!important;
}

/* Kaarten */
html[data-theme="light"] .project-create-card,
html:not([data-theme="dark"]) .project-create-card{
  background:#fff!important;
  border-color:#d6dee7!important;
  color:#17212b!important;
  box-shadow:0 1px 2px rgba(15,23,42,.035)!important;
}

html[data-theme="light"] .project-create-card-head,
html:not([data-theme="dark"]) .project-create-card-head{
  background:#f8fafc!important;
  border-bottom-color:#dbe3eb!important;
}

html[data-theme="light"] .project-create-card-head h2,
html:not([data-theme="dark"]) .project-create-card-head h2{
  color:#17212b!important;
  font-size:14px!important;
}

html[data-theme="light"] .project-create-card-head span,
html:not([data-theme="dark"]) .project-create-card-head span{
  color:#64748b!important;
}

/* Labels en scheidingslijnen */
html[data-theme="light"] .project-create-grid label,
html:not([data-theme="dark"]) .project-create-grid label{
  color:#64748b!important;
  border-bottom-color:#e2e8f0!important;
}

html[data-theme="light"] .project-create-grid label:nth-child(odd),
html:not([data-theme="dark"]) .project-create-grid label:nth-child(odd){
  border-right-color:#e2e8f0!important;
}

/* Inputs/selects moeten in lichtmodus ook echt licht zijn. */
html[data-theme="light"] .project-create-grid input,
html[data-theme="light"] .project-create-grid select,
html[data-theme="light"] .project-create-card textarea,
html:not([data-theme="dark"]) .project-create-grid input,
html:not([data-theme="dark"]) .project-create-grid select,
html:not([data-theme="dark"]) .project-create-card textarea{
  background:#fff!important;
  color:#17212b!important;
  border:1px solid #cbd5e1!important;
  border-radius:5px!important;
  padding:7px 8px!important;
  box-shadow:none!important;
}

html[data-theme="light"] .project-create-grid input::placeholder,
html[data-theme="light"] .project-create-card textarea::placeholder,
html:not([data-theme="dark"]) .project-create-grid input::placeholder,
html:not([data-theme="dark"]) .project-create-card textarea::placeholder{
  color:#94a3b8!important;
  opacity:1!important;
}

html[data-theme="light"] .project-create-grid input[readonly],
html:not([data-theme="dark"]) .project-create-grid input[readonly]{
  background:#f1f5f9!important;
  color:#334155!important;
}

html[data-theme="light"] .project-create-grid input:focus,
html[data-theme="light"] .project-create-grid select:focus,
html[data-theme="light"] .project-create-card textarea:focus,
html:not([data-theme="dark"]) .project-create-grid input:focus,
html:not([data-theme="dark"]) .project-create-grid select:focus,
html:not([data-theme="dark"]) .project-create-card textarea:focus{
  background:#fff!important;
  color:#17212b!important;
  border-color:#ff6a00!important;
  box-shadow:0 0 0 2px rgba(255,106,0,.10)!important;
  outline:none!important;
}

/* Select dropdowns in light mode. */
html[data-theme="light"] .project-create-grid select option,
html:not([data-theme="dark"]) .project-create-grid select option{
  background:#fff!important;
  color:#17212b!important;
}

/* Projectkleur-tekst was nog donker-thema kleur. */
html[data-theme="light"] .project-color-field,
html:not([data-theme="dark"]) .project-color-field{
  color:#64748b!important;
}

/* Breadcrumb / introductie leesbaar. */
html[data-theme="light"] .project-create-page .eyebrow,
html:not([data-theme="dark"]) .project-create-page .eyebrow{
  color:#64748b!important;
}

html[data-theme="light"] .project-create-page a,
html:not([data-theme="dark"]) .project-create-page a{
  color:#52606d;
}

/* Buttons passen bij de rest van lichte Showarrow. */
html[data-theme="light"] .project-create-actions .secondary,
html:not([data-theme="dark"]) .project-create-actions .secondary{
  background:#fff!important;
  color:#17212b!important;
  border-color:#cbd5e1!important;
}

/* Ook losse relation/contact velden in deze pagina niet meer zwart. */
html[data-theme="light"] .project-create-page .project-relation-input,
html[data-theme="light"] .project-create-page .project-inline-input,
html:not([data-theme="dark"]) .project-create-page .project-relation-input,
html:not([data-theme="dark"]) .project-create-page .project-inline-input{
  background:#fff!important;
  color:#17212b!important;
  border-color:#cbd5e1!important;
}


/* ============================================================
   Beta 5.01 — grotere projectnavigatie + leesbaarder overzicht
   ============================================================ */

/* Bovenste project-tabnavigatie nog één stap groter. */
body.project-workspace-active .project-render-tabs .project-rentman-tab,
body.project-workspace-active .project-compact-tabs .project-rentman-tab{
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:0!important;
}

/* Overzicht: Projectinformatie was door compact-layout te klein. */
body.project-workspace-active .project-overview-compact .project-info-card .card-title,
body.project-workspace-active .project-overview-compact .project-info-card h3{
  font-size:15px!important;
  line-height:1.2!important;
}

body.project-workspace-active .project-overview-compact .project-info-card .card-subtitle,
body.project-workspace-active .project-overview-compact .project-info-card .muted{
  font-size:var(--sa-text-label)!important;
  line-height:1.3!important;
}

/* Veldlabels iets groter maar bewust duidelijk secundair. */
body.project-workspace-active .project-overview-compact .project-info-card .info-label,
body.project-workspace-active .project-overview-compact .project-info-card .field-label,
body.project-workspace-active .project-overview-compact .project-info-card dt{
  font-size:9px!important;
  line-height:1.2!important;
}

/* De daadwerkelijke projectgegevens zijn het belangrijkst. */
body.project-workspace-active .project-overview-compact .project-info-card .info-value,
body.project-workspace-active .project-overview-compact .project-info-card .field-value,
body.project-workspace-active .project-overview-compact .project-info-card dd{
  font-size:12px!important;
  line-height:1.3!important;
  font-weight:650!important;
}

/* Fallback op de bestaande info-grid selectors van Showarrow. */
body.project-workspace-active .project-overview-compact .project-info-grid label{
  font-size:9px!important;
}
body.project-workspace-active .project-overview-compact .project-info-grid input,
body.project-workspace-active .project-overview-compact .project-info-grid select,
body.project-workspace-active .project-overview-compact .project-info-grid button{
  font-size:12px!important;
}

/* Iets meer verticale ademruimte zodat de grotere tekst niet op elkaar staat. */
body.project-workspace-active .project-overview-compact .project-info-card td,
body.project-workspace-active .project-overview-compact .project-info-card th{
  padding-top:7px!important;
  padding-bottom:7px!important;
}


/* ============================================================
   Beta 5.01 — Projectinformatie duidelijk groter
   ============================================================ */

/* Titel */
body.project-workspace-active .project-overview-compact .project-info-card .card-title,
body.project-workspace-active .project-overview-compact .project-info-card h3{
  font-size:17px!important;
  line-height:1.25!important;
}

/* Uitleg onder titel */
body.project-workspace-active .project-overview-compact .project-info-card .card-subtitle,
body.project-workspace-active .project-overview-compact .project-info-card .muted{
  font-size:11px!important;
  line-height:1.35!important;
}

/* Labels zoals PROJECTNAAM, PROJECTNUMMER, KLANT, LOCATIE */
body.project-workspace-active .project-overview-compact .project-info-card .info-label,
body.project-workspace-active .project-overview-compact .project-info-card .field-label,
body.project-workspace-active .project-overview-compact .project-info-card dt,
body.project-workspace-active .project-overview-compact .project-info-grid label{
  font-size:10.5px!important;
  line-height:1.25!important;
  letter-spacing:.035em!important;
}

/* Waarden: belangrijkste leesniveau */
body.project-workspace-active .project-overview-compact .project-info-card .info-value,
body.project-workspace-active .project-overview-compact .project-info-card .field-value,
body.project-workspace-active .project-overview-compact .project-info-card dd,
body.project-workspace-active .project-overview-compact .project-info-grid input,
body.project-workspace-active .project-overview-compact .project-info-grid select,
body.project-workspace-active .project-overview-compact .project-info-grid button{
  font-size:13.5px!important;
  line-height:1.35!important;
  font-weight:650!important;
}

/* Bestaande overzichtsvelden krijgen meer verticale ruimte. */
body.project-workspace-active .project-overview-compact .project-info-card td,
body.project-workspace-active .project-overview-compact .project-info-card th,
body.project-workspace-active .project-overview-compact .project-info-grid > *{
  padding-top:8px!important;
  padding-bottom:8px!important;
}

/* Voorkom dat de periode door de grotere tekst onnodig vroeg afgekapt wordt. */
body.project-workspace-active .project-overview-compact .project-info-card .info-value,
body.project-workspace-active .project-overview-compact .project-info-card .field-value{
  min-width:0!important;
}


/* ============================================================
   Beta 5.01 — Projectinformatie echt groter / beter leesbaar
   ============================================================ */

/* Hele kaart: verhoog standaard tekstniveau */
.project-info-card,
.project-overview-compact .project-info-card,
[data-project-info],
.project-info-grid {
  font-size:15px!important;
}

/* Titel */
.project-info-card .card-title,
.project-info-card h2,
.project-info-card h3,
.project-info-card strong:first-child,
.project-overview-compact .project-info-card .card-title {
  font-size:19px!important;
  line-height:1.3!important;
}

/* Kleine toelichting onder titel */
.project-info-card .card-subtitle,
.project-info-card .muted,
.project-info-card .hint {
  font-size:12px!important;
  line-height:1.4!important;
}

/* Veldlabels */
.project-info-card .info-label,
.project-info-card .field-label,
.project-info-card dt,
.project-info-card label,
.project-info-grid .info-label,
.project-info-grid .field-label,
.project-info-grid label {
  font-size:12px!important;
  line-height:1.3!important;
  letter-spacing:.035em!important;
}

/* Veldwaarden */
.project-info-card .info-value,
.project-info-card .field-value,
.project-info-card dd,
.project-info-card input,
.project-info-card select,
.project-info-card button,
.project-info-grid .info-value,
.project-info-grid .field-value,
.project-info-grid input,
.project-info-grid select,
.project-info-grid button {
  font-size:15px!important;
  line-height:1.4!important;
  font-weight:650!important;
}

/* Ook generieke tabelcellen binnen projectinformatie opschalen */
.project-info-card td,
.project-info-card th,
.project-info-card .editable-value,
.project-info-card .value {
  font-size:15px!important;
  line-height:1.4!important;
}

/* Meer ademruimte zodat grotere tekst niet gepropt raakt */
.project-info-card td,
.project-info-card th,
.project-info-card .info-cell,
.project-info-grid > * {
  padding-top:10px!important;
  padding-bottom:10px!important;
}

/* Sectiekoppen ALGEMEEN / KLANT / LOCATIE / OMSCHRIJVING */
.project-info-card .section-title,
.project-info-card .info-section-title,
.project-info-card .group-title {
  font-size:11.5px!important;
  line-height:1.3!important;
  font-weight:800!important;
}


/* ============================================================
   Beta 5.01 — Projectinformatie: daadwerkelijk groot en leesbaar
   ============================================================ */

.project-overview-card.project-overview-info {
  font-size: 16px !important;
}

.project-overview-card.project-overview-info > .project-overview-card-head h3 {
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.project-overview-card.project-overview-info > .project-overview-card-head p {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.project-overview-card.project-overview-info .info-section-title {
  font-size: 12px !important;
  line-height: 1.3 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.project-overview-card.project-overview-info .info-field {
  min-height: 55px !important;
  padding: 8px 12px !important;
}

.project-overview-card.project-overview-info .info-label {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
  letter-spacing: .055em !important;
}

.project-overview-card.project-overview-info .info-value,
.project-overview-card.project-overview-info .info-value input,
.project-overview-card.project-overview-info .info-value select,
.project-overview-card.project-overview-info .info-value button {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.project-overview-card.project-overview-info .info-value.muted {
  font-size: 15px !important;
}

/* Ook de secties klant/locatie en omschrijving krijgen dezelfde leesbaarheid */
.project-overview-card.project-overview-info .info-grid {
  font-size: 16px !important;
}

.project-overview-card.project-overview-info .info-section-desc,
.project-overview-card.project-overview-info .description-value {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* Geen algemene schaalverkleining op de projectinformatiekaart */
.project-overview-card.project-overview-info,
.project-overview-card.project-overview-info * {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* ============================================================
   Beta 5.01 — bredere Projectinformatie-kolom
   ============================================================ */

/* Desktop: projectinformatie krijgt duidelijk meer breedte */
@media (min-width: 1100px) {
  .project-overview-layout,
  .project-overview-grid,
  .overview-main-grid,
  .project-dashboard-grid {
    grid-template-columns: minmax(520px, 1.25fr) minmax(500px, 1.25fr) minmax(300px, .8fr) !important;
  }

  .project-overview-info,
  .project-overview-card.project-overview-info {
    min-width: 520px !important;
  }
}

/* Op zeer brede schermen nog iets ruimer */
@media (min-width: 1450px) {
  .project-overview-layout,
  .project-overview-grid,
  .overview-main-grid,
  .project-dashboard-grid {
    grid-template-columns: minmax(560px, 1.3fr) minmax(520px, 1.25fr) minmax(320px, .8fr) !important;
  }

  .project-overview-info,
  .project-overview-card.project-overview-info {
    min-width: 560px !important;
  }
}


/* ============================================================
   Beta 5.01 — Projectinformatie-kolom écht groter
   ============================================================ */

@media (min-width: 1100px) {
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-main,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-grid,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-layout,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-dashboard-grid,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .overview-main-grid {
    display:grid !important;
    grid-template-columns: 42% 34% 24% !important;
    gap:10px !important;
    align-items:start !important;
  }

  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-card:first-child {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-field,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-field {
    min-height:58px !important;
  }

  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-value,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-value,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info b,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card b {
    font-size:16px !important;
    line-height:1.35 !important;
  }

  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-label,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-label,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info span,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card span {
    font-size:11px !important;
  }
}

/* Extra brede schermen: nog nadrukkelijker links */
@media (min-width: 1450px) {
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-main,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-grid,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-layout,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-dashboard-grid,
  body.project-workspace-active #projectTabContent[data-active-tab="overview"] .overview-main-grid {
    grid-template-columns: 45% 32% 23% !important;
  }
}


/* ============================================================
   Beta 5.01 — Projectinformatie vaste teksten beter leesbaar
   ============================================================ */

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card {
  --project-info-label-size: 12px;
  --project-info-value-size: 16px;
}

/* Hoofdtitel van het blok */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info > .card-header,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card > .card-header,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info h3,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card h3 {
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Kleine uitlegregel onder Projectinformatie */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .muted,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .muted,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .hint,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .hint {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Vaste labels: PROJECTNAAM, PROJECTNUMMER, STATUS, PERIODE, etc. */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .field-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .field-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card label {
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: .045em !important;
  font-weight: 650 !important;
}

/* Sectiekoppen ALGEMEEN / KLANT / LOCATIE / OMSCHRIJVING */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .section-title,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .section-title,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-section-title,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-section-title {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: .06em !important;
  font-weight: 750 !important;
}

/* Iets meer verticale ruimte zodat grotere labels niet tegen waarden plakken */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-field,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-field {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}


/* ============================================================
   Beta 5.01 — uniforme Showarrow typografie
   Doel: overal dezelfde leesbare schaal als goedgekeurde projectweergave
   ============================================================ */

:root{
  --sa-font-xs: 11px;
  --sa-font-sm: 12px;
  --sa-font-md: 14px;
  --sa-font-lg: 16px;
  --sa-font-xl: 20px;
}

/* Basis */
html, body{
  font-size: var(--sa-font-md) !important;
}

/* Normale interface-tekst */
button,
input,
select,
textarea,
table,
td,
th,
label,
.nav,
.toolbar,
.card,
.panel,
.modal,
.dropdown,
.menu,
.list,
.row,
.item{
  font-size: var(--sa-font-md);
}

/* Hoofdnavigatie links */
.sidebar .nav,
.sidebar a,
.sidebar button,
.app-sidebar .nav,
.app-sidebar a,
.app-sidebar button{
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Kleine categoriekoppen links */
.sidebar .nav-section-title,
.sidebar .section-title,
.app-sidebar .nav-section-title,
.app-sidebar .section-title,
.eyebrow{
  font-size: 11px !important;
  line-height: 1.3 !important;
  letter-spacing: .08em !important;
}

/* Projecttabs en andere primaire tabs */
.project-rentman-tab,
.project-render-tabs .project-rentman-tab,
.project-compact-tabs .project-rentman-tab,
.tabs button,
.tabbar button,
.tab-button,
.nav-tabs button{
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

/* Pagina- en kaarttitels */
h1{
  font-size: 24px !important;
  line-height: 1.2 !important;
}
h2{
  font-size: 20px !important;
  line-height: 1.25 !important;
}
h3,
.card-title,
.panel-title,
.modal h2{
  font-size: 16px !important;
  line-height: 1.3 !important;
}

/* Labels en hulptekst */
.muted,
.hint,
.help,
.description,
.subtitle,
small{
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Formulieren */
label{
  font-size: 12px !important;
  line-height: 1.3 !important;
}
input,
select,
textarea{
  font-size: 14px !important;
  line-height: 1.35 !important;
}
input::placeholder,
textarea::placeholder{
  font-size: 14px !important;
}

/* Knoppen */
button,
.button,
.primary,
.secondary{
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Tabellen en lijsten */
table th,
.data-table th,
.list-header,
.column-header{
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
table td,
.data-table td,
.list-row,
.table-row{
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* KPI-kaarten */
.kpi-card,
.metric-card,
.project-kpi-card{
  font-size: 14px !important;
}
.kpi-card strong,
.metric-card strong,
.project-kpi-card strong,
.kpi-value,
.metric-value{
  font-size: 18px !important;
  line-height: 1.15 !important;
}
.kpi-label,
.metric-label{
  font-size: 11px !important;
}

/* Projectinformatie – gelijk houden aan de goedgekeurde grotere schaal */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .field-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .field-label{
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-value,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-value,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info b,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card b{
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* Tijdlijn, taken, activiteiten, notities */
.timeline-item,
.activity-item,
.task-row,
.notification-row,
.log-row,
.note-row{
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.timeline-item .muted,
.activity-item .muted,
.task-row .muted,
.notification-row .muted,
.log-row .muted,
.note-row .muted{
  font-size: 12px !important;
}

/* Materiaal / planning */
.pm-planned-row,
.pm-group-row,
.material-row,
.inventory-row,
.availability-row{
  font-size: 14px !important;
  line-height: 1.3 !important;
}
.pm-planned-row .muted,
.pm-group-row .muted,
.material-row .muted,
.inventory-row .muted,
.availability-row .muted{
  font-size: 12px !important;
}

/* Modals en configuratie */
.modal label,
.modal input,
.modal select,
.modal textarea,
.settings-page,
.configuration-page{
  font-size: 14px !important;
}
.modal .muted,
.settings-page .muted,
.configuration-page .muted{
  font-size: 12px !important;
}

/* Voorkom dat oude compact-regels tekst opnieuw terugschalen */
.compact,
.dense,
.project-overview-compact,
.project-workspace-compact{
  font-size: inherit !important;
}

/* Mobiel/tablet: niet nóg verder vergroten */
@media (max-width: 900px){
  html, body{
    font-size: 14px !important;
  }
  h1{font-size:22px !important}
  h2{font-size:19px !important}
  h3{font-size:16px !important}
}


/* ============================================================
   Beta 5.01 — DEFINITIEVE TYPOGRAFIE-NORMALISATIE
   Eén consistente schaal door heel Showarrow.
   ============================================================ */

:root{
  --sa-text-label: 12px;
  --sa-text-body: 14px;
  --sa-text-value: 16px;
  --sa-text-title: 18px;
  --sa-text-page: 22px;
}

/* ---------- BASIS ---------- */
html,body,
#app,.app-shell,.main,.content,.page,.workspace{
  font-size:var(--sa-text-body)!important;
}

/* ---------- PAGINATITELS ---------- */
.page h1,.page-title,h1{
  font-size:var(--sa-text-page)!important;
  line-height:1.2!important;
  font-weight:750!important;
}
.page h2,.section-page-title,h2{
  font-size:var(--sa-text-title)!important;
  line-height:1.25!important;
  font-weight:750!important;
}
.card-title,.panel-title,.section-title,h3{
  font-size:var(--sa-text-value)!important;
  line-height:1.3!important;
  font-weight:700!important;
}

/* ---------- NAVIGATIE / TABS ---------- */
.sidebar a,.sidebar button,.app-sidebar a,.app-sidebar button,
.project-rentman-tab,.project-render-tabs .project-rentman-tab,
.project-compact-tabs .project-rentman-tab,
.tabs button,.tabbar button,.tab-button,.nav-tabs button{
  font-size:var(--sa-text-body)!important;
  line-height:1.3!important;
  font-weight:650!important;
}

/* ---------- VASTE LABELS ---------- */
.info-label,.field-label,.kpi-label,.metric-label,
.table-header,.column-header,.list-header,
label,.eyebrow,.nav-section-title,
.project-overview-info .info-label,
.project-info-card .info-label,
.pm-planned-table th,.pm-group-table th,
.material-table th,.inventory-table th,
.availability-table th,
table th,.data-table th{
  font-size:var(--sa-text-label)!important;
  line-height:1.3!important;
  font-weight:700!important;
}

/* ---------- NORMALE TEKST ---------- */
p,span,div,td,li,
.muted,.hint,.help,.description,.subtitle,
.activity-item,.task-row,.notification-row,.log-row,.note-row,
.pm-planned-row,.pm-group-row,.material-row,.inventory-row,.availability-row,
.timeline-item,.table-row,.list-row{
  font-size:var(--sa-text-body);
  line-height:1.35;
}

/* Forceer componenten die eerder expliciet kleiner stonden */
.project-overview-card,
.project-overview-card *,
.project-material-page,
.project-material-page *,
.pm-planner,
.pm-planner *,
.material-planner,
.material-planner *,
.project-crew-page,
.project-crew-page *,
.project-planning-page,
.project-planning-page *,
.project-tasks-page,
.project-tasks-page *,
.project-logbook,
.project-logbook *,
.settings-page,
.settings-page *,
.configuration-page,
.configuration-page *,
.modal,
.modal *{
  line-height:1.35;
}

/* ---------- WAARDEN / BELANGRIJKE DATA ---------- */
.info-value,.field-value,.kpi-value,.metric-value,
.project-overview-info .info-value,
.project-info-card .info-value,
.project-overview-info b,
.project-info-card b,
.project-overview-info strong,
.project-info-card strong,
.pm-planned-row .pm-name,
.pm-planned-row .pm-code,
.pm-planned-row .pm-qty,
.pm-planned-row .pm-price,
.material-row .material-name,
.inventory-row .inventory-name{
  font-size:var(--sa-text-value)!important;
  line-height:1.35!important;
  font-weight:700!important;
}

/* ---------- FORMULIEREN ---------- */
input,select,textarea,button,.button,.primary,.secondary{
  font-size:var(--sa-text-body)!important;
  line-height:1.3!important;
}
input::placeholder,textarea::placeholder{
  font-size:var(--sa-text-body)!important;
}

/* ---------- TABELLEN ---------- */
table td,.data-table td,
.pm-planned-table td,.pm-group-table td,
.material-table td,.inventory-table td,.availability-table td{
  font-size:var(--sa-text-body)!important;
  line-height:1.35!important;
}

/* ---------- PROJECT OVERZICHT ---------- */
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-label,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-label{
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-overview-info .info-value,
body.project-workspace-active #projectTabContent[data-active-tab="overview"] .project-info-card .info-value{
  font-size:var(--sa-text-value)!important;
}

/* ---------- MATERIAAL ---------- */
body.project-workspace-active #projectTabContent[data-active-tab="material"] .muted,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .hint,
body.project-workspace-active #projectTabContent[data-active-tab="material"] small,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .pm-group-meta,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .pm-total-sub,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .material-meta{
  font-size:var(--sa-text-label)!important;
}
body.project-workspace-active #projectTabContent[data-active-tab="material"] td,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .pm-planned-row,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .material-row,
body.project-workspace-active #projectTabContent[data-active-tab="material"] .inventory-row{
  font-size:var(--sa-text-body)!important;
}

/* ---------- CREW / PLANNING / TAKEN / LOGBOEK ---------- */
body.project-workspace-active #projectTabContent[data-active-tab="crew"] *,
body.project-workspace-active #projectTabContent[data-active-tab="planning"] *,
body.project-workspace-active #projectTabContent[data-active-tab="tasks"] *,
body.project-workspace-active #projectTabContent[data-active-tab="logbook"] *{
  text-size-adjust:100%!important;
  -webkit-text-size-adjust:100%!important;
}

/* Alleen metadata mag kleiner, maar overal exact dezelfde labelmaat */
small,.small,.meta,.metadata,.timestamp,.subtext,
.activity-meta,.log-meta,.task-meta,.person-meta,
.pm-group-meta,.material-meta{
  font-size:var(--sa-text-label)!important;
  line-height:1.3!important;
}

/* Geen losse 8/9/10px restanten meer in compacte componenten */
.compact,.dense,.project-overview-compact,.project-workspace-compact,
.pm-compact,.table-compact{
  font-size:var(--sa-text-body)!important;
}

/* Mobiel/tablet houdt dezelfde hiërarchie maar niet groter */
@media(max-width:900px){
  :root{
    --sa-text-label:11px;
    --sa-text-body:14px;
    --sa-text-value:16px;
    --sa-text-title:18px;
    --sa-text-page:22px;
  }
}

/* ============================================================
   Beta 5.01 — ECHT één typografieschaal in heel Showarrow
   Hoofdtekst = 16px, labels/meta = 12px, titels groter.
   Dit overschrijft bewust alle oudere compact-regels.
   ============================================================ */

:root{
  --sa-ui-body:16px;
  --sa-ui-label:12px;
  --sa-ui-title:18px;
  --sa-ui-page:22px;
}

/* Basis door de HELE applicatie */
html, body, #app, .app-shell, .main, .content, .page, .workspace{
  font-size:var(--sa-ui-body)!important;
}

/* Alle normale tekstcomponenten krijgen exact dezelfde basismaat */
#app a,
#app button,
#app input,
#app select,
#app textarea,
#app p,
#app td,
#app li,
#app .row,
#app .item,
#app .list-row,
#app .table-row,
#app .card,
#app .panel,
#app .toolbar,
#app .dropdown,
#app .menu,
#app .modal,
#app .project-rentman-tab,
#app .project-inline-field b,
#app .project-contact-primary b,
#app .pm-planned-row,
#app .pm-group-row,
#app .material-row,
#app .inventory-row,
#app .availability-row,
#app .timeline-item,
#app .task-row,
#app .activity-item,
#app .notification-row,
#app .log-row{
  font-size:var(--sa-ui-body)!important;
  line-height:1.35!important;
}

/* Materiaallijst links was nog kleiner dan Overzicht */
#app .project-material-page .material-tree,
#app .project-material-page .material-tree *,
#app .material-picker,
#app .material-picker *,
#app .pm-material-tree,
#app .pm-material-tree *,
#app .project-material-browser,
#app .project-material-browser *{
  font-size:var(--sa-ui-body)!important;
  line-height:1.35!important;
}

/* Gepland materiaal */
#app .pm-planned-table td,
#app .pm-group-table td,
#app .project-material-page td,
#app .project-material-page .pm-name,
#app .project-material-page .pm-code,
#app .project-material-page .pm-qty,
#app .project-material-page .pm-price,
#app .project-material-page .pm-planned-row,
#app .project-material-page .pm-group-row{
  font-size:var(--sa-ui-body)!important;
  line-height:1.35!important;
}

/* Projectoverzicht waarden blijven exact op dezelfde 16px */
#app .project-info-card .project-inline-field b,
#app .project-info-card .project-contact-primary b,
#app .project-info-card .project-contact-card b,
#app .project-info-card .project-inline-grid b,
#app .project-info-card .project-inline-field,
#app .project-info-card .project-contact-primary{
  font-size:var(--sa-ui-body)!important;
  line-height:1.35!important;
}

/* Navigatie links, bovenbalk en projecttabs ook 16px */
#app .sidebar a,
#app .sidebar button,
#app .app-sidebar a,
#app .app-sidebar button,
#app .project-rentman-tab,
#app .project-render-tabs .project-rentman-tab,
#app .project-compact-tabs .project-rentman-tab,
#app .topbar button,
#app .topbar a{
  font-size:var(--sa-ui-body)!important;
  line-height:1.3!important;
}

/* Formulieren */
#app label,
#app input,
#app select,
#app textarea,
#app button{
  font-size:var(--sa-ui-body)!important;
}
#app input::placeholder,
#app textarea::placeholder{
  font-size:var(--sa-ui-body)!important;
}

/* Tabellen */
#app table td,
#app .data-table td,
#app .pm-planned-table td,
#app .pm-group-table td,
#app .material-table td,
#app .inventory-table td,
#app .availability-table td{
  font-size:var(--sa-ui-body)!important;
}

/* Alleen vaste labels / meta / subtitels blijven bewust kleiner */
#app small,
#app .small,
#app .muted,
#app .hint,
#app .help,
#app .meta,
#app .metadata,
#app .timestamp,
#app .subtext,
#app .info-label,
#app .field-label,
#app .project-inline-field > span:first-child,
#app .project-contact-primary > span:first-child,
#app .project-inline-section-title,
#app .nav-section-title,
#app .eyebrow,
#app table th,
#app .data-table th,
#app .pm-planned-table th,
#app .pm-group-table th,
#app .material-table th,
#app .inventory-table th,
#app .availability-table th,
#app .column-header,
#app .list-header,
#app .activity-meta,
#app .log-meta,
#app .task-meta,
#app .person-meta,
#app .material-meta,
#app .pm-group-meta,
#app .pm-total-sub{
  font-size:var(--sa-ui-label)!important;
  line-height:1.3!important;
}

/* Titels */
#app h1,
#app .page-title{
  font-size:var(--sa-ui-page)!important;
  line-height:1.2!important;
}
#app h2,
#app .section-page-title{
  font-size:var(--sa-ui-title)!important;
  line-height:1.25!important;
}
#app h3,
#app .card-title,
#app .panel-title{
  font-size:var(--sa-ui-body)!important;
  line-height:1.3!important;
}

/* KPI-waarden */
#app .kpi-value,
#app .metric-value,
#app .project-kpi-card strong,
#app .project-rentman-kpis strong{
  font-size:var(--sa-ui-body)!important;
}

/* Geen compact class mag nog terugschalen */
#app .compact,
#app .dense,
#app .project-overview-compact,
#app .project-workspace-compact,
#app .pm-compact,
#app .table-compact{
  font-size:var(--sa-ui-body)!important;
}

/* Mobiel behoudt dezelfde leesbaarheid */
@media(max-width:900px){
  :root{
    --sa-ui-body:16px;
    --sa-ui-label:12px;
    --sa-ui-title:18px;
    --sa-ui-page:22px;
  }
}


/* ============================================================
   Beta 5.01 — TYPOGRAFIE FIX OP WERKELIJKE DOM
   Belangrijk: Showarrow heeft geen #app wrapper.
   Daarom worden hieronder de echte layout-elementen gebruikt.
   ============================================================ */

:root{
  --showarrow-text:16px;
  --showarrow-label:12px;
  --showarrow-title:18px;
  --showarrow-page-title:22px;
}

/* Algemene applicatietekst */
body,
.layout,
.layout > main,
.layout > aside{
  font-size:var(--showarrow-text)!important;
}

/* Sidebar */
.layout > aside nav .nav,
.layout > aside .userbox,
.layout > aside .logout{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
}
.layout > aside .nav-section-label{
  font-size:var(--showarrow-label)!important;
  line-height:1.3!important;
}

/* Bovenbalk / open projecten / projecttabs */
main .app-topbar button,
main .app-topbar input,
main .project-workspace-tabs button,
main .project-rentman-tabs .project-rentman-tab,
main .project-compact-tabs .project-rentman-tab,
main .project-render-tabs .project-rentman-tab{
  font-size:var(--showarrow-text)!important;
  line-height:1.3!important;
}

/* Pagina titels */
main h1,
main .page-title{
  font-size:var(--showarrow-page-title)!important;
}
main h2,
main .section-page-title{
  font-size:var(--showarrow-title)!important;
}

/* Normale interface onderdelen */
main button,
main input,
main select,
main textarea,
main td,
main .card,
main .panel,
main .list-row,
main .table-row,
main .task-row,
main .activity-item,
main .notification-row,
main .log-row{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
}

/* Vaste labels / metadata */
main label,
main small,
main .muted,
main .hint,
main .meta,
main .metadata,
main .timestamp,
main .info-label,
main .field-label,
main .eyebrow,
main table th,
main .column-header,
main .list-header{
  font-size:var(--showarrow-label)!important;
  line-height:1.3!important;
}

/* ------------------------------------------------------------
   PROJECT OVERZICHT
   ------------------------------------------------------------ */
main .project-info-card .project-card-heading h2{
  font-size:var(--showarrow-title)!important;
}
main .project-info-card .project-card-heading .muted{
  font-size:var(--showarrow-label)!important;
}
main .project-info-card .project-inline-section-title{
  font-size:var(--showarrow-label)!important;
}
main .project-info-card .project-inline-field > span,
main .project-info-card .project-contact-primary > span{
  font-size:var(--showarrow-label)!important;
}
main .project-info-card .project-inline-field > b,
main .project-info-card .project-contact-primary > b{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
  font-weight:700!important;
}

/* Andere overzichtskaarten op dezelfde schaal */
main .project-overview-column h2,
main .project-overview-column h3,
main .project-overview-column .project-card-heading h2{
  font-size:var(--showarrow-title)!important;
}
main .project-overview-column p,
main .project-overview-column td,
main .project-overview-column button{
  font-size:var(--showarrow-text)!important;
}
main .project-overview-column small,
main .project-overview-column .muted{
  font-size:var(--showarrow-label)!important;
}

/* ------------------------------------------------------------
   MATERIAAL — hier zat het zichtbare verschil
   ------------------------------------------------------------ */

/* Zoekvelden */
main .project-material-tab .pm-catalog-search input,
main .project-material-tab .pm-planned-search input{
  font-size:var(--showarrow-text)!important;
}

/* Mapnamen */
main .project-material-tab .pm-tree-folder-head b{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
}
main .project-material-tab .pm-tree-folder-head small{
  font-size:var(--showarrow-label)!important;
}

/* Materiaalnamen links */
main .project-material-tab .pm-tree-material-name b{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
  font-weight:700!important;
}
main .project-material-tab .pm-tree-material-name small{
  font-size:var(--showarrow-label)!important;
  line-height:1.3!important;
}

/* Geef de grotere tekst genoeg verticale ruimte */
main .project-material-tab .pm-tree-material{
  min-height:46px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}
main .project-material-tab .pm-tree-folder-head{
  min-height:38px!important;
}

/* Gepland materiaal */
main .project-material-tab .pm-planned-head b,
main .project-material-tab .pm-overall-summary-title b,
main .project-material-tab .pm-group-total-row b,
main .project-material-tab .pm-planned-row b{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
}
main .project-material-tab .pm-planned-head span,
main .project-material-tab .pm-overall-summary-title small,
main .project-material-tab .pm-group-total-row small,
main .project-material-tab .pm-planned-row small{
  font-size:var(--showarrow-label)!important;
}
main .project-material-tab .pm-planned-header span,
main .project-material-tab .pm-planned-row > span,
main .project-material-tab .pm-group-total-row > span,
main .project-material-tab .pm-overall-summary > span{
  font-size:var(--showarrow-text)!important;
  line-height:1.35!important;
}
main .project-material-tab .pm-planned-header span{
  font-size:var(--showarrow-label)!important;
  font-weight:700!important;
}

/* Beschikbaarheid */
main .project-material-tab .pm-timeline-name b,
main .project-material-tab .pm-timeline-cell b,
main .project-material-tab .pm-timeline-project span{
  font-size:var(--showarrow-text)!important;
}
main .project-material-tab .pm-timeline-name span,
main .project-material-tab .pm-timeline-cell small,
main .project-material-tab .pm-timeline-head small{
  font-size:var(--showarrow-label)!important;
}

/* ------------------------------------------------------------
   REST PLATFORM — uniforme basis
   ------------------------------------------------------------ */
main .project-crew-page,
main .project-planning-page,
main .project-tasks-page,
main .project-logbook,
main .settings-page,
main .configuration-page,
main .inventory-page,
main .contacts-page,
main .planning-page{
  font-size:var(--showarrow-text)!important;
}

main .project-crew-page td,
main .project-planning-page td,
main .project-tasks-page td,
main .project-logbook td,
main .settings-page td,
main .configuration-page td,
main .inventory-page td,
main .contacts-page td,
main .planning-page td{
  font-size:var(--showarrow-text)!important;
}

main .project-crew-page th,
main .project-planning-page th,
main .project-tasks-page th,
main .project-logbook th,
main .settings-page th,
main .configuration-page th,
main .inventory-page th,
main .contacts-page th,
main .planning-page th{
  font-size:var(--showarrow-label)!important;
}

/* Laat oudere 8/9/10px regels niet winnen op bekende componenten */
main .pm-tree-folder-head b,
main .pm-tree-material-name b,
main .pm-planned-row b,
main .project-inline-field b,
main .project-contact-primary b{
  font-size:var(--showarrow-text)!important;
}


/* ============================================================
   Beta 5.01 — compactere uniforme typografie
   4.89 was visueel te groot. De verhouding blijft gelijk,
   maar de complete interface wordt één stap compacter.
   ============================================================ */
:root{
  --showarrow-text:14px!important;
  --showarrow-label:11px!important;
  --showarrow-title:16px!important;
  --showarrow-page-title:20px!important;
}

/* Houd de materiaalboom compact bij 14px */
main .project-material-tab .pm-tree-material{
  min-height:40px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
}
main .project-material-tab .pm-tree-folder-head{
  min-height:34px!important;
}

/* Rijhoogte gepland materiaal terug in verhouding */
main .project-material-tab .pm-planned-row,
main .project-material-tab .pm-group-total-row{
  min-height:36px!important;
}


/* ============================================================
   Beta 5.01 — klantnotitie, activiteiten en projectdocumenten
   ============================================================ */

/* Klantnotitie uitsluitend op Overzicht, over de volledige werkbreedte */
.project-client-notice-overview{
  width:100%!important;
  max-width:none!important;
  margin:0 0 8px!important;
  min-height:42px!important;
  padding:8px 12px!important;
}
.project-client-notice-overview .project-client-notice-copy{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0;
}
.project-client-notice-overview .project-client-notice-copy small{
  margin:0!important;
  flex:0 0 auto;
  font-size:11px!important;
}
.project-client-notice-overview .project-client-notice-copy b{
  font-size:14px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Recente activiteiten: avatar moet in beide thema's duidelijk leesbaar zijn */
html[data-theme="dark"] .activity-avatar{
  background:#3a5268!important;
  color:#f7fbff!important;
  border:1px solid #69849b!important;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
html[data-theme="light"] .activity-avatar{
  background:#e5eef6!important;
  color:#29475e!important;
  border:1px solid #b8cad9!important;
  box-shadow:0 1px 2px rgba(40,65,85,.10);
}

/* Projectdocument knoppen / generator */
.project-document-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.project-document-generator{
  max-width:780px;
}
.project-document-template-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
}
.project-document-template{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  padding:12px!important;
  border:1px solid var(--line)!important;
  border-radius:8px;
  background:var(--panel-2);
  cursor:pointer;
}
.project-document-template.selected{
  border-color:#ff6900!important;
  box-shadow:inset 3px 0 0 #ff6900;
}
.project-document-template input{
  flex:0 0 auto;
  width:auto!important;
  margin-top:3px;
}
.project-document-template span{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.project-document-template b{
  font-size:14px;
}
.project-document-template small{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
@media(max-width:720px){
  .project-document-template-grid{grid-template-columns:1fr}
}

/* Beta 5.01 — Crew beheer + documentvormgever */
.crew-actions{white-space:nowrap;display:flex;gap:6px;align-items:center}
.danger-outline{border-color:rgba(220,60,70,.55)!important;color:#d95762!important}
.document-layout-designer{max-width:900px}
.layout-designer-options{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 12px}
.layout-block-list{display:grid;gap:6px;margin:12px 0 16px}
.layout-block-row{display:grid;grid-template-columns:28px minmax(200px,1fr) 180px 42px 42px;gap:7px;align-items:center;border:1px solid var(--line);border-radius:7px;padding:7px 8px;background:var(--panel-2)}
.layout-block-row .checkline{margin:0}
.layout-grip{font-size:18px;color:var(--muted);text-align:center}
.project-document-designer-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
@media(max-width:760px){.layout-block-row{grid-template-columns:24px 1fr 1fr}.layout-block-row button{grid-row:2}.crew-actions{flex-wrap:wrap}}


/* ============================================================
   Beta 5.01 — Showarrow bevestigingspopups
   ============================================================ */
.showarrow-confirm-dialog{
  width:min(520px,calc(100vw - 40px));
  max-width:520px;
  padding:2px;
}
.showarrow-confirm-dialog h2{
  margin:8px 0 10px;
}
.showarrow-confirm-dialog p,
.showarrow-confirm-copy{
  line-height:1.5;
}
.showarrow-confirm-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:800;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  margin-bottom:10px;
}
.showarrow-confirm-icon.danger{
  background:rgba(196,48,58,.12);
  border-color:rgba(220,70,80,.45);
  color:#e05c66;
}
.danger-button{
  border:1px solid rgba(220,70,80,.55)!important;
  background:rgba(190,45,55,.18)!important;
  color:#ff7c84!important;
  font-weight:700!important;
}
.danger-button:hover{
  background:rgba(190,45,55,.28)!important;
}
html[data-theme="light"] .danger-button{
  color:#b4212f!important;
  background:#fff0f1!important;
  border-color:#e5a4aa!important;
}
html[data-theme="light"] .showarrow-confirm-icon.danger{
  color:#b4212f;
  background:#fff0f1;
  border-color:#e5a4aa;
}


/* ============================================================
   Beta 5.01 — organisatiebreed configuratiecentrum
   ============================================================ */
.configuration-center{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start;max-width:1500px;margin:0 auto}
.config-center-sidebar{position:sticky;top:12px;border-right:1px solid var(--line);padding:4px 16px 30px 0;max-height:calc(100vh - 40px);overflow:auto}
.config-center-group{margin:0 0 18px}.config-center-group h4{margin:0 0 5px;padding:0 10px;color:var(--text);font-size:13px;letter-spacing:.03em}
.config-center-nav{width:100%;border:0;background:transparent;color:var(--muted);text-align:left;border-radius:6px;padding:8px 10px;font-size:13px;cursor:pointer}
.config-center-nav:hover{background:var(--panel-2);color:var(--text)}.config-center-nav.active{color:var(--accent);font-weight:700;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.config-center-main{min-width:0}.config-center-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:0 0 12px;margin-bottom:14px}.config-center-heading h2{margin:2px 0 4px;font-size:22px}.config-center-heading p{margin:0;color:var(--muted);max-width:850px}.config-center-actions{display:flex;gap:8px;flex-shrink:0}
.config-info-banner{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--accent) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));padding:12px 14px;border-radius:7px;margin-bottom:14px}.config-info-banner>span{font-size:17px}.config-info-banner div{line-height:1.45}
.config-card,.config-list-card{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin-bottom:14px;overflow:hidden}.config-card-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.035em;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.config-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;padding:18px}.config-form-grid label{margin:0}.config-form-grid .span-2{grid-column:1/-1}.config-check{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;padding-top:22px}.config-check input{width:auto!important}
.config-table-toolbar{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel-2)}.config-table-toolbar>div{display:flex;gap:8px}
.config-data-table{overflow:auto}.config-data-row{display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(3,minmax(110px,1fr)) 36px;align-items:center;width:100%;min-height:40px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left;padding:0 10px;cursor:pointer}.config-data-row:nth-child(odd):not(.head){background:color-mix(in srgb,var(--panel-2) 45%,transparent)}.config-data-row:hover:not(.head){background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.config-data-row.head{font-size:11px;color:var(--muted);font-weight:700;cursor:default;background:var(--panel-2)}.config-data-row span{padding:7px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.config-nr-row{grid-template-columns:1.2fr 1.3fr 1fr 100px 90px 36px}
.config-item-editor,.config-bulk-editor{width:min(760px,calc(100vw - 44px))}.config-bulk-editor textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;min-height:280px}.config-bulk-preview{margin-top:8px;color:var(--muted);font-size:12px}.config-menu-divider{height:1px;background:var(--line);margin:5px 8px}.config-main-link{font-weight:700!important}
@media(max-width:900px){.configuration-center{grid-template-columns:1fr}.config-center-sidebar{position:static;display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 10px}.config-center-group{min-width:185px}.config-form-grid{grid-template-columns:1fr}.config-data-row{min-width:780px}}

/* Beta 5.01 — Configuratie is één directe navigatieknop */
.config-nav-direct .configuration-menu{display:none!important}
.config-direct-button{width:100%;justify-content:flex-start!important}
.config-direct-button .config-chevron{display:none!important}


/* ============================================================
   Beta 5.01 — beheerpagina's ingebed in Configuratiecentrum
   ============================================================ */
.config-embedded-page{
  min-width:0;
}
.config-embedded-page > .toolbar:first-child{
  margin-top:0;
}
.config-embedded-page .page-head,
.config-embedded-page .toolbar{
  max-width:none;
}
.config-embedded-page .card{
  max-width:none;
}


/* ============================================================
   Beta 5.01 — Configuratie layout + Rollen & rechten
   ============================================================ */

/* Configuratie gebruikt de beschikbare breedte en begint direct links. */
.configuration-center{
  max-width:none !important;
  margin:0 !important;
  grid-template-columns:210px minmax(0,1fr) !important;
  gap:14px !important;
}
.config-center-sidebar{
  padding-right:12px !important;
}
.config-center-main{
  width:100% !important;
}

/* Lichte modus: configuratiekolom hoort ook echt licht te zijn. */
html[data-theme="light"] .config-center-sidebar,
body.light .config-center-sidebar{
  background:#f6f8fb !important;
  color:#182131 !important;
  border-color:#d9e0e8 !important;
}
html[data-theme="light"] .config-center-group h4,
body.light .config-center-group h4{
  color:#172033 !important;
}
html[data-theme="light"] .config-center-nav,
body.light .config-center-nav{
  color:#5b6677 !important;
}
html[data-theme="light"] .config-center-nav:hover,
body.light .config-center-nav:hover{
  background:#edf1f6 !important;
  color:#172033 !important;
}
html[data-theme="light"] .config-center-nav.active,
body.light .config-center-nav.active{
  background:#fff1e9 !important;
  color:#d94f00 !important;
}
html[data-theme="light"] .config-embedded-page,
body.light .config-embedded-page{
  color:#172033;
}

/* Rollenoverzicht: alleen informatie die eindgebruikers nodig hebben. */
.roles-config-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
.roles-config-head h2{
  margin:0 0 4px;
}
.roles-config-head p{
  margin:0;
}
.role-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.role-manage-card{
  display:block;
  width:100%;
  text-align:left;
  padding:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.role-manage-card:hover{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 4%,var(--panel));
  transform:translateY(-1px);
}
.role-manage-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.role-manage-card h3{
  margin:0 0 5px;
  font-size:17px;
}
.role-manage-card p{
  margin:0;
  color:var(--muted);
  min-height:38px;
}
.role-manage-meta{
  margin-top:11px;
  color:var(--muted);
  font-size:12px;
}
.role-manage-action{
  margin-top:11px;
  color:var(--accent);
  font-weight:700;
}

/* Interactieve rollen-popup */
.modal:has(.role-editor-modal){
  width:min(900px,calc(100vw - 44px)) !important;
  max-width:900px !important;
  padding:0 !important;
  overflow:hidden;
}
.role-editor-modal{
  min-width:0;
}
.role-editor-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--line);
}
.role-editor-header h2{
  margin:3px 0 5px;
}
.role-editor-header p{
  margin:0;
  max-width:620px;
}
.role-editor-counter{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:88px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-2);
}
.role-editor-counter strong{
  font-size:20px;
}
.role-editor-counter span{
  color:var(--muted);
  font-size:11px;
}
.role-editor-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 24px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.role-permission-search{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  width:min(420px,100%);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:var(--panel);
}
.role-permission-search span{
  color:var(--muted);
  font-size:18px;
}
.role-permission-search input{
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  width:100%;
  padding:10px 0 !important;
}
.role-editor-bulk{
  display:flex;
  gap:8px;
}
.role-permission-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:16px 24px;
  max-height:52vh;
  overflow:auto;
}
.role-permission-option{
  display:grid !important;
  grid-template-columns:auto 20px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin:0 !important;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  cursor:pointer;
  user-select:none;
}
.role-permission-option:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
}
.role-permission-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.role-permission-check{
  width:18px;
  height:18px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel-2);
  position:relative;
}
.role-permission-option input:checked + .role-permission-check{
  background:var(--accent);
  border-color:var(--accent);
}
.role-permission-option input:checked + .role-permission-check::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:white;
  font-size:12px;
  font-weight:800;
}
.role-permission-description{
  color:var(--text);
  font-weight:600;
}
.role-editor-empty{
  margin:18px 24px;
  padding:22px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:8px;
}
.role-editor-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 24px 18px;
  border-top:1px solid var(--line);
  background:var(--panel-2);
}
.role-editor-footer .form-actions{
  margin:0 !important;
}
.role-create-modal{
  padding:22px 24px;
}
html[data-theme="light"] .role-manage-card,
html[data-theme="light"] .role-permission-option,
html[data-theme="light"] .role-permission-search,
body.light .role-manage-card,
body.light .role-permission-option,
body.light .role-permission-search{
  background:#fff !important;
  color:#172033 !important;
}
html[data-theme="light"] .role-editor-tools,
html[data-theme="light"] .role-editor-footer,
html[data-theme="light"] .role-editor-counter,
body.light .role-editor-tools,
body.light .role-editor-footer,
body.light .role-editor-counter{
  background:#f5f7fa !important;
  color:#172033 !important;
}
html[data-theme="light"] .role-permission-description,
body.light .role-permission-description{
  color:#172033 !important;
}
@media(max-width:850px){
  .configuration-center{grid-template-columns:1fr !important}
  .role-permission-list{grid-template-columns:1fr}
  .role-editor-tools,.role-editor-footer{align-items:stretch;flex-direction:column}
  .role-editor-bulk{width:100%}
}


/* ============================================================
   Beta 5.01 — Configuratiekolom is een harde, eigen kolom
   Niets uit de inhoud mag er nog onder/achter schuiven.
   ============================================================ */
.configuration-center{
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) !important;
  column-gap:0 !important;
  align-items:start !important;
  width:100% !important;
  max-width:none !important;
  overflow:visible !important;
}

.config-center-sidebar{
  position:sticky !important;
  top:12px !important;
  grid-column:1 !important;
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  box-sizing:border-box !important;
  padding:4px 14px 30px 0 !important;
  margin:0 !important;
  z-index:20 !important;
  background:var(--bg) !important;
  border-right:1px solid var(--line) !important;
  overflow-x:hidden !important;
}

.config-center-main{
  grid-column:2 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding-left:20px !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:1 !important;
}

.config-center-main > *,
.config-embedded-page,
.config-embedded-page > *{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* voorkom dat oude pagina-layouts met negatieve margins de zijbalk in kunnen lopen */
.config-embedded-page .page-head,
.config-embedded-page .toolbar,
.config-embedded-page .card,
.config-embedded-page .roles-config-head,
.config-embedded-page .role-card-grid{
  margin-left:0 !important;
  left:auto !important;
  transform:none !important;
}

html[data-theme="light"] .config-center-sidebar,
body.light .config-center-sidebar{
  background:#f4f7fb !important;
  box-shadow:10px 0 18px -18px rgba(15,23,42,.45);
}

html[data-theme="dark"] .config-center-sidebar,
body.dark .config-center-sidebar{
  background:#0d141d !important;
  box-shadow:10px 0 18px -18px rgba(0,0,0,.8);
}

@media(max-width:900px){
  .configuration-center{
    grid-template-columns:1fr !important;
  }
  .config-center-sidebar{
    position:relative !important;
    top:auto !important;
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
    padding:0 0 12px !important;
  }
  .config-center-main{
    grid-column:1 !important;
    padding-left:0 !important;
    padding-top:14px !important;
  }
}


/* ============================================================
   Beta 5.01 — Rollenpopup: drie kolommen breed
   ============================================================ */
.modal:has(.role-editor-modal){
  width:min(1180px,calc(100vw - 56px)) !important;
  max-width:1180px !important;
}

.role-permission-list{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

.role-permission-option{
  min-width:0 !important;
}

.role-permission-description{
  min-width:0 !important;
  overflow-wrap:anywhere;
}

@media(max-width:1050px){
  .modal:has(.role-editor-modal){
    width:min(900px,calc(100vw - 40px)) !important;
  }
  .role-permission-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:700px){
  .modal:has(.role-editor-modal){
    width:calc(100vw - 24px) !important;
  }
  .role-permission-list{
    grid-template-columns:1fr !important;
  }
}


/* Beta 5.01 — rollenpopup correct 3-koloms en verder rechts */
.modal:has(.role-editor-modal){
  width:min(1120px,calc(100vw - 80px)) !important;
  max-width:1120px !important;
  position:relative !important;
  left:110px !important;
}
.role-permission-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.role-permission-option{grid-template-columns:20px minmax(0,1fr) !important; min-height:58px !important;}
.role-permission-description{width:auto !important;max-width:none !important;white-space:normal !important;word-break:normal !important;overflow-wrap:break-word !important;line-height:1.25 !important;}
.attention-item.attention-very_urgent{border-left:3px solid #ef4444;}
.attention-item.attention-urgent{border-left:3px solid #f97316;}
.attention-item.attention-attention{border-left:3px solid #eab308;}
.attention-ack{margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:#34d399;font-weight:900;cursor:pointer;}
.attention-ack:hover{border-color:#34d399;background:color-mix(in srgb,#34d399 12%,var(--panel-2));}
@media(max-width:1350px){.modal:has(.role-editor-modal){left:55px !important;width:min(1040px,calc(100vw - 54px)) !important;}.role-permission-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media(max-width:1050px){.modal:has(.role-editor-modal){left:0 !important;}.role-permission-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}


/* ============================================================
   Beta 5.02 — rollenpopup correct rechts van configuratiekolom
   + dashboard materiaaltekorten laadfix
   ============================================================ */
.modal:has(.role-editor-modal){
  left:calc(50% + 115px) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(1120px,calc(100vw - 480px)) !important;
  max-width:1120px !important;
  max-height:calc(100dvh - 56px) !important;
}
@media(max-width:1500px){
  .modal:has(.role-editor-modal){
    left:calc(50% + 85px) !important;
    width:min(1040px,calc(100vw - 390px)) !important;
  }
}
@media(max-width:1200px){
  .modal:has(.role-editor-modal){
    left:calc(50% + 40px) !important;
    width:min(900px,calc(100vw - 270px)) !important;
  }
  .role-permission-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:850px){
  .modal:has(.role-editor-modal){
    left:50% !important;
    width:calc(100vw - 28px) !important;
  }
  .role-permission-list{grid-template-columns:1fr !important;}
}

/* Beta 5.18 — persistent Development feedback */
.development-page{max-width:1500px;margin:0 auto}.development-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:14px}.development-head h1{margin:3px 0 5px}.development-head p{margin:0;color:var(--muted);max-width:760px}.development-kpis{display:grid;grid-template-columns:repeat(3,minmax(120px,190px));gap:9px;margin-bottom:12px}.development-kpis>div{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px 13px;display:flex;flex-direction:column}.development-kpis b{font-size:20px}.development-kpis span{font-size:11px;color:var(--muted)}.development-toolbar{display:flex;gap:8px;margin-bottom:12px}.development-toolbar input{flex:1}.development-toolbar select{width:190px}.development-list{display:grid;gap:9px}.development-issue{border-left:4px solid var(--line)!important}.development-issue.severity-critical{border-left-color:#e04755!important}.development-issue.severity-high{border-left-color:#ef8c32!important}.development-issue-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.development-issue-top>div{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.development-number{font-weight:900;letter-spacing:.04em}.development-type,.development-severity,.development-status{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}.development-severity.critical{color:#ff747d}.development-severity.high{color:#f3a34e}.development-status.resolved{color:#58c987}.development-status.acknowledged,.development-status.in_progress{color:#6baeff}.development-issue h3{margin:10px 0 5px}.development-description{white-space:pre-wrap;margin:0 0 8px;line-height:1.5}.development-meta{font-size:11px;color:var(--muted)}.development-attachments{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.development-attachments a{font-size:11px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:var(--text);text-decoration:none}.development-response{margin-top:10px;padding:10px 12px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line)}.development-response p{margin:4px 0 0;white-space:pre-wrap}.development-admin-actions{display:flex;justify-content:flex-end;margin-top:9px}.modal:has(.development-editor){width:min(720px,calc(100vw - 36px))!important;max-width:720px!important}.development-editor textarea{resize:vertical}.development-editor .form-grid{grid-template-columns:1fr 1fr}@media(max-width:700px){.development-head{flex-direction:column}.development-kpis{grid-template-columns:repeat(3,1fr)}.development-toolbar{flex-direction:column}.development-toolbar select{width:100%}.development-editor .form-grid{grid-template-columns:1fr}}


/* Beta 5.75 — snelle Developmentmelding */
.development-quick-nav{
  font-weight:700;
}
.development-context{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px;margin:8px 0 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel-2,rgba(127,127,127,.06));
}
.development-context span{color:var(--muted)}
.development-capture-box{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 14px;margin-top:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2,rgba(127,127,127,.06));
}
.development-capture-box>div{display:grid;gap:4px}
.development-capture-box small{color:var(--muted);max-width:560px;line-height:1.35}
.development-capture-status{font-size:.88rem;color:var(--muted);margin:7px 2px 12px}
.development-capture-status b{color:var(--text)}
@media(max-width:760px){
 .development-capture-box{align-items:stretch;flex-direction:column}
 .development-capture-box button{width:100%}
}


/* Beta 5.75 — Project workflow / gereedheid */
.project-readiness-card{padding:0;overflow:hidden}
.project-readiness-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 18px 13px}
.project-readiness-head h2{margin:2px 0 3px}
.project-readiness-score{width:72px;height:62px;border:1px solid var(--line);border-radius:12px;display:grid;place-content:center;text-align:center;background:var(--panel-2,rgba(127,127,127,.05))}
.project-readiness-score strong{font-size:1.18rem;line-height:1}
.project-readiness-score span{font-size:.72rem;color:var(--muted);margin-top:4px}
.project-readiness-score.ready strong{color:#32c56a}
.project-readiness-score.almost strong{color:#f2a01f}
.project-readiness-score.attention strong{color:#ff5c57}
.project-readiness-progress{height:6px;background:rgba(127,127,127,.14);overflow:hidden}
.project-readiness-progress i{display:block;height:100%;background:linear-gradient(90deg,#ff6a00,#6c55ff);border-radius:0 4px 4px 0;transition:width .25s ease}
.project-readiness-list{display:grid}
.project-readiness-row{appearance:none;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;padding:11px 14px;cursor:pointer}
.project-readiness-row:hover{background:rgba(127,127,127,.06)}
.project-readiness-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.78rem}
.project-readiness-row.complete .project-readiness-check{background:rgba(50,197,106,.15);color:#32c56a}
.project-readiness-row.open .project-readiness-check{background:rgba(255,106,0,.15);color:#ff7a18}
.project-readiness-row div{display:grid;gap:2px;min-width:0}
.project-readiness-row small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-readiness-open{font-size:.76rem;color:var(--muted)}
.project-risk-summary{font-size:.76rem;color:var(--muted);white-space:nowrap}
.ops-alert-dot{font-size:.72rem}
.ops-alert.danger .ops-alert-dot{color:#ff5c57}
.ops-alert.warning .ops-alert-dot{color:#f2a01f}
.ops-alert.info .ops-alert-dot{color:#3da5ff}
@media(max-width:900px){
 .project-readiness-head{align-items:flex-start}
 .project-readiness-row{grid-template-columns:28px minmax(0,1fr)}
 .project-readiness-open{display:none}
}


/* Beta 5.75 — Projecttijdlijn navigatie en controle */
.timeline-main-toolbar{align-items:flex-start}
.timeline-range-nav{display:flex;align-items:center;gap:5px}
.timeline-range-nav.is-disabled{opacity:.55}
.timeline-range-nav .icon-button{min-width:34px;padding-left:9px;padding-right:9px;font-size:1.25rem;line-height:1}
.timeline-project-summary{display:flex;align-items:center;justify-content:space-between;gap:16px}
.timeline-summary-stats{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.timeline-summary-stats>span,.timeline-warning-chip{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--panel-2,rgba(127,127,127,.05));color:inherit;font-size:.78rem}
.timeline-warning-chip{cursor:pointer;border-color:rgba(242,160,31,.38);color:#f2a01f}
.timeline-ok-chip{color:#32c56a!important}
.timeline-outside-warning{display:flex;align-items:center;gap:12px;margin:12px 0;border-color:rgba(242,160,31,.35)}
.timeline-outside-warning b{color:#f2a01f;white-space:nowrap}
.timeline-outside-warning span{color:var(--muted)}
.timeline-gantt-card .gantt-scroll{overflow-x:auto}
.timeline-gantt-card .gantt-header,.timeline-gantt-card .gantt-row{min-width:max(100%,calc(var(--gantt-days) * 42px + 210px))}
.gantt-day.is-weekend{background:rgba(127,127,127,.045)}
.gantt-day.is-today{font-weight:800;position:relative;background:rgba(255,106,0,.08)}
.gantt-today-marker{position:absolute;left:50%;top:100%;width:1px;height:999px;background:rgba(255,106,0,.38);pointer-events:none;z-index:0}
@media(max-width:1000px){
 .timeline-project-summary{align-items:flex-start;flex-direction:column}
 .timeline-summary-stats{justify-content:flex-start}
 .timeline-range-nav{width:100%}
 .timeline-range-nav input{min-width:0;flex:1}
}


/* Beta 5.75 — Agenda project/material events + draggable planperiode */
.plan-period-draggable{cursor:grab!important}
.plan-period-draggable:active,.plan-period-draggable.dragging{cursor:grabbing!important}
.planning-agenda-filter-list{display:grid;gap:8px;margin:16px 0}
.planning-agenda-filter-list label{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:9px}
.planning-agenda-filter-list input{width:auto;margin:0}
.planning-day-calendar-events{display:grid;gap:5px;margin:7px 0 9px}
.planning-calendar-event{width:100%;display:flex;align-items:center;gap:7px;text-align:left;border:1px solid var(--line);border-radius:7px;padding:6px 8px;background:var(--panel-2,rgba(127,127,127,.05));color:inherit;cursor:pointer;min-width:0}
.planning-calendar-event:hover{transform:translateY(-1px);border-color:rgba(255,106,0,.45)}
.planning-calendar-event>span{font-size:.9rem;flex:0 0 auto}
.planning-calendar-event>div{display:grid;min-width:0}
.planning-calendar-event b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planning-calendar-event small{font-size:.69rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planning-calendar-event.compact{padding:3px 5px;margin:2px 0;border-radius:5px}
.planning-calendar-event.compact b{font-size:.68rem}
.calendar-event-project_out{border-left:3px solid #ff6a00}
.calendar-event-project_in{border-left:3px solid #6c55ff}
.calendar-event-material_out{border-left:3px solid #e5a31a}
.calendar-event-material_in{border-left:3px solid #29a66f}
.planning-month-cell .planning-calendar-event{position:relative;z-index:2}


/* Beta 5.75 — crewplanning */
.crew-summary-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.crew-summary-strip span{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.78rem;background:var(--panel-2,rgba(127,127,127,.05))}
.crew-availability-check{margin:12px 0}
.crew-check-ok,.crew-check-warning{display:grid;gap:4px;border:1px solid var(--line);border-radius:9px;padding:11px 12px}
.crew-check-ok{border-color:rgba(50,197,106,.35);background:rgba(50,197,106,.07)}
.crew-check-ok b{color:#32c56a}
.crew-check-warning{border-color:rgba(242,160,31,.4);background:rgba(242,160,31,.07)}
.crew-check-warning b{color:#f2a01f}
.crew-check-warning span,.crew-check-warning small,.crew-check-ok span{font-size:.78rem;color:var(--muted)}
.crew-permissions-details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.crew-permissions-details summary{cursor:pointer;font-weight:700}

.notification-toast-stack{position:fixed;right:18px;top:18px;z-index:10050;display:grid;gap:9px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.notification-toast{pointer-events:auto;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 22px;gap:10px;align-items:start;text-align:left;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel,#17191f);color:inherit;box-shadow:0 14px 42px rgba(0,0,0,.28);cursor:pointer;animation:notificationToastIn .22s ease-out}
.notification-toast-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(108,85,255,.14);font-weight:800}.notification-toast-success .notification-toast-icon{background:rgba(50,197,106,.15);color:#32c56a}.notification-toast-warning .notification-toast-icon{background:rgba(242,160,31,.16);color:#f2a01f}
.notification-toast>div{display:grid;gap:3px;min-width:0}.notification-toast b{font-size:.86rem}.notification-toast small{color:var(--muted);line-height:1.35}.notification-toast-close{font-size:1.15rem;color:var(--muted);text-align:center}.notification-toast-out{opacity:0;transform:translateX(18px);transition:.25s ease}@keyframes notificationToastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@media(max-width:700px){.notification-toast-stack{top:10px;right:10px}}

/* Beta 5.75 — Showarrow bevestigingsvenster */
.showarrow-confirm{min-width:min(430px,calc(100vw - 48px))}
.showarrow-confirm p{color:var(--muted);line-height:1.55;margin:8px 0 18px}
button.danger{background:#c73b43;border:1px solid #d64a52;color:#fff;font-weight:700}
button.danger:hover{filter:brightness(1.08)}


/* Beta 5.75 — projecttaken workflow */
.project-task-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.project-task-kpis button{border:1px solid var(--line);border-radius:10px;background:var(--panel-2,rgba(127,127,127,.05));color:inherit;padding:10px 12px;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.project-task-kpis button span{color:var(--muted);font-size:.76rem}.project-task-kpis button b{font-size:1.05rem}
.project-task-kpis button.danger b{color:#ff5c57}
.project-task-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px 190px auto;gap:8px;margin-bottom:10px;padding:10px}
.project-task-board{padding:0;overflow:hidden}
.project-task-list-head,.project-task-row-v2{display:grid;grid-template-columns:minmax(260px,1.7fr) 160px minmax(160px,1fr) 150px auto;gap:12px;align-items:center}
.project-task-list-head{padding:9px 12px;border-bottom:1px solid var(--line);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.project-task-row-v2{padding:10px 12px;border-bottom:1px solid var(--line)}
.project-task-row-v2:last-child{border-bottom:0}.project-task-row-v2.overdue{background:rgba(255,92,87,.045)}
.project-task-main{appearance:none;border:0;background:transparent;color:inherit;text-align:left;display:grid;gap:3px;cursor:pointer;padding:0}
.project-task-main small,.project-task-date small,.project-task-status-wrap small{color:var(--muted)}
.project-task-date{display:grid;gap:2px}.project-task-date em{font-style:normal;color:#ff5c57;font-size:.7rem;font-weight:700}
.project-task-people{display:flex;gap:4px;flex-wrap:wrap}
.project-task-status-wrap{display:grid;gap:4px}
.project-task-status-select{min-width:125px}
.project-task-actions{display:flex;gap:5px;justify-content:flex-end}
@media(max-width:1100px){
 .project-task-toolbar{grid-template-columns:1fr 1fr}
 .project-task-list-head{display:none}
 .project-task-row-v2{grid-template-columns:1fr 1fr}
 .project-task-actions{justify-content:flex-start}
}
@media(max-width:700px){
 .project-task-kpis{grid-template-columns:1fr 1fr}
 .project-task-toolbar,.project-task-row-v2{grid-template-columns:1fr}
}


/* Beta 5.75 — soepel slepen van projecttijdlijnen */
.timeline-gantt-card .gantt-bar{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.timeline-gantt-card .gantt-bar.pointer-dragging{cursor:grabbing;z-index:12;transform:translateX(var(--timeline-drag-x,0));box-shadow:0 8px 24px rgba(0,0,0,.32);opacity:.94;transition:none!important}
.timeline-gantt-card .gantt-bar.pointer-dragging::after{content:attr(data-drag-days);position:absolute;left:50%;top:-28px;transform:translateX(-50%);padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel,#17191f);color:var(--text,#fff);font-size:.7rem;font-weight:800;white-space:nowrap;pointer-events:none}
.timeline-drag-active .gantt-scroll{cursor:grabbing}


/* Beta 5.75 — alle tijdlijnbalken gebruiken exact dezelfde pointer-drag */
.timeline-gantt-card .gantt-bar[data-drag-kind="timeline"],
.timeline-gantt-card .gantt-bar[data-drag-kind="plan"]{
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.timeline-gantt-card .gantt-bar[data-drag-kind="timeline"].pointer-dragging,
.timeline-gantt-card .gantt-bar[data-drag-kind="plan"].pointer-dragging{
  cursor:grabbing;
  transform:translateX(var(--timeline-drag-x,0));
  transition:none!important;
  z-index:20;
}


/* Beta 5.75 — Planning Crew */
.crew-planning-main-toolbar{align-items:flex-start}
.crew-planning-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.crew-planning-kpis button{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel-2,rgba(127,127,127,.05));color:inherit;cursor:pointer}
.crew-planning-kpis span{font-size:.76rem;color:var(--muted)}.crew-planning-kpis b{font-size:1.05rem}.crew-planning-kpis .danger b{color:#ff5c57}
.crew-planning-filters{display:grid;grid-template-columns:minmax(220px,1fr) 170px 180px 140px auto;gap:8px;padding:10px;margin-bottom:10px}
.crew-conflict-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;border-color:rgba(255,92,87,.36);background:rgba(255,92,87,.05);margin-bottom:10px}
.crew-conflict-banner>div{display:grid;gap:3px}.crew-conflict-banner b{color:#ff5c57}.crew-conflict-banner span{font-size:.78rem;color:var(--muted)}
.crew-planning-gantt .gantt-scroll{overflow-x:auto}
.crew-planning-gantt .gantt-header,.crew-planning-gantt .gantt-row{min-width:max(100%,calc(var(--gantt-days) * 42px + 220px))}
.crew-planning-label{cursor:pointer}
.crew-planning-label em{display:block;font-style:normal;font-size:.67rem;color:#ff7772;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.crew-assignment-bar{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--accent,#ff6a00)}
.crew-assignment-bar.status-planned{opacity:.72}.crew-assignment-bar.status-cancelled{opacity:.35;text-decoration:line-through}
.crew-assignment-bar.crew-assignment-conflict{outline:2px solid rgba(255,92,87,.75);outline-offset:-2px}
.crew-assignment-bar.pointer-dragging{cursor:grabbing;z-index:22;transform:translateX(var(--timeline-drag-x,0));transition:none!important;box-shadow:0 8px 24px rgba(0,0,0,.32)}
.crew-assignment-bar.pointer-dragging::after{content:attr(data-drag-days);position:absolute;left:50%;top:-28px;transform:translateX(-50%);padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel,#17191f);font-size:.7rem;font-weight:800;white-space:nowrap}
.crew-row-conflict{background:rgba(255,92,87,.045)}.crew-inline-conflict{color:#ff7772;font-size:.7rem;margin-top:3px}
.crew-no-period{font-size:.72rem;color:var(--muted);padding:5px}
@media(max-width:1000px){
 .crew-planning-filters{grid-template-columns:1fr 1fr}
 .crew-planning-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){.crew-planning-filters{grid-template-columns:1fr}}


/* Beta 5.75 — Crewplanning in dezelfde plannerstructuur als Materiaal */
.pcp-workspace{--pcp-left:350px;display:grid;grid-template-columns:var(--pcp-left) 8px minmax(0,1fr);min-height:560px;gap:0}
.pcp-catalog{border-radius:10px 0 0 10px;overflow:hidden;min-width:0;padding:0}
.pcp-catalog .pm-search{margin:10px}.pcp-catalog .pm-tree-help{padding:7px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pcp-catalog-tree{overflow:auto;max-height:690px;padding:5px}
.pcp-catalog-group-head{display:flex;justify-content:space-between;align-items:center;padding:9px 8px;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.pcp-person{display:grid;grid-template-columns:20px 20px minmax(0,1fr);align-items:center;gap:6px;padding:8px;border-radius:7px;cursor:pointer;border:1px solid transparent}
.pcp-person:hover{background:rgba(127,127,127,.07)}.pcp-person.selected{background:rgba(255,106,0,.10);border-color:rgba(255,106,0,.35)}
.pcp-person.dragging{opacity:.48}.pcp-person small,.pcp-name small{display:block;color:var(--muted);font-size:.7rem;margin-top:2px}.pcp-drag{cursor:grab;color:var(--muted)}
.pcp-planned{border-radius:0 10px 10px 0;overflow:hidden;min-width:0;padding:0;transition:border-color .12s,background .12s}
.pcp-planned.drag-over{border-color:var(--accent,#ff6a00);background:rgba(255,106,0,.035)}
.pcp-planned-head-row,.pcp-planned-row{display:grid;grid-template-columns:34px minmax(180px,1.35fr) 100px minmax(130px,.8fr) 145px 145px 100px;gap:8px;align-items:center}
.pcp-planned-head-row{padding:8px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}
.pcp-planned-row{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;min-height:48px}
.pcp-planned-row:hover{background:rgba(127,127,127,.04)}.pcp-planned-row.selected{background:rgba(255,106,0,.085)}.pcp-planned-row.has-conflict{box-shadow:inset 3px 0 #ff5c57}
.pcp-planned-row.dragging{opacity:.45}.pcp-planned-row.search-hidden{display:none}.pcp-name em{font-style:normal;color:#ff7772}
.pcp-empty{padding:12px;color:var(--muted);font-size:.75rem}.pcp-empty.large{padding:42px;text-align:center}
#projectCrewSplitter{cursor:col-resize}
@media(max-width:900px){.pcp-workspace{grid-template-columns:300px 8px minmax(650px,1fr);overflow-x:auto}}


/* Beta 5.75 — Crewplanner layout polish */
.pcp-page{width:100%;max-width:none}
.pcp-workspace{
  --pcp-left:330px;
  display:grid;
  grid-template-columns:var(--pcp-left) 6px minmax(0,1fr);
  width:100%;
  min-height:560px;
  gap:0;
  align-items:stretch;
}
.pcp-catalog,
.pcp-planned{
  margin:0 !important;
  height:100%;
  min-height:560px;
}
.pcp-catalog{
  border-radius:10px 0 0 10px !important;
  border-right:0 !important;
}
#projectCrewSplitter{
  width:6px;
  min-width:6px;
  height:100%;
  min-height:560px;
  margin:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel,#151a20);
  position:relative;
}
#projectCrewSplitter:after{
  content:"";
  position:absolute;
  left:2px;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
}
#projectCrewSplitter span{display:none}
.pcp-planned{
  border-radius:0 10px 10px 0 !important;
  border-left:0 !important;
  width:auto;
  min-width:0;
}
.pcp-planned .pm-planned-head{padding-left:18px;padding-right:18px}
.pcp-planned-list{width:100%;overflow-x:auto}
.pcp-planned-head-row,
.pcp-planned-row{
  width:100%;
  box-sizing:border-box;
  grid-template-columns:34px minmax(180px,1.5fr) 100px minmax(130px,1fr) minmax(135px,.9fr) minmax(135px,.9fr) 100px;
}
.pcp-catalog-tree{max-height:none}
@media(min-width:1200px){
  .pcp-workspace{--pcp-left:320px}
}
@media(min-width:1500px){
  .pcp-workspace{--pcp-left:300px}
}


/* Beta 5.75 — definitieve crewplanner kolomfix
   Belangrijk: de personeelscatalogus is een <aside>; de globale navigatie-aside
   gaf hem daardoor onbedoeld de breedte van het hoofdmenu. */
#projectCrewWorkspace{
  --pcp-left:300px !important;
  width:100% !important;
  height:calc(100vh - 330px) !important;
  min-height:520px !important;
  display:grid !important;
  grid-template-columns:var(--pcp-left) 6px minmax(0,1fr) !important;
  gap:0 !important;
  overflow:hidden !important;
  align-items:stretch !important;
}
#projectCrewCatalog{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:8px 0 0 8px !important;
  border-right:0 !important;
}
#projectCrewCatalog .pcp-catalog-tree{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:auto !important;
}
#projectCrewSplitter{
  box-sizing:border-box !important;
  width:6px !important;
  min-width:6px !important;
  max-width:6px !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#projectCrewSplitter::before{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  top:0 !important;
  bottom:0 !important;
  width:2px !important;
  background:var(--line) !important;
}
#projectCrewSplitter::after{display:none !important}
#projectCrewPlanned{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:0 8px 8px 0 !important;
  border-left:0 !important;
}
#projectCrewPlanned .pcp-planned-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
}
#projectCrewPlanned .pcp-planned-head-row,
#projectCrewPlanned .pcp-planned-row{
  grid-template-columns:34px minmax(210px,1.7fr) minmax(90px,.65fr) minmax(145px,1fr) minmax(145px,.9fr) minmax(145px,.9fr) 100px !important;
}
@media(min-width:1500px){
  #projectCrewWorkspace{--pcp-left:280px !important}
}


/* Beta 5.75 — rechter crewplannerpaneel echt schermvullend */
#projectCrewWorkspace{
  --pcp-left:250px !important;
  min-height:calc(100vh - 315px) !important;
  height:calc(100vh - 315px) !important;
  grid-template-columns:var(--pcp-left) 6px minmax(0,1fr) !important;
  align-items:stretch !important;
}
#projectCrewCatalog{
  align-self:stretch !important;
  height:auto !important;
  min-height:100% !important;
}
#projectCrewPlanned{
  align-self:stretch !important;
  justify-self:stretch !important;
  height:auto !important;
  min-height:100% !important;
  max-height:none !important;
  box-sizing:border-box !important;
  background:var(--panel) !important;
  border-top:1px solid var(--line) !important;
  border-right:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  display:flex !important;
  flex-direction:column !important;
}
#projectCrewPlanned .pm-planned-head{
  flex:0 0 auto !important;
}
#projectCrewPlanned .pcp-planned-head-row{
  flex:0 0 auto !important;
}
#projectCrewPlanned .pcp-planned-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:auto !important;
  background:transparent !important;
}
#projectCrewPlanned .pcp-empty.large{
  min-height:180px !important;
  display:grid !important;
  place-items:center !important;
}
@media(min-width:1500px){
  #projectCrewWorkspace{--pcp-left:240px !important}
}


/* Beta 5.75 — crew conflict detail popup */
.pcp-name.clickable-conflict-name{cursor:pointer;border-radius:6px;padding:3px 5px;margin:-3px -5px}
.pcp-name.clickable-conflict-name:hover{background:rgba(255,92,87,.10)}
.pcp-name.clickable-conflict-name b{text-decoration:underline;text-decoration-color:rgba(255,92,87,.55);text-underline-offset:3px}
.pcp-conflict-dialog{width:min(680px,calc(100vw - 56px))}
.pcp-conflict-dialog>p{margin-top:4px}
.pcp-conflict-section{margin-top:16px}
.pcp-conflict-section h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.84rem}
.pcp-conflict-section h3 span{min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:rgba(255,92,87,.13);color:#ff7772;font-size:.7rem}
.pcp-conflict-projects{display:grid;gap:7px}
.pcp-conflict-project{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(255,92,87,.27);border-radius:9px;padding:10px 11px;background:rgba(255,92,87,.045)}
.pcp-conflict-project-main{display:flex;align-items:center;gap:9px;min-width:0}
.pcp-conflict-project-main>div{display:grid;gap:3px;min-width:0}
.pcp-conflict-project-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcp-conflict-project-main small{color:var(--muted)}
.pcp-conflict-icon{color:#ff5c57}
.pcp-conflict-unavailable{display:flex;gap:12px;border-top:1px solid var(--line);padding:8px 2px;font-size:.78rem}
.pcp-conflict-unavailable span{color:var(--muted)}
.pcp-conflict-empty{padding:14px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);text-align:center}


/* Beta 5.75 — batch bewerken in crewplanning */
.pcp-planned-head-row input[type="checkbox"]{width:auto;margin:0}
.pcp-bulk-edit{width:min(650px,calc(100vw - 56px))}
.pcp-bulk-selection{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 16px;padding:9px;border:1px solid var(--line);border-radius:8px;background:rgba(127,127,127,.035)}
.pcp-bulk-selection span{padding:4px 7px;border:1px solid var(--line);border-radius:999px;font-size:.72rem}
.pcp-bulk-field{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;align-items:end;margin:9px 0}
.pcp-bulk-enable{display:flex!important;align-items:center;gap:8px;margin:0!important}
.pcp-bulk-enable input{width:auto!important;margin:0!important}
@media(max-width:650px){.pcp-bulk-field{grid-template-columns:1fr}}


/* Beta 5.75 — uitgebreide crewplanning */
.crew-planning-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.pcp-invite-state{font-weight:700}.pcp-invite-state.state-invited{color:#d59a38}.pcp-invite-state.state-accepted{color:#6dbb76}.pcp-invite-state.state-confirmed{color:#65a8ff}.pcp-invite-state.state-declined{color:#ff7772}
.pcp-requirements-dialog,.pcp-tools-dialog,.pcp-meta-dialog{width:min(720px,calc(100vw - 56px))}
.pcp-requirement-list{display:grid;gap:6px;max-height:300px;overflow:auto;margin:12px 0}
.pcp-requirement-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px;border:1px solid var(--line);border-radius:8px}.pcp-requirement-list small{display:block;color:var(--muted);margin-top:2px}
.pcp-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.pcp-tool-grid button,.pcp-template-list button{padding:12px;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--panel-2,rgba(127,127,127,.04));color:inherit}.pcp-tool-grid span,.pcp-template-list span{display:block;color:var(--muted);font-size:.72rem;margin-top:4px}
.pcp-template-list{display:grid;gap:6px}.pcp-check-row{display:flex;gap:22px;margin:10px 0}.pcp-check-row label{display:flex;align-items:center;gap:7px}.pcp-check-row input{width:auto}
@media(max-width:800px){.crew-planning-kpis{grid-template-columns:1fr 1fr}.pcp-tool-grid{grid-template-columns:1fr}}

/* Beta 5.75 — lunch/diner in crewdetails */
.pcp-catering-row{flex-wrap:wrap;gap:24px}


/* Beta 5.75 — crewplanner polish */
.crew-planning-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.pcp-person{grid-template-columns:20px 20px minmax(0,1fr) 14px}
.pcp-availability-dot{width:9px;height:9px;border-radius:50%;justify-self:end}
.pcp-availability-dot.state-available{background:#35c66b}
.pcp-availability-dot.state-conflict{background:#f3a82b}
.pcp-availability-dot.state-unavailable{background:#ff5c57}
.pcp-candidate-filter{padding:0 10px 8px}
.pcp-candidate-filter select{width:100%}
.pcp-small-dialog{width:min(520px,calc(100vw - 56px))}
.pcp-catering-dialog{width:min(650px,calc(100vw - 56px))}
.pcp-catering-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.pcp-catering-block{border:1px solid var(--line);border-radius:9px;padding:11px}
.pcp-catering-block>div{display:flex;justify-content:space-between;align-items:center}
.pcp-catering-block>div span{min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:rgba(127,127,127,.08);font-weight:800}
.pcp-catering-block small{display:block;color:var(--muted);margin-top:6px;line-height:1.4}
@media(max-width:1000px){.crew-planning-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.crew-planning-kpis,.pcp-catering-grid{grid-template-columns:1fr 1fr}}


/* Beta 5.75 — crew invitation response flow */
.my-crew-invites{margin-bottom:14px}
.my-crew-invites.attention{border-color:rgba(255,122,24,.38);box-shadow:inset 3px 0 0 #ff7a18}
.my-plan-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.my-plan-section-head h2{margin:2px 0}
.count-badge{min-width:27px;height:27px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:rgba(255,122,24,.14);color:#ff8b32;font-weight:800}
.my-crew-invite{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-top:1px solid var(--line)}
.my-crew-invite-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.my-crew-invite-main>span,.my-crew-invite-main small{color:var(--muted)}
.my-crew-invite-actions{display:flex;gap:7px;flex:0 0 auto}
.my-crew-history{margin-top:14px}
.my-crew-history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.my-crew-history-row>span:first-child{display:flex;flex-direction:column;gap:3px}
.my-crew-history-row small{color:var(--muted)}
@media(max-width:700px){.my-crew-invite{align-items:flex-start;flex-direction:column}.my-crew-invite-actions{width:100%}.my-crew-invite-actions button{flex:1}}

/* Beta 5.75 — crew response overview */
.crew-planning-kpis{grid-template-columns:repeat(7,minmax(0,1fr))}
.pcp-response-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.pcp-response-group{border:1px solid var(--line);border-radius:9px;padding:10px;min-width:0}
.pcp-response-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.pcp-response-head span{min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:rgba(127,127,127,.09);font-weight:800}
.pcp-response-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.pcp-response-row small{color:var(--muted);white-space:nowrap}
.pcp-response-empty{padding:7px 0}
@media(max-width:1150px){.crew-planning-kpis{grid-template-columns:repeat(4,1fr)}}
@media(max-width:650px){.pcp-response-grid{grid-template-columns:1fr}}

/* Beta 5.75 — final crew workflow */
.pcp-response-progress{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:12px;margin:12px 0 4px;padding:10px;border:1px solid var(--line);border-radius:9px}
.pcp-response-progress>div:first-child{display:flex;align-items:baseline;gap:5px}.pcp-response-progress>div:first-child b{font-size:18px}.pcp-response-progress>div:first-child span{color:var(--muted);font-size:12px}
.pcp-response-bar{height:7px;border-radius:999px;background:rgba(127,127,127,.12);overflow:hidden}.pcp-response-bar i{display:block;height:100%;border-radius:inherit;background:#35c66b}
.pcp-response-progress strong,.pcp-response-tip{font-size:12px}.pcp-response-tip{margin:4px 0 0}

/* Beta 5.75 — project Taken workflow */
.project-task-toolbar-v3{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(4,minmax(135px,.7fr)) auto auto;gap:8px;align-items:center}
.project-task-bulk{display:none;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.project-task-bulk.is-active{display:flex}.project-task-bulk>div:last-child{display:flex;gap:6px;flex-wrap:wrap}
.project-task-list-head-v3,.project-task-row-v3{grid-template-columns:34px minmax(240px,1.6fr) minmax(135px,.7fr) minmax(150px,.8fr) minmax(125px,.6fr) auto}
.project-task-row-v3.selected{box-shadow:inset 3px 0 0 #ff7a18;background:rgba(255,122,24,.035)}
.project-task-check{display:grid;place-items:center}.project-task-check input,.project-task-list-head-v3 input{width:16px;height:16px}
.project-task-title-line{display:flex;align-items:center;gap:8px;min-width:0}.project-task-title-line b{overflow:hidden;text-overflow:ellipsis}
.task-priority{font-style:normal;font-size:10px;font-weight:800;padding:3px 6px;border-radius:999px;white-space:nowrap;background:rgba(127,127,127,.10)}
.task-priority.priority-urgent{background:rgba(220,60,60,.14);color:#e65757}.task-priority.priority-high{background:rgba(255,122,24,.14);color:#ff8b32}
.task-priority.priority-low{opacity:.65}.danger-text{color:#e65757}
.project-task-toolbar-v3 .active{box-shadow:inset 0 0 0 1px #ff7a18;color:#ff8b32}
@media(max-width:1250px){.project-task-toolbar-v3{grid-template-columns:1fr 1fr 1fr}.project-task-list-head-v3,.project-task-row-v3{grid-template-columns:30px minmax(210px,1.4fr) minmax(120px,.7fr) minmax(130px,.8fr) minmax(120px,.6fr) auto}}

/* Beta 5.75 — task workflow */
.task-scope-badge{font-weight:700;color:var(--text)}
.task-workflow-meta{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.task-workflow-dialog{width:min(850px,calc(100vw - 48px));max-height:min(88vh,900px);overflow:auto}
.task-workflow-title{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.task-workflow-title h2{margin-bottom:3px}.task-workflow-title span{color:var(--muted)}
.task-workflow-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.task-workflow-summary span{border:1px solid var(--line);border-radius:8px;padding:9px;color:var(--muted)}.task-workflow-summary b{color:var(--text);font-size:16px}
.task-workflow-section{border-top:1px solid var(--line);padding:15px 0}.task-workflow-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.task-workflow-section-head h3{margin:0}.task-workflow-section-head small{color:var(--muted)}
.task-check-progress{height:6px;border-radius:99px;background:rgba(127,127,127,.12);overflow:hidden;margin-bottom:8px}.task-check-progress i{display:block;height:100%;background:#35c66b}
.task-checklist,.task-dependency-list{display:grid;gap:6px}
.task-check-item,.task-dependency{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 9px}.task-check-item label{display:flex;gap:8px;align-items:center;min-width:0}.task-check-item input{width:auto}.task-check-item.done span{text-decoration:line-through;color:var(--muted)}
.task-dependency>span{display:grid;gap:2px}.task-dependency small{color:var(--muted)}.task-dependency.open{box-shadow:inset 3px 0 #f3a82b}.task-dependency.done{box-shadow:inset 3px 0 #35c66b}
.task-inline-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}
.task-comment-list{display:grid;gap:7px;max-height:260px;overflow:auto}.task-comment{border:1px solid var(--line);border-radius:8px;padding:9px}.task-comment>div{display:flex;justify-content:space-between;gap:12px}.task-comment small{color:var(--muted)}.task-comment p{margin:6px 0 0;white-space:pre-wrap}
.task-comment-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px;align-items:end}.task-comment-add textarea{min-height:70px}
.task-history-panel{border-top:1px solid var(--line);padding-top:12px}.task-history-panel summary{cursor:pointer;font-weight:700}.task-history-list{display:grid;gap:6px;margin-top:9px}.task-history-list>div{border-left:2px solid var(--line);padding:6px 9px}.task-history-list>div>span{display:block}.task-history-list small{color:var(--muted)}.task-history-list p{margin:4px 0 0;color:var(--muted)}
.empty.compact{padding:10px}
@media(max-width:700px){.task-workflow-summary{grid-template-columns:1fr}.task-workflow-title{flex-direction:column}.task-inline-add,.task-comment-add{grid-template-columns:1fr}}


/* Beta 5.75 — projecttaken zonder geplande crew */
.task-no-assignees{display:grid;gap:3px;padding:9px 10px;border:1px dashed var(--line);border-radius:7px;background:rgba(127,127,127,.035)}
.task-no-assignees b{font-size:.78rem}
.task-no-assignees span{font-size:.72rem;color:var(--muted);line-height:1.4}

/* Beta 5.75 — task readiness & dependency flow */
.task-readiness{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 2px;padding:10px 12px;border-radius:8px;border:1px solid var(--line)}
.task-readiness>div{display:grid;gap:2px}.task-readiness span{font-size:12px;color:var(--muted)}
.task-readiness.ready{box-shadow:inset 3px 0 #35c66b;background:rgba(53,198,107,.035)}
.task-readiness.blocked{box-shadow:inset 3px 0 #f3a82b;background:rgba(243,168,43,.04)}
.task-dependent-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:transparent;color:var(--text);cursor:pointer}
.task-dependent-link:hover{background:rgba(127,127,127,.05)}.task-dependent-link>span{display:grid;gap:2px}.task-dependent-link small{color:var(--muted)}.task-dependent-link strong{font-size:11px;white-space:nowrap}
.task-blocked-inline{font-size:10px;color:#f3a82b;letter-spacing:.03em}

/* Beta 5.75 — task templates & recurring task sets */
.project-task-top-actions{display:flex;gap:7px;align-items:center}
.task-template-dialog{width:min(700px,calc(100vw - 48px));max-height:80vh;overflow:auto}
.task-template-list{display:grid;gap:7px;margin:14px 0}
.task-template-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:8px;padding:10px}
.task-template-row>div:first-child{display:grid;gap:3px}.task-template-row small{color:var(--muted)}.task-template-row>div:last-child{display:flex;gap:6px}
.task-template-apply{width:min(480px,calc(100vw - 48px))}.task-template-apply>label{display:grid;gap:5px;margin:10px 0;font-weight:700}.task-template-apply>label input,.task-template-apply>label select{font-weight:400}

/* Beta 5.75 — materiaalworkflow */
.pm-workflow-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.pm-workflow-kpis button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(127,127,127,.025);color:inherit;cursor:pointer}
.pm-workflow-kpis button:hover{background:rgba(127,127,127,.06)}.pm-workflow-kpis span{font-size:11px;color:var(--muted)}.pm-workflow-kpis b{font-size:15px}
.pm-workflow-kpis .attention{border-color:rgba(243,168,43,.35);background:rgba(243,168,43,.045)}.pm-workflow-kpis .attention b{color:#f3a82b}
.pm-status-filter{min-width:155px}
.pm-batch-edit-modal{width:min(650px,calc(100vw - 48px))}
.pm-batch-edit-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.pm-batch-edit-row>.checkline{margin:0}.pm-batch-control{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pm-planned-header input[type="checkbox"]{width:15px;height:15px;margin:0}
@media(max-width:1000px){.pm-workflow-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.pm-workflow-kpis{grid-template-columns:1fr 1fr}.pm-batch-edit-row{grid-template-columns:1fr}}


/* Beta 5.75 — Projecttotaal materiaal */
.pm-project-total-summary{
  display:grid;
  grid-template-columns:minmax(270px,1.7fr) minmax(120px,.65fr) minmax(120px,.65fr) minmax(120px,.65fr) minmax(170px,.8fr);
  align-items:center;
  gap:0;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(127,127,127,.022);
}
.pm-project-total-title{
  display:grid;
  gap:2px;
  justify-self:start;
  text-align:left;
}
.pm-project-total-title b{font-size:.82rem}
.pm-project-total-title small{color:var(--muted);font-size:.70rem}
.pm-project-total-value{
  display:grid;
  gap:3px;
  align-content:center;
  justify-items:start;
  min-width:0;
}
.pm-project-total-value span{
  color:var(--muted);
  font-size:.66rem;
  font-weight:700;
  white-space:nowrap;
}
.pm-project-total-value b{
  font-size:.82rem;
  white-space:nowrap;
}
.pm-project-total-editable{cursor:pointer;border-radius:6px;padding:4px 6px;margin:-4px -6px}
.pm-project-total-editable:hover{background:rgba(127,127,127,.06)}
@media(max-width:1050px){
  .pm-project-total-summary{grid-template-columns:1fr 1fr 1fr}
  .pm-project-total-title{grid-column:1/-1;margin-bottom:4px}
}


/* =========================================================
   SHOWARROW Beta 5.75 — inklapbaar hoofdmenu
   ========================================================= */
.app-main-sidebar{
  width:255px;
  transition:width .18s ease,padding .18s ease;
}
.app-main-sidebar .sidebar-brand{
  position:relative;
  min-height:38px;
  transition:gap .18s ease,margin .18s ease;
}
.app-main-sidebar .sidebar-brand-text{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  transition:opacity .12s ease,width .18s ease;
}
.sidebar-toggle{
  margin-left:auto;
  width:30px!important;
  min-width:30px!important;
  height:30px;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:1px solid #2e3947!important;
  border-radius:7px!important;
  background:#171d25!important;
  color:#c7d0da!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer;
  flex:0 0 30px;
}
.sidebar-toggle:hover{
  color:#fff!important;
  border-color:#465364!important;
  background:#202731!important;
}

/* Dichtgeklapt blijft een smalle rail met logo + uitklapknop zichtbaar. */
body.sidebar-collapsed .app-main-sidebar{
  width:84px!important;
  padding-left:8px!important;
  padding-right:8px!important;
  overflow:hidden!important;
}
body.sidebar-collapsed .app-main-sidebar .sidebar-brand{
  gap:5px!important;
  margin-bottom:14px!important;
  justify-content:center;
}
body.sidebar-collapsed .app-main-sidebar .sidebar-brand-text{
  display:none!important;
}
body.sidebar-collapsed .app-main-sidebar .showarrow-mark{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
}
body.sidebar-collapsed .app-main-sidebar .showarrow-mark img{
  width:31px!important;
  height:31px!important;
}
body.sidebar-collapsed .app-main-sidebar .sidebar-toggle{
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
  font-size:19px!important;
}
body.sidebar-collapsed .app-main-sidebar #mainNav,
body.sidebar-collapsed .app-main-sidebar .userbox,
body.sidebar-collapsed .app-main-sidebar form{
  display:none!important;
}

/* De vrijgekomen ruimte gaat direct naar de applicatie. */
body.sidebar-collapsed .layout>main{
  max-width:none;
}
@media(max-width:800px){
  .app-main-sidebar{transition:none}
  body.sidebar-collapsed .app-main-sidebar{width:72px!important}
}

/* Beta 5.75 — uitgebreide materiaalworkflow */
.pm-workflow-cell{display:grid;gap:3px;cursor:pointer}.pm-warehouse-badge{font-size:10px;font-weight:800;padding:4px 6px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}.pm-warehouse-badge.checked{border-color:rgba(53,198,107,.45)}.pm-warehouse-badge.out,.pm-warehouse-badge.on_site{border-color:rgba(67,143,255,.45)}.pm-warning{color:#f3a82b;font-size:9px;max-width:145px;white-space:normal}.pm-workflow-modal{width:min(900px,calc(100vw - 40px));max-height:86vh;overflow:auto}.pm-workflow-modal section{border-top:1px solid var(--line);padding:13px 0}.pm-workflow-tabs{display:flex;gap:12px;align-items:center;color:var(--muted)}.pm-status-flow{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.pm-status-flow button{padding:8px 5px;border:1px solid var(--line);border-radius:7px;background:transparent;color:inherit;font-size:10px}.pm-status-flow button.active{border-color:#4c91ff;background:rgba(76,145,255,.08)}.pm-shortage{border:1px solid rgba(243,168,43,.3)!important;border-radius:9px;padding:12px!important;background:rgba(243,168,43,.035)}.pm-shortage-actions{display:flex;gap:6px;flex-wrap:wrap}.pm-shortage-actions button{border:1px solid var(--line);border-radius:7px;background:transparent;color:inherit;padding:7px 9px;cursor:pointer}.pm-rel-list{display:grid;gap:6px}.pm-rel-list>button,.pm-rel-list>div{display:flex;justify-content:space-between;align-items:center;text-align:left;border:1px solid var(--line);border-radius:7px;padding:8px;background:transparent;color:inherit}.pm-rel-list small{color:var(--muted)}.pm-chip-list{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}.pm-chip-list>span{border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:11px}.pm-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pm-metrics span{display:grid;gap:3px;border:1px solid var(--line);border-radius:7px;padding:8px;color:var(--muted);font-size:10px}.pm-metrics b{color:var(--text);font-size:13px}.pm-audit-line{display:grid;gap:2px;padding:7px 0;border-bottom:1px solid var(--line);font-size:11px}.pm-audit-line small{color:var(--muted)}.pm-relations-modal,.pm-scan-modal,.pm-template-modal{width:min(650px,calc(100vw - 40px));max-height:80vh;overflow:auto}.pm-relations-modal label,.pm-scan-modal label{display:grid;gap:4px;margin:8px 0}.pm-scan-log{display:grid;gap:4px;max-height:260px;overflow:auto;margin:10px 0}.pm-scan-log>div{padding:7px;border-bottom:1px solid var(--line)}.pm-template-row{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;padding:10px;margin:6px 0;text-align:left}.pm-project-total-value small{font-size:9px;color:var(--muted)}
@media(max-width:1000px){.pm-status-flow{grid-template-columns:repeat(4,1fr)}.pm-metrics{grid-template-columns:1fr 1fr}}


/* Beta 5.75 — projectmateriaal workflow zichtbaar in planner */
.pm-workflow-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.pm-material-name-cell{display:grid;align-content:center;gap:2px;min-width:0}
.pm-relation-summary{font-size:10px!important;color:var(--muted)!important}
.pm-inline-shortage{color:#f3a82b;font-size:10px}
.pm-row-shortage{background:rgba(243,168,43,.025)}
.pm-row-shortage:hover{background:rgba(243,168,43,.055)}
.pm-workflow-cell{display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:center;gap:4px;min-width:130px}
.pm-inline-warehouse{width:100%;min-width:118px;margin:0!important;padding:5px 7px!important;font-size:10px!important;font-weight:700}
.pm-workflow-open{border:1px solid var(--line);background:rgba(127,127,127,.035);color:inherit;border-radius:6px;padding:4px 7px;font-size:10px;font-weight:750;cursor:pointer}
.pm-workflow-open:hover{background:rgba(255,106,0,.08);border-color:rgba(255,106,0,.35)}
.pm-warning{display:block;font-size:9px!important;line-height:1.25;color:#f3a82b!important}
.pm-shortage-center{width:min(900px,calc(100vw - 48px));max-height:82vh;overflow:auto}
.pm-shortage-center-list{display:grid;gap:7px;margin:13px 0}
.pm-shortage-center-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px;border:1px solid var(--line);border-radius:8px}
.pm-shortage-center-row>div:first-child{display:grid;gap:3px}.pm-shortage-center-row small{color:var(--muted)}
.pm-shortage-center-row>div:last-child{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pm-warning-center-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.pm-warning-center-row:hover{background:rgba(127,127,127,.045)}
.pm-warning-center-row>span{display:grid;gap:3px}.pm-warning-center-row small{color:#f3a82b}.pm-warning-center-row strong{font-size:10px;white-space:nowrap}
@media(max-width:1150px){.pm-workflow-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pm-shortage-center-row{align-items:flex-start;flex-direction:column}.pm-shortage-center-row>div:last-child{justify-content:flex-start}}


/* Beta 5.75 — slimme materiaalalternatieven */
.pm-smart-alt-modal{width:min(980px,calc(100vw - 44px));max-height:86vh;overflow:auto}
.pm-smart-info{display:flex;gap:12px;align-items:center;margin:12px 0;padding:10px 12px;border:1px solid rgba(255,106,0,.24);background:rgba(255,106,0,.055);border-radius:9px}
.pm-smart-info b{white-space:nowrap}.pm-smart-info span{font-size:11px;color:var(--muted)}
.pm-smart-tabs{display:flex;gap:6px;margin:12px 0 8px}
.pm-smart-tabs button{border:1px solid var(--line);background:transparent;color:inherit;border-radius:7px;padding:7px 10px;cursor:pointer;font-weight:700}
.pm-smart-tabs button.active{border-color:rgba(255,106,0,.55);background:rgba(255,106,0,.09)}
.pm-smart-tabs button b{margin-left:5px}
.pm-smart-panel{display:grid;gap:7px}
.pm-smart-alt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:rgba(127,127,127,.018)}
.pm-smart-alt-row.composition{border-style:dashed}
.pm-smart-alt-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pm-smart-alt-main>div{display:grid;gap:3px;min-width:0}.pm-smart-alt-main small{color:var(--muted);font-size:10px}
.pm-smart-score{min-width:43px;text-align:center;padding:5px 6px;border-radius:999px;background:rgba(255,106,0,.10);color:#ff7a1a;font-size:10px;font-weight:800}
.pm-smart-alt-side{display:grid;justify-items:end;gap:6px;white-space:nowrap}.pm-smart-alt-side small{color:var(--muted);font-size:10px}
.pm-smart-composition{color:#ff9b55!important}
.pm-smart-empty{display:grid;gap:4px;padding:18px;border:1px dashed var(--line);border-radius:9px;text-align:center}.pm-smart-empty span{color:var(--muted);font-size:11px}
.pm-smart-agent-note{display:flex;gap:10px;margin-top:13px;padding:10px;border:1px solid var(--line);border-radius:9px;background:rgba(127,127,127,.025)}
.pm-smart-agent-note>span{font-size:18px;color:#ff7a1a}.pm-smart-agent-note>div{display:grid;gap:2px}.pm-smart-agent-note small{color:var(--muted);font-size:10px;line-height:1.35}
@media(max-width:760px){.pm-smart-alt-row{align-items:flex-start;flex-direction:column}.pm-smart-alt-side{justify-items:start}.pm-smart-info{align-items:flex-start;flex-direction:column}}