/**
 * =============================================================================
 * VARIABLES CSS - SISTEMA DE DESIGN CONSOLIDADO
 * =============================================================================
 * Variáveis globais do sistema MaximusWeb
 * Este arquivo é carregado PRIMEIRO em todas as páginas
 * 
 * ORGANIZAÇÃO:
 * 1. Cores Base e Semânticas
 * 2. Cores RGB (para uso com rgba())
 * 3. Tipografia
 * 4. Espaçamentos
 * 5. Bordas e Radius
 * 6. Sombras
 * 7. Transições
 * 8. Layout (Sidebar, Topbar)
 * 9. Componentes (Tables, Grid Itens, Kanban)
 * 10. Aliases de Compatibilidade
 * =============================================================================
 */

:root {
    /* =========================================================================
       1. CORES BASE E SEMÂNTICAS (Light Mode - Padrão)
       ========================================================================= */
    
    /* Cores de superfície */
    --color-bg: #ffffff;
    --color-text: #212529;
    --color-text-secondary: #666666;
    --color-surface: #f8f9fa;
    --color-surface-2: #ffffff;
    --color-surface-hover: #f1f3f5;
    --color-muted: #6c757d;
    --color-border: #dee2e6;
    --color-border-light: #f0f0f0;
    
    /* Cores semânticas */
    --color-primary: #0d6efd;
    --color-primary-dark: #0a58ca;
    --color-info: #0dcaf0;
    --color-success: #198754;
    --color-success-light: #28a745;
    --color-success-dark: #146c43;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-secondary: #6c757d;
    
    /* Cor da marca (verde Maximus) */
    --color-brand: #1a5f1a;
    --color-brand-dark: #145214;
    --color-brand-light: #2d8b2d;
    
    /* =========================================================================
       2. CORES RGB (para uso com rgba())
       ========================================================================= */
    
    --color-success-rgb: 25, 135, 84;
    --color-warning-rgb: 255, 193, 7;
    --color-danger-rgb: 220, 53, 69;
    --color-primary-rgb: 13, 110, 253;
    --color-info-rgb: 13, 202, 240;
    
    /* =========================================================================
       3. TIPOGRAFIA
       ========================================================================= */
    
    --font-family-base: Arial, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    
    /* =========================================================================
       4. ESPAÇAMENTOS
       ========================================================================= */
    
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    
    /* =========================================================================
       4.5 TIPOGRAFIA FLUIDA (clamp)
       Escala responsiva de 375px (mobile) a 1920px (desktop)
       Uso: var(--fluid-font-sm) em vez de font-size fixo + media queries
       ========================================================================= */

    --fluid-font-2xs: clamp(0.65rem, 0.55rem + 0.2vw, 0.75rem);   /* ~10px → 12px */
    --fluid-font-xs: clamp(0.7rem, 0.6rem + 0.2vw, 0.8rem);       /* ~11px → 13px */
    --fluid-font-sm: clamp(0.75rem, 0.65rem + 0.25vw, 0.85rem);   /* ~12px → 14px */
    --fluid-font-base: clamp(0.8rem, 0.7rem + 0.25vw, 0.9rem);    /* ~13px → 14px */
    --fluid-font-md: clamp(0.85rem, 0.75rem + 0.25vw, 0.95rem);   /* ~14px → 15px */
    --fluid-font-lg: clamp(0.9rem, 0.8rem + 0.25vw, 1rem);        /* ~14px → 16px */
    --fluid-font-xl: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);      /* ~16px → 18px */
    --fluid-font-2xl: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);     /* ~18px → 20px */
    --fluid-font-3xl: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);     /* ~20px → 24px */

    /* =========================================================================
       4.6 ESPAÇAMENTOS FLUIDOS (clamp)
       Escala responsiva para padding, margin, gap
       Uso: var(--fluid-space-md) em vez de valores fixos + media queries
       ========================================================================= */

    --fluid-space-2xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.2rem);   /* ~2px → 3px */
    --fluid-space-xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);  /* ~4px → 6px */
    --fluid-space-sm: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);    /* ~6px → 8px */
    --fluid-space-md: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);    /* ~8px → 12px */
    --fluid-space-lg: clamp(0.75rem, 0.6rem + 0.35vw, 1rem);      /* ~12px → 16px */
    --fluid-space-xl: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);        /* ~16px → 24px */
    --fluid-space-2xl: clamp(1.5rem, 1.2rem + 0.75vw, 2rem);      /* ~24px → 32px */
    --fluid-space-3xl: clamp(2rem, 1.5rem + 1vw, 3rem);           /* ~32px → 48px */

    /* =========================================================================
       4.7 COMPONENTES FLUIDOS
       Variáveis responsivas para botões, inputs, cards, tabelas
       ========================================================================= */

    /* Botões fluidos */
    --fluid-btn-padding-x: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    --fluid-btn-padding-y: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
    --fluid-btn-font-size: clamp(0.75rem, 0.65rem + 0.25vw, 0.875rem);
    --fluid-btn-min-width: clamp(80px, 60px + 5vw, 120px);

    /* Inputs fluidos */
    --fluid-input-padding-x: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);
    --fluid-input-padding-y: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);
    --fluid-input-font-size: var(--fluid-font-base);

    /* Cards fluidos */
    --fluid-card-padding: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
    --fluid-card-gap: clamp(0.5rem, 0.4rem + 0.3vw, 1rem);

    /* Tabelas fluidas */
    --fluid-table-cell-padding-x: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);
    --fluid-table-cell-padding-y: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);
    --fluid-table-font-size: var(--fluid-font-sm);

    /* Labels fluidos */
    --fluid-label-font-size: var(--fluid-font-sm);
    --fluid-label-margin-bottom: var(--fluid-space-xs);

    /* =========================================================================
       5. BORDAS E RADIUS
       ========================================================================= */
    
    --border-width: 1px;
    --border-width-thick: 2px;
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Alias para rem (compatibilidade) */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    
    /* =========================================================================
       6. SOMBRAS
       ========================================================================= */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* =========================================================================
       7. TRANSIÇÕES
       ========================================================================= */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* =========================================================================
       8. LAYOUT - SIDEBAR E TOPBAR
       ========================================================================= */
    
    /* Sidebar */
    --sidebar-width: 250px;
    --sidebar-bg: linear-gradient(180deg, #1a5f1a 0%, #145214 25%, #0d2c0d 50%, #061806 75%, #000000 100%);
    --sidebar-text: #ffffff;
    --sidebar-hover-bg: #000000;
    --sidebar-z-index: 1050;
    
    /* Topbar */
    --topbar-height: 50px;
    --topbar-bg: #f8f9fa;
    --topbar-border: #dee2e6;
    --topbar-z-index: 100;
    
    /* Breakpoints (para referência em JS) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* =========================================================================
       9. COMPONENTES ESPECÍFICOS
       ========================================================================= */
    
    /* --- Responsive Tables (rt-*) --- */
    --rt-border-color: var(--color-border);
    --rt-header-bg: var(--color-surface);
    --rt-hover-bg: var(--color-surface-hover);
    --rt-stripe-bg: var(--color-surface);
    --rt-shadow: var(--shadow-card);
    --rt-radius: var(--radius-md);
    --rt-transition: var(--transition-base);
    
    /* --- Grid Itens (gi-*) --- */
    --gi-success: var(--color-success);
    --gi-success-rgb: var(--color-success-rgb);
    --gi-success-light: var(--color-success-light);
    --gi-success-dark: var(--color-success-dark);
    --gi-warning: var(--color-warning);
    --gi-warning-rgb: var(--color-warning-rgb);
    --gi-danger: var(--color-danger);
    --gi-danger-rgb: var(--color-danger-rgb);
    
    /* --- Kanban (Layout Viewport-Based) --- */
    --kanban-header-height: 70px;
    --kanban-footer-height: 40px;
    --kanban-container-gap: 12px;
    --kanban-container-padding: 12px;
    --kanban-board-min-width: 160px;
    --kanban-board-max-width: 400px;
    --kanban-card-min-height: 85px;
    
    /* --- Print Buttons (botões de ação na impressão) --- */
    --btn-bg-dark: #2c3034;
    --btn-bg-primary: var(--color-primary);
    --btn-bg-danger: var(--color-danger);
    --btn-bg-outline: transparent;
    --btn-hover-dark: #1a1d21;
    --btn-hover-primary: var(--color-primary-dark);
    --btn-hover-danger: #c82333;
    --btn-hover-outline: rgba(0, 0, 0, 0.04);
    --btn-radius: 6px;
    --btn-padding: 10px 18px;
    --btn-font-size: 14px;
    --btn-font-weight: 600;
    --btn-border: none;
    --btn-shadow: var(--shadow-sm);
    --btn-hover-shadow: var(--shadow-md);
    --btn-transition: var(--transition-base);
    
    /* =========================================================================
       10. ALIASES DE COMPATIBILIDADE
       ========================================================================= */
    
    /* Sem prefixo */
    --bg: var(--color-bg);
    --text: var(--color-text);
    --surface: var(--color-surface);
    --surface-2: var(--color-surface-2);
    --muted: var(--color-muted);
    --border: var(--color-border);
    --primary: var(--color-primary);
    --info: var(--color-info);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
}

/* =============================================================================
   DARK MODE - Sobrescrita de Variáveis
   ============================================================================= */

/* Suporta dark-mode no html (anti-FOUC) e no body (toggle JS) */
html.dark-mode,
body.dark-mode {
    /* Cores de superfície */
    --color-bg: #121212;
    --color-text: #e0e0e0;
    --color-text-secondary: #b8c5d6;
    --color-surface: #1e1e1e;
    --color-surface-2: #2a2a2a;
    --color-surface-hover: rgba(255, 255, 255, 0.05);
    --color-muted: #b8c5d6;
    --color-border: #333333;
    --color-border-light: rgba(255, 255, 255, 0.04);
    
    /* Cores (ajustadas para dark mode) */
    --color-primary: #51cf66;
    --color-primary-dark: #40c057;
    --color-info: #74c0fc;
    /* success, warning, danger mantêm os mesmos valores */
    
    /* Aliases sem prefixo */
    --bg: #121212;
    --text: #e0e0e0;
    --surface: #1e1e1e;
    --surface-2: #2a2a2a;
    --muted: #b8c5d6;
    --border: #333333;
    --primary: #51cf66;
    --info: #74c0fc;
    --success: #198754;
    --warning: #ffc107;
    --danger: #dc3545;
    
    /* Topbar dark */
    --topbar-bg: var(--color-surface);
    --topbar-border: var(--color-border);
    
    /* Responsive Tables dark */
    --rt-border-color: rgba(255, 255, 255, 0.04);
    --rt-header-bg: rgba(255, 255, 255, 0.03);
    --rt-hover-bg: rgba(255, 255, 255, 0.05);
    --rt-stripe-bg: rgba(255, 255, 255, 0.02);
}

/* =============================================================================
   RESET BÁSICO
   ============================================================================= */

html {
    scrollbar-gutter: stable;
}

/* =============================================================================
   KANBAN: Cores por Status (CSS-driven)
   Uso: data-status="verde" ou class="status-verde"
   ============================================================================= */

.kanban-card[data-status="verde"], 
.kanban-card.status-verde {
    border-left: 4px solid var(--color-success) !important;
}

.kanban-card[data-status="amarelo"], 
.kanban-card.status-amarelo {
    border-left: 4px solid var(--color-warning) !important;
}

.kanban-card[data-status="azul"], 
.kanban-card.status-azul {
    border-left: 4px solid var(--color-primary) !important;
}

.kanban-card[data-status="vermelho"], 
.kanban-card.status-vermelho {
    border-left: 4px solid var(--color-danger) !important;
}

.kanban-board .card-header[data-status="verde"], 
.kanban-board .card-header.status-verde {
    background-color: var(--color-success) !important;
    color: #ffffff !important;
}

.kanban-board .card-header[data-status="amarelo"], 
.kanban-board .card-header.status-amarelo {
    background-color: var(--color-warning) !important;
    color: #000000 !important;
}

.kanban-board .card-header[data-status="azul"], 
.kanban-board .card-header.status-azul {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.kanban-board .card-header[data-status="vermelho"], 
.kanban-board .card-header.status-vermelho {
    background-color: var(--color-danger) !important;
    color: #ffffff !important;
}

.kanban-board-count[data-status="verde"], 
.kanban-board-count.status-verde {
    border-top-color: var(--color-success) !important;
}

.kanban-board-count[data-status="amarelo"], 
.kanban-board-count.status-amarelo {
    border-top-color: var(--color-warning) !important;
}

.kanban-board-count[data-status="azul"], 
.kanban-board-count.status-azul {
    border-top-color: var(--color-primary) !important;
}

.kanban-board-count[data-status="vermelho"], 
.kanban-board-count.status-vermelho {
    border-top-color: var(--color-danger) !important;
}