/**
 * ===========================================
 * AppointGenius Back Office - Color System
 * ===========================================
 *
 * This file defines all colors and gradients used throughout the BO
 * Synchronized with Flutter app colors (FE/barber_app/lib/src/core/styles/colors.dart)
 *
 * Usage: Import this file in your component CSS:
 * @import url('/css/colors.css');
 */

/* ===========================================
   PRIMARY COLORS
   =========================================== */
:root {
    /* Main Brand Colors - Green Theme */
    --color-primary: #20c997;           /* Teal Green (from header) */
    --color-primary-dark: #1ab386;      /* Darker Teal */
    --color-primary-light: #5ce2c6;     /* Lighter Teal */

    --color-secondary: #28a745;         /* Green (from header) */
    --color-secondary-dark: #218838;    /* Darker Green */
    --color-secondary-light: #34ce57;   /* Lighter Green */

    /* Flutter App Colors (for consistency) */
    --color-flutter-primary: #0A2B22;       /* Dark Green */
    --color-flutter-primary-variant: #606C38; /* Dark Moss Green */
    --color-flutter-secondary: #DCC28F;     /* Ecru */
    --color-flutter-secondary-variant: #DDA15E; /* Earth Yellow */
    --color-flutter-brown: #99581E;         /* Brown */

    /* ===========================================
       STATE COLORS
       =========================================== */
    --color-success: #28a745;
    --color-success-light: #d4edda;
    --color-success-dark: #1e7e34;
    --color-success-darker: #155724;

    --color-info: #17a2b8;
    --color-info-light: #d1ecf1;
    --color-info-dark: #117a8b;

    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-warning-dark: #e0a800;

    --color-danger: #dc3545;
    --color-danger-light: #f8d7da;
    --color-danger-dark: #c82333;

    /* ===========================================
       NEUTRAL COLORS
       =========================================== */
    --color-white: #ffffff;
    --color-light: #f8f9fa;
    --color-lighter: #e9ecef;
    --color-gray: #dee2e6;
    --color-gray-medium: #6c757d;
    --color-gray-dark: #495057;
    --color-dark: #2c3e50;
    --color-black: #212529;

    /* ===========================================
       BACKGROUND COLORS
       =========================================== */
    --bg-page: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --bg-card: #ffffff;
    --bg-sidebar: #2c3e50;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* ===========================================
       GRADIENTS - Primary Theme
       =========================================== */
    --gradient-primary: linear-gradient(135deg, #20c997 0%, #28a745 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1ab386 0%, #218838 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    /* Gradient Variations */
    --gradient-green-light: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    --gradient-teal-light: linear-gradient(135deg, #d1f4ea 0%, #b8f0e0 100%);

    /* ===========================================
       GRADIENTS - State Colors
       =========================================== */
    --gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --gradient-info: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    --gradient-warning: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    --gradient-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%);

    /* ===========================================
       GRADIENTS - Special Effects
       =========================================== */
    --gradient-card-header: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-overlay-dark: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);

    /* ===========================================
       STATUS BADGE COLORS
       =========================================== */
    --badge-active-bg: rgba(16, 185, 129, 0.1);
    --badge-active-color: #059669;
    --badge-active-border: rgba(16, 185, 129, 0.2);

    --badge-inactive-bg: rgba(239, 68, 68, 0.1);
    --badge-inactive-color: #dc2626;
    --badge-inactive-border: rgba(239, 68, 68, 0.2);

    --badge-pending-bg: rgba(255, 193, 7, 0.1);
    --badge-pending-color: #f59e0b;
    --badge-pending-border: rgba(255, 193, 7, 0.2);

    --badge-premium-bg: linear-gradient(135deg, #ffc107, #fd7e14);
    --badge-premium-color: #ffffff;

    /* ===========================================
       SHADOWS
       =========================================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);

    --shadow-primary: 0 4px 12px rgba(32, 201, 151, 0.4);
    --shadow-success: 0 4px 12px rgba(40, 167, 69, 0.4);
    --shadow-danger: 0 4px 12px rgba(220, 53, 69, 0.4);

    /* ===========================================
       BORDERS
       =========================================== */
    --border-color: #dee2e6;
    --border-light: rgba(0, 0, 0, 0.05);
    --border-primary: #20c997;
    --border-success: #28a745;
    --border-danger: #dc3545;
    --border-warning: #ffc107;

    /* ===========================================
       TRANSITIONS
       =========================================== */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;

    /* ===========================================
       BORDER RADIUS
       =========================================== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===========================================
       SPACING
       =========================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Background Classes */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-danger { background: var(--gradient-danger); }
.bg-gradient-warning { background: var(--gradient-warning); }
.bg-gradient-info { background: var(--gradient-info); }

/* Text Color Classes */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-muted { color: var(--color-gray-medium); }

/* Border Classes */
.border-primary { border-color: var(--border-primary) !important; }
.border-success { border-color: var(--border-success) !important; }
.border-danger { border-color: var(--border-danger) !important; }

/* Shadow Classes */
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-success { box-shadow: var(--shadow-success); }
.shadow-danger { box-shadow: var(--shadow-danger); }

/* ===========================================
   BUTTON STYLES (Override Bootstrap)
   =========================================== */
.btn {
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.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;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--color-success-dark) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(30, 126, 52, 0.35) !important;
}

.btn-primary:hover {
    background: var(--color-success-darker) !important;
    box-shadow: 0 6px 25px rgba(30, 126, 52, 0.5) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98) !important;
}

.btn-outline-primary {
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.btn-outline-primary:hover {
    background: var(--gradient-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(32, 201, 151, 0.4) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.btn-outline-primary:active {
    transform: translateY(0) scale(0.98) !important;
}

.btn-success {
    background: var(--gradient-success) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.35) !important;
}

.btn-success:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 6px 25px rgba(40, 167, 69, 0.5) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.btn-danger {
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.35) !important;
}

.btn-danger:hover {
    box-shadow: 0 6px 25px rgba(220, 53, 69, 0.5) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.btn-sm {
    padding: 0.5rem 1rem !important;
}

.btn-lg {
    padding: 0.875rem 1.75rem !important;
    font-size: 1.1rem !important;
}

/* ===========================================
   BADGE STYLES
   =========================================== */
.badge-active {
    background: var(--badge-active-bg) !important;
    color: var(--badge-active-color) !important;
    border: 1px solid var(--badge-active-border);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.badge-inactive {
    background: var(--badge-inactive-bg) !important;
    color: var(--badge-inactive-color) !important;
    border: 1px solid var(--badge-inactive-border);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.badge-pending {
    background: var(--badge-pending-bg) !important;
    color: var(--badge-pending-color) !important;
    border: 1px solid var(--badge-pending-border);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.badge-premium {
    background: var(--badge-premium-bg) !important;
    color: var(--badge-premium-color) !important;
    border: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* ===========================================
   CARD STYLES
   =========================================== */
.card-gradient-header {
    background: var(--gradient-card-header) !important;
}

.card-primary-border {
    border-left: 4px solid var(--color-primary);
}

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

/* ===========================================
   APPOINTMENT STATUS COLORS
   =========================================== */
:root {
    --status-scheduled-bg: linear-gradient(135deg, #4da6ff, #007bff);
    --status-confirmed-bg: linear-gradient(135deg, #28a745, #20c997);
    --status-inprogress-bg: linear-gradient(135deg, #ffc107, #fd7e14);
    --status-completed-bg: linear-gradient(135deg, #20c997, #28a745);
    --status-cancelled-bg: linear-gradient(135deg, #dc3545, #fd7e14);
    --status-noshow-bg: linear-gradient(135deg, #6c757d, #495057);
}

.status-scheduled {
    background: var(--status-scheduled-bg);
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.status-confirmed {
    background: var(--status-confirmed-bg);
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.status-inprogress {
    background: var(--status-inprogress-bg);
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.status-completed {
    background: var(--status-completed-bg);
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.status-cancelled {
    background: var(--status-cancelled-bg);
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.status-noshow {
    background: var(--status-noshow-bg);
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}


/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
    .bg-gradient-primary,
    .bg-gradient-success,
    .bg-gradient-danger {
        background: white !important;
        color: black !important;
    }
}