/**
 * Copyright © 2026 Abdo Ibn Egypt. All rights reserved.
 * Unauthorized copying, modification, distribution, or use of this software,
 * via any medium, is strictly prohibited without prior written permission.
 * Owner Contact (WhatsApp): +201098251005
 */

/**
 * tokens.css — Speedo Group Design System v2 — Design Tokens
 * =====================================================================
 * Source of truth for the visual identity: color, type, spacing, radius,
 * elevation and motion. Every screen (Admin Workspace, Supervisor Workspace,
 * Login) consumes these custom properties — never hardcode a color/size
 * value in a component or page file.
 *
 * v2 identity: "Speedo Indigo" deepened into an indigo→violet duotone brand
 * (flat --primary unchanged in value so the existing per-org/per-user runtime
 * override seam — `:root{--primary:...}` injected by the two shells from
 * system_settings.primary_color / users.theme_primary_color — keeps working
 * exactly as before), paired with a refreshed elevation system (tinted,
 * layered shadows instead of flat grey ones) and a true near-black dark
 * surface for a more premium, less "slate-gray-everywhere" dark mode.
 * All v1 token names are kept for backward compatibility — nothing here
 * removes a variable another file already depends on, only adds/refines.
 */

/* الخطوط مُستضافة محليًا بالكامل (fonts/) — لا اتصال بأي خادم خطوط خارجي */
@import url('../fonts/fonts.css');

/*
 * ---------- Responsive breakpoint scale (reference — CSS custom properties
 * can't be used inside @media queries, so every stylesheet must hardcode
 * these exact pixel values instead of inventing new ones) ----------
 *   mobile:  up to 767px   (@media (max-width: 767px))
 *   tablet:  768px–1023px  (@media (min-width: 768px) / (max-width: 1023px))
 *   laptop:  1024px–1439px (@media (min-width: 1024px) / (max-width: 1439px))
 *   desktop: 1440px and up (@media (min-width: 1440px))
 * Admin Workspace is laptop/desktop-first (design for >=1024px, degrade down).
 * Supervisor Workspace is mobile-first (design for <768px, enhance up).
 */

:root {
  /* ---------- Typography ---------- */
  --font-ui: 'Cairo', 'Segoe UI', Tahoma, sans-serif;      /* headings, chrome, body (Arabic-first) */
  --font-num: 'Inter', 'Cairo', sans-serif;                 /* KPI numbers, tabular data, latin digits */

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14.5px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 54px;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---------- Primary — Speedo Indigo (unchanged values: this is the
     runtime branding override seam, --primary gets re-defined inline by
     admin/index.php + workspace/index.php from DB-stored branding) ---------- */
  --indigo-50:  #EEF0FF;
  --indigo-100: #E0E4FF;
  --indigo-200: #C7CCFF;
  --indigo-300: #A5ABFF;
  --indigo-400: #7C7FFB;
  --indigo-500: #4F46E5;
  --indigo-600: #4038CC;
  --indigo-700: #322DA3;
  --indigo-800: #272480;
  --indigo-900: #1D1B61;

  --primary: var(--indigo-500);
  --primary-rgb: 79, 70, 229;
  --primary-hover: var(--indigo-600);
  --primary-active: var(--indigo-700);
  --primary-soft: var(--indigo-50);
  --primary-soft-strong: var(--indigo-100);
  --on-primary: #ffffff;

  /* ---------- Violet — brand gradient partner (new: pairs with --primary in
     avatars, brand mark, verify badge, KPI chips — never used as a flat
     interactive color on its own, so it doesn't need a branding override) ---------- */
  --violet-400: #A78BFA;
  --violet-500: #7C3AED;
  --violet-600: #6D28D9;
  --brand-gradient: linear-gradient(135deg, var(--primary) 0%, var(--violet-500) 100%);
  --brand-gradient-soft: linear-gradient(135deg, var(--primary-soft) 0%, var(--indigo-100) 100%);

  /* ---------- Signature Glow — 3-stop variant of --brand-gradient with a cyan
     lift, reserved for "alive" moments (login hero orb, KPI ring pulse, page
     loading bar) rather than everyday surfaces — extends the existing
     indigo→violet identity instead of introducing a new palette. ---------- */
  --glow-cyan: #22D3EE;
  --brand-glow: linear-gradient(135deg, var(--primary) 0%, var(--violet-500) 55%, var(--glow-cyan) 100%);

  /* ---------- Accent — Signal Teal (live / positive / online) ---------- */
  --teal-50:  #ECFDFB;
  --teal-400: #2DD4C7;
  --teal-500: #0EA5A0;
  --teal-600: #0B8480;

  --accent: var(--teal-500);
  --accent-soft: var(--teal-50);

  /* ---------- Neutrals (cool slate) ---------- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ---------- Semantic surfaces (Light) ---------- */
  --bg: var(--slate-50);
  --bg-canvas: #EEF1F6;
  --surface: #FFFFFF;
  --surface-2: var(--slate-100);
  --surface-hover: var(--slate-100);
  --surface-glass: rgba(255,255,255,.72);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-900);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-400);

  /* ---------- Universal state colors ---------- */
  --success: #10B981;
  --success-soft: #ECFDF5;
  --warning: #F59E0B;
  --warning-soft: #FFFBEB;
  --danger: #EF4444;
  --danger-soft: #FEF2F2;
  --info: #0284C7;
  --info-soft: #F0F9FF;
  --neutral: var(--slate-400);
  --neutral-soft: var(--slate-100);

  /* ---------- Workflow phase-family colors ---------- */
  /* Recruitment phase (blue family) */
  --phase-recruitment: #3B82F6;
  --phase-recruitment-deep: #0284C7;
  --phase-recruitment-soft: #EFF6FF;
  /* Onboarding phase (amber family) */
  --phase-onboarding: #F59E0B;
  --phase-onboarding-deep: #EA580C;
  --phase-onboarding-soft: #FFFBEB;
  /* Operations phase (emerald / slate / rose family) */
  --phase-operations: #10B981;
  --phase-operations-suspended: var(--slate-500);
  --phase-operations-withdrawn: #E11D48;
  --phase-operations-soft: #ECFDF5;

  /* ---------- Shadows (tinted, layered — replaces flat grey shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(30,41,82,.05);
  --shadow-sm: 0 1px 3px rgba(30,41,82,.07), 0 1px 2px rgba(30,41,82,.05);
  --shadow-md: 0 6px 16px rgba(30,41,82,.08), 0 2px 6px rgba(30,41,82,.05);
  --shadow-lg: 0 16px 40px rgba(30,41,82,.12), 0 4px 12px rgba(30,41,82,.06);
  --shadow-xl: 0 28px 64px rgba(30,41,82,.16), 0 8px 20px rgba(30,41,82,.08);
  --shadow-focus: 0 0 0 3px var(--primary-soft-strong);
  --shadow-brand: 0 8px 20px -6px rgba(79,70,229,.45);

  /* ---------- Elevation surfaces (new: premium bento/card language) ---------- */
  --elevation-border: 1px solid rgba(15,23,42,.06);
  --elevation-inset-highlight: inset 0 1px 0 rgba(255,255,255,.6);
}

[data-theme="dark"] {
  /* True near-black surfaces (Linear/Vercel-style) instead of flat slate-900,
     for a more premium dark mode with more separation between surface layers. */
  --bg: #0A0E17;
  --bg-canvas: #05070D;
  --surface: #12161F;
  --surface-2: #191E2A;
  --surface-hover: #1F2531;
  --surface-glass: rgba(18,22,31,.72);
  --border: #232938;
  --border-strong: #303749;
  --text: #F1F5F9;
  --text-muted: #94A3B8;
  --text-faint: #5B6478;

  --primary: var(--indigo-400);
  --primary-rgb: 124, 127, 251;
  --primary-hover: var(--indigo-300);
  --primary-active: var(--indigo-200);
  --primary-soft: #1D2040;
  --primary-soft-strong: #262B52;

  --violet-400: #C4B5FD;
  --brand-gradient: linear-gradient(135deg, var(--primary) 0%, var(--violet-400) 100%);
  --brand-gradient-soft: linear-gradient(135deg, var(--primary-soft) 0%, #262B52 100%);
  --glow-cyan: #67E8F9;
  --brand-glow: linear-gradient(135deg, var(--primary) 0%, var(--violet-400) 55%, var(--glow-cyan) 100%);

  --accent: var(--teal-400);
  --accent-soft: #0E2C29;

  --success-soft: #0B2A22;
  --warning-soft: #2E2409;
  --danger-soft: #2E1315;
  --info-soft: #0C2434;
  --neutral-soft: #1F2531;

  --phase-recruitment-soft: #12233F;
  --phase-onboarding-soft: #2E2409;
  --phase-operations-soft: #0B2A22;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 5px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.40);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.50);
  --shadow-xl: 0 32px 72px rgba(0,0,0,.55);
  --shadow-focus: 0 0 0 3px var(--primary-soft-strong);
  --shadow-brand: 0 8px 24px -6px rgba(124,127,251,.5);

  --elevation-border: 1px solid rgba(255,255,255,.06);
  --elevation-inset-highlight: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- Base reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Off-canvas panels (sidebar drawers, slide-in overlays) use position:fixed +
   transform to sit outside the viewport — some engines still count that
   untransformed layout box toward the document's scrollable width, causing
   phantom horizontal scroll. This is the standard safe guard against it. */
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg-canvas);
  color: var(--text);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font-family: inherit; }
/* حجم افتراضي آمن لأي <svg> من Icons::svg() غير موضوع داخل عنصر بصنف
   يحدّد له مقاسًا صريحًا (مثل .job-card-stat-chip svg) — بدونه تُعرَض
   الأيقونة بحجمها الداخلي الافتراضي للمتصفح (~300px). لا يؤثر على أي
   أيقونة مقاسة بالفعل لأن قواعدها الأكثر تحديدًا (class svg) تتغلّب على
   هذه القاعدة العامة الأقل تحديدًا تلقائيًا. */
svg { display: block; width: 1em; height: 1em; }

/* ---------- Custom interactive chrome (non-native clickable elements) ----------
   .nav-item, .ws-conv-item, .filter-chip, .ld-tab etc. are div/span elements
   acting as buttons/tabs, not native <button>s — without this they highlight
   text on click/drag and show a text-select cursor, which is the fastest
   visual tell of an unfinished/static prototype rather than a real app
   shell. Native form controls and genuinely selectable content (message
   text, table data) are excluded on purpose. Extend this list whenever a
   new custom clickable element is introduced. */
.nav-item, .sidebar-footer, .ws-rail-btn, .ws-rail-avatar,
.ws-conv-item, .filter-chip, .ld-tab, .wf-collapsed, .kpi-card,
.card-interactive, .funnel-cell, .pagination button,
.btn, button, .tab, .settings-nav-item, .conv-item, .bt-item,
.help-card, .batch-card, .supervisor-row, .faq-q,
label.btn, .my-color-swatch, .cmd-item, .drill-tab, .icon-btn,
.context-menu-item, .quick-action-item, .stat-drill-trigger,
[role="button"], [role="tab"] {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.badge, .avatar, .wf-delay-pill, .verify-badge {
  user-select: none;
  -webkit-user-select: none;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::selection { background: var(--primary-soft-strong); }

/* ---------- Universal keyboard focus ring ----------
   Covers every interactive element, including span/div-based chips and tabs
   that carry a manual tabindex — box-shadow automatically follows whatever
   border-radius the element already has, so this never needs per-shape tuning. */
[tabindex]:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- Motion: respect user preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Touch devices: prevent accidental text selection ----------
   على الموبايل، لمس أي عنصر واجهة (عنوان، تسمية، بطاقة، شارة، خلية جدول)
   كان يُبرز تحديد النص فورًا كما لو أن التطبيق موقع ويب وليس تطبيقًا
   احترافيًا. نمنع التحديد افتراضيًا على كل هياكل الواجهة، ثم نعيد تفعيله
   صراحةً فقط على المحتوى الحقيقي القابل للنسخ (نص الرسائل، الملاحظات،
   الأرقام/الهاتف، خلايا بيانات الجدول) — يبقى الضغط المطول يعمل بشكل طبيعي
   على هذا المحتوى لأن user-select:none لم يُطبَّق عليه إطلاقًا. يقتصر هذا
   على أجهزة اللمس الفعلية (hover:none) دون التأثير على تجربة سطح المكتب. */
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .chat-bubble, .ws-bubble, .note-item, .lead-initial-note p,
  .data-table tbody td, .num, input, textarea, select,
  [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}