/* ============================================================
   HBK Movies — نظام التصميم (Design System) v2 — 2026
   لوحة تحكم عربية RTL أولاً — ثيم داكن احترافي
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* الألوان الأساسية */
  --hbk-primary: #7c4dff;
  --hbk-primary-2: #4facfe;
  --hbk-primary-soft: rgba(124, 77, 255, .14);
  --hbk-primary-glow: 0 8px 24px rgba(124, 77, 255, .28);

  /* الأسطح */
  --hbk-bg: #0e1320;
  --hbk-surface: #171e30;
  --hbk-surface-2: #1c2438;
  --hbk-surface-3: #222c44;
  --hbk-border: rgba(255, 255, 255, .07);
  --hbk-border-strong: rgba(255, 255, 255, .14);

  /* النص */
  --hbk-text: #e8ecff;
  --hbk-text-muted: #9aa3c0;
  --hbk-text-dim: #6b7594;

  /* الحالات */
  --hbk-success: #2dd4a7;
  --hbk-success-soft: rgba(45, 212, 167, .14);
  --hbk-warning: #fbbf24;
  --hbk-warning-soft: rgba(251, 191, 36, .14);
  --hbk-danger: #f87171;
  --hbk-danger-soft: rgba(248, 113, 113, .14);
  --hbk-info: #38bdf8;
  --hbk-info-soft: rgba(56, 189, 248, .14);

  /* الهندسة */
  --hbk-radius-sm: 8px;
  --hbk-radius: 12px;
  --hbk-radius-lg: 16px;
  --hbk-radius-xl: 20px;
  --hbk-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --hbk-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  --hbk-shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --hbk-font: 'IBMPlexSansArabic', 'Cairo', 'Tajawal', sans-serif;
  --hbk-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Base ---------- */
body {
  background: var(--hbk-bg) !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -25%, rgba(124, 77, 255, .14), transparent),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(79, 172, 254, .08), transparent) !important;
  color: var(--hbk-text);
  font-family: var(--hbk-font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}

::selection { background: rgba(124, 77, 255, .4); color: #fff; }

/* ---------- 3. الشريط العلوي ---------- */
#page-topbar {
  background: rgba(15, 20, 34, .82) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hbk-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.navbar-header { padding: 0 6px; }

/* أزرار الشريط العلوي */
.header-item {
  border-radius: var(--hbk-radius-sm) !important;
  transition: background var(--hbk-transition), transform .15s ease;
}
.header-item:hover { background: var(--hbk-surface-2) !important; }
.header-item:active { transform: scale(.94); }

/* بحث الشريط العلوي */
.app-search .form-control {
  background: var(--hbk-surface) !important;
  border: 1px solid var(--hbk-border) !important;
  border-radius: 999px !important;
  padding-inline-start: 16px;
  padding-inline-end: 42px;
  transition: border-color var(--hbk-transition), box-shadow var(--hbk-transition);
}
.app-search .form-control:focus {
  border-color: var(--hbk-primary) !important;
  box-shadow: 0 0 0 4px var(--hbk-primary-soft);
}
.app-search span {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hbk-text-dim);
  pointer-events: none;
}

/* زر "إضافة جديد" */
#page-topbar .btn-secondary {
  background: linear-gradient(135deg, rgba(124, 77, 255, .22), rgba(79, 172, 254, .16)) !important;
  border: 1px solid rgba(124, 77, 255, .35) !important;
  color: #dfe3ff !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: all var(--hbk-transition);
}
#page-topbar .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(124, 77, 255, .34), rgba(79, 172, 254, .26)) !important;
  transform: translateY(-1px);
}

/* القوائم المنسدلة */
.dropdown-menu {
  background: var(--hbk-surface-2) !important;
  border: 1px solid var(--hbk-border) !important;
  border-radius: var(--hbk-radius) !important;
  box-shadow: var(--hbk-shadow-lg) !important;
  padding: 6px !important;
  animation: hbkMenuIn .16s ease;
}
@keyframes hbkMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
  border-radius: var(--hbk-radius-sm);
  color: var(--hbk-text) !important;
  padding: 9px 14px;
  transition: background .15s ease, color .15s ease;
}
.dropdown-item:hover {
  background: var(--hbk-primary-soft) !important;
  color: #fff !important;
}

/* ---------- 4. الشريط الجانبي ---------- */
.vertical-menu {
  background: #111626 !important;
  border-inline-end: 1px solid var(--hbk-border);
  box-shadow: 6px 0 30px rgba(0, 0, 0, .25);
}
.metismenu .menu-title {
  color: var(--hbk-text-dim) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding-inline-start: 20px;
}
.metismenu a {
  transition: all var(--hbk-transition);
  border-radius: var(--hbk-radius-sm);
  margin: 2px 8px;
  color: #c6cbe4 !important;
  font-weight: 500;
}
.metismenu a i {
  font-size: 19px;
  transition: transform .2s ease;
}
.metismenu a:hover {
  background: var(--hbk-primary-soft) !important;
  color: #fff !important;
}
.metismenu a:hover i { transform: scale(1.12); }
.metismenu li.mm-active > a {
  background: linear-gradient(135deg, #7c4dff, #4facfe) !important;
  box-shadow: var(--hbk-primary-glow);
  color: #fff !important;
}
.metismenu li.mm-active > a i { transform: scale(1.08); }

/* المربعات الفرعية */
.metismenu .sub-menu {
  background: rgba(0, 0, 0, .18) !important;
  border-radius: var(--hbk-radius-sm);
  margin: 4px 10px;
}
.metismenu .sub-menu a { font-size: 13.5px; }

/* ---------- 5. البطاقات ---------- */
.card {
  border-radius: var(--hbk-radius-lg) !important;
  border: 1px solid var(--hbk-border) !important;
  background: var(--hbk-surface) !important;
  box-shadow: var(--hbk-shadow-sm);
  transition: transform var(--hbk-transition), box-shadow var(--hbk-transition), border-color var(--hbk-transition);
}
.card:hover {
  border-color: var(--hbk-border-strong);
  box-shadow: var(--hbk-shadow);
}
.card .card-title { color: var(--hbk-text); font-weight: 600; }

/* بطاقات الإحصائيات */
.mini-stat, .mini-stat-wid {
  border-radius: var(--hbk-radius-lg) !important;
  overflow: hidden;
  position: relative;
}
.mini-stat::after {
  content: '';
  position: absolute;
  inset-inline-end: -24px;
  top: -24px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.mini-stat .mini-stat-icon, .mini-stat-wid .mini-stat-icon {
  border-radius: var(--hbk-radius) !important;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.mini-stat:hover .mini-stat-icon, .mini-stat-wid:hover .mini-stat-icon {
  transform: scale(1.12) rotate(-6deg);
}

/* ---------- 6. الأزرار ---------- */
.btn {
  border-radius: var(--hbk-radius-sm) !important;
  font-weight: 600;
  transition: all var(--hbk-transition) !important;
}
.btn-primary {
  background: linear-gradient(135deg, #7c4dff, #4facfe) !important;
  border: none !important;
  box-shadow: var(--hbk-primary-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124, 77, 255, .42); }
.btn-primary:active { transform: translateY(0) scale(.97); }
.btn-secondary, .btn-light {
  background: var(--hbk-surface-2) !important;
  border: 1px solid var(--hbk-border-strong) !important;
  color: var(--hbk-text) !important;
}
.btn-danger { background: linear-gradient(135deg, #f87171, #f43f5e) !important; border: none !important; }
.btn-success { background: linear-gradient(135deg, #2dd4a7, #10b981) !important; border: none !important; }
.btn-info { background: linear-gradient(135deg, #38bdf8, #3b82f6) !important; border: none !important; }
.btn-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; border: none !important; color: #1c1917 !important; }

/* ---------- 7. النماذج ---------- */
.form-control, .form-select {
  background: var(--hbk-surface) !important;
  border: 1px solid var(--hbk-border-strong) !important;
  border-radius: var(--hbk-radius-sm) !important;
  color: var(--hbk-text) !important;
  transition: border-color var(--hbk-transition), box-shadow var(--hbk-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hbk-primary) !important;
  box-shadow: 0 0 0 4px var(--hbk-primary-soft) !important;
}
.form-control::placeholder { color: var(--hbk-text-dim); }
.form-label { color: var(--hbk-text-muted); font-weight: 500; }

/* المفاتيح */
.switch input + span {
  background: var(--hbk-surface-3) !important;
  box-shadow: none !important;
}
.switch input:checked + span {
  background: linear-gradient(135deg, #7c4dff, #4facfe) !important;
  box-shadow: var(--hbk-primary-glow) !important;
}

/* ---------- 8. الجداول ---------- */
.table { --bs-table-bg: transparent; }
.table thead th {
  background: var(--hbk-surface-2) !important;
  color: #cfd6ff !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--hbk-border-strong) !important;
  white-space: nowrap;
}
.table tbody tr { transition: background .18s ease; }
.table tbody tr:hover { background: var(--hbk-primary-soft) !important; }
.table td { border-color: var(--hbk-border) !important; vertical-align: middle; }

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--hbk-surface) !important;
  border: 1px solid var(--hbk-border-strong) !important;
  border-radius: var(--hbk-radius-sm) !important;
  color: var(--hbk-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--hbk-radius-sm) !important;
  padding: 6px 14px !important;
  margin: 0 2px;
  transition: all .15s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #7c4dff, #4facfe) !important;
  border-color: transparent !important;
  box-shadow: var(--hbk-primary-glow);
  color: #fff !important;
}

/* ---------- 9. الشارات ---------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  padding: .35em .7em;
  font-size: 11.5px;
}
.badge.bg-success, .badge.badge-success { background: var(--hbk-success) !important; color: #052e21 !important; }
.badge.bg-warning, .badge.badge-warning { background: var(--hbk-warning) !important; color: #3d2a00 !important; }
.badge.bg-danger, .badge.badge-danger { background: var(--hbk-danger) !important; color: #4c0519 !important; }
.badge.bg-info, .badge.badge-info { background: var(--hbk-info) !important; color: #082f49 !important; }
.badge.bg-primary, .badge.badge-primary { background: var(--hbk-primary) !important; }

/* ---------- 10. النوافذ المنبثقة ---------- */
.modal-content {
  background: var(--hbk-surface-2) !important;
  border: 1px solid var(--hbk-border) !important;
  border-radius: var(--hbk-radius-xl) !important;
  box-shadow: var(--hbk-shadow-lg) !important;
  animation: hbkModalIn .28s cubic-bezier(.34, 1.3, .64, 1);
}
@keyframes hbkModalIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header { border-bottom-color: var(--hbk-border) !important; }
.modal-footer { border-top-color: var(--hbk-border) !important; }
.modal-title { font-weight: 600; }

/* ---------- 11. التبويبات ---------- */
.nav-tabs .nav-link {
  color: var(--hbk-text-muted) !important;
  border: none !important;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--hbk-radius-sm) var(--hbk-radius-sm) 0 0;
  transition: color .15s ease, background .15s ease;
}
.nav-tabs .nav-link:hover { color: #fff !important; }
.nav-tabs .nav-link.active {
  color: #fff !important;
  background: var(--hbk-primary-soft) !important;
  border-bottom: 2px solid var(--hbk-primary) !important;
}

/* ---------- 12. الإشعارات (toastr) ---------- */
.toast, #toast-container > div {
  border-radius: var(--hbk-radius) !important;
  box-shadow: var(--hbk-shadow-lg) !important;
  border: 1px solid var(--hbk-border-strong) !important;
}

/* ---------- 13. تنبيهات SweetAlert ---------- */
.swal2-popup {
  background: var(--hbk-surface-2) !important;
  border-radius: var(--hbk-radius-xl) !important;
  color: var(--hbk-text) !important;
}
.swal2-title { color: var(--hbk-text) !important; }
.swal2-html-container { color: var(--hbk-text-muted) !important; }
.swal2-confirm { border-radius: var(--hbk-radius-sm) !important; }

/* ---------- 14. صفحات تسجيل الدخول ---------- */
.account-pages .card {
  border-radius: var(--hbk-radius-xl) !important;
  overflow: hidden;
}
.account-pages .card .bg-primary {
  background: linear-gradient(135deg, #7c4dff, #4facfe) !important;
}

/* ---------- 15. شريط التمرير ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c4dff, #4facfe);
  border-radius: 999px;
  border: 2px solid var(--hbk-bg);
}
::-webkit-scrollbar-thumb:hover { background: #8a5cff; }

/* ---------- 16. أنيميشن عام ---------- */
@keyframes hbkFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-content { animation: hbkFadeUp .4s ease both; }

/* نبض للشارات الحية */
@keyframes hbkPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 77, 255, .4); }
  50% { box-shadow: 0 0 0 6px rgba(124, 77, 255, 0); }
}

/* مؤشر التحميل الدوار */
.spinner-border { color: var(--hbk-primary) !important; }

/* ---------- 17. حالات فارغة وإضافات ---------- */
.hbk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: var(--hbk-text-dim);
  text-align: center;
}
.hbk-empty i { font-size: 44px; margin-bottom: 12px; opacity: .5; }

/* صفوف الزر عند التحويم في الجداول */
.btn-sm { border-radius: 7px !important; }

/* ---------- 18. إصلاحات RTL ---------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .switch input + span:before { left: auto; right: 5px; }
[dir="rtl"] .switch input + span:after { left: auto; right: 32px; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .float-left { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .ml-1, [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ml-2, [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .mr-1, [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .mr-2, [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .pl-2, [dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: .5rem !important; }
[dir="rtl"] .pr-2, [dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: .5rem !important; }
[dir="rtl"] .dropdown-menu-end { right: auto !important; left: 0 !important; }
[dir="rtl"] .dropdown-menu-start { left: auto !important; right: 0 !important; }
[dir="rtl"] .mr-auto, [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ml-auto, [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

/* الأسهم العكسية للقوائم في RTL */
[dir="rtl"] .metismenu .has-arrow::after {
  right: auto;
  left: 16px;
  transform: rotate(135deg) translateY(-50%);
}
[dir="rtl"] .metismenu .mm-active > .has-arrow::after {
  transform: rotate(-45deg) translateY(-50%);
}

/* ---------- 19. تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 20. استجابة الموبايل ---------- */
@media (max-width: 767.98px) {
  .card-body { padding: 1.1rem; }
  .table-responsive { border-radius: var(--hbk-radius); }
  #page-topbar .app-search { display: none; }
  .navbar-header { padding: 0 2px; }
}

/* ---------- 21. تدرجات بطاقات الإحصائيات ---------- */
.mini-stat.bg-primary {
  background: linear-gradient(135deg, #7c4dff 0%, #6a3ae8 100%) !important;
  box-shadow: 0 8px 28px rgba(124, 77, 255, .35);
}
.mini-stat.bg-info {
  background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%) !important;
  box-shadow: 0 8px 28px rgba(59, 130, 246, .35);
}
.mini-stat.bg-success {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  box-shadow: 0 8px 28px rgba(16, 185, 129, .35);
}
.mini-stat.bg-warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 8px 28px rgba(245, 158, 11, .35);
}
.mini-stat .mini-stat-img img {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.mini-stat:hover .mini-stat-img img {
  transform: scale(1.08) rotate(-4deg);
}

/* TASK-013: أهداف لمس أكبر لأزرار المحرر على الموبايل */
@media (max-width: 520px) {
    .note-toolbar .note-btn { min-width: 32px; min-height: 32px; }
}

/* TASK-DASH: منع تجاوز محتوى بطاقات الإحصائيات */
.mini-stat { overflow: hidden; }
.mini-stat .card-body { min-height: 118px; }

/* TASK-005: RTL — عكس أسهم breadcrumb والـ dropdowns في الوضع العربي */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\2039" !important; /* ‹ بدل › */
    padding-left: .5rem;
    padding-right: .25rem;
}
[dir="rtl"] .page-title-box .breadcrumb {
    direction: rtl;
}
[dir="rtl"] .float-right, [dir="rtl"] .float-end { float: left !important; }
[dir="rtl"] .float-left, [dir="rtl"] .float-start { float: right !important; }

/* TASK-006: Accessibility — مؤشر تركيز واضح + أهداف لمس */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(76, 175, 80, .55) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 .25rem rgba(76, 175, 80, .25) !important;
}
@media (max-width: 768px) {
    .btn, .dropdown-toggle, .page-title-box .btn { min-height: 40px; }
}

/* TASK-007: نتائج البحث العام */
.app-search { position: relative; }
.app-search-results {
    position: absolute; top: 100%; right: 0; left: 0; z-index: 1050;
    background: #1e2430; border: 1px solid #333; border-radius: 8px;
    margin-top: 4px; max-height: 320px; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.4); display: none;
}
.app-search-results .dropdown-item { padding: 8px 12px; color: #ddd; }
.app-search-results .dropdown-item:hover { background: #2a3142; color: #fff; }
.app-search-results .dropdown-item i { margin-inline-end: 6px; color: #76b900; }

/* TASK-006/الموبايل: تحسين قراءة الجداول على الشاشات الصغيرة (توصية الجيش) */
@media (max-width: 767px) {
    .table td, .table th {
        padding: .5rem .45rem !important;
        font-size: 12.5px;
        white-space: normal !important;
        word-break: break-word;
    }
    .table-responsive .table .badge {
        font-size: 11px;
        padding: .35em .5em;
    }
    .card-body { padding: 1rem; }
    h4.card-title { font-size: 1rem; }
}