:root {
    /* Base Variables (Transitions & Fonts) */
    --font-main: 'Inter', sans-serif;
}

/* LIGHT THEME (Default) */
body.light-theme, :root {
    --green: #008f4c;
    --green-bright: #00ff88;
    --red: #d32f2f;
    --white: #ffffff;
    --black: #000000;
    
    --bg-dark: #f5f5f7;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border: #e2e2e7;
    --border-hover: #d2d2d7;
    
    --text-muted: #66666b;
    --text-primary: #000000; /* Preto absoluto no modo claro */
}

/* DARK THEME */
body.dark-theme {
    --green: #00ff88;
    --green-bright: #00ff88;
    --red: #ff3e3e;
    --white: #ffffff;
    --black: #000000;
    
    --bg-dark: #080808;
    --bg-card: #121212;
    --bg-input: #1a1a1a;
    --border: #222222;
    --border-hover: #333333;
    
    --text-muted: #666666;
    --text-primary: #efefef;
}

/* Global Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

a {
    transition: 0.3s ease;
    color: var(--green);
    text-decoration: none;
}

/* Common UI Components */
.btn-primary {
    background-color: var(--green);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
}

.dark-theme .btn-primary { color: #000; }

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.2);
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.form-input {
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.8rem;
    border-radius: 6px;
    transition: 0.2s;
}

/* Theme Toggle Button Style */
.theme-toggle {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.theme-toggle:hover { border-color: var(--green); }

/* Navigation Utilities */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 5000;
}

/* ==========================================================
   GLOBAL RESPONSIVENESS (TABLETS & MOBILE)
   ========================================================== */
@media (max-width: 900px) {
    /* Grids & Layouts */
    .grid-split, .grid-form, .form-grid, .photo-grid, .main-grid, div[style*="grid-template-columns"] { 
        grid-template-columns: 1fr !important; 
        gap: 1.5rem !important; 
    }
    
    /* Flex wrappers often used in forms */
    div[style*="display: flex; gap: 10px;"] {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Forms & Containers (min-width 0 previne blowout de grid nas tabelas longas) */
    .card-admin, .section-box, .dashboard-content, div[style*="padding: 2rem;"] { 
        padding: 1.2rem !important; 
        min-width: 0 !important;
        overflow-x: hidden !important; /* Defesa extrema contra estouro de largura */
    }
    
    /* Tables horizontal scrolling for mobile */
    .table-responsive-wrapper, .list-table, table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    /* Modals */
    #fichaIframe { width: 100% !important; }
    div[style*="width:90%; max-width:900px;"] { width: 95% !important; height: 95vh !important; }
}