/**
 * Baito Timesheet - CSS Variables & Base Styles
 * File chung định nghĩa tất cả variables và base styles
 * Tối ưu: chỉ giữ variables thực sự sử dụng
 */

:root {
    /* ===== COLORS ===== */
    /* Primary Colors */
    --baito-primary: #0073aa;
    --baito-primary-dark: #005a87;
    --baito-primary-light: #e7f3ff;
    
    /* Secondary Colors */
    --baito-secondary: #6c757d;
    --baito-secondary-light: #f8f9fa;
    
    /* Status Colors */
    --baito-success: #28a745;
    --baito-success-light: #d4edda;
    
    --baito-danger: #dc3232;
    --baito-danger-light: #f8d7da;
    
    --baito-warning: #ffb900;
    --baito-warning-light: #fff3cd;
    
    --baito-info: #17a2b8;
    --baito-info-light: #d1ecf1;
    
    /* Neutral Colors */
    --baito-white: #ffffff;
    --baito-black: #000000;
    
    --baito-gray-100: #f0f0f0;
    --baito-gray-200: #e9ecef;
    --baito-gray-300: #dee2e6;
    --baito-gray-400: #ced4da;
    --baito-gray-500: #adb5bd;
    --baito-gray-600: #6c757d;
    --baito-gray-700: #495057;
    --baito-gray-800: #343a40;
    
    /* ===== TYPOGRAPHY ===== */
    --baito-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Font Sizes - chỉ giữ cần thiết */
    --baito-font-size-sm: 14px;
    --baito-font-size-base: 16px;
    --baito-font-size-lg: 18px;
    --baito-font-size-xl: 20px;
    --baito-font-size-2xl: 24px;
    
    /* Font Weights - chỉ giữ cần thiết */
    --baito-font-weight-normal: 400;
    --baito-font-weight-medium: 500;
    --baito-font-weight-semibold: 600;
    --baito-font-weight-bold: 700;
    
    /* Line Heights - chỉ giữ cần thiết */
    --baito-line-height-normal: 1.5;
    --baito-line-height-relaxed: 1.75;
    
    /* ===== SPACING ===== */
    --baito-spacing-0: 0;
    --baito-spacing-xs: 4px;
    --baito-spacing-sm: 8px;
    --baito-spacing-md: 12px;
    --baito-spacing-lg: 16px;
    --baito-spacing-xl: 20px;
    --baito-spacing-2xl: 24px;
    --baito-spacing-3xl: 32px;
    
    /* ===== BORDERS ===== */
    /* Border Radius - chỉ giữ cần thiết */
    --baito-radius-none: 0;
    --baito-radius-sm: 4px;
    --baito-radius-md: 6px;
    --baito-radius-lg: 8px;
    --baito-radius-xl: 12px;
    
    /* Border Widths - chỉ giữ cần thiết */
    --baito-border-1: 1px;
    --baito-border-2: 2px;
    
    /* ===== SHADOWS ===== */
    /* Box Shadows - chỉ giữ cần thiết */
    --baito-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --baito-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --baito-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* ===== TRANSITIONS ===== */
    --baito-transition-base: 0.15s ease-in-out;
    --baito-transition-fast: 0.1s ease-in-out;
    --baito-transition-slow: 0.3s ease-in-out;
    
    /* ===== Z-INDEX ===== */
    --baito-z-dropdown: 1000;
    --baito-z-sticky: 1020;
    --baito-z-fixed: 1030;
    --baito-z-modal-backdrop: 1040;
    --baito-z-modal: 1050;
    --baito-z-popover: 1060;
    --baito-z-tooltip: 1070;
}

/* ===== BASE STYLES ===== */
/* Reset và base styles cho form elements */
.baito-form *,
.baito-admin-form * {
    box-sizing: border-box;
}

/* Focus styles */
.baito-form input:focus,
.baito-form select:focus,
.baito-form textarea:focus,
.baito-admin-form input:focus,
.baito-admin-form select:focus,
.baito-admin-form textarea:focus {
    outline: none;
    border-color: var(--baito-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

/* Button base styles */
.baito-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--baito-spacing-sm) var(--baito-spacing-lg);
    font-size: var(--baito-font-size-base);
    font-weight: var(--baito-font-weight-medium);
    line-height: var(--baito-line-height-normal);
    border: var(--baito-border-1) solid transparent;
    border-radius: var(--baito-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--baito-transition-base);
    font-family: var(--baito-font-family);
}

.baito-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Button variants */
.baito-btn-primary {
    background-color: var(--baito-primary);
    color: var(--baito-white);
    border-color: var(--baito-primary);
}

.baito-btn-primary:hover:not(:disabled) {
    background-color: var(--baito-primary-dark);
    border-color: var(--baito-primary-dark);
}

.baito-btn-secondary {
    background-color: var(--baito-secondary);
    color: var(--baito-white);
    border-color: var(--baito-secondary);
}

.baito-btn-success {
    background-color: var(--baito-success);
    color: var(--baito-white);
    border-color: var(--baito-success);
}

.baito-btn-danger {
    background-color: var(--baito-danger);
    color: var(--baito-white);
    border-color: var(--baito-danger);
}

.baito-btn-warning {
    background-color: var(--baito-warning);
    color: var(--baito-black);
    border-color: var(--baito-warning);
}

/* Utility classes */
.baito-text-center { text-align: center; }
.baito-text-left { text-align: left; }
.baito-text-right { text-align: right; }

.baito-mt-0 { margin-top: var(--baito-spacing-0); }
.baito-mt-sm { margin-top: var(--baito-spacing-sm); }
.baito-mt-md { margin-top: var(--baito-spacing-md); }
.baito-mt-lg { margin-top: var(--baito-spacing-lg); }
.baito-mt-xl { margin-top: var(--baito-spacing-xl); }

.baito-mb-0 { margin-bottom: var(--baito-spacing-0); }
.baito-mb-sm { margin-bottom: var(--baito-spacing-sm); }
.baito-mb-md { margin-bottom: var(--baito-spacing-md); }
.baito-mb-lg { margin-bottom: var(--baito-spacing-lg); }
.baito-mb-xl { margin-bottom: var(--baito-spacing-xl); }

.baito-p-0 { padding: var(--baito-spacing-0); }
.baito-p-sm { padding: var(--baito-spacing-sm); }
.baito-p-md { padding: var(--baito-spacing-md); }
.baito-p-lg { padding: var(--baito-spacing-lg); }
.baito-p-xl { padding: var(--baito-spacing-xl); }

/* Responsive utilities */
@media (max-width: 768px) {
    .baito-form,
    .baito-admin-form {
        padding: var(--baito-spacing-lg);
    }
    
    .form-row {
        flex-direction: column;
        gap: var(--baito-spacing-lg);
    }
    
    .form-group {
        min-width: auto;
    }
}