/* -------------------------------------------------------------
 * 3Gives - Installment Management System Design System & Styles
 * Premium White, Slate, and Emerald Green Theme
 * ------------------------------------------------------------- */

/* Custom Variables */
:root {
  --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Motif Color Palette - Clean Slate, Gray, and Accent Emerald Green */
  --bg-app: #f8fafc; /* Very soft light gray background for app contrast */
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border-color: #e2e8f0; /* Soft gray border */
  
  --primary-color: #10b981; /* Emerald Green Accent */
  --primary-hover: #059669;
  --primary-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --primary-glow: rgba(16, 185, 129, 0.15);
  
  --success-color: #10b981;
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --success-glow: rgba(16, 185, 129, 0.1);
  
  --warning-color: #f59e0b; /* Amber */
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  
  --danger-color: #ef4444; /* Red */
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --danger-glow: rgba(239, 68, 68, 0.12);
  
  --info-color: #06b6d4; /* Cyan */
  
  --text-primary: #0f172a; /* Slate Black for main readability */
  --text-muted: #64748b;    /* Cool Gray for secondary text */
  
  /* Bootstrap RGB custom variables mapping to our design system */
  --bs-primary-rgb: 16, 185, 129;
  --bs-success-rgb: 16, 185, 129;
  --bs-info-rgb: 6, 182, 212;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 239, 68, 68;
  --bs-dark-rgb: 15, 23, 42;
  
  /* Layout Metrics */
  --sidebar-width: 270px;
  --top-nav-height: 75px;
  
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.04), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
  --shadow-glow: 0 10px 30px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 12px 25px rgba(16, 185, 129, 0.08);
}

/* Base Body Styles */
body {
  font-family: var(--font-primary);
  background: radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.04) 0px, transparent 40%),
              radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.02) 0px, transparent 50%),
              var(--bg-app) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Force Text Inheritance on Bootstrap defaults */
h1, h2, h3, h4, h5, h6, p, span, label, td, th, div {
  color: inherit;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* Soft gray scrollbar */
  border-radius: 99px;
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Page Loader Overlay */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.spinner-content {
  text-align: center;
}
.spinner-border {
  border-right-color: transparent !important;
  animation: spinner-border .75s linear infinite !important;
  color: var(--primary-color) !important;
}
.spinner-content span {
  color: var(--text-primary) !important;
}

/* Core Layout Shell */
#app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar Styling - Premium Clean White panel */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.01);
}
.sidebar-header {
  height: var(--top-nav-height);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.brand-logo {
  width: 40px;
  height: 40px;
  box-shadow: 0 4px 10px var(--primary-glow);
  background: var(--primary-gradient);
  color: white !important;
}
.brand-name {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
  background: none;
  -webkit-text-fill-color: initial;
}
.sidebar-nav {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem 0.75rem;
}
.sidebar-nav .nav-link {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.25rem;
  border-radius: 0.75rem;
  margin: 0.2rem 0;
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  transition: all 0.2s ease;
}
.sidebar-nav .nav-link:hover {
  color: var(--text-primary);
  background: #f1f5f9; /* Light gray hover */
}
.sidebar-nav .nav-link.active {
  color: var(--primary-hover) !important;
  background: #e6f4ea !important; /* Soft mint background */
  border: 1px solid rgba(16, 185, 129, 0.15);
  box-shadow: none;
}
.sidebar-nav .nav-link.active * {
  color: var(--primary-hover) !important;
}
.sidebar-nav .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 4px;
  background: var(--primary-color);
  border-radius: 0 4px 4px 0;
}

.avatar {
  background: var(--primary-gradient) !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white !important;
}

/* Main Dashboard Panel */
.main-panel {
  flex-grow: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.top-nav {
  height: var(--top-nav-height);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
}
#view-title {
  color: var(--text-primary) !important;
}
.breadcrumb-item.active {
  color: var(--text-primary) !important;
}

/* Viewport Shell */
#auth-shell {
  min-height: 100vh;
}

/* Cards - Premium Crisp White Elevate */
.card-glass {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  color: var(--text-primary) !important;
}
.card-glass:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: var(--shadow-lg);
}
.card-glass-header {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-color);
  padding: 1.5rem !important;
  border-radius: 1.25rem 1.25rem 0 0 !important;
}

.card-metric {
  position: relative;
  overflow: hidden;
}
.card-metric::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.metric-icon {
  width: 52px;
  height: 52px;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  color: var(--primary-color) !important;
}
.metric-value {
  color: var(--text-primary) !important;
}

/* Buttons - Custom Premium Green/White */
.btn-primary {
  background: var(--primary-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
  border-radius: 0.75rem !important;
  color: white !important;
  transition: all 0.2s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-success {
  background: var(--success-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 12px var(--success-glow) !important;
  border-radius: 0.75rem !important;
  color: white !important;
  transition: all 0.2s ease !important;
}
.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
}

.btn-outline-secondary {
  border: 1px solid var(--border-color);
  color: var(--text-muted) !important;
  background-color: transparent;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
}
.btn-outline-secondary:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: var(--text-primary) !important;
}

/* Modern Action Buttons (Small Table Buttons) */
.action-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03) !important;
}
.action-btn i {
  font-size: 1.1rem !important;
}

/* View Button - Cyan/Emerald Accent */
.action-btn-view {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: var(--primary-color) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}
.action-btn-view:hover {
  background: var(--primary-gradient) !important;
  color: white !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
  transform: translateY(-2px);
}

/* Edit Button - Slate/Cool Gray */
.action-btn-edit {
  background-color: rgba(102, 126, 234, 0.08) !important;
  color: #667eea !important;
  border-color: rgba(102, 126, 234, 0.15) !important;
}
.action-btn-edit:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
  transform: translateY(-2px);
}

/* Archive Button - Amber/Yellow */
.action-btn-archive {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: var(--warning-color) !important;
  border-color: rgba(245, 158, 11, 0.15) !important;
}
.action-btn-archive:hover {
  background: var(--warning-gradient) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
  transform: translateY(-2px);
}

/* Unarchive Button - Green */
.action-btn-unarchive {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: var(--success-color) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}
.action-btn-unarchive:hover {
  background: var(--success-gradient) !important;
  color: white !important;
  box-shadow: 0 4px 12px var(--success-glow) !important;
  transform: translateY(-2px);
}

/* Delete Button - Red */
.action-btn-delete {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: var(--danger-color) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}
.action-btn-delete:hover {
  background: var(--danger-gradient) !important;
  color: white !important;
  box-shadow: 0 4px 12px var(--danger-glow) !important;
  transform: translateY(-2px);
}

/* Form Controls - Clean White Inputs */
.form-control, .form-select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-primary) !important;
  border-radius: 0.75rem !important;
  padding: 0.7rem 1rem !important;
  transition: all 0.25s ease !important;
}
.form-control:focus, .form-select:focus {
  background-color: #ffffff !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15) !important;
}
.form-control::placeholder {
  color: #94a3b8 !important;
}

/* Clean Tables */
.table {
  color: var(--text-primary) !important;
}
table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
}
table.dataTable thead th {
  border-bottom: 2px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
  padding: 1.25rem 1.25rem !important;
  border-top: 1px solid var(--border-color) !important;
}
table.dataTable thead th:first-child {
  border-left: 1px solid var(--border-color) !important;
  border-radius: 1.25rem 0 0 0 !important;
}
table.dataTable thead th:last-child {
  border-right: 1px solid var(--border-color) !important;
  border-radius: 0 1.25rem 0 0 !important;
}
table.dataTable tbody tr {
  background-color: #ffffff !important;
  transition: all 0.2s ease;
}
table.dataTable tbody td {
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 1.25rem 1.25rem !important;
  color: #334155 !important;
  font-weight: 400;
}
table.dataTable tbody td:first-child {
  border-left: 1px solid #f1f5f9 !important;
}
table.dataTable tbody td:last-child {
  border-right: 1px solid #f1f5f9 !important;
}
table.dataTable tbody tr:hover {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
}
table.dataTable tbody tr:hover td {
  border-color: rgba(16, 185, 129, 0.15) !important;
}
table.dataTable tbody td a {
  color: var(--primary-color) !important;
  font-weight: 600;
  text-decoration: none !important;
}
table.dataTable tbody td a:hover {
  text-decoration: underline !important;
}
table.dataTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 1.25rem !important;
}
table.dataTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 1.25rem !important;
}

/* Modals */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-content {
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1) !important;
  overflow: hidden;
  color: var(--text-primary) !important;
}
.modal-header {
  background-color: #f8fafc;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.modal-footer {
  border-top: 1px solid var(--border-color) !important;
}
.btn-close {
  filter: none;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Authentication Containers */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 40%),
              #f4f6f9;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 3rem 2.5rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.05) !important;
}

/* Progress Bar Styles */
.progress-bar {
  background: var(--primary-gradient) !important;
  box-shadow: 0 0 6px var(--primary-glow);
}
.progress {
  background-color: #e2e8f0 !important;
  height: 8px !important;
}
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Override alert styles inside report printable areas */
.bg-dark {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: var(--text-primary) !important;
}

/* Receipt adjustments for white/green background */
.receipt-wrapper {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px dashed var(--border-color) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
.text-light {
  color: var(--text-primary) !important;
}

.table-dark {
  --bs-table-bg: #ffffff !important;
  --bs-table-color: var(--text-primary) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: #f8fafc !important;
}

.page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}
.page-link {
  background-color: #ffffff !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
.page-link:hover {
  background-color: #f1f5f9 !important;
  color: var(--text-primary) !important;
}

.input-group-text {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-muted) !important;
}
.hover-white:hover {
  color: var(--primary-color) !important;
}

/* Responsive Layout & Mobile Sidebar Overlay */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  .sidebar.show {
    transform: translateX(0);
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.15) !important;
  }
  .main-panel {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .top-nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Light Theme Hamburger Button Override */
#mobile-sidebar-toggle {
  background-color: #f1f5f9 !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
}
#mobile-sidebar-toggle:hover {
  background-color: #e2e8f0 !important;
  color: var(--primary-color) !important;
}
#mobile-sidebar-toggle:hover i {
  color: var(--primary-color) !important;
}

/* -------------------------------------------------------------
 * Color Override for Slate Black & Cool Gray Readability
 * ------------------------------------------------------------- */

/* Set ALL text to slate black by default for main readability */
* {
  color: #0f172a !important;
}

/* Redefine white/light text classes to slate black/gray by default to avoid invisible text on white pages */
.text-white {
  color: #0f172a !important;
}
.text-light {
  color: #64748b !important;
}

/* Keep white text ONLY on elements with medium/dark solid backgrounds (excludes opacity variants) */
.btn-primary,
.btn-primary *,
.btn-success,
.btn-success *,
.btn-info,
.btn-info *,
.btn-warning,
.btn-warning *,
.btn-danger,
.btn-danger *,
.btn-dark,
.btn-dark *,
.bg-primary:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.bg-primary:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.bg-success:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.bg-success:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.bg-info:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.bg-info:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.bg-warning:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.bg-warning:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.bg-danger:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.bg-danger:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.bg-dark:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.bg-dark:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.badge.bg-primary:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.badge.bg-primary:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.badge.bg-success:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.badge.bg-success:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.badge.bg-info:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.badge.bg-info:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.badge.bg-warning:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.badge.bg-warning:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.badge.bg-danger:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.badge.bg-danger:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.badge.bg-dark:not([class*="opacity-"]):not([class*="bg-opacity-"]),
.badge.bg-dark:not([class*="opacity-"]):not([class*="bg-opacity-"]) *,
.alert-primary,
.alert-primary *,
.alert-success,
.alert-success *,
.alert-info,
.alert-info *,
.alert-warning,
.alert-warning *,
.alert-danger,
.alert-danger *,
.alert-dark,
.alert-dark *,
.avatar,
.brand-logo,
.brand-logo *,
.brand-logo i,
.spinner-border,
.progress-bar,
.progress-bar * {
  color: #ffffff !important;
}

/* Force standard Bootstrap alerts to use gray bordered theme */
.alert {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid var(--border-color) !important;
}
.alert * {
  color: #0f172a !important;
}

/* Keep text-muted as secondary cool gray */
.text-muted,
.text-muted * {
  color: #64748b !important;
}

/* Keep primary/success/danger text colors as standard Bootstrap/emerald colors */
.text-primary,
.text-primary * {
  color: var(--primary-color) !important;
}
.text-success,
.text-success * {
  color: var(--success-color) !important;
}
.text-info,
.text-info * {
  color: var(--info-color) !important;
}
.text-warning,
.text-warning * {
  color: var(--warning-color) !important;
}
.text-danger,
.text-danger * {
  color: var(--danger-color) !important;
}

/* Ensure secondary buttons use correct color */
.btn-outline-secondary {
  color: #64748b !important;
}
.btn-outline-secondary:hover {
  color: #0f172a !important;
}

/* SweetAlert overrides */
.swal2-popup {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid var(--border-color) !important;
}
.swal2-title, .swal2-html-container, .swal2-content {
  color: #0f172a !important;
}
.swal2-confirm {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}
.swal2-cancel {
  background-color: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid var(--border-color) !important;
}

/* Fix all tables to use white background & slate text */
.table-dark {
  --bs-table-bg: #ffffff !important;
  --bs-table-color: #0f172a !important;
}
.table-dark th {
  color: #64748b !important;
}
.table-dark td {
  color: #0f172a !important;
}

/* Fix report print area to use white background and slate text */
#report-print-area {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Customer Search Autocomplete list suggestions hover style */
.customer-search-row {
  cursor: pointer;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
}
.customer-search-row:last-child {
  border-bottom: 0;
}
.customer-search-row:hover {
  background-color: var(--primary-glow) !important;
}
.customer-search-row:hover .font-bold {
  color: var(--primary-color) !important;
}

/* Custom Spacing Helpers */
.mb-6 { margin-bottom: 4rem !important; }
.rounded-xl { border-radius: 1rem !important; }

/* =============================================================
 * CUSTOMERS PAGE — Premium Minimalist Design
 * ============================================================= */

/* ---------- Page Header ---------- */
.cust-page-header {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cust-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.cust-page-title {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.035em;
  margin: 0 !important;
  line-height: 1.2;
}
.cust-page-subtitle {
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  margin: 0.3rem 0 0 0 !important;
  font-weight: 400;
}

/* ---------- Add Customer Button ---------- */
.cust-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 0.85rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  flex-shrink: 0;
}
.cust-btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}
.cust-btn-add i {
  font-size: 1rem;
  color: #ffffff !important;
}

/* ---------- Summary Stat Cards ---------- */
.cust-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) {
  .cust-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cust-stats-row { grid-template-columns: 1fr; }
  .cust-header-top { flex-direction: column; align-items: stretch; }
  .cust-btn-add { justify-content: center; }
}

.cust-stat-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: none;
  transition: none;
}
.cust-stat-card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.cust-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.cust-stat-icon--total  { background: rgba(16, 185, 129, 0.1);  color: #10b981 !important; }
.cust-stat-icon--total i { color: #10b981 !important; }
.cust-stat-icon--active  { background: rgba(16, 185, 129, 0.1);  color: #059669 !important; }
.cust-stat-icon--active i { color: #059669 !important; }
.cust-stat-icon--pending { background: rgba(245, 158, 11, 0.1); color: #f59e0b !important; }
.cust-stat-icon--pending i { color: #f59e0b !important; }
.cust-stat-icon--archived { background: rgba(100, 116, 139, 0.1); color: #64748b !important; }
.cust-stat-icon--archived i { color: #64748b !important; }

.cust-stat-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cust-stat-value {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.1;
}
.cust-stat-label {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Table Card ---------- */
.cust-table-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  animation: fadeIn 0.45s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cust-table-card-inner {
  padding: 0;
}

/* ---------- Table Body Rows ---------- */
.cust-table-row {
  transition: background 0.18s ease;
}
.cust-row--archived td {
  opacity: 0.6;
}

/* ---------- Customer Cell ---------- */
.cust-customer-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.cust-avatar {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #ffffff !important;
  letter-spacing: 0.02em;
}
.avatar-emerald { background: linear-gradient(135deg, #10b981, #047857); }
.avatar-violet  { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.avatar-sky     { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.avatar-amber   { background: linear-gradient(135deg, #f59e0b, #b45309); }
.avatar-rose    { background: linear-gradient(135deg, #f43f5e, #be123c); }
.avatar-teal    { background: linear-gradient(135deg, #14b8a6, #0f766e); }

.cust-customer-name {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  line-height: 1.3;
}
.cust-customer-id {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', monospace;
  margin-top: 0.1rem;
}

/* ---------- Contact Cell ---------- */
.cust-contact-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cust-contact-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
}
.cust-contact-item i {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  width: 14px;
  flex-shrink: 0;
}

/* ---------- Address Cell ---------- */
.cust-address-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  max-width: 220px;
}
.cust-address-cell i {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  flex-shrink: 0;
  margin-top: 1px;
}
.cust-address-cell span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-muted) !important;
}

/* ---------- Status Badges ---------- */
.cust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cust-badge i {
  font-size: 0.65rem !important;
}
.cust-badge--active {
  background: rgba(16, 185, 129, 0.1);
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.cust-badge--active i { color: #059669 !important; }
.cust-badge--pending {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.cust-badge--pending i { color: #b45309 !important; }
.cust-badge--archived {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b !important;
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.cust-badge--archived i { color: #64748b !important; }

/* ---------- Action Buttons Row ---------- */
.cust-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.cust-action-tooltip {
  position: relative;
}
.cust-action-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f8fafc !important;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.55rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 100;
}
.cust-action-tooltip:hover::after {
  opacity: 1;
}

/* ---------- Empty State ---------- */
.cust-empty-state {
  text-align: center;
  padding: 4rem 2rem !important;
}
.cust-empty-state i {
  font-size: 2.5rem !important;
  color: #cbd5e1 !important;
  display: block;
  margin-bottom: 0.75rem;
}
.cust-empty-state p {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin: 0;
}

/* ---------- Error State ---------- */
.cust-error-state {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
}
.cust-error-state i {
  font-size: 2.5rem !important;
  color: var(--danger-color) !important;
  display: block;
  margin-bottom: 0.75rem;
}
.cust-error-state h5 { color: var(--text-primary) !important; }
.cust-error-state p  { color: var(--text-muted) !important; font-size: 0.9rem !important; }

/* ---------- Modal ---------- */
.cust-modal-content {
  border-radius: 1.25rem !important;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12) !important;
}
.cust-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem !important;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-color);
}
.cust-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.cust-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.75rem;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cust-modal-icon i {
  font-size: 1.1rem !important;
  color: #ffffff !important;
}
.cust-modal-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
.cust-modal-subtitle {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
}
.cust-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 0.6rem;
  background: #f1f5f9;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.cust-modal-close:hover {
  background: #e2e8f0;
}
.cust-modal-close i {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
}
.cust-modal-body {
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cust-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

/* ---------- Form Sections inside Modal ---------- */
.cust-form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cust-form-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-color);
}
.cust-form-section-label i {
  font-size: 0.8rem !important;
  color: var(--primary-color) !important;
}
.cust-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cust-form-group--full {
  grid-column: 1 / -1;
}
@media (max-width: 576px) {
  .cust-form-grid { grid-template-columns: 1fr; }
}
.cust-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cust-form-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
.cust-required {
  color: var(--danger-color) !important;
  font-size: 0.85em;
}
.cust-form-control {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.7rem !important;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.88rem !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease !important;
  width: 100%;
  font-family: var(--font-primary);
  appearance: none;
  -webkit-appearance: none;
}
.cust-form-control:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}
.cust-form-control::placeholder {
  color: #94a3b8 !important;
}
.cust-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}
.cust-form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Input with icon */
.cust-input-icon-wrap {
  position: relative;
}
.cust-input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  pointer-events: none;
}
.cust-form-control--icon {
  padding-left: 2.3rem !important;
}

/* ---------- Modal Buttons ---------- */
.cust-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 0.7rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-primary);
}
.cust-btn-cancel:hover {
  background: #f1f5f9;
  color: var(--text-primary) !important;
}
.cust-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--primary-gradient) !important;
  border: none;
  border-radius: 0.7rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff !important;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--primary-glow);
  transition: all 0.2s ease;
  font-family: var(--font-primary);
}
.cust-btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}
.cust-btn-save i { color: #ffffff !important; }

/* ---------- DataTable Override for Customers ---------- */
#customers-table_wrapper .cust-dt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
#customers-table_wrapper .cust-dt-search input,
#customers-table_filter input {
  background: #f8fafc !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.7rem !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
  min-width: 240px;
  transition: all 0.2s ease !important;
}
#customers-table_wrapper .cust-dt-search input:focus,
#customers-table_filter input:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  background: #ffffff !important;
}
#customers-table_wrapper .cust-dt-length select,
#customers-table_length select {
  background: #f8fafc !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.6rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.85rem !important;
  color: var(--text-primary) !important;
  cursor: pointer;
}
#customers-table_wrapper .cust-dt-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
#customers-table_info,
#customers-table_wrapper .dataTables_info {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
}


/* =============================================================
 * SHARED PAGE UTILITIES  (pg-*)
 * ============================================================= */
.pg-header { animation: fadeIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; margin-bottom: 1.75rem; }
.pg-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.pg-title { font-size:1.55rem !important; font-weight:800 !important; color:var(--text-primary) !important; letter-spacing:-0.03em; margin:0 !important; line-height:1.2; }
.pg-subtitle { font-size:0.875rem !important; color:var(--text-muted) !important; margin:0.3rem 0 0 !important; font-weight:400; }
.pg-stats { display:grid; gap:1rem; margin-top:1.5rem; }
.pg-stats--4 { grid-template-columns:repeat(4,1fr); }
.pg-stats--3 { grid-template-columns:repeat(3,1fr); }
.pg-stats--2 { grid-template-columns:repeat(2,1fr); }
@media(max-width:900px) { .pg-stats--4,.pg-stats--3 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .pg-stats--4,.pg-stats--3,.pg-stats--2 { grid-template-columns:1fr; } }
.pg-stat { background:#fff; border:1px solid var(--border-color); border-radius:1rem; padding:1.1rem 1.2rem; display:flex; align-items:center; gap:.9rem; box-shadow:var(--shadow-sm); transition:all .22s ease; }
.pg-stat:hover { border-color:rgba(16,185,129,.2); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pg-stat-icon { width:46px; height:46px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.pg-stat-icon i { color:inherit !important; }
.pg-stat-icon--green  { background:rgba(16,185,129,.1);  color:#10b981 !important; }
.pg-stat-icon--blue   { background:rgba(99,102,241,.1);  color:#6366f1 !important; }
.pg-stat-icon--amber  { background:rgba(245,158,11,.1);  color:#f59e0b !important; }
.pg-stat-icon--red    { background:rgba(239,68,68,.1);   color:#ef4444 !important; }
.pg-stat-icon--cyan   { background:rgba(6,182,212,.1);   color:#06b6d4 !important; }
.pg-stat-icon--slate  { background:rgba(100,116,139,.1); color:#64748b !important; }
.pg-stat-icon--violet { background:rgba(139,92,246,.1);  color:#8b5cf6 !important; }
.pg-stat-body { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.pg-stat-value { font-size:1.4rem !important; font-weight:800 !important; color:var(--text-primary) !important; line-height:1.1; }
.pg-stat-label { font-size:.75rem !important; color:var(--text-muted) !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pg-stat-sub   { font-size:.72rem !important; color:var(--text-muted) !important; margin-top:.15rem; }
.pg-card { background:#fff; border:1px solid var(--border-color); border-radius:1.25rem; box-shadow:var(--shadow-sm); overflow:hidden; animation:fadeIn .45s .1s cubic-bezier(0.16,1,0.3,1) both; }
.pg-card-body { padding:1.5rem; }
.pg-card-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-color); background:linear-gradient(135deg,#f8fafc 0%,#fff 100%); }
.pg-card-title { font-size:1rem !important; font-weight:700 !important; color:var(--text-primary) !important; margin:0 !important; }
.pg-card-sub   { font-size:.78rem !important; color:var(--text-muted) !important; margin:.2rem 0 0 !important; }
.pg-section-label { display:flex; align-items:center; gap:.5rem; font-size:.72rem !important; font-weight:700 !important; color:var(--text-muted) !important; text-transform:uppercase; letter-spacing:.07em; padding-bottom:.55rem; border-bottom:1px solid var(--border-color); margin-bottom:1rem; }
.pg-section-label i { font-size:.78rem !important; color:var(--primary-color) !important; }
.pg-detail-row { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding:.35rem 0; }
.pg-detail-row + .pg-detail-row { border-top:1px solid #f1f5f9; }
.pg-detail-key   { font-size:.82rem !important; color:var(--text-muted) !important; font-weight:400; flex-shrink:0; }
.pg-detail-value { font-size:.85rem !important; color:var(--text-primary) !important; font-weight:600; text-align:right; }
.pg-back-btn { display:inline-flex; align-items:center; gap:.5rem; background:#f8fafc; border:1px solid var(--border-color); border-radius:.7rem; padding:.55rem 1rem; font-size:.875rem; font-weight:600; color:var(--text-primary) !important; cursor:pointer; transition:all .18s ease; text-decoration:none; font-family:var(--font-primary); }
.pg-back-btn:hover { background:#f1f5f9; border-color:#cbd5e1; }
.pg-back-btn i { color:var(--text-muted) !important; font-size:.9rem !important; }
.pg-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .7rem; border-radius:99px; font-size:.72rem !important; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.pg-badge i { font-size:.62rem !important; }
.pg-badge--green  { background:rgba(16,185,129,.1);  color:#059669 !important; border:1px solid rgba(16,185,129,.2); }
.pg-badge--green i  { color:#059669 !important; }
.pg-badge--amber  { background:rgba(245,158,11,.1);  color:#b45309 !important; border:1px solid rgba(245,158,11,.2); }
.pg-badge--amber i  { color:#b45309 !important; }
.pg-badge--red    { background:rgba(239,68,68,.1);   color:#dc2626 !important; border:1px solid rgba(239,68,68,.2); }
.pg-badge--red i    { color:#dc2626 !important; }
.pg-badge--blue   { background:rgba(99,102,241,.1);  color:#4f46e5 !important; border:1px solid rgba(99,102,241,.2); }
.pg-badge--blue i   { color:#4f46e5 !important; }
.pg-badge--slate  { background:rgba(100,116,139,.1); color:#64748b !important; border:1px solid rgba(100,116,139,.2); }
.pg-badge--slate i  { color:#64748b !important; }
.pg-empty { text-align:center; padding:3.5rem 1.5rem !important; }
.pg-empty > i { font-size:2.25rem !important; color:#cbd5e1 !important; display:block; margin-bottom:.7rem; }
.pg-empty > p { font-size:.875rem !important; color:var(--text-muted) !important; margin:0; }
.pg-btn-primary { display:inline-flex; align-items:center; gap:.5rem; background:var(--primary-gradient) !important; color:#fff !important; border:none; border-radius:.85rem; padding:.65rem 1.25rem; font-size:.9rem; font-weight:600; font-family:var(--font-primary); cursor:pointer; box-shadow:0 4px 14px var(--primary-glow); transition:all .22s cubic-bezier(0.16,1,0.3,1); white-space:nowrap; }
.pg-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,185,129,.3); }
.pg-btn-primary i { color:#fff !important; }
.pg-btn-outline { display:inline-flex; align-items:center; gap:.45rem; background:transparent; border:1px solid var(--border-color); border-radius:.7rem; padding:.6rem 1rem; font-size:.875rem; font-weight:500; color:var(--text-muted) !important; cursor:pointer; transition:all .18s ease; font-family:var(--font-primary); }
.pg-btn-outline:hover { background:#f1f5f9; color:var(--text-primary) !important; border-color:#cbd5e1; }
.pg-btn-outline i { color:var(--text-muted) !important; }
.pg-progress-wrap { margin:.5rem 0; }
.pg-progress-label { display:flex; justify-content:space-between; margin-bottom:.35rem; }
.pg-progress-label span { font-size:.75rem !important; color:var(--text-muted) !important; font-weight:500; }
.pg-progress-label strong { font-size:.75rem !important; color:var(--text-primary) !important; font-weight:700; }
.pg-progress-bar-outer { background:#e2e8f0; border-radius:99px; height:8px; overflow:hidden; }
.pg-progress-bar-fill { height:100%; background:var(--primary-gradient); border-radius:99px; transition:width .5s ease; }
.pg-avatar { width:38px; height:38px; border-radius:.65rem; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:#fff !important; flex-shrink:0; letter-spacing:.02em; }
.pg-avatar--sm { width:32px; height:32px; border-radius:.5rem; font-size:.7rem; }
.pg-avatar--lg { width:52px; height:52px; border-radius:.85rem; font-size:1rem; }
.pg-av-green  { background:linear-gradient(135deg,#10b981,#047857); }
.pg-av-violet { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.pg-av-sky    { background:linear-gradient(135deg,#0ea5e9,#0369a1); }
.pg-av-amber  { background:linear-gradient(135deg,#f59e0b,#b45309); }
.pg-av-rose   { background:linear-gradient(135deg,#f43f5e,#be123c); }
.pg-av-teal   { background:linear-gradient(135deg,#14b8a6,#0f766e); }
.pg-av-indigo { background:linear-gradient(135deg,#6366f1,#4338ca); }
.pg-tabs { display:flex; gap:.35rem; padding:.3rem; background:#f8fafc; border:1px solid var(--border-color); border-radius:.85rem; width:fit-content; }
.pg-tab-btn { display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:none; border-radius:.6rem; padding:.5rem 1rem; font-size:.85rem; font-weight:500; color:var(--text-muted) !important; cursor:pointer; transition:all .18s ease; font-family:var(--font-primary); }
.pg-tab-btn.active { background:#fff; color:var(--text-primary) !important; box-shadow:0 1px 4px rgba(15,23,42,.08); font-weight:600; }
.pg-tab-btn i { font-size:.82rem !important; color:inherit !important; }
.pg-dt-wrapper .dataTables_filter input { background:#f8fafc !important; border:1px solid var(--border-color) !important; border-radius:.7rem !important; padding:.55rem 1rem !important; font-size:.875rem !important; color:var(--text-primary) !important; min-width:220px; transition:all .2s ease !important; }
.pg-dt-wrapper .dataTables_filter input:focus { outline:none !important; border-color:var(--primary-color) !important; box-shadow:0 0 0 3px rgba(16,185,129,.1) !important; background:#fff !important; }
.pg-dt-wrapper .dataTables_length select { background:#f8fafc !important; border:1px solid var(--border-color) !important; border-radius:.6rem !important; padding:.5rem .75rem !important; font-size:.85rem !important; color:var(--text-primary) !important; cursor:pointer; }
.pg-dt-wrapper .dataTables_info { font-size:.82rem !important; color:var(--text-muted) !important; }

/* =============================================================
 * ADMIN DASHBOARD (dash-*)
 * ============================================================= */
.dash-charts-row { display:grid; grid-template-columns:2fr 1fr; gap:1rem; margin-top:1rem; }
@media(max-width:1024px) { .dash-charts-row { grid-template-columns:1fr; } }
.dash-lists-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
@media(max-width:960px) { .dash-lists-row { grid-template-columns:1fr; } }
.dash-chart-card { background:#fff; border:1px solid var(--border-color); border-radius:1.25rem; padding:1.5rem; box-shadow:var(--shadow-sm); }
.dash-chart-title { font-size:.95rem !important; font-weight:700 !important; color:var(--text-primary) !important; margin:0 0 1.25rem !important; }
.dash-list-link { font-size:.8rem !important; color:var(--primary-color) !important; font-weight:600; text-decoration:none; }
.dash-list-link:hover { text-decoration:underline; }

/* =============================================================
 * CUSTOMER DASHBOARD (cdash-*)
 * ============================================================= */
.cdash-hero { border-radius:0 !important; overflow:visible; position:relative; background:transparent !important; padding:1.5rem 0; margin-bottom:2rem; border-bottom:1px solid var(--border-color); box-shadow:none !important; animation:fadeIn .4s cubic-bezier(0.16,1,0.3,1) forwards; }
.cdash-hero::after { display:none; }
.cdash-hero-tag { display:inline-block; background:rgba(16,185,129,0.08); border-radius:99px; padding:.2rem .75rem; font-size:.72rem !important; font-weight:600; letter-spacing:.05em; color:var(--primary-color) !important; text-transform:uppercase; margin-bottom:.75rem; }
.cdash-hero-name { font-size:1.75rem !important; font-weight:800 !important; color:var(--text-primary) !important; margin:0 !important; letter-spacing:-.025em; line-height:1.15; }
.cdash-hero-desc { font-size:.85rem !important; color:var(--text-muted) !important; margin:.4rem 0 0 !important; }
.cdash-hero-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1rem; padding-top:.85rem; border-top:1px dashed var(--border-color); font-size:.78rem !important; }
.cdash-hero-meta-item { color:var(--text-muted) !important; }
.cdash-hero-meta-item strong { color:var(--text-primary) !important; font-weight:600; }
.cdash-contracts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media(max-width:768px) { .cdash-contracts-grid { grid-template-columns:1fr; } }
.cdash-contract-card { background:#fff; border:1px solid var(--border-color); border-radius:1rem; padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; box-shadow:none; transition:all .2s ease; }
.cdash-contract-card:hover { border-color:var(--primary-color); box-shadow:var(--shadow-sm); }

/* --- Minimal Customer Dashboard Metrics and Inline Grid --- */
.cdash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border-color); }
@media(max-width:900px) { .cdash-stats { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .cdash-stats { grid-template-columns:1fr; } }
.cdash-stat { background:transparent; border:none; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.cdash-stat-label { font-size:.72rem !important; color:var(--text-muted) !important; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.cdash-stat-value { font-size:1.5rem !important; font-weight:800 !important; color:var(--text-primary) !important; line-height:1.1; }
.cdash-stat-sub { font-size:.72rem !important; color:var(--text-muted) !important; margin-top:.1rem; }

.cdash-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:.75rem 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); margin:.5rem 0; }
.cdash-grid-col { display:flex; flex-direction:column; gap:.15rem; }
.cdash-col-label { font-size:.65rem !important; color:var(--text-muted) !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cdash-col-val { font-size:.82rem !important; color:var(--text-primary) !important; font-weight:700; }

.cdash-progress-minimal { display:flex; align-items:center; gap:.75rem; margin-top:.25rem; }
.cdash-progress-line { flex:1; height:4px; background:var(--border-color); border-radius:2px; overflow:hidden; }
.cdash-progress-fill { height:100%; background:var(--primary-color); border-radius:2px; }
.cdash-progress-text { font-size:.72rem !important; font-weight:700; color:var(--text-primary) !important; white-space:nowrap; }

.cdash-link-minimal { display:inline-flex; align-items:center; gap:.25rem; font-size:.82rem !important; font-weight:600 !important; color:var(--primary-color) !important; text-decoration:none; transition:opacity .15s ease; width:fit-content; }
.cdash-link-minimal:hover { opacity:.8; text-decoration:none; }
.cdash-contract-id   { font-size:.72rem !important; color:var(--text-muted) !important; font-weight:600; font-family:monospace; }
.cdash-contract-name { font-size:.95rem !important; font-weight:700 !important; color:var(--text-primary) !important; margin:.2rem 0 0 !important; }
.cdash-contract-model { font-size:.78rem !important; color:var(--text-muted) !important; }
.cdash-detail-grid { display:grid; grid-template-columns:340px 1fr; gap:1rem; }
@media(max-width:960px) { .cdash-detail-grid { grid-template-columns:1fr; } }

/* =============================================================
 * PAYMENTS PAGE (pmt-pg-*)
 * ============================================================= */
.pmt-txn-cell { display:flex; flex-direction:column; gap:.15rem; }
.pmt-txn-id   { font-size:.88rem !important; font-weight:700 !important; color:var(--text-primary) !important; font-family:monospace; }
.pmt-txn-item { font-size:.75rem !important; color:var(--text-muted) !important; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmt-actions  { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.pmt-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:576px) { .pmt-modal-grid { grid-template-columns:1fr; } }
.pmt-schedule-scroll { max-height:160px; overflow-y:auto; }
.pmt-schedule-row { display:flex; justify-content:space-between; align-items:center; padding:.45rem .75rem; border-radius:.5rem; margin-bottom:.2rem; background:#f8fafc; border:1px solid var(--border-color); }
.pmt-schedule-row:hover { background:#f0fdf4; border-color:rgba(16,185,129,.15); }
.pmt-schedule-num  { font-size:.82rem !important; font-weight:600 !important; color:var(--text-primary) !important; }
.pmt-schedule-date { font-size:.72rem !important; color:var(--text-muted) !important; }
.pmt-schedule-amt  { font-size:.82rem !important; font-weight:700 !important; color:var(--text-primary) !important; }
.pmt-quick-btn { display:inline-flex; align-items:center; gap:.3rem; background:#f8fafc; border:1px solid var(--border-color); border-radius:.55rem; padding:.35rem .75rem; font-size:.75rem; font-weight:600; color:var(--text-muted) !important; cursor:pointer; transition:all .18s ease; font-family:var(--font-primary); }
.pmt-quick-btn:hover { background:#e6f4ea; border-color:rgba(16,185,129,.25); color:var(--primary-color) !important; }

/* =============================================================
 * TRANSACTIONS / NEW INSTALLMENT (txn-pg-*)
 * ============================================================= */
.txn-layout { display:grid; grid-template-columns:1fr 380px; gap:1.25rem; align-items:start; }
@media(max-width:1200px) { .txn-layout { grid-template-columns:1fr; } }
.txn-calc-row { display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; }
.txn-calc-row + .txn-calc-row { border-top:1px solid #f1f5f9; }
.txn-calc-key { font-size:.82rem !important; color:var(--text-muted) !important; font-weight:400; }
.txn-calc-val { font-size:.88rem !important; color:var(--text-primary) !important; font-weight:600; }
.txn-calc-total { background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.15); border-radius:.75rem; padding:.75rem 1rem; margin-top:.75rem; }
.txn-calc-total-label { font-size:.75rem !important; color:var(--text-muted) !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.txn-calc-total-val { font-size:1.6rem !important; font-weight:800 !important; color:var(--primary-color) !important; line-height:1.1; }
.txn-schedule-item { display:flex; justify-content:space-between; align-items:center; padding:.5rem .25rem; font-size:.82rem; }
.txn-schedule-item + .txn-schedule-item { border-top:1px solid #f1f5f9; }
.txn-schedule-num  { font-weight:600 !important; color:var(--text-primary) !important; }
.txn-schedule-date { color:var(--text-muted) !important; font-size:.75rem !important; }
.txn-schedule-amt  { font-weight:700 !important; color:var(--text-primary) !important; }
.txn-cust-selected { background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.18); border-radius:.75rem; padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.txn-cust-selected-label { font-size:.72rem !important; color:var(--text-muted) !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.txn-cust-selected-name  { font-size:.95rem !important; font-weight:700 !important; color:var(--primary-color) !important; }
.txn-cust-selected-info  { font-size:.78rem !important; color:var(--text-muted) !important; }

/* =============================================================
 * REPORTS PAGE (rpt-*)
 * ============================================================= */
.rpt-layout { display:grid; grid-template-columns:300px 1fr; gap:1.25rem; align-items:start; }
@media(max-width:960px) { .rpt-layout { grid-template-columns:1fr; } }
.rpt-sidebar { position:sticky; top:1.5rem; }
.rpt-gen-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:var(--primary-gradient) !important; color:#fff !important; border:none; border-radius:.85rem; padding:.75rem; font-size:.9rem; font-weight:600; font-family:var(--font-primary); cursor:pointer; box-shadow:0 4px 12px var(--primary-glow); transition:all .2s ease; margin-top:.25rem; }
.rpt-gen-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(16,185,129,.3); }
.rpt-gen-btn i { color:#fff !important; }
.rpt-preview-placeholder { text-align:center; padding:4rem 2rem; }
.rpt-preview-placeholder i { font-size:2.75rem !important; color:#cbd5e1 !important; display:block; margin-bottom:.85rem; }
.rpt-preview-placeholder p { font-size:.875rem !important; color:var(--text-muted) !important; margin:0; }
.rpt-doc-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1rem; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:2px solid var(--border-color); }
.rpt-doc-biz-name { font-size:1.25rem !important; font-weight:800 !important; color:var(--primary-color) !important; margin:0 !important; }
.rpt-doc-biz-meta { font-size:.78rem !important; color:var(--text-muted) !important; margin:.2rem 0 0 !important; }
.rpt-doc-title { font-size:.9rem !important; font-weight:700 !important; color:var(--text-primary) !important; text-align:right; margin:0 !important; }
.rpt-doc-sub   { font-size:.75rem !important; color:var(--text-muted) !important; text-align:right; margin:.2rem 0 0 !important; }
.rpt-total-bar { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; background:#f8fafc; border:1px solid var(--border-color); border-radius:.85rem; margin-top:1.25rem; }
.rpt-total-label { font-size:.75rem !important; color:var(--text-muted) !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.rpt-total-value { font-size:1.5rem !important; font-weight:800 !important; color:var(--text-primary) !important; }
.rpt-total-value--danger { color:var(--danger-color) !important; }

/* =============================================================
 * SETTINGS PAGE (set-*)
 * ============================================================= */
.set-layout { display:grid; grid-template-columns:240px 1fr; gap:1.5rem; align-items:start; }
@media(max-width:900px) { .set-layout { grid-template-columns:1fr; } }
.set-sidebar { background:#fff; border:1px solid var(--border-color); border-radius:1.25rem; padding:1rem; box-shadow:var(--shadow-sm); position:sticky; top:1.5rem; }
.set-nav-item { display:flex; align-items:center; gap:.65rem; padding:.65rem 1rem; border-radius:.7rem; margin:.15rem 0; font-size:.875rem; font-weight:500; color:var(--text-muted) !important; cursor:pointer; transition:all .18s ease; text-decoration:none; border:none; background:transparent; width:100%; text-align:left; font-family:var(--font-primary); }
.set-nav-item:hover { background:#f1f5f9; color:var(--text-primary) !important; }
.set-nav-item.active { background:rgba(16,185,129,.1); color:var(--primary-hover) !important; font-weight:600; border:1px solid rgba(16,185,129,.15); }
.set-nav-item i { font-size:.9rem !important; color:inherit !important; }
.set-form-card { background:#fff; border:1px solid var(--border-color); border-radius:1.25rem; padding:1.75rem; box-shadow:var(--shadow-sm); }
.set-form-title { font-size:1.15rem !important; font-weight:700 !important; color:var(--text-primary) !important; margin:0 0 .35rem !important; }
.set-form-desc  { font-size:.82rem !important; color:var(--text-muted) !important; margin:0 0 1.5rem !important; }

/* =============================================================
 * USERS PAGE (usr-*)
 * ============================================================= */
.usr-info-callout { background:rgba(6,182,212,.05); border:1px solid rgba(6,182,212,.2); border-radius:.85rem; padding:1rem 1.25rem; display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1.25rem; }
.usr-info-callout i { font-size:1.1rem !important; color:#06b6d4 !important; flex-shrink:0; margin-top:.1rem; }
.usr-info-callout p { font-size:.82rem !important; color:var(--text-primary) !important; margin:0 !important; line-height:1.55; }
.usr-info-callout strong { font-weight:700; color:var(--text-primary) !important; }
.usr-email-cell { display:flex; align-items:center; gap:.75rem; }
.usr-uid-cell   { font-size:.72rem !important; color:var(--text-muted) !important; font-family:monospace; max-width:180px; overflow:hidden; text-overflow:ellipsis; }