/* ARSRI Store – variable-free CSS (RTL, high contrast) */

/* Root container */
.arsri-store{
  direction: rtl;
  font-family: 'Tajawal', system-ui, Segoe UI, Arial, sans-serif;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* Ensure [hidden] actually hides in all themes */
.arsri-store [hidden]{ display:none !important; }

/* ---------------- Tabs ---------------- */
.arsri-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }

.arsri-tabs button{
  border:1px solid #cbd5e1;   /* light gray border */
  background:#e2e8f0;         /* soft gray (better than white) */
  color:#0f172a;               /* dark text */
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.arsri-tabs button:hover{ background:#cbd5e1; }

.arsri-tabs button.active{
  background:#2563eb;   /* primary */
  color:#fff;
  border-color:#2563eb;
}

/* --------------- Grid ----------------- */
.arsri-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* One column on small screens */
@media screen and (max-width: 900px){
  .arsri-grid{ grid-template-columns:1fr; }
}

/* --------------- Cards ---------------- */
.arsri-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.arsri-card h3{ margin:0 0 10px 0; color:#0f172a; font-size:16px; }

/* ------------- Form rows -------------- */
.arsri-row{ display:flex; gap:8px; align-items:center; }
.arsri-row label{ font-size:12px; color:#334155; min-width:88px; }
.arsri-row input,
.arsri-row select{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  width:100%;
  background:#fff;
  min-height:38px;
}
input[type=number]{ text-align:left; direction:ltr; }

/* Focus states for inputs and buttons (accessibility) */
.arsri-store input:focus,
.arsri-store select:focus,
.arsri-store button:focus,
.arsri-store button:focus-visible{
  outline:2px solid #93c5fd;   /* light blue */
  outline-offset:2px;
  box-shadow:none;
}

/* ---------- Action area & Buttons ---------- */
.arsri-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* Non-tab buttons: higher contrast by default */
.arsri-store .btn,
.arsri-store .arsri-actions .btn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#e2e8f0;     /* soft gray (not white) */
  color:#0f172a;          /* dark text */
  cursor:pointer;
  box-shadow:none;
}

.arsri-store .btn:hover,
.arsri-store .arsri-actions .btn:hover{
  background:#cbd5e1;     /* a bit darker on hover */
}

/* Variants */
.arsri-store .btn-primary{
  background:#2563eb; color:#fff; border-color:#2563eb;
}
.arsri-store .btn-primary:hover{
  filter:brightness(0.95);
}
.arsri-store .btn-ok{
  background:#059669; color:#fff; border-color:#059669;
}
.arsri-store .btn-ok:hover{
  filter:brightness(0.95);
}
.arsri-store .btn-bad{
  background:#dc2626; color:#fff; border-color:#dc2626;
}
.arsri-store .btn-bad:hover{
  filter:brightness(0.95);
}

/* Smaller action buttons inside tables */
.arsri-store table .btn{ padding:6px 10px; font-size:12px; }

/* Disabled look (if applied dynamically) */
.arsri-store .btn[disabled],
.arsri-store .btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

/* ---------------- Tables ---------------- */
.arsri-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.arsri-table th,
.arsri-table td{
  border-bottom:1px solid #eee;
  padding:8px 10px;
  text-align:right;
  vertical-align:middle;
  background:#fff;
}
.arsri-table th{
  background:#f8fafc;
  color:#0f172a;
  position:relative;
}

/* Optional sticky header if table is inside a scroll wrapper */
.arsri-scroll{ overflow:auto; max-height:460px; }
.arsri-scroll .arsri-table thead th{ position:sticky; top:0; z-index:1; }

/* --------------- Stats / badges --------------- */
.stat{
  display:flex;
  justify-content:space-between;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:10px;
  margin-bottom:8px;
  background:#fff;
}
.stat .v{ font-weight:700; }
.muted{ color:#64748b; }
.pill{
  background:#eef2ff;
  color:#1e293b;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
}
.danger{ color:#dc2626; }
.success{ color:#059669; }

/* --------------- Utilities --------------- */
.mb8{ margin-bottom:8px; }
.mt8{ margin-top:8px; }
.mt12{ margin-top:12px; }

/* جدول العملاء */
#tblCustomers {
  table-layout: auto;       /* يخلي العرض يتوزع حسب المحتوى */
  width: 100%;              /* الجدول يأخذ كل المساحة المتاحة */
  border-collapse: collapse;
}

#tblCustomers th,
#tblCustomers td {
  white-space: normal;      /* يسمح بلفّ النص داخل العمود */
  word-wrap: break-word;    /* يكسر الكلمة الطويلة */
  max-width: 200px;         /* حد أقصى لعرض العمود (عدّل الرقم كما تحب) */
  padding: 6px 8px;
  text-align: right;        /* عشان RTL */
}

/* حاوية سكرول أفقي للجدول */
.arsri-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;           /* يظهر مؤشر السحب */
  -webkit-overflow-scrolling: touch; /* سلاسة على الموبايل */
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* الجدول نفسه */
#tblCustomers {
  width: max-content;     /* يتمدّد بقدر المحتوى */
  table-layout: auto;     /* يسيب الأعمدة تتسع حسب المحتوى */
  border-collapse: collapse;
  direction: rtl;         /* لأن الواجهة RTL */
}

/* خلايا الجدول: سطر واحد بدون كسر كلمات */
#tblCustomers th,
#tblCustomers td {
  white-space: nowrap;    /* ممنوع لف النص */
  word-break: normal;     /* لا تكسر الكلمة */
  overflow: visible;      /* خليه يظهر بالكامل داخل الجدول */
  padding: 8px 10px;
  text-align: right;
}

.arsri-scroll { overflow: auto; }           /* تمكين سكرول أفقي/رأسي */
.arsri-table .nowrap { white-space: nowrap; }/* منع تكسير أزرار الإجراءات */

/* اجعل الجدول ثابت العرض ويكسر الأسطر بشكل طبيعي */
#tblSales {
  table-layout: fixed;
  width: 100%;
}

#tblSales th,
#tblSales td {
  white-space: normal !important;   /* إلغاء أي nowrap */
  word-break: normal;               /* إلغاء break-all إن وُجد */
  overflow-wrap: anywhere;          /* يكسر النص الطويل جداً (بدون مسافات) بدل ما يطلع برة */
  /* direction: rtl;  /* عادة عندك RTL بالفعل، فعّلها لو لزم */
  text-align: right;
}

/* خلايا الإجراءات: خلّي الأزرار تلتف داخل الخلية بدل ما تطلع برة */
#tblSales td.actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal !important;
}

#tblSales td.actions-cell .btn {
  display: inline-flex;
}

/* (اختياري) عرض منطقي لبعض الأعمدة لتفادي ضيق شديد */
#tblSales td:nth-child(1) { width: 84px; }   /* رقم الفاتورة */
#tblSales td:nth-child(2) { width: 120px; }  /* التاريخ */
#tblSales td:nth-child(5) { width: 110px; }  /* الإجمالي */
#tblSales td.nowrap { 
  white-space: normal !important; 
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* أوامر الشراء: عرض أنيق والتفاف كلمات */
#tblPOItems, #tblPOs { table-layout: fixed; width:100%; }
#tblPOItems th, #tblPOItems td,
#tblPOs th, #tblPOs td {
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  text-align: right;
}
#tblPOItems td.actions-cell, #tblPOs td.actions-cell {
  display:flex; flex-wrap:wrap; gap:6px;
}

/* اجعل كرت "آخر أوامر الشراء" بعرض الشبكة كامل */
[data-pane="purchases"] .arsri-grid > .arsri-card:last-child {
  grid-column: 1 / -1; /* يمدّه على العمودين */
}

/* عالج ارتفاع الجدول ليملأ الشاشة تقريبًا (تجاوز الـ inline style) */
[data-pane="purchases"] .arsri-grid > .arsri-card:last-child .arsri-scroll {
  max-height: calc(100vh - 260px) !important; /* عدّل 260 حسب ارتفاع العناوين/الأزرار عندك */
}

/* مدّ كارت "أصناف أمر الشراء" على عرض الشبكة كامل */
[data-pane="purchases"] .arsri-grid > .arsri-card:nth-of-type(2) {
  grid-column: 1 / -1;               /* من العمود الأول للأخير */
  min-height: calc(100vh - 260px);   /* اضبط 260px حسب ارتفاع الهيدر/الأزرار فوق */
  display: flex;
  flex-direction: column;
}

/* خلي حاوية الجدول تتمدّ وتاخذ المساحة الباقية داخل الكارت */
[data-pane="purchases"] .arsri-grid > .arsri-card:nth-of-type(2) .mt12 {
  flex: 1;
  overflow: auto;        /* تمرير عمودي وأفقي عند الحاجة */
}

/* لو ودّك تحافظ على السحب الأفقي الموجود مسبقاً */
[data-pane="purchases"] .arsri-grid > .arsri-card:nth-of-type(2) .mt12.arsri-scroll-x {
  overflow-x: auto;
  overflow-y: auto;
}