/* =========================================
   BABY BLUE THEME OVERRIDES (PURE BLUE/DARK)
   ========================================= */
   html[data-theme="blue"] {
    --primary-color: #0d0070; /* Updated Primary */
    --secondary-color: #3f484d; /* Updated Secondary */
    --success-color: #82b704; 
    --danger-color: #a80303; /* Standard Danger Color */
    --accent-dark: #2d2f30; /* Bright white for headings on dark backgrounds */
    --accent-light: #f0f6fa; /* Secondary color used as the light accent */
    --bg-color: #71c5f0; /* Very dark slate/blue for main background 272d30*/
    --surface-color: #35abe5; /* Secondary color used for cards and surfaces 3f484d*/
    --text-main: #ffffff; /* White text for contrast */
    --text-muted: #fafcfc; /* Muted slate/blue text */
    
    color-scheme: dark;
}

/* Aggressively target main containers */
html[data-theme="blue"] body,
html[data-theme="blue"] #wrapper,
html[data-theme="blue"] #page-content-wrapper,
html[data-theme="blue"] main {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
}

/* Surfaces & Cards (Replacing white with solid secondary blue/slate) */
html[data-theme="blue"] .bg-white,
html[data-theme="blue"] .material-card,
html[data-theme="blue"] .sidebar,
html[data-theme="blue"] .info-sidebar,
html[data-theme="blue"] .app-bar,
html[data-theme="blue"] .top-utility-bar,
html[data-theme="blue"] .ticker-wrap,
html[data-theme="blue"] .list-group-item,
html[data-theme="blue"] .dropdown-menu,
html[data-theme="blue"] .modal-content,
html[data-theme="blue"] .modal-header,
html[data-theme="blue"] .modal-footer {
    background-color: var(--surface-color) !important;
    color: var(--text-main) !important;
    border-color: rgba(53, 171, 229, 0.3) !important; /* Soft primary blue border */
}

/* Slightly different background for contrast components inside surfaces */
html[data-theme="blue"] .bg-light {
    background-color: rgba(0,0,0,0.15) !important;
    color: var(--text-main) !important;
}

/* Typography Enforcement inside cards */
html[data-theme="blue"] .material-card .text-dark,
html[data-theme="blue"] .sidebar .text-dark,
html[data-theme="blue"] .info-sidebar .text-dark,
html[data-theme="blue"] .app-bar .text-dark,
html[data-theme="blue"] .top-utility-bar .text-dark,
html[data-theme="blue"] .material-card h1, 
html[data-theme="blue"] .material-card h2, 
html[data-theme="blue"] .material-card h3, 
html[data-theme="blue"] .material-card h4, 
html[data-theme="blue"] .material-card h5, 
html[data-theme="blue"] .material-card h6 {
    color: #ffffff !important;
}

/* Typography Enforcement outside cards (headers etc) */
html[data-theme="blue"] h1:not(.material-card h1), 
html[data-theme="blue"] h2:not(.material-card h2), 
html[data-theme="blue"] h3:not(.material-card h3), 
html[data-theme="blue"] h4:not(.material-card h4), 
html[data-theme="blue"] h5:not(.material-card h5), 
html[data-theme="blue"] h6:not(.material-card h6) {
    color: var(--accent-dark) !important;
}

html[data-theme="blue"] .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="blue"] .text-primary {
    color: var(--primary-color) !important;
    font-weight: bold;
}

/* Danger Class Overrides */
html[data-theme="blue"] .text-danger {
    color: var(--danger-color) !important;
}

html[data-theme="blue"] .bg-danger {
    background-color: var(--danger-color) !important;
    color: #ffffff !important;
}

html[data-theme="blue"] .btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #ffffff !important;
}

html[data-theme="blue"] .btn-outline-danger {
    color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

html[data-theme="blue"] .btn-outline-danger:hover {
    background-color: var(--danger-color) !important;
    color: #ffffff !important;
}

/* Borders and Lines */
html[data-theme="blue"] .border,
html[data-theme="blue"] .border-top,
html[data-theme="blue"] .border-bottom,
html[data-theme="blue"] .border-start,
html[data-theme="blue"] .border-end,
html[data-theme="blue"] hr {
    border-color: rgba(53, 171, 229, 0.2) !important; 
}

/* Tables */
html[data-theme="blue"] .table {
    color: var(--text-main) !important;
    border-color: rgba(53, 171, 229, 0.2) !important;
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(53, 171, 229, 0.2);
}

html[data-theme="blue"] .table-light,
html[data-theme="blue"] .table-light th,
html[data-theme="blue"] .table-light td {
    background-color: rgba(0,0,0,0.15) !important;
    color: #ffffff !important;
    border-color: rgba(53, 171, 229, 0.2) !important;
}

html[data-theme="blue"] .table-hover tbody tr:hover td {
    background-color: rgba(53, 171, 229, 0.1) !important;
    color: var(--text-main) !important;
}

/* Forms and Inputs */
html[data-theme="blue"] .form-control,
html[data-theme="blue"] .form-select,
html[data-theme="blue"] .input-group-text {
    background-color: var(--bg-color) !important; /* Make inputs stand out from surface */
    color: #ffffff !important;
    border-color: var(--surface-color) !important;
}

html[data-theme="blue"] .form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

html[data-theme="blue"] .form-control:focus,
html[data-theme="blue"] .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(53, 171, 229, 0.4) !important;
    background-color: #1c2124 !important; /* Slightly darker on focus */
}

/* Buttons & Utilities */
html[data-theme="blue"] .btn-primary,
html[data-theme="blue"] .bg-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important; 
}

html[data-theme="blue"] .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

html[data-theme="blue"] .btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme="blue"] .btn-light {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html[data-theme="blue"] .btn-light:hover {
    background-color: rgba(255,255,255,0.2) !important;
}

html[data-theme="blue"] .btn-secondary {
    background-color: #272d30 !important; /* Use main background color for contrast on surfaces */
    border-color: #272d30 !important;
    color: #ffffff !important; 
}

html[data-theme="blue"] .dropdown-item {
    color: var(--text-main) !important;
}

html[data-theme="blue"] .dropdown-item:hover {
    background-color: rgba(53, 171, 229, 0.2) !important;
    color: #ffffff !important;
}

html[data-theme="blue"] .sidebar-link.active {
    background-color: rgba(0,0,0,0.2) !important;
    color: var(--primary-color) !important;
    border-right: 4px solid var(--primary-color);
}

/* Pagination Overrides */
html[data-theme="blue"] .pagination .page-link {
    background-color: var(--surface-color) !important;
    color: #ffffff !important;
    border-color: rgba(53, 171, 229, 0.3) !important;
}

html[data-theme="blue"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme="blue"] .pagination .page-link:hover:not(.disabled) {
    background-color: rgba(0,0,0,0.2) !important;
    color: var(--primary-color) !important;
}

/* Fix text contrast on badges */
html[data-theme="blue"] .badge.bg-secondary {
    background-color: var(--bg-color) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}