/*
=========================================================
TACTICAL OPERATIONS INTERFACE
Primary stylesheet

Purpose:
    Provides the visual design for the dashboard UI.
    This includes layout, colors, typography, and
    tactical interface styling.

Structure:
    1. Global reset and base styles
    2. Dashboard layout
    3. Header / system status bar
    4. Module navigation panel
    5. Primary tactical display
    6. Intelligence feed panel
    7. Terminal log panel
=========================================================
*/


/* ===================================================== */
/* GLOBAL RESET                                          */
/* Ensures consistent rendering across browsers          */
/* ===================================================== */

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


/* ===================================================== */
/* BODY / PAGE BACKGROUND                                */
/* Sets the dark tactical theme                          */
/* ===================================================== */

body {

    /* Tactical dark background */
    background-color: #05080c;

    /* Primary text color */
    color: #cfd8e3;

    /* Monospaced cyber-style font */
    font-family: "Courier New", monospace;

    /* Full screen layout */
    height: 100vh;

    /* Subtle grid background for "cyber" feel */
    background-image:
        linear-gradient(#0f1620 1px, transparent 1px),
        linear-gradient(90deg, #0f1620 1px, transparent 1px);

    background-size: 40px 40px;
}


/* ===================================================== */
/* MAIN DASHBOARD CONTAINER                              */
/* Defines full-screen grid layout                       */
/* ===================================================== */

#dashboard {

    display: grid;

    /* Grid structure:
       header
       main interface
       terminal log
    */
    grid-template-rows: 70px 1fr 180px;

    height: 100vh;
}


/* ===================================================== */
/* SYSTEM HEADER                                         */
/* Top control/status strip                              */
/* ===================================================== */

#system-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

    background-color: #0f1620;

    border-bottom: 1px solid #1e2a36;
}


/* System title styling */

.system-title {

    font-size: 18px;

    letter-spacing: 2px;

    color: #4fa3ff;

    font-weight: bold;
}


/* Container for status indicators */

.system-status {

    display: flex;

    gap: 20px;

    font-size: 13px;
}


/* Individual status item */

.status-item {

    color: #9fb3c8;
}


/* ===================================================== */
/* MAIN INTERFACE LAYOUT                                 */
/* Left modules / center display / right intel feed      */
/* ===================================================== */

#main-interface {

    display: grid;

    grid-template-columns: 220px 1fr 300px;

    overflow: hidden;
}


/* ===================================================== */
/* LEFT MODULE NAVIGATION                                */
/* ===================================================== */

#module-navigation {

    background-color: #0b1220;

    border-right: 1px solid #1e2a36;

    padding: 15px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* Module panel header */

#module-navigation h2 {

    font-size: 14px;

    margin-bottom: 10px;

    color: #4fa3ff;
}


/* Navigation buttons */

.module-btn {

    background-color: transparent;

    border: 1px solid #1e2a36;

    color: #cfd8e3;

    padding: 10px;

    text-align: left;

    cursor: pointer;

    transition: all 0.2s ease;
}


/* Button hover effect */

.module-btn:hover {

    border-color: #3ddc97;

    color: #3ddc97;

    background-color: #0f1c28;
}


/* ===================================================== */
/* CENTER PRIMARY DISPLAY                                */
/* Tactical grid visualization area                      */
/* ===================================================== */

#primary-display {

    padding: 15px;

    display: flex;

    flex-direction: column;
}


/* Panel title */

#primary-display h2 {

    font-size: 14px;

    margin-bottom: 10px;

    color: #4fa3ff;
}


/* Grid display container */

#grid-display {

    flex: 1;

    border: 1px solid #1e2a36;

    background-color: #05080c;

    position: relative;

    overflow: hidden;

    background-image:
      linear-gradient(#1e2a36 1px, transparent 1px),
      linear-gradient(90deg, #1e2a36 1px, transparent 1px);
    background-size: 40px 40px;


}


/* Placeholder text */

.grid-placeholder {

    color: #3ddc97;

    opacity: 0.7;

    font-size: 14px;
}


/* ===================================================== */
/* RIGHT INTELLIGENCE FEED                               */
/* ===================================================== */

#intel-feed {

    background-color: #0b1220;

    border-left: 1px solid #1e2a36;

    padding: 15px;

    display: flex;

    flex-direction: column;
}


/* Feed title */

#intel-feed h2 {

    font-size: 14px;

    margin-bottom: 10px;

    color: #4fa3ff;
}


/* Feed container */

#intel-events {

    flex: 1;

    overflow-y: auto;

    font-size: 12px;
}


/* Individual event */

.intel-event {

    padding: 4px 0;

    color: #9fb3c8;

    border-bottom: 1px solid #1a2530;
}


/* ===================================================== */
/* TERMINAL LOG PANEL                                    */
/* Bottom system terminal                                */
/* ===================================================== */

#system-log {

    background-color: #020406;

    border-top: 1px solid #1e2a36;

    padding: 10px 15px;

    display: flex;

    flex-direction: column;
}


/* Terminal title */

#system-log h2 {

    font-size: 13px;

    margin-bottom: 6px;

    color: #4fa3ff;
}


/* Terminal output container */

#terminal-output {

    flex: 1;

    overflow-y: auto;

    font-size: 12px;

    color: #3ddc97;

    font-family: monospace;
}


/* Individual terminal line */

.log-line {

    margin-bottom: 3px;
}




/* ===================================================== */
/* TACTICAL GRID SCANNER                                 */
/* Animated scan line and signal nodes                   */
/* ===================================================== */

/* moving scan line */

.scan-line {

    position: absolute;
    z-index: 1000;
    width: 100%;

    height: 2px;

    background: #3ddc97;

    box-shadow: 0 0 8px #3ddc97;

    animation: scanMove 4s linear infinite;
}


/* scan animation */

@keyframes scanMove {

    0% { top: 0%; }

    100% { top: 100%; }

}


/* signal node */

.signal-node {

    position: absolute;

    width: 8px;

    height: 8px;

    background: #4fa3ff;

    border-radius: 50%;

    box-shadow: 0 0 8px #4fa3ff;

    animation: nodeFade 5s forwards;

}


/* node fade animation */

@keyframes nodeFade {

    0% { opacity: 1; }

    100% { opacity: 0; }

}

/* ===================================================== */
/* MAP DISPLAY                                           */
/* Leaflet map fills the tactical grid panel             */
/* ===================================================== */

#map {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

}