@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =========================================================
   ROOT VARIABLES
========================================================= */
:root{
    --bg-primary:#000;
    --bg-secondary:#050505;
    --bg-card:#0d0d0d;
    --bg-card-hover:#161616;
    --bg-overlay:rgba(0,0,0,0.85);

    --border-primary:#1a1a1a;
    --border-secondary:#222;
    --border-hover:#333;

    --text-primary:#fff;
    --text-secondary:#e5e7eb;
    --text-muted:#666;

    --danger:#ff3b3b;
    --danger-soft:rgba(255,59,59,0.05);
    --danger-shadow:rgba(255,59,59,0.2);

    --warning:#eab308;
    --success:#22c55e;
    --info:#2E9EED;

    --font-main:'Inter',sans-serif;
    --font-mono:'JetBrains Mono',monospace;

    --transition-fast:0.2s ease;
    --transition-normal:0.3s ease;

    --radius-sm:4px;
    --radius-md:6px;

    --z-header:100;
    --z-modal:200;
    --z-sidepanel:210;
}

/* =========================================================
   RESET & GLOBAL
========================================================= */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:var(--font-main);
    background-color:var(--bg-primary);
    color:var(--text-primary);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

path{
    will-change:fill;
}

.app-container{
    display:flex;
    flex-direction:column;
    height:100vh;
}

/* =========================================================
   HEADER
========================================================= */
header{
    height:70px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--bg-primary);
    border-bottom:1px solid var(--border-primary);
    z-index:var(--z-header);
    flex-shrink:0;
}

/* =========================================================
   MAP
========================================================= */
#map-wrapper-fullscreen{
    position:relative;
    flex-grow:1;
    overflow:hidden;
    background:var(--bg-primary);
}

#map-container{
    width:100%;
    height:100%;
    background:var(--bg-primary) !important;
}

/* =========================================================
   MODAL OVERLAY
========================================================= */
.modal-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:var(--bg-overlay);
    backdrop-filter:blur(4px);
    z-index:var(--z-modal) !important;
}

.modal-overlay.active{
    display:flex;
}

/* =========================================================
   MODAL
========================================================= */
.modal{
    width:450px;
    max-width:90vw;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:var(--bg-card);
    border:1px solid #2a2a2a;
    contain:layout paint;
}

/* Dynamic Borders */
.modal.high{
    border-color:var(--danger);
    box-shadow:0 0 30px var(--danger-shadow);
}

.modal.medium{
    border-color:var(--warning);
    box-shadow:0 0 30px rgba(234,179,8,0.1);
}

.modal.low{
    border-color:var(--success);
}

/* =========================================================
   MODAL HEADER
========================================================= */
.modal-header{
    width:100%;
    padding:12px 16px;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    background:#0f0f0f;
    border-bottom:1px solid var(--border-secondary);
}

.modal-header .country{
    flex:1;
    min-width:0;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    gap:12px;
}

/* Flag */
.flag{
    width:28px;
    height:28px;
    margin-top:2px;
    border-radius:50%;
    background-size:cover;
    border:2px solid rgba(255,255,255,0.05);
    flex-shrink:0;
}

/* Country / Signal Title */
.country-name,
#signal-modal-title{
    flex:1;
    min-width:0;
    margin-top:1px;
    overflow:hidden;

    font-size:13.5px;
    line-height:1.35;
    font-weight:600;

    white-space:normal !important;
    word-break:break-word;
    overflow-wrap:break-word;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

/* =========================================================
   BADGES
========================================================= */
.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:2px 4px;

    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    white-space:nowrap;

    border:1px solid;
    cursor:default;

    font-family:var(--font-mono);

    transition:filter var(--transition-fast);
}

.badge:hover{
    filter:brightness(1.08);
}

.badge svg{
    width:14px;
    height:14px;
    fill:none;
    stroke-width:2;
    flex-shrink:0;
}

/* Stable */
.badge.stabila,
.badge.positive{
    border-color:#195E2F;
    background:#15331B;
    color:#2DCB77;
}

.badge.stabila svg,
.badge.positive svg{
    stroke:#2DCB77;
}

/* Medium */
.badge.tensiuni,
.badge.medium{
    border-color:#63520E;
    background:#231E0B;
    color:#D6CA15;
}

.badge.tensiuni svg,
.badge.medium svg{
    stroke:#D6CA15;
}

/* High */
.badge.conflict,
.badge.high,
.badge.negative{
    border-color:#651414;
    background:#230D0D;
    color:#EE1710;
}

.badge.conflict svg,
.badge.high svg,
.badge.negative svg{
    stroke:#EE1710;
}

/* Low */
.badge.low{
    border-color:#0C4567;
    background:#0F2C36;
    color:var(--info);
}

.badge.low svg{
    stroke:var(--info);
}

/* Neutral */
.badge.neutral{
    border-color:#404348;
    background:#191A1B;
    color:#9BA2AE;
}

.badge.neutral svg{
    stroke:#9BA2AE;
}

#signal-badges-container{
    display:flex;
    gap:6px;
    margin-top:6px;
    flex-shrink:0;
}

/* =========================================================
   MODAL BODY
========================================================= */
.modal-body{
    width:100%;
    padding:24px;
    overflow-x:hidden;
    overflow-y:auto;

    display:flex;
    flex-direction:column;

    max-height:70vh;
}

.modal-body div[class*="bg-black"]{
    width:100% !important;
    margin-top:15px;

    padding:16px !important;

    background:rgba(0,0,0,0.4);
    border:1px solid var(--border-primary);

    word-break:break-word;
    overflow-wrap:break-word;
}

.modal-footer{
    padding:16px 20px;
    background:#0f0f0f;
    border-top:1px solid var(--border-secondary);
}

/* =========================================================
   BUTTONS
========================================================= */
.view-btn{
    width:100%;
    display:block;

    padding:12px;

    background:transparent;
    border:1px solid var(--border-hover);

    color:#eee;
    text-align:center;
    text-decoration:none;

    cursor:pointer;

    font-size:13px;
    font-weight:600;
    font-family:var(--font-mono);

    transition:all var(--transition-fast);
}

.view-btn:hover{
    color:var(--danger);
    border-color:var(--danger);
    background:var(--danger-soft);
}

/* =========================================================
   SIDE PANEL
========================================================= */
#country-overview-modal{
    position:fixed;
    top:0;
    right:-500px;

    width:480px;
    height:100vh;

    display:flex;
    flex-direction:column;

    background:var(--bg-secondary);
    border-left:1px solid var(--border-primary);

    z-index:var(--z-sidepanel) !important;

    box-shadow:-20px 0 50px rgba(0,0,0,0.9);

    transition:right 0.4s cubic-bezier(0.16,1,0.3,1);
}

#country-overview-modal.active{
    right:0;
}

#overview-content-area{
    flex:1;
    overflow-x:hidden;
    overflow-y:auto;

    padding:30px;

    display:flex;
    flex-direction:column;
}

#overview-content-area h2{
    margin:0 0 10px;
    font-size:2.25rem;
    line-height:1;
}

/* =========================================================
   INTEL GRID
========================================================= */
.intel-label{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;
    padding-bottom:8px;

    font-size:10px;
    color:var(--danger);

    text-transform:uppercase;
    letter-spacing:2px;

    font-family:var(--font-mono);

    border-bottom:1px solid rgba(255,59,59,0.1);
}

.intel-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;

    margin:10px 0 30px;
}

.intel-card{
    padding:16px;

    background:var(--bg-card);
    border:1px solid var(--border-primary);

    transition:border-color var(--transition-fast);
}

.intel-card:hover{
    border-color:var(--border-hover);
}

.intel-card .label{
    margin-bottom:8px;

    font-size:8px;
    color:#555;

    text-transform:uppercase;

    font-family:var(--font-mono);
}

.intel-value{
    color:var(--text-primary);

    font-size:13px;
    font-weight:600;

    font-family:var(--font-main);
}

/* =========================================================
   PULSE ITEMS
========================================================= */
.pulse-item{
    margin-bottom:15px;
    padding:20px;

    background:rgba(255,255,255,0.02);
    border:1px solid #141414;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.pulse-item:hover{
    background:rgba(255,255,255,0.05);
    transform:translateX(5px);
}

.pulse-item .badge{
    margin-top:0;
    flex-shrink:0;
}

.pulse-item h4{
    margin:0;
    line-height:1.4;
    word-break:break-word;
}

/* =========================================================
   TIMELINE
========================================================= */
.timeline-container{
    width:100%;
    margin-bottom:30px;
}

.timeline-bar-wrapper{
    width:100%;
    height:80px;

    display:flex;
    align-items:flex-end;
    gap:4px;

    padding:10px;

    background:rgba(255,255,255,0.02);
}

.timeline-bar{
    position:relative;

    flex:1;
    min-width:8px;

    background:var(--danger);

    transition:all var(--transition-normal);
}

.timeline-bar:hover{
    cursor:help;
    background:#fff;
    filter:drop-shadow(0 0 5px var(--danger));
}

/* =========================================================
   UTILS
========================================================= */
.close-btn{
    cursor:pointer;
    color:var(--text-muted);
    font-size:20px;

    transition:color var(--transition-fast);
}

.close-btn:hover{
    color:var(--text-primary);
}

/* Skeleton */
.skeleton{
    background:linear-gradient(
        90deg,
        #0d0d0d 25%,
        #1a1a1a 50%,
        #0d0d0d 75%
    );

    background-size:200% 100%;
    animation:skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading{
    0%{
        background-position:200% 0;
    }
    100%{
        background-position:-200% 0;
    }
}

/* =========================================================
   SIGNALS
========================================================= */
.signal{
    margin-bottom:10px;
    padding:14px;

    cursor:pointer;

    background:#111;
    border:1px solid var(--border-primary);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.signal:hover{
    background:var(--bg-card-hover);
    border-color:var(--border-hover);
}

.signal-text-wrapper{
    flex:1;
    min-width:0;
    overflow:hidden;
}

.signal-text{
    overflow:hidden;

    color:var(--text-secondary);

    font-size:13px;
    line-height:1.45;

    word-break:break-word;
    overflow-wrap:break-word;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.signal .badge{
    flex-shrink:0;
    margin-top:1px;
    align-self:flex-start;
}

/* =========================================================
   3D LABELS
========================================================= */
.country-label-3d,
.country-label-3d-default{
    position:absolute;
    z-index:50;

    pointer-events:none;

    display:flex;
    flex-direction:column;
    align-items:center;

    transform:translate(-50%,-100%);

    will-change:left,top;
}

.label-content-3d{
    display:flex;
    align-items:center;
    gap:-5px;
    white-space:nowrap;
}

.country-label-3d .label-flag-small,
.country-label-3d-default .label-flag-small{
    width:20px !important;
    height:16px !important;

    line-height:1;
    font-size:18px !important;

    flex-shrink:0;

    display:inline-block !important;
    background-size:contain !important;
}

.label-text-3d{
    color:#ffdddd;
    font-size:10px;
    font-weight:600;
    font-family:var(--font-mono);
}

.label-text-3d-default{
    color:#a5b4fc;
    font-size:9px;
    font-weight:500;
    font-family:var(--font-mono);

    background:rgba(0,0,0,0);
    padding:2px 8px;

    text-transform:uppercase;
}

.label-line-container{
    position:relative;

    width:2px;
    height:28px;

    margin-top:4px;
    margin-inline:auto;
}

.label-line-3d,
.label-line-3d-default{
    position:absolute;
    top:0;
    left:0.5px;

    width:1px;
}

.label-line-3d{
    height:24px;
    background:linear-gradient(
        to top,
        rgba(245,245,245,0.35),
        rgba(245,245,245,0.05)
    );
}

.label-line-3d-default{
    height:23px;
    background:linear-gradient(
        to bottom,
        #3b82f6,
        rgba(59,130,246,0.15)
    );
}

.label-dot{
    position:absolute;
    bottom:-2px;
    left:-1.5px;

    width:5px;
    height:5px;

    z-index:12;

    border-radius:1px;
    background-color:var(--danger);
}

path.conflict-high{
    transition:fill 0.25s ease !important;
}

@keyframes floatLabel{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

/* =========================================================
   SCROLLBAR
========================================================= */
::-webkit-scrollbar{
    width:12px;
    height:12px;
    background-color:var(--bg-primary);
}

::-webkit-scrollbar-track{
    background:var(--bg-primary);
}

::-webkit-scrollbar-thumb{
    background-color:#5a0000;
    border:2px solid var(--bg-primary);
    border-radius:6px;
}

::-webkit-scrollbar-thumb:hover{
    background-color:#7a0000;
}

::-webkit-scrollbar-button{
    height:12px;
    background-color:#5a0000;
}

::-webkit-scrollbar-button:hover{
    background-color:#7a0000;
}

/* Firefox */
*{
    scrollbar-width:thin;
    scrollbar-color:#5a0000 var(--bg-primary);
}

/* =========================================================
   PERFORMANCE OPTIMIZATIONS
========================================================= */
.modal,
.signal,
.pulse-item,
.intel-card,
.timeline-bar,
.badge,
.view-btn{
    backface-visibility:hidden;
    transform:translateZ(0);
}

.modal-body,
#overview-content-area{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}