:root {
  --hero-primary-color: #828687;
  --hero-secondary-color: #a1a3ba;
  --hero-text-color: #a1a1a1;
  --hero-background-gradient: linear-gradient(135deg, #f1f4f5, #f1f4f5);
  --hero-image-path: url('http://localhost/storage/hero-images/hero-bg-1758891934.png');
  --hero-image-position: center center;
  --hero-image-size: contain;
  --hero-image-opacity: 0.2;
  --hero-content-image-path: url('http://localhost/storage/hero-images/hero-content-1758892040.png');
  --hero-content-image-position: right;
  --hero-content-image-size: contain;
  --hero-content-image-opacity: 1;
  --footer-background-color: #437f98;
  --footer-text-color: #edeff3;
  --footer-link-color: #60a5fa;
  --footer-link-hover-color: #93c5fd;
  --footer-border-color: #374151;
  --footer-heading-color: #ffffff;
  --stats-primary-color: #2563eb;
  --stats-secondary-color: #6b7280;
  --stats-success-color: #16a34a;
  --stats-warning-color: #d97706;
  --stats-danger-color: #dc2626;
  --stats-info-color: #0891b2;
  --button-primary-color: #0e3ca0;
  --button-secondary-color: #133f95;
  --button-success-color: #16a34a;
  --button-warning-color: #d97706;
  --button-danger-color: #dc2626;
  --button-info-color: #0891b2;
  --sidebar-background-color: #e7ebee;
  --sidebar-text-color: #1e293b;
  --sidebar-active-color: #3b82f6;
  --header-background-color: #ffffff;
  --header-text-color: #111827;
  --card-background-color: #ffffff;
  --card-border-color: #e5e7eb;
  --text-primary-color: #111827;
  --text-secondary-color: #6b7280;
  --primary-font-family: 'Avenir Next World', 'Cairo', 'Tajawal', 'Amiri', sans-serif;
  --secondary-font-family: 'Avenir Next World', 'Cairo', 'Tajawal', 'Amiri', sans-serif;
  --font-size-base: 16;
  --border-radius: 8;
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --spacing-unit: 1;
}


/* Hero Section Styles */
.hero-section {
  background: var(--hero-background-gradient, linear-gradient(135deg, #1e293b, #334155)) !important;
  color: var(--hero-text-color, #ffffff) !important;
  border: none !important;
  position: relative;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--hero-image-path, none);
  background-position: var(--hero-image-position, center center);
  background-size: var(--hero-image-size, cover);
  background-repeat: no-repeat;
  opacity: var(--hero-image-opacity, 0.3);
  z-index: 1;
}

    .hero-section > * {
      position: relative;
      z-index: 2;
    }

    /* Hero Content Image Styles */
    .hero-content-image {
      background-image: var(--hero-content-image-path, none);
      background-position: var(--hero-content-image-position, right);
      background-size: var(--hero-content-image-size, contain);
      background-repeat: no-repeat;
      opacity: var(--hero-content-image-opacity, 1.0);
      min-height: 300px;
      width: 100%;
    }

    /* Footer Styles */
    .footer-section {
      background-color: var(--footer-background-color, #1f2937) !important;
      color: var(--footer-text-color, #d1d5db) !important;
      border-top: 1px solid var(--footer-border-color, #374151) !important;
    }

    .footer-section h1,
    .footer-section h2,
    .footer-section h3,
    .footer-section h4,
    .footer-section h5,
    .footer-section h6 {
      color: var(--footer-heading-color, #ffffff) !important;
    }

    .footer-section a {
      color: var(--footer-link-color, #60a5fa) !important;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-section a:hover {
      color: var(--footer-link-hover-color, #93c5fd) !important;
    }

    .footer-section .text-muted {
      color: var(--footer-text-color, #d1d5db) !important;
    }

.hero-primary {
  color: var(--hero-primary-color, #2563eb);
}

.hero-secondary {
  color: var(--hero-secondary-color, #3b82f6);
}

/* Statistics Cards */
.stats-card {
  border-radius: calc(var(--border-radius, 8) * 1px);
  box-shadow: var(--box-shadow, 0 4px 20px rgba(0, 0, 0, 0.08));
}

.stats-card.primary {
  background: linear-gradient(135deg, var(--stats-primary-color, #2563eb), var(--stats-secondary-color, #3b82f6));
}

.stats-card.success {
  background: linear-gradient(135deg, var(--stats-success-color, #16a34a), #22c55e);
}

.stats-card.warning {
  background: linear-gradient(135deg, var(--stats-warning-color, #d97706), #f59e0b);
}

.stats-card.danger {
  background: linear-gradient(135deg, var(--stats-danger-color, #dc2626), #ef4444);
}

.stats-card.info {
  background: linear-gradient(135deg, var(--stats-info-color, #0891b2), #06b6d4);
}

/* Buttons */
.btn-primary {
  background-color: var(--button-primary-color, #2563eb);
  border-color: var(--button-primary-color, #2563eb);
}

.btn-secondary {
  background-color: var(--button-secondary-color, #6b7280);
  border-color: var(--button-secondary-color, #6b7280);
}

.btn-success {
  background-color: var(--button-success-color, #16a34a);
  border-color: var(--button-success-color, #16a34a);
}

.btn-warning {
  background-color: var(--button-warning-color, #d97706);
  border-color: var(--button-warning-color, #d97706);
}

.btn-danger {
  background-color: var(--button-danger-color, #dc2626);
  border-color: var(--button-danger-color, #dc2626);
}

.btn-info {
  background-color: var(--button-info-color, #0891b2);
  border-color: var(--button-info-color, #0891b2);
}

/* Sidebar */
.sidebar {
  background: var(--sidebar-background-color, #f8fafc);
  color: var(--sidebar-text-color, #1e293b);
}

.sidebar-menu-link.active {
  background: linear-gradient(90deg, var(--sidebar-active-color, #3b82f6), #1d4ed8);
  color: white;
}

/* Header */
.header {
  background: var(--header-background-color, #ffffff);
  color: var(--header-text-color, #111827);
}

/* Cards */
.card {
  background-color: var(--card-background-color, #ffffff);
  border-color: var(--card-border-color, #e5e7eb);
  border-radius: calc(var(--border-radius, 8) * 1px);
  box-shadow: var(--box-shadow, 0 4px 20px rgba(0, 0, 0, 0.08));
}

/* Typography */
body {
  font-family: var(--primary-font-family, 'Avenir Next World', 'Cairo', 'Tajawal', 'Amiri', sans-serif);
  font-size: calc(var(--font-size-base, 16) * 1px);
  color: var(--text-primary-color, #111827);
}

.text-primary {
  color: var(--text-primary-color, #111827) !important;
}

.text-secondary {
  color: var(--text-secondary-color, #6b7280) !important;
}

/* Spacing */
.spacing-unit {
  margin: calc(var(--spacing-unit, 1) * 1rem);
  padding: calc(var(--spacing-unit, 1) * 1rem);
}