@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --primary-color: #2563eb;
    --bg-color: #f8fafc;
    --border-color: #e2e8f0;
    --booked-color: #ef4444;
    --available-color: #ffffff;
}
body,
html {
    scroll-behavior: smooth;
    font-family: "Roboto", sans-serif;
}
.btnButton{
    background-color: #009090;
    color: #fff;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 0.8rem;
    transition: 0.2s ease;
}
.btnButton:hover{
    background-color: #007e7e;
}
.btnHref{

}

.calendar-grid {
        display: grid;
        grid-template-columns: 1fr;
        background-color: #fff;
        border: 1px solid #e5e7eb;
    }

    /* Grid dla komputerów (Desktop): 7 kolumn */
    @media (min-width: 768px) {
        .calendar-grid {
            grid-template-columns: repeat(7, 1fr);
        }
    }

    .day-cell {
        min-height: 120px;
        border: 1px solid #f3f4f6;
        transition: all 0.2s;
    }

    @media (min-width: 768px) {
        .day-cell { min-height: 160px; }
    }

    .day-cell.selected {
        background-color: #eff6ff;
        box-shadow: inset 0 0 0 2px #009090;
    }

    .res-badge {
        font-size: 11px;
        padding: 4px;
        margin-bottom: 4px;
        border-radius: 6px;
        background-color: #009090;
        color: white;
    }