/* CRM Bradata - Design tokens */
:root {
  --b-primary: 216 92% 14%;
  --b-primary-600: 216 72% 22%;
  --b-primary-500: 216 56% 34%;
  --b-accent: 18 95% 55%;
  --b-accent-light: 22 100% 62%;
  --b-accent-soft: 22 100% 96%;

  --bg: 220 20% 98%;
  --bg-2: 0 0% 100%;
  --surface: 0 0% 100%;
  --surface-1: 0 0% 100%;
  --surface-2: 220 20% 97%;
  --surface-3: 220 16% 94%;
  --sidebar-bg: 216 92% 11%;
  --sidebar-fg: 220 20% 96%;
  --sidebar-muted: 220 15% 70%;

  --fg: 216 40% 12%;
  --fg-muted: 216 12% 42%;
  --fg-faint: 216 10% 58%;

  --border: 220 16% 90%;
  --border-strong: 220 14% 82%;

  --success: 152 68% 36%;
  --success-soft: 152 68% 94%;
  --warning: 38 92% 50%;
  --warning-soft: 38 92% 94%;
  --danger: 0 74% 52%;
  --danger-soft: 0 74% 96%;
  --info: 210 90% 48%;
  --info-soft: 210 90% 95%;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --r-md: 12px;

  --shadow-sm: 0 1px 2px hsl(216 40% 12% / .05);
  --shadow: 0 4px 12px -2px hsl(216 40% 12% / .08), 0 1px 2px hsl(216 40% 12% / .04);
  --shadow-lg: 0 12px 32px -6px hsl(216 40% 12% / .12), 0 2px 8px hsl(216 40% 12% / .06);

  --row-h: 40px;
  --card-p: 20px;
  --gap: 16px;
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg: 218 35% 7%;
  --bg-2: 220 30% 9%;
  --surface: 220 25% 11%;
  --surface-1: 220 25% 11%;
  --surface-2: 220 24% 14%;
  --surface-3: 220 22% 17%;
  --sidebar-bg: 220 35% 6%;
  --sidebar-fg: 220 20% 92%;
  --sidebar-muted: 220 12% 58%;

  --fg: 220 15% 94%;
  --fg-muted: 220 10% 68%;
  --fg-faint: 220 8% 52%;

  --border: 220 20% 18%;
  --border-strong: 220 18% 25%;

  --success-soft: 152 40% 14%;
  --warning-soft: 38 50% 14%;
  --danger-soft: 0 50% 16%;
  --info-soft: 210 50% 14%;

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / .4);
  --shadow: 0 4px 12px -2px hsl(0 0% 0% / .4);
  --shadow-lg: 0 12px 32px -6px hsl(0 0% 0% / .5);
}

[data-density="compact"] { --row-h: 34px; --card-p: 14px; --gap: 12px; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: hsl(var(--fg)); background: hsl(var(--bg)); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--border-strong)); border-radius: 10px; border: 2px solid hsl(var(--bg)); }

.app, .app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: hsl(var(--bg)); }
.app[data-collapsed="true"], .app-shell.collapsed { grid-template-columns: 72px 1fr; }

.sidebar { background: hsl(var(--sidebar-bg)); color: hsl(var(--sidebar-fg)); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }

.main, .main-wrap { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; background: hsl(var(--bg) / .85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid hsl(var(--border)); min-height: 62px; }
.content, .main-content { padding: 28px; min-width: 0; flex: 1; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; }
.page-sub { color: hsl(var(--fg-muted)); font-size: 13.5px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; height: 36px; border-radius: 9px; font-weight: 600; font-size: 13px; transition: .15s; border: 1px solid transparent; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: hsl(var(--b-primary)); color: white; }
.btn-primary:hover { background: hsl(var(--b-primary-500)); }
.btn-accent { background: hsl(var(--b-accent)); color: white; box-shadow: 0 6px 14px -6px hsl(var(--b-accent) / .55); }
.btn-accent:hover { background: hsl(var(--b-accent-light)); }
.btn-ghost { background: hsl(var(--surface)); color: hsl(var(--fg)); border-color: hsl(var(--border)); }
.btn-ghost:hover { background: hsl(var(--surface-2)); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; }

.icon-btn { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: hsl(var(--fg-muted)); border: 1px solid transparent; }
.icon-btn:hover { background: hsl(var(--surface-2)); color: hsl(var(--fg)); }

.card { background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; }
.card-p { padding: var(--card-p); }
.card-head { padding: 16px var(--card-p); border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title { font-size: 14px; font-weight: 700; }
.card-sub { font-size: 12px; color: hsl(var(--fg-muted)); margin-top: 2px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.kpi { background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; overflow: hidden; }
.kpi .label { font-size: 12px; color: hsl(var(--fg-muted)); font-weight: 500; }
.kpi .value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; margin-top: 8px; padding: 3px 7px; border-radius: 999px; }
.kpi .delta.up { color: hsl(var(--success)); background: hsl(var(--success-soft)); }
.kpi .delta.down { color: hsl(var(--danger)); background: hsl(var(--danger-soft)); }
.kpi .foot { margin-top: 8px; font-size: 11.5px; color: hsl(var(--fg-faint)); }
.kpi .spark { position: absolute; right: 14px; top: 14px; }
.kpi .glyph { position: absolute; right: -16px; bottom: -16px; width: 80px; height: 80px; border-radius: 999px; background: linear-gradient(135deg, hsl(var(--b-accent) / .08), transparent); pointer-events: none; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: hsl(var(--surface-2)); color: hsl(var(--fg-muted)); border: 1px solid hsl(var(--border)); }
.chip.accent { background: hsl(var(--b-accent-soft)); color: hsl(var(--b-accent)); border-color: hsl(var(--b-accent) / .25); }
.chip.success { background: hsl(var(--success-soft)); color: hsl(var(--success)); border-color: hsl(var(--success) / .25); }
.chip.warn { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); border-color: hsl(var(--warning) / .3); }
.chip.danger { background: hsl(var(--danger-soft)); color: hsl(var(--danger)); border-color: hsl(var(--danger) / .25); }
.chip.info { background: hsl(var(--info-soft)); color: hsl(var(--info)); border-color: hsl(var(--info) / .25); }
.chip.primary { background: hsl(var(--b-primary) / .08); color: hsl(var(--b-primary-500)); border-color: hsl(var(--b-primary) / .18); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table thead th { text-align: left; padding: 10px 14px; background: hsl(var(--surface-2)); color: hsl(var(--fg-muted)); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.table tbody td { padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }

.progress { width: 100%; height: 6px; background: hsl(var(--surface-3)); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: hsl(var(--b-accent)); border-radius: 999px; }

.score-ring { position: relative; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; }

.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.kanban-col { flex: 0 0 320px; background: hsl(var(--surface-2)); border-radius: var(--radius-lg); border: 1px solid hsl(var(--border)); display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.kanban-col-head { padding: 14px 14px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid hsl(var(--border)); }
.kanban-col-head .col-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.kanban-col-head .col-title .dot { width: 8px; height: 8px; border-radius: 50%; }
.kanban-col-head .col-count { font-size: 12px; color: hsl(var(--fg-muted)); font-weight: 600; }
.kanban-col-head .col-sum { font-size: 11px; color: hsl(var(--fg-faint)); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kanban-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.deal-card { background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 12px 13px; cursor: grab; transition: .15s; }
.deal-card:hover { box-shadow: var(--shadow); border-color: hsl(var(--b-accent) / .35); transform: translateY(-1px); }
.deal-card .deal-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.deal-card .deal-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: hsl(var(--fg-muted)); }
.deal-card .deal-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: hsl(var(--fg-faint)); }
.deal-card .deal-value { font-weight: 700; color: hsl(var(--fg)); }
.deal-card.dragging { opacity: .4; }
.kanban-body.drop { background: hsl(var(--b-accent) / .08); border-radius: var(--radius); }

.divider { height: 1px; background: hsl(var(--border)); margin: 16px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-dash { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); }
@media (max-width: 1100px) { .grid-dash, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.muted { color: hsl(var(--fg-muted)); }
.faint { color: hsl(var(--fg-faint)); }
.mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

.filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); margin-bottom: 16px; }
.filter-select, .filter-input { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--surface)); color: hsl(var(--fg)); font-size: 13px; outline: none; }

.segment-ctrl { display: inline-flex; background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); border-radius: 9px; padding: 3px; gap: 2px; }
.segment-ctrl button { padding: 6px 12px; font-size: 12px; font-weight: 600; color: hsl(var(--fg-muted)); border-radius: 6px; }
.segment-ctrl button.active { background: hsl(var(--surface)); color: hsl(var(--fg)); box-shadow: var(--shadow-sm); }

.timeline-event { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px dashed hsl(var(--border)); }
.timeline-event:last-child { border-bottom: 0; }
.timeline-event .te-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); color: hsl(var(--fg-muted)); }
.timeline-event .te-body { font-size: 13px; }
.timeline-event .te-time { font-size: 11.5px; color: hsl(var(--fg-faint)); white-space: nowrap; }

.halo { position: relative; }
.halo::before { content: ''; position: absolute; inset: -40px -60px auto auto; width: 200px; height: 200px; background: radial-gradient(circle, hsl(var(--b-accent) / .18), transparent 60%); pointer-events: none; }