/* ===========================================================================
   01-THEME.CSS
   Variáveis globais, tokens de cores, temas claro/escuro e layout base
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined');

:root {
    --brand-dark: #0D2529;
    --brand-primary: #1EBC80;
    --brand-primary-light: rgba(30, 188, 128, 0.12);
    --brand-accent: #16A370;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --black-text2: #494949;
    --black-text: #1A2332;
    --blue-text: #2a8ce3;
    --gray-text: #3c3e41;
    --border-color: #dde3ec;
    --grid-color: #c8d1df;
    --card-bg: #ffffff;
    --card-text: #0f172a;
    --card-subtext: #475569;
    /* Improved background: slightly deeper blue-gray for better contrast */
    --group-bg: #edf1f7;
    --modal-header-bg: #ffffff;
    --skeleton-base: #dde3ec;
    --skeleton-highlight: #f4f7fc;
    /* Sidebar widths */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 72px;
    --sidebar-current-width: 280px;
}

.dark-theme {
    --brand-dark: #1EBC80;
    --brand-primary: #1EBC80;
    --black-text: #eaf6f0;
    --card-bg: #17252d;
    --card-text: #eaf6f0;
    --card-subtext: #94a3b8;
    --group-bg: #0e1c24;
    --border-color: #2a3c48;
    --modal-header-bg: #17252d;
    --grid-color: rgba(255, 255, 255, 0.1);
    --skeleton-base: #1e293b;
    --skeleton-highlight: #2a3c48;
    --sidebar-bg-dark: #0c1a22;
    /* Dash 4 Dropdown Dark Theme Tokens */
    --Dash-Fill-Inverse-Strong: #17252d;
    --Dash-Stroke-Strong: #2a3c48;
    --Dash-Text-Strong: #eaf6f0;
    --Dash-Text-Weak: #94a3b8;
    --Dash-Text-Disabled: #64748b;
    --Dash-Fill-Interactive-Strong: #1EBC80;
    --Dash-Fill-Interactive-Weak: rgba(30, 188, 128, 0.15);
    --Dash-Fill-Disabled: #2a3c48;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.6);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.3);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

body {
    background-color: var(--group-bg);
    color: var(--black-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* Layout Principal */
.app-container {
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    background-color: var(--group-bg);
    color: var(--black-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}



/* ==========================================================================
   Dark Theme General Overrides
   ========================================================================== */

/* Force all text/labels inside dark-theme to follow the theme text color */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme label,
.dark-theme span,
.dark-theme p,
.dark-theme b,
.dark-theme strong,
.dark-theme table,
.dark-theme th,
.dark-theme td {
    color: var(--black-text) !important;
}



/* ANIMAÇÕES GERAIS DE TRANSIÇÃO */

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-24px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.tab-content-animated {
    animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* Escalonamento (Stagger) fluido para os blocos e cards */
.stagger-1 {
    animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.04s backwards;
}

.stagger-2 {
    animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.08s backwards;
}

.stagger-3 {
    animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}

.stagger-4 {
    animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.16s backwards;
}

.stagger-5 {
    animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.20s backwards;
}