/* ========================================
   eSmart AI Bootstrap Theme Override
   Uses Bootstrap 5.3.8 with dark mode
   ======================================== */

/* Dark mode as default - override Bootstrap CSS variables */
[data-bs-theme="dark"] {
    /* Primary color - eSmart Teal */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 57, 151, 151;

    /* Body colors */
    --bs-body-bg: var(--bg-app);
    --bs-body-color: var(--text-high);

    /* Secondary backgrounds */
    --bs-secondary-bg: var(--bg-panel);
    --bs-tertiary-bg: var(--bg-hover);

    /* Border color */
    --bs-border-color: var(--border-divider);
    --bs-border-color-translucent: rgba(42, 50, 50, 0.5);

    /* Link colors */
    --bs-link-color: var(--primary-light);
    --bs-link-hover-color: #7fd1d1;

    /* Card background */
    --bs-card-bg: var(--bg-panel);
    --bs-card-border-color: var(--bg-hover);

    /* Form controls */
    --bs-form-control-bg: var(--bg-hover);

    /* Muted text */
    --bs-secondary-color: var(--text-subtle);
}

/* ========================================
   Button Overrides
   ======================================== */

/* Base button improvements */
.btn {
    --bs-btn-font-weight: var(--font-weight-medium);
    --bs-btn-border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

/* Primary - Teal filled */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: #1e4f4f;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    --bs-btn-disabled-opacity: 0.5;
}

/* Outline Primary - Teal outline */
.btn-outline-primary {
    --bs-btn-color: var(--primary-light);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-color: var(--bg-app);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-color: var(--text-high);
}

/* Secondary - Dark filled */
.btn-secondary {
    --bs-btn-bg: var(--bg-hover);
    --bs-btn-border-color: #2d3535;
    --bs-btn-color: var(--text-subtle);
    --bs-btn-hover-bg: #232a2a;
    --bs-btn-hover-border-color: #3d4545;
    --bs-btn-hover-color: var(--text-high);
    --bs-btn-active-bg: #2d3535;
}

/* Outline Secondary - For filter buttons */
.btn-outline-secondary {
    --bs-btn-color: var(--text-subtle);
    --bs-btn-border-color: #2d3535;
    --bs-btn-hover-bg: var(--primary-subtle);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-hover-color: var(--text-high);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-color: var(--text-high);
}

/* Active state for filter buttons */
.btn-outline-secondary.active {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    border-color: var(--primary-light);
    color: var(--text-high);
    box-shadow: 0 2px 10px var(--primary-glow);
}

/* Danger button */
.btn-danger {
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #991b1b;
    --bs-btn-active-bg: #991b1b;
}

.btn-outline-danger {
    --bs-btn-color: #f87171;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-color: #fff;
}

/* Button group - remove double borders */
.btn-group > .btn-outline-secondary:not(:first-child) {
    margin-left: -1px;
}

/* Smaller buttons for filters */
.btn-sm {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.8125rem;
}

/* ========================================
   Glassmorphism Utility
   ======================================== */
.glass {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

/* ========================================
   Navbar Override
   ======================================== */
.navbar {
    --bs-navbar-padding-y: 1rem;
}

.navbar-dark,
[data-bs-theme="dark"] .navbar {
    --bs-navbar-color: rgba(240, 241, 241, 0.85);
    --bs-navbar-hover-color: var(--primary-light);
    --bs-navbar-active-color: var(--primary-light);
    --bs-navbar-brand-color: var(--text-high);
    --bs-navbar-brand-hover-color: var(--text-high);
}

/* Navbar transparent -> solid on scroll (JS adds .scrolled) */
.navbar.navbar-glass {
    background: transparent;
    transition: background var(--transition-normal), backdrop-filter var(--transition-normal);
}

.navbar.navbar-glass.scrolled {
    background: rgba(11, 14, 14, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #232a2a;
}

/* ========================================
   Card Override
   ======================================== */
.card {
    --bs-card-bg: var(--bg-panel);
    --bs-card-border-color: var(--bg-hover);
    --bs-card-cap-bg: var(--bg-pane);
}

.card.glass-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-normal);
}

/* ========================================
   Form Controls Override
   ======================================== */
.form-control,
.form-select {
    background-color: var(--bg-hover);
    border-color: #2d3535;
    color: var(--text-high);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-hover);
    border-color: var(--primary);
    color: var(--text-high);
    box-shadow: 0 0 0 0.25rem var(--primary-glow);
}

.form-control::placeholder {
    color: #6b7575;
}

/* ========================================
   Modal Override
   ======================================== */
.modal {
    --bs-modal-bg: var(--bg-panel);
    --bs-modal-border-color: #232a2a;
    --bs-modal-header-border-color: #232a2a;
    --bs-modal-footer-border-color: #232a2a;
}

.modal-content {
    background-color: var(--bg-panel);
    border-color: #232a2a;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom-color: #232a2a;
    padding: 1rem 1.25rem;
}

.modal-header .modal-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-high);
}

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

.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 1.25rem;
    color: var(--text-subtle);
}

.modal-footer {
    border-top-color: #232a2a;
    padding: 1rem 1.25rem;
}

/* Backdrop */
.modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.7;
}

/* ========================================
   Dropdown Override
   ======================================== */
.dropdown-menu {
    --bs-dropdown-bg: var(--bg-panel);
    --bs-dropdown-border-color: #232a2a;
    --bs-dropdown-link-color: var(--text-high);
    --bs-dropdown-link-hover-bg: var(--bg-hover);
    --bs-dropdown-link-hover-color: var(--primary-light);
    --bs-dropdown-link-active-bg: var(--primary);
}

/* ========================================
   Toast Override
   ======================================== */
.toast {
    --bs-toast-bg: var(--bg-panel);
    --bs-toast-border-color: #232a2a;
    --bs-toast-header-bg: var(--bg-pane);
    --bs-toast-header-border-color: #232a2a;
}

/* ========================================
   Alert Override
   ======================================== */
.alert-info {
    --bs-alert-bg: var(--primary-subtle);
    --bs-alert-border-color: var(--primary-glow);
    --bs-alert-color: #7fd1d1;
}

.alert-warning {
    --bs-alert-bg: rgba(255, 193, 7, 0.15);
    --bs-alert-border-color: rgba(255, 193, 7, 0.3);
}

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

/* ========================================
   List Group Override
   ======================================== */
.list-group-item {
    background-color: transparent;
    border-color: #232a2a;
    color: var(--text-high);
}

.list-group-item-action:hover {
    background-color: var(--primary-subtle);
    color: var(--primary-light);
}

/* ========================================
   Offcanvas Override
   ======================================== */
.offcanvas {
    --bs-offcanvas-bg: var(--bg-pane);
    --bs-offcanvas-border-color: #232a2a;
}

/* ========================================
   Nav Tabs Override
   ======================================== */
.nav-tabs {
    --bs-nav-tabs-border-color: #232a2a;
    --bs-nav-tabs-link-active-bg: var(--bg-panel);
    --bs-nav-tabs-link-active-border-color: #232a2a #232a2a var(--bg-panel);
    --bs-nav-tabs-link-active-color: var(--primary-light);
}

.nav-tabs .nav-link {
    color: var(--text-subtle);
}

.nav-tabs .nav-link:hover {
    color: var(--text-high);
    border-color: transparent;
}

/* ========================================
   Focus Ring Override
   ======================================== */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* ========================================
   Utility: Teal Text
   ======================================== */
.text-teal {
    color: var(--primary) !important;
}

.text-teal-light {
    color: var(--primary-light) !important;
}

/* ========================================
   Utility: Border Dashed
   ======================================== */
.border-dashed {
    border-style: dashed !important;
}