/* =========================================================
   Admin X: نظام التصميم الموحد
   ---------------------------------------------------------
   ينحمل بكل صفحات المنصة بعد ستايل الصفحة نفسها، فيرتب
   الألوان والخطوط والبطاقات والأزرار والحقول والجداول مرة وحدة.
   اللون الرئيسي يجي من --primary-base (العميل يختاره من شكل المنصة).
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap");

:root {
  --primary-base: #0E7C66;
  --primary: var(--primary-base);
  --on-primary: var(--primary-ink, #FFFFFF);
  --primary-soft: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-line: color-mix(in srgb, var(--primary) 30%, transparent);

  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #64748B;
  --line: #E5E7EB;
  --line-2: #EEF0F3;
  --pick: var(--primary-soft);
  --owner: color-mix(in srgb, var(--primary) 12%, var(--surface));

  --danger: #DC2626; --danger-bg: #FEF2F2; --danger-soft: #FEF2F2; --danger-line: #FECACA;
  --gold: #B45309;   --gold-bg: #FFFBEB;  --warn: #B45309; --warn-soft: #FFFBEB; --warn-line: #FDE68A;
  --ok: #15803D;     --ok-soft: #F0FDF4;  --bad: var(--danger);
  --info: #2563EB;   --info-soft: #EFF6FF;
  --violet: #7C3AED; --violet-soft: #F5F3FF;

  --customer: var(--primary); --on-customer: var(--on-primary);
  --note: var(--primary); --note-bg: var(--primary-soft);

  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 8px 24px -6px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.05);
  --shadow-lg: 0 24px 48px -12px rgba(16,24,40,.18);
  --radius: 16px;
  --side-w: 272px;
  --skeleton: #ECEEF2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --primary: color-mix(in oklab, var(--primary-base) 68%, white);
    --on-primary: #06120F;
    --bg: #0A0F14; --surface: #111820; --surface-2: #0E141B;
    --ink: #E8EDF2; --ink-2: #C3CCD6; --muted: #8A97A6; --line: #1F2A35; --line-2: #18222C;
    --danger: #F87171; --danger-bg: #2A1215; --danger-soft: #2A1215; --danger-line: #4C1D22;
    --gold: #FBBF24; --gold-bg: #261C0B; --warn: #FBBF24; --warn-soft: #261C0B; --warn-line: #4A3510;
    --ok: #4ADE80; --ok-soft: #0D2116;
    --info: #60A5FA; --info-soft: #0F1C33;
    --violet: #A78BFA; --violet-soft: #1C1533;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px -6px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.6);
    --skeleton: #1A232D;
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --primary: color-mix(in oklab, var(--primary-base) 68%, white);
  --on-primary: #06120F;
  --bg: #0A0F14; --surface: #111820; --surface-2: #0E141B;
  --ink: #E8EDF2; --ink-2: #C3CCD6; --muted: #8A97A6; --line: #1F2A35; --line-2: #18222C;
  --danger: #F87171; --danger-bg: #2A1215; --danger-soft: #2A1215; --danger-line: #4C1D22;
  --gold: #FBBF24; --gold-bg: #261C0B; --warn: #FBBF24; --warn-soft: #261C0B; --warn-line: #4A3510;
  --ok: #4ADE80; --ok-soft: #0D2116;
  --info: #60A5FA; --info-soft: #0F1C33;
  --violet: #A78BFA; --violet-soft: #1C1533;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.6);
  --skeleton: #1A232D;
  color-scheme: dark;
}
/* لون فاتح كلش (أصفر مثلاً): الكتابة فوك الأزرار تصير غامقة */
:root.ax-light-primary:not([data-mode="dark"]) { --on-primary: #0F172A; }

/* ---------- الأساس ---------- */
html body {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 100% -8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%),
    radial-gradient(800px 420px at 0% -10%, color-mix(in srgb, #6366F1 6%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 961px) { html body { padding-inline-start: var(--side-w); } }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primary) 25%, transparent); }
.num, .money { font-variant-numeric: tabular-nums; }

/* ---------- الشريط العلوي (هيدر كل صفحة) ---------- */
html body > header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  min-height: 64px; padding: 10px 28px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  box-shadow: none;
}
html body > header h1 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
@media (max-width: 960px) { html body > header { padding: 8px 14px; } }

/* ---------- المحتوى ---------- */
.wrap { max-width: 1180px !important; padding: 28px 28px 80px !important; margin-inline: auto; }
@media (max-width: 960px) { .wrap { padding: 18px 14px 80px !important; } }
.muted { color: var(--muted); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px;
}
.card h2 { font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; }

/* أرقام فوك الصفحات (stats) بشكل بطاقات احترافية */
.stats { gap: 12px !important; }
.stat {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 14px !important;
  box-shadow: var(--shadow-sm); padding: 16px 18px !important; transition: box-shadow .18s, transform .18s, border-color .18s;
}
a.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-line) !important; }
.stat b { font-size: 24px !important; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* مربعات الأقسام */
.tile, .feature {
  border-radius: 16px !important; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
a.tile:hover, a.feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-line) !important; }

/* ---------- الأزرار ---------- */
.btn {
  font-family: inherit; font-weight: 600 !important; border-radius: 11px !important;
  min-height: 42px; height: auto !important; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--on-primary); border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.12);
  transition: filter .15s, transform .1s, box-shadow .15s, background .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--primary) 55%, transparent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.ghost {
  background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm);
}
.btn.ghost:hover:not(:disabled) { border-color: var(--primary-line) !important; filter: none; box-shadow: var(--shadow-sm); background: var(--surface-2) !important; }
.btn.danger, .btn.red { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- الحقول ---------- */
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=search], input[type=password], input:not([type]), textarea, select {
  font-family: inherit; color: var(--ink);
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)) !important; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-soft); }
label.field span { font-weight: 500; font-size: 13.5px; }
.msg.ok { color: var(--ok); }
.msg.error { color: var(--danger); }

/* ---------- الجداول ---------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th { font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: start; background: var(--surface-2); padding: 10px 12px; border-bottom: 1px solid var(--line); }
th:first-child { border-start-start-radius: 10px; } th:last-child { border-start-end-radius: 10px; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }

/* ---------- تبويبات وشارات ---------- */
.tabs { gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.tab { border-radius: 9px !important; font-weight: 500; }
.tab[aria-selected="true"], .tab.active, .tab[aria-pressed="true"] { background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm); }
.tag, .count { font-variant-numeric: tabular-nums; }

/* نوافذ الحوار */
dialog { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }

/* شريط التمرير */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }

/* تحميل */
.ax-sk { position: relative; overflow: hidden; background: var(--skeleton) !important; border-color: transparent !important; color: transparent !important; border-radius: 10px; }
.ax-sk * { visibility: hidden; }
.ax-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: ax-shimmer 1.2s infinite; }
@keyframes ax-shimmer { to { transform: translateX(-100%); } }
.ax-fade { animation: ax-fade .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ax-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
a.btn { text-decoration: none; }