/* =========================================
   منصة العربة — ثيم قطع غيار السيارات
   ألوان محددة + خط عربي + تنظيم موحد
   ========================================= */

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

html { --theme-loaded: true; }

:root {
  /* ===== هوية المنصة (قطع غيار / أوتوموتيف) ===== */
  --color-primary: #1e293b;      /* أزرق داكن — احترافي */
  --color-accent: #ea580c;       /* برتقالي/كهرماني — يوحى بالحرارة والفرامل والقطع */
  --color-accent-hover: #c2410c;
  --color-accent-light: #fff7ed;
  --color-accent-muted: #fdba74;
  --color-accent-alt: var(--color-accent);

  /* ===== خلفيات ===== */
  --color-bg-page: #f1f5f9;
  --color-bg-panel: #ffffff;
  --color-bg-subtle: #e2e8f0;
  --color-bg-muted: #cbd5e1;

  /* ===== نصوص ===== */
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-dark: #020617;

  /* ===== حدود ===== */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-input: #cbd5e1;

  /* ===== حالة ===== */
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-info: #0284c7;
  --color-info-bg: #f0f9ff;

  /* ===== الشريط العلوي ===== */
  --color-nav-bg: #1e293b;
  --color-nav-text: rgba(255,255,255,0.9);
  --color-nav-text-hover: #fdba74;
  --color-nav-active-bg: rgba(234,88,12,0.2);
  --color-nav-active-text: #fdba74;
  --color-nav-border: rgba(255,255,255,0.08);

  /* ===== البطاقات — تنظيم موحد ===== */
  --card-radius: 12px;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  --card-padding: 1.25rem;
  --card-border: 1px solid var(--color-border);

  /* ===== ظلال وزوايا ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ===== مسافات ===== */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --transition-fast: 0.2s;
  --transition-normal: 0.25s;

  /* توافق أسماء قديمة */
  --color-brand: var(--color-accent);
  --color-brand-hover: var(--color-accent-hover);
  --color-brand-light: var(--color-accent-light);
  --color-brand-muted: var(--color-accent-muted);
  --color-brand-focus: rgba(234, 88, 12, 0.2);
  --color-bg-main: var(--color-bg-page);
  --color-bg-secondary: var(--color-bg-page);
  --color-bg-tertiary: var(--color-bg-subtle);
  --color-bg-dark: var(--color-primary);
  --color-text-white: #ffffff;
  --color-text-light: rgba(255,255,255,0.9);
  --color-border-dark: rgba(255,255,255,0.15);
  --color-badge-primary: var(--color-accent);
  --color-badge-light: var(--color-accent-light);
  --color-badge-text: var(--color-accent-hover);
  --color-instruction-box-bg: #fffbeb;
  --color-instruction-box-border: #fde68a;
  --color-instruction-box-text: #78350f;
}

/* ===== الخط — Cairo عربي احترافي ===== */
body {
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px) {
  body { font-size: 15px; }
}

/* ===== بطاقة موحدة لكل الصفحات ===== */
.app-card {
  background: var(--color-bg-panel);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-fast);
}
.app-card:hover { box-shadow: var(--card-shadow-hover); }
.app-card-header {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}
.app-card-body { padding-top: 0; }

/* ===== شبكة منظمة ===== */
.app-grid { display: grid; gap: var(--spacing-md); }
.app-grid-2 { grid-template-columns: repeat(2, 1fr); }
.app-grid-3 { grid-template-columns: repeat(3, 1fr); }
.app-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) {
  .app-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .app-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .app-grid-4, .app-grid-3, .app-grid-2 { grid-template-columns: 1fr; }
}

.text-accent, .text-primary-custom { color: var(--color-accent) !important; }
.bg-accent, .bg-primary-custom { background-color: var(--color-accent) !important; }
.border-accent, .border-primary-custom { border-color: var(--color-accent) !important; }
.border-primary { border-color: var(--color-accent) !important; }
.border-start.border-5.border-primary { border-right-color: var(--color-accent) !important; }

/* توحيد البطاقات في كل الصفحات */
.card, .card-ui {
  border-radius: var(--card-radius) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  background: var(--color-bg-panel) !important;
}
.card-header {
  background: var(--color-bg-subtle) !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-weight: 600;
  color: var(--color-text-primary);
}
.card-body { padding: var(--card-padding) !important; }

.app-main { min-height: 50vh; }
@media (max-width: 576px) {
  .app-main { padding-top: 0.75rem !important; padding-bottom: 1.5rem !important; }
}