/* =====================================================================
   نظام إدارة الصيدلية — نظام تصميم أصلي
   لوحة الألوان: أخضر طبي عميق + نعناعي + خلفية باردة فاتحة
   الخط: Tajawal للنصوص، IBM Plex Mono للأرقام (أسعار / فواتير)
===================================================================== */

:root {
  --ink:        #0E2B2A;
  --teal-900:   #0F4C4A;
  --teal-700:   #146B66;
  --teal-500:   #1C8C82;
  --mint-400:   #4FB8A8;
  --mint-100:   #E3F5F1;
  --bg:         #F5F7F6;
  --surface:    #FFFFFF;
  --border:     #DFE7E5;
  --muted:      #6B8481;
  --amber:      #C98A2E;
  --amber-bg:   #FBF1DF;
  --coral:      #C24B4B;
  --coral-bg:   #FBEAEA;
  --blue:       #2E6FC9;
  --blue-bg:    #E7F0FC;
  --green:      #2E9E5B;
  --green-bg:   #E7F7ED;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --shadow:     0 8px 24px -12px rgba(14, 43, 42, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--app-font, 'Tajawal'), sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}

.mono { font-family: 'IBM Plex Mono', monospace; }
.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------------- شاشة الدخول ---------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,184,168,0.25), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(20,107,102,0.35), transparent 45%),
    var(--teal-900);
}

.login-card {
  width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}

.login-brand { text-align: center; margin-bottom: 28px; }
.brand-mark {
  width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(145deg, var(--teal-500), var(--teal-900));
  color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.brand-mark.small { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }

.login-brand h1 { margin: 0; font-size: 22px; font-weight: 900; color: var(--teal-900); }
.login-brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

#loginForm label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
#loginForm input {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); font-size: 14px; outline: none;
  transition: border-color .15s;
}
#loginForm input:focus { border-color: var(--teal-500); }
#loginForm button {
  width: 100%; margin-top: 22px; padding: 12px; border: none; border-radius: var(--radius-sm);
  background: var(--teal-700); color: #fff; font-weight: 700; font-size: 15px;
  transition: background .15s;
}
#loginForm button:hover { background: var(--teal-900); }
.form-error { color: var(--coral); font-size: 13px; min-height: 16px; margin-top: 8px; }

/* ---------------- هيكل التطبيق ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; background: var(--teal-900); color: #fff;
  display: flex; flex-direction: column; padding: 20px 0; flex-shrink: 0;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; padding: 0 20px 22px;
  font-weight: 900; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 14px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  color: rgba(255,255,255,0.72); text-decoration: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; transition: all .15s;
}
.nav-link i { width: 18px; text-align: center; }
.nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-link.active { background: var(--mint-400); color: var(--teal-900); font-weight: 700; }

.sidebar-footer {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 0;
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 14px;
}
.user-chip { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--mint-400);
  color: var(--teal-900); font-weight: 900; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.55); }
#logoutBtn {
  background: none; border: none; color: rgba(255,255,255,0.6); font-size: 15px;
  padding: 8px; border-radius: var(--radius-sm);
}
#logoutBtn:hover { color: #fff; background: rgba(255,255,255,0.08); }

.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 30px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar h2 { margin: 0; font-size: 19px; font-weight: 900; }
.topbar-clock { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: 13px; }

.view-container { padding: 26px 30px; overflow-y: auto; }
/* نقطة البيع بس: مساحة أعلى الشاشة أقل عشان تفضي مساحة أكتر لجدول سلة
   البيع تحت — باقي الشاشات مش متأثرة خالص */
.view-pos { padding-top: 10px; }

/* ---------------- عناصر مشتركة ---------------- */
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 2fr 1fr; }

.stat-card {
  background: var(--surface); border-radius: var(--radius-md); padding: 20px;
  border: 1px solid var(--border); position: relative; overflow: hidden;
}
.stat-card .stat-icon {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--mint-100); color: var(--teal-700); font-size: 17px; margin-bottom: 12px;
}
.stat-card .stat-label { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.stat-card .stat-value { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 700; }

.panel {
  background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border);
  padding: 20px;
}
.panel-title {
  font-size: 15px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
}
.panel-title i { color: var(--teal-500); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: right; padding: 10px 12px; color: var(--muted); font-weight: 700;
  font-size: 12px; border-bottom: 2px solid var(--border);
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
tfoot td { padding: 11px 12px; border-top: 2px solid var(--border); }
tbody tr:hover { background: var(--mint-100); }
.num { font-family: 'IBM Plex Mono', monospace; }

/* جدول مضغوط (أعمدة كتير في مساحة محدودة، زي المبيعات بالصنف في نقطة البيع)
   — عشان كل الأعمدة تبان مرة واحدة من غير سكرول أفقي على الشاشات العادية.
   العناوين والقيم النصية (اسم الصنف) تفضل قابلة للف عشان الأعمدة تضيق،
   والأرقام (.num) تفضل سطر واحد عشان تبقى مقروءة */
.table-dense th { padding: 6px 7px; font-size: 11px; }
.table-dense td { padding: 6px 7px; font-size: 12px; }
.table-dense td.num { white-space: nowrap; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.badge-ok    { background: var(--mint-100); color: var(--teal-700); }
.badge-warn  { background: var(--amber-bg); color: var(--amber); }
.badge-danger{ background: var(--coral-bg); color: var(--coral); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: none;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 13.5px; transition: all .15s;
}
.btn-primary { background: var(--teal-700); color: #fff; }
.btn-primary:hover { background: var(--teal-900); }
.btn-ghost { background: var(--mint-100); color: var(--teal-700); }
.btn-ghost:hover { background: #d3ede7; }
.btn-danger { background: var(--coral-bg); color: var(--coral); }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }

/* ---------------- أيقونات ملوّنة (شارات) — لأزرار أدوات الشاشات (زي شاشة المخزون) ---------------- */
.icon-badge {
  width: 42px; height: 42px; padding: 0; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; gap: 0; flex-shrink: 0;
}
.icon-badge:hover { transform: translateY(-1px); filter: brightness(0.96); }
.icon-badge-blue  { background: var(--blue-bg);  color: var(--blue); }
.icon-badge-amber { background: var(--amber-bg); color: var(--amber); }
.icon-badge-coral { background: var(--coral-bg); color: var(--coral); }
.icon-badge-green { background: var(--green-bg); color: var(--green); }
.icon-badge-teal  { background: var(--mint-100);  color: var(--teal-700); }
/* نسخة أصغر — لأزرار الإجراءات داخل صفوف الجداول (زي صفوف شاشة المخزون) */
.icon-badge-sm { width: 32px; height: 32px; font-size: 13px; border-radius: var(--radius-sm); }
.search-input {
  flex: 1; min-width: 220px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); font-size: 13.5px; outline: none;
}
.search-input:focus { border-color: var(--teal-500); }

/* ---------------- نقطة البيع ---------------- */
.pos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.pos-product-grid {
  /* عرض كل كرت وحجم اسم الصنف قابلين للتحكّم من الإعدادات (نقطة البيع) عن
     طريق متغيّرات CSS دي — القيم هنا افتراضات معقولة لو لسه محدّش غيّرها،
     وبتتطبّق تلقائيًا من الإعدادات المحفوظة عند فتح شاشة نقطة البيع */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pos-card-min-width, 165px), 1fr)); gap: 12px;
  max-height: 60vh; overflow-y: auto; padding: 4px;
}
.pos-product-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 12px; cursor: pointer; transition: all .12s; text-align: right;
}
.pos-product-card:hover { border-color: var(--mint-400); box-shadow: var(--shadow); }
.pos-product-card .p-name { font-weight: 700; font-size: var(--pos-name-font-size, 14px); margin-bottom: 6px; min-height: 38px; }
.pos-product-card .p-price { font-family: 'IBM Plex Mono', monospace; color: var(--teal-700); font-weight: 700; }
.pos-product-card .p-stock { font-size: 11px; color: var(--muted); margin-top: 4px; }
.pos-product-card .p-code,
.pos-product-card .p-category,
.pos-product-card .p-expiry { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pos-product-disabled { opacity: 0.5; cursor: not-allowed; }

/* حقول الكمية/السعر/الخصم في سلة نقطة البيع — صندوق واضح لكل حقل، كلهم بنفس
   المقاس الموحّد (زي حقل الكمية بالظبط) — المقاس ده قابل للتحكّم من
   الإعدادات (نقطة البيع) */
.pos-cell-icon {
  display: flex; align-items: center; justify-content: center;
  background: #f6f8f9; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 3px 8px; min-width: var(--pos-cart-field-width, 74px);
}
.pos-cell-icon input, .pos-cell-icon select {
  border: none; background: none; padding: 3px 2px; width: 100%;
  text-align: center; font-weight: 600; color: var(--ink, #1a1a1a);
}
/* حجم خط أرقام الكمية/سعر البيع/الخصم %/الخصم قيمة في جدول السلة — قابل
   للتحكّم من الإعدادات (نقطة البيع)؛ عنصر الوحدة (select) بيفضل بحجمه التقريبي */
.pos-cell-icon input { font-size: var(--pos-cart-numbers-font-size, 14px); }
.pos-cell-icon select { font-size: 13px; }
.pos-cell-icon input:focus, .pos-cell-icon select:focus { outline: none; }
.pos-cell-icon:focus-within { border-color: var(--teal-600, #0f9d8c); background: #fff; }
/* حجم خط اسم الصنف في جدول السلة قابل للتحكّم من الإعدادات (نقطة البيع) */
#posCartTable td.pos-name-cell { min-width: 170px; font-size: var(--pos-cart-name-font-size, 14.5px); font-weight: 700; }

/* تلوين أرقام السلة عشان تبان بسرعة: المخزون أخضر، الكمية المُباعة أحمر
   غامق، سعر البيع أزرق — حسب طلب العميل */
#posCartTable td.pos-stock-num { color: #2E9E5B; font-weight: 700; }
#posCartTable .pos-qty-input { color: #7A1212 !important; }
#posCartTable .pos-price-input { color: #2E6FC9 !important; }
/* تقليل بسيط لارتفاع هيدر جدول سلة نقطة البيع بس (باقي الجداول في النظام
   مش متأثرة) — عشان تفضي مساحة أكتر شوية لصفوف السلة نفسها */
#posCartTable thead th { padding: 6px 12px; }


.cart-panel { position: sticky; top: 0; }
.cart-line { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cart-line .c-name { flex: 1; font-size: 13px; font-weight: 600; }
.cart-line .c-qty { width: 48px; text-align: center; border: 1px solid var(--border); border-radius: 6px; padding: 4px; }
.cart-line .c-total { font-family: 'IBM Plex Mono', monospace; font-size: 13px; width: 68px; text-align: left; }
.cart-line .c-remove { color: var(--coral); background: none; border: none; font-size: 13px; }

.cart-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; color: var(--muted); }
.cart-summary-row.total { font-size: 19px; font-weight: 900; color: var(--ink); border-top: 2px solid var(--border); margin-top: 8px; padding-top: 12px; }
.cart-summary-row .num { font-family: 'IBM Plex Mono', monospace; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(14,43,42,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg); padding: 26px;
  width: 420px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
}
.modal-box h3 { margin: 0 0 18px; font-size: 17px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.field input, .field select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  font-size: 13.5px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--teal-500); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; justify-content: center; }

/* زر إغلاق (X) ثابت عند ركن كل نافذة منبثقة — بيتحقن تلقائيًا (app.js)،
   position:fixed عشان يفضل ظاهر حتى لو محتوى الصندوق طويل ومحتاج تمرير */
.modal-close-btn {
  position: fixed;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--muted); font-size: 15px; cursor: pointer; padding: 0;
  box-shadow: 0 3px 10px rgba(14,43,42,0.18);
  z-index: 110;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-close-btn:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--coral); }

.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state i { font-size: 30px; margin-bottom: 10px; display: block; }

/* إخفاء أسهم الزيادة/النقصان الافتراضية من المتصفح في كل حقول الأرقام —
   الكتابة تبقى مباشرة يدويًا بس، بدون أي أسهم مساعدة */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* صف واحد لكل حقول سطر الصنف في أوامر/فواتير/مرتجعات الشراء — حقول أصغر
   شوية عشان تتسع كلها جنب بعض من غير ما تنزل لسطر تاني */
.purch-line-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
}
.purch-line-row .field {
  min-width: 84px;
  flex: 1 1 84px;
}
.purch-line-row .field label {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.purch-line-row .field input {
  padding: 7px 6px;
  font-size: 12.5px;
}

/* نقطة البيع — القائمة المنسدلة، شريط الإجمالي أسفل الصفحة، والمجموع الكلي الكبير */
.pos-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 14px; background: none; border: none; text-align: right;
  font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.pos-menu-item:last-child { border-bottom: none; }
.pos-menu-item:hover { background: var(--mint-100); }

.pos-bottom-bar { position: sticky; bottom: 0; z-index: 10; }
.pos-bottom-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.pos-bottom-stats > div {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted);
}
.pos-bottom-stats > div b {
  font-size: 16px; color: var(--ink); font-family: 'IBM Plex Mono', monospace;
}
.pos-grand-total {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--mint-100); border-radius: 10px; padding: 14px 20px;
}
.pos-grand-total span:first-child { font-size: 15px; font-weight: 700; color: var(--teal-700); }
.pos-grand-total span:last-child {
  font-size: 30px; font-weight: 900; color: var(--teal-700); font-family: 'IBM Plex Mono', monospace;
}

@media (max-width: 900px) {
  .pos-layout { grid-template-columns: 1fr; }
  .pos-bottom-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .sidebar span, .sidebar-footer .user-chip div { display: none; }
  .sidebar { width: 64px; }
  .sidebar-brand span { display: none; }
}

/* إخفاء/إظهار القائمة الجانبية — بيوفّر مساحة إضافية (مفيد في نقطة البيع) */
.sidebar.sidebar-hidden {
  width: 0; min-width: 0; padding: 0; border: none; overflow: hidden;
}