/*
 * Classes utilitárias que substituem atributos style= inline nas páginas do
 * portal, para permitir remover `style-src 'unsafe-inline'` da CSP.
 * Valores dinâmicos (larguras de progresso) são aplicados via JS (element.style,
 * que é CSSOM e NÃO é bloqueado pela CSP). Ver docs/lgpd-seguranca (CSP hardening).
 */

.csp-top-8 { top: 8px; }
.csp-h-46 { height: 46px; }
.csp-w-40 { width: 40px; }
.csp-mw-200 { min-width: 200px; }
.csp-mh-200 { min-height: 200px; }
.csp-sidenav-h { height: calc(100vh - 120px) !important; }
.csp-dropdown-list { display: none; z-index: 1000; max-height: 200px; overflow-y: auto; }
/* display:none SEM !important — para elementos alternados via element.style.display no JS */
.csp-hidden { display: none; }
.csp-pointer { cursor: pointer; }
.csp-upload-dash { border: 2px dashed black; }
.csp-avatar-sm { width: 32px; height: 32px; font-size: .85rem; flex-shrink: 0; }

/* Imagens de fundo estáticas (caminhos absolutos — o CSS mora em /assets/css/). */
.csp-bg-perfil { background-image: url('/assets/images/illustrations/perfil-background.jpg'); }
.csp-bg-pricing { min-height: 180px; background-image: url('/assets/images/bg-pricing.jpg'); }

/* Movido do <style> inline de upload.html */
.upload-focused { background-color: darkgrey; }

/* Barras de progresso: largura inicial 0; o valor real é setado via JS
 * (element.style.width) a partir do atributo data-width. */
.csp-progress { width: 0; }

/* Ícones Material inline (substituem o FontAwesome) — tamanho/alinhamento junto
 * ao texto. Seletor com 2 classes p/ vencer o .material-icons (20px) do tema,
 * que agora carrega de forma assíncrona. */
.material-icons.mi-inline { font-size: 1.1rem; vertical-align: middle; line-height: 1; }
.material-icons.mi-3x { font-size: 3rem; vertical-align: middle; line-height: 1; }
/* Ícone SVG inline (ex.: logo do WhatsApp — Material Icons não tem marcas). */
.svg-inline { width: 1.1em; height: 1.1em; vertical-align: middle; fill: currentColor; }

/* O tema Material Dashboard desenha alguns glifos (caret de dropdown/submenu,
 * ponteiro do menu e o check do checkbox) via a fonte "FontAwesome". Estas
 * regras trocam esses glifos pelo Material Icons Round, permitindo remover o
 * FontAwesome por completo. !important p/ vencer o critical inline e o
 * material-dashboard.css (que carrega de forma assíncrona, depois do csp.css). */
.dropdown .dropdown-toggle:after,
.dropup .dropdown-toggle:after,
.dropstart .dropdown-toggle:after,
.dropend .dropdown-toggle:after,
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after,
.g-sidenav-hidden .navbar-vertical .nav-item .collapse .nav .nav-item .nav-link[data-bs-toggle="collapse"]:after,
.g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link[data-bs-toggle="collapse"]:after {
  font-family: 'Material Icons Round' !important;
  content: "\e313" !important; /* keyboard_arrow_down */
}
.dropdown .dropdown-menu:before,
.navbar-toggler + .navbar-collapse .dropdown:not(.nav-item) .dropdown-menu:before {
  font-family: 'Material Icons Round' !important;
  content: "\e5c7" !important; /* arrow_drop_up */
}
.dropup .dropdown-menu:after {
  font-family: 'Material Icons Round' !important;
  content: "\e5c5" !important; /* arrow_drop_down */
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:after {
  font-family: 'Material Icons Round' !important;
  content: "\e5ca" !important; /* check */
}