/* =====================================================================
 *  HMS — التصميم الحديث (modern.css)
 *  ---------------------------------------------------------------------
 *  طبقة فوق app.css بتتحمّل بس لما المستخدم يختار "التصميم الحديث" من
 *  لوحة التحكم (كلاس design-modern على <html> و <body>).
 *  نفس الـ HTML ونفس الصفحات — بس شكل فاتح ونضيف: خلفية رمادي فاتح،
 *  قائمة جانبية بيضا، كروت بيضا بظلال خفيفة، لون أساسي بنفسجي/أزرق.
 *  ولو الوضع الليلي شغال بيتحول لنسخة غامقة هادية من نفس التصميم.
 * ===================================================================== */

html.design-modern {
  --m-bg: #f3f5fa;
  --m-surface: #ffffff;
  --m-surface-2: #f8fafc;
  --m-border: #e3e8f1;
  --m-text: #1e293b;
  --m-text-soft: #64748b;
  --m-primary: #4f46e5;
  --m-primary-2: #0ea5e9;
  --m-primary-soft: #eef0ff;
  --m-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
  --m-shadow-lg: 0 10px 30px rgba(16, 24, 40, .10);
  --m-radius: 14px;

  /* إعادة تعريف متغيرات app.css — أغلب الصفحات بتتظبط لوحدها من هنا */
  --gradient-dark-bg: var(--m-bg);
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-primary-light: #6366f1;
  --color-primary-rgb: 79, 70, 229;
  --color-accent: #0ea5e9;
  --color-accent-dark: #0284c7;
  --color-accent-rgb: 14, 165, 233;
  --gradient-brand: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  --color-gray-100: #f3f5fa;
  --color-gray-200: #e9edf5;
  --color-gray-300: #dde3ee;
  --color-gray-900: #1e293b;
  --color-dark: #1e293b;
  --shadow-elevate-sm: var(--m-shadow);
  --shadow-elevate-md: var(--m-shadow-lg);
  --shadow-elevate-lg: var(--m-shadow-lg);
  --shadow-inset-top: none;
}

/* الوضع الليلي في التصميم الحديث */
html.design-modern.dark-mode {
  --m-bg: #0f172a;
  --m-surface: #1e293b;
  --m-surface-2: #172033;
  --m-border: #2c3a52;
  --m-text: #e2e8f0;
  --m-text-soft: #94a3b8;
  --m-primary-soft: rgba(99, 102, 241, .16);
  --m-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --color-white: #1e293b;
  --color-gray-100: #172033;
  --color-gray-200: #24324a;
  --color-gray-300: #2c3a52;
  --color-gray-600: #94a3b8;
  --color-gray-700: #cbd5e1;
  --color-gray-900: #e2e8f0;
  --color-dark: #e2e8f0;
}

/* ---------------------------------------------------------------------
   الخلفية العامة والخط
   --------------------------------------------------------------------- */
html.design-modern body[class] {
  background: var(--m-bg) !important;
  background-image: none !important;
  color: var(--m-text);
}
html.design-modern body::before {
  background: var(--m-bg) !important;
  animation: none !important;
}
html.design-modern .bg-orb,
html.design-modern .bg-grid { display: none !important; }

html.design-modern body > h1, html.design-modern body > h2, html.design-modern body > h3,
html.design-modern body > h4, html.design-modern body > p, html.design-modern body > label {
  color: var(--m-text) !important;
}
html.design-modern .page-title,
html.design-modern [class*="page-"] .main-content > h1,
html.design-modern [class*="page-"] .container > h1,
html.design-modern [class*="page-"] .container > h2,
html.design-modern .content > h2 {
  color: var(--m-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------------------
   القائمة الجانبية + الشريط العلوي
   --------------------------------------------------------------------- */
html.design-modern #sidebar,
html.design-modern #old-theme-sidebar {
  background: var(--m-surface) !important;
  border-left: 1px solid var(--m-border) !important;
  border-right: 1px solid var(--m-border) !important;
  box-shadow: none !important;
}
html.design-modern #sidebar ul li a,
html.design-modern #old-theme-sidebar ul li a,
html.design-modern #sidebar ul li.nav-dark-toggle,
html.design-modern #old-theme-sidebar ul li.nav-dark-toggle {
  color: var(--m-text-soft) !important;
  font-weight: 600;
}
html.design-modern #sidebar ul li a i { color: #94a3b8; }
html.design-modern #sidebar ul li a:hover,
html.design-modern #old-theme-sidebar ul li a:hover {
  background: var(--m-surface-2) !important;
  color: var(--m-text) !important;
  box-shadow: none !important;
  transform: none !important;
}
html.design-modern #sidebar ul li a.active,
html.design-modern #old-theme-sidebar ul li a.active {
  background: var(--m-primary-soft) !important;
  color: var(--m-primary) !important;
  box-shadow: inset -3px 0 0 var(--m-primary) !important;
}
html.design-modern #sidebar ul li a.active i { color: var(--m-primary); }
html.design-modern #sidebar ul li.nav-logout a,
html.design-modern #old-theme-sidebar ul li.nav-logout a { color: #e11d48 !important; }
html.design-modern #sidebar ul li.nav-logout a i { color: #e11d48; }
html.design-modern .ios-switch-slider { background-color: #cbd5e1; }
html.design-modern .ios-switch input:checked + .ios-switch-slider { background-color: var(--m-primary); }

html.design-modern #sidebar .datetime-user-info,
html.design-modern #old-theme-sidebar .datetime-user-info {
  background: rgba(255, 255, 255, .88) !important;
  color: var(--m-text) !important;
  border-bottom: 1px solid var(--m-border) !important;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .03) !important;
  font-weight: 600;
}
html.design-modern.dark-mode #sidebar .datetime-user-info,
html.design-modern.dark-mode #old-theme-sidebar .datetime-user-info { background: rgba(30, 41, 59, .9) !important; }
html.design-modern .datetime-user-info span { color: var(--m-text-soft) !important; }
html.design-modern .datetime-user-info i { color: var(--m-primary) !important; }
html.design-modern .datetime-home-btn,
html.design-modern .sidebar-collapse-toggle,
html.design-modern .mobile-nav-toggle,
html.design-modern .mobile-home-btn {
  background: var(--m-primary-soft) !important;
  border: 1px solid transparent !important;
  color: var(--m-primary) !important;
}
html.design-modern .datetime-home-btn i,
html.design-modern .sidebar-collapse-toggle i { color: var(--m-primary) !important; margin: 0; }

/* ---------------------------------------------------------------------
   الكروت والحاويات (كل الصفحات)
   --------------------------------------------------------------------- */
html.design-modern .page-today .container,
html.design-modern .page-cpanel .user-panel,
html.design-modern .page-cpanel .info-panel,
html.design-modern .page-cpanel .settings-panel,
html.design-modern .page-newpatient .tabs-container,
html.design-modern .page-batch main,
html.design-modern .page-batch .patient-entry,
html.design-modern .page-visit .patient-info,
html.design-modern .page-visit .visit-form,
html.design-modern .page-visit .search-container,
html.design-modern .page-visit .patient-selection-list,
html.design-modern .page-visit #previousVisitsContainer,
html.design-modern .page-search .search-container,
html.design-modern .page-search-results .results-table-container,
html.design-modern .page-freq .search-form,
html.design-modern .page-freq #table_results,
html.design-modern .page-new .container,
html.design-modern .page-lab .container,
html.design-modern .page-lab-results .container,
html.design-modern .page-backup .backup-container,
html.design-modern .page-backup .backup-card,
html.design-modern .page-edit form,
html.design-modern .page-family-stats .container,
html.design-modern .page-stats-menu .stats-container,
html.design-modern .page-stats-report .main-content > form,
html.design-modern .page-stats-report .date-form,
html.design-modern .page-stats-report .year-form,
html.design-modern .page-stats-report .chart-container,
html.design-modern .page-stats-report table,
html.design-modern .cc-wrap {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow) !important;
  color: var(--m-text);
}
html.design-modern .page-backup .backup-card { background: var(--m-surface-2) !important; box-shadow: none !important; }
html.design-modern .page-today .search-container,
html.design-modern .page-today .filter-container,
html.design-modern .page-today .status-circles-container {
  background: var(--m-surface-2) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html.design-modern [class*="page-"] h1,
html.design-modern [class*="page-"] h2,
html.design-modern [class*="page-"] h3,
html.design-modern [class*="page-"] h4,
html.design-modern [class*="page-"] label {
  color: var(--m-text);
  text-shadow: none;
}
html.design-modern [class*="page-"] h1::after,
html.design-modern [class*="page-"] h2::after { background: var(--gradient-brand) !important; }

/* ---------------------------------------------------------------------
   الفورمز
   --------------------------------------------------------------------- */
html.design-modern [class*="page-"] input[type="text"],
html.design-modern [class*="page-"] input[type="password"],
html.design-modern [class*="page-"] input[type="number"],
html.design-modern [class*="page-"] input[type="date"],
html.design-modern [class*="page-"] input[type="month"],
html.design-modern [class*="page-"] input[type="time"],
html.design-modern [class*="page-"] select,
html.design-modern [class*="page-"] textarea {
  background: var(--m-surface) !important;
  color: var(--m-text) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html.design-modern [class*="page-"] input:focus,
html.design-modern [class*="page-"] select:focus,
html.design-modern [class*="page-"] textarea:focus {
  outline: none !important;
  border-color: var(--m-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15) !important;
}

/* ---------------------------------------------------------------------
   الأزرار
   --------------------------------------------------------------------- */
html.design-modern [class*="page-"] input[type="submit"],
html.design-modern [class*="page-"] button[type="submit"],
html.design-modern .page-today .btn-search,
html.design-modern .page-freq #search_button,
html.design-modern .page-cpanel #show-add-user-form-btn,
html.design-modern .page-stats-menu .stats-button,
html.design-modern .page-batch .add-patient-btn,
html.design-modern .page-visit #previousVisitsToggle,
html.design-modern .btn-primary {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .25) !important;
  text-shadow: none !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
html.design-modern [class*="page-"] input[type="submit"]:hover,
html.design-modern [class*="page-"] button[type="submit"]:hover,
html.design-modern .page-stats-menu .stats-button:hover,
html.design-modern .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(79, 70, 229, .32) !important;
}
html.design-modern .page-stats-menu .stats-button i,
html.design-modern .page-stats-menu .stats-button span { color: #fff !important; }
/* الأزرار الخطرة/الثانوية تفضل بلونها */
html.design-modern .btn-danger-action,
html.design-modern .page-batch .remove-patient-btn,
html.design-modern .page-today .delete-btn { background: #e11d48 !important; box-shadow: none !important; }
html.design-modern .btn-secondary,
html.design-modern #cancel-add-user-btn { background: #94a3b8 !important; box-shadow: none !important; }
html.design-modern .page-today .btn-export-excel { background: #059669 !important; }
html.design-modern .page-today .btn-print-all-pdf { background: #ea580c !important; }

/* تابات تسجيل المريض */
html.design-modern .page-newpatient .tab-button {
  background: var(--m-surface-2) !important;
  color: var(--m-text-soft) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
html.design-modern .page-newpatient .tab-button.active {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .25) !important;
}

/* ---------------------------------------------------------------------
   الجداول
   --------------------------------------------------------------------- */
html.design-modern [class*="page-"] table { border-collapse: separate; border-spacing: 0; }
html.design-modern [class*="page-"] table th,
html.design-modern [class*="page-"] table thead td {
  background: var(--m-surface-2) !important;
  color: var(--m-text-soft) !important;
  font-weight: 700;
  border-color: var(--m-border) !important;
  text-shadow: none !important;
}
html.design-modern [class*="page-"] table td { border-color: var(--m-border) !important; }
html.design-modern [class*="page-"] table tbody tr:hover td { background-color: var(--m-primary-soft); }

/* ألوان تصنيف المرضى في مرضى اليوم — أهدى */
html.design-modern .page-today tr.mad_aay_patient td { background: #fff1f2 !important; color: #9f1239 !important; }
html.design-modern .page-today tr.unknown_patient td { background: #eff6ff !important; color: #1e40af !important; }
html.design-modern .page-today tr.zero_sample_patient td { background: #ecfdf5 !important; color: #065f46 !important; }
html.design-modern .page-today tr.normal_patient td { background: var(--m-surface) !important; color: var(--m-text) !important; }
html.design-modern.dark-mode .page-today tr.mad_aay_patient td { background: rgba(225, 29, 72, .15) !important; color: #fda4af !important; }
html.design-modern.dark-mode .page-today tr.unknown_patient td { background: rgba(59, 130, 246, .15) !important; color: #93c5fd !important; }
html.design-modern.dark-mode .page-today tr.zero_sample_patient td { background: rgba(16, 185, 129, .15) !important; color: #6ee7b7 !important; }

/* ---------------------------------------------------------------------
   الصفحة الرئيسية
   --------------------------------------------------------------------- */
html.design-modern .page-index .hero-card {
  background: var(--gradient-brand) !important;
  border: 0 !important;
  box-shadow: 0 16px 40px rgba(79, 70, 229, .25) !important;
}
html.design-modern .page-index .hero-card * { color: #fff !important; }
html.design-modern .page-index .hero-logo-ring { border-color: rgba(255, 255, 255, .5) !important; background: none !important; }
html.design-modern .page-index .quick-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow) !important;
  color: var(--m-text) !important;
}
html.design-modern .page-index .quick-card i {
  color: var(--m-primary) !important;
  background: var(--m-primary-soft);
  width: 54px; height: 54px; line-height: 54px;
  border-radius: 16px;
  text-align: center;
}
html.design-modern .page-index .quick-card span { color: var(--m-text) !important; }
html.design-modern .page-index .quick-card:hover {
  border-color: rgba(79, 70, 229, .35) !important;
  transform: translateY(-3px);
  box-shadow: var(--m-shadow-lg) !important;
}
html.design-modern .page-index .quick-card-logout i { color: #e11d48 !important; background: #fff1f2; }
html.design-modern .page-index .quick-card-logout span { color: #e11d48 !important; }
html.design-modern .page-index .footer {
  background: var(--m-surface) !important;
  border-top: 1px solid var(--m-border) !important;
  box-shadow: none !important;
}
html.design-modern .page-index .footer * { color: var(--m-text-soft) !important; }
html.design-modern .page-index .footer .whatsapp-icon { color: #16a34a !important; }

/* ---------------------------------------------------------------------
   تسجيل الدخول
   --------------------------------------------------------------------- */
html.design-modern body.page-login {
  background: linear-gradient(135deg, #eef0ff 0%, #e0f2fe 100%) !important;
}
html.design-modern .page-login .login-container {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: 0 30px 60px rgba(30, 41, 59, .15) !important;
  backdrop-filter: none !important;
}
html.design-modern .page-login .brand-panel { background: var(--gradient-brand) !important; }
html.design-modern .page-login .brand-panel * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.design-modern .page-login .form-panel h2 { color: var(--m-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.design-modern .page-login .form-hint { color: var(--m-text-soft) !important; }
html.design-modern .page-login .field-group input {
  background: var(--m-surface-2) !important;
  color: var(--m-text) !important;
  border: 1px solid var(--m-border) !important;
}
html.design-modern .page-login .field-icon,
html.design-modern .page-login #togglePassword { color: var(--m-text-soft) !important; }
html.design-modern .page-login input[type="submit"] {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .3) !important;
}

/* ---------------------------------------------------------------------
   رسائل وتنبيهات
   --------------------------------------------------------------------- */
html.design-modern .message-success,
html.design-modern .alert-success { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; border-radius: 12px !important; }
html.design-modern .alert-danger,
html.design-modern .error-message { border-radius: 12px !important; }

/* ---------------------------------------------------------------------
   الموبايل
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  html.design-modern #sidebar,
  html.design-modern #old-theme-sidebar { border: 0 !important; border-bottom: 1px solid var(--m-border) !important; }
}