/*
 * ============================================================
 * NOYTRIX SETTINGS — V67 HARD TOP FLOW FIX
 *
 * Fixes:
 * - huge vertical gap
 * - settings workspace pushed to bottom
 * - layout-v27 margin:auto conflict
 *
 * Desktop only.
 * ============================================================
 */

@media (min-width: 1200px) {


  /* ==========================================================
     1. ACTIVE SETTINGS SCREEN
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings.active,

  html.noytrix-subpage-v27
  #screen-settings.noytrix-active-screen-v27 {

    display: block !important;

    position: relative !important;

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

    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin:
      0 auto
      !important;

    padding:
      8px 0 70px
      !important;

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

    transform: none !important;

    align-content: start !important;
    justify-content: start !important;

    box-sizing: border-box !important;

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


  /* ==========================================================
     2. HIDDEN SETTINGS STAYS HIDDEN
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings:not(.active):not(.noytrix-active-screen-v27) {

    display: none !important;
  }


  /* ==========================================================
     3. THIS IS THE IMPORTANT FIX
     layout-v27 currently has:
     #screen-settings > *:first-child {
        margin:auto !important;
     }

     We override it with GREATER specificity.
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings
  > .settings-page-header:first-child {

    position: relative !important;

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

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin:
      6px 0 18px
      !important;

    padding: 0 !important;

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

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* Extra hard override against ANY first-child rule */

  html.noytrix-subpage-v27
  body
  #screen-settings
  > *:first-child {

    margin-top: 6px !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;
    margin-left: 0 !important;
  }


  /* ==========================================================
     4. HEADER NORMAL FLOW
     ========================================================== */

  #screen-settings .settings-page-header {

    display: flex !important;

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

    gap: 22px !important;

    position: relative !important;

    float: none !important;

    clear: both !important;

    transform: none !important;
  }


  #screen-settings .settings-page-tools {

    position: relative !important;

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

    margin:
      0 0 0 auto
      !important;

    transform: none !important;
  }


  /* ==========================================================
     5. WORKSPACE MUST START IMMEDIATELY UNDER HEADER
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings
  .settings-workspace {

    position: relative !important;

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

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

    min-width: 0 !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: none !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;
    align-content: start !important;

    justify-items: stretch !important;
    justify-content: stretch !important;

    transform: none !important;

    float: none !important;

    clear: both !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     6. LEFT MENU
     ========================================================== */

  #screen-settings .settings-section-nav {

    position: sticky !important;

    top: 16px !important;

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

    align-self: start !important;

    margin: 0 !important;

    transform: none !important;
  }


  /* ==========================================================
     7. RIGHT CONTENT
     ========================================================== */

  #screen-settings .settings-main {

    position: relative !important;

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

    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    align-self: start !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     8. PANELS
     ========================================================== */

  #screen-settings .settings-panel {

    position: relative !important;

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

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

    min-width: 0 !important;

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

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     9. REMOVE ANY ACCIDENTAL SPACER BEHAVIOUR
     ========================================================== */

  #screen-settings .settings-page-header
  + .settings-workspace {

    margin-top: 0 !important;
  }


  #screen-settings .settings-page-header::after,
  #screen-settings .settings-workspace::before {

    margin: 0 !important;
  }

}


/* ============================================================
   SMALLER DESKTOP
   ============================================================ */

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

  html.noytrix-subpage-v27
  #screen-settings.active,

  html.noytrix-subpage-v27
  #screen-settings.noytrix-active-screen-v27 {

    width:
      calc(100% - 28px)
      !important;

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


  html.noytrix-subpage-v27
  #screen-settings
  .settings-workspace {

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

    gap: 14px !important;
  }

}