/* static/css/modern.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Light grey background */
    color: #333; /* Dark grey text for readability */
    font-size: 16px;
}

a {
    color: #007bff; /* Modern blue for links */
    text-decoration: none;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* ===================================================================
 * modern.css
 * =================================================================== */

/* General Styles & Variables
 * ------------------------------------------------------------------- */
:root {
    /* Base & General */
    --header-height: 60px; /* Reduced header height */
    --border-radius: 6px;
    --border-radius-large: 12px; /* For larger elements like chart containers */

    /* Light Theme Defaults (can be overridden by body.light-theme) */
    --background-color: #f8f9fa; /* Light grey background */
    --text-color: #212529; /* Dark grey text */
    --primary-color: #007bff; /* Vibrant Blue */
    --primary-color-rgb: 0, 123, 255; /* RGB version for rgba() */
    --secondary-color: #6c757d; /* Muted Grey */
    --border-color: #dee2e6; /* Light grey border */
    --header-bg: #ffffff; /* White header */
    --card-bg: #ffffff; /* White cards */
    --card-shadow: 0 2px 4px rgba(0,0,0,0.05);
    --section-bg: #f8f9fa;
    --chart-container-bg: #ffffff;
    --axis-text-color: #495057;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --button-text-color: #ffffff;
    --button-bg-color: #007bff; /* Added for general buttons */
    --input-bg-color: #ffffff; /* Added for form inputs */
    --input-border-color: #ced4da; /* Added for form inputs */
    --input-text-color: #495057; /* Added for form inputs text */

    /* Modal Specific Colors - Light Theme */
    --modal-header-bg: #6c757d; /* Muted Grey */
    --modal-header-text-color: #ffffff;
    --modal-button-bg-color: #6c757d;
    --modal-button-text-color: #ffffff;
    --modal-button-hover-bg-color: #5a6268; /* Darker Grey */
    --modal-close-button-color: #ffffff;

    /* Light Theme Specific Chart & Progress Bar Colors */
    --apex-series-color-power: #007bff;       /* Blue for Power */
    --apex-series-color-voltage: #28a745;     /* Green for Voltage */
    --progress-bar-amps-color: #ffc107;       /* Amber for Amps */
    --progress-bar-netpower-export-color: #dc3545; /* Red for Export */
    --progress-bar-netpower-balanced-color: #ffc107; /* Amber for Balanced */
    --progress-bar-netpower-import-color: #28a745;   /* Green for Import */
    --progress-bar-text-color: #212529; /* Dark text on light progress bars */

    /* Stats cards specific theming (can be different from general cards) */
    --stats-card-bg: #ffffff;
    --stats-card-border-color: #e9ecef;

    --modal-background-light: #ffffff;
    --modal-text-light: #333333;
    --button-primary-bg-light: #007bff;
    --button-primary-text-light: #ffffff;
    --button-secondary-bg-light: #6c757d;
    --button-secondary-text-light: #ffffff;
    /* ... other light theme colors ... */

    --modal-background-dark: #333333;
    --modal-text-dark: #f1f1f1;
    --button-primary-bg-dark: #0056b3;
    --button-primary-text-dark: #ffffff;
    --button-secondary-bg-dark: #545b62;
    --button-secondary-text-dark: #ffffff;
    /* ... other dark theme colors ... */    

    /* Support Dialog Specific Colors - Light Theme */
    --support-modal-bg-light: #ffffff;
    --support-modal-text-light: #333333;
    --support-modal-header-bg-light: #f0f0f0;
    --support-modal-header-text-light: #333333;
    --support-modal-link-color-light: #007bff;
    --support-modal-close-btn-color-light: #aaaaaa;
    --support-modal-close-btn-hover-color-light: #777777;
    --support-modal-border-color-light: #dee2e6;

    /* Support Dialog Specific Colors - Dark Theme */
    --support-modal-bg-dark: #2c2c2c;
    --support-modal-text-dark: #e0e0e0;
    --support-modal-header-bg-dark: #383838;
    --support-modal-header-text-dark: #e0e0e0;
    --support-modal-link-color-dark: #00aaff;
    --support-modal-close-btn-color-dark: #bbbbbb;
    --support-modal-close-btn-hover-color-dark: #eeeeee;
    --support-modal-border-color-dark: #444444;
}

body {
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.light-theme {
    --background-color: #f8f9fa;
    --text-color: #212529;
    --primary-color: #007bff;
    --secondary-color: #5a6268; /* Slightly darker secondary for better contrast */
    --border-color: #ced4da; /* Slightly darker border */
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --card-shadow: 0 3px 6px rgba(0,0,0,0.07); /* Slightly more pronounced shadow */
    --section-bg: #f8f9fa;
    --chart-container-bg: #ffffff;
    --axis-text-color: #495057;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --button-text-color: #ffffff;
    --button-bg-color: #007bff;
    --input-bg-color: #ffffff;
    --input-border-color: #ced4da;
    --input-text-color: #495057; /* Added for form inputs text */

    --apex-series-color-power: #007bff;
    --apex-series-color-voltage: #28a745;
    --progress-bar-amps-color: #ffc107;
    --progress-bar-netpower-export-color: #dc3545;
    --progress-bar-netpower-balanced-color: #ffc107;
    --progress-bar-netpower-import-color: #28a745;
    --progress-bar-text-color: #212529;

    --stats-card-bg: #ffffff;
    --stats-card-border-color: #dee2e6;
}

body.dark-theme {
    --background-color: #1a1a1a; /* Darker background */
    --text-color: #e0e0e0; /* Lighter grey text */
    --primary-color: #00aaff; /* Brighter Blue for dark mode */
    --primary-color-rgb: 0, 170, 255; /* RGB version for rgba() */
    --secondary-color: #909090; /* Lighter muted Grey */
    --border-color: #444444; /* Darker border */
    --header-bg: #2c2c2c; /* Dark grey header */
    --card-bg: #2c2c2c; /* Dark grey cards */
    --card-shadow: 0 3px 6px rgba(0,0,0,0.25); /* Shadow adapted for dark */
    --section-bg: #1a1a1a;
    --chart-container-bg: #2c2c2c;
    --axis-text-color: #bbbbbb; /* Lighter axis text */
    --link-color: #00aaff;
    --link-hover-color: #0088cc;
    --button-text-color: #ffffff; /* Text on primary buttons */
    --button-bg-color: #00aaff;
    --input-bg-color: #333333; /* Darker input background */
    --input-border-color: #555555; /* Darker input border */
    --input-text-color: #e0e0e0; /* Lighter input text */

    /* Modal Specific Colors - Dark Theme */
    --modal-header-bg: #495057; /* Darker Grey for dark theme */
    --modal-header-text-color: #e9ecef;
    --modal-button-bg-color: #495057;
    --modal-button-text-color: #e9ecef;
    --modal-button-hover-bg-color: #343a40; /* Even Darker Grey */
    --modal-close-button-color: #e9ecef;

    /* Dark Theme Specific Chart & Progress Bar Colors */
    --apex-series-color-power: #00aaff;        /* Brighter Blue for Power */
    --apex-series-color-voltage: #33cc66;      /* Brighter Green for Voltage */
    --progress-bar-amps-color: #ffcc33;        /* Brighter Amber for Amps */
    --progress-bar-netpower-export-color: #ff6666;  /* Brighter Red for Export */
    --progress-bar-netpower-balanced-color: #ffcc33;/* Brighter Amber for Balanced */
    --progress-bar-netpower-import-color: #33cc66;    /* Brighter Green for Import */
    --progress-bar-text-color: #121212; /* Dark text on lighter progress bars in dark mode */

    /* ApexCharts general colors for dark theme */
    --apex-chart-color-1: var(--apex-series-color-power); /* Use series color if appropriate or define new */
    --apex-chart-color-2: var(--apex-series-color-voltage);
    --apex-chart-color-3: #f02fc2; /* Example, adjust as needed */
    --apex-gradient-to-1: #008bcc; /* Darker shade of primary for gradient */
    --apex-gradient-to-2: #29a352; /* Darker shade of secondary for gradient */
    --apex-gradient-to-3: #c725a0; /* Darker shade for third color */

    --stats-card-bg: #2c2c2c;
    --stats-card-border-color: #444444;
}

/* Header Styles */
.s-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height); /* Use variable */
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color); /* Use themed border color */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Changed from flex-start */
    padding: 0 20px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-left-content { /* New wrapper for logo and title */
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
}

.header-logo {
    flex-shrink: 0;
    margin-right: 15px; /* Adjusted space after logo */
}

.header-logo img {
    max-height: calc(var(--header-height) - 20px); /* Reverted to original dynamic height */
    width: auto;
    display: block;
}

.header-title-container {
    flex-grow: 1; /* Allow this to take up space and center its content */
    text-align: center;
    font-size: 1.1em; /* Adjust as needed */
    font-weight: 500; /* Adjust as needed */
    color: var(--text-color);
}

.header-title-container img {
    max-height: calc(var(--header-height) - 30px); /* Made slightly smaller */
    width: auto;
    display: block;
    transition: filter 0.3s ease; 
}

.header-site-name-container {
    flex-grow: 1; 
    text-align: center;
    font-size: 1.2em; /* Made slightly larger */
    font-weight: bold; 
    color: var(--text-color);
    margin: 0 15px;
    transition: color 0.3s ease; /* Added for smooth color transition */
}

/* #locationId will inherit color from .header-site-name-container */

.header-right-content { /* New wrapper for nav and toggle */
    display: flex;
    align-items: center; /* was center */
    flex-shrink: 0; /* Prevent shrinking */
}

.header-nav {
    /* margin-left: auto; Removed, as justify-content: space-between on parent handles spacing */
    margin-left: auto;
    display: flex; 
    align-items: center; /* was center */
}

/* .header-nav__close { */ /* This was an empty ruleset or a duplicate, ensure it's correctly placed or removed if not needed */

.header-nav__content {
    display: flex; /* Make this a flex container */
    align-items: center; /* Align its children (list and switcher) vertically */
    flex-wrap: wrap; /* Allow items to wrap to prevent cutoff */
    justify-content: flex-end; /* Align items to the end (right), useful for wrapped items */
}

/* .s-header .header-nav__list { */ /* This was an empty ruleset or a duplicate, ensure it\'s correctly placed or removed if not needed */

.s-header .header-nav__list {
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default margins */
    display: flex;
    align-items: center; 
    flex-shrink: 1; 
    min-width: 0; /* Added to prevent flex item from growing too large */
}

.s-header .header-nav__list li {
    margin-right: 10px; 
    white-space: nowrap; 
}

.s-header .header-nav__list li:last-child {
    margin-right: 0; 
}

.s-header .header-nav__list a {
    font-weight: 500;
    color: var(--text-color); /* Use themed text color */
    transition: color 0.3s ease;
}

.s-header .header-nav__list a:hover,
.s-header .header-nav__list .current a {
    color: var(--primary-color); /* Highlight color for active/hover links */
}

.header-menu-toggle {
    display: none; /* Will be shown for mobile via media queries */
    color: var(--text-color); /* Use themed text color */
    font-size: 24px;
    cursor: pointer;
}

/* Main Content Section (e.g., s-home) */
.s-home {
    padding-top: var(--header-height); /* Adjust padding to account for fixed header */
    padding: 60px 20px;
    text-align: center;
    background-color: var(--section-bg) !important; /* USE THEMED VARIABLE */
    min-height: calc(100vh - 150px); /* Adjust based on header/footer height */
}

/* New class for the Ergon balance container */
.ergon-balance-container {
    text-align: right;
}

/* #home .overlay, #home .shadow-overlay { */ /* This was an empty ruleset or a duplicate */


.home-content__main h2 {
    font-size: 3rem;
    color: var(--primary-color) !important; /* USE THEMED VARIABLE */
    margin-bottom: 10px;
}

.home-content__main h3 {
    font-size: 1.5rem;
    color: var(--secondary-color) !important; /* USE THEMED VARIABLE */
    margin-bottom: 30px;
}

/* New class for the main kWh container */
.main-kwh-container {
    text-align: center;
}

/* Stats Section */
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive grid */
    gap: 30px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    /* No background color here, individual cards will have it */
}

.stats__col {
    background-color: var(--card-bg); /* USE THEMED VARIABLE */
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--card-shadow); /* USE THEMED VARIABLE */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    border: 1px solid var(--border-color); /* Added themed border */
}

.stats__col:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.stats__col div[id] { /* Targeting the divs holding the stat numbers */
    font-size: 3.5rem !important; /* Override inline font size */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; /* Override inline font family */
    font-weight: bold;
    color: var(--primary-color) !important; /* USE THEMED VARIABLE */
    margin-bottom: 5px;
}

.stats__col h5 { /* Sub-text for stats */
    font-size: 1rem;
    color: var(--secondary-color) !important; /* USE THEMED VARIABLE */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stats__col h1 { /* Unit for stats */
    font-size: 1.2rem;
    color: var(--text-color) !important; /* USE THEMED VARIABLE */
    margin-top: 0;
}

/* New classes for stats ratios */
.stats-ratios-amps {
    margin-top: 8px; /* Reduced from 10px */
}

.stats-ratios-title {
    margin-top: 1px;
}

/* Stats section charts */
.stats-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center; 
    background-color: var(--stats-card-bg); /* Variable already in use, ensure it's themed */
    border: 1px solid var(--stats-card-border-color); /* Variable already in use, ensure it's themed */
    border-radius: var(--border-radius-large, 12px); 
    padding: 6px 15px; /* Adjusted top/bottom padding from 8px to 6px */
    /* min-height: 220px; */ /* Removed to allow content to dictate height */
    box-shadow: var(--card-shadow, 0 4px 8px rgba(0,0,0,0.1)); /* Use themeable shadow if available */
    /* transition: background-color 0.3s ease, border-color 0.3s ease; */ /* Smooth transition DISABLED */
}

#progress_amps_chart,
#progress_net_power_chart {
    width: 100%; /* Charts take full width of their container */
    max-width: 280px; /* Max width for these smaller charts */
    min-height: 40px; /* Increased from 30px to accommodate thicker bars */
    margin-bottom: 4px; /* Adjusted space for amps chart from 6px to 4px */
    /* background color for charts is handled by ApexCharts options or can be transparent */
}

#progress_net_power_chart {
    margin-bottom: 0; /* No margin at the bottom of the last chart */
}

.stats-ratios-title { /* This is the main title "AMPS / NET POWER" */
    text-align: center;
    margin-bottom: 6px; /* Adjusted bottom margin from 8px to 6px */
    color: var(--text-color);
    font-size: 0.9em; /* Reduced font size from 1.0em */
    font-weight: 500; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* transition: color 0.3s ease; */ /* Smooth transition for text color DISABLED */
}

/* Readings Section (for Line Chart) */
.s-readings {
    padding: 40px 0; 
    background-color: var(--section-bg); /* USE THEMED VARIABLE, e.g. section-bg or background-color */
    /* display: block; by default, or control via JS */
}

.s-readings .row {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px; 
}

#linechart-container {
    /* Styles for the container if needed, like margins */
    margin-top: 30px; /* Example margin */
}

#linechart {
    width: 100%;
    min-height: 600px;
    padding: 15px; /* Padding inside the chart card */
    background-color: var(--chart-container-bg);
    border-radius: var(--border-radius-large);
    box-shadow: var(--card-shadow);
}

/* Basic ApexCharts theme adjustments */
.apexcharts-canvas .apexcharts-text {
    fill: var(--text-color) !important;
}

.apexcharts-title-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-legend-text {
    fill: var(--text-color) !important; 
    /* transition: fill 0.3s ease; */ /* Smooth transition DISABLED */
}

.apexcharts-xaxis text,
.apexcharts-yaxis text {
    fill: var(--axis-text-color) !important; /* USE THEMED VARIABLE */
    /* transition: fill 0.3s ease; */ /* Smooth transition DISABLED */
}

.apexcharts-tooltip {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Connect Wallet Button Styles */
.connect-wallet-button {
    background-color: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 15px; /* Space from the theme switcher or last nav item */
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.connect-wallet-button:hover {
    background-color: var(--link-hover-color); /* Darken on hover */
    transform: translateY(-1px); /* Slight lift on hover */
}

.connect-wallet-button:active {
    transform: translateY(0px); /* Push down on click */
}

/* Theme Switcher Styles */
.theme-switcher-container {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Adjust as needed */
}

.theme-switcher-container span {
    margin-left: 8px; /* Space between switch and text */
    font-size: 0.9em;
}

#theme-checkbox {
    display: none; /* Hide the actual checkbox */
}

.theme-label {
    display: block;
    width: 50px; /* Width of the switch */
    height: 26px; /* Height of the switch */
    background-color: #ccc; /* Background of the switch when off */
    border-radius: 13px; /* Make it rounded */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-label::before {
    content: "";
    display: block;
    width: 22px; /* Diameter of the knob */
    height: 22px; /* Diameter of the knob */
    background-color: white; /* Color of the knob */
    border-radius: 50%; /* Make it circular */
    position: absolute;
    top: 2px; /* Positioning of the knob */
    left: 2px; /* Positioning of the knob */
    transition: transform 0.3s ease;
}

#theme-checkbox:checked + .theme-label {
    background-color: #4CAF50; /* Background of the switch when on (e.g., green) */
    /* Or use your theme's primary color, e.g., var(--primary-color) if defined */
}

#theme-checkbox:checked + .theme-label::before {
    transform: translateX(24px); /* Move the knob to the right */
}

/* Optional: Style for when the body has dark mode enabled */
body.dark-mode .theme-label {
    background-color: #555; /* Darker track for dark mode */
}

body.dark-mode #theme-checkbox:checked + .theme-label {
    background-color: #66bb6a; /* A slightly different on-color for dark mode if needed */
}

body.dark-mode .theme-label::before {
    background-color: #e0e0e0; /* Knob color in dark mode */
}

/* Mobile Menu Styles (Basic Example) */
@media screen and (max-width: 768px) {
    .s-header .header-nav {
        /* Styles to hide or change nav for mobile, e.g., position absolute, transform */
        display: none; /* Initially hidden */
        position: absolute;
        left: 0;
        top: var(--header-height);
        width: 100%;
        background-color: var(--header-bg);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .s-header .header-nav.is-visible {
        display: block; /* Show when toggled */
    }

    .s-header .header-nav__list {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px;
    }

    .s-header .header-nav__list li {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
    }
    .s-header .header-nav__list li a {
        display: block;
        padding: 5px 0;
    }

    .header-menu-toggle {
        display: block; /* Show hamburger icon */
        margin-left: auto; /* Push it to the right */
    }

    .theme-switcher-container {
        margin-left: 0;
        padding: 10px 20px; /* Add padding if nav is column-based */
        justify-content: flex-start;
    }
    .header-nav__content {
        flex-direction: column; /* Stack nav list and theme switcher */
        align-items: flex-start;
    }
}

/* W3.CSS Based Modal Styles (for siteDialogModal) */
.w3-modal {
    z-index: 1003; /* Higher than header, lower than appModal if needed */
    display: none;
    padding-top: 50px; /* Reduced from 100px */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Slightly darker overlay, consistent with app-modal */
}

.w3-modal-content {
    margin: auto;
    background-color: #ffffff; /* Consistent with app-modal (template) */
    color: #2c3e50; /* Consistent with app-modal (template) */
    position: relative;
    padding: 0; /* Padding will be handled by .w3-container */
    outline: 0;
    border: 1px solid #dddddd; /* Consistent with app-modal (template) */
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Consistent with app-modal */
    width: 80%;
    max-width: 500px; /* Max width for the dialog */
}

.w3-container {
    padding: 20px; /* Increased padding for content areas */
}

/* Header and Footer specific styling for .w3-modal */
.w3-modal-content > .w3-container:first-child,
.w3-modal-content > .w3-container:last-child {
    background-color: #ffffff; /* Header/Footer background same as content */
    color: #2c3e50; /* Header/Footer text color */
    padding-top: 16px;
    padding-bottom: 16px;
}

.w3-modal-content > .w3-container:first-child h2,
.w3-modal-content > .w3-container:first-child h3 {
    margin-top: 0;
    margin-bottom: 20px; /* Consistent with appModalBody */
    color: #2c3e50; /* Ensure title color matches */
    /* Font size will be inherited or can be set if needed, 
       assuming h2/h3 default sizes are acceptable or match appModalBody implicitly.
       If specific font-size like in appModalBody is needed for h2, add here. E.g., font-size: 1.5em; */
}

/* Remove modal-header-footer-bg as it's no longer needed for distinct background */
/* .modal-header-footer-bg {
    background-color: var(--modal-header-bg); 
    color: var(--modal-header-text-color);
} */

.w3-display-topright {
    position: absolute;
    right: 15px; /* Adjusted position */
    top: 10px; /* Adjusted position */
    padding: 0 !important; /* Remove padding for direct styling of button */
    font-size: 28px; /* Consistent with app-modal-close-btn */
    font-weight: bold;
    color: #aaaaaa; /* Consistent with app-modal-close-btn */
    background-color: transparent !important; /* Ensure no button background */
    border: none; /* Ensure no button border */
}

.w3-display-topright:hover,
.w3-display-topright:focus {
    color: #777777 !important; /* Consistent with app-modal-close-btn hover */
    background-color: transparent !important;
    text-decoration: none;
}

/* Remove .w3-button specific styling if not broadly used, or make more specific */
/* .w3-button { ... } */

/* Remove .w3-hover-red as it's replaced by specific close button styling */
/* .w3-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important; 
} */

.w3-hover-opacity:hover {
    opacity: 0.60;
}

/* Animation for the modal */
.w3-animate-top {
    position: relative;
    animation: animatetop 0.4s;
}
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

/* Custom select styling for the dialog */
.custom-select {
    display: block;
    width: 100%;
    padding: 12px; /* Consistent with app-modal inputs */
    font-size: 1em; /* Consistent with app-modal inputs */
    font-weight: 400;
    line-height: 1.5;
    color: #495057; /* Consistent with app-modal inputs */
    background-color: #ffffff; /* Consistent with app-modal inputs */
    background-clip: padding-box;
    border: 1px solid #cccccc; /* Consistent with app-modal inputs */
    border-radius: var(--border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-bottom: 1em; /* Consistent with app-modal inputs */
    box-sizing: border-box;
}

/* Styling for the confirm button in the dialog */
#btn-select-confirm {
    width: 100%; /* Full width like app-modal buttons */
    padding: 12px; /* Consistent padding */
    background-color: #16a085; /* Teal background from template */
    color: #ffffff; /* White text from template */
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1em; /* Consistent with appModalBody button */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 0.5em; /* Adjusted margin */
    display: inline-block; /* Ensure it behaves like a button */
    text-align: center;
}

#btn-select-confirm:hover {
    background-color: #138d75; /* Slightly darker teal for hover */
}

/* Add a general rule for labels if siteDialogModal uses them, similar to appModalBody label */
.w3-modal-content .w3-container label {
    display: block;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 500;
    color: #2c3e50; /* Consistent with appModalBody label */
    /* font-size: 1em; /* Or match appModalBody label font-size if it's specific */
}

/* App Modal Styles (for Funding/Withdrawal) */
.app-modal {
    z-index: 1002; /* Ensure it\\'s above other content but potentially below a super-modal if any */
    display: none; /* Hidden by default */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if content overflows */
    background-color: rgba(0,0,0,0.6); /* Slightly darker overlay */
    padding-top: 60px; /* Space from top, adjust as needed */
}

.app-modal-support-content { /* Reverted to original for general/funding modal */
    background-color: #ffffff; /* Always white like template */
    color: #2c3e50; /* Default text color inside modal, from template h1 */
    margin: auto; /* Center horizontally */
    padding: 25px; /* Original padding for modals like funding/withdrawal */
    border: 1px solid #dddddd; /* Light grey border, softer than var(--border-color) */
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* More pronounced shadow */
    width: 90%;
    max-width: 800px; /* Adjusted max-width */
    position: relative; /* For positioning the close button */
    animation: appModalSlideIn 0.4s ease-out; /* Custom animation */
}



.app-modal-content { /* Reverted to original for general/funding modal */
    background-color: #ffffff; /* Always white like template */
    color: #2c3e50; /* Default text color inside modal, from template h1 */
    margin: auto; /* Center horizontally */
    padding: 25px; /* Original padding for modals like funding/withdrawal */
    border: 1px solid #dddddd; /* Light grey border, softer than var(--border-color) */
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* More pronounced shadow */
    width: 90%;
    max-width: 550px; /* Adjusted max-width */
    position: relative; /* For positioning the close button */
    animation: appModalSlideIn 0.4s ease-out; /* Custom animation */
}

@keyframes appModalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.app-modal-close-btn { /* Reverted to original for general/funding modal */
    color: #aaaaaa; /* Light grey for close button on white background */
    position: absolute;
    top: 15px; /* Adjusted position */
    right: 20px; /* Adjusted position */
    font-size: 28px; /* Larger close button */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.app-modal-close-btn:hover,
.app-modal-close-btn:focus { /* Reverted to original for general/funding modal */
    color: #777777; /* Darker grey hover for close button */
    text-decoration: none;
}

/* REMOVED general .app-modal-header, .app-modal-body, .app-modal-footer styles from here. */
/* They will be added specifically for #readingsStatsModal below. */

/* Styles for elements within the app modal, inspired by modal_template.html */
/* These styles target #appModalBody specifically, used by Withdrawal/Funding modals */
#appModalBody h2, #appModalBody h3 {
    text-align: center;
    color: #2c3e50; /* Template h1 color */
    margin-top: 0;
    margin-bottom: 20px; /* Increased bottom margin */
    /* Example: font-size: 1.5em; for h2, adjust as needed */
}

#appModalBody label {
    display: block;
    margin-top: 1em;
    margin-bottom: 0.5em; /* Added bottom margin */
    font-weight: 500;
    color: #2c3e50; /* Consistent with header text color */
    /* font-size: 1em; /* Example, adjust if needed */
}

#appModalBody input[type="text"],
#appModalBody input[type="number"],
#appModalBody input[type="password"],
#appModalBody select {
    width: 100%;
    padding: 12px; /* Increased padding */
    margin-top: 0.3em;
    margin-bottom: 1em; /* Added bottom margin */
    border-radius: var(--border-radius);
    border: 1px solid #cccccc; /* Template input border color */
    background-color: #ffffff; /* Template input background color */
    color: #495057; /* Standard dark grey for input text */
    font-size: 1em;
    box-sizing: border-box; /* Ensure padding doesn't expand width */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#appModalBody input[type="text"]:focus,
#appModalBody input[type="number"]:focus,
#appModalBody input[type="password"]:focus,
#appModalBody select:focus {
    border-color: #16a085; /* Teal color from template button */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(22, 160, 133, 0.25); /* Teal focus ring */
}

#appModalBody button {
    margin-top: 1.5em; /* Increased top margin */
    width: 100%;
    padding: 12px; /* Consistent padding */
    background-color: #16a085; /* Teal background from template */
    color: #ffffff; /* White text from template */
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#appModalBody button:hover {
    background-color: #138d75; /* Slightly darker teal for hover */
}

#appModalBody button:disabled {
    background-color: #aaaaaa; /* Grey background from template for disabled */
    color: #ffffff; /* White text for disabled button */
    opacity: 1; /* Ensure full opacity as per template's disabled style */
    cursor: not-allowed;
}

/* Status/Message styling within modal from template */
.app-modal-status {
    margin-top: 1em;
    padding: 1em;
    border-radius: var(--border-radius);
    font-size: 0.95em;
    text-align: center;
}

.app-modal-status.error {
    background-color: #fff0f0; /* Template error background */
    color: #c0392b; /* Template error text color */
}

.app-modal-status.success {
    background-color: #e8fff0; /* Template success background */
    color: #16856a; /* Template success text color */
}

.app-modal-status.info {
    background-color: #f0f9f7; /* Template info background */
    color: #16856a; /* Template info text color */
}

/* Link styling within modal from template */
#appModalBody a {
    color: #2980b9; /* Template link color */
    text-decoration: underline;
}

#appModalBody a:hover {
    color: #1f618d; /* Darker blue for hover */
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 24px; /* Adjusted size */
    height: 24px; /* Adjusted size */
    border-radius: 50%;
    border-left-color: #09f; /* Example color */
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* General modal structure - adjust as per your existing modal CSS */
.custom-modal-content {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.custom-modal-buttons {
    margin-top: 20px;
    text-align: right;
}

.modal-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-left: 10px;
}

/* Light Theme Styles */
body.theme-light .custom-modal-content {
    background-color: var(--modal-background-light);
    color: var(--modal-text-light);
}

body.theme-light .modal-button.primary {
    background-color: var(--button-primary-bg-light);
    color: var(--button-primary-text-light);
}

body.theme-light .modal-button.secondary {
    background-color: var(--button-secondary-bg-light);
    color: var(--button-secondary-text-light);
}

/* Dark Theme Styles */
body.theme-dark .custom-modal-content {
    background-color: var(--modal-background-dark);
    color: var(--modal-text-dark);
}

body.theme-dark .modal-button.primary {
    background-color: var(--button-primary-bg-dark);
    color: var(--button-primary-text-dark);
}

body.theme-dark .modal-button.secondary {
    background-color: var(--button-secondary-bg-dark);
    color: var(--button-secondary-text-dark);
}

/* Token Menu Text Styling */
.token-menu-text,
.token-menu-text a,
a.token-menu-text {
    font-weight: bold !important;
    cursor: default !important;
    text-decoration: none !important;
    color: var(--text-color); /* Default to light theme text color */
}

.token-menu-text:hover,
.token-menu-text a:hover,
a.token-menu-text:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    color: var(--text-color); /* Maintain text color on hover */
}

body.dark-theme .token-menu-text,
body.dark-theme .token-menu-text a,
body.dark-theme a.token-menu-text {
    color: var(--text-color); /* This will use the --text-color defined in body.dark-theme */
}

body.dark-theme .token-menu-text:hover,
body.dark-theme .token-menu-text a:hover,
body.dark-theme a.token-menu-text:hover {
    color: var(--text-color); /* Maintain dark theme text color on hover */
}

/* Styles for User Control Console Modal (readingsStatsModal) */
/* These styles are now specific to the #readingsStatsModal */
#readingsStatsModal .app-modal-content {
    background-color: var(--card-bg, #ffffff);
    color: var(--text-color, #2c3e50);
    padding: 0; /* Padding will be handled by header, body, footer */
    border: 1px solid var(--border-color, #dddddd);
    /* Common properties inherited or overridden by more specific #readingsStatsModal .app-modal-content below */
    margin: auto;
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 900px; /* Increased size */
    position: relative;
    animation: appModalSlideIn 0.4s ease-out; /* Custom animation */
}

#readingsStatsModal .app-modal-close-btn {
    color: var(--text-color-muted, #aaaaaa);
    position: absolute;
    top: 15px; /* Adjusted position */
    right: 20px; /* Adjusted position */
    font-size: 28px; /* Larger close button */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

#readingsStatsModal .app-modal-close-btn:hover,
#readingsStatsModal .app-modal-close-btn:focus {
    color: var(--text-color, #777777);
    text-decoration: none;
}

#readingsStatsModal .app-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color, #dee2e6); /* Use main border-color for light theme */
    display: flex;
    justify-content: flex-start; /* Changed from space-between */
    align-items: center;
    color: inherit; 
    background-color: var(--header-footer-bg, transparent); /* Variable for header/footer background */
}

#readingsStatsModal .app-modal-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: inherit; 
    margin-right: 10px; /* Add some space between title and LED */
}

#readingsStatsModal .status-led {
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Makes it round */
    background-color: silver; /* Default solid color */
    display: inline-block;
    vertical-align: middle; /* Align with the title text */
    /* margin-left: 10px; Already handled by margin-right on h2 */
}

@keyframes blinkGreen {
    0% { background-color: var(--led-dark-green, #006400); }
    50% { background-color: var(--led-light-green, #90EE90); }
    100% { background-color: var(--led-dark-green, #006400); }
}

#readingsStatsModal .status-led.blinking {
    animation: blinkGreen 1s infinite;
}

#readingsStatsModal .app-modal-body {
    /* padding is handled by #readingsStatsModalBody ID selector below */
    color: inherit; 
}

#readingsStatsModal .app-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color, #dee2e6); /* Use main border-color for light theme */
    text-align: right;
    background-color: var(--header-footer-bg, transparent); /* Variable for header/footer background */
}

/* Styles for the new controls in User Control Console, scoped to this modal */
#readingsStatsModal .console-controls-grid {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between rows */
    margin-top: 15px; /* Add some space from the header or previous content */
    padding: 5px; /* Small padding for the grid itself */
}

#readingsStatsModal .console-row {
    display: flex;
    align-items: flex-end; /* Align items based on their baseline, good for inputs and labels below */
    gap: 15px; /* Space between items in a row */
    flex-wrap: wrap; /* Allow wrapping if space is tight */
}

#readingsStatsModal .console-row.center-align { /* Utility class for rows needing center alignment */
    align-items: center;
}

#readingsStatsModal .console-row .console-field-group { /* Wrapper for input + label */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow field groups to grow */
}

#readingsStatsModal .console-col-3 {
    flex-basis: 0; /* Start with no basis, grow according to flex-grow */
    flex-grow: 3; /* Takes 3 units of space */
    min-width: 120px; /* Minimum width to prevent excessive squishing */
}

#readingsStatsModal .console-col-6 {
    flex-basis: 0;
    flex-grow: 6; /* Takes 6 units of space */
    min-width: 200px;
}

#readingsStatsModal .console-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: var(--border-radius, 4px);
    background-color: var(--input-bg, var(--card-bg, #fff));
    color: var(--text-color, #333);
    font-size: 0.9em;
    box-sizing: border-box;
}

#readingsStatsModal .console-input:focus {
    border-color: var(--primary-color, #16a085);
    outline: none;
    box-shadow: 0 0 1px var(--primary-color, #16a085);
}

#readingsStatsModal .console-label {
    display: block;
    font-size: 0.75em; /* Small font */
    font-weight: bold; /* Bold font */
    color: var(--text-color, #333);
    margin-top: 3px; /* Padding below field */
    padding-left: 2px; /* Small indent */
}

#readingsStatsModal .console-button {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius, 4px);
    background-color: var(--primary-color, #16a085);
    color: var(--button-text-color, #fff);
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 500;
    text-align: center;
}

#readingsStatsModal .console-button:hover {
    background-color: var(--link-hover-color, #138d75);
}

#readingsStatsModal .console-button-sm {
    padding: 8px 12px;
    font-size: 0.85rem;
    min-width: 100px; /* Added min-width */
    /* ... other small button specific styles ... */
}

#readingsStatsModal .console-button-md {
    padding: 10px 18px;
    font-size: 1rem;
    min-width: 150px; /* Added min-width */
    /* ... other medium button specific styles ... */
}

#readingsStatsModal .console-button-lg {
    padding: 12px 24px;
    font-size: 1.15rem;
    min-width: 200px; /* Added min-width */
    /* ... other large button specific styles ... */
}

#readingsStatsModal .btn-small {
    padding: 6px 12px;
    font-size: 0.8em;
}

#readingsStatsModal .btn-medium {
    padding: 10px 20px;
    font-size: 0.9em;
}

#readingsStatsModal .btn-large {
    padding: 12px 24px;
    font-size: 1em;
}

/* Sliding Switch Styles */
#readingsStatsModal .sliding-switch-container {
    display: flex;
    align-items: center;
}

#readingsStatsModal .sliding-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

#readingsStatsModal .sliding-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#readingsStatsModal .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color, #ccc); /* Off state */
    transition: .4s;
    border-radius: 28px; /* Rounded switch */
}

#readingsStatsModal .slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Knob size */
    width: 20px;  /* Knob size */
    left: 4px;
    bottom: 4px;
    background-color: white; /* Knob color */
    transition: .4s;
    border-radius: 50%; /* Circular knob */
}

#readingsStatsModal .sliding-switch input:checked + .slider {
    background-color: var(--primary-color, #16a085); /* On state */
}

#readingsStatsModal .sliding-switch input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color, #16a085);
}

#readingsStatsModal .sliding-switch input:checked + .slider:before {
    transform: translateX(22px); /* Knob movement */
}

#readingsStatsModal .sliding-switch-label { /* Label for the switch */
    margin-left: 10px;
    color: var(--text-color, #333);
    font-size: 0.9em;
    cursor: pointer; /* Make it clear it's clickable */
}

/* ==========================================================================
   Blockchain Explorer Modal Styles (explorerModal) - Light/Dark Theme
   ========================================================================== */

#explorerModal .app-modal-content {
    background-color: var(--card-bg); 
    color: var(--text-color);       
    border: 1px solid var(--border-color);
    width: 60%; 
    max-width: 1200px; 
    height: 65vh; 
    max-height: 900px;
    display: flex; 
    flex-direction: column; 
}

#explorerModal .app-modal-support-header {
    background-color: var(--header-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 15px; 
}

#explorerModal .app-modal-title {
    font-weight: bold;
}

#explorerModal .app-modal-close-btn {
    color: var(--text-color); 
}

#explorerModal .app-modal-close-btn:hover {
    color: var(--primary-color);
}

#explorerModal .app-modal-body {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1; 
    background-color: var(--background-color); 
}

#explorerModal #explorerTopControlsRow button,
#explorerModal #explorerModalSearchButton { 
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: 1px solid var(--button-bg-color);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#explorerModal #explorerTopControlsRow button:hover {
    background-color: var(--link-hover-color); 
    border-color: var(--link-hover-color);
}

#explorerModal #explorerModalSearchInput { 
    padding: 8px 10px;
    border: 1px solid var(--input-border-color);
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border-radius: var(--border-radius);
    flex-grow: 1;
    min-width: 150px;
}

#explorerModal #explorerFiltersInline label {
    color: var(--text-color);
    margin-right: 10px; 
    font-size: 0.9em;
}

#explorerModal #explorerFiltersInline input[type="checkbox"] {
    margin-right: 4px;
    accent-color: var(--primary-color); 
}

/* Transaction List & Table */
#explorerModal #explorerPersistentTransactionListContainer,
#explorerModal #explorerModalAccountDetailsArea {
    border: 1px solid var(--border-color);
    background-color: var(--card-bg); 
    color: var(--text-color);
    padding: 10px;
    margin-bottom: 15px; 
    border-radius: var(--border-radius);
}

#explorerModal #explorerModalTransactionList .persistent-tx-item {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#explorerModal #explorerModalTransactionList .persistent-tx-item:last-child {
    border-bottom: none;
}

#explorerModal #explorerModalTransactionList .persistent-tx-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1); 
}

#explorerModal #explorerTransactionsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

#explorerModal #explorerTransactionsTable th,
#explorerModal #explorerTransactionsTable td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left; 
}

#explorerModal #explorerTransactionsTable th {
    background-color: rgba(var(--primary-color-rgb), 0.05); 
    font-weight: 600;
}

#explorerModal #explorerTransactionsTable tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.08);
}

#explorerModal #explorerTransactionsTable tbody tr td {
    color: var(--text-color);
}

#explorerModal #explorerModalStatus,
#explorerModal #response {
    padding: 8px;
    margin-top: 10px;
    border-radius: var(--border-radius);
    font-size: 0.9em;
    color: var(--text-color);
}

#explorerModal #response p[style*="color:red"] { 
    color: #dc3545 !important; 
    background-color: rgba(220, 53, 69, 0.1);
    padding: 5px;
    border-radius: var(--border-radius);
}

/* Specific Dark Theme Overrides for Explorer Modal */
body.dark-theme #explorerModal .app-modal-close-btn {
    background-color: var(--header-bg); /* Match header background in dark theme */
}

body.dark-theme #explorerModal .app-modal-close-btn:hover {
    color: var(--primary-color); 
}

body.dark-theme #explorerModal #explorerTopControlsRow button {
    border-color: var(--primary-color); 
}

body.dark-theme #explorerModal #explorerTopControlsRow button:hover {
    border-color: var(--link-hover-color);
}

body.dark-theme #explorerModal #explorerFiltersInline input[type="checkbox"] {
    accent-color: var(--primary-color); 
}

body.dark-theme #explorerModal #explorerModalTransactionList .persistent-tx-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.15); 
}

body.dark-theme #explorerModal #explorerTransactionsTable th {
    background-color: rgba(var(--primary-color-rgb), 0.1); 
}

body.dark-theme #explorerModal #explorerTransactionsTable tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.12);
}

body.dark-theme #explorerModal #response p[style*="color:red"] {
    color: #ff6b81 !important; 
    background-color: rgba(255, 107, 129, 0.15);
}

/* ... any other specific styles for explorer content ... */

/* ===================================================================
 * Support Dialog Modal Styles - Light/Dark Theme
 * =================================================================== */

/* Base structure for support dialog - these are not theme-dependent but provide layout */
#supportDialogModal .app-modal-support-header {
    padding: 15px 20px;
    border-bottom: 1px solid; /* Border color will be themed */
    display: flex; /* Added Flexbox */
    align-items: center; /* Added Flexbox alignment */
}

#supportDialogModal .app-modal-support-header img { /* Style for the image in the header */
    max-height: 30px; /* Control image size */
    margin-right: 10px; /* Space between image and text */
    border-radius: 4px; /* Optional: rounded corners for the image */
    /* vertical-align: middle; /* Not needed with Flexbox, but kept for reference if Flexbox is removed */
}

#supportDialogModal .app-modal-support-header h2 {
    margin: 0;
    font-size: 1.4em;
    color: inherit; 
    margin-right: 10px; /* Add some space between title and LED */
}

#supportDialogModal .app-modal-body {
    padding: 20px;
    font-size: 0.95em;
    line-height: 1.7;
}

#supportDialogModal .app-modal-body h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
}
#supportDialogModal .app-modal-body h3:first-child {
    margin-top: 0;
}

#supportDialogModal .app-modal-body p {
    margin-bottom: 1em;
}

/* Light Theme for Support Dialog */
body.light-theme #supportDialogModal .app-modal-support-content {
    background-color: var(--support-modal-bg-light);
    color: var(--support-modal-text-light);
    border: 1px solid var(--support-modal-border-color-light);
}

body.light-theme #supportDialogModal .app-modal-support-header {
    width: 60%;
    background-color: var(--support-modal-header-bg-light);
    color: var(--support-modal-header-text-light);
    border-bottom-color: var(--support-modal-border-color-light);
}

body.light-theme #supportDialogModal .app-modal-body a {
    color: var(--support-modal-link-color-light);
}
body.light-theme #supportDialogModal .app-modal-body a:hover {
    color: var(--link-hover-color); /* Use general light theme link hover */
}

body.light-theme #supportDialogModal .app-modal-close-btn {
    color: var(--support-modal-close-btn-color-light);
}
body.light-theme #supportDialogModal .app-modal-close-btn:hover {
    color: var(--support-modal-close-btn-hover-color-light);
}

/* Dark Theme for Support Dialog */
body.dark-theme #supportDialogModal .app-modal-support-content {
    background-color: var(--support-modal-bg-dark);
    color: var(--support-modal-text-dark);
    border: 1px solid var(--support-modal-border-color-dark);
}

body.dark-theme #supportDialogModal .app-modal-support-header {
    background-color: var(--support-modal-header-bg-dark);
    color: var(--support-modal-header-text-dark);
    border-bottom-color: var(--support-modal-border-color-dark);
}

body.dark-theme #supportDialogModal .app-modal-body a {
    color: var(--support-modal-link-color-dark);
}
body.dark-theme #supportDialogModal .app-modal-body a:hover {
    color: var(--link-hover-color); /* Use general dark theme link hover */
}

body.dark-theme #supportDialogModal .app-modal-close-btn {
    color: var(--support-modal-close-btn-color-dark);
}
body.dark-theme #supportDialogModal .app-modal-close-btn:hover {
    color: var(--support-modal-close-btn-hover-color-dark);
}