/* 
 * Bahía Carros Eléctricos Theme
 * Custom color scheme based on the provided Flutter app colors
 */

:root {
    /* Primary colors */
    --primary-color: #192D3E;
    --secondary-color: #FF9800;
    --background-color: #FFFFFF; /* Changed to white */
    --text-color: #333333;
    
    /* Theme custom colors */
    --primary-dark-blue: #293241;
    --secondary-dark-blue: #224466;
    --accent-orange: #FAA307;
    --accent-brownish-orange: #643D09;
    --deep-dark-blue: #0D1721;
    --slate-700: #334155;
    --slate-600: #475569;
    --white: #FFFFFF;
    --red-400: #e84855;
    --red-300: #FCA5A5;
    
    /* Blue accents */
    --accent-blue-light: #E0F2FE;
    --accent-blue-dark: #345995;
    --accent-blue-2: #7c8beb;
    --accent-blue: #457b9d;
    --accent-blue-3: #78a1bb;
    
    /* Secondary gray */
    --secondary-color-2: #829399;
    
    /* Success colors */
    --success-green: #10B981;
    --success-green-light: #D1FAE5;
    --success-green-dark: #059669;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border radius */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
}

/* Bootstrap Overrides */

/* Background colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-success {
    background-color: var(--success-green) !important;
}

.bg-danger {
    background-color: var(--red-400) !important;
}

.bg-warning {
    background-color: var(--accent-orange) !important;
}

.bg-info {
    background-color: var(--accent-blue) !important;
}

.bg-light {
    background-color: var(--background-color) !important;
}

.bg-dark {
    background-color: var(--deep-dark-blue) !important;
}

/* Text colors */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-success {
    color: var(--success-green) !important;
}

.text-danger {
    color: var(--red-400) !important;
}

.text-warning {
    color: var(--accent-orange) !important;
}

.text-info {
    color: var(--accent-blue) !important;
}

.text-dark {
    color: var(--text-color) !important;
}

.text-muted {
    color: var(--slate-600) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark-blue);
    border-color: var(--primary-dark-blue);
}

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

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--accent-brownish-orange);
    border-color: var(--accent-brownish-orange);
    color: var(--white);
}

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

.btn-secondary-2:hover, .btn-secondary-2:focus {
    background-color: var(--slate-600);
    border-color: var(--slate-600);
    color: var(--white);
}

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

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

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

.btn-danger:hover, .btn-danger:focus {
    background-color: var(--red-300);
    border-color: var(--red-300);
}

.btn-warning {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: var(--white);
}

.btn-warning:hover, .btn-warning:focus {
    background-color: var(--accent-brownish-orange);
    border-color: var(--accent-brownish-orange);
    color: var(--white);
}

.btn-info {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--white);
}

.btn-info:hover, .btn-info:focus {
    background-color: var(--accent-blue-dark);
    border-color: var(--accent-blue-dark);
    color: var(--white);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Cards */
.card {
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
    background-color: var(--white); /* Default card background */
}

.card:not(.shadow) {
    box-shadow: none;
}

.card-header {
    background-color: var(--primary-color);
    color: var(--white);
    border-top-left-radius: var(--border-radius-md) !important;
    border-top-right-radius: var(--border-radius-md) !important;
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header.bg-light {
    background-color: var(--accent-blue-light) !important;
    color: var(--text-color);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    background-color: var(--background-color);
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Alerts */
.alert-primary {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue-dark);
    border-color: var(--accent-blue);
}

.alert-secondary {
    background-color: #F8F9FA;
    color: var(--slate-700);
    border-color: var(--slate-600);
}

.alert-success {
    background-color: var(--success-green-light);
    color: var(--success-green-dark);
    border-color: var(--success-green);
}

.alert-danger {
    background-color: #FECDD3;
    color: #991B1B;
    border-color: var(--red-400);
}

.alert-warning {
    background-color: #FEF3C7;
    color: var(--accent-brownish-orange);
    border-color: var(--accent-orange);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-green) !important;
}

.badge.bg-danger {
    background-color: var(--red-400) !important;
}

.badge.bg-warning {
    background-color: var(--accent-orange) !important;
    color: var(--white);
}

.badge.bg-secondary-status {
    background-color: #829399 !important; /* Dark gray */
    color: var(--white) !important;
}

.badge.bg-accent-blue-dark {
    background-color: var(--accent-blue-dark) !important; /* #345995 */
    color: var(--white) !important;
}

/* Custom utility classes */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

.border-accent {
    border-color: var(--accent-orange) !important;
}

/* Countdown styling */
.countdown-time {
    color: var(--accent-blue-dark);
    font-weight: bold;
}

/* General page styling */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Pagination styles */
.pagination .page-link {
    color: var(--accent-blue);
    border-color: var(--accent-blue-light);
}

.pagination .page-link:hover {
    color: var(--accent-blue-dark);
    background-color: var(--accent-blue-light);
    border-color: var(--accent-blue-light);
}

.pagination .page-item.active .page-link {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--white);
}

.pagination .page-item.active .page-link:hover {
    background-color: var(--accent-blue-dark);
    border-color: var(--accent-blue-dark);
}

.pagination .page-item.disabled .page-link {
    color: var(--slate-600);
    background-color: transparent;
    border-color: var(--accent-blue-light);
}

/* Override FullCalendar theme */
:root {
    --fc-button-bg-color: var(--primary-color);
    --fc-button-border-color: var(--primary-color);
    --fc-button-hover-bg-color: var(--primary-dark-blue);
    --fc-button-hover-border-color: var(--deep-dark-blue);
    --fc-button-active-bg-color: var(--deep-dark-blue);
    --fc-today-bg-color: var(--accent-blue-light);
    --fc-event-bg-color: var(--accent-orange);
    --fc-event-border-color: var(--accent-brownish-orange);
}