/* ========================================
   DARK THEME + AQUA BLUE BOOTSTRAP OVERRIDES
   Load this AFTER Bootstrap CSS in all HTML files
   ======================================== */

/* Override Bootstrap CSS Variables */
:root {
    /* Aqua Blue for Primary */
    --bs-primary: #00CED1;
    --bs-primary-rgb: 0, 206, 209;
    
    /* Green for Success */
    --bs-success: #2ecc71;
    --bs-success-rgb: 46, 204, 113;
    
    /* Dark theme colors */
    --bs-body-bg: #1a1a1a;
    --bs-body-bg-rgb: 26, 26, 26;
    --bs-body-color: #ffffff;
    --bs-body-color-rgb: 255, 255, 255;
    
    /* Card colors */
    --bs-card-bg: #252525;
    --bs-card-border-color: #404040;
    
    /* Border colors */
    --bs-border-color: #404040;
    --bs-border-color-translucent: rgba(64, 64, 64, 0.5);
}

/* Danger Classes → Aqua Blue */
.bg-danger {
    background-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.text-danger {
    color: #00CED1 !important;
}

.btn-danger {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #20B2AA !important;
    border-color: #20B2AA !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-danger:active {
    background-color: #008B8B !important;
    border-color: #008B8B !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.border-danger {
    border-color: #00CED1 !important;
}

.alert-danger {
    background-color: rgba(0, 206, 209, 0.15) !important;
    color: #00CED1 !important;
    border-color: #00CED1 !important;
}

/* Primary Classes → Aqua Blue */
.bg-primary {
    background-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.text-primary {
    color: #00CED1 !important;
}

.btn-primary {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-primary:hover {
    background-color: #20B2AA !important;
    border-color: #20B2AA !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-primary:active,
.btn-primary:focus {
    background-color: #008B8B !important;
    border-color: #008B8B !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Success Button - Use aqua to match theme */
.btn-success {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-success:hover {
    background-color: #20B2AA !important;
    border-color: #20B2AA !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-success:active,
.btn-success:focus {
    background-color: #008B8B !important;
    border-color: #008B8B !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Success Outline Button - Consistent with solid success */
.btn.btn-outline-success,
button.btn-outline-success,
a.btn-outline-success,
.btn-outline-success.btn {
    border-color: #2ecc71 !important;
    color: #2ecc71 !important;
    background-color: transparent !important;
    border-width: 2px !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn.btn-outline-success:hover,
button.btn-outline-success:hover,
a.btn-outline-success:hover,
.btn-outline-success.btn:hover {
    background-color: #2ecc71 !important;
    border-color: #2ecc71 !important;
    color: #000000 !important;
    font-weight: bold !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.4) !important;
}

.btn.btn-outline-success:active,
.btn.btn-outline-success:focus,
button.btn-outline-success:active,
button.btn-outline-success:focus,
a.btn-outline-success:active,
a.btn-outline-success:focus,
.btn-outline-success.btn:active,
.btn-outline-success.btn:focus {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    color: #000000 !important;
    font-weight: bold !important;
    box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.3) !important;
}

/* Info Button - Aqua blue */
.btn-info {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-info:hover {
    background-color: #20B2AA !important;
    border-color: #20B2AA !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-info:active,
.btn-info:focus {
    background-color: #008B8B !important;
    border-color: #008B8B !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Warning Button - Keep orange/yellow */
.btn-warning {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-warning:hover {
    background-color: #e67e22 !important;
    border-color: #e67e22 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.btn-warning:active,
.btn-warning:focus {
    background-color: #d68910 !important;
    border-color: #d68910 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Outline Buttons */
.btn.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary,
.btn-outline-primary.btn {
    border-color: #00CED1 !important;
    color: #00CED1 !important;
    background-color: transparent !important;
    border-width: 2px !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 rgba(0, 206, 209, 0) !important;
}

.btn.btn-outline-primary:hover,
button.btn-outline-primary:hover,
a.btn-outline-primary:hover,
.btn-outline-primary.btn:hover {
    background-color: rgba(0, 206, 209, 0.1) !important;
    border-color: #40E0D0 !important;
    color: #40E0D0 !important;
    font-weight: 600 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 206, 209, 0.4) !important;
}

.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus,
button.btn-outline-primary:active,
button.btn-outline-primary:focus,
a.btn-outline-primary:active,
a.btn-outline-primary:focus,
.btn-outline-primary.btn:active,
.btn-outline-primary.btn:focus {
    background-color: rgba(0, 206, 209, 0.2) !important;
    border-color: #00CED1 !important;
    color: #00CED1 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 206, 209, 0.3) !important;
}

.btn-outline-secondary {
    border-color: #555555 !important;
    color: #b8b8b8 !important;
    background-color: transparent !important;
    border-width: 2px !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn-outline-secondary:hover {
    background-color: rgba(85, 85, 85, 0.2) !important;
    border-color: #666666 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(85, 85, 85, 0.4) !important;
}

.btn-outline-secondary:active,
.btn-outline-secondary:focus {
    background-color: rgba(85, 85, 85, 0.3) !important;
    border-color: #555555 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Secondary Button */
.btn-secondary {
    background-color: #555555 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

.btn-secondary:hover {
    background-color: #666666 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

/* General Button Improvements - Only for disabled state */
.btn:disabled,
.btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Dark Theme Base */
body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Cards */
.card {
    background-color: #252525 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.card-header {
    background-color: #2d2d2d !important;
    border-bottom-color: #404040 !important;
    color: #ffffff !important;
}

.card-body {
    color: #ffffff !important;
}

.card-footer {
    background-color: #2d2d2d !important;
    border-top-color: #404040 !important;
}

/* Modals */
.modal-content {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.modal-header {
    border-bottom-color: #404040 !important;
    color: #ffffff !important;
}

.modal-footer {
    border-top-color: #404040 !important;
}

.modal-title {
    color: #ffffff !important;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Forms */
.form-control,
.form-select {
    background-color: #333333 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
    accent-color: #00CED1 !important;
}

/* File Input Specific Styling */
input[type="file"].form-control {
    background-color: #2a2a2a !important;
    border-color: #555555 !important;
    color: #ffffff !important;
    padding: 0.375rem 0.75rem !important;
}

input[type="file"].form-control::file-selector-button {
    background-color: #00CED1 !important;
    border: none !important;
    color: #000000 !important;
    font-weight: bold !important;
    padding: 0.375rem 0.75rem !important;
    margin-right: 0.75rem !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
}

input[type="file"].form-control::file-selector-button:hover {
    background-color: #20B2AA !important;
}

.form-control:focus,
.form-select:focus {
    background-color: #404040 !important;
    border-color: #00CED1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 206, 209, 0.25) !important;
}

/* Dropdown/Select Options - Aqua Blue Theme */
select,
.form-select {
    accent-color: #00CED1 !important;
    color-scheme: dark !important;
}

.form-select option,
select option {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Selected/checked option - darker aqua with checkmark indicator */
.form-select option:checked,
select option:checked {
    background: #008B8B linear-gradient(0deg, #008B8B 0%, #008B8B 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Hovered option - bright aqua (takes priority over checked) */
.form-select option:hover,
select option:hover {
    background: #00CED1 linear-gradient(0deg, #00CED1 0%, #00CED1 100%) !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.form-control::placeholder {
    color: #888888 !important;
}

.form-label {
    color: #b8b8b8 !important;
}

.input-group-text {
    background-color: #2d2d2d !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

/* Tables */
.table {
    color: #ffffff !important;
}

.table thead th {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.table tbody tr {
    background-color: #252525 !important;
    border-color: #404040 !important;
}

.table tbody tr:hover {
    background-color: #2a2a2a !important;
}

.table td {
    border-color: #404040 !important;
}

/* Badges */
.badge {
    color: #ffffff !important;
}

.badge.bg-danger {
    background-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.badge.bg-primary {
    background-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.badge.bg-primary {
    background-color: #00CED1 !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

.dropdown-item {
    color: #ffffff !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #333333 !important;
    color: #00CED1 !important;
}

.dropdown-divider {
    border-top-color: #404040 !important;
}

/* List Groups */
.list-group-item {
    background-color: #252525 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.list-group-item:hover {
    background-color: #2a2a2a !important;
}

.list-group-item.active {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Nav Pills/Tabs */
.nav-pills .nav-link.active {
    background-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.nav-tabs {
    border-bottom-color: #404040 !important;
}

.nav-tabs .nav-link {
    color: #b8b8b8 !important;
}

.nav-tabs .nav-link.active {
    background-color: #252525 !important;
    border-color: #404040 #404040 transparent !important;
    color: #00CED1 !important;
}

/* Alerts */
.alert {
    border-radius: 8px;
}

.alert-success {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #2ecc71 !important;
    border-color: #2ecc71 !important;
}

.alert-warning {
    background-color: rgba(243, 156, 18, 0.15) !important;
    color: #f39c12 !important;
    border-color: #f39c12 !important;
}

.alert-info {
    background-color: rgba(0, 206, 209, 0.15) !important;
    color: #00CED1 !important;
    border-color: #00CED1 !important;
}

/* Text Colors */
.text-muted {
    color: #888888 !important;
}

.text-dark {
    color: #ffffff !important;
}

.text-white {
    color: #ffffff !important;
}

/* Backgrounds */
.bg-light {
    background-color: #2d2d2d !important;
}

.bg-white {
    background-color: #252525 !important;
}

.bg-dark {
    background-color: #1a1a1a !important;
}

.bg-secondary {
    background-color: #2d2d2d !important;
}

/* Borders */
.border {
    border-color: #404040 !important;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: #404040 !important;
}

/* Pagination */
.pagination .page-link {
    background-color: #252525 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.pagination .page-link:hover {
    background-color: #2a2a2a !important;
    color: #00CED1 !important;
}

.pagination .page-item.active .page-link {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Toasts */
.toast {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.toast-header {
    background-color: #2d2d2d !important;
    border-bottom-color: #404040 !important;
    color: #ffffff !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: #2d2d2d !important;
}

.breadcrumb-item {
    color: #b8b8b8 !important;
}

.breadcrumb-item.active {
    color: #00CED1 !important;
}

/* Progress Bars */
.progress {
    background-color: #333333 !important;
}

.progress-bar {
    background-color: #00CED1 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Spinners */
.spinner-border,
.spinner-grow {
    color: #00CED1 !important;
}

/* Offcanvas */
.offcanvas {
    background-color: #252525 !important;
    color: #ffffff !important;
}

.offcanvas-header {
    border-bottom-color: #404040 !important;
}

/* Accordion */
.accordion-item {
    background-color: #252525 !important;
    border-color: #404040 !important;
}

.accordion-button {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.accordion-button:not(.collapsed) {
    background-color: #2a2a2a !important;
    color: #00CED1 !important;
}

.accordion-body {
    background-color: #252525 !important;
    color: #ffffff !important;
}

/* Checkboxes and Radio Buttons - Aqua Blue Theme */
.form-check-input {
    background-color: #2a2a2a !important;
    border: 2px solid #00CED1 !important;
    cursor: pointer !important;
}

.form-check-input:checked {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
}

.form-check-input:focus {
    border-color: #40E0D0 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 206, 209, 0.25) !important;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e") !important;
}

/* Form Switch (Toggle) */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-color: #555555 !important;
    border-color: #404040 !important;
}

.form-switch .form-check-input:checked {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Button Checkboxes and Radios */
.btn-check:checked + .btn {
    background-color: #00CED1 !important;
    border-color: #00CED1 !important;
    color: #000000 !important;
}

.btn-check:focus + .btn,
.btn-check:active + .btn {
    box-shadow: 0 0 0 0.25rem rgba(0, 206, 209, 0.25) !important;
}