/* --- Universal Box Sizing --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Base Variables (Light Mode) --- */
:root {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --heading-color: #2c3e50;
    --card-bg: #fff;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-border: #eee;
    --info-text-color: #555;
    --link-color: #3498db;
    --error-bg: #f8d7da;
    --error-text: #721c24;
    --error-border: #f5c6cb;
    --switch-bg: #ccc;
    --switch-slider: white;
    --switch-icon: "\1F506"; /* Sun icon ☀️ */
    --chart-grid-color: rgba(0, 0, 0, 0.08);
    --chart-label-color: #555;
    --chart-tick-color: #666;
    /* --- Using these for BOTH chart and custom tooltips --- */
    --chart-tooltip-bg: rgba(0, 0, 0, 0.8);
    --chart-tooltip-text: white;
    /* ----------------------------------------------------- */
    --edge-padding: 15px; /* Default mobile edge padding */
}

/* --- Dark Mode Variable Overrides --- */
body.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --heading-color: #bdc3c7;
    --card-bg: #2c2c2c;
    --card-shadow: rgba(255, 255, 255, 0.05);
    --card-border: #444;
    --info-text-color: #aaa;
    --link-color: #5dade2;
    --error-bg: #572023;
    --error-text: #f8d7da;
    --error-border: #7a282d;
    --switch-bg: #555;
    --switch-slider: #ccc;
    --switch-icon: "\1F319"; /* Moon icon 🌙 */
    --chart-grid-color: rgba(255, 255, 255, 0.15);
    --chart-label-color: #bbb;
    --chart-tick-color: #aaa;
    /* --- Using these for BOTH chart and custom tooltips --- */
    --chart-tooltip-bg: rgba(240, 240, 240, 0.85);
    --chart-tooltip-text: #1a1a1a;
    /* ----------------------------------------------------- */
}

/* --- Body Styling --- */
body {
    font-family: sans-serif;
    line-height: 1.6;
    padding-left: var(--edge-padding);
    padding-right: var(--edge-padding);
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- General Content Styling --- */
 h1{text-align:center;color:var(--heading-color);margin-top: 0; margin-bottom:0px;font-size:1.6em}
 h6{text-align:center;color:var(--heading-color);margin-top: -5px; margin-bottom:15px} 
/* Updated p.info max-width for better centering */
 p.info{text-align:center;font-size:.85em;color:var(--info-text-color);margin-top: 0; margin-bottom:15px;max-width:700px; margin-left: auto; margin-right: auto;}
 #error-message{color:var(--error-text);background-color:var(--error-bg);border:1px solid var(--error-border);padding:10px 15px;border-radius:5px;margin: 0 auto 15px auto; display:none;width:90%;max-width:800px;text-align:center;}


/* --- Container Styling (Centering & Max Width) --- */
 #chart-container,
 #category-selector {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--card-shadow);
    border: 1px solid var(--card-border);
    padding: 15px;
    max-width: 1300px; /* Consistent max-width */
    margin: 0 auto 20px auto;
    width: 100%;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* --- Canvas --- */
 canvas{max-width:100%;height:auto;display:block;margin:0}

/* --- Category Selector Specifics --- */
#category-selector h3 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: var(--heading-color); text-align: center; border-bottom: 1px solid var(--card-border); padding-bottom: 8px; }
.category-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 15px;
    font-size: 0.9em;
}
.category-options label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); }
.category-options input[type="checkbox"] { cursor: pointer; margin: 0; flex-shrink: 0; width: 1.1em; height: 1.1em; }

/* --- Toggle Switch CSS (Keep As Is) --- */
.theme-switch-wrapper { display: flex; align-items: center; gap: 8px; position: absolute; top: 15px; right: var(--edge-padding); z-index: 100; }
.theme-switch-wrapper span { font-size: 0.8em; color: var(--info-text-color); }
.theme-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--switch-bg); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: var(--switch-icon); height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--switch-slider); transition: .4s; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
input:checked + .slider:before { transform: translateX(26px); }
/* --- End Toggle Switch CSS --- */

/* --- Custom Category Tooltip Styling (Add this) --- */
#category-tooltip {
    position: fixed; /* Use fixed to position relative to viewport, easier for mouse tracking */
    display: none; /* Hidden by default */
    background-color: var(--chart-tooltip-bg);
    color: var(--chart-tooltip-text);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    line-height: 1.4;
    max-width: 250px; /* Prevent it from getting too wide */
    z-index: 101; /* Ensure it's above other elements */
    pointer-events: none; /* Prevent tooltip from blocking mouse events on elements underneath */
    white-space: normal; /* Allow text wrapping */
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    /* Smooth appearance */
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

#category-tooltip.visible {
    display: block;
    opacity: 1;
}
/* --------------------------------------------- */


/* --- Battery Details Section Styling (Add this) --- */
.details-card { /* Re-using card styles */
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--card-shadow);
    border: 1px solid var(--card-border);
    padding: 15px;
    max-width: 1300px; /* Match other cards */
    margin: 0 auto 20px auto;
    width: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.details-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.1em;
    color: var(--heading-color);
    text-align: center;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 8px;
}

.selector-list {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to next line */
    gap: 8px 12px; /* Spacing between items */
    justify-content: center; /* Center items horizontally */
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--card-border);
}

.selector-list .placeholder {
    font-style: italic;
    color: var(--info-text-color);
}

.selector-list .battery-select-item {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 15px; /* Pill shape */
    background-color: var(--bg-color); /* Slightly different bg */
    border: 1px solid var(--card-border);
    font-size: 0.9em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* Prevent names breaking mid-word */
}

.selector-list .battery-select-item:hover {
    border-color: var(--link-color);
}

.selector-list .battery-select-item.selected {
    background-color: var(--link-color);
    color: white; /* Or a contrasting color for dark mode maybe? */
    border-color: var(--link-color);
    font-weight: bold;
}

/* Dark mode adjustment for selected item text */
body.dark-mode .selector-list .battery-select-item.selected {
    color: var(--bg-color); /* Use dark bg color for text on light blue */
}


/* --- Battery Details Section Styling (Add/Modify this) --- */

/* ... (previous .details-card, h3, .selector-list styles remain the same) ... */


.details-content {
    display: block; /* <<< ADD THIS LINE */
    padding-top: 10px;
    font-size: 0.95em;
    /* Remove grid display if it was set here previously */
}


/* === RESTORE: Comparison Grid Styling (3 Columns) === */
.details-content.comparison-view { /* Target the container ONLY when comparing */
    display: grid;
    grid-template-columns: auto 1fr 1fr; /* Metric Label | Battery 1 | Battery 2 */
    gap: 8px 15px; /* Row gap | Column gap */
    width: 100%;
    margin-top: 10px; /* Add some space above the grid */
}

.comparison-header { /* Style for the top header row */
    font-weight: bold;
    color: var(--heading-color);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--card-border);
    text-align: center; /* Center header text */
}
.comparison-header:first-child { /* Style for the 'Metric' header */
    text-align: left; /* Align metric label header left */
    padding-left: 5px; /* Optional: slight padding */
}

.comparison-metric-label { /* Style for the metric name column (Grid Items 1, 4, 7, etc.) */
    font-weight: bold;
    text-align: left; /* <<< CORRECTED: Align label text to the left */
    padding-left: 5px;  /* Optional: slight padding */
    color: var(--heading-color); /* Make label stand out more */
    border-bottom: 1px dashed var(--card-border); /* Optional separator */
    /* Ensure vertical alignment if needed */
    display: flex;
    align-items: center;
}

.comparison-metric-value { /* Style for the value columns (Grid Items 2, 3, 5, 6, etc.) */
    text-align: center; /* <<< CHANGED: Align values left for clarity */
    padding: 4px 0 4px 10px; /* Adjust padding: Top/Right/Bottom/Left */
    border-bottom: 1px dashed var(--card-border); /* Optional separator */
    /* Ensure vertical alignment if needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove bottom border from the very last row of grid items */
.details-content.comparison-view > *:nth-last-child(-n+3) { /* Select last 3 elements (label + 2 values in the grid) */
   border-bottom: none;
}
/* === END: Comparison Grid Styling === */

/* === END: Comparison Table Styling === */

/* Styles for Single Battery View (remain largely the same) */
.details-content h4:not(.comparison-title) { /* Ensure single view h4 is styled */
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--heading-color);
    font-size: 1.05em;
}

.details-content p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.5;
}
.details-content ul {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 25px; /* Indent list */
}
.details-content li {
    margin-bottom: 4px;
}







/* --- Media Queries Adjustments --- */
@media (max-width: 600px) {
     #battery-details-content {
         /* The outer card doesn't scroll */
         overflow: hidden;
     }

    .comparison-scroll-wrapper { /* The new inner wrapper */
         overflow-x: auto; /* Enable horizontal scroll */
         padding-bottom: 10px; /* Space for scrollbar */
     }

    .details-content.comparison-view {
         /* Keep the grid layout */
         display: grid;
         grid-template-columns: auto minmax(120px, 1fr) minmax(120px, 1fr); /* Ensure min width for cols */
         gap: 8px 10px; /* Adjust gap */
         width: max-content; /* <<< Allow grid to be wider than screen */
         margin-top: 10px;
     }

    /* Keep other comparison styles largely the same, maybe adjust font size */
    .comparison-header, .comparison-metric-label, .comparison-metric-value {
         white-space: nowrap; /* Prevent text wrapping within cells */
         font-size: 0.85em; /* Smaller font */
     }
     .comparison-metric-label {
         white-space: normal; /* Allow labels to wrap if needed */
     }
 }
 @media (min-width:768px){
     :root { --edge-padding: 20px; }
     /* Adjust max-width for containers on larger screens */
     #chart-container, #category-selector, p.info { max-width: 90%; } /* Use percentage for flexibility */
     #chart-container{ padding: 15px; }
     #category-selector { padding: 15px 20px; }
 }
 @media (min-width:992px){
     :root { --edge-padding: 25px; }
     #chart-container, #category-selector, p.info { max-width: 1100px; } /* Specific max-width */
     #chart-container{ padding: 20px; }
     #category-selector{ padding: 15px 25px; }
     h1{font-size:1.8em}
     p.info{font-size:.9em}
     .category-options { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); font-size: 0.95em; }
 }
 @media (min-width:1200px){
     :root { --edge-padding: 30px; }
     #chart-container, #category-selector, p.info { max-width: 1300px; } /* Larger max-width */
     #chart-container{ padding: 25px; }
     #category-selector{ padding: 15px 30px; }
 }

/* --- Footer Styling --- */
footer {
    margin-top: 40px;       /* Space above the footer */
    padding: 20px var(--edge-padding); /* Vertical padding + Respect horizontal edge padding */
    border-top: 1px solid var(--card-border); /* Subtle divider using theme border color */
    text-align: center;      /* Center the text content */
    font-size: 0.9em;        /* Slightly smaller than base text */
    color: var(--info-text-color); /* Use the dimmer text color for less emphasis */
    /* Inherits background-color from body */
    /* Transition for smooth theme changes */
    transition: border-color 0.3s ease, color 0.3s ease;
}

footer p {
    margin: 0; /* Remove default paragraph margin */
}

footer a {
    color: var(--link-color); /* Use the theme's link color */
    text-decoration: none;   /* Remove default underline */
    font-weight: 500;        /* Slightly bolder link */
    transition: color 0.2s ease; /* Smooth hover effect */
}

footer a:hover,
footer a:focus {
    color: var(--link-color); /* Keep color, or adjust if desired */
    text-decoration: underline; /* Add underline on hover/focus for accessibility */
    opacity: 0.85; /* Optional: Slight fade effect on hover */
}

/* No specific dark mode styles needed here as variables handle it */
/* --- End Footer Styling --- */

/* --- End CSS --- */