/* --- FUNDAMENTY I ZMIENNE --- */
:root {
    --excel-green: #217346;
    --excel-header: #d9d9d9;
    --excel-border: #cccccc;
    --row-even: #f3f3f3;
}

* { box-sizing: border-box; }

html, body {
    height: auto;
    overflow-x: hidden; 
    width: 1080px;
    background-color: #222;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.excel-container {
    width: 1080px;
    min-width: 1080px;
    max-width: 1080px;
    background: white;
    overflow: hidden;
}

/* --- NAGŁÓWEK --- */
header { 
    background: var(--excel-green); 
    color: white; 
    padding: 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

header button {
    background: rgba(255,255,255,0.2);
    border: 3px solid white; 
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 32px;
}

header button:active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.95);
}

#mainTitle { font-size: 40px; font-weight: bold; }

/* Specyficzne przyciski w nagłówku */
#weekBtn, #restoreBtn, #inventoryBtn {
    background: var(--excel-green) !important;
    color: white !important;
    border: 3px solid white !important;
    font-weight: bold;
    min-width: 80px;
}

#weekBtn:active, #restoreBtn:active, #inventoryBtn:active {
    background: #1a5a36 !important;
    transform: scale(0.95);
}

/* --- ZAKŁADKI I TABELE --- */
.tab-content { 
    display: none; 
    overflow-x: auto; 
    width: 1080px;
    -webkit-overflow-scrolling: touch; 
}
.tab-content.active { display: block; }

table { 
    border-collapse: collapse; 
    table-layout: fixed; 
    width: 2200px; /* Zwiększamy, żeby na pewno wszystko się zmieściło */
    border: 3px solid #666;
}

th, td { 
    border: 2px solid #888 !important;
    padding: 25px 10px; 
    text-align: center;
    font-size: 32px;
}

th { 
    background: var(--excel-header); 
    font-weight: bold; 
    color: #000;
    border-bottom: 4px solid #555 !important;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
}

/* Stylizacja wierszy */
tr:nth-child(even) { background-color: var(--row-even); }
tr:nth-child(odd) { background-color: #ffffff; }
tr:active { background-color: #e2eadd !important; }

td b { font-size: 34px; }

/* Elementy specjalne tabeli */
.col-gap {
    border-left: 4px solid #444 !important;
    border-right: 4px solid #444 !important;
    background: #bbb !important;
}

.summary-row td {
    border-top: 5px double var(--excel-green) !important;
    background: #d0d0d0 !important;
    color: #000;
    font-weight: bold;
    font-size: 36px;
}

.final-green-bar {
    background-color: var(--excel-green) !important;
    height: 30px;
    border: none !important;
}

/* --- MODAL (OKNA) --- */
#modal {
    display: none; position: fixed; top: 0; left: 0; width: 1080px; height: 100vh;
    background: rgba(0,0,0,0.85); z-index: 1000; justify-content: center; align-items: center;
}

.modal-box { 
    background: white; 
    width: 950px !important; 
    min-width: 950px !important;
    max-width: 950px !important;
    padding: 60px; 
    border-radius: 30px; 
    border-top: 25px solid var(--excel-green);
    box-sizing: border-box;
    overflow: hidden;
}

.modal-box label { 
    display: block; 
    margin-top: 30px; 
    font-size: 32px; 
    font-weight: bold; 
    color: #555; 
}

.modal-box input { 
    width: 100%; 
    padding: 30px; 
    margin-top: 15px; 
    border: 2px solid #ccc; 
    border-radius: 15px; 
    font-size: 44px; 
    box-sizing: border-box; 
}

/* Inwentaryzacja input */
.inv-input {
    width: 150px; 
    padding: 15px; 
    font-size: 38px !important; 
    text-align: center; 
    border: 2px solid #ccc; 
    border-radius: 10px;
    touch-action: manipulation;
}

.btn-group { display: flex; gap: 10px; margin: 30px 0; width: 100%; }
.btn-group button { 
    flex: 1; 
    padding: 30px 5px; 
    font-size: 30px; 
    border: 2px solid #888; 
    border-radius: 15px; 
    background: #f8f8f8;
    white-space: nowrap;
    overflow: hidden;
}
.btn-group button.active { 
    background: var(--excel-green); 
    color: white; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}

.footer-btns { display: flex; justify-content: space-between; margin-top: 60px; gap: 30px; }
.btn-save { background: var(--excel-green); color: white; border: none; padding: 40px; border-radius: 15px; flex: 2; font-weight: bold; font-size: 40px; }
.btn-del { background: #dc3545; color: white; border: none; padding: 40px; border-radius: 15px; flex: 1; font-weight: bold; font-size: 36px; }
.btn-reset { background: #f44336; color: white; border: none; padding: 40px; border-radius: 15px; flex: 1; font-size: 36px; font-weight: bold; }
.btn-cancel { background: #6c757d; color: white; border: none; padding: 40px; border-radius: 15px; flex: 1; font-size: 36px; }

/* --- ZAKŁADKA 4 (DRUK ZBIORCZY) --- */
.p-head { 
    background: #333; 
    color: white; 
    padding: 20px; 
    text-align: center; 
    font-size: 38px; 
    margin: 30px 0 0; 
    border: 3px solid #000;
}
.p-tab { 
    width: 100%; 
    border-collapse: collapse; 
    border: 3px solid #000; 
}
.p-tab th { 
    background: #d9d9d9 !important; 
    border: 1px solid #000; 
    padding: 15px; 
    font-size: 28px;
    color: #000;
}
.p-tab td { 
    border: 1px solid #888; 
    padding: 15px; 
    text-align: center; 
    font-size: 30px; 
}
.p-tab tr:nth-child(even) { background-color: #f2f2f2; }

/* --- SYSTEM DRUKOWANIA --- */
@media print {
    /* 1. Ukrywamy zbędne elementy */
    header, #switchBtn, #addBtn, #copyBtn, #restoreBtn, #inventoryBtn, #weekBtn, #modal, .footer-btns, div[style*="height"] {
        display: none !important;
    }

    /* 2. Ukrywamy wszystkie zakładki domyślnie */
    .tab-content { 
        display: none !important; 
    }

    /* 3. Pokazujemy TYLKO aktywną zakładkę */
    .tab-content.active { 
        display: block !important; 
        width: 100% !important; 
        background: white !important;
    }

    /* 4. Formatowanie tabeli w druku */
    table, .p-tab {
        width: 100% !important;
        border-collapse: collapse !important;
        border: 2px solid #000 !important;
        table-layout: auto !important;
    }

    th, td {
        border: 1px solid #000 !important;
        font-size: 18px !important; 
        padding: 10px 5px !important; 
        line-height: 1.2 !important;
        color: #000 !important;
    }

    /* Nagłówki h3 (Recepta / Druk Zbiorczy) */
    h3, .p-head {
        display: block !important;
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 2px solid #000 !important;
        padding: 10px !important;
        font-size: 24px !important;
        margin: 15px 0 5px 0 !important;
        -webkit-print-color-adjust: exact !important;
    }
    
    /* Zachowanie czarnego tła dla Zakładki 4 w druku jeśli chcesz */
    .p-head {
        background: #333 !important;
        color: white !important;
    }

    @page {
        size: A4 portrait;
        margin: 10mm 5mm; 
    }
    
    /* Skalowanie dla Tab 2 i 3 */
    #tab2.active, #tab3.active {
        zoom: 0.94;
        transform: scale(0.94);
        transform-origin: top left;
    }
}

/*  */

/* Blokada zoomu dla wszystkich pól wejściowych w każdym modalu */
#modal input, 
#modal select, 
#modal button,
.modal-box input {
    font-size: 44px !important; /* System nie zoomuje powyżej 16px, 44px to pewność */
    touch-action: manipulation;  /* Blokuje zoom przy szybkim stuknięciu */
}

/* ustawienie strony do druku z zakładki 4 */
@media print {
    /* 1. Wymuszenie szerokości widoku ekranowego na papierze */
    body {
        width: 1080px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .excel-container, .tab-content.active, .p-wrap {
        width: 1080px !important;
        display: block !important;
    }

    /* 2. Skalowanie, aby 1080px zmieściło się na szerokości A4 */
    #tab3.active {
        /* 0.65 - 0.70 to zazwyczaj idealne proporcje, by 1080px weszło na szerokość A4 */
        zoom: 0.68; 
        transform: scale(0.68);
        transform-origin: top left;
        page-break-inside: avoid;
    }

    /* 3. Ukrycie wszystkiego co nie jest tabelą (na wypadek gdyby coś zostało) */
    header, button, #modal {
        display: none !important;
    }

    /* 4. Reset marginesów drukarki, by nie ucinało boków */
    @page {
        size: A4 portrait;
        margin: 0;
    }
}


@media print {
    /* WYMUSZENIE KOLORÓW NA TELEFONIE */
    * {
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Fix dla tabeli - wymuszenie wyświetlania tła komórek */
    .p-tab th, .p-tab td, .p-head, tr:nth-child(even) {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}


@media print {
    /* 1. Skalowanie bez zmian, aby utrzymać szerokość i 1 stronę */
    #tab3.active {
        display: block !important;
        width: 1080px !important;
        transform: scale(1.30, 0.92) !important;
        transform-origin: top left !important;
        margin-left: 20px !important; 
    }

    /* 2. Treść tabeli (Nazwy, Nr, Dawki): podniesiona z 19px na 21px */
    .p-tab td, 
    .p-tab td b, 
    .p-tab td span {
        font-size: 25px !important; 
        padding:16px 10px !important; 
        line-height: 1.1 !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* 3. Suma i Nagłówki osób: podniesione z 23px na 25px */
    .p-head, 
    #tab3.active tr[style*="background:#eee"] td {
        font-size: 25px !important; 
        font-weight: bold !important;
    }

    /* 4. Nagłówki kolumn: podniesione z 17px na 19px */
    .p-tab th {
        font-size: 23px !important;
        padding: 10px !important;
        background-color: #d9d9d9 !important;
    }

    /* 5. Utrzymanie blokad druku */
    .p-tab {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .print-spacer {
        height: 20px !important; 
    }
}

/* -----------------------------------------*/
/* blokowania belek zielonych u góry strony */
/* -----------------------------------------*/
html, body {
    height: auto;
    overflow-x: visible; /* Zmień z hidden na visible */
    width: 1080px;
    background-color: #222;
    margin: 0;
}

.excel-container {
    width: 1080px;
    background: white;
    overflow: visible; /* Zmień z hidden na visible */
}
header { 
    background: var(--excel-green); 
    color: white; 
    padding: 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    
    /* TO JEST KLUCZOWE: */
    position: -webkit-sticky; /* Wsparcie dla starszych tabletów */
    position: sticky;
    top: 0;
    z-index: 9999;
}


/* -----------------------------------------*/
/* czcioni i style dla wydruku w zakładce 3 */
/* -----------------------------------------*/

@media print {
    /* 1. Nr, Doba, Potrzeba (Kolumny 1, 3, 4) - Czcionka 24px */
    #tab2 table td:nth-child(1),
    #tab2 table td:nth-child(3),
    #tab2 table td:nth-child(4) {
        font-family: 'Arial', sans-serif !important;
        font-size: 26px !important;
        padding: 10px !important;
    }

    /* 2. Lekarstwo (Kolumna 2) - Czcionka 30px, Pogrubiona */
    #tab2 table td:nth-child(2), 
    #tab2 table td:nth-child(2) b {
        font-family: 'Verdana', sans-serif !important;
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    /* 3. ZAMÓWIĆ (Kolumna 5) - Czcionka 38px, Czerwona/Czarna */
    #tab2 table td:nth-child(5) {
        font-family: 'Arial Black', sans-serif !important;
        font-size: 26px !important;
        color: #000 !important; /* Na wydruku lepiej czarny lub ciemny czerwony */
        background-color: #fff9e6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ukrycie tła strony dla czystości wydruku */
    #tab2 {
        background: white !important;
        padding: 0 !important;
    }
}


/* -----------------------------------------*/
/* szerokosć nagłówków tabel */
/* -----------------------------------------*/


@media print {
    /* Wymuszenie równej szerokości dla h3 i tabeli */
    #tab2 h3, #tab2 table {
        width: 1040px !important;
        min-width: 1040px !important;
        max-width: 1040px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Usunięcie zaokrągleń rogów w druku (często wyglądają źle na papierze) */
    #tab2 h3 {
        border-radius: 0 !important;
    }
}


@media print {
    @page {
        size: A4 portrait;
        margin: 0; /* Wyłącza adresy URL i daty */
    }

    /* Ukrywamy wszystko, co nie jest aktywne */
    .tab-content {
        display: none !important;
    }

    /* Pokazujemy TYLKO aktywną zakładkę */
    .tab-content.active {
        display: block !important;
        margin: 0 !important;
        /* Bezpieczny margines od góry kartki, by nie ucięło nagłówka */
        padding-top: 20mm !important; 
        padding-left: 5mm !important;
        padding-right: 5mm !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: white !important;
    }

    /* Specyficzne skalowanie dla Zakładki 4 (Druk Zbiorczy), 
       aby zmieścić szerokie tabele na A4 */
    #tab3.active {
        zoom: 0.7; /* Dopasowanie do szerokości papieru */
        transform: scale(0.7);
        transform-origin: top left;
        width: 1400px !important; /* Pozwala tabeli się rozwinąć przed skalowaniem */
    }

    /* Specyficzne ustawienia dla Zakładki 3 (Recepta), 
       żeby h3 i tabela były równe */
    #tab2.active h3, #tab2.active table {
        width: 1000px !important;
        margin: 0 auto 20px auto !important;
    }
}

@media print {
    /* Wymuszenie odstępu od góry kartki tylko dla Zakładki 3 */
    #tab2.tab-content.active {
        display: block !important;
        padding-top: 25mm !important; /* Zwiększony margines bezpieczeństwa (2.5 cm) */
        margin-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    /* Upewnienie się, że pierwszy nagłówek (np. TATA) nie ma ujemnego marginesu */
    #tab2.active h3:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/* kolumna widczne na recepcie */

/* Kolorystyka dla wyboru Tak/Nie w modalu */
#mRecepta button.active {
    background: var(--excel-green) !important;
    color: white !important;
}

/* Styl dla nowej kolumny w tabeli głównej */
.col-recepta {
    font-size: 24px !important;
    color: #666;
}