/* Aplicar fonte Quicksand em todo o sistema */
        * {
            font-family: "Quicksand", sans-serif !important;
        }
        
        /* Correção temporária para busca */
        .header-search {
            position: relative !important;
        }
        
        .header-search .btn-voice-search {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            z-index: 10 !important;
            color: #6c757d !important;
            font-size: 16px !important;
            padding: 5px !important;
            right: 15px !important;
        }
        
        .header-search .btn-voice-search:hover {
            color: #dc3545 !important;
        }
        
        .header-search input {
            padding-right: 45px !important;
        }
        
        /* Classe para desabilitar transições durante carregamento inicial */
        body.loading-menu .slide-menu,
        body.loading-menu .menu-arrow {
            transition: none !important;
        }

        /* Prevenir animações do menu durante navegação */
        .slide-menu.no-transition {
            transition: none !important;
        }
        
        .menu-arrow.no-transition {
            transition: none !important;
        }
        
        body {
            font-family: "Quicksand", sans-serif !important;
        }
        
        /* Prevenir animações no menu de documentos */
        #foldersMenu {
            transition: none !important;
            animation: none !important;
        }
        
        /* Melhorar estilo dos títulos das páginas */
        .page-header-breadcrumb h3 {
            font-size: 1.3rem !important;
            font-weight: 600 !important;
            color: #2c3e50 !important;
        }
        
        .page-header-breadcrumb p {
            font-size: 0.875rem !important;
            color: #6c757d !important;
        }
        
        #foldersMenu.show {
            display: block !important;
        }
        
        .folders-toggle .menu-arrow {
            transition: transform 0.15s ease;
        }
        
        .folders-toggle.active .menu-arrow {
            transform: rotate(90deg);
        }
        
        /* Substituir azul claro por azul escuro */
        .btn-primary {
            background-color: #2c3e50 !important;
            border-color: #2c3e50 !important;
        }
        
        .btn-primary:hover {
            background-color: #1a252f !important;
            border-color: #1a252f !important;
        }
        
        .bg-primary {
            background-color: #2c3e50 !important;
        }
        
        .text-primary {
            color: #2c3e50 !important;
        }
        
        .badge-primary, .badge.bg-primary {
            background-color: #2c3e50 !important;
        }
        
        /* Header branco */
        .app-header {
            background: white !important;
            border-bottom: 1px solid #e9ecef;
        }
        
        /* Transição suave para os menus */
        .side-menu__item {
            transition: all 0.3s ease !important;
        }
        
        /* Menu hover com fundo azul escuro */
        .side-menu__item:hover {
            background-color: #2c3e50 !important;
            color: white !important;
        }
        
        .side-menu__item:hover .side-menu__icon,
        .side-menu__item:hover .menu-arrow {
            color: white !important;
        }
        
        /* Menu ativo (expandido) com fundo azul escuro */
        .side-menu__item.active {
            background-color: #2c3e50 !important;
            color: white !important;
        }
        
        .side-menu__item.active .side-menu__icon,
        .side-menu__item.active .menu-arrow {
            color: white !important;
        }
        
        /* Rotação da seta quando expandido */
        .menu-arrow {
            transition: transform 0.3s ease !important;
        }
        
        .menu-arrow.rotated {
            transform: rotate(90deg) !important;
        }
        
        /* Correções de estilo dos menus */
        .main-menu > .slide {
            margin-bottom: 0;
        }
        
        .slide-menu {
            padding: 0;
            margin: 0;
            background: white !important;
            list-style: none;
        }
        
        .slide-menu li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .slide-menu.show {
            display: block !important;
        }
        
        .sub-side-menu__item {
            padding: 4px 10px 4px 45px;
            display: block;
            color: #6c757d;
            text-decoration: none;
            font-size: 13px;
            transition: all 0.2s;
        }
        
        .sub-side-menu__item:hover {
            background-color: #f8f9fa !important;
            color: #495057 !important;
            text-decoration: none;
        }
        
        .sub-side-menu__item:hover i {
            color: #495057 !important;
        }
        
        .sub-side-menu__item.active {
            background-color: #e9ecef !important;
            color: #2c3e50 !important;
        }
        
        .sub-side-menu__item.active i {
            color: #2c3e50 !important;
        }
        
        
        /* Layout do Sidebar */
        .app-sidebar {
            display: flex !important;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* Logo do Sidebar fixa no topo */
        .main-sidebar-header {
            flex-shrink: 0;
            z-index: 10;
            background: inherit;
            padding: 0.75rem 1rem !important;
        }

        /* Container do menu com scroll */
        .main-sidebar {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Container do nav com margin-top */
        .main-menu-container {
            margin-top: 75px !important;
        }

        /* Menu sem espaço no topo */
        .main-menu {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* Header no tema escuro */
        [data-theme-mode="dark"] .app-header {
            background-color: #2c2c2c !important;
            color: #e0e0e0 !important;
            border-bottom: 1px solid #444 !important;
        }

        [data-theme-mode="dark"] .header-profile-name,
        [data-theme-mode="dark"] .header-profile-role {
            color: #e0e0e0 !important;
        }

        [data-theme-mode="dark"] .profile-dropdown {
            background: #2c2c2c;
            border-color: #444;
        }

        [data-theme-mode="dark"] .profile-dropdown-item {
            color: #e0e0e0;
        }

        [data-theme-mode="dark"] .profile-dropdown-item:hover {
            background-color: #3a3a3a;
            color: #fff;
        }

        [data-theme-mode="dark"] .profile-dropdown-divider {
            background-color: #444;
        }

        /* Rodapé do sidebar fixo no final */
        .sidebar-footer {
            flex-shrink: 0;
            margin-top: 0;
        }
        
        /* Remover sublinhado dos links */
        .main-menu a {
            text-decoration: none !important;
        }
        
        /* Tamanho de fonte consistente */
        .side-menu__label {
            font-size: 14px;
            font-weight: 600;
        }
        
        /* Espaçamento consistente entre menus */
        .slide + .slide {
            margin-top: 2px;
        }
        
        /* Notificações */
        .header-notification {
            position: relative;
            cursor: pointer;
            margin-right: 20px;
        }
        
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .notification-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            width: 350px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
            z-index: 1000;
            display: none;
            max-height: 450px;
            overflow: hidden;
            flex-direction: column;
        }
        
        .notification-dropdown.show {
            display: flex;
        }
        
        .notification-header {
            padding: 15px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        
        .notification-list {
            max-height: 280px;
            overflow-y: auto;
            flex: 1;
        }
        
        .notification-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f3f4f6;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .notification-item:hover {
            background-color: #f9fafb;
        }
        
        .notification-item.unread {
            background-color: #eff6ff;
            border-left: 3px solid #2c3e50;
        }
        
        .notification-footer {
            padding: 10px;
            border-top: 1px solid #e5e7eb;
            background-color: #f9fafb;
            flex-shrink: 0;
        }
        
        .notification-footer .btn {
            font-size: 0.875rem;
        }
        
        /* Estilo para submenu ativo */
        .sub-side-menu__item.active {
            background-color: rgba(44, 62, 80, 0.1);
            color: #2c3e50;
            font-weight: 600;
            border-left: 3px solid #2c3e50;
            padding-left: 12px !important;
        }
        
        .sub-side-menu__item.active i {
            color: #2c3e50;
        }
        
        .notification-item .notification-title {
            font-weight: 600;
            font-size: 14px;
            color: #1f2937;
            margin-bottom: 4px;
        }
        
        .notification-item .notification-message {
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 4px;
        }
        
        .notification-item .notification-time {
            font-size: 11px;
            color: #9ca3af;
        }
        
        /* Estilos do Modal de Perfil */
        .profile-photo-container {
            position: relative;
            display: inline-block;
        }
        
        .profile-photo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e9ecef;
        }
        
        .profile-photo-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
            cursor: pointer;
        }
        
        .profile-photo-container:hover .profile-photo-overlay {
            opacity: 1;
        }
        
        .profile-photo-overlay i {
            color: white;
            font-size: 24px;
        }
        
        .profile-photo-section {
            padding: 20px;
        }

        /* Estilos globais do Select2 */
        .select2-container {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single {
            height: 38px !important;
            border: 1px solid #ced4da !important;
            border-radius: 6px !important;
            display: flex !important;
            align-items: center !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding-left: 12px !important;
            padding-right: 12px !important;
            line-height: 36px !important;
            font-size: 1rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
            top: 1px !important;
            right: 1px !important;
        }

        .select2-dropdown {
            border: 1px solid #ced4da !important;
            border-radius: 6px !important;
            font-size: 1rem !important;
        }

        .select2-container--default .select2-results__option {
            padding: 8px 12px !important;
            font-size: 1rem !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #ced4da !important;
            border-radius: 4px !important;
            padding: 6px 12px !important;
            font-size: 1rem !important;
        }

        /* Estilos do Dropdown do Perfil */
        .app-header {
            overflow: visible !important;
            clip-path: none !important;
        }

        .main-header-container,
        .header-content-right {
            overflow: visible !important;
        }

        .header-profile {
            position: relative;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .profile-dropdown {
            position: fixed !important;
            min-width: 200px !important;
            background: white !important;
            border-radius: 8px !important;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
            border: 1px solid #e5e7eb !important;
            z-index: 999999 !important;
        }

        .profile-dropdown.show {
            display: block !important;
        }

        .profile-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            color: #374151;
            text-decoration: none;
            transition: background-color 0.2s;
        }

        .profile-dropdown-item:hover {
            background-color: #f3f4f6;
            color: #111827;
            text-decoration: none;
        }

        .profile-dropdown-item i {
            font-size: 18px;
        }

        .profile-dropdown-divider {
            height: 1px;
            background-color: #e5e7eb;
            margin: 4px 0;
        }

/* ============================================================================
   ════════════════════════════════════════════════════════════════════════════
   cortexadv — TEMA E LAYOUT PRÓPRIOS (única seção, sem duplicatas)
   ════════════════════════════════════════════════════════════════════════════
   ============================================================================ */

:root {
    /* Paleta DOURADA/BRONZE — puxando do lado claro do gradient da logo */
    --cx-gold-deep: #8a6325;        /* bronze escuro (apenas para texto/contraste) */
    --cx-gold-1: #b88842;           /* bronze médio */
    --cx-gold-2: #c8a663;           /* dourado da logo */
    --cx-gold-3: #d9b97a;           /* dourado claro */
    --cx-gold-4: #e8d4a8;           /* dourado pastel */
    --cx-cream-1: #f4ead4;          /* creme dourado */
    --cx-cream-2: #faf3e0;          /* creme claro */
    --cx-cream-3: #fdfaf2;          /* off-white quente */

    /* Aliases retro-compatíveis (substituem o verde) */
    --cx-green-deep: #b88842;
    --cx-green-1: #c8a663;
    --cx-green-2: #d9b97a;
    --cx-green-3: #e8d4a8;

    --cx-bg: #ffffff;
    --cx-ink: #1f2937;
    --cx-ink-soft: #6b7280;
    --cx-border: rgba(31, 41, 55, 0.10);
}

/* ============================================================================
   LAYOUT FLEX (.page contém sidebar + wrapper de conteúdo)
   ============================================================================ */
html, body { height: 100%; }
body { background: var(--cx-bg); color: var(--cx-ink); }

.page {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    min-height: 100vh;
    width: 100%;
}

.app-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: stretch !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: 100vh !important;
    flex-shrink: 0 !important;
    width: 18rem !important;
    overflow-y: auto;
    background: #1B4D3E !important;
    /* sem border-right — visual contínuo entre sidebar e conteúdo */
    border-right: 0 !important;
    z-index: 10;
}

/* fundo verde fixo atrás da sidebar (sticky) — evita "fantasma" branco quando
   o conteúdo é mais alto que 100vh. SOME quando o sidebar é collapsed (hamburger). */
.page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 18rem;
    height: 100vh;
    background: #1B4D3E;
    z-index: 0;
    pointer-events: none;
    transition: width .2s ease;
}
body.sidebar-collapsed .page::before { width: 0 !important; }
@media (max-width: 992px) {
    .page::before { display: none; }
}

.page-main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky !important;
    top: 0 !important;
    height: 76px;
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    z-index: 20;
    padding: 0 !important;
}

.main-content,
.main-content.app-content {
    flex: 1;
    margin: 0 !important;
    padding: 1.5rem !important;
    max-width: 100% !important;
    background: var(--cx-bg);
}

.container-fluid {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

@media (min-width: 992px) {
    [data-nav-layout="vertical"] .app-header .main-header-container {
        padding-inline-start: 0 !important;
    }
}

/* ============================================================================
   SIDEBAR — visual cortexadv
   ============================================================================ */
.main-sidebar-header {
    background: #ffffff !important;
    padding: 1.5rem 1rem 1rem !important;
    text-align: center;
    border-bottom: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}
.main-sidebar-header .header-logo {
    display: block;
    width: 100%;
    text-align: center;
}
.brand-logo {
    /* Logo ORIGINAL colorida — sem filtro */
    height: 110px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.main-sidebar-header {
    padding: 1.4rem 1rem !important;
    text-align: center;
}

.main-menu-container { margin-top: 0 !important; padding: .75rem .6rem; }
.main-menu { padding: 0; margin: 0; list-style: none; }
.main-menu .slide { list-style: none; margin-bottom: 2px; }
.slide__divider {
    list-style: none;
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: .6rem 1rem;
}

.app-sidebar .side-menu__item {
    display: flex !important;
    align-items: center !important;
    gap: .8rem;
    padding: .8rem 1rem !important;
    color: #ffffff !important;
    font-size: .95rem !important;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all .14s;
    background: transparent !important;
    letter-spacing: .01em;
}
.app-sidebar .side-menu__item:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}
.app-sidebar .slide.active .side-menu__item {
    background: rgba(200, 166, 99, 0.30) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(200, 166, 99, 0.50);
}
.app-sidebar .side-menu__icon { font-size: 1.2rem !important; flex-shrink: 0; }
.app-sidebar .side-menu__icon { font-size: 1.1rem; flex-shrink: 0; }

/* ============================================================================
   HEADER — itens à direita
   ============================================================================ */
.main-header-container {
    height: 76px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}
.header-content-left { flex: 0 0 auto; padding-left: .5rem; }
.header-content-right {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.sidebar-toggle-btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--cx-ink-soft) !important;
    width: 40px; height: 40px;
    border-radius: 8px;
}
.sidebar-toggle-btn:hover {
    background: rgba(200,166,99,.10) !important;
    color: var(--cx-green-2) !important;
}

.header-theme-toggle .btn { background: var(--cx-ink) !important; border: 0 !important; }

.header-notification {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--cx-ink-soft);
    cursor: pointer;
    transition: background .14s;
}
.header-notification:hover { background: rgba(200,166,99,.10); color: var(--cx-green-2); }
.notification-badge {
    position: absolute;
    top: 4px; right: 4px;
    background: #ef4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.header-profile {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    padding: .35rem .7rem;
    border-radius: 8px;
    transition: background .14s;
    position: relative;
}
.header-profile:hover { background: rgba(200,166,99,.10); }
.header-profile img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.header-profile-info { display: flex; flex-direction: column; line-height: 1.15; }
.header-profile-name { font-weight: 600; font-size: .85rem; color: var(--cx-ink); }
.header-profile-role {
    font-size: .72rem;
    color: var(--cx-ink-soft);
    text-transform: capitalize;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--cx-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    overflow: hidden;
    z-index: 1000;
}
.profile-dropdown-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1rem;
    color: var(--cx-ink);
    font-size: .9rem;
    text-decoration: none;
    transition: background .12s;
}
.profile-dropdown-item:hover {
    background: rgba(200,166,99,.10);
    color: var(--cx-green-1);
}
.profile-dropdown-item i { font-size: 1.05rem; }
.profile-dropdown-divider {
    height: 1px;
    background: var(--cx-border);
    margin: 4px 0;
}

/* ============================================================================
   PAGE HEADER — título de cada tela
   ============================================================================ */
.page-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    flex-wrap: wrap;
}
.page-header > div { flex: 1; min-width: 0; }
.page-header h1 {
    margin: 0;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    color: var(--cx-ink) !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.page-header h1 i { color: var(--cx-gold-2) !important; font-size: 1.6rem; }
.page-header .text-muted { margin-top: .25rem; font-size: .9rem; }
.page-actions { display: flex; gap: .55rem; align-items: center; }

.link-back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .82rem;
    color: var(--cx-ink-soft);
    margin-bottom: .35rem;
    text-decoration: none;
    transition: color .12s;
}
.link-back:hover { color: var(--cx-gold-1); }

/* ============================================================================
   KPIs
   ============================================================================ */
.kpis {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}
.kpi-card {
    background: #fff !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: 12px !important;
    padding: 1.2rem 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    transition: all .2s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23,58,48,.10);
}
.kpi-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    color: #fff !important;
}
/* KPIs com tons da paleta dourada */
.kpi-blue   { background: linear-gradient(135deg, #b88842, #c8a663) !important; }
.kpi-amber  { background: linear-gradient(135deg, #c8a663, #d9b97a) !important; }
.kpi-green  { background: linear-gradient(135deg, #d9b97a, #e8d4a8) !important; }
.kpi-red    { background: linear-gradient(135deg, #a06433, #b88842) !important; }
.kpi-card > div:not(.kpi-icon) { flex: 1; min-width: 0; }
.kpi-label {
    display: block;
    font-size: .76rem;
    color: var(--cx-ink-soft);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: .15rem;
}
.kpi-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cx-ink);
}

/* ============================================================================
   KPI MODERN — versão compacta usada no /dashboard
   (cards com kpi-top, kpi-trend, kpi-spark — layout vertical menor)
   ============================================================================ */
/* KPI MODERN COMPACTO — tudo na mesma linha: icon | label+value | trend */
.kpis-modern {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: .7rem !important;
}
.kpi-card.kpi-modern {
    flex-direction: row !important;
    align-items: center !important;
    padding: .65rem .9rem !important;
    gap: .7rem !important;
}
.kpi-card.kpi-modern .kpi-top {
    display: contents;
}
.kpi-card.kpi-modern .kpi-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    font-size: 1.05rem;
    flex-shrink: 0;
    order: 1;
}
.kpi-card.kpi-modern > .kpi-value,
.kpi-card.kpi-modern > .kpi-label {
    /* fora do .kpi-top — empacotamos em um wrapper via order */
}
/* Wrap label + value no mesmo span de meio com order:2 via pseudo-pai */
.kpi-card.kpi-modern .kpi-label {
    order: 2;
    flex: 1;
    font-size: .72rem;
    line-height: 1.1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.kpi-card.kpi-modern .kpi-value {
    order: 3;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
.kpi-card.kpi-modern .kpi-trend {
    order: 4;
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: rgba(200,166,99,.12);
    color: var(--cx-ink-soft);
    flex-shrink: 0;
}
.kpi-card.kpi-modern .kpi-trend.trend-up { color: #047857; background: rgba(16,185,129,.12); }
.kpi-card.kpi-modern .kpi-trend.trend-down { color: #b91c1c; background: rgba(239,68,68,.12); }
/* Sparkline escondida no compacto — economiza vertical */
.kpi-card.kpi-modern .kpi-spark { display: none; }

/* ============================================================================
   GRID 2 colunas
   ============================================================================ */
.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 1.2rem !important;
    margin-bottom: 1.2rem !important;
}

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
    background: #fff !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
    margin-bottom: 1.2rem !important;
}
.card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: .9rem 1.4rem !important;
    border-bottom: 1px solid var(--cx-border) !important;
    background: #fafbf7 !important;
}
.card-header h2 {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--cx-ink);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.card-header h2 i { color: var(--cx-gold-2) !important; }
.card-body { padding: 1.3rem 1.4rem !important; }
.link-more {
    font-size: .82rem;
    color: var(--cx-green-2) !important;
    font-weight: 500;
    text-decoration: none;
}
.link-more:hover { color: var(--cx-gold-1) !important; }

/* ============================================================================
   BOTÕES
   ============================================================================ */
.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    background: #1B4D3E !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: .65rem 1.15rem !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 6px 16px rgba(27, 77, 62, 0.30);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(27, 77, 62, 0.45);
    background: #133a2e !important;
}
.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    background: #fff !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: 10px !important;
    padding: .6rem 1.1rem !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    color: var(--cx-ink) !important;
    cursor: pointer;
    transition: all .15s;
}
/* override do styles.css que força ícones brancos dentro de .btn-secondary
   (ghost button = texto escuro, então ícone também escuro) */
.btn-secondary i,
.btn-secondary .ti,
.btn-secondary i::before,
.btn-secondary .ti::before {
    color: var(--cx-ink) !important;
}
.btn-secondary:hover i,
.btn-secondary:hover .ti {
    color: #b88842 !important;
}
.btn-secondary:hover {
    background: #fafbf7 !important;
    border-color: var(--cx-green-2) !important;
    color: var(--cx-green-2) !important;
}

/* ============================================================================
   FILTROS, FORM, MODAL, TABELA, BADGES, TIMELINE, etc.
   ============================================================================ */
.filters {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.filters input, .filters select {
    flex: 1;
    min-width: 180px;
    padding: .6rem .9rem;
    border: 1px solid var(--cx-border);
    border-radius: 10px;
    font-size: .9rem;
    background: #fff;
    transition: all .14s;
}
.filters input:focus, .filters select:focus {
    outline: 0;
    border-color: var(--cx-green-2);
    box-shadow: 0 0 0 3px rgba(42,117,88,.12);
}

.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cx-ink);
}
.form-group .req { color: #ef4444; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--cx-border);
    border-radius: 10px;
    font-size: .92rem;
    background: #fff;
    font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: 0;
    border-color: var(--cx-green-2);
    box-shadow: 0 0 0 3px rgba(42,117,88,.12);
}
.form-group small {
    display: block;
    margin-top: .2rem;
    font-size: .76rem;
    color: var(--cx-ink-soft);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-grid .full { grid-column: 1 / -1; }

dialog.modal-dialog {
    border: 0;
    border-radius: 14px;
    padding: 0;
    max-width: 640px;
    width: 90%;
    background: #fff;
    color: var(--cx-ink);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(20,42,35,.55); backdrop-filter: blur(6px); }
.modal-form header { padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--cx-border); }
.modal-form header h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.modal-form .form-grid { padding: 1.3rem 1.6rem; }
.modal-form footer {
    padding: 1rem 1.6rem;
    border-top: 1px solid var(--cx-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    background: #fafbf7;
}

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead th {
    text-align: left;
    padding: .85rem 1.4rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cx-ink-soft);
    background: #fafbf7;
    border-bottom: 1px solid var(--cx-border);
}
.data-table tbody td {
    padding: .9rem 1.4rem;
    border-bottom: 1px solid #f3f4ed;
    font-size: .9rem;
    color: var(--cx-ink);
}
.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover { background: #fafbf7; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .8rem;
    background: #f3f4ed;
    padding: .1rem .45rem;
    border-radius: 5px;
    color: var(--cx-green-2);
}

.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge-ativo, .badge-paga, .badge-cumprido, .badge-quitado { background: rgba(42,117,88,.15); color: var(--cx-green-1); }
.badge-pendente, .badge-a_vencer, .badge-em_pagamento { background: rgba(200,166,99,.15); color: var(--cx-gold-1); }
.badge-em_andamento, .badge-em_revisao, .badge-info, .badge-normal, .badge-aprovada, .badge-protocolada { background: rgba(42,117,88,.10); color: var(--cx-green-1); }
.badge-suspenso { background: #fef3c7; color: #b45309; }
.badge-arquivado, .badge-cancelado, .badge-cancelada, .badge-rascunho, .badge-baixa { background: #f3f4ed; color: var(--cx-ink-soft); }
.badge-baixado { background: #f3e8ff; color: #6b21a8; }
.badge-extinto, .badge-perdido, .badge-vencida, .badge-inadimplente, .badge-urgente { background: #fee2e2; color: #b91c1c; }
.badge-warn, .badge-alta { background: #fef3c7; color: #b45309; }

/* ============================================================================
   EMPTY STATE — neutraliza Bootstrap .placeholder (skeleton com cursor:wait)
   ============================================================================ */
.placeholder,
td.placeholder,
p.placeholder,
div.placeholder {
    display: block !important;
    cursor: default !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    color: #9aa0a6 !important;
    font-style: normal !important;
    padding: 2.2rem 1rem !important;
    text-align: center !important;
    font-size: .92rem !important;
    min-height: auto !important;
    vertical-align: middle !important;
    animation: none !important;
}
.placeholder::before,
.placeholder::after { content: none !important; }
/* dentro de tabela, ocupa a célula sem moldura */
table .placeholder {
    border: 0 !important;
    background: transparent !important;
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid #f3f4ed;
}
.timeline li:last-child { border-bottom: 0; }
.timeline li.relevante {
    background: linear-gradient(90deg, rgba(200,166,99,.08), transparent);
    margin: 0 -1rem;
    padding: .9rem 1rem;
    border-radius: 8px;
}
.timeline-date { color: #9aa0a6; font-size: .8rem; font-weight: 500; }
.timeline strong { font-size: .92rem; }
.timeline p { margin: .2rem 0 0; color: var(--cx-ink-soft); font-size: .85rem; }

.analise-bloco {
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, rgba(42,117,88,.04), transparent);
    border: 1px solid rgba(42,117,88,.14);
    border-radius: 12px;
}
.analise-bloco h3 {
    margin: 0 0 .5rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--cx-green-1);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.score {
    margin-top: .5rem;
    display: inline-block;
    padding: .4rem .8rem;
    background: linear-gradient(135deg, var(--cx-green-1), var(--cx-green-2));
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: .85rem;
}

.chat-card { display: flex; flex-direction: column; min-height: 60vh; }
.chat-mensagens {
    flex: 1;
    padding: 1.3rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fafbf7;
}
.chat-msg {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--cx-border);
}
.chat-msg.user {
    background: linear-gradient(135deg, rgba(42,117,88,.06), transparent);
    border-color: rgba(42,117,88,.15);
}
.chat-msg.assistente { background: linear-gradient(135deg, rgba(200,166,99,.06), transparent); }
.chat-msg i {
    font-size: 1.3rem;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cx-green-1), var(--cx-green-2));
    color: #fff;
}
.chat-msg.assistente i { background: linear-gradient(135deg, var(--cx-gold-1), var(--cx-gold-2)); }
.chat-form {
    display: flex;
    gap: .5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--cx-border);
    background: #fff;
}
.chat-form textarea {
    flex: 1;
    padding: .7rem 1rem;
    border: 1px solid var(--cx-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .92rem;
    resize: none;
}
.chat-form textarea:focus {
    outline: 0;
    border-color: var(--cx-green-2);
    box-shadow: 0 0 0 3px rgba(42,117,88,.12);
}

.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch input { width: auto !important; }

.dl-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: .6rem 1.2rem;
}
.dl-grid dt {
    font-weight: 500;
    color: var(--cx-ink-soft);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.dl-grid dd { margin: 0; font-size: .92rem; }

.notif-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .8rem;
    padding: .9rem 0;
    border-bottom: 1px solid #f3f4ed;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.nao-lida {
    background: linear-gradient(90deg, rgba(200,166,99,.08), transparent);
    margin: 0 -1rem;
    padding: .9rem 1rem;
    border-radius: 8px;
}
.notif-icon {
    font-size: 1.35rem;
    color: var(--cx-green-2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: .15rem;
}
.notif-titulo { font-weight: 600; font-size: .92rem; }
.notif-mensagem { font-size: .85rem; color: var(--cx-ink-soft); margin: .15rem 0; }
.notif-meta { font-size: .77rem; color: #9aa0a6; display: flex; gap: 1rem; }

.admin-tile {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.4rem !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all .2s;
    cursor: pointer;
}
.admin-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(23,58,48,.10) !important;
    border-color: var(--cx-gold-2) !important;
}
.admin-tile strong {
    display: block;
    font-size: 1rem;
    margin-bottom: .15rem;
    color: var(--cx-ink);
}
.admin-tile p { margin: 0; font-size: .85rem; color: var(--cx-ink-soft); }

.jur-card { margin-bottom: .8rem; }
.jur-header {
    display: flex;
    gap: .8rem;
    align-items: center;
    margin-bottom: .5rem;
    flex-wrap: wrap;
    font-size: .82rem;
}
.jur-ementa {
    font-size: .9rem;
    line-height: 1.55;
    margin: 0;
    white-space: pre-wrap;
}

.alert-error {
    background: rgba(220,38,38,.08);
    color: #b91c1c;
    border: 1px solid rgba(220,38,38,.20);
    padding: .7rem 1rem;
    border-radius: 10px;
    font-size: .88rem;
}

/* Responsivo */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed !important;
        transform: translateX(-100%);
        transition: transform .25s;
        z-index: 1000;
        box-shadow: 4px 0 20px rgba(0,0,0,.20);
    }
    [data-toggled="open"] .app-sidebar { transform: translateX(0); }
    .page-main-wrapper { width: 100%; }
    .form-grid { grid-template-columns: 1fr !important; }
    .dl-grid { grid-template-columns: 1fr !important; }
    .page-header { flex-direction: column; align-items: flex-start; }
}

/* Badge de intimações novas no sidebar */
.badge-novas-intim {
    margin-left: auto;
    background: #c8a663;
    color: #173a30;
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}

/* Logo header: sticky no topo do sidebar — fica visível mesmo se rolar
   o menu (overflow-y do .app-sidebar) ou a página (sticky do próprio aside). */
.app-sidebar > .main-sidebar-header,
.main-sidebar-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    padding: 1rem !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    flex-shrink: 0 !important;
    z-index: auto !important;
}

/* Garante que main-menu-container venha logo após (sem margin-top de 75px do mdz_drive) */
.app-sidebar .main-menu-container {
    margin-top: 0 !important;
    padding: .75rem .6rem !important;
}

/* ============================================================================
   FIX: Toggle sidebar (hamburger) + Dropdown perfil
   ============================================================================ */
body.sidebar-collapsed .app-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 0 !important;
}
body.sidebar-collapsed .app-sidebar > * { display: none !important; }

@media (max-width: 991.98px) {
    /* No mobile, sidebar é off-canvas (já estava) */
    body.sidebar-collapsed .app-sidebar { transform: translateX(0) !important; width: 16rem !important; }
}

/* Dropdown perfil: usa class .is-open em vez de inline display */
.profile-dropdown {
    display: none;
}
.profile-dropdown.is-open {
    display: block;
}

/* Garante que dropdown tem z-index acima de tudo */
.profile-dropdown {
    z-index: 9999 !important;
}

/* Botão Sair destacado */
.profile-dropdown-logout {
    color: #b91c1c !important;
    font-weight: 600;
}
.profile-dropdown-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #991b1b !important;
}
.profile-dropdown-logout i { color: inherit !important; }

/* FIX: dropdown perfil estava com position fixed do styles.css — forçar absolute */
.header-profile { position: relative !important; }
.profile-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    min-width: 220px;
    background: #fff !important;
    border: 1px solid rgba(184, 136, 66, 0.20) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    padding: .35rem 0;
}
.profile-dropdown.is-open { display: block !important; }
.profile-dropdown:not(.is-open) { display: none !important; }

.profile-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: .65rem;
    padding: .7rem 1rem !important;
    color: #3a2c14 !important;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background .12s;
    cursor: pointer;
    background: transparent !important;
    border: 0 !important;
}
.profile-dropdown-item:hover {
    background: rgba(200, 166, 99, 0.14) !important;
    color: #6b4a17 !important;
}
.profile-dropdown-item i { font-size: 1.1rem; color: #b88842; }
.profile-dropdown-divider {
    height: 1px;
    background: rgba(184, 136, 66, 0.20);
    margin: .35rem 0;
}

/* ============================================================================
   DARK MODE — sidebar e cores adaptam
   ============================================================================ */
/* ============================================================================
   DARK THEME — paleta charcoal/slate (limpa, profissional)
   Sidebar mantém o verde da marca pra continuidade visual
   ============================================================================ */
[data-theme-mode="dark"] {
    --cx-bg: #0f172a;
    --cx-bg-alt: #1e293b;
    --cx-ink: #e2e8f0;
    --cx-ink-soft: #94a3b8;
    --cx-border: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="dark"] body {
    background: #0f172a !important;
    color: #e2e8f0;
}

/* Sidebar dark: charcoal com tom verde sutil — diferencia bem do light */
[data-theme-mode="dark"] aside.app-sidebar,
[data-theme-mode="dark"] .app-sidebar {
    background: #0b2419 !important;
    border-right: 0 !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5) !important;
}
[data-theme-mode="dark"] .page::before {
    background: #0b2419 !important;
}
[data-theme-mode="dark"] .main-sidebar-header,
[data-theme-mode="dark"] .app-sidebar > .main-sidebar-header {
    background: #ffffff !important;  /* logo header continua branco — logo é visível */
}

[data-theme-mode="dark"] .app-header {
    background: #1e293b !important;
    border-bottom: 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

[data-theme-mode="dark"] .header-profile-name { color: #e2e8f0 !important; }
[data-theme-mode="dark"] .header-profile-role { color: #94a3b8 !important; }
[data-theme-mode="dark"] .header-notification { color: #cbd5e1 !important; }
[data-theme-mode="dark"] .header-notification:hover { background: rgba(255,255,255,.06); color: #f1f5f9 !important; }
[data-theme-mode="dark"] .sidebar-toggle-btn { color: #cbd5e1 !important; }
[data-theme-mode="dark"] .sidebar-toggle-btn:hover { background: rgba(255,255,255,.06) !important; color: #c8a663 !important; }

/* Cards com contraste suficiente */
[data-theme-mode="dark"] .card,
[data-theme-mode="dark"] section.card {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}
[data-theme-mode="dark"] .card-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme-mode="dark"] .card-header h2,
[data-theme-mode="dark"] .card-body { color: #e2e8f0 !important; }

/* KPIs do dashboard — cards limpos */
[data-theme-mode="dark"] .kpi-card,
[data-theme-mode="dark"] .kpi-card.kpi-modern {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme-mode="dark"] .kpi-value { color: #f1f5f9 !important; }
[data-theme-mode="dark"] .kpi-label { color: #94a3b8 !important; }

/* Page header */
[data-theme-mode="dark"] .page-header h1 { color: #f1f5f9 !important; }
[data-theme-mode="dark"] .page-header p,
[data-theme-mode="dark"] .text-muted { color: #94a3b8 !important; }

/* Tabelas */
[data-theme-mode="dark"] .data-table {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-theme-mode="dark"] .data-table thead th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme-mode="dark"] .data-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme-mode="dark"] .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Inputs/selects/textareas */
[data-theme-mode="dark"] input[type="text"],
[data-theme-mode="dark"] input[type="email"],
[data-theme-mode="dark"] input[type="password"],
[data-theme-mode="dark"] input[type="search"],
[data-theme-mode="dark"] input[type="number"],
[data-theme-mode="dark"] input[type="date"],
[data-theme-mode="dark"] input[type="time"],
[data-theme-mode="dark"] input[type="datetime-local"],
[data-theme-mode="dark"] input[type="tel"],
[data-theme-mode="dark"] input[type="url"],
[data-theme-mode="dark"] select,
[data-theme-mode="dark"] textarea {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
[data-theme-mode="dark"] input::placeholder,
[data-theme-mode="dark"] textarea::placeholder {
    color: #64748b !important;
}

/* Botões */
[data-theme-mode="dark"] .btn-secondary {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme-mode="dark"] .btn-secondary:hover { background: #334155 !important; }
[data-theme-mode="dark"] .btn-secondary i,
[data-theme-mode="dark"] .btn-secondary .ti { color: #e2e8f0 !important; }

/* Modais */
[data-theme-mode="dark"] dialog.modal-dialog {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-theme-mode="dark"] dialog.modal-dialog header { border-bottom-color: rgba(255,255,255,.08) !important; }
[data-theme-mode="dark"] dialog.modal-dialog footer { border-top-color: rgba(255,255,255,.08) !important; background: #0f172a !important; }

/* Bloco de admin (split + nav) */
[data-theme-mode="dark"] .admin-nav-card { background: #1e293b !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme-mode="dark"] .admin-nav-item { color: #e2e8f0 !important; }
[data-theme-mode="dark"] .admin-nav-item:hover { background: rgba(255,255,255,.05) !important; }

/* Welcome card do dashboard (.hero-card) */
[data-theme-mode="dark"] .hero-card,
[data-theme-mode="dark"] .welcome-card {
    background: linear-gradient(135deg, #0b2419 0%, #143d31 50%, #1e5544 100%) !important;
    border: 1px solid rgba(200, 166, 99, .15) !important;
    color: #f1f5f9 !important;
}
[data-theme-mode="dark"] .hero-card .hero-greeting,
[data-theme-mode="dark"] .hero-card h1 { color: #f1f5f9 !important; }
[data-theme-mode="dark"] .hero-card p,
[data-theme-mode="dark"] .hero-card .text-muted { color: rgba(255,255,255,.85) !important; }

/* Scrollbar charcoal */
[data-theme-mode="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
[data-theme-mode="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
[data-theme-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ============================================================================
   FIX DEFINITIVO — sidebar items NUNCA ficam com texto escuro em estado
   transparente. Força white em qualquer pseudo-state quando NÃO é o item ativo.
   ============================================================================ */
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:link,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:visited,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:active,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:hover,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus-visible {
    color: #ffffff !important;
}
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:active,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:active *,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus *,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus-visible,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus-visible * {
    color: #ffffff !important;
}
/* No CLICK (mousedown) ou FOCUS, sempre tem bg visível pra texto branco contrastar */
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:active,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus,
aside.app-sidebar .main-menu li.slide:not(.active) > a.side-menu__item:focus-visible {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    outline: 0 !important;
}

/* ============================================================================
   DARK THEME — FIX DEFINITIVO DE CONTRASTE
   Auditoria detectou ~100 elementos com ratio < WCAG AA (4.5).
   Cobre: page-header h1, badges, briefing, header buttons, sub-text.
   ============================================================================ */
[data-theme-mode="dark"] body,
[data-theme-mode="dark"] .main-content {
    color: #e2e8f0 !important;
}

/* TODOS os títulos/headings em dark — não deixar herdar verde escuro */
[data-theme-mode="dark"] h1,
[data-theme-mode="dark"] h2,
[data-theme-mode="dark"] h3,
[data-theme-mode="dark"] h4,
[data-theme-mode="dark"] .page-header h1,
[data-theme-mode="dark"] .card-header h2,
[data-theme-mode="dark"] section h1,
[data-theme-mode="dark"] section h2 {
    color: #f1f5f9 !important;
}

[data-theme-mode="dark"] .text-muted,
[data-theme-mode="dark"] .page-header .text-muted,
[data-theme-mode="dark"] p.text-muted,
[data-theme-mode="dark"] small.text-muted {
    color: #94a3b8 !important;
}

/* BADGES — em dark mode, troca pra fundo escuro vibrante + texto claro */
[data-theme-mode="dark"] .badge-info,
[data-theme-mode="dark"] .badge-em_andamento,
[data-theme-mode="dark"] .badge-em_revisao,
[data-theme-mode="dark"] .badge-em_analise,
[data-theme-mode="dark"] .badge-aprovada,
[data-theme-mode="dark"] .badge-protocolada,
[data-theme-mode="dark"] .badge-lida,
[data-theme-mode="dark"] .badge-normal {
    background: rgba(96, 165, 250, .18) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, .35) !important;
}
[data-theme-mode="dark"] .badge-ativo,
[data-theme-mode="dark"] .badge-paga,
[data-theme-mode="dark"] .badge-cumprido,
[data-theme-mode="dark"] .badge-quitado,
[data-theme-mode="dark"] .badge-respondida {
    background: rgba(34, 197, 94, .18) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, .35) !important;
}
[data-theme-mode="dark"] .badge-pendente,
[data-theme-mode="dark"] .badge-a_vencer,
[data-theme-mode="dark"] .badge-em_pagamento,
[data-theme-mode="dark"] .badge-nova {
    background: rgba(251, 191, 36, .18) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, .35) !important;
}
[data-theme-mode="dark"] .badge-suspenso,
[data-theme-mode="dark"] .badge-warn,
[data-theme-mode="dark"] .badge-alta {
    background: rgba(251, 146, 60, .18) !important;
    color: #fdba74 !important;
    border-color: rgba(251, 146, 60, .35) !important;
}
[data-theme-mode="dark"] .badge-arquivado,
[data-theme-mode="dark"] .badge-cancelado,
[data-theme-mode="dark"] .badge-cancelada,
[data-theme-mode="dark"] .badge-rascunho,
[data-theme-mode="dark"] .badge-baixa,
[data-theme-mode="dark"] .badge-arquivada {
    background: rgba(148, 163, 184, .18) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, .35) !important;
}
[data-theme-mode="dark"] .badge-extinto,
[data-theme-mode="dark"] .badge-perdido,
[data-theme-mode="dark"] .badge-vencida,
[data-theme-mode="dark"] .badge-inadimplente,
[data-theme-mode="dark"] .badge-urgente {
    background: rgba(239, 68, 68, .18) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, .35) !important;
}
[data-theme-mode="dark"] .badge-baixado {
    background: rgba(168, 85, 247, .18) !important;
    color: #d8b4fe !important;
    border-color: rgba(168, 85, 247, .35) !important;
}

/* Botões hero do dashboard (Processos / Monitorar OAB / Novo Processo) */
[data-theme-mode="dark"] .hero-card .btn-secondary,
[data-theme-mode="dark"] .hero-card a.btn-secondary {
    background: rgba(255, 255, 255, .12) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, .20) !important;
}
[data-theme-mode="dark"] .hero-card .btn-primary {
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    color: #0f172a !important;
    border: 0 !important;
}

/* Briefing IA — items com tom escuro em fundo card */
[data-theme-mode="dark"] .briefing-card,
[data-theme-mode="dark"] section.briefing-card {
    background: linear-gradient(135deg, rgba(200,166,99,.08), rgba(255,255,255,.02)) !important;
    border-color: rgba(200, 166, 99, .25) !important;
}
[data-theme-mode="dark"] .briefing-card *,
[data-theme-mode="dark"] #briefing-content,
[data-theme-mode="dark"] #briefing-content * {
    color: #e2e8f0 !important;
}
[data-theme-mode="dark"] #briefing-content strong,
[data-theme-mode="dark"] #briefing-content h2,
[data-theme-mode="dark"] #briefing-content h3 {
    color: #f1f5f9 !important;
}
[data-theme-mode="dark"] #briefing-content code {
    background: rgba(255,255,255,.08) !important;
    color: #fcd34d !important;
}
[data-theme-mode="dark"] #briefing-content a { color: #93c5fd !important; }

/* Sub-text de cards (notificações "· sistema", monitor "Palavra-chave") */
[data-theme-mode="dark"] small,
[data-theme-mode="dark"] .text-soft,
[data-theme-mode="dark"] .meta {
    color: #94a3b8 !important;
}

/* Links genéricos */
[data-theme-mode="dark"] a:not(.side-menu__item):not(.btn-primary):not(.btn-secondary):not(.admin-nav-item) {
    color: #93c5fd !important;
}
[data-theme-mode="dark"] a:not(.side-menu__item):hover { color: #bfdbfe !important; }

/* Cards genéricos: card com ícone dourado/escuro vira claro */
[data-theme-mode="dark"] .card-header i,
[data-theme-mode="dark"] .card-header h2 i {
    color: #c8a663 !important;
}

/* Cache info / tooltips menores */
[data-theme-mode="dark"] .briefing-meta,
[data-theme-mode="dark"] [class*="meta"]:not(.metadata) {
    color: #64748b !important;
}

/* ============================================================================
   FIX FINAL — H1/H2 ainda saindo verde escuro, btn-primary roxo, botões hero
   Specificity alta pra ganhar de qualquer regra anterior.
   ============================================================================ */
html[data-theme-mode="dark"] body .page-header h1,
html[data-theme-mode="dark"] body section .page-header h1,
html[data-theme-mode="dark"] body h1,
html[data-theme-mode="dark"] body h2,
html[data-theme-mode="dark"] body h3,
html[data-theme-mode="dark"] body .card-header h2,
html[data-theme-mode="dark"] body .card-header h2 i,
html[data-theme-mode="dark"] body .page-header h1 i {
    color: #f1f5f9 !important;
}

/* OVERRIDE GLOBAL — primary-rgb passa a ser gold pra TODA regra Ynex resolver na cor da marca */
html, html body, :root {
    --primary-rgb: 200, 166, 99 !important;
    --primary-color: #c8a663 !important;
}

/* Btn-primary nunca pode ser roxo — sempre dourado da marca */
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary {
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    background-color: #b88842 !important;
    color: #ffffff !important;
    border: 0 !important;
}
html body .btn-primary:hover { filter: brightness(1.08); }

/* Dashboard inline styles — alerta/acao body em DARK precisam de texto claro
   (template tem color: #142a23 hardcoded que fica invisível) */
html[data-theme-mode="dark"] body .alerta-body strong,
html[data-theme-mode="dark"] body .acao-body strong,
html[data-theme-mode="dark"] body .alerta-item strong,
html[data-theme-mode="dark"] body .acao-item strong {
    color: #f1f5f9 !important;
}
html[data-theme-mode="dark"] body .alerta-body small,
html[data-theme-mode="dark"] body .acao-body small {
    color: #94a3b8 !important;
}
html[data-theme-mode="dark"] body .alerta-cta {
    background: rgba(255, 255, 255, .06) !important;
    color: #c8a663 !important;
}
html[data-theme-mode="dark"] body .alerta-cta:hover {
    background: rgba(200, 166, 99, .18) !important;
    color: #fcd34d !important;
}
html[data-theme-mode="dark"] body .alerta-item.sev-alta .alerta-ic { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
html[data-theme-mode="dark"] body .alerta-item.sev-media .alerta-ic { background: rgba(251,146,60,.15) !important; color: #fdba74 !important; }
html[data-theme-mode="dark"] body .alerta-item.sev-info .alerta-ic { background: rgba(96,165,250,.15) !important; color: #93c5fd !important; }
html[data-theme-mode="dark"] body .alerta-item { border-bottom-color: rgba(255,255,255,.06) !important; }
html[data-theme-mode="dark"] body .acao-item { border-bottom-color: rgba(255,255,255,.06) !important; }

/* Briefing-meta (cache info) e similares */
html[data-theme-mode="dark"] body .briefing-meta,
html[data-theme-mode="dark"] body .briefing-warning {
    color: #94a3b8 !important;
}

/* Em DARK mode: <strong> dentro de cards/tabelas/listas tem texto claro
   (muitas listas usam <strong> como título de linha — sem fix viram pretas) */
html[data-theme-mode="dark"] body .card-body strong,
html[data-theme-mode="dark"] body .card-body td strong,
html[data-theme-mode="dark"] body .card-body li strong,
html[data-theme-mode="dark"] body .data-table tbody strong,
html[data-theme-mode="dark"] body .data-table td strong {
    color: #f1f5f9 !important;
}
html[data-theme-mode="dark"] body .card-body code,
html[data-theme-mode="dark"] body .data-table code {
    background: rgba(255,255,255,.06) !important;
    color: #fcd34d !important;
}
/* Definition lists (dl-grid) usadas em telas de detalhe */
html[data-theme-mode="dark"] body .dl-grid dt {
    color: #94a3b8 !important;
}
html[data-theme-mode="dark"] body .dl-grid dd {
    color: #f1f5f9 !important;
}

/* Hero card — botões secondary com bg escuro pra texto branco contrastar */
html[data-theme-mode="dark"] body .hero-card .btn-secondary,
html[data-theme-mode="dark"] body .hero-card a.btn-secondary {
    background: rgba(0, 0, 0, .25) !important;
    background-color: rgba(0, 0, 0, .25) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .25) !important;
}
html[data-theme-mode="dark"] body .hero-card .btn-secondary:hover {
    background: rgba(0, 0, 0, .40) !important;
}

/* No light theme também — hero-card tem bg verde, botões precisam estar legíveis */
html:not([data-theme-mode="dark"]) body .hero-card .btn-secondary {
    background: rgba(255, 255, 255, .15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .35) !important;
}
html:not([data-theme-mode="dark"]) body .hero-card .btn-secondary i {
    color: #ffffff !important;
}
html:not([data-theme-mode="dark"]) body .hero-card .btn-secondary:hover {
    background: rgba(255, 255, 255, .25) !important;
}

[data-theme-mode="dark"] .data-table thead th {
    background: #1f160c !important;
    color: #d9b97a !important;
    border-bottom-color: rgba(200, 166, 99, 0.18) !important;
}
[data-theme-mode="dark"] .data-table tbody td {
    color: #f4ead4 !important;
    border-bottom-color: rgba(200, 166, 99, 0.10) !important;
}
[data-theme-mode="dark"] .data-table tbody tr:hover { background: rgba(200, 166, 99, 0.08) !important; }
[data-theme-mode="dark"] .filters input,
[data-theme-mode="dark"] .filters select,
[data-theme-mode="dark"] .form-group input,
[data-theme-mode="dark"] .form-group select,
[data-theme-mode="dark"] .form-group textarea {
    background: #1f160c !important;
    border-color: rgba(200, 166, 99, 0.20) !important;
    color: #f4ead4 !important;
}

[data-theme-mode="dark"] .profile-dropdown {
    background: #2a1f10 !important;
    border-color: rgba(200, 166, 99, 0.20) !important;
}
[data-theme-mode="dark"] .profile-dropdown-item { color: #f4ead4 !important; }
[data-theme-mode="dark"] .profile-dropdown-item:hover { background: rgba(200, 166, 99, 0.15) !important; }
[data-theme-mode="dark"] .profile-dropdown-divider { background: rgba(200, 166, 99, 0.18) !important; }

/* ============================================================================
   FIX FORÇADO: legibilidade do menu sobre #1B4D3E
   ============================================================================ */
.app-sidebar .main-menu .slide .side-menu__item,
.app-sidebar .main-menu .slide .side-menu__item span,
.app-sidebar .main-menu .slide .side-menu__label,
.app-sidebar .main-menu .slide .side-menu__icon,
.app-sidebar .main-menu-container a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    font-weight: 600 !important;
}

.app-sidebar .main-menu .slide .side-menu__item {
    font-size: 1rem !important;
    padding: .85rem 1rem !important;
    letter-spacing: .015em;
}

.app-sidebar .main-menu .slide.active .side-menu__item,
.app-sidebar .main-menu .slide.active .side-menu__item span,
.app-sidebar .main-menu .slide.active .side-menu__label,
.app-sidebar .main-menu .slide.active .side-menu__icon {
    color: #1B4D3E !important;
    background: linear-gradient(135deg, #e3c685, #c8a663) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(200, 166, 99, 0.35);
}

/* removido: regra antiga que aplicava background no span/label/icon —
   substituída pelo bloco final "Ynex sidebar fix" que só põe bg no <a>. */
.app-sidebar .main-menu .slide:not(.active) .side-menu__item:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

.app-sidebar .side-menu__icon {
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
    width: 24px;
    text-align: center;
}

/* OVERRIDE FINAL: item ativo do menu — forçar bg dourado e texto escuro legível */
.app-sidebar .main-menu li.slide.active > .side-menu__item,
.app-sidebar .main-menu li.slide.active > a.side-menu__item,
aside.app-sidebar li.active a.side-menu__item {
    background: linear-gradient(135deg, #e3c685, #c8a663) !important;
    background-color: #c8a663 !important;
    color: #1B4D3E !important;
}
.app-sidebar .main-menu li.slide.active > .side-menu__item *,
.app-sidebar .main-menu li.slide.active span,
.app-sidebar .main-menu li.slide.active i {
    color: #1B4D3E !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Item NÃO ativo: texto sempre branco e visível */
.app-sidebar .main-menu li.slide:not(.active) > .side-menu__item,
.app-sidebar .main-menu li.slide:not(.active) > .side-menu__item *,
.app-sidebar .main-menu li.slide:not(.active) span,
.app-sidebar .main-menu li.slide:not(.active) i {
    color: #ffffff !important;
}

/* MAX CONTRASTE: menu sidebar — texto bem grande e negrito */
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item span,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__label {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    opacity: 1 !important;
}
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__icon {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    opacity: 1 !important;
}
aside.app-sidebar .main-menu .slide .side-menu__item {
    padding: .9rem 1rem !important;
    margin-bottom: 4px !important;
}

/* Cache bust — força reload */
.cx-css-version-12 { display: none; }

/* ============================================================================
   AJUSTES PEDIDOS — header sidebar branco, menu, hover, toggle, ações, badges
   ============================================================================ */

/* 1. Header do sidebar com fundo BRANCO e logo MAIOR */
.app-sidebar > .main-sidebar-header,
aside.app-sidebar .main-sidebar-header {
    background: #ffffff !important;
    padding: 1.4rem 1rem !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.app-sidebar .brand-logo,
aside.app-sidebar .brand-logo {
    height: 130px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: none !important;  /* logo ORIGINAL */
}

/* 2. Texto do menu MENOR (era 1.05rem 700, ficou muito grande) */
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item span,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__label {
    color: #ffffff !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.20) !important;
}
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__icon {
    color: #ffffff !important;
    font-size: 1.15rem !important;
}
aside.app-sidebar .main-menu .slide .side-menu__item {
    padding: .65rem .9rem !important;
    margin-bottom: 2px !important;
}

/* 3. HOVER do menu — bordas arredondadas, sem retângulo cortado */
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item:hover {
    background: rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    transform: translateX(2px);
}
aside.app-sidebar .main-menu li.slide.active > .side-menu__item {
    border-radius: 10px !important;
}

/* 4. Botão de tema toggle — fundo transparente, ícone escuro visível no header branco */
.header-theme-toggle .btn,
#themeToggleBtn,
.header-theme-toggle .btn-dark,
#themeToggleBtn.btn-dark {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #1B4D3E !important;
    width: 40px; height: 40px;
    border-radius: 10px;
    transition: background .14s, color .14s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.header-theme-toggle .btn i,
#themeToggleBtn i,
#themeIcon {
    color: #1B4D3E !important;
    font-size: 1.15rem !important;
}
.header-theme-toggle .btn:hover,
#themeToggleBtn:hover {
    background: rgba(27,77,62,.08) !important;
    color: #b88842 !important;
}
.header-theme-toggle .btn:hover i,
#themeToggleBtn:hover i,
#themeToggleBtn:hover #themeIcon {
    color: #b88842 !important;
}
[data-theme-mode="dark"] .header-theme-toggle .btn,
[data-theme-mode="dark"] #themeToggleBtn {
    border-color: rgba(217,185,122,.30) !important;
    color: #d9b97a !important;
}
[data-theme-mode="dark"] #themeToggleBtn i,
[data-theme-mode="dark"] #themeIcon {
    color: #d9b97a !important;
}

/* 5. Botões "Novo X" SEMPRE à direita — força page-actions ficar no final */
.page-header {
    flex-wrap: nowrap !important;
}
.page-header > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.page-header .page-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: flex-start !important;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .page-header { flex-wrap: wrap !important; }
    .page-header .page-actions { width: 100%; justify-content: flex-end; }
}

/* 6. Badges com contraste legível em TODAS as cores */
.badge {
    padding: .25rem .65rem !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border: 1px solid transparent !important;
    line-height: 1.4 !important;
}
.badge-ativo, .badge-paga, .badge-cumprido, .badge-quitado, .badge-respondida {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
}
.badge-pendente, .badge-a_vencer, .badge-em_pagamento, .badge-nova {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}
.badge-em_andamento, .badge-em_revisao, .badge-em_analise {
    background: #dbeafe !important;
    color: #1e3a8a !important;
    border-color: #bfdbfe !important;
}
.badge-info, .badge-normal, .badge-aprovada, .badge-protocolada, .badge-lida {
    background: rgba(27,77,62,.14) !important;
    color: #0d2f25 !important;
    border-color: rgba(27,77,62,.30) !important;
}
.badge-suspenso {
    background: #fed7aa !important;
    color: #7c2d12 !important;
    border-color: #fdba74 !important;
}
.badge-arquivado, .badge-cancelado, .badge-cancelada, .badge-rascunho, .badge-baixa, .badge-arquivada {
    background: #e5e7eb !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}
.badge-baixado {
    background: #f3e8ff !important;
    color: #581c87 !important;
    border-color: #e9d5ff !important;
}
.badge-extinto, .badge-perdido, .badge-vencida, .badge-inadimplente, .badge-urgente {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}
.badge-warn, .badge-alta {
    background: #fed7aa !important;
    color: #9a3412 !important;
    border-color: #fdba74 !important;
}

/* ============================================================================
   MODAL PERFIL
   ============================================================================ */
.modal-perfil {
    max-width: 720px !important;
    max-height: 90vh !important;
    width: 95% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.modal-perfil header {
    flex-shrink: 0 !important;
    padding: 1rem 1.4rem !important;
    border-bottom: 1px solid var(--cx-border) !important;
}
.modal-perfil header h2 { margin: 0; font-size: 1.15rem; }
.modal-perfil .perfil-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 1.2rem 1.4rem !important;
}
.modal-perfil footer {
    flex-shrink: 0 !important;
    padding: .9rem 1.4rem !important;
    border-top: 1px solid var(--cx-border) !important;
    background: #fafbf7 !important;
    display: flex; gap: .5rem; justify-content: flex-end;
}
.modal-perfil .perfil-avatar-wrap img {
    width: 90px !important;
    height: 90px !important;
}
.modal-perfil .btn-close-modal {
    background: transparent !important;
    border: 0 !important;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--cx-ink-soft);
    line-height: 1;
    padding: 0 .5rem;
    margin-left: auto;
}
.modal-perfil .btn-close-modal:hover { color: #b91c1c; }
.modal-perfil header { display: flex !important; align-items: center; gap: .8rem; }
.modal-perfil header h2 i { color: #c8a663; margin-right: .3rem; }

.perfil-body { padding: 1.4rem 1.7rem; }
.perfil-avatar-section {
    text-align: center;
    padding-bottom: 1.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(184,136,66,.25);
}
.perfil-avatar-wrap {
    position: relative;
    display: inline-block;
}
.perfil-avatar-wrap img {
    width: 110px; height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #c8a663;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.perfil-avatar-edit {
    position: absolute;
    bottom: 0; right: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #1B4D3E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    border: 2px solid #fff;
}
.perfil-avatar-edit:hover { background: #c8a663; transform: scale(1.05); }
.perfil-avatar-edit i { font-size: 1.1rem; }
.perfil-hint {
    margin: .8rem 0 0;
    font-size: .82rem;
    color: var(--cx-ink-soft);
}

/* ============================================================================
   ADMIN LAYOUT SPLIT — sidebar de configurações à esquerda + conteúdo à direita
   ============================================================================ */
.admin-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 0;
}
.admin-nav-card {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid var(--cx-border);
    border-radius: 14px;
    padding: .7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-nav-item {
    display: flex !important;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    color: var(--cx-ink) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: all .14s;
    background: transparent !important;
    border: 0 !important;
}
.admin-nav-item:hover {
    background: rgba(184,136,66,.10) !important;
    color: #1B4D3E !important;
}
.admin-nav-item.active {
    background: #1B4D3E !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(27,77,62,.20);
}
.admin-nav-item i {
    font-size: 1.2rem;
    width: 24px;
    flex-shrink: 0;
    color: #c8a663;
}
.admin-nav-item.active i { color: #e3c685; }
.admin-content-area {
    min-width: 0;
}

@media (max-width: 900px) {
    .admin-split { grid-template-columns: 1fr; }
    .admin-nav-card { position: static; flex-direction: row; flex-wrap: wrap; }
    .admin-nav-item { flex: 1 1 auto; }
}

/* ============================================================================
   PÁGINAS EMBARCADAS NO IFRAME do /admin (param ?embedded=1)
   ============================================================================ */
body.embedded .app-sidebar,
body.embedded .app-header { display: none !important; }
body.embedded .page-main-wrapper,
body.embedded .main-content { padding: 1.4rem !important; }
body.embedded .container-fluid { padding: 0 !important; }
body.embedded { background: transparent !important; }
body.embedded .page { display: block !important; }

/* ============================================================================
   AJUSTES FINOS — sidebar header alinhado com app-header
   ============================================================================ */
.app-sidebar > .main-sidebar-header,
aside.app-sidebar .main-sidebar-header {
    background: #ffffff !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: .5rem .75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(184,136,66,.18) !important;
    overflow: hidden !important;
}
.app-sidebar .brand-logo,
aside.app-sidebar .brand-logo {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
}

/* Garante que app-header tem 76px também (alinha com o sidebar header) */
.app-header {
    height: 76px !important;
    min-height: 76px !important;
}

/* Empty states bonitos */
.empty-chart, .empty-mini {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--cx-ink-soft);
}
.empty-chart i, .empty-mini i {
    font-size: 2.5rem;
    color: #c8a663;
    opacity: 0.5;
    display: block;
    margin-bottom: .5rem;
}
.empty-chart p, .empty-mini p {
    margin: 0;
    font-weight: 600;
    font-size: .92rem;
    color: var(--cx-ink);
}
.empty-mini small {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--cx-ink-soft);
    font-style: italic;
}

/* ============================================================================
   FIX DEFINITIVO HOVER MENU — bordas redondas com TODA especificidade
   ============================================================================ */
html aside.app-sidebar nav .main-menu li.slide .side-menu__item,
html aside.app-sidebar nav .main-menu li.slide a.side-menu__item,
aside.app-sidebar .main-menu .slide .side-menu__item {
    border-radius: 10px !important;
}
html aside.app-sidebar nav .main-menu li.slide .side-menu__item:hover,
aside.app-sidebar .main-menu .slide .side-menu__item:hover {
    border-radius: 10px !important;
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
}
html aside.app-sidebar nav .main-menu li.slide.active .side-menu__item,
aside.app-sidebar .main-menu .slide.active .side-menu__item {
    border-radius: 10px !important;
}

/* HOVER apenas no ITEM, NUNCA no span/label/icon */
aside.app-sidebar .side-menu__item span,
aside.app-sidebar .side-menu__label,
aside.app-sidebar .side-menu__icon {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
aside.app-sidebar .side-menu__item:hover span,
aside.app-sidebar .side-menu__item:hover .side-menu__label,
aside.app-sidebar .side-menu__item:hover .side-menu__icon,
aside.app-sidebar .side-menu__label:hover,
aside.app-sidebar .side-menu__icon:hover {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Menu sem negrito */
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item span,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__label {
    font-weight: 400 !important;
    text-shadow: none !important;
}
aside.app-sidebar .main-menu li.slide.active .side-menu__item,
aside.app-sidebar .main-menu li.slide.active .side-menu__item span,
aside.app-sidebar .main-menu li.slide.active .side-menu__label {
    font-weight: 500 !important;
}

/* ==========================================================================
   FIX FINAL — modal perfil garantir interação + iframe largura total + hover
   ========================================================================== */

/* Modal perfil: garante que TODOS os campos são clicáveis e editáveis */
#modalPerfil input:not([disabled]),
#modalPerfil select:not([disabled]),
#modalPerfil textarea:not([disabled]),
#modalPerfil button {
    pointer-events: auto !important;
    user-select: text !important;
    opacity: 1 !important;
    background: #fff !important;
    color: #142a23 !important;
    cursor: text !important;
}
#modalPerfil button { cursor: pointer !important; }
#modalPerfil { pointer-events: auto !important; }
#modalPerfil * { pointer-events: auto !important; }
/* Restaura cursor pointer onde precisa */
#modalPerfil .perfil-avatar-edit,
#modalPerfil .btn-close-modal,
#modalPerfil [type=submit],
#modalPerfil [data-close],
#modalPerfil button { cursor: pointer !important; }
#modalPerfil [type=checkbox] { cursor: pointer !important; }

/* Iframe admin LARGURA TOTAL */
.admin-split { display: grid !important; grid-template-columns: 240px 1fr !important; gap: 1.2rem !important; }
.admin-content-area { width: 100% !important; min-width: 0 !important; }
#adminFrame { width: 100% !important; min-width: 0 !important; min-height: 720px !important; height: calc(100vh - 160px) !important; }

/* HOVER MENU — RESET TOTAL para qualquer descendente do item */
aside.app-sidebar .side-menu__item *,
aside.app-sidebar .side-menu__item *::before,
aside.app-sidebar .side-menu__item *::after,
aside.app-sidebar .side-menu__item:hover *,
aside.app-sidebar .side-menu__item:hover *::before,
aside.app-sidebar .side-menu__item:hover *::after {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
/* só o item em si pode ter bg */
aside.app-sidebar .side-menu__item {
    background-color: transparent !important;
}
aside.app-sidebar .side-menu__item:hover {
    background-color: rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
}
aside.app-sidebar .slide.active .side-menu__item {
    background: linear-gradient(135deg, #e3c685, #c8a663) !important;
    border-radius: 10px !important;
}

/* HOVER MENU — RESET TOTAL definitivo */
aside.app-sidebar a.side-menu__item,
aside.app-sidebar a.side-menu__item:hover,
aside.app-sidebar a.side-menu__item:focus,
aside.app-sidebar a.side-menu__item:active,
aside.app-sidebar a.side-menu__item:visited {
    text-decoration: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}
aside.app-sidebar a.side-menu__item *,
aside.app-sidebar a.side-menu__item:hover * {
    text-decoration: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

/* ============================================================================
   FIX DEFINITIVO MODAL TRAVADO
   modal-fix.css aplica `pointer-events: none` em .modal-dialog (Bootstrap pattern)
   mas nossos <dialog class="modal-dialog"> são nativos e ficam intocáveis.
   ============================================================================ */
dialog.modal-dialog,
dialog.modal-dialog * {
    pointer-events: auto !important;
}
dialog.modal-dialog {
    border: 0 !important;
    border-radius: 14px !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.25) !important;
    max-width: min(720px, 95vw) !important;
    max-height: 90vh !important;
    overflow: auto !important;
    margin: auto !important;
}
/* Editor Collabora precisa ser bem largo (98vw) — override do max-width acima */
dialog#modalCollaboraEditor.modal-dialog {
    width: 98vw !important;
    height: 95vh !important;
    max-width: 98vw !important;
    max-height: 95vh !important;
    overflow: hidden !important;
}
dialog.modal-dialog::backdrop {
    background: rgba(0,0,0,.45) !important;
}

/* ============================================================================
   HOVER/CLICK/FOCUS MENU — definitivo: bg só no <a>, NUNCA nos filhos
   Em qualquer estado (hover, focus, active, click), os spans/icons NÃO ganham
   background ou borda. O retângulo só pode aparecer no <a> com border-radius.
   ============================================================================ */
aside.app-sidebar a.side-menu__item:hover *,
aside.app-sidebar a.side-menu__item:focus *,
aside.app-sidebar a.side-menu__item:active *,
aside.app-sidebar a.side-menu__item.active *,
aside.app-sidebar li.slide.active a.side-menu__item *,
aside.app-sidebar li.slide.active a.side-menu__item:hover *,
aside.app-sidebar li.slide.active a.side-menu__item:focus *,
aside.app-sidebar li.slide.active a.side-menu__item:active * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
}

aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item:hover,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item:focus,
aside.app-sidebar .main-menu li.slide:not(.active) .side-menu__item:active {
    background: rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Item ATIVO: o pill dourado fica SÓ no <a>, nunca nos spans/i */
aside.app-sidebar .main-menu li.slide.active > .side-menu__item,
aside.app-sidebar .main-menu li.slide.active > a.side-menu__item {
    background: linear-gradient(135deg, #e3c685, #c8a663) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(200, 166, 99, 0.30) !important;
}

/* ============================================================================
   EMPTY STATE BONITO — alternativa moderna ao .placeholder
   Use: <div class="empty-state"><i class="ti ti-inbox"></i><p>Nada aqui</p></div>
   ============================================================================ */
.empty-state {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    color: #9ca3af;
    text-align: center;
    background: transparent;
}
.empty-state i,
.empty-state svg {
    font-size: 2.6rem;
    color: #d1d5db;
    line-height: 1;
}
.empty-state p,
.empty-state span {
    margin: 0;
    font-size: .95rem;
    color: #6b7280;
}
.empty-state small {
    font-size: .82rem;
    color: #9ca3af;
}
/* dentro de tabela */
table .empty-state-row td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* ============================================================================
   YNEX SIDEBAR — fix DEFINITIVO trabalhando COM o tema, não contra
   O Ynex (styles.css 21104+) usa --menu-prime-color e --primary-color para
   colorir texto + bg do hover/active. Em vez de override de regra, redefinimos
   as variáveis dentro do <aside> pra valores que combinam com o fundo verde.
   ============================================================================ */
aside.app-sidebar {
    /* Texto padrão do menu = branco (fundo é verde escuro #1B4D3E) */
    --menu-prime-color: #ffffff;
    /* Primary color local: usado pelo Ynex no hover/active. Trocamos pelo
       dourado do nosso branding pra item ATIVO (.side-menu__item.active). */
    --primary-color: #c8a663;
    --primary-rgb: 200, 166, 99;
}

/* HOVER — Ynex usa --primary-color no bg. Redefinimos pra hover ser
   um overlay branco mais visível (rgba .18) com pill arredondado.
   Filhos (label/icon/angle) ficam transparentes — bg fica SÓ no <a>. */
aside.app-sidebar .side-menu__item:hover,
aside.app-sidebar .main-menu .slide .side-menu__item:hover,
aside.app-sidebar .main-menu .slide:not(.active) .side-menu__item:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    border: 0 !important;
}
/* TUDO dentro do <a> com hover/focus/active transparente — sem retângulo no texto */
aside.app-sidebar .side-menu__item:hover *,
aside.app-sidebar .side-menu__item:hover .side-menu__label,
aside.app-sidebar .side-menu__item:hover .side-menu__icon,
aside.app-sidebar .side-menu__item:hover .side-menu__angle,
aside.app-sidebar .side-menu__item:hover span,
aside.app-sidebar .side-menu__item:focus *,
aside.app-sidebar .side-menu__item:active * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    text-shadow: none !important;
}

/* HOVER labels/ícones — Ynex força #fff em :hover .side-menu__label.
   Mantemos branco — está correto. Sem override necessário, mas deixa
   redundante pra garantir. */
aside.app-sidebar .side-menu__item:hover .side-menu__label,
aside.app-sidebar .side-menu__item:hover .side-menu__icon,
aside.app-sidebar .side-menu__item:hover .side-menu__angle,
aside.app-sidebar .side-menu__item:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ITEM ATIVO — Ynex aplica .side-menu__item.active { bg: --primary-color;
   color: var(--primary-color) }. O `color: --primary-color` no item raiz
   torna o TEXTO da MESMA COR do bg = invisível. Por isso parece "preto":
   na verdade é roxo Ynex que ficou dourado nosso, mas o texto sumiu.
   Forçamos: bg dourado, texto verde escuro contrastado. */
aside.app-sidebar .side-menu__item.active,
aside.app-sidebar .side-menu__item:hover.active,
aside.app-sidebar .main-menu .slide.active > .side-menu__item,
aside.app-sidebar .main-menu .slide.active > a.side-menu__item {
    background: linear-gradient(135deg, #e3c685, #c8a663) !important;
    background-color: #c8a663 !important;
    color: #1B4D3E !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(200, 166, 99, 0.35) !important;
}
aside.app-sidebar .side-menu__item.active .side-menu__label,
aside.app-sidebar .side-menu__item.active .side-menu__icon,
aside.app-sidebar .side-menu__item.active .side-menu__angle,
aside.app-sidebar .side-menu__item.active *,
aside.app-sidebar .main-menu .slide.active .side-menu__label,
aside.app-sidebar .main-menu .slide.active .side-menu__icon,
aside.app-sidebar .main-menu .slide.active * {
    color: #1B4D3E !important;
    fill: #1B4D3E !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* ITEM NÃO-ATIVO — texto branco padrão (sem hover) */
aside.app-sidebar .main-menu .slide:not(.active) > .side-menu__item,
aside.app-sidebar .main-menu .slide:not(.active) > .side-menu__item .side-menu__label,
aside.app-sidebar .main-menu .slide:not(.active) > .side-menu__item .side-menu__icon,
aside.app-sidebar .main-menu .slide:not(.active) > .side-menu__item .side-menu__angle {
    color: #ffffff !important;
}

/* CLICK/MOUSEDOWN (:active pseudo) — link nativo pode aplicar cor escura.
   Forçamos manter branco em :active de itens não-selecionados, dourado→verde
   em :active de itens já-selecionados. */
aside.app-sidebar .main-menu .slide:not(.active) > .side-menu__item:active,
aside.app-sidebar .main-menu .slide:not(.active) > .side-menu__item:active * {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
}
aside.app-sidebar .main-menu .slide.active > .side-menu__item:active,
aside.app-sidebar .main-menu .slide.active > .side-menu__item:active * {
    color: #1B4D3E !important;
}

/* Fim do bloco Ynex sidebar fix */

/* ============================================================================
   HEADER + SIDEBAR — sem borda, com sombra pra profundidade visual
   ============================================================================ */
aside.app-sidebar .main-sidebar-header,
.app-sidebar > .main-sidebar-header,
.main-sidebar-header {
    border-bottom: 0 !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(27, 77, 62, 0.18) !important;
}
header.app-header,
.app-header {
    border-bottom: 0 !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(27, 77, 62, 0.18) !important;
}
/* Sombra do sidebar (pra direita) — separa visualmente do conteúdo */
aside.app-sidebar,
.app-sidebar {
    box-shadow: 4px 0 14px rgba(27, 77, 62, 0.18) !important;
}
/* E também da pseudo-faixa verde fixa que evita o efeito "branco lateral" */
.page::before {
    box-shadow: 4px 0 14px rgba(27, 77, 62, 0.18) !important;
}

/* ============================================================================
   SKELETON LOADERS — preload visual nos cards de IA do dashboard
   ============================================================================ */
@keyframes skeleton-pulse {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-block, .skeleton-list { display: flex; flex-direction: column; gap: .55rem; }
.skeleton-line {
    height: .85rem;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(200,166,99,.10) 0%, rgba(200,166,99,.20) 50%, rgba(200,166,99,.10) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
}
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.w-85 { width: 85%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-65 { width: 65%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-55 { width: 55%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-45 { width: 45%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(200,166,99,.10) 0%, rgba(200,166,99,.20) 50%, rgba(200,166,99,.10) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    flex-shrink: 0;
}
.skeleton-flex {
    flex: 1; display: flex; flex-direction: column; gap: .35rem;
}
[data-theme-mode="dark"] .skeleton-line,
[data-theme-mode="dark"] .skeleton-circle {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
}

/* ============================================================================
   LOGO MINI no header quando sidebar colapsada
   ============================================================================ */
.header-logo-mini {
    display: none;
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    margin-left: .8rem;
    transition: opacity .2s;
}
body.sidebar-collapsed .header-logo-mini {
    display: inline-block;
}

/* ============================================================================
   /integracoes — botões "Configurar" com cores do sistema (verde + dourado)
   ============================================================================ */
.integracao-card .btn-config,
.integracao-card a.btn-config,
.integracao-card button.btn-config,
a.btn-config-integracao,
.btn-config-integracao {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .55rem 1.05rem !important;
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
    cursor: pointer !important;
}
.integracao-card .btn-config:hover,
.integracao-card a.btn-config:hover,
a.btn-config-integracao:hover,
.btn-config-integracao:hover {
    background: linear-gradient(135deg, #d9b97a, #c8a663) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200,166,99,.30) !important;
    color: #ffffff !important;
}
.integracao-card .btn-config:active,
a.btn-config-integracao:active { transform: translateY(0); }
.integracao-card .btn-config i,
a.btn-config-integracao i { color: #ffffff !important; }

/* fallback genérico: qualquer link com classe contendo "config" no /integracoes */
.integracoes-page a[href*="/admin/config"],
.integracoes-grid a[href*="/admin/config"],
.integracao-card a[href*="/admin/config"] {
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* Card de integração — borda da marca */
.integracao-card {
    border: 1px solid rgba(200, 166, 99, .25) !important;
    transition: all .2s;
}
.integracao-card:hover {
    border-color: rgba(200, 166, 99, .55) !important;
    box-shadow: 0 8px 24px rgba(27,77,62,.10) !important;
    transform: translateY(-2px);
}
[data-theme-mode="dark"] .integracao-card {
    border-color: rgba(200, 166, 99, .20) !important;
    background: #1e293b !important;
}

/* ============================================================================
   /lgpd e similares — botões "Negar"/"Atender" sem branco em branco
   E grid de KPIs ocupando toda a largura disponível
   ============================================================================ */
.btn-negar,
.btn-rejeitar,
button.btn-negar,
button.btn-rejeitar,
.lgpd-btn-negar {
    background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: .5rem .95rem !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
.btn-negar:hover, .btn-rejeitar:hover, .lgpd-btn-negar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 4px 14px rgba(185,28,28,.30) !important;
}
.btn-atender,
.btn-aprovar-acao,
button.btn-atender {
    background: linear-gradient(135deg, #047857, #065f46) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: .5rem .95rem !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
.btn-atender:hover, .btn-aprovar-acao:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 0 4px 14px rgba(4,120,87,.30) !important;
}

/* Grid de KPIs (cards do topo de páginas) — usa toda largura sem cortar */
.kpis-grid,
.lgpd-kpis,
.timesheet-kpis,
.recebiveis-kpis,
section.grid-4,
section.grid-kpis {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    margin-bottom: 1.2rem !important;
}
.lgpd-kpi-card,
.timesheet-kpi-card,
.recebiveis-kpi-card {
    overflow: visible !important;
    min-width: 0 !important;
}

/* Cards genéricos não cortam conteúdo no responsivo */
.card-body { overflow-wrap: break-word; word-break: normal; }
.card-body .kpi-value, .card-body strong { white-space: normal; }

/* ============================================================================
   Sidebar scroll-padding pra item ativo nunca ficar escondido
   ============================================================================ */
aside.app-sidebar {
    scroll-padding-top: 100px !important;
    scroll-padding-bottom: 40px !important;
    scroll-behavior: smooth;
}

/* ============================================================================
   /relatorios — alinhamento dos filtros
   /timesheet — botão X de fechar modal padronizado
   ============================================================================ */
.relatorios-filtros,
.controladoria-filtros,
.filtros-page {
    display: flex !important;
    align-items: end !important;
    gap: .8rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.2rem !important;
}
.relatorios-filtros .form-group,
.controladoria-filtros .form-group,
.filtros-page .form-group {
    flex: 1 1 180px !important;
    min-width: 180px !important;
    margin-bottom: 0 !important;
}
.relatorios-filtros label,
.controladoria-filtros label,
.filtros-page label {
    font-size: .75rem !important;
    color: var(--cx-ink-soft) !important;
    margin-bottom: .25rem !important;
    display: block !important;
}
.relatorios-filtros input,
.relatorios-filtros select,
.controladoria-filtros input,
.controladoria-filtros select,
.filtros-page input,
.filtros-page select {
    width: 100% !important;
    height: 38px !important;
    padding: .4rem .7rem !important;
}
.relatorios-filtros button,
.controladoria-filtros button,
.filtros-page button {
    height: 38px !important;
    align-self: end !important;
}

/* X de fechar dialog padrão — visível, posicionado, na cor da marca */
dialog .btn-close-modal,
dialog button[data-close]:not(.btn-secondary):not(.btn-primary) {
    position: absolute !important;
    top: .8rem !important;
    right: .8rem !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.05) !important;
    border: 0 !important;
    color: var(--cx-ink) !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .15s !important;
    z-index: 10 !important;
}
dialog .btn-close-modal:hover,
dialog button[data-close]:not(.btn-secondary):not(.btn-primary):hover {
    background: rgba(185,28,28,.10) !important;
    color: #b91c1c !important;
    transform: rotate(90deg);
}
[data-theme-mode="dark"] dialog .btn-close-modal,
[data-theme-mode="dark"] dialog button[data-close]:not(.btn-secondary):not(.btn-primary) {
    background: rgba(255,255,255,.08) !important;
    color: #e2e8f0 !important;
}

/* Dialog precisa de relative pra X funcionar com absolute */
dialog.modal-dialog,
dialog form,
dialog header { position: relative !important; }

/* ============================================================================
   Modais grandes (tarefas, peças, etc.) — campos não estouram a largura
   Botões de adicionar (+ checklist, + signatário) na cor da marca
   ============================================================================ */
dialog.modal-dialog .form-group,
dialog.modal-dialog .form-grid,
dialog form .form-group,
dialog form .form-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
dialog.modal-dialog input:not([type=checkbox]):not([type=radio]):not([type=file]),
dialog.modal-dialog select,
dialog.modal-dialog textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
dialog.modal-dialog form,
dialog.modal-dialog .modal-form {
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
}
dialog.modal-dialog .form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: .8rem !important;
}
dialog.modal-dialog .form-group.full {
    grid-column: 1 / -1 !important;
}

/* Botões "+ Adicionar" (checklist, signatário, etc) usam cor da marca */
.btn-add,
.btn-adicionar,
button.btn-add,
button.btn-adicionar,
.btn-add-item,
.btn-checklist-add,
button.btn-checklist-add,
.btn-signatario-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: .4rem .85rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
.btn-add:hover, .btn-adicionar:hover, .btn-checklist-add:hover, .btn-signatario-add:hover {
    background: linear-gradient(135deg, #d9b97a, #c8a663) !important;
    box-shadow: 0 4px 12px rgba(200,166,99,.30) !important;
}
.btn-add i, .btn-adicionar i { color: #ffffff !important; }

/* Botões "Excluir" / "Cancelar" (destrutivos) sempre visíveis e padronizados */
.btn-excluir,
.btn-deletar,
.btn-remover,
button.btn-excluir,
button.btn-deletar,
button.btn-remover,
.btn-danger,
button.btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: .5rem .95rem !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
.btn-excluir:hover, .btn-deletar:hover, .btn-remover:hover, .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 4px 14px rgba(185,28,28,.35) !important;
    transform: translateY(-1px);
}
.btn-excluir i, .btn-deletar i, .btn-remover i, .btn-danger i { color: #ffffff !important; }

/* Variante outline (sutil) — quando precisa ser menos invasivo */
.btn-excluir-outline,
.btn-danger-outline {
    background: transparent !important;
    color: #b91c1c !important;
    border: 1px solid rgba(185,28,28,.30) !important;
}
.btn-excluir-outline:hover {
    background: rgba(185,28,28,.08) !important;
    border-color: #b91c1c !important;
}

/* ============================================================================
   FIX modal X — só aplica em quem tem class .btn-close-modal explícita
   (versão anterior pegava qualquer button[data-close], transformando o
   botão "Cancelar" em X redondo gigante)
   ============================================================================ */
dialog button[data-close]:not(.btn-close-modal) {
    /* reset — volta ao default da regra .btn-secondary/btn-primary */
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    transform: none !important;
}

/* ============================================================================
   FORÇA — /integracoes e /lgpd (estavam ignorando regras anteriores)
   Seletores genéricos com altíssima especificidade
   ============================================================================ */

/* Qualquer link/botão na página /integracoes que aponta pra config */
html body a[href^="/admin/config"],
html body .integracoes-page a,
html body .integracoes-page button,
html body section.integracoes a[href*="config"],
html body .card a[href^="/admin/config"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: .5rem 1rem !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .15s !important;
}
html body a[href^="/admin/config"]:hover,
html body .integracoes-page a:hover,
html body .card a[href^="/admin/config"]:hover {
    background: linear-gradient(135deg, #d9b97a, #c8a663) !important;
    box-shadow: 0 4px 14px rgba(200,166,99,.30) !important;
    color: #ffffff !important;
}
html body a[href^="/admin/config"] i,
html body .integracoes-page a i { color: #ffffff !important; }

/* Cards de KPI no topo de páginas (LGPD, Timesheet, Recebíveis) — força grid responsivo */
html body section[class*="kpis"]:not(.kpis-modern),
html body div[class*="kpis"]:not(.kpis-modern),
html body .kpi-cards,
html body .stats-cards,
html body section.lgpd-stats,
html body .lgpd-painel section:first-of-type {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-bottom: 1.2rem !important;
}
html body section[class*="kpis"] > .card,
html body section[class*="kpis"] > div,
html body .kpi-cards > .card,
html body .stats-cards > .card,
html body .lgpd-painel section:first-of-type > .card {
    min-width: 0 !important;
    overflow: visible !important;
    word-break: normal !important;
}
html body .kpi-card-content,
html body .stat-card-content {
    overflow: visible !important;
    white-space: normal !important;
}

/* ============================================================================
   FIX REAL — após inspecionar HTML real:
   - /integracoes usa .btn-outline-secondary (Bootstrap)
   - /lgpd usa section.kpis.row.g-3 (Bootstrap grid)
   ============================================================================ */

/* btn-outline-secondary (Bootstrap) na /integracoes — pintar dourado */
html body section.integracoes-page a.btn-outline-secondary,
html body .integracoes-grid a.btn-outline-secondary,
html body .integracao-card a.btn-outline-secondary,
html body a.btn-outline-secondary[href^="/admin/config"],
html body a.btn.btn-outline-secondary[href^="/admin"] {
    background: linear-gradient(135deg, #c8a663, #b88842) !important;
    background-color: #c8a663 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-color: transparent !important;
    padding: .5rem 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
html body a.btn-outline-secondary[href^="/admin/config"]:hover,
html body a.btn.btn-outline-secondary[href^="/admin"]:hover {
    background: linear-gradient(135deg, #d9b97a, #c8a663) !important;
    background-color: #d9b97a !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* /lgpd cards do topo — section.kpis.row.g-3 (Bootstrap) responsivo */
html body section.kpis.row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin: 0 0 1.2rem 0 !important;
    width: 100% !important;
}
html body section.kpis.row > .card,
html body section.kpis.row > div,
html body section.kpis.row > .col,
html body section.kpis.row > [class*="col-"] {
    flex: 1 1 200px !important;
    min-width: 200px !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    width: auto !important;
}
html body section.kpis.row .kpi-card {
    overflow: visible !important;
    width: 100% !important;
}
html body section.kpis.row .kpi-value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}