/* ============================================================
   Ficru — Premium Motion, Animation & Dark Theme Layer
   Dash auto-loads all files from /assets/
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0px rgba(59,130,246,0); }
  50%  { box-shadow: 0 0 22px rgba(59,130,246,0.5); }
  100% { box-shadow: 0 0 0px rgba(59,130,246,0); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes barGrow {
  from { width: 0% !important; }
  to   { width: var(--bar-w, 100%); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes borderPulse {
  0%   { border-color: rgba(59,130,246,0.25); }
  50%  { border-color: rgba(59,130,246,0.65); }
  100% { border-color: rgba(59,130,246,0.25); }
}

/* ============================================================
   DARK DROPDOWN — Dash 4.0 native dropdown class names
   Override Dash design tokens first, then class-level patches
   ============================================================ */

/* ── Override Dash 4.0 CSS design tokens on the root element ── */
.dash-dropdown {
  --Dash-Fill-Interactive-Weak:   rgba(8, 18, 34, 0.95) !important;
  --Dash-Fill-Interactive-Strong: rgba(14, 28, 50, 0.98) !important;
  --Dash-Fill-Inverse-Strong:     rgba(6, 12, 24, 0.99) !important;
  --Dash-Text-Strong:   #c8d8ec !important;
  --Dash-Text-Weak:     #6a90b8 !important;
  --Dash-Text-Disabled: #2d4060 !important;
  --Dash-Shading-Strong: rgba(59,130,246,0.12) !important;
  --Dash-Shading-Weak:   rgba(59,130,246,0.06) !important;
  background: rgba(8, 18, 34, 0.95) !important;
  border-radius: 6px !important;
}

/* Closed-state trigger heading (the part that stays visible before clicking) */
.dash-dropdown-trigger {
  background: transparent !important;
  color: #c8d8ec !important;
}

/* Grid container used for both trigger and search container */
.dash-dropdown-grid-container {
  background: transparent !important;
}

/* Outer wrapper — no visible box, just subtle dark bg */
.dash-dropdown-wrapper {
  background: rgba(8, 18, 34, 0.85) !important;
  border: 1px solid rgba(59,130,246,0.08) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease !important;
}
.dash-dropdown-wrapper:hover {
  border-color: rgba(59,130,246,0.22) !important;
}
.dash-dropdown:focus-within .dash-dropdown-wrapper,
.dash-dropdown-wrapper:focus-within {
  border-color: rgba(59,130,246,0.40) !important;
  background: rgba(10,22,42,0.97) !important;
}

/* Control / trigger area */
.dash-dropdown-content {
  background: transparent !important;
  color: #8aafcf !important;
  min-height: 34px !important;
  cursor: pointer !important;
  padding: 0 8px !important;
}

/* Selected value text */
.dash-dropdown-value,
.dash-dropdown-value-item {
  color: #c8d8ec !important;
  font-size: 12px !important;
  background: transparent !important;
}
.dash-dropdown-value-count {
  color: #5a8fc7 !important;
  font-size: 11px !important;
}

/* Placeholder (no selection) */
.dash-dropdown-content:not(:has(.dash-dropdown-value-item)) .dash-dropdown-value {
  color: #3a5a78 !important;
}

/* Search input */
.dash-dropdown-search {
  background: transparent !important;
  color: #c8d8ec !important;
  border: none !important;
  outline: none !important;
  font-size: 12px !important;
  caret-color: #3b82f6 !important;
}
.dash-dropdown-search::placeholder {
  color: #2d4a68 !important;
}

/* Dropdown arrow and search icons */
.dash-dropdown-trigger-icon {
  color: #4a7aaa !important;
  opacity: 0.7;
}
.dash-dropdown-search-icon {
  color: #4a7aaa !important;
  opacity: 0.6;
}

/* Clear button */
.dash-dropdown-clear {
  color: #4a6280 !important;
  transition: color 0.15s ease !important;
}
.dash-dropdown-clear:hover {
  color: #ef4444 !important;
}

/* Options panel */
.dash-dropdown-options {
  /* position:fixed escapes ALL overflow:auto/hidden ancestors (tables, cards, etc.) */
  position: fixed !important;
  z-index: 99999 !important;
  background: rgba(8, 16, 30, 0.98) !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(6px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 280px !important;
}

/* Individual options */
.dash-dropdown-option {
  background: transparent !important;
  color: #c8d8ec !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
}
.dash-dropdown-option:hover {
  background: rgba(59,130,246,0.18) !important;
  color: #e2eaf6 !important;
}
.dash-dropdown-option[aria-selected="true"],
.dash-dropdown-option.dash-dropdown-option--selected {
  background: rgba(59,130,246,0.28) !important;
  color: #93c5fd !important;
  font-weight: 700 !important;
}

/* Legacy react-select fallback (Dash 2/3) */
.Select-control {
  background-color: rgba(8, 18, 34, 0.92) !important;
  border: 1px solid rgba(59,130,246,0.28) !important;
  border-radius: 6px !important;
  color: #c8d8ec !important;
  box-shadow: none !important;
}
.Select-placeholder, .Select--single > .Select-control .Select-value {
  color: #3a5a78 !important;
}
.Select-menu-outer {
  background-color: rgba(8,16,30,0.98) !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.65) !important;
}
.Select-option {
  background: transparent !important;
  color: #c8d8ec !important;
}
.Select-option:hover, .Select-option.is-focused {
  background: rgba(59,130,246,0.18) !important;
  color: #e2eaf6 !important;
}
.Select-option.is-selected {
  background: rgba(59,130,246,0.28) !important;
  color: #93c5fd !important;
  font-weight: 700 !important;
}

/* ============================================================
   ANIMATIONS & MOTION
   ============================================================ */

/* Page-level fade on navigation */
#page-content {
  animation: fadeSlideUp 0.42s cubic-bezier(.25,.46,.45,.94) both;
}

/* KPI cards */
.kpi-card {
  animation: fadeSlideUp 0.4s both;
  transition: transform 0.22s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.22s ease,
              border-color 0.2s ease;
}
.kpi-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55) !important;
  border-color: rgba(59,130,246,0.45) !important;
}

/* Chart cards */
.chart-card {
  animation: fadeIn 0.5s both;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.chart-card:hover {
  box-shadow: 0 8px 28px rgba(59,130,246,0.20) !important;
  border-color: rgba(59,130,246,0.3) !important;
}

/* CFO Action Plan panel */
.cfo-action-plan {
  animation: fadeSlideUp 0.55s 0.05s both;
}
.cfo-action-plan:hover {
  border-color: rgba(59,130,246,0.55) !important;
  transition: border-color 0.3s ease;
}

/* Vendor decision cards */
.vendor-card {
  animation: fadeSlideUp 0.38s both;
  transition: transform 0.18s ease, background 0.18s ease;
  cursor: default;
}
.vendor-card:hover {
  transform: translateX(5px);
  background: rgba(22,34,52,0.92) !important;
}

/* Action insight items */
.action-item {
  animation: fadeSlideUp 0.35s both;
  transition: background 0.15s ease, transform 0.15s ease;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.action-item:hover {
  background: rgba(59,130,246,0.09) !important;
  transform: translateX(3px);
}

/* Health score bars (animated fill) */
.health-bar-fill {
  animation: barGrow 1.1s cubic-bezier(.22,.61,.36,1) both;
}

/* Filter bar */
.dash-filter-bar {
  animation: fadeSlideUp 0.35s both;
}

/* Navigation sidebar */
.nav-item {
  transition: background 0.15s ease, padding-left 0.15s ease, color 0.15s ease;
}
.nav-item:hover {
  padding-left: 20px !important;
  background: rgba(59,130,246,0.12) !important;
  color: #c8d8ec !important;
}

/* DataTable rows */
.dash-spreadsheet-container .dash-spreadsheet-inner tr {
  transition: background 0.12s ease;
}

/* Alert badges */
.alert {
  animation: fadeIn 0.3s both;
}

/* Accordion */
.accordion-button {
  transition: background 0.15s ease !important;
}

/* Stagger children */
.stagger > *:nth-child(1) { animation-delay: 0.00s; }
.stagger > *:nth-child(2) { animation-delay: 0.07s; }
.stagger > *:nth-child(3) { animation-delay: 0.14s; }
.stagger > *:nth-child(4) { animation-delay: 0.21s; }
.stagger > *:nth-child(5) { animation-delay: 0.28s; }
.stagger > *:nth-child(6) { animation-delay: 0.35s; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(8,15,28,0.7); }
::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.58); }

/* ============================================================
   GLOBAL DARK INPUT / FORM OVERRIDES
   ============================================================ */
/* Bootstrap input base */
input.form-control, .form-control {
  background-color: rgba(8,18,34,0.90) !important;
  border-color: rgba(59,130,246,0.28) !important;
  color: #c8d8ec !important;
  border-radius: 6px !important;
}
input.form-control:focus, .form-control:focus {
  background-color: rgba(10,22,42,0.97) !important;
  border-color: rgba(59,130,246,0.7) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15) !important;
  color: #e2eaf6 !important;
}
input.form-control::placeholder { color: #3a5a78 !important; }

/* ============================================================
   DARK DATE PICKER — Nuclear ID + class approach
   ============================================================ */

/* ── 1. INPUT AREA (inside #lflt-date) ── */

/* Kill every white bg inside the date-picker wrapper */
#lflt-date,
#lflt-date *,
#lflt-date > div,
#lflt-date div,
#lflt-date span,
#lflt-date input,
#lflt-date button,
#lflt-date label,
#lflt-date .SingleDatePicker,
#lflt-date .SingleDatePickerInput,
#lflt-date .SingleDatePickerInput__withBorder,
#lflt-date .DateInput,
#lflt-date .DateInput__small {
  background: #0a1222 !important;
  background-color: #0a1222 !important;
  color: #c8d8ec !important;
  border-color: rgba(59,130,246,0.08) !important;
  box-shadow: none !important;
}
#lflt-date {
  max-width: 140px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  padding: 0 !important;
}
#lflt-date > div,
#lflt-date .SingleDatePicker,
#lflt-date .SingleDatePickerInput,
#lflt-date .DateInput {
  width: 100% !important;
  max-width: 140px !important;
}

/* The visible input box */
#lflt-date input {
  background: transparent !important;
  background-color: transparent !important;
  color: #c8d8ec !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 6px !important;
  height: 28px !important;
  outline: none !important;
  caret-color: #60a5fa !important;
}
#lflt-date input::placeholder { color: #6a8aaa !important; }

/* Clear (x) button inside input */
#lflt-date button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: #4a6280 !important;
  cursor: pointer !important;
}
#lflt-date button:hover { color: #ef4444 !important; }
#lflt-date svg { fill: #4a7aaa !important; }

/* Dash 4 class-based input overrides (supplement ID rules) */
.dash-datepicker { font-family: var(--font, inherit) !important; max-width: 140px !important; }
.dash-datepicker-input-wrapper {
  background: #0a1222 !important;
  border: 1px solid rgba(59,130,246,0.08) !important;
  border-radius: 6px !important;
  min-height: 30px !important; max-height: 34px !important;
  display: flex !important; align-items: center !important;
  padding: 0 4px !important; box-sizing: border-box !important;
  overflow: hidden !important;
  color: #c8d8ec !important;
}
.dash-datepicker-input-wrapper:hover { border-color: rgba(59,130,246,0.22) !important; }
.dash-datepicker-input-wrapper:focus-within { border-color: rgba(59,130,246,0.40) !important; background: #0c1628 !important; }

/* Catch-all: whatever the exact markup (real <input> placeholder pseudo-
   element, or a fake-placeholder <span>/<div> shown when no date is
   selected), force every text-bearing descendant of the date-filter
   wrapper to a visible light color. Without this, the "Pick date…"
   placeholder was inheriting the browser/library default (near-black)
   text color, making it invisible against the app's dark background. */
#lflt-date .dash-datepicker-input-wrapper,
#lflt-date .dash-datepicker-input-wrapper *:not(svg):not(button) {
  color: #c8d8ec !important;
}
#lflt-date input::placeholder,
.dash-datepicker-input-wrapper input::placeholder {
  color: #8fa8c4 !important;
  opacity: 1 !important;
}

/* ── 2. CALENDAR POPUP (may be portaled to <body>) ── */

/* Solid opaque panel — Dash 4 classes */
.dash-datepicker-content,
.SingleDatePicker_picker {
  background: #08101e !important;
  background-color: #08101e !important;
  border: 1px solid rgba(59,130,246,0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.80) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}
.dash-datepicker-portal { z-index: 99999 !important; }

/* Every child inside the calendar popup — solid bg, not transparent */
.dash-datepicker-content *,
.dash-datepicker-content div,
.dash-datepicker-content td,
.dash-datepicker-content th,
.dash-datepicker-content table,
.dash-datepicker-content tr {
  background: #08101e !important;
  background-color: #08101e !important;
  color: #a0b8d0 !important;
}

/* Calendar structural wrappers */
.dash-datepicker-calendar-wrapper,
.dash-datepicker-calendar-container,
.dash-datepicker-calendar,
.dash-datepicker-calendar-padding,
.DayPicker,
.DayPicker__horizontal,
.CalendarMonth,
.CalendarMonthGrid {
  background: #08101e !important;
  background-color: #08101e !important;
}

/* Month header */
.dash-datepicker-calendar-month-header,
.CalendarMonth_caption {
  color: #c8d8ec !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #08101e !important;
}

/* Weekday header row */
.dash-datepicker-calendar-week,
.DayPicker_weekHeader {
  color: #5a7a9a !important;
  font-size: 11px !important;
  background: #08101e !important;
}
.DayPicker_weekHeader_li,
.DayPicker_weekHeader_ul {
  background: #08101e !important;
  color: #5a7a9a !important;
}

/* Nav arrows — Dash 4 and legacy */
.dash-datepicker-controls button,
.dash-datepicker-month-nav,
.DayPickerNavigation_button,
.DayPickerNavigation_button__default {
  background: rgba(59,130,246,0.12) !important;
  border: 1px solid rgba(59,130,246,0.2) !important;
  border-radius: 6px !important;
  color: #60a5fa !important;
  cursor: pointer !important;
}
.dash-datepicker-controls button:hover,
.DayPickerNavigation_button:hover {
  background: rgba(59,130,246,0.25) !important;
  border-color: rgba(59,130,246,0.4) !important;
}
.dash-datepicker-controls svg,
.DayPickerNavigation_button svg,
.DayPickerNavigation_svg__horizontal {
  fill: #60a5fa !important;
}

/* Day cells — current month */
.dash-datepicker-calendar-date-inside,
.CalendarDay__default {
  background: #08101e !important;
  color: #a0b8d0 !important;
  border: 1px solid rgba(59,130,246,0.08) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
.dash-datepicker-calendar-date-inside:hover,
.CalendarDay__default:hover {
  background: rgba(59,130,246,0.18) !important;
  color: #e2eaf6 !important;
  border-color: rgba(59,130,246,0.3) !important;
}

/* Day cells — outside month */
.dash-datepicker-calendar-date-outside {
  color: #2d4060 !important;
  background: #08101e !important;
  border: 1px solid transparent !important;
}
.dash-datepicker-calendar-date-outside:hover {
  background: rgba(59,130,246,0.08) !important;
  color: #4a6a8a !important;
}

/* Selected day */
.dash-datepicker-calendar-date-selected,
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: rgba(59,130,246,0.45) !important;
  color: #ffffff !important;
  border-color: rgba(59,130,246,0.6) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

/* Highlighted / today */
.dash-datepicker-calendar-date-highlighted,
.CalendarDay__today {
  background: rgba(59,130,246,0.15) !important;
  color: #dbeafe !important;
  border-color: rgba(59,130,246,0.35) !important;
  font-weight: 600 !important;
}

/* Disabled / blocked */
.dash-datepicker-calendar-date-disabled,
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:hover {
  color: #1e3048 !important;
  background: #08101e !important;
  border-color: rgba(59,130,246,0.04) !important;
  cursor: not-allowed !important;
  opacity: 0.4 !important;
}

/* Close button */
.dash-datepicker-close-button {
  color: #5a7a9a !important;
  background: transparent !important;
  border: none !important;
}
.dash-datepicker-close-button:hover { color: #ef4444 !important; }

/* ── Plotly modebar — blend with dark theme ── */
.modebar-container { background: transparent !important; }
.modebar-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.modebar-btn path { fill: rgba(148,163,184,0.25) !important; }
.modebar-btn:hover path { fill: rgba(147,197,253,0.7) !important; }

/* ── 3. LEGACY react-dates wrappers ── */
.SingleDatePickerInput,
.SingleDatePickerInput__withBorder {
  background: #0a1222 !important;
  border: 1px solid rgba(59,130,246,0.08) !important;
  border-radius: 6px !important;
}
.DateInput,
.DateInput__small {
  background: #0a1222 !important;
  background-color: #0a1222 !important;
}
.DateInput_input,
.DateInput_input__small {
  background: transparent !important;
  color: #c8d8ec !important;
  font-size: 12px !important;
  border: none !important;
}
.DateInput_input::placeholder,
.DateInput_input__small::placeholder {
  color: #3a5a78 !important;
}
.DateInput_fang,
.DateInput_fangShape,
.DateInput_fangStroke {
  display: none !important;
}

/* ============================================================
   UPLOAD DROP ZONE
   ============================================================ */
.upload-zone {
  border: 2px dashed rgba(59,130,246,0.3) !important;
  border-radius: 10px !important;
  background: rgba(10,20,38,0.5) !important;
  padding: 36px 20px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}
.upload-zone:hover {
  border-color: rgba(59,130,246,0.6) !important;
  background: rgba(14,28,50,0.6) !important;
}

.upload-zone-small {
  border: 1px dashed rgba(59,130,246,0.2);
  border-radius: 6px;
  background: rgba(10,20,38,0.4);
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  font-size: 11px;
  color: #5a8fc7;
  transition: border-color 0.2s ease;
}
.upload-zone-small:hover {
  border-color: rgba(59,130,246,0.5);
}