@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ===== Tokens ===== */
:root{
  --font:Inter,Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#F4F7FA;--surface:#fff;--subtle:#F1F5F9;--hover:#F4F7FA;
  --border:#E7EBF0;--border-strong:#D5DCE5;
  --text:#1D2630;--text-2:#4B5868;--text-3:#8996A6;
  --accent:#4680FF;--accent-h:#3A6FE6;--accent-soft:#EBF2FF;--accent-ring:rgba(70,128,255,.22);
  --ok:#1E8E6A;--ok-bg:#E6F6F0;--warn:#B76E00;--warn-bg:#FFF3DC;--danger:#D12F2F;--danger-bg:#FDECEC;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --r-sm:8px;--r-md:10px;--r-lg:14px;
  --shadow-xs:0 1px 2px rgba(29,38,48,.04);
  --shadow-sm:0 2px 10px rgba(29,38,48,.06);
  --shadow-lg:0 24px 48px -16px rgba(29,38,48,.3);
  --ease:.18s ease;--side-w:250px;--top-h:62px;
  --ic-grid:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>");
  --ic-box:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5v8l9 5 9-5z'/><path d='M3 8l9 5 9-5M12 13v8'/></svg>");
  --ic-bag:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/><path d='M3 6h18M16 10a4 4 0 01-8 0'/></svg>");
  --ic-chart:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M6 20v-7M12 20V5M18 20v-10'/></svg>");
}

/* ===== Base ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Shell ===== */
#app{display:flex;min-height:100vh}
.side{width:var(--side-w);flex:none;background:var(--surface);border-inline-end:1px solid var(--border);padding:var(--sp-4) var(--sp-3);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;height:40px;padding:0 var(--sp-3);margin-bottom:var(--sp-4);font-size:19px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:var(--sp-2);height:var(--top-h);padding:0 var(--sp-5);background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.top h2{margin:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}
main{padding:var(--sp-5);max-width:1240px;margin:auto}
main:focus{outline:0}

/* ===== Navigation ===== */
nav::before{content:"القائمة";display:block;padding:var(--sp-2) var(--sp-3);color:var(--text-3);font-size:12px;font-weight:600}
nav button{display:flex;align-items:center;gap:var(--sp-3);width:100%;height:42px;padding:0 var(--sp-3);margin-bottom:2px;background:none;border:0;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;text-align:start;cursor:pointer;transition:background var(--ease),color var(--ease)}
nav button::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
nav button[data-view=overview]{--ic:var(--ic-grid)}
nav button[data-view=products]{--ic:var(--ic-box)}
nav button[data-view=orders]{--ic:var(--ic-bag)}
nav button:hover{background:var(--hover);color:var(--text)}
nav button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* ===== Hero banner (overview only) ===== */
body:has(nav button.on[data-view=overview]) main::before{
  content:"أهلاً بك في natassia\A تابع مبيعاتك وطلباتك ومنتجاتك من مكان واحد";white-space:pre-line;display:block;margin-bottom:var(--sp-5);padding:var(--sp-6);min-height:132px;border-radius:var(--r-lg);color:#fff;font-size:14px;line-height:1.9;
  background:radial-gradient(circle at 12% 120%,rgba(255,255,255,.22) 0 90px,transparent 91px),radial-gradient(circle at 4% 20%,rgba(255,255,255,.12) 0 60px,transparent 61px),linear-gradient(110deg,#4680FF,#6C6CF5 65%,#8A6DF6);
  box-shadow:0 12px 28px -14px rgba(70,128,255,.7)}
body:has(nav button.on[data-view=overview]) main::first-line{font-size:22px;font-weight:700}

/* ===== Cards & KPIs ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:var(--sp-5)}
.card.tw{padding:0}
.grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:var(--sp-5)}
.kpi{--kc:#4680FF;position:relative;padding:var(--sp-4) var(--sp-5) 56px;transition:box-shadow var(--ease)}
.kpi:nth-child(2){--kc:#2CA87F}.kpi:nth-child(3){--kc:#E58A00}.kpi:nth-child(4){--kc:#E5484D}
.kpi:hover{box-shadow:var(--shadow-sm)}
.kpi::before{content:"";position:absolute;inset-block-start:var(--sp-4);inset-inline-start:var(--sp-5);width:38px;height:38px;border-radius:50%;background:var(--ic-chart) center/18px no-repeat,var(--kc)}
.kpi small{display:block;margin-top:50px;color:var(--text-3);font-size:13px;font-weight:500}
.kpi b{display:block;margin-top:2px;font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi::after{content:"";position:absolute;inset-block-end:var(--sp-4);inset-inline-end:var(--sp-5);width:84px;height:30px;opacity:.9;
  background:
   linear-gradient(var(--kc),var(--kc)) right 0 bottom 0/8px 45%,linear-gradient(var(--kc),var(--kc)) right 14px bottom 0/8px 70%,
   linear-gradient(var(--kc),var(--kc)) right 28px bottom 0/8px 55%,linear-gradient(var(--kc),var(--kc)) right 42px bottom 0/8px 90%,
   linear-gradient(var(--kc),var(--kc)) right 56px bottom 0/8px 65%,linear-gradient(var(--kc),var(--kc)) right 70px bottom 0/8px 100%;
  background-repeat:no-repeat;border-radius:2px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 var(--sp-4);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform .1s}
.btn:hover{background:var(--hover);border-color:var(--border-strong)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 14px -6px rgba(70,128,255,.7)}
.btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:var(--danger-bg);border-color:#F6C6C6}
.btn.sm{height:32px;padding:0 var(--sp-3);font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ===== Forms ===== */
.bar{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.bar input,.bar select{flex:1;min-width:160px}
input,select,textarea{width:100%;height:40px;padding:0 var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);transition:border-color var(--ease),box-shadow var(--ease)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--subtle);color:var(--text-3);cursor:not-allowed}
textarea{height:auto;min-height:96px;padding:var(--sp-2) var(--sp-3);resize:vertical}
select{appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238996A6' stroke-width='1.6'><path d='M1 1.5l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:left 12px center}
[dir=ltr] select{background-position:right 12px center}
input[type=checkbox],input[type=radio]{width:18px;height:18px;padding:0;accent-color:var(--accent)}
label{display:block;margin:var(--sp-4) 0 6px;font-size:13px;font-weight:500;color:var(--text-2)}
.fe{margin-top:6px;color:var(--danger);font-size:12.5px}
.err{min-height:1.3em;margin:var(--sp-2) 0;color:var(--danger);font-size:13px}

/* ===== Tables ===== */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:0 var(--sp-4);height:60px;text-align:start;vertical-align:middle;border-bottom:1px solid var(--border)}
th{height:44px;background:#F8FAFC;color:var(--text-3);font-size:12.5px;font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FAFCFF}
td.n{white-space:nowrap;font-variant-numeric:tabular-nums}
.th{display:block;width:42px;height:42px;border-radius:var(--r-sm);object-fit:cover;background:var(--subtle);border:1px solid var(--border)}
.row{display:flex;gap:6px;flex-wrap:wrap}
.muted{color:var(--text-3)}
.empty{padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--text-3)}
.two{display:grid;gap:var(--sp-4);grid-template-columns:1fr 1fr}

/* ===== Pills ===== */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{background:var(--ok-bg);color:var(--ok)}.wn{background:var(--warn-bg);color:var(--warn)}
.er{background:var(--danger-bg);color:var(--danger)}.in{background:var(--accent-soft);color:var(--accent)}.gy{background:var(--subtle);color:var(--text-2)}

/* ===== Dialogs ===== */
dialog{width:min(640px,94vw);max-height:92vh;padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
dialog[open]{animation:dlg .2s ease-out}
dialog::backdrop{background:rgba(29,38,48,.45);backdrop-filter:blur(2px)}
.dh{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.dh h3{margin:0;flex:1;font-size:17px;font-weight:600}
.db{padding:var(--sp-2) var(--sp-5) var(--sp-5);overflow:auto;max-height:68vh}
.df{display:flex;gap:var(--sp-2);justify-content:flex-end;padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border);background:#F8FAFC;border-radius:0 0 var(--r-lg) var(--r-lg)}
.pv{display:block;width:96px;height:96px;margin-bottom:var(--sp-2);border-radius:var(--r-md);object-fit:cover;border:1px solid var(--border)}

/* ===== Login ===== */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--sp-4);background:radial-gradient(circle at 85% 10%,rgba(138,109,246,.18),transparent 45%),radial-gradient(circle at 10% 90%,rgba(70,128,255,.18),transparent 45%),var(--bg)}
.login-card{width:min(400px,100%);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.login-card h1{margin:0 0 var(--sp-2);font-size:24px;font-weight:700;color:var(--accent)}
.login-card small{display:block;margin-top:2px;color:var(--text-3);font-size:14px;font-weight:400}
.login-card .btn{width:100%;height:44px;margin-top:var(--sp-2)}

/* ===== Toast ===== */
#toast{position:fixed;inset-block-end:var(--sp-5);inset-inline-start:var(--sp-5);z-index:99;padding:var(--sp-3) var(--sp-4);background:var(--text);color:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
#toast.show{opacity:1;transform:none}#toast.bad{background:var(--danger)}
@keyframes dlg{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}

/* ===== Tablet / Phone ===== */
@media(max-width:1100px){:root{--side-w:210px}main{padding:var(--sp-4)}}
@media(max-width:820px){
  #app{display:block}
  .side{position:static;width:auto;height:auto;padding:0;overflow:visible;border:0;background:none}
  .brand{height:48px;margin:0;padding:0 var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border)}
  /* bottom tab bar */
  nav{position:fixed;inset-inline:0;bottom:0;z-index:20;display:flex;padding:6px var(--sp-2) calc(6px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
  nav::before{display:none}
  nav button{flex:1;flex-direction:column;justify-content:center;gap:2px;height:54px;margin:0;padding:0 4px;font-size:11.5px;position:relative}
  nav button::before{width:22px;height:22px}
  nav button.on{background:none}
  nav button.on::after{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .badge{position:absolute;top:4px;inset-inline-start:calc(50% + 4px);margin:0;min-width:18px;height:18px;font-size:10.5px}
  .top{position:sticky;top:0;height:56px;padding:0 var(--sp-4)}
  .top .btn{height:36px;padding:0 var(--sp-3);font-size:13px}
  main{padding:var(--sp-4) var(--sp-3) calc(88px + env(safe-area-inset-bottom,0px))}
  body:has(nav button.on[data-view=overview]) main::before{padding:var(--sp-5);min-height:0;font-size:13px}
  body:has(nav button.on[data-view=overview]) main::first-line{font-size:19px}
  .two{grid-template-columns:1fr}
  .card{padding:var(--sp-4)}
  .grid{grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .kpi{padding:var(--sp-3) var(--sp-3) 52px}
  .kpi::before{inset-block-start:var(--sp-3);inset-inline-start:var(--sp-3);width:34px;height:34px}
  .kpi::after{inset-block-end:var(--sp-3);inset-inline-end:var(--sp-3);width:70px;transform:scaleX(.83);transform-origin:right}
  .kpi small{margin-top:44px;font-size:12px}
  .kpi b{font-size:20px}
  /* table → cards */
  .card.tw{background:none;border:0;box-shadow:none}
  .mt thead{display:none}
  .mt tr{display:block;margin-bottom:var(--sp-3);padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
  .mt tbody tr:hover td{background:none}
  .mt td{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);height:auto;min-height:38px;padding:var(--sp-1) var(--sp-2);border:0}
  .mt td::before{content:attr(data-l);flex:none;color:var(--text-3);font-size:12.5px}
  .mt .row{justify-content:flex-end}.mt .btn.sm{height:38px}
  /* inputs: 16px stops iOS zoom, 44px touch targets */
  input,select,textarea{font-size:16px;height:44px}textarea{height:auto}
  .btn{height:44px}.btn.sm{height:38px}
  .bar input,.bar select{min-width:100%}
  /* dialogs → bottom sheet */
  dialog{width:100%;max-width:100%;max-height:92vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  dialog[open]{animation:sheet .28s cubic-bezier(.2,.8,.2,1)}
  .db{max-height:calc(92vh - 140px)}
  .df{padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));border-radius:0}
  .df .btn{flex:1}
  #toast{inset-inline:var(--sp-3);inset-block-end:calc(80px + env(safe-area-inset-bottom,0px));text-align:center}
}
@media(max-width:380px){.top .btn:not(#out){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,dialog[open]{transition:none!important;animation:none!important}}

.chk{display:flex;align-items:center;gap:10px;cursor:pointer}.chk input{width:auto;min-height:0;accent-color:var(--p)}


/* =====================================================================
   ستايل زجاجي شفاف وهادئ
   خلفية باستيل ناعمة + بطاقات زجاجية + شريط سفلي عائم في الهاتف
   ===================================================================== */
:root{
  --bg:transparent;
  --surface:rgba(255,255,255,.58);--subtle:rgba(255,255,255,.45);--hover:rgba(255,255,255,.74);
  --border:rgba(255,255,255,.72);--border-strong:rgba(31,42,55,.14);
  --text:#1f2a37;--text-2:#45515f;--text-3:#768291;
  --accent:#6a42c8;--accent-h:#5a35b3;--accent-soft:rgba(106,66,200,.15);--accent-ring:rgba(106,66,200,.26);
  --shadow-xs:0 1px 2px rgba(31,42,55,.04),0 10px 26px -14px rgba(31,42,55,.12);
  --shadow-sm:0 2px 10px rgba(31,42,55,.05),0 18px 38px -18px rgba(31,42,55,.18);
  --glass:blur(20px) saturate(1.6);
  --ic-store:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l1.5-5h15L21 9'/><path d='M4 9v11h16V9'/><path d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/><path d='M10 20v-6h4v6'/></svg>");
  --ic-exit:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5M21 12H9'/></svg>");
}
html{background:#f3f0f6}
body{background:transparent;color:var(--text)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(60vmax 46vmax at 6% -8%,rgba(245,186,208,.55),transparent 62%),
   radial-gradient(52vmax 44vmax at 100% 2%,rgba(177,208,238,.55),transparent 58%),
   radial-gradient(54vmax 50vmax at 72% 112%,rgba(198,184,244,.55),transparent 62%),
   #f3f0f6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* أسطح زجاجية */
.side,.top,.card,.brand{-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
.side{background:rgba(255,255,255,.46);border-inline-end:1px solid rgba(255,255,255,.75)}
.top{background:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.75)}
.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,.8)}
.brand{color:var(--accent)}

/* القائمة (سطح المكتب) */
nav button:hover{background:rgba(255,255,255,.6)}
nav button.on{background:rgba(255,255,255,.8);color:var(--accent);box-shadow:0 8px 18px -10px rgba(31,42,55,.3),inset 0 1px 0 #fff}
nav a.nav-extra{display:flex;align-items:center;justify-content:center;color:var(--text-2);text-decoration:none}
nav a.nav-extra::before{content:"";width:23px;height:23px;background:currentColor;-webkit-mask:var(--ic-store) center/contain no-repeat;mask:var(--ic-store) center/contain no-repeat}
nav button[data-logout]{--ic:var(--ic-exit)}
.badge{background:#d9566f}

/* الشعار الترحيبي في نظرة عامة */
body:has(nav button.on[data-view=overview]) main::before{
  background:radial-gradient(circle at 12% 120%,rgba(255,255,255,.26) 0 90px,transparent 91px),radial-gradient(circle at 4% 20%,rgba(255,255,255,.16) 0 60px,transparent 61px),linear-gradient(110deg,rgba(106,66,200,.9),rgba(134,92,220,.86) 60%,rgba(178,122,228,.84));
  box-shadow:0 18px 36px -18px rgba(106,66,200,.6),inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
.kpi{--kc:#6a42c8}.kpi:nth-child(2){--kc:#5b8def}.kpi:nth-child(3){--kc:#e0a03a}.kpi:nth-child(4){--kc:#d9667f}

/* أزرار وحقول */
.btn{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 16px -10px rgba(31,42,55,.18)}
.btn:hover{background:rgba(255,255,255,.85);border-color:#fff}
.btn.primary{background:linear-gradient(180deg,#7a54d6,#5a35b3);border-color:transparent;color:#fff;box-shadow:0 10px 20px -10px rgba(106,66,200,.75),0 1px 0 rgba(255,255,255,.35) inset}
.btn.primary:hover{background:linear-gradient(180deg,#7149d0,#5230a8)}
input,select,textarea{background:rgba(255,255,255,.66);border-color:rgba(31,42,55,.12)}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.9)}
table tr:hover td{background:rgba(255,255,255,.45)}

/* النوافذ المنبثقة */
dialog{background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7)}
dialog::backdrop{background:rgba(40,46,62,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.login{background:transparent}

/* الهاتف: شريط عائم شفاف بأيقونات فقط */
@media(min-width:821px){nav .nav-extra{display:none}}
@media(max-width:820px){
  .brand{background:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.75)}
  .top>.btn,.top #out{display:none}
  /* التمويه على .side يكسر تثبيت الشريط السفلي (fixed) فنلغيه هنا */
  .side{-webkit-backdrop-filter:none;backdrop-filter:none;background:none;border:0}
  nav{inset-inline:0;margin-inline:auto;width:min(360px,calc(100% - 28px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
    padding:8px;gap:2px;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.85);border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.36));
    -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
    box-shadow:0 20px 40px -14px rgba(31,42,55,.3),inset 0 1px 0 rgba(255,255,255,.95)}
  nav button,nav a.nav-extra{flex:1 1 0;width:46px;max-width:56px;height:46px;aspect-ratio:1;margin:0;padding:0;border-radius:50%;
    justify-content:center;gap:0;font-size:0;color:var(--text-2);position:relative;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
  nav button::before{width:23px;height:23px}
  nav button:hover,nav a.nav-extra:hover{background:rgba(255,255,255,.6)}
  nav button.on{background:linear-gradient(180deg,#7a54d6,#5a35b3);color:#fff;box-shadow:0 10px 20px -8px rgba(106,66,200,.8),inset 0 1px 0 rgba(255,255,255,.35)}
  nav button.on::after{display:none}
  .badge{top:2px;inset-inline-start:calc(50% + 6px);font-size:10.5px}
  main{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
}

/* بدائل عند عدم دعم التمويه أو عند طلب تقليل الشفافية */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--surface:rgba(255,255,255,.92)}
  .side,.top,.brand,nav,dialog{background:rgba(255,255,255,.96)!important}
}
@media(prefers-reduced-transparency:reduce){
  :root{--surface:#fff}
  .side,.top,.brand,nav,dialog{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}


/* =====================================================================
   إصلاحات: أيقونة الحاسوب + راحة التصفح في الهاتف
   ===================================================================== */
/* الأيقونة الزائدة تحت «الطلبات» في الحاسوب: قاعدة a.nav-extra كانت أقوى من قاعدة الإخفاء */
@media(min-width:821px){nav a.nav-extra,nav button.nav-extra{display:none}}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:820px){
  html,body{max-width:100%;overflow-x:clip}
  #app,.login{min-height:100dvh}
  /* رأسان أقصر لمساحة قراءة أكبر */
  .brand{height:40px;font-size:17px}
  .top{height:50px;padding:0 var(--sp-3)}
  .top h2{font-size:16px}
  main{padding:var(--sp-3) var(--sp-3) calc(104px + env(safe-area-inset-bottom,0px))}
  /* شعار نظرة عامة وبطاقات الأرقام أصغر */
  body:has(nav button.on[data-view=overview]) main::before{padding:var(--sp-4);margin-bottom:var(--sp-3);font-size:12.5px;line-height:1.8}
  body:has(nav button.on[data-view=overview]) main::first-line{font-size:17px}
  .grid{gap:10px;margin-bottom:var(--sp-3)}
  .kpi{padding:12px 12px 46px}
  .kpi small{margin-top:42px}
  .kpi b{font-size:18px}
  /* بطاقات الجداول أكثر إحكاماً */
  .mt tr{padding:4px 6px;margin-bottom:10px}
  .mt td{min-height:32px;padding:3px 8px;font-size:13.5px}
  .mt .th{width:44px;height:44px}
  .btn{height:42px}.btn.sm{height:36px}
  /* شريط البحث والتصفية: الحقلان القائمتان بجانب بعض والزر بعرض كامل */
  .bar{gap:8px}
  .bar select{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px)}
  .bar .btn.primary{flex:1 0 100%}
  /* النوافذ: وحدة dvh تتجنب اقتطاع الشريط السفلي في متصفحات الجوال */
  dialog{max-height:92dvh}
  .db{max-height:calc(92dvh - 140px)}
  /* الشريط العائم أنحف قليلاً */
  nav{width:min(340px,calc(100% - 24px));padding:6px}
  nav button,nav a.nav-extra{height:44px;width:44px}
}
@media(max-width:380px){
  .kpi b{font-size:16px}
  nav{padding:5px}
  nav button::before,nav a.nav-extra::before{width:21px;height:21px}
}

/* =====================================================================
   الهاتف: شريط البحث والتصفية أصغر ويأخذ مساحة أقل
   السطر الأول: البحث + زر الإضافة | السطر الثاني: القائمتان بجانب بعض
   ===================================================================== */
@media(max-width:820px){
  .bar{gap:8px;margin-bottom:10px}
  .bar input,.bar select{height:38px;min-height:0;padding-block:0;border-radius:10px;min-width:0}
  .bar input{order:1;flex:1 1 calc(100% - 132px)}
  .bar .btn.primary{order:2;flex:0 0 auto;height:38px;padding:0 14px;font-size:13.5px;white-space:nowrap}
  .bar select{order:3;flex:1 1 calc(50% - 4px)}
  .bar:not(:has(.btn)) input{flex-basis:calc(55% - 4px)}
  .bar:not(:has(.btn)) select{flex-basis:calc(45% - 4px)}
}

/* ===== بطاقات المنتجات ===== */
.pgrid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pc{padding:0;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow var(--ease)}
.pc:hover{box-shadow:var(--shadow-sm)}
.pc.off .pc-img img{filter:grayscale(.6);opacity:.75}
.pc-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--subtle)}
.pc-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pc-img .pill{position:absolute;inset-block-start:var(--sp-3);inset-inline-start:var(--sp-3);background-clip:padding-box;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pc-img .pill.st{inset-block-start:auto;inset-block-end:var(--sp-3)}
.pc-b{flex:1;display:flex;flex-direction:column;gap:6px;padding:var(--sp-4)}
.pc-b .cat{color:var(--accent);font-weight:500}
.pc-b h3{margin:0;font-size:16px;line-height:1.4}
.pc-p{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);font-size:13px}
.price b{font-size:17px;color:var(--text)}
.pc-t{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:var(--sp-2)}
.pc-t .btn{height:28px;padding:0 var(--sp-2);font-size:12px}
.pc-f{display:flex;gap:var(--sp-2);padding:0 var(--sp-4) var(--sp-4)}
.pc-f .btn{flex:1}
.pc-f .btn.danger{flex:none;width:40px;padding:0}

/* الهاتف: منتجان في كل صف */
@media (max-width:640px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pc-img .pill{inset-block-start:6px;inset-inline-start:6px;padding:2px 8px;font-size:11px}
  .pc-img .pill.st{inset-block-start:auto;inset-block-end:6px}
  .pc-b{padding:10px;gap:4px}
  .pc-b h3{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
  .pc-b .cat{font-size:11px}
  .pc-p{flex-direction:column;align-items:flex-start;gap:0}
  .price b{font-size:15px}
  .pc-b>small[dir=ltr]{display:none}
  .pc-t{gap:4px}
  .pc-t .btn{flex:1 1 auto;min-width:0;padding:0 6px}
  .pc-f{padding:0 10px 10px;gap:6px}
  .pc-f .btn{height:36px;font-size:12px;padding:0 6px}
  .pc-f .btn.danger{width:36px}
}


/* ===== زر إشعارات الطلبات (الجرس) ===== */
:root{--ic-bell:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.7 21a2 2 0 0 1-3.4 0'/></svg>")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bell{position:relative;flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;margin-inline-end:6px;padding:0;border-radius:50%;cursor:pointer;
  color:var(--text-2);border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.62);box-shadow:0 6px 16px -10px rgba(31,42,55,.2),inset 0 1px 0 rgba(255,255,255,.8);
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.bell::before{content:"";width:21px;height:21px;background:currentColor;-webkit-mask:var(--ic-bell) center/contain no-repeat;mask:var(--ic-bell) center/contain no-repeat}
.bell:not(.on)::after{content:"";position:absolute;width:24px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg);opacity:.75}
.bell.on{color:#fff;border-color:transparent;background:linear-gradient(180deg,#7a54d6,#5a35b3);box-shadow:0 10px 20px -8px rgba(106,66,200,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.bell:hover{filter:brightness(1.04)}


/* الهاتف: إنزال الشريط العائم قليلاً نحو الأسفل */
@media(max-width:820px){
  nav{bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  #toast{inset-block-end:calc(66px + env(safe-area-inset-bottom,0px))}
}