/* ============================================================
   سُلوك — مكونات جاهزة | Sulook UI Components  v1.0
   يعتمد على tokens.css — استورد الاتنين مع بعض.
   ============================================================ */

/* ---------- أساسيات ---------- */
.ds-reset, .ds-reset *, .ds-reset *::before, .ds-reset *::after {
  box-sizing: border-box;
}

/* ============================================================
   الأزرار — Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* الأساسي — الأخضر هو «التحول»: للأكشن الأهم في الصفحة فقط */
.btn-primary {
  background: var(--cta);
  color: var(--text-on-cta);
}
.btn-primary:hover:not(:disabled) {
  background: var(--cta-hover);
  box-shadow: var(--glow-cta);
}

/* الثانوي — كحلي واثق */
.btn-secondary {
  background: var(--navy-900);
  color: var(--text-on-dark);
}
.btn-secondary:hover:not(:disabled) { background: var(--navy-700); }

/* Outline — للأفعال المساندة */
.btn-outline {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--navy-900);
}
.btn-outline:hover:not(:disabled) {
  background: var(--navy-900);
  color: var(--text-on-dark);
}

/* Ghost — أخف حضور */
.btn-ghost {
  background: transparent;
  color: var(--navy-900);
}
.btn-ghost:hover:not(:disabled) { background: var(--ice-blue); }

/* خطر — للحذف والإجراءات الحرجة */
.btn-danger {
  background: var(--danger);
  color: var(--white);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }

/* على الخلفية الداكنة */
.btn-on-dark {
  background: var(--cta);
  color: var(--text-on-cta);
}
.btn-on-dark:hover:not(:disabled) { background: var(--green-400); }
.btn-outline-on-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--border-on-dark);
}
.btn-outline-on-dark:hover:not(:disabled) { border-color: var(--cta); color: var(--cta); }

/* الأحجام */
.btn-sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }
.btn-lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-8); border-radius: var(--radius-lg); }

/* تحميل */
.btn-loading { pointer-events: none; opacity: 0.75; }
.btn-loading::before {
  content: "";
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* أيقونة داخل زر — بتلقائية RTL */
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ============================================================
   النماذج — Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.field-hint { font-size: var(--text-xs); color: var(--text-muted); }
.field-error-text { font-size: var(--text-xs); color: var(--danger); font-weight: var(--weight-medium); }
.field-success-text { font-size: var(--text-xs); color: var(--success); font-weight: var(--weight-medium); }

.input, .select, .textarea {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--info-bg);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--mist-grey);
  color: var(--text-muted);
  cursor: not-allowed;
}
.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-body); }

/* حالات التحقق */
.input.is-error, .textarea.is-error, .select.is-error { border-color: var(--danger-accent); }
.input.is-error:focus { box-shadow: 0 0 0 3px var(--danger-bg); border-color: var(--danger-accent); }
.input.is-success, .textarea.is-success { border-color: var(--success); }
.input.is-success:focus { box-shadow: 0 0 0 3px var(--success-bg); border-color: var(--success); }

/* Checkbox / Radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 1.15em; height: 1.15em;
  accent-color: var(--green-600);
  cursor: pointer;
}
.check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 44px; height: 24px; flex: none;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease);
  position: relative;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px;
  background: var(--white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  /* inset-inline-start بدل transform عشان يشتغل صح في RTL و LTR من غير overrides */
  transition: inset-inline-start var(--duration-base) var(--ease);
}
.switch input:checked + .switch-track { background: var(--green-600); }
.switch input:checked + .switch-track::after { inset-inline-start: 23px; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ============================================================
   البطاقات — Cards
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-slow) var(--ease-expo),
              transform var(--duration-slow) var(--ease-expo),
              border-color var(--duration-slow) var(--ease-expo);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { transform: translateY(-3px); border-color: var(--green-300); box-shadow: var(--shadow-lg); }

.card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
}
.card-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-body);
  margin: 0;
}

/* بطاقة KPI — «نقيس بالأثر لا بالتسليم» */
.card-kpi { text-align: center; padding: var(--space-8) var(--space-6); }
.card-kpi .kpi-value {
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  color: var(--navy-900);
  line-height: 1.1;
  margin: 0;
}
.card-kpi .kpi-value .kpi-unit { font-size: 0.5em; color: var(--green-600); }
.card-kpi .kpi-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}
.card-kpi .kpi-trend { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-top: var(--space-2); }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* بطاقة اقتباس / رأي عميل */
.card-quote { position: relative; background: var(--bg-card-tinted); border-color: transparent; }
.card-quote .quote-mark {
  font-family: var(--font-script);
  font-size: var(--text-3xl);
  color: var(--green-500);
  line-height: 1;
}
.card-quote .quote-text {
  font-size: var(--text-lg);
  color: var(--text-primary);
  line-height: var(--leading-loose);
  margin: var(--space-3) 0 var(--space-5);
}
.card-quote .quote-author { display: flex; align-items: center; gap: var(--space-3); }
.card-quote .quote-avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-full);
  background: var(--navy-900);
  color: var(--soft-white);
  display: grid; place-items: center;
  font-weight: var(--weight-medium);
}
.card-quote .quote-name { font-weight: var(--weight-medium); color: var(--text-primary); font-size: var(--text-sm); }
.card-quote .quote-role { color: var(--text-muted); font-size: var(--text-xs); }

/* بطاقة على خلفية داكنة */
.card-dark {
  background: var(--navy-800);
  border-color: var(--border-on-dark);
  color: var(--text-on-dark);
}
.card-dark .card-title { color: var(--text-on-dark); }
.card-dark .card-text { color: var(--text-on-dark-2); }

/* بطاقة زجاجية — فوق الخلفيات الداكنة والتدرجات فقط */
.card-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--text-on-dark);
  box-shadow: none;
}
.card-glass .card-title { color: var(--soft-white); }
.card-glass .card-text { color: var(--text-on-dark-2); }
.card-glass:hover { border-color: var(--glass-border-hover); box-shadow: none; }

/* ============================================================
   الشارات — Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  line-height: 1.6;
}
.badge-navy    { background: var(--navy-900);  color: var(--soft-white); }
.badge-green   { background: var(--green-100); color: var(--success); }
.badge-blue    { background: var(--info-bg);   color: var(--info); }                        /* داتا / تحليلات */
.badge-cyan    { background: var(--accent-cyan-soft); color: var(--accent-cyan-text); }     /* تحوّل رقمي */
.badge-sand    { background: var(--accent-sand-soft); color: var(--accent-sand-text); }     /* إنساني / استشاري */
.badge-amber   { background: var(--warning-bg); color: var(--warning); }                    /* تحذير / انتباه */
.badge-red     { background: var(--danger-bg); color: var(--danger); }                      /* أخطاء */
.badge-violet  { background: var(--accent-violet-soft); color: var(--accent-violet-text); } /* إبراز حر */
.badge-neutral { background: var(--mist-grey); color: var(--text-secondary); }
.badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ============================================================
   التنبيهات — Alerts
   ============================================================ */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-inline-start: 4px solid;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.alert-title { font-weight: var(--weight-medium); display: block; margin-bottom: var(--space-1); }
.alert-success { background: var(--success-bg); border-color: var(--green-500);    color: var(--text-primary); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-accent);  color: var(--text-primary); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-accent); color: var(--text-primary); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-accent);  color: var(--text-primary); }
.alert-icon { flex: none; font-size: var(--text-lg); line-height: 1.2; }

/* ============================================================
   التنقل — Navigation
   ============================================================ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.navbar-dark { background: var(--navy-900); border-color: var(--border-on-dark); }
/* نافبار زجاجي — للتثبيت فوق هيرو أو محتوى متحرك */
.navbar-glass {
  background: var(--glass-navy-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
}
.navbar-glass .navbar-brand { color: var(--text-on-dark); }
.navbar-glass .navbar-link { color: var(--text-on-dark-2); }
.navbar-glass .navbar-link:hover, .navbar-glass .navbar-link.active { color: var(--soft-white); }
.navbar-brand {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-decoration: none;
}
.navbar-dark .navbar-brand { color: var(--text-on-dark); }
.navbar-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.navbar-link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease);
}
.navbar-link:hover { color: var(--navy-900); }
.navbar-link.active { color: var(--navy-900); font-weight: var(--weight-medium); }
.navbar-dark .navbar-link { color: var(--text-on-dark-2); }
.navbar-dark .navbar-link:hover, .navbar-dark .navbar-link.active { color: var(--soft-white); }

/* Tabs */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1.5px solid var(--border); }
.tab {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1.5px;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--navy-900); border-color: var(--green-500); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
/* U+203A بيتعكس تلقائياً مع الـ bidi mirroring: يظهر ‹ في RTL و › في LTR — الاتجاه صح في الحالتين */
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--border-strong); }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--success); }
.breadcrumb li:last-child { color: var(--text-primary); font-weight: var(--weight-medium); }

/* Footer */
.footer {
  background: var(--navy-950);
  color: var(--text-on-dark-2);
  padding: var(--space-16) var(--space-8) var(--space-8);
}
.footer a { color: var(--text-on-dark-2); text-decoration: none; transition: color var(--duration-base) var(--ease); }
.footer a:hover { color: var(--green-400); }
.footer-heading { color: var(--soft-white); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-4); }
.footer-bottom {
  border-top: 1px solid var(--border-on-dark);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
}

/* ============================================================
   الجداول — Tables
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--bg); }
.table th {
  text-align: start;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--ice-blue);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--duration-fast) var(--ease); }
.table tbody tr:hover { background: var(--soft-white); }

/* ============================================================
   عناصر مساعدة
   ============================================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
.script-accent {
  font-family: var(--font-script);
  color: var(--green-500);
  font-weight: var(--weight-normal);
}
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  color: var(--success);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}