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

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

.sidebar{

    background:#111827;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:20px;

    overflow-y:auto;

}

/* ===========================
   Scrollbar
=========================== */

.sidebar::-webkit-scrollbar{

    width:8px;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#30445f;

    border-radius:20px;

}

.sidebar::-webkit-scrollbar-track{

    background:transparent;

}

/* ===========================
   Cards
=========================== */

.sidebar-card{

    background:#162235;

    border-radius:16px;

    padding:18px;

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

    transition:.25s;

}

.sidebar-card:hover{

    border-color:#ff5d2a;

    transform:translateY(-2px);

}

/* ===========================
   Titles
=========================== */

.sidebar-card h2{

    font-size:18px;

    margin-bottom:18px;

    font-weight:700;

}

/* ===========================
   Statistics
=========================== */

.stat-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

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

}

.stat-row:last-child{

    border-bottom:none;

}

.stat-row span{

    color:#b5c3d5;

    font-size:14px;

}

.stat-row strong{

    color:white;

    font-size:18px;

}

/* ===========================
   Risk meter
=========================== */

.risk-meter{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.risk-bar{

    height:14px;

    background:#24344c;

    border-radius:30px;

    overflow:hidden;

}

#risk-fill{

    width:65%;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #27ae60,
        #f1c40f,
        #e74c3c
    );

}

#risk-level{

    font-weight:700;

    color:#ffb347;

}

/* ===========================
   Filters
=========================== */

.toggle{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

    cursor:pointer;

    user-select:none;

}

.toggle:last-child{

    margin-bottom:0;

}

.toggle span{

    flex:1;

    margin-left:10px;

    color:#d6dce5;

    font-size:14px;

}

.toggle input{

    width:18px;

    height:18px;

    accent-color:#ff5d2a;

}

/* ===========================
   Sources
=========================== */

.source-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.source-list li{

    background:#22324b;

    border-radius:10px;

    padding:12px;

    color:#dbe3ef;

    transition:.25s;

}

.source-list li:hover{

    background:#30445f;

}

/* ===========================
   Small badges
=========================== */

.sidebar-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:20px;

    background:#ff5d2a;

    color:white;

    font-size:12px;

    font-weight:700;

}

/* ===========================
   Search (voor later)
=========================== */

.sidebar-search{

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#22324b;

    color:white;

}

.sidebar-search::placeholder{

    color:#91a3bb;

}

/* ===========================
   Animation
=========================== */

.sidebar-card{

    animation:fadeUp .35s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}