/* 
LPGPro Unified Color System
Consistent colors across all components
*/

:root {
    /* Primary Brand Colors */
    --lpg-primary: #263238;           /* Dark slate - main brand color */
    --lpg-primary-light: #37474f;     /* Lighter primary */
    --lpg-primary-dark: #102027;      /* Darker primary */
    
    /* Action Colors */
    --lpg-success: #28a745;           /* Green for save, success, create */
    --lpg-success-light: #34ce57;     /* Light green */
    --lpg-success-dark: #1e7e34;      /* Dark green */
    
    --lpg-warning: #ffc107;           /* Amber for warnings, pending */
    --lpg-warning-light: #ffcd39;     /* Light amber */
    --lpg-warning-dark: #d39e00;      /* Dark amber */
    
    --lpg-danger: #dc3545;            /* Red for delete, error, cancel */
    --lpg-danger-light: #e4606d;      /* Light red */
    --lpg-danger-dark: #bd2130;       /* Dark red */
    
    --lpg-info: #17a2b8;              /* Cyan for info, view, details */
    --lpg-info-light: #3ebccf;        /* Light cyan */
    --lpg-info-dark: #117a8b;         /* Dark cyan */
    
    --lpg-secondary: #6c757d;         /* Gray for secondary actions */
    --lpg-secondary-light: #868e96;   /* Light gray */
    --lpg-secondary-dark: #545b62;    /* Dark gray */
    
    --lpg-purple: #6f42c1;            /* Purple for special features */
    --lpg-purple-light: #8a63d2;      /* Light purple */
    --lpg-purple-dark: #59359a;       /* Dark purple */
    
    /* Background Colors */
    --lpg-bg-light: #f8f9fa;
    --lpg-bg-white: #ffffff;
    --lpg-bg-dark: #343a40;
    
    /* Text Colors */
    --lpg-text-primary: #212529;
    --lpg-text-secondary: #6c757d;
    --lpg-text-muted: #9aa0a6;
    --lpg-text-white: #ffffff;
    
    /* Border Colors */
    --lpg-border-light: #e9ecef;
    --lpg-border-medium: #dee2e6;
    --lpg-border-dark: #adb5bd;
}

/* Button Unified Styles */
.btn-lpg-primary {
    background-color: var(--lpg-primary);
    border-color: var(--lpg-primary);
    color: var(--lpg-text-white);
}

.btn-lpg-primary:hover,
.btn-lpg-primary:focus,
.btn-lpg-primary:active {
    background-color: var(--lpg-primary-light);
    border-color: var(--lpg-primary-light);
    color: var(--lpg-text-white);
}

.btn-lpg-save,
.btn-lpg-success {
    background-color: var(--lpg-success);
    border-color: var(--lpg-success);
    color: var(--lpg-text-white);
}

.btn-lpg-save:hover,
.btn-lpg-save:focus,
.btn-lpg-save:active,
.btn-lpg-success:hover,
.btn-lpg-success:focus,
.btn-lpg-success:active {
    background-color: var(--lpg-success-dark);
    border-color: var(--lpg-success-dark);
    color: var(--lpg-text-white);
}

.btn-lpg-warning {
    background-color: var(--lpg-warning);
    border-color: var(--lpg-warning);
    color: var(--lpg-text-primary);
}

.btn-lpg-warning:hover,
.btn-lpg-warning:focus,
.btn-lpg-warning:active {
    background-color: var(--lpg-warning-dark);
    border-color: var(--lpg-warning-dark);
    color: var(--lpg-text-white);
}

.btn-lpg-danger,
.btn-lpg-delete {
    background-color: var(--lpg-danger);
    border-color: var(--lpg-danger);
    color: var(--lpg-text-white);
}

.btn-lpg-danger:hover,
.btn-lpg-danger:focus,
.btn-lpg-danger:active,
.btn-lpg-delete:hover,
.btn-lpg-delete:focus,
.btn-lpg-delete:active {
    background-color: var(--lpg-danger-dark);
    border-color: var(--lpg-danger-dark);
    color: var(--lpg-text-white);
}

.btn-lpg-info {
    background-color: var(--lpg-info);
    border-color: var(--lpg-info);
    color: var(--lpg-text-white);
}

.btn-lpg-info:hover,
.btn-lpg-info:focus,
.btn-lpg-info:active {
    background-color: var(--lpg-info-dark);
    border-color: var(--lpg-info-dark);
    color: var(--lpg-text-white);
}

.btn-lpg-secondary,
.btn-lpg-cancel {
    background-color: var(--lpg-secondary);
    border-color: var(--lpg-secondary);
    color: var(--lpg-text-white);
}

.btn-lpg-secondary:hover,
.btn-lpg-secondary:focus,
.btn-lpg-secondary:active,
.btn-lpg-cancel:hover,
.btn-lpg-cancel:focus,
.btn-lpg-cancel:active {
    background-color: var(--lpg-secondary-dark);
    border-color: var(--lpg-secondary-dark);
    color: var(--lpg-text-white);
}

.btn-lpg-purple {
    background-color: var(--lpg-purple);
    border-color: var(--lpg-purple);
    color: var(--lpg-text-white);
}

.btn-lpg-purple:hover,
.btn-lpg-purple:focus,
.btn-lpg-purple:active {
    background-color: var(--lpg-purple-dark);
    border-color: var(--lpg-purple-dark);
    color: var(--lpg-text-white);
}

/* Modal Unified Styles */
.modal-lpg-primary .modal-header {
    background-color: var(--lpg-primary);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-primary-light);
}

.modal-lpg-success .modal-header {
    background-color: var(--lpg-success);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-success-light);
}

.modal-lpg-warning .modal-header {
    background-color: var(--lpg-warning);
    color: var(--lpg-text-primary);
    border-bottom: 2px solid var(--lpg-warning-light);
}

.modal-lpg-danger .modal-header {
    background-color: var(--lpg-danger);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-danger-light);
}

.modal-lpg-info .modal-header {
    background-color: var(--lpg-info);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-info-light);
}

.modal-lpg-purple .modal-header {
    background-color: var(--lpg-purple);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-purple-light);
}

/* Alert Unified Styles */
.alert-lpg-success {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--lpg-success-light);
    color: var(--lpg-success-dark);
}

.alert-lpg-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: var(--lpg-warning-light);
    color: var(--lpg-warning-dark);
}

.alert-lpg-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: var(--lpg-danger-light);
    color: var(--lpg-danger-dark);
}

.alert-lpg-info {
    background-color: rgba(23, 162, 184, 0.1);
    border-color: var(--lpg-info-light);
    color: var(--lpg-info-dark);
}

.alert-lpg-primary {
    background-color: rgba(38, 50, 56, 0.1);
    border-color: var(--lpg-primary-light);
    color: var(--lpg-primary-dark);
}

/* Form Controls */
.form-control:focus {
    border-color: var(--lpg-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(38, 50, 56, 0.25);
}

.form-control.is-valid {
    border-color: var(--lpg-success);
}

.form-control.is-invalid {
    border-color: var(--lpg-danger);
}

/* Card Headers */
.card-header-lpg-primary {
    background-color: var(--lpg-primary);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-primary-light);
}

.card-header-lpg-success {
    background-color: var(--lpg-success);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-success-light);
}

.card-header-lpg-warning {
    background-color: var(--lpg-warning);
    color: var(--lpg-text-primary);
    border-bottom: 2px solid var(--lpg-warning-light);
}

.card-header-lpg-danger {
    background-color: var(--lpg-danger);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-danger-light);
}

.card-header-lpg-info {
    background-color: var(--lpg-info);
    color: var(--lpg-text-white);
    border-bottom: 2px solid var(--lpg-info-light);
}

/* Badge Colors */
.badge-lpg-primary {
    background-color: var(--lpg-primary);
    color: var(--lpg-text-white);
}

.badge-lpg-success {
    background-color: var(--lpg-success);
    color: var(--lpg-text-white);
}

.badge-lpg-warning {
    background-color: var(--lpg-warning);
    color: var(--lpg-text-primary);
}

.badge-lpg-danger {
    background-color: var(--lpg-danger);
    color: var(--lpg-text-white);
}

.badge-lpg-info {
    background-color: var(--lpg-info);
    color: var(--lpg-text-white);
}

.badge-lpg-purple {
    background-color: var(--lpg-purple);
    color: var(--lpg-text-white);
}

/* Text Colors */
.text-lpg-primary { color: var(--lpg-primary) !important; }
.text-lpg-success { color: var(--lpg-success) !important; }
.text-lpg-warning { color: var(--lpg-warning) !important; }
.text-lpg-danger { color: var(--lpg-danger) !important; }
.text-lpg-info { color: var(--lpg-info) !important; }
.text-lpg-purple { color: var(--lpg-purple) !important; }

/* Background Colors */
.bg-lpg-primary { background-color: var(--lpg-primary) !important; }
.bg-lpg-success { background-color: var(--lpg-success) !important; }
.bg-lpg-warning { background-color: var(--lpg-warning) !important; }
.bg-lpg-danger { background-color: var(--lpg-danger) !important; }
.bg-lpg-info { background-color: var(--lpg-info) !important; }
.bg-lpg-purple { background-color: var(--lpg-purple) !important; }

/* Progress Bars */
.progress-bar-lpg-primary {
    background-color: var(--lpg-primary);
}

.progress-bar-lpg-success {
    background-color: var(--lpg-success);
}

.progress-bar-lpg-warning {
    background-color: var(--lpg-warning);
}

.progress-bar-lpg-danger {
    background-color: var(--lpg-danger);
}

.progress-bar-lpg-info {
    background-color: var(--lpg-info);
}

/* Loading Spinners */
.spinner-lpg-primary {
    color: var(--lpg-primary);
}

.spinner-lpg-success {
    color: var(--lpg-success);
}

.spinner-lpg-warning {
    color: var(--lpg-warning);
}

.spinner-lpg-danger {
    color: var(--lpg-danger);
}

.spinner-lpg-info {
    color: var(--lpg-info);
}

/* Override Bootstrap Default Colors to Match LPG Theme */
.btn-primary {
    background-color: var(--lpg-primary);
    border-color: var(--lpg-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--lpg-primary-light);
    border-color: var(--lpg-primary-light);
}

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

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--lpg-success-dark);
    border-color: var(--lpg-success-dark);
}

.btn-info {
    background-color: var(--lpg-info);
    border-color: var(--lpg-info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--lpg-info-dark);
    border-color: var(--lpg-info-dark);
}

.btn-warning {
    background-color: var(--lpg-warning);
    border-color: var(--lpg-warning);
    color: var(--lpg-text-primary);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--lpg-warning-dark);
    border-color: var(--lpg-warning-dark);
    color: var(--lpg-text-white);
}

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

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--lpg-danger-dark);
    border-color: var(--lpg-danger-dark);
}

/* Modal Improvements */
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.modal-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 1.5rem;
}

.modal-footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 1.5rem;
    background-color: var(--lpg-bg-light);
}

.modal-body {
    padding: 2rem;
}

/* Utility Classes */
.border-lpg-primary { border-color: var(--lpg-primary) !important; }
.border-lpg-success { border-color: var(--lpg-success) !important; }
.border-lpg-warning { border-color: var(--lpg-warning) !important; }
.border-lpg-danger { border-color: var(--lpg-danger) !important; }
.border-lpg-info { border-color: var(--lpg-info) !important; }
.border-lpg-purple { border-color: var(--lpg-purple) !important; }