/* DEVNOOD macOS Unified UI v10
 * Mobile titlebar collision fix + dashboard sidebar traffic lights.
 * This file is intentionally loaded LAST so it can neutralize old v6/v7/v8
 * titlebar rules without changing API/data behaviour.
 */
:root{
  --mac10-window:#1c1c1e;
  --mac10-toolbar:#242426;
  --mac10-border:rgba(255,255,255,.10);
  --mac10-text:#f5f5f7;
  --mac10-sub:#a1a1a6;
  --mac10-red:#ff5f57;
  --mac10-yellow:#febc2e;
  --mac10-green:#28c840;
}

/* =========================================================
   1) DASHBOARD SIDEBAR — add the missing macOS 3 dots
   ========================================================= */
body.macos-ui #sidebar{
  isolation:isolate!important;
}
body.macos-ui #sidebar::before,
body.macos-ui #sidebar.macos-window-chrome::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:24px!important;
  left:18px!important;
  z-index:45!important;
  width:12px!important;
  height:12px!important;
  border-radius:999px!important;
  background:var(--mac10-red)!important;
  box-shadow:20px 0 0 var(--mac10-yellow),40px 0 0 var(--mac10-green)!important;
  pointer-events:none!important;
}
body.macos-ui #sidebar > div:first-child{
  position:relative!important;
  z-index:2!important;
  min-height:72px!important;
  height:72px!important;
  padding:10px 14px 10px 88px!important;
  gap:10px!important;
  overflow:hidden!important;
  background:#242426!important;
  border-bottom:1px solid var(--mac10-border)!important;
}
body.macos-ui #sidebar > div:first-child > div:first-child{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
}
body.macos-ui #sidebar > div:first-child > .flex-1{
  min-width:0!important;
  overflow:hidden!important;
}
body.macos-ui #sidebar > div:first-child > .flex-1 > span,
body.macos-ui #sidebar > div:first-child > .flex-1 > div{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.macos-ui #sidebar > div:first-child > .relative.group{
  flex:0 0 auto!important;
  margin-left:auto!important;
}

/* =========================================================
   2) FLOATING WINDOWS — one real titlebar layout, no overlap
   v10 JS makes this exact direct-child structure:
   [ .macos-window-controls ][ .macos-title-content ][ .macos-close ]
   ========================================================= */
body.macos-ui [data-modal-content]::before,
body.macos-ui [data-modal-content]::after,
body.macos-ui [data-modal-content].has-macos-titlebar::before,
body.macos-ui [data-modal-content].has-macos-titlebar::after,
body.macos-ui [data-modal-content] > .macos-titlebar::before,
body.macos-ui [data-modal-content] > .macos-titlebar::after,
body.macos-ui .macos-titlebar::before,
body.macos-ui .macos-titlebar::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  box-shadow:none!important;
  background:none!important;
}

body.macos-ui [data-modal-content] > .macos-titlebar,
body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar{
  position:sticky!important;
  top:0!important;
  z-index:90!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 40px!important;
  align-items:center!important;
  justify-content:stretch!important;
  column-gap:10px!important;
  row-gap:8px!important;
  width:100%!important;
  min-width:0!important;
  min-height:74px!important;
  height:auto!important;
  margin:0!important;
  padding:10px 14px!important;
  overflow:visible!important;
  background:var(--mac10-toolbar)!important;
  background-image:none!important;
  border:0!important;
  border-bottom:1px solid var(--mac10-border)!important;
  border-radius:0!important;
  box-shadow:0 1px 0 rgba(0,0,0,.22)!important;
  isolation:isolate!important;
}

body.macos-ui [data-modal-content] > .macos-titlebar > .macos-window-controls,
body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-window-controls{
  grid-column:1!important;
  grid-row:1!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  width:54px!important;
  min-width:54px!important;
  height:18px!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
body.macos-ui [data-modal-content] > .macos-titlebar > .macos-window-controls span,
body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-window-controls span{
  display:block!important;
  flex:0 0 11px!important;
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
  min-height:11px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)!important;
}
body.macos-ui .macos-window-controls .macos-red{background:var(--mac10-red)!important}
body.macos-ui .macos-window-controls .macos-yellow{background:var(--mac10-yellow)!important}
body.macos-ui .macos-window-controls .macos-green{background:var(--mac10-green)!important}

body.macos-ui [data-modal-content] > .macos-titlebar > .macos-title-content,
body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-title-content{
  grid-column:2!important;
  grid-row:1!important;
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:8px 12px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
body.macos-ui .macos-title-content > *{
  min-width:0!important;
  max-width:100%!important;
}
body.macos-ui .macos-title-content > h1,
body.macos-ui .macos-title-content > h2,
body.macos-ui .macos-title-content > h3,
body.macos-ui .macos-title-content > h4,
body.macos-ui .macos-title-content > [data-modal-title]{
  flex:1 1 auto!important;
}
body.macos-ui .macos-title-content > .flex,
body.macos-ui .macos-title-content > .app-settings-title,
body.macos-ui .macos-title-content > .online-title-row,
body.macos-ui .macos-title-content > .online-actions{
  min-width:0!important;
  max-width:100%!important;
}
body.macos-ui .macos-title-content h1,
body.macos-ui .macos-title-content h2,
body.macos-ui .macos-title-content h3,
body.macos-ui .macos-title-content h4,
body.macos-ui .macos-title-content [data-modal-title]{
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  max-width:100%!important;
  color:var(--mac10-text)!important;
  font-size:1rem!important;
  line-height:1.3!important;
  font-weight:750!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
body.macos-ui .macos-title-content h1 i,
body.macos-ui .macos-title-content h2 i,
body.macos-ui .macos-title-content h3 i,
body.macos-ui .macos-title-content h4 i{
  margin-right:8px!important;
}
body.macos-ui .macos-title-content p,
body.macos-ui .macos-title-content small{
  margin:3px 0 0!important;
  padding:0!important;
  min-width:0!important;
  max-width:100%!important;
  color:var(--mac10-sub)!important;
  font-size:.72rem!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

body.macos-ui [data-modal-content] > .macos-titlebar > .macos-close,
body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-close{
  grid-column:3!important;
  grid-row:1!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  z-index:3!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:end!important;
  align-self:center!important;
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  margin:0!important;
  padding:0!important;
  color:#8e8e93!important;
  background:#2c2c2e!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:11px!important;
  line-height:1!important;
}
body.macos-ui [data-modal-content] > .macos-titlebar > .macos-close:hover,
body.macos-ui [data-modal-content] > .macos-titlebar > .macos-close:focus-visible{
  color:#fff!important;
  background:#3a3a3c!important;
  outline:none!important;
}

/* Header wrappers that used justify-between previously should fill only the
   middle lane. Their close button is moved out by v10 JS. */
body.macos-ui #promoModal .macos-title-content > .flex,
body.macos-ui #downloadModal .macos-title-content > .flex,
body.macos-ui #hwidResetModal .macos-title-content > .flex,
body.macos-ui #freekeyModal .macos-title-content > .flex{
  width:100%!important;
  flex:1 1 100%!important;
}

/* Online monitor has real actions. Keep them below/next to the title but never
   inside the close-button or traffic-light lanes. */
body.macos-ui #onlineModal .macos-title-content{
  align-items:center!important;
}
body.macos-ui #onlineModal .macos-title-content > .online-title-row{
  flex:1 1 280px!important;
  width:auto!important;
  flex-wrap:wrap!important;
}
body.macos-ui #onlineModal .macos-title-content > .online-actions{
  flex:0 1 auto!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}

/* Action-heavy headers: reserve a separate flow row instead of letting input,
   select or action buttons sit on top of the title. */
body.macos-ui #sessionsModal .macos-title-content > .flex:last-child,
body.macos-ui #apiLogsModal .macos-title-content > .flex:last-child,
body.macos-ui #statsModal .macos-title-content > .flex:last-child{
  flex:0 1 auto!important;
  min-width:0!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

/* Modal body must start below the sticky toolbar and must not inherit old
   negative margins/padding from legacy titlebar layers. */
body.macos-ui [data-modal-content].macos-inline-pad > .macos-titlebar{
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
}
body.macos-ui [data-modal-content] > .macos-titlebar + *{
  margin-top:0!important;
}

/* =========================================================
   3) Mobile safety: never allow title/action text to collide
   ========================================================= */
@media(max-width:767px){
  body.macos-ui #sidebar::before,
  body.macos-ui #sidebar.macos-window-chrome::before{
    top:25px!important;
    left:16px!important;
    width:11px!important;
    height:11px!important;
    box-shadow:18px 0 0 var(--mac10-yellow),36px 0 0 var(--mac10-green)!important;
  }
  body.macos-ui #sidebar > div:first-child{
    min-height:70px!important;
    height:70px!important;
    padding:9px 12px 9px 78px!important;
    gap:9px!important;
  }
  body.macos-ui #sidebar > div:first-child > div:first-child{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
  }

  body.macos-ui [data-modal-content] > .macos-titlebar,
  body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar{
    grid-template-columns:46px minmax(0,1fr) 36px!important;
    column-gap:8px!important;
    row-gap:7px!important;
    min-height:70px!important;
    padding:10px!important;
  }
  body.macos-ui [data-modal-content] > .macos-titlebar > .macos-window-controls,
  body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-window-controls{
    width:46px!important;
    min-width:46px!important;
    gap:6px!important;
  }
  body.macos-ui [data-modal-content] > .macos-titlebar > .macos-window-controls span,
  body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-window-controls span{
    flex-basis:10px!important;
    width:10px!important;
    height:10px!important;
    min-width:10px!important;
    min-height:10px!important;
  }
  body.macos-ui [data-modal-content] > .macos-titlebar > .macos-close,
  body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-close{
    flex-basis:36px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    border-radius:10px!important;
  }
  body.macos-ui .macos-title-content{
    gap:6px 8px!important;
  }
  body.macos-ui .macos-title-content h1,
  body.macos-ui .macos-title-content h2,
  body.macos-ui .macos-title-content h3,
  body.macos-ui .macos-title-content h4{
    font-size:.94rem!important;
    line-height:1.28!important;
  }
  body.macos-ui .macos-title-content p,
  body.macos-ui .macos-title-content small{
    font-size:.68rem!important;
  }

  body.macos-ui #onlineModal .macos-title-content,
  body.macos-ui #sessionsModal .macos-title-content,
  body.macos-ui #apiLogsModal .macos-title-content,
  body.macos-ui #statsModal .macos-title-content{
    align-items:flex-start!important;
  }
  body.macos-ui #onlineModal .macos-title-content > .online-title-row,
  body.macos-ui #onlineModal .macos-title-content > .online-actions,
  body.macos-ui #sessionsModal .macos-title-content > .flex:last-child,
  body.macos-ui #apiLogsModal .macos-title-content > .flex:last-child,
  body.macos-ui #statsModal .macos-title-content > .flex:last-child{
    flex:1 1 100%!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
  }
  body.macos-ui #apiLogsModal .macos-title-content > .flex:last-child > input,
  body.macos-ui #statsModal .macos-title-content > .flex:last-child > select{
    flex:1 1 150px!important;
    width:auto!important;
    max-width:100%!important;
  }
}

@media(max-width:390px){
  body.macos-ui #sidebar > div:first-child{
    padding-left:74px!important;
    padding-right:10px!important;
  }
  body.macos-ui [data-modal-content] > .macos-titlebar,
  body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar{
    grid-template-columns:43px minmax(0,1fr) 34px!important;
    column-gap:6px!important;
    padding:9px 8px!important;
  }
  body.macos-ui [data-modal-content] > .macos-titlebar > .macos-window-controls,
  body.macos-ui [data-modal-content] .macos-titlebar.macos-user-template-titlebar > .macos-window-controls{
    width:43px!important;
    min-width:43px!important;
    gap:5px!important;
  }
  body.macos-ui .macos-title-content h1,
  body.macos-ui .macos-title-content h2,
  body.macos-ui .macos-title-content h3,
  body.macos-ui .macos-title-content h4{
    font-size:.90rem!important;
  }
}