/* --- RESPONZIVNÍ DÁVKOVÁNÍ --- */
.dosage-grid {
    display: flex;
    flex-direction: column; /* Na mobilu položky pod sebou */
    background-color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 16px;
}

/* --- Výchozí stav (Mobil) - Dva sloupce vedle sebe (50/50) --- */
.dosage-item {
    display: flex;
    flex-direction: row;
    padding: 0; /* ZMĚNA 1: Zrušili jsme padding na řádku */
}

/* Levý sloupec na mobilu */
.dosage-weight {
    width: 50%;
    border-right: 1px solid #eaeaea;
    padding: 10px 20px 10px 0; /* ZMĚNA 2: Padding je teď přímo na prvku s čárou (nahoře, vpravo, dole, vlevo) */
    text-align: left;
}

/* Pravý sloupec na mobilu */
.dosage-amount {
    width: 50%;
    padding: 10px 0 10px 20px; /* ZMĚNA 3: Padding je teď přímo na pravém prvku */
    text-align: left;
}

/* Hlavička na mobilu */
.dosage-item:first-child {
    margin-bottom: 0; /* Můžeme zrušit, čára hlavičky teď krásně naváže na data */
}
.dosage-item:first-child .dosage-weight,
.dosage-item:first-child .dosage-amount {
    font-weight: bold;
    color: #000;
}


/* --- PC ZOBRAZENÍ (Všechno se přeskládá vodorovně) --- */
@media (min-width: 992px) {
    .dosage-grid {
        flex-direction: row;
    }

    .dosage-item {
        flex: 1; /* Sloupce se rovnoměrně roztáhnou */
        flex-direction: column; /* Hodnoty se dají nad sebe */
        padding: 0;
    }

    /* Vlastní hodnoty uvnitř tabulky */
    .dosage-weight {
        width: 100%;
        text-align: center;
        padding-right: 0; /* Zrušíme mobilní padding */
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-right: none; /* Zrušíme svislou čáru z mobilu... */
        border-bottom: 1px solid #eaeaea; /* ...a nahradíme ji vodorovnou! */
    }

    .dosage-amount {
        width: 100%;
        padding-left: 0; /* Zrušíme mobilní padding */
        text-align: center;
    }

    /* KOUZLO S LEVÝM SLOUPCEM (Hlavička na PC) */
    .dosage-item:first-child {
        flex: 0 0 auto;
        margin-bottom: 0; /* Zrušíme mobilní odskok */
    }

    .dosage-item:first-child .dosage-weight,
    .dosage-item:first-child .dosage-amount {
        text-align: left;
    }

    .dosage-item:first-child .dosage-weight {
        padding-right: 40px; /* Zajišťuje dokonalé napojení vodorovné čáry */
    }
}

/* --- TABULKA PRO ŠTĚŇATA --- */
.puppy-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 15px; /* Mírně menší font pro matici */
}

.puppy-table th,
.puppy-table td {
    padding: 12px 8px;
    text-align: left;
    vertical-align: middle;
}

/* První řádek (Hlavička) má jemnou čáru zespodu */
.puppy-table tr:first-child {
    border-bottom: 1px solid #eaeaea;
    white-space: nowrap;
}

/* Hlavičky s daty (váha) nahoře */
.puppy-table tr:first-child th {
    font-weight: normal;
    color: #000;
}

/* Gramy v tabulce */
.puppy-table td {
    font-weight: 500;
    color: #000;
    white-space: nowrap;
}

/* Pro telefony: zajistí, že se tabulka nezmáčkne, ale půjde posouvat prstem */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #F4F4F4; /* Pokud chceš jemný rámeček kolem celé tabulky */
}