/* =========================
   Onion Network Styles
=========================== */
body, html {
    margin:0; padding:0;
    font-family:'Segoe UI',sans-serif;
    background:#0a100a;
    color:#8aff8a;
}

/* Glow background */
body:before {
    content:"";
    position:fixed; inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,255,120,.08), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(0,255,120,.06), transparent 40%);
    pointer-events:none;
}

/* Wrapper */
.wrapper { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
    width:230px;
    background:#0d140d;
    border-right:1px solid #163316;
    box-shadow:0 0 20px #00ff8840 inset;
    display:flex; flex-direction:column;
}
.logo { padding:20px; font-size:22px; text-align:center; color:#8aff8a; border-bottom:1px solid #163316; font-weight:bold; }
.menu a { display:block; padding:14px 20px; text-decoration:none; color:#9eff9e; border-bottom:1px solid #112411; }
.menu a:hover { background:#112411; box-shadow:0 0 10px #00ff88; }
.menu .active { background:#163316; box-shadow:0 0 15px #00ff88 inset; }

/* Sidebar panels */
.sidebar-panel { padding:15px 20px; margin-top:15px; background:rgba(10,20,10,.9); border:1px solid #1f3d1f; border-radius:8px; box-shadow:0 0 15px #00ff8840; }
.sidebar-panel h3 { margin:0 0 8px; font-size:14px; color:#8aff8a; }

/* Online users */
#sidebar_online_area div { padding:6px 0; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
.glow_rolling { color:#ffcc00; animation:glow_rolling 1.5s infinite alternate; }
.glow_manager { color:#00ff88; font-weight:bold; animation:glow_manager 1.5s infinite alternate; }
.glow_god { color:#ff00ff; font-weight:bold; animation:glow_god 1.5s infinite alternate; }
@keyframes glow_rolling {0%{text-shadow:0 0 2px #ffcc00;}50%{text-shadow:0 0 8px #ffcc00;}100%{text-shadow:0 0 2px #ffcc00;}}
@keyframes glow_manager {0%{text-shadow:0 0 2px #00ff88;}50%{text-shadow:0 0 6px #00ff88;}100%{text-shadow:0 0 2px #00ff88;}}
@keyframes glow_god {0%{text-shadow:0 0 2px #ff00ff;}50%{text-shadow:0 0 8px #ff00ff;}100%{text-shadow:0 0 2px #ff00ff;}}

/* Main content */
.main { flex:1; padding:25px; }
.topbar { display:flex; justify-content:space-between; margin-bottom:20px; }
.panel { background:rgba(10,20,10,.9); border:1px solid #1f3d1f; border-radius:10px; padding:20px; margin-bottom:20px; box-shadow:0 0 20px #00ff8840; }
button { background:#0f1f0f; color:#8aff8a; border:1px solid #2aff2a; padding:8px 14px; cursor:pointer; border-radius:5px; }
button:hover { background:#163316; box-shadow:0 0 10px #00ff88; }

/* Car panels */
.car { display:flex; gap:15px; padding:15px; border-bottom:1px solid #163316; }
.car img { width:140px; border-radius:6px; }
.rolling { border-left:5px solid red; background:#140909; animation:glow_rolling 1.5s infinite alternate; }
.accepted-glow { border-left:5px solid lime; background:#091409; animation:glow_manager 1.5s ease-in-out; }
.god-panel { border:2px solid #ff00ff; background:rgba(255,0,255,0.05); box-shadow:0 0 10px #ff00ff33; border-radius:10px; padding:15px; margin-bottom:15px; }

/* Chat */
#chat_modal { position:fixed; top:50%; left:50%; width:600px; max-width:90%; height:400px; transform:translate(-50%, -50%); background:#111; border:2px solid #555; border-radius:10px; display:none; flex-direction:column; z-index:999; }
#chat_modal header { padding:8px 12px; background:#222; color:#fff; font-weight:bold; display:flex; justify-content:space-between; align-items:center; }
#chat_messages { flex:1; overflow-y:auto; padding:10px; font-size:14px; color:#ddd; }
#chat_form { display:flex; border-top:1px solid #555; }
#chat_input { flex:1; padding:6px 10px; border:none; background:#222; color:#fff; }
#chat_form button { background:#4caf50; border:none; color:#fff; padding:6px 12px; cursor:pointer; }
#chat_close { cursor:pointer; font-weight:bold; }

/* rolling highlight */
.glow_rolling {
    animation: rollingGlow 1.2s infinite alternate;
}

@keyframes rollingGlow {
    from { box-shadow: 0 0 5px #ffaa00; }
    to   { box-shadow: 0 0 18px #ffaa00; }
}

/* completed flash */
.flash_complete {
    animation: bankFlash 0.6s ease-in-out 4;
}

@keyframes bankFlash {
    0%   { background:#111; }
    50%  { background:#2ecc71; }
    100% { background:#111; }
}

/* ------------------- CONTRACT ALERT POPUP ------------------- */

#contract_alert{
    position: fixed;
    top: 20px;
    right: 20px;

    width: 260px;
    max-width: 260px;

    background: rgba(10,20,10,.95);
    border:1px solid #2aff2a;
    border-radius:10px;

    padding:16px;
    color:#8aff8a;

    display:none;

    z-index:99999;

    box-shadow:0 0 20px #00ff8840;
}

/* slide animation */

@keyframes alertSlide {
    from {
        transform: translateX(100%);
        opacity:0;
    }
    to {
        transform: translateX(0);
        opacity:1;
    }
}

#contract_alert.show{
    display:block;
    animation: alertSlide .35s ease-out;
}

/* ------------------- NEW CONTRACT SIDEBAR ------------------- */

#new_contracts_area div{
    padding:5px 0;
    border-bottom:1px solid #163316;
}

.new_contract_flash{
    animation:newContractFlash 1s ease-in-out 3;
}

@keyframes newContractFlash{
    0%{ background:#111; }
    50%{ background:#1f3d1f; }
    100%{ background:#111; }
}