:root{
  /* هوية OLV (2026-10): خلفية كريمية دافئة + ذهبي وزيتوني من الشعار.
     الفاتح هو الافتراضي؛ الداكن (زر القمر) نسخة "إسبريسو" دافئة من نفس الألوان.
     --gold = لون التعبئة (أزرار رئيسية، تبويب نشط)، --gold-hi = لون النص المميّز
     (أسعار، روابط) وهو أغمق بالفاتح حتى يحقق تباين 4.5:1 على الكريمي */
  color-scheme:light;
  --ink:#f7f1e6; --ink-2:#fffdf8; --ink-3:#efe6d4;
  --gold:#b08a3e; --gold-hi:#86631c; --gold-dp:#6b4c14; --gold-rgb:176,138,62; --on-gold:#241a0a;
  --olive:#56692e; --olive-hi:#435324;
  --paper:#2f2416; --muted:#6c5a44; --hair:rgba(110,85,40,.2); --hair-soft:rgba(110,85,40,.11);
  --danger:#b3412a; --danger-hi:#9a3420; --ok:#56692e;
  --overlay-bg:rgba(247,241,230,.94);
  --material:rgba(255,253,248,.9);
  --card-shadow:0 1px 0 rgba(110,85,40,.10), 0 6px 18px -12px rgba(80,60,25,.22);
  --card-shadow-hover:0 2px 0 rgba(110,85,40,.12), 0 14px 30px -14px rgba(80,60,25,.32);
  --ease:cubic-bezier(.2,.7,.3,1);
  /* منحنيات حركة "نابضية" على طريقة Apple: --spring تقريب لنابض مخمّد
     بالكامل (بدون ارتداد) للحركة العادية، و--spring-bounce بارتداد خفيف
     بس للحركات اللي بتبدأ بزخم من إصبع المستخدم (سحب/رمي) */
  --spring:cubic-bezier(.22,1,.36,1);
  --spring-bounce:cubic-bezier(.34,1.25,.64,1);
  --r-card:18px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#17120d; --ink-2:#211a13; --ink-3:#2b2219;
  --gold:#c9a24b; --gold-hi:#e6c983; --gold-dp:#8a6a26; --gold-rgb:201,162,75; --on-gold:#1a1307;
  --olive:#8fa055; --olive-hi:#a9b873;
  --paper:#f3eadb; --muted:#b4a28a; --hair:rgba(201,162,75,.2); --hair-soft:rgba(201,162,75,.1);
  --danger:#d0644a; --danger-hi:#eba18e; --ok:#8fa055;
  --overlay-bg:rgba(23,18,13,.94);
  --material:rgba(33,26,19,.9);
  --card-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.5);
  --card-shadow-hover:0 2px 4px rgba(0,0,0,.45), 0 16px 32px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;}
body{
  margin:0; color:var(--paper);
  font-family:'Tajawal',system-ui,sans-serif; padding:0 0 90px;
  background:var(--ink);
}
h1,h2,h3{font-family:'Tajawal',sans-serif; margin:0; color:var(--paper); font-weight:800; line-height:1.25;}
a{color:var(--gold-hi);}
button{font-family:'Tajawal',sans-serif; cursor:pointer;}
/* الاستجابة لحظة اللمس: نلغي تأخير النقر المزدوج (~300ms) على كل عناصر
   الضغط، ونلغي الوميض الرمادي الافتراضي لأن كل زر عنده حالة :active خاصة */
a, button, label, select, summary, [role="button"]{touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
/* الأرقام بنفس العرض حتى ما ترقص المبالغ لما تتغيّر */
table, .stat .value, .total, .price{font-variant-numeric:tabular-nums;}
/* حلقة تركيز واضحة للكيبورد بس (مش للمس) */
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.icon{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px;}

.wrap{max-width:960px; margin:0 auto; padding:22px 20px;}

/* ---- top bar & tabs ---- */
.top{
  position:sticky; top:0; z-index:30; background:var(--overlay-bg);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hair);
  box-shadow:0 8px 24px -16px rgba(47,36,22,.35);
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.olv-brand{display:flex; align-items:center; gap:10px;}
/* شعار OLV الرسمي (assets/brand/olv-mark.png) على بلاطة سوداء متل خلفيته الأصلية */
.brand-mark-sm{
  flex:none; height:42px; border-radius:11px; background:#0b0a08; padding:5px 10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.45);
}
.brand-mark-sm img{height:32px; width:auto; display:block;}
.brand-text{font-size:18px;}
.brand-text span{color:var(--muted); font-size:12px; font-weight:400; display:block; margin-top:2px;}
.top .actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.olv-user-badge{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--paper); background:var(--ink-3);
  border:1px solid var(--hair);
}
.olv-user-badge .icon{width:15px; height:15px;}

.tabs{
  display:flex; gap:8px; overflow-x:auto; padding:12px 20px 4px; margin:0;
  background:var(--ink); border-bottom:1px solid var(--hair-soft, rgba(var(--gold-rgb),.1));
}
.tab-link{
  position:relative;
  flex:none; background:var(--ink-2); border:1px solid var(--hair); color:var(--paper);
  padding:11px 18px; border-radius:999px; font-size:13px; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tab-link:active{transform:scale(.96); transition-duration:.08s;}
.tab-link .icon{width:15px; height:15px; opacity:.85;}
.tab-link.on{background:var(--paper); color:var(--ink-2); border-color:var(--paper); font-weight:700; box-shadow:0 6px 16px -8px rgba(47,36,22,.5);}

.tab-link.on .icon{opacity:1;}
/* تبويبات القسم (المخزون: المواد الخام | المستلزمات | الجرد ...) */
.olv-hub-tabs{display:flex; gap:6px; overflow-x:auto; padding:10px 0 2px; margin-top:6px; border-top:1px solid var(--hair-soft, var(--hair)); scrollbar-width:none;}
.olv-hub-tabs::-webkit-scrollbar{display:none;}
.olv-hub-tab{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:6px; min-height:40px;
  padding:9px 15px; border-radius:10px; font-size:13px; white-space:nowrap; text-decoration:none;
  color:var(--muted); background:transparent; border:1px solid transparent;
}
.olv-hub-tab .icon{width:14px; height:14px; opacity:.8;}
.olv-hub-tab{transition:background .18s var(--spring), color .18s var(--spring), transform .18s var(--spring);}
.olv-hub-tab:active{transform:scale(.96); transition-duration:.08s;}
.olv-hub-tab.on{color:var(--paper); background:var(--ink-3); border-color:var(--hair); font-weight:700;}
.tab-badge{
  position:absolute; top:-6px; inset-inline-end:-6px;
  background:var(--danger); color:#fff; font-size:10.5px; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 4px; line-height:1; box-shadow:0 0 0 2px var(--ink);
}

/* ---- tab-more dropdown ("المزيد") ---- */
.tab-more-btn{border:none; -webkit-tap-highlight-color:transparent;}
.tab-more-chevron{width:12px; height:12px; margin-inline-start:-3px; opacity:.7; transition:transform .16s var(--ease);}
.tab-more.open .tab-more-chevron{transform:rotate(180deg);}
.tab-more-btn.has-badge::after{
  content:""; position:absolute; top:7px; inset-inline-end:9px;
  width:8px; height:8px; border-radius:999px; background:var(--danger);
  box-shadow:0 0 0 2px var(--ink-2);
}
.tab-more-panel{
  display:block; visibility:hidden; opacity:0; transform:scale(.94) translateY(-6px); transform-origin:top right;
  pointer-events:none;
  transition:opacity .12s var(--spring), transform .14s var(--spring), visibility 0s linear .14s;
  position:fixed; z-index:60; width:260px; max-width:calc(100vw - 24px);
  max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); overflow-y:auto;
  background:var(--material); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--hair); border-radius:16px;
  padding:10px; box-shadow:var(--card-shadow-hover), 0 24px 48px -12px rgba(0,0,0,.45);
}
.tab-more.open .tab-more-panel{
  visibility:visible; opacity:1; transform:none; pointer-events:auto;
  transition:opacity .14s var(--spring), transform .2s var(--spring), visibility 0s;
}
.tab-more-group + .tab-more-group{margin-top:10px; padding-top:10px; border-top:1px solid var(--hair-soft, rgba(var(--gold-rgb),.1));}
.tab-more-group-label{font-size:11px; color:var(--muted); letter-spacing:0; padding:2px 10px 6px;}
.tab-more-link{
  position:relative; background:transparent; border:none; min-height:40px;
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
  color:var(--paper); text-decoration:none; font-size:13.5px; white-space:normal;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.tab-more-link:active{background:var(--ink-3); color:var(--gold-hi); transform:none;}
.tab-more-link.on{background:rgba(var(--gold-rgb),.14); color:var(--gold-hi); font-weight:700; box-shadow:none;}
.tab-more-link .icon{opacity:.85;}
.tab-more-link.on .icon{opacity:1;}
/* الشارة الأصلية (.tab-badge) موضعها absolute بزاوية الفقاعة الصغيرة —
   بصف عريض بالقائمة المنسدلة هاد بيخلّيها تطفو بعيد عن الأيقونة/الاسم،
   فهون منحولها لعنصر عادي بآخر الصف (margin-inline-start:auto يدفعها
   لأقصى الصف) بدل ما تبقى معلّقة بزاوية absolute */
.tab-more-link .tab-badge{
  position:static; inset:auto; margin-inline-start:auto; box-shadow:none;
}

/* ---- buttons ---- */
/* الحد الأدنى لارتفاع أي زر 44px تقريبًا، حتى يكون سهل الضغط عليه
   باللمس (إصبع) على الآيباد والموبايل والكمبيوترات اللمسية، وليس فقط
   بالماوس */
.btn{
  border:1px solid var(--hair); background:transparent; color:var(--paper);
  padding:11px 16px; border-radius:12px; font-size:14px; font-weight:500;
  transition:border-color .16s var(--ease), color .16s var(--ease), transform .2s var(--spring), box-shadow .16s var(--ease), filter .16s var(--ease), background .16s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97); filter:brightness(.94); transition-duration:.08s;}
.btn.gold{background:var(--gold); color:var(--on-gold); font-weight:700; border:none; box-shadow:0 6px 16px -8px rgba(var(--gold-rgb),.7);}

.btn.danger{border-color:rgba(179,65,42,.4); color:var(--danger-hi);}

.btn.small{padding:8px 13px; font-size:12.5px; min-height:38px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; filter:none;}

/* ---- forms ---- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--hair); color:var(--paper);
  padding:12px; border-radius:12px; font-size:16px; font-family:'Tajawal',sans-serif;
}
/* حجم الخط 16px على كل الحقول أعلاه مقصود: أي حجم أصغر يخلي متصفح
   سفاري على الآيفون/الآيباد "يزوم" تلقائيًا على الحقل بمجرد الضغط عليه */
.field input,.field select,.field textarea{transition:border-color .16s var(--ease), box-shadow .16s var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18);}

/* صناديق الاختيار وأزرار الراديو بحجم مريح للمس بدل الحجم الافتراضي
   الصغير جدًا في المتصفحات (يأتي بعد قواعد .field input عمدًا ليكسبها) */
.field input[type="checkbox"], .field input[type="radio"],
input[type="checkbox"], input[type="radio"]{
  width:20px; height:20px; accent-color:var(--gold); vertical-align:middle;
  flex:none;
}
.field label:has(input[type="checkbox"]), .field label:has(input[type="radio"]){
  display:flex; align-items:center; gap:10px; margin-bottom:0; min-height:44px;
  font-size:14px; color:var(--paper); cursor:pointer;
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
@media(max-width:560px){.row2,.row3{grid-template-columns:1fr;}}

.group{
  background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-card);
  padding:20px; margin-bottom:20px; box-shadow:var(--card-shadow);
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.group h2{font-size:17px; margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.group h2 .icon{width:19px; height:19px; color:var(--gold);}

/* ---- stat cards ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
@media(max-width:640px){.stats{grid-template-columns:1fr;}}
.stat{
  background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-card); padding:16px;
  box-shadow:var(--card-shadow);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

/* .stat-row مضافة اختياريًا داخل .stat لعرض أيقونة جنب الرقم — الأقسام
   القديمة اللي بتحط label/value مباشرة جوا .stat (بدون .stat-row)
   بتضل شغالة زي ما هي، بترتيبها العمودي الافتراضي */
.stat-row{display:flex; align-items:center; gap:14px;}
.stat .stat-icon{
  flex:none; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.06)); color:var(--gold-hi);
}
.stat .stat-icon .icon{width:21px; height:21px;}
.stat .stat-body{min-width:0;}
.stat .label{font-size:12px; color:var(--muted); margin-bottom:4px;}
.stat .value{font-size:28px; color:var(--paper); font-weight:800; line-height:1.1;}
.stat .value.bad{color:var(--danger-hi);}
.stat .value.good{color:var(--ok);}

/* ---- tables ---- */
/* width:max-content + min-width:100% بدل width:100% وحدها: يخلي الجدول
   يمدّ لعرض الحاوية كامل لو محتواه أضيق منها (مطابق للشكل السابق على
   الشاشات الواسعة)، بس ما يخليه ينضغط تحت عرضه الطبيعي على شاشة ضيقة —
   بيتمدد لعرضه الحقيقي بدلها ويعتمد على .table-wrap{overflow-x:auto}
   للتمرير الأفقي، بدل ما تنعصر كل الأعمدة (وخصوصًا أعمدة الأزرار) لدرجة
   ما تنقرا */
table{width:max-content; min-width:100%; border-collapse:collapse; font-size:13.5px;}
th,td{padding:10px 8px; text-align:right; border-bottom:1px solid var(--hair);}
th{color:var(--muted); font-weight:500; font-size:12px;}
tbody tr{transition:background .15s var(--ease);}

.table-wrap{overflow-x:auto;}
.empty-row td{text-align:center; color:var(--muted); padding:24px 8px;}

/* ---- bar chart (css-only) ---- */
.bars{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:flex; align-items:center; gap:10px; font-size:13px;}
.bar-row .bar-label{width:150px; flex:none; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-row .bar-track{flex:1; background:var(--ink-3); border-radius:6px; height:14px; overflow:hidden;}
.bar-row .bar-fill{height:100%; background:linear-gradient(90deg,var(--gold-dp,#7a5e22),var(--gold));}
.bar-row .bar-value{width:90px; flex:none; text-align:left; color:var(--paper);}

/* ---- misc ---- */
.err{
  display:none; background:rgba(193,88,63,.15); border:1px solid rgba(193,88,63,.4);
  color:var(--danger-hi); padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:13px; overflow-wrap:anywhere;
}
.hint{color:var(--muted); font-size:12.5px; margin-top:4px;}
.olv-config-warning{
  background:var(--danger); color:#fff; text-align:center; padding:10px 16px; font-size:13px;
}
/* البانر بيظهر/بيختفي بتلاشي + نزول مريح بدل ما الصفحة تقفز؛ المتصفحات اللي ما بتدعم interpolate-size بتعمل التبديل فورًا (نفس السلوك القديم) */
:root{interpolate-size:allow-keywords;}
.olv-connection-banner{
  display:none; text-align:center; padding:0 16px; font-size:13px; font-weight:700;
  opacity:0; block-size:0; overflow:clip;
  transition:opacity .2s var(--spring), block-size .2s var(--spring), padding .2s var(--spring), display .2s allow-discrete;
}
.olv-connection-banner.show{display:block; opacity:1; block-size:auto; padding:10px 16px;}
@starting-style{ .olv-connection-banner.show{opacity:0; block-size:0; padding-block:0;} }
.olv-connection-banner.offline{background:var(--danger); color:#fff;}
.olv-connection-banner.online{background:var(--ok); color:#fff;}
.olv-connection-banner.queued{background:var(--gold); color:var(--on-gold);}
.olv-failed-back{position:fixed; inset:0; z-index:1000; background:var(--overlay-bg, rgba(0,0,0,.55)); display:flex; align-items:center; justify-content:center; padding:16px;}
.olv-failed-box{background:var(--ink-2); border:1px solid var(--hair); border-radius:16px; padding:18px; width:min(520px,100%); max-height:85vh; overflow:auto;}
.olv-failed-box h3{margin:0 0 6px;}
.olv-failed-row{display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:10px 0; border-top:1px solid var(--hair);}
.olv-failed-reason{color:var(--danger-hi); font-size:12.5px; margin-top:4px;}
.olv-failed-acts{display:flex; gap:6px; flex:none;}
.center-card{
  max-width:380px; margin:min(11vh,80px) auto 40px; background:var(--ink-2); border:1px solid var(--hair);
  border-radius:18px; padding:32px 28px; box-shadow:var(--card-shadow-hover);
  animation:olv-card-in .24s var(--spring) both;
}
@keyframes olv-card-in{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}}
.center-card h1{text-align:center; margin-bottom:22px; font-size:22px;}
.brand-mark{
  margin:0 auto 20px; border-radius:16px; overflow:hidden; background:#0b0a08; max-width:260px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.5);
}
.brand-mark img{display:block; width:100%; height:auto;}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; border:1px solid var(--hair); color:var(--muted);}
.badge .icon{width:11px; height:11px; vertical-align:-1px;}

.olv-footer{
  text-align:center; color:var(--muted); font-size:12px;
  padding:22px 16px calc(22px + env(safe-area-inset-bottom));
}

/* ---- مؤثرات المرور (hover) للأجهزة اللي فيها ماوس فعلًا ----
   على اللمس، :hover بيعلق على آخر عنصر انضغط ("رفعة" ما بتنزل) — فنحصرها
   بالأجهزة اللي بتدعم المرور الحقيقي، واللمس بياخد ردّة فعل :active فورية */
@media (hover:hover) and (pointer:fine){
  .tab-link:hover{border-color:var(--gold);}
  .tab-link.on:hover{transform:none;}
  .olv-hub-tab:hover{color:var(--gold-hi); border-color:var(--hair);}
  .tab-more-link:hover{background:var(--ink-3); color:var(--gold-hi); transform:none;}
  .btn:hover{border-color:var(--gold); background:rgba(var(--gold-rgb),.08);}
  .btn:active{transform:scale(.97);}
  .btn.gold:hover{filter:brightness(1.06); box-shadow:0 6px 18px -4px rgba(var(--gold-rgb),.6);}
  .btn.danger:hover{border-color:var(--danger); color:#f0b7a8;}
  .btn:disabled:hover{transform:none;}
  .stat:hover{box-shadow:var(--card-shadow-hover); border-color:var(--hair);}
  tr:hover td{background:rgba(var(--gold-rgb),.06);}
}

/* ---- الشريط العلوي على الموبايل: سطر واحد بدل ثلاثة ----
   الشعار + اسم المستخدم + أزرار أيقونات (الثيم/الموقع/الخروج). النص
   المخفي للأزرار موجود بـaria-label/title فقارئ الشاشة بيضل يقراه */
@media (max-width:640px){
  .top{padding:10px 14px; flex-wrap:nowrap; gap:8px;}
  .olv-brand{min-width:0; flex:none;}
  .brand-text{display:none;}
  .top .actions{flex-wrap:nowrap; gap:6px; min-width:0; flex:1; justify-content:flex-end;}
  .top .actions .btn.small{width:44px; min-height:44px; padding:0; flex:none;}
  .top .actions .btn .btn-label{display:none;}
  .top .actions .btn .icon{width:19px; height:19px;}
  .olv-user-badge{min-width:0; flex:0 1 auto; padding:7px 12px; font-size:12.5px;}
  .olv-user-badge > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
}
@media (max-width:379px){
  .olv-user-badge > span{display:none;}
  .olv-user-badge{padding:7px 10px;}
  .tabs{padding:10px 14px 4px; gap:6px; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab-link{padding:10px 15px;}
  .wrap{padding:18px 14px;}
}


/* ---- حركة الواجهة (animate): كل شي هون إله هدف وبيحترم reduced-motion ----
   • مودال/نافذة مولّدة بالجافاسكربت (إعادة طباعة، كتالوج، وحدة شراء...): ظهور 200ms وخروج 140ms (حدث متكرر نسبيًا = سريع)
   • دخول بطاقات الصفحة (.wrap > .group): ارتفاع 6px + ظهور 240ms بتأخير 35ms بين البطاقات — بس لصفحات الإدارة؛
     شاشة البيع والمطبخ ما بتستعمل .group فما بتتأثر (حدث يتكرر مئات المرات باليوم = بدون حركة)
   • كل الحركات transform/opacity فقط، ومنحنى --spring (ease-out قوي)، وما في ease-in */
@keyframes olv-bd-in{from{opacity:0;} to{opacity:1;}}
@keyframes olv-bd-out{from{opacity:1;} to{opacity:0;}}
@keyframes olv-modal-in{from{opacity:0; transform:scale(.96) translateY(6px);} to{opacity:1; transform:none;}}
@keyframes olv-modal-out{from{opacity:1; transform:none;} to{opacity:0; transform:scale(.98);}}
@keyframes olv-rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.olv-modal-backdrop{animation:olv-bd-in .15s var(--spring) both;}
.olv-modal-backdrop > *{animation:olv-modal-in .2s var(--spring) both;}
.olv-modal-backdrop.closing{animation:olv-bd-out .14s var(--spring) both; pointer-events:none;}
.olv-modal-backdrop.closing > *{animation:olv-modal-out .14s var(--spring) both;}
.olv-new{animation:olv-rise .18s var(--spring) backwards;} /* صف/بطاقة جديدة (olvMarkNew) */
.wrap > .group{animation:olv-rise .18s var(--spring) backwards;}
/* تأخير بسيط (30ms) بين البطاقات المتجاورة وبحد أقصى 80ms: التنقل بين الصفحات بيتكرر عشرات المرات باليوم */
.wrap > .group + .group{animation-delay:.03s;}
.wrap > .group + .group + .group{animation-delay:.06s;}
.wrap > .group + .group + .group + .group{animation-delay:.08s;}
/* ---- فتح/إغلاق <details> بتدرّج (ارتفاع + شفافية). التحسين بيشتغل بس بالمتصفحات اللي بتدعم ::details-content، والباقي بيفتح فورًا زي قبل ---- */
@supports selector(::details-content){
  details::details-content{
    block-size:0; opacity:0; overflow:clip; overflow-clip-margin:6px;
    transition:block-size .2s var(--spring), opacity .15s ease, content-visibility .2s allow-discrete;
  }
  details[open]::details-content{block-size:auto; opacity:1;}
}

/* ---- ضغط مطوّل للتأكيد (olvHoldConfirm): التعبئة خطية أثناء الضغط (تقدّم حقيقي)، والرجوع عند الإفلات أسرع ---- */
.olv-hold{position:relative; overflow:hidden; isolation:isolate; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation;}
.olv-hold::after{
  content:""; position:absolute; inset:0; z-index:-1; background:rgba(var(--danger-rgb,193,88,63),.38);
  transform:scaleX(0); transform-origin:right center; transition:transform .2s var(--spring);
}
.olv-hold.holding::after{transform:scaleX(1); transition:transform var(--hold-ms,900ms) linear;}
.olv-hold.held::after{transform:scaleX(1); transition:none;}

/* ---- إشعارات موحّدة (olvToast في layout.js): ظهور من تحت 8px، خروج أسرع من الدخول، transitions فقط (قابلة للمقاطعة) ---- */
#olv-toasts{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; max-width:90vw; pointer-events:none;}
.olv-toast{display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px; color:#fff; background:var(--ok); font-size:14px; font-weight:700; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.3); pointer-events:auto; cursor:pointer; opacity:0; transform:translateY(8px); transition:opacity .18s var(--spring), transform .22s var(--spring);}
.olv-toast.in{opacity:1; transform:none;}
.olv-toast.out{opacity:0; transform:translateY(6px); transition-duration:.14s;}
.olv-toast.danger{background:var(--danger);}
.olv-toast.gold{background:var(--gold-dp);}
.olv-toast.info{background:var(--ink-2); color:var(--paper); border:1px solid var(--hair);}
.olv-toast-act{margin-inline-start:6px; padding:6px 12px; min-height:34px; border-radius:8px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-weight:800; cursor:pointer;}
.olv-toast.info .olv-toast-act{color:var(--gold-hi); border-color:var(--gold);}
.olv-toast-act:active{transform:scale(.96);}

@media (prefers-reduced-motion: reduce){
  /* الـ!important ضروري: القاعدة العامة تحت بتخلي كل animation-duration شبه صفر، وهاي لازم تضل تلاشي (أخف مو صفر) */
  .olv-modal-backdrop > *{animation:olv-bd-in .15s ease both !important;}
  .olv-modal-backdrop.closing > *{animation:olv-bd-out .12s ease both !important;}
  .wrap > .group{animation:olv-bd-in .15s ease backwards !important; animation-delay:0s !important;}
  .olv-new{animation:olv-bd-in .15s ease backwards !important;}
  .olv-toast, .olv-toast.in, .olv-toast.out{transform:none !important;}
  /* بانر الاتصال و details: تلاشي فقط بدون تغيير ارتفاع */
  .olv-connection-banner{transition:opacity .15s ease, display .15s allow-discrete !important;}
  details::details-content{transition:opacity .15s ease, content-visibility .15s allow-discrete !important;}
  /* تعبئة الضغط المطوّل مؤشر تقدّم حقيقي، لازم تضل بمدة الضغط مو .12s */
  .olv-hold.holding::after{transition-duration:var(--hold-ms,900ms) !important;}
}

/* ---- إمكانية الوصول: حركة مخفّفة، شفافية مخفّفة، تباين أعلى ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.12s !important; scroll-behavior:auto !important;
  }
  .btn:active, .tab-link:active, .olv-hub-tab:active, .pi-mini:active, .cov-chip:active, .recipe-suggest-chip:active{transform:none !important;}
  .tab-more-panel{transform:none !important;}
  .btn:hover, .tab-link:hover, .stat:hover, .olv-hub-tab:hover{transform:none !important;}
}
@media (prefers-reduced-transparency: reduce){
  .tab-more-panel{background:var(--ink-2); -webkit-backdrop-filter:none; backdrop-filter:none;}
}
@media (prefers-contrast: more){
  :root{--hair:rgba(var(--gold-rgb),.6); --muted:var(--paper);}
  .tab-more-panel{background:var(--ink-2); -webkit-backdrop-filter:none; backdrop-filter:none;}
}

/* ---- شريط التنقل السفلي على الموبايل ----
   بالموبايل شريط التبويبات بينزل لتحت الشاشة (مكان الإبهام): 4 روابط يومية
   + "المزيد" اللي بيفتح ورقة فوق الشريط. الطاولات والمطبخ بينتقلوا لأول
   الورقة (مجموعة "التشغيل"). على الشاشات الأعرض كل شي متل ما هو */
.mobile-only{display:none;}
@media (max-width:640px){
  :root{--bnav-h:calc(62px + env(safe-area-inset-bottom));}
  body{padding-bottom:calc(var(--bnav-h) + 24px);}
  #olv-nav .tabs{
    position:fixed; inset:auto 0 0 0; z-index:45; margin:0;
    display:grid; grid-template-columns:repeat(5,1fr); gap:2px; overflow:visible;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    background:var(--material); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
    border-top:1px solid var(--hair); border-bottom:none;
    box-shadow:0 -6px 20px -14px rgba(47,36,22,.45);
  }
  #olv-nav .tabs .desk-only{display:none;}
  #olv-nav .tabs > .tab-link, #olv-nav .tabs .tab-more-btn{
    flex-direction:column; justify-content:center; gap:3px; min-height:52px; width:100%;
    padding:5px 2px; border:none; border-radius:12px; background:transparent; box-shadow:none;
    color:var(--muted); font-size:11px; font-weight:600; line-height:1.15; text-align:center;
  }
  #olv-nav .tabs > .tab-link .icon, #olv-nav .tabs .tab-more-btn .icon{width:21px; height:21px; opacity:1;}
  #olv-nav .tabs .tab-link span[data-short]{font-size:0;}
  #olv-nav .tabs .tab-link span[data-short]::after{content:attr(data-short); font-size:11px;}
  #olv-nav .tabs > .tab-link.on, #olv-nav .tabs .tab-more-btn.on, #olv-nav .tabs .tab-more-btn.on-mobile{
    background:var(--ink-3); color:var(--paper); font-weight:800; box-shadow:none;
  }
  #olv-nav .tabs > .tab-link.on .icon, #olv-nav .tabs .tab-more-btn.on .icon, #olv-nav .tabs .tab-more-btn.on-mobile .icon{color:var(--gold-hi);}
  #olv-nav .tabs .tab-more{display:flex;}
  #olv-nav .tabs .tab-more-chevron{display:none;}
  #olv-nav .tabs > .tab-link .tab-badge{top:2px; inset-inline-end:calc(50% - 22px);}
  .tab-more-btn.has-badge::after{top:6px; inset-inline-end:calc(50% - 16px);}
  .tab-more-panel{
    top:auto !important; bottom:calc(var(--bnav-h) + 8px); right:8px !important; left:8px; width:auto; max-width:none;
    max-height:min(70vh, calc(100vh - var(--bnav-h) - 80px)); max-height:min(70dvh, calc(100dvh - var(--bnav-h) - 80px)); border-radius:20px; padding:12px;
    transform-origin:bottom center !important; transform:scale(.97) translateY(10px);
    background:var(--ink-2);
  }
  .tab-more-group{display:grid; grid-template-columns:1fr 1fr; gap:4px;}
  .tab-more-group-label{grid-column:1 / -1;}
  .tab-more-panel .tab-more-link{min-height:48px; font-size:14.5px;}
  .tab-more-group.mobile-only{display:grid;}
  #olv-toasts{bottom:calc(var(--bnav-h) + 16px);}
}

/* ---- زجاج سائل + هالة دافئة (2026-10، من مهارة ui-ux-pro-max) ----
   بتشتغل على كل صفحة جسمها عليه class="olv-glass": olvRenderNav بيضيفها لكل
   صفحات البرنامج، وصفحة الدخول حاطّتها بإيدها.
   القاعدة: الزجاج للتنقل والأدوات بس (الشريط العلوي، التذكرة، شريط الموبايل)،
   والمحتوى (الأرقام والأصناف) على بلاطات معتمة حتى يضل مقروء. خلفها "هالة"
   من ألوان الشعار (ذهبي، زيتوني، خوخي) بتتحرك ببطء شديد */
:root{
  --glass:rgba(255,253,248,.62); --glass:color-mix(in srgb, var(--ink-2) 62%, transparent);
  --glass-line:rgba(255,255,255,.7);
  --glass-shadow:0 18px 40px -22px rgba(80,60,25,.45);
  --bg-top:#fbf7ef; --bg-bottom:#f1e9d9;
  --on-olive:#fff;
}
:root[data-theme="dark"]{
  --glass-line:rgba(255,235,200,.09);
  --glass-shadow:0 18px 40px -20px rgba(0,0,0,.7);
  --bg-top:#1d1710; --bg-bottom:#130f0a;
  --on-olive:#11160a;
}
/* خلفية هادئة ومرتبة (2026-10-20): كريمي ثابت بتدرّج خفيف جدًا من فوق لتحت، بدون هالات ملونة ولا حركة */
body.olv-glass::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, var(--bg-top) 0%, var(--ink) 38%, var(--bg-bottom) 100%);
}
.olv-glass .top{
  margin:10px 12px 0; top:10px; border-radius:22px;
  background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-line);
}
.olv-glass .tabs{background:transparent; border-bottom:0;}
@media (max-width:640px){
  .olv-glass .top{margin:8px 8px 0; top:8px; border-radius:18px;}
}
@media (prefers-reduced-transparency: reduce){
  .olv-glass .top{background:var(--ink-2); -webkit-backdrop-filter:none; backdrop-filter:none;}
}

/* ---- بطاقات بنتو على كل الصفحات ----
   نفس روح لوحة الرئيسية: زوايا أنعم، حدود أخف، ورفعة خفيفة للبطاقات اللي
   بتنضغط. البطاقات نفسها بتضل معتمة (المحتوى والجداول لازم تنقرا) */
.olv-glass{--r-card:22px;}
.olv-glass .group{border-color:var(--hair-soft); padding:22px;}
.olv-glass .stats{gap:14px;}
.olv-glass .stat{border-color:var(--hair-soft); padding:18px;}
.olv-glass .stat .value{font-size:30px;}
.olv-glass .stat .stat-icon{border-radius:14px;}
.olv-glass .stats .stat:first-child .stat-icon{background:var(--olive); color:var(--on-olive);}
.olv-glass .table-wrap{border-radius:14px;}
.olv-glass .btn{border-radius:14px;}
.olv-glass .field input, .olv-glass .field select, .olv-glass .field textarea{border-radius:14px;}
.olv-glass .olv-modal-backdrop > *, .olv-glass .olv-failed-box{border-radius:22px;}
/* صفحة الدخول: البطاقة زجاج فوق الهالة */
.olv-glass .center-card{
  border-radius:26px; background:var(--glass); border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-line);
}
@media (hover:hover) and (pointer:fine){
  .olv-glass .stat:hover{transform:translateY(-2px);}
}
@media (max-width:640px){
  .olv-glass .group{padding:18px; border-radius:20px;}
}
@media (prefers-reduced-transparency: reduce){
  .olv-glass .center-card{background:var(--ink-2); -webkit-backdrop-filter:none; backdrop-filter:none;}
}
/* أشرطة النِّسَب (التقارير وغيرها) بنفس شريط طرق الدفع بالرئيسية: زيتوني سادة ومدوّر */
.olv-glass .bar-row .bar-track{border-radius:999px;}
.olv-glass .bar-row .bar-fill{background:var(--olive); border-radius:999px;}

/* ===== تحميل وانتقالات ناعمة =====
   1) التنقل بين الصفحات: المتصفحات الحديثة بتعمل تلاشي قصير بين الصفحة القديمة والجديدة
      بدل الوميض الأبيض (View Transitions). المتصفح القديم بيتجاهلها وبيضل التنقل عادي.
   2) «جاري التحميل...»: layout.js بيبدّلها بأشرطة رمادية بشكل المحتوى (skeleton) لحتى توصل البيانات.
   3) أقسام الصفحة بتطلع ورا بعض بفرق بسيط بدل ما تطلع كلها مرة وحدة. */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:olv-vt-out .14s var(--ease) both;}
::view-transition-new(root){animation:olv-vt-in .22s var(--ease) both;}
@keyframes olv-vt-out{to{opacity:0;}}
@keyframes olv-vt-in{from{opacity:0; transform:translateY(6px);}}
.wrap > .group:nth-child(2){animation-delay:.04s;}
.wrap > .group:nth-child(3){animation-delay:.08s;}
.wrap > .group:nth-child(4){animation-delay:.12s;}
.wrap > .group:nth-child(n+5){animation-delay:.16s;}
.olv-skel{display:flex; flex-direction:column; gap:10px; padding:6px 0;}
td .olv-skel{padding:4px 2px;}
.olv-skel i{
  display:block; height:12px; border-radius:999px; max-width:100%;
  background:linear-gradient(90deg, var(--hair-soft) 0%, var(--hair) 50%, var(--hair-soft) 100%);
  background-size:200% 100%; animation:olv-shimmer 1.3s linear infinite;
}
.olv-skel i:nth-child(1){width:92%;}
.olv-skel i:nth-child(2){width:74%;}
.olv-skel i:nth-child(3){width:58%;}
.olv-skel.one i{width:min(220px, 70%);}
.olv-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@keyframes olv-shimmer{from{background-position:100% 0;} to{background-position:-100% 0;}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){animation:none;}
  .wrap > .group{animation-delay:0s !important;}
  .olv-skel i{animation:none;}
}

/* شاشات فاضية (olvEmptyStates بـ layout.js): أيقونة بدائرة هادية + النص + زر الخطوة الجاية إذا في */
.olv-empty{display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:26px 12px !important; color:var(--muted);}
td.olv-empty{display:table-cell !important;}
td.olv-empty > *{display:block; margin-inline:auto;}
td.olv-empty > * + *{margin-top:8px;}
td.olv-empty > .btn{display:inline-flex; margin-top:12px;}
.olv-empty-ic{width:46px; height:46px; border-radius:15px; display:grid !important; place-items:center; background:var(--hair-soft); color:var(--gold-hi);}
.olv-empty-ic .icon{width:22px; height:22px;}
.olv-empty-tx{font-size:13.5px; line-height:1.6; max-width:42ch;}
.olv-empty .btn{margin-top:4px;}
.olv-empty a.btn{text-decoration:none;}

/* إحساس تطبيق مثبّت عالموبايل (viewport-fit=cover بكل الصفحات):
   - الحواف: بالعرض على الآيفون النوتش ما بيغطي المحتوى
   - أي حقل بخط أصغر من 16px بيخلي سفاري يزوم لحاله لما تضغط عليه، فعلى اللمس منرفعه لـ 16px
   - السحب المطاطي للصفحة ما بيعمل تحديث بالغلط وسط الشغل */
body{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);}
@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{font-size:max(16px, 1em) !important;}
}
@media (display-mode:standalone){
  html, body{overscroll-behavior-y:none;}
}