/* ============================================================
   ERP تولا — نظام تصميم موحّد (Design System)
   ============================================================ */

/* ملحوظة: البرنامج شغال بالكامل أوفلاين، فمفيش استدعاء لخطوط من الإنترنت —
   لو خط Cairo مثبت على جهازك هيتستخدم تلقائي، ولو مش موجود هيرجع لأقرب خط نظام (Segoe UI/Tahoma). */

:root {
  --navy: #1F4E78;
  --navy-dark: #16395a;
  --navy-darker: #0f2843;
  --accent: #2f7dd1;
  --accent-light: #eaf1f8;
  --yellow: #FFF9DA;
  --gray: #F2F2F2;
  --orange: #FCE4D6;

  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #e1e6ed;
  --text: #24303f;
  --text-muted: #6b7688;

  --success-bg: #e2f3e5; --success-text: #1e6b2f; --success-border: #b6dfc0;
  --danger-bg: #fbe4e4;  --danger-text: #a12727;  --danger-border: #f0bcbc;
  --warning-bg: #fde2c8; --warning-text: #8a5218; --warning-border: #f4c894;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 40, 67, 0.06), 0 1px 1px rgba(15, 40, 67, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 40, 67, 0.08), 0 2px 6px rgba(15, 40, 67, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 40, 67, 0.14);

  --sidebar-w: 258px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;

  --transition: 180ms cubic-bezier(.4,0,.2,1);
}

html[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #182338;
  --surface-alt: #131e30;
  --border: #2a3a54;
  --text: #e6ebf3;
  --text-muted: #93a1b7;
  --accent-light: #1b2a42;

  --success-bg: #163524; --success-text: #6cd88a; --success-border: #245a37;
  --danger-bg: #3a1f22;  --danger-text: #f19999;  --danger-border: #6b3236;
  --warning-bg: #3a2c14; --warning-text: #f0c47b; --warning-border: #6b4f1f;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  direction: rtl;
  text-align: right;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  transition: background var(--transition), color var(--transition);
}

/* ---------------------------------------------------------------- Layout shell */
.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 32, 0.5);
  z-index: 40;
  opacity: 0;
  transition: opacity var(--transition);
}

/* ---------------------------------------------------------------- Icons (SVG محلي) */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  fill: currentColor;
}

/* ---------------------------------------------------------------- Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 55%, var(--navy-darker) 100%);
  color: #eaf1f8;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  transition: width var(--transition), flex-basis var(--transition), transform var(--transition);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
.brand-logo {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}
.brand-text { display: flex; flex-direction: column; overflow: hidden; }
.brand-title { font-weight: 800; font-size: 16px; color: #fff; }
.brand-subtitle { font-size: 11px; color: #cfe0f0; opacity: 0.85; }

.sidenav { padding: 10px 10px 14px; flex: 1; }

/* مجموعات القائمة الجانبية: قابلة للطي/الفتح — الروابط نفسها لم تُحذف، فقط اتنظّمت داخل مجموعات */
.nav-group { margin-top: 6px; }
.nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9fc0dc;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav-group-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-group-toggle .nav-group-icon { flex: 0 0 auto; }
.nav-group-toggle .nav-group-label { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.nav-group-toggle .nav-group-chevron {
  flex: 0 0 auto;
  transition: transform var(--transition);
}
.nav-group.open > .nav-group-toggle .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-title {
  /* legacy alias kept for any stray reference — same visual as nav-group-toggle label */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9fc0dc;
  padding: 6px 12px 6px;
  white-space: nowrap;
}

.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition);
}
.nav-group.open > .nav-group-items { max-height: 800px; }
.nav-group.has-active > .nav-group-items { max-height: 800px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #eaf1f8;
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  margin: 2px 0;
  position: relative;
  transition: background var(--transition), color var(--transition), padding var(--transition);
}
.nav-link.top-link { margin-top: 0; }
.nav-icon { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.nav-label { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--transition); }

.nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-link.active {
  background: rgba(255,255,255,0.16);
  color: #fff;
  box-shadow: inset 3px 0 0 #ffd166;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.theme-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #eaf1f8;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: background var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.theme-toggle:hover { background: rgba(255,255,255,0.16); }

/* Collapsed state (desktop) */
.app-shell.sidebar-collapsed .sidebar {
  width: var(--sidebar-w-collapsed);
  flex-basis: var(--sidebar-w-collapsed);
}
.app-shell.sidebar-collapsed .brand-text,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-group-title,
.app-shell.sidebar-collapsed .nav-group-label,
.app-shell.sidebar-collapsed .nav-group-chevron,
.app-shell.sidebar-collapsed .theme-label {
  opacity: 0;
  width: 0;
  display: none;
}
.app-shell.sidebar-collapsed .nav-link,
.app-shell.sidebar-collapsed .theme-toggle { justify-content: center; }
/* في وضع الأيقونات فقط: كل عناصر المجموعات تظهر دايمًا (بدون طي) عشان تفضل قابلة للاستخدام */
.app-shell.sidebar-collapsed .nav-group-items { max-height: none !important; }
.app-shell.sidebar-collapsed .nav-group-toggle { cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------- Main area */
.main-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

header.topbar {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: 0 22px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--shadow-sm);
}

.sidebar-toggle {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--transition);
}
.sidebar-toggle:hover { background: var(--accent-light); }

.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 17px; margin: 0; color: var(--text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 6px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.topbar-user-icon { display: inline-flex; color: var(--text-muted); }
.topbar-user-role { color: var(--text-muted); font-size: 12px; }
.topbar-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.topbar-export { flex: 0 0 auto; }

/* ---------------------------------------------------------------- Topbar actions: بحث شامل + إشعارات + إجراء سريع */
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* قائمة منسدلة عامة (نفس الآلية للإشعارات وللإجراء السريع) — الزرار المُطلِق .dropdown-trigger،
   واللوحة .dropdown-panel جوه حاوية position:relative، بتتفتح بإضافة كلاس open من initDropdowns() */
.dropdown { position: relative; }
.dropdown-trigger { position: relative; }
.dropdown-badge {
  position: absolute;
  top: -4px; left: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger-text);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}
.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  z-index: 120;
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.dropdown.open .dropdown-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px 8px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--accent-light); }
.dropdown-item-severity {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.dropdown-item-severity.warning { background: var(--warning-text); }
.dropdown-item-severity.danger { background: var(--danger-text); }
.dropdown-item-label { flex: 1; line-height: 1.5; }
.dropdown-empty { padding: 16px 10px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------- بحث شامل (Ctrl+K) */
.modal.modal-form.search-modal { max-width: 560px; width: 92%; }
.search-modal .search-box { max-width: none; margin-bottom: 10px; }
.search-results { max-height: 55vh; overflow-y: auto; }
.search-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 4px 6px;
}
.search-group-title:first-child { padding-top: 2px; }
.search-result-item {
  display: block;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  transition: background var(--transition);
}
.search-result-item:hover { background: var(--accent-light); }
.search-empty { padding: 24px 10px; color: var(--text-muted); font-size: 13.5px; text-align: center; }

main {
  padding: 22px 24px 60px;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

/* عنوان الصفحة: سطر واحد مضغوط بدل العناوين الضخمة القديمة، مع إمكانية وضع زرار إجراء رئيسي بجانبه */
h2.page-title {
  color: var(--text);
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}
html[data-theme="dark"] h2.page-title { color: #eaf1f8; }

.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 3px;
  margin-bottom: 0;
}

/* رأس الصفحة الموحّد: العنوان + الوصف على اليمين، وزرار الإجراء الرئيسي على الشمال بنفس السطر */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-header-text { min-width: 0; }
.page-header-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* بطاقة مضغوطة لصفحات التعديل البسيطة — مش عرض الصفحة بالكامل */
.card-narrow { max-width: 480px; }

/* ---------------------------------------------------------------- Toasts */
.toast-container {
  position: fixed;
  top: 78px;
  left: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  animation: toastIn 260ms cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
}
.toast.ok { border-right-color: var(--success-text); }
.toast.error { border-right-color: var(--danger-text); }
.toast .toast-close {
  margin-right: auto;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
}
.toast.leaving { animation: toastOut 220ms ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* legacy inline flash fallback (kept for no-JS safety) */
.flash { padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.flash.ok { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.flash.error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }

/* ---------------------------------------------------------------- Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  /* ملحوظة مهمة: .card ممكن يحتوي جدول فيه هيدر position:sticky (table.grid th)، فمينفعش
     الأنيميشن هنا يستخدم transform خالص (ولا حتى وقتي أثناء التشغيل) — أي transform على أي حاوية
     لعنصر sticky بيغيّر الـ containing block بتاعه وبيبوّظ حساب مكانه، وده بيخلي الهيدر يطلع فوق
     صفوف الجدول (مش ثابت في مكانه، ودايمًا بيخفي/يغطي صف). سفاري (WebKit) بالذات مش دايمًا بيصحّح
     الوضع لوحده تاني حتى بعد ما الأنيميشن تخلص، فالمشكلة بتفضل ظاهرة على طول لحد ما تعمل scroll/resize.
     عشان كده استخدمنا هنا fadeIn (opacity بس، من غير transform خالص) بدل fadeInUp، بدل ما نعتمد على
     إن الأنيميشن "تخلص" بسرعة — كده مفيش أي لحظة أثناء تحميل الصفحة فيها transform على .card خالص. */
  animation: fadeIn 320ms cubic-bezier(.4,0,.2,1);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }

.card h3 {
  margin-top: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
}
html[data-theme="dark"] .card h3 { color: #7fb4e8; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- Tables */
/* ملحوظة مهمة: border-collapse لازم يفضل "separate" (مش "collapse") هنا.
   سفاري (WebKit) عنده باج قديم ومعروف: position:sticky على th جوه جدول border-collapse:collapse
   مش بتشتغل صح خالص — الهيدر بيتقفز ويطلع فوق صفوف الجدول (وسط الصفحة) بدل ما يفضل ثابت فوق.
   كروم وفايرفوكس مش بيظهروا المشكلة دي فبسهولة ممكن حد يفوّتها لو مجربش سفاري بالذات. */
table.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  /* لازم من غير overflow:hidden هنا. لو حطينا overflow (حتى hidden) على الـ <table> نفسها وجواها
     th بـ position:sticky، المتصفح (خصوصًا كروم/سفاري) بيلخبط بين مكان الرسم (paint) ومكان الحساب
     (layout) للهيدر — بيتحسب صح لكن بيترسم غلط فوق صفوف الجدول. اتأكدنا من كده عمليًا: شيل overflow
     لوحده كفى يصلح المشكلة تمامًا، حتى من غير أي تعديل تاني. الأثر الوحيد إن زوايا الهيدر بقت
     مربعة بدل مدورة شوية — تفصيلة بسيطة جدًا مقابل إصلاح مشكلة اختفاء الصفوف. */
}
table.grid th {
  background: var(--navy);
  color: #fff;
  padding: 11px 8px;
  text-align: center;
  font-weight: 700;
  position: sticky;
  top: var(--topbar-h);
  user-select: none;
  border-bottom: 1px solid var(--navy-dark);
}
table.grid th.sortable { cursor: pointer; }
table.grid th.sortable:hover { background: var(--navy-dark); }
table.grid th.sortable::after { content: "⇅"; opacity: 0.5; font-size: 11px; margin-right: 5px; }
table.grid th.sort-asc::after { content: "▲"; opacity: 0.95; font-size: 10px; margin-right: 5px; }
table.grid th.sort-desc::after { content: "▼"; opacity: 0.95; font-size: 10px; margin-right: 5px; }

table.grid td {
  padding: 9px 8px;
  border: 1px solid var(--border);
  text-align: center;
  color: var(--text);
}
table.grid tr:nth-child(even) td { background: var(--surface-alt); }
table.grid tr td { transition: background var(--transition); }
table.grid tr:hover td { background: var(--accent-light); }

/* ---------------------------------------------------------------- Forms */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}
.form-field label { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 125, 209, 0.18);
  background: var(--surface);
}
.form-field.wide { min-width: 220px; }

/* ---------------------------------------------------------------- Buttons */
button.btn, a.btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: background var(--transition), transform 100ms ease, box-shadow var(--transition);
}
button.btn:hover, a.btn:hover { background: var(--navy-dark); box-shadow: var(--shadow-sm); }
button.btn:active, a.btn:active { transform: translateY(1px) scale(0.98); }

button.btn-del {
  background: transparent;
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background var(--transition), transform 100ms ease;
}
button.btn-del:hover { background: var(--danger-bg); }
button.btn-del:active { transform: scale(0.96); }

a.btn-edit {
  background: transparent;
  color: var(--accent);
  border: 1px solid #a9c3e3;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  margin-left: 4px;
  transition: background var(--transition);
}
a.btn-edit:hover { background: var(--accent-light); }
html[data-theme="dark"] a.btn-edit { border-color: #3a5578; }

a.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
a.btn-secondary:hover { background: var(--surface-alt); }

a.btn-export { background: #1e6b2f; }
a.btn-export:hover { background: #164f23; }

/* ---------------------------------------------------------------- Search & toolbar */
.search-box {
  width: 100%;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 14px;
  font-family: inherit;
  background: var(--surface-alt);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 125, 209, 0.18);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------------------------------------------------------- KPI cards */
.kpi-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.kpi {
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  min-width: 190px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  animation: fadeInUp 380ms cubic-bezier(.4,0,.2,1) both;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.kpi { text-decoration: none; color: inherit; cursor: pointer; }
.kpi-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(31, 78, 120, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
html[data-theme="dark"] .kpi-icon { background: rgba(127, 180, 232, 0.16); }
.kpi .value { font-size: 24px; font-weight: 800; color: var(--navy); }
html[data-theme="dark"] .kpi .value { color: #7fb4e8; }
.kpi .label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------------------------------------------------------------- Badges */
.badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; display: inline-block; }
.badge.pending { background: var(--warning-bg); color: var(--warning-text); }
.badge.partial { background: #fff3c4; color: #8a6d00; }
.badge.done { background: var(--success-bg); color: var(--success-text); }
.badge.in { background: var(--success-bg); color: var(--success-text); }
.badge.out { background: var(--danger-bg); color: var(--danger-text); }

/* ---------------------------------------------------------------- Barcode */
.barcode-box {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.barcode-box img { display: block; margin: 0 auto; }
.barcode-box .code-text { font-family: monospace; font-size: 13px; color: var(--text-muted); margin-top: 6px; letter-spacing: 1px; }
.barcode-box .combo-label { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 15px; }

/* ---------------------------------------------------------------- Shipment label (ليبل الشحنة) */
.ship-label {
  width: 380px;
  max-width: 100%;
  background: var(--surface);
  border: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.ship-label .ship-label-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px dashed var(--border); padding-bottom: 10px; margin-bottom: 10px;
}
.ship-label .ship-label-company { font-weight: 800; color: var(--navy); font-size: 16px; }
.ship-label .ship-label-service { font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.ship-label .ship-label-cod {
  background: #fff3c4; color: #8a6d00; border: 1px dashed #8a6d00;
  border-radius: var(--radius-md); padding: 8px 10px; margin: 10px 0; text-align: center;
}
.ship-label .ship-label-cod .amount { font-size: 22px; font-weight: 800; }
.ship-label .ship-label-section { margin-bottom: 10px; }
.ship-label .ship-label-section .lbl { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.ship-label .ship-label-section .val { font-weight: 700; font-size: 14px; }
.ship-label .ship-label-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.ship-label .ship-label-barcode { text-align: center; margin-top: 10px; }
.ship-label .ship-label-barcode img { display: block; margin: 0 auto; }

/* ---------------------------------------------------------------- Waybill (بوليصة الشحن + فاتورة الطلب) A4/Thermal */
.waybill-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.waybill-doc {
  background: var(--surface);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  max-width: var(--print-width, 210mm);
  zoom: var(--print-scale, 1);
  margin: 0 auto;
}
.waybill-doc.size-thermal { max-width: var(--print-width, 100mm); padding: 10px 12px; font-size: 12px; }

.wb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; border-bottom: 2px solid var(--navy); padding-bottom: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wb-brand { display: flex; align-items: center; gap: 10px; }
.wb-brand-badge {
  width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff;
  font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wb-brand-name { font-weight: 800; font-size: 17px; color: var(--navy); }
.wb-brand-sub { font-size: 11px; color: var(--text-muted); }
.wb-head-right { text-align: left; }
.wb-service-badge { display: inline-block; font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 999px; background: var(--accent-light); color: var(--navy); margin-bottom: 6px; }
.wb-tracking { font-size: 13px; color: var(--text-muted); }
.wb-tracking b { font-family: monospace; font-size: 15px; color: var(--navy); letter-spacing: 0.5px; }
.wb-printed-at { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }

.wb-barcode-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.wb-barcode-row .wb-barcode-box { text-align: center; flex: 1 1 auto; min-width: 200px; }
.wb-barcode-row .wb-barcode-box img { display: block; margin: 0 auto; max-width: 100%; }
.wb-barcode-row .wb-barcode-code { font-family: monospace; font-size: 13px; letter-spacing: 1px; margin-top: 4px; color: var(--navy); font-weight: 700; }
.wb-qr-box { text-align: center; flex-shrink: 0; }
.wb-qr-box img { display: block; }
.wb-qr-box .wb-qr-cap { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.wb-cod-box { background: #fff3c4; color: #7a5d00; border: 2px solid #c9a100; border-radius: var(--radius-md); padding: 10px 14px; text-align: center; margin-bottom: 16px; }
.wb-cod-box .wb-cod-label { font-weight: 800; font-size: 13px; }
.wb-cod-box .wb-cod-amount { font-size: 26px; font-weight: 800; margin-top: 2px; }

.wb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.wb-section { margin-bottom: 16px; }
.wb-section-title { font-weight: 800; color: var(--navy); font-size: 13.5px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.wb-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.wb-kv:last-child { border-bottom: none; }
.wb-kv .k { color: var(--text-muted); flex-shrink: 0; }
.wb-kv .v { font-weight: 700; text-align: left; }

table.wb-items { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 12.5px; table-layout: fixed; }
table.wb-items th, table.wb-items td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; word-wrap: break-word; }
table.wb-items thead th { background: var(--navy); color: #fff; font-weight: 700; }
table.wb-items td.wb-item-name { text-align: right; }

table.wb-totals { width: 100%; max-width: 320px; margin-inline-start: auto; border-collapse: collapse; font-size: 12.5px; }
table.wb-totals td { padding: 4px 6px; }
table.wb-totals td:last-child { text-align: left; font-weight: 700; }
table.wb-totals tr.wb-grand td { border-top: 2px solid var(--navy); font-weight: 800; font-size: 14px; color: var(--navy); padding-top: 8px; }

.wb-notes { font-size: 12px; background: var(--accent-light); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 14px; }
.wb-foot { text-align: center; font-size: 10.5px; color: var(--text-muted); margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.wb-cancelled-banner {
  background: var(--danger-bg); color: var(--danger-text); border: 1.5px dashed var(--danger-border);
  border-radius: var(--radius-md); padding: 8px 12px; text-align: center; font-weight: 800; font-size: 12.5px;
  margin-bottom: 14px;
}

/* Thermal (وأي مقاس مخصص ضيق < 180مم): عمود واحد، خطوط أصغر، QR مصغّر بس شغال دايمًا (Fix #9 — لازم يفضل
   مقروء في كل المقاسات، مش مخفي في الحراري زي قبل كده). */
.waybill-doc.size-thermal .wb-grid-2 { grid-template-columns: 1fr; gap: 8px; }
.waybill-doc.size-thermal .wb-qr-box img { width: 55px; height: 55px; }
.waybill-doc.size-thermal .wb-barcode-row { flex-direction: column; align-items: center; }
.waybill-doc.size-thermal .wb-brand-badge { width: 30px; height: 30px; font-size: 15px; }
.waybill-doc.size-thermal .wb-brand-name { font-size: 14px; }
.waybill-doc.size-thermal .wb-section-title { font-size: 12px; }
.waybill-doc.size-thermal .wb-kv, .waybill-doc.size-thermal table.wb-items, .waybill-doc.size-thermal table.wb-totals { font-size: 11px; }
.waybill-doc.size-thermal .wb-cod-box .wb-cod-amount { font-size: 20px; }

@media print {
  .waybill-doc { border-width: 1px; box-shadow: none; max-width: none; width: 100%; }
  .waybill-doc.size-thermal { width: 100mm; }
  .wb-items, .wb-grid-2, .wb-barcode-row { page-break-inside: avoid; }
}

/* ---------------------------------------------------------------- Barcode — طباعة متقدمة (ملصق واحد / Grid) */
.barcode-print-single {
  max-width: var(--print-width, 100mm);
  zoom: var(--print-scale, 1);
  margin: 0 auto;
}
.barcode-print-grid {
  display: grid;
  grid-template-columns: repeat(var(--bp-cols, 4), 1fr);
  gap: 6mm;
  zoom: var(--print-scale, 1);
}
.barcode-print-label {
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}
.barcode-print-single .barcode-print-label {
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 0 auto 10px;
}
.barcode-print-label img { display: block; margin: 6px auto; max-width: 100%; height: auto; }
.bpl-product { font-weight: 800; color: var(--navy); font-size: 14px; }
.bpl-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bpl-sku { font-family: monospace; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.5px; }
.bpl-code { font-family: monospace; font-size: 13px; color: var(--navy); font-weight: 700; letter-spacing: 1px; margin-top: 4px; }

/* "ملصق واحد لكل صفحة": كل ملصق (ما عدا الأخير) بياخد صفحة طباعة مستقلة */
.bp-page-break { page-break-after: always; break-after: page; }

@media print {
  .barcode-print-single, .barcode-print-grid { max-width: none; }
  .barcode-print-label { border-width: 1px; box-shadow: none; }
  .barcode-print-label img { max-width: 100%; }
}

/* ---------------------------------------------------------------- Charts (lightweight, no dependencies) */
.chart-box { margin: 6px 0 10px; }
.chart-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.chart-bar-label {
  flex: 0 0 130px;
  text-align: left;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-bar-track {
  flex: 1;
  background: var(--surface-alt);
  border-radius: 6px;
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.chart-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--navy));
  width: 0;
  transition: width 700ms cubic-bezier(.16,1,.3,1);
}
.chart-bar-fill.negative { background: linear-gradient(90deg, #e8817f, var(--danger-text)); }
.chart-bar-value { flex: 0 0 auto; min-width: 78px; font-weight: 700; color: var(--text); font-size: 12.5px; }

.chart-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }

.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut {
  width: 140px; height: 140px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: conic-gradient(var(--border) 0 100%);
  position: relative;
  transition: background 700ms ease;
}
.donut::after {
  content: "";
  position: absolute; inset: 18px;
  border-radius: 50%;
  background: var(--surface);
}
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; }
.donut-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- Modal (delete confirm) */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 18, 32, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 380px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(0.97);
  transition: transform var(--transition);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal h3 { margin: 0 0 8px; color: var(--text); font-size: 16px; }
.modal p { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-start; }

/* مودال أوسع لاستخدامه كفورم إضافة/تعديل قصير بدل الفورم اللي بياخد عرض الصفحة بالكامل */
.modal.modal-form { max-width: 440px; text-align: right; }
.modal-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-form-head h3 { margin: 0; }
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.modal-close:hover { background: var(--surface-alt); color: var(--text); }
.modal-form .form-field { width: 100%; margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.modal-form .form-field label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.modal-form .form-field input,
.modal-form .form-field select { width: 100%; }

/* ترقيم صفحات الجداول الطويلة */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.table-pagination button { padding: 6px 14px; font-size: 13px; }
.table-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------- Tabs (component بسيط لصفحات التفاصيل ذات التبويبات) */
.tab-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tab-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-button:hover { color: var(--navy); }
.tab-button.active { color: var(--navy); border-bottom-color: var(--accent); }
html[data-theme="dark"] .tab-button { color: var(--text-muted); }
html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .tab-button:hover { color: #7fb4e8; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* رابط تبويب بنفس شكل .tab-button بالظبط، لكن لصفحات/Routes منفصلة فعليًا (تنقل حقيقي بـ <a>) —
   عمدًا كلاس مختلف عن tab-button عشان initTabs() في script.js (اللي بيدور على .tab-buttons)
   ميلقطهاش كمجموعة تبويبات تفاعلية جوه نفس الصفحة ويبوّظ حالة "active" الصحيحة اللي بتتحدد من السيرفر. */
.tab-button-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.tab-button-link:hover { color: var(--navy); }
.tab-button-link.active { color: var(--navy); border-bottom-color: var(--accent); }
html[data-theme="dark"] .tab-button-link { color: var(--text-muted); }
html[data-theme="dark"] .tab-button-link.active,
html[data-theme="dark"] .tab-button-link:hover { color: #7fb4e8; }
.inventory-tabs { margin-bottom: 20px; }

/* ---------------------------------------------------------------- Detail grid (بيانات ثابتة label/value، زي كود SKU أو باركود — عمدًا مش .kpi عشان ميتلقطش بمنطق عدّاد الأرقام animateCounters) */
.detail-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 6px; }
.detail-item {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  min-width: 140px;
  flex: 1;
}
.detail-item .detail-label { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.detail-item .detail-value { font-size: 15px; font-weight: 700; color: var(--navy); }
html[data-theme="dark"] .detail-item .detail-value { color: #7fb4e8; }

/* ---------------------------------------------------------------- شاشة الباركود: مربع مسح كبير في نص الشاشة */
.scan-hero { text-align: center; padding: 30px 20px; }
.scan-hero-icon { color: var(--accent); margin-bottom: 6px; }
.scan-hero-title { margin: 0 0 16px; font-size: 20px; color: var(--navy); }
html[data-theme="dark"] .scan-hero-title { color: #7fb4e8; }
.scan-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0 auto;
}
.scan-input {
  flex: 1;
  min-width: 240px;
  padding: 16px 18px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 1px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.scan-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 125, 209, 0.16);
}
.scan-form .btn { padding: 0 22px; font-size: 15px; }

/* ---------------------------------------------------------------- شاشة المبيعات (POS): عمود رئيسي (مسح + قطع + بيانات فاتورة) + عمود جانبي ثابت للإجمالي */
.pos-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.pos-main { flex: 1 1 560px; min-width: 0; }
.pos-side { flex: 1 1 280px; max-width: 320px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.pos-totals .totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
  color: var(--text-muted);
}
.pos-totals .totals-row span:last-child { font-weight: 700; color: var(--text); }
.pos-totals .totals-row.total {
  border-bottom: none;
  border-top: 2px solid var(--border);
  margin-top: 4px;
  padding-top: 14px;
}
.pos-totals .totals-row.total span:first-child { font-weight: 700; color: var(--text); }
.pos-totals .totals-row.total span:last-child { font-size: 20px; font-weight: 800; color: var(--navy); }
html[data-theme="dark"] .pos-totals .totals-row.total span:last-child { color: #7fb4e8; }
.pos-submit { width: 100%; justify-content: center; margin-top: 16px; font-size: 15px; padding: 13px 20px; }

@media (max-width: 980px) {
  .pos-side { position: static; max-width: none; }
}

/* ---------------------------------------------------------------- حركة القطعة (تايم لاين أفقي من خطوات/Badges) */
.movement-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.movement-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.movement-step .badge { white-space: nowrap; }
.movement-step-meta { font-size: 11.5px; color: var(--text-muted); max-width: 150px; }
.movement-arrow { color: var(--text-muted); flex: 0 0 auto; display: flex; align-items: center; }

/* ---------------------------------------------------------------- Misc */
.empty-state { padding: 34px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ---------------------------------------------------------------- صفحات الخطأ (404/403/500) */
.error-page-wrap { max-width: 480px; margin: 48px auto 0; }
.error-state { padding: 46px 24px; }
.error-state .error-icon { display: inline-flex; color: var(--danger-text); margin-bottom: 4px; }
.error-state .error-code { font-size: 44px; font-weight: 800; color: var(--navy); margin: 6px 0 8px; }
html[data-theme="dark"] .error-state .error-code { color: #7fb4e8; }
.error-state .error-message { color: var(--text-muted); font-size: 14.5px; margin: 0 0 22px; }

/* ---------------------------------------------------------------- حالة التحميل (Loading) */
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
}

/* ---------------------------------------------------------------- شاشة تسجيل الدخول */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 60%, var(--bg) 60%);
  padding: 20px;
}
.login-card { width: 380px; max-width: 92vw; padding: 30px 28px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .form-field { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.login-form .form-field label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.login-form .form-field input { width: 100%; }
.login-submit { width: 100%; justify-content: center; margin-top: 4px; }
.example-tag { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* ---------------------------------------------------------------- شاشة "طلب جديد" — بحث/اختيار عميل */
.customer-search-results { margin-top: 10px; max-height: 320px; overflow-y: auto; }
.customer-result-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.customer-result-card:hover { background: var(--accent-light); border-color: var(--accent); }
.customer-result-name { font-weight: 700; color: var(--text); margin-bottom: 2px; }

.customer-selected-card {
  border: 1px solid var(--success-border);
  background: var(--success-bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 10px;
}
.customer-selected-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#customerSelectedDetails { color: var(--text); font-size: 13.5px; line-height: 1.7; }

.new-customer-fieldset {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.dup-phone-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 13px;
}
.dup-phone-hint .btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.stock-info-box {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt, #f5f7fa);
  border: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.stock-info-box b { color: var(--navy); }
.stock-info-box.low { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

/* ---------------------------------------------------------------- Print */
@media print {
  .sidebar, .sidebar-overlay, header.topbar, .toolbar, .no-print, .toast-container, .modal-overlay { display: none !important; }
  .app-shell, .main-wrap { display: block; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .barcode-box { border: none; box-shadow: none; }
  .card { box-shadow: none; animation: none; }
  .ship-label { width: 100mm; border-width: 1.5px; box-shadow: none; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 980px) {
  .sidebar {
    position: fixed;
    right: 0;
    transform: translateX(100%);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.sidebar-mobile-open .sidebar { transform: translateX(0); }
  .app-shell.sidebar-mobile-open .sidebar-overlay { display: block; opacity: 1; }
  .app-shell.sidebar-collapsed .sidebar { width: var(--sidebar-w); flex-basis: var(--sidebar-w); }
  .app-shell.sidebar-collapsed .brand-text,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-group-title,
  .app-shell.sidebar-collapsed .nav-group-label,
  .app-shell.sidebar-collapsed .nav-group-chevron,
  .app-shell.sidebar-collapsed .theme-label { opacity: 1; width: auto; display: block; }
  .app-shell.sidebar-collapsed .nav-group-items { max-height: 0; }
  .app-shell.sidebar-collapsed .nav-group.open .nav-group-items,
  .app-shell.sidebar-collapsed .nav-group.has-active .nav-group-items { max-height: 800px; }
  .app-shell.sidebar-collapsed .nav-group-toggle { cursor: pointer; pointer-events: auto; }
  main { padding: 16px 14px 50px; }
  header.topbar { padding: 0 14px; }
  .topbar-subtitle { display: none; }
  .donut-wrap { justify-content: center; }
}

/* شاشات موبايل ضيقة جدًا: الهيدر يفضل مقروء من غير Overflow أفقي — نخفي العناصر الأقل أهمية بس */
@media (max-width: 480px) {
  header.topbar { gap: 8px; padding: 0 10px; }
  .topbar-title h1 { font-size: 15px; }
  a.sidebar-toggle[href*="export"] { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar-user-role { display: none; }
  .topbar-user span:not(.topbar-user-icon) { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-user form .btn { padding: 8px 10px; font-size: 12px; }
}