/* Release 1.4F — compact planner chrome, fullscreen map, and fullscreen traffic controls */
body.planner-page{overflow-x:hidden}

/* The shared application shell already carries the product identity. Keep the
   planner context bar informative, but stop spending a full header row on it. */
body.planner-page>header{
  height:38px!important;min-height:38px;padding:5px 16px!important;
  background:rgba(7,19,31,.97);position:relative;z-index:4
}
body.planner-page>header>div:first-child{display:flex;align-items:center;gap:10px}
body.planner-page>header .eyebrow{font-size:8px;letter-spacing:.13em;white-space:nowrap}
body.planner-page>header h1{font-size:13px!important;margin:0!important;white-space:nowrap}
body.planner-page>header .status{font-size:10px;white-space:nowrap}
body.planner-page>header .status a{margin-right:10px!important}
body.planner-page main{min-height:calc(100vh - 76px)}
body.planner-page .workspace{padding:10px 14px 14px!important}

/* Compress navigation and summary information into a quick scan strip. */
body.planner-page .tabs{margin-bottom:7px!important;min-height:34px}
body.planner-page .tabs button{min-height:34px!important;padding:6px 12px!important;font-size:11px;line-height:1.1}
body.planner-page .metrics{gap:7px!important;margin-bottom:7px!important}
body.planner-page .metrics article{padding:8px 10px!important;min-height:68px;border-radius:9px}
body.planner-page .metrics span,body.planner-page .metrics small{font-size:8px!important;letter-spacing:.07em}
body.planner-page .metrics strong{font-size:20px!important;margin:2px 0!important;line-height:1.05}
body.planner-page .alerts{margin:0 0 7px!important}
body.planner-page .alerts:empty{display:none}
body.planner-page .alerts>.alert{padding:7px 10px!important;margin:0!important;font-size:10px!important;line-height:1.25}

/* Chart and traffic controls remain fully functional, but now occupy two dense
   rows rather than several oversized panels. */
body.planner-page .chart-toolbar{
  display:grid!important;grid-template-columns:minmax(150px,.75fr) minmax(170px,.8fr) minmax(170px,1fr) auto auto;
  align-items:center!important;gap:8px!important;padding:7px 10px!important;margin:0!important;min-height:48px!important
}
body.planner-page .chart-toolbar>div:first-child{display:flex;align-items:center;gap:7px;min-width:0}
body.planner-page .chart-toolbar>div:first-child .eyebrow{display:none}
body.planner-page .chart-toolbar>div:first-child strong{font-size:12px;white-space:nowrap}
body.planner-page .chart-toolbar label{margin:0!important;display:flex!important;align-items:center;gap:6px;font-size:9px;min-width:0}
body.planner-page .chart-toolbar select{margin:0!important;padding:6px 28px 6px 8px!important;min-height:31px;font-size:11px;min-width:0;width:100%}
body.planner-page .chart-toolbar .opacity-control input{margin:0!important;min-width:100px}
body.planner-page .chart-toolbar button,body.planner-page .chart-toolbar .button-link{min-height:31px!important;padding:6px 9px!important;font-size:10px!important;white-space:nowrap}
body.planner-page .chart-status{padding:4px 3px!important;margin:0!important;font-size:9px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.planner-page .overview-traffic-bar{min-height:48px!important;margin:5px 0 7px!important;padding:6px 8px!important;gap:8px!important}
body.planner-page .overview-traffic-main{min-height:30px!important;min-width:185px!important}
body.planner-page .overview-traffic-main strong{font-size:11px!important}
body.planner-page .overview-traffic-main small{font-size:8px!important}
body.planner-page .overview-traffic-actions{gap:5px!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:thin;padding-bottom:1px}
body.planner-page .overview-traffic-actions label{font-size:8px!important;flex:0 0 auto}
body.planner-page .overview-traffic-actions select{min-height:28px!important;padding:4px 24px 4px 7px!important;font-size:10px!important}
body.planner-page .overview-traffic-actions button{min-height:28px!important;padding:5px 8px!important;font-size:9px!important;flex:0 0 auto}
body.planner-page .traffic-check.compact{min-height:28px;padding:4px 6px!important;font-size:9px!important;white-space:nowrap}

/* Give the map the space recovered above. */
.planner-map-stage{position:relative;isolation:isolate;width:100%;border-radius:11px;overflow:hidden}
body.planner-page #map{height:clamp(500px,64vh,880px)!important;border-radius:11px}
.map-fullscreen-button{
  position:absolute;top:10px;right:52px;z-index:10020!important;display:inline-flex;align-items:center;gap:6px;
  min-height:36px;margin:0!important;padding:7px 11px!important;border:1px solid rgba(255,255,255,.42)!important;
  border-radius:8px!important;background:rgba(7,24,38,.94)!important;color:#fff!important;
  box-shadow:0 4px 16px rgba(0,0,0,.35);backdrop-filter:blur(8px);font-size:11px!important
}
.map-fullscreen-button:hover{background:#123d58!important;border-color:#72d7ff!important}
.map-fullscreen-icon{font-size:18px;line-height:1}.map-fullscreen-label{font-weight:800}

/* Native Fullscreen API and a fixed-position fallback use the same geometry. */
.planner-map-stage:fullscreen,.planner-map-stage.is-map-fullscreen{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:2147483000!important;
  border-radius:0!important;background:#06111b!important;overflow:hidden!important
}
.planner-map-stage:fullscreen #map,.planner-map-stage.is-map-fullscreen #map{width:100%!important;height:100%!important;border:0!important;border-radius:0!important}
.planner-map-stage:fullscreen .map-fullscreen-button,.planner-map-stage.is-map-fullscreen .map-fullscreen-button{top:14px;right:58px}
body.map-fullscreen-fallback{overflow:hidden!important}

/* Tablet/mobile: keep controls compact, horizontally scrollable, and avoid
   stealing the first screen from the map. */
@media(max-width:1100px){
 body.planner-page .chart-toolbar{grid-template-columns:minmax(130px,.65fr) minmax(155px,.8fr) 1fr auto}
 body.planner-page .chart-toolbar .button-link{display:none}
 body.planner-page #map{height:clamp(470px,62vh,760px)!important}
}
@media(max-width:760px){
 body.planner-page>header{height:34px!important;min-height:34px;padding:4px 10px!important}
 body.planner-page>header .eyebrow,body.planner-page>header .status a{display:none}
 body.planner-page>header h1{font-size:11px!important}
 body.planner-page>header .status{font-size:9px}
 body.planner-page .workspace{padding:7px 8px 10px!important}
 body.planner-page .tabs{margin-inline:0!important;padding-inline:0!important}
 body.planner-page .metrics{display:flex!important;overflow-x:auto;gap:6px!important;scroll-snap-type:x proximity}
 body.planner-page .metrics article{flex:0 0 132px;min-height:62px;scroll-snap-align:start}
 body.planner-page .metrics strong{font-size:18px!important}
 body.planner-page .chart-toolbar{display:flex!important;overflow-x:auto;align-items:center!important;gap:6px!important;padding:6px 7px!important}
 body.planner-page .chart-toolbar>div:first-child{flex:0 0 auto}
 body.planner-page .chart-toolbar label{flex:0 0 180px}
 body.planner-page .chart-toolbar .opacity-control{flex-basis:160px}
 body.planner-page .chart-status{display:none}
 body.planner-page .overview-traffic-bar{display:block!important;padding:6px 7px!important}
 body.planner-page .overview-traffic-main{margin-bottom:5px}
 body.planner-page .overview-traffic-actions{width:100%;justify-content:flex-start!important}
 body.planner-page #map{height:max(54vh,430px)!important}
 .map-fullscreen-button{top:8px;right:47px;padding:6px 8px!important;min-height:34px}
 .map-fullscreen-label{display:none}
}
@media(max-width:480px){
 body.planner-page .metrics article{flex-basis:116px;padding:7px 8px!important}
 body.planner-page .overview-traffic-main small{max-width:calc(100vw - 58px)!important}
 body.planner-page #map{height:max(52vh,390px)!important}
}


/* Fullscreen traffic control overlay. The live controls are moved into the map
   stage while fullscreen is active, so the same wired controls remain usable. */
.planner-map-stage:fullscreen .overview-traffic-bar,
.planner-map-stage.is-map-fullscreen .overview-traffic-bar{
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  right:154px!important;
  width:auto!important;
  max-width:none!important;
  min-height:42px!important;
  margin:0!important;
  padding:6px 8px!important;
  z-index:2147483200!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid rgba(114,215,255,.5)!important;
  border-radius:10px!important;
  background:rgba(4,20,32,.94)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  overflow:visible!important;
}
.planner-map-stage:fullscreen .overview-traffic-main,
.planner-map-stage.is-map-fullscreen .overview-traffic-main{
  min-width:180px!important;
  max-width:280px!important;
  margin:0!important;
  flex:0 1 240px!important;
}
.planner-map-stage:fullscreen .overview-traffic-main strong,
.planner-map-stage.is-map-fullscreen .overview-traffic-main strong{font-size:11px!important;white-space:nowrap}
.planner-map-stage:fullscreen .overview-traffic-main small,
.planner-map-stage.is-map-fullscreen .overview-traffic-main small{
  display:block!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.planner-map-stage:fullscreen .overview-traffic-actions,
.planner-map-stage.is-map-fullscreen .overview-traffic-actions{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:end!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 2px 2px 0!important;
  scrollbar-width:thin;
}
.planner-map-stage:fullscreen .overview-traffic-actions label,
.planner-map-stage.is-map-fullscreen .overview-traffic-actions label{font-size:8px!important;flex:0 0 auto!important;margin:0!important}
.planner-map-stage:fullscreen .overview-traffic-actions select,
.planner-map-stage.is-map-fullscreen .overview-traffic-actions select{
  min-height:28px!important;padding:4px 24px 4px 7px!important;font-size:10px!important;max-width:250px!important
}
.planner-map-stage:fullscreen .overview-traffic-actions button,
.planner-map-stage.is-map-fullscreen .overview-traffic-actions button{
  min-height:28px!important;padding:5px 8px!important;font-size:9px!important;white-space:nowrap!important;flex:0 0 auto!important
}
.planner-map-stage:fullscreen .traffic-check.compact,
.planner-map-stage.is-map-fullscreen .traffic-check.compact{
  min-height:28px!important;padding:4px 6px!important;font-size:9px!important;white-space:nowrap!important
}
.planner-map-stage:fullscreen .map-fullscreen-button,
.planner-map-stage.is-map-fullscreen .map-fullscreen-button{z-index:2147483300!important}

@media(max-width:900px){
  .planner-map-stage:fullscreen .overview-traffic-bar,
  .planner-map-stage.is-map-fullscreen .overview-traffic-bar{
    top:8px!important;left:8px!important;right:54px!important;padding:5px 6px!important;display:block!important;max-height:92px!important
  }
  .planner-map-stage:fullscreen .overview-traffic-main,
  .planner-map-stage.is-map-fullscreen .overview-traffic-main{display:none!important}
  .planner-map-stage:fullscreen .overview-traffic-actions,
  .planner-map-stage.is-map-fullscreen .overview-traffic-actions{width:100%!important;align-items:center!important}
  .planner-map-stage:fullscreen .map-fullscreen-button,
  .planner-map-stage.is-map-fullscreen .map-fullscreen-button{top:8px!important;right:8px!important}
}
@media(max-width:520px){
  .planner-map-stage:fullscreen .overview-traffic-bar,
  .planner-map-stage.is-map-fullscreen .overview-traffic-bar{right:48px!important;border-radius:8px!important}
  .planner-map-stage:fullscreen .overview-traffic-actions select,
  .planner-map-stage.is-map-fullscreen .overview-traffic-actions select{max-width:190px!important}
}


/* Release 1.4F: keep selected-aircraft drawer below fullscreen controls. */
.planner-map-stage:fullscreen .atl-traffic-detail-overlay,
.planner-map-stage.is-map-fullscreen .atl-traffic-detail-overlay{
  z-index:2147483100!important;
}
.planner-map-stage:fullscreen .atl-traffic-detail-card,
.planner-map-stage.is-map-fullscreen .atl-traffic-detail-card{
  scroll-margin-top:74px;
}