/*
 * Targeted UI corrections requested on 2026-08-16.
 * Presentation only: no data, filter, calculation, API, or business-rule changes.
 */

/* Existing Equipment / Fake QT selects are visually replaced by a single checkbox. */
#dash-screen .ui-bool-checkbox {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
  accent-color: #2563eb;
  cursor: pointer;
  flex: 0 0 auto;
}

#dash-screen .ui-bool-checkbox:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .2);
  outline-offset: 2px;
}

/* Marketing Analysis must live directly inside the normal Dashboard content flow. */
#dash-content > #marketing-section {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#dash-content > #marketing-section:not(.hidden) {
  display: block !important;
}

/* Reserve space only for the right-side vertical scrollbar, not both sides. */
#dash-screen .h-scroll,
#dash-screen .pivot-scroll,
#dash-screen .overflow-auto,
#dash-screen [style*="overflow-x:auto"],
#dash-screen [style*="overflow-x: auto"],
#marketing-section .ma-table-wrap,
#dash-screen .dashboard-scroll-viewport {
  scrollbar-gutter: stable !important;
}

/* Keep every report table within a predictable, independently scrollable viewport. */
#dash-screen #dash-content .pivot-scroll,
#dash-screen #dash-content .dashboard-scroll-viewport,
#dash-screen #dash-content .h-scroll,
#dash-screen #dash-content #marketing-section > .ma-card .ma-table-wrap {
  width: 100%;
  block-size: auto !important;
  max-block-size: clamp(320px, 58dvh, 560px) !important;
  max-height: clamp(320px, 58dvh, 560px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  margin-bottom: 4px;
}

/* A visible range control is available when an overlay-scrollbar browser hides its native bar. */
#dash-screen #dash-content .dashboard-horizontal-scroll-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 2px 0 8px;
  padding: 2px 8px;
  border: 1px solid #dbe3ed;
  border-radius: 7px;
  background: #f8fafc;
}

#dash-screen #dash-content .dashboard-horizontal-scroll-control[hidden] {
  display: none !important;
}

#dash-screen #dash-content .dashboard-horizontal-scroll-range {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 18px;
  margin: 0;
  accent-color: #2563eb;
  cursor: ew-resize;
  touch-action: pan-x;
}

#dash-screen #dash-content .dashboard-horizontal-scroll-label {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

#dash-screen #dash-content .dashboard-horizontal-scroll-range:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .25);
  outline-offset: 2px;
}

/* Native scrollbars remain the primary cross-device control. */
#dash-screen #dash-content .pivot-scroll,
#dash-screen #dash-content .dashboard-scroll-viewport,
#dash-screen #dash-content #marketing-section .ma-table-wrap,
#dash-screen #dash-content .h-scroll,
#sherman-output [style*="overflow-x"] {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}
#dash-screen #dash-content .pivot-scroll::-webkit-scrollbar,
#dash-screen #dash-content .dashboard-scroll-viewport::-webkit-scrollbar,
#dash-screen #dash-content #marketing-section .ma-table-wrap::-webkit-scrollbar,
#dash-screen #dash-content .h-scroll::-webkit-scrollbar,
#sherman-output [style*="overflow-x"]::-webkit-scrollbar {
  display: block !important;
  width: 12px;
  height: 12px;
}

/* Prevent the far-right value from sitting beneath the vertical scrollbar. */
#dash-screen .pivot-scroll > table,
#dash-screen .dashboard-scroll-viewport > table {
  margin-right: 14px;
}

/* Purchase product names remain readable without consuming the numeric viewport. */
#po-section .po-label-cell {
  width: min(34vw, 440px) !important;
  min-width: 300px !important;
  max-width: 440px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

#po-section .pivot-scroll > table {
  width: max-content;
  min-width: 100%;
}

/* Existing billing states shown when Billing = All; this is display-only. */
#po-billing-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.po-billing-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #dbe3ed;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

.po-billing-status-card strong {
  color: #0f172a;
  font-size: 14px;
}

.po-billing-status-card[data-status="invoiced"] { border-left: 4px solid #059669; }
.po-billing-status-card[data-status="to invoice"] { border-left: 4px solid #d97706; }
.po-billing-status-card[data-status="no"] { border-left: 4px solid #64748b; }

/* Name the Replenishment selection column without changing its checkbox action. */
#rep-head .rep-select-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  font-weight: 700;
}

#rep-head th:has(#rep-select-all) {
  min-width: 86px;
  width: 86px;
  text-align: center;
}

@media (max-width: 900px) {
  #dash-screen #dash-content .pivot-scroll,
  #dash-screen #dash-content .dashboard-scroll-viewport,
  #dash-screen #dash-content .h-scroll,
  #dash-screen #dash-content #marketing-section > .ma-card .ma-table-wrap {
    max-block-size: clamp(260px, 54dvh, 440px) !important;
    max-height: clamp(260px, 54dvh, 440px) !important;
  }

  #po-billing-status-summary {
    grid-template-columns: 1fr;
  }

  #po-section .po-label-cell {
    min-width: 260px !important;
    max-width: 340px !important;
  }
}

/* Responsive dashboard width: fluid to the viewport, capped by the widest rendered pivot table. */
#dash-screen #dash-content {
  width: 100% !important;
  max-width: var(--dashboard-natural-max, 2200px) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  #dash-screen #dash-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  #dash-screen #dash-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #dash-screen > .bg-white {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px !important;
  }

  #dash-screen #dash-content .card,
  #dash-screen #dash-content .bg-white.border-b {
    padding: 10px !important;
  }

  #dash-screen #dash-content .search-input {
    width: 100% !important;
    max-width: 100%;
    flex: 1 0 100%;
  }

  #dash-screen #dash-content select,
  #dash-screen #dash-content input:not([type="checkbox"]):not([type="radio"]) {
    max-width: 100%;
  }

  #dash-screen #dash-content .btn {
    min-height: 36px;
  }

  #dash-screen #dash-content .pivot-scroll,
  #dash-screen #dash-content .dashboard-scroll-viewport,
  #dash-screen #dash-content .h-scroll,
  #dash-screen #dash-content #marketing-section > .ma-card .ma-table-wrap {
    max-block-size: clamp(240px, 52dvh, 380px) !important;
    max-height: clamp(240px, 52dvh, 380px) !important;
  }
}