/* BhoomiSetu Dark Theme CSS */
:root {
    /* Light theme variables */
    --primary-green: #2E7D32;
    --accent-yellow: #fefcf5;
    --light-bg: #fefcf5;
    --dark-text: #212121;
    --muted-text: #555;
    --card-bg: #ffffff;
    --navbar-bg: #ffffff;
    --border-color: #eee;
    --input-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
}

/* Dark theme variables */
[data-theme="dark"] {
    --primary-green: #4CAF50;
    --accent-yellow: #1a1a1a;
    --light-bg: #121212;
    --dark-text: #e0e0e0;
    --muted-text: #b0b0b0;
    --card-bg: #1e1e1e;
    --navbar-bg: #1f1f1f;
    --border-color: #333;
    --input-bg: #2a2a2a;
    --shadow: rgba(0, 0, 0, 0.3);
}

/* IMPORTANT: Override any inline style variables */
[data-theme="dark"]:root {
    --primary-green: #4CAF50 !important;
    --accent-yellow: #1a1a1a !important;
    --light-bg: #121212 !important;
    --dark-text: #e0e0e0 !important;
    --muted-text: #b0b0b0 !important;
    --card-bg: #1e1e1e !important;
    --navbar-bg: #1f1f1f !important;
    --border-color: #333 !important;
    --input-bg: #2a2a2a !important;
    --shadow: rgba(0, 0, 0, 0.3) !important;
}

/* Theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Global styles */
body {
    background-color: var(--light-bg) !important;
    color: var(--dark-text) !important;
}

/* Override inline styles for dark theme */
[data-theme="dark"] body {
    background-color: var(--light-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .hero {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .hero-text h1 {
    color: var(--primary-green) !important;
}

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

[data-theme="dark"] .features {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .feature-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .feature-card h3 {
    color: var(--primary-green) !important;
}

[data-theme="dark"] .feature-card p {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .btn-primary {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
}

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

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
    color: white !important;
}

/* Navbar styles */
nav, .navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

nav .logo, .navbar-brand {
    color: var(--primary-green) !important;
}

nav ul li a, .navbar-nav .nav-link {
    color: var(--dark-text) !important;
}

nav ul li a:hover, .navbar-nav .nav-link:hover {
    color: var(--primary-green) !important;
}

/* Make sure text is visible in all scenarios */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--dark-text) !important;
}

[data-theme="dark"] p {
    color: var(--muted-text) !important;
}

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

/* Override Bootstrap text colors in dark theme */
[data-theme="dark"] .text-dark {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

/* Make sure all content areas are themed */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content {
    background-color: var(--light-bg) !important;
    color: var(--dark-text) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--dark-text);
}

.card-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--dark-text);
}

.card-body {
    background-color: var(--card-bg);
    color: var(--dark-text);
}

/* ENHANCED CARD STYLING FOR DARK THEME */
[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .card-body {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card-header h5 {
    color: var(--dark-text) !important;
}

/* Forms */
.form-control {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--dark-text);
}

.form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-green);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}

.form-control::placeholder {
    color: var(--muted-text);
}

/* Enhanced form styling for dark theme */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--primary-green) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--dark-text) !important;
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--dark-text);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}

/* Additional component styles */
[data-theme="dark"] .container-fluid {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] section {
    background-color: var(--light-bg) !important;
}

/* CRITICAL: Ensure all major layout elements respect dark theme */
[data-theme="dark"] .hero,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .page-content {
    background-color: var(--light-bg) !important;
    color: var(--dark-text) !important;
}

/* Force all containers to use theme colors */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .row,
[data-theme="dark"] .col,
[data-theme="dark"] .col-* {
    background-color: transparent !important;
}

/* Ensure all text elements are visible */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div {
    color: var(--dark-text) !important;
}

/* Override any remaining white backgrounds */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-body {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .row {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .col {
    color: var(--dark-text) !important;
}

/* Footer */
[data-theme="dark"] footer {
    background-color: var(--navbar-bg) !important;
    color: var(--dark-text) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* ===== COMPREHENSIVE COMPONENT STYLING ===== */

/* CHAT INTERFACE SPECIFIC STYLING */
[data-theme="dark"] .chat-container,
[data-theme="dark"] .chat-interface,
[data-theme="dark"] .message-container,
[data-theme="dark"] .welcome-card {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .welcome-message {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .welcome-message h3 {
    color: var(--primary-green) !important;
}

[data-theme="dark"] .welcome-message p {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .message-bubble,
[data-theme="dark"] .user-message,
[data-theme="dark"] .bot-message,
[data-theme="dark"] .chat-message {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .user-message .message-bubble {
    background-color: var(--primary-green) !important;
    color: white !important;
}

[data-theme="dark"] .bot-message .message-bubble {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

/* ENHANCED CHAT COMPONENTS */
[data-theme="dark"] .glass-container {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .chat-header {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .location-status {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

/* WEATHER CARDS STYLING */
[data-theme="dark"] .weather-card,
[data-theme="dark"] .forecast-card,
[data-theme="dark"] .weather-widget {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .weather-info,
[data-theme="dark"] .forecast-item {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
}

/* Specific styling for forecast cards that appear in weather page */
[data-theme="dark"] .forecast-card h6,
[data-theme="dark"] .forecast-card .fw-bold {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .forecast-card .small,
[data-theme="dark"] .forecast-card .text-muted {
    color: var(--muted-text) !important;
}

/* Enhanced forecast card styling */
[data-theme="dark"] .forecast-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .forecast-card * {
    color: inherit !important;
}

/* PRICE TABLE STYLING */
[data-theme="dark"] .table,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .price-table {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Price badges and headers styling */
[data-theme="dark"] .table thead th {
    background-color: var(--primary-green) !important;
    color: white !important;
    border-color: var(--primary-green) !important;
}

/* Keep price badges green but make them visible */
[data-theme="dark"] .price-badge,
[data-theme="dark"] .badge-success {
    background-color: var(--primary-green) !important;
    color: white !important;
}

/* ENHANCED PRICE TABLE SPECIFIC STYLING */
[data-theme="dark"] .table tbody tr {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .table tbody tr td {
    background-color: transparent !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .bg-success {
    background-color: var(--primary-green) !important;
}

[data-theme="dark"] .text-white {
    color: white !important;
}

/* SPECIFIC OVERRIDES FOR PRICES PAGE */
[data-theme="dark"] .table tbody tr td strong {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .table-responsive .table {
    background-color: var(--card-bg) !important;
}

/* Force table elements to use dark theme */
[data-theme="dark"] table {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] thead {
    background-color: var(--primary-green) !important;
}

[data-theme="dark"] tbody {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] tr {
    background-color: transparent !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

/* DISEASE DETECTION CARDS */
[data-theme="dark"] .disease-card,
[data-theme="dark"] .detection-card,
[data-theme="dark"] .upload-card {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

/* Enhanced disease detection styling */
[data-theme="dark"] .result-card {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .result-card h5,
[data-theme="dark"] .result-card h6 {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .result-card p {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .upload-area {
    background-color: var(--input-bg) !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--dark-text) !important;
}

/* MODAL STYLING */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

/* DROPDOWN STYLING */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

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

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--primary-green) !important;
    color: white !important;
}

/* GLASS EFFECT CONTAINERS */
[data-theme="dark"] .glass-container,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .backdrop-container {
    background: rgba(30, 30, 30, 0.8) !important;
    backdrop-filter: blur(25px);
    border: 1px solid var(--border-color) !important;
    color: var(--dark-text) !important;
}

/* BOOTSTRAP COMPONENT OVERRIDES */
[data-theme="dark"] .alert {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .badge {
    background-color: var(--primary-green) !important;
    color: white !important;
}

/* FORCE ALL CONTAINERS TO USE THEME */
[data-theme="dark"] * {
    scrollbar-color: var(--border-color) var(--card-bg);
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--card-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green);
}

/* COMPREHENSIVE ELEMENT COVERAGE */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-white {
    color: var(--dark-text) !important;
}

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

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

/* Bootstrap Alert Components for Dark Theme */
[data-theme="dark"] .alert {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(76, 175, 80, 0.1) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(33, 150, 243, 0.1) !important;
    border-color: rgba(33, 150, 243, 0.3) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(76, 175, 80, 0.1) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: var(--dark-text) !important;
}

/* Content Card Specific Styling */
[data-theme="dark"] .content-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .content-card h1,
[data-theme="dark"] .content-card h2,
[data-theme="dark"] .content-card h3,
[data-theme="dark"] .content-card h4,
[data-theme="dark"] .content-card h5,
[data-theme="dark"] .content-card h6 {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .content-card p,
[data-theme="dark"] .content-card li,
[data-theme="dark"] .content-card span,
[data-theme="dark"] .content-card div {
    color: var(--dark-text) !important;
}

/* Documentation Section Specific */
[data-theme="dark"] .documentation-section {
    background: var(--card-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .documentation-section .alert {
    background: rgba(76, 175, 80, 0.1) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}

/* Ensure all child elements inherit properly */
[data-theme="dark"] .container *,
[data-theme="dark"] .row *,
[data-theme="dark"] .col * {
    color: inherit;
}

/* Force override for any remaining white backgrounds */
[data-theme="dark"] *[style*="background-color: white"],
[data-theme="dark"] *[style*="background-color: #fff"],
[data-theme="dark"] *[style*="background-color: #ffffff"],
[data-theme="dark"] *[style*="background: white"],
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background: #ffffff"] {
    background-color: var(--card-bg) !important;
}

/* Force override for any remaining black text on white */
[data-theme="dark"] *[style*="color: black"],
[data-theme="dark"] *[style*="color: #000"],
[data-theme="dark"] *[style*="color: #000000"] {
    color: var(--dark-text) !important;
}