/* XOXO Panel — overlay on top of design-system.css.
   Only app-specific extras live here; base tokens/components come from
   design-system.css. */

/* ---- Logo (minimal mark, no tile) ---- */
.sidebar-logo {
  width: 32px; height: 32px; flex-shrink: 0; display: block;
  background: none; border: none; border-radius: 0; padding: 0;
}
.auth-logo-mark { width: 38px; height: 38px; flex-shrink: 0; display: block; }

/* Fix: design-system .form-checkbox sizes the INPUT (16px). When it lands on
   a label wrapper it squishes the row to 16px and wraps the text. Reset the
   wrapper and size the inner checkbox instead. */
label.form-checkbox {
  width: auto; height: auto; display: flex; align-items: center; gap: 8px;
  cursor: pointer; line-height: 1.3;
}
label.form-checkbox input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-primary-500); cursor: pointer;
}

/* ---- Sidebar footer / user ---- */
.sidebar-footer {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sidebar-user-name {
  font-size: 0.8rem;
  color: var(--color-text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-role {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-badge[hidden] { display: none; }
.nav-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ---- Install command box ---- */
.install-box {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.install-box-label { font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.install-cmd-row { display: flex; gap: var(--space-2); align-items: stretch; }
.install-cmd {
  flex: 1;
  background: #0b0f14;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--color-primary-400, #6cf);
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* ---- Page header actions ---- */
.page-header-actions { display: flex; gap: var(--space-3); align-items: center; }

/* ---- KPI cards ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
}
.kpi-label {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-2);
}

/* ---- Charts ---- */
.chart-host { padding: var(--space-2) 0; }
.chart-legend { display:flex; gap:var(--space-3); font-size:0.72rem; color: var(--color-text-tertiary); }
.chart-legend .lg::before { content:''; display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.chart-legend .lg-ok::before { background: var(--color-success); }
.chart-legend .lg-bad::before { background: var(--color-danger); }
.hbars { display:flex; flex-direction:column; gap:8px; }
.hbar-row { display:flex; align-items:center; gap:10px; font-size:0.8rem; }
.hbar-label { width:84px; color: var(--color-text-secondary); text-transform:capitalize; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar-track { flex:1; height:8px; background: var(--color-bg-tertiary); border-radius:var(--radius-full); overflow:hidden; }
.hbar-fill { display:block; height:100%; border-radius:var(--radius-full); transition:width .4s ease; }
.hbar-val { width:32px; text-align:right; color: var(--color-text-tertiary); font-variant-numeric:tabular-nums; }

/* ---- KPI alert (challenges) ---- */
.kpi-alert-on { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger) inset; }
.kpi-alert-on .kpi-value { color: var(--color-danger); }

/* ---- Live feed ---- */
.feed-table td { padding: 7px 10px; }
.feed-table tr { border-bottom: 1px solid var(--color-border); }
#feed-pulse { color: var(--color-success); transition: opacity .3s ease; }

/* ---- Mini empty states ---- */
.empty-mini { color: var(--color-text-tertiary); font-size: 0.85rem; padding: var(--space-3) 0; line-height:1.6; }
.empty-mini a { color: var(--color-primary-500); }

/* ---- Rich empty state ---- */
.empty-state { text-align:center; padding: var(--space-12) var(--space-6); color: var(--color-text-tertiary); }
.empty-state-icon { font-size: 2.5rem; opacity: 0.5; margin-bottom: var(--space-3); }
.empty-state-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: var(--space-2); }

/* ---- Platform pills ---- */
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid var(--color-border);
}
.platform-tiktok    { color: #25f4ee; border-color: #25f4ee55; }
.platform-reddit    { color: #ff4500; border-color: #ff450055; }
.platform-instagram { color: #e1306c; border-color: #e1306c55; }
.platform-facebook  { color: #1877f2; border-color: #1877f255; }

/* ---- Account / entity card grid ---- */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.entity-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.entity-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.entity-title { font-weight: 600; color: var(--color-text-primary); }
.entity-meta { font-size: 0.78rem; color: var(--color-text-tertiary); }

/* ---- Session-state dots ---- */
.state-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.state-valid     { background: var(--color-success); }
.state-unknown   { background: var(--color-text-tertiary); }
.state-expired   { background: var(--color-warning); }
.state-challenge { background: var(--color-warning); }
.state-banned    { background: var(--color-danger); }

/* ---- Forms: spacing helpers ---- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-hint { font-size: 0.75rem; color: var(--color-text-tertiary); margin-top: 4px; }
.mono { font-family: var(--font-mono); }

/* ---- Day picker ---- */
.day-picker { display:flex; gap:6px; flex-wrap:wrap; }
.day-picker label {
  display:flex; align-items:center; gap:5px; font-size:0.78rem;
  padding:5px 9px; border:1px solid var(--color-border); border-radius:var(--radius-md);
  cursor:pointer; user-select:none; color: var(--color-text-secondary);
}
.day-picker input { margin:0; }

/* ---- Auth (login) ---- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-bg-primary);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}
.auth-logo { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: var(--space-6); }
.auth-sub { color: var(--color-text-tertiary); font-size: 0.85rem; margin-bottom: var(--space-6); }
.auth-error {
  background: var(--error-50, #fee);
  color: var(--error-700, #b00);
  border: 1px solid var(--error-500, #f88);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}

/* ---- Toasts ---- */
.toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  animation: toast-in 0.2s ease;
}
.toast-success { border-left-color: var(--color-success); }
.toast-error   { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-warning); }
@keyframes toast-in { from { opacity:0; transform: translateX(20px);} to { opacity:1; transform:none;} }

/* ---- Challenge popup (priority modal over any page) ---- */
.challenge-popup-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.challenge-popup {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: var(--shadow-xl);
}
.challenge-popup-head {
  display:flex; justify-content:space-between; align-items:center;
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.challenge-canvas-wrap { padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-3); align-items:center; }
.relay-instruction {
  width: 100%; background: var(--color-bg-tertiary); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning); border-radius: var(--radius-md);
  padding: 10px 14px; font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.5;
}
#challenge-canvas { max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: crosshair; background:#111; }
.challenge-toolbar { display:flex; gap: var(--space-2); flex-wrap: wrap; width:100%; }

/* mobile sidebar tweak */
@media (max-width: 880px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Password reveal (eye) toggle — injected by app.js around password inputs */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input.form-input { width: 100%; padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: none; border-radius: 6px;
  color: var(--color-text-tertiary); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.pw-toggle:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.pw-toggle.on { color: var(--color-primary-500, #2BE7DD); }
.pw-toggle svg { width: 18px; height: 18px; display: block; }

/* Two-factor code entry inside the challenge relay. Prominent because when a
   2FA challenge is open, entering the code IS the task — it should not be a
   small input buried in the toolbar under the live view. */
.relay-2fa {
  width: 100%;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary, #2563eb);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-surface-2, rgba(37, 99, 235, 0.06));
}
.relay-2fa-title { font-weight: 600; margin-bottom: 2px; }
.relay-2fa-row { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
.relay-2fa-row input {
  flex: 0 0 160px;
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-align: center;
}

/* Dashboard activity detail popup. Rows are clickable, so make that obvious. */
.feed-row { cursor: pointer; }
.feed-row:hover { background: var(--color-surface-2, rgba(127,127,127,0.07)); }
.act-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3);
           padding: 8px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.act-row:last-child { border-bottom: 0; }
.act-k { font-size: 0.78rem; opacity: 0.7; }
.act-v { font-size: 0.88rem; word-break: break-word; }
/* The text that was actually posted — the point of a comment entry. */
.act-quote { border-left: 3px solid var(--color-primary, #2563eb); padding: 8px 12px;
             background: var(--color-surface-2, rgba(127,127,127,0.06)); border-radius: var(--radius-sm);
             white-space: pre-wrap; }
.act-err { color: var(--color-danger, #dc2626); }
.act-tl { padding: 3px 0; font-size: 0.82rem; }
.act-details { margin-top: var(--space-3); }
.act-details summary { cursor: pointer; font-size: 0.82rem; opacity: 0.8; }
.act-pre { font-size: 0.75rem; white-space: pre-wrap; word-break: break-word;
           background: var(--color-surface-2, rgba(127,127,127,0.06));
           padding: 10px; border-radius: var(--radius-sm); margin-top: 6px; max-height: 300px; overflow: auto; }

/* --- Engagements review ------------------------------------------------ */
.filter-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.eng-card { margin-bottom:12px; }
.eng-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.eng-foot { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.act-quote.struck { text-decoration:line-through; opacity:.55; }
.stars { display:inline-flex; gap:2px; align-items:center; }
.star { cursor:pointer; font-size:17px; line-height:1; color:var(--border,#555); transition:color .12s; }
.star.on { color:#f5b301; }
.star:hover { color:#f5b301; }
.star-clear { cursor:pointer; font-size:11px; margin-left:6px; opacity:.7; }
.badge-muted { background:var(--surface-2,#333); color:var(--text-dim,#999); }