:root{--navy:#123a5b;--blue:#1f77b4;--green:#2f9b68;--red:#d84b5f;--yellow:#f4bd38;--orange:#f28c28;--grey:#7a828c;--bg:#f3f6fa;--card:#fff;--text:#17212b;--muted:#667085;--border:#d8e1ea;--purple:#7048c4;--teal:#0f7985}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{border:0;border-radius:8px;padding:10px 14px;background:#e8eef5;color:#17212b;cursor:pointer;font-weight:700}button:hover{filter:brightness(.97)}.primary{background:var(--navy);color:#fff}.secondary{background:#edf2f7;color:#2a3340}.warning{background:var(--yellow);color:#342600}.warning2{background:var(--orange);color:#fff}.danger{background:var(--red);color:#fff}.hidden{display:none!important}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#102a43,#1f77b4)}.login-card{width:min(720px,94vw);background:#fff;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.25);padding:34px}.brand-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}.brand-mark{width:70px;height:70px;border-radius:18px;background:#ff5a1f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:28px;letter-spacing:-2px}.brand-mark.small{width:42px;height:42px;border-radius:12px;font-size:16px}.login-card h1{margin:0;color:var(--navy);font-size:42px}.login-card p{margin:4px 0;color:var(--muted)}.demo-users{margin-top:18px;padding:14px;border-radius:12px;background:#f4f7fb;color:#4f5d6b;line-height:1.5}.msg{font-weight:700;color:var(--red)}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#fff;padding:22px;display:flex;flex-direction:column;gap:20px}.sidebar-brand{display:flex;align-items:center;gap:12px}.sidebar-brand b{font-size:20px;display:block}.sidebar-brand span{display:block;font-size:12px;opacity:.75}nav{display:flex;flex-direction:column;gap:8px}.nav{width:100%;text-align:left;background:transparent;color:#dce8f2;border:1px solid rgba(255,255,255,.08)}.nav.active,.nav:hover{background:#fff;color:var(--navy)}.logout{margin-top:auto;background:#0c263e;color:#fff}.main{min-width:0}.topbar{height:86px;background:#fff;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 28px;position:sticky;top:0;z-index:10}.topbar h2{margin:0;color:var(--navy)}.topbar span{color:var(--muted)}.user-pill{background:#e8f1fa;color:var(--navy);padding:10px 14px;border-radius:999px;font-weight:700}.page{display:none;padding:24px}.page.active{display:block}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(17,42,67,.06);padding:18px;margin-bottom:18px;overflow:hidden}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.card h3{margin:0;color:var(--navy)}.tag{background:#edf6ff;color:#165a8c;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}label{font-weight:700;color:#364152;display:flex;flex-direction:column;gap:6px}input,select,textarea{border:1px solid var(--border);border-radius:9px;padding:10px;background:#fff;color:#1b2430}textarea{min-height:86px}.check{flex-direction:row;align-items:center;gap:8px}.check input{width:auto}.align-end{align-self:end}.inline-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.action-row input{min-width:280px}.mixed-builder{margin:16px 0;padding:14px;border:1px dashed #bac7d6;border-radius:12px;background:#f8fafc}.mixed-builder p,.hint{color:var(--muted);font-size:13px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.chip{background:#e8f1fa;color:var(--navy);border:1px solid #c5d8ea;border-radius:999px;padding:6px 10px;font-weight:700}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 8px 28px rgba(17,42,67,.06)}.kpi b{font-size:32px;color:var(--navy);display:block}.kpi span{color:var(--muted);font-weight:700}.table-wrap{width:100%;overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}.table-wrap th{background:var(--navy);color:#fff;text-align:left;padding:9px;white-space:nowrap}.table-wrap td{border-bottom:1px solid #e7edf3;padding:8px;vertical-align:top}.compact table{font-size:12px}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eaf0f6;color:#263343;font-weight:800;font-size:11px;white-space:nowrap}.badge.red{background:#ffe8ec;color:#a42136}.badge.green{background:#e3f8ed;color:#18623f}.badge.orange{background:#fff2e2;color:#a65200}.badge.blue{background:#e5f1ff;color:#145a9d}.badge.yellow{background:#fff8dc;color:#785c00}.badge.grey{background:#eceff3;color:#4f5761}.notification{border:1px solid var(--border);border-left:5px solid var(--blue);border-radius:12px;padding:10px;margin-bottom:10px;background:#fbfdff}.notification.CRITICAL{border-left-color:var(--red)}.notification.WARNING{border-left-color:var(--orange)}.notification b{display:block}.notification small{color:var(--muted)}.tv-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.tv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.factory-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(17,42,67,.06)}.factory-title{padding:13px 16px;color:#fff;font-weight:900}.factory-title.A01{background:var(--red)}.factory-title.A02{background:var(--green)}.factory-title.A03{background:var(--blue)}.factory-body{padding:14px}.slot-section{margin-bottom:18px}.slot-section h4{margin:0 0 8px;color:#2d3748}.slot-grid{display:flex;flex-wrap:wrap;gap:6px}.slot{width:28px;height:24px;border-radius:5px;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800}.slot.available,.sq.available{background:var(--green)}.slot.occupied,.sq.occupied{background:var(--red)}.slot.assigned,.sq.assigned{background:var(--yellow);color:#4b3700}.slot.quality,.sq.quality{background:var(--orange)}.slot.progress,.sq.progress{background:var(--blue)}.slot.blocked,.sq.blocked{background:var(--grey)}.slot.complete,.sq.complete{background:#fff;border:1px solid #b5c1cd;color:#2d3748}.legend{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.sq{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:4px}code{white-space:pre-wrap}.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.factory-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.factory-summary-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(17,42,67,.06)}.factory-summary-head{padding:12px 16px;color:#fff;font-size:22px;font-weight:900}.factory-summary-head.A01,.parking-map-head.A01{background:var(--red)}.factory-summary-head.A02,.parking-map-head.A02{background:var(--green)}.factory-summary-head.A03,.parking-map-head.A03{background:var(--blue)}.factory-metric{padding:14px 16px;border-bottom:1px solid #edf2f7}.factory-metric:last-child{border-bottom:0}.metric-title{font-weight:900;color:#2d3748;margin-bottom:8px}.metric-total{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:6px 10px;margin-right:8px;font-weight:900}.metric-available{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:6px 10px;font-weight:900}.dashboard-parking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.parking-map-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(17,42,67,.06)}.parking-map-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;color:#fff}.parking-map-head span{font-size:12px;font-weight:800;opacity:.96}.parking-dashboard-slots{padding:14px}.mixed-builder.disabled{opacity:.58;background:#f2f5f8;border-style:solid}.mixed-builder.disabled select,.mixed-builder.disabled button{cursor:not-allowed}.parking-assigned-box{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#f8fafc}.parking-assigned-box h4{margin:8px 0 10px;color:var(--navy)}.last-assignment{background:#e8f7ef;border:1px solid #bce4cd;color:#155a3a;border-radius:10px;padding:9px 10px;margin-bottom:10px;font-weight:700}
@media(max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:static}.two-col,.tv-grid,.kpi-grid,.factory-status-grid,.dashboard-parking-grid,.form-grid.three,.form-grid.four{grid-template-columns:1fr}.topbar{height:auto;padding:16px}.page{padding:14px}}

.edit-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 700;
}
button.small {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

/* Global disabled-state styling added after 16-May testing feedback.
   Any button or form control disabled by workflow logic must look visibly inactive. */
button:disabled,
button[disabled] {
  background: #d1d5db !important;
  color: #6b7280 !important;
  border: 1px solid #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.12) !important;
  filter: grayscale(0.35) !important;
  transform: none !important;
  pointer-events: none;
}
button:disabled:hover,
button[disabled]:hover {
  filter: grayscale(0.35) !important;
  brightness: 1 !important;
}
select:disabled,
input:disabled,
textarea:disabled {
  background: #eef1f4 !important;
  color: #777f8a !important;
  border-color: #c7cdd5 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}
button:disabled::after,
button[disabled]::after {
  content: "";
}