/* ═══════════════════════════════════════════
   SERVO v5.0 — Gold & White Theme
   ═══════════════════════════════════════════ */

:root {
  /* ─── أبيض نقي بالكامل — بدون أي صبغة كريمية ─── */
  --bg:            #FFFFFF;
  --bg2:           #F7F5F0;
  --bg3:           #FFFFFF;
  --bg4:           #F0E6CE;

  /* ─── ذهبي فخم (الهوية الأساسية) ─── */
  --gold:          #B8924A;
  --gold2:         #D4AF67;
  --gold3:         #8A6A30;
  --gold4:         #E8D9B5;
  --gold-glow:     rgba(184,146,74,0.13);
  --gold-glow2:    rgba(184,146,74,0.22);

  /* ─── اللون الرئيسي = ذهبي ─── */
  --primary:       #B8924A;
  --primary2:      #D4AF67;
  --primary3:      #8A6A30;
  --primary-glow:  rgba(184,146,74,0.13);
  --primary-glow2: rgba(184,146,74,0.22);

  /* ─── ذهبي مشبع مخصص للهيدر/الفوتر ─── */
  --header-gold:   #9C7A38;
  --header-gold2:  #B8944E;

  /* ─── نصوص — أسود واضح، ورمادي محايد للثانوي ─── */
  --txt:           #141414;
  --txt2:          #4A4A4A;
  --txt3:          #7D7D7D;
  --txt4:          #B8B8B8;

  /* ─── إطارات ذهبية خفيفة ─── */
  --bdr:           rgba(184,146,74,0.35);
  --bdr2:          rgba(184,146,74,0.16);
  --bdr3:          rgba(184,146,74,0.08);

  /* ─── حالات ─── */
  --ok:    #2E8A6E;  --ok2:   #4FAA8E;
  --warn:  #B37A2A;  --warn2: #D0985A;
  --bad:   #C23A4F;  --bad2:  #D65A70;
  --info:  #2E6A9A;  --info2: #4E8ABA;

  /* ─── خطوط ─── */
  --f-head: 'Cairo', sans-serif;
  --f-body: 'Tajawal', sans-serif;
  --f-disp: 'Playfair Display', serif;

  /* ─── حواف ─── */
  --r1: 10px;  --r2: 14px;  --r3: 20px;
  --r4: 28px; --rF: 9999px;
  --h-nav: 68px;

  /* ─── انتقالات ─── */
  --t1: 0.18s ease;
  --t2: 0.28s ease;
  --t3: 0.45s ease;

  /* ─── ظلال محايدة ─── */
  --sh1: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.06), 0 0 0 1px var(--bdr3);
  --sh2: 0 4px 12px rgba(0,0,0,0.07), 0 10px 30px rgba(0,0,0,0.09), 0 0 0 1px var(--bdr2);
  --sh3: 0 8px 24px rgba(0,0,0,0.10), 0 20px 50px rgba(0,0,0,0.14), 0 0 0 1px var(--bdr2);
  --sh-gold: 0 0 0 3px var(--gold-glow), 0 0 0 1px var(--bdr);
  --sh-inset: inset 0 1px 3px rgba(0,0,0,0.05);
}

/* ─── الوضع الليلي ─── */
body.theme-dark{
  --bg:            #0C0904;
  --bg2:           #131008;
  --bg3:           #1A1510;
  --bg4:           #060402;

  --gold:          #C9A84C;
  --gold2:         #E8C56D;
  --gold3:         #B09040;
  --gold4:         #5A4520;

  --gold-glow:     rgba(201,168,76,0.15);
  --gold-glow2:    rgba(201,168,76,0.25);

  --primary:       #C9A84C;
  --primary2:      #E8C56D;
  --primary3:      #B09040;
  --primary-glow:  rgba(201,168,76,0.15);
  --primary-glow2: rgba(201,168,76,0.25);

  --txt:           #F2E8D0;
  --txt2:          #CDB98A;
  --txt3:          #8A7A55;
  --txt4:          #5A4E35;

  --bdr:           rgba(201,168,76,0.45);
  --bdr2:          rgba(201,168,76,0.20);
  --bdr3:          rgba(201,168,76,0.08);

  --ok:    #5FA093;  --ok2:   #80BFB0;
  --warn:  #C29868;  --warn2: #DAB588;
  --bad:   #C8586E;  --bad2:  #D87890;
  --info:  #5A85B0;  --info2: #80A8D0;

  --sh1: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px var(--bdr3);
  --sh2: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 1px var(--bdr2);
  --sh3: 0 12px 44px rgba(0,0,0,0.6), 0 0 0 1px var(--bdr2);
  --sh-gold: 0 0 0 3px var(--gold-glow), 0 0 0 1px var(--bdr);
  --sh-inset: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* ── RESET ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--txt);
  direction:rtl;
  min-height:100vh;
  line-height:1.75;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
input,select,textarea{font-family:inherit}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--gold4);border-radius:var(--rF)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ── MONOCHROME ICON SYSTEM (SVG, لون واحد) ── */
.icon{
  display:inline-block;width:1em;height:1em;
  vertical-align:-0.14em;
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.icon-fill{fill:currentColor;stroke:none;}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar{
  position:sticky;top:0;z-index:300;
  height:var(--h-nav);
  background:var(--bg3);
  border-bottom:2px solid var(--gold);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  box-shadow:0 6px 24px rgba(60,45,20,0.14), 0 1px 0 var(--gold2);
}

/* يمين: الدور + اسم المستخدم */
.nav-right-content{display:flex;align-items:center;gap:10px;min-width:0;}
.nav-role-label{font-size:0.72rem;font-weight:700;color:var(--txt3);letter-spacing:1px;white-space:nowrap;text-transform:uppercase;}
.nav-username-inline{font-size:0.86rem;font-weight:800;color:var(--gold3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* وسط: شعار + اسم المطعم/سيرفو */
.nav-center{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:row;align-items:center;gap:10px;
  pointer-events:none;
}
.nav-servo-icon{
  height:36px;width:36px;object-fit:contain;
  filter: drop-shadow(0 1px 3px rgba(60,45,20,0.2));
}
.nav-brand{
  font-family:var(--f-disp);
  font-size:1.5rem;font-weight:700;letter-spacing:3px;
  color:var(--gold3);white-space:nowrap;
}
.nav-brand-stack{
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.nav-brand-ar,
.nav-brand-en{
  font-family:var(--f-disp);
  font-size:1.15rem;font-weight:700;
  letter-spacing:2px;line-height:1.2;
  background:linear-gradient(90deg,var(--gold3) 0%,var(--gold4) 30%,var(--gold2) 50%,var(--gold4) 70%,var(--gold3) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 4s linear infinite;white-space:nowrap;
}
.nav-brand-en{
  font-size:.8rem;letter-spacing:4px;opacity:.9;
}
.nav-brand-img{
  height:40px;
  width:auto;
  max-width:120px;
  object-fit:contain;
}

/* يسار: كل الأزرار */
.nav-left-actions{display:flex;align-items:center;gap:8px;direction:ltr;}
.nav-logout-text{
  font-size:.8rem;font-weight:700;color:var(--gold3);
  padding:7px 16px;border:1px solid var(--bdr2);border-radius:var(--r2);
  transition:all var(--t1);white-space:nowrap;background:var(--bg3);
}
.nav-logout-text:hover{background:rgba(156,74,66,.07);border-color:var(--bad2);color:var(--bad);}
.nav-icon-btn{
  width:32px;height:32px;border-radius:var(--r2);
  border:none;background:none;
  color:var(--gold3);display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;transition:all var(--t1);flex-shrink:0;
}
.nav-icon-btn:hover{color:var(--gold);transform:scale(1.12);}
.nav-icon-btn svg{width:19px;height:19px;}
.nav-notif-wrap{position:relative;}
.nav-notif-dot{
  position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--bad2);border:2px solid var(--bg3);
  font-size:8px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;
}

/* ══ SIDEBAR TOGGLE (mobile) ════════════════ */
.sidebar-toggle{
  display:none;writing-mode:vertical-rl;text-orientation:mixed;
  background:var(--gold3);color:#fff;
  border:none;font-family:var(--f-head);font-weight:700;
  font-size:0.75rem;letter-spacing:2px;padding:20px 8px;cursor:pointer;
  border-radius:0 var(--r2) var(--r2) 0;
  position:fixed;top:50%;transform:translateY(-50%);left:0;z-index:250;
  transition:all var(--t2);box-shadow:var(--sh2);
}
.sidebar-toggle:hover{background:var(--gold2);}

/* ══ LAYOUT ═════════════════════════════════ */
.layout{display:flex;min-height:calc(100vh - var(--h-nav));flex:1;}

.sidebar{
  width:235px;flex-shrink:0;
  background:linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  border-left:1px solid var(--bdr2);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.6), 2px 0 16px rgba(60,45,20,0.04);
  padding:18px 0 80px;
  position:sticky;top:var(--h-nav);
  height:calc(100vh - var(--h-nav));
  overflow-y:auto;
  transition:transform var(--t2);
  scrollbar-width:thin;
  scrollbar-color:var(--gold4) transparent;
}
.sidebar-head{padding:12px 18px;border-bottom:1px solid var(--bdr2);margin-bottom:8px;}
.sidebar-head-name{font-size:0.84rem;font-weight:800;color:var(--gold3);}
.sidebar-head-sub{font-size:0.7rem;color:var(--txt3);margin-top:3px;}

.sb-section{padding:10px 18px 5px;font-size:0.64rem;font-weight:700;color:var(--txt3);letter-spacing:1.5px;text-transform:uppercase;opacity:.8;}
.sb-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;width:100%;text-align:right;
  color:var(--txt2);font-size:0.84rem;font-weight:700;
  border:none;background:none;font-family:inherit;
  transition:all var(--t1);cursor:pointer;
  border-right:3px solid transparent;position:relative;
}
.sb-item:hover{background:var(--gold-glow);color:var(--gold3);}
.sb-item.active{background:rgba(184,146,74,0.1);color:var(--gold3);border-right-color:var(--gold);}
.sb-icon{font-size:1.05rem;min-width:20px;opacity:0.85;color:var(--gold3);}
.sb-badge{margin-right:auto;margin-left:0;background:var(--bad2);color:#fff;border-radius:var(--rF);padding:1px 7px;font-size:9px;font-weight:700;}

/* ══════════════════════════════════════════════
   BOTTOM NAV — شريط التحكم السفلي (موبايل فقط)
   يستبدل قائمة الهامبرغر الجانبية بأزرار ثابتة في الأسفل يسهل الوصول لها بالإبهام
══════════════════════════════════════════════ */
.bottom-nav{
  display:none; /* hd-mob تتكفّل بإظهاره عند max-width:900px */
  position:fixed;bottom:0;left:0;right:0;z-index:401;
  background:var(--bg3);
  border-top:1px solid var(--bdr2);
  box-shadow:0 -4px 20px rgba(30,20,10,0.10);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  align-items:stretch;justify-content:space-around;
  gap:2px;
}
.bn-item{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;font-family:var(--f-head);
  color:var(--txt3);padding:6px 2px;border-radius:var(--r2);
  transition:all var(--t1);cursor:pointer;
}
.bn-item svg{width:20px;height:20px;}
.bn-item span{font-size:.62rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.bn-item.active{color:var(--gold3);}
.bn-item:active{background:var(--gold-glow);}
.bn-item .bn-badge{
  position:absolute;transform:translate(10px,-8px);
  background:var(--bad2);color:#fff;border-radius:var(--rF);
  min-width:14px;height:14px;padding:0 3px;font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.main{flex:1;padding:30px;overflow-x:hidden;min-width:0;background:var(--bg);}

.sec{display:none;animation:fadeIn .3s ease;}
.sec.active{display:block;}

/* إطار تجميعي لمحتوى كل قسم — يمنع شعور التفرّق */
.sec-frame{
  background:var(--bg3);border:1px solid var(--bdr2);
  border-radius:var(--r3);padding:24px;
  box-shadow:var(--sh1);
}

/* ══ PAGE HEADER ════════════════════════════ */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--bdr2);flex-wrap:wrap;gap:12px;}
.ph-title{font-size:1.3rem;font-weight:800;color:var(--gold3);font-family:var(--f-head);letter-spacing:-.02em;}
.ph-sub{font-size:0.78rem;color:var(--txt3);margin-top:3px;}

/* ══ CARDS ══════════════════════════════════ */
.card{
  background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r3);
  padding:22px;box-shadow:var(--sh1);transition:box-shadow var(--t2),border-color var(--t2),transform var(--t2);
}
.card:hover{box-shadow:var(--sh2);}
.card:active{box-shadow:inset 0 3px 10px rgba(60,45,20,0.14);}
.card-sm{background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r2);padding:15px;transition:all var(--t2);}
.card-sm:hover{border-color:var(--gold);box-shadow:var(--sh1);transform:translateY(-1px);}
.card-sm:active{box-shadow:inset 0 2px 8px rgba(60,45,20,0.14);transform:translateY(0);}

.stat-card{
  background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r3);
  padding:22px;text-align:center;position:relative;overflow:hidden;transition:all var(--t2);
}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold4),var(--gold),var(--gold4));}
.stat-card:hover{border-color:var(--gold);box-shadow:var(--sh2);transform:translateY(-2px);}
.stat-val{font-family:var(--f-disp);font-size:2.1rem;font-weight:700;color:var(--gold3);line-height:1;}
.stat-lbl{font-size:0.74rem;color:var(--txt3);margin-top:6px;font-weight:600;}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:15px;margin-bottom:30px;}

/* ══ FORMS ══════════════════════════════════ */
.f-group{margin-bottom:15px;}
.f-label{display:block;font-size:0.74rem;font-weight:700;color:var(--gold3);margin-bottom:6px;letter-spacing:0.4px;}
.f-input,.f-select,.f-textarea{
  width:100%;background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--r2);
  padding:10px 13px;color:var(--txt);font-family:var(--f-head);font-size:0.88rem;
  transition:border-color var(--t1),box-shadow var(--t1);outline:none;
}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);background:var(--bg3);}
.f-select option{background:var(--bg3);color:var(--txt);}

/* ══ BUTTONS ════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border-radius:var(--r2);border:1px solid var(--bdr);
  font-family:var(--f-head);font-size:0.85rem;font-weight:700;
  cursor:pointer;transition:all var(--t1);white-space:nowrap;
}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

.btn-gold{
  background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));
  color:#fff;border-color:var(--gold3);
  box-shadow:0 3px 14px rgba(184,146,74,0.3);
}
.btn-gold:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 5px 22px rgba(184,146,74,0.42);transform:translateY(-1px);}

.btn-out{background:var(--bg3);color:var(--gold3);border-color:var(--bdr);}
.btn-out:hover:not(:disabled){background:var(--gold-glow);}

.btn-ghost{background:var(--bg2);border-color:var(--bdr2);color:var(--txt2);}
.btn-ghost:hover:not(:disabled){background:var(--gold-glow);border-color:var(--gold);color:var(--gold3);}

.btn-bad{background:linear-gradient(135deg,var(--bad),var(--bad2));color:#fff;border-color:var(--bad);}
.btn-bad:hover:not(:disabled){filter:brightness(1.1);}
.btn-ok{background:linear-gradient(135deg,var(--ok),var(--ok2));color:#fff;border-color:var(--ok);}
.btn-ok:hover:not(:disabled){filter:brightness(1.1);}
.btn-warn{background:linear-gradient(135deg,var(--warn),var(--warn2));color:#fff;border-color:var(--warn);}

.btn-xs{padding:5px 12px;font-size:0.72rem;border-radius:var(--r1);}
.btn-sm{padding:7px 15px;font-size:0.78rem;}
.btn-lg{padding:14px 30px;font-size:1rem;border-radius:var(--r3);}
.btn-xl{padding:16px 38px;font-size:1.05rem;border-radius:var(--r3);}
.btn-block{width:100%;}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r2);}

/* ══ MODAL ══════════════════════════════════ */
.overlay{
  display:none;position:fixed;inset:0;background:rgba(40,30,15,0.45);backdrop-filter:blur(6px);
  z-index:1000;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;
}
.overlay.on{display:flex;}
.modal{
  background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r4);padding:30px;
  width:100%;max-width:520px;box-shadow:var(--sh3);animation:mIn .25s ease;margin:auto;
  max-height:calc(100vh - 40px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--gold4) transparent;
}
@keyframes mIn{from{opacity:0;transform:scale(.96) translateY(-12px)}to{opacity:1;transform:none}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--bdr2);}
.modal-title{font-size:1.08rem;font-weight:800;color:var(--gold3);}
.modal-x{background:var(--bg2);border:1px solid var(--bdr2);color:var(--txt3);width:30px;height:30px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;font-size:1.05rem;transition:all var(--t1);}
.modal-x:hover{background:rgba(156,74,66,.1);border-color:var(--bad2);color:var(--bad);}

/* ══ TABLE ══════════════════════════════════ */
.tbl-wrap{overflow-x:auto;border-radius:var(--r3);border:1px solid var(--bdr2);box-shadow:var(--sh1);}
table{width:100%;border-collapse:collapse;background:var(--bg3);}
thead tr{background:var(--bg2);}
th{padding:13px 15px;text-align:center;font-size:0.72rem;font-weight:800;color:var(--gold3);letter-spacing:0.7px;border-bottom:1px solid var(--bdr2);white-space:nowrap;}
td{padding:12px 15px;font-size:0.83rem;border-bottom:1px solid var(--bdr3);vertical-align:middle;text-align:center;color:var(--txt2);}
tr:hover td{background:var(--bg2);}
tr:last-child td{border-bottom:none;}

/* ══ BADGES ═════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:var(--rF);font-size:0.7rem;font-weight:700;white-space:nowrap;}
.b-wait  {background:rgba(160,120,48,.12);color:var(--warn3,#A07830);border:1px solid rgba(160,120,48,.3);}
.b-conf  {background:rgba(74,106,138,.12);color:var(--info);border:1px solid rgba(74,106,138,.3);}
.b-prep  {background:rgba(124,90,160,.12);color:#7C5AA0;border:1px solid rgba(124,90,160,.3);}
.b-ready {background:rgba(74,120,86,.12);color:var(--ok);border:1px solid rgba(74,120,86,.3);}
.b-done  {background:rgba(120,110,95,.12);color:var(--txt3);border:1px solid rgba(120,110,95,.3);}
.b-cancel{background:rgba(156,74,66,.12);color:var(--bad);border:1px solid rgba(156,74,66,.3);}
.b-active{background:rgba(74,120,86,.12);color:var(--ok);border:1px solid rgba(74,120,86,.3);}

/* ══ ORDER CARDS ════════════════════════════ */
.order-card{
  background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r3);padding:19px;
  cursor:pointer;transition:all var(--t2);position:relative;overflow:hidden;
}
.order-card::after{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--gold);opacity:0;transition:opacity var(--t1);}
.order-card:hover{border-color:var(--gold);box-shadow:var(--sh2);transform:translateY(-2px);}
.order-card:active{box-shadow:inset 0 3px 10px rgba(60,45,20,0.16);transform:translateY(0);}
.order-card:hover::after{opacity:1;}
.order-card.urgent{border-color:var(--bad2);}
.order-card.urgent::after{background:var(--bad2);opacity:1;}

.o-id{font-family:var(--f-disp);color:var(--gold3);font-weight:700;font-size:1.05rem;}
.o-total{font-family:var(--f-disp);color:var(--gold3);font-weight:700;font-size:1.15rem;}
.tag-dine{background:var(--gold-glow);color:var(--gold3);border:1px solid var(--bdr2);padding:3px 10px;border-radius:var(--rF);font-size:.7rem;font-weight:700;}

/* ══ ORDER STRIP — عرض مضغوط بعرض الشاشة، التفاصيل الكاملة تظهر بمودال عند الضغط ══ */
.order-strip{
  display:flex;align-items:center;gap:12px;
  background:var(--bg3);border:1.5px solid var(--bdr);border-radius:var(--r2);
  padding:12px 16px;margin-bottom:10px;cursor:pointer;
  animation:slideR .35s ease;transition:all var(--t1);width:100%;
}
.order-strip:hover{border-color:var(--gold);box-shadow:var(--sh1);}
.order-strip:active{background:var(--gold-glow);transform:scale(.99);}
.order-strip.late,.order-strip.urgent{border-color:var(--bad2);}
@keyframes slideR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.order-strip-id{
  font-family:'Cairo',sans-serif;font-weight:900;color:var(--gold3);font-size:1rem;
  flex-shrink:0;min-width:38px;
}
.order-strip-info{flex:1;min-width:0;}
.order-strip-name{font-weight:700;font-size:.85rem;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.order-strip-meta{font-size:.68rem;color:var(--txt3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.order-strip-price{font-weight:800;color:var(--gold3);font-size:.85rem;flex-shrink:0;font-family:'Cairo',sans-serif;}
.order-strip-chev{color:var(--txt4);flex-shrink:0;}
.order-strip-badge{
  flex-shrink:0;padding:3px 9px;border-radius:var(--rF);font-size:.64rem;font-weight:700;
}
.tag-del {background:rgba(74,106,138,.1);color:var(--info);border:1px solid rgba(74,106,138,.25);padding:3px 10px;border-radius:var(--rF);font-size:.7rem;font-weight:700;}

/* ══ DISH CARDS ═════════════════════════════ */
.dish-card{background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r3);overflow:hidden;transition:all var(--t2);cursor:pointer;box-shadow:var(--sh1);}
.dish-card:hover{border-color:var(--gold);box-shadow:var(--sh2);transform:translateY(-3px);}
.dish-img{width:100%;height:170px;object-fit:cover;background:var(--bg2);}
.dish-img-ph{width:100%;height:170px;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--gold4);}
.dish-img-ph svg{width:40px;height:40px;}
.dish-info{padding:15px;}
.dish-name{font-weight:700;font-size:.93rem;margin-bottom:4px;color:var(--txt);}
.dish-desc{font-size:.76rem;color:var(--txt3);margin-bottom:9px;line-height:1.6;}
.dish-price{color:var(--gold3);font-weight:700;font-family:var(--f-disp);font-size:1.1rem;}

/* ══ UPLOAD ═════════════════════════════════ */
.upload-area{border:2px dashed var(--gold4);border-radius:var(--r3);padding:30px;text-align:center;cursor:pointer;background:var(--bg2);transition:all var(--t1);}
.upload-area:hover{border-color:var(--gold);background:var(--gold-glow);}
.img-prev{width:100%;height:145px;object-fit:cover;border-radius:var(--r2);border:1px solid var(--bdr2);}

/* ══ CHART BARS ═════════════════════════════ */
.bar-wrap{margin-bottom:13px;}
.bar-lbl{font-size:.76rem;color:var(--txt2);margin-bottom:4px;display:flex;justify-content:space-between;font-weight:600;}
.bar-bg{height:9px;background:var(--bg2);border-radius:var(--rF);overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold4),var(--gold));border-radius:var(--rF);transition:width 1.2s ease;}

/* ══ TABS ════════════════════════════════════ */
.tabs{display:flex;gap:4px;background:var(--bg2);border-radius:var(--r2);padding:5px;border:1px solid var(--bdr2);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{flex-shrink:0;padding:7px 16px;border-radius:var(--r1);font-size:.76rem;font-weight:700;cursor:pointer;color:var(--txt3);transition:all var(--t1);background:none;border:none;font-family:inherit;}
.tab-btn.on{background:var(--bg3);color:var(--gold3);border:1px solid var(--bdr2);box-shadow:var(--sh1);}

/* ══ SUBSCRIPTION BANNER ════════════════════ */
.sub-banner{border-radius:var(--r2);padding:12px 19px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem;border:1px solid var(--bdr2);background:var(--bg2);}

/* ══ TOAST ══════════════════════════════════ */
.toasts{position:fixed;top:calc(var(--h-nav) + 10px);left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:9px;min-width:300px;pointer-events:none;}
.toast{background:var(--bg3);border-radius:var(--r2);padding:12px 17px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh3);animation:tIn .25s ease;pointer-events:all;border:1px solid var(--bdr2);font-size:.85rem;color:var(--txt2);}
.toast-ok {border-color:var(--ok2);}
.toast-bad{border-color:var(--bad2);}
.toast-info{border-color:var(--gold);}
@keyframes tIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ══ LIVE DOT ═══════════════════════════════ */
.live{display:inline-block;width:7px;height:7px;background:var(--ok2);border-radius:50%;animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.5}}

.spin{width:18px;height:18px;border:2px solid var(--gold4);border-top-color:var(--gold);border-radius:50%;animation:spinR .7s linear infinite;display:inline-block;}
@keyframes spinR{to{transform:rotate(360deg)}}

.fp-loader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.fp-s{
  font-size:2.4rem;font-weight:900;
  background:linear-gradient(90deg,var(--gold3) 0%,var(--gold2) 30%,var(--gold) 50%,var(--gold2) 70%,var(--gold3) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 3.5s linear infinite;letter-spacing:2px;
}
.fp-food{
  display:flex;align-items:flex-end;gap:2px;margin:8px 0 14px;
  font-size:2.6rem;line-height:1;animation:foodBob 2.2s ease-in-out infinite;
}
.fp-food span:first-child{transform:rotate(-8deg);}
.fp-food span:last-child{transform:rotate(8deg);margin-right:-10px;}
@keyframes foodBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.fp-txt{color:var(--gold3);font-family:var(--f-head);font-weight:700;font-size:.82rem;letter-spacing:1px;opacity:.85;}

/* ══ BANK BOX ═══════════════════════════════ */
.bank-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);padding:19px;margin-bottom:19px;}
.bank-hd{display:flex;align-items:center;gap:13px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--bdr3);}
.bank-logo-wrap{width:48px;height:60px;border-radius:var(--r2);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:3px;box-shadow:var(--sh1);}
.bank-logo{width:100%;height:100%;object-fit:contain;}
.bank-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;}
.bank-lbl{font-size:.73rem;color:var(--txt3);}
.bank-val{font-size:.86rem;font-weight:700;color:var(--txt);font-family:var(--f-disp);letter-spacing:.5px;}

/* ══ TRACKER ════════════════════════════════ */
.tracker{display:flex;align-items:flex-start;justify-content:center;padding:22px 10px;}
.tr-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}
.tr-step::after{content:'';position:absolute;top:18px;right:-50%;width:100%;height:2px;background:var(--bdr2);z-index:0;transition:background .5s;}
.tr-step:last-child::after{display:none;}
.tr-step.done::after{background:var(--gold);}
.tr-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--bdr2);position:relative;z-index:1;transition:all .5s;background:var(--bg3);color:var(--txt3);}
.tr-icon svg{width:17px;height:17px;}
.tr-lbl{font-size:9.5px;color:var(--txt3);text-align:center;margin-top:6px;font-weight:700;}
.tr-step.done .tr-icon{background:var(--ok);border-color:var(--ok);color:#fff;}
.tr-step.curr .tr-icon{background:var(--gold-glow);border-color:var(--gold);color:var(--gold3);animation:pulse 1.6s infinite;}

/* ══ DIVIDER ════════════════════════════════ */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold4),transparent);margin:19px 0;}

/* ══ MISC ═══════════════════════════════════ */
.gold{color:var(--gold3);}
.muted{color:var(--txt3);}
.bold{font-weight:700;}
.flex{display:flex;}
.fc{display:flex;align-items:center;justify-content:center;}
.fb{display:flex;align-items:center;justify-content:space-between;}
.fw{flex-wrap:wrap;}
.g4{gap:4px;}.g8{gap:8px;}.g12{gap:12px;}.g16{gap:16px;}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px;}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;}
.g4g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;}
.mt4{margin-top:4px;}.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}
.mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mb16{margin-bottom:16px;}.mb24{margin-bottom:24px;}
.p12{padding:12px;}.p16{padding:16px;}.p20{padding:20px;}
.tc{text-align:center;}
.xs{font-size:.73rem;}.sm{font-size:.83rem;}.lg{font-size:1.1rem;}.xl{font-size:1.3rem;}
.hidden{display:none!important;}

@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideRight{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.anim-fade{animation:fadeIn .35s ease;}
.anim-slide{animation:slideRight .35s ease;}

/* ══ COLOR PICKER (محذوف من الاستخدام، مُبقى للتوافق) ══ */
.palette{display:none;}
.swatch{display:none;}
.color-picker-trigger{display:none;}

/* ══ RESPONSIVE ═════════════════════════════ */
@media(max-width:900px){
  .navbar{
    padding:0 10px;
    position:sticky;
  }
  .nav-center{
    position:static;
    transform:none;
    left:auto;
    flex:1;
    pointer-events:auto;
  }
  .nav-brand{font-size:.95rem;}
  .nav-brand-ar{font-size:.95rem;}
  .nav-brand-en{font-size:.62rem;letter-spacing:2px;}
  .nav-brand-img{height:28px;max-width:80px;}
  .nav-right-content{min-width:auto;}
  .sidebar-toggle{display:none !important;}
  /* السايدبار على الموبايل يصير "ورقة" منزلقة من الأسفل (تُفتح من زر "المزيد" في الشريط السفلي) */
  .sidebar{
    position:fixed;
    top:auto;bottom:0;right:0;left:0;
    width:100%;max-width:100%;
    height:auto;max-height:78vh;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
    z-index:400;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -8px 32px rgba(0,0,0,0.25);
    overflow-y:auto;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .sidebar.open{transform:translateY(0);}
  .sidebar-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(12,5,8,0.55);
    backdrop-filter:blur(3px);
    z-index:399;
  }
  .sidebar-overlay.show{display:block;}
  .main{padding:18px;padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .g2{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .g3,.g4g{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
  .stat-card{padding:12px 8px;}
  .stat-val{font-size:1.3rem;}
  .stat-lbl{font-size:.6rem;}
}
@media(max-width:480px){
  :root{--h-nav:56px;}
  .navbar{padding:0 8px;}
  .nav-brand{font-size:.88rem;}
  .nav-brand-ar{font-size:.88rem;}
  .nav-icon-btn{width:26px;height:26px;}
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
  .stat-card{padding:10px 6px;}
  .stat-val{font-size:1.1rem;}
  .stat-lbl{font-size:.56rem;}
  .g2{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .g3,.g4g{grid-template-columns:repeat(2,1fr);}
  .modal{padding:18px;}
  .main{padding:14px;padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .nav-logout-text{font-size:.68rem;padding:4px 8px;}
}

@media print{
  .navbar,.sidebar,.btn,.sidebar-toggle,.no-print{display:none!important;}
  body{background:#fff;color:#000;}
  th,td{color:#000!important;}
}

/* ══════════════════════════════════════════════
   SERVO Vertical Brand Strip (شريط جانبي رقيق دائم)
══════════════════════════════════════════════ */
.servo-strip{
  position:fixed;top:auto;bottom:90px;left:0;transform:none;
  z-index:240;display:flex;flex-direction:column;align-items:center;
  background:var(--bg3);border:1px solid var(--gold);border-left:none;
  border-radius:0 var(--r3) var(--r3) 0;
  padding:14px 6px;box-shadow:var(--sh2);
  cursor:pointer;transition:all .25s ease;
}
.servo-strip:hover{padding-left:10px;box-shadow:var(--sh3);}
.servo-strip-text{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-disp);font-weight:700;
  font-size:.95rem;letter-spacing:3px;color:var(--gold3);
  transform:rotate(180deg);
}
.servo-strip-sub{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:.55rem;color:var(--txt3);letter-spacing:1px;
  margin-top:8px;transform:rotate(180deg);
  max-height:140px;overflow:hidden;
}

/* Popover info on hover/click */
.servo-strip-pop{
  position:fixed;bottom:90px;left:54px;top:auto;transform:scale(.94);
  transform-origin:bottom left;
  z-index:241;background:var(--bg3);border:1px solid var(--gold);
  border-radius:var(--r3);padding:20px;width:240px;
  box-shadow:var(--sh3);opacity:0;pointer-events:none;
  transition:all .22s ease;text-align:center;
}
.servo-strip-pop.show{opacity:1;transform:scale(1);pointer-events:all;}
.servo-strip-pop img{width:44px;height:44px;margin:0 auto 10px;}
.servo-strip-pop .ssp-title{color:var(--gold3);font-weight:800;font-family:var(--f-disp);font-size:1.05rem;}
.servo-strip-pop .ssp-sub{color:var(--txt3);font-size:.68rem;margin:6px 0 14px;line-height:1.6;}
.servo-strip-pop .ssp-contact{
  background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--r2);
  padding:10px;font-size:.72rem;color:var(--txt2);
}
.servo-strip-pop .ssp-contact strong{color:var(--gold3);display:block;margin-bottom:3px;}

@media(max-width:900px){
  .servo-strip{padding:10px 5px;}
  .servo-strip-text{font-size:.8rem;}
  .servo-strip-sub{display:none;}
  .servo-strip-pop{left:48px;width:210px;padding:16px;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — تحسينات شاملة لكل الشاشات
══════════════════════════════════════════════ */

/* ── Smooth transitions for theme change ── */
body, .navbar, .sidebar, .card, .card-sm, .stat-card, .order-card,
.btn, .f-input, .modal, .tabs, .tab-btn, .sb-item {
  transition: background-color .3s ease, border-color .3s ease, color .2s ease;
}

/* ── Extra small phones (< 360px) ── */
@media(max-width:360px){
  :root{--h-nav:54px;}
  .nav-brand-ar{font-size:.85rem;}
  .nav-brand-en{font-size:.55rem;}
  .nav-left-actions{gap:4px;}
  .nav-icon-btn{width:28px;height:28px;}
  .nav-logout-text{padding:5px 10px;font-size:.72rem;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
  .stat-val{font-size:1rem;}
  .stat-lbl{font-size:.52rem;}
  .main{padding:10px;padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .ph-title{font-size:1rem;}
  .btn{padding:9px 14px;font-size:.8rem;}
  .modal{padding:14px;}
  .tabs{gap:2px;padding:3px;}
  .tab-btn{font-size:.72rem;padding:7px 10px;}
  .order-card{padding:14px;}
}

/* ── Tablets (600px–900px) ── */
@media(min-width:601px) and (max-width:900px){
  .stats-grid{grid-template-columns:repeat(4,1fr);}
  .g2{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(3,1fr);}
  .main{padding:22px;padding-bottom:calc(84px + env(safe-area-inset-bottom));}
}

/* ── Touch targets — minimum 44px for mobile ── */
@media(max-width:900px){
  .btn{min-height:44px;}
  .tab-btn{min-height:40px;}
  .f-input{font-size:16px;} /* منع zoom على iOS */
  .sb-item{min-height:44px;}
  .qty-btn{width:32px;height:32px;}
  .order-card .btn{min-height:44px;}
}

/* ══════════════════════════════════════════════
   ANIMATIONS — حركات سلسة واحترافية
══════════════════════════════════════════════ */

@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 var(--gold-glow)}50%{box-shadow:0 0 0 8px transparent}}

/* تطبيق الانيميشن على العناصر */
.stat-card{animation:slideUp .4s ease both;}
.stat-card:nth-child(1){animation-delay:.05s}
.stat-card:nth-child(2){animation-delay:.1s}
.stat-card:nth-child(3){animation-delay:.15s}
.stat-card:nth-child(4){animation-delay:.2s}

.order-card{animation:slideUp .35s ease both;}
.card{animation:fadeIn .3s ease both;}
.modal{animation:scaleIn .25s ease both;}
.sec.active{animation:fadeIn .3s ease both;}
.anim-fade{animation:fadeIn .35s ease both;}

/* badge نابض على الأيقونات */
.nav-notif-dot:not(.hidden){animation:bounceIn .4s ease;}
.sb-badge:not(.hidden){animation:bounceIn .3s ease;}

/* hover على بطاقات الطلبات */
.order-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.order-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--gold);}

/* زر الإرسال pulse عند التفعيل */
.btn-gold:not(:disabled):active{transform:scale(.97);}
.btn-gold.loading{animation:none;}

/* إطار ذهبي نابض على عناصر مهمة */
.urgent{animation:glowPulse 1.5s ease infinite;border-color:var(--bad2)!important;}

/* Sidebar items */
.sb-item{transition:all .18s ease;border-right:3px solid transparent;}
.sb-item.active,.sb-item:hover{border-right-color:var(--gold);background:var(--gold-glow);}

/* نافذة الإشعارات */
.toasts{animation:none;}
.toast{animation:slideInRight .3s ease;}


/* ══════════════════════════════════════════════
   MODERN DESIGN IMPROVEMENTS
══════════════════════════════════════════════ */

/* ── Typography upgrades ── */
h1,h2,h3,.ph-title,.nav-brand,.stat-val{
  font-family: var(--f-head);
  letter-spacing: -0.02em;
}
.nav-brand{
  font-family: var(--f-disp);
  letter-spacing: 0.08em;
}
.muted{ color: var(--txt3); }
.xs{ font-size: .75rem; }
.sm{ font-size: .85rem; }

/* ── Card upgrade — glassmorphism subtle ── */
.card{
  background: var(--bg3);
  border: 1px solid var(--bdr2);
  border-radius: var(--r3);
  padding: 20px;
  box-shadow: var(--sh1);
  transition: box-shadow var(--t2), border-color var(--t2), transform var(--t2);
  position: relative;
  overflow: hidden;
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 60%);
  pointer-events:none;
  border-radius: inherit;
}
body.theme-dark .card::before{
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
}

/* ── Stat cards upgrade ── */
.stat-card{
  background: var(--bg3);
  border: 1px solid var(--bdr2);
  border-radius: var(--r3);
  padding: 20px 18px;
  box-shadow: var(--sh1);
  position: relative;
  overflow: hidden;
  transition: all var(--t2);
}
.stat-card::after{
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:80px; height:80px;
  background: radial-gradient(circle at bottom right, var(--gold-glow2), transparent 70%);
  pointer-events:none;
}
.stat-card:hover{
  box-shadow: var(--sh2);
  border-color: var(--bdr);
  transform: translateY(-2px);
}
.stat-val{
  font-family: var(--f-head);
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold3);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.stat-lbl{
  font-size: .72rem;
  color: var(--txt3);
  margin-top: 5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Buttons upgrade ── */
.btn{
  border-radius: var(--r2);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: all var(--t1);
  position: relative;
  overflow: hidden;
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
  pointer-events:none;
  border-radius:inherit;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 50%, var(--gold3) 100%);
  border: 1px solid var(--gold3);
  box-shadow: 0 2px 8px rgba(184,146,74,0.3), 0 1px 2px rgba(184,146,74,0.2);
  color: #fff;
}
.btn-gold:hover:not(:disabled){
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold2) 50%, var(--gold) 100%);
  box-shadow: 0 4px 16px rgba(184,146,74,0.4), 0 2px 4px rgba(184,146,74,0.25);
  transform: translateY(-1px);
}
.btn-gold:active:not(:disabled){
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(184,146,74,0.3);
}

/* ── Input fields upgrade ── */
.f-input{
  border: 1.5px solid var(--bdr2);
  border-radius: var(--r2);
  padding: 11px 14px;
  background: var(--bg3);
  color: var(--txt);
  box-shadow: var(--sh-inset);
  transition: border-color var(--t1), box-shadow var(--t1);
  font-size: .9rem;
}
.f-input:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--sh-gold);
}
.f-input::placeholder{ color: var(--txt4); }

/* ── Order cards upgrade ── */
.order-card{
  border: 1.5px solid var(--bdr2);
  border-radius: var(--r3);
  padding: 18px;
  background: var(--bg3);
  box-shadow: var(--sh1);
  transition: all var(--t2);
}
.order-card:hover{
  border-color: var(--gold);
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}
.order-card.urgent{
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(150,60,52,0.12), var(--sh1);
}

/* ── Navbar upgrade ── */
.navbar{
  background: var(--bg3);
  border-bottom: 1px solid var(--bdr2);
  box-shadow: 0 1px 0 var(--bdr3), 0 4px 20px rgba(30,20,10,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-dark .navbar{
  box-shadow: 0 1px 0 var(--bdr3), 0 4px 20px rgba(0,0,0,0.3);
}

/* ── Tabs upgrade ── */
.tabs{
  background: var(--bg2);
  border: 1px solid var(--bdr3);
  border-radius: var(--r2);
  padding: 4px;
  display: inline-flex;
  gap: 2px;
}
.tab-btn{
  border-radius: calc(var(--r2) - 4px);
  padding: 8px 18px;
  font-size: .78rem;
  font-weight: 700;
  transition: all var(--t1);
  color: var(--txt3);
}
.tab-btn.on{
  background: var(--bg3);
  color: var(--gold3);
  box-shadow: var(--sh1);
}

/* ── Modal upgrade ── */
.modal{
  border: 1px solid var(--bdr2);
  border-radius: var(--r4);
  box-shadow: var(--sh3);
  background: var(--bg3);
}
.modal-hd{
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--bdr3);
}
.modal-title{
  font-weight: 800;
  font-family: var(--f-head);
  letter-spacing: -0.02em;
  color: var(--txt);
}

/* ── Section page headers ── */
.ph{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bdr3);
}
.ph-sub{
  font-size: .75rem;
  color: var(--txt3);
  margin-top: 2px;
  font-weight: 500;
}

/* ── Scrollbar upgrade ── */
::-webkit-scrollbar-track{ background: var(--bg2); border-radius: 9999px; }
::-webkit-scrollbar-thumb{ background: var(--bdr); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }

/* ── Table upgrade ── */
.tbl-wrap{
  border: 1px solid var(--bdr2);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: var(--sh1);
}
table{ border-collapse: collapse; width: 100%; }
thead{ background: linear-gradient(180deg, var(--bg2) 0%, var(--bg4) 100%); }
thead th{
  padding: 12px 14px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--gold3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bdr2);
}
tbody tr{
  border-bottom: 1px solid var(--bdr3);
  transition: background var(--t1);
}
tbody tr:last-child{ border-bottom: none; }
tbody tr:hover{ background: var(--gold-glow); }
tbody td{ padding: 11px 14px; font-size: .85rem; }

/* ── Badge upgrade ── */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--rF);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ── Form group upgrade ── */
.f-group{ margin-bottom: 16px; }
.f-label{
  font-size: .78rem;
  font-weight: 700;
  color: var(--txt2);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}


/* ══════════════════════════════════════════════
   MOBILE FIRST — تحسينات شاملة للهاتف
   ملاحظة: معظم المستخدمين على الهاتف
══════════════════════════════════════════════ */

/* ── Sidebar على الموبايل — أسهل للإغلاق ── */
@media(max-width:900px){
  /* ── ملاحظة: تعريف .sidebar و .sidebar-overlay الأساسي (كـ"ورقة" منزلقة من الأسفل)
     موجود في قسم RESPONSIVE أعلاه — لا نكرره هنا كي لا نُبطل عرضه الكامل (100%) ──── */

  /* الـ main بدون sidebar — مع الحفاظ على مساحة كافية أسفل الصفحة لشريط التنقل السفلي الثابت */
  .main{padding:14px 12px calc(84px + env(safe-area-inset-bottom));}

  /* جدول الطلبات يتحول لبطاقات */
  .tbl-wrap table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tbl-wrap tbody{display:block;width:100%;}
  .tbl-wrap thead{display:none;}
  .tbl-wrap tbody tr{
    display:flex;flex-direction:column;width:100%;box-sizing:border-box;
    padding:12px;margin-bottom:8px;
    background:var(--bg3);
    border:1px solid var(--bdr2);
    border-radius:var(--r2);
  }
  .tbl-wrap td{
    padding:4px 0;border:none;font-size:.82rem;
    display:flex;justify-content:space-between;width:100%;box-sizing:border-box;
  }
  .tbl-wrap td::before{
    content:attr(data-label);
    color:var(--txt3);font-size:.72rem;
    font-weight:600;flex-shrink:0;margin-left:8px;
  }

  /* tabs تملأ العرض */
  .tabs{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));}
  .tab-btn{padding:10px 6px;font-size:.72rem;}

  /* بطاقات الإحصائيات */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .stat-val{font-size:1.2rem;}

  /* أزرار الإجراءات */
  .order-actions{display:flex;flex-direction:column;gap:6px;}
  .order-actions .btn{width:100%;}

  /* ph header */
  .ph{flex-direction:column;align-items:flex-start;gap:10px;}
  .ph > div:last-child{width:100%;}
  .ph .btn{width:100%;}
}

/* ── الهاتف الصغير (480px وأقل) ── */
@media(max-width:480px){
  :root{--h-nav:58px;}

  /* Navbar */
  .nav-brand-ar{font-size:.9rem !important;}
  .nav-brand-en{font-size:.58rem !important;}
  .nav-icon-btn{width:34px;height:34px;}

  /* Modal */
  .overlay{padding:8px;}
  .modal{border-radius:var(--r3);padding:18px;}

  /* Stats 2 columns */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px;}

  /* Order cards أكثر إحكاماً */
  .order-card{padding:14px 12px;}
  .order-card .ph-title{font-size:.88rem;}

  /* Tabs */
  .tabs{gap:2px;padding:3px;}
  .tab-btn{font-size:.7rem;padding:8px 8px;min-height:38px;}

  /* form grid */
  .g2,.g3{grid-template-columns:1fr !important;}

  /* f-input أكبر للمس */
  .f-input{padding:12px 14px;font-size:16px;}

  /* تقليل padding الـ main */
  .main{padding:12px 10px;padding-bottom:calc(84px + env(safe-area-inset-bottom));}
}

/* ══════════════════════════════════════════════
   ANIMATIONS — تحسينات إضافية
══════════════════════════════════════════════ */

/* Sidebar slide animation */
.sidebar{transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease;}

/* Cards entrance animation */
.sec.active .order-card{animation:slideUp .3s ease both;}
.sec.active .order-card:nth-child(1){animation-delay:.04s}
.sec.active .order-card:nth-child(2){animation-delay:.08s}
.sec.active .order-card:nth-child(3){animation-delay:.12s}
.sec.active .order-card:nth-child(4){animation-delay:.16s}
.sec.active .order-card:nth-child(5){animation-delay:.2s}

/* Button press feedback */
.btn:active:not(:disabled){transform:scale(.97);transition:transform .1s;filter:brightness(.9);}

/* Modal animation */
.overlay.on .modal{animation:mIn .25s cubic-bezier(.4,0,.2,1);}

/* Page sections */
.sec.active{animation:fadeIn .25s ease both;}

/* Toast improved */
.toast{animation:slideInRight .3s cubic-bezier(.4,0,.2,1);}

/* Tab switch */
.tab-btn{transition:all .18s ease;}
.tab-btn.on{animation:scaleIn .2s ease;}

/* Order card status badge pulse */
.b-wait{animation:glowPulse 2s ease infinite;}

/* Stats cards stagger */
.stats-grid .stat-card:nth-child(1){animation-delay:.05s}
.stats-grid .stat-card:nth-child(2){animation-delay:.1s}
.stats-grid .stat-card:nth-child(3){animation-delay:.15s}
.stats-grid .stat-card:nth-child(4){animation-delay:.2s}

/* Smooth scroll */
html{scroll-behavior:smooth;}

/* Better tap highlight */
*{-webkit-tap-highlight-color:rgba(194,68,125,.15);}

/* ── تغيير لون واضح عند الضغط على أي عنصر تفاعلي بلوحة التحكم (وليس فقط الموبايل) ── */
.sb-item:active{background:var(--gold-glow2)!important;color:var(--gold3)!important;}
.bn-item:active{background:var(--gold-glow2);}
.tab-btn:active{background:var(--gold-glow2);color:var(--gold3);}
.nav-icon-btn:active,.icon-btn:active{background:var(--gold-glow2)!important;}
.order-card:active{border-color:var(--gold);background:var(--gold-glow);}
.stat-card:active{background:var(--gold-glow);border-color:var(--gold4);}
tbody tr:active{background:var(--gold-glow)!important;}
.acc-row:active,.oi-top:active{background:var(--gold-glow);}
.cat-btn:active{background:var(--gold-glow)!important;}

/* Input focus animation */
.f-input:focus{
  animation:none;
  box-shadow:var(--sh-gold);
  border-color:var(--gold);
}

/* Card hover on mobile (touch) */
@media(hover:none){
  .order-card:active{
    transform:scale(.99);
    border-color:var(--gold);
    box-shadow:var(--sh2);
  }
  .stat-card:active{transform:scale(.98);}
  .btn:active:not(:disabled){
    transform:scale(.97);
    filter:brightness(.92);
  }
}

/* ══════════════════════════════════════════════
   SUPERADMIN — تحسين الجدول على الموبايل
══════════════════════════════════════════════ */
@media(max-width:900px){
  /* جدول المطاعم يتحول لبطاقات */
  .sa-table{display:block;}
  .sa-table thead{display:none;}
  .sa-table tbody tr{
    display:flex;flex-direction:column;
    background:var(--bg3);
    border:1.5px solid var(--bdr2);
    border-radius:var(--r2);
    padding:14px;
    margin-bottom:10px;
    gap:8px;
  }
  .sa-table td{
    padding:3px 0;border:none;
    display:flex;justify-content:space-between;
    align-items:center;font-size:.82rem;
  }
  .sa-table td:first-child{
    font-weight:800;font-size:.95rem;
    color:var(--gold3);
    border-bottom:1px solid var(--bdr3);
    padding-bottom:8px;
    margin-bottom:2px;
  }
}


/* ══ افتراضي: ديسكتوب ظاهر، موبايل مخفي ══ */
.nav-mobile-only{display:none !important;}
.nav-desktop-only{display:flex;}

/* ══════════════════════════════════════════════
   MOBILE ROLE BAR — شريط الوظيفة للموبايل
══════════════════════════════════════════════ */
.mob-role-bar{
  display:none;
  background:linear-gradient(90deg,#6B5020,#C9A84C,#6B5020);
  padding:4px 14px;
  align-items:center;
  justify-content:center;
}
.mob-role-txt{
  font-size:8px;font-weight:600;
  color:rgba(255,255,255,0.85);
  letter-spacing:4px;
  text-transform:uppercase;
}

/* ══ زر لوحة التحكم — موبايل ══ */
.nav-ctrl-text-btn{
  background:var(--gold-glow);
  border:1px solid var(--gold);
  border-radius:var(--r2);
  padding:5px 12px;
  font-size:.76rem;font-weight:700;
  color:var(--gold3);
  cursor:pointer;
  font-family:var(--f-body);
  white-space:nowrap;
  transition:all .2s;
  letter-spacing:.3px;
}
.nav-ctrl-text-btn:hover,
.nav-ctrl-text-btn.open{
  background:var(--gold-glow2);
  border-color:var(--gold3);
}

@media(max-width:900px){
  .mob-role-bar{display:flex;}
  .nav-desktop-only{display:none !important;}
  .nav-mobile-only{display:flex !important;}
  .nav-username-inline{display:none;}
  .nav-role-label{display:none;}
  /* أزرار العمليات على الموبايل أصغر */
  .nav-icon-btn{width:30px;height:30px;}
  .nav-icon-btn .icon{width:15px;height:15px;}
}
@media(min-width:901px){
  .mob-role-bar{display:none !important;}
  .nav-desktop-only{display:flex;}
  .nav-mobile-only{display:none !important;}
}

/* ══════════════════════════════════════════════
   NAV CONTROL DROPDOWN — لوحة تحكم منبثقة
══════════════════════════════════════════════ */
.nav-ctrl-wrap{position:relative;}
.nav-ctrl-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:210px;
  background:var(--bg3);
  border:1.5px solid var(--bdr2);
  border-radius:var(--r3);
  box-shadow:var(--sh3);
  z-index:999;
  overflow:hidden;
  animation:slideDown .2s ease;
}
.nav-ctrl-dropdown.show{display:block;}
.nav-ctrl-user{
  padding:14px 16px;
  background:var(--gold-glow);
  border-bottom:1px solid var(--bdr2);
}
.nav-ctrl-role{font-size:.68rem;color:var(--txt3);letter-spacing:1px;text-transform:uppercase;}
.nav-ctrl-name{font-size:.9rem;font-weight:800;color:var(--gold3);margin-top:2px;}
.nav-ctrl-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 16px;
  font-size:.82rem;color:var(--txt2);
  background:none;border:none;
  cursor:pointer;text-decoration:none;
  transition:background .15s;
  font-family:var(--f-body);
  text-align:right;
}
.nav-ctrl-item:hover{background:var(--bg2);}
.nav-ctrl-item .icon{width:16px;height:16px;color:var(--gold3);}
.nav-ctrl-logout{color:var(--bad) !important;border-top:1px solid var(--bdr3);}
.nav-ctrl-logout .icon{color:var(--bad) !important;}