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

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

.sidebar-card,
.dashboard-card,
.panel-card{

    background:#162235;

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

    border-radius:14px;

    padding:18px;

    margin-bottom:18px;

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

    transition:.25s ease;

}

.sidebar-card:hover,
.dashboard-card:hover,
.panel-card:hover{

    transform:translateY(-3px);

    border-color:#ff5d2a;

}

/* ==============================
   Headers
============================== */

.card-header,
.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.card-header h2,
.panel-header h2{

    font-size:17px;

    font-weight:700;

}

/* ==============================
   Buttons
============================== */

button{

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:#24344c;

    color:white;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    background:#ff5d2a;

}

/* ==============================
   Floating Buttons
============================== */

.floating-toolbar{

    position:absolute;

    top:20px;

    right:20px;

    display:flex;

    flex-direction:column;

    gap:10px;

    z-index:500;

}

.floating-toolbar button{

    width:46px;

    height:46px;

    border-radius:12px;

    font-size:20px;

}

/* ==============================
   Floating Stats
============================== */

.floating-stats{

    position:absolute;

    left:20px;

    bottom:20px;

    display:flex;

    gap:15px;

    z-index:500;

}

.floating-card{

    background:#162235;

    border-radius:14px;

    padding:14px 18px;

    min-width:110px;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}

.floating-card .value{

    display:block;

    font-size:26px;

    font-weight:700;

}

.floating-card .label{

    color:#9fb0c5;

    font-size:13px;

}

/* ==============================
   Status Dot
============================== */

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#27ae60;

    animation:pulse-dot 1.5s infinite;

}

@keyframes pulse-dot{

    0%{

        box-shadow:0 0 0 0 rgba(39,174,96,.6);

    }

    100%{

        box-shadow:0 0 0 14px rgba(39,174,96,0);

    }

}

/* ==============================
   Badge
============================== */

.badge-live{

    background:#ff5d2a;

    color:white;

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

/* ==============================
   Risk Bar
============================== */

.risk-bar{

    width:100%;

    height:12px;

    background:#24344c;

    border-radius:20px;

    overflow:hidden;

    margin-top:12px;

}

#risk-fill{

    width:65%;

    height:100%;

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

}

/* ==============================
   AI Score
============================== */

.score-circle{

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:15px auto;

    border:8px solid #ff5d2a;

    font-size:36px;

    font-weight:700;

}

/* ==============================
   Tables
============================== */

table{

    width:100%;

    border-collapse:collapse;

}

td{

    padding:10px 0;

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

}

td:last-child{

    text-align:right;

    font-weight:700;

}

/* ==============================
   Legend
============================== */

.legend{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:10px;

}

.legend-color{

    width:16px;

    height:16px;

    border-radius:50%;

}

.legend-color.danger{

    background:#d63031;

}

.legend-color.warning{

    background:#ff7b00;

}

.legend-color.watch{

    background:#f1c40f;

}

.legend-color.aircraft{

    background:#0984e3;

}

.legend-color.helicopter{

    background:#00cec9;

}

.legend-color.weather{

    background:#74b9ff;

}

/* ==============================
   Notifications
============================== */

#notification-container{

    position:fixed;

    top:90px;

    right:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:9999;

}

.notification{

    background:#162235;

    border-left:4px solid #ff5d2a;

    padding:14px;

    border-radius:10px;

    min-width:280px;

}