/* ════════════════════════════════════════════════════
   SG-CLINICA — Efeitos do Menu Admin
   Camada persistente — NUNCA sobrescrita pelo MadBuilder.
   Usa apenas var(--...) já definidas em tema.css/default.css.
   A cor de seleção/hover do menu é a "check" (verde), não a
   --main-color (laranja, usada em outros pontos da interface).
   ════════════════════════════════════════════════════ */

/* ── 1. EFEITO SANFONA — transição suave do colapso ─── */
.master-menu-content,
.header-logo {
    transition: max-width .3s ease, min-width .3s ease, width .3s ease !important;
}

/* ── 2. STRIP DE MÓDULOS — botões circulares ─────────── */
.master-menu-content .container-menu a.button-circle {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Hover: preenchimento e borda na cor de seleção do tema, ícone branco */
.master-menu-content .container-menu a.button-circle:hover {
    background: var(--menu-background-check) !important;
    color: var(--menu-check-color) !important;
    border-color: var(--menu-background-check) !important;
}

/* Selecionado (checked): preenchimento na cor de seleção, ícone branco */
.master-menu-content .container-menu a.button-circle.checked {
    background: var(--menu-background-check) !important;
    color: var(--menu-check-color) !important;
    border-color: var(--menu-background-check) !important;
}
.master-menu-content .container-menu a.button-circle.checked:hover {
    filter: brightness(1.1);
}

/* ── 3. ÁREA DO USUÁRIO LOGADO (splash) ──────────────── */
/* Mesmo tom do submenu, porém escurecido — separa visualmente
   o bloco de usuário (avatar/nome/e-mail) do resto do submenu. */
.splash-user-content {
    background-color: var(--menu-user-splash-background) !important;
    background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)) !important;
    border-bottom: 3px solid var(--menu-background-check) !important;
}
.splash-user-photo a.button-circle {
    background: var(--menu-background-check) !important;
    color: var(--menu-check-color) !important;
    border: none !important;
    transition: filter .2s ease;
}
.splash-user-photo a.button-circle:hover {
    filter: brightness(1.15);
}

/* ── 4. FUNDO DO SUBMENU — cor secundária, contraste com a seleção ── */
.container-submenu {
    background: var(--submenu-background-color) !important;
}

/* ── 5. LINKS DO SUBMENU — hover e ativo (texto e ícone) ─ */
.container-submenu ul li a {
    transition: background-color .15s ease, color .15s ease;
}
.container-submenu ul li a:hover,
.container-submenu ul li a:hover i {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--submenu-text-hover) !important;
}
.container-submenu ul .checked > a,
.container-submenu ul .checked > a i {
    color: var(--submenu-check-color) !important;
    background-color: var(--submenu-background-check) !important;
}

/* Sub-itens (segundo nível) — hover mais sutil */
.container-submenu ul li ul a:hover {
    background-color: rgba(255,255,255,0.06) !important;
    color: var(--submenu-text-hover) !important;
}

/* ── 6. ACABAMENTO — divisórias sutis ────────────────── */
.master-menu-content .container-menu {
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.08);
}
.container-submenu {
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.15);
}

/* ── 7. UNIFICAÇÃO: barra de título principal + caixa do logo
   + faixa de ícones dos módulos, todas na mesma cor escura do
   tema (já usada na caixa do logo e no submenu). Evita a "tela
   branca" sem contraste quando o menu está retraído e cria um
   quadro único (topo + coluna esquerda) ao redor do conteúdo. */
.container-header {
    background: var(--header-logo-background) !important;
}
.master-menu-content .container-menu {
    background: var(--header-logo-background) !important;
}

/* Texto/ícones soltos da barra de título (nome do usuário, setas)
   passam a claro; os círculos de ação (mensagens, notificações,
   tema) mantêm sua própria cor e não são afetados. */
.header-action {
    color: var(--header-logo-text-color) !important;
}
.header-profile-name {
    color: var(--header-logo-text-color) !important;
}