/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Design tokens ───────────────────────────────────── */
:root {
  --navy:       #0f1f4b;
  --navy-deep:  #0a1838;
  --navy-hover: #162954;
  --red:        #e63329;
  --red-hover:  #cc2e25;
  --bg:         #f4f6fb;
  --border:     #e2e6ef;
  --text:       #1a2a4a;
  --muted:      #8492a6;
  --light-blue: #DCE6F1;
  --redv:       #C0504D;
  --light-red:  #F2DCDB;
}

.redv {
  background-color: var(--redv);
  color: white;
}
.light-red {
  background-color: var(--light-red);
}
.light-blue {
  background-color: var(--light-blue);
}

* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; }

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar-logo {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
}

.sidebar-logo-mark {
  width: 32px; height: 32px;
  background: var(--red);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}

.sidebar-logo-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  transition: background 0.2s;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding: 16px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 450;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 1px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}

.nav-item.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--red);
}

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Topbar ──────────────────────────────────────────── */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--navy);
  letter-spacing: -0.2px;
}

.topbar-date {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Topbar user area ────────────────────────────────── */
.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
}

.topbar-icon-btn:hover {
  background: var(--bg);
  color: var(--navy);
}

.topbar-icon-btn.active {
  background: rgba(15,31,75,0.08);
  color: var(--navy);
}

.topbar-icon-btn svg {
  width: 17px; height: 17px;
}

.topbar-user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
}

.topbar-avatar {
  width: 26px; height: 26px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.topbar-username {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(230, 51, 41, 0.08);
  color: var(--red);
}

.badge-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Main content ────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* ── Flash messages ──────────────────────────────────── */
.flash-notice {
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
}

.flash-alert {
  padding: 12px 16px;
  background: #fff1f0;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
}

/* ── Login page ──────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login-logo-mark {
  width: 40px; height: 40px;
  background: var(--red);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.login-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.3px;
}

.login-box {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
}

/* ── Kaminari pagination ─────────────────────────────── */
nav.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

nav.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 450;
  transition: background 0.1s, border-color 0.1s;
}

nav.pagination a:hover {
  background: var(--bg);
  border-color: #c5cdd8;
  color: var(--navy);
}

nav.pagination .current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--border);
  font-size: 13px;
  transition: background 0.1s, border-color 0.1s;
}

nav.pagination .disabled {
  color: var(--muted);
  pointer-events: none;
  border-color: var(--border);
}
nav.pagination span.first,
nav.pagination span.last,
nav.pagination span.prev,
nav.pagination span.next {
  color: var(--muted);
  border-color: var(--border);
}

nav.pagination .gap {
  border: none;
  background: transparent;
  color: var(--muted);
  pointer-events: none;
}

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
/* default: all th = navy + white */
.data-table th {
  padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: #fff;
  border-bottom: 1px solid var(--border); background: var(--navy);
}

/* cumul detail columns — lighter blue */
.data-table th[data-cumul-cell],
.data-table th[data-cumul-cell-company] {
  background: #2d5a9e;
  color: #fff;
}

/* mensuel group header — red */
.data-table th[data-mensuel-header],
.data-table th[data-mensuel-header-company] {
  background: var(--redv);
  color: #fff;
}

/* mensuel detail columns — lighter red */
.data-table th[data-mensuel-cell],
.data-table th[data-mensuel-cell-company] {
  background: #c97a78;
  color: #fff;
}

.data-table td { padding: 11px 16px; font-size: 13.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background: #fafbfd; }
.data-table tbody tr:hover td { background: #f1f4fa; }

/* Sticky first column */
.data-table th:first-child,
.data-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 10 !important;
}

.data-table th:first-child                          { background: #0f1f4b !important; }
.data-table td:first-child                          { background: #ffffff !important; }
.data-table tbody tr:nth-child(even) td:first-child { background: #fafbfd !important; }
.data-table tbody tr:hover td:first-child            { background: #f1f4fa !important; }


/* ── Shared index columns ────────────────────────────── */
th.col-select, td.col-select { width:32px; padding-left:12px; padding-right:4px; }
th.col-view,   td.col-view   { width:32px; text-align:center; padding-left:0; padding-right:0; }
th.col-actions                { width:40px; }

.row-view-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color 120ms;
}
.row-view-link:hover { color: var(--navy); }
.record-link { 
  color:rgb(59 113 202); 
  font-weight:500; 
  text-decoration:underline; 
}
.record-link:hover { text-decoration:underline; }
.filter-bar { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-bar > div:last-child {
  margin-left: auto;
}
.filter-input { padding:7px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; color:var(--text); outline:none; min-width:220px; }
.filter-input:focus { border-color:var(--navy); }
.btn-primary { padding:7px 14px; background:var(--navy); color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; }
.btn-primary:hover { opacity:0.9; }
.btn-clear { padding:7px 14px; background:#f4f6fb; color:var(--muted); border:1px solid var(--border); border-radius:6px; font-size:13px; text-decoration:none; }
.count-badge { font-size:12px; color:var(--muted); white-space:nowrap; margin-left:auto; }

.table-panel {
  background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

/* ── Collapsible nav groups ──────────────────────────── */
.nav-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 10px 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.25);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  border-radius: 4px;
  transition: background 0.15s;
}

.nav-group-toggle:hover {
  background: rgba(255,255,255,0.05);
}

.nav-group-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.5;
}

.nav-group.open .nav-group-chevron {
  transform: rotate(180deg);
}

.nav-group-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.nav-group.open .nav-group-children {
  max-height: 500px;
}

.nav-item.nav-sub {
  padding-left: 22px;
}

/* Collapsed sidebar: hide nav group toggles and children */
#sidebar.collapsed .nav-group-toggle,
#sidebar.collapsed .nav-group-children {
  display: none;
}

/* ── Mode toggle (Tableaux / Données) ───────────────── */
.sb-mode-toggle {
  display: flex;
  margin: 0 10px 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.smt-btn {
  flex: 1;
  padding: 5px 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.smt-btn.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.smt-btn:hover:not(.active) {
  color: rgba(255,255,255,0.7);
}

#sidebar.collapsed .sb-mode-toggle {
  display: none;
}

/* ── Collapsible sidebar ─────────────────────────────── */
#sidebar {
  --sidebar-expanded-width: 232px;
  position: relative;
  transition: width 0.25s ease, min-width 0.25s ease;
}

#sidebar .nav-label {
  transition: max-width 0.25s ease, opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
  display: block;
}

#sidebar.collapsed {
  width: 56px !important;
  min-width: 56px !important;
}

#sidebar.collapsed .nav-label {
  opacity: 0;
  max-width: 0;
}

#sidebar.collapsed .nav-section-label {
  height: 0;
  padding: 0;
  overflow: hidden;
}

#sidebar.collapsed .sidebar-logo {
  padding: 16px 12px;
}

#sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px;
  border-left: none;
}

#sidebar.collapsed .nav-item.active {
  box-shadow: none;
  padding: 10px;
}

/* ── Sidebar toggle button ───────────────────────────── */
#sidebar-toggle {
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: white;
  border: 1px solid #0f1f4b;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: left 0.25s ease, box-shadow 0.2s ease;
  padding: 0;
}

#sidebar-toggle:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  background: #f8faff;
  transform: translateY(-50%) scale(1.1);
}

#sidebar-toggle svg {
  transition: transform 0.25s ease;
  color: #0f1f4b;
  flex-shrink: 0;
}

#sidebar.collapsed #sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ── Collapsed state tooltips ────────────────────────── */
#sidebar.collapsed a[data-tooltip] {
  position: relative;
}

#sidebar.collapsed a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f1f4b;
  color: white;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

#sidebar.collapsed a[data-tooltip]:hover::after {
  opacity: 1;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinning {
  animation: spin 1s linear infinite;
}

/* ── Toast notifications ─────────────────────────────── */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  min-width: 260px;
  max-width: 400px;
  pointer-events: all;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: toast-in 0.3s ease forwards;
  cursor: pointer;
}

.toast-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.toast-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.toast-info {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.toast-out {
  animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── Home page typography ────────────────────────────── */
.h1 {
  font-family: 'Syne', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

/* ── Global search bar ───────────────────────────────── */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.search {
  padding: 8px 40px 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  width: 280px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,31,75,0.08);
}

.kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  pointer-events: none;
  line-height: 1.4;
  font-family: inherit;
}

/* ── KPI strip ───────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.kpi-ca-header {
    display: flex;
    justify-content: space-between;
}

.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.kpi-value {
  font-family: 'Syne', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  margin: 2px 0;
}

.kpi-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.trend-chip.up   { background: rgba(16,185,129,0.1); color: #059669; }
.trend-chip.down { background: rgba(230,51,41,0.1);  color: var(--red); }
.trend-chip.flat { background: #f0f0f0;              color: #888; }
.trend-chip.sm   { font-size: 10px; padding: 1px 5px; }

.kpi-breakdown {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kpi-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.kpi-breakdown-row .bd-label { flex: 1; }
.kpi-breakdown-row .bd-val   { font-weight: 500; color: var(--text); min-width: 60px; text-align: right; }
.kpi-breakdown-row .bd-pct   { min-width: 44px; text-align: right; color: var(--muted); }
.kpi-breakdown-row .bd-trend-head { min-width: 56px; text-align: right; }
.kpi-breakdown-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}

@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

.kpi-spark {
  height: 64px;
  margin-top: 8px;
  flex-shrink: 0;
}

/* ── Two-column middle row ───────────────────────────── */
.home-mid-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.card-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--navy);
}

.card-body {
  padding: 16px 18px;
}

/* ── Chart range tabs ────────────────────────────────── */
.chart-legend-chips {
  display: flex;
  gap: 6px;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
.legend-chip:hover { background: #f7f9fc; }
.legend-chip.off { opacity: 0.4; }
.legend-line {
  width: 18px;
  border-top: 2px solid #0f1f4b;
  display: inline-block;
}
.legend-line.solid-navy  { border-top: 2px solid #0f1f4b; }
.legend-line.dashed-gray { border-top: 2px dashed #8492a6; }

.range-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border-radius: 6px;
  padding: 2px;
}

.range-tab {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}

.range-tab.active {
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Top clients ─────────────────────────────────────── */
.client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.client-name {
  font-size: 12.5px;
  color: var(--text);
  width: 90px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}

.client-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.client-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  width: 58px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Section cards ───────────────────────────────────── */
.sec-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sec-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.sec-card-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-card-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.sec-card-mark.navy { background: rgba(15,31,75,0.1); }
.sec-card-mark.red  { background: rgba(230,51,41,0.1); }
.sec-card-mark.grey { background: rgba(132,146,166,0.1); }

.sec-card-info .sec-card-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.sec-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border);
}

.sec-link:last-child { border-bottom: none; }

.sec-link:hover { background: var(--bg); }

.sec-link .meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  margin-left: 8px;
}

/* ── Admin Hub ───────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.stat.alert {
  border-left: 4px solid var(--red);
  background: #fff8f8;
}
.stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.stat.alert .stat-num { color: var(--red); }
.stat-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .hub-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .hub-grid { grid-template-columns: repeat(4, 1fr); }
}

.hub-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hub-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15,31,75,0.10);
  border-color: var(--navy);
}

.hub-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(15,31,75,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hub-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.hub-card-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.hub-card-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* ── Dashboard filter bar ────────────────────────────────── */
.dash-filter-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dash-filter-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-filter-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-filter-sep {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.dash-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  outline: none;
  max-width: 150px;
}
.dash-select:focus { border-color: var(--navy); }

/* Segmented tabs (Projet / Client) */
.seg-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.seg-tab {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  text-decoration: none;
}

.seg-tab.active,
.seg-tab:focus-visible {
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  outline: none;
}

/* Filtres popover */
.btn-filtres {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.btn-filtres:hover { border-color: var(--navy); color: var(--navy); }

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
}

.filtres-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  min-width: 210px;
}

.popover-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

/* Small action buttons (XLSX, Refresh) */
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  transition: border-color 0.12s, color 0.12s;
}
.btn-sm:hover { border-color: var(--navy); color: var(--navy); }

/* Spin animation for refresh icon */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── List page header ────────────────────────────────── */
.list-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.list-head-meta .h1 { margin-bottom: 0; }

.list-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Chip filter bar ─────────────────────────────────── */
.chip-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 34px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  cursor: default;
}

.chip-key {
  padding: 0 8px 0 10px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  height: 100%;
  display: flex;
  align-items: center;
}

.chip-val {
  padding: 0 8px;
  color: var(--navy);
  font-weight: 500;
  height: 100%;
  display: flex;
  align-items: center;
}

.chip-x {
  padding: 0 8px 0 4px;
  color: var(--muted);
  height: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 11px;
  transition: color 0.12s, background 0.12s;
}

.chip-x:hover { color: var(--red); background: rgba(230,51,41,0.06); }

.chip-add {
  border-style: dashed;
  color: var(--muted);
  padding: 0 12px;
  cursor: pointer;
  border: 1px dashed var(--border);
  background: none;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s;
}
.chip-add:hover { color: var(--navy); border-color: var(--navy); }

.chip-add-wrap { position: relative; }
.chip-bar-right { margin-left: auto; }

/* ── Filter popover ──────────────────────────────────── */
.filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  min-width: 280px;
  max-width: 360px;
}

.filter-popover-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-popover-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-popover-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.filter-popover-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  width: 100%;
}
.filter-popover-input:focus { border-color: var(--navy); }
.filter-popover-input--sm   { width: 100px; }

.filter-popover-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  width: 100%;
}
.filter-popover-select:focus { border-color: var(--navy); }

.filter-popover-daterange {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-popover-arrow { font-size: 11px; color: var(--muted); flex-shrink: 0; }

.filter-popover-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Column picker popover ───────────────────────────── */
.col-picker-wrap { position: relative; }

.col-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 300;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  min-width: 200px;
}

.col-picker-head {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.col-picker-list {
  padding: 8px 4px;
}

.col-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 0.1s;
}
.col-picker-item:hover { background: var(--bg); }

.col-picker-foot {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Badge cell values ───────────────────────────────── */
.badge-val {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  white-space: nowrap;
}

/* ── Density modes ───────────────────────────────────── */
.tbl-wrap {
  overflow-x: auto;
}
.tbl-wrap[data-density="comfort"] .data-table td { padding-top: 12px; padding-bottom: 12px; }
.tbl-wrap[data-density="compact"] .data-table td { padding-top:  8px; padding-bottom:  8px; }

.density-tabs .seg-tab.active {
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* ── Log Viewer ──────────────────────────────────────────── */
.log-entry {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  border-left: 4px solid var(--border);
  transition: box-shadow 0.15s;
}
.log-entry:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.log-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.log-entry-body {
  display: none;
  border-top: 1px solid var(--border);
  background: #0f1117;
}
.log-entry.log-open .log-entry-body { display: block; }
.log-entry.log-open .log-chevron { transform: rotate(180deg); }
.log-chevron { transition: transform 0.2s; color: var(--muted); }

.log-pre {
  margin: 0;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.7;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  overflow-x: auto;
  white-space: pre;
}

/* Status border colors */
.log-status-2xx { border-left-color: #22c55e; }
.log-status-3xx { border-left-color: #f59e0b; }
.log-status-4xx { border-left-color: #f97316; }
.log-status-5xx { border-left-color: #ef4444; }
.log-has-error  { border-left-color: #ef4444; }

/* Method badges */
.log-method {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .5px;
  flex-shrink: 0;
  font-family: monospace;
}
.log-method-get    { background: #dcfce7; color: #15803d; }
.log-method-post   { background: #dbeafe; color: #1d4ed8; }
.log-method-patch,
.log-method-put    { background: #fef9c3; color: #854d0e; }
.log-method-delete { background: #fee2e2; color: #b91c1c; }
.log-method-head   { background: #f3f4f6; color: #6b7280; }

/* Status badge */
.log-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: monospace;
}
.log-status-2xx.log-status-badge { background: #dcfce7; color: #15803d; }
.log-status-3xx.log-status-badge { background: #fef9c3; color: #854d0e; }
.log-status-4xx.log-status-badge { background: #ffedd5; color: #c2410c; }
.log-status-5xx.log-status-badge { background: #fee2e2; color: #b91c1c; }

.log-path {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}
.log-meta-chip {
  font-size: 11px;
  color: var(--muted);
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-duration {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  font-family: monospace;
}
.log-ts {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  font-family: monospace;
}
.log-error-badge {
  font-size: 11px;
  font-weight: 600;
  color: #b91c1c;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Syntax highlight lines inside <pre> */
.log-line-started      { color: #60a5fa; display: block; }
.log-line-processing   { color: #a78bfa; display: block; }
.log-line-params       { color: #fbbf24; display: block; }
.log-line-completed-ok { color: #34d399; display: block; font-weight: 600; }
.log-line-completed-error { color: #f87171; display: block; font-weight: 600; }
.log-line-rendered     { color: #94a3b8; display: block; }
.log-line-sql          { color: #fb923c; display: block; }
.log-line-error        { color: #f87171; display: block; font-weight: 600; }
.log-line-warn         { color: #fbbf24; display: block; }
.log-line-info         { color: #94a3b8; display: block; }
.log-line-default      { color: #cbd5e1; }

/* Filter buttons */
.log-filter-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.log-filter-btn:hover { background: #f3f4f6; }
.log-filter-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ─── Hierarchical Table System ─────────────────────────── */

/* Wrapper */
.htable-wrap { overflow-x: auto; }
.htable { width: 100%; font-size: 0.875rem; border-collapse: separate; border-spacing: 0; }

/* thead */
.htable thead tr { background: #0f1f4b; color: white; }
.htable th { padding: 10px 16px; font-weight: 500; white-space: nowrap; }
.htable th.text-left  { text-align: left; }
.htable th.text-right { text-align: right; }
.htable th.text-center { text-align: center; }

/* Level 1 — section header row (e.g. month, level group) */
.htable .ht-l1 { cursor: pointer; user-select: none; border-bottom: 1px solid #d1d5db; transition: background 0.1s; }
.htable .ht-l1.ht-stripe-a { background: #f0f3fa; }
.htable .ht-l1.ht-stripe-b { background: #e8ecf5; }
.htable .ht-l1:hover { background: #f5f7fc !important; }
.htable .ht-l1 td { padding: 10px 16px; color: #0f1f4b; font-weight: 600; }

/* Level 2 — main data row */
.htable .ht-l2 { border-bottom: 1px solid #e5e7eb; background: white; }
.htable .ht-l2:hover { background: #f8faff; }
.htable .ht-l2 td { padding: 8px 16px; color: #374151; }

/* Level 3 — detail/child row */
.htable .ht-l3 { border-bottom: 1px solid #f3f4f6; background: white; }
.htable .ht-l3:hover { background: #f9fafb; }
.htable .ht-l3 td { padding: 6px 16px; color: #6b7280; font-size: 0.8rem; }

/* Indentation helpers */
.ht-indent-1 { padding-left: 2rem !important; }   /* L2 name cell */
.ht-indent-2 { padding-left: 3.5rem !important; }  /* L3 name cell */

/* Sticky first column */
.ht-sticky { position: sticky; left: 0; z-index: 1; }
.ht-l1 .ht-sticky { background: inherit; }
.ht-l2 .ht-sticky { background: white; }
.ht-l3 .ht-sticky { background: white; }

/* Chevron icon */
.ht-chevron { display: inline-block; transition: transform 0.15s; font-style: normal; margin-right: 0.4rem; }
.ht-chevron.open { transform: rotate(90deg); }

/* tfoot total row */
.htable tfoot tr { background: #f0f3fa; border-top: 2px solid #0f1f4b; }
.htable tfoot td { padding: 10px 16px; font-weight: 600; color: #0f1f4b; }

/* Numeric alignment */
.htable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.htable th.num { text-align: right; }

/* Color accents for values (optional, used in devis) */
.ht-val-blue  { color: #2563eb; }
.ht-val-green { color: #16a34a; }
.ht-val-red   { color: #dc2626; }
/* ─────────────────────────────────────────────────────────── */
/* ── Changelog / Nouveautés ─────────────────────────────────── */
.changelog { list-style: none; margin: 0; padding: 0; position: relative; }
.changelog-entry {
  position: relative;
  padding: 0 0 1.75rem 1.5rem;
  border-left: 2px solid var(--border);
}
.changelog-entry:last-child { border-left-color: transparent; }
.changelog-entry::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff;
}
.changelog-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.changelog-date {
  font-family: "Syne", sans-serif; font-weight: 700;
  color: var(--navy); font-size: 1.05rem;
}
.changelog-sha {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .72rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
}
.changelog-body { font-family: "DM Sans", sans-serif; color: var(--text); font-size: .92rem; }
.changelog-body h3 {
  font-family: "Syne", sans-serif; text-transform: uppercase;
  letter-spacing: .04em; font-size: .72rem; font-weight: 700;
  color: var(--navy); margin: 1rem 0 .35rem;
}
.changelog-body ul { list-style: disc; margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.changelog-body li { margin: .15rem 0; }
.changelog-body p { margin: .4rem 0; }
.changelog-body a { color: var(--red); text-decoration: underline; }

/* ── Dashboard documentation drawer ──────────────────────────── */
.doc-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 31, 75, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
  z-index: 1000;
}
.doc-backdrop.open { opacity: 1; visibility: visible; }

.doc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 92vw;
  background: #fff;
  box-shadow: -4px 0 24px rgba(15, 31, 75, 0.18);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1001;
  display: flex; flex-direction: column;
}
.doc-drawer.open { transform: translateX(0); }

.doc-drawer-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  font-family: "Syne", sans-serif; font-weight: 700;
  color: var(--navy); font-size: .95rem;
}

.doc-prose {
  padding: 18px 22px 40px;
  overflow-y: auto;
  font-size: .9rem; line-height: 1.55; color: var(--text);
}
.doc-prose h2 {
  font-family: "Syne", sans-serif; font-weight: 700;
  color: var(--navy); font-size: 1.05rem;
  margin: 1.4rem 0 .5rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}
.doc-prose h2:first-child { margin-top: 0; }
.doc-prose h3 {
  font-family: "Syne", sans-serif; font-weight: 700;
  color: var(--navy); font-size: .92rem;
  margin: 1rem 0 .35rem;
}
.doc-prose p { margin: .5rem 0; }
.doc-prose ul, .doc-prose ol { margin: .4rem 0 .7rem; padding-left: 1.3rem; }
.doc-prose ul { list-style: disc; }
.doc-prose ol { list-style: decimal; }
.doc-prose li { margin: .2rem 0; }
.doc-prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .82em; background: var(--bg);
  padding: .1em .35em; border-radius: 4px; color: var(--navy);
}
.doc-prose pre {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: .7rem .9rem; overflow-x: auto;
  margin: .6rem 0;
}
.doc-prose pre code { background: none; padding: 0; font-size: .8rem; }
.doc-prose table {
  width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .82rem;
}
.doc-prose th, .doc-prose td {
  border: 1px solid var(--border); padding: .4rem .55rem; text-align: left;
}
.doc-prose th { background: var(--bg); color: var(--navy); font-weight: 600; }
.doc-prose em { color: var(--muted); }
.doc-prose a { color: var(--red); text-decoration: underline; }

.data-quality-explanation {
  padding: 1em 0 1em 1em;
  font-size:13px;
  color:var(--muted);
}