body {
}
.section-divider {
    border: none;
    border-top: 1px solid #eef1f6;
    margin: 10px 0;
}
.div_grid_res {
    display:flex;
    gap:15px;
}
.sub-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #7c8aa3;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
}

.rates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.rates-row {
    display: flex;
    gap: 6px;
    font-size: 12.5px;
}

    .rates-row .k {
        color: #7c8aa3;
    }

    .rates-row .v {
        font-weight: 700;
        color: #445068;
    }
.grid-kamata {
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.grid-kamata thead th {
    background: #183b73;
    color: #fff;
    text-align: left;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .grid-kamata thead th.col-num {
        text-align: right;
    }
.grid-kamata {
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

    .grid-kamata thead th {
        background: #183b73;
        color: #fff;
        text-align: left;
        padding: 9px 16px;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

        .grid-kamata thead th.col-num {
            text-align: right;
        }

    .grid-kamata td {
        padding: 7px 16px;
        color: #1e2a3a;
        border-top: 1px solid #eef1f6;
    }

    .grid-kamata tbody tr:first-child td {
        border-top: none;
    }

    .grid-kamata .col-iznos {
        font-weight: 700;
        color: #063b82;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    /* GRUPA - leva plava linija + malo veci font */
    .grid-kamata tr.group-row td {
        background: #f5f8fc;
        font-weight: 700;
        color: #183b73;
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        padding: 8px 16px 8px 13px;
        border-left: 3px solid #4f8dfd;
        border-top: 1px solid #eef1f6;
    }

    .grid-kamata tr.sub-row td:first-child {
        padding-left: 34px;
        color: #445068;
        position: relative;
    }
        /* mala kukica ispred stavke da se vidi da pripada grupi iznad */
        .grid-kamata tr.sub-row td:first-child::before {
            content: "";
            position: absolute;
            left: 18px;
            top: 50%;
            width: 8px;
            height: 8px;
            border-left: 1.5px solid #cdd6e4;
            border-bottom: 1.5px solid #cdd6e4;
            transform: translateY(-70%);
        }

    .grid-kamata tr.sub-row .col-iznos {
        color: #7c8aa3;
        font-weight: 600;
    }

    .grid-kamata tr.subtotal-row td {
        background: #fbfcfe;
        font-weight: 700;
        color: #445068;
        border-top: 1px dashed #dde3ee;
        font-size: 12.5px;
        padding: 7px 16px 7px 34px;
    }

    .grid-kamata tr.subtotal-row .col-iznos {
        color: #183b73;
    }

tfoot td {
    padding: 9px 16px;
    background: #eef3fa;
    font-weight: 700;
    color: #183b73;
    border-top: 2px solid #183b73;
}

tfoot .col-iznos {
    text-align: right;
    font-size: 14.5px;
}

.split-bar {
    display: flex;
    height: 8px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
}

    .split-bar > div {
        height: 100%;
    }
.split-bar-wrap {
    background: #fff;
    border: 1px solid #e4e9f1;
    border-radius: 10px;
    padding: 14px 16px;
}

.split-bar-title {
    font-size: 10.5px;
    font-weight: 700;
    color: #7c8aa3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

.split-bar {
    display: flex;
    height: 8px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
}

.split-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.split-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #445068;
}

    .split-legend-item .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

/* ================================================
   MOBILNI PRIKAZ — OBRAČUN ZARADE
   ================================================ */
@media (max-width: 900px) {

    /* --- Rezultati: umesto flex reda → vertikalni stack --- */
    .div_grid_res {
        flex-direction: column-reverse;
        gap: 14px;
    }

        .div_grid_res > div:first-child {
            width: 100%;
        }

    /* Desna strana (kartice + split bar) — puna širina */
    .results-side {
        min-width: 0 !important;
        width: 100%;
    }

        .results-side br {
            display: none;
        }

        .results-side .summary-card {
            width: 100%;
            min-width: 0 !important;
            margin-bottom: 10px;
        }

        .results-side .split-bar-wrap {
            margin-top: 6px;
        }

    /* ================================================
       TABELA OBRAČUNA ZARADE
       ================================================ */
    .div_grid_res .grid-kamata {
        display: table !important;
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed;
        font-size: 12.5px !important;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
    }

        /* Header */
        .div_grid_res .grid-kamata thead th {
            padding: 9px 12px !important;
            font-size: 11px !important;
            letter-spacing: 0.3px;
        }

        /* Ćelije */
        .div_grid_res .grid-kamata td {
            padding: 9px 12px !important;
            font-size: 12.5px !important;
            white-space: normal !important;
            word-wrap: break-word;
            overflow-wrap: anywhere;
        }

            /* Širine kolona */
            .div_grid_res .grid-kamata th:first-child,
            .div_grid_res .grid-kamata td:first-child {
                width: 62%;
            }

            .div_grid_res .grid-kamata th:last-child,
            .div_grid_res .grid-kamata td:last-child {
                width: 38%;
            }

        /* ================================================
           ALIGNMENT — STAVKE LEVO, IZNOSI DESNO
           Pokrivamo SVE redove pojedinačno
           ================================================ */

        /* 1. Header red */
        .div_grid_res .grid-kamata thead th:first-child {
            text-align: left !important;
        }

        .div_grid_res .grid-kamata thead th:last-child,
        .div_grid_res .grid-kamata thead th.col-num {
            text-align: right !important;
        }

        /* 2. Obični redovi (Bruto 1, Neoporezivi iznos, Poreska osnovica, Porez na zaradu, Neto zarada) */
        .div_grid_res .grid-kamata tbody tr:not(.group-row):not(.sub-row):not(.subtotal-row) td:first-child {
            text-align: left !important;
        }

        .div_grid_res .grid-kamata tbody tr:not(.group-row):not(.sub-row):not(.subtotal-row) td:last-child {
            text-align: right !important;
        }

        /* 3. Group rows (Doprinosi zaposlenog / Doprinosi poslodavca) — colspan=2, levo */
        .div_grid_res .grid-kamata tr.group-row td {
            padding: 8px 12px !important;
            font-size: 11px !important;
            letter-spacing: 0.4px;
            text-align: left !important;
        }

        /* 4. Sub-row (PIO, Zdravstvo, Nezaposlenost) */
        .div_grid_res .grid-kamata tr.sub-row td:first-child {
            padding-left: 28px !important;
            text-align: left !important;
        }

        .div_grid_res .grid-kamata tr.sub-row td:last-child {
            text-align: right !important;
            padding-left: 12px !important;
        }

        /* Hook ostaje kod sub-row-a */
        .div_grid_res .grid-kamata tr.sub-row td:first-child::before {
            left: 14px;
        }

        /* 5. Subtotal redovi (Ukupno doprinosi zaposlenog/poslodavca) */
        .div_grid_res .grid-kamata tr.subtotal-row td {
            padding: 8px 12px 8px 28px !important;
            font-size: 12px !important;
            text-align: left !important;
        }

            .div_grid_res .grid-kamata tr.subtotal-row td:last-child {
                padding-left: 12px !important;
                text-align: right !important;
            }

        /* 6. Footer (Bruto 2 — ukupan trošak) */
        .div_grid_res .grid-kamata tfoot td {
            padding: 11px 12px !important;
            font-size: 13px !important;
        }

            .div_grid_res .grid-kamata tfoot td:first-child {
                text-align: left !important;
            }

            .div_grid_res .grid-kamata tfoot td:last-child {
                text-align: right !important;
            }

        .div_grid_res .grid-kamata tfoot .col-iznos {
            font-size: 13.5px !important;
        }

    /* --- PDF dugme full width --- */
    .btn-export.pdf {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    /* --- Rates lista --- */
    .rates-list {
        gap: 6px 16px;
    }

    .rates-row {
        font-size: 12px;
    }
}

/* ================================================
   MALI TELEFONI (≤ 480px)
   ================================================ */
@media (max-width: 480px) {

    .div_grid_res .grid-kamata th,
    .div_grid_res .grid-kamata td {
        padding: 8px 9px !important;
        font-size: 12px !important;
    }

    .div_grid_res .grid-kamata thead th {
        font-size: 10.5px !important;
    }

    .div_grid_res .grid-kamata tr.group-row td {
        font-size: 10.5px !important;
        padding: 7px 9px !important;
    }

    .div_grid_res .grid-kamata tfoot td {
        font-size: 12.5px !important;
    }

    .div_grid_res .grid-kamata tfoot .col-iznos {
        font-size: 13px !important;
    }

    /* Zadrži alignment i na malim telefonima */
    .div_grid_res .grid-kamata tbody tr:not(.group-row):not(.sub-row):not(.subtotal-row) td:first-child,
    .div_grid_res .grid-kamata tr.sub-row td:first-child,
    .div_grid_res .grid-kamata tr.subtotal-row td,
    .div_grid_res .grid-kamata tfoot td:first-child,
    .div_grid_res .grid-kamata thead th:first-child {
        text-align: left !important;
    }

        .div_grid_res .grid-kamata tbody tr:not(.group-row):not(.sub-row):not(.subtotal-row) td:last-child,
        .div_grid_res .grid-kamata tr.sub-row td:last-child,
        .div_grid_res .grid-kamata tr.subtotal-row td:last-child,
        .div_grid_res .grid-kamata tfoot td:last-child,
        .div_grid_res .grid-kamata thead th:last-child {
            text-align: right !important;
        }
}