/* =========================================================
   Topbar
   ========================================================= */

.app-topbar {
  position: sticky;

  top: 0;

  z-index: 35;

  height: var(--topbar-height);
  min-height: var(--topbar-height);

  padding-inline: 30px;

  border-bottom:
    1px solid
    var(--border-subtle);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-4);

  background:
    rgba(255, 255, 255, .92);

  backdrop-filter:
    blur(14px);
}


/* ---------------------------------------------------------
   Título
   --------------------------------------------------------- */

.topbar-title {
  min-width: 0;

  margin-right: auto;

  display: grid;

  gap: 1px;
}

.topbar-title b {
  color: var(--text-primary);

  font-size: 14px;
  font-weight: 750;
}

.topbar-title span {
  color: var(--text-secondary);

  font-size: 11px;
}


/* ---------------------------------------------------------
   Ações
   --------------------------------------------------------- */

.topbar-actions {
  display: flex;
  align-items: center;

  gap: var(--space-2);
}

.top-action {
  min-height: 40px;

  padding-inline: 13px;

  border:
    1px solid
    var(--border-default);

  border-radius: var(--radius-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  color: var(--text-primary);

  background: var(--surface-card);

  font-size: 13px;
  font-weight: 750;

  text-decoration: none;

  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.top-action:hover {
  color: var(--text-primary);

  background: var(--surface-subtle);

  border-color: var(--border-strong);

  text-decoration: none;
}

.top-action.strong {
  color: var(--text-inverse);

  background: var(--brand-900);

  border-color: var(--brand-900);
}

.top-action.strong:hover {
  color: var(--text-inverse);

  background: var(--brand-800);

  border-color: var(--brand-800);
}


/* ---------------------------------------------------------
   Ambiente atual
   --------------------------------------------------------- */

.workspace-switcher {
  min-height: 44px;

  padding:
    5px
    11px;

  border:
    1px solid
    var(--border-default);

  border-radius: var(--radius-md);

  display: flex;
  align-items: center;

  gap: 9px;

  background: var(--surface-card);
}

.workspace-switcher-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  border-radius: var(--radius-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--brand-600);

  background: var(--brand-100);
}

.workspace-switcher-content {
  min-width: 135px;

  display: grid;

  gap: 0;
}

.workspace-switcher-label {
  color: var(--text-tertiary);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .09em;

  text-transform: uppercase;
}

.workspace-switcher form {
  margin: 0;
}

.workspace-switcher-current,
.workspace-switcher-select {
  color: var(--text-primary);

  font-size: 13px;
  font-weight: 750;
}

.workspace-switcher-current {
  margin-top: 3px;

  line-height: 1.2;
}

.workspace-switcher-select {
  width: 100%;
  min-width: 145px;

  margin: 0;

  padding:
    0
    24px
    0
    0;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.workspace-switcher-select:focus {
  box-shadow: none;
}


/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 680px) {

  .app-topbar {
    padding-inline: 10px;

    gap: 8px;
  }


  .topbar-title {
    display: none;
  }


  .topbar-actions {
    min-width: 0;

    flex: 1 1 auto;

    margin-left: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
  }


  /*
   * Importar e Lançar já estão disponíveis
   * na navegação inferior do mobile.
   *
   * Evitamos duplicação e, principalmente,
   * overflow horizontal em telas de 360 px.
   */
  .topbar-actions > a.top-action {
    display: none;
  }


  .workspace-switcher {
    min-width: 0;
    max-width: 170px;

    flex: 1 1 150px;

    padding:
      5px
      8px;

    gap: 7px;
  }


  .workspace-switcher-icon {
    width: 28px;
    height: 28px;

    flex-basis: 28px;
  }


  .workspace-switcher-content {
    min-width: 0;

    flex: 1 1 auto;

    overflow: hidden;
  }


  .workspace-switcher-label {
    display: none;
  }


  .workspace-switcher form {
    min-width: 0;

    width: 100%;
  }


  .workspace-switcher-current {
    display: block;

    margin-top: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .workspace-switcher-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    padding-right: 20px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /*
   * No mobile, o único top-action que permanece
   * potencialmente visível é Instalar app.
   */
  .top-action {
    width: 40px;
    min-width: 40px;
    min-height: 40px;

    flex: 0 0 40px;

    padding-inline: 0;
  }


  .top-action span {
    display: none;
  }

}