/*
 * ============================================================
 * NOYTRIX SETTINGS — CONTROLS V69
 *
 * Visual language based on Tracking custom dropdowns.
 *
 * - native selects stay in DOM for existing logic
 * - custom premium dropdown shown to user
 * - selected option has gold check
 * - dark floating menu
 * - Theme / Density use same visual system
 * - switches polished
 * - buttons polished
 *
 * Desktop only.
 * ============================================================
 */


/* Custom wrappers are desktop-only.
   Native selects remain visible on smaller screens. */

.nx-settings-select-v69 {
  display: none;
}

.nx-settings-select-menu-v69 {
  display: none;
}


@media (min-width: 1200px) {

  /* ==========================================================
     1. HIDE NATIVE SETTINGS SELECTS
     BUT KEEP THEM ALIVE FOR EXISTING JS
     ========================================================== */

  #screen-settings .settings-main select[data-nx-settings-dropdown-v69="1"] {
    display: none !important;
  }


  /* ==========================================================
     2. CUSTOM SELECT WRAPPER
     ========================================================== */

  #screen-settings .nx-settings-select-v69 {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     3. TRIGGER
     ========================================================== */

  #screen-settings .nx-settings-select-trigger-v69 {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;

    padding:
      0 9px 0 16px
      !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    border:
      1px solid
      rgba(72, 110, 158, .62)
      !important;

    border-radius:
      10px
      !important;

    background:
      linear-gradient(
        180deg,
        #0b203d 0%,
        #081a33 100%
      )
      !important;

    color:
      #f4f7ff
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      750 !important;

    line-height:
      1.15 !important;

    text-align:
      left !important;

    cursor:
      pointer !important;

    outline:
      none !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.015)
      !important;

    box-sizing:
      border-box !important;

    transition:
      border-color .15s ease,
      background .15s ease,
      box-shadow .15s ease
      !important;
  }


  #screen-settings
  .nx-settings-select-trigger-v69:hover {

    border-color:
      rgba(91, 142, 203, .82)
      !important;

    background:
      linear-gradient(
        180deg,
        #0d2547 0%,
        #091e39 100%
      )
      !important;
  }


  #screen-settings
  .nx-settings-select-v69.open
  .nx-settings-select-trigger-v69 {

    border-color:
      rgba(255, 190, 35, .92)
      !important;

    box-shadow:
      0 0 0 1px
      rgba(255, 190, 35, .12),
      0 0 18px
      rgba(255, 183, 26, .07)
      !important;
  }


  #screen-settings
  .nx-settings-select-trigger-v69:focus-visible {

    border-color:
      #ffbd2e
      !important;

    box-shadow:
      0 0 0 3px
      rgba(255, 189, 46, .14)
      !important;
  }


  /* ==========================================================
     4. SELECTED VALUE
     ========================================================== */

  #screen-settings .nx-settings-select-value-v69 {

    min-width: 0 !important;

    flex:
      1 1 auto
      !important;

    color:
      #f4f7ff
      !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;
  }


  /* ==========================================================
     5. CARET BOX — LIKE OTHER NOYTRIX DROPDOWNS
     ========================================================== */

  #screen-settings .nx-settings-select-caret-v69 {

    width: 30px !important;
    height: 30px !important;

    flex:
      0 0 30px
      !important;

    display:
      grid !important;

    place-items:
      center !important;

    border-radius:
      7px !important;

    background:
      rgba(255,255,255,.035)
      !important;

    color:
      #a9c2e5
      !important;

    font-size:
      15px !important;

    font-weight:
      900 !important;

    line-height:
      1 !important;

    transition:
      transform .15s ease,
      color .15s ease,
      background .15s ease
      !important;
  }


  #screen-settings
  .nx-settings-select-v69.open
  .nx-settings-select-caret-v69 {

    color:
      #ffbd2e
      !important;

    background:
      rgba(255, 189, 46, .10)
      !important;

    transform:
      rotate(180deg)
      !important;
  }


  /* ==========================================================
     6. SETTINGS PANELS — SAME VISUAL FAMILY
     ========================================================== */

  #screen-settings .settings-panel {

    border:
      1px solid
      rgba(53, 86, 130, .72)
      !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(
        135deg,
        rgba(11, 31, 59, .97),
        rgba(6, 20, 42, .97)
      )
      !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.012)
      !important;

    overflow:
      visible !important;
  }


  #screen-settings .settings-panel h3 {

    color:
      #f4f7ff !important;

    font-weight:
      800 !important;
  }


  #screen-settings .settings-fields label,
  #screen-settings .settings-select-block,
  #screen-settings .settings-retention,
  #screen-settings .settings-control-label {

    color:
      #eaf1ff !important;

    font-size:
      13px !important;

    font-weight:
      750 !important;
  }


  #screen-settings .settings-hint,
  #screen-settings .settings-select-block small {

    color:
      #87a6d1 !important;

    font-size:
      12px !important;
  }


  /* ==========================================================
     7. THEME + INTERFACE DENSITY
     ========================================================== */

  #screen-settings #settingsTheme,
  #screen-settings #settingsDensity {

    width:
      100% !important;

    padding:
      4px !important;

    display:
      grid !important;

    gap:
      4px !important;

    border:
      1px solid
      rgba(72, 110, 158, .62)
      !important;

    border-radius:
      10px !important;

    background:
      #081a33 !important;

    box-sizing:
      border-box !important;

    overflow:
      hidden !important;
  }


  #screen-settings #settingsTheme {

    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;
  }


  #screen-settings #settingsDensity {

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }


  #screen-settings #settingsTheme button,
  #screen-settings #settingsDensity button {

    appearance:
      none !important;

    min-width:
      0 !important;

    min-height:
      40px !important;

    padding:
      0 12px !important;

    border:
      1px solid transparent
      !important;

    border-radius:
      7px !important;

    background:
      transparent !important;

    color:
      #a9c0df !important;

    font:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      750 !important;

    cursor:
      pointer !important;

    transition:
      .15s ease !important;
  }


  #screen-settings #settingsTheme button:hover,
  #screen-settings #settingsDensity button:hover {

    color:
      #ffffff !important;

    background:
      rgba(255,255,255,.045)
      !important;
  }


  #screen-settings #settingsTheme button.active,
  #screen-settings #settingsDensity button.active,
  #screen-settings #settingsTheme button[aria-pressed="true"],
  #screen-settings #settingsDensity button[aria-pressed="true"] {

    color:
      #ffffff !important;

    border-color:
      rgba(255, 189, 46, .85)
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(255, 190, 40, .16),
        rgba(255, 181, 18, .08)
      )
      !important;

    box-shadow:
      inset 2px 0 0
      #ffbd2e
      !important;
  }


  /* ==========================================================
     8. TOGGLES
     ========================================================== */

  #screen-settings .toggle-setting {

    position:
      relative !important;

    min-width:
      0 !important;

    min-height:
      44px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      18px !important;

    color:
      #eaf1ff !important;

    font-size:
      13px !important;

    font-weight:
      700 !important;

    cursor:
      pointer !important;
  }


  #screen-settings .toggle-setting input {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }


  #screen-settings .toggle-setting i {

    position:
      relative !important;

    width:
      46px !important;

    height:
      26px !important;

    flex:
      0 0 46px
      !important;

    border:
      1px solid
      rgba(77, 111, 155, .72)
      !important;

    border-radius:
      999px !important;

    background:
      #0a1c35 !important;

    box-sizing:
      border-box !important;

    transition:
      .16s ease !important;

    box-shadow:
      inset 0 1px 4px
      rgba(0,0,0,.25)
      !important;
  }


  #screen-settings .toggle-setting i::before {

    content:
      none !important;
  }


  #screen-settings .toggle-setting i::after {

    content:
      "" !important;

    position:
      absolute !important;

    top:
      3px !important;

    left:
      3px !important;

    width:
      18px !important;

    height:
      18px !important;

    border-radius:
      50% !important;

    background:
      #edf4ff !important;

    box-shadow:
      0 2px 6px
      rgba(0,0,0,.35)
      !important;

    transition:
      transform .16s ease
      !important;
  }


  #screen-settings
  .toggle-setting
  input:checked + i {

    border-color:
      rgba(41, 213, 125, .85)
      !important;

    background:
      #20c66c !important;

    box-shadow:
      0 0 12px
      rgba(32, 198, 108, .14)
      !important;
  }


  #screen-settings
  .toggle-setting
  input:checked + i::after {

    transform:
      translateX(20px)
      !important;
  }


  #screen-settings
  .toggle-setting
  input:focus-visible + i {

    box-shadow:
      0 0 0 3px
      rgba(255, 189, 46, .15)
      !important;
  }


  /* ==========================================================
     9. DETAIL SELECT BLOCK
     ========================================================== */

  #screen-settings .settings-select-block {

    min-width:
      0 !important;

    align-content:
      start !important;
  }


  /* ==========================================================
     10. RETENTION DROPDOWN
     ========================================================== */

  #screen-settings .settings-retention {

    width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(160px, 1fr)
      minmax(260px, 360px)
      !important;

    gap:
      16px !important;

    align-items:
      center !important;

    box-sizing:
      border-box !important;
  }


  /* ==========================================================
     11. SYNC STATE CARD
     ========================================================== */

  #screen-settings .settings-sync-state {

    border:
      1px solid
      rgba(67, 104, 150, .62)
      !important;

    border-radius:
      10px !important;

    background:
      rgba(4, 17, 36, .62)
      !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.015)
      !important;
  }


  /* ==========================================================
     12. FOOTER BUTTONS
     ========================================================== */

  #screen-settings .settings-footer .secondary-action,
  #screen-settings .settings-footer .primary-action {

    min-height:
      44px !important;

    padding:
      0 18px !important;

    border-radius:
      9px !important;

    font-size:
      13px !important;

    font-weight:
      800 !important;

    cursor:
      pointer !important;
  }


  #screen-settings .settings-footer .secondary-action {

    border:
      1px solid
      rgba(72, 110, 158, .62)
      !important;

    background:
      #081a33 !important;

    color:
      #eaf1ff !important;
  }


  #screen-settings .settings-footer .secondary-action:hover {

    border-color:
      rgba(97, 147, 207, .85)
      !important;

    background:
      #0c2241 !important;
  }


  #screen-settings .settings-footer .primary-action {

    border:
      1px solid
      #ffbd2e !important;

    background:
      linear-gradient(
        180deg,
        #ffd15b,
        #ffb821
      )
      !important;

    color:
      #061326 !important;

    box-shadow:
      0 8px 20px
      rgba(255, 180, 24, .12)
      !important;
  }


  #screen-settings .settings-footer .primary-action:hover {

    filter:
      brightness(1.035);
  }


  /* ==========================================================
     13. KEEP EVERYTHING INSIDE
     ========================================================== */

  #screen-settings .settings-fields > *,
  #screen-settings .appearance-controls > *,
  #screen-settings .settings-scan-grid > *,
  #screen-settings .settings-data-panel > * {

    min-width:
      0 !important;
  }

}


/* ============================================================
   FLOATING DROPDOWN MENU
   Appended to BODY so parent overflow can NEVER clip it.
   ============================================================ */

@media (min-width: 1200px) {

  .nx-settings-select-menu-v69 {

    position:
      fixed !important;

    z-index:
      2147483000 !important;

    display:
      grid !important;

    gap:
      4px !important;

    padding:
      8px !important;

    margin:
      0 !important;

    border:
      1px solid
      rgba(64, 104, 151, .82)
      !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(
        180deg,
        #0b213e,
        #081b35
      )
      !important;

    box-shadow:
      0 18px 45px
      rgba(0, 0, 0, .48),
      inset 0 1px 0
      rgba(255,255,255,.025)
      !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;
  }


  .nx-settings-select-menu-v69[hidden] {

    display:
      none !important;
  }


  /* ==========================================================
     MENU OPTION
     ========================================================== */

  .nx-settings-select-option-v69 {

    appearance:
      none !important;

    width:
      100% !important;

    min-height:
      44px !important;

    padding:
      5px 6px 5px 14px
      !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      12px !important;

    border:
      1px solid transparent
      !important;

    border-radius:
      8px !important;

    background:
      transparent !important;

    color:
      #b8cae5 !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      700 !important;

    line-height:
      1.2 !important;

    text-align:
      left !important;

    cursor:
      pointer !important;

    box-sizing:
      border-box !important;

    transition:
      background .12s ease,
      color .12s ease,
      border-color .12s ease
      !important;
  }


  .nx-settings-select-option-v69:hover,
  .nx-settings-select-option-v69:focus-visible {

    outline:
      none !important;

    color:
      #ffffff !important;

    background:
      rgba(255,255,255,.055)
      !important;

    border-color:
      rgba(85, 127, 180, .18)
      !important;
  }


  .nx-settings-select-option-v69.is-selected {

    color:
      #ffffff !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.035)
      )
      !important;
  }


  .nx-settings-select-option-label-v69 {

    min-width:
      0 !important;

    flex:
      1 1 auto
      !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere !important;
  }


  /* ==========================================================
     GOLD CHECK BOX ON SELECTED OPTION
     ========================================================== */

  .nx-settings-select-option-check-v69 {

    width:
      30px !important;

    height:
      30px !important;

    flex:
      0 0 30px
      !important;

    display:
      grid !important;

    place-items:
      center !important;

    border-radius:
      7px !important;

    background:
      rgba(255,255,255,.035)
      !important;

    color:
      transparent !important;

    font-size:
      16px !important;

    font-weight:
      950 !important;
  }


  .nx-settings-select-option-v69.is-selected
  .nx-settings-select-option-check-v69 {

    color:
      #07152b !important;

    background:
      linear-gradient(
        180deg,
        #ffd354,
        #f5ad16
      )
      !important;

    box-shadow:
      0 5px 13px
      rgba(255, 179, 22, .13)
      !important;
  }


  .nx-settings-select-option-v69:disabled {

    opacity:
      .42 !important;

    cursor:
      default !important;
  }


  /* Scrollbar */

  .nx-settings-select-menu-v69::-webkit-scrollbar {

    width:
      7px;
  }


  .nx-settings-select-menu-v69::-webkit-scrollbar-track {

    background:
      transparent;
  }


  .nx-settings-select-menu-v69::-webkit-scrollbar-thumb {

    border-radius:
      99px;

    background:
      #28486d;
  }

}


/* ============================================================
   LIGHT THEME SAFETY
   ============================================================ */

@media (min-width: 1200px) {

  html[data-theme="light"]
  #screen-settings
  .nx-settings-select-trigger-v69 {

    background:
      #ffffff !important;

    color:
      #102443 !important;

    border-color:
      #9eafc6 !important;
  }


  html[data-theme="light"]
  #screen-settings
  .nx-settings-select-value-v69 {

    color:
      #102443 !important;
  }


  html[data-theme="light"]
  .nx-settings-select-menu-v69 {

    background:
      #f5f8fd !important;

    border-color:
      #9eafc6 !important;

    box-shadow:
      0 18px 40px
      rgba(20, 38, 68, .20)
      !important;
  }


  html[data-theme="light"]
  .nx-settings-select-option-v69 {

    color:
      #253c5e !important;
  }


  html[data-theme="light"]
  .nx-settings-select-option-v69:hover,

  html[data-theme="light"]
  .nx-settings-select-option-v69.is-selected {

    color:
      #102443 !important;

    background:
      #e2ebf7 !important;
  }

}