/* Sobrescrever estilos do Bootstrap para campos com erro */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
    background-color: #fff !important;
    background-image: none !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545 !important;
    background-color: #fff !important;
}

.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

/* Remover fundo vermelho de qualquer elemento com erro */
.is-invalid,
.has-error {
    background-color: transparent !important;
}

/* Estilos para campos com erro */
.has-error .system-input,
.has-error .system-select,
.has-error .system-textarea {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff !important;
}

.has-error .system-label {
    color: #dc3545 !important;
}

.system-error-text {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

/* Remover fundo vermelho dos containers com erro */
.has-error {
    background-color: transparent !important;
}

.field.has-error .input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
    background-color: #fff !important;
}

.field.has-error .label {
    color: #dc3545 !important;
}

.field.has-error .help {
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* Remover fundo vermelho dos campos com erro */
.field.has-error {
    background-color: transparent !important;
}

/* Estilos para modais com erro */
#modalErrors {
    position: relative;
    z-index: 9999;
    margin-bottom: 1rem;
}

/* Variáveis CSS para temas */
:root {
    /* Cores Primárias */
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #e0e7ff;
    --primary-dark: #3730a3;
    
    /* Cores Secundárias */
    --secondary-color: #64748b;
    --secondary-hover: #475569;
    --secondary-light: #f1f5f9;
    --secondary-dark: #334155;
    
    /* Cores de Sucesso */
    --success-color: #10b981;
    --success-hover: #059669;
    --success-light: #d1fae5;
    --success-dark: #047857;
    
    /* Cores de Aviso */
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --warning-light: #fef3c7;
    --warning-dark: #b45309;
    
    /* Cores de Perigo */
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    --danger-light: #fee2e2;
    --danger-dark: #b91c1c;
    
    /* Cores de Informação */
    --info-color: #06b6d4;
    --info-hover: #0891b2;
    --info-light: #cffafe;
    --info-dark: #0e7490;
    
    /* Cores de Background */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-hover: #f1f5f9;
    
    /* Cores de Texto */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    
    /* Cores de Bordas */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-focus: #4f46e5;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    
    /* Bordas Arredondadas */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    
    /* Transições */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
}

/* ===================================
   COMPONENTES DO SISTEMA
   =================================== */

/* Container Principal */
.system-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-primary);
    margin: 1.5rem 0;
    overflow: hidden;
}

/* Header do Sistema */
.system-header {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-primary);
    position: relative;
}

.system-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.system-header h2 {
    margin: 0;
    font-weight: 600;
    font-size: 1.75rem;
}

.system-header p {
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

/* Conteúdo do Sistema */
.system-content {
    padding: 2rem;
    background: var(--bg-primary);
}

/* ===================================
   COMPONENTES DE FORMULÁRIO
   =================================== */

/* Inputs */
.system-input {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: var(--transition-normal);
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
}

.system-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.system-input::placeholder {
    color: var(--text-muted);
}

/* Select */
.system-select {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: var(--transition-normal);
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.system-select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

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

.select2-container--bootstrap-5 .select2-selection {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 1.5;
}

.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--text-muted);
}

.select2-container--bootstrap-5 .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
}

.select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--text-muted);
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    z-index: 9999;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Textarea */
.system-textarea {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: var(--transition-normal);
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.system-textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.system-textarea::placeholder {
    color: var(--text-muted);
}

/* Labels */
.system-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* ===================================
   BOTÕES DO SISTEMA
   =================================== */

/* Botão Base */
.system-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.system-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: var(--transition-slow);
}

.system-btn:hover::before {
    left: 100%;
}

/* Variantes de Botões */
.system-btn-primary {
    background: var(--primary-color);
    color: var(--text-inverse);
}

.system-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.system-btn-secondary {
    background: var(--secondary-color);
    color: var(--text-inverse);
}

.system-btn-secondary:hover {
    background: var(--secondary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.system-btn-success {
    background: var(--success-color);
    color: var(--text-inverse);
}

.system-btn-success:hover {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.system-btn-warning {
    background: var(--warning-color);
    color: var(--text-inverse);
}

.system-btn-warning:hover {
    background: var(--warning-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.system-btn-danger {
    background: var(--danger-color);
    color: var(--text-inverse);
}

.system-btn-danger:hover {
    background: var(--danger-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.system-btn-outline {
    background: transparent;
    border: 2px solid var(--border-secondary);
    color: var(--text-secondary);
}

.system-btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Botões Pequenos */
.system-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* Botões de Ação (para tabelas) */
.system-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.875rem;
    color: var(--text-inverse);
}

.system-action-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.system-action-btn-view { background: var(--info-color); }
.system-action-btn-view:hover { background: var(--info-hover); }

.system-action-btn-edit { background: var(--warning-color); }
.system-action-btn-edit:hover { background: var(--warning-hover); }

.system-action-btn-delete { background: var(--danger-color); }
.system-action-btn-delete:hover { background: var(--danger-hover); }

.system-action-btn-associate { background: var(--success-color); }
.system-action-btn-associate:hover { background: var(--success-hover); }

/* ===================================
   BADGES E INDICADORES
   =================================== */

/* Badges */
.system-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border: 1px solid transparent;
    transition: var(--transition-fast);
}

.system-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Badges de status de chamado (cores fortes e distintas) */
.system-badge-warning {
    background: var(--warning-light);
    color: var(--warning-dark);
    border-color: var(--warning-color);
}

.system-badge-success {
    background: var(--success-light);
    color: var(--success-dark);
    border-color: var(--success-color);
}

.system-badge-info {
    background: var(--info-light);
    color: var(--info-dark);
    border-color: var(--info-color);
}

.system-badge-danger {
    background: var(--danger-light);
    color: var(--danger-dark);
    border-color: var(--danger-color);
}

.system-badge-view {
    background: var(--info-light);
    color: var(--info-dark);
    border-color: var(--info-color);
}

.system-badge-create {
    background: var(--success-light);
    color: var(--success-dark);
    border-color: var(--success-color);
}

.system-badge-edit {
    background: var(--warning-light);
    color: var(--warning-dark);
    border-color: var(--warning-color);
}

.system-badge-delete {
    background: var(--danger-light);
    color: var(--danger-dark);
    border-color: var(--danger-color);
}

/* Indicadores de Status */
.system-status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.system-status-active {
    background: var(--success-color);
}

.system-status-inactive {
    background: var(--danger-color);
}

/* ===================================
   CARDS E CONTAINERS
   =================================== */

/* Cards */
.system-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-primary);
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

.system-card-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding: 1rem 1.5rem;
}

.system-card-body {
    padding: 1.5rem;
    /* Encolhe dentro de flex; scroll horizontal fica só no .tabulator-tableholder */
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.system-card-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    padding: 1rem 1.5rem;
}

/* Seções de Busca/Filtro */
.system-search-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-primary);
}

/* ===================================
   TABELAS E LISTAS
   =================================== */

/* Tabela Base */
.system-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.system-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--border-primary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.system-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.system-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* ===================================
   MODAIS (visual/theming)
   Z-index, sizing e responsividade -> responsive-core.css
   =================================== */

/* Modal Base */
.system-modal {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    overflow: hidden;
}

.system-modal-header {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-primary);
}

.system-modal-body {
    padding: 1.5rem;
    background: var(--bg-primary);
}

.system-modal-footer {
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-primary);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ===================================
   UTILITÁRIOS
   =================================== */

/* Espaçamentos */
.system-mt-1 { margin-top: 0.25rem; }
.system-mt-2 { margin-top: 0.5rem; }
.system-mt-3 { margin-top: 0.75rem; }
.system-mt-4 { margin-top: 1rem; }
.system-mt-5 { margin-top: 1.25rem; }
.system-mt-6 { margin-top: 1.5rem; }

.system-mb-1 { margin-bottom: 0.25rem; }
.system-mb-2 { margin-bottom: 0.5rem; }
.system-mb-3 { margin-bottom: 0.75rem; }
.system-mb-4 { margin-bottom: 1rem; }
.system-mb-5 { margin-bottom: 1.25rem; }
.system-mb-6 { margin-bottom: 1.5rem; }

.system-ml-1 { margin-left: 0.25rem; }
.system-ml-2 { margin-left: 0.5rem; }
.system-ml-3 { margin-left: 0.75rem; }
.system-ml-4 { margin-left: 1rem; }

.system-mr-1 { margin-right: 0.25rem; }
.system-mr-2 { margin-right: 0.5rem; }
.system-mr-3 { margin-right: 0.75rem; }
.system-mr-4 { margin-right: 1rem; }

/* Texto */
.system-text-primary { color: var(--text-primary); }
.system-text-secondary { color: var(--text-secondary); }
.system-text-muted { color: var(--text-muted); }
.system-text-inverse { color: var(--text-inverse); }

.system-text-sm { font-size: 0.875rem; }
.system-text-xs { font-size: 0.75rem; }
.system-text-lg { font-size: 1.125rem; }
.system-text-xl { font-size: 1.25rem; }

/* Background */
.system-bg-primary { background: var(--bg-primary); }
.system-bg-secondary { background: var(--bg-secondary); }
.system-bg-tertiary { background: var(--bg-tertiary); }

/* Flexbox */
.system-flex { display: flex; }
.system-flex-col { flex-direction: column; }
.system-items-center { align-items: center; }
.system-justify-center { justify-content: center; }
.system-justify-between { justify-content: space-between; }
.system-gap-1 { gap: 0.25rem; }
.system-gap-2 { gap: 0.5rem; }
.system-gap-3 { gap: 0.75rem; }
.system-gap-4 { gap: 1rem; }

/* ===================================
   RESPONSIVIDADE
   =================================== */

@media (max-width: 768px) {
    .system-container {
        margin: 1rem 0;
        border-radius: var(--radius-lg);
    }

    .system-content {
        padding: 1rem;
    }
    
    .system-header {
        padding: 0.9rem 1rem;
    }
    
    .system-header h2 {
        font-size: 1.5rem;
    }
    
    .system-action-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .system-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .system-content {
        padding: 0.75rem;
    }
    
    .system-header {
        padding: 0.9rem 1rem;
    }
    
    .system-header h2 {
        font-size: 1.25rem;
    }
    
    .system-search-section {
        padding: 1rem;
    }
    
    .system-card-body {
        padding: 1rem;
    }
}

/* ===================================
   ANIMAÇÕES
   =================================== */

@keyframes systemFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes systemSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.system-fade-in {
    animation: systemFadeIn 0.3s ease-out;
}

.system-slide-in {
    animation: systemSlideIn 0.3s ease-out;
}

/* ===================================
   ESTADOS DE CARREGAMENTO
   =================================== */

.system-loading {
    position: relative;
    overflow: hidden;
}

.system-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: systemLoading 1.5s infinite;
}

@keyframes systemLoading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===================================
   ESTADOS VAZIOS
   =================================== */

.system-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

/* ===================================
   COMPONENTES ESPECÍFICOS - MODAL ASSOCIAÇÃO
   =================================== */

/* Chips para roles e usuários */
.role-chip, .user-chip {
    display: inline-block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    margin: 0.125rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.role-chip:hover, .user-chip:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.role-chip .remove-btn, .user-chip .remove-btn {
    margin-left: 0.5rem;
    color: var(--danger-color);
    cursor: pointer;
    transition: var(--transition-fast);
}

.role-chip .remove-btn:hover, .user-chip .remove-btn:hover {
    color: var(--danger-hover);
}

/* Resultados de busca */
.search-result-item {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: 0.25rem;
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.search-result-item:hover {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

.search-result-item.selected {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

/* Tabs da modal */
.nav-tabs {
    list-style: none !important;
    padding-left: 0 !important;
}

.nav-tabs .nav-item {
    list-style: none !important;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-light);
}

/* Estilos específicos para system-nav-tabs */
.system-nav-tabs {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.system-nav-tabs .nav-item {
    list-style: none !important;
}

.system-nav-tabs ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.system-nav-tabs li {
    list-style: none !important;
}


.system-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--text-muted);
}

.system-empty-state h4 {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.system-empty-state p {
    color: var(--text-muted);
    margin: 0;
}

/* ===================================
   ESTILOS UNIVERSAIS DO SISTEMA
   =================================== */

/* Design minimalista universal */
.main-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 20px;
    padding: 20px;
}

.breadcrumb-container {
    margin-bottom: 20px;
}

.page-header {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid #667eea;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    color: #333;
}

.page-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

.action-button {
    background: #667eea;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-button:hover {
    background: #5a6fd8;
    transform: translateY(-1px);
    color: white;
}

.card-container {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.card-header {
    background: #f8f9fa;
    color: #333;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: 1px solid #e9ecef;
}

.card-body {
    padding: 20px;
    width: 100%;
    background: white;
    min-height: auto;
}

/* Tabulator: estilos centralizados em tabulator-system-theme.css */

/* Botões de ação universais (grids) */
.action-btn {
    border-radius: var(--radius-sm) !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
    transition: all 0.15s ease !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.78rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    height: 26px !important;
    line-height: 1 !important;
}

.action-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
    filter: brightness(1.1) !important;
}

.action-btn.disabled,
.action-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.btn-view {
    background: var(--info-color) !important;
    color: var(--text-inverse) !important;
}

.btn-view:hover {
    background: var(--info-hover) !important;
}

.btn-associate {
    background: var(--success-color) !important;
    color: var(--text-inverse) !important;
}

.btn-associate:hover {
    background: var(--success-hover) !important;
}

.btn-edit {
    background: var(--primary-color) !important;
    color: var(--text-inverse) !important;
}

.btn-edit:hover {
    background: var(--primary-hover) !important;
}

.btn-delete {
    background: var(--danger-color) !important;
    color: var(--text-inverse) !important;
}

.btn-delete:hover {
    background: var(--danger-hover) !important;
}

/* Badges de status universais */
.status-badge {
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.02em !important;
    display: inline-block !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.status-active {
    background: var(--success-light) !important;
    color: var(--success-dark) !important;
}

.status-inactive {
    background: var(--danger-light) !important;
    color: var(--danger-dark) !important;
}

.status-pending {
    background: var(--warning-light) !important;
    color: var(--warning-dark) !important;
}

.status-info {
    background: var(--info-light) !important;
    color: var(--info-dark) !important;
}

/* Modais Bulma - theming (z-index/sizing -> responsive-core.css) */
.modal-card-head {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.modal-card-title {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

.modal-card-body {
    padding: 20px !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.modal-card-foot {
    padding: 15px 20px !important;
    background: var(--bg-tertiary) !important;
    border-radius: 0 0 8px 8px !important;
    border-top: 1px solid var(--border-primary) !important;
}

/* Botões Bulma universais */
.button {
    border-radius: var(--radius-sm) !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.is-primary {
    background: var(--primary-color) !important;
    color: var(--text-inverse) !important;
}

.is-primary:hover {
    background: var(--primary-hover) !important;
}

.is-danger {
    background: var(--danger-color) !important;
    color: var(--text-inverse) !important;
}

.is-danger:hover {
    background: var(--danger-hover) !important;
}

/* Campos de formulário Bulma universais */
.field > label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
}

.input {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-secondary) !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12) !important;
}

/* Paginação: estilos centralizados em tabulator-system-theme.css */

/* Estilos para campos com erro */
.field.has-error .input {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12) !important;
}

/* SweetAlert2 com tema Bulma universal */
.swal2-bulma-popup {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.swal2-bulma-title {
    color: #363636 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.swal2-bulma-content {
    color: #4a4a4a !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Sobrecarga: mesmo modal de erro (swal2-bulma) + bloco técnico (details/pre/Bulma) */
.swal2-html-container.swal-error-tech-html {
    text-align: left !important;
}

.swal2-bulma-popup .swal-error-text {
    margin: 0 0 0.75rem 0 !important;
    color: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.swal2-bulma-popup .swal-error-tech-addon {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-secondary);
}

.swal2-bulma-popup .swal-error-tech-addon details {
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
}

.swal2-bulma-popup .swal-error-tech-addon summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    list-style: none;
    outline: none;
}

.swal2-bulma-popup .swal-error-tech-addon summary::-webkit-details-marker {
    display: none;
}

.swal2-bulma-popup .swal-error-tech-addon summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.65rem;
    transition: transform 0.15s ease;
    vertical-align: middle;
}

.swal2-bulma-popup .swal-error-tech-addon details[open] summary::before {
    transform: rotate(90deg);
}

.swal2-bulma-popup .swal-error-tech-addon summary small {
    font-weight: 400;
    color: var(--text-muted);
}

.swal2-bulma-popup .swal-error-tech-pre {
    margin: 0.75rem 0 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
}

.swal2-bulma-popup .swal-error-tech-addon .button {
    margin-top: 0.25rem;
}

[data-theme="dark"] .swal2-bulma-popup {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}
[data-theme="dark"] .swal2-bulma-title {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .swal2-bulma-content {
    color: var(--text-secondary) !important;
}

.swal2-bulma-actions {
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
}

.swal2-bulma-confirm {
    background: #667eea !important;
    border: none !important;
    border-radius: 6px !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
}

.swal2-bulma-confirm:hover {
    background: #5a6fd8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
}

.swal2-bulma-confirm.swal2-bulma-success {
    background: #48c774 !important;
    box-shadow: 0 2px 4px rgba(72, 199, 116, 0.2) !important;
}

.swal2-bulma-confirm.swal2-bulma-success:hover {
    background: #3da066 !important;
    box-shadow: 0 4px 8px rgba(72, 199, 116, 0.3) !important;
}

.swal2-bulma-confirm.swal2-bulma-danger {
    background: #ff3860 !important;
    box-shadow: 0 2px 4px rgba(255, 56, 96, 0.2) !important;
}

.swal2-bulma-confirm.swal2-bulma-danger:hover {
    background: #e6395c !important;
    box-shadow: 0 4px 8px rgba(255, 56, 96, 0.3) !important;
}

.swal2-bulma-cancel {
    background: #f5f5f5 !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 6px !important;
    color: #4a4a4a !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.swal2-bulma-cancel:hover {
    background: #e8e8e8 !important;
    border-color: #c4c4c4 !important;
    transform: translateY(-1px) !important;
}

.swal2-bulma-loading .swal2-popup {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.swal2-bulma-loading .swal2-title {
    color: white !important;
}

.swal2-bulma-loading .swal2-html-container {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ícones personalizados */
.swal2-icon.swal2-success {
    border-color: #48c774 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #48c774 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(72, 199, 116, 0.3) !important;
}

.swal2-icon.swal2-error {
    border-color: #ff3860 !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #ff3860 !important;
}

.swal2-icon.swal2-warning {
    border-color: #ffdd57 !important;
    color: #ffdd57 !important;
}

/* Animações suaves */
.swal2-show {
    animation: swal2-bulma-show 0.3s ease-out !important;
}

@keyframes swal2-bulma-show {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Backdrop personalizado */
.swal2-backdrop-show {
    background: rgba(10, 10, 10, 0.86) !important;
    backdrop-filter: blur(4px) !important;
}

/* Responsividade universal */
@media (max-width: 768px) {
    .main-container {
        margin: 10px;
        padding: 15px;
    }
    
    .page-header {
        padding: 15px;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .card-body {
        padding: 15px;
    }
}

/* ===================================
   COMPONENTES ADICIONAIS
   =================================== */

/* Checkbox personalizado */
.system-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.system-checkbox input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.system-checkbox input[type="checkbox"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.system-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.system-checkbox input[type="checkbox"]:hover {
    border-color: var(--primary-color);
}

.system-checkbox input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.system-checkbox label {
    cursor: pointer;
    user-select: none;
    color: var(--text-primary);
    font-weight: 500;
}

/* Chips para associações */
.role-chip, .user-chip {
    display: inline-flex;
    align-items: center;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    margin: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--primary-color);
    transition: all var(--transition-fast);
}

.role-chip:hover, .user-chip:hover {
    background: var(--primary-color);
    color: white;
}

.remove-btn {
    margin-left: 0.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.remove-btn:hover {
    opacity: 1;
}

/* Resultados de busca */
.search-result-item {
    padding: 0.75rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-primary);
}

.search-result-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Tabela de grupos: estilos centralizados em tabulator-system-theme.css */

/* Modal de associação */
#associationModal .nav-tabs {
    border-bottom: 2px solid var(--border-primary);
    margin-bottom: 1rem;
}

#associationModal .nav-link {
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all var(--transition-fast);
}

#associationModal .nav-link.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    background: transparent;
}

#associationModal .nav-link:hover {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

/* Área de perfis disponíveis */
#availableRoles {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: var(--bg-secondary);
}

#availableRoles .form-check {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

#availableRoles .form-check:hover {
    background: var(--bg-primary);
}

/* Responsividade para modais -> responsive-core.css */
@media (max-width: 768px) {
    .system-checkbox {
        flex-direction: row;
        align-items: center;
    }
    
    .role-chip, .user-chip {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
}

/* ===================================
   BREADCRUMB ELEGANTE E DISCRETO
   =================================== */

.system-breadcrumb-highlighted {
    background: #667eea;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border-left: 2px solid #5a6fd8;
    box-shadow: 0 1px 2px rgba(102, 126, 234, 0.08);
}

.system-breadcrumb-highlighted .breadcrumb {
    margin: 0;
}

.system-breadcrumb-highlighted .breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.system-breadcrumb-highlighted .breadcrumb li {
    display: flex;
    align-items: center;
}

.system-breadcrumb-highlighted .breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0.4rem;
    font-weight: normal;
    font-size: 0.75rem;
}

.system-breadcrumb-highlighted .breadcrumb-item {
    color: white;
    font-weight: 400;
    font-size: 0.8rem;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.system-breadcrumb-highlighted .breadcrumb li:not(.is-active) .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

.system-breadcrumb-highlighted .breadcrumb li.is-active .breadcrumb-item {
    color: white;
    font-weight: 600;
}

.system-breadcrumb-highlighted .breadcrumb li:not(.is-active):not(:first-child):hover .breadcrumb-item {
    color: white;
    transition: color 0.2s ease;
}

.system-breadcrumb-highlighted .breadcrumb li:first-child .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
}

.system-breadcrumb-highlighted .icon,
.system-breadcrumb-highlighted i {
    color: white !important;
    margin-right: 0.3rem;
    font-size: 0.65rem;
}

.system-breadcrumb-highlighted .breadcrumb li:not(.is-active) .icon,
.system-breadcrumb-highlighted .breadcrumb li:not(.is-active) i {
    color: rgba(255, 255, 255, 0.8) !important;
}

.system-breadcrumb-highlighted .breadcrumb li.is-active .icon,
.system-breadcrumb-highlighted .breadcrumb li.is-active i {
    color: white !important;
}

/* Botão com cores do sistema */
.system-btn-system {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid #5a6fd8;
    color: white;
    font-weight: 500;
    transition: all 0.2s ease;
}

.system-btn-system:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6c5ce7 100%);
    border-color: #4c63d2;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.system-btn-system:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

/* Responsividade para breadcrumb */
@media (max-width: 768px) {
    .system-breadcrumb-highlighted {
        padding: 0.4rem 0.8rem;
        border-radius: 3px;
    }
    
    .system-breadcrumb-highlighted .breadcrumb-item {
        font-size: 0.75rem;
    }
    
    .system-breadcrumb-highlighted .icon,
    .system-breadcrumb-highlighted i {
        font-size: 0.6rem;
        margin-right: 0.25rem;
    }
}

/* ===================================
   INTERFACE MODERNA - LAYOUT GLOBAL
   =================================== */

/* ===== CARDS APRIMORADOS ===== */
.system-shadow-soft {
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.system-enhanced-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* Linha título + filtros não pode forçar largura mínima maior que o card (telas estreitas / tablet) */
.system-card-header .system-flex.system-justify-between {
    min-width: 0;
}

.system-card-header .system-filters-row {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
}

.system-card-header .system-actions-row {
    flex-shrink: 0;
}

.system-title-enhanced {
    color: #4a5568;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.system-badge-count {
    background: #667eea;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 35px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== FILTROS E BUSCA APRIMORADOS ===== */
.system-filters-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

.system-input-search {
    width: 100%;
    max-width: 300px;
    min-width: 0;
    flex: 1 1 160px;
    padding: 0.5rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
    font-family: inherit;
}

.system-input-search:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.system-input-search::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ===== CONTROLES SEGMENTADOS ===== */
.system-segmented-control {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.system-segmented-control input[type="radio"] {
    display: none;
}

.system-segmented-control label {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.system-segmented-control input[type="radio"]:checked + label {
    background: #667eea;
    color: white;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    transform: translateY(-1px);
}

.system-segmented-control label:hover:not(.active) {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

/* ===== BOTÕES DE AÇÃO MODERNOS ===== */
.system-actions-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.system-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.system-btn-icon:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
}

.system-btn-icon:active {
    transform: translateY(0);
}

.system-btn-primary-enhanced {
    background: linear-gradient(135deg, #48c774 0%, #00d1b2 100%);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 6px rgba(72, 199, 116, 0.2);
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 2px solid transparent;
}

.system-btn-primary-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(72, 199, 116, 0.3);
    color: white;
    text-decoration: none;
}

.system-btn-primary-enhanced:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(72, 199, 116, 0.2);
}

.system-btn-primary-enhanced:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(72, 199, 116, 0.2), 0 3px 6px rgba(72, 199, 116, 0.2);
}

/* ===== RESPONSIVIDADE PARA INTERFACE MODERNA ===== */
@media (max-width: 768px) {
    .system-enhanced-header {
        padding: 1rem;
    }
    
    .system-filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .system-input-search {
        width: 100%;
    }
    
    .system-actions-row {
        justify-content: center;
        width: 100%;
    }
    
    .system-segmented-control {
        width: 100%;
        justify-content: center;
    }
    
    .system-segmented-control label {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .system-badge-count {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
        min-width: 28px;
    }
    
    .system-btn-primary-enhanced {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .system-btn-icon {
        width: 36px;
        height: 36px;
    }
}

/* ===================================
   SWEETALERT2 - ESTILOS COMPACTOS
   =================================== */

/* SweetAlert2 de sucesso compacto */
.swal2-success-compact {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 20px !important;
    max-width: 400px !important;
    border: none !important;
}

.swal2-success-compact .swal2-title {
    color: #48c774 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.swal2-success-compact .swal2-html-container {
    color: #495057 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.swal2-success-compact .swal2-icon {
    border-color: #48c774 !important;
    color: #48c774 !important;
}

.swal2-success-compact .swal2-timer-progress-bar {
    background: #48c774 !important;
}

/* SweetAlert2 de erro compacto */
.swal2-error-compact {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 20px !important;
    max-width: 400px !important;
    border: none !important;
}

.swal2-error-compact .swal2-title {
    color: #ff3860 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.swal2-error-compact .swal2-html-container {
    color: #495057 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.swal2-error-compact .swal2-icon {
    border-color: #ff3860 !important;
    color: #ff3860 !important;
}

/* SweetAlert2 de aviso compacto */
.swal2-warning-compact {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 20px !important;
    max-width: 400px !important;
    border: none !important;
}

.swal2-warning-compact .swal2-title {
    color: #ffdd57 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.swal2-warning-compact .swal2-html-container {
    color: #495057 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.swal2-warning-compact .swal2-icon {
    border-color: #ffdd57 !important;
    color: #ffdd57 !important;
}

/* Animações suaves para todos os SweetAlert2 compactos */
.swal2-success-compact,
.swal2-error-compact,
.swal2-warning-compact {
    animation: swal2-compact-show 0.3s ease-out !important;
}

@keyframes swal2-compact-show {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Garantir que SweetAlert2 fique acima de tudo */
.swal2-container {
    z-index: 100000 !important;
}

.swal2-popup {
    z-index: 100001 !important;
}
 
/* ==========================================
   ESTILOS GLOBAIS PARA CHECKBOXES
   ========================================== 
   
   COMO USAR:
   
   Para checkboxes múltiplos com estilo moderno:
   
   <div class="checkbox-container">
       <div class="checkbox-item">
           <label class="checkbox-wrapper">
               <input type="checkbox" name="permissions" value="1">
               <span class="checkbox-label">Permissão 1</span>
           </label>
       </div>
       <div class="checkbox-item">
           <label class="checkbox-wrapper">
               <input type="checkbox" name="permissions" value="2">
               <span class="checkbox-label">Permissão 2</span>
           </label>
       </div>
   </div>
   
   Para validação de erro:
   - Adicione a classe 'has-error' ao container pai
   - O estilo de erro será aplicado automaticamente
   
   ========================================== */

/* Container para checkboxes múltiplos */
.checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    width: 100%;
    margin: 0;
}

.checkbox-wrapper:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.checkbox-wrapper input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-label {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    flex: 1;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label {
    color: #4f46e5;
    font-weight: 600;
}

.checkbox-wrapper input[type="checkbox"]:checked {
    accent-color: #4f46e5;
}

/* Estilo para quando há erro na seleção */
.has-error .checkbox-container {
    border: 1px solid #dc3545;
    border-radius: 6px;
    padding: 0.5rem;
    background-color: #fff;
}

.has-error .checkbox-wrapper {
    background-color: #fff;
    border-color: #dc3545;
}

.has-error .checkbox-wrapper:hover {
    background-color: #fff5f5;
    border-color: #dc3545;
}

/* Classes específicas para compatibilidade (mantidas para não quebrar código existente) */
.roles-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.role-item {
    display: flex;
    align-items: center;
}

.role-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    width: 100%;
    margin: 0;
}

.role-checkbox:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.role-checkbox input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.role-label {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    flex: 1;
}

.role-checkbox input[type="checkbox"]:checked + .role-label {
    color: #4f46e5;
    font-weight: 600;
}

.role-checkbox input[type="checkbox"]:checked {
    accent-color: #4f46e5;
}

/* Estilo para quando há erro na seleção de perfis */
.has-error .roles-container {
    border: 1px solid #dc3545;
    border-radius: 6px;
    padding: 0.5rem;
    background-color: #fff;
}

.has-error .role-checkbox {
    background-color: #fff;
    border-color: #dc3545;
}

.has-error .role-checkbox:hover {
    background-color: #fff5f5;
    border-color: #dc3545;
}

/* ========================================
   ESTILOS PARA TABELAS TABULATOR
   ======================================== */

/* Wrapper criado por tabulator-config.js quando não há .system-table-container no DOM */
.system-table-ui-wrap {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Container de tabelas: scroll horizontal fica dentro do Tabulator (.tabulator-tableholder), não no wrapper */
.system-table-container {
    min-height: 400px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
}

.system-table-container:not(.tabulator) {
    overflow-x: visible;
}

/* Botões laterais (tabulator-config.js) para rolar colunas quando há overflow horizontal */
.system-table-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 7;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.system-table-scroll-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.system-table-scroll-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.system-table-scroll-btn--left {
    left: 6px;
}

.system-table-scroll-btn--right {
    right: 6px;
}

/* Scroll horizontal e colunas congeladas: estilos centralizados em tabulator-system-theme.css */

/* ========================================
   ESTILOS PARA ÁREA DE UPLOAD
   ======================================== */

.system-upload-area {
    border: 2px dashed var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    background: var(--bg-secondary);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.system-upload-area:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.system-upload-area.system-upload-drag-over {
    border-color: var(--primary-color);
    background: var(--primary-light);
    border-style: solid;
}

.system-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.system-upload-icon {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.system-upload-area:hover .system-upload-icon,
.system-upload-area.system-upload-drag-over .system-upload-icon {
    color: var(--primary-color);
}

.system-upload-content h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.system-upload-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Estilos para checkbox label */
.system-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    user-select: none;
}

.system-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.system-checkbox-label span {
    line-height: 1.5;
}

/* ===================================
   DARK MODE
   =================================== */

/* Prevenir flash branco durante carregamento */
html:not([data-theme]) {
    background-color: #ffffff;
}

html.theme-loading {
    transition: none !important;
}

html[data-theme] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] {
    /* Cores de Background */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #1f1f1f;
    --bg-elevated: #2d2d2d;
    --bg-hover: #3a3a3a;
    
    /* Cores de Texto */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-inverse: #1a1a1a;
    
    /* Cores de Bordas */
    --border-primary: #404040;
    --border-secondary: #333333;
    --border-focus: #667eea;
    
    /* Background do body */
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .navbar {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .sidebar {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    /* Fundo preto com detalhes roxos nos itens do menu (cor mais clara) */
    box-shadow: 2px 0 10px rgba(118, 75, 162, 0.25) !important;
    border-right: 1px solid rgba(118, 75, 162, 0.2) !important;
}

[data-theme="dark"] .system-card {
    background: var(--bg-elevated);
    border-color: var(--border-primary);
}

[data-theme="dark"] .system-card-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .system-card-body {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .system-card-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .system-enhanced-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-bottom-color: rgba(102, 126, 234, 0.3) !important;
    color: var(--text-primary) !important;
    /* Manter um toque da cor roxa no dark mode */
}

[data-theme="dark"] .system-title-enhanced {
    color: var(--text-primary) !important;
}

/* Cards padrão (Bootstrap/Bulma) */
[data-theme="dark"] .card {
    background: var(--bg-elevated) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-header {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-primary) !important;
}

[data-theme="dark"] .card-body {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-footer {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-top-color: var(--border-primary) !important;
}

/* Border left primary e outras cores */
[data-theme="dark"] .border-left-primary {
    border-left-color: var(--primary-color) !important;
}

[data-theme="dark"] .border-left-success {
    border-left-color: var(--success-color) !important;
}

[data-theme="dark"] .border-left-info {
    border-left-color: var(--info-color) !important;
}

[data-theme="dark"] .border-left-warning {
    border-left-color: var(--warning-color) !important;
}

[data-theme="dark"] .border-primary {
    border-color: var(--border-primary) !important;
}

/* Shadow no dark mode */
[data-theme="dark"] .shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .card.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4) !important;
}

/* Classes h-100 e py-2 já funcionam, mas vamos garantir */
[data-theme="dark"] .h-100 {
    height: 100% !important;
}

[data-theme="dark"] .py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

[data-theme="dark"] .system-input,
[data-theme="dark"] .system-select,
[data-theme="dark"] .system-textarea {
    background-color: rgba(118, 75, 162, 0.15) !important; /* Roxo mais visível */
    color: var(--text-primary) !important;
    border-color: rgba(118, 75, 162, 0.4) !important; /* Borda mais visível */
}

[data-theme="dark"] .system-input:focus,
[data-theme="dark"] .system-select:focus,
[data-theme="dark"] .system-textarea:focus {
    border-color: rgba(118, 75, 162, 0.7) !important;
    background-color: rgba(118, 75, 162, 0.22) !important; /* Fundo mais intenso no focus */
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.25) !important;
}

/* Garantir que system-select tenha fundo roxo mesmo quando não está em focus */
[data-theme="dark"] .system-select {
    background-color: rgba(118, 75, 162, 0.15) !important;
    border-color: rgba(118, 75, 162, 0.4) !important;
}

[data-theme="dark"] .system-select:hover {
    background-color: rgba(118, 75, 162, 0.18) !important;
    border-color: rgba(118, 75, 162, 0.5) !important;
}

/* Opções do system-select no dark mode */
[data-theme="dark"] .system-select option {
    background-color: #1a1a2e !important; /* Fundo escuro para o dropdown */
    color: #e0e7ff !important; /* Texto claro para visibilidade */
    padding: 0.5rem !important;
}

[data-theme="dark"] .system-select option:hover,
[data-theme="dark"] .system-select option:focus,
[data-theme="dark"] .system-select option:checked {
    background-color: rgba(118, 75, 162, 0.4) !important; /* Roxo quando selecionado/hover */
    color: #ffffff !important;
}

[data-theme="dark"] .system-select option:disabled {
    background-color: rgba(118, 75, 162, 0.1) !important;
    color: rgba(224, 231, 255, 0.5) !important;
}

/* Inputs padrão (Bulma/Bootstrap) */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: rgba(118, 75, 162, 0.15) !important; /* Roxo mais visível */
    color: var(--text-primary) !important;
    border-color: rgba(118, 75, 162, 0.4) !important; /* Borda mais visível */
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="datetime-local"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: rgba(118, 75, 162, 0.7) !important;
    background-color: rgba(118, 75, 162, 0.22) !important; /* Fundo mais intenso no focus */
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.25) !important;
}

[data-theme="dark"] select:hover {
    background-color: rgba(118, 75, 162, 0.18) !important;
    border-color: rgba(118, 75, 162, 0.5) !important;
}

/* Opções do select no dark mode - dropdown aberto */
[data-theme="dark"] select option {
    background-color: #1a1a2e !important; /* Fundo escuro para o dropdown */
    color: #e0e7ff !important; /* Texto claro para visibilidade */
    padding: 0.5rem !important;
}

[data-theme="dark"] select option:hover,
[data-theme="dark"] select option:focus,
[data-theme="dark"] select option:checked {
    background-color: rgba(118, 75, 162, 0.4) !important; /* Roxo quando selecionado/hover */
    color: #ffffff !important;
}

[data-theme="dark"] select option:disabled {
    background-color: rgba(118, 75, 162, 0.1) !important;
    color: rgba(224, 231, 255, 0.5) !important;
}

/* Inputs do Bulma */
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select select {
    background-color: rgba(118, 75, 162, 0.15) !important; /* Roxo mais visível */
    color: var(--text-primary) !important;
    border-color: rgba(118, 75, 162, 0.4) !important; /* Borda mais visível */
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] .select select:focus {
    border-color: rgba(118, 75, 162, 0.7) !important;
    background-color: rgba(118, 75, 162, 0.22) !important; /* Fundo mais intenso no focus */
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.25) !important;
}

[data-theme="dark"] .select select:hover {
    background-color: rgba(118, 75, 162, 0.18) !important;
    border-color: rgba(118, 75, 162, 0.5) !important;
}

/* Opções do select do Bulma no dark mode */
[data-theme="dark"] .select select option {
    background-color: #1a1a2e !important; /* Fundo escuro para o dropdown */
    color: #e0e7ff !important; /* Texto claro para visibilidade */
    padding: 0.5rem !important;
}

[data-theme="dark"] .select select option:hover,
[data-theme="dark"] .select select option:focus,
[data-theme="dark"] .select select option:checked {
    background-color: rgba(118, 75, 162, 0.4) !important; /* Roxo quando selecionado/hover */
    color: #ffffff !important;
}

/* Botões no dark mode - excluir botões de ação */
[data-theme="dark"] .btn:not(.btn-edit):not(.btn-delete):not(.btn-associate):not(.action-btn):not(.system-action-btn):not(.system-action-btn-edit):not(.system-action-btn-delete):not(.system-action-btn-associate):not(.system-action-btn-view),
[data-theme="dark"] button:not(.navbar-item):not(.navbar-link):not(.btn-edit):not(.btn-delete):not(.btn-associate):not(.action-btn):not(.system-action-btn):not(.system-action-btn-edit):not(.system-action-btn-delete):not(.system-action-btn-associate):not(.system-action-btn-view),
[data-theme="dark"] .button:not(.btn-edit):not(.btn-delete):not(.btn-associate):not(.action-btn):not(.system-action-btn):not(.system-action-btn-edit):not(.system-action-btn-delete):not(.system-action-btn-associate):not(.system-action-btn-view) {
    background-color: rgba(118, 75, 162, 0.2) !important;
    color: var(--text-primary) !important;
    border-color: rgba(118, 75, 162, 0.4) !important;
}

[data-theme="dark"] .btn:not(.btn-edit):not(.btn-delete):not(.btn-associate):not(.action-btn):not(.system-action-btn):not(.system-action-btn-edit):not(.system-action-btn-delete):not(.system-action-btn-associate):not(.system-action-btn-view):hover,
[data-theme="dark"] button:not(.navbar-item):not(.navbar-link):not(.btn-edit):not(.btn-delete):not(.btn-associate):not(.action-btn):not(.system-action-btn):not(.system-action-btn-edit):not(.system-action-btn-delete):not(.system-action-btn-associate):not(.system-action-btn-view):hover,
[data-theme="dark"] .button:not(.btn-edit):not(.btn-delete):not(.btn-associate):not(.action-btn):not(.system-action-btn):not(.system-action-btn-edit):not(.system-action-btn-delete):not(.system-action-btn-associate):not(.system-action-btn-view):hover {
    background-color: rgba(118, 75, 162, 0.35) !important;
    border-color: rgba(118, 75, 162, 0.6) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .button.is-primary {
    background-color: rgba(118, 75, 162, 0.4) !important;
    border-color: rgba(118, 75, 162, 0.6) !important;
    color: white !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .button.is-primary:hover {
    background-color: rgba(118, 75, 162, 0.55) !important;
    border-color: rgba(118, 75, 162, 0.8) !important;
}

/* Select2 no dark mode */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: rgba(118, 75, 162, 0.12) !important;
    border-color: rgba(118, 75, 162, 0.3) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: rgba(118, 75, 162, 0.6) !important;
    background-color: rgba(118, 75, 162, 0.18) !important;
}

/* Select2 dropdown no dark mode */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #1a1a2e !important;
    border-color: rgba(118, 75, 162, 0.4) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    background-color: #1a1a2e !important;
    color: #e0e7ff !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(118, 75, 162, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: rgba(118, 75, 162, 0.5) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: rgba(118, 75, 162, 0.15) !important;
    border-color: rgba(118, 75, 162, 0.4) !important;
    color: var(--text-primary) !important;
}

/* Botões do sistema no dark mode */
[data-theme="dark"] .system-btn {
    background-color: rgba(118, 75, 162, 0.2) !important;
    color: var(--text-primary) !important;
    border-color: rgba(118, 75, 162, 0.4) !important;
}

[data-theme="dark"] .system-btn:hover {
    background-color: rgba(118, 75, 162, 0.35) !important;
    border-color: rgba(118, 75, 162, 0.6) !important;
}

[data-theme="dark"] .system-btn-primary {
    background-color: rgba(118, 75, 162, 0.4) !important;
    border-color: rgba(118, 75, 162, 0.6) !important;
    color: white !important;
}

[data-theme="dark"] .system-btn-primary:hover {
    background-color: rgba(118, 75, 162, 0.55) !important;
    border-color: rgba(118, 75, 162, 0.8) !important;
}

/* Action button no dark mode */
[data-theme="dark"] .action-button {
    background-color: rgba(118, 75, 162, 0.3) !important;
    border-color: rgba(118, 75, 162, 0.5) !important;
    color: white !important;
}

[data-theme="dark"] .action-button:hover {
    background-color: rgba(118, 75, 162, 0.45) !important;
    border-color: rgba(118, 75, 162, 0.7) !important;
}

/* System segmented control no dark mode */
[data-theme="dark"] .system-segmented-control {
    background: rgba(118, 75, 162, 0.12) !important;
    border-color: rgba(118, 75, 162, 0.3) !important;
}

[data-theme="dark"] .system-segmented-control label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .system-segmented-control label:hover:not(.active) {
    color: rgba(118, 75, 162, 0.9) !important;
    background: rgba(118, 75, 162, 0.2) !important;
}

[data-theme="dark"] .system-segmented-control input[type="radio"]:checked + label {
    background: rgba(118, 75, 162, 0.4) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(118, 75, 162, 0.3) !important;
}

/* Botões de ação - manter cores originais no dark mode (não aplicar estilos especiais) */
/* Os botões .btn-edit, .btn-delete, .btn-associate e .action-btn mantêm suas cores originais */
/* Não aplicar estilos de dark mode para esses botões - eles mantêm as cores originais definidas acima (linhas 1219-1280) */

/* Garantir que botões de ação mantenham cores originais no dark mode */
/* Garantir que botões de ação mantenham cores originais no dark mode */
[data-theme="dark"] .btn-edit,
[data-theme="dark"] .action-btn.btn-edit,
[data-theme="dark"] button.btn-edit {
    background: #667eea !important; /* Cor original do btn-edit */
    color: white !important;
    border: none !important;
}

[data-theme="dark"] .btn-delete,
[data-theme="dark"] .action-btn.btn-delete,
[data-theme="dark"] button.btn-delete {
    background: #dc3545 !important; /* Cor original do btn-delete */
    color: white !important;
    border: none !important;
}

[data-theme="dark"] .btn-associate,
[data-theme="dark"] .action-btn.btn-associate,
[data-theme="dark"] button.btn-associate {
    background: #28a745 !important; /* Cor original do btn-associate */
    color: white !important;
    border: none !important;
}

[data-theme="dark"] .btn-edit:hover,
[data-theme="dark"] .action-btn.btn-edit:hover,
[data-theme="dark"] button.btn-edit:hover {
    background: #5a6fd8 !important; /* Hover original do btn-edit */
    color: white !important;
}

[data-theme="dark"] .btn-delete:hover,
[data-theme="dark"] .action-btn.btn-delete:hover,
[data-theme="dark"] button.btn-delete:hover {
    background: #c82333 !important; /* Hover original do btn-delete */
    color: white !important;
}

[data-theme="dark"] .btn-associate:hover,
[data-theme="dark"] .action-btn.btn-associate:hover,
[data-theme="dark"] button.btn-associate:hover {
    background: #218838 !important; /* Hover original do btn-associate */
    color: white !important;
}

/* System action buttons - manter cores originais usando variáveis CSS */
[data-theme="dark"] .system-action-btn-edit,
[data-theme="dark"] button.system-action-btn-edit {
    background: var(--warning-color) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-delete,
[data-theme="dark"] button.system-action-btn-delete {
    background: var(--danger-color) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-associate,
[data-theme="dark"] button.system-action-btn-associate {
    background: var(--success-color) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-view,
[data-theme="dark"] button.system-action-btn-view {
    background: var(--info-color) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-edit:hover,
[data-theme="dark"] button.system-action-btn-edit:hover {
    background: var(--warning-hover) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-delete:hover,
[data-theme="dark"] button.system-action-btn-delete:hover {
    background: var(--danger-hover) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-associate:hover,
[data-theme="dark"] button.system-action-btn-associate:hover {
    background: var(--success-hover) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .system-action-btn-view:hover,
[data-theme="dark"] button.system-action-btn-view:hover {
    background: var(--info-hover) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .content {
    background-color: var(--bg-primary);
}

/* Page header e outros elementos */
[data-theme="dark"] .page-header {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-left-color: var(--primary-color) !important;
}

[data-theme="dark"] .page-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .page-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .main-container {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-container {
    background: var(--bg-elevated) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* Classes de texto do Bootstrap no dark mode */
[data-theme="dark"] .text-gray-300 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-800 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-primary {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .font-weight-bold {
    font-weight: 700 !important;
}

[data-theme="dark"] .text-xs {
    font-size: 0.7rem !important;
}

/* ==========================================
   TOGGLE SWITCH UNIVERSAL
   ========================================== */

/* Switch container */
.system-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin: 0;
}

/* Hide default checkbox */
.system-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.system-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.system-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Checked state */
.system-toggle-switch input:checked + .system-toggle-slider {
    background-color: var(--success-color, #48c774);
}

.system-toggle-switch input:checked + .system-toggle-slider:before {
    transform: translateX(26px);
}

/* Focus state */
.system-toggle-switch input:focus + .system-toggle-slider {
    box-shadow: 0 0 1px var(--success-color, #48c774);
}

/* Disabled state */
.system-toggle-switch input:disabled + .system-toggle-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark mode support */
[data-theme="dark"] .system-toggle-slider {
    background-color: #555;
}

[data-theme="dark"] .system-toggle-switch input:checked + .system-toggle-slider {
    background-color: var(--success-color, #48c774);
}

[data-theme="dark"] .system-toggle-slider:before {
    background-color: #fff;
}