/* ============================================================
   PolicyTrace — styles.css
   PacketHaven console aesthetic: terminal UI, monospace,
   green phosphor CRT theme.
   ============================================================ */

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

:root {
  --bg:          #0a0e08;
  --bg-light:    #0f1610;
  --bg-panel:    #0c120a;
  --green:       #33ff33;
  --green-dim:   #1a8c1a;
  --green-br:    #66ff66;
  --green-glow:  #33ff3340;
  --amber:       #ffaa00;
  --red:         #ff3333;
  --cyan:        #33cccc;
  --blue:        #3399ff;
  --white:       #ccddcc;
  --muted:       #446644;
  --border:      #1a3d1a;
  --font:        'IBM Plex Mono','Fira Code','Cascadia Code','SF Mono','Menlo','Consolas','Liberation Mono',monospace;
  --fs:          13px;
  --lh:          1.55;
  --glow:        0 0 6px #33ff3320, 0 0 20px #33ff3310;
}

html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--green);
  font-family:var(--font); font-size:var(--fs); line-height:var(--lh);
  -webkit-font-smoothing:antialiased; }

/* CRT scanline overlay */
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px); }

/* ── App shell ─────────────────────────────────────────── */
#app { display:flex; flex-direction:column; height:100vh; }

/* ── Header ────────────────────────────────────────────── */
#header { flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:6px 12px; background:var(--bg-panel); border-bottom:1px solid var(--border); user-select:none; }
#header .logo { font-weight:700; font-size:14px; letter-spacing:2px; text-transform:uppercase;
  color:var(--green-br); text-shadow:var(--glow); }
#header .logo .dim { color:var(--green-dim); font-weight:400; }
#header .actions { display:flex; gap:8px; }
#header .actions button { background:transparent; border:1px solid var(--border); color:var(--green-dim);
  font-family:var(--font); font-size:11px; padding:2px 10px; cursor:pointer; border-radius:2px; transition:all .15s; }
#header .actions button:hover { color:var(--green); border-color:var(--green-dim); background:rgba(51,255,51,.05); }

/* ── Terminal ──────────────────────────────────────────── */
#terminal-wrapper { flex:1; overflow:hidden; position:relative; }
#terminal-output { height:100%; overflow-y:auto; padding:10px 12px 60px; }
#terminal-output::-webkit-scrollbar { width:6px; }
#terminal-output::-webkit-scrollbar-track { background:var(--bg); }
#terminal-output::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
#terminal-output::-webkit-scrollbar-thumb:hover { background:var(--green-dim); }

/* ── Lines ─────────────────────────────────────────────── */
.term-line { white-space:pre-wrap; word-break:break-all; min-height:1.55em; }
.term-line.cmd   { color:var(--white); }
.term-prompt     { color:var(--green-dim); user-select:none; }
.term-line.output{ color:var(--green); }
.term-line.error { color:var(--red); }
.term-line.warning { color:var(--amber); }
.term-line.info  { color:var(--cyan); }
.term-line.debug { color:var(--muted); font-style:italic; }
.term-line.success { color:var(--green-br); }
.term-line.header  { color:var(--green-br); font-weight:700; text-shadow:var(--glow); }
.term-line.separator { color:var(--border); }
.term-line.dim   { color:var(--muted); }

/* Phase labels */
.phase-route   { color:var(--blue); font-weight:700; }
.phase-nat     { color:var(--amber); font-weight:700; }
.phase-policy  { color:var(--cyan); font-weight:700; }
.phase-zone    { color:#cc66ff; font-weight:700; }
.phase-log     { color:var(--muted); font-weight:700; }
.phase-result  { font-weight:700; }
.phase-result.allow { color:var(--green-br); text-shadow:var(--glow); }
.phase-result.deny  { color:var(--red); }
.phase-result.drop  { color:var(--red); }

/* ── Input line ────────────────────────────────────────── */
#input-row { flex-shrink:0; display:flex; align-items:center; padding:6px 12px;
  background:var(--bg-panel); border-top:1px solid var(--border); }
#input-row .prompt-label { color:var(--green-dim); white-space:nowrap; margin-right:6px; font-size:var(--fs); }
#input-row input { flex:1; background:transparent; border:none; outline:none;
  color:var(--green); font-family:var(--font); font-size:var(--fs); caret-color:var(--green); }
#input-row input::placeholder { color:var(--muted); }

/* ── Tab-completion popup ──────────────────────────────── */
#tab-popup { position:absolute; bottom:46px; left:12px; background:var(--bg-light);
  border:1px solid var(--border); padding:4px 0; display:none; z-index:100; min-width:220px;
  max-height:220px; overflow-y:auto; border-radius:2px; }
#tab-popup .tab-item { padding:2px 12px; color:var(--green-dim); cursor:pointer; font-size:12px; }
#tab-popup .tab-item.active, #tab-popup .tab-item:hover { background:rgba(51,255,51,.08); color:var(--green); }

/* ── Status bar ────────────────────────────────────────── */
#status-bar { flex-shrink:0; display:flex; align-items:center; gap:4px; padding:3px 12px;
  background:var(--bg-panel); border-top:1px solid var(--border); font-size:11px;
  color:var(--muted); user-select:none; overflow-x:auto; }
#status-bar .seg { padding:1px 8px; border-right:1px solid var(--border); white-space:nowrap; }
#status-bar .seg:last-child { border-right:none; }
#status-bar .seg .label { color:var(--muted); }
#status-bar .seg .val   { color:var(--green-dim); }
#status-bar .seg .val.on  { color:var(--green); }
#status-bar .seg .val.off { color:var(--muted); }
#status-bar .seg .val.warn { color:var(--amber); }

/* ── JSON modal (import) ───────────────────────────────── */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:none;
  z-index:500; align-items:center; justify-content:center; }
#modal-overlay.visible { display:flex; }
#modal-box { background:var(--bg-light); border:1px solid var(--border); border-radius:4px;
  width:90%; max-width:640px; max-height:80vh; display:flex; flex-direction:column; }
#modal-box .modal-head { padding:8px 14px; border-bottom:1px solid var(--border);
  color:var(--green-br); font-weight:700; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
#modal-box .modal-head .close-btn { background:none; border:none; color:var(--red); cursor:pointer;
  font-family:var(--font); font-size:16px; }
#modal-box textarea { flex:1; background:var(--bg); color:var(--green); border:none; padding:12px;
  font-family:var(--font); font-size:12px; resize:none; min-height:300px; outline:none; }
#modal-box .modal-foot { padding:8px 14px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
#modal-box .modal-foot button { background:transparent; border:1px solid var(--border); color:var(--green-dim);
  font-family:var(--font); font-size:12px; padding:4px 16px; cursor:pointer; border-radius:2px; transition:all .15s; }
#modal-box .modal-foot button:hover { color:var(--green); border-color:var(--green-dim); }
#modal-box .modal-foot button.primary { border-color:var(--green-dim); color:var(--green); }
#modal-box .modal-foot button.primary:hover { background:rgba(51,255,51,.1); }

/* ── Copy toast ────────────────────────────────────────── */
#copy-toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--bg-light);
  border:1px solid var(--green-dim); color:var(--green); padding:8px 20px; border-radius:4px;
  font-size:12px; display:none; z-index:600; pointer-events:none; }
#copy-toast.visible { display:block; animation:toastFade 1.5s ease forwards; }
@keyframes toastFade { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

/* ── Welcome art ───────────────────────────────────────── */
.ascii-art { color:var(--green-dim); line-height:1.2; font-size:11px; }
.ascii-art .bright { color:var(--green-br); text-shadow:var(--glow); }

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:768px){
  :root { --fs:12px; }
  #header { padding:4px 8px; }
  #header .logo { font-size:12px; letter-spacing:1px; }
  #header .actions button { font-size:10px; padding:2px 6px; }
  #terminal-output { padding:8px; }
  #input-row { padding:4px 8px; }
  #input-row .prompt-label { font-size:11px; }
  #status-bar { font-size:10px; padding:2px 8px; flex-wrap:wrap; }
  #status-bar .seg { padding:1px 4px; font-size:10px; }
}

@media(max-width:480px){
  :root { --fs:11px; }
  #header .actions { gap:4px; }
  #input-row .prompt-label { display:none; }
  #input-row::before { content:'$ '; color:var(--green-dim); font-size:11px; }
}