: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:9px!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:10px!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:9px!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:8px!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:9px!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:8px!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
.project-inline-field b,
.project-contact-primary b{
  font-size:10px!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:8px!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}
.project-inline-description b{font-size:10px!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:10px!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:10px!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:10px!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:10px!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:8px!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:9px!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:10px!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.30 — 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.30 — 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.30 — 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.30 — 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.30 — 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.30 — 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.30 — 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)}