/* ==========================================================
   KOHMZ OMEGA PROTOCOL - THE JARVIS STRUCTURE OVERRIDE (V12.1)
   Mission: Override Both Effects AND Structure (Clip-Paths)
   ========================================================== */

/* 1. THE DEEP SPACE BLUE HUD GRID & THE JARVIS RING */
body, body#dashboard {
    background-color: #020710 !important; 
    background-image: 
        radial-gradient(circle at center, rgba(0, 243, 255, 0.15) 0%, transparent 60%),
        repeating-linear-gradient(rgba(0, 136, 255, 0.05) 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, rgba(0, 136, 255, 0.05) 0 1px, transparent 1px 100%) !important;
    background-size: 100%, 30px 30px, 30px 30px !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* THE ROTATING RINGS */
@keyframes hudSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hudSpinRev { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }

body::before, body::after {
    content: ''; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); border-radius: 50%;
    z-index: -1; pointer-events: none; opacity: 0.6; 
    will-change: transform; 
}
body::before {
    width: 800px; height: 800px;
    border: 1px dashed rgba(0, 243, 255, 0.15) !important;
    box-shadow: 0 0 150px rgba(0, 136, 255, 0.05) !important; 
    animation: hudSpin 120s linear infinite; 
}
body::after {
    width: 600px; height: 600px;
    border: 2px dotted rgba(0, 136, 255, 0.1) !important;
    animation: hudSpinRev 90s linear infinite;
}


/* ========================================================
   2. STRUCTURAL OVERRIDE: THE PANELS (Reference Pic #4)
   Gagawin nating Tabas the corners the lahat The Panels!
   ======================================================== */
#dashboard .panel, 
#dashboard .chart-panel, 
#dashboard .metric-card {
    background: rgba(2, 9, 20, 0.55) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important; /* Remove old square borders */
    
    /* ITO NA THE STRUCTURAL TABAS SHAPE! */
    /* Tinabas The Upper-Left at Bottom-Right */
    clip-path: polygon(
        15px 0%,        /* Start 15px from left */
        100% 0%,        /* Top right */
        100% calc(100% - 15px), /* Bottom right (tabas) */
        calc(100% - 15px) 100%, /* Bottom right (tabas point 2) */
        0% 100%,        /* Bottom left */
        0% 15px         /* Top left (tabas) */
    ) !important;
    
    /* Ginamitan the padding the hindi the sumabog The text na the in-embed sa HTML */
    padding: 1px !important;
    
    /* This creates the new Tech Border Illusion na the sumusunod the cut lines */
    box-shadow: 
        inset 0 0 0 1px rgba(0, 243, 255, 0.25), /* Creates a bounding outline matching the clip path */
        inset 0 15px 15px -15px rgba(0, 243, 255, 0.3) !important; /* Top glow inside */
}

/* STRUCTURAL OVERRIDE PARA SA HEADER (Yung title the taas) */
#dashboard header {
    background: rgba(2, 9, 20, 0.75) !important; 
    backdrop-filter: blur(12px) !important;
    border: none !important;
    
    /* Titibagin The Bottom corners the papasok */
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% calc(100% - 10px), 
        calc(100% - 20px) 100%, 
        20px 100%, 
        0% calc(100% - 10px)
    ) !important;
    
    box-shadow: inset 0 -2px 0px rgba(0, 243, 255, 0.4) !important;
}


/* ========================================================
   3. OVERRIDING THE JS-INJECTED INLINE ELEMENTS
   ======================================================== */
#dashboard .acc-item .acc-header {
    background: linear-gradient(90deg, rgba(0, 136, 255, 0.1) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2) !important;
    border-left: 3px solid rgba(0, 243, 255, 0.5) !important;
    padding: 10px !important;
    margin-bottom: 4px !important;
    
    /* Structural fix for Accordion */
    clip-path: polygon(0 0, 98% 0, 100% 50%, 98% 100%, 0 100%) !important; 
}
#dashboard .acc-item .acc-header.open {
    background: linear-gradient(90deg, rgba(0, 136, 255, 0.3) 0%, transparent 100%) !important;
    border-left: 4px solid var(--neon-blue) !important;
}

#dashboard .panel-header {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.2) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3) !important;
    border-left: 4px solid #00f3ff !important;
    margin-bottom: 8px !important;
}


/* ========================================================
   4. STRUCTURAL OVERRIDE: BUTTONS & INPUTS
   ======================================================== */
#dashboard input[type=text], 
#dashboard input[type=number], 
#dashboard input[type=password], 
#dashboard .comms-filter,
#dashboard select,
#dashboard #mqItem, #dashboard #mqQty, #dashboard #mqLabor, #dashboard #mqMat, #dashboard #mqRestoration, #dashboard #mqTotal {
    background: rgba(0, 15, 30, 0.6) !important; 
    border: none !important; 
    border-bottom: 2px solid rgba(0, 136, 255, 0.5) !important;
    color: #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 8px !important; 
    
    /* Technical Cut for Inputs */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%) !important;
}

#dashboard #mqTotal {
    border-bottom: 2px solid #ffaa00 !important;
    color: #ffaa00 !important;
    font-size: 14px !important;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.5) !important;
}

#dashboard input:focus {
    background: rgba(0, 30, 60, 0.9) !important;
    border-bottom: 2px solid #00f3ff !important;
    box-shadow: inset 0 -15px 15px -15px rgba(0, 243, 255, 0.5) !important; 
    outline: none !important;
}

#dashboard .glow-btn, 
#dashboard .ext-btn, 
#dashboard .copilot-btn,
#dashboard .ghost-mode-btn,
#dashboard .fu-option {
    background: rgba(0, 136, 255, 0.1) !important;
    border: none !important; /* Alisin The borders let shadow the do it */
    border-bottom: 1px solid rgba(0, 243, 255, 0.4) !important;
    
    /* TECH CUT CORNERS PARA SA BUTTONS */
    clip-path: polygon(
        8px 0, 
        100% 0, 
        100% calc(100% - 8px), 
        calc(100% - 8px) 100%, 
        0 100%, 
        0 8px
    ) !important;
    
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1) !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

#dashboard .glow-btn:hover, #dashboard .ext-btn:hover, #dashboard .copilot-btn:hover {
    background: rgba(0, 243, 255, 0.25) !important;
    border-bottom: 2px solid #00f3ff !important;
    box-shadow: inset 0 -3px 0 rgba(0, 243, 255, 0.5), inset 0 0 10px rgba(0, 243, 255, 0.3) !important;
    color: #fff !important; 
    text-shadow: 0 0 5px #fff !important;
}

/* RED BUTTON OVERRIDES */
#dashboard .glow-btn.red, #dashboard .ext-btn.red { border-bottom-color: var(--neon-red) !important; box-shadow: inset 0 -3px 0 rgba(255, 51, 51, 0.2) !important; }
#dashboard .glow-btn.red:hover, #dashboard .ext-btn.red:hover { box-shadow: inset 0 -3px 0 rgba(255, 51, 51, 0.6), inset 0 0 10px rgba(255, 51, 51, 0.3) !important; }

/* GOLD BUTTON OVERRIDES */
#dashboard .glow-btn.gold, #dashboard .ext-btn.gold { border-bottom-color: var(--neon-gold) !important; box-shadow: inset 0 -3px 0 rgba(255, 170, 0, 0.2) !important; }
#dashboard .glow-btn.gold:hover, #dashboard .ext-btn.gold:hover { box-shadow: inset 0 -3px 0 rgba(255, 170, 0, 0.6), inset 0 0 10px rgba(255, 170, 0, 0.3) !important; }

/* ========================================================
   5. OVERRIDING THE JS TARGET LOCK & CHAT WINDOW
   ======================================================== */
#dashboard .target-lock.active {
    background: rgba(255, 51, 51, 0.15) !important;
    border: 1px dashed rgba(255, 51, 51, 0.6) !important; 
    box-shadow: inset 0 0 15px rgba(255, 51, 51, 0.2) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
}

#dashboard .chat-window {
    background: rgba(0, 5, 15, 0.4) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(0, 243, 255, 0.15), inset 0 0 30px rgba(0, 136, 255, 0.05) !important;
}
#dashboard .chat-controls {
    background: transparent !important;
    border-top: 1px dashed rgba(0, 136, 255, 0.2) !important; 
}

/* ========================================================
   6. THE ACTIVE COMMS TABLE (CYBER FIX)
   ======================================================== */
#dashboard table#commsTable {
    border-collapse: separate !important;
    border-spacing: 0 6px !important; 
}
#dashboard table#commsTable th {
    background: rgba(0, 243, 255, 0.1) !important;
    border-bottom: 2px solid #00f3ff !important;
    color: #00f3ff !important;
}
#dashboard table#commsTable tr {
    background: rgba(0, 0, 0, 0.4) !important; 
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(0, 243, 255, 0.1) !important; /* Border the the table rows via shadow para the clean the lines */
}
#dashboard table#commsTable tr:hover {
    background: rgba(0, 243, 255, 0.05) !important;
    border-left: 4px solid #00f3ff !important;
    box-shadow: inset 0 0 0 1px rgba(0, 243, 255, 0.2) !important;
}

/* ========================================================
   7. NEON GLOW UPS / TEXT IMMERSION
   ======================================================== */
#dashboard h1, #dashboard h2, #dashboard h3, #dashboard .panel-title, #dashboard .metric-value, #dashboard .ticker-item {
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.6) !important; 
}