/* ===========================================================
   FIRE INTELLIGENCE EUROPE 3.0
   LAYOUT.CSS
=========================================================== */

/* ===========================
   APP
=========================== */

#app{

    display:flex;

    flex-direction:column;

    height:100vh;

    width:100vw;

    overflow:hidden;

}

/* ===========================
   HEADER
=========================== */

.topbar{

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

    background:#162235;

    border-bottom:1px solid rgba(255,255,255,.08);

    flex-shrink:0;

}

/* ===========================
   Logo
=========================== */

.brand{

    display:flex;

    align-items:center;

    gap:16px;

}

.brand-logo{

    width:48px;

    height:48px;

    border-radius:12px;

    background:#ff5d2a;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-text span{

    color:#93a4bc;

    font-size:13px;

}

/* ===========================
   Menu
=========================== */

.top-navigation{

    display:flex;

    gap:12px;

}

.nav-button{

    background:transparent;

    color:white;

    padding:10px 18px;

    border-radius:10px;

}

.nav-button.active{

    background:#ff5d2a;

}

.nav-button:hover{

    background:#22324b;

}

/* ===========================
   LIVE Status
=========================== */

.topbar-status{

    display:flex;

    align-items:center;

    gap:10px;

    color:#bfc9d6;

    font-size:14px;

}

/* ===========================
   Ticker
=========================== */

.live-ticker{

    height:42px;

    display:flex;

    align-items:center;

    background:#111827;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.ticker-label{

    width:80px;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ff5d2a;

    font-weight:700;

}

#ticker-content{

    padding-left:18px;

    white-space:nowrap;

    overflow:hidden;

}

/* ===========================
   Werkruimte
=========================== */

.workspace{

    flex:1;

    display:grid;

    grid-template-columns:320px 1fr 380px;

    overflow:hidden;

}

/* ===========================
   Sidebar
=========================== */

.sidebar{

    background:#111827;

    padding:20px;

    overflow-y:auto;

    border-right:1px solid rgba(255,255,255,.08);

}

/* ===========================
   Kaart
=========================== */

.map-container{

    position:relative;

    background:#08111d;

    overflow:hidden;

}

#map{

    width:100%;

    height:100%;

}

/* ===========================
   Onderpaneel
=========================== */

.bottom-panel{

    position:absolute;

    left:340px;

    right:400px;

    bottom:18px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:18px;

    z-index:400;

}

/* ===========================
   Footer
=========================== */

footer{

    height:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    background:#162235;

    border-top:1px solid rgba(255,255,255,.08);

    color:#9fb0c5;

    font-size:13px;

}

/* ===========================
   API Monitor
=========================== */

#api-monitor{

    position:fixed;

    left:20px;

    bottom:55px;

    display:flex;

    gap:12px;

    background:#162235;

    border-radius:12px;

    padding:10px 16px;

    z-index:999;

}

.api-item{

    display:flex;

    gap:8px;

    align-items:center;

    font-size:13px;

}

.api-status.online{

    color:#27ae60;

}

.api-status.offline{

    color:#e74c3c;

}

/* ===========================
   Cookie banner
=========================== */

#cookie-banner{

    position:fixed;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    gap:20px;

    align-items:center;

    background:#162235;

    padding:18px 24px;

    border-radius:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    z-index:9999;

}

/* ===========================
   Offline melding
=========================== */

#offline-banner{

    position:fixed;

    top:115px;

    left:50%;

    transform:translateX(-50%);

    background:#d63031;

    color:white;

    padding:12px 22px;

    border-radius:10px;

    font-weight:600;

    z-index:9999;

}