:root {


       --primary: #4e308f;
       --primary-hover: #6041bf;
       --primary-color: #1a4178;
       --light-grey: #f8f9fa;
       --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

       /* Custom Color Palette */
       --custom-primary: #2563eb;
       --custom-success: #059669;
       --custom-warning: #d97706;
       --custom-danger: #dc2626;
       --custom-info: #0891b2;
       --custom-secondary: #6b7280;
   }

   body {
       background: var(--light-grey);
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }

   .btn-primary {
       background: var(--primary) !important;
   }

   .btn-primary:hover {
       background: var(--primary-hover) !important;
   }

   /* Custom Color Classes */
   .text-primary {
       color: var(--primary-color) !important;
   }

   .text-success {
       color: var(--custom-success) !important;
   }

   .text-warning {
       color: var(--custom-warning) !important;
   }

   .text-danger {
       color: var(--custom-danger) !important;
   }

   .text-info {
       color: var(--custom-info) !important;
   }

   .text-secondary {
       color: var(--custom-secondary) !important;
   }

   .bg-primary {
       background-color: var(--primary) !important;
   }

   .bg-success {
       background-color: var(--custom-success) !important;
   }

   .bg-warning {
       background-color: var(--custom-warning) !important;
   }

   .bg-danger {
       background-color: var(--custom-danger) !important;
   }

   .bg-info {
       background-color: var(--custom-info) !important;
   }

   .bg-secondary {
       background-color: var(--custom-secondary) !important;
   }

   .navbar {
       background: var(--primary-color) !important;
       box-shadow: var(--shadow);
       border-radius: 0 0 20px 20px;
   }

   .navbar-brand {
       font-weight: 700;
       color: white !important;
   }

   .nav-link {
       color: rgba(255, 255, 255, 0.8) !important;
       font-weight: 500;
   }

   .nav-link:hover {
       color: white !important;
   }

   .card {
       border: none;
       border-radius: 20px;
       box-shadow: var(--shadow);
       transition: all 0.3s ease;
       background: white;
   }

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

   .filter-card {
       background: white;
       border-radius: 20px;
       padding: 1.5rem;
       box-shadow: var(--shadow);
       margin-bottom: 2rem;
       position: sticky;
       top: 10px;
       z-index: 100;
       border: 2px solid #e9ecef;
   }

   .filter-row {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
       align-items: end;
   }

   .filter-group {
       flex: 1;
       min-width: 200px;
   }

   .form-select,
   .form-control {
       border-radius: 10px;
       border: 2px solid #e9ecef;
       padding: 0.75rem;
   }

   .form-select:focus,
   .form-control:focus {
       border-color: var(--primary-color);
       box-shadow: 0 0 0 0.2rem rgba(26, 65, 120, 0.25);
   }

   .btn-primary {
       background: var(--primary-color);
       border: none;
       border-radius: 10px;
       padding: 0.75rem 1.5rem;
       font-weight: 600;
   }

   .btn-outline-secondary {
       border-radius: 10px;
       padding: 0.75rem 1.5rem;
       font-weight: 600;
   }

   .stat-card {
       padding: 2rem;
       text-align: center;
   }

   .stat-icon {
       width: 60px;
       height: 60px;
       border-radius: 15px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1rem;
       font-size: 1.5rem;
       color: white;
   }

   .stat-number {
       font-size: 2.5rem;
       font-weight: 800;
       color: #333;
       margin-bottom: 0.5rem;
   }

   .stat-label {
       color: #666;
       font-weight: 600;
       text-transform: uppercase;
       font-size: 0.85rem;
       letter-spacing: 0.5px;
   }

   .chart-container {
       position: relative;
       height: 300px;
       padding: 1.5rem;
   }

   .section-title {
       color: var(--primary-color);
       font-weight: 700;
       margin-bottom: 1.5rem;
       display: flex;
       align-items: center;
   }

   .section-title i {
       margin-right: 10px;
       width: 30px;
       height: 30px;
       background: var(--primary-color);
       color: white;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.9rem;
   }

   .logout-btn {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       color: white;
       border-radius: 10px;
       padding: 0.5rem 1rem;
       transition: all 0.3s ease;
   }

   .logout-btn:hover {
       background: rgba(255, 255, 255, 0.2);
       color: white;
   }

   .welcome-section {
       background: white;
       border-radius: 20px;
       padding: 1rem 1.5rem 1rem 1.5rem;
       box-shadow: var(--shadow);
       margin-bottom: 2rem;
   }

   .welcome-title {
       color: var(--primary-color);
       font-weight: 700;
       margin-bottom: 0.5rem;
   }

   .welcome-subtitle {
       color: #666;
       font-weight: 500;
   }

   .data-table {
       background: white;
       border-radius: 15px;
       overflow: hidden;
   }

   .table th {
       background: var(--primary-color);
       color: white;
       border: none;
       padding: 1rem;
       font-weight: 600;
   }

   .table td {
       padding: 1rem;
       border-color: #f8f9fa;
   }

   .col-md-2-4 {
       width: 20%;
       flex: 0 0 20%;
       max-width: 20%;
       padding-left: 0.5rem;
       padding-right: 0.5rem;
   }

   @media (max-width: 768px) {
       .col-md-2-4 {
           width: 100%;
           flex: 0 0 100%;
           max-width: 100%;
           margin-bottom: 1rem;
       }
   }


   .compact-card-sm {
       display: flex;
       flex-direction: column;
       cursor: pointer !important;
       transition: transform 0.2s ease;
   }

   .compact-card-sm:hover {
       cursor: pointer !important;
       transform: translateY(-3px);
   }

   .compact-card-sm.active-card {
       border: 2px solid var(--primary) !important;
       box-shadow: 0 0 15px rgba(37, 99, 235, 0.3) !important;
       transform: translateY(-2px) !important;
   }

   .compact-card-sm .card-body {
       flex: 1;
       display: flex;
       flex-direction: column;
   }

   .compact-card {
       height: 260px;
       display: flex;
       flex-direction: column;
       cursor: pointer;
       transition: transform 0.2s ease;
   }

   .compact-card:hover {
       transform: translateY(-3px);
   }

   .compact-card.active-card {
       border: 2px solid var(--primary) !important;
       box-shadow: 0 0 15px rgba(37, 99, 235, 0.3) !important;
       transform: translateY(-2px) !important;
   }

   .compact-card.active-card .compact-title {
       color: var(--primary-color);
   }

   .compact-card .card-body {
       flex: 1;
       display: flex;
       flex-direction: column;
   }

   .compact-title {
       color: var(--primary-color);
       font-weight: 600;
       margin-bottom: 0.75rem;
       display: flex;
       align-items: center;
       font-size: 0.9rem;
   }

   .compact-title i {
       margin-right: 6px;
       width: 16px;
       height: 16px;
       font-size: 0.8rem;
   }

   .compact-stats {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .compact-stat-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.25rem 0;
   }

   .compact-number {
       font-size: 1.1rem;
       font-weight: 700;
   }

   .compact-label {
       font-size: 0.7rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: #666;
       font-weight: 500;
   }

   .designation-summary {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .designation-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 0.75rem;
   }

   .designation-item {
       text-align: center;
       flex: 1;
   }

   .designation-number {
       display: block;
       font-size: 1.1rem;
       font-weight: 700;
       margin-bottom: 0.25rem;
   }

   .designation-label {
       font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: #666;
       font-weight: 500;
   }

   .designation-divider {
       border-top: 1px solid #e9ecef;
       margin: 0.5rem 0;
   }

   .designation-metrics {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .metric-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0.25rem;
   }

   .metric-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: #666;
   }

   .metric-values {
       font-size: 0.75rem;
       font-weight: 600;
   }

   /* Leads Summary Styles */
   .leads-summary {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .leads-counts {
       margin-bottom: 0.75rem;
   }

   .leads-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 0.5rem;
   }

   .leads-item {
       text-align: center;
       flex: 1;
   }

   .leads-number {
       display: block;
       font-size: 0.9rem;
       font-weight: 700;
       margin-bottom: 0.2rem;
   }

   .leads-label {
       font-size: 0.6rem;
       text-transform: uppercase;
       letter-spacing: 0.3px;
       color: #666;
       font-weight: 500;
   }

   .leads-divider {
       border-top: 1px solid #e9ecef;
       margin: 0.5rem 0;
   }

   .leads-values {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .value-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0.2rem;
   }

   .value-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: #666;
   }

   .value-amount {
       font-size: 0.75rem;
       font-weight: 700;
   }

   /* ROI Summary Styles */
   .roi-summary {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .roi-brackets {
       margin-bottom: 0.75rem;
   }

   .roi-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 0.5rem;
   }

   .roi-item {
       text-align: center;
       flex: 1;
   }

   .roi-number {
       display: block;
       font-size: 0.9rem;
       font-weight: 700;
       margin-bottom: 0.2rem;
   }

   .roi-label {
       font-size: 0.6rem;
       text-transform: uppercase;
       letter-spacing: 0.3px;
       color: #666;
       font-weight: 500;
   }

   .roi-divider {
       border-top: 1px solid #e9ecef;
       margin: 0.5rem 0;
   }

   .roi-metrics {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .roi-metric-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0.2rem;
   }

   .roi-metric-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: #666;
   }

   .roi-metric-value {
       font-size: 0.75rem;
       font-weight: 700;
   }

   /* Events Summary Styles */
   .events-summary {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .events-main {
       text-align: center;
       margin-bottom: 0.75rem;
   }

   .events-total {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .events-big-number {
       font-size: 2rem;
       font-weight: 800;
       margin-bottom: 0.25rem;
   }

   .events-main-label {
       font-size: 0.7rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: #666;
       font-weight: 500;
   }

   .events-divider {
       border-top: 1px solid #e9ecef;
       margin: 0.5rem 0;
   }

   .events-breakdown {
       flex: 1;
   }

   .events-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 0.5rem;
   }

   .events-item {
       text-align: center;
       flex: 1;
   }

   .events-number {
       display: block;
       font-size: 1rem;
       font-weight: 700;
       margin-bottom: 0.2rem;
   }

   .events-label {
       font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 0.3px;
       color: #666;
       font-weight: 500;
   }

   .events-metrics {
       margin-top: 0.5rem;
   }

   .events-metric-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .events-metric-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: #666;
   }

   .events-metric-value {
       font-size: 0.75rem;
       font-weight: 700;
   }

   /* Contracts Summary Styles */
   .contracts-summary {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .contracts-counts {
       margin-bottom: 0.75rem;
   }

   .contracts-row {
       display: flex;
       justify-content: space-between;
   }

   .contracts-item {
       text-align: center;
       flex: 1;
   }

   .contracts-number {
       display: block;
       font-size: 1rem;
       font-weight: 700;
       margin-bottom: 0.2rem;
   }

   .contracts-label {
       font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 0.3px;
       color: #666;
       font-weight: 500;
   }

   .contracts-divider {
       border-top: 1px solid #e9ecef;
       margin: 0.5rem 0;
   }

   .contracts-values {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .contracts-value-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 0.2rem;
   }

   .contracts-value-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: #666;
   }

   .contracts-value-amount {
       font-size: 0.75rem;
       font-weight: 700;
   }