/* ==== from index.html <style id="respLayout"> (v435 split) ==== */
/* ============================================================
   تخطيط متجاوب (UI/Layout فقط — بلا أي منطق/دوال/مفاتيح).
   نقاط الكسر: <768 جوال (كما هو) · 768–1199 لوحي · ≥1200 سطح مكتب (Sidebar).
   على المكتب يتحوّل شريط #tabs إلى Sidebar جانبي يعيد استخدام أزرار data-page نفسها.
   ============================================================ */
.side-brand{display:none}
/* ============================================================
   المرحلة 3 — الهيكل الملاحي التكيّفي (Adaptive Nav Shell) · Layout فقط
   <768 جوال: شريط سفلي زجاجي + safe-area · ≥768: Sidebar جانبي (يمين RTL) بعرض 250px برموز --ds-*
   ============================================================ */
/* الجوال (<768): تحسين الشريط السفلي — زجاج برموز الـDesign System + safe-area (المعرّفات/onclick/data-perm بلا مساس) */
@media(max-width:767.98px){
  #tabs{background:color-mix(in srgb, var(--ds-surface) 84%, transparent);
        -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
        padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}
/* ≥768: تحويل #tabs إلى Sidebar جانبي ثابت + إزاحة المحتوى */
@media(min-width:768px){
  body{padding-right:250px}
  #navxBar{display:none}
  #tabs{position:fixed;top:0;bottom:0;right:0;left:auto;width:250px;z-index:60;flex-direction:column;align-items:stretch;
        overflow-y:auto;overflow-x:hidden;border-top:none;border-bottom:none;border-left:1px solid var(--ds-border);box-shadow:none;
        background:var(--ds-surface);padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px))}
  #tabs .tabs-inner{flex-direction:column;align-items:stretch;max-width:none;width:100%;gap:6px}
  #tabs .tab{flex:0 0 auto;width:100%;flex-direction:row;justify-content:flex-start;gap:12px;padding:13px 16px;font-size:.95rem;border-radius:var(--ds-radius-md);color:var(--txt-soft)}
  #tabs .tab svg{width:20px;height:20px;margin-bottom:0}
  #tabs .tab .tab-ar{flex-direction:row;gap:12px;justify-content:flex-start;align-items:center}
  #tabs .tab .tab-ar svg{width:20px;height:20px;flex:0 0 auto}
  .side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;margin-bottom:10px;border-bottom:1px solid var(--ds-border)}
  .side-brand .side-logo{width:38px;height:38px;border-radius:var(--ds-radius-md);background:var(--ds-primary-soft);color:var(--ds-primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .side-brand .side-logo svg{width:20px;height:20px}
  .side-brand .side-name{font-weight:800;font-size:1.02rem;color:var(--ds-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #appHeader .hd-brand{display:none}
  #appHeader .hd-mini{opacity:1;visibility:visible;pointer-events:auto}
  .savebar{right:250px}
  /* الحاويات: أوسع + مركزية + شبكة الإعدادات عمودين */
  .topbar{max-width:1180px;margin-left:auto;margin-right:auto}
  main{max-width:1180px;margin-left:auto;margin-right:auto;padding:20px 24px 48px}
  .hm-wrap{max-width:none}
  .set-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
}
/* سطح المكتب الواسع: حاوية أوسع + شبكات صفحات التجميع (محتوى الصفحات — كما كان) */
@media(min-width:1200px){
  .topbar{max-width:1220px}
  main{max-width:1220px;padding:24px 32px 64px}
  .set-groups{grid-template-columns:repeat(2,1fr)}
  #page-archive.active{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
  #page-daily.active{display:block;max-width:820px;margin-left:auto;margin-right:auto}
}
/* شاشات واسعة جدًا */
@media(min-width:1500px){
  .topbar{max-width:1360px}
  main{max-width:1360px}
}
/* ============================================================
   POS / Kiosk Mode — مُجهّز فقط (CSS جاهز)، غير مُطبّق على <body> الآن.
   عند إضافة class="pos-mode" على <body> مستقبلًا: يُخفى الهيدر/التنقّل وتأخذ مساحة العمل كامل الشاشة.
   ============================================================ */
body.pos-mode>.topbar, body.pos-mode #appHeader, body.pos-mode #tabs, body.pos-mode #navxBar, body.pos-mode .gs-bar, body.pos-mode .savebar{display:none!important}
body.pos-mode{padding-right:0!important;padding-left:0!important}
body.pos-mode main, body.pos-mode #pos-workspace{width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;padding:0!important;overflow:auto}

/* ============================================================
   Phase 9 — توحيد النظام الطباعي (Global Typography Consolidation)
   طبقة إضافية متأخرة تربط مكوّنات الواجهة برموز الخط الموحّدة + تمنع قص الحروف العربية
   + تضمن أرقامًا Tabular. لا تمسّ أي منطق برمجي ولا مولّدات التقارير/الطباعة (px مضبوطة لـA4).
   ============================================================ */
/* منع القص: ارتفاع سطر مريح للنصوص العربية (الحروف النازلة ج/ح/ع/ي تظهر كاملة) */
#ds-scope, .mdl, .mdl-ov{ line-height:1.6 }
/* العناوين: وزن موحّد (Black) + Cairo + سطر مريح بلا قص */
.card-title, .mdl-head .t, .hm-section-title, .section-h, .hm-ptitle, .period-card-h{
  font-family:'Cairo',sans-serif; font-weight:var(--fw-black); line-height:1.5 }
/* النصوص الفرعية/التسميات/التعليقات: حجم موحّد صغير + وزن متوسط */
.field label, .hm-l, .perf-cap, .ident-lbl, .card-title .pill, .ds-stat-tile .ds-stat-label{
  font-size:var(--fs-small); font-weight:var(--fw-medium); line-height:1.5 }
/* الجداول: رأس موحّد + خلايا بحجم الأساس + أرقام Tabular ومحاذاة عمودية ثابتة */
.ds-table th, .ds-table .ds-th{ font-size:var(--fs-small); font-weight:var(--fw-bold) }
.ds-table td, .ds-table .ds-td{ font-size:var(--fs-base); line-height:1.5; font-variant-numeric:tabular-nums }
/* المدخلات: حجم موحّد (16px يمنع تكبير iOS) + سطر يمنع قص الحروف */
.input, .select, textarea{ font-size:var(--fs-medium); line-height:1.5 }
/* الأزرار: سطر مريح يضمن ظهور الحروف النازلة (ج/ح/ع) دون قص مع بقاء الارتفاع ثابتًا عبر min-height */
.btn, .ds-btn{ line-height:1.5 }
/* الأرقام في كل مكان: ثبات العرض والمحاذاة العمودية الاحترافية */
.num, .ds-num, .hm-v, .perf-pct, .hm-hero-val, .ds-table td, .ds-table .ds-td{ font-variant-numeric:tabular-nums }

/* ============================================================
   Phase 10 — ترقية Premium (SaaS/Fintech) — طبقة إضافية متأخرة، CSS فقط
   لا مساس بـJS/IDs/data-* ولا بألوان الهوية (--ds-primary/-background/-text تُستخدَم لا تُعرّف).
   ============================================================ */
/* ---- 1) البطاقات الذكية (Insights/Alerts/KPI) ---- */
.hm-insight, .notif-item, .an-kpi{
  background:var(--ds-surface); border:1px solid var(--ds-border);
  box-shadow:0 8px 24px rgba(0,0,0,.03); border-radius:16px;
  transition:transform .2s ease, box-shadow .2s ease }
.hm-insight{ padding:14px 16px; gap:12px; border-inline-start:3px solid var(--ic,var(--ds-primary)) }
.an-kpi{ padding:16px; gap:6px; border-inline-start:3px solid var(--ac,var(--ds-primary)) }
.notif-item{ padding:12px 14px; gap:11px; margin-bottom:10px; border-inline-start:3px solid var(--ds-primary); font-size:var(--fs-small) }
.notif-item>svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ds-primary) }
/* أيقونة داخل مربّع زجاجي مدوّر (Squircle) بخلفية شفافة 10% من لون الحالة */
.hm-insight-ic{ width:36px; height:36px; border-radius:12px;
  background:color-mix(in srgb, var(--ic,var(--ds-primary)) 12%, transparent);
  color:var(--ic,var(--ds-primary)) }
.hm-insight-t{ font-size:13px; font-weight:600; color:var(--ds-text); line-height:1.5 }
.an-kpi-t{ font-size:var(--fs-small); font-weight:600; color:var(--ds-muted) }
.an-kpi-v{ font-family:'Cairo',sans-serif; font-weight:800; color:var(--ds-text); font-variant-numeric:tabular-nums; font-size:1.2rem; line-height:1.25 }
.an-kpi-d{ font-size:12px; font-weight:500; color:var(--ds-muted) }
.notif-item .v{ font-weight:800; color:var(--ds-text); font-variant-numeric:tabular-nums }

/* ---- 2) قوائم التصنيف (Leaderboards / Ranking Cards) ---- */
.hm-fam-row, .an-day-row{
  background:var(--ds-surface); border:1px solid var(--ds-border);
  box-shadow:0 8px 24px rgba(0,0,0,.03); border-radius:16px; padding:14px 16px;
  transition:transform .2s ease, box-shadow .2s ease }
.hm-fam-row{ gap:14px }
.hm-fam-rank, .an-day-rank{
  width:30px; height:30px; border-radius:10px; flex:0 0 auto;
  background:var(--ds-primary-soft); color:var(--ds-primary);
  font-family:'Cairo',sans-serif; font-weight:800; font-size:.86rem }
.hm-fam-name{ font-size:.9rem; font-weight:700; color:var(--ds-text) }
.an-day-label{ font-size:.9rem; font-weight:700; color:var(--ds-text) }
.hm-fam-amt, .an-day-total{
  font-family:'Cairo',sans-serif; font-weight:800; color:var(--ds-text);
  font-size:1rem; font-variant-numeric:tabular-nums }
.hm-fam-pct, .an-day-meta{ font-size:12px; font-weight:600; color:var(--ds-muted); font-variant-numeric:tabular-nums }
.an-day-head{ gap:11px; margin-bottom:2px }

/* ---- 3) أشرطة التقدم (Progress Bars) — نحيفة، دائرية بالكامل، زمردية متدرّجة ---- */
.hm-fam-bar, .an-pay-bar, .an-day-bar{
  height:8px; border-radius:999px; background:var(--ds-surface-3); overflow:hidden }
.hm-fam-bar{ height:6px }
.hm-fam-bar>span, .an-pay-bar>span, .an-day-bar>span{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--ds-primary), color-mix(in srgb,var(--ds-primary) 70%, #ffffff));
  transition:width .5s cubic-bezier(.4,0,.2,1) }

/* ---- 4) حاويات التحليلات (Containers) — زوايا 24px + ظل ناعم + تنفّس 24px ---- */
#page-home .card, #page-home .hm-panel, #page-home .exec-card, .an-card{
  border-radius:24px; padding:24px; border:1px solid var(--ds-border); box-shadow:var(--ds-shadow-sm) }
#page-home .card-title svg, .hm-ptitle svg{ width:17px; height:17px }
.hm-ptitle span, .hm-panel .card-title{ font-weight:800 }

/* ---- 5) الأرشيف (arch-day) كبطاقة تصنيف ---- */
.arch-day{ border-radius:16px; padding:14px 16px; border:1px solid var(--ds-border);
  box-shadow:0 8px 24px rgba(0,0,0,.03); background:var(--ds-surface);
  transition:transform .2s ease, box-shadow .2s ease }

/* ---- 6) تفاعلات دقيقة (Micro-interactions) — لمسة ملموسة عند الضغط ---- */
.hm-fam-row:active, .an-day-row:active, .arch-day:active,
.notif-item:active, .an-kpi:active, .hm-insight:active{ transform:scale(.98) }

/* ============================================================
   Phase 11 — إعادة تصميم بطاقات Analytics (Stripe/Linear) — CSS فقط
   لا مساس بأي JS/دوال/بيانات/IDs. تمييز #hmCards (نظرة عامة) عن #hmPerf (مؤشرات الأداء)
   عبر تحديد الحاويات وإعادة ترتيب flex order فقط.
   ============================================================ */
/* ظل ناعم منتشر موحّد لكل بطاقات الإحصاء */
#page-home .hm-stat{ box-shadow:0 12px 32px rgba(0,0,0,.04) }

/* ---- (1) نظرة عامة (#hmCards): عمودي — أيقونة+عنوان أعلى، رقم ضخم أسفل ---- */
#page-home #hmCards .hm-stat{ justify-content:flex-start; gap:6px }
#page-home #hmCards .hm-stat .hm-ic{ order:0; margin-bottom:10px }
#page-home #hmCards .hm-stat .hm-l{ order:1; margin:0; font-size:13px; font-weight:600; color:var(--ds-muted) }
#page-home #hmCards .hm-stat .hm-v{ order:2; margin-top:auto; margin-bottom:0;
  flex-direction:row; align-items:baseline; gap:5px; flex-wrap:wrap; padding-top:10px }
#page-home #hmCards .hm-stat .stat-num{ font-size:clamp(1.25rem,6vw,1.75rem); font-weight:900; line-height:1.15 }
#page-home #hmCards .hm-stat .stat-cur{ margin-top:0; align-self:baseline; font-size:12px }
@media(min-width:768px){ #page-home #hmCards .hm-stat .stat-num{ font-size:clamp(1.5rem,2.6vw,1.9rem) } }

/* ---- (2) مؤشرات الأداء (#hmPerf): بطاقات «رؤى» بخلفية ملوّنة ناعمة حسب الحالة ---- */
#page-home #hmPerf .hm-stat{
  background:color-mix(in srgb, var(--ac,var(--ds-primary)) 5%, var(--ds-surface));
  border:1px solid color-mix(in srgb, var(--ac,var(--ds-primary)) 16%, var(--ds-border));
  border-inline-start:3px solid var(--ac,var(--ds-primary)) }
/* الأيقونة تتبع لون الحالة (بدل الزمردي الموحّد) لتعزيز طابع الـInsight */
#page-home #hmPerf .hm-stat .hm-ic{
  background:color-mix(in srgb, var(--ac,var(--ds-primary)) 15%, transparent);
  color:var(--ac,var(--ds-primary)) }
#page-home #hmPerf .hm-stat .hm-l{ font-size:13px; font-weight:600; color:var(--ds-muted) }

/* ---- (3) النصوص الطويلة (أسماء الأسر): سطران كحدّ أقصى بأناقة ---- */
.hm-stat .stat-txt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:.98rem; line-height:1.4 }

/* ============================================================
   Phase 11b — السجل اليومي كنظام عمليات (Daily Ledger Overhaul) — CSS فقط
   لا مساس بأي منطق/دالة/بيانات/IDs/data-*. توحيد الحقول + بطاقات فاخرة + تباعد مريح.
   ============================================================ */
/* (1) نظام الحقول الموحّد: 48px · Radius 14 · Border 1.5 · 16px (يمنع تكبير iOS)
   بادئة body لرفع الأسبقية فوق قواعد الحقول الأقدم (body .select = 0-1-1) */
body .input, body .select, body textarea.input{ min-height:48px; border-radius:14px; border-width:1.5px; font-size:16px }
/* حالة القفل: بيانات مقروءة بوضوح (surface-3 + نص ثانوي) دون وميض ولا بهتان */
.is-locked, .locked-input, .input:disabled, .select:disabled{
  background-color:var(--ds-surface-3)!important; background-image:none!important;
  color:var(--ds-text-secondary)!important; -webkit-text-fill-color:var(--ds-text-secondary)!important;
  opacity:1!important; border-color:var(--ds-border)!important; cursor:not-allowed }

/* (4) شبكة الأدوات: عمودان جوال · أربعة للمكتب + زر «إضافة يوم» رئيسي بارز */
@media(min-width:768px){ #page-daily .tools-grid{ grid-template-columns:repeat(4,1fr) } }
#page-daily .tool-btn.primary{ background:linear-gradient(135deg,var(--ds-primary),color-mix(in srgb,var(--ds-primary) 80%,#000));
  color:#fff; border-color:transparent; box-shadow:0 10px 24px -10px var(--ds-primary) }
#page-daily .tool-btn.primary svg{ color:#fff }

/* (2) بطاقة اليوم: عرض كامل + تنفّس 24px + مسافات 20px بين الحقول */
#page-daily .day-body{ padding:0 24px 24px }
#page-daily .day-body .grid{ gap:20px }
#page-daily .card{ border-radius:24px }

/* (3) بطاقة الأسرة: Premium — حشو مريح + ظل ناعم + اسم بسطرين */
#page-daily .fam-card{ padding:20px; border-radius:20px; border:1px solid var(--ds-border);
  box-shadow:0 12px 32px rgba(0,0,0,.04); gap:16px }
#page-daily .fam-card-name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; line-height:1.4 }

/* (5) ملخص الأسر: ظاهر دائمًا (إلغاء الطي) + بطاقات «رؤى» بأسلوب v430 */
#page-daily .day-coll.is-coll > [data-fam-summary]{ display:grid!important }
#page-daily .day-coll-h .hm-chev{ display:none }
#page-daily .day-coll-h{ cursor:default }
#page-daily [data-fam-summary] .stat{ background:var(--ds-surface); border:1px solid var(--ds-border);
  border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.03); padding:16px }
#page-daily [data-fam-summary] .stat .s-lbl{ font-size:13px; font-weight:600; color:var(--ds-muted) }
#page-daily [data-fam-summary] .stat .s-val{ font-family:'Cairo',sans-serif; font-weight:800;
  color:var(--ds-text); font-variant-numeric:tabular-nums }
/* ==== from index.html <style> (v435 split) ==== */
/* ===== واضح Design System v2 — المرحلة 2 (wadih-ds2-bind): توكنات مكمّلة + ربط مكوّنات .ds-* القانونية بـ--wd-* =====
   طبقة CSS متأخرة (تفوز بترتيب المصدر بعد كل تعريفات .ds-* ≤ السطر 2291). القواعد تقرأ --wd-* حصرًا (بلا hex لوني).
   لا مساس بأي markup/class/id أو سمات data أو معالجات on ولا أي عنصر خام (button/input/table) ولا أي مكوّن مخصّص.
   الأثر البصري الفعلي: أزرار .ds-btn (≈20) + .ds-card (2) + .ds-input (3). أما .ds-stat-tile/.ds-list-item/.ds-table
   فعدّ استهلاكها في markup = 0 (ربط جاهز بلا أثر). و.ds-badge أُضيفت جاهزة-غير-مطبَّقة (0 مستهلك). */
/* أ) توكنات مكمّلة (تعريفات :root — hex مسموح في التعريف كطبقة v432، الجذور الثلاثة) */
:root{
  --wd-neutral-50:#F1F5F5; --wd-neutral-100:#E6ECF2;
   --wd-neutral-500:#64748B;
  --wd-on-brand:#ffffff;
  --wd-radius-full:999px;
  --wd-fast:var(--wd-dur-fast); --wd-base:var(--wd-dur-base);
  --wd-focus-ring:0 0 0 3px rgba(22,160,133,.15);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --wd-neutral-50:#0c2838; --wd-neutral-100:#1d3a49;
   --wd-neutral-500:#9fb6c4;
  --wd-focus-ring:0 0 0 3px rgba(52,201,169,.22);
}}
[data-theme="dark"]{
  --wd-neutral-50:#0c2838; --wd-neutral-100:#1d3a49;
   --wd-neutral-500:#9fb6c4;
  --wd-focus-ring:0 0 0 3px rgba(52,201,169,.22);
}
/* ب) الأزرار — primary/secondary(=base)/ghost/destructive/icon */
.ds-btn{border-radius:var(--wd-radius-sm);font-weight:var(--wd-fw-semibold);
  transition:background var(--wd-base) var(--wd-ease),transform var(--wd-fast) var(--wd-ease),box-shadow var(--wd-base) var(--wd-ease)}
@media(min-width:768px){ .ds-btn{min-height:40px} }
.ds-btn-primary{background:var(--wd-brand-700);color:var(--wd-on-brand)}
.ds-btn-primary:hover{box-shadow:var(--wd-shadow-brand)}
.ds-btn-ghost{color:var(--wd-brand-700)}
.ds-btn-ghost:hover{background:var(--wd-brand-50)}
.ds-btn-danger{background:var(--wd-destructive);color:var(--wd-on-brand)}
.ds-btn-icon{border-radius:var(--wd-radius-md)}
/* ج) البطاقات والحاويات */
.ds-card{background:var(--wd-surface);border-radius:var(--wd-radius-lg);box-shadow:var(--wd-shadow-sm);padding:var(--wd-sp-5)}
@media(min-width:768px){ .ds-card{padding:var(--wd-sp-6)} }
.ds-stat-tile{background:var(--wd-surface-2);border-radius:var(--wd-radius-md)}
.ds-list-item{background:var(--wd-surface);border-radius:var(--wd-radius-md)}
/* د) الحقول */
.ds-input{border-radius:var(--wd-radius-sm);border-color:var(--wd-border)}
.ds-input:focus{border-color:var(--wd-brand-500);box-shadow:var(--wd-focus-ring)}
/* هـ) الجداول القائمة .ds-table (0 مستهلك في markup — ربط جاهز) */
.ds-table-wrap{border-radius:var(--wd-radius-md)}
.ds-table th,.ds-table .ds-th{background:var(--wd-neutral-50);color:var(--wd-neutral-500);height:44px;font-weight:var(--wd-fw-semibold)}
.ds-table td,.ds-table .ds-td{height:56px;border-bottom:1px solid var(--wd-neutral-100)}
.ds-table tbody tr:hover{background:var(--wd-neutral-50)}
/* و) شارات جاهزة-غير-مطبَّقة (0 مستهلك في markup) */
.ds-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--wd-radius-full);
  padding:2px 10px;font-weight:var(--wd-fw-semibold);font-size:11px;line-height:var(--wd-lh);font-family:var(--wd-font)}
.ds-badge-success{background:var(--wd-success-soft);color:var(--wd-success)}
.ds-badge-warning{background:var(--wd-warning-soft);color:var(--wd-warning)}
.ds-badge-info{background:var(--wd-info-soft);color:var(--wd-info)}
.ds-badge-danger{background:var(--wd-destructive-soft);color:var(--wd-destructive)}
/* م4: رفع خصوصية الشارة لتغلب على .card-title .pill (0,2,0) → (0,3,0). يقرأ --wd-* حصرًا؛ bg/color/margin تبقى من القاعدة القائمة (بلا لون hex). */
.card-title .pill.ds-badge{display:inline-flex;gap:6px;border-radius:var(--wd-radius-full);padding:2px 10px;font-weight:var(--wd-fw-semibold);font-size:11px;line-height:var(--wd-lh);font-family:var(--wd-font)}
