/* StreamCore PRO 2.5.9 — M3U modal visual R1 TEST
   Visual-only layer loaded after the compiled bundle.
   Goals:
   - no black/blurred backdrop behind the Teleported M3U modal;
   - preserve a safe visual gap below the fixed topbar;
   - use the same cyan pill switch used by the canonical "Ativo" control
     for every M3U selection checkbox (categories and Dry Run options).
*/

:root {
  --sc-m3u-modal-safe-top: 76px;
  --sc-m3u-modal-bottom-gap: 12px;
  --sc-m3u-switch-off: #17344e;
  --sc-m3u-switch-border: rgba(78, 139, 193, .62);
  --sc-m3u-switch-on-a: #138bd0;
  --sc-m3u-switch-on-b: #23b9ed;
  --sc-m3u-switch-knob: #eaf6ff;
}

/* The modal itself remains modal/interactive, but the page behind it is not
   darkened or blurred. This selector works with Teleport and also fails safe
   if the DOM ancestry changes later. */
html body .m3u-modal-backdrop.completion-backdrop {
  position: fixed !important;
  inset: auto 0 var(--sc-m3u-modal-bottom-gap) 0 !important;
  top: var(--sc-m3u-modal-safe-top) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 18px 16px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

html body .m3u-modal-backdrop.completion-backdrop::before,
html body .m3u-modal-backdrop.completion-backdrop::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .m3u-modal-backdrop.completion-backdrop .m3u-source-modal {
  width: min(980px, calc(100vw - 36px)) !important;
  height: min(820px, calc(100dvh - var(--sc-m3u-modal-safe-top) - var(--sc-m3u-modal-bottom-gap) - 24px)) !important;
  max-height: calc(100dvh - var(--sc-m3u-modal-safe-top) - var(--sc-m3u-modal-bottom-gap) - 24px) !important;
  margin: 0 auto !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .30), inset 0 1px rgba(255,255,255,.035) !important;
}

/* Canonical M3U selection control: exact same interaction language as the
   existing "Ativo" pill — cyan track when ON, dark-blue track when OFF,
   white circular knob. Scoped to the M3U modal only. */
html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 52px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--sc-m3u-switch-border) !important;
  border-radius: 999px !important;
  background: var(--sc-m3u-switch-off) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.26) !important;
  accent-color: transparent !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--sc-m3u-switch-knob) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.38) !important;
  transform: translateX(0) !important;
  transition: transform .18s ease !important;
}

html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]:checked {
  border-color: #21b8ee !important;
  background: linear-gradient(90deg, var(--sc-m3u-switch-on-a), var(--sc-m3u-switch-on-b)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 10px rgba(35,185,237,.16) !important;
}

html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]:checked::before {
  transform: translateX(24px) !important;
}

html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(35,185,237,.24) !important;
  outline-offset: 2px !important;
}

html body .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

/* Layout compensation for the wider pill selector. */
html body .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell {
  width: 66px !important;
  min-width: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body .m3u-modal-backdrop .m3u-source-modal .m3u-category-unified-row {
  grid-template-columns: 66px minmax(200px, 1fr) minmax(240px, .9fr) !important;
}

html body .m3u-modal-backdrop .m3u-source-modal .m3u-run-options label {
  min-height: 36px !important;
  align-items: center !important;
}

/* Keep the original Ativo row order: text | pill | description. */
html body .m3u-modal-backdrop .m3u-source-modal .switch-line {
  grid-template-columns: auto 52px minmax(0,1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}
html body .m3u-modal-backdrop .m3u-source-modal .switch-line > input[type="checkbox"] {
  grid-column: 2 !important;
  margin: 0 !important;
}
html body .m3u-modal-backdrop .m3u-source-modal .switch-line > small {
  grid-column: 3 !important;
}

@media (max-width: 700px) {
  :root {
    --sc-m3u-modal-safe-top: 62px;
    --sc-m3u-modal-bottom-gap: 6px;
  }
  html body .m3u-modal-backdrop.completion-backdrop {
    padding: 6px !important;
  }
  html body .m3u-modal-backdrop.completion-backdrop .m3u-source-modal {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 10px !important;
  }
  html body .m3u-modal-backdrop .m3u-source-modal .m3u-category-unified-row {
    grid-template-columns: 66px minmax(0,1fr) !important;
  }
}