/******************************************************************************/
/* Tabs — outer (Workspace/Help) and inner (Templates/Brand assets/...)      */
/******************************************************************************/

.top-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.top-tab {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 8px 4px;
  margin-right: 16px;
  border-bottom: 2px solid transparent;
}
.top-tab:hover { background: transparent; color: var(--brand); }
.top-tab[aria-selected="true"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.top-tab-panel.hidden { display: none; }

/* --------------------------- Library switcher ------------------------------ */
/* The workspace's primary organizational unit, above the Templates/Brand   */
/* assets/Content blocks tabs — see librarySwitcher.js.                     */
.library-switcher { margin-bottom: 10px; }
.library-switcher.hidden { display: none; }

.library-switcher__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--brand-verylight);
  color: var(--brand-dark);
  border: 1px solid var(--brand-light);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.library-switcher__trigger:hover { background: var(--brand-light); }
.library-switcher__icon { color: var(--brand); flex: 0 0 auto; font-size: 13px; }
.library-switcher__label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.library-switcher__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-switcher__count {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 11px;
}
.library-switcher__chevron { flex: 0 0 auto; color: var(--ink-muted); font-size: 11px; }

.library-switcher__popover {
  /* position: fixed, and top/left set inline by portalPopover.js from the
     trigger's own getBoundingClientRect() — see assetBrowser.js's Display
     options popover for the same pattern this one is shared with. */
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - 8px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 1100; /* above the modal overlay (z-index: 1000) too */
}
.library-switcher__popover--open { display: flex; }
.library-switcher__option {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.library-switcher__option:hover { background: var(--brand-verylight); color: var(--brand-dark); }
.library-switcher__option--active { color: var(--brand); font-weight: 700; }
.library-switcher__option-icon { font-size: 8px; color: var(--ink-muted); flex: 0 0 auto; }
.library-switcher__option--active .library-switcher__option-icon { color: var(--brand); }
.library-switcher__option-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-switcher__option-count { flex: 0 0 auto; color: var(--ink-muted); font-size: 11px; }

.workspace-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.workspace-tab {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 4px;
  margin-right: 18px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.workspace-tab:hover { background: transparent; color: var(--brand); }
.workspace-tab--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.workspace-panel.hidden { display: none; }
.tab-panel-inner { padding-top: 2px; }

.hint-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-verylight);
  color: var(--brand-dark);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 10px;
}