/* ============================================================================
 * responsive-fix.css — WebSecurityScanner
 * Wave Responsive 2026-04-25
 * Mobile / tablet / desktop hardening + security-themed palette + WCAG AA.
 * Loaded LAST (override layer) për të mos prishur stilet e brendshme.
 * Breakpoints:
 *    XS   <= 480 px   (mobile portrait)
 *    SM   481-767 px  (mobile landscape / phablets)
 *    MD   768-991 px  (tablet portrait)
 *    LG   992-1199 px (tablet landscape / small desktop)
 *    XL   >=1200 px   (desktop)
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 0. Paleta Security & WCAG AA
 * ------------------------------------------------------------------------- */
:root {
    /* Navy primary (kontrast > 7:1 ndaj bardhë) */
    --wss-navy:        #0f172a;
    --wss-navy-700:    #1e293b;
    --wss-navy-500:    #334155;
    --wss-navy-100:    #e2e8f0;

    /* Severity strict (WCAG AA mbi sfond të bardhë) */
    --wss-sev-critical:#b91c1c;   /* CVSS 9.0-10.0 */
    --wss-sev-high:    #c2410c;   /* CVSS 7.0-8.9  */
    --wss-sev-medium:  #a16207;   /* CVSS 4.0-6.9  */
    --wss-sev-low:     #1d4ed8;   /* CVSS 0.1-3.9  */
    --wss-sev-info:    #475569;   /* CVSS 0        */
    --wss-sev-fixed:   #15803d;   /* fixed/passed */

    /* Compliance status */
    --wss-pass:        #15803d;
    --wss-fail:        #b91c1c;
    --wss-partial:     #a16207;

    /* OWASP Top 10 categories (color-coded, kontrast AA) */
    --wss-owasp-a01:   #be123c;   /* Broken Access Control */
    --wss-owasp-a02:   #9333ea;   /* Cryptographic Failures */
    --wss-owasp-a03:   #b91c1c;   /* Injection */
    --wss-owasp-a04:   #c2410c;   /* Insecure Design */
    --wss-owasp-a05:   #a16207;   /* Security Misconfig */
    --wss-owasp-a06:   #0e7490;   /* Vulnerable Components */
    --wss-owasp-a07:   #1d4ed8;   /* Auth Failures */
    --wss-owasp-a08:   #6d28d9;   /* Software/Data Integrity */
    --wss-owasp-a09:   #15803d;   /* Logging/Monitoring */
    --wss-owasp-a10:   #db2777;   /* SSRF */

    --wss-radius: 10px;
    --wss-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --wss-shadow:    0 4px 12px rgba(15,23,42,.08);
}

/* ---------------------------------------------------------------------------
 * 1. Bazë: prej overflow horizontal & viewport limits
 * ------------------------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, svg, canvas, embed, object {
    max-width: 100%;
    height: auto;
}

.container, .container-fluid, .wrapper, main, .main, .content, .page, .page-content {
    max-width: 100%;
}

pre, code, kbd, samp {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

p, li, td, th, dt, dd, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * 2. Severity badges — CVSS strict color mapping (WCAG AA)
 *    Përdoret në: Vulnerabilities list, CVE Tracker, API Fuzzing findings,
 *    Retest module, Compliance, Diff reports.
 * ------------------------------------------------------------------------- */
.badge.bg-danger,
.badge.bg-critical,
.badge[class*="severity-critical"] {
    background-color: var(--wss-sev-critical) !important;
    color: #fff !important;
}
.badge.bg-warning,
.badge.bg-high,
.badge[class*="severity-high"] {
    background-color: var(--wss-sev-high) !important;
    color: #fff !important;
}
.badge.bg-info,
.badge.bg-medium,
.badge[class*="severity-medium"] {
    background-color: var(--wss-sev-medium) !important;
    color: #fff !important;
}
.badge.bg-secondary[data-sev="low"],
.badge.bg-low,
.badge[class*="severity-low"] {
    background-color: var(--wss-sev-low) !important;
    color: #fff !important;
}
.badge.bg-success.fixed,
.badge.bg-fixed,
.badge[class*="status-fixed"] {
    background-color: var(--wss-sev-fixed) !important;
    color: #fff !important;
}

/* CVSS chip — used inside CVE tracker */
.cvss-chip {
    display: inline-block;
    min-width: 2.4rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}
.cvss-chip.cvss-critical { background: var(--wss-sev-critical); }
.cvss-chip.cvss-high     { background: var(--wss-sev-high); }
.cvss-chip.cvss-medium   { background: var(--wss-sev-medium); }
.cvss-chip.cvss-low      { background: var(--wss-sev-low); }
.cvss-chip.cvss-info     { background: var(--wss-sev-info); }

/* Compliance status pills */
.compliance-pass { background: var(--wss-pass)    !important; color:#fff !important; }
.compliance-fail { background: var(--wss-fail)    !important; color:#fff !important; }
.compliance-partial { background: var(--wss-partial) !important; color:#fff !important; }

/* OWASP category badges */
.owasp-a01 { background: var(--wss-owasp-a01); color:#fff; }
.owasp-a02 { background: var(--wss-owasp-a02); color:#fff; }
.owasp-a03 { background: var(--wss-owasp-a03); color:#fff; }
.owasp-a04 { background: var(--wss-owasp-a04); color:#fff; }
.owasp-a05 { background: var(--wss-owasp-a05); color:#fff; }
.owasp-a06 { background: var(--wss-owasp-a06); color:#fff; }
.owasp-a07 { background: var(--wss-owasp-a07); color:#fff; }
.owasp-a08 { background: var(--wss-owasp-a08); color:#fff; }
.owasp-a09 { background: var(--wss-owasp-a09); color:#fff; }
.owasp-a10 { background: var(--wss-owasp-a10); color:#fff; }

/* ---------------------------------------------------------------------------
 * 3. Tabela — wrappuesi scrollable horizontal default mbi MD
 * ------------------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 991px) {
    .table-responsive table {
        white-space: nowrap;
    }
    .table-responsive table.no-nowrap {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
 * 4. Vulnerability list / CVE Tracker / API Fuzzing
 *    Tabel rrëshqitëse desktop -> Card-stack mobile (CVSS prominent).
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Çdo tabel brenda kartës `Lidhjet CVE / Findings / FP / Retest` shndërrohet
       në card-stack me data-label të dhëna nga JS / inline atributet. */
    .card-body > .table-responsive > table.table.align-middle,
    .card-body.p-0 > .table-responsive > table.table.align-middle {
        display: block;
        width: 100%;
        white-space: normal;
    }
    .card-body > .table-responsive > table.table.align-middle thead,
    .card-body.p-0 > .table-responsive > table.table.align-middle thead {
        display: none; /* fshehim head-er; rendin e jep struktura e card-it */
    }
    .card-body > .table-responsive > table.table.align-middle tbody,
    .card-body > .table-responsive > table.table.align-middle tr,
    .card-body.p-0 > .table-responsive > table.table.align-middle tbody,
    .card-body.p-0 > .table-responsive > table.table.align-middle tr {
        display: block;
        width: 100%;
    }
    .card-body > .table-responsive > table.table.align-middle tr,
    .card-body.p-0 > .table-responsive > table.table.align-middle tr {
        border: 1px solid var(--wss-navy-100);
        border-radius: var(--wss-radius);
        margin-bottom: .85rem;
        padding: .75rem .9rem;
        background: #fff;
        box-shadow: var(--wss-shadow-sm);
    }
    .card-body > .table-responsive > table.table.align-middle td,
    .card-body.p-0 > .table-responsive > table.table.align-middle td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .35rem 0;
        border: 0;
        text-align: right;
    }
    .card-body > .table-responsive > table.table.align-middle td::before,
    .card-body.p-0 > .table-responsive > table.table.align-middle td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--wss-navy-500);
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .4px;
        flex-shrink: 0;
        text-align: left;
    }
    /* Severity / CVSS prominent: badge i parë në card */
    .card-body > .table-responsive > table.table.align-middle td:first-child,
    .card-body.p-0 > .table-responsive > table.table.align-middle td:first-child {
        font-size: 1rem;
        font-weight: 700;
        padding-bottom: .5rem;
        margin-bottom: .25rem;
        border-bottom: 1px dashed var(--wss-navy-100);
    }
    /* Veprime në fund — wrap të majtë-djathtë */
    .card-body > .table-responsive > table.table.align-middle td.text-end,
    .card-body.p-0 > .table-responsive > table.table.align-middle td.text-end {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .35rem;
        padding-top: .55rem;
        border-top: 1px dashed var(--wss-navy-100);
    }
    .card-body > .table-responsive > table.table.align-middle td.text-end::before,
    .card-body.p-0 > .table-responsive > table.table.align-middle td.text-end::before {
        content: "";
        display: none;
    }
    /* Forms inline brenda td — full width për tap target */
    .card-body > .table-responsive > table.table.align-middle td form.d-inline,
    .card-body.p-0 > .table-responsive > table.table.align-middle td form.d-inline {
        display: inline-block;
    }
}

/* CVE Tracker tabel — alternative scrollable + sticky CVE ID column */
@media (max-width: 575px) {
    table[data-table="cve"] {
        min-width: 720px;
    }
    table[data-table="cve"] thead th:first-child,
    table[data-table="cve"] tbody td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        box-shadow: 2px 0 4px rgba(15,23,42,.06);
        z-index: 1;
    }
}

/* CVE Tracker filter mobile — kërkim full-width, butonat stacked */
@media (max-width: 575px) {
    form.mb-3.d-flex.gap-2 {
        flex-direction: column;
    }
    form.mb-3.d-flex.gap-2 > * {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
 * 5. Compliance dashboard — cards responsive + score color
 *    Tabela e kontrolleve → card-stack mobile.
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .row.g-2.mb-3 > [class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 380px) {
    .row.g-2.mb-3 > [class*="col-md-3"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* PASS/FAIL row backgrounds */
tr.compliance-pass-row td { border-left: 3px solid var(--wss-pass); }
tr.compliance-fail-row td { border-left: 3px solid var(--wss-fail); }

/* ---------------------------------------------------------------------------
 * 6. API Fuzzing — request/response panels stack mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .api-fuzz-split,
    .api-fuzz-split > .col-lg-5,
    .api-fuzz-split > .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.api-fuzz-panel pre {
    background: var(--wss-navy);
    color: #f1f5f9;
    padding: .9rem;
    border-radius: var(--wss-radius);
    font-size: .82rem;
    max-height: 320px;
    overflow: auto;
}

/* ---------------------------------------------------------------------------
 * 7. Scan Profiles Library — card grid responsive (8+ presets)
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    /* Filter buttons wrap & grow */
    .mb-3.d-flex.gap-2 {
        flex-wrap: wrap;
    }
    .mb-3.d-flex.gap-2 > .btn {
        flex: 1 1 calc(50% - .25rem);
        min-width: 0;
    }
}
.card.scan-profile-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.card.scan-profile-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wss-shadow);
}

/* Card-footer i clone-it: input + button stacked në mobile */
@media (max-width: 575px) {
    .card .card-footer.d-flex form.flex-grow-1 {
        display: flex;
        flex-direction: column;
        gap: .4rem;
        width: 100%;
    }
    .card .card-footer.d-flex form.flex-grow-1 input[type="text"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    .card .card-footer.d-flex form.flex-grow-1 .btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * 8. Diff reports — side-by-side desktop → tabs mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .diff-side-by-side {
        display: block;
    }
    .diff-side-by-side > .col-md-6 {
        margin-bottom: 1rem;
    }
    /* Krijon "tabs" simple sipas markerave nëse aktivizohen me JS */
    .diff-tabs-nav {
        display: flex;
        gap: .35rem;
        margin-bottom: .75rem;
        border-bottom: 1px solid var(--wss-navy-100);
    }
    .diff-tabs-nav .btn {
        flex: 1;
        border-radius: 0;
        border-bottom: 2px solid transparent;
    }
    .diff-tabs-nav .btn.active {
        border-bottom-color: var(--wss-navy);
        color: var(--wss-navy);
    }
    .diff-pane[hidden] { display: none !important; }
}

/* Summary cards Diff: 2x2 në phone */
@media (max-width: 575px) {
    .row.g-3.mb-4 > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---------------------------------------------------------------------------
 * 9. Domain Verification — TXT record copy-button mobile
 * ------------------------------------------------------------------------- */
.txt-record-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.txt-record-row code {
    flex: 1;
    min-width: 0;
    background: #f1f5f9;
    padding: .35rem .55rem;
    border-radius: 6px;
    font-size: .85rem;
    overflow-x: auto;
    white-space: nowrap;
}
.btn-copy-txt {
    border: 1px solid var(--wss-navy-100);
    background: #fff;
    color: var(--wss-navy);
    padding: .35rem .65rem;
    border-radius: 6px;
    font-size: .85rem;
    min-height: 36px;
}
.btn-copy-txt:hover { background: var(--wss-navy-100); }
.btn-copy-txt.copied { background: var(--wss-sev-fixed); color:#fff; border-color: var(--wss-sev-fixed); }

@media (max-width: 575px) {
    .txt-record-row { flex-direction: column; align-items: stretch; }
    .txt-record-row code { width: 100%; }
    .btn-copy-txt { width: 100%; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
 * 10. Asset Discovery — collapsible tree mobile
 * ------------------------------------------------------------------------- */
.asset-tree summary {
    cursor: pointer;
    padding: .55rem .75rem;
    background: var(--wss-navy-100);
    border-radius: 6px;
    font-weight: 600;
    list-style: none;
}
.asset-tree summary::marker { display: none; }
.asset-tree summary::before {
    content: "\f282"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    margin-right: .5rem;
    transition: transform .15s ease;
    display: inline-block;
}
.asset-tree details[open] > summary::before {
    transform: rotate(90deg);
}
.asset-tree details {
    margin-bottom: .5rem;
    border: 1px solid var(--wss-navy-100);
    border-radius: 8px;
    padding: .35rem .5rem;
}
.asset-tree details > div {
    padding: .55rem .75rem;
}

@media (max-width: 575px) {
    .asset-tree { font-size: .9rem; }
    .asset-tree summary { padding: .65rem .8rem; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
 * 11. Retest history (DeepTest) — timeline responsive
 * ------------------------------------------------------------------------- */
.retest-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.retest-timeline::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 14px;
    width: 2px;
    background: var(--wss-navy-100);
}
.retest-timeline li {
    position: relative;
    padding-left: 38px;
    padding-bottom: 1.1rem;
}
.retest-timeline li::before {
    content: "";
    position: absolute;
    left: 7px; top: .35rem;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--wss-navy-500);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--wss-navy-100);
}
.retest-timeline li.fixed::before              { background: var(--wss-sev-fixed); }
.retest-timeline li.still-vulnerable::before   { background: var(--wss-sev-critical); }
.retest-timeline li.inconclusive::before       { background: var(--wss-sev-medium); }
.retest-timeline li.error::before              { background: var(--wss-navy-500); }

@media (max-width: 575px) {
    .retest-timeline li { padding-left: 32px; }
    .retest-timeline::before { left: 11px; }
    .retest-timeline li::before { left: 4px; }
}

/* ---------------------------------------------------------------------------
 * 12. Stat cards (Wave 1/2) — col-md-3 → 2x2 mobile, 1x mbi mikro
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .row.g-3.mb-4 > .col-md-3,
    .row.g-2.mb-3 > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 380px) {
    .row.g-3.mb-4 > .col-md-3,
    .row.g-2.mb-3 > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Forms inline (search+button) — stack mobile */
@media (max-width: 575px) {
    form.d-flex.gap-2 {
        flex-direction: column;
    }
    form.d-flex.gap-2 > * {
        width: 100% !important;
    }
}

/* Headers with action button (top of page) — stack mobile */
@media (max-width: 575px) {
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }
    .d-flex.justify-content-between.align-items-center.mb-4 > .btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * 13. Tap target & input sizes (iOS no-zoom)
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    button, .btn, 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;
    }
}

/* ---------------------------------------------------------------------------
 * 14. Modal & dialog — mobile fit
 * ------------------------------------------------------------------------- */
.modal, .modal-content, .dialog, dialog {
    max-width: 100%;
}
@media (max-width: 767px) {
    .modal-dialog { margin: .5rem; }
    .modal-dialog.modal-lg { max-width: calc(100% - 1rem); }
}

/* ---------------------------------------------------------------------------
 * 15. Pagination component (përdoret te Vulns / CVEs / FP rules /
 *     Scan profiles / Asset discoveries / Diff reports / Retest history)
 * ------------------------------------------------------------------------- */
.wss-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}
.wss-pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .55rem;
    border: 1px solid var(--wss-navy-100);
    background: #fff;
    color: var(--wss-navy);
    border-radius: 6px;
    font-size: .9rem;
    text-decoration: none;
}
.wss-pagination .page-link:hover {
    background: var(--wss-navy-100);
}
.wss-pagination .page-link.active {
    background: var(--wss-navy);
    color: #fff;
    border-color: var(--wss-navy);
}
.wss-pagination .page-link[aria-disabled="true"],
.wss-pagination .page-link.disabled {
    opacity: .5;
    pointer-events: none;
}
@media (max-width: 575px) {
    .wss-pagination { gap: .2rem; }
    .wss-pagination .page-link { min-width: 36px; min-height: 36px; padding: .25rem .4rem; font-size: .85rem; }
    .wss-pagination .page-link.hide-xs { display: none; }
}

/* ---------------------------------------------------------------------------
 * 16. Sidebar collapse mbi LG
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .layout-sidebar, .sidebar-layout, .with-sidebar {
        display: block !important;
    }
    .sidebar, aside.sidebar, .side-nav {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-bottom: 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * 17. Grid/flex generic stacking
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,
    .row, .flex-row, .two-col, .three-col, .four-col {
        grid-template-columns: 1fr !important;
    }
    [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * 18. Typography scale & padding
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h2, .h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    h3, .h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
    body { font-size: 15px; }

    .container, .container-fluid, .wrapper, main, .main-content, .page {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card, .panel, .box {
        padding-left: 0;
        padding-right: 0;
    }
    .card-body { padding: .85rem; }
}

/* ---------------------------------------------------------------------------
 * 19. Helpers visibility
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .hide-mobile, .desktop-only { display: none !important; }
}
@media (min-width: 768px) {
    .mobile-only, .show-mobile { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * 20. Focus rings WCAG AA (≥3:1 outline)
 * ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * 21. Print — printim Compliance HTML
 * ------------------------------------------------------------------------- */
@media print {
    .btn, .navbar, .sidebar, .page-loader { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc; }
    a[href]:after { content: " (" attr(href) ")"; font-size: 90%; }
}