/* --- ROIGROUP.IO: BLACKOUT OVERLAY V2.6 --- */

:root {
    --monitor-cyan: #11e4f4;
    --text-primary: #f4f4f5;
    --accent-orange: #ff9f0a;
    /* Changed to pure black to cover image artifacts */
    --screen-black: rgba(0, 0, 0, 1); 
}

* { box-sizing: border-box; }

body {
    background-color: #000;
    /* Use your current working image */
    background-image: url('architect_office_flat.png'); 
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    margin: 0;
    
    display: flex;
    justify-content: space-between; 
    align-items: center;
    min-height: 100vh;
    
    /* Pushes monitors out to cover the image's screen areas */
    padding: 0 45px; 
    
    /* Moves monitors UP to align with the desk layout */
    padding-bottom: 125px; 
}

.monitor-content {
    /* Slightly wider to ensure full coverage of the "ghost" text */
    width: 640px; 
    height: 400px; 
    
    background: var(--screen-black);
    /* Removed blur to ensure the blackout is 100% solid */
    border: 1px solid rgba(17, 228, 244, 0.4);
    padding: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    overflow-y: auto;
    position: relative;
    border-top: 3px solid var(--monitor-cyan);
}

/* CONTENT STYLING */
.monitor-header {
    font-size: 11px;
    color: var(--monitor-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: 700;
}

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10px; color: #71717a; padding-bottom: 12px; }
td { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; }

.hold { color: var(--monitor-cyan); font-weight: bold; }
.trim { color: var(--accent-orange); font-weight: bold; }

#ai-feed p { margin-bottom: 15px; line-height: 1.6; font-size: 14px; color: #d4d4d8; }
#ai-feed p strong { color: var(--monitor-cyan); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--monitor-cyan); }