@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* Bootstrap 5.3 Native Theme Variables Override */
:root, [data-bs-theme="light"] {
  --bs-body-bg: #f4f6f9;
  --bs-body-color: #0f172a;
  --bs-secondary-color: #475569;
  --bs-tertiary-bg: #ffffff;
  --bs-border-color: #e2e8f0;
  
  --truko-yellow: #ffb703;
  --truko-orange: #fb8500;
  --truko-dark: #023047;
  
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --header-bg: #023047;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0b132b;
  --bs-body-color: #f8fafc;
  --bs-secondary-color: #94a3b8;
  --bs-tertiary-bg: #1c2541;
  --bs-border-color: #334155;
  
  --truko-yellow: #ffb703;
  --truko-orange: #fb8500;
  --truko-dark: #023047;

  --glass-bg: rgba(28, 37, 65, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --header-bg: #0b132b;
}

/* Base Body Styles */
body {
  font-family: 'Tajawal', -apple-system, sans-serif;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Glassmorphism & Neumorphic Card Styling */
.card, .service-card, .stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--card-shadow);
  color: var(--bs-body-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  border-color: var(--truko-yellow) !important;
}

/* Icon Containers */
.service-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  background: rgba(255, 183, 3, 0.15) !important;
  color: var(--truko-yellow) !important;
}

/* Header & Navigation */
.navbar-truko {
  background-color: var(--header-bg) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
}

.truko-sidebar {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  width: 290px !important;
  border-left: 1px solid var(--bs-border-color);
}

.truko-sidebar .nav-link {
  color: var(--bs-body-color) !important;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 6px;
  transition: all 0.2s;
}

.truko-sidebar .nav-link:hover, 
.truko-sidebar .nav-link.active {
  background: rgba(255, 183, 3, 0.18) !important;
  color: var(--truko-yellow) !important;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--truko-dark) 0%, #0d1b2a 100%) !important;
  color: #ffffff !important;
  padding: 80px 0;
  border-bottom: 4px solid var(--truko-yellow);
  position: relative;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.3;
}

/* Buttons System */
.btn-truko-primary {
  background-color: var(--truko-yellow) !important;
  color: #000000 !important;
  font-weight: 700;
  border: none;
  padding: 10px 24px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.btn-truko-primary:hover {
  background-color: var(--truko-orange) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
} 

/* Dropdown Custom Styles */
.dropdown-menu {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.dropdown-item {
  color: var(--bs-body-color) !important;
  border-radius: 8px;
  padding: 8px 16px;
}

.dropdown-item:hover {
  background-color: rgba(255, 183, 3, 0.15) !important;
  color: var(--truko-yellow) !important;
}

/* Footer Styling */
footer {
  background-color: #02121e !important;
  color: #e2e8f0 !important;
  padding: 50px 0 20px;
  margin-top: auto;
  border-top: 1px solid var(--bs-border-color);
}

/* ==========================================================
   إصلاح شمولية الثيم المظلم وتجنب الخلفيات البيضاء الصريحة
   ========================================================== */

[data-bs-theme="dark"] {
  --bs-body-bg: #0b132b;
  --bs-body-color: #f8fafc;
  --bs-secondary-color: #cbd5e1;
  --bs-tertiary-bg: #1c2541;
  --bs-border-color: #334155;
}

/* إجبار الكروت والصناديق البيضاء على التحول للثيم المظلم */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* تصحيح النصوص الداكنة لتصبح فاتحة ومقروءة في الثيم المظلم */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label {
  color: var(--bs-body-color) !important;
}

/* تصحيح الجداول والقوائم الجانبية (Offcanvas) */
[data-bs-theme="dark"] .table {
  color: var(--bs-body-color) !important;
  --bs-table-bg: transparent;
}

[data-bs-theme="dark"] .table-light {
  background-color: #162238 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .truko-sidebar {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* تعديل المدخلات وعناصر النماذج */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #94a3b8 !important;
}

/* =========================================================
   إصلاح الخلفية الفاتحة والنصوص في الوضع المظلم (Dark Mode Fix)
   ========================================================= */

/* 1. توحيد ألوان البطاقات والحاويات في الوضع المظلم */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .service-card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* 2. إلغاء أثر كلاسات bg-white و bg-light عند تفعيل الثيم المظلم */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* 3. تصحيح ألوان العناوين والنصوص داخل البطاقات */
[data-bs-theme="dark"] .card .text-dark,
[data-bs-theme="dark"] .service-card .text-dark,
[data-bs-theme="dark"] h1.text-dark,
[data-bs-theme="dark"] h2.text-dark,
[data-bs-theme="dark"] h3.text-dark,
[data-bs-theme="dark"] h4.text-dark,
[data-bs-theme="dark"] h5.text-dark,
[data-bs-theme="dark"] h6.text-dark {
  color: #f8fafc !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
  color: #94a3b8 !important;
}

/* 4. تعديل مدخلات النماذج (Inputs & Selects) لتتناسب مع الخلفية الداكنة */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #64748b !important;
}