/* ============================================================
   هوية meem — البنفسجي 5E17EB على محايدات مائلة للبنفسج
   الشريط الجانبي أسود الهوية في النسختين (بيت الشعار الأبيض)
   ============================================================ */
:root{
  /* النسخة البيضاء (الافتراضية) */
  --bg:#F7F6FB; --surface:#FFFFFF; --ink:#1B1626; --muted:#6E6880;
  --accent:#5E17EB; --accent-soft:#EFE9FD; --neg:#C24052; --neg-soft:#FAEAED;
  --warn:#96660F; --warn-soft:#FFF3DC;
  --line:#E9E6F2; --radius:16px;
  --side-bg:#131019; --side-ink:#F1EEF8; --side-muted:#948DA6; --side-hover:rgba(255,255,255,.07);
  --shadow-sm:0 1px 2px rgba(35,20,70,.05);
  --shadow-md:0 1px 2px rgba(35,20,70,.05),0 12px 28px -20px rgba(35,20,70,.3);
  --shadow-lg:0 18px 50px -18px rgba(35,20,70,.35);
  --row-hover:rgba(94,23,235,.035);
  --focus-ring:rgba(94,23,235,.14);
  --logo-light:none; --logo-dark:block;

  /* منحنيات الحركة | هادئة ومتدرجة لا مفاجئة */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-spring:cubic-bezier(.34,1.24,.5,1);
  --t-fast:.18s; --t-mid:.28s; --t-slow:.42s;
  --t-page:.52s; --t-pill:.46s;
  font-size:15px;
  color-scheme:light;
}

/* ============================================================
   النسخة الليلية | نفس هوية meem ببنفسجي أفتح على عتمة بنفسجية
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#0F0C15; --surface:#171320; --ink:#EEEAF6; --muted:#9A93AB;
  --accent:#8A63F2; --accent-soft:#251A3F; --neg:#E27C8A; --neg-soft:#3A2028;
  --warn:#D9A441; --warn-soft:#332811;
  --line:#272134;
  --side-bg:#0B0910; --side-ink:#F1EEF8; --side-muted:#7D7591; --side-hover:rgba(255,255,255,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 1px 2px rgba(0,0,0,.45),0 10px 26px -18px rgba(0,0,0,.7);
  --shadow-lg:0 18px 50px -18px rgba(0,0,0,.8);
  --row-hover:rgba(138,99,242,.08);
  --focus-ring:rgba(138,99,242,.25);
  --logo-light:block; --logo-dark:none;
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
/* ملاحظة: لا نضع انتقال CSS على خلفية/لون الجسم | تشغيله مع انتقال العرض
   على نفس الخصائص يعلّق الحركة ويجمّد اللون. نعومة التبديل من انتقال العرض */
/* قبل التحقق من الجلسة: لا تُرسم واجهة النظام إطلاقاً (تمنع وميض الصفحة قبل التحويل للدخول) */
body.pre-auth{visibility:hidden}
body{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh;
}
h1,h2,h3,.display{font-family:"Alexandria",sans-serif}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* تبديل شعار شاشة الدخول حسب النسخة (بأولوية تغلب قاعدة .login-card .logo) */
.logo-light,.login-card .logo.logo-light{display:var(--logo-light)}
.logo-dark,.login-card .logo.logo-dark{display:var(--logo-dark)}

/* أثناء تبديل النسخة: نوقف انتقالات CSS ونلغي أسماء مجموعات انتقال الصفحة
   حتى تتم العملية كتلاشٍ واحد نظيف بدل تعارض حركتين على نفس الخصائص */
:root.theme-swap *,
:root.theme-swap *::before,
:root.theme-swap *::after{ transition:none !important }
:root.theme-swap aside,
:root.theme-swap main,
:root.theme-swap nav a.active{ view-transition-name:none !important }

/* ============================================================
   الانتقال بين الصفحات — انسياب هادئ بدل القطع المفاجئ
   القائمة الجانبية تثبت مكانها والمحتوى وحده ينساب
   ============================================================ */
@view-transition{ navigation:auto }

@media (prefers-reduced-motion:no-preference){
  aside{ view-transition-name:sidebar }
  main{ view-transition-name:page }
  /* المؤشر الأخضر ينزلق بين بنود القائمة | اللمسة الأبرز */
  nav a.active{ view-transition-name:nav-pill }

  ::view-transition-old(page){ animation:pageOut var(--t-mid) cubic-bezier(.4,0,1,1) both }
  ::view-transition-new(page){ animation:pageIn var(--t-page) var(--ease-out) both }
  /* تداخل الحركتين بدل تتابعهما | إحساس حركة واحدة متصلة */
  ::view-transition-image-pair(page){ isolation:auto }
  ::view-transition-group(page){ animation-duration:var(--t-page) }

  /* القائمة الجانبية تثبت مكانها تماماً */
  ::view-transition-old(sidebar),
  ::view-transition-new(sidebar){ animation:none; mix-blend-mode:normal }

  /* انزلاق المؤشر بمنحنى مرن */
  ::view-transition-group(nav-pill){
    animation-duration:var(--t-pill);
    animation-timing-function:var(--ease-spring);
  }
  ::view-transition-old(nav-pill),
  ::view-transition-new(nav-pill){ animation:none; height:100% }

  ::view-transition-old(root){ animation-duration:var(--t-mid) }
  ::view-transition-new(root){ animation-duration:var(--t-page) }
}

/* الاتجاه RTL: الجديد يدخل من اليسار والقديم ينسحب لليمين */
@keyframes pageIn{
  from{ opacity:0; transform:translate3d(-24px,7px,0) scale(.987) }
  to{ opacity:1; transform:none }
}
@keyframes pageOut{
  from{ opacity:1; transform:none }
  to{ opacity:0; transform:translate3d(16px,0,0) scale(.994) }
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes cascade{
  from{ opacity:0; transform:translate3d(0,16px,0) }
  to{ opacity:1; transform:none }
}

/* تسلسل ظهور أقسام الصفحة | عمق بدل ظهور دفعة واحدة */
@media (prefers-reduced-motion:no-preference){
  main > .topbar{ animation:cascade var(--t-mid) var(--ease-out) both; animation-delay:.03s }
  main > .ledger,
  main > .stats{ animation:cascade var(--t-slow) var(--ease-out) both; animation-delay:.09s }
  main > .card{ animation:cascade var(--t-slow) var(--ease-out) both; animation-delay:.14s }
  main > .card ~ .card{ animation-delay:.2s }
  main > .grid{ animation:cascade var(--t-slow) var(--ease-out) both; animation-delay:.17s }
}

/* بديل للمتصفحات التي لا تدعم انتقال الصفحات */
@media (prefers-reduced-motion:no-preference){
  main{ animation:pageIn var(--t-page) var(--ease-out) both }
}
@supports (view-transition-name:none){
  main{ animation:none }
}

/* احترام تفضيل تقليل الحركة في النظام */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- شاشة الدخول ---------- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 34px 34px;width:100%;max-width:412px;
  box-shadow:var(--shadow-lg);
  animation:riseIn var(--t-slow) var(--ease) both;
}
.login-card .logo{
  display:block;width:100%;max-width:186px;height:auto;
  margin:0 auto 22px;
}
.login-card h1{font-size:1.1rem;font-weight:600;margin-bottom:4px;text-align:center}
.login-card .sub{font-size:.82rem;color:var(--muted);margin-bottom:26px;text-align:center}

/* ---------- التخطيط ---------- */
:root{ --aside-w:262px }
.shell{display:flex;min-height:100vh}

/* ============ الشريط العلوي (المساعد + النسخة + المستخدم) ============ */
.appbar{
  position:fixed;top:0;left:0;right:var(--aside-w);height:58px;z-index:35;
  display:flex;align-items:center;padding:0 30px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.appbar-user{margin-right:auto;display:flex;align-items:center;gap:12px}
.appbar .ai-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:8px 16px;border-radius:22px;font-size:.87rem;font-weight:600;
  background:var(--accent-soft);color:var(--accent);border:1px solid transparent;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-soft);
}
.appbar .ai-btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.appbar .ai-btn svg{width:16px;height:16px;flex:none}
.appbar .a-sep{width:1px;height:24px;background:var(--line)}
.appbar .u-name{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink);font-weight:500}
.appbar .theme-toggle,.appbar .logout-btn{
  width:auto;margin:0;border-radius:10px;padding:7px 14px;font-size:.82rem;
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.appbar .theme-toggle:hover,.appbar .logout-btn:hover{background:var(--row-hover);color:var(--ink)}
.appbar .logout-btn svg{width:15px;height:15px;flex:none}
.appbar .portal-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:7px 14px;border-radius:10px;font-size:.82rem;font-weight:600;
  background:var(--accent-soft);color:var(--accent);border:1px solid transparent;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.appbar .portal-btn:hover{background:var(--accent);color:#fff}
.appbar .portal-btn img{width:20px;height:14px;object-fit:contain;flex:none}
.appbar .portal-btn:hover img{filter:brightness(0) invert(1)}

/* ============ القائمة الجانبية ============ */
aside{
  width:var(--aside-w);background:var(--side-bg);color:var(--side-ink);
  padding:26px 20px 20px;display:flex;flex-direction:column;gap:5px;
  position:sticky;top:0;height:100vh;
}
aside .logo{
  display:block;width:100%;max-width:150px;height:auto;margin:10px auto 16px;
}
.brand-sub{
  font-size:.7rem;color:var(--side-muted);text-align:center;letter-spacing:.04em;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--side-hover);
}
/* ---------- منطقة القائمة القابلة للتمرير ---------- */
.nav-wrap{
  position:relative; flex:1; min-height:0; display:flex;
  margin-inline:-4px; /* يعوّض مساحة الشريط فلا تنزاح البنود */
}
nav{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding-inline:4px; scroll-behavior:smooth;
  /* تلاشي الحواف يبيّن أن هناك مزيداً أعلى أو أسفل */
  --f-top:0px; --f-bot:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--f-top),
                     #000 calc(100% - var(--f-bot)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--f-top),
             #000 calc(100% - var(--f-bot)),transparent 100%);
  transition:--f-top var(--t-fast) linear,--f-bot var(--t-fast) linear;
  scrollbar-width:thin; scrollbar-color:var(--side-hover) transparent;
}
nav::-webkit-scrollbar{width:4px}
nav::-webkit-scrollbar-track{background:transparent}
nav::-webkit-scrollbar-thumb{background:var(--side-hover);border-radius:4px}
.nav-wrap:hover nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}

/* المؤشران: يظهران فقط عند وجود محتوى مخفي في اتجاههما */
.nav-arrow{
  position:absolute; left:50%; z-index:2;
  width:28px; height:22px; border-radius:20px;
  border:1px solid var(--side-hover); background:var(--side-bg);
  color:var(--side-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; line-height:1; padding:0;
  opacity:0; pointer-events:none;
  transform:translateX(-50%) scale(.8);
  transition:opacity var(--t-fast) var(--ease-soft),
             transform var(--t-mid) var(--ease-spring),
             color var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft);
}
.nav-arrow.show{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.nav-arrow:hover{color:var(--side-ink);background:var(--side-hover)}
.nav-arrow:active{transform:translateX(-50%) scale(.92)}
.nav-arrow.up{top:-1px}
.nav-arrow.down{bottom:-1px}

nav a{
  display:flex;align-items:center;gap:10px;
  color:var(--side-muted);text-decoration:none;padding:11px 14px;border-radius:10px;
  font-size:.9rem;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
nav a:hover{background:var(--side-hover);color:var(--side-ink)}
/* البند النشط يحمل اسم مجموعة انتقال العرض | فلا نضع عليه انتقال CSS
   حتى لا تتعارض الحركتان على نفس الخصائص وتتجمّد الألوان */
nav a.active{background:var(--accent);color:#fff;font-weight:600;transition:none}
.nav-label{
  font-size:.65rem;font-weight:700;color:var(--side-muted);opacity:.65;
  margin:20px 14px 7px;letter-spacing:.1em;text-transform:uppercase;
}
.nav-label:first-child{margin-top:4px}

/* ---------- أقسام القائمة المطوية: اضغط القسم تنسدل صفحاته ---------- */
.nav-group{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:.68rem;font-weight:700;color:var(--side-muted);
  margin:12px 0 2px;padding:8px 14px;letter-spacing:.08em;border-radius:9px;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.nav-group:hover{background:var(--side-hover);color:var(--side-ink)}
.nav-group.open{color:var(--side-ink)}
.nav-group .chev{
  font-size:.62rem;opacity:.7;
  transition:transform var(--t-mid) var(--ease-spring);
}
.nav-group.open .chev{transform:rotate(180deg)}
.nav-items{
  overflow:hidden;max-height:0;
  transition:max-height var(--t-slow) var(--ease-soft);
}
.nav-items.open{max-height:520px}
.nav-items a{margin-inline-start:4px}
/* بطاقة المستخدم القديمة (انتقلت للشريط العلوي) */
.user-pill{display:none}

main{flex:1;padding:82px 40px 46px;max-width:1180px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:14px;flex-wrap:wrap}
.topbar h1{font-size:1.4rem;font-weight:700;letter-spacing:-.01em}
.topbar .controls{display:flex;gap:10px;flex-wrap:wrap}
.select{
  border:1px solid var(--line);background:var(--surface);border-radius:10px;
  padding:8px 14px;font-family:inherit;font-size:.88rem;color:var(--ink);
}
.select.store{border-color:var(--accent);color:var(--accent);font-weight:500}

/* ---------- معادلة الدفتر ---------- */
.ledger{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:stretch;overflow:hidden;margin-bottom:26px;
}
.ledger .cell{flex:1;padding:20px 22px}
.ledger .op{
  display:flex;align-items:center;justify-content:center;width:48px;
  font-family:"Alexandria";font-size:1.5rem;color:var(--muted);
  border-inline-start:1px solid var(--line);border-inline-end:1px solid var(--line);
  background:var(--bg);
}
.ledger label{font-size:.75rem;color:var(--muted);display:block;margin-bottom:6px}
.ledger .val{font-family:"Alexandria";font-weight:600;font-size:1.35rem}
.ledger .net{background:var(--accent-soft)}
.ledger .net .val{color:var(--accent)}
.ledger .sub{font-size:.72rem;color:var(--muted);margin-top:4px}

/* ---------- بطاقات الحالة ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:-8px 0 26px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px}
.stat label{font-size:.74rem;color:var(--muted);display:block;margin-bottom:5px}
.stat .v{font-family:"Alexandria";font-weight:600;font-size:1.15rem}
.stat small{font-size:.72rem;color:var(--muted)}
.stat.alert{border-color:var(--neg);background:var(--neg-soft)}
.stat.alert .v{color:var(--neg)}

/* ---------- البطاقات والجداول ---------- */
.grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t-mid) var(--ease-soft),border-color var(--t-mid) var(--ease-soft);
}
.card:hover{box-shadow:var(--shadow-md)}
.card h3{font-size:.95rem;font-weight:600;margin-bottom:16px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.87rem}
th{color:var(--muted);font-weight:500;text-align:right;padding:8px 6px;border-bottom:1px solid var(--line);font-size:.76rem;white-space:nowrap}
td{padding:11px 6px;border-bottom:1px solid var(--line)}
tbody tr,table tr{transition:background var(--t-fast) var(--ease-soft)}
table tr:hover td{background:var(--row-hover)}
table tr:first-child:hover td{background:none}
tr:last-child td{border-bottom:none}
tr.tot td{font-weight:600;border-top:2px solid var(--ink);background:var(--bg)}
.chip{font-size:.72rem;padding:3px 10px;border-radius:20px;background:var(--bg);color:var(--muted);white-space:nowrap}
.chip.rev{background:var(--accent-soft);color:var(--accent)}
.chip.exp{background:var(--neg-soft);color:var(--neg)}
.chip.src{background:var(--line)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.amount.rev{color:var(--accent);font-weight:600}
.amount.exp{color:var(--neg);font-weight:600}
.clip{color:var(--muted);font-size:.9rem;text-decoration:none}

/* ---------- الضريبة والقوائم ---------- */
.vat-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.vat-row:last-child{border-bottom:none}
.vat-row b{font-family:"Alexandria"}

/* ---------- الأزرار والنماذج ---------- */
.btn{
  background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:10px 18px;font-family:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-soft),
             box-shadow var(--t-fast) var(--ease-soft),opacity var(--t-fast) var(--ease-soft);
}
.btn:hover:not(:disabled){filter:brightness(1.12);box-shadow:0 6px 16px -10px var(--accent)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover:not(:disabled){background:var(--bg);border-color:var(--muted);box-shadow:none}
.btn.block{width:100%}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:.9rem;background:var(--surface);color:var(--ink);
  transition:border-color var(--t-fast) var(--ease-soft),box-shadow var(--t-fast) var(--ease-soft);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.hint{font-size:.76rem;color:var(--muted);margin-top:-8px;margin-bottom:14px}

/* ---------- الرسائل ---------- */
.msg{border-radius:10px;padding:11px 14px;font-size:.85rem;margin-bottom:16px;display:none}
.msg.show{display:block;animation:riseIn var(--t-mid) var(--ease) both}
.msg.err{background:var(--neg-soft);color:var(--neg)}
.msg.ok{background:var(--accent-soft);color:var(--accent)}
.msg.info{background:var(--warn-soft);color:var(--warn)}
.empty{text-align:center;color:var(--muted);font-size:.86rem;padding:26px 10px}
.loading{color:var(--muted);font-size:.85rem;padding:18px 6px}

/* ---------- الأقسام ---------- */
.section{display:none}
.section.active{display:block}
.subtabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.subtabs button{
  background:none;border:1px solid var(--line);border-radius:20px;padding:7px 16px;
  font-family:inherit;font-size:.82rem;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft),
             border-color var(--t-fast) var(--ease-soft);
}
.subtabs button:hover{border-color:var(--muted);color:var(--ink)}
.subtabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.stat{transition:box-shadow var(--t-mid) var(--ease-soft)}
.stat:hover{box-shadow:var(--shadow-md)}
.select{transition:border-color var(--t-fast) var(--ease-soft),box-shadow var(--t-fast) var(--ease-soft)}
.select:hover{border-color:var(--muted)}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.upload{transition:border-color var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft)}
.upload:hover{border-color:var(--accent);background:var(--accent-soft)}
a.clip{transition:opacity var(--t-fast) var(--ease-soft)}
a.clip:hover{opacity:.6}
.role-tag{font-size:.72rem;padding:3px 10px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.role-tag.staff{background:var(--line);color:var(--muted)}

/* ---------- زر تبديل النسخة (ليلية / بيضاء) ---------- */
.theme-toggle{
  display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;
  background:var(--side-hover);border:1px solid transparent;color:var(--side-muted);
  border-radius:10px;padding:8px 12px;font-family:inherit;font-size:.8rem;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.theme-toggle:hover{color:var(--side-ink)}
.theme-toggle .ico{font-size:.95rem;line-height:1}

/* ---------- زر التحديث ---------- */
.refresh-btn{display:inline-flex;align-items:center;gap:7px}
.refresh-btn .ico{
  display:inline-block;font-size:.95rem;line-height:1;
  transition:transform var(--t-slow) var(--ease-spring);
}
.refresh-btn.spinning .ico{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.refresh-meta{font-size:.74rem;color:var(--muted);margin-inline-end:10px;align-self:center}

@media(max-width:900px){
  aside{display:none}
  .appbar{right:0;padding:0 16px;height:54px}
  .appbar .u-name .role-tag{display:none}
  main{padding:70px 18px 28px}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .ledger{flex-wrap:wrap}
  .ledger .cell{min-width:45%}
  .ledger .op{width:100%;height:36px;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .form-grid{grid-template-columns:1fr}
}

/* ---------- مقارنة الأشهر ---------- */
.months{display:flex;align-items:flex-end;gap:12px;height:170px;padding:8px 0 0}
.month-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;min-width:0}
.month-bars{display:flex;gap:4px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.month-bars .b{
  width:100%;max-width:26px;border-radius:6px 6px 0 0;min-height:2px;
  transition:opacity var(--t-fast) var(--ease-soft);
}
.month-bars .b.rev{background:var(--accent)}
.month-bars .b.exp{background:var(--line)}
.month-col:hover .b{opacity:.82}
.month-col .lbl{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.month-col.best .lbl{color:var(--accent);font-weight:600}
.month-col.worst .lbl{color:var(--neg);font-weight:600}
.legend{display:flex;gap:16px;font-size:.76rem;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}

/* ---------- النافذة المنبثقة (تأكيد عكس القيد) ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:50;padding:20px;
}
.overlay.show{display:flex}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;max-width:460px;width:100%;
  box-shadow:var(--shadow-lg);
  animation:riseIn var(--t-mid) var(--ease) both;
}
.modal h3{font-size:1rem;font-weight:600;margin-bottom:8px}
.modal .warn{font-size:.8rem;color:var(--muted);line-height:1.8;margin-bottom:14px}
.btn.mini{padding:5px 12px;font-size:.76rem}