/* ═══════════════════════════════════════════════════════════
   MARKET INTELLIGENCE — Styles (scoped with .mi- prefix)
   ═══════════════════════════════════════════════════════════ */

.mi-wrapper { max-width: 1700px; margin: 0 auto; }

/* Topbar */
.mi-topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 0; margin-bottom:6px; }
.mi-brand { display:flex; align-items:center; gap:10px; }
.mi-brand-icon { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#1a5566,#40916c); display:grid; place-items:center; color:#fff; }
.mi-brand-name { font-size:14px; font-weight:700; letter-spacing:-.02em; }
.mi-brand-sub { font-size:11px; color:var(--text-tertiary, #636b7d); }
.mi-topbar-right { display:flex; align-items:center; gap:8px; }

/* Pills */
.mi-pill { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:3px 10px; border-radius:20px; }
.mi-pill-ok { color:#22c55e; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); }
.mi-pill-warn { color:#f59e0b; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); }
.mi-pill-err { color:#ef4444; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); }
.mi-pdot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:mi-blink 2s infinite; }
@keyframes mi-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Buttons */
.mi-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:6px 12px; border-radius:7px; border:none; cursor:pointer; transition:all .15s; white-space:nowrap; font-family:inherit; }
.mi-btn-ghost { background:var(--surface-secondary, #f4f5f6); color:var(--text-secondary, #6b7280); border:1px solid var(--border, rgba(0,0,0,.07)); }
.mi-btn-ghost:hover { color:var(--text-primary, #111827); }
.mi-btn-sm { font-size:11px; padding:4px 9px; }
.mi-btn-primary { background:#1a5566; color:#fff; }
.mi-btn-primary:hover { background:#40916c; }
.mi-btn[disabled] { opacity:.4; pointer-events:none; }

/* Tabs */
.mi-tabs { display:flex; gap:1px; padding-bottom:0; border-bottom:1px solid var(--border, rgba(0,0,0,.07)); overflow-x:auto; margin-bottom:20px; }
.mi-tab { display:flex; align-items:center; gap:6px; padding:10px 14px; font-size:12.5px; font-weight:500; color:var(--text-tertiary, #636b7d); background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:all .15s; white-space:nowrap; font-family:inherit; }
.mi-tab:hover { color:var(--text-primary, #111827); }
.mi-tab.active { color:#1a5566; border-bottom-color:#1a5566; }
.mi-tbadge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; background:rgba(19,60,70,.08); color:#1a5566; }
.mi-tbadge-red { background:rgba(239,68,68,.12); color:#ef4444; }

/* Content & Panels */
.mi-content { }
.mi-panel { display:none; }
.mi-panel.active { display:block; }

/* Section header */
.mi-sh { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mi-sh h2 { font-size:15px; font-weight:600; }
.mi-sh p { font-size:11.5px; color:var(--text-tertiary, #636b7d); margin-top:2px; }

/* KPI Grid */
.mi-kg { display:grid; gap:13px; margin-bottom:20px; }
.mi-k6 { grid-template-columns:repeat(6,1fr); }
.mi-k4 { grid-template-columns:repeat(4,1fr); }
.mi-k3 { grid-template-columns:repeat(3,1fr); }
@media(max-width:1200px) { .mi-k6 { grid-template-columns:repeat(3,1fr); } }
@media(max-width:800px) { .mi-k6,.mi-k4,.mi-k3 { grid-template-columns:repeat(2,1fr); } }

.mi-kpi { background:var(--surface-primary, #fff); border:1px solid var(--border, rgba(0,0,0,.07)); border-radius:12px; padding:16px 18px; position:relative; overflow:hidden; transition:border-color .2s; }
.mi-kpi:hover { border-color:var(--border-hover, rgba(0,0,0,.13)); }
.mi-kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--mi-kc, #1a5566); opacity:.65; }
.mi-kpi-l { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary, #636b7d); margin-bottom:8px; }
.mi-kpi-v { font-size:26px; font-weight:700; font-family:'JetBrains Mono',monospace; letter-spacing:-.04em; line-height:1; }
.mi-kpi-v small { font-size:14px; font-weight:500; color:var(--text-tertiary, #636b7d); margin-left:2px; }

/* Grid layouts */
.mi-g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.mi-g3 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:1024px) { .mi-g2,.mi-g3 { grid-template-columns:1fr; } }

/* Card */
.mi-card { background:var(--surface-primary, #fff); border:1px solid var(--border, rgba(0,0,0,.07)); border-radius:12px; overflow:hidden; }
.mi-ch { display:flex; align-items:center; justify-content:space-between; padding:13px 17px; border-bottom:1px solid var(--border, rgba(0,0,0,.07)); }
.mi-ct { font-size:12.5px; font-weight:600; }
.mi-cs { font-size:11px; color:var(--text-tertiary, #636b7d); }
.mi-cb { padding:16px; }

/* Chart wraps */
.mi-cwrap { position:relative; height:210px; }
.mi-cwrap-lg { position:relative; height:270px; }
.mi-cwrap-sm { position:relative; height:155px; }

/* Filters */
.mi-fb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.mi-fb input, .mi-fb select { background:var(--surface-primary, #fff); border:1px solid var(--border-hover, rgba(0,0,0,.13)); color:var(--text-primary, #111827); font-family:inherit; font-size:12px; padding:6px 10px; border-radius:7px; outline:none; transition:border-color .15s; }
.mi-fb input:focus, .mi-fb select:focus { border-color:#1a5566; }
.mi-fb input { min-width:200px; }

/* Table */
.mi-tw { overflow-x:auto; }
.mi-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.mi-table th { text-align:left; padding:8px 12px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary, #636b7d); border-bottom:1px solid var(--border, rgba(0,0,0,.07)); background:var(--surface-secondary, #f4f5f6); white-space:nowrap; }
.mi-table td { padding:9px 12px; border-bottom:1px solid var(--border, rgba(0,0,0,.07)); vertical-align:middle; }
.mi-table tr:last-child td { border-bottom:none; }
.mi-table tr:hover td { background:rgba(19,60,70,.04); }
.mi-mono { font-family:'JetBrains Mono',monospace; }

/* Badges */
.mi-b { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:12px; }
.mi-bb { background:rgba(19,60,70,.08); color:#1a5566; }
.mi-bg { background:rgba(34,197,94,.1); color:#22c55e; }
.mi-br { background:rgba(239,68,68,.1); color:#ef4444; }
.mi-ba { background:rgba(245,158,11,.1); color:#f59e0b; }
.mi-bz { background:var(--surface-secondary, #f0f0f0); color:var(--text-tertiary, #636b7d); }

/* Velocity rows */
.mi-vl { display:flex; flex-direction:column; gap:9px; }
.mi-vr { display:flex; align-items:center; gap:9px; }
.mi-vrk { font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--text-tertiary, #636b7d); width:16px; text-align:center; }
.mi-vri { flex:1; min-width:0; }
.mi-vrn { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-vrc { font-size:10.5px; color:var(--text-tertiary, #636b7d); }
.mi-vrb { width:75px; height:4px; border-radius:2px; background:var(--border, rgba(0,0,0,.07)); }
.mi-vrf { height:100%; border-radius:2px; }
.mi-vrd { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; white-space:nowrap; min-width:38px; text-align:right; }

/* Feed */
.mi-feed { display:flex; flex-direction:column; }
.mi-fi { display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-bottom:1px solid var(--border, rgba(0,0,0,.07)); }
.mi-fi:last-child { border-bottom:none; }
.mi-fi-tx { flex:1; font-size:12px; line-height:1.55; }
.mi-fi-tx strong { font-weight:600; }
.mi-fi-tm { font-size:10px; color:var(--text-tertiary, #636b7d); font-family:'JetBrains Mono',monospace; white-space:nowrap; }

/* Price tracks */
.mi-ptl { display:flex; flex-direction:column; gap:12px; }
.mi-ptr { display:flex; flex-direction:column; gap:4px; }
.mi-pth { display:flex; justify-content:space-between; align-items:center; }
.mi-ptl-lbl { font-size:12px; font-weight:500; }
.mi-ptl-val { font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text-tertiary, #636b7d); }
.mi-pt-track { height:6px; border-radius:3px; background:var(--border, rgba(0,0,0,.07)); position:relative; }
.mi-pt-fill { height:100%; border-radius:3px; background:#1a5566; }

/* Heatmap */
.mi-hm { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.mi-hmc { aspect-ratio:1; border-radius:5px; display:grid; place-items:center; font-size:10px; font-weight:600; color:rgba(255,255,255,.75); }
.mi-hml { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:5px; }
.mi-hml div { text-align:center; font-size:10px; color:var(--text-tertiary, #636b7d); }

/* Competitor cards */
.mi-cg { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:13px; }
.mi-cc { background:var(--surface-primary, #fff); border:1px solid var(--border, rgba(0,0,0,.07)); border-radius:12px; padding:15px 17px; transition:border-color .2s; }
.mi-cc:hover { border-color:#1a5566; }
.mi-cch { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mi-cca { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.mi-ccn { font-size:13px; font-weight:600; }
.mi-ccu { font-size:10.5px; color:var(--text-tertiary, #636b7d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mi-ccs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mi-csv { font-size:16px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.mi-csl { font-size:10px; color:var(--text-tertiary, #636b7d); margin-top:1px; }
.mi-ccf { margin-top:10px; padding-top:10px; border-top:1px solid var(--border, rgba(0,0,0,.07)); font-size:10.5px; color:var(--text-tertiary, #636b7d); display:flex; align-items:center; gap:5px; }

/* Loader / Empty */
.mi-loader { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; gap:12px; color:var(--text-tertiary, #636b7d); font-size:13px; }
.mi-spinner { width:26px; height:26px; border:2px solid var(--border, rgba(0,0,0,.07)); border-top-color:#1a5566; border-radius:50%; animation:mi-spin .7s linear infinite; }
@keyframes mi-spin { to { transform:rotate(360deg); } }
.mi-empty { text-align:center; padding:36px; color:var(--text-tertiary, #636b7d); font-size:13px; }

/* Pagination */
.mi-pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:12px; color:var(--text-tertiary, #636b7d); }