/* DEVNOOD macOS Unified UI v12 detailed patch
 * Focus: top bar stability, category alignment, online monitor header, docs/guide usability.
 */
:root{
  --mac12-surface:#1f1f21;
  --mac12-surface-2:#242426;
  --mac12-border:rgba(255,255,255,.08);
  --mac12-border-strong:rgba(255,255,255,.12);
}

/* -----------------------------------------
   Generic top-bar cleanup for settings modals
   ----------------------------------------- */
body.macos-ui #settingsModal .macos-titlebar,
body.macos-ui #appSettingsModal .macos-titlebar,
body.macos-ui #onlineModal .macos-titlebar{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 40px!important;
  align-items:center!important;
  column-gap:10px!important;
  row-gap:8px!important;
}
body.macos-ui #settingsModal .macos-titlebar > .macos-title-content,
body.macos-ui #appSettingsModal .macos-titlebar > .macos-title-content,
body.macos-ui #onlineModal .macos-titlebar > .macos-title-content{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
body.macos-ui #settingsModal .macos-titlebar > .macos-close,
body.macos-ui #appSettingsModal .macos-titlebar > .macos-close,
body.macos-ui #onlineModal .macos-titlebar > .macos-close{
  position:static!important;
  inset:auto!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
}

/* -----------------------------------------
   Web settings modal — aligned tabs and content
   ----------------------------------------- */
body.macos-ui #settingsModal .macos-title-content{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
}
body.macos-ui #settingsModal .macos-title-content h3{
  margin:0!important;
  font-size:1rem!important;
  line-height:1.25!important;
}
body.macos-ui #settingsModal .settings-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.6rem!important;
  padding:0!important;
  background:transparent!important;
}
body.macos-ui #settingsModal .settings-tab-btn{
  width:100%!important;
  min-height:52px!important;
  padding:.88rem .9rem!important;
  border-radius:1rem!important;
  border:1px solid var(--mac12-border)!important;
  background:rgba(10,10,12,.72)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.48rem!important;
  text-align:center!important;
  line-height:1.2!important;
  white-space:normal!important;
}
body.macos-ui #settingsModal .settings-tab-btn.active{
  background:linear-gradient(135deg, rgba(29, 78, 216, .92), rgba(37, 99, 235, .88))!important;
  border-color:rgba(96, 165, 250, .28)!important;
  color:#fff!important;
  box-shadow:0 14px 34px -28px rgba(37,99,235,.85)!important;
}
body.macos-ui #settingsModal .settings-tab-btn i{margin-right:0!important;flex-shrink:0!important}
body.macos-ui #settingsModal form > [data-settings-content]{
  margin-top:0!important;
}
body.macos-ui #settingsModal .grid.grid-cols-2{
  align-items:start!important;
}

/* -----------------------------------------
   App settings — make it visually match web settings
   ----------------------------------------- */
body.macos-ui #appSettingsModal .macos-title-content,
body.macos-ui .app-settings-page .macos-title-content{
  display:block!important;
}
body.macos-ui #appSettingsModal .macos-title-content > .app-settings-title,
body.macos-ui .app-settings-page .macos-title-content > .app-settings-title{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:.8rem!important;
  width:100%!important;
  min-width:0!important;
}
body.macos-ui #appSettingsModal .app-settings-title-icon,
body.macos-ui .app-settings-page .app-settings-title-icon{
  width:3rem!important;
  height:3rem!important;
  border-radius:1rem!important;
  flex-shrink:0!important;
}
body.macos-ui #appSettingsModal .app-settings-title h1,
body.macos-ui .app-settings-page .app-settings-title h1{
  margin:0!important;
  font-size:1.02rem!important;
  line-height:1.2!important;
}
body.macos-ui #appSettingsModal .app-settings-title p,
body.macos-ui .app-settings-page .app-settings-title p{
  margin:.22rem 0 0!important;
  max-width:100%!important;
  font-size:.74rem!important;
  line-height:1.42!important;
  color:#9ca3af!important;
  white-space:normal!important;
}
body.macos-ui #appSettingsModal .app-settings-tabs,
body.macos-ui .app-settings-page .app-settings-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.6rem!important;
  padding:0!important;
  background:transparent!important;
}
body.macos-ui #appSettingsModal .app-settings-tab-btn,
body.macos-ui .app-settings-page .app-settings-tab-btn{
  width:100%!important;
  min-height:52px!important;
  padding:.88rem .9rem!important;
  border-radius:1rem!important;
  border:1px solid var(--mac12-border)!important;
  background:rgba(10,10,12,.72)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.48rem!important;
  line-height:1.2!important;
  white-space:normal!important;
}
body.macos-ui #appSettingsModal .app-settings-tab-btn.active,
body.macos-ui .app-settings-page .app-settings-tab-btn.active{
  background:linear-gradient(135deg, rgba(29, 78, 216, .92), rgba(37, 99, 235, .88))!important;
  border-color:rgba(96, 165, 250, .28)!important;
  color:#fff!important;
  box-shadow:0 14px 34px -28px rgba(37,99,235,.85)!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-section,
body.macos-ui .app-settings-page .app-settings-section{
  padding:1rem!important;
  border-radius:1.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{
  gap:.95rem!important;
}

/* -----------------------------------------
   Online Monitor — proper header and controls
   ----------------------------------------- */
body.macos-ui #onlineModal [data-modal-content]{
  width:min(94vw, 62rem)!important;
  max-width:min(94vw, 62rem)!important;
}
body.macos-ui #onlineModal .macos-titlebar{
  row-gap:10px!important;
}
body.macos-ui #onlineModal .macos-title-content{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
body.macos-ui #onlineModal .online-title-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:8px 10px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
body.macos-ui #onlineModal .online-title-row h3{
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.35rem!important;
  min-width:0!important;
}
body.macos-ui #onlineModal .online-title-row h3 i{margin-right:0!important}
body.macos-ui #onlineModal .online-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
body.macos-ui #onlineModal .online-actions > button{
  min-height:42px!important;
  border-radius:12px!important;
  padding:.72rem 1rem!important;
  font-size:.8rem!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  white-space:nowrap!important;
}
body.macos-ui #onlineModal .online-actions > button i{margin-right:0!important}
body.macos-ui #onlineModal #online-stream-btn{
  min-width:132px!important;
}
body.macos-ui #onlineModal .online-actions > button[onclick*="App.loadOnlineSessions"]{
  width:42px!important;
  min-width:42px!important;
  padding:0!important;
}
body.macos-ui #onlineModal .online-actions > button[onclick*="closeModal"],
body.macos-ui #onlineModal .online-actions .macos-close{
  display:none!important;
}
body.macos-ui #onlineModal .macos-titlebar > .macos-close{
  display:inline-flex!important;
}
body.macos-ui #onlineModal #online-count{padding:.46rem .82rem!important;font-size:.74rem!important}
body.macos-ui #onlineModal #online-live{padding:.32rem .52rem!important;font-size:.68rem!important}
body.macos-ui #onlineModal #online-stats{gap:1rem!important}
body.macos-ui #onlineModal #online-stats > div{min-height:100px!important;padding:1rem!important}

/* -----------------------------------------
   Docs + Guide — stop hidden overlay intercepting touches
   ----------------------------------------- */
body.macos-ui.macos-page-docs .docs-main,
body.macos-ui.macos-page-guide .guide-main{
  position:relative!important;
  z-index:1!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-guide #guideBackdrop.hidden{
  display:none!important;
  pointer-events:none!important;
}
body.macos-ui.macos-page-guide #guideBackdrop:not(.hidden){
  display:block!important;
  pointer-events:auto!important;
}
body.macos-ui.macos-page-guide #guideSidebar,
body.macos-ui.macos-page-guide #guideMenuBtn,
body.macos-ui.macos-page-guide .sidebar-link,
body.macos-ui.macos-page-docs #docsSidebar,
body.macos-ui.macos-page-docs .sidebar-link,
body.macos-ui.macos-page-docs .docs-menu-button{
  touch-action:manipulation!important;
}

@media (max-width: 767px){
  body.macos-ui #settingsModal .macos-titlebar,
  body.macos-ui #appSettingsModal .macos-titlebar,
  body.macos-ui #onlineModal .macos-titlebar{
    grid-template-columns:46px minmax(0,1fr) 36px!important;
    column-gap:8px!important;
    padding:10px!important;
  }
  body.macos-ui #settingsModal .settings-tab-btn,
  body.macos-ui #appSettingsModal .app-settings-tab-btn{
    min-height:50px!important;
    padding:.8rem .7rem!important;
    font-size:.78rem!important;
  }
  body.macos-ui #onlineModal .macos-title-content{
    gap:7px!important;
  }
  body.macos-ui #onlineModal .online-title-row,
  body.macos-ui #onlineModal .online-actions{
    width:100%!important;
  }
  body.macos-ui #onlineModal .online-actions{
    justify-content:flex-start!important;
  }
  body.macos-ui #onlineModal #online-stream-btn{
    min-width:0!important;
    flex:0 0 auto!important;
  }
  body.macos-ui #onlineModal #online-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.macos-ui #appSettingsModal .app-settings-title-icon,
  body.macos-ui .app-settings-page .app-settings-title-icon{
    width:2.8rem!important;height:2.8rem!important;
  }
  body.macos-ui #appSettingsModal .app-settings-title p,
  body.macos-ui .app-settings-page .app-settings-title p{
    font-size:.7rem!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 #online-stream-btn{padding:.72rem .9rem!important}
}