body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: #f4f4f9; color: #333; margin: 0; padding: 20px; }
.container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h2 { color: #2c3e50; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; }
.price-tables { display: flex; gap: 20px; flex-wrap: wrap; }
.price-table { flex: 1; min-width: 300px; animation: fadeIn 0.5s ease-in-out; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; transition: background-color 0.3s; }
th { background-color: #f8f8f8; }
.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 15px; border-radius: 5px; }
.options-form { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.options-form form { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
.options-form .form-group { display: flex; flex-direction: column; }
.options-form label { font-weight: bold; margin-bottom: 5px; font-size: 0.9em; }
.options-form input, .options-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.options-form input {
    width: 100px;
}
.options-form button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
.options-form button:hover { background-color: #0056b3; }
.price-green { background-color: #d4edda; color: #155724; font-weight: bold; }
.price-yellow { background-color: #fff3cd; color: #856404; }
.price-red { background-color: #f8d7da; color: #721c24; font-weight: bold; }

.page-header {
    display: flex;
    justify-content: space-between; /* Pealkiri vasakul, kell paremal */
    align-items: center;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.page-header h1 {
    border-bottom: none;
    margin: 0;
    padding: 0;
    font-size: 1.8em;
}
.time-display {
    text-align: right;
}
#digital-clock { font-size: 1.8em; font-weight: bold; color: #2c3e50; letter-spacing: 2px; }
#current-date { font-size: 0.9em; color: #6c757d; }
.current-price-box { padding: 20px; border-radius: 8px; text-align: center; margin-bottom: 20px; transition: background-color 0.5s; }
.current-price-box .label { display: block; font-size: 1.2em; margin-bottom: 5px; }
.current-price-box .price { display: block; font-size: 2.5em; font-weight: bold; }
tr.current-time-slot { border-left: 5px solid #007bff; }
tr.current-time-slot td { font-weight: bold; }
.theme-switch-wrapper { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 15px 0 25px 0; }
.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: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #007bff; }
input:checked + .slider:before { transform: translateX(26px); }
.theme-icon { font-size: 1.4em; cursor: default; line-height: 1; }
body.dark-mode { background-color: #121212; color: #e0e0e0; }
body.dark-mode .container { background-color: #1e1e1e; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
body.dark-mode .page-header, body.dark-mode h2 { border-bottom-color: #3a3a3a; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode #digital-clock { color: #f1f1f1; }
body.dark-mode .options-form { background-color: #2a2a2a; border-color: #444; }
body.dark-mode th { background-color: #333; }
body.dark-mode td { border-bottom-color: #3a3a3a; }
body.dark-mode input, body.dark-mode select {
    background-color: #333;
    color: #f1f1f1;
    border-color: #555;
}
body.dark-mode .price-green { background-color: #1a3e26; color: #a6d8b6; }
body.dark-mode .price-yellow { background-color: #4d411a; color: #e0c56e; }
body.dark-mode .price-red { background-color: #582a2f; color: #f1b0b7; }
body.dark-mode .theme-icon { color: #f1f1f1; }

/* --- UUED STIILID GRAAFIKU, STATISTIKA JA ANIMATSIOONIDE JAOKS --- */

/* Graafiku konteiner */
.chart-container {
    position: relative;
    height: 40vh; /* K천rgus 40% ekraani k천rgusest */
    width: 100%;
    margin-top: 40px;
    animation: fadeIn 0.5s ease-in-out;
}

/* Statistika plokk */
.stats-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.stats-block {
    flex: 1;
    min-width: 300px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    animation: fadeIn 0.5s ease-in-out;
}
.stats-block h3 { margin-top: 0; }
.stats-block .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #e9ecef;
}
.stats-block .stat-item:last-child { border-bottom: none; }
.stats-block .stat-value { font-weight: bold; }

/* Tumedad stiilid statistikale */
body.dark-mode .stats-block {
    background-color: #2a2a2a;
    border-color: #444;
}
body.dark-mode .stats-block .stat-item {
    border-bottom-color: #3a3a3a;
}

/* Animatsioonid */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* Rakenda pulseerimine ainult rohelisele ja punasele hetkehinnale */
.current-price-box.price-green, .current-price-box.price-red {
    animation: pulse 2s infinite;
}
/* --- LISATUD NÄDALAPÄEVA VÄRVIMISEKS --- */

/* Nädalapäeva värv heledas režiimis */
.weekday {
    color: #0056b3; /* Tumesinine */
}

/* Nädalapäeva värv tumedas režiimis */
body.dark-mode .weekday {
    color: #8ab4f8; /* Heledam sinine, mis on tumedal taustal loetav */
}