:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --border:#e5e9f2;
  --text:#182033;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#eaf1fe;
  --soft-bg:#f1f5f9;
  --soft-bg-2:#f8fafc;
  --img-bg:#fafbfe;
  --err-bg:#fee2e2;
  --err-text:#b91c1c;
  --val-color:#0f766e;
  --val-bg:#ecfdf5;
  --danger:#dc2626;
  --ok:#16a34a;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:0 10px 40px rgba(16,24,40,.18);
}
[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#151e2e;
  --border:#2a3648;
  --text:#e6ecf5;
  --muted:#8fa0b5;
  --primary:#3b82f6;
  --primary-dark:#2f6fe0;
  --primary-soft:#1b2c47;
  --soft-bg:#1c2739;
  --soft-bg-2:#182334;
  --img-bg:#0f1729;
  --err-bg:#3a1d22;
  --err-text:#fda4af;
  --val-color:#5eead4;
  --val-bg:#123b34;
  --danger:#f87171;
  --ok:#4ade80;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 10px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",Tahoma,"Noto Kufi Arabic","Noto Sans Arabic",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== الشريط العلوي ===== */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 24px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:44px;height:44px;border-radius:12px;font-size:24px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.brand-text h1{font-size:18px;font-weight:800;line-height:1.2}
.subtitle{font-size:12.5px;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ===== الأزرار والمدخلات ===== */
.btn{
  appearance:none;border:none;cursor:pointer;border-radius:10px;
  padding:9px 14px;font-size:14px;font-weight:700;font-family:inherit;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.3)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:disabled{background:#b9c6e8;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--soft-bg);color:var(--text)}
.btn-small{padding:6px 11px;font-size:12.5px;border-radius:8px}
.icon-btn{background:transparent;border:none;cursor:pointer;font-size:18px;color:var(--muted);border-radius:8px;width:32px;height:32px}
.icon-btn:hover{background:var(--soft-bg);color:var(--text)}
.lock-btn{font-size:15px;padding:8px 12px}
.lock-btn.unlocked{color:var(--ok);border-color:var(--ok);background:var(--val-bg)}

.input{
  font-family:inherit;font-size:14px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  outline:none;transition:border .15s ease, box-shadow .15s ease;
}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.select{
  font-family:inherit;font-size:14px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  cursor:pointer;outline:none;max-width:260px;
}
.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* ===== قائمة التصدير ===== */
.export-menu{position:relative;display:inline-block}
.export-menu summary{list-style:none;cursor:pointer}
.export-menu summary::-webkit-details-marker{display:none}
.export-drop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:50;min-width:190px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.export-drop button{
  border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13.5px;
  padding:9px 12px;border-radius:8px;text-align:right;color:var(--text);
}
.export-drop button:hover{background:var(--soft-bg)}

/* ===== الحاوية وشريط الأدوات ===== */
.container{max-width:1200px;margin:0 auto;padding:24px 20px 60px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.search{flex:1 1 260px;min-width:220px}
.mount-toggle{display:inline-flex;background:var(--soft-bg);border-radius:10px;padding:3px;gap:2px}
.chip{
  border:none;background:transparent;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:13px;padding:6px 14px;border-radius:8px;color:var(--muted);transition:all .15s ease;
}
.chip.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px rgba(16,24,40,.12)}

/* ===== الإحصائيات ===== */
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 20px;min-width:120px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;
}
.stat-num{font-size:22px;font-weight:800;color:var(--primary)}
.stat-label{font-size:12.5px;color:var(--muted)}

/* ===== شبكة البطاقات ===== */
.grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card.low{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.card.warn{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.cat-chip{font-size:12px;font-weight:700;color:var(--primary);background:var(--primary-soft);padding:3px 10px;border-radius:999px}
.mount{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;color:#fff}
.mount.smd{background:#0ea5e9}
.mount.tht{background:#f59e0b}
.badge{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;color:#fff}
.badge.low{background:#dc2626}
.badge.warn{background:#d97706}
.card-img{
  height:150px;display:grid;place-items:center;background:var(--img-bg);padding:8px;
}
.card-img img{max-height:134px;max-width:100%;object-fit:contain}
.no-img{font-size:52px;opacity:.6}
.card-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-name{font-size:14.5px;font-weight:800;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-model{font-size:12.5px;color:var(--muted)}
.card-meta{display:flex;flex-wrap:wrap;gap:6px}
.meta{font-size:12px;color:var(--muted);background:var(--soft-bg);padding:2px 8px;border-radius:6px}
.meta.value{color:var(--val-color);background:var(--val-bg);font-weight:700}
.params{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.param{font-size:11px;color:var(--muted);background:var(--soft-bg-2);border:1px solid var(--border);padding:2px 7px;border-radius:6px}
.param b{color:var(--text);font-weight:700}

.card-foot{
  border-top:1px solid var(--border);padding:10px 14px;
  display:flex;flex-direction:column;gap:8px;position:relative;
}
.qty-box{display:flex;align-items:center;gap:10px}
.qty-box button{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;font-size:16px;font-weight:800;color:var(--primary);
}
.qty-box button:hover{background:var(--primary-soft)}
.qty{font-size:13px;color:var(--muted)}
.qty b{font-size:16px;color:var(--text)}
.card-links{display:flex;gap:8px;flex-wrap:wrap}
.card-stock{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:8px;flex-wrap:wrap}
.card-stock b{color:var(--text)}
.card-actions{position:absolute;top:10px;left:12px;display:flex;gap:4px}
.act-btn{
  background:transparent;border:none;cursor:pointer;font-size:15px;opacity:.45;
  transition:opacity .15s ease;border-radius:8px;padding:2px 7px;
}
.act-btn:hover{opacity:1;background:var(--soft-bg)}

/* ===== الحالة الفارغة ===== */
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-icon{font-size:54px;margin-bottom:10px}
.empty-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px}
.empty-hint{font-size:14px}

/* ===== النافذة المنبثقة ===== */
.modal{
  position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:60;padding:20px;
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);
  width:100%;max-width:640px;max-height:90vh;overflow:auto;padding:22px;
}
.modal-small{max-width:420px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h2{font-size:18px;font-weight:800}
.pw-hint{font-size:13.5px;color:var(--muted);margin:2px 0 14px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row .input{flex:1 1 0;min-width:120px}
.row .input.qty{flex:0 0 90px}
.status{padding:10px 12px;border-radius:10px;background:var(--soft-bg);font-size:13.5px;margin-top:12px}
.status.err{background:var(--err-bg);color:var(--err-text)}
.preview-head{display:flex;gap:14px;align-items:center;margin:16px 0}
.preview-head img{width:72px;height:72px;object-fit:contain;background:var(--img-bg);border:1px solid var(--border);border-radius:10px}
.preview-head h3{font-size:15px;font-weight:800}
.preview-head p{font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}
.preview-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.preview-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted)}
.preview-form .input,.preview-form .select{width:100%;max-width:none}
.params-details{margin-top:14px}
.params-details summary{cursor:pointer;font-weight:700;color:var(--primary);font-size:13.5px}
.params-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:10px;padding:0;list-style:none}
.params-list li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;border-bottom:1px dashed var(--border);padding:4px 0}
.params-list span{color:var(--muted)}
.params-list b{text-align:left}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ===== إدارة الأقسام ===== */
.cat-add-row{display:flex;gap:8px;margin-bottom:14px}
.cat-add-row .input{flex:1}
.cat-icon-input{flex:0 0 64px !important;text-align:center}
.cat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.cat-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
.cat-ico{font-size:18px}
.cat-lbl{flex:1;font-weight:700}
.cat-rename-input{flex:1}

/* ===== الإضافة الدفعية ===== */
.bulk-codes{width:100%;resize:vertical;font-family:inherit;min-height:130px}
.bulk-qty-row{margin-top:12px}
.bulk-qty-row label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:700}
.bulk-qty-row .qty{width:90px}

/* ===== التنبيه ===== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#182033;color:#fff;padding:11px 20px;border-radius:12px;font-size:14px;
  box-shadow:var(--shadow-lg);z-index:80;
}
.toast.err{background:#b91c1c}

/* ===== التذييل ===== */
.footer{text-align:center;padding:20px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--border)}

@media (max-width:640px){
  .topbar{padding:12px 14px}
  .header-actions{width:100%}
  .header-actions .select{flex:1}
  .preview-form{grid-template-columns:1fr}
  .params-list{grid-template-columns:1fr}
}