/* public_html/V2/css/dashboard.css */

:root{
  --bg:#eef2f7;
  --card: rgba(255,255,255,.92);
  --cardSolid:#fff;
  --text:#1f2937;
  --muted:#6b7280;

  --primary:#2896e5;
  --primaryDark:#1b6fb0;

  --border: rgba(15,23,42,.10);
  --shadow: 0 18px 45px rgba(2,6,23,.12);
  --shadowSoft: 0 10px 22px rgba(2,6,23,.10);

  --radius: 18px;
  --radiusSm: 14px;
  --focus: 0 0 0 4px rgba(40,150,229,.22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); }

body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(40,150,229,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(40,150,229,.10), transparent 55%),
    radial-gradient(800px 500px at 40% 100%, rgba(15,23,42,.06), transparent 60%),
    var(--bg);
}

/* Page container */
.shell{
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px;
}

/* Top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.60);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}

.brandIcon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 12px 24px rgba(2,6,23,.16),
    0 0 0 5px rgba(40,150,229,.14);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.brandIcon img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding: 10px;
}

.brandText h1{
  margin:0;
  font-size: 18px;
  letter-spacing: .5px;
}
.brandText p{
  margin:3px 0 0 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.userbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.pill{
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  white-space: nowrap;
}

.pill.primary{
  border-color: rgba(40,150,229,.25);
  background: rgba(40,150,229,.10);
}

.select{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.95);
  font-size: 13px;
  font-weight: 700;
  outline:none;
  min-width: 210px;
}
.select:focus{ border-color: rgba(40,150,229,.70); box-shadow: var(--focus); }

.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,245,255,.92));
  color:#0f172a;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 13px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  user-select:none;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{ filter: brightness(1.02); box-shadow: 0 12px 22px rgba(2,6,23,.14); }
.btn:active{ transform: translateY(1px); box-shadow: 0 8px 14px rgba(2,6,23,.12); }

.btn.primary{
  background: linear-gradient(180deg, rgba(40,150,229,.25), rgba(40,150,229,.12));
  border-color: rgba(40,150,229,.28);
}

.btn.ghost{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
  box-shadow:none;
}

/* Grid layout for modules */
.grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}

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

/* Cards */
.card{
  border-radius: var(--radius);
  background: var(--cardSolid);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}

.cardHeader{
  padding: 14px 16px;
  background: rgba(40,150,229,.06);
  border-bottom: 1px solid rgba(40,150,229,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.cardHeader h2{
  margin:0;
  font-size: 14px;
  letter-spacing: .2px;
}

.cardHeader .hint{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.cardBody{
  padding: 14px 16px 16px;
}

/* Form elements inside cards */
.fieldRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:flex-end;
}

.field{
  flex: 1 1 220px;
}

.label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
  margin-bottom: 6px;
}

.input{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.95);
  font-size: 13px;
  outline:none;
}
.input:focus{ border-color: rgba(40,150,229,.70); box-shadow: var(--focus); }

.kpiRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 680px){
  .kpiRow{ grid-template-columns: 1fr; }
}

.kpi{
  background: rgba(40,150,229,.06);
  border: 1px solid rgba(40,150,229,.18);
  border-radius: 16px;
  padding: 12px 12px;
}
.kpi .kLabel{ font-size: 11px; color: var(--muted); font-weight: 800; }
.kpi .kVal{ margin-top: 4px; font-size: 18px; font-weight: 1000; color: #111; }

/* Table placeholder style */
.table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow:hidden;
}

.table th, .table td{
  padding: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align:left;
}

.table th{
  background: rgba(0,0,0,.04);
  font-weight: 1000;
}

.muted{ color: var(--muted); font-weight: 700; }
.divider{ height:1px; background: rgba(0,0,0,.08); margin: 14px 0; }

/* quick action tiles */
.tiles{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 520px){
  .tiles{ grid-template-columns: 1fr; }
}

.tile{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.92));
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
  padding: 12px;
}

.tile h3{ margin: 0 0 6px 0; font-size: 13px; }
.tile p{ margin:0; font-size: 12px; color: var(--muted); font-weight: 700; }
.tile .tileBtn{ margin-top: 10px; width: 100%; }




/* =========================================================
   Past Received table: fixed columns + Damage column + Total align
   ========================================================= */

/* Past Received: show DAMAGE inside WPO cell without adding a column */
.table.pastTable{
  table-layout: fixed;
  width: 100%;
}

/* 5-column layout (fits without horizontal scroll) */
.table.pastTable th:nth-child(1),
.table.pastTable td:nth-child(1){ width: 170px; } /* Date */

.table.pastTable th:nth-child(2),
.table.pastTable td:nth-child(2){ width: 170px; } /* Type */

.table.pastTable th:nth-child(3),
.table.pastTable td:nth-child(3){ width: 160px; } /* BOL */

.table.pastTable th:nth-child(4),
.table.pastTable td:nth-child(4){ width: 100px; } /* WPO (+ damage inside) */

.table.pastTable th:nth-child(5),
.table.pastTable td:nth-child(5){ width: 140px; } /* Total */

.table.pastTable th,
.table.pastTable td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Total aligned right like a dashboard */
.table.pastTable th:nth-child(5),
.table.pastTable td:nth-child(5){
  text-align: right;
}

/* WPO cell holds text + badge */
.pastWpoCell{
  display: flex;
  align-items: center;
  justify-content: space-between; /* text left, badge right */
  gap: 10px;
}

.pastWpoText{
  min-width: 0;                 /* allows ellipsis inside flex */ 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Damage pill (same vibe as modal) */
.pastDamageBadge{
  flex: 0 0 auto;
  display: inline-block;
  font-size: 12px;
  font-weight: 1100;
  letter-spacing: .6px;
  color: rgba(127, 29, 29, 0.95);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239, 68, 68, 0.10);
}


/* ✅ DROP-IN: hover ONLY for rows that open the modal (not expand/collapse group rows) */
.pastTable tbody tr.pastRowClickable:hover > td {
  background: rgba(56, 189, 248, 0.14);
}

/* ✅ DROP-IN: hover for Incoming rows */
#incomingTbody tr:hover > td {
  background: rgba(56, 189, 248, 0.14);
}

/* Smoothness */
.pastTable tbody td,
#incomingTbody td {
  transition: background-color 120ms ease-in-out;
}

















/* ---------- NEW: Header icons for sections ---------- */
.headerLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.sectionIcon{
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(2,6,23,.10));
}

.headerLeft h2{
  margin:0;
}

/* ---------- NEW: clickable icon tiles (Dashboard 2 style) ---------- */
.tiles-click{
  gap: 14px; /* a little more breathing room */
}

.tileLink{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 15px 35px rgba(0,0,0,.08);

  padding: 26px 18px;
  cursor:pointer;
  text-decoration:none;
  color: inherit;

  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

.tileLink:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0,0,0,.14);
  filter: brightness(1.01);
}

.tileLink:active{
  transform: translateY(-1px);
}

.tileLink:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(40,150,229,.22), 0 20px 45px rgba(0,0,0,.14);
}

/* reuse your icon sizing, but match the “big card” look */
.tileLink .tileIcon{
  width: 120px;
  height:auto;
  margin: 0 0 14px 0;
  display:block;
  object-fit: contain;
}

.tileLink h3{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #1e2a38;
}



/* Bigger section icons for Daily + CrossRef headers */
.sectionIconLg{
  width: 44px;
  height: 44px;
}

/* Daily Actions projected row spacing */
.kpiRowProjected{
  margin-bottom: 2px;
}

/* Make KPI boxes behave like clickable tiles (same hover feel) */
.kpiClickable{
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

.kpiClickable:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  filter: brightness(1.01);
}

.kpiClickable:active{
  transform: translateY(-1px);
}

.kpiClickable:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(40,150,229,.22), 0 16px 34px rgba(0,0,0,.12);
}






/* ---------- Daily | Weekly toggle in Daily Actions header ---------- */
.rangeToggle{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.rangeTab{
  appearance:none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
  user-select:none;

  /* match your “card hover” feel */
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

.rangeTab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  filter: brightness(1.01);
}

.rangeTab:active{
  transform: translateY(-1px);
}

.rangeTab:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(40,150,229,.22), 0 14px 30px rgba(0,0,0,.10);
}

.rangeTab.isActive{
  color: #111;
  background: rgba(40,150,229,.12);
  border-color: rgba(40,150,229,.28);
}

.rangePipe{
  font-weight: 1000;
  color: rgba(107,114,128,.65); /* muted pipe */
}







/* ---------- Operations expand mode ---------- */
.opsHeaderRight{
  display:flex;
  align-items:center;
  gap: 10px;
}


/* =========================================================
   Receiving header nav (tabs beside icon/title)
   ========================================================= */
.opsHeaderNav{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: 14px;     /* space after “Receiving” */
}

.opsHeaderNav[hidden]{
  display:none !important;
}

/* reuse your opsTab look but slightly tighter for the header */
.opsHeaderNav .opsTab{
  padding: 7px 12px;
}


/* =========================================================
   Receiving grids: make Filters 30% and Output 70%
   ========================================================= */

/* 30 / 70 split (applies to Incoming + Past Received wrapper) */
.opsGrid2.opsGrid3070{
  display: grid;
  grid-template-columns: minmax(280px, 30%) 1fr; /* left ~30%, right ~70% */
  gap: 14px; /* match your existing spacing */
  align-items: stretch;
}

/* Make cards and their bodies able to stretch + allow inner scroll areas */
.opsGrid2.opsGrid3070 .opsCard{
  height: 100%;
}

/* Critical: allow children to shrink so scroll containers can work */
.opsGrid2.opsGrid3070 .opsCardBody{
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Output wrapper should take remaining height */
.opsTableWrap{
  flex: 1;
  min-height: 0;
}

/* Let the table scroll area fill instead of being capped at 380px */
.tableScroll.opsTableFill{
  max-height: none !important;
  height: 100%;
  overflow: auto;
}








/* =========================================================
   Production -> Order List
   Mirrors Receiving layout while keeping production-specific
   content blocks professional and uniform.
   ========================================================= */

.prodOrderLeftCol{
  display:grid;
  gap:14px;
  align-content:start;
}

.prodLineChipsRow{
  margin-bottom: 12px;
}

.prodLineChipCount{
  margin-left: 6px;
  opacity: .82;
  font-weight: 1000;
}

.prodRunningItem{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(40,150,229,.04);
  padding: 12px;
}

.prodRunningItem + .prodRunningItem{
  margin-top: 10px;
}

.prodRunningItem{
  cursor:pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.prodRunningItem:hover{
  background: rgba(40,150,229,.08);
}

.prodRunningItem.isRunning{
  background: rgba(34,197,94,.10);
}

.prodRunningItem.isSetup{
  background: rgba(250,204,21,.16);
}

.prodRunningItem.isReady{
  background: rgba(168,85,247,.12);
}



.prodRunningTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
  flex-wrap:wrap;
}

.prodRunningLine{
  font-size: 13px;
  font-weight: 1000;
  color:#1f2937;
}

.prodRunningProgress{
  font-size: 12px;
  font-weight: 900;
  color: #475569;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.20);
}

.prodRunningMeta{
  display:grid;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color:#475569;
}


.prodOrdersHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.prodOrdersHeadActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}



.prodTitleCount{
  font-weight: 1000;
  color:#64748b;
}

.prodOrderRow{
  cursor:pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.prodOrderRow:hover td{
  background: rgba(40,150,229,.10);
}

.prodOrderRow.isRunning td{
  background: rgba(34,197,94,.12);
}

.prodOrderRow.isRunning:hover td{
  background: rgba(34,197,94,.18);
}


.prodOrderRow.isSetup td{
  background: rgba(250,204,21,.18);
}

.prodOrderRow.isSetup:hover td{
  background: rgba(250,204,21,.26);
}

.prodOrderRow.isReady td{
  background: rgba(168,85,247,.14);
}

.prodOrderRow.isReady:hover td{
  background: rgba(168,85,247,.22);
}




.prodDetailWrap{
  display:grid;
  gap:16px;
}

.prodDetailTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.prodDetailHero{
  flex:1 1 420px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  background: rgba(40,150,229,.04);
}

.prodDetailHeroTitle{
  font-size:18px;
  font-weight:1000;
  color:#334155;
  margin-bottom:8px;
}

.prodDetailHeroSub{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:#475569;
  font-size:13px;
  font-weight:800;
}

.prodDetailActions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}


.prodDetailActionsStack{
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
}



.prodDetailGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:12px;
}

.prodDetailField{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}

.prodDetailLabel{
  font-size:12px;
  font-weight:1000;
  color:#64748b;
  margin-bottom:6px;
}

.prodDetailValue{
  font-size:14px;
  font-weight:800;
  color:#334155;
  word-break:break-word;
}


.prodDetailHero.isRunning{
  background: rgba(34,197,94,.10);
}

.prodDetailHero.isSetup{
  background: rgba(250,204,21,.16);
}

.prodDetailHero.isReady{
  background: rgba(168,85,247,.12);
}


@media (max-width: 900px){
  .prodDetailGrid{
    grid-template-columns: 1fr;
  }
}






/* =========================================================
   Production Filters spacing fix
   Makes the filter card stack like Incoming Filters
   ========================================================= */

.prodOrderLeftCol .field{
  flex: none;                /* override global flex rule */
  margin-bottom: 10px;       /* clean vertical spacing */
}

.prodOrderLeftCol .label{
  margin-bottom: 4px;
}

.prodOrderLeftCol .input,
.prodOrderLeftCol .select{
  width: 100%;
}

.prodOrderLeftCol .segmented{
  margin-bottom: 6px;
}


.prodOrderLeftCol .field + .field{
  margin-top: 2px;
}








/* expanded card overlay */
body.opsExpanded #operationsCard{
  position: fixed;
  z-index: 9999;
  /* JS will set top/left/width/height inline so it fits your shell perfectly */
  box-shadow: 0 26px 70px rgba(2,6,23,.22);
}

/* hide the other 3 areas while ops is expanded */
body.opsExpanded #dailyActionsCard,
body.opsExpanded #crossRefCard{
  visibility: hidden;
}


/* swap tiles -> panel when expanded */
body.opsExpanded #operationsCard .tiles{
  display:none;
}
body.opsExpanded #opsPanel{
  display:block;
}

/* make the expanded panel feel like a workspace */
.opsPanel{
  padding: 14px 16px 16px;
}
body.opsExpanded #operationsCard .cardBody{
  padding: 0; /* panel has its own padding */
}









/* ---------- Daily Actions expand mode ---------- */
body.daExpanded #dailyActionsCard{
  position: fixed;
  z-index: 9999;
  box-shadow: 0 26px 70px rgba(2,6,23,.22);
}

/* hide the other 3 areas while Daily Actions is expanded */
body.daExpanded #operationsCard,
body.daExpanded #crossRefCard{
  visibility: hidden;
}


/* swap KPI grid -> panel when expanded */
body.daExpanded #dailyActionsCard .kpiRow,
body.daExpanded #dailyActionsCard .divider{
  display:none;
}
body.daExpanded #daPanel{
  display:block;
}

/* workspace panel */
.daPanel{
  padding: 14px 16px 16px;
}
body.daExpanded #dailyActionsCard .cardBody{
  padding: 0; /* panel has its own padding */
}














/* ---------- Cross Ref: mode + guided dropdowns ---------- */

.xrefModeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.segmented{
  display:flex;
  align-items:center;
  gap: 8px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  padding: 6px;
  border-radius: 999px;
}

.segBtn{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.segBtn:hover{ transform: translateY(-1px); }

.segBtn.isActive{
  background: rgba(40,150,229,.14);
  border-color: rgba(40,150,229,.25);
  color: #111;
}

/* scroll container for results */
.tableScroll{
  max-height: 260px;          /* adjust to taste */
  overflow: auto;
  border-radius: 12px;
}

/* sticky header inside scroll area */
.tableScroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* footer row */
.xrefFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.xrefPager{
  display:flex;
  gap: 8px;
}













/* =========================================================
   Cross Ref – Guided Component Detail (Mock UI)
   ========================================================= */

.xrefDetail{
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: var(--cardSolid);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadowSoft);
  padding: 18px;
}

.xrefHeader{
  text-align: center;
  margin-bottom: 14px;
}

.xrefHeader h3{
  margin: 0;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .4px;
}

.xrefHeader .sub{
  font-size: 13px;
  font-weight: 800;
  color: var(--primaryDark);
}

.xrefHeader .size{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.xrefFacilities{
  display:flex;
  justify-content:center;
  gap: 26px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.facItem{
  font-size: 13px;
  font-weight: 900;
}

.facItem span{
  font-weight: 1000;
  margin-left: 6px;
}

.xrefPalletGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.palletCard{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg,#fff,#f4f7fb);
  box-shadow: 0 12px 26px rgba(2,6,23,.12);
  padding: 14px;
  display:flex;
  gap: 14px;
}

.palletImg{
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.palletImg img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.palletInfo{
  flex:1;
  font-size: 12px;
  font-weight: 800;
}

.palletInfo strong{
  font-weight: 1000;
}

.palletTotal{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 1000;
  color: var(--primaryDark);
}

.palletActions{
  margin-top: 10px;
}


/* ---------------------------------
   Cross Ref Loader
----------------------------------*/

.xrefLoader{
  grid-column: 1 / -1; /* span full grid */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
}

.loaderSpinner{
  width:40px;
  height:40px;
  border-radius:50%;
  border:4px solid rgba(40,150,229,.15);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
  margin-bottom:12px;
}

.loaderText{
  font-weight:900;
  font-size:14px;
  color:#334155;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}









/* ---------------------------------------------------------
   Facility Cards Row (Collapsed / Expandable)
   --------------------------------------------------------- */

.facilityCardsRow{
  margin: 12px 0 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* stack on smaller screens */
@media (max-width: 760px){
  .facilityCardsRow{
    grid-template-columns: 1fr;
  }
}

/* Each facility is a clickable "card-button" */
.facilityCard{
  appearance:none;
  width:100%;
  text-align:left;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,245,255,.92));
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.facilityCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(2,6,23,.12);
  border-color: rgba(40,150,229,.35);
  filter: brightness(1.01);
}

.facilityCard:active{
  transform: translateY(-1px);
}

.facilityCard:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(40,150,229,.22), 0 16px 34px rgba(2,6,23,.12);
}

/* Header row (always visible) */
/*.facCardHeader{*/
/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:space-between;*/
/*  gap: 10px;*/
/*}*/
.facCardHeader{
  display:flex;
  align-items:flex-start; /* CHANGED: allows the right side to be 2 lines */
  justify-content:space-between;
  gap: 10px;
}






.facCardName{
  font-weight: 1000;
  font-size: 14px;
  color:#111;
}

/*.facCardTotal{*/
/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:flex-end;*/
/*  gap: 6px;*/
/*  font-weight: 1100;*/
/*  font-size: 14px;*/
/*  color:#111;*/
/*  white-space: nowrap;*/
/*}*/
.facCardTotal{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  white-space: nowrap;
  font-weight: 1100;
  font-size: 14px;
  color:#111;
}

/* NEW: left column = name + icons stacked */
.facCardLeft{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
}



/*NEWFROM ABOVE*/
/* Make the right side (total + icons) two lines */


/* Line 2 icons row */
.facCardStates{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 6px;
}


/* When expanded, hide the whole icons row so spacing disappears */
.facilityCard.isExpanded .facCardStates{
  display:none !important;
}
















/* Small flame icon that appears BEFORE total (collapsed only if FT > 0) */
.facCardFlame{
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}


/* Expand/collapse body */
.facCardBody{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:none; /* collapsed default */
}

.facilityCard.isExpanded .facCardBody{
  display:block;
}

/* When expanded, we hide the flame by the total (your request) */
.facilityCard.isExpanded .facCardFlame{
  display:none !important;
}

/* Reuse your existing state rows look */
.facilityStates{
  display:grid;
  gap: 6px;
}

.stateRow{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
  color: #111;
}

.stateIcon{
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* “Not flame treated” row = same flame icon, rendered gray */
.stateRow.isOff{
  color: rgba(15,23,42,.55);
}

.stateRow.isOff .stateIcon{
  filter: grayscale(1);
  opacity: .35;
}

/* Non-flame-treated icon should ALWAYS be gray (even when qty > 0) */
.stateRow.isNft .stateIcon{
  filter: grayscale(1);
  opacity: .35;
}



/* extra header icons (label + quarantine) */
.facCardIcon{
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* When expanded, hide ALL header icons (flame/label/quarantine) */
.facilityCard.isExpanded .facCardIcon{
  display:none !important;
}





/* --- Facility state rows become small buttons (DROP-IN) --- */
.stateBtn{
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 4px;        /* compact */
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  display:flex;
  align-items:center;
  gap: 8px;
}

.stateBtn:hover{
  background: rgba(40,150,229,.08);
}

.stateBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(40,150,229,.18);
}

/* active filter highlight */
.stateBtn.isActive{
  background: rgba(40,150,229,.14);
}

/* keep your "off" look when qty=0 */
.stateBtn.isOff{
  color: rgba(15,23,42,.55);
}

.stateBtn.isOff .stateIcon{
  filter: grayscale(1);
  opacity: .35;
}







/* -----------------------------
   Pallet Card Flame Icons
----------------------------- */
/* Inline state icons beside qty lines */
.qtyLine{
  display:flex;
  align-items:center;
  justify-content:center; /* keeps your centered look */
  gap: 8px;
}

/* small inline icon */
.qtyIcon{
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* gray version for "No" state */
.qtyIcon.isOff{
  filter: grayscale(1);
  opacity: .35;
}















/* -----------------------------
   Pallet Locator Cards
----------------------------- */

.xrefPalletGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:14px;
}

/* Card */
.palletCard{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  box-shadow:0 8px 18px rgba(2,6,23,.08);
  cursor:pointer;
  transition:
    transform .12s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

/* Hover behavior (matches Daily Action cards feel) */
.palletCard:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(2,6,23,.16);
  border-color:rgba(40,150,229,.45);
}

/* Pallet icon */
.palletImg{
  width:58px;
  height:58px;
  border-radius:14px;
  background:rgba(40,150,229,.10);
  display:grid;
  place-items:center;
  flex-shrink:0;
}

/*.palletImg img{*/
/*  width:42px;*/
/*  height:42px;*/
/*  object-fit:contain;*/
/*}*/

/* Info column */
.palletInfo{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* Location block (top) */
.palletLocation{
  margin-bottom:10px;
}

.palletArea{
  font-weight:900;
  font-size:15px;
  letter-spacing:.2px;
}

.palletSlot{
  font-weight:800;
  color:#1b6fb0;
  font-size:13px;
  margin-top:2px;
}

/* Quantity line */
/*.palletQty{*/
/*  font-weight:900;*/
/*  font-size:16px;*/
/*  margin-top:6px;*/
/*  margin-bottom:16px;*/
/*}*/

/* Quantity line (tight stacking when multiple lines) */
.palletQty{
  font-weight:900;
  font-size:16px;
  margin-top:6px;
  margin-bottom:0;          /* KEY: remove the big gap between qty lines */
}

/* If there are multiple qty lines, keep them close together */
.palletQty + .palletQty{
  margin-top:2px;           /* small, clean line-to-line spacing */
}



/* Total line */
.palletTotal{
  font-weight:900;
  font-size:13px;
  color:#475569;
  margin-top:12px;          /* NEW: gives space from the LAST qty line */
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.15);
}




/* ---------------------------------------------------------
   Pallet Cards: icons row under pallet image
   (DROP-IN)
   --------------------------------------------------------- */

/* New wrapper that stacks the image + icons */
.palletMedia{
  width: 58px;                 /* matches your .palletImg size */
  flex: 0 0 auto;              /* don’t let it stretch */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;                    /* space between image and icons */
}

/* Keep your existing palletImg styling, but ensure it centers */
.palletMedia .palletImg{
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(40,150,229,.10);
  display: grid;
  place-items: center;
}

/* The icons row under the image */
.palletStates{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 14px;            /* prevents layout “jump” if some icons hidden */
}

/* Individual icons sizing */
.palletStateIcon{
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}












/* =========================================================
   OPS / Receiving Module (DROP-IN)
   ========================================================= */

.opsWrap{
  padding: 12px 16px 16px;
}

.opsToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.opsToolbarLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.opsToolbarRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.opsTabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.opsTab{
  appearance:none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.opsTab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  filter: brightness(1.01);
}
.opsTab.isActive{
  color: #111;
  background: rgba(40,150,229,.12);
  border-color: rgba(40,150,229,.28);
}

.opsChip{
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  white-space: nowrap;
}

.opsChip.good{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
}

.opsChip.warn{
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.10);
}

/* Optional: style the Late chip */
.opsChip[data-incoming-range="late"]{
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(245,158,11,.10);
}
.opsChip[data-incoming-range="late"].isActive{
  box-shadow: 0 0 0 2px rgba(239,68,68,.20) inset;
}




.opsGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .opsGrid2{ grid-template-columns: 1fr; }
}

.opsCard{
  border-radius: var(--radius);
  background: var(--cardSolid);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}

.opsCardHead{
  padding: 12px 14px;
  background: rgba(40,150,229,.06);
  border-bottom: 1px solid rgba(40,150,229,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.opsCardHead h3{
  margin:0;
  font-size: 13px;
  font-weight: 1000;
}

.opsCardBody{
  padding: 12px 14px 14px;
}

.opsSmall{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.opsInline{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.opsFilters{
  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr .7fr;
  gap: 10px;
}
@media (max-width: 980px){
  .opsFilters{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .opsFilters{ grid-template-columns: 1fr; }
}

.opsTableWrap{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
}









/* =========================================================
   DROP-IN: Receiving filters should wrap (no jammed fields)
   Applies to: Incoming Filters + Past Received Filters cards
   ========================================================= */

.opsFilters{
  display: flex;
  flex-wrap: wrap;          /* KEY: allows fields to drop to next line */
  gap: 12px;                /* space between fields */
  align-items: flex-start;
}

/* Each field becomes a "tile" that can wrap */
.opsFilters .field{
  flex: 1 1 220px;          /* grows, shrinks, prefers ~220px */
  min-width: 220px;         /* KEY: prevents ultra-squeezed inputs */
}

/* Make inputs/selects fill the field width */
.opsFilters .field .input,
.opsFilters .field .select{
  width: 100%;
}

/* When the card is narrow, let fields go full width sooner */
@media (max-width: 520px){
  .opsFilters .field{
    flex-basis: 100%;
    min-width: 0;
  }
}




















/* Optional: make opsChip buttons look like chips */
.opsChip { border: 0; cursor: pointer; }
.opsChip.isActive { outline: 2px solid rgba(0,0,0,.15); }



.badgeDamage{
  font-weight: 1000;
  font-size: 12px;
  color: #ef4444;
}

.iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.iconBtn:hover{ filter: brightness(1.02); box-shadow: 0 12px 22px rgba(2,6,23,.12); }
.iconBtn:active{ transform: translateY(1px); box-shadow: 0 8px 14px rgba(2,6,23,.10); }

.iconBtn svg{ width:18px; height:18px; opacity:.8; }

/* Loader inside ops panel (reuses your spinner) */
.opsLoader{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 0;
}
.opsLoader .loaderSpinner{ margin:0; }

/* Modal */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  z-index: 10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.modalOverlay.isOpen{ display:flex; }

.modal{
  width: min(980px, 100%);
  max-height: 90vh;
  overflow:auto;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 26px 70px rgba(2,6,23,.28);
}

.modalHead{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: rgba(40,150,229,.06);
}
.modalHead h3{
  margin:0;
  font-size: 16px;
  font-weight: 1000;
}
.modalBody{
  padding: 14px 16px 16px;
}

.modalGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .modalGrid{ grid-template-columns: 1fr; }
}

.bolImg{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  overflow:hidden;
  background:#fff;
}
.bolImg img{
  width:100%;
  height:auto;
  display:block;
}

.bolNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}

.bolMeta{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg,#fff,#f4f7fb);
  padding: 12px;
}

.bolMeta .row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.bolMeta .row:last-child{ border-bottom:0; }
.bolMeta .k{
  font-size: 12px;
  font-weight: 1000;
  color:#0f172a;
}
.bolMeta .v{
  font-size: 12px;
  font-weight: 900;
  color:#334155;
  text-align:right;
}

/* Simple calendar */
.calWrap{
  user-select:none;
}
.calHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.calTitle{
  font-weight: 1000;
  font-size: 14px;
}
.calGrid{
  width:100%;
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow:hidden;
}
.calGrid th, .calGrid td{
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 10px;
  text-align:center;
  font-size: 12px;
  font-weight: 900;
}
.calGrid th{
  background: rgba(0,0,0,.04);
}
.calDay{
  cursor:pointer;
  background:#fff;
}
.calDay:hover{
  background: rgba(40,150,229,.08);
}
.calDay.isDim{
  opacity:.35;
}
.calDay.isStar{
  background: rgba(34,197,94,.12);
}
.calDay.isWarren{
  background: rgba(59,130,246,.12);
}
.calDay.isBoth{
  background: rgba(168,85,247,.14);
}
.calLegend{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.calDot{
  width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px;
}
.dotStar{ background: rgba(34,197,94,.65); }
.dotWarren{ background: rgba(59,130,246,.65); }
.dotBoth{ background: rgba(168,85,247,.70); }








/* Incoming status row highlights */
.inRowFilled td {
  background: rgba(239, 68, 68, 0.10) !important; /* light red */
}

.inRowFilled:hover td {
  background: rgba(239, 68, 68, 0.18) !important;
}

.inRowPartial td {
  background: rgba(239, 68, 68, 0.22) !important; /* darker red */
  font-weight: 700;
}

.inRowPartial:hover td {
  background: rgba(239, 68, 68, 0.32) !important;
}

/* Incoming table: Late (not matched/received) = light orange */
.inRowLate td{
  background: rgba(255, 165, 0, 0.18);
}

.inRowLate:hover td{
  background: rgba(255, 165, 0, 0.28);
}



/* Incoming table: darker separator when the day changes */
.inDayBreak td{
  border-top: 2px solid rgba(0,0,0,0.28) !important; /* dark-ish divider */
}

/* if a row is colored (late/filled/partial), keep the divider visible */
.inRowLate.inDayBreak td,
.inRowFilled.inDayBreak td,
.inRowPartial.inDayBreak td{
  border-top: 2px solid rgba(0,0,0,0.28) !important;
}






/* Past Received grouping */
/*tr.pastGroupRow { font-weight: 800; cursor: pointer; }*/
/*tr.pastChildRow { background: rgba(0,0,0,.02); }*/

/* Past Received grouping */
tr.pastGroupRow { 
  font-weight: 800; 
  cursor: pointer; 
  background: rgba(0,0,0,.02);   /* ✅ collapsed row = light gray */
}

tr.pastChildRow { 
  background: transparent;        /* ✅ expanded rows = white */
}

tr.isHidden { display: none; }
.pastIndent { padding-left: 18px; opacity: .95; }
.pastToggleHint { font-weight: 700; opacity: .7; margin-right: 8px; }





/* ===== Receiving modal hard-close behavior ===== */
.modalOverlay {
  position: fixed;
  inset: 0;
  display: none;               /* default: not present */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9999;
}

.modalOverlay.isOpen {
  display: flex;
}

body.modalOpen {
  overflow: hidden;
}



/* ===== Past Received group UX ===== */
.pastChildRow.isHidden { display: none; }

/*.pastCollapseRow {*/
/*  background: rgba(0,0,0,.04);*/
/*  font-weight: 700;*/
/*}*/
.pastCollapseRow {
  background: transparent;
  font-weight: 700;
}



.pastCollapseBtn {
  cursor: pointer;
  border: 0;
  background: transparent;
  font-weight: 800;
}

.pastGroupRow td,
.pastChildRow td {
  color: inherit;              /* keeps same darkness open/closed */
  opacity: 1;                  /* prevents “dim text” look */
}

/* =========================================
   Softer text (DROP-IN)
   ========================================= */

/* Option A: keep your palette but soften default text */
:root{
  --text: #334155;          /* softer than #1f2937 */
  --muted: #64748b;         /* slightly softer muted */
}

/* Global default tone */
html, body{
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tables: most of the “too dark” feeling comes from here */
.table td,
.opsTableWrap td{
  color: rgba(15,23,42,.78);   /* softer body text */
  font-weight: 700;            /* was effectively “super bold” in many places */
}

.table th,
.opsTableWrap th{
  color: rgba(15,23,42,.88);
  font-weight: 900;
}

/* Group + child rows in Past Received (keeps readable but not harsh) */
tr.pastGroupRow td,
tr.pastChildRow td{
  color: rgba(15,23,42,.78) !important;
  font-weight: 700;
}

/* If you want Date/BOL/WPO columns even softer */
.table td:nth-child(1),
.table td:nth-child(2),
.table td:nth-child(3){
  color: rgba(15,23,42,.72);
}

/* Keep "DAMAGE" loud without making the whole row loud */
.badgeDamage{
  font-weight: 1000;
}




/* Past Received: darker line between DAYS (only on the first truck row of a new day) */
.pastDayBreak td{
  border-top: 3px solid rgba(15, 23, 42, .28) !important;
}







/* =========================================================
   Receiving Modal – Image carousel polish (surgical add-on)
   ========================================================= */

.recvImgTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.recvImgCounter{
  font-size: 12px;
  font-weight: 1000;
  color:#334155;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
}

.recvImgModeBadge{
  font-size: 12px;
  font-weight: 1100;
  letter-spacing: .6px;
  color: rgba(127, 29, 29, 0.95);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239, 68, 68, 0.10); /* same family as your filled/late look */
}

.recvImgStage{
  position:relative;
  height:min(56vh,520px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:#f8fafc;
}

.recvImgSideBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:2;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 30px rgba(2,6,23,.12);
}

.recvImgSideBtn.left{ left: 10px; }
.recvImgSideBtn.right{ right: 10px; }

.recvImgActions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* Light red button for Damage Images + Back (matches your “late/filled” vibe) */
.btn.recvBtnDamage{
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239, 68, 68, 0.10);
  color: rgba(127, 29, 29, 0.95);
}
.btn.recvBtnDamage:hover{
  background: rgba(239, 68, 68, 0.18);
}
.btn.recvBtnDamage:active{
  background: rgba(239, 68, 68, 0.22);
}



/* Receiving modal – counter alignment rules */
.recvImgTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

/* Normal view: center ONLY the counter */
.recvImgTopBar.centered{
  justify-content:center;
}
.recvImgTopBar.centered .recvImgCounter{
  margin: 0 auto;
}

.recvImgCounter{
  font-size: 12px;
  font-weight: 1000;
  color:#334155;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
}

.recvImgModeBadge{
  font-size: 12px;
  font-weight: 1100;
  letter-spacing: .6px;
  color: rgba(127, 29, 29, 0.95);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239, 68, 68, 0.10);
}

.recvImgStage{
  position:relative;
  height:min(56vh,520px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:#f8fafc;
}

.recvImgSideBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:2;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 30px rgba(2,6,23,.12);
}
.recvImgSideBtn.left{ left: 10px; }
.recvImgSideBtn.right{ right: 10px; }

.recvImgActions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* Light red Damage Images + Back button */
.btn.recvBtnDamage{
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239, 68, 68, 0.10);
  color: rgba(127, 29, 29, 0.95);
}
.btn.recvBtnDamage:hover{ background: rgba(239, 68, 68, 0.18); }
.btn.recvBtnDamage:active{ background: rgba(239, 68, 68, 0.22); }






/* =========================================================
   Cross Ref facility flame color fix
   FT flame = orange
   NFT flame stays gray
   ========================================================= */

/* small flame shown under facility name */
.facCardIcon.facCardFlame{
  filter:
    brightness(0)
    saturate(100%)
    invert(53%)
    sepia(96%)
    saturate(1568%)
    hue-rotate(352deg)
    brightness(101%)
    contrast(101%);
}

/* expanded FT row flame only */
.stateBtn[data-filter="ft"] .stateIcon{
  filter:
    brightness(0)
    saturate(100%)
    invert(53%)
    sepia(96%)
    saturate(1568%)
    hue-rotate(352deg)
    brightness(101%)
    contrast(101%);
}

/* keep NFT row muted/gray */
.stateBtn[data-filter="nft"] .stateIcon{
  filter: grayscale(100%) opacity(.45);
}
























.recvTruckForm{
  display:grid;
  gap:14px;
}

.recvGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}

.recvGrid2{
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.recvGridTop{
  grid-template-columns: 1.2fr 1.2fr 1fr;
}

.recvTotalRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:4px 2px 0;
}

.recvTotalLabel{
  font-size:14px;
  font-weight:700;
  color:#4b5b73;
}

.recvTotalValue{
  display:inline-flex;
  min-width:84px;
  justify-content:center;
  padding:8px 14px;
  border:1px solid #cfe0ef;
  border-radius:12px;
  background:#f7fbff;
  font-weight:800;
  color:#17324d;
}

.recvAccordion{
  display:grid;
  gap:12px;
}

.recvDetail{
  border:1px solid #d9e6f2;
  border-radius:16px;
  background:#fbfdff;
  overflow:hidden;
}

.recvDetail summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;
  color:#17324d;
  user-select:none;
}

.recvDetail summary::-webkit-details-marker{
  display:none;
}

.recvDetail[open] summary{
  border-bottom:1px solid #e4edf6;
  background:#f3f8fd;
}

.recvDetailBody{
  padding:14px 16px 16px;
}

.opsCheck{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#44576d;
  font-weight:600;
}

.recvTruckCard .input[type="file"]{
  padding:10px;
}

@media (max-width: 1100px){
  .recvGrid,
  .recvGridTop,
  .recvGrid2{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px){
  .recvGrid,
  .recvGridTop,
  .recvGrid2{
    grid-template-columns: 1fr;
  }
}











/* =========================================================
   Production Track
   ========================================================= */

.prodTrackPillsRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.prodTrackKpiGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}

@media (max-width: 980px){
  .prodTrackKpiGrid{
    grid-template-columns: 1fr;
  }
}

.prodTrackChartGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}

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

.prodTrackChartCard{
  min-height: 340px;
}

.prodTrackChartWide{
  grid-column: 1 / -1;
}

.prodTrackCanvasWrap{
  position:relative;
  height:260px;
  width:100%;
}

.prodTrackFilterBlock{
  margin-bottom:14px;
}

.prodTrackFilterHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:1000;
  color:#334155;
}

.prodTrackCheckList{
  max-height:160px;
  overflow:auto;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background: rgba(40,150,229,.03);
  padding:8px;
  display:grid;
  gap:6px;
}

.prodTrackCheckItem{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:#334155;
  padding:6px 8px;
  border-radius:10px;
  background: rgba(255,255,255,.72);
}

.prodTrackCheckItem input{
  margin:0;
}











.status-dot {
  height: 12px;
  width: 12px;
  display: inline-block;
  border-radius: 50%;
}

.status-green { background-color: #28a745; }
.status-red   { background-color: #dc3545; }

.comp-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.prodIconWrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.icon {
  display: inline-block;
  border-radius: 3px;
  flex: 0 0 auto;
}

.icon-box     { width: 20px; height: 20px; }
.icon-divider { width: 5px;  height: 20px; }
.icon-bottle  { width: 12px; height: 24px; border-radius: 4px; }
.icon-cap     { width: 9px;  height: 6px; }
.icon-wrap    { width: 28px; height: 15px; }
.icon-label   { width: 13px; height: 16px; }
.icon-neck    { width: 18px; height: 11px; }
.icon-rfid    { width: 9px;  height: 9px; }

.icon-grey     { background-color: #d0d0d0; }
.icon-red      { background-color: #dc3545; }
.icon-lightred { background-color: #ff9999; }

.etaText {
  font-size: 11px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

.etaText.isLate {
  color: #ff6666;
}

.prodAllGoodText {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}









/* =========================================================
   MOVE MO#
   ========================================================= */

  .prodMoveModal{
    max-width: 620px;
    width: min(620px, calc(100vw - 32px));
  }

  .prodMoveWrap{
    display: grid;
    gap: 14px;
  }

  .prodMoveHero{
    border: 1px solid #cfe0d4;
    background: #eef7f0;
    border-radius: 18px;
    padding: 16px 18px;
  }

  .prodMoveHeroTitle{
    font-size: 22px;
    font-weight: 1000;
    color: #33415c;
    margin-bottom: 8px;
  }

  .prodMoveHeroMeta{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #4a5568;
    font-weight: 700;
  }

  .prodMoveActionsGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .prodMoveDivider{
    height: 1px;
    background: #d7dee8;
  }

  .prodMoveForm{
    display: grid;
    gap: 10px;
  }



/* Production order list: cross-facility colors */

  .icon-purple{
    background: #7c3aed !important;
  }

  .icon-orange{
    background: #f7b267 !important;
  }

  .icon-split-lightred-purple{
    background: linear-gradient(to top, #7c3aed 0 50%, #f4b3b3 50% 100%) !important;
  }

  .icon-split-red-purple{
    background: linear-gradient(to top, #7c3aed 0 50%, #ef4444 50% 100%) !important;
  }

  .icon-split-lightred-orange{
    background: linear-gradient(to top, #f7b267 0 50%, #f4b3b3 50% 100%) !important;
  }

  .icon-split-red-orange{
    background: linear-gradient(to top, #f7b267 0 50%, #ef4444 50% 100%) !important;
  }

  .icon-bottom-orange-purple{
    background:
      linear-gradient(to bottom, #d9d9d9 0 50%, transparent 50% 100%),
      linear-gradient(to right, #f7b267 0 50%, #7c3aed 50% 100%);
    background-blend-mode: normal;
  }

  .icon-quad-lightred-orange-purple{
    background:
      linear-gradient(to bottom, #f4b3b3 0 50%, transparent 50% 100%),
      linear-gradient(to right, #f7b267 0 50%, #7c3aed 50% 100%);
    background-blend-mode: normal;
  }

  .icon-quad-red-orange-purple{
    background:
      linear-gradient(to bottom, #ef4444 0 50%, transparent 50% 100%),
      linear-gradient(to right, #f7b267 0 50%, #7c3aed 50% 100%);
    background-blend-mode: normal;
  }









/* =========================================================
   PRODUCTION ORDER MODAL - MANAGEMENT REORGANIZE
   SAFE UI DROP-IN
   ========================================================= */

.prodDetailTopShell{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap:16px;
  align-items:start;
}

.prodDetailTopMain{
  display:grid;
  gap:14px;
  min-width:0;
}

.prodDetailHero{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:16px 18px;
  background: rgba(40,150,229,.04);
}

.prodDetailHeroTitle{
  font-size:18px;
  font-weight:1000;
  color:#334155;
  margin-bottom:10px;
}

.prodDetailHeroSubMain{
  display:grid;
  grid-template-columns: auto auto 1fr;
  gap:14px;
  align-items:center;
}

.prodDetailStateBadge{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 16px;
  border-radius:999px;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.2px;
  white-space:nowrap;
  border:1px solid rgba(0,0,0,.08);
  background:#eef2f7;
  color:#334155;
}

.prodDetailStateBadge.isRunning{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.26);
  color:#166534;
}

.prodDetailStateBadge.isSetup{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.28);
  color:#9a6700;
}

.prodDetailStateBadge.isReady{
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.26);
  color:#6d28d9;
}

.prodDetailComponentHero{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

.prodDetailComponentHeroHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.prodDetailComponentHeroTitle{
  font-size:14px;
  font-weight:1000;
  color:#334155;
}

.prodDetailComponentHeroBody{
  min-height:96px;
}

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

.prodDetailProjectionItem{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:68px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.92));
}

.prodDetailProjectionIcon{
  width:40px !important;
  height:40px !important;
  min-width:40px;
  min-height:40px;
  border-radius:10px;
}

.prodDetailProjectionMeta{
  min-width:0;
  display:grid;
  gap:4px;
}

.prodDetailProjectionType{
  font-size:13px;
  font-weight:1000;
  color:#1f2937;
  line-height:1.15;
}

.prodDetailProjectionEta{
  font-size:12px;
  font-weight:900;
  color:#475569;
}

.prodDetailProjectionEta.isLate{
  color:#b91c1c;
}

.prodDetailProjectionEta.isMuted{
  color:#64748b;
}

.prodDetailProjectionEmpty{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px dashed rgba(0,0,0,.12);
  border-radius:16px;
  color:#64748b;
  font-weight:800;
  background: rgba(248,250,252,.8);
}

.prodDetailModalFilterRow{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.prodDetailCheck{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:900;
  color:#334155;
}

.prodDetailCheck input{
  width:16px;
  height:16px;
}

.prodDetailActionsBox{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  padding:14px;
  min-width:0;
}

.prodDetailActionsTitle{
  font-size:13px;
  font-weight:1000;
  color:#475569;
  margin-bottom:10px;
}

.prodDetailActions{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}

.prodDetailActionsStack{
  flex-direction:column;
  gap:10px;
}

.prodActionBtn{
  width:100%;
  min-width:170px;
  min-height:44px;
  justify-content:center;
  font-size:14px;
  font-weight:1000;
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}

.prodActionBtn.prodActionStop{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.28);
  color:#7f1d1d;
}

.prodActionBtn.prodActionRun{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
  color:#166534;
}

.prodActionBtn.prodActionSetup{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.30);
  color:#9a6700;
}

.prodActionBtn.prodActionReady{
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.28);
  color:#6d28d9;
}

.prodActionBtn.prodActionMove{
  background: rgba(40,150,229,.14);
  border-color: rgba(40,150,229,.28);
  color:#1b6fb0;
}

.prodActionBtn.isCurrentState,
.prodActionBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.75);
  box-shadow:none;
}

@media (max-width: 980px){
  .prodDetailTopShell{
    grid-template-columns: 1fr;
  }

  .prodDetailActionsBox{
    width:100%;
  }

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

@media (max-width: 760px){
  .prodDetailHeroSubMain{
    grid-template-columns: 1fr;
    gap:10px;
  }

  .prodDetailStateBadge{
    justify-self:start;
  }

  .prodDetailProjectionRow{
    grid-template-columns: 1fr;
  }

  .prodActionBtn{
    min-width:0;
  }
}




/* =========================================================
   PRODUCTION ORDER MODAL - MANAGEMENT REWORK
   ========================================================= */

.prodDetailTopShell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:16px;
  align-items:start;
}

.prodDetailTopMain{
  display:grid;
  gap:14px;
  min-width:0;
}

.prodDetailHero{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:16px 18px;
  background:rgba(40,150,229,.04);
}

.prodDetailHeroTitle{
  font-size:18px;
  font-weight:1000;
  color:#334155;
  margin-bottom:10px;
}

.prodDetailHeroSubMain{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:14px;
  align-items:center;
}

.prodDetailStateBadge{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 16px;
  border-radius:999px;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.2px;
  white-space:nowrap;
  border:1px solid rgba(0,0,0,.08);
  background:#eef2f7;
  color:#334155;
}

.prodDetailStateBadge.isRunning{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.26);
  color:#166534;
}

.prodDetailStateBadge.isSetup{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.28);
  color:#9a6700;
}

.prodDetailStateBadge.isReady{
  background:rgba(168,85,247,.14);
  border-color:rgba(168,85,247,.26);
  color:#6d28d9;
}

.prodDetailComponentHero{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  background:#fff;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}

.prodDetailComponentHeroHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.prodDetailComponentHeroTitle{
  font-size:14px;
  font-weight:1000;
  color:#334155;
}

.prodDetailComponentHeroBody{
  min-height:96px;
}

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

.prodDetailProjectionItem{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:68px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.92));
}

.prodDetailProjectionIcon{
  width:40px !important;
  height:40px !important;
  min-width:40px;
  min-height:40px;
  border-radius:10px;
}

.prodDetailProjectionMeta{
  min-width:0;
  display:grid;
  gap:4px;
}

.prodDetailProjectionType{
  font-size:13px;
  font-weight:1000;
  color:#1f2937;
  line-height:1.15;
}

.prodDetailProjectionEta{
  font-size:12px;
  font-weight:900;
  color:#475569;
}

.prodDetailProjectionEta.isLate{
  color:#b91c1c;
}

.prodDetailProjectionEta.isMuted{
  color:#64748b;
}

.prodDetailProjectionEmpty{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px dashed rgba(0,0,0,.12);
  border-radius:16px;
  color:#64748b;
  font-weight:800;
  background:rgba(248,250,252,.8);
}

.prodDetailModalFilterRow{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.prodDetailCheck{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:900;
  color:#334155;
}

.prodDetailCheck input{
  width:16px;
  height:16px;
}

.prodDetailActionsBox{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 22px rgba(2,6,23,.08);
  padding:14px;
  min-width:0;
}

.prodDetailActionsTitle{
  font-size:13px;
  font-weight:1000;
  color:#475569;
  margin-bottom:10px;
}

.prodDetailActions{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}

.prodDetailActionsStack{
  flex-direction:column;
  gap:10px;
}

.prodActionBtn{
  width:100%;
  min-width:170px;
  min-height:44px;
  justify-content:center;
  font-size:14px;
  font-weight:1000;
  box-shadow:0 10px 18px rgba(2,6,23,.08);
}

.prodActionBtn.prodActionStop{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.28);
  color:#7f1d1d;
}

.prodActionBtn.prodActionRun{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.28);
  color:#166534;
}

.prodActionBtn.prodActionSetup{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.30);
  color:#9a6700;
}

.prodActionBtn.prodActionReady{
  background:rgba(168,85,247,.14);
  border-color:rgba(168,85,247,.28);
  color:#6d28d9;
}

.prodActionBtn.prodActionMove{
  background:rgba(40,150,229,.14);
  border-color:rgba(40,150,229,.28);
  color:#1b6fb0;
}

.prodActionBtn.isCurrentState,
.prodActionBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.75);
  box-shadow:none;
}

@media (max-width: 980px){
  .prodDetailTopShell{
    grid-template-columns:1fr;
  }

  .prodDetailActionsBox{
    width:100%;
  }

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

@media (max-width: 760px){
  .prodDetailHeroSubMain{
    grid-template-columns:1fr;
    gap:10px;
  }

  .prodDetailStateBadge{
    justify-self:start;
  }

  .prodDetailProjectionRow{
    grid-template-columns:1fr;
  }

  .prodActionBtn{
    min-width:0;
  }
}









/* ===== Production order modal refinements ===== */

.prodDetailModal{
  width:min(1120px, 100%);
}

.prodDetailTopShell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:16px;
  align-items:start;
}

.prodDetailTopMain{
  display:grid;
  gap:14px;
  min-width:0;
}

.prodDetailHeroSubMain{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}

.prodDetailStateBadge{
  justify-self:end;
}

.prodDetailComponentHeroBody{
  min-height:146px;
}

.prodDetailProjectionLoading{
  min-height:146px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.prodDetailProjectionRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.prodDetailProjectionItem{
  min-width:0;
}

.prodDetailModalFilterRow{
  margin-top:12px;
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.prodDetailSelectWrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.prodDetailSelectLabel{
  font-size:12px;
  font-weight:1000;
  color:#64748b;
  line-height:1;
}

.prodDetailFacilitySelect{
  min-width:180px;
}

.prodActionBtn{
  width:100%;
  min-width:170px;
  min-height:44px;
  justify-content:center;
  font-size:14px;
  font-weight:1000;
}

@media (max-width: 980px){
  .prodDetailModal{
    width:min(1000px, 100%);
  }

  .prodDetailTopShell{
    grid-template-columns:1fr;
  }

  .prodDetailActionsBox{
    width:100%;
  }
}

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

  .prodDetailStateBadge{
    justify-self:start;
  }

  .prodDetailProjectionRow{
    grid-template-columns:1fr;
  }

  .prodDetailSelectWrap,
  .prodDetailFacilitySelect{
    min-width:0;
    width:100%;
  }
}




/* ===== Production modal status/detail refinements ===== */

.prodDetailWpoValue{
  font-size:20px;
  font-weight:1000;
  color:#334155;
  line-height:1.1;
  letter-spacing:.2px;
}

.prodDetailProjectionMeta{
  min-width:0;
  display:grid;
  gap:4px;
}

.prodDetailProjectionType{
  font-size:13px;
  font-weight:1000;
  color:#1f2937;
  line-height:1.15;
}

.prodDetailProjectionCode{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  line-height:1.15;
  word-break:break-word;
}

.prodDetailProjectionEta{
  font-size:12px;
  font-weight:900;
  color:#475569;
  line-height:1.15;
}

.prodDetailProjectionEta.isLate{
  color:#b91c1c;
}

.prodDetailProjectionEta.isNote{
  color:#8a5a00;
}

.prodDetailProjectionDetailRow{
  display:grid;
  grid-template-columns:auto 1px 1fr;
  align-items:center;
  gap:8px;
  min-width:0;
}

.prodDetailProjectionDivider{
  width:1px;
  align-self:stretch;
  background:rgba(51,65,85,.18);
  border-radius:1px;
  min-height:28px;
}

.prodDetailProjectionFlags{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}

.prodDetailProjectionFlag{
  font-size:11px;
  font-weight:1000;
  color:#475569;
  line-height:1.1;
  white-space:nowrap;
}

.prodDetailProjectionRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.prodDetailProjectionItem{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:76px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.92));
}

.prodDetailModal{
  width:min(1180px, 100%);
}

@media (max-width: 980px){
  .prodDetailModal{
    width:min(1040px, 100%);
  }
}

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

  .prodDetailProjectionDetailRow{
    grid-template-columns:1fr;
    gap:4px;
  }

  .prodDetailProjectionDivider{
    display:none;
  }

  .prodDetailWpoValue{
    font-size:18px;
  }
}






/* ===== Production modal sequence / isolated toggle ===== */

.prodDetailCheckWide span{
  white-space:nowrap;
}

@media (max-width: 760px){
  .prodDetailCheckWide{
    width:100%;
  }

  .prodDetailCheckWide span{
    white-space:normal;
  }
}





/* ===== Component exploded detail overlay ===== */

.prodDetailProjectionItemBtn{
  appearance:none;
  border:1px solid rgba(0,0,0,.08);
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.prodDetailProjectionItemBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(2,6,23,.08);
  border-color:rgba(40,150,229,.22);
}

.prodCompDetailOverlay{
  display:grid;
  gap:16px;
}

.prodCompDetailHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.prodCompDetailTitleWrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.prodCompDetailHeadIcon{
  width:38px !important;
  height:38px !important;
  min-width:38px;
  min-height:38px;
  border-radius:10px;
}

.prodCompDetailTitle{
  font-size:18px;
  font-weight:1000;
  color:#1f2937;
  line-height:1.1;
}

.prodCompDetailWpo{
  margin-top:3px;
  font-size:13px;
  font-weight:900;
  color:#64748b;
}

.prodCompDetailBackBtn{
  min-height:40px;
  font-weight:1000;
}

.prodCompDetailStats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.prodCompStatCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.92));
}

.prodCompStatCardAccent{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.18);
}

.prodCompStatLabel{
  font-size:12px;
  font-weight:1000;
  color:#64748b;
  margin-bottom:6px;
}

.prodCompStatValue{
  font-size:22px;
  font-weight:1000;
  color:#1f2937;
  line-height:1;
}

.prodCompDetailSection{
  display:grid;
  gap:10px;
}

.prodCompSectionTitle{
  font-size:14px;
  font-weight:1000;
  color:#334155;
}

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

.prodCompFacilityCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px 14px;
  background:#fff;
}

.prodCompFacilityName{
  font-size:13px;
  font-weight:1000;
  color:#1f2937;
  margin-bottom:6px;
}

.prodCompFacilityQty{
  font-size:13px;
  font-weight:900;
  color:#334155;
}

.prodCompFacilitySub{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  margin-top:3px;
}

.prodCompDetailDivider{
  height:1px;
  background:rgba(51,65,85,.14);
  border-radius:1px;
}

.prodCompIncomingTableWrap{
  overflow:auto;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
}

.prodCompIncomingTable{
  width:100%;
  border-collapse:collapse;
  min-width:460px;
}

.prodCompIncomingTable th,
.prodCompIncomingTable td{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.07);
  font-size:13px;
  text-align:left;
}

.prodCompIncomingTable th{
  background:rgba(15,23,42,.04);
  font-weight:1000;
  color:#334155;
}

.prodCompIncomingTable td{
  color:#334155;
  font-weight:900;
}

.prodCompIncomingTable tr.isArrived td{
  color:#94a3b8;
  text-decoration:line-through;
}

.prodCompEmpty{
  border:1px dashed rgba(0,0,0,.12);
  border-radius:16px;
  padding:18px;
  text-align:center;
  color:#64748b;
  font-weight:900;
  background:rgba(248,250,252,.8);
}

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





/* ===== Component detail equation layout refresh ===== */

.prodCompDetailStats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.prodCompStatCard--neutral{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,245,255,.92));
  border-color:rgba(0,0,0,.08);
}

.prodCompStatCard--minus{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.18);
}

.prodCompStatCard--green{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.18);
}

.prodCompStatCard--purple{
  background:rgba(168,85,247,.10);
  border-color:rgba(168,85,247,.20);
}

.prodCompStatCard--orange{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.22);
}

.prodCompIncomingBalanceRow td{
  text-align:center;
  font-weight:1000;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:#fff;
}

.prodCompIncomingBalanceRow.isPositive td{
  color:#0f8a24;
}

.prodCompIncomingBalanceRow.isNegative td{
  color:#c1121f;
}

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







.prodOrderRow.prodModeYellow td {
  background: #fff7cc !important;
}

.prodOrderRow.prodModeRed td {
  background: #ffdede !important;
}









/* =========================================================
   Production -> Needs Altered clickable rows
   ========================================================= */
.prodNeedsRowClickable{
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.prodNeedsRowClickable:hover td{
  background: rgba(40,150,229,.10);
}

.prodNeedsRowClickable:focus-visible{
  outline: none;
}

.prodNeedsRowClickable:focus-visible td{
  background: rgba(40,150,229,.14);
  box-shadow: inset 0 0 0 1px rgba(40,150,229,.22);
}
  
  
  
  
  /* Needs Altered facility segmented control should be rounded-rectangle, not pill */
.prodNeedsFacilitySeg{
  border-radius: 22px;
  padding: 10px 12px;
  align-items: flex-start;
  justify-content: flex-start;
}

.prodNeedsFacilitySeg .segBtn{
  border-radius: 14px;
}