/* Theme Configuration for Noor Hospital System */
/* File: assets/css/theme.css */

:root {
  /* Primary Colors */
  --primary-color: #2c5aa0;
  --primary-rgb: 44, 90, 160;
  --primary-light: #5a7bc0;
  --primary-dark: #1e3d70;

  /* Secondary Colors */
  --secondary-color: #1565c0;
  --secondary-light: #5e92f3;
  --secondary-dark: #003c8f;

  /* Accent Colors */
  --accent-color: #00bcd4;
  --accent-light: #62efff;
  --accent-dark: #008ba3;

  /* Success Colors */
  --success-color: #4caf50;
  --success-light: #80e27e;
  --success-dark: #087f23;

  /* Warning Colors */
  --warning-color: #ff9800;
  --warning-light: #ffcc02;
  --warning-dark: #c66900;

  /* Danger Colors */
  --danger-color: #f44336;
  --danger-light: #ff7961;
  --danger-dark: #ba000d;

  /* Info Colors */
  --info-color: #2196f3;
  --info-light: #6ec6ff;
  --info-dark: #0069c0;

  /* Neutral Colors */
  --dark-color: #212529;
  --light-color: #f8f9fa;
  --white-color: #ffffff;

  /* Text Colors */
  --text-color: #333333;
  --text-muted: #6c757d;
  --text-light: #adb5bd;

  /* Background Colors */
  --bg-color: #ffffff;
  --bg-light: #f8f9fa;
  --bg-gray: #e9ecef;

  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #f1f3f4;

  /* Shadow Variables */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-round: 50%;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --primary-color: #5a7bc0;
  --primary-light: #8da9d6;
  --primary-dark: #2c5aa0;

  --text-color: #ffffff;
  --text-muted: #b3b3b3;
  --text-light: #999999;

  --bg-color: #1a1a1a;
  --bg-light: #2d2d2d;
  --bg-gray: #404040;

  --border-color: #404040;
  --border-light: #333333;
}

/* Medical Theme - Alternative Color Scheme */
[data-theme="medical"] {
  --primary-color: #0d7377;
  --primary-light: #14a085;
  --primary-dark: #0a5d61;

  --secondary-color: #00796b;
  --accent-color: #26a69a;

  --success-color: #2e7d32;
  --info-color: #0288d1;
  --warning-color: #f57c00;
  --danger-color: #d32f2f;
}

/* Professional Theme - Corporate Look */
[data-theme="professional"] {
  --primary-color: #1565c0;
  --primary-light: #42a5f5;
  --primary-dark: #0d47a1;

  --secondary-color: #37474f;
  --accent-color: #00acc1;

  --text-color: #263238;
  --bg-light: #fafafa;
}

[data-theme="noor"] {
  --primary-color: #f58220; /* Orange from header bar and buttons */
  --primary-light: #ffb366; /* Lighter orange from hover/gradient areas */
  --primary-dark: #cc6d19; /* Darker orange from shadows and text highlights */

  --secondary-color: #37474f; /* Dark grey from some text/icons */
  --accent-color: #1565c0; /* Blue from links and some icons */

  --text-color: #263238; /* Main dark text */
  --bg-light: #fafafa; /* Light grey/white background */
}
/* Custom Bootstrap Overrides */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  font-weight: var(--font-medium);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
  font-weight: var(--font-medium);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.btn-accent:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: var(--font-medium);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  font-weight: var(--font-medium);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.btn-outline-light:hover {
  background-color: white;
  border-color: white;
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
}

.btn-sm {
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
}

/* Card Overrides */
.card {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

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

/* Form Overrides */
.form-control,
.form-select {
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  padding: 0.75rem 1rem;
  transition: all var(--transition-fast);
}

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

/* Table Overrides */
.table-primary {
  --bs-table-bg: var(--primary-color);
  --bs-table-color: white;
}

.table-bordered {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Alert Overrides */
.alert {
  border-radius: var(--radius-lg);
  border: none;
  padding: 1rem 1.5rem;
}

.alert-primary {
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary-dark);
}

.alert-success {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--success-dark);
}

.alert-warning {
  background-color: rgba(255, 152, 0, 0.1);
  color: var(--warning-dark);
}

.alert-danger {
  background-color: rgba(244, 67, 54, 0.1);
  color: var(--danger-dark);
}

.alert-info {
  background-color: rgba(33, 150, 243, 0.1);
  color: var(--info-dark);
}

/* Badge Overrides */
.badge {
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  padding: 0.5rem 0.75rem;
}

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

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

.border-primary-custom {
  border-color: var(--primary-color) !important;
}

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

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

.border-accent {
  border-color: var(--accent-color) !important;
}

/* Shadow Utilities */
.shadow-custom-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-custom-md {
  box-shadow: var(--shadow-md) !important;
}

.shadow-custom-lg {
  box-shadow: var(--shadow-lg) !important;
}

.shadow-custom-xl {
  box-shadow: var(--shadow-xl) !important;
}

/* Border Radius Utilities */
.rounded-custom-sm {
  border-radius: var(--radius-sm) !important;
}

.rounded-custom-md {
  border-radius: var(--radius-md) !important;
}

.rounded-custom-lg {
  border-radius: var(--radius-lg) !important;
}

.rounded-custom-xl {
  border-radius: var(--radius-xl) !important;
}

/* Spacing Utilities */
.p-custom-xs {
  padding: var(--spacing-xs) !important;
}
.p-custom-sm {
  padding: var(--spacing-sm) !important;
}
.p-custom-md {
  padding: var(--spacing-md) !important;
}
.p-custom-lg {
  padding: var(--spacing-lg) !important;
}
.p-custom-xl {
  padding: var(--spacing-xl) !important;
}
.p-custom-xxl {
  padding: var(--spacing-xxl) !important;
}

.m-custom-xs {
  margin: var(--spacing-xs) !important;
}
.m-custom-sm {
  margin: var(--spacing-sm) !important;
}
.m-custom-md {
  margin: var(--spacing-md) !important;
}
.m-custom-lg {
  margin: var(--spacing-lg) !important;
}
.m-custom-xl {
  margin: var(--spacing-xl) !important;
}
.m-custom-xxl {
  margin: var(--spacing-xxl) !important;
}

/* Theme Switcher Styles */
.theme-switcher {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theme-option {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-option.active {
  border-color: var(--primary-color);
  transform: scale(1.1);
}

.theme-option.default {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
}

.theme-option.dark {
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
}

.theme-option.medical {
  background: linear-gradient(135deg, #0d7377, #26a69a);
}

.theme-option.professional {
  background: linear-gradient(135deg, #1565c0, #00acc1);
}
.theme-option.noor {
  background: linear-gradient(135deg, #f58220, #1565c0);
}

/* Print Styles */
@media print {
  .navbar,
  .footer,
  .theme-switcher,
  .floating-stats {
    display: none !important;
  }

  .hero-section {
    background: white !important;
    color: black !important;
  }

  * {
    box-shadow: none !important;
  }
}