/* =============================================================================
 * Unified form fields + dropdowns (app-wide visual coherence)
 * -----------------------------------------------------------------------------
 * Clones the polished Settings input look (custom.css `.settings-section ...`)
 * onto every input, textarea, native select and dcc.Dropdown across all pages,
 * styles the Dash 4 dropdown popover so it renders solid + above everything,
 * and adds a mobile layer so pages read well on phones (iPhone-first).
 * =========================================================================== */

/* ----------------------------- text inputs -------------------------------- */
.app-shell .form-control,
.app-shell .form-select,
.app-shell textarea.form-control,
.app-shell .input-group > .form-control,
.app-shell .input-group > .form-select {
  background-color: rgba(7, 11, 20, 0.55);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  min-height: 38px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.app-shell .form-control::placeholder {
  color: rgba(169, 179, 209, 0.55);
}
.app-shell .form-control:hover:not(:focus),
.app-shell .form-select:hover:not(:focus) {
  border-color: rgba(45, 125, 255, 0.4);
}
.app-shell .form-control:focus,
.app-shell .form-select:focus {
  background-color: rgba(7, 11, 20, 0.7);
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(45, 125, 255, 0.18);
  color: var(--text);
}
.app-shell .form-select option {
  background-color: #0e1630;
  color: var(--text);
}

/* Input groups: seamless control + addon button (matches Settings) */
.app-shell .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.app-shell .input-group > .btn {
  border-radius: 0 10px 10px 0;
  white-space: nowrap;
}

/* Checkboxes / switches */
.app-shell .form-check-input {
  background-color: rgba(7, 11, 20, 0.55);
  border-color: var(--border);
}
.app-shell .form-check-input:checked {
  background-color: var(--accent2);
  border-color: var(--accent2);
}
.app-shell .form-check-input:focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(45, 125, 255, 0.18);
}

/* =============================== dcc.Dropdown ============================== */
/* Dash 4 dropdown (Radix popover). Class names verified from dcc/async-dropdown.js.
   CSS-in-JS injects late, so the trigger/content overrides use !important. */
.dash-dropdown-trigger {
  background-color: rgba(7, 11, 20, 0.55) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.dash-dropdown-trigger:hover {
  border-color: rgba(45, 125, 255, 0.45) !important;
}
.dash-dropdown-trigger:focus,
.dash-dropdown-trigger:focus-visible,
.dash-dropdown-trigger[aria-expanded="true"],
.dash-dropdown-trigger[data-state="open"] {
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 3px rgba(45, 125, 255, 0.18) !important;
  outline: none !important;
}
.dash-dropdown-placeholder {
  color: rgba(169, 179, 209, 0.6) !important;
}
.dash-dropdown-value,
.dash-dropdown-value-item {
  color: var(--text) !important;
}
.dash-dropdown-value-count {
  background: rgba(45, 125, 255, 0.22) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
}
.dash-dropdown-trigger-icon,
.dash-dropdown-clear {
  color: var(--muted) !important;
}
.dash-dropdown-clear:hover {
  color: var(--text) !important;
}

/* The popover menu — solid, elevated, above everything. */
.dash-dropdown-content {
  background-color: rgba(14, 22, 48, 0.98) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 6px !important;
  color: var(--text) !important;
  z-index: var(--z-dropdown) !important;
}
[data-radix-popper-content-wrapper] {
  position: fixed !important;
  z-index: var(--z-dropdown) !important;
}
.dash-dropdown-options {
  max-height: 280px;
  overflow-y: auto;
}
.dash-dropdown-option {
  border-radius: 8px !important;
  padding: 8px 10px !important;
  color: var(--text) !important;
  cursor: pointer;
}
.dash-dropdown-option:hover,
.dash-dropdown-option[data-highlighted],
.dash-dropdown-option[aria-selected="true"],
.dash-dropdown-option[data-selected="true"] {
  background-color: rgba(45, 125, 255, 0.18) !important;
}
.dash-dropdown-search-container {
  margin-bottom: 4px;
}
.dash-dropdown-search,
.dash-dropdown-search input {
  background-color: rgba(7, 11, 20, 0.55) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}
.dash-dropdown-search input::placeholder {
  color: rgba(169, 179, 209, 0.55) !important;
}
.dash-dropdown-search-icon {
  color: var(--muted) !important;
}

/* Date pickers + AG grid popups should also clear the page chrome. */
.ag-popup,
.ag-theme-alpine-dark .ag-popup {
  z-index: var(--z-dropdown) !important;
}

/* ============================ mobile / phones ============================= */
/* iPhone-first: tighten chrome, stack save bars, keep menus on-screen. */
@media (max-width: 768px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .app-shell--main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .ui-mode-sidebar .sci-main-col {
    padding-left: 12px;
    padding-right: 12px;
  }
  .settings-save-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .settings-save-bar .btn {
    width: 100%;
  }
  .settings-save-bar__out {
    text-align: left;
  }
  .kpi-value {
    font-size: 20px;
  }
  /* Top-navbar mode on phones: let the links wrap instead of overflowing. */
  .ui-mode-navbar .navbar .navbar-nav {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  /* Tables / grids: denser + always horizontally scrollable. */
  .ag-theme-alpine-dark {
    --ag-font-size: 12px;
  }
  .table-responsive,
  .dash-spreadsheet-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .app-shell {
    padding-left: 10px;
    padding-right: 10px;
  }
  .app-shell--main {
    padding-left: 10px;
    padding-right: 10px;
  }
  .kpi-card {
    padding: 10px 12px;
  }
  .kpi-value {
    font-size: 18px;
  }
  .settings-page__title {
    font-size: 18px;
  }
  /* Dropdown menu never wider than the viewport. */
  .dash-dropdown-content {
    max-width: 92vw !important;
  }
  /* Modals / cards: thinner inner padding so content isn't cramped. */
  .panel {
    border-radius: 12px;
  }
}