:root {
    --map-navy-50: #f0f4f8;
    --map-navy-100: #d9e2ec;
    --map-navy-700: #1e3a5f;
    --map-navy-800: #102a43;
    --map-navy-900: #0a1f3a;
    --map-emerald-50: #ecfdf5;
    --map-emerald-500: #10b981;
    --map-emerald-600: #059669;
    --map-emerald-700: #047857;
    --map-amber-500: #f59e0b;
    --map-amber-600: #d97706;
    --map-stone-50: #fafaf9;
    --map-stone-100: #f5f5f4;
    --map-stone-200: #e7e5e4;
    --map-stone-300: #d6d3d1;
}

/* ========== KPI Cards ========== */
.kpi-card-custom {
    background: linear-gradient(135deg, #ffffff 0%, var(--map-stone-50) 100%);
    border: 1px solid var(--map-stone-200);
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--map-emerald-600), var(--map-amber-500), var(--map-navy-700));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kpi-card-custom:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(10, 31, 58, 0.1);
    border-color: var(--map-emerald-200);
}

.kpi-card-custom:hover::before {
    opacity: 1;
}

.kpi-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--map-emerald-50);
    color: var(--map-emerald-700);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    transition: transform 0.3s ease;
}

.kpi-card-custom:hover .kpi-card-icon {
    transform: scale(1.1) rotate(-5deg);
}

.kpi-icon-green { background: #ecfdf5; color: #047857; }
.kpi-icon-amber { background: #fffbeb; color: #d97706; }
.kpi-icon-navy { background: #f0f4f8; color: #1e3a5f; }

.kpi-card-value {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--map-navy-900);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.kpi-card-label {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 600;
}

/* ========== Map Legend Bar ========== */
.map-legend-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.875rem 1.25rem;
    background: white;
    border: 1px solid var(--map-stone-200);
    border-radius: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--map-navy-800);
    font-weight: 600;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot-active {
    background: var(--map-emerald-600);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

.legend-dot-inactive {
    background: #d1d5db;
    border: 1px solid #9ca3af;
}

/* ========== Map Container ========== */
.yemen-map-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.map-canvas-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-radius: 1.5rem;
    border: 1px solid var(--map-stone-200);
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative; /* CRITICAL for tooltip positioning */
    overflow: visible;  /* Allow tooltip to show outside if needed */
}

.yemen-svg-container {
    position: relative;
    width: 100%;
}

/* ========== SVG Governorate Paths ========== */
.yemen-gov-path {
    fill: #e5e7eb;
    stroke: #ffffff;
    stroke-width: 1.2;
    cursor: default;
    transition: fill 0.25s ease, filter 0.25s ease;
    pointer-events: none !important; /* Disable interaction on shape paths */
}

/* Active governorates (have projects) */
/*.yemen-gov-path.active-gov {
    fill: var(--map-emerald-600);
    filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.2));
}*/

.yemen-gov-path.active-gov {
    fill: #aeceef;
    filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.2));
}
.yemen-gov-path.active-gov:hover {
    fill: var(--map-emerald-700);
    filter: drop-shadow(0 4px 12px rgba(5, 150, 105, 0.5));
    stroke: #ffffff;
    stroke-width: 1.8;
}

/* Inactive governorates */
.yemen-gov-path.inactive-gov {
    fill: #e5e7eb;
}

.yemen-gov-path.inactive-gov:hover {
    fill: #d1d5db;
}

/* ========== City Markers ========== */
.y-city {
    cursor: not-allowed;
    transition: opacity 0.25s ease;
    opacity: 0.4;
    pointer-events: auto !important;
}

.y-city * {
    pointer-events: auto !important;
}

.y-city.active-marker {
    cursor: pointer;
    opacity: 1;
}

.y-pin-body {
    fill: #9ca3af;
    transition: fill 0.25s ease;
}

.y-city.active-marker .y-pin-body {
    fill: var(--map-amber-600);
}

.y-city.active-marker:hover .y-pin-body {
    fill: var(--map-amber-500);
}

.y-pin-core {
    fill: #ffffff;
    transition: fill 0.25s ease;
}

.y-pin-shadow {
    fill: rgba(0, 0, 0, 0.15);
    filter: blur(1px);
}

/* Pulsing animation - ONLY for active cities */
.y-pulse {
    fill: var(--map-amber-500);
    opacity: 0;
}

.y-city.active-marker .y-pulse {
    animation: yemenPulse 2.5s ease-out infinite;
    transform-origin: center;
}

@keyframes yemenPulse {
    0% {
        opacity: 0.6;
        r: 6;
    }
    100% {
        opacity: 0;
        r: 16;
    }
}

/* City labels */
.y-label {
    font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    fill: var(--map-navy-900);
    pointer-events: none !important; /* CRITICAL: don't capture mouse events */
    user-select: none;
    text-shadow: 
        0 0 3px white, 
        0 0 3px white, 
        0 0 3px white,
        0 0 3px white;
    paint-order: stroke;
    stroke: white;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.y-city.active-marker .y-label {
    fill: var(--map-navy-900);
    font-weight: 800;
}

.y-city:not(.active-marker) .y-label {
    fill: #6b7280;
    opacity: 0.7;
}

/* ========== PREMIUM TOOLTIP CARD ========== */
.map-tooltip-card {
    /* CRITICAL: pointer-events none prevents tooltip from capturing mouse */
    pointer-events: none !important;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    min-width: 240px;
    max-width: 280px;
    background: white;
    border-radius: 1rem;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.15),
        0 10px 10px -5px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    
    /* Smooth transition (no shake) */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    
    overflow: hidden;
    will-change: transform, opacity;
}

.map-tooltip-card.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    /* Re-enable pointer events on visible state for CTA click */
    pointer-events: auto !important;
}

/* Tooltip top accent bar */
.map-tooltip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--map-emerald-600), var(--map-amber-500), var(--map-navy-700));
}

/* Tooltip Header */
.tooltip-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
}

.tooltip-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--map-emerald-600), var(--map-emerald-700));
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.25);
}

.tooltip-card-titles {
    flex: 1;
    min-width: 0;
}

.tooltip-card-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--map-navy-900);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tooltip-card-subtitle {
    font-size: 0.75rem;
    color: var(--map-emerald-700);
    font-weight: 600;
    display: block;
    margin-top: 0.125rem;
}

.tooltip-card-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--map-stone-200), transparent);
    margin: 0 1rem;
}

/* Tooltip Stats */
.tooltip-card-stats {
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.tooltip-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: var(--map-stone-50);
    border-radius: 0.5rem;
    border: 1px solid var(--map-stone-100);
}

.tooltip-stat-icon {
    font-size: 0.875rem;
    color: var(--map-emerald-600);
    flex-shrink: 0;
}

.tooltip-stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tooltip-stat-label {
    font-size: 0.625rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tooltip-stat-value {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--map-navy-900);
    line-height: 1.2;
}

/* Tooltip CTA Button */
.tooltip-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 1rem 1rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--map-navy-900), var(--map-navy-800));
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.625rem;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(10, 31, 58, 0.2);
}

.tooltip-card-cta:hover {
    background: linear-gradient(135deg, var(--map-emerald-700), var(--map-emerald-600));
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
    color: white;
}

.tooltip-card-cta i {
    transition: transform 0.25s ease;
}

.tooltip-card-cta:hover i {
    transform: translateX(3px);
}

[dir="rtl"] .tooltip-card-cta:hover i {
    transform: translateX(-3px);
}

/* ========== Accessibility ========== */
@media (prefers-reduced-motion: reduce) {
    .yemen-gov-path,
    .y-city,
    .map-tooltip-card,
    .kpi-card-custom {
        transition: none !important;
        animation: none !important;
    }
    
    .y-pulse {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* ========== Mobile Responsive ========== */
@media (max-width: 768px) {
    .map-canvas-wrapper {
        padding: 1rem;
    }
    
    .map-tooltip-card {
        min-width: 200px;
        max-width: 240px;
    }
    
    .tooltip-card-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .y-label {
        font-size: 8px;
    }
    
    .map-legend-bar {
        gap: 1rem;
        padding: 0.75rem;
        font-size: 0.75rem;
    }
}

/* ========== RTL Support ========== */
[dir="rtl"] .tooltip-card-header {
    text-align: right;
}

[dir="rtl"] .legend-item,
[dir="rtl"] .tooltip-stat-item {
    flex-direction: row-reverse;
}