/* ==== from index.html <style> (v435 split) ==== */
:root{
  /* ===== هوية «واضح» — Light (كحلي #081F2E · بترولي #0D6E6A · زمردي #16A085 · رمادي #F1F5F9) ===== */
  --bg:#F1F5F9; --bg2:#e2e8f0;
  --card:rgba(255,255,255,0.82); --card-solid:#ffffff;
  --card-border:rgba(255,255,255,0.9);
  --txt:#081F2E; --txt-soft:#334155; --muted:#64748b;
  --brand:#16A085; --brand2:#0D6E6A; --brand-soft:#d6f5ec;
  --accent:#0D6E6A; --accent2:#16A085; --accent-soft:#A7F3D0;
  --gold:#b8860b;
  --ok:#16A085; --ok-soft:#A7F3D0;
  --bad:#c0392b; --bad-soft:#f8e3e0;
  --info:#0D6E6A; --info-soft:#d6f5ec;
  --warn:#c77f17; --warn-soft:#f7ecd6;
  --line:rgba(8,31,46,0.12);
  --shadow:0 10px 30px -14px rgba(8,31,46,0.18);
  --shadow-sm:0 4px 14px -8px rgba(8,31,46,0.12);
  --radius:20px; --radius-sm:14px;
  --bottom-nav-height:66px;   /* ارتفاع شريط التنقّل السفلي (جوال) — مرجع موحّد للمساحة الآمنة */
  --glass-blur:blur(16px) saturate(1.3);
  /* ===== رموز الهوية الموحّدة (Design Tokens) — مرجع واحد لكل الصفحات ===== */

  /* Phase 9 — رموز الخط الموحّدة (Global Typography Tokens) */
  --fs-small:12px; --fs-base:14px; --fs-medium:16px;
   --fw-medium:500; --fw-bold:700; --fw-black:900;


}
/* ===== HIG Design Tokens — المرحلة 1 (طبقة إضافية: مُعرّفة وجاهزة، غير مُطبّقة على عناصر الواجهة الحالية) =====
   لا تستبدل أي متغيّر قائم؛ كلها أسماء جديدة بلا تصادم. لا تأثير بصري على v260 لأن لا عنصر يستخدمها بعد. */
:root{
  /* Spacing — شبكة 8 نقاط (أسماء HIG منفصلة عن --space-N القائمة) */
  --hig-space-1:4px; --hig-space-2:8px; --hig-space-3:16px; --hig-space-4:24px; --hig-space-5:32px;
  /* Border Radius */
  --rad-lg:16px; --rad-md:12px; --rad-sm:8px;
  /* Touch Targets */
  --touch-min:44px;
  /* Typography */
  --hig-font:'Cairo',sans-serif;
  --hig-title1:28px; --hig-title2:22px; --hig-headline:17px; --hig-body:17px; --hig-caption:12px;
  --hig-weight-bold:700; --hig-weight-semibold:600; --hig-weight-regular:400;
  /* Brand (White-Label — افتراضي HIG، غير مُطبّق الآن) */
  --brand-primary:#007AFF; --brand-secondary:#E5F1FF;
  /* System Colors — Light */
   --sys-surface:#FFFFFF; --sys-surface-secondary:#F2F2F7;
  /* Text */
  --text-primary:#000000; --text-secondary:#8E8E93; --text-tertiary:#C7C7CC;
  /* Semantic */
    --semantic-danger:#FF3B30;
  /* Safe Areas */
   --safe-bottom:env(safe-area-inset-bottom,0px);

  /* Animation */
  --hig-ease:cubic-bezier(0.25,0.1,0.25,1); --hig-dur:0.25s;
}
/* Dark Mode — يُعيد تعريف رموز HIG الجديدة فقط (لا يمسّ متغيّرات النظام الحالية ولا يفرض شيئاً على العناصر) */
@media (prefers-color-scheme: dark){
  :root{
     --sys-surface:#1C1C1E; --sys-surface-secondary:#2C2C2E;
    --text-primary:#FFFFFF; --text-secondary:#8E8E93; --text-tertiary:#48484A;
    --brand-secondary:#0A2647;
  }
}
[data-theme="dark"]{
  /* ===== هوية «واضح» — Dark (خلفيات كحلية + زمردي فاتح) ===== */
  --bg:#081F2E; --bg2:#0c2838;
  --card:rgba(15,42,61,0.72); --card-solid:#0f2a3d;
  --card-border:rgba(255,255,255,0.07);
  --txt:#e6f0f4; --txt-soft:#9fb6c4; --muted:#6c8698;
  --brand:#34c9a9; --brand2:#16A085; --brand-soft:#0d3b38;
  --accent:#16A085; --accent2:#34c9a9; --accent-soft:#0d3b38;
  --gold:#e0c04e;
  --ok:#34c9a9; --ok-soft:#0d3b38;
  --bad:#f08070; --bad-soft:#3a1f1f;
  --info:#34c9a9; --info-soft:#0d3b38;
  --warn:#e0b04e; --warn-soft:#352a17;
  --line:rgba(255,255,255,0.09);
  --shadow:0 14px 40px -14px rgba(0,0,0,0.6);
  --shadow-sm:0 6px 18px -8px rgba(0,0,0,0.5);
}
/* ===== واضح Design System v2 — المرحلة 1 (طبقة توكنز إضافية: مُعرّفة وجاهزة، غير مُطبّقة على أي عنصر بعد) =====
   جميع الأسماء بادئة --wd- جديدة بلا تصادم مع أي توكن قائم (--ds-* / --brand / --radius / --info ...).
   لا مستهلك لها الآن ⇒ لا تأثير بصري على v431 (رندر مطابق بايتيًا). تُستهلَك في المراحل اللاحقة. */
:root{
  /* Brand Palette (Light) */
   --wd-brand-700:#0D6E6A; --wd-brand-500:#16A085;  --wd-brand-50:#F1F5F5;

  /* Surfaces / Text (Light) */
   --wd-surface:#ffffff; --wd-surface-2:#F1F5F5;

  --wd-border:rgba(11,31,42,0.10);
  /* Semantic States (Light) */
  --wd-success:#16A085; --wd-success-soft:#E6F7F1;
  --wd-warning:#B7791F; --wd-warning-soft:#FEF6E4;
  --wd-info:#0D6E6A;    --wd-info-soft:#E6F0F0;
  --wd-destructive:#E5484D; --wd-destructive-soft:#FCE9EA;
  /* Charts */
  --wd-chart-1:#0D6E6A; --wd-chart-2:#16A085; --wd-chart-3:#6EE7B7; --wd-chart-4:#0B1F2A; --wd-chart-5:#F4B740; --wd-chart-6:#94A3B8;
  /* Typography — Cairo scale */
  --wd-font:'Cairo',sans-serif;


     --wd-fw-semibold:600;
  --wd-lh:1.6;
  /* Spacing — قاعدة 4px (4,8,12,16,20,24,32,40,48,64) */
      --wd-sp-5:20px;
  --wd-sp-6:24px;
  /* Radius */
   --wd-radius-sm:10px; --wd-radius-md:14px; --wd-radius-lg:20px;
  /* Shadows — brand-tinted */

  --wd-shadow-sm:0 2px 8px rgba(11,31,42,0.08);


  --wd-shadow-brand:0 12px 32px -8px rgba(13,110,106,0.28);
  /* Motion */
  --wd-ease:cubic-bezier(0.22,1,0.36,1);
  --wd-dur-fast:150ms; --wd-dur-base:220ms; --wd-dur-slow:320ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* واضح Design System v2 — Dark (متغيّرات معكوسة) */

     --wd-surface:#0f2a3d; --wd-surface-2:#0c2838;

    --wd-border:rgba(255,255,255,0.09);
    --wd-success:#34c9a9; --wd-success-soft:#0d3b38;
    --wd-warning:#e0b04e; --wd-warning-soft:#352a17;
    --wd-info:#34d6b4;    --wd-info-soft:#0d3b38;
    --wd-destructive:#f08070; --wd-destructive-soft:#3a1f1f;

    --wd-shadow-sm:0 2px 8px rgba(0,0,0,0.45);


    --wd-shadow-brand:0 12px 32px -8px rgba(22,160,133,0.40);
  }
}
[data-theme="dark"]{
  /* واضح Design System v2 — Dark (يدوي عبر [data-theme]) */

   --wd-surface:#0f2a3d; --wd-surface-2:#0c2838;

  --wd-border:rgba(255,255,255,0.09);
  --wd-success:#34c9a9; --wd-success-soft:#0d3b38;
  --wd-warning:#e0b04e; --wd-warning-soft:#352a17;
  --wd-info:#34d6b4;    --wd-info-soft:#0d3b38;
  --wd-destructive:#f08070; --wd-destructive-soft:#3a1f1f;

  --wd-shadow-sm:0 2px 8px rgba(0,0,0,0.45);


  --wd-shadow-brand:0 12px 32px -8px rgba(22,160,133,0.40);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:'Cairo',sans-serif;
  background:
    radial-gradient(1100px 560px at 100% -10%, var(--accent-soft), transparent 58%),
    radial-gradient(900px 500px at -10% 110%, var(--brand-soft), transparent 55%),
    linear-gradient(160deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  color:var(--txt); line-height:1.6; font-size:15px; padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px) + 24px);
  font-variant-numeric:tabular-nums;
  transition:background .4s,color .3s;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";direction:ltr;display:inline-block}
input,select,button,textarea{font-family:inherit;color:inherit;font-size:16px}
input,textarea{font-size:16px!important}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ===== Header ===== */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);max-width:1100px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 10px}
header{position:relative;left:0;right:0;background:var(--card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
body{padding-top:0}
.head-inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.logo{width:62px;height:62px;border-radius:16px;flex-shrink:0;background:#f1f5f9;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);overflow:hidden;padding:5px}
.logo img{width:100%;height:100%;object-fit:contain}
.ident-lbl{display:block;font-size:.8rem;font-weight:700;color:var(--txt-soft);margin-bottom:5px}
.ident-color{width:100%;height:42px;border:1.5px solid var(--line);border-radius:12px;background:var(--card-solid);cursor:pointer;padding:3px}

/* ====================================================================
   إعادة تصميم احترافية لصفحة الإعدادات (نمط iOS) — مع الحفاظ على كل الوظائف
   ==================================================================== */
/* عربية فقط الآن: إخفاء العناوين الإنجليزية مع إبقائها في DOM للمستقبل (i18n) */
.en{display:none !important}

/* داخل الإعدادات والنوافذ: الأخضر للنجاح فقط — الأزرار الأساسية باللون الرئيسي للنظام */
#page-settings .btn-accent,.mdl .btn-accent{background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 8px 20px -8px var(--brand)}
/* توحيد ارتفاع/حواف الأزرار والحقول داخل الإعدادات والنوافذ */
#page-settings .btn,.mdl .btn{min-height:46px;border-radius:14px}
#page-settings .input,.mdl .input{min-height:46px;border-radius:12px}
/* توحيد البطاقات */
#page-settings .card{border-radius:20px;padding:18px;margin-bottom:16px}

/* قفل تمرير الخلفية عند فتح نافذة */
body.modal-open{overflow:hidden}

/* ===== النوافذ المنبثقة الموحّدة: مركزية + خلفية معتمة + Animation ناعم ===== */
.mdl-ov{position:fixed;inset:0;z-index:2147483600;background:rgba(15,25,40,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;font-family:'Cairo',sans-serif;direction:rtl;animation:mdlfade .18s ease}
.mdl{background:var(--card-solid);width:100%;max-width:480px;max-height:88vh;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -18px rgba(15,25,40,.5);animation:mdlpop .22s cubic-bezier(.2,.9,.3,1.15)}
.mdl-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.mdl-head .t{font-weight:900;font-size:1.05rem;color:var(--txt);flex:1;line-height:1.5}
.mdl-x{width:34px;height:34px;border-radius:10px;border:none;background:var(--bg2);color:var(--txt-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s}
.mdl-x:hover{background:var(--line)}
.mdl-x svg{width:18px;height:18px}
.mdl-body{padding:16px 18px;overflow:auto;flex:1}
.mdl-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px}

/* ===== تحسينات صفحة الإعدادات (واجهة فقط) ===== */
#page-settings.active{display:flex;flex-direction:column}
#accountCard{order:0}
#prefsCard{order:0}
#identityCard{order:1}
#usersCard{order:2}
#auditCard{order:3}
#backupCard{order:4}
#savedFamCard{order:5}
#dangerCard{order:7}
/* توحيد أيقونات عناوين البطاقات */
#page-settings .card-title>svg:first-child{width:20px;height:20px;flex:0 0 auto}
/* توحيد الأزرار والأيقونات داخل الإعدادات والنوافذ */
#page-settings .btn,.mdl .btn{min-height:46px;border-radius:14px;font-size:.92rem;font-weight:800}
#page-settings .btn svg,.mdl .btn svg,#page-settings .tool-btn svg{width:17px;height:17px}
#page-settings .input,.mdl .input,.mdl input{min-height:46px;border-radius:12px;box-sizing:border-box}
/* نوافذ منبثقة: توسيط + أمان على الجوال (بلا تداخل أو خروج عن الشاشة) */
.mdl{box-sizing:border-box;max-width:min(94vw,480px)}
.mdl-head,.mdl-body,.mdl-foot{box-sizing:border-box}
.mdl-body *{max-width:100%}
.mdl input,.mdl .input,.mdl button,.mdl .btn,.mdl textarea,.mdl select{box-sizing:border-box;max-width:100%}
.mdl-foot .btn{flex:1}
@media(max-width:480px){ .mdl-ov{padding:12px} .mdl-head{padding:14px 16px} .mdl-body{padding:14px 16px} .mdl-foot{padding:12px 16px;flex-wrap:wrap} }

/* ===== نافذة «حسابي» — أقسام وبطاقات مرتبة ===== */
.acc-hdr{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.acc-sec{font-weight:800;color:var(--txt-soft);font-size:.78rem;letter-spacing:.2px;margin:18px 2px 8px;display:flex;align-items:center;gap:7px}
.acc-sec svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}
.acc-panel{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:2px 14px}
.acc-sk{background:linear-gradient(90deg,var(--bg2),var(--line),var(--bg2));background-size:200% 100%;animation:hmsh 1.2s infinite;border-radius:8px}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.acc-row:last-child{border-bottom:none}
.acc-row .k{color:var(--txt-soft);font-size:.82rem;font-weight:700;flex:0 0 auto}
.acc-row .v{color:var(--txt);font-size:.85rem;font-weight:700;text-align:left;direction:ltr;word-break:break-word;min-width:0}
.acc-actions{display:flex;flex-direction:column;gap:9px}

/* ===== إدارة المستخدمين والصلاحيات ===== */
.um-sec{font-weight:800;color:var(--txt-soft);font-size:.82rem;margin:20px 2px 11px;display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.um-sec.first{border-top:none;padding-top:2px;margin-top:6px}
.um-sec svg{width:17px;height:17px;color:var(--brand);flex:0 0 auto}
.um-toolbar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.um-search{position:relative;display:flex;align-items:center}
.um-search>svg{position:absolute;right:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.um-search input{width:100%;box-sizing:border-box;padding:11px 38px 11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card-solid);color:var(--txt);font-family:inherit;font-size:.9rem;font-weight:600;min-height:46px}
.um-search input:focus{outline:none;border-color:var(--brand)}
.um-filters{display:flex;gap:8px;flex-wrap:wrap}
.um-mini{flex:1 0 auto;min-width:max-content;box-sizing:border-box;padding:11px 14px 11px 38px;border:1px solid var(--line);border-radius:12px;background-color:var(--card-solid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238795a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;color:var(--txt);font-family:inherit;font-size:.82rem;font-weight:700;min-height:46px;appearance:none;-webkit-appearance:none}
.um-mini:focus{outline:none;border-color:var(--brand)}
.rp-tbl{width:100%;border-collapse:collapse;font-size:.72rem;white-space:nowrap}
.rp-tbl th{background:var(--brand-soft,#e6f4ec);color:var(--brand,#1c6b3c);padding:6px 8px;border:1px solid var(--line);text-align:center;font-weight:800;position:sticky;top:0}
.rp-tbl td{padding:5px 8px;border:1px solid var(--line);text-align:center;color:var(--txt-soft,#333)}
.rp-tbl td.rp-nm{text-align:right;font-weight:700;color:var(--txt)}
.rp-tbl tbody tr:nth-child(even){background:var(--hig-inset,rgba(0,0,0,.02))}
.ucard{display:flex;align-items:center;gap:12px;background:var(--card-solid);border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .2s,border-color .2s;animation:ucardIn .25s ease}
.ucard:hover{border-color:var(--brand);box-shadow:0 6px 18px -10px rgba(15,25,40,.3)}
.ucard:active{transform:scale(.99)}
@keyframes ucardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ucard .uinfo{flex:1;min-width:0}
.ucard .chev{color:var(--muted);flex:0 0 auto;width:18px;height:18px}
.um-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 6px}
.um-pager button{border:1px solid var(--line);background:var(--card-solid);color:var(--txt);border-radius:10px;min-width:38px;height:38px;cursor:pointer;font-family:inherit;font-weight:800;display:flex;align-items:center;justify-content:center}
.um-pager button:disabled{opacity:.4;cursor:not-allowed}
.um-pager button svg{width:16px;height:16px}
.um-pager .pg{font-size:.82rem;color:var(--txt-soft);font-weight:700}
.um-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:18px 0}
/* مفاتيح تشغيل (Switch) للصلاحيات */
.perm-sw{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.88rem;color:var(--txt)}
.perm-sw>span.lbl{flex:1;min-width:0}
.perm-sw input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.perm-sw .tk{width:42px;height:25px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:0 0 auto}
.perm-sw .tk::after{content:'';position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:right .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.perm-sw input:checked + .tk{background:var(--brand)}
.perm-sw input:checked + .tk::after{right:20px}
/* بطاقات المجموعات */
.gcard{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:var(--card-solid);box-shadow:var(--shadow-sm);animation:ucardIn .25s ease}
.gcard .gname{font-weight:800;color:var(--txt);font-size:.96rem}
.gcard .gdesc{font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.5}
.gcard .gmeta{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.gcard .gstat{display:flex;align-items:center;gap:5px;font-size:.76rem;color:var(--txt-soft);font-weight:700}
.gcard .gstat svg{width:14px;height:14px;color:var(--brand)}
.gcard .gact{display:flex;gap:10px;margin-top:12px}
/* عدّاد التعديلات في محرّر الصلاحيات */
.perm-count{font-size:.78rem;color:var(--txt-soft);font-weight:700;margin-top:10px;text-align:center}

/* ===== معالج إضافة موظف (Wizard) ===== */
.wz-steps{display:flex;align-items:flex-start;margin-bottom:14px}
.wz-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.wz-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;background:var(--bg2);border:2px solid var(--line);color:var(--muted);transition:background .25s,border-color .25s,color .25s}
.wz-dot.active{background:var(--brand);border-color:var(--brand);color:#fff}
.wz-dot.done{background:var(--ok);border-color:var(--ok);color:#fff}
.wz-dot svg{width:16px;height:16px}
.wz-lbl{font-size:.64rem;font-weight:700;color:var(--muted);white-space:nowrap}
.wz-lbl.on{color:var(--txt)}
.wz-bar{flex:1;height:2px;background:var(--line);margin:14px 3px 0;border-radius:2px;overflow:hidden}
.wz-bar>i{display:block;height:100%;width:100%;background:var(--ok);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.wz-bar.done>i{transform:scaleX(1)}
@keyframes wzIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes wzspin{to{transform:rotate(360deg)}}
.wz-pane{animation:wzIn .25s ease}
.wz-spin{display:inline-block;width:15px;height:15px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:wzspin .7s linear infinite;vertical-align:-2px;margin-left:8px}
.wz-review-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.wz-review-row:last-child{border-bottom:none}
.wz-review-row .k{color:var(--txt-soft);font-size:.82rem;font-weight:700;flex:0 0 auto}
.wz-review-row .v{color:var(--txt);font-size:.85rem;font-weight:700;text-align:left;word-break:break-word;min-width:0}
@keyframes mdlfade{from{opacity:0}to{opacity:1}}
@keyframes mdlpop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ===== بطاقة المستخدم: Avatar + اسم + بريد + Badges + قائمة (...) ===== */
.urow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;background:var(--card-solid)}
.uavatar{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.uinfo{flex:1;min-width:0}
.uname{font-weight:800;color:var(--txt);font-size:.96rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umail{font-size:.76rem;color:var(--muted);direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ubadges{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.ubadge{font-size:.68rem;font-weight:800;padding:2px 9px;border-radius:999px;line-height:1.6}
.ubadge-admin{background:var(--brand-soft);color:var(--brand)}
.ubadge-emp{background:var(--bg);color:var(--txt-soft)}
.ubadge-on{background:var(--ok-soft);color:var(--ok)}
.ubadge-off{background:var(--bad-soft);color:var(--bad)}
.umenu-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--card-solid);color:var(--txt-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.umenu-btn svg{width:18px;height:18px}

/* ===== قائمة منسدلة (popover) موحّدة ===== */
.pop-menu{position:fixed;z-index:100001;background:var(--card-solid);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px -10px rgba(15,25,40,.4);padding:6px;min-width:215px;max-width:84vw;direction:rtl;animation:mdlpop .16s ease}
.pop-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pop-head .nm{font-weight:900;color:var(--txt);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-head .em{font-size:.73rem;color:var(--muted);direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:transparent;border-radius:10px;cursor:pointer;font-family:inherit;font-size:.88rem;font-weight:700;color:var(--txt);text-align:right}
.pop-item:hover{background:var(--bg2)}
.pop-item svg{width:17px;height:17px;color:var(--txt-soft);flex:0 0 auto}
.pop-item.danger{color:var(--bad)}
.pop-item.danger svg{color:var(--bad)}
.pop-sep{height:1px;background:var(--line);margin:5px 8px}

/* ===== سجل النشاط — Timeline حديث ===== */
.tl{position:relative}
.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-line{position:absolute;top:36px;bottom:0;inset-inline-start:17px;width:2px;background:var(--line)}
.tl-item:last-child .tl-line{display:none}
.tl-icon{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);z-index:1}
.tl-icon svg{width:17px;height:17px}
.tl-icon.ok{background:var(--ok-soft);color:var(--ok)}
.tl-icon.bad{background:var(--bad-soft);color:var(--bad)}
.tl-c{flex:1;min-width:0;padding-top:3px}
.tl-action{font-weight:800;color:var(--txt);font-size:.9rem;line-height:1.4}
.tl-who{font-size:.8rem;color:var(--txt-soft);word-break:break-word;overflow-wrap:anywhere}
.tl-meta{font-size:.72rem;color:var(--muted);margin-top:3px;line-height:1.55;word-break:break-word;overflow-wrap:anywhere}
/* طي/فتح البطاقات (الرئيسية + سجل النشاط) + مؤشر تحديث */
.hm-ptitle.hm-coll{cursor:pointer;user-select:none}
.hm-chev{margin-inline-start:auto;flex:0 0 auto;transition:transform .25s ease}
.hm-panel.is-coll .hm-chev{transform:rotate(180deg)}
.hm-panel.is-coll>div:not(.hm-ptitle){display:none}
.hm-panel.is-coll>.hm-ptitle{margin-bottom:0}
.cc-chev{flex:0 0 auto;cursor:pointer;transition:transform .25s ease}
#auditCard.is-coll .cc-chev{transform:rotate(180deg)}
#auditCard.is-coll>:not(.card-title){display:none}
/* أقسام السجل اليومي القابلة للطيّ (عرض فقط — ملخص الأسر / الضريبة) */
.day-coll-h{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px}
.day-coll-h .hm-chev{margin-inline-start:auto;flex:0 0 auto;transition:transform .25s ease}
.day-coll.is-coll .day-coll-h .hm-chev{transform:rotate(180deg)}
.day-coll.is-coll>*:not(.day-coll-h){display:none}
/* مجموعات الإعدادات (بأسلوب iOS المجمّع — تنظيم واجهة فقط، البطاقات تُنقل كما هي) */
.set-groups{display:flex;flex-direction:column;gap:18px}
.set-group{border:1px solid var(--line);border-radius:22px;background:var(--card-solid);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px -18px rgba(0,0,0,.22)}
.set-group-h{display:flex;align-items:center;gap:13px;width:100%;padding:16px 18px;background:transparent;border:none;cursor:pointer;font-family:inherit;color:var(--txt);text-align:start;transition:background .15s ease}
.set-group-h:active{background:var(--brand-soft);background:color-mix(in srgb,var(--txt) 5%,transparent)}
.set-group-ic{width:36px;height:36px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.set-group-emoji{font-size:1.15rem;flex:0 0 auto;line-height:1}
.set-group-tw{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.set-group-t{font-weight:800;font-size:1.02rem;letter-spacing:-.2px}
.set-group-desc{font-size:.76rem;color:var(--muted);font-weight:600;line-height:1.35}
.set-group-chev{width:19px;height:19px;color:var(--muted);flex:0 0 auto;transition:transform .25s ease}
.set-group.is-coll .set-group-chev{transform:rotate(-90deg)}
.set-group-body{padding:2px 16px 18px;display:flex;flex-direction:column;gap:14px}
.set-group.is-coll .set-group-body{display:none}
#page-settings .set-group-body>.card{box-shadow:none;border:none;margin:0}
.set-group-danger{border-color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.set-group-danger .set-group-ic{background:var(--bad-soft);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.set-group-danger .set-group-t{color:var(--bad)}
.au-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;animation:auSpin .7s linear infinite;vertical-align:-2px;margin-inline-end:6px}
@keyframes auSpin{to{transform:rotate(360deg)}}
.head-titles{flex:1;min-width:0;text-align:center}
.head-titles h1{font-family:'Cairo';font-size:1.3rem;font-weight:900;letter-spacing:-.3px;line-height:1.35}
.head-titles .sub{font-size:.74rem;color:var(--txt-soft);font-weight:600;margin-top:14px;line-height:1.5}
.head-controls{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:130px}
.theme-btn{width:100%;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--card-solid);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform .2s;flex-shrink:0}
.theme-btn:active{transform:scale(.95)}
.theme-btn svg{width:22px;height:22px;color:var(--gold)}
#saveDot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:14px;background:#e9f5d8;border:1px solid #cfe6ae;font-size:.82rem;font-weight:800;white-space:nowrap;width:100%;box-sizing:border-box;transition:background .2s,border-color .2s}
#saveDot .sd-dot{width:9px;height:9px;border-radius:50%;background:#5a9216;flex-shrink:0;transition:background .2s}
#saveDot .sd-txt{color:var(--ok);transition:color .2s}
#saveDot.saving .sd-dot{animation:sdpulse .8s ease-in-out infinite}
@keyframes sdpulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:480px){.head-controls{width:108px;gap:6px}#saveDot{padding:7px 8px;font-size:.72rem}.theme-btn{height:38px}}

/* ===== Tabs ===== */
.tabs{position:relative;left:0;right:0;z-index:40;padding:10px 16px 10px;display:flex;gap:8px;background:var(--card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs-inner{max-width:1100px;margin:0 auto;display:flex;gap:8px;width:100%;min-width:0}
.tab{flex:1 1 0;min-width:0;padding:9px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);cursor:pointer;font-weight:700;font-size:.9rem;color:var(--txt-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap;transition:all .25s}
.tab svg{width:18px;height:18px;flex-shrink:0;margin-bottom:1px}
.tab-ar{display:flex;align-items:center;gap:6px;justify-content:center}
.tab svg{width:18px;height:18px;flex-shrink:0}
.tab svg{width:18px;height:18px}
.tab.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px var(--brand)}
.tab:not(.active):active{transform:scale(.96)}

main{max-width:1100px;margin:0 auto;padding:16px}
.page{display:none;animation:fade .35s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{background:var(--card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card-title{font-family:'Cairo';font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:9px;margin-bottom:16px;line-height:1.7;color:var(--brand)}
.card-title svg{width:21px;height:21px;color:var(--brand)}
.card-title .pill{margin-inline-start:auto;font-size:.72rem;font-weight:700;background:var(--brand-soft);color:var(--brand);padding:4px 11px;border-radius:20px}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.g2{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px}
/* Branch "total" uses the exact same .field/.input as kash/network/transfer.
   Only color differs — never size, padding, font, or alignment. */
.branch-total-input{color:var(--info);font-weight:800;cursor:default}
.field label{font-size:.82rem;font-weight:700;color:var(--txt-soft);display:flex;align-items:center;gap:6px;line-height:1.7;padding-top:1px}
.field label svg{width:15px;height:15px;color:var(--muted)}
.field .req{color:var(--bad)}
.input[type="date"]{position:relative;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%237aa617' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;padding-left:14px;font-weight:700;color:var(--txt);box-sizing:border-box;min-height:48px;height:48px;line-height:46px;text-align:right;direction:rtl;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum"}
/* iOS Safari: an EMPTY date input collapses (no value text to fill it). Lock its box so
   it keeps the exact same width/height/padding whether empty or filled. */
.mini .input[type="date"]{min-height:44px;height:44px}
.input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0;direction:ltr;display:inline-block;width:100%}
/* Placeholder overlay for empty date fields (iOS can't show custom date placeholders). */
.date-wrap{position:relative;width:100%}
/* عرض موحّد YYYY-MM-DD فوق حقل التاريخ — يخفي عرض المتصفح المشوّش */
.date-wrap .date-val{position:absolute;right:44px;top:50%;transform:translateY(-50%);direction:ltr;font-weight:700;color:var(--txt);font-size:16px;pointer-events:none;white-space:nowrap;letter-spacing:.3px}
.date-wrap input[type="date"].has-dval::-webkit-date-and-time-value{color:transparent}
.date-wrap input[type="date"].has-dval{color:transparent}
.date-wrap .date-ph{position:absolute;right:44px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;font-size:15px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 58px)}
.date-wrap .input.has-value~.date-ph{display:none}
.date-wrap .input:focus~.date-ph{display:none}
/* When empty (not has-value) and not focused, hide the native mm/dd/yyyy text so only our placeholder shows */
.date-wrap .input[type="date"]:not(.has-value):not(:focus){color:transparent}
.date-wrap .input[type="date"]:not(.has-value):not(:focus)::-webkit-date-and-time-value{color:transparent}
.input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.input,.select{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card-solid);font-size:16px;font-weight:600;transition:border .2s,box-shadow .2s;outline:none;text-align:right;direction:rtl;line-height:1.6}
input.num,.input.num{text-align:right;direction:rtl}
.input:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.select,select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238795a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;padding-left:38px}
/* Selects used as .input in settings/add forms must match the text inputs above them
   (name/phone) in height/padding exactly — native select rendering otherwise differs. */
select.input{height:auto;line-height:1.4;box-sizing:border-box}
/* Locked rent-type field: must match a normal .select box EXACTLY (same height/width),
   just gray with a small inset lock icon. We mirror the .select metrics and use line-height:1
   plus a fixed 16px icon so the flex row never grows taller than a normal field. */
/* Locked rent type uses the SAME .select element (same class, size, padding, font).
   The only changes are a neutral gray fill + a lock glyph overlaid absolutely.
   Nothing here alters height/width/padding/line-height of the select. */
.rent-wrap{position:relative;width:100%}
.rent-placeholder{width:100%;padding:9px 11px;border-radius:11px;border:1.5px solid var(--line);background:#f1f3f5;color:#8795a3;font-size:16px;font-weight:600;min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.select.is-locked{background-color:#f1f3f5;background-image:none;color:#6b7480;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#6b7480}
.rent-lock-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:#8795a3;pointer-events:none}
.rent-lock-ic svg{width:14px;height:14px;display:block}
/* محرّر العقد (المرحلة 2) — إضافي */
.ct-tbtn{flex:1;padding:10px 6px;border:1.5px solid var(--line);border-radius:11px;background:var(--card-solid);color:var(--txt);font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ct-tbtn.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}
.ct-fld{margin-bottom:12px}
.ct-fld>label{font-size:.8rem;font-weight:700;display:block;margin-bottom:6px;color:var(--txt)}
.ct-radio{display:flex;flex-direction:column;gap:8px}
.ct-radio>label{display:flex;align-items:flex-start;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;font-size:.83rem;font-weight:600;color:var(--txt)}
.ct-radio input{margin-top:2px;flex:0 0 auto}
.ct-note{font-size:.78rem;color:#1565c0;background:var(--brand-soft);border-radius:9px;padding:9px 11px;margin-top:4px;line-height:1.6;font-weight:600}
.trial-badge{margin-top:4px;font-size:.7rem;font-weight:700;color:#1565c0;background:#e3f0fb;border:1px solid #bcdcf5;border-radius:6px;padding:3px 8px;display:inline-block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:none;border-radius:var(--radius-sm);padding:12px 18px;font-weight:800;font-size:.92rem;transition:transform .15s,box-shadow .2s,filter .2s}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 20px -8px var(--accent)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 20px -8px var(--accent)}
.btn-ghost{background:var(--card-solid);border:1.5px solid var(--line);color:var(--txt)}
.btn-block{width:100%}
.btn-sm{padding:9px 13px;font-size:.85rem}

/* ===== Branch field with + ===== */
.branch-row{display:flex;gap:8px;align-items:stretch}
.branch-row .select{flex:1}
.branch-row .add-btn{flex:0 0 48px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.branch-row .add-btn svg{width:22px;height:22px}
.branch-row .add-btn:active{transform:scale(.92)}

/* ===== Month picker card ===== */
.month-card{background:var(--card-solid);border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.month-year{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;background:var(--brand-soft);font-family:'Cairo';font-weight:800}
.month-year button{width:34px;height:34px;border-radius:10px;border:none;background:var(--card-solid);color:var(--brand);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.month-year button svg{width:18px;height:18px}
.month-year .yr{font-size:1.3rem;color:var(--brand);min-width:70px;text-align:center}
.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}
.m-opt{position:relative;padding:9px 6px;border-radius:11px;border:1.5px solid var(--line);background:var(--card-solid);cursor:pointer;font-weight:700;font-size:.82rem;text-align:center;transition:all .15s;display:flex;flex-direction:column;gap:1px;align-items:center}
.m-opt .m-dot{position:absolute;top:5px;left:6px;width:7px;height:7px;border-radius:50%;background:#5a9216;box-shadow:0 0 0 2px var(--card-solid)}
.m-opt.active .m-dot{background:#fff;box-shadow:0 0 0 2px var(--brand)}
.m-opt .mn{font-size:.68rem;color:var(--muted)}
.m-opt.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}
.m-opt.active .mn{color:rgba(255,255,255,.85)}
.m-opt:not(.active):active{transform:scale(.95)}

/* ===== Month dropdown ===== */
.dropdown{position:relative}
.dd-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card-solid);font-weight:800;font-family:'Cairo';font-size:.95rem;color:var(--txt);cursor:pointer}
.dd-toggle .dd-chev{width:20px;height:20px;color:var(--brand);transition:transform .25s}
.dropdown.open .dd-toggle .dd-chev{transform:rotate(180deg)}
.dropdown.open .dd-toggle{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.dd-panel{display:none;margin-top:8px;border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--card-solid);box-shadow:var(--shadow-sm)}
.dropdown.open .dd-panel{display:block;animation:fade .2s ease}

/* ===== Tools grid ===== */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tool-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;min-height:54px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card-solid);color:var(--txt);font-weight:800;font-size:.88rem;line-height:1.25;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .2s;box-sizing:border-box}
.tool-btn svg{width:18px;height:18px;flex-shrink:0}
.tool-btn:active{transform:scale(.96)}
.tool-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px var(--accent)}
.tool-btn.danger{color:var(--bad);border-color:var(--bad-soft);background:var(--bad-soft)}
/* زر عائم ممتد: إضافة يوم (وصول سريع أثناء التمرير على الجوال) */
.fab{position:fixed;left:18px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:55;height:52px;padding:0 20px 0 18px;border-radius:26px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 26px -8px var(--accent),0 4px 10px -4px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px;font-family:'Cairo',sans-serif;font-weight:800;font-size:.92rem;cursor:pointer;transition:transform .15s,box-shadow .2s,opacity .2s;animation:fabIn .3s cubic-bezier(.2,.9,.3,1.2)}
.fab svg{width:22px;height:22px;flex:0 0 auto}
.fab span{white-space:nowrap}
.fab:active{transform:scale(.95)}
.fab.kbd-hide{opacity:0;transform:translateY(20px) scale(.9);pointer-events:none}
body.modal-open .fab{display:none}
@keyframes fabIn{from{opacity:0;transform:scale(.6) translateY(12px)}to{opacity:1;transform:none}}
#page-daily{padding-bottom:0}
/* الأرشيف: شبكة أمان تمنع أي جدول من تجاوز عرض الشاشة (التمرير الأفقي داخل الحاوية فقط، بلا تمرير أفقي للصفحة) */
#page-archive #stmtBody,#page-archive #actBody,#page-archive #prodRepBody,#page-archive #collMgrBody,#page-archive #archiveDays,#page-archive #dashTop,#page-archive #dashTopRent{overflow-x:auto;-webkit-overflow-scrolling:touch}
#page-archive #stmtBody table,#page-archive #actBody table,#page-archive #prodRepBody table,#page-archive #collMgrBody table{max-width:100%}
/* تنبيهات ذكية للإدخال غير المنطقي (واجهة فقط — لا تغيّر القيمة ولا الحساب) */
.num-warn{border-color:var(--bad)!important;background:#fff6f5!important}
.field-warn{font-size:.72rem;color:var(--bad);font-weight:700;margin-top:5px;display:flex;align-items:center;gap:5px;animation:fade .2s}
/* مركز الإشعارات */
.bell-btn{position:relative;width:40px;height:40px;border-radius:12px;background:var(--card-solid);color:var(--txt);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s}
.bell-btn:active{transform:scale(.92)}
.bell-btn svg{width:20px;height:20px}
.bell-badge{pointer-events:none;position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1}
.bell-badge.hidden{display:none}
.notif-sec{font-weight:800;font-size:.84rem;color:var(--txt);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.notif-sec:first-child{margin-top:2px}
.notif-sec svg{width:17px;height:17px;flex:0 0 auto}
.notif-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;margin-bottom:7px;font-size:.85rem;color:var(--txt-soft)}
.notif-item .v{margin-inline-start:auto;font-weight:800;color:var(--txt);white-space:nowrap}
.notif-ok{text-align:center;color:var(--ok);font-weight:700;padding:22px 0;font-size:.92rem}
.notif-ok svg{width:42px;height:42px;display:block;margin:0 auto 10px}

/* ===== Day cards (collapsible) ===== */
.day{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .2s}
.day.open{box-shadow:var(--shadow)}
.day-head{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;user-select:none;transition:background .2s}
.day.open .day-head{background:var(--brand-soft);border-bottom:1px solid var(--line)}
.day-head:active{background:var(--brand-soft)}
.day-num{width:36px;height:36px;flex-shrink:0;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Cairo';font-weight:900;font-size:1rem}
.day-title{flex:1;min-width:0;font-family:'Cairo';font-weight:800;font-size:1rem;line-height:1.2;text-align:right;overflow:hidden}
.day-title .dt-sub{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-top:3px;white-space:nowrap;direction:ltr;text-align:right;unicode-bidi:plaintext;overflow:visible}
.day-badge{display:flex;flex-direction:column;align-items:flex-end;font-size:.7rem;color:var(--muted);font-weight:700;white-space:nowrap}
.stmt-sel-wrap{position:relative;width:100%}
.stmt-sel-wrap .select{width:100%;padding-left:64px}
.stmt-clear{position:absolute;left:38px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;border-radius:50%;background:#eef1f4;color:#7a8794;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.stmt-clear svg{width:15px;height:15px;pointer-events:none}
.stmt-clear:active{background:#e0e4e8}
.day-badge .db-lbl{display:inline-flex;align-items:center;gap:4px;line-height:1}
.day-badge .db-lock{width:13px;height:13px;flex:0 0 auto;vertical-align:middle}
.day .day-badge .db-lock[data-lucide="lock"]{color:#c0392b}
.day .day-badge .db-lock[data-lucide="lock-open"]{color:#5a9216}
.day-badge b{font-family:'Cairo';font-size:.95rem;color:var(--txt)}
.day-chev{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--brand);transition:transform .3s}
.day.open .day-chev{transform:rotate(180deg)}
.day-chev svg{width:22px;height:22px}
@keyframes dayBodyIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.day-body{display:none;padding:0 16px 18px}
.day-locked-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.78rem;font-weight:800;background:var(--bad-soft);color:var(--bad);padding:0 14px;border-radius:12px;height:38px;box-sizing:border-box;line-height:1}
.day-locked-badge svg{width:16px;height:16px;flex:0 0 auto}
.locked-input{opacity:.55;cursor:not-allowed!important;background:var(--bg)!important}
.day-lock-controls{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.day-lock-controls .btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;font-size:.78rem;font-weight:800;border-radius:12px;box-sizing:border-box;line-height:1;white-space:nowrap}
.day-lock-controls .btn-sm svg{width:16px;height:16px;flex:0 0 auto}
.day.open .day-body{display:block;animation:dayBodyIn .26s ease}
.section-h{font-family:'Cairo';font-weight:800;font-size:.92rem;margin:18px 0 11px;display:flex;align-items:center;gap:8px;color:var(--brand)}
.section-h svg{width:18px;height:18px;color:var(--brand)}

/* ===== Family cards ===== */
.fam{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;margin-bottom:11px;position:relative;transition:border .2s}
[data-theme="dark"] .fam{background:rgba(255,255,255,0.03)}
.fam.left{border-inline-start:4px solid var(--muted);opacity:.92}
.fam.paid{border-inline-start:4px solid var(--ok)}
.fam.unpaid{border-inline-start:4px solid var(--bad)}
.fam-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.fam-no{width:30px;height:30px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0}
.fam-head-actions{margin-inline-start:auto;display:flex;align-items:center;gap:7px;flex-shrink:0}
.fam-select-row{margin-bottom:11px}
.fam-search-results{display:none;position:relative;background:var(--card-solid);border:1.5px solid var(--line);border-radius:11px;margin-bottom:8px;max-height:240px;overflow:auto;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.fam-search-results.show{display:block}
.fsr-item{padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line);font-weight:600;text-align:right}
.fsr-item:last-child{border-bottom:none}
.fsr-item:active,.fsr-item:hover{background:var(--brand-soft)}
.fsr-empty{padding:11px 14px;color:var(--muted);text-align:center;font-size:.82rem}
.fam-select-row .select{width:100%}
.name-x{position:static;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bad-soft);color:var(--bad);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0}
.name-x svg{width:16px;height:16px}
.name-x:active{transform:scale(.9)}
.fam-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.fam-row.three{grid-template-columns:1fr 1fr}
.mini{display:flex;flex-direction:column;gap:4px}
.mini label{font-size:.72rem;font-weight:700;color:var(--muted)}
.mini label svg,.fam .fc svg,.fam-row label svg{width:14px;height:14px;vertical-align:-2px;margin-inline-end:3px;flex:0 0 auto}
.fam-status-active{border-inline-start:3px solid #5a9216!important}
.fam-status-left{border-inline-start:3px solid #c0392b!important}
.mini .input,.mini .select{padding:9px 11px;font-size:16px;border-radius:11px}
.mini .select{padding-left:30px;background-position:left 8px center}
.fam-calc{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.fc{background:var(--card-solid);border-radius:10px;padding:7px 9px;display:flex;flex-direction:column;gap:1px}
.fc .lbl{font-size:.67rem;color:var(--muted);font-weight:700}
.fc .val{font-size:.9rem;font-weight:800}
.fc.net .val{color:var(--accent)}
.fc.month .val{color:var(--info)}
.fc.due .val{color:var(--warn)}
.fc.remain .val{color:var(--bad)}
.pay-btn{width:100%;margin-top:9px;border:none;border-radius:11px;padding:9px;font-weight:800;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .15s}
.pay-btn svg{width:16px;height:16px}
.pay-btn:active{transform:scale(.97)}
.pay-btn.paid{background:var(--ok-soft);color:var(--ok)}
.pay-btn.unpaid{background:var(--bad-soft);color:var(--bad)}
.left-badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;background:var(--bad-soft);color:var(--bad);padding:4px 10px;border-radius:20px;margin-top:8px}
.fam-collapse{background:var(--bg);border:1px solid var(--line);border-radius:8px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand);flex:0 0 auto;padding:0}
.fam-wa-sq{background:#25d366;border:1px solid #1da851;border-radius:8px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;flex:0 0 auto;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fam-wa-sq:active{transform:scale(.9)}
.fam-wa-sq svg{width:17px;height:17px;pointer-events:none}
.fam-collapse svg{width:16px;height:16px}
.fam-collapsed-summary{display:none;flex-wrap:wrap;gap:10px 16px;padding:8px 2px 2px;font-size:.8rem}
.fam-collapsed-summary .fcs-lbl{color:var(--muted);font-size:.72rem}
.fam.collapsed .fam-details{display:none}
.prod-gap{display:flex;align-items:center;gap:6px;background:#fbe3df;color:#c0392b;border-radius:9px;padding:8px 11px;margin-top:10px;font-size:.78rem;font-weight:700}
.prod-gap svg{width:15px;height:15px;flex:0 0 auto}
.prod-ok{display:flex;align-items:center;gap:6px;background:var(--ok-soft);color:var(--ok);border-radius:9px;padding:8px 11px;margin-top:10px;font-size:.78rem;font-weight:700}
.prod-ok svg{width:15px;height:15px;flex:0 0 auto}
.prod-manage-btn svg{width:16px;height:16px}
.dp-manual-tag{display:inline-flex;align-items:center;gap:3px;background:#fff3e0;color:#e65100;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:20px}
.dp-err{font-size:.66rem;color:#c0392b;margin-top:3px;min-height:0;display:none;font-weight:700}
.dp-err.show{display:block}
.dp-in.invalid{border-color:#e53935!important;box-shadow:0 0 0 2px rgba(229,57,53,.18)!important}
@keyframes dpShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.dp-in.shake{animation:dpShake .35s}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;background:#25d366;color:#fff;border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wa-btn:active{transform:scale(.92)}
.wa-btn.wa-sm{width:26px;height:26px}
.dp-manual-tag svg{width:11px;height:11px}
/* iOS: prevent the Cut/Copy/Paste selection menu appearing on long-press of buttons/cards */
#dayProdOverlay .dp-card,#dayProdOverlay .dp-head,#dayProdOverlay .dp-mini-summary,#dayProdOverlay label,#dayProdOverlay .dp-manual-detail{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
#dayProdOverlay .dp-edit-carry,#dayProdOverlay .dp-toggle{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  pointer-events:auto;position:relative;z-index:5;flex:0 0 auto;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#dayProdOverlay .dp-edit-carry svg,#dayProdOverlay .dp-toggle svg{pointer-events:none}
/* editable number inputs keep normal selection */
#dayProdOverlay input.dp-in{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
.fam.collapsed .fam-select-row{display:none}
.fam.collapsed .fam-collapsed-summary{display:flex}
.left-badge svg{width:14px;height:14px}

/* ===== Stat cards ===== */
.stat{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:4px;background:var(--brand)}
.stat.a::before{background:var(--accent)}.stat.i::before{background:var(--info)}.stat.g::before{background:var(--gold)}.stat.k::before{background:var(--ok)}.stat.w::before{background:var(--warn)}.stat.r::before{background:var(--bad)}
.stat .s-lbl{font-size:.75rem;color:var(--txt-soft);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:6px;line-height:1.6}
.stat .s-lbl svg{width:15px;height:15px;opacity:.7}
.stat .s-val{font-family:'Cairo';font-size:1.15rem;font-weight:800}
.stat .s-val small{font-size:.6em;color:var(--muted);font-weight:700}

.result-card{border-radius:var(--radius-sm);padding:13px;text-align:center;font-weight:800}
.result-card .rc-lbl{font-size:.8rem;opacity:.85;margin-bottom:4px}
.result-card .rc-val{font-family:'Cairo';font-size:1.3rem}
.rc-bad{background:var(--bad-soft);color:var(--bad)}
.rc-ok{background:var(--ok-soft);color:var(--ok)}
.rc-info{background:var(--info-soft);color:var(--info)}

/* ===== Cash moves ===== */
.move{display:flex;align-items:center;gap:10px;padding:11px;border-radius:11px;background:var(--card-solid);border:1px solid var(--line);margin-bottom:8px}
.move .m-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.move .m-ico svg{width:18px;height:18px}
.move.add .m-ico{background:var(--ok-soft);color:var(--ok)}
.move.withdraw .m-ico{background:var(--bad-soft);color:var(--bad)}
.move .m-info{flex:1;min-width:0}
.move .m-info .t{font-weight:800;font-size:.9rem}
.move .m-info .n{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-edit .m-info .n{white-space:normal;overflow:visible;text-overflow:clip}
.move .m-amt{font-weight:800;font-family:'Cairo'}
.move.add .m-amt{color:var(--ok)}.move.withdraw .m-amt{color:var(--bad)}
.move.edit-zero .m-ico{background:#e3f2fd;color:#1565c0}.move.edit-zero .m-amt{color:#1565c0}

/* ===== Archive ===== */
.arch-day{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:var(--radius-sm);background:var(--card-solid);border:1px solid var(--line);margin-bottom:9px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .15s}
.arch-day:active{transform:scale(.99)}
.arch-day .ad-ico{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800}
.arch-day .ad-info{flex:1;min-width:0}
.arch-day .ad-info .t{font-weight:800;font-size:.92rem}
.arch-day .ad-info .s{font-size:.78rem;color:var(--muted)}
.arch-day .ad-act{display:flex;gap:6px}
.icon-btn{width:34px;height:34px;border-radius:10px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:16px;height:16px}
.icon-btn.edit{background:var(--info-soft);color:var(--info)}
.icon-btn.del{background:var(--bad-soft);color:var(--bad)}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
/* ترجمة مساعدة إنجليزية صغيرة أسفل العنصر العربي — لا تؤثر على حجم الحقول */
.en{display:block;font-size:.68rem;font-weight:500;color:var(--brand);opacity:.82;line-height:1.05;margin-top:0;letter-spacing:.1px;font-family:'Cairo',sans-serif}
.btn .en{color:inherit;opacity:.85;font-weight:500;font-size:.62rem;width:100%;text-align:center;margin-top:0}
.btn{flex-wrap:wrap}
label .en,.field label .en,.mini label .en{font-size:.66rem;margin-top:0;font-weight:500;color:var(--brand);opacity:.82}
.card-title .en,.section-h .en{font-size:.66rem;font-weight:500;color:var(--brand);opacity:.8}
.row-flex{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row-flex .field{flex:1;min-width:140px}

/* ===== Toast / Savebar / Modal ===== */
#toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--txt);color:var(--bg);padding:12px 22px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .3s;z-index:2147483647;display:flex;align-items:center;gap:8px;font-size:.9rem;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast svg{width:18px;height:18px;flex-shrink:0}

.savebar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid var(--line);padding:12px 16px;box-shadow:0 -8px 24px -12px rgba(0,0,0,.2)}
.savebar-inner{max-width:1100px;margin:0 auto;display:flex;gap:10px;align-items:center}
.savebar .save-info{font-size:.78rem;color:var(--txt-soft);font-weight:600;flex:1}
.savebar .save-info b{color:var(--txt)}

#modalOverlay{position:fixed;inset:0;z-index:100002;background:rgba(15,26,38,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
#modalOverlay.show{display:flex;animation:fade .2s ease}
.modal{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:380px;padding:22px;animation:popIn .25s ease}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.modal h3{font-family:'Cairo';font-size:1.1rem;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:9px;color:var(--brand)}
.modal h3 svg{width:22px;height:22px;color:var(--brand)}
.modal p{font-size:.85rem;color:var(--txt-soft);margin-bottom:14px}
.modal .input{margin-bottom:16px}
#modalInput{padding:14px 16px;min-height:50px;line-height:1.6;text-align:right;direction:rtl}
.modal-actions{display:flex;gap:10px}
.modal-actions .btn{flex:1}
#modalOk.danger{background:linear-gradient(135deg,var(--bad),#d9685c);box-shadow:0 8px 20px -8px var(--bad)}

/* ===== Print ===== */
#pdfArea{position:fixed;left:-9999px;top:0;width:794px;background:#fff;color:#1c2333;padding:30px;font-family:'Cairo',sans-serif;direction:rtl}
#printHost{position:fixed;inset:0;z-index:400;background:#fff;overflow:auto;padding:16px;direction:rtl}
.print-toolbar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;padding:10px 8px 16px;background:#fff;max-width:100%;box-sizing:border-box}
.print-toolbar .btn{position:relative;z-index:11;flex:0 0 auto;white-space:nowrap}
.print-toolbar .btn svg{flex:0 0 auto}
.print-sheet{max-width:794px;margin:0 auto;background:#fff;color:#1c2333;padding:20px;border:1px solid #eee;border-radius:8px}
body.printing>.topbar,body.printing>header,body.printing>nav,body.printing>main,body.printing>.savebar{display:none!important}

/* each report page is a clean white block (used by jsPDF capture, one A4 page each) */
.rep-page{background:#fff;padding:14px 16px;box-sizing:border-box}
.rep-page+.rep-page{margin-top:18px}
/* standalone summary page: fill the landscape height, distribute content (avoid big whitespace) */
#printHost.landscape .rep-summary-fill{min-height:715px;display:flex;flex-direction:column}
.rep-summary-fill .summary-flex{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px}
@media print{ .rep-page{padding:0;margin:0!important} .rep-page+.rep-page{margin-top:0!important} #printHost.landscape .rep-summary-fill{min-height:0} .tbl-page{justify-content:flex-start} }

/* ===== Landscape PREVIEW on screen only ===== */
@media screen{
  #printHost.landscape{overflow:auto}
  #printHost.landscape .print-sheet{width:1040px;max-width:1040px;min-width:1040px;margin:0 auto}
}
/* On narrow screens: scroll horizontally instead of scaling (keeps toolbar tappable) */
@media screen and (max-width:1080px){
  #printHost.landscape{overflow:auto;-webkit-overflow-scrolling:touch}
}

/* ===== PRINT: fill the whole landscape page, no scaling, no fixed widths ===== */
@media print{
  @page{size:A4 landscape;margin:6mm}
  html,body{width:auto!important;height:auto!important;background:#fff!important;padding:0!important;margin:0!important;overflow:visible!important}
  body *{visibility:hidden!important}
  #printHost,#printHost *{visibility:visible!important}
  #printHost,#printHost.landscape{
    position:static!important;inset:auto!important;
    padding:0!important;margin:0!important;background:#fff;
    overflow:visible!important;width:auto!important;height:auto!important;min-height:0!important
  }
  .print-toolbar,.noprint{display:none!important}
  #printHost .print-sheet,#printHost.landscape .print-sheet{
    position:static!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:auto!important;min-height:0!important;
    margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;
    transform:none!important;zoom:1!important;scale:1!important;-webkit-transform:none!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  #printHost .print-sheet table{width:100%!important;max-width:none!important;table-layout:fixed!important}
  #printHost .print-sheet thead{display:table-header-group}
  /* A report page may legitimately span >1 sheet (long family table). Do NOT force the
     whole .rep-page onto one sheet — that is what created huge gaps / extra pages. */
  #printHost .print-sheet .rep-page+.rep-page{break-before:page;page-break-before:always}
  /* let big tables flow across sheets, repeating the header row each page */
  #printHost .print-sheet table{break-inside:auto;page-break-inside:auto}
  #printHost .print-sheet tfoot{display:table-footer-group}
  /* only keep individual rows/cells from splitting mid-row */
  #printHost .print-sheet tr,#printHost .print-sheet td,#printHost .print-sheet th{break-inside:avoid;page-break-inside:avoid}
  /* keep each summary card intact, but allow the grid itself to wrap onto the next page */
  #printHost .print-sheet [style*="grid-template-columns"]>div{break-inside:avoid;page-break-inside:avoid}
  #printHost .print-sheet img{break-inside:avoid}
  /* small sections (e.g. cash-moves) must keep their heading + table together */
  #printHost .print-sheet .no-break-block,
  #printHost .print-sheet .no-break-block table,
  #printHost .print-sheet .no-break-block thead,
  #printHost .print-sheet .no-break-block tbody{break-inside:avoid!important;page-break-inside:avoid!important}
  /* fit content to A4 width: never overflow the printable area */
  #printHost .print-sheet,#printHost .print-sheet *{max-width:100%!important}
  /* ---- legibility on paper: keep borders & a readable font size ---- */
  #printHost .print-sheet table{border-collapse:collapse!important}
  #printHost .print-sheet th,#printHost .print-sheet td{
    border:1px solid #444!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important
  }
  #printHost .print-sheet th{background:#e8eef7!important;color:#1c2333!important;font-weight:800!important}
  /* portrait (daily) keeps its own compact sizing; only enlarge landscape for clarity */
  #printHost.landscape .print-sheet td,#printHost.landscape .print-sheet th{font-size:9pt!important;line-height:1.25!important}
  /* the landscape (monthly) sheet: render at full natural width then let the printer
     scale it down to one page instead of clipping columns */
  #printHost.landscape .print-sheet{width:1040px!important;max-width:1040px!important;min-width:1040px!important}
  #printHost.landscape .print-sheet *{max-width:none!important}
}

/* ===== Mobile performance: drop costly effects on small screens ===== */
@media screen and (max-width:760px){
  body{background-attachment:scroll!important}
  header,.tabs,.tab,.card,.savebar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  header,.tabs{background:var(--card-solid,var(--card))!important}
  .card{background:var(--card-solid,var(--card))!important}
  /* استثناء واضح: شريط التنقّل السفلي يبقى زجاجيًا (Glassmorphism) — عنصر واحد صغير، أثر أداء ضئيل */
  @supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
    #tabs{background:color-mix(in srgb,var(--card-solid) 76%,transparent)!important;backdrop-filter:blur(22px) saturate(180%)!important;-webkit-backdrop-filter:blur(22px) saturate(180%)!important}
  }
}
/* ===== Mobile layout (<900px): prevent horizontal scroll, smart compact sizing ===== */
@media screen and (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden!important}
  main,.page,.card{max-width:100%;box-sizing:border-box}
  .card{padding-left:14px;padding-right:14px}
  /* keep all in-app data tables fluid and readable without horizontal scroll */
  .fam-grid,.day-fields{min-width:0!important}
  .grid.g3{grid-template-columns:repeat(2,1fr)!important}
  /* slightly smaller numeric/labels but still clear */
  .s-val{font-size:1rem!important}
  .stat{padding:10px!important}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* ===== Add-family bottom sheet ===== */
.sheet-overlay{position:fixed;inset:0;z-index:100002;background:rgba(15,26,38,.5);display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px);padding:20px}
.sheet-overlay.show{display:flex;animation:fadeIn .2s ease}
.sheet{background:var(--card-solid);width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;animation:sheetUp .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet-handle{width:42px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet-title{font-size:1.2rem;font-weight:800;color:var(--brand)}
.opt-card{display:flex;align-items:center;gap:14px;width:100%;text-align:right;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;transition:transform .12s,border-color .2s,box-shadow .2s}
.opt-card:active{transform:scale(.98)}
.opt-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.opt-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 50px}
.opt-ic svg{width:24px;height:24px}
.opt-txt{flex:1;min-width:0}
.opt-t{font-size:1rem;font-weight:800;color:var(--txt)}
.opt-d{font-size:.8rem;color:var(--txt-soft);margin-top:2px;line-height:1.4}
.opt-arrow{width:20px;height:20px;color:var(--txt-soft);flex:0 0 20px}
.sheet-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--brand);font-weight:700;cursor:pointer;margin-bottom:12px;font-size:.95rem}
.del-fam-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#fdecea;color:#c0392b;font-size:.62rem;font-weight:800;vertical-align:middle;cursor:help;line-height:1}
/* النص المساعد داخل الحقل يبقى ظاهراً عند التركيز ولا يختفي إلا عند بدء الكتابة (قيمة فعلية).
   opacity:1 يضمن وضوحه على أندرويد/Firefox، واللون متوافق مع الوضعين الفاتح والداكن. */
.input::placeholder,.select::placeholder{color:var(--muted);opacity:.9}
/* استثناء واحد: حقل البحث عن الأسرة يخفي عبارته فور التركيز (يُدار عبر JS أيضاً) */
.fam-search:focus::placeholder{color:transparent}
.input-bad{border-color:#c0392b!important;background:#fdecea!important;box-shadow:0 0 0 2px rgba(192,57,43,.15)!important}
.dash-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:.9rem;font-weight:800;color:var(--brand)}
.dash-list-head svg{width:16px;height:16px;vertical-align:-3px}
.dash-viewall{background:none;border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-size:.74rem;font-weight:700;color:var(--brand);cursor:pointer}
.dash-viewall:active{background:var(--brand-soft)}
.dash-modal-list .move{margin-bottom:6px}
.dash-overlay{position:fixed;inset:0;background:rgba(20,30,25,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px}
.dash-modal{background:var(--card-solid,#fff);border-radius:18px;width:100%;max-width:460px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.dash-modal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dash-modal-title{font-size:1rem;font-weight:800;color:var(--brand);display:flex;align-items:center;gap:7px}
.dash-modal-title svg{width:18px;height:18px}
.dash-modal-close{background:#fdecea;border:none;border-radius:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#c0392b;cursor:pointer}
.dash-modal-close svg{width:18px;height:18px;pointer-events:none}
.dash-modal-body{padding:14px 16px;overflow-y:auto}
.coll-txn-list{display:flex;flex-direction:column;gap:8px}
.coll-txn{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--card-solid,#fff);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ct-main{flex:1;min-width:0}
.ct-name{font-weight:800;font-size:.95rem;color:var(--txt)}
.ct-meta{font-size:.74rem;color:var(--txt-soft);margin-top:2px}
.ct-kind{font-size:.74rem;color:var(--brand);font-weight:700;margin-top:2px}
.ct-date{font-size:.66rem;color:var(--muted);margin-top:2px}
.ct-undo{flex:0 0 auto;background:#fdecea;color:#c0392b;font-weight:800;font-size:.78rem;padding:8px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:5px}
.ct-undo svg{width:15px;height:15px}

/* =====================================================================
   RESPONSIVE ENHANCEMENTS — DESKTOP & iPad ONLY (min-width ≥ 768px).
   Nothing here affects phones (<768px); the mobile design stays 100% as-is.
   ===================================================================== */

/* ---- iPad portrait & up (≥768px): restore full multi-column grids ---- */
@media (min-width:768px){
  /* the global max-width:760px rule collapsed g4→2col / g3→2col; on a tablet
     there is room for the full layout, so put them back. */
  .g4{grid-template-columns:repeat(4,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
  /* any on-screen table container can scroll horizontally instead of overflowing */
  .tools-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---- Tablet / desktop (≥1024px): center modal sheets instead of bottom-stuck ---- */
@media (min-width:1024px){
  /* bottom-sheet overlays look odd pinned to the bottom on a tall screen;
     center them and round all corners. Targets the CSS-class overlay and the
     inline-styled overlays that use flex-end alignment. */
  .sheet-overlay{align-items:center}
  .sheet{max-width:600px;border-radius:22px;max-height:90vh}
  /* slightly roomier forms inside a family card on wide screens */
  .fam-calc{grid-template-columns:repeat(3,1fr)}
}

/* ---- Large desktop (≥1440px): keep content readable, don't over-stretch ---- */
@media (min-width:1440px){
  /* main already caps at 1100px (intentional for a finance ledger); leave it. */
  .tools-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---- Safety: never allow horizontal overflow of the page on any size ---- */
@media (min-width:768px){
  html,body{overflow-x:hidden}
}