/* ============================================================
   Bluffing Monkeys — Card Picker Fix CSS (v3)
   --------------------------------------------------------------
   Pairs with bm-card-picker-fix.js (v3). Load LAST so its rules
   beat the page's inline <style> blocks.

   Sections:
     1. Disable popover open/close animation
     2. Picker chrome (desktop)
     3. Mobile: centered modal-style picker + backdrop
     4. Tighter sizing on very small phones
     5. Make trigger cards always tappable
     6. Range loader buttons (Save range / Delete range)
        layout fix - prevents text being cut off and dropdown
        overlap on narrow widths.
   ============================================================ */

/* --- 1. Disable open/close animation everywhere --------------- */
.popover,
.popover.fade,
.popover.fade.show,
.popover.bm-card-picker-popover,
.popover.bm-card-picker-popover.fade,
.popover.bm-card-picker-popover.fade.show {
  transition: none !important;
  animation: none !important;
}
.popover.fade { opacity: 0 !important; }
.popover.fade.show,
.popover.bm-card-picker-popover.show {
  opacity: 1 !important;
}

/* --- 2. Picker chrome (desktop default) ----------------------- */
.popover.bm-card-picker-popover {
  background: #f5f5f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32) !important;
  z-index: 10000 !important;
  padding: 0 !important;
}

.popover.bm-card-picker-popover .popover-body {
  padding: 8px !important;
}

.popover.bm-card-picker-popover .row {
  margin: 0 !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* --- 3. MOBILE: centered modal-style picker ------------------- */
@media (max-width: 991px) {
  /* Backdrop behind the centered picker */
  .bm-picker-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 999998 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Force-center the picker; ignore Popper.js calculations */
  .popover.bm-card-picker-popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: min(94vw, 380px) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-height: 80vh !important;
    z-index: 999999 !important;
  }

  .popover.bm-card-picker-popover .arrow,
  .popover.bm-card-picker-popover > .arrow {
    display: none !important;
  }

  .popover.bm-card-picker-popover .popover-body {
    max-width: calc(94vw - 4px) !important;
    max-height: calc(80vh - 16px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px !important;
  }

  /* Compact card grid - selectors duplicated for specificity */
  .popover.bm-card-picker-popover.bm-card-picker-popover .playingcard {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 1px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .popover.bm-card-picker-popover.bm-card-picker-popover .btn,
  .popover.bm-card-picker-popover.bm-card-picker-popover button {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    margin-top: 6px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
}

/* --- 4. Very small phones (<=380px) --------------------------- */
@media (max-width: 380px) {
  .popover.bm-card-picker-popover.bm-card-picker-popover .playingcard {
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 11px !important;
  }
}

/* --- 5. Trigger cards always tappable ------------------------- */
[tabindex="0"].playingcard {
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ============================================================
   --- 6. Range loader buttons fix (Save range / Delete range)
   ------------------------------------------------------------
   The bundle creates this layout for each player range panel:
     <div class="range_loader row mt-2 mx-0">
       <div class="col-7"><button>Save range</button>
                          <button>Delete range</button></div>
       <div class="col-5"><select>...</select></div>
     </div>
   With Bootstrap col-7/col-5 grid + buttons set to width:45%
   and white-space:nowrap, the text "Delete range" gets cut off
   on narrow panels and the select overlaps. Fix: use flex with
   gap, let buttons size by content, and stack vertically on
   small screens.
   ============================================================ */

.range_loader {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.range_loader .col-7 {
  flex: 1 1 60% !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.range_loader .col-5 {
  flex: 1 1 35% !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Override the inline width:45% from the bundle */
.range_loader .col-7 button,
.range_loader .col-7 .btn,
.range_loader .col-7 #\30 _saverange,
.range_loader .col-7 [id$="_saverange"],
.range_loader .col-7 [id$="_delrange"] {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  padding: 8px 6px !important;
  font-size: 14px !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.range_loader .col-5 select,
.range_loader .col-5 .form-select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
}

/* On narrow screens (<=600px): stack the row vertically so each
   element gets the full width and nothing overflows. */
@media (max-width: 600px) {
  .range_loader {
    flex-direction: column !important;
  }
  .range_loader .col-7,
  .range_loader .col-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .range_loader .col-7 button,
  .range_loader .col-7 .btn {
    font-size: 13px !important;
    padding: 9px 6px !important;
  }
}