/* Root variables for colors */
:root {
    --background-color: #f8f9fa;
    --text-color: #333;
    --header-color: #111;
    --subtitle-color: #666;
    --box-background: white;
    --box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --border-color: #f0f0f0;
    --label-color: #444;
    --input-border: #ccc;
    --input-focus-color: #007bff;
    --drop-zone-border: #007bff;
    --drop-zone-bg: #f1f8ff;
    --drop-zone-text: #555;
    --drop-zone-dragover-bg: #e2efff;
    --drop-zone-dragover-border: #0056b3;
    --button-primary-bg: #007bff;
    --button-primary-color: white;
    --button-primary-shadow: 0 4px 6px rgba(0,123,255,0.2);
    --button-primary-hover-bg: #0056b3;
    --button-download-bg: #232f3e;
    --button-download-color: white;
    --button-download-hover-bg: #131a22;
    --table-header-bg: #f8f9fa;
    --table-header-color: #444;
    --table-row-hover-bg: #fcfcfc;
    --table-border: #eee;
    --ai-report-bg: #f8f9fa;
    --ai-report-border-left: #007bff;
    --cat-waste-bg: #ffe8e8;
    --cat-waste-color: #d32f2f;
    --cat-booster-bg: #fff4e5;
    --cat-booster-color: #ed6c02;
    --cat-scale-bg: #e8f5e9;
    --cat-scale-color: #2e7d32;
    --cat-maintain-bg: #e3f2fd;
    --cat-maintain-color: #0288d1;
}

/* Dark mode specific variables */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1a1a;
        --text-color: #e0e0e0;
        --header-color: #f0f0f0;
        --subtitle-color: #b0b0b0;
        --box-background: #2a2a2a;
        --box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        --border-color: #3a3a3a;
        --label-color: #c0c0c0;
        --input-border: #555;
        --input-focus-color: #66b3ff;
        --drop-zone-border: #66b3ff;
        --drop-zone-bg: #223344;
        --drop-zone-text: #b0b0b0;
        --drop-zone-dragover-bg: #334455;
        --drop-zone-dragover-border: #55aaff;
        --button-primary-bg: #66b3ff;
        --button-primary-color: #1a1a1a;
        --button-primary-shadow: 0 4px 6px rgba(102,179,255,0.2);
        --button-primary-hover-bg: #55aaff;
        --button-download-bg: #445566;
        --button-download-color: #e0e0e0;
        --button-download-hover-bg: #334455;
        --table-header-bg: #2a2a2a;
        --table-header-color: #b0b0b0;
        --table-row-hover-bg: #3a3a3a;
        --table-border: #4a4a4a;
        --ai-report-bg: #2a2a2a;
        --ai-report-border-left: #66b3ff;
        --cat-waste-bg: #4d0000;
        --cat-waste-color: #ff9999;
        --cat-booster-bg: #663300;
        --cat-booster-color: #ffcc66;
        --cat-scale-bg: #004d00;
        --cat-scale-color: #99ff99;
        --cat-maintain-bg: #003366;
        --cat-maintain-color: #99ccff;
    }
}

/* Manual dark mode toggle */
.dark-mode {
    --background-color: #1a1a1a;
    --text-color: #e0e0e0;
    --header-color: #f0f0f0;
    --subtitle-color: #b0b0b0;
    --box-background: #2a2a2a;
    --box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    --border-color: #3a3a3a;
    --label-color: #c0c0c0;
    --input-border: #555;
    --input-focus-color: #66b3ff;
    --drop-zone-border: #66b3ff;
    --drop-zone-bg: #223344;
    --drop-zone-text: #b0b0b0;
    --drop-zone-dragover-bg: #334455;
    --drop-zone-dragover-border: #55aaff;
    --button-primary-bg: #66b3ff;
    --button-primary-color: #1a1a1a;
    --button-primary-shadow: 0 4px 6px rgba(102,179,255,0.2);
    --button-primary-hover-bg: #55aaff;
    --button-download-bg: #445566;
    --button-download-color: #e0e0e0;
    --button-download-hover-bg: #334455;
    --table-header-bg: #2a2a2a;
    --table-header-color: #b0b0b0;
    --table-row-hover-bg: #3a3a3a;
    --table-border: #4a4a4a;
    --ai-report-bg: #2a2a2a;
    --ai-report-border-left: #66b3ff;
    --cat-waste-bg: #4d0000;
    --cat-waste-color: #ff9999;
    --cat-booster-bg: #663300;
    --cat-booster-color: #ffcc66;
    --cat-scale-bg: #004d00;
    --cat-scale-color: #99ff99;
    --cat-maintain-bg: #003366;
    --cat-maintain-color: #99ccff;
}

/* General styles */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--background-color); 
    margin: 0; 
    padding: 20px; 
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
.container { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 2.5fr; 
    gap: 20px; 
}
.box { 
    background: var(--box-background); 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: var(--box-shadow); 
    transition: background-color 0.3s, box-shadow 0.3s;
}
h1 { 
    grid-column: 1 / -1; 
    text-align: center; 
    color: var(--header-color); 
    margin-bottom: 5px; 
    transition: color 0.3s;
}
.subtitle { 
    grid-column: 1 / -1; 
    text-align: center; 
    color: var(--subtitle-color); 
    margin-bottom: 30px; 
    font-size: 1.1em; 
    transition: color 0.3s;
}
h2 { 
    font-size: 1.2em; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 10px; 
    margin-top: 0; 
    color: var(--header-color);
    transition: border-color 0.3s, color 0.3s;
}
label { 
    display: block; 
    margin-top: 15px; 
    font-weight: bold; 
    font-size: 0.9em; 
    color: var(--label-color); 
    transition: color 0.3s;
}
input[type="number"] { 
    width: 100%; 
    margin-top: 8px; 
    padding: 10px; 
    border: 1px solid var(--input-border); 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-size: 1em; 
    font-weight: bold; 
    color: var(--input-focus-color); 
    background-color: var(--box-background);
    transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}

.drop-zone {
    border: 2px dashed var(--drop-zone-border); 
    border-radius: 8px; padding: 30px; text-align: center; 
    color: var(--drop-zone-text); 
    cursor: pointer; margin-top: 20px; 
    background-color: var(--drop-zone-bg);
    transition: all 0.2s;
}
.drop-zone.dragover { 
    background-color: var(--drop-zone-dragover-bg); 
    border-color: var(--drop-zone-dragover-border); 
    font-weight: bold; 
}
.drop-zone input[type="file"] { display: none; }
#fileNameDisplay { 
    margin-top: 10px; 
    font-size: 0.9em; 
    color: var(--input-focus-color); 
    font-weight: bold; 
    text-align: center; 
    transition: color 0.3s;
}

.btn-primary { 
    background-color: var(--button-primary-bg); 
    color: var(--button-primary-color); 
    border: none; padding: 15px 20px; font-size: 16px; border-radius: 8px; 
    cursor: pointer; width: 100%; margin-top: 25px; font-weight: bold; 
    box-shadow: var(--button-primary-shadow); 
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn-primary:hover { 
    background-color: var(--button-primary-hover-bg); 
}
.btn-download { 
    background-color: var(--button-download-bg); 
    color: var(--button-download-color); 
    border: none; padding: 12px 20px; font-size: 15px; border-radius: 8px; 
    cursor: pointer; margin-top: 20px; display: none; width: 100%; 
    font-weight: bold; 
    transition: background-color 0.3s, color 0.3s;
}
.btn-download:hover { 
    background-color: var(--button-download-hover-bg); 
}

.table-wrapper { 
    overflow-x: auto; margin-top: 15px; max-height: 600px; 
    border: 1px solid var(--table-border); 
    border-radius: 8px; 
    transition: border-color 0.3s;
}
table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.85em; 
}
th, td { 
    border-bottom: 1px solid var(--table-border); 
    padding: 10px; text-align: left; 
    transition: border-color 0.3s;
}
th { 
    background-color: var(--table-header-bg); 
    position: sticky; top: 0; 
    color: var(--table-header-color); 
    font-weight: 600; 
    transition: background-color 0.3s, color 0.3s;
}
tr:hover { 
    background-color: var(--table-row-hover-bg); 
}

.cat-badge { 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 0.9em; 
    font-weight: bold; 
    display: inline-block; 
    text-align: center; 
    min-width: 120px;
    transition: background-color 0.3s, color 0.3s;
}
.cat-waste { background-color: var(--cat-waste-bg); color: var(--cat-waste-color); }
.cat-booster { background-color: var(--cat-booster-bg); color: var(--cat-booster-color); }
.cat-scale { background-color: var(--cat-scale-bg); color: var(--cat-scale-color); }
.cat-maintain { background-color: var(--cat-maintain-bg); color: var(--cat-maintain-color); }

.action-text { 
    font-weight: bold; 
    color: var(--text-color); 
    display: block; 
    transition: color 0.3s;
}
.action-sub { 
    font-size: 0.85em; 
    color: var(--subtitle-color); 
    display: block; 
    margin-top: 3px; 
    transition: color 0.3s;
}

#loading { 
    display: none; 
    text-align: center; 
    color: var(--input-focus-color); 
    font-weight: bold; 
    margin-top: 20px; 
    transition: color 0.3s;
}
.ai-report { 
    background-color: var(--ai-report-bg); 
    padding: 20px; 
    border-radius: 8px; 
    font-size: 0.95em; 
    line-height: 1.7; 
    border-left: 4px solid var(--ai-report-border-left); 
    transition: background-color 0.3s, border-left-color 0.3s;
}