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

body{
font-family:'Segoe UI',sans-serif;
background:#111;
background-image: none;
height:100vh;
}

/* MAIN GRID */
.container{
display:grid;
grid-template-columns:0.8fr 2fr 0.3fr;
gap:6px;
height:98vh;
/* leave room at top for year-selector buttons */
padding:20px 8px 8px 8px;
position:relative;
}

/* PANELS */
.panel{
background:#fff;
border-radius:12px;
padding:6px;
display:flex;
flex-direction:column;
overflow:hidden;
}

/* HEADER */
.header{
background:#0f172a;
color:#fff;
font-weight:bold;
padding:8px;
border-radius:8px;
margin-bottom:8px;
font-size:13px;
display:flex;
justify-content:space-between;
align-items:center;
}

/* USER DISPLAY (top-left) */
.user-display{
    position:fixed;
    top:18px;
    left:24px;
    z-index:1002;
    color:#0f172a;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    padding:7px 14px;
    min-width:160px;
    text-align:center;
    border-radius:999px;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(15,23,42,0.25);
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    transition:background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.user-display:hover{
    background:rgba(255,255,255,0.98);
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
}

.year-burger{
    font-size:18px;
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    background:#0f172a;
    cursor:pointer;
    border:2px solid #17a589;
    transition:all 0.2s ease;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
}
.year-burger:hover{
    background:#17a589;
    transform:scale(1.08) translateY(-2px);
    box-shadow:0 4px 12px rgba(23,165,137,0.4);
}
.year-burger:active{
    transform:scale(0.96);
}

.header .year-nav button{
    margin-left:4px;
}

/* LEFT PANEL */
.left-panel-content{
overflow-y:auto;
padding-right:4px;
}

/* ANALYTICS SECTIONS */
.analytics-section{
display:flex;
flex-direction:column;
border:2px solid #17a589;
border-radius:10px;
padding:6px;
margin-bottom:8px;
overflow:hidden;
}

.analytics-row{
display:flex;
align-items:center;
height:150px; /* taller to fit larger chart */
width:100%;
gap:8px;
overflow:hidden;
}

.analytics-section img{
height:220px; /* make icons even bigger */
width:auto;            /* keep original aspect ratio */
max-width:120px;       /* allow more width for larger images */
object-fit:contain;
}

.analytics-chart{
flex:1;
height:140px !important; /* increased height for better visibility */
width:100% !important;
max-width:100%;
}

/* CONTROLS */
.controls{
margin-top:4px;
font-size:10px;
display:flex;
flex-wrap:wrap;
gap:4px;
align-items:center;
}


/* LOGIN BUTTON HOVER */
#loginForm button[type="submit"] {
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

#loginModal #loginForm button[type="submit"]:hover {
    background: #138d75 !important;
    box-shadow: 0 4px 16px #17a58955 !important;
    transform: translateY(-2px) scale(1.04) !important;
}

/* LOGOUT BUTTON */
#logoutBtn {
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
#logoutBtn:hover {
    background: #c0392b !important;
    box-shadow: 0 4px 16px #e74a3b55 !important;
    transform: translateY(-2px) scale(1.04) !important;
}

/* LOGIN FORM SEMI-TRANSPARENT BG */
#loginForm {
    background: rgba(255,255,255,0.78) !important;
    /* fallback for browsers that don't support rgba */
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 32px #0007;
}

.year-nav{
    position:absolute;
    top:40px;
    left:0;
    z-index:1002;
    display:none;
    background:#0f172a;
    padding:8px;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    border:1px solid rgba(23,165,137,0.3);
    min-width:90px;
}
.year-nav button{
    display:block;
    margin:4px 0;
    width:100%;
    text-align:center;
    padding:8px 12px;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    border:1px solid #17a589;
    border-radius:5px;
    background:#fff;
    color:#0f172a;
    transition:all 0.2s ease;
}
.year-nav button:hover{
    background:#17a589;
    color:#fff;
    transform:translateX(2px);
    box-shadow:0 2px 8px rgba(23,165,137,0.3);
}
.year-nav button:active{
    background:#0f5e3a;
    color:#fff;
    transform:scale(0.98);
}
.year-nav button.active{
    background:#17a589;
    color:#fff;
    font-weight:bold;
    border:1px solid #fff;
}  

.controls input{
width:55px;
padding:2px;
font-size:10px;
}

.controls button{
padding:3px 6px;
border:none;
background:#17a589;
color:#fff;
border-radius:5px;
cursor:pointer;
font-size:10px;
}

/* SDG SECTION */
.sdg-wrapper{position:relative;}

.sdg-container{
margin-top:12px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
padding:16px;
border-radius:20px;
justify-items:center;
align-items:center;
position:relative;
z-index:2;
}

.sdg-card{
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
background:#fff;
box-shadow:0 6px 15px rgba(0,0,0,0.2);
cursor:pointer;
transition:0.3s;
}

.sdg-card img{
width:48px;
height:48px;
}

.sdg-card:hover{
transform:scale(1.08);
}

/* SDG LINES */
.sdg-lines{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1;
}

.sdg-lines line{
stroke:#222;
stroke-width:3;
}

.sdg-lines path{
stroke:#222;
stroke-width:3;
fill:none;
marker-end:url(#arrow);
}

/* DETAIL VIEW */
#detailArea{
flex:1;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

#detailArea img{
    width:100%;
    height:100%;
    object-fit:fill; /* stretch exactly to container, no cropping */
}

#detailArea video{
    width:100%;
    height:100%;
    object-fit:cover; /* fill container entirely (may crop slightly) */
    display:block;
}

#detailArea{
    background:transparent;
}

/* FRAMEWORK PANEL */
.framework-grid{
display:flex;
flex-direction:column;
gap:10px;
overflow-y:auto;
}

.framework-grid img{
width:98%;
border-radius:12px;
border:2px solid #0f172a;
cursor:pointer;
transition:0.3s;
}

.framework-grid img:hover{
transform:scale(1.05);
border-color:#17a589;
}