/* ============================================================
   YasTrack v2 — Premium Design System
   Layer:  Overrides & enhancements atop style.css v6.1
   ============================================================ */

/* ─── Design Tokens ─── */
:root {
  /* Refined Primary Palette */
  --v2-primary:    #2563eb;
  --v2-primary-rgb: 37, 99, 235;
  --v2-primary-dark:  #1d4ed8;
  --v2-primary-light: #60a5fa;
  --v2-primary-soft:  rgba(37, 99, 235, 0.08);
  --v2-primary-glow:  rgba(37, 99, 235, 0.25);

  /* Extended Palette */
  --v2-accent:       #8b5cf6;
  --v2-accent-rgb:   139, 92, 246;
  --v2-accent-soft:  rgba(139, 92, 246, 0.08);
  --v2-success:      #10b981;
  --v2-success-rgb:  16, 185, 129;
  --v2-success-soft: rgba(16, 185, 129, 0.1);
  --v2-warning:      #f59e0b;
  --v2-warning-rgb:  245, 158, 11;
  --v2-warning-soft: rgba(245, 158, 11, 0.1);
  --v2-danger:       #ef4444;
  --v2-danger-rgb:   239, 68, 68;
  --v2-danger-soft:  rgba(239, 68, 68, 0.1);
  --v2-info:         #06b6d4;
  --v2-info-rgb:     6, 182, 212;
  --v2-info-soft:    rgba(6, 182, 212, 0.1);

  /* Neutral scale */
  --v2-gray-50:  #f8fafc;
  --v2-gray-100: #f1f5f9;
  --v2-gray-200: #e2e8f0;
  --v2-gray-300: #cbd5e1;
  --v2-gray-400: #94a3b8;
  --v2-gray-500: #64748b;
  --v2-gray-600: #475569;
  --v2-gray-700: #334155;
  --v2-gray-800: #1e293b;
  --v2-gray-900: #0f172a;

  /* Surfaces */
  --v2-surface:       #ffffff;
  --v2-surface-raised:#ffffff;
  --v2-surface-hover: #f8fafc;
  --v2-surface-overlay: rgba(0, 0, 0, 0.04);

  /* Glass */
  --v2-glass-bg:      rgba(255, 255, 255, 0.7);
  --v2-glass-border:  rgba(255, 255, 255, 0.2);
  --v2-glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.06);

  /* Shadows */
  --v2-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --v2-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --v2-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
  --v2-shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.08);
  --v2-shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.1);
  --v2-shadow-glow-primary: 0 4px 20px rgba(37, 99, 235, 0.25);
  --v2-shadow-glow-success: 0 4px 20px rgba(16, 185, 129, 0.25);
  --v2-shadow-glow-danger:  0 4px 20px rgba(239, 68, 68, 0.25);

  /* Border Radius */
  --v2-radius-sm:   8px;
  --v2-radius-md:   12px;
  --v2-radius-lg:   16px;
  --v2-radius-xl:   20px;
  --v2-radius-2xl:  24px;
  --v2-radius-full: 9999px;

  /* Typography */
  --v2-font-sans: 'Tajawal', system-ui, -apple-system, sans-serif;
  --v2-font-mono: 'SF Mono', 'Fira Code', monospace;
  --v2-text-xs:   0.75rem;
  --v2-text-sm:   0.8125rem;
  --v2-text-base: 0.9375rem;
  --v2-text-lg:   1.0625rem;
  --v2-text-xl:   1.25rem;
  --v2-text-2xl:  1.5rem;
  --v2-text-3xl:  1.875rem;

  /* Transitions */
  --v2-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --v2-transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --v2-transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --v2-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --v2-z-dropdown: 100;
  --v2-z-sticky:   200;
  --v2-z-overlay:  300;
  --v2-z-modal:    400;
  --v2-z-toast:    500;
}

[data-theme="dark"] {
  --v2-surface:       #1e293b;
  --v2-surface-raised:#1e293b;
  --v2-surface-hover: #334155;
  --v2-surface-overlay: rgba(255, 255, 255, 0.04);
  --v2-glass-bg:      rgba(30, 41, 59, 0.7);
  --v2-glass-border:  rgba(255, 255, 255, 0.08);
  --v2-glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.3);
  --v2-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
  --v2-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --v2-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --v2-shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.5);
  --v2-shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ─── Base Refinements ─── */
body {
  font-feature-settings: "kern" 1, "ss01" 1, "cv01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--v2-primary);
  color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--v2-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--v2-gray-400); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--v2-gray-600); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--v2-gray-500); }

/* ─── Skeleton Loaders ─── */
.v2-skeleton {
  background: linear-gradient(90deg,
    var(--v2-gray-200) 25%,
    var(--v2-gray-100) 50%,
    var(--v2-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: v2-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--v2-radius-sm);
}
[data-theme="dark"] .v2-skeleton {
  background: linear-gradient(90deg,
    var(--v2-gray-700) 25%,
    var(--v2-gray-600) 50%,
    var(--v2-gray-700) 75%
  );
  background-size: 200% 100%;
}

@keyframes v2-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.v2-skeleton-text { height: 14px; margin-bottom: 8px; width: 100%; }
.v2-skeleton-text-sm { height: 10px; width: 60%; }
.v2-skeleton-heading { height: 24px; width: 40%; margin-bottom: 16px; }
.v2-skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }
.v2-skeleton-card { height: 120px; border-radius: var(--v2-radius-lg); }
.v2-skeleton-chart { height: 200px; }

/* ─── Glass Card ─── */
.v2-glass {
  background: var(--v2-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--v2-glass-border);
  box-shadow: var(--v2-glass-shadow);
}

/* ─── Premium Card Component ─── */
.v2-card {
  background: var(--v2-surface);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-sm);
  border: 1px solid var(--v2-gray-200);
  transition: all var(--v2-transition-base);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .v2-card {
  border-color: var(--v2-gray-700);
}

.v2-card:hover {
  box-shadow: var(--v2-shadow-md);
  border-color: var(--v2-gray-300);
}
[data-theme="dark"] .v2-card:hover {
  border-color: var(--v2-gray-600);
}

.v2-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--v2-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
[data-theme="dark"] .v2-card-header {
  border-bottom-color: var(--v2-gray-700);
}

.v2-card-body { padding: 1.5rem; }
.v2-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--v2-gray-100);
  background: var(--v2-gray-50);
}
[data-theme="dark"] .v2-card-footer {
  border-top-color: var(--v2-gray-700);
  background: var(--v2-gray-800);
}

/* ─── Premium KPI Stat Card ─── */
.v2-stat {
  background: var(--v2-surface);
  border-radius: var(--v2-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--v2-shadow-sm);
  border: 1px solid var(--v2-gray-200);
  transition: all var(--v2-transition-base);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .v2-stat {
  border-color: var(--v2-gray-700);
}

.v2-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--v2-shadow-lg);
  border-color: var(--v2-gray-300);
}
[data-theme="dark"] .v2-stat:hover {
  border-color: var(--v2-gray-600);
}

.v2-stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.v2-stat-label {
  font-size: var(--v2-text-sm);
  color: var(--v2-gray-500);
  font-weight: 500;
  margin: 0 0 0.25rem;
}

.v2-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--v2-gray-900);
  line-height: 1;
  margin: 0;
}
[data-theme="dark"] .v2-stat-value {
  color: #fff;
}

.v2-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--v2-text-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--v2-radius-full);
  margin-top: 0.5rem;
}
.v2-stat-trend.up { background: var(--v2-success-soft); color: var(--v2-success); }
.v2-stat-trend.down { background: var(--v2-danger-soft); color: var(--v2-danger); }

.v2-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--v2-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.v2-stat-icon.primary { background: var(--v2-primary-soft); color: var(--v2-primary); }
.v2-stat-icon.success { background: var(--v2-success-soft); color: var(--v2-success); }
.v2-stat-icon.warning { background: var(--v2-warning-soft); color: var(--v2-warning); }
.v2-stat-icon.danger  { background: var(--v2-danger-soft); color: var(--v2-danger); }
.v2-stat-icon.info    { background: var(--v2-info-soft); color: var(--v2-info); }
.v2-stat-icon.accent  { background: var(--v2-accent-soft); color: var(--v2-accent); }

/* ─── Premium Stat with gradient accent bar ─── */
.v2-stat-accent::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  border-radius: 0 0 2px 2px;
}
.v2-stat-accent.primary::before { background: var(--v2-primary); }
.v2-stat-accent.success::before { background: var(--v2-success); }
.v2-stat-accent.warning::before { background: var(--v2-warning); }
.v2-stat-accent.danger::before  { background: var(--v2-danger); }
.v2-stat-accent.info::before    { background: var(--v2-info); }
.v2-stat-accent.accent::before  { background: var(--v2-accent); }

/* ─── Gradient Stat variant ─── */
.v2-stat-gradient {
  border: none !important;
  color: #fff;
}
.v2-stat-gradient .v2-stat-label { color: rgba(255, 255, 255, 0.75); }
.v2-stat-gradient .v2-stat-value { color: #fff; }
.v2-stat-gradient .v2-stat-icon {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.v2-stat-gradient.primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.v2-stat-gradient.success { background: linear-gradient(135deg, #10b981, #059669); }
.v2-stat-gradient.warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.v2-stat-gradient.danger  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.v2-stat-gradient.info    { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.v2-stat-gradient.accent  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* ─── Premium Buttons ─── */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: var(--v2-text-sm);
  font-weight: 600;
  font-family: var(--v2-font-sans);
  border-radius: var(--v2-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--v2-transition-base);
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}

.v2-btn:active { transform: scale(0.97); }

.v2-btn-primary {
  background: var(--v2-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(var(--v2-primary-rgb), 0.3);
}
.v2-btn-primary:hover {
  background: var(--v2-primary-dark);
  box-shadow: var(--v2-shadow-glow-primary);
  transform: translateY(-1px);
  color: #fff;
}

.v2-btn-success {
  background: var(--v2-success);
  color: #fff;
}
.v2-btn-success:hover {
  background: #059669;
  box-shadow: var(--v2-shadow-glow-success);
  transform: translateY(-1px);
  color: #fff;
}

.v2-btn-danger {
  background: var(--v2-danger);
  color: #fff;
}
.v2-btn-danger:hover {
  background: #dc2626;
  box-shadow: var(--v2-shadow-glow-danger);
  transform: translateY(-1px);
  color: #fff;
}

.v2-btn-ghost {
  background: transparent;
  color: var(--v2-gray-600);
}
.v2-btn-ghost:hover {
  background: var(--v2-gray-100);
  color: var(--v2-gray-900);
}
[data-theme="dark"] .v2-btn-ghost:hover {
  background: var(--v2-gray-700);
  color: #fff;
}

.v2-btn-outline {
  background: transparent;
  border: 1.5px solid var(--v2-gray-300);
  color: var(--v2-gray-600);
}
.v2-btn-outline:hover {
  border-color: var(--v2-primary);
  color: var(--v2-primary);
  background: var(--v2-primary-soft);
}
[data-theme="dark"] .v2-btn-outline {
  border-color: var(--v2-gray-600);
  color: var(--v2-gray-400);
}
[data-theme="dark"] .v2-btn-outline:hover {
  border-color: var(--v2-primary);
  color: var(--v2-primary-light);
}

.v2-btn-sm { padding: 0.375rem 0.75rem; font-size: var(--v2-text-xs); }
.v2-btn-lg { padding: 0.75rem 1.5rem; font-size: var(--v2-text-base); }
.v2-btn-xl { padding: 0.875rem 2rem; font-size: var(--v2-text-lg); }
.v2-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--v2-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-btn-block { width: 100%; justify-content: center; }
.v2-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Ripple effect container */
.v2-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--v2-ripple-x, 50%) var(--v2-ripple-y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.v2-btn:active::after { opacity: 1; }

/* ─── Form Controls ─── */
.v2-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: var(--v2-text-sm);
  font-family: var(--v2-font-sans);
  color: var(--v2-gray-800);
  background: var(--v2-surface);
  border: 1.5px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-md);
  transition: all var(--v2-transition-fast);
  outline: none;
}
[data-theme="dark"] .v2-input {
  color: #fff;
  background: var(--v2-gray-800);
  border-color: var(--v2-gray-600);
}

.v2-input:hover { border-color: var(--v2-gray-300); }
[data-theme="dark"] .v2-input:hover { border-color: var(--v2-gray-500); }

.v2-input:focus {
  border-color: var(--v2-primary);
  box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.1);
}
[data-theme="dark"] .v2-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.2);
}

.v2-input-sm { padding: 0.375rem 0.625rem; font-size: var(--v2-text-xs); }
.v2-input-lg { padding: 0.75rem 1rem; font-size: var(--v2-text-base); }

.v2-label {
  display: block;
  font-size: var(--v2-text-sm);
  font-weight: 600;
  color: var(--v2-gray-700);
  margin-bottom: 0.375rem;
}
[data-theme="dark"] .v2-label { color: var(--v2-gray-300); }

/* Floating label variant */
.v2-input-group {
  position: relative;
}
.v2-input-group .v2-input {
  padding-top: 1.375rem;
  padding-bottom: 0.5rem;
}
.v2-input-group .v2-label {
  position: absolute;
  top: 0.625rem;
  right: 0.875rem;
  font-size: var(--v2-text-xs);
  color: var(--v2-gray-400);
  margin: 0;
  pointer-events: none;
  transition: all var(--v2-transition-fast);
}
.v2-input-group .v2-input:focus + .v2-label,
.v2-input-group .v2-input:not(:placeholder-shown) + .v2-label {
  top: 0.25rem;
  font-size: 0.625rem;
  color: var(--v2-primary);
}

/* ─── Select2 + DataTables overrides ─── */
.select2-container--bootstrap-5 .select2-selection {
  border-radius: var(--v2-radius-md) !important;
  border: 1.5px solid var(--v2-gray-200) !important;
  min-height: 40px;
  padding: 0.25rem 0;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background: var(--v2-gray-800) !important;
  border-color: var(--v2-gray-600) !important;
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--v2-radius-md) !important;
  border: 1.5px solid var(--v2-gray-200) !important;
  padding: 0.5rem 0.75rem !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--v2-gray-800) !important;
  border-color: var(--v2-gray-600) !important;
  color: #fff !important;
}

/* ─── Premium Table ─── */
.v2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.v2-table th {
  padding: 0.75rem 1rem;
  font-size: var(--v2-text-xs);
  font-weight: 600;
  color: var(--v2-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--v2-gray-50);
  border-bottom: 1px solid var(--v2-gray-200);
  text-align: right;
  white-space: nowrap;
}
[data-theme="dark"] .v2-table th {
  background: var(--v2-gray-800);
  border-bottom-color: var(--v2-gray-700);
  color: var(--v2-gray-400);
}

.v2-table td {
  padding: 0.875rem 1rem;
  font-size: var(--v2-text-sm);
  color: var(--v2-gray-700);
  border-bottom: 1px solid var(--v2-gray-100);
  vertical-align: middle;
}
[data-theme="dark"] .v2-table td {
  border-bottom-color: var(--v2-gray-700);
  color: var(--v2-gray-300);
}

.v2-table tbody tr {
  transition: background var(--v2-transition-fast);
}
.v2-table tbody tr:hover {
  background: rgba(var(--v2-primary-rgb), 0.03);
}
[data-theme="dark"] .v2-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ─── Status Badges (Premium) ─── */
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--v2-radius-full);
  white-space: nowrap;
  line-height: 1.4;
}

.v2-badge-success   { background: var(--v2-success-soft); color: #059669; }
.v2-badge-danger    { background: var(--v2-danger-soft); color: #dc2626; }
.v2-badge-warning   { background: var(--v2-warning-soft); color: #d97706; }
.v2-badge-info      { background: var(--v2-info-soft); color: #0891b2; }
.v2-badge-primary   { background: var(--v2-primary-soft); color: var(--v2-primary); }
.v2-badge-accent    { background: var(--v2-accent-soft); color: var(--v2-accent); }
.v2-badge-neutral   { background: var(--v2-gray-100); color: var(--v2-gray-600); }

[data-theme="dark"] .v2-badge-success   { color: var(--v2-success); }
[data-theme="dark"] .v2-badge-danger    { color: var(--v2-danger); }
[data-theme="dark"] .v2-badge-warning   { color: var(--v2-warning); }
[data-theme="dark"] .v2-badge-info      { color: var(--v2-info); }
[data-theme="dark"] .v2-badge-neutral   { background: var(--v2-gray-700); color: var(--v2-gray-300); }

/* Status dot */
.v2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.v2-dot-success { background: var(--v2-success); }
.v2-dot-danger  { background: var(--v2-danger); }
.v2-dot-warning { background: var(--v2-warning); }
.v2-dot-info    { background: var(--v2-info); }
.v2-dot-primary { background: var(--v2-primary); }
.v2-dot-neutral { background: var(--v2-gray-400); }

/* ─── Alerts ─── */
.v2-alert {
  padding: 0.875rem 1rem;
  border-radius: var(--v2-radius-md);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--v2-text-sm);
  animation: v2-slideIn var(--v2-transition-slow) ease;
  border: 1px solid transparent;
}
.v2-alert i { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; }

.v2-alert-success {
  background: var(--v2-success-soft);
  border-color: rgba(var(--v2-success-rgb), 0.15);
  color: #065f46;
}
[data-theme="dark"] .v2-alert-success { color: var(--v2-success); }

.v2-alert-danger {
  background: var(--v2-danger-soft);
  border-color: rgba(var(--v2-danger-rgb), 0.15);
  color: #991b1b;
}
[data-theme="dark"] .v2-alert-danger { color: var(--v2-danger); }

.v2-alert-warning {
  background: var(--v2-warning-soft);
  border-color: rgba(var(--v2-warning-rgb), 0.15);
  color: #92400e;
}
[data-theme="dark"] .v2-alert-warning { color: var(--v2-warning); }

.v2-alert-info {
  background: var(--v2-info-soft);
  border-color: rgba(var(--v2-info-rgb), 0.15);
  color: #155e75;
}
[data-theme="dark"] .v2-alert-info { color: var(--v2-info); }

/* ─── Tabs ─── */
.v2-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--v2-gray-200);
  padding: 0;
  list-style: none;
  margin-bottom: 1.5rem;
}
[data-theme="dark"] .v2-tabs {
  border-bottom-color: var(--v2-gray-700);
}

.v2-tab {
  padding: 0.625rem 1rem;
  font-size: var(--v2-text-sm);
  font-weight: 500;
  color: var(--v2-gray-500);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--v2-font-sans);
  transition: all var(--v2-transition-fast);
  position: relative;
  white-space: nowrap;
}

.v2-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 100%;
  height: 2px;
  background: var(--v2-primary);
  transform: scaleX(0);
  transition: transform var(--v2-transition-base);
}

.v2-tab:hover { color: var(--v2-gray-700); }
[data-theme="dark"] .v2-tab:hover { color: var(--v2-gray-300); }

.v2-tab.active {
  color: var(--v2-primary);
  font-weight: 600;
}
.v2-tab.active::after { transform: scaleX(1); }

/* ─── Avatar ─── */
.v2-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--v2-gray-200);
}
[data-theme="dark"] .v2-avatar {
  background: var(--v2-gray-600);
}

.v2-avatar-sm { width: 32px; height: 32px; }
.v2-avatar-lg { width: 56px; height: 56px; }
.v2-avatar-xl { width: 72px; height: 72px; }

/* ─── Dropdown ─── */
.v2-dropdown-menu {
  background: var(--v2-surface);
  border: 1px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-lg);
  padding: 0.375rem;
  min-width: 200px;
  animation: v2-scaleIn 0.15s ease;
  transform-origin: top left;
}
[data-theme="dark"] .v2-dropdown-menu {
  border-color: var(--v2-gray-700);
}

.v2-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--v2-radius-sm);
  color: var(--v2-gray-600);
  font-size: var(--v2-text-sm);
  font-weight: 500;
  transition: all var(--v2-transition-fast);
  text-decoration: none !important;
  cursor: pointer;
}
.v2-dropdown-item:hover {
  background: var(--v2-gray-100);
  color: var(--v2-gray-900);
}
[data-theme="dark"] .v2-dropdown-item:hover {
  background: var(--v2-gray-700);
  color: #fff;
}

.v2-dropdown-divider {
  height: 1px;
  background: var(--v2-gray-100);
  margin: 0.25rem 0.5rem;
}
[data-theme="dark"] .v2-dropdown-divider {
  background: var(--v2-gray-700);
}

/* ─── Modal ─── */
.v2-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--v2-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: v2-fadeIn 0.15s ease;
}

.v2-modal {
  background: var(--v2-surface);
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: v2-slideUp 0.25s ease;
}

.v2-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--v2-gray-100);
}
[data-theme="dark"] .v2-modal-header {
  border-bottom-color: var(--v2-gray-700);
}

.v2-modal-body { padding: 1.5rem; }
.v2-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--v2-gray-100);
}
[data-theme="dark"] .v2-modal-footer {
  border-top-color: var(--v2-gray-700);
}

/* ─── Empty State ─── */
.v2-empty {
  text-align: center;
  padding: 3rem 1.5rem;
}
.v2-empty-icon {
  font-size: 3.5rem;
  color: var(--v2-gray-300);
  margin-bottom: 1rem;
}
[data-theme="dark"] .v2-empty-icon { color: var(--v2-gray-600); }

.v2-empty h3 {
  font-size: var(--v2-text-lg);
  font-weight: 700;
  color: var(--v2-gray-700);
  margin-bottom: 0.5rem;
}
[data-theme="dark"] .v2-empty h3 { color: var(--v2-gray-300); }

.v2-empty p {
  font-size: var(--v2-text-sm);
  color: var(--v2-gray-400);
  margin-bottom: 1.5rem;
}

/* ─── Tooltip ─── */
.v2-tooltip {
  position: relative;
}
.v2-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: var(--v2-gray-800);
  color: #fff;
  padding: 0.25rem 0.625rem;
  border-radius: var(--v2-radius-sm);
  font-size: var(--v2-text-xs);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--v2-transition-fast);
}
[data-theme="dark"] .v2-tooltip::after {
  background: var(--v2-gray-100);
  color: var(--v2-gray-800);
}
.v2-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ─── Progress Bar ─── */
.v2-progress {
  width: 100%;
  height: 6px;
  background: var(--v2-gray-100);
  border-radius: var(--v2-radius-full);
  overflow: hidden;
}
[data-theme="dark"] .v2-progress {
  background: var(--v2-gray-700);
}

.v2-progress-bar {
  height: 100%;
  border-radius: var(--v2-radius-full);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--v2-primary);
}

/* ─── Divider ─── */
.v2-divider {
  height: 1px;
  background: var(--v2-gray-100);
  margin: 1.5rem 0;
}
[data-theme="dark"] .v2-divider {
  background: var(--v2-gray-700);
}

.v2-divider-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--v2-gray-400);
  font-size: var(--v2-text-xs);
  font-weight: 500;
}
.v2-divider-label::before,
.v2-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v2-gray-200);
}
[data-theme="dark"] .v2-divider-label::before,
[data-theme="dark"] .v2-divider-label::after {
  background: var(--v2-gray-700);
}

/* ─── Animations ─── */
@keyframes v2-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes v2-fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes v2-slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes v2-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes v2-spin {
  to { transform: rotate(360deg); }
}

/* Utility classes */
.v2-animate-fade-in    { animation: v2-fadeIn var(--v2-transition-slow) ease; }
.v2-animate-fade-in-up { animation: v2-fadeInUp var(--v2-transition-slow) ease; }
.v2-animate-slide-up   { animation: v2-slideUp var(--v2-transition-slow) ease; }
.v2-animate-scale-in   { animation: v2-scaleIn var(--v2-transition-base) ease; }

/* ─── Page Transitions ─── */
.v2-page-enter {
  opacity: 1;
  transform: translateY(0);
}
.v2-page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--v2-transition-slow);
}

/* ─── Loading spinner ─── */
.v2-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--v2-gray-200);
  border-top-color: var(--v2-primary);
  border-radius: 50%;
  animation: v2-spin 0.6s linear infinite;
}
[data-theme="dark"] .v2-spinner {
  border-color: var(--v2-gray-600);
  border-top-color: var(--v2-primary-light);
}

.v2-spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.v2-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* ─── Page Loader ─── */
.v2-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--v2-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.v2-page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.v2-page-loader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.v2-page-loader-logo img {
  height: 48px;
  animation: v2-pulse 1.5s ease-in-out infinite;
}

.v2-page-loader-bar {
  width: 160px;
  height: 3px;
  background: var(--v2-gray-100);
  border-radius: 3px;
  overflow: hidden;
}
[data-theme="dark"] .v2-page-loader-bar {
  background: var(--v2-gray-700);
}

.v2-page-loader-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: var(--v2-primary);
  border-radius: 3px;
  animation: v2-loaderSlide 1.2s ease-in-out infinite;
}

@keyframes v2-loaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ─── Responsive tweaks ─── */
@media (max-width: 768px) {
  .v2-stat { padding: 1.25rem; }
  .v2-stat-value { font-size: 1.5rem; }
  .v2-card-header { padding: 1rem 1.25rem; }
  .v2-card-body { padding: 1.25rem; }
  .v2-modal { max-width: 100%; margin: 0.5rem; }
  .v2-table th,
  .v2-table td { padding: 0.625rem 0.75rem; }
}

@media (max-width: 576px) {
  .v2-stat { padding: 1rem; }
  .v2-stat-value { font-size: 1.25rem; }
  .v2-stat-icon { width: 40px; height: 40px; font-size: 1.25rem; }
  .v2-btn { padding: 0.5rem 1rem; font-size: var(--v2-text-xs); }
  .v2-btn-lg { padding: 0.625rem 1.25rem; }
}

/* ─── Override existing Bootstrap / sca-* with v2 where applicable ─── */
.card {
  border-radius: var(--v2-radius-lg) !important;
  transition: all var(--v2-transition-base) !important;
}
.card:hover {
  box-shadow: var(--v2-shadow-md) !important;
}

.card-header {
  border-radius: var(--v2-radius-lg) var(--v2-radius-lg) 0 0 !important;
}

.btn {
  border-radius: var(--v2-radius-md) !important;
  font-weight: 600 !important;
  transition: all var(--v2-transition-base) !important;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--v2-primary) !important;
  box-shadow: 0 1px 3px rgba(var(--v2-primary-rgb), 0.3) !important;
}
.btn-primary:hover {
  background: var(--v2-primary-dark) !important;
  box-shadow: var(--v2-shadow-glow-primary) !important;
}

.form-control, .form-select {
  border-radius: var(--v2-radius-md) !important;
  border: 1.5px solid var(--v2-gray-200) !important;
  transition: all var(--v2-transition-fast) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--v2-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.1) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--v2-gray-800) !important;
  border-color: var(--v2-gray-600) !important;
  color: #fff !important;
}

/* ============================================================
   NAVIGATION — Sidebar + Header (Phase 3)
   ============================================================ */

/* ─── Sidebar Base ─── */
.v2-sidebar {
  transition: transform var(--v2-transition-slow), box-shadow var(--v2-transition-slow) !important;
}

/* Sidebar Header */
.v2-sidebar-header {
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.v2-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--v2-radius-md);
  background: linear-gradient(135deg, var(--v2-primary), var(--v2-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-left: 0.625rem;
  box-shadow: 0 2px 8px rgba(var(--v2-primary-rgb), 0.25);
}

.v2-logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--v2-primary), var(--v2-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .v2-logo-text {
  background: linear-gradient(135deg, var(--v2-primary-light), var(--v2-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sca-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.v2-sidebar-close {
  display: none;
  background: var(--v2-gray-100);
  border: none;
  color: var(--v2-gray-500);
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius-sm);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--v2-transition-fast);
}
.v2-sidebar-close:hover {
  background: var(--v2-gray-200);
  color: var(--v2-gray-700);
}
[data-theme="dark"] .v2-sidebar-close {
  background: var(--v2-gray-700);
  color: var(--v2-gray-400);
}
[data-theme="dark"] .v2-sidebar-close:hover {
  background: var(--v2-gray-600);
  color: #fff;
}

/* ─── Sidebar User Card ─── */
.v2-sidebar-user {
  background: linear-gradient(135deg, rgba(var(--v2-primary-rgb), 0.06), rgba(var(--v2-accent-rgb), 0.06)) !important;
  border: 1px solid rgba(var(--v2-primary-rgb), 0.1) !important;
  margin: 0.75rem 0.75rem 0.5rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--v2-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.v2-sidebar-avatar {
  background: var(--v2-primary) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 2px solid rgba(var(--v2-primary-rgb), 0.15);
}
.v2-sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-sidebar-user-info h4 {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 0 0.2rem !important;
}

.v2-sidebar-user-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.v2-sidebar-user-meta .v2-badge {
  font-size: 0.55rem !important;
  padding: 0.1rem 0.45rem !important;
}

.v2-sidebar-wa {
  color: #25d366 !important;
  font-size: 0.9rem !important;
  line-height: 1;
  text-decoration: none !important;
  transition: transform var(--v2-transition-fast);
}
.v2-sidebar-wa:hover {
  transform: scale(1.15);
}

/* ─── Subscription ─── */
.v2-sidebar-sub {
  margin: 0 0.75rem 0.5rem !important;
  border-radius: var(--v2-radius-md) !important;
  padding: 0.6rem 1rem !important;
  border: 1px solid var(--border-color) !important;
  transition: all var(--v2-transition-base) !important;
}
.v2-sidebar-sub:hover {
  border-color: var(--v2-primary) !important;
  background: rgba(var(--v2-primary-rgb), 0.03);
}

/* ─── Navigation ─── */
.v2-nav {
  padding: 0.25rem 0 !important;
}

.v2-nav .sca-nav-label {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--v2-gray-400) !important;
  padding: 1rem 1.25rem 0.3rem !important;
}

.v2-nav .sca-nav-divider {
  margin: 0.15rem 1.25rem !important;
  background: var(--v2-gray-100) !important;
  height: 1px !important;
}
[data-theme="dark"] .v2-nav .sca-nav-divider {
  background: var(--v2-gray-700) !important;
}

/* Nav items */
.v2-nav .sca-nav-item {
  position: relative;
  padding: 0.6rem 1.25rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-sidebar) !important;
  gap: 0.75rem !important;
  transition: all var(--v2-transition-fast) !important;
  margin: 0 0.375rem !important;
  border-radius: var(--v2-radius-sm) !important;
  width: calc(100% - 0.75rem) !important;
  text-decoration: none !important;
}

.v2-nav .sca-nav-item:hover {
  background: var(--v2-gray-50) !important;
  color: var(--v2-primary) !important;
}
[data-theme="dark"] .v2-nav .sca-nav-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--v2-primary-light) !important;
}

.v2-nav .sca-nav-item.active {
  background: linear-gradient(135deg, rgba(var(--v2-primary-rgb), 0.08), rgba(var(--v2-accent-rgb), 0.04)) !important;
  color: var(--v2-primary) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .v2-nav .sca-nav-item.active {
  background: rgba(var(--v2-primary-rgb), 0.12) !important;
  color: var(--v2-primary-light) !important;
}

/* Active indicator bar */
.v2-nav .sca-nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  right: -0.375rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 60% !important;
  background: linear-gradient(180deg, var(--v2-primary), var(--v2-accent)) !important;
  border-radius: 0 3px 3px 0 !important;
  box-shadow: 0 0 8px rgba(var(--v2-primary-rgb), 0.3);
}

/* Nav item icons */
.v2-nav .sca-nav-item i:first-child {
  font-size: 1.1rem !important;
  width: 22px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Arrow */
.v2-nav .sca-nav-arrow {
  margin-right: auto !important;
  font-size: 0.85rem !important;
  transition: transform var(--v2-transition-base) !important;
  color: var(--v2-gray-400) !important;
}
.v2-nav .sca-nav-group.sca-open .sca-nav-arrow {
  transform: rotate(180deg) !important;
}

/* ─── Submenu ─── */
.v2-nav .sca-nav-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.v2-nav .sca-nav-group.sca-open .sca-nav-submenu {
  max-height: 800px;
  opacity: 1;
}

.v2-nav .sca-nav-subitem {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.5rem 1.25rem !important;
  padding-right: 3.5rem !important;
  font-size: 0.82rem !important;
  color: var(--text-sidebar) !important;
  position: relative !important;
  transition: all var(--v2-transition-fast) !important;
  text-decoration: none !important;
  margin: 0 0.375rem !important;
  border-radius: var(--v2-radius-sm) !important;
  width: calc(100% - 0.75rem) !important;
}

.v2-nav .sca-nav-subitem::before {
  content: '' !important;
  position: absolute !important;
  right: 2.25rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--v2-gray-300) !important;
  transition: all var(--v2-transition-fast) !important;
}
[data-theme="dark"] .v2-nav .sca-nav-subitem::before {
  background: var(--v2-gray-600) !important;
}

.v2-nav .sca-nav-subitem:hover {
  background: var(--v2-gray-50) !important;
  color: var(--v2-primary) !important;
}
[data-theme="dark"] .v2-nav .sca-nav-subitem:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--v2-primary-light) !important;
}

.v2-nav .sca-nav-subitem:hover::before {
  background: var(--v2-primary) !important;
  transform: translateY(-50%) scale(1.3) !important;
}

.v2-nav .sca-nav-subitem.active {
  color: var(--v2-primary) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .v2-nav .sca-nav-subitem.active {
  color: var(--v2-primary-light) !important;
}

.v2-nav .sca-nav-subitem.active::before {
  background: var(--v2-primary) !important;
  box-shadow: 0 0 6px rgba(var(--v2-primary-rgb), 0.4);
}

/* Show submenu icons (hidden in original) */
.v2-nav .sca-nav-subitem i {
  display: inline-flex !important;
  font-size: 0.85rem !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  color: var(--v2-gray-400) !important;
}
[data-theme="dark"] .v2-nav .sca-nav-subitem i {
  color: var(--v2-gray-500) !important;
}
.v2-nav .sca-nav-subitem.active i,
.v2-nav .sca-nav-subitem:hover i {
  color: var(--v2-primary) !important;
}
[data-theme="dark"] .v2-nav .sca-nav-subitem.active i,
[data-theme="dark"] .v2-nav .sca-nav-subitem:hover i {
  color: var(--v2-primary-light) !important;
}

/* ─── Sidebar Footer ─── */
.v2-sidebar-footer {
  padding: 0.75rem 1.25rem !important;
  border-top: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .v2-sidebar-footer {
  border-top-color: var(--v2-gray-700) !important;
}

.v2-sidebar-footer .v2-btn {
  color: var(--v2-gray-500) !important;
  font-size: var(--v2-text-sm) !important;
}
.v2-sidebar-footer .v2-btn:hover {
  color: var(--v2-danger) !important;
  background: var(--v2-danger-soft) !important;
}

/* ============================================================
   HEADER (Top Navigation)
   ============================================================ */
.v2-main {
  flex: 1;
  margin-right: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-right var(--v2-transition-slow);
}

.v2-header {
  background: var(--bg-header);
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.v2-header-content {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  height: 64px;
  gap: 1rem;
}

.v2-header-start {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.v2-header-end {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ─── Sidebar Toggle ─── */
.v2-sidebar-toggle {
  background: none !important;
  border: none !important;
  color: var(--v2-gray-500) !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--v2-radius-sm) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--v2-transition-fast) !important;
}
.v2-sidebar-toggle:hover {
  background: var(--v2-gray-100) !important;
  color: var(--v2-primary) !important;
}
[data-theme="dark"] .v2-sidebar-toggle:hover {
  background: rgba(255,255,255,0.06) !important;
}

@media (max-width: 992px) {
  .v2-sidebar-toggle { display: flex !important; }
}

/* ─── Title & Breadcrumbs ─── */
.v2-header-title h1 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.3;
}

.v2-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--v2-gray-400);
  margin-top: 0.1rem;
}

.v2-breadcrumb a {
  color: var(--v2-gray-400);
  text-decoration: none;
  transition: color var(--v2-transition-fast);
}
.v2-breadcrumb a:hover {
  color: var(--v2-primary);
}

.v2-breadcrumb-sep {
  display: flex;
  align-items: center;
  color: var(--v2-gray-300);
  font-size: 0.65rem;
}

/* ─── Search ─── */
.v2-header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--v2-gray-50);
  border: 1.5px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-md);
  padding: 0 0.75rem;
  height: 36px;
  min-width: 200px;
  transition: all var(--v2-transition-fast);
  cursor: text;
}
[data-theme="dark"] .v2-header-search {
  background: rgba(255,255,255,0.04);
  border-color: var(--v2-gray-700);
}

.v2-header-search:focus-within {
  border-color: var(--v2-primary);
  box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.08);
  min-width: 260px;
}
[data-theme="dark"] .v2-header-search:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--v2-primary-rgb), 0.15);
}

.v2-header-search-icon {
  color: var(--v2-gray-400);
  font-size: 1rem;
  flex-shrink: 0;
}
.v2-header-search:focus-within .v2-header-search-icon {
  color: var(--v2-primary);
}

.v2-header-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--v2-font-sans);
  font-size: var(--v2-text-xs);
  color: var(--v2-gray-700);
  width: 100%;
  padding: 0;
}
[data-theme="dark"] .v2-header-search-input {
  color: var(--v2-gray-300);
}
.v2-header-search-input::placeholder {
  color: var(--v2-gray-400);
}

.v2-header-search-shortcut {
  font-size: 0.6rem;
  color: var(--v2-gray-400);
  background: var(--v2-gray-100);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
[data-theme="dark"] .v2-header-search-shortcut {
  background: var(--v2-gray-700);
  color: var(--v2-gray-500);
}

/* ─── Header Actions ─── */
.v2-header-action {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--v2-radius-sm) !important;
  color: var(--v2-gray-500) !important;
  font-size: 1.15rem !important;
  transition: all var(--v2-transition-fast) !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  position: relative !important;
}

.v2-header-action:hover {
  background: var(--v2-gray-100) !important;
  color: var(--v2-primary) !important;
}
[data-theme="dark"] .v2-header-action:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--v2-primary-light) !important;
}

/* ─── WhatsApp Status ─── */
.v2-wa-status {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 4px 10px !important;
  border-radius: var(--v2-radius-sm) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  transition: all var(--v2-transition-fast) !important;
  text-decoration: none !important;
  background: var(--v2-gray-50) !important;
}
[data-theme="dark"] .v2-wa-status {
  background: rgba(255,255,255,0.04) !important;
}

.v2-wa-status--disconnected { color: var(--v2-gray-400) !important; }
.v2-wa-status--connected { color: var(--v2-success) !important; }

.v2-wa-status i { font-size: 1rem !important; }
.v2-wa-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.v2-wa-status--disconnected .v2-wa-dot { background: var(--v2-gray-400) !important; }
.v2-wa-status--connected .v2-wa-dot { background: var(--v2-success) !important; }

/* ─── User Dropdown ─── */
.v2-dropdown-wrap {
  position: relative !important;
}

.v2-header-user {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: none !important;
  border: none !important;
  padding: 3px 8px 3px 3px !important;
  border-radius: var(--v2-radius-md) !important;
  cursor: pointer !important;
  transition: all var(--v2-transition-fast) !important;
}
.v2-header-user:hover {
  background: var(--v2-gray-50) !important;
}
[data-theme="dark"] .v2-header-user:hover {
  background: rgba(255,255,255,0.04) !important;
}

.v2-header-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--v2-gray-100);
}
[data-theme="dark"] .v2-header-avatar {
  border-color: var(--v2-gray-700);
}

.v2-user-info {
  text-align: right !important;
  line-height: 1.2 !important;
}
.v2-user-info .sca-header-user-name {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.v2-user-info .sca-header-user-role {
  display: block !important;
  font-size: 0.62rem !important;
  color: var(--v2-gray-400) !important;
}
.v2-user-caret {
  color: var(--v2-gray-400) !important;
  font-size: 0.75rem !important;
}

/* Dropdown menu enhancements */
.v2-dropdown-menu {
  padding: 0.5rem !important;
  min-width: 220px !important;
}

.v2-dropdown-user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.375rem;
  border-bottom: 1px solid var(--v2-gray-100);
}
[data-theme="dark"] .v2-dropdown-user-card {
  border-bottom-color: var(--v2-gray-700);
}

.v2-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.v2-dropdown-user-card strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.v2-dropdown-user-card small {
  display: block;
  font-size: 0.7rem;
  color: var(--v2-gray-400);
}

.v2-dropdown-item {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.82rem !important;
  color: var(--v2-gray-600) !important;
  border-radius: var(--v2-radius-sm) !important;
  transition: all var(--v2-transition-fast) !important;
}
.v2-dropdown-item:hover {
  background: var(--v2-gray-50) !important;
  color: var(--v2-gray-900) !important;
}
[data-theme="dark"] .v2-dropdown-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
}

.v2-dropdown-danger {
  color: var(--v2-danger) !important;
}
.v2-dropdown-danger:hover {
  background: var(--v2-danger-soft) !important;
  color: var(--v2-danger) !important;
}

.v2-dropdown-divider {
  height: 1px !important;
  background: var(--v2-gray-100) !important;
  margin: 0.3rem 0.5rem !important;
}
[data-theme="dark"] .v2-dropdown-divider {
  background: var(--v2-gray-700) !important;
}

/* ─── Content Area ─── */
.v2-content {
  flex: 1 !important;
  padding: 1.5rem !important;
}
.v2-container {
  max-width: 100% !important;
}

/* ─── Mobile Sidebar Overrides ─── */
@media (max-width: 992px) {
  .v2-main {
    margin-right: 0 !important;
  }

  .sca-sidebar {
    right: calc(-1 * var(--sidebar-width) - 20px) !important;
    box-shadow: none !important;
  }
  .sca-sidebar.sca-active {
    right: 0 !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.15) !important;
  }

  .v2-sidebar-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .v2-user-info { display: none !important; }
  .v2-header-search { min-width: 36px; }
  .v2-header-search-input { display: none; }
  .v2-header-search-shortcut { display: none; }
  .v2-header-search:focus-within { min-width: 180px; }
  .v2-header-search:focus-within .v2-header-search-input { display: block; }
  .v2-header-search-icon { margin: 0; }

  .v2-wa-status .v2-wa-dot { display: none; }
  .v2-wa-status .sca-wa-status-text { display: none; }
  .v2-wa-status { padding: 4px; font-size: 0; }
}

@media (max-width: 768px) {
  .v2-header-content { padding: 0 0.85rem !important; height: 56px !important; }
  .v2-header-title h1 { font-size: 0.95rem !important; }
  .v2-breadcrumb { display: none; }
  .v2-content { padding: 0.85rem !important; }
}

@media (max-width: 576px) {
  .v2-header-content { padding: 0 0.75rem !important; height: 52px !important; }
  .v2-header-title h1 { font-size: 0.85rem !important; }
  .v2-content { padding: 0.75rem !important; }

  .v2-header-end > .v2-header-action:nth-child(n+2) { display: none !important; }
  .v2-wa-status { display: none !important; }
  .v2-header-search { min-width: 32px; height: 32px; padding: 0 0.5rem; }
  .v2-user-caret { display: none !important; }
  .v2-header-avatar { width: 28px !important; height: 28px !important; }
}

/* ─── Keyboard focus styles ─── */
.v2-nav .sca-nav-item:focus-visible,
.v2-nav .sca-nav-subitem:focus-visible,
.v2-header-action:focus-visible,
.v2-sidebar-toggle:focus-visible,
.v2-header-user:focus-visible {
  outline: 2px solid var(--v2-primary) !important;
  outline-offset: 2px !important;
}

.v2-header-search-input:focus-visible {
  outline: none !important;
}

/* ═══════════════════════════════════════════════
   PHASE 4 — CRUD PAGE COMPONENTS
   ═══════════════════════════════════════════════ */

/* ─── Premium Page Header ─── */
.v2-page-header {
  position: relative;
  background: linear-gradient(135deg, var(--v2-primary) 0%, var(--v2-accent) 100%);
  border-radius: var(--v2-radius-xl);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  isolation: isolate;
}
.v2-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 50%, rgba(255,255,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255,255,255,0.08) 0%, transparent 60%);
  z-index: 0;
}
.v2-page-header > * { position: relative; z-index: 1; }
.v2-page-header .row { align-items: center; }

.v2-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.v2-page-subtitle {
  font-size: var(--v2-text-sm);
  color: rgba(255,255,255,0.75);
  margin-top: 0.25rem;
  margin-bottom: 0;
}
.v2-page-header .v2-page-subtitle strong { color: #fff; font-weight: 600; }

.v2-page-header .btn {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,0.3);
  --bs-btn-hover-bg: rgba(255,255,255,0.15);
  --bs-btn-hover-border-color: rgba(255,255,255,0.5);
  --bs-btn-active-bg: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  font-weight: 600;
  font-size: var(--v2-text-sm);
  padding: 0.5rem 1.125rem;
  border-radius: var(--v2-radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--v2-transition-fast);
}
.v2-page-header .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--v2-primary);
}
.v2-page-header .btn-primary:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
  color: var(--v2-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.v2-page-header .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,0.3);
}
.v2-page-header .btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.v2-page-header .text-md-start {
  text-align: right !important;
}

[data-theme="dark"] .v2-page-header {
  background: linear-gradient(135deg, var(--v2-primary-dark) 0%, #5b21b6 100%);
}
[data-theme="dark"] .v2-page-header .btn-primary {
  background: var(--v2-gray-800);
  border-color: var(--v2-gray-600);
  color: #fff;
}
[data-theme="dark"] .v2-page-header .btn-primary:hover {
  background: var(--v2-gray-700);
}

/* ─── Stat Cards (CRUD pages) ─── */
.v2-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.v2-stat-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--v2-transition-fast);
}
.v2-stat-card:hover {
  border-color: var(--v2-gray-300);
  box-shadow: var(--v2-shadow-sm);
  transform: translateY(-1px);
}
[data-theme="dark"] .v2-stat-card {
  border-color: var(--v2-gray-700);
}
[data-theme="dark"] .v2-stat-card:hover {
  border-color: var(--v2-gray-600);
}

.v2-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--v2-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.v2-stat-icon-primary   { background: var(--v2-primary-soft); color: var(--v2-primary); }
.v2-stat-icon-success   { background: var(--v2-success-soft); color: var(--v2-success); }
.v2-stat-icon-warning   { background: var(--v2-warning-soft); color: var(--v2-warning); }
.v2-stat-icon-danger    { background: var(--v2-danger-soft); color: var(--v2-danger); }
.v2-stat-icon-info      { background: var(--v2-info-soft); color: var(--v2-info); }
.v2-stat-icon-accent    { background: var(--v2-accent-soft); color: var(--v2-accent); }

.v2-stat-body { flex: 1; }
.v2-stat-value {
  font-size: var(--v2-text-xl);
  font-weight: 700;
  color: var(--v2-gray-900);
  line-height: 1.2;
  margin: 0;
}
[data-theme="dark"] .v2-stat-value { color: #fff; }
.v2-stat-label {
  font-size: var(--v2-text-xs);
  color: var(--v2-gray-500);
  font-weight: 500;
  margin: 0;
}

/* ─── Filter Card ─── */
.v2-filter-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color var(--v2-transition-fast);
}
[data-theme="dark"] .v2-filter-card {
  border-color: var(--v2-gray-700);
}
.v2-filter-card .form-label { font-size: var(--v2-text-xs); font-weight: 600; margin-bottom: 0.25rem; }
.v2-filter-card .btn {
  padding: 0.5rem 1.25rem;
  font-size: var(--v2-text-sm);
  border-radius: var(--v2-radius-md);
}

/* ─── Empty State (enhanced for tables) ─── */
.v2-table-empty td {
  padding: 3rem 1rem !important;
}
.v2-table-empty .v2-empty-state {
  margin: 0;
  padding: 2rem;
}

/* ─── Page fade wrapper ─── */
.v2-page-content {
  animation: v2-fadeUp 0.35s ease;
}

/* ─── Card table flush (table inside card without padding) ─── */
.v2-card-table .v2-card-body { padding: 0; }
.v2-card-table .v2-table { margin: 0; }
.v2-card-table .v2-table th:first-child { padding-right: 1.5rem; }
.v2-card-table .v2-table th:last-child { padding-left: 1.5rem; }
.v2-card-table .v2-table td:first-child { padding-right: 1.5rem; }
.v2-card-table .v2-table td:last-child { padding-left: 1.5rem; }

/* ─── Action buttons row ─── */
.v2-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.v2-btn-action {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--v2-radius-sm);
  border: 1.5px solid var(--v2-gray-200);
  background: var(--v2-surface);
  color: var(--v2-gray-500);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--v2-transition-fast);
  padding: 0;
  text-decoration: none !important;
}
.v2-btn-action:hover {
  border-color: var(--v2-gray-300);
  color: var(--v2-gray-700);
  background: var(--v2-gray-50);
  transform: translateY(-1px);
}
.v2-btn-action-warning:hover {
  border-color: #fbbf24;
  color: #d97706;
  background: var(--v2-warning-soft);
}
.v2-btn-action-danger:hover {
  border-color: #fca5a5;
  color: #dc2626;
  background: var(--v2-danger-soft);
}
.v2-btn-action-info:hover {
  border-color: #67e8f9;
  color: #0891b2;
  background: var(--v2-info-soft);
}
[data-theme="dark"] .v2-btn-action {
  border-color: var(--v2-gray-600);
  color: var(--v2-gray-400);
  background: var(--v2-gray-800);
}
[data-theme="dark"] .v2-btn-action:hover {
  border-color: var(--v2-gray-500);
  color: var(--v2-gray-200);
  background: var(--v2-gray-700);
}

/* ─── Enhanced Modal (wraps Bootstrap modals) ─── */
.v2-modal .modal-content {
  border: none;
  border-radius: var(--v2-radius-xl);
  box-shadow: 0 25px 80px rgba(0,0,0,0.15);
  overflow: hidden;
}
[data-theme="dark"] .v2-modal .modal-content {
  background: var(--v2-gray-800);
  box-shadow: 0 25px 80px rgba(0,0,0,0.4);
}
.v2-modal .modal-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--v2-gray-100);
}
[data-theme="dark"] .v2-modal .modal-header {
  border-bottom-color: var(--v2-gray-700);
}
.v2-modal .modal-header h5 {
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.v2-modal .modal-header h5 i { color: var(--v2-primary); }
.v2-modal .modal-body { padding: 1.5rem; }
.v2-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--v2-gray-100);
  gap: 0.5rem;
}
[data-theme="dark"] .v2-modal .modal-footer {
  border-top-color: var(--v2-gray-700);
}
.v2-modal .modal-footer .btn {
  padding: 0.5rem 1.25rem;
  font-size: var(--v2-text-sm);
  border-radius: var(--v2-radius-md);
  font-weight: 600;
}
.v2-modal .btn-close {
  background-size: 0.75em;
}

/* ─── Success/Error flash wrapper ─── */
.v2-flash {
  animation: v2-slideDown 0.3s ease;
  margin-bottom: 1rem;
}

/* ─── Inline form patterns ─── */
.v2-inline-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.v2-inline-form .v2-input { width: auto; min-width: 160px; }
.v2-inline-form .btn { flex-shrink: 0; }

/* ─── Responsive tweaks ─── */
@media (max-width: 768px) {
  .v2-page-header {
    padding: 1.25rem 1.25rem;
  }
  .v2-page-header .row .text-md-start {
    text-align: right !important;
    margin-top: 0.75rem;
  }
  .v2-stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .v2-stat-card { padding: 1rem; }
  .v2-filter-card { padding: 1rem; }
  .v2-inline-form .v2-input { min-width: 120px; }
  .v2-modal .modal-dialog { margin: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 7 — Premium UI/UX Polish & Refinement
   ═══════════════════════════════════════════════════════════ */

/* ─── Homepage Compact CTA ─── */
.home-cta {
  padding: 60px 0;
  background: linear-gradient(135deg, #0983e2 0%, #6c5ce7 100%);
  position: relative;
  overflow: hidden;
}
.home-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 0% 80%, rgba(255,255,255,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.home-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.home-cta-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.35rem;
}
.home-cta-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
.home-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.home-cta-actions .btn-landing-light {
  background: #fff;
  color: #1e293b;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.home-cta-actions .btn-landing-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.home-cta-actions .btn-landing-outline {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.home-cta-actions .btn-landing-outline:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .home-cta-inner { flex-direction: column; text-align: center; }
  .home-cta-actions { width: 100%; justify-content: center; }
}

/* ─── Form Enhancements ─── */
.form-group { margin-bottom: 1.25rem; }
.required::after {
  content: ' *';
  color: var(--v2-danger);
  font-weight: 600;
}
.text-danger { color: var(--v2-danger) !important; }

/* Validation states */
.form-control.is-valid {
  border-color: var(--v2-success) !important;
  box-shadow: 0 0 0 3px rgba(var(--v2-success-rgb), 0.1) !important;
}
.form-control.is-invalid {
  border-color: var(--v2-danger) !important;
  box-shadow: 0 0 0 3px rgba(var(--v2-danger-rgb), 0.1) !important;
}
.invalid-feedback {
  font-size: var(--v2-text-xs);
  color: var(--v2-danger);
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Consistent form row spacing */
.row.g-2 > .form-group { margin-bottom: 0; }
.mb-3 { margin-bottom: 1.25rem !important; }

/* Input group consistency */
.input-group .form-control:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .btn:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ─── Premium Modal Enhancements ─── */
.modal.fade .modal-dialog {
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  opacity: 0;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-backdrop.show { opacity: 0.4; }
.modal-dialog-scrollable .modal-body { max-height: calc(90vh - 140px); }
.modal-lg { max-width: 700px !important; }
.modal-xl { max-width: 900px !important; }

/* ─── Table Premium ─── */
.table {
  --v2-table-cell-padding-x: 1rem;
  --v2-table-cell-padding-y: 0.85rem;
}
.table > :not(caption) > * > * {
  padding: var(--v2-table-cell-padding-y) var(--v2-table-cell-padding-x);
  border-bottom-width: 1px;
  vertical-align: middle;
}
.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--v2-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--v2-gray-200);
  background: var(--v2-gray-50);
}
[data-theme="dark"] .table thead th {
  background: var(--v2-gray-800);
  border-bottom-color: var(--v2-gray-700);
  color: var(--v2-gray-400);
}
.table tbody tr { transition: background var(--v2-transition-fast); }
.table tbody tr:hover { background: rgba(var(--v2-primary-rgb), 0.03); }
.table tbody tr:nth-child(even) { background: rgba(0,0,0,0.01); }
[data-theme="dark"] .table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Table action buttons */
.table .btn-group { gap: 0.2rem; }
.table .btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  border-radius: var(--v2-radius-sm);
}

/* DataTables table overrides */
.dataTables_wrapper .dataTables_length { margin-bottom: 0.75rem; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 0.75rem; }
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--v2-radius-md) !important;
  border: 1.5px solid var(--v2-gray-200) !important;
  padding: 0.45rem 0.75rem !important;
  font-family: var(--v2-font-sans);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--v2-gray-800) !important;
  border-color: var(--v2-gray-600) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate { margin-top: 0.75rem; }
.dataTables_wrapper .dataTables_info { font-size: var(--v2-text-xs); color: var(--v2-gray-400); padding-top: 0.85rem; }

/* ─── Dashboard Premium ─── */
/* KPI stat card entrance animation */
.sca-stats-grid > .sca-stat-card {
  animation: v2-fadeInUp 0.4s ease forwards;
  opacity: 0;
}
.sca-stats-grid > .sca-stat-card:nth-child(1) { animation-delay: 0.05s; }
.sca-stats-grid > .sca-stat-card:nth-child(2) { animation-delay: 0.1s; }
.sca-stats-grid > .sca-stat-card:nth-child(3) { animation-delay: 0.15s; }
.sca-stats-grid > .sca-stat-card:nth-child(4) { animation-delay: 0.2s; }
.sca-stats-grid > .sca-stat-card:nth-child(5) { animation-delay: 0.25s; }
.sca-stats-grid > .sca-stat-card:nth-child(6) { animation-delay: 0.3s; }

/* Chart container refinement */
.chart-container canvas { max-width: 100%; }

/* ─── Sidebar Refinements ─── */
.sca-nav-item {
  border-radius: 0;
  min-height: 44px;
}
.sca-nav-item i:first-child {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.sca-nav-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v2-gray-400);
  padding: 0.85rem 1.25rem 0.3rem;
}
.sca-nav-divider {
  margin: 0.15rem 1.25rem;
  background: var(--v2-gray-100);
  height: 1px;
}
[data-theme="dark"] .sca-nav-divider { background: var(--v2-gray-700); }

/* ─── Micro-interactions & Polish ─── */

/* Smooth focus ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--v2-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.sca-btn:focus-visible {
  outline-offset: 2px;
}

/* Card hover elevation consistency */
.card, .sca-card, .v2-card {
  transition: all var(--v2-transition-base) !important;
}

/* Loading spinner centerer */
.v2-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--v2-gray-400);
}
.v2-loading .v2-spinner { margin-left: 0.75rem; }

/* Toasts */
.v2-toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--v2-z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.v2-toast {
  background: var(--v2-surface);
  border: 1px solid var(--v2-gray-200);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-lg);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--v2-text-sm);
  font-weight: 500;
  pointer-events: auto;
  animation: v2-slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 300px;
  max-width: 480px;
}
[data-theme="dark"] .v2-toast {
  background: var(--v2-gray-800);
  border-color: var(--v2-gray-700);
}
.v2-toast i { font-size: 1.25rem; flex-shrink: 0; }
.v2-toast-success i { color: var(--v2-success); }
.v2-toast-error i { color: var(--v2-danger); }
.v2-toast-info i { color: var(--v2-primary); }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .v2-stat:hover { transform: none !important; }
    .v2-card:hover { transform: none !important; }
    .v2-btn:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 1A — Mobile UX Improvements
   ═══════════════════════════════════════════════════════════ */

/* ─── Sticky Bottom Action Bar (mobile only) ─── */
.v2-sticky-bottom {
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-gray-200);
    padding: 0.75rem 1rem;
    margin: 0 -1rem -1rem;
    border-radius: 0 0 var(--v2-radius-lg) var(--v2-radius-lg);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
[data-theme="dark"] .v2-sticky-bottom {
    border-top-color: var(--v2-gray-700);
}
@media (max-width: 768px) {
    .v2-sticky-bottom {
        position: sticky;
        bottom: 0;
        z-index: var(--v2-z-sticky);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    }
    [data-theme="dark"] .v2-sticky-bottom {
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    }
}
.v2-sticky-bottom .v2-btn { flex: 1; min-width: 120px; }

/* ─── Mobile Card-Style Tables (convert tables to cards on <576px) ─── */
@media (max-width: 576px) {
    .v2-table-mobile-cards thead { display: none; }
    .v2-table-mobile-cards tbody tr {
        display: block;
        padding: 0.85rem;
        margin-bottom: 0.75rem;
        background: var(--v2-surface);
        border: 1px solid var(--v2-gray-200);
        border-radius: var(--v2-radius-lg);
        box-shadow: var(--v2-shadow-sm);
    }
    .v2-table-mobile-cards tbody tr:hover { border-color: var(--v2-gray-300); }
    [data-theme="dark"] .v2-table-mobile-cards tbody tr {
        background: var(--v2-gray-800);
        border-color: var(--v2-gray-700);
    }
    .v2-table-mobile-cards tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0;
        border: none;
        font-size: var(--v2-text-sm);
        gap: 0.5rem;
    }
    .v2-table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: var(--v2-text-xs);
        color: var(--v2-gray-500);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .v2-table-mobile-cards tbody td:not(:last-child) {
        border-bottom: 1px solid var(--v2-gray-100);
    }
    [data-theme="dark"] .v2-table-mobile-cards tbody td:not(:last-child) {
        border-bottom-color: var(--v2-gray-700);
    }
    .v2-table-mobile-cards tbody td.text-center { text-align: right !important; }
    .v2-table-mobile-cards tbody tr td:first-child { padding-top: 0; }
    .v2-table-mobile-cards tbody tr td:last-child { padding-bottom: 0; border-bottom: none; }
    .v2-table-mobile-cards .v2-table-empty td { display: block; text-align: center; }
    .v2-table-mobile-cards .v2-table-empty td::before { display: none; }
}

/* ─── QR Scanner mobile improvements ─── */
@media (max-width: 576px) {
    #qr-reader {
        max-width: 100% !important;
        border-radius: 8px;
    }
    #qr-reader img[alt="Info icon"],
    #qr-reader img[alt="Camera based scan"] {
        max-width: 100%;
        height: auto;
    }
    #qrScannerSection {
        padding: 1rem !important;
    }
    #qrScannerSection button {
        width: 100%;
        margin-bottom: 0.35rem;
    }
}

/* ─── Dashboard cards: compact spacing on small phones ─── */
@media (max-width: 480px) {
    .v2-stat { padding: 0.75rem; }
    .v2-stat-value { font-size: 1.1rem; }
    .v2-stat-label { font-size: var(--v2-text-xs); }
}

/* ─── Larger touch targets on mobile ─── */
@media (max-width: 768px) {
    .v2-btn-action {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ─── Better form spacing on mobile ─── */
@media (max-width: 576px) {
    .v2-card-body { padding: 0.85rem; }
    .v2-card-header { padding: 0.75rem 0.85rem; }
    .v2-page-header { padding: 1rem; }
    .v2-filter-card { padding: 0.85rem; }
    .v2-input { font-size: 16px !important; padding: 0.65rem 0.85rem; }
    .v2-label { font-size: var(--v2-text-sm); }
    .v2-page-title { font-size: 1.1rem; }
    .v2-page-subtitle { font-size: var(--v2-text-sm); }
    .v2-stat-row { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .v2-stat-card { padding: 0.75rem; }
    .v2-stat-value { font-size: 1.1rem; }
}

/* ─── Horizontal scroll prevention (mobile only) ─── */
@media (max-width: 768px) {
    .v2-container { max-width: 100%; overflow-x: hidden; }
}
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-responsive table { margin-bottom: 0; }

/* ─── Print refinements ─── */
@media print {
  .sca-sidebar, .sca-header, .sca-footer, .btn, .no-print, .nav-tabs, form { display: none !important; }
  .sca-main { margin: 0 !important; }
  .sca-content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}