/*
 * ============================================================
 * NOYTRIX SETTINGS — DESKTOP LAYOUT HARD FIX V66
 *
 * Fix:
 * - restore Settings below header
 * - prevent workspace from shifting right
 * - prevent right-side clipping
 * - keep section navigation on left
 * - main settings content fills remaining width
 *
 * Desktop only.
 * ============================================================
 */

@media (min-width: 1200px) {


  /* ==========================================================
     1. SETTINGS SCREEN ITSELF
     MUST NOT BE A TWO-COLUMN GRID.
     Header + workspace must flow vertically.
     ========================================================== */

  #screen-settings.active,
  #screen-settings.noytrix-active-screen-v27 {

    display: block !important;

    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;

    transform: none !important;

    width: 100% !important;
    max-width: 1320px !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 100% !important;

    margin:
      0 auto
      !important;

    padding:
      8px 0 70px
      !important;

    grid-template-columns:
      none !important;

    grid-template-rows:
      none !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ==========================================================
     2. HEADER BACK TO NORMAL POSITION
     ========================================================== */

  #screen-settings .settings-page-header {

    position: relative !important;

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

    min-width: 0 !important;

    margin:
      6px 0 18px
      !important;

    padding: 0 !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 22px !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-page-header > * {

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-page-tools {

    position: relative !important;

    margin-left: auto !important;

    flex:
      0 0 auto
      !important;

    min-width: 0 !important;

    transform: none !important;
  }


  /* ==========================================================
     3. WORKSPACE — THIS IS THE REAL TWO-COLUMN GRID
     ========================================================== */

  #screen-settings .settings-workspace {

    position: relative !important;

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

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
      238px
      minmax(0, 1fr)
      !important;

    grid-template-rows:
      auto !important;

    gap: 18px !important;

    align-items: start !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     4. LEFT SETTINGS NAV
     ========================================================== */

  #screen-settings .settings-section-nav {

    position: sticky !important;

    top: 16px !important;

    left: auto !important;
    right: auto !important;

    width: 238px !important;
    max-width: 238px !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 9px !important;

    box-sizing: border-box !important;

    transform: none !important;
  }


  #screen-settings .settings-section-nav button {

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     5. MAIN SETTINGS COLUMN
     ========================================================== */

  #screen-settings .settings-main {

    position: relative !important;

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

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    gap: 12px !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     6. EVERY SETTINGS PANEL MUST FIT MAIN COLUMN
     ========================================================== */

  #screen-settings .settings-panel {

    position: relative !important;

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

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;

    transform: none !important;

    overflow: hidden !important;
  }


  #screen-settings .settings-panel > * {

    max-width: 100%;

    box-sizing: border-box;
  }


  /* ==========================================================
     7. LANGUAGE + REGION
     THREE-COLUMN RULE WAS TOO AGGRESSIVE FOR AVAILABLE WIDTH.
     Use two columns where there are two actual controls.
     ========================================================== */

  #screen-settings .settings-fields-three {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

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

    gap: 16px !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-fields-three > * {

    min-width: 0 !important;

    max-width: 100% !important;
  }


  /* ==========================================================
     8. APPEARANCE
     Keep controls inside panel.
     ========================================================== */

  #screen-settings .appearance-controls {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

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

    gap: 20px !important;

    align-items: end !important;

    box-sizing: border-box !important;
  }


  #screen-settings .appearance-controls > * {

    min-width: 0 !important;

    max-width: 100% !important;
  }


  #screen-settings .segmented {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  #screen-settings .segmented button {

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     9. DEFAULT CHECKS
     ========================================================== */

  #screen-settings .settings-scan-grid {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(220px, .65fr)
      !important;

    gap: 24px !important;

    align-items: start !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-scan-grid > * {

    min-width: 0 !important;

    max-width: 100% !important;
  }


  /* ==========================================================
     10. BEHAVIOUR AND DATA
     ========================================================== */

  #screen-settings .settings-data-panel {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, .75fr)
      !important;

    gap: 22px !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-data-controls,
  #screen-settings .settings-sync-state {

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     11. SELECTS / CONTROLS — NEVER ESCAPE PANEL
     ========================================================== */

  #screen-settings select,
  #screen-settings input,
  #screen-settings button {

    max-width: 100%;

    box-sizing: border-box;
  }


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

    width: 100% !important;

    min-width: 0 !important;
  }


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

  #screen-settings .settings-footer {

    position: relative !important;

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

    min-width: 0 !important;

    margin:
      14px 0 0
      !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     13. HARD OVERFLOW PROTECTION
     ========================================================== */

  #screen-settings,
  #screen-settings .settings-workspace,
  #screen-settings .settings-main,
  #screen-settings .settings-panel {

    box-sizing: border-box !important;
  }

}


/* ============================================================
   SAFER FALLBACK FOR SMALLER DESKTOP / LAPTOP
   ============================================================ */

@media (min-width: 1200px) and (max-width: 1450px) {

  #screen-settings.active,
  #screen-settings.noytrix-active-screen-v27 {

    max-width:
      calc(100vw - 300px)
      !important;
  }


  #screen-settings .settings-workspace {

    grid-template-columns:
      210px
      minmax(0, 1fr)
      !important;

    gap: 14px !important;
  }


  #screen-settings .settings-section-nav {

    width: 210px !important;
    max-width: 210px !important;
  }


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

    grid-template-columns:
      1fr
      !important;
  }

}