/* =================================================================
   Falcon 7AI — Button States & Accessibility Override
   يجب تحميله بعد style.css مباشرةً.
   الهدف: أزرار صلبة وواضحة (opacity:1)، تباين عالٍ (WCAG)،
   انتقال سلس، وحالات صريحة default / hover / active / disabled / focus.
   ================================================================= */

:root {
  /* درجات أغمق للـ hover/active (مشتقّة من ألوان النظام، ثابتة لدعم المتصفحات القديمة) */
  --btn-primary-bg:        #2563EB;
  --btn-primary-hover:     #1D4ED8;
  --btn-primary-active:    #1A45BE;

  --btn-success-bg:        #15bb8b;
  --btn-success-hover:     #11a075;
  --btn-success-active:    #0e8c66;

  --btn-warning-bg:        #f9a826;
  --btn-warning-hover:     #e6951a;
  --btn-warning-active:    #cf8412;

  --btn-danger-bg:         #ef4444;
  --btn-danger-hover:      #dc2626;
  --btn-danger-active:     #b91c1c;

  --btn-text-dark:         #15233d;   /* نص داكن للخلفيات الفاتحة */
  --btn-focus-ring:        #2563EB;
}

/* ---------- 1) الأساس المشترك: انتقال سلس + opacity صلبة ---------- */
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-dark-red,
.btn-outline,
.btn-light,
.action-btn,
.back-btn,
.opt-btn {
  opacity: 1;
  transition: background-color .3s ease-in-out,
              color .3s ease-in-out,
              border-color .3s ease-in-out,
              box-shadow .3s ease-in-out,
              transform .12s ease-in-out,
              filter .3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 2) PRIMARY (أزرق صلب) ---------- */
.btn-primary {
  background: var(--btn-primary-bg) !important;
  color: #fff !important;
  border: none;
}
.btn-primary:hover {
  background: var(--btn-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(37, 73, 235, .45);
}
.btn-primary:active {
  background: var(--btn-primary-active) !important;
  transform: scale(.99);
  box-shadow: none;
}

/* ---------- 3) SUCCESS (أخضر صلب) ---------- */
.btn-success {
  background: var(--btn-success-bg) !important;
  color: #fff !important;
  border: none;
}
.btn-success:hover {
  background: var(--btn-success-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(21, 187, 139, .45);
}
.btn-success:active {
  background: var(--btn-success-active) !important;
  transform: scale(.99);
  box-shadow: none;
}

/* ---------- 4) WARNING (كهرماني صلب + نص داكن لرفع التباين) ---------- */
/* نص أبيض على الكهرماني يفشل في WCAG، لذا نستخدم نصًّا داكنًا. */
.btn-warning {
  background: var(--btn-warning-bg) !important;
  color: var(--btn-text-dark) !important;
  border: none;
}
.btn-warning:hover {
  background: var(--btn-warning-hover) !important;
  color: var(--btn-text-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(249, 168, 38, .50);
}
.btn-warning:active {
  background: var(--btn-warning-active) !important;
  transform: scale(.99);
  box-shadow: none;
}

/* ---------- 5) DANGER (أحمر صلب) ----------
   يُعيد ضبط القاعدة الباهتة (الخلفية الوردية) التي كانت تتسرّب من style.css */
.btn-danger {
  background: var(--btn-danger-bg) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 10px);
}
.btn-danger:hover {
  background: var(--btn-danger-hover) !important;
  color: #fff !important;
  border-color: var(--btn-danger-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(239, 68, 68, .50);
}
.btn-danger:active {
  background: var(--btn-danger-active) !important;
  transform: scale(.99);
  box-shadow: none;
}

/* ---------- 6) LIGHT / NEUTRAL (خلفية فاتحة + نص داكن) ---------- */
.btn-light {
  background: #eef2fb !important;
  color: var(--btn-text-dark) !important;
  border: 1px solid var(--border, #e3e7f1);
}
.btn-light:hover {
  background: #e2e8f5 !important;
  color: var(--btn-text-dark) !important;
  border-color: #c3ccde;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(21, 35, 61, .25);
}
.btn-light:active {
  background: #d8e0f0 !important;
  transform: scale(.99);
  box-shadow: none;
}

/* ---------- 7) OUTLINE (شفاف + إطار، يمتلئ عند الـ hover بتباين كامل) ---------- */
.btn-outline {
  background: transparent;
  color: var(--btn-success-bg);
  border: 1.5px solid var(--btn-success-bg);
}
.btn-outline:hover {
  background: var(--btn-success-bg);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(21, 187, 139, .40);
}
.btn-outline:active {
  background: var(--btn-success-active);
  color: #fff !important;
  transform: scale(.99);
  box-shadow: none;
}

/* ---------- 8) أزرار الإجراءات الأيقونية بالجداول ---------- */
.action-btn:active {
  transform: scale(.96);
  box-shadow: none;
  filter: brightness(.95);
}

/* ---------- 9) زر الرجوع الموحّد (مكوّن عام لكل اللوحات) ---------- */
.back-btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--brand-blue, #2563EB) !important;   /* سهم أزرق واضح */
  font-size: 22px; line-height: 1; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, transform .12s ease;
}
.back-btn:hover  { background: rgba(37, 99, 235, .10); box-shadow: none; }  /* دائرة رمادية-زرقاء شفافة */
.back-btn:active { transform: scale(.92); box-shadow: none; }
.back-btn > i    { pointer-events: none; }

/* توحيد مكان زر الرجوع في كل الهيدرات: العنوان يمينًا والسهم أقصى اليسار (زي صفحة السلة) */
.pg-head { justify-content: space-between !important; }
.pg-head > .back-btn { order: 2; }
.pg-head > .page-title { order: 1; }

/* موبايل: قفل تمرير الخلفية أثناء فتح المنيو الجانبي + ضمان مقاس لمس مريح */
body.sidebar-open { overflow: hidden; }
@media (max-width: 768px) {
  .sidebar-nav .nav-link { min-height: 48px; }   /* touch target ≥ 44px */
}

/* ---------- 10) الحالة المعطّلة (هنا فقط نستخدم opacity منخفضة) ---------- */
.btn-primary:disabled, .btn-primary.disabled, .btn-primary[disabled],
.btn-success:disabled, .btn-success.disabled, .btn-success[disabled],
.btn-warning:disabled, .btn-warning.disabled, .btn-warning[disabled],
.btn-danger:disabled,  .btn-danger.disabled,  .btn-danger[disabled],
.btn-dark:disabled,    .btn-dark[disabled],
.btn-outline:disabled, .btn-outline.disabled, .btn-outline[disabled],
.btn-light:disabled,   .btn-light.disabled,   .btn-light[disabled],
.action-btn:disabled,  .action-btn[disabled],
.opt-btn:disabled,     .opt-btn[disabled] {
  opacity: .65;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

/* ---------- 11) إتاحة الوصول: حلقة تركيز للوحة المفاتيح فقط ---------- */
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-danger:focus-visible,
.btn-dark:focus-visible,
.btn-dark-red:focus-visible,
.btn-outline:focus-visible,
.btn-light:focus-visible,
.action-btn:focus-visible,
.back-btn:focus-visible,
.opt-btn:focus-visible {
  outline: 3px solid var(--btn-focus-ring);
  outline-offset: 2px;
}

/* ---------- 12) توافق مع أزرار Bootstrap القياسية (إن استُخدمت) ---------- */
.btn { transition: all .3s ease-in-out; }
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-secondary { opacity: 1; }

.btn-outline-primary:hover   { background: var(--btn-primary-bg); color: #fff; }
.btn-outline-success:hover   { background: var(--btn-success-bg); color: #fff; }
.btn-outline-danger:hover    { background: var(--btn-danger-bg);  color: #fff; }
.btn-outline-warning:hover   { background: var(--btn-warning-bg); color: var(--btn-text-dark); }
.btn-outline-secondary:hover { background: #6c757d;               color: #fff; }

.btn:active { transform: scale(.99); }
.btn:disabled, .btn.disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   PART 1.1 — حشوة داخلية موحّدة لكل البطاقات (المحتوى لا يلامس الحواف)
   ============================================================ */
.card { border-radius: var(--radius-lg, 16px); }
.card > .card-body    { padding: 1.25rem 1.5rem; }
.card > .card-header,
.card > .card-footer  { padding: 1rem 1.5rem; }
/* بطاقة بلا card-body: نضمن لها حشوة مباشرة */
.card:not(:has(> .card-body)) { padding: 1.25rem 1.5rem; }
.card-glass { padding: clamp(18px, 2vw, 24px); }

/* ============================================================
   PART 1.3 — صفحة سلة المشتريات (مطابقة التصميم المرسل)
   ملاحظة: كل ما يلي تنسيق CSS فقط — لا تعديل على ماركب الصفحة.
   ============================================================ */
/* ألوان الهوية (البراند) */
:root {
  --brand-navy:   #0D3076;  /* عنوان */
  --brand-blue:   #2563EB;  /* هيدر الجدول */
  --brand-red:    #E50031;  /* حذف */
  --brand-gray:   #6C757C;  /* رصاصي */
  --brand-orange: #FE9901;  /* برتقالي */
}
.cart2 { max-width: 1120px; margin-inline: auto; }
.cart2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
/* العنوان: تركوازي مطابق للموك أب (بدّل #17A2B8 إلى var(--primary-dark) للرجوع للأزرق) */
.cart2-title {
  font-size: 26px; font-weight: 800; color: #17A2B8;
  margin: 0; padding-inline-end: 14px; border-inline-end: 5px solid #17A2B8;
  line-height: 1.2;
}
/* سهم الرجوع (يسار العنوان) */
.cart2-back {
  color: var(--brand-blue, #2563EB); font-size: 22px; width: 42px; height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  text-decoration: none; transition: background .15s ease;
}
.cart2-back:hover { background: #e8edff; }

.cart2 .data-table td { vertical-align: middle; }
.cart2 .data-table tbody td { padding: 15px 14px; }
/* حاوية الجدول بدون بادينج (الجدول لحواف الكارت) — صفحة السلة فقط */
.cart2 .table-wrap { padding: 0; }
/* تزيبرا: أول صف أبيض واللي بعده رصاصي فاتح */
.cart2 .data-table tbody tr:nth-child(odd)  { background: #ffffff; }
.cart2 .data-table tbody tr:nth-child(even) { background: #f3f4f6; }
.cart2-qty { font-weight: 700; font-size: 15px; }
.cart2-qty-input { width: 68px; text-align: center; padding: 6px; border: 1.5px solid var(--primary, #2f6df6); border-radius: 8px; font-weight: 700; }
/* أزرار الإجراءات: تعديل (برتقالي) يسار / حذف (أحمر) يمين — مطابق للموك أب */
.c2-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-direction: row-reverse; }
.c2-edit, .c2-del {
  width: 36px; height: 36px; border: 0; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  transition: transform .15s ease, filter .15s ease;
}
.c2-edit { background: var(--brand-orange, #FE9901); color: #fff; }
.c2-del  { background: var(--brand-red, #E50031); color: #fff; border-radius: 50%; }
.c2-edit:hover, .c2-del:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* بطاقتا الملخّص — المجموع (يسار) / عدد المنتجات (يمين)، صف واحد متقارب */
.cart2-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; direction: ltr; }
.cart2-card {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm, 0 4px 16px rgba(21,35,61,.06));
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  direction: rtl;
}
.cart2-card .lbl { font-size: 17px; font-weight: 800; color: var(--primary-dark, #1f3a5f); }
.cart2-card .val { font-size: 20px; font-weight: 800; }
.cart2-card .val.total { color: #16a34a; }
/* زر "حذف الكل" + أيقونة سلة المهملات (تُضاف بالـ CSS فقط) */
.cart2-clear {
  background: none; border: 0; color: var(--brand-red, #E50031); font-size: 17px; font-weight: 800; cursor: pointer; padding: 4px 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cart2-clear::before { content: "\f1f8"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .9em; }
.cart2-clear:hover { text-decoration: underline; }

/* صف الأزرار (4 أعمدة) + زر البيع السريع بعرض كامل تحته */
.cart2-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.cart2-bottom  { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.c2-btn {
  border: 0; border-radius: 12px; padding: 16px 18px; font-size: 16px; font-weight: 700; color: #fff;
  cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.c2-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 10px 24px rgba(21,35,61,.16)); filter: brightness(1.02); color:#fff; }
.c2-btn.is-disabled { opacity: .55; pointer-events: none; }
.c2-orange { background: var(--brand-orange, #FE9901); }
.c2-blue   { background: var(--brand-blue, #2563EB); }
.c2-gray   { background: var(--brand-gray, #6C757C); }
.c2-green  { background: #1fae82; }
/* زر البيع السريع بعرض كامل مع لمسة ظل خضراء */
.cart2-bottom .c2-green { font-size: 17px; padding: 17px 18px; box-shadow: 0 6px 16px -6px rgba(31,174,130,.55); }

/* أيقونات الأزرار (تُضاف بالـ CSS فقط عبر ::after — دون أي تعديل في الماركب) */
.c2-btn::after { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .95em; line-height: 1; }
#checkoutBtn::after  { content: "\f00c"; }  /* إتمام الطلب — علامة صح */
#parkedToggle::after { content: "\f07a"; }  /* السلال المتروكة — سلة */
#skipBtn::after      { content: "\f35d"; }  /* تخطي — خروج */
.c2-green::after     { content: "\f0e7"; }  /* البيع السريع — بولت */

/* بعد إلغاء زر «حفظ الطلب»: يكبر زر «إتمام الطلب» ليأخذ مكانه (عمودان) */
#checkoutBtn { grid-column: span 2; font-size: 17px; }

@media (max-width: 768px) {
  .cart2-summary { grid-template-columns: 1fr; gap: 12px; }
  .cart2-actions { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cart2-bottom  { grid-template-columns: 1fr; }
}

/* ============================================================
   عارض السلال المتروكة — بنفس روح الجدول + هوية الألوان
   ============================================================ */
.parked-panel {
  background: #fff; border-radius: var(--radius-md, 10px); overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(21,35,61,.06)); margin-top: 16px;
}
.parked-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--brand-navy, #0D3076); color: #fff; padding: 14px 18px;
}
.parked-title { margin: 0; font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.parked-title i { font-size: 15px; opacity: .9; }
.parked-count { font-size: 13px; font-weight: 700; background: rgba(255,255,255,.18); padding: 3px 12px; border-radius: 999px; }
.parked-count:empty { display: none; }

.parked-table-wrap { padding: 14px 16px; overflow-x: auto; }
.parked-table { width: 100%; border-collapse: collapse; text-align: center; }
.parked-table thead { background: var(--brand-blue, #2563EB); color: #fff; }
.parked-table thead th { padding: 12px 10px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.parked-table thead th:first-child { border-start-start-radius: 8px; }
.parked-table thead th:last-child  { border-start-end-radius: 8px; }
.parked-table tbody td { padding: 15px 10px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid var(--border, #e3e7f1); }
.parked-table tbody tr:last-child td { border-bottom: 0; }
.parked-table .parked-client { font-weight: 800; color: var(--brand-navy, #0D3076); }
.parked-table .parked-badge { font-size: 13px; background: #eef2ff; color: var(--brand-blue, #2563EB); padding: 4px 12px; border-radius: 999px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.parked-table .parked-price { font-weight: 800; color: #16a34a; margin: 0; }
.parked-table .parked-time { font-size: 12.5px; color: var(--brand-gray, #6C757C); display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }

.parked-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 16px; }
.parked-nav { display: flex; align-items: center; gap: 8px; }
.pk-nav-btn {
  border: 1px solid var(--border, #e3e7f1); background: #fff; color: var(--brand-gray, #6C757C);
  font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pk-nav-btn:hover { background: var(--brand-gray, #6C757C); color: #fff; border-color: var(--brand-gray, #6C757C); }
.parked-actions { display: flex; gap: 10px; }
.pk-btn {
  border: 0; border-radius: 9px; padding: 10px 18px; font-weight: 700; font-size: 14px; color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.pk-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.pk-resume { background: var(--brand-blue, #2563EB); box-shadow: 0 5px 14px -6px rgba(37,99,235,.6); }
.pk-delete { background: var(--brand-red, #E50031); box-shadow: 0 5px 14px -6px rgba(229,0,49,.55); }

@media (max-width: 600px) {
  .parked-controls { flex-direction: column; align-items: stretch; }
  .parked-nav, .parked-actions { justify-content: center; }
}

/* ============================================================
   سيرش الهيدر — زر البحث الأزرق هو الأكشن (label قابل للنقر)
   وإزالة أيقونة البحث الرمادية المكرّرة داخل الحقل
   ============================================================ */
.search-box::before { display: none; }               /* الدائرة الزخرفية القديمة (استُبدلت بزر حقيقي) */
.search-box .global-search-icon { display: none; }    /* الأيقونة الرمادية المكرّرة */
.search-box .search-go {
  position: absolute; top: 4px; left: 4px; width: 40px; height: 40px; margin: 0; padding: 0;
  background: var(--brand-navy, #0D3076); color: #fff; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; font-size: 15px;
  transition: filter .15s ease, transform .12s ease;
}
.search-box .search-go:hover  { filter: brightness(1.15); }
.search-box .search-go:active { transform: scale(.93); }
/* الحاوية: مساحة يسار للزر الأزرق فقط، ويمين ضيّق ليمتد الحقل بعرض كامل */
.search-box { padding: 4px 8px 4px 48px; }
.search-box .global-search { max-width: none !important; width: 100% !important; }
/* الحقل: بعرض كامل، بدون بوردر، شفاف (يندمج مع خلفية السيرش البيضاء) — قاطع */
.search-box .global-search-input,
.search-box .global-search-input:focus,
.search-box .global-search-input:hover {
  padding-inline-start: 16px;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* محاذاة نص البحث لليمين في العربي (RTL) */
[dir="rtl"] .search-box .global-search-input { text-align: right; }
[dir="rtl"] .search-box .global-search-input::placeholder { text-align: right; }

/* ============================================================
   صفحة POS — بادينج علوي لبانل ملخّص السلة
   ============================================================ */
.cart-panel { padding-top: 16px; }

/* تحسين التجاوب: أزرار السلة والبيع السريع */
.cart-panel .d-flex.gap-2 {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.cart-panel .d-flex.gap-2 > a {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .3s ease;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-panel .d-flex.gap-2 > a i {
  flex-shrink: 0;
  font-size: 16px;
}

.cart-panel .d-flex.gap-2 > a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* تصحيح أزرار lg على الشاشات الكبيرة */
.cart-panel .btn-lg {
  padding: 16px 26px;
  font-size: 16px;
}

@media (max-width: 992px) {
  .cart-panel .btn-lg {
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .cart-panel .d-flex.gap-2 {
    flex-direction: column;
    gap: 10px;
  }

  .cart-panel .d-flex.gap-2 > a {
    width: 100%;
    font-size: 15px;
    padding: 14px 12px;
    min-height: 44px;
  }

  .cart-panel .btn-lg {
    padding: 14px 12px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .cart-panel .d-flex.gap-2 > a {
    font-size: 14px;
    padding: 12px 10px;
    min-height: 40px;
  }

  .cart-panel .d-flex.gap-2 > a i {
    font-size: 14px;
  }

  .cart-panel .btn-lg {
    padding: 12px 10px;
    font-size: 13px;
  }
}

/* صفحة إتمام الطلب (checkout): التنسيق الآن ذاتي الاحتواء داخل
   resources/views/pos/checkout.blade.php (@push('styles')) بدل هذا الملف،
   لأن ماركب الصفحة تغيّر بالكامل ولم يعد يعتمد على حِيل :has()/order هنا. */

/* ============================================================
   Global confirm modal (تأكيد الحذف) + مودال عام
   ============================================================ */
.fl-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.fl-modal-overlay.show { opacity: 1; }
.fl-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 420px; padding: 26px 24px;
  box-shadow: 0 24px 60px rgba(15,23,42,.28); text-align: center;
  transform: translateY(12px) scale(.98); transition: transform .18s ease;
}
.fl-modal-overlay.show .fl-modal { transform: none; }
.fl-modal-icon {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 14px; display: flex;
  align-items: center; justify-content: center; font-size: 26px; background: #fee2e2; color: #dc2626;
}
.fl-modal.info .fl-modal-icon { background: #dbeafe; color: #2563eb; }
.fl-modal-title { font-size: 19px; font-weight: 800; color: #1f2937; margin: 0 0 6px; }
.fl-modal-text  { font-size: 14px; color: #6b7280; margin: 0 0 20px; line-height: 1.6; }
.fl-modal-actions { display: flex; gap: 10px; }
.fl-modal-actions button { flex: 1; border: 0; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 15px; cursor: pointer; }
.fl-modal-cancel  { background: #eef1f6; color: #334155; }
.fl-modal-cancel:hover { background: #e2e8f0; }
.fl-modal-confirm { background: #ef4444; color: #fff; }
.fl-modal-confirm:hover { filter: brightness(1.05); }
.fl-modal.info .fl-modal-confirm { background: #2563eb; }

/* ============================================================
   صفحة الأدوار — شبكة صلاحيات ودّية (تسميات عربية واضحة)
   ============================================================ */
.perm-help { color: #6b7280; font-size: 14px; margin: -4px 0 18px; }
.perm-group {
  background: #fff; border: 1px solid #e9edf3; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(21,35,61,.04);
}
.perm-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #eef1f6; flex-wrap: wrap;
}
.perm-group-title { display: flex; align-items: center; gap: 12px; }
.perm-group-icon {
  width: 42px; height: 42px; border-radius: 11px; flex: 0 0 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light, #eaf1ff); color: var(--primary, #2f6df6); font-size: 18px;
}
.perm-group-title strong { display: block; font-size: 16px; color: var(--primary-dark, #1f3a5f); }
.perm-group-title small { color: #8a94a6; font-size: 12.5px; }
.perm-selectall {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--primary, #2f6df6); cursor: pointer; margin: 0; user-select: none;
}
.perm-selectall input { accent-color: var(--primary, #2f6df6); width: 16px; height: 16px; }

.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.perm-item {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
  border: 1.5px solid #e6eaf1; border-radius: 11px; padding: 11px 13px; background: #fbfcfe;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.perm-item:hover { border-color: #cbd6ea; background: #fff; }
.perm-item:has(input:checked) {
  border-color: var(--primary, #2f6df6); background: var(--primary-light, #eef4ff);
  box-shadow: 0 0 0 2px rgba(47,109,246,.12) inset;
}
.perm-item input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary, #2f6df6); flex: 0 0 17px; }
.perm-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-item-label { font-weight: 700; font-size: 14px; color: #23324a; }
.perm-item-desc  { font-size: 12px; color: #8a94a6; line-height: 1.45; }

@media (max-width: 600px) { .perm-grid { grid-template-columns: 1fr; } }

/* احترام تفضيل تقليل الحركة */
/* ============================================================
   مسافات داخلية أوسع واحترافية لكل بطاقات اللوحات الثلاث
   (المحتوى لا يلامس حدود الكارت) — يُطبَّق في كل الصفحات
   ============================================================ */
.kpi-grid  { gap: 20px; }
.kpi-card  { padding: 24px 26px; gap: 16px; }
.kpi-icon  { flex-basis: 56px; width: 56px; height: 56px; }

.stat-grid { gap: 20px; }
.stat-card { padding: 24px 20px; }

/* بطاقات الجدول: حشوة داخلية + العنوان والمحتوى بعيدًا عن الحواف */
.table-wrap { padding: 18px 20px; }
.table-wrap > .section-title,
.table-wrap > .page-title { margin: 4px 2px 14px; }
/* تدوير أعلى رأس الجدول ليتناسب مع الحشوة الجديدة */
.table-wrap .data-table thead th:first-child { border-start-start-radius: 10px; }
.table-wrap .data-table thead th:last-child  { border-start-end-radius: 10px; }

/* شبكة معلومات بطاقة «بيانات المنشأة» ونحوها */
.card-glass > .section-title:first-child { margin-top: 2px; }

@media (max-width: 768px) {
  .kpi-card  { padding: 18px 18px; }
  .stat-card { padding: 18px 16px; }
  .table-wrap { padding: 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-dark,
  .btn-dark-red, .btn-outline, .btn-light, .action-btn, .back-btn, .opt-btn, .btn {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    transform: none !important;
  }
}

/* =================================================================
   حقول كلمة المرور: فرض خط لاتيني قياسي حتى يظهر حرف الإخفاء نقطة سوداء
   عادية (•) بدل الأشكال الغريبة الناتجة عن الخط العربي المخصّص. (requires §1)
   ================================================================= */
input[type="password"] {
  font-family: Verdana, Tahoma, Arial, "Segoe UI", "Helvetica Neue", sans-serif !important;
  letter-spacing: 2px;
}
/* بعض المتصفحات تحترم text-security لضمان دائرة الإخفاء القياسية */
input[type="password"] {
  -webkit-text-security: disc;
  text-security: disc;
}
input[type="password"]::placeholder {
  letter-spacing: normal; /* النص النائب يبقى بمسافات طبيعية */
}

/* =================================================================
   معاينة الصور المرفوعة (Logo/Favicon/صور) جنب حقل الرفع
   ================================================================= */
/* المعاينة فوق الحقل بحجم ثابت لا يتغيّر مهما كان مقاس الصورة */
.img-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.img-upload-thumb {
  flex: 0 0 auto; width: 150px; height: 150px; border-radius: 12px;
  border: 1.5px dashed #cdd7ea; background: #f7f9ff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.img-upload-thumb.sm { width: 90px; height: 90px; }
/* الصورة تتقيّد داخل المربع الثابت مع الحفاظ على نسبتها */
.img-upload-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 8px; }
.img-upload-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10.5px; color: #9aa6bf; text-align: center; padding: 6px;
}
.img-upload-empty i { font-size: 22px; opacity: .8; }
.img-upload-control { width: 100%; max-width: 420px; }
.img-upload-control small { display: block; color: #8a93a6; margin-top: 5px; font-size: 11px; }

/* =================================================================
   شعار الشريط الجانبي: أفقي عند التمدد، أيقونة فقط عند الطي
   ================================================================= */
.sidebar-logo-full { display: block; }
.sidebar-logo-icon { display: none; }
.sidebar.collapsed .sidebar-logo-full { display: none; }
.sidebar.collapsed .sidebar-logo-icon { display: block; }
.sidebar.collapsed .sidebar-logo-icon { max-width: 44px; max-height: 44px; }

/* نص "Falcon7AI" بجانب شعار المنشأة المخصَّص — التمدد/الطي والمرور بالماوس
   يتحكّم بها .logo-text الموجودة أصلًا في style.css؛ هنا فقط شكل النص نفسه. */
.sidebar-logo .logo-text {
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  white-space: nowrap;
}

/* شارة حصة "فواتير الشراء" بالشريط الجانبي — تختفي مع نص العنصر عند الطي
   حتى لا تنضغط مع الأيقونة داخل الممر الضيق (80px)، وتعود مع النص عند
   التمدد أو المرور بالماوس (نفس نمط .nav-text تمامًا). */
.sidebar.collapsed .nav-badge { display: none; }

/* فواتير الشراء — تنويعتان إضافيتان لـ .status (الأساس والألوان الأخرى في style.css) */
.status.review { color: var(--warning); }
.status.failed { color: var(--danger); }

/* =================================================================
   تصحيح: الشريط الجانبي لا يمكن التمرير فيه (سحب) عند زيادة عناصره
   ================================================================= */
/* style.css يضبط .sidebar بـ min-height: 100vh مع position: fixed — أي
   محتوى يتجاوز ارتفاع الشاشة يبقى بلا أي وسيلة للوصول إليه (عنصر ثابت
   لا يُنشئ شريط تمرير للصفحة). مع إضافة عناصر جديدة للقائمة الجانبية
   (الموردون، قواعد التسعير...) صار هذا يحدث فعليًا.
   ملاحظة مهمة: overflow-y:auto على .sidebar نفسه (المحاولة الأولى) كان
   يقصّ زر الطي/الفتح (.sidebar-toggle) لأنه موضّع خارج حدود الشريط
   جزئيًا (inset-inline-end: -14px) و.sidebar هو containing block له —
   أي overflow غير visible على .sidebar يفرض قصّ overflow-x أيضًا حسب
   مواصفات CSS، فيظهر الزر نصف دائرة مقصوصة. الحل: نجعل .sidebar-nav
   وحده (قائمة العناصر) هو القابل للتمرير عبر flex، ويبقى .sidebar نفسه
   (والشعار وزر الطي) بلا أي قصّ. */
.sidebar {
  max-height: 100vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* Edge القديم */
}
.sidebar-nav::-webkit-scrollbar { display: none; /* Chrome / Edge / Safari */ }