@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');
/* =====================================================================
   Mwasem Dashboard — Unified UI Layer (Enterprise edition)
   إطار غامق (سايدبار + هيدر) + منطقة عمل فاتحة كثيفة. لكنة برونزية.
   كونتراست حاد، زوايا صغيرة، ظلال صلبة دقيقة. طبقة بصرية فقط — لا منطق.
   ===================================================================== */

:root {
  /* الإطار الغامق (السايدبار + الهيدر العلوي) */
  --mw-frame: #15262c;
  --mw-frame-2: #1c2e35;       /* hover/active bg داخل الإطار */
  --mw-frame-3: #24383f;       /* حدود/فواصل داخل الإطار */
  --mw-frame-text: #cdd8db;
  --mw-frame-text-soft: #8aa0a7;

  /* التيل (أزرار/روابط/تأكيد في المحتوى) */
  --mw-primary: #274651;
  --mw-primary-600: #1f3942;
  --mw-primary-700: #15262c;
  --mw-primary-050: #e9eff0;
  --mw-primary-100: #d3dee0;

  /* البرونزي (لكنة: نشط/شارات مميّزة) */
  --mw-accent: #9e7653;
  --mw-accent-600: #87623f;
  --mw-accent-700: #6f4f31;
  --mw-accent-050: #f3ece3;

  /* منطقة العمل الفاتحة */
  --mw-bg: #f4f6f7;            /* رمادي فاتح جداً (لا كريمي) */
  --mw-surface: #ffffff;
  --mw-surface-2: #f7f9f9;
  --mw-border: #dde2e4;        /* حدود واضحة */
  --mw-border-strong: #c7cfd2;

  --mw-text: #16242a;
  --mw-text-muted: #5b6b72;
  --mw-text-soft: #8a989e;

  /* دلالية صلبة */
  --mw-success: #1f7a4d; --mw-success-050: #e3f1ea;
  --mw-warning: #a9760a; --mw-warning-050: #f6eed9;
  --mw-danger: #b5362a;  --mw-danger-050: #f7e6e4;
  --mw-info: #236083;    --mw-info-050: #e3eef3;

  /* شكل صارم */
  --mw-radius: 8px;
  --mw-radius-sm: 6px;
  --mw-radius-lg: 10px;
  --mw-shadow-sm: 0 1px 2px rgba(21, 38, 44, .12);
  --mw-shadow-md: 0 2px 6px rgba(21, 38, 44, .14);

  --mw-sidebar-w: 252px;
  --mw-topbar-h: 56px;
}

/* ===== تهيئة عامة ===== */
body {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--mw-text);
}
body:not(.mw-dark) { background: var(--mw-bg); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c2cccf; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a9b6ba; }

a { color: var(--mw-primary); }
a:hover { color: var(--mw-primary-600); }
h1, h2, h3, h4, h5 { font-weight: 800; color: var(--mw-text); }

/* ===== تجاوزات Bootstrap ===== */
.btn { border-radius: var(--mw-radius-sm); font-weight: 700; }
.btn-primary {
  --bs-btn-bg: var(--mw-primary); --bs-btn-border-color: var(--mw-primary);
  --bs-btn-hover-bg: var(--mw-primary-600); --bs-btn-hover-border-color: var(--mw-primary-600);
  --bs-btn-active-bg: var(--mw-primary-700); --bs-btn-active-border-color: var(--mw-primary-700);
  --bs-btn-disabled-bg: var(--mw-primary); --bs-btn-disabled-border-color: var(--mw-primary);
}
.btn-outline-primary { --bs-btn-color: var(--mw-primary); --bs-btn-border-color: var(--mw-primary); --bs-btn-hover-bg: var(--mw-primary); --bs-btn-hover-border-color: var(--mw-primary); }
.btn-secondary { --bs-btn-bg: var(--mw-accent); --bs-btn-border-color: var(--mw-accent); --bs-btn-hover-bg: var(--mw-accent-600); --bs-btn-hover-border-color: var(--mw-accent-600); }
.btn-success { --bs-btn-bg: var(--mw-success); --bs-btn-border-color: var(--mw-success); }
.btn-danger  { --bs-btn-bg: var(--mw-danger);  --bs-btn-border-color: var(--mw-danger); }
.btn-warning { --bs-btn-bg: var(--mw-warning); --bs-btn-border-color: var(--mw-warning); --bs-btn-color: #fff; }
.btn-info    { --bs-btn-bg: var(--mw-info);    --bs-btn-border-color: var(--mw-info); --bs-btn-color: #fff; }

.text-primary { color: var(--mw-primary) !important; }
.bg-primary { background-color: var(--mw-primary) !important; }
.badge.bg-primary { background-color: var(--mw-primary) !important; }
.badge.bg-secondary { background-color: var(--mw-accent) !important; }

.card {
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow-sm);
  background: var(--mw-surface);
}

/* جداول قوية: رؤوس غامقة واضحة + صفوف كثيفة + فواصل واضحة */
.table { --bs-table-color: var(--mw-text); margin-bottom: 0; }
.table > :not(caption) > * > * { border-color: var(--mw-border); padding: .6rem .75rem; }
.table thead th {
  background: var(--mw-frame) !important;
  color: #eef3f4 !important;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 0;
  white-space: normal;
  word-spacing: normal;
  text-transform: none;       /* لا حروف كبيرة على العربية */
  border-color: var(--mw-frame-3) !important;
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--mw-surface-2); }

.form-control, .form-select {
  border-radius: var(--mw-radius-sm);
  border-color: var(--mw-border-strong);
  color: var(--mw-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 .18rem rgba(39, 70, 81, .18);
}
/* حقول التاريخ/الوقت: نفرض اتجاه LTR حتى تظهر صيغة dd/mm/yyyy واضحة بدل
   انعكاس RTL الذي يُظهر نص النائب مبعثراً («قنس/رهش/مو»). يشمل أي input تاريخ. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  direction: ltr;
  text-align: right; /* يُبقي القيمة قرب حافة الحقل المناسبة في RTL */
}
.nav-link { color: var(--mw-text-muted); }
.nav-link.active, .nav-link:hover { color: var(--mw-primary); }
.page-link { color: var(--mw-primary); }
.page-item.active .page-link { background: var(--mw-primary); border-color: var(--mw-primary); }
.text-info, a.text-info { color: var(--mw-info) !important; }

/* ===== مكوّنات مشتركة (Tailwind وغيرها) ===== */
.mw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--mw-primary); color: #fff; border: 1px solid var(--mw-primary); border-radius: var(--mw-radius-sm); padding: .5rem .95rem; font-weight: 700; cursor: pointer; transition: background .12s, transform .08s; text-decoration: none; }
.mw-btn:hover { background: var(--mw-primary-600); color: #fff; }
.mw-btn:active { transform: translateY(1px); }
.mw-btn--ghost { background: transparent; color: var(--mw-primary); }
.mw-btn--accent { background: var(--mw-accent); border-color: var(--mw-accent); }
.mw-btn--accent:hover { background: var(--mw-accent-600); }

.mw-card { background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: var(--mw-radius); box-shadow: var(--mw-shadow-sm); padding: .9rem 1rem; }
.mw-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: var(--mw-radius-sm); font-size: .72rem; font-weight: 800; background: var(--mw-primary-050); color: var(--mw-primary); }
.mw-badge--accent { background: var(--mw-accent-050); color: var(--mw-accent-700); }
.mw-badge--success { background: var(--mw-success-050); color: var(--mw-success); }
.mw-badge--warning { background: var(--mw-warning-050); color: var(--mw-warning); }
.mw-badge--danger { background: var(--mw-danger-050); color: var(--mw-danger); }

.mw-input { width: 100%; border: 1px solid var(--mw-border-strong); border-radius: var(--mw-radius-sm); padding: .5rem .75rem; background: var(--mw-surface); color: var(--mw-text); font-family: inherit; }
.mw-input:focus { outline: none; border-color: var(--mw-primary); box-shadow: 0 0 0 3px rgba(39,70,81,.18); }

.mw-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--mw-surface); border-radius: var(--mw-radius); overflow: hidden; border: 1px solid var(--mw-border); }
.mw-table th { text-align: inherit; background: var(--mw-frame); color: #eef3f4; font-weight: 700; font-size: .8rem; padding: .6rem .8rem; }
.mw-table td { padding: .55rem .8rem; border-top: 1px solid var(--mw-border); }
.mw-table tbody tr:hover { background: var(--mw-surface-2); }

/* ===== حالات موحّدة ===== */
.mw-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; width: 100%; text-align: center; color: var(--mw-text-muted); gap: .5rem; padding: 1.25rem; }
.mw-state .material-symbols-rounded, .mw-state .mw-state-icon { font-size: 46px; color: var(--mw-text-soft); }
.mw-spinner { width: 36px; height: 36px; border: 3px solid var(--mw-primary-100); border-top-color: var(--mw-primary); border-radius: 50%; animation: mw-spin .8s linear infinite; }
@keyframes mw-spin { to { transform: rotate(360deg); } }
.mw-skeleton { background: linear-gradient(90deg, #e9edee 25%, #f2f5f5 37%, #e9edee 63%); background-size: 400% 100%; animation: mw-shimmer 1.4s ease infinite; border-radius: var(--mw-radius-sm); }
@keyframes mw-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* =====================================================================
   الشِل: سايدبار غامق ثابت + هيدر علوي غامق صلب
   ===================================================================== */
#mw-shell { pointer-events: none; }

.mw-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--mw-sidebar-w);
  background: var(--mw-frame); color: var(--mw-frame-text); display: flex; flex-direction: column;
  pointer-events: auto; z-index: 1045; transition: transform .22s ease; overflow-y: auto;
  border-left: 1px solid var(--mw-frame-3);
}
.mw-sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: 0 16px; height: var(--mw-topbar-h); font-weight: 800; font-size: 1.02rem; color: #fff; border-bottom: 1px solid var(--mw-frame-3); flex-shrink: 0; }
.mw-sidebar__brand .mw-logo { width: 32px; height: 32px; border-radius: 7px; background: var(--mw-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.mw-nav { padding: 8px 8px 20px; }
.mw-nav__group-title { font-size: .66rem; font-weight: 800; color: var(--mw-frame-text-soft); padding: 14px 10px 5px; letter-spacing: .04em; text-transform: uppercase; }
.mw-nav__link {
  position: relative; display: flex; align-items: center; gap: .6rem; padding: .52rem .7rem;
  border-radius: var(--mw-radius-sm); color: var(--mw-frame-text); text-decoration: none;
  font-size: .875rem; font-weight: 600; transition: background .1s, color .1s; margin-bottom: 1px;
}
.mw-nav__link:hover { background: var(--mw-frame-2); color: #fff; }
.mw-nav__link.is-active { background: var(--mw-frame-2); color: #fff; }
/* شريط برونزي للقسم النشط (RTL: على اليمين) */
.mw-nav__link.is-active::before { content: ''; position: absolute; right: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--mw-accent); }
.mw-nav__link.is-active .material-symbols-rounded { color: var(--mw-accent); }
.mw-nav__link .material-symbols-rounded { font-size: 20px; }
.mw-sidebar__footer { margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--mw-frame-3); font-size: .72rem; color: var(--mw-frame-text-soft); }

/* الهيدر العلوي الصلب — يمتد على عرض منطقة العمل */
.mw-topbar {
  position: fixed; top: 0; right: var(--mw-sidebar-w); left: 0; height: var(--mw-topbar-h);
  background: var(--mw-frame); color: #fff; display: flex; align-items: center; gap: .75rem;
  padding: 0 18px; z-index: 1042; border-bottom: 1px solid var(--mw-frame-3); pointer-events: auto;
}
.mw-topbar__title { font-weight: 800; font-size: 1rem; color: #fff; }
.mw-topbar__spacer { flex: 1; }
.mw-topbar__toggle { display: none; background: none; border: none; cursor: pointer; color: #fff; padding: 4px; }
.mw-topbar__action { display: inline-flex; align-items: center; gap: .4rem; background: var(--mw-frame-2); color: var(--mw-frame-text); border: 1px solid var(--mw-frame-3); border-radius: var(--mw-radius-sm); padding: .4rem .7rem; font-weight: 700; font-size: .82rem; cursor: pointer; }
.mw-topbar__action:hover { background: var(--mw-danger); color: #fff; border-color: var(--mw-danger); }

/* دفع المحتوى ليفسح للإطار */
body.mw-has-shell { margin-right: var(--mw-sidebar-w); padding-top: var(--mw-topbar-h); }
.mw-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1044; pointer-events: auto; display: none; }

@media (max-width: 992px) {
  body.mw-has-shell { margin-right: 0; }
  .mw-sidebar { transform: translateX(100%); }
  .mw-sidebar.is-open { transform: translateX(0); box-shadow: var(--mw-shadow-md); }
  .mw-topbar { right: 0; }
  .mw-topbar__toggle { display: inline-flex; }
  .mw-backdrop.is-open { display: block; }
}