/* ===========================
   ÜLDSTIILID
=========================== */

body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background: #f5f5f5;
    color: #333;
}

h2 {
    margin-bottom: 15px;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.login-card {
    width: 300px;
    text-align: center;
}

button {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #2A4D8F;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

button:hover {
    border-color: #b0a200;
}

.btn-small {
    background: #2A4D8F;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.room-grid {
    display: grid;
    /* Muudame minimaalse laiuse 180px peale, et nupud oleksid kompaktsemad */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    /* Piirame terve ruudustiku laiust ja tsentreerime selle ekraanil */
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.room-card {
    background: rgba(0, 0, 0, 0.08) !important; /* Jätame õrna valguskumaga klaasi */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    
    padding: 15px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    
    cursor: pointer;
    text-align: center;
    font-weight: 600; /* 🌟 Teeme kirja veidi paksemaks, et oleks paremini näha */
    
    /* 🌟 MUUDAME TEKSTI TUMEDAKS (sügav põlevkivihall) */
    color: #2d3748 !important; 
    
    /* 🌟 Lisame õrna valge varju tähtede taha, mis eraldab tumeda teksti taustast */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    
    transition: all 0.2s ease-in-out;
}

.room-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.6) !important; /* Muutub peale minnes veidi valgemaks */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}





/* ===========================
   KASSATABELI TÖÖRIISTAD
=========================== */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.toolbar label {
    margin-right: 5px;
}

/* Lukustusnupu olekud */
#lukustaNupp.state-locked {
    background: #ffd6d6;
    color: #800000;
    border-color: #cc7a7a;
}

#lukustaNupp.state-unlocked {
    background: #e0ffd6;
    color: #225500;
    border-color: #7acc7a;
}

/* Teade */
.teade {
    min-height: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: 6B0505;
}

/* ===========================
   KASSATABEL
=========================== */

table {
    border-collapse: collapse;
    width: 100%;
    background: white;
}

th, td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: center;
    font-size: 13px;
}

th {
    background: #e8e8e8;
    font-weight: bold;
}

input {
    width: 70px;
    padding: 4px;
    text-align: right;
    border: none;
    background: #fafafa;
    font-size: 13px;
}

input:focus {
    outline: 2px solid #4a90e2;
    background: #fff;
}

/* Avatud tabeli koguslahtrid */
.kogus-lahter input {
    background: #e8ffe8;
}

/* Hinnapead */
.hind-veeru-pea {
    background: #fff9d6;
}

/* KOKKU veerg */
.kokku-pea {
    background: #f0f8ff;
}

.kokku-rida {
    background: #f0f8ff;
}

#kuuKokku {
    background: #e0f0ff;
    font-weight: bold;
}

.kokku-cell {
    background: #f0f8ff;
    font-weight: bold;
}

/* Summa read */
.summary-row.kogus-row td {
    background: #faf7e8;
}

.summary-row.hind-row td {
    background: #f5efcc;
}

/* ===========================
   ERIVÄRVID
=========================== */

.weekend {
    background: #fff9d6;
}

.holiday {
    background: #ffe6e6;
}

.today {
    outline: 2px solid #ffcc00;
    outline-offset: -2px;
    background: #fff3b0 !important;
}

/* Lukustatud tabel */
.table-locked input {
    background: #f2f2f2 !important;
    color: #555;
}

.table-locked .hind-veeru-pea {
    background: #ffe6e6;
}

/* Arhiivi kast */
.arhiivi-kast {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}

/* Selgitav tekst */
.selgitus {
    margin-top: 15px;
    font-size: 13px;
    color: #555;
}
/* --- Tabeli laiused --- */

table {
    table-layout: fixed;
    width: 100%;
}

/* Kuupäev */
th:first-child,
td:first-child {
    width: 80px;
}

/* Toiduveerud */
.toidu-veeru {
    width: 55px;
}

/* KOKKU veerg */
.kokku-pea,
.kokku-cell,
#kuuKokku {
    width: 90px;
    white-space: nowrap;
}

/* --- Printimisel --- */
@media print {
    header,
    .toolbar,
    #logoutBtn,
    #lukustaNupp,
    #salvestaNupp,
    #arhiiviNupp,
    #prindiNupp,
    #laeAllaNupp {
        display: none !important;
    }

    body {
        margin: 0;
        background: white;
    }

    table {
        font-size: 11px;
    }
}
.vaate-reziim {
    margin-bottom: 10px;
    padding: 8px 12px;
    background: #fff3b0;
    border-left: 4px solid #ffcc00;
    font-size: 14px;
    display: none;
}

.vaate-reziim.lukus {
    background: #ffe6e6;
    border-left-color: #cc0000;
}
/* Kõik tavalised nupud */
button {
    margin-top: 10px;
    background: #2a4d8f;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}
button:hover {
    background: #1d3663;
}

/* Kustutamisnupp – peab ületama ülemise reegli */
button.delete-btn {
    background: #d9534f !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}
button.delete-btn:hover {
    background: #b52b27 !important;
}

.arhiivi-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.arhiivi-tabel th,
.arhiivi-tabel td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: left;
}

.arhiivi-nupud {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.meta p {
    margin: 4px 0;
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 9999; /* ÜLIOLULINE */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 20px 25px;
    border-radius: 8px;
    width: 320px;
    text-align: center;
}


.modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.logitabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}

.logitabel th, .logitabel td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: left;
}

.logitabel th {
  background-color: #f0f0f0;
}




.page-fuajee {
    background-image: url("fuajee.jpg");
}

.page-kassatabel {
    background-image: url("bg-kassatabel.jpg");
}

.page-arhiiv {
    background-image: url("bg-arhiiv.jpg");
}

.page-logid {
    background-image: url("bg-logid.jpg");
}

.page-seaded {
    background-image: url("bg-seaded.jpg");
}

.page-kasutajad {
    background-image: url("bg-kasutajad.jpg");
}
.page-menyy {
    background-image: url("bg-menyy.jpg");
}
.page-pulss {
    background-image: url("bg-pulss.jpg");
}
.page-syvaanalyys {
    background-image: url("bg-syvaanalyys.jpg");
}
.page-parandus {
    background-image: url("bg-parandus.jpg");
}

/* --- PÄISE MENÜÜ --- */

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    
    /* 🌟 KAOTAME VALGE TAUSTA JA JOONE, AGA JÄTAME ASUKOHA SAMAKS */
    background: transparent !important;
    border-bottom: none !important;
    
    position: sticky;
    top: 0;
    z-index: 10;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    
    /* 🌟 TEKST VALGEKS JA LOETAVAKS */
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Kui kasutajanime div-il on eraldi id, tagame ka sellele valge värvi */
#kasutajaNimi {
    color: #ffffff !important;
}

.top-menu {
    display: flex;
    gap: 20px;
}

.top-menu a {
    text-decoration: none;
    font-weight: 600;
    
    /* 🌟 MUUDAME LINGID VALGEKS JA LISAME VARJU */
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    
    padding: 6px 10px;
    border-radius: 6px;
    transition: 0.2s;
}

/* 🌟 KUI HIIREGA LINGILE PEALE LIIKUDA */
.top-menu a:hover {
    background: #ffe28a !important;
    color: #000000 !important;
    text-shadow: none !important; /* Eemaldame varju, kui taust läheb kollaseks */
}

/* --- ARHIIVI TABEL --- */

.arhiivi-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
    background: white;
    border: 1px solid #ccc;
}

.arhiivi-tabel thead th {
    background: #f5f5f5;
    padding: 8px;
    border-bottom: 2px solid #bbb;
    text-align: left;
    font-weight: 600;
}

.arhiivi-tabel tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

.arhiivi-tabel tbody tr:nth-child(even) {
    background: #fafafa;
}

.arhiivi-tabel tbody tr:hover {
    background: #f0f7ff;
}

.arhiivi-tabel tfoot td {
    padding: 8px;
    font-weight: 600;
    background: #f9f9f9;
    border-top: 2px solid #bbb;
}

.arhiivi-tabel tfoot tr:first-child td {
    border-top: 2px solid #ccc;
}

.arhiivi-tabel tfoot tr:last-child td {
    background: #eef7ff;
    font-size: 15px;
}

.arhiivi-tabel td:last-child,
.arhiivi-tabel th:last-child {
    text-align: right;
}

/* --- PRINT LAYOUT (ÜHENDATUD JA KONFLIKTIVABA) --- */
@media print {
    .print-value {
        font-weight: bold !important;
        color: black !important;
    }
}

@media print {
    td, th {
        padding: 4px 6px !important;
        line-height: 0.8 !important;
    }
}

@media print {
    #vaateReziim, #reziimiTeade, .header, .tööriistad-paneel button {
        display: none !important;
    }
}
/* 🌟 PRINTIMISE REEGLID */
@media print {
    /* Toome suure prindipealkirja paberil nähtavale */
    #printTitle {
        display: block !important;
    }
    
    /* Peidame paberilt ära nupud, päise ja ekraanihoiatused */
    .header, .tööriistad-paneel, #vaateReziim, #reziimiTeade, button, input[type="month"] {
        display: none !important;
    }
}
/* ==========================================
   🔍 PRINDIILURAVI: LOGO JA PEALKIRI ÜKSTEISE ALLA
   ========================================== */
@media print {
    #printHeader {
        display: flex !important;
        flex-direction: column !important; /* Tõstab logo ja pealkirja üksteise alla! */
        align-items: center !important;    /* Paneb mõlemad täpselt lehe keskele */
        gap: 10px !important;              /* Jätab logo ja teksti vahele ilusa vahe */
        margin-bottom: 25px !important;
    }

    #printHeader img {
        max-height: 80px !important;       /* Hoiab logo kõrguse kontrolli all */
        width: auto !important;            /* Keelab pildi laiuse venitamise (kaob lömmis efekt!) */
        object-fit: contain !important;
    }

    #printTitle {
        font-size: 24px !important;
        margin: 0 !important;
        text-align: center !important;
    }
}
/* ==========================================
   📱 MOBIILIVAADE: KASSATABEL TÄISEKRAANIL LENNULT
   ========================================== */
@media screen and (max-width: 768px) {
    /* 1. Eemaldame lehe ümbert kogu tühja ruumi ja jura */
    body, .parandus-container, .page-kassatabel {
        padding: 5px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden; /* Hoiab ära lehe enda loksumise */
    }

    /* 2. Teeme päise ja tööriistariba (nupud) kompaktseks reaks */
    .header, .toolbar, .tööriistad-paneel {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .toolbar button, .tööriistad-paneel button {
        flex-grow: 1 !important; /* Nupud jagavad ruumi võrdselt */
        font-size: 12px !important;
        padding: 8px 4px !important;
    }

    /* 3. SAKSA TÄPSUS TABELILE: Tekitame tabelile puhta keritava kesta */
    table, #kassatabel, .sisestus-tabel {
        width: 100% !important;
        display: block !important; /* Lubab konteineril tabelit kontrollida */
        overflow-x: auto !important; /* Tekitab puhta näpuga kerimise ainult tabelile! */
        white-space: nowrap !important; /* Keelab lahtrite tekstide koleda reavahetuse */
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Teeme lahtrid ja input-kastid mobiilis näpule mugavaks */
    th, td {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    td input {
        width: 55px !important; /* Optimaalne laius mobiiliekraanile */
        height: 30px !important;
        font-size: 13px !important;
        padding: 2px !important;
    }
}