/* === Modernne ja Kompaktne Stiil === */

/* == Värvipalett ja Globaalsed Muutujad == */
:root {
    --color-primary: #007bff; /* Sinine (saab muuta brändi värviks) */
    --color-primary-dark: #0056b3;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-success-bg: #e9f7ec;
    --color-warning: #ffc107;
    --color-warning-bg: #fff8e6;
    --color-danger: #dc3545;
    --color-danger-bg: #fbebee;
    --color-info: #17a2b8;
    --color-info-bg: #e8f6f8;

    --color-text: #343a40;
    --color-text-muted: #6c757d;
    --color-bg: #f8f9fa; /* Helehall taust */
    --color-container-bg: #ffffff; /* Valge konteiner */
    --color-border: #dee2e6; /* Peenemad piirjooned */

    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-base: 0.95rem; /* Veidi kompaktsem baasfont */
    --line-height-base: 1.6;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    --border-radius: 0.3rem; /* Pehmemad nurgad */
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

/* == Baas Stiilid == */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* == Konteiner == */
.container {
    width: 90%;
    max-width: 1000px; /* Veidi laiem maksimaalne laius */
    margin: var(--spacing-lg) auto;
    background: var(--color-container-bg);
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

/* == Tüpograafia == */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    font-weight: 600; /* Veidi paksemad pealkirjad */
}

h1 { font-size: 1.8rem; border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-sm); }
h2 { font-size: 1.5rem; margin-top: var(--spacing-lg); }
h3 { font-size: 1.25rem; margin-top: var(--spacing-md); }
p { margin-bottom: var(--spacing-md); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-lg) 0;
}

/* == Vormid == */
form div {
    margin-bottom: var(--spacing-md);
}

label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    font-size: 0.9em; /* Veidi väiksem label */
    color: var(--color-text-muted);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"], /* Lisatud juhuks kui tekib */
input[type="email"],  /* Veendu, et see on siin */
input[type="tel"], 
select,
textarea { /* Lisatud textarea */
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md); /* Vähendatud polsterdus */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: #fff;
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Aja valikud */
.time-select select {
     width: auto;
     display: inline-block;
     padding: var(--spacing-sm); /* Kohandatud polsterdus */
     margin-right: var(--spacing-xs);
}
.time-select {
    display: flex; /* Pane : label kõrvale */
    align-items: center;
}
.time-select label { /* Kui label on samas div-is */
    margin-right: var(--spacing-sm);
    margin-bottom: 0; /* Eemalda labeli alumine margin */
}

button[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg); /* Polsterdus */
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}

button[type="submit"]:hover {
    background-color: var(--color-primary-dark);
    text-decoration: none; /* Eemalda linkidelt tulnud alljoon */
}
button[type="submit"]:active {
    transform: translateY(1px); /* Väike vajutusefekt */
}

/* Vormi vabasta nupp (võib olla punane) */
form[action*="release.php"] button[type="submit"] {
    background-color: var(--color-danger);
}
form[action*="release.php"] button[type="submit"]:hover {
    background-color: #c82333; /* Tumedam punane */
}


/* == Nimekirjad (sensorite andmed jms) == */
ul.sensor-list { /* Kasuta spetsiifilist klassi */
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

ul.sensor-list li {
    margin-bottom: var(--spacing-xs); /* Väiksem vahe listi elemendi ja selgituse vahel */
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: #fff; /* Valge taust eristamiseks */
    display: flex; /* Ritta sättimiseks */
    justify-content: space-between; /* Ruumi jätmiseks staatuse indikaatorile */
    align-items: center;
    font-size: 0.95em; /* Veidi kompaktsem tekst listis */
}

ul.sensor-list li span { /* Staatusetekst listis */
    font-style: normal; /* Eemalda kaldkiri */
    font-size: 0.9em;
    margin-left: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 1em; /* Pill shape */
    white-space: nowrap; /* Väldi murdumist */
    font-weight: 500;
}

/* Staatuse indikaatorid listides (värvilised taustad) */
ul.sensor-list li .status-good { background-color: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
ul.sensor-list li .status-moderate { background-color: var(--color-warning-bg); color: #856404; border: 1px solid var(--color-warning); } /* Tumedam kollane tekst */
ul.sensor-list li .status-bad { background-color: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }

/* === UUS REEGEL SENSORITE SELGITUSTELE === */
.sensor-explanation {
    font-size: 0.85em; /* Veidi väiksem tekst */
    color: var(--color-text-muted); /* Helehall tekst */
    margin-top: var(--spacing-xs); /* Väike vahe ülemisest listi elemendist */
    margin-left: var(--spacing-sm); /* Väike taane vasakult */
    margin-bottom: var(--spacing-lg); /* Suurem vahe enne järgmist sensorit */
    padding-left: var(--spacing-sm); /* Lisa polsterdus, kui on taane */
    border-left: 2px solid var(--color-border); /* Väike vasak joon eristamiseks */
    line-height: 1.5; /* Parem loetavus pikemal tekstil */
}
/* === UUE REEGLI LÕPP === */


/* == Staatuseteated == */
.status-message {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-weight: 500;
}

.status-message.error {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.status-message.success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success);
}
.status-message.info { /* Lisame info stiili ka */
    background-color: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info);
}
.status-message.warning { /* Lisatud warning */
    background-color: var(--color-warning-bg);
    color: #856404;
    border-color: var(--color-warning);
}


/* == Kasutaja Info ja Lingid == */
.user-info {
    font-size: 0.9em;
    color: var(--color-text-muted);
    text-align: right;
    margin-bottom: var(--spacing-md);
}
.user-info a {
    font-weight: 500;
}

.back-link {
    margin-top: var(--spacing-md); /* Väiksem vahe linkidel */
    font-size: 0.9em;
}
.external-link { /* Stiil välimisele lingile */
     font-size: 0.9em;
     color: var(--color-text-muted);
}
.external-link a {
    color: var(--color-secondary); /* Hallikam link */
}
.external-link a:hover {
    color: var(--color-text);
}

/* == Tabelid (schedule.php, calendar.php, admin.php) == */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    overflow: hidden; /* Vajalik border-radius'e jaoks thead/tbody */
}

th, td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md); /* Kohandatud polsterdus */
    text-align: left;
    vertical-align: middle; /* Keskjooksnud tekst */
    font-size: 0.9em; /* Kompaktsem tabel */
}

th {
    background-color: #e9ecef; /* Helehall päis */
    font-weight: 600;
    color: var(--color-text);
}

tbody tr:nth-child(odd) {
    background-color: var(--color-bg); /* Zebra triibud */
}

tbody tr:hover {
    background-color: #f1f3f5; /* Kerge hover efekt */
}

/* Tabeli staatuse värvid */
.status-booked { color: var(--color-danger); font-weight: 600; }
.status-past { color: var(--color-text-muted); font-style: italic; }
.status-free { color: var(--color-success); font-weight: 600; }

.current-state {
    margin-top: var(--spacing-md);
    font-weight: 600;
    padding: var(--spacing-sm) 0;
}

/* == Jalus == */
footer {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    font-size: 0.85em;
    color: var(--color-text-muted);
}
footer h3 { font-size: 1.1em; margin-bottom: var(--spacing-sm); color: var(--color-text); }
footer h4 { font-size: 1em; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); color: var(--color-text); }
footer ul { margin: var(--spacing-sm) 0 var(--spacing-md) 0; padding-left: var(--spacing-md); list-style: disc; }
footer ul li {
    margin-bottom: var(--spacing-xs);
    border: none;
    background: none;
    padding: 0;
    display: list-item; /* Taasta listi välimus */
    font-size: 1em; /* Taasta baasfont listis */
}
footer ul li span { /* Eemalda lisastiilid jaluse listi spanidelt */
    font-style: normal;
    font-size: inherit;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
    white-space: normal;
    font-weight: normal;
    background-color: transparent;
    color: inherit;
    border: none;
}


/* == Graafikud == */
.chart-container {
    width: 100%;
    max-width: 700px; /* Veidi laiem */
    margin: var(--spacing-lg) auto;
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background-color: #fff; /* Valge taust graafikule */
}

/* == Kalender (calendar.php) == */
.calendar { width: 100%; max-width: 800px; margin: var(--spacing-lg) auto; }
.calendar table { box-shadow: none; border-radius: 0; } /* Eemalda topeltvari */
.calendar th, .calendar td {
    padding: var(--spacing-sm); /* Väiksem padding kalendris */
    text-align: center;
    vertical-align: top;
    height: 70px; /* Fikseeritud kõrgus */
    font-size: 0.85em;
}
.calendar th { background-color: #e9ecef; font-weight: 600; }
.calendar td.blank { background-color: var(--color-bg); }
.calendar td.today { background-color: var(--color-info-bg); font-weight: bold; border: 1px solid var(--color-info); }
.calendar td.booked { background-color: var(--color-danger-bg); color: var(--color-danger); font-weight:bold; }
.calendar td.booked.today { background-color: #fdd8dc; } /* Kui on tänane JA broneeritud */

.calendar .day-number { font-size: 1.2em; display: block; margin-bottom: var(--spacing-xs); font-weight: 600; }
.calendar .nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); }
.calendar .nav a { text-decoration: none; padding: var(--spacing-xs) var(--spacing-sm); background-color: #e9ecef; border-radius: var(--border-radius); color: var(--color-text); font-weight: 500;}
.calendar .nav a:hover { background-color: #ced4da; text-decoration: none; }
.calendar .nav h2 { margin: 0; font-size: 1.3em; }
.calendar .legend { text-align: center; margin-top: var(--spacing-sm); font-size: 0.8em; }
.calendar .legend span { display: inline-block; width: 12px; height: 12px; margin-right: var(--spacing-xs); vertical-align: middle; border: 1px solid #ccc; }
.calendar .legend .booked-color { background-color: var(--color-danger-bg); }
.calendar .legend .today-color { background-color: var(--color-info-bg); border-color: var(--color-info); }


/* == Reageeriv disain (väiksematele ekraanidele) == */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }

    /* Tabelid võivad vajada horisontaalset kerimist */
    .table-responsive { /* Ümbritse tabel selle diviga HTML-is, kui vaja */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Sujuvam kerimine iOSis */
    }

    th, td {
       font-size: 0.85em; /* Veel väiksem font tabelites */
       padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Muuda listid kompaktsemaks */
    ul.sensor-list li {
        padding: var(--spacing-sm);
        font-size: 0.9em;
        flex-direction: column; /* Pane sisu üksteise alla */
        align-items: flex-start; /* Joonda vasakule */
    }
    ul.sensor-list li span {
        margin-left: 0; /* Eemalda vasak margin */
        margin-top: var(--spacing-xs); /* Lisa ruumi üles */
        align-self: flex-start; /* Veendu, et on vasakul */
    }
    /* Kohanda ka selgitusi mobiilis */
    .sensor-explanation {
        margin-left: 0;
        padding-left: var(--spacing-sm);
        font-size: 0.8em;
    }

    .calendar td, .calendar th {
        height: auto; /* Lase kõrgusel kohaneda */
        min-height: 50px;
        font-size: 0.75em;
    }
    .calendar .day-number { font-size: 1em; }
    .calendar .nav { flex-direction: column; }
    .calendar .nav h2 { margin: var(--spacing-sm) 0; }
}

/* Admin lehe stiilid (lisatud siia, et kõik oleks koos) */
.admin-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}
.admin-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.user-table th, .user-table td {
    vertical-align: middle;
}
.user-table form {
    display: inline-block; /* Hoia nupp real */
    margin: 0;
}
 .user-table button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85em;
    background-color: var(--color-danger);
 }
 .user-table button:hover {
     background-color: #c82333;
 }
.is-admin-label {
    font-weight: bold;
    color: var(--color-primary);
}
/* Stiil checkboxile */
.checkbox-group label {
     display: inline-block;
     margin-left: var(--spacing-sm);
     font-weight: normal;
     color: var(--color-text); /* Taasta tavaline tekstivärv */
 }
 
 /* == Kalendri Detailide Stiilid (Täiendatud) == */
.calendar td {
    height: 140px; /* Suurenda veelgi kõrgust, et info mahuks paremini */
    vertical-align: top; /* Joonda sisu üles */
    padding: var(--spacing-xs) 2px; /* Vähenda horisontaalset paddingut, et rohkem ruumi oleks */
}

.calendar .day-number {
    font-size: 1.2em; /* Veidi väiksem, kui liiga suur tundub */
    position: absolute;
    top: 2px;
    right: 4px;
    opacity: 0.8; /* Muuda veidi läbipaistvamaks */
}

.calendar .booking-details {
    text-align: left;
    padding: 2px; /* Väike sisemine padding */
    font-size: 1.05em; /* Suurenda veidi baasfonti detailide jaoks */
    line-height: 1.3; /* Tihedam reavahe detailide jaoks */
    margin-top: 18px; /* Jäta ruumi päeva numbrile */
    position: relative; /* Et nuppu saaks absoluutselt paigutada */
    height: calc(100% - 20px); /* Proovi täita ülejäänud ruum */
    display: flex; /* Kasuta flexboxi paigutamiseks */
    flex-direction: column; /* Aseta elemendid üksteise alla */
    justify-content: flex-start; /* Joonda elemendid üles */
}

.calendar .booking-details strong.booking-title { /* Stiil pealkirjale "Broneeritud" */
    display: block;
    font-weight: bold;
    color: var(--color-danger); /* Punane värv */
    margin-bottom: var(--spacing-xs); /* Väike vahe alla */
    border-bottom: 1px solid var(--color-danger-bg); /* Kerge joon alla */
    padding-bottom: 1px;
    font-size: 1.1em; /* Veidi suurem pealkiri */
}

.calendar .booking-details span {
    display: block; /* Iga detail oma reale */
    color: var(--color-text); /* Tumedam tekst paremaks loetavuseks */
    margin-bottom: 1px; /* Väike vahe ridade vahel */
    word-wrap: break-word;
    font-size: 0.9em; /* Veidi väiksem font detailidele */
    padding-left: var(--spacing-xs); /* Väike taane */
}
.calendar .booking-details span::before { /* Lisa väike ikoon või täpp detailide ette */
     /* content: '• '; */ /* Näide täpiga */
     /* color: var(--color-text-muted); */
     /* margin-right: 3px; */
}

.calendar .booking-details span.internal-user { /* Stiil "(Lisaja: ...)" tekstile */
    font-size: 0.8em;
    opacity: 0.7;
    font-style: italic;
    margin-top: var(--spacing-xs); /* Natuke suurem vahe enne seda */
}

.calendar .booking-details form {
    margin-top: auto; /* Lükka vorm/nupp lahtri alaossa */
    padding-top: var(--spacing-xs); /* Väike vahe üleval */
}

.calendar .booking-details button {
    width: 100%;
    padding: 4px 5px; /* Veidi suurem nupp */
    font-size: 0.95em;
    /* Ülejäänud nupu stiilid jäävad samaks */
}

.calendar th, .calendar td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-xs); /* Lisa ülevalt rohkem paddingut */
    text-align: center;
    vertical-align: top;
    height: 145px; /* Veel kõrgem lahter, et info kindlasti mahuks */
    font-size: 0.8em;
    position: relative; /* Vajalik päeva numbri paigutamiseks */
}

.calendar .day-number {
    font-size: 1.3em; /* Veidi väiksem kui enne */
    font-weight: 600;
    position: absolute;
    top: 4px; /* Natuke madalamale */
    right: 5px;
    color: var(--color-text-muted);
    z-index: 1; /* Veendu, et on teiste elementide peal */
}

.calendar .booking-details {
    text-align: left;
    padding: 2px;
    font-size: 1.1em;
    line-height: 1.3;
    margin-top: 22px; /* Suurem vahe, et number mahuks kindlasti ära */
    position: relative;
    height: calc(100% - 25px); /* Korrigeeritud kõrgus */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    margin: var(--spacing-sm);
    transition: background-color 0.2s ease;
}
.btn:hover {
    background-color: var(--color-primary-dark);
    color: white;
    text-decoration: none;
}
.btn + .btn {
    margin-left: var(--spacing-sm);
}
/* Kohandused väiksemale ekraanile */
@media (max-width: 768px) {
     .calendar th, .calendar td { height: 120px; } /* Natuke vähem ruumi mobiilis */
     .calendar .booking-details { font-size: 1em; margin-top: 15px; }
     .calendar .booking-details strong.booking-title { font-size: 1em; }
     .calendar .booking-details span { font-size: 0.85em; }
     .calendar .booking-details button { font-size: 0.9em; padding: 3px 4px; }
}

.checkbox-group input[type="checkbox"] {
     width: auto; /* Ära venita checkboxi laiaks */
     vertical-align: middle;
 }