/* ============================================
   PREMIUM TYPOGRAPHY SYSTEM
   File: css/premium-fonts.css
   
   Includes:
   - Apple-style typography (SF Pro / Inter)
   - Smart text-color system (auto black/white based on bg)
   - Responsive one-line KPI numbers (never clip, never wrap)
   - Modal, badge, button, alert, toast fixes
   - Dark mode support
   ============================================ */

/* ============================================
   FONT IMPORTS
   ============================================ */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&display=swap');
   
   /* ============================================
      CSS VARIABLES
      ============================================ */
   :root {
       --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 
                    'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', 
                    Menlo, Monaco, Consolas, monospace;
       --font-serif: 'Playfair Display', 'New York', Georgia, 'Times New Roman', serif;
       
       --fw-light: 300;
       --fw-regular: 400;
       --fw-medium: 500;
       --fw-semibold: 600;
       --fw-bold: 700;
       --fw-black: 800;
       
       --lh-tight: 1.2;
       --lh-snug: 1.35;
       --lh-normal: 1.5;
       --lh-relaxed: 1.65;
       
       --ls-tight: -0.025em;
       --ls-snug: -0.015em;
       --ls-normal: 0;
       --ls-wide: 0.025em;
       --ls-wider: 0.05em;
       
       --text-primary: #1c1c1e;
       --text-secondary: #3a3a3c;
       --text-tertiary: #6c6c70;
       --text-quaternary: #8e8e93;
       --text-placeholder: #c7c7cc;
       
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-rendering: optimizeLegibility;
       font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "cv11" 1;
   }
   
   /* ============================================
      GLOBAL BASE
      ============================================ */
   html {
       font-size: 16px;
       -webkit-text-size-adjust: 100%;
   }
   
   body {
       font-family: var(--font-sans) !important;
       font-weight: var(--fw-regular);
       font-size: 1rem;
       line-height: var(--lh-normal);
       letter-spacing: var(--ls-snug);
       color: var(--text-primary);
       font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   /* ============================================
      HEADINGS
      ============================================ */
   h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
       font-family: var(--font-sans) !important;
       font-weight: var(--fw-bold);
       color: var(--text-primary);
       letter-spacing: var(--ls-tight);
       line-height: var(--lh-tight);
       margin-bottom: 0.5em;
       -webkit-font-smoothing: antialiased;
   }
   
   h1, .h1 { font-size: 2.5rem; font-weight: var(--fw-black); letter-spacing: -0.03em; line-height: 1.1; }
   h2, .h2 { font-size: 1.875rem; font-weight: var(--fw-bold); letter-spacing: -0.028em; line-height: 1.15; }
   h3, .h3 { font-size: 1.5rem; font-weight: var(--fw-bold); letter-spacing: -0.022em; line-height: 1.2; }
   h4, .h4 { font-size: 1.25rem; font-weight: var(--fw-semibold); letter-spacing: -0.018em; line-height: 1.25; }
   h5, .h5 { font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.3; }
   h6, .h6 { font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: -0.012em; line-height: 1.35; }
   
   /* ============================================
      BODY TEXT
      ============================================ */
   p, .paragraph {
       font-family: var(--font-sans);
       font-size: 1rem;
       line-height: var(--lh-relaxed);
       letter-spacing: var(--ls-snug);
       color: var(--text-secondary);
       margin-bottom: 1rem;
   }
   
   small, .small {
       font-size: 0.875rem;
       letter-spacing: var(--ls-normal);
       color: var(--text-tertiary);
   }
   
   .lead {
       font-size: 1.125rem;
       font-weight: var(--fw-regular);
       line-height: var(--lh-relaxed);
       letter-spacing: var(--ls-snug);
       color: var(--text-secondary);
   }
   
   strong, b {
       font-weight: var(--fw-semibold);
       color: var(--text-primary);
   }
   
   /* ============================================
      LINKS
      ============================================ */
   a {
       color: #007aff;
       text-decoration: none;
       font-weight: var(--fw-medium);
       transition: opacity 0.15s ease;
   }
   
   a:hover {
       color: #0062cc;
       opacity: 0.85;
   }
   
   /* ============================================
      BUTTONS
      ============================================ */
   .btn {
       font-family: var(--font-sans) !important;
       font-weight: var(--fw-semibold);
       font-size: 0.9375rem;
       letter-spacing: var(--ls-snug);
       line-height: 1.2;
       -webkit-font-smoothing: antialiased;
   }
   
   .btn-sm { font-size: 0.8125rem; font-weight: var(--fw-semibold); }
   .btn-lg { font-size: 1.0625rem; font-weight: var(--fw-semibold); }
   
   /* ============================================
      FORM CONTROLS
      ============================================ */
   .form-control,
   .form-select,
   .input-group-text,
   textarea {
       font-family: var(--font-sans) !important;
       font-size: 0.9375rem;
       font-weight: var(--fw-regular);
       letter-spacing: var(--ls-snug);
       line-height: 1.4;
       color: var(--text-primary);
   }
   
   .form-control::placeholder,
   textarea::placeholder {
       color: var(--text-placeholder);
       font-weight: var(--fw-regular);
   }
   
   .form-label {
       font-family: var(--font-sans);
       font-size: 0.875rem;
       font-weight: var(--fw-semibold);
       letter-spacing: var(--ls-snug);
       color: var(--text-secondary);
       margin-bottom: 0.375rem;
   }
   
   .form-text, small.form-text {
       font-size: 0.8125rem;
       color: var(--text-tertiary);
       font-weight: var(--fw-regular);
       letter-spacing: var(--ls-normal);
   }
   
   /* ============================================
      TABLES
      ============================================ */
   .table {
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       letter-spacing: var(--ls-snug);
       color: var(--text-secondary);
   }
   
   .table thead th {
       font-family: var(--font-sans);
       font-weight: var(--fw-semibold);
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: var(--text-tertiary);
       -webkit-font-smoothing: antialiased;
   }
   
   .table tbody td {
       font-weight: var(--fw-regular);
       color: var(--text-secondary);
       line-height: 1.5;
   }
   
   .table tbody td strong, .table tbody td b {
       font-weight: var(--fw-semibold);
       color: var(--text-primary);
   }
   
   .table td.numeric, .table td.amount,
   .financial-amount, [data-amount] {
       font-family: var(--font-mono) !important;
       font-variant-numeric: tabular-nums;
       font-feature-settings: "tnum" 1;
       letter-spacing: -0.02em;
   }
   
   /* ============================================
      CARDS
      ============================================ */
   .card-title {
       font-family: var(--font-sans);
       font-weight: var(--fw-semibold);
       font-size: 1.0625rem;
       letter-spacing: var(--ls-snug);
       color: var(--text-primary);
   }
   
   .card-text {
       font-size: 0.9375rem;
       line-height: var(--lh-relaxed);
       color: var(--text-secondary);
   }
   
   .card-header h5, .card-header .card-title {
       font-weight: var(--fw-bold);
       letter-spacing: var(--ls-tight);
   }
   
   /* ============================================
      BADGES
      ============================================ */
   .badge {
       font-family: var(--font-sans);
       font-size: 0.6875rem;
       font-weight: var(--fw-semibold);
       letter-spacing: 0.04em;
       text-transform: uppercase;
       padding: 0.35em 0.7em;
       line-height: 1;
   }
   
   /* ============================================
      SIDEBAR NAVIGATION
      ============================================ */
   .sidebar .nav-link, .nav-link {
       font-family: var(--font-sans);
       font-weight: var(--fw-medium);
       font-size: 0.9375rem;
       letter-spacing: var(--ls-snug);
       -webkit-font-smoothing: antialiased;
   }
   
   .nav-link.active { font-weight: var(--fw-semibold); }
   
   .nav-section-title, .sidebar .nav-section-title {
       font-family: var(--font-sans);
       font-weight: var(--fw-bold);
       font-size: 0.6875rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-quaternary);
   }
   
   /* ============================================
      MODALS
      ============================================ */
   .modal-title {
       font-family: var(--font-sans);
       font-weight: var(--fw-bold);
       font-size: 1.25rem;
       letter-spacing: var(--ls-tight);
       color: var(--text-primary);
   }
   
   .modal-body {
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       line-height: var(--lh-relaxed);
       color: var(--text-secondary);
   }
   
   /* ============================================
      TOASTS
      ============================================ */
   .toast, .toast-notification {
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       font-weight: var(--fw-medium);
       letter-spacing: var(--ls-snug);
       -webkit-font-smoothing: antialiased;
   }
   
   /* ============================================
      DROPDOWNS
      ============================================ */
   .dropdown-item {
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       font-weight: var(--fw-medium);
       letter-spacing: var(--ls-snug);
       color: var(--text-secondary);
   }
   
   .dropdown-header {
       font-family: var(--font-sans);
       font-size: 0.6875rem;
       font-weight: var(--fw-bold);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--text-quaternary);
   }
   
   /* ============================================
      TOOLTIPS / POPOVERS
      ============================================ */
   .tooltip, .popover {
       font-family: var(--font-sans);
       font-size: 0.8125rem;
       font-weight: var(--fw-medium);
       letter-spacing: var(--ls-snug);
   }
   
   /* ============================================
      KPI NUMBERS — Fits on one line, never clips
      ============================================ */
   
   .kpi-value,
   .card-body h3,
   .card-body h4 {
       font-size: clamp(0.75rem, 1vw + 0.4rem, 1.1rem) !important;
       line-height: 1.2 !important;
       font-weight: 700 !important;
       letter-spacing: -0.025em !important;
       font-variant-numeric: tabular-nums !important;
       font-feature-settings: "tnum" 1, "cv11" 1;
       white-space: nowrap !important;
       overflow: visible !important;
       text-overflow: clip !important;
       word-break: keep-all !important;
       overflow-wrap: normal !important;
       min-width: 0 !important;
       max-width: 100% !important;
       display: inline-block;
   }
   
   /* Colored KPI cards */
   .card.bg-primary .card-body h3,
   .card.bg-primary .card-body h4,
   .card.bg-success .card-body h3,
   .card.bg-success .card-body h4,
   .card.bg-warning .card-body h3,
   .card.bg-warning .card-body h4,
   .card.bg-danger .card-body h3,
   .card.bg-danger .card-body h4,
   .card.bg-info .card-body h3,
   .card.bg-info .card-body h4,
   .card.bg-dark .card-body h3,
   .card.bg-dark .card-body h4,
   .card[style*="linear-gradient"] h3,
   .card[style*="linear-gradient"] h4,
   .card[style*="linear-gradient"] .kpi-value {
       font-size: clamp(0.72rem, 0.95vw + 0.35rem, 1.05rem) !important;
       white-space: nowrap !important;
       overflow: visible !important;
       word-break: keep-all !important;
   }
   
   /* Labels & subtitles */
   .kpi-label,
   .kpi-sub,
   .card-body p,
   .card-body small,
   .card-body .small {
       font-size: clamp(0.6rem, 0.35vw + 0.45rem, 0.72rem) !important;
       line-height: 1.25 !important;
       letter-spacing: -0.005em !important;
   }
   
   /* Card headings — allow shrink, not clip */
   .card-body h1,
   .card-body h2,
   .card-body h3,
   .card-body h4,
   .card-body h5,
   .card-body h6 {
       white-space: nowrap !important;
       overflow: visible !important;
       word-break: keep-all !important;
       text-overflow: clip !important;
       min-width: 0 !important;
   }
   
   /* Flexible card containers */
   .card-body {
       min-width: 0 !important;
       overflow: visible !important;
   }
   
   .row > [class*="col-"] {
       min-width: 0 !important;
   }
   
   .row > [class*="col-"] > .card {
       min-width: 0 !important;
       overflow: visible !important;
   }
   
   .row > [class*="col-"] > .card > .card-body {
       min-width: 0 !important;
       overflow: visible !important;
   }
   
   /* Colored KPI cards — allow breathing room */
   .card.bg-primary,
   .card.bg-success,
   .card.bg-warning,
   .card.bg-danger,
   .card.bg-info,
   .card.bg-dark,
   .card.bg-secondary,
   .card[style*="linear-gradient"] {
       overflow: visible !important;
   }
   
   /* Specific page IDs */
   #totalIncome,
   #totalExpenses,
   #netProfitCard,
   #pendingExpensesCard,
   #pendingExpenses,
   #approvedExpenses,
   #thisMonthExpenses,
   #totalRevenue,
   #totalAgentPayouts,
   #pendingPayouts,
   #totalNetProfit,
   #totalDevelopers,
   #totalEarned,
   #totalReceived,
   #totalOutstanding,
   #totalDealsStat,
   #totalValueStat,
   #inProgressDealsStat,
   #completedDealsStat,
   #kpiEarned,
   #kpiCollected,
   #kpiOutstanding,
   #kpiRate,
   #progressEarned,
   #progressCollected,
   #progressRemaining,
   #agingCurrent,
   #aging30,
   #aging60,
   #aging90,
   #totalEmployees,
   #activeEmployees,
   #pendingLeaves,
   #departments,
   #teamSize,
   #teamLeads,
   #teamDeals,
   #teamRevenue,
   #totalTargetAmount,
   #totalAchieved,
   #overallCompletion,
   #activeTargets,
   #totalSalaryCost,
   #totalOfficeCost,
   #totalTaxCost,
   #totalMonthlyCost,
   #totalPayroll,
   #paidAmount,
   #pendingAmount,
   #overdueAmount,
   #totalGross,
   #totalNet {
       font-size: clamp(0.75rem, 1vw + 0.35rem, 1.1rem) !important;
       line-height: 1.2 !important;
       font-weight: 700 !important;
       letter-spacing: -0.025em !important;
       white-space: nowrap !important;
       overflow: visible !important;
       word-break: keep-all !important;
       font-variant-numeric: tabular-nums !important;
       font-feature-settings: "tnum" 1;
       min-width: 0 !important;
   }
   
   /* ============================================
      BREAKPOINT REFINEMENTS
      ============================================ */
   
   /* Huge screens (≥1800px) */
   @media (min-width: 1800px) {
       .kpi-value,
       .card-body h3,
       .card-body h4,
       .card[style*="linear-gradient"] h3,
       .card[style*="linear-gradient"] h4,
       .card[style*="linear-gradient"] .kpi-value,
       #totalIncome,
       #totalExpenses,
       #netProfitCard,
       #pendingExpensesCard,
       #totalRevenue,
       #totalAgentPayouts,
       #pendingPayouts,
       #totalNetProfit,
       #totalEarned,
       #totalReceived,
       #totalOutstanding,
       #kpiEarned,
       #kpiCollected,
       #kpiOutstanding {
           font-size: 1.1rem !important;
       }
   }
   
   /* Wide desktop (1200–1799px) */
   @media (min-width: 1200px) and (max-width: 1799px) {
       .kpi-value,
       .card-body h3 {
           font-size: clamp(0.95rem, 0.85vw + 0.3rem, 1.1rem) !important;
       }
   }
   
   /* Laptop (992–1199px) */
   @media (min-width: 992px) and (max-width: 1199px) {
       .kpi-value,
       .card-body h3,
       .card-body h4 {
           font-size: clamp(0.88rem, 0.9vw + 0.3rem, 1.02rem) !important;
       }
   }
   
   /* Tablet (768–991px) */
   @media (min-width: 768px) and (max-width: 991px) {
       .kpi-value,
       .card-body h3,
       .card-body h4 {
           font-size: clamp(0.82rem, 1.2vw + 0.2rem, 0.98rem) !important;
       }
       
       .kpi-label,
       .kpi-sub,
       .card-body small {
           font-size: 0.65rem !important;
       }
   }
   
   /* Large mobile (576–767px) */
   @media (min-width: 576px) and (max-width: 767px) {
       .kpi-value,
       .card-body h3,
       .card-body h4 {
           font-size: clamp(0.78rem, 1.5vw + 0.15rem, 0.92rem) !important;
       }
       
       .kpi-label,
       .kpi-sub,
       .card-body small {
           font-size: 0.62rem !important;
       }
       
       .card-body p {
           font-size: 0.68rem !important;
       }
   }
   
   /* Small mobile (375–575px) */
   @media (min-width: 375px) and (max-width: 575px) {
       .kpi-value,
       .card-body h3,
       .card-body h4 {
           font-size: clamp(0.72rem, 1.7vw + 0.1rem, 0.88rem) !important;
       }
       
       .kpi-label,
       .kpi-sub,
       .card-body small {
           font-size: 0.6rem !important;
       }
       
       .card-body {
           padding: 12px !important;
       }
       
       .card-body p {
           font-size: 0.65rem !important;
       }
   }
   
   /* Very small mobile (≤374px) */
   @media (max-width: 374px) {
       .kpi-value,
       .card-body h3,
       .card-body h4 {
           font-size: clamp(0.68rem, 1.9vw + 0.05rem, 0.82rem) !important;
       }
       
       .kpi-label,
       .kpi-sub,
       .card-body small {
           font-size: 0.55rem !important;
       }
       
       .card-body {
           padding: 10px !important;
       }
   }
   
   /* Ultra-narrow (≤320px) */
   @media (max-width: 320px) {
       .kpi-value,
       .card-body h3,
       .card-body h4 {
           font-size: 0.7rem !important;
           letter-spacing: -0.03em !important;
       }
       
       .kpi-label,
       .kpi-sub,
       .card-body small {
           font-size: 0.52rem !important;
       }
   }
   
   /* Column-size tuning */
   @media (min-width: 992px) {
       .col-lg-4 .kpi-value,
       .col-lg-4 .card-body h3 {
           font-size: clamp(0.95rem, 0.65vw + 0.55rem, 1.08rem) !important;
       }
       
       .col-lg-2 .kpi-value,
       .col-lg-2 .card-body h3,
       .col-md-2 .kpi-value,
       .col-md-2 .card-body h3 {
           font-size: clamp(0.75rem, 0.45vw + 0.4rem, 0.9rem) !important;
       }
       
       .col-lg-3 .kpi-value,
       .col-lg-3 .card-body h3 {
           font-size: clamp(0.88rem, 0.55vw + 0.5rem, 1.02rem) !important;
       }
   }
   
   /* Currency prefix */
   .kpi-value span.currency,
   .card-body h3 span.currency {
       font-size: 0.82em !important;
       font-weight: 600 !important;
       opacity: 0.85;
       margin-right: 2px;
   }
   
   /* ============================================
      SMART TEXT COLOR — Based on Background
      ============================================ */
   
   /* ---- LIGHT backgrounds → BLACK text ---- */
   .bg-info,
   .bg-info *,
   .card.bg-info,
   .card.bg-info *,
   .badge.bg-info,
   .alert-info,
   .alert-info *,
   .list-group-item-info {
       color: #000000 !important;
   }
   
   .bg-warning,
   .bg-warning *,
   .card.bg-warning,
   .card.bg-warning *,
   .badge.bg-warning,
   .alert-warning,
   .alert-warning * {
       color: #000000 !important;
   }
   
   .bg-success,
   .bg-success *,
   .card.bg-success,
   .card.bg-success *,
   .badge.bg-success,
   .alert-success,
   .alert-success * {
       color: #000000 !important;
   }
   
   .bg-light,
   .bg-light *,
   .bg-white,
   .bg-white *,
   .card.bg-light,
   .card.bg-light *,
   .badge.bg-light,
   .alert-light,
   .alert-light * {
       color: #000000 !important;
   }
   
   /* ---- DARK backgrounds → WHITE text ---- */
   .bg-primary,
   .bg-primary *,
   .card.bg-primary,
   .card.bg-primary *,
   .badge.bg-primary,
   .alert-primary,
   .alert-primary * {
       color: #ffffff !important;
   }
   
   .bg-danger,
   .bg-danger *,
   .card.bg-danger,
   .card.bg-danger *,
   .badge.bg-danger,
   .alert-danger,
   .alert-danger * {
       color: #ffffff !important;
   }
   
   .bg-dark,
   .bg-dark *,
   .card.bg-dark,
   .card.bg-dark *,
   .badge.bg-dark,
   .alert-dark,
   .alert-dark * {
       color: #ffffff !important;
   }
   
   .bg-gradient-primary, .bg-gradient-primary *,
   .bg-gradient-success, .bg-gradient-success *,
   .bg-gradient-danger, .bg-gradient-danger *,
   .bg-gradient-dark, .bg-gradient-dark * {
       color: #ffffff !important;
   }
   
   /* ---- KPI Cards (gradient-based) ---- */
   .kpi-gradient-blue, .kpi-gradient-blue *,
   .kpi-gradient-purple, .kpi-gradient-purple *,
   .kpi-gradient-red, .kpi-gradient-red *,
   .kpi-gradient-dark, .kpi-gradient-dark * {
       color: #ffffff !important;
   }
   
   .kpi-gradient-green, .kpi-gradient-green * {
       color: #000000 !important;
   }
   
   .kpi-gradient-orange, .kpi-gradient-orange * {
       color: #000000 !important;
   }
   
   /* ---- Text color utilities ---- */
   .text-white, .text-white * { color: #ffffff !important; }
   .text-black, .text-black * { color: #000000 !important; }
   .text-dark,  .text-dark *  { color: #1c1c1e !important; }
   .text-muted                  { color: #6c6c70 !important; }
   
   /* Muted text inside dark backgrounds */
   .bg-primary .text-muted,
   .bg-danger .text-muted,
   .bg-dark .text-muted,
   .card.bg-primary .text-muted,
   .card.bg-danger .text-muted,
   .card.bg-dark .text-muted,
   .kpi-gradient-blue .text-muted,
   .kpi-gradient-purple .text-muted,
   .kpi-gradient-red .text-muted {
       color: rgba(255, 255, 255, 0.75) !important;
   }
   
   /* ---- Modal headers ---- */
   .modal-header.bg-warning, .modal-header.bg-warning *,
   .modal-header.bg-info,    .modal-header.bg-info *,
   .modal-header.bg-success, .modal-header.bg-success *,
   .modal-header.bg-light,   .modal-header.bg-light * {
       color: #000000 !important;
   }
   
   .modal-header.bg-warning .btn-close,
   .modal-header.bg-info .btn-close,
   .modal-header.bg-success .btn-close,
   .modal-header.bg-light .btn-close {
       filter: none !important;
       opacity: 0.6;
   }
   
   .modal-header.bg-primary, .modal-header.bg-primary *,
   .modal-header.bg-danger,  .modal-header.bg-danger *,
   .modal-header.bg-dark,    .modal-header.bg-dark * {
       color: #ffffff !important;
   }
   
   .modal-header.bg-primary .btn-close,
   .modal-header.bg-danger .btn-close,
   .modal-header.bg-dark .btn-close {
       filter: brightness(0) invert(1);
   }
   
   /* ---- Toasts ---- */
   .toast-notification.toast-success, .toast-notification.toast-success * { color: #ffffff !important; }
   .toast-notification.toast-error,   .toast-notification.toast-error *   { color: #ffffff !important; }
   .toast-notification.toast-warning, .toast-notification.toast-warning * { color: #000000 !important; }
   .toast-notification.toast-info,    .toast-notification.toast-info *    { color: #ffffff !important; }
   
   /* ---- Progress bars ---- */
   .progress-bar.bg-primary,
   .progress-bar.bg-success,
   .progress-bar.bg-danger,
   .progress-bar.bg-info {
       color: #ffffff !important;
   }
   
   .progress-bar.bg-warning {
       color: #000000 !important;
   }
   
   /* ---- Buttons ---- */
   .btn-warning, .btn-info, .btn-light {
       color: #000000 !important;
   }
   .btn-warning:hover, .btn-info:hover, .btn-light:hover {
       color: #000000 !important;
   }
   
   .btn-primary, .btn-success, .btn-danger, .btn-dark {
       color: #ffffff !important;
   }
   .btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-dark:hover {
       color: #ffffff !important;
   }
   
   /* ---- Alerts ---- */
   .alert-warning, .alert-warning *,
   .alert-info,    .alert-info *,
   .alert-success, .alert-success *,
   .alert-light,   .alert-light * {
       color: #000000 !important;
   }
   
   .alert-primary, .alert-primary *,
   .alert-danger,  .alert-danger *,
   .alert-dark,    .alert-dark * {
       color: #ffffff !important;
   }
   
   /* ---- Card text inside bg-* cards ---- */
   .card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3,
   .card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6,
   .card.bg-warning p, .card.bg-warning span, .card.bg-warning small,
   .card.bg-warning div,
   .card.bg-info h1, .card.bg-info h2, .card.bg-info h3,
   .card.bg-info h4, .card.bg-info h5, .card.bg-info h6,
   .card.bg-info p, .card.bg-info span, .card.bg-info small,
   .card.bg-info div,
   .card.bg-success h1, .card.bg-success h2, .card.bg-success h3,
   .card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
   .card.bg-success p, .card.bg-success span, .card.bg-success small,
   .card.bg-success div,
   .card.bg-light h1, .card.bg-light h2, .card.bg-light h3,
   .card.bg-light h4, .card.bg-light h5, .card.bg-light h6,
   .card.bg-light p, .card.bg-light span, .card.bg-light small,
   .card.bg-light div {
       color: #000000 !important;
   }
   
   .card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3,
   .card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
   .card.bg-primary p, .card.bg-primary span, .card.bg-primary small,
   .card.bg-primary div,
   .card.bg-danger h1, .card.bg-danger h2, .card.bg-danger h3,
   .card.bg-danger h4, .card.bg-danger h5, .card.bg-danger h6,
   .card.bg-danger p, .card.bg-danger span, .card.bg-danger small,
   .card.bg-danger div,
   .card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3,
   .card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6,
   .card.bg-dark p, .card.bg-dark span, .card.bg-dark small,
   .card.bg-dark div {
       color: #ffffff !important;
   }
   
   /* ============================================
      PREMIUM DIALOG STYLES
      ============================================ */
   .dialog-modal .modal-dialog {
       max-width: 420px !important;
       width: 420px !important;
       margin: 1.75rem auto !important;
       animation: dialogPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   
   @keyframes dialogPopIn {
       0%   { transform: scale(0.9); opacity: 0; }
       100% { transform: scale(1);   opacity: 1; }
   }
   
   .dialog-content {
       border: none;
       border-radius: 20px !important;
       overflow: hidden;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 
                   0 0 0 1px rgba(0, 0, 0, 0.05);
       font-family: var(--font-sans);
   }
   
   .dialog-header {
       padding: 24px 24px 16px;
       text-align: center;
       color: white;
       position: relative;
   }
   
   .dialog-icon-wrap {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       display: flex;
       align-items: center;
       justify-content: center;
       margin: -52px auto 12px;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
       backdrop-filter: blur(10px);
   }
   
   .dialog-icon-wrap i {
       font-size: 1.75rem;
       color: white;
   }
   
   .dialog-title {
       font-family: var(--font-sans);
       font-size: 1.25rem;
       font-weight: var(--fw-bold);
       letter-spacing: var(--ls-tight);
       color: white;
       margin: 0;
       -webkit-font-smoothing: antialiased;
   }
   
   .dialog-body {
       padding: 24px;
       text-align: center;
   }
   
   .dialog-message {
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       font-weight: var(--fw-regular);
       line-height: var(--lh-relaxed);
       letter-spacing: var(--ls-snug);
       color: var(--text-secondary);
       margin: 0;
       word-wrap: break-word;
   }
   
   .dialog-input-wrap {
       margin-top: 16px;
       text-align: left;
   }
   
   .dialog-input {
       border-radius: 12px;
       border: 1.5px solid #e5e5ea;
       padding: 12px 16px;
       font-size: 0.9375rem;
       font-family: var(--font-sans);
       transition: all 0.2s;
       width: 100%;
   }
   
   .dialog-input:focus {
       border-color: #007aff;
       box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
       outline: none;
   }
   
   .dialog-footer {
       padding: 0 24px 24px;
       display: flex;
       gap: 10px;
       justify-content: center;
   }
   
   .dialog-btn {
       flex: 1;
       padding: 12px 20px;
       border-radius: 12px;
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       font-weight: var(--fw-semibold);
       letter-spacing: var(--ls-snug);
       border: none;
       transition: all 0.2s;
       max-width: 180px;
       -webkit-font-smoothing: antialiased;
   }
   
   .dialog-btn-cancel {
       background: #f2f2f7;
       color: var(--text-secondary);
   }
   
   .dialog-btn-cancel:hover {
       background: #e5e5ea;
       color: var(--text-primary);
   }
   
   .dialog-btn-confirm {
       color: white;
   }
   
   .dialog-btn-confirm:hover {
       transform: translateY(-1px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
   }
   
   .dialog-header, .dialog-header *,
   .dialog-title,
   .dialog-icon-wrap, .dialog-icon-wrap i {
       color: #ffffff !important;
   }
   
   /* Mobile dialog */
   @media (max-width: 576px) {
       .dialog-modal .modal-dialog {
           max-width: calc(100% - 24px) !important;
           width: calc(100% - 24px) !important;
           margin: 12px auto !important;
       }
       
       .dialog-footer {
           flex-direction: column-reverse;
       }
       
       .dialog-btn {
           max-width: 100%;
           width: 100%;
       }
       
       .dialog-body {
           padding: 20px;
       }
       
       .dialog-header {
           padding: 20px 20px 14px;
       }
       
       .dialog-title {
           font-size: 1.125rem;
       }
   }
   
   /* ============================================
      GLOBAL MODAL WIDTH CONSTRAINTS
      ============================================ */
   .modal .modal-dialog {
       max-width: 520px !important;
       margin: 1.75rem auto !important;
   }
   
   .modal .modal-dialog.modal-sm {
       max-width: 400px !important;
   }
   
   .modal .modal-dialog.modal-lg {
       max-width: 800px !important;
   }
   
   .modal .modal-dialog.modal-xl {
       max-width: 1140px !important;
   }
   
   .modal.dialog-modal .modal-dialog {
       max-width: 420px !important;
       width: 420px !important;
   }
   
   .modal .modal-content {
       width: 100% !important;
       max-width: 100% !important;
       border: none !important;
       border-radius: 20px !important;
       overflow: hidden !important;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
                   0 0 0 1px rgba(0, 0, 0, 0.05) !important;
   }
   
   .modal .modal-header {
       padding: 20px 24px !important;
       border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
       display: flex !important;
       align-items: center !important;
       justify-content: space-between !important;
       border-radius: 20px 20px 0 0 !important;
   }
   
   .modal .modal-title {
       font-size: 1.125rem !important;
       font-weight: 700 !important;
       letter-spacing: -0.02em !important;
       margin: 0 !important;
   }
   
   .modal .modal-body {
       padding: 24px !important;
       max-height: 70vh !important;
       overflow-y: auto !important;
   }
   
   .modal .modal-footer {
       padding: 16px 24px !important;
       border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
       display: flex !important;
       justify-content: flex-end !important;
       gap: 10px !important;
       border-radius: 0 0 20px 20px !important;
       background: #fafafa !important;
   }
   
   @media (max-width: 576px) {
       .modal .modal-dialog,
       .modal .modal-dialog.modal-sm,
       .modal .modal-dialog.modal-lg,
       .modal .modal-dialog.modal-xl,
       .modal.dialog-modal .modal-dialog {
           max-width: calc(100% - 24px) !important;
           width: calc(100% - 24px) !important;
           margin: 12px auto !important;
       }
       
       .modal .modal-header {
           padding: 16px 20px !important;
       }
       
       .modal .modal-body {
           padding: 20px !important;
           max-height: 75vh !important;
       }
       
       .modal .modal-footer {
           padding: 14px 20px !important;
           flex-direction: column-reverse !important;
       }
       
       .modal .modal-footer .btn {
           width: 100% !important;
       }
   }
   
   /* ============================================
      DARK MODE SUPPORT
      ============================================ */
   body.dark-mode {
       --text-primary: #f2f2f7;
       --text-secondary: #d1d1d6;
       --text-tertiary: #aeaeb2;
       --text-quaternary: #8e8e93;
       --text-placeholder: #48484a;
   }
   
   body.dark-mode .dialog-content { background: #1c1c1e; }
   body.dark-mode .dialog-message { color: #d1d1d6; }
   body.dark-mode .dialog-input {
       background: #2c2c2e;
       border-color: #3a3a3c;
       color: #f2f2f7;
   }
   body.dark-mode .dialog-btn-cancel {
       background: #2c2c2e;
       color: #f2f2f7;
   }
   
   /* ============================================
      RESPONSIVE
      ============================================ */
   @media (max-width: 576px) {
       h1, .h1 { font-size: 2rem; }
       h2, .h2 { font-size: 1.5rem; }
       h3, .h3 { font-size: 1.25rem; }
       
       .dialog-modal .modal-dialog {
           max-width: calc(100% - 24px);
           margin: 12px auto;
       }
       .dialog-footer { flex-direction: column-reverse; }
       .dialog-btn { max-width: 100%; }
   }
   
   /* ============================================
      PRINT
      ============================================ */
   @media print {
       body, h1, h2, h3, h4, h5, h6, p, table, .btn {
           font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
           color: #000 !important;
       }
   }
   /* ============================================
   FIX FOR KPI STAT CARDS TEXT VISIBILITY
   ============================================ */

/* Force white text and a slight shadow on dark/bright gradients (Blue, Pink, Yellow) */
.card[style*="linear-gradient"] h3, 
.card[style*="linear-gradient"] p, 
.card[style*="linear-gradient"] small,
.card[style*="linear-gradient"] span,
.card[style*="linear-gradient"] .opacity-75 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Exclude the yellow card from white text, it needs black text to be readable */
.card[style*="linear-gradient(135deg, #ffc107"] h3,
.card[style*="linear-gradient(135deg, #ffc107"] p,
.card[style*="linear-gradient(135deg, #ffc107"] small,
.card[style*="linear-gradient(135deg, #ffc107"] span,
.card[style*="linear-gradient(135deg, #ffc107"] .opacity-75 {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Increase font weight for the numbers */
.card[style*="linear-gradient"] h3 {
    font-weight: 800 !important;
}

/* Make the labels ("Total Leads", etc.) solid white instead of faded */
.card[style*="linear-gradient"] .opacity-75 {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}