/* Topbar do painel do mestre: navegação em dropdown e menu do avatar.
   Estilo escuro próprio, sem depender de Tailwind para os estados abertos. */

.dash-topbar {
    --tb-panel: #0b0e15;
    --tb-panel-line: rgba(255, 255, 255, 0.1);
    --tb-text: #a3a3a3;
    --tb-text-hi: #ffffff;
    --tb-gold: #8fb4d9;
    --tb-gold-soft: rgba(143, 180, 217, 0.12);
    --tb-hover: rgba(255, 255, 255, 0.05);
}

.dash-topbar__nav,
.dash-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-topbar__actions {
    margin-left: auto;
}

/* Topbar ocupa a largura toda; a barra lateral começa logo abaixo dela */
.dash-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
}

/* Topbar encosta nas bordas da tela: menos respiro lateral, perfil rente à direita */
.dash-topbar.dash-topbar {
    padding-left: 1rem;
    padding-right: 0;
}

/* account-dashboard.css força padding com !important em "header > div"; zera só o lado direito */
.dash-topbar.dash-topbar > div:last-child {
    padding-right: 0 !important;
}

.dash-topbar .dash-topbar__profile-btn {
    padding-right: 0;
}

@media (min-width: 1024px) {
    #dash-sidebar {
        position: sticky;
        top: 4rem;
        height: calc(100vh - 4rem);
        overflow-y: auto;
    }
}

/* Marca à esquerda do topo: logo, nome do painel e badge de host */
.dash-topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.dash-topbar__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.dash-topbar__logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.dash-topbar__wordmark {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dash-topbar__wordmark-name {
    font: 800 0.8rem/1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.2em;
    color: var(--tb-text-hi);
}

.dash-topbar__wordmark-sub {
    font: 500 0.55rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tb-gold);
}

.dash-topbar__host {
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    font: 700 0.55rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tb-gold);
    border: 1px solid rgba(143, 180, 217, 0.3);
    background: var(--tb-gold-soft);
}

/* Título da página não aparece no topo (o logo ocupa a ponta esquerda); fica para leitores de tela */
.dash-topbar__page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Ícones do header em tom neutro: o único destaque é o dourado do estado ativo/hover */
.dash-topbar i.text-amber-400,
.dash-topbar i.text-emerald-400,
.dash-topbar i.text-sky-400,
.dash-topbar i.text-indigo-400 {
    color: var(--tb-text);
}

.dash-topbar__trigger:hover i,
.dash-topbar__item:hover i,
.dash-topbar__item:focus-visible i {
    color: var(--tb-gold);
}

@media (max-width: 1439px) {
    .dash-topbar__nav {
        gap: 0.125rem;
    }

    .dash-topbar__trigger {
        padding: 0 0.5rem;
    }
}

@media (max-width: 1439px) {
    .dash-topbar__actions > a.studio-btn-secondary span {
        display: none;
    }

    .dash-topbar__actions > a.studio-btn-secondary {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
    }
}

.dash-topbar__menu {
    position: relative;
}

.dash-topbar__trigger,
.dash-topbar__icon-btn,
.dash-topbar__avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tb-text);
    font: 600 0.7rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.dash-topbar__trigger:hover,
.dash-topbar__trigger[aria-expanded="true"] {
    color: var(--tb-text-hi);
    background: var(--tb-hover);
}

.dash-topbar__trigger .dash-topbar__chevron {
    font-size: 0.6rem;
    opacity: 0.6;
    transition: transform 0.2s;
}

.dash-topbar__trigger[aria-expanded="true"] .dash-topbar__chevron {
    transform: rotate(180deg);
}

/* Botões redondos coloridos, como no modelo de referência */
.dash-topbar__icon-btn {
    width: 2.25rem;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    position: relative;
}

.dash-topbar__icon-btn--amber { background: rgba(143, 180, 217, 0.12); color: #8fb4d9; }
.dash-topbar__icon-btn--indigo { background: rgba(129, 140, 248, 0.12); color: #a5b4fc; }
.dash-topbar__icon-btn--emerald { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }

.dash-topbar__icon-btn:hover {
    filter: brightness(1.25);
}

.dash-topbar__avatar-btn {
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    height: auto;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}

.dash-topbar__avatar-btn img {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(143, 180, 217, 0.4);
}

.dash-topbar__avatar-btn:hover,
.dash-topbar__avatar-btn[aria-expanded="true"] {
    border-color: rgba(143, 180, 217, 0.45);
    background: var(--tb-hover);
}

/* Uma cor só: dourado no cargo e no avatar. Sem vermelho, azul ou verde no topo */
.dash-topbar .dash-access-badge,
.dash-topbar .dash-access-badge--admin,
.dash-topbar .dash-access-badge--partner {
    color: var(--tb-gold);
    background: var(--tb-gold-soft);
    border-color: rgba(143, 180, 217, 0.3);
}

.dash-topbar .dash-topbar__avatar {
    border-color: rgba(143, 180, 217, 0.35);
}

.dash-topbar .dash-topbar__badge {
    color: var(--tb-gold);
}

/* Perfil no topo: nome e cargo à esquerda do avatar, como no modelo */
.dash-topbar__profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tb-text);
    cursor: pointer;
    transition: background-color 0.15s;
}

.dash-topbar__profile-btn:hover,
.dash-topbar__profile-btn[aria-expanded="true"] {
    background: var(--tb-hover);
}

.dash-topbar__who {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
    min-width: 0;
}

.dash-topbar__who-name {
    font: 700 0.78rem/1.1 'Inter', system-ui, sans-serif;
    color: var(--tb-text-hi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.dash-topbar__who-role {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.dash-topbar__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dash-topbar__profile-btn .dash-topbar__chevron {
    font-size: 0.6rem;
    opacity: 0.6;
    transition: transform 0.2s;
}

.dash-topbar__profile-btn[aria-expanded="true"] .dash-topbar__chevron {
    transform: rotate(180deg);
}

.dash-topbar__panel--profile {
    min-width: 16rem;
}

.dash-topbar__panel--profile > .dash-topbar__profile-email {
    padding: 0.5rem 0.6rem 0;
    margin: 0;
}

.dash-topbar__panel--profile > .dash-topbar__profile-badges {
    padding: 0.4rem 0.6rem 0.6rem;
    margin: 0;
    border-bottom: 0;
}

@media (max-width: 639px) {
    .dash-topbar__who {
        display: none;
    }
}

.dash-topbar__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 50;
    min-width: 15rem;
    padding: 0.5rem;
    background: var(--tb-panel);
    border: 1px solid var(--tb-panel-line);
    border-radius: 0.75rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    animation: dash-topbar-drop 0.18s ease-out;
}

.dash-topbar__panel[hidden] {
    display: none;
}

.dash-topbar__panel-label {
    padding: 0.5rem 0.6rem 0.35rem;
    font: 600 0.6rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #737373;
}

.dash-topbar__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tb-text);
    font: 500 0.8rem/1.2 'Inter', system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dash-topbar__item i {
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
}

.dash-topbar__item:hover,
.dash-topbar__item:focus-visible {
    color: var(--tb-text-hi);
    background: var(--tb-hover);
    outline: none;
}

.dash-topbar__item--danger:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

.dash-topbar__profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--tb-panel-line);
}

.dash-topbar__profile img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid rgba(143, 180, 217, 0.4);
}

.dash-topbar__profile-name {
    font: 700 0.8rem/1.2 'Inter', system-ui, sans-serif;
    color: var(--tb-text-hi);
    text-transform: uppercase;
}

.dash-topbar__profile-email {
    margin-top: 0.15rem;
    font: 400 0.65rem/1.2 'JetBrains Mono', ui-monospace, monospace;
    color: #737373;
    word-break: break-all;
}

.dash-topbar__profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.dash-topbar__badge {
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font: 700 0.55rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--tb-gold-soft);
    color: var(--tb-gold);
    border: 1px solid rgba(143, 180, 217, 0.3);
}

.dash-topbar__badge:empty {
    display: none;
}

.dash-topbar__divider {
    height: 1px;
    margin: 0.35rem 0.4rem;
    background: var(--tb-panel-line);
}

/* Em telas pequenas, o menu da barra some e o da barra lateral assume */
@media (max-width: 767px) {
    .dash-topbar__menu--desktop {
        display: none;
    }
}

@keyframes dash-topbar-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-topbar__panel {
        animation: none;
    }
}

/* Estado ativo da barra lateral: o mesmo acento frio, sem âmbar */
.dash-nav-item .text-amber-400,
.dash-nav-item.text-amber-400 {
    color: #8fb4d9 !important;
}

.dash-nav-item.border-amber-400 {
    border-left-color: #8fb4d9;
}

/* Fundo preto e conteúdo sem tons quentes. Acento frio só no que é ativo ou principal */
body.account-dashboard,
#dash-workspace,
#dash-sidebar {
    background-color: #000000 !important;
    background-image: none !important;
}

#dash-workspace .bg-grid-pattern,
#dash-workspace main {
    background-image: none !important;
}

#dash-workspace .bg-amber-500\/10,
#dash-workspace .bg-amber-400\/10,
#dash-workspace .bg-amber-400\/15 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#dash-workspace .border-amber-500\/30,
#dash-workspace .border-amber-400\/30,
#dash-workspace .border-amber-400\/40 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#dash-workspace .bg-amber-500,
#dash-workspace .bg-amber-400 {
    background-color: #8fb4d9 !important;
    color: #000000 !important;
}

#dash-workspace .text-amber-400,
#dash-workspace .text-amber-300 {
    color: #8fb4d9 !important;
}

/* Qualquer classe âmbar do Tailwind dentro do painel vira o acento frio ou neutro */
#dash-topbar [class*="text-amber"],
#dash-sidebar [class*="text-amber"],
#dash-workspace [class*="text-amber"] {
    color: #8fb4d9 !important;
}

#dash-topbar [class*="border-amber"],
#dash-sidebar [class*="border-amber"],
#dash-workspace [class*="border-amber"] {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#dash-topbar [class*="bg-amber"],
#dash-sidebar [class*="bg-amber"],
#dash-workspace [class*="bg-amber"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#dash-workspace [class*="bg-amber"].bg-amber-500,
#dash-workspace [class*="bg-amber"].bg-amber-400 {
    background-color: #8fb4d9 !important;
    color: #000000 !important;
}

/* Mesmo padrão nas três telas do painel: Mestre, Editora e Admin */
@media (min-width: 1024px) {
    #partner-sidebar,
    #admin-sidebar {
        position: sticky;
        top: 4rem;
        height: calc(100vh - 4rem);
        overflow-y: auto;
    }
}

.dash-topbar-page,
.dash-topbar-page > div:not(.dash-topbar),
.dash-topbar-page .bg-grid-pattern {
    background-color: #000000 !important;
    background-image: none !important;
}

.dash-topbar-page [class*="text-amber"] {
    color: #8fb4d9 !important;
}

.dash-topbar-page [class*="border-amber"] {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.dash-topbar-page [class*="bg-amber"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dash-topbar-page [class*="bg-amber"].bg-amber-500,
.dash-topbar-page [class*="bg-amber"].bg-amber-400 {
    background-color: #8fb4d9 !important;
    color: #000000 !important;
}

.dash-topbar-page .studio-btn-primary {
    background: #8fb4d9 !important;
    border-color: #8fb4d9 !important;
    color: #000000 !important;
}

.dash-topbar-page .studio-btn-secondary {
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cfd6df !important;
}

/* Links que dependem de papel começam ocultos e só aparecem quando o script libera */
.dash-topbar__item[hidden] {
    display: none;
}

/* Celular: sobra menu, logo, Catálogo (ícone) e perfil. Badge e subtítulo somem */
@media (max-width: 639px) {
    .dash-topbar__host,
    .dash-topbar__wordmark-sub {
        display: none;
    }

    .dash-topbar__brand {
        gap: 0.5rem;
    }

    .dash-topbar__wordmark-name {
        font-size: 0.7rem;
    }
}

/* Celular: o menu do perfil vira uma faixa de largura total logo abaixo do topo, com alvos de toque maiores */
@media (max-width: 639px) {
    .dash-topbar__panel--profile {
        position: fixed;
        top: 4rem;
        left: 0.75rem;
        right: 0.75rem;
        min-width: 0;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        border-radius: 0.75rem;
    }

    .dash-topbar__panel--profile .dash-topbar__item {
        min-height: 2.75rem;
        font-size: 0.9rem;
    }
}