/* =========================
   GLOBAL FONT
   ========================= */
.slck-month-wrapper,
.slck-today-box {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}

/* =========================
   DANAŠNJI PRAZNIK – KUTIJA
   ========================= */
.slck-today-box {
    border-radius: 6px;
    padding: 14px 16px;
    background: #f7f7f2;
    border: 1px solid #ddd4b8;
}

.slck-today-date {
    font-weight: 600;
    margin-bottom: 4px;
}

.slck-today-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.slck-today-title a {
    text-decoration: none;
}

.slck-today-note {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.slck-today-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.slck-today-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #c21b1b;
    color: #fff;
}

/* =========================
   MESEČNI KALENDAR – NAVIGACIJA
   ========================= */

.slck-month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #e8dec1;
    border: 1px solid #d4c79d;
    border-bottom: none;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 600;
}

.slck-month-nav--noarrows {
    justify-content: center;
}

.slck-month-nav-title {
    text-align: center;
    text-transform: none;
}

.slck-month-nav-prev,
.slck-month-nav-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d6cbac;
    border: 1px solid #c1b58e;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    color: #333;
}

.slck-month-nav-prev:hover,
.slck-month-nav-next:hover {
    background: #cdbf97;
}

/* =========================
   TABELA – DESKTOP
   ========================= */

.slck-month-table-wrapper {
    overflow-x: auto;
}

.slck-month-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 13px;
    background: #fff;
}

/* Header (DANI / NOVI / STARI / ...) */
.slck-month-table thead {
    background: #f2e7c5;
}

.slck-month-header-row th {
    padding: 4px 6px;
    border-bottom: 1px solid #d4c79d;
    border-right: 1px solid #e2d6b4;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
}

.slck-month-header-row th:last-child {
    border-right: none;
}

/* Kolona “DANI” */
.slck-month-table th.slck-col-dani,
.slck-month-table td.slck-col-dani-val {
    width: 60px;
    text-align: center;
}

/* Redovi */
.slck-month-table tbody tr {
    border-bottom: 1px solid #eee3c9;
}

.slck-month-table td {
    padding: 4px 6px;
    vertical-align: top;
    border-right: 1px solid #f0e4c7;
}

.slck-month-table td:last-child {
    border-right: none;
}

/* Dani (slovo dana + broj) */
.slck-day-num {
    font-size: 13px;
    font-weight: 600;
}

.slck-day-num-small {
    font-size: 11px;
    color: #777;
}

/* Crveno slovo – crvena leva linija */
.slck-row-day.slck-row-red {
    border-left: 3px solid #c21b1b;
}

/* Danas */
.slck-row-day.slck-row-today {
    background: #fff8e5;
}

/* Praznik / opis */
.slck-col-title a {
    text-decoration: none;
}

.slck-col-title {
    font-size: 13px;
}

/* Dodatni tekst (Nedelja po Duhovima...) */
.slck-col-note {
    font-size: 12px;
    color: #555;
    margin-top: 1px;
}

/* SLAVA badge u koloni naslova */
.slck-col-slava {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    border: 1px solid #c21b1b;
    color: #c21b1b;
}

/* Badge-ovi u koloni “Tip” */
.slck-col-fasting .slck-badge {
    display: inline-block;
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 3px;
    background: #edf0ff;
    color: #333;
    margin-right: 3px;
}

.slck-col-fasting .slck-badge-red {
    background: #ffe7e7;
    color: #b10000;
}

.slck-col-fasting .slck-badge-slava {
    background: #fff3d6;
    color: #8a5600;
}

/* Crveno slovo – tekst u crvenoj boji kao u originalu */
.slck-row-red .slck-col-title,
.slck-row-red .slck-col-title a,
.slck-row-red .slck-col-note {
    color: #c21b1b;
    font-weight: 600;
}

/* Nedelja (N) – možemo blago da obojimo dan slovce u crveno */
.slck-row-day .slck-col-dani-val .slck-day-num {
    color: #222;
}
.slck-row-day .slck-col-dani-val .slck-day-num:first-letter {
    /* ako budeš hteo, ovde možeš kasnije targetiraš N za nedelju kroz JS,
       za sada ostavljamo neutralno */
}

/* =========================
   RESPONSIVE (telefon)
   ========================= */
@media (max-width: 768px) {

    /* Zadržavamo tabelu ali je zbijamo + horizontalni scroll ako treba */
    .slck-month-table {
        font-size: 12px;
        min-width: 520px;
    }

    .slck-month-header-row th {
        padding: 3px 4px;
        font-size: 10px;
    }

    .slck-month-table td {
        padding: 3px 4px;
    }

    .slck-month-nav {
        font-size: 14px;
        padding: 5px 8px;
        gap: 12px;
    }

    .slck-month-nav-prev,
    .slck-month-nav-next {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}