/*
  لوحة إدارة «حصن النور» (المرجع: docs/mockups/admin/final-home.png)
  - التقسيمة من «يُسر»: شريط أقسام ضيق (٦٤px) + قايمة صفحات القسم المفتوح على الأرضية + لوح أبيض فيه الشريط العلوي والصفحة.
  - الستايل من تصوّر «اللعب المرتب»: كروت ملوّنة هادية بأيقونة في دايرة، وأرقام تقيلة بلون الكارت، وشارات ملوّنة.
  - الزراير زي دولينجو بالأزرق: لون صريح، وحواف ١٦، و«رف» أغمق ٤px تحت الزرار وبيتداس لما تضغط.
  - الخط Baloo Bhaijaan 2 زي «يُسر» بالظبط (على سيرفرنا)، وتقل الخط زيه: العناوين ٨٠٠ والقايمة ٧٠٠.
*/

:root {
  --h-ground: #f3f4f1;
  --h-panel: #ffffff;
  --h-card: #ffffff;
  --h-soft: #f5f6f7;
  --h-line: #e5e5e5;
  --h-line-2: #e9ebee;
  --h-ink: #262b33;
  --h-ink-2: #4b5260;
  --h-ink-3: #8a909c;

  --h-blue: #1cb0f6;
  --h-blue-ledge: #1899d6;
  --h-blue-ink: #1287c4;
  --h-blue-soft: #ddf4ff;

  --h-green: #58cc02;
  --h-green-ledge: #46a302;
  --h-red: #ff4b4b;
  --h-red-ledge: #ea2b2b;

  --h-r-md: 14px;
  --h-r-lg: 18px;
  --h-r-xl: 22px;
  --h-font: 'Baloo Bhaijaan 2', 'Segoe UI', Tahoma, 'Geeza Pro', sans-serif;
}

/* ═════════ الأرضية والخط ═════════ */
.fi-body {
  background: var(--h-ground);
  color: var(--h-ink);
  font-family: var(--h-font);
}
.fi-header-heading { font-size: 1.75rem; font-weight: 800; line-height: 1.3; color: var(--h-ink); letter-spacing: 0; }
.fi-header-subheading { font-size: 0.95rem; font-weight: 500; color: var(--h-ink-3); }

/* ═════════ التقسيمة: شريط · قايمة · لوح ═════════ */
.fi-layout {
  gap: 10px;
  padding: 10px;
  min-height: 100dvh;
  background: var(--h-ground);
}

/* ── الشريط الضيق: شعار أزرق على رف، وكل قسم في مربع أبيض ── */
.hisn-rail { display: none; }
@media (min-width: 1024px) {
  .hisn-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 64px;
    width: 64px;
    padding: 4px 0;
    position: sticky;
    top: 10px;
    height: calc(100dvh - 20px);
  }
}
.hisn-rail-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: var(--h-r-md);
  background: var(--h-blue);
  box-shadow: 0 4px 0 var(--h-blue-ledge);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 23px;
  line-height: 1;
  text-decoration: none;
}
.hisn-rail-items { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hisn-rail-item {
  width: 48px;
  height: 48px;
  border-radius: var(--h-r-md);
  background: var(--h-card);
  border: 2px solid var(--h-line);
  box-shadow: 0 3px 0 var(--h-line);
  color: var(--h-ink-2);
  display: grid;
  place-items: center;
  transition: transform 0.06s, box-shadow 0.06s;
}
.hisn-rail-item:hover { color: var(--h-blue-ink); }
.hisn-rail-item:active { transform: translateY(3px); box-shadow: none; }
.hisn-rail-item.is-active { background: var(--h-blue-soft); border-color: var(--h-blue); box-shadow: 0 3px 0 var(--h-blue); color: var(--h-blue-ink); }
.hisn-rail-icon { width: 22px; height: 22px; }
.hisn-rail-foot { display: flex; flex-direction: column; align-items: center; }
.hisn-rail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--h-blue-soft);
  color: var(--h-blue-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
}

/* ── قايمة صفحات القسم: على الأرضية من غير خلفية، الاسم + عدد في دايرة رمادي (زي «يُسر») ── */
@media (min-width: 1024px) {
  .fi-sidebar.fi-sidebar,
  .fi-sidebar.fi-sidebar-open {
    position: sticky;
    top: 10px;
    height: calc(100dvh - 20px);
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
  }
  .fi-sidebar-header-ctn,
  .fi-sidebar-header-controls,
  .fi-sidebar .fi-global-search-ctn,
  .fi-sidebar .fi-sidebar-footer { display: none; }
  /* القسم المفتوح بس؛ الأقسام كلها في الشريط الضيق */
  .fi-sidebar-group:not(:has(.fi-active)) { display: none; }
}
.fi-sidebar-nav { padding: 8px 6px 4px; overflow-x: visible; }
.fi-sidebar-nav-groups { margin: 0 !important; gap: 14px; }
.fi-sidebar-group { gap: 0; }
.fi-sidebar-group-btn { padding: 4px 10px 14px; }
.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn { display: none; }
.fi-sidebar-group-label { font-size: 1.4rem; font-weight: 800; line-height: 1.3; color: var(--h-ink); }
.fi-sidebar-group-items { gap: 6px; margin: 0; padding: 0; }
.fi-sidebar-item-grouped-border { display: none; }
.fi-sidebar-item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--h-r-md);
  border: 2px solid transparent;
  background: transparent;
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s;
}
.fi-sidebar-item-btn > .fi-icon { display: none; }
.fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, 0.7); }
.fi-sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  color: var(--h-ink-2);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--h-blue-soft); border-color: var(--h-blue); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--h-blue-ink); font-weight: 800; }
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge { background: #fff; color: var(--h-blue-ink); }
.fi-sidebar-item-badge-ctn .fi-badge .fi-badge-label-ctn { line-height: 1; }
.fi-sidebar-item-badge-ctn .fi-badge {
  display: inline-grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e8eaed;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--h-ink-2);
}

/* ── اللوح ── */
.fi-main-ctn {
  background: var(--h-panel);
  border: 2px solid var(--h-line-2);
  border-radius: var(--h-r-xl);
  min-height: calc(100dvh - 20px);
  opacity: 1 !important;
}
.fi-main { padding-block: 26px 36px; }
.hisn-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 22px;
  background: var(--h-panel);
  border-bottom: 2px solid var(--h-line-2);
  border-radius: var(--h-r-xl) var(--h-r-xl) 0 0;
}
.hisn-crumbs { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.92rem; font-weight: 600; color: var(--h-ink-3); }
.hisn-crumbs strong { color: var(--h-ink-2); font-weight: 800; }
.hisn-crumbs-sep { opacity: 0.55; }
.hisn-search { flex: 1; max-width: 440px; margin-inline: auto; }
.hisn-search .fi-input-wrp { height: 42px; border-radius: 12px; background: var(--h-soft); border-color: var(--h-line-2); }
.hisn-top-tools { display: flex; align-items: center; gap: 10px; }
/* زرار القايمة بتاع Filament برّه اللوح: بنستخدم زرارنا اللي جوه الشريط */
.fi-layout-sidebar-toggle-btn-ctn { display: none; }
.hisn-menu-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid var(--h-line);
  background: #fff;
  box-shadow: 0 3px 0 var(--h-line);
  color: var(--h-ink-2);
  cursor: pointer;
}
.hisn-menu-btn:active { transform: translateY(3px); box-shadow: none; }
.hisn-menu-icon { width: 22px; height: 22px; }
@media (min-width: 1024px) { .hisn-menu-btn { display: none; } }

/* الموبايل: لوح أقرب للحافة، وشريط أصغر */
@media (max-width: 1023px) {
  .fi-layout { padding: 8px; }
  .hisn-topbar { gap: 10px; padding: 8px 12px; min-height: 58px; }
}
@media (max-width: 639px) {
  .hisn-crumbs-root, .hisn-crumbs-sep { display: none; }
  .hisn-search { max-width: none; }
}

/* شعار الموبايل */
.hisn-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--h-font); }
.hisn-brand-mark { width: 36px; height: 36px; border-radius: 12px; background: var(--h-blue); box-shadow: 0 3px 0 var(--h-blue-ledge); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; line-height: 1; }
.hisn-brand-name { font-weight: 800; font-size: 1.1rem; color: var(--h-ink); }

/* ═════════ الكروت ═════════ */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-in-repeatable-item,
.fi-fo-repeater-item {
  background: var(--h-card);
  border: 2px solid var(--h-line-2);
  border-radius: var(--h-r-lg);
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
}
.fi-section.fi-section-not-contained { background: transparent; border: 0; box-shadow: none; }
.fi-section-header-heading,
.fi-ta-header-heading { font-size: 1.15rem; font-weight: 800; color: var(--h-ink); }
.fi-section-header-description { color: var(--h-ink-3); }

/* ── كروت الأرقام (الرئيسية) ── */
.hisn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1279px) { .hisn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* الموبايل: كارتين جنب بعض، أصغر */
@media (max-width: 639px) {
  .hisn-stats { gap: 10px; }
  .hisn-stats .hisn-stat { padding: 12px 12px 14px; }
  .hisn-stats .hisn-stat-value { font-size: 2rem; }
  .hisn-stats .hisn-stat-head { gap: 8px; }
  .hisn-stats .hisn-stat-icon { width: 34px; height: 34px; flex: 0 0 34px; }
  .hisn-stats .hisn-stat-icon svg, .hisn-stats .hisn-stat-icon .fi-icon { width: 18px; height: 18px; }
  .hisn-stats .hisn-stat-label { font-size: 0.85rem; line-height: 1.35; }
}
.hisn-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px 18px;
  border-radius: var(--h-r-lg);
  background: var(--tone-soft);
}
.hisn-stat-head { display: flex; align-items: center; gap: 10px; }
.hisn-stat-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tone-badge);
  color: var(--tone-ink);
  display: grid;
  place-items: center;
}
.hisn-stat-icon svg,
.hisn-stat-icon .fi-icon { width: 22px; height: 22px; }
.hisn-stat-label { font-size: 0.98rem; font-weight: 700; color: var(--h-ink-2); }
.hisn-stat-value { font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--tone-ink); text-align: center; margin-top: 4px; }
.hisn-stat-note { font-size: 0.88rem; font-weight: 600; color: var(--h-ink-3); text-align: center; }
.hisn-stat-bar { height: 8px; margin: 2px 6px 0; border-radius: 99px; background: rgba(255, 255, 255, 0.9); overflow: hidden; }
.hisn-stat-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--h-blue); }
.hisn-tone-green { --tone-soft: #e3f7d6; --tone-badge: #c6eda7; --tone-ink: #2f7d00; }
.hisn-tone-blue { --tone-soft: #e1f3fd; --tone-badge: #bfe5fb; --tone-ink: #1287c4; }
.hisn-tone-gold { --tone-soft: #fff4d1; --tone-badge: #ffe38c; --tone-ink: #8f6200; }
.hisn-tone-orange { --tone-soft: #ffe8d6; --tone-badge: #ffcfa8; --tone-ink: #b8460a; }

/* ── الجداول ── */
.fi-ta-header { padding-block: 16px; }
.fi-ta-table thead th { background: var(--h-soft); }
.fi-ta-header-cell-label { font-size: 0.86rem; font-weight: 700; color: var(--h-ink-3); }
.fi-ta-row:hover { background: #fafcff; }
.fi-ta-text-item-label { font-weight: 500; color: var(--h-ink-2); }

/* ── الشارات: ملوّنة هادية (زي «بعد ٣ أيام») ── */
.fi-badge { border-radius: 999px; font-weight: 700; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
.fi-ta-cell .fi-badge,
.fi-in-entry .fi-badge { padding-inline: 12px; min-height: 28px; }
/* علامة العدد الصغيرة فوق الأيقونات (زي الفلتر): تفضل صغيرة، ومن غير «0» لما مفيش فلتر */
[data-filtered="0"] .fi-icon-btn-badge-ctn { display: none; }
.fi-icon-btn-badge-ctn .fi-badge { min-height: 0; padding: 0 5px; font-size: 0.68rem; line-height: 1.4; }
.fi-badge.fi-color-danger { background: #ffe1e1; color: #d62d2d; }
.fi-badge.fi-color-warning { background: #fff1c2; color: #8f6200; }
.fi-badge.fi-color-success { background: #e3f7d6; color: #2f7d00; }
.fi-badge.fi-color-primary,
.fi-badge.fi-color-info { background: var(--h-blue-soft); color: var(--h-blue-ink); }
.fi-badge.fi-color-gray { background: #eceef1; color: var(--h-ink-2); }
.fi-badge .fi-icon { color: currentColor; }

/* ═════════ الزراير: دولينجو بالأزرق ═════════ */
.fi-btn:not(.fi-link) {
  border-radius: 16px;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 10px 20px;
  border: 2px solid transparent;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.fi-btn:not(.fi-link):not([disabled]):hover { filter: brightness(1.05); }
.fi-btn:not(.fi-link):not([disabled]):active { transform: translateY(4px); box-shadow: none !important; }
/* الأساسي: أزرق صريح على رف أغمق */
.fi-btn.fi-color-primary:not(.fi-link):not(.fi-outlined) { background: var(--h-blue); color: #fff; box-shadow: 0 4px 0 var(--h-blue-ledge); }
.fi-btn.fi-color-primary:not(.fi-link):not(.fi-outlined) > .fi-icon { color: #fff; }
/* التاني: أبيض بإطار ورف رمادي، والكلام أزرق */
/* (Filament بيعمل الزرار الرمادي من غير كلاس لون: .fi-btn لوحده) */
.fi-btn:not(.fi-color):not(.fi-link),
.fi-btn.fi-color-gray:not(.fi-link),
.fi-btn.fi-outlined:not(.fi-link) { background: #fff; color: var(--h-blue-ink); border-color: var(--h-line); box-shadow: 0 4px 0 var(--h-line); }
.fi-btn:not(.fi-color):not(.fi-link) > .fi-icon,
.fi-btn.fi-color-gray:not(.fi-link) > .fi-icon,
.fi-btn.fi-outlined:not(.fi-link) > .fi-icon { color: var(--h-blue-ink); }
/* خطر ونجاح */
.fi-btn.fi-color-danger:not(.fi-link):not(.fi-outlined) { background: var(--h-red); color: #fff; box-shadow: 0 4px 0 var(--h-red-ledge); }
.fi-btn.fi-color-danger:not(.fi-link):not(.fi-outlined) > .fi-icon { color: #fff; }
.fi-btn.fi-color-success:not(.fi-link):not(.fi-outlined) { background: var(--h-green); color: #fff; box-shadow: 0 4px 0 var(--h-green-ledge); }
.fi-btn.fi-size-sm:not(.fi-link),
.fi-btn.fi-size-xs:not(.fi-link) { padding: 6px 14px; border-radius: 12px; font-size: 0.88rem; }
.fi-link { font-weight: 700; }

/* ═════════ الحقول ═════════ */
.fi-input-wrp { border-radius: var(--h-r-md); border: 2px solid var(--h-line); background: #fff; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
.fi-input-wrp:focus-within { border-color: var(--h-blue); }
.fi-fo-field-label-content { font-weight: 700; color: var(--h-ink-2); }

/* ═════════ النوافذ والإشعارات ═════════ */
.fi-modal-window { border: 2px solid var(--h-line); border-radius: var(--h-r-xl); box-shadow: 0 16px 40px rgba(17, 24, 39, 0.12); }
.fi-no-notification { border: 2px solid var(--h-line); border-radius: var(--h-r-lg); }

/* ═════════ صفحة الدخول ═════════ */
.fi-simple-layout { background: var(--h-ground); }
.fi-simple-main { border: 2px solid var(--h-line); border-radius: 24px; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }