/* ==========================
   TORPEDO | NCIC Operations Center
   Main Stylesheet
========================== */

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

:root{

    --bg:#0b1220;
    --bg2:#111827;

    --panel:#172233;

    --panel2:#1f2d44;

    --border:#2f435d;

    --text:#f4f7fb;

    --muted:#9fb2c9;

    --blue:#2d8cff;

    --green:#00c16a;

    --orange:#ffb020;

    --red:#ff5b5b;

}

body{

    font-family:Segoe UI,Roboto,Arial,sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow:hidden;

}

.app{

    display:flex;

    height:100vh;

}

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

.sidebar{

    width:270px;

    background:var(--bg2);

    border-right:1px solid var(--border);

    display:flex;

    flex-direction:column;

}

.logo{

    padding:28px;

    font-size:28px;

    font-weight:700;

    color:white;

}

.logo span{

    display:block;

    margin-top:6px;

    font-size:12px;

    color:var(--muted);

    letter-spacing:1px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    margin-top:25px;

}

.sidebar nav a{

    padding:16px 28px;

    color:var(--muted);

    text-decoration:none;

    transition:.25s;

    font-size:15px;

}

.sidebar nav a:hover{

    background:rgba(45,140,255,.10);

    color:white;

}

.sidebar nav a.active{

    background:var(--blue);

    color:white;

}

/* ==========================
Main
========================== */

main{

    flex:1;

    display:flex;

    flex-direction:column;

}

/* ==========================
Topbar
========================== */

.topbar{

    height:80px;

    border-bottom:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    background:#101827;

}

.topbar h1{

    font-size:24px;

}

.profile{

    background:var(--panel);

    padding:12px 18px;

    border-radius:8px;

}

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

.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    padding:30px;

}

.card{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:12px;

    padding:25px;

}

.card h3{

    color:var(--muted);

    font-size:14px;

    margin-bottom:12px;

}

.card span{

    font-size:34px;

    font-weight:700;

}

/* ==========================
Dashboard Grid
========================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    padding:0 30px 30px;

    flex:1;

}

.panel{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:12px;

    padding:25px;

    overflow:auto;

}

.panel h2{

    margin-bottom:20px;

}

/* ==========================
Case Table
========================== */

.case-table{

    width:100%;

    border-collapse:collapse;

}

.case-table th{

    text-align:left;

    color:var(--muted);

    font-size:13px;

    padding:14px;

    border-bottom:1px solid var(--border);

}

.case-table td{

    padding:16px 14px;

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

    font-size:14px;

}

.case-table tr:hover{

    background:rgba(255,255,255,.03);

}

/* Priority */

.priority{

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.priority.critical{

    background:#ff4d4d;

    color:white;

}

.priority.high{

    background:#ff9800;

    color:white;

}

.priority.medium{

    background:#ffd54f;

    color:#222;

}

.priority.low{

    background:#00c16a;

    color:white;

}

/* Status */

.status{

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.status.new{

    background:#1976d2;

    color:white;

}

.status.assigned{

    background:#8e44ad;

    color:white;

}

.status.investigating{

    background:#00bcd4;

    color:white;

}

.status.closed{

    background:#4caf50;

    color:white;

}

/* ==========================
Activity Feed
========================== */

.activity-feed{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.activity-item{

    display:flex;

    gap:18px;

    position:relative;

    padding-bottom:20px;

}

.activity-item:not(:last-child)::after{

    content:"";

    position:absolute;

    left:38px;

    top:42px;

    width:2px;

    height:100%;

    background:rgba(255,255,255,.08);

}

.activity-time{

    min-width:70px;

    font-size:13px;

    color:var(--blue);

    font-weight:700;

}

.activity-content{

    flex:1;

    background:rgba(255,255,255,.03);

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

    padding:14px;

    border-radius:10px;

}

.activity-content strong{

    display:block;

    margin-bottom:6px;

    font-size:15px;

}

.activity-content p{

    color:var(--muted);

    font-size:13px;

    line-height:1.5;

}

/* ===========================
CASE MANAGEMENT
=========================== */

.cases-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 30px;

gap:20px;

}

.cases-toolbar input{

flex:1;

background:#111827;

border:1px solid var(--border);

padding:14px 18px;

border-radius:10px;

color:white;

font-size:15px;

}

.new-case{

background:var(--blue);

border:none;

color:white;

padding:14px 22px;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

.filter-bar{

padding:0 30px 20px;

display:flex;

gap:12px;

}

.filter{

background:#172233;

border:1px solid var(--border);

padding:10px 18px;

border-radius:8px;

cursor:pointer;

color:white;

}

.filter.active{

background:var(--blue);

}

.case-layout{

display:grid;

grid-template-columns:420px 1fr;

gap:20px;

padding:0 30px 30px;

flex:1;

overflow:hidden;

}

.case-list{

background:var(--panel);

border:1px solid var(--border);

border-radius:12px;

padding:20px;

overflow:auto;

}

.case-details{

background:var(--panel);

border:1px solid var(--border);

border-radius:12px;

padding:20px;

overflow:auto;

}

/* ==========================
CASE CARDS
========================== */

.case-card{

background:#1b2738;

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

border-radius:10px;

padding:18px;

margin-top:16px;

cursor:pointer;

transition:.25s;

}

.case-card:hover{

border-color:var(--blue);

transform:translateY(-2px);

}

.case-card.active{

border:2px solid var(--blue);

}

.case-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.case-header h3{

font-size:16px;

}

.case-card p{

color:var(--muted);

margin-bottom:14px;

font-size:14px;

}

.case-meta{

display:flex;

justify-content:space-between;

font-size:12px;

color:#94a9c4;

}

/* ==========================
CASE DETAILS
========================== */

.detail-grid{

display:flex;

flex-direction:column;

gap:24px;

}

.detail-section{

background:#1b2738;

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

padding:20px;

border-radius:10px;

}

.detail-section h3{

margin-bottom:16px;

}

.detail-table{

width:100%;

border-collapse:collapse;

}

.detail-table td{

padding:10px 0;

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

}

.detail-table td:first-child{

color:var(--muted);

width:180px;

}

.incident{

line-height:1.8;

color:#d7e3f4;

}

textarea{

width:100%;

height:150px;

background:#101827;

border:1px solid var(--border);

color:white;

padding:15px;

border-radius:10px;

resize:vertical;

font-size:14px;

}

.action-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.action{

padding:12px 20px;

background:#223247;

color:white;

border:none;

border-radius:8px;

cursor:pointer;

font-weight:600;

}

.action.primary{

background:var(--blue);

}

.action.danger{
/* =========================================
TOAST NOTIFICATIONS
========================================= */

.toast{

position:fixed;

right:25px;

bottom:25px;

min-width:280px;

padding:18px;

border-radius:10px;

color:white;

font-weight:600;

opacity:0;

transform:translateY(25px);

transition:.3s;

z-index:99999;

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

}

.toast.show{

opacity:1;

transform:translateY(0);

}

.toast.success{

background:#00c16a;

}

.toast.error{

background:#d63031;

}

.toast.warning{

background:#ff9800;

}

.toast.info{

background:#2d8cff;

}

/* =========================================
LOADING
========================================= */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(8,12,20,.65);

display:flex;

justify-content:center;

align-items:center;

z-index:99998;

backdrop-filter:blur(3px);

}

.spinner{

width:60px;

height:60px;

border:6px solid rgba(255,255,255,.15);

border-top:6px solid #2d8cff;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}
background:#d63031;

}