/* سوقنا — supplemental styles over Tailwind CDN */

/* =====================================================================
   CSS FALLBACKS FOR BRAND COLORS
   Tailwind CDN لا يولّد دائماً utilities من tailwind.config.colors المخصّصة.
   نضمن هنا أن .bg-brand, .text-brand, .border-brand, .hover:bg-brand-dark
   تعمل دائماً حتى لو فشل الـ JIT scan.
   ===================================================================== */
.bg-brand               { background-color: #1B5E20 !important; }
.bg-brand-dark          { background-color: #0B3D0F !important; }
.bg-brand-accent        { background-color: #FF6F00 !important; }
.text-brand             { color: #1B5E20 !important; }
.text-brand-dark        { color: #0B3D0F !important; }
.text-brand-accent      { color: #FF6F00 !important; }
.border-brand           { border-color: #1B5E20 !important; }
.border-brand-dark      { border-color: #0B3D0F !important; }
.hover\:bg-brand:hover       { background-color: #1B5E20 !important; }
.hover\:bg-brand-dark:hover  { background-color: #0B3D0F !important; }
.hover\:text-brand:hover     { color: #1B5E20 !important; }
.focus\:ring-brand:focus     { --tw-ring-color: #1B5E20 !important; box-shadow: 0 0 0 2px #1B5E20 !important; }
.ring-brand             { --tw-ring-color: #1B5E20 !important; box-shadow: 0 0 0 2px #1B5E20 !important; }
/* file: file utilities (لرفع الملفات) */
.file\:bg-brand::file-selector-button   { background-color: #1B5E20 !important; }
.file\:text-white::file-selector-button { color: white !important; }


html, body {
  font-family: 'Tajawal', 'DM Sans', system-ui, sans-serif;
}

h1, h2, h3, .font-display {
  font-family: 'Cairo', 'DM Sans', system-ui, sans-serif;
}

/* RTL form field defaults — Tailwind utilities cover most of this. */
input[type="text"], input[type="tel"], input[type="number"],
input[type="email"], input[type="search"], textarea, select {
  font-family: inherit;
}

/* Inputs that hold a phone number stay LTR even inside an RTL page. */
input[type="tel"], .ltr { direction: ltr; }

/* Pull-to-refresh hint on mobile (placeholder) */
.swipe-hint::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1B5E20, transparent);
}

/* Skeleton shimmer */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f3f3f3 0px, #fafafa 40px, #f3f3f3 80px);
  background-size: 200px 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: 0.5rem;
}
html.dark .skeleton {
  background: linear-gradient(90deg, #1c2128 0px, #22272e 40px, #1c2128 80px);
  background-size: 200px 100%;
}

/* ===== Pull-to-refresh indicator ===== */
#ptr-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 199;
  pointer-events: none;
  overflow: hidden;
  transition: height 200ms ease;
}
#ptr-indicator.pulling { height: 60px; }
#ptr-indicator.refreshing { height: 60px; }
#ptr-indicator-inner {
  padding: 0.5rem 1rem;
  background: #1B5E20;
  color: white;
  border-radius: 0 0 1rem 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#ptr-indicator.refreshing #ptr-arrow { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #ptr-indicator { display: none !important; }
}

/* Lazy image fade-in — يخفي القفزة عند تحميل الصورة */
img.lazy-img {
  opacity: 0;
  transition: opacity 250ms ease;
}
img.lazy-img.loaded { opacity: 1; }
/* قبل التحميل، اعرض shimmer مكان الصورة */
img.lazy-img:not(.loaded) {
  background: linear-gradient(90deg, #f3f3f3 0px, #fafafa 40px, #f3f3f3 80px);
  background-size: 200px 100%;
  animation: shimmer 1.2s linear infinite;
}
html.dark img.lazy-img:not(.loaded) {
  background: linear-gradient(90deg, #1c2128 0px, #22272e 40px, #1c2128 80px);
  background-size: 200px 100%;
}

/* Hide scrollbar for category strips */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ===== Unified button system =====
   استخدم class="btn btn-primary" بدل تكرار utilities مرات
*/
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 150ms ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;  /* iOS-friendly touch target */
  user-select: none;
}
.btn:focus-visible { outline: 2px solid #1B5E20; outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: #1B5E20; color: white; }
.btn-primary:hover { background: #0B3D0F; }

.btn-secondary { background: #f5f5f4; color: #292524; }
.btn-secondary:hover { background: #e7e5e4; }

.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }

.btn-success { background: #059669; color: white; }
.btn-success:hover { background: #047857; }

.btn-warning { background: #d97706; color: white; }
.btn-warning:hover { background: #b45309; }

.btn-info { background: #2563eb; color: white; }
.btn-info:hover { background: #1d4ed8; }

.btn-amber { background: #f59e0b; color: #78350f; }
.btn-amber:hover { background: #d97706; color: white; }

.btn-ghost { background: transparent; color: #1B5E20; }
.btn-ghost:hover { background: rgba(27, 94, 32, 0.08); }

.btn-outline { background: transparent; border: 2px solid #1B5E20; color: #1B5E20; padding: calc(0.625rem - 2px) calc(1.25rem - 2px); }
.btn-outline:hover { background: #1B5E20; color: white; }

/* ---------- Vertical-branded buttons (لون مميّز لكل قطاع) ---------- */
.btn-jobs       { background: #1d4ed8; color: white; }  /* blue-700 */
.btn-jobs:hover { background: #1e40af; }                 /* blue-800 */

.btn-services       { background: #c2410c; color: white; } /* orange-700 */
.btn-services:hover { background: #9a3412; }               /* orange-800 */

.btn-exports       { background: #047857; color: white; }  /* emerald-700 */
.btn-exports:hover { background: #065f46; }                /* emerald-800 */

.btn-realestate       { background: #4338ca; color: white; } /* indigo-700 */
.btn-realestate:hover { background: #3730a3; }               /* indigo-800 */

.btn-livestock       { background: #047857; color: white; }  /* emerald-700 = same as exports */
.btn-livestock:hover { background: #065f46; }

.btn-energy       { background: #b45309; color: white; }     /* amber-700 */
.btn-energy:hover { background: #92400e; }

.btn-auctions       { background: #be123c; color: white; }   /* rose-700 */
.btn-auctions:hover { background: #9f1239; }

.btn-wanted       { background: #b45309; color: white; }     /* amber-700 */
.btn-wanted:hover { background: #92400e; }

.btn-sm  { padding: 0.375rem 0.75rem; font-size: 0.75rem; min-height: 36px; }
.btn-xs  { padding: 0.25rem 0.625rem; font-size: 0.7rem; min-height: 28px; }
.btn-lg  { padding: 0.875rem 1.75rem; font-size: 1rem; min-height: 52px; }
.btn-xl  { padding: 1rem 2rem; font-size: 1.125rem; min-height: 60px; }
.btn-block { width: 100%; }
.btn-pill  { border-radius: 9999px; }

/* ===== Mobile-first touch improvements ===== */
@media (max-width: 640px) {
  /* Ensure clickable elements have minimum 44x44px touch target on phone */
  a, button { min-height: 36px; }
  /* Better tap-highlight color (Sudan brand green tint) */
  body { -webkit-tap-highlight-color: rgba(27, 94, 32, 0.15); }
}

/* ===== Focus-visible for keyboard nav ===== */
:focus-visible {
  outline: 2px solid #1B5E20;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Card hover lift effect ===== */
.card-hover {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===== Prefer reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   DARK MODE — يطبَّق عبر class="dark" على <html>
   نتجنّب الاعتماد الكلي على dark: variants من Tailwind CDN
   ونغطّي الفئات الشائعة hardcoded في القوالب
   ===================================================================== */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0f1419;
  color: #e7e5e4;
}

/* الخلفيات الأكثر شيوعاً */
html.dark .bg-white { background-color: #1c2128 !important; }
html.dark .bg-stone-50 { background-color: #14181d !important; }
html.dark .bg-stone-100 { background-color: #22272e !important; }
html.dark .bg-stone-200 { background-color: #2d333b !important; }

/* النصوص */
html.dark .text-stone-900 { color: #e7e5e4 !important; }
html.dark .text-stone-800 { color: #d6d3d1 !important; }
html.dark .text-stone-700 { color: #b8b3ad !important; }
html.dark .text-stone-600 { color: #a8a29e !important; }
html.dark .text-stone-500 { color: #8a8580 !important; }

/* الحدود */
html.dark .border, html.dark .border-t, html.dark .border-b,
html.dark .border-l, html.dark .border-r,
html.dark .border-stone-100, html.dark .border-stone-200 { border-color: #2d333b !important; }
html.dark .divide-stone-100 > * + * { border-top-color: #2d333b !important; }

/* الـ shadows أخف في dark mode */
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.4) !important; }
html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.6) !important; }
html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.7) !important; }

/* المدخلات */
html.dark input, html.dark textarea, html.dark select {
  background-color: #22272e;
  color: #e7e5e4;
  border-color: #2d333b;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6e6a64; }
html.dark .bg-stone-100 input, html.dark input.bg-stone-100 { background-color: #22272e !important; }

/* الـ header */
html.dark header.bg-white\/95 { background-color: rgba(28, 33, 40, 0.95) !important; }

/* tints الملونة — نخفّفها قليلاً في dark */
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.08) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.08) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.08) !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.08) !important; }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.08) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.08) !important; }
html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, 0.08) !important; }
html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.08) !important; }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.08) !important; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
html.dark .bg-fuchsia-50 { background-color: rgba(217, 70, 239, 0.08) !important; }

/* hover خفيف */
html.dark .hover\:bg-stone-50:hover { background-color: #1c2128 !important; }
html.dark .hover\:bg-stone-100:hover { background-color: #22272e !important; }
html.dark .hover\:bg-stone-200:hover { background-color: #2d333b !important; }

/* الـ buttons تبقى ملوّنة (لا تتغيّر) */
html.dark .btn-secondary { background: #2d333b; color: #e7e5e4; }
html.dark .btn-secondary:hover { background: #373e47; }