/* TipZ365 mobile module: mobile-smart-signals.css
   Standalone additive stylesheet (same pattern as mobile-refinements.css /
   mobile-desktop-controls.css -- linked directly in base.html, NOT folded
   into app.bundle.css) for "Smart Signals": the row of screener
   buttons/panels docked from the desktop filters bar (see
   dockMobileExpertPanels() in mobile-smart-signals.js) -- Best Kombi, Hit
   Rates, Form Edge, Atlas Filter, and admin-only Rules Divers/Signal Kombi.
   This only fits the desktop panel/button chrome into a narrow column; it
   does not restyle their internal fields (checkboxes, number inputs,
   custom-select) beyond what's already responsive in expert-mode.css /
   hit-rates.css / form-edge.css / atlas-filter.css. */

@media (max-width: 900px) {
  .mobile-smart-title { margin-top: 17px; }

  .mobile-smart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
  }

  .mobile-smart-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #2c3c4c;
    border-radius: 999px;
    background: #101e2c;
    color: #dbe4ec;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .mobile-smart-chip:active { transform: scale(.97); }
  .mobile-smart-chip-select { color: #9fb0c0; }
  .mobile-smart-chip-select.filter-value-active { color: #55a1ff; border-color: #2f6fbf; }

  /* A utility action, not a filter toggle -- kept visually muted so it
     doesn't read as another screener option in the row. */
  .mobile-smart-chip-reset { color: #8a97a3; border-style: dashed; margin-left: auto; }
  .mobile-smart-chip-reset:active { color: #dbe4ec; border-color: #55a1ff; }

  html[data-theme="light"] .mobile-smart-chip {
    background: #f2f5f8; color: #33404c; border-color: #cbd5df;
  }

  /* Docked desktop buttons (.expert-mode-button, incl. the ones nested in
     .pro-combo-control) match the pill shape of the Odds Drop chip above so
     the row reads as one consistent set, not a mix of two button styles. */
  .mobile-smart-row .expert-mode-button {
    min-height: 38px;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 12.5px;
  }
  .mobile-smart-row .pro-combo-control { flex: 0 0 auto; }

  /* Docked panels: fit the narrow column instead of a desktop dropdown's
     fixed 390px/absolute layout. Hit Rates/Form Edge/Atlas Filter panels are
     block-level siblings placed right below the button row (see
     #mobile-dock-*-panel in components/mobile_app.html); Best Kombi/Rules
     Divers/Signal Kombi stay an absolutely-positioned dropdown like desktop
     since their button+menu are docked together as one .pro-combo-control. */
  #mobile-dock-hotform-panel .expert-panel,
  #mobile-dock-formedge-panel .expert-panel,
  #mobile-dock-atlas-panel .expert-panel {
    margin: 10px 0 0;
  }
  /* Best Kombi/Rules Divers/Signal Kombi (all .pro-combo-menu) are
     `position: absolute; left: 0` relative to their own button on desktop --
     fine when the button sits at the left edge of a wide filter bar, but on
     mobile the button can be anywhere in a wrapped chip row, so left:0
     pushed the menu off the right edge of the viewport instead of just
     under the button. Same fixed bottom-sheet treatment as
     .mobile-choice-sheet fixes both the overflow and keeps a consistent feel. */
  html:not(.tipz365-force-desktop) .pro-combo-menu {
    position: fixed !important;
    z-index: 10040;
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: min(78vh, 680px);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 40px rgba(0,0,0,.45);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  /* Flexbox default min-width:auto lets a checkbox row's label text overflow
     the panel instead of wrapping -- min-width:0 lets it shrink/wrap. */
  .pro-combo-menu > label { align-items: flex-start; }
  .pro-combo-menu > label > span { min-width: 0; overflow-wrap: break-word; }
  .expert-panel-footer > label {
    flex: 1 1 100%;
    margin-bottom: -4px;
  }
  .custom-select-field { width: 100%; }
}