#page, body{background:var(--bg); color:var(--text);}
:root{
  /* Light theme defaults */
  --bg:#f7fafc;
  --primary:#2563eb;
  --accent2:#06B6D4;
  --gap:0.75rem;
  --muted:#6b7280;
  --card:#ffffff;
  --text:#0f172a;
  --sidebar-bg:#f8f9fa;
  --sidebar-link:#333333;
  --muted-alt:#6c757d;
  --accent-yellow:#f6c02a;
  --accent-pink:#e83aa6;
  --accent-purple:#5b46b3;
  --accent-cyan:#36c6bf;
  --border-100:#e9ecef;
  --border-200:#f1f3f5;
  --border-300:#eef2f6;
  --text-dark:#111827;
  --hover-100:#fbfdff;
  --hover-200:#f1f5f9;
  --success:#16a34a;
  --danger:#dc2626;
  --white:#ffffff;
  --radius:10px;
  /* Sidebar widths */
  --sidebar-width:280px;
  --on-primary: #071025; /* text color to use on primary (blue) backgrounds */
  --sidebar-border: rgba(15,23,42,0.04);
  --table-head-bg: rgba(0,0,0,0.03);
  /* Minimal project CSS — reset for a fresh start */

  /* Basic resets */
  html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:var(--bg);color:var(--text)}

  /* Navbar spacing */
  .navbar{box-shadow:0 1px 0 rgba(0,0,0,0.04)}

  main.container-fluid{padding:1rem 1.5rem}

  /* Utility classes for quick prototyping */
  .avatar-sm{width:32px;height:32px;border-radius:50%;object-fit:cover}
  .text-muted-small{color:var(--muted-alt);font-size:.9rem}

  /* Added utilities to replace inline styles in templates */
  .avatar-36{width:36px;height:36px;object-fit:cover;display:inline-block}
  .avatar-48{width:48px;height:48px;object-fit:cover;border-radius:8px;display:inline-block}
  .avatar-160{width:160px;height:160px;object-fit:cover;display:inline-block}
  .avatar-40{width:40px;height:40px;object-fit:cover;display:inline-block}
  .avatar-120{width:120px;height:120px;object-fit:cover;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
  /* Icon helpers for placeholder avatars */
  .member-icon-lg{font-size:36px}
  .member-icon-xl{font-size:48px}
  .logo-40{width:40px;height:40px;display:inline-block}
  .logo-36{width:36px;height:36px;display:inline-block}
  .sidebar-fixed-width{width:240px}
  .toasts-container{z-index:2150;pointer-events:none}
  .mx-auto-max-820{max-width:820px;margin-left:auto;margin-right:auto}
  .mx-auto-max-720{max-width:720px;margin-left:auto;margin-right:auto}
  .gap-8{gap:8px}
  .nav-link-opaque{opacity:1 !important}

  /* Keep bundle light — expand as needed when rebuilding design */

  /* Simple sidebar styles for the minimal scaffold */
  .sidebar{min-height:100vh}
  /* Sidebar behavior: fixed on large screens, normal flow on small screens */
  /* Sidebar: column layout where nav grows and footer stays after content.
     nav is scrollable if content exceeds viewport; footer uses margin-top:auto
     so it naturally sits at the bottom when the sidebar is tall, otherwise
     it follows the content (dynamic behaviour). */
  /* Use full viewport height now that header is removed */
  body.has-sidebar .sidebar{display:flex; flex-direction:column; background:var(--sidebar-bg); box-sizing:border-box; max-height:100vh}
  body.has-sidebar .sidebar nav{overflow:auto; flex:1 1 auto; padding-right:0.5rem}
  body.has-sidebar .sidebar .sidebar-footer{flex:0 0 auto; margin-top:auto; padding-top:12px;padding-bottom:12px}

  /* fixed footer variant (applied by JS) to pin footer to bottom-left when sidebar short */
  .sidebar-footer.fixed-footer{
    position:fixed !important;
    bottom:20px !important;
    z-index:1060 !important;
    background:transparent;
  }

  @media (min-width: 992px){
    /* Keep sidebar in normal flow on desktop so it scrolls with the page */
    body.has-sidebar .sidebar{position:static; width:240px; box-shadow:none}
    /* No manual margin-left needed because sidebar is in-flow */
    body.has-sidebar main.col{margin-left:0}
  }
  /* stronger sidebar link styles to ensure good contrast */
  .sidebar .nav-link{color:var(--sidebar-link) !important; opacity:1 !important; font-weight:500}
  .sidebar .nav-link:hover{background:rgba(0,0,0,0.03); text-decoration:none}
  .sidebar .sidebar-brand img{width:40px;height:40px}
  .sidebar .sidebar-brand span{font-size:1rem; color:var(--sidebar-link)}
  .sidebar .rounded-circle{overflow:hidden}
  /* when the sidebar element itself carries the Bootstrap .bg-light class */
  .sidebar.bg-light{background:var(--sidebar-bg) !important}
  .sidebar .bg-light{background:var(--sidebar-bg)}
  /* Force colors inside the sidebar to override Bootstrap utilities */
  .sidebar.bg-light, .sidebar.bg-light * { background: transparent !important; }
  .sidebar.bg-light { background: var(--sidebar-bg) !important; }
  .sidebar.bg-light .nav-link { color: var(--sidebar-link) !important; }
  .sidebar.bg-light .sidebar-brand span { color: var(--sidebar-link) !important; }
  .sidebar.bg-light .rounded-circle { background: rgba(0,0,0,0.06) !important; }
  .sidebar .nav-link i, .sidebar .nav-link .bi{color:var(--primary) !important; opacity:0.95}
  .sidebar.border-end{border-right:1px solid var(--sidebar-border)}

/* Dark-mode: remove residual white delimiters and borders inside the sidebar */
body.dark .sidebar,
body.dark .sidebar * {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
body.dark .sidebar{ background: var(--sidebar-bg) !important; }
body.dark .sidebar .nav-link{ background: transparent !important; color: var(--sidebar-link) !important; border: none !important; }
body.dark .sidebar .nav-link:hover, body.dark .sidebar .nav-link:focus{ background: rgba(255,255,255,0.02) !important; }
body.dark .sidebar .nav, body.dark .sidebar .nav-item{ background: transparent !important; }
body.dark .sidebar .sidebar-footer, body.dark .sidebar .sidebar-brand{ background: transparent !important; }
body.dark .sidebar .list-group-item, body.dark .sidebar .dropdown-menu, body.dark .sidebar .card{ background: transparent !important; }
body.dark .sidebar.border-end{ border-right: 1px solid rgba(255,255,255,0.02) !important; }

/* Remove hr and separators inside sidebar */
body.dark .sidebar hr, body.dark .sidebar .separator{ border-color: transparent !important; background: transparent !important; }

/* Ensure icons remain colored */
body.dark .sidebar .nav-link i, body.dark .sidebar .nav-link .bi{ color: var(--primary) !important }

/* Sidebar profile (username + role) visibility in dark mode */
body.dark .sidebar .nav-profile-text, body.dark .sidebar .nav-profile-text *{
  color: var(--sidebar-link) !important;
}
body.dark .sidebar .nav-profile-text .text-muted, body.dark .sidebar .nav-profile-text small, body.dark .sidebar .nav-profile-text .small{
  color: rgba(230,238,248,0.85) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Specific override for the sidebar profile .text-muted */
body.dark nav.sidebar .nav-profile-text span.text-muted{
  color: rgba(230,238,248,0.85) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* More aggressive overrides for sidebar profile markup */
body.dark .nav-item.nav-profile .nav-link .nav-profile-text .font-weight-medium,
body.dark .nav-item.nav-profile .nav-link .nav-profile-text span.font-weight-medium,
body.dark .nav-item.nav-profile .nav-link .nav-profile-text span{
  color: var(--sidebar-link) !important;
}
body.dark .nav-item.nav-profile .nav-link .nav-profile-text .text-muted,
body.dark .nav-item.nav-profile .nav-link .nav-profile-text .small,
body.dark .nav-profile-text .text-muted{
  color: rgba(230,238,248,0.9) !important;
  opacity: 1 !important;
}

/* Remove any low-opacity filters that could be applied by the sidebar theme */
body.dark .nav-profile-text, body.dark .nav-profile-text *{ filter:none !important; opacity:1 !important }

/* Explicit target for the newly added sidebar-role class */
body.dark .sidebar .nav-profile-text .sidebar-role{ color: rgba(230,238,248,0.95) !important; opacity:1 !important; font-weight:600 !important; }
body.dark .sidebar .nav-profile-text .sidebar-role::first-letter{ text-transform:uppercase }

/* Final override: ensure any `.text-muted` inside the sidebar profile is visible */
body.dark nav.sidebar .nav-profile-text .text-muted,
body.dark nav.sidebar .nav-profile-text small,
body.dark nav.sidebar .nav-profile-text .text-muted.small{
  color: rgba(230,238,248,0.95) !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 600 !important;
}

/* Dark-mode scrollbar styling (Webkit + Firefox) */
body.dark{
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  scrollbar-width: thin;
}

body.dark ::-webkit-scrollbar{ width:12px; height:12px; }
body.dark ::-webkit-scrollbar-track{ background: transparent; }
body.dark ::-webkit-scrollbar-thumb{ background-color: rgba(255,255,255,0.08); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
body.dark ::-webkit-scrollbar-thumb:hover{ background-color: rgba(255,255,255,0.12); }

/* Make scrollbars in specific panels slightly more visible */
body.dark .sidebar ::-webkit-scrollbar-thumb, body.dark .card ::-webkit-scrollbar-thumb, body.dark .table-responsive ::-webkit-scrollbar-thumb{ background-color: rgba(255,255,255,0.06); }


body.dark .sidebar .sidebar-brand, body.dark .sidebar .nav-profile-text{ background: transparent !important; }


  /* Ensure main content fills height on large screens */
  main.col{min-height:calc(100vh - 60px)}

  /* Metric cards styling */

/* Admin column and subnav styles removed (legacy). */

/* Admin toggle active state on header link */
a#adminToggle.admin-open{ background: rgba(0,0,0,0.04); border-radius:6px }
body.dark a#adminToggle.admin-open{ background: rgba(255,255,255,0.02) !important }
/* Legacy admin overlay/flyout styles removed — functionality deprecated */

/* Debug outline to help locate the flyout during troubleshooting */
/* debug-outline removed */



  .metric-card{border-radius:8px; overflow:hidden}
  .metric-card .icon-circle-lg{width:56px;height:56px;border-radius:50%;flex:0 0 56px}
  .bg-membres{background:var(--accent-yellow)}
  .bg-vivants{background:var(--accent-pink)}
  .bg-deces{background:var(--accent-purple)}
  .bg-familles{background:var(--accent-cyan)}
  .metric-card .display-5{font-size:2.25rem}
  .metric-card .small{font-size:0.9rem}

  /* make sure text color contrasts on bright backgrounds */
  .bg-deaths.text-white .small,.bg-deaths.text-white .display-5{color:var(--white)}
  .bg-members.text-white .small,.bg-members.text-white .display-5{color:var(--white)}
  .bg-families.text-white .small,.bg-families.text-white .display-5{color:var(--white)}

  /* small responsive tweaks */
  @media (max-width:767px){
    .metric-card .display-5{font-size:1.6rem}
    .icon-circle-lg{width:48px;height:48px}
  }

  /* Small spacing for metric grid */
  .metric-grid .metric-card{min-height:110px}

  /* Unified page title row height to harmonize pages */
  .d-flex.justify-content-between.align-items-center.mb-3{
    min-height:56px;
    align-items:center;
    margin-bottom:1rem;
  }

  /* Dashboard header small text visibility in dark mode */
  body.dark .d-flex.justify-content-between.align-items-center.mb-3 .text-muted,
  body.dark .page-title .text-muted,
  body.dark .d-flex.justify-content-between.align-items-center.mb-3 .small.text-muted{
    color: rgba(230,238,248,0.85) !important;
    opacity: 1 !important;
  }

  .page-title{min-height:56px;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}

  /* Audit table (purchase-history style) */
  .audit-table{border-collapse:collapse}
  .audit-table thead th{border-bottom:1px solid var(--border-100); font-weight:600}
  .audit-table tbody tr{border-bottom:1px solid var(--border-200)}
  /* Reduce top gap when the audit table is embedded in a column */
  .audit-container{margin-top:0}
  .audit-table thead th, .audit-table td{padding-top:0.6rem;padding-bottom:0.6rem}
  .audit-table td{vertical-align:middle}
  .audit-table .table-light{background:var(--card)}
  /* Table header using variable for light/dark adaptation */
  .card table thead th, .audit-table thead th { background: var(--table-head-bg); }
  .card table, .card table tbody tr, .card table thead th, .card table td { color: var(--text); }
  /* stronger overrides for Bootstrap table defaults */
  .table thead th, .card table thead th { background: var(--table-head-bg) !important; color: var(--text) !important; }
  .table, .card table { background: transparent !important; }
  .table td, .table th { color: var(--text) !important; border-color: rgba(0,0,0,0.06) !important; }
  /* Limit audit area height so it scrolls internally instead of extending the page */
  #recent-activity .table-responsive{max-height:48vh; overflow:auto}
  .audit-table .rounded-circle{overflow:hidden}
  .audit-table .card-footer{display:flex; justify-content:flex-start; align-items:center}
  .audit-table .badge{border-radius:6px; padding:.35em .55em}

  /* small responsive: reduce paddings */
  @media (max-width:767px){
    .audit-table td, .audit-table th{padding:.5rem .6rem}
  }

  /* Birthdays sidebar */
  .birthdays-list li{padding-top:.4rem;padding-bottom:.4rem}
  .birthdays-list .rounded-circle{width:40px;height:40px}
  .birthdays-list .fw-semibold{font-size:0.98rem}
  .birthdays-list .small{font-size:0.85rem}

  /* Reduce padding in activities fragment when in a narrow column */
  @media (min-width:992px){
    .card .table-responsive .audit-table td, .card .table-responsive .audit-table th{padding:.8rem .9rem}
    /* keep default card body padding so columns align — do not zero it globally */
    /* .card .card-body{padding:0} */
    .card .card-footer{padding:.6rem .75rem}
  }

  /* Birthdays card polish */
  .birthdays-card .birthday-logo{object-fit:contain;opacity:0.95}

  /* Unified header icon used by birthdays and latest-members */
  .header-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}
  .header-icon img{width:20px;height:20px;object-fit:contain;display:block}
  .header-icon i{font-size:20px;line-height:1;display:inline-block}
  .birthdays-card .card-body{padding:0.75rem}
  .birthdays-list li{gap:12px}
  .birthdays-list .flex-grow-1{min-width:0}
  .birthdays-list .fw-semibold{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-content{max-height:90vh; overflow:hidden}

.modal-body{max-height:70vh; overflow:auto}

  .card-modern{background:var(--surface); border-radius:var(--radius); padding:1rem; box-shadow:var(--soft-shadow); border:1px solid rgba(15,23,42,0.04)}

  .card-modern .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}

/* prevent horizontal scrollbar from accidental overflow */
html,body{overflow-x:hidden}

/* Latest members list styling */
  .latest-members .list-group-item{border-radius:8px; margin-bottom:0.45rem; border:1px solid var(--border-300)}
  .latest-members .lm-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}
  .latest-members .lm-name{font-weight:600;color:var(--text-dark)}
  .latest-members .lm-sub{font-size:0.85rem;color:var(--muted)}
  .latest-members .lm-arrow{font-size:1rem}
  .latest-members .list-group-item:hover{background:var(--hover-100)}
  .latest-members .list-group-item:active{background:var(--hover-200)}

/* compact spacing inside birthdays card */
.birthdays-card .card-body{padding:0.6rem}
.birthdays-card .list-group-item, .birthdays-list li{padding:.6rem .8rem}

/* Ensure latest-members and birthdays cards have matching inner padding and spacing */
.card.mb-3 > .card-body, .birthdays-card > .card-body {padding:0.75rem}
.birthdays-list li, .card.mb-3 .birthdays-list li {padding:.7rem 0.9rem}

/* Uniform avatar sizing across widgets to align rows */
.audit-table .rounded-circle, .birthdays-list .rounded-circle, .latest-members .lm-avatar {width:44px;height:44px}

/* Member detail page spacing and card polish */
.member-page .member-header{display:flex;gap:1rem;align-items:center; margin-top:2rem}
  .member-page .member-header .avatar{width:120px;height:120px;border-radius:12px;overflow:hidden;background:var(--border-100);flex:0 0 120px;display:flex;align-items:center;justify-content:center}
.member-page .member-header .avatar img{width:100%;height:100%;object-fit:cover}
.member-page .member-header .member-sub{margin-top:0.25rem;color:var(--muted)}
.member-info-cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:0.5rem}
@media(min-width:992px){.member-info-cards{grid-template-columns:1fr 1fr}}
.member-info-card{background:var(--card);border:1px solid rgba(15,23,42,0.04);padding:1rem;border-radius:10px;min-height:80px}
.member-info-card .label{font-size:0.85rem;color:var(--muted);margin-bottom:0.35rem}
  .member-info-card .value{font-size:0.98rem;color:var(--text-dark)}

/* Harmonize the small header band inside member info cards to match cards elsewhere */
.member-info-card .label-band{
  display:block;
  width:100%;
  padding:.35rem .6rem;
  border-radius:6px;
  margin-bottom:.6rem;
  background: rgba(0,0,0,0.02);
  font-weight:600;
  color:var(--muted);
  font-size:0.85rem;
}

/* Make sure values are readable and consistent with other card contents */
.member-info-card .value{ color: var(--text) !important; font-size:0.98rem; }

/* Dark mode specific: slightly lighter band for labels and stronger separation */
body.dark .member-info-card .label-band{
  background: rgba(255,255,255,0.04) !important;
  color: rgba(230,238,248,0.95) !important;
  font-weight:600;
  font-size:0.95rem;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Fallback: if template uses raw .label divs, style them similarly */
body.dark .member-info-card .label{ background: rgba(255,255,255,0.06) !important; padding:.35rem .6rem; border-radius:6px; display:inline-block; font-weight:700; color: rgba(230,238,248,0.95) !important; text-transform:uppercase; font-size:0.78rem; margin-bottom:0.5rem; }

/* Stronger card contour in dark mode for clearer separation */
body.dark .member-info-card{
  border:1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.01) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.01) inset, 0 6px 18px rgba(0,0,0,0.12);
}

/* Light-mode subtle separator under the label band too */
.member-info-card .label-band{ border-bottom: 1px solid rgba(0,0,0,0.04); }



/* Slightly more breathing room inside tab list items */
.tab-content .list-group-item{padding:1.2rem 1rem}
.tab-content .list-group-item .fw-semibold{margin-bottom:0.15rem}

/* Action toolbar spacing */
.member-page .action-toolbar .btn{min-width:72px}

/* Ensure the main card body has decent vertical spacing */
.member-page .card .card-body{padding:1.5rem}

/* Utility: prevent wrapping for small inline controls (labels + select) */
.nowrap-inline{white-space:nowrap;display:inline-flex;align-items:center;gap:0.5rem}
.nowrap-inline .form-select{min-width:72px}

/* Builder preview tweaks */
.register-preview-card { box-shadow: 0 1px 6px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); }
.register-preview-form .form-label { font-weight: 600; margin-bottom: 0.375rem; }
.register-preview-form .form-text { margin-top: 0.25rem; }
.register-preview-form .form-check { margin-bottom: 0.35rem; }
.register-preview-form .form-check-label { margin-left: 0.25rem; }
.register-preview-form .radio-group { margin-top: 0.25rem; }
.register-preview-form input.form-control, .register-preview-form select.form-select, .register-preview-form textarea.form-control { border-radius: 6px; }

/* Builder animations and drag styles */
.list-group-item{transition:transform .18s ease, box-shadow .12s ease, opacity .18s ease;}
.list-group-item.fade-in{animation: fadeInUp .22s ease both;}
.list-group-item.dragging{opacity:0.6; transform:scale(0.99); box-shadow:0 6px 18px rgba(0,0,0,0.08);}
.list-group-item.drag-over{outline:2px dashed rgba(0,0,0,0.08); transform: translateY(4px);}

@keyframes fadeInUp{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: translateY(0);} }

/* Dark theme overrides (Option C) */
.sidebar{background:var(--sidebar-bg)}
.sidebar .bg-light{background:var(--sidebar-bg)}
.sidebar .nav-link{color:var(--sidebar-link)}
.sidebar .nav-link i{color:var(--primary)}
.sidebar .nav-link.active, .sidebar .nav-link:focus, .sidebar .nav-link:hover{background:rgba(0,0,0,0.03)}
.card, .card-modern{background:var(--card); color:var(--text)}
.card { border:1px solid rgba(0,0,0,0.06) }
.metric-card, .member-info-card { background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01)); }
.text-muted-small, .small, .text-muted { color: var(--muted) }
  .btn-primary{ background: var(--primary); color: var(--on-primary); border-color: transparent; }
.btn-outline-secondary{ color: var(--text); border-color: rgba(0,0,0,0.06); }
a{ color: var(--primary); }
a:hover{ color: var(--accent2); }

/* Dark theme variables when body.dark is set */
body.dark { --bg:#0b1220; --primary:#38BDF8; --accent2:#60A5FA; --muted:#94A3B8; --card:#0f172a; --text:#e6eef8; --sidebar-bg:#0f172a; --sidebar-link:#dbe9f8; --table-head-bg: rgba(255,255,255,0.03); --sidebar-border: rgba(255,255,255,0.03); }

/* Ensure text on primary/blue backgrounds is harmonized and readable */
.bg-primary, .btn-primary, .badge.bg-primary, .card.bg-primary, .page-title.bg-primary, .navbar.bg-primary {
  color: var(--on-primary) !important;
}
.bg-primary a, .bg-primary .nav-link, .btn-primary, .btn-primary * { color: var(--on-primary) !important; }
.bg-primary .text-muted, .bg-primary small { color: rgba(7,16,37,0.7) !important; }

/* Specific: when primary color is used as background via inline style or custom classes */
[style*="background: var(--primary)"], [style*="background:var(--primary)"], .bg-primary, .btn.bg-primary, .card.bg-primary, .page-title.bg-primary, .navbar.bg-primary {
  color: var(--on-primary) !important;
}

/* Dark-mode overrides for form controls and tables to remove white areas left by Bootstrap */
body.dark .form-control,
body.dark .form-select,
body.dark .form-control:focus,
body.dark .form-select:focus,
body.dark .input-group .form-control,
body.dark .input-group .form-select{
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}

body.dark .form-control::placeholder{ color: rgba(230,238,248,0.45) !important; }
body.dark .form-select option{ background: var(--card) !important; color: var(--text) !important; }

/* Ensure input groups and dropdowns inside headers/cards are dark */
body.dark .card .form-control, body.dark .card .form-select, body.dark .page-title .form-control{ background: rgba(255,255,255,0.02) !important; }

/* Tables: remove white striping and use transparent backgrounds so cards show through */
body.dark .table, body.dark table, body.dark .card table, body.dark .table tbody tr, body.dark .table td, body.dark .table th{
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.03) !important;
}

/* Activities / audit table specific fixes */
body.dark .audit-table thead, body.dark .table thead.table-light, body.dark thead.table-light {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
body.dark .audit-table thead th, body.dark .table thead th { color: var(--text) !important; }

/* Badge bg-light and card-footer white in activities */
body.dark .badge.bg-light{ background: rgba(255,255,255,0.04) !important; color: var(--text) !important; }
body.dark .card-footer.bg-white, body.dark .card-footer{ background: transparent !important; color: var(--text) !important; border-top:1px solid rgba(255,255,255,0.03) !important; }

/* Avatars / rounded-circle default bg-secondary should be darker in dark mode */
body.dark .rounded-circle.bg-secondary{ background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }

/* Ensure small muted descriptions in activity rows are readable */
body.dark .audit-table .text-muted, body.dark .audit-table small.text-muted, body.dark .card .small.text-muted{ color: rgba(230,238,248,0.65) !important; }


/* Members list specific: ensure name, village and contact email are readable in dark mode */
body.dark .members-table .member-name { color: var(--text) !important; font-weight:600; }
body.dark .members-table .member-sub, body.dark .members-table small.text-muted, body.dark .members-table td small.text-muted { color: rgba(230,238,248,0.75) !important; }
body.dark .members-table td { color: var(--text) !important; }
body.dark .members-table a.member-row-link, body.dark .members-table a.member-row-link * { color: inherit !important; }

/* Ensure the 'Colonnes' / outline buttons in the members filter card are dark-mode friendly */
body.dark .card-modern .btn-outline-secondary,
body.dark .card-modern .btn-outline-secondary:focus,
body.dark .card-modern .btn-outline-secondary:hover,
body.dark .card-modern .btn-outline-secondary:active{
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

/* Also target the small variant used in the filter row */
body.dark .card-modern .btn-sm.btn-outline-secondary{ padding:.28rem .5rem; }



/* Table rows hover / striped subtle */
body.dark .table-striped tbody tr:nth-of-type(odd){ background: rgba(255,255,255,0.01) !important; }
body.dark .table-hover tbody tr:hover{ background: rgba(255,255,255,0.02) !important; }

/* Dropdown menus and popovers */
body.dark .dropdown-menu, body.dark .popover{ background: var(--card) !important; color: var(--text) !important; border-color: rgba(255,255,255,0.03) !important; }

/* Buttons: lighten outline styles for dark */
body.dark .btn-outline-secondary{ color: var(--text) !important; border-color: rgba(255,255,255,0.04) !important; }

/* Dashboard list/card fixes: force list-group items, cards and widgets to dark backgrounds */
body.dark .list-group-item,
body.dark .card .list-group-item,
body.dark .latest-members .list-group-item,
body.dark .birthdays-card .list-group-item,
body.dark .audit-table tbody tr,
body.dark .card .card-body .list-group-item{
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.03) !important;
}

body.dark .latest-members .list-group-item .lm-name,
body.dark .latest-members .list-group-item .lm-sub{ color: var(--text) !important; }

/* Ensure card headers remain visible */
body.dark .card .card-header, body.dark .card-header{ background: transparent !important; color: var(--text) !important; }

/* ensure small badges and labels contrast */
body.dark .badge, body.dark .label, body.dark .btn-badge{ background: rgba(255,255,255,0.04) !important; color: var(--text) !important; }

/* File input styling (button + filename area) */
body.dark input[type="file"]{
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  padding: .375rem .5rem !important;
  border-radius: 6px !important;
}
body.dark input[type="file"]::-webkit-file-upload-button{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: none !important;
  padding: .35rem .6rem !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
body.dark input[type="file"]::file-selector-button{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: none !important;
  padding: .35rem .6rem !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

/* Restore vivid success / danger badge colors in dark mode (Vivant / Décédé) */
body.dark .badge.bg-success{
  background-color: var(--success) !important; /* green-600 */
  color: var(--white) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.dark .badge.bg-danger, body.dark .badge.bg-danger.text-white{
  background-color: var(--danger) !important; /* red-600 */
  color: var(--white) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Keep secondary badges readable but neutral */
body.dark .badge.bg-secondary{
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Modal dark-mode fixes: make modal container transparent, use card/bg on modal-content only, and darken backdrop */
body.dark .modal{ background: transparent !important; }
body.dark .modal .modal-content, body.dark .modal .modal-header, body.dark .modal .modal-body, body.dark .modal .modal-footer{
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.04) !important;
}
body.dark .modal .modal-title{ color: var(--text) !important; font-weight:700 }
body.dark .modal .modal-body, body.dark .modal .modal-footer{ color: var(--text) !important }
body.dark .modal-backdrop.show { background-color: rgba(2,6,23,0.6) !important; }

/* Ensure buttons inside modals inherit proper colors */
body.dark .modal .btn, body.dark .modal .btn *{ color: inherit !important; }
body.dark .modal .btn-outline-secondary{ background: rgba(255,255,255,0.02) !important; color: var(--text) !important; border-color: rgba(255,255,255,0.06) !important; }

/* Buttons specific to the columns modal: outline primary and checked states */
body.dark .member-columns-modal .btn-outline-primary{ background: transparent !important; color: var(--primary) !important; border-color: rgba(255,255,255,0.06) !important; }
body.dark .member-columns-modal .btn-check:checked + .btn-outline-primary,
body.dark .member-columns-modal .btn-check:active + .btn-outline-primary{
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary) !important;
}
body.dark .member-columns-modal .form-text{ color: var(--muted) !important; }



/* Focused dark-mode fixes for member detail page to eliminate remaining gray text */
body.dark .member-page,
body.dark .member-page *,
body.dark .member-page .text-muted,
body.dark .member-page .small,
body.dark .member-page .meta,
body.dark .member-page .member-sub,
body.dark .member-page .list-group-item .small,
body.dark .member-page .tab-content .text-muted,
body.dark .member-page .member-info-card .label,
body.dark .member-page .member-info-card .value,
body.dark .member-page dl dt,
body.dark .member-page dl dd {
  color: var(--text) !important;
}

/* Keep badges and status labels visible but consistent */
body.dark .member-page .badge { color: var(--on-primary) !important; }

/* Dark-mode nav-tabs styling for member detail to avoid washed-out active tab */
body.dark .member-page .nav-tabs .nav-link{
  color: rgba(230,238,248,0.7) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  margin-right: 0.25rem;
}
body.dark .member-page .nav-tabs .nav-link:focus{
  box-shadow:none !important;
}
body.dark .member-page .nav-tabs .nav-link.active{
  color: var(--text) !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.04) !important;
  border-radius:6px !important;
}

/* Make the mail / light buttons readable in member detail dark mode */
body.dark .member-page .btn.btn-light{
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}
body.dark .member-page .btn.btn-light:hover,
body.dark .member-page .btn.btn-light:focus{
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
}
body.dark .member-page .btn.btn-light i,
body.dark .member-page .btn.btn-light .bi{ color: var(--text) !important; }