/* DEVNOOD macOS Unified UI v11
 * Final mobile polish for web settings, app settings, online monitor, and docs drawer.
 * Presentation only. No API/data logic changes.
 */
:root{
  --mac11-window:#1c1c1e;
  --mac11-toolbar:#242426;
  --mac11-surface:#202124;
  --mac11-border:rgba(255,255,255,.09);
  --mac11-sub:#a1a1aa;
}

/* =========================================================
   1) Web Settings + App Settings — make category tabs aligned
   ========================================================= */
body.macos-ui #settingsModal [data-modal-content],
body.macos-ui #appSettingsModal [data-modal-content]{
  overflow-x:hidden!important;
}

body.macos-ui #settingsModal .settings-tabs,
body.macos-ui #appSettingsModal .app-settings-tabs{
  align-items:stretch!important;
}

body.macos-ui #settingsModal .settings-tab-btn,
body.macos-ui #appSettingsModal .app-settings-tab-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  min-height:48px!important;
  line-height:1.2!important;
  text-align:center!important;
  white-space:normal!important;
}

body.macos-ui #settingsModal .settings-tab-btn i,
body.macos-ui #appSettingsModal .app-settings-tab-btn i{
  margin-right:0!important;
  flex-shrink:0!important;
}

body.macos-ui #settingsModal [data-settings-content] .grid.grid-cols-2,
body.macos-ui #appSettingsModal .app-settings-grid{
  align-items:start!important;
}

body.macos-ui #appSettingsModal .app-settings-head,
body.macos-ui .app-settings-page .app-settings-head{
  gap:1rem!important;
}
body.macos-ui #appSettingsModal .app-settings-title,
body.macos-ui .app-settings-page .app-settings-title{
  min-width:0!important;
  align-items:flex-start!important;
}
body.macos-ui #appSettingsModal .app-settings-title p,
body.macos-ui .app-settings-page .app-settings-title p{
  max-width:24rem!important;
  line-height:1.42!important;
}

body.macos-ui #appSettingsModal .app-settings-section,
body.macos-ui .app-settings-page .app-settings-section{
  padding:1rem!important;
}

body.macos-ui #appSettingsModal .app-settings-switch-row,
body.macos-ui .app-settings-page .app-settings-switch-row{
  align-items:flex-start!important;
}

/* =========================================================
   2) Online Monitor — smaller buttons, cleaner action row, no floating stray close
   ========================================================= */
body.macos-ui #onlineModal [data-modal-content]{
  width:min(94vw, 58rem)!important;
  max-width:min(94vw, 58rem)!important;
}
body.macos-ui #onlineModal .online-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
}
body.macos-ui #onlineModal .online-actions > button{
  min-height:40px!important;
  border-radius:12px!important;
  padding:.7rem .9rem!important;
  font-size:.78rem!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
}
body.macos-ui #onlineModal .online-actions > button i{margin-right:0!important}
body.macos-ui #onlineModal .online-actions > button[onclick*="loadOnlineSessions"]{
  width:40px!important;
  min-width:40px!important;
  padding:0!important;
}
body.macos-ui #onlineModal .online-actions > button[onclick*="closeModal"]{
  display:none!important;
}
body.macos-ui #onlineModal #online-count{
  padding:.45rem .7rem!important;
  font-size:.72rem!important;
}
body.macos-ui #onlineModal #online-live{
  font-size:.68rem!important;
  padding:.35rem .5rem!important;
}
body.macos-ui #onlineModal #online-stats{gap:.8rem!important}
body.macos-ui #onlineModal #online-stats > div{
  min-height:96px!important;
  padding:1rem!important;
}
body.macos-ui #onlineModal #online-stats > div .text-2xl{font-size:2rem!important;line-height:1!important}

/* =========================================================
   3) Docs page — stop hidden gray layer from blocking clicks
   ========================================================= */
body.macos-ui.macos-page-docs .docs-main{
  position:relative!important;
  z-index:1!important;
}
body.macos-ui.macos-page-docs .docs-main,
body.macos-ui.macos-page-docs #docsSidebar,
body.macos-ui.macos-page-docs .docs-menu-button,
body.macos-ui.macos-page-docs .sidebar-link{
  touch-action:manipulation!important;
}
body.macos-ui.macos-page-docs .docs-backdrop[aria-hidden="true"]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.macos-ui.macos-page-docs .docs-backdrop[aria-hidden="false"]{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body.macos-ui.macos-page-docs .sidebar-link{
  position:relative!important;
  z-index:2!important;
}

/* =========================================================
   4) Mobile re-layout
   ========================================================= */
@media (max-width: 767px){
  body.macos-ui #settingsModal .settings-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
    padding:0!important;
    background:transparent!important;
  }
  body.macos-ui #settingsModal .settings-tab-btn{
    width:100%!important;
    border-radius:.95rem!important;
    background:rgba(9,9,11,.58)!important;
    border:1px solid rgba(255,255,255,.06)!important;
  }

  body.macos-ui #appSettingsModal .app-settings-head,
  body.macos-ui .app-settings-page .app-settings-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:.7rem!important;
  }
  body.macos-ui #appSettingsModal .app-settings-title-icon,
  body.macos-ui .app-settings-page .app-settings-title-icon{
    width:2.75rem!important;
    height:2.75rem!important;
    border-radius:1rem!important;
  }
  body.macos-ui #appSettingsModal .app-settings-title h1,
  body.macos-ui .app-settings-page .app-settings-title h1{
    font-size:1.04rem!important;
    line-height:1.2!important;
  }
  body.macos-ui #appSettingsModal .app-settings-title p,
  body.macos-ui .app-settings-page .app-settings-title p{
    font-size:.7rem!important;
    max-width:100%!important;
  }
  body.macos-ui #appSettingsModal .app-settings-tabs,
  body.macos-ui .app-settings-page .app-settings-tabs{
    margin:.95rem 1rem 0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
    padding:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  body.macos-ui #appSettingsModal .app-settings-tab-btn,
  body.macos-ui .app-settings-page .app-settings-tab-btn{
    width:100%!important;
    min-height:48px!important;
    padding:.78rem .82rem!important;
    border-radius:.95rem!important;
    background:rgba(9,9,11,.58)!important;
    border:1px solid rgba(255,255,255,.06)!important;
  }
  body.macos-ui #appSettingsModal .app-settings-tab-btn:nth-child(3),
  body.macos-ui .app-settings-page .app-settings-tab-btn:nth-child(3){
    grid-column:1 / -1!important;
  }
  body.macos-ui #appSettingsModal .app-settings-body,
  body.macos-ui .app-settings-page .app-settings-body{
    padding:.9rem 1rem 1rem!important;
  }
  body.macos-ui #appSettingsModal .app-settings-grid,
  body.macos-ui #appSettingsModal .app-settings-grid.four,
  body.macos-ui .app-settings-page .app-settings-grid,
  body.macos-ui .app-settings-page .app-settings-grid.four,
  body.macos-ui #settingsModal .grid.grid-cols-2{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.macos-ui #appSettingsModal .app-settings-col-span-2,
  body.macos-ui .app-settings-page .app-settings-col-span-2,
  body.macos-ui #settingsModal .col-span-2{
    grid-column:auto!important;
  }

  body.macos-ui #onlineModal .macos-title-content{
    align-items:flex-start!important;
  }
  body.macos-ui #onlineModal .online-title-row,
  body.macos-ui #onlineModal .online-actions{
    width:100%!important;
    max-width:100%!important;
    flex:1 1 100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
  body.macos-ui #onlineModal .online-actions > button[onclick*="App.toggleOnlineStream"]{
    flex:1 1 170px!important;
    min-width:0!important;
  }
  body.macos-ui #onlineModal .online-actions > button[onclick*="loadOnlineSessions"]{
    flex:0 0 40px!important;
  }
  body.macos-ui #onlineModal #online-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.macos-ui #onlineModal #online-sessions-table-wrap,
  body.macos-ui #onlineModal .mt-4.grid{
    margin-top:1rem!important;
  }
}

@media (max-width: 410px){
  body.macos-ui #settingsModal .settings-tab-btn,
  body.macos-ui #appSettingsModal .app-settings-tab-btn{
    font-size:.74rem!important;
  }
  body.macos-ui #onlineModal [data-modal-content]{
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
  }
}