/* =========================================================
   Squares Pro - Top Navigation Experiment
   - Replaces the permanent left rail with a compact top bar
   - Gives the dashboard live board the full available width
   ========================================================= */

/* App shell */
.app{
  display:block!important;
  min-height:100vh;
}

.sidebar{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  z-index:9500;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:10px 18px!important;
  display:grid!important;
  grid-template-columns:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"brand mode notices nav search";
  align-items:center;
  gap:12px;
  overflow:visible!important;
  border-right:0!important;
  border-bottom:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.brand{
  grid-area:brand;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0!important;
  text-align:left!important;
  white-space:nowrap;
}
.brand .logoMark{
  width:46px!important;
  height:46px!important;
  min-width:46px;
  margin:0!important;
  padding:6px!important;
  gap:2px!important;
  border-radius:13px!important;
}
.brand h1{
  font-size:18px!important;
  line-height:.85!important;
  letter-spacing:1.5px!important;
}
.brand h1 b{
  display:inline!important;
  font-size:18px!important;
  letter-spacing:3px!important;
  margin:0 0 0 4px!important;
}
.brand small{display:none!important;}

.modeSwitcher{
  grid-area:mode;
  margin:0!important;
  min-width:188px;
}
.modeSwitcher button{
  min-height:38px!important;
  padding:8px 12px!important;
}

#notificationBell{grid-area:notices;}
#smartAlertBell{grid-area:notices; margin-left:118px!important;}
.notificationBell,
.smartAlertBell{
  width:auto!important;
  min-height:38px!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:8px 11px!important;
  white-space:nowrap;
}

.commandPaletteTrigger{
  grid-area:search;
  width:auto!important;
  min-width:132px;
  min-height:38px!important;
  margin:0!important;
  padding:8px 11px!important;
  white-space:nowrap;
}

.nav{
  grid-area:nav;
  overflow:visible!important;
  padding:0!important;
  min-width:0;
}
.navReorg{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  justify-content:center;
  gap:6px!important;
}
.navMainGroup,
.navSettingsGroup{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:4px!important;
}
.navSettingsGroup{
  margin:0!important;
  padding:0!important;
}
.nav button{
  width:auto!important;
  min-height:38px!important;
  margin:0!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  font-size:13px!important;
  white-space:nowrap;
}
.navDivider{display:none!important;}

.navToolsGroup{
  position:relative;
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
}
.navSectionToggle{
  min-height:38px!important;
}
.navToolMenu{
  position:absolute!important;
  top:calc(100% + 10px);
  right:0;
  z-index:9600;
  width:230px;
  padding:8px!important;
  margin:0!important;
  border:1px solid rgba(148,163,184,.22)!important;
  border-radius:14px;
  background:#0b1424;
  box-shadow:0 18px 42px rgba(0,0,0,.4);
}
.navToolMenu button{
  width:100%!important;
  justify-content:flex-start!important;
  font-size:13px!important;
}

.version{display:none!important;}

main{
  width:100%!important;
  margin-left:0!important;
  padding:16px 22px 28px!important;
}

/* Workspace dock becomes a clean strip below the top menu. */
#workspaceDock{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  margin:0 0 16px!important;
}

/* Dashboard: league workspace first, full-width board below it. */
#dashboard .dashboardGameDayShell{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:16px!important;
}
#dashboard .dashboardBoardStatus{
  width:100%;
}
#dashboard .dashboardLiveBoardCard{
  width:100%;
  overflow:visible!important;
}
#dashboard .dashboardLiveBoard{
  width:100%;
  max-height:none!important;
  overflow:visible!important;
}
#dashboard .dashBoardStage{
  grid-template-columns:72px minmax(0,1fr)!important;
}
#dashboard .dashBoardTable td{
  height:48px!important;
  padding:3px!important;
}
#dashboard .dashOwner{
  font-size:12px!important;
}
#dashboard .dashHeader,
#dashboard .dashCorner{
  font-size:19px!important;
}
#dashboard .dashTeamTop{
  font-size:clamp(38px,5vw,68px)!important;
}
#dashboard .dashTeamLeft span{
  font-size:clamp(30px,4vw,54px)!important;
}

/* Keep the dashboard workspace compact while still full width. */
#dashboard .dashboardStatusTiles{
  grid-template-columns:repeat(4,minmax(150px,1fr))!important;
}
#dashboard .dashboardPlayerHighlightRow{
  align-items:center;
}

@media(max-width:1500px){
  .sidebar{
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "brand mode nav search"
      "brand notices nav search";
  }
  #notificationBell{margin-right:116px!important;}
  #smartAlertBell{margin-left:0!important;}
  .nav button{padding:8px 9px!important;font-size:12px!important;}
}

@media(max-width:1180px){
  .sidebar{
    position:relative!important;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "brand mode search"
      "nav nav nav"
      "notices notices notices";
  }
  .navReorg{justify-content:flex-start;overflow-x:auto!important;padding-bottom:2px!important;}
  #notificationBell,#smartAlertBell{margin:0!important;}
  #smartAlertBell{margin-left:8px!important;}
  #dashboard .dashboardStatusTiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media(max-width:720px){
  .sidebar{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand search"
      "mode mode"
      "nav nav"
      "notices notices";
    padding:10px!important;
  }
  .brand h1{font-size:16px!important;}
  .brand h1 b{font-size:16px!important;}
  .modeSwitcher{width:100%;min-width:0;}
  .commandPaletteTrigger kbd{display:none;}
  main{padding:12px!important;}
  #dashboard .dashboardStatusTiles{grid-template-columns:1fr!important;}
  #dashboard .dashBoardStage{grid-template-columns:48px minmax(0,1fr)!important;}
  #dashboard .dashBoardTable td{height:36px!important;}
  #dashboard .dashOwner{font-size:9px!important;}
}

/* =========================================================
   Dashboard side workspace refinement
   - Current Board tools become a dashboard-only left rail
   - Live Board uses the remaining width
   - Status tiles are compact and content-sized
   ========================================================= */
@media (min-width: 1181px){
  #dashboard .dashboardGameDayShell{
    grid-template-columns:340px minmax(0,1fr)!important;
    gap:16px!important;
    align-items:start!important;
  }

  #dashboard .dashboardBoardStatus{
    position:sticky!important;
    top:82px!important;
    width:340px!important;
    padding:14px!important;
    overflow:visible!important;
  }

  #dashboard .dashboardLiveBoardCard{
    min-width:0!important;
    width:100%!important;
  }

  #dashboard .dashboardStatusHeader{
    margin-bottom:8px!important;
  }
  #dashboard .dashboardStatusHeader h3{
    font-size:22px!important;
  }

  #dashboard .dashboardProgressPrimary{
    margin:8px 0 10px!important;
    padding:10px!important;
    border-radius:14px!important;
  }
  #dashboard .dashboardProgress{
    height:14px!important;
  }
  #dashboard .dashboardProgressMeta{
    margin-top:6px!important;
    font-size:11px!important;
  }

  #dashboard .dashboardStatusTiles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #dashboard .dashboardStatusTiles > div,
  #dashboard .dashboardStatusTiles > button{
    min-height:0!important;
    height:auto!important;
    padding:10px 11px!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }
  #dashboard .dashboardStatusTiles span{
    font-size:10px!important;
  }
  #dashboard .dashboardStatusTiles b{
    margin-top:3px!important;
    font-size:16px!important;
    line-height:1.15!important;
  }

  #dashboard .dashboardActionRow{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin-top:10px!important;
  }
  #dashboard .dashboardActionRow .btn{
    width:100%!important;
    min-width:0!important;
    padding:9px 8px!important;
    font-size:12px!important;
  }

  #dashboard .dashboardPlayerHighlight{
    margin-top:10px!important;
    padding:10px!important;
    border-radius:14px!important;
  }
  #dashboard .dashboardPlayerHighlightRow{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #dashboard .dashboardPlayerHighlightRow input{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
  }
  #dashboard .dashboardPlayerHighlightRow .btn{
    width:100%!important;
    min-width:0!important;
    padding:8px 6px!important;
    font-size:11px!important;
  }
  #dashboard .dashboardPlayerHighlightRow .playerPackBtn{
    grid-column:auto!important;
  }
  #dashboard .dashboardHighlightStatus{
    margin-top:6px!important;
    font-size:11px!important;
  }

  #dashboard .dashboardDropPanel{
    margin-top:10px!important;
    padding:10px!important;
  }

  #dashboard .dashboardLiveBoard{
    max-height:none!important;
    overflow:visible!important;
  }
  #dashboard .dashBoardStage{
    grid-template-columns:58px minmax(0,1fr)!important;
  }
  #dashboard .dashBoardTable td{
    height:42px!important;
  }
  #dashboard .dashOwner{
    font-size:10px!important;
  }
}

@media (min-width: 1500px){
  #dashboard .dashboardGameDayShell{
    grid-template-columns:360px minmax(0,1fr)!important;
  }
  #dashboard .dashboardBoardStatus{
    width:360px!important;
  }
}

@media (max-width: 1180px){
  #dashboard .dashboardGameDayShell{
    grid-template-columns:1fr!important;
  }
  #dashboard .dashboardBoardStatus{
    position:relative!important;
    top:auto!important;
    width:100%!important;
  }
  #dashboard .dashboardStatusTiles{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media (max-width: 760px){
  #dashboard .dashboardStatusTiles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* =========================================================
   Dashboard width + matched panel bottoms hotfix
   - Remove the old desktop max-width that left unused space
   - Stretch both dashboard columns to the same row height
   ========================================================= */
main{
  max-width:none!important;
}

@media (min-width:1181px){
  #dashboard .dashboardGameDayShell{
    width:100%!important;
    max-width:none!important;
    align-items:stretch!important;
  }

  #dashboard .dashboardBoardStatus,
  #dashboard .dashboardLiveBoardCard{
    height:100%!important;
    min-height:100%!important;
  }

  #dashboard .dashboardLiveBoardCard{
    display:flex!important;
    flex-direction:column!important;
  }

  #dashboard .dashboardLiveBoard{
    flex:1 1 auto!important;
  }
}

/* =========================================================
   Dashboard scoreboard + iPad top-nav hotfix
   ========================================================= */
@media (min-width:1181px){
  #dashboard #dashboardScoreboardPanel .dashboardScoreGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  #dashboard #dashboardScoreboardPanel .dashboardScoreGrid > div{
    min-width:0!important;
  }
  #dashboard #dashboardScoreboardPanel input,
  #dashboard #dashboardScoreboardPanel select{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  #dashboard #dashboardScoreboardPanel label{
    white-space:normal!important;
    line-height:1.1!important;
  }
  #dashboard #dashboardScoreboardPanel .dashboardScoreActions{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #dashboard #dashboardScoreboardPanel .dashboardScoreActions .btn{
    width:100%!important;
    white-space:normal!important;
  }
}

/* iPad landscape and smaller laptops: put navigation on its own row
   so the mode switcher never overlaps Home or the other nav buttons. */
@media (max-width:1450px){
  .sidebar{
    grid-template-columns:auto minmax(190px,auto) minmax(0,1fr) auto!important;
    grid-template-areas:
      "brand mode notices search"
      "nav nav nav nav"!important;
    row-gap:8px!important;
  }
  .nav{
    width:100%!important;
    min-width:0!important;
  }
  .navReorg{
    width:100%!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:2px!important;
    scrollbar-width:thin;
  }
  #notificationBell,
  #smartAlertBell{
    margin:0!important;
  }
  #smartAlertBell{
    margin-left:8px!important;
  }
}

@media (max-width:900px){
  .sidebar{
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "brand search"
      "mode mode"
      "notices notices"
      "nav nav"!important;
  }
  .modeSwitcher{
    width:100%!important;
    min-width:0!important;
  }
}

/* =========================================================
   Dashboard live-board vertical expansion
   - Use the full matched height of the Current Board panel
   - Stretch the square grid so it does not look compressed
   ========================================================= */
@media (min-width:1181px){
  #dashboard .dashboardLiveBoardCard{
    min-height:700px!important;
  }

  #dashboard .dashboardLiveBoard{
    display:flex!important;
    flex:1 1 auto!important;
    min-height:0!important;
    flex-direction:column!important;
  }

  #dashboard .dashBoardStage{
    display:grid!important;
    flex:1 1 auto!important;
    min-height:560px!important;
    align-items:stretch!important;
  }

  #dashboard .dashTeamLeft,
  #dashboard .dashBoardScroll{
    height:100%!important;
    min-height:0!important;
  }

  #dashboard .dashBoardScroll{
    display:flex!important;
    align-items:stretch!important;
  }

  #dashboard .dashBoardTable{
    width:100%!important;
    height:100%!important;
    table-layout:fixed!important;
  }

  #dashboard .dashBoardTable tr{
    height:9.09%!important;
  }

  #dashboard .dashBoardTable td{
    height:auto!important;
    min-height:46px!important;
    vertical-align:middle!important;
  }
}

@media (min-width:1500px){
  #dashboard .dashboardLiveBoardCard{
    min-height:740px!important;
  }
  #dashboard .dashBoardStage{
    min-height:600px!important;
  }
}

/* =========================================================
   Header overlap fix v18
   Keep controls on the first row and navigation on a dedicated
   second row at desktop widths. Each alert has its own grid cell.
   ========================================================= */
.sidebar{
  grid-template-columns:auto auto auto auto minmax(132px,1fr)!important;
  grid-template-areas:
    "brand mode notification alert search"
    "nav nav nav nav nav"!important;
  column-gap:12px!important;
  row-gap:8px!important;
}
#notificationBell{
  grid-area:notification!important;
  margin:0!important;
}
#smartAlertBell{
  grid-area:alert!important;
  margin:0!important;
}
.commandPaletteTrigger{
  grid-area:search!important;
  justify-self:end!important;
}
.nav{
  grid-area:nav!important;
  width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
}
.navReorg{
  width:max-content!important;
  min-width:100%!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
}
.navMainGroup,
.navSettingsGroup{
  flex:0 0 auto!important;
}

@media(max-width:1100px){
  .sidebar{
    grid-template-columns:auto 1fr auto!important;
    grid-template-areas:
      "brand mode search"
      "notification alert alert"
      "nav nav nav"!important;
  }
  #notificationBell,
  #smartAlertBell{
    justify-self:start!important;
  }
  .navReorg{
    justify-content:flex-start!important;
  }
}

@media(max-width:720px){
  .sidebar{
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "brand search"
      "mode mode"
      "notification alert"
      "nav nav"!important;
  }
  #notificationBell,
  #smartAlertBell{
    width:100%!important;
    min-width:0!important;
  }
}

/* =========================================================
   Dashboard scoreboard / Live Board size stability
   - Do not stretch the Live Board to match the expanding status card
   - Restore its natural size after closing the scoreboard on iPad/Safari
   - Keep the full bottom row visible
   ========================================================= */
#dashboard .dashboardGameDayShell{
  align-items:start!important;
}

#dashboard .dashboardBoardStatus,
#dashboard .dashboardLiveBoardCard{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}

#dashboard .dashboardLiveBoardCard{
  display:block!important;
  overflow:visible!important;
}

#dashboard .dashboardLiveBoard{
  display:block!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

#dashboard .dashBoardStage{
  display:grid!important;
  min-height:0!important;
  height:auto!important;
  align-items:stretch!important;
}

#dashboard .dashTeamLeft,
#dashboard .dashBoardScroll,
#dashboard .dashBoardTable{
  height:auto!important;
  min-height:0!important;
}

#dashboard .dashBoardScroll{
  display:block!important;
  overflow:visible!important;
}

#dashboard .dashBoardTable tr{
  height:auto!important;
}

#dashboard .dashBoardTable td{
  height:clamp(34px,4.2vw,48px)!important;
  min-height:0!important;
}

/* Opening the scoreboard changes only the left column. */
#dashboard.scoreboardOpen .dashboardLiveBoardCard,
#dashboard .dashboardGameDayShell.scoreboardOpen .dashboardLiveBoardCard{
  height:auto!important;
  min-height:0!important;
}

/* iPad: larger player names without increasing the board's total height. */
@media (min-width:768px) and (max-width:1180px){
  #dashboard .dashOwner{
    font-size:clamp(11px,1.35vw,15px)!important;
    line-height:1.05!important;
    padding:2px!important;
  }
  #dashboard .dashOwner > span:first-child{
    line-height:1.05!important;
  }
  #dashboard .dashBoardTable td{
    height:clamp(38px,5.1vw,52px)!important;
  }
  #dashboard .dashBoardScroll{
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
  }
}