/* Mobile/tablet rollout for operational workflows. Desktop rules stay in the existing CSS. */

body[data-page="challans"] .challan-mobile-builty-cards {
  display: none;
}


/* Create Challan dispatch cockpit redesign.
   This file loads last, so these rules intentionally own the final layout. */
body[data-page="create-challan"] .page-section.create-challan-shell {
  padding: 8px 10px 10px !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body[data-page="create-challan"] .create-challan-stage--dispatch {
  height: calc(100dvh - var(--ui-topbar-height, 58px) - 18px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-page="create-challan"] .generate-challan-grid {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(430px, 1.05fr) minmax(350px, 0.86fr) minmax(330px, 0.78fr) !important;
  grid-template-rows: clamp(370px, 45dvh, 430px) minmax(190px, 1fr) 46px !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body[data-page="create-challan"] .generate-challan-card {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #cfdded !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;
  overflow: hidden !important;
}

body[data-page="create-challan"] .generate-card-heading {
  min-height: 0 !important;
  padding: 0 0 5px !important;
  border-bottom: 1px solid #e5edf6 !important;
}

body[data-page="create-challan"] .generate-card-heading--lean {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-page="create-challan"] .generate-card-heading--lean h3,
body[data-page="create-challan"] .generate-card-heading h3 {
  margin: 0 !important;
  color: #07145f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
}

body[data-page="create-challan"] .generate-card-heading--lean > span {
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  color: #1d4ed8 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body[data-page="create-challan"] .generate-challan-pending-card .generate-card-heading .eyebrow {
  display: none !important;
}

body[data-page="create-challan"] .generate-challan-pending-card .generate-card-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

body[data-page="create-challan"] .generate-pending-meta {
  gap: 6px !important;
}

body[data-page="create-challan"] .generate-draft-pill {
  min-height: 28px !important;
  padding: 0 12px !important;
}

body[data-page="create-challan"] .generate-challan-no-field {
  grid-template-columns: auto 104px !important;
  gap: 6px !important;
  font-size: 10px !important;
}

body[data-page="create-challan"] .generate-route-mode-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px 0 !important;
}

body[data-page="create-challan"] .generate-route-mode-row span {
  min-width: 0 !important;
  min-height: 25px !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1px solid #dbe7f5 !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  color: #213a5c !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body[data-page="create-challan"] .generate-route-mode-row span::before {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
}

body[data-page="create-challan"] .generate-route-mode-row span.is-active {
  border-color: #b7ccff !important;
  background: #eef4ff !important;
  color: #1d4ed8 !important;
}

body[data-page="create-challan"] .generate-route-form-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.65fr) !important;
  gap: 7px 8px !important;
  min-height: 0 !important;
}

body[data-page="create-challan"] .generate-field--wide {
  grid-column: 1 / -1 !important;
}

body[data-page="create-challan"] .generate-field {
  gap: 3px !important;
  color: #29435f !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
}

body[data-page="create-challan"] .generate-field input,
body[data-page="create-challan"] .generate-field select,
body[data-page="create-challan"] .generate-inline-input input,
body[data-page="create-challan"] .generate-challan-vehicle-card input {
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

body[data-page="create-challan"] .generate-inline-input {
  grid-template-columns: minmax(0, 1fr) 72px !important;
  gap: 6px !important;
}

body[data-page="create-challan"] .generate-inline-input button {
  min-height: 31px !important;
  border-radius: 10px !important;
}

body[data-page="create-challan"] .generate-destination-box {
  gap: 5px !important;
}

body[data-page="create-challan"] .generate-destination-chips {
  min-height: 20px !important;
}

body[data-page="create-challan"] .generate-route-info {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 6px !important;
}

body[data-page="create-challan"] .generate-route-info div {
  padding: 5px 7px !important;
  border-radius: 10px !important;
}

body[data-page="create-challan"] .generate-route-info strong {
  font-size: 11.5px !important;
}

body[data-page="create-challan"] .generate-pending-table-wrap {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  border-radius: 10px !important;
}

body[data-page="create-challan"] .generate-challan-table .pending-col-serial { width: 34px !important; }
body[data-page="create-challan"] .generate-challan-table .pending-col-gr { width: 74px !important; }
body[data-page="create-challan"] .generate-challan-table .pending-col-consignee { width: 130px !important; }
body[data-page="create-challan"] .generate-challan-table .pending-col-destination { width: 100px !important; }
body[data-page="create-challan"] .generate-challan-table .pending-col-qty { width: 46px !important; }
body[data-page="create-challan"] .generate-challan-table .pending-col-weight { width: 82px !important; }
body[data-page="create-challan"] .generate-challan-table .pending-col-action { width: 42px !important; }

body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table th,
body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table td {
  height: 32px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

body[data-page="create-challan"] .generate-pending-footer {
  padding-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

body[data-page="create-challan"] .generate-challan-vehicle-card {
  gap: 5px 8px !important;
  align-content: start !important;
}

body[data-page="create-challan"] .generate-old-records-control {
  display: grid !important;
  gap: 5px !important;
  padding-bottom: 4px !important;
}

body[data-page="create-challan"] .generate-old-records-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-page="create-challan"] .generate-old-records-bar > span {
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  color: #1d4ed8 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body[data-page="create-challan"] .generate-old-records-control button {
  min-height: 28px !important;
}

body[data-page="create-challan"] .generate-old-record-filter-grid {
  display: grid !important;
  grid-template-columns: minmax(88px, 0.45fr) minmax(0, 0.55fr) !important;
  gap: 5px 6px !important;
}

body[data-page="create-challan"] .generate-old-record-filter-grid .generate-field {
  gap: 2px !important;
}

body[data-page="create-challan"] .generate-old-record-filter-grid .generate-field span {
  font-size: 9.5px !important;
}

body[data-page="create-challan"] .generate-old-record-filter-grid input,
body[data-page="create-challan"] .generate-old-record-filter-grid select {
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding: 4px 7px !important;
  font-size: 11px !important;
}

body[data-page="create-challan"] .generate-old-record-select {
  grid-column: 1 / -1 !important;
}

body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field:nth-of-type(-n + 3) {
  grid-template-columns: 142px minmax(0, 1fr) !important;
}

body[data-page="create-challan"] .generate-challan-vehicle-card .generate-net-value {
  margin-top: 2px !important;
  padding: 6px 10px !important;
}

body[data-page="create-challan"] .generate-challan-selected-card {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  max-height: clamp(190px, 27dvh, 260px) !important;
}

body[data-page="create-challan"] .generate-challan-selected-card .table-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="create-challan"] .generate-challan-selected-table table {
  min-width: 980px !important;
}

body[data-page="create-challan"] .generate-challan-selected-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  height: 31px !important;
  background: #f4f8fc !important;
}

body[data-page="create-challan"] .generate-challan-selected-table td,
body[data-page="create-challan"] .generate-challan-selected-table th {
  padding: 5px 8px !important;
  font-size: 12px !important;
}

body[data-page="create-challan"] .generate-empty-selected-row td {
  height: 44px !important;
  color: #8a604f !important;
  font-weight: 760 !important;
}

body[data-page="create-challan"] .generate-challan-actions-card {
  grid-row: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 8px !important;
  overflow: visible !important;
}

body[data-page="create-challan"] .generate-command-head,
body[data-page="create-challan"] .generate-command-metrics,
body[data-page="create-challan"] .generate-options-menu,
body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-reset-dispatch] {
  grid-column: 1 / -1 !important;
}

body[data-page="create-challan"] .generate-command-head {
  display: flex !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  border: 1px solid #dbe7f5 !important;
  border-radius: 11px !important;
  background: #f8fbff !important;
}

body[data-page="create-challan"] .generate-command-head span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-page="create-challan"] .generate-command-head strong {
  color: #07145f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-page="create-challan"] .generate-challan-actions-card > button {
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 880 !important;
}

body[data-page="create-challan"] .generate-command-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-page="create-challan"] .generate-command-metrics div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid #e0ebf7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

body[data-page="create-challan"] .generate-command-metrics span {
  color: #64748b !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

body[data-page="create-challan"] .generate-command-metrics strong {
  overflow: hidden !important;
  color: #0f3f8f !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="create-challan"] .generate-options-menu {
  margin: 0 !important;
}

body[data-page="create-challan"] .generate-options-menu summary {
  min-height: 34px !important;
}

body[data-page="create-challan"] .generate-total-strip {
  min-height: 0 !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
}

body[data-page="create-challan"] .generate-total-strip > div {
  padding: 3px 6px !important;
}

body[data-page="create-challan"] .generate-total-strip span {
  font-size: 10px !important;
}

body[data-page="create-challan"] .generate-total-strip strong {
  font-size: 13px !important;
}

@media (max-width: 1500px) {
  body[data-page="create-challan"] .generate-challan-grid {
    grid-template-columns: minmax(390px, 1.04fr) minmax(330px, 0.86fr) minmax(304px, 0.78fr) !important;
    grid-template-rows: 390px minmax(180px, 1fr) 44px !important;
    gap: 5px !important;
  }

  body[data-page="create-challan"] .generate-challan-card {
    padding: 7px 8px !important;
  }

  body[data-page="create-challan"] .generate-field input,
  body[data-page="create-challan"] .generate-field select,
  body[data-page="create-challan"] .generate-inline-input input,
  body[data-page="create-challan"] .generate-challan-vehicle-card input {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    font-size: 12.5px !important;
  }

  body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field:nth-of-type(-n + 3) {
    grid-template-columns: 116px minmax(0, 1fr) !important;
  }

  body[data-page="create-challan"] .generate-challan-actions-card > button {
    min-height: 32px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 1080px) {
  body[data-page="create-challan"] .page-section.create-challan-shell,
  body[data-page="create-challan"] .create-challan-stage--dispatch {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="create-challan"] .generate-challan-grid {
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body[data-page="create-challan"] .generate-challan-route-card,
  body[data-page="create-challan"] .generate-challan-pending-card,
  body[data-page="create-challan"] .generate-challan-vehicle-card,
  body[data-page="create-challan"] .generate-challan-selected-card,
  body[data-page="create-challan"] .generate-challan-actions-card,
  body[data-page="create-challan"] .generate-total-strip {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="create-challan"] .generate-pending-table-wrap {
    max-height: 360px !important;
    overflow: auto !important;
  }

  body[data-page="create-challan"] .generate-challan-selected-card {
    min-height: 280px !important;
  }

  body[data-page="create-challan"] .generate-challan-actions-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-page="create-challan"] .generate-route-form-grid,
  body[data-page="create-challan"] .generate-challan-vehicle-card,
  body[data-page="create-challan"] .generate-command-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="create-challan"] .generate-route-mode-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="create-challan"] .generate-route-mode-row span {
    font-size: 10px !important;
  }

  body[data-page="create-challan"] .generate-challan-pending-card .generate-card-heading {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="create-challan"] .generate-pending-meta,
  body[data-page="create-challan"] .generate-challan-actions-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="create-challan"] .generate-challan-no-field {
    grid-column: 1 / -1 !important;
  }

  body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-save-dispatch],
  body[data-page="create-challan"] .generate-command-head,
  body[data-page="create-challan"] .generate-command-metrics,
  body[data-page="create-challan"] .generate-options-menu,
  body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-reset-dispatch] {
    grid-column: 1 / -1 !important;
  }
}

/* Create Challan final visual QA rules - must stay at true file end.
   Empty draft stays compact; once GRs are added, the selected list grows. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .app-main.workspace {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .page-section.create-challan-shell {
    display: flex !important;
    height: calc(100dvh - var(--ui-topbar-height, 58px)) !important;
    min-height: 0 !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .create-challan-stage--dispatch {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid {
    height: 100% !important;
    min-height: 0 !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"] {
    grid-template-columns: minmax(460px, 1.14fr) minmax(330px, 0.78fr) minmax(400px, 0.96fr) !important;
    grid-template-rows: 390px 104px 44px !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    grid-template-columns: minmax(450px, 1.08fr) minmax(350px, 0.84fr) minmax(400px, 0.94fr) !important;
    grid-template-rows: minmax(360px, 0.56fr) minmax(250px, 0.44fr) 44px !important;
    align-content: stretch !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"] .generate-challan-selected-card {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    align-self: start !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] .generate-challan-selected-card {
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card .table-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-empty-selected-row td {
    height: 42px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    height: 100% !important;
    align-self: stretch !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  html body[data-page="create-challan"] .generate-challan-table .pending-col-serial { width: 7% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-gr { width: 14% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-consignee { width: 30% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-destination { width: 19% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-qty { width: 8% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-weight { width: 12% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-action { width: 10% !important; }

  html body[data-page="create-challan"] .generate-pending-table-wrap th,
  html body[data-page="create-challan"] .generate-pending-table-wrap td {
    padding: 4px 5px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"] {
    grid-template-columns: minmax(420px, 1.1fr) minmax(300px, 0.76fr) minmax(350px, 0.9fr) !important;
    grid-template-rows: 390px 104px 42px !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    grid-template-columns: minmax(410px, 1.04fr) minmax(320px, 0.82fr) minmax(350px, 0.9fr) !important;
    grid-template-rows: 360px minmax(230px, 1fr) 42px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    gap: 6px !important;
    padding: 7px !important;
  }
}

/* Create Challan visual correction after screenshot QA - 20260612.
   This intentionally sits last so the dispatch desk uses the available height
   instead of leaving the lower workspace empty. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .app-main.workspace {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .page-section.create-challan-shell {
    display: flex !important;
    height: calc(100dvh - var(--ui-topbar-height, 58px)) !important;
    min-height: calc(100dvh - var(--ui-topbar-height, 58px)) !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .create-challan-stage--dispatch {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(470px, 1.16fr) minmax(330px, 0.78fr) minmax(410px, 0.96fr) !important;
    grid-template-rows: minmax(390px, 0.58fr) minmax(300px, 0.42fr) 44px !important;
    align-content: stretch !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card {
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card .table-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-row: 2 / 4 !important;
    height: 100% !important;
    align-self: stretch !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  html body[data-page="create-challan"] .generate-challan-table .pending-col-serial { width: 7% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-gr { width: 14% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-consignee { width: 30% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-destination { width: 19% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-qty { width: 8% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-weight { width: 12% !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-action { width: 10% !important; }

  html body[data-page="create-challan"] .generate-pending-table-wrap th,
  html body[data-page="create-challan"] .generate-pending-table-wrap td {
    padding: 4px 5px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body[data-page="create-challan"] .generate-challan-grid {
    grid-template-columns: minmax(420px, 1.1fr) minmax(300px, 0.76fr) minmax(350px, 0.9fr) !important;
    grid-template-rows: 390px minmax(300px, 1fr) 42px !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr) !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    gap: 6px !important;
    padding: 7px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card > button {
    min-height: 31px !important;
  }

  html body[data-page="create-challan"] .generate-command-head,
  html body[data-page="create-challan"] .generate-options-menu summary {
    min-height: 31px !important;
  }

  html body[data-page="create-challan"] .generate-command-metrics div {
    padding: 5px 7px !important;
  }
}

/* Reports phone/tablet flow - approved Product Design pass 20260610.
   Desktop keeps the existing three-panel Reports UI; these rules only take
   over when the viewport is tablet/phone sized. */
html body[data-page="reports"] .rp-responsive-back,
html body[data-page="reports"] .rp-responsive-detail {
  display: none !important;
}

html body[data-page="reports"] .rp-responsive-detail[hidden] {
  display: none !important;
}

html body[data-page="reports"] .rp-menu-search input {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body[data-page="reports"] .rp-responsive-detail-card {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--rp-border, #d9e2f1);
  border-radius: 16px;
  background: var(--rp-card, #ffffff);
  box-shadow: var(--rp-shadow, 0 8px 28px rgba(15, 23, 42, 0.07));
}

html body[data-page="reports"] .rp-responsive-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rp-border, #d9e2f1);
}

html body[data-page="reports"] .rp-responsive-detail-back {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rp-border, #d9e2f1) !important;
  border-radius: 10px !important;
  background: var(--rp-card, #ffffff) !important;
  color: var(--rp-blue, #2563eb) !important;
  box-shadow: none !important;
}

html body[data-page="reports"] .rp-responsive-detail-back svg {
  width: 16px;
  height: 16px;
}

html body[data-page="reports"] .rp-responsive-detail-title {
  min-width: 0;
}

html body[data-page="reports"] .rp-responsive-detail-title h2 {
  margin: 0;
  color: var(--rp-text, #0f172a);
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-page="reports"] .rp-responsive-detail-title p {
  margin: 2px 0 0;
  color: var(--rp-muted, #64748b);
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-page="reports"] .rp-responsive-status,
html body[data-page="reports"] .rp-responsive-detail-row em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

html body[data-page="reports"] .rp-responsive-filter-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rp-border, #d9e2f1);
  background: #fbfdff;
}

html body[data-page="reports"] .rp-responsive-filter-chips span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--rp-border, #d9e2f1);
  border-radius: 10px;
  background: var(--rp-soft, #f8fbff);
  color: var(--rp-text-2, #334155);
  font-size: 0.72rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-page="reports"] .rp-responsive-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
}

html body[data-page="reports"] .rp-responsive-detail-summary article {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid var(--rp-border, #d9e2f1);
  border-radius: 12px;
  background: var(--rp-soft, #f8fbff);
}

html body[data-page="reports"] .rp-responsive-detail-summary span,
html body[data-page="reports"] .rp-responsive-detail-row.is-head span {
  color: var(--rp-muted, #64748b);
  font-size: 0.66rem;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
}

html body[data-page="reports"] .rp-responsive-detail-summary strong {
  min-width: 0;
  color: var(--rp-text, #0f172a);
  font-size: 0.88rem;
  line-height: 1.15;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-page="reports"] .rp-responsive-detail-table {
  min-height: 0;
  overflow: auto;
  padding: 0 12px 8px;
}

html body[data-page="reports"] .rp-responsive-detail-row {
  display: grid;
  grid-template-columns: minmax(74px, 0.52fr) minmax(0, 1fr) minmax(78px, 0.55fr) minmax(88px, 0.62fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--rp-border-soft, #e8eef8);
}

html body[data-page="reports"] .rp-responsive-detail-row.is-head {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom-color: var(--rp-border, #d9e2f1);
}

html body[data-page="reports"] .rp-responsive-detail-row > span {
  min-width: 0;
  color: var(--rp-text-2, #334155);
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 750;
}

html body[data-page="reports"] .rp-responsive-detail-row strong,
html body[data-page="reports"] .rp-responsive-detail-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body[data-page="reports"] .rp-responsive-detail-row strong {
  color: var(--rp-text, #0f172a);
  font-size: 0.82rem;
  font-weight: 900;
}

html body[data-page="reports"] .rp-responsive-detail-row small {
  margin-top: 2px;
  color: var(--rp-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
}

html body[data-page="reports"] .rp-responsive-amount {
  color: var(--rp-blue, #2563eb) !important;
  font-weight: 900 !important;
  text-align: right;
  white-space: nowrap;
}

html body[data-page="reports"] .rp-responsive-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rp-border, #d9e2f1);
  background: var(--rp-card, #ffffff);
}

html body[data-page="reports"] .rp-responsive-detail-actions .rp-button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
}

@media (min-width: 721px) and (max-width: 1280px) {
  html body[data-page="reports"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .app-main.workspace,
  html body[data-page="reports"] main.app-main {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .page-section.reports-page,
  html body[data-page="reports"] .page-section.rp-page-section {
    padding: 8px !important;
  }

  html body[data-page="reports"] .rp-shell {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
    gap: 10px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .rp-drawer {
    display: none !important;
  }

  html body[data-page="reports"] .rp-menu {
    display: flex !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  html body[data-page="reports"] .rp-menu-title {
    font-size: 1.03rem !important;
  }

  html body[data-page="reports"] .rp-menu-item {
    min-height: 34px !important;
    height: auto !important;
  }

  html body[data-page="reports"] .rp-workspace {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .rp-responsive-back {
    display: none !important;
  }

  html body[data-page="reports"] .rp-shell.is-responsive-detail-open .rp-toolbar,
  html body[data-page="reports"] .rp-shell.is-responsive-detail-open .rp-filter-card,
  html body[data-page="reports"] .rp-shell.is-responsive-detail-open .rp-summary-grid,
  html body[data-page="reports"] .rp-shell.is-responsive-detail-open .rp-table-card {
    display: none !important;
  }

  html body[data-page="reports"] .rp-shell.is-responsive-detail-open .rp-responsive-detail:not([hidden]) {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  html body[data-page="reports"] .rp-shell:not(.is-responsive-detail-open) .rp-responsive-detail {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="reports"] {
    width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .side-rail {
    position: fixed !important;
    inset: max(10px, env(safe-area-inset-top)) auto max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    z-index: 2147483000 !important;
    width: min(360px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    transform: translateX(calc(-100% - 28px)) !important;
  }

  html body[data-page="reports"].is-sidebar-open .side-rail,
  html body[data-page="reports"] .side-rail.is-mobile-sidebar-open {
    transform: translateX(0) !important;
  }

  html body[data-page="reports"] .app-main.workspace,
  html body[data-page="reports"] main.app-main {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .topbar {
    min-height: 56px !important;
    padding: 8px 10px !important;
  }

  html body[data-page="reports"] .topbar h1 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  html body[data-page="reports"] .topbar-center {
    display: none !important;
  }

  html body[data-page="reports"] .page-section.reports-page,
  html body[data-page="reports"] .page-section.rp-page-section {
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(100dvh - 56px) !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .rp-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .rp-menu,
  html body[data-page="reports"] .rp-workspace,
  html body[data-page="reports"] .rp-drawer {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="reports"] .rp-drawer {
    display: none !important;
  }

  html body[data-page="reports"] .rp-menu,
  html body[data-page="reports"] .rp-workspace {
    display: none !important;
  }

  html body[data-page="reports"] .rp-shell[data-report-mobile-view="menu"] .rp-menu {
    display: flex !important;
    padding: 12px !important;
  }

  html body[data-page="reports"] .rp-shell[data-report-mobile-view="workspace"] .rp-workspace,
  html body[data-page="reports"] .rp-shell[data-report-mobile-view="detail"] .rp-workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  html body[data-page="reports"] .rp-menu-title {
    margin-bottom: 10px !important;
    font-size: 1.1rem !important;
  }

  html body[data-page="reports"] .rp-menu-search {
    height: 40px !important;
    min-height: 40px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  html body[data-page="reports"] .rp-menu-sections {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 3px 8px 0 !important;
  }

  html body[data-page="reports"] .rp-menu-section-title {
    margin-top: 10px !important;
    color: var(--rp-muted, #64748b) !important;
  }

  html body[data-page="reports"] .rp-menu-item {
    min-height: 40px !important;
    height: auto !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    font-size: 0.82rem !important;
  }

  html body[data-page="reports"] .rp-menu-item.is-active {
    border-color: #bcd2ff !important;
    box-shadow: none !important;
  }

  html body[data-page="reports"] .rp-toolbar {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  html body[data-page="reports"] .rp-shell[data-report-mobile-view="workspace"] .rp-responsive-back {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }

  html body[data-page="reports"] .rp-shell[data-report-mobile-view="detail"] .rp-toolbar {
    display: none !important;
  }

  html body[data-page="reports"] .rp-title {
    font-size: 1rem !important;
  }

  html body[data-page="reports"] .rp-description {
    display: none !important;
  }

  html body[data-page="reports"] .rp-filter-card {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  html body[data-page="reports"] .rp-shell .rp-filter-row-main,
  html body[data-page="reports"] .rp-shell .rp-filter-row-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  html body[data-page="reports"] .rp-shell .rp-filter-row-secondary {
    margin-top: 8px !important;
  }

  html body[data-page="reports"] .rp-field-search {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="reports"] .rp-field {
    grid-template-rows: auto 36px !important;
    gap: 4px !important;
  }

  html body[data-page="reports"] .rp-field > span,
  html body[data-page="reports"] .rp-page-size > span {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  html body[data-page="reports"] .rp-field input,
  html body[data-page="reports"] .rp-field select,
  html body[data-page="reports"] .rp-filter-row-secondary > .rp-button {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  html body[data-page="reports"] #reportMoreFiltersBtn {
    display: none !important;
  }

  html body[data-page="reports"] .rp-summary-grid {
    display: none !important;
  }

  html body[data-page="reports"] .rp-table-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  html body[data-page="reports"] .rp-table-card-header,
  html body[data-page="reports"] .rp-table-head {
    min-height: 44px !important;
    padding: 8px 10px !important;
  }

  html body[data-page="reports"] .rp-table-title {
    font-size: 0.88rem !important;
  }

  html body[data-page="reports"] .rp-table-meta {
    font-size: 0.72rem !important;
  }

  html body[data-page="reports"] .rp-page-size {
    display: none !important;
  }

  html body[data-page="reports"] .rp-table {
    min-width: 760px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="reports"] .rp-pagination {
    min-height: 42px !important;
    padding: 7px 10px !important;
  }

  html body[data-page="reports"] .rp-shell[data-report-mobile-view="detail"] .rp-filter-card,
  html body[data-page="reports"] .rp-shell[data-report-mobile-view="detail"] .rp-summary-grid,
  html body[data-page="reports"] .rp-shell[data-report-mobile-view="detail"] .rp-table-card {
    display: none !important;
  }

  html body[data-page="reports"] .rp-shell[data-report-mobile-view="detail"] .rp-responsive-detail:not([hidden]) {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  html body[data-page="reports"] .rp-shell:not([data-report-mobile-view="detail"]) .rp-responsive-detail {
    display: none !important;
  }

  html body[data-page="reports"] .rp-responsive-detail-card {
    border-radius: 14px;
  }

  html body[data-page="reports"] .rp-responsive-detail-head {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 58px;
  }

  html body[data-page="reports"] .rp-responsive-status {
    display: none;
  }

  html body[data-page="reports"] .rp-responsive-detail-title h2 {
    font-size: 0.98rem;
  }

  html body[data-page="reports"] .rp-responsive-filter-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 10px;
  }

  html body[data-page="reports"] .rp-responsive-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 10px;
  }

  html body[data-page="reports"] .rp-responsive-detail-row {
    grid-template-columns: minmax(64px, 0.42fr) minmax(0, 1fr) minmax(78px, 0.45fr);
    min-height: 58px;
    padding: 8px 4px;
  }

  html body[data-page="reports"] .rp-responsive-detail-row > span:nth-child(3) {
    display: none;
  }

  html body[data-page="reports"] .rp-responsive-detail-row.is-head > span:nth-child(3) {
    display: none;
  }

  html body[data-page="reports"] .rp-responsive-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  html body[data-page="reports"] .rp-responsive-detail-actions .rp-button {
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
  }
}

/* Early Received Challan phone cascade; the final copy sits at the file tail. */
@media (max-width: 1080px) {
  html body[data-page="challans"] .old-record-toggle {
    display: none !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    min-height: 46px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-bottom: 1px solid #c9d5e6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    flex: 1 0 auto !important;
    min-width: 82px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #c9d5e6 !important;
    border-bottom-color: #c9d5e6 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #edf2f8 !important;
    background-image: none !important;
    color: #334155 !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab.is-active {
    position: relative !important;
    z-index: 1 !important;
    border-color: #b9c8dd !important;
    border-bottom-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    box-shadow: 0 -1px 0 #ffffff inset, 0 -3px 10px rgba(15, 23, 42, 0.06) !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .action-bar {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }

  html body[data-page="challans"] #actionSaveBtn:not([hidden]),
  html body[data-page="challans"] #actionSaveChangesBtn:not([hidden]) {
    border-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22) !important;
  }

  html body[data-page="challans"] .action-buttons > button[hidden],
  html body[data-page="challans"] .action-buttons > button:disabled {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="challans"] .challan-mobile-tabs {
    min-height: 43px !important;
    margin-bottom: 2px !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    min-width: 76px !important;
    min-height: 39px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .challan-mode-message {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mode-message .pill {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .challan-header-grid,
  html body[data-page="challans"] .old-record-challan-select-row {
    display: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .challan-mobile-old-records-list {
    display: grid !important;
    gap: 8px !important;
    max-height: calc(100dvh - 320px) !important;
    min-height: 220px !important;
    overflow: auto !important;
    padding: 2px 0 88px !important;
  }

  html body[data-page="challans"] .challan-mobile-old-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main strong,
  html body[data-page="challans"] .challan-mobile-old-main span,
  html body[data-page="challans"] .challan-mobile-old-main small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .challan-mobile-old-load {
    min-width: 64px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
  }

  html body[data-page="challans"] .challan-unloading-inline {
    display: none !important;
  }

  html body[data-page="challans"] .action-bar {
    max-height: 92px !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="challans"] .challan-fit-layout.is-old-record-editing .old-record-controls {
    display: none !important;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="challans"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 7px 10px !important;
  }

  html body[data-page="challans"] .topbar-center,
  html body[data-page="challans"] .title-block p {
    display: none !important;
  }

  html body[data-page="challans"] .title-block h2 {
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
  }

  html body[data-page="challans"] .challan-header-card,
  html body[data-page="challans"] .challan-entry-card,
  html body[data-page="challans"] .challan-records-card {
    align-self: start !important;
    height: auto !important;
    padding: 9px !important;
  }

  html body[data-page="challans"] .challan-fit-layout {
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
  }

  html body[data-page="challans"] .challan-main-grid {
    height: auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  html body[data-page="challans"] .challan-mode-strip {
    margin-bottom: 7px !important;
  }

  html body[data-page="challans"] .builty-entry-grid,
  html body[data-page="challans"] .challan-header-grid {
    gap: 6px !important;
  }

  html body[data-page="challans"] .desk-label-cell {
    min-height: 23px !important;
    padding: 0 7px !important;
    font-size: 0.68rem !important;
  }

  html body[data-page="challans"] .desk-field-cell > input,
  html body[data-page="challans"] .desk-field-cell > select,
  html body[data-page="challans"] .desk-field-cell > textarea,
  html body[data-page="challans"] .challan-transporter-combobox-input {
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  html body[data-page="challans"] .field-action-button {
    min-height: 34px !important;
  }

  html body[data-page="challans"] .builty-editor-mode {
    margin-bottom: 6px !important;
    font-size: 0.72rem !important;
  }

  html body[data-page="challans"] .challan-records-card {
    min-height: 210px !important;
    max-height: 250px !important;
  }

  html body[data-page="challans"] .challan-table-host {
    min-height: 186px !important;
  }

  html body[data-page="challans"] .challan-desktop-table-wrap {
    display: block !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-cards {
    display: none !important;
  }

  html body[data-page="challans"] .challan-summary-settlement-dock {
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  html body[data-page="challans"] .challan-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip {
    padding: 5px 6px !important;
    border-radius: 8px !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-label {
    font-size: 0.58rem !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip strong {
    font-size: 0.72rem !important;
  }

  html body[data-page="challans"] .challan-settlement-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body[data-page="challans"] .challan-settlement-grid .desk-label-cell {
    min-height: 22px !important;
    padding: 0 5px !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="challans"] .challan-settlement-grid .desk-field-cell > input {
    min-height: 32px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .action-bar {
    min-height: 58px !important;
    padding: 8px 9px !important;
  }
}

/* Received Challan phone/tablet revision: sheet tabs, old-record list, and fixed tablet footer. */
@media (max-width: 1080px) {
  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .action-bar {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }

  html body[data-page="challans"] .old-record-toggle {
    display: none !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    min-height: 46px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-bottom: 1px solid #c9d5e6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    flex: 1 0 auto !important;
    min-width: 82px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #c9d5e6 !important;
    border-bottom-color: #c9d5e6 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #edf2f8 !important;
    background-image: none !important;
    color: #334155 !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab.is-active {
    position: relative !important;
    z-index: 1 !important;
    border-color: #b9c8dd !important;
    border-bottom-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    box-shadow: 0 -1px 0 #ffffff inset, 0 -3px 10px rgba(15, 23, 42, 0.06) !important;
  }

  html body[data-page="challans"] #actionSaveBtn:not([hidden]),
  html body[data-page="challans"] #actionSaveChangesBtn:not([hidden]) {
    border-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22) !important;
  }

  html body[data-page="challans"] .action-buttons > button[hidden] {
    display: none !important;
  }

  html body[data-page="challans"] .action-buttons > button:disabled {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="challans"] .challan-mobile-tabs {
    min-height: 43px !important;
    margin-bottom: 2px !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    min-width: 76px !important;
    min-height: 39px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .challan-mode-message {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mode-message .pill {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  html body[data-page="challans"] .challan-mode-message strong {
    color: #334155 !important;
    font-weight: 700 !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .challan-header-grid {
    display: none !important;
  }

  html body[data-page="challans"] .old-record-challan-select-row {
    display: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .challan-mobile-old-records-list {
    display: grid !important;
    gap: 8px !important;
    max-height: calc(100dvh - 320px) !important;
    min-height: 220px !important;
    overflow: auto !important;
    padding: 2px 0 88px !important;
  }

  html body[data-page="challans"] .challan-mobile-old-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main strong,
  html body[data-page="challans"] .challan-mobile-old-main span,
  html body[data-page="challans"] .challan-mobile-old-main small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main strong {
    color: #0f172a !important;
    font-size: 0.88rem !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main span,
  html body[data-page="challans"] .challan-mobile-old-main small {
    color: #64748b !important;
    font-size: 0.72rem !important;
  }

  html body[data-page="challans"] .challan-mobile-old-load {
    min-width: 64px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
  }

  html body[data-page="challans"] .challan-mobile-old-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 180px !important;
    padding: 18px !important;
    border: 1px dashed #c9d5e6 !important;
    border-radius: 12px !important;
    color: #64748b !important;
    text-align: center !important;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="challans"] {
    background: #f6f8fc !important;
    overflow-x: hidden !important;
  }

  html body[data-page="challans"] .bg-orb,
  html body[data-page="challans"] .bg-grid {
    display: none !important;
  }

  html body[data-page="challans"] .workspace {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 10px 12px 250px !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .topbar {
    min-height: 58px !important;
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="challans"] .challan-fit-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs {
    min-height: 48px !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    font-size: 0.92rem !important;
  }

  html body[data-page="challans"] .challan-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  html body[data-page="challans"] .challan-header-card,
  html body[data-page="challans"] .challan-entry-card,
  html body[data-page="challans"] .challan-records-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .challan-mode-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 10px !important;
  }

  html body[data-page="challans"] .challan-mode-message {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .challan-mode-message strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .old-record-controls:not([hidden]) {
    grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1fr) !important;
    width: 100% !important;
  }

  html body[data-page="challans"] .challan-header-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .builty-entry-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .builty-entry-grid .full-span {
    grid-column: auto !important;
  }

  html body[data-page="challans"] .desk-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .desk-label-cell {
    min-height: 28px !important;
    padding: 0 9px !important;
    border: 1px solid #dbe7f5 !important;
    border-bottom: 0 !important;
    border-radius: 9px 9px 0 0 !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
  }

  html body[data-page="challans"] .desk-field-cell {
    min-width: 0 !important;
  }

  html body[data-page="challans"] .desk-field-cell > input,
  html body[data-page="challans"] .desk-field-cell > select,
  html body[data-page="challans"] .desk-field-cell > textarea,
  html body[data-page="challans"] .challan-transporter-combobox-input {
    width: 100% !important;
    min-height: 40px !important;
    border-color: #dbe7f5 !important;
    border-radius: 0 0 9px 9px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.88rem !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .field-with-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(58px, 66px) !important;
    gap: 6px !important;
  }

  html body[data-page="challans"] .field-action-button {
    min-width: 58px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
  }

  html body[data-page="challans"] .builty-editor-mode {
    min-height: 0 !important;
    margin: 0 0 8px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .challan-records-card {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 230px !important;
    max-height: min(34dvh, 320px) !important;
    overflow: hidden !important;
  }

  html body[data-page="challans"] .challan-table-host {
    min-height: 190px !important;
    max-height: 100% !important;
    overflow: auto !important;
    border-radius: 12px !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-cards {
    display: grid !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-card {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
  }

  html body[data-page="challans"] .challan-summary-settlement-dock {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    z-index: 39 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: auto !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body[data-page="challans"] .challan-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    white-space: normal !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip + .summary-chip {
    border-left: 1px solid #dbe7f5 !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-label {
    color: #64748b !important;
    font-size: 0.64rem !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip strong {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .challan-settlement-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .action-bar {
    position: fixed !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 62px !important;
    padding: 9px 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body[data-page="challans"] .action-status {
    max-width: 100% !important;
    max-height: 34px !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  html body[data-page="challans"] .action-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body[data-page="challans"] .action-buttons > button {
    min-width: 112px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .challan-options-menu {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(246px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: min(44dvh, 420px) !important;
    overflow: auto !important;
  }
}

body[data-page="challans"] .challan-mobile-old-records-list {
  display: none;
}

body[data-page="challans"] .challan-summary-settlement-dock {
  display: contents;
}

@media (max-width: 1080px) {
  body[data-theme] .rail-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    display: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.42) !important;
  }

  body[data-theme].is-sidebar-open .rail-overlay,
  body.is-sidebar-open .rail-overlay {
    display: block !important;
  }

  body[data-theme] .side-rail {
    position: fixed !important;
    inset: max(10px, env(safe-area-inset-top)) auto max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: min(360px, calc(100vw - 20px)) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--ui-text, var(--app-text-main, #0f172a)) !important;
    background: var(--ui-surface, var(--app-surface, #ffffff)) !important;
    border: 1px solid var(--ui-border, var(--app-border, #d9e2f1)) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24) !important;
    transform: translateX(calc(-100% - 28px)) !important;
    transition: transform 180ms ease !important;
  }

  body[data-theme].is-sidebar-open .side-rail,
  body.is-sidebar-open .side-rail {
    transform: translateX(0) !important;
  }

  body[data-theme] .side-rail::before,
  body[data-theme] .side-rail::after {
    display: none !important;
  }

  body[data-theme] .side-rail .side-rail-top,
  body[data-theme] .side-rail .side-rail-bottom {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-theme] .side-rail .rail-header {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body[data-theme] .side-rail .rail-toggle.rail-edge-toggle {
    display: none !important;
  }

  body[data-theme] .side-rail .rail-nav-group,
  body[data-theme] .side-rail .rail-theme-card,
  body[data-theme] .side-rail .rail-session-card {
    display: grid !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: var(--ui-surface-soft, var(--app-surface-soft, #f7faff)) !important;
    border: 1px solid var(--ui-border, var(--app-border, #d9e2f1)) !important;
  }

  body[data-theme] .side-rail .rail-nav {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body[data-theme] .side-rail .rail-section-header,
  body[data-theme] .side-rail .rail-mini-label {
    display: block !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--ui-text-muted, var(--app-text-soft, #64748b)) !important;
  }

  body[data-theme] .side-rail .nav-link,
  body[data-theme] .side-rail .nav-link-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    color: var(--ui-text, var(--app-text-main, #0f172a)) !important;
    text-align: left !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-theme] .side-rail .nav-copy,
  body[data-theme] .side-rail .nav-copy strong,
  body[data-theme] .side-rail .nav-copy small,
  body[data-theme] .side-rail .rail-session-copy,
  body[data-theme] .side-rail .rail-session-copy strong,
  body[data-theme] .side-rail .rail-session-copy span,
  body[data-theme] .side-rail .rail-theme-button span,
  body[data-theme] .side-rail .nav-section-chevron {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    white-space: normal !important;
  }

  body[data-theme] .side-rail .nav-copy {
    flex: 1 1 auto !important;
  }

  body[data-theme] .side-rail .nav-icon,
  body[data-theme] .side-rail .rail-theme-icon,
  body[data-theme] .side-rail .rail-session-avatar {
    flex: 0 0 auto !important;
  }

  body[data-theme] .side-rail .rail-nav-children:not([hidden]) {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding-left: 12px !important;
  }

  body[data-theme] .side-rail .rail-theme-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-theme] .side-rail .rail-theme-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  body[data-theme] .side-rail .rail-session-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body[data-theme].is-sidebar-open {
    overflow: hidden !important;
  }
}

/* Dashboard mobile/tablet target: Operations Snapshot + follow-up actions. */
body[data-page="dashboard"] .dashboard-mobile-tabs,
body[data-page="dashboard"] .dashboard-mobile-bottom-nav {
  display: none;
}

body[data-page="challans"] .challan-mobile-tabs {
  display: none;
}

body[data-page="dashboard"] .dashboard-insight-row {
  grid-template-columns: 10px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

body[data-page="dashboard"] .dashboard-insight-copy {
  display: grid;
  gap: 4px;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-page="dashboard"] .dashboard-insight-copy strong,
body[data-page="dashboard"] .dashboard-insight-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="dashboard"] .dashboard-insight-row > .dashboard-followup-pill {
  grid-row: auto !important;
  width: auto !important;
}

body[data-page="dashboard"] .dashboard-followup-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(37, 99, 235, 0.26);
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

body[data-page="dashboard"] .dashboard-record-row .dashboard-followup-pill {
  justify-self: end;
}

@media (min-width: 760px) and (max-width: 1080px) {
  html body[data-page="dashboard"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(190px, 218px) minmax(0, 1fr) !important;
    min-height: 100dvh !important;
  }

  html body[data-page="dashboard"] #sideRail.side-rail {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    z-index: 5 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: none !important;
    inset: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--ui-border, #dbe3ef) !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"] #railOverlay.rail-overlay {
    display: none !important;
  }

  html body[data-page="dashboard"] .workspace,
  html body[data-page="dashboard"] .app-main {
    min-width: 0 !important;
    padding: 0 12px 22px !important;
  }

  body[data-page="dashboard"] .topbar {
    min-height: 68px !important;
  }

  body[data-page="dashboard"] .dashboard-reference-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="dashboard"] .dashboard-range-shell {
    justify-content: space-between !important;
  }

  body[data-page="dashboard"] #dashboardSummary.dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(138px, auto) !important;
    min-height: 0 !important;
  }

  body[data-theme][data-page="dashboard"] button.dashboard-kpi-card,
  body[data-page="dashboard"] .dashboard-kpi-card {
    grid-template-rows: auto minmax(46px, 1fr) auto !important;
    min-height: 138px !important;
    padding: 14px !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-icon {
    width: 42px !important;
    height: 42px !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-card .dashboard-sparkline {
    min-height: 42px !important;
  }

  body[data-page="dashboard"] .dashboard-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="dashboard"] .dashboard-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="dashboard"] .dashboard-recent-card {
    grid-column: 1 / -1;
  }

  body[data-page="dashboard"] .dashboard-bottom-grid > .panel {
    min-height: 210px !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="dashboard"] {
    background: #f6f8fc !important;
  }

  html body[data-page="dashboard"] .app-shell {
    display: block !important;
    min-height: 100dvh !important;
  }

  html body[data-page="dashboard"] .workspace,
  html body[data-page="dashboard"] .app-main {
    width: 100% !important;
    padding: 0 10px calc(92px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  body[data-page="dashboard"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 18 !important;
    min-height: 58px !important;
    margin: 0 -10px 10px !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
    border-bottom: 1px solid #dbe7f5 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px);
  }

  body[data-page="dashboard"] .topbar-left {
    min-width: 0 !important;
    gap: 8px !important;
  }

  body[data-page="dashboard"] .topbar h1 {
    max-width: 160px;
    overflow: hidden;
    font-size: 1.04rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="dashboard"] .topbar-center {
    display: none !important;
  }

  body[data-page="dashboard"] .shell-menu-button,
  body[data-page="dashboard"] .shell-profile-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
  }

  body[data-page="dashboard"] .smart-dashboard-page {
    display: grid !important;
    gap: 10px !important;
  }

  body[data-page="dashboard"] .dashboard-reference-hero,
  body[data-page="dashboard"] .dashboard-hero-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-page="dashboard"] .dashboard-range-shell {
    display: none !important;
  }

  body[data-page="dashboard"] .dashboard-search-shell {
    gap: 0 !important;
  }

  body[data-page="dashboard"] .dashboard-search-input-wrap {
    min-height: 46px !important;
    grid-template-columns: 38px minmax(0, 1fr) 40px !important;
    border-color: #c9d9f2 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  body[data-page="dashboard"] .dashboard-search-input-wrap input {
    min-height: 44px !important;
    font-size: 0.82rem !important;
  }

  body[data-page="dashboard"] .dashboard-filter-icon-button {
    width: 32px !important;
    height: 32px !important;
    margin-right: 6px !important;
  }

  body[data-page="dashboard"] .dashboard-search-results {
    display: none !important;
  }

  body[data-page="dashboard"] #dashboardSummary.dashboard-kpi-grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 -10px !important;
    padding: 0 10px 2px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body[data-page="dashboard"] #dashboardSummary.dashboard-kpi-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-theme][data-page="dashboard"] button.dashboard-kpi-card,
  body[data-page="dashboard"] .dashboard-kpi-card {
    flex: 0 0 148px !important;
    scroll-snap-align: start;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    min-height: 124px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-topline {
    gap: 8px !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-card strong {
    font-size: 1.22rem !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-label,
  body[data-page="dashboard"] .dashboard-kpi-card small {
    font-size: 0.68rem !important;
  }

  body[data-page="dashboard"] .dashboard-kpi-card .dashboard-sparkline,
  body[data-page="dashboard"] .dashboard-kpi-change {
    display: none !important;
  }

  body[data-page="dashboard"] .dashboard-mobile-tabs {
    position: static;
    top: auto;
    z-index: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: 42px;
    padding: 4px;
    border: 1px solid #c9d9f2;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
  }

  body[data-page="dashboard"] .dashboard-mobile-tab {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #334155 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    white-space: nowrap;
  }

  body[data-page="dashboard"] .dashboard-mobile-tab.is-active {
    border-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
  }

  body[data-page="dashboard"] .dashboard-visual-grid,
  body[data-page="dashboard"] .dashboard-bottom-grid {
    display: contents !important;
  }

  body[data-page="dashboard"] .dashboard-chart-card,
  body[data-page="dashboard"] .dashboard-bottom-grid > .panel {
    display: none !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="overview"] .dashboard-mobile-overview,
  body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="recovery"] .dashboard-mobile-recovery,
  body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="open-work"] .dashboard-mobile-open-work,
  body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="attention"] .dashboard-mobile-attention {
    display: grid !important;
  }

  body[data-page="dashboard"] .dashboard-insights-card {
    order: 1;
  }

  body[data-page="dashboard"] .dashboard-visual-grid .dashboard-chart-card:nth-child(1) {
    order: 2;
  }

  body[data-page="dashboard"] .dashboard-visual-grid .dashboard-chart-card:nth-child(2) {
    order: 3;
  }

  body[data-page="dashboard"] .dashboard-visual-grid .dashboard-chart-card:nth-child(4) {
    order: 4;
  }

  body[data-page="dashboard"] .dashboard-recent-card {
    order: 5;
  }

  body[data-page="dashboard"] .dashboard-bottom-grid > .panel:nth-child(3) {
    order: 6;
  }

  body[data-page="dashboard"] .dashboard-visual-grid .dashboard-chart-card:nth-child(3) {
    order: 7;
  }

  body[data-page="dashboard"] .card-heading {
    padding-bottom: 2px !important;
  }

  body[data-page="dashboard"] .card-heading h3 {
    font-size: 0.9rem !important;
  }

  body[data-page="dashboard"] .eyebrow {
    font-size: 0.66rem !important;
  }

  body[data-page="dashboard"] .dashboard-card-select {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }

  body[data-page="dashboard"] .dashboard-chart-host {
    min-height: 166px !important;
  }

  body[data-page="dashboard"] .dashboard-line-chart {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 166px !important;
  }

  body[data-page="dashboard"] .dashboard-line-canvas svg {
    height: 116px !important;
  }

  body[data-page="dashboard"] .dashboard-line-yaxis {
    padding: 16px 0 24px !important;
    font-size: 0.64rem !important;
  }

  body[data-page="dashboard"] .dashboard-donut-layout {
    grid-template-columns: minmax(112px, 0.82fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-page="dashboard"] .dashboard-donut {
    width: 112px !important;
  }

  body[data-page="dashboard"] .dashboard-donut::before {
    inset: 22px !important;
  }

  body[data-page="dashboard"] .dashboard-type-chart {
    min-height: 150px !important;
  }

  body[data-page="dashboard"] .dashboard-type-bar {
    grid-template-rows: auto minmax(86px, 1fr) auto !important;
  }

  body[data-page="dashboard"] .dashboard-type-bar-track {
    width: 34px !important;
    height: 86px !important;
  }

  body[data-page="dashboard"] .dashboard-record-row,
  body[data-page="dashboard"] .dashboard-insight-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 10px 2px !important;
  }

  body[data-page="dashboard"] .dashboard-insight-row > span:first-child {
    display: none !important;
  }

  body[data-page="dashboard"] .dashboard-record-main strong,
  body[data-page="dashboard"] .dashboard-insight-copy strong {
    font-size: 0.82rem !important;
  }

  body[data-page="dashboard"] .dashboard-record-main small,
  body[data-page="dashboard"] .dashboard-record-side small,
  body[data-page="dashboard"] .dashboard-insight-copy small {
    font-size: 0.7rem !important;
  }

  body[data-page="dashboard"] .dashboard-record-side {
    justify-items: end;
    min-width: 92px;
  }

  body[data-page="dashboard"] .dashboard-record-side strong {
    font-size: 0.82rem !important;
  }

  body[data-page="dashboard"] .dashboard-followup-pill {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  body[data-page="dashboard"] .dashboard-recent-tabs {
    gap: 6px !important;
  }

  body[data-page="dashboard"] .dashboard-recent-tab {
    min-height: 30px !important;
    font-size: 0.7rem !important;
  }

  body[data-page="dashboard"] .dashboard-mobile-bottom-nav {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 24;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    min-height: 58px;
    padding: 6px;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(16px);
  }

  body[data-page="dashboard"] .dashboard-mobile-bottom-link {
    display: grid;
    gap: 3px;
    place-items: center;
    min-height: 50px;
    min-width: 0;
    border-radius: 10px;
    color: #475569;
    font-size: 0.64rem;
    font-weight: 800;
    text-decoration: none;
  }

  body[data-page="dashboard"] .dashboard-mobile-bottom-link.is-active {
    color: #2563eb;
    background: #eff6ff;
  }

  body[data-page="dashboard"] .dashboard-mobile-bottom-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
  }

  body[data-page="dashboard"] .dashboard-mobile-bottom-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (max-width: 1080px) {
  html:has(> body[data-page="collections"]) {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="challans"],
  body[data-page="delivery"],
  body[data-page="collections"],
  body[data-page^="builty-"],
  body[data-page="create-challan"] {
    overflow-x: hidden !important;
  }

  body[data-page="collections"] {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="collections"] .collection-recovery-entry input,
  body[data-page="collections"] .collection-recovery-entry select,
  body[data-page="collections"] .collection-recovery-entry textarea,
  body[data-page="collections"] .collection-recovery-combobox > input[type="text"] {
    scroll-margin-top: 72px !important;
    scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="challans"] .app-shell,
  body[data-page="delivery"] .app-shell,
  body[data-page="collections"] .app-shell,
  body[data-page^="builty-"] .app-shell,
  body[data-page="create-challan"] .app-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  body[data-page="challans"] .workspace,
  body[data-page="delivery"] .workspace,
  body[data-page="collections"] .workspace,
  body[data-page^="builty-"] .workspace,
  body[data-page="create-challan"] .workspace {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="challans"] .topbar,
  body[data-page="delivery"] .topbar,
  body[data-page="collections"] .topbar,
  body[data-page^="builty-"] .topbar,
  body[data-page="create-challan"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  body[data-page="challans"] .page-section,
  body[data-page="delivery"] .page-section,
  body[data-page="collections"] .page-section,
  body[data-page^="builty-"] .page-section,
  body[data-page="create-challan"] .page-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="challans"] .panel,
  body[data-page="delivery"] .panel,
  body[data-page="collections"] .panel,
  body[data-page^="builty-"] .panel,
  body[data-page="create-challan"] .panel,
  body[data-page="challans"] .glass-panel,
  body[data-page="delivery"] .glass-panel,
  body[data-page="collections"] .glass-panel,
  body[data-page^="builty-"] .glass-panel,
  body[data-page="create-challan"] .glass-panel,
  body[data-page="challans"] .glass-strong,
  body[data-page="delivery"] .glass-strong,
  body[data-page="collections"] .glass-strong,
  body[data-page^="builty-"] .glass-strong,
  body[data-page="create-challan"] .glass-strong {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="challans"] input,
  body[data-page="delivery"] input,
  body[data-page="collections"] input,
  body[data-page^="builty-"] input,
  body[data-page="create-challan"] input,
  body[data-page="challans"] select,
  body[data-page="delivery"] select,
  body[data-page="collections"] select,
  body[data-page^="builty-"] select,
  body[data-page="create-challan"] select,
  body[data-page="challans"] textarea,
  body[data-page="delivery"] textarea,
  body[data-page="collections"] textarea,
  body[data-page^="builty-"] textarea,
  body[data-page="create-challan"] textarea {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  body[data-page="challans"] .challan-fit-layout,
  body[data-page="challans"] .challan-main-grid,
  body[data-page="delivery"] .delivery-desk,
  body[data-page="collections"] .collection-recovery-layout,
  body[data-page="create-challan"] .generate-challan-grid,
  body[data-page="create-challan"] .create-challan-stage,
  body[data-page^="builty-"] .builty-book-lower {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="challans"] .challan-header-grid,
  body[data-page="challans"] .builty-entry-grid,
  body[data-page="challans"] .challan-settlement-grid,
  body[data-page="collections"] .collection-recovery-form-grid,
  body[data-page="collections"] .collection-recovery-entry-grid,
  body[data-page="delivery"] .delivery-charge-grid,
  body[data-page="delivery"] .delivery-gr-grid,
  body[data-page^="builty-"] .builty-register-filter-grid,
  body[data-page^="builty-"] .builty-goods-entry-row,
  body[data-page="create-challan"] .create-challan-form-grid,
  body[data-page="create-challan"] .create-challan-goods-entry-row,
  body[data-page="create-challan"] .create-challan-charge-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="challans"] .challan-table-host,
  body[data-page="delivery"] .delivery-queue-list,
  body[data-page="collections"] .table-shell,
  body[data-page^="builty-"] .table-shell,
  body[data-page="create-challan"] .table-shell {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="challans"] .action-bar,
  body[data-page="delivery"] .delivery-inline-actions,
  body[data-page="collections"] .collection-recovery-actions,
  body[data-page^="builty-"] .builty-entry-action-row,
  body[data-page="create-challan"] .create-challan-footer-actions,
  body[data-page="create-challan"] .create-challan-action-buttons {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body[data-page="challans"] .action-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 35 !important;
    margin-inline: -2px !important;
  }

  body[data-page="delivery"] .delivery-queue-panel,
  body[data-page="delivery"] .delivery-editor-panel,
  body[data-page="delivery"] .delivery-console-form,
  body[data-page="collections"] .collection-recovery-left,
  body[data-page="collections"] .collection-recovery-right,
  body[data-page^="builty-"] .builty-book-upper,
  body[data-page^="builty-"] .builty-book-goods-panel,
  body[data-page^="builty-"] .builty-book-freight-panel,
  body[data-page="create-challan"] .generate-challan-card,
  body[data-page="create-challan"] .create-challan-form-panel,
  body[data-page="create-challan"] .create-challan-goods-panel,
  body[data-page="create-challan"] .create-challan-history-panel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 720px) {
  body[data-page="challans"] .app-shell,
  body[data-page="delivery"] .app-shell,
  body[data-page="collections"] .app-shell,
  body[data-page^="builty-"] .app-shell,
  body[data-page="create-challan"] .app-shell {
    padding: 0 !important;
  }

  body[data-page="challans"] .topbar,
  body[data-page="delivery"] .topbar,
  body[data-page="collections"] .topbar,
  body[data-page^="builty-"] .topbar,
  body[data-page="create-challan"] .topbar {
    min-height: 54px !important;
    padding: 8px 10px !important;
  }

  body[data-page="challans"] .topbar-center,
  body[data-page="delivery"] .topbar-center,
  body[data-page="collections"] .topbar-center,
  body[data-page^="builty-"] .topbar-center,
  body[data-page="create-challan"] .topbar-center {
    display: none !important;
  }

  body[data-page="challans"] .title-block h2,
  body[data-page="delivery"] .title-block h2,
  body[data-page="collections"] .topbar h1,
  body[data-page^="builty-"] .topbar h1,
  body[data-page="create-challan"] .topbar h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body[data-page="challans"] .page-section,
  body[data-page="delivery"] .page-section,
  body[data-page="collections"] .page-section,
  body[data-page^="builty-"] .page-section,
  body[data-page="create-challan"] .page-section {
    padding: 8px !important;
    gap: 10px !important;
  }

  body[data-page="challans"] .panel,
  body[data-page="delivery"] .panel,
  body[data-page="collections"] .panel,
  body[data-page^="builty-"] .panel,
  body[data-page="create-challan"] .panel,
  body[data-page="challans"] .glass-panel,
  body[data-page="delivery"] .glass-panel,
  body[data-page="collections"] .glass-panel,
  body[data-page^="builty-"] .glass-panel,
  body[data-page="create-challan"] .glass-panel,
  body[data-page="challans"] .glass-strong,
  body[data-page="delivery"] .glass-strong,
  body[data-page="collections"] .glass-strong,
  body[data-page^="builty-"] .glass-strong,
  body[data-page="create-challan"] .glass-strong {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  body[data-page="challans"] .challan-header-grid,
  body[data-page="challans"] .builty-entry-grid,
  body[data-page="challans"] .challan-settlement-grid,
  body[data-page="collections"] .collection-recovery-form-grid,
  body[data-page="collections"] .collection-recovery-entry-grid,
  body[data-page="delivery"] .delivery-charge-grid,
  body[data-page="delivery"] .delivery-gr-grid,
  body[data-page^="builty-"] .builty-register-filter-grid,
  body[data-page^="builty-"] .builty-goods-entry-row,
  body[data-page="create-challan"] .create-challan-form-grid,
  body[data-page="create-challan"] .create-challan-goods-entry-row,
  body[data-page="create-challan"] .create-challan-charge-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="challans"] .desk-row,
  body[data-page="delivery"] .desk-row,
  body[data-page="delivery"] .delivery-charge-row,
  body[data-page="delivery"] .delivery-detail-row,
  body[data-page="delivery"] .delivery-topband-row,
  body[data-page="collections"] .desk-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="challans"] .desk-label-cell,
  body[data-page="delivery"] .desk-label-cell,
  body[data-page="delivery"] .delivery-charge-label,
  body[data-page="delivery"] .delivery-detail-label,
  body[data-page="delivery"] .delivery-topband-label,
  body[data-page="collections"] .desk-label-cell {
    border-right: 1px solid var(--ui-border, rgba(148, 163, 184, 0.28)) !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    min-height: 32px !important;
  }

  body[data-page="challans"] .desk-field-cell,
  body[data-page="delivery"] .desk-field-cell,
  body[data-page="collections"] .desk-field-cell {
    min-width: 0 !important;
  }

  body[data-page="challans"] .desk-field-cell > input,
  body[data-page="challans"] .desk-field-cell > select,
  body[data-page="challans"] .desk-field-cell > textarea,
  body[data-page="delivery"] .desk-field-cell > input,
  body[data-page="delivery"] .desk-field-cell > select,
  body[data-page="delivery"] .desk-field-cell > textarea,
  body[data-page="collections"] .desk-field-cell > input,
  body[data-page="collections"] .desk-field-cell > select,
  body[data-page="collections"] .desk-field-cell > textarea {
    border-radius: 0 0 10px 10px !important;
  }

  body[data-page="challans"] .challan-desktop-table-wrap {
    display: none !important;
  }

  body[data-page="challans"] .challan-mobile-builty-cards {
    display: grid;
    gap: 10px;
  }

  body[data-page="challans"] .challan-mobile-builty-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ui-border, rgba(148, 163, 184, 0.28));
    border-radius: 12px;
    background: var(--ui-surface, rgba(255, 255, 255, 0.92));
    color: var(--ui-text, #0f172a);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  }

  body[data-page="challans"] .challan-mobile-builty-card.is-selected {
    border-color: var(--ui-primary, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary, #2563eb) 18%, transparent);
  }

  body[data-page="challans"] .challan-mobile-builty-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  body[data-page="challans"] .challan-mobile-builty-head span,
  body[data-page="challans"] .challan-mobile-builty-grid dt {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ui-text-soft, #64748b);
    text-transform: uppercase;
  }

  body[data-page="challans"] .challan-mobile-builty-head strong {
    display: block;
    margin-top: 2px;
    font-size: 1rem;
    color: var(--ui-text, #0f172a);
  }

  body[data-page="challans"] .challan-mobile-builty-amount {
    text-align: right;
  }

  body[data-page="challans"] .challan-mobile-builty-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
  }

  body[data-page="challans"] .challan-mobile-builty-grid > div {
    display: grid;
    grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
  }

  body[data-page="challans"] .challan-mobile-builty-grid dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ui-text, #0f172a);
    font-weight: 700;
  }

  body[data-page="challans"] .challan-mobile-builty-actions {
    display: flex;
    justify-content: flex-end;
  }

  body[data-page="collections"] .table-shell table,
  body[data-page^="builty-"] .table-shell table,
  body[data-page="create-challan"] .table-shell table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-page="collections"] .table-shell thead,
  body[data-page^="builty-"] .table-shell thead,
  body[data-page="create-challan"] .table-shell thead {
    display: none !important;
  }

  body[data-page="collections"] .table-shell tbody,
  body[data-page^="builty-"] .table-shell tbody,
  body[data-page="create-challan"] .table-shell tbody {
    display: grid !important;
    gap: 10px !important;
  }

  body[data-page="collections"] .table-shell tr,
  body[data-page^="builty-"] .table-shell tr,
  body[data-page="create-challan"] .table-shell tr {
    display: grid !important;
    gap: 7px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-border, rgba(148, 163, 184, 0.28)) !important;
    border-radius: 12px !important;
    background: var(--ui-surface, rgba(255, 255, 255, 0.94)) !important;
  }

  body[data-page="collections"] .table-shell td,
  body[data-page^="builty-"] .table-shell td,
  body[data-page="create-challan"] .table-shell td {
    display: grid !important;
    grid-template-columns: minmax(104px, 0.44fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page="collections"] .table-shell td::before,
  body[data-page^="builty-"] .table-shell td::before,
  body[data-page="create-challan"] .table-shell td::before {
    content: attr(data-mobile-label);
    min-width: 0;
    color: var(--ui-text-soft, #64748b);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  body[data-page="collections"] .table-shell td[data-mobile-label=""],
  body[data-page^="builty-"] .table-shell td[data-mobile-label=""],
  body[data-page="create-challan"] .table-shell td[data-mobile-label=""] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="collections"] .table-shell td[data-mobile-label=""]::before,
  body[data-page^="builty-"] .table-shell td[data-mobile-label=""]::before,
  body[data-page="create-challan"] .table-shell td[data-mobile-label=""]::before {
    content: none;
  }

  body[data-page="collections"] .collection-pending-actions,
  body[data-page="collections"] .collection-queue-action-row,
  body[data-page^="builty-"] .builty-register-actions,
  body[data-page="create-challan"] .create-challan-table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  body[data-page="challans"] .action-buttons,
  body[data-page="delivery"] .delivery-inline-actions,
  body[data-page="collections"] .collection-action-row,
  body[data-page^="builty-"] .builty-entry-action-row,
  body[data-page="create-challan"] .create-challan-footer-actions,
  body[data-page="create-challan"] .create-challan-action-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body[data-page="challans"] .action-buttons > button,
  body[data-page="delivery"] .delivery-inline-actions > button,
  body[data-page="collections"] .collection-action-row > button,
  body[data-page^="builty-"] .builty-entry-action-row > button,
  body[data-page="create-challan"] .create-challan-footer-actions > button,
  body[data-page="create-challan"] .create-challan-action-buttons > button {
    width: 100% !important;
    min-height: 42px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="challans"] .challan-summary-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="challans"] .challan-mobile-builty-grid > div,
  body[data-page="collections"] .table-shell td,
  body[data-page^="builty-"] .table-shell td,
  body[data-page="create-challan"] .table-shell td {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="challans"] .challan-mobile-builty-amount {
    text-align: left;
  }

  body[data-page="challans"] .challan-mobile-builty-head {
    display: grid;
  }
}

@media (max-width: 1080px) {
  body[data-theme] .side-rail,
  body .side-rail {
    transition: none !important;
    transform: translateX(calc(-100% - 28px)) !important;
  }

  body:not(.is-sidebar-open) .side-rail:not(.is-mobile-sidebar-open) {
    transform: translateX(calc(-100% - 28px)) !important;
  }

  body.is-sidebar-open .side-rail,
  body .side-rail.is-mobile-sidebar-open {
    transform: translateX(0) !important;
  }
}

@media (max-width: 1080px) {
  html body[data-theme].is-sidebar-open #sideRail.side-rail,
  html body.is-sidebar-open #sideRail.side-rail,
  html body #sideRail.side-rail.is-mobile-sidebar-open {
    position: fixed !important;
    inset: max(10px, env(safe-area-inset-top)) auto max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    z-index: 2147483000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: min(360px, calc(100vw - 20px)) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    color: #0f172a !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d9e2f1 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24) !important;
    backdrop-filter: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail::before,
  html body[data-theme].is-sidebar-open #sideRail.side-rail::after,
  html body.is-sidebar-open #sideRail.side-rail::before,
  html body.is-sidebar-open #sideRail.side-rail::after,
  html body #sideRail.side-rail.is-mobile-sidebar-open::before,
  html body #sideRail.side-rail.is-mobile-sidebar-open::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail *,
  html body.is-sidebar-open #sideRail.side-rail *,
  html body #sideRail.side-rail.is-mobile-sidebar-open * {
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    clip-path: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-top,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-top,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-top,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-bottom {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    color: #0f172a !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-nav-group,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-theme-card,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-card,
  html body.is-sidebar-open #sideRail.side-rail .rail-nav-group,
  html body.is-sidebar-open #sideRail.side-rail .rail-theme-card,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-card,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-nav-group,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-theme-card,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-card {
    display: grid !important;
    min-width: 0 !important;
    color: #0f172a !important;
    background: #f7faff !important;
    background-image: none !important;
    border: 1px solid #d9e2f1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-link,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-link-toggle,
  html body.is-sidebar-open #sideRail.side-rail .nav-link,
  html body.is-sidebar-open #sideRail.side-rail .nav-link-toggle,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-link,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-link-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    text-align: left !important;
    color: #0f172a !important;
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-copy,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-copy strong,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-copy small,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-section-header,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-mini-label,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-copy,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-copy strong,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-copy span,
  html body.is-sidebar-open #sideRail.side-rail .nav-copy,
  html body.is-sidebar-open #sideRail.side-rail .nav-copy strong,
  html body.is-sidebar-open #sideRail.side-rail .nav-copy small,
  html body.is-sidebar-open #sideRail.side-rail .rail-section-header,
  html body.is-sidebar-open #sideRail.side-rail .rail-mini-label,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-copy,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-copy strong,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-copy span,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-copy,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-copy strong,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-copy small,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-section-header,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-mini-label,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-copy,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-copy strong,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-copy span {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    white-space: normal !important;
    color: #0f172a !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-copy small,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-section-header,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-mini-label,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-copy span,
  html body.is-sidebar-open #sideRail.side-rail .nav-copy small,
  html body.is-sidebar-open #sideRail.side-rail .rail-section-header,
  html body.is-sidebar-open #sideRail.side-rail .rail-mini-label,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-copy span,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-copy small,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-section-header,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-mini-label,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-copy span {
    color: #64748b !important;
  }

  html body[data-theme].is-sidebar-open .app-shell,
  html body.is-sidebar-open .app-shell {
    z-index: auto !important;
    isolation: auto !important;
  }

  html body[data-theme].is-sidebar-open #railOverlay.rail-overlay,
  html body.is-sidebar-open #railOverlay.rail-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    color: transparent !important;
    background: rgba(15, 23, 42, 0.42) !important;
    background-color: rgba(15, 23, 42, 0.42) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Dashboard final responsive guard: keep approved phone/tablet IA above legacy shell rules. */
@media (min-width: 760px) and (max-width: 1080px) {
  html body[data-page="dashboard"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(190px, 218px) minmax(0, 1fr) !important;
    min-height: 100dvh !important;
  }

  html body[data-page="dashboard"] #sideRail.side-rail {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: auto !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--ui-border, #dbe3ef) !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"] #sideRail.side-rail .side-rail-top,
  html body[data-page="dashboard"] #sideRail.side-rail .side-rail-bottom,
  html body[data-page="dashboard"] #sideRail.side-rail .rail-nav-group,
  html body[data-page="dashboard"] #sideRail.side-rail .rail-theme-card,
  html body[data-page="dashboard"] #sideRail.side-rail .rail-session-card {
    display: grid !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body[data-page="dashboard"] #sideRail.side-rail .nav-link,
  html body[data-page="dashboard"] #sideRail.side-rail .nav-link-toggle {
    display: flex !important;
    min-width: 0 !important;
  }

  html body[data-page="dashboard"] #sideRail.side-rail .nav-copy,
  html body[data-page="dashboard"] #sideRail.side-rail .nav-copy strong,
  html body[data-page="dashboard"] #sideRail.side-rail .nav-copy small {
    display: block !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body[data-page="dashboard"] #railOverlay.rail-overlay {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="dashboard"] .workspace,
  html body[data-page="dashboard"] .app-main {
    padding: 0 10px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-tabs {
    display: grid !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-bottom-nav {
    display: grid !important;
  }

  html body[data-page="dashboard"] .dashboard-chart-card,
  html body[data-page="dashboard"] .dashboard-bottom-grid > .panel {
    display: none !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="overview"] .dashboard-mobile-overview,
  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="recovery"] .dashboard-mobile-recovery,
  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="open-work"] .dashboard-mobile-open-work,
  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab="attention"] .dashboard-mobile-attention {
    display: grid !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-chart-card {
    grid-template-rows: auto minmax(180px, 1fr) !important;
    gap: 12px !important;
    min-height: 286px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insights-card {
    min-height: 156px !important;
    padding: 14px !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-recent-card {
    min-height: 312px !important;
    padding: 14px !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-bottom-grid > .panel:not(.dashboard-insights-card):not(.dashboard-recent-card) {
    min-height: 218px !important;
    padding: 14px !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 64px !important;
    padding: 10px 0 !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-row > span:first-child {
    display: none !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-copy {
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-row > .dashboard-followup-pill {
    grid-row: auto !important;
    width: auto !important;
    background: #eff6ff !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-copy strong,
  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-copy small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-chart-host {
    min-height: 180px !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-donut-layout {
    align-items: center !important;
  }
}

/* Dashboard mobile feedback pass: fixed tab state, header polish, and action row readability. */
@media (max-width: 720px) {
  html body[data-page="dashboard"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 56px !important;
    margin: 0 -10px 10px !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
    border-bottom: 1px solid #d8e5f5 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="dashboard"] .shell-menu-button {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-color: #d8e5f5 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #10213f !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"] .shell-menu-button span {
    display: block !important;
    width: 15px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  html body[data-page="dashboard"] .topbar h1 {
    max-width: 172px !important;
    color: #0f172a !important;
    font-size: 1.03rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="dashboard"] .topbar-right {
    gap: 8px !important;
  }

  html body[data-page="dashboard"] .topbar-notice-button,
  html body[data-page="dashboard"] .shell-profile-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-color: #d8e5f5 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-tabs {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 44px !important;
    margin: 0 0 2px !important;
    padding: 4px !important;
    border: 1px solid #cbdcf2 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-theme][data-page="dashboard"] button.dashboard-mobile-tab {
    min-height: 36px !important;
    border: 1px solid transparent !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #334155 !important;
    box-shadow: none !important;
  }

  html body[data-theme][data-page="dashboard"] button.dashboard-mobile-tab.is-active {
    border-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insights-card {
    min-height: auto !important;
    padding: 13px 14px !important;
  }

  html body[data-page="dashboard"] .dashboard-insight-list {
    gap: 0 !important;
  }

  html body[data-page="dashboard"] .dashboard-page[data-dashboard-mobile-tab] .dashboard-insight-row {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 10px 0 !important;
  }

  html body[data-page="dashboard"] .dashboard-insight-row > span:not(:first-child):not(.dashboard-followup-pill),
  html body[data-page="dashboard"] .dashboard-insight-copy {
    display: grid !important;
    gap: 3px !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-page="dashboard"] .dashboard-insight-copy strong,
  html body[data-page="dashboard"] .dashboard-insight-copy small {
    display: block !important;
    min-width: 0 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="dashboard"] .dashboard-insight-row > .dashboard-followup-pill {
    justify-self: end !important;
    align-self: center !important;
    grid-row: auto !important;
    width: auto !important;
  }

  html body[data-page="dashboard"] .dashboard-record-action-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 3px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body[data-page="dashboard"] .dashboard-record-action-side strong,
  html body[data-page="dashboard"] .dashboard-record-action-side small {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html body[data-page="dashboard"] .dashboard-record-action-side .dashboard-followup-pill {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  html body[data-page="dashboard"] .dashboard-followup-pill {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    background: #eff6ff !important;
    background-image: none !important;
    color: #2563eb !important;
    font-size: 0.7rem !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"] .dashboard-recent-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body[data-page="dashboard"] .dashboard-recent-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-theme][data-page="dashboard"] button.dashboard-recent-tab {
    flex: 0 0 auto !important;
    min-height: 31px !important;
    border: 1px solid #d8e5f5 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #475569 !important;
    box-shadow: none !important;
  }

  html body[data-theme][data-page="dashboard"] button.dashboard-recent-tab.is-active {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    color: #2563eb !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-bottom-nav {
    min-height: 66px !important;
    padding: 6px !important;
    border-radius: 15px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-bottom-link {
    min-height: 54px !important;
    gap: 3px !important;
    font-size: 0.64rem !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-bottom-icon {
    width: 30px !important;
    height: 30px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-bottom-icon svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-bottom-icon .admin-reference-icon {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    inline-size: 26px !important;
    block-size: 26px !important;
  }
}

/* Received Challan mobile workflow: split the dense challan desk into thumb-sized sections. */
@media (max-width: 720px) {
  html body[data-page="challans"] {
    background: #f6f8fc !important;
    overflow-x: hidden !important;
  }

  html body[data-page="challans"] .bg-orb,
  html body[data-page="challans"] .bg-grid {
    display: none !important;
  }

  html body[data-page="challans"] .workspace {
    width: 100% !important;
    padding: 0 10px calc(116px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    margin: 0 -10px 10px !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
    border-bottom: 1px solid #d8e5f5 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="challans"] .topbar-left {
    min-width: 0 !important;
    gap: 10px !important;
  }

  html body[data-page="challans"] .title-block,
  html body[data-page="challans"] .title-block h2 {
    min-width: 0 !important;
  }

  html body[data-page="challans"] .title-block h2 {
    max-width: 238px !important;
    color: #0f172a !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="challans"] .shell-menu-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-color: #d8e5f5 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #10213f !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .topbar-right {
    gap: 8px !important;
  }

  html body[data-page="challans"] .topbar-notice-button,
  html body[data-page="challans"] .shell-profile-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-color: #d8e5f5 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 0 6px !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 44px !important;
    padding: 4px !important;
    border: 1px solid #cbdcf2 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 5px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #334155 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab.is-active {
    border-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
  }

  html body[data-page="challans"] .challan-main-grid {
    display: contents !important;
  }

  html body[data-page="challans"] .challan-mobile-section {
    display: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="header"] .challan-mobile-header {
    display: block !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="entry"] .challan-mobile-entry,
  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-mobile-records,
  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-mobile-records {
    display: grid !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-settlement-grid {
    display: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-table-host {
    display: none !important;
  }

  html body[data-page="challans"] .challan-header-card,
  html body[data-page="challans"] .challan-entry-card,
  html body[data-page="challans"] .challan-records-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 13px 14px !important;
    overflow: visible !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .challan-records-card {
    gap: 10px !important;
    grid-template-rows: auto auto auto !important;
  }

  html body[data-page="challans"] .challan-mode-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
  }

  html body[data-page="challans"] .challan-mode-message {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .challan-mode-message strong {
    font-size: 0.82rem !important;
    line-height: 1.28 !important;
  }

  html body[data-page="challans"] .challan-mode-actions,
  html body[data-page="challans"] .old-record-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body[data-page="challans"] .old-record-controls[hidden] {
    display: none !important;
  }

  html body[data-page="challans"] .old-record-toggle {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
  }

  html body[data-page="challans"] .challan-header-grid,
  html body[data-page="challans"] .builty-entry-grid,
  html body[data-page="challans"] .challan-settlement-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .desk-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .desk-label-cell {
    min-height: 30px !important;
    padding: 0 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
  }

  html body[data-page="challans"] .desk-field-cell {
    min-width: 0 !important;
  }

  html body[data-page="challans"] .desk-field-cell > input,
  html body[data-page="challans"] .desk-field-cell > select,
  html body[data-page="challans"] .desk-field-cell > textarea,
  html body[data-page="challans"] .challan-transporter-combobox-input {
    width: 100% !important;
    min-height: 45px !important;
    border-color: #d8e5f5 !important;
    border-radius: 0 0 10px 10px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .field-with-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(72px, 84px) !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .field-with-action .desk-field-cell,
  html body[data-page="challans"] .field-with-action select,
  html body[data-page="challans"] .field-with-action input {
    min-width: 0 !important;
  }

  html body[data-page="challans"] .field-action-button {
    min-width: 72px !important;
    min-height: 45px !important;
    border-radius: 10px !important;
  }

  html body[data-page="challans"] .builty-editor-mode {
    min-height: auto !important;
    margin: 0 0 8px !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
  }

  html body[data-page="challans"] .challan-table-host {
    min-height: 260px !important;
    max-height: 58dvh !important;
    overflow: auto !important;
    border-radius: 12px !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-cards {
    gap: 10px !important;
  }

  html body[data-page="challans"] .challan-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #e1e9f5 !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    white-space: normal !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip + .summary-chip {
    border-left: 1px solid #d8e5f5 !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-label {
    color: #64748b !important;
    font-size: 0.66rem !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip strong {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-summary-strip {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body[data-page="challans"] .action-bar {
    position: fixed !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: 112px !important;
    padding: 8px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body[data-page="challans"] .challan-action-left {
    min-width: 0 !important;
  }

  html body[data-page="challans"] .action-status {
    max-width: none !important;
    max-height: 28px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html body[data-page="challans"] .action-status:empty {
    display: none !important;
  }

  html body[data-page="challans"] .challan-unloading-inline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  html body[data-page="challans"] .challan-unloading-inline[hidden] {
    display: none !important;
  }

  html body[data-page="challans"] .action-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-bottom: 1px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body[data-page="challans"] .action-buttons::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="challans"] .action-buttons > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 88px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] #actionSaveBtn {
    min-width: 118px !important;
  }

  html body[data-page="challans"] .challan-options-menu {
    position: fixed !important;
    right: 10px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: min(58dvh, 420px) !important;
    overflow: auto !important;
  }
}

/* Final Received Challan phone cascade: keep the approved sheet tabs and old-record rows last. */
@media (max-width: 1080px) {
  html body[data-page="challans"] .old-record-toggle {
    display: none !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    min-height: 46px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-bottom: 1px solid #c9d5e6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body[data-page="challans"] .challan-mobile-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    flex: 1 0 auto !important;
    min-width: 82px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #c9d5e6 !important;
    border-bottom-color: #c9d5e6 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #edf2f8 !important;
    background-image: none !important;
    color: #334155 !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab.is-active {
    position: relative !important;
    z-index: 1 !important;
    border-color: #b9c8dd !important;
    border-bottom-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    box-shadow: 0 -1px 0 #ffffff inset, 0 -3px 10px rgba(15, 23, 42, 0.06) !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .action-bar {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
  }

  html body[data-page="challans"] #actionSaveBtn:not([hidden]),
  html body[data-page="challans"] #actionSaveChangesBtn:not([hidden]) {
    border-color: #2563eb !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22) !important;
  }

  html body[data-page="challans"] .action-buttons > button[hidden],
  html body[data-page="challans"] .action-buttons > button:disabled {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="challans"] .challan-mobile-tabs {
    min-height: 43px !important;
    margin-bottom: 2px !important;
  }

  html body[data-page="challans"] button.challan-mobile-tab {
    min-width: 76px !important;
    min-height: 39px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .challan-mode-message {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mode-message .pill {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .challan-header-grid,
  html body[data-page="challans"] .old-record-challan-select-row {
    display: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-waiting-for-old-record .challan-mobile-old-records-list {
    display: grid !important;
    gap: 8px !important;
    max-height: calc(100dvh - 320px) !important;
    min-height: 220px !important;
    overflow: auto !important;
    padding: 2px 0 88px !important;
  }

  html body[data-page="challans"] .challan-mobile-old-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .challan-mobile-old-main strong,
  html body[data-page="challans"] .challan-mobile-old-main span,
  html body[data-page="challans"] .challan-mobile-old-main small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .challan-mobile-old-load {
    min-width: 64px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
  }

  html body[data-page="challans"] .challan-unloading-inline {
    display: none !important;
  }

  html body[data-page="challans"] .action-bar {
    max-height: 92px !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="challans"] .challan-fit-layout.is-old-record-editing .old-record-controls {
    display: none !important;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="challans"] .workspace {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 7px 10px !important;
  }

  html body[data-page="challans"] .topbar-center,
  html body[data-page="challans"] .title-block p {
    display: none !important;
  }

  html body[data-page="challans"] .title-block h2 {
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
  }

  html body[data-page="challans"] .page-section.challan-fit-layout,
  html body[data-page="challans"] .challan-fit-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .challan-main-grid {
    height: auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  html body[data-page="challans"] .challan-header-card,
  html body[data-page="challans"] .challan-entry-card,
  html body[data-page="challans"] .challan-records-card {
    align-self: start !important;
    height: auto !important;
    padding: 9px !important;
  }

  html body[data-page="challans"] .challan-mode-strip {
    margin-bottom: 7px !important;
  }

  html body[data-page="challans"] .builty-entry-grid,
  html body[data-page="challans"] .challan-header-grid {
    gap: 6px !important;
  }

  html body[data-page="challans"] .desk-label-cell {
    min-height: 23px !important;
    padding: 0 7px !important;
    font-size: 0.68rem !important;
  }

  html body[data-page="challans"] .desk-field-cell > input,
  html body[data-page="challans"] .desk-field-cell > select,
  html body[data-page="challans"] .desk-field-cell > textarea,
  html body[data-page="challans"] .challan-transporter-combobox-input {
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  html body[data-page="challans"] .field-action-button {
    min-height: 34px !important;
  }

  html body[data-page="challans"] .builty-editor-mode {
    margin-bottom: 6px !important;
    font-size: 0.72rem !important;
  }

  html body[data-page="challans"] .challan-records-card {
    min-height: 210px !important;
    max-height: 250px !important;
  }

  html body[data-page="challans"] .challan-table-host {
    min-height: 186px !important;
  }

  html body[data-page="challans"] .challan-desktop-table-wrap {
    display: block !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-cards {
    display: none !important;
  }

  html body[data-page="challans"] .challan-summary-settlement-dock {
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  html body[data-page="challans"] .challan-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip {
    padding: 5px 6px !important;
    border-radius: 8px !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-label {
    font-size: 0.58rem !important;
  }

  html body[data-page="challans"] .challan-summary-strip .summary-chip strong {
    font-size: 0.72rem !important;
  }

  html body[data-page="challans"] .challan-settlement-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body[data-page="challans"] .challan-settlement-grid .desk-label-cell {
    min-height: 22px !important;
    padding: 0 5px !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  html body[data-page="challans"] .challan-settlement-grid .desk-field-cell > input {
    min-height: 32px !important;
    font-size: 0.78rem !important;
  }

  html body[data-page="challans"] .action-bar {
    min-height: 58px !important;
    padding: 8px 9px !important;
  }
}

/* Received Challan approved mobile revision: compact entry, ledger records, fixed bottom actions. */
@media (max-width: 1080px) {
  html body[data-page="challans"] .workspace {
    padding-bottom: 100px !important;
  }

  html body[data-page="challans"] .action-bar {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    max-height: none !important;
    padding: 8px 10px max(12px, env(safe-area-inset-bottom)) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -14px 32px rgba(15, 23, 42, 0.16) !important;
  }

  html body[data-page="challans"] .action-status {
    max-height: 18px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .action-buttons {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body[data-page="challans"] .action-buttons > button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] #challanDecisionModal .challan-decision-card {
    width: min(396px, calc(100vw - 32px)) !important;
    padding: 16px !important;
    border-radius: 17px !important;
  }

  html body[data-page="challans"] #challanDecisionModal .modal-header {
    margin-bottom: 16px !important;
  }

  html body[data-page="challans"] #challanDecisionModal .modal-actions {
    display: grid !important;
    grid-template-columns: 0.82fr 1fr 1.34fr !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
  }

  html body[data-page="challans"] #challanDecisionModal .modal-actions button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    flex: initial !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="challans"] .page-section.challan-fit-layout,
  html body[data-page="challans"] .challan-fit-layout {
    gap: 8px !important;
    padding-bottom: 10px !important;
  }

  html body[data-page="challans"] .challan-header-card,
  html body[data-page="challans"] .challan-entry-card,
  html body[data-page="challans"] .challan-records-card {
    padding: 9px !important;
    border-radius: 14px !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="entry"] .builty-entry-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 7px !important;
  }

  html body[data-page="challans"] .builty-entry-grid .builty-field-full,
  html body[data-page="challans"] .builty-entry-grid .builty-entry-row-eway {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="challans"] .builty-entry-grid .desk-label-cell {
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
  }

  html body[data-page="challans"] .builty-entry-grid .desk-field-cell > input,
  html body[data-page="challans"] .builty-entry-grid .desk-field-cell > select,
  html body[data-page="challans"] .builty-entry-grid .desk-field-cell > textarea {
    min-height: 34px !important;
    font-size: 0.82rem !important;
    padding: 0 9px !important;
  }

  html body[data-page="challans"] .builty-editor-mode {
    margin-bottom: 6px !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-records-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: calc(100dvh - 166px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-settlement-dock {
    order: -1 !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-chip {
    display: none !important;
    min-height: 48px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-chip:nth-child(1),
  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-chip:nth-child(2),
  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-chip.is-net {
    display: grid !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-chip.is-net {
    grid-column: auto !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-label {
    font-size: 0.58rem !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-summary-strip .summary-chip strong {
    font-size: 0.82rem !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="records"] .challan-table-host {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="challans"] .challan-desktop-table-wrap {
    display: none !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-shell {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 0 !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger {
    display: grid !important;
    min-width: 740px !important;
    padding: 8px !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-head,
  html body[data-page="challans"] .challan-mobile-builty-ledger-row {
    display: grid !important;
    grid-template-columns: 74px 126px 126px 86px 82px 82px 88px 78px !important;
    gap: 7px !important;
    align-items: center !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-bottom: 1px solid #d8e5f5 !important;
    background: #f8fbff !important;
    color: #64748b !important;
    font-size: 0.58rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-row {
    min-height: 58px !important;
    padding: 7px 8px !important;
    border-bottom: 1px solid #edf3fa !important;
    color: #0f172a !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-row:last-child {
    border-bottom: 0 !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-row.is-selected {
    background: #eff6ff !important;
    outline: 2px solid rgba(37, 99, 235, 0.22) !important;
    outline-offset: -2px !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-ledger-row small {
    display: block !important;
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-row-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    color: #2563eb !important;
    font-size: 0.68rem !important;
  }

  html body[data-page="challans"] .challan-mobile-builty-eway .eway-status-panel {
    min-width: 0 !important;
    max-width: 86px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-summary-settlement-dock {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-summary-strip .summary-chip.is-net {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #eff6ff !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-settlement-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-settlement-grid .desk-label-cell {
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 0.66rem !important;
  }

  html body[data-page="challans"] .challan-fit-layout[data-challan-mobile-step="settlement"] .challan-settlement-grid .desk-field-cell > input {
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  html body[data-page="challans"] .action-bar {
    min-height: 82px !important;
  }

  html body[data-page="challans"] .action-buttons > button {
    font-size: 0.74rem !important;
  }

  html body[data-page="challans"] #challanDecisionModal .modal-actions button {
    font-size: 0.72rem !important;
  }
}

/* Mobile sidebar session card: keep the company logo/avatar thumbnail-sized. */
@media (max-width: 1080px) {
  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-bottom {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-card,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-card,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 64px !important;
    max-height: 72px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-card > .rail-session-avatar,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-card > .rail-session-avatar,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-card > .rail-session-avatar {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #ffffff !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-card > .rail-session-avatar .rail-session-avatar.is-image,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-card > .rail-session-avatar .rail-session-avatar.is-image,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-card > .rail-session-avatar .rail-session-avatar.is-image {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-card > .rail-session-avatar img,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-card > .rail-session-avatar img,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-card > .rail-session-avatar img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.16) !important;
  }
}

/* Local Delivery receipt-first mobile/tablet flow. */
body[data-page="delivery"] .delivery-mobile-mode-tabs,
body[data-page="delivery"] .delivery-mobile-bottom-nav,
body[data-page="delivery"] .delivery-mode-notice,
body[data-page="delivery"] .delivery-inline-more-btn {
  display: none;
}

body[data-page="delivery"] .delivery-form-scroll {
  display: contents;
}

/* Desktop guardrail: mobile/tablet work must not change the original desk flow. */
@media (min-width: 1081px) {
  html body[data-page="delivery"] .delivery-side-stack {
    display: flex !important;
    flex-direction: column !important;
    align-content: stretch !important;
    align-items: stretch !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body[data-page="delivery"] .delivery-side-stack > .panel {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  html body[data-page="delivery"] .delivery-history-panel {
    overflow: visible !important;
  }

  html body[data-page="delivery"] .delivery-history-record-preview {
    display: grid !important;
    gap: 8px !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 0 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-head h3 {
    margin: 2px 0 0 !important;
    color: #172033 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-head p:not(.eyebrow) {
    margin: 4px 0 0 !important;
    color: #4b5f75 !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-grid .delivery-context-pill {
    min-height: 48px !important;
    padding: 8px 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-grid .delivery-context-pill .summary-label {
    display: block !important;
    overflow: hidden !important;
    color: #71839a !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-grid .delivery-context-pill strong {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-history-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="delivery"] .delivery-history-actions button[hidden] {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-print-settings-panel {
    z-index: auto !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="delivery"] {
    overflow-x: hidden !important;
    background: #f6f8fc !important;
  }

  html body[data-page="delivery"] .bg-orb,
  html body[data-page="delivery"] .bg-grid {
    display: none !important;
  }

  html body[data-page="delivery"] .workspace {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #f6f8fc !important;
  }

  html body[data-page="delivery"] .topbar {
    min-height: 58px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #d8e5f5 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="delivery"] .topbar-center,
  html body[data-page="delivery"] .title-block p {
    display: none !important;
  }

  html body[data-page="delivery"] .title-block h2 {
    max-width: 58vw !important;
    overflow: hidden !important;
    color: #182132 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .page-section {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: calc(100dvh - 58px) !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="delivery"] #accountNoticeHost:empty {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-mobile-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 2px !important;
    min-height: 48px !important;
    padding: 0 4px !important;
    border-bottom: 1px solid #bdd2ef !important;
  }

  html body[data-page="delivery"] .delivery-mobile-mode-tab {
    min-width: 0 !important;
    min-height: 42px !important;
    margin-bottom: -1px !important;
    padding: 0 6px !important;
    border: 1px solid #bdd2ef !important;
    border-bottom-color: #bdd2ef !important;
    border-radius: 10px 10px 0 0 !important;
    background: #eaf2ff !important;
    background-image: none !important;
    color: #334155 !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    box-shadow: inset 0 -1px 0 #bdd2ef !important;
  }

  html body[data-page="delivery"] .delivery-mobile-mode-tab.is-active {
    border-bottom-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #2563eb !important;
    box-shadow: 0 -2px 0 #2563eb, 0 1px 0 #ffffff !important;
  }

  html body[data-page="delivery"] .delivery-desk {
    display: grid !important;
    grid-template-columns: minmax(238px, 0.34fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  html body[data-page="delivery"] .delivery-queue-panel,
  html body[data-page="delivery"] .delivery-editor-panel,
  html body[data-page="delivery"] .delivery-side-stack {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"] .delivery-editor-panel {
    display: block !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="pending"] .delivery-editor-panel,
  html body[data-page="delivery"][data-delivery-mobile-mode="pending"] .delivery-side-stack,
  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-queue-panel,
  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-editor-panel {
    display: none !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="pending"] .delivery-desk,
  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-desk {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-side-stack {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-control-panel {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-console-form {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  html body[data-page="delivery"] .delivery-form-scroll {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px 8px 0 !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid #bcd2f1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice[hidden] {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice strong,
  html body[data-page="delivery"] .delivery-mode-notice span {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice strong {
    margin-top: 2px !important;
    color: #111827 !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice span:not(.status-badge) {
    margin-top: 4px !important;
    color: #475569 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="delivery"] .delivery-topband,
  html body[data-page="delivery"] .delivery-console-block {
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"] .delivery-topband {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  html body[data-page="delivery"] .delivery-topband-fields {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  html body[data-page="delivery"] .delivery-topband-row,
  html body[data-page="delivery"] .delivery-charge-row,
  html body[data-page="delivery"] .delivery-detail-row,
  html body[data-page="delivery"] .delivery-payment-block label.desk-row,
  html body[data-page="delivery"] .delivery-handling-grid label.desk-row,
  html body[data-page="delivery"] .delivery-katt-door-grid label.desk-row {
    display: grid !important;
    grid-template-columns: minmax(86px, 0.42fr) minmax(0, 1fr) !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  html body[data-page="delivery"] .delivery-topband-label.desk-label-cell,
  html body[data-page="delivery"] .delivery-charge-label.desk-label-cell,
  html body[data-page="delivery"] .delivery-detail-label.desk-label-cell,
  html body[data-page="delivery"] .delivery-payment-block .desk-label-cell,
  html body[data-page="delivery"] .delivery-handling-grid .desk-label-cell,
  html body[data-page="delivery"] .delivery-katt-door-grid .desk-label-cell {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-right: 1px solid #d8e5f5 !important;
    border-radius: 10px 0 0 10px !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-topband-row input,
  html body[data-page="delivery"] .delivery-forward-combobox > input[type="text"],
  html body[data-page="delivery"] .delivery-charge-row > input,
  html body[data-page="delivery"] .delivery-detail-row > input,
  html body[data-page="delivery"] .delivery-payment-block input,
  html body[data-page="delivery"] .delivery-payment-block select,
  html body[data-page="delivery"] .delivery-handling-grid input,
  html body[data-page="delivery"] .delivery-katt-door-grid input,
  html body[data-page="delivery"] .delivery-katt-door-grid select {
    min-height: 36px !important;
    padding: 6px 9px !important;
    border-radius: 0 10px 10px 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="delivery"] .delivery-editor-meta {
    display: grid !important;
    gap: 6px !important;
    min-width: 122px !important;
    justify-items: stretch !important;
  }

  html body[data-page="delivery"] .delivery-receipt-chip {
    min-height: 54px !important;
    padding: 8px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
  }

  html body[data-page="delivery"] .delivery-receipt-workbench {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="delivery"] .delivery-receipt-caption,
  html body[data-page="delivery"] .delivery-form-section-title {
    position: static !important;
    margin: 0 0 6px !important;
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  html body[data-page="delivery"] .delivery-legacy-workbench {
    display: grid !important;
    grid-template-columns: minmax(190px, 0.42fr) minmax(0, 0.58fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="delivery"] .delivery-charge-grid,
  html body[data-page="delivery"] .delivery-gr-grid,
  html body[data-page="delivery"] .delivery-payment-block .delivery-settlement-grid,
  html body[data-page="delivery"] .delivery-handling-grid,
  html body[data-page="delivery"] .delivery-katt-door-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 0 !important;
    align-content: start !important;
  }

  html body[data-page="delivery"] .delivery-gr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-y: auto !important;
  }

  html body[data-page="delivery"] .delivery-detail-row,
  html body[data-page="delivery"] .delivery-charge-row,
  html body[data-page="delivery"] .delivery-payment-block label.desk-row,
  html body[data-page="delivery"] .delivery-handling-grid label.desk-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"] .delivery-detail-label.desk-label-cell,
  html body[data-page="delivery"] .delivery-charge-label.desk-label-cell,
  html body[data-page="delivery"] .delivery-payment-block .desk-label-cell,
  html body[data-page="delivery"] .delivery-handling-grid .desk-label-cell {
    min-height: 22px !important;
    padding: 7px 9px 0 !important;
    border-right: 1px solid #d8e5f5 !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  html body[data-page="delivery"] .delivery-detail-row > input,
  html body[data-page="delivery"] .delivery-detail-dual input,
  html body[data-page="delivery"] .delivery-charge-row > input,
  html body[data-page="delivery"] .delivery-payment-block input,
  html body[data-page="delivery"] .delivery-payment-block select,
  html body[data-page="delivery"] .delivery-handling-grid input {
    border-radius: 0 0 10px 10px !important;
  }

  html body[data-page="delivery"] .delivery-payment-block .delivery-settlement-grid > .full-span,
  html body[data-page="delivery"] .delivery-handling-grid .delivery-vehicle-row {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="delivery"] .delivery-summary-card {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-save-block {
    position: static !important;
    bottom: 0 !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
  }

  html body[data-page="delivery"] .delivery-balance-strip {
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"] .delivery-balance-title {
    display: block !important;
    color: #64748b !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  html body[data-page="delivery"] .delivery-balance-value {
    display: block !important;
    margin-top: 2px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    text-align: left !important;
  }

  html body[data-page="delivery"] .delivery-inline-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="delivery"] .delivery-inline-actions[hidden] {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-inline-actions button {
    min-width: 122px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-queue-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="delivery"] .delivery-queue-panel .card-heading,
  html body[data-page="delivery"] .delivery-history-card-heading,
  html body[data-page="delivery"] .delivery-print-settings-panel .card-heading {
    align-items: flex-start !important;
    margin: 0 !important;
  }

  html body[data-page="delivery"] .delivery-queue-stats {
    display: flex !important;
    gap: 6px !important;
  }

  html body[data-page="delivery"] .delivery-mini-stat {
    min-width: 58px !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
  }

  html body[data-page="delivery"] .delivery-mini-stat .summary-label {
    display: block !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 0.56rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-mini-stat strong {
    display: block !important;
    margin-top: 3px !important;
    color: #0f172a !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-queue-panel label.desk-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  html body[data-page="delivery"] .delivery-queue-panel label.desk-row .desk-label-cell {
    min-height: 22px !important;
    padding: 7px 9px 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f8fbff !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-queue-panel input[type="search"] {
    min-height: 40px !important;
    border-radius: 0 0 10px 10px !important;
    font-size: 0.9rem !important;
  }

  html body[data-page="delivery"] .delivery-queue-list {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  html body[data-page="delivery"] .delivery-queue-table {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="delivery"] .delivery-queue-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "gr action"
      "consignee action"
      "firm topay" !important;
    gap: 5px 8px !important;
    min-height: 74px !important;
    padding: 9px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"] .delivery-queue-item.is-active {
    border-color: #93b4ff !important;
    background: #f8fbff !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08) !important;
  }

  html body[data-page="delivery"] .delivery-queue-section {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="delivery"] .delivery-queue-section-gr {
    grid-area: gr !important;
  }

  html body[data-page="delivery"] .delivery-queue-section-consignee {
    grid-area: consignee !important;
  }

  html body[data-page="delivery"] .delivery-queue-section-firm {
    grid-area: firm !important;
  }

  html body[data-page="delivery"] .delivery-queue-section-topay {
    grid-area: topay !important;
    text-align: right !important;
  }

  html body[data-page="delivery"] .delivery-queue-label {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-queue-value {
    display: block !important;
    overflow: hidden !important;
    color: #475569 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-queue-value-gr {
    color: #0f172a !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-queue-value-topay {
    color: #2563eb !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-side-stack > .panel {
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-history-panel {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: hidden auto !important;
  }

  html body[data-page="delivery"] .delivery-history-header-toggle {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-history-filters {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  html body[data-page="delivery"] .delivery-history-filter-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-page="delivery"] .delivery-history-filter-row .desk-row,
  html body[data-page="delivery"] .delivery-print-settings-panel .desk-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"] .delivery-history-filter-row .desk-label-cell,
  html body[data-page="delivery"] .delivery-print-settings-panel .desk-label-cell {
    min-height: 22px !important;
    padding: 7px 9px 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-history-filter-row select,
  html body[data-page="delivery"] .delivery-print-settings-panel input,
  html body[data-page="delivery"] .delivery-print-settings-panel select {
    width: 100% !important;
    min-height: 36px !important;
    border-radius: 0 0 10px 10px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
  }

  html body[data-page="delivery"] .delivery-history-search-row {
    display: block !important;
  }

  html body[data-page="delivery"] .delivery-history-search-row input {
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
  }

  html body[data-page="delivery"] .delivery-history-record-preview {
    display: grid !important;
    order: 5 !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  html body[data-page="delivery"] .delivery-history-record-preview[hidden] {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-head h3 {
    margin: 2px 0 0 !important;
    color: #0f172a !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-head p:not(.eyebrow) {
    margin: 4px 0 0 !important;
    color: #475569 !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-page="delivery"] .delivery-history-preview-grid .summary-pill,
  html body[data-page="delivery"] .delivery-history-preview-grid .summary-row {
    min-height: 52px !important;
    padding: 8px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
  }

  html body[data-page="delivery"] .delivery-history-actions {
    display: grid !important;
    order: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] #deliverySaveBtn {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-history-actions button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-print-settings-panel {
    display: grid !important;
    gap: 8px !important;
  }

  html body[data-page="delivery"] .delivery-print-settings-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 40px !important;
  }

  html body[data-page="delivery"] .delivery-print-settings-actions button {
    min-height: 38px !important;
    font-size: 0.72rem !important;
  }

  html body[data-page="delivery"] .delivery-mobile-bottom-nav {
    display: none !important;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="delivery"][data-delivery-mobile-mode="delivery"] .delivery-desk {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="delivery"] .delivery-side-stack {
    display: none !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="delivery"] .delivery-queue-panel {
    display: grid !important;
  }

  html body[data-page="delivery"] .delivery-mobile-mode-tabs {
    width: min(520px, 68vw) !important;
  }

  html body[data-page="delivery"] .page-section {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="delivery"] .workspace {
    height: 100dvh !important;
  }

  html body[data-page="delivery"] .page-section {
    height: calc(100dvh - 54px) !important;
    padding: 8px !important;
  }

  html body[data-page="delivery"] .delivery-desk,
  html body[data-page="delivery"][data-delivery-mobile-mode="delivery"] .delivery-desk {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="delivery"] .delivery-queue-panel,
  html body[data-page="delivery"][data-delivery-mobile-mode="delivery"] .delivery-side-stack {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-editor-panel {
    padding: 8px !important;
  }

  html body[data-page="delivery"] .delivery-console-form {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    padding-bottom: 0 !important;
  }

  html body[data-page="delivery"] .delivery-topband {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"] .delivery-editor-meta {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-width: 0 !important;
  }

  html body[data-page="delivery"] .delivery-legacy-workbench,
  html body[data-page="delivery"] .delivery-payment-block .delivery-settlement-grid,
  html body[data-page="delivery"] .delivery-handling-grid,
  html body[data-page="delivery"] .delivery-katt-door-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  html body[data-page="delivery"] .delivery-charge-grid,
  html body[data-page="delivery"] .delivery-gr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  html body[data-page="delivery"] .delivery-payment-block .delivery-settlement-grid,
  html body[data-page="delivery"] .delivery-handling-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="delivery"] .delivery-payment-block .delivery-settlement-grid > .full-span,
  html body[data-page="delivery"] .delivery-handling-grid .delivery-received-row,
  html body[data-page="delivery"] .delivery-handling-grid .delivery-vehicle-row {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice {
    padding: 9px !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice strong {
    font-size: 0.94rem !important;
  }

  html body[data-page="delivery"] .delivery-save-block {
    margin-top: 8px !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="pending"] .delivery-mobile-bottom-nav,
  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-mobile-bottom-nav {
    position: absolute !important;
    inset: auto 10px 10px !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="pending"] .delivery-desk,
  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-desk {
    padding-bottom: 78px !important;
  }

  html body[data-page="delivery"] .delivery-mobile-bottom-nav button {
    min-width: 0 !important;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #334155 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="delivery"] .delivery-mobile-bottom-nav button.is-active,
  html body[data-page="delivery"] .delivery-mobile-bottom-nav button[data-delivery-mode].is-active {
    background: #eef5ff !important;
    color: #2563eb !important;
    box-shadow: inset 0 2px 0 #2563eb !important;
  }

  html body[data-page="delivery"][data-delivery-mobile-mode="old-records"] .delivery-side-stack {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  html body[data-page="delivery"] .delivery-history-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="delivery"] .delivery-print-settings-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"] .delivery-print-settings-actions #deliveryResetPrintPrefsBtn {
    display: none !important;
  }
}

/* Local Delivery approved mock alignment pass. */
@media (max-width: 1080px) {
  html body[data-page="delivery"] .delivery-mode-notice {
    align-items: center !important;
    padding: 10px !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice .eyebrow,
  html body[data-page="delivery"] .delivery-selected-summary-kicker {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice .status-badge,
  html body[data-page="delivery"] .delivery-selected-summary-head .status-badge {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 5px 9px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    color: #16a34a !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice .status-badge.is-pending,
  html body[data-page="delivery"] .delivery-selected-summary-head .status-badge.is-pending,
  html body[data-page="delivery"] .delivery-mode-notice .status-badge.is-warning,
  html body[data-page="delivery"] .delivery-selected-summary-head .status-badge.is-warning {
    border-color: #fde68a !important;
    background: #fffbeb !important;
    color: #b45309 !important;
  }

  html body[data-page="delivery"] .delivery-mode-notice .status-badge.is-delivered,
  html body[data-page="delivery"] .delivery-selected-summary-head .status-badge.is-delivered,
  html body[data-page="delivery"] .delivery-mode-notice .status-badge.is-counter-delivered,
  html body[data-page="delivery"] .delivery-selected-summary-head .status-badge.is-counter-delivered {
    border-color: #bbf7d0 !important;
    background: #ecfdf3 !important;
    color: #16a34a !important;
  }

  html body[data-page="delivery"] .delivery-receipt-caption {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-panel {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-panel:has(.delivery-selected-summary:empty) {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-card {
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-head strong,
  html body[data-page="delivery"] .delivery-selected-summary-head small {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-head strong {
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-selected-summary-head small {
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #475569 !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-charge-grid {
    position: relative !important;
  }

  html body[data-page="delivery"] .delivery-charge-grid::before {
    content: "RECEIPT CHARGES\A Charges and payment" !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    white-space: pre-line !important;
    color: #0f172a !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="delivery"] .delivery-charge-grid::after {
    content: "Topay" !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    padding: 5px 9px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="delivery"] .delivery-loaded-data-column {
    display: grid !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="delivery"] .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html body[data-page="delivery"] .topbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html body[data-page="delivery"] .topbar-right {
    justify-self: end !important;
  }

  html body[data-page="delivery"] .topbar-notice-button {
    display: none !important;
  }

  html body[data-page="delivery"] .title-block {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body[data-page="delivery"] .title-block h2 {
    max-width: none !important;
  }

  html body[data-page="delivery"][data-delivery-has-context="false"] .delivery-receipt-workbench,
  html body[data-page="delivery"][data-delivery-has-context="false"] .delivery-payment-block,
  html body[data-page="delivery"][data-delivery-has-context="false"] .delivery-katt-door-shell,
  html body[data-page="delivery"][data-delivery-has-context="false"] .delivery-handling-block {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-console-form {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  html body[data-page="delivery"] .delivery-form-scroll {
    display: block !important;
    padding: 0 2px 8px 0 !important;
  }

  html body[data-page="delivery"] .delivery-form-scroll > .delivery-console-block {
    margin-bottom: 8px !important;
  }

  html body[data-page="delivery"] .delivery-topband {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html body[data-page="delivery"] .delivery-topband-row,
  html body[data-page="delivery"] .delivery-topband-row-forward {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="delivery"] .delivery-topband-label.desk-label-cell {
    min-height: 25px !important;
    padding: 8px 10px 0 !important;
    border-right: 1px solid #d8e5f5 !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  html body[data-page="delivery"] .delivery-topband-row input,
  html body[data-page="delivery"] .delivery-forward-combobox > input[type="text"] {
    min-height: 43px !important;
    border-radius: 0 0 10px 10px !important;
    font-size: 0.95rem !important;
  }

  html body[data-page="delivery"] .delivery-editor-meta {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-receipt-workbench {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body[data-page="delivery"] .delivery-legacy-workbench {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body[data-page="delivery"] .delivery-loaded-data-column {
    order: 1 !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="delivery"] .delivery-charge-grid {
    order: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="delivery"] .delivery-gr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-page="delivery"] .delivery-detail-row,
  html body[data-page="delivery"] .delivery-charge-row {
    min-width: 0 !important;
  }

  html body[data-page="delivery"] .delivery-detail-label.desk-label-cell,
  html body[data-page="delivery"] .delivery-charge-label.desk-label-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-payment-block,
  html body[data-page="delivery"] .delivery-handling-block {
    padding: 10px !important;
  }

  html body[data-page="delivery"] .delivery-save-block {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 64px !important;
    margin-top: 0 !important;
    padding: 8px !important;
  }

  html body[data-page="delivery"] .delivery-inline-actions {
    display: grid !important;
    grid-template-columns: 68px minmax(110px, 1fr) !important;
    gap: 7px !important;
    width: auto !important;
  }

  html body[data-page="delivery"] .delivery-inline-actions[hidden] {
    display: none !important;
  }

  html body[data-page="delivery"] .delivery-inline-actions button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page="delivery"] .delivery-inline-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #bfdbfe !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #2563eb !important;
    box-shadow: none !important;
  }

  html body[data-page="delivery"] #deliveryInlinePrintBtn {
    border: 0 !important;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  html body[data-page="delivery"] #deliveryInlinePrintBtn:disabled {
    background: #86a7ef !important;
    color: #ffffff !important;
  }

  html body[data-page="delivery"][data-delivery-old-editing="true"] .delivery-inline-actions {
    grid-template-columns: minmax(130px, 1fr) !important;
  }

  html body[data-page="delivery"][data-delivery-old-editing="true"] .delivery-inline-more-btn {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="collections"] .workspace,
  html body[data-page="collections"] .app-main {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html body[data-page="collections"] .collections-page {
    height: auto !important;
    min-height: calc(100dvh - 54px) !important;
    overflow: visible !important;
  }

  html body[data-page="collections"] .collection-recovery-workspace {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: calc(100dvh - 76px) !important;
    height: auto !important;
    padding: 10px !important;
    overflow: visible !important;
    border-radius: 12px !important;
  }

  html body[data-page="collections"] .collection-sheet-tabs {
    display: flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    border-bottom: 1px solid #c8d8ec !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body[data-page="collections"] .collection-sheet-tabs::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="collections"] button.collection-sheet-tab,
  html body[data-page="collections"] .collection-sheet-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 40px !important;
    min-width: 118px !important;
    padding: 0 16px !important;
    border: 1px solid #c8d8ec !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #eef5fd !important;
    background-image: none !important;
    color: #48627f !important;
    box-shadow: none !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body[data-page="collections"] .collection-sheet-tab.is-active {
    position: relative !important;
    z-index: 2 !important;
    min-height: 44px !important;
    margin-bottom: -1px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #14315c !important;
    border-color: #9eb9df !important;
  }

  html body[data-page="collections"] .collection-recovery-layout {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-layout {
    padding-bottom: 72px !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="saved"] .collection-recovery-layout {
    display: none !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="saved"] .collection-saved-sheet {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: min(620px, calc(100dvh - 160px)) !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  html body[data-page="collections"]:not([data-collection-sheet-mode="saved"]) .collection-saved-sheet {
    display: none !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-right,
  html body[data-page="collections"][data-collection-sheet-mode="pending"] .collection-recovery-left {
    display: none !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="pending"] .collection-recovery-right {
    display: grid !important;
    min-height: min(640px, calc(100dvh - 156px)) !important;
    overflow: hidden !important;
  }

  html body[data-page="collections"] .collection-recovery-entry,
  html body[data-page="collections"] .collection-recovery-history-shell,
  html body[data-page="collections"] .collection-recovery-right {
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body[data-page="collections"] .collection-recovery-preview .collection-recovery-actions {
    display: none !important;
  }

  html body[data-page="collections"] label[for="collectionRecoveryFilterInput"] .desk-label-cell {
    font-size: 0 !important;
  }

  html body[data-page="collections"] label[for="collectionRecoveryFilterInput"] .desk-label-cell::after {
    content: "Delivery Person" !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-sheet-summary {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 45 !important;
    display: grid !important;
    grid-template-columns: minmax(74px, auto) minmax(116px, 1fr) minmax(128px, 0.9fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 64px !important;
    margin: 0 -2px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid #d0e0f5 !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -14px 28px rgba(30, 59, 94, 0.14) !important;
  }

  html body[data-page="collections"]:not([data-collection-sheet-mode="collect"]) .collection-sheet-summary {
    display: none !important;
  }

  html body[data-page="collections"] .collection-sheet-summary > div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body[data-page="collections"] .collection-sheet-summary span {
    color: #6d7f95 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  html body[data-page="collections"] .collection-sheet-summary strong {
    min-width: 0 !important;
    color: #0f172a !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="collections"] #collectionRecoverySheetSaveBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22) !important;
    white-space: nowrap !important;
  }

  html body[data-page="collections"] #collectionRecoverySheetSaveBtn:disabled {
    background: #9cb5ef !important;
    box-shadow: none !important;
  }

  html body[data-page="collections"] #collectionRecoverySheetSaveBtn svg,
  html body[data-page="collections"] #collectionRecoverySheetSaveBtn .admin-reference-icon {
    width: 16px !important;
    height: 16px !important;
  }

  html body[data-page="collections"] .collection-pending-load-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="collections"] #collectionRecoverySavedList,
  html body[data-page="collections"] #collectionRecoveryPendingList,
  html body[data-page="collections"] #receiptCollectionsHistory {
    min-height: 0 !important;
    overscroll-behavior: contain !important;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-left {
    display: grid !important;
    grid-template-columns: minmax(310px, 0.96fr) minmax(360px, 1.04fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: min(650px, calc(100dvh - 166px)) !important;
    overflow: hidden !important;
  }

  html body[data-page="collections"] .collection-recovery-entry,
  html body[data-page="collections"] .collection-recovery-history-shell {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="collections"] .collection-recovery-entry {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body[data-page="collections"] .collection-recovery-entry-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  html body[data-page="collections"] .collection-recovery-form-grid:not(.collection-recovery-form-grid-primary) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="collections"] .collection-recovery-history-shell {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory,
  html body[data-page="collections"] #collectionRecoveryPendingList,
  html body[data-page="collections"] #collectionRecoverySavedList {
    overflow: auto !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="collections"] .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }

  html body[data-page="collections"] .topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html body[data-page="collections"] .topbar-left > div {
    min-width: 0 !important;
  }

  html body[data-page="collections"] .topbar h1,
  html body[data-page="collections"] #currentPageTitle {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  html body[data-page="collections"] .topbar-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html body[data-page="collections"] .topbar-notice-button,
  html body[data-page="collections"] .shell-profile-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  html body[data-page="collections"] .collection-recovery-workspace {
    min-height: calc(100dvh - 70px) !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-layout {
    padding-bottom: 68px !important;
  }

  html body[data-page="collections"] .collection-sheet-tab {
    min-width: 108px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
  }

  html body[data-page="collections"] .collection-sheet-tab.is-active {
    min-height: 42px !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(180px, auto) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body[data-page="collections"] .collection-recovery-entry,
  html body[data-page="collections"] .collection-recovery-history-shell,
  html body[data-page="collections"] .collection-recovery-right {
    padding: 10px !important;
  }

  html body[data-page="collections"] .collection-recovery-entry-grid,
  html body[data-page="collections"] .collection-recovery-form-grid {
    gap: 7px !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry label.desk-row {
    display: grid !important;
    grid-template-columns: minmax(94px, 0.42fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry label.desk-row.full-span {
    grid-template-columns: minmax(108px, 0.44fr) minmax(0, 1fr) !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry .desk-label-cell {
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 0 9px !important;
    border: 1px solid #d8e5f5 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d8e5f5 !important;
    border-radius: 10px 0 0 10px !important;
    background: #f8fbff !important;
    color: #334155 !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry label.desk-row:focus-within > .desk-label-cell {
    background: #eef6ff !important;
    color: #1d4ed8 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] label[for="collectionRecoveryFilterInput"] .desk-label-cell {
    font-size: 0 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] label[for="collectionRecoveryFilterInput"] .desk-label-cell::after {
    content: "Delivery Person" !important;
    display: block !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry .desk-field-cell {
    min-width: 0 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry .desk-field-cell > input,
  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry .desk-field-cell > select,
  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-entry .desk-field-cell > textarea,
  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-combobox > input[type="text"],
  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-field-with-hint > input {
    min-height: 40px !important;
    border-radius: 0 10px 10px 0 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="collect"] .collection-recovery-field-with-hint {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  html body[data-page="collections"] .collection-recovery-loaded-summary {
    min-height: 0 !important;
    padding: 8px !important;
  }

  html body[data-page="collections"] .collection-recovery-preview-empty {
    min-height: 72px !important;
  }

  html body[data-page="collections"] .collection-recovery-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body[data-page="collections"] .collection-recovery-detail-list > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 7px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 9px !important;
    background: #f8fbff !important;
  }

  html body[data-page="collections"] .collection-recovery-detail-list dd {
    text-align: left !important;
  }

  html body[data-page="collections"] .collection-recovery-history-shell {
    max-height: min(24dvh, 190px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory .empty-state {
    display: none !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory:has(.empty-state) {
    display: none !important;
    min-height: 0 !important;
  }

  html body[data-page="collections"][data-collection-sheet-mode="pending"] .collection-recovery-right,
  html body[data-page="collections"][data-collection-sheet-mode="saved"] .collection-saved-sheet {
    min-height: calc(100dvh - 150px) !important;
  }

  html body[data-page="collections"] .collection-list-head-with-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html body[data-page="collections"] .collection-recovery-right > .collection-list-head-with-action {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  html body[data-page="collections"] .collection-recovery-right > .collection-list-head .collection-list-head-copy {
    display: grid !important;
    gap: 2px !important;
  }

  html body[data-page="collections"] .collection-recovery-right > .collection-list-head strong {
    white-space: nowrap !important;
  }

  html body[data-page="collections"] .collection-pending-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    width: 100% !important;
  }

  html body[data-page="collections"] .collection-staff-link-btn {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="collections"] .collection-pending-search-field,
  html body[data-page="collections"] .collection-pending-date-field,
  html body[data-page="collections"] .collection-pending-tools input {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="collections"] .collection-pending-date-field {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory table,
  html body[data-page="collections"] #collectionRecoveryPendingList table,
  html body[data-page="collections"] #collectionRecoverySavedList table,
  html body[data-page="collections"] #receiptCollectionsHistory tbody,
  html body[data-page="collections"] #collectionRecoveryPendingList tbody,
  html body[data-page="collections"] #collectionRecoverySavedList tbody {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory thead,
  html body[data-page="collections"] #collectionRecoveryPendingList thead,
  html body[data-page="collections"] #collectionRecoverySavedList thead {
    display: none !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory tr,
  html body[data-page="collections"] #collectionRecoveryPendingList tr,
  html body[data-page="collections"] #collectionRecoverySavedList tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td,
  html body[data-page="collections"] #collectionRecoveryPendingList td,
  html body[data-page="collections"] #collectionRecoverySavedList td {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td::before,
  html body[data-page="collections"] #collectionRecoveryPendingList td::before,
  html body[data-page="collections"] #collectionRecoverySavedList td::before {
    display: none !important;
    content: none !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(1),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(1) {
    grid-column: 1 !important;
    color: #102a56 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(2),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(2) {
    display: none !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(3),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(3),
  html body[data-page="collections"] #collectionRecoverySavedList td:nth-child(2) {
    grid-column: 1 !important;
    color: #0f172a !important;
    font-weight: 900 !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(4),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(4),
  html body[data-page="collections"] #collectionRecoverySavedList td:nth-child(3) {
    grid-column: 1 !important;
    color: #64748b !important;
    font-weight: 800 !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(5),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(6),
  html body[data-page="collections"] #collectionRecoverySavedList td:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    color: #2563eb !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(6),
  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(7),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(5),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(7),
  html body[data-page="collections"] #collectionRecoverySavedList td:nth-child(5),
  html body[data-page="collections"] #collectionRecoverySavedList td:nth-child(6) {
    grid-column: 1 / -1 !important;
    color: #64748b !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
  }

  html body[data-page="collections"] #receiptCollectionsHistory td:nth-child(8),
  html body[data-page="collections"] #collectionRecoveryPendingList td:nth-child(8) {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    padding-top: 4px !important;
  }

  html body[data-page="collections"] .collection-sheet-summary {
    grid-template-columns: minmax(58px, auto) minmax(0, 1fr) minmax(102px, 0.82fr) !important;
    min-height: 62px !important;
    margin-inline: -1px !important;
    padding-inline: 9px !important;
  }

  html body[data-page="collections"] .collection-sheet-summary strong {
    font-size: 0.94rem !important;
  }

  html body[data-page="collections"] #collectionRecoverySheetSaveBtn {
    min-height: 44px !important;
    padding-inline: 9px !important;
    font-size: 0.76rem !important;
  }

  html body[data-page="collections-staff"] .staff-collection-workspace {
    gap: 12px !important;
    padding: 14px !important;
  }

  html body[data-page="collections-staff"] .staff-collection-panel {
    padding: 14px !important;
  }

  html body[data-page="collections-staff"] .collection-list-head-with-action {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  html body[data-page="collections-staff"] .collection-pending-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="collections-staff"] .collection-pending-search-field,
  html body[data-page="collections-staff"] .collection-pending-tools input,
  html body[data-page="collections-staff"] .collection-pending-tools button {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList table,
  html body[data-page="collections-staff"] #staffCollectionBatchList table,
  html body[data-page="collections-staff"] #staffCollectionPendingList tbody,
  html body[data-page="collections-staff"] #staffCollectionBatchList tbody {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList thead,
  html body[data-page="collections-staff"] #staffCollectionBatchList thead {
    display: none !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList tr,
  html body[data-page="collections-staff"] #staffCollectionBatchList tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px !important;
    padding: 10px !important;
    border: 1px solid #d8e5f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList td,
  html body[data-page="collections-staff"] #staffCollectionBatchList td {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList td::before,
  html body[data-page="collections-staff"] #staffCollectionBatchList td::before {
    display: none !important;
    content: none !important;
  }
}

/* Accounts responsive pass: scoped so the desktop account directory keeps its
   original table-first layout while phone/tablet use the approved workbench. */
@media screen and (max-width: 720px) {
  html body[data-page="accounts"] {
    overflow-x: hidden !important;
    background: #f6f8fc !important;
  }

  html body[data-page="accounts"] .app-shell,
  html body[data-page="accounts"] .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body[data-page="accounts"] .app-shell {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="accounts"] .workspace {
    display: block !important;
    padding: 0 !important;
    background: #f6f8fc !important;
  }

  html body[data-page="accounts"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid #d9e5f3 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(14px) !important;
  }

  html body[data-page="accounts"] .topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .topbar-center {
    display: none !important;
  }

  html body[data-page="accounts"] .topbar-right {
    justify-self: end !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .shell-menu-button {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
  }

  html body[data-page="accounts"] #currentPageTitle {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  html body[data-page="accounts"] .shell-profile-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  html body[data-page="accounts"] .accounts-page {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 54px) !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  html body[data-page="accounts"] .section-heading {
    display: none !important;
  }

  html body[data-page="accounts"] #accountNoticeHost:empty {
    display: none !important;
  }

  html body[data-page="accounts"] .account-directory-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, auto) auto !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100dvh - 74px) !important;
    height: auto !important;
    padding: 10px 10px 86px !important;
    overflow: visible !important;
    border: 1px solid #d9e5f3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important;
  }

  html body[data-page="accounts"] .account-directory-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .account-directory-toolbar .grow-field {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="accounts"] .account-directory-toolbar .toolbar-field,
  html body[data-page="accounts"] .account-directory-toolbar input,
  html body[data-page="accounts"] .account-directory-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .account-directory-toolbar input,
  html body[data-page="accounts"] .account-directory-toolbar select {
    min-height: 40px !important;
    border-radius: 11px !important;
    font-size: 0.82rem !important;
  }

  html body[data-page="accounts"] #openAccountModalBtn {
    display: none !important;
  }

  html body[data-page="accounts"] .account-mobile-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid #d7e2f1 !important;
    border-radius: 14px !important;
    background: #eef4fb !important;
  }

  html body[data-page="accounts"] .account-mobile-tab {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 4px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #5d6f86 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page="accounts"] .account-mobile-tab.is-active {
    border-color: #bfd3ee !important;
    background: #ffffff !important;
    color: #245de6 !important;
    box-shadow: 0 7px 15px rgba(37, 99, 235, 0.12) !important;
  }

  html body[data-page="accounts"] .account-stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-page="accounts"] .account-stats-row .mini-pill {
    display: grid !important;
    justify-items: start !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    border-color: #dbe7f5 !important;
    border-radius: 11px !important;
    background: #f8fbff !important;
    color: #10233f !important;
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
  }

  html body[data-page="accounts"] .account-stats-row .mini-pill span {
    color: #2563eb !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="accounts"] .account-directory-shell {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 260px !important;
    max-height: min(46dvh, 430px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: auto !important;
  }

  html body[data-page="accounts"] .account-directory-shell table,
  html body[data-page="accounts"] .account-directory-shell tbody {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  html body[data-page="accounts"] .account-directory-shell thead {
    display: none !important;
  }

  html body[data-page="accounts"] .account-directory-shell tr {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) minmax(70px, auto) !important;
    grid-template-rows: auto auto auto !important;
    gap: 5px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid #d9e5f3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
  }

  html body[data-page="accounts"] .account-directory-shell tr.table-row-selected {
    border-color: #8db4ff !important;
    background: #f5f9ff !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12) !important;
  }

  html body[data-page="accounts"] .account-directory-shell td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    color: #245de6 !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-align: right !important;
    text-transform: uppercase !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(5) {
    display: none !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(6) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-align: right !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(7) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body[data-page="accounts"] .account-directory-shell td:nth-child(8) {
    grid-column: 2 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  html body[data-page="accounts"] .account-directory-shell .table-note {
    color: #8191a6 !important;
    font-size: 0.7rem !important;
  }

  html body[data-page="accounts"] .account-directory-shell .table-actions {
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  html body[data-page="accounts"] .account-directory-shell .table-icon-button {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
  }

  html body[data-page="accounts"] .account-directory-shell .account-delete-button {
    display: none !important;
  }

  html body[data-page="accounts"] .account-mobile-selected-preview {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-card,
  html body[data-page="accounts"] .account-mobile-preview-empty {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid #d9e5f3 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-head span {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-head strong {
    color: #2563eb !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-head b {
    color: #0f172a !important;
    font-size: 0.98rem !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-head em {
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 0.68rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-head em.is-muted {
    background: #f1f5f9 !important;
    color: #64748b !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-details {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-details > div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding: 8px !important;
    border: 1px solid #e1eaf6 !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-details dt {
    margin: 0 !important;
    color: #7c8da3 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-details dd {
    margin: 0 !important;
    color: #10233f !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page="accounts"] .account-mobile-preview-actions svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-bar {
    position: fixed !important;
    left: 50% !important;
    bottom: 10px !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.15fr) !important;
    gap: 8px !important;
    width: min(410px, calc(100vw - 20px)) !important;
    padding: 8px !important;
    border: 1px solid rgba(186, 203, 226, 0.86) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-bar button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-bar svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-primary {
    border: 1px solid #2563eb !important;
    background: #2563eb !important;
    color: #ffffff !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-filter {
    border: 1px solid #d7e2f1 !important;
    background: #f8fbff !important;
    color: #10233f !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-filter span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="accounts"] .account-mobile-bottom-filter strong {
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    background: #e8f0ff !important;
    color: #245de6 !important;
  }

  html body[data-page="accounts"] .account-modal-card {
    width: min(100vw - 12px, 100%) !important;
    max-height: calc(100dvh - 12px) !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="accounts"] {
    overflow-x: hidden !important;
    background: #f4f7fb !important;
  }

  html body[data-page="accounts"] .app-shell {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body[data-page="accounts"] .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="accounts"] .topbar {
    min-height: 56px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #d9e5f3 !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  html body[data-page="accounts"] .accounts-page {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
    height: calc(100dvh - 56px) !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html body[data-page="accounts"] .account-directory-heading {
    min-height: 0 !important;
  }

  html body[data-page="accounts"] .account-directory-heading h2 {
    font-size: 1.12rem !important;
  }

  html body[data-page="accounts"] .account-directory-heading p:last-child {
    display: none !important;
  }

  html body[data-page="accounts"] .account-directory-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border: 1px solid #d9e5f3 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
  }

  html body[data-page="accounts"] .account-directory-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(124px, 150px) minmax(148px, 190px) auto !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  html body[data-page="accounts"] .account-directory-toolbar input,
  html body[data-page="accounts"] .account-directory-toolbar select,
  html body[data-page="accounts"] .account-toolbar-add-button {
    min-height: 40px !important;
    font-size: 0.82rem !important;
  }

  html body[data-page="accounts"] .account-toolbar-add-button {
    min-width: 130px !important;
    padding-inline: 12px !important;
  }

  html body[data-page="accounts"] .account-mobile-tabs,
  html body[data-page="accounts"] .account-mobile-selected-preview,
  html body[data-page="accounts"] .account-mobile-bottom-bar {
    display: none !important;
  }

  html body[data-page="accounts"] .account-stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html body[data-page="accounts"] .account-stats-row .mini-pill {
    min-width: 92px !important;
    min-height: 34px !important;
    padding-inline: 10px !important;
    border-color: #dbe7f5 !important;
    background: #f8fbff !important;
    color: #10233f !important;
  }

  html body[data-page="accounts"] .account-directory-shell {
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    border-radius: 14px !important;
  }

  html body[data-page="accounts"] .account-directory-shell table {
    min-width: 780px !important;
  }

  html body[data-page="accounts"] .account-directory-shell th,
  html body[data-page="accounts"] .account-directory-shell td {
    padding: 9px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  html body[data-page="accounts"] .account-directory-shell .table-icon-button {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  html body[data-page="accounts"] #accountModal.modal-shell {
    place-items: stretch end !important;
    padding: 68px 12px 12px 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  html body[data-page="accounts"] #accountModal .modal-backdrop {
    display: none !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-card {
    width: min(430px, 48vw) !important;
    max-height: calc(100dvh - 80px) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important;
    pointer-events: auto !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-header,
  html body[data-page="accounts"] #accountModal .account-modal-body,
  html body[data-page="accounts"] #accountModal .account-modal-footer,
  html body[data-page="accounts"] #accountModal .account-modal-view {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-header {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-title-block h3 {
    font-size: 1rem !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-row-2,
  html body[data-page="accounts"] #accountModal .account-modal-row-3,
  html body[data-page="accounts"] #accountModal .account-modal-row-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-body {
    gap: 12px !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-section {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: #ffffff !important;
    border-top: 1px solid #dbe7f5 !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body[data-page="accounts"] #accountModal .account-modal-actions button {
    min-width: 0 !important;
    min-height: 42px !important;
    white-space: nowrap !important;
  }
}

/* Admin Settings responsive shell final layer - 20260610adminvisible1 */
@media (max-width: 1160px) and (orientation: portrait), (max-width: 780px) {
  html body[data-page="admin-security"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="admin-security"] .app-main.workspace,
  html body[data-page="admin-security"] main.app-main {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="admin-security"] #sideRail.side-rail {
    position: fixed !important;
    inset: max(10px, env(safe-area-inset-top)) auto max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    z-index: 2147483000 !important;
    width: min(360px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    transform: translateX(calc(-100% - 28px)) !important;
  }

  html body[data-page="admin-security"].is-sidebar-open #sideRail.side-rail,
  html body[data-page="admin-security"] #sideRail.side-rail.is-mobile-sidebar-open {
    transform: translateX(0) !important;
  }

  html body[data-page="admin-security"] .admin-settings-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  html body[data-page="admin-security"] .admin-settings-shell-v3[data-admin-root] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  html body[data-page="admin-security"][data-admin-settings-screen="overview"] .admin-settings-mobile-category-panel {
    width: 100% !important;
    max-width: 100vw !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-index {
    width: min(720px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-index-button {
    display: none !important;
  }

  html body[data-page="admin-security"]:not([data-admin-settings-screen="overview"]) .admin-settings-mobile-index-button:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link > span:nth-child(2) {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link strong,
  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link strong {
    color: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link small {
    color: var(--text-soft, #64748b) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link.is-warning .admin-settings-mobile-link-icon {
    background: #fff7ed !important;
    color: #d97706 !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link.is-error .admin-settings-mobile-link-icon,
  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link.is-danger .admin-settings-mobile-link-icon {
    background: #fff1f2 !important;
    color: #e11d48 !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-roadmap-link.is-disabled .admin-settings-mobile-link-icon {
    background: #f1f5f9 !important;
    color: #64748b !important;
  }
}

/* Admin Settings mobile category cleanup - 20260610adminvisible1 */
@media (max-width: 1160px) and (orientation: portrait), (max-width: 780px) {
  html body[data-page="admin-security"] .app-main.workspace,
  html body[data-page="admin-security"] main.app-main {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body[data-page="admin-security"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 38px 42px !important;
    align-items: center !important;
    gap: 6px 8px !important;
    min-height: 94px !important;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px !important;
    border-bottom: 1px solid #d9e5f3 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(14px) !important;
  }

  html body[data-theme="dark"][data-page="admin-security"] .topbar {
    background: rgba(11, 18, 32, 0.96) !important;
    border-color: #26364f !important;
  }

  html body[data-page="admin-security"] .topbar-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-page="admin-security"] .topbar-left h1 {
    max-width: 168px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  html body[data-page="admin-security"] .shell-menu-button {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
  }

  html body[data-page="admin-security"] .topbar-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body[data-page="admin-security"] .topbar-center {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  html body[data-page="admin-security"] .topbar-search-shell {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html body[data-page="admin-security"] .topbar-search-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
  }

  html body[data-page="admin-security"] .topbar-search-shortcut {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  html body[data-page="admin-security"] .topbar-search-icon,
  html body[data-page="admin-security"] .topbar-search-icon svg,
  html body[data-page="admin-security"] .topbar-search-icon .admin-reference-icon {
    width: 16px !important;
    height: 16px !important;
  }

  html body[data-page="admin-security"] .admin-settings-shell-v3[data-admin-root] {
    height: 100% !important;
  }

  html body[data-page="admin-security"] .page-section.admin-settings-page {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body[data-theme][data-page="admin-security"] .workspace > .page-section.admin-settings-page:not(.challan-fit-layout) {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body[data-page="admin-security"][data-admin-settings-screen="overview"] .admin-settings-mobile-category-panel {
    padding: 4px 4px max(12px, env(safe-area-inset-bottom)) !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-category-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    overflow-x: hidden !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-index {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-index-summary {
    display: none !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-overview-link {
    min-height: 52px !important;
    margin: 0 0 2px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-link > span:nth-child(2) {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-link > span:nth-child(2) strong,
  html body[data-page="admin-security"] .admin-settings-mobile-link > span:nth-child(2) small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-link > span:nth-child(2) small {
    color: var(--text-soft, #64748b) !important;
    font-size: 0.69rem !important;
    font-weight: 720 !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-link.is-active > span:nth-child(2) small {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-groups {
    gap: 8px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-group {
    border-radius: 16px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-group summary {
    min-height: 52px !important;
    padding: 8px 10px !important;
    grid-template-columns: 34px minmax(0, 1fr) 28px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-links {
    padding: 0 8px 8px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-link {
    min-height: 44px !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    padding: 6px 8px !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #dbe3ef !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
  }

  html body[data-page="admin-security"] button.admin-settings-mobile-link {
    background-image: none !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-link.is-active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22) !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-group-icon,
  html body[data-page="admin-security"] .admin-settings-mobile-link-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-group-icon svg,
  html body[data-page="admin-security"] .admin-settings-mobile-link-icon svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body[data-page="admin-security"] .admin-settings-mobile-group-icon .admin-reference-icon,
  html body[data-page="admin-security"] .admin-settings-mobile-link-icon .admin-reference-icon {
    inline-size: 17px !important;
    block-size: 17px !important;
    background-color: currentColor !important;
  }

  html body[data-theme="dark"][data-page="admin-security"] .admin-settings-mobile-link {
    background: #101827 !important;
    color: #e5edf9 !important;
    border-color: #26364f !important;
  }

  html body[data-theme="dark"][data-page="admin-security"] .admin-settings-mobile-link.is-active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
  }
}

@media (max-width: 430px) {
  html body[data-page="admin-security"] .topbar-left h1 {
    max-width: 142px !important;
  }

  html body[data-page="admin-security"] .topbar-status-badge {
    max-width: 72px !important;
    padding-inline: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Reports final input reset: keep the menu search as one field, not nested inputs. */
html body[data-page="reports"] .rp-shell .rp-menu .rp-menu-search > input#rpMenuSearchInput {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body[data-page="admin-security"] .admin-settings-mobile-index-button {
  display: none !important;
}

@media (max-width: 900px) {
  html body[data-page="admin-security"]:not([data-admin-settings-screen="overview"]) .admin-settings-workspace-v3 > .admin-settings-workspace-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 0 0 10px !important;
  }

  html body[data-page="admin-security"]:not([data-admin-settings-screen="overview"]) .admin-settings-workspace-heading .modal-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html body[data-page="admin-security"]:not([data-admin-settings-screen="overview"]) .admin-settings-mobile-index-button:not([hidden]) {
    display: inline-flex !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }
}

/* Create Challan final dispatch-desk layout.
   Keep this at the file end: older Create Challan rules exist in both CSS files. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .page-section.create-challan-shell {
    height: calc(100dvh - var(--ui-topbar-height, 58px)) !important;
    min-height: 0 !important;
    padding: 8px 10px 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .create-challan-stage--dispatch {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid {
    display: grid !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(450px, 1.08fr) minmax(360px, 0.82fr) minmax(390px, 0.9fr) !important;
    grid-template-rows: clamp(374px, 43dvh, 420px) minmax(180px, 0.74fr) 46px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-route-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  html body[data-page="create-challan"] .generate-challan-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #cfe0f3 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045) !important;
    overflow: hidden !important;
  }

  html body[data-theme="dark"][data-page="create-challan"] .generate-challan-card {
    background: rgba(16, 24, 39, 0.95) !important;
    border-color: rgba(95, 122, 164, 0.38) !important;
  }

  html body[data-page="create-challan"] .generate-card-heading {
    min-height: 0 !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid rgba(207, 224, 243, 0.76) !important;
  }

  html body[data-page="create-challan"] .generate-card-heading h3,
  html body[data-page="create-challan"] .generate-card-heading--lean h3 {
    margin: 0 !important;
    color: #06145f !important;
    font-size: 14.5px !important;
    font-weight: 950 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.05 !important;
  }

  html body[data-theme="dark"][data-page="create-challan"] .generate-card-heading h3,
  html body[data-theme="dark"][data-page="create-challan"] .generate-card-heading--lean h3 {
    color: #eaf2ff !important;
  }

  html body[data-page="create-challan"] .generate-card-heading .eyebrow {
    display: none !important;
  }

  html body[data-page="create-challan"] .generate-card-heading--lean {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-card-heading--lean > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 0 9px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    color: #1d4ed8 !important;
    font-size: 10px !important;
    font-weight: 920 !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 5px 0 !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-row span {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 25px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 6px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    color: #213a5c !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-row span::before {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-row span.is-active {
    border-color: #b7ccff !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
    gap: 7px 8px !important;
    min-height: 0 !important;
  }

  html body[data-page="create-challan"] .generate-field--wide {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-field {
    gap: 3px !important;
    min-width: 0 !important;
    color: #29435f !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.032em !important;
    line-height: 1.05 !important;
  }

  html body[data-page="create-challan"] .generate-field input,
  html body[data-page="create-challan"] .generate-field select,
  html body[data-page="create-challan"] .generate-inline-input input,
  html body[data-page="create-challan"] .generate-challan-vehicle-card input {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 5px 9px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="create-challan"] .generate-inline-input {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-inline-input button {
    min-height: 32px !important;
    border-radius: 10px !important;
  }

  html body[data-page="create-challan"] .generate-destination-box {
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-destination-chips {
    min-height: 22px !important;
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-chip {
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  html body[data-page="create-challan"] .generate-route-info {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 6px !important;
    margin-top: 7px !important;
  }

  html body[data-page="create-challan"] .generate-route-info div {
    min-width: 0 !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }

  html body[data-page="create-challan"] .generate-route-info span {
    font-size: 8.5px !important;
  }

  html body[data-page="create-challan"] .generate-route-info strong {
    font-size: 11px !important;
  }

  html body[data-page="create-challan"] .generate-route-preview-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-route-preview-steps strong {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 4px !important;
    border-radius: 9px !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card .generate-card-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-pending-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body[data-page="create-challan"] .generate-draft-pill {
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
  }

  html body[data-page="create-challan"] .generate-challan-no-field {
    grid-template-columns: auto 92px !important;
    gap: 6px !important;
    min-height: 26px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-challan-no-field input {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap {
    min-height: 0 !important;
    margin-top: 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="create-challan"] .generate-challan-table .pending-col-serial { width: 32px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-gr { width: 70px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-consignee { width: 118px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-destination { width: 92px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-qty { width: 42px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-weight { width: 72px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-action { width: 40px !important; }

  html body[data-page="create-challan"] .generate-pending-table-wrap th,
  html body[data-page="create-challan"] .generate-pending-table-wrap td {
    height: 31px !important;
    padding: 4px 6px !important;
    font-size: 11.5px !important;
    line-height: 1.08 !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap td small {
    margin-top: 1px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body[data-page="create-challan"] .generate-add-icon-button {
    width: 28px !important;
    min-width: 28px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 0 !important;
  }

  html body[data-page="create-challan"] .generate-add-icon-button::before {
    content: "+" !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html body[data-page="create-challan"] .generate-pending-footer {
    padding-top: 4px !important;
    color: #475569 !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-old-records-control {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 0 0 5px !important;
    border-bottom: 1px solid rgba(207, 224, 243, 0.8) !important;
  }

  html body[data-page="create-challan"] .generate-old-records-control > button,
  html body[data-page="create-challan"] .generate-old-records-bar button {
    min-height: 28px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body[data-page="create-challan"] .generate-old-records-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html body[data-page="create-challan"] .generate-old-records-bar > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    color: #27415f !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(96px, 0.5fr) minmax(0, 1fr) !important;
    gap: 5px 6px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid .generate-field {
    min-width: 0 !important;
    gap: 2px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid .generate-field span {
    font-size: 9.5px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid input,
  html body[data-page="create-challan"] .generate-old-record-filter-grid select {
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    padding: 4px 8px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid .generate-old-record-select {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-card-heading {
    grid-column: 1 / -1 !important;
    padding-bottom: 4px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field {
    display: grid !important;
    grid-template-columns: 106px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card label.generate-field:nth-of-type(-n + 3) {
    grid-column: 1 / -1 !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field > span {
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field input {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-net-value {
    grid-column: 1 / -1 !important;
    margin-top: 1px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-net-value strong {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    align-self: start !important;
    max-height: clamp(184px, 28dvh, 260px) !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card .table-shell {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table table {
    min-width: 940px !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    height: 31px !important;
    background: #f4f8fc !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table th,
  html body[data-page="create-challan"] .generate-challan-selected-table td {
    padding: 5px 8px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  html body[data-page="create-challan"] .generate-empty-selected-row td {
    height: 48px !important;
    color: #8a604f !important;
    font-weight: 760 !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: min-content !important;
    align-self: start !important;
    align-content: start !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px !important;
    overflow: visible !important;
  }

  html body[data-page="create-challan"] .generate-command-head,
  html body[data-page="create-challan"] .generate-command-metrics,
  html body[data-page="create-challan"] .generate-options-menu,
  html body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-reset-dispatch] {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-command-head {
    display: flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 9px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 11px !important;
    background: #f8fbff !important;
  }

  html body[data-page="create-challan"] .generate-command-head span {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  html body[data-page="create-challan"] .generate-command-head strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #07145f !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card > button {
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 880 !important;
  }

  html body[data-page="create-challan"] .generate-command-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-command-metrics div {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #e0ebf7 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
  }

  html body[data-page="create-challan"] .generate-command-metrics span {
    color: #64748b !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  html body[data-page="create-challan"] .generate-command-metrics strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #0f3f8f !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-options-menu {
    position: relative !important;
    margin: 0 !important;
  }

  html body[data-page="create-challan"] .generate-options-menu summary {
    min-height: 34px !important;
    border-radius: 10px !important;
  }

  html body[data-page="create-challan"] .generate-options-box {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    z-index: 40 !important;
    display: grid !important;
    width: min(320px, calc(100vw - 36px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2) !important;
  }

  html body[data-page="create-challan"] .generate-option {
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    align-items: stretch !important;
  }

  html body[data-page="create-challan"] .generate-total-strip > div {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    padding: 3px 7px !important;
    border-radius: 10px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip span {
    overflow: hidden !important;
    font-size: 9.5px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-total-strip strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body[data-page="create-challan"] .generate-challan-grid {
    grid-template-columns: minmax(390px, 1.08fr) minmax(320px, 0.82fr) minmax(320px, 0.88fr) !important;
    grid-template-rows: 366px minmax(174px, 0.72fr) 44px !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-challan-card {
    padding: 8px !important;
  }

  html body[data-page="create-challan"] .generate-field input,
  html body[data-page="create-challan"] .generate-field select,
  html body[data-page="create-challan"] .generate-inline-input input,
  html body[data-page="create-challan"] .generate-challan-vehicle-card input {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 12.5px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 7px !important;
    font-size: 9.5px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card label.generate-field:nth-of-type(-n + 3) {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-inline-input {
    grid-template-columns: minmax(0, 1fr) 66px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid {
    grid-template-columns: minmax(82px, 0.48fr) minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid input,
  html body[data-page="create-challan"] .generate-old-record-filter-grid select {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    font-size: 11px !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card {
    max-height: clamp(174px, 27dvh, 236px) !important;
  }

  html body[data-page="create-challan"] .generate-route-info {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card > button {
    min-height: 32px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="create-challan"] .page-section.create-challan-shell,
  html body[data-page="create-challan"] .create-challan-stage--dispatch {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid {
    display: grid !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  html body[data-page="create-challan"] .generate-challan-route-card,
  html body[data-page="create-challan"] .generate-challan-pending-card,
  html body[data-page="create-challan"] .generate-challan-vehicle-card,
  html body[data-page="create-challan"] .generate-challan-selected-card,
  html body[data-page="create-challan"] .generate-challan-actions-card,
  html body[data-page="create-challan"] .generate-total-strip {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap {
    max-height: 360px !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card {
    min-height: 280px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-command-head,
  html body[data-page="create-challan"] .generate-command-metrics,
  html body[data-page="create-challan"] .generate-options-menu,
  html body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-reset-dispatch] {
    grid-column: 1 / -1 !important;
  }
}

html body[data-page="create-challan"] .generate-delete-confirm {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #f0b8b8;
  border-radius: 12px;
  background: #fff4f4;
  color: #7f1d1d;
  font-size: 12px;
  font-weight: 800;
}

html body[data-page="create-challan"] .generate-delete-confirm button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 10px;
}

html body[data-page="create-challan"] .generate-delete-confirm .danger-button {
  border-color: #ef9a9a;
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 720px) {
  html body[data-page="create-challan"] .generate-route-form-grid,
  html body[data-page="create-challan"] .generate-challan-vehicle-card,
  html body[data-page="create-challan"] .generate-command-metrics,
  html body[data-page="create-challan"] .generate-total-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-row span {
    font-size: 10px !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card .generate-card-heading {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-pending-meta,
  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="create-challan"] .generate-challan-no-field,
  html body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-save-dispatch],
  html body[data-page="create-challan"] .generate-command-head,
  html body[data-page="create-challan"] .generate-command-metrics,
  html body[data-page="create-challan"] .generate-options-menu,
  html body[data-page="create-challan"] .generate-challan-actions-card > [data-create-challan-reset-dispatch] {
    grid-column: 1 / -1 !important;
  }
}

/* Builty / GR responsive rollout: approved mobile-tablet mock v1.
   Desktop keeps the existing transport-desk layout; these rules begin at tablet width. */
html body[data-page^="builty-"] .builty-responsive-tabs,
html body[data-page^="builty-"] .builty-mobile-mode-nav {
  display: none;
}

@media (max-width: 1080px) {
  html body[data-page^="builty-"] {
    overflow: hidden !important;
    background: #f6f8fc !important;
  }

  html body[data-page^="builty-"] .app-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html body[data-page^="builty-"] .workspace {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #f6f8fc !important;
  }

  html body[data-page^="builty-"] .topbar {
    min-height: 56px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  html body[data-page^="builty-"] .topbar h1 {
    max-width: min(48vw, 420px) !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page^="builty-"] .topbar-date {
    min-height: 30px !important;
    min-width: min(230px, 28vw) !important;
    color: #7c2d12 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body[data-page^="builty-"] .page-section.builty-entry-page,
  html body[data-page^="builty-"] .page-section.builty-register-page {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f8fbff 0%, #edf4fc 100%) !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs {
    display: flex !important;
    align-items: flex-end !important;
    gap: 0 !important;
    min-width: 0 !important;
    padding: 10px 12px 0 !important;
    border-bottom: 1px solid #d8e5f4 !important;
    background: #f7faff !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 16px !important;
    border: 1px solid #d7e4f4 !important;
    border-bottom: 0 !important;
    border-radius: 9px 9px 0 0 !important;
    background: #eef5ff !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs a + a {
    margin-left: -1px !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs a.is-active {
    min-height: 46px !important;
    background: #ffffff !important;
    border-color: #b9c9df !important;
    color: #0f172a !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs small {
    display: none !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-form {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page^="builty-"] .panel,
  html body[data-page^="builty-"] .glass-panel,
  html body[data-page^="builty-"] .glass-strong {
    border-color: #d8e5f4 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-upper {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 10px !important;
    align-items: end !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-upper > * {
    grid-row: auto !important;
    min-width: 0 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-party {
    grid-column: span 3 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-gst {
    grid-column: span 3 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-small,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-type,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-physical {
    grid-column: span 2 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-eway,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-delivery,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-source-firm,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-source-gr,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-source-status-inline {
    grid-column: span 3 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action {
    grid-column: span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(104px, 0.55fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    align-self: end !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-gr-processing-view {
    min-height: 32px !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-lower {
    display: grid !important;
    grid-template-columns: minmax(0, 1.56fr) minmax(260px, 0.82fr) !important;
    gap: 12px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-goods-panel,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel {
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-goods-panel {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row {
    grid-template-columns: minmax(54px, 0.46fr) minmax(120px, 1.34fr) minmax(70px, 0.64fr) minmax(70px, 0.64fr) minmax(78px, 0.76fr) minmax(78px, 0.76fr) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-color: #d8e5f4 !important;
    border-radius: 13px !important;
    background: #f8fbff !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-list-shell {
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    border-color: #d8e5f4 !important;
    background: #ffffff !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row {
    grid-template-columns: 28px minmax(42px, 0.42fr) minmax(0, 1fr) minmax(78px, 0.7fr) minmax(76px, 0.62fr) minmax(70px, 0.62fr) auto !important;
    gap: 7px !important;
    min-height: 52px !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid #d8e5f4 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row:last-child {
    border-bottom: 0 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row-index {
    width: 25px !important;
    height: 25px !important;
    background: #eaf2ff !important;
    color: #2563eb !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-particular,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row > strong,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-rate-type {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel {
    align-content: start !important;
    gap: 8px !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel .builty-freight-field {
    grid-template-columns: minmax(88px, 0.52fr) minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel .builty-entry-field > span {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel .builty-entry-field > input,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel .builty-entry-field > select {
    min-height: 36px !important;
    padding-block: 6px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-charge-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-totals {
    min-height: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-totals > div {
    min-height: 34px !important;
    padding: 6px 9px !important;
    border: 1px solid #d8e5f4 !important;
    border-radius: 11px !important;
    background: #f8fbff !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-totals .is-total {
    border-color: rgba(23, 133, 89, 0.24) !important;
    background: rgba(23, 133, 89, 0.08) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 35 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 -10px -10px !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #d8e5f4 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -14px 32px rgba(15, 23, 42, 0.08) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-main,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-actions {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-strip {
    display: grid !important;
    grid-template-columns: minmax(140px, 1.15fr) repeat(5, minmax(76px, 1fr)) !important;
    gap: 6px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-title,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    border: 1px solid #d8e5f4 !important;
    border-radius: 11px !important;
    background: #f8fbff !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell:last-child {
    border-color: rgba(37, 99, 235, 0.28) !important;
    background: #eaf2ff !important;
    color: #2563eb !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-title,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell strong,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell span {
    justify-self: start !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell strong {
    font-size: 13px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell span {
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-actions {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.78fr) minmax(120px, 0.78fr) minmax(112px, 0.7fr) !important;
    gap: 8px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-actions button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-options-panel--footer {
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 24px)) !important;
  }

  html body[data-page="builty-register"] .page-section.builty-register-page {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  html body[data-page="builty-register"] .builty-register-filters {
    margin: 10px 10px 0 !important;
    padding: 10px !important;
  }

  html body[data-page="builty-register"] .builty-register-filter-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="builty-register"] .builty-register-filter-grid .full-span {
    grid-column: span 3 !important;
  }

  html body[data-page="builty-register"] .builty-register-filter-grid label {
    min-width: 0 !important;
  }

  html body[data-page="builty-register"] .builty-register-table-panel {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }

  html body[data-page="builty-register"] .builty-register-detail {
    display: none !important;
  }

  html body[data-page="builty-register"] .builty-mobile-mode-nav {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page^="builty-"] .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  html body[data-page^="builty-"] .topbar-center {
    display: none !important;
  }

  html body[data-page^="builty-"] .topbar h1 {
    max-width: 210px !important;
    font-size: 15px !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs {
    padding-inline: 10px !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs a {
    flex: 1 0 auto !important;
    padding-inline: 12px !important;
    text-align: center !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs span {
    display: none !important;
  }

  html body[data-page^="builty-"] .builty-responsive-tabs small {
    display: inline !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-form {
    gap: 8px !important;
    padding: 8px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-upper {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    max-height: 45dvh !important;
    overflow: auto !important;
    padding: 10px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-upper > *,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-party,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-gst,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-small,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-type,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-eway,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-delivery,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-source-firm,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-source-gr,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-source-status-inline,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-field-physical {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-field,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel .builty-freight-field,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel .builty-freight-remarks {
    display: grid !important;
    grid-template-columns: minmax(96px, 0.34fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-field > span,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-required-label {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 1px solid #d8e5f4 !important;
    border-right: 0 !important;
    border-radius: 10px 0 0 10px !important;
    background: #eef5ff !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-field > input,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-field > select {
    min-height: 36px !important;
    border-radius: 0 10px 10px 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-field > .builty-suggest-menu {
    grid-column: 2 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-lower {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    overflow: auto !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-goods-panel,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 0.85fr) !important;
    gap: 7px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row .builty-entry-field {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row .builty-entry-field--particular {
    grid-column: span 2 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row .builty-entry-field > span,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row .builty-required-label {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row .builty-entry-field > input,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-entry-row .builty-entry-field > select {
    min-height: 35px !important;
    border: 1px solid #d8e5f4 !important;
    border-radius: 9px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-list-shell {
    max-height: 30dvh !important;
    overflow: auto !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row {
    grid-template-columns: 26px minmax(0, 1fr) minmax(72px, auto) minmax(66px, auto) !important;
    gap: 7px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row > strong:nth-of-type(1),
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-rate-type,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-actions {
    display: none !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-particular {
    font-size: 13px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-goods-row > strong {
    justify-self: end !important;
    font-size: 12px !important;
    text-align: right !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-freight-panel {
    max-height: 38dvh !important;
    overflow: auto !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-charge-pair {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-totals {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer {
    margin: 0 -8px -8px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-title {
    display: none !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-total-cell:nth-of-type(2) {
    display: none !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-actions {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.82fr) minmax(0, 0.82fr) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-actions .danger-button {
    display: none !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-book-footer-actions button {
    min-height: 42px !important;
    font-size: 12px !important;
  }

  html body[data-page^="builty-"] .builty-mobile-mode-nav {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid #d8e5f4 !important;
  }

  html body[data-page^="builty-"] .builty-mobile-mode-nav a {
    min-width: 0 !important;
    min-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  html body[data-page^="builty-"] .builty-mobile-mode-nav a.is-active {
    border-color: rgba(37, 99, 235, 0.25) !important;
    background: #eaf2ff !important;
    color: #2563eb !important;
  }

  html body[data-page^="builty-"] .builty-mobile-mode-nav span {
    display: none !important;
  }

  html body[data-page^="builty-"] .builty-mobile-mode-nav small {
    display: inline !important;
  }

  html body[data-page="builty-register"] .page-section.builty-register-page {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  html body[data-page="builty-register"] .builty-register-filters {
    margin: 8px 8px 0 !important;
    padding: 10px !important;
  }

  html body[data-page="builty-register"] .builty-register-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="builty-register"] .builty-register-filter-grid .full-span {
    grid-column: 1 !important;
  }

  html body[data-page="builty-register"] .builty-register-table-panel {
    align-self: stretch !important;
    display: flex !important;
    height: auto !important;
    margin: 8px 8px 0 !important;
  }

  html body[data-page="builty-register"] .table-shell tr {
    border-radius: 12px !important;
  }

  html body[data-page="builty-register"] .builty-register-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="builty-register"] .builty-mobile-mode-nav {
    display: grid !important;
    margin: 0 8px 8px !important;
    padding: 8px 0 0 !important;
  }
}

html body[data-theme] .notification-center-search input,
html body[data-theme] .notification-center-search input:not([type="checkbox"]):not([type="radio"]),
html body[data-theme] .notification-center-search input:hover,
html body[data-theme] .notification-center-search input:focus,
html body[data-theme] .notification-center-search input:focus-visible {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Builty + Reports polish fixes after responsive rollout review. */
@media (max-width: 1080px) {
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action {
    order: -30 !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(118px, 156px) minmax(0, 1fr) minmax(86px, 132px) !important;
    align-items: end !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action > button {
    grid-column: 1 !important;
    min-height: 34px !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action > .builty-old-record-select {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  html body[data-page="builty-new-booking"][data-builty-entry-layout="book"] .builty-entry-old-record-action > .builty-gr-processing-view {
    grid-column: 3 !important;
    min-width: 0 !important;
  }

  html body[data-page="builty-generate-from-received-gr"][data-builty-entry-layout="book"] .builty-field-source-firm,
  html body[data-page="builty-generate-from-received-gr"][data-builty-entry-layout="book"] .builty-field-source-gr,
  html body[data-page="builty-generate-from-received-gr"][data-builty-entry-layout="book"] .builty-source-gr-view,
  html body[data-page="builty-generate-from-received-gr"][data-builty-entry-layout="book"] .builty-source-status-inline,
  html body[data-page="builty-physical-book-entry"][data-builty-entry-layout="book"] .builty-field-physical {
    order: -20 !important;
  }
}

@media (min-width: 721px) and (max-width: 1280px) {
  html body[data-page="reports"] .rp-table-head {
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  html body[data-page="reports"] .rp-table {
    font-size: 12px !important;
  }

  html body[data-page="reports"] .rp-table th {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  html body[data-page="reports"] .rp-table td {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html body[data-page="reports"] .rp-table tbody tr {
    height: 32px !important;
  }

  html body[data-page="reports"] .rp-split-head {
    padding: 7px 9px !important;
  }

  html body[data-page="reports"] .rp-split-row {
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 720px) {
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action > button,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action > .builty-old-record-select,
  html body[data-page^="builty-"][data-builty-entry-layout="book"] .builty-entry-old-record-action > .builty-gr-processing-view {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="reports"] .rp-workspace {
    gap: 6px !important;
  }

  html body[data-page="reports"] .rp-filter-card {
    padding: 8px !important;
    border-radius: 11px !important;
  }

  html body[data-page="reports"] .rp-table-card {
    border-radius: 11px !important;
  }

  html body[data-page="reports"] .rp-table-head {
    min-height: 36px !important;
    padding: 5px 8px !important;
  }

  html body[data-page="reports"] .rp-table-title {
    font-size: 12px !important;
  }

  html body[data-page="reports"] .rp-table-meta {
    font-size: 10.5px !important;
  }

  html body[data-page="reports"] .rp-table {
    min-width: 620px !important;
    font-size: 11.5px !important;
  }

  html body[data-page="reports"] .rp-table th {
    height: 28px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
  }

  html body[data-page="reports"] .rp-table td {
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  html body[data-page="reports"] .rp-table tbody tr {
    height: 30px !important;
  }

  html body[data-page="reports"] .rp-row-actions {
    gap: 4px !important;
  }

  html body[data-page="reports"] .rp-icon-btn {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 8px !important;
  }

  html body[data-page="reports"] .rp-pagination {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 4px 8px !important;
  }

  html body[data-page="reports"] #rpPaginationStatus {
    min-width: 0 !important;
    color: var(--rp-muted, #64748b) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="reports"] .rp-pagination-button,
  html body[data-page="reports"] #rpPrevPageBtn,
  html body[data-page="reports"] #rpNextPageBtn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
  }

  html body[data-page="reports"] .rp-split-report {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body[data-page="reports"] .rp-split-card {
    border-radius: 11px !important;
  }

  html body[data-page="reports"] .rp-split-head {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  html body[data-page="reports"] .rp-split-row {
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }

  html body[data-page="reports"] .rp-responsive-detail-card {
    border-radius: 11px !important;
  }

  html body[data-page="reports"] .rp-responsive-detail-row {
    min-height: 44px !important;
    padding: 6px 3px !important;
  }

  html body[data-page="reports"] .rp-responsive-detail-row strong {
    font-size: 12px !important;
  }

  html body[data-page="reports"] .rp-responsive-detail-row small {
    font-size: 10.5px !important;
  }

  html body[data-page="reports"] .rp-empty,
  html body[data-page="reports"] .rp-error,
  html body[data-page="reports"] .rp-empty-inline {
    padding: 10px !important;
    gap: 5px !important;
  }
}

/* Builty hotfix: keep records dense and make the side rail actually scroll. */
@media (min-width: 1081px) {
  html body[data-theme] #sideRail.side-rail {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    overflow: hidden !important;
  }

  html body[data-theme] #sideRail.side-rail .side-rail-top {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin !important;
  }

  html body[data-theme] #sideRail.side-rail .side-rail-bottom {
    margin-top: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 1080px) {
  html body[data-theme].is-sidebar-open #sideRail.side-rail,
  html body.is-sidebar-open #sideRail.side-rail,
  html body #sideRail.side-rail.is-mobile-sidebar-open {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-top,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-top,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-top {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-bottom {
    margin-top: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="builty-register"] .builty-register-table-panel {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell {
    min-height: 0 !important;
    overflow: auto !important;
    border-radius: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell table {
    display: table !important;
    width: max-content !important;
    min-width: 900px !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell thead {
    display: table-header-group !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell tbody {
    display: table-row-group !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell tr {
    display: table-row !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell th,
  html body[data-page="builty-register"] .builty-register-table-shell td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #d8e5f4 !important;
    color: #0f172a !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell th {
    height: 30px !important;
    color: #64748b !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    background: #f8fbff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell td::before {
    content: none !important;
  }

  html body[data-page="builty-register"] .builty-register-table-shell tr.is-selected td {
    background: #eff6ff !important;
  }

  html body[data-page="builty-register"] .builty-register-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  html body[data-page="builty-register"] .builty-register-icon-button {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    border-radius: 8px !important;
  }

  html body[data-page="builty-register"] .builty-register-icon-button svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Directory responsive pass: combine the selected compact list and dense table directions. */
html body[data-page="directory"] .directory-mobile-list {
  display: none;
}

html body[data-page="directory"] .directory-filter-focus-button,
html body[data-page="directory"] .directory-add-account-button {
  display: none;
}

html body[data-page="directory"] .directory-stat-card {
  align-content: center;
}

html body[data-page="directory"] .directory-stat-icon {
  display: none;
}

html body[data-page="directory"] .directory-stat-label {
  min-width: 0;
}

@media (max-width: 1080px) {
  html body[data-page="directory"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] main.app-main,
  html body[data-page="directory"] .app-main.workspace {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="directory"] .app-shell {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  html body[data-page="directory"] #sideRail.side-rail {
    position: relative !important;
    inset: 0 auto auto 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 8px 7px !important;
    margin: 0 !important;
    transform: translateX(0) !important;
    translate: 0 0 !important;
    overflow: hidden !important;
    border-right: 1px solid #d8e5f4 !important;
    background: #ffffff !important;
    z-index: 1 !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .side-rail-top {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 6px !important;
    padding-right: 1px !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .side-rail-bottom {
    min-height: 0 !important;
    max-height: 150px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .brand-block,
  html body[data-page="directory"] #sideRail.side-rail .office-compact-card,
  html body[data-page="directory"] #sideRail.side-rail .rail-theme-card,
  html body[data-page="directory"] #sideRail.side-rail .rail-session-card {
    padding: 7px !important;
    border-radius: 9px !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .nav-link,
  html body[data-page="directory"] #sideRail.side-rail .nav-link-toggle {
    min-height: 36px !important;
    padding: 6px 7px !important;
    gap: 7px !important;
    border-radius: 8px !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .nav-copy strong {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .nav-copy small,
  html body[data-page="directory"] #sideRail.side-rail .rail-section-header,
  html body[data-page="directory"] #sideRail.side-rail .rail-mini-label {
    display: none !important;
  }

  html body[data-page="directory"] #sideRail.side-rail .nav-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
  }

  html body[data-page="directory"] #railOverlay {
    display: none !important;
  }

  html body[data-page="directory"] main.app-main,
  html body[data-page="directory"] .app-main.workspace {
    grid-column: 2 !important;
    width: calc(100vw - 150px) !important;
    max-width: calc(100vw - 150px) !important;
  }

  html body[data-page="directory"] .page-section.directory-page {
    height: calc(100dvh - var(--ui-topbar-height, 58px) - 14px) !important;
    min-height: 0 !important;
    padding: 10px 12px 12px !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] .workspace > .page-section.directory-page > .section-heading:first-child,
  html body[data-page="directory"] .directory-page > .section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 50px !important;
    margin: 0 !important;
    gap: 10px !important;
  }

  html body[data-page="directory"] .directory-page > .section-heading h2 {
    font-size: 21px !important;
    line-height: 1.1 !important;
  }

  html body[data-page="directory"] .directory-page > .section-heading p:not(.eyebrow) {
    max-width: 420px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="directory"] .directory-add-account-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body[data-page="directory"] .directory-page > .panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
    height: calc(100% - 54px) !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  html body[data-page="directory"] .account-directory-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 150px) minmax(115px, 145px) 38px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html body[data-page="directory"] .directory-filter-focus-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 0 !important;
  }

  html body[data-page="directory"] .directory-filter-focus-button::before {
    content: "";
    width: 15px !important;
    height: 15px !important;
    background: currentColor !important;
    clip-path: polygon(8% 14%, 92% 14%, 58% 53%, 58% 84%, 42% 84%, 42% 53%) !important;
  }

  html body[data-page="directory"] .account-directory-toolbar input,
  html body[data-page="directory"] .account-directory-toolbar select {
    height: 36px !important;
    min-height: 36px !important;
    padding-block: 0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  html body[data-page="directory"] #directoryStatsHost.account-stats-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body[data-page="directory"] .directory-stat-card {
    min-height: 55px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 8px 9px !important;
    border-radius: 9px !important;
  }

  html body[data-page="directory"] .directory-stat-icon {
    grid-row: 1 / span 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    color: #2563eb !important;
    background: #eff6ff !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-amber .directory-stat-icon {
    color: #b45309 !important;
    background: #fffbeb !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-rose .directory-stat-icon {
    color: #be123c !important;
    background: #fff1f2 !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-purple .directory-stat-icon {
    color: #7c3aed !important;
    background: #f5f3ff !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-green .directory-stat-icon {
    color: #047857 !important;
    background: #ecfdf5 !important;
  }

  html body[data-page="directory"] .directory-stat-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  html body[data-page="directory"] .directory-stat-label {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="directory"] .directory-stat-card strong {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="directory"] #directoryTableHost {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] #directoryTableHost > .directory-table-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    border-radius: 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body[data-page="directory"] .directory-table-shell table {
    min-width: 980px !important;
  }

  html body[data-page="directory"] .directory-table-shell th {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  html body[data-page="directory"] .directory-table-shell td {
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html body[data-page="directory"] .directory-table-actions {
    gap: 4px !important;
  }

  html body[data-page="directory"] .directory-action-icon-button {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="directory"] .page-section.directory-page {
    height: calc(100dvh - var(--ui-topbar-height, 58px)) !important;
    min-height: 0 !important;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] .directory-page > .section-heading {
    display: none !important;
  }

  html body[data-page="directory"] .directory-page > .panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] .account-directory-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 7px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body[data-page="directory"] .account-directory-toolbar input {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  html body[data-page="directory"] .directory-filter-focus-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
  }

  html body[data-page="directory"] .directory-filter-focus-button::before {
    content: "";
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    clip-path: polygon(8% 14%, 92% 14%, 58% 53%, 58% 84%, 42% 84%, 42% 53%) !important;
  }

  html body[data-page="directory"] .account-directory-toolbar select {
    grid-row: 2 !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  html body[data-page="directory"] .account-directory-toolbar select:nth-of-type(1) {
    grid-column: 1 !important;
  }

  html body[data-page="directory"] .account-directory-toolbar select:nth-of-type(2) {
    grid-column: 2 !important;
  }

  html body[data-page="directory"] .account-directory-toolbar input,
  html body[data-page="directory"] .account-directory-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  html body[data-page="directory"] #directoryStatsHost.account-stats-row {
    display: flex !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body[data-page="directory"] #directoryStatsHost.account-stats-row::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="directory"] .directory-stat-card {
    flex: 0 0 104px !important;
    min-width: 104px !important;
    min-height: 72px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  html body[data-page="directory"] .directory-stat-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    color: #2563eb !important;
    background: #eff6ff !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-amber .directory-stat-icon {
    color: #b45309 !important;
    background: #fffbeb !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-rose .directory-stat-icon {
    color: #be123c !important;
    background: #fff1f2 !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-purple .directory-stat-icon {
    color: #7c3aed !important;
    background: #f5f3ff !important;
  }

  html body[data-page="directory"] .directory-stat-card.is-green .directory-stat-icon {
    color: #047857 !important;
    background: #ecfdf5 !important;
  }

  html body[data-page="directory"] .directory-stat-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  html body[data-page="directory"] .directory-stat-label {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="directory"] .directory-stat-card strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="directory"] #directoryTableHost {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="directory"] #directoryTableHost > .directory-table-shell {
    display: none !important;
  }

  html body[data-page="directory"] .directory-mobile-list {
    display: grid !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 1px 1px max(82px, calc(14px + env(safe-area-inset-bottom))) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body[data-page="directory"] .directory-mobile-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #d8e5f4 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;
  }

  html body[data-page="directory"] .directory-mobile-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin-top: 2px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="directory"] .directory-mobile-card.is-green .directory-mobile-avatar {
    background: #ecfdf5 !important;
    color: #047857 !important;
  }

  html body[data-page="directory"] .directory-mobile-card.is-amber .directory-mobile-avatar {
    background: #fffbeb !important;
    color: #b45309 !important;
  }

  html body[data-page="directory"] .directory-mobile-card.is-purple .directory-mobile-avatar {
    background: #f5f3ff !important;
    color: #7c3aed !important;
  }

  html body[data-page="directory"] .directory-mobile-card.is-slate .directory-mobile-avatar {
    background: #f1f5f9 !important;
    color: #475569 !important;
  }

  html body[data-page="directory"] .directory-mobile-card-body {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body[data-page="directory"] .directory-mobile-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  html body[data-page="directory"] .directory-mobile-title {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body[data-page="directory"] .directory-mobile-title strong {
    min-width: 0 !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="directory"] .directory-mobile-title span {
    width: max-content !important;
    max-width: 100% !important;
    padding: 2px 7px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 7px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="directory"] .directory-mobile-status {
    padding-inline: 9px !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
  }

  html body[data-page="directory"] .directory-mobile-lines {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  html body[data-page="directory"] .directory-mobile-lines > span {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  html body[data-page="directory"] .directory-mobile-lines svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
  }

  html body[data-page="directory"] .directory-mobile-lines strong {
    min-width: 0 !important;
    color: #182132 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="directory"] .directory-mobile-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-page="directory"] .directory-mobile-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
  }

  html body[data-page="directory"] .directory-mobile-actions svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 380px) {
  html body[data-page="directory"] .directory-mobile-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body[data-page="directory"] .directory-mobile-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
  }
}
/* Invoice Create responsive shell fix.
   The app shell has repeated global rules in earlier stylesheets; this file loads last,
   so the invoice workbench can take the full viewport once the sidebar becomes an overlay. */
@media (max-width: 1080px) {
  html body[data-page="invoice-create"][data-theme] .app-shell,
  html body[data-page="invoice-create"].is-sidebar-collapsed .app-shell,
  html body[data-page="invoice-create"].is-sidebar-open .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
  }

  html body[data-page="invoice-create"][data-theme] #mainContent,
  html body[data-page="invoice-create"] #mainContent.workspace {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  html body[data-page="invoice-create"][data-theme] #invoiceWorkspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="invoice-create"] .invoice-create-module .invoice-field-grid,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-source-filter-row.invoice-filter-row,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-manual-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="invoice-create"] .invoice-create-module .invoice-party-field,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-remarks-field,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-manual-description {
    grid-column: auto !important;
  }
}

/* Invoice Create compact workbench pass: keep the screen as software, not a help page. */
html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tab {
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-card {
  gap: 8px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-empty-state {
  min-height: 128px !important;
  padding: 14px !important;
  gap: 5px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-empty-state span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-manual-panel {
  gap: 8px !important;
}

/* Directory tablet rail lock: later mobile-sidebar rules translate the rail off-canvas,
   so keep the approved tablet layout visible only on the directory page. */
@media (min-width: 721px) and (max-width: 1080px) {
  html body[data-page="directory"] #sideRail.side-rail,
  html body[data-page="directory"][data-theme] #sideRail.side-rail,
  html body[data-page="directory"].is-sidebar-open #sideRail.side-rail,
  html body[data-page="directory"].is-sidebar-collapsed #sideRail.side-rail,
  html body[data-page="directory"] #sideRail.side-rail.is-mobile-sidebar-open {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    inset: 0 auto auto 0 !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    margin: 0 !important;
    translate: 0 0 !important;
    transform: none !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* Sidebar logo safety: keep uploaded company logos constrained inside the rail avatar. */
html body #sideRail.side-rail .rail-session-avatar,
html body #sideRail.side-rail .shell-profile-avatar {
  overflow: hidden !important;
}

html body #sideRail.side-rail .rail-session-avatar img,
html body #sideRail.side-rail .shell-profile-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Shared rail scroll recovery: the open drawer must use the full panel width and
   keep its top navigation independently scrollable on phones and tablets. */
@media (max-width: 1080px) {
  html body[data-theme].is-sidebar-open #sideRail.side-rail,
  html body.is-sidebar-open #sideRail.side-rail,
  html body #sideRail.side-rail.is-mobile-sidebar-open {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    width: min(380px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    overflow: hidden !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-top,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-top,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-top {
    display: grid !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-right: 4px !important;
    scrollbar-width: thin !important;
  }

  html body[data-theme].is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body.is-sidebar-open #sideRail.side-rail .side-rail-bottom,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-nav-group,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-theme-card,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .rail-session-card,
  html body #sideRail.side-rail.is-mobile-sidebar-open .side-rail-bottom,
  html body.is-sidebar-open #sideRail.side-rail .rail-nav-group,
  html body.is-sidebar-open #sideRail.side-rail .rail-theme-card,
  html body.is-sidebar-open #sideRail.side-rail .rail-session-card,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-nav-group,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-theme-card,
  html body #sideRail.side-rail.is-mobile-sidebar-open .rail-session-card,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-link,
  html body[data-theme].is-sidebar-open #sideRail.side-rail .nav-link-toggle,
  html body.is-sidebar-open #sideRail.side-rail .nav-link,
  html body.is-sidebar-open #sideRail.side-rail .nav-link-toggle,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-link,
  html body #sideRail.side-rail.is-mobile-sidebar-open .nav-link-toggle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Admin Settings rail recovery: keep the desktop settings index readable while
   preserving the middle editor and right help rail. */
@media (min-width: 1400px) {
  html body[data-page="admin-security"] .admin-settings-shell-v3[data-admin-root] {
    grid-template-columns: minmax(280px, 292px) minmax(0, 1fr) minmax(280px, 300px) !important;
  }

  html body[data-page="admin-security"] .admin-settings-secondary-rail-v3 {
    padding-right: 16px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1399px) {
  html body[data-page="admin-security"] .admin-settings-shell-v3[data-admin-root] {
    grid-template-columns: minmax(260px, 272px) minmax(0, 1fr) minmax(260px, 288px) !important;
  }
}

html body[data-page="admin-security"] #adminSettingsRailNavHost.admin-settings-sidebar-scroll,
html body[data-page="admin-security"] .admin-settings-content-outlet[data-admin-outlet],
html body[data-page="admin-security"] .admin-settings-help-panel-v3 {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

html body[data-theme][data-page="collections-staff"] .collection-pending-tools #staffCollectionConfirmBtn:disabled {
  border: 1px solid #d7e1ee !important;
  background: #eef3f8 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #74829a !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Staff Collection responsive recovery: this module was added after the shared
   collection rollout, so phones/tablets still reserved desktop rail width. */
@media (max-width: 1080px) {
  html body[data-page="collections-staff"] {
    overflow-x: hidden !important;
  }

  html body[data-page="collections-staff"] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] .workspace {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  html body[data-page="collections-staff"] .page-section,
  html body[data-page="collections-staff"] .staff-collection-page,
  html body[data-page="collections-staff"] .staff-collection-workspace,
  html body[data-page="collections-staff"] .staff-collection-panel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body[data-page="collections-staff"] .staff-collection-page {
    padding: 10px !important;
  }

  html body[data-page="collections-staff"] .staff-collection-desk-strip,
  html body[data-page="collections-staff"] .staff-collection-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .staff-collection-selected-strip {
    justify-content: start !important;
  }

  html body[data-page="collections-staff"] .staff-collection-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="collections-staff"] .collection-list-head-with-action {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  html body[data-page="collections-staff"] .collection-pending-tools {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  html body[data-page="collections-staff"] .collection-pending-search-field,
  html body[data-page="collections-staff"] .collection-pending-tools input {
    flex: 1 1 220px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList,
  html body[data-page="collections-staff"] #staffCollectionBatchList {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="collections-staff"] .app-shell {
    padding: 0 !important;
  }

  html body[data-page="collections-staff"] .topbar {
    min-height: 54px !important;
    padding: 8px 10px !important;
  }

  html body[data-page="collections-staff"] .topbar-center {
    display: none !important;
  }

  html body[data-page="collections-staff"] .topbar h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html body[data-page="collections-staff"] .staff-collection-page {
    padding: 8px !important;
  }

  html body[data-page="collections-staff"] .staff-collection-workspace {
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  html body[data-page="collections-staff"] .staff-collection-desk-strip {
    gap: 10px !important;
    padding: 10px !important;
  }

  html body[data-page="collections-staff"] .staff-collection-selected-strip,
  html body[data-page="collections-staff"] .staff-collection-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .staff-collection-summary-card {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  html body[data-page="collections-staff"] .collection-pending-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .collection-pending-search-field,
  html body[data-page="collections-staff"] .collection-pending-tools input,
  html body[data-page="collections-staff"] .collection-pending-tools button {
    width: 100% !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table,
  html body[data-page="collections-staff"] .collection-staff-table tbody,
  html body[data-page="collections-staff"] .collection-staff-table tr,
  html body[data-page="collections-staff"] .collection-staff-table td {
    display: block !important;
    width: 100% !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table thead {
    display: none !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table tr {
    display: grid !important;
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid var(--ui-border, rgba(148, 163, 184, 0.28)) !important;
    border-radius: 12px !important;
    background: var(--ui-surface, rgba(255, 255, 255, 0.96)) !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table td {
    display: grid !important;
    grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table td::before {
    content: attr(data-mobile-label);
    min-width: 0;
    color: var(--ui-text-soft, #64748b);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  html body[data-page="collections-staff"] .collection-staff-table td[data-mobile-label=""] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .collection-staff-table td[data-mobile-label=""]::before {
    content: none !important;
  }
}

@media (max-width: 480px) {
  html body[data-page="collections-staff"] .staff-collection-summary-card,
  html body[data-page="collections-staff"] .collection-staff-table td {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html body[data-theme][data-page="collections-staff"] .collection-pending-tools #staffCollectionConfirmBtn.secondary-button:disabled {
  border: 1px solid #d7e1ee !important;
  background: #eef3f8 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #74829a !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  html body[data-page="collections-staff"] .staff-settlement-workspace {
    height: auto !important;
    min-height: calc(100dvh - 72px) !important;
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-head,
  html body[data-page="collections-staff"] .staff-settlement-grid,
  html body[data-page="collections-staff"] .staff-settlement-bottom-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-trust-strip {
    justify-content: start !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-queue-card,
  html body[data-page="collections-staff"] .staff-settlement-detail-card {
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList.staff-settlement-table-shell {
    max-height: min(62dvh, 620px) !important;
    overflow: auto !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-bottom-bar {
    bottom: 8px !important;
  }
}

@media (max-width: 820px) {
  html body[data-page="collections-staff"] .staff-settlement-card-head,
  html body[data-page="collections-staff"] .staff-settlement-filters,
  html body[data-page="collections-staff"] .staff-settlement-bottom-actions,
  html body[data-page="collections-staff"] .staff-settlement-qr-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-bottom-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-row-actions {
    flex-wrap: wrap !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-qr-preview {
    width: min(180px, 100%) !important;
    justify-self: center !important;
  }
}

@media (max-width: 560px) {
  html body[data-page="collections-staff"] .staff-settlement-workspace {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-tabs,
  html body[data-page="collections-staff"] .staff-settlement-mode-picker,
  html body[data-page="collections-staff"] .staff-settlement-ledger-metrics,
  html body[data-page="collections-staff"] .staff-settlement-detail-actions,
  html body[data-page="collections-staff"] .staff-settlement-bottom-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-trust-strip span {
    width: 100% !important;
    justify-content: center !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-bottom-bar {
    position: sticky !important;
    bottom: 6px !important;
    padding: 10px !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table {
    min-width: 920px !important;
  }
}

@media (max-width: 820px) {
  html body[data-page="collections-staff"] .staff-settlement-workspace {
    height: auto !important;
    min-height: calc(100dvh - 84px) !important;
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-queue-card {
    grid-template-rows: auto auto auto auto auto auto !important;
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-detail-card {
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList.staff-settlement-table-shell {
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid #dbe5f4 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList .staff-settlement-table tr {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table td {
    display: grid !important;
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList .staff-settlement-table td {
    display: grid !important;
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid #e8eef8 !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table td::before {
    content: attr(data-mobile-label) !important;
    color: #61708a !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList .staff-settlement-table td::before {
    display: block !important;
    content: attr(data-mobile-label) !important;
    color: #61708a !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table td[data-mobile-label=""] {
    display: flex !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: flex-start !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-table td[data-mobile-label=""]::before {
    content: none !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList .staff-settlement-table td[data-mobile-label=""] {
    display: flex !important;
    justify-content: flex-start !important;
  }

  html body[data-page="collections-staff"] #staffCollectionPendingList .staff-settlement-table td[data-mobile-label=""]::before {
    content: none !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-bottom-bar {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    box-shadow: 0 12px 30px rgba(15, 27, 53, 0.08) !important;
  }

  html body[data-page="collections-staff"] .staff-settlement-bottom-copy,
  html body[data-page="collections-staff"] .staff-settlement-bottom-metrics,
  html body[data-page="collections-staff"] .staff-settlement-bottom-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Final invoice-create cascade guard: this must stay after all rollout overrides. */
html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tabs {
  display: flex !important;
  align-items: end !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 42px !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-bottom: 1px solid #b9c9df !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tabs .invoice-mode-tab {
  flex: 0 0 auto !important;
  min-width: 118px !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #c9d8ea !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: #edf3fb !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tabs .invoice-mode-tab.is-active {
  height: 42px !important;
  min-height: 42px !important;
  border-color: #c9d8ea !important;
  background: #fff !important;
  background-image: none !important;
  color: #2458e8 !important;
  box-shadow: inset 0 3px 0 #2458e8 !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-step-rail,
html body[data-page="invoice-create"] .invoice-create-module .invoice-source-metrics {
  display: none !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-workbench-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) 270px !important;
  gap: 12px !important;
  align-items: start !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-kpi-card,
html body[data-page="invoice-create"] .invoice-create-module .invoice-details-card,
html body[data-page="invoice-create"] .invoice-create-module .invoice-summary-panel,
html body[data-page="invoice-create"] .invoice-create-module .invoice-source-table {
  border: 1px solid #d7e2f2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-kpi-card {
  min-height: 62px !important;
  padding: 9px 10px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-card {
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-pane-head,
html body[data-page="invoice-create"] .invoice-create-module .invoice-summary-head {
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #edf2f8 !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-pane-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-pane-title,
html body[data-page="invoice-create"] .invoice-create-module .invoice-summary-head {
  display: grid !important;
  gap: 2px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-pane-title span,
html body[data-page="invoice-create"] .invoice-create-module .invoice-summary-kicker {
  color: #7a4f35 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-pane-title strong,
html body[data-page="invoice-create"] .invoice-create-module .invoice-summary-head strong {
  color: #132238 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-tabs {
  display: flex !important;
  align-items: end !important;
  gap: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-bottom: 1px solid #b9c9df !important;
  border-radius: 0 !important;
  background: #fff !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-tab {
  flex: 0 0 auto !important;
  min-width: 118px !important;
  height: 38px !important;
  border: 1px solid #c9d8ea !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: #edf3fb !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-source-tab.is-active {
  height: 42px !important;
  background: #fff !important;
  color: #2458e8 !important;
  box-shadow: inset 0 3px 0 #2458e8 !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-sticky-action-bar {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 12 !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  border: 1px solid #d7e2f2 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -12px 30px rgba(31, 53, 84, 0.09) !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 0.5fr) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-workbench .create-challan-goods-panel > .create-challan-action-buttons {
  display: none !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-workbench .create-challan-goods-panel .create-challan-total-strip {
  display: none !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar {
  margin-top: 12px !important;
}

html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar button:disabled,
html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar button[disabled],
html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar [data-tbb-issue-selected]:disabled {
  border: 1px solid #d7e2f2 !important;
  background: #f3f6fb !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

@media (min-width: 1181px) {
  html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-workbench {
    padding-bottom: 96px !important;
  }

  html body[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar {
    position: fixed !important;
    left: calc(var(--rail-expanded, 246px) + 18px) !important;
    right: 16px !important;
    bottom: 14px !important;
    margin-top: 0 !important;
  }

  html body.is-rail-collapsed[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar,
  html body.rail-collapsed[data-page="invoice-create"] .invoice-create-module .invoice-tbb-sticky-action-bar {
    left: calc(var(--rail-collapsed, 76px) + 18px) !important;
  }
}

@media (max-width: 1180px) {
  html body[data-page="invoice-create"] .invoice-create-module .invoice-workbench-grid,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-sticky-action-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tabs {
    width: 100% !important;
    min-height: 38px !important;
  }

  html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tabs .invoice-mode-tab,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-source-tab {
    min-width: 102px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  html body[data-page="invoice-create"] .invoice-create-module .invoice-mode-tabs .invoice-mode-tab.is-active,
  html body[data-page="invoice-create"] .invoice-create-module .invoice-source-tab.is-active {
    height: 38px !important;
    min-height: 38px !important;
  }

  html body[data-page="invoice-create"] .invoice-create-module .invoice-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Shared rail repair: the edge collapse button sits outside the scroll column. */
@media (min-width: 1081px) {
  html body[data-theme] #sideRail.side-rail {
    overflow: visible !important;
  }

  html body[data-theme] #sideRail.side-rail .side-rail-top {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  html body[data-theme] #sideRail.side-rail .rail-toggle.rail-edge-toggle {
    display: inline-flex !important;
    right: -15px !important;
    z-index: 60 !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="challans"] .challan-fit-layout.is-old-record-editing .old-record-controls:not([hidden]) {
    display: grid !important;
    gap: 8px !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-old-record-editing .old-record-firm-select-row,
  html body[data-page="challans"] .challan-fit-layout.is-old-record-editing .old-record-challan-select-row {
    display: none !important;
  }

  html body[data-page="challans"] .challan-fit-layout.is-old-record-editing .challan-mobile-old-records-list {
    display: grid !important;
    gap: 8px !important;
    padding: 2px 0 8px !important;
  }

  html body[data-page="challans"] .challan-mobile-old-loaded {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  html body[data-page="challans"] .challan-mobile-old-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body[data-page="challans"] .challan-mobile-old-actions > button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding-inline: 8px !important;
    white-space: normal !important;
  }
}

/* Create Challan dispatch desk live repair.
   This file loads after ui-rebase.css, so these rules are the final authority. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .page-section.create-challan-shell {
    height: calc(100dvh - 74px) !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(430px, 0.95fr) minmax(430px, 0.9fr) minmax(420px, 0.75fr) !important;
    grid-template-rows: minmax(410px, 0.64fr) minmax(0, 1fr) 46px !important;
    align-content: stretch !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-route-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    grid-column: 3 !important;
    grid-row: 1 !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"] .generate-challan-selected-card,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] .generate-challan-selected-card {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    align-content: start !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card .table-shell {
    height: 100% !important;
    min-height: 0 !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table table {
    min-width: 1260px !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table th,
  html body[data-page="create-challan"] .generate-challan-selected-table td {
    height: 34px !important;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-empty-selected-row td {
    height: 52px !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap {
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table {
    width: max-content !important;
    min-width: 520px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  html body[data-page="create-challan"] .generate-challan-table .pending-col-serial { width: 34px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-gr { width: 82px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-consignee { width: 154px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-destination { width: 108px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-qty { width: 48px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-weight { width: 54px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-action { width: 40px !important; }

  html body[data-page="create-challan"] .generate-pending-table-wrap th,
  html body[data-page="create-challan"] .generate-pending-table-wrap td {
    height: 34px !important;
    padding: 6px 8px !important;
    font-size: 12.3px !important;
    line-height: 1.15 !important;
  }

  html body[data-theme="dark"][data-page="create-challan"] .generate-challan-selected-card .table-shell {
    border-color: rgba(95, 122, 164, 0.38) !important;
    background: rgba(16, 24, 39, 0.95) !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 0.96fr) minmax(330px, 0.78fr) !important;
    grid-template-rows: minmax(390px, 0.66fr) minmax(0, 1fr) 44px !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Navigation stability pass: this file loads last, so it owns first-paint shell
   sizing and prevents older rail variables from squeezing the sidebar. */
@media screen {
  :root {
    --rail-expanded: 246px;
    --rail-collapsed: 68px;
    --ui-sidebar-width: 246px;
    --ui-sidebar-collapsed: 68px;
  }

  html:not([data-theme]) body:not([data-theme]) {
    background: #f6f8fc !important;
    color: #0f172a !important;
  }

  html:not([data-theme]) body:not([data-theme]) .app-shell {
    grid-template-columns: 246px minmax(0, 1fr) !important;
    background: #f6f8fc !important;
  }

  html:not([data-theme]) body:not([data-theme]).is-sidebar-collapsed .app-shell {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  html:not([data-theme]) body:not([data-theme]) #sideRail.side-rail {
    width: 246px !important;
    min-width: 246px !important;
    max-width: 246px !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
    border-right: 1px solid #d9e2f1 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:not([data-theme]) body:not([data-theme]).is-sidebar-collapsed #sideRail.side-rail {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    padding: 8px !important;
  }
}

@media (min-width: 1081px) {
  html body[data-theme] {
    --rail-expanded: 246px;
    --rail-collapsed: 68px;
    --ui-sidebar-width: 246px;
    --ui-sidebar-collapsed: 68px;
  }

  html body[data-theme] .app-shell {
    grid-template-columns: 246px minmax(0, 1fr) !important;
  }

  html body[data-theme].is-sidebar-collapsed .app-shell {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  html body[data-theme] #sideRail.side-rail {
    width: 246px !important;
    min-width: 246px !important;
    max-width: 246px !important;
    flex: 0 0 246px !important;
    transform: none !important;
  }

  html body[data-theme].is-sidebar-collapsed #sideRail.side-rail {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    flex-basis: 68px !important;
  }

  html body[data-theme] #sideRail.side-rail .rail-nav-group,
  html body[data-theme] #sideRail.side-rail .rail-nav,
  html body[data-theme] #sideRail.side-rail .rail-nav-section,
  html body[data-theme] #sideRail.side-rail .nav-link,
  html body[data-theme] #sideRail.side-rail .nav-link-toggle,
  html body[data-theme] #sideRail.side-rail .rail-theme-card,
  html body[data-theme] #sideRail.side-rail .rail-session-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Sidebar full-width recovery: keep the expanded desktop rail from rendering
   wide outside but narrow inside after cached/base sidebar layers mix. */
@media (min-width: 1081px) {
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail {
    width: 246px !important;
    min-width: 246px !important;
    max-width: 246px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .side-rail-top,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .side-rail-bottom,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .rail-nav,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .rail-nav-group,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .rail-nav-section,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .rail-nav-children,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .rail-theme-card,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .rail-session-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .nav-link,
  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .nav-link-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  html body:not(.is-sidebar-collapsed) #sideRail.side-rail .nav-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Create Challan smart cockpit final layer.
   This deliberately overrides older Create Challan repair passes so the page
   has one predictable desktop layout: work panels, tall selected-GR list,
   slim totals, then a true bottom command footer. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .page-section.create-challan-shell {
    height: calc(100dvh - 126px) !important;
    min-height: 0 !important;
    padding: 8px 12px 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .create-challan-stage--dispatch {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    display: grid !important;
    grid-template-columns: minmax(390px, 0.96fr) minmax(360px, 0.86fr) minmax(370px, 0.82fr) !important;
    grid-template-rows: minmax(420px, 0.58fr) minmax(0, 1fr) 34px 48px !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-card {
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  html body[data-page="create-challan"] .generate-challan-route-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 8px !important;
    align-content: start !important;
    padding: 8px 10px !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-old-records-control,
  html body[data-page="create-challan"] .generate-old-record-filter,
  html body[data-page="create-challan"] .generate-old-records-panel,
  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-card-heading,
  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-net-value {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-old-records-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html body[data-page="create-challan"] .generate-old-records-control .secondary-button {
    min-height: 32px !important;
    padding: 6px 10px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-filter .generate-old-record-select {
    grid-column: auto !important;
  }

  html body[data-page="create-challan"] .generate-card-heading {
    min-height: 0 !important;
    margin-bottom: 4px !important;
    padding-bottom: 6px !important;
  }

  html body[data-page="create-challan"] .generate-card-heading h3 {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  html body[data-page="create-challan"] .generate-card-heading p,
  html body[data-page="create-challan"] .generate-route-info {
    display: none !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 6px 0 8px !important;
  }

  html body[data-page="create-challan"] .generate-route-mode-tabs label {
    min-height: 26px !important;
    padding: 4px 8px !important;
  }

  html body[data-page="create-challan"] .generate-route-card-body {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 8px !important;
  }

  html body[data-page="create-challan"] .generate-route-card-body .generate-field:nth-child(1),
  html body[data-page="create-challan"] .generate-route-card-body .generate-field:nth-child(2),
  html body[data-page="create-challan"] .generate-route-card-body .generate-field:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-field {
    min-width: 0 !important;
    gap: 4px !important;
  }

  html body[data-page="create-challan"] .generate-field > span,
  html body[data-page="create-challan"] .generate-field .field-label {
    font-size: 11px !important;
    letter-spacing: 0.055em !important;
  }

  html body[data-page="create-challan"] .generate-field input,
  html body[data-page="create-challan"] .generate-field select {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 9px !important;
    font-size: 13px !important;
  }

  html body[data-page="create-challan"] .generate-field input[readonly],
  html body[data-page="create-challan"] .generate-field input:disabled {
    cursor: not-allowed !important;
    background: #eef5fb !important;
    color: #34445a !important;
  }

  html body[data-page="create-challan"] .generate-gr-entry-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card label.generate-field:nth-of-type(-n + 3) {
    grid-template-columns: none !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-net-value {
    margin-top: 2px !important;
    min-height: 42px !important;
    padding: 6px 10px !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card .generate-pending-table-wrap {
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-pending-table-wrap .generate-challan-table {
    width: 100% !important;
    min-width: 430px !important;
    table-layout: fixed !important;
  }

  html body[data-page="create-challan"] .generate-challan-table .pending-col-serial { width: 30px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-gr { width: 70px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-consignee { width: 120px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-destination { width: 92px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-qty { width: 42px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-weight { width: 48px !important; }
  html body[data-page="create-challan"] .generate-challan-table .pending-col-action { width: 38px !important; }

  html body[data-page="create-challan"] .generate-pending-table-wrap th,
  html body[data-page="create-challan"] .generate-pending-table-wrap td {
    height: 31px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  html body[data-page="create-challan"] .generate-add-pending-row-button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 0 !important;
  }

  html body[data-page="create-challan"] .generate-add-pending-row-button::before {
    content: "+" !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"] .generate-challan-selected-card,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] .generate-challan-selected-card {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card .table-shell {
    height: 100% !important;
    min-height: 0 !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    overflow: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table table {
    min-width: 1180px !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table th,
  html body[data-page="create-challan"] .generate-challan-selected-table td {
    height: 32px !important;
    padding: 5px 8px !important;
    font-size: 12.4px !important;
    line-height: 1.14 !important;
    white-space: nowrap !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-table input {
    height: 26px !important;
    min-height: 26px !important;
    padding: 3px 7px !important;
    font-size: 12.5px !important;
  }

  html body[data-page="create-challan"] .generate-empty-selected-row td {
    height: 46px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 3px 6px !important;
    overflow: hidden !important;
  }

  html body[data-page="create-challan"] .generate-total-strip > div {
    min-height: 28px !important;
    padding: 3px 8px !important;
    border-radius: 9px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip span {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  html body[data-page="create-challan"] .generate-total-strip strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 0.65fr) minmax(0, 3.4fr) !important;
    gap: 8px !important;
    align-items: center !important;
    align-content: center !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 6px 8px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
  }

  html body[data-page="create-challan"] .generate-command-head {
    min-height: 34px !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
  }

  html body[data-page="create-challan"] .generate-command-head span {
    font-size: 9.5px !important;
  }

  html body[data-page="create-challan"] .generate-command-head strong {
    font-size: 12px !important;
  }

  html body[data-page="create-challan"] .generate-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card.is-old-record-mode .generate-action-buttons {
    grid-template-columns: repeat(8, minmax(86px, 1fr)) !important;
  }

  html body[data-page="create-challan"] .generate-action-buttons > button,
  html body[data-page="create-challan"] .generate-options-menu > summary {
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="create-challan"] .generate-options-menu {
    position: relative !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
  }

  html body[data-page="create-challan"] .generate-options-menu > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  html body[data-page="create-challan"] .generate-options-menu > summary::-webkit-details-marker {
    display: none !important;
  }

  html body[data-page="create-challan"] .generate-options-box {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: min(360px, 86vw) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid #c7d8ef !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
  }

  html body[data-page="create-challan"] .generate-delete-confirm {
    position: absolute !important;
    right: 8px !important;
    bottom: calc(100% + 8px) !important;
    width: min(520px, 72vw) !important;
    z-index: 6 !important;
  }

  html body[data-theme="dark"][data-page="create-challan"] .generate-options-box {
    border-color: rgba(95, 122, 164, 0.45) !important;
    background: #141c2b !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35) !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body[data-page="create-challan"] .page-section.create-challan-shell {
    height: calc(100dvh - 118px) !important;
    padding: 6px 9px 8px !important;
  }

  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    grid-template-columns: minmax(350px, 0.95fr) minmax(320px, 0.82fr) minmax(330px, 0.83fr) !important;
    grid-template-rows: minmax(390px, 0.56fr) minmax(0, 1fr) 32px 46px !important;
    gap: 7px !important;
  }

  html body[data-page="create-challan"] .generate-field input,
  html body[data-page="create-challan"] .generate-field select {
    min-height: 27px !important;
    height: 27px !important;
    font-size: 12.5px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    height: 32px !important;
    min-height: 32px !important;
    gap: 4px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip > div {
    min-height: 26px !important;
    padding: 2px 6px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    height: 46px !important;
    min-height: 46px !important;
    grid-template-columns: minmax(132px, 0.58fr) minmax(0, 3.6fr) !important;
  }

  html body[data-page="create-challan"] .generate-action-buttons > button,
  html body[data-page="create-challan"] .generate-options-menu > summary {
    min-height: 32px !important;
    height: 32px !important;
    padding-inline: 6px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body[data-page="create-challan"] .generate-route-info {
    display: none !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: 6 !important;
  }

  html body[data-page="create-challan"] .generate-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-challan-route-card {
    order: 1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-pending-card {
    order: 2 !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    order: 3 !important;
  }

  html body[data-page="create-challan"] .generate-challan-selected-card {
    order: 4 !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    order: 5 !important;
  }
}

/* Create Challan footer placement correction: older action-card rules used
   side-panel spans. Keep the command, buttons, and options in one clean row. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-template-rows: minmax(0, 1fr) !important;
    justify-items: stretch !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-command-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-action-buttons {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 34px !important;
    grid-template-rows: 34px !important;
    align-self: center !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-action-buttons > * {
    grid-row: 1 !important;
    grid-column: auto !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-options-menu {
    grid-row: 1 !important;
    grid-column: auto !important;
    width: auto !important;
    align-self: center !important;
  }

  html body[data-page="create-challan"] .generate-options-menu:not([open]) .generate-options-box {
    display: none !important;
  }

  html body[data-page="create-challan"] .generate-options-menu[open] .generate-options-box {
    display: grid !important;
  }
}

/* Create Challan route/footer/dispatch cleanup.
   This is the current web behavior contract for the dispatch cockpit: route
   fields stay inline, Dispatch Values contains only settlement fields, and
   Old Record opens from the footer without resizing the upper cards. */
@media (min-width: 1081px) {
  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    grid-template-rows: minmax(420px, 0.58fr) minmax(0, 1fr) 32px 42px !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body[data-page="create-challan"] .generate-field--inline {
    display: grid !important;
    grid-template-columns: 148px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid .generate-field--inline > span,
  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field--inline > span {
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid .generate-field--inline > select,
  html body[data-page="create-challan"] .generate-route-form-grid .generate-field--inline > input,
  html body[data-page="create-challan"] .generate-route-form-grid .generate-inline-input,
  html body[data-page="create-challan"] .generate-route-form-grid .generate-destination-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="create-challan"] .generate-route-form-grid .generate-field--inline > select,
  html body[data-page="create-challan"] .generate-route-form-grid .generate-field--inline > input,
  html body[data-page="create-challan"] .generate-route-form-grid .generate-inline-input > input,
  html body[data-page="create-challan"] .generate-route-form-grid .generate-inline-input > button,
  html body[data-page="create-challan"] .generate-destination-control > select {
    min-height: 38px !important;
    height: 38px !important;
    padding-block: 7px !important;
    font-size: 14px !important;
  }

  html body[data-page="create-challan"] .generate-destination-control {
    display: grid !important;
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-destination-control .generate-destination-chips {
    min-height: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
  }

  html body[data-page="create-challan"] .generate-inline-input {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 9px !important;
    align-content: start !important;
  }

  html body[data-page="create-challan"] .generate-field--vehicle-inline,
  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-net-value {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card label.generate-field.generate-field--vehicle-inline {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card label.generate-field.generate-field--vehicle-inline > span {
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card label.generate-field.generate-field--vehicle-inline input {
    min-height: 40px !important;
    height: 40px !important;
    padding-block: 8px !important;
    font-size: 14px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field:not(.generate-field--vehicle-inline) input {
    min-height: 36px !important;
    height: 36px !important;
    padding-block: 7px !important;
    font-size: 13.5px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field:not(.generate-field--vehicle-inline) {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.92fr) minmax(86px, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-challan-vehicle-card .generate-field:not(.generate-field--vehicle-inline) > span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    font-size: 10.5px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 6px !important;
  }

  html body[data-page="create-challan"] .generate-total-strip > div {
    min-height: 26px !important;
    padding: 2px 7px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 8px !important;
    overflow: visible !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-action-buttons {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(118px, 1.12fr) repeat(5, minmax(102px, 1fr)) !important;
    grid-template-rows: 32px !important;
    gap: 6px !important;
    height: 32px !important;
    width: 100% !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-action-buttons > * {
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body[data-page="create-challan"] .generate-action-buttons > button,
  html body[data-page="create-challan"] .generate-options-menu > summary {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  html body[data-page="create-challan"] .generate-options-menu {
    height: 32px !important;
  }

  html body[data-page="create-challan"] .generate-options-box {
    width: min(390px, 88vw) !important;
  }

  html body[data-page="create-challan"] .generate-route-options-menu-button {
    grid-column: 1 / -1 !important;
    min-height: 32px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup {
    position: absolute !important;
    right: 8px !important;
    bottom: calc(100% + 8px) !important;
    z-index: 8 !important;
    width: min(760px, calc(100vw - 310px)) !important;
    display: grid !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid #bfd4ee !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2) !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    color: #0f2550 !important;
    font-size: 12px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup-head span {
    color: #63728a !important;
    font-weight: 800 !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup .generate-old-record-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(130px, 0.75fr) minmax(210px, 1fr) minmax(260px, 1.35fr) !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup .generate-field--inline {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  html body[data-theme="dark"][data-page="create-challan"] .generate-old-record-dropup {
    border-color: rgba(95, 122, 164, 0.45) !important;
    background: #141c2b !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35) !important;
  }

  html body[data-theme="dark"][data-page="create-challan"] .generate-old-record-dropup-head {
    color: #eef4ff !important;
  }

  html body[data-page="create-challan"] article.generate-challan-route-card .generate-route-form-grid label.generate-field.generate-field--inline > select,
  html body[data-page="create-challan"] article.generate-challan-route-card .generate-route-form-grid label.generate-field.generate-field--inline > input,
  html body[data-page="create-challan"] article.generate-challan-route-card .generate-route-form-grid .generate-destination-control > select,
  html body[data-page="create-challan"] article.generate-challan-route-card .generate-route-form-grid .generate-inline-input > input,
  html body[data-page="create-challan"] article.generate-challan-route-card .generate-route-form-grid .generate-inline-input > button {
    min-height: 40px !important;
    height: 40px !important;
    max-height: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 14px !important;
  }

  html body[data-page="create-challan"] aside.generate-challan-vehicle-card label.generate-field.generate-field--vehicle-inline > input {
    min-height: 42px !important;
    height: 42px !important;
    max-height: none !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 14px !important;
  }

  html body[data-page="create-challan"] aside.generate-challan-vehicle-card label.generate-field:not(.generate-field--vehicle-inline) > input {
    min-height: 38px !important;
    height: 38px !important;
    max-height: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13.5px !important;
  }

  html body[data-theme][data-page="create-challan"] aside.generate-challan-card.generate-challan-vehicle-card label.generate-field.generate-field--inline.generate-field--vehicle-inline > input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 14px !important;
  }

  html body[data-theme][data-page="create-challan"] aside.generate-challan-card.generate-challan-vehicle-card label.generate-field:not(.generate-field--vehicle-inline) > input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13.5px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1500px) {
  html body[data-page="create-challan"] .generate-challan-grid,
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="false"],
  html body[data-page="create-challan"] .generate-challan-grid[data-has-selected-rows="true"] {
    grid-template-rows: minmax(390px, 0.56fr) minmax(0, 1fr) 30px 40px !important;
  }

  html body[data-page="create-challan"] .generate-field--inline {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    height: 40px !important;
    min-height: 40px !important;
    padding-block: 4px !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card .generate-action-buttons {
    grid-template-columns: minmax(108px, 1.05fr) repeat(5, minmax(88px, 1fr)) !important;
    grid-template-rows: 30px !important;
    height: 30px !important;
  }

  html body[data-page="create-challan"] .generate-action-buttons > button,
  html body[data-page="create-challan"] .generate-options-menu > summary {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11.3px !important;
  }
}

@media (max-width: 1080px) {
  html body[data-page="create-challan"] .generate-route-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-field--inline {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-page="create-challan"] .generate-destination-control,
  html body[data-page="create-challan"] .generate-inline-input {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="create-challan"] .generate-destination-control {
    display: grid !important;
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-inline-input {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 6px !important;
  }

  html body[data-page="create-challan"] .generate-field--vehicle-inline {
    grid-column: 1 / -1 !important;
  }

  html body[data-page="create-challan"] .generate-total-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-page="create-challan"] .generate-challan-actions-card {
    overflow: visible !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup {
    position: static !important;
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-top: 8px !important;
    border: 1px solid #bfd4ee !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body[data-page="create-challan"] .generate-old-record-dropup .generate-old-record-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

/* Create Challan field-height ownership.
   Keep this as the last Create Challan override so older repair layers cannot
   shrink the dispatch card fields or leave the cockpit floating above bottom. */
@media (min-width: 1081px) {
  html body[data-theme][data-page="create-challan"] #mainContent.workspace > #createChallanWorkspace.page-section.create-challan-shell {
    align-self: stretch !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 12px 8px !important;
    overflow: hidden !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .create-challan-stage--dispatch.generate-challan-shell {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: minmax(420px, 0.58fr) minmax(0, 1fr) 32px 42px !important;
    align-content: stretch !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-vehicle-card {
    align-content: start !important;
    gap: 10px 9px !important;
    padding: 10px !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace aside.generate-challan-card.generate-challan-vehicle-card label.generate-field.generate-field--inline.generate-field--vehicle-inline {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace aside.generate-challan-card.generate-challan-vehicle-card label.generate-field.generate-field--inline.generate-field--vehicle-inline > span {
    align-self: center !important;
    margin: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace aside.generate-challan-card.generate-challan-vehicle-card label.generate-field.generate-field--inline.generate-field--vehicle-inline > input:not([type="checkbox"]):not([type="radio"]) {
    align-self: center !important;
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace aside.generate-challan-card.generate-challan-vehicle-card label.generate-field:not(.generate-field--vehicle-inline) > input:not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-grid {
    grid-template-columns: minmax(310px, 320px) minmax(245px, 250px) minmax(316px, 1fr) !important;
    grid-template-rows: 500px minmax(0, 1fr) 32px 40px !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-field--inline {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-pending-card .generate-card-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 6px !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-pending-card .generate-pending-meta {
    justify-content: start !important;
    width: 100% !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace aside.generate-challan-card.generate-challan-vehicle-card label.generate-field.generate-field--inline.generate-field--vehicle-inline {
    grid-template-columns: 98px minmax(0, 1fr) !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-vehicle-card .generate-field:not(.generate-field--vehicle-inline) {
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-vehicle-card .generate-field:not(.generate-field--vehicle-inline) > span {
    font-size: 9.8px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  html body[data-theme][data-page="create-challan"] #createChallanWorkspace .generate-challan-vehicle-card .generate-field:not(.generate-field--vehicle-inline) > input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  html body[data-page="create-challan"] .generate-field--inline {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  html body[data-page="create-challan"] .generate-inline-input {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Create Challan: only the GR lookup control gets extra height. */
html body[data-page="create-challan"] #createChallanWorkspace .generate-inline-input:has([name="dispatchGrLookup"]) > input[name="dispatchGrLookup"],
html body[data-page="create-challan"] #createChallanWorkspace .generate-inline-input:has([name="dispatchGrLookup"]) > button[data-create-challan-add-gr] {
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  font-size: 14px !important;
}

/* Create Challan owned destination combobox and selected-row controls. */
html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-combobox {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  z-index: 20 !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-combobox > input[name="createChallanDestinationPicker"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 12px 0 0 12px !important;
  border-right: 0 !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-toggle {
  min-width: 42px !important;
  width: 42px !important;
  min-height: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #bdd4ef !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  background: #f4f8fd !important;
  color: #173966 !important;
  cursor: pointer !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-combobox-caret {
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid currentColor !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 80 !important;
  display: none !important;
  max-height: min(280px, 45vh) !important;
  overflow: auto !important;
  padding: 6px !important;
  border: 1px solid #bdd4ef !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-combobox.is-open .generate-destination-menu {
  display: grid !important;
  gap: 3px !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-option {
  width: 100% !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #0f172a !important;
  font: 700 13px/1.2 "Plus Jakarta Sans", "Outfit", sans-serif !important;
  text-align: left !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-option[hidden] {
  display: none !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-option:hover,
html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-option.is-active {
  background: #e8f1ff !important;
  color: #1f55d6 !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-destination-empty {
  padding: 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-readonly-money {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid #d6e3f2 !important;
  border-radius: 12px !important;
  background: #f2f7fc !important;
  color: #26364a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-challan-selected-table td.create-challan-table-actions {
  padding: 0 6px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-delete-row-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  line-height: 1 !important;
}

html body[data-page="create-challan"] #createChallanWorkspace .generate-delete-row-button svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

html body[data-theme="dark"][data-page="create-challan"] #createChallanWorkspace .generate-destination-toggle {
  border-color: rgba(133, 160, 203, 0.42) !important;
  background: #182338 !important;
  color: #dbeafe !important;
}

html body[data-theme="dark"][data-page="create-challan"] #createChallanWorkspace .generate-destination-menu {
  border-color: rgba(133, 160, 203, 0.42) !important;
  background: #121a2a !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

html body[data-theme="dark"][data-page="create-challan"] #createChallanWorkspace .generate-destination-option {
  color: #eef4ff !important;
}

html body[data-theme="dark"][data-page="create-challan"] #createChallanWorkspace .generate-destination-option:hover,
html body[data-theme="dark"][data-page="create-challan"] #createChallanWorkspace .generate-destination-option.is-active {
  background: rgba(77, 124, 254, 0.22) !important;
  color: #bfdbfe !important;
}

html body[data-theme="dark"][data-page="create-challan"] #createChallanWorkspace .generate-readonly-money {
  border-color: rgba(133, 160, 203, 0.34) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #e2e8f0 !important;
}

/* Search module shell guard: keep the hidden rail from reserving phone/tablet width. */
@media (max-width: 1080px) {
  html:has(> body[data-page="search"]) {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body[data-page="search"] {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body[data-page="search"] .app-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  html body[data-page="search"] #mainContent.workspace,
  html body[data-page="search"] .workspace {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="search"] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  html body[data-page="search"] .page-section.search-module-page,
  html body[data-page="search"] .search-module-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="search"] .search-module-toolbar,
  html body[data-page="search"] .search-module-layout,
  html body[data-page="search"] .search-module-results,
  html body[data-page="search"] .search-module-detail,
  html body[data-page="search"] .search-module-detail-card,
  html body[data-page="search"] .search-module-detail-empty {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body[data-page="search"] .search-module-results,
  html body[data-page="search"] .search-module-detail-card,
  html body[data-page="search"] .search-module-detail-empty {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-page="search"] input,
  html body[data-page="search"] select {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }
}

@media (max-width: 720px) {
  html body[data-page="search"] .app-shell {
    padding: 0 !important;
  }

  html body[data-page="search"] .topbar {
    min-height: 54px !important;
    padding: 8px 10px !important;
  }

  html body[data-page="search"] .topbar-center {
    display: none !important;
  }
}