/* ===================================================================
   DeepSmart 3PL — Operational Warehouse Bin Matrix
   Canonical, flat, location-first warehouse map.
   =================================================================== */

.warehouse-bin-map{
  position:relative;
  min-height:420px;
  padding:18px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
}

.ds-map-loading,
.ds-map-error,
.ds-map-empty{
  min-height:320px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  color:#64748b;
}

.ds-map-error b{
  color:#b42318;
}

.ds-map-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(110px,1fr));
  gap:8px;
  margin-bottom:12px;
}

.ds-map-summary>div{
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
}

.ds-map-summary b,
.ds-map-summary span{
  display:block;
}

.ds-map-summary b{
  font-size:17px;
  color:#0f172a;
}

.ds-map-summary span{
  margin-top:2px;
  font-size:11px;
  color:#64748b;
}

.ds-map-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 220px 190px;
  gap:8px;
  margin-bottom:10px;
}

.ds-map-toolbar input,
.ds-map-toolbar select{
  width:100%;
  min-height:38px;
  padding:0 11px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  font:inherit;
}

.ds-map-toolbar input:focus,
.ds-map-toolbar select:focus{
  outline:2px solid rgba(249,115,22,.16);
  border-color:#f97316;
}

.ds-map-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
  color:#475569;
  font-size:11px;
}

.ds-map-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.ds-map-legend i{
  width:11px;
  height:11px;
  border-radius:3px;
  border:1px solid rgba(15,23,42,.12);
}

.legend-empty{background:#f8fafc}
.legend-low{background:#dbeafe}
.legend-medium{background:#fde68a}
.legend-high{background:#fdba74}
.legend-task{background:#cffafe}
.legend-quarantine{background:#e9d5ff}
.legend-blocked{background:#fecaca}

.ds-warehouse-matrix{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ds-aisle{
  border:1px solid #d8e1ea;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.ds-aisle-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
}

.ds-aisle-head>div{
  display:flex;
  align-items:center;
  gap:9px;
}

.ds-aisle-head strong{
  font-size:14px;
  color:#0f172a;
}

.ds-aisle-head span,
.ds-aisle-head small{
  font-size:11px;
  color:#64748b;
}

.ds-aisle-racks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}

.ds-rack-matrix{
  padding:10px 12px 12px;
  min-width:0;
}

.ds-rack-matrix+ .ds-rack-matrix{
  border-inline-start:1px solid #e2e8f0;
}

.ds-rack-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}

.ds-rack-head strong{
  font-size:12px;
  color:#334155;
}

.ds-rack-head span{
  font-size:9px;
  color:#94a3b8;
}

.ds-rack-body{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.ds-rack-level{
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:stretch;
  gap:4px;
}

.ds-level-label{
  display:grid;
  place-items:center;
  min-height:54px;
  border-radius:6px;
  background:#eef2f6;
  color:#64748b;
  font-size:9px;
  font-weight:800;
}

.ds-level-cells{
  display:grid;
  grid-template-columns:repeat(var(--ds-position-count),minmax(52px,1fr));
  gap:4px;
}

.ds-map-bin,
.ds-map-bin-missing{
  position:relative;
  min-width:52px;
  min-height:54px;
  padding:5px 4px;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  color:#334155;
  text-align:center;
}

button.ds-map-bin{
  appearance:none;
  cursor:pointer;
  font:inherit;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    opacity .12s ease;
}

button.ds-map-bin:hover{
  z-index:2;
  transform:translateY(-2px);
  border-color:#64748b;
  box-shadow:0 6px 16px rgba(15,23,42,.13);
}

.ds-map-bin.is-selected{
  z-index:3;
  border-color:#f97316 !important;
  box-shadow:
    0 0 0 2px rgba(249,115,22,.22),
    0 8px 20px rgba(15,23,42,.16);
}

.ds-map-bin.is-filtered-out{
  opacity:.13;
  filter:grayscale(.8);
}

.ds-map-bin-missing{
  display:grid;
  place-items:center;
  border-style:dashed;
  color:#cbd5e1;
  background:#fafafa;
}

.ds-map-bin.is-empty{
  background:#f8fafc;
  border-color:#dce3ea;
}

.ds-map-bin.occ-low{
  background:#dbeafe;
  border-color:#93c5fd;
}

.ds-map-bin.occ-medium{
  background:#fef3c7;
  border-color:#fbbf24;
}

.ds-map-bin.occ-high{
  background:#ffedd5;
  border-color:#fb923c;
}

.ds-map-bin.has-task{
  background:#cffafe;
  border-color:#22d3ee;
}

.ds-map-bin.is-quarantine{
  background:#f3e8ff;
  border-color:#c084fc;
}

.ds-map-bin.is-blocked{
  background:#fee2e2;
  border-color:#f87171;
}

.ds-bin-position,
.ds-bin-owner,
.ds-bin-qty,
.ds-bin-sku,
.ds-bin-empty-text{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ds-bin-position{
  font-size:8px;
  color:#64748b;
}

.ds-bin-owner{
  margin-top:2px;
  font-size:9px;
  color:#0f172a;
}

.ds-bin-qty{
  margin-top:1px;
  font-size:11px;
  font-weight:800;
  color:#0f172a;
}

.ds-bin-sku{
  margin-top:1px;
  font-size:7px;
  color:#64748b;
}

.ds-bin-empty-text{
  margin-top:8px;
  font-size:8px;
  color:#94a3b8;
}

.ds-operational-locations{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #dbe3ea;
}

.ds-map-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.ds-map-section-title strong{
  font-size:12px;
  color:#334155;
}

.ds-map-section-title span{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  border-radius:999px;
  background:#eef2f6;
  font-size:10px;
  color:#64748b;
}

.ds-operational-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px;
}

.ds-operational-bin{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 10px;
  border:1px solid #d7e0e8;
  border-radius:8px;
  background:#fff;
  color:#334155;
  text-align:start;
  cursor:pointer;
}

.ds-operational-bin strong{
  font-size:11px;
}

.ds-operational-bin span,
.ds-operational-bin small{
  font-size:9px;
  color:#64748b;
}

/* Bin details drawer — no modal */
.warehouse-bin-drawer{
  position:fixed;
  top:0;
  inset-inline-end:0;
  z-index:190;
  width:min(440px,92vw);
  height:100vh;
  overflow:auto;
  padding:18px;
  background:#fff;
  border-inline-start:1px solid #dbe3ea;
  box-shadow:-18px 0 46px rgba(15,23,42,.16);
  transform:translateX(110%);
  transition:transform .2s ease;
}

html[dir="rtl"] .warehouse-bin-drawer{
  transform:translateX(-110%);
  box-shadow:18px 0 46px rgba(15,23,42,.16);
}

.warehouse-bin-drawer.is-open{
  transform:translateX(0) !important;
}

.ds-bin-drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid #e2e8f0;
}

.ds-bin-drawer-head small{
  display:block;
  color:#64748b;
  font-size:10px;
}

.ds-bin-drawer-head h3{
  margin:3px 0 0;
  font-size:20px;
  color:#0f172a;
}

.ds-bin-drawer-head button{
  width:34px;
  height:34px;
  border:1px solid #dbe3ea;
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  font-size:22px;
  cursor:pointer;
}

.ds-bin-path{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:10px 0;
}

.ds-bin-path span{
  padding:4px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:9px;
}

.ds-bin-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.ds-bin-kpis>div{
  padding:8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
}

.ds-bin-kpis b,
.ds-bin-kpis span{
  display:block;
}

.ds-bin-kpis b{
  font-size:13px;
  color:#0f172a;
}

.ds-bin-kpis span{
  margin-top:2px;
  font-size:9px;
  color:#64748b;
}

.ds-bin-section{
  margin-top:16px;
}

.ds-bin-section h4{
  margin:0 0 7px;
  font-size:11px;
  color:#475569;
}

.ds-bin-owner-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border:1px solid #e2e8f0;
  border-radius:8px;
}

.ds-bin-owner-row div{
  min-width:0;
}

.ds-bin-owner-row b,
.ds-bin-owner-row span{
  display:block;
}

.ds-bin-owner-row b{
  font-size:11px;
}

.ds-bin-owner-row span{
  margin-top:2px;
  color:#64748b;
  font-size:9px;
}

.ds-product-table{
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:9px;
}

.ds-product-table-head,
.ds-product-table-row{
  display:grid;
  grid-template-columns:minmax(130px,1.8fr) repeat(3,minmax(60px,.7fr));
  gap:6px;
  align-items:center;
}

.ds-product-table-head{
  padding:7px 8px;
  background:#f1f5f9;
  color:#64748b;
  font-size:8px;
  font-weight:700;
}

.ds-product-table-row{
  padding:8px;
  border-top:1px solid #edf2f7;
  font-size:9px;
}

.ds-product-table-row b,
.ds-product-table-row small{
  display:block;
}

.ds-product-table-row small{
  margin-top:2px;
  color:#94a3b8;
}

.ds-status-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.ds-status-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border-radius:999px;
  background:#eef2f6;
  color:#475569;
  font-size:9px;
}

.ds-task-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:6px;
  padding:7px 8px;
  border-bottom:1px solid #edf2f7;
  font-size:9px;
}

.ds-detail-empty{
  padding:12px;
  border:1px dashed #cbd5e1;
  border-radius:8px;
  color:#94a3b8;
  text-align:center;
  font-size:10px;
}

.ds-bin-drawer-actions{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid #e2e8f0;
}

.ds-bin-drawer-actions a{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  background:#0f172a;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:11px;
}

@media(max-width:900px){
  .ds-map-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .ds-map-toolbar{
    grid-template-columns:1fr;
  }

  .ds-aisle-racks{
    grid-template-columns:1fr;
  }

  .ds-rack-matrix + .ds-rack-matrix{
    border-inline-start:0;
    border-top:1px solid #e2e8f0;
  }

  .warehouse-bin-map{
    padding:10px;
    overflow-x:auto;
  }

  .ds-rack-matrix{
    min-width:420px;
  }
}