/* Compact, shared geometry for the global navigation and asset view toolbar. */
:root {
  --nav-height: 64px;
  --subnav-height: 48px;
}

.topbar {
  margin: 0;
  grid-template-columns: 240px minmax(0, 1fr) 276px;
  grid-template-rows: var(--nav-height);
}

.topbar .brand {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding-inline: 24px;
}

.topbar .brand-mark {
  width: 40px;
  height: 40px;
}

.topbar .brand-mark::before,
.topbar .brand-mark::after {
  inset-block: 5px;
  width: 19px;
}

.topbar .brand-mark::before { left: 2px; }
.topbar .brand-mark::after { right: 1px; left: auto; }
.topbar .brand-copy { gap: 2px; }
.topbar .brand-name { font-size: 17px; line-height: 22px; letter-spacing: 0; }
.topbar .product-name { font-size: 10px; line-height: 14px; letter-spacing: 0.08em; }

.topbar .nav-link {
  min-width: 104px;
  padding-inline: 20px;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.topbar .nav-link::after { right: 20px; bottom: 0; left: 20px; }
.topbar .nav-count { font-size: 11px; }
.topbar .nav-count[data-stat="totalSkills"] { min-width: 24px; }

html[data-theme] .topbar > .sidebar-footer {
  width: auto;
  min-width: 0;
  align-items: center;
  gap: 0;
}

html[data-theme] .topbar > .sidebar-footer > .theme-toggle.theme-toggle-global {
  width: 56px;
  min-width: 56px;
  height: var(--nav-height);
}

html[data-theme] .topbar > .sidebar-footer > .theme-toggle.theme-toggle-global::before {
  box-shadow: none;
}

.topbar .user-menu {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  min-width: 0;
  height: var(--nav-height);
  padding-inline: 14px 16px;
  gap: 10px;
  text-align: left;
}

.topbar .user-menu .avatar { width: 32px; height: 32px; font-size: 12px; }
.topbar .user-copy { display: grid; min-width: 0; gap: 2px; }
.topbar .user-copy strong { font-size: 13px; line-height: 18px; }
.topbar .user-copy small { font-size: 11px; line-height: 16px; letter-spacing: 0; }
.topbar .user-menu > .ui-icon { width: 14px; height: 14px; }

.workspace .workspace-header {
  min-height: var(--subnav-height);
  height: var(--subnav-height);
  padding-inline: 32px;
}

.workspace .workspace-title h1 {
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.workspace .view-switch > .view-tab {
  height: var(--subnav-height);
  min-height: var(--subnav-height);
  gap: 7px;
  padding-inline: 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
}

.workspace .view-tab::after { right: 18px; bottom: 0; left: 18px; }
.workspace .view-tab > .ui-icon { width: 16px; height: 16px; }
.workspace .view-tab .view-count { font-size: 11px; line-height: 16px; }

.workspace .workspace-actions .upload-button {
  height: 34px;
  min-height: 34px;
  padding-inline: 12px;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
}

.workspace .upload-button > .ui-icon { width: 16px; height: 16px; }
.workspace.page-assets .workspace-content { padding-top: 32px; }

/* Keep inversion legible and borders continuous, without large hover shadows. */
html[data-theme] .topbar .nav-link:is(:hover, :focus-visible),
html[data-theme] .topbar .user-menu:is(:hover, :focus-visible),
html[data-theme] .workspace .view-switch > .view-tab:is(:hover, :focus-visible) {
  border-color: var(--border) !important;
  box-shadow: none !important;
}

html[data-theme] .topbar .nav-link:not(.active):is(:hover, :focus-visible) .nav-count,
html[data-theme] .topbar .nav-link:not(.active):is(:hover, :focus-visible) .nav-count::before,
html[data-theme] .workspace .view-tab:not(.active):is(:hover, :focus-visible) .view-count {
  color: var(--hux-interactive-inverse-text) !important;
}

html[data-theme] .workspace .workspace-actions .upload-button:is(:hover, :focus-visible),
html[data-theme] .workspace .workspace-actions .upload-button:is(:hover, :focus-visible) .ui-icon {
  color: var(--hux-interactive-inverse-text) !important;
}

@media (max-width: 1100px) and (min-width: 721px) {
  .topbar { grid-template-columns: 210px minmax(0, 1fr) 108px; }
  html[data-theme] .topbar .user-menu {
    display: grid;
    grid-template-columns: 1fr;
    width: 52px;
    padding: 0;
    place-items: center;
  }
  .topbar .user-copy,
  .topbar .user-menu > .ui-icon { display: none; }
  .workspace.page-assets .workspace-title { display: none; }
  .workspace.page-assets .workspace-header { grid-template-columns: minmax(0, 1fr) auto; }
  .workspace.page-assets .view-switch { justify-self: start; }
  .workspace.page-assets .workspace-actions { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --nav-height: 56px; --subnav-height: 48px; }
  body { min-width: 0; }
  .topbar { grid-template-columns: 130px minmax(0, 1fr) 44px; }
  .topbar .brand { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding-inline: 10px; }
  .topbar .brand-mark { width: 28px; height: 28px; }
  .topbar .brand-mark::before,
  .topbar .brand-mark::after { inset-block: 4px; width: 13px; }
  .topbar .brand-mark::before { left: 1px; }
  .topbar .brand-mark::after { right: 0; }
  .topbar .brand-name { font-size: 12px; line-height: 18px; }
  .topbar .nav-link { min-width: 50%; padding-inline: 8px; gap: 5px; font-size: 12px; }
  .topbar .nav-link::after { right: 12px; left: 12px; }
  .topbar .nav-count[data-stat="totalSkills"] { min-width: 20px; font-size: 10px; }
  .topbar .user-menu { width: 44px; padding: 0; grid-template-columns: 1fr; place-items: center; }
  .topbar .user-menu .avatar { width: 28px; height: 28px; }
  .topbar .user-copy,
  .topbar .user-menu > .ui-icon { display: none; }
  .workspace .workspace-header { padding-inline: 12px; }
  .workspace .view-switch { min-width: 0; }
  .workspace .view-switch > .view-tab { min-width: 0; gap: 4px; padding-inline: 6px; font-size: 12px; }
  .workspace .view-tab > .ui-icon { display: none; }
  .workspace .view-tab::after { left: 9px; right: 9px; }
  .workspace .workspace-actions { gap: 6px; }
  .workspace .workspace-actions .upload-button { width: 34px; padding: 0; justify-content: center; }
  .workspace .upload-button-label { display: none; }
  .workspace.page-assets .workspace-content { padding-top: 20px; }
}