/* =========================================================
   ROUTIQ INVENTORY CORE
   FILE: cores/inventory/inventory.css
========================================================= */


/* =========================================================
   INVENTORY DESIGN VARIABLES
========================================================= */

:root {
  /* Page foundation */
  --inventory-bg: #f2f4f7;
  --inventory-surface: #ffffff;
  --inventory-surface-soft: #f7f9fc;

  /* Borders */
  --inventory-border: #d9e0e8;
  --inventory-border-strong: #c8d2df;

  /* Text */
  --inventory-text: #17233a;
  --inventory-text-secondary: #5d6878;
  --inventory-text-muted: #8c96a5;

  /* Inventory Signature Navy */
  --inventory-primary: #254f82;
  --inventory-primary-dark: #17375d;
  --inventory-primary-soft: #e8eff8;
  --inventory-accent: #3f75b5;

  /* Operational states */
  --inventory-green: #3f9369;
  --inventory-yellow: #c3942f;
  --inventory-orange: #d97839;
  --inventory-red: #c95555;
  --inventory-purple: #7c58c7;
  --inventory-gray: #aab2bd;

  /* Depth */
  --inventory-shadow:
    0 18px 44px rgba(28, 48, 76, 0.08);

  /* Radius */
  --inventory-radius-large: 18px;
  --inventory-radius-medium: 12px;
  --inventory-radius-small: 8px;
}


/* =========================================================
   INVENTORY HEADER SIGNATURE COLOR
========================================================= */

.inventory-header {
  background:
    linear-gradient(
      110deg,
      #132a49 0%,
      #1b3c67 48%,
      #102642 100%
    );

  border-bottom-color:
    rgba(79, 122, 176, 0.45);

  box-shadow:
    0 8px 26px rgba(19, 42, 73, 0.24),
    inset 0 -1px 0 rgba(104, 148, 200, 0.16);
}


.inventory-header .header-divider {
  background:
    rgba(113, 153, 202, 0.38);
}


.inventory-header .page-title-block h1,
.inventory-header .header-date,
.inventory-header .header-time,
.inventory-header .user-info strong {
  color: #f3f7fc;
}


.inventory-header .page-title-block p,
.inventory-header .user-info p {
  color:
    rgba(243, 247, 252, 0.66);
}


.inventory-header .header-feed,
.inventory-header .feed-track {
  color: #7ea9dc;
}


.inventory-header .header-svg-icon,
.inventory-header .user-avatar svg,
.inventory-header .chevron-svg {
  color: #82acd9;
  stroke: currentColor;
}


.inventory-header .user-avatar {
  color: #82acd9;

  background:
    rgba(79, 122, 176, 0.14);

  border-color:
    rgba(79, 122, 176, 0.31);
}


.inventory-header .theme-toggle {
  background:
    rgba(10, 29, 52, 0.38);

  border-color:
    rgba(91, 139, 194, 0.38);
}


.inventory-header .toggle-knob {
  background: #5e8fc6;

  box-shadow:
    0 3px 8px rgba(9, 25, 45, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}


.inventory-header .toggle-sun,
.inventory-header .toggle-moon {
  color: #b2cbe7;
  stroke: currentColor;
}


.inventory-header .user-block:hover {
  background:
    rgba(91, 139, 194, 0.1);
}


.inventory-header .theme-toggle:hover {
  border-color:
    rgba(119, 164, 214, 0.6);
}


/* =========================================================
   FOUNDATION
========================================================= */

* {
  box-sizing: border-box;
}


body {
  margin: 0;
}


button,
input,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


.inventory-page {
  min-height:
    calc(100vh - 72px);

  padding:
    34px
    clamp(24px, 3.2vw, 58px)
    52px;

  color:
    var(--inventory-text);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(37, 79, 130, 0.1),
      transparent 31%
    ),
    radial-gradient(
      circle at 94% 15%,
      rgba(70, 112, 164, 0.05),
      transparent 30%
    ),
    var(--inventory-bg);
}


.section-kicker {
  display: block;

  margin-bottom: 7px;

  color:
    var(--inventory-primary);

  font-size: 0.69rem;
  font-weight: 760;
  letter-spacing: 0.15em;
}


/* =========================================================
   INVENTORY HEADING
========================================================= */

.inventory-heading {
  display: flex;

  max-width: 1680px;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin:
    0 auto 26px;
}


.inventory-heading h1 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size:
    clamp(1.85rem, 2.5vw, 2.65rem);

  font-weight: 690;
  letter-spacing: -0.04em;
}


.inventory-heading p {
  margin:
    8px 0 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.96rem;
}


.inventory-heading__actions {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 10px;
}


.outline-action {
  min-height: 42px;

  padding:
    10px 15px;

  color:
    var(--inventory-primary);

  background:
    rgba(255, 255, 255, 0.86);

  border:
    1px solid #b8c8dc;

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.76rem;
  font-weight: 700;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}


.outline-action:hover {
  background:
    var(--inventory-primary-soft);

  border-color:
    var(--inventory-primary);

  transform:
    translateY(-1px);
}


/* =========================================================
   MAIN GRID
========================================================= */

.inventory-main-grid,
.inventory-secondary-grid,
.setup-notice {
  max-width: 1680px;

  margin-left: auto;
  margin-right: auto;
}


.inventory-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(300px, 0.78fr);

  gap: 22px;
}


.inventory-secondary-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(340px, 0.85fr);

  gap: 22px;

  margin-top: 22px;
}


/* =========================================================
   COMMON CARD
========================================================= */

.inventory-card {
  min-width: 0;

  padding: 22px;

  background:
    rgba(255, 255, 255, 0.95);

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-large);

  box-shadow:
    var(--inventory-shadow);
}


.card-title-row,
.request-card__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;
}


.card-title-row h2,
.request-card h2 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 1.01rem;
  font-weight: 680;
  letter-spacing: -0.018em;
}


/* =========================================================
   REQUEST CARDS
========================================================= */

.request-card {
  display: flex;
  flex-direction: column;
}


.request-card__header {
  justify-content: flex-start;
}


.request-card__icon {
  display: grid;

  width: 48px;
  height: 48px;

  flex:
    0 0 48px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border-radius: 14px;
}


.request-card__icon svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.request-card h2 {
  max-width: 290px;

  color:
    var(--inventory-text-secondary);

  font-size: 0.84rem;
  line-height: 1.5;
}


.request-card__count {
  display: flex;

  align-items: baseline;

  gap: 12px;

  margin:
    25px 0 20px;
}


.request-card__count strong {
  color:
    var(--inventory-primary);

  font-size: 2.6rem;
  line-height: 1;
}


.request-card__count span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.78rem;
  font-weight: 650;
}


.request-flow {
  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  gap: 8px;

  align-items: center;
}


.flow-step {
  display: grid;

  min-height: 92px;

  place-items: center;
  align-content: center;

  gap: 5px;

  padding: 12px;

  text-align: center;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius: 10px;
}


.flow-step strong {
  color:
    var(--inventory-primary-dark);

  font-size: 1.25rem;
}


.flow-step span {
  max-width: 80px;

  color:
    var(--inventory-text-muted);

  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.35;
}


.flow-arrow {
  color:
    var(--inventory-accent);

  font-size: 1.55rem;
}


.primary-card-action {
  display: flex;

  min-height: 43px;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 18px;

  padding:
    10px 16px;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      var(--inventory-primary-dark),
      var(--inventory-primary)
    );

  border:
    1px solid var(--inventory-primary);

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.76rem;
  font-weight: 700;

  transition:
    transform 150ms ease,
    filter 150ms ease;
}


.primary-card-action:hover {
  filter:
    brightness(1.08);

  transform:
    translateY(-1px);
}


/* =========================================================
   INVENTORY SUMMARY
========================================================= */

.summary-date {
  color:
    var(--inventory-text-muted);

  font-size: 0.72rem;
  font-weight: 650;
}


.summary-list {
  display: grid;

  margin-top: 17px;
}


.summary-row {
  display: flex;

  width: 100%;
  min-height: 58px;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding:
    12px 4px;

  color:
    var(--inventory-text);

  background: transparent;

  border: 0;
  border-bottom:
    1px solid var(--inventory-border);

  text-align: left;
}


.summary-row--button {
  border-radius: 7px;

  transition:
    background 140ms ease;
}


.summary-row--button:hover {
  background: #fffaf0;
}


.summary-label {
  display: flex;

  align-items: center;

  gap: 10px;
}


.summary-label span:last-child {
  color:
    var(--inventory-text-secondary);

  font-size: 0.74rem;
  font-weight: 620;
}


.summary-row strong {
  color:
    var(--inventory-text);

  font-size: 1.16rem;
}


.summary-dot {
  width: 9px;
  height: 9px;

  flex:
    0 0 9px;

  border-radius: 50%;
}


.summary-dot--primary {
  background:
    var(--inventory-primary);
}


.summary-dot--available {
  background:
    var(--inventory-green);
}


.summary-dot--occupied {
  background:
    var(--inventory-purple);
}


.summary-dot--warning {
  background:
    var(--inventory-yellow);
}


.summary-dot--hold {
  background:
    var(--inventory-red);
}


.summary-row--alert strong {
  color:
    var(--inventory-yellow);
}


.summary-row--hold strong {
  color:
    var(--inventory-red);
}


.text-action {
  padding: 0;

  color:
    var(--inventory-primary);

  background: transparent;

  border: 0;

  font-size: 0.72rem;
  font-weight: 700;
}


.summary-view-action {
  display: flex;

  width: 100%;

  justify-content: space-between;

  margin-top: 14px;

  padding-top: 8px;
}


/* =========================================================
   ACTIVITY TABLE
========================================================= */

.table-wrapper {
  overflow-x: auto;

  margin-top: 18px;
}


.activity-table {
  width: 100%;
  min-width: 780px;

  border-collapse: collapse;
}


.activity-table th,
.activity-table td {
  padding:
    12px 9px;

  text-align: left;

  border-bottom:
    1px solid var(--inventory-border);

  font-size: 0.69rem;
}


.activity-table th {
  color:
    var(--inventory-text-muted);

  font-weight: 700;
}


.activity-table td {
  color:
    var(--inventory-text-secondary);
}


.activity-table td:nth-child(2),
.activity-table td:nth-child(3),
.activity-table td:nth-child(4) {
  color:
    var(--inventory-text);

  font-weight: 620;
}


.activity-dot {
  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 7px;

  border-radius: 50%;
}


.activity-dot--green {
  background:
    var(--inventory-green);
}


.activity-dot--blue {
  background:
    var(--inventory-accent);
}


.activity-dot--purple {
  background:
    var(--inventory-purple);
}


/* =========================================================
   WAREHOUSE MAP PREVIEW
========================================================= */

.warehouse-preview {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 15px;

  margin-top: 18px;
}


.warehouse-aisle > strong {
  display: block;

  margin-bottom: 9px;

  text-align: center;

  color:
    var(--inventory-text);

  font-size: 0.73rem;
}


.location-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(22px, 1fr));

  gap: 5px;
}


.location-cell {
  min-height: 28px;

  padding: 0;

  border:
    1px solid rgba(23, 55, 93, 0.08);

  border-radius: 4px;

  transition:
    transform 130ms ease,
    outline 130ms ease,
    box-shadow 130ms ease;
}


.location-cell:hover,
.location-cell.is-selected {
  outline:
    2px solid var(--inventory-primary);

  box-shadow:
    0 5px 12px rgba(23, 55, 93, 0.14);

  transform:
    translateY(-1px);
}


.status-good {
  background: #64bd86;
}


.status-due {
  background: #e2bd56;
}


.status-overdue {
  background: #df8b4e;
}


.status-critical {
  background: #d45f5f;
}


.status-empty {
  background: #c8ced6;
}


.map-zones {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 7px;

  margin-top: 16px;
}


.map-zones span {
  padding:
    7px 5px;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c7d5e6;

  border-radius: 6px;

  text-align: center;

  font-size: 0.62rem;
  font-weight: 750;
  text-transform: uppercase;
}


.map-legend {
  display: flex;
  flex-wrap: wrap;

  gap: 11px;

  margin-top: 14px;

  color:
    var(--inventory-text-muted);

  font-size: 0.6rem;
  font-weight: 650;
}


.map-legend span {
  display: flex;

  align-items: center;

  gap: 5px;
}


.legend-color {
  display: inline-block;

  width: 9px;
  height: 9px;

  border-radius: 2px;
}


.location-detail {
  display: grid;

  gap: 4px;

  margin-top: 16px;

  padding:
    13px 14px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius: 9px;
}


.location-detail strong {
  color:
    var(--inventory-text);

  font-size: 0.72rem;
}


.location-detail span {
  color:
    var(--inventory-text-muted);

  font-size: 0.65rem;
}


/* =========================================================
   WAREHOUSE SETUP NOTICE
========================================================= */

.setup-notice {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 22px;

  padding:
    17px 20px;

  background: #f5f8fc;

  border:
    1px solid #cbd8e8;

  border-radius: 12px;
}


.setup-notice > div {
  display: grid;

  gap: 4px;
}


.setup-notice strong {
  color:
    var(--inventory-primary-dark);

  font-size: 0.78rem;
}


.setup-notice span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.7rem;
}


.setup-notice button {
  display: flex;

  min-height: 40px;

  align-items: center;

  gap: 18px;

  padding:
    9px 14px;

  color:
    var(--inventory-primary);

  background: #ffffff;

  border:
    1px solid #bccde1;

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.72rem;
  font-weight: 700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

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


  .inventory-summary {
    grid-column:
      1 / -1;
  }


  .inventory-secondary-grid {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 760px) {

  .inventory-page {
    padding:
      24px 16px 40px;
  }


  .inventory-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .inventory-heading__actions {
    justify-content:
      flex-start;
  }


  .inventory-main-grid {
    grid-template-columns:
      1fr;
  }


  .inventory-summary {
    grid-column:
      auto;
  }


  .request-flow {
    grid-template-columns:
      1fr;
  }


  .flow-arrow {
    text-align: center;

    transform:
      rotate(90deg);
  }


  .warehouse-preview {
    grid-template-columns:
      1fr;
  }


  .setup-notice {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}
/* =========================================================
   WAREHOUSE SETUP SCREEN
========================================================= */

.warehouse-setup-screen {
  max-width: 1680px;

  margin:
    0 auto;
}


.inventory-page.is-setup-mode
> :not(.warehouse-setup-screen) {
  display: none;
}


.warehouse-setup-screen[hidden] {
  display: none;
}


/* =========================================================
   WAREHOUSE SETUP HEADING
========================================================= */

.warehouse-setup-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 22px;
}


.warehouse-setup-heading h1 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size:
    clamp(1.85rem, 2.5vw, 2.65rem);

  font-weight: 690;
  letter-spacing: -0.04em;
}


.warehouse-setup-heading p {
  margin:
    8px 0 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.96rem;
}


.warehouse-setup-heading__actions {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 10px;
}


/* =========================================================
   PHYSICAL LAYOUT NOTICE
========================================================= */

.physical-layout-notice {
  display: grid;

  grid-template-columns:
    minmax(310px, 1.1fr)
    minmax(440px, 1.3fr)
    auto;

  align-items: center;

  gap: 24px;

  margin-bottom: 22px;

  padding:
    18px 20px;

  background:
    rgba(255, 255, 255, 0.9);

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-medium);

  box-shadow:
    0 10px 30px rgba(28, 48, 76, 0.05);
}


.physical-layout-notice__message {
  display: flex;

  align-items: center;

  gap: 14px;
}


.physical-layout-notice__icon {
  display: grid;

  width: 34px;
  height: 34px;

  flex:
    0 0 34px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    2px solid var(--inventory-accent);

  border-radius: 50%;

  font-size: 0.8rem;
  font-weight: 800;
}


.physical-layout-notice__message > div:last-child {
  display: grid;

  gap: 5px;
}


.physical-layout-notice strong {
  color:
    var(--inventory-text);

  font-size: 0.77rem;
}


.physical-layout-notice span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.68rem;
  line-height: 1.45;
}


.physical-check-list {
  display: flex;
  flex-wrap: wrap;

  gap:
    9px 16px;
}


.physical-check-list span {
  color:
    var(--inventory-green);

  font-size: 0.65rem;
  font-weight: 700;
}


.physical-layout-confirmation {
  display: flex;

  min-height: 38px;

  align-items: center;

  gap: 8px;

  padding:
    8px 11px;

  color:
    var(--inventory-primary-dark);

  background:
    #f8fafc;

  border:
    1px solid var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);

  white-space: nowrap;

  cursor: pointer;
}


.physical-layout-confirmation input {
  width: 16px;
  height: 16px;

  accent-color:
    var(--inventory-green);
}


.physical-layout-confirmation span {
  color:
    var(--inventory-primary-dark);

  font-size: 0.67rem;
  font-weight: 750;
}


/* =========================================================
   SETUP GRID
========================================================= */

.warehouse-setup-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(380px, 0.9fr);

  gap: 22px;
}


.rack-preview-card,
.warehouse-configuration-card {
  padding: 0;

  overflow: hidden;
}


.setup-card-header {
  display: flex;

  min-height: 78px;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding:
    20px 22px 17px;

  border-bottom:
    1px solid var(--inventory-border);
}


.setup-card-header h2 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 1rem;
  font-weight: 700;
}


.setup-card-header p {
  margin:
    6px 0 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.7rem;
}


.setup-card-title {
  display: flex;

  align-items: center;

  gap: 9px;
}


.live-badge {
  padding:
    3px 7px;

  color:
    var(--inventory-green);

  background:
    #edf8f2;

  border:
    1px solid #b8dfc9;

  border-radius: 999px;

  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}


.preview-mode {
  display: flex;

  padding: 3px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius: 8px;
}


.preview-mode__button {
  min-width: 74px;

  padding:
    8px 11px;

  color:
    var(--inventory-text-secondary);

  background: transparent;

  border: 0;

  border-radius: 6px;

  font-size: 0.67rem;
  font-weight: 700;
}


.preview-mode__button.is-active {
  color: #ffffff;

  background:
    var(--inventory-primary-dark);
}


.preview-mode__button:disabled {
  cursor: not-allowed;

  opacity: 0.45;
}


/* =========================================================
   RACK PREVIEW
========================================================= */

.rack-preview-stage {
  display: grid;

  gap: 28px;

  min-height: 500px;

  padding:
    28px 24px;

  overflow: auto;

  background:
    linear-gradient(
      180deg,
      #fbfcfe 0%,
      #f3f6fa 100%
    );
}


.rack-aisle-preview {
  min-width: 620px;
}


.rack-aisle-preview__header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 13px;
}


.rack-aisle-preview__header strong {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding:
    6px 13px;

  color: #ffffff;

  background:
    var(--inventory-primary-dark);

  border-radius: 6px;

  font-size: 0.71rem;
  letter-spacing: 0.04em;
}


.rack-aisle-preview__header span {
  color:
    var(--inventory-text-muted);

  font-size: 0.62rem;
  font-weight: 650;
}


.rack-columns-preview {
  display: grid;

  gap: 8px;

  align-items: stretch;
}


.rack-column-preview {
  display: flex;
  flex-direction: column;

  min-width: 120px;
}


.rack-column-label {
  margin-bottom: 7px;

  color:
    var(--inventory-text-secondary);

  text-align: center;

  font-size: 0.61rem;
  font-weight: 750;
  text-transform: uppercase;
}


.rack-column-structure {
  display: flex;
  flex-direction: column;

  min-height: 330px;

  justify-content: flex-end;

  background:
    linear-gradient(
      90deg,
      var(--inventory-primary-dark) 0 5px,
      transparent 5px calc(100% - 5px),
      var(--inventory-primary-dark) calc(100% - 5px)
    );

  border-bottom:
    6px solid var(--inventory-primary-dark);
}


.rack-level-preview {
  position: relative;

  display: grid;

  flex: 1;

  min-height: 52px;

  align-items: stretch;

  border-bottom:
    7px solid var(--inventory-orange);
}


.rack-position-preview {
  display: grid;

  place-items: center;

  margin:
    4px 2px 0;

  color:
    var(--inventory-primary-dark);

  background:
    rgba(255, 255, 255, 0.76);

  border:
    1px dashed #c6cfda;

  border-radius:
    3px 3px 0 0;

  font-size: 0.56rem;
  font-weight: 760;
}


.rack-level-label {
  position: absolute;

  top: 4px;
  left: 5px;

  z-index: 2;

  display: grid;

  width: 19px;
  height: 19px;

  place-items: center;

  color: #ffffff;

  background:
    var(--inventory-primary);

  border-radius: 4px;

  font-size: 0.52rem;
  font-weight: 800;
}


.rack-color-legend {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 22px;

  padding:
    15px 22px;

  border-top:
    1px solid var(--inventory-border);
}


.rack-color-legend span {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--inventory-text-secondary);

  font-size: 0.65rem;
  font-weight: 650;
}


.rack-color {
  display: inline-block;

  width: 15px;
  height: 15px;

  border-radius: 3px;
}


.rack-color--upright {
  background:
    var(--inventory-primary-dark);
}


.rack-color--beam {
  background:
    var(--inventory-orange);
}


.level-rule-note {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap: 7px;

  margin:
    0 18px 18px;

  padding:
    11px 13px;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c7d5e6;

  border-radius: 8px;

  font-size: 0.63rem;
}


.level-rule-note strong {
  color:
    var(--inventory-primary-dark);
}


/* =========================================================
   CONFIGURATION CONTROLS
========================================================= */

.configuration-controls {
  padding:
    0 20px;
}


.configuration-row {
  display: flex;

  min-height: 78px;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  border-bottom:
    1px solid var(--inventory-border);
}


.configuration-row__content {
  display: flex;

  min-width: 0;

  align-items: center;

  gap: 12px;
}


.configuration-icon {
  display: grid;

  width: 36px;
  height: 36px;

  flex:
    0 0 36px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border-radius: 9px;

  font-size: 0.7rem;
  font-weight: 850;
}


.configuration-row__content > div:last-child {
  display: grid;

  gap: 4px;
}


.configuration-row strong {
  color:
    var(--inventory-text);

  font-size: 0.73rem;
}


.configuration-row span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.63rem;
  line-height: 1.4;
}


.configuration-row small {
  color:
    var(--inventory-primary);

  font-size: 0.58rem;
  font-weight: 650;
}


.stepper-control {
  display: grid;

  grid-template-columns:
    38px 54px 38px;

  flex:
    0 0 auto;

  overflow: hidden;

  border:
    1px solid var(--inventory-border-strong);

  border-radius: 8px;
}


.stepper-control button,
.stepper-control output {
  display: grid;

  min-height: 38px;

  place-items: center;

  color:
    var(--inventory-primary-dark);

  background:
    #ffffff;

  border: 0;

  font-size: 0.78rem;
  font-weight: 760;
}


.stepper-control button {
  transition:
    background 130ms ease;
}


.stepper-control button:hover {
  background:
    var(--inventory-primary-soft);
}


.stepper-control output {
  border-left:
    1px solid var(--inventory-border);

  border-right:
    1px solid var(--inventory-border);
}


/* =========================================================
   CONFIGURATION SUMMARY
========================================================= */

.configuration-summary {
  margin:
    18px 20px 0;

  padding:
    15px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius: 10px;
}


.configuration-summary h3 {
  margin:
    0 0 14px;

  color:
    var(--inventory-text);

  font-size: 0.73rem;
}


.configuration-summary__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


.configuration-summary__grid > div {
  display: grid;

  gap: 7px;

  padding:
    0 8px;

  text-align: center;

  border-right:
    1px solid var(--inventory-border);
}


.configuration-summary__grid > div:last-child {
  border-right: 0;
}


.configuration-summary__grid span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.56rem;
  line-height: 1.35;
}


.configuration-summary__grid strong {
  color:
    var(--inventory-primary-dark);

  font-size: 1.28rem;
}


.generate-addresses-button {
  width:
    calc(100% - 40px);

  min-height: 46px;

  margin:
    18px 20px 0;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      var(--inventory-primary-dark),
      var(--inventory-primary)
    );

  border:
    1px solid var(--inventory-primary);

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.75rem;
  font-weight: 760;
}


.generate-addresses-button:disabled {
  color:
    var(--inventory-text-muted);

  background:
    #e5e9ef;

  border-color:
    #d4dae2;

  cursor: not-allowed;
}


.generate-addresses-note {
  margin:
    10px 20px 20px;

  color:
    var(--inventory-text-muted);

  text-align: center;

  font-size: 0.61rem;
  line-height: 1.45;
}


/* =========================================================
   SETUP WARNING
========================================================= */

.warehouse-setup-warning {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 20px;

  padding:
    15px 18px;

  background:
    #fff9ef;

  border:
    1px solid #ecd49b;

  border-radius:
    var(--inventory-radius-medium);
}


.warehouse-setup-warning strong {
  color:
    #8c5c10;

  font-size: 0.72rem;
}


.warehouse-setup-warning span {
  color:
    #8b7554;

  font-size: 0.67rem;
}


/* =========================================================
   WAREHOUSE SETUP RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

  .physical-layout-notice {
    grid-template-columns:
      1fr;
  }


  .physical-layout-confirmation {
    width: fit-content;
  }


  .warehouse-setup-grid {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 760px) {

  .warehouse-setup-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .warehouse-setup-heading__actions {
    justify-content:
      flex-start;
  }


  .configuration-row {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      15px 0;
  }


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

    gap: 16px 0;
  }


  .configuration-summary__grid > div:nth-child(2) {
    border-right: 0;
  }


  .warehouse-setup-warning {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}

/* =========================================================
   AISLE DEFAULT / CUSTOM CONFIGURATION
========================================================= */

.rack-aisle-preview {
  padding:
    16px;

  background:
    rgba(255, 255, 255, 0.72);

  border:
    1px solid var(--inventory-border);

  border-radius:
    12px;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}


.rack-aisle-preview.is-customized {
  border-color:
    #dba56f;

  box-shadow:
    inset 4px 0 0 var(--inventory-orange);
}


.rack-aisle-preview__header {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 18px;

  margin-bottom: 15px;
}


.rack-aisle-identity {
  display: flex;

  align-items: center;

  gap: 9px;
}


.rack-aisle-identity > strong {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding:
    6px 13px;

  color: #ffffff;

  background:
    var(--inventory-primary-dark);

  border-radius: 6px;

  font-size: 0.71rem;
  letter-spacing: 0.04em;
}


.aisle-status-badge {
  padding:
    4px 8px;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c5d4e5;

  border-radius: 999px;

  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
}


.aisle-status-badge--custom {
  color:
    #9b541f;

  background:
    #fff1e5;

  border-color:
    #edc39e;
}


.rack-aisle-summary {
  display: flex;

  flex-wrap: wrap;

  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  color:
    var(--inventory-text-muted);

  font-size: 0.62rem;
  font-weight: 650;
}


.rack-aisle-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}


.aisle-default-control {
  display: flex;

  min-height: 34px;

  align-items: center;

  gap: 7px;

  padding:
    7px 10px;

  color:
    var(--inventory-primary-dark);

  background:
    #f8fafc;

  border:
    1px solid var(--inventory-border-strong);

  border-radius: 7px;

  cursor: pointer;
}


.aisle-default-control input {
  width: 15px;
  height: 15px;

  accent-color:
    var(--inventory-primary);
}


.aisle-default-control span {
  font-size: 0.61rem;
  font-weight: 720;
  white-space: nowrap;
}


.aisle-action-button {
  min-height: 34px;

  padding:
    7px 11px;

  color:
    var(--inventory-primary);

  background:
    #ffffff;

  border:
    1px solid #b9cadd;

  border-radius: 7px;

  font-size: 0.61rem;
  font-weight: 750;

  transition:
    background 140ms ease,
    border-color 140ms ease;
}


.aisle-action-button:hover {
  background:
    var(--inventory-primary-soft);

  border-color:
    var(--inventory-primary);
}


.aisle-action-button--reset {
  color:
    #9b541f;

  border-color:
    #e3b58d;
}


.aisle-action-button--reset:hover {
  background:
    #fff1e5;

  border-color:
    var(--inventory-orange);
}


/* =========================================================
   AISLE CUSTOMIZATION PANEL
========================================================= */

.aisle-customization-panel {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 18px;

  padding:
    13px;

  background:
    #fff8f2;

  border:
    1px solid #edc9a8;

  border-radius: 9px;
}


.aisle-custom-setting {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    8px 10px;

  background:
    rgba(255, 255, 255, 0.85);

  border:
    1px solid #edd6c1;

  border-radius: 7px;
}


.aisle-custom-setting > span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.62rem;
  font-weight: 700;
}


.aisle-custom-stepper {
  display: grid;

  grid-template-columns:
    30px 38px 30px;

  overflow: hidden;

  border:
    1px solid #d9b58f;

  border-radius: 6px;
}


.aisle-custom-stepper button,
.aisle-custom-stepper output {
  display: grid;

  min-height: 30px;

  place-items: center;

  color:
    var(--inventory-primary-dark);

  background:
    #ffffff;

  border: 0;

  font-size: 0.67rem;
  font-weight: 760;
}


.aisle-custom-stepper button:hover {
  background:
    #fff1e5;
}


.aisle-custom-stepper output {
  border-left:
    1px solid #e1c4a7;

  border-right:
    1px solid #e1c4a7;
}


/* =========================================================
   AISLE CUSTOM RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .rack-aisle-preview__header {
    grid-template-columns:
      1fr;
  }


  .rack-aisle-summary {
    justify-content:
      flex-start;
  }


  .rack-aisle-actions {
    flex-wrap: wrap;
  }


  .aisle-customization-panel {
    grid-template-columns:
      1fr;
  }

}
/* =========================================================
   AISLE SAVE & LOCK
========================================================= */

.rack-aisle-preview.is-locked {
  border-color:
    #9bb8d8;

  box-shadow:
    inset 4px 0 0
    var(--inventory-primary);
}


.aisle-status-badge--locked {
  color:
    #235b45;

  background:
    #eaf6ef;

  border-color:
    #acd3bc;
}


.aisle-action-button--save {
  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      var(--inventory-primary-dark),
      var(--inventory-primary)
    );

  border-color:
    var(--inventory-primary);
}


.aisle-action-button--save:hover {
  color: #ffffff;

  background:
    var(--inventory-primary-dark);

  border-color:
    var(--inventory-primary-dark);
}


.rack-aisle-preview.is-locked
.rack-aisle-summary {
  color:
    var(--inventory-primary-dark);
}


.rack-aisle-preview.is-locked
.rack-columns-preview {
  margin-top: 4px;
}

/* =========================================================
   GENERATED ADDRESS RESULT
========================================================= */

.generated-address-result {
  margin:
    18px 20px 20px;

  padding:
    16px;

  background:
    #eef8f2;

  border:
    1px solid #b9dcc7;

  border-radius:
    10px;
}


.generated-address-result[hidden] {
  display: none;
}


.generated-address-result__header {
  display: flex;

  align-items: center;

  gap: 11px;
}


.generated-address-result__icon {
  display: grid;

  width: 34px;
  height: 34px;

  flex:
    0 0 34px;

  place-items: center;

  color: #ffffff;

  background:
    var(--inventory-green);

  border-radius: 50%;

  font-size: 0.8rem;
  font-weight: 850;
}


.generated-address-result__header > div:last-child {
  display: grid;

  gap: 4px;
}


.generated-address-result__header strong {
  color:
    #235d43;

  font-size: 0.73rem;
}


.generated-address-result__header span {
  color:
    #648071;

  font-size: 0.61rem;
}


.generated-address-result__summary {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 15px;
}


.generated-address-result__summary > div {
  display: grid;

  gap: 5px;

  padding:
    11px;

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid #cde4d6;

  border-radius: 8px;
}


.generated-address-result__summary span {
  color:
    var(--inventory-text-muted);

  font-size: 0.56rem;
  font-weight: 680;
}


.generated-address-result__summary strong {
  color:
    var(--inventory-primary-dark);

  font-size: 0.75rem;
}


.generated-address-result > p {
  margin:
    13px 0 0;

  color:
    #5d7668;

  font-size: 0.6rem;
  line-height: 1.5;
}


/* =========================================================
   COMPLETED SETUP NOTICE
========================================================= */

.setup-notice.is-complete {
  background:
    #eef8f2;

  border-color:
    #b9dcc7;
}


.setup-notice.is-complete strong {
  color:
    #235d43;
}


.setup-notice.is-complete button {
  color:
    #235d43;

  border-color:
    #a9ceb8;
}


@media (max-width: 760px) {

  .generated-address-result__summary {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   ADDRESS LIST SCREEN
========================================================= */

.address-list-screen {
  max-width: 1680px;

  margin:
    0 auto;
}


.address-list-screen[hidden] {
  display: none;
}


.inventory-page.is-address-list-mode
> :not(.address-list-screen) {
  display: none;
}


/* =========================================================
   ADDRESS LIST HEADING
========================================================= */

.address-list-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 22px;
}


.address-list-heading h1 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size:
    clamp(1.85rem, 2.5vw, 2.65rem);

  font-weight: 690;
  letter-spacing: -0.04em;
}


.address-list-heading p {
  margin:
    8px 0 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.96rem;
}


.address-list-heading__actions {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 10px;
}


/* =========================================================
   ADDRESS SUMMARY
========================================================= */

.address-list-summary {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}


.address-summary-card {
  display: flex;

  min-height: 82px;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    17px 19px;

  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-medium);

  box-shadow:
    0 10px 28px rgba(28, 48, 76, 0.05);
}


.address-summary-card span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.7rem;
  font-weight: 680;
}


.address-summary-card strong {
  color:
    var(--inventory-primary-dark);

  font-size: 1.55rem;
}


.address-summary-card__available {
  color:
    var(--inventory-green) !important;
}


.address-summary-card__occupied {
  color:
    var(--inventory-purple) !important;
}


.address-summary-card__inactive {
  color:
    var(--inventory-gray) !important;
}


/* =========================================================
   ADDRESS LIST WORKSPACE
========================================================= */

.address-list-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1.72fr)
    minmax(330px, 0.68fr);

  align-items: start;

  gap: 22px;
}


.address-directory-card,
.address-detail-card {
  padding: 0;

  overflow: hidden;
}


.address-directory-header,
.address-detail-card__header {
  display: flex;

  min-height: 78px;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding:
    20px 22px 17px;

  border-bottom:
    1px solid var(--inventory-border);
}


.address-directory-header h2,
.address-detail-card__header h2 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 1rem;
  font-weight: 700;
}


.address-result-count {
  display: inline-flex;

  min-height: 27px;

  align-items: center;

  padding:
    5px 9px;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c5d5e7;

  border-radius: 999px;

  font-size: 0.62rem;
  font-weight: 760;
}


/* =========================================================
   ADDRESS FILTER BAR
========================================================= */

.address-filter-bar {
  display: grid;

  grid-template-columns:
    minmax(230px, 1.4fr)
    repeat(3, minmax(120px, 0.65fr))
    auto;

  align-items: end;

  gap: 12px;

  padding:
    17px 20px;

  background:
    var(--inventory-surface-soft);

  border-bottom:
    1px solid var(--inventory-border);
}


.address-search-field,
.address-filter-field {
  display: grid;

  gap: 7px;
}


.address-filter-label {
  color:
    var(--inventory-text-muted);

  font-size: 0.59rem;
  font-weight: 740;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


.address-search-control {
  display: flex;

  min-height: 40px;

  align-items: center;

  gap: 9px;

  padding:
    0 12px;

  background: #ffffff;

  border:
    1px solid var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}


.address-search-control:focus-within {
  border-color:
    var(--inventory-primary);

  box-shadow:
    0 0 0 3px rgba(37, 79, 130, 0.1);
}


.address-search-control svg {
  width: 17px;
  height: 17px;

  flex:
    0 0 17px;

  fill: none;

  color:
    var(--inventory-text-muted);

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}


.address-search-control input {
  width: 100%;

  padding: 0;

  color:
    var(--inventory-text);

  background: transparent;

  border: 0;
  outline: 0;

  font-size: 0.72rem;
}


.address-filter-field select {
  min-height: 40px;

  padding:
    8px 11px;

  color:
    var(--inventory-text);

  background: #ffffff;

  border:
    1px solid var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);

  outline: none;

  font-size: 0.7rem;
}


.address-filter-field select:focus {
  border-color:
    var(--inventory-primary);

  box-shadow:
    0 0 0 3px rgba(37, 79, 130, 0.1);
}


.address-filter-reset {
  min-height: 40px;

  padding:
    8px 13px;

  color:
    var(--inventory-primary);

  background: #ffffff;

  border:
    1px solid #b9c9dc;

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.67rem;
  font-weight: 720;
}


.address-filter-reset:hover {
  background:
    var(--inventory-primary-soft);

  border-color:
    var(--inventory-primary);
}


/* =========================================================
   ADDRESS TABLE
========================================================= */

.address-table-wrapper {
  max-height:
    min(620px, calc(100vh - 315px));

  overflow: auto;
}


.address-list-table {
  width: 100%;
  min-width: 790px;

  border-collapse: collapse;
}


.address-list-table th,
.address-list-table td {
  padding:
    13px 14px;

  text-align: left;

  border-bottom:
    1px solid var(--inventory-border);

  font-size: 0.68rem;
}


.address-list-table th {
  position: sticky;
  top: 0;
  z-index: 2;

  color:
    var(--inventory-text-muted);

  background:
    #ffffff;

  font-weight: 740;
}


.address-list-table td {
  color:
    var(--inventory-text-secondary);
}


.address-list-table td:first-child {
  color:
    var(--inventory-primary-dark);

  font-weight: 760;
  letter-spacing: 0.015em;
}


.address-list-row {
  cursor: pointer;

  transition:
    background 130ms ease;
}


.address-list-row:hover {
  background:
    #f5f8fc;
}


.address-list-row.is-selected {
  background:
    var(--inventory-primary-soft);

  box-shadow:
    inset 3px 0 0
    var(--inventory-primary);
}


.configuration-badge {
  display: inline-flex;

  min-height: 24px;

  align-items: center;

  padding:
    4px 8px;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c7d5e6;

  border-radius: 999px;

  font-size: 0.57rem;
  font-weight: 760;
  text-transform: capitalize;
}


.configuration-badge--custom {
  color:
    #6948a5;

  background:
    #f0eafb;

  border-color:
    #d3c3ef;
}


/* =========================================================
   ADDRESS STATUS BADGES
========================================================= */

.address-status-badge {
  display: inline-flex;

  min-height: 25px;

  align-items: center;

  gap: 6px;

  padding:
    4px 9px;

  border:
    1px solid transparent;

  border-radius: 999px;

  font-size: 0.58rem;
  font-weight: 780;
  text-transform: capitalize;
}


.address-status-badge::before {
  width: 7px;
  height: 7px;

  content: "";

  background: currentColor;

  border-radius: 50%;
}


.address-status-badge--available {
  color:
    #347d59;

  background:
    #edf8f2;

  border-color:
    #b8dec8;
}


.address-status-badge--occupied {
  color:
    #6b4eaa;

  background:
    #f1ecfb;

  border-color:
    #d4c7ed;
}


.address-status-badge--inactive {
  color:
    #737c88;

  background:
    #f1f3f5;

  border-color:
    #d7dce2;
}


.address-status-badge--neutral {
  color:
    var(--inventory-text-muted);

  background:
    var(--inventory-surface-soft);

  border-color:
    var(--inventory-border);
}


/* =========================================================
   EMPTY AND NO-RESULT STATES
========================================================= */

.address-empty-state,
.address-no-results {
  display: grid;

  justify-items: center;

  gap: 8px;

  padding:
    55px 24px;

  text-align: center;
}


.address-empty-state[hidden],
.address-no-results[hidden] {
  display: none;
}


.address-empty-state__icon {
  display: grid;

  width: 46px;
  height: 46px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c2d2e5;

  border-radius: 50%;

  font-size: 0.75rem;
  font-weight: 800;
}


.address-empty-state strong,
.address-no-results strong {
  color:
    var(--inventory-text);

  font-size: 0.78rem;
}


.address-empty-state span,
.address-no-results span {
  max-width: 410px;

  color:
    var(--inventory-text-muted);

  font-size: 0.67rem;
  line-height: 1.55;
}


.address-empty-state
.primary-card-action {
  min-width: 210px;

  margin-top: 8px;
}


/* =========================================================
   ADDRESS DETAIL
========================================================= */

.address-detail-card {
  position: sticky;
  top: 94px;
}


.address-detail-empty {
  display: grid;

  justify-items: center;

  gap: 8px;

  padding:
    70px 25px;

  text-align: center;
}


.address-detail-empty__icon {
  display: grid;

  width: 50px;
  height: 50px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c4d3e5;

  border-radius: 14px;

  font-size: 0.61rem;
  font-weight: 820;
}


.address-detail-empty strong {
  color:
    var(--inventory-text);

  font-size: 0.78rem;
}


.address-detail-empty span {
  max-width: 250px;

  color:
    var(--inventory-text-muted);

  font-size: 0.66rem;
  line-height: 1.55;
}


.address-detail-content {
  padding:
    20px;
}


.address-detail-content[hidden] {
  display: none;
}


.address-detail-location {
  display: grid;

  gap: 6px;

  padding:
    16px;

  background:
    linear-gradient(
      135deg,
      var(--inventory-primary-soft),
      #f8fafc
    );

  border:
    1px solid #c5d4e6;

  border-radius:
    var(--inventory-radius-medium);
}


.address-detail-location span,
.address-detail-grid span,
.address-detail-metadata span {
  color:
    var(--inventory-text-muted);

  font-size: 0.57rem;
  font-weight: 700;
  text-transform: uppercase;
}


.address-detail-location strong {
  color:
    var(--inventory-primary-dark);

  font-size: 1.2rem;
  letter-spacing: 0.025em;
}


.address-detail-location small {
  color:
    var(--inventory-text-secondary);

  font-size: 0.59rem;
  line-height: 1.45;
}


.address-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 14px;
}


.address-detail-grid > div {
  display: grid;

  gap: 5px;

  padding:
    12px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-small);
}


.address-detail-grid strong {
  color:
    var(--inventory-text);

  font-size: 0.7rem;
}


.address-detail-inventory {
  margin-top: 19px;

  padding-top: 18px;

  border-top:
    1px solid var(--inventory-border);
}


.address-detail-section-title {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.address-detail-section-title h3 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 0.8rem;
}


.address-detail-section-title > strong {
  color:
    var(--inventory-primary);

  font-size: 0.62rem;
}


.address-inventory-empty {
  display: grid;

  gap: 6px;

  margin-top: 13px;

  padding:
    15px;

  background:
    var(--inventory-surface-soft);

  border:
    1px dashed var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);
}


.address-inventory-empty strong {
  color:
    var(--inventory-text-secondary);

  font-size: 0.68rem;
}


.address-inventory-empty span {
  color:
    var(--inventory-text-muted);

  font-size: 0.61rem;
  line-height: 1.5;
}


.address-detail-metadata {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 18px;

  padding-top: 14px;

  border-top:
    1px solid var(--inventory-border);
}


.address-detail-metadata strong {
  color:
    var(--inventory-text-secondary);

  font-size: 0.61rem;
}


/* =========================================================
   ADDRESS LIST RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

  .address-filter-bar {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


  .address-search-field {
    grid-column:
      1 / -1;
  }


  .address-filter-reset {
    grid-column:
      4;
  }


  .address-list-workspace {
    grid-template-columns:
      1fr;
  }


  .address-detail-card {
    position: static;
  }

}


@media (max-width: 760px) {

  .address-list-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .address-list-heading__actions {
    justify-content:
      flex-start;
  }


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


  .address-filter-bar {
    grid-template-columns:
      1fr;
  }


  .address-search-field,
  .address-filter-reset {
    grid-column:
      auto;
  }


  .address-detail-grid {
    grid-template-columns:
      1fr;
  }

}
/* =========================================================
   WAREHOUSE MAP VIEW SCREEN
========================================================= */

.warehouse-map-screen {
  max-width: 1680px;

  margin:
    0 auto;
}


.warehouse-map-screen[hidden] {
  display: none;
}


.inventory-page.is-map-mode
> :not(.warehouse-map-screen) {
  display: none;
}


/* =========================================================
   MAP HEADING
========================================================= */

.warehouse-map-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 22px;
}


.warehouse-map-heading h1 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size:
    clamp(1.85rem, 2.5vw, 2.65rem);

  font-weight: 690;
  letter-spacing: -0.04em;
}


.warehouse-map-heading p {
  margin:
    8px 0 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.96rem;
}


.warehouse-map-heading__actions {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 10px;
}


/* =========================================================
   MAP CONTROL BAR
========================================================= */

.warehouse-map-control-bar {
  display: grid;

  grid-template-columns:
    minmax(320px, 1.4fr)
    minmax(170px, 0.42fr)
    auto;

  align-items: end;

  gap: 14px;

  margin-bottom: 16px;

  padding:
    17px 18px;

  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-medium);

  box-shadow:
    0 10px 30px rgba(28, 48, 76, 0.05);
}


.warehouse-map-search,
.warehouse-map-section-select,
.warehouse-map-zoom-controls {
  display: grid;

  gap: 7px;
}


.warehouse-map-control-label {
  color:
    var(--inventory-text-muted);

  font-size: 0.59rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.warehouse-map-search__control {
  display: flex;

  min-height: 42px;

  align-items: center;

  gap: 9px;

  padding:
    0 12px;

  background: #ffffff;

  border:
    1px solid var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}


.warehouse-map-search__control:focus-within {
  border-color:
    var(--inventory-primary);

  box-shadow:
    0 0 0 3px rgba(37, 79, 130, 0.1);
}


.warehouse-map-search__control svg {
  width: 18px;
  height: 18px;

  flex:
    0 0 18px;

  fill: none;

  color:
    var(--inventory-text-muted);

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}


.warehouse-map-search__control input {
  width: 100%;

  padding: 0;

  color:
    var(--inventory-text);

  background: transparent;

  border: 0;
  outline: 0;

  font-size: 0.73rem;
}


.warehouse-map-search__control button {
  width: 25px;
  height: 25px;

  padding: 0;

  color:
    var(--inventory-text-muted);

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius: 50%;
}


.warehouse-map-search__control button[hidden] {
  display: none;
}


.warehouse-map-section-select select {
  min-height: 42px;

  padding:
    8px 11px;

  color:
    var(--inventory-text);

  background: #ffffff;

  border:
    1px solid var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);

  outline: none;

  font-size: 0.71rem;
}


.warehouse-map-zoom-buttons {
  display: flex;

  align-items: center;

  gap: 7px;
}


.warehouse-map-zoom-buttons button {
  min-width: 40px;
  min-height: 42px;

  padding:
    8px 11px;

  color:
    var(--inventory-primary);

  background: #ffffff;

  border:
    1px solid #b9c9dc;

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.71rem;
  font-weight: 750;
}


.warehouse-map-zoom-buttons button:hover {
  background:
    var(--inventory-primary-soft);

  border-color:
    var(--inventory-primary);
}


.warehouse-map-zoom-buttons output {
  min-width: 54px;

  color:
    var(--inventory-primary-dark);

  text-align: center;

  font-size: 0.67rem;
  font-weight: 760;
}


.warehouse-map-control-button {
  min-width: 70px !important;
}


/* =========================================================
   MAP SEARCH FEEDBACK
========================================================= */

.warehouse-map-search-feedback {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 16px;

  padding:
    13px 16px;

  background:
    #edf5fd;

  border:
    1px solid #bad1e9;

  border-radius:
    var(--inventory-radius-small);
}


.warehouse-map-search-feedback[hidden] {
  display: none;
}


.warehouse-map-search-feedback > div {
  display: grid;

  gap: 4px;
}


.warehouse-map-search-feedback strong {
  color:
    var(--inventory-primary-dark);

  font-size: 0.72rem;
}


.warehouse-map-search-feedback span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.65rem;
}


.warehouse-map-search-feedback button {
  min-height: 34px;

  padding:
    7px 11px;

  color: #ffffff;

  background:
    var(--inventory-primary);

  border: 0;

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.64rem;
  font-weight: 730;
}


/* =========================================================
   MAP WORKSPACE
========================================================= */

.warehouse-map-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1.78fr)
    minmax(330px, 0.62fr);

  align-items: start;

  gap: 22px;
}


.warehouse-map-card,
.warehouse-map-detail-card {
  padding: 0;

  overflow: hidden;
}


.warehouse-map-card__header,
.warehouse-map-detail-card__header {
  display: flex;

  min-height: 78px;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding:
    20px 22px 17px;

  border-bottom:
    1px solid var(--inventory-border);
}


.warehouse-map-card__header h2,
.warehouse-map-detail-card__header h2 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 1rem;
  font-weight: 700;
}


.warehouse-map-status-summary {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 10px 14px;

  color:
    var(--inventory-text-muted);

  font-size: 0.6rem;
  font-weight: 650;
}


.warehouse-map-status-summary span {
  display: flex;

  align-items: center;

  gap: 5px;
}


.warehouse-map-key {
  width: 9px;
  height: 9px;

  border-radius: 3px;
}


.warehouse-map-key--available {
  background:
    #d9e4f0;
}


.warehouse-map-key--occupied {
  background:
    var(--inventory-purple);
}


.warehouse-map-key--inactive {
  background:
    var(--inventory-gray);
}


.warehouse-map-key--match {
  background:
    #23b8d1;

  box-shadow:
    0 0 0 3px rgba(35, 184, 209, 0.17);
}


/* =========================================================
   STATIC ZONE LABELS
========================================================= */

.warehouse-map-zones {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 9px;

  padding:
    14px 16px;

  background:
    var(--inventory-surface-soft);

  border-bottom:
    1px solid var(--inventory-border);
}


.warehouse-map-zone {
  display: grid;

  gap: 4px;

  padding:
    10px 12px;

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-small);
}


.warehouse-map-zone span {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}


.warehouse-map-zone strong {
  color:
    var(--inventory-text-secondary);

  font-size: 0.61rem;
  font-weight: 650;
}


.warehouse-map-zone--receiving {
  color:
    #347d59;

  background:
    #eef8f2;

  border-color:
    #bddfcb;
}


.warehouse-map-zone--shared {
  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border-color:
    #c6d5e7;
}


.warehouse-map-zone--shipping {
  color:
    #795daf;

  background:
    #f2eef9;

  border-color:
    #d7ccef;
}


/* =========================================================
   MAP VIEWPORT
========================================================= */

.warehouse-map-empty {
  display: grid;

  min-height: 500px;

  place-items: center;
  align-content: center;

  gap: 9px;

  padding:
    30px;

  text-align: center;
}


.warehouse-map-empty[hidden] {
  display: none;
}


.warehouse-map-empty__icon {
  display: grid;

  width: 54px;
  height: 54px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #bfd0e4;

  border-radius: 15px;

  font-size: 0.62rem;
  font-weight: 830;
}


.warehouse-map-empty strong {
  color:
    var(--inventory-text);

  font-size: 0.78rem;
}


.warehouse-map-empty span {
  color:
    var(--inventory-text-muted);

  font-size: 0.66rem;
}


.warehouse-map-viewport {
  position: relative;

  height:
    min(650px, calc(100vh - 300px));

  min-height: 500px;

  overflow: hidden;

  cursor: grab;

  background:
    linear-gradient(
      rgba(37, 79, 130, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(37, 79, 130, 0.035) 1px,
      transparent 1px
    ),
    #f6f8fb;

  background-size:
    24px 24px;

  user-select: none;
}


.warehouse-map-viewport[hidden] {
  display: none;
}


.warehouse-map-viewport.is-dragging {
  cursor: grabbing;
}


.warehouse-map-canvas {
  position: absolute;

  top: 0;
  left: 0;

  display: flex;

  align-items: flex-start;

  gap: 34px;

  width: max-content;
  min-width: max-content;

  padding:
    44px;

  transform-origin:
    0 0;

  will-change:
    transform;
}


/* =========================================================
   AISLE MAP
========================================================= */

.warehouse-map-aisle {
  display: grid;

  min-width: 260px;

  gap: 12px;

  padding:
    15px;

  background:
    rgba(255, 255, 255, 0.96);

  border:
    1px solid var(--inventory-border-strong);

  border-radius:
    12px;

  box-shadow:
    0 13px 32px rgba(28, 48, 76, 0.08);
}


.warehouse-map-aisle__header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--inventory-border);
}


.warehouse-map-aisle__header strong {
  color:
    var(--inventory-primary-dark);

  font-size: 0.76rem;
  letter-spacing: 0.04em;
}


.warehouse-map-aisle__header span {
  color:
    var(--inventory-text-muted);

  font-size: 0.57rem;
  font-weight: 650;
}


.warehouse-map-columns {
  display: flex;

  align-items: flex-end;

  gap: 9px;
}


.warehouse-map-column {
  display: grid;

  min-width: 96px;

  gap: 6px;
}


.warehouse-map-column__label {
  color:
    var(--inventory-text-secondary);

  text-align: center;

  font-size: 0.58rem;
  font-weight: 750;
}


.warehouse-map-levels {
  display: flex;
  flex-direction: column-reverse;

  gap: 5px;

  padding:
    6px;

  background:
    #edf1f6;

  border:
    2px solid #4e5e72;

  border-radius: 5px;
}


.warehouse-map-level {
  display: grid;

  grid-template-columns:
    21px 1fr;

  align-items: center;

  gap: 5px;
}


.warehouse-map-level__label {
  color:
    var(--inventory-text-muted);

  text-align: center;

  font-size: 0.54rem;
  font-weight: 800;
}


.warehouse-map-positions {
  display: grid;

  gap: 4px;
}


.warehouse-map-address {
  display: grid;

  min-width: 57px;
  min-height: 31px;

  place-items: center;

  padding:
    4px;

  color:
    var(--inventory-primary-dark);

  background:
    #dce7f1;

  border:
    1px solid #b9c9da;

  border-radius: 4px;

  font-size: 0.48rem;
  font-weight: 760;

  transition:
    transform 130ms ease,
    border-color 130ms ease,
    box-shadow 130ms ease,
    background 130ms ease;
}


.warehouse-map-address:hover {
  border-color:
    var(--inventory-primary);

  box-shadow:
    0 4px 10px rgba(23, 55, 93, 0.17);

  transform:
    translateY(-1px);
}


.warehouse-map-address--occupied {
  color: #ffffff;

  background:
    var(--inventory-purple);

  border-color:
    #6948a7;
}


.warehouse-map-address--inactive {
  color:
    #ffffff;

  background:
    var(--inventory-gray);

  border-color:
    #939da9;
}


.warehouse-map-address.is-selected {
  border-color:
    #163c69;

  box-shadow:
    0 0 0 3px rgba(37, 79, 130, 0.25);
}


.warehouse-map-address.is-search-match {
  color:
    #073b45;

  background:
    #65d5e6;

  border-color:
    #159cb2;

  box-shadow:
    0 0 0 4px rgba(35, 184, 209, 0.23),
    0 0 18px rgba(35, 184, 209, 0.42);
}


/* Zoom-level information control */

.warehouse-map-screen[data-map-detail="overview"]
.warehouse-map-address {
  color: transparent;

  font-size: 0;
}


.warehouse-map-screen[data-map-detail="overview"]
.warehouse-map-level__label,
.warehouse-map-screen[data-map-detail="overview"]
.warehouse-map-column__label {
  opacity: 0;
}


.warehouse-map-screen[data-map-detail="medium"]
.warehouse-map-address {
  font-size: 0;
}


.warehouse-map-screen[data-map-detail="medium"]
.warehouse-map-address::after {
  content:
    attr(data-position);

  color:
    currentColor;

  font-size: 0.51rem;
}


/* =========================================================
   FLOOR REFERENCE
========================================================= */

.warehouse-map-floor {
  display: grid;

  min-height: 35px;

  place-items: center;

  color:
    var(--inventory-text-secondary);

  background:
    repeating-linear-gradient(
      135deg,
      #eef1f5,
      #eef1f5 7px,
      #e5e9ee 7px,
      #e5e9ee 14px
    );

  border:
    1px dashed #aeb8c5;

  border-radius: 5px;

  font-size: 0.55rem;
  font-weight: 750;
}


/* =========================================================
   MAP DETAIL PANEL
========================================================= */

.warehouse-map-detail-card {
  position: sticky;
  top: 94px;
}


.warehouse-map-detail-empty {
  display: grid;

  justify-items: center;

  gap: 8px;

  padding:
    70px 25px;

  text-align: center;
}


.warehouse-map-detail-empty__icon {
  display: grid;

  width: 50px;
  height: 50px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid #c4d3e5;

  border-radius: 14px;

  font-size: 0.6rem;
  font-weight: 820;
}


.warehouse-map-detail-empty strong {
  color:
    var(--inventory-text);

  font-size: 0.78rem;
}


.warehouse-map-detail-empty span {
  max-width: 260px;

  color:
    var(--inventory-text-muted);

  font-size: 0.66rem;
  line-height: 1.55;
}


.warehouse-map-detail-content {
  padding:
    20px;
}


.warehouse-map-detail-content[hidden] {
  display: none;
}


.warehouse-map-detail-address {
  display: grid;

  gap: 6px;

  padding:
    16px;

  background:
    linear-gradient(
      135deg,
      var(--inventory-primary-soft),
      #f8fafc
    );

  border:
    1px solid #c5d4e6;

  border-radius:
    var(--inventory-radius-medium);
}


.warehouse-map-detail-address span,
.warehouse-map-detail-grid span {
  color:
    var(--inventory-text-muted);

  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
}


.warehouse-map-detail-address strong {
  color:
    var(--inventory-primary-dark);

  font-size: 1.15rem;
  letter-spacing: 0.025em;
}


.warehouse-map-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 14px;
}


.warehouse-map-detail-grid > div {
  display: grid;

  gap: 5px;

  padding:
    12px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid var(--inventory-border);

  border-radius:
    var(--inventory-radius-small);
}


.warehouse-map-detail-grid strong {
  color:
    var(--inventory-text);

  font-size: 0.69rem;
}


.warehouse-map-item-panel {
  margin-top: 19px;

  padding-top: 18px;

  border-top:
    1px solid var(--inventory-border);
}


.warehouse-map-item-panel__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.warehouse-map-item-panel__header h3 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 0.8rem;
}


.warehouse-map-item-panel__header > strong {
  color:
    var(--inventory-primary);

  font-size: 0.61rem;
}


.warehouse-map-items__empty {
  display: grid;

  gap: 6px;

  margin-top: 13px;

  padding:
    15px;

  background:
    var(--inventory-surface-soft);

  border:
    1px dashed var(--inventory-border-strong);

  border-radius:
    var(--inventory-radius-small);
}


.warehouse-map-items__empty strong {
  color:
    var(--inventory-text-secondary);

  font-size: 0.68rem;
}


.warehouse-map-items__empty span {
  color:
    var(--inventory-text-muted);

  font-size: 0.61rem;
  line-height: 1.5;
}


/* =========================================================
   MAP INSTRUCTIONS
========================================================= */

.warehouse-map-instructions {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  padding:
    11px 16px;

  color:
    var(--inventory-text-muted);

  background:
    var(--inventory-surface-soft);

  border-top:
    1px solid var(--inventory-border);

  font-size: 0.58rem;
  font-weight: 650;
}


/* =========================================================
   DASHBOARD LIVE WAREHOUSE PREVIEW
========================================================= */

.warehouse-preview.is-live-preview {
  align-items: start;
}


.preview-aisle {
  display: grid;

  gap: 7px;
}


.preview-aisle > strong {
  color:
    var(--inventory-text);

  text-align: center;

  font-size: 0.66rem;
}


.preview-address-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(13px, 1fr));

  gap: 4px;
}


.preview-address-cell {
  min-height: 18px;

  padding: 0;

  background:
    #dce7f1;

  border:
    1px solid #becddd;

  border-radius: 3px;
}


.preview-address-cell.is-occupied {
  background:
    var(--inventory-purple);

  border-color:
    #6d50a7;
}


.preview-address-cell.is-inactive {
  background:
    var(--inventory-gray);

  border-color:
    #969fa9;
}


/* =========================================================
   MAP RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

  .warehouse-map-control-bar {
    grid-template-columns:
      minmax(260px, 1fr)
      minmax(170px, 0.4fr);
  }


  .warehouse-map-zoom-controls {
    grid-column:
      1 / -1;
  }


  .warehouse-map-workspace {
    grid-template-columns:
      1fr;
  }


  .warehouse-map-detail-card {
    position: static;
  }

}


@media (max-width: 760px) {

  .warehouse-map-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .warehouse-map-heading__actions {
    justify-content:
      flex-start;
  }


  .warehouse-map-control-bar {
    grid-template-columns:
      1fr;
  }


  .warehouse-map-zoom-controls {
    grid-column:
      auto;
  }


  .warehouse-map-zoom-buttons {
    flex-wrap: wrap;
  }


  .warehouse-map-zones {
    grid-template-columns:
      1fr;
  }


  .warehouse-map-detail-grid {
    grid-template-columns:
      1fr;
  }

}
/* =========================================================
   ORDER REQUESTS SCREEN
========================================================= */

.order-requests-screen {
  max-width: 1680px;

  margin:
    0 auto;
}


.order-requests-screen[hidden] {
  display: none;
}


.inventory-page.is-order-requests-mode
> :not(.order-requests-screen) {
  display: none;
}


/* =========================================================
   ORDER REQUESTS HEADING
========================================================= */

.order-requests-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 22px;
}


.order-requests-heading h1 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size:
    clamp(1.85rem, 2.5vw, 2.65rem);

  font-weight: 690;
  letter-spacing: -0.04em;
}


.order-requests-heading p {
  margin:
    8px 0 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.96rem;
}


.order-requests-heading__actions {
  display: flex;

  gap: 10px;
}


/* =========================================================
   ORDER INTAKE
========================================================= */

.order-intake-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(300px, 0.7fr);

  gap: 22px;
}


.order-intake-card,
.order-intake-summary,
.order-review-panel,
.picking-list-preview,
.order-queue-card {
  margin-bottom: 22px;
}


.order-section-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;
}


.order-section-heading h2,
.order-items-heading h3 {
  margin: 0;

  color:
    var(--inventory-text);

  font-size: 1.02rem;
  font-weight: 680;
}


.order-intake-state {
  color:
    var(--inventory-text-muted);

  font-size: 0.7rem;
  font-weight: 700;
}


/* =========================================================
   ORDER DROP ZONE
========================================================= */

.order-document-drop-zone {
  display: flex;

  min-height: 300px;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 10px;

  padding: 36px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #fbfcfe,
      #edf3fa
    );

  border:
    1.5px dashed
    #9eb4ce;

  border-radius:
    14px;

  outline: none;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}


.order-document-drop-zone:hover,
.order-document-drop-zone:focus-visible,
.order-document-drop-zone.is-dragging {
  background:
    var(--inventory-primary-soft);

  border-color:
    var(--inventory-primary);

  box-shadow:
    inset 0 0 0 1px
    rgba(37, 79, 130, 0.08);

  transform:
    translateY(-1px);
}


.order-drop-icon {
  display: grid;

  width: 58px;
  height: 58px;

  place-items: center;

  color:
    var(--inventory-primary);

  background:
    #ffffff;

  border:
    1px solid
    #c8d6e7;

  border-radius:
    15px;
}


.order-drop-icon svg {
  width: 29px;
  height: 29px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.order-document-drop-zone h3 {
  margin:
    6px 0 0;

  color:
    var(--inventory-text);

  font-size: 1rem;
}


.order-document-drop-zone p {
  max-width: 520px;

  margin: 0;

  color:
    var(--inventory-text-secondary);

  font-size: 0.76rem;
  line-height: 1.55;
}


.order-browse-button,
.order-create-button {
  min-height: 41px;

  padding:
    10px 18px;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      var(--inventory-primary-dark),
      var(--inventory-primary)
    );

  border:
    1px solid
    var(--inventory-primary);

  border-radius:
    var(--inventory-radius-small);

  font-size: 0.75rem;
  font-weight: 720;
}


.order-supported-types {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 7px;

  margin-top: 4px;
}


.order-supported-types span {
  padding:
    4px 8px;

  color:
    var(--inventory-text-muted);

  background:
    rgba(255, 255, 255, 0.84);

  border:
    1px solid
    var(--inventory-border);

  border-radius:
    5px;

  font-size: 0.58rem;
  font-weight: 750;
}


.order-upload-message {
  min-height: 20px;

  margin-top: 12px;

  color:
    var(--inventory-primary);

  font-size: 0.68rem;
  font-weight: 650;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.order-summary-list {
  display: grid;

  gap: 12px;
}


.order-summary-row {
  display: flex;

  min-height: 67px;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding:
    15px 17px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid
    var(--inventory-border);

  border-radius:
    10px;
}


.order-summary-row span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.7rem;
  font-weight: 650;
}


.order-summary-row strong {
  color:
    var(--inventory-primary-dark);

  font-size: 1.35rem;
}


.order-summary-row--shortage strong {
  color:
    var(--inventory-red);
}


/* =========================================================
   ORDER REVIEW
========================================================= */

.order-review-fields {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 25px;
}


.order-review-fields label {
  display: grid;

  gap: 7px;
}


.order-review-fields label span {
  color:
    var(--inventory-text-secondary);

  font-size: 0.64rem;
  font-weight: 700;
}


.order-review-fields input {
  min-height: 42px;

  padding:
    9px 11px;

  color:
    var(--inventory-text);

  background:
    var(--inventory-surface-soft);

  border:
    1px solid
    var(--inventory-border);

  border-radius:
    7px;

  outline: none;
}


.order-review-fields input:focus {
  border-color:
    var(--inventory-primary);

  box-shadow:
    0 0 0 3px
    rgba(37, 79, 130, 0.1);
}


.order-review-badge,
.picking-status-badge {
  padding:
    6px 10px;

  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);

  border:
    1px solid
    #c6d5e7;

  border-radius:
    999px;

  font-size: 0.62rem;
  font-weight: 750;
}


.order-items-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 13px;
}


.order-items-heading > span {
  color:
    var(--inventory-text-muted);

  font-size: 0.65rem;
  font-weight: 700;
}


.order-table-wrapper {
  overflow-x: auto;
}


.order-review-table,
.picking-list-table,
.order-queue-table {
  width: 100%;

  border-collapse: collapse;
}


.order-review-table {
  min-width: 1050px;
}


.picking-list-table {
  min-width: 800px;
}


.order-queue-table {
  min-width: 1050px;
}


.order-review-table th,
.order-review-table td,
.picking-list-table th,
.picking-list-table td,
.order-queue-table th,
.order-queue-table td {
  padding:
    12px 10px;

  text-align: left;

  border-bottom:
    1px solid
    var(--inventory-border);

  font-size: 0.67rem;
}


.order-review-table th,
.picking-list-table th,
.order-queue-table th {
  color:
    var(--inventory-text-muted);

  background:
    #f7f9fc;

  font-weight: 750;
}


.order-review-table td,
.picking-list-table td,
.order-queue-table td {
  color:
    var(--inventory-text-secondary);
}


.order-address-list {
  display: grid;

  gap: 4px;
}


.order-address-list span {
  color:
    var(--inventory-primary);

  font-size: 0.62rem;
  font-weight: 700;
}


.order-shortage-value {
  color:
    var(--inventory-red) !important;

  font-weight: 760;
}


.order-available-value {
  color:
    var(--inventory-green) !important;

  font-weight: 760;
}


.order-review-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 18px;
}


/* =========================================================
   PICKING LIST PREVIEW
========================================================= */

.picking-list-meta {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 18px;
}


.picking-list-meta > div {
  display: grid;

  gap: 5px;

  padding:
    12px 14px;

  background:
    var(--inventory-surface-soft);

  border:
    1px solid
    var(--inventory-border);

  border-radius:
    8px;
}


.picking-list-meta span {
  color:
    var(--inventory-text-muted);

  font-size: 0.57rem;
  font-weight: 700;
  text-transform: uppercase;
}


.picking-list-meta strong {
  color:
    var(--inventory-text);

  font-size: 0.76rem;
}


.picking-shortage-notice {
  margin-top: 15px;

  padding:
    14px 16px;

  color:
    #8a3e3e;

  background:
    #fff0f0;

  border:
    1px solid
    #efc6c6;

  border-radius:
    8px;

  font-size: 0.7rem;
  font-weight: 680;
}


/* =========================================================
   ORDER QUEUE
========================================================= */

.order-search {
  display: flex;

  min-width: 240px;

  align-items: center;

  gap: 7px;

  padding:
    0 11px;

  background:
    #ffffff;

  border:
    1px solid
    var(--inventory-border);

  border-radius:
    8px;
}


.order-search input {
  width: 100%;
  min-height: 38px;

  color:
    var(--inventory-text);

  background: transparent;

  border: 0;

  outline: none;

  font-size: 0.68rem;
}


.order-empty-state {
  display: grid;

  justify-items: center;

  gap: 6px;

  padding:
    55px 20px;

  text-align: center;
}


.order-empty-state strong {
  color:
    var(--inventory-text);

  font-size: 0.78rem;
}


.order-empty-state span {
  color:
    var(--inventory-text-muted);

  font-size: 0.66rem;
}


.order-status-badge {
  display: inline-flex;

  padding:
    5px 8px;

  border-radius:
    999px;

  font-size: 0.59rem;
  font-weight: 760;
}


.order-status-badge--pending {
  color:
    #795c24;

  background:
    #f8efdd;
}


.order-status-badge--picking {
  color:
    var(--inventory-primary);

  background:
    var(--inventory-primary-soft);
}


.order-status-badge--completed {
  color:
    #2f704f;

  background:
    #e7f4ec;
}


@media (max-width: 1100px) {

  .order-intake-layout {
    grid-template-columns:
      1fr;
  }


  .order-review-fields,
  .picking-list-meta {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 700px) {

  .order-requests-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .order-review-fields,
  .picking-list-meta {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   WAREHOUSE SUITE SHARED SHELL — INVENTORY IDENTITY
========================================================= */

/* Inventory navy accent for shared warehouse-header.css color system */
.inventory-header {
  --core-header-accent-rgb: 37, 79, 130;
}

/* Weather text — inventory blue light palette */
.inventory-header .weather-block__temperature {
  color: #f3f7fc;
}

.inventory-header .weather-block__location {
  color: rgba(243, 247, 252, 0.65);
}

/* Sidebar active state — restrained navy treatment */
.sidebar-nav-item--inventory.is-active {
  border-color: rgba(37, 79, 130, 0.42);
}

.sidebar-nav-item--inventory.is-active .sidebar-nav-icon {
  color: #254f82;
}

/* Inventory variant for shared AI pill button */
.ai-pill-button--inventory {
  --ai-pill-accent: #3f75b5;
  --ai-pill-accent-light: #7ea9dc;
  --ai-pill-accent-rgb: 63, 117, 181;
}

/* NAVI sidebar identity — CSS lettermark (no asset available) */
.sidebar-navi-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 7px;
  margin: 8px 4px 0;
  border-top: 1px solid rgba(37, 79, 130, 0.14);
}

.sidebar-navi-identity__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  opacity: 0.86;
}

.sidebar-navi-identity__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-navi-identity__name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #6a9fd4;
  line-height: 1.2;
}

.sidebar-navi-identity__role {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 247, 252, 0.44);
  line-height: 1.2;
}