/* ============================================================
   menu-modes.css  —  Issue #1314
   Seletor de modos do menu lateral.
   - "Fixo" (g-sidenav-pinned) e "Compacto" (g-sidenav-hidden) usam
     o comportamento nativo do Argon.
   - "Automatico": o menu fica fora da tela e e revelado por uma
     alca fixa na borda esquerda. Funciona em TODAS as resolucoes.
   Carregado APOS argon-dashboard.css (ultimo item de AppAsset::$css).
   Usa #sidenav-main (id) para ter especificidade acima do Argon.
   ============================================================ */

/* Transicao suave do menu e do empurrao do conteudo */
#sidenav-main,
#sidenav-main ~ .main-content {
    transition: max-width .25s ease, margin-left .25s ease, transform .25s ease;
}

/* A alca so aparece no modo Automatico */
.menu-auto-handle {
    display: none;
}

/* ---------------------------------------------------------------
   MODO AUTOMATICO  (body: g-sidenav-hidden + menu-mode-auto)
   Menu escondido fora da tela; uma alca na borda esquerda o revela
   como overlay. Vale para QUALQUER largura de tela (sem media query)
   para nao colidir com o off-canvas nativo do Argon.
   --------------------------------------------------------------- */

/* menu escondido fora da tela (vence o off-canvas nativo do Argon) */
body.menu-mode-auto #sidenav-main.navbar-vertical {
    max-width: 15.625rem !important;
    transform: translateX(-115%);
}

/* menu com aparencia completa (anula o modo "trilha" do g-sidenav-hidden) */
body.menu-mode-auto #sidenav-main .nav-link .nav-link-text,
body.menu-mode-auto #sidenav-main .nav-link .sidenav-normal {
    opacity: 1 !important;
    width: auto !important;
}
body.menu-mode-auto #sidenav-main .navbar-brand span {
    opacity: 1 !important;
}

/* conteudo em largura cheia (o menu nunca empurra) */
body.menu-mode-auto #sidenav-main.fixed-start ~ .main-content {
    margin-left: 1.5rem !important;
}

/* menu revelado: desliza e encosta na borda como overlay */
body.menu-mode-auto.menu-auto-open #sidenav-main.navbar-vertical {
    transform: translateX(0);
    margin-left: 0 !important;
    z-index: 1040;
    box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, .3);
}

/* ---- alca (handle) na borda esquerda ---- */
body.menu-mode-auto .menu-auto-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.85rem;
    height: 10rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 1rem 1rem 0;
    background-color: var(--bs-primary, #5e72e4);
    background-image: linear-gradient(135deg,
        rgba(255, 255, 255, .38) 0%,
        rgba(255, 255, 255, 0) 42%,
        rgba(0, 0, 0, .32) 100%);
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    box-shadow:
        5px 6px 14px rgba(0, 0, 0, .45),
        inset 2px 2px 3px rgba(255, 255, 255, .55),
        inset -3px -4px 6px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 1039;
    transition: width .15s ease, box-shadow .15s ease, opacity .2s ease;
}
body.menu-mode-auto .menu-auto-handle:hover {
    width: 2.35rem;
    box-shadow:
        7px 8px 18px rgba(0, 0, 0, .5),
        inset 2px 2px 4px rgba(255, 255, 255, .6),
        inset -3px -4px 7px rgba(0, 0, 0, .35);
}
body.menu-mode-auto .menu-auto-handle:active {
    box-shadow:
        2px 3px 7px rgba(0, 0, 0, .4),
        inset 3px 4px 8px rgba(0, 0, 0, .42);
}
/* esconde a alca enquanto o menu esta aberto */
body.menu-mode-auto.menu-auto-open .menu-auto-handle {
    opacity: 0;
    pointer-events: none;
}

/* Destaque do item selecionado no dropdown de modos */
.menu-mode-option.active {
    background-color: var(--bs-primary-bg-subtle, #e7f0ff);
    font-weight: 600;
}

/* Aviso (popover) do novo modo de menu Automatico */
.popover.menu-mode-hint {
    max-width: 320px;
}
.popover.menu-mode-hint .popover-body {
    font-size: 0.85rem;
}
.popover.menu-mode-hint .popover-body p:last-of-type {
    margin-bottom: 0.6rem;
}
.popover.menu-mode-hint .popover-body .btn {
    width: 100%;
}