/* =====================================================================
   سياحتي — طبقة نظام التصميم الحديثة (Design System Overlay)
   تُحمّل بعد theme.css على كل صفحة. تعتمد على متغيّرات theme.css فقط،
   وتصقل الهيكل المشترك دون تغيير أي markup أو JS أو سلوك.
   الهدف: مظهر تجاري راقٍ موحّد (حواف ناعمة، ظلال هادئة، حركة لطيفة،
   حلقات تركيز واضحة) مع الحفاظ الكامل على كل الوظائف.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Almarai:wght@400;700;800&display=swap');

/* ---- رموز إضافية غير موجودة في theme.css (fallback آمن) ---- */
:root{
  --ds-ease:var(--ease,cubic-bezier(.22,1,.36,1));
  --ds-sh-1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --ds-sh-2:0 4px 12px -4px rgba(15,23,42,.12), 0 2px 6px -2px rgba(15,23,42,.08);
  --ds-sh-3:0 18px 40px -16px rgba(15,23,42,.22), 0 6px 16px -8px rgba(15,23,42,.14);
  --ds-ring:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
html[data-theme="dark"]{
  --ds-sh-1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --ds-sh-2:0 6px 16px -6px rgba(0,0,0,.6), 0 2px 8px -3px rgba(0,0,0,.5);
  --ds-sh-3:0 22px 48px -18px rgba(0,0,0,.75), 0 8px 20px -10px rgba(0,0,0,.6);
  --ds-ring:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---- الخط الافتراضي للنظام (يُختار من الإعدادات، الافتراضي Cairo) ---- */
html body{ font-family:var(--app-font, 'Cairo','IBM Plex Sans Arabic','Segoe UI',system-ui,Tahoma,Arial,sans-serif) !important; }
/* استثناء: حقول الشيفرة/الهيكس تبقى أحادية المسافة */
.ct-hex, code, kbd, pre, samp, [style*="monospace"]{ font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace !important; }

/* ---- تحسينات عامة لطيفة ---- */
html{ -webkit-text-size-adjust:100%; }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
*{ -webkit-tap-highlight-color:transparent; }

/* حلقة تركيز واضحة وموحّدة (وصولية) لكل العناصر التفاعلية */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .icon-btn:focus-visible, .mini-btn:focus-visible{
  outline:none !important;
  box-shadow:var(--ds-ring) !important;
  border-radius:inherit;
}

/* شريط تمرير أنيق (غير مؤذٍ) */
*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:content-box; }

/* =====================  الترويسة  ===================== */
header{
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in srgb, var(--surface) 90%, transparent) !important;
  box-shadow:var(--ds-sh-1);
  transition:box-shadow .2s var(--ds-ease);
}
.brand .logo, .brand img.logo{ transition:transform .18s var(--ds-ease); }
.brand:hover .logo{ transform:scale(1.04); }

/* شريط التنقّل — كبسولات ناعمة */
nav.seg{ transition:background .2s var(--ds-ease); }
nav.seg a{ transition:color .16s var(--ds-ease), background .16s var(--ds-ease); }
nav.seg a:not(.active):hover{ color:var(--ink); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.seg a.active{ box-shadow:var(--ds-sh-1); }

/* أزرار الأيقونات في الترويسة (كل الأسماء المتغيّرة) */
.icon-btn, .ico-btn, header .theme, #themeBtn, .navToggle{
  transition:background .16s var(--ds-ease), color .16s var(--ds-ease),
             border-color .16s var(--ds-ease), transform .12s var(--ds-ease);
}
.icon-btn:hover, .ico-btn:hover, header .theme:hover, #themeBtn:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
}
.icon-btn:active, .ico-btn:active, #themeBtn:active{ transform:translateY(0); }

/* =====================  أيقونات الهيدر الحديثة (مثل الموك‌أب)  ===================== */
:root{
  --ico-sun:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>");
  --ico-moon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
}
/* شكل موحّد: مربّع ناعم 36px يتفاعل مع الثيم ويرتفع عند المرور */
header #themeBtn, header .icon-btn, header .ico-btn, header .theme,
.admdd-btn, #admCardBtn, #admLogoutBtn, header .navToggle{
  width:36px !important; height:36px !important; min-width:36px !important; padding:0 !important;
  border-radius:11px !important;
  border:1px solid var(--line) !important;
  background:var(--surface-2) !important;
  color:var(--muted) !important;
  display:inline-grid !important; place-items:center !important;
  transition:background .16s var(--ds-ease), color .16s var(--ds-ease), border-color .16s var(--ds-ease), transform .12s var(--ds-ease), box-shadow .16s var(--ds-ease) !important;
}
header #themeBtn:hover, header .icon-btn:hover, header .ico-btn:hover, header .theme:hover,
.admdd-btn:hover, #admCardBtn:hover, header .navToggle:hover{
  color:var(--accent) !important; border-color:var(--accent) !important;
  background:var(--surface) !important; transform:translateY(-1px); box-shadow:var(--ds-sh-1) !important;
}
#admLogoutBtn:hover, .admdd-lo:hover{ color:var(--danger) !important; border-color:var(--danger) !important; background:color-mix(in srgb, var(--danger) 8%, var(--surface)) !important; }
.admdd.open .admdd-btn, header .navToggle.on{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.admdd-btn svg, #admCardBtn svg, #admLogoutBtn svg{ width:18px !important; height:18px !important; }

/* زر الثيم: أيقونة شمس/قمر SVG بدل الإيموجي (تتبدّل مع الوضع) */
header #themeBtn{ position:relative; font-size:0 !important; color:var(--muted) !important; }
header #themeBtn::after{
  content:""; width:19px; height:19px; background:var(--muted);
  -webkit-mask:var(--ico-sun) center/contain no-repeat; mask:var(--ico-sun) center/contain no-repeat;
  transition:background .16s var(--ds-ease);
}
header #themeBtn:hover::after{ background:var(--accent); }
html[data-theme="dark"] header #themeBtn::after{ -webkit-mask-image:var(--ico-moon); mask-image:var(--ico-moon); }

/* شعار المنصّة الافتراضي (النخلة) → مخفي؛ يُستبدل بشعار الشركة أو حرفها */
header .brand img.logo[src*="seyahaty-logo"]{ visibility:hidden; }

/* =====================  الأزرار  ===================== */
.btn, button.btn, a.btn{
  transition:transform .12s var(--ds-ease), box-shadow .16s var(--ds-ease),
             background .16s var(--ds-ease), border-color .16s var(--ds-ease), filter .16s var(--ds-ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--ds-sh-2); }
.btn:active{ transform:translateY(0); box-shadow:var(--ds-sh-1); filter:brightness(.98); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); box-shadow:var(--ds-sh-1); }
.btn.sm{ letter-spacing:-.01em; }
/* أزرار شريط الأدوات المصغّرة */
.mini-btn{ transition:transform .12s var(--ds-ease), background .16s var(--ds-ease), border-color .16s var(--ds-ease), color .16s var(--ds-ease); }
.mini-btn:hover{ transform:translateY(-1px); border-color:var(--accent); }
.mini-btn.on{ box-shadow:var(--ds-sh-1); }

/* CTA المتدرّجة (استيراد/نسخة جديدة) — لمعان لطيف */
.import-btn, .btn-newv, .btn.primary{
  transition:transform .12s var(--ds-ease), box-shadow .18s var(--ds-ease), filter .16s var(--ds-ease);
}
.import-btn:hover, .btn-newv:hover, .btn.primary:hover{
  transform:translateY(-1px); box-shadow:var(--ds-sh-2); filter:saturate(1.06) brightness(1.02);
}

/* =====================  البطاقات واللوحات  ===================== */
.card, .panel{
  border-radius:var(--r-lg, 15px);
  box-shadow:var(--ds-sh-1);
  transition:box-shadow .2s var(--ds-ease), border-color .2s var(--ds-ease), transform .2s var(--ds-ease);
}
.card:hover{ box-shadow:var(--ds-sh-2); }

/* بطاقات الإحصاء (stat / kpi) — رفعة خفيفة عند المرور */
.stat, .kpi{ transition:transform .16s var(--ds-ease), box-shadow .18s var(--ds-ease); }
.stat:hover, .kpi:hover{ transform:translateY(-2px); box-shadow:var(--ds-sh-2); }

/* =====================  الحقول والمدخلات  ===================== */
input, select, textarea{
  transition:border-color .16s var(--ds-ease), box-shadow .16s var(--ds-ease), background .16s var(--ds-ease);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus){
  border-color:var(--line-strong);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent) !important;
  box-shadow:var(--ds-ring);
}
/* حقول البحث الملفوفة */
.search input:focus, .selwrap select:focus, .tn-search:focus, .filt input:focus{
  border-color:var(--accent) !important;
  box-shadow:var(--ds-ring);
}

/* =====================  الجداول  ===================== */
.tablewrap, .panel{ border-radius:var(--r-lg, 14px); }
thead th{ letter-spacing:-.005em; }
/* صف يُبرَز بلطف عند المرور (لا يكسر تظليل الصفوف الحالي) */
tbody tr{ transition:background .12s var(--ds-ease); }
tbody tr:hover{ background:color-mix(in srgb, var(--accent) 5%, transparent); }

/* شارات وكبسولات — استدارة كاملة موحّدة (تصقل دون كسر الألوان) */
.badge, .chip, .paxbadge, .count, .count-chip, .sync-pill,
.tpill, .c-g, .c-r, .c-p, .c-b{
  transition:transform .12s var(--ds-ease), box-shadow .14s var(--ds-ease);
}

/* =====================  التبويبات / المرشّحات  ===================== */
.tab, .mt-tab, .viewtabs button, .mvtabs button, .filt{
  transition:color .14s var(--ds-ease), background .14s var(--ds-ease),
             border-color .14s var(--ds-ease), transform .12s var(--ds-ease);
}
.tab:hover, .mt-tab:hover, .viewtabs button:hover, .mvtabs button:hover{ transform:translateY(-1px); }
.tab.on, .mvtabs button.on, .viewtabs button.on{ box-shadow:var(--ds-sh-1); }

/* =====================  النوافذ والتنبيهات  ===================== */
/* خلفيات النوافذ — تعتيم أنعم مع بلور خفيف */
.modal, .gmodal-bd, #pgModal{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.gmodal, .pgbox, .dialog, .modal > .form, .card.modal{
  box-shadow:var(--ds-sh-3) !important;
  border-radius:var(--r-lg, 16px);
}
/* التنبيهات العائمة (toasts) */
.msg, .toast{ box-shadow:var(--ds-sh-3); border-radius:12px; }
.msg.show, .toast.show{ animation:ds-pop .22s var(--ds-ease); }
@keyframes ds-pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* أشرطة التحديد (selection bars) */
.selbar, .selbar-g{ box-shadow:var(--ds-sh-2); }

/* =====================  احترام تقليل الحركة  ===================== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}