/*
 * azcall v2 - shell (Etapa 2): reposiciona a estrutura que cada tela já monta
 * (.wrapper > .sidebar + .main-panel > nav.navbar + .content) para o layout da Opção C:
 * trilho + painel à esquerda, barra superior de vidro e conteúdo no fundo --bg.
 * Escrito à mão (azcall-v2.css é gerado do kit). Só vale com <html data-v2>.
 * Colorização de componentes das telas antigas fica na Etapa 3 (camada de compatibilidade).
 */
html[data-v2] { --v2-side-w: 324px; --v2-top-h: 68px; }
html[data-v2].v2-panel-closed { --v2-side-w: 76px; }
html[data-v2] [hidden] { display: none !important; }
html[data-v2] body { background: var(--bg); color: var(--ink); font-family: var(--f-body); }
html[data-v2] .v2-msr { font-family: 'Material Symbols Rounded'; }

/* logos: claro/escuro */
html[data-v2] .v2-logo-escuro { display: none; }
html[data-v2][data-theme="dark"] .v2-logo-claro { display: none; }
html[data-v2][data-theme="dark"] .v2-logo-escuro { display: inline-block; }
html[data-v2] .v2-railb-logo .v2-logo-claro { display: none; }
html[data-v2] .v2-railb-logo .v2-logo-escuro { display: inline-block; }
html[data-v2] .v2-splash-full .v2-splash-mark img { width: 260px; max-width: 70vw; }

/* ---- barra lateral ---- */
html[data-v2] .wrapper > .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--v2-side-w); max-height: none; height: 100%;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    margin: 0; padding: 0; z-index: 1040; overflow: visible;
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
}
html[data-v2] .wrapper > .sidebar::before,
html[data-v2] .wrapper > .sidebar::after { display: none !important; }
html[data-v2] .wrapper > .sidebar > .logo { display: none; }
html[data-v2] .v2-sideb { height: 100%; }
html[data-v2].v2-panel-closed .v2-panelb { width: 0; opacity: 0; border-right: 0; }
html[data-v2] .v2-railb { overflow: hidden; }
html[data-v2] .v2-railb-scroll { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
html[data-v2] .v2-railb-scroll::-webkit-scrollbar { display: none; }
html[data-v2] .v2-railb-i { text-decoration: none; flex-shrink: 0; }
html[data-v2] .v2-railb-i > span { display: block; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; }
/* cores explícitas: dark-mode.css/material-dashboard colorem qualquer <a> e ganhariam da classe */
html[data-v2] .v2-sideb .v2-railb-i { color: #8b919a; }
html[data-v2] .v2-sideb .v2-railb-i:hover { color: #fff; }
html[data-v2] .v2-sideb .v2-railb-i.on { color: #e2b866; background: rgba(212, 162, 76, .14); }
html[data-v2] .v2-sideb .v2-railb-av { color: #e2b866; }
html[data-v2] .v2-sideb .v2-panelb-i { color: var(--ink-2); }
html[data-v2] .v2-sideb .v2-panelb-i:hover { background: var(--hover); color: var(--ink); }
html[data-v2] .v2-sideb .v2-panelb-i.on { background: var(--gold-soft); color: var(--gold-ink); }
html[data-v2] .v2-railb-i:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-v2] .v2-railb-av { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }
html[data-v2] .v2-panelb-i { text-decoration: none; }
html[data-v2] .v2-panelb-i > .v2-msr { font-size: 19px; }
html[data-v2] .v2-panelb-nav .v2-pane { display: block; }
html[data-v2] .v2-panelb-nav a, html[data-v2] .v2-railb a { text-decoration: none; }

/* ---- conteúdo ---- */
html[data-v2] .main-panel {
    float: none; width: auto !important; margin-left: var(--v2-side-w); min-height: 100vh;
    background: var(--bg); overflow: visible;
    transition: margin-left .22s cubic-bezier(.4, 0, .2, 1);
}
html[data-v2] body.azcall-menu-oculto .main-panel { margin-left: 0; }
html[data-v2] .main-panel > .content {
    margin-top: var(--v2-top-h); padding: 24px 28px 96px; min-height: calc(100vh - var(--v2-top-h));
    animation: spIn .45s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* ---- barra superior (nav.php) ---- */
html[data-v2] .main-panel > .navbar {
    position: fixed; top: 0; left: var(--v2-side-w); right: 0; width: auto !important; height: var(--v2-top-h); min-height: 0; margin: 0; padding: 0;
    background: color-mix(in oklab, var(--card) 78%, transparent) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border: 0; border-bottom: 1px solid var(--line); box-shadow: none; z-index: 1030;
    transition: left .22s cubic-bezier(.4, 0, .2, 1);
}
html[data-v2] body.azcall-menu-oculto .main-panel > .navbar { left: 0; }
html[data-v2] .main-panel > .navbar > .container-fluid { height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 28px; }
html[data-v2] .navbar-minimize, html[data-v2] .navbar-toggle { display: none !important; }
html[data-v2] .navbar-header { float: none; flex-shrink: 0; margin: 0 !important; display: flex; align-items: center; gap: 8px; margin: 0; }
html[data-v2] .navbar-brand { height: auto; padding: 0; margin: 0 !important; float: none; display: block; }
html[data-v2] #TituloPage { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
html[data-v2] .navbar-collapse { flex: 1; min-width: 0; margin: 0 !important; width: auto !important; display: flex !important; justify-content: flex-end; padding: 0; border: 0; box-shadow: none; max-height: none; }
html[data-v2] .navbar-collapse > .navbar-nav { display: flex; align-items: center; gap: 4px; margin: 0; float: none; }
html[data-v2] .navbar-collapse > .navbar-nav > li { float: none; }
html[data-v2] .navbar-collapse > .navbar-nav > li > a,
html[data-v2] .navbar-collapse > .navbar-nav > li > button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; margin: 0;
    border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
    color: var(--ink-2); font-size: 13px; font-weight: 500; text-transform: none; line-height: 1;
}
html[data-v2] .navbar-collapse > .navbar-nav > li > a:hover,
html[data-v2] .navbar-collapse > .navbar-nav > li > button:hover,
html[data-v2] .navbar-collapse > .navbar-nav > li.open > a { background: var(--hover); color: var(--ink); }
html[data-v2] .navbar-collapse .material-icons { font-size: 20px; }
html[data-v2] .navbar-collapse .dropdown-menu { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-pop); }
html[data-v2] .navbar-collapse .dropdown-menu > li > a { color: var(--ink-2); }
html[data-v2] .navbar-collapse .dropdown-menu > li > a:hover { background: var(--hover); color: var(--ink); }
html[data-v2] #btnToggleMenuLateral { height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink-2); text-transform: none; font-size: 12.5px; font-weight: 500; padding: 0 12px; margin: 0; box-shadow: none; }

/* ---- esqueleto entre telas ---- */
.v2-navskel {
    position: fixed; top: var(--v2-top-h, 68px); left: var(--v2-side-w, 324px); right: 0; bottom: 0; z-index: 1020;
    background: var(--bg); padding: 24px 28px; overflow: hidden; animation: spIn .18s ease both;
}

/* ---- busca (Ctrl+K) ---- */
html[data-v2] .v2-overlay { z-index: 2000; }
html[data-v2] .v2-palette .v2-pi { text-decoration: none; color: var(--ink); }

/* ---- celular/tablet: painel vira gaveta ---- */
html[data-v2] .v2-hamb { display: none; }
@media (max-width: 1024px) {
    html[data-v2] { --v2-side-w: 0px; }
    html[data-v2].v2-panel-closed { --v2-side-w: 0px; }
    html[data-v2] .wrapper > .sidebar { width: 0; transform: none !important; }
    html[data-v2] .v2-sideb { z-index: 1050; box-shadow: none; }
    html[data-v2].v2-open .v2-sideb { box-shadow: var(--shadow-pop); }
    html[data-v2].v2-open .v2-sideb { transform: none; }
    html[data-v2] .v2-panelb { opacity: 1; }
    html[data-v2].v2-panel-closed .v2-panelb { width: 248px; opacity: 1; border-right: 1px solid var(--panel-line); }
    html[data-v2] .v2-collapse-btn { display: none; }
    html[data-v2].v2-open .v2-scrim { opacity: 1; pointer-events: auto; z-index: 1045; }
    html[data-v2] .v2-hamb {
        display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 15px; left: 12px; z-index: 1035;
        width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink-2); cursor: pointer;
    }
    html[data-v2] .main-panel > .navbar > .container-fluid { padding-left: 62px; padding-right: 12px; }
    html[data-v2] .main-panel > .content { padding: 20px 14px 96px; }
    html[data-v2] #btnToggleMenuLateral { display: none; }
    html[data-v2] .navbar-collapse > .navbar-nav > li > a > p, html[data-v2] .navbar-collapse > .navbar-nav > li > a .caret { display: none; }
    .v2-navskel { padding: 20px 14px; }
}
@media print { html[data-v2] .main-panel { margin-left: 0; } html[data-v2] .main-panel > .navbar, .v2-hamb { display: none !important; } }

html[data-v2] .v2-palette .v2-ph input { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0; height: 100%; color: var(--ink); background-image: none !important; }

/* ---- painel em seções (área > grupo > telas), como no kit ---- */
html[data-v2] .v2-panelb-sec { margin-bottom: 14px; }
html[data-v2] .v2-panelb-sec .v2-panelb-sh { margin-bottom: 2px; }
html[data-v2] .v2-panelb-sec .v2-panelb-sh .v2-msr { font-size: 16px; }
html[data-v2] .v2-panelb-sg { padding: 8px 12px 2px 38px; font-size: 11.5px; font-weight: 600; color: var(--subtle); }
html[data-v2] .v2-panelb-i.sub { padding-left: 38px; }

html[data-v2] .v2-pane > .v2-panelb-i { margin-bottom: 6px; }

/* ---- transição entre telas (logo rápida do kit): cobre a área de conteúdo, abaixo do menu ---- */
html[data-v2] .v2-splash-quick { position: fixed; left: var(--v2-side-w); top: 0; right: 0; bottom: 0; z-index: 1035; }
html[data-v2] .v2-splash-quick .v2-splash-mark img { width: 58px; height: auto; }
html[data-v2] .v2-splash-full { z-index: 3000; }
@media (max-width: 1024px) { html[data-v2] .v2-splash-quick { left: 0; } }

/* avatar do rodapé do trilho: foto do perfil no lugar das iniciais */
html[data-v2] .v2-railb-av { overflow: hidden; padding: 0; }
html[data-v2] .v2-railb-av.tem-foto { background: var(--line-2); border-color: #2c3036; }
html[data-v2] .v2-railb-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* caminho longo (ex.: Administração > Ferramentas > Configurações PABX > Rotas): o caminho encolhe com reticências; "Tela cheia" e os ícones não se sobrepõem */
html[data-v2] .navbar-header { flex: 0 1 auto; min-width: 0; }
html[data-v2] .navbar-header .v2-crumbs2 { flex: 0 1 auto; min-width: 0; }
html[data-v2] .v2-crumbs2 > * { flex: 0 0 auto; }
html[data-v2] .v2-crumbs2 > :not(b):not(svg):not(i) { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
html[data-v2] .v2-crumbs2 b { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
html[data-v2] #btnToggleMenuLateral { flex: 0 0 auto; white-space: nowrap; }
html[data-v2] .navbar-collapse { flex: 1 0 auto; }
html[data-v2] .navbar-header .navbar-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
html[data-v2] .navbar-header .navbar-brand .v2-crumbs2 { max-width: 100%; }
html[data-v2] .navbar-header .v2-crumbs2 b { flex: 0 0 auto; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* botão de abrir o painel: só aparece com o painel recolhido (desktop), fixo ao lado do trilho */
html[data-v2] .v2-expand-btn { display: none; position: fixed; top: 14px; left: 88px; z-index: 60; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
html[data-v2].v2-panel-closed .v2-expand-btn { display: inline-flex; }
@media (max-width: 900px) { html[data-v2].v2-panel-closed .v2-expand-btn { display: none; } }
@media (min-width: 901px) { html[data-v2].v2-panel-closed .main-panel > .navbar > .container-fluid { padding-left: 80px; } }