/* ============================================================
   BLC Marketing Platform — Design layer over Bootstrap 5.3
   ============================================================ */

:root{
  /* Brand */
  --blc-blue:   #3E68FF;
  --blc-blue-rgb: 62,104,255;
  --blc-green:  #04CD9F;
  --blc-green-rgb: 4,205,159;
  --blc-yellow: #FFCD43;
  --blc-yellow-rgb: 255,205,67;

  /* App scale tokens (overridden per direction) */
  --radius: .75rem;
  --radius-sm: .5rem;
  --radius-lg: 1rem;
  --card-shadow: 0 1px 2px rgba(16,19,32,.04), 0 1px 3px rgba(16,19,32,.06);
  --card-border: 1px solid var(--bs-border-color);
  --sidebar-w: 274px;

  /* Primary mapped to BLC blue by default */
  --app-primary: var(--blc-blue);
  --app-primary-rgb: var(--blc-blue-rgb);
}

/* ---- Bootstrap variable remap (light) ---- */
[data-bs-theme="light"]{
  --bs-body-bg: #f5f7fb;
  --bs-body-color: #1f2533;
  --bs-secondary-color: #6b7385;
  --bs-tertiary-color: #9aa2b3;
  --bs-border-color: #e6e9f0;
  --bs-border-color-translucent: rgba(16,19,32,.08);
  --bs-emphasis-color: #0e1320;
  --bs-heading-color: #0e1320;
}

[data-bs-theme="dark"]{
  --bs-body-bg: #0b0e17;
  --bs-body-color: #c7cdda;
  --bs-secondary-color: #8a92a6;
  --bs-tertiary-color: #5b6478;
  --bs-border-color: #1d2331;
  --bs-border-color-translucent: rgba(255,255,255,.08);
  --bs-emphasis-color: #f3f5fa;
  --bs-heading-color: #f3f5fa;
  --card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
}

*{ -webkit-font-smoothing: antialiased; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  letter-spacing: -0.01em;
}

/* Primary remap */
.text-primary{ color: var(--app-primary) !important; }
.bg-primary{ background-color: var(--app-primary) !important; }
.btn-primary{
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app-primary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app-primary) 88%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--app-primary) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--app-primary) 80%, #000);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  box-shadow: 0 1px 2px rgba(var(--app-primary-rgb),.35);
}
.btn-outline-primary{
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--app-primary) 40%, transparent);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary);
  --bs-btn-active-border-color: var(--app-primary);
}
.form-check-input:checked{ background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-input:focus{ border-color: color-mix(in srgb, var(--app-primary) 50%, transparent); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb),.18); }
.form-control:focus,.form-select:focus{ border-color: color-mix(in srgb, var(--app-primary) 55%, transparent); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb),.14); }
a{ color: var(--app-primary); }

/* ============================================================
   Layout
   ============================================================ */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: #0b0e17;
  border-right: 1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
  z-index: 1030;
}
.sidebar-head{
  padding: 20px 22px 16px;
  display:flex; align-items:center; gap:10px;
}
.sidebar-head img{ height: 26px; width:auto; }
.sidebar-head .env-badge{
  margin-left:auto; font-size:.62rem; font-weight:600; letter-spacing:.04em;
  color:#8a92a6; border:1px solid rgba(255,255,255,.12); border-radius:6px;
  padding:2px 7px; text-transform:uppercase;
}

.sidebar-search{ padding: 4px 16px 12px; }
.sidebar-search .form-control{
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  color:#c7cdda; font-size:.84rem;
}
.sidebar-search .form-control::placeholder{ color:#5b6478; }
.sidebar-search .input-group-text{
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  border-right:0; color:#5b6478;
}

.nav-scroll{ flex:1; overflow-y:auto; padding: 4px 12px 16px; }
.nav-scroll::-webkit-scrollbar{ width:8px; }
.nav-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.08); border-radius:8px; }

.nav-section{ margin: 14px 8px 6px; }
.nav-section-label{
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#5b6478; padding: 0 6px;
}
.nav-link-app{
  display:flex; align-items:center; gap:11px;
  padding: 9px 12px; border-radius: 9px;
  color:#aeb6c7; font-size:.875rem; font-weight:500;
  text-decoration:none; cursor:pointer; margin-bottom:2px;
  transition: background .14s, color .14s;
  position:relative;
}
.nav-link-app i{ font-size:1.05rem; width:20px; text-align:center; color:#7e879b; transition: color .14s; }
.nav-link-app:hover{ background: rgba(255,255,255,.05); color:#eef1f7; }
.nav-link-app:hover i{ color:#aeb6c7; }
.nav-link-app .badge-soon{
  margin-left:auto; font-size:.6rem; font-weight:600; letter-spacing:.02em;
  color:#7e879b; background: rgba(255,255,255,.06); border-radius:5px; padding:2px 6px;
}
.nav-link-app .count-pill{
  margin-left:auto; font-size:.68rem; font-weight:700;
  color:#0b0e17; background: var(--blc-yellow); border-radius:20px; padding:1px 8px;
}
.nav-link-app.active{
  background: linear-gradient(90deg, rgba(var(--app-primary-rgb),.20), rgba(var(--app-primary-rgb),.04));
  color:#fff;
}
.nav-link-app.active i{ color: #fff; }
.nav-link-app.active::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background: var(--app-primary);
}

.sidebar-foot{ border-top:1px solid rgba(255,255,255,.06); padding: 12px 14px; }
.user-chip{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; cursor:pointer;
  transition: background .14s;
}
.user-chip:hover{ background: rgba(255,255,255,.05); }
.user-chip .avatar{ flex:0 0 auto; }
.user-chip .u-name{ color:#eef1f7; font-size:.83rem; font-weight:600; line-height:1.15; }
.user-chip .u-role{ color:#7e879b; font-size:.72rem; }
.user-chip .bi-chevron-expand{ margin-left:auto; color:#5b6478; font-size:.9rem; }

/* Main */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  position: sticky; top:0; z-index:1020;
  background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 12px 28px;
  display:flex; align-items:center; gap:16px;
}
.topbar .page-eyebrow{ font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--bs-tertiary-color); }
.topbar .page-title{ font-size:1.06rem; font-weight:700; color: var(--bs-heading-color); line-height:1.1; }
.topbar .icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-secondary-color);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem;
  cursor:pointer; transition: all .14s; position:relative;
}
.topbar .icon-btn:hover{ color: var(--bs-emphasis-color); border-color: color-mix(in srgb, var(--bs-secondary-color) 40%, transparent); }
.topbar .icon-btn .dot{
  position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%;
  background: var(--blc-green); border:2px solid var(--bs-body-bg);
}

.content{ padding: 28px; max-width: 1480px; width:100%; }

/* ============================================================
   Cards & surfaces
   ============================================================ */
.surface{
  background: var(--bs-body-bg);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
[data-bs-theme="light"] .surface{ background:#fff; }
[data-bs-theme="dark"] .surface{ background:#11151f; }

.section-card{ padding: 22px; }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.card-head .ch-title{ font-size:1rem; font-weight:700; color: var(--bs-heading-color); }
.card-head .ch-sub{ font-size:.8rem; color: var(--bs-secondary-color); }

/* KPI cards */
.kpi{
  padding: 18px 20px; border-radius: var(--radius);
  border: var(--card-border); box-shadow: var(--card-shadow);
  background: var(--bs-body-bg); position:relative; overflow:hidden;
}
[data-bs-theme="light"] .kpi{ background:#fff; }
[data-bs-theme="dark"] .kpi{ background:#11151f; }
.kpi .kpi-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kpi .kpi-icon{
  width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; flex:0 0 auto;
}
.kpi .kpi-label{ font-size:.8rem; color: var(--bs-secondary-color); font-weight:500; }
.kpi .kpi-value{ font-size:1.85rem; font-weight:750; color: var(--bs-heading-color); line-height:1; letter-spacing:-.02em; }
.kpi .kpi-foot{ display:flex; align-items:center; gap:6px; margin-top:9px; font-size:.78rem; }
.trend-up{ color: var(--blc-green); font-weight:600; }
.trend-down{ color:#f0526b; font-weight:600; }
.kpi .kpi-foot .muted{ color: var(--bs-tertiary-color); font-weight:400; }

.ic-blue{ background: rgba(var(--blc-blue-rgb),.12); color: var(--blc-blue); }
.ic-green{ background: rgba(var(--blc-green-rgb),.14); color: var(--blc-green); }
.ic-yellow{ background: rgba(var(--blc-yellow-rgb),.18); color: #c79412; }
[data-bs-theme="dark"] .ic-yellow{ color: var(--blc-yellow); }
.ic-slate{ background: rgba(120,130,150,.14); color: var(--bs-secondary-color); }

/* Channel chips (Meta / LinkedIn / Pipedrive) */
.chan{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
  padding: 2px 8px 2px 6px; border-radius: 20px; line-height:1.5;
  border:1px solid transparent;
}
.chan i{ font-size:.78rem; }
.chan.ok{ background: rgba(var(--blc-green-rgb),.12); color:#06a583; border-color: rgba(var(--blc-green-rgb),.2); }
[data-bs-theme="dark"] .chan.ok{ color: var(--blc-green); }
.chan.fail{ background: rgba(240,82,107,.1); color:#e0405a; border-color: rgba(240,82,107,.2); }
.chan.off{ background: var(--bs-secondary-bg); color: var(--bs-tertiary-color); border-color: var(--bs-border-color); }

/* Status pills */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:20px; }
.pill .dot{ width:7px; height:7px; border-radius:50%; }
.pill-ok{ background: rgba(var(--blc-green-rgb),.12); color:#06a583; } .pill-ok .dot{ background: var(--blc-green); }
[data-bs-theme="dark"] .pill-ok{ color: var(--blc-green); }
.pill-warn{ background: rgba(var(--blc-yellow-rgb),.2); color:#b8860b; } .pill-warn .dot{ background: var(--blc-yellow); }
[data-bs-theme="dark"] .pill-warn{ color: var(--blc-yellow); }
.pill-err{ background: rgba(240,82,107,.1); color:#e0405a; } .pill-err .dot{ background:#f0526b; }
.pill-muted{ background: var(--bs-secondary-bg); color: var(--bs-secondary-color); } .pill-muted .dot{ background: var(--bs-tertiary-color); }

/* Tables */
.table-app{ margin:0; }
.table-app thead th{
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--bs-tertiary-color); border-bottom:1px solid var(--bs-border-color);
  padding: 11px 14px; white-space:nowrap; background:transparent;
}
.table-app tbody td{
  padding: 13px 14px; vertical-align:middle; font-size:.86rem;
  border-bottom:1px solid var(--bs-border-color); color: var(--bs-body-color);
}
.table-app tbody tr{ transition: background .12s; }
[data-bs-theme="light"] .table-app tbody td{ background:#fff; }
[data-bs-theme="light"] .table-app tbody tr:hover td{ background: color-mix(in srgb, var(--app-primary) 7%, #fff); }
[data-bs-theme="dark"] .table-app tbody td{ background:#11151f; }
[data-bs-theme="dark"] .table-app tbody tr:hover td{ background: color-mix(in srgb, var(--app-primary) 12%, #11151f); }
.table-app tbody td{ transition: background .12s, box-shadow .12s; }
.table-app tbody tr:hover td:first-child{ box-shadow: inset 3px 0 0 var(--app-primary); }
.table-app tbody tr:last-child td{ border-bottom:0; }
.cell-strong{ font-weight:600; color: var(--bs-heading-color); }
.cell-muted{ color: var(--bs-secondary-color); font-size:.8rem; }
.utm-tag{
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.72rem;
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
  padding: 1px 7px; border-radius:5px; border:1px solid var(--bs-border-color);
}

/* Avatars */
.avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:#fff; letter-spacing:.01em;
  background: var(--app-primary); overflow:hidden;
}
.avatar.lg{ width:44px; height:44px; font-size:.95rem; }
.avatar.xl{ width:64px; height:64px; font-size:1.3rem; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-row{ display:flex; align-items:center; gap:11px; }
.avatar-row .ar-name{ font-weight:600; color: var(--bs-heading-color); font-size:.86rem; line-height:1.2; }
.avatar-row .ar-sub{ color: var(--bs-secondary-color); font-size:.76rem; }

/* Segmented / filter bar */
.filterbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.seg{ display:inline-flex; background: var(--bs-secondary-bg); border-radius: 10px; padding:3px; gap:2px; border:1px solid var(--bs-border-color); }
.seg button{
  border:0; background:transparent; color: var(--bs-secondary-color);
  font-size:.8rem; font-weight:600; padding:5px 13px; border-radius:7px; cursor:pointer; transition: all .14s;
}
.seg button.active{ background: var(--bs-body-bg); color: var(--bs-heading-color); box-shadow: var(--card-shadow); }
[data-bs-theme="light"] .seg button.active{ background:#fff; }

.icon-btn-ghost{
  width:34px; height:34px; border-radius:8px; border:1px solid transparent; background:transparent;
  color: var(--bs-tertiary-color); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .13s; font-size:1rem;
}
.icon-btn-ghost:hover{ background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }
.icon-btn-ghost.danger:hover{ background: rgba(240,82,107,.1); color:#e0405a; }

/* ============================================================
   Charts (inline SVG)
   ============================================================ */
.chart-legend{ display:flex; flex-wrap:wrap; gap:16px; }
.chart-legend .lg{ display:flex; align-items:center; gap:7px; font-size:.78rem; color: var(--bs-secondary-color); }
.chart-legend .lg .sw{ width:10px; height:10px; border-radius:3px; }
.donut-center{ font-size:1.5rem; font-weight:750; fill: var(--bs-heading-color); }
.donut-sub{ font-size:.66rem; fill: var(--bs-tertiary-color); }

.src-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.src-row .src-name{ width:96px; font-size:.82rem; font-weight:600; color: var(--bs-heading-color); display:flex; align-items:center; gap:7px; }
.src-row .src-bar{ flex:1; height:8px; border-radius:6px; background: var(--bs-secondary-bg); overflow:hidden; }
.src-row .src-bar > span{ display:block; height:100%; border-radius:6px; }
.src-row .src-val{ width:96px; text-align:right; font-size:.8rem; color: var(--bs-secondary-color); }
.src-row .src-val b{ color: var(--bs-heading-color); }

/* Empty states */
.empty-state{
  padding: 64px 24px; text-align:center; border-radius: var(--radius);
  border: 1px dashed var(--bs-border-color); background: var(--bs-body-bg);
}
[data-bs-theme="light"] .empty-state{ background:#fff; }
[data-bs-theme="dark"] .empty-state{ background:#11151f; }
.empty-state .es-icon{
  width:60px; height:60px; border-radius:16px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  background: rgba(var(--app-primary-rgb),.1); color: var(--app-primary);
}
.empty-state h3{ font-size:1.1rem; font-weight:700; color: var(--bs-heading-color); margin-bottom:8px; }
.empty-state p{ color: var(--bs-secondary-color); font-size:.88rem; max-width:420px; margin:0 auto 18px; }
.soon-tag{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--blc-yellow); background: rgba(var(--blc-yellow-rgb),.14); padding:4px 11px; border-radius:20px; }
[data-bs-theme="light"] .soon-tag{ color:#b8860b; }

/* Permission matrix */
.perm-table{ width:100%; border-collapse: separate; border-spacing:0; }
.perm-table th, .perm-table td{ padding: 11px 12px; border-bottom:1px solid var(--bs-border-color); }
.perm-table thead th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--bs-tertiary-color); font-weight:700; text-align:center; }
.perm-table thead th:first-child{ text-align:left; }
.perm-table tbody td{ text-align:center; }
.perm-table tbody td:first-child{ text-align:left; }
.perm-feature{ display:flex; align-items:center; gap:10px; }
.perm-feature i{ width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background: rgba(var(--app-primary-rgb),.1); color: var(--app-primary); font-size:.95rem; }
.perm-feature .pf-name{ font-weight:600; color: var(--bs-heading-color); font-size:.86rem; }
.perm-feature .pf-sub{ font-size:.72rem; color: var(--bs-tertiary-color); }
.perm-col-all{ background: color-mix(in srgb, var(--app-primary) 5%, transparent); }

/* Tabs in modal */
.seg-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--bs-border-color); margin-bottom:4px; }
.seg-tabs button{ border:0; background:transparent; padding:11px 16px; font-size:.86rem; font-weight:600; color: var(--bs-secondary-color); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.seg-tabs button.active{ color: var(--app-primary); border-bottom-color: var(--app-primary); }

/* Direction switcher swatches */
.dir-opt{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.dir-opt:hover{ background: var(--bs-secondary-bg); }
.dir-opt .dir-sw{ display:flex; gap:3px; }
.dir-opt .dir-sw span{ width:13px; height:24px; border-radius:4px; }
.dir-opt.active{ background: color-mix(in srgb, var(--app-primary) 8%, transparent); }
.dir-opt .dir-name{ font-weight:600; font-size:.85rem; color: var(--bs-heading-color); }
.dir-opt .dir-desc{ font-size:.74rem; color: var(--bs-secondary-color); }
.dir-opt .bi-check2{ margin-left:auto; color: var(--app-primary); opacity:0; }
.dir-opt.active .bi-check2{ opacity:1; }

/* ============================================================
   DIRECTION SKINS
   ============================================================ */

/* A — Clarté (default): blue primary, hairline, restrained */
body.dir-clarte{ --app-primary: var(--blc-blue); --app-primary-rgb: var(--blc-blue-rgb); --radius:.75rem; }

/* B — Énergie BLC: brand-forward, tinted KPIs, gradient header */
body.dir-energie{ --app-primary: var(--blc-blue); --app-primary-rgb: var(--blc-blue-rgb); --radius:.85rem; }
body.dir-energie .kpi{ border:0; }
body.dir-energie .kpi.k-1{ background: linear-gradient(135deg, rgba(var(--blc-blue-rgb),.14), rgba(var(--blc-blue-rgb),.03)); }
body.dir-energie .kpi.k-2{ background: linear-gradient(135deg, rgba(var(--blc-green-rgb),.16), rgba(var(--blc-green-rgb),.03)); }
body.dir-energie .kpi.k-3{ background: linear-gradient(135deg, rgba(var(--blc-yellow-rgb),.22), rgba(var(--blc-yellow-rgb),.04)); }
body.dir-energie .kpi.k-4{ background: linear-gradient(135deg, rgba(120,130,150,.14), rgba(120,130,150,.03)); }
[data-bs-theme="dark"] body.dir-energie .kpi.k-1{ background: linear-gradient(135deg, rgba(var(--blc-blue-rgb),.22), rgba(17,21,31,.4)); }
[data-bs-theme="dark"] body.dir-energie .kpi.k-2{ background: linear-gradient(135deg, rgba(var(--blc-green-rgb),.2), rgba(17,21,31,.4)); }
[data-bs-theme="dark"] body.dir-energie .kpi.k-3{ background: linear-gradient(135deg, rgba(var(--blc-yellow-rgb),.18), rgba(17,21,31,.4)); }
[data-bs-theme="dark"] body.dir-energie .kpi.k-4{ background: linear-gradient(135deg, rgba(120,130,150,.16), rgba(17,21,31,.4)); }
body.dir-energie .topbar{
  background: linear-gradient(100deg, color-mix(in srgb, var(--bs-body-bg) 86%, transparent), color-mix(in srgb, var(--bs-body-bg) 86%, transparent));
}
body.dir-energie .kpi .kpi-value{ font-weight:800; }

/* C — Contraste: green primary, large radius, elevated, bigger type */
body.dir-contraste{
  --app-primary: var(--blc-green); --app-primary-rgb: var(--blc-green-rgb);
  --radius: 1.1rem; --radius-sm:.7rem;
  --card-shadow: 0 4px 12px rgba(16,19,32,.06), 0 2px 4px rgba(16,19,32,.04);
}
[data-bs-theme="dark"] body.dir-contraste{ --card-shadow: 0 6px 20px rgba(0,0,0,.4); }
body.dir-contraste .kpi .kpi-value{ font-size:2.05rem; }
body.dir-contraste .nav-link-app.active{ background: var(--app-primary); color:#06241d; }
body.dir-contraste .nav-link-app.active i{ color:#06241d; }
body.dir-contraste .nav-link-app.active::before{ display:none; }
body.dir-contraste .kpi{ border:0; }
body.dir-contraste .seg button.active{ box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/* Responsive */
@media (max-width: 1100px){
  .sidebar{ position:fixed; left:0; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  body.nav-open .sidebar{ transform: translateX(0); }
  .nav-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.4); z-index:1025; opacity:0; pointer-events:none; transition:opacity .2s; }
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
}
@media (min-width:1101px){ .nav-backdrop{ display:none; } .topbar .menu-toggle{ display:none; } }
@media (max-width: 720px){
  .content{ padding:18px; }
  .topbar{ padding:10px 16px; }
}

/* Conversion detail expand */
.conv-row:hover td{ background: var(--bs-tertiary-bg); }
.conv-detail-list{ margin:0; padding:.5rem 0 .25rem 0; list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.conv-detail-list li{ font-size:.85rem; }
.conv-detail-label{ font-weight:600; color:var(--bs-secondary-color); margin-right:.3rem; }
.conv-detail-val{ color:var(--bs-body-color); word-break:break-all; }

/* Column sort */
.col-sort-row{ padding:.6rem 1rem; border:1px solid var(--bs-border-color); border-radius:8px; background:var(--bs-body-bg); }
.col-sort-row[draggable]:hover{ border-color:var(--app-primary); }
.col-sort-handle{ font-size:1rem; }

/* Spin animation */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display:inline-block; animation: spin .7s linear infinite; }