/* style.css */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 20px; line-height: 1.6; }
.container { max-width: 1400px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
header { border-bottom: 2px solid #eee; padding-bottom: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
h1 { margin: 0; color: #2c3e50; }
nav a { text-decoration: none; color: #3498db; margin-left: 20px; font-weight: bold; }
nav a:hover { text-decoration: underline; }

.grid-layout { display: grid; grid-template-columns: 380px 1fr; gap: 30px; }
@media (max-width: 1000px) { .grid-layout { grid-template-columns: 1fr; } }

.controls { background: #eef2f5; padding: 20px; border-radius: 8px; height: fit-content; }
.control-group { margin-bottom: 20px; position: relative; }
label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 0.9em; color: #555; }
input[type="file"], input[type="number"], select, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; }

.section-title { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #888; 
    margin-top: 25px; 
    margin-bottom: 10px; 
    border-bottom: 2px solid #ddd; 
    padding-bottom: 5px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-row { display: flex; gap: 10px; }
.flex-row > div { flex: 1; }

#monthlyInputsContainer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff; padding: 10px; border-radius: 4px; border: 1px solid #ddd; max-height: 250px; overflow-y: auto; margin-top: 10px; }
.month-input label { font-size: 0.75em; margin-bottom: 1px; color: #777; }
.month-input input { font-size: 0.9em; padding: 4px; }

.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 20px; }
.card { background: #f8f9fa; padding: 15px; border-radius: 6px; text-align: center; border: 1px solid #eee; position: relative; }
.card h3 { margin: 0 0 5px 0; font-size: 0.85rem; color: #666; text-transform: uppercase; }
.card .value { font-size: 1.3rem; font-weight: bold; color: #2c3e50; }
.card.winner { background-color: #d4edda; border-color: #c3e6cb; }
.card.winner::after { content: "🏆 Parim Hind"; position: absolute; top: -10px; right: -10px; background: #27ae60; color: white; padding: 2px 8px; font-size: 0.7em; border-radius: 10px; font-weight: bold; }
.card.c-fixed { border-top: 4px solid #3498db; }
.card.c-monthly { border-top: 4px solid #9b59b6; }
.card.c-market { border-top: 4px solid #e74c3c; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
th, td { text-align: right; padding: 10px; border-bottom: 1px solid #ddd; }
th:first-child, td:first-child { text-align: left; }
th { background-color: #f8f9fa; font-weight: 600; }
.chart-container { position: relative; height: 450px; width: 100%; margin-top: 20px; }

.error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px; border-radius: 4px; margin-bottom: 20px; display: none; }
.status { margin-top: 10px; font-size: 0.9em; font-style: italic; color: #666; }
.hidden { display: none; }
.btn { display: inline-block; background: #2980b9; color: white; padding: 12px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 1rem; font-weight: bold; margin-top: 20px; }
.btn:hover { background: #21618c; }
.btn:disabled { background: #ccc; cursor: not-allowed; }

footer { margin-top: 50px; border-top: 1px solid #eee; padding-top: 20px; text-align: center; color: #777; font-size: 0.9em; }
footer a { color: #555; text-decoration: none; margin: 0 10px; }
footer a:hover { text-decoration: underline; }

/* Tooltip */
.help-icon { display: inline-block; width: 18px; height: 18px; background: #3498db; color: white; border-radius: 50%; text-align: center; line-height: 18px; font-size: 12px; font-weight: bold; cursor: help; margin-left: 8px; }
.tooltip-container { position: relative; display: inline-block; }
.tooltip-content { display: none; position: absolute; background-color: #333; color: #fff; text-align: left; border-radius: 6px; padding: 10px; width: 280px; bottom: 125%; left: 50%; margin-left: -140px; z-index: 1; font-size: 0.85em; font-weight: normal; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.tooltip-content::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
.tooltip-container:hover .tooltip-content { display: block; }

.missing-data-warning { color: #d35400; font-size: 0.85em; margin-top: 5px; background: #fdebd0; padding: 4px 8px; border-radius: 4px; display: inline-block; }

.results-card {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-top: 30px;
}
.results-card h2 { margin-top: 0; }

/* Dark Mode */
body.dark-mode { background-color: #121212; color: #e0e0e0; }
body.dark-mode .container { background-color: #1e1e1e; box-shadow: 0 2px 10px rgba(255,255,255,0.05); }
body.dark-mode header { border-bottom-color: #333; }
body.dark-mode h1 { color: #f5f5f5; }
body.dark-mode nav a { color: #5dade2; }
body.dark-mode .controls { background-color: #2d2d2d; }
body.dark-mode label { color: #bbb; }
body.dark-mode input[type="file"], 
body.dark-mode input[type="number"], 
body.dark-mode select, 
body.dark-mode textarea { background-color: #333; color: #eee; border-color: #555; }
body.dark-mode .section-title { color: #aaa; border-bottom-color: #444; }
body.dark-mode #monthlyInputsContainer { background-color: #333; border-color: #555; }
body.dark-mode .month-input label { color: #aaa; }
body.dark-mode .card { background-color: #2d2d2d; border-color: #444; }
body.dark-mode .card h3 { color: #aaa; }
body.dark-mode .card .value { color: #eee; }
body.dark-mode .card.winner { background-color: #1b4d2e; border-color: #145a32; }
body.dark-mode .card.winner::after { background-color: #2ecc71; }
body.dark-mode table th { background-color: #2d2d2d; color: #eee; }
body.dark-mode th, body.dark-mode td { border-bottom-color: #444; }
body.dark-mode #monthlyTable td:hover { background-color: #383838; }
body.dark-mode .status { background-color: #333; border-color: #444; color: #bbb; }
body.dark-mode .results-card { background-color: #252525; }
body.dark-mode footer { border-top-color: #333; color: #777; }
body.dark-mode .modal-content { background-color: #2d2d2d; border-color: #444; color: #eee; }
body.dark-mode .detail-row { border-bottom-color: #444; }
body.dark-mode .detail-row.total { border-top-color: #555; }
body.dark-mode .detail-row .label { color: #bbb; }
body.dark-mode .detail-header h3 { color: #eee; }
body.dark-mode .detail-header { border-bottom-color: #555; }
body.dark-mode .tooltip-content { background-color: #fff; color: #111; }
body.dark-mode .tooltip-content::after { border-color: #fff transparent transparent transparent; }
body.dark-mode input:disabled { background-color: #2a2a2a !important; color: #666 !important; }
body.dark-mode .modal { background-color: rgba(0,0,0,0.8); }
body.dark-mode .close-modal { color: #eee; }
body.dark-mode .close-modal:hover { color: #fff; }
body.dark-mode #customDescription { color: #aaa !important; }

/* Status Boxes (Light Mode Default) */
.status-info { background-color: #e8f8f5; border: 1px solid #d1f2eb; color: #145a32; margin-bottom: 15px; }
.status-note { font-size: 0.85em; color: #555; margin-bottom: 15px; background: #fcf8e3; border: 1px solid #faebcc; padding: 8px; }

/* Alert Boxes (Network Comparison) */
.alert-box { flex: 1; padding: 10px; border-radius: 5px; }
.alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.alert-warning { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; }

/* Table Highlights (Light Mode Default) */
.winner-cell { font-weight: bold; color: #27ae60; background-color: #f0fff4; cursor: pointer; }
.row-winner { background-color: #f0fff4; font-weight: bold; }
.row-current { background-color: #fff8e1; }

/* --- Dark Mode Overrides for Highlights --- */
body.dark-mode .status-info {
    background-color: #1e3a29; /* Dark Greenish */
    border-color: #2e5c42;
    color: #aed6c1;
}

body.dark-mode .status-note {
    background-color: #3e3a1e; /* Dark Yellowish/Brown */
    border-color: #5c572e;
    color: #dcd6a1;
}

body.dark-mode .alert-success {
    background-color: #1e3a29;
    border-color: #2e5c42;
    color: #aed6c1;
}

body.dark-mode .alert-warning {
    background-color: #3e3a1e;
    border-color: #5c572e;
    color: #dcd6a1;
}

body.dark-mode .winner-cell {
    background-color: #145a32; /* Deep Green */
    color: #e0e0e0;
}
body.dark-mode #monthlyTable td.winner-cell:hover {
    background-color: #1b7a40;
}

body.dark-mode .row-winner {
    background-color: #145a32;
    color: #e0e0e0;
}

body.dark-mode .row-current {
    background-color: #5d4037; /* Dark Brown */
    color: #e0e0e0;
}

body.dark-mode .row-winner td,
body.dark-mode .row-current td {
    border-bottom-color: #444;
}

body.dark-mode .missing-data-warning {
    background-color: #3e3a1e;
    color: #dcd6a1;
}