/* ============================================================
   FinanceFlow — "Priscilla Plum" Design System (v3)
   عقد CSS مشترك: رموز التصميم + عقد ff-* + تحسينات Bootstrap
   مرجع القالب: Outcome داكنة برسم شهري + حبوب بنفسجية + CTA مرجاني
   عربي أولاً (RTL-first، خصائص منطقية) — الخط الموحد Tajawal
   ============================================================ */

/* ------------------------------------------------------------
   1) الرموز (Design Tokens) — نفس أسماء --ff-* من v2، قيم v3
   ------------------------------------------------------------ */
:root {
  /* الحبر */
  --ff-ink-900: #120216;
  --ff-ink-600: #5C4A63;
  --ff-ink-400: #8F659A;
  --ff-ink-300: #C9B8CF;

  /* الأسطح */
  --ff-line: rgba(18, 2, 22, 0.08);
  --ff-bg: #F7F4F7;
  --ff-surface: #FFFFFF;

  /* الأساس (plum) */
  --ff-primary: #42224A;
  --ff-primary-hi: #5A2F66;
  --ff-primary-soft: #F1E9F3;

  /* الدلالات المالية */
  --ff-revenue: #7A4E86;
  --ff-revenue-soft: #EFE7F2;
  --ff-expense: #D9603B;
  --ff-expense-soft: #FBEAE3;
  --ff-loan: #42224A;
  --ff-loan-soft: #EDE4F0;
  --ff-advance: #C2703F;
  --ff-advance-soft: #F8ECE2;
  --ff-warn: #B45309;
  --ff-warn-soft: #FCF1E3;

  /* المرجاني (CTA) — جديد v3 */
  --ff-coral: #EF8767;
  --ff-coral-strong: #D9603B;
  --ff-coral-soft: #FDEFE8;
  --ff-coral-grad: linear-gradient(135deg, #EF8767, #D9603B);

  /* التدرج الرئيسي الداكن */
  --ff-hero-grad: linear-gradient(150deg, #42224A 0%, #2A1230 55%, #120216 100%);

  /* الأبعاد والظلال والإيقاع */
  --ff-radius-card: 24px;
  --ff-radius: 14px;
  --ff-radius-pill: 999px;
  --ff-shadow-card: 0 10px 30px rgba(18, 2, 22, 0.07);
  --ff-shadow-lift: 0 22px 50px rgba(18, 2, 22, 0.16);
  --ff-transition: 0.18s ease;

  /* الخط الموحد */
  --ff-font: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family: var(--ff-font);

  /* أسماء توافقية (v1) — تبقى لأي أنماط قديمة تشير إليها */
  --ff-ink: var(--ff-ink-900);
  --ff-muted: var(--ff-ink-600);
  --ff-primary-600: var(--ff-primary);
  --ff-success: var(--ff-revenue);
  --ff-success-soft: var(--ff-revenue-soft);
  --ff-danger: var(--ff-expense);
  --ff-danger-soft: var(--ff-expense-soft);
  --ff-warning: var(--ff-warn);
  --ff-warning-soft: var(--ff-warn-soft);
  --ff-teal: var(--ff-revenue);
  --ff-teal-soft: var(--ff-revenue-soft);
  --ff-violet: var(--ff-loan);
  --ff-violet-soft: var(--ff-loan-soft);
  --ff-radius-sm: var(--ff-radius);
  --ff-shadow: var(--ff-shadow-card);
  --ff-shadow-lg: var(--ff-shadow-lift);
}

/* ------------------------------------------------------------
   2) الأساس والخط — Tajawal دائماً (عربي وإنجليزي)
   ------------------------------------------------------------ */
html { font-family: var(--ff-font); }

body,
.font-sans {
  font-family: var(--ff-font) !important;
}

body {
  background-color: var(--ff-bg) !important;
  color: var(--ff-ink-600);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn, .form-control, .form-select, .dropdown-menu, .modal, .nav, .badge, .alert, .table {
  font-family: var(--ff-font);
}

.min-h-screen.bg-gray-100 { background-color: var(--ff-bg) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--ff-ink-900); }

/* عنوان عرض رئيسي */
.ff-display {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ff-ink-900);
}

/* تسمية caption موحّدة */
.ff-caption {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ff-ink-400);
}

/* أرقام مالية */
.ff-num {
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(66, 34, 74, 0.18); }

/* ------------------------------------------------------------
   3) متغيّرات الـaccent المشتركة (لعقد ff-*)
   ------------------------------------------------------------ */
.ff-stat--primary, .ff-chip--primary, .ff-progress--primary {
  --ff-accent: var(--ff-primary);
  --ff-accent-soft: var(--ff-primary-soft);
}
.ff-stat--revenue, .ff-chip--revenue, .ff-progress--revenue {
  --ff-accent: var(--ff-revenue);
  --ff-accent-soft: var(--ff-revenue-soft);
}
.ff-stat--expense, .ff-chip--expense, .ff-progress--expense {
  --ff-accent: var(--ff-expense);
  --ff-accent-soft: var(--ff-expense-soft);
}
.ff-stat--loan, .ff-chip--loan, .ff-progress--loan {
  --ff-accent: var(--ff-loan);
  --ff-accent-soft: var(--ff-loan-soft);
}
.ff-stat--advance, .ff-chip--advance, .ff-progress--advance {
  --ff-accent: var(--ff-advance);
  --ff-accent-soft: var(--ff-advance-soft);
}
.ff-stat--net, .ff-chip--net, .ff-progress--net {
  --ff-accent: var(--ff-revenue);
  --ff-accent-soft: var(--ff-revenue-soft);
}
.ff-chip--warn {
  --ff-accent: var(--ff-warn);
  --ff-accent-soft: var(--ff-warn-soft);
}
/* جديد v3: accent مرجاني */
.ff-stat--coral, .ff-chip--coral, .ff-progress--coral {
  --ff-accent: var(--ff-coral-strong);
  --ff-accent-soft: var(--ff-coral-soft);
}

/* ------------------------------------------------------------
   4) .ff-hero — رأس صفحة بتدرج plum داكن
   ------------------------------------------------------------ */
.ff-hero {
  background: var(--ff-hero-grad);
  color: #fff;
  border-radius: 0 0 24px 24px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.ff-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 240px at 85% -20%, rgba(239, 135, 103, 0.16), transparent 70%),
    radial-gradient(420px 220px at 8% 120%, rgba(255, 255, 255, 0.07), transparent 70%);
  pointer-events: none;
}

.ff-hero > * { position: relative; z-index: 1; }

.ff-hero h1, .ff-hero h2, .ff-hero h3, .ff-hero .ff-display { color: #fff; }

.ff-hero .ff-hero-sub { color: rgba(255, 255, 255, 0.8); }

/* بطاقات زجاجية داخل الهيرو */
.ff-hero .ff-stat {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.ff-hero .ff-stat:hover { box-shadow: none; }
.ff-hero .ff-stat .ff-stat-label { color: rgba(255, 255, 255, 0.78); }
.ff-hero .ff-stat .ff-stat-value { color: #fff; }
.ff-hero .ff-stat .ff-stat-hint { color: rgba(255, 255, 255, 0.65); }
.ff-hero .ff-stat .ff-stat-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* زر أبيض فوق التدرج */
.ff-hero .btn-light,
.ff-hero .btn-white {
  background: #fff !important;
  color: var(--ff-primary) !important;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(18, 2, 22, 0.28) !important;
}

/* ------------------------------------------------------------
   5) .ff-outcome-card — بطاقة Outcome الداكنة برسم شهري (عقد v3)
   يستهلكها وكيل المكونات: بنية مقترحة
   .ff-outcome-card > .ff-outcome-label / .ff-outcome-value
   + .ff-mini-bars > (.ff-mini-col > .ff-mini-bar + .ff-mini-bar-label)
   أو .ff-mini-bars > .ff-mini-bar مباشرة + .ff-mini-labels > span
   العمود الحالي: .ff-mini-bar--current أو .is-current أو .active
   ------------------------------------------------------------ */
.ff-outcome-card {
  position: relative;
  overflow: hidden;
  background: var(--ff-hero-grad);
  border: 0;
  border-radius: var(--ff-radius-card);
  padding: 24px;
  color: #fff;
  box-shadow: var(--ff-shadow-card);
}

.ff-outcome-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 200px at 88% -30%, rgba(239, 135, 103, 0.18), transparent 70%),
    radial-gradient(360px 200px at 0% 130%, rgba(255, 255, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.ff-outcome-card > * { position: relative; z-index: 1; }

.ff-outcome-card .ff-outcome-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.ff-outcome-card .ff-outcome-value {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  line-height: 1.2;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ff-outcome-card .ff-outcome-hint { font-size: 12px; color: rgba(255, 255, 255, 0.55); }

/* الرسم الشهري المدمج */
.ff-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ff-mini-bars::-webkit-scrollbar { display: none; }

.ff-mini-bar {
  flex: 1 1 0;
  min-width: 16px;
  min-height: 8%;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px 6px 0 0;
  transition: height 0.35s ease, background-color var(--ff-transition);
}

.ff-mini-bar--current,
.ff-mini-bar.is-current,
.ff-mini-bar.active {
  background: var(--ff-coral);
}

/* عمود بار + تسمية شهر (اختياري) */
.ff-mini-col {
  flex: 1 1 0;
  min-width: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ff-mini-col .ff-mini-bar { width: 100%; flex: 0 0 auto; }

.ff-mini-bar-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin-top: 6px;
  line-height: 1.2;
  white-space: nowrap;
}

/* صف تسميات منفصل (بديل) */
.ff-mini-labels { display: flex; gap: 8px; margin-top: 6px; }
.ff-mini-labels > * {
  flex: 1 1 0;
  min-width: 16px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   6) .ff-stat — بطاقة إحصائية
   ------------------------------------------------------------ */
.ff-stat {
  --ff-accent: var(--ff-primary);
  --ff-accent-soft: var(--ff-primary-soft);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius-card);
  padding: 20px;
  transition: transform var(--ff-transition), box-shadow var(--ff-transition);
}

.ff-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--ff-shadow-card);
}

/* --net: خلفية soft plum متدرجة خفيفة */
.ff-stat--net {
  background: linear-gradient(135deg, #F2EAF4, #FAF6FB);
  border-color: rgba(122, 78, 134, 0.16);
}

.ff-stat .ff-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--ff-accent-soft);
  color: var(--ff-accent);
  font-size: 1.15rem;
}

.ff-stat .ff-stat-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ff-ink-400);
  margin-bottom: 2px;
}

.ff-stat .ff-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--ff-ink-900);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

/* الرقم/الأيقونة بلون الـaccent في الـvariants */
.ff-stat--revenue .ff-stat-value,
.ff-stat--expense .ff-stat-value,
.ff-stat--loan .ff-stat-value,
.ff-stat--advance .ff-stat-value,
.ff-stat--primary .ff-stat-value,
.ff-stat--coral .ff-stat-value,
.ff-stat--net .ff-stat-value {
  color: var(--ff-accent);
}

.ff-stat .ff-stat-hint {
  font-size: 12px;
  color: var(--ff-ink-400);
}

/* ------------------------------------------------------------
   7) .ff-chip — pill صغيرة
   ------------------------------------------------------------ */
.ff-chip {
  --ff-accent: var(--ff-primary);
  --ff-accent-soft: var(--ff-primary-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-accent-soft);
  color: var(--ff-accent);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ff-chip i { font-size: 0.85em; }

/* ------------------------------------------------------------
   8) .ff-card — بطاقة عامة (زوايا 24)
   ------------------------------------------------------------ */
.ff-card {
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius-card);
  box-shadow: var(--ff-shadow-card);
}

.ff-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ff-ink-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ff-card-title i { color: var(--ff-primary); }

/* ------------------------------------------------------------
   9) .ff-empty — حالة فارغة
   ------------------------------------------------------------ */
.ff-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--ff-ink-400);
}

.ff-empty i {
  display: block;
  font-size: 44px;
  color: var(--ff-ink-300);
  margin-bottom: 12px;
  line-height: 1;
}

/* ------------------------------------------------------------
   10) .ff-progress — شريط تقدّم
   ------------------------------------------------------------ */
.ff-progress {
  --ff-accent: var(--ff-primary);
  height: 8px;
  border-radius: var(--ff-radius-pill);
  background: #EFE9F1;
  overflow: hidden;
}

.ff-progress .progress-bar,
.ff-progress > div,
.ff-progress > span {
  display: block;
  height: 100%;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-accent);
  transition: width 0.4s ease;
}

/* توافق مع .progress من Bootstrap عند دمجها */
.progress.ff-progress { height: 8px; }

/* ------------------------------------------------------------
   11) .ff-table — جدول هادئ
   ------------------------------------------------------------ */
.ff-table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(241, 233, 243, 0.45);
  border-color: var(--ff-line) !important;
  margin-bottom: 0;
}

.ff-table thead th {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ff-ink-400);
  background: transparent;
  border-bottom: 1px solid var(--ff-line) !important;
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
}

.ff-table td, .ff-table th {
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
  border-color: var(--ff-line) !important;
  vertical-align: middle;
}

.ff-table tbody tr { transition: background-color var(--ff-transition); }
.ff-table tbody tr:hover { background-color: rgba(241, 233, 243, 0.45); }

.ff-table tfoot tr.table-active { --bs-table-bg-state: var(--ff-primary-soft); }

/* ------------------------------------------------------------
   12) .ff-btn-icon — زر أيقونة دائري (hooks تحرير/حذف — لا تغيّر)
   ------------------------------------------------------------ */
.ff-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ff-ink-600);
  line-height: 1;
  transition: background-color var(--ff-transition), color var(--ff-transition);
}

.ff-btn-icon:hover,
.ff-btn-icon:focus-visible {
  background: var(--ff-accent-soft, var(--ff-primary-soft));
  color: var(--ff-accent, var(--ff-primary));
}

.ff-btn-icon--danger:hover,
.ff-btn-icon--danger:focus-visible {
  background: var(--ff-coral-soft);
  color: var(--ff-coral-strong);
}

/* ------------------------------------------------------------
   13) شريط التنقل
   ------------------------------------------------------------ */
nav.bg-white, nav.border-b, .ff-nav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--ff-line) !important;
  border-bottom: none !important;
}

.ff-nav .ff-nav-link {
  color: var(--ff-ink-600) !important;
  border-bottom-color: transparent;
  transition: color var(--ff-transition), border-color var(--ff-transition);
}

.ff-nav .ff-nav-link:hover {
  color: var(--ff-primary) !important;
  border-bottom-color: rgba(66, 34, 74, 0.35) !important;
}

.ff-nav .ff-nav-link.ff-nav-link--active,
.ff-nav .border-indigo-400 {
  color: var(--ff-primary) !important;
  border-bottom-color: var(--ff-primary) !important;
  font-weight: 700;
}

/* تحويل بقايا indigo (مكوّنات breeze) إلى هوية plum عبر CSS فقط */
.ff-nav [class*="border-indigo"] { border-color: var(--ff-primary) !important; }
.ff-nav [class*="text-indigo"] { color: var(--ff-primary) !important; }
.ff-nav [class*="bg-indigo"] { background-color: var(--ff-primary-soft) !important; }

.ff-nav .ff-nav-user {
  color: var(--ff-ink-600) !important;
  border-radius: var(--ff-radius) !important;
  transition: background-color var(--ff-transition), color var(--ff-transition);
}

.ff-nav .ff-nav-user:hover {
  background: var(--ff-primary-soft) !important;
  color: var(--ff-primary) !important;
}

.ff-nav .ff-nav-burger:hover,
.ff-nav .ff-nav-burger:focus-visible {
  background: var(--ff-primary-soft) !important;
  color: var(--ff-primary) !important;
}

.ff-nav .ff-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ff-ink-900);
  text-decoration: none;
}

.ff-nav .ff-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ff-ink-900);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ff-nav .ff-brand-name { display: none; }
}

/* عناصر القوائم داخل شريط التنقل (روابط breeze) */
.ff-nav .ff-menu-item:hover { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }
.ff-nav .ff-menu-item--current { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }

/* ------------------------------------------------------------
   14) تحسينات Bootstrap العامة
   ------------------------------------------------------------ */

/* البطاقات القديمة (توافق) */
.card {
  border: 1px solid var(--ff-line) !important;
  border-radius: var(--ff-radius-card) !important;
  box-shadow: var(--ff-shadow-card) !important;
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}

.card .card-body { border-radius: inherit; }

.card .card-subtitle {
  color: var(--ff-ink-400) !important;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px !important;
}

.card p.h3 {
  font-weight: 800;
  letter-spacing: -0.3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* تنعيم بطاقات صافي القيمة القديمة ذات الخلفيات inline */
.card[style*="d1e7dd"] { background: linear-gradient(135deg, #F2EAF4, #FAF6FB) !important; }
.card[style*="f8d7da"] { background: linear-gradient(135deg, #FBEAE3, #FDF4EF) !important; }

/* الألوان النصية الدلالية */
.text-danger { color: var(--ff-expense) !important; }
.text-success { color: var(--ff-revenue) !important; }
.text-primary { color: var(--ff-primary) !important; }
.text-warning { color: var(--ff-warn) !important; }

/* الأزرار */
.btn {
  border-radius: var(--ff-radius) !important;
  font-weight: 600;
  transition: transform var(--ff-transition), box-shadow var(--ff-transition),
    background-color var(--ff-transition), color var(--ff-transition);
  border-width: 0 !important;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* CTA المرجاني — btn-primary العام (بصمة القالب رقم 4) */
.btn-primary {
  background: var(--ff-coral-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(217, 96, 59, 0.28) !important;
}
.btn-primary:hover {
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(217, 96, 59, 0.34) !important;
}

/* الأزرار البنفسجية الداكنة للثانوي المهم (جديد v3) */
.ff-btn-plum, .btn-plum {
  background: var(--ff-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ff-radius) !important;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(66, 34, 74, 0.25) !important;
}
.ff-btn-plum:hover, .btn-plum:hover {
  background: var(--ff-primary-hi) !important;
  color: #fff !important;
}

.btn-success {
  background-color: var(--ff-revenue) !important;
  box-shadow: 0 6px 16px rgba(122, 78, 134, 0.26) !important;
}
.btn-danger {
  background-color: var(--ff-expense) !important;
  box-shadow: 0 6px 16px rgba(217, 96, 59, 0.24) !important;
}

.btn-light {
  background-color: #F3EEF4 !important;
  color: var(--ff-ink-900) !important;
}
.btn-light:hover { background-color: #EAE2EC !important; }

.btn-outline-primary {
  box-shadow: none !important;
  border: 1px solid rgba(66, 34, 74, 0.35) !important;
  color: var(--ff-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }

.btn-outline-danger {
  box-shadow: none !important;
  border: 1px solid rgba(217, 96, 59, 0.35) !important;
  color: var(--ff-expense) !important;
  background: transparent !important;
}
.btn-outline-danger:hover { background: var(--ff-expense-soft) !important; color: var(--ff-expense) !important; }

.btn-outline-success {
  box-shadow: none !important;
  border: 1px solid rgba(122, 78, 134, 0.35) !important;
  color: var(--ff-revenue) !important;
  background: transparent !important;
}
.btn-outline-success:hover { background: var(--ff-revenue-soft) !important; color: var(--ff-revenue) !important; }

.btn-outline-secondary {
  box-shadow: none !important;
  border: 1px solid var(--ff-line) !important;
  color: var(--ff-ink-600) !important;
  background: var(--ff-surface) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary.active {
  background: var(--ff-primary-soft) !important;
  color: var(--ff-primary) !important;
  border-color: rgba(66, 34, 74, 0.3) !important;
}

/* أزرار soft دلالية (لأزرار الإجراءات إيراد/مصروف/مذكرة) */
.ff-btn-soft {
  --ff-accent: var(--ff-primary);
  --ff-accent-soft: var(--ff-primary-soft);
  background: var(--ff-accent-soft) !important;
  color: var(--ff-accent) !important;
  border: 0 !important;
  border-radius: var(--ff-radius) !important;
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter var(--ff-transition), transform var(--ff-transition);
}
.ff-btn-soft:hover { filter: brightness(0.97); transform: translateY(-1px); }
.ff-btn-soft--revenue { --ff-accent: var(--ff-revenue); --ff-accent-soft: var(--ff-revenue-soft); }
.ff-btn-soft--expense { --ff-accent: var(--ff-coral-strong); --ff-accent-soft: var(--ff-coral-soft); }
.ff-btn-soft--loan { --ff-accent: var(--ff-loan); --ff-accent-soft: var(--ff-loan-soft); }
.ff-btn-soft--advance { --ff-accent: var(--ff-advance); --ff-accent-soft: var(--ff-advance-soft); }
.ff-btn-soft--primary { --ff-accent: var(--ff-primary); --ff-accent-soft: var(--ff-primary-soft); }
.ff-btn-soft--coral { --ff-accent: var(--ff-coral-strong); --ff-accent-soft: var(--ff-coral-soft); }

/* حبوب التصنيف (بصمة القالب رقم 2 — نمط Food & Drink):
   النشطة plum داكنة نص أبيض؛ غير النشطة سطح أبيض بحد line */
.segmented-control, .nav-pills, #projectTabs {
  background: transparent;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 8px;
}

.nav-pills .nav-link,
#projectTabs .nav-link {
  border-radius: var(--ff-radius-pill) !important;
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  color: var(--ff-ink-600) !important;
  font-weight: 600;
  padding: 8px 18px;
  white-space: nowrap;
  transition: all var(--ff-transition);
}

.nav-pills .nav-link:hover,
#projectTabs .nav-link:hover {
  color: var(--ff-primary) !important;
  border-color: rgba(66, 34, 74, 0.25);
}

.nav-pills .nav-link.active,
#projectTabs .nav-link.active {
  background: var(--ff-primary) !important;
  color: #fff !important;
  border-color: var(--ff-primary) !important;
  box-shadow: 0 8px 18px rgba(66, 34, 74, 0.25);
}

/* الجداول العامة */
.table {
  --bs-table-hover-bg: rgba(241, 233, 243, 0.45);
  border-color: var(--ff-line) !important;
}
.table thead th {
  color: var(--ff-ink-400);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--ff-line) !important;
  background: transparent;
}
.table td { border-color: var(--ff-line) !important; vertical-align: middle; }
.table tfoot tr.table-active { --bs-table-bg-state: var(--ff-primary-soft); }

.table-responsive { -webkit-overflow-scrolling: touch; }

/* المودالات (بطاقات كبرى — زوايا 24) */
.modal-content {
  border: none !important;
  border-radius: 24px !important;
  box-shadow: var(--ff-shadow-lift) !important;
  position: relative;
}

/* شريط علوي رفيع بتدرج الهوية */
.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--ff-coral-grad);
  border-radius: 24px 24px 0 0;
  pointer-events: none;
}

.modal-header {
  border-bottom: 1px solid var(--ff-line) !important;
  padding-top: 1.15rem;
}
.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ff-ink-900);
}
.modal-footer { border-top: 1px solid var(--ff-line) !important; }
.modal-backdrop.show { opacity: 0.4 !important; }

/* الحقول */
.form-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ff-ink-600);
}

.form-control, .form-select {
  border-radius: var(--ff-radius) !important;
  border: 1px solid var(--ff-line) !important;
  background-color: #FBFAFC;
  color: var(--ff-ink-900);
  transition: border-color var(--ff-transition), box-shadow var(--ff-transition),
    background-color var(--ff-transition);
}
.form-control:focus, .form-select:focus {
  border-color: rgba(90, 47, 102, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(66, 34, 74, 0.12) !important;
  background-color: var(--ff-surface);
}
.form-control::placeholder { color: var(--ff-ink-400); }

.form-check-input:checked {
  background-color: var(--ff-primary) !important;
  border-color: var(--ff-primary) !important;
}
.form-check-input:focus {
  border-color: rgba(90, 47, 102, 0.5);
  box-shadow: 0 0 0 4px rgba(66, 34, 74, 0.12);
}

/* select2 */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--ff-radius) !important;
  border: 1px solid var(--ff-line) !important;
  background-color: #FBFAFC !important;
  min-height: 42px;
}
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  border-color: rgba(90, 47, 102, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(66, 34, 74, 0.12) !important;
}
.select2-container--open .select2-dropdown {
  border-radius: var(--ff-radius) !important;
  border: 1px solid var(--ff-line) !important;
  box-shadow: var(--ff-shadow-lift) !important;
  overflow: hidden;
}
.select2-results__option--highlighted {
  background-color: var(--ff-primary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--ff-primary-soft) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ff-primary) !important;
  padding: 2px 8px !important;
}

/* الشارات */
.badge {
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: var(--ff-radius-pill) !important;
  padding: 0.42em 0.85em;
}
.badge.bg-light { border: 1px solid var(--ff-line); color: var(--ff-ink-600) !important; }
.badge.bg-primary { background-color: var(--ff-primary) !important; }
.badge.bg-success { background-color: var(--ff-revenue) !important; }
.badge.bg-danger { background-color: var(--ff-expense) !important; }

/* التنبيهات */
.alert {
  border: none !important;
  border-radius: var(--ff-radius) !important;
}
.alert-success { background: var(--ff-revenue-soft) !important; color: #5E3B69 !important; }
.alert-danger { background: var(--ff-expense-soft) !important; color: #A8481F !important; }
.alert-warning { background: var(--ff-warn-soft) !important; color: var(--ff-warn) !important; }
.alert-info { background: var(--ff-primary-soft) !important; color: var(--ff-primary) !important; }

/* القوائم المنسدلة */
.dropdown-menu {
  border: 1px solid var(--ff-line) !important;
  border-radius: var(--ff-radius) !important;
  box-shadow: var(--ff-shadow-lift) !important;
  overflow: hidden;
}
.dropdown-item { color: var(--ff-ink-600); transition: background-color var(--ff-transition); }
.dropdown-item:hover { background-color: var(--ff-primary-soft); color: var(--ff-primary); }
.dropdown-item.active {
  background-color: var(--ff-primary) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   15) توافق مكوّنات قديمة (dashboard v1)
   ------------------------------------------------------------ */
.btn-modern {
  border-radius: var(--ff-radius) !important;
  font-weight: 700;
}
.btn-modern-primary {
  background: var(--ff-coral-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(217, 96, 59, 0.3) !important;
}

/* بطاقات المذكرات (class يعتمد عليه JS — تنسيق فقط) */
.memo-card {
  border: 1px solid var(--ff-line) !important;
  border-radius: var(--ff-radius-card) !important;
  background: var(--ff-surface);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.memo-card:hover {
  box-shadow: var(--ff-shadow-card);
  transform: translateY(-1px);
}
.memo-card .bg-light {
  background-color: #FAF7FB !important;
  border-radius: var(--ff-radius) !important;
}

.shadow-sm { box-shadow: var(--ff-shadow-card) !important; }

/* ------------------------------------------------------------
   16) .ff-auth — صفحات الدخول
   ------------------------------------------------------------ */
.ff-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: var(--ff-hero-grad);
  position: relative;
  overflow: hidden;
}

/* دوائر زخرفية */
.ff-auth-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(239, 135, 103, 0.14);
  filter: blur(2px);
  pointer-events: none;
}
.ff-auth-blob:nth-of-type(1) {
  width: 380px; height: 380px;
  top: -140px; inset-inline-start: -120px;
  background: rgba(255, 255, 255, 0.08);
}
.ff-auth-blob:nth-of-type(2) {
  width: 260px; height: 260px;
  bottom: -100px; inset-inline-end: -80px;
  background: rgba(239, 135, 103, 0.12);
}
.ff-auth-blob:nth-of-type(3) {
  width: 140px; height: 140px;
  top: 18%; inset-inline-end: 12%;
  background: rgba(255, 255, 255, 0.06);
}

/* البطاقة */
.ff-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--ff-surface);
  border-radius: 24px;
  padding: 2.75rem 2.25rem;
  box-shadow: var(--ff-shadow-lift);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* الشعار أعلى البطاقة */
.ff-auth .ff-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2rem;
  text-decoration: none;
  color: var(--ff-ink-900);
}
.ff-auth .ff-auth-brand i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ff-primary-soft);
  color: var(--ff-primary);
  font-size: 1.4rem;
}
.ff-auth .ff-auth-brand span {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* حقول كبيرة 48px داخل بطاقة الدخول */
.ff-auth .form-control {
  min-height: 48px;
  border-radius: var(--ff-radius) !important;
  border: 1px solid rgba(18, 2, 22, 0.12) !important;
  background: #FBFAFC;
  font-size: 1rem;
}
.ff-auth .form-control:focus {
  border-color: rgba(90, 47, 102, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(66, 34, 74, 0.12) !important;
  background: var(--ff-surface);
}

.ff-auth .form-label {
  font-weight: 700;
  color: var(--ff-ink-600);
  font-size: 0.875rem;
}

/* عناوين البطاقة (تدعم views auth الحالية) */
.ff-auth .auth-title {
  text-align: center;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ff-ink-900);
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
}
.ff-auth .auth-subtitle {
  text-align: center;
  color: var(--ff-ink-400);
  margin-bottom: 2rem;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* زر الدخول الرئيسي بعرض كامل — CTA مرجاني */
.ff-auth .btn-primary-custom,
.ff-auth .btn-primary {
  background: var(--ff-coral-grad) !important;
  color: #fff !important;
  border: none;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--ff-radius) !important;
  font-weight: 700;
  font-size: 1rem;
  transition: transform var(--ff-transition), box-shadow var(--ff-transition);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(217, 96, 59, 0.32);
}
.ff-auth .btn-primary-custom:hover,
.ff-auth .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(217, 96, 59, 0.4);
}

/* الزر الثانوي (إنشاء حساب من صفحة الدخول) — plum */
.ff-auth .btn-outline-custom {
  border: 1px solid rgba(66, 34, 74, 0.35);
  color: var(--ff-primary);
  min-height: 46px;
  padding: 10px 24px;
  border-radius: var(--ff-radius);
  font-weight: 700;
  font-size: 1rem;
  background: transparent;
  transition: background-color var(--ff-transition), transform var(--ff-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.ff-auth .btn-outline-custom:hover {
  background: var(--ff-primary-soft);
  color: var(--ff-primary);
  transform: translateY(-1px);
}

/* روابط ثانوية */
.ff-auth .auth-link {
  color: var(--ff-ink-400);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: color var(--ff-transition);
}
.ff-auth .auth-link:hover { color: var(--ff-primary); }

.ff-auth .form-check-label {
  font-size: 0.92rem;
  color: var(--ff-ink-600);
  font-weight: 500;
}

.ff-auth .divider {
  position: relative;
  text-align: center;
  margin: 1.5rem 0;
}
.ff-auth .divider::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: 0;
  height: 1px;
  background: var(--ff-line);
}
.ff-auth .divider span {
  background: var(--ff-surface);
  padding: 0 1rem;
  color: var(--ff-ink-400);
  font-size: 0.875rem;
  position: relative;
}

.ff-auth .invalid-feedback {
  font-size: 0.875rem;
  color: var(--ff-expense);
  margin-top: 0.375rem;
}

.ff-auth .alert { margin-bottom: 1.5rem; font-size: 0.95rem; }

/* زر العودة للرئيسية فوق التدرج */
.ff-auth .back-to-home,
.back-to-home {
  position: absolute;
  top: 1.5rem;
  inset-inline-start: 1.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ff-radius-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--ff-transition);
  z-index: 10;
  font-size: 0.9rem;
}
.ff-auth .back-to-home:hover,
.back-to-home:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

[dir="rtl"] .back-to-home i { transform: scaleX(-1); }

/* ------------------------------------------------------------
   17) الاستجابة العامة (§3) — يكملها أصحاب الصفحات محلياً
   ------------------------------------------------------------ */

/* أداة عامة: عرض كامل على الجوال حيث يليق */
@media (max-width: 576px) {
  .ff-sm-full { width: 100% !important; }
}

/* ≤992px: شبكة الإحصائيات عمودان + الحبوب بتمرير أفقي بلا التفاف */
@media (max-width: 992px) {
  .row > [class*="col"]:has(> .ff-stat) { width: 50%; }

  .nav-pills, #projectTabs, .segmented-control {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .nav-pills::-webkit-scrollbar,
  #projectTabs::-webkit-scrollbar,
  .segmented-control::-webkit-scrollbar { display: none; }

  .nav-pills .nav-item, #projectTabs .nav-item { flex: 0 0 auto; }
}

/* ≤576px: كثافة أعلى ومودالات ملء الشاشة تقريباً */
@media (max-width: 576px) {
  .ff-stat { padding: 16px; }
  .ff-stat .ff-stat-value { font-size: 19px; }

  .ff-hero { padding: 20px; }
  .ff-hero h1, .ff-hero .ff-display { font-size: 22px; }

  .ff-outcome-card { padding: 20px; }
  .ff-outcome-card .ff-outcome-value { font-size: 24px; }
  .ff-mini-bars { gap: 6px; }
  .ff-mini-bar { min-width: 14px; }

  .modal-dialog {
    margin: 10px;
    max-width: none;
    width: auto;
  }
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .modal-footer > * { margin: 0; }
  .modal-footer .btn { width: 100%; }

  .ff-auth-card { padding: 2rem 1.5rem; }
  .ff-auth { padding-top: 4.5rem; }
}

/* ===== V4 SHELL ===== */
/* ------------------------------------------------------------
   قشرة V4: شريط جانبي برقوقي ثابت + شريط علوي جوال + offcanvas
   RTL-first: خصائص منطقية حصراً (استثناء box-shadow عبر [dir])
   ------------------------------------------------------------ */

.ff-shell { min-height: 100vh; }

/* السطح الداكن المشترك (الشريط الجانبي + offcanvas) + زخرفة "واو" */
.ff-side-surface {
  background: var(--ff-hero-grad);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* offcanvas يجب أن يبقى fixed (قاعدة position:relative أعلاه تطغى على بوتستراب لأن theme.css يُحمّل بعده) */
.offcanvas.ff-side-surface { position: fixed; }

.ff-side-surface::before,
.ff-side-surface::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* توهج مرجاني أعلى النهاية */
.ff-side-surface::before {
  width: 340px;
  height: 340px;
  top: -130px;
  inset-inline-end: -150px;
  background: radial-gradient(circle at 35% 35%, rgba(239, 135, 103, 0.12), transparent 70%);
}

/* توهج بنفسجي أسفل البداية */
.ff-side-surface::after {
  width: 320px;
  height: 320px;
  bottom: -130px;
  inset-inline-start: -140px;
  background: radial-gradient(circle at 65% 65%, rgba(143, 101, 154, 0.12), transparent 70%);
}

.ff-side-surface > * { position: relative; z-index: 1; }

/* --- الشريط الجانبي الثابت (يظهر عبر d-lg-flex) --- */
.ff-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 264px;
  z-index: 1030;
  flex-direction: column;
  padding: 22px 18px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  box-shadow: 6px 0 24px rgba(18, 2, 22, 0.10);
}
.ff-sidebar::-webkit-scrollbar { display: none; }
[dir="rtl"] .ff-sidebar { box-shadow: -6px 0 24px rgba(18, 2, 22, 0.10); }

/* المحتوى بجانب الشريط */
.ff-main { min-height: 100vh; }

@media (min-width: 992px) {
  .ff-main { margin-inline-start: 264px; }
}

/* --- الشعار --- */
.ff-side-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  margin-bottom: 22px;
}
.ff-side-brand:hover, .ff-side-brand:focus { color: #fff; }
.ff-side-brand--flush { margin-bottom: 0; }

.ff-brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--ff-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(18, 2, 22, 0.25);
}

.ff-side-brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  white-space: nowrap;
}

/* --- تسمية القائمة --- */
.ff-side-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 4px 6px 10px;
}

/* --- روابط التنقل --- */
.ff-side-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ff-side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  transition: background-color var(--ff-transition), color var(--ff-transition);
}

.ff-side-link i { font-size: 1.05rem; line-height: 1; }

.ff-side-link:hover,
.ff-side-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.ff-side-link.active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

/* مؤشر كورال على الحافة البدائية للرابط النشط */
.ff-side-link.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-coral);
}

/* --- فاصل مرن --- */
.ff-side-spacer { flex: 1 1 auto; min-height: 16px; }

/* --- مبدّل اللغة الكبسولي --- */
.ff-lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--ff-radius-pill);
  padding: 4px;
  margin-bottom: 14px;
}

.ff-lang-btn {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-font);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  padding: 7px 0;
  border-radius: var(--ff-radius-pill);
  cursor: pointer;
  transition: background-color var(--ff-transition), color var(--ff-transition);
}

.ff-lang-btn:hover, .ff-lang-btn:focus-visible { color: #fff; }

.ff-lang-btn.active {
  background: var(--ff-coral);
  color: #fff;
  box-shadow: 0 6px 14px rgba(239, 135, 103, 0.35);
}

/* --- بطاقة المستخدم --- */
.ff-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px;
}

.ff-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ff-coral-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex: 0 0 auto;
  box-shadow: 0 6px 14px rgba(217, 96, 59, 0.35);
}

.ff-user-meta { min-width: 0; flex: 1 1 auto; }

.ff-user-name {
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-user-email {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-user-logout-form { flex: 0 0 auto; margin: 0; }

.ff-user-logout {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background-color var(--ff-transition), color var(--ff-transition);
}

.ff-user-logout:hover,
.ff-user-logout:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

[dir="rtl"] .ff-user-logout i { transform: scaleX(-1); }

/* --- الشريط العلوي للجوال --- */
.ff-mobile-topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 64px;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 12px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--ff-line), 0 8px 24px rgba(18, 2, 22, 0.05);
}

.ff-burger {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ff-ink-900);
  font-size: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ff-transition), color var(--ff-transition);
}

.ff-burger:hover, .ff-burger:focus-visible {
  background: var(--ff-primary-soft);
  color: var(--ff-primary);
}

.ff-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ff-ink-900);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.3px;
}
.ff-topbar-brand:hover { color: var(--ff-ink-900); }

/* شارة الشعار فوق الخلفية البيضاء: برقوقية بدل البيضاء */
.ff-topbar-brand .ff-brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ff-primary);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 6px 14px rgba(66, 34, 74, 0.28);
}

/* إزاحة المحتوى تحت الشريط العلوي الثابت على الجوال */
@media (max-width: 991.98px) {
  .ff-main { padding-top: 76px; }
}

/* --- Offcanvas الجوال --- */
.ff-offcanvas {
  width: 288px;
  border: 0;
  max-width: 86vw;
}

.ff-offcanvas .offcanvas-header { padding: 20px 18px 8px; }

.ff-offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 12px 18px 18px;
}

/* --- أنيميشن دخول المحتوى --- */
/* --- القوائم المنسدلة فوق كل شيء ---
   أغلفة الأزرار في الكروت تحمل z-index:2 فتطغى الكروت اللاحقة على قائمة الكرت السابق،
   وتحويم الكرت (transform) يحبس القائمة داخل سياق تراصه — نرفع القائمة وغلافها والكرت الحاضن معاً */
.dropdown-menu.show { z-index: 1055; }
.dropdown:has(> .dropdown-menu.show) { z-index: 1056 !important; }
:is(.card, .ff-card, .project-card):has(.dropdown-menu.show) { position: relative; z-index: 1054; }

/* لا keyframe نهائي ولا fill-mode:both — كروم يبقي matrix متطابقة بعدها
   فتتحول الحاوية إلى containing block ويسقط أي modal (position:fixed) لأسفل الصفحة */
@keyframes ffEnter {
  from { opacity: 0; transform: translateY(12px); }
}

.ff-main > * { animation: ffEnter 0.5s ease-out backwards; }
.ff-main > *:nth-child(2) { animation-delay: 0.08s; }
.ff-main > *:nth-child(3) { animation-delay: 0.16s; }
.ff-main > *:nth-child(n + 4) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .ff-main > * { animation: none; }
  .ff-side-link, .ff-lang-btn, .ff-burger, .ff-user-logout { transition: none; }
}