/* KOLflow — Global styles */

:root {
  --brand-50:  #f5f3ff;
  --brand-100: #ede9fe;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
}

html, body, #app { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* Brand gradient */
.bg-brand-gradient {
  background-image: linear-gradient(135deg, #6d28d9 0%, #4f46e5 50%, #2563eb 100%);
}
.bg-brand-gradient-soft {
  background-image: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%);
}
.text-gradient {
  background-image: linear-gradient(90deg, #7c3aed, #2563eb);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Tier badges */
.tier-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.tier-T1 { background: #ede9fe; color: #6d28d9; }
.tier-T2 { background: #dbeafe; color: #1d4ed8; }
.tier-T3 { background: #ccfbf1; color: #0f766e; }
.tier-T4 { background: #f1f5f9; color: #475569; }

/* Sidebar */
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .85rem; border-radius: .55rem;
  color: #cbd5e1; font-size: 14px; font-weight: 500;
  transition: all .15s ease;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(124,58,237,.6);
}
.sidebar-link i { width: 16px; text-align: center; }

/* Cards */
.card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.card-hover { transition: all .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(15,23,42,.15); }

/* Stat tile */
.stat-tile {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 1.1rem 1.2rem;
}
.stat-tile::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, #7c3aed, #2563eb);
}

/* Inputs */
.input {
  display:block; width:100%;
  padding:.55rem .8rem; border:1px solid #cbd5e1;
  border-radius:.5rem; background:#fff; font-size:14px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.15); }

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:.5rem;
  font-weight:600; font-size:14px; transition: all .15s;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: linear-gradient(135deg,#7c3aed,#4f46e5); color:#fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(124,58,237,.6); }
.btn-secondary { background:#fff; color:#334155; border-color:#cbd5e1; }
.btn-secondary:hover { background:#f8fafc; }
.btn-ghost { background:transparent; color:#475569; }
.btn-ghost:hover { background:#f1f5f9; }

/* Pills */
.pill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background:#f1f5f9; color:#334155;
}
.pill-green { background:#dcfce7; color:#166534; }
.pill-amber { background:#fef3c7; color:#92400e; }
.pill-red   { background:#fee2e2; color:#991b1b; }
.pill-blue  { background:#dbeafe; color:#1d4ed8; }

/* Metric chips for KOL detail */
.metric-card {
  border-radius: 14px; padding: 1rem 1.1rem; color:#fff;
  position: relative; overflow:hidden;
  box-shadow: 0 8px 18px -10px rgba(15,23,42,.4);
}
.metric-card .metric-icon {
  position:absolute; right:.75rem; top:.75rem; opacity:.35; font-size:28px;
}
.metric-card .metric-value { font-size: 28px; font-weight: 800; line-height:1; }
.metric-card .metric-label { font-size: 12px; font-weight:600; opacity:.9; letter-spacing:.04em; text-transform:uppercase; }
.metric-card .metric-sub   { font-size: 11px; opacity:.85; margin-top:.4rem; }

/* Table */
table.kol-table { width: 100%; border-collapse: separate; border-spacing: 0; }
table.kol-table th {
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#64748b;
  padding:.65rem .85rem; background:#f8fafc; border-bottom:1px solid #e2e8f0;
}
table.kol-table td {
  padding:.7rem .85rem; font-size:14px; border-bottom:1px solid #f1f5f9;
  vertical-align: middle;
}
table.kol-table tbody tr { transition: background .12s; }
table.kol-table tbody tr:hover { background:#faf5ff; cursor:pointer; }

/* Avatar */
.avatar {
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  flex-shrink:0;
}

/* Map */
#world-map { height: 520px; width: 100%; border-radius: 14px; }
.kol-map-pin {
  width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(15,23,42,.25);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Animations */
@keyframes fadeUp { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }
.fade-up { animation: fadeUp .25s ease both; }

/* Responsive sidebar */
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
}

/* Progress */
.progress-bar { height:6px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.progress-bar > span { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg,#7c3aed,#2563eb); }

/* Range slider color */
input[type=range] { accent-color: #7c3aed; }

/* Hide leaflet attribution slightly */
.leaflet-control-attribution { font-size: 10px; }