/* ============================================================
   Health Guide — Unified Design System v2
   Modern medical UI: calm blues + teal, soft surfaces,
   generous spacing, Arabic-first typography (Cairo/Tajawal)
   Load this file FIRST on every page, then page-specific CSS.
   ============================================================ */

:root {
  /* ——— Brand ——— */
  --hg-primary: #2563eb;
  --hg-primary-dark: #1d4ed8;
  --hg-primary-soft: #dbeafe;
  --hg-primary-ghost: rgba(37, 99, 235, 0.08);
  --hg-teal: #0d9488;
  --hg-teal-dark: #0f766e;
  --hg-teal-soft: #ccfbf1;
  --hg-accent: #0d9488;
  --hg-accent-dark: #0f766e;
  --hg-info: #0ea5e9;
  --hg-navy: #0b2a4a;

  /* ——— Harmonious brand gradients (single blue → teal family) ——— */
  --hg-gradient-brand: linear-gradient(135deg, #2563eb 0%, #0d9488 100%);
  --hg-gradient-hero: linear-gradient(120deg, #1d4ed8 0%, #1e40af 52%, #0d9488 100%);
  --hg-gradient-dark: linear-gradient(135deg, #0b2a4a 0%, #1e40af 52%, #0d9488 115%);
  --hg-gradient-admin: linear-gradient(135deg, #1d4ed8 0%, #0b2a4a 100%);
  --hg-gradient-doctor: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);

  /* ——— Semantics ——— */
  --hg-success: #10b981;
  --hg-warning: #f59e0b;
  --hg-danger: #ef4444;
  --hg-info: #0ea5e9;

  /* ——— Surfaces & text ——— */
  --hg-bg: #f4f8fc;
  --hg-bg-2: #eaf3fb;
  --hg-card: #ffffff;
  --hg-ink: #0f172a;
  --hg-body: #334155;
  --hg-muted: #64748b;
  --hg-faint: #94a3b8;
  --hg-line: #e2e8f0;
  --hg-line-soft: #eef3f9;

  /* ——— Shape / depth / motion ——— */
  --hg-r-sm: 10px;
  --hg-r-md: 16px;
  --hg-r-lg: 22px;
  --hg-r-pill: 999px;
  --hg-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --hg-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --hg-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --hg-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
  --hg-shadow-brand: 0 12px 30px rgba(37, 99, 235, 0.28);
  --hg-shadow-teal: 0 12px 30px rgba(13, 148, 136, 0.25);
  --hg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hg-speed: 0.28s;
  --hg-header-h: 68px;

  /* ——— Type ——— */
  --hg-font-head: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --hg-font-body: 'Tajawal', 'Cairo', system-ui, sans-serif;

  /* Back-compat aliases so legacy inline styles pick up the new theme */
  --primary-color: var(--hg-primary);
  --secondary-color: var(--hg-teal);
  --accent-color: var(--hg-primary-dark);
  --text-dark: var(--hg-ink);
  --text-light: var(--hg-muted);
  --white: #fff;
  --gray-light: var(--hg-bg);
  --gray-medium: var(--hg-line);
  --light-blue: #e8f1fd;
  --light-green: #e6f7f1;
  --primary: var(--hg-primary);
  --shadow: var(--hg-shadow-md);
  --shadow-hover: var(--hg-shadow-lg);
  --shadow-lg: var(--hg-shadow-lg);
  --border-radius: var(--hg-r-md);
  --border-radius-lg: var(--hg-r-lg);
  --transition: all var(--hg-speed) var(--hg-ease);
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hg-header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--hg-font-body);
  color: var(--hg-body);
  background:
    radial-gradient(1100px 420px at 85% -80px, rgba(37, 99, 235, 0.1), transparent 60%),
    radial-gradient(900px 380px at 10% 0%, rgba(13, 148, 136, 0.1), transparent 60%),
    linear-gradient(180deg, var(--hg-bg) 0%, #f8fbfe 100%);
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--hg-font-head);
  color: var(--hg-ink);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; color: var(--hg-muted); }

a { color: var(--hg-primary); }
a:hover { color: var(--hg-primary-dark); }

::selection { background: rgba(37, 99, 235, 0.18); }

img { max-width: 100%; height: auto; }

/* Accessible focus everywhere */
:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  top: -60px;
  right: 16px;
  background: var(--hg-navy);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 12px 12px;
  z-index: 2000;
  text-decoration: none;
  transition: top var(--hg-speed) var(--hg-ease);
}
.skip-link:focus { top: 0; }

/* ——— Layout helpers ——— */
.container, .hg-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.section-header { text-align: center; margin-bottom: 2.75rem; }
.section-header h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  display: inline-block;
  position: relative;
  margin-bottom: 0.6rem;
}
.section-header h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  margin: 0.7rem auto 0;
  border-radius: var(--hg-r-pill);
  background: linear-gradient(90deg, var(--hg-primary), var(--hg-teal));
}
.section-subtitle, .section-header p {
  color: var(--hg-muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ——— Buttons ——— */
.hg-btn, .cta-button, .card-button, .btn-auth, .btn-primary {
  --btn-bg: linear-gradient(135deg, var(--hg-primary) 0%, var(--hg-teal) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  border: 0;
  border-radius: var(--hg-r-md);
  background: var(--btn-bg);
  color: #fff !important;
  font-family: var(--hg-font-head);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hg-shadow-brand);
  transition: transform var(--hg-speed) var(--hg-ease), box-shadow var(--hg-speed) var(--hg-ease), filter var(--hg-speed);
  position: relative;
  overflow: hidden;
  min-height: 48px;
}
.hg-btn::after, .cta-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(110%);
  transition: transform 0.6s var(--hg-ease);
}
.hg-btn:hover, .cta-button:hover, .card-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--hg-shadow-lg);
  filter: saturate(1.08);
}
.hg-btn:hover::after, .cta-button:hover::after { transform: translateX(-110%); }
.hg-btn:active, .cta-button:active { transform: translateY(-1px) scale(0.99); }

.hg-btn--ghost, .btn-secondary {
  background: #fff !important;
  color: var(--hg-primary) !important;
  border: 1.5px solid var(--hg-line) !important;
  box-shadow: var(--hg-shadow-xs) !important;
}
.hg-btn--ghost:hover, .btn-secondary:hover {
  border-color: var(--hg-primary) !important;
  background: var(--hg-primary-ghost) !important;
}

/* ——— Cards ——— */
.feature-card, .disease-card, .card, .stat-card, .sidebar-card, .dashboard-section {
  background: var(--hg-card);
  border: 1px solid var(--hg-line-soft) !important;
  border-radius: var(--hg-r-lg) !important;
  box-shadow: var(--hg-shadow-sm) !important;
  transition: transform var(--hg-speed) var(--hg-ease), box-shadow var(--hg-speed) var(--hg-ease), border-color var(--hg-speed);
}
.feature-card:hover, .disease-card:hover, .card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hg-shadow-md) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

/* Icon medallions */
.feature-icon, .disease-icon, .card-icon, .stat-icon {
  background: linear-gradient(135deg, var(--hg-primary), var(--hg-teal)) !important;
  color: #fff !important;
  box-shadow: var(--hg-shadow-brand) !important;
  border-radius: 18px !important;
}

/* ——— Pills / badges / chips ——— */
.card-badge, .role-badge, .results-count, .badge {
  border-radius: var(--hg-r-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.card-keywords li, .filter-tag {
  border-radius: var(--hg-r-pill) !important;
}

/* ——— Forms & search ——— */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], select, textarea,
.search-input, .form-input, .form-control, #diseaseSearch {
  font-family: var(--hg-font-body) !important;
  color: var(--hg-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--hg-line) !important;
  border-radius: 14px !important;
  transition: border-color var(--hg-speed), box-shadow var(--hg-speed), transform var(--hg-speed) var(--hg-ease);
}
input:focus, select:focus, textarea:focus,
.search-input:focus, .form-input:focus, .form-control:focus {
  outline: none !important;
  border-color: var(--hg-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}
input::placeholder, textarea::placeholder { color: var(--hg-faint) !important; }

.search-input-wrapper, .search-container .search-wrapper {
  background: #fff;
  border: 1.5px solid var(--hg-line-soft) !important;
  border-radius: 18px !important;
  box-shadow: var(--hg-shadow-sm) !important;
}
.search-input-wrapper:focus-within {
  border-color: var(--hg-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), var(--hg-shadow-md) !important;
  transform: translateY(-2px);
}

/* Filter tags */
.filter-tag {
  background: #fff !important;
  border: 1.5px solid var(--hg-line) !important;
  color: var(--hg-body) !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.2rem !important;
}
.filter-tag:hover { border-color: var(--hg-primary) !important; color: var(--hg-primary) !important; transform: translateY(-2px); }
.filter-tag.active {
  background: linear-gradient(135deg, var(--hg-primary), var(--hg-teal)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--hg-shadow-brand) !important;
}

/* ——— Section surfaces ——— */
/* Page-specific .hero banners keep their own colors; this only sets the default section look. */
.hero-section {
  background:
    radial-gradient(700px 300px at 80% 10%, rgba(37, 99, 235, 0.12), transparent 60%),
    radial-gradient(600px 280px at 15% 90%, rgba(13, 148, 136, 0.12), transparent 60%),
    linear-gradient(135deg, #eef6ff 0%, #e9fbf6 100%) !important;
  border-bottom: 1px solid var(--hg-line-soft);
}
.features-section, .prevention-section { background: #fff !important; }
.diseases-section { background: linear-gradient(180deg, #eef4fd 0%, #f4f8fc 100%) !important; }

/* Checklist */
.prevention-checklist li {
  background: #fff !important;
  border: 1px solid var(--hg-line-soft) !important;
  border-radius: 14px !important;
  box-shadow: var(--hg-shadow-xs);
}

/* ——— Floating actions ——— */
.health-guide-btn, .back-to-top {
  border-radius: 50% !important;
  box-shadow: var(--hg-shadow-lg) !important;
  backdrop-filter: blur(8px);
}
.health-guide-btn {
  background: linear-gradient(135deg, var(--hg-primary), var(--hg-teal)) !important;
}
.back-to-top { background: var(--hg-navy) !important; }

/* ——— Scrollbar & motion ——— */
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--hg-primary), var(--hg-teal));
  border-radius: var(--hg-r-pill);
  border: 2px solid var(--hg-bg);
}

.fade-in, .fade-in-delay-1, .fade-in-delay-2 { animation: hg-rise 0.7s var(--hg-ease) both; }
.fade-in-delay-1 { animation-delay: 0.12s; }
.fade-in-delay-2 { animation-delay: 0.24s; }
@keyframes hg-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Toasts / modals polish */
.toast { border-radius: 14px !important; box-shadow: var(--hg-shadow-lg) !important; }
.modal, .medical-modal-content {
  border-radius: var(--hg-r-lg) !important;
  border: 1px solid var(--hg-line-soft) !important;
  box-shadow: var(--hg-shadow-lg) !important;
}

/* Tables */
.users-table th { background: #f1f6fd !important; color: var(--hg-navy) !important; }

/* Responsive type rhythm */
@media (max-width: 768px) {
  body { line-height: 1.7; }
  .cta-button, .card-button { width: 100%; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* High contrast */
@media (prefers-contrast: more) {
  :root { --hg-muted: #334155; }
  .feature-card, .disease-card, .card { border: 2px solid var(--hg-navy) !important; }
}

/* Print */
@media print {
  body { background: #fff !important; }
  .health-guide-btn, .back-to-top, .mobile-nav { display: none !important; }
}