/* ============================================================================
   MyEventAlly — Portal Theme Layer
   ----------------------------------------------------------------------------
   Re-skins the existing Argon / Bootstrap 5 admin & venue portals to match the
   MyEventAlly demo design system (clean, modern, slate + brand-blue).

   STRATEGY: This file loads LAST (after argon-dashboard.css and style.css), so
   it overrides Argon's shared component classes. Because every page uses the
   same classes (.card, .btn, .badge, .table, .form-control, ...), restyling
   them here transforms all authenticated pages at once.

   SCOPE: Everything is scoped to the authenticated shell — `body.g-sidenav-show`
   (only set on logged-in pages), `.main-content`, `#sidenav-main`, `.navbar-main`.
   Login / register / password pages render OUTSIDE this shell, so they are left
   exactly as they were. Do not remove the scoping prefixes.

   Icon fonts (Font Awesome, Nucleo, Material Design, Feather) set their own
   font-family with high specificity, so the body font override below never
   touches them.
   ========================================================================== */

:root {
  /* Brand (blue) */
  --mea-brand-50:  #eef5ff;
  --mea-brand-100: #d9e8ff;
  --mea-brand-200: #bcd6ff;
  --mea-brand-300: #8ebbff;
  --mea-brand-400: #5f9bff;
  --mea-brand-500: #4088ff;
  --mea-brand-600: #2f6ae6;
  --mea-brand-700: #245bc4;
  --mea-brand-800: #1e4a9c;
  --mea-brand-900: #1b3f80;

  /* Slate (neutrals) */
  --mea-slate-50:  #f8fafc;
  --mea-slate-100: #f1f5f9;
  --mea-slate-200: #e2e8f0;
  --mea-slate-300: #cbd5e1;
  --mea-slate-400: #94a3b8;
  --mea-slate-500: #64748b;
  --mea-slate-600: #475569;
  --mea-slate-700: #334155;
  --mea-slate-800: #1e293b;
  --mea-slate-900: #0f172a;

  /* Accents */
  --mea-emerald-50:  #ecfdf5;
  --mea-emerald-100: #d1fae5;
  --mea-emerald-500: #10b981;
  --mea-emerald-600: #059669;
  --mea-emerald-700: #047857;
  --mea-amber-50:  #fffbeb;
  --mea-amber-100: #fef3c7;
  --mea-amber-500: #f59e0b;
  --mea-amber-700: #b45309;
  --mea-red-50:  #fef2f2;
  --mea-red-100: #fee2e2;
  --mea-red-500: #ef4444;
  --mea-red-600: #dc2626;
  --mea-red-700: #b91c1c;
  --mea-violet-50:  #f5f3ff;
  --mea-violet-100: #ede9fe;
  --mea-violet-500: #8b5cf6;
  --mea-violet-600: #7c3aed;
  --mea-violet-700: #6d28d9;

  /* Tokens */
  --mea-radius-sm: 8px;
  --mea-radius:    12px;
  --mea-radius-lg: 16px;
  --mea-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, .06), 0 1px 3px 0 rgba(15, 23, 42, .04);
  --mea-shadow:    0 4px 12px -2px rgba(15, 23, 42, .10), 0 2px 6px -2px rgba(15, 23, 42, .06);
  --mea-shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, .18);
  --mea-ring:      0 0 0 3px var(--mea-brand-100);
  --mea-sidebar-w: 260px;
  --mea-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- Base ---- */
body.g-sidenav-show {
  font-family: var(--mea-font);
  background-color: var(--mea-slate-100) !important;
  color: var(--mea-slate-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.g-sidenav-show .main-content {
  background-color: var(--mea-slate-100);
}

/* Light, unobtrusive scrollbars (matches demo) */
body.g-sidenav-show * {
  scrollbar-width: thin;
  scrollbar-color: var(--mea-slate-300) transparent;
}
body.g-sidenav-show *::-webkit-scrollbar { width: 10px; height: 10px; }
body.g-sidenav-show *::-webkit-scrollbar-thumb {
  background: var(--mea-slate-300);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
body.g-sidenav-show *::-webkit-scrollbar-thumb:hover { background: var(--mea-slate-400); background-clip: content-box; }

/* Headings tuned to the demo (bold, tight, slate-900) */
body.g-sidenav-show .main-content h1,
body.g-sidenav-show .main-content h2,
body.g-sidenav-show .main-content h3,
body.g-sidenav-show .main-content h4,
body.g-sidenav-show .main-content h5,
body.g-sidenav-show .main-content h6 {
  color: var(--mea-slate-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* =========================================================== SIDEBAR ====== */
#sidenav-main.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--mea-sidebar-w);
  height: 100vh;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--mea-slate-200) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  z-index: 1030;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
#sidenav-main .navbar-brand h6 span { color: var(--mea-brand-600); }
#sidenav-main .mea-sidenav-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--mea-slate-200);
  font-size: .68rem;
  color: var(--mea-slate-400);
}

#sidenav-main .sidenav-header {
  display: flex;
  align-items: center;
  height: 64px;
  min-height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--mea-slate-200);
}
#sidenav-main .navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
#sidenav-main .navbar-brand img { max-height: 34px !important; height: 34px; width: auto; }
#sidenav-main .navbar-brand h6 {
  margin: 0 !important;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mea-slate-900);
  text-align: left !important;
}
/* Hide the Argon divider under the brand — the header border replaces it */
#sidenav-main .sidenav-header + hr.horizontal { display: none; }

#sidenav-main .navbar-collapse { padding: 12px; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
#sidenav-main .navbar-nav { gap: 4px; }

#sidenav-main .nav-item { margin: 0; }
#sidenav-main .nav-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 9px 12px !important;
  margin: 0 !important;
  border-radius: var(--mea-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  color: var(--mea-slate-600) !important;
  transition: background-color .15s ease, color .15s ease;
  box-shadow: none !important;
  background: transparent !important;
}
#sidenav-main .nav-link:hover {
  background: var(--mea-slate-100) !important;
  color: var(--mea-slate-800) !important;
}
#sidenav-main .nav-link .icon,
#sidenav-main .nav-link .icon-shape {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: var(--mea-slate-100) !important;
  box-shadow: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
#sidenav-main .nav-link .icon i,
#sidenav-main .nav-link .icon-shape i {
  color: var(--mea-slate-500) !important;
  font-size: .8rem !important;
  opacity: 1 !important;
  line-height: 1 !important;
  display: block !important;
}
#sidenav-main .nav-link .nav-link-text { margin: 0 !important; }

/* Active item — brand wash, matches demo */
#sidenav-main .nav-link.active {
  background: var(--mea-brand-50) !important;
  color: var(--mea-brand-700) !important;
}
#sidenav-main .nav-link.active .icon,
#sidenav-main .nav-link.active .icon-shape {
  background: var(--mea-brand-100) !important;
}
#sidenav-main .nav-link.active .icon i { color: var(--mea-brand-700) !important; }

/* ============================================================ TOPBAR ====== */
body.g-sidenav-show .navbar-main {
  position: sticky;
  top: 0;
  z-index: 1020;
  margin: 0 !important;
  padding: 0 !important;
  height: 64px;
  min-height: 64px;
  background: rgba(255, 255, 255, .9) !important;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--mea-slate-200);
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.g-sidenav-show .navbar-main .container-fluid { padding: 0 20px !important; height: 100%; }
body.g-sidenav-show .navbar-main .navbar-collapse { height: 100%; align-items: center; }

/* Topbar profile dropdown */
body.g-sidenav-show .navbar-main .nav-link { color: var(--mea-slate-500) !important; }
body.g-sidenav-show .navbar-main .fa-user-circle { color: var(--mea-slate-500); }
body.g-sidenav-show .navbar-main .dropdown-menu {
  border: 1px solid var(--mea-slate-200);
  border-radius: var(--mea-radius-sm);
  box-shadow: var(--mea-shadow-lg) !important;
  padding: 6px !important;
  min-width: 200px;
}
body.g-sidenav-show .navbar-main .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: .85rem;
  color: var(--mea-slate-600);
}
body.g-sidenav-show .navbar-main .dropdown-item:hover { background: var(--mea-slate-100); color: var(--mea-slate-900); }
body.g-sidenav-show .navbar-main .dropdown-item.logout { color: var(--mea-red-600); font-weight: 600; }
body.g-sidenav-show .navbar-main .dropdown-item.logout:hover { background: var(--mea-red-50); }

/* ============================================================== FOOTER ==== */
body.g-sidenav-show .main-content .footer {
  border-top: 1px solid var(--mea-slate-200);
  margin-top: 24px;
}
body.g-sidenav-show .main-content .footer .copyright,
body.g-sidenav-show .main-content .footer .nav-footer .nav-link {
  color: var(--mea-slate-500) !important;
  font-size: .82rem;
}

/* ======================================================= LAYOUT OFFSET === */
@media (min-width: 1200px) {
  #sidenav-main.sidenav { transform: translateX(0); }
  body.g-sidenav-show .main-content { margin-left: var(--mea-sidebar-w) !important; }
}
@media (max-width: 1199.98px) {
  #sidenav-main.sidenav {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--mea-shadow-lg) !important;
  }
  body.g-sidenav-pinned #sidenav-main.sidenav { transform: translateX(0); }
  body.g-sidenav-show .main-content { margin-left: 0 !important; }

  /* Dimmed backdrop behind the open drawer. Tapping it closes the drawer via
     Argon's existing outside-click handler (target = body, not a toggler line). */
  body.g-sidenav-pinned::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1029;               /* under sidebar (1030), over topbar/content */
    animation: mea-backdrop-in .2s ease-out;
  }
  /* Make the drawer's close (X) clearly visible on mobile */
  #sidenav-main #iconSidenav {
    font-size: 1.1rem;
    color: var(--mea-slate-500) !important;
    opacity: 1 !important;
  }
}
@keyframes mea-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Tighter gutters on small phones so content isn't cramped */
@media (max-width: 575.98px) {
  body.g-sidenav-show .main-content .container-fluid { padding-left: 14px; padding-right: 14px; }
  .mea-page-title { font-size: 1.25rem; }
  /* Detail-page info pills (list-group items) are oversized on phones — tighten */
  body.g-sidenav-show .main-content .list-group-item.p-4 { padding: 0.9rem 1rem !important; }
  /* Detail-page images shouldn't hug the edge — keep them centered and contained */
  body.g-sidenav-show .main-content .card .w-100[style*="max-width"] { margin-left: auto; margin-right: auto; }
  /* Compact the 2-up stat cards so they fit two-across on phones */
  .mea-stat-card { padding: 12px; gap: 10px; }
  .mea-stat-ic { width: 38px; height: 38px; font-size: .9rem; }
  .mea-stat-value { font-size: 1.25rem; }
  .mea-stat-label { font-size: .62rem; }
}

/* ============================ RESPONSIVE TABLES (phones/tablets) =========== */
/* Below the lg breakpoint, stack each DataTables row into a labeled card so
   lists read cleanly on phones and portrait tablets instead of scrolling wide.
   Cell labels come from mea-responsive-tables.js (data-label = column header). */
@media (max-width: 991.98px) {
  body.g-sidenav-show .main-content table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
  }
  body.g-sidenav-show .main-content table.dataTable thead { display: none; }
  body.g-sidenav-show .main-content table.dataTable tbody,
  body.g-sidenav-show .main-content table.dataTable tbody > tr { display: block; }
  /* Each record is a card; its fields lay out as a 2-column grid of compact
     label-above-value tiles, so cards stay short instead of tall. */
  body.g-sidenav-show .main-content table.dataTable tbody > tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    border: 1px solid var(--mea-slate-200);
    border-radius: var(--mea-radius);
    background: #fff;
    box-shadow: var(--mea-shadow-sm);
    margin: 0 14px 12px;
    padding: 14px 16px;
  }
  body.g-sidenav-show .main-content table.dataTable tbody > tr > td {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    font-size: .82rem;
    color: var(--mea-slate-700);
  }
  body.g-sidenav-show .main-content table.dataTable tbody > tr > td::before {
    content: attr(data-label);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .6rem;
    letter-spacing: .04em;
    color: var(--mea-slate-400);
  }
  /* Row-number column adds little in card view — hide it */
  body.g-sidenav-show .main-content table.dataTable tbody > tr > td[data-label="#"] { display: none; }
  /* Keep the "no data" placeholder readable (spans the full card width) */
  body.g-sidenav-show .main-content table.dataTable tbody > tr > td.dataTables_empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--mea-slate-400);
  }
  body.g-sidenav-show .main-content table.dataTable tbody > tr > td.dataTables_empty::before { content: none; }
}

/* Detail-page info pills → 2 across on phones (matches the mobile table cards).
   Scoped via :has() to the bg-gray-100 pill lists, so dashboard/flush lists are
   unaffected; degrades gracefully to single-column where :has isn't supported. */
@media (max-width: 767.98px) {
  body.g-sidenav-show .main-content .list-group:has(> .list-group-item.bg-gray-100) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-left: 0;
  }
  body.g-sidenav-show .main-content .list-group:has(> .list-group-item.bg-gray-100) > .list-group-item {
    margin-bottom: 0 !important;
    padding: 0.85rem 0.9rem !important;
    height: 100%;
  }
}

/* Info cards / contact lists explicitly marked .mea-mobile-2col → 2-column on
   phones. Headers (<h6>) and dividers (<hr>) span the full width. */
@media (max-width: 767.98px) {
  body.g-sidenav-show .main-content .mea-mobile-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    align-content: start;
  }
  body.g-sidenav-show .main-content .mea-mobile-2col > h6,
  body.g-sidenav-show .main-content .mea-mobile-2col > hr {
    grid-column: 1 / -1;
  }
  body.g-sidenav-show .main-content .mea-mobile-2col > p { margin-bottom: 0; }
  body.g-sidenav-show .main-content .mea-mobile-2col > .list-group-item {
    flex-wrap: wrap;
    padding: .35rem 0 !important;
  }
  body.g-sidenav-show .main-content .mea-mobile-2col > .list-group-item .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }
}

/* ============================================================== CARDS ===== */
body.g-sidenav-show .main-content .card {
  border: 1px solid var(--mea-slate-200) !important;
  border-radius: var(--mea-radius) !important;
  background: #fff;
  box-shadow: var(--mea-shadow-sm) !important;
}
body.g-sidenav-show .main-content .card > .card-header,
body.g-sidenav-show .main-content .card > .card-header.pb-0 {
  background: transparent !important;
  border-bottom: 1px solid var(--mea-slate-200) !important;
  padding: 16px 20px !important;
}
body.g-sidenav-show .main-content .card > .card-body { padding: 20px !important; }
body.g-sidenav-show .main-content .card-header h4,
body.g-sidenav-show .main-content .card-header h5,
body.g-sidenav-show .main-content .card-header h6 { margin: 0; font-weight: 700; color: var(--mea-slate-800); }
body.g-sidenav-show .main-content .card-header p { color: var(--mea-slate-500); }

/* ============================================================ BUTTONS ===== */
body.g-sidenav-show .main-content .btn {
  border-radius: var(--mea-radius-sm) !important;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
  padding: .55rem 1rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.g-sidenav-show .main-content .btn:focus-visible { outline: none; box-shadow: var(--mea-ring) !important; }
body.g-sidenav-show .main-content .btn-sm { padding: .4rem .75rem; font-size: .75rem; }
body.g-sidenav-show .main-content .btn-lg { padding: .65rem 1.25rem; font-size: .9rem; }

body.g-sidenav-show .main-content .btn-primary,
body.g-sidenav-show .main-content .btn.bg-gradient-primary {
  background: var(--mea-brand-600) !important;
  border-color: var(--mea-brand-600) !important;
  color: #fff !important;
}
body.g-sidenav-show .main-content .btn-primary:hover,
body.g-sidenav-show .main-content .btn.bg-gradient-primary:hover {
  background: var(--mea-brand-700) !important;
  border-color: var(--mea-brand-700) !important;
}
body.g-sidenav-show .main-content .btn-outline-primary {
  color: var(--mea-brand-600) !important;
  border-color: var(--mea-brand-300) !important;
  background: #fff !important;
}
body.g-sidenav-show .main-content .btn-outline-primary:hover {
  background: var(--mea-brand-50) !important;
  color: var(--mea-brand-700) !important;
  border-color: var(--mea-brand-400) !important;
}
body.g-sidenav-show .main-content .btn-danger,
body.g-sidenav-show .main-content .btn.bg-gradient-danger {
  background: var(--mea-red-600) !important;
  border-color: var(--mea-red-600) !important;
  color: #fff !important;
}
body.g-sidenav-show .main-content .btn-danger:hover { background: var(--mea-red-700) !important; border-color: var(--mea-red-700) !important; }
body.g-sidenav-show .main-content .btn-success,
body.g-sidenav-show .main-content .btn.bg-gradient-success {
  background: var(--mea-emerald-600) !important;
  border-color: var(--mea-emerald-600) !important;
  color: #fff !important;
}
body.g-sidenav-show .main-content .btn-success:hover { background: var(--mea-emerald-700) !important; border-color: var(--mea-emerald-700) !important; }
body.g-sidenav-show .main-content .btn-secondary,
body.g-sidenav-show .main-content .btn-outline-secondary {
  color: var(--mea-slate-700) !important;
  border-color: var(--mea-slate-300) !important;
  background: #fff !important;
}
body.g-sidenav-show .main-content .btn-outline-secondary:hover { background: var(--mea-slate-50) !important; }

/* ============================================================= BADGES ===== */
body.g-sidenav-show .main-content .badge {
  border-radius: 6px !important;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .01em;
  text-transform: none;
  padding: .3em .6em;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
/* Soft, demo-style badge palette — overrides Argon's saturated gradients */
body.g-sidenav-show .main-content .badge.bg-gradient-primary,
body.g-sidenav-show .main-content .badge.bg-primary {
  background: var(--mea-brand-50) !important; color: var(--mea-brand-700) !important;
  box-shadow: inset 0 0 0 1px var(--mea-brand-200);
}
body.g-sidenav-show .main-content .badge.bg-gradient-info,
body.g-sidenav-show .main-content .badge.bg-info {
  background: var(--mea-brand-50) !important; color: var(--mea-brand-700) !important;
  box-shadow: inset 0 0 0 1px var(--mea-brand-200);
}
body.g-sidenav-show .main-content .badge.bg-gradient-success,
body.g-sidenav-show .main-content .badge.bg-success {
  background: var(--mea-emerald-50) !important; color: var(--mea-emerald-700) !important;
  box-shadow: inset 0 0 0 1px var(--mea-emerald-100);
}
body.g-sidenav-show .main-content .badge.bg-gradient-warning,
body.g-sidenav-show .main-content .badge.bg-warning {
  background: var(--mea-amber-50) !important; color: var(--mea-amber-700) !important;
  box-shadow: inset 0 0 0 1px var(--mea-amber-100);
}
body.g-sidenav-show .main-content .badge.bg-gradient-danger,
body.g-sidenav-show .main-content .badge.bg-danger {
  background: var(--mea-red-50) !important; color: var(--mea-red-700) !important;
  box-shadow: inset 0 0 0 1px var(--mea-red-100);
}
body.g-sidenav-show .main-content .badge.bg-gradient-secondary,
body.g-sidenav-show .main-content .badge.bg-secondary {
  background: var(--mea-slate-100) !important; color: var(--mea-slate-600) !important;
  box-shadow: inset 0 0 0 1px var(--mea-slate-200);
}
body.g-sidenav-show .main-content .badge.bg-gradient-dark {
  background: var(--mea-slate-800) !important; color: #fff !important; box-shadow: none;
}

/* =============================================================== FORMS ===== */
body.g-sidenav-show .main-content .form-control,
body.g-sidenav-show .main-content .form-select {
  border: 1px solid var(--mea-slate-300) !important;
  border-radius: var(--mea-radius-sm) !important;
  padding: .55rem .75rem;
  font-size: .85rem;
  color: var(--mea-slate-800);
  background-color: #fff;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.g-sidenav-show .main-content .form-control::placeholder { color: var(--mea-slate-400); }
body.g-sidenav-show .main-content .form-control:focus,
body.g-sidenav-show .main-content .form-select:focus {
  border-color: var(--mea-brand-400) !important;
  box-shadow: var(--mea-ring) !important;
  outline: none;
}
body.g-sidenav-show .main-content label,
body.g-sidenav-show .main-content .form-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--mea-slate-500);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .35rem;
}
body.g-sidenav-show .main-content .form-check-input:checked {
  background-color: var(--mea-brand-600);
  border-color: var(--mea-brand-600);
}

/* Status toggle (Active/Inactive switch): pin each label against its side.
   The knob always sits on the opposite side, so the label stays readable —
   "Active" hugs the left, "Inactive" hugs the right. */
body.g-sidenav-show .main-content .switch .on,
body.g-sidenav-show .main-content .switch .off {
  transform: translateY(-50%);
}
body.g-sidenav-show .main-content .switch .on  { left: 12px; right: auto; }
body.g-sidenav-show .main-content .switch .off { right: 12px; left: auto; }

/* ============================================================== TABLES ===== */
body.g-sidenav-show .main-content .table { color: var(--mea-slate-700); margin-bottom: 0; }
body.g-sidenav-show .main-content .table > thead th,
body.g-sidenav-show .main-content .table thead th {
  text-transform: uppercase;
  font-size: .65rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mea-slate-400) !important;
  background: var(--mea-slate-50);
  border-bottom: 1px solid var(--mea-slate-200) !important;
  padding: 12px 16px;
}
body.g-sidenav-show .main-content .table > tbody td,
body.g-sidenav-show .main-content .table tbody td {
  font-size: .82rem;
  color: var(--mea-slate-700);
  border-bottom: 1px solid var(--mea-slate-100) !important;
  padding: 12px 16px;
  vertical-align: middle;
}
body.g-sidenav-show .main-content .table > tbody tr:hover td { background: var(--mea-slate-50); }
body.g-sidenav-show .main-content .table > tbody tr:last-child td { border-bottom: 0 !important; }

/* Clickable table rows (e.g. distress signals) show a pointer cursor */
body.g-sidenav-show .main-content table.dataTable tbody tr[data-href] { cursor: pointer; }

/* Drop Bootstrap zebra striping — the demo uses clean rows with hover only */
body.g-sidenav-show .main-content .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: transparent;
}

/* DataTables chrome */
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_filter input,
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--mea-slate-300) !important;
  border-radius: var(--mea-radius-sm) !important;
  padding: .4rem .6rem;
  font-size: .8rem;
}
/* Pad the DataTables controls so they align with the table's cell padding
   even though the card body uses px-0 to let the table span full width */
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_length,
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_filter {
  margin: 0 16px 14px;
  font-size: .82rem;
  color: var(--mea-slate-500);
}
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_info {
  padding: 14px 16px 0;
  font-size: .78rem;
  color: var(--mea-slate-400);
}
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_paginate { padding: 14px 16px 0; }

/* ===================== Unified DataTables toolbar (one aligned row) ========
   Every table control lives in one flex row, vertically centered. On phones the
   two clusters stack and each control goes full width. */
body.g-sidenav-show .main-content .mea-dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 14px 16px;
}
body.g-sidenav-show .main-content .mea-dt-toolbar-left,
body.g-sidenav-show .main-content .mea-dt-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
/* Uniform control height → guarantees clean vertical alignment across controls */
body.g-sidenav-show .main-content .mea-dt-toolbar select,
body.g-sidenav-show .main-content .mea-dt-toolbar input,
body.g-sidenav-show .main-content .mea-dt-toolbar .btn {
  height: 40px;
  margin: 0;
}
/* DataTables' own "Show N entries" / "Search:" wrappers */
body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_length,
body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_filter {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_length label,
body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .82rem;
  color: var(--mea-slate-500);
  white-space: nowrap;
}
body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_length select { width: auto; min-width: 72px; }
body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_filter input { width: 220px; max-width: 100%; }
/* Custom filter form: override its Bootstrap grid so it flows inline + centered */
body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form,
body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form .row {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 10px;
}
body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center !important;
}
/* Hide the orphaned filter label (the default "All" option is self-explanatory) */
body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form select { width: auto; min-width: 150px; }
/* Primary action (Add / Export) moved beside Search */
body.g-sidenav-show .main-content .mea-dt-toolbar-right .mea-page-actions {
  display: flex; align-items: center; gap: 8px; margin: 0;
}
/* Footer: info + pagination */
body.g-sidenav-show .main-content .mea-dt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px 4px;
}
body.g-sidenav-show .main-content .mea-dt-foot .dataTables_info,
body.g-sidenav-show .main-content .mea-dt-foot .dataTables_paginate {
  margin: 0 !important; padding: 0 !important; float: none !important;
}

/* Phones: stack the clusters; filter, search and Add go full width */
@media (max-width: 767.98px) {
  body.g-sidenav-show .main-content .mea-dt-toolbar { align-items: stretch; }
  body.g-sidenav-show .main-content .mea-dt-toolbar-left,
  body.g-sidenav-show .main-content .mea-dt-toolbar-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  /* "Show N entries" stays compact, left-aligned */
  body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_length { align-self: flex-start; }
  /* filter: full-width select + reset on one line */
  body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form,
  body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form .row { flex-wrap: nowrap; }
  body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form [class*="col-"]:first-child { flex: 1 1 auto !important; }
  body.g-sidenav-show .main-content .mea-dt-toolbar #filter-form select { width: 100%; }
  /* search full width */
  body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_filter,
  body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_filter label,
  body.g-sidenav-show .main-content .mea-dt-toolbar .dataTables_filter input { width: 100%; }
  /* Add / Export full width */
  body.g-sidenav-show .main-content .mea-dt-toolbar-right .mea-page-actions,
  body.g-sidenav-show .main-content .mea-dt-toolbar-right .mea-page-actions .btn { width: 100%; }
  body.g-sidenav-show .main-content .mea-dt-foot { flex-direction: column; align-items: center; gap: 8px; }
}
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: .8rem;
}
body.g-sidenav-show .main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.g-sidenav-show .main-content .page-item.active .page-link {
  background: var(--mea-brand-600) !important;
  border-color: var(--mea-brand-600) !important;
  color: #fff !important;
}
body.g-sidenav-show .main-content .page-link { color: var(--mea-brand-600); }

/* Sortable column headers — pointer + CSS-drawn caret. (The theme's header
   background hid the old PNG sort icons, so we draw our own with ::after.) */
body.g-sidenav-show .main-content table.dataTable thead th.sorting,
body.g-sidenav-show .main-content table.dataTable thead th.sorting_asc,
body.g-sidenav-show .main-content table.dataTable thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 26px !important;
  background-image: none !important;
  user-select: none;
}
body.g-sidenav-show .main-content table.dataTable thead th.sorting::after,
body.g-sidenav-show .main-content table.dataTable thead th.sorting_asc::after,
body.g-sidenav-show .main-content table.dataTable thead th.sorting_desc::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
/* Unsorted: faint down caret */
body.g-sidenav-show .main-content table.dataTable thead th.sorting::after {
  border-top: 5px solid var(--mea-slate-300);
}
/* Ascending: brand up caret */
body.g-sidenav-show .main-content table.dataTable thead th.sorting_asc::after {
  border-bottom: 5px solid var(--mea-brand-600);
}
/* Descending: brand down caret */
body.g-sidenav-show .main-content table.dataTable thead th.sorting_desc::after {
  border-top: 5px solid var(--mea-brand-600);
}

/* ============================================================ PROGRESS ===== */
body.g-sidenav-show .main-content .progress {
  background: var(--mea-slate-100);
  border-radius: 999px;
  overflow: hidden;
}
body.g-sidenav-show .main-content .progress .progress-bar.bg-gradient-success { background: var(--mea-emerald-500) !important; }
body.g-sidenav-show .main-content .progress .progress-bar.bg-gradient-warning { background: var(--mea-amber-500) !important; }
body.g-sidenav-show .main-content .progress .progress-bar.bg-gradient-danger  { background: var(--mea-red-500) !important; }
body.g-sidenav-show .main-content .progress .progress-bar.bg-gradient-info,
body.g-sidenav-show .main-content .progress .progress-bar.bg-gradient-primary { background: var(--mea-brand-500) !important; }

/* ============================================================== ALERTS ===== */
body.g-sidenav-show .main-content .alert {
  border-radius: var(--mea-radius-sm);
  border: 1px solid transparent;
  font-size: .82rem;
  box-shadow: none;
}
body.g-sidenav-show .main-content .alert.alert-success { background: var(--mea-emerald-50); border-color: var(--mea-emerald-100); color: var(--mea-emerald-700); }
body.g-sidenav-show .main-content .alert.alert-danger  { background: var(--mea-red-50);     border-color: var(--mea-red-100);     color: var(--mea-red-700); }
body.g-sidenav-show .main-content .alert.alert-warning { background: var(--mea-amber-50);   border-color: var(--mea-amber-100);   color: var(--mea-amber-700); }
body.g-sidenav-show .main-content .alert.alert-info,
body.g-sidenav-show .main-content .alert.alert-primary { background: var(--mea-brand-50);   border-color: var(--mea-brand-200);   color: var(--mea-brand-700); }
/* Keep the "over limit" red alert (uses text-white) readable */
body.g-sidenav-show .main-content .alert.alert-danger.text-white { background: var(--mea-red-600); border-color: var(--mea-red-600); color: #fff !important; }

/* ============================================= LEGACY .tile (settings) ===== */
/* Some older settings/contact pages use a `.tile` wrapper instead of `.card`.
   Give it the same clean card treatment so those pages match the rest. */
body.g-sidenav-show .main-content .tile {
  background: #fff;
  border: 1px solid var(--mea-slate-200);
  border-radius: var(--mea-radius);
  box-shadow: var(--mea-shadow-sm);
  padding: 20px;
}

/* =========================================================== LIST GROUP === */
body.g-sidenav-show .main-content .list-group-item {
  border-color: var(--mea-slate-100) !important;
  color: var(--mea-slate-700);
  font-size: .85rem;
}

/* ========================================================= MISC / UTILS === */
body.g-sidenav-show .main-content .text-secondary { color: var(--mea-slate-500) !important; }
body.g-sidenav-show .main-content .icon-shape.rounded-circle.bg-gradient-warning { background: var(--mea-amber-500) !important; }

/* =================================================== COMPONENT: PageHeader = */
.mea-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.mea-page-header-main { min-width: 0; }
.mea-breadcrumb {
  font-size: .72rem;
  font-weight: 600;
  color: var(--mea-slate-400);
  margin-bottom: 4px;
}
.mea-page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mea-slate-900) !important;
  line-height: 1.15;
}
.mea-page-subtitle {
  margin: 3px 0 0;
  font-size: .875rem;
  color: var(--mea-slate-500);
}
.mea-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* When the header's actions are a Back button, place it to the LEFT of the title */
.mea-page-header:has(.mea-page-actions .fa-arrow-left) {
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.mea-page-header:has(.mea-page-actions .fa-arrow-left) > .mea-page-actions { order: -1; }

/* ==================================================== COMPONENT: StatCard == */
.mea-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--mea-slate-200);
  border-radius: var(--mea-radius);
  box-shadow: var(--mea-shadow-sm);
  color: inherit;
  text-decoration: none;
}
.mea-stat-card--link { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; cursor: pointer; }
.mea-stat-card--link:hover {
  box-shadow: var(--mea-shadow);
  transform: translateY(-2px);
  border-color: var(--mea-brand-200);
  color: inherit;
}
.mea-stat-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  font-size: 1.05rem;
}
.mea-stat-body { display: flex; flex-direction: column; min-width: 0; }
.mea-stat-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--mea-slate-400);
}
.mea-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.12;
  color: var(--mea-slate-900);
  font-variant-numeric: tabular-nums;
}
.mea-stat-sub {
  font-size: .75rem;
  color: var(--mea-slate-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================== COMPONENT: Detail tiles (event details) ==== */
.mea-detail-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 10px 14px;
  background: var(--mea-slate-50);
  border: 1px solid var(--mea-slate-100);
  border-radius: 10px;
}
.mea-detail-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mea-slate-400);
}
.mea-detail-value {
  font-size: .85rem;
  font-weight: 600;
  color: var(--mea-slate-800);
  word-break: break-word;
}
.mea-detail-audio { max-width: 100%; height: 36px; }
.mea-detail-group-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mea-slate-500);
  padding-bottom: 8px;
  margin: 22px 0 12px;
  border-bottom: 1px solid var(--mea-slate-200);
}
.mea-detail-group-title:first-child { margin-top: 2px; }

/* ---- Profile header + flowing fact rows (uniform detail-page format) ---- */
.mea-profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mea-profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--mea-slate-100);
  flex: 0 0 auto;
  cursor: pointer;
}
.mea-profile-id { min-width: 0; flex: 1 1 200px; }
.mea-profile-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--mea-slate-900);
}
.mea-profile-sub { margin: 2px 0 0; color: var(--mea-slate-500); font-size: .875rem; word-break: break-word; }
.mea-profile-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mea-status-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--mea-slate-200);
  border-radius: 999px;
  background: var(--mea-slate-50);
}
.mea-status-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--mea-slate-500);
}

.mea-facts { display: flex; flex-direction: column; }
.mea-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mea-slate-100);
}
.mea-fact:last-child { border-bottom: 0; }
.mea-fact-k { flex: 0 0 auto; color: var(--mea-slate-500); font-size: .85rem; }
.mea-fact-v {
  min-width: 0;
  color: var(--mea-slate-800);
  font-weight: 600;
  font-size: .85rem;
  text-align: right;
  word-break: break-word;
}
.mea-fact-v audio { vertical-align: middle; height: 34px; max-width: 100%; }

/* ============================== COMPONENT: Chat thread (distress signal) === */
.mea-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding: 4px;
}
.mea-chat-row { display: flex; }
.mea-chat-row--in { justify-content: flex-start; }
.mea-chat-row--out { justify-content: flex-end; }
.mea-chat-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: .85rem;
  line-height: 1.35;
}
.mea-chat-row--in .mea-chat-bubble {
  background: var(--mea-slate-100);
  color: var(--mea-slate-800);
  border-bottom-left-radius: 4px;
}
.mea-chat-row--out .mea-chat-bubble {
  background: var(--mea-brand-600);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.mea-chat-sender { font-size: .68rem; font-weight: 700; opacity: .85; margin-bottom: 2px; }
.mea-chat-text { white-space: pre-wrap; word-break: break-word; }
.mea-chat-time { font-size: .62rem; opacity: .7; margin-top: 3px; text-align: right; }
.mea-chat-media { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; }
.mea-chat-audio { max-width: 240px; }
.mea-chat-loc a { color: inherit; text-decoration: underline; }

/* Accent tiles (icon backgrounds) — shared by StatCard and any .mea-accent-* use */
.mea-accent-blue   { background: var(--mea-brand-50);   color: var(--mea-brand-600); }
.mea-accent-green  { background: var(--mea-emerald-50); color: var(--mea-emerald-600); }
.mea-accent-amber  { background: var(--mea-amber-50);   color: var(--mea-amber-700); }
.mea-accent-red    { background: var(--mea-red-50);     color: var(--mea-red-600); }
.mea-accent-violet { background: var(--mea-violet-50);  color: var(--mea-violet-600); }
.mea-accent-slate  { background: var(--mea-slate-100);  color: var(--mea-slate-600); }