/* 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%; }




/* ---------- 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;
}












/* 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); }
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;
}

.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;
}