/* ============================================================
   حكيم — نظام التصميم (Hakeem Design System) — من تطوير شركة البصيرة
   مرجع: DESIGN_SYSTEM.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

/* ---------- 1. متغيّرات التصميم (Design Tokens) ---------- */
:root{
  --primary:#1e40af;        /* أزرق غامق رئيسي — الهوية */
  --primary-dark:#1e3a8a;   /* أزرق غامق جداً — للـ hover */
  --primary-light:#3b82f6;  /* أزرق متوسط — accents */
  --secondary:#2563eb;      /* أزرق ثانوي — نهاية التدرّجات */
  --accent:#0ea5e9;         /* سماوي — تمييز */
  --success:#10b981;        /* أخضر — نجاح */
  --danger:#ef4444;         /* أحمر — خطر/حذف */
  --warning:#f59e0b;        /* برتقالي — تحذير */
  --info:#0284c7;           /* أزرق فاتح — معلومة */
  --bg-light:#f1f5f9;       /* خلفية الصفحة */
  --text-dark:#1e293b;      /* لون النص الأساسي */
  --muted:#64748b;          /* نص ثانوي */
  --border:#e2e8f0;         /* حدود/فواصل */
  --sidebar-w:240px;        /* عرض الشريط الجانبي */
  --gradient:linear-gradient(135deg,var(--primary),var(--secondary));

  /* إعادة تعيين متغيّرات Bootstrap على الهوية الزرقاء */
  --bs-primary:#1e40af;
  --bs-primary-rgb:30,64,175;
  --bs-link-color:#1e40af;
  --bs-link-hover-color:#1e3a8a;
  --bs-body-color:#1e293b;
  --bs-border-color:#e2e8f0;
}

/* ---------- 2. الطباعة (Typography) ---------- */
body, body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fass):not([class^="fa-"]):not([class*=" fa-"]){
  font-family:'Cairo',sans-serif!important;
}
i.fa,i.fas,i.far,i.fab,[class^="fa-"],[class*=" fa-"]{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands"!important;
}
.fas,.fa-solid{font-weight:900!important;}
.far,.fa-regular{font-weight:400!important;}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands"!important;font-weight:400!important;}

/* ---------- 3. البنية العامة (Layout) ---------- */
body{
  background:var(--bg-light);
  color:var(--text-dark);
  direction:rtl;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  margin:0;
}
.app-shell{display:flex;flex:1;min-height:calc(100vh - 58px);}
.app-main{flex:1;padding:24px;overflow-x:hidden;}
a{text-decoration:none;}

/* ---------- 4. الشريط العلوي (Navbar) ---------- */
.app-navbar{
  background:var(--gradient);
  position:sticky;top:0;z-index:1040;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  height:58px;
  display:flex;align-items:center;
  padding:0 18px;
  color:#fff;
}
.navbar-brand{
  font-weight:700;font-size:1.2rem;color:#fff!important;
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.navbar-brand .brand-logo{
  height:40px;border-radius:8px;background:#fff;
  padding:3px 10px;object-fit:contain;
}
.nav-link-top{
  color:rgba(255,255,255,.9)!important;padding:6px 12px!important;
  border-radius:6px;font-size:.88rem;transition:all .2s;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link-top:hover{background:rgba(255,255,255,.15)!important;color:#fff!important;}
.navbar-user{font-size:.85rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:7px;}

/* ---------- 5. الشريط الجانبي (Sidebar) ---------- */
.app-sidebar{
  width:var(--sidebar-w);min-height:calc(100vh - 58px);
  background:#fff;box-shadow:1px 0 6px rgba(0,0,0,.06);
  padding:15px 10px;flex-shrink:0;overflow-y:auto;
}
.sidebar-section-title{
  font-size:.72rem;font-weight:700;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 4px;margin-top:10px;
}
.sidebar-link{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;color:#475569;font-size:.88rem;font-weight:500;
  text-decoration:none;transition:all .2s;margin-bottom:2px;
}
.sidebar-link:hover{background:#f1f5f9;color:var(--primary);}
.sidebar-link.active{
  background:var(--gradient);
  color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.3);
}
.sidebar-link i{width:18px;text-align:center;font-size:.95rem;}

/* ---------- 6. ترويسة الصفحة (Page Header) ---------- */
.page-header{
  background:#fff;border-radius:12px;padding:20px 24px;margin-bottom:20px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.page-header h1{font-size:1.6rem;font-weight:700;margin:0;color:var(--text-dark);
  display:flex;align-items:center;gap:10px;}
.page-header h1 i{color:var(--primary);}
.page-header .sub{color:#64748b;font-size:.88rem;margin:4px 0 0;}

/* ---------- 7. البطاقات (Cards) ---------- */
.card{border:none!important;border-radius:12px!important;box-shadow:0 1px 6px rgba(0,0,0,.06);transition:box-shadow .2s;}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);}
.card-header{
  background:var(--gradient);
  color:#fff;font-weight:600;border-radius:12px 12px 0 0!important;padding:12px 18px;border:none;
}
.card-header.plain{background:#f8fafc;color:var(--text-dark);border-bottom:1px solid var(--border);}

/* ---------- 8. البطاقات الإحصائية (Stat Cards) ---------- */
.stat-card{
  background:#fff;border-radius:12px;padding:20px;
  box-shadow:0 1px 6px rgba(0,0,0,.07);display:flex;align-items:center;gap:16px;transition:all .3s;
  height:100%;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.12);}
.stat-icon{
  width:52px;height:52px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;
}
.stat-value{font-size:1.9rem;font-weight:700;line-height:1;color:#1e293b;}
.stat-label{font-size:.83rem;color:#64748b;margin-top:4px;}

/* ---------- 9. بطاقات الإجراء السريع (Quick Action) ---------- */
.quick-action{
  background:#fff;border-radius:12px;padding:16px 20px;text-decoration:none;
  color:#1e293b;display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.07);transition:all .3s;border:2px solid transparent;height:100%;
}
.quick-action:hover{border-color:#2563eb;color:#2563eb;transform:translateY(-2px);}
.quick-action i{font-size:1.3rem;color:#2563eb;}
.quick-action .qa-title{font-weight:600;}

/* ---------- 10. الأزرار (Buttons) ---------- */
.btn{border-radius:8px;font-weight:600;}
.btn-primary{background:var(--gradient);border:none;}
.btn-primary:hover,.btn-primary:focus{background:var(--gradient);opacity:.92;transform:translateY(-1px);}
.btn-outline-primary{border:2px solid var(--primary);color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-success{background:var(--success);border:none;}
.btn-danger{background:var(--danger);border:none;}
.btn-light{background:#fff;border:none;color:var(--primary);}
.btn-brand{background:var(--brand,var(--primary));border:none;color:#fff;}
.btn-brand:hover,.btn-brand:focus{filter:brightness(.92);color:#fff;}

/* ---------- 11. الجداول (Tables) ---------- */
.table{margin-bottom:0;}
.table thead,.table thead.table-light{background:var(--gradient);}
.table thead th,.table thead.table-light th{
  background:transparent;color:#fff!important;border:none;padding:12px 14px;font-weight:600;
}
.table tbody td{padding:11px 14px;vertical-align:middle;border-color:var(--border);}
.table tbody tr:hover{background:#f8fafc;}

/* ---------- 12. النماذج والحقول (Forms) ---------- */
.form-control,.form-select{border:2px solid var(--border);border-radius:8px;padding:9px 13px;}
.form-control:focus,.form-select:focus{
  border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(37,99,235,.2);
}
.form-label{font-weight:600;color:var(--text-dark);font-size:.9rem;}
.input-group .btn{border-radius:8px;}

/* ---------- 13. التنبيهات (Alerts) — شريط ملوّن على اليمين (RTL) ---------- */
.alert{border-radius:10px;}
.alert-success{background:#ecfdf5;color:#065f46;border:none;border-right:4px solid var(--success);}
.alert-danger {background:#fef2f2;color:#991b1b;border:none;border-right:4px solid var(--danger);}
.alert-warning{background:#fffbeb;color:#92400e;border:none;border-right:4px solid var(--warning);}
.alert-info   {background:#eff6ff;color:#1e40af;border:none;border-right:4px solid var(--info);}
.alert-secondary{background:#f8fafc;color:#475569;border:none;border-right:4px solid #94a3b8;}

/* ---------- 14. الشارات (Badges) ---------- */
.badge{padding:5px 10px;border-radius:6px;font-size:.8rem;font-weight:600;}

/* ---------- 15. التذييل (Footer) ---------- */
.app-footer{
  background:#fff;border-top:1px solid var(--border);padding:14px 24px;
  text-align:center;color:#94a3b8;font-size:.8rem;
}

/* ---------- 16. الواجهة العامة (Public Site) ---------- */
.doctor-hero{color:#fff;border-radius:0 0 1.5rem 1.5rem;background:var(--gradient);}
.hero{background:var(--gradient);color:#fff;border-radius:1rem;}
.slot-btn{min-width:84px;border-radius:8px;font-weight:600;}

/* ---------- 17. الاستجابة للجوال (Responsive) ---------- */
.mobile-toggle{display:none;color:#fff;background:none;border:none;font-size:1.3rem;cursor:pointer;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1030;}
@media(max-width:768px){
  .app-sidebar{display:none;position:fixed;right:0;top:58px;bottom:0;z-index:1035;
    width:260px;transform:translateX(100%);transition:transform .3s;}
  .app-sidebar.open{display:block!important;transform:translateX(0);}
  .sidebar-overlay.open{display:block;}
  .mobile-toggle{display:block;}
  .app-main{padding:15px;}
  .nav-desktop-only{display:none!important;}
}

/* ---------- 18. مؤشّر التحميل (Loading Spinner) ---------- */
@keyframes ajax-spin{to{transform:rotate(360deg);}}

/* ---------- 19. مسار التنقّل (Breadcrumb) ---------- */
.app-breadcrumb{margin-bottom:14px;font-size:.85rem;}
.app-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;align-items:center;}
.app-breadcrumb li{display:inline-flex;align-items:center;gap:6px;}
.app-breadcrumb li:not(.current)::after{content:"\\203A";color:var(--muted);margin-inline-start:6px;font-weight:700;} /* ‹ يشير لاتجاه التقدّم في RTL */
.app-breadcrumb a{color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.app-breadcrumb a:hover{text-decoration:underline;}
.app-breadcrumb a i{font-size:.8rem;}
.app-breadcrumb .current span{color:var(--muted);font-weight:600;}

/* ---------- 20. شريط تنقّل التقارير (Report Sub-nav Pills) ---------- */
.report-subnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.report-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--border);color:var(--text-dark);font-size:.85rem;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:all .15s;}
.report-pill:hover{border-color:var(--primary-light);color:var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.07);transform:translateY(-1px);}
.report-pill.active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(30,64,175,.30);}
.report-pill i{font-size:.8rem;}
@media(max-width:768px){
  .report-subnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;
    margin-inline:-15px;padding-inline:15px;}
  .report-pill{flex:0 0 auto;}
}

/* ---------- 21. حالة تحديث التقرير عبر AJAX ---------- */
#report-main{transition:opacity .15s ease;}
#report-main.is-loading{opacity:.5;pointer-events:none;position:relative;min-height:160px;}
#report-main.is-loading::after{content:"";position:absolute;top:60px;left:50%;width:40px;height:40px;
  margin-inline-start:-20px;border:4px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;animation:ajax-spin .7s linear infinite;}

/* ---------- 22. صفحة حجز الموعد العامة (Public Booking) ---------- */
#booking-area{transition:opacity .15s ease;position:relative;}
#booking-area.is-loading{opacity:.45;pointer-events:none;min-height:200px;}
#booking-area.is-loading::after{content:"";position:absolute;top:80px;left:50%;width:42px;height:42px;
  margin-inline-start:-21px;border:4px solid var(--border);border-top-color:var(--brand,#1e40af);
  border-radius:50%;animation:ajax-spin .7s linear infinite;}

/* رقاقات الأيام القريبة */
.day-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:84px;padding:8px 12px;border-radius:14px;border:1.5px solid var(--border);background:#fff;
  text-decoration:none;color:var(--text-dark);transition:all .15s;line-height:1.2;}
.day-chip:hover{border-color:var(--brand,#1e40af);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.08);color:var(--text-dark);}
.day-chip.active{background:var(--brand,#1e40af);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(30,64,175,.35);}
.day-chip.active:hover{color:#fff;}
.day-chip-name{font-weight:700;font-size:.9rem;}
.day-chip-date{font-size:.78rem;opacity:.85;}

/* مدد المواعيد مجمّعة حسب الفترة */
.slot-period{margin-bottom:18px;}
.slot-period-title{font-weight:700;color:var(--muted);font-size:.9rem;margin-bottom:8px;
  display:flex;align-items:center;gap:7px;}
.slot-period-title i{color:var(--brand,#1e40af);}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;}
.slot-chip{border:1.5px solid var(--brand,#1e40af);background:#fff;color:var(--brand,#1e40af);
  border-radius:12px;padding:11px 6px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .15s;
  letter-spacing:.5px;direction:ltr;}
.slot-chip:hover{background:var(--brand,#1e40af);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(30,64,175,.30);}
.slot-chip.taken{border-color:var(--border);background:#f1f5f9;color:#94a3b8;cursor:not-allowed;
  text-decoration:line-through;box-shadow:none;transform:none;}
.slot-chip.picked{background:var(--brand,#1e40af);color:#fff;box-shadow:0 4px 12px rgba(30,64,175,.35);transform:translateY(-2px);}
.text-brand{color:var(--brand,#1e40af)!important;}

/* ملخّص الحجز داخل النافذة */
.booking-summary{background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;font-size:.92rem;}
.booking-summary>div{display:flex;align-items:center;gap:10px;}
.booking-summary i{color:var(--brand,#1e40af);width:18px;text-align:center;}
@media(max-width:576px){
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;}
}

/* ---------- 23. ملف المصحة (نمط فيسبوك: غلاف + صورة) ---------- */
.fb-cover{position:relative;height:240px;background:linear-gradient(135deg,var(--primary),var(--secondary));
  background-size:cover;background-position:center;}
.fb-cover-edit{position:absolute;bottom:14px;left:14px;}
.fb-head{position:relative;padding:0 24px 18px;display:flex;align-items:flex-end;gap:18px;}
.fb-avatar-wrap{position:relative;margin-top:-54px;flex:0 0 auto;}
.fb-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);display:block;}
.fb-avatar-empty{display:flex;align-items:center;justify-content:center;font-size:2.6rem;color:#94a3b8;background:#f1f5f9;}
.fb-avatar-edit{position:absolute;bottom:4px;inset-inline-start:4px;}
.fb-avatar-edit .btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.fb-title{padding-bottom:6px;}
@media(max-width:576px){
  .fb-cover{height:160px;}
  .fb-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .fb-avatar{width:96px;height:96px;}
}

/* روابط التذييل (صفحات الثقة) */
.footer-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:4px;}
.footer-links a{color:var(--muted);text-decoration:none;font-size:.85rem;}
.footer-links a:hover{color:var(--primary);text-decoration:underline;}

/* بطاقات الأطباء حسب التخصص في صفحة المصحة العامة */
.spec-group{margin-bottom:26px;}
.spec-group-title{font-weight:700;font-size:1.05rem;color:var(--primary);margin-bottom:12px;
  padding-bottom:6px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:8px;}
.spec-count{font-size:.78rem;font-weight:600;color:var(--muted);background:#eef2ff;border-radius:999px;padding:1px 9px;}

/* ---------- 24. علامة الحقل المطلوب ---------- */
.req{color:var(--danger);font-weight:700;margin-inline-start:2px;}
.req::after{content:"*";}

/* ---------- 25. تحقّق jQuery من جهة العميل ---------- */
.field-validation-error{display:block;color:var(--danger);font-size:.82rem;margin-top:4px;font-weight:600;}
.input-validation-error,.input-validation-error:focus{border-color:var(--danger)!important;
  box-shadow:0 0 0 .2rem rgba(239,68,68,.18)!important;}
.validation-summary-errors ul{margin:0;padding-inline-start:18px;}

/* ---------- 26. حلقة تركيز مرئية لمستخدمي لوحة المفاتيح ---------- */
.quick-action:focus-visible,.card a:focus-visible,.day-chip:focus-visible,
.report-pill:focus-visible,.slot-chip:focus-visible,.sidebar-link:focus-visible{
  outline:3px solid var(--primary-light);outline-offset:2px;border-radius:8px;
}

/* ---------- 27. حالة الإرسال (منع الإرسال المزدوج) ---------- */
button.is-busy,.btn.is-busy{position:relative;pointer-events:none;opacity:.75;}
button.is-busy::after,.btn.is-busy::after{content:"";display:inline-block;width:1em;height:1em;
  margin-inline-start:.5em;vertical-align:-.15em;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:ajax-spin .7s linear infinite;}

/* ---------- 28. جداول تتحوّل لبطاقات على الجوال ---------- */
/* أضِف الصنف .table-cards على <table> واضبط data-label على كل <td>. */
@media(max-width:768px){
  table.table-cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  table.table-cards,table.table-cards tbody,table.table-cards tr,table.table-cards td{display:block;width:100%;}
  table.table-cards tr{background:#fff;border:1px solid var(--border);border-radius:12px;
    box-shadow:0 1px 6px rgba(0,0,0,.06);margin-bottom:14px;padding:6px 4px;}
  table.table-cards tr:hover{background:#fff;}
  table.table-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:8px 14px!important;border:none!important;border-bottom:1px solid var(--border)!important;text-align:start;}
  table.table-cards td:last-child{border-bottom:none!important;}
  table.table-cards td::before{content:attr(data-label);font-weight:700;color:var(--muted);
    font-size:.8rem;flex:0 0 auto;}
  table.table-cards td:empty{display:none;}
  /* خلية الإجراءات تأخذ السطر كاملاً */
  table.table-cards td.cell-actions{flex-direction:column;align-items:stretch;}
  table.table-cards td.cell-actions::before{margin-bottom:6px;}
}

/* ---------- 29. أنماط الطباعة المشتركة للتقارير والمستندات ---------- */
@media print{
  /* إخفاء عناصر التطبيق غير الورقية */
  .app-navbar,.app-sidebar,.app-footer,.sidebar-overlay,.mobile-toggle,
  .app-breadcrumb,.report-subnav,.no-print,
  [data-ajax-filter],[data-ajax-reset]{display:none!important;}
  .app-shell,.app-main{display:block!important;padding:0!important;margin:0!important;}
  body{background:#fff!important;}
  /* المحتوى الورقي يأخذ العرض الكامل */
  #report-main,.print-area{width:100%!important;}
  .card{box-shadow:none!important;border:1px solid #e2e8f0!important;break-inside:avoid;}
  .card:hover{box-shadow:none!important;}
  .page-header{box-shadow:none!important;padding:0 0 12px!important;border-bottom:2px solid #1e40af;}
  .page-header .btn,.page-header form{display:none!important;}
  .table thead,.table thead.table-light{background:#fff!important;}
  .table thead th,.table thead.table-light th{color:#1e293b!important;border-bottom:2px solid #94a3b8!important;}
  .table tbody td{border-color:#cbd5e1!important;}
  .stat-card{box-shadow:none!important;border:1px solid #e2e8f0!important;}
  a[href]::after{content:"";} /* لا تطبع عناوين الروابط */
  .table-responsive{overflow:visible!important;}
}