/* SOMATOTEK SIGNAL — Command Console
   Dark analog console aesthetic. Mobile-first. */

:root {
  --bg:        #0e1110;   /* near-black console */
  --panel:     #171b1a;   /* charcoal panel */
  --panel-2:   #1e2422;   /* raised surface */
  --line:      #2a322f;   /* hairlines */
  --ink:       #e6ece9;   /* primary text */
  --ink-dim:   #8b9893;   /* secondary text */
  --ink-faint: #5d6b66;   /* labels */

  --sage:      #7eb77f;   /* Pure Tech primary accent */
  --sage-dim:  #4f7a52;
  --amber:     #d6a45c;
  --cyan:      #6fc3c9;
  --red:       #d76b6b;
  --green:     #6fcf8e;

  --lane-puretech: #7eb77f;
  --lane-libi:     #d6a45c;
  --lane-mash:     #b89ed6;
  --lane-youtube:  #d76b6b;

  --mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: "Inter", "Trebuchet MS", system-ui, -apple-system, sans-serif;

  --radius: 10px;
  --gap: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); }
body { line-height: 1.45; -webkit-font-smoothing: antialiased; padding-bottom: 40px; }
a { color: var(--sage); }

.mono { font-family: var(--mono); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.hidden { display: none !important; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, #111614 0%, #0e1110 100%);
  border-bottom: 1px solid var(--line);
}
.brandmark { display: flex; align-items: baseline; gap: 8px; }
.brandmark b { font-family: var(--mono); letter-spacing: 2px; font-weight: 700; }
.brandmark span { font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; }
.runstatus { font-family: var(--mono); font-size: 11px; display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 8px currentColor; }
.dot.ok { background: var(--green); color: var(--green); }
.dot.warn { background: var(--amber); color: var(--amber); }
.dot.err { background: var(--red); color: var(--red); }

.wrap { max-width: 920px; margin: 0 auto; padding: 16px; }

/* ---- Panels ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  overflow: hidden;
}
.panel > h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); padding: 12px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.panel > h2 .tick { color: var(--sage-dim); }
.panel .body { padding: 14px; }

/* ---- Morning Signal Panel ---- */
.signal-summary { display: grid; gap: 10px; }
.sig-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.lane-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; padding: 3px 7px; border-radius: 5px;
  background: #0e1413; border: 1px solid var(--line); white-space: nowrap;
}
.score-pill {
  font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: #0e1413; border: 1px solid var(--sage-dim); color: var(--sage);
}
.sig-row .ttl { font-size: 14px; }
.sig-row .ang { font-size: 12px; color: var(--ink-dim); }

/* ---- Tabs ---- */
.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; margin-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px; white-space: nowrap;
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-dim); cursor: pointer; transition: .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--bg); background: var(--sage); border-color: var(--sage); font-weight: 700; }
.tab.new { color: var(--sage); border-style: dashed; }

/* ---- Signals list (per tab) ---- */
.signals-grid { display: grid; gap: 8px; }
.signal-card {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.rank { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); padding-top: 2px; }
.signal-card .ttl { font-size: 14px; font-weight: 600; }
.signal-card .meta { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.signal-card .why { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* ---- Draft Queue ---- */
.draft {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; margin-bottom: 10px;
}
.draft-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.plat-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; padding: 3px 8px; border-radius: 5px;
  background: #0e1413; border: 1px solid var(--line); color: var(--cyan);
}
.status-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; padding: 3px 8px; border-radius: 5px;
  text-transform: uppercase; margin-left: auto;
}
.status-draft   { background:#1b1f1e; border:1px solid var(--line); color:var(--ink-dim); }
.status-approved{ background:#13201a; border:1px solid var(--sage-dim); color:var(--sage); }
.status-visual_requested,.status-visual_ready{ background:#211c12; border:1px solid var(--amber); color:var(--amber); }
.status-posted  { background:#12211a; border:1px solid var(--green); color:var(--green); }
.status-rejected{ background:#211414; border:1px solid var(--red); color:var(--red); }

.draft .content { font-size: 14px; white-space: pre-wrap; color: var(--ink); }
.draft .content[contenteditable="true"] { outline: 1px dashed var(--sage-dim); border-radius: 6px; padding: 8px; background:#0e1413; }
.draft .sig-ctx { font-size: 11px; color: var(--ink-faint); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.draft .visual { margin-top: 10px; }
.draft .visual img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }

.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
  padding: 8px 11px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-dim); cursor: pointer; transition: .12s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.approve:hover { color: var(--sage); border-color: var(--sage-dim); }
.btn.reject:hover  { color: var(--red); border-color: var(--red); }
.btn.post { background: var(--sage); color: var(--bg); border-color: var(--sage); font-weight: 700; }
.btn.post:hover { filter: brightness(1.08); color: var(--bg); }
.btn.visual:hover { color: var(--amber); border-color: var(--amber); }

/* ---- Performance ---- */
.perf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.metric .k { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: .5px; text-transform: uppercase; }
.metric .v { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.metric .v small { font-size: 11px; color: var(--ink-dim); font-weight: 400; }

/* ---- PA Panel ---- */
.pa-group { margin-bottom: 12px; }
.pa-group h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.pa-group.high h3 { color: var(--amber); }
.pa-item { background: var(--panel-2); border: 1px solid var(--line); border-left: 2px solid var(--ink-faint); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.pa-group.high .pa-item { border-left-color: var(--amber); }
.pa-item .sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* ---- Empty / loading ---- */
.empty { color: var(--ink-faint); font-size: 13px; font-family: var(--mono); text-align: center; padding: 22px; }
.skeleton { height: 64px; border-radius: 8px; background: linear-gradient(90deg,#161b19,#1d2422,#161b19); background-size: 200% 100%; animation: sk 1.2s infinite; margin-bottom: 8px; }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---- Modal ---- */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.66); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 40; overflow:auto; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; max-width: 560px; width: 100%; }
.modal h2 { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--sage); }
.modal .body { padding: 16px; }
.modal label { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin: 12px 0 5px; }
.modal input, .modal textarea, .modal select {
  width: 100%; background: #0e1413; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); padding: 9px 11px; font-family: var(--sans); font-size: 14px;
}
.modal textarea { min-height: 60px; resize: vertical; }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 16px; border-top: 1px solid var(--line); }

/* ---- Login gate ---- */
.gate { max-width: 360px; margin: 12vh auto; padding: 24px; text-align: center; }
.gate .brandmark { justify-content: center; margin-bottom: 20px; }
.gate input { width: 100%; background:#0e1413; border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:11px; margin-bottom:10px; font-size:14px; }
.gate .msg { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 12px; min-height: 16px; }

/* ---- Wider screens ---- */
@media (min-width: 760px) {
  .perf-grid { grid-template-columns: repeat(4, 1fr); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
}

.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--sage-dim); color: var(--ink);
  font-family: var(--mono); font-size: 12px; padding: 10px 16px; border-radius: 8px; z-index: 60;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }