/**
 * 4M TELECOM - SISTEMA MODERNIZADO
 * CSS3 com Design SpaceX e Mobile-First + Sistema de Logs + Timeout de Sessão
 * Versão: v2.0-modernizado-logs-timeout
 */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ========== RESET E CONFIGURAÇÕES GLOBAIS ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Cores SpaceX inspiradas */
    --color-primary: #0a0a0a;
    --color-secondary: #1a1a1a;
    --color-accent: #005288;
    --color-accent-light: #0066cc;
    --color-success: #00d084;
    --color-warning: #ff6b35;
    --color-error: #ff4757;
    --color-info: #3742fa;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #2c3e50 50%, #34495e 75%, #005288 100%);
    --gradient-secondary: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --gradient-accent: linear-gradient(135deg, #005288 0%, #0066cc 100%);
    --gradient-success: linear-gradient(135deg, #00d084 0%, #00b894 100%);
    --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    
    /* Texto */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b2bec3;
    --color-text-muted: #636e72;
    --color-text-dark: #2d3436;
    
    /* Backgrounds */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #1a1a1a;
    --color-bg-card: rgba(255, 255, 255, 0.05);
    --color-bg-modal: rgba(255, 255, 255, 0.95);
    
    /* Bordas */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.05);
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(0, 82, 136, 0.3);
    
    /* Tipografia */
    --font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Espaçamentos */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Raios de borda */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Transições */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9999;
}

/* ========== TIPOGRAFIA ========== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--gradient-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== UTILITÁRIOS ========== */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== COMPONENTES BASE ========== */

/* Ícones */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

.btn-primary {
    background: var(--gradient-accent);
    color: var(--color-text-primary);
    border-color: var(--color-accent);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--color-accent-light);
}

.btn-secondary {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Botão de Logout Modernizado */
.btn-logout {
    background: linear-gradient(135deg, var(--color-error) 0%, #ff6b7a 100%);
    color: var(--color-text-primary);
    border: 2px solid var(--color-error);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

.btn-logout:hover {
    background: linear-gradient(135deg, #ff6b7a 0%, #ff5252 100%);
    border-color: #ff6b7a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

/* Botões Adicionar e Voltar Modernizados */
.btn-add {
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
    border: 2px solid #007AFF;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 180px;
    height: 48px;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
}

.btn-add:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
    border-color: #0066FF;
    background: linear-gradient(135deg, #0088FF 0%, #0066DD 100%);
}

.btn-back {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: var(--color-text-primary);
    border-radius: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 140px;
    height: 48px;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
}

.btn-back:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
    box-shadow: 0 8px 25px rgba(0, 82, 136, 0.25);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 82, 136, 0.08) 100%);
}

/* Responsividade para botões */
@media (max-width: 768px) {
    .section-actions {
        flex-direction: row !important;
        gap: var(--spacing-md);
        width: 100%;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .btn-add {
        flex: 1;
        min-width: 140px;
        max-width: 180px;
        height: 50px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
    
    .btn-back {
        flex: 1;
        min-width: 120px;
        max-width: 150px;
        height: 50px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
}

/* Formulários */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dark);
}

.form-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid #e1e5e9;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: inherit;
    background: #ffffff;
    color: var(--color-text-dark);
    transition: all var(--transition-base);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 82, 136, 0.1);
}

.form-input:read-only {
    background-color: #f8f9fa;
    color: var(--color-text-muted);
}

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

/* ========== LAYOUT PRINCIPAL ========== */

/* Tela de Login */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: var(--spacing-lg);
    background: var(--gradient-primary);
}

.login-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: var(--spacing-3xl);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.login-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

.btn-login {
    width: 100%;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    color: var(--color-text-primary);
    border: 2px solid var(--color-accent);
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 82, 136, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 82, 136, 0.4);
    background: linear-gradient(135deg, var(--color-accent-light) 0%, #0077ff 100%);
}

.btn-login .btn-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Dashboard */
.dashboard {
    min-height: 100vh;
    background: var(--gradient-primary);
}

/* Menu Principal */
.menu-container {
    min-height: 100vh;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.system-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    padding: var(--spacing-xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
}

.system-info {
    text-align: left;
}

.system-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.system-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.system-actions {
    display: flex;
    gap: var(--spacing-md);
}

/* Grid dos Módulos */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    width: 100%;
    max-width: 1200px;
}

.module-card {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.module-card:hover::before {
    transform: scaleX(1);
}

.module-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-accent);
}

.module-card:nth-child(1) {
    border-left: 4px solid var(--color-success);
}

.module-card:nth-child(2) {
    border-left: 4px solid var(--color-accent);
}

.module-card:nth-child(3) {
    border-left: 4px solid var(--color-warning);
}

.module-card:nth-child(4) {
    border-left: 4px solid var(--color-info);
}

.module-icon {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
    opacity: 0.9;
    transition: all var(--transition-base);
}

.module-card:hover .module-icon {
    opacity: 1;
    transform: scale(1.1);
}

.module-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.module-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ========== SEÇÕES DE CONTEÚDO ========== */
.content-section {
    display: none;
    min-height: 100vh;
    padding: var(--spacing-xl);
    background: var(--gradient-primary);
}

.content-section.active {
    display: block;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.section-icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-accent);
}

.section-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Busca e Cards de Lucro */
.search-profit-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: var(--spacing-2xl);
}

.search-container {
    flex: 1;
}

.profit-summary,
.profit-summary-products {
    flex-shrink: 0;
    min-width: 350px;
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    color: var(--color-text-primary);
    text-align: center;
}

.profit-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.profit-amount {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-success);
}

.search-input-wrapper {
    position: relative;
    max-width: 500px;
}

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) 3rem;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    backdrop-filter: blur(10px);
    transition: all var(--transition-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 82, 136, 0.1);
}

/* Loading */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-lg);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tabelas */
.table-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

.data-table th {
    background: var(--gradient-secondary);
    color: var(--color-text-primary);
    padding: var(--spacing-lg);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    padding: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--color-text-dark);
    font-size: var(--font-size-sm);
}

.data-table tr:hover {
    background: rgba(0, 82, 136, 0.05);
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Cards */
.cards-container {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

.data-card {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    color: var(--color-text-primary);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.data-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
}

.data-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

/* Estados vazios */
.empty-state {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.empty-icon {
    margin-bottom: var(--spacing-xl);
    opacity: 0.5;
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.empty-state p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ========== MODAIS ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: var(--z-modal-backdrop);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    padding: var(--spacing-lg);
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--color-bg-modal);
    border-radius: var(--radius-2xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(-20px);
    transition: all var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-overlay.show .modal {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    background: var(--gradient-secondary);
    color: var(--color-text-primary);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.btn-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-form {
    padding: var(--spacing-xl);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.form-field {
    display: flex;
    flex-direction: column;
}

.modal-footer {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Modal de Pagamento */
.payment-modal {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 2px solid var(--color-success);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    max-width: 400px;
    width: 100%;
    color: var(--color-text-primary);
    text-align: center;
    box-shadow: var(--shadow-xl), 0 0 20px rgba(0, 208, 132, 0.3);
    transform: scale(0.9) translateY(-20px);
    transition: all var(--transition-base);
}

.modal-overlay.show .payment-modal {
    transform: scale(1) translateY(0);
}

.payment-header {
    margin-bottom: var(--spacing-xl);
}

.payment-icon {
    margin-bottom: var(--spacing-lg);
    color: var(--color-success);
}

.payment-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.payment-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.payment-content {
    margin: var(--spacing-xl) 0;
    text-align: left;
}

.payment-question {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.payment-details {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-label {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.detail-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.detail-value.valor-destaque {
    color: var(--color-success) !important;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.payment-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.payment-footer .btn {
    flex: 1;
    padding: var(--spacing-lg);
}

/* ========== ADMINISTRAÇÃO ========== */
.admin-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.admin-card {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    border-left: 4px solid var(--color-info);
}

.admin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-info);
}

.admin-icon {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
    opacity: 0.9;
}

.admin-card:hover .admin-icon {
    opacity: 1;
    transform: scale(1.05);
}

.admin-card h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.admin-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ========== SISTEMA DE LOGS ========== */

/* Seção de Logs */
.logs-section {
    padding: 1.5rem;
}

.admin-subsection {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* Ações dos Logs */
.logs-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Estatísticas dos Logs */
.logs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
    transition: all var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-label {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Filtros dos Logs */
.logs-filters {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.filter-group input,
.filter-group select {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 82, 136, 0.1);
}

/* Filtros de Pagamento */
.filters-container {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.filters-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 40px;
}

.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--color-accent);
}

.filter-btn.active {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 82, 136, 0.3);
}

.filter-btn.filter-em-dia {
    border-color: #22c55e;
    color: #22c55e;
}

.filter-btn.filter-em-dia:hover,
.filter-btn.filter-em-dia.active {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.filter-btn.filter-pendente {
    border-color: #f97316;
    color: #f97316;
}

.filter-btn.filter-pendente:hover,
.filter-btn.filter-pendente.active {
    background: #f97316;
    border-color: #f97316;
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.filter-btn.filter-atrasado {
    border-color: #ef4444;
    color: #ef4444;
}

.filter-btn.filter-atrasado:hover,
.filter-btn.filter-atrasado.active {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.filter-count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.5rem;
    text-align: center;
}

.filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Responsividade dos Filtros */
@media (max-width: 768px) {
    .filters-container {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .filters-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-height: 36px;
    }
    
    .filter-count {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 480px) {
    .filters-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    
    .filter-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        min-height: 32px;
    }
}

/* Container da Tabela de Logs */
.logs-table-container {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow-x: auto;
}

.logs-table-container .data-table th {
    background: var(--gradient-secondary);
    font-weight: 600;
    color: var(--color-text-primary);
}

.logs-table-container .data-table td {
    vertical-align: middle;
    color: var(--color-text-dark);
}

.logs-table-container .data-table tr:hover {
    background: rgba(0, 82, 136, 0.05);
}

/* Cards de Logs para Mobile */
.logs-cards-container {
    display: grid;
    gap: 1rem;
}

.log-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    transition: all var(--transition-base);
}

.log-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.log-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.log-card-content {
    display: grid;
    gap: 0.75rem;
}

.log-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.log-detail:last-child {
    border-bottom: none;
}

.log-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 80px;
}

/* Badges */
.user-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.action-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.action-login { background: #dbeafe; color: #1e40af; }
.action-logout { background: #fef3c7; color: #92400e; }
.action-criar { background: #d1fae5; color: #065f46; }
.action-editar { background: #fde68a; color: #92400e; }
.action-excluir { background: #fecaca; color: #991b1b; }
.action-confirmar_pagamento { background: #d1fae5; color: #065f46; }
.action-backup { background: #e0e7ff; color: #3730a3; }
.action-aviso_timeout { background: #fef3c7; color: #92400e; }
.action-sessao_estendida { background: #d1fae5; color: #065f46; }
.action-logout_timeout { background: #fecaca; color: #991b1b; }

.module-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.module-autenticacao { background: #f3f4f6; color: #374151; }
.module-clientes { background: #dbeafe; color: #1e40af; }
.module-produtos { background: #fef3c7; color: #92400e; }
.module-financeiro { background: #d1fae5; color: #065f46; }
.module-sistema { background: #e0e7ff; color: #3730a3; }

/* ========== TIMEOUT DE SESSÃO ========== */

/* Modal de Aviso de Timeout */
.session-warning-modal {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    max-width: 450px;
    width: 100%;
    color: var(--color-text-primary);
    text-align: center;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(-20px);
    transition: all var(--transition-base);
    border-left: 4px solid var(--color-warning);
}

.modal-overlay.show .session-warning-modal {
    transform: scale(1) translateY(0);
}

/* Header do Modal de Aviso */
.warning-header {
    margin-bottom: var(--spacing-xl);
}

.warning-icon {
    margin: 0 auto var(--spacing-lg);
    color: var(--color-warning);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 107, 53, 0.1);
    border-radius: 50%;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
    }
}

.warning-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.warning-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Conteúdo do Modal */
.warning-content {
    margin: var(--spacing-xl) 0;
}

.countdown-display {
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid var(--color-warning);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.countdown-number {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--color-warning);
    line-height: 1;
    animation: countdown-pulse 1s infinite;
}

@keyframes countdown-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.countdown-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.warning-message {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Footer do Modal */
.warning-footer {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.warning-footer .btn {
    flex: 1;
    padding: var(--spacing-lg);
    font-weight: 600;
}

.warning-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.warning-footer .btn-secondary:hover {
    background: rgba(255, 107, 53, 0.1);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.warning-footer .btn-primary {
    background: var(--gradient-accent);
    color: var(--color-text-primary);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

.warning-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* Indicador de Status da Sessão */
.session-status-indicator {
    position: fixed;
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0.8;
    transition: all var(--transition-base);
}

.session-status-indicator:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.session-status-indicator.warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.session-status-indicator.critical {
    border-color: var(--color-error);
    color: var(--color-error);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

.session-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Estados de urgência do countdown */
.countdown-display.urgent {
    border-color: var(--color-error);
    background: rgba(255, 71, 87, 0.1);
}

.countdown-display.urgent .countdown-number {
    color: var(--color-error);
    animation: countdown-urgent 0.5s infinite;
}

@keyframes countdown-urgent {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Overlay especial para timeout */
#sessionWarningModal.modal-overlay {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
}

/* Efeitos visuais adicionais */
.warning-icon svg {
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.3));
}

.session-warning-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-error) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* ========== NOTIFICAÇÕES TOAST ========== */
.toast-container {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 400px;
    width: 100%;
}

.toast {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--color-success);
    transform: translateX(400px);
    opacity: 0;
    transition: all var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.success {
    border-left-color: var(--color-success);
}

.toast.error {
    border-left-color: var(--color-error);
}

.toast.warning {
    border-left-color: var(--color-warning);
}

.toast.info {
    border-left-color: var(--color-info);
}

.toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.toast-title {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: var(--font-size-base);
}

.toast-close {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-text-dark);
}

.toast-message {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* ========== STATUS E BADGES ========== */
.status-pago {
    color: var(--color-success);
    font-weight: 600;
    background: rgba(0, 208, 132, 0.1);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pendente {
    color: var(--color-warning);
    font-weight: 600;
    background: rgba(255, 107, 53, 0.1);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-atrasado {
    color: var(--color-error);
    font-weight: 600;
    background: rgba(255, 71, 87, 0.1);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lucro-estimado {
    color: var(--color-success) !important;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

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

/* Mobile First - Ajustes para telas pequenas */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 1rem;
        --spacing-2xl: 1.5rem;
        --spacing-3xl: 2rem;
    }
    
    .login-box {
        padding: var(--spacing-xl);
    }
    
    .login-title {
        font-size: var(--font-size-2xl);
    }
    
    .system-header {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .system-title {
        font-size: var(--font-size-2xl);
    }
    
    .modules-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .module-card {
        min-height: 150px;
        padding: var(--spacing-lg);
    }
    
    .module-title {
        font-size: var(--font-size-lg);
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-lg);
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }
    
    .section-actions {
        justify-content: center;
    }
    
    /* Cards de lucro mobile */
    .search-profit-container {
        flex-direction: column;
        gap: 0;
        margin-bottom: 15px;
    }
    
    .search-container {
        order: 1;
        margin-bottom: 15px;
    }
    
    .profit-summary,
    .profit-summary-products {
        order: 2;
        min-width: 100%;
        margin-bottom: 24px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .modal {
        margin: var(--spacing-md);
        max-height: calc(100vh - 2rem);
    }
    
    .toast-container {
        top: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
        max-width: none;
    }
    
    .toast {
        transform: translateY(-100px);
    }
    
    .toast.show {
        transform: translateY(0);
    }
    
    .admin-menu {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .payment-footer {
        flex-direction: column;
    }
    
    /* Logs mobile */
    .logs-section {
        padding: 1rem;
    }
    
    .logs-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .logs-stats {
        grid-template-columns: 1fr;
    }
    
    .filter-row {
        grid-template-columns: 1fr;
    }
    
    .log-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .log-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    /* Timeout mobile */
    .session-warning-modal {
        margin: var(--spacing-md);
        padding: var(--spacing-xl);
        max-width: none;
    }
    
    .warning-footer {
        flex-direction: column;
    }
    
    .countdown-number {
        font-size: var(--font-size-3xl);
    }
    
    .session-status-indicator {
        bottom: var(--spacing-md);
        left: var(--spacing-md);
        right: var(--spacing-md);
        justify-content: center;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .admin-menu {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 769px) {
    .modules-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .cards-container {
        display: none;
    }
    
    .table-container {
        display: block;
    }
    
    .admin-menu {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .desktop-only {
        display: block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}

/* Large Desktop */
@media (min-width: 1024px) {
    .admin-menu {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extra Large Desktop */
@media (min-width: 1200px) {
    .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== ANIMAÇÕES PERSONALIZADAS ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.session-warning-modal {
    animation: slideInUp 0.3s ease-out;
}

/* ========== MELHORIAS DE ACESSIBILIDADE ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .warning-icon,
    .countdown-number {
        animation: none !important;
    }
    
    .session-warning-modal {
        animation: none !important;
        transform: none !important;
    }
}

/* Focus styles para acessibilidade */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.warning-footer .btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ========== PRINT STYLES ========== */
@media print {
    .toast-container,
    .modal-overlay,
    .btn-logout,
    .section-actions,
    .session-warning-modal,
    .session-status-indicator {
        display: none !important;
    }
    
    .content-section {
        background: white !important;
        color: black !important;
    }
    
    .data-table th {
        background: #f5f5f5 !important;
        color: black !important;
    }
}


/* ========== SISTEMA DE BACKUP - DESIGN MELHORADO ========== */

/* Seção de backup */
.backup-section {
    background: var(--gradient-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    backdrop-filter: blur(10px);
}

/* Header com ações */
.backup-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Estatísticas dos backups */
.backup-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.backup-stats .stat-card {
    background: linear-gradient(135deg, rgba(0, 82, 136, 0.1) 0%, rgba(0, 102, 204, 0.05) 100%);
    border: 1px solid rgba(0, 82, 136, 0.2);
    position: relative;
    overflow: hidden;
}

.backup-stats .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
}

.backup-stats .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 82, 136, 0.2);
    border-color: var(--color-accent);
}

/* Cards de backup mobile */
.backup-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.backup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-accent);
}

.backup-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--color-accent-light);
}

.backup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.backup-id {
    background: var(--gradient-accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.backup-card-content {
    display: grid;
    gap: var(--spacing-md);
}

.backup-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.backup-detail:last-child {
    border-bottom: none;
}

.backup-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 80px;
}

.backup-filename {
    color: var(--color-success);
    font-weight: 600;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    background: rgba(0, 208, 132, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Container de cards */
.backup-cards-container {
    margin-top: var(--spacing-xl);
}

/* Tabela desktop melhorada */
.backup-table-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--spacing-xl);
}

.backup-table-container .data-table {
    margin: 0;
    border-radius: 0;
}

.backup-table-container .data-table thead th {
    background: linear-gradient(135deg, rgba(0, 82, 136, 0.2) 0%, rgba(0, 102, 204, 0.1) 100%);
    color: var(--color-text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.backup-table-container .data-table tbody tr:hover {
    background: rgba(0, 82, 136, 0.1);
    transform: scale(1.01);
}

/* Estado vazio melhorado */
.backup-section .empty-state {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    text-align: center;
    margin-top: var(--spacing-xl);
}

.backup-section .empty-state .empty-icon {
    margin-bottom: var(--spacing-lg);
    opacity: 0.6;
}

.backup-section .empty-state h3 {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.backup-section .empty-state p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Responsividade específica para backup */
@media (max-width: 768px) {
    .backup-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .backup-actions {
        justify-content: center;
    }
    
    .backup-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .backup-filename {
        max-width: 100%;
    }
    
    .backup-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* Animações específicas */
@keyframes backupPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.backup-card.creating {
    animation: backupPulse 2s infinite;
}

/* Status badges melhorados para backup */
.backup-card .status-pago {
    background: var(--gradient-success);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

.backup-card .status-atrasado {
    background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}


/* ========== BOTÕES DO SISTEMA DE BACKUP - DESIGN MELHORADO ========== */

/* Container dos botões de backup */
.backup-actions {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

/* Botão Criar Backup - Estilo Premium */
.backup-actions .btn-primary {
    background: linear-gradient(135deg, #00d084 0%, #00b894 25%, #00a085 50%, #008f75 75%, #007d66 100%);
    border: 2px solid #00d084;
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-xl);
    font-weight: 700;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 208, 132, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.backup-actions .btn-primary::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: left 0.5s;
}

.backup-actions .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 208, 132, 0.4);
    border-color: #00f5a0;
    background: linear-gradient(135deg, #00f5a0 0%, #00d084 25%, #00b894 50%, #00a085 75%, #008f75 100%);
}

.backup-actions .btn-primary:hover::before {
    left: 100%;
}

.backup-actions .btn-primary:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 15px rgba(0, 208, 132, 0.5);
}

/* Botão Atualizar - Estilo Elegante */
.backup-actions .btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: var(--font-size-base);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.backup-actions .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 82, 136, 0.1) 0%, rgba(0, 102, 204, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.backup-actions .btn-secondary:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
    box-shadow: 0 6px 20px rgba(0, 82, 136, 0.2);
}

.backup-actions .btn-secondary:hover::before {
    opacity: 1;
}

.backup-actions .btn-secondary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 82, 136, 0.3);
}

/* Ícones dos botões melhorados */
.backup-actions .btn .icon {
    transition: transform 0.3s ease;
}

.backup-actions .btn:hover .icon {
    transform: scale(1.1) rotate(5deg);
}

.backup-actions .btn-primary:hover .icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Efeito de loading para o botão criar backup */
.backup-actions .btn-primary.loading {
    pointer-events: none;
    position: relative;
}

.backup-actions .btn-primary.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsividade para botões */
@media (max-width: 768px) {
    .backup-actions {
        flex-direction: row !important;
        gap: var(--spacing-md);
        width: 100%;
        justify-content: space-between;
    }
    
    .backup-actions .btn-primary {
        flex: 1;
        min-width: 140px;
        max-width: 180px;
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
    
    .backup-actions .btn-secondary {
        flex: 1;
        min-width: 120px;
        max-width: 150px;
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }
}

/* Efeito especial para o botão criar backup quando há poucos backups */
.backup-actions .btn-primary.highlight {
    animation: highlightPulse 2s infinite;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 208, 132, 0.3);
    }
    50% {
        box-shadow: 0 8px 30px rgba(0, 208, 132, 0.6);
        transform: translateY(-1px);
    }
}




















/* ========== BOTÕES DE LOGS - DESIGN IGUAL AOS DE CLIENTES ========== */

/* Botões de logs com design dos botões de clientes */
.logs-actions .btn {
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
    border: 2px solid #007AFF;
    color: white;
    border-radius: 25px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 140px;
    height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.logs-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
    border-color: #0066FF;
}

/* Botão secundário (Atualizar) */
.logs-actions .btn:nth-child(2) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.logs-actions .btn:nth-child(2):hover {
    transform: translateY(-2px);
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
    box-shadow: 0 6px 20px rgba(0, 82, 136, 0.2);
}

/* Botão terciário (Status da Sessão) */
.logs-actions .btn:nth-child(3) {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    border: 2px solid #ffc107;
    color: #212529;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.logs-actions .btn:nth-child(3):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    border-color: #ffcd39;
}

/* Responsividade para botões de logs */
@media (max-width: 768px) {
    .logs-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .logs-actions .btn {
        width: 100%;
        min-width: auto;
        height: 40px;
        font-size: var(--font-size-sm);
    }
}

/* Ícones dos botões de logs */
.logs-actions .btn .icon {
    transition: transform 0.3s ease;
}

.logs-actions .btn:hover .icon {
    transform: scale(1.1);
}


/* ========== BOTÃO ADICIONAR USUÁRIO - DESIGN IGUAL AOS DE CLIENTES ========== */

/* Botão de adicionar usuário com design dos botões de clientes */
.user-actions .btn,
.user-section .btn,
#addUserBtn,
button[onclick*="addUser"],
.btn-add-user {
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%) !important;
    border: 2px solid #007AFF !important;
    color: white !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-width: 200px !important;
    height: 50px !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    font-size: var(--font-size-base) !important;
}

.user-actions .btn:hover,
.user-section .btn:hover,
#addUserBtn:hover,
button[onclick*="addUser"]:hover,
.btn-add-user:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4) !important;
    border-color: #0066FF !important;
}

/* Responsividade para botão de usuário */
@media (max-width: 768px) {
    .user-actions .btn,
    .user-section .btn,
    #addUserBtn,
    button[onclick*="addUser"],
    .btn-add-user {
        min-width: 140px !important;
        max-width: 180px !important;
        height: 50px !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-size: var(--font-size-sm) !important;
        width: 100% !important;
    }
}

/* Ícone do botão de adicionar usuário */
.user-actions .btn .icon,
.user-section .btn .icon,
#addUserBtn .icon,
button[onclick*="addUser"] .icon,
.btn-add-user .icon {
    transition: transform 0.3s ease !important;
}

.user-actions .btn:hover .icon,
.user-section .btn:hover .icon,
#addUserBtn:hover .icon,
button[onclick*="addUser"]:hover .icon,
.btn-add-user:hover .icon {
    transform: scale(1.1) !important;
}


/* ========== MODAL DE NOVO USUÁRIO - DESIGN CONSISTENTE ========== */

/* Modal de usuário com mesmo design dos outros modais */
#formOverlayUsuario .modal {
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: 0;
    max-width: 600px;
    width: 100%;
    color: var(--color-text-primary);
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(-20px);
    transition: all var(--transition-base);
}

#formOverlayUsuario.show .modal {
    transform: scale(1) translateY(0);
}

/* Header do modal de usuário */
#formOverlayUsuario .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg, rgba(0, 82, 136, 0.1) 0%, rgba(0, 102, 204, 0.05) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

#formOverlayUsuario .modal-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

/* Formulário de usuário */
#usuarioForm {
    padding: var(--spacing-xl);
}

#usuarioForm .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

#usuarioForm .form-field {
    display: flex;
    flex-direction: column;
}

#usuarioForm .form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #000000;
}

#usuarioForm .form-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid #e1e5e9;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: #ffffff;
    color: #000000;
    transition: all var(--transition-base);
}

#usuarioForm .form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 82, 136, 0.1);
    background: #ffffff;
}

#usuarioForm .form-input::placeholder {
    color: #666666;
}

/* Select personalizado para nível de acesso */
#nivel_acesso {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: 1rem;
    padding-right: calc(var(--spacing-md) + 1.5rem);
}

/* Footer do modal de usuário */
#usuarioForm .modal-footer {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Botões do modal de usuário com design consistente */
#usuarioForm .btn-primary {
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
    border: 2px solid #007AFF;
    color: white;
    border-radius: 25px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    height: 45px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

#usuarioForm .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
    border-color: #0066FF;
}

#usuarioForm .btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    border-radius: 25px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    height: 45px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

#usuarioForm .btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
    box-shadow: 0 6px 20px rgba(0, 82, 136, 0.2);
}

/* Responsividade para modal de usuário */
@media (max-width: 768px) {
    #formOverlayUsuario .modal {
        margin: var(--spacing-md);
        max-height: calc(100vh - 2rem);
        max-width: none;
    }
    
    #usuarioForm .form-grid {
        grid-template-columns: 1fr;
    }
    
    #usuarioForm .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    #usuarioForm .btn-primary,
    #usuarioForm .btn-secondary {
        width: 100%;
        min-width: auto;
    }
}

/* Validação de formulário */
#usuarioForm .form-input:invalid {
    border-color: var(--color-error);
}

#usuarioForm .form-input:valid {
    border-color: var(--color-success);
}

/* Estados de loading */
#usuarioForm .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Animação de entrada do modal */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#formOverlayUsuario.show .modal {
    animation: modalSlideIn 0.3s ease-out;
}



/* ========== BOTÕES DE AÇÃO MODERNIZADOS ========== */

/* Botões de Editar */
.btn-edit,
.btn[onclick*="editar"],
.btn[onclick*="Editar"],
button[onclick*="editar"],
button[onclick*="Editar"] {
    background: linear-gradient(135deg, var(--color-warning) 0%, #ffb347 100%);
    color: white;
    border: 2px solid var(--color-warning);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    min-height: 40px;
}

.btn-edit:hover,
.btn[onclick*="editar"]:hover,
.btn[onclick*="Editar"]:hover,
button[onclick*="editar"]:hover,
button[onclick*="Editar"]:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ffb347 0%, #ff9500 100%);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    border-color: #ffb347;
}

/* Botões de Excluir */
.btn-delete,
.btn[onclick*="excluir"],
.btn[onclick*="Excluir"],
.btn[onclick*="deletar"],
.btn[onclick*="Deletar"],
button[onclick*="excluir"],
button[onclick*="Excluir"],
button[onclick*="deletar"],
button[onclick*="Deletar"] {
    background: linear-gradient(135deg, var(--color-error) 0%, #ff6b7a 100%);
    color: white;
    border: 2px solid var(--color-error);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
    min-height: 40px;
}

.btn-delete:hover,
.btn[onclick*="excluir"]:hover,
.btn[onclick*="Excluir"]:hover,
.btn[onclick*="deletar"]:hover,
.btn[onclick*="Deletar"]:hover,
button[onclick*="excluir"]:hover,
button[onclick*="Excluir"]:hover,
button[onclick*="deletar"]:hover,
button[onclick*="Deletar"]:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ff6b7a 0%, #ff5252 100%);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
    border-color: #ff6b7a;
}

/* Botões de Confirmar */
.btn-confirm,
.btn[onclick*="confirmar"]:not([onclick*="pagamento"]),
.btn[onclick*="Confirmar"]:not([onclick*="pagamento"]),
button[onclick*="confirmar"]:not([onclick*="pagamento"]),
button[onclick*="Confirmar"]:not([onclick*="pagamento"]) {
    background: linear-gradient(135deg, var(--color-success) 0%, #00e68c 100%);
    color: white;
    border: 2px solid var(--color-success);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 208, 132, 0.3);
    min-height: 40px;
}

.btn-confirm:hover,
.btn[onclick*="confirmar"]:not([onclick*="pagamento"]):hover,
.btn[onclick*="Confirmar"]:not([onclick*="pagamento"]):hover,
button[onclick*="confirmar"]:not([onclick*="pagamento"]):hover,
button[onclick*="Confirmar"]:not([onclick*="pagamento"]):hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #00e68c 0%, #00cc7a 100%);
    box-shadow: 0 6px 20px rgba(0, 208, 132, 0.4);
    border-color: #00e68c;
}

/* Botões de Exportar CSV */
.btn-export,
.btn[onclick*="exportar"],
.btn[onclick*="Exportar"],
.btn[onclick*="csv"],
.btn[onclick*="CSV"],
button[onclick*="exportar"],
button[onclick*="Exportar"],
button[onclick*="csv"],
button[onclick*="CSV"] {
    background: linear-gradient(135deg, var(--color-info) 0%, #4f46e5 100%);
    color: white;
    border: 2px solid var(--color-info);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(59, 66, 250, 0.3);
    min-height: 40px;
}

.btn-export:hover,
.btn[onclick*="exportar"]:hover,
.btn[onclick*="Exportar"]:hover,
.btn[onclick*="csv"]:hover,
.btn[onclick*="CSV"]:hover,
button[onclick*="exportar"]:hover,
button[onclick*="Exportar"]:hover,
button[onclick*="csv"]:hover,
button[onclick*="CSV"]:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    box-shadow: 0 6px 20px rgba(59, 66, 250, 0.4);
    border-color: #4f46e5;
}

/* Botões de Atualizar */
.btn-update,
.btn[onclick*="atualizar"],
.btn[onclick*="Atualizar"],
.btn[onclick*="refresh"],
.btn[onclick*="Refresh"],
button[onclick*="atualizar"],
button[onclick*="Atualizar"],
button[onclick*="refresh"],
button[onclick*="Refresh"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    color: var(--color-text-primary);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    min-height: 40px;
}

.btn-update:hover,
.btn[onclick*="atualizar"]:hover,
.btn[onclick*="Atualizar"]:hover,
.btn[onclick*="refresh"]:hover,
.btn[onclick*="Refresh"]:hover,
button[onclick*="atualizar"]:hover,
button[onclick*="Atualizar"]:hover,
button[onclick*="refresh"]:hover,
button[onclick*="Refresh"]:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 82, 136, 0.08) 100%);
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
    box-shadow: 0 6px 20px rgba(0, 82, 136, 0.25);
}

/* Status da Sessão Modernizado */
.session-status,
.session-indicator,
.status-sessao {
    background: linear-gradient(135deg, rgba(0, 208, 132, 0.15) 0%, rgba(0, 208, 132, 0.05) 100%);
    color: var(--color-success);
    border: 2px solid rgba(0, 208, 132, 0.3);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.session-status:hover,
.session-indicator:hover,
.status-sessao:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 208, 132, 0.2);
    border-color: rgba(0, 208, 132, 0.5);
}

.session-status.warning,
.session-indicator.warning,
.status-sessao.warning {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.05) 100%);
    color: var(--color-warning);
    border-color: rgba(255, 107, 53, 0.3);
}

.session-status.error,
.session-indicator.error,
.status-sessao.error {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.15) 0%, rgba(255, 71, 87, 0.05) 100%);
    color: var(--color-error);
    border-color: rgba(255, 71, 87, 0.3);
}

/* Botões de Backup Modernizados */
.btn-backup,
.btn[onclick*="backup"],
.btn[onclick*="Backup"],
button[onclick*="backup"],
button[onclick*="Backup"] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: 2px solid #6366f1;
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    min-height: 40px;
}

.btn-backup:hover,
.btn[onclick*="backup"]:hover,
.btn[onclick*="Backup"]:hover,
button[onclick*="backup"]:hover,
button[onclick*="Backup"]:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    border-color: #8b5cf6;
}

/* Botões Pequenos (ícones) */
.btn-sm,
.btn.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    min-height: 32px;
    border-radius: 8px;
}

/* Responsividade para botões de ação */
@media (max-width: 768px) {
    .btn-edit,
    .btn-delete,
    .btn-confirm,
    .btn-export,
    .btn-update,
    .btn-backup,
    .btn[onclick*="editar"],
    .btn[onclick*="excluir"],
    .btn[onclick*="confirmar"],
    .btn[onclick*="exportar"],
    .btn[onclick*="atualizar"],
    .btn[onclick*="backup"] {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        min-height: 36px;
    }
}


/* ========== BOTÕES ESPECÍFICOS DO JAVASCRIPT ========== */

/* Botões Editar - Seletores específicos para os botões gerados dinamicamente */
button[onclick*="editCliente"],
button[onclick*="editProduto"],
button[onclick*="edit"],
.btn-secondary[onclick*="edit"] {
    background: linear-gradient(135deg, var(--color-warning) 0%, #ffb347 100%) !important;
    color: white !important;
    border: 2px solid var(--color-warning) !important;
    border-radius: 12px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    min-height: 40px !important;
}

button[onclick*="editCliente"]:hover,
button[onclick*="editProduto"]:hover,
button[onclick*="edit"]:hover,
.btn-secondary[onclick*="edit"]:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #ffb347 0%, #ff9500 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
    border-color: #ffb347 !important;
}

/* Botões Excluir - Seletores específicos para os botões gerados dinamicamente */
button[onclick*="deleteCliente"],
button[onclick*="deleteProduto"],
button[onclick*="delete"],
.btn-secondary[onclick*="delete"],
button[style*="color: var(--color-error)"],
.btn-secondary[style*="color: var(--color-error)"] {
    background: linear-gradient(135deg, var(--color-error) 0%, #ff6b7a 100%) !important;
    color: white !important;
    border: 2px solid var(--color-error) !important;
    border-radius: 12px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3) !important;
    min-height: 40px !important;
}

button[onclick*="deleteCliente"]:hover,
button[onclick*="deleteProduto"]:hover,
button[onclick*="delete"]:hover,
.btn-secondary[onclick*="delete"]:hover,
button[style*="color: var(--color-error)"]:hover,
.btn-secondary[style*="color: var(--color-error)"]:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #ff6b7a 0%, #ff5252 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4) !important;
    border-color: #ff6b7a !important;
}

/* Botões btn-secondary padrão (que não são editar/excluir) */
.btn-secondary:not([onclick*="edit"]):not([onclick*="delete"]):not([style*="color: var(--color-error)"]) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    color: var(--color-text-primary) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    min-height: 40px !important;
}

.btn-secondary:not([onclick*="edit"]):not([onclick*="delete"]):not([style*="color: var(--color-error)"]):hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 82, 136, 0.08) 100%) !important;
    border-color: var(--color-accent-light) !important;
    color: var(--color-accent-light) !important;
    box-shadow: 0 6px 20px rgba(0, 82, 136, 0.25) !important;
}

/* Botões primários modernizados */
.btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%) !important;
    color: var(--color-text-primary) !important;
    border: 2px solid var(--color-accent) !important;
    border-radius: 12px !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 82, 136, 0.3) !important;
    min-height: 44px !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, #0077ff 100%) !important;
    box-shadow: 0 8px 25px rgba(0, 82, 136, 0.4) !important;
    border-color: var(--color-accent-light) !important;
}

/* Garantir que os estilos sejam aplicados mesmo com especificidade alta */
button.btn-secondary[onclick*="editCliente"],
button.btn-secondary[onclick*="editProduto"] {
    background: linear-gradient(135deg, var(--color-warning) 0%, #ffb347 100%) !important;
    color: white !important;
    border-color: var(--color-warning) !important;
}

button.btn-secondary[onclick*="deleteCliente"],
button.btn-secondary[onclick*="deleteProduto"] {
    background: linear-gradient(135deg, var(--color-error) 0%, #ff6b7a 100%) !important;
    color: white !important;
    border-color: var(--color-error) !important;
}

/* Responsividade para botões pequenos em mobile */
@media (max-width: 768px) {
    button[onclick*="edit"],
    button[onclick*="delete"],
    .btn-secondary {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        font-size: var(--font-size-xs) !important;
        min-height: 36px !important;
        border-radius: 8px !important;
    }
    
    button[onclick*="edit"] svg,
    button[onclick*="delete"] svg {
        width: 14px !important;
        height: 14px !important;
    }
}


/* ========== MODAL DE CONFIRMAÇÃO BONITO - ADICIONADO ========== */

#simpleModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#simpleModal.show {
    opacity: 1;
    visibility: visible;
}

.simple-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.simple-modal {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 20px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    max-width: 420px;
    width: 100%;
    transform: scale(0.8) translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#simpleModal.show .simple-modal {
    transform: scale(1) translateY(0);
}

.simple-modal-header {
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    position: relative;
}

.simple-modal-header::before {
    content: '⚠️';
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    animation: pulse-modal 2s ease-in-out infinite;
}

@keyframes pulse-modal {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.simple-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff4757;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.simple-modal-body {
    padding: 1rem 2rem 2rem 2rem;
}

.simple-modal-body p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    text-align: center;
    font-weight: 500;
}

.simple-modal-footer {
    padding: 0 2rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.simple-modal-footer .btn-cancel,
.simple-modal-footer .btn-confirm {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 50px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.simple-modal-footer .btn-cancel {
    background: linear-gradient(135deg, #495057, #343a40);
    color: white;
    box-shadow: 0 4px 15px rgba(73, 80, 87, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.simple-modal-footer .btn-cancel:hover {
    background: linear-gradient(135deg, #343a40, #23272b);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(73, 80, 87, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.simple-modal-footer .btn-confirm {
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
    animation: glow-modal 2s ease-in-out infinite alternate;
}

@keyframes glow-modal {
    from { box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4); }
    to { box-shadow: 0 4px 25px rgba(255, 71, 87, 0.6); }
}

.simple-modal-footer .btn-confirm:hover {
    background: linear-gradient(135deg, #ff3838, #ff2828);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 71, 87, 0.6);
    animation: none;
}

/* Efeito de ondulação */
.simple-modal-footer .btn-cancel::before,
.simple-modal-footer .btn-confirm::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.simple-modal-footer .btn-cancel:active::before,
.simple-modal-footer .btn-confirm:active::before {
    width: 300px;
    height: 300px;
}

/* Responsividade Mobile para Modal */
@media (max-width: 768px) {
    .simple-modal {
        margin: 1rem;
        max-width: calc(100% - 2rem);
        border-radius: 16px;
    }
    
    .simple-modal-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
    }
    
    .simple-modal-header::before {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .simple-modal-header h3 {
        font-size: 1.3rem;
    }
    
    .simple-modal-body {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
    }
    
    .simple-modal-body p {
        font-size: 1rem;
    }
    
    .simple-modal-footer {
        padding: 0 1.5rem 1.5rem 1.5rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .simple-modal-footer .btn-cancel,
    .simple-modal-footer .btn-confirm {
        flex: none;
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }
}

/* Animações do Modal */
@keyframes slideInUp-modal {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn-modal {
    from { opacity: 0; }
    to { opacity: 1; }
}

#simpleModal.show .simple-modal-overlay {
    animation: fadeIn-modal 0.3s ease;
}

#simpleModal.show .simple-modal {
    animation: slideInUp-modal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========== MELHORIAS BOTÕES DOS FORMULÁRIOS ========== */

/* Botões dos Formulários de Cliente e Produto */
.form-actions .btn,
.modal-footer .btn,
form .btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 48px !important;
    padding: 0.75rem 1.5rem !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Botão Cancelar dos Formulários */
.form-actions .btn-secondary,
.modal-footer .btn-secondary,
form .btn-secondary,
button[onclick*="closeModal"],
button[onclick*="cancel"] {
    background: linear-gradient(135deg, #495057, #343a40) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(73, 80, 87, 0.4) !important;
}

.form-actions .btn-secondary:hover,
.modal-footer .btn-secondary:hover,
form .btn-secondary:hover,
button[onclick*="closeModal"]:hover,
button[onclick*="cancel"]:hover {
    background: linear-gradient(135deg, #343a40, #23272b) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(73, 80, 87, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Botão Salvar/Confirmar dos Formulários */
.form-actions .btn-primary,
.modal-footer .btn-primary,
form .btn-primary,
button[type="submit"],
button[onclick*="save"],
button[onclick*="add"] {
    background: linear-gradient(135deg, #007AFF, #0056CC) !important;
    color: white !important;
    border: 1px solid #007AFF !important;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4) !important;
}

.form-actions .btn-primary:hover,
.modal-footer .btn-primary:hover,
form .btn-primary:hover,
button[type="submit"]:hover,
button[onclick*="save"]:hover,
button[onclick*="add"]:hover {
    background: linear-gradient(135deg, #0088FF, #0066DD) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.5) !important;
    border: 1px solid #0088FF !important;
}

/* Efeito de ondulação para botões dos formulários */
.form-actions .btn::before,
.modal-footer .btn::before,
form .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
}

.form-actions .btn:active::before,
.modal-footer .btn:active::before,
form .btn:active::before {
    width: 300px;
    height: 300px;
}

/* Responsividade Mobile para botões dos formulários */
@media (max-width: 768px) {
    .form-actions,
    .modal-footer {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .form-actions .btn,
    .modal-footer .btn,
    form .btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 1rem !important;
    }
}


/* ========== CORREÇÃO BOTÕES FORMULÁRIOS ========== */

/* Botões Cancelar específicos dos formulários (APENAS NO FOOTER) */
.modal-footer button.btn-secondary,
footer.modal-footer button.btn-secondary,
button.btn-secondary[onclick="closeAddClientForm()"],
button.btn-secondary[onclick="closeAddProductForm()"] {
    background: rgba(75, 85, 99, 0.8) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 48px !important;
    padding: 0.75rem 1.5rem !important;
}

.modal-footer button.btn-secondary:hover,
footer.modal-footer button.btn-secondary:hover,
button.btn-secondary[onclick="closeAddClientForm()"]:hover,
button.btn-secondary[onclick="closeAddProductForm()"]:hover {
    background: rgba(55, 65, 81, 0.9) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Botões Salvar específicos (btn-primary) */
button.btn-primary,
.btn-primary {
    background: linear-gradient(135deg, #007AFF, #0056CC) !important;
    color: white !important;
    border: 1px solid #007AFF !important;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 48px !important;
    padding: 0.75rem 1.5rem !important;
}

button.btn-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #0088FF, #0066DD) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.5) !important;
    border: 1px solid #0088FF !important;
}



/* ========== FORÇA VISIBILIDADE BOTÃO CANCELAR ========== */

/* Garantir que o modal-footer mostre ambos os botões */
.modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem !important;
    gap: 1rem !important;
}

/* Forçar visibilidade do botão Cancelar */
.modal-footer button.btn-secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    background: rgba(31, 41, 55, 0.95) !important;
    color: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(75, 85, 99, 0.8) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    padding: 0.75rem 1.5rem !important;
    flex: 1 !important;
    max-width: 45% !important;
}

.modal-footer button.btn-secondary:hover {
    background: rgba(17, 24, 39, 1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(75, 85, 99, 1) !important;
}

/* Mobile: empilhar botões verticalmente */
@media (max-width: 768px) {
    .modal-footer {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .modal-footer button.btn-secondary,
    .modal-footer button.btn-primary {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
}



/* Estilos para Dados da Empresa - Layout corrigido */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
}

.info-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-section h4 {
    color: #6b7280 !important;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    background: none !important;
    padding: 0 !important;

/* Correção simples: apenas remover fundo preto dos títulos */
.admin-subsection h4[style*="background"] {
    background: none !important;
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
}

/* Títulos dos dados da empresa sem fundo */
.info-section h4 {
    background: none !important;
    color: var(--color-text-primary) !important;
}


/* Padronização dos botões do modal de dados da empresa */

/* Botão "Remover Logo" - estilo secundário */
.modal-content button[onclick*="removeLogo"],
button[onclick*="removeLogo"] {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: auto !important;
    height: auto !important;
    min-width: 120px !important;
    text-align: center !important;
    justify-content: center !important;
}

.modal-content button[onclick*="removeLogo"]:hover,
button[onclick*="removeLogo"]:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-border-hover) !important;

/* Botões do modal de dados da empresa com melhor visibilidade */

/* Botão "Remover Logo" - vermelho com boa visibilidade */
button[onclick*="removeLogo"] {
    background: #f8f9fa !important;
    color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 120px !important;
}

button[onclick*="removeLogo"]:hover {
    background: #dc3545 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* Botão "Cancelar" - cinza com boa visibilidade */
button[onclick*="closeDadosEmpresaModal"] {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border: 2px solid #6c757d !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 120px !important;
}

button[onclick*="closeDadosEmpresaModal"]:hover {
    background: #6c757d !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

/* Layout dos botões no footer */
.modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
    border-top: 1px solid #dee2e6 !important;
}

/* Responsividade mobile */
@media (max-width: 768px) {
    .modal-footer {
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
    }
    
    .modal-footer button {
        width: 100% !important;
    }
}





/* ========== CLASSES PARA CARDS MOBILE ========== */

/* Container principal do header do card */
.data-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

/* Área de conteúdo do card (lado esquerdo) */
.data-card .card-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Título principal do card */
.data-card .card-title {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Informações secundárias do card */
.data-card .card-info {
    margin: 0 0 0.25rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* E-mail com fonte menor */
.data-card .card-email {
    margin: 0 0 0.25rem 0;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Última informação sem margin-bottom */
.data-card .card-info-last {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Container do status (lado direito) */
.data-card .card-status-container {
    flex-shrink: 0;
    max-width: 80px;
    min-width: 60px;
}

/* Status/dias restantes */
.data-card .card-status {
    display: block;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.35rem;
    border-radius: 6px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grid de dados do card */
.data-card .card-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Labels dos dados */
.data-card .card-data-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Valores dos dados */
.data-card .card-data-value {
    margin: 0;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Valores monetários */
.data-card .card-money-value {
    margin: 0;
    font-weight: 700;
    color: var(--color-success);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Container de ações/botões */
.data-card .card-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Botões dos cards */
.data-card .card-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Responsividade para telas muito pequenas */
@media (max-width: 320px) {
    .data-card .card-title {
        font-size: 0.85rem;
    }
    
    .data-card .card-info,
    .data-card .card-info-last {
        font-size: 0.8rem;
    }
    
    .data-card .card-email {
        font-size: 0.75rem;
    }
    
    .data-card .card-status {
        font-size: 0.75rem;
        padding: 0.2rem 0.3rem;
    }
    
    .data-card .card-data-grid {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .data-card .card-data-label {
        font-size: 0.8rem;
    }
    
    .data-card .card-data-value {
        font-size: 0.8rem;
    }
    
    .data-card .card-money-value {
        font-size: 0.9rem;
    }
}



/* ========== MELHORIA: NOME DO BACKUP EM VERDE ========== */
/* Estilo específico para nome do backup na tabela desktop */
.backup-table-container.desktop-only .data-table tbody tr td:nth-child(2) {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* Seletor alternativo por ID da tabela */
#backupsTableBody tr td:nth-child(2) {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* Estilo para nome do backup nos cards mobile */
.backup-filename {
    color: #22c55e !important;
    font-weight: 600;
}

/* Hover effects */
.backup-table-container.desktop-only .data-table tbody tr:hover td:nth-child(2) {
    color: #16a34a !important;
}

#backupsTableBody tr:hover td:nth-child(2) {
    color: #16a34a !important;
}

.backup-filename:hover {
    color: #16a34a !important;
}


/* ========== CORREÇÃO: ID, TAMANHO E DATA EM BRANCO ========== */
/* ID branco */
#backupsTableBody tr td:first-child {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Tamanho branco */
#backupsTableBody tr td:nth-child(3) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Data branco */
#backupsTableBody tr td:nth-child(5) {
    color: #ffffff !important;
    font-weight: 600 !important;
}


/* ========== PADRONIZAÇÃO: CARDS DE CLIENTES COMO FINANCEIROS ========== */

/* Container específico para cards de clientes */
#clientesCardsContainer .data-card {
    /* Forçar estrutura similar aos cards financeiros */
}

/* Header dos cards de clientes - ID e Status em linha */
#clientesCardsContainer .data-card > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Seção de informações do cliente */
#clientesCardsContainer .data-card > div:nth-child(2) {
    margin-bottom: 1.5rem !important;
    line-height: 1.6 !important;
}

/* Quadrado destacado - Código Mastro e Lucro */
#clientesCardsContainer .data-card .card-data-grid,
#clientesCardsContainer .data-card > div:nth-child(3) {
    margin-bottom: 1.5rem !important;
    padding: 1rem !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 0.5rem !important;
    border: none !important;
}

/* Grid dentro do quadrado destacado */
#clientesCardsContainer .data-card .card-data-grid > div,
#clientesCardsContainer .data-card > div:nth-child(3) > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

/* Labels no quadrado destacado */
#clientesCardsContainer .data-card .card-data-label {
    color: var(--color-text-secondary) !important;
    font-size: 0.75rem !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

/* Valores no quadrado destacado */
#clientesCardsContainer .data-card .card-data-value {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--color-text-primary) !important;
}

/* Valor do lucro em verde */
#clientesCardsContainer .data-card .card-money-value {
    margin: 0 !important;
    font-weight: 700 !important;
    color: #00d084 !important;
    font-size: 1.1rem !important;
}

/* Container de botões */
#clientesCardsContainer .data-card .card-actions,
#clientesCardsContainer .data-card > div:last-child {
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Botões dos cards */
#clientesCardsContainer .data-card .card-btn,
#clientesCardsContainer .data-card button {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
}


/* ========== CORES DOS BACKUPS - ORGANIZAÇÃO CENTRALIZADA ========== */

/* Tabela de Backups - Desktop */
.data-table .backup-id {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.data-table .backup-nome {
    color: #22c55e !important;
    font-weight: 600 !important;
}

.data-table .backup-tamanho {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.data-table .backup-data {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.data-table .backup-status.status-pago {
    color: #22c55e !important;
    font-weight: 600 !important;
}

.data-table .backup-status.status-atrasado {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

/* Cards de Backups - Mobile */
.backup-filename {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* Hover Effects */
.data-table tbody tr:hover .backup-id {
    color: #f3f4f6 !important;
}

.data-table tbody tr:hover .backup-nome {
    color: #16a34a !important;
}

.data-table tbody tr:hover .backup-tamanho {
    color: #f3f4f6 !important;
}

.data-table tbody tr:hover .backup-data {
    color: #f3f4f6 !important;
}

/* ========== FIM DA SEÇÃO DE CORES DOS BACKUPS ========== */



/* ========== CSS AGRESSIVO PARA CORES DOS BACKUPS ========== */

/* Forçar cores com máxima especificidade */
table.data-table tbody tr td.backup-id,
.data-table tbody tr td.backup-id,
tbody tr td.backup-id,
tr td.backup-id,
td.backup-id {
    color: #ffffff !important;
    font-weight: 600 !important;
}

table.data-table tbody tr td.backup-nome,
.data-table tbody tr td.backup-nome,
tbody tr td.backup-nome,
tr td.backup-nome,
td.backup-nome {
    color: #22c55e !important;
    font-weight: 600 !important;
}

table.data-table tbody tr td.backup-tamanho,
.data-table tbody tr td.backup-tamanho,
tbody tr td.backup-tamanho,
tr td.backup-tamanho,
td.backup-tamanho {
    color: #ffffff !important;
    font-weight: 600 !important;
}

table.data-table tbody tr td.backup-data,
.data-table tbody tr td.backup-data,
tbody tr td.backup-data,
tr td.backup-data,
td.backup-data {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Status com cores específicas */
.backup-status.status-pago,
.status-pago,
span.backup-status.status-pago,
span.status-pago {
    color: #22c55e !important;
    font-weight: 600 !important;
}

.backup-status.status-atrasado,
.status-atrasado,
span.backup-status.status-atrasado,
span.status-atrasado {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

/* Forçar em qualquer contexto de backup */
[class*="backup"] td:nth-child(1) {
    color: #ffffff !important; /* ID */
}

[class*="backup"] td:nth-child(2) {
    color: #22c55e !important; /* Nome */
}

[class*="backup"] td:nth-child(3) {
    color: #ffffff !important; /* Tamanho */
}

[class*="backup"] td:nth-child(5) {
    color: #ffffff !important; /* Data */
}

/* Backup específico por ID da tabela */
#backupsTableBody tr td:nth-child(1) {
    color: #ffffff !important; /* ID */
}

#backupsTableBody tr td:nth-child(2) {
    color: #22c55e !important; /* Nome */
}

#backupsTableBody tr td:nth-child(3) {
    color: #ffffff !important; /* Tamanho */
}

#backupsTableBody tr td:nth-child(5) {
    color: #ffffff !important; /* Data */
}

/* ========== FIM CSS AGRESSIVO ========== */


/* ========== CSS ULTRA-ESPECÍFICO PARA DESKTOP ========== */

/* Seletores ultra-específicos para tabela de backup desktop */
table tbody#backupsTableBody tr td.backup-id {
    color: #ffffff !important;
    font-weight: 600 !important;
}

table tbody#backupsTableBody tr td.backup-nome {
    color: #22c55e !important;
    font-weight: 600 !important;
}

table tbody#backupsTableBody tr td.backup-tamanho {
    color: #ffffff !important;
    font-weight: 600 !important;
}

table tbody#backupsTableBody tr td.backup-data {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Forçar por posição específica na tabela de backup */
#backupsTableBody > tr > td:nth-child(1) {
    color: #ffffff !important; /* ID - Branco */
    font-weight: 600 !important;
}

#backupsTableBody > tr > td:nth-child(2) {
    color: #22c55e !important; /* Nome - Verde */
    font-weight: 600 !important;
}

#backupsTableBody > tr > td:nth-child(3) {
    color: #ffffff !important; /* Tamanho - Branco */
    font-weight: 600 !important;
}

#backupsTableBody > tr > td:nth-child(5) {
    color: #ffffff !important; /* Data - Branco */
    font-weight: 600 !important;
}

/* Sobrescrever qualquer estilo inline ou externo */
tbody#backupsTableBody td[class*="backup"] {
    font-weight: 600 !important;
}

tbody#backupsTableBody td.backup-id {
    color: #ffffff !important;
}

tbody#backupsTableBody td.backup-nome {
    color: #22c55e !important;
}

tbody#backupsTableBody td.backup-tamanho {
    color: #ffffff !important;
}

tbody#backupsTableBody td.backup-data {
    color: #ffffff !important;
}

/* ========== FIM CSS ULTRA-ESPECÍFICO ========== */



/* ========================================
   CSS ULTRA-ESPECÍFICO PARA DESKTOP
   Sistema de Backup - Tabela Desktop
   ÚLTIMA TENTATIVA - MÁXIMA ESPECIFICIDADE
   ======================================== */

/* MÁXIMA ESPECIFICIDADE PARA TABELA DESKTOP */
body .container #backupsTableBody tr td.backup-id,
body .container table tbody#backupsTableBody tr td:nth-child(1),
body .container .table-container #backupsTableBody tr td:first-child {
    color: #ffffff !important;
    font-weight: 600 !important;
}

body .container #backupsTableBody tr td.backup-nome,
body .container table tbody#backupsTableBody tr td:nth-child(2),
body .container .table-container #backupsTableBody tr td:nth-child(2) {
    color: #22c55e !important;
    font-weight: 600 !important;
}

body .container #backupsTableBody tr td.backup-tamanho,
body .container table tbody#backupsTableBody tr td:nth-child(3),
body .container .table-container #backupsTableBody tr td:nth-child(3) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

body .container #backupsTableBody tr td.backup-data,
body .container table tbody#backupsTableBody tr td:nth-child(5),
body .container .table-container #backupsTableBody tr td:nth-child(5) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* STATUS COM MÁXIMA ESPECIFICIDADE */
body .container #backupsTableBody tr td:nth-child(6) .backup-status.status-pago,
body .container table tbody#backupsTableBody tr td:nth-child(6) span.status-pago,
body .container .table-container #backupsTableBody tr td:nth-child(6) .backup-status {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* FORÇAR APLICAÇÃO EM QUALQUER CONTEXTO */
[id="backupsTableBody"] tr td:nth-child(1) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[id="backupsTableBody"] tr td:nth-child(2) {
    color: #22c55e !important;
    font-weight: 600 !important;
}

[id="backupsTableBody"] tr td:nth-child(3) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[id="backupsTableBody"] tr td:nth-child(5) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[id="backupsTableBody"] tr td:nth-child(6) span {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* SOBRESCREVER QUALQUER ESTILO INLINE */
#backupsTableBody tr td[style*="color"] {
    color: inherit !important;
}

#backupsTableBody tr td:nth-child(1)[style*="color"] {
    color: #ffffff !important;
}

#backupsTableBody tr td:nth-child(2)[style*="color"] {
    color: #22c55e !important;
}

#backupsTableBody tr td:nth-child(3)[style*="color"] {
    color: #ffffff !important;
}

#backupsTableBody tr td:nth-child(5)[style*="color"] {
    color: #ffffff !important;
}

/* HOVER EFFECTS PARA DESKTOP */
#backupsTableBody tr:hover td:nth-child(1) {
    color: #f3f4f6 !important;
}

#backupsTableBody tr:hover td:nth-child(2) {
    color: #16a34a !important;
}

#backupsTableBody tr:hover td:nth-child(3) {
    color: #f3f4f6 !important;
}

#backupsTableBody tr:hover td:nth-child(5) {
    color: #f3f4f6 !important;
}

#backupsTableBody tr:hover td:nth-child(6) span {
    color: #16a34a !important;
}

/* GARANTIR QUE NÃO HAJA CONFLITO COM OUTROS ESTILOS */
.data-table tbody#backupsTableBody tr td {
    color: inherit !important;
}

.data-table tbody#backupsTableBody tr td:nth-child(1) {
    color: #ffffff !important;
}

.data-table tbody#backupsTableBody tr td:nth-child(2) {
    color: #22c55e !important;
}

.data-table tbody#backupsTableBody tr td:nth-child(3) {
    color: #ffffff !important;
}

.data-table tbody#backupsTableBody tr td:nth-child(5) {
    color: #ffffff !important;
}

.data-table tbody#backupsTableBody tr td:nth-child(6) span {
    color: #22c55e !important;
}

/* ========== FIM CSS ULTRA-ESPECÍFICO DESKTOP ========== */


/* ========================================
   CSS DEFINITIVO - CORES BACKUP POR POSIÇÃO
   Solução robusta que não depende do JavaScript
   VERSÃO FINAL - MÁXIMA COMPATIBILIDADE
   ======================================== */

/* RESET - Remover qualquer cor anterior */
#backupsTableBody tr td {
    color: inherit !important;
}

/* CORES POR POSIÇÃO - MÁXIMA ESPECIFICIDADE */

/* ID - COLUNA 1 - BRANCO */
body #backupsTableBody tr td:nth-child(1),
table tbody#backupsTableBody tr td:nth-child(1),
#backupsTableBody > tr > td:nth-child(1),
[id="backupsTableBody"] tr td:nth-child(1) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* NOME DO ARQUIVO - COLUNA 2 - VERDE */
body #backupsTableBody tr td:nth-child(2),
table tbody#backupsTableBody tr td:nth-child(2),
#backupsTableBody > tr > td:nth-child(2),
[id="backupsTableBody"] tr td:nth-child(2) {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* TAMANHO - COLUNA 3 - BRANCO */
body #backupsTableBody tr td:nth-child(3),
table tbody#backupsTableBody tr td:nth-child(3),
#backupsTableBody > tr > td:nth-child(3),
[id="backupsTableBody"] tr td:nth-child(3) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* DATA - COLUNA 5 - BRANCO */
body #backupsTableBody tr td:nth-child(5),
table tbody#backupsTableBody tr td:nth-child(5),
#backupsTableBody > tr > td:nth-child(5),
[id="backupsTableBody"] tr td:nth-child(5) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* STATUS - COLUNA 6 - VERDE (para span dentro) */
body #backupsTableBody tr td:nth-child(6) span,
table tbody#backupsTableBody tr td:nth-child(6) span,
#backupsTableBody > tr > td:nth-child(6) span,
[id="backupsTableBody"] tr td:nth-child(6) span {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* SOBRESCREVER QUALQUER ESTILO INLINE */
#backupsTableBody tr td:nth-child(1)[style] {
    color: #ffffff !important;
}

#backupsTableBody tr td:nth-child(2)[style] {
    color: #22c55e !important;
}

#backupsTableBody tr td:nth-child(3)[style] {
    color: #ffffff !important;
}

#backupsTableBody tr td:nth-child(5)[style] {
    color: #ffffff !important;
}

#backupsTableBody tr td:nth-child(6) span[style] {
    color: #22c55e !important;
}

/* HOVER EFFECTS */
#backupsTableBody tr:hover td:nth-child(1) {
    color: #f3f4f6 !important;
}

#backupsTableBody tr:hover td:nth-child(2) {
    color: #16a34a !important;
}

#backupsTableBody tr:hover td:nth-child(3) {
    color: #f3f4f6 !important;
}

#backupsTableBody tr:hover td:nth-child(5) {
    color: #f3f4f6 !important;
}

#backupsTableBody tr:hover td:nth-child(6) span {
    color: #16a34a !important;
}

/* GARANTIR APLICAÇÃO EM QUALQUER CONTEXTO */
.data-table #backupsTableBody tr td:nth-child(1) {
    color: #ffffff !important;
}

.data-table #backupsTableBody tr td:nth-child(2) {
    color: #22c55e !important;
}

.data-table #backupsTableBody tr td:nth-child(3) {
    color: #ffffff !important;
}

.data-table #backupsTableBody tr td:nth-child(5) {
    color: #ffffff !important;
}

.data-table #backupsTableBody tr td:nth-child(6) span {
    color: #22c55e !important;
}

/* FORÇAR APLICAÇÃO MESMO COM OUTROS CSS */
html body #backupsTableBody tr td:nth-child(1) {
    color: #ffffff !important;
}

html body #backupsTableBody tr td:nth-child(2) {
    color: #22c55e !important;
}

html body #backupsTableBody tr td:nth-child(3) {
    color: #ffffff !important;
}

html body #backupsTableBody tr td:nth-child(5) {
    color: #ffffff !important;
}

html body #backupsTableBody tr td:nth-child(6) span {
    color: #22c55e !important;
}

/* ========== FIM CSS DEFINITIVO POR POSIÇÃO ========== */