/* ============================================================
UNIVERSAL CRM - ENHANCED & IMPROVED STYLES
============================================================ */

:root {
  /* Light Theme Defaults */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: rgba(37, 99, 235, 0.08);
  --primary-glow: rgba(37, 99, 235, 0.25);
  --secondary: #f8fafc;
  --secondary-hover: #f1f5f9;
  --success: #059669;
  --success-hover: #047857;
  --success-bg: #ecfdf5;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-bg: #fef2f2;
  --warning: #d97706;
  --warning-hover: #b45309;
  --warning-bg: #fffbeb;
  --info: #2563eb;
  --info-hover: #1d4ed8;
  --info-bg: #eff6ff;
  --bg-body: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --input-bg: #ffffff;
  --section-bg: #f8fafc;
  --sidebar-width: 260px;
  --header-height: 75px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-subtle: 0 4px 6px -1px rgba(0,0,0,0.03), 0 2px 4px -1px rgba(0,0,0,0.02);
  --shadow-card: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
  --shadow-elevated: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);
  --app-font-size: 15px;
  --app-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --card-padding: 24px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- THEMES --- */

body.theme-dark {
  --secondary: #1e293b;
  --secondary-hover: #334155;
  --success: #34d399;
  --success-hover: #10b981;
  --success-bg: rgba(52, 211, 153, 0.1);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --warning: #fbbf24;
  --warning-hover: #f59e0b;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --info: #60a5fa;
  --info-hover: #3b82f6;
  --info-bg: rgba(96, 165, 250, 0.1);
  --bg-body: #0b0f19;
  --bg-surface: #111827;
  --bg-elevated: #1f2937;
  --text-main: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --border-color: #1f2937;
  --border-light: #374151;
  --input-bg: #1f2937;
  --section-bg: #161e2e;
  --shadow-subtle: none;
  --shadow-card: 0 10px 15px -3px rgba(0,0,0,0.4);
  --shadow-elevated: 0 20px 25px -5px rgba(0,0,0,0.5);
}

/* ============================================================
   APINEX BRAND ACCENT TOKENS (DEFAULT)
   Green by default. applyAccentColor() overrides these on the
   root element when the user picks an accent colour, so the
   APInex theme and public landing page follow the accent.
   ============================================================ */
:root {
  --ap-accent: #22c35d;
  --ap-accent-hover: #2dd86a;
  --ap-accent-pressed: #1eab51;
  --ap-accent-soft: rgba(34, 195, 93, 0.10);
  --ap-accent-glow: rgba(34, 195, 93, 0.22);
  --ap-accent-rgb: 34, 195, 93;
  --ap-border-accent: rgba(34, 195, 93, 0.30);
  --ap-shadow-glow: 0 0 32px rgba(34, 195, 93, 0.14);
}

/* ============================================================
   --- APINEX CYBER THEME (DIRECT FROM LANDING PAGE CSS) ---
   Matching https://apinex.bond/ dark-tech SaaS aesthetic:
   Carbon dark canvas #1c1f24, neon emerald #22c35d,
   multi-layered ambient glows, glassmorphism, and Outfit typography.
============================================================ */

body.theme-apinex,
html.theme-apinex {
  --primary: #22c35d;
  --primary-hover: #2dd86a;
  --primary-light: rgba(34, 195, 93, 0.14);
  --primary-glow: rgba(34, 195, 93, 0.32);
  --secondary: #282c34;
  --secondary-hover: #2f343e;
  --success: #22c35d;
  --success-hover: #2dd86a;
  --success-bg: rgba(34, 195, 93, 0.14);
  --danger: #ef5c5c;
  --danger-hover: #dc2626;
  --danger-bg: rgba(239, 92, 92, 0.14);
  --warning: #fbbf24;
  --warning-hover: #f59e0b;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --info: #60a5fa;
  --info-hover: #38bdf8;
  --info-bg: rgba(96, 165, 250, 0.14);
  --bg-body: #1c1f24;
  --bg-surface: #23272e;
  --bg-elevated: #282c34;
  --text-main: #f8fafc;
  --text-secondary: #a0a6b0;
  --text-muted: #6d7480;
  --text-subtle: #4e5563;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.14);
  --input-bg: #171a1f;
  --section-bg: #20242b;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-glow: 0 0 24px rgba(var(--ap-accent-rgb), 0.28);
  --app-font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* APInex Ambient Multi-Point Radial Glow Background */
body.theme-apinex {
  background-color: #1c1f24 !important;
  background-image: none !important;
  color: #e9ecef !important;
  font-family: var(--app-font-family) !important;
  -webkit-font-smoothing: antialiased;
}

body.theme-apinex .main-wrapper,
body.theme-apinex .content-body,
body.theme-apinex .view-section {
  background: transparent !important;
}

body.theme-apinex ::selection {
  background: rgba(var(--ap-accent-rgb), 0.28);
  color: var(--ap-accent-hover);
}

/* APInex Typography - Outfit & Monospace */
body.theme-apinex h1,
body.theme-apinex h2,
body.theme-apinex h3,
body.theme-apinex h4,
body.theme-apinex h5,
body.theme-apinex h6,
body.theme-apinex .view-title,
body.theme-apinex .dash-greeting {
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: -0.025em;
  color: #f8fafc !important;
}

body.theme-apinex code,
body.theme-apinex pre,
body.theme-apinex .metric-value,
body.theme-apinex .stat-value,
body.theme-apinex .table-code,
body.theme-apinex .mono-text,
body.theme-apinex .amount,
body.theme-apinex .balance {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}

/* APInex Glassmorphic Sidebar */
body.theme-apinex .sidebar {
  background: rgba(28, 31, 36, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
}

body.theme-apinex .sidebar .brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(22, 24, 29, 0.6) !important;
}

body.theme-apinex .sidebar .brand span {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  color: #f8fafc !important;
}

/* APInex Active Navigation with Glowing Green Accent */
body.theme-apinex .nav-item,
body.theme-apinex .sidebar-menu-item,
body.theme-apinex .sidebar-link {
  color: #a0a6b0 !important;
  font-weight: 550 !important;
  border-radius: 8px !important;
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.theme-apinex .nav-item:hover,
body.theme-apinex .sidebar-menu-item:hover,
body.theme-apinex .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f8fafc !important;
  transform: translateX(2px);
}

body.theme-apinex .nav-item.active,
body.theme-apinex .sidebar-menu-item.active,
body.theme-apinex .sidebar-link.active {
  color: var(--ap-accent-hover) !important;
  background: rgba(var(--ap-accent-rgb), 0.15) !important;
  box-shadow: inset 3px 0 0 var(--ap-accent), 0 4px 14px rgba(var(--ap-accent-rgb), 0.12) !important;
  font-weight: 700 !important;
}

body.theme-apinex .nav-item.active svg,
body.theme-apinex .sidebar-menu-item.active svg {
  stroke: var(--ap-accent) !important;
  filter: drop-shadow(0 0 6px rgba(var(--ap-accent-rgb), 0.4));
}

/* APInex Topbar */
body.theme-apinex .topbar,
body.theme-apinex .app-header {
  background: rgba(28, 31, 36, 0.85) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* APInex High-Energy Neon Buttons */
body.theme-apinex .btn-primary {
  background: var(--ap-accent) !important;
  color: #0c1a11 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.45), 0 6px 20px rgba(var(--ap-accent-rgb), 0.28) !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.theme-apinex .btn-primary:hover {
  background: var(--ap-accent-hover) !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.6), 0 10px 28px rgba(var(--ap-accent-rgb), 0.4) !important;
  transform: translateY(-2px) !important;
}

body.theme-apinex .btn-primary:active {
  background: var(--ap-accent-pressed) !important;
  transform: translateY(0) scale(0.98) !important;
}

body.theme-apinex .btn-outline,
body.theme-apinex .btn-secondary {
  background: #282c34 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.theme-apinex .btn-outline:hover,
body.theme-apinex .btn-secondary:hover {
  background: #2f343e !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* APInex Surface Cards (Docs-Choice Aesthetic) */
body.theme-apinex .card,
body.theme-apinex .section-card,
body.theme-apinex .panel {
  background: #23272e !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  position: relative;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-apinex .card:hover {
  border-color: rgba(var(--ap-accent-rgb), 0.3) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(var(--ap-accent-rgb), 0.1) !important;
}

body.theme-apinex .card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* APInex Form Inputs & Selects */
body.theme-apinex input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.theme-apinex select,
body.theme-apinex textarea,
body.theme-apinex .custom-input {
  background: #171a1f !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.theme-apinex input:focus,
body.theme-apinex select:focus,
body.theme-apinex textarea:focus {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--ap-accent-rgb), 0.22) !important;
  outline: none !important;
}

/* APInex Data Tables (Ledger style) */
body.theme-apinex table {
  color: #e9ecef !important;
  border-collapse: separate !important;
}

body.theme-apinex thead th,
body.theme-apinex .table-header {
  background: #1c2026 !important;
  color: #94a3b8 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 12px 14px !important;
}

body.theme-apinex tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
  padding: 12px 14px !important;
}

body.theme-apinex tbody tr:hover td {
  background: rgba(var(--ap-accent-rgb), 0.04) !important;
}

/* APInex Badges & Pills */
body.theme-apinex .badge {
  border-radius: 999px !important;
  letter-spacing: 0.03em !important;
  font-weight: 650 !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
}

body.theme-apinex .badge-primary,
body.theme-apinex .badge-success {
  background: rgba(var(--ap-accent-rgb), 0.14) !important;
  color: var(--ap-accent-hover) !important;
  border: 1px solid rgba(var(--ap-accent-rgb), 0.32) !important;
}

body.theme-apinex .badge-warning {
  background: rgba(251, 191, 36, 0.14) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.32) !important;
}

body.theme-apinex .badge-danger {
  background: rgba(239, 92, 92, 0.14) !important;
  color: #ef5c5c !important;
  border: 1px solid rgba(239, 92, 92, 0.32) !important;
}

body.theme-apinex .badge-info {
  background: rgba(96, 165, 250, 0.14) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.32) !important;
}

/* APInex Modal Dialogs (Glassmorphic Window) */
body.theme-apinex .custom-modal-overlay,
body.theme-apinex .modal-overlay {
  background: rgba(10, 12, 16, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.theme-apinex .custom-modal-box,
body.theme-apinex .modal-box {
  background: #23272e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

body.theme-apinex .custom-modal-box::before,
body.theme-apinex .modal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ap-accent);
}

/* APInex Scrollbars */
body.theme-apinex ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.theme-apinex ::-webkit-scrollbar-track {
  background: #171a1f;
}

body.theme-apinex ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 2px solid #171a1f;
}

body.theme-apinex ::-webkit-scrollbar-thumb:hover {
  background: var(--ap-accent);
}

/* APInex Metric & Stat Cards (Landing Page 4-Stat Strip Style) */
body.theme-apinex .metric-card,
body.theme-apinex .stat-card {
  background: rgba(35, 39, 46, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.theme-apinex .metric-card:hover,
body.theme-apinex .stat-card:hover {
  border-color: rgba(var(--ap-accent-rgb), 0.4) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--ap-accent-rgb), 0.12) !important;
  transform: translateY(-2px);
}

body.theme-apinex .metric-value,
body.theme-apinex .stat-value {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
}

body.theme-apinex .metric-label,
body.theme-apinex .stat-label {
  font-size: 11px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* APInex Tabs & Navigation Bars (segmented selector) */
body.theme-apinex .builder-tabs,
body.theme-apinex .tab-nav,
body.theme-apinex .report-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex;
  gap: 8px;
  padding: 6px 0;
}

body.theme-apinex .builder-tab-btn,
body.theme-apinex .tab-btn {
  color: #a0a6b0 !important;
  border-radius: 10px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
  cursor: pointer;
}

body.theme-apinex .builder-tab-btn:hover,
body.theme-apinex .tab-btn:hover {
  background: #282c34 !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.theme-apinex .builder-tab-btn.active,
body.theme-apinex .tab-btn.active {
  background: rgba(var(--ap-accent-rgb), 0.15) !important;
  color: #9be7b5 !important;
  border-color: rgba(var(--ap-accent-rgb), 0.5) !important;
  box-shadow: 0 0 20px rgba(var(--ap-accent-rgb), 0.18) !important;
}

/* APInex Dropdown Menus & Popovers */
body.theme-apinex .dropdown-menu,
body.theme-apinex .context-menu,
body.theme-apinex .profile-dropdown {
  background: #23272e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.7) !important;
  border-radius: 14px !important;
}

body.theme-apinex .dropdown-item:hover,
body.theme-apinex .menu-item:hover {
  background: rgba(var(--ap-accent-rgb), 0.1) !important;
  color: var(--ap-accent-hover) !important;
}

/* APInex Search Bar */
body.theme-apinex .search-container input,
body.theme-apinex .search-input {
  background: #171a1f !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
}

body.theme-apinex .search-container input:focus,
body.theme-apinex .search-input:focus {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--ap-accent-rgb), 0.2) !important;
}

/* APInex Personalise UI Active Card Highlight */
.theme-option-card#themeCard-apinex.active {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--ap-accent-rgb), 0.4), 0 10px 28px rgba(var(--ap-accent-rgb), 0.25) !important;
}

.theme-option-card#themeCard-apinex:hover {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.3), 0 8px 24px rgba(var(--ap-accent-rgb), 0.2) !important;
}

/* ============================================================
   --- ENTERPRISE LIGHT THEME ENHANCEMENTS ---
   High-contrast, razor-sharp modern SaaS & ERP aesthetics
============================================================ */
body.theme-light,
body:not(.theme-dark):not(.theme-apinex) {
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --input-bg: #ffffff;
  --section-bg: #f8fafc;
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-elevated: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

body.theme-light,
body:not(.theme-dark):not(.theme-apinex) {
  background-color: #f8fafc;
  background-image: none !important;
  color: #0f172a;
}

/* Enterprise Light Sidebar */
body.theme-light .sidebar,
body:not(.theme-dark):not(.theme-apinex) .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.02) !important;
}

body.theme-light .nav-item,
body.theme-light .nav-link,
body.theme-light .sidebar-menu-item,
body:not(.theme-dark):not(.theme-apinex) .nav-item,
body:not(.theme-dark):not(.theme-apinex) .nav-link,
body:not(.theme-dark):not(.theme-apinex) .sidebar-menu-item {
  color: #475569 !important;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.15s ease;
}

body.theme-light .nav-item:hover,
body.theme-light .nav-link:hover,
body.theme-light .sidebar-menu-item:hover,
body:not(.theme-dark):not(.theme-apinex) .nav-item:hover,
body:not(.theme-dark):not(.theme-apinex) .nav-link:hover,
body:not(.theme-dark):not(.theme-apinex) .sidebar-menu-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

body.theme-light .nav-item.active,
body.theme-light .nav-link.active,
body.theme-light .sidebar-menu-item.active,
body.theme-light .menu-item.active,
body.theme-light .sidebar-link.active,
body:not(.theme-dark):not(.theme-apinex) .nav-item.active,
body:not(.theme-dark):not(.theme-apinex) .nav-link.active,
body:not(.theme-dark):not(.theme-apinex) .sidebar-menu-item.active,
body:not(.theme-dark):not(.theme-apinex) .menu-item.active,
body:not(.theme-dark):not(.theme-apinex) .sidebar-link.active {
  color: var(--primary, #2563eb) !important;
  background: var(--primary-light, rgba(37, 99, 235, 0.08)) !important;
  box-shadow: inset 3px 0 0 var(--primary, #2563eb) !important;
  font-weight: 600 !important;
}

/* Enterprise Light Topbar / Header */
body.theme-light .topbar,
body.theme-light .app-header,
body:not(.theme-dark):not(.theme-apinex) .topbar,
body:not(.theme-dark):not(.theme-apinex) .app-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

/* Enterprise Light Cards */
body.theme-light .card,
body.theme-light .section-card,
body.theme-light .metric-card,
body.theme-light .stat-card,
body:not(.theme-dark):not(.theme-apinex) .card,
body:not(.theme-dark):not(.theme-apinex) .section-card,
body:not(.theme-dark):not(.theme-apinex) .metric-card,
body:not(.theme-dark):not(.theme-apinex) .stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
  border-radius: 12px;
}

body.theme-light .card:hover,
body.theme-light .metric-card:hover,
body.theme-light .stat-card:hover,
body:not(.theme-dark):not(.theme-apinex) .card:hover,
body:not(.theme-dark):not(.theme-apinex) .metric-card:hover,
body:not(.theme-dark):not(.theme-apinex) .stat-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05) !important;
}

/* Enterprise Light Form Controls & Inputs */
body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.theme-light select,
body.theme-light textarea,
body:not(.theme-dark):not(.theme-apinex) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body:not(.theme-dark):not(.theme-apinex) select,
body:not(.theme-dark):not(.theme-apinex) textarea {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 450;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus,
body:not(.theme-dark):not(.theme-apinex) input:focus,
body:not(.theme-dark):not(.theme-apinex) select:focus,
body:not(.theme-dark):not(.theme-apinex) textarea:focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 3px var(--primary-glow, rgba(37, 99, 235, 0.15)) !important;
  outline: none !important;
}

/* Enterprise Light Tables */
body.theme-light thead th,
body:not(.theme-dark):not(.theme-apinex) thead th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding: 11px 14px !important;
}

body.theme-light tbody td,
body:not(.theme-dark):not(.theme-apinex) tbody td {
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
  padding: 10px 14px !important;
}

body.theme-light tbody tr:hover,
body:not(.theme-dark):not(.theme-apinex) tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Enterprise Light Modals */
body.theme-light .custom-modal-box,
body.theme-light .modal-box,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box,
body:not(.theme-dark):not(.theme-apinex) .modal-box {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
}

body.theme-light .custom-modal-box .custom-modal-header h3,
body.theme-light .modal-box h3,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box .custom-modal-header h3,
body:not(.theme-dark):not(.theme-apinex) .modal-box h3 {
  color: #0f172a !important;
}

body.theme-light .custom-modal-box .custom-modal-body label,
body.theme-light .modal-box label,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box .custom-modal-body label,
body:not(.theme-dark):not(.theme-apinex) .modal-box label {
  color: #475569 !important;
}

body.theme-light .custom-modal-box .custom-modal-body p,
body.theme-light .modal-box p,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box .custom-modal-body p,
body:not(.theme-dark):not(.theme-apinex) .modal-box p {
  color: #64748b !important;
}

body.theme-light .custom-modal-box input,
body.theme-light .custom-modal-box select,
body.theme-light .custom-modal-box textarea,
body.theme-light .modal-box input,
body.theme-light .modal-box select,
body.theme-light .modal-box textarea,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box input,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box select,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box textarea,
body:not(.theme-dark):not(.theme-apinex) .modal-box input,
body:not(.theme-dark):not(.theme-apinex) .modal-box select,
body:not(.theme-dark):not(.theme-apinex) .modal-box textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .custom-modal-box input:focus,
body.theme-light .custom-modal-box select:focus,
body.theme-light .custom-modal-box textarea:focus,
body.theme-light .modal-box input:focus,
body.theme-light .modal-box select:focus,
body.theme-light .modal-box textarea:focus,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box input:focus,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box select:focus,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-box textarea:focus,
body:not(.theme-dark):not(.theme-apinex) .modal-box input:focus,
body:not(.theme-dark):not(.theme-apinex) .modal-box select:focus,
body:not(.theme-dark):not(.theme-apinex) .modal-box textarea:focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.theme-light .custom-modal-header,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-light .custom-modal-footer,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

body.theme-light .custom-modal-footer .btn-outline,
body.theme-light .custom-modal-footer .btn-secondary,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-footer .btn-outline,
body:not(.theme-dark):not(.theme-apinex) .custom-modal-footer .btn-secondary {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Enterprise Light Buttons */
body.theme-light .btn-secondary,
body.theme-light .btn-outline,
body:not(.theme-dark):not(.theme-apinex) .btn-secondary,
body:not(.theme-dark):not(.theme-apinex) .btn-outline {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 500;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

body.theme-light .btn-secondary:hover,
body.theme-light .btn-outline:hover,
body:not(.theme-dark):not(.theme-apinex) .btn-secondary:hover,
body:not(.theme-dark):not(.theme-apinex) .btn-outline:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Enterprise Light Badges */
body.theme-light .badge,
body.theme-light .status-badge,
body:not(.theme-dark):not(.theme-apinex) .badge,
body:not(.theme-dark):not(.theme-apinex) .status-badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- PERSONALIZE UI COMPONENT STYLES --- */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.theme-option-card {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-option-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-card);
}
.theme-option-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow), 0 8px 24px var(--shadow-card);
}
.theme-mini-mockup {
  height: 90px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 8px;
  display: flex;
  gap: 8px;
  overflow: hidden;
  user-select: none;
}
.theme-mini-sidebar {
  width: 26px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 3px;
}
.theme-mini-bar {
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.3;
}
.theme-mini-bar.active {
  opacity: 1;
  background: var(--primary) !important;
}
.theme-mini-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theme-mini-header {
  height: 12px;
  border-radius: 3px;
  opacity: 0.3;
  background: currentColor;
}
.theme-mini-box {
  flex: 1;
  border-radius: 4px;
  border: 1px solid currentColor;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.accent-palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.accent-swatch-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.accent-swatch-btn:hover {
  transform: scale(1.12);
}
.accent-swatch-btn.active {
  border-color: var(--text-main);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.accent-swatch-btn.active::after {
  content: '';
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.custom-accent-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 24px;
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s;
}
.custom-accent-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.custom-hex-input {
  border: none;
  background: transparent;
  color: var(--text-main);
  font-family: var(--app-font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  width: 80px;
  text-transform: uppercase;
  outline: none;
}
/* --- ACCENT CONTRAST SAFEGUARDS --- */
.text-primary,
.nav-item.active,
.badge-primary,
.login-box h2,
[style*="color:var(--primary)"],
[style*="color: var(--primary)"] {
  color: var(--primary-text, var(--primary)) !important;
}

/* --- SIZING & ANIMATIONS --- */
body.font-sm { --app-font-size: 13px; }
body.font-lg { --app-font-size: 17px; }
:root.font-roboto, body.font-roboto { --app-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; }
:root.font-poppins, body.font-poppins { --app-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
:root.font-mono, body.font-mono { --app-font-family: 'JetBrains Mono', 'Courier New', monospace; }
body.radius-square { --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; }
body.density-compact { --card-padding: 14px; --header-height: 60px; }
body.sidebar-narrow { --sidebar-width: 210px; }

body.style-flat .card,
body.style-flat .metric-card {
  box-shadow: none;
  border: 1px solid var(--border-color);
}

body.style-glass {
  background: var(--bg-body);
}
body.style-glass .card,
body.style-glass .metric-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
body.theme-dark.style-glass .card,
body.theme-dark.style-glass .metric-card {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Background Patterns */
body.bg-dots { background-color: var(--bg-body); }
body.bg-grid { background-color: var(--bg-body); }

body.anim-fast * { transition-duration: 0.1s !important; }
body.anim-slow * { transition-duration: 0.5s !important; }

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; }

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
  background-color: var(--bg-body);
  color: var(--text-main);
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { 
  margin: 0; 
  color: var(--text-main); 
  font-weight: 600; 
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p { margin: 0; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--primary-hover); }

.text-muted { color: var(--text-muted); font-size: 0.85em; }
.text-subtle { color: var(--text-subtle); font-size: 0.8em; }
.hidden { display: none !important; }
.view-section:not(.hidden) { display: block; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Visible for Accessibility */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-light);
}

/* Module Banners */
.module-banner {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: var(--bg-surface) !important;
  padding: 22px 28px !important;
  border-radius: var(--radius-md) !important;
  border-left: 5px solid var(--primary) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 24px !important;
  border-top: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: all var(--transition-base) !important;
  position: relative;
  overflow: hidden;
}

.module-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--primary-light); opacity: 0.15;
  pointer-events: none;
}

.module-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated) !important;
}

.module-banner-icon {
  font-size: 2.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--primary-light) !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: var(--radius-md) !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
  position: relative;
  z-index: 1;
}

.module-banner-icon svg,
.module-banner-icon .svg-icon {
  width: 28px !important;
  height: 28px !important;
  stroke: var(--primary) !important;
}

.module-banner-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  position: relative;
  z-index: 1;
}

.module-banner-desc {
  font-size: 0.92rem !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  position: relative;
  z-index: 1;
}

/* --- SVG ICONS --- */
.svg-icon {
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.svg-icon.sm { width: 0.95em; height: 0.95em; }
.svg-icon.lg { width: 1.4em; height: 1.4em; }

.nav-item:hover .svg-icon {
  transform: scale(1.1);
}

/* --- KEYFRAMES --- */
@keyframes slideInDown {
  0% { opacity: 0; transform: translateY(-40px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--primary-glow); }
  70% { box-shadow: 0 0 0 20px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes pulse-attention {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- PAYMENT TYPE BADGES --- */
.badge-recurring { 
  background: rgba(59, 130, 246, 0.12); 
  color: var(--info); 
  border: 1px solid rgba(59, 130, 246, 0.3); 
}
.badge-part { 
  background: rgba(245, 158, 11, 0.12); 
  color: var(--warning); 
  border: 1px solid rgba(245, 158, 11, 0.3); 
}
.badge-full-final { 
  background: rgba(34, 197, 94, 0.12); 
  color: var(--success); 
  border: 1px solid rgba(34, 197, 94, 0.3); 
}

/* --- PAYMENT HISTORY LIST --- */
.payment-history-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
}
.payment-history-entry:hover {
  background: var(--section-bg);
}
.payment-history-entry:last-child {
  border-bottom: none;
}
.payment-history-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.payment-history-amount {
  font-weight: 700;
  color: var(--text-main);
  font-size: 1em;
  letter-spacing: -0.01em;
}
.payment-history-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.payment-history-meta .text-muted {
  font-size: 0.78em;
}
.payment-history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.payment-history-date {
  font-size: 0.78em;
  color: var(--text-muted);
  text-align: right;
  min-width: 80px;
}
.payment-history-list {
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

/* --- LOADING SCREEN --- */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-body);
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}
.loading-overlay.hidden { 
  display: none !important;
  opacity: 0 !important; 
  pointer-events: none !important; 
  visibility: hidden !important;
}

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.loader-content {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  min-width: 200px;
}

.loading-content { 
  text-align: center; 
  max-width: 400px; 
  padding: 40px; 
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 24px auto;
}

.loading-greeting { 
  font-size: 1.5em; 
  font-weight: 700; 
  color: var(--text-main); 
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.loading-text { 
  color: var(--text-muted); 
  font-size: 0.95em; 
  margin-bottom: 24px; 
}

.loading-progress {
  width: 100%; 
  height: 6px; 
  background: var(--border-color); 
  border-radius: var(--radius-full); 
  overflow: hidden; 
  margin-bottom: 8px;
}

.loading-progress-bar {
  height: 100%; 
  background: var(--primary); 
  border-radius: var(--radius-full); 
  width: 0%; 
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.loading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  animation: shimmer 1.5s infinite;
}

.loading-percent { 
  color: var(--text-muted); 
  font-size: 0.85em; 
  font-weight: 600; 
}

/* ============================================================
   LOGIN SYSTEM / REMEDY MODALS — SHARED OVERLAY RULES
   Forgot Username, Forgot Password, and Legal modals are not plain
   body content. They render as centered modals and must stack above
   the login backdrop and any inline styles in index.html. All of them
   reuse the same palette, box styles, close button, links, and inputs
   so they visually match the login modal.
   ============================================================ */

/* ---- Auth Remedy Modal Overlays (Forgot Username / Forgot Password) ---- */
#forgotPasswordModal,
#forgotUsernameModal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 100010 !important;
  background: rgba(8, 10, 14, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

#forgotPasswordModal.active,
#forgotUsernameModal.active {
  display: flex !important;
}


/* ============================================================
   LOGIN SYSTEM (FULL SCREEN OVERLAY + LOGIN BOX)
   ============================================================ */

/* --- LOGIN --- */
#loginOverlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(15, 23, 42, 0.65); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000; 
  display: none; 
  justify-content: center; 
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

#loginOverlay:not(.hidden) {
  display: flex !important;
}

#loginOverlay.hidden,
#loginOverlay[style*="display: none"],
#loginOverlay[style*="display:none"] {
  display: none !important;
}

/* Dedicated CRM host (app.procollectcrm.shop): the sign-in screen IS the page,
   not a dismissible popup - no close/back affordances, and a solid backdrop
   since the marketing landing page isn't behind it. */
body.app-host-login #loginOverlay {
  background: var(--bg-body, #0f172a);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.app-host-login #loginOverlay .login-modal-close-btn {
  display: none !important;
}

#loginOverlay img#loginLogo {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform var(--transition-base);
}

#loginOverlay img#loginLogo:hover {
  transform: scale(1.05);
}

.login-box {
  background: var(--bg-surface); 
  padding: 40px; 
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated); 
  width: 100%; 
  max-width: 400px; 
  text-align: center;
  border: 1px solid var(--border-color); 
  animation: slideInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
}

/* Remedy modal boxes reuse the login box styling and override only what’s different:
   wider box (420px), left-aligned text, and a visible close button. */
#forgotPasswordModal .login-box,
#forgotUsernameModal .login-box {
  max-width: 420px;
  text-align: left;
}
#forgotPasswordModal .login-box .login-modal-close-btn,
#forgotUsernameModal .login-box .login-modal-close-btn {
  display: flex !important;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary);
}

.login-box h2 { 
  color: var(--primary); 
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-box p { 
  color: var(--text-muted); 
  margin-bottom: 25px; 
  font-size: 0.9em; 
}

.login-box input {
  width: 100%; 
  padding: 14px 16px; 
  margin-bottom: 15px; 
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm); 
  font-size: 1em; 
  background: var(--input-bg);
  color: var(--text-main); 
  font-family: inherit; 
  transition: all var(--transition-base);
}

.login-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
  transform: translateY(-1px);
}

.login-box input::placeholder {
  color: var(--text-subtle);
}

.login-box button {
  width: 100%; 
  padding: 14px; 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  border: none;
  border-radius: var(--radius-sm); 
  font-size: 1em; 
  font-weight: 600; 
  cursor: pointer;
  transition: all var(--transition-base); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.login-box button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.login-box button[type="submit"]:hover:not(:disabled)::before, .login-box #loginBtn:hover:not(:disabled)::before {
  width: 300px;
  height: 300px;
}

.login-box button[type="submit"]:hover:not(:disabled), .login-box #loginBtn:hover:not(:disabled) {
  background: var(--primary-hover); 
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px var(--primary-glow);
}

.login-box button[type="submit"]:active:not(:disabled), .login-box #loginBtn:active:not(:disabled) {
  transform: translateY(0);
}

.login-box button:disabled { 
  opacity: 0.7; 
  cursor: not-allowed; 
  transform: none; 
  box-shadow: none; 
}

/* --- SIDEBAR --- */
.sidebar-overlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  z-index: 999; 
  backdrop-filter: blur(4px); 
  transition: opacity var(--transition-base);
}
.sidebar-overlay.hidden { 
  display: none; 
  opacity: 0; 
  pointer-events: none; 
}

.sidebar {
  width: var(--sidebar-width); 
  flex-shrink: 0; 
  background: var(--bg-surface); 
  border-right: 1px solid var(--border-color);
  display: flex; 
  flex-direction: column; 
  transition: width var(--transition-slow), transform var(--transition-slow);
  z-index: 1000; 
  box-shadow: var(--shadow-subtle); 
  position: relative; 
  height: 100vh; 
  max-height: 100vh;
}

body.sidebar-dark .sidebar { 
  background: #0f172a; 
  border-color: #1e293b; 
  color: #f8fafc; 
}
body.sidebar-dark .sidebar .nav-item { 
  color: #94a3b8; 
}
body.sidebar-dark .sidebar .nav-item:hover { 
  background: #1e293b; 
  color: #f8fafc; 
}
body.sidebar-dark .sidebar .nav-item.active { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
}

.sidebar.collapsed { 
  width: 75px; 
}
.sidebar.collapsed .nav-item span { 
  display: none; 
}
.sidebar.collapsed .nav-item { 
  justify-content: center; 
  padding: 12px; 
}
.sidebar.collapsed .brand span { 
  display: none; 
}
.sidebar.collapsed .brand img { 
  margin-right: 0; 
}
.sidebar.collapsed .nav-section-label { 
  display: none; 
}
.sidebar.collapsed .special-tag { 
  display: none; 
}

#topbarTitle { 
  display: none !important; 
}

.brand {
  height: var(--header-height); 
  display: flex; 
  align-items: center; 
  padding: 0 var(--card-padding);
  border-bottom: 1px solid var(--border-color); 
  font-weight: 800; 
  font-size: 1.25em; 
  color: var(--primary);
  letter-spacing: -0.02em; 
  overflow: hidden; 
  white-space: nowrap; 
  position: relative; 
  gap: 10px; 
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.brand img { 
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.brand:hover img {
  transform: rotate(-5deg) scale(1.05);
}

.mobile-close-btn {
  display: none; 
  background: transparent; 
  border: none; 
  color: var(--text-muted); 
  cursor: pointer; 
  position: absolute; 
  right: 15px; 
  padding: 4px;
  transition: color var(--transition-fast);
}

.mobile-close-btn:hover {
  color: var(--text-main);
}

.nav-menu { 
  padding: var(--card-padding) 12px; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  flex: 1; 
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.nav-menu::-webkit-scrollbar {
  width: 4px;
}

.nav-menu::-webkit-scrollbar-track {
  background: transparent;
}

.nav-menu::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

.nav-item {
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 11px 16px; 
  border-radius: var(--radius-sm);
  color: var(--text-muted); 
  text-decoration: none; 
  font-weight: 500; 
  cursor: pointer; 
  transition: all var(--transition-fast);
  border: none; 
  background: transparent; 
  width: 100%; 
  text-align: left; 
  font-size: 0.92em; 
  white-space: nowrap; 
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--primary);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: height var(--transition-base);
}

.nav-item:hover { 
  background: var(--secondary-hover); 
  color: var(--text-main);
  transform: translateX(2px);
}

.nav-item.active { 
  background: var(--primary-light); 
  color: var(--primary-text, var(--primary)); 
  font-weight: 700;
}

.nav-item.active::before {
  height: 60%;
}

.nav-section-label {
  display: none !important;
}

.nav-item.sector-special { 
  border-left: 2px dashed transparent; 
}
.nav-item.sector-special:hover { 
  border-left-color: var(--sector-accent, var(--primary)); 
}
.nav-item.sector-special .special-tag {
  font-size: 0.6em; 
  padding: 2px 6px; 
  border-radius: var(--radius-xs); 
  background: var(--warning-bg);
  color: var(--warning); 
  font-weight: 700; 
  margin-left: auto;
  letter-spacing: 0.05em;
}

/* --- SIDEBAR EXPANDABLE / COLLAPSIBLE GROUPS & SUBMENUS --- */
.nav-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
  position: relative;
}

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  text-align: left;
  user-select: none;
  position: relative;
}

.nav-group-header:hover {
  background: var(--secondary-hover);
  color: var(--text-main);
}

.nav-group-header .nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-header .nav-group-title .svg-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  color: var(--text-muted);
}

.nav-group-header:hover .nav-group-title .svg-icon {
  transform: scale(1.08);
  color: var(--text-main);
}

.nav-group-header .chevron-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
  margin-left: 6px;
}

.nav-group.is-expanded > .nav-group-header .chevron-icon {
  transform: rotate(90deg);
}

.nav-group.has-active-child > .nav-group-header {
  color: var(--primary);
  font-weight: 700;
}

.nav-group.has-active-child > .nav-group-header .svg-icon {
  color: var(--primary);
}

.nav-group.has-active-child > .nav-group-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
  margin-left: 14px;
  border-left: 2px solid var(--border-color);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-3px);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.25s ease, 
              transform 0.25s ease,
              margin-top 0.25s ease;
  margin-top: 0;
}

.nav-group.is-expanded > .nav-submenu {
  max-height: 800px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 3px;
  margin-bottom: 6px;
}

.nav-submenu .submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.86em;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: all var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.nav-submenu .submenu-item::before {
  display: none !important;
}

.nav-submenu .submenu-item .svg-icon {
  width: 1em;
  height: 1em;
  opacity: 0.85;
  flex-shrink: 0;
}

.nav-submenu .submenu-item:hover {
  background: var(--secondary-hover);
  color: var(--text-main);
  padding-left: 15px;
}

.nav-submenu .submenu-item.active {
  background: var(--primary-light) !important;
  color: var(--primary-text, var(--primary)) !important;
  font-weight: 700;
  box-shadow: none !important;
}

.nav-submenu .submenu-item.active .svg-icon {
  color: var(--primary);
  opacity: 1;
}

/* Dark mode support */
body.theme-dark .nav-group-header:hover,
body.sidebar-dark .nav-group-header:hover {
  background: #1e293b;
  color: #f8fafc;
}
body.theme-dark .nav-submenu,
body.sidebar-dark .nav-submenu {
  border-left-color: rgba(255, 255, 255, 0.12);
}
body.theme-dark .nav-submenu .submenu-item:hover,
body.sidebar-dark .nav-submenu .submenu-item:hover {
  background: #1e293b;
  color: #f8fafc;
}

/* Collapsed sidebar mode adjustments */
.sidebar.collapsed .nav-group-header {
  justify-content: center;
  padding: 12px;
}
.sidebar.collapsed .nav-group-header .nav-group-title span {
  display: none;
}
.sidebar.collapsed .nav-group-header .chevron-icon {
  display: none;
}
.sidebar.collapsed .nav-submenu {
  display: none !important;
}

/* --- TOPBAR --- */
.main-wrapper { 
  flex: 1 1 auto; 
  min-width: 0; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
}

.topbar {
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: space-between; 
  align-items: center;
  height: var(--header-height); 
  min-height: var(--header-height); 
  max-height: var(--header-height);
  background: var(--bg-surface); 
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px; 
  z-index: 5; 
  transition: all var(--transition-base); 
  position: relative; 
  box-sizing: border-box; 
  width: 100%;
  backdrop-filter: blur(10px);
}

.header-left-wrap { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  flex-shrink: 0; 
}

.header-left-wrap,
.topbar-actions,
.topbar-campaign-wrap,
.user-profile,
.search-container { 
  min-width: 0; 
}

.search-container {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  background: var(--bg-body); 
  padding: 4px 6px 4px 16px;
  border-radius: var(--radius-full); 
  border: 1.5px solid var(--border-color);
  flex: 1 1 auto; 
  max-width: 400px; 
  min-width: 140px; 
  margin: 0 10px;
  transition: all var(--transition-base);
}

.search-container:focus-within { 
  box-shadow: 0 0 0 4px var(--primary-light); 
  background: var(--bg-surface); 
  border-color: var(--primary);
  transform: scale(1.02);
}

.search-container input { 
  border: none; 
  background: transparent; 
  outline: none; 
  width: 100%; 
  min-width: 50px; 
  color: var(--text-main); 
  font-size: 0.9em; 
  padding: 8px 0; 
  font-family: inherit; 
}

.search-container input::placeholder {
  color: var(--text-subtle);
}

.search-btn {
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  border: none; 
  border-radius: var(--radius-full); 
  padding: 7px 16px; 
  font-weight: 600;
  cursor: pointer; 
  transition: all var(--transition-fast); 
  font-size: 0.82em; 
  font-family: inherit; 
  flex-shrink: 0; 
  white-space: nowrap;
}

.search-btn:hover { 
  background: var(--primary-hover);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.topbar-actions { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  flex-direction: row; 
  flex-shrink: 0; 
  margin-left: auto; 
}

.topbar-campaign-wrap { 
  display: flex; 
  align-items: center; 
  border-right: 1px solid var(--border-color); 
  padding-right: 10px; 
  margin-right: 4px; 
  flex-shrink: 1; 
  min-width: 0; 
}

.topbar-campaign-wrap select { 
  padding: 7px 12px !important; 
  border-radius: var(--radius-full); 
  border: 1.5px solid var(--border-color); 
  background: var(--bg-surface); 
  color: var(--text-main); 
  font-weight: 600; 
  cursor: pointer; 
  font-size: 0.82em !important; 
  outline: none; 
  width: clamp(130px, 12vw, 200px); 
  max-width: 200px; 
  min-width: 100px; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  overflow: hidden;
  transition: all var(--transition-fast);
}

.topbar-campaign-wrap select:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 4px var(--primary-light); 
}

.user-profile {
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 5px 12px 5px 5px; 
  border-radius: var(--radius-full);
  background: var(--bg-body); 
  border: 1.5px solid var(--border-color); 
  cursor: pointer; 
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.user-profile:hover { 
  background: var(--secondary-hover); 
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle);
}

.user-profile .user-avatar { 
  width: 34px; 
  height: 34px; 
  border-radius: 50%; 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 700; 
  font-size: 0.85em; 
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.user-profile:hover .user-avatar {
  transform: scale(1.08);
}

.user-profile-info { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  max-width: 120px; 
  line-height: 1.2; 
  overflow: hidden; 
}

.user-profile-info #loggedInUser { 
  font-size: 0.88em; 
  font-weight: 600; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.user-profile-info #loggedInRole { 
  font-size: 0.72em; 
  color: var(--text-muted); 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

@media (min-width: 769px) and (max-width: 1250px) {
  .topbar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .search-container { margin: 0 6px; min-width: 120px; max-width: 260px; }
  .topbar-actions { gap: 6px; }
  .topbar-campaign-wrap { margin-right: 2px; padding-right: 6px; }
  .topbar-campaign-wrap select { width: clamp(110px, 10vw, 160px); min-width: 90px; }
  .user-profile-info { max-width: 85px; }
}

/* --- TOPBAR THEMES --- */
body.topbar-accent .topbar { 
  background: var(--primary); 
  border-bottom-color: var(--primary-hover); 
  color: var(--primary-btn-text, #ffffff); 
}
body.topbar-accent .topbar .btn-icon { 
  color: var(--primary-btn-text, #ffffff); 
  border-color: rgba(255, 255, 255, 0.2); 
}
body.topbar-accent .topbar .btn-icon:hover { 
  background-color: rgba(255, 255, 255, 0.15); 
}
body.topbar-accent .topbar .text-muted { 
  color: var(--primary-btn-text, rgba(255, 255, 255, 0.75)); 
  opacity: 0.8;
}
body.topbar-accent .topbar .search-container { 
  background: rgba(255, 255, 255, 0.15); 
  border-color: rgba(255, 255, 255, 0.25); 
}
body.topbar-accent .topbar .search-container input { 
  color: var(--primary-btn-text, #ffffff); 
}
body.topbar-accent .topbar .search-container input::placeholder { 
  color: var(--primary-btn-text, rgba(255, 255, 255, 0.6)); 
  opacity: 0.7;
}
body.topbar-accent .topbar .search-container svg { 
  color: var(--primary-btn-text, rgba(255, 255, 255, 0.7)); 
}
body.topbar-accent .topbar .search-btn { 
  background: var(--bg-surface, #ffffff); 
  color: var(--primary-text, var(--primary)); 
}
body.topbar-accent .topbar-campaign-wrap select { 
  background: rgba(255,255,255,0.15); 
  color: var(--primary-btn-text, #ffffff); 
  border-color: rgba(255,255,255,0.25); 
}
body.topbar-accent .topbar-campaign-wrap select option { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff); 
}
body.topbar-accent .notif-panel { 
  color: var(--text-main); 
}

body.topbar-dark .topbar { 
  background-color: #0f172a; 
  border-bottom-color: #1e293b; 
  color: white; 
}
body.topbar-dark .topbar .btn-icon { 
  color: white; 
  border-color: #334155; 
}
body.topbar-dark .topbar .btn-icon:hover { 
  background-color: #1e293b; 
}
body.topbar-dark .topbar .text-muted { 
  color: #94a3b8; 
}
body.topbar-dark .topbar .search-container { 
  background: #1e293b; 
  border-color: #334155; 
}
body.topbar-dark .topbar .search-container input { 
  color: white; 
}
body.topbar-dark .topbar-campaign-wrap select { 
  background: #1e293b; 
  color: white; 
  border-color: #334155; 
}
body.topbar-dark .notif-panel { 
  color: var(--text-main); 
}

/* --- CONTENT --- */
.content-body {
  flex: 1; 
  overflow-y: auto; 
  padding: 32px 32px 100px 32px; 
  display: flex; 
  flex-direction: column; 
  gap: 24px;
  scroll-behavior: smooth;
}

.content-body::-webkit-scrollbar {
  width: 8px;
}

.content-body::-webkit-scrollbar-track {
  background: var(--bg-body);
}

.content-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

.content-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* --- BADGES --- */
.badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 5px 12px; 
  border-radius: var(--radius-full); 
  font-size: 0.78em; 
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
}

.badge:hover {
  transform: scale(1.05);
}

.badge-primary { 
  background: var(--primary-light); 
  color: var(--primary-text, var(--primary)); 
  border: 1px solid var(--primary-glow);
  font-weight: 700;
}
.badge-success { 
  background: var(--success-bg); 
  color: var(--success); 
  border: 1px solid rgba(5, 150, 105, 0.2);
}
.badge-danger { 
  background: var(--danger-bg); 
  color: var(--danger); 
  border: 1px solid rgba(220, 38, 38, 0.2);
}
.badge-warning { 
  background: var(--warning-bg); 
  color: var(--warning); 
  border: 1px solid rgba(217, 119, 6, 0.2);
}
.badge-info { 
  background: var(--info-bg); 
  color: var(--info); 
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.bkt-low { 
  background: var(--success-bg) !important; 
  color: var(--success) !important; 
  border: 1px solid var(--success) !important; 
}
.bkt-mid { 
  background: var(--warning-bg) !important; 
  color: var(--warning) !important; 
  border: 1px solid var(--warning) !important; 
}
.bkt-high { 
  background: var(--danger-bg) !important; 
  color: var(--danger) !important; 
  border: 1px solid var(--danger) !important; 
}

/* --- METRIC WIDGETS --- */
.metrics-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 4px;
}

.advanced-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.metric-card, .saas-metric-card {
  background: var(--bg-surface);
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.metric-card::before,
.saas-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.metric-card:hover, 
.saas-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--primary);
}

.metric-card:hover::before,
.saas-metric-card:hover::before {
  transform: scaleX(1);
}

.metric-card .info span, 
.saas-metric-card .info span, 
.saas-metric-info span {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}

.metric-card .info h3, 
.saas-metric-card .info h3, 
.saas-metric-info h3 {
  font-size: 1.85em;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.metric-card .info small, 
.saas-metric-card .info small {
  display: block;
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 4px;
}

.metric-icon, 
.saas-metric-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--primary);
  transition: all var(--transition-base);
}

.metric-card:hover .metric-icon,
.saas-metric-card:hover .saas-metric-icon-box {
  transform: scale(1.1) rotate(-5deg);
  background: var(--primary);
  color: var(--primary-btn-text, #ffffff) !important;
}

/* --- PAYMENT BANNER --- */
.payment-banner {
  background: var(--success-bg); 
  color: var(--success); 
  padding: 16px 20px; 
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--success); 
  margin-bottom: 20px; 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  font-size: 0.95em; 
  font-weight: 600; 
  box-shadow: var(--shadow-subtle);
  transition: all var(--transition-base);
}

.payment-banner:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.payment-banner.part { 
  background: var(--warning-bg); 
  color: var(--warning); 
  border-color: var(--warning); 
}
.payment-banner.info { 
  background: var(--info-bg); 
  color: var(--info); 
  border-color: var(--info); 
}

.disabled-overlay { 
  pointer-events: none; 
  opacity: 0.4; 
  filter: grayscale(1); 
}

/* --- CARDS --- */
.card { 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-card); 
  overflow: hidden; 
  display: flex; 
  flex-direction: column;
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-elevated);
}

.card-header { 
  padding: var(--card-padding); 
  border-bottom: 1px solid var(--border-color); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  background: rgba(0, 0, 0, 0.01);
}

.card-body { 
  padding: var(--card-padding); 
  flex: 1; 
}

/* --- GRIDS --- */
.grid-2 { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 16px; 
}
.grid-3 { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px; 
}
.grid-4 { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 16px; 
}
.grid-layout { 
  display: grid; 
  grid-template-columns: 1.3fr 1fr; 
  gap: 24px; 
}

/* --- FORMS --- */
.form-group { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  position: relative; 
}
.form-group.full { 
  grid-column: 1 / -1; 
}

label { 
  font-size: 0.75em; 
  font-weight: 700; 
  color: var(--text-muted); 
  text-transform: uppercase; 
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.form-group:focus-within label {
  color: var(--primary);
}

input[type="text"], 
input[type="number"], 
input[type="date"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="password"], 
input[type="time"], 
input[type="tel"], 
input[type="color"], 
input[type="month"], 
select,
textarea {
  width: 100%; 
  padding: 11px 14px; 
  border: 1.5px solid var(--border-color); 
  border-radius: var(--radius-sm); 
  font-size: 0.95em; 
  background: var(--input-bg); 
  color: var(--text-main); 
  font-family: inherit; 
  transition: all var(--transition-base);
}

input:focus, 
select:focus, 
textarea:focus { 
  border-color: var(--primary); 
  outline: none; 
  box-shadow: 0 0 0 4px var(--primary-light); 
  background: var(--bg-surface);
  transform: translateY(-1px);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
}

input[readonly], 
textarea[readonly] { 
  background: rgba(0, 0, 0, 0.02); 
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Global form-control class — used by inventory, payroll, communication and other
   components. Keeps every .form-control input/select/textarea the same size and
   styling as the standard app inputs. */
.form-control {
  width: 100%; 
  padding: 11px 14px; 
  border: 1.5px solid var(--border-color); 
  border-radius: var(--radius-sm); 
  font-size: 0.95em; 
  background: var(--input-bg); 
  color: var(--text-main); 
  font-family: inherit; 
  transition: all var(--transition-base);
}

.form-control:focus { 
  border-color: var(--primary); 
  outline: none; 
  box-shadow: 0 0 0 4px var(--primary-light); 
  background: var(--bg-surface);
  transform: translateY(-1px);
}

.high-alert { 
  color: var(--danger) !important; 
  font-weight: bold; 
  background: var(--danger-bg) !important; 
  border-color: var(--danger) !important; 
}

.input-group { 
  display: flex; 
  gap: 8px; 
}
.input-group input { 
  flex: 1; 
}

/* --- BUTTONS --- */
.btn, .btn-icon {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  padding: 11px 18px; 
  border-radius: var(--radius-sm);
  font-size: 0.9em; 
  font-weight: 600; 
  cursor: pointer; 
  border: 1.5px solid transparent; 
  transition: all var(--transition-fast); 
  width: 100%; 
  text-decoration: none; 
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.btn::after,
.btn-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.btn:active::after,
.btn-icon:active::after {
  width: 200px;
  height: 200px;
}

.btn-icon { 
  width: 42px; 
  height: 42px; 
  padding: 0; 
  background: var(--bg-surface); 
  color: var(--text-muted); 
  border-color: var(--border-color); 
  border-radius: 50%; 
}

.btn-icon:hover { 
  background: var(--secondary-hover); 
  color: var(--text-main);
  transform: scale(1.08);
  box-shadow: var(--shadow-subtle);
}

.btn-icon.active { 
  background: var(--success); 
  color: white; 
  border-color: var(--success); 
}

.btn-primary { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) { 
  background: var(--primary-hover); 
  color: var(--primary-btn-text, #ffffff) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--primary-glow);
}

.btn-secondary { 
  background: var(--secondary); 
  color: var(--text-main); 
  border-color: var(--border-color); 
}

.btn-secondary:hover:not(:disabled) {
  background: var(--secondary-hover);
  transform: translateY(-1px);
}

.btn-success { 
  background: var(--success); 
  color: white; 
  border-color: var(--success);
}

.btn-success:hover:not(:disabled) {
  background: var(--success-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
}

.btn-warning { 
  background: var(--warning); 
  color: white; 
  border-color: var(--warning);
}

.btn-warning:hover:not(:disabled) {
  background: var(--warning-hover);
  transform: translateY(-2px);
}

.btn-danger { 
  background: var(--danger); 
  color: white; 
  border-color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
}

.btn-outline { 
  background: transparent; 
  border-color: var(--border-color); 
  color: var(--text-main); 
}

.btn-outline:hover:not(:disabled) {
  background: var(--bg-body);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.btn-sm { 
  padding: 6px 14px; 
  font-size: 0.8em; 
  width: auto; 
}

.btn-info { 
  background: var(--info); 
  color: white; 
  border-color: var(--info);
}

.btn-info:hover:not(:disabled) {
  background: var(--info-hover);
  transform: translateY(-2px);
}

.btn-mic {
  position: absolute; 
  right: 10px; 
  bottom: 8px; 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  border: none; 
  border-radius: 50%;
  width: 36px; 
  height: 36px; 
  cursor: pointer; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  transition: all var(--transition-fast); 
  padding: 0;
}

.btn-mic:hover { 
  transform: scale(1.1); 
  background: var(--primary-hover);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-mic.recording { 
  background: var(--danger); 
  animation: pulse-ring 1.5s infinite; 
}

button:disabled { 
  opacity: 0.6; 
  cursor: not-allowed; 
  pointer-events: none; 
}

/* --- QUICK ACTIONS --- */
.quick-actions-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 12px; 
}

.quick-action-btn {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding: 18px 10px; 
  background: var(--bg-body); 
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm); 
  cursor: pointer; 
  transition: all var(--transition-base); 
  font-family: inherit; 
  gap: 6px;
}

.quick-action-btn:hover { 
  background: var(--primary-light); 
  border-color: var(--primary); 
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-card);
}

.quick-action-btn:active {
  transform: translateY(0) scale(0.98);
}

/* --- MESSAGE STUDIO --- */
.message-bubble { 
  background: var(--bg-body); 
  border-radius: var(--radius-md); 
  padding: 18px; 
  border: 1px solid var(--border-color); 
  flex: 1; 
  min-height: 250px; 
  display: flex; 
  flex-direction: column; 
}

.message-bubble textarea { 
  border: none; 
  background: transparent; 
  padding: 0; 
  box-shadow: none; 
  resize: none; 
  height: 100%; 
  line-height: 1.6; 
  color: var(--text-main); 
  font-size: 0.95em; 
}

/* --- FILTER BAR --- */
.filter-bar { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  background: var(--bg-surface); 
  padding: 18px 24px; 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-lg); 
  flex-wrap: wrap; 
  box-shadow: var(--shadow-subtle);
  transition: all var(--transition-base);
}

.filter-bar:hover {
  box-shadow: var(--shadow-card);
}

/* --- TRACK BADGES --- */
.track-badge { 
  padding: 5px 12px; 
  border-radius: var(--radius-sm); 
  font-weight: 600; 
  font-size: 0.8em; 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  border: 1px solid; 
}

.tb-lm { 
  background: var(--info-bg); 
  color: var(--info); 
  border-color: var(--info); 
  font-size: 0.7em; 
}

/* --- TABLES --- */
.report-table { 
  width: 100%; 
  border-collapse: collapse; 
  text-align: left; 
  font-size: 0.9em; 
}

.report-table th, 
.report-table td { 
  padding: 14px 20px; 
  border-bottom: 1px solid var(--border-color); 
}

.report-table th { 
  background: var(--secondary); 
  font-weight: 700; 
  color: var(--text-muted); 
  position: sticky; 
  top: 0; 
  z-index: 2; 
  text-transform: uppercase; 
  font-size: 0.72em;
  letter-spacing: 0.05em;
}

.report-table tbody tr {
  transition: all var(--transition-fast);
}

.report-table tbody tr:hover { 
  background: var(--section-bg);
  transform: scale(1.005);
}

.table-container { 
  overflow-x: auto; 
  width: 100%; 
  display: block; 
  -webkit-overflow-scrolling: touch; 
  max-height: calc(100vh - 280px); 
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  min-width: 600px;
}

.data-table th, 
.data-table td {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  text-align: left;
  white-space: normal;
}

.data-table th {
  background: var(--secondary);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.05em;
}

.data-table tbody tr {
  transition: all var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--section-bg);
}

/* --- Company Manager Action Buttons --- */
.company-action-btns { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  flex-wrap: wrap; 
}

.company-action-btns .btn { 
  flex: 1; 
  min-width: 80px; 
  justify-content: center; 
  padding: 7px 12px; 
  font-size: 0.78em; 
  font-weight: 600; 
  border-radius: var(--radius-sm); 
  transition: all var(--transition-fast); 
}

.company-action-btns .btn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); 
}

.company-action-btns .btn-edit { 
  border-color: var(--primary); 
  color: var(--primary); 
  background: transparent; 
}

.company-action-btns .btn-edit:hover { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
}

.company-action-btns .btn-admin { 
  background: #2563eb; 
  color: white; 
  border-color: #2563eb; 
}

.company-action-btns .btn-admin:hover { 
  background: #2563eb; 
}

.company-action-btns .btn-toggle-active { 
  background: #ef4444; 
  color: white; 
  border-color: #ef4444; 
}

.company-action-btns .btn-toggle-active:hover { 
  background: #dc2626; 
}

.company-action-btns .btn-toggle-inactive { 
  background: #10b981; 
  color: white; 
  border-color: #10b981; 
}

.company-action-btns .btn-toggle-inactive:hover { 
  background: #059669; 
}

/* --- CUSTOM MODALS --- */
.custom-modal-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  background: rgba(0, 0, 0, 0.6); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 100000; 
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

.custom-modal-overlay.hidden { 
  display: none; 
}

.custom-modal-box { 
  background: var(--bg-surface); 
  width: 100%; 
  max-width: 420px; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-elevated); 
  overflow: hidden; 
  animation: modalPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--border-color);
}

.custom-modal-header { 
  background: rgba(0,0,0,0.02); 
  padding: 18px 24px; 
  border-bottom: 1px solid var(--border-color); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.custom-modal-header h3 { 
  margin: 0; 
  font-size: 1.15em; 
  color: var(--primary);
  font-weight: 700;
}

.custom-modal-body { 
  padding: 24px; 
}

.custom-modal-footer { 
  padding: 18px 24px; 
  border-top: 1px solid var(--border-color); 
  display: flex; 
  justify-content: flex-end; 
  gap: 10px; 
  background: rgba(0,0,0,0.01); 
}

.custom-modal-footer .btn {
  padding: 8px 18px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

#customConfirmModal .custom-modal-body,
#customPromptModal .custom-modal-body { 
  padding: 20px 24px; 
}

#customConfirmModal #confirmModalMessage {
  font-size: 0.95em;
  line-height: 1.55;
  color: var(--text-main);
  white-space: pre-wrap;
}

#customPromptModal .form-control {
  width: 100%; 
  padding: 12px 16px; 
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm); 
  font-size: 0.95em; 
  background: var(--bg-body);
  color: var(--text-main); 
  transition: all var(--transition-base); 
  outline: none;
}

#customPromptModal .form-control:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 4px var(--primary-light); 
}

/* Modal content standard styling */
.modal-content {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalPopIn 0.3s ease;
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.02);
}

.modal-header h3 { 
  margin: 0; 
  font-size: 1.1em; 
  color: var(--text-main); 
}

.modal-body { 
  padding: 24px; 
  flex: 1; 
  overflow-y: auto; 
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(6px); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 100000;
  animation: fadeIn 0.2s ease;
}

.modal-box { 
  background: var(--bg-surface); 
  padding: 32px; 
  border-radius: var(--radius-lg); 
  max-width: 600px; 
  text-align: left; 
  box-shadow: var(--shadow-elevated); 
  border: 1px solid var(--border-color); 
  animation: slideUp 0.3s ease-out; 
  width: 90%; 
  max-height: 90vh; 
  overflow-y: auto; 
}

/* Wider variant for the UPI collection modal (details + QR side by side) */
.modal-box.modal-wide {
  max-width: 760px;
}

/* ---- UPI collection: transaction details (left) + QR code (right) ---- */
.upi-qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 22px;
  align-items: start;
  text-align: left;
}

.upi-detail-pane { min-width: 0; }

.upi-amount-banner {
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.upi-amount-banner .upi-amount-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}
.upi-amount-banner .upi-amount-value {
  font-size: 2em;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 2px;
}
.upi-amount-banner .upi-timer {
  font-size: 0.88em;
  font-weight: 700;
  margin-top: 6px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  padding: 3px 11px;
}

.upi-txn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  margin-bottom: 6px;
}
.upi-txn-table tr { border-bottom: 1px dashed var(--border-color); }
.upi-txn-table tr:last-child { border-bottom: none; }
.upi-txn-table td { padding: 8px 2px; vertical-align: top; }
.upi-txn-table td.upi-txn-label {
  color: var(--text-muted);
  white-space: nowrap;
  width: 42%;
  padding-right: 10px;
}
.upi-txn-table td.upi-txn-value {
  font-weight: 600;
  word-break: break-word;
  text-align: right;
}
.upi-txn-table td.upi-txn-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
}

.upi-qr-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 14px;
}
.upi-qr-frame {
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  line-height: 0;
}
.upi-qr-frame img {
  width: 210px;
  height: 210px;
  display: block;
}
.upi-qr-caption {
  text-align: center;
  font-size: 0.82em;
  color: var(--text-muted);
  line-height: 1.5;
}

.upi-confirm-pane {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.upi-confirm-pane h4 { margin: 0 0 4px; font-size: 0.95em; }
.upi-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.upi-confirm-actions .btn { flex: 1 1 auto; }

@media (max-width: 700px) {
  .upi-qr-layout { grid-template-columns: minmax(0, 1fr); }
  .upi-qr-frame img { width: 190px; height: 190px; }
}

/* ---- Direct UPI Apps Grid (Mobile & Desktop) ---- */
.upi-apps-section {
  width: 100%;
  margin: 12px 0;
}
.upi-apps-header {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-main);
}
.upi-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.upi-app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.upi-app-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.upi-app-btn.gpay {
  border-color: #4285f4;
  color: #1a73e8;
  background: #f8faff;
}
.upi-app-btn.gpay:hover { background: #eef4fe; }
.upi-app-btn.phonepe {
  border-color: #5f259f;
  color: #5f259f;
  background: #f8fafc;
}
.upi-app-btn.phonepe:hover { background: #dbeafe; }
.upi-app-btn.paytm {
  border-color: #00b9f1;
  color: #002970;
  background: #f0faff;
}
.upi-app-btn.paytm:hover { background: #e0f6ff; }
.upi-app-btn.bhim {
  border-color: #00897b;
  color: #004d40;
  background: #e0f2f1;
}
.upi-app-btn.bhim:hover { background: #b2dfdb; }

.upi-app-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 5px;
  font-size: 13px;
}

.upi-qr-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: 1px dashed var(--primary);
  border-radius: 8px;
  cursor: pointer;
  margin: 10px 0;
  transition: background 0.15s ease;
}
.upi-qr-toggle-btn:hover {
  background: rgba(37, 99, 235, 0.06);
}

.upi-detected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 4px 10px;
  margin-top: 6px;
}

.vault-upload-actions {
  position: sticky;
  bottom: -32px;
  z-index: 2;
  padding: 12px 0 32px;
  margin-bottom: -32px;
  background: var(--bg-surface);
}

.app-confirm-dialog { 
  max-width: 420px; 
}

.app-confirm-dialog h3 { 
  margin: 0 0 10px; 
  color: var(--text-main); 
  font-size: 1.2rem; 
}

.app-confirm-dialog p { 
  margin: 0; 
  color: var(--text-muted); 
  line-height: 1.6; 
  white-space: pre-wrap; 
}

.app-confirm-actions { 
  display: flex; 
  justify-content: flex-end; 
  gap: 10px; 
  margin-top: 24px; 
}

.app-confirm-actions .btn { 
  width: auto; 
  min-width: 92px; 
}

/* --- DB GRID --- */
.db-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
  gap: 24px; 
  margin-top: 20px; 
}

/* In education sector, hide upload portfolio data and campaign statistics */
body[data-sector="education"] #dbUploadPortfolioCard,
body[data-sector="education"] #dbCampaignStatsCard {
  display: none !important;
}

.db-card { 
  background: var(--bg-surface); 
  border-radius: var(--radius-md); 
  border: 1px solid var(--border-color); 
  box-shadow: var(--shadow-subtle); 
  overflow: hidden;
  transition: all var(--transition-base);
}

.db-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.db-card-header { 
  padding: 16px 24px; 
  background: rgba(0,0,0,0.015); 
  border-bottom: 1px solid var(--border-color); 
  font-weight: 700; 
  font-size: 1.1em; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  color: var(--text-main); 
}

.file-dropzone { 
  border: 2px dashed var(--primary); 
  border-radius: var(--radius-md); 
  padding: 40px 20px; 
  text-align: center; 
  background: var(--primary-light); 
  cursor: pointer; 
  transition: all var(--transition-base); 
  position: relative; 
  margin-bottom: 20px; 
}

.file-dropzone:hover { 
  background: rgba(37, 99, 235, 0.12); 
  border-color: var(--primary-hover); 
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.file-dropzone input[type="file"] { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
  cursor: pointer; 
}

.file-dropzone-icon { 
  font-size: 36px; 
  margin-bottom: 12px; 
}

.radio-card-group { 
  display: flex; 
  gap: 12px; 
  margin-bottom: 20px; 
}

.radio-card { 
  flex: 1; 
  position: relative; 
}

.radio-card input { 
  position: absolute; 
  opacity: 0; 
}

.radio-card label { 
  display: block; 
  padding: 14px; 
  border: 2px solid var(--border-color); 
  border-radius: var(--radius-sm); 
  text-align: center; 
  cursor: pointer; 
  font-weight: 600; 
  transition: all var(--transition-base); 
  background: var(--bg-surface); 
  color: var(--text-muted); 
}

.radio-card input:checked + label { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  border-color: var(--primary); 
  box-shadow: 0 4px 12px var(--primary-glow);
  transform: translateY(-2px);
}

.db-stats-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 16px; 
  margin-bottom: 20px; 
}

.db-stat-box { 
  background: var(--bg-body); 
  padding: 18px; 
  border-radius: var(--radius-sm); 
  border: 1px solid var(--border-color); 
  display: flex; 
  flex-direction: column;
  transition: all var(--transition-base);
}

.db-stat-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}

.db-stat-box .label { 
  font-size: 0.72em; 
  color: var(--text-muted); 
  font-weight: 700; 
  text-transform: uppercase; 
  margin-bottom: 6px; 
  letter-spacing: 0.05em; 
}

.db-stat-box .value { 
  font-size: 1.8em; 
  font-weight: 700; 
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.db-stat-box.primary { border-left: 1px solid var(--primary); }
.db-stat-box.success { border-left: 1px solid var(--success); }
.db-stat-box.warning { border-left: 1px solid var(--warning); }
.db-stat-box.danger { border-left: 1px solid var(--danger); }

.btn-spinner {
  display: inline-block; 
  width: 18px; 
  height: 18px; 
  border: 2px solid rgba(255,255,255,0.3); 
  border-radius: 50%;
  border-top-color: #fff; 
  animation: spin 0.8s ease-in-out infinite; 
  margin-right: 8px; 
  vertical-align: middle;
}

/* --- TOAST NOTIFICATIONS --- */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  left: auto;
  transform: none;
  z-index: 1000005;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  color: white;
  font-weight: 600;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 420px;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
  position: relative;
  overflow: hidden;
}

.toast::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255,255,255,0.4);
  animation: shrink 3s linear forwards;
}

@keyframes shrink {
  from { width: 100%; }
  to { width: 0%; }
}

.toast.success { 
  background: var(--success); 
}
.toast.error { 
  background: var(--danger); 
}
.toast.info { 
  background: var(--primary); 
}
.toast.warning { 
  background: var(--warning); 
}
.toast-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
.toast-msg {
  flex: 1;
  line-height: 1.35;
  word-break: break-word;
}

/* --- NOTIFICATIONS --- */
.notif-container { 
  position: relative; 
}

.notif-badge { 
  position: absolute; 
  top: -4px; 
  right: -4px; 
  background: var(--danger); 
  color: white; 
  font-size: 0.65em; 
  font-weight: 700; 
  border-radius: 50%; 
  padding: 2px 6px; 
  min-width: 18px; 
  text-align: center;
  animation: pulse-glow 2s infinite;
}

.notif-panel { 
  position: absolute; 
  top: 120%; 
  right: 0; 
  width: 360px; 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-md); 
  box-shadow: var(--shadow-elevated); 
  z-index: 10000; 
  max-height: 480px; 
  overflow-y: auto; 
  display: none; 
  flex-direction: column; 
}

.notif-panel.show { 
  display: flex; 
  animation: slideUp 0.25s ease-out; 
}

.notif-header { 
  padding: 16px 20px; 
  border-bottom: 1px solid var(--border-color); 
  font-weight: 700; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  background: var(--secondary); 
  position: sticky; 
  top: 0; 
  z-index: 2; 
}

.notif-item { 
  padding: 16px 20px; 
  border-bottom: 1px solid var(--border-color); 
  font-size: 0.85em; 
  cursor: pointer; 
  transition: all var(--transition-fast); 
  line-height: 1.5; 
  color: var(--text-main); 
}

.notif-item:hover { 
  background: var(--section-bg);
  padding-left: 24px;
}

.notif-item:last-child { 
  border-bottom: none; 
}

.notif-time { 
  font-size: 0.8em; 
  color: var(--text-muted); 
  margin-top: 6px; 
  display: block; 
  font-weight: 600; 
}

/* --- SWITCH TOGGLE --- */
.switch { 
  position: relative; 
  display: inline-block; 
  width: 44px; 
  height: 24px; 
  flex-shrink: 0; 
}

.switch input { 
  opacity: 0; 
  width: 0; 
  height: 0; 
}

.slider { 
  position: absolute; 
  cursor: pointer; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: #cbd5e1; 
  transition: 0.3s; 
  border-radius: var(--radius-full); 
}

.slider:before { 
  position: absolute; 
  content: ""; 
  height: 18px; 
  width: 18px; 
  left: 3px; 
  bottom: 3px; 
  background-color: white; 
  transition: 0.3s; 
  border-radius: 50%; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

input:checked + .slider { 
  background-color: var(--primary); 
}

input:checked + .slider:before { 
  transform: translateX(20px); 
}

/* --- SETTINGS LIST --- */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-list.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  transition: all var(--transition-base);
}

.setting-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-subtle);
  transform: translateY(-1px);
}

.setting-item .info h4 {
  margin: 0 0 4px 0;
  color: var(--text-main);
  font-size: 1em;
  font-weight: 600;
}

.setting-item .info p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85em;
}

@media (max-width: 768px) {
  .settings-list.grid-2 {
    grid-template-columns: 1fr;
  }
  .settings-list.grid-2 .setting-item[style*="grid-column: 1 / -1"] {
    grid-column: 1 / -1;
  }
}

.mobile-bottom-nav { 
  display: none; 
}

/* --- CHAT UI --- */
.chat-widget {
  position: fixed; 
  bottom: 30px; 
  right: 30px; 
  width: 360px; 
  background: var(--bg-surface);
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--border-color);  
  display: flex; 
  flex-direction: column; 
  z-index: 100010;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
  height: 500px; 
  overflow: hidden;
}

.chat-widget.collapsed { 
  height: 58px; 
  width: 190px; 
  border-radius: var(--radius-xl); 
  cursor: pointer; 
}

.chat-widget.collapsed:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.25); 
}

.chat-widget.collapsed .chat-body, 
.chat-widget.collapsed .chat-footer { 
  display: none; 
}

.chat-header { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  padding: 16px 20px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  cursor: pointer; 
  flex-shrink: 0; 
  height: 58px;
}

.chat-body { 
  flex: 1; 
  overflow-y: auto; 
  padding: 16px; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  background-color: var(--bg-body); 
}

.chat-msg-row { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  margin-bottom: 4px; 
}

.chat-msg-row.me { 
  align-items: flex-end; 
}

.chat-msg-row.other { 
  align-items: flex-start; 
}

.chat-bubble { 
  position: relative; 
  max-width: 85%; 
  padding: 10px 14px 24px 14px; 
  border-radius: var(--radius-md); 
  font-size: 0.9em; 
  line-height: 1.5; 
  word-wrap: break-word; 
  box-shadow: var(--shadow-subtle); 
  min-width: 80px; 
  animation: slideInUp 0.2s ease;
}

.chat-msg-row.me .chat-bubble { 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  border-top-right-radius: 4px; 
}

.chat-msg-row.other .chat-bubble { 
  background: var(--bg-surface); 
  color: var(--text-main); 
  border: 1px solid var(--border-color); 
  border-top-left-radius: 4px; 
}

.chat-time { 
  position: absolute; 
  bottom: 4px; 
  right: 10px; 
  font-size: 0.68em; 
  color: var(--text-muted); 
  display: flex; 
  align-items: center; 
  gap: 2px; 
}

.chat-msg-row.me .chat-time {
  color: rgba(255,255,255,0.7);
}

.chat-text { 
  margin-bottom: 2px; 
}

.chat-img-attachment { 
  width: 100%; 
  max-width: 260px; 
  border-radius: var(--radius-sm); 
  margin-bottom: 6px; 
  cursor: pointer; 
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.chat-img-attachment:hover {
  transform: scale(1.02);
}

.chat-file-attachment { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  background: rgba(0, 0, 0, 0.04); 
  padding: 10px; 
  border-radius: var(--radius-sm); 
  margin-bottom: 6px; 
  text-decoration: none; 
  color: inherit; 
  font-weight: 600; 
  font-size: 0.9em;
  transition: background var(--transition-fast);
}

.chat-file-attachment:hover {
  background: rgba(0, 0, 0, 0.08);
}

.chat-footer { 
  padding: 14px; 
  background: var(--bg-surface); 
  border-top: 1px solid var(--border-color); 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  position: relative; 
}

.chat-footer-actions { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  width: 100%; 
}

.chat-footer input[type="text"] { 
  flex: 1; 
  border: 1.5px solid var(--border-color); 
  border-radius: var(--radius-full); 
  padding: 10px 18px; 
  font-size: 0.9em; 
  background: var(--input-bg); 
  color: var(--text-main); 
  outline: none;  
  font-family: inherit;
  transition: all var(--transition-fast);
}

.chat-footer input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.mention-dropdown { 
  position: absolute; 
  bottom: 100%; 
  left: 12px; 
  right: 12px; 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-sm); 
  box-shadow: var(--shadow-elevated); 
  max-height: 180px; 
  overflow-y: auto; 
  z-index: 100050; 
  display: none; 
}

.mention-item { 
  padding: 10px 14px; 
  cursor: pointer; 
  font-size: 0.9em; 
  border-bottom: 1px solid var(--border-color); 
  color: var(--text-main); 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  transition: all var(--transition-fast);
}

.mention-item:hover { 
  background: var(--primary-light); 
  color: var(--primary);
  padding-left: 18px;
}

.mention-item:last-child { 
  border-bottom: none; 
}

.chat-upload-progress { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 10px 14px; 
  background: var(--primary-light); 
  border-radius: var(--radius-sm); 
}

.chat-upload-progress .progress-bar { 
  flex: 1; 
  height: 4px; 
  background: var(--border-color); 
  border-radius: var(--radius-full); 
  overflow: hidden; 
}

.chat-upload-progress .progress-bar .fill { 
  height: 100%; 
  background: var(--primary); 
  border-radius: var(--radius-full); 
  transition: width 0.3s ease; 
}

/* --- ATTENDANCE --- */
.attendance-status-select { 
  padding: 6px 10px; 
  border-radius: var(--radius-sm); 
  border: 1.5px solid var(--border-color); 
  font-weight: 600; 
  font-size: 0.8em; 
  background: var(--bg-surface); 
  color: var(--text-main); 
  cursor: pointer; 
  transition: all var(--transition-fast); 
}

.attendance-status-select:focus { 
  outline: none; 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px var(--primary-light); 
}

#attendanceTableBody tr:hover { 
  background: var(--section-bg); 
}

#attendanceTableBody .attendance-status-select { 
  min-width: 120px; 
}

#compactAttendanceBtn { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 7px 18px; 
  border-radius: var(--radius-full); 
  border: 2px solid var(--border-color); 
  background: var(--bg-surface); 
  cursor: pointer; 
  transition: all var(--transition-base); 
  flex-shrink: 0; 
  min-height: 38px; 
  box-shadow: var(--shadow-subtle); 
}

#compactAttendanceBtn.attendance-unmarked { 
  border-color: var(--danger) !important; 
  background: var(--danger-bg) !important; 
  animation: pulse-attention 2s infinite; 
}

#compactAttendanceBtn.attendance-unmarked #compactAttendanceStatus { 
  color: var(--danger) !important; 
}

#compactAttendanceBtn.attendance-marked { 
  border-color: var(--success) !important; 
  background: var(--success-bg) !important; 
}

#compactAttendanceBtn.attendance-marked #compactAttendanceStatus { 
  color: var(--success) !important; 
}

#compactAttendanceBtn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); 
}

#compactAttendanceStatus { 
  font-size: 0.8em; 
  font-weight: 700; 
  transition: color var(--transition-base); 
}

#compactAttendanceTime { 
  font-size: 0.7em; 
  color: var(--text-muted); 
  font-weight: 500; 
}

#emptyWorkspaceState { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  height: 60vh; 
  color: var(--text-muted); 
  text-align: center; 
}

#emptyWorkspaceState svg { 
  width: 80px; 
  height: 80px; 
  margin-bottom: 20px; 
  opacity: 0.5; 
}

#emptyWorkspaceState h3 { 
  margin-bottom: 8px; 
  color: var(--text-main); 
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { 
  width: 8px; 
  height: 8px; 
}

::-webkit-scrollbar-track { 
  background: var(--bg-body); 
}

::-webkit-scrollbar-thumb { 
  background: var(--border-color); 
  border-radius: var(--radius-full); 
}

::-webkit-scrollbar-thumb:hover { 
  background: var(--text-muted); 
}

/* --- TEMPLATE MANAGEMENT --- */
#msgTemplate { 
  padding: 10px 14px; 
  border-radius: var(--radius-sm); 
  border: 1.5px solid var(--border-color); 
  background: var(--bg-surface); 
  color: var(--text-main); 
  font-size: 0.9em; 
  font-weight: 500; 
  cursor: pointer; 
  width: 100%; 
  font-family: inherit; 
  appearance: auto;
  transition: all var(--transition-fast);
}

#msgTemplate:focus { 
  outline: none; 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px var(--primary-light); 
}

#msgTemplate optgroup { 
  font-weight: 600; 
  color: var(--text-muted); 
  background: var(--bg-surface); 
  font-style: normal; 
}

#msgTemplate option { 
  padding: 6px 12px; 
  font-weight: 400; 
  color: var(--text-main); 
  background: var(--bg-surface); 
}

#templateList td { 
  vertical-align: middle; 
}

#templateList .btn { 
  width: auto; 
  padding: 5px 12px; 
  font-size: 0.75em; 
}

#templateList code { 
  background: var(--bg-body); 
  padding: 3px 10px; 
  border-radius: var(--radius-sm); 
  font-size: 0.85em; 
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

#templateModal .modal-box { 
  max-width: 700px; 
  max-height: 90vh; 
  overflow-y: auto; 
}

#templateModal textarea { 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 0.9em; 
  line-height: 1.6; 
  min-height: 200px; 
}

#templatePreview { 
  font-size: 0.85em; 
  line-height: 1.6; 
  white-space: pre-wrap; 
  min-height: 80px; 
  max-height: 200px; 
  overflow-y: auto; 
  background: var(--bg-body); 
  padding: 14px 18px; 
  border-radius: var(--radius-sm); 
  border: 1px solid var(--border-color); 
  color: var(--text-main); 
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .grid-layout { grid-template-columns: 1fr; }
  .metrics-overview { grid-template-columns: repeat(2, 1fr); }
  .advanced-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .allotment-page-heading { 
    align-items: stretch; 
    flex-direction: column; 
    padding: 15px; 
  }
  .allotment-live-card { 
    min-width: 0; 
    width: 100%; 
  }
  .metrics-overview { grid-template-columns: 1fr; }
  .advanced-metrics-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  
  .sidebar { 
    position: fixed; 
    height: 100vh; 
    transform: translateX(-100%); 
    z-index: 1000; 
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); 
  }
  .sidebar:not(.collapsed) { 
    transform: translateX(0); 
    width: 280px !important; 
  }
  .sidebar:not(.collapsed) .brand span, 
  .sidebar:not(.collapsed) .nav-item span { 
    display: inline-block; 
  }
  .sidebar:not(.collapsed) .nav-item { 
    justify-content: flex-start; 
    padding: 12px 18px; 
  }
  .mobile-close-btn { 
    display: block !important; 
  }
  
  .topbar { 
    padding: 10px 14px; 
    height: auto; 
    min-height: var(--header-height); 
    max-height: none; 
    flex-wrap: wrap; 
    gap: 8px; 
  }
  .header-left-wrap { flex: 0 0 auto; }
  .topbar-actions { order: 2; margin-left: auto; justify-content: flex-end; }
  .search-container { order: 3; width: 100%; margin: 4px 0 0 0; max-width: 100%; min-width: 0; }
  .topbar-campaign-wrap { border-right: none; padding-right: 0; margin-right: 0; }
  .user-profile-info { display: none; }
  
  .content-body { 
    padding: 16px 16px 100px 16px; 
    padding-bottom: 80px !important; 
  }
  
  .filter-bar { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 8px; 
    padding: 16px; 
  }
  .filter-bar input, 
  .filter-bar select, 
  .filter-bar button { 
    width: 100% !important; 
    margin: 0; 
  }
  .filter-bar label { 
    width: 100%; 
    margin: 0; 
    justify-content: flex-start; 
  }
  .filter-bar > div { display: none; }
  
  .chat-widget { 
    right: 16px; 
    bottom: 80px !important; 
    width: calc(100% - 32px); 
    height: 420px; 
    left: 16px; 
    z-index: 9999; 
  }
  .chat-widget.collapsed { 
    width: 180px; 
    right: 16px; 
    left: auto; 
  }
  
  #toast-container { 
    top: 14px; 
    right: 14px; 
    left: auto;
    transform: none;
    width: auto;
    max-width: calc(100% - 28px);
    align-items: flex-end;
  }
  
  .mobile-bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: var(--bg-surface); 
    border-top: 1px solid var(--border-color); 
    display: flex; 
    justify-content: space-around; 
    padding: 8px 0 12px 0; 
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
  }
  .mobile-bottom-nav button { 
    background: none; 
    border: none; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    font-size: 0.62em; 
    color: var(--text-muted); 
    padding: 6px 12px; 
    cursor: pointer; 
    font-family: inherit; 
    transition: color var(--transition-fast); 
  }
  .mobile-bottom-nav button.active { 
    color: var(--primary); 
  }
  .mobile-bottom-nav button svg { 
    width: 24px; 
    height: 24px; 
    margin-bottom: 2px; 
  }
  
  .modal-box { 
    padding: 20px; 
    max-width: 95%; 
    margin-bottom: 80px; 
  }
}

@media (max-width: 480px) {
  .modal-box { padding: 16px; max-width: 98%; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .login-box { padding: 24px; margin: 16px; }
  .loading-content { padding: 20px; }
}

/* --- PRINT --- */
@media print {
  .sidebar, 
  .topbar, 
  .mobile-bottom-nav, 
  .chat-widget, 
  .btn, 
  .btn-icon, 
  .search-container, 
  .topbar-actions { 
    display: none !important; 
  }
  .main-wrapper { margin: 0 !important; padding: 0 !important; }
  .content-body { padding: 20px !important; }
  .card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* --- ALLOTMENT & COMPANY MODALS --- */
.allotment-modal { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.allotment-modal-heading { 
  padding-bottom: 12px; 
  border-bottom: 1px solid var(--border-color); 
  margin-bottom: 8px; 
}

.campaign-kicker { 
  font-size: 0.72em; 
  font-weight: 800; 
  color: var(--primary); 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  display: inline-block; 
  margin-bottom: 4px; 
  background: var(--primary-light); 
  padding: 4px 10px; 
  border-radius: var(--radius-xs); 
}

.allotment-modal-heading h3 { 
  margin: 0; 
  font-size: 1.4em; 
  color: var(--text-main); 
}

.allotment-modal-copy { 
  font-size: 0.9em; 
  color: var(--text-muted); 
  line-height: 1.5; 
  margin: 0 0 10px 0; 
}

.allotment-field-label { 
  font-size: 0.8em; 
  font-weight: 700;  
  color: var(--text-main); 
  text-transform: uppercase; 
  margin-bottom: -6px; 
}

.allotment-campaign-select { 
  width: 100%; 
  padding: 12px 14px; 
  border-radius: var(--radius-sm); 
  border: 2px solid var(--border-color); 
  background: var(--bg-surface); 
  color: var(--text-main); 
  font-size: 0.95em; 
  font-weight: 600; 
  cursor: pointer; 
  transition: all var(--transition-fast); 
}

.allotment-campaign-select:focus { 
  border-color: var(--primary); 
  outline: none; 
  box-shadow: 0 0 0 3px var(--primary-light); 
}

.allotment-users-heading { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-top: 12px; 
  padding-top: 16px; 
  border-top: 1px solid var(--border-color); 
}

.allotment-users-heading span { 
  font-weight: 700; 
  font-size: 0.95em;  
  color: var(--text-main); 
}

.allotment-select-all { 
  background: none; 
  border: none; 
  color: var(--primary); 
  font-size: 0.85em; 
  font-weight: 600; 
  cursor: pointer; 
  padding: 4px 8px; 
  border-radius: var(--radius-xs); 
  transition: background var(--transition-fast); 
}

.allotment-select-all:hover { 
  background: var(--primary-light); 
}

.allotment-user-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
  gap: 10px; 
  max-height: 240px; 
  overflow-y: auto; 
  padding-right: 4px; 
  padding-bottom: 4px; 
}

.allot-user-option { 
  display: flex; 
  align-items: center;  
  gap: 10px; 
  padding: 12px; 
  background: var(--bg-body); 
  border: 1.5px solid var(--border-color); 
  border-radius: var(--radius-sm); 
  cursor: pointer; 
  transition: all var(--transition-fast); 
}

.allot-user-option:hover { 
  border-color: var(--primary); 
  background: var(--primary-light); 
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}

.allot-user-option input[type="checkbox"] { 
  margin: 0; 
  width: 18px; 
  height: 18px; 
  accent-color: var(--primary); 
  cursor: pointer; 
  flex-shrink: 0; 
}

.allot-user-option span { 
  font-weight: 600; 
  font-size: 0.85em; 
  color: var(--text-main); 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  flex: 1; 
}

.allot-user-option small { 
  display: none; 
}

.allotment-modal-footer { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-top: 16px; 
  padding-top: 20px; 
  border-top: 1px solid var(--border-color); 
}

.allotment-modal-footer span { 
  font-size: 0.85em;  
  font-weight: 700; 
  color: var(--primary); 
  background: var(--primary-light); 
  padding: 8px 14px; 
  border-radius: var(--radius-full); 
}

.allotment-modal-footer div { 
  display: flex; 
  gap: 10px; 
}

/* --- COMPANY MANAGEMENT --- */
.company-management-container { 
  display: flex; 
  flex-direction: column; 
  gap: 24px; 
  max-width: 1200px; 
  margin: 0 auto; 
  width: 100%; 
}

.company-form-card { 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-card); 
  padding: 32px;
  transition: all var(--transition-base);
}

.company-form-card:hover {
  box-shadow: var(--shadow-elevated);
}

.company-form-card h3 { 
  margin-bottom: 20px; 
  padding-bottom: 12px; 
  border-bottom: 1px solid var(--border-color); 
  color: var(--primary); 
  font-size: 1.25em; 
}

@media (max-width: 768px) {
  .company-form-card { padding: 16px; }
}

/* --- SUPER ADMIN --- */
body.is-super-admin #superAdminDashboardExt { 
  display: block !important; 
  width: 100%; 
}

body.is-super-admin .metrics-overview { 
  display: grid !important; 
  grid-template-columns: repeat(4, 1fr) !important; 
  gap: 20px; 
  margin-bottom: 24px; 
}

@media (max-width: 1024px) {
  body.is-super-admin .metrics-overview { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  body.is-super-admin .metrics-overview { grid-template-columns: 1fr !important; }
}

body.is-super-admin .metrics-overview:not(#superAdminDashboardExt .metrics-overview) {
  display: none !important;
}

/* --- CUSTOMER MODE --- */
body.is-customer .admin-only,
body.is-customer .super-only {
  display: none !important;
}

body.is-customer .customer-only {
  display: block !important;
}

body.is-customer .metrics-overview {
  grid-template-columns: repeat(2, 1fr) !important;
}

body.is-customer .metrics-overview > * {
  display: none !important;
}

body.is-customer .metrics-overview .customer-metric {
  display: block !important;
}

/* --- DYNAMIC FIELDS CONTAINER --- */
#dynamicFieldsContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background: var(--section-bg);
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
}

@media (max-width: 768px) {
  #dynamicFieldsContainer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .grid-2,
  .grid-3,
  .grid-layout,
  .settings-list.grid-2 {
    grid-template-columns: 1fr !important;
  }
  .db-grid {
    grid-template-columns: 1fr !important;
  }
  .db-card-body, 
  .card-body, 
  .file-dropzone {
    padding: 16px !important;
  }
}

/* --- Z-INDEX HIERARCHY --- */
.swal2-container,
#customConfirmModal,
#customPromptModal,
.app-confirm-dialog {
  z-index: 1000200 !important;
}

#addEnrollmentModal {
  z-index: 100050 !important;
}

.modal-overlay,
.custom-modal-overlay {
  z-index: 100000 !important;
}

.chat-widget {
  z-index: 100010 !important;
}

.mention-dropdown {
  z-index: 100050 !important;
}

#toast-container {
  z-index: 1000005 !important;
}

.loading-overlay {
  z-index: 1000000 !important;
}

/* --- MODULE RENAME INPUT --- */
.module-rename-input {
  width: 100%;
  font-weight: 600;
  font-size: 1em;
  padding: 8px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  color: var(--primary);
  transition: all var(--transition-fast);
}

.module-rename-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  background: var(--bg-surface);
  outline: none;
}

/* --- WORKSPACE BUILDER --- */
.builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

#view-builder {
  padding-bottom: 32px;
}

#view-builder > div:first-child {
  padding: 22px 24px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface); border-left: 1px solid var(--primary);
  box-shadow: var(--shadow-subtle);
}

#view-builder .builder-grid > .card {
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--primary);
  height: 100%;
  display: flex;
  flex-direction: column;
}

#view-builder .builder-grid > .card:nth-child(1),
#view-builder .builder-grid > .card:nth-child(2) {
  min-height: 430px;
}

#view-builder .builder-grid > .card > .card-body {
  flex: 1;
}

#view-builder .builder-grid > .card:nth-child(2) { border-top-color: var(--info); }
#view-builder .builder-grid > .card:nth-child(3) { border-top-color: var(--success); }
#view-builder .builder-grid > .card:nth-child(4) { border-top-color: var(--warning); }

#view-builder .card-header {
  gap: 12px;
  align-items: center;
}

#view-builder .card-header h3 {
  font-size: 1rem;
}

.builder-remark-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.builder-remark-row:last-child { border-bottom: 0; }

.builder-remark-row:hover { 
  background: var(--primary-light);
  transform: translateX(2px);
}

.builder-remark-text { 
  min-width: 0; 
  overflow-wrap: anywhere; 
}

.builder-remark-delete { 
  flex: 0 0 auto; 
  color: var(--danger); 
}

.builder-menu-manager {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.builder-menu-manager h4 {
  margin-bottom: 14px;
  color: var(--primary);
}

.builder-menu-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 16px;
}

.builder-menu-actions .btn { flex: 1; }

.builder-columns-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.builder-columns-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  margin-bottom: 16px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

/* --- TABS (unified segmented / pill style) --- */
.builder-tabs,
.tabs,
.tw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-body);
  overflow-x: auto;
  scrollbar-width: none;
}

.builder-tabs::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.tw-tabs::-webkit-scrollbar {
  display: none;
}

.builder-tab-btn,
.tab-btn,
.template-tab-btn,
.tw-tab-btn,
#tabRegularTemplates,
#tabWhatsAppBlast,
#tabVariableManager {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.builder-tab-btn:hover,
.tab-btn:hover,
.template-tab-btn:hover,
.tw-tab-btn:hover,
#tabRegularTemplates:hover,
#tabWhatsAppBlast:hover,
#tabVariableManager:hover {
  color: var(--text-main);
  background: rgba(37, 99, 235, 0.09);
}

.builder-tab-btn.active,
.tab-btn.active,
.template-tab-btn.active,
.tw-tab-btn.active,
#tabRegularTemplates.active,
#tabWhatsAppBlast.active,
#tabVariableManager.active {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.95);
  font-weight: 600;
}

/* Legacy underline indicator is replaced by the active state */
.builder-tab-btn.active::after,
.tab-btn.active::after,
.template-tab-btn.active::after {
  display: none;
}

.builder-tab-btn .svg-icon,
.tab-btn .svg-icon,
.template-tab-btn .svg-icon,
.tw-tab-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.custom-var-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.88em;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-main);
  transition: all var(--transition-fast);
}

.custom-var-chip:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
}

.custom-var-delete-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1em;
  padding: 0 4px;
  color: var(--danger);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.custom-var-delete-btn:hover {
  transform: scale(1.25);
}

.builder-tab-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.builder-tab-panel {
  display: block;
}

.builder-tab-panel.hidden {
  display: none;
}

@media (max-width: 1024px) {
  .builder-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #view-builder > div:first-child { padding: 16px; }
  #view-builder .card-body { padding: 16px; }
  .builder-menu-actions { padding-bottom: 0; }
  .builder-tabs { gap: 2px; }
  .builder-tab-btn { padding: 8px 12px; font-size: 0.85em; }
}

/* ============================================================
EDUCATION SECTOR MODULES — ENHANCED CSS
============================================================ */

.attendance-grid {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
}

#view-student-attendance {
  width: 100%;
}

#view-student-attendance .card {
  width: 100%;
}

#view-student-attendance .table-container {
  width: 100%;
  min-width: 100%;
  overflow-x: auto;
}

#view-student-attendance table.report-table {
  width: 100% !important;
  min-width: 100% !important;
}

.student-attendance-card {
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.student-attendance-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-color);
  transition: all var(--transition-base);
}

.student-attendance-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.student-attendance-card.present {
  border-color: var(--success);
  background: var(--success-bg);
}
.student-attendance-card.present::before {
  background: var(--success);
}

.student-attendance-card.absent {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.student-attendance-card.absent::before {
  background: var(--danger);
}

.student-attendance-card.late {
  border-color: var(--warning);
  background: var(--warning-bg);
}
.student-attendance-card.late::before {
  background: var(--warning);
}

.student-attendance-card.leave {
  border-color: var(--info);
  background: var(--info-bg);
}
.student-attendance-card.leave::before {
  background: var(--info);
}

.student-attendance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.student-name {
  font-weight: 700;
  font-size: 0.98em;
  color: var(--text-main);
}

.student-id {
  font-size: 0.75em;
  color: var(--text-muted);
}

.attendance-actions {
  display: flex;
  gap: 5px;
  margin-top: 12px;
}

.att-btn {
  flex: 1;
  padding: 8px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.78em;
  font-weight: 700;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.att-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.att-btn.present {
  color: var(--success);
  border-color: var(--success);
}
.att-btn.present.active {
  background: var(--success);
  color: #fff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.att-btn.absent {
  color: var(--danger);
  border-color: var(--danger);
}
.att-btn.absent.active {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.att-btn.late {
  color: var(--warning);
  border-color: var(--warning);
}
.att-btn.late.active {
  background: var(--warning);
  color: #fff;
}

.att-btn.leave {
  color: var(--info);
  border-color: var(--info);
}
.att-btn.leave.active {
  background: var(--info);
  color: #fff;
}

/* --- FEE SUMMARY --- */
.fee-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.fee-summary-card {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fee-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary);
}

.fee-summary-label {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.fee-summary-value {
  font-size: 1.6em;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

/* --- EXAM CARDS --- */
.exam-card {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: 14px;
  transition: all 0.25s ease;
}

.exam-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.exam-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.exam-title {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--text-main);
}

.exam-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.exam-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.exam-meta-label {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.exam-meta-value {
  font-weight: 700;
  color: var(--text-main);
}

.exam-tab-panel {
  display: block;
}

.exam-tab-panel.hidden {
  display: none;
}

.admission-zone-tab-panel {
  display: block;
}

.admission-zone-tab-panel.hidden {
  display: none !important;
}

/* --- HOMEWORK TAB CONTENT --- */
.homework-tab-content {
  display: block;
}

.homework-tab-content.hidden {
  display: none;
}

/* --- MESSAGE TEMPLATES --- */
.message-template {
  padding: 14px 16px;
  background: var(--bg-body);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  transition: all var(--transition-base);
  cursor: pointer;
}

.message-template:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateX(4px);
}

.message-template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-template-name {
  font-weight: 700;
  font-size: 0.92em;
}

.message-template-category {
  font-size: 0.7em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.message-template-content {
  font-size: 0.82em;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- MINI CALENDAR --- */
.mini-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}

.cal-header {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 6px;
  text-transform: uppercase;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-surface);
  border: 1px solid transparent;
}

.cal-day:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: scale(1.08);
}

.cal-day.today {
  background: var(--primary);
  color: var(--primary-btn-text, #ffffff) !important;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.cal-day.has-event {
  position: relative;
}

.cal-day.has-event::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

.cal-day.other-month {
  opacity: 0.3;
}

/* --- EXAM TAB BUTTONS --- */
.exam-tab-btn {
  padding: 9px 18px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.exam-tab-btn.active, 
.exam-tab-btn:hover {
  background: var(--primary);
  color: var(--primary-btn-text, #ffffff) !important;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* .card-accent removed in favor of global 1px card border system */

/* --- PROGRESS BAR --- */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-body);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  animation: shimmer 2s infinite;
}

/* --- KPI CARDS --- */
.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all var(--transition-base);
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary);
}

.kpi-icon {
  font-size: 1.6em;
}

.kpi-label {
  font-size: 0.78em;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-value {
  font-size: 1.9em;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

/* --- TIMETABLE MATRIX --- */
.tt-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}

.tt-matrix-table th, 
.tt-matrix-table td {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.tt-matrix-table th:last-child, 
.tt-matrix-table td:last-child {
  border-right: none;
}

.tt-matrix-table tr:last-child td {
  border-bottom: none;
}

.tt-matrix-table thead th {
  background: var(--secondary);
  color: var(--text-main);
  font-weight: 700;
  padding: 12px 10px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.05em;
}

.tt-matrix-day-header {
  background: var(--secondary) !important;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  padding: 14px 10px !important;
  min-width: 100px;
  width: 110px;
  vertical-align: middle !important;
}

.tt-matrix-cell {
  padding: 8px;
  min-width: 140px;
  min-height: 100px;
  transition: all var(--transition-fast);
  background: var(--bg-surface);
}

.tt-matrix-cell:hover {
  background: var(--section-bg);
}

.tt-cell-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 5px;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.tt-cell-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-card);
  border-left-color: var(--primary-hover);
}

.tt-cell-subject {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text-main);
  line-height: 1.3;
}

.tt-cell-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tt-cell-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.tt-empty-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  height: 100%;
}

.tt-empty-slot .tt-add-btn {
  border: 1.5px dashed var(--border-color);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
  height: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  font-weight: 600;
}

.tt-empty-slot .tt-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: scale(1.02);
}

/* --- CUSTOMER METRIC CARD --- */
.customer-metric {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-subtle);
  transition: all var(--transition-base);
}

.customer-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.delete-working {
  animation: pulse-attention 0.8s ease-in-out infinite;
  pointer-events: none;
}

.delete-working::first-letter {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

/* --- SIDEBAR CAMPAIGN PANEL --- */
.sidebar-campaign-panel { 
  overflow: visible; 
}

.sidebar.collapsed .sidebar-campaign-panel { 
  width: 59px; 
  margin-left: 8px; 
  margin-right: 8px; 
  padding: 9px 5px !important; 
  text-align: center; 
}

.sidebar.collapsed .sidebar-campaign-panel .campaign-panel-caption, 
.sidebar.collapsed .sidebar-campaign-panel .campaign-panel-value, 
.sidebar.collapsed .sidebar-campaign-panel .campaign-panel-type, 
.sidebar.collapsed .sidebar-campaign-panel select { 
  display: none !important; 
}

.sidebar.collapsed .sidebar-campaign-panel .campaign-panel-heading { 
  justify-content: center; 
  margin: 0 !important; 
}

.sidebar.collapsed .sidebar-campaign-panel .campaign-live-badge { 
  font-size: 0.58em !important; 
  padding: 5px 3px; 
  writing-mode: vertical-rl; 
}

.sidebar.collapsed .sidebar-campaign-panel .campaign-create-button.admin-only:not(.hidden) { 
  display: inline-flex !important; 
  width: 100% !important; 
  min-width: 0; 
  margin-top: 7px !important; 
  padding: 5px 0; 
  font-size: 0; 
}

.sidebar.collapsed .sidebar-campaign-panel .campaign-create-button.admin-only:not(.hidden)::before { 
  content: '+'; 
  font-size: 1rem; 
  font-weight: 800; 
}

.allotment-page-heading { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 18px; 
  margin-bottom: 16px; 
  padding: 20px 24px; 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.allotment-page-heading:hover {
  box-shadow: var(--shadow-card);
}

.allotment-page-heading h2 { 
  margin: 3px 0 4px; 
}

.allotment-page-heading p { 
  margin: 0; 
  color: var(--text-muted); 
  font-size: 0.85em; 
}

.allotment-eyebrow { 
  color: var(--primary); 
  font-size: 0.68em; 
  font-weight: 800; 
  letter-spacing: 0.14em; 
}

.allotment-live-card { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  min-width: 240px; 
  padding: 12px 14px; 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-sm); 
  box-shadow: var(--shadow-subtle);
  transition: all var(--transition-base);
}

@media (max-width: 768px) {
  .allotment-page-heading { 
    align-items: stretch; 
    flex-direction: column; 
    padding: 15px; 
  }
  .allotment-live-card { 
    min-width: 0; 
    width: 100%; 
  }
}

.allotment-live-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.allotment-live-dot { 
  width: 10px; 
  height: 10px; 
  flex: 0 0 auto; 
  border-radius: 50%; 
  background: var(--success); 
  box-shadow: 0 0 0 4px var(--success-bg);
  animation: pulse-glow 2s infinite;
}

.allotment-live-card div { 
  min-width: 0; 
  flex: 1; 
}

.allotment-live-card small, 
.allotment-live-card strong { 
  display: block; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.allotment-live-card small { 
  color: var(--text-muted); 
  font-size: 0.62em; 
  font-weight: 800; 
  letter-spacing: 0.1em; 
}

.allotment-live-card strong { 
  margin-top: 3px; 
  color: var(--text-main); 
  font-size: 0.88em; 
}

/* --- USER PROFILE --- */
.user-profile { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 0.9em; 
  font-weight: 600; 
  flex-direction: row; 
}

.user-avatar { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  background: var(--primary); 
  color: var(--primary-btn-text, #ffffff) !important; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 700; 
  flex-shrink: 0; 
  overflow: hidden;
  transition: transform var(--transition-fast);
}

.user-avatar:hover {
  transform: scale(1.08);
}

.theme-dot { 
  width: 34px; 
  height: 34px; 
  border-radius: 50%; 
  cursor: pointer; 
  border: 2.5px solid transparent; 
  transition: all var(--transition-fast); 
  flex-shrink: 0;
}

.theme-dot:hover { 
  transform: scale(1.18); 
  border-color: var(--text-main);
  box-shadow: var(--shadow-subtle);
}

/* --- LOGIN OVERLAY --- */
/* secondary login overlay definition superseded by main #loginOverlay */

#loginOverlay img#loginLogo {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* --- CUSTOMER LOGIN TOGGLE --- */
#customerLoginSection {
  border-top: 1px solid var(--border-color);
  margin-top: 16px;
  padding-top: 14px;
}

.customer-login-section.hidden { 
  display: none !important; 
}

.toggle-customer-login {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.customer-login-show { 
  display: inline; 
}

.customer-login-hide { 
  display: none; 
}

.toggle-customer-login:hover .customer-login-show { 
  display: none; 
}

.toggle-customer-login:hover .customer-login-hide { 
  display: inline; 
}

#customerLoginBtn::after {
  content: " ";
}

/* --- 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;
  }
}

/* --- HIGH CONTRAST MODE --- */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000;
    --text-muted: #333;
  }
  
  .btn, .nav-item, .card {
    border-width: 2px;
  }
}

/* --- SELECTION --- */
::selection {
  background: var(--primary-light);
  color: var(--primary);
}

::-moz-selection {
  background: var(--primary-light);
  color: var(--primary);
}

/* --- SMOOTH SCROLL --- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --- IMAGE RENDERING --- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- FOCUS WITHIN FOR FORMS --- */
.form-group:focus-within {
  transform: translateY(-1px);
}

/* --- SKELETON LOADING --- */
.skeleton {
  background: var(--border-color); opacity: 0.6;
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* --- ENHANCED HOVER STATES --- */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
  
  .card:hover {
    transform: translateY(-3px);
  }
  
  .nav-item:hover {
    transform: translateX(3px);
  }
}

/* --- TOUCH DEVICE OPTIMIZATIONS --- */
@media (hover: none) {
  .btn:active {
    transform: scale(0.97);
  }
  
  .nav-item:active {
    background: var(--primary-light);
  }
}
@media (hover: hover) and (pointer: coarse) { 
}


/* --- MY PAYSLIPS LETTER --- */
.payslip-letter {
  line-height: 1.65;
  color: var(--text-main);
  max-width: 760px;
}
.payslip-letter h4 {
  margin: 18px 0 6px;
  color: var(--primary);
  font-size: 0.95em;
}
.payslip-letter ul {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.payslip-letter li {
  margin: 2px 0;
}
.payslip-letter .letter-signature {
  margin-top: 26px;
}
.payslip-letter .letter-signature p {
  margin: 2px 0;
}

/* --- PAYROLL STAFF SEARCH DROPDOWN & CONTROLS VIEWABILITY --- */
.payroll-profile-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2fr);
  gap: 22px;
}

.payroll-profile-staff-list {
  max-height: 620px;
  overflow: auto;
  margin-top: 8px;
  border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
}

.payroll-profile-staff-list button {
  display: block;
  width: 100%;
  padding: 10px 8px;
  color: var(--text-main);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
  cursor: pointer;
}

.payroll-profile-staff-list button:hover,
.payroll-profile-staff-list button.active {
  background: var(--bg-body);
  box-shadow: inset 3px 0 var(--primary, #197a5a);
}

.payroll-profile-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.payroll-component-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) minmax(115px, 1fr) minmax(90px, 0.8fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
}

.payroll-component-row .form-control {
  min-width: 0;
}

@media (max-width: 760px) {
  .payroll-profile-layout {
    grid-template-columns: 1fr;
  }

  .payroll-profile-staff-list {
    max-height: 230px;
  }

  .payroll-profile-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .payroll-component-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .payroll-component-row [data-component-value] {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

.payroll-controls-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.payroll-controls-row label {
  color: #cbd5e1 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

#payrollEffectiveFrom {
  width: 145px !important;
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  background: #171a1f !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#payrollEffectiveFrom:focus {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--ap-accent-rgb), 0.22) !important;
}

.payroll-staff-search-dropdown {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}

#payrollStaffDropdownTrigger {
  height: 34px !important;
  min-width: 190px !important;
  max-width: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 12px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  gap: 8px !important;
  background: #171a1f !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.18s ease !important;
}

#payrollStaffDropdownTrigger:hover,
#payrollStaffDropdownTrigger:focus {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--ap-accent-rgb), 0.22) !important;
  color: #ffffff !important;
}

#payrollStaffDropdownSelectedLabel {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

#payrollStaffDropdownMenu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  width: 320px !important;
  background: #1c2027 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 20px rgba(var(--ap-accent-rgb), 0.1) !important;
  z-index: 100050 !important;
  overflow: hidden !important;
  animation: payrollMenuIn 0.15s ease-out;
}

@keyframes payrollMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.payroll-staff-search-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #14171d !important;
}

#payrollStaffSearch {
  background: #0f1216 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f8fafc !important;
  border-radius: 6px !important;
  padding: 5px 28px 5px 10px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}

#payrollStaffSearch::placeholder {
  color: #94a3b8 !important;
}

#payrollStaffSearch:focus {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--ap-accent-rgb), 0.25) !important;
}

#payrollStaffSearchBtn {
  font-size: 0.95rem !important;
  opacity: 0.85;
  transition: opacity 0.15s;
}

#payrollStaffSearchBtn:hover {
  opacity: 1;
}

#payrollStaffSearchClearBtn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 0 10px !important;
  height: 30px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

#payrollStaffSearchClearBtn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

#payrollStaffDropdownList {
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}

#payrollStaffDropdownList::-webkit-scrollbar {
  width: 6px;
}
#payrollStaffDropdownList::-webkit-scrollbar-track {
  background: transparent;
}
#payrollStaffDropdownList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.payroll-staff-dropdown-item {
  padding: 9px 14px !important;
  cursor: pointer !important;
  font-size: 0.84rem !important;
  display: flex;
  flex-direction: column !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 3px solid transparent !important;
  transition: all 0.15s ease !important;
  color: #f8fafc !important;
  background: transparent;
}

.payroll-staff-dropdown-item.hidden {
  display: none !important;
}

.payroll-staff-dropdown-item:last-child {
  border-bottom: none !important;
}

.payroll-staff-dropdown-item:hover,
.payroll-staff-dropdown-item.active {
  background: rgba(var(--ap-accent-rgb), 0.14) !important;
  border-left-color: var(--ap-accent) !important;
}

.payroll-staff-dropdown-item .staff-name {
  font-weight: 600 !important;
  color: #f8fafc !important;
  font-size: 0.86rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.payroll-staff-dropdown-item:hover .staff-name {
  color: var(--ap-accent-hover) !important;
}

.payroll-staff-dropdown-item .staff-sub {
  font-size: 0.74rem !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
}

#payrollSaveAllProfiles {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  padding: 0 16px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  margin: 0 !important;
  line-height: 34px !important;
  box-shadow: 0 4px 14px rgba(var(--ap-accent-rgb), 0.25) !important;
}

/* Light theme overrides */
body.theme-light #payrollEffectiveFrom,
body:not(.theme-dark):not(.theme-apinex) #payrollEffectiveFrom {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-light #payrollStaffDropdownTrigger,
body:not(.theme-dark):not(.theme-apinex) #payrollStaffDropdownTrigger {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-light #payrollStaffDropdownSelectedLabel,
body:not(.theme-dark):not(.theme-apinex) #payrollStaffDropdownSelectedLabel {
  color: #1e293b !important;
}

body.theme-light #payrollStaffDropdownMenu,
body:not(.theme-dark):not(.theme-apinex) #payrollStaffDropdownMenu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
}

body.theme-light .payroll-staff-search-header,
body:not(.theme-dark):not(.theme-apinex) .payroll-staff-search-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-light #payrollStaffSearch,
body:not(.theme-dark):not(.theme-apinex) #payrollStaffSearch {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-light .payroll-staff-dropdown-item,
body:not(.theme-dark):not(.theme-apinex) .payroll-staff-dropdown-item {
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

body.theme-light .payroll-staff-dropdown-item .staff-name,
body:not(.theme-dark):not(.theme-apinex) .payroll-staff-dropdown-item .staff-name {
  color: #0f172a !important;
}

body.theme-light .payroll-staff-dropdown-item .staff-sub,
body:not(.theme-dark):not(.theme-apinex) .payroll-staff-dropdown-item .staff-sub {
  color: #64748b !important;
}

body.theme-light .payroll-controls-row label,
body:not(.theme-dark):not(.theme-apinex) .payroll-controls-row label {
  color: #475569 !important;
}

/* ========================================================
   MULTI-COLORED 1PX BORDERS FOR CARDS (NO GRADIENTS)
   ======================================================== */
.card-border-blue,
.grid-2 > .card:nth-child(6n+1),
.grid-3 > .card:nth-child(6n+1),
.grid-4 > .card:nth-child(6n+1),
.grid-auto > .card:nth-child(6n+1),
.stats-grid > .card:nth-child(6n+1),
.stats-row > .card:nth-child(6n+1),
.metric-grid > .card:nth-child(6n+1),
.dashboard-grid > .card:nth-child(6n+1),
.advanced-metrics-grid > .card:nth-child(6n+1),
.advanced-metrics-grid > div:nth-child(6n+1),
.kpi-grid > .kpi-card:nth-child(6n+1),
.kpi-grid > div:nth-child(6n+1),
.fee-summary > .fee-summary-card:nth-child(6n+1),
.fee-summary-card.total,
div[style*="grid"] > .card:nth-child(6n+1),
div[style*="grid-template-columns"] > .card:nth-child(6n+1) {
  border: 1px solid #3b82f6 !important;
}

.card-border-emerald,
.grid-2 > .card:nth-child(6n+2),
.grid-3 > .card:nth-child(6n+2),
.grid-4 > .card:nth-child(6n+2),
.grid-auto > .card:nth-child(6n+2),
.stats-grid > .card:nth-child(6n+2),
.stats-row > .card:nth-child(6n+2),
.metric-grid > .card:nth-child(6n+2),
.dashboard-grid > .card:nth-child(6n+2),
.advanced-metrics-grid > .card:nth-child(6n+2),
.advanced-metrics-grid > div:nth-child(6n+2),
.kpi-grid > .kpi-card:nth-child(6n+2),
.kpi-grid > div:nth-child(6n+2),
.fee-summary > .fee-summary-card:nth-child(6n+2),
.fee-summary-card.collected,
div[style*="grid"] > .card:nth-child(6n+2),
div[style*="grid-template-columns"] > .card:nth-child(6n+2) {
  border: 1px solid #10b981 !important;
}

.card-border-amber,
.grid-2 > .card:nth-child(6n+3),
.grid-3 > .card:nth-child(6n+3),
.grid-4 > .card:nth-child(6n+3),
.grid-auto > .card:nth-child(6n+3),
.stats-grid > .card:nth-child(6n+3),
.stats-row > .card:nth-child(6n+3),
.metric-grid > .card:nth-child(6n+3),
.dashboard-grid > .card:nth-child(6n+3),
.advanced-metrics-grid > .card:nth-child(6n+3),
.advanced-metrics-grid > div:nth-child(6n+3),
.kpi-grid > .kpi-card:nth-child(6n+3),
.kpi-grid > div:nth-child(6n+3),
.fee-summary > .fee-summary-card:nth-child(6n+3),
.fee-summary-card.pending,
div[style*="grid"] > .card:nth-child(6n+3),
div[style*="grid-template-columns"] > .card:nth-child(6n+3) {
  border: 1px solid #f59e0b !important;
}

.card-border-lime,
.grid-2 > .card:nth-child(6n+4),
.grid-3 > .card:nth-child(6n+4),
.grid-4 > .card:nth-child(6n+4),
.grid-auto > .card:nth-child(6n+4),
.stats-grid > .card:nth-child(6n+4),
.stats-row > .card:nth-child(6n+4),
.metric-grid > .card:nth-child(6n+4),
.dashboard-grid > .card:nth-child(6n+4),
.advanced-metrics-grid > .card:nth-child(6n+4),
.advanced-metrics-grid > div:nth-child(6n+4),
.kpi-grid > .kpi-card:nth-child(6n+4),
.kpi-grid > div:nth-child(6n+4),
.fee-summary > .fee-summary-card:nth-child(6n+4),
.fee-summary-card.overdue,
div[style*="grid"] > .card:nth-child(6n+4),
div[style*="grid-template-columns"] > .card:nth-child(6n+4) {
  border: 1px solid #84cc16 !important;
}

.card-border-rose,
.grid-2 > .card:nth-child(6n+5),
.grid-3 > .card:nth-child(6n+5),
.grid-4 > .card:nth-child(6n+5),
.grid-auto > .card:nth-child(6n+5),
.stats-grid > .card:nth-child(6n+5),
.stats-row > .card:nth-child(6n+5),
.metric-grid > .card:nth-child(6n+5),
.dashboard-grid > .card:nth-child(6n+5),
.advanced-metrics-grid > .card:nth-child(6n+5),
.advanced-metrics-grid > div:nth-child(6n+5),
.kpi-grid > .kpi-card:nth-child(6n+5),
.kpi-grid > div:nth-child(6n+5),
.fee-summary > .fee-summary-card:nth-child(6n+5),
div[style*="grid"] > .card:nth-child(6n+5),
div[style*="grid-template-columns"] > .card:nth-child(6n+5) {
  border: 1px solid #f43f5e !important;
}

.card-border-cyan,
.grid-2 > .card:nth-child(6n+6),
.grid-3 > .card:nth-child(6n+6),
.grid-4 > .card:nth-child(6n+6),
.grid-auto > .card:nth-child(6n+6),
.stats-grid > .card:nth-child(6n+6),
.stats-row > .card:nth-child(6n+6),
.metric-grid > .card:nth-child(6n+6),
.dashboard-grid > .card:nth-child(6n+6),
.advanced-metrics-grid > .card:nth-child(6n+6),
.advanced-metrics-grid > div:nth-child(6n+6),
.kpi-grid > .kpi-card:nth-child(6n+6),
.kpi-grid > div:nth-child(6n+6),
.fee-summary > .fee-summary-card:nth-child(6n+6),
div[style*="grid"] > .card:nth-child(6n+6),
div[style*="grid-template-columns"] > .card:nth-child(6n+6) {
  border: 1px solid #06b6d4 !important;
}

/* Standalone card border helper classes */
.card-border-royal { border: 1px solid #2563eb !important; }
.card-border-teal { border: 1px solid #14b8a6 !important; }
.card-border-orange { border: 1px solid #f97316 !important; }

/* SuperAdmin panel metric cards -------------------------------------------------
   The markup carries .sasa-card-* modifier classes but no CSS was ever defined,
   so every card fell back to the same default border. Give each its own 1px
   border colour (and a matching icon tint) so the panel reads as distinct cards. */
.saas-metric-card.sasa-card-teal  { border: 1px solid #14b8a6 !important; }
.saas-metric-card.sasa-card-blue  { border: 1px solid #3b82f6 !important; }
.saas-metric-card.sasa-card-green { border: 1px solid #10b981 !important; }
.saas-metric-card.sasa-card-amber { border: 1px solid #f59e0b !important; }

.saas-metric-icon-box.box-teal  { background: rgba(20, 184, 166, 0.14) !important; color: #14b8a6 !important; }
.saas-metric-icon-box.box-blue  { background: rgba(59, 130, 246, 0.14) !important; color: #3b82f6 !important; }
.saas-metric-icon-box.box-green { background: rgba(16, 185, 129, 0.14) !important; color: #10b981 !important; }
.saas-metric-icon-box.box-amber { background: rgba(245, 158, 11, 0.14) !important; color: #f59e0b !important; }

/* SuperAdmin / overview rows also follow the app-wide multi-coloured 1px border
   cycle. Cards that carry an explicit .sasa-card-* colour are skipped so their
   hand-picked colour wins; everything else gets blue/emerald/amber/lime/rose/cyan
   in turn, so a row of 3 shows 3 colours and a row of 6 shows 6. */
.metrics-overview > .metric-card:nth-child(6n+1),
.metrics-overview > .card:nth-child(6n+1),
.metrics-overview > .saas-metric-card:not([class*="sasa-card-"]):nth-child(6n+1) {
  border: 1px solid #3b82f6 !important;
}
.metrics-overview > .metric-card:nth-child(6n+2),
.metrics-overview > .card:nth-child(6n+2),
.metrics-overview > .saas-metric-card:not([class*="sasa-card-"]):nth-child(6n+2) {
  border: 1px solid #10b981 !important;
}
.metrics-overview > .metric-card:nth-child(6n+3),
.metrics-overview > .card:nth-child(6n+3),
.metrics-overview > .saas-metric-card:not([class*="sasa-card-"]):nth-child(6n+3) {
  border: 1px solid #f59e0b !important;
}
.metrics-overview > .metric-card:nth-child(6n+4),
.metrics-overview > .card:nth-child(6n+4),
.metrics-overview > .saas-metric-card:not([class*="sasa-card-"]):nth-child(6n+4) {
  border: 1px solid #84cc16 !important;
}
.metrics-overview > .metric-card:nth-child(6n+5),
.metrics-overview > .card:nth-child(6n+5),
.metrics-overview > .saas-metric-card:not([class*="sasa-card-"]):nth-child(6n+5) {
  border: 1px solid #f43f5e !important;
}
.metrics-overview > .metric-card:nth-child(6n+6),
.metrics-overview > .card:nth-child(6n+6),
.metrics-overview > .saas-metric-card:not([class*="sasa-card-"]):nth-child(6n+6) {
  border: 1px solid #06b6d4 !important;
}

/* ========================================================
   ONLINE FORMS & FORM BUILDER ENHANCED STYLING
   ======================================================== */
.form-builder-card {
  transition: all 0.25s ease;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.form-builder-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.form-field-card-editor {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.form-field-card-editor:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.form-field-card-editor:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.theme-swatch-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  display: inline-block;
}

.theme-swatch-btn:hover {
  transform: scale(1.15);
}

.theme-swatch-btn.active {
  box-shadow: 0 0 0 2.5px var(--text-main);
  transform: scale(1.1);
}

/* Document Vault Windows-style View Mode Switcher */
.btn-vault-view {
  background: transparent;
  color: var(--text-muted);
  border: none;
  transition: all 0.15s ease;
}

.btn-vault-view:hover {
  color: var(--text-main);
  background: rgba(125, 125, 125, 0.12);
}

.btn-vault-view.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   ID Card Designer & Canvas Styles
   ========================================================================== */
.id-palette-item:hover {
  border-color: var(--primary) !important;
  background: var(--bg-body) !important;
  transform: translateX(3px);
}

.canvas-badge {
  transition: box-shadow 0.15s ease, outline 0.15s ease;
}

.canvas-badge:hover {
  outline: 1.5px dashed #0284c7 !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.canvas-badge.selected {
  outline: 2px dashed #0284c7 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

#idCardCanvas.landscape-canvas {
  width: 538px;
  height: 340px;
}

#idCardCanvas.portrait-canvas {
  width: 340px;
  height: 538px;
}

/* --- ID CARD CANVAS 8-DIRECTIONAL RESIZE HANDLES (ALL SIDES & CORNERS) --- */
.id-card-handle,
.id-card-corner-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #0284c7;
  border: 1.5px solid #ffffff;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  z-index: 30;
  pointer-events: auto;
  box-sizing: border-box;
}
.id-card-handle:hover,
.id-card-corner-handle:hover {
  background: #0369a1;
  transform: scale(1.35);
}

/* 4 Corners */
.id-card-handle.handle-tl, .id-card-corner-handle.corner-tl {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}
.id-card-handle.handle-tr, .id-card-corner-handle.corner-tr {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}
.id-card-handle.handle-bl, .id-card-corner-handle.corner-bl {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}
.id-card-handle.handle-br, .id-card-corner-handle.corner-br {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

/* 4 Edges / Sides */
.id-card-handle.handle-t {
  top: -4px;
  left: calc(50% - 4px);
  cursor: ns-resize;
}
.id-card-handle.handle-b {
  bottom: -4px;
  left: calc(50% - 4px);
  cursor: ns-resize;
}
.id-card-handle.handle-l {
  top: calc(50% - 4px);
  left: -4px;
  cursor: ew-resize;
}
.id-card-handle.handle-r {
  top: calc(50% - 4px);
  right: -4px;
  cursor: ew-resize;
}






/* ============================================================
   LANDING PAGE STYLES (MERGED)
   ============================================================ */

/**
 * Landing Page Stylesheet - APInex Design Language (REFINED)
 * Dark-tech SaaS aesthetic: neon emerald accents, ambient radial glows, glassmorphism.
 * Improvements: more whitespace, refined shadows, consistent spacing, better hierarchy.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   APINEX DESIGN TOKENS & CANVAS SETUP
   ============================================================ */
#landingPageContainer {
  --ap-bg: #15181d;
  --ap-bg-dark: #0f1116;
  --ap-bg-elevated: #1e2229;
  --ap-surface: #262b33;
  --ap-surface-hover: #2f343e;
  --ap-surface-active: #363c47;
  --ap-border: rgba(255, 255, 255, 0.07);
  --ap-border-strong: rgba(255, 255, 255, 0.11);
  --ap-text: #e9ecef;
  --ap-text-primary: #f8fafc;
  --ap-text-secondary: #a5acb8;
  --ap-text-muted: #747c88;
  --ap-blue: #60a5fa;
  --ap-amber: #fbbf24;
  --ap-cyan: #38bdf8;
  --ap-orange: #fb923c;
  --ap-radius-sm: 8px;
  --ap-radius: 12px;
  --ap-radius-lg: 16px;
  --ap-radius-xl: 20px;
  --ap-shadow: 0 6px 24px rgba(0, 0, 0, 0.30);
  --ap-shadow-lg: 0 18px 56px rgba(0, 0, 0, 0.45);
  --ap-font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ap-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #15181d !important;
  color: #e9ecef !important;
  font-family: var(--ap-font) !important;
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Radial Glow Lighting Layer */
#landingPageContainer::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2400px;
  background:
    radial-gradient(1200px 700px at 7% 0%, rgba(var(--ap-accent-rgb), 0.14), transparent 58%),
    radial-gradient(1000px 620px at 96% 3%, rgba(96, 165, 250, 0.11), transparent 54%),
    radial-gradient(840px 540px at 88% 20%, rgba(251, 146, 60, 0.07), transparent 56%),
    radial-gradient(700px 440px at 34% 6%, rgba(234, 179, 8, 0.05), transparent 54%),
    radial-gradient(680px 420px at 50% 100%, rgba(var(--ap-accent-rgb), 0.05), transparent 56%),
    linear-gradient(180deg, #1f242b 0%, #15181d 48%);
  z-index: 0;
}

#landingPageContainer * {
  box-sizing: border-box;
}

/* SVG ICONS - uniform sizing */
#landingPageContainer .svg-icon,
.svg-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
#landingPageContainer .svg-icon.xs,
.svg-icon.xs { width: 13px; height: 13px; }
#landingPageContainer .svg-icon.sm,
.svg-icon.sm { width: 16px; height: 16px; }
#landingPageContainer .svg-icon.md,
.svg-icon.md { width: 20px; height: 20px; }
#landingPageContainer .svg-icon.lg,
.svg-icon.lg { width: 24px; height: 24px; }
#landingPageContainer .svg-icon.bolt,
.svg-icon.bolt { fill: currentColor; stroke: none; }

.ap-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   TOP NAVIGATION BAR (improved glassmorphism)
   ============================================================ */
#landingPageContainer .ap-nav,
#landingPageContainer .ap-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 72px;
  background: rgba(18, 21, 27, 0.86) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ap-border);
  display: flex;
  align-items: center;
  width: 100%;
}
#landingPageContainer .ap-nav-inner,
#landingPageContainer .ap-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#landingPageContainer .ap-nav-brand,
#landingPageContainer .ap-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
}
#landingPageContainer .ap-nav-logo,
#landingPageContainer .ap-brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 4px 16px rgba(var(--ap-accent-rgb), 0.22);
  border: 1px solid var(--ap-border-accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#landingPageContainer .ap-nav-brand:hover .ap-nav-logo,
#landingPageContainer .ap-brand:hover .ap-brand-logo {
  transform: scaled(1.04);
  box-shadow: 0 6px 22px rgba(var(--ap-accent-rgb), 0.30);
}
#landingPageContainer .ap-nav-brand-text {
  display: flex;
  flex-direction: column;
}
#landingPageContainer .ap-brand-title {
  font-size: 1.18rem;
  font-weight: 750;
  color: #f8fafc;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#landingPageContainer .ap-brand-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--ap-accent-hover);
  letter-spacing: 0.08em;
}
#landingPageContainer .ap-nav-status,
#landingPageContainer .ap-pill,
#landingPageContainer .ap-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--ap-accent-soft);
  border: 1px solid var(--ap-border-accent);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ap-accent-hover);
}
#landingPageContainer .ap-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ap-accent);
  box-shadow: 0 0 10px var(--ap-accent);
  animation: ap-pulse 2.4s infinite;
}
@keyframes ap-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.82); }
}
#landingPageContainer .ap-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
#landingPageContainer .ap-nav-links a {
  color: #a5acb8 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.18s ease;
}
#landingPageContainer .ap-nav-links a:hover {
  color: #ffffff !important;
}
#landingPageContainer .ap-nav-actions,
#landingPageContainer .ap-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   APINEX BUTTON STYLES (improved)
   ============================================================ */
#landingPageContainer .ap-btn,
#landingPageContainer .ap-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  height: 44px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--ap-radius-sm);
  background: var(--ap-accent) !important;
  color: #0c1a11 !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.4), 0 8px 22px rgba(var(--ap-accent-rgb), 0.26) !important;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}
#landingPageContainer .ap-btn-primary:hover {
  background: var(--ap-accent-hover) !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.55), 0 12px 30px rgba(var(--ap-accent-rgb), 0.36) !important;
  transform: translateY(-2px);
}
#landingPageContainer .ap-btn-primary:active {
  transform: translateY(0) scale(0.99);
}
#landingPageContainer .ap-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--ap-radius-sm);
  background: #262b33 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}
#landingPageContainer .ap-btn-secondary:hover {
  background: #2f3540 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}
#landingPageContainer .ap-btn .svg-icon,
#landingPageContainer .ap-btn-primary .svg-icon,
#landingPageContainer .ap-btn-secondary .svg-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  flex-shrink: 0;
}

/* ============================================================
   HERO SECTION (improved: more breathing room, taller)
   ============================================================ */
#landingPageContainer .ap-hero {
  padding: 110px 0 80px;
  text-align: center;
  position: relative;
  z-index: 1;
}
#landingPageContainer .ap-pill-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 600;
  color: #a5acb8;
  margin-bottom: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#landingPageContainer .ap-pill-kicker:hover {
  background: rgba(var(--ap-accent-rgb), 0.1);
  border-color: rgba(var(--ap-accent-rgb), 0.35);
  color: var(--ap-accent-hover);
  transform: translateY(-1px);
}
#landingPageContainer .ap-pill-highlight { color: var(--ap-accent-hover); font-weight: 750; }
#landingPageContainer .ap-hero-title,
#landingPageContainer .ap-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.04em;
  max-width: 1040px;
  margin: 0 auto 24px;
  color: #f8fafc;
}
#landingPageContainer .ap-gradient-text,
#landingPageContainer .ap-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--ap-accent) 20%, #60a5fa 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
#landingPageContainer .ap-hero-desc,
#landingPageContainer .ap-hero p.lead {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  color: #a5acb8;
  max-width: 820px;
  margin: 0 auto 42px;
  line-height: 1.7;
}
#landingPageContainer .ap-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

/* Stat Strip */
#landingPageContainer .ap-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 14px;
  background: rgba(24, 28, 35, 0.8);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-xl);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ap-shadow-lg);
}
#landingPageContainer .ap-stat-item {
  padding: 12px 16px;
  text-align: center;
  border-right: 1px solid var(--ap-border);
}
#landingPageContainer .ap-stat-item:last-child { border-right: none; }
#landingPageContainer .ap-stat-num,
#landingPageContainer .ap-stat-val {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #ffffff 40%, #9be7b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--ap-font);
}
#landingPageContainer .ap-stat-label {
  font-size: 11.5px;
  color: #747c88;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 650;
  margin-top: 4px;
}

/* ============================================================
   SECTION HEADERS (improved)
   ============================================================ */
#landingPageContainer .ap-section {
  padding: 90px 0;
  position: relative;
  z-index: 1;
}
#landingPageContainer .ap-section-header,
#landingPageContainer .ap-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
#landingPageContainer .ap-section-tag,
#landingPageContainer .ap-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 800;
  color: var(--ap-accent-hover);
  margin-bottom: 12px;
  display: block;
}
#landingPageContainer .ap-section-title,
#landingPageContainer .ap-section-head h2 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  color: #f8fafc;
}
#landingPageContainer .ap-section-desc,
#landingPageContainer .ap-section-head p {
  color: #a5acb8;
  font-size: 16px;
  line-height: 1.65;
}

/* ============================================================
   SECTOR SHOWCASE (improved cards)
   ============================================================ */
#landingPageContainer .ap-sector-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
#landingPageContainer .ap-sector-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ap-border) !important;
  color: #a5acb8 !important;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
#landingPageContainer .ap-sector-tab .svg-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke-width: 2.2;
}
#landingPageContainer .ap-sector-tab:hover {
  background: #262b33 !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
#landingPageContainer .ap-sector-tab.is-active {
  background: rgba(var(--ap-accent-rgb), 0.14) !important;
  border-color: rgba(var(--ap-accent-rgb), 0.45) !important;
  color: #9be7b5 !important;
  box-shadow: 0 0 22px rgba(var(--ap-accent-rgb), 0.16) !important;
}
#landingPageContainer .ap-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
#landingPageContainer .ap-sector-card {
  background: #1f232b;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-xl);
  box-shadow: var(--ap-shadow);
  padding: 42px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#landingPageContainer .ap-sector-card::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ap-accent-rgb), 0.13), transparent 70%);
  pointer-events: none;
}
#landingPageContainer .ap-sector-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  border: 1px solid currentColor;
}
#landingPageContainer .ap-sector-title,
#landingPageContainer .ap-sector-info h3 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: #f8fafc;
}
#landingPageContainer .ap-sector-text,
#landingPageContainer .ap-sector-info p {
  color: #a5acb8;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 26px;
}
#landingPageContainer .ap-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  gap: 14px;
}
#landingPageContainer .ap-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: #e9ecef;
  line-height: 1.55;
}
#landingPageContainer .ap-feature-list li svg {
  color: var(--ap-accent-hover);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* ============================================================
   TERMINAL BOX & PREVIEWS (improved)
   ============================================================ */
#landingPageContainer .ap-terminal-box,
#landingPageContainer .ap-terminal-wrap,
#landingPageContainer .ap-mock-preview {
  background: #12141a !important;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  overflow: hidden;
  box-shadow: var(--ap-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#landingPageContainer .ap-term-header,
#landingPageContainer .ap-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  background: #101216;
  border-bottom: 1px solid var(--ap-border);
}
#landingPageContainer .ap-term-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
#landingPageContainer .ap-term-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
#landingPageContainer .ap-term-filename {
  font-family: var(--ap-mono);
  font-size: 12px;
  color: #94a3b8;
}
#landingPageContainer .ap-term-tabs,
#landingPageContainer .ap-terminal-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
#landingPageContainer .ap-term-tab {
  padding: 7px 16px;
  font-size: 12px;
  font-family: var(--ap-mono);
  background: transparent !important;
  color: #94a3b8 !important;
  border: 1px solid transparent !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}
#landingPageContainer .ap-term-tab:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
#landingPageContainer .ap-term-tab.is-active {
  background: rgba(var(--ap-accent-rgb), 0.12) !important;
  color: var(--ap-accent-hover) !important;
  border-color: rgba(var(--ap-accent-rgb), 0.35) !important;
}
#landingPageContainer .ap-term-status {
  font-size: 11.5px;
  font-family: var(--ap-mono);
  color: var(--ap-accent-hover);
  display: flex;
  align-items: center;
  gap: 6px;
}
#landingPageContainer .ap-term-body,
#landingPageContainer .ap-terminal-body,
#landingPageContainer pre.ap-term-body {
  padding: 26px;
  font-family: var(--ap-mono) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ============================================================
   CAPABILITIES GRID (improved)
   ============================================================ */
#landingPageContainer .ap-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
#landingPageContainer .ap-card,
#landingPageContainer .docs-choice-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
#landingPageContainer .docs-choice-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
#landingPageContainer .ap-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ap-accent);
}
#landingPageContainer .ap-card:hover,
#landingPageContainer .docs-choice-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), var(--ap-shadow-glow);
}
#landingPageContainer .ap-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 20px;
  border: 1px solid var(--ap-border);
  flex-shrink: 0;
}
#landingPageContainer .ap-card-icon .svg-icon,
#landingPageContainer .ap-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
#landingPageContainer .ap-card-title,
#landingPageContainer .ap-card h3 {
  font-size: 1.22rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: #f8fafc;
}
#landingPageContainer .ap-card-desc,
#landingPageContainer .ap-card p {
  color: #a5acb8;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 18px;
}
#landingPageContainer .ap-card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#landingPageContainer .ap-pill-sm {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ap-border);
  color: #94a3b8;
}

/* ============================================================
   SECURITY TRUST CARDS (improved)
   ============================================================ */
#landingPageContainer .ap-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
#landingPageContainer .ap-trust-card {
  text-align: left;
  padding: 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  transition: all 0.22s ease;
}
#landingPageContainer .ap-trust-card:hover {
  border-color: rgba(var(--ap-accent-rgb), 0.35);
  background: rgba(var(--ap-accent-rgb), 0.04);
  transform: translateY(-3px);
}
#landingPageContainer .ap-trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid var(--ap-border);
  flex-shrink: 0;
}
#landingPageContainer .ap-trust-icon .svg-icon,
#landingPageContainer .ap-trust-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
#landingPageContainer .ap-trust-title {
  font-size: 1.08rem;
  font-weight: 750;
  color: #f8fafc;
  margin-bottom: 8px;
}
#landingPageContainer .ap-trust-desc {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   FAQ ACCORDION (improved)
   ============================================================ */
#landingPageContainer .ap-faq-container,
#landingPageContainer .ap-faq-list {
  display: grid;
  gap: 14px;
}
#landingPageContainer .ap-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}
#landingPageContainer .ap-faq-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
#landingPageContainer .ap-faq-item summary {
  padding: 20px 26px;
  font-size: 16px;
  font-weight: 650;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}
#landingPageContainer .ap-faq-item summary::-webkit-details-marker { display: none; }
#landingPageContainer .ap-faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--ap-accent-hover);
}
#landingPageContainer .ap-faq-item[open] summary::after { content: "−"; }
#landingPageContainer .ap-faq-content {
  padding: 0 26px 24px;
  color: #a5acb8;
  font-size: 15px;
  line-height: 1.7;
}
#landingPageContainer .ap-faq-content strong { color: #f8fafc; }

/* ============================================================
   ALL SECTORS HORIZONTAL SCROLL
   ============================================================ */
#landingPageContainer .ap-sectors-scroll-section {
  padding-bottom: 60px;
}
#landingPageContainer .ap-sectors-scroll {
  position: relative;
  margin-top: 4px;
  padding: 8px 0 20px;
  overflow: hidden;
}
#landingPageContainer .ap-sectors-track {
  display: flex;
  width: max-content;
  padding: 4px 0;
  animation: apSectorsScroll 55s linear infinite;
  will-change: transform;
}
#landingPageContainer .ap-sectors-group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}
#landingPageContainer .ap-sectors-scroll:hover .ap-sectors-track,
#landingPageContainer .ap-sectors-scroll:focus-within .ap-sectors-track {
  animation-play-state: paused;
}
@keyframes apSectorsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  #landingPageContainer .ap-sectors-track { animation: none; }
}
#landingPageContainer .ap-marquee-card {
  flex: 0 0 auto;
  width: 250px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--ap-border);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s, box-shadow 0.24s;
}
#landingPageContainer .ap-marquee-card:hover {
  transform: translateY(-4px);
  border-color: var(--sector-accent, var(--ap-accent));
  box-shadow: 0 16px 34px -20px var(--sector-accent, var(--ap-accent));
}
#landingPageContainer .ap-marquee-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sector-accent, var(--ap-accent));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
#landingPageContainer .ap-marquee-name {
  font-size: 14.5px;
  font-weight: 750;
  color: #f8fafc;
  margin-bottom: 3px;
}
#landingPageContainer .ap-marquee-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: #a5acb8;
}

/* ============================================================
   SUBSCRIPTION PLANS (APInex Pricing)
   ============================================================ */
#landingPageContainer .ap-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
#landingPageContainer .ap-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ap-border);
  border-top: 1px solid var(--ap-plan-accent, var(--ap-accent));
  border-radius: var(--ap-radius-lg);
  overflow: hidden;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease,
    background 0.2s ease, box-shadow 0.24s ease;
}
#landingPageContainer .ap-plan-card:hover {
  transform: translateY(-6px);
  border-color: var(--ap-plan-accent, rgba(255, 255, 255, 0.18));
  border-top-color: var(--ap-plan-accent, var(--ap-accent));
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.45);
}
#landingPageContainer .ap-plan-bronze { --ap-plan-accent: #fb923c; }
#landingPageContainer .ap-plan-silver { --ap-plan-accent: #94a3b8; }
#landingPageContainer .ap-plan-gold { --ap-plan-accent: #fbbf24; }
#landingPageContainer .ap-plan-diamond { --ap-plan-accent: #38bdf8; }

#landingPageContainer .ap-plan-card.is-featured {
  background: radial-gradient(120% 120% at 50% 0%, rgba(251, 191, 36, 0.10), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(251, 191, 36, 0.35);
  border-top-color: #fbbf24;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), 0 0 32px rgba(251, 191, 36, 0.12);
}
#landingPageContainer .ap-plan-badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ap-border);
  color: var(--ap-plan-accent, var(--ap-accent));
}
#landingPageContainer .ap-plan-name {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  margin: 0;
}
#landingPageContainer .ap-plan-tagline {
  font-size: 13.5px;
  color: #a5acb8;
  line-height: 1.55;
  margin: 0;
  min-height: 42px;
}
#landingPageContainer .ap-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ap-font);
  font-size: 2.5rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f8fafc;
  margin-top: 4px;
}
#landingPageContainer .ap-plan-cur {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ap-plan-accent, var(--ap-accent));
}
#landingPageContainer .ap-plan-per {
  font-size: 0.88rem;
  font-weight: 500;
  color: #a5acb8;
}
#landingPageContainer .ap-plan-star {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  align-self: flex-start;
  color: var(--ap-plan-accent, var(--ap-accent-hover));
}
#landingPageContainer .ap-plan-validity {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ap-plan-accent, var(--ap-accent));
}
#landingPageContainer .ap-plan-features {
  list-style: none;
  padding: 16px 0 0;
  margin: 4px 0 0;
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--ap-border);
}
#landingPageContainer .ap-plan-features li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #cbd5e1;
}
#landingPageContainer .ap-plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ap-accent);
}
#landingPageContainer .ap-feature-star {
  color: var(--ap-plan-accent, var(--ap-accent-hover));
  font-weight: 800;
  margin-left: 2px;
}
#landingPageContainer .ap-plan-cta {
  margin-top: auto;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--ap-plan-accent, var(--ap-border-accent));
  background: transparent;
  color: #f8fafc;
  font-family: var(--ap-font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#landingPageContainer .ap-plan-cta:hover {
  background: var(--ap-plan-accent, var(--ap-accent));
  border-color: var(--ap-plan-accent, var(--ap-accent));
  color: #10141a;
}
#landingPageContainer .ap-pricing-note {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: #94a3b8;
}
#landingPageContainer .ap-pricing-note a {
  color: var(--ap-accent-hover);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
#landingPageContainer .ap-pricing-note a:hover { text-decoration: underline; }

/* ============================================================
   BOTTOM CTA BANNER & FOOTER (improved)
   ============================================================ */
#landingPageContainer .ap-cta-banner-wrap {
  padding: 50px 0 80px;
  position: relative;
  z-index: 1;
}
#landingPageContainer .ap-cta-banner {
  padding: 64px 44px;
  background: radial-gradient(130% 150% at 50% 0%, rgba(var(--ap-accent-rgb), 0.26), transparent 72%),
    linear-gradient(165deg, #242b35, #151920);
  border: 1px solid var(--ap-border-accent);
  border-radius: var(--ap-radius-xl);
  text-align: center;
  box-shadow: var(--ap-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#landingPageContainer .ap-cta-title {
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  color: #f8fafc;
}
#landingPageContainer .ap-cta-desc {
  color: #cbd5e1;
  font-size: 16.5px;
  max-width: 660px;
  margin: 0 auto 38px;
  line-height: 1.65;
}
#landingPageContainer .ap-cta-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#landingPageContainer .ap-footer {
  border-top: 1px solid var(--ap-border);
  padding: 52px 0 44px;
  background: #0d0f13;
  position: relative;
  z-index: 1;
}
#landingPageContainer .ap-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
#landingPageContainer .ap-footer-links {
  display: flex;
  gap: 26px;
}
#landingPageContainer .ap-footer-links a {
  color: #94a3b8 !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: color 0.18s;
}
#landingPageContainer .ap-footer-links a:hover { color: #ffffff !important; }

/* ============================================================
   LANDING POLISH & MOTION
   ============================================================ */

/* Nav: scrolled state */
#landingPageContainer .ap-nav.is-scrolled {
  height: 62px;
  background: rgba(15, 17, 22, 0.94) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  border-bottom-color: var(--ap-border-strong);
}

/* Hamburger toggle (hidden on desktop) */
#landingPageContainer .ap-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: var(--ap-radius-sm);
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--ap-border) !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#landingPageContainer .ap-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--ap-border-strong) !important;
}
#landingPageContainer .ap-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #e9ecef;
  transition: transform 0.28s var(--ap-ease), opacity 0.2s ease;
}
#landingPageContainer .ap-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#landingPageContainer .ap-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
#landingPageContainer .ap-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
#landingPageContainer .ap-mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px 22px;
  background: rgba(15, 17, 22, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ap-border-strong);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.26s var(--ap-ease), transform 0.26s var(--ap-ease);
}
#landingPageContainer .ap-nav.is-scrolled + .ap-mobile-menu { top: 62px; }
#landingPageContainer .ap-mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#landingPageContainer .ap-mobile-menu a {
  padding: 12px 4px;
  color: #cbd5e1 !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ap-border);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
#landingPageContainer .ap-mobile-menu a:hover { color: #ffffff !important; padding-left: 10px; }
#landingPageContainer .ap-mobile-menu .ap-btn-primary { margin-top: 14px; width: 100%; }

/* Nav link underline micro-interaction */
#landingPageContainer .ap-nav-links a { position: relative; padding-bottom: 2px; }
#landingPageContainer .ap-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--ap-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ap-ease);
}
#landingPageContainer .ap-nav-links a:hover::after,
#landingPageContainer .ap-nav-links a.is-active::after { transform: scaleX(1); }
#landingPageContainer .ap-nav-links a.is-active { color: #ffffff !important; }

/* Back to top */
#landingPageContainer .ap-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 998;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--ap-accent-rgb), 0.94) !important;
  color: #0c1a11 !important;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--ap-accent-rgb), 0.34);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.26s var(--ap-ease), transform 0.26s var(--ap-ease), background 0.2s ease;
}
#landingPageContainer .ap-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#landingPageContainer .ap-back-to-top:hover {
  background: var(--ap-accent-hover) !important;
  transform: translateY(-3px) scale(1.04);
}
#landingPageContainer .ap-back-to-top svg { width: 20px; height: 20px; }

/* Scroll reveal */
#landingPageContainer .ap-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s var(--ap-ease), translate 0.7s var(--ap-ease);
  will-change: opacity, translate;
}
#landingPageContainer .ap-reveal.ap-visible { opacity: 1; translate: none; }

/* Card hover micro-interactions */
#landingPageContainer .ap-card-icon,
#landingPageContainer .ap-trust-icon {
  transition: transform 0.3s var(--ap-ease), box-shadow 0.3s var(--ap-ease);
}
#landingPageContainer .ap-card:hover .ap-card-icon,
#landingPageContainer .ap-trust-card:hover .ap-trust-icon {
  transform: translateY(-3px) scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
#landingPageContainer .ap-sector-tab .svg-icon { transition: transform 0.28s var(--ap-ease); }
#landingPageContainer .ap-sector-tab:hover .svg-icon,
#landingPageContainer .ap-sector-tab.is-active .svg-icon { transform: scale(1.18); }
#landingPageContainer .ap-feature-list li { transition: transform 0.22s var(--ap-ease); }
#landingPageContainer .ap-feature-list li:hover { transform: translateX(5px); }
#landingPageContainer .ap-stat-item { transition: transform 0.24s var(--ap-ease); }
#landingPageContainer .ap-stat-item:hover { transform: translateY(-3px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #landingPageContainer .ap-reveal {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  #landingPageContainer *,
  #landingPageContainer *::before,
  #landingPageContainer *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   RESPONSIVE QUERIES
   ============================================================ */
@media (max-width: 960px) {
  #landingPageContainer .ap-nav-links { display: none; }
  #landingPageContainer .ap-nav-toggle { display: flex; }
  #landingPageContainer .ap-sector-card { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  #landingPageContainer .ap-grid-3, #landingPageContainer .ap-grid-4 { grid-template-columns: 1fr; }
  #landingPageContainer .ap-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  #landingPageContainer .ap-stat-strip { grid-template-columns: repeat(2, 1fr); }
  #landingPageContainer .ap-stat-item:nth-child(2) { border-right: none; }
}
@media (max-width: 640px) {
  #landingPageContainer .ap-container { padding: 0 20px; }
  #landingPageContainer .ap-hero { padding: 80px 0 56px; }
  #landingPageContainer .ap-hero-actions { flex-direction: column; align-items: stretch; }
  #landingPageContainer .ap-btn, #landingPageContainer .ap-btn-secondary { width: 100%; justify-content: center; }
  #landingPageContainer .ap-stat-strip { grid-template-columns: repeat(2, 1fr); padding: 16px 10px; }
  #landingPageContainer .ap-stat-item { border-right: none; border-bottom: 1px solid var(--ap-border); }
  #landingPageContainer .ap-stat-item:last-child { border-bottom: none; }
  #landingPageContainer .ap-faq-item summary { padding: 16px 20px; }
  #landingPageContainer .ap-pricing-grid { grid-template-columns: 1fr; }
  #landingPageContainer .ap-plan-card { padding: 26px 22px 24px; }
}

/* Default CRM Login Overlay */
#loginOverlay.hidden,
#loginOverlay[style*="display: none"],
#loginOverlay[style*="display:none"] {
  display: none !important;
}

.ap-modal-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: all 0.18s ease !important;
  z-index: 100 !important;
  box-shadow: none !important;
  transform: none !important;
}
.ap-modal-close-btn::before { display: none !important; }
.ap-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  transform: scale(1.08) !important;
}
#legalModalOverlay.ap-theme-login {
  /* The APInex design tokens live on #landingPageContainer, but the legal modal
     sits OUTSIDE it. Re-declare the core surface tokens here so the legal box is
     always the default dark APInex surface — never the visitor's app theme.
     Accent tokens (--ap-accent*) are intentionally NOT re-declared: they inherit
     from :root / the active accent colour so the box follows the theme accent. */
  --ap-bg-elevated: #1e2229;
  --ap-surface: #262b33;
  --ap-border: rgba(255, 255, 255, 0.07);
  --ap-border-strong: rgba(255, 255, 255, 0.14);
  --ap-text: #e9ecef;
  --ap-text-primary: #f8fafc;
  --ap-text-secondary: #a5acb8;
  --ap-text-muted: #747c88;
  --ap-radius-sm: 8px;
  --ap-radius: 12px;
  --ap-radius-lg: 16px;
  --ap-radius-xl: 20px;
  --ap-font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: rgba(8, 10, 14, 0.86) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#legalModalOverlay .legal-modal-box {
  background: #1c2027 !important;
  color: #e9ecef !important;
  border: 1px solid var(--ap-border-strong, rgba(255, 255, 255, 0.14)) !important;
  border-radius: var(--ap-radius-xl, 20px) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  width: 100%;
  max-width: 780px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
  padding: 34px 34px 30px 34px !important;
  box-sizing: border-box;
  position: relative;
  font-family: var(--ap-font, 'Outfit', system-ui, sans-serif);
  animation: ap-modal-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#legalModalOverlay .legal-modal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ap-accent), #38bdf8, #2563eb);
}
.ap-legal-article {
  color: #e2e8f0;
  line-height: 1.7;
  font-size: 14.5px;
}
.ap-legal-article h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ap-legal-article .ap-legal-meta {
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ap-legal-article h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ap-accent);
  margin-top: 20px;
  margin-bottom: 8px;
}
.ap-legal-article p { color: #cbd5e1; margin-bottom: 13px; }
.ap-legal-article ul { padding-left: 22px; margin-bottom: 16px; }
.ap-legal-article li { margin-bottom: 7px; color: #94a3b8; }
.ap-legal-article li strong { color: #f1f5f9; }
.ap-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.ap-contact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.2s, background 0.2s;
}
.ap-contact-card:hover {
  border-color: rgba(var(--ap-accent-rgb), 0.4);
  background: rgba(var(--ap-accent-rgb), 0.05);
}
.ap-contact-card h4 {
  margin: 0 0 8px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
}
.ap-contact-card p { margin: 0; font-size: 13.5px; color: #94a3b8; }


.login-modal-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: var(--bg-hover, rgba(0, 0, 0, 0.05)) !important;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
  color: var(--text-muted, #64748b) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.18s ease !important;
  z-index: 10 !important;
}
.login-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  transform: scale(1.08) !important;
}


/* ============================================================
   APINEX THEMED MODAL SYSTEM (DEFAULT FOR LOGIN & ALL MODALS)
   ============================================================ */

/* Modal Overlays & Backdrops */
#loginOverlay,
.custom-modal-overlay,
.modal-overlay,
#legalModalOverlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(8, 10, 14, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 100000 !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Modals without .hidden and not explicitly set to display:none should be flex */
.custom-modal-overlay:not(.hidden):not([style*="display: none"]):not([style*="display:none"]),
.modal-overlay:not(.hidden):not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
}

#loginOverlay.hidden,
.custom-modal-overlay.hidden,
.modal-overlay.hidden,
#loginOverlay[style*="display: none"],
#loginOverlay[style*="display:none"],
.custom-modal-overlay[style*="display: none"],
.custom-modal-overlay[style*="display:none"],
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"],
#legalModalOverlay[style*="display: none"],
#legalModalOverlay[style*="display:none"] {
  display: none !important;
}

/* Modal Boxes / Cards (APInex Surface) */
.login-box,
.custom-modal-box,
.modal-box,
.legal-modal-box {
  background: #1c2027 !important;
  color: #e9ecef !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 85px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  width: 100%;
  max-width: 440px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  animation: ap-modal-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ap-modal-pop {
  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* APInex Multi-Color Gradient Top Accent */
.login-box::before,
.custom-modal-box::before,
.modal-box::before,
.legal-modal-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, var(--ap-accent), #38bdf8, #2563eb) !important;
  z-index: 5 !important;
}

/* Headings in all modals */
.login-box h2,
.login-box h3,
.custom-modal-header h3,
.modal-box h3,
#loginTitle {
  color: #f8fafc !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
}

/* Subtitles, paragraphs, and descriptions */
.login-box p,
.custom-modal-body p,
.modal-box p,
.custom-modal-subtitle,
#loginGreeting {
  color: #94a3b8 !important;
  font-size: 0.9em !important;
}

/* Form labels */
.login-box label,
.custom-modal-box label,
.modal-box label,
.custom-modal-body label {
  color: #94a3b8 !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
}

/* Inputs, textareas, selects in all modals */
.login-box input,
.custom-modal-box input,
.custom-modal-box select,
.custom-modal-box textarea,
.modal-box input,
.modal-box select,
.modal-box textarea {
  background: #15181e !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  padding: 12px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
}

.login-box input:focus,
.custom-modal-box input:focus,
.custom-modal-box select:focus,
.custom-modal-box textarea:focus,
.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
  border-color: var(--ap-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--ap-accent-rgb), 0.2) !important;
  outline: none !important;
}

.login-box input::placeholder,
.custom-modal-box input::placeholder,
.modal-box input::placeholder {
  color: #64748b !important;
}

/* Primary Action Buttons in Login Box */
.login-box button[type="submit"],
.login-box #loginBtn {
  height: 46px !important;
  background: var(--ap-accent) !important;
  color: #0c1a11 !important;
  font-weight: 750 !important;
  border-radius: 8px !important;
  border: none !important;
  font-size: 15px !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.45), 0 8px 22px rgba(var(--ap-accent-rgb), 0.3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.login-box button[type="submit"]:hover,
.login-box #loginBtn:hover {
  background: var(--ap-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.55), 0 12px 28px rgba(var(--ap-accent-rgb), 0.4) !important;
}

/* Primary Action Buttons in Modal Footers (Properly sized to match other action buttons) */
.custom-modal-footer .btn-primary,
.modal-box .btn-primary {
  height: auto !important;
  min-height: 36px !important;
  background: var(--ap-accent) !important;
  color: #0c1a11 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  font-size: 14px !important;
  padding: 8px 18px !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.45), 0 4px 12px rgba(var(--ap-accent-rgb), 0.25) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  transition: all 0.2s ease !important;
}

.custom-modal-footer .btn-primary:hover,
.modal-box .btn-primary:hover {
  background: var(--ap-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px rgba(var(--ap-accent-rgb), 0.55), 0 6px 16px rgba(var(--ap-accent-rgb), 0.35) !important;
}

/* Secondary / Outline Buttons in Modals */
.custom-modal-footer .btn-outline,
.custom-modal-footer .btn-secondary,
.modal-box .btn-outline,
.modal-box .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.custom-modal-footer .btn-outline:hover,
.custom-modal-footer .btn-secondary:hover,
.modal-box .btn-outline:hover,
.modal-box .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Link Action Buttons (Forgot Username?, Forgot Password?) */
.login-box .login-link-btn {
  background: none !important;
  border: none !important;
  color: var(--ap-accent) !important;
  cursor: pointer !important;
  font-size: 0.84em !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  width: auto !important;
  box-shadow: none !important;
  transition: color 0.18s ease !important;
}

.login-box .login-link-btn:hover {
  color: var(--ap-accent-hover) !important;
  text-decoration: underline !important;
}

/* Back Button in Login Modal */
.login-box .login-back-btn {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  width: auto !important;
  box-shadow: none !important;
  transition: color 0.18s ease !important;
}

.login-box .login-back-btn:hover {
  color: var(--ap-accent) !important;
}

/* Sleek Close Button for all modals */
.login-modal-close-btn,
.ap-modal-close-btn,
.custom-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: all 0.18s ease !important;
  z-index: 20 !important;
  box-shadow: none !important;
}

.login-modal-close-btn:hover,
.ap-modal-close-btn:hover,
.custom-modal-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  transform: scale(1.08) !important;
}

/* Modal Headers & Footers in Custom Modals */
.custom-modal-header {
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.custom-modal-footer {
  background: rgba(0, 0, 0, 0.22) !important;
  padding: 16px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* ============================================================
   ACTIVITY HISTORY & AUDIT TRAIL DRAWER STYLES
   ============================================================ */
.activity-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 100080;
    display: flex;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.activity-drawer-overlay.hidden {
    display: none !important;
    opacity: 0;
}
.activity-drawer-box {
    width: 100%;
    max-width: 580px;
    height: 100vh;
    background: var(--bg-surface, #ffffff);
    color: var(--text-main, #1e293b);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 1px solid var(--border-color, #e2e8f0);
}
.activity-drawer-overlay.hidden .activity-drawer-box {
    transform: translateX(100%);
}
.activity-drawer-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card, #f8fafc);
}
.activity-drawer-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    position: relative;
}
.activity-drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card, #f8fafc);
}
.activity-timeline {
    position: relative;
    padding-left: 20px;
    margin: 0;
    list-style: none;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
    width: 2px;
    background: var(--border-color, #e2e8f0);
}
.activity-timeline-item {
    position: relative;
    margin-bottom: 22px;
}
.activity-timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary, #2563eb);
    border: 2px solid var(--bg-surface, #ffffff);
    box-shadow: 0 0 0 2px var(--primary, #2563eb);
}
.activity-card {
    background: var(--bg-card, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: border-color 0.15s ease;
}
.activity-card:hover {
    border-color: var(--primary, #2563eb);
}
.activity-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84em;
    margin-top: 10px;
}
.activity-diff-table th {
    text-align: left;
    padding: 5px 8px;
    font-size: 0.78em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.activity-diff-table td {
    padding: 6px 8px;
    vertical-align: top;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.activity-val-old {
    color: #ef4444;
    text-decoration: line-through;
    background: rgba(239, 68, 68, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
    display: inline-block;
}
.activity-val-new {
    color: #10b981;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
    display: inline-block;
}

/* ============================================================
   STUDENT PORTAL FEE PAYMENT STYLES
   ============================================================ */

/* Main Fee Portal Container */
.student-fee-portal {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    font-family: inherit;
    animation: fadeIn 0.5s ease;
}

.student-fee-portal h2,
.student-fee-portal h3,
.student-fee-portal h4 {
    color: var(--text-main, #2c3e50);
    margin-bottom: 15px;
}

.student-fee-portal .subtitle {
    color: var(--text-muted, #7f8c8d);
    font-size: 14px;
    margin-bottom: 20px;
}

/* Fee Summary Card */
.fee-summary-card {
    background: var(--primary, #0284c7);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white;
}

.fee-summary-card h3 {
    color: white !important;
    margin-bottom: 20px;
    font-size: 20px;
}

.fee-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.fee-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.fee-label {
    display: block;
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 5px;
    font-weight: 500;
}

.fee-amount {
    font-size: 18px;
    font-weight: bold;
}

.fee-amount.paid,
.fee-amount.completed {
    color: #27ae60;
}

.fee-amount.due {
    color: #e74c3c;
}

.fee-status {
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-top: 15px;
}

.fee-status.completed {
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid #27ae60;
    color: #27ae60;
}

.fee-status.due {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid #e74c3c;
    color: #e74c3c;
}

/* Fee Breakdown Section */
.fee-breakdown {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fee-breakdown h4 {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 15px;
    font-size: 16px;
}

.fee-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    color: white;
}

.fee-breakdown-table th,
.fee-breakdown-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fee-breakdown-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.fee-breakdown-table td {
    font-size: 13px;
}

.fee-breakdown-table td.due {
    color: #f39c12;
}

.fee-breakdown-table td.paid {
    color: #27ae60;
}

/* Payment Section */
.payment-section {
    background: var(--bg-surface, white);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color, #e2e8f0);
}

.payment-section h3 {
    color: var(--text-main, #2c3e50);
    margin-bottom: 20px;
}

.payment-form {
    display: grid;
    gap: 20px;
}

.student-fee-portal .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-fee-portal .form-group label {
    font-weight: 600;
    color: var(--text-main, #2c3e50);
    font-size: 14px;
}

.student-fee-portal .form-group input,
.student-fee-portal .form-group select,
.student-fee-portal .form-group textarea {
    padding: 12px 15px;
    border: 1px solid var(--border-color, #dcdfe6);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-surface, #ffffff);
    color: var(--text-main, #0f172a);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.student-fee-portal .form-group input:focus,
.student-fee-portal .form-group select:focus,
.student-fee-portal .form-group textarea:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.student-fee-portal .btn,
.upi-actions .btn,
.gateway-actions .btn,
.status-actions .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Payment Instructions */
.payment-instructions {
    background: var(--bg-card, #f8f9fa);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.payment-instructions h4 {
    color: var(--text-main, #2c3e50);
    margin-bottom: 15px;
}

.payment-instructions ul {
    margin: 0;
    padding-left: 20px;
}

.payment-instructions li {
    margin-bottom: 8px;
    color: var(--text-muted, #495057);
    font-size: 14px;
}

/* Payment Unavailable */
.payment-unavailable {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #7f8c8d);
    background: var(--bg-card, #f8f9fa);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.payment-unavailable p {
    margin: 0;
    font-size: 16px;
}

/* Payment History */
.payment-history-section {
    background: var(--bg-surface, white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color, #e2e8f0);
}

.payment-history-section h3 {
    color: var(--text-main, #2c3e50);
    margin-bottom: 20px;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.payment-history-table th,
.payment-history-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.payment-history-table th {
    background: var(--bg-card, #f8f9fa);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted, #495057);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-history-table td {
    font-size: 14px;
    color: var(--text-main, #2c3e50);
}

.payment-history-table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.payment-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.payment-status-badge.completed,
.payment-status-badge.paid {
    background: #d5f5e3;
    color: #27ae60;
}

.payment-status-badge.pending,
.payment-status-badge.initiated {
    background: #fff3cd;
    color: #f39c12;
}

.payment-status-badge.failed,
.payment-status-badge.cancelled {
    background: #f8d7da;
    color: #e74c3c;
}

.payment-status-badge.expired {
    background: #d1ecf1;
    color: #17a2b8;
}

/* Fee Modals */
.upi-payment-modal,
.gateway-payment-modal,
.payment-status-modal {
    max-width: 500px;
    margin: 0 auto;
    padding: 25px;
}

.upi-payment-header,
.gateway-payment-header,
.payment-status-header {
    text-align: center;
    margin-bottom: 20px;
}

.upi-payment-header h3,
.gateway-payment-header h3,
.payment-status-header h3 {
    margin: 0;
    color: var(--text-main, #2c3e50);
}

.upi-payment-header p,
.gateway-payment-header p {
    color: var(--text-muted, #7f8c8d);
    font-size: 14px;
    margin: 5px 0 0;
}

.upi-qr-container {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.upi-qr-code {
    max-width: 250px;
    height: auto;
    border-radius: 8px;
}

.upi-payment-details {
    background: var(--bg-card, #f8f9fa);
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.upi-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.upi-detail strong {
    color: var(--text-main, #2c3e50);
}

.upi-detail span {
    color: var(--text-muted, #495057);
}

.upi-instructions {
    margin: 20px 0;
}

.upi-instructions h4 {
    color: var(--text-main, #2c3e50);
    margin-bottom: 10px;
}

.upi-instructions ol {
    padding-left: 20px;
    margin: 0;
}

.upi-instructions li {
    margin-bottom: 8px;
    color: var(--text-muted, #495057);
    font-size: 14px;
}

.upi-actions,
.gateway-actions,
.status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.upi-actions .btn,
.gateway-actions .btn,
.status-actions .btn {
    flex: 1;
    min-width: 140px;
}

.gateway-qr-container {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.gateway-qr-code {
    max-width: 250px;
    height: auto;
    border-radius: 8px;
}

.no-qr-available {
    padding: 40px;
    text-align: center;
    color: var(--text-muted, #7f8c8d);
}

.gateway-payment-details {
    background: var(--bg-card, #f8f9fa);
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.gateway-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.gateway-detail strong {
    color: var(--text-main, #2c3e50);
}

.gateway-detail span {
    color: var(--text-muted, #495057);
}

.payment-status-details {
    background: var(--bg-surface, white);
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid var(--border-color, #e2e8f0);
}

.status-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.status-detail:last-child {
    border-bottom: none;
}

.status-detail strong {
    color: var(--text-main, #2c3e50);
}

.status-detail span {
    color: var(--text-muted, #495057);
}

.status-message {
    background: var(--bg-card, #f8f9fa);
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    border: 1px solid var(--border-color, #e2e8f0);
}

.status-message p {
    margin: 0;
    color: var(--text-muted, #495057);
    font-size: 14px;
}

.payment-method-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.payment-method-razorpay { background: #6772e5; color: white; }
.payment-method-paytm { background: #00baff; color: white; }
.payment-method-phonepe { background: #6f2c91; color: white; }
.payment-method-upi { background: #ff6900; color: white; }

/* Responsive student fee portal */
@media (max-width: 768px) {
    .student-fee-portal {
        padding: 10px;
        margin: 10px auto;
    }
    .fee-summary-card {
        padding: 15px;
    }
    .fee-details {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .payment-form {
        gap: 15px;
    }
    .fee-breakdown-table th,
    .fee-breakdown-table td {
        padding: 6px 10px;
    }
    .payment-history-table th,
    .payment-history-table td {
        padding: 8px 10px;
    }
    .upi-actions,
    .gateway-actions,
    .status-actions {
        flex-direction: column;
    }
    .upi-actions .btn,
    .gateway-actions .btn,
    .status-actions .btn {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ============================================================
   APP-WIDE DESIGN SYSTEM POLISH (v2)
   ------------------------------------------------------------
   A single, token-driven layer that tidies the shared components
   (forms, buttons, tables, modals, scrollbars) and adds
   accessibility + dark/APInex parity. It sits on top of the base
   styles and deliberately avoids changing layout.
   ============================================================ */

/* --- 1. Additional design tokens --- */
:root {
  color-scheme: light;
  --focus-ring-color: var(--primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --surface-tint: rgba(0, 0, 0, 0.02);
  --surface-tint-strong: rgba(0, 0, 0, 0.04);
  --scrollbar-thumb: rgba(100, 116, 139, 0.42);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.62);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-dark {
  color-scheme: dark;
  --surface-tint: rgba(255, 255, 255, 0.025);
  --surface-tint-strong: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb: rgba(148, 163, 184, 0.34);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.55);
}
body.theme-apinex {
  color-scheme: dark;
  --surface-tint: rgba(255, 255, 255, 0.025);
  --surface-tint-strong: rgba(255, 255, 255, 0.05);
  --focus-ring-color: var(--ap-accent-hover);
  --scrollbar-thumb: rgba(148, 163, 184, 0.30);
  --scrollbar-thumb-hover: rgba(var(--ap-accent-rgb), 0.55);
}

/* --- 2. Accessibility: consistent keyboard focus rings --- */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}
:where(a, button, summary, [role="button"], [tabindex]):focus:not(:focus-visible) {
  outline: none;
}
/* Inputs keep the box-shadow ring from the base styles; drop the UA outline. */
:where(input, select, textarea):focus-visible { outline: none; }
/* In-page anchors are not hidden under the fixed header. */
[id] { scroll-margin-top: calc(var(--header-height, 75px) + 12px); }

/* --- 3. Themed scrollbars (all scroll areas, all themes) --- */
* { scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* --- 4. Selection --- */
::selection { background: var(--primary-light); }

/* --- 5. Form controls --- */
:where(input, select, textarea):disabled,
.form-control:disabled,
.form-control[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--section-bg);
}
input[readonly],
textarea[readonly],
.form-control[readonly] {
  background: var(--surface-tint-strong);
  color: var(--text-muted);
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--primary); }
select { cursor: pointer; }
.form-control:focus-visible,
.custom-input:focus-visible { border-color: var(--primary); }

/* --- 6. Buttons --- */
.btn,
.btn-icon,
[class*="btn-"] { -webkit-tap-highlight-color: transparent; }
.btn:active:not(:disabled),
.btn-icon:active:not(:disabled) { transform: translateY(0) scale(0.985); }
button:disabled,
.btn:disabled,
.btn[disabled] {
  transform: none !important;
  box-shadow: none !important;
}
.btn .svg-icon,
.btn svg { flex-shrink: 0; }

/* --- 7. Cards / panels --- */
.card,
.section-card,
.panel { border-radius: var(--radius-lg); }
.card-header,
.modal-header,
.modal-footer,
.custom-modal-header,
.custom-modal-footer { background: var(--surface-tint); }

/* --- 8. Tables --- */
.table-container .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--secondary);
}
.data-table td { vertical-align: middle; }
/* Subtle zebra striping that any view-specific row colour still overrides. */
:where(.data-table tbody tr:nth-child(even)) { background: var(--surface-tint); }

/* --- 9. Modals: consistent backdrop + safe scrolling --- */
.modal-overlay,
.custom-modal-overlay {
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}
.modal-box,
.modal-content,
.custom-modal-box {
  max-height: 90vh;
  overflow-y: auto;
}

/* --- 10. Links + smooth theme switch --- */
a { transition: color var(--transition-fast); }
body { transition: background-color var(--transition-base), color var(--transition-base); }

/* --- 11. Dark & APInex parity fixes --- */
body.theme-dark input[readonly],
body.theme-dark textarea[readonly],
body.theme-apinex input[readonly],
body.theme-apinex textarea[readonly] {
  background: var(--surface-tint-strong);
  color: var(--text-muted);
}
body.theme-dark .card,
body.theme-apinex .card,
body.theme-dark .section-card,
body.theme-apinex .section-card,
body.theme-dark .panel,
body.theme-apinex .panel {
  border-color: var(--border-color);
}

/* --- 12. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 13. Tenant Workspace — WhatsApp setup guide --- */
#twWaSetupGuide > summary { list-style: none; }
#twWaSetupGuide > summary::-webkit-details-marker { display: none; }
#twWaSetupGuide > summary::marker { content: ""; }
#twWaSetupGuide[open] > summary { border-bottom: 1px solid var(--border-color); }

/* --- 14. Mutual Exclusion: Landing Page vs CRM Workspace Container --- */
body.is-landing {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background-color: #15181d !important;
}

body.is-landing #landingPageContainer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.is-landing #appContainer,
body.is-landing .sidebar,
body.is-landing #sidebar,
body.is-landing .mobile-bottom-nav,
body.is-landing .topbar,
body.is-landing #mobileOverlay,
body.is-landing #chatWidget {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.in-app #landingPageContainer,
#landingPageContainer.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.in-app #appContainer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}