/* PIM360 — custom polish on top of Tailwind */
:root {
  --navy-900:#0B1437;
  --navy-800:#13205A;
  --navy-700:#1E2761;
  --navy-600:#2A3683;
  --ice:#CADCFC;
  --teal:#00D4D4;
  --teal-soft:#7EE8E8;
  --accent:#7C8DFF;
  --bg:#F6F7FB;
  --card:#FFFFFF;
  --ink:#0F172A;
  --ink-soft:#475569;
  --border:#E5E9F2;
  --good:#10B981;
  --warn:#F59E0B;
  --bad:#EF4444;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); }

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, #0B1437 0%, #13205A 100%);
  color: #E5EAFB;
  width: 248px;
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 40;
}
.sidebar .brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; gap: 10px;
}
.sidebar .brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #00D4D4 0%, #7C8DFF 100%);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,212,212,0.35);
}
.sidebar .nav-item {
  display:flex; align-items:center; gap:12px;
  padding: 11px 16px; margin: 2px 12px; border-radius: 10px;
  color: rgba(229,234,251,0.78); cursor: pointer;
  font-size: 14px; font-weight: 500;
  transition: all 0.15s ease;
  position: relative;
}
.sidebar .nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar .nav-item.active {
  background: rgba(0,212,212,0.10);
  color: #fff;
  border-left: 3px solid var(--teal);
  padding-left: 13px;
}
.sidebar .nav-item .badge {
  margin-left: auto; background: var(--teal); color: #0B1437;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.sidebar .nav-section { padding: 14px 20px 6px; font-size: 10.5px; letter-spacing: 1.5px; color: rgba(202,220,252,0.45); text-transform: uppercase; }
.sidebar .persona {
  margin: auto 12px 14px; padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex; align-items: center; gap: 14px;
}
.topbar .search {
  flex: 0 1 460px;
  display:flex; align-items:center; gap:8px;
  padding: 8px 14px; background: var(--bg); border-radius: 10px; border: 1px solid var(--border);
}
.topbar .search input { flex:1; border:none; outline:none; background: transparent; font-size: 14px; color: var(--ink); }
.topbar .icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; cursor: pointer; color: var(--ink-soft);
  border: 1px solid var(--border); background: #fff;
  transition: 0.15s;
}
.topbar .icon-btn:hover { background: var(--bg); color: var(--ink); }
.topbar .icon-btn .dot { position:absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius:99px; background: var(--bad); }

.btn-primary {
  background: linear-gradient(135deg, #1E2761 0%, #2A3683 100%);
  color: #fff; border: none; padding: 9px 16px;
  border-radius: 10px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: 0.15s; box-shadow: 0 4px 12px rgba(30,39,97,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,39,97,0.35); }
.btn-primary.demo { background: linear-gradient(135deg, #00D4D4 0%, #7C8DFF 100%); color: #0B1437; box-shadow: 0 4px 16px rgba(0,212,212,0.35); }

.btn-ghost {
  background: #fff; color: var(--ink-soft); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.btn-ghost:hover { background: var(--bg); color: var(--ink); }

/* Layout */
.main {
  margin-left: 248px;
  min-height: 100vh;
}
.content { padding: 24px 28px 80px; max-width: 1500px; }

/* Cards */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px;
}
.card.bordered-accent { border-left: 3px solid var(--teal); }
.card-title { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.card-value { font-size: 28px; font-weight: 700; margin: 4px 0 0; color: var(--ink); letter-spacing: -0.5px; }

.kpi { padding: 18px 20px; }
.kpi .delta { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; display:inline-flex; align-items:center; gap: 3px; }
.kpi .delta.up { background: #DCFCE7; color: #166534; }
.kpi .delta.down { background: #FEE2E2; color: #991B1B; }
.kpi .delta.flat { background: #F1F5F9; color: #475569; }

/* Pills/Tags */
.pill { display:inline-flex; align-items:center; gap:5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.pill-teal { background: rgba(0,212,212,0.12); color: #0E7490; }
.pill-amber { background: #FEF3C7; color: #92400E; }
.pill-rose { background: #FEE2E2; color: #991B1B; }
.pill-green { background: #DCFCE7; color: #166534; }
.pill-slate { background: #F1F5F9; color: #475569; }
.pill-indigo { background: #E0E7FF; color: #3730A3; }

/* Completeness ring */
.ring {
  --p: 50; --size: 36px; --thick: 4px;
  width: var(--size); height: var(--size); position: relative;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color, #00D4D4) calc(var(--p) * 1%), #E5E9F2 0);
  display: grid; place-items: center;
}
.ring::before {
  content:''; position:absolute; inset:var(--thick); border-radius:50%; background:#fff;
}
.ring span { position: relative; font-size: 10px; font-weight: 700; color: var(--ink); }

/* AI Copilot panel */
.copilot {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px; background: #fff;
  border-left: 1px solid var(--border);
  z-index: 50; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease;
  box-shadow: -10px 0 30px rgba(15,23,42,0.10);
}
.copilot.open { transform: translateX(0); }
.copilot-head {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(0,212,212,0.06) 0%, rgba(124,141,255,0.06) 100%);
}
.copilot-head .avatar {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #00D4D4, #7C8DFF);
  display: grid; place-items: center; color: #0B1437;
}
.copilot-body { flex:1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.copilot-msg { padding: 11px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; max-width: 92%; }
.copilot-msg.ai { background: var(--bg); color: var(--ink); }
.copilot-msg.user { background: var(--navy-700); color: #fff; align-self: flex-end; }
.copilot-input { border-top: 1px solid var(--border); padding: 12px; display: flex; gap: 8px; }
.copilot-input input { flex:1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; outline: none; }
.copilot-input input:focus { border-color: var(--teal); }

.suggestion {
  border: 1px solid var(--border); border-radius: 11px; padding: 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.suggestion .conf-bar { height: 4px; background: #F1F5F9; border-radius: 99px; overflow: hidden; }
.suggestion .conf-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #00D4D4, #7C8DFF); border-radius: 99px; }

/* Tables */
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.t thead th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: 11.5px; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
table.t tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
table.t tbody tr { cursor: pointer; transition: background 0.12s; }
table.t tbody tr:hover { background: rgba(0,212,212,0.04); }

/* Lifecycle pills */
.lc-Active { background: #DCFCE7; color: #166534; }
.lc-NRND   { background: #FEF3C7; color: #92400E; }
.lc-EOL    { background: #FEE2E2; color: #991B1B; }
.lc-New    { background: #E0E7FF; color: #3730A3; }

/* Streaming caret */
.cursor-blink { display:inline-block; width:7px; background: var(--ink); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* Data Fabric SVG */
.fabric-bg {
  background: radial-gradient(circle at 50% 50%, rgba(0,212,212,0.08), transparent 60%);
  border-radius: 16px;
}
@keyframes pulse-node {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,212,212,0)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(0,212,212,0.55)); }
}
.fabric-node-pulse { animation: pulse-node 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes flow {
  to { stroke-dashoffset: -40; }
}
.fabric-flow {
  stroke-dasharray: 6 6;
  animation: flow 1.4s linear infinite;
}

/* Channel preview cards */
.preview {
  border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.preview-bar { padding: 8px 12px; font-size: 11px; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.preview-body { padding: 16px; flex:1; }

/* Demo Mode overlay */
.demo-spotlight {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(circle at var(--sx,50%) var(--sy,50%), transparent 0, transparent 180px, rgba(11,20,55,0.78) 280px);
  transition: background 0.3s ease;
}
.demo-tooltip {
  position: fixed; z-index: 61; max-width: 360px;
  background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.30);
  padding: 18px 20px; pointer-events: auto;
  animation: pop-in 0.25s ease;
}
@keyframes pop-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Toast */
.toast {
  position: fixed; bottom: 28px; right: 28px;
  background: #0B1437; color: #fff; padding: 12px 16px; border-radius: 12px;
  font-size: 13.5px; z-index: 80; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  animation: slide-in 0.3s ease;
}
@keyframes slide-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Diff highlights for before/after */
.diff-bad { background: #FEE2E2; color: #991B1B; padding: 1px 5px; border-radius: 4px; }
.diff-good { background: #DCFCE7; color: #166534; padding: 1px 5px; border-radius: 4px; }
.diff-add { background: rgba(0,212,212,0.18); color: #0E7490; padding: 1px 5px; border-radius: 4px; }

/* Tabs */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 10px 14px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; }
.tab.active { color: var(--ink); border-color: var(--teal); }
.tab:hover { color: var(--ink); }

/* Misc */
.scroll-area { overflow-y: auto; }
.dot-status { width: 8px; height: 8px; border-radius: 99px; display:inline-block; }
.dot-status.green { background: var(--good); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.dot-status.amber { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.dot-status.red   { background: var(--bad);  box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.dot-status.gray  { background: #94A3B8; }

input[type=range] { accent-color: var(--teal); }

/* Animated number */
.glow-num {
  background: linear-gradient(135deg, #00D4D4, #7C8DFF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}

/* Datasheet extraction highlight */
.pdf-highlight {
  position: absolute;
  background: rgba(0,212,212,0.28);
  border: 1.5px solid #00D4D4;
  border-radius: 4px;
  animation: hl-fade 0.5s ease;
  pointer-events: none;
}
@keyframes hl-fade { from { background: rgba(0,212,212,0.6); } to { background: rgba(0,212,212,0.28); } }