/* =============================================================
   NSRP — RESPONSIVE OVERLAY (2026-04-25)
   Auditim & rregullim responsive për mobile / tablet / desktop.
   Mbron designin e classification strip (e KUQE, kritike).
   Breakpoints:
     - mobile  : <= 640px
     - tablet  : 641px – 1024px
     - desktop : >= 1025px
   ============================================================= */

/* -------------------------------------------------------------
   1) GLOBALS — box-sizing, scroll, fluid layout
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

/* -------------------------------------------------------------
   2) CLASSIFICATION STRIP — RUAJ (CRITICAL UI)
   Vetëm ruajmë lexueshmërinë në mobile, NUK heqim ngjyrën/animacionin.
   ------------------------------------------------------------- */
@media (max-width: 480px) {
    .nsrp-classif-global {
        font-size: 8.5px;
        letter-spacing: 0.14em;
        padding: 5px 8px;
        line-height: 1.2;
    }
    .nsrp-classif-global .dot { margin: 0 6px; }
}

/* -------------------------------------------------------------
   3) ADMIN LAYOUT — Sidebar collapse + hamburger
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 9500;
        width: 240px;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0 !important; }
    .sidebar-footer { width: 240px !important; }

    /* Toggle button (injected via JS) */
    .nsrp-sidebar-toggle {
        position: fixed;
        top: 38px;
        left: 10px;
        z-index: 9600;
        width: 42px; height: 42px;
        border-radius: 8px;
        background: var(--surface, #12243e);
        border: 1px solid var(--accent, #e9b949);
        color: var(--accent, #e9b949);
        font-size: 1rem;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,.4);
    }
    .nsrp-sidebar-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 9400;
        display: none;
    }
    .nsrp-sidebar-backdrop.active { display: block; }
}
@media (min-width: 1025px) {
    .nsrp-sidebar-toggle, .nsrp-sidebar-backdrop { display: none !important; }
}

/* -------------------------------------------------------------
   4) DASHBOARD CYBER COMMAND CENTER — KILL CHAIN
   horizontal desktop -> vertical mobile (pa scroll horizontal)
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .kill-chain {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        overflow-x: visible;
    }
    .kill-chain-step {
        flex-direction: row;
        gap: 0.85rem;
        min-width: 0;
        padding: 0.6rem 0.85rem;
        text-align: left;
        background: rgba(0, 240, 255, 0.04);
        border: 1px solid rgba(0, 240, 255, 0.15);
        border-radius: 8px;
    }
    .kill-chain-step.active {
        background: rgba(255, 0, 68, 0.06);
        border-color: rgba(255, 0, 68, 0.35);
    }
    .kill-chain-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .kill-chain-name {
        font-size: 0.8rem;
        text-align: left;
        flex: 1;
    }
    /* Heq shigjetën horizontale */
    .kill-chain-step:not(:last-child)::after {
        display: none !important;
    }
}

/* -------------------------------------------------------------
   5) MAP (Leaflet + 7 qendra Kosovë) — viewBox responsive
   ------------------------------------------------------------- */
.world-map-container,
.leaflet-container-wrapper,
.world-map-wrapper,
#leaflet-map,
.leaflet-map-container,
.sim-map-container,
.mini-world-map {
    max-width: 100%;
    width: 100%;
}
#leaflet-map, .leaflet-map-container {
    height: clamp(280px, 55vh, 560px);
}
.mini-world-map { height: clamp(180px, 30vh, 260px); }

/* SVG inline maps */
svg.kosovo-map, svg[data-nsrp-map], .nsrp-map-svg {
    width: 100%;
    height: auto;
    max-height: 70vh;
    display: block;
}

@media (max-width: 720px) {
    /* filtrat e hartës — kolonë */
    .map-filters,
    .crisis-filters {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    .filter-select { width: 100%; }
}

/* -------------------------------------------------------------
   6) SCENARIO PHASES TIMELINE — vertical mobile
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .phase-item {
        padding-left: 0.75rem;
        margin-bottom: 0.85rem;
    }
    .phase-meta {
        flex-direction: column;
        gap: 0.25rem !important;
    }
    .phase-item .form-row,
    .phase-item form .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------------------------------------------
   7) SITREP BUILDER (5 sekcione) — accordion në mobile
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .sitrep-section {
        border: 1px solid var(--border, rgba(233,185,73,.22));
        border-radius: 8px;
        margin: 0.5rem 0 !important;
        background: rgba(255,255,255,0.02);
    }
    .sitrep-section h3 {
        cursor: pointer;
        margin: 0 !important;
        padding: 0.75rem 0.85rem !important;
        border-bottom: 0 !important;
        font-size: 0.85rem !important;
        position: relative;
        padding-right: 2rem !important;
    }
    .sitrep-section h3::after {
        content: "\f078"; /* fa-chevron-down */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 0.85rem;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        transition: transform .2s ease;
        font-size: 0.75rem;
        color: var(--accent, #e9b949);
    }
    .sitrep-section.collapsed h3::after {
        transform: translateY(-50%) rotate(-90deg);
    }
    .sitrep-section.collapsed > p,
    .sitrep-section.collapsed > div:not(.sitrep-actions) {
        display: none;
    }
    .sitrep-section p,
    .sitrep-section > div {
        padding: 0 0.85rem 0.85rem !important;
    }
}

/* -------------------------------------------------------------
   8) CONTACTS DIRECTORY (14) — card-stack në mobile
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .contact-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
    }
    .contact-card .actions,
    .contact-card .card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

/* -------------------------------------------------------------
   9) AAR MULTI-SECTION — tabs -> dropdown në mobile
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .admin-tabs,
    .aar-tabs,
    .nsrp-tabs {
        display: block !important;
    }
    .admin-tabs::before,
    .aar-tabs::before {
        content: "Seksioni:";
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted, #94a3b8);
        margin-bottom: 0.4rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .admin-tab,
    .aar-tab,
    .nsrp-tab {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 0.35rem;
    }
    .admin-tab.active,
    .aar-tab.active {
        order: -1;
    }
}

/* -------------------------------------------------------------
   10) BUDGET TABLE — horizontal scroll në mobile
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    table.budget-table,
    .budget-table-wrap,
    .nsrp-table-wrap {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table.budget-table { min-width: 640px; }
    .budget-table th, .budget-table td {
        white-space: nowrap;
        font-size: 0.78rem !important;
        padding: 0.5rem 0.6rem !important;
    }
}

/* -------------------------------------------------------------
   11) CERTIFICATIONS EXPIRY BANNER — full-width mobile
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .expiry-banner,
    .nsrp-expiry-banner,
    .cert-expiry-banner {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        text-align: center;
        padding: 0.75rem 0.85rem !important;
        font-size: 0.85rem !important;
        line-height: 1.35;
    }
}

/* -------------------------------------------------------------
   12) ADMIN TABLES — scroll horizontal kudo
   ------------------------------------------------------------- */
@media (max-width: 900px) {
    .admin-table-container,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table { min-width: 640px; }
    .admin-table th, .admin-table td {
        font-size: 0.8rem;
        padding: 0.6rem 0.65rem;
    }
}

/* -------------------------------------------------------------
   13) GRIDS GENERIK — auto-collapse
   ------------------------------------------------------------- */
@media (max-width: 720px) {
    .form-row,
    .stats-grid,
    .analytics-grid,
    .settings-grid,
    .performance-overview,
    .detailed-feedback,
    .consequence-tracker,
    .command-center-grid,
    .command-center-grid.two-col,
    .soc-metrics {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .admin-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box { max-width: 100%; }
}

/* -------------------------------------------------------------
   14) SEVERITY BADGES (alerts) — të dukshme në mobile
   ------------------------------------------------------------- */
.severity-critical, .badge-severity-critical { background: #dc2626 !important; color: #fff !important; }
.severity-high,     .badge-severity-high     { background: #ea580c !important; color: #fff !important; }
.severity-medium,   .badge-severity-medium   { background: #e9b949 !important; color: #000 !important; }
.severity-low,      .badge-severity-low      { background: #16a34a !important; color: #fff !important; }

/* -------------------------------------------------------------
   15) PAGINATION — të lexueshme dhe me prekje të mirë
   ------------------------------------------------------------- */
.nsrp-pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}
.nsrp-pagination a,
.nsrp-pagination span,
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--border, rgba(233,185,73,.22));
    border-radius: 6px;
    background: var(--surface, #12243e);
    color: var(--text, #f1f5f9);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.nsrp-pagination a:hover { background: var(--surface-2, #162a47); border-color: var(--accent, #e9b949); }
.nsrp-pagination .current,
.nsrp-pagination span.active,
.pagination .current,
.pagination .active {
    background: var(--primary, #002395);
    border-color: var(--accent, #e9b949);
    color: #fff;
}
.nsrp-pagination .disabled,
.pagination .disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* -------------------------------------------------------------
   16) DARK MODE OPERATIONS NATËN — auto për paletën command center
   (NSRP është gjithnjë dark; siguron ngjyrat ne prefers-color-scheme)
   ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    body { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
    /* Mbajmë paletën operative — komandë natën */
    body { color-scheme: dark; }
}

/* -------------------------------------------------------------
   17) TOUCH TARGETS — minimum 40px për prekje
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .btn,
    button,
    .action-btn,
    .nav-btn,
    .admin-tab {
        min-height: 40px;
    }
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px; /* parandalon zoom iOS */
        min-height: 40px;
    }
}

/* -------------------------------------------------------------
   18) PRINT — Sitrep / AAR
   ------------------------------------------------------------- */
@media print {
    .admin-sidebar,
    .nsrp-sidebar-toggle,
    .nsrp-sidebar-backdrop,
    .admin-toolbar,
    .nsrp-pagination,
    .pagination { display: none !important; }
    .admin-main { margin-left: 0 !important; }
    .nsrp-classif-global { background: #dc2626 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* AUDIT-RESPONSIVE: 2026-04-25 */

/* -------------------------------------------------------------
   14) TABLE AUTO-WRAP (NSRP-RESPONSIVE 2026-05-31)
   Wrapper i injektuar nga JS rreth cdo <table> qe s'eshte ne nje
   container scroll-i. Mobile-scoped: jep scroll horizontal te sigurt
   pa prishur desktop-in.
   ------------------------------------------------------------- */
.tbl-scroll { max-width: 100%; }
@media (max-width: 768px) {
    .tbl-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .tbl-scroll > table { min-width: 560px; }
}