/*
 * TrueGIS main-map toolbar.
 *
 * This file owns the toolbar layout and the visible search, Search, Locate Me,
 * Basemap, Layers, Apps and Clear control styling. The five action columns are
 * equal fractions, while each control stretches to the tallest item in its row.
 */

.map-toolbar{
  --tg-toolbar-radius:9px;
  --tg-toolbar-gap:7px;
  --tg-toolbar-font-size:13px;
  box-sizing:border-box;
  width:95vw;
  max-width:1200px;
  margin:4px auto 6px;
  padding:0;
}

.map-toolbar,
.map-toolbar *{box-sizing:border-box}

.map-toolbar .control-top{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  align-items:stretch;
}

.map-toolbar .search-input-wrap{
  position:relative;
  display:flex;
  align-items:stretch;
  min-width:0;
}

.map-toolbar #searchInput{
  display:block;
  flex:1 1 auto;
  align-self:stretch;
  width:100%;
  min-width:0;
  max-width:none;
  height:auto;
  margin:0;
  padding:6px 68px 6px 12px;
  border:1px solid var(--panel-border,#333);
  border-radius:var(--tg-toolbar-radius);
  background:var(--panel,#1c1d1d);
  color:var(--text,#fff);
  font:inherit;
  font-size:var(--tg-toolbar-font-size);
  line-height:1.2;
  outline:none;
}

.map-toolbar #searchInput:focus{
  border-color:rgba(133,255,76,.62);
  box-shadow:0 0 0 2px rgba(133,255,76,.10);
}

.map-toolbar .basemap-control,
.map-toolbar .map-layer-list-host,
.map-toolbar .tg-app-launcher{
  position:relative;
  display:flex;
  align-items:stretch;
  align-self:stretch;
  min-width:0;
  margin:0;
  padding:0;
}

/*
 * The Layers UI is generated at runtime and contains an extra wrapper. Keep
 * every wrapper inside the Layers grid track so it cannot consume the shared
 * gap before Apps.
 */
.map-toolbar #mapLayerListHost,
.map-toolbar #mapLayerListHost>*{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

/*
 * No individual button height is set here. Direct grid buttons stretch to the
 * row height; wrapped buttons stretch through their flex parent. Consequently,
 * Apps cannot end up shorter than Search, Locate Me, Basemap or Layers.
 */
.map-toolbar #searchBtn,
.map-toolbar #locateBtn,
.map-toolbar #basemapBtn,
.map-toolbar #mapLayerListHost>button,
.map-toolbar #mapLayerListHost>* > button:first-child,
.map-toolbar #mapLayerListHost .tg-map-layer-list__btn,
.map-toolbar #tgAppsButton{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto;
  margin:0;
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--tg-toolbar-radius);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font:inherit;
  font-size:var(--tg-toolbar-font-size);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transform:none;
}

.map-toolbar .basemap-control>#basemapBtn,
.map-toolbar #mapLayerListHost>button,
.map-toolbar #mapLayerListHost>* > button:first-child,
.map-toolbar #mapLayerListHost .tg-map-layer-list__btn,
.map-toolbar .tg-app-launcher>#tgAppsButton{
  flex:1 1 0!important;
}

.map-toolbar #searchBtn:hover,
.map-toolbar #locateBtn:hover,
.map-toolbar #basemapBtn:hover,
.map-toolbar #mapLayerListHost>button:hover,
.map-toolbar #mapLayerListHost>* > button:first-child:hover,
.map-toolbar #mapLayerListHost .tg-map-layer-list__btn:hover,
.map-toolbar #tgAppsButton:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}

.map-toolbar #searchBtn:active,
.map-toolbar #locateBtn:active,
.map-toolbar #basemapBtn:active,
.map-toolbar #mapLayerListHost>button:active,
.map-toolbar #mapLayerListHost>* > button:first-child:active,
.map-toolbar #mapLayerListHost .tg-map-layer-list__btn:active,
.map-toolbar #tgAppsButton:active{transform:translateY(1px)}

.map-toolbar #searchBtn:disabled,
.map-toolbar #locateBtn:disabled,
.map-toolbar #basemapBtn:disabled,
.map-toolbar #mapLayerListHost>button:disabled,
.map-toolbar #mapLayerListHost>* > button:first-child:disabled,
.map-toolbar #mapLayerListHost .tg-map-layer-list__btn:disabled,
.map-toolbar #tgAppsButton:disabled{opacity:.55;cursor:not-allowed}

/* Clear is deliberately smaller than the search field and stays inside it. */
.map-toolbar .search-input-wrap>#clearSearchBtn{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  right:7px;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  max-width:none;
  height:28px;
  min-height:28px;
  margin:0;
  padding:3px 9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  font:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.map-toolbar .search-input-wrap>#clearSearchBtn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}

.map-toolbar .search-input-wrap>#clearSearchBtn:disabled{display:none}

/* Hide the original sibling position during the synchronous DOM placement pass. */
.map-toolbar .control-top>#clearSearchBtn{display:none!important}

.tg-app-launcher__panel{
  position:absolute;
  z-index:5000;
  top:calc(100% + 7px);
  right:0;
  width:min(390px,calc(100vw - 24px));
  max-height:430px;
  overflow-y:auto;
  padding:7px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(14,17,14,.98);
  box-shadow:0 18px 45px rgba(0,0,0,.5);
}

.tg-app-launcher__link{display:block;padding:10px 11px;border-radius:10px;color:#f5f7f5;text-decoration:none}
.tg-app-launcher__link+.tg-app-launcher__link{border-top:1px solid rgba(255,255,255,.07)}
.tg-app-launcher__link:hover,.tg-app-launcher__link:focus-visible{background:rgba(133,255,76,.11);outline:none}
.tg-app-launcher__link strong{display:block;font-size:.9rem}
.tg-app-launcher__link span{display:block;margin-top:2px;color:#b8c2b8;font-size:.76rem;line-height:1.35}

/*
 * Desktop: the search field takes six shares and each action takes one.
 * All five action widths therefore grow and shrink together; the search field
 * automatically gives up or receives the remaining width.
 */
@media (min-width:921px){
  .map-toolbar .control-top{
    display:grid;
    grid-template-columns:minmax(240px,6fr) repeat(5,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:var(--tg-toolbar-gap);
  }

  .map-toolbar .search-input-wrap,
  .map-toolbar #searchBtn,
  .map-toolbar #locateBtn,
  .map-toolbar .basemap-control,
  .map-toolbar .map-layer-list-host,
  .map-toolbar .tg-app-launcher{
    width:100%;
    min-width:0;
    max-width:none;
  }
}

/* Tablet: search on its own row, then five equal action columns. */
@media (min-width:701px) and (max-width:920px){
  .map-toolbar{
    width:calc(100vw - 24px);
    max-width:1200px;
    margin:6px auto 8px;
  }

  .map-toolbar .control-top{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }

  .map-toolbar .search-input-wrap{grid-column:1/-1}
  .map-toolbar #searchBtn,
  .map-toolbar #locateBtn,
  .map-toolbar .basemap-control,
  .map-toolbar .map-layer-list-host,
  .map-toolbar .tg-app-launcher{width:100%;min-width:0}
}

/* Mobile: Clear remains inside search; actions use two balanced rows. */
@media (max-width:700px){
  .map-toolbar{
    --tg-toolbar-radius:11px;
    --tg-toolbar-font-size:14px;
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    margin:6px auto 10px;
  }

  .map-toolbar .control-top{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
  }

  .map-toolbar .search-input-wrap{grid-column:1/-1;grid-row:1;width:100%;min-width:0}
  .map-toolbar #searchBtn{grid-column:1/4;grid-row:2}
  .map-toolbar #locateBtn{grid-column:4/7;grid-row:2}
  .map-toolbar .basemap-control{grid-column:1/3;grid-row:3}
  .map-toolbar .map-layer-list-host{grid-column:3/5;grid-row:3}
  .map-toolbar .tg-app-launcher{grid-column:5/7;grid-row:3}

  .map-toolbar #searchBtn,
  .map-toolbar #locateBtn,
  .map-toolbar .basemap-control,
  .map-toolbar .map-layer-list-host,
  .map-toolbar .tg-app-launcher{width:100%;min-width:0}

  .map-toolbar #searchInput{
    min-height:46px;
    padding:9px 68px 9px 13px;
    font-size:15px;
  }

  .map-toolbar .search-input-wrap>#clearSearchBtn{
    right:7px;
    height:30px;
    min-height:30px;
    padding:4px 9px;
    border-radius:8px;
    font-size:12px;
  }

  /* Keep mobile dropdowns attached to the toolbar, directly below its button
   * rows, rather than turning them into bottom sheets. The wrapper controls
   * become transparent positioning containers and the toolbar grid is the
   * shared anchor for all three menus. */
  .map-toolbar .control-top{position:relative}
  .map-toolbar .basemap-control,
  .map-toolbar .map-layer-list-host,
  .map-toolbar .tg-map-layer-list,
  .map-toolbar .tg-app-launcher{position:static}

  .map-toolbar .layers-panel,
  .map-toolbar .tg-app-launcher__panel,
  .map-toolbar .map-layer-list-host [role=dialog],
  .map-toolbar .map-layer-list-host [class*=panel]{
    position:absolute;
    inset:calc(100% + 8px) 0 auto 0;
    width:auto;
    max-width:none;
    max-height:min(56dvh,430px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:10000;
    margin:0;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
  }

  .map-toolbar .layers-panel{padding:8px}
  .map-toolbar .layers-panel__row{min-height:42px;padding:9px 12px;font-size:14px;line-height:1.2;text-align:left}
}

@media (max-width:390px){
  .map-toolbar{--tg-toolbar-font-size:13px}
  .map-toolbar #searchInput{font-size:14px}
}

/* Attribute-toolbar request: Export is a full row directly below Address. */
.attr-commandbar{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
.attr-commandbar__group--export{justify-content:flex-start!important}