/* ============================================================================
 * cyber-responsive.css — CyberSec Academy
 * RIDIZAJN RESPONSIVE 2026-04-25
 * Paletë cyber e RUAJTUR: matrix green #00ffb3, neon pink #ff00e5,
 * electric blue #0ea5e9, background #0a0e1a.
 * Loaded LAST. Vetëm rregullime mobile/tablet/desktop — pa ndryshime ngjyrash.
 * Breakpoints: 480 / 640 / 768 / 1024 / 1280
 * ============================================================================ */

/* === 0. Paletë e fiksuar (sigurim variabla) === */
:root {
    --cyber-primary: #00ffb3;
    --cyber-primary-glow: rgba(0,255,179,.35);
    --cyber-accent:  #ff00e5;
    --cyber-blue:    #0ea5e9;
    --cyber-bg:      #0a0e1a;
    --cyber-warn:    #fbbf24;
    --cyber-danger:  #ef4444;
    --cyber-success: #10d981;
    /* difficulty severity */
    --cyber-easy:    #10d981; /* green */
    --cyber-medium:  #fbbf24; /* yellow */
    --cyber-hard:    #f97316; /* orange */
    --cyber-expert:  #ef4444; /* red */
}

/* === 1. Bazikë mobile-safe === */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg, canvas, embed, object { max-width: 100%; height: auto; }
pre, code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; word-wrap: break-word; }

/* === 2. CODE PLAYGROUND (.pg-*) === */
.pg-wrap { width: 100%; box-sizing: border-box; }
.pg-editor {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* parandalon iOS auto-zoom */
}

@media (max-width: 1024px) {
    .pg-wrap { max-width: 100%; padding: 1.25rem; }
}
@media (max-width: 768px) {
    .pg-wrap { padding: 1rem .75rem; }
    .pg-card { padding: 1rem; border-radius: 10px; }
    .pg-head h1 { font-size: 1.4rem; }
    .pg-title { font-size: 1.05rem; }
    .pg-editor { min-height: 160px; font-size: 15px; padding: .65rem; }
    .pg-actions { gap: .35rem; }
    .pg-actions .btn,
    .pg-actions .btn-ghost { width: 100%; justify-content: center; min-height: 44px; }
    .pg-solved-badge { position: static; display: inline-block; margin-bottom: .5rem; }
    .pg-meta { gap: .35rem; }
    .pg-tag { font-size: .68rem; padding: .2rem .45rem; }
}
@media (max-width: 480px) {
    .pg-head h1 { font-size: 1.2rem; }
    .pg-prompt { font-size: .9rem; }
}

/* === 3. CTF CHALLENGES GRID — 1 / 2 / 3 cols === */
.ch-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
}
@media (max-width: 1024px) {
    .ch-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .ch-grid { grid-template-columns: 1fr !important; }
}

/* Path / cert / portfolio grids — auto-fit por garantojmë stack */
@media (max-width: 640px) {
    .path-grid,
    .cert-grid,
    .pf-grid-certs,
    .pf-stats { grid-template-columns: 1fr !important; }
}

/* === 4. SKILL RADAR — bar layout responsive === */
.pf-radar {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: .5rem 1rem;
    align-items: center;
}
@media (max-width: 640px) {
    .pf-radar {
        grid-template-columns: 90px 1fr;
        gap: .35rem .65rem;
    }
    .pf-radar-label { font-size: .75rem; }
    .pf-radar-bar { height: 14px; }
}
/* Nëse ka SVG radar — bëje fluid */
.skill-radar-svg, svg.skill-radar, svg[data-radar] {
    width: 100%;
    height: auto;
    max-width: 480px;
    margin: 0 auto;
    display: block;
}

/* === 5. TOURNAMENTS LEADERBOARD — card-stack mobile === */
.lb-row {
    display: grid;
    grid-template-columns: 60px 1fr 110px 110px;
    gap: .8rem;
    align-items: center;
}
@media (max-width: 768px) {
    .lb-row {
        grid-template-columns: 50px 1fr;
        grid-template-areas:
            "rank  user"
            "rank  pts"
            "rank  solves";
        gap: .15rem .6rem;
        padding: .6rem .8rem !important;
    }
    .lb-row > *:nth-child(1) { grid-area: rank; align-self: center; font-size: 1.1rem; }
    .lb-row > *:nth-child(2) { grid-area: user; font-weight: 700; }
    .lb-row > *:nth-child(3) { grid-area: pts; color: var(--cyber-primary); }
    .lb-row > *:nth-child(4) { grid-area: solves; color: var(--cyber-blue); }
}

/* === 6. DAILY CHALLENGE TIMER — prominent mobile === */
.daily-timer, .dc-timer, [data-daily-timer] {
    font-family: 'JetBrains Mono', monospace;
    color: var(--cyber-primary);
    text-shadow: 0 0 12px var(--cyber-primary-glow);
}
@media (max-width: 640px) {
    .daily-timer, .dc-timer, [data-daily-timer] {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        text-align: center;
        display: block;
        padding: .65rem;
        background: rgba(0,255,179,.06);
        border: 1px solid rgba(0,255,179,.25);
        border-radius: 10px;
        margin: .5rem 0 1rem;
        letter-spacing: .08em;
    }
    .hist-row {
        grid-template-columns: 1fr !important;
        gap: .35rem !important;
        text-align: left;
    }
}

/* === 7. PORTFOLIO COVER IMAGE === */
.pf-cover, .portfolio-cover, [data-pf-cover] {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 14px;
}
@media (max-width: 640px) {
    .pf-cover, .portfolio-cover, [data-pf-cover] {
        max-height: 180px;
        border-radius: 10px;
    }
}

/* === 8. CERTIFICATE + QR — print + mobile share === */
.cert-card, .certificate, .cert-print {
    max-width: 100%;
    box-sizing: border-box;
}
.cert-qr, img.cert-qr, [data-qr] {
    width: clamp(110px, 30vw, 180px);
    height: auto;
    background: #fff;
    padding: 6px;
    border-radius: 8px;
}
@media (max-width: 640px) {
    .cert-card, .certificate, .cert-print {
        padding: 1rem !important;
        font-size: .9rem;
    }
    .cert-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
    .cert-actions .btn,
    .cert-actions .btn-ghost { flex: 1 1 calc(50% - .4rem); min-height: 44px; }
}

@media print {
    body { background: #fff !important; color: #000 !important; }
    .navbar, .header-actions, .cert-actions, nav, footer, .no-print { display: none !important; }
    .cert-card, .certificate { box-shadow: none !important; border: 1px solid #000 !important; color: #000 !important; background: #fff !important; }
    .cert-qr { border: 1px solid #ccc; }
    a[href]:after { content: ""; }
}

/* === 9. ADMIN CHARTS — chart.js wrappers === */
.chart-wrap, .chart-container, [data-chart-wrap] {
    position: relative;
    width: 100%;
    min-height: 240px;
}
canvas.chart-canvas, canvas[data-chart] {
    max-width: 100% !important;
    height: auto !important;
}
@media (max-width: 768px) {
    .chart-wrap, .chart-container, [data-chart-wrap] {
        min-height: 220px;
    }
}

/* === 10. Q&A LIST + paginim === */
.qa-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    align-items: center;
}
@media (max-width: 640px) {
    .qa-row {
        grid-template-columns: 1fr !important;
        gap: .35rem !important;
        text-align: left;
    }
    .qa-row > div:first-child { display: flex; gap: .75rem; flex-wrap: wrap; }
    .answer { grid-template-columns: 1fr !important; gap: .35rem !important; }
}
.qa-pagination, .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin-top: 1rem;
}
.qa-pagination a, .pagination a {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === 11. NAVBAR + HEADER ACTIONS — mobile === */
@media (max-width: 640px) {
    .navbar { flex-wrap: wrap; gap: .5rem; padding: .65rem .85rem !important; }
    .navbar .logo span { font-size: .95rem; }
    .header-actions { gap: .35rem; flex-wrap: wrap; }
    .header-actions .btn,
    .header-actions .btn-ghost { padding: .5rem .7rem; font-size: .8rem; min-height: 40px; }
}

/* === 12. SEVERITY (difficulty) — paletë cyber === */
.diff-easy, .badge-easy, [data-diff="easy"]    { color: var(--cyber-easy)   !important; border-color: var(--cyber-easy)   !important; }
.diff-medium, .badge-medium, [data-diff="medium"]{ color: var(--cyber-medium) !important; border-color: var(--cyber-medium) !important; }
.diff-hard, .badge-hard, [data-diff="hard"]    { color: var(--cyber-hard)   !important; border-color: var(--cyber-hard)   !important; }
.diff-expert, .badge-expert, [data-diff="expert"]{ color: var(--cyber-expert) !important; border-color: var(--cyber-expert) !important; }

/* === 13. Tap targets + form fields mobile === */
@media (max-width: 768px) {
    button, .btn, .btn-ghost, input[type="submit"], input[type="button"], a.btn { min-height: 44px; }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], select, textarea {
        max-width: 100%;
        min-height: 44px;
        font-size: 16px; /* iOS no-zoom */
    }
}

/* === 14. Tabela horizontale-scroll mbi mobile === */
@media (max-width: 768px) {
    table:not(.no-responsive) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* === 15. Modals/dialogs — mobile width === */
@media (max-width: 640px) {
    .modal, .modal-content, .dialog { width: 95% !important; margin: 12px auto !important; max-width: 95% !important; }
}

/* === 16. Reduced-motion respekt === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* === 17. Dark cyber native — fokus visible === */
*:focus-visible {
    outline: 2px solid var(--cyber-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--cyber-primary-glow);
}