/* ============================================================================
 * responsive-geoint.css  (2026-04-25)
 * Shtresë e unifikuar përgjigjeje (responsive) për platformën GEOINT.
 * Përdoret nga: dashboard.php, public.php, report.php, country-map.php,
 *               feed-admin.php, country-risk.php, region-comparison.php,
 *               trends-analysis.php, weekly-brief.php, entity-tracker.php,
 *               sentiment-analysis.php, comparative-indexes.php,
 *               regional-calendar.php
 *
 * Nuk shton CDN. Vetëm CSS i pastër. Ngarkohet i fundit.
 * Breakpoints unik:
 *   - mobile     : <= 640px
 *   - tablet     : 641–1024px
 *   - desktop    : >= 1025px
 *   - print      : @media print  (ruan layout-in e weekly-brief)
 *
 * Paleta GEOINT klasifikuar (overlay variabla, nuk ndryshojnë font-in):
 *   --geo-navy, --geo-classified, --geo-stable, --geo-tension, --geo-crisis,
 *   --geo-positive, --geo-negative, --geo-neutral, --geo-gold
 * ============================================================================ */

:root {
    --geo-navy:        #1e3a8a;
    --geo-navy-deep:   #112352;
    --geo-classified:  #b91c1c;
    --geo-classified-soft: #dc2626;
    --geo-stable:      #15803d;   /* gjelbër */
    --geo-tension:     #ca8a04;   /* e verdhë */
    --geo-crisis:      #b91c1c;   /* e kuqe */
    --geo-positive:    #16a34a;
    --geo-negative:    #dc2626;
    --geo-neutral:     #6b7280;
    --geo-gold:        #c9a961;
    --geo-gray-50:     #f8fafc;
    --geo-gray-100:    #f1f5f9;
    --geo-gray-200:    #e2e8f0;
    --geo-gray-700:    #334155;
    --geo-gray-900:    #0f172a;
}

/* ---------------------------------------------------------------------------
 * 0) Higjienë bazike — pa zoom-out, pa overflow-x parazit
 * ------------------------------------------------------------------------ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
img, svg, video, iframe, canvas {
    max-width: 100%;
    height: auto;
}

/* Wrapper gjenerik rrëshqitës për tabelat (vendoset nga responsive-geoint.js).
 * I sigurt dhe additiv: nuk ndryshon desktop-in (tabela mbetet 100% gjerësi),
 * por në mobile/tablet ofron scroll horizontal në vend që tabela të pritet
 * nga html,body{overflow-x:hidden}. */
.tbl-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
    .tbl-scroll > table {
        min-width: 560px;   /* ruan lexueshmërinë e kolonave pas scroll-it */
    }
}

/* ---------------------------------------------------------------------------
 * 1) Dashboard — navigim me tab-e (40+ tab-e)
 *    a) Mobile <=640px: dropdown selector i jep akses të shpejtë
 *    b) Tablet 641-1024: scroll horizontal me snap
 *    c) Desktop: layout origjinal
 * ------------------------------------------------------------------------ */
.nav-tabs[role="tablist"] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

@media (max-width: 1024px) {
    .nav-tabs[role="tablist"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        gap: 4px;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }
    .nav-tabs[role="tablist"]::-webkit-scrollbar { height: 4px; }
    .nav-tabs[role="tablist"]::-webkit-scrollbar-thumb { background: var(--geo-gold); border-radius: 2px; }
    .nav-tabs .nav-tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

/* Dropdown selector — alternativë mbi mobile */
.nav-tabs-mobile-selector {
    display: none;
    width: 100%;
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: var(--geo-navy-deep);
    color: #fff;
    border: 1px solid var(--geo-gold);
    border-radius: 4px;
    font-size: 16px; /* parandalon zoom iOS */
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--geo-gold) 50%),
                      linear-gradient(135deg, var(--geo-gold) 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
@media (max-width: 640px) {
    .nav-tabs-mobile-selector { display: block; }
}

/* ---------------------------------------------------------------------------
 * 2) Country Map — heatmap grid (cell-based) responsive
 *    - SVG embedded gjithashtu pinch-zoom-friendly
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    /* Grid të vegjël për mobile */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
        gap: 6px !important;
    }
    .grid .cell { padding: 8px 4px !important; }
    .grid .cell .flag { font-size: 1.15rem !important; }
    .grid .cell .cc   { font-size: 0.78rem !important; }
    .grid .cell .n    { font-size: 0.66rem !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
    }
}

/* SVG harta interaktive — pinch zoom touch */
.map-svg-wrap {
    position: relative;
    width: 100%;
    overflow: auto;
    touch-action: pinch-zoom;
    -webkit-overflow-scrolling: touch;
    background: var(--geo-gray-900);
    border: 1px solid var(--geo-gray-700);
    border-radius: 4px;
}
.map-svg-wrap svg {
    display: block;
    min-width: 320px;
    width: 100%;
    height: auto;
    touch-action: pinch-zoom;
}

/* ---------------------------------------------------------------------------
 * 3) Region Comparison — 3 vende side-by-side
 *    Stack në mobile, 2-kollona në tablet, 3-kollona në desktop
 * ------------------------------------------------------------------------ */
.region-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) {
    .region-compare-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .region-compare-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * 4) Comparative Indexes — tabela 22 vende × 6 indeksa
 *    Horizontal scroll + sticky kollona e parë (vendi)
 * ------------------------------------------------------------------------ */
.comparative-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--geo-gray-700);
    border-radius: 4px;
}
.comparative-table-wrap table {
    min-width: 720px;
    border-collapse: separate !important;
    border-spacing: 0;
}
.comparative-table-wrap th:first-child,
.comparative-table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    box-shadow: 1px 0 0 var(--geo-gray-700);
}
.comparative-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ---------------------------------------------------------------------------
 * 5) Entity Tracker — timeline vertikal në mobile
 * ------------------------------------------------------------------------ */
.entity-timeline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.entity-timeline > .entity-row {
    flex: 1 1 320px;
    min-width: 0;
}
@media (max-width: 768px) {
    .entity-timeline { flex-direction: column; }
    .entity-timeline > .entity-row { flex: 1 1 auto; width: 100%; }
}

/* ---------------------------------------------------------------------------
 * 6) Country Risk Heatmap — card grid responsive
 * ------------------------------------------------------------------------ */
.country-risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
@media (max-width: 640px) {
    .country-risk-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ---------------------------------------------------------------------------
 * 7) Pagination — komponent universal
 * ------------------------------------------------------------------------ */
.geo-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 18px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--geo-gray-700);
    font-size: 0.85rem;
}
.geo-pagination a,
.geo-pagination span.geo-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--geo-gray-700);
    border-radius: 3px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    background: rgba(255,255,255,0.02);
    transition: all .15s;
}
.geo-pagination a:hover {
    border-color: var(--geo-gold);
    color: var(--geo-gold);
}
.geo-pagination span.geo-page.active {
    background: var(--geo-navy);
    color: #fff;
    border-color: var(--geo-navy);
}
.geo-pagination span.geo-page.disabled {
    opacity: .4;
    pointer-events: none;
}
.geo-pagination .geo-page-meta {
    margin-left: auto;
    font-size: 0.78rem;
    opacity: .7;
    font-style: italic;
}
@media (max-width: 640px) {
    .geo-pagination { font-size: 0.78rem; gap: 4px; }
    .geo-pagination a, .geo-pagination span.geo-page { min-width: 32px; height: 32px; padding: 0 8px; }
    .geo-pagination .geo-page-meta { width: 100%; text-align: center; margin: 6px 0 0; }
}

/* ---------------------------------------------------------------------------
 * 8) Status & Sentiment colors (badge utilities)
 * ------------------------------------------------------------------------ */
.status-stable, .badge.status-stable   { background: var(--geo-stable);  color: #fff; }
.status-tension, .badge.status-tension { background: var(--geo-tension); color: #1f1f1f; }
.status-crisis, .badge.status-crisis   { background: var(--geo-crisis);  color: #fff; }
.sentiment-pos, .badge.sentiment-pos   { background: var(--geo-positive); color: #fff; }
.sentiment-neg, .badge.sentiment-neg   { background: var(--geo-negative); color: #fff; }
.sentiment-neu, .badge.sentiment-neu   { background: var(--geo-neutral);  color: #fff; }

.classified-banner {
    background: var(--geo-classified);
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    font-size: 0.72rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-weight: 800;
    border-top: 2px solid #7f1d1d;
    border-bottom: 2px solid #7f1d1d;
}

/* ---------------------------------------------------------------------------
 * 9) Dark mode për operacione natën — vetëm për admin pages, opt-in
 * ------------------------------------------------------------------------ */
body[data-night="1"] {
    background: #0a0e16 !important;
    color: #d8e0ec !important;
}
body[data-night="1"] .panel,
body[data-night="1"] .card,
body[data-night="1"] .ops-panel {
    background: #11161f !important;
    border-color: #1c2433 !important;
}
body[data-night="1"] table th { background: #0d1320 !important; }
body[data-night="1"] table tr:hover td { background: rgba(201,169,97,0.05) !important; }
body[data-night="1"] input,
body[data-night="1"] select,
body[data-night="1"] textarea {
    background: #0d1320 !important;
    color: #d8e0ec !important;
    border-color: #1c2433 !important;
}

/* Toggle button pluskoj në cep — i diskret */
.geo-night-toggle {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9990;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--geo-gold);
    background: rgba(0,0,0,.55);
    color: var(--geo-gold);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.geo-night-toggle:hover { background: rgba(0,0,0,.8); }
@media print { .geo-night-toggle { display: none !important; } }

/* ---------------------------------------------------------------------------
 * 10) Form layouts — mobile usability
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    .form-row, .filters-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .form-row > *, .filters-row > * { width: 100% !important; min-width: 0 !important; }
    .ops-masthead { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
    .layout { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------------
 * 11) Print — ruajmë layout-in e weekly-brief.php (1-faqe A4)
 * ------------------------------------------------------------------------ */
@media print {
    .nav-top, .nav-tabs, .nav-tabs-mobile-selector,
    .topbar, .geo-night-toggle, .filters-row,
    .row-actions, .geo-pagination,
    button, .btn, form { display: none !important; }
    body { background: #fff !important; color: #111 !important; }
    .panel, .card, .ops-panel {
        background: #fff !important; border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
    table { font-size: 10pt; }
    a { color: #111 !important; text-decoration: none !important; }
    h1, h2, h3 { color: #111 !important; page-break-after: avoid; }

    /* Weekly brief: lejojmë vetëm panelin e brief-it */
    .weekly-brief-print {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
 * 12) Tap target sizing & accessible focus
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    button, .btn, a.btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
    }
    input, select, textarea { min-height: 44px; font-size: 16px; }
}
:focus-visible {
    outline: 2px solid var(--geo-gold) !important;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 13) Panele off-canvas me gjerësi fikse (dashboard v6/v7) — mos kalo viewport-in
 *     Additiv, i skopuar për mobile/tablet të vegjël. Desktop mbetet i paprekur.
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    .geo-dossier-panel,
    .v7-mitre-detail-panel,
    .v7-bio-profile-panel,
    .v7-collab-panel,
    .v7-annotation-panel {
        width: 92vw !important;
        max-width: 92vw !important;
    }
    .v7-notif-dropdown {
        width: 88vw !important;
        max-width: 88vw !important;
    }
    /* Komponente me min-width shumë të madh: lejo scroll brenda kontejnerit */
    .v7-mitre-matrix {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}