/* Base theme and layout enhancements extracted from your GAS UI (condensed) */
:root{
  --bg:#0b1020; --panel:#0e162b; --text:#e5e7eb; --muted:#94a3b8; --primary:#22c55e; --primary-2:#14b8a6;
  --border:#0d1b2f; --panel2:rgba(9,16,32,.55);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);}
.card{border:1px solid var(--border);background:var(--panel2);padding:18px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #134268;background:#0e203d;color:#a7f3d0;border-radius:10px;cursor:pointer}
.btn.primary{background:rgba(20,75,200,.12);border-color:#153e7b}
.btn.danger{background:#7f1d1d;border-color:#991b1b;color:#fecaca}
.btn.danger:hover{filter:brightness(1.05)}
.muted{color:var(--muted)}
nav a.active{background:rgba(34,197,94,.12);border-color:#115e3b;color:#c7f9cc}
/* Ripple effect */
.ripple{position:relative;overflow:hidden}
.ripple::after{content:"";position:absolute;border-radius:50%;transform:scale(0);opacity:.4;background:#fff;inset:0;width:0;height:0;}
.ripple.animate::after{animation:ripple .6s linear}
@keyframes ripple{to{transform:scale(8);opacity:0}}
/* Loader/overlay */
#loader-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:999}
#loader-overlay .loader{width:44px;height:44px;border-radius:50%;border:4px solid #1f2b45;border-top-color:#22c55e;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Universal horizontal scroll wrapper for wide tables (mobile-first) --- */
.table-h-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable both-edges;border:1px solid var(--border);border-radius:12px;background:var(--table-bg);}
.table-panel .table-h-scroll{border:0;border-radius:12px}
.table-h-scroll > table{min-width:920px;border:0;background:var(--table-bg)}
/* subtle edge fade to hint scrollability */
.table-h-scroll::before,.table-h-scroll::after{content:"";position:sticky;top:0;bottom:0;width:18px;pointer-events:none;z-index:2}
/* RTL: left/right are inverted visually; we use inline start/end */
.table-h-scroll::before{inset-inline-start:0;background:linear-gradient(to left, transparent, color-mix(in oklab, var(--bg) 50%, transparent))}
.table-h-scroll::after{inset-inline-end:0;background:linear-gradient(to right, transparent, color-mix(in oklab, var(--bg) 50%, transparent))}
.table-h-scroll.is-left::before{opacity:1}
.table-h-scroll.is-right::after{opacity:1}

/* Compact table sizing on small screens */
@media (max-width: 820px){
  .table-panel{padding:0}
  .table-panel th,.table-panel td{padding:8px;font-size:13px}
  .dropdown .trigger,.pager .page-btn,.btn{padding:8px 10px}
  .toolbar{gap:10px;padding:10px}
  .toolbar .filters{gap:8px}
}

/* Toolbar and table panel for Sales */
.toolbar{display:flex;justify-content:space-between;align-items:end;gap:14px;padding:12px;border:1px solid var(--border);border-radius:12px;margin:10px 0;background:#0a1326}
.toolbar .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.toolbar .field{display:flex;flex-direction:column;gap:6px}
.toolbar input,.toolbar select{padding:8px 10px;border-radius:8px;border:1px solid #0d1b2f;background:#0c162c;color:#cbd5e1}
.table-panel{margin-top:12px;border:1px solid var(--border);background:#101a34;border-radius:12px;padding:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.table-panel table{width:100%;border-collapse:collapse;background:#0f1932}
.table-panel th{background:#122142;color:#dbeafe}
.table-panel th,.table-panel td{padding:10px;border-bottom:1px solid #0d1b2f;text-align:right}
/* make the header strip look balanced and clipped to rounded panel */
html[data-theme] .table-panel thead th{padding:12px 10px;line-height:1.4;vertical-align:middle;text-decoration:none}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:4vh 12px}
.modal{width:min(720px,96vw);max-height:92vh;overflow:auto;background:#0b142a;border:1px solid #143055;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #143055}
.modal-header h3{margin:0;color:#c7f9cc}
.modal-header .close{background:transparent;color:#cbd5e1;border:0;font-size:22px;cursor:pointer}
.modal form{padding:14px}
.modal .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.modal .field{display:flex;flex-direction:column;gap:6px}
.modal input,.modal select{padding:10px;border-radius:8px;border:1px solid #143055;background:#0c162c;color:#cbd5e1}
.modal .total-box{padding:10px 12px;border-radius:8px;border:1px dashed #134268;background:#0b1020;color:#a7f3d0;min-width:120px}
.modal-actions{display:flex;justify-content:flex-start;gap:10px;margin-top:6px}

/* --- Collapsible filters (details/summary) --- */
details.filters-collapsible{border:1px solid var(--border);border-radius:10px;background:var(--toolbar-bg)}
details.filters-collapsible > summary{list-style:none;padding:8px 12px;cursor:pointer;color:var(--text);font-weight:600;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
details.filters-collapsible > summary::-webkit-details-marker{display:none}
details.filters-collapsible > summary::after{content:'▾'; opacity:.85; transition:transform .2s ease}
details.filters-collapsible[open] > summary::after{transform:rotate(180deg)}
details.filters-collapsible[open]{background:var(--panel)}
details.filters-collapsible .filters{padding:10px 12px;border-top:1px solid var(--border)}

/* Pin the filters summary button to the left so it stays left on open/close */
.toolbar details.filters-collapsible{ text-align:left; }
.toolbar details.filters-collapsible > summary{ float:left; }
.toolbar details.filters-collapsible .filters{ clear:both; }

/* Pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px}
.pager .page-btn{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--toolbar-bg);color:var(--text);cursor:pointer}
.pager .page-btn:hover{filter:brightness(1.05)}
.pager .page-btn[disabled]{opacity:.5;cursor:not-allowed}
.pager .page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Actions dropdown */
.dropdown{position:relative;display:inline-block}
.dropdown .trigger{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--toolbar-bg);color:var(--text);cursor:pointer}
.dropdown .menu{display:none;position:absolute;inset-inline-end:0;top:100%;min-width:140px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.2);z-index:10001;margin-top:6px}
.dropdown .menu button{display:block;width:100%;text-align:right;padding:8px 10px;border:0;background:transparent;color:var(--text);cursor:pointer}
.dropdown .menu button:hover{background:var(--toolbar-bg)}
.dropdown:hover .menu{display:block}
/* allow JS toggle on mobile/touch */
.dropdown.open .menu{display:block}
/* open upward when near bottom */
.dropdown.dropup .menu{top:auto;bottom:100%;margin-top:0;margin-bottom:6px}
.dropdown .danger{color:#fecaca}

/* --- Sales (and similar tables): mobile-focused columns --- */
@media (max-width: 800px){
  /* Default utility: any cell/column with this class is hidden on small screens */
  .col-hidden-mobile{ display:none !important }
  /* أخفِ كل الأعمدة غير المهمة للجوال */
  .sales-data th:nth-child(1), .sales-data td:nth-child(1), /* تحديد */
  .sales-data th:nth-child(2), .sales-data td:nth-child(2), /* # */
  .sales-data th:nth-child(4), .sales-data td:nth-child(4), /* رقم الفاتورة */
  .sales-data th:nth-child(7), .sales-data td:nth-child(7), /* الموظف */
  .sales-data th:nth-child(8), .sales-data td:nth-child(8), /* نوع الدفع */
  .sales-data th:nth-child(9), .sales-data td:nth-child(9), /* الكمية */
  .sales-data th:nth-child(10), .sales-data td:nth-child(10), /* سعر الوحدة */
  .sales-data th:nth-child(12), .sales-data td:nth-child(12), /* المدفوع */
  .sales-data th:nth-child(13), .sales-data td:nth-child(13), /* المستحق */
  .sales-data th:nth-child(14), .sales-data td:nth-child(14), /* حالة الدين */
  .sales-data th:nth-child(15), .sales-data td:nth-child(15) /* خصم عمولة */
  { display:none; }
  /* اجعل الخلايا المتبقية أكثر إحكاماً */
  .sales-data th, .sales-data td{ padding:8px 10px; font-size:13px }

  /* Purchases: keep التاريخ(3) الصنف(5) الإجمالي(8) المورد(9) والإجراءات(12) */
  .purchases-data th:nth-child(1), .purchases-data td:nth-child(1), /* تحديد */
  .purchases-data th:nth-child(2), .purchases-data td:nth-child(2), /* # */
  .purchases-data th:nth-child(4), .purchases-data td:nth-child(4), /* الفئة */
  .purchases-data th:nth-child(6), .purchases-data td:nth-child(6), /* الكمية */
  .purchases-data th:nth-child(7), .purchases-data td:nth-child(7), /* سعر الوحدة */
  .purchases-data th:nth-child(10), .purchases-data td:nth-child(10), /* الفاتورة */
  .purchases-data th:nth-child(11), .purchases-data td:nth-child(11) /* ملاحظة */
  { display:none; }
  .purchases-data th, .purchases-data td{ padding:8px 10px; font-size:13px }

  /* Expenses: keep التاريخ(3) الصنف(4) المبلغ(5) والإجراءات(7) */
  .expenses-data th:nth-child(1), .expenses-data td:nth-child(1), /* تحديد */
  .expenses-data th:nth-child(2), .expenses-data td:nth-child(2), /* # */
  .expenses-data th:nth-child(6), .expenses-data td:nth-child(6) /* الوصف */
  { display:none; }
  .expenses-data th, .expenses-data td{ padding:8px 10px; font-size:13px }

  /* Returns: keep التاريخ(3) الفئة(4) الإجمالي(7) والإجراءات(8) */
  .returns-data th:nth-child(1), .returns-data td:nth-child(1), /* تحديد */
  .returns-data th:nth-child(2), .returns-data td:nth-child(2), /* # */
  .returns-data th:nth-child(5), .returns-data td:nth-child(5), /* الكمية */
  .returns-data th:nth-child(6), .returns-data td:nth-child(6) /* سعر الوحدة */
  { display:none; }
  .returns-data th, .returns-data td{ padding:8px 10px; font-size:13px }

  /* Damaged/Loss (frontend/damaged-goods.php): show التاريخ(3) الفئة(4) الكمية(5) والإجراءات(7) فقط */
  .damaged-data th:nth-child(1), .damaged-data td:nth-child(1), /* تحديد */
  .damaged-data th:nth-child(2), .damaged-data td:nth-child(2), /* # */
  .damaged-data th:nth-child(6), .damaged-data td:nth-child(6) /* ملاحظة */
  { display:none; }
  .damaged-data th, .damaged-data td{ padding:8px 10px; font-size:13px }

  /* POS Orders: keep الوقت(3) النقطة(4) الإجمالي(6) الحالة(9) والإجراءات(10) */
  .posorders-data th:nth-child(1), .posorders-data td:nth-child(1), /* تحديد */
  .posorders-data th:nth-child(2), .posorders-data td:nth-child(2), /* # */
  .posorders-data th:nth-child(5), .posorders-data td:nth-child(5), /* العناصر */
  .posorders-data th:nth-child(7), .posorders-data td:nth-child(7), /* الدفع */
  .posorders-data th:nth-child(8), .posorders-data td:nth-child(8) /* المقدم */
  { display:none; }
  .posorders-data th, .posorders-data td{ padding:8px 10px; font-size:13px }

  /* POS Devices (frontend/pos.php): show الاسم(2) الهاتف(6) الحالة(10) والإجراءات(11) فقط */
  .posdevices-data th:nth-child(1), .posdevices-data td:nth-child(1), /* # */
  .posdevices-data th:nth-child(3), .posdevices-data td:nth-child(3), /* الرمز */
  .posdevices-data th:nth-child(4), .posdevices-data td:nth-child(4), /* الموقع */
  .posdevices-data th:nth-child(5), .posdevices-data td:nth-child(5), /* مسؤول */
  .posdevices-data th:nth-child(7), .posdevices-data td:nth-child(7), /* الرصيد (نقاط) */
  .posdevices-data th:nth-child(8), .posdevices-data td:nth-child(8), /* رصيد الربح */
  .posdevices-data th:nth-child(9), .posdevices-data td:nth-child(9) /* حساب الدخول */
  { display:none; }
  .posdevices-data th, .posdevices-data td{ padding:8px 10px; font-size:13px }

  /* Card Types (frontend/card-types.php): show الاسم(4) السعر(5) افتتاحي يومي(7) والإجراءات(9) فقط */
  .cardtypes-data th:nth-child(1), .cardtypes-data td:nth-child(1), /* تحديد */
  .cardtypes-data th:nth-child(2), .cardtypes-data td:nth-child(2), /* سحب */
  .cardtypes-data th:nth-child(3), .cardtypes-data td:nth-child(3), /* # */
  .cardtypes-data th:nth-child(6), .cardtypes-data td:nth-child(6), /* الافتتاحي */
  .cardtypes-data th:nth-child(8), .cardtypes-data td:nth-child(8) /* الحالة */
  { display:none; }
  .cardtypes-data th, .cardtypes-data td{ padding:8px 10px; font-size:13px }

  /* Cards tab (frontend/cards.php): show رقم الكرت(3) الفئة/الباقة(4) الحالة(5) والإجراءات(6) فقط */
  .cards-data th:nth-child(1), .cards-data td:nth-child(1), /* تحديد */
  .cards-data th:nth-child(2), .cards-data td:nth-child(2) /* # */
  { display:none; }
  .cards-data th, .cards-data td{ padding:8px 10px; font-size:13px }

  /* Users (frontend/users.php): show الاسم الشخصي(3) الدور(4) الحالة(6) والإجراءات(9) فقط */
  .users-data th:nth-child(1), .users-data td:nth-child(1), /* # */
  .users-data th:nth-child(2), .users-data td:nth-child(2), /* اسم المستخدم */
  .users-data th:nth-child(5), .users-data td:nth-child(5), /* الهاتف */
  .users-data th:nth-child(7), .users-data td:nth-child(7), /* بصمة */
  .users-data th:nth-child(8), .users-data td:nth-child(8) /* واتساب */
  { display:none; }
  .users-data th, .users-data td{ padding:8px 10px; font-size:13px }

  /* Reports page mobile tuning */
  /* Reports Sales: keep التاريخ(2) نقطة البيع(3) الفئة(4) الإجمالي(7) */
  .reports-sales-data th:nth-child(1), .reports-sales-data td:nth-child(1), /* # */
  .reports-sales-data th:nth-child(5), .reports-sales-data td:nth-child(5), /* الكمية */
  .reports-sales-data th:nth-child(6), .reports-sales-data td:nth-child(6) /* سعر الوحدة */
  { display:none; }
  .reports-sales-data th, .reports-sales-data td{ padding:8px 10px; font-size:13px }

  /* Reports Expenses: keep التاريخ(2) البند(3) المبلغ(5) */
  .reports-expenses-data th:nth-child(1), .reports-expenses-data td:nth-child(1), /* # */
  .reports-expenses-data th:nth-child(4), .reports-expenses-data td:nth-child(4) /* الوصف */
  { display:none; }
  .reports-expenses-data th, .reports-expenses-data td{ padding:8px 10px; font-size:13px }

  /* Reports POS movements: keep نقطة البيع(1) إجمالي المبيعات(3) */
  .reports-posmov-data th:nth-child(2), .reports-posmov-data td:nth-child(2) /* إجمالي الكمية */
  { display:none; }
  .reports-posmov-data th, .reports-posmov-data td{ padding:8px 10px; font-size:13px }

  /* Mobile boxy cards: transform table rows into stacked boxes */
  table.mobile-boxy{ width:100%; border-collapse:separate; border-spacing:0 10px }
  table.mobile-boxy thead{ display:none }
  table.mobile-boxy tbody tr{ display:block; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:0 6px 14px rgba(0,0,0,.18); padding:10px 12px }
  table.mobile-boxy tbody tr td{ display:grid; grid-template-columns:110px 1fr; gap:8px; padding:6px 0; border:0 }
  table.mobile-boxy tbody tr td::before{ content:attr(data-th); color:var(--muted); font-weight:600 }
  /* make last cell (إجراءات) appear at bottom with spacing */
  table.mobile-boxy tbody tr td:last-child{ margin-top:6px; padding-top:8px; border-top:1px dashed var(--border); }

  /* Promo Banners (frontend/promo-banners.php): hide العنوان(2) والرابط(3) على الجوال بعد إزالة عمود الترتيب */
  .promobanners-data th:nth-child(2), .promobanners-data td:nth-child(2), /* العنوان */
  .promobanners-data th:nth-child(3), .promobanners-data td:nth-child(3) /* الرابط */
  { display:none; }
  .promobanners-data th, .promobanners-data td{ padding:8px 10px; font-size:13px }
}

/* --- Theming system: light/dark + palettes --- */
html[data-theme="dark"]{
  --bg:#0b1020; --panel:#0e162b; --panel2:rgba(9,16,32,.55); --text:#e5e7eb; --muted:#94a3b8; --border:#0d1b2f;
  --toolbar-bg:#0a1326; --table-bg:#0f1932; --thead-bg:#122142; --thead-fg:#dbeafe; --input-bg:#0c162c; --header-bg:#0b142a; --header-fg:#e5e7eb; --accent-section: var(--primary);
  /* captcha palette */
  --captcha-bg:#0b1224; --captcha-fg:#22c55e;
}
html[data-theme="light"]{
  --bg:#ffffff; --panel:#ffffff; --panel2:#ffffff; --text:#0f172a; --muted:#475569; --border:#dbe1ea;
  --toolbar-bg:#ffffff; --table-bg:#ffffff; --thead-bg:#f8fafc; --thead-fg:#0f172a; --input-bg:#ffffff; --header-bg:#ffffff; --header-fg:#0f172a; --accent-section: var(--primary);
  /* captcha palette */
  --captcha-bg:#f8fafc; --captcha-fg:#16a34a;
}
/* Accent palettes */
html[data-palette="emerald"]{ --primary:#10b981; --primary-2:#34d399; --link:#059669; }
html[data-palette="indigo"]{ --primary:#6366f1; --primary-2:#818cf8; --link:#4f46e5; }
html[data-palette="amber"]{ --primary:#f59e0b; --primary-2:#fbbf24; --link:#b45309; }

/* Apply theme variables to key components (override old hardcoded colors) */
html[data-theme] body{background:var(--bg);color:var(--text)}
html[data-theme] header{background:var(--header-bg);color:var(--header-fg)}
html[data-theme] .btn{border-color:color-mix(in oklab, var(--primary) 40%, #143055);background:color-mix(in oklab, var(--primary) 15%, var(--toolbar-bg));color:var(--header-fg)}
html[data-theme] .btn.primary{background:color-mix(in oklab, var(--primary) 20%, transparent);border-color:color-mix(in oklab, var(--primary) 45%, #153e7b);color:var(--header-fg)}
html[data-theme] .btn.danger{background:color-mix(in oklab, #ef4444 28%, var(--toolbar-bg));border-color:color-mix(in oklab, #ef4444 65%, var(--border));color:#fff}
html[data-theme] .btn.danger:hover{filter:brightness(1.05)}
html[data-theme] .toolbar{background:var(--toolbar-bg);border-color:var(--border)}
html[data-theme] .toolbar input, html[data-theme] .toolbar select{background:var(--input-bg);border-color:var(--border);color:var(--text)}
html[data-theme] .table-panel{background:var(--table-bg);border-color:var(--border)}
html[data-theme] .table-panel table{background:var(--table-bg)}
html[data-theme] .table-panel th{background:var(--thead-bg);color:var(--thead-fg)}
html[data-theme] .table-panel th, html[data-theme] .table-panel td{border-color:var(--border);color:var(--text)}
html[data-theme] .modal{background:var(--panel);border-color:var(--border)}
html[data-theme] .modal-header{border-bottom:1px solid var(--border)}
/* Theme-specific modal header styling for better contrast */
html[data-theme="dark"] .modal-header{background:color-mix(in oklab, var(--accent-section) 18%, var(--panel));color:#eaf3ff}
html[data-theme="light"] .modal-header{background:color-mix(in oklab, var(--accent-section) 8%, var(--panel));color:var(--header-fg)}
/* Inputs in modal: clearer contrast in dark, subtle accent on hover/focus */
html[data-theme] .modal input, html[data-theme] .modal select{
  background:color-mix(in oklab, var(--input-bg) 85%, var(--accent-section) 15%);
  border-color:color-mix(in oklab, var(--border) 75%, var(--accent-section) 25%);
  color:var(--text);
}
html[data-theme] .modal input::placeholder{color:color-mix(in oklab, var(--muted) 80%, #fff 20%)}
html[data-theme] .modal input:hover, html[data-theme] .modal select:hover{
  border-color:color-mix(in oklab, var(--border) 55%, var(--accent-section) 45%);
}
html[data-theme] .modal input:focus, html[data-theme] .modal select:focus{
  outline:none;
  border-color:var(--accent-section);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-section) 35%, transparent);
  background:color-mix(in oklab, var(--input-bg) 75%, var(--accent-section) 25%);
  caret-color:var(--accent-section);
}
/* Make selects a bit clearer */
html[data-theme] .modal select{appearance:none;padding-inline-end:28px;position:relative;background-image:linear-gradient(45deg, var(--muted) 50%, transparent 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat}

/* --- Inventory page sections & forms --- */
details.section-collapsible{border:1px solid var(--border);border-radius:12px;background:var(--panel2);margin:12px 0}
details.section-collapsible > summary{list-style:none;padding:10px 14px;cursor:pointer;color:var(--text);font-weight:700;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
details.section-collapsible > summary::-webkit-details-marker{display:none}
details.section-collapsible > summary::after{content:'▾';opacity:.85;transition:transform .2s ease}
details.section-collapsible[open] > summary::after{transform:rotate(180deg)}
details.section-collapsible .form-panel{padding:12px 14px;border-top:1px solid var(--border)}
.form-row{display:flex;flex-wrap:wrap;gap:12px}
.form-panel .grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.form-panel .field{display:flex;flex-direction:column;gap:6px}
/* Inputs in general forms (inventory) */
html[data-theme] .form-panel input, html[data-theme] .form-panel select{
  padding:10px;border-radius:8px;background:var(--input-bg);border:1px solid var(--border);color:var(--text)
}
html[data-theme] .form-panel input:hover, html[data-theme] .form-panel select:hover{
  border-color:color-mix(in oklab, var(--border) 55%, var(--accent-section) 45%);
}
html[data-theme] .form-panel input:focus, html[data-theme] .form-panel select:focus{
  outline:none;border-color:var(--accent-section);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-section) 35%, transparent);
}
/* Tables inside inventory sections inherit table-panel look */
details.section-collapsible .table-panel{margin:10px;border:1px solid var(--border);background:var(--table-bg);border-radius:12px;padding:0}
details.section-collapsible .table-panel table{width:100%;border-collapse:collapse;background:var(--table-bg)}
details.section-collapsible .table-panel th{background:var(--thead-bg);color:var(--thead-fg)}
details.section-collapsible .table-panel th, details.section-collapsible .table-panel td{padding:10px;border-bottom:1px solid var(--border);text-align:right;color:var(--text)}

/* Section accent for inventory (already defined earlier in build, keep here if missing) */
/* (deduped) body[data-section="inventory"] accent defined earlier */

/* --- Inventory: color-coded cards by package name --- */
.inventory-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.inv-card{border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.15);overflow:hidden}
.inv-card .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:linear-gradient(135deg, color-mix(in oklab, var(--inv-accent) 22%, transparent) 0%, transparent 60%)}
.inv-card .name{font-weight:800;color:var(--text)}
.inv-card .badge{font-weight:700;padding:4px 9px;border-radius:999px;background:color-mix(in oklab, var(--inv-accent) 35%, #0000);border:1px solid color-mix(in oklab, var(--inv-accent) 60%, var(--border));color:#fff}
.inv-card .body{padding:12px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.inv-card .metric{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px dashed color-mix(in oklab, var(--inv-accent) 30%, var(--border));border-radius:10px;background:color-mix(in oklab, var(--inv-accent) 8%, var(--panel))}
.inv-card .metric .label{font-size:12px;color:var(--muted)}
.inv-card .metric .val{font-weight:800;color:var(--text)}
.inv-card .foot{padding:10px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.inv-card .foot .btn{padding:6px 10px}

/* Color mappings via data-color on .inv-card */
.inv-card[data-color="red"]{--inv-accent:#ef4444}
.inv-card[data-color="yellow"]{--inv-accent:#f59e0b}
.inv-card[data-color="blue"]{--inv-accent:#3b82f6}
.inv-card[data-color="green"]{--inv-accent:#22c55e}
.inv-card[data-color="orange"]{--inv-accent:#f97316}
.inv-card[data-color="purple"]{--inv-accent:#8b5cf6}
.inv-card[data-color="pink"]{--inv-accent:#ec4899}
.inv-card[data-color="gold"]{--inv-accent:#fbbf24}
.inv-card[data-color="silver"]{--inv-accent:#9ca3af}
.inv-card[data-color="black"]{--inv-accent:#111827}
.inv-card[data-color="white"]{--inv-accent:#e5e7eb}
.inv-card[data-color="indigo"]{--inv-accent:#6366f1}
/* Reusable metric box (works inside وخارج المودال) */
.total-box{padding:10px 12px;border-radius:8px;border:1px dashed var(--border);background:var(--panel2);color:var(--text);min-width:140px}
html[data-theme] .total-box{background:var(--panel2);border-color:var(--border);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent-section) 25%, transparent)}
html[data-theme] a{color:var(--link)}

/* 50x50 fixed thumbnail used in promo-banners list */
.thumb-50{width:50px;height:50px;border-radius:8px;border:1px solid var(--border);overflow:hidden;background:var(--panel)}
.thumb-50 img{width:100%;height:100%;object-fit:cover;display:block}

/* Keep promo banners table wide enough to enable horizontal scroll on mobile */
/* Narrower min-width for promo banners table inside scroll wrapper */
.table-h-scroll > table.promobanners-data{min-width:780px}

/* --- Login hero banners (carousel) --- */
.hero-banners{position:relative; --hero-h:260px; overflow:hidden; border-radius:16px; border:1px solid var(--border); margin:0 0 14px 0; background:#0a1326}
.hero-banners .slides{height:var(--hero-h)}
.hero-banners img{object-fit:cover;width:100%;height:100%;display:block}
.hero-banners::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.0) 35%, rgba(0,0,0,.25) 100%);pointer-events:none}
.hero-banners .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-banners .nav:hover{background:rgba(0,0,0,.5)}
.hero-banners .nav.prev{inset-inline-start:8px}
.hero-banners .nav.next{inset-inline-end:8px}
.hero-banners .banner-title{position:absolute;inset-inline:0;bottom:0;z-index:3;height:44px;display:flex;align-items:center;overflow:hidden;background:rgba(2,6,23,.55);backdrop-filter:saturate(1.2) blur(6px);padding-inline:14px;border-radius:0 0 16px 16px;color:#fff;font-weight:800}
.hero-banners .banner-title .ticker{display:inline-block;white-space:nowrap}
.hero-banners .banner-title.is-center{justify-content:center;text-align:center}
.hero-banners .banner-title.is-ticker .ticker{animation:hero-ticker 14s linear infinite;padding-inline-end:100%}
@keyframes hero-ticker{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.hero-banners .dots{position:absolute;inset-inline:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.hero-banners .dot{width:8px;height:8px;border-radius:999px;border:0;background:#334155;cursor:pointer}
.hero-banners .dot.is-active{background:#22c55e;width:10px}
@media (max-width: 860px){ .hero-banners{ --hero-h:200px } }

/* --- Login page layout --- */
.login-wrap{width:min(1024px,96vw);margin:20px auto;}
.login-card{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;border:1px solid var(--border);background:var(--panel2);padding:18px;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
@media (max-width: 920px){ .login-card{grid-template-columns:1fr} }
.login-main h2{margin:0 0 12px 0;font-weight:900}
.login-main .form-row{display:flex;flex-direction:column;gap:6px}
.login-main .actions{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.btn.primary.login{padding:10px 18px;border-radius:12px}
.login-aside .brand-title{font-size:28px;font-weight:900;margin:6px 0;color:var(--header-fg)}
.login-aside .brand-sub{color:var(--muted);margin:0 0 10px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab, var(--accent-section) 8%, transparent);color:var(--text);font-weight:700}

/* --- Login inputs clarity (light + dark) --- */
/* Ensure text inputs on the login page are high-contrast in light mode */
html[data-theme] .login-main .input{background:var(--input-bg);color:var(--text);border:1px solid var(--border)}
html[data-theme="light"] .login-main .input{background:#ffffff;color:#0f172a;border-color:#cbd5e1;box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
html[data-theme="light"] .login-main .input::placeholder{color:#64748b}
html[data-theme="dark"] .login-main .input::placeholder{color:#94a3b8}
html[data-theme] .login-main .input:focus{outline:none;border-color:var(--accent-section);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-section) 35%, transparent)}

/* Password eye toggle button for the login form */
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .eye-toggle{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--toolbar-bg);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
html[data-theme="light"] .input-wrap .eye-toggle{background:#f1f5f9;border-color:#cbd5e1;color:#475569}
.input-wrap .eye-toggle:hover{color:var(--text)}

/* Captcha box: light background and green digits */
.captcha-box{padding:8px 12px;border-radius:10px;border:1px solid var(--border);font-weight:900;letter-spacing:2px;background:var(--captcha-bg);color:var(--captcha-fg)}

/* --- Promo banners page layout tweaks (compact on mobile) --- */
.promo-wrap{width:min(980px,96vw);margin:12px auto}
.promo-wrap.card{padding:16px}
.promo-wrap h2{margin:4px 0 8px 0}
.promo-wrap p.muted{margin:0 0 8px 0}
@media (max-width: 640px){
  .promo-wrap.card{padding:12px;border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
  .promo-wrap h2{font-size:22px;margin:2px 0 6px}
  .promo-wrap p.muted{font-size:13px;line-height:1.6}
  .promo-wrap .toolbar{padding:8px 10px;gap:10px}
  .promo-wrap .table-panel th, .promo-wrap .table-panel td{padding:8px 10px}
}

/* Section accents: تضبيط لون بسيط حسب القسم (يعمل في النهاري والليلي) */
body[data-section="sales"]{ --accent-section: var(--primary); }
body[data-section="inventory"]{ --accent-section:#60a5fa; }
body[data-section="cards"]{ --accent-section:#a78bfa; }
body[data-section="pos"], body[data-section="pos-analysis"]{ --accent-section:#f59e0b; }
body[data-section="reports"]{ --accent-section:#22d3ee; }
body[data-section="expenses"]{ --accent-section:#f43f5e; }
body[data-section="financial-summary"]{ --accent-section:#10b981; }
body[data-section="debt-payments"]{ --accent-section:#f472b6; }
body[data-section="purchases"]{ --accent-section:#a3e635; }
body[data-section="damaged-goods"]{ --accent-section:#ef4444; }
body[data-section="returns"]{ --accent-section:#22c55e; }

/* تطبيق الaccent على بعض العناصر لتمايز لطيف */
html[data-theme] .card{border-color:color-mix(in oklab, var(--accent-section) 25%, var(--border))}
/* (deduped) accent styles are already present earlier for toolbar/summary/table/dropdown */

/* ---- Generic form input (used across pages, including WhatsApp UI) ---- */
.input{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);width:100%}
.input:focus{outline:none;border-color:var(--accent-section);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-section) 35%, transparent)}

/* ---- WhatsApp settings UI (wa-*) ---- */
.wa-section{position:relative}
.wa-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.wa-title{display:flex;align-items:center;gap:8px}
.wa-logo{font-size:18px}
.wa-h3{margin:0}
.wa-h4{margin:6px 0}
.wa-sub{color:var(--muted);font-size:13px}
.wa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.wa-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.wa-actions{grid-column:1 / -1;display:flex;gap:10px;align-items:center;margin-top:2px}
.wa-status{min-height:20px}
.wa-sep{margin:16px 0;border:0;border-top:1px solid var(--border)}
.wa-webhook-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.wa-code{border:1px dashed var(--border);background:var(--panel);padding:8px;border-radius:10px}
.wa-code-input{border:0;background:transparent;padding:6px 4px}
.wa-code-inline{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;opacity:.8}
.wa-badge{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab, var(--accent-section) 8%, transparent);font-size:12px}
.wa-badge-on{background:#166534;border-color:#14532d;color:#ffffff}
.wa-badge-off{background:#92400e;border-color:#7c2d12;color:#ffffff}
.wa-events{margin-top:4px}
.wa-events-sec{margin:10px 0;padding:10px}
.wa-events-grid{display:flex;flex-direction:column;gap:8px}
/* Each event row becomes a compact grid: label + actions dropdown */
.wa-events-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
/* Status coloring via row background instead of a separate badge */
.wa-events-row.on{background:color-mix(in oklab, #22c55e 14%, var(--panel)) ;border-color:color-mix(in oklab, #22c55e 45%, var(--border))}
.wa-events-row.off{background:color-mix(in oklab, #ef4444 12%, var(--panel));border-color:color-mix(in oklab, #ef4444 45%, var(--border))}
.wa-tpl-row{margin:10px 0;padding:12px}
.wa-tpl-grid{display:grid;grid-template-columns:220px 1fr;gap:10px;align-items:flex-start}

/* Password eye toggle */
.wa-pass{position:relative;display:flex;align-items:center}
.wa-pass .toggle-eye{position:absolute;inset-inline-end:8px; background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:16px; padding:4px}
.wa-pass .toggle-eye:hover{color:var(--text)}

/* ---- General Control templates table + expansion ---- */
.gc-tpl-data{width:100%;border-collapse:collapse;background:var(--table-bg)}
/* Color table rows based on status instead of a separate الحالة column */
.gc-tpl-data tr.row-on > td{background:color-mix(in oklab, #22c55e 10%, var(--table-bg))}
.gc-tpl-data tr.row-off > td{background:color-mix(in oklab, #ef4444 8%, var(--table-bg))}
.gc-tpl-data tr.row-on > td, .gc-tpl-data tr.row-off > td{border-top:1px solid var(--border)}
.gc-expand-row td{padding:0;border:0}
.gc-expand{background:var(--panel);border-top:1px dashed var(--border);padding:10px}
@media (max-width: 840px){
  /* بعد إزالة عمود الحالة: أخفِ عمود الأرقام (العمود الثاني الآن) على الجوال لتوفير المساحة */
  .gc-tpl-data th:nth-child(2), .gc-tpl-data td:nth-child(2){ display:none }
}

/* ---- General Control settings summary table ---- */
.gc-settings-data{width:100%;border-collapse:collapse;background:var(--table-bg)}
@media (max-width: 840px){
  .gc-settings-data th:nth-child(2), .gc-settings-data td:nth-child(2){ display:none }
}