/* ============================================================
   هوية SndLine — مطابقة للتصميم المعتمد v4
   ============================================================ */
:root{
  --bg:#F6F8F7; --surface:#FFFFFF; --ink:#15201C; --muted:#6B7772;
  --accent:#0E5A45; --accent-soft:#E4F0EB; --neg:#B4452F; --neg-soft:#F7E9E5;
  --warn:#8A6412; --warn-soft:#FFF4E0;
  --line:#E3E8E5; --radius:14px;
  /* منحنيات الحركة — هادئة ومتدرجة لا مفاجئة */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.18s; --t-mid:.28s; --t-slow:.42s;
  font-size:15px;
}
*{margin:0;padding:0;box-sizing:border-box}
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}

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

@media (prefers-reduced-motion:no-preference){
  aside{ view-transition-name:sidebar }
  main{ view-transition-name:page }

  ::view-transition-old(page){ animation:pageOut var(--t-fast) var(--ease-soft) both }
  ::view-transition-new(page){ animation:pageIn var(--t-slow) var(--ease) both }
  /* القائمة الجانبية لا تتحرك إطلاقاً أثناء الانتقال */
  ::view-transition-old(sidebar),
  ::view-transition-new(sidebar){ animation:none; mix-blend-mode:normal }
  ::view-transition-old(root){ animation-duration:var(--t-fast) }
  ::view-transition-new(root){ animation-duration:var(--t-mid) }
}

@keyframes pageIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes pageOut{ from{ opacity:1 } to{ opacity:0 } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* بديل للمتصفحات التي لا تدعم انتقال الصفحات — نفس الإحساس عند فتح الصفحة */
@media (prefers-reduced-motion:no-preference){
  main{ animation:pageIn var(--t-slow) var(--ease) 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:0 1px 2px rgba(21,32,28,.04),0 12px 34px -18px rgba(21,32,28,.22);
  animation:riseIn var(--t-slow) var(--ease) both;
}
.login-card .logo{
  display:block;width:100%;max-width:236px;height:auto;
  margin:0 auto 20px;
}
.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}

/* ---------- التخطيط ---------- */
.shell{display:flex;min-height:100vh}
aside{
  width:230px;background:var(--ink);color:#E9EFEC;
  padding:26px 20px 22px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;
}
aside .logo{
  display:block;width:100%;max-width:172px;height:auto;
  margin-bottom:10px;
}
.brand-sub{
  font-size:.72rem;color:#8FA39B;margin-bottom:24px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
}
nav a{
  display:flex;align-items:center;gap:10px;
  color:#B9C6C0;text-decoration:none;padding:10px 12px;border-radius:10px;
  font-size:.92rem;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
nav a:hover{background:rgba(255,255,255,.08);color:#fff}
nav a.active{background:var(--accent);color:#fff}
.nav-label{font-size:.68rem;color:#8FA39B;margin:16px 12px 6px;letter-spacing:.05em}
.user-pill{
  margin-top:auto;background:rgba(255,255,255,.07);border-radius:10px;
  padding:10px 12px;font-size:.78rem;color:#B9C6C0;
}
.user-pill b{display:block;color:#fff;font-size:.86rem;margin-bottom:2px}
.user-pill button{
  margin-top:8px;background:none;border:1px solid rgba(255,255,255,.2);color:#B9C6C0;
  border-radius:8px;padding:5px 10px;font-family:inherit;font-size:.74rem;cursor:pointer;width:100%;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.user-pill button:hover{background:rgba(255,255,255,.1);color:#fff}
main{flex:1;padding:32px 36px;max-width:1120px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:12px;flex-wrap:wrap}
.topbar h1{font-size:1.35rem;font-weight:600}
.topbar .controls{display:flex;gap:10px}
.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:0 1px 2px rgba(21,32,28,.03);
  transition:box-shadow var(--t-mid) var(--ease-soft),border-color var(--t-mid) var(--ease-soft);
}
.card:hover{box-shadow:0 1px 2px rgba(21,32,28,.04),0 10px 26px -20px rgba(21,32,28,.28)}
.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:rgba(14,90,69,.028)}
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:#EEF1F0}
.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){background:#0c4c3a;box-shadow:0 6px 16px -10px rgba(14,90,69,.9)}
.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:#cfd8d4;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:#cfd8d4}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,90,69,.12);
}
.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:#cfd8d4;color:var(--ink)}
.subtabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.stat{transition:box-shadow var(--t-mid) var(--ease-soft)}
.stat:hover{box-shadow:0 1px 2px rgba(21,32,28,.04),0 10px 26px -20px rgba(21,32,28,.28)}
.select{transition:border-color var(--t-fast) var(--ease-soft),box-shadow var(--t-fast) var(--ease-soft)}
.select:hover{border-color:#cfd8d4}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,90,69,.12)}
.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:#EEF1F0;color:var(--muted)}

@media(max-width:900px){
  aside{display:none}
  main{padding:20px}
  .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}
}