/* ================================================================
   13_shortages.css
   Shortages module: glass morphism, pack movements, filters,
   date picker
   ================================================================ */

/* =====================================================================
   Nordics — Details Offcanvas (glass)
   Shared class: .pi-glass-offcanvas
   ===================================================================== */

.pi-glass-offcanvas.offcanvas {
  height: 100dvh;
  max-height: 100dvh;

  border-radius: 0;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  box-shadow: var(--elev-3);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  color: var(--text-strong);

  display: flex;
  flex-direction: column;
}

.pi-glass-offcanvas .offcanvas-body {
  padding: 14px 16px 16px;
  color: var(--text-strong);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.pi-glass-offcanvas .offcanvas-body::-webkit-scrollbar {
  display: none;
}

/* Title + meta */
.pi-glass-offcanvas .pi-oc-title {
  font-size: 1.10rem;
  font-weight: 700;
  color: var(--text-strong);
}
.pi-glass-offcanvas .pi-oc-meta {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.pi-glass-offcanvas .pi-oc-divider {
  border-top: 1px solid var(--divider-glass);
  margin: 12px 0;
}

/* Chip/pill styling */
.pi-glass-offcanvas .pi-oc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, .06);
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.90rem;
  white-space: nowrap;
}

/* Insights box */
.pi-glass-offcanvas .pi-oc-section {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.pi-glass-offcanvas .pi-oc-section-title {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Bullet list inside insights */
.pi-glass-offcanvas .pi-oc-list {
  margin: 0;
  padding-left: 1.05rem;
}
.pi-glass-offcanvas .pi-oc-list li {
  margin: 4px 0;
  color: var(--text-strong);
}
.pi-glass-offcanvas .pi-oc-list .pi-oc-li-muted {
  color: var(--text-muted);
  font-weight: 500;
}

/* White "content card" */
.pi-glass-offcanvas .pi-oc-white-card {
  background: #ffffff;
  border: 1px solid #cfd6e8;
  border-radius: var(--radius-md);
}

.pi-glass-offcanvas .pi-oc-grid-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pi-glass-offcanvas .pi-oc-white-card .pi-search-input {
  border-radius: 12px;
}
/* Pills inside the glass drawers (override inline _pill styles) */
.pi-glass-offcanvas .rounded-pill {
  color: rgba(248, 250, 252, 0.92) !important;           /* white-ish text */
  background: rgba(255, 255, 255, 0.08) !important;      /* glassy chip bg */
  border-color: rgba(255, 255, 255, 0.18) !important;    /* glass border */
}
/* Offcanvas close button (the X) */
.pi-glass-offcanvas .btn-close {
  filter: invert(1);                      /* makes the X white-ish */
  opacity: 0.85;

  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}

.pi-glass-offcanvas .btn-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.26);
}

.pi-glass-offcanvas .btn-close:focus {
  box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.18);
}

/* =======================================================================
   Shortages – Filters offcanvas
   Scope: .offcanvas.filters-panel (shortages_historical Filters panel)
   Matches Settings / Excel drawers
   ======================================================================= */

/* Fallback if blur isn't supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .offcanvas.filters-panel {
    background: #0f274b !important;
  }
}

/* Shell --------------------------------------------------------------- */
.offcanvas.filters-panel {
  --bs-offcanvas-width: min(92vw, 460px);

  width: var(--bs-offcanvas-width) !important;
  max-width: var(--bs-offcanvas-width) !important;

  background:
    radial-gradient(140% 180% at 20% 0%, rgba(70, 124, 230, 0.40) 0, transparent 55%),
    radial-gradient(180% 160% at 85% 100%, rgba(33, 210, 204, 0.25) 0, transparent 55%),
    var(--surface-glass);
  color: var(--text-strong);

  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: 1px solid var(--border-glass);
  box-shadow: var(--elev-3);

  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);

  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 0;
}

@media (max-width: 576px) {
  .offcanvas.filters-panel {
    border-radius: 0;
  }
}

/* Header -------------------------------------------------------------- */
.offcanvas.filters-panel .offcanvas-header {
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--divider-glass);
}

.offcanvas.filters-panel .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  color: var(--text-strong);
}

.offcanvas.filters-panel .btn-close {
  filter: invert(1) opacity(0.8);
}
.offcanvas.filters-panel .btn-close:hover {
  opacity: 1;
}

/* Body layout --------------------------------------------------------- */
.offcanvas.filters-panel .offcanvas-body {
  padding: 0.9rem 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Accordion ----------------------------------------------------------- */
.offcanvas.filters-panel .accordion-item {
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.55);
  overflow: hidden;
}

.offcanvas.filters-panel .accordion-item + .accordion-item {
  margin-top: 0.5rem;
}

.offcanvas.filters-panel .accordion-button {
  background: rgba(15, 23, 42, 0.9);
  color: var(--text-strong);
  font-weight: 500;
  padding: 0.65rem 1rem;
}
.offcanvas.filters-panel .accordion-button:not(.collapsed) {
  box-shadow: inset 0 0 0 1px var(--border-glass);
}
.offcanvas.filters-panel .accordion-button::after {
  filter: invert(1) opacity(0.85);
}

.offcanvas.filters-panel .accordion-body {
  background: transparent;
  padding: 0.75rem 1rem 0.9rem;
}

/* Labels + dropdowns -------------------------------------------------- */
.offcanvas.filters-panel .form-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Dash dropdowns (dcc.Dropdown) – compact, dark control */
.offcanvas.filters-panel .dd-compact,
.offcanvas.filters-panel .dd-compact .Select__control,
.offcanvas.filters-panel .dd-compact .Select-control {
  background: rgba(3, 17, 47, 0.95);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  color: var(--text-strong);
  min-height: 36px;
}

.offcanvas.filters-panel .dd-compact .Select__placeholder,
.offcanvas.filters-panel .dd-compact .Select-placeholder {
  color: var(--text-muted);
}

/* Footer / actions row ------------------------------------------------ */
.offcanvas.filters-panel .border-top {
  border-color: var(--divider-glass) !important;
  background:
    linear-gradient(180deg, rgba(5, 18, 46, 0.96), rgba(2, 8, 26, 1));
  padding-top: 0.75rem;
}

.offcanvas.filters-panel .btn-link {
  color: var(--text-muted);
  text-decoration: none;
}
.offcanvas.filters-panel .btn-link:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

/* Optional: gentle fade-in after load */
.graph--hide-while-loading {
  transition: visibility 0s linear 200ms, opacity 200ms ease-in;
  opacity: 1;
}

/* ── Shortages Date Picker (was: z_datepicker.css) ───────────── */
/* -------------------------------------------------------------------------
   DatePickerRange (dcc) — styled to match pi-search-input look/feel
   Targets your wrapper .shhist-date-control and dcc class .shhist-date-picker
   ------------------------------------------------------------------------- */

:root {
  --pi-control-height: 32px;
  --pi-control-radius: 6px;
  --pi-color-primary: #0066cc;
  --pi-color-border-subtle: #cfd8e3;
  --pi-color-border-strong: #b8c9e6;
  --pi-color-text: #111827;
  --pi-color-placeholder: #6b7280;
  --pi-color-disabled-bg: #f5f5f5;
  --pi-color-disabled-text: #9ca3af;
  --pi-color-hover-bg: #f5f8ff;
  --pi-focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.16);
}

/* Wrapper you created around the picker */
.shhist-date-control {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
  white-space: nowrap;

  height: var(--pi-control-height) !important;
  padding: 0 6px !important;

  border-radius: var(--pi-control-radius) !important;
  border: 1px solid var(--pi-color-border-strong) !important;
  background-color: #ffffff !important;
  color: var(--pi-color-text);

  box-shadow: none;
  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* Hover affordance like your search input */
.shhist-date-control:hover:not(:focus-within) {
  border-color: var(--pi-color-primary) !important;
  background-color: var(--pi-color-hover-bg) !important;
}

/* Focus ring when either start or end input is focused */
.shhist-date-control:focus-within {
  border-color: var(--pi-color-primary) !important;
  box-shadow: var(--pi-focus-ring) !important;
  background-color: #ffffff !important;
}

/* React-dates outer container (Dash DatePickerRange) */
.shhist-date-control .DateRangePickerInput {
  display: inline-flex;
  align-items: center;
  background: transparent !important;

  /* NEW: make room + anchor the clear button like pi-search-clear */
  position: relative !important;
  padding-right: 28px !important; /* reserve space for the X */
}

/* Remove the default react-dates border (we use the wrapper border) */
.shhist-date-control .DateRangePickerInput__withBorder {
  border: 0 !important;
}

/* If a calendar icon is present in your build, hide it (keeps things one-line clean) */
.shhist-date-control .DateRangePickerInput_calendarIcon,
.shhist-date-control .DateRangePickerInput_calendarIcon_svg {
  display: none !important;
}

/* Make each date input behave like a clean “borderless” field inside the wrapper */
.shhist-date-control .DateInput {
  width: auto;
  background: transparent !important;
}

.shhist-date-control .DateInput_input {
  height: calc(var(--pi-control-height) - 2px) !important; /* wrapper border accounted */
  padding: 0 10px !important;

  font-size: 0.95rem !important;
  line-height: 1.5 !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: var(--pi-color-text) !important;
}

/* Placeholder tone */
.shhist-date-control .DateInput_input::placeholder {
  color: var(--pi-color-placeholder) !important;
  opacity: 1 !important;
}

/* The arrow between start/end */
.shhist-date-control .DateRangePickerInput_arrow {
  padding: 0 6px !important;
  color: var(--pi-color-placeholder) !important;
}

/* Clear “x” button (since you have clearable=True) — NEW aligned style */
.shhist-date-control .DateRangePickerInput_clearDates {
  position: absolute !important;
  right: 4px; /* 4 + wrapper padding(6) ≈ 10px from outer border (matches search input) */
  top: 50% !important;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  border-radius: var(--pi-control-radius);
  background: rgba(0, 102, 204, 0.06);

  display: flex !important;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}

/* SVG sizing + default tone like your search X */
.shhist-date-control .DateRangePickerInput_clearDates_svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: #374151 !important;
}

.shhist-date-control .DateRangePickerInput_clearDates:hover {
  background: rgba(0, 102, 204, 0.12);
}

.shhist-date-control .DateRangePickerInput_clearDates:hover .DateRangePickerInput_clearDates_svg {
  fill: var(--pi-color-primary) !important;
}

.shhist-date-control .DateRangePickerInput_clearDates:focus-visible {
  outline: none;
  box-shadow: var(--pi-focus-ring);
}

.shhist-date-control .DateRangePickerInput_clearDates:active {
  transform: translateY(-50%) scale(0.97);
}

/* Disabled state (react-dates uses these classes) */
.shhist-date-control .DateRangePickerInput__disabled,
.shhist-date-control .DateInput_input__disabled {
  background-color: var(--pi-color-disabled-bg) !important;
  color: var(--pi-color-disabled-text) !important;
  cursor: not-allowed !important;
}

.shhist-date-control .DateInput_input__disabled::placeholder {
  color: var(--pi-color-disabled-text) !important;
}

/* Optional: make the calendar popover feel consistent (border radius + subtle border/shadow) */
.shhist-date-picker .DateRangePicker_picker {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.shhist-date-picker .DayPicker {
  border: 1px solid var(--pi-color-border-subtle) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}

/* --- Compact the two date fields so they don't waste horizontal space --- */
.shhist-date-control .DateInput {
  flex: 0 0 auto !important;

  /* Pick ONE approach: px (predictable) or ch (font-relative) */
  width: 90px !important;     /* good for "3 Dec 2025" / "12/31/2025" */
  /* width: 12ch !important; */ /* alternative */

  background: transparent !important;
}

/* Ensure the input fills the compact DateInput box */
.shhist-date-control .DateInput_input {
  width: 100% !important;
  padding: 0 8px !important;   /* slightly tighter than 0 10px (optional) */
}

/* Optional: tighten the arrow spacing a touch */
.shhist-date-control .DateRangePickerInput_arrow {
  padding: 0 4px !important;
}

/* Optional: reclaim a couple px from the clear-button reserve */
.shhist-date-control .DateRangePickerInput {
  padding-right: 24px !important; /* was 28px */
}

/* ── SKU episodes DataTable: dark-theme on all interactive states ─────── */
/* Cells: base, hover, focused, selected, active — force light text       */
.custom-offcanvas .dash-spreadsheet-container td,
.custom-offcanvas .dash-spreadsheet-container td.dash-cell,
.custom-offcanvas .dash-spreadsheet-container td.focused,
.custom-offcanvas .dash-spreadsheet-container td.cell--selected,
.custom-offcanvas .dash-spreadsheet-container td.cell--active {
  color: rgba(226, 232, 240, 0.88) !important;
  background-color: transparent !important;
}
.custom-offcanvas .dash-spreadsheet-container td.focused,
.custom-offcanvas .dash-spreadsheet-container td.cell--selected,
.custom-offcanvas .dash-spreadsheet-container td.cell--active {
  background-color: rgba(148, 163, 184, 0.12) !important;
}

/* Input element inside the focused cell */
.custom-offcanvas .dash-spreadsheet-container td input,
.custom-offcanvas .dash-spreadsheet-container td .dash-cell-value,
.custom-offcanvas .dash-spreadsheet-container td .unfocused,
.custom-offcanvas .dash-spreadsheet-container td .dash-input-cell-value-container input,
.custom-offcanvas .dash-spreadsheet-container td .dash-cell-value-container {
  color: rgba(226, 232, 240, 0.88) !important;
  background: transparent !important;
}

/* Remove default blue selection box-shadow / outline */
.custom-offcanvas .dash-spreadsheet-container td.focused,
.custom-offcanvas .dash-spreadsheet-container td.cell--selected {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}