/* InsightPane - shared chrome (top bar, nav, footer) for Maven Corporation demo */

:root {
  --ip-navy:#0b1530; --ip-navy-mid:#162243; --ip-navy-soft:#1f2c50;
  --ip-purple:#8b5cf6; --ip-teal:#22d3ee; --ip-accent:#7c8df0;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-400:#34d399;
  --emerald-500:#10b981; --emerald-600:#059669; --emerald-800:#065f46;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-500:#f59e0b;
  --amber-600:#d97706; --amber-800:#92400e;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-400:#f87171;
  --red-500:#ef4444; --red-600:#dc2626; --red-800:#991b1b;
  --violet-50:#f5f3ff; --violet-100:#ede9fe; --violet-300:#c4b5fd;
  --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-800:#5b21b6;
  --cyan-50:#ecfeff; --cyan-100:#cffafe; --cyan-300:#67e8f9;
  --cyan-500:#06b6d4; --cyan-800:#155e75;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100vh; }
body {
  font-family:'Plus Jakarta Sans','DM Sans','Inter',system-ui,sans-serif;
  background:var(--gray-50); color:var(--gray-900);
  display:flex; flex-direction:column;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* Top bar */
.ip-topbar {
  background:linear-gradient(90deg, var(--ip-navy) 0%, var(--ip-navy-mid) 100%);
  color:#fff; padding:10px 22px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.ip-topbar-left { display:flex; align-items:center; gap:12px; }
.ip-brand {
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(135deg, var(--ip-purple) 0%, var(--ip-teal) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; letter-spacing:0.5px;
}
.ip-product {
  font-weight:700; font-size:15px; letter-spacing:0.3px;
  display:flex; align-items:baseline; gap:8px;
}
.ip-product .ip-product-sub {
  font-weight:400; font-size:12px; color:var(--slate-400);
}
.ip-client {
  font-size:12px; color:var(--slate-300);
  padding:3px 10px; border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}
.ip-topbar-right { display:flex; align-items:center; gap:18px; font-size:12px; color:var(--slate-400); }
.ip-sync-dot { width:7px; height:7px; background:var(--emerald-400); border-radius:50%; display:inline-block; margin-right:6px; animation:ipPulse 2.2s infinite; }
@keyframes ipPulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.ip-user-chip {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
}

/* Nav tabs */
.ip-navbar {
  background:#fff; border-bottom:1px solid var(--gray-200);
  padding:0 22px; display:flex; gap:0; overflow-x:auto;
}
.ip-nav-link {
  padding:13px 16px; font-size:13.5px; font-weight:500;
  color:var(--gray-500); border:none; background:none;
  border-bottom:2px solid transparent; transition:all 0.15s;
  white-space:nowrap;
}
.ip-nav-link:hover { color:var(--gray-800); }
.ip-nav-link.active { color:var(--violet-600); border-bottom-color:var(--violet-600); font-weight:600; }
.ip-nav-link .ip-nav-badge {
  display:inline-block; margin-left:6px;
  padding:1px 7px; border-radius:9px;
  background:var(--violet-100); color:var(--violet-800);
  font-size:10px; font-weight:700;
}

/* Page container */
.ip-content { padding:22px; max-width:1480px; margin:0 auto; width:100%; flex:1; }

/* Footer */
.ip-footer {
  border-top:1px solid var(--gray-200); background:#fff;
  padding:11px 22px; display:flex; justify-content:space-between;
  font-size:11.5px; color:var(--gray-400);
}
.ip-footer-right { display:flex; gap:14px; }
.ip-footer-right a { color:var(--gray-500); }
.ip-footer-right a:hover { color:var(--violet-600); }

/* Reusable bits */
.ip-panel { background:#fff; border:1px solid var(--gray-200); border-radius:10px; overflow:hidden; }
.ip-panel-header {
  padding:13px 18px; border-bottom:1px solid var(--gray-100);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.ip-panel-title { font-size:14px; font-weight:600; color:var(--gray-800); }
.ip-panel-sub { font-size:12px; color:var(--gray-400); }

.ip-badge { display:inline-block; padding:2px 9px; border-radius:11px; font-size:11px; font-weight:600; letter-spacing:0.3px; }
.ip-badge-high   { background:var(--emerald-100); color:var(--emerald-800); }
.ip-badge-review { background:var(--amber-100); color:var(--amber-800); }
.ip-badge-low    { background:var(--red-100); color:var(--red-800); }
.ip-badge-skip   { background:var(--gray-200); color:var(--gray-700); }
.ip-badge-info   { background:var(--violet-100); color:var(--violet-800); }
.ip-badge-cyan   { background:var(--cyan-100); color:var(--cyan-800); }
.ip-badge-neutral{ background:var(--gray-100); color:var(--gray-700); }

.ip-btn {
  padding:8px 14px; border-radius:7px; font-size:13px; font-weight:600;
  border:1px solid transparent; transition:all 0.15s;
}
.ip-btn-primary { background:linear-gradient(135deg, var(--violet-600) 0%, #6366f1 100%); color:#fff; }
.ip-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(124,58,237,0.25); }
.ip-btn-ghost { background:#fff; color:var(--gray-700); border-color:var(--gray-300); }
.ip-btn-ghost:hover { background:var(--gray-50); border-color:var(--gray-400); }
.ip-btn-danger { background:#fff; color:var(--red-600); border-color:var(--red-200); }
.ip-btn-danger:hover { background:var(--red-50); }

.ip-mono { font-family:'JetBrains Mono','SF Mono',Menlo,monospace; }
.ip-muted { color:var(--gray-500); }

table.ip-table { width:100%; border-collapse:collapse; font-size:13px; }
table.ip-table th {
  text-align:left; padding:9px 16px; font-size:11px; font-weight:600;
  color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px;
  background:var(--gray-50); border-bottom:1px solid var(--gray-200);
}
table.ip-table td { padding:11px 16px; border-bottom:1px solid var(--gray-100); }
table.ip-table tr.ip-clickable { cursor:pointer; transition:background 0.12s; }
table.ip-table tr.ip-clickable:hover { background:rgba(124,58,237,0.04); }
table.ip-table .right { text-align:right; }
table.ip-table .center { text-align:center; }

/* Score pill */
.ip-score-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 11px 3px 4px; border-radius:14px;
  background:var(--gray-100); font-size:12.5px; font-weight:600; color:var(--gray-700);
}
.ip-score-pill .ip-score-dot {
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; color:#fff;
}
.ip-score-pill.green  { background:var(--emerald-50);  color:var(--emerald-800); }
.ip-score-pill.green  .ip-score-dot { background:var(--emerald-500); }
.ip-score-pill.amber  { background:var(--amber-50);    color:var(--amber-800); }
.ip-score-pill.amber  .ip-score-dot { background:var(--amber-500); }
.ip-score-pill.red    { background:var(--red-50);      color:var(--red-800); }
.ip-score-pill.red    .ip-score-dot { background:var(--red-500); }
.ip-score-pill.gray   { background:var(--gray-100);    color:var(--gray-700); }
.ip-score-pill.gray   .ip-score-dot { background:var(--gray-400); }

/* Tiny inline confidence indicator */
.ip-conf {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
}
.ip-conf-bar { width:42px; height:5px; border-radius:3px; background:var(--gray-200); overflow:hidden; }
.ip-conf-bar > span { display:block; height:100%; border-radius:3px; }
.ip-conf.high   .ip-conf-bar > span { background:var(--emerald-500); }
.ip-conf.med    .ip-conf-bar > span { background:var(--amber-500); }
.ip-conf.low    .ip-conf-bar > span { background:var(--red-500); }
.ip-conf.high   { color:var(--emerald-700, var(--emerald-800)); }
.ip-conf.med    { color:var(--amber-800); }
.ip-conf.low    { color:var(--red-800); }