/* PEX Email Marketing — v2.css */

:root {
  --v2-primary: #4f46e5;
  --v2-primary-hover: #4338ca;
  --v2-primary-light: #eef2ff;
  --v2-primary-rgb: 79,70,229;
  --v2-success: #059669;
  --v2-success-light: #ecfdf5;
  --v2-warning: #d97706;
  --v2-warning-light: #fffbeb;
  --v2-danger: #dc2626;
  --v2-danger-light: #fef2f2;
  --v2-info: #0891b2;
  --v2-info-light: #ecfeff;
  --v2-body: #f1f5f9;
  --v2-surface: #ffffff;
  --v2-surface-hover: #f8fafc;
  --v2-nav: #1e293b;
  --v2-badge: #f1f5f9;
  --v2-text: #0f172a;
  --v2-text-2: #475569;
  --v2-text-3: #94a3b8;
  --v2-border: #e2e8f0;
  --v2-radius: 12px;
  --v2-radius-sm: 8px;
  --v2-radius-xs: 6px;
  --v2-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --v2-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --v2-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.04);
  --v2-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --v2-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.06);
  --v2-ease: cubic-bezier(.4,0,.2,1);
  --v2-transition: all .2s var(--v2-ease);
  --v2-font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
[data-theme="dark"] {
  --v2-body: #0f172a;
  --v2-surface: #1e293b;
  --v2-surface-hover: #273548;
  --v2-nav: #0f172a;
  --v2-badge: #334155;
  --v2-text: #f1f5f9;
  --v2-text-2: #cbd5e1;
  --v2-text-3: #64748b;
  --v2-border: #334155;
  --v2-primary-light: #312e81;
  --v2-success-light: #064e3b;
  --v2-warning-light: #78350f;
  --v2-danger-light: #7f1d1d;
  --v2-info-light: #164e63;
}
*,*::before,*::after { box-sizing: border-box; }

body.v2 {
  background: var(--v2-body);
  color: var(--v2-text);
  font-family: var(--v2-font);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#IEM_HTML_Body { flex: 1 1 auto; display: flex; flex-direction: column; }
#IEM_HTML_Body > .ContentContainer { flex: 1 1 auto; }

/* ═══════════════════════════════
   MENU PRINCIPAL — top bar
   ═══════════════════════════════ */
.pex-topbar {
  background: var(--v2-nav) !important;
  min-height: 56px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 1030;
}
.pex-topbar .navbar-brand {
  font-size: .9375rem;
  color: #fff !important;
  padding: .5rem .75rem;
  border-radius: var(--v2-radius-sm);
  transition: var(--v2-transition);
  letter-spacing: -.01em;
}
.pex-topbar .navbar-brand:hover { background: rgba(255,255,255,.08); }
.pex-topbar .navbar-brand i { opacity: .8; }

/* Topbar nav links */
.pex-topbar .nav-link {
  font-size: .8125rem;
  font-weight: 500;
  padding: .45rem .75rem !important;
  border-radius: var(--v2-radius-xs);
  transition: var(--v2-transition);
  white-space: nowrap;
  color: #cbd5e1 !important;
  letter-spacing: .01em;
}
.pex-topbar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.pex-topbar .nav-link.active,
.pex-topbar .nav-link.active:hover {
  background: var(--v2-primary);
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb),.25);
}

/* Logout button */
.pex-logout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #94a3b8 !important;
  font-size: 1rem;
  transition: var(--v2-transition);
}
.pex-logout-btn:hover {
  background: rgba(220,38,38,.2) !important;
  border-color: rgba(220,38,38,.4) !important;
  color: #fca5a5 !important;
  transform: scale(1.05);
}

/* Topbar dropdowns */
.pex-topbar .dropdown-menu {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 0 0 var(--v2-radius) var(--v2-radius);
  box-shadow: var(--v2-shadow-xl);
  padding: .5rem 0;
  margin: 0;
  min-width: 200px;
}
.pex-topbar .dropdown-item {
  font-size: .8125rem;
  font-family: var(--v2-font);
  padding: .5rem 1rem;
  color: #334155;
  border-left: 3px solid transparent;
  transition: var(--v2-transition);
}
[data-theme="dark"] .pex-topbar .dropdown-item { color: #cbd5e1; }
.pex-topbar .dropdown-item:hover {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  border-left-color: var(--v2-primary);
}
.pex-topbar .dropdown-item.active,
.pex-topbar .dropdown-item.active:hover {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  font-weight: 600;
  border-left-color: var(--v2-primary);
}
.pex-topbar .dropdown-item i { font-size: .875rem; width: 1.25rem; text-align: center; }

/* ═══════════════════════════════
   MENU SECUNDARIO — JS-rendered clean nav
   ═══════════════════════════════ */
.pex-subbar { background: var(--v2-surface); border-bottom: 1px solid var(--v2-border); box-shadow: var(--v2-shadow-sm); }
.pex-subnav { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.pex-subnav-item { position: relative; }
.pex-subnav-link { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; color: var(--v2-text-2); font-size: .8125rem; font-weight: 500; font-family: var(--v2-font); text-decoration: none; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; transition: var(--v2-transition); letter-spacing: .01em; }
.pex-subnav-link:hover, .pex-subnav-link.active { color: var(--v2-primary); background: var(--v2-primary-light); border-bottom-color: var(--v2-primary); }
.pex-subnav-link i { font-size: .95rem; opacity: .8; }
.pex-subnav-dropdown { position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-top: 2px solid var(--v2-primary); border-radius: 0 0 var(--v2-radius) var(--v2-radius); box-shadow: var(--v2-shadow-xl); padding: .75rem 0; z-index: 1050; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, visibility .15s ease, transform .15s ease; pointer-events: none; }
.pex-subnav-item:hover > .pex-subnav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.pex-subnav-dropdown-item { display: flex; align-items: center; gap: .375rem; padding: .7rem 1.25rem; color: var(--v2-text-2); font-size: .8125rem; font-family: var(--v2-font); text-decoration: none; border-left: 3px solid transparent; transition: var(--v2-transition); white-space: nowrap; }
.pex-subnav-dropdown-item:hover { background: var(--v2-primary-light); color: var(--v2-primary); border-left-color: var(--v2-primary); }
.pex-subnav-dropdown-item.active,
.pex-subnav-dropdown-item.active:hover { background: var(--v2-primary-light); color: var(--v2-primary); font-weight: 600; border-left-color: var(--v2-primary); }
.pex-subnav-dropdown-item i { font-size: 1rem; }
.pex-subnav-dropdown-item--danger { border-left-color: #dc2626; background: rgba(220,38,38,.04); }
.pex-subnav-dropdown-item--danger:hover { border-left-color: #b91c1c; background: rgba(220,38,38,.08); color: #dc2626; }
.pex-subnav-dropdown-item--danger i { color: #dc2626; }

/* ═══════════════════════════════
   DASHBOARD
   ═══════════════════════════════ */
.v2-dashboard { padding: 1.5rem; max-width: 1440px; margin: 0 auto; }
.v2-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 1.5rem; }
.v2-page-header .v2-greeting h1 { font-size: 1.5rem; font-weight: 700; color: var(--v2-text); margin: 0; }
.v2-page-header .v2-greeting p { font-size: .875rem; color: var(--v2-text-2); margin: .125rem 0 0; }
.v2-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.v2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.v2-stat { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: 1.25rem; transition: var(--v2-transition); position: relative; overflow: hidden; }
.v2-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: var(--v2-transition); }
.v2-stat:hover { box-shadow: var(--v2-shadow-lg); transform: translateY(-2px); }
.v2-stat:hover::before { opacity: 1; }
.v2-stat-icon { width: 44px; height: 44px; border-radius: var(--v2-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; margin-bottom: .75rem; transition: var(--v2-transition); }
.v2-stat:hover .v2-stat-icon { transform: scale(1.08); }
.v2-stat-icon.blue { background: var(--v2-primary-light); color: var(--v2-primary); }
.v2-stat-icon.green { background: var(--v2-success-light); color: var(--v2-success); }
.v2-stat-icon.amber { background: var(--v2-warning-light); color: var(--v2-warning); }
.v2-stat-icon.red { background: var(--v2-danger-light); color: var(--v2-danger); }
.v2-stat-icon.cyan { background: var(--v2-info-light); color: var(--v2-info); }
.v2-stat::before { background: var(--v2-primary); }
.v2-stat.green-accent::before { background: var(--v2-success); }
.v2-stat.amber-accent::before { background: var(--v2-warning); }
.v2-stat.red-accent::before { background: var(--v2-danger); }
.v2-stat .value { font-size: 1.75rem; font-weight: 700; color: var(--v2-text); line-height: 1.2; }
.v2-stat .label { font-size: .8125rem; color: var(--v2-text-2); margin-top: .125rem; }

.v2-content { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; }

.v2-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); overflow: hidden; transition: var(--v2-transition); }
.v2-card:hover { box-shadow: var(--v2-shadow-md); }
.v2-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--v2-border); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--v2-primary-light), #f0f0ff); }
.v2-card-head h5 { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--v2-text); display: flex; align-items: center; gap: .5rem; }
.v2-card-head h5 i { color: var(--v2-primary); }
.text-v2-primary { color: var(--v2-primary); }
.v2-field-sortbox { max-height: 244px; background: var(--v2-bg); }
.v2-card-body { padding: 1.25rem; }
.v2-card-body.flush { padding: 0; }

/* System info (Settings > SystemInfo) */
.v2-sysinfo-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--v2-text-3); margin-bottom: .25rem; }
.v2-sysinfo-value { font-size: .9375rem; font-weight: 500; color: var(--v2-text); }

/* Check permissions (Addons > Verificar Permisos) */
.v2-fade { animation: v2-fade-in .35s var(--v2-ease) both; }
@keyframes v2-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.v2-perm-group { margin-bottom: 1.5rem; }
.v2-perm-group:last-child { margin-bottom: 0; }
.v2-perm-title { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; margin: 0 0 .625rem; }
.v2-perm-title.ok { color: var(--v2-success); }
.v2-perm-title.fail { color: var(--v2-danger); }
.v2-perm-list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.v2-perm-list li { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .75rem; border-radius: var(--v2-radius-xs); font-size: .8125rem; font-family: var(--v2-font); margin-bottom: .375rem; word-break: break-all; }
.v2-perm-list li:last-child { margin-bottom: 0; }
.v2-perm-list li i { margin-top: .125rem; flex-shrink: 0; }
.v2-perm-list li.ok { background: var(--v2-success-light); color: var(--v2-success); }
.v2-perm-list li.fail { background: var(--v2-danger-light); color: var(--v2-danger); }

/* System log (Addons > Ver Registros de Errores) */
.v2-card-foot { padding: .875rem 1.25rem; border-top: 1px solid var(--v2-border); background: var(--v2-surface-hover); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.v2-card-foot .sub-paging { margin: 0; }
.v2-log-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.v2-log-badge.success { background: var(--v2-success-light); color: var(--v2-success); }
.v2-log-badge.notice { background: var(--v2-info-light); color: var(--v2-info); }
.v2-log-badge.warning { background: var(--v2-warning-light); color: var(--v2-warning); }
.v2-log-badge.error { background: var(--v2-danger-light); color: var(--v2-danger); }
.v2-log-summary { font-size: .8125rem; font-family: var(--v2-font); }
.v2-log-module { font-size: .75rem; font-weight: 500; color: var(--v2-text-2); background: var(--v2-badge); padding: .2rem .5rem; border-radius: var(--v2-radius-xs); }
.v2-log-date { font-size: .8125rem; color: var(--v2-text-2); white-space: nowrap; }
.v2-log-toggle { color: var(--v2-text-3); font-size: 1.125rem; text-decoration: none; transition: var(--v2-transition); }
.v2-log-toggle:hover { color: var(--v2-primary); }
.v2-log-toggle .bi-dash-circle { color: var(--v2-primary); }
.v2-log-quickview { background: var(--v2-primary-light); padding: .875rem 1.25rem; font-size: .8125rem; font-family: var(--v2-font); color: var(--v2-text); word-break: break-word; border-bottom: 1px solid var(--v2-border); }
tr.v2-log-row-expanded td { background: var(--v2-primary-light) !important; }

.v2-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.v2-quick-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-border); color: var(--v2-text-2); text-decoration: none; font-size: .8125rem; font-weight: 500; transition: var(--v2-transition); }
.v2-quick-item:hover { border-color: var(--v2-primary); color: var(--v2-primary); transform: translateY(-1px); box-shadow: var(--v2-shadow-sm); }
.v2-quick-item i { font-size: 1rem; width: 20px; text-align: center; color: var(--v2-primary); }

.v2-action-btn { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.v2-action-btn:hover { border-color: var(--v2-primary) !important; background: linear-gradient(to right, rgba(79, 70, 229, 0.03), transparent) !important; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.1) !important; transform: translateY(-2px); }
.v2-action-btn .action-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.v2-action-btn:hover .action-icon { transform: scale(1.15) rotate(-3deg); }

.v2-campaign-list { list-style: none; padding: 0; margin: 0; }
.v2-campaign-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--v2-border); transition: var(--v2-transition); }
.v2-campaign-item:last-child { border-bottom: none; }
.v2-campaign-item:hover { background: var(--v2-surface-hover); }
.v2-campaign-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.v2-campaign-dot.sent { background: var(--v2-success); }
.v2-campaign-dot.scheduled { background: var(--v2-warning); }
.v2-campaign-dot.draft { background: var(--v2-text-3); }
.v2-campaign-info { flex: 1; min-width: 0; }
.v2-campaign-name { font-weight: 500; font-size: .875rem; color: var(--v2-text); }
.v2-campaign-name a { color: inherit; text-decoration: none; }
.v2-campaign-name a:hover { color: var(--v2-primary); }
.v2-campaign-badge { font-size: .6875rem; font-weight: 500; padding: .2rem .5rem; border-radius: 10px; }
.v2-campaign-badge.sent { background: var(--v2-success-light); color: var(--v2-success); }
.v2-campaign-badge.scheduled { background: var(--v2-warning-light); color: var(--v2-warning); }
.v2-campaign-badge.draft { background: var(--v2-badge); color: var(--v2-text-3); }

.v2-sidebar-list { list-style: none; padding: 0; margin: 0; }
.v2-sidebar-list li { display: flex; align-items: center; justify-content: space-between; padding: .625rem 1.25rem; border-bottom: 1px solid var(--v2-border); }
.v2-sidebar-list li:last-child { border-bottom: none; }
.v2-sidebar-list li:hover { background: var(--v2-surface-hover); }
.v2-sidebar-list a { font-weight: 500; font-size: .8125rem; color: var(--v2-text); text-decoration: none; }
.v2-sidebar-list a:hover { color: var(--v2-primary); }
.v2-sidebar-count { font-size: .75rem; font-weight: 500; color: var(--v2-text-3); background: var(--v2-badge); padding: .125rem .5rem; border-radius: 10px; }

.v2-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: var(--v2-radius-sm); font-size: .875rem; font-weight: 600; text-decoration: none; transition: var(--v2-transition); border: none; cursor: pointer; font-family: var(--v2-font); white-space: nowrap; }
.v2-btn-primary { background: linear-gradient(135deg, var(--v2-primary), #7c3aed); color: #fff; box-shadow: 0 3px 8px rgba(var(--v2-primary-rgb), .35); animation: v2-pulse 2s infinite; }
.v2-btn-primary:hover { color: #fff; box-shadow: 0 6px 20px rgba(var(--v2-primary-rgb), .5); transform: translateY(-2px); animation: none; }
@keyframes v2-pulse { 0%,100% { box-shadow: 0 3px 8px rgba(var(--v2-primary-rgb), .35); } 50% { box-shadow: 0 3px 16px rgba(var(--v2-primary-rgb), .5); } }
.v2-btn-outline { background: transparent; color: var(--v2-primary); border: 1.5px solid var(--v2-primary); }
.v2-btn-outline:hover { background: var(--v2-primary); color: #fff; }
.v2-btn-danger-outline { background: transparent; color: var(--v2-danger); border: 1.5px solid var(--v2-danger); }
.v2-btn-danger-outline:hover { background: var(--v2-danger); color: #fff; }
.v2-btn-danger { background: linear-gradient(135deg, var(--v2-danger), #ef4444); color: #fff; box-shadow: 0 3px 8px rgba(220,38,38,.35); }
.v2-btn-danger:hover { color: #fff; box-shadow: 0 6px 20px rgba(220,38,38,.5); transform: translateY(-2px); }
.v2-btn-sm { padding: .45rem .9rem; font-size: .8125rem; border-radius: var(--v2-radius-xs); }

.v2-alert { padding: .875rem 1.125rem; border-radius: var(--v2-radius-sm); margin-bottom: 1rem; display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; }
.v2-alert-warning { background: var(--v2-warning-light); color: var(--v2-warning); border: 1px solid var(--v2-warning); }
.v2-alert-danger { background: var(--v2-danger-light); color: var(--v2-danger); border: 1px solid var(--v2-danger); }

.pex-chart-wrap { width: 100%; min-height: 320px; padding: .75rem; box-sizing: border-box; }
.pex-chart-container { width: 100% !important; min-height: 300px; }
.apexcharts-canvas { background: transparent !important; }
.apexcharts-toolbar { display: none !important; }

.Heading1, .Heading2 { font-family: var(--v2-font); }
.IndexContent, .DashboardPanel, .DashboardPanelBox1 { border: none !important; background: transparent !important; }
.PanelHeaderBox1 { display: none !important; }
div#IEM_HTML_Body { padding: 0; margin: 0; }

/* ═══════════════════════════════
   TABLE PAGES — generic data table styles
   ═══════════════════════════════ */
.table, .table td, .table th, .table a, .table span, .table input, .table label, .table select { font-family: var(--v2-font) !important; }
.table thead th { font-size: .75rem; font-weight: 600; color: var(--v2-text-3); text-transform: uppercase; letter-spacing: .04em; padding: .75rem .75rem; background: var(--v2-surface); border-bottom: 2px solid var(--v2-border); }
.table tbody td { padding: .75rem; vertical-align: middle; border-bottom: 1px solid var(--v2-border); color: var(--v2-text); }
.table-hover tbody tr:hover { background: var(--v2-surface-hover); }
.table .form-check-input { width: 1rem; height: 1rem; cursor: pointer; }
.btn-group-sm, .btn-sm { font-size: .75rem; }

/* Sort links */
.table thead a { text-decoration: none; transition: var(--v2-transition); }
.table thead a:hover { color: var(--v2-primary) !important; }

/* Badge variants */
.badge-active { background: var(--v2-success-light); color: var(--v2-success); border: 1px solid var(--v2-success); }
.badge-inactive { background: var(--v2-badge); color: var(--v2-text-3); border: 1px solid var(--v2-border); }

/* ═══════════════════════════════
   ACTION BUTTONS — icon buttons with gradient
   ═══════════════════════════════ */
.btn-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v2-radius-xs); border: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-text-2); font-size: .875rem; transition: var(--v2-transition); cursor: pointer; text-decoration: none; position: relative; }
.btn-icon:hover { transform: translateY(-2px); box-shadow: var(--v2-shadow-sm); }
.btn-icon[data-bs-title]:hover::after {
  content: attr(data-bs-title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: .375rem .625rem;
  background: var(--v2-nav);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
  font-family: var(--v2-font);
  white-space: nowrap;
  border-radius: var(--v2-radius-xs);
  box-shadow: var(--v2-shadow-md);
  z-index: 1070;
  pointer-events: none;
  animation: v2-tooltip-in .15s var(--v2-ease);
}
.btn-icon[data-bs-title]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--v2-nav);
  z-index: 1070;
  pointer-events: none;
}
@keyframes v2-tooltip-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.btn-icon-edit { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4f46e5; border-color: #c7d2fe; }
.btn-icon-edit:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-color: #4f46e5; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-icon-delete { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; border-color: #fecaca; }
.btn-icon-delete:hover { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; border-color: #dc2626; box-shadow: 0 4px 12px rgba(220,38,38,.3); }
.btn-icon-copy { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; border-color: #bbf7d0; }
.btn-icon-copy:hover { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; border-color: #16a34a; box-shadow: 0 4px 12px rgba(22,163,74,.3); }
.btn-icon-info { background: linear-gradient(135deg, #ecfeff, #cffafe); color: #0891b2; border-color: #a5f3fc; }
.btn-icon-info:hover { background: linear-gradient(135deg, #0891b2, #06b6d4); color: #fff; border-color: #0891b2; box-shadow: 0 4px 12px rgba(8,145,178,.3); }
.btn-icon-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #059669; border-color: #a7f3d0; }
.btn-icon-success:hover { background: linear-gradient(135deg, #059669, #10b981); color: #fff; border-color: #059669; box-shadow: 0 4px 12px rgba(5,150,105,.3); }
.btn-icon-danger { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; border-color: #fecaca; }
.btn-icon-danger:hover { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; border-color: #dc2626; box-shadow: 0 4px 12px rgba(220,38,38,.3); }
.btn-icon-view { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4f46e5; border-color: #c7d2fe; }
.btn-icon-view:hover { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border-color: #4f46e5; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-icon-stats { background: linear-gradient(135deg, #fefce8, #fef9c3); color: #a16207; border-color: #fef08a; }
.btn-icon-stats:hover { background: linear-gradient(135deg, #a16207, #ca8a04); color: #fff; border-color: #a16207; box-shadow: 0 4px 12px rgba(161,98,7,.3); }
.btn-icon-disabled { cursor: not-allowed; opacity: .55; border-style: dashed; }
.btn-icon-disabled:hover { transform: none; box-shadow: none; }
.btn-icon-send-disabled { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; border-color: #fecaca; opacity: .65; }
.btn-icon-send-disabled:hover { transform: none; box-shadow: none; background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; border-color: #fecaca; }

/* Gradient buttons */
.btn-gradient-primary { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: none; transition: all .2s; box-shadow: 0 2px 8px rgba(79,70,229,.25); }
.btn-gradient-primary:hover { background: linear-gradient(135deg, #4338ca, #4f46e5); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,.35); }
.btn-gradient-primary:active { transform: translateY(0); }
.btn-gradient-success { background: linear-gradient(135deg, #059669, #10b981); color: #fff; border: none; transition: all .2s; box-shadow: 0 2px 8px rgba(5,150,105,.25); }
.btn-gradient-success:hover { background: linear-gradient(135deg, #047857, #059669); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(5,150,105,.35); }
.btn-gradient-success:active { transform: translateY(0); }
.btn-gradient-danger { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; border: none; transition: all .2s; box-shadow: 0 2px 8px rgba(220,38,38,.25); }
.btn-gradient-danger:hover { background: linear-gradient(135deg, #b91c1c, #dc2626); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,38,38,.35); }
.btn-gradient-danger:active { transform: translateY(0); }

/* Subscriber count badge — clickable */
.subscriber-count { text-decoration: none; cursor: pointer; transition: var(--v2-transition); }
.subscriber-count:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(var(--v2-primary-rgb), .25); }
.badge-global { background: var(--v2-info-light); color: var(--v2-info); border: 1px solid var(--v2-info); }

/* Badge filter tabs */
.v2-filters { display: flex; gap: .375rem; flex-wrap: wrap; }
.v2-badge-filter {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3rem .75rem; border-radius: 20px;
  font-size: .75rem; font-weight: 500; font-family: var(--v2-font);
  background: var(--v2-badge); color: var(--v2-text-3);
  text-decoration: none; border: 1px solid var(--v2-border);
  transition: var(--v2-transition); white-space: nowrap; cursor: pointer;
}
.v2-badge-filter:hover { background: var(--v2-primary-light); color: var(--v2-primary); border-color: var(--v2-primary); }
.v2-badge-filter.active { background: var(--v2-primary); color: #fff; border-color: var(--v2-primary); }

/* ═══════════════════════════════
   BOOTSTRAP btn-primary OVERRIDE
   ═══════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, var(--v2-primary), #7c3aed) !important;
  border: none !important;
  color: #fff !important;
  padding: .625rem 1.5rem !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  border-radius: var(--v2-radius-sm) !important;
  box-shadow: 0 4px 14px rgba(var(--v2-primary-rgb), .4) !important;
  transition: all .25s var(--v2-ease) !important;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--v2-primary-hover), #6d28d9) !important;
  box-shadow: 0 6px 20px rgba(var(--v2-primary-rgb), .55) !important;
  transform: translateY(-2px);
  color: #fff !important;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(var(--v2-primary-rgb), .35) !important;
}
.btn-primary i { font-size: 1rem; }

/* ═══════════════════════════════
   FLASH MESSAGES
   ═══════════════════════════════ */
.v2-flash {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-radius: var(--v2-radius-sm);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border: 1px solid;
  animation: v2-flash-in .3s var(--v2-ease);
}
.v2-flash i { font-size: 1.125rem; flex-shrink: 0; }
.v2-flash-success { background: var(--v2-success-light); color: var(--v2-success); border-color: var(--v2-success); }
.v2-flash-danger { background: var(--v2-danger-light); color: var(--v2-danger); border-color: var(--v2-danger); }
.v2-flash-warning { background: var(--v2-warning-light); color: var(--v2-warning); border-color: var(--v2-warning); }
.v2-flash-info { background: var(--v2-info-light); color: var(--v2-info); border-color: var(--v2-info); }
@keyframes v2-flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════
   FOOTER
   ═══════════════════════════════ */
.v2-footer {
  background: var(--v2-nav);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1rem 1.5rem;
  margin-top: auto;
}
.v2-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: 1440px;
  margin: 0 auto;
}
.v2-footer-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #94a3b8;
  font-size: .8125rem;
}
.v2-footer-left i { color: #64748b; font-size: 1rem; }
.v2-footer-left span:first-of-type { font-weight: 600; color: #cbd5e1; }
.v2-footer-sep { color: #475569; margin: 0 .125rem; }
.v2-footer-version { font-size: .75rem; color: #64748b; font-weight: 400; }
.v2-footer-right {
  color: #64748b;
  font-size: .75rem;
}
.v2-footer-right a { color: #94a3b8; text-decoration: none; transition: var(--v2-transition); }
.v2-footer-right a:hover { color: #e2e8f0; }

@media (max-width: 768px) {
  .v2-footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 1024px) { .v2-content { grid-template-columns: 1fr; } .v2-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .v2-quick { grid-template-columns: 1fr; } .pex-subnav { flex-wrap: wrap; } }
@media (max-width: 576px) { .v2-stats { grid-template-columns: 1fr 1fr; } }

/* ═══════════════════════════════
   DataTables Integration
   ═══════════════════════════════ */
.dataTables_wrapper .dataTables_filter { display: flex; align-items: center; gap: .5rem; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: .375rem .75rem;
  font-size: .8125rem;
  outline: none;
  transition: var(--v2-transition);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--v2-primary); box-shadow: 0 0 0 3px var(--v2-primary-glow); }
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: .25rem .5rem;
  font-size: .8125rem;
}
.dataTables_wrapper .dataTables_info { font-size: .8125rem; color: var(--v2-text-3); }
.dataTables_wrapper .dataTables_paginate { padding-top: .5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius-sm) !important;
  padding: .25rem .625rem !important;
  font-size: .8125rem !important;
  color: var(--v2-text-2) !important;
  background: var(--v2-card-bg) !important;
  transition: var(--v2-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--v2-primary-light) !important;
  color: var(--v2-primary) !important;
  border-color: var(--v2-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--v2-primary) !important;
  color: #fff !important;
  border-color: var(--v2-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .4;
  cursor: not-allowed;
}
table.dataTable thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--v2-text-3); font-weight: 600; border-bottom: 2px solid var(--v2-border) !important; }
table.dataTable tbody td { font-size: .875rem; padding: .75rem .5rem; border-bottom: 1px solid var(--v2-border-light); }
table.dataTable tbody tr:hover { background: var(--v2-primary-light); }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { margin-left: .25rem; }

/* ---- Page Header ---- */
.v2-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.v2-page-header .v2-greeting {
  flex: 1;
  min-width: 0;
  padding-right: 1.5rem;
}
.v2-page-header .v2-greeting h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--v2-text);
  margin: 0;
}
.v2-page-header .v2-greeting p {
  color: var(--v2-text-3);
  margin: .25rem 0 0;
  font-size: .875rem;
}
.v2-page-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ---- Forms ---- */
.v2-card .form-label {
  font-size: .875rem;
  color: var(--v2-text-2);
}
.v2-card .form-control,
.v2-card .form-select {
  font-size: .875rem;
  border-radius: .5rem;
  border-color: var(--v2-border);
  transition: var(--v2-transition);
}
.v2-card .form-control:focus,
.v2-card .form-select:focus {
  border-color: var(--v2-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.v2-card .form-text {
  font-size: .75rem;
  color: var(--v2-text-3);
  margin-top: .25rem;
}
.v2-card .form-check {
  margin-bottom: .375rem;
}
.v2-card .form-check-input:checked {
  background-color: var(--v2-primary);
  border-color: var(--v2-primary);
}
.v2-card .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  border-color: var(--v2-primary);
}

/* ---- Datepicker fields ---- */
.CustomFieldDateInput_Row .form-control {
  display: inline-block;
  width: auto;
}
.CustomFieldDateInput_Row select {
  display: inline-block;
  width: auto;
  margin-right: .25rem;
}

/* ---- Required marker ---- */
.text-danger.fw-bold {
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
}

/* ================================================================
   SUBSCRIBERS MANAGE PAGE
   ================================================================ */

/* -- Page header -- */
.sub-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.sub-manage-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--v2-text);
  margin: 0;
}
.sub-manage-header h1 .sub-view-label {
  font-weight: 400;
  color: var(--v2-text-3);
  font-size: 1rem;
  margin-left: .375rem;
}
.sub-manage-header p {
  color: var(--v2-text-3);
  margin: .25rem 0 0;
  font-size: .875rem;
}

/* -- Search bar -- */
.sub-search-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.sub-search-bar .form-control {
  width: 240px;
  font-size: .875rem;
}
.sub-search-bar .btn {
  white-space: nowrap;
}

/* -- View picker dropdown -- */
.sub-view-picker .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.sub-view-picker .dropdown-menu {
  max-height: 370px;
  overflow-y: auto;
  padding: .5rem 0;
  border-radius: .75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  border: 1px solid var(--v2-border);
}
.sub-view-picker .dropdown-menu .dropdown-header {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-text-3);
  padding: .5rem 1rem .25rem;
}
.sub-view-picker .dropdown-menu a.dropdown-item {
  font-size: .875rem;
  padding: .375rem 1rem;
  color: var(--v2-text-2);
  transition: var(--v2-transition);
}
.sub-view-picker .dropdown-menu a.dropdown-item:hover {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
}
.sub-view-picker .dropdown-menu a.dropdown-item i {
  width: 1rem;
  text-align: center;
  margin-right: .375rem;
  color: var(--v2-text-3);
}

/* -- Toolbar (bulk actions + paging) -- */
.sub-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: .75rem;
  margin-bottom: 1rem;
}
.sub-toolbar .form-select {
  width: auto;
  min-width: 200px;
  font-size: .8125rem;
}
.sub-toolbar .btn {
  font-size: .8125rem;
}

/* -- Subscriber table -- */
.sub-table-wrap {
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: .75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.sub-table thead th {
  padding: .75rem 1rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-text-3);
  background: var(--v2-bg);
  border-bottom: 2px solid var(--v2-border);
  white-space: nowrap;
  user-select: none;
}
.sub-table thead th a {
  color: var(--v2-text-3);
  text-decoration: none;
  transition: var(--v2-transition);
}
.sub-table thead th a:hover {
  color: var(--v2-primary);
}
.sub-table thead th .sort-icon {
  display: inline-flex;
  flex-direction: column;
  margin-left: .25rem;
  vertical-align: middle;
  line-height: 1;
  font-size: .6rem;
}
.sub-table thead th .sort-icon i {
  line-height: 1;
  opacity: .4;
  transition: var(--v2-transition);
}
.sub-table thead th .sort-icon i.active {
  opacity: 1;
  color: var(--v2-primary);
}
.sub-table tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--v2-border-light);
  color: var(--v2-text-2);
  vertical-align: middle;
}
.sub-table tbody tr {
  transition: var(--v2-transition);
}
.sub-table tbody tr:hover {
  background: var(--v2-primary-light);
}
.sub-table tbody tr:last-child td {
  border-bottom: none;
}
.sub-table .td-check {
  width: 40px;
  text-align: center;
}
.sub-table .td-email {
  font-weight: 500;
  color: var(--v2-text);
}
.sub-table .td-actions {
  white-space: nowrap;
}
.sub-table .sub-status {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  padding: .125rem .5rem;
  border-radius: 1rem;
  font-weight: 500;
}
.sub-status-active {
  background: #dcfce7;
  color: #166534;
}
.sub-status-unsubscribed {
  background: #fee2e2;
  color: #991b1b;
}
.sub-status-bounced {
  background: #fef3c7;
  color: #92400e;
}
.sub-status-confirmed {
  background: #dbeafe;
  color: #1e40af;
}
.sub-status-unconfirmed {
  background: #f3f4f6;
  color: #6b7280;
}

/* -- Action buttons in table -- */
.sub-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: .5rem;
  border: none;
  background: transparent;
  color: var(--v2-text-3);
  font-size: .875rem;
  transition: var(--v2-transition);
  cursor: pointer;
  text-decoration: none;
}
.sub-action-btn:hover {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
}
.sub-action-btn.btn-sub-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}
.sub-action-btn.btn-sub-event:hover {
  background: #fef3c7;
  color: #d97706;
}
.sub-action-btn[title] {
  position: relative;
}
.sub-action-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--v2-text);
  color: #fff;
  padding: .25rem .5rem;
  border-radius: .375rem;
  font-size: .7rem;
  white-space: nowrap;
  pointer-events: none;
  margin-bottom: .375rem;
}

/* -- Event toggle button -- */
.sub-event-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: .375rem;
  border: 1px solid var(--v2-border);
  background: var(--v2-card-bg);
  color: var(--v2-text-3);
  font-size: .7rem;
  cursor: pointer;
  transition: var(--v2-transition);
}
.sub-event-toggle:hover {
  border-color: var(--v2-primary);
  color: var(--v2-primary);
  background: var(--v2-primary-light);
}
.sub-event-toggle.expanded {
  background: var(--v2-primary);
  color: #fff;
  border-color: var(--v2-primary);
}

/* -- Event expand row -- */
.sub-event-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--v2-border-light) !important;
  background: var(--v2-bg);
}
.sub-event-row .event-data {
  padding: 1rem;
  font-size: .8125rem;
  color: var(--v2-text-3);
  min-height: 40px;
}

/* -- Empty state -- */
.sub-empty {
  text-align: center;
  padding: 4rem 2rem;
}
.sub-empty i {
  font-size: 3rem;
  color: var(--v2-text-3);
  opacity: .5;
  margin-bottom: 1rem;
}
.sub-empty h5 {
  font-weight: 600;
  color: var(--v2-text-2);
  margin-bottom: .5rem;
}
.sub-empty p {
  color: var(--v2-text-3);
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

/* -- Pagination -- */
.sub-paging {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--v2-card-bg);
  border: 1px solid var(--v2-border);
  border-radius: .75rem;
  font-size: .8125rem;
  color: var(--v2-text-3);
}
.sub-paging .page-links {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.sub-paging .page-links a,
.sub-paging .page-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 .5rem;
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--v2-transition);
}
.sub-paging .page-links a {
  color: var(--v2-text-2);
  border: 1px solid var(--v2-border);
  background: var(--v2-card-bg);
}
.sub-paging .page-links a:hover {
  border-color: var(--v2-primary);
  color: var(--v2-primary);
  background: var(--v2-primary-light);
}
.sub-paging .page-links span.current {
  color: #fff;
  background: var(--v2-primary);
  border: 1px solid var(--v2-primary);
}
.sub-paging .perpage-select {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.sub-paging .perpage-select select {
  width: auto;
  font-size: .8125rem;
}

/* -- Changed confirmation page -- */
.sub-changed {
  text-align: center;
  padding: 3rem 2rem;
}
.sub-changed i {
  font-size: 3rem;
  color: var(--v2-success);
  margin-bottom: 1rem;
}
.sub-changed h4 {
  font-weight: 600;
  color: var(--v2-text);
  margin-bottom: .5rem;
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .sub-manage-header { flex-direction: column; }
  .sub-search-bar { width: 100%; }
  .sub-search-bar .form-control { width: 100%; flex: 1; }
  .sub-toolbar { flex-direction: column; align-items: stretch; }
  .sub-paging { flex-direction: column; align-items: center; }
}

/* ================================================================
   SUBSCRIBER EVENTS TABLE
   ================================================================ */
#subscriberEvents { margin-bottom: 0; }
#subscriberEvents thead th {
  font-weight: 600;
  font-size: .8125rem;
  color: var(--v2-text-2);
  border-bottom: 2px solid var(--v2-border);
  white-space: nowrap;
}
#subscriberEvents tbody td {
  vertical-align: middle;
  font-size: .875rem;
}
#subscriberEvents .badge {
  font-weight: 500;
  font-size: .75rem;
}
#subscriberEvents .btn-sm {
  padding: .2rem .45rem;
  font-size: .75rem;
}

/* ================================================================
   DATATABLES CONTROLS
   ================================================================ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-size: .8125rem;
}
.dataTables_wrapper .dataTables_length select {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-xs);
  padding: .3rem .6rem;
  font-size: .8125rem;
  outline: none;
  transition: border-color .2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--v2-primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,.15);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: .25rem .6rem;
  font-size: .8125rem;
  border-radius: var(--v2-radius-xs);
  border: 1px solid var(--v2-border);
  color: var(--v2-text-2);
  background: var(--v2-surface);
  cursor: pointer;
  transition: all .15s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--v2-primary-light);
  color: var(--v2-primary);
  border-color: var(--v2-primary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--v2-primary);
  color: #fff;
  border-color: var(--v2-primary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .4;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
}

/* --- ISSelect Replacement Widget --- */
.ISSelect {
  width: 100% !important;
  height: auto !important;
  min-height: 300px;
  max-height: 420px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  overflow-y: auto;
}
.ISSelect li {
  font-size: 0.9375rem;
  padding: 0.35rem 0.5rem;
  border-bottom: none !important;
  border-top: none !important;
}
.ISSelect li:hover {
  background: var(--v2-primary-light);
  border-radius: 0.25rem;
}
.ISSelect > ul > li > div {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 0.5rem 0.5rem 0.25rem;
  color: var(--v2-primary);
  font-style: normal !important;
}
.ISSelect .ISSelectGroup li {
  padding: 0.3rem 0.5rem 0.3rem 1.5rem;
}
.ISSelect input[type="checkbox"] {
  margin-right: 0.5rem;
  transform: scale(1.15);
  accent-color: var(--v2-primary);
  vertical-align: middle;
}
.ISSelect .ISSelectOptionHover {
  background: var(--v2-primary-light) !important;
  border-radius: 0.25rem;
}
.ISSelect .SelectedRow {
  background: var(--v2-primary) !important;
  border-color: var(--v2-primary) !important;
  color: #fff !important;
  border-radius: 0.25rem;
}
input.ISSelectSearch {
  width: 100% !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  padding: 0.375rem 0.75rem;
  margin-top: 0.5rem;
}

.fs-xs { font-size: 0.75rem; }

.v2-tabs {
  border-bottom: 1px solid var(--v2-border);
  gap: 0.125rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.v2-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--v2-text-2);
  white-space: nowrap;
  background: transparent !important;
  transition: var(--v2-transition);
}
.v2-tabs .nav-link:hover {
  color: var(--v2-primary);
  border-bottom-color: var(--v2-border);
}
.v2-tabs .nav-link.active,
.v2-tabs .nav-link.active:hover {
  color: var(--v2-primary);
  border-bottom-color: var(--v2-primary);
  background: transparent !important;
}
.v2-tabs .nav-link i {
  font-size: 0.9375rem;
  opacity: 0.85;
}

/* ================================================================
   PLAN / SUSCRIPCIÓN TAB (user editor) — destacado
   ================================================================ */
.v2-plan-tab {
  position: relative;
  margin-left: 0.375rem;
  border: 1px solid rgba(var(--v2-primary-rgb), .35) !important;
  border-bottom: 1px solid rgba(var(--v2-primary-rgb), .35) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  background: var(--v2-primary-light) !important;
  color: var(--v2-primary) !important;
}
.v2-plan-tab:hover {
  background: var(--v2-primary) !important;
  color: #fff !important;
  border-color: var(--v2-primary) !important;
}
.v2-plan-tab.active,
.v2-plan-tab.active:hover {
  background: var(--v2-primary) !important;
  color: #fff !important;
  border-color: var(--v2-primary) !important;
  border-bottom: 2px solid #fff !important;
}
.v2-plan-tab .bi {
  opacity: 1;
}
.v2-plan-dot {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #22c55e;
  margin-left: 0.4rem;
  vertical-align: 2px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
  animation: v2-plan-pulse 1.8s infinite;
}
.v2-plan-tab.active .v2-plan-dot,
.v2-plan-tab:hover .v2-plan-dot {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
}
@keyframes v2-plan-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* === Banner premium (plan DEMO) === */
.v2-premium-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  background: linear-gradient(120deg, #1e1b4b 0%, #312e81 30%, #4f46e5 65%, #6d28d9 100%);
  background-size: 220% 220%;
  animation: v2-premium-bg 8s ease infinite;
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(79, 70, 229, .55);
  isolation: isolate;
}
@keyframes v2-premium-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.v2-premium-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 85% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}
.v2-premium-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .5;
}
.v2-premium-orb-1 {
  width: 160px; height: 160px;
  top: -60px; right: -30px;
  background: radial-gradient(circle at 30% 30%, #22d3ee, rgba(34,211,238,0) 70%);
  animation: v2-premium-float 6s ease-in-out infinite;
}
.v2-premium-orb-2 {
  width: 90px; height: 90px;
  bottom: -30px; left: 22%;
  background: radial-gradient(circle at 30% 30%, #a78bfa, rgba(167,139,250,0) 70%);
  animation: v2-premium-float 7s ease-in-out .8s infinite;
}
.v2-premium-orb-3 {
  width: 60px; height: 60px;
  top: 24%; left: -20px;
  background: radial-gradient(circle at 30% 30%, #f472b6, rgba(244,114,182,0) 70%);
  animation: v2-premium-float 5s ease-in-out 1.4s infinite;
}
@keyframes v2-premium-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-14px) translateX(10px); }
}
.v2-premium-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.75rem 2rem;
  max-width: 720px;
}
.v2-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.v2-premium-badge .bi { color: #facc15; }
.v2-premium-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}
.v2-premium-text {
  margin: 0;
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
}
.v2-premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
}
.v2-premium-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .7);
  transition: transform .2s var(--v2-ease), box-shadow .2s var(--v2-ease), filter .2s var(--v2-ease);
  overflow: hidden;
}
.v2-premium-btn:hover,
.v2-premium-btn:focus {
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 14px 32px -10px rgba(245, 158, 11, .85);
}
.v2-premium-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: skewX(-20deg);
  transition: left .5s var(--v2-ease);
}
.v2-premium-btn:hover::after,
.v2-premium-btn:focus::after { left: 130%; }
.v2-premium-btn-ghost {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: none;
}
.v2-premium-btn-ghost:hover,
.v2-premium-btn-ghost:focus {
  background: rgba(255,255,255,.2);
  filter: none;
  box-shadow: 0 8px 20px -8px rgba(255,255,255,.25);
}

/* === Capacidades de plan === */
.v2-cap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-badge);
  border: 1px solid var(--v2-border);
  min-height: 62px;
}
.v2-cap > .bi {
  font-size: 1.25rem;
  color: var(--v2-primary);
  flex-shrink: 0;
}
.v2-cap-value {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--v2-text);
  line-height: 1.25;
}
.v2-cap-label {
  font-size: .75rem;
  color: var(--v2-text-3);
}
.v2-cap-unlimited {
  color: var(--v2-success);
}
.v2-cap-feature .v2-cap-value {
  font-size: .8125rem;
}

/* === Tarjetas de planes (pricing) === */
.v2-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  overflow: hidden;
  transition: transform .2s var(--v2-ease), box-shadow .2s var(--v2-ease), border-color .2s var(--v2-ease);
}
.v2-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-xl);
  border-color: var(--v2-primary);
}
.v2-plan-current {
  border-color: var(--v2-primary);
  box-shadow: 0 0 0 1px var(--v2-primary);
}
.v2-plan-featured::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6);
  z-index: 2;
}
.v2-plan-head {
  padding: 1.5rem 1.5rem .75rem;
  text-align: center;
}
.v2-plan-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 26px;
  margin-bottom: .75rem;
}
.v2-plan-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .22rem .65rem;
  border-radius: 999px;
}
.v2-plan-tag-free { background: var(--v2-success-light); color: var(--v2-success); }
.v2-plan-tag-featured { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; box-shadow: 0 6px 16px -6px rgba(245,158,11,.6); }
.v2-plan-tag-current { background: var(--v2-primary-light); color: var(--v2-primary); }
.v2-plan-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--v2-primary), #7c3aed);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(79,70,229,.55);
}
.v2-plan-free .v2-plan-icon { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 10px 20px -8px rgba(5,150,105,.5); }
.v2-plan-name {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.v2-plan-desc {
  margin: 0;
  font-size: .8125rem;
  color: var(--v2-text-3);
  min-height: 38px;
}
.v2-plan-price {
  padding: 1rem 1.5rem;
  border-top: 1px dashed var(--v2-border);
  border-bottom: 1px dashed var(--v2-border);
  text-align: center;
  background: var(--v2-surface-hover);
}
.v2-plan-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--v2-text);
  line-height: 1.1;
}
.v2-plan-currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--v2-text-3);
}
.v2-plan-period {
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--v2-text-3);
}
.v2-plan-features {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.v2-plan-features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .875rem;
  color: var(--v2-text-2);
}
.v2-plan-features li > .bi {
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--v2-success);
}
.v2-plan-features strong { color: var(--v2-text); }
.v2-plan-unlimited { color: var(--v2-success); }
.v2-plan-foot {
  padding: 0 1.5rem 1.5rem;
}

/* ═══════════════════════════════
   DASHBOARD 2.0 — redesigned index
   ═══════════════════════════════ */
.v2-stat-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.v2-stat-top .v2-stat-icon { margin-bottom: 0; }
.v2-stat-trend { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.v2-stat-trend.up { background: var(--v2-success-light); color: var(--v2-success); }
.v2-stat-trend.warn { background: var(--v2-warning-light); color: var(--v2-warning); }
.v2-stat-trend.down { background: var(--v2-danger-light); color: var(--v2-danger); }
.v2-stat-foot { margin-top: .875rem; padding-top: .625rem; border-top: 1px dashed var(--v2-border); font-size: .75rem; color: var(--v2-text-3); display: flex; align-items: center; gap: .375rem; }
.v2-stat-foot a { color: var(--v2-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.v2-stat-foot a:hover { text-decoration: underline; }
.v2-stat.blue-accent::before { background: var(--v2-primary); }
.v2-stat.cyan-accent::before { background: var(--v2-info); }

.v2-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--v2-text-3); font-size: .875rem; }
.v2-empty i { font-size: 2rem; color: var(--v2-text-3); opacity: .5; display: block; margin-bottom: .5rem; }
.v2-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto .5rem;
  border: 3px solid var(--v2-border);
  border-top-color: var(--v2-primary);
  border-radius: 50%;
  animation: v2-spin .7s linear infinite;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

.v2-chart-subtitle { font-size: .6875rem; font-weight: 500; color: var(--v2-text-3); background: var(--v2-badge); padding: .15rem .55rem; border-radius: 999px; }
.v2-activity-chart { min-height: 300px; }
.v2-chart-legend { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .6875rem; font-weight: 600; color: var(--v2-text-2); }
.v2-chart-legend span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.v2-chart-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.v2-campaign-badge.archived { background: var(--v2-badge); color: var(--v2-text-2); }
.v2-campaign-dot.archived { background: var(--v2-text-3); }

@media (max-width: 768px) {
  .v2-page-actions { width: 100%; }
  .v2-chart-legend { width: 100%; }
}