/* Dark Theme Override for Bootstrap 5 */

/* Root Variables - Dark Theme Colors */
:root {
    --bs-primary: #00d4ff;
    --bs-primary-rgb: 0, 212, 255;
    --bs-secondary: #6c757d;
    --bs-success: #00ff88;
    --bs-danger: #ff4757;
    --bs-warning: #ffa502;
    --bs-info: #00d4ff;
    --bs-light: #2d3748;
    --bs-dark: #0f172a;
    /* Background Colors */
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    /* Border Colors */
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(51, 65, 85, 0.5);
}

/* Body Background */
body {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    min-height: 100vh;
}

/* Card Styling */
.card {
    background: linear-gradient(145deg, #1e293b, #334155);
    border: 1px solid #475569;
    color: #e2e8f0;
}

.card-body {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(10px);
}

/* Button Overrides */
/* ============================================
   PRIMARY BUTTON
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    color: #f1f5f9;
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #00e5ff 0%, #00aae5 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 212, 255, 0.3);
        color: #f1f5f9;
    }

    .btn-primary:active,
    .btn-primary:focus {
        background: linear-gradient(135deg, #00bfe5 0%, #0088bb 100%);
        color: #f1f5f9;
        box-shadow: 0 4px 8px rgba(0, 212, 255, 0.4);
    }

    .btn-primary:disabled {
        background: linear-gradient(135deg, #475569 0%, #334155 100%);
        color: #94a3b8;
    }

.btn-outline-primary {
    background: transparent;
    border: 2px solid #00d4ff;
    color: #00d4ff;
}

    .btn-outline-primary:hover {
        background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
        border-color: #00d4ff;
        color: #f1f5f9;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 212, 255, 0.3);
    }

    .btn-outline-primary:active,
    .btn-outline-primary:focus {
        background: linear-gradient(135deg, #00bfe5 0%, #0088bb 100%);
        border-color: #00d4ff;
        color: #f1f5f9;
        box-shadow: 0 4px 8px rgba(0, 212, 255, 0.4);
    }

/* ============================================
   SECONDARY BUTTON
   ============================================ */
.btn-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border: none;
    color: #f1f5f9;
}

    .btn-secondary:hover {
        background: linear-gradient(135deg, #74849b 0%, #576579 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(100, 116, 139, 0.3);
        color: #f1f5f9;
    }

    .btn-secondary:active,
    .btn-secondary:focus {
        background: linear-gradient(135deg, #54647b 0%, #374559 100%);
        color: #f1f5f9;
        box-shadow: 0 4px 8px rgba(100, 116, 139, 0.4);
    }

.btn-outline-secondary {
    background: transparent;
    border: 2px solid #64748b;
    color: #64748b;
}

    .btn-outline-secondary:hover {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
        border-color: #64748b;
        color: #f1f5f9;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(100, 116, 139, 0.3);
    }

    .btn-outline-secondary:active,
    .btn-outline-secondary:focus {
        background: linear-gradient(135deg, #54647b 0%, #374559 100%);
        border-color: #64748b;
        color: #f1f5f9;
        box-shadow: 0 4px 8px rgba(100, 116, 139, 0.4);
    }

/* ============================================
   SUCCESS BUTTON
   ============================================ */
.btn-success {
    background: linear-gradient(135deg, #1fbe64 0%, #159a50 100%);
    border: none;
    color: #ffffff;
}

    .btn-success:hover {
        background: linear-gradient(135deg, #23cc6d 0%, #18a458 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(31, 190, 100, 0.3);
        color: #ffffff;
    }

    .btn-success:active,
    .btn-success:focus {
        background: linear-gradient(135deg, #1ca85a 0%, #138344 100%);
        box-shadow: 0 4px 8px rgba(31, 190, 100, 0.4);
        color: #ffffff;
    }

.btn-outline-success {
    background: transparent;
    border: 2px solid #1fbe64;
    color: #1fbe64;
}

    .btn-outline-success:hover {
        background: linear-gradient(135deg, #1fbe64 0%, #159a50 100%);
        border-color: #1fbe64;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(31, 190, 100, 0.3);
    }

    .btn-outline-success:active,
    .btn-outline-success:focus {
        background: linear-gradient(135deg, #1ca85a 0%, #138344 100%);
        border-color: #1fbe64;
        color: #ffffff;
        box-shadow: 0 4px 8px rgba(31, 190, 100, 0.4);
    }

/* ============================================
   DANGER BUTTON
   ============================================ */
.btn-danger {
    background: linear-gradient(135deg, #ff4757 0%, #cc3644 100%);
    border: none;
    color: #ffffff;
}

    .btn-danger:hover {
        background: linear-gradient(135deg, #ff5767 0%, #dd4654 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(255, 71, 87, 0.3);
        color: #ffffff;
    }

    .btn-danger:active,
    .btn-danger:focus {
        background: linear-gradient(135deg, #ee3747 0%, #bb2634 100%);
        box-shadow: 0 4px 8px rgba(255, 71, 87, 0.4);
        color: #ffffff;
    }

.btn-outline-danger {
    background: transparent;
    border: 2px solid #ff4757;
    color: #ff4757;
}

    .btn-outline-danger:hover {
        background: linear-gradient(135deg, #ff4757 0%, #cc3644 100%);
        border-color: #ff4757;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(255, 71, 87, 0.3);
    }

    .btn-outline-danger:active,
    .btn-outline-danger:focus {
        background: linear-gradient(135deg, #ee3747 0%, #bb2634 100%);
        border-color: #ff4757;
        color: #ffffff;
        box-shadow: 0 4px 8px rgba(255, 71, 87, 0.4);
    }

/* ============================================
   WARNING BUTTON
   ============================================ */
.btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border: none;
    color: #ffffff;
}

    .btn-warning:hover {
        background: linear-gradient(135deg, #ffd54f 0%, #ffa726 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(255, 193, 7, 0.3);
        color: #ffffff;
    }

    .btn-warning:active,
    .btn-warning:focus {
        background: linear-gradient(135deg, #ffb300 0%, #f57c00 100%);
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
        color: #ffffff;
    }

.btn-outline-warning {
    background: transparent;
    border: 2px solid #ffc107;
    color: #ffffff;
}

    .btn-outline-warning:hover {
        background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        border-color: #ffc107;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(255, 193, 7, 0.3);
    }

    .btn-outline-warning:active,
    .btn-outline-warning:focus {
        background: linear-gradient(135deg, #ffb300 0%, #f57c00 100%);
        border-color: #ffc107;
        color: #ffffff;
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
    }

/* ============================================
   INFO BUTTON
   ============================================ */
.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border: none;
    color: #ffffff;
}

    .btn-info:hover {
        background: linear-gradient(135deg, #1ab5cc 0%, #1690a8 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(23, 162, 184, 0.3);
        color: #ffffff;
    }

    .btn-info:active,
    .btn-info:focus {
        background: linear-gradient(135deg, #148fa1 0%, #107282 100%);
        box-shadow: 0 4px 8px rgba(23, 162, 184, 0.4);
        color: #ffffff;
    }

.btn-outline-info {
    background: transparent;
    border: 2px solid #17a2b8;
    color: #17a2b8;
}

    .btn-outline-info:hover {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border-color: #17a2b8;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(23, 162, 184, 0.3);
    }

    .btn-outline-info:active,
    .btn-outline-info:focus {
        background: linear-gradient(135deg, #148fa1 0%, #107282 100%);
        border-color: #17a2b8;
        color: #ffffff;
        box-shadow: 0 4px 8px rgba(23, 162, 184, 0.4);
    }

/* ============================================
   LIGHT BUTTON
   ============================================ */
.btn-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    color: #1e293b;
}

    .btn-light:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        color: #1e293b;
    }

    .btn-light:active,
    .btn-light:focus {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        color: #1e293b;
    }

.btn-outline-light {
    background: transparent;
    border: 2px solid #cbd5e1;
    color: #cbd5e1;
}

    .btn-outline-light:hover {
        background: rgba(203, 213, 225, 0.1);
        border-color: #00d4ff;
        color: #00d4ff;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 212, 255, 0.2);
    }

    .btn-outline-light:active,
    .btn-outline-light:focus {
        background: rgba(203, 213, 225, 0.15);
        border-color: #00d4ff;
        color: #00d4ff;
        box-shadow: 0 4px 8px rgba(0, 212, 255, 0.3);
    }

/* ============================================
   DARK BUTTON
   ============================================ */
.btn-dark {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%);
    border: none;
    color: #f1f5f9;
}

    .btn-dark:hover {
        background: linear-gradient(135deg, #3d4349 0%, #2a2e33 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        color: #f1f5f9;
    }

    .btn-dark:active,
    .btn-dark:focus {
        background: linear-gradient(135deg, #2b3035 0%, #1a1d20 100%);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        color: #f1f5f9;
    }

.btn-outline-dark {
    background: transparent;
    border: 2px solid #343a40;
    color: #343a40;
}

    .btn-outline-dark:hover {
        background: linear-gradient(135deg, #343a40 0%, #212529 100%);
        border-color: #343a40;
        color: #f1f5f9;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    .btn-outline-dark:active,
    .btn-outline-dark:focus {
        background: linear-gradient(135deg, #2b3035 0%, #1a1d20 100%);
        border-color: #343a40;
        color: #f1f5f9;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

/* ============================================
   LINK BUTTON
   ============================================ */
.btn-link {
    background: transparent;
    border: none;
    color: #00d4ff;
    text-decoration: none;
}

    .btn-link:hover {
        color: #00e5ff;
        text-decoration: underline;
        transform: translateY(-1px);
    }

    .btn-link:active,
    .btn-link:focus {
        color: #00bfe5;
        text-decoration: underline;
    }

/* ============================================
   DISABLED STATES
   ============================================ */
.btn:disabled,
.btn.disabled {
    transform: none;
    cursor: not-allowed;
    opacity: 0.65;
}

/* Form Controls */
.form-control {
    background-color: #1e293b;
    border: 1px solid #475569;
    color: #e2e8f0;
    transition: all 0.3s ease;
}

    .form-control:focus {
        background-color: #334155;
        border-color: #00d4ff;
        color: #e2e8f0;
        box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.15);
    }

    .form-control::placeholder {
        color: #64748b;
    }

/* Input Group */
.input-group-text {
    background-color: #334155;
    border: 1px solid #475569;
    border-right: none;
    color: #94a3b8;
}

.input-group .form-control {
    background-color: #e2e8f0;
    color: #0f172a;
    border: 1px solid #475569;
    border-left: none;
}

    .input-group .form-control:focus {
        background-color: #f1f5f9;
        color: #0f172a;
        border-color: #00d4ff;
        box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.15);
    }

    .input-group .form-control::placeholder {
        color: #64748b;
    }

/* Labels */
.form-label {
    color: #cbd5e1;
}

/* Text Colors */
.text-dark {
    color: #f1f5f9 !important;
}

.text-secondary {
    color: #94a3b8 !important;
}

.text-muted {
    color: #64748b !important;
}

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

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

/* Background Colors */
.bg-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
}

.bg-light {
    background-color: #334155 !important;
}

.bg-dark {
    background-color: #0f172a !important;
}

/* Shadow Enhancement */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

/* Spinner */
.spinner-border {
    color: #0f172a;
}

/* Link Colors */
a {
    color: #00d4ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

    a:hover {
        color: #00e5ff;
    }

/* Validation Messages */
.text-danger {
    color: #ff4757 !important;
}

.text-success {
    color: #00ff88 !important;
}

.text-warning {
    color: #ffa502 !important;
}

/* Focus Visible */
*:focus-visible {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: #00d4ff;
    color: #0f172a;
}

/* Scrollbar Styling (Webkit browsers) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1e293b;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

/* Pagination Dark Theme */
.pagination .page-item .page-link {
    background-color: #1e293b;
    border: 1px solid #475569;
    color: #94a3b8;
    transition: all 0.3s ease;
}

    .pagination .page-item .page-link:hover {
        background-color: #334155;
        border-color: #00d4ff;
        color: #00d4ff;
    }

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border-color: #00d4ff;
    color: #0f172a;
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    background-color: #1e293b;
    border-color: #334155;
    color: #475569;
}

/* Pagination input field */
.pagination input.form-control {
    background-color: #1e293b;
    border: 1px solid #475569;
    color: #e2e8f0;
}

    .pagination input.form-control:focus {
        background-color: #334155;
        border-color: #00d4ff;
        color: #e2e8f0;
        box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.15);
    }

/* Dropdown Menu Dark Theme */
.dropdown-menu {
    background-color: #1e293b;
    border: 1px solid #475569;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.dropdown-item {
    color: #e2e8f0;
    transition: all 0.3s ease;
    border: none;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #334155;
        color: #e2e8f0;
    }

    .dropdown-item.text-danger {
        color: #ff4757 !important;
    }

        .dropdown-item.text-danger:hover,
        .dropdown-item.text-danger:focus {
            background-color: #ff4757;
            color: #ffffff !important;
        }

.dropdown-divider {
    border-color: #475569;
}

/* Custom CSS */
.full-mobile {
    width: 100%;
}

/* Readonly input dark theme styling */
.form-control[readonly] {
    background-color: #2d3748;
    color: #ffffff;
    border-color: #4a5568;
    cursor: not-allowed;
}

    .form-control[readonly]:focus {
        background-color: #2d3748;
        color: #ffffff;
        border-color: #4a5568;
        box-shadow: none;
    }

@media (min-width: 992px) { /* lg breakpoint */
    .full-mobile {
        width: auto;
    }
}