/* ═══════════════════════════════════════════════════════════════════
   GROUNDWATCH OPS — Mission Control Interface
   Aesthetic: Military C2 × Bloomberg Terminal × NASA MCC
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* Surface */
    --s0: #05080e;
    --s1: #0a0f1a;
    --s2: #0f1520;
    --s3: #151c2a;
    --s4: #1c2536;
    /* Border */
    --b1: #1a2235;
    --b2: #253044;
    --b3: #324060;
    /* Text */
    --t0: #eaf0ff;
    --t1: #b0bcd4;
    --t2: #6b7a96;
    --t3: #3d4e68;
    /* Signal */
    --sig-green: #00e676;
    --sig-amber: #ffab00;
    --sig-red: #ff1744;
    --sig-blue: #448aff;
    --sig-cyan: #18ffff;
    /* Glow */
    --glow-green: 0 0 12px rgba(0,230,118,0.25);
    --glow-red: 0 0 14px rgba(255,23,68,0.3);
    --glow-amber: 0 0 10px rgba(255,171,0,0.2);
    /* Metrics */
    --radius: 3px;
    --font: 'Outfit', system-ui, sans-serif;
    --mono: 'DM Mono', 'SF Mono', monospace;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:13px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font);background:var(--s0);color:var(--t0);overflow:hidden;height:100vh}
::selection{background:var(--sig-cyan);color:#000}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.mono{font-family:var(--mono)}
button{font-family:var(--font);cursor:pointer}
input,textarea{font-family:var(--mono)}

/* ═══ LOGIN ════════════════════════════════════════════════════════ */
.login-screen{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:var(--s0);z-index:1000;flex-direction:column;
}
.login-scanlines{
    position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.008) 2px,rgba(255,255,255,0.008) 4px);
    z-index:1;
}
.login-card{
    position:relative;z-index:2;width:340px;
    background:var(--s2);border:1px solid var(--b2);
    padding:40px 32px 32px;text-align:center;
    animation:loginIn 0.6s ease both;
}
@keyframes loginIn{from{opacity:0;transform:translateY(12px) scale(0.98)}to{opacity:1;transform:none}}
.login-badge{color:var(--sig-green);margin-bottom:20px}
.login-icon{width:48px;height:48px}
.login-title{
    font-size:1.3rem;font-weight:700;letter-spacing:6px;
    color:var(--t0);margin-bottom:2px;
}
.login-sub{
    font-size:0.7rem;letter-spacing:4px;color:var(--t2);
    margin-bottom:28px;font-weight:500;
}
.login-field{text-align:left;margin-bottom:20px}
.login-label{
    display:block;font-size:0.65rem;letter-spacing:2px;
    color:var(--t2);margin-bottom:6px;font-weight:500;
}
.login-field input{
    width:100%;padding:10px 12px;background:var(--s1);
    border:1px solid var(--b2);color:var(--t0);font-size:0.95rem;
    letter-spacing:2px;outline:none;transition:border 0.2s;
}
.login-field input:focus{border-color:var(--sig-green)}
.login-btn{
    width:100%;padding:11px;background:transparent;
    border:1px solid var(--sig-green);color:var(--sig-green);
    font-size:0.72rem;letter-spacing:3px;font-weight:600;
    transition:all 0.2s;
}
.login-btn:hover{background:var(--sig-green);color:#000}
.login-error{
    display:none;margin-top:14px;font-size:0.7rem;
    color:var(--sig-red);letter-spacing:1px;
}
.login-footer{
    position:fixed;bottom:24px;font-size:0.6rem;
    letter-spacing:3px;color:var(--t3);z-index:2;
}

/* ═══ HEADER ═══════════════════════════════════════════════════════ */
.dash{display:none;height:100vh;flex-direction:column}
.hdr{
    display:flex;align-items:center;justify-content:space-between;
    height:44px;padding:0 16px;background:var(--s1);
    border-bottom:1px solid var(--b1);flex-shrink:0;
}
.hdr-left{display:flex;align-items:center;gap:20px}
.hdr-mark{display:flex;align-items:center;gap:8px}
.hdr-icon{width:18px;height:18px;color:var(--sig-green)}
.hdr-name{font-size:0.82rem;font-weight:700;letter-spacing:4px;color:var(--t0)}
.hdr-nav{display:flex;gap:0}
.hdr-tab{
    padding:12px 16px;font-size:0.65rem;letter-spacing:2px;font-weight:600;
    background:none;border:none;color:var(--t3);
    border-bottom:2px solid transparent;transition:all 0.15s;
}
.hdr-tab:hover{color:var(--t1)}
.hdr-tab.active{color:var(--sig-green);border-bottom-color:var(--sig-green)}
.hdr-right{display:flex;align-items:center;gap:20px}
.hdr-stat{display:flex;align-items:center;gap:6px}
.hdr-lbl{font-size:0.6rem;letter-spacing:1.5px;color:var(--t3);font-weight:500}
.hdr-val{font-size:0.78rem;font-weight:600;color:var(--t1)}
.hdr-indicator{
    width:7px;height:7px;border-radius:50%;background:var(--t3);
    transition:all 0.3s;
}
.hdr-indicator.live{background:var(--sig-red);box-shadow:var(--glow-red);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.35}}
.hdr-clock{
    font-size:0.82rem;color:var(--sig-cyan);font-weight:400;
    padding:4px 10px;border:1px solid var(--b2);background:var(--s0);
    letter-spacing:1px;
}

/* ═══ GRID ═════════════════════════════════════════════════════════ */
.tab-view{display:none;flex:1;overflow:hidden}
.tab-view.active-tab{display:flex}
.ops-grid{
    display:grid;
    grid-template-columns:280px 1fr 280px;
    gap:8px;padding:8px;flex:1;overflow:hidden;
    height:calc(100vh - 44px);
}
.ops-col{display:flex;flex-direction:column;gap:8px;min-height:0}
.subtab-wrap{flex:1;padding:12px;overflow-y:auto}

/* ═══ TILES ════════════════════════════════════════════════════════ */
.tile{
    background:var(--s2);border:1px solid var(--b1);
    display:flex;flex-direction:column;min-height:0;
    overflow:hidden;
}
.tile-hdr{
    display:flex;align-items:center;gap:7px;
    padding:8px 12px;font-size:0.62rem;font-weight:600;
    letter-spacing:2px;color:var(--t2);
    background:var(--s3);border-bottom:1px solid var(--b1);
    flex-shrink:0;
}
.tile-hdr-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.tile-hdr-dot.on{background:var(--sig-green);box-shadow:var(--glow-green)}
.tile-hdr-dot.pulse{background:var(--sig-amber);animation:blink 1.5s ease infinite}
.tile-hdr-tag{
    margin-left:auto;font-size:0.55rem;letter-spacing:1.5px;
    padding:1px 6px;border:1px solid var(--b2);color:var(--t3);
}
.tile-hdr-aside{
    margin-left:auto;font-family:var(--mono);font-size:0.7rem;
    color:var(--sig-cyan);letter-spacing:1px;font-weight:400;
}
.empty{
    color:var(--t3);font-size:0.7rem;letter-spacing:2px;
    text-align:center;padding:20px 10px;
}

/* ═══ CHAT ═════════════════════════════════════════════════════════ */
.tile-chat{flex:1;min-height:0}
.chat-feed{
    flex:1;overflow-y:auto;padding:10px 12px;
    display:flex;flex-direction:column;gap:6px;
}
.chat-bubble{
    padding:8px 11px;font-size:0.82rem;line-height:1.5;
    max-width:92%;animation:fadeUp 0.2s ease;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chat-bubble.op{
    align-self:flex-end;
    background:rgba(68,138,255,0.1);border:1px solid rgba(68,138,255,0.2);
    color:var(--t0);border-top-right-radius:0;
    border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);
}
.chat-bubble.ai{
    align-self:flex-start;
    background:rgba(0,230,118,0.06);border:1px solid rgba(0,230,118,0.15);
    color:var(--t1);border-top-left-radius:0;
    border-top-right-radius:var(--radius);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);
}
.chat-presets{
    display:flex;gap:4px;padding:6px 10px;
    border-top:1px solid var(--b1);flex-wrap:wrap;flex-shrink:0;
}
.chat-presets button{
    padding:3px 9px;font-size:0.6rem;letter-spacing:1.5px;
    background:var(--s1);border:1px solid var(--b2);color:var(--t2);
    font-weight:500;transition:all 0.15s;
}
.chat-presets button:hover{border-color:var(--sig-green);color:var(--sig-green)}
.chat-bar{
    display:flex;gap:6px;padding:8px 10px;
    border-top:1px solid var(--b1);background:var(--s3);flex-shrink:0;
}
.chat-bar input{
    flex:1;padding:7px 10px;background:var(--s0);
    border:1px solid var(--b2);color:var(--t0);font-size:0.82rem;
    outline:none;transition:border 0.2s;
}
.chat-bar input:focus{border-color:var(--sig-green)}
.chat-bar button{
    padding:7px 14px;background:var(--sig-green);color:#000;
    border:none;font-size:0.65rem;font-weight:700;letter-spacing:2px;
    transition:opacity 0.15s;
}
.chat-bar button:hover{opacity:0.85}

/* ═══ CONTROLS ═════════════════════════════════════════════════════ */
.ctrl-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:4px;padding:8px;
}
.ctrl{
    padding:9px 4px;background:var(--s1);
    border:1px solid var(--b2);color:var(--t1);
    font-size:0.62rem;font-weight:600;letter-spacing:1.5px;
    transition:all 0.15s;text-align:center;
}
.ctrl:hover{border-color:var(--sig-cyan);color:var(--sig-cyan)}
.ctrl.active{border-color:var(--sig-green);color:var(--sig-green);background:rgba(0,230,118,0.06)}
.ctrl-warn{border-color:rgba(255,23,68,0.3);color:var(--sig-red)}
.ctrl-warn:hover{border-color:var(--sig-red);background:rgba(255,23,68,0.08);box-shadow:var(--glow-red)}
.ctrl kbd{font-family:var(--font);font-size:0.7rem;opacity:0.5}

/* ═══ PREVIEW ══════════════════════════════════════════════════════ */
.tile-preview{flex:1}
.preview-wrap{
    position:relative;flex:1;background:#000;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.preview-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 0.3s}
.preview-badge{
    position:absolute;bottom:8px;right:10px;
    font-size:0.6rem;letter-spacing:1.5px;color:var(--t3);
}
/* Corner brackets */
.preview-corner{position:absolute;width:14px;height:14px;border-color:var(--sig-green);border-style:solid;opacity:0.4}
.preview-corner.tl{top:6px;left:6px;border-width:1px 0 0 1px}
.preview-corner.tr{top:6px;right:6px;border-width:1px 1px 0 0}
.preview-corner.bl{bottom:6px;left:6px;border-width:0 0 1px 1px}
.preview-corner.br{bottom:6px;right:6px;border-width:0 1px 1px 0}

/* ═══ LAYOUTS ══════════════════════════════════════════════════════ */
.layout-rack{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:4px;padding:8px;
}
.lyt{
    padding:7px 2px;background:var(--s1);
    border:1px solid var(--b1);color:var(--t2);
    font-size:0.58rem;font-weight:600;letter-spacing:1.5px;
    transition:all 0.15s;text-align:center;
}
.lyt:hover{border-color:var(--sig-blue);color:var(--sig-blue)}
.lyt.active{border-color:var(--sig-cyan);color:var(--sig-cyan);background:rgba(24,255,255,0.05)}
.lyt-alert{border-color:rgba(255,23,68,0.25);color:var(--sig-red)}
.lyt-alert:hover{border-color:var(--sig-red);background:rgba(255,23,68,0.06)}

/* ═══ CRAWL BAR ════════════════════════════════════════════════════ */
.crawl-bar{
    display:flex;gap:5px;padding:8px;
}
.crawl-bar input{
    padding:7px 9px;background:var(--s0);
    border:1px solid var(--b2);color:var(--t0);font-size:0.8rem;
    outline:none;transition:border 0.2s;flex:1;
}
.crawl-bar input:focus{border-color:var(--sig-green)}
.crawl-src{width:60px !important;flex:none !important;text-transform:uppercase}
.crawl-bar button{
    padding:7px 12px;background:var(--s3);
    border:1px solid var(--b2);color:var(--t1);
    font-size:0.6rem;font-weight:600;letter-spacing:1.5px;
    transition:all 0.15s;
}
.crawl-bar button:hover{border-color:var(--sig-green);color:var(--sig-green)}
.btn-flash{border-color:rgba(255,23,68,0.3) !important;color:var(--sig-red) !important}
.btn-flash:hover{border-color:var(--sig-red) !important;background:rgba(255,23,68,0.08) !important}

/* ═══ QUEUE ════════════════════════════════════════════════════════ */
.tile-queue{flex:1}
.queue-body{flex:1;overflow-y:auto;padding:6px 8px}
.q-item{
    display:flex;align-items:center;gap:8px;
    padding:6px 8px;margin-bottom:4px;
    border:1px solid var(--b1);background:var(--s3);
    font-size:0.75rem;animation:fadeUp 0.15s ease;
}
.q-item.now{border-left:2px solid var(--sig-green)}
.q-title{flex:1;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-pri{
    font-family:var(--mono);font-size:0.65rem;font-weight:500;
    color:var(--sig-amber);min-width:16px;text-align:center;
}

/* ═══ HEALTH ═══════════════════════════════════════════════════════ */
.tile-health{flex-shrink:0}
.health-stack{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.h-row{display:flex;align-items:center;gap:8px}
.h-key{width:30px;font-size:0.6rem;letter-spacing:1.5px;color:var(--t3);font-weight:600}
.h-track{flex:1;height:4px;background:var(--s0);border-radius:2px;overflow:hidden}
.h-fill{height:100%;border-radius:2px;transition:width 0.5s,background 0.5s;background:var(--sig-green)}
.h-fill.yellow{background:var(--sig-amber)}
.h-fill.red{background:var(--sig-red)}
.h-val{width:32px;text-align:right;font-size:0.7rem;color:var(--t2)}

/* ═══ LOG ══════════════════════════════════════════════════════════ */
.tile-log{flex:1;min-height:0}
.log-feed{flex:1;overflow-y:auto;padding:6px 10px;font-family:var(--mono)}
.log-feed-full{max-height:calc(100vh - 120px)}
.log-row{
    padding:3px 0;border-bottom:1px solid rgba(26,34,53,0.6);
    font-size:0.72rem;color:var(--t2);line-height:1.6;
    animation:fadeUp 0.1s ease;
}
.log-time{color:var(--t3);font-size:0.65rem;margin-right:6px}
.log-agent{
    color:var(--sig-blue);font-weight:500;
    padding:0 4px;margin-right:4px;
}

/* ═══ TABLE ════════════════════════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
    text-align:left;padding:8px 12px;font-size:0.6rem;
    letter-spacing:1.5px;color:var(--t3);font-weight:600;
    border-bottom:1px solid var(--b2);
}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--b1);color:var(--t1);font-size:0.8rem}
.tbl tr:hover td{background:var(--s3)}
.tbl code{font-family:var(--mono);font-size:0.72rem;color:var(--t2)}
.badge{
    display:inline-flex;align-items:center;gap:5px;
    font-size:0.62rem;letter-spacing:1px;font-weight:500;
}
.badge-dot{width:5px;height:5px;border-radius:50%}
.badge-on .badge-dot{background:var(--sig-green);box-shadow:var(--glow-green)}
.badge-on{color:var(--sig-green)}
.badge-chk .badge-dot{background:var(--sig-amber)}
.badge-chk{color:var(--sig-amber)}
.badge-off .badge-dot{background:var(--t3)}
.badge-off{color:var(--t3)}

/* ═══ SCHEDULE ═════════════════════════════════════════════════════ */
.sched-list{padding:4px 0}
.sched-row{
    display:flex;align-items:center;padding:10px 14px;
    border-bottom:1px solid var(--b1);
}
.s-int{
    width:70px;font-family:var(--mono);font-size:0.72rem;
    color:var(--sig-cyan);font-weight:500;
}
.s-name{flex:1;color:var(--t1);font-size:0.82rem;font-weight:500}
.s-dur{color:var(--t3);font-size:0.72rem;width:50px;text-align:right}
.sched-dim .s-int,.sched-dim .s-name,.sched-dim .s-dur{opacity:0.4}

/* ═══ MODAL ════════════════════════════════════════════════════════ */
.modal-mask{
    display:none;position:fixed;inset:0;
    background:rgba(5,8,14,0.85);backdrop-filter:blur(4px);
    z-index:200;align-items:center;justify-content:center;
}
.modal-mask.show{display:flex}
.modal-card{
    width:420px;background:var(--s2);border:1px solid var(--sig-red);
    position:relative;overflow:hidden;
    animation:modalIn 0.25s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:none}}
.modal-stripe{height:3px;background:var(--sig-red);box-shadow:var(--glow-red)}
.modal-title{
    padding:18px 20px 0;font-size:0.82rem;font-weight:700;
    letter-spacing:3px;color:var(--sig-red);
}
.modal-desc{padding:6px 20px 14px;font-size:0.78rem;color:var(--t2);line-height:1.5}
.modal-card textarea{
    width:calc(100% - 40px);margin:0 20px;padding:10px;
    background:var(--s0);border:1px solid var(--b2);
    color:var(--t0);font-size:0.85rem;resize:none;outline:none;
}
.modal-card textarea:focus{border-color:var(--sig-red)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px}
.modal-cancel,.modal-go{
    padding:8px 18px;font-size:0.62rem;font-weight:600;
    letter-spacing:2px;border:none;
}
.modal-cancel{background:var(--s3);border:1px solid var(--b2);color:var(--t2)}
.modal-cancel:hover{border-color:var(--t2)}
.modal-go{background:var(--sig-red);color:#fff}
.modal-go:hover{opacity:0.9}

/* ═══ SCANLINE OVERLAY ═════════════════════════════════════════════ */
.dash::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,0.006) 3px,rgba(255,255,255,0.006) 4px);
}