/* Final TOP-mode override.
 * TOP = centered primary tiles inside the document/workspace.
 * Sub-navigation now lives in the restored workspace tab bar.
 * RAILS keeps the crystallized floating design untouched.
 */
@media (min-width: 1024px) {
  /* ---------------------------------------------------------------
   * TOP: 9 equal tiles, centered as one row and vertically centered
   * in the open lane between the upper chrome and Panel de Control.
   * Master · Trading · TA · Scanner · Score · System · App · IE · Mode
   * 9 x 84px + 8 x 10px = 836px total.
   * --------------------------------------------------------------- */
  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Master"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Master"]) {
    top: 152px !important;
    left: calc(50% - 418px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Trading Panel"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Trading Panel"]) {
    top: 152px !important;
    left: calc(50% - 324px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Trading Analytics"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Trading Analytics"]) {
    top: 152px !important;
    left: calc(50% - 230px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Scanner"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Scanner"]) {
    top: 152px !important;
    left: calc(50% - 136px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Score"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Score"]) {
    top: 152px !important;
    left: calc(50% - 42px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="System"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="System"]) {
    top: 152px !important;
    left: calc(50% + 52px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="App"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="App"]) {
    top: 152px !important;
    left: calc(50% + 146px) !important;
  }

  body:not([data-ninja-mode]) aside div.relative:has(> div > button[title="Intelligence"]),
  body[data-ninja-mode="top"] aside div.relative:has(> div > button[title="Intelligence"]) {
    top: 152px !important;
    left: calc(50% + 240px) !important;
  }

  /* APP stays APP. */
  body:not([data-ninja-mode]) button[title="App"]::before,
  body[data-ninja-mode="top"] button[title="App"]::before {
    content: "◫" !important;
  }

  body:not([data-ninja-mode]) button[title="App"]::after,
  body[data-ninja-mode="top"] button[title="App"]::after {
    content: "App" !important;
  }

  /* In TOP mode, the primary tiles no longer own dropdown menus.
   * Their former submenus are rendered as the restored workspace tabs.
   */
  body:not([data-ninja-mode]) aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child),
  body[data-ninja-mode="top"] aside div.relative > div.flex.overflow-hidden > button:last-child:not(:first-child),
  body:not([data-ninja-mode]) aside div.relative > div.absolute,
  body[data-ninja-mode="top"] aside div.relative > div.absolute {
    display: none !important;
  }

  /* Separate MODE tile, exact same 84x84 visual footprint. */
  body:not([data-ninja-mode]) #ninja-mode-controller,
  body[data-ninja-mode="top"] #ninja-mode-controller {
    position: absolute !important;
    top: 152px !important;
    left: calc(50% + 334px) !important;
    right: auto !important;
    width: 84px !important;
    height: 84px !important;
    margin: 0 !important;
    display: block !important;
    z-index: 42 !important;
  }

  #ninja-mode-controller .ninja-mode-shell {
    width: 84px !important;
    height: 84px !important;
    border: 1px solid #30343a !important;
    border-radius: 6px !important;
    background: #0b0c0e !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
  }

  #ninja-mode-controller .ninja-mode-shell:hover,
  #ninja-mode-controller:focus-within .ninja-mode-shell {
    background: #101114 !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 16px hsl(var(--primary) / .16) !important;
  }

  #ninja-mode-controller .ninja-mode-toggle {
    position: absolute !important;
    inset: 0 !important;
    width: 84px !important;
    height: 84px !important;
    padding: 6px 5px 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #8f959d !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  #ninja-mode-controller .ninja-mode-icon {
    display: block !important;
    width: 100% !important;
    font-size: 18px !important;
    line-height: 20px !important;
    text-align: center !important;
    color: #8a9098 !important;
  }

  #ninja-mode-controller .ninja-mode-label {
    display: block !important;
    width: 100% !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: .075em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    color: #8f959d !important;
  }

  #ninja-mode-controller:hover .ninja-mode-icon,
  #ninja-mode-controller:hover .ninja-mode-label {
    color: #d5d8dd !important;
  }

  /* Keep the workspace in its established compact position. */
  body:not([data-ninja-mode]) aside[aria-label="Trading and research navigation"] + div,
  body[data-ninja-mode="top"] aside[aria-label="Trading and research navigation"] + div {
    padding-top: 17rem !important;
  }

  /* IE has no secondary destination, but it still gets a one-tab subnav so
   * the workspace keeps exactly the same vertical rhythm as every other module.
   * This prevents the content from jumping upward when IE is selected.
   */
  body:not([data-ninja-mode]):has(aside div.flex.border-primary > button[title="Intelligence"]) main.min-w-0::before,
  body[data-ninja-mode="top"]:has(aside div.flex.border-primary > button[title="Intelligence"]) main.min-w-0::before {
    content: "IE";
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 33px;
    margin-bottom: 2rem;
    padding: 8px 16px;
    border-bottom: 1px solid hsl(var(--border));
    background: linear-gradient(hsl(var(--primary)), hsl(var(--primary))) left bottom / 36px 2px no-repeat;
    color: hsl(var(--foreground));
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  /* ---------------------------------------------------------------
   * RAILS: preserve the crystallized original design. Only MODE is an
   * extra 84px tile in the existing right-side distribution.
   * --------------------------------------------------------------- */
  body[data-ninja-mode="rails"] button[title="App"]::before {
    content: "◫" !important;
  }

  body[data-ninja-mode="rails"] button[title="App"]::after {
    content: none !important;
    display: none !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:first-child > span {
    display: block !important;
  }

  body[data-ninja-mode="rails"] aside div.relative:has(> div > button[title="App"]) > div.flex.overflow-hidden > button:last-child:not(:first-child) {
    display: block !important;
  }

  body[data-ninja-mode="rails"] aside[aria-label="Trading and research navigation"] > div.mt-auto {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: auto !important;
  }

  body[data-ninja-mode="rails"] #ninja-mode-controller {
    position: relative !important;
    inset: auto !important;
    width: 84px !important;
    height: 84px !important;
    margin: 0 !important;
    display: block !important;
    z-index: 31 !important;
    order: -1 !important;
  }
}