/* ============================================================================
   NDC Transport Tracker — Styles
   ============================================================================ */

:root {
    /* Aliases to shared design tokens (assets/design-tokens.css) */
    --color-primary:         var(--ct-green,        #9DBE3D);
    --color-primary-dark:    var(--ct-green-dark,   #7A9B2E);
    --color-secondary:       var(--ct-navy,         #003D5C);
    --color-secondary-light: var(--ct-navy-light,   #005580);
    --color-accent:          var(--ct-teal,         #00A4BD);
    --color-orange:          var(--ct-orange,       #E8821A);

    --color-gen-latest: var(--ct-gen-latest, #9DBE3D);
    --color-gen1:       var(--ct-gen1,       #003D5C);
    --color-gen2:       var(--ct-gen2,       #00A4BD);
    --color-gen3:       var(--ct-gen3,       #E8821A);

    --color-bg:      var(--ct-bg,      #F4F6F8);
    --color-surface: var(--ct-surface, #FFFFFF);
    --color-border:  var(--ct-border,  #E1E4E8);
    --color-text:    var(--ct-text,    #2C3E50);
    --color-muted:   var(--ct-muted,   #6B7280);

    --font-sans: var(--ct-font, 'Source Sans 3', -apple-system, sans-serif);
    --font-mono: 'Courier New', monospace;

    --sp-xs: var(--ct-sp-xs, 0.375rem);
    --sp-sm: var(--ct-sp-sm, 0.75rem);
    --sp-md: var(--ct-sp-md, 1rem);
    --sp-lg: var(--ct-sp-lg, 1.25rem);
    --sp-xl: var(--ct-sp-xl, 1.5rem);

    --radius-sm: var(--ct-radius-sm, 4px);
    --radius-md: var(--ct-radius-md, 8px);
    --radius-lg: var(--ct-radius-lg, 12px);

    --shadow-sm: var(--ct-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    --shadow-md: var(--ct-shadow-md, 0 4px 10px rgba(0,61,92,0.10));
    --shadow-lg: var(--ct-shadow-lg, 0 10px 20px rgba(0,0,0,0.10));
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Tab nav ───────────────────────────────────────────────────────── */
.tab-navigation {
    background: var(--color-secondary);
    display: flex;
    padding: 0 var(--sp-lg);
}

.tab-button {
    padding: var(--sp-md) var(--sp-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.01em;
}
.tab-button:hover { color: white; background: rgba(255,255,255,0.07); }
.tab-button.active { color: white; border-bottom-color: var(--color-primary); }
.tab-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.tab-link:hover {
    text-decoration: none;
}
/* ── Tab content ──────────────────────────────────────────────────── */
.tab-content { display:none; max-width:1400px; margin:0 auto; padding:var(--sp-sm) var(--sp-md); }
.tab-content.active { display:block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

.tab-header { margin-bottom: var(--sp-sm); }

.tab-title-section { display: none; }

.info-tooltip {
    background: transparent;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.info-tooltip:hover { transform: scale(1.15); }

/* ── Filters bar ──────────────────────────────────────────────────── */
.filters-section {
    display: flex;
    gap: var(--sp-sm);
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--color-surface);
    padding: 0.625rem var(--sp-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}
.filters-section.hidden { display: none; }

.filter-group { display:flex; flex-direction:column; gap:0.4rem; }

.filter-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    padding: 0.5rem 0.875rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 200px;
}
.filter-select:hover { border-color: var(--color-primary); }
.filter-select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(157,190,61,0.15); }

/* ── Generation toggles ───────────────────────────────────────────── */
.gen-toggle-group { display:flex; gap:0.375rem; flex-wrap:wrap; align-items:center; }

.gen-toggle {
    padding: 0.45rem 0.875rem;
    border: 2px solid var(--gen-color, var(--color-border));
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--gen-color, var(--color-muted));
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.55;
}
.gen-toggle:hover { opacity:0.85; background:color-mix(in srgb,var(--gen-color) 10%,transparent); }
.gen-toggle.active {
    background: var(--gen-color, var(--color-primary));
    color: white;
    opacity: 1;
    box-shadow: 0 2px 6px color-mix(in srgb,var(--gen-color) 35%,transparent);
}

/* Reset button */
.btn-reset {
    padding: 0.45rem 0.875rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.25rem;
}
.btn-reset:hover { border-color:var(--color-secondary); color:var(--color-secondary); background:rgba(0,61,92,0.05); }

/* ── View toggle ──────────────────────────────────────────────────── */
.view-toggle { display:flex; gap:0.375rem; margin-left:auto; align-self:flex-end; }

.toggle-button {
    display:flex; align-items:center; gap:0.4rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.toggle-button:hover { background:rgba(157,190,61,0.08); border-color:var(--color-primary); color:var(--color-text); }
.toggle-button.active { background:var(--color-primary); border-color:var(--color-primary); color:white; }

/* ── Currently showing label (unified for all charts and maps) ───── */
.currently-showing-label {
    font-size: 0.8125rem;
    color: var(--color-secondary);
    background: rgba(0,61,92,0.04);
    border-left: 3px solid var(--color-secondary);
    padding: 0.4rem 0.75rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.cs-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    opacity: 0.7;
    margin-right: 0.5rem;
}

/* ── Visualization containers ─────────────────────────────────────── */
.visualization-container {
    background: var(--color-surface);
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--sp-sm);
    border: 1px solid var(--color-border);
    position: relative;
}
.visualization-container.hidden { display:none; }

.chart-wrapper { position:relative; height:460px; max-height:70vh; }

.svg-map-container {
    height: 450px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.map-container .leaflet-container,
.map-container .leaflet-container .leaflet-tile-pane,
.map-container .leaflet-map-pane,
.leaflet-container {
    background: #FFFFFF !important;
}

/* ── Map legend ───────────────────────────────────────────────────── */
.map-legend {
    position: static;
    background: white;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-top: var(--sp-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.2rem;
    font-size: 0.85rem;
    row-gap: 0.4rem;
}

.map-legend .legend-title {
    width: 100%;
    margin-bottom: 0.1rem;
}

.legend-title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--color-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text);
    margin-bottom: 0;
}

.legend-color { width:14px; height:14px; border-radius:3px; flex-shrink:0; }

.legend-gradient {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    min-width: 200px;
    flex: 1 1 200px;
}

.gradient-bar {
    flex: 1;
    min-width: 80px;
    height: 14px;
    background: linear-gradient(to right, #f0f0f0, var(--color-accent));
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0,0,0,0.1);
    transition: background 0.4s ease;
}

.legend-label { font-size:0.75rem; color:var(--color-muted); white-space:nowrap; }

/* ── Action buttons ───────────────────────────────────────────────── */
.action-buttons { display:flex; justify-content:flex-end; margin-top:0.375rem; }

.btn-download {
    display:flex; align-items:center; gap:0.5rem;
    padding: 0.625rem var(--sp-md);
    background: var(--color-secondary);
    color: white; border:none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans); font-size:0.9375rem; font-weight:600;
    cursor:pointer; transition:all 0.2s; box-shadow:var(--shadow-sm);
}
.btn-download:hover { background:var(--color-secondary-light); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-download:active { transform:translateY(0); }

/* ── Tooltip modal ────────────────────────────────────────────────── */
.tooltip-modal {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.45); z-index:1000;
    align-items:center; justify-content:center;
    backdrop-filter:blur(3px);
}
.tooltip-modal.active { display:flex; animation:fadeIn 0.2s ease; }

.tooltip-content {
    background:white; padding:var(--sp-lg);
    border-radius:var(--radius-lg);
    max-width:520px; width:90%; margin:var(--sp-md);
    box-shadow:var(--shadow-lg); position:relative;
    max-height:85vh; overflow-y:auto;
}

.tooltip-content h3 {
    font-size:1rem; font-weight:700;
    color:var(--color-secondary);
    margin-bottom:0.5rem;
}
.tooltip-content h3:not(:first-child) { margin-top:var(--sp-sm); }

.tooltip-content p {
    font-size:0.9375rem; line-height:1.65;
    color:var(--color-text); margin-bottom:0.625rem;
    padding-right:1.5rem;
}
.tooltip-content p:last-child { margin-bottom:0; }

.tooltip-divider {
    border:none; border-top:1px solid var(--color-border);
    margin: var(--sp-sm) 0;
}

.tooltip-close {
    position:absolute; top:0.875rem; right:0.875rem;
    background:transparent; border:none;
    font-size:1.75rem; line-height:1;
    color:var(--color-muted); cursor:pointer; transition:color 0.2s;
}
.tooltip-close:hover { color:var(--color-text); }

/* ── Loading ──────────────────────────────────────────────────────── */
.loading-overlay {
    position:fixed; inset:0; background:rgba(255,255,255,0.95);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    z-index:9999;
}
.loading-overlay.hidden { display:none; }

.loading-spinner {
    width:52px; height:52px;
    border:4px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin 0.75s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.loading-overlay p { margin-top:var(--sp-md); font-size:1rem; font-weight:500; color:var(--color-text); }

/* ── Leaflet popups ───────────────────────────────────────────────── */
.leaflet-popup-content-wrapper { border-radius:var(--radius-md); font-family:var(--font-sans); box-shadow:var(--shadow-lg); }
.leaflet-popup-content { margin:12px 16px; }

.popup-title { font-weight:700; font-size:0.9375rem; color:var(--color-secondary); margin-bottom:6px; }
.popup-info  { font-size:0.875rem; color:var(--color-text); line-height:1.6; }

.popup-tag {
    display:inline-block; padding:2px 8px; border-radius:20px;
    font-size:0.75rem; font-weight:600;
}
.popup-tag.yes { background:rgba(157,190,61,0.15); color:#5a7020; }
.popup-tag.no  { background:rgba(0,0,0,0.07); color:var(--color-muted); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:768px) {
    .tab-navigation { padding:0; }
    .tab-button { padding:var(--sp-sm); font-size:0.875rem; flex:1; }
    .tab-content { padding:var(--sp-sm); }
    .filters-section { flex-direction:column; align-items:stretch; }
    .filter-select { min-width:auto; }
    .view-toggle { margin-left:0; }
    .toggle-button { flex:1; justify-content:center; }
    .chart-wrapper { height:380px; }
    .svg-map-container { height:360px; }
    .gen-toggle { font-size:0.8rem; padding:0.375rem 0.625rem; }
}

/* ── Previous transport tag ───────────────────────────────────────── */
.popup-tag.prev {
    background: rgba(126,200,227,0.2);
    color: #1a6b8a;
}

/* ── Category toggle buttons (Tab 2 map) ─────────────────────────── */
.cat-toggle-group {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cat-toggle {
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

.cat-toggle:hover {
    opacity: 0.9;
    border-color: var(--color-accent);
    color: var(--color-text);
}

.cat-toggle.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0,164,189,0.3);
}

/* Attribution control styling */
.leaflet-control-attribution {
    font-size: 0.65rem !important;
    max-width: 600px;
    background: rgba(255,255,255,0.85) !important;
}

/* ── Tab2 map filters: two-row layout ────────────────────────────── */
#tab2-map-filters {
    flex-direction: column;
    gap: var(--sp-sm);
}

#tab2-map-filters .filter-row-1 {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
}

#tab2-map-filters .filter-row-2 {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

#tab2-map-filters .filter-row-2 label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Category pills — smaller than gen toggles */
.cat-toggle {
    padding: 0.3rem 0.6rem;
    font-size: 0.775rem;
}

/* Tab1 map filters — minimal, just view toggle */
#tab1-map-filters {
    justify-content: flex-end;
}

/* ── Clickable country name in popup ─────────────────────────────── */
.popup-country-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9375rem;
    transition: color 0.2s;
}

.popup-country-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.popup-link-icon {
    font-size: 0.75rem;
    vertical-align: super;
    margin-left: 2px;
    opacity: 0.7;
}

/* ============================================================================
   Print styles — native browser print
   ============================================================================ */
@media print {
    /* Hide everything except the active tab content */
    .tab-navigation,
    .filters-section,
    .action-buttons,
    .loading-overlay,
    .tooltip-modal,
    .leaflet-control-zoom,
    .leaflet-control-attribution {
        display: none !important;
    }

    body {
        background: white;
        font-family: 'IBM Plex Sans', sans-serif;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Print header */
    .tab-content.active::before {
        content: attr(data-print-title);
        display: block;
        font-size: 18pt;
        font-weight: 700;
        color: #003D5C;
        margin-bottom: 4pt;
    }

    .tab-content.active::after {
        content: attr(data-print-date) " — GIZ-SLOCAT Transport Tracker";
        display: block;
        font-size: 9pt;
        color: #6B7280;
        margin-bottom: 16pt;
    }

    /* Show only the active tab */
    .tab-content { display: none !important; }
    .tab-content.active { display: block !important; }

    /* Hide non-active views */
    .visualization-container.hidden { display: none !important; }

    /* Make visualizations fill the page */
    .visualization-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    .chart-wrapper { height: 80vh !important; }
    .svg-map-container { height: 80vh !important; }

    /* Map legend stays visible */
    .map-legend {
        margin-top: 12pt;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    /* Subtitles */
    .chart-subtitle,
    .map-currently-showing {
        font-size: 10pt;
        margin-bottom: 8pt;
    }

    @page {
        size: A4 landscape;
        margin: 15mm;
    }
}

/* ── Map type toggle (Dorling / Dots) ───────────────────────────── */
.map-type-toggle {
    display: flex;
    gap: 2px;
    background: var(--color-border);
    border-radius: 999px;
    padding: 2px;
}
.map-type-btn {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-secondary);
    cursor: pointer;
    transition: all 0.18s;
}
.map-type-btn.active {
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    color: var(--color-secondary);
}
.map-type-btn:hover:not(.active) { background: rgba(255,255,255,0.6); }

/* ── SVG map container ───────────────────────────────────────────── */
.svg-map-container {
    width: 100%;
    min-height: 420px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #F8FAFB;
}
.svg-map-container svg {
    width: 100%;
    height: auto;
    display: block;
    cursor: grab;
    user-select: none;
}
.svg-map-container svg:active {
    cursor: grabbing;
}

/* ── SVG map tooltip ─────────────────────────────────────────────── */
.svg-map-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    display: none;
    background: rgba(0,61,92,0.95);
    color: #fff;
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.83rem;
    max-width: 240px;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.svg-map-tooltip strong { color: var(--color-gen-latest); }
.svg-map-tooltip .tt-tag { font-size: 0.75rem; opacity: 0.8; }

/* ── Map disclaimer ──────────────────────────────────────────────── */
.map-disclaimer {
    font-size: 0.76rem;
    color: var(--color-muted);
    font-style: italic;
    margin-top: 0.75rem;
    max-width: 100%;
    line-height: 1.4;
}