/* ============================================================
   LUIJO — Luigi avec un J
   Component styles built on top of tokens.css
   ============================================================ */

/* ============================================================
   Tweak: density
   ============================================================ */
html[data-density="compact"] .lj-table tbody td { padding: 9px 14px; }
html[data-density="compact"] .lj-table thead th { padding: 9px 14px; }
html[data-density="compact"] .lj-card { padding: 14px; }
html[data-density="compact"] .lj-stat__val { font-size: 26px; }
html[data-density="compact"] .lj-page { padding: 18px 22px; }

* { box-sizing: border-box; }

/* ============================================================
   App shell: sidebar (burgundy) + main (cream)
   ============================================================ */

.lj-app {
  display: grid;
  grid-template-columns: 248px 1fr;
  width: 1440px;
  height: 900px;
  background: var(--bg-canvas);
  font-family: var(--font-body);
  color: var(--fg-1);
  overflow: hidden;
  position: relative;
}
.lj-app--client {
  grid-template-columns: 224px 1fr;
}

/* ---------- Sidebar (burgundy) ---------- */
.lj-side {
  background: var(--luijo-burgundy);
  color: var(--luijo-cream);
  display: flex;
  flex-direction: column;
  padding: 24px 16px 20px 20px;
  position: relative;
  overflow: hidden;
}
.lj-side__bg {
  position: absolute; inset: auto -40px -60px auto;
  width: 240px; height: 240px;
  opacity: 0.06;
  pointer-events: none;
}
.lj-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 18px;
  position: relative; z-index: 1;
}
.lj-brand__mark {
  width: 32px; height: 32px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px;
  border-radius: 7px;
  overflow: hidden;
}
.lj-brand__mark span { background: var(--luijo-cream); border-radius: 1.5px; }
.lj-brand__mark span:nth-child(3) { background: var(--luijo-orange); }
.lj-brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--luijo-cream);
  line-height: 1;
}
.lj-brand__name em {
  font-style: normal; color: var(--luijo-orange);
}
.lj-brand__sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--luijo-cream) 60%, transparent);
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 600;
}

.lj-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; position: relative; z-index: 1; }
.lj-nav__group { margin-top: 22px; }
.lj-nav__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--luijo-cream) 45%, transparent);
  padding: 0 10px 8px;
  font-family: var(--font-display);
  font-weight: 700;
}
.lj-nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--luijo-cream) 80%, transparent);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lj-nav__item:hover {
  background: color-mix(in srgb, var(--luijo-cream) 8%, transparent);
  color: var(--luijo-cream);
}
.lj-nav__item--active {
  background: color-mix(in srgb, var(--luijo-cream) 12%, transparent);
  color: var(--luijo-cream);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--luijo-orange);
}
.lj-nav__item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lj-nav__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--luijo-cream) 14%, transparent);
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--luijo-cream);
}

.lj-side__foot { margin-top: auto; padding-top: 16px; position: relative; z-index: 1; }
.lj-userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--luijo-cream) 6%, transparent);
  cursor: pointer;
}
.lj-userchip__av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--luijo-orange);
  color: var(--luijo-burgundy-2);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  font-family: var(--font-display);
}
.lj-userchip__name { font-size: 13px; font-weight: 600; color: var(--luijo-cream); line-height: 1.1; }
.lj-userchip__role { font-size: 11px; color: color-mix(in srgb, var(--luijo-cream) 55%, transparent); margin-top: 2px; }

/* ---------- Main area ---------- */
.lj-main {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg-canvas);
}
.lj-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-canvas);
}
.lj-topbar__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); }
.lj-topbar__crumbs strong { color: var(--fg-1); font-weight: 600; }
.lj-topbar__search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  width: 280px;
  padding: 7px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-3);
}
.lj-topbar__actions { display: flex; align-items: center; gap: 8px; }
.lj-topbar__icbtn {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--fg-2);
  position: relative;
}
.lj-topbar__icbtn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  background: var(--luijo-orange);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg-canvas);
}

.lj-page { padding: 24px 28px 28px; overflow: auto; flex: 1; }
.lj-page__head {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px;
}
.lj-page__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg-1);
}
.lj-page__sub { font-size: 14px; color: var(--fg-3); margin-top: 4px; }

.lj-page__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ============================================================
   Filters bar (period + platform)
   ============================================================ */
.lj-filters {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  margin-bottom: 22px;
}
.lj-filters__group { display: flex; align-items: center; gap: 10px; }
.lj-filters__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-3); font-weight: 600; font-family: var(--font-display);
}
.lj-segctl {
  display: flex; background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lj-segctl button {
  border: 0; background: transparent;
  font: 500 13px var(--font-body);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--fg-2);
}
.lj-segctl button.is-active {
  background: var(--luijo-burgundy);
  color: var(--luijo-cream);
  font-weight: 600;
}
.lj-segctl--accent button.is-active { background: var(--luijo-orange); color: var(--fg-on-orange); }

.lj-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  padding: 7px 32px 7px 12px;
  border-radius: 999px;
  font: 500 13px var(--font-body);
  color: var(--fg-1);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23544838' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* ============================================================
   Buttons
   ============================================================ */
.lj-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13.5px var(--font-display);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.lj-btn svg { width: 15px; height: 15px; }
.lj-btn--primary { background: var(--luijo-burgundy); color: var(--luijo-cream); }
.lj-btn--primary:hover { background: var(--luijo-burgundy-3); }
.lj-btn--accent  { background: var(--luijo-orange); color: var(--fg-on-orange); box-shadow: var(--shadow-inset); }
.lj-btn--accent:hover { background: var(--luijo-orange-3); }
.lj-btn--ghost   { background: transparent; color: var(--fg-1); border-color: var(--border-medium); }
.lj-btn--ghost:hover { background: color-mix(in srgb, var(--luijo-burgundy) 5%, transparent); }
.lj-btn--soft    { background: var(--luijo-cream-2); color: var(--fg-1); border-color: var(--border-soft); }
.lj-btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* ============================================================
   Cards / panels
   ============================================================ */
.lj-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.lj-card--sand { background: var(--luijo-sand); border-color: transparent; }
.lj-card--burgundy { background: var(--luijo-burgundy); color: var(--luijo-cream); border-color: transparent; }
.lj-card--burgundy h3, .lj-card--burgundy .lj-stat__val { color: var(--luijo-cream); }
.lj-card--flush { padding: 0; overflow: hidden; }

/* Stat card */
.lj-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lj-stat__lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fg-3); font-weight: 700; font-family: var(--font-display);
}
.lj-stat__val {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800; letter-spacing: -0.025em;
  color: var(--fg-1); line-height: 1.05;
}
.lj-stat__val--md { font-size: 26px; }
.lj-stat__val--sm { font-size: 20px; }
.lj-stat__delta {
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 12px var(--font-body);
  padding: 2px 7px;
  border-radius: 999px;
}
.lj-stat__delta--up   { color: #1e6b3c; background: color-mix(in srgb, #2f7d4f 14%, transparent); }
.lj-stat__delta--down { color: #92281b; background: color-mix(in srgb, #b3261e 12%, transparent); }
.lj-stat__delta--flat { color: var(--fg-3); background: var(--bg-raised); }
.lj-stat__foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.lj-stat__spark { width: 70px; height: 22px; margin-left: auto; }

/* ============================================================
   Tables
   ============================================================ */
.lj-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lj-table thead th {
  text-align: left;
  padding: 12px 16px;
  font: 700 10.5px var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--luijo-cream-2);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.lj-table thead th.num, .lj-table tbody td.num { text-align: right; }
.lj-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--fg-1);
}
.lj-table tbody tr:hover { background: color-mix(in srgb, var(--luijo-sand) 18%, transparent); }
.lj-table tbody tr:last-child td { border-bottom: 0; }
.lj-table__brand { display: flex; align-items: center; gap: 12px; }
.lj-table__brandav {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font: 700 13px var(--font-display);
  color: var(--luijo-cream);
}
.lj-table__brandname { font-weight: 600; color: var(--fg-1); font-size: 13.5px; }
.lj-table__brandtype { font-size: 11px; color: var(--fg-3); margin-top: 1px; letter-spacing: 0.04em; }

/* ============================================================
   Badges (platforms, statuses)
   ============================================================ */
.lj-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 11.5px var(--font-body);
  letter-spacing: 0;
  white-space: nowrap;
}
.lj-badge svg { width: 11px; height: 11px; }
.lj-badge--meta    { background: #e7f0ff; color: #1565c0; }
.lj-badge--google  { background: #fdecec; color: #c5221f; }
.lj-badge--fb      { background: #e7f0ff; color: #1877f2; }
.lj-badge--ig      { background: #fce4ec; color: #c2185b; }
.lj-badge--ga4     { background: #fef3e2; color: #b26a00; }
.lj-badge--linkedin{ background: #e1f0fb; color: #0a66c2; }
.lj-badge--tiktok  { background: #000; color: #fff; }
.lj-badge--ok      { background: color-mix(in srgb, #2f7d4f 14%, transparent); color: #1e6b3c; }
.lj-badge--warn    { background: color-mix(in srgb, #c97a14 16%, transparent); color: #8c5410; }
.lj-badge--err     { background: color-mix(in srgb, #b3261e 12%, transparent); color: #92281b; }
.lj-badge--off     { background: var(--bg-raised); color: var(--fg-3); }
.lj-badge--soft    { background: var(--luijo-cream-2); color: var(--fg-2); }
.lj-badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto;
}

.lj-platforms { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* ============================================================
   Charts container
   ============================================================ */
.lj-chart {
  position: relative;
  height: 220px;
}
.lj-chart--sm { height: 160px; }
.lj-chart--lg { height: 280px; }
.lj-chart__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.lj-chart__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
}
.lj-chart__sub { font-size: 12px; color: var(--fg-3); }

/* ============================================================
   Grids
   ============================================================ */
.lj-grid { display: grid; gap: 16px; }
.lj-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.lj-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.lj-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.lj-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.lj-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ============================================================
   Tabs (sub-nav on brand detail)
   ============================================================ */
.lj-tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 22px;
}
.lj-tabs button {
  border: 0; background: transparent;
  font: 600 13.5px var(--font-display);
  color: var(--fg-3);
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
  letter-spacing: 0.01em;
}
.lj-tabs button.is-active { color: var(--fg-1); }
.lj-tabs button.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: var(--luijo-orange); border-radius: 2px;
}
.lj-tabs button:hover { color: var(--fg-1); }
.lj-tabs button .count {
  font: 600 11px var(--font-body);
  margin-left: 6px;
  background: var(--bg-raised);
  padding: 1px 7px; border-radius: 999px;
  color: var(--fg-3);
}

/* ============================================================
   Brand identity block (detail header)
   ============================================================ */
.lj-brandhead {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  background: var(--luijo-burgundy);
  color: var(--luijo-cream);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.lj-brandhead__bg {
  position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px;
  opacity: 0.08;
}
.lj-brandhead__av {
  width: 64px; height: 64px;
  border-radius: 14px;
  display: grid; place-items: center;
  font: 800 22px/1 var(--font-display);
  background: var(--luijo-orange);
  color: var(--luijo-burgundy-2);
  flex: 0 0 auto;
}
.lj-brandhead__main { min-width: 0; }
.lj-brandhead__eyebrow {
  font: 600 11px var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--luijo-cream) 60%, transparent);
}
.lj-brandhead__name {
  font: 800 30px/1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--luijo-cream);
  margin-top: 4px;
}
.lj-brandhead__meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--luijo-cream) 70%, transparent);
}
.lj-brandhead__meta strong { color: var(--luijo-cream); font-weight: 600; }
.lj-brandhead__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; z-index: 1; }
.lj-brandhead .lj-btn--ghost { color: var(--luijo-cream); border-color: color-mix(in srgb, var(--luijo-cream) 30%, transparent); }
.lj-brandhead .lj-btn--ghost:hover { background: color-mix(in srgb, var(--luijo-cream) 10%, transparent); }

/* ============================================================
   Hero (vue globale) — burgundy splash
   ============================================================ */
.lj-hero {
  position: relative;
  padding: 28px 30px;
  background: var(--luijo-burgundy);
  color: var(--luijo-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
}
.lj-hero__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.lj-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; position: relative; z-index: 1; }
.lj-hero__eyebrow {
  font: 700 11px var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--luijo-orange);
}
.lj-hero__title {
  font: 800 36px/1.05 var(--font-display);
  letter-spacing: -0.025em;
  margin-top: 8px;
  text-wrap: balance;
  color: var(--luijo-cream);
}
.lj-hero__title em { font-style: normal; color: var(--luijo-orange); }
.lj-hero__sub {
  font-size: 14px;
  color: color-mix(in srgb, var(--luijo-cream) 75%, transparent);
  margin-top: 8px;
  max-width: 440px;
}
.lj-hero__nums {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
.lj-hero__num {
  border-left: 2px solid var(--luijo-orange);
  padding-left: 14px;
}
.lj-hero__num-lbl {
  font: 600 10.5px var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--luijo-cream) 55%, transparent);
}
.lj-hero__num-val {
  font: 800 26px/1 var(--font-display);
  letter-spacing: -0.02em;
  margin-top: 6px;
  color: var(--luijo-cream);
}
.lj-hero__num-delta { display: inline-block; margin-left: 8px; font: 600 12px var(--font-body); }
.lj-hero__num-delta--up { color: #6ed799; }
.lj-hero__num-delta--down { color: #ff9b8a; }

/* ============================================================
   Connection rows / platform list
   ============================================================ */
.lj-conn { display: flex; flex-direction: column; gap: 8px; }
.lj-conn__row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.lj-conn__row--off { background: var(--bg-raised); border-style: dashed; border-color: var(--border-medium); }
.lj-conn__row--err { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 4%, var(--bg-surface)); }
.lj-conn__logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  font: 700 14px var(--font-display);
}
.lj-conn__name { font-weight: 600; font-size: 14px; color: var(--fg-1); }
.lj-conn__meta { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.lj-conn__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ============================================================
   Modal (over a screen)
   ============================================================ */
.lj-modal-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--luijo-burgundy) 55%, transparent);
  display: grid; place-items: center;
  z-index: 5;
}
.lj-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 580px;
  max-width: 90%;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.lj-modal--lg { width: 720px; }
.lj-modal__head { margin-bottom: 20px; }
.lj-modal__eyebrow {
  font: 700 10.5px var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-accent);
}
.lj-modal__title {
  font: 800 24px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin-top: 6px;
}
.lj-modal__foot {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

/* ============================================================
   Form fields
   ============================================================ */
.lj-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lj-field__lbl {
  font: 600 12px var(--font-body);
  color: var(--fg-1);
}
.lj-field__hint { font-size: 12px; color: var(--fg-3); }
.lj-input {
  font: 500 14px var(--font-body);
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  color: var(--fg-1);
  width: 100%;
}
.lj-input:focus { outline: 3px solid color-mix(in srgb, var(--luijo-orange) 30%, transparent); border-color: var(--luijo-burgundy); }

.lj-toggle {
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--neutral-300);
  position: relative; cursor: pointer; flex: 0 0 auto;
  transition: background var(--dur-fast);
}
.lj-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: left var(--dur-fast);
}
.lj-toggle.is-on { background: var(--luijo-orange); }
.lj-toggle.is-on::after { left: 18px; }

.lj-check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-surface);
  flex: 0 0 auto;
  display: grid; place-items: center;
  cursor: pointer;
}
.lj-check.is-on { background: var(--luijo-burgundy); border-color: var(--luijo-burgundy); color: var(--luijo-cream); }
.lj-check svg { width: 12px; height: 12px; opacity: 0; }
.lj-check.is-on svg { opacity: 1; }

/* ============================================================
   Brand avatars (tints)
   ============================================================ */
.lj-av--burgundy { background: var(--luijo-burgundy); color: var(--luijo-cream); }
.lj-av--orange   { background: var(--luijo-orange);   color: var(--luijo-burgundy-2); }
.lj-av--sand     { background: var(--luijo-sand-2);   color: var(--luijo-burgundy); }
.lj-av--olive    { background: #6a6b3e;               color: var(--luijo-cream); }
.lj-av--teal     { background: #2a5e5b;               color: var(--luijo-cream); }
.lj-av--rose     { background: #b35d6f;               color: var(--luijo-cream); }

/* ============================================================
   Highlight cards (Top campaigne / À surveiller / Meilleur CTR)
   ============================================================ */
.lj-hl {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.lj-hl__eyebrow {
  display: flex; align-items: center; gap: 6px;
  font: 700 10.5px var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lj-hl__eyebrow .pip { width: 6px; height: 6px; border-radius: 999px; }
.lj-hl__title { font: 700 16px var(--font-display); color: var(--fg-1); margin-top: 4px; }
.lj-hl__num { font: 800 24px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fg-1); margin-top: 6px; }
.lj-hl__foot { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.lj-hl--accent { background: var(--luijo-orange); color: var(--fg-on-orange); border-color: transparent; }
.lj-hl--accent .lj-hl__eyebrow,
.lj-hl--accent .lj-hl__title,
.lj-hl--accent .lj-hl__num,
.lj-hl--accent .lj-hl__foot { color: var(--fg-on-orange); }

/* ============================================================
   2x2 tile motif (decorative)
   ============================================================ */
.lj-tile {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px;
  border-radius: 7px;
  overflow: hidden;
}
.lj-tile span { background: currentColor; border-radius: 2px; }
.lj-tile span:nth-child(3) { background: var(--luijo-orange); }

/* ============================================================
   Client view header (lighter / friendlier)
   ============================================================ */
.lj-clienthero {
  background: var(--luijo-sand);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center; gap: 30px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.lj-clienthero__bg {
  position: absolute; right: -30px; bottom: -50px;
  width: 220px; height: 220px;
  opacity: 0.32;
  pointer-events: none;
}
.lj-clienthero__eyebrow { font: 700 11px var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--luijo-burgundy); }
.lj-clienthero__title {
  font: 800 34px/1.05 var(--font-display);
  letter-spacing: -0.025em;
  margin-top: 6px;
  color: var(--luijo-burgundy);
}
.lj-clienthero__sub {
  font-size: 14px;
  color: var(--luijo-burgundy-2);
  margin-top: 10px;
  max-width: 380px;
}
.lj-clienthero__updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--luijo-burgundy) 10%, transparent);
  border-radius: 999px;
  font: 600 12px var(--font-body);
  color: var(--luijo-burgundy);
}
.lj-clienthero__nums {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.lj-clienthero__num {
  background: var(--luijo-cream);
  padding: 14px 16px;
  border-radius: 14px;
}
.lj-clienthero__num-lbl { font: 700 10.5px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.lj-clienthero__num-val { font: 800 26px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fg-1); margin-top: 8px; }
.lj-clienthero__num-delta { font: 600 12px var(--font-body); margin-top: 6px; color: #1e6b3c; }

/* ============================================================
   Permission matrix
   ============================================================ */
.lj-permgrid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(60px, 1fr));
  align-items: center;
  font-size: 13px;
}
.lj-permgrid > .h {
  font: 700 10.5px var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.lj-permgrid > .h:not(:first-child) { text-align: center; }
.lj-permgrid > .c {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.lj-permgrid > .c:not(.label) { text-align: center; }

/* ============================================================
   Lists / small bits
   ============================================================ */
.lj-list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.lj-list-row:last-child { border: 0; padding-bottom: 0; }

.lj-divider { height: 1px; background: var(--border-soft); margin: 16px 0; }

.lj-eyebrow-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.lj-eyebrow-row h3 {
  font: 700 15px var(--font-display);
  color: var(--fg-1);
}
.lj-eyebrow-row a {
  font: 600 12px var(--font-body);
  color: var(--fg-accent);
  text-decoration: none;
}

/* Tiny dot indicator */
.lj-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.lj-dot--ok { background: var(--success); }
.lj-dot--warn { background: var(--warning); }
.lj-dot--err { background: var(--danger); }
.lj-dot--off { background: var(--neutral-300); }

/* progress bar */
.lj-progress {
  height: 6px; border-radius: 999px;
  background: var(--bg-raised);
  overflow: hidden;
  margin-top: 6px;
}
.lj-progress > span {
  display: block; height: 100%;
  background: var(--luijo-burgundy);
  border-radius: 999px;
}
.lj-progress > span.accent { background: var(--luijo-orange); }

/* Notification toast inline */
.lj-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--success) 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius: 12px;
  font: 500 13px var(--font-body);
  color: #1e6b3c;
}

/* Search / filter pill */
.lj-searchpill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-3);
  min-width: 220px;
}

/* Avatar row stack */
.lj-avstack { display: flex; align-items: center; }
.lj-avstack > div {
  width: 26px; height: 26px; border-radius: 999px;
  border: 2px solid var(--bg-canvas);
  margin-left: -8px;
  display: grid; place-items: center;
  font: 700 10px var(--font-display);
}
.lj-avstack > div:first-child { margin-left: 0; }