/* =====================================================================
   سوق | لوحة التحكم — نظام تصميم RTL
   ===================================================================== */

:root{
  --green-900:#08502A; --green-800:#0B6434; --green-700:#0F7B3F;
  --green-600:#149152; --green-500:#22A863; --green-100:#E6F5EC; --green-50:#F2FAF5;
  --ink-900:#0E1B14; --ink-700:#2B3A32; --ink-500:#5B6B62; --ink-400:#84948B;
  --line:#E6EBE8; --line-2:#F0F4F1;
  --bg:#F5F7F6; --card:#FFFFFF;
  --amber:#B98900; --amber-bg:#FFF6E0;
  --blue:#0B6FBF;  --blue-bg:#E7F1FB;
  --red:#C02626;   --red-bg:#FDEAEA;
  --purple:#7A3EAD;--purple-bg:#F2EAFB;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(14,27,20,.05), 0 1px 3px rgba(14,27,20,.04);
  --sh-2:0 4px 16px rgba(14,27,20,.07);
  --sh-3:0 12px 32px rgba(14,27,20,.10);
  --sidebar-w:260px;
  --font:'Tajawal','Cairo',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink-900);
  font-size:14.5px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cfd8d3;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- تسجيل الدخول ---------------- */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 480px at 88% -8%,  rgba(201,162,39,.20), transparent 62%),
    radial-gradient(760px 460px at -8% 108%, rgba(201,162,39,.13), transparent 62%),
    linear-gradient(165deg,#16274A 0%, #12203A 45%, #0A1322 100%);
}
.auth-card{
  width:100%;max-width:440px;background:var(--card);border-radius:var(--r-xl);
  padding:40px 34px 34px;box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.auth-logo{
  width:74px;height:74px;border-radius:22px;margin:0 auto 16px;
  background:linear-gradient(140deg,#1B2E52,#0C1729);
  display:grid;place-items:center;font-size:34px;
  box-shadow:0 10px 26px rgba(12,23,41,.38);
  border:2px solid rgba(201,162,39,.55)
}
.auth-card h1{font-size:23px;text-align:center;margin-bottom:4px;letter-spacing:-.3px}
.auth-card h1 .en{display:block;font-size:13px;font-weight:600;color:var(--ink-400);
  letter-spacing:2.5px;margin-top:5px;direction:ltr}
.auth-card .sub{text-align:center;color:var(--ink-500);font-size:13.5px;margin-bottom:22px}
.demo-box{
  margin-top:20px;background:#FBF7EC;border:1px dashed rgba(201,162,39,.55);border-radius:var(--r);
  padding:12px 14px;font-size:12.5px;color:var(--ink-700)
}
.demo-box b{color:#8A6A12}
.demo-box code{background:#fff;border:1px solid rgba(201,162,39,.35);padding:1px 6px;border-radius:6px}

/* ---------------- التخطيط ---------------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:#12203A;color:#D6E0EE;
  position:fixed;inset-inline-start:0;top:0;bottom:0;z-index:60;
  display:flex;flex-direction:column;transition:transform .25s ease;
}
.sidebar-head{
  padding:15px 16px 13px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid rgba(255,255,255,.09)
}
.sidebar-head .mark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(140deg,var(--green-500),var(--green-700));flex-shrink:0
}
.sidebar-head h2{font-size:15.5px;color:#fff;line-height:1.25}
.sidebar-head span{font-size:10.5px;color:#8FA3BF;display:block}

/* مربع البحث في القائمة */
.side-search{
  margin:12px 12px 6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 11px;height:40px;
  transition:border-color .18s, background .18s;
}
.side-search:focus-within{border-color:var(--green-500);background:rgba(255,255,255,.11)}
.side-search .si{color:#8FA3BF;display:grid;place-items:center;flex-shrink:0}
.side-search input{
  flex:1;background:none;border:none;outline:none;color:#fff;font-size:13px;min-width:0
}
.side-search input::placeholder{color:#7D91AE}
.side-search button{
  background:none;border:none;color:#7D91AE;cursor:pointer;font-size:13px;display:none;padding:2px 4px
}
.side-search.filled button{display:block}

.nav{flex:1;overflow-y:auto;padding:6px 10px 18px}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}

/* رابط رئيسي */
.nav-root{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  color:#C6D4E6;font-size:13.5px;font-weight:700;margin-bottom:4px;transition:.16s
}
.nav-root .ic{display:grid;place-items:center;width:22px;flex-shrink:0}
.nav-root:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-root.active{background:linear-gradient(90deg,var(--green-600),var(--green-800));color:#fff;
  box-shadow:0 6px 16px rgba(20,145,82,.32)}

/* مجموعة قابلة للطي */
.nav-group{margin-bottom:2px}
.nav-group-btn{
  width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  background:none;border:none;cursor:pointer;color:#C6D4E6;font-size:13.5px;font-weight:600;
  text-align:start;transition:.16s
}
.nav-group-btn .ic{display:grid;place-items:center;width:22px;flex-shrink:0;color:#8FA3BF}
.nav-group-btn .tx{flex:1;min-width:0}
.nav-group-btn .chev{
  font-size:15px;line-height:1;color:#7D91AE;transition:transform .22s ease;transform:rotate(0deg)
}
.nav-group-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-group.open > .nav-group-btn{color:#fff}
.nav-group.open > .nav-group-btn .ic{color:var(--green-500)}
.nav-group.open > .nav-group-btn .chev{transform:rotate(180deg)}

.nav-sub{
  display:none;margin:2px 0 6px;padding-inline-start:14px;
  border-inline-start:1px solid rgba(255,255,255,.10);margin-inline-start:22px
}
.nav-group.open > .nav-sub{display:block;animation:navIn .18s ease}
@keyframes navIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.nav-sub a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  color:#A9BBD2;font-size:12.8px;font-weight:500;transition:.15s;position:relative
}
.nav-sub a .dot{
  width:5px;height:5px;border-radius:50%;background:#546A88;flex-shrink:0;transition:.15s
}
.nav-sub a .tx{flex:1;min-width:0}
.nav-sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-sub a:hover .dot{background:var(--green-500)}
.nav-sub a.active{background:rgba(20,145,82,.20);color:#fff;font-weight:700}
.nav-sub a.active .dot{background:var(--green-500);box-shadow:0 0 0 3px rgba(34,168,99,.22)}
.nav-sub a .count{
  margin-inline-start:auto;background:#F0574B;color:#fff;font-size:10.5px;
  min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 6px;font-weight:700
}

.nav-empty{display:none;text-align:center;color:#7D91AE;font-size:12.5px;padding:26px 10px}
.nav.searching .nav-sub{display:block}
.nav.searching .nav-group-btn .chev{opacity:.3}

.sidebar-foot{padding:10px 12px;border-top:1px solid rgba(255,255,255,.09)}
.sidebar-foot a{
  display:flex;align-items:center;gap:10px;color:#F0A9A2;font-size:12.8px;
  padding:7px 12px;border-radius:10px;font-weight:600
}
.sidebar-foot a:hover{background:rgba(240,87,75,.14)}

.main{flex:1;margin-inline-start:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}

/* شريط التبويبات */
.tabbar{
  height:56px;background:#F1EEE7;border-bottom:1px solid #E2DDD2;
  display:flex;align-items:flex-end;gap:6px;padding:0 18px;position:sticky;top:0;z-index:40;
}
.tabbar .tab{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  border-start-start-radius:12px;border-start-end-radius:12px;
  font-size:13.5px;font-weight:700;color:#6B6558;background:#E7E2D8;border:1px solid #E2DDD2;border-bottom:none;
  transition:.16s;white-space:nowrap
}
.tabbar .tab:hover{background:#EFEBE3;color:#3C382F}
.tabbar .tab.active{background:#12203A;color:#fff;border-color:#12203A}
.tab-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px;padding-bottom:8px}
.burger{display:none;background:none;border:none;font-size:21px;cursor:pointer;color:var(--ink-700);padding-bottom:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--green-50);
  border:1px solid #DCEEE3;color:var(--green-800);padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600
}
.avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,var(--green-500),var(--green-800));
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex-shrink:0
}
.userbox{display:flex;align-items:center;gap:10px}
.userbox .nm{font-size:13px;font-weight:700;line-height:1.2}
.userbox .rl{font-size:11px;color:var(--ink-400)}

/* عنوان الصفحة */
.page-title{margin-bottom:18px}
.page-title h1{
  font-size:19px;font-weight:800;display:inline-block;padding-bottom:8px;position:relative
}
.page-title h1::after{
  content:'';position:absolute;inset-inline-start:0;bottom:0;width:44px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--green-600),var(--green-800))
}
.page-title p{font-size:12.5px;color:var(--ink-400);margin-top:4px}

.content{padding:22px 24px 32px;flex:1}

/* ---------------- المكوّنات ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:12px}
.card-head h3{font-size:15.5px;font-weight:700}
.card-head .actions{margin-inline-start:auto;display:flex;gap:8px}
.card-body{padding:20px}
.card-body.tight{padding:0}

.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.span-2{grid-column:span 2}

/* بطاقات الإحصائيات */
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;position:relative;overflow:hidden;box-shadow:var(--sh-1)
}
.stat .ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;margin-bottom:12px
}
.stat .lbl{font-size:12.5px;color:var(--ink-500);font-weight:600}
.stat .val{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.stat .val small{font-size:13px;font-weight:600;color:var(--ink-400)}
.stat .trend{font-size:11.5px;font-weight:700;margin-top:6px;display:inline-flex;gap:4px;align-items:center}
.trend.up{color:var(--green-600)} .trend.down{color:var(--red)}
.stat::after{
  content:'';position:absolute;inset-block-start:-30px;inset-inline-end:-30px;
  width:110px;height:110px;border-radius:50%;background:var(--green-50);opacity:.7;z-index:0
}
.stat>*{position:relative;z-index:1}

/* الجداول */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{
  text-align:start;padding:12px 16px;background:#FAFBFA;color:var(--ink-500);
  font-weight:700;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap
}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:#FAFCFB}
table.tbl tbody tr:last-child td{border-bottom:none}
.t-prod{display:flex;align-items:center;gap:11px}
.t-prod img,.t-thumb{width:44px;height:44px;border-radius:11px;object-fit:cover;background:var(--green-50);flex-shrink:0}
.t-prod .nm{font-weight:700;font-size:13.5px}
.t-prod .sub{font-size:11.5px;color:var(--ink-400)}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap
}
.badge.ok{color:var(--green-700);background:var(--green-100)}
.badge.off{color:var(--ink-500);background:#EFF2F0}
.badge.warn{color:var(--amber);background:var(--amber-bg)}
.badge.danger{color:var(--red);background:var(--red-bg)}
.badge.info{color:var(--blue);background:var(--blue-bg)}

/* الأزرار */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  font-weight:700;font-size:13.5px;transition:.15s;white-space:nowrap;line-height:1.5
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--green-600),var(--green-800));color:#fff;box-shadow:0 4px 12px rgba(15,123,63,.25)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-700)}
.btn-ghost:hover{background:#F7F9F8;border-color:#D5DEDA}
.btn-soft{background:var(--green-50);color:var(--green-800);border-color:#DCEEE3}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:#F7CFCF}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 4px 12px rgba(37,211,102,.3)}
.btn-wa:hover{filter:brightness(1.05)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:9px}
.btn-block{width:100%}
.btn-icon{width:34px;height:34px;padding:0;border-radius:10px}

/* النماذج */
.form-grid{display:grid;gap:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink-700)}
.field label .req{color:var(--red)}
.field .hint{font-size:11.5px;color:var(--ink-400);margin-top:5px}
.input,.select,textarea.input{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:11px;
  background:#fff;transition:.15s;outline:none;color:var(--ink-900)
}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(34,168,99,.14)}
textarea.input{min-height:96px;resize:vertical;line-height:1.8}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B62' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:left 13px center}
.input-group{display:flex}
.input-group .input{border-start-end-radius:0;border-end-end-radius:0}
.input-group .addon{
  display:grid;place-items:center;padding:0 14px;background:#F5F7F6;border:1px solid var(--line);
  border-inline-start:none;border-start-end-radius:11px;border-end-end-radius:11px;font-size:12.5px;color:var(--ink-500)
}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#D3DBD7;border-radius:26px;transition:.2s;cursor:pointer}
.switch .sl:before{content:'';position:absolute;width:20px;height:20px;top:3px;inset-inline-start:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .sl{background:var(--green-600)}
.switch input:checked + .sl:before{transform:translateX(-20px)}
.check-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.check-row:hover{background:#FAFCFB}
.check-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--green-600);cursor:pointer}
.check-row label{font-size:13px;cursor:pointer;flex:1;font-weight:500}

/* شريط الفلاتر */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filters .field{min-width:160px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs a{
  padding:8px 15px;border-radius:11px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink-500)
}
.tabs a.active{background:var(--green-700);color:#fff;border-color:var(--green-700);box-shadow:0 4px 12px rgba(15,123,63,.22)}
.tabs a .n{opacity:.75;font-size:11.5px}

/* التنبيهات */
.alert{
  padding:13px 16px;border-radius:var(--r);margin-bottom:16px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:9px;border:1px solid
}
.alert.success{background:var(--green-100);color:var(--green-800);border-color:#BFE3CD}
.alert.error{background:var(--red-bg);color:var(--red);border-color:#F7CFCF}
.alert.info{background:var(--blue-bg);color:var(--blue);border-color:#CFE2F5}
.alert.warn{background:var(--amber-bg);color:var(--amber);border-color:#F3E0B0}

/* الترقيم */
.pagination{display:flex;gap:6px;justify-content:center;padding:18px;flex-wrap:wrap}
.pg{
  min-width:36px;height:36px;padding:0 11px;border-radius:10px;border:1px solid var(--line);
  background:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-700)
}
.pg:hover{border-color:var(--green-500);color:var(--green-700)}
.pg.active{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.pg.disabled{opacity:.45;pointer-events:none}
.pg.dots{border:none;background:none}

/* حالة فارغة */
.empty{text-align:center;padding:56px 20px;color:var(--ink-400)}
.empty .ic{font-size:52px;margin-bottom:12px;opacity:.55}
.empty h4{font-size:16px;color:var(--ink-700);margin-bottom:6px}

/* الخط الزمني */
.timeline{position:relative;padding-inline-start:26px}
.timeline::before{content:'';position:absolute;inset-inline-start:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:20px}
.tl-item::before{
  content:'';position:absolute;inset-inline-start:-24px;top:5px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--green-500)
}
.tl-item.muted::before{border-color:#CBD5D0}
.tl-item .tt{font-weight:700;font-size:13.5px}
.tl-item .dt{font-size:11.5px;color:var(--ink-400)}

/* الرسم البياني */
.chart-box{height:280px;position:relative}

/* الطباعة */
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin:0!important} .content{padding:0!important}
  .card{box-shadow:none;border:none}
  body{background:#fff}
}

/* الاستجابة */
@media (max-width:1200px){ .g-4{grid-template-columns:repeat(2,1fr)} .g-5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:992px){ .g-3{grid-template-columns:1fr} .span-2{grid-column:auto} }
@media (max-width:820px){
  /* القائمة المغلقة تُزال من التخطيط تماماً — إبقاؤها خارج الشاشة بـ transform
     كان يضيف تمريراً أفقياً بعرضها في كل صفحات اللوحة على الجوال. */
  .sidebar{display:none;transform:none}
  .sidebar.open{display:flex;box-shadow:-12px 0 40px rgba(0,0,0,.35);animation:sideIn .22s ease}
  .main{margin-inline-start:0}
  .burger{display:block}
  .g-2,.g-4,.g-5{grid-template-columns:1fr}
  .content{padding:16px}
  .topbar{padding:0 14px}
  .userbox .nm,.userbox .rl,.chip span{display:none}
}
.backdrop{display:none;position:fixed;inset:0;background:rgba(8,25,17,.5);z-index:55}
.backdrop.show{display:block}

/* =====================================================================
   شاشة الأيقونات (Launcher) + الزخرفة الإسلامية
   ===================================================================== */

/* --- الزخرفة --- */
.pattern-bg{position:relative;overflow:hidden}
.pattern-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url('../img/pattern-light.svg');
  background-size:140px 140px;opacity:.09;
}
.pattern-bg > *{position:relative;z-index:1}

/* شريط زخرفي فاصل */
.ornament{
  height:26px;margin:0 0 18px;
  background-image:url('../img/divider-gold.svg');
  background-size:auto 26px;background-position:center;background-repeat:repeat-x;
  opacity:.30;
}

/* لوحة الترحيب */
.hero{
  border-radius:var(--r-xl);padding:26px 28px;margin-bottom:20px;color:#fff;
  background:linear-gradient(125deg,#0B6434 0%,#08502A 48%,#062F1A 100%);
  box-shadow:0 14px 34px rgba(8,80,42,.28);
}
.hero::before{
  background-image:url('../img/pattern-light.svg');
  background-size:150px 150px;opacity:.13;
}
.hero .greet{font-size:12.5px;opacity:.8;letter-spacing:.3px}
.hero h2{font-size:25px;font-weight:800;margin-top:2px;line-height:1.35}
.hero p{font-size:13.5px;opacity:.82;margin-top:4px}
.hero .quick{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.hero .quick span{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);
  padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600
}
.hero .crescent{
  position:absolute;inset-block-start:-52px;inset-inline-end:-40px;
  width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, rgba(255,255,255,.14), rgba(255,255,255,0) 62%);
  z-index:0
}

/* --- شبكة البلاطات --- */
.tiles{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(158px, 1fr));
}
.tile{
  position:relative;overflow:hidden;border-radius:16px;padding:18px 14px 15px;
  min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;text-align:center;color:#fff;
  box-shadow:0 6px 18px rgba(14,27,20,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  isolation:isolate;
}
.tile::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:url('../img/pattern-light.svg');
  background-size:120px 120px;opacity:.12;
  transition:opacity .25s ease, transform .5s ease;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(14,27,20,.26);filter:brightness(1.06)}
.tile:hover::before{opacity:.22;transform:scale(1.12) rotate(4deg)}
.tile:active{transform:translateY(-1px)}

.tile .ic-wrap{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
}
.tile .lbl{font-size:13.5px;font-weight:700;line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,.22)}
.tile .n{
  position:absolute;top:10px;inset-inline-end:10px;min-width:24px;height:24px;padding:0 7px;
  background:#FF5A4E;border-radius:12px;font-size:11.5px;font-weight:800;
  display:grid;place-items:center;box-shadow:0 3px 9px rgba(255,90,78,.45)
}
.tile.wide{grid-column:span 2}

/* ألوان البلاطات */
.t-gold   {background:linear-gradient(140deg,#C79A34,#93701D)}
.t-navy   {background:linear-gradient(140deg,#1E2A47,#0D1424)}
.t-green  {background:linear-gradient(140deg,#17784C,#0B4A2D)}
.t-slate  {background:linear-gradient(140deg,#2C3E52,#16222F)}
.t-teal   {background:linear-gradient(140deg,#1F7F8E,#12525E)}
.t-purple {background:linear-gradient(140deg,#54407F,#312454)}
.t-plum   {background:linear-gradient(140deg,#6B3A63,#3F2039)}
.t-olive  {background:linear-gradient(140deg,#5F7132,#3A4620)}
.t-rust   {background:linear-gradient(140deg,#A5522C,#6C331A)}
.t-indigo {background:linear-gradient(140deg,#374A94,#1F2A5C)}
.t-emerald{background:linear-gradient(140deg,#0F9B63,#07603C)}
.t-sand   {background:linear-gradient(140deg,#A08048,#6A522A)}

.ic-svg{display:block}

@media (max-width:820px){
  .tiles{grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));gap:11px}
  .tile{min-height:116px;padding:14px 10px 12px}
  .tile .ic-wrap{width:44px;height:44px;border-radius:13px}
  .tile .lbl{font-size:12.5px}
  .hero{padding:20px}
  .hero h2{font-size:20px}
}

/* --- زخرفة الشريط الجانبي وصفحة الدخول --- */
.sidebar::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url('../img/pattern-light.svg');
  background-size:130px 130px;opacity:.05;
}
.sidebar > *{position:relative;z-index:1}

.auth-wrap::after{
  content:'';position:fixed;inset:0;pointer-events:none;
  background-image:url('../img/pattern-gold.svg');
  background-size:150px 150px;opacity:.16;
}
.auth-wrap > *{position:relative;z-index:1}
.auth-card{position:relative;overflow:hidden}
.auth-card::before{
  content:'';position:absolute;inset-inline:0;top:0;height:5px;
  background:linear-gradient(90deg,#B8901E,#E6C766,#B8901E);
}
.auth-ornament{
  height:26px;margin:12px 0 18px;opacity:.85;
  background-image:url('../img/divider-gold.svg');
  background-size:auto 26px;background-position:center;background-repeat:repeat-x;
}

/* =====================================================================
   الاختصارات القابلة للتخصيص + التنبيهات + الملاحظات
   ===================================================================== */

/* رأس قسم الاختصارات */
.sec-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sec-bar .ttl{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:800}
.sec-bar .ttl .sq{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--green-600),var(--green-800))
}
.sec-bar .tip{
  font-size:11.5px;color:var(--ink-400);display:inline-flex;align-items:center;gap:5px;
  background:#F4F7F5;border:1px dashed #DDE5E0;padding:4px 11px;border-radius:999px
}
.sec-bar .right{margin-inline-start:auto;display:flex;gap:8px}

/* تنبيهات لوحة التحكم */
.notice{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;margin-bottom:16px;
  background:#FDF7E7;border:1px solid #F0E1B8;color:#7A5B10;font-size:13.5px;font-weight:600
}
.notice .bell{
  width:34px;height:34px;border-radius:11px;background:#F6E7BE;color:#B98900;
  display:grid;place-items:center;flex-shrink:0
}
.notice a{color:var(--green-700);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.notice.danger{background:#FDF0EF;border-color:#F3CFCB;color:#8E2A22}
.notice.danger .bell{background:#F8DAD6;color:#C02626}

/* حالة السحب */
.tile[draggable="true"]{cursor:grab}
.tile.dragging{opacity:.45;transform:scale(.97)}
.tile.drop-target{outline:3px dashed rgba(15,123,63,.55);outline-offset:3px}
.tiles.editing .tile{animation:wiggle .9s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}

/* لوحة التخصيص */
.customize{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#FAFCFB;padding:16px;margin-bottom:16px
}
.customize h4{font-size:14px;font-weight:800;margin-bottom:4px}
.customize p{font-size:12px;color:var(--ink-400);margin-bottom:12px}
.customize .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.customize .row{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer
}
.customize .row:hover{border-color:var(--green-500);background:var(--green-50)}
.customize .row input{width:17px;height:17px;accent-color:var(--green-600);cursor:pointer}
.customize .row .sw{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.customize .foot{display:flex;gap:9px;margin-top:14px}

/* ملاحظاتي */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.panel-head{
  background:#12203A;color:#fff;padding:12px 18px;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700
}
.panel-head .right{margin-inline-start:auto;display:flex;gap:8px}
.panel-head .btn{padding:6px 13px;font-size:12.5px}
.panel-body{padding:0}
.note-form{display:flex;gap:9px;padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;background:#FAFBFA}
.note-form .f1{flex:1;min-width:150px}
.note-form .f2{flex:2;min-width:220px}
.prio{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:800}
.prio.high{background:#FDEAEA;color:#C02626}
.prio.normal{background:#E7F1FB;color:#0B6FBF}
.prio.low{background:#EFF2F0;color:#5B6B62}
.note-done{opacity:.55}
.note-done .body{text-decoration:line-through}

@media (max-width:820px){
  .tabbar{padding:0 12px}
  .tabbar .tab{padding:8px 12px;font-size:12.5px}
  .content{padding:16px 14px 28px}
  .customize .list{grid-template-columns:1fr 1fr}
}

/* ---------------- شاشة الطلب السريع ---------------- */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.pos-item{
  border:1px solid var(--line);border-radius:15px;padding:11px;text-align:center;background:#fff;
  display:flex;flex-direction:column;gap:6px;transition:.16s
}
.pos-item:hover{border-color:var(--green-500);box-shadow:0 6px 18px rgba(15,123,63,.12);transform:translateY(-2px)}
.pos-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px;background:var(--green-50)}
.pos-item .nm{font-size:12.5px;font-weight:700;line-height:1.45;height:3.6em;overflow:hidden}
.pos-item .mt{display:flex;align-items:baseline;gap:5px;justify-content:center;font-size:12px}
.pos-item .mt b{font-size:14.5px;color:var(--green-700)}
.pos-item .mt span{color:var(--ink-400);font-size:11px}
.pos-item .st{font-size:10.5px;color:var(--green-700);font-weight:700}
.pos-item .st.bad{color:var(--red)}
.pos-item.out{opacity:.6}
@media (max-width:992px){ .pos-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} }

/* ===== صف مفتاح تشغيل (يُستخدم في إعدادات بوابة الموردين) ===== */
.switch-row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.switch-row:last-of-type{border-bottom:0}
.switch-row > div b{font-size:13.5px;display:block}
.switch-row .hint{font-size:11.5px;color:var(--ink-400);margin-top:4px;line-height:1.85}
.stat-mini{background:var(--surface-2,#F6F8F7);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat-mini .k{font-size:22px;font-weight:800;color:var(--n-900,#0C1729)}
.stat-mini .l{font-size:11.5px;color:var(--ink-400);margin-top:3px}
/* ===== قائمة اختيار المجموعات (الموردون) ===== */
.cat-pick{display:grid;gap:6px;max-height:236px;overflow-y:auto;padding:8px;
  border:1px solid var(--line);border-radius:13px;background:#FAFCFB}
.cat-pick::-webkit-scrollbar{width:7px}
.cat-pick::-webkit-scrollbar-thumb{background:#CFDAD4;border-radius:7px}

/* ===================================================================
   شاشة أفضل أسعار الموردين
   =================================================================== */
.bp-wrap{padding:0}
.bp-head,.bp-top{
  display:grid;
  grid-template-columns:88px minmax(220px,1.8fr) 140px minmax(150px,1fr) 165px 120px;
  gap:14px;align-items:center
}
.bp-head{padding:12px 16px;background:#F7F9FC;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-500)}
.bp-card{border-bottom:1px solid var(--line-2)}
.bp-card:last-child{border-bottom:none}
.bp-top{padding:14px 16px}
.bp-card:hover .bp-top{background:#FBFCFE}

.pid{background:#F1F4F9;color:var(--ink-500);padding:3px 9px;border-radius:8px;
  font-size:11.5px;font-weight:700;direction:ltr;display:inline-block}
.bp-top .c-nm{display:flex;align-items:center;gap:11px;min-width:0}
.bp-top .c-nm .nm{font-weight:700;font-size:13.5px}
.bp-top .c-nm .sub{font-size:11.5px;color:var(--ink-400);margin-top:2px}
.bp-top .c-pr b{font-size:15px;font-weight:800;color:var(--green-700)}
.bp-top .save{font-size:11px;font-weight:800;color:#A61E1E;margin-top:3px}
.bp-top .was{font-size:11px;color:var(--ink-400);text-decoration:line-through;margin-top:2px}
.bp-top .c-sp b{font-size:13px;display:block}
.bp-top .c-sp .co{font-size:11.5px;color:var(--ink-400)}
.bp-top .c-tl .ph{font-size:12.5px;font-weight:700;display:block;text-align:start}
.bp-top .cta{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}

.mini{display:inline-flex;align-items:center;padding:5px 11px;border-radius:9px;font-size:11px;
  font-weight:800;text-decoration:none;border:1px solid var(--line);color:var(--ink-700);background:#fff}
.mini:hover{background:#F7F9FC}
.mini.wa{background:#E8F7EE;border-color:#BFE3CD;color:#0B5C34}
.mini.tel{background:#EEF3FB;border-color:#CBDAF0;color:#1B4E8F}

.bp-toggle .chev{transition:transform .18s;display:inline-block}
.bp-toggle.open .chev{transform:rotate(180deg)}

.bp-sub{background:#F7F9FC;border-top:1px solid var(--line)}
.bp-list{padding:12px 16px}
.bp-hd{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  color:var(--ink-500);margin-bottom:9px;flex-wrap:wrap}
.bp-hd .mk{margin-inline-start:auto;background:#E7EEF9;color:#1B4E8F;
  padding:3px 10px;border-radius:999px;font-size:11px}

.bp-row{display:grid;grid-template-columns:34px minmax(140px,1.2fr) 150px minmax(170px,1fr) auto;
  gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;margin-bottom:7px}
.bp-row:last-child{margin-bottom:0}
.bp-row.best{border-color:#BFE3CD;background:#F4FBF7;box-shadow:0 0 0 2px rgba(15,123,63,.07)}
.bp-row .rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:#EEF1F6;color:var(--ink-500)}
.bp-row.best .rank{background:var(--green-600);color:#fff}
.bp-row .who b{display:block;font-size:13px}
.bp-row .who span{font-size:11.5px;color:var(--ink-400);display:block;text-align:start}
.bp-row .pr b{font-size:15px;font-weight:800}
.bp-row.best .pr b{color:var(--green-700)}
.bp-row .pr .up{font-size:11px;font-weight:800;color:#A61E1E;margin-inline-start:6px}
.bp-row .pr .lo{font-size:11px;font-weight:800;color:var(--green-700);margin-inline-start:6px}
.bp-row .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bp-row .act{display:flex;gap:6px;margin-inline-start:auto}

/* ---------- الجوال: بطاقات مكدّسة بدل الأعمدة ---------- */
@media (max-width:1000px){
  .bp-head{display:none}
  .bp-top{grid-template-columns:1fr;gap:10px;padding:14px}
  .bp-top .c-id{order:-1}
  .bp-top .c-pr,.bp-top .c-sp,.bp-top .c-tl{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    border-top:1px dashed var(--line);padding-top:9px;flex-wrap:wrap}
  .bp-top .c-pr::before,.bp-top .c-sp::before,.bp-top .c-tl::before{
    content:attr(data-l);font-size:11.5px;font-weight:700;color:var(--ink-400);flex-shrink:0}
  .bp-top .c-pr > *,.bp-top .c-sp > *,.bp-top .c-tl > *{text-align:start}
  .bp-top .c-of{border-top:1px dashed var(--line);padding-top:10px}
  .bp-top .c-of .btn{width:100%}
  .bp-row{grid-template-columns:30px 1fr;row-gap:8px}
  .bp-row .pr,.bp-row .meta,.bp-row .act{grid-column:2}
  .bp-row .act{margin-inline-start:0}
}

/* ===================================================================
   نقطة البيع (الكاشير)
   =================================================================== */
.pos-wrap{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
@media (min-width:760px) and (max-width:1099px){
  .pos-wrap{grid-template-columns:minmax(0,1fr) 330px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
  .pcard .nm{font-size:11.5px;min-height:33px}
}
@media (max-width:759px){ .pos-wrap{grid-template-columns:1fr} }

/* --- شريط الباركود والفلاتر --- */
.scanbar{display:flex;gap:9px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:11px 14px;box-shadow:var(--sh-1);margin-bottom:12px}
.scanbar .ic{font-size:20px}
.scanbar .input{flex:1;font-size:15px;font-weight:700;letter-spacing:.5px}
.posfilters{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.posfilters .input{flex:1;min-width:150px}
.posfilters .select{max-width:200px}

/* --- شبكة الأصناف --- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.pcard button{width:100%;background:var(--card);border:1px solid var(--line);border-radius:15px;
  padding:9px;cursor:pointer;font-family:inherit;display:grid;gap:5px;text-align:center;
  transition:transform .12s,box-shadow .12s,border-color .12s;box-shadow:var(--sh-1)}
.pcard button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--green-600);
  box-shadow:0 6px 18px rgba(15,123,63,.14)}
.pcard button:active:not(:disabled){transform:translateY(0)}
.pcard button:disabled{opacity:.45;cursor:not-allowed}
.pcard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px;background:#F1F4F9}
.pcard .nm{font-size:12.5px;font-weight:700;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.pcard .pr{font-size:14.5px;font-weight:800;color:var(--green-700)}
.pcard .mt{display:flex;justify-content:center;gap:6px;font-size:10.5px;font-weight:800}
.pcard .st{background:#EEF1F6;color:var(--ink-500);padding:2px 8px;border-radius:999px}
.pcard .st.warn{background:#FFF6E0;color:#8A6A12}
.pcard .st.bad{background:#FDEAEA;color:#C02626}
.pcard .tx{background:#E7EEF9;color:#1B4E8F;padding:2px 8px;border-radius:999px}

/* --- لوحة الفاتورة --- */
.pos-inv{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-1);position:sticky;top:76px}
@media (max-width:759px){ .pos-inv{position:static} }
.inv-hd{background:linear-gradient(100deg,var(--n-800,#12203A),var(--n-900,#0C1729));color:#fff;
  padding:13px 16px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:10px;
  border-bottom:3px solid var(--gold,#C9A227)}
.inv-hd .who{margin-inline-start:auto;font-size:11.5px;font-weight:600;opacity:.85}
.shift-bar{background:#E7EEF9;color:#1B4E8F;padding:8px 16px;font-size:11.5px;font-weight:700;
  display:flex;justify-content:space-between;gap:8px}
.shift-bar a{color:#1B4E8F;font-weight:800}

.inv-lines{max-height:44vh;overflow-y:auto;padding:6px 0}
.inv-empty{text-align:center;padding:34px 16px;color:var(--ink-400)}
.inv-empty div{font-size:38px;margin-bottom:8px}
.inv-empty p{font-size:12.5px}
.inv-line{padding:9px 14px;border-bottom:1px solid var(--line-2)}
.inv-line:last-child{border-bottom:none}
.inv-line .l1{display:flex;align-items:flex-start;gap:8px}
.inv-line .l1 b{flex:1;font-size:13px;line-height:1.5}
.inv-line .rm button{border:none;background:none;color:var(--red);cursor:pointer;font-size:14px;padding:0 3px}
.inv-line .l2{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.inv-line .qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.inv-line .qty button{border:none;background:#F7F9FC;width:28px;height:30px;cursor:pointer;
  font-size:16px;font-weight:800;color:var(--ink-700);font-family:inherit}
.inv-line .qty button:hover{background:#EDF1F7}
.inv-line .qn{width:56px;height:30px;border:none;border-inline:1px solid var(--line);text-align:center;
  font-size:13px;font-weight:800;font-family:inherit;background:#fff;-moz-appearance:textfield}
.inv-line .qn::-webkit-outer-spin-button,.inv-line .qn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-line .unit{font-size:11px;color:var(--ink-400)}
.inv-line .each{font-size:11.5px;color:var(--ink-500)}
.inv-line .tot{margin-inline-start:auto;font-size:14px;font-weight:800}
.inv-line .l3{font-size:10.5px;color:var(--ink-400);margin-top:4px}

.inv-sum{padding:12px 16px;background:#F7F9FC;border-block:1px solid var(--line)}
.inv-sum .r{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13px;padding:4px 0}
.inv-sum .r.disc .input-group{max-width:145px}
.inv-sum .r.disc .input{padding:7px 10px;font-size:13px}
.inv-sum .grand{border-top:1px dashed var(--line);margin-top:7px;padding-top:9px;font-size:15px}
.inv-sum .grand b{font-size:22px;font-weight:800;color:var(--green-700)}

.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 0}
.pay .f label{display:block;font-size:11.5px;font-weight:800;color:var(--ink-500);margin-bottom:5px}
.pay .f .input{text-align:center;font-size:15px;font-weight:800;padding:10px}
.change{text-align:center;font-size:13px;font-weight:700;padding:9px 16px 0}
.change b{font-size:17px;font-weight:800}

.more{margin:10px 16px 0;font-size:12.5px}
.more summary{cursor:pointer;font-weight:800;color:var(--n-800,#12203A)}
.more .input{margin-top:8px;padding:9px 11px;font-size:12.5px}
.more .f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.inv-act{padding:12px 16px}
.pay-btn{width:100%;padding:15px;font-size:15.5px}
.clr{padding:0 16px 14px;text-align:center}
.clr .btn{width:100%}

.cashbox{background:#F7F9FC;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cashbox .r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0}
.cashbox .r.tot{border-top:1px dashed var(--line);margin-top:5px;padding-top:8px;font-size:14.5px;font-weight:800}

/* زر الدخول بهوية كحلي/ذهبي */
.auth-card .btn-primary{
  background:linear-gradient(135deg,#1B2E52,#0C1729);color:#fff;
  box-shadow:0 6px 18px rgba(12,23,41,.30);border:1px solid rgba(201,162,39,.45)
}
.auth-card .btn-primary:hover{
  background:linear-gradient(135deg,#C9A227,#B8901E);color:#0C1729;filter:none
}
.auth-card .input:focus{border-color:#C9A227;box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.auth-foot{text-align:center;margin-top:18px;font-size:11.5px;color:var(--ink-400)}

/* =====================================================================
   الجوال والتابلت — لوحة تحكم تعمل باللمس على أندرويد و iPhone و iPad
   ===================================================================== */

/* مساحات آمنة لشاشات النوتش */
.topbar{padding-top:env(safe-area-inset-top)}
.sidebar{padding-top:env(safe-area-inset-top)}
.content{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

@media (max-width:820px){

  /* منع تكبير iOS التلقائي عند الكتابة: 16px حد أدنى للحقول */
  .input,.select,textarea,input[type=text],input[type=email],input[type=password],
  input[type=number],input[type=date],input[type=search],input[type=tel]{
    font-size:16px !important
  }

  /* أهداف لمس مريحة */
  .btn{min-height:44px}
  .btn-sm{min-height:38px}

  /* ---------- الجداول تتحول إلى بطاقات ---------- */
  .table-wrap{overflow-x:visible}
  table.tbl-cards{border-collapse:separate;border-spacing:0}
  table.tbl-cards thead{display:none}
  table.tbl-cards,
  table.tbl-cards tbody,
  table.tbl-cards tr,
  table.tbl-cards td{display:block;width:100%}

  table.tbl-cards tbody tr{
    border:1px solid var(--line);border-radius:15px;background:#fff;
    padding:6px 13px;margin-bottom:11px;box-shadow:var(--sh-1)
  }
  table.tbl-cards tbody tr:hover{background:#fff}

  table.tbl-cards td{
    border:none;border-bottom:1px dashed var(--line-2);padding:10px 0;
    display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px
  }
  table.tbl-cards td:last-child{border-bottom:none}
  table.tbl-cards td::before{
    content:attr(data-l);font-size:11.5px;font-weight:800;color:var(--ink-400);
    flex-shrink:0;white-space:nowrap
  }
  table.tbl-cards td:not([data-l])::before{content:''}
  /* الخلية الأولى (اسم العنصر) تأخذ السطر كاملاً بلا تسمية */
  table.tbl-cards td:first-child{
    justify-content:flex-start;padding-top:12px;font-weight:700
  }
  table.tbl-cards td:first-child::before{display:none}
  /* خلية بلا عنوان = أزرار الإجراءات → سطر كامل */
  table.tbl-cards td[data-l=""],
  table.tbl-cards td[data-full]{display:block;justify-content:stretch}
  table.tbl-cards td[data-l=""] > div,
  table.tbl-cards td[data-l=""] form{justify-content:flex-start}
  table.tbl-cards td[data-l=""] .btn{flex:1}

  /* الفلاتر عمودياً مع أزرار عريضة */
  .filters{flex-direction:column;align-items:stretch;gap:11px}
  .filters .field{width:100%;min-width:0}
  .filters .btn{width:100%}

  /* بطاقات ورؤوس */
  .card-head{flex-wrap:wrap;gap:10px}
  .card-head .actions{margin-inline-start:0;width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .card-head .actions .btn{flex:1}
  .page-title h1{font-size:21px}
  .grid{gap:13px}
  .form-grid .grid.g-2,.form-grid .grid.g-3{grid-template-columns:1fr}

  /* تبويبات قابلة للتمرير أفقياً بدل الالتفاف */
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;flex-shrink:0}

  /* الشريط الجانبي بعرض شبه كامل ليسهل اللمس */
  .sidebar{width:min(88vw,320px)}

  /* نموذج المنتج والصفحات ذات العمودين */
  form > .grid[style*="1.7fr"],
  .grid[style*="1.5fr"],
  .grid[style*="380px"],
  .grid[style*="1fr 1fr"]{grid-template-columns:1fr !important}
}

/* ---------- التابلت (iPad) ---------- */
@media (min-width:821px) and (max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-5{grid-template-columns:repeat(3,1fr)}
  .grid[style*="380px"]{grid-template-columns:1fr !important}
  .content{padding:18px}
}

/* تمرير سلس ومنع الاهتزاز الأفقي على كل المقاسات */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}

/* شريط الدفع الثابت أسفل شاشة الكاشير على الجوال */
@media (max-width:759px){
  .pos-inv{margin-bottom:76px}
  .pos-sticky{
    position:fixed;inset-inline:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(0,0,0,.10);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:12px
  }
  .pos-sticky .amt{flex:1}
  .pos-sticky .amt .l{font-size:10.5px;color:var(--ink-400);font-weight:700}
  .pos-sticky .amt .v{font-size:19px;font-weight:800;color:var(--green-700);line-height:1.2}
  .pos-sticky .go{width:auto;padding:13px 20px;font-size:14.5px;white-space:nowrap}
}
@media (min-width:760px){ .pos-sticky{display:none} }


@keyframes sideIn{from{opacity:.3;transform:translateX(14%)}to{opacity:1;transform:none}}

/* =====================================================================
   منع تمدد الشبكات والرسوم البيانية (سبب شائع للتمرير الأفقي)
   ===================================================================== */
.grid > *{min-width:0}
.chart-box{min-width:0}
.chart-box canvas{max-width:100% !important}

@media (max-width:820px){
  /* أي شبكة بأعمدة مكتوبة داخل style تصبح عموداً واحداً على الجوال */
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .chart-box{height:230px}
}

/* الشاشات الصغيرة جداً (iPhone SE وما شابه) */
@media (max-width:400px){
  .bp-top{padding:12px 11px;gap:9px}
  .bp-row{grid-template-columns:26px 1fr;gap:8px;padding:9px 10px}
  .bp-row .rank{width:24px;height:24px}
  .mini{padding:5px 9px;font-size:10.5px}
  .bp-list{padding:10px 11px}
  .content{padding:14px 11px calc(24px + env(safe-area-inset-bottom))}
  .card-body{padding:14px}
  .stat{padding:15px}
  .stat .val{font-size:23px}
}

/* ضمان نهائي: لا تمرير أفقي على الجوال مهما كان المحتوى */
@media (max-width:820px){
  html{overflow-x:clip}
  body{overflow-x:clip}
}

/* =====================================================================
   شريط سفلي للوحة التحكم على الجوال
   ===================================================================== */
.admin-bottom{display:none}

@media (max-width:820px){
  .admin-bottom{
    display:flex;position:fixed;inset-inline:0;bottom:0;z-index:75;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.09);
    padding-bottom:env(safe-area-inset-bottom)
  }
  .admin-bottom a,.admin-bottom button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 8px;min-height:58px;text-decoration:none;border:none;background:none;
    font-family:inherit;font-size:10.5px;font-weight:700;color:var(--ink-400);cursor:pointer;
    position:relative;transition:color .15s
  }
  .admin-bottom .ic{display:grid;place-items:center;height:22px}
  .admin-bottom .ic svg{width:21px;height:21px}
  .admin-bottom a.active{color:var(--green-700)}
  .admin-bottom a.active::before{
    content:'';position:absolute;top:0;inset-inline:22%;height:3px;border-radius:0 0 4px 4px;
    background:var(--green-600)
  }
  .admin-bottom a:active,.admin-bottom button:active{background:#F4F7F5}

  /* مساحة أسفل المحتوى حتى لا يغطيه الشريط */
  .content{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .pos-sticky{bottom:calc(58px + env(safe-area-inset-bottom))}
  .pos-inv{margin-bottom:130px}
}

/* اختصارات أكثف على الجوال — لرؤية محتويات اللوحة بنظرة واحدة */
@media (max-width:520px){
  .tiles{grid-template-columns:repeat(3,1fr);gap:9px}
  .tile{min-height:96px;padding:12px 6px 10px;border-radius:15px}
  .tile .ic-wrap{width:38px;height:38px;border-radius:11px;margin-bottom:7px}
  .tile .ic-wrap svg{width:19px;height:19px}
  .tile .lbl{font-size:11px;line-height:1.35}
  .hero{padding:16px 15px}
  .hero h2{font-size:18px}
  .hero p{font-size:12px}
  .quick{gap:7px}
  .quick > *{font-size:11px;padding:7px 10px}
}
@media (max-width:360px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}

/* ترتيب الطبقات: القائمة الجانبية فوق الشريط السفلي */
@media (max-width:820px){
  .sidebar{z-index:95}
  .backdrop{z-index:90}
  .sidebar-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .sidebar .nav{padding-bottom:12px}
}

/* =====================================================================
   كثافة أعلى للمحتوى على الجوال والتابلت — إظهار أكبر قدر من لوحة التحكم
   ===================================================================== */
@media (max-width:820px){
  /* شريط علوي أنحف + إخفاء اسم الصفحة المكرر (يظهر أسفله في العنوان) */
  .tabbar{height:48px;gap:5px;padding:0 12px}
  .tabbar span.tab{display:none}
  .tabbar .tab{padding:7px 12px;font-size:12.5px}
  .tab-actions{gap:7px;padding-bottom:6px}
  .avatar{width:30px;height:30px;font-size:13px}
  .chip{padding:5px 8px}
  .burger{font-size:22px;padding:0 2px 6px}

  /* عنوان الصفحة أصغر وأقرب للمحتوى */
  .page-title{margin-bottom:12px}
  .page-title h1{font-size:19px;padding-bottom:6px}
  .page-title p{font-size:12px;margin-top:2px}
  .content{padding:13px 13px 26px}
}

/* --- نقطة البيع على الجوال --- */
@media (max-width:759px){
  .posfilters{display:grid;grid-template-columns:1fr auto;gap:8px}
  .posfilters .input{grid-column:1/-1;min-width:0;width:100%}
  .posfilters .select{max-width:none;width:100%;min-width:0}
  .posfilters .btn{width:auto;white-space:nowrap}
  .scanbar{padding:9px 11px;gap:7px;border-radius:14px}
  .scanbar .btn{padding:10px 14px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
  .pcard button{padding:7px;border-radius:13px;gap:4px}
  .pcard img{aspect-ratio:4/3;border-radius:9px}
  .pcard .nm{font-size:11.5px;min-height:32px}
  .pcard .pr{font-size:13.5px}
  .pcard .mt{gap:4px;font-size:10px}
}

/* شريط الأقسام في الرئيسية: العنوان والزر في سطر واحد، والتلميح يختفي على الجوال */
@media (max-width:820px){
  .sec-bar{gap:8px;margin-bottom:11px;flex-wrap:nowrap}
  .sec-bar .ttl{font-size:14.5px;min-width:0}
  .sec-bar .tip{display:none}
  .sec-bar .right{flex-shrink:0}
  .sec-bar .right .btn{white-space:nowrap}
}

/* لوحة الترحيب مضغوطة على الجوال */
@media (max-width:520px){
  .hero{padding:15px 16px;border-radius:16px}
  .hero h2{font-size:18px;margin-top:0}
  .hero p{font-size:12px;margin-top:3px}
  .hero .greet{font-size:11.5px}
  .hero .quick{gap:6px;margin-top:11px}
  .hero .quick span{padding:6px 10px;font-size:11.5px}
  .hero .crescent{display:none}
}

/* زر طيّ/فتح لوحة الفلاتر على الجوال */
.filters-toggle{display:none}
@media (max-width:820px){
  .filters-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:12px 15px;margin-bottom:12px;font-family:inherit;font-size:13.5px;font-weight:800;
    color:var(--ink-700);cursor:pointer;box-shadow:var(--sh-1)}
  .filters-toggle .n{background:var(--green-50);color:var(--green-800);
    border-radius:999px;padding:1px 8px;font-size:11.5px;margin-inline-start:5px}
  .filters-toggle .cv{transition:transform .18s;font-size:16px;color:var(--ink-400)}
  .filters-toggle[aria-expanded="true"] .cv{transform:rotate(180deg)}
  .filters-hidden{display:none !important}
}

/* رابط الانتقال بين البوابات (المورد · المندوب · الكاشير) */
.portal-link{display:flex;align-items:center;gap:11px;margin-top:11px;padding:12px 14px;
  background:#F5F7FB;border:1px solid #E5EAF2;border-radius:14px;text-decoration:none;
  color:inherit;transition:.15s;text-align:start}
.portal-link:hover{background:#EEF2F9;border-color:#D3DCEA;transform:translateY(-1px)}
.portal-link .ic{font-size:21px;flex-shrink:0}
.portal-link .tx{flex:1;min-width:0}
.portal-link .tx b{display:block;font-size:13.5px;font-weight:800}
.portal-link .tx span{display:block;font-size:11.5px;color:var(--ink-400);line-height:1.6}
.portal-link .ar{color:var(--ink-400);font-size:17px;flex-shrink:0}