/* =============================================================
   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: 1fr;
        grid-template-areas:
            "status"
            "title"
            "les"
            "cre"
            "dat"
            "actions";
        gap: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,.07);
        align-items: start;
    }
    .rtbl--courses .rtbl__row::after { display: none; }
    .rtbl--courses .rtbl__row--last  { 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: .85rem; color: #6b7280; }
    .rtbl--courses .rtbl__row .cc-col-creator { grid-area: cre;     flex: none; min-width: 0; font-size: .85rem; color: #6b7280; white-space: normal; overflow: visible; text-overflow: unset; max-width: none; }
    .rtbl--courses .rtbl__row .cc-col-date    { grid-area: dat;     flex: none; min-width: 0; font-size: .85rem; color: #6b7280; }
    .rtbl--courses .rtbl__row .cc-col-actions { grid-area: actions; flex: none; width: 100% !important; justify-content: flex-start; gap: 0.25rem; margin-top: 1.25rem; }

    .rtbl--courses .rtbl__row .cc-col-lessons::before { content: "Lekcije: "; font-size: .75rem; color: #c4c8d0; }
    .rtbl--courses .rtbl__row .cc-col-creator::before { content: "Kreator: "; font-size: .75rem; color: #c4c8d0; }
    .rtbl--courses .rtbl__row .cc-col-date::before    { content: "Datum: ";   font-size: .75rem; color: #c4c8d0; }

    /* ── Tests kartica ── */
    .rtbl--tests .rtbl__row {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "status"
            "title"
            "prog"
            "qlim"
            "dat"
            "actions";
        gap: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,.07);
        align-items: start;
    }
    .rtbl--tests .rtbl__row::after { display: none; }
    .rtbl--tests .rtbl__row--last  { 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: .85rem; color: #6b7280; }
    .rtbl--tests .rtbl__row .mc--qlimit    { grid-area: qlim;    flex: none; min-width: 0; font-size: .85rem; color: #6b7280; }
    .rtbl--tests .rtbl__row .mc--date      { grid-area: dat;     flex: none; min-width: 0; font-size: .85rem; color: #6b7280; }
    .rtbl--tests .rtbl__row .mc--actions   { grid-area: actions; flex: none; width: 100% !important; justify-content: flex-start; gap: 0.25rem; margin-top: 1.25rem; }

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

    /* meta separator — tests: razmak pre prvog meta reda, bez linije */
    .rtbl--tests .rtbl__row .mc--progress { margin-top: 0.25rem; }

    /* meta separator — courses: razmak pre prvog meta reda, bez linije */
    .rtbl--courses .rtbl__row .cc-col-lessons {
        margin-top: 0.25rem;
    }


    /* 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; }

    /* Naslov — veći font, wrapa u novi red, bez skraćivanja */
    .rtbl--courses .rtbl__row .mc-uname,
    .rtbl--tests   .rtbl__row .mc-uname,
    .rtbl--members .rtbl__row .mc-uname {
        font-size: 1.05rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.35;
    }

    /* Podnaslov/opis — veći font, wrapa, bez skraćivanja */
    .rtbl--tests   .rtbl__row .mc--user .rtbl__cell--muted,
    .rtbl--members .rtbl__row .mc--user .rtbl__cell--muted,
    .rtbl--courses .rtbl__row .cc-desc {
        font-size: 0.875rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

}

/* ─────────────────────────────────────────────────────────────
   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; }
}

/* ─────────────────────────────────────────────────────────────
   MEMBER DETAIL — /app/account/members/{slug}
   ───────────────────────────────────────────────────────────── */

/* Ime korisnika — ne smije da prelazi kontejner */
@media (max-width: 991px) {
    .member-header__info .syn-b-title {
        font-size: 1.75rem;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
}
@media (max-width: 575px) {
    .member-header__info .syn-b-title {
        font-size: 1.4rem;
    }
}

/* Stats red — 3 kolone na tabletu, 2 kolone na mobu */
@media (max-width: 991px) {
    .sbc-grid.sbc-grid--row {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}
@media (max-width: 575px) {
    .sbc-grid.sbc-grid--row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   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; height: auto; min-height: 350px; }
    .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; height: auto; min-height: 350px; }
    .certs-page-grid .cert-card__title { font-size: 1.375rem; }
    .certs-page-grid .cert-card__badge-row {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* cert-card__meta / cert-card__bottom korekcije za 1-kolonski prikaz */
@media (max-width: 575px) {
    .cert-card__meta   { margin-bottom: 3.25rem; }
    .cert-card__bottom { margin-top: 3rem; }
}

/* ─────────────────────────────────────────────────────────────
   KORISNICI — /app/members (< 991px)
   Stranica: resources/views/pages/app/members/index.blade.php
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Sakrij header tabele */
    .rtbl--members .rtbl__head { display: none; }

    /* Members kartica
       DOM redosled: check(1) user(2) date(3) activity(4) chips-tests(5) chips-courses(6) actions(7)
       mc--date je sakriven ali ostaje u DOM-u (utiče na nth-child brojanje) */
    .rtbl--members .rtbl__row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "user     check"
            "activity activity"
            "chipst   chipst"
            "chipsc   chipsc"
            "actions  actions";
        gap: 0.6rem 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,.07);
        align-items: start;
    }
    .rtbl--members .rtbl__row::after { display: none; }
    .rtbl--members .rtbl__row--last { margin-bottom: 0; }

    .rtbl--members .rtbl__row .mc--check              { grid-area: check;    flex: none; align-self: start; }
    .rtbl--members .rtbl__row .mc--user               { grid-area: user;     flex: none; min-width: 0; width: 100%; }
    .rtbl--members .rtbl__row .mc--date               { display: none !important; }
    .rtbl--members .rtbl__row .mc--activity           { grid-area: activity; flex: none; min-width: 0; font-size: .85rem; color: #6b7280; width: 100%; margin-top: 0.25rem; }
    .rtbl--members .rtbl__row .mc--chips:nth-child(5) { grid-area: chipst;   flex: none; min-width: 0; font-size: .85rem; color: #6b7280; width: 100%; }
    .rtbl--members .rtbl__row .mc--chips:nth-child(6) { grid-area: chipsc;   flex: none; min-width: 0; font-size: .85rem; color: #6b7280; width: 100%; }
    .rtbl--members .rtbl__row .mc--actions            { grid-area: actions;  flex: none; width: 100% !important; justify-content: flex-start; gap: 0.25rem; margin-top: 1.25rem; }

    /* Labels via ::before */
    .rtbl--members .rtbl__row .mc--activity::before           { content: "Aktivnost: "; font-size: .75rem; color: #c4c8d0; }
    .rtbl--members .rtbl__row .mc--chips:nth-child(5)::before { content: "Testovi: ";   font-size: .75rem; color: #c4c8d0; }
    .rtbl--members .rtbl__row .mc--chips:nth-child(6)::before { content: "Kursevi: ";   font-size: .75rem; color: #c4c8d0; }

}

/* ─────────────────────────────────────────────────────────────
   ISTORIJA POKUŠAJA — /app/quiz/test/{id}/history (< 991px)
   Stranica: resources/views/pages/app/quiz/history.blade.php
   Kolone: name | points | percent | resumptions | date | action
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Sakrij header tabele */
    .rtbl--history .rtbl__head { display: none; }

    /* Svaki red → kartica */
    .rtbl--history .rtbl__row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "name    name    name"
            "points  percent resump"
            "dat     dat     dat"
            "actions actions actions";
        gap: 0.35rem 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,.07);
        align-items: start;
        /* Reset flex koji dolazi iz app.css */
        flex-wrap: unset;
    }
    .rtbl--history .rtbl__row::after { display: none; }
    .rtbl--history .rtbl__row        { border-bottom: none !important; }

    /* Mapiranje ćelija na grid areas */
    .rtbl--history .rtbl__col--name        { grid-area: name;    flex: none; min-width: 0; width: 100%; }
    .rtbl--history .rtbl__col--points      { grid-area: points;  flex: none; min-width: 0; font-size: .75rem; }
    .rtbl--history .rtbl__col--percent     { grid-area: percent; flex: none; min-width: 0; }
    .rtbl--history .rtbl__col--resumptions { grid-area: resump;  flex: none; min-width: 0; font-size: .75rem; }
    .rtbl--history .rtbl__col--date        { grid-area: dat;     flex: none; min-width: 0; font-size: .75rem; color: #9ca3af; width: 100%; }
    .rtbl--history .rtbl__col--action      { grid-area: actions; flex: none; width: 100% !important; justify-content: flex-start; gap: 0.25rem; padding-top: 0.6rem; border-top: 1px solid #f0f2f5; margin-top: 0.15rem; }

    /* Reset app.css flex overrides za ove kolone */
    .rtbl--history .rtbl__col--name  { flex: none !important; }
    .rtbl--history .rtbl__col--date  { flex: none !important; text-align: left !important; }

    /* Meta separator — poena/procenat/nastavljanja red */
    .rtbl--history .rtbl__col--points,
    .rtbl--history .rtbl__col--percent,
    .rtbl--history .rtbl__col--resumptions {
        padding-top: 0.65rem;
        border-top: 1px solid #f0f2f5;
    }

    /* Labele ispred vrednosti (::before) */
    .rtbl--history .rtbl__col--points::before      { content: "Poena: ";  display: block; font-size: .7rem; color: #c4c8d0; margin-bottom: 0.15rem; }
    .rtbl--history .rtbl__col--percent::before     { content: "Uspeh: ";  display: block; font-size: .7rem; color: #c4c8d0; margin-bottom: 0.15rem; }
    .rtbl--history .rtbl__col--resumptions::before { content: "Nastavlj.: "; display: block; font-size: .7rem; color: #c4c8d0; margin-bottom: 0.15rem; }
    .rtbl--history .rtbl__col--date::before        { content: "Datum: ";  display: block; font-size: .7rem; color: #c4c8d0; margin-bottom: 0.15rem; }

    /* Percent badge — manji na kartici */
    .rtbl--history .tbl-percent { font-size: .75rem; padding: 0.25rem 0.45rem; }

    /* Resumptions krug — manji */
    .rtbl--history .tbl-resumptions { width: 24px; height: 24px; font-size: .75rem; }

    /* tbl-name ne truncuje na kartici */
    .rtbl--history .tbl-name { white-space: normal; overflow: visible; text-overflow: unset; }

    /* Action dugmad */
    .rtbl--history .rtbl__col--action .mem-ico {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        color: #374151;
        text-decoration: none;
        background: #f9fafb;
    }

}

/* ─────────────────────────────────────────────────────────────
   MOJI TESTOVI — /app/my-tests
   Stranica: resources/views/pages/app/tests/index-user.blade.php
   Partial:  resources/views/partials/app/test-card.blade.php
   ───────────────────────────────────────────────────────────── */

/* Tablet (< 991px) — 1-kolona je već u app.css; ovde fina podešavanja */
@media (max-width: 991px) {

    /* Grid — osiguraj 1 kolonu (backup za app.css pravilo) */
    .dash-first-row,
    .dash-test-grid { grid-template-columns: 1fr !important; }

    /* Filteri — manje donje margine */
    .tests-filters { margin-bottom: 1.5rem; }

    /* Smanji big number */
    .syn-b-num { font-size: 3rem; }

    /* Card top može da wrapa */
    .syn-b-card-top { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

    /* Timestamp u novu liniju kad ne stane */
    .mtc-last-attempt { flex-basis: 100%; margin-top: 0; }

    /* Krugovi — malo manji na tabletu */
    .dash-circle-num,
    .dash-circle-prog { width: 44px; height: 44px; }
    .dash-circle-prog::before { width: 34px; height: 34px; }

    .dash-card-stats { gap: 1rem; flex-wrap: wrap; }

    /* Sprečava preliv teksta iz kartice */
    .dash-first-row .syn-b-card,
    .dash-first-row .syn-b-card--black,
    .dash-test-grid .syn-b-card {
        overflow: hidden;
        min-width: 0;
        word-break: break-word;
    }

    /* Naslov ne sme da ispadne iz kartice */
    .dash-first-row  .syn-b-card-title,
    .dash-test-grid  .syn-b-card-title { word-break: break-word; overflow-wrap: break-word; }

    /* Dugmad — manje padding na tabletu */
    .dash-first-row  .syn-b-actions .syn-k-btn,
    .dash-test-grid  .syn-b-actions .syn-k-btn { padding: 0.7rem 1.5rem; font-size: 0.8rem; }

}

/* Mobil (< 575px) */
@media (max-width: 575px) {

    /* Big number — minimalan */
    .syn-b-num { font-size: 2rem; line-height: 1; }

    /* Card padding */
    .dash-first-row .syn-b-card,
    .dash-first-row .syn-b-card--black,
    .dash-test-grid .syn-b-card { padding: 1.25rem 1rem; }

    /* Naslov */
    .dash-first-row  .syn-b-card-title,
    .dash-test-grid  .syn-b-card-title { font-size: 1.25rem; }

    /* Krugovi — kompaktniji */
    .dash-circle-num,
    .dash-circle-prog { width: 38px; height: 38px; }
    .dash-circle-prog::before { width: 28px; height: 28px; }
    .dash-circle-prog span { font-size: 0.6rem; }
    .dash-circle-num { font-size: 0.75rem; }

    .dash-card-stats { gap: 0.6rem; }
    .dash-stat-item span { font-size: 0.6rem; }

    /* Actions — puna širina, jedno ispod drugog */
    .dash-first-row  .syn-b-actions,
    .dash-test-grid  .syn-b-actions { flex-direction: column; gap: 0.5rem; align-items: stretch; }

    .dash-first-row  .syn-b-actions .syn-k-btn,
    .dash-test-grid  .syn-b-actions .syn-k-btn { width: 100%; padding: 0.65rem 1rem; font-size: 0.78rem; justify-content: center; }

    /* Black stats kartica — bullets sakrij na mobu (previše teksta) */
    .sbc-bullets { display: none; }

    /* Stats grid — 1 kolona na uskom ekranu */
    .sbc-grid { grid-template-columns: 1fr; gap: 0.4rem; }

    /* sbc-sub opis — sakrij */
    .sbc-sub { display: none; }

    /* sbc lines i title — kompaktno */
    .sbc-lines { margin-bottom: 1rem; }
    .sbc-title { font-size: 1.3rem; margin-bottom: 0.4rem; }

}

/* ─────────────────────────────────────────────────────────────
   PAGINACIJA — rtbl__foot (sve stranice)
   ───────────────────────────────────────────────────────────── */

/* Desktop: smanji preveliki default padding (3rem → 1rem) */
.rtbl__foot {
    padding: 1rem 0.25rem !important;
}

/* Tablet / Mobile (< 991px) */
@media (max-width: 991px) {
    .rtbl__foot {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.875rem 0.25rem !important;
    }

    .rtbl__foot-bulk {
        flex-wrap: wrap;
        gap: 0.5rem;
        flex: 1 1 auto;
    }

    .rtbl__foot-pag {
        flex-shrink: 0;
    }
}

/* Sakrij per-page select na uskim ekranima */
@media (max-width: 430px) {
    .rtbl__perpage-sel { display: none !important; }
}