/*
 * Tatweer AI Platform — Design Tokens
 * مستخلصة من الشعار الرسمي المعتمد (راجع وثيقة UI/UX، المرحلة 5، القسم 1.2)
 * لا اعتماد على أي أداة بناء Node.js - ملف CSS خام يُقدَّم مباشرة.
 */

:root {
  /* ألوان الهوية */
  --color-primary-900: #0d2647;   /* كحلي غامق - نص "مؤسسة التطوير" */
  --color-primary-700: #14508c;   /* أزرق ملكي - بداية تدرّج الشعار */
  --color-primary-400: #3fa9dc;   /* أزرق سماوي فاتح - وسط التدرّج */
  --color-accent-teal:  #2bb6a3;  /* تركوازي - نهاية التدرّج ونص "للاستشارات الإدارية" */
  --color-accent-teal-dark: #1c8a7a;

  /* محايدات */
  --color-neutral-900: #101828;
  --color-neutral-600: #475467;
  --color-neutral-300: #d0d5dd;
  --color-neutral-100: #f7f9fc;
  --color-surface: #ffffff;

  /* دلالية (Workflow States) */
  --color-success: #1a9d6c;
  --color-warning: #d98c1f;
  --color-danger:  #d9432f;
  --color-info:    var(--color-primary-400);

  /* نظام المسافات */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px;

  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 3px rgba(13, 38, 71, 0.08), 0 1px 2px rgba(13, 38, 71, 0.06);
  --shadow-raised: 0 8px 24px rgba(13, 38, 71, 0.12);

  --font-ar: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  --font-en: 'Inter', -apple-system, sans-serif;
}

body {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  font-family: var(--font-ar);
}

[dir="ltr"] body { font-family: var(--font-en); }

/* -------------------- الهيدر والتنقل -------------------- */
.tw-topbar {
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-700) 55%, var(--color-accent-teal) 130%);
  color: #fff;
  box-shadow: var(--shadow-card);
}

.tw-sidebar {
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-neutral-300);
  min-height: 100vh;
}

.tw-sidebar .nav-link {
  color: var(--color-neutral-600);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin-bottom: 2px;
  font-weight: 500;
}

.tw-sidebar .nav-link.active,
.tw-sidebar .nav-link:hover {
  background: rgba(20, 80, 140, 0.08);
  color: var(--color-primary-700);
}

.tw-sidebar .nav-link .badge-count {
  background: var(--color-accent-teal);
}

/* -------------------- البطاقات -------------------- */
.tw-card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tw-kpi-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease, transform .15s ease;
}
.tw-kpi-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.tw-kpi-card .tw-kpi-value { font-size: 2rem; font-weight: 700; color: var(--color-primary-900); }
.tw-kpi-card .tw-kpi-label { color: var(--color-neutral-600); font-size: .875rem; }
.tw-kpi-card .tw-kpi-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-400), var(--color-accent-teal));
  color: #fff;
}

/* -------------------- شارة حالة Workflow -------------------- */
.tw-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600;
}
.tw-status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tw-status-draft, .tw-status-pending           { color: var(--color-neutral-600); background: rgba(71,84,103,.1); }
.tw-status-review, .tw-status-under_review, .tw-status-ai_analyzed, .tw-status-scheduled
                                                { color: var(--color-info); background: rgba(63,169,220,.14); }
.tw-status-needs_revision, .tw-status-needs_more_info { color: var(--color-warning); background: rgba(217,140,31,.14); }
.tw-status-approved, .tw-status-published, .tw-status-active, .tw-status-confirmed, .tw-status-completed, .tw-status-paid
                                                { color: var(--color-success); background: rgba(26,157,108,.14); }
.tw-status-rejected, .tw-status-cancelled, .tw-status-no_show, .tw-status-failed, .tw-status-suspended
                                                { color: var(--color-danger); background: rgba(217,67,47,.14); }
.tw-status-archived                            { color: var(--color-neutral-600); background: var(--color-neutral-100); }

/* -------------------- أزرار العلامة -------------------- */
.btn-tw-primary {
  background: var(--color-primary-700); border-color: var(--color-primary-700); color: #fff;
}
.btn-tw-primary:hover { background: var(--color-primary-900); border-color: var(--color-primary-900); color: #fff; }

.btn-tw-teal {
  background: var(--color-accent-teal); border-color: var(--color-accent-teal); color: #fff;
}
.btn-tw-teal:hover { background: var(--color-accent-teal-dark); border-color: var(--color-accent-teal-dark); color: #fff; }

/* -------------------- الحالة الفارغة -------------------- */
.tw-empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-neutral-600); }
.tw-empty-state .tw-empty-icon {
  width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%;
  background: var(--color-neutral-100); display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-400); font-size: 1.5rem;
}

/* -------------------- شريط إجراءات الموافقة -------------------- */
.tw-approval-bar {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4); background: var(--color-neutral-100);
  border-radius: var(--radius-md); border: 1px solid var(--color-neutral-300);
}

/* -------------------- تدرّج البصمة البصرية (Hero/AI progress) -------------------- */
.tw-brand-gradient {
  background: linear-gradient(120deg, var(--color-primary-900), var(--color-primary-700) 45%, var(--color-accent-teal) 100%);
}