*,
*:before,
*:after {
box-sizing: border-box;
}
canvas {
touch-action: none;
}
body, html {
touch-action: manipulation;
} body {
background-color: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
margin: 0;
padding: 1rem;
} #chart-container {
position: relative;
width: 100%;
max-width: 1300px;
height: 400px;
margin: 0 auto 2rem;
background-color: #fff;
border-radius: 12px;
border: 1px solid #e5e5e5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 1rem;
overflow: hidden;
}
@media (max-width: 600px) {
#chart-container {
height: 350px;
padding: 0.5rem;
}
}
#myChart {
width: 100%;
height: 100%;
} #range-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
max-width: 1300px;
margin: 0 auto 1rem auto;
}
#range-buttons button {
padding: 6px 12px;
border: 1px solid #ccc;
background-color: #baeaff;
cursor: pointer;
border-radius: 6px;
font-size: 1rem;
}
#range-buttons button:hover {
background-color: #a4ddff;
}
#range-buttons button.active {
background-color: #007bff;
color: white;
border-color: #007bff;
} #latest-values, #average-values {
font-size: 1.1rem;
background-color: #f5faff;
padding: 1rem;
border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e5e5;
width: 100%;
max-width: 1300px;
margin: 0 auto 1rem auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5rem;
min-height: 60px;      
text-align: center;
}
.stat-item {
white-space: nowrap;
} body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
body.dark-mode #chart-container {
background-color: #1e1e1e;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
border-color: #333; 
} body.dark-mode #range-buttons button {
background-color: #333;
color: #eee;
border-color: #555;
}
body.dark-mode #range-buttons button:hover {
background-color: #444;
} body.dark-mode #range-buttons button.active {
background-color: #666; 
border-color: #888;     
color: #fff;
}
body.dark-mode #latest-values, 
body.dark-mode #average-values {
background-color: #222;
color: #ccc;
border-color: #333; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
} body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
color: #e0e0e0;
}
body.dark-mode a {
color: #4dabf7;
} #theme-toggle {
position: fixed;
bottom: 1rem;
left: 1rem;
z-index: 1000;
padding: 0.5rem 1rem;
border-radius: 8px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
font-size: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#theme-toggle:hover {
background-color: #0056b3;
}
body.dark-mode #theme-toggle {
background-color: #444; 
box-shadow: 0 2px 8px rgba(255,255,255,0.1);
} .presence-box {
background-color: #f5faff;
padding: 1rem;
border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e5e5;
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
.presence-box input[type="password"] {
padding: 8px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 1rem;
width: 100%;
max-width: 300px; 
margin-right: 0.5rem;
}
.presence-box button {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
}
#presence-warning {
color: red;
margin-top: 0.5rem;
display: none;
font-weight: bold;
}
.presence-entry {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #ddd;
}
.presence-entry:last-child {
border-bottom: none;
}
.status {
font-weight: bold;
padding: 0.25rem 0.75rem;
border-radius: 16px;
font-size: 0.95rem;
}
.status.present {
background-color: #c9f7c9;
color: #2e7d32;
}
.status.absent {
background-color: #ffe1e1;
color: #c62828;
}
.status.loading {
color: #666;
} body.dark-mode .presence-box {
background-color: #1e1e1e;
border-color: #333; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
body.dark-mode .presence-entry {
border-color: #444;
}
body.dark-mode .status.present {
background-color: #2e7d32;
color: #c9f7c9;
}
body.dark-mode .status.absent {
background-color: #c62828;
color: #ffe1e1;
}
body.dark-mode input[type="password"] {
background-color: #222;
color: #eee;
border-color: #444;
}
body.dark-mode .presence-box button {
background-color: #444;
}
body.dark-mode #presence-warning {
color: #ff7b7b;
}  body, 
#chart-container, 
#latest-values, 
#average-values, 
#range-buttons button,      
#theme-toggle,              
.presence-box, 
.presence-box input,        
.presence-box button,       
.status,
h1, h2, h3, h4, h5, h6 {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}