/* ============================================================================
   DESIGN TOKENS — Paleta de Cores ImplantTA
   (1º na ordem de carga — ver docs/CSS_ARCHITECTURE.md)
   Fonte única de verdade para cores, sombras, transições e raios.
   Use sempre var(--implanta-*) em vez de valores literais.
   PODE ENTRAR AQUI: tokens no :root e utilitários puros de cor sem gêmeo
   estrutural em outro arquivo. NÃO PODE: regras de componente/layout.
   AO ALTERAR: bumpar ?v= em templates/base.html E CACHE_NAME em static/pwa/sw.js.
   ATENÇÃO: 404.html e emails/notificacao.html dependem deste arquivo/paleta
   fora do base.html.

   BREAKPOINTS CANÔNICOS (var() não funciona em @media sem build):
     - mobile:            @media (max-width: 576px)
     - tablet:            @media (max-width: 768px)
     - abaixo do desktop: @media (max-width: 991px)
     - desktop (sidebar): @media (min-width: 992px)
     - telas largas:      @media (min-width: 1600px)
     Atenção: existem ocorrências legadas de 767.98px/575.98px — NÃO são
     sinônimos de 768px/576px (o limite inclusivo difere em exatamente 1 device
     width); normalizar apenas na reforma visual, com decisão consciente.

   FONTES: há dois stacks legados no projeto —
     'Segoe UI', Tahoma, Geneva, Verdana, sans-serif  (implanta-base.css)
     'Segoe UI', sans-serif                            (pontuais)
     Unificar só na reforma visual: o fallback é o que renderiza em Linux/Android.
   ========================================================================== */
:root {
    /* Marca */
    --implanta-primary: #14afcc;
    --implanta-primary-dark: #0d8ba3;
    --implanta-secondary: #00ffff;
    --implanta-light-gray: #ebebeb;
    --implanta-very-light-gray: #f2f2f2;
    --implanta-dark-gray: #333333;
    --implanta-black: #000000;
    --implanta-white: #ffffff;
    --implanta-sidebar-bg: #2d2d2d;

    /* Status — espelho manual da paleta Bootstrap 4. O Bootstrap 5.3 do CDN usa
       valores diferentes (ex.: success #198754); unificar na reforma visual. */
    --implanta-success: #28a745;
    --implanta-success-dark: #1e7e34;
    --implanta-danger: #dc3545;
    --implanta-warning: #ffc107;
    --implanta-orange: #fd7e14;
    --implanta-info: #17a2b8;
    --implanta-gray: #6c757d;          /* = Bootstrap secondary */
    --implanta-light: #f8f9fa;         /* = Bootstrap light */
    --implanta-border: #dee2e6;        /* = Bootstrap border-color */
    --implanta-surface: #e9ecef;       /* = Bootstrap gray-200 */

    /* Anéis de foco (box-shadow dos estados :focus/:active) */
    --implanta-focus-ring: 0 0 0 0.2rem rgba(20, 175, 204, 0.25);
    --implanta-focus-ring-secondary: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
    --implanta-focus-ring-danger: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    --implanta-focus-ring-warning: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
    --implanta-focus-ring-success: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    --implanta-focus-ring-light: 0 0 0 0.2rem rgba(248, 249, 250, 0.25);

    /* Pretos translúcidos (bordas/sombras avulsas) */
    --implanta-black-10: rgba(0, 0, 0, 0.1);
    --implanta-black-15: rgba(0, 0, 0, 0.15);

    /* Sombras */
    --implanta-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.1);
    --implanta-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --implanta-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --implanta-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --implanta-shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.2);
    --implanta-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Transições */
    --implanta-transition: all 0.3s ease;
    --implanta-transition-mid: all 0.2s ease;
    --implanta-transition-fast: all 0.15s ease;
    --implanta-transition-transform: transform 0.3s ease;

    /* Raios de borda (apenas os valores mais repetidos; não colapsar a escala
       legada — 15+ valores distintos — fora da reforma visual) */
    --implanta-radius-sm: 6px;
    --implanta-radius: 8px;
    --implanta-radius-md: 10px;
    --implanta-radius-lg: 12px;
    --implanta-radius-xl: 15px;
    --implanta-radius-pill: 20px;
    --implanta-radius-circle: 50%;
}

/* Sobreposição das cores do Bootstrap */
.bg-primary {
    background-color: var(--implanta-primary) !important;
}

.text-primary {
    color: var(--implanta-primary) !important;
}

.border-primary {
    border-color: var(--implanta-primary) !important;
}

.btn-primary {
    background-color: var(--implanta-primary);
    border-color: var(--implanta-primary);
    color: var(--implanta-white);
}

.btn-primary:hover {
    background-color: var(--implanta-secondary);
    border-color: var(--implanta-secondary);
    color: var(--implanta-black);
}

.btn-outline-primary {
    color: var(--implanta-primary);
    border-color: var(--implanta-primary);
}

.btn-outline-primary:hover {
    background-color: var(--implanta-primary);
    border-color: var(--implanta-primary);
    color: var(--implanta-white);
}

.badge.bg-primary {
    background-color: var(--implanta-primary) !important;
}

/* Gradientes e utilitários de cor (.gradient-*, .bg-implanta-*, .text-implanta-*,
   .bg-stats-*) vivem em implanta-utilities.css — cópias duplicadas removidas daqui. */

/* .card: consolidado em implanta-components.css */

/* Botões - Estados focus e active para evitar cor roxa */
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--implanta-primary) !important;
    border-color: var(--implanta-primary) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--implanta-primary) !important;
    border-color: var(--implanta-primary) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring) !important;
}

.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--implanta-gray) !important;
    border-color: var(--implanta-gray) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring-secondary) !important;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--implanta-gray) !important;
    border-color: var(--implanta-gray) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring-secondary) !important;
}

.btn-danger:focus,
.btn-danger:active {
    background-color: var(--implanta-danger) !important;
    border-color: var(--implanta-danger) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring-danger) !important;
}

.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--implanta-danger) !important;
    border-color: var(--implanta-danger) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring-danger) !important;
}

.btn-warning:focus,
.btn-warning:active {
    background-color: var(--implanta-warning) !important;
    border-color: var(--implanta-warning) !important;
    color: var(--implanta-black) !important;
    box-shadow: var(--implanta-focus-ring-warning) !important;
}

.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--implanta-warning) !important;
    border-color: var(--implanta-warning) !important;
    color: var(--implanta-black) !important;
    box-shadow: var(--implanta-focus-ring-warning) !important;
}

.btn-info:focus,
.btn-info:active {
    background-color: var(--implanta-primary) !important;
    border-color: var(--implanta-primary) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring) !important;
}

.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--implanta-primary) !important;
    border-color: var(--implanta-primary) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring) !important;
}

.btn-success:focus,
.btn-success:active {
    background-color: var(--implanta-success) !important;
    border-color: var(--implanta-success) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring-success) !important;
}

.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--implanta-success) !important;
    border-color: var(--implanta-success) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring-success) !important;
}

.btn-light:focus,
.btn-light:active {
    background-color: var(--implanta-light) !important;
    border-color: var(--implanta-light) !important;
    color: var(--implanta-black) !important;
    box-shadow: var(--implanta-focus-ring-light) !important;
}

.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: var(--implanta-light) !important;
    border-color: var(--implanta-light) !important;
    color: var(--implanta-black) !important;
    box-shadow: var(--implanta-focus-ring-light) !important;
}

/* Fixes para transparência */
.offcanvas-header.bg-implanta-primary {
    background-color: var(--implanta-primary) !important;
}

/* Offcanvas mobile — header alinhado com o navbar (56px) */
#mobileSidebar .offcanvas-header {
    min-height: 56px;
    padding: 0 1rem;
}

/* .stats-card e .permission-card: consolidados em implanta-components.css */

.user-info-card.gradient-primary {
    background: linear-gradient(135deg, var(--implanta-primary) 0%, var(--implanta-secondary) 100%) !important;
    color: var(--implanta-white) !important;
}

/* Sidebar específica */
.sidebar.gradient-dark {
    background: var(--implanta-sidebar-bg) !important;
    color: var(--implanta-white) !important;
}

/* Hierarquia pai / submenu (mesmo include no desktop e no offcanvas mobile) */
.sidebar-nav-group {
    list-style: none;
}

.sidebar-nav-group > .sidebar-submenu {
    margin: 0.2rem 0 0 0;
    padding: 0.15rem 0 0.4rem 0.65rem;
    list-style: none;
    border-left: 2px solid rgba(255, 255, 255, 0.38);
    margin-left: 0.75rem;
}

.sidebar-nav-group .nav-link-submenu {
    font-size: 0.9rem;
    opacity: 0.93;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}

.sidebar-nav-group .nav-link-submenu:hover {
    opacity: 1;
}

/* Comercial hero */
.comercial-hero.gradient-primary {
    background: linear-gradient(135deg, var(--implanta-primary) 0%, var(--implanta-secondary) 100%) !important;
    color: var(--implanta-white) !important;
}

.stats-card.gradient-primary {
    background: linear-gradient(135deg, var(--implanta-primary) 0%, #00D4E0 100%) !important;
    color: var(--implanta-white) !important;
}

/* .alert / .alert-light: consolidados em implanta-components.css.
   .table / .table thead th: consolidados em implanta-base.css.
   .navbar-brand: em implanta-layouts.css (mesma cor, também !important). */

/* Offcanvas */
.offcanvas-body {
    background-color: transparent !important;
}
 
/* Botões pequenos (btn-sm) - Estados focus e active */
.btn-sm.btn-primary:focus,
.btn-sm.btn-primary:active {
    background-color: var(--implanta-primary) !important;
    border-color: var(--implanta-primary) !important;
    color: var(--implanta-white) !important;
    box-shadow: var(--implanta-focus-ring) !important;
}

/* .btn-sm.btn-outline-{primary,danger,warning,info}: cópias idênticas em
   implanta-components.css — removidas daqui. */

.btn-sm.btn-light:focus,
.btn-sm.btn-light:active {
    background-color: var(--implanta-light) !important;
    border-color: var(--implanta-light) !important;
    color: var(--implanta-black) !important;
    box-shadow: var(--implanta-focus-ring-light) !important;
}

.btn-sm.btn-warning:focus,
.btn-sm.btn-warning:active {
    background-color: var(--implanta-warning) !important;
    border-color: var(--implanta-warning) !important;
    color: var(--implanta-black) !important;
    box-shadow: var(--implanta-focus-ring-warning) !important;
}


/* O bloco desktop do menu lateral (.sidebar-desktop, .sidebar-toggle,
   .main-content) vive em implanta-layouts.css — cópias removidas daqui
   (as regras de .main-content foram mescladas na versão do layouts.css e a
   cópia antiga de .sidebar-toggle era integralmente sobrescrita por lá). */
@media (min-width: 992px) {
    /* Submenu: menu desktop expandido — reforça vínculo visual com o pai */
    .sidebar-desktop.expanded .sidebar-nav-group > .nav-link-parent {
        font-weight: 600;
    }

    .sidebar-desktop.expanded .sidebar-nav-group > .sidebar-submenu {
        margin-left: 0.85rem;
        padding-left: 0.7rem;
    }

    /* Submenu: menu desktop colapsado — sem barra lateral; ícones alinhados ao fluxo */
    .sidebar-desktop:not(.expanded) .sidebar-nav-group > .sidebar-submenu {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }

    .sidebar-desktop:not(.expanded) .sidebar-nav-group .nav-link-submenu {
        font-size: inherit;
        opacity: 1;
    }
}

/* Tooltips do menu colapsado removidos — sem efeito hover nos menus */

/* Desabilitar completamente tooltips quando menu está expandido */
@media (min-width: 992px) {
    .sidebar-desktop.expanded .tooltip-item {
        pointer-events: auto;
    }
    
    /* Remover atributo title quando expandido para evitar tooltip nativo do browser */
    .sidebar-desktop.expanded .tooltip-item::after {
        display: none !important;
    }
    
    .sidebar-desktop.expanded .tooltip-item::before {
        display: none !important;
    }
}

/* body (overflow-x), .container-fluid, a correção da navbar/dropdown de
   usuário e o ajuste mobile de .main-content vivem em implanta-base.css e
   implanta-layouts.css — cópias redundantes removidas daqui. */