/* === Sidebar Layout (Topbar-identical glass, fixed full-height) — v4 === */
    .layout{ display:grid; grid-template-columns: minmax(0,1fr); gap:1rem; max-width:1400px; margin:0 auto; padding:0 1rem; padding-left: calc(1rem + var(--sb-w)); }
    .sidebar{
      position: fixed; top:0; left:0; bottom:0; width: var(--sb-w);
      z-index: 80; /* above topbar (z-50) */
      border: none; border-right:1px solid var(--border);
      background: linear-gradient(0deg, rgba(255,255,255,.7), rgba(255,255,255,.7));
      backdrop-filter: saturate(180%) blur(10px);
      border-radius:0; padding:.75rem;
      box-shadow: 0 2px 6px rgba(0,0,0,.06);
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, width .25s ease, padding .25s ease;
    }
    body.dark-theme .sidebar{
      background: linear-gradient(0deg, rgba(26,26,26,.65), rgba(26,26,26,.65));
      border-right:1px solid var(--border-dark);
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }
    /* Accent (match topbar accent) */
    .sidebar::before{
      content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
      background: linear-gradient(180deg, var(--teal), rgba(0,108,102,.25), transparent);
      opacity:.65; border-top-left-radius:0; border-bottom-left-radius:0;
    }
    body.dark-theme .sidebar::before{ opacity:.45 }

    .sidebar .sb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
    .sidebar .sb-title{ font-weight:700; font-size:.92rem; color: var(--muted); letter-spacing:.2px }
    .sb-toggle{ border:1px solid rgba(var(--teal-rgb), .25); background: rgba(var(--teal-rgb), .10); color: var(--teal); border-radius: 999px; padding:.35rem .6rem; transition: transform .12s ease, box-shadow .2s ease }
    .sb-toggle:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2) }
    .sb-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .25) }

    /* Nav links: identical to .topnav .nav-link */
    .sb-nav{ display:flex; flex-direction:column; gap:.25rem }
    .sb-link{
      display:inline-flex; align-items:center; gap:.45rem;
      padding:.45rem .75rem; border-radius:999px; text-decoration:none; color:inherit;
      border:1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .12s ease;
    }
    .sb-link i{ font-size:.95rem; width:1.2rem; text-align:center }
    .sb-link:hover{ background: rgba(var(--teal-rgb), .08); border-color: rgba(var(--teal-rgb), .25) }
    .sb-link.active{ background: rgba(var(--teal-rgb), .12); border-color: rgba(var(--teal-rgb), .35) }

    /* Collapsed state */
    .sidebar.collapsed{ width: var(--sb-w-collapsed); padding:.6rem }
    .sidebar.collapsed .sb-title, .sidebar.collapsed .sb-link span{ display:none }
    .sidebar.collapsed .sb-link{ justify-content:center; padding:.55rem 0 }
    .sidebar.collapsed .sb-head{ justify-content:center }

    /* When collapsed, push content less (keeps layout aligned) */
    body.sidebar-collapsed .layout{ padding-left: calc(1rem + var(--sb-w-collapsed)); }

    /* Responsive: hide sidebar on tablet/mobile */
    @media (max-width:1024px){
      .layout{ grid-template-columns: 1fr; padding-left: 1rem; }
      .sidebar{ display:none }
    }
    :root {
      --gold:#C3A431; --teal:#006C66; --burgundy:#7B1F24;
      --light-bg:#FFFFFF; --dark-bg:#1A1A1A; --text-light:#333; --text-dark:#F0F0F0;
      --muted:#777; --card:#ffffff; --card-dark:#121A1B; --border: #e4e4e4; --border-dark: #2b2b2b;
      --sb-w: 260px; /* sidebar width (expanded) */
      --sb-w-collapsed: 76px; /* sidebar width (collapsed) */
    }
    *{box-sizing:border-box}
    body{font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif; margin:0; background:var(--light-bg); color:var(--text-light)}
    /* === Pro Buttons (polished gradients, rings) === */
.btn{ position:relative; border-radius: var(--radius-xl); padding:.7rem 1.05rem; font-weight:700; letter-spacing:.2px; background: linear-gradient(180deg, rgba(var(--teal-rgb), .95), rgba(var(--teal-rgb), .80)); color:#fff; border:1px solid rgba(var(--teal-rgb), .25); box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.10); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.06), 0 14px 26px rgba(0,0,0,.16); filter: saturate(110%); }
.btn:active{ transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.12); }
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(var(--teal-rgb), .20), 0 10px 24px rgba(0,0,0,.12); }
.btn.secondary{ background: linear-gradient(180deg, rgba(68,68,68,.96), rgba(68,68,68,.82)); color:#fff; border:1px solid rgba(68,68,68,.35); }
.btn.ghost{ background: transparent; color: var(--teal); border:1px solid rgba(var(--teal-rgb),.35); box-shadow:none }
.btn.ghost:hover{ background: rgba(var(--teal-rgb),.06) }
.btn[disabled], .btn:disabled{ opacity:.65; filter: grayscale(.15); cursor:not-allowed; box-shadow:none }

/* === Sticky thead shadow on scroll === */
.table-wrap.shadowed thead th{ box-shadow: 0 8px 12px rgba(0,0,0,.08); }

/* === Table corners polish === */
thead th:first-child{ border-top-left-radius:12px }
thead th:last-child{ border-top-right-radius:12px }
tbody tr:last-child td:first-child{ border-bottom-left-radius:12px }
tbody tr:last-child td:last-child{ border-bottom-right-radius:12px }

/* === Sort indicators === */
thead th.sorted-asc::after, thead th.sorted-desc::after{ content:''; display:inline-block; margin-left:.35rem; border:6px solid transparent; opacity:.65 }
thead th.sorted-asc::after{ border-bottom-color: currentColor; transform: translateY(-2px) }
thead th.sorted-desc::after{ border-top-color: currentColor; transform: translateY(2px) }

/* === Phone links === */
.link-phone{ color: var(--teal); text-decoration: underline dotted transparent; text-underline-offset: 3px; }
.link-phone:hover{ text-decoration-color: currentColor; }

/* === Status loader === */
.status:empty{ display:none }
.status.loading::before{ content:''; display:inline-block; width:1em; height:1em; margin-right:.5rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation: spin .8s linear infinite; vertical-align:-2px }
@keyframes spin{ to{ transform:rotate(360deg) } }
    body.dark-theme{background:var(--dark-bg); color:var(--text-dark)}

    header{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; position:sticky; top:0; z-index:10; background:linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), var(--light-bg)}
    body.dark-theme header{background:linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04)), var(--dark-bg)}
    .brand{display:flex; align-items:center; gap:.75rem}
    .brand h1{font-family:'Pacifico',cursive; font-size:1.4rem; color:var(--gold); margin:0}
    nav a{color:inherit; text-decoration:none; margin-left:1rem}
    .theme-toggle{ background:var(--teal); color:#fff; padding:.5rem 1rem; border:none; border-radius:20px; cursor:pointer; transition:background .3s ease; }
    .theme-toggle:hover{ background:var(--burgundy); }

    .container{max-width:1200px; margin:1rem auto 2rem; padding:0 1rem}
    .card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem}
    body.dark-theme .card{background:var(--card-dark); border-color:var(--border-dark)}

    .filters{display:grid; grid-template-columns:repeat(12,1fr); gap:.75rem; align-items:end}
    .filters .field{grid-column: span 3}
    .filters .field.sm{grid-column: span 2}
    .filters .field.xs{grid-column: span 1}
    .filters label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.35rem}
    .filters input,.filters select{width:100%; padding:.55rem .6rem; border:1px solid var(--border); border-radius:8px; background:inherit; color:inherit}
    body.dark-theme .filters input, body.dark-theme .filters select{border-color:var(--border-dark)}
    .actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem}
    .btn{background:var(--teal); color:#fff; border:none; border-radius:8px; padding:.6rem .9rem; cursor:pointer}
    .btn.secondary{background:#555}
    .btn:hover{filter:brightness(1.05)}
    .btn:disabled{opacity:.7; cursor:not-allowed}

    .table-wrap{margin-top:1rem; overflow:auto; border:1px solid var(--border); border-radius:10px}
    body.dark-theme .table-wrap{border-color:var(--border-dark)}
    table{width:100%; border-collapse:separate; border-spacing:0}
    thead th{position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--border); padding:.65rem; text-align:left; font-weight:600; font-size:.95rem; cursor:pointer}
    body.dark-theme thead th{background:var(--card-dark); border-color:var(--border-dark)}
    tbody td{border-bottom:1px solid var(--border); padding:.6rem; font-size:.95rem}
    body.dark-theme tbody td{border-color:var(--border-dark)}
    tbody tr:hover{background-color:rgba(0,0,0,0.02)}
    body.dark-theme tbody tr:hover{background-color:rgba(255,255,255,0.04)}
    .count{margin:.5rem 0; color:var(--muted)}
    .status{margin:.5rem 0; min-height:1.25rem}
    .status.error{color:#c62828}

    .export-area{margin-top:1rem}
    .export-area textarea{width:100%; min-height:160px; padding:.75rem; border:1px solid var(--border); border-radius:8px; background:inherit; color:inherit}
    body.dark-theme .export-area textarea{border-color:var(--border-dark)}

    @media (max-width: 960px){ .filters .field{grid-column: span 6} }
    @media (max-width: 640px){ .filters{grid-template-columns:repeat(6,1fr)} .filters .field,.filters .field.sm,.filters .field.xs{grid-column: span 6} }

    /* Impression: n’afficher que le tableau et le titre */
    @media print{
      header, .filters, .actions, .status, .export-area { display:none !important }
      body{ background:#fff; color:#000 }
      thead th{ background:#fff !important }
    }

    /* --- Tableau de bord statistiques --- */
    .dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem}
    .stat-card{padding:1rem;border-radius:10px;background:var(--card);border:1px solid var(--border);text-align:center}
    body.dark-theme .stat-card{background:var(--card-dark);border-color:var(--border-dark)}
    .stat-card h3{margin:0;font-size:1.4rem;color:var(--teal)}
    .stat-card p{margin:.3rem 0 0;font-size:.9rem;color:var(--muted)}

    /* --- Column picker --- */
    .col-picker{ margin-top:.5rem; border:1px dashed var(--border); border-radius:10px; padding:.6rem; background:rgba(0,0,0,0.02) }
    body.dark-theme .col-picker{ border-color:var(--border-dark); background:rgba(255,255,255,0.04) }
    .col-picker .cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem }
    .col-picker .cols label{ display:flex; align-items:center; gap:.4rem; font-size:.9rem }
    .col-picker .toolbar{ display:flex; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap }

    /* Print: we will inject a dynamic style to hide unselected columns */
    @media print{
      .col-picker, #btnColumnPick { display:none !important }
    }

    /* --- Dashboard Pro (top section) --- */
    .dashboard-pro{ margin-bottom:1rem; padding:1rem 1rem 0.75rem; }
    .dashboard-pro .dash-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.5rem }
    .dashboard-pro .dash-head h2{ margin:.2rem 0; font-size:1.1rem; letter-spacing:.2px }
    .muted{ color: var(--muted); }

    .kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:.75rem; margin:.5rem 0 1rem }
    .kpi{ position:relative; display:flex; align-items:center; gap:.75rem; padding:.85rem; border:1px solid var(--border); border-radius:12px; background:var(--card) }
    body.dark-theme .kpi{ border-color:var(--border-dark); background:var(--card-dark) }
    .kpi .ico{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; color:#fff }
    .kpi .val{ font-weight:700; font-size:1.3rem; line-height:1 }
    .kpi .lbl{ font-size:.85rem; color:var(--muted) }

    /* accents */
    .accent-total .ico{ background:#6c5ce7 }
    .accent-vie .ico{ background:#00a86b }
    .accent-membre .ico{ background:#0077b6 }
    .accent-indecis .ico{ background:#9e9e9e }
    .accent-passage .ico{ background:#8e44ad }
    .accent-bapt .ico{ background:#2d98da }
    .accent-immersion .ico{ background:#1abc9c }
    .accent-hommes .ico{ background:#34495e }
    .accent-femmes .ico{ background:#e84393 }

    /* segments */
    .segments{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin: .25rem 0 1rem }
    .segment{ border:1px dashed var(--border); border-radius:12px; padding:.75rem }
    body.dark-theme .segment{ border-color:var(--border-dark) }
    .segment h4{ margin:.1rem 0 .6rem; font-size:.95rem; font-weight:600 }
    .chips{ display:flex; flex-wrap:wrap; gap:.4rem }
    .chip{ padding:.35rem .55rem; border:1px solid var(--border); border-radius:999px; font-size:.85rem; background:var(--card) }
    body.dark-theme .chip{ border-color:var(--border-dark); background:var(--card-dark) }
    /* ===================== UI/UX POLISH PACK ===================== */
/* --- Topbar accent & progress --- */
.topbar{ position: sticky; top:0; }
.topbar::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, var(--teal), rgba(0,108,102,.25), transparent); opacity:.65; pointer-events:none }
body.dark-theme .topbar::after{ opacity:.45 }

.topbar-progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, var(--teal), #00a79d); transform: scaleX(0); transform-origin: left; transition: transform .35s ease }
.topbar-progress.active{ transform: scaleX(1) }

/* --- Mobile nav toggle --- */
.nav-toggle{ border:1px solid rgba(var(--teal-rgb), .25); background: rgba(var(--teal-rgb), .10); color: var(--teal); box-shadow: var(--shadow-1); }
.nav-toggle:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2) }
.nav-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .25) }

/* --- Responsive nav: collapsed on small screens --- */
@media (max-width: 800px){
  .topbar .inner{ align-items: flex-start; }
  .topnav{ display:none; width:100%; padding-top:.25rem }
  .topnav.open{ display:flex; flex-direction: column; align-items: flex-start; gap:.35rem }
}
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter: saturate(220%) blur(20px); -webkit-backdrop-filter: saturate(220%) blur(20px); border-bottom:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44)), radial-gradient(140% 220% at 50% -40%, rgba(255,255,255,.35), rgba(255,255,255,0)); box-shadow: 0 3px 10px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.25); }
body.dark-theme .topbar{ background: linear-gradient(0deg, rgba(26,26,26,.65), rgba(26,26,26,.65)); border-color: var(--border-dark); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
/* Shared surface identity between Topbar and Sidebar (same glass, texture, shadow) */
.topbar, .sidebar{
  backdrop-filter: saturate(220%) blur(20px);
  -webkit-backdrop-filter: saturate(220%) blur(20px);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44)), radial-gradient(140% 220% at 50% -40%, rgba(255,255,255,.35), rgba(255,255,255,0));
  box-shadow: 0 3px 10px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.25);
}
body.dark-theme .topbar, body.dark-theme .sidebar{
  background: linear-gradient(0deg, rgba(26,26,26,.65), rgba(26,26,26,.65));
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.topbar .inner{ max-width:1200px; margin:0 auto; padding:.6rem 1rem; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:1rem }

/* Center nav on desktop, span full width when opened on mobile */
.topnav{ justify-content:center }
.actionsbar{ position:absolute; right:1rem; top:50%; transform: translateY(-50%); display:flex; align-items:center; gap:.5rem; z-index:60 }
@media (max-width: 800px){
  .actionsbar{ display:none }
  .topnav.open{ grid-column: 1 / -1; }
}

.brand{ display:flex; align-items:center; gap:.65rem }
.brand .logo{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; background: linear-gradient(135deg, var(--teal), #009b90); box-shadow: 0 6px 14px rgba(0,0,0,.12), inset 0 -1px 0 rgba(255,255,255,.25) }
.brand .logo i{ font-size:1.1rem }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.1 }
.brand .brand-text h1{ margin:0; font-family:'Pacifico',cursive; font-size:1.15rem; color:var(--gold) }
.brand .brand-text .brand-sub{ font-size:.8rem; color:var(--muted) }

.topnav{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.topnav .nav-link{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:999px; text-decoration:none; color:inherit; border:1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .12s ease }
.topnav .nav-link:hover{ background: rgba(var(--teal-rgb), .08); border-color: rgba(var(--teal-rgb), .25) }
.topnav .nav-link.current{ background: rgba(var(--teal-rgb), .12); border-color: rgba(var(--teal-rgb), .35) }
.topnav .nav-link i{ font-size:.95rem }

/* Shrink on scroll */
.topbar.is-scrolled .inner{ padding:.4rem 1rem }
.topbar.is-scrolled .brand .logo{ transform: scale(.92) }

/* A11y helper */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
:root{ --teal-rgb: 0,108,102; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --shadow-1: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-2: 0 8px 22px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06); --shadow-3: 0 14px 32px rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.10); }

/* Cards / Containers */
.card{ border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: box-shadow .25s ease, transform .25s ease; }
.card:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); }

/* Buttons */
.btn{ position:relative; border-radius: var(--radius-xl); padding:.65rem 1rem; font-weight:600; letter-spacing:.2px; box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 6px 14px rgba(0,0,0,.10); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; }
.btn i{ margin-right:.45rem }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.14); }
.btn:active{ transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.10); }
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .20), 0 10px 22px rgba(0,0,0,.12); }

.btn.secondary{ background: linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03)), #4a4a4a; }
.btn.secondary:hover{ filter:none }

/* Ghost / subtle button for toolbars (optional usage) */
.btn.ghost{ background: transparent; color: var(--teal); border:1px solid rgba(var(--teal-rgb),.25); box-shadow:none }
.btn.ghost:hover{ background: rgba(var(--teal-rgb),.06) }

/* Header & theme toggle polishing */
header{ box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.theme-toggle{ border-radius: var(--radius-xl); box-shadow: 0 2px 10px rgba(0,0,0,.10); font-weight:600 }
.theme-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .20) }

    /* Inputs & Selects */
    .filters input, .filters select{ border-radius: var(--radius-md); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; backdrop-filter: saturate(120%) blur(0px); }
    .filters input::placeholder, .filters select::placeholder{ color: rgba(127,127,127,.8) }
    .filters input:focus, .filters select:focus{ outline:none; border-color: rgba(var(--teal-rgb), .45); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .18); background: rgba(0,0,0,.01) }

    /* === Select (dropdown) polish === */
    .filters select{
      -webkit-appearance:none; -moz-appearance:none; appearance:none; /* hide native arrow */
      cursor: pointer;
      padding-right: 2.2rem; /* room for chevron */
      min-height: 40px; /* consistent height */
      background-repeat: no-repeat;
      background-position: right .8rem center;
      background-size: 14px 14px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
    body.dark-theme .filters select{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BFC4CA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
    .filters select:hover{ background-color: rgba(0,0,0,.02); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .10); border-color: rgba(var(--teal-rgb), .35); }
    body.dark-theme .filters select:hover{ background-color: rgba(255,255,255,.04); }
    .filters select:disabled{ color:#9aa0a6; background-color: rgba(0,0,0,.03); cursor:not-allowed; opacity:.8 }

/* Table polish */
.table-wrap{ border-radius: var(--radius-lg); box-shadow: var(--shadow-1); position:relative; }
.table-skeleton{
  position:absolute; inset:0; display:none; padding:1rem;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  backdrop-filter: blur(2px);
  z-index:2;
  grid-template-columns:1fr;
  gap:.5rem;
}
body.dark-theme .table-skeleton{
  background:linear-gradient(135deg, rgba(17,24,39,.85), rgba(17,24,39,.75));
}
.table-skeleton.active{ display:grid; }
.skeleton-row{
  height:32px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.05) 100%);
  animation: shimmer 1.4s ease-in-out infinite;
}
body.dark-theme .skeleton-row{
  background:linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.15) 40%, rgba(255,255,255,.07) 100%);
}
@keyframes shimmer{
  0%{ opacity:0.7; transform:translateX(-2%); }
  50%{ opacity:1; transform:translateX(2%); }
  100%{ opacity:0.7; transform:translateX(-2%); }
}
thead th{ font-weight:700; letter-spacing:.2px }
tbody tr:nth-child(even){ background: rgba(0,0,0,.015) }
body.dark-theme tbody tr:nth-child(even){ background: rgba(255,255,255,.03) }
tbody tr:hover{ background: rgba(0,0,0,.035) }
body.dark-theme tbody tr:hover{ background: rgba(255,255,255,.06) }

.active-filters-badge{
  margin-top:1rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  border:1px dashed rgba(0,0,0,.2);
  color:rgba(0,0,0,.65);
  transition:all .2s ease;
}
.active-filters-badge.active{
  border-color:rgba(var(--teal-rgb),.4);
  background:rgba(var(--teal-rgb),.08);
  color:var(--teal);
  box-shadow:0 4px 12px rgba(0,108,102,.12);
}
body.dark-theme .active-filters-badge{
  border-color:rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);
}
body.dark-theme .active-filters-badge.active{
  background:rgba(0,108,102,.25);
  color:#E4FAF7;
}

/* Column picker card */
.col-picker{ border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }

/* Dashboard KPIs polish */
.kpi{ border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .25s ease }
.kpi:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2) }
.kpi .ico{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.12) }

/* Small badges / chips */
.chip{ box-shadow: 0 1px 0 rgba(0,0,0,.04) }

/* Status message */
.status{ border-radius: var(--radius-sm); padding:.35rem .5rem }
.status.error{ background: rgba(198,40,40,.08); border:1px solid rgba(198,40,40,.25) }

/* Count label */
.count{ font-weight:600 }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
}