/* PASTEL BUTTER YELLOW BACKGROUND */
html, body {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* Add subtle overlay for texture on butter yellow background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 251, 235, 0.3) !important;
    z-index: -1;
    pointer-events: none;
}

/* MAKE EVERYTHING TRANSPARENT BY DEFAULT (EXCEPT HTML/BODY) */
*:not(html):not(body) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card, .navbar, .container, .row, .col, div {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

/* OPAQUE WHITE ON HOVER */
.card:hover {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(30, 64, 175, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
}

.navbar:hover {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

/* Opaque white for buttons on hover */
.btn:hover {
    background: #FFFFFF !important;
    color: #1e40af !important;
    border: 1px solid rgba(30, 64, 175, 0.5) !important;
    opacity: 1 !important;
}

/* Opaque white for form controls on hover/focus */
.form-control:hover, .form-control:focus {
    background: #FFFFFF !important;
    border: 2px solid rgba(30, 64, 175, 0.6) !important;
    color: #000000 !important;
    opacity: 1 !important;
}

/* Make tabs opaque white on hover */
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    background: #FFFFFF !important;
    color: #1e40af !important;
    border-color: rgba(30, 64, 175, 0.3) !important;
    opacity: 1 !important;
}

/* MAKE ALL TEXT DARK BOLD BLACK */
* {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

p, span, div, a, label, button, input, textarea, select {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.nav-link, .navbar-brand, .btn {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Make text readable on hover */
.card:hover * {
    color: #000000 !important;
    font-weight: 900 !important;
}

.navbar:hover * {
    color: #000000 !important;
    font-weight: 900 !important;
}

/* UNIVERSAL OPAQUE WHITE HOVER FOR ALL INTERACTIVE ELEMENTS - ULTRA SPECIFIC */
.tab-pane:hover,
.tab-content:hover,
.dropdown-menu .dropdown-item:hover,
.list-group-item:hover,
.accordion-button:hover,
.breadcrumb-item:hover,
.pagination .page-link:hover,
.badge:hover,
.alert:hover,
.modal-content:hover,
.form-select:hover,
.input-group:hover,
.table-hover tbody tr:hover,
.login-option:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* SPECIFIC TEMPLATE HOVER OVERRIDES - MAXIMUM PRIORITY */
.feature-card:hover,
.dashboard-container .feature-card:hover,
div.feature-card:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

.action-card:hover,
.dashboard-container .action-card:hover,
div.action-card:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1) !important;
}

.stat-card:hover,
.dashboard-container .stat-card:hover,
div.stat-card:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mode-card:hover,
.mode-selection-container .mode-card:hover,
div.mode-card:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 50px rgba(76, 175, 80, 0.2) !important;
}

.glass-panel:hover,
div.glass-panel:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pill-button:hover,
.dashboard-container .pill-button:hover,
button.pill-button:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px) !important;
}

.select-mode-btn:hover,
button.select-mode-btn:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* MODE-SPECIFIC HOVER OVERRIDES - GERIATRIC MODE */
.geriatric-btn:hover,
button.geriatric-btn:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--lavender) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(221, 160, 221, 0.4) !important;
}

.feature-card-geriatric:hover,
div.feature-card-geriatric:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(221, 160, 221, 0.2) !important;
}

/* MODE-SPECIFIC HOVER OVERRIDES - PEDIATRIC MODE */
.pediatric-btn:hover,
button.pediatric-btn:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--accent-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 217, 61, 0.4) !important;
}

.feature-card-pediatric:hover,
div.feature-card-pediatric:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(255, 217, 61, 0.2) !important;
}

/* MODE-SPECIFIC HOVER OVERRIDES - PREGNANCY MODE */
.pregnant-btn:hover,
button.pregnant-btn:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--primary-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4) !important;
}

.feature-card-pregnant:hover,
div.feature-card-pregnant:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(255, 107, 157, 0.2) !important;
}

/* MODE-SPECIFIC HOVER OVERRIDES - OTHERS/GENERAL MODE */
.others-btn:hover,
button.others-btn:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--secondary-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(168, 230, 207, 0.4) !important;
}

.feature-card-others:hover,
div.feature-card-others:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(168, 230, 207, 0.2) !important;
}

/* UNIVERSAL UPLOAD BUTTON HOVER */
.upload-btn:hover,
label.upload-btn:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

/* UPLOAD SECTION HOVER - ALL MODES */
.upload-section:hover,
div.upload-section:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.upload-option:hover,
div.upload-option:hover {
    background: #FFFFFF !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}