/* =============================================================
   responsive.css
   Svi novi responsive stilovi idu ovde.
   Breakpoint: < 991px (tablet + mobile)
   Ovaj fajl se includuje POSLE app.css u layouts/app.blade.php
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   LISTE KAO KARTICE — courses + tests (< 991px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Sakrij header tabele */
    .rtbl--courses .rtbl__head,
    .rtbl--tests   .rtbl__head { display: none; }

    /* ── Courses kartica ── */
    .rtbl--courses .rtbl__row {
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas:
            "status status status actions"
            "title  title  title  title"
            "les    cre    dat    .";
        gap: 0.35rem 0.75rem;
        padding: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-bottom: 0.6rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        align-items: start;
    }
    .rtbl--courses .rtbl__row::after { display: none; }
    .rtbl--courses .rtbl__row--last  { border-bottom: 1px solid #e5e7eb; margin-bottom: 0; }

    .rtbl--courses .rtbl__row .cc-col-num     { display: none !important; }
    .rtbl--courses .rtbl__row .cc-col-status  { grid-area: status;  flex: none; }
    .rtbl--courses .rtbl__row .cc-col-title   { grid-area: title;   flex: none; min-width: 0; width: 100%; }
    .rtbl--courses .rtbl__row .cc-col-lessons { grid-area: les;     flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; white-space: nowrap; }
    .rtbl--courses .rtbl__row .cc-col-creator { grid-area: cre;     flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .rtbl--courses .rtbl__row .cc-col-date    { grid-area: dat;     flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; white-space: nowrap; }
    .rtbl--courses .rtbl__row .cc-col-actions { grid-area: actions; flex: none; width: auto !important; justify-content: flex-end; gap: 0.1rem; }

    .rtbl--courses .rtbl__row .cc-col-lessons::before { content: "Lekcija: "; font-size: .7rem; color: #c4c8d0; }

    /* ── Tests kartica ── */
    .rtbl--tests .rtbl__row {
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas:
            "status status status actions"
            "title  title  title  title"
            "prog   qlim   dat    .";
        gap: 0.35rem 0.75rem;
        padding: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-bottom: 0.6rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        align-items: start;
    }
    .rtbl--tests .rtbl__row::after { display: none; }
    .rtbl--tests .rtbl__row--last  { border-bottom: 1px solid #e5e7eb; margin-bottom: 0; }

    .rtbl--tests .rtbl__row .cc-col-num    { display: none !important; }
    .rtbl--tests .rtbl__row .cc-col-status { grid-area: status;  flex: none; }
    .rtbl--tests .rtbl__row .mc--user      { grid-area: title;   flex: none; min-width: 0; width: 100%; }
    .rtbl--tests .rtbl__row .mc--progress  { grid-area: prog;    flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; white-space: nowrap; }
    .rtbl--tests .rtbl__row .mc--qlimit    { grid-area: qlim;    flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; white-space: nowrap; }
    .rtbl--tests .rtbl__row .mc--date      { grid-area: dat;     flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; white-space: nowrap; }
    .rtbl--tests .rtbl__row .mc--actions   { grid-area: actions; flex: none; width: auto !important; justify-content: flex-end; gap: 0.1rem; }

    .rtbl--tests .rtbl__row .mc--progress::before { content: "Banka: ";   font-size: .7rem; color: #c4c8d0; }
    .rtbl--tests .rtbl__row .mc--qlimit::before   { content: "Pitanja: "; font-size: .7rem; color: #c4c8d0; }

    /* meta separator */
    .rtbl--courses .rtbl__row .cc-col-lessons,
    .rtbl--courses .rtbl__row .cc-col-creator,
    .rtbl--courses .rtbl__row .cc-col-date,
    .rtbl--tests   .rtbl__row .mc--progress,
    .rtbl--tests   .rtbl__row .mc--qlimit,
    .rtbl--tests   .rtbl__row .mc--date {
        padding-top: 0.5rem;
        border-top: 1px solid #f0f2f5;
    }

    /* syn-badge u meta redu */
    .rtbl--tests .rtbl__row .mc--progress .syn-badge,
    .rtbl--tests .rtbl__row .mc--qlimit   .syn-badge { font-size: .72rem; padding: .1rem .4rem; }

}

/* ─────────────────────────────────────────────────────────────
   KURS — LEARN STEPPER (< 991px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Smanji padding liste i pomeri vertikalnu liniju */
    .lp-list { padding-left: 44px; }
    .lp-vline { left: 13px; }

    /* Manji krug */
    .lp-circle {
        left: -44px;
        width: 28px;
        height: 28px;
    }

    /* Broj — manji, manje margine */
    .lp-num {
        width: 3.5rem;
        margin-right: 1rem;
        font-size: 1.75rem;
    }
    .lp-num--current { margin-right: 1rem; }

    /* Aktivna lekcija — manje padding */
    .lp-card--current { padding: 1rem 1.25rem; }

    /* Dugme — sakrij na tabletu/mobu */
    .lp-btn-kreni { display: none; }

    /* Progress bar bez desnog margina na tabletu */
    .lp-progress__track { margin-right: 50px; }
}

/* ─────────────────────────────────────────────────────────────
   KURS — LEARN STEPPER (< 640px — mobile)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {

    /* Stepper još uži */
    .lp-list { padding-left: 36px; }
    .lp-vline { left: 10px; }

    .lp-circle {
        left: -36px;
        width: 24px;
        height: 24px;
    }

    /* Broj — minimalan */
    .lp-num {
        width: 2.5rem;
        margin-right: 0.5rem;
        font-size: 1.25rem;
    }
    .lp-num--current { margin-right: 0.5rem; }

    /* Aktivna kartica — kompaktna */
    .lp-card--current { padding: 0.875rem 1rem; }

    /* Naslov lekcije može da prelazi u novi red */
    .lp-title { white-space: normal; }
    .lp-title--current { font-size: 1rem; }

    /* Progress — sakrij krug i procenat na mobu (dovoljno je traka) */
    .lp-progress__track { margin-right: 0; }
    .lp-progress__end-circle { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   MOJI KURSEVI — /app/my-courses
   Stranica: resources/views/pages/app/courses/my.blade.php
   ───────────────────────────────────────────────────────────── */

/* Badge "POLOŽENO" u meta redu — manji od standardnog badgea */
.mc-badge-mini {
    font-size: 0.6rem !important;
}

/* Opis: max 2 linije */
.mc-course-grid .cert-card__desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 0;
}

/* Desktop: 3 kolone */
.cert-grid.mc-course-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1300px) {
    .mc-course-grid .cert-card__title { font-size: 1rem; }
}

/* Tablet: 2 kolone (< 992px) */
@media (max-width: 991px) {
    .cert-grid.mc-course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .mc-course-grid .cert-card { padding: 1.5rem; }
    .mc-course-grid .cert-card__title { font-size: 1.2rem; }
}

/* Mobil: 1 kolona (< 576px) */
@media (max-width: 575px) {
    .cert-grid.mc-course-grid {
        grid-template-columns: 1fr;
    }
    .mc-course-grid .cert-card { padding: 1.25rem; }
    .mc-course-grid .cert-card__title { font-size: 1.375rem; }
    .mc-course-grid .cert-card__badge-row {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   MOJI SERTIFIKATI — /app/certificates
   Stranica: resources/views/livewire/my-certificates.blade.php
   ───────────────────────────────────────────────────────────── */

/* Desktop: 3 kolone */
.cert-grid.certs-page-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Naslov se smanjuje od 1300px */
@media (max-width: 1300px) {
    .certs-page-grid .cert-card__title { font-size: 1rem; }
}

/* Tablet: 2 kolone (< 992px) */
@media (max-width: 991px) {
    .cert-grid.certs-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .certs-page-grid .cert-card { padding: 1.5rem; }
    .certs-page-grid .cert-card__title { font-size: 1.2rem; }
}

/* Mobil: 1 kolona (< 576px) */
@media (max-width: 575px) {
    .cert-grid.certs-page-grid {
        grid-template-columns: 1fr;
    }
    .certs-page-grid .cert-card { padding: 1.25rem; }
    .certs-page-grid .cert-card__title { font-size: 1.375rem; }
    .certs-page-grid .cert-card__badge-row {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}