/* ==========================================================================
   KUJTEN RETAIL LIFT — Design system
   Style inspiré de la charte Primelis : fond sombre profond, titres serif
   éditoriaux, accents violet/vert néon, cartes fines à contours discrets.
   ========================================================================== */

:root{
  --bg:            #0a0b0e;
  --bg-soft:       #0d0f13;
  --panel:         #14161d;
  --panel-alt:     #17192197;
  --panel-border:  rgba(255,255,255,0.08);
  --panel-border-strong: rgba(255,255,255,0.14);
  --grid-line:     rgba(255,255,255,0.06);

  --text-primary:  #f5f6f8;
  --text-muted:    #9a9da5;
  --text-faint:    #6b6e76;

  --accent-purple:      #8c52ff;
  --accent-purple-soft: rgba(140,82,255,0.16);
  --accent-purple-line: rgba(140,82,255,0.55);
  --accent-green:       #49c585;
  --accent-green-soft:  rgba(73,197,133,0.16);
  --accent-orange:      #f0a848;
  --accent-orange-soft: rgba(240,168,72,0.16);
  --accent-red:         #ef5b6a;
  --accent-red-soft:    rgba(239,91,106,0.16);
  --accent-gray:        #5b5e66;
  --accent-violet-ctrl: #b083ff;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sidebar-w: 248px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(120% 140% at 10% 0%, #12141a 0%, var(--bg) 55%);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}

a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }

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

/* ---------------- Sidebar ---------------- */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: #0c0d11;
  border-right: 1px solid var(--panel-border);
  display:flex;
  flex-direction: column;
  padding: 26px 18px 20px;
  position: sticky;
  top:0;
  height: 100vh;
}
.brand{
  display:flex;
  align-items:flex-start;
  padding: 0 4px 20px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 18px;
}
.brand-logo-wrap{ display:flex; flex-direction:column; gap:8px; width:100%; }
.brand-logo{ height:26px; width:auto; max-width:100%; object-fit:contain; object-position:left; filter: brightness(0) invert(1); opacity:0.95; }
.brand-subtitle{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); font-weight:600; }

.nav-section-label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-faint); margin: 18px 8px 8px;
}
.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size:13.5px; font-weight:500;
  transition: background .15s, color .15s;
}
.nav-link i{ width:16px; text-align:center; font-size:14px; opacity:.85; }
.nav-link:hover{ background: rgba(255,255,255,0.04); color: var(--text-primary); }
.nav-link.active{
  background: var(--accent-purple-soft);
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(140,82,255,0.35);
}
.nav-link.active i{ color: var(--accent-purple); opacity:1; }

.sidebar-footer{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--panel-border);
  font-size:11px; color: var(--text-faint);
}
.sidebar-footer strong{ color: var(--text-muted); display:block; font-size:12px; margin-bottom:2px;}

/* ---------------- Main content ---------------- */
.main{
  flex:1; min-width:0;
  padding: 28px 36px 60px;
  max-width: 1440px;
}
.topbar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom: 22px; flex-wrap:wrap;
}
.eyebrow{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--accent-purple); font-weight:600; margin-bottom:8px; display:block;
}
.page-title{
  font-family: var(--font-serif); font-size: 34px; line-height:1.15;
  color:#fff; margin:0 0 8px; font-weight:500; letter-spacing:.2px;
}
.page-subtitle{ color: var(--text-muted); max-width: 640px; font-size:13.5px; }
.topbar-side{ text-align:right; }
.promise{
  font-family: var(--font-serif); font-style:italic; color: var(--text-muted);
  font-size:14px; max-width:320px;
}

/* ---------------- Filters bar ---------------- */
.filters-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 24px;
}
.filter-field{ display:flex; flex-direction:column; gap:4px; min-width:130px; }
.filter-field label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); }
.filter-field select, .filter-field input{
  background: #0f1116; border:1px solid var(--panel-border-strong);
  color:#fff; border-radius: var(--radius-sm); padding:7px 10px; font-size:12.5px;
  font-family: var(--font-sans);
}
.filter-field select:focus, .filter-field input:focus{ outline:1px solid var(--accent-purple); }
.filters-bar .reset-btn{ margin-left:auto; }

.btn{
  border:1px solid var(--panel-border-strong); background:#0f1116; color:var(--text-primary);
  padding:8px 14px; border-radius: var(--radius-sm); font-size:12.5px; font-weight:600;
  cursor:pointer; transition: all .15s; font-family: var(--font-sans);
}
.btn:hover{ border-color: var(--accent-purple); color:#fff; }
.btn-primary{ background: var(--accent-purple); border-color: var(--accent-purple); color:#fff; }
.btn-primary:hover{ background:#7a3ff0; }
.btn-sm{ padding:5px 10px; font-size:11.5px; }

/* ---------------- KPI cards ---------------- */
.kpi-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:24px;
}
@media (max-width: 1180px){ .kpi-grid{ grid-template-columns: repeat(2,1fr); } }
.kpi-card{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding:18px 18px 16px;
  position:relative;
  overflow:hidden;
}
.kpi-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120px 60px at 100% 0%, rgba(140,82,255,0.08), transparent 70%);
}
.kpi-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:10px; }
.kpi-value{ font-family: var(--font-serif); font-size:26px; color:#fff; margin-bottom:6px; }
.kpi-trend{ font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.kpi-trend.up{ color: var(--accent-green); }
.kpi-trend.down{ color: var(--accent-red); }
.kpi-trend.flat{ color: var(--text-muted); }
.kpi-sub{ font-size:11px; color: var(--text-faint); margin-top:4px; }
.kpi-card.highlight{ border-color: rgba(140,82,255,0.4); box-shadow: 0 0 0 1px rgba(140,82,255,0.15) inset; }

/* ---------------- Panels / cards ---------------- */
.panel{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:16px; flex-wrap:wrap;
}
.panel-title{ font-family: var(--font-serif); font-size:17px; color:#fff; margin:0 0 4px; }
.panel-desc{ font-size:12px; color: var(--text-muted); max-width:520px;}
.panel-legend{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-muted); }
.legend-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }

.grid-2{ display:grid; grid-template-columns: 1.6fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width: 1080px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

.chart-wrap{ position:relative; height:320px; }
.chart-wrap.sm{ height:220px; }
.chart-wrap.lg{ height:400px; }

.axis-note{ display:flex; justify-content:space-between; margin-top:10px; }
.axis-note-item{ text-align:center; flex:1; font-size:11px; }
.axis-note-tag{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:2px;}
.axis-note-item p{ margin:2px 0 0; color: var(--text-muted); font-size:11px; }

/* ---------------- Tables ---------------- */
.data-table{ width:100%; border-collapse: collapse; font-size:12.5px; }
.data-table th{
  text-align:left; padding:9px 12px; color: var(--text-faint); font-weight:600;
  text-transform:uppercase; font-size:10px; letter-spacing:.06em;
  border-bottom:1px solid var(--panel-border); white-space:nowrap; cursor:pointer;
}
.data-table th:hover{ color: var(--text-muted); }
.data-table td{ padding:11px 12px; border-bottom:1px solid var(--panel-border); vertical-align:middle; }
.data-table tbody tr:hover{ background: rgba(255,255,255,0.025); }
.data-table tbody tr{ cursor:pointer; }

.tag{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}
.tag-green{ background: var(--accent-green-soft); color: var(--accent-green); }
.tag-orange{ background: var(--accent-orange-soft); color: var(--accent-orange); }
.tag-red{ background: var(--accent-red-soft); color: var(--accent-red); }
.tag-gray{ background: rgba(255,255,255,0.06); color: var(--text-muted); }
.tag-purple{ background: var(--accent-purple-soft); color: var(--accent-purple); }
.tag-violet{ background: rgba(176,131,255,0.16); color: var(--accent-violet-ctrl); }

.platform-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.platform-dot{ width:8px; height:8px; border-radius:50%; }
.dot-google{ background:#4c8bf5; }
.dot-meta{ background:#f5568c; }
.dot-snapchat{ background:#f5d43c; }

/* ---------------- Cards list (recos / tests) ---------------- */
.reco-card{
  border:1px solid var(--panel-border); border-radius: var(--radius-md);
  padding:16px 18px; margin-bottom:12px; display:flex; gap:16px; align-items:flex-start;
  background: rgba(255,255,255,0.015);
}
.reco-icon{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:14px;
}
.reco-body{ flex:1; }
.reco-title{ font-weight:600; color:#fff; margin-bottom:4px; font-size:13.5px; }
.reco-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color: var(--text-faint); }
.reco-meta b{ color: var(--text-muted); }
.reco-action{ margin-top:10px; }

/* ---------------- Map ---------------- */
#map{ height: 560px; border-radius: var(--radius-lg); overflow:hidden; }
.map-layout{ display:grid; grid-template-columns: 1fr 340px; gap:18px; }
@media (max-width: 1080px){ .map-layout{ grid-template-columns: 1fr; } }
.store-popup-title{ font-family: var(--font-serif); font-size:14px; margin:0 0 6px; color:#fff; }
.store-detail-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-lg);
  padding:18px; height:560px; overflow-y:auto;
}
.detail-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--panel-border); font-size:12.5px; }
.detail-row span:first-child{ color: var(--text-faint); }
.detail-row span:last-child{ font-weight:600; color:#fff; }
.map-legend{ display:flex; flex-direction:column; gap:8px; margin-top:16px; font-size:11.5px; }

/* ---------------- Flags row ---------------- */
.flag-row{ display:flex; align-items:center; gap:8px; font-size:20px; }
.flag-row .flag-label{ font-size:12px; font-weight:600; color: var(--text-muted); margin-right:4px; }

/* ---------------- Store cards grid (boutiques list) ---------------- */
.store-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.store-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-md);
  padding:16px; cursor:pointer; transition: border-color .15s, transform .15s;
}
.store-card:hover{ border-color: var(--accent-purple); transform: translateY(-2px); }
.store-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
.store-card-name{ font-weight:600; color:#fff; font-size:13.5px; }
.store-card-city{ font-size:11.5px; color: var(--text-faint); }
.status-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; margin-top:2px; box-shadow: 0 0 0 3px rgba(255,255,255,0.03); }
.status-green{ background: var(--accent-green); }
.status-orange{ background: var(--accent-orange); }
.status-red{ background: var(--accent-red); }
.status-gray{ background: var(--accent-gray); }
.status-violet{ background: var(--accent-violet-ctrl); }
.store-card-metrics{ display:flex; gap:14px; margin-top:8px; }
.store-card-metrics div{ font-size:11px; color: var(--text-muted); }
.store-card-metrics b{ display:block; color:#fff; font-size:14px; font-family: var(--font-serif); }

/* ---------------- Detail page ---------------- */
.back-link{ display:inline-flex; align-items:center; gap:6px; color: var(--text-muted); font-size:12.5px; margin-bottom:14px; }
.back-link:hover{ color:#fff; }

/* alerts */
.alert{
  display:flex; gap:12px; padding:12px 14px; border-radius: var(--radius-sm); margin-bottom:10px;
  font-size:12.5px; align-items:flex-start; border:1px solid;
}
.alert i{ margin-top:2px; }
.alert-warning{ background: var(--accent-orange-soft); border-color: rgba(240,168,72,0.35); color:#ffe0b0; }
.alert-danger{ background: var(--accent-red-soft); border-color: rgba(239,91,106,0.35); color:#ffd2d6; }
.alert-info{ background: var(--accent-purple-soft); border-color: rgba(140,82,255,0.35); color:#e4d7ff; }

/* scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: #26282f; border-radius:6px; }

/* misc */
.muted{ color: var(--text-muted); }
.faint{ color: var(--text-faint); }
.mb-0{ margin-bottom:0 !important; }
.pill-toggle{ display:flex; gap:6px; background:#0f1116; border:1px solid var(--panel-border-strong); border-radius:20px; padding:3px; }
.pill-toggle button{ background:transparent; border:none; color: var(--text-muted); padding:5px 12px; border-radius:16px; font-size:11.5px; cursor:pointer; font-family: var(--font-sans); }
.pill-toggle button.active{ background: var(--accent-purple); color:#fff; }

.section-divider{ height:1px; background: var(--panel-border); margin: 26px 0; }

.leaflet-popup-content-wrapper{ background:#14161d; color:#fff; border-radius:12px; }
.leaflet-popup-tip{ background:#14161d; }
.leaflet-popup-content{ margin:12px 14px; font-family: var(--font-sans); }

@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ position:relative; height:auto; width:100%; flex-direction:row; align-items:center; }
  .sidebar .nav-list{ flex-direction:row; overflow-x:auto; }
  .sidebar-footer{ display:none; }
  .main{ padding: 20px 16px 40px; }
  .kpi-grid{ grid-template-columns: 1fr 1fr; }
}