/* ============================================================
   بوابة حمد الداخلية — نظام تصميم فاخر (Luxury Design System)
   شركة حمد محمد بن سعيدان العقارية
   ============================================================ */
:root {
  --saedan-green: #115B3E;
  --saedan-green-dark: #0C4530;
  --saedan-green-darker: #08331F;
  --saedan-gold: #E3B65B;
  --saedan-goldlight: #F1CD79;
  --ink: #1C2B24;
  --sand: #F8F5EE;
  --shadow-soft: 0 2px 8px rgba(17,91,62,.05), 0 12px 32px rgba(17,91,62,.07);
  --shadow-lift: 0 4px 14px rgba(17,91,62,.09), 0 24px 48px rgba(17,91,62,.13);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-feature-settings: 'ss01';
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(227,182,91,.07), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(17,91,62,.05), transparent 55%),
    #F6F3EA;
}
::selection { background: rgba(227,182,91,.35); }

/* شريط تمرير فاخر */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #efe9db; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #115B3E, #0C4530);
  border-radius: 9px; border: 2px solid #efe9db;
}
::-webkit-scrollbar-thumb:hover { background: #115B3E; }

/* ============ البطاقات الفاخرة ============ */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
  border-radius: 1.25rem;
  border: 1px solid #ece5d3;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s;
  position: relative;
}
.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
  border-color: rgba(227,182,91,.45);
}
a.card:hover { border-color: rgba(227,182,91,.6); }

/* بطاقة بإطار ذهبي علوي */
.card-gold-top { position: relative; overflow: hidden; }
.card-gold-top::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #E3B65B 20%, #F1CD79 50%, #E3B65B 80%, transparent);
}

/* بطاقة زجاجية (Glassmorphism) */
.glass {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.25rem;
}
.glass-gold {
  background: linear-gradient(135deg, rgba(241,205,121,.14), rgba(227,182,91,.06));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(241,205,121,.35);
  border-radius: 1.25rem;
}

/* ============ الخلفيات والزخارف ============ */
.pattern-bg {
  background-color: var(--saedan-green);
  background-image:
    radial-gradient(700px 320px at 85% -20%, rgba(241,205,121,.16), transparent 60%),
    radial-gradient(500px 260px at 5% 110%, rgba(241,205,121,.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(241,205,121,.045) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(241,205,121,.045) 0 2px, transparent 2px 26px),
    linear-gradient(150deg, #14684A 0%, #115B3E 45%, #0A3D28 100%);
  position: relative;
}
.pattern-bg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(241,205,121,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

.gold-gradient { background: linear-gradient(135deg, #F7DA96 0%, #F1CD79 35%, #E3B65B 100%); }
.green-gradient {
  background:
    radial-gradient(600px 260px at 90% -30%, rgba(241,205,121,.13), transparent 60%),
    linear-gradient(150deg, #14684A 0%, #115B3E 40%, #0C4530 70%, #08331F 100%);
}

/* خط ذهبي فاصل مزخرف */
.gold-divider {
  height: 2px; border: 0; margin: 0 auto;
  background: linear-gradient(90deg, transparent, #E3B65B 30%, #F1CD79 50%, #E3B65B 70%, transparent);
  position: relative;
}
.gold-divider::after {
  content: '◆'; position: absolute; top: 50%; right: 50%; transform: translate(50%,-52%);
  color: #E3B65B; font-size: 10px; background: transparent; line-height: 1;
  text-shadow: 0 0 12px rgba(227,182,91,.8);
}

/* عناوين الأقسام الفاخرة */
.section-title {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; color: var(--saedan-green);
}
.section-title .st-icon {
  width: 2.4rem; height: 2.4rem; border-radius: .8rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #14684A, #0C4530);
  color: #F1CD79; font-size: .85rem;
  box-shadow: 0 4px 12px rgba(17,91,62,.28), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ============ التنقل ============ */
.nav-link { position: relative; transition: color .25s; }
.nav-link.active { color: var(--saedan-goldlight); }
.nav-link.active::after {
  content: ''; position: absolute; bottom: -7px; right: 0; left: 0;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #F1CD79, #E3B65B);
  box-shadow: 0 0 10px rgba(241,205,121,.7);
}
.nav-link:not(.active)::after {
  content: ''; position: absolute; bottom: -7px; right: 50%; left: 50%;
  height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, #F1CD79, #E3B65B);
  transition: right .28s cubic-bezier(.2,.7,.3,1), left .28s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.nav-link:not(.active):hover::after { right: 15%; left: 15%; opacity: .55; }

/* ============ الحركات ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .55s cubic-bezier(.2,.7,.3,1) both; }

@keyframes floatSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-soft { animation: floatSoft 5s ease-in-out infinite; }

@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
.gold-shimmer-text {
  background: linear-gradient(90deg, #E3B65B 25%, #FBE9BD 50%, #E3B65B 75%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4.5s linear infinite;
}

@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(227,182,91,.45); }
  50% { box-shadow: 0 0 0 8px rgba(227,182,91,0); }
}
.pulse-gold { animation: pulseGlow 2.4s ease-out infinite; }

/* ظهور متدرج للعناصر */
.stagger > * { opacity: 0; animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) forwards; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .09s; }
.stagger > *:nth-child(3) { animation-delay: .14s; }
.stagger > *:nth-child(4) { animation-delay: .19s; }
.stagger > *:nth-child(5) { animation-delay: .24s; }
.stagger > *:nth-child(6) { animation-delay: .29s; }
.stagger > *:nth-child(7) { animation-delay: .34s; }
.stagger > *:nth-child(8) { animation-delay: .39s; }
.stagger > *:nth-child(9) { animation-delay: .44s; }
.stagger > *:nth-child(10) { animation-delay: .49s; }

/* ============ الخط الزمني ============ */
.timeline-item { position: relative; padding-right: 2.6rem; }
.timeline-item::before {
  content: ''; position: absolute; right: 0.58rem; top: 0.35rem; bottom: -1.2rem;
  width: 2px;
  background: linear-gradient(180deg, #E3B65B, rgba(227,182,91,.25));
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  position: absolute; right: 0; top: 0.3rem; width: 1.3rem; height: 1.3rem;
  border-radius: 9999px; background: #fff; border: 3px solid var(--saedan-gold);
  box-shadow: 0 0 0 4px rgba(227,182,91,.18), 0 0 14px rgba(227,182,91,.45);
}

/* الهيكل التنظيمي */
.org-line { border-right: 2px dashed #115B3E44; }

/* ============ الشارات ============ */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; padding: .22rem .65rem; border-radius: 999px; font-weight: 700;
  letter-spacing: .01em;
}
.badge.gold-gradient { box-shadow: 0 2px 8px rgba(227,182,91,.4), inset 0 1px 0 rgba(255,255,255,.5); }

/* ============ جداول الإدارة ============ */
.admin-table th {
  background: linear-gradient(150deg, #14684A, #0C4530); color: #fff;
  font-weight: 700; padding: .65rem .8rem; font-size: .8rem; white-space: nowrap;
}
.admin-table td { padding: .55rem .8rem; border-bottom: 1px solid #eee7d8; font-size: .85rem; }
.admin-table tr:hover td { background: #F8F5EE; }

/* ============ النوافذ المنبثقة ============ */
.modal-backdrop { background: rgba(8, 51, 31, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ============ الحقول والأزرار ============ */
.field {
  width: 100%; border: 1.5px solid #e2dac6; border-radius: .75rem; padding: .6rem .9rem;
  background: #fff; font-size: .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus {
  border-color: var(--saedan-gold);
  box-shadow: 0 0 0 4px rgba(227,182,91,.18), 0 2px 10px rgba(17,91,62,.06);
}

.btn-primary {
  background: linear-gradient(150deg, #14684A, #115B3E 55%, #0C4530);
  color: #fff; border-radius: .75rem; padding: .6rem 1.4rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(17,91,62,.3), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .2s, box-shadow .2s, filter .2s;
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 200% 0;
  transition: background-position .6s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(17,91,62,.38); }
.btn-primary:hover::after { background-position: -50% 0; }
.btn-primary:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(135deg, #F7DA96, #F1CD79 40%, #E3B65B);
  color: #08331F; border-radius: .75rem; padding: .6rem 1.4rem; font-weight: 800;
  box-shadow: 0 4px 16px rgba(227,182,91,.45), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-gold:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(227,182,91,.55); }
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
  border: 1.5px solid #ddd5c2; border-radius: .75rem; padding: .55rem 1.15rem; font-weight: 700;
  color: #115B3E; background: #fff; transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: #F8F5EE; border-color: rgba(227,182,91,.6); }

/* إطار فيديو فاخر */
.video-frame {
  border-radius: 1.1rem; overflow: hidden; background: #000;
  border: 1px solid rgba(227,182,91,.5);
  box-shadow: 0 0 0 4px rgba(227,182,91,.12), 0 18px 44px rgba(8,51,31,.35);
}

/* روابط سريعة فاخرة */
.quick-link {
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s, background .28s;
}
.quick-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(17,91,62,.14);
}
.quick-link:hover .ql-icon { transform: scale(1.08); box-shadow: 0 6px 16px rgba(17,91,62,.35); }
.ql-icon { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; }

/* ============ خلفية الأفق العقاري في الـ Hero ============ */
.hero-skyline {
  background-image:
    linear-gradient(150deg, rgba(20,104,74,.88) 0%, rgba(17,91,62,.82) 45%, rgba(8,51,31,.92) 100%),
    url('/static/hero-skyline.jpg');
  background-size: cover;
  background-position: center 30%;
  position: relative;
}
.hero-skyline::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(241,205,121,.22), inset 0 1px 0 rgba(255,255,255,.1),
              inset 0 -60px 80px -40px rgba(8,51,31,.55);
}

/* ============ انتقالات الصفحات السينمائية ============ */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(18px) scale(.992); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.page-transition { animation: pageIn .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes pageOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px); }
}
.page-leaving main { animation: pageOut .18s ease both; }

/* ============ زر تبديل الوضع الليلي ============ */
#theme-toggle .fa-sun { display: none; }
html.dark #theme-toggle .fa-sun { display: inline-block; }
html.dark #theme-toggle .fa-moon { display: none; }

/* ============================================================
   الوضع الليلي الفاخر (Luxury Dark Mode)
   ============================================================ */
html.dark body {
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(227,182,91,.06), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(20,104,74,.10), transparent 55%),
    #0D1512;
  color: #E8E4D8;
}
html.dark ::-webkit-scrollbar-track { background: #131D18; }
html.dark ::-webkit-scrollbar-thumb { border-color: #131D18; }

html.dark .card {
  background: linear-gradient(180deg, #16211B 0%, #121B16 100%);
  border-color: #24332B;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
}
html.dark .card:hover {
  border-color: rgba(227,182,91,.4);
  box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.5), 0 0 24px rgba(227,182,91,.06);
}

/* نصوص وألوان Tailwind الشائعة */
html.dark .text-saedan-ink { color: #E8E4D8; }
html.dark .text-gray-700 { color: #C9C4B4; }
html.dark .text-gray-500 { color: #9A957F; }
html.dark .text-gray-400 { color: #82806E; }
html.dark .section-title { color: #F1CD79; }
html.dark .text-saedan-green { color: #6FBF9A; }
html.dark .hover\:underline:hover { color: #F1CD79; }

/* خلفيات فاتحة → داكنة */
html.dark .bg-white { background-color: #16211B; }
html.dark .bg-saedan-sand { background-color: #1A2620; }
html.dark .bg-saedan-sand\/50 { background-color: rgba(26,38,32,.6); }
html.dark .hover\:bg-saedan-sand:hover { background-color: #22312A; }
html.dark .hover\:bg-saedan-sand\/50:hover { background-color: rgba(34,49,42,.6); }
html.dark .hover\:bg-white:hover { background-color: #1D2A23; }
html.dark .bg-gray-100 { background-color: #1A2620; }
html.dark .bg-amber-50 { background-color: rgba(120,86,20,.16); }
html.dark .border-amber-200 { border-color: rgba(227,182,91,.35); }
html.dark .text-amber-800 { color: #F1CD79; }
html.dark .bg-green-50 { background-color: rgba(17,91,62,.25); }
html.dark .bg-pink-50 { background-color: rgba(190,80,120,.15); }
html.dark .text-pink-700 { color: #E9A0BC; }
html.dark .border-pink-100 { border-color: rgba(190,80,120,.3); }
html.dark .bg-red-50 { background-color: rgba(180,50,50,.15); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(180,50,50,.22); }
html.dark .bg-saedan-green\/10 { background-color: rgba(111,191,154,.12); }
html.dark .text-red-600 { color: #F08A8A; }

/* حدود */
html.dark .border-gray-100, html.dark .border-gray-200,
html.dark .border-gray-50, html.dark .border, html.dark .border-b { border-color: #24332B; }
html.dark .border-saedan-gold\/30 { border-color: rgba(227,182,91,.3); }

/* الحقول والأزرار */
html.dark .field { background: #121B16; border-color: #2C3E33; color: #E8E4D8; }
html.dark .field::placeholder { color: #6E7A6E; }
html.dark .field:focus { border-color: var(--saedan-gold); box-shadow: 0 0 0 4px rgba(227,182,91,.14); }
html.dark .btn-ghost { background: #16211B; border-color: #2C3E33; color: #6FBF9A; }
html.dark .btn-ghost:hover { background: #1D2A23; }

/* الجداول والنوافذ */
html.dark .admin-table td { border-color: #24332B; }
html.dark .admin-table tr:hover td { background: #1A2620; }
html.dark .modal-backdrop { background: rgba(0,0,0,.7); }

/* عناصر متفرقة */
html.dark .video-frame { box-shadow: 0 0 0 4px rgba(227,182,91,.1), 0 18px 44px rgba(0,0,0,.6); }
html.dark .timeline-dot { background: #16211B; }
html.dark img.h-40, html.dark .card img { filter: brightness(.92); }

/* ============ طباعة بطاقة العمل ============ */
@media print {
  body * { visibility: hidden; }
  #print-card, #print-card * { visibility: visible; }
  #print-card { position: fixed; inset: 0; }
}