/* نقطة البيع — ترتيب Trusto عشان الفروع ما تتعلم من جديد، وألوان هوية خيرالله:
   كحلي #212250 · أزرق #4265B9 · أحمر #EC1D27 (نفس نظام الإدارة) */
:root {
  --bg: #f4f5f7; --panel: #ffffff; --ink: #1a1b33; --muted: #5f6280; --line: #e2e4ee; --wash: #eef0f4;
  --navy: #212250; --navy-2: #2d2f6b; --navy-ink: #ffffff; --blue: #4265B9; --blue-wash: #e8edf8; --red: #EC1D27; --label: #4265B9; --memo: #fbf8e6;
  --ok: #1e7d4f; --ok-wash: #e3f2e9; --warn: #9a5b00; --warn-wash: #fcf1dd; --bad: #b3261e; --bad-wash: #fbe7e5;
  --f-body: "Tajawal", "Segoe UI", Tahoma, sans-serif; --f-num: "Tajawal", "Segoe UI", Tahoma, sans-serif;   /* الأرقام بخط النظام نفسه (بدل الخط الثابت) — طلب عبدالله */
  color-scheme: light;
}
/* الصفحة فاتحة (بيضاء) دايماً حتى لو الجهاز على الوضع الليلي — طلب عبدالله */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15.5px; line-height: 1.6; direction: rtl; }
[hidden] { display: none !important; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* الشريط العلوي مثل Trusto: الشعار، التاريخ والوقت، الفرع */
.top { background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 8px 16px; position: sticky; top: 0; z-index: 5; }
.top img { height: 40px; width: auto; }
.top .clock { color: var(--blue); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
.top .who { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.top .who b { color: var(--navy); }
.top a.home { text-decoration: none; font-weight: 700; color: var(--blue); }
.top .branch { font: inherit; font-weight: 700; color: var(--navy); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; background: var(--panel); }
.top .out { font: inherit; font-size: 13px; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.alert { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--warn-wash); color: var(--warn); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-weight: 700; }
.stripe { height: 4px; background: linear-gradient(90deg, var(--navy) 0 62%, var(--red) 62% 80%, var(--blue) 80% 100%); }
.dev { background: var(--warn-wash); color: var(--warn); font-size: 13px; text-align: center; padding: 4px 16px; }
.wrap { max-width: none; margin: 0; padding: 16px 24px 48px; }   /* الشاشة كاملة على الكمبيوتر (طلب عبدالله) */
@media (max-width: 520px) { .wrap { padding: 12px 16px 40px; } }

/* الصفحة الرئيسية: أزرار كبيرة تركوازية، كل زر ينفتح تحته روابطه */
.tabsbar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.tabsbar button, .tabsbar a { font: inherit; font-size: 15px; border: 0; background: none; color: var(--muted); padding: 10px 14px; text-decoration: none; border-radius: 0; min-height: 0; cursor: pointer; border-bottom: 2px solid transparent; }
.tabsbar button:hover, .tabsbar a:hover { color: var(--navy); }
.tabsbar button[aria-selected="true"], .tabsbar a[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--red); font-weight: 700; }
.secs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.secs button { font: inherit; font-size: 16px; font-weight: 800; border: 1px solid var(--line); background: var(--panel); color: var(--muted); padding: 10px 22px; border-radius: 10px; cursor: pointer; }
.secs button[aria-selected="true"] { background: var(--navy); color: var(--navy-ink); border-color: var(--navy); }
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
/* كل قائمة بطاقة: شريط ولون نوعها فوق (نفس ألوان شاشاتها) */
.tile { --acc: var(--navy); background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--acc); border-radius: 12px; box-shadow: 0 1px 3px rgba(20,22,60,.06); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.tile:hover { box-shadow: 0 6px 18px rgba(20,22,60,.10); }
.tile > button { font: inherit; width: 100%; text-align: right; background: none; border: 0; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: var(--navy); }
.tile > button .ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--acc); color: #fff; }
.tile > button .tt { display: grid; gap: 1px; min-width: 0; }
.tile > button .tt b { font-size: 17px; font-weight: 800; }
.tile > button .tt small { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile > button .cnt { margin-inline-start: auto; font-size: 12px; font-weight: 800; color: var(--acc); background: var(--wash); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.tile ul { list-style: none; margin: 0; padding: 4px 10px 10px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.tile li a, .tile li > span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 14.5px; text-decoration: none; border-radius: 8px; }
.tile li a { color: var(--ink); }
.tile li a:hover { background: var(--wash); color: var(--blue); }
.tile li a .ready { margin-inline-start: auto; }
.tile li > span { color: var(--muted); justify-content: space-between; }
.tile[data-k="sale"] { --acc: #212250; } .tile[data-k="return"] { --acc: #b3261e; } .tile[data-k="purchase"] { --acc: #4265B9; }
.tile[data-k="receipt"] { --acc: #1e7d4f; } .tile[data-k="transfer"] { --acc: #9a5b00; } .tile[data-k="damage"] { --acc: #6b4e3d; }
.tile[data-k="count"] { --acc: #5b3f8f; } .tile[data-k="reg"] { --acc: #3c4257; } .tile[data-k="sreturn"] { --acc: #a3245f; }
.tile[data-k="exchange"] { --acc: #c2410c; } .tile[data-k="quote"] { --acc: #0e7490; } .tile[data-k="order"] { --acc: #4d7c0f; }
.tile[data-k="report"] { --acc: #334155; } .tile[data-k="product"] { --acc: #7c2d12; } .tile[data-k="delivery"] { --acc: #0f766e; }
.tile[data-k="acc"] { --acc: #2d2f6b; } .tile[data-k="shift"] { --acc: #0f5a6b; }
.soon { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--wash); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.ready { font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-wash); border-radius: 6px; padding: 0 6px; white-space: nowrap; }

/* شاشات الفاتورة: 3 خطوات */
.ihead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ihead h1 { margin: 0; font-size: 24px; }
.note { font-size: 13px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.c-ok { color: var(--ok); background: var(--ok-wash); } .c-warn { color: var(--warn); background: var(--warn-wash); }
.c-bad { color: var(--bad); background: var(--bad-wash); } .c-info { color: var(--blue); background: var(--blue-wash); }
.steps { display: grid; gap: 16px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 12px; min-width: 0; box-shadow: 0 1px 3px rgba(20,22,60,.05); }
.stephead { display: flex; align-items: center; gap: 10px; }
.stephead h2 { margin: 0; font-size: 17.5px; color: var(--navy); }
.stephead .note { margin-inline-start: auto; }
.sn { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--navy-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.s1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
.s3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; background: var(--bg); }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fld { display: grid; gap: 3px; position: relative; }
.fld > span { color: var(--label); font-weight: 700; font-size: 14px; }
.fld > span i { color: var(--red); font-style: normal; }
input, select, textarea { font: inherit; color: var(--ink); }
.fld input, .fld select, .fld textarea { font-size: 15.5px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); width: 100%; min-width: 0; }
input[type=date] { direction: ltr; }
.search { display: flex; gap: 8px; align-items: center; border: 1.5px solid var(--blue); border-radius: 10px; padding: 8px 12px; background: var(--panel); position: relative; }
.search input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font-size: 16px; }
.sugg { position: absolute; top: 100%; inset-inline: 0; z-index: 4; background: var(--panel); border-radius: 8px; display: grid; gap: 2px; margin-top: 4px; max-height: 340px; overflow: auto; }
.sugg:empty { display: none; }
.sugg:not(:empty) { border: 1px solid var(--line); padding: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.sugg button { font: inherit; text-align: right; background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sugg button:hover, .sugg button[aria-selected="true"] { background: var(--wash); }
.sugg .d { font-size: 12.5px; color: var(--muted); }
.ccard { font-size: 13.5px; color: var(--label); line-height: 1.8; }
.ccard b { color: var(--ink); }
.ccard .x { font: inherit; font-size: 12.5px; border: 0; background: none; color: var(--bad); cursor: pointer; padding: 0; }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lines-t { min-width: 760px; }
.lines-t th { text-align: right; font-size: 13.5px; font-weight: 800; color: var(--navy); background: var(--wash); border-bottom: 2px solid var(--line); padding: 9px 10px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.lines-t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lines-t tbody tr:nth-child(even) td { background: #fafbfd; }
.lines-t tbody tr:hover td { background: var(--blue-wash); }
.lines-t td.num, .num { font-variant-numeric: tabular-nums; }
.lines-t tfoot td { background: var(--wash); border-top: 2px solid var(--line); }
.reg td { white-space: nowrap; }
/* عمود الإجراءات (عرض، مرتجع، تسليم...) ثابت على طرف الجدول — يبين حتى لو الجدول عريض */
.reg td:last-child, .reg th:last-child { position: sticky; inset-inline-end: 0; background: var(--panel); box-shadow: 6px 0 8px -6px rgba(20,22,60,.18); }
.reg th:last-child { background: var(--wash); z-index: 2; }
.reg tbody tr:nth-child(even) td:last-child { background: #fafbfd; }
.reg tbody tr:hover td:last-child { background: var(--blue-wash); }   /* كل صف سطر واحد — الجدول ينسحب يمين ويسار لو عريض */
/* القوائم الطويلة: الجدول ينزل لحاله ورأسه ثابت */
.tw:has(> .reg) { max-height: calc(100vh - 250px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tw:has(> .reg) .lines-t th:first-child { border-start-start-radius: 10px; }
/* كل الجداول: الأعمدة في النص تحت عناوينها، وأول عمود (الاسم أو الرقم) على اليمين — طلب عبدالله */
.lines-t th, .lines-t td, .lines-t td.num, .lines-t th.num { text-align: center; }
.lines-t th:first-child, .lines-t td:first-child { text-align: right; }
.lines-t td input:not([type=checkbox]) { text-align: center; margin-inline: auto; display: block; }
.lines-t .hint { justify-content: center; }
.lines-t input { width: 90px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--wash); text-align: center; direction: ltr; }
.lines-t .rm { font: inherit; border: 0; background: none; color: var(--bad); cursor: pointer; font-size: 18px; line-height: 1; }
.lines-t .stock { font-size: 12px; color: var(--muted); }
.lines-t .stock.short { color: var(--warn); font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 18px; }
.paytabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.paytabs button { font: inherit; font-size: 14px; border: 0; background: none; color: var(--muted); padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; }
.paytabs button[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--red); font-weight: 700; background: var(--wash); }
.paytabs button:disabled { opacity: .45; cursor: not-allowed; }
.paytabs kbd { font-family: var(--f-num); font-size: 11px; opacity: .7; margin-inline-start: 4px; }
.mini { display: grid; gap: 8px; font-size: 14px; padding-top: 8px; }
.mini label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mini input { width: 140px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); text-align: left; direction: ltr; }
.totals { background: var(--navy); color: var(--navy-ink); border-radius: 8px; padding: 12px 16px; display: grid; gap: 4px; }
.box .r { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.box .r:last-child { border-bottom: 0; }
.totals .r { display: flex; justify-content: space-between; font-size: 14px; opacity: .9; }
.totals .v { font-size: 30px; font-weight: 800; }
.totals .v small { font-size: 15px; font-weight: 500; }
.sum { display: grid; gap: 8px; position: sticky; top: 76px; }
.btn { font: inherit; font-size: 15px; font-weight: 700; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 10px 18px; min-height: 42px; border-radius: 9px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.pri { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.pri:hover { background: var(--navy-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.big { padding: 15px; font-size: 18px; border-radius: 11px; }
.btn.sm { min-height: 32px; }
.btn:hover:not(:disabled) { border-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px var(--blue-wash); }
.err { background: var(--bad-wash); color: var(--bad); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 700; }
.warnbox { background: var(--warn-wash); color: var(--warn); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.toast { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700; z-index: 9; }
@media (max-width: 980px) { .s1, .s3 { grid-template-columns: minmax(0, 1fr); } .sum { position: static; } }
@media (max-width: 520px) { .g2 { grid-template-columns: minmax(0, 1fr); } .top .clock { display: none; } }

/* كل نوع مستند له لون وأيقونة عشان الموظف ما يخلط بينهم (فاتورة الشراء غير إشعار الاستلام...) */
.doc { display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; color: #fff; }
.doc .ic { font-size: 30px; line-height: 1; }
.doc h1 { margin: 0; font-size: 22px; color: #fff; }
.doc p { margin: 2px 0 0; font-size: 13.5px; opacity: .92; }
.doc .who { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.doc-sale { background: #212250; }
.doc-return { background: #b3261e; }
.doc-purchase { background: #4265B9; }
.doc-receipt { background: #1e7d4f; }
.doc-transfer { background: #9a5b00; }
.doc-damage { background: #6b4e3d; }
.doc-count { background: #5b3f8f; }
.doc-shift { background: #0f5a6b; }
.doc-acc { background: #2d2f6b; }
.doc-reg { background: #3c4257; }
.doc-sreturn { background: #a3245f; }
.doc-exchange { background: #c2410c; }
.doc-quote { background: #0e7490; }
.doc-order { background: #4d7c0f; }
.doc-report { background: #334155; }
.doc-product { background: #7c2d12; }
.doc-delivery { background: #0f766e; }
.tag { font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 1px 8px; color: #fff; white-space: nowrap; }
.tag-sale { background: #212250; } .tag-return { background: #b3261e; } .tag-purchase { background: #4265B9; }
.tag-receipt { background: #1e7d4f; } .tag-transfer { background: #9a5b00; } .tag-damage { background: #6b4e3d; } .tag-count { background: #5b3f8f; } .tag-reg { background: #3c4257; }
.tag-sreturn { background: #a3245f; } .tag-exchange { background: #c2410c; } .tag-quote { background: #0e7490; } .tag-order { background: #4d7c0f; }
.tag-report { background: #334155; } .tag-delivery { background: #0f766e; } .tag-product { background: #7c2d12; }

.reg th { white-space: nowrap; }
@media print { .top, .stripe, .dev, .tabsbar, .doc .who, #pager, .step > .g2, .btn, select { display: none !important; } .reg { min-width: 0 !important; font-size: 11px; } }

/* ملصقات الباركود */
.bc-sheet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bc-label { width: var(--lw, 50mm); height: var(--lh, 30mm); background: #fff; color: #000; border: 1px dashed #bbb; padding: 1.5mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; break-inside: avoid; }
.bc-label .n { font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; max-height: 2.3em; overflow: hidden; }
.bc-label svg { max-width: 100%; height: auto; }
.bc-label .p { font-size: 12px; font-weight: 800; direction: rtl; } .bc-label .p small { font-size: 8px; font-weight: 500; }
@media print {
  body:has(.bc-sheet) .wrap > .doc, body:has(.bc-sheet) .bc-tools { display: none !important; }
  .bc-sheet { gap: 0; margin: 0; } .bc-label { border: 0; page-break-after: always; }
  .bc-sheet.a4 .bc-label { page-break-after: auto; border: 0; }
}

/* شاشة البيع على الكمبيوتر: الزبون والأصناف يمين، والدفع والمجموع عمود ثابت يسار — الكاشير ما ينزل */
@media (min-width: 1200px) {
  .sale-grid { grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr; align-items: start; }
  .sale-grid > .step:nth-child(1), .sale-grid > .step:nth-child(2) { grid-column: 1; }
  .sale-grid > .step:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 76px; }
  .sale-grid > .step:nth-child(3) .s3 { grid-template-columns: minmax(0, 1fr); }
  .sale-grid > .step:nth-child(3) .sum { position: static; }
  .sale-grid .lines-t { min-width: 0; }
  .sale-grid #lines:empty::after, .sale-grid .items-min { min-height: 220px; }
}
.sale-grid .paytabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; }
.sale-grid .paytabs button { font-size: 15.5px; font-weight: 700; padding: 11px 6px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); }
.sale-grid .paytabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sale-grid .paytabs button:not(:disabled):hover { border-color: var(--blue); }
.sale-grid .totals .v { font-size: 34px; }
.tile li a .ready { display: none; }   /* كل الشاشات صارت جاهزة — الوسم صار زحمة */
@media (max-width: 520px) { .secs button { padding: 8px 14px; font-size: 15px; } .tile > button .ic { width: 36px; height: 36px; font-size: 17px; } }

/* تحت الصنف في فاتورة البيع: التكلفة (للمحاسب والإدارة) وآخر سعر أخذه هالعميل — سطر مختصر */
.lines-t .hint { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 3px; font-family: var(--f-num); cursor: help; }
.lines-t .hint b { color: var(--ink); font-weight: 700; }
.lines-t .hint .below, .lines-t .hint .below b { color: var(--bad); }
.lines-t th.num { font-family: var(--f-body); }

/* جدول الأصناف في فاتورة البيع: كل الأعمدة في النص تحت عناوينها (إلا اسم المنتج) — طلب عبدالله */
.sale-grid .lines-t th:not(:nth-child(2)), .sale-grid .lines-t td:not(:nth-child(2)) { text-align: center; }
.sale-grid .lines-t td input { text-align: center; margin-inline: auto; display: block; }
.sale-grid .lines-t .hint { justify-content: center; }
.lines-t td.empty { text-align: center; }

.nocost .costcol { display: none !important; }

/* شاشة البيع: أزرار الأكثر بيعاً، الباقي للعميل، آخر الفواتير */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.quick:empty { display: none; }
.quick button { font: inherit; text-align: center; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 7px 6px; cursor: pointer; display: grid; gap: 1px; min-width: 0; }
.quick button:hover { border-color: var(--blue); background: var(--blue-wash); }
.quick button b { font-size: 13px; line-height: 1.35; color: var(--navy); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em; }
.quick button span { font-size: 12px; color: var(--muted); }
.quick button.out { opacity: .55; }
.change { display: flex; justify-content: space-between; align-items: baseline; border-radius: 9px; padding: 8px 12px; background: var(--ok-wash); color: var(--ok); font-weight: 700; }
.change b { font-size: 28px; font-weight: 800; }
.change.short { background: var(--bad-wash); color: var(--bad); }
.recent { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: 13.5px; }
.recent summary { cursor: pointer; padding: 7px 12px; font-weight: 700; color: var(--navy); }
.recent .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 12px; border-top: 1px solid var(--line); }
.recent .r a { text-decoration: none; color: var(--blue); font-weight: 700; white-space: nowrap; }

/* الرئيسية حسب الدور */
.bigacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.bigacts a { display: grid; place-items: center; gap: 4px; text-decoration: none; font-size: 18px; font-weight: 800; color: var(--navy); background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 8px; box-shadow: 0 1px 3px rgba(20,22,60,.06); }
.bigacts a span { font-size: 28px; }
.bigacts a:hover { border-color: var(--blue); }
.bigacts a.pri { background: var(--navy); border-color: var(--navy); color: #fff; }
.dashrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 14px; align-items: stretch; }
.waiting { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 3px rgba(20,22,60,.05); }
.waiting h2 { margin: 0; font-size: 16px; color: var(--navy); }
.wgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.witem { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; text-decoration: none; color: var(--ink); background: var(--bg); font-weight: 700; font-size: 14px; white-space: nowrap; flex: 1 1 auto; }
a.witem:hover { border-color: var(--blue); background: var(--blue-wash); }
.witem .chip { font-size: 14px; padding: 1px 9px; }
.witem .go { margin-inline-start: auto; color: var(--blue); font-size: 13px; padding-inline-start: 10px; }
.witem.kpi { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.witem.kpi b { font-size: 20px; color: var(--navy); }
.witem.kpi.tot { background: var(--navy); color: #fff; border-color: var(--navy); } .witem.kpi.tot b { color: #fff; }
@media (max-width: 640px) { .bigacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* شريط الحفظ الثابت + الخطأ جنب الخانة */
.actbar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 -6px 18px rgba(20,22,60,.10); margin-top: 4px; }
.actbar .actinfo { font-weight: 700; color: var(--navy); }
.actbar .actinfo:empty { display: none; }
.actbar #msg { flex: 1 1 260px; min-width: 0; }
.actbar #msg .err { margin: 0; }
.actbar > .btn.big { margin-inline-start: auto; width: auto; min-width: 240px; }
@media (max-width: 640px) { .actbar > .btn.big { width: 100%; min-width: 0; } }
input.bad, select.bad, textarea.bad { border-color: var(--bad) !important; background: var(--bad-wash) !important; }
.ferr { color: var(--bad); font-size: 13px; font-weight: 700; margin-top: 3px; }
tr.rowbad td { background: var(--bad-wash) !important; }
tr.rowbad td:first-child { box-shadow: inset -3px 0 0 var(--bad); }

/* السلاسة: انتقال ناعم بين الشاشات + شريط التحميل */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
#busybar { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(90deg, transparent, var(--blue), var(--red), transparent); background-size: 50% 100%; background-repeat: no-repeat; }
#busybar.on { opacity: 1; animation: busy 1s linear infinite; }
@keyframes busy { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { #busybar.on { animation: none; background-size: 100% 100%; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.tile.locked { opacity: .55; box-shadow: none; }
.tile.locked:hover { opacity: .8; }
.bigacts a { padding: 14px 8px; font-size: 17px; } .bigacts a span { font-size: 24px; }

/* المستخدمين والصلاحيات */
.ulist { display: grid; gap: 10px; margin-top: 10px; }
.ucard { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); display: grid; gap: 10px; }
.ucard .uh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ucard .uh b { color: var(--navy); font-size: 16px; }
.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; }
.perms label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.perms input { width: 17px; height: 17px; accent-color: var(--navy); }
.ucard > .btn { justify-self: start; }

/* لمسات احترافية */
.doc-stock { background: #155e75; }
tr.loadrow td { text-align: center; color: var(--muted); padding: 22px; font-size: 14px; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; vertical-align: -2px; margin-inline-end: 6px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lines-t tbody tr:not(.loadrow):hover td { background: #f7f8fc; }
.btn { transition: background .12s, border-color .12s, box-shadow .12s, transform .08s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.tabsbar { scrollbar-width: thin; }
input, select, textarea { transition: border-color .12s, box-shadow .12s; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,101,185,.13); outline: 0; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* القائمة الجانبية الثابتة */
:root { --side-w: 264px; }
.side { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--side-w); background: var(--navy); color: #fff; z-index: 20; display: flex; flex-direction: column; box-shadow: -2px 0 14px rgba(20,22,60,.18); transition: transform .18s ease; }
body.has-side { padding-inline-start: var(--side-w); transition: padding .18s ease; }
body.has-side.side-off { padding-inline-start: 0; }
body.side-off .side { transform: translateX(105%); }
.sidetop { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidehome { flex: 1; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; padding: 8px 10px; border-radius: 9px; }
.sidehome:hover, .sidehome.on { background: rgba(255,255,255,.1); }
.sidex { background: none; border: 0; color: rgba(255,255,255,.7); font-size: 16px; cursor: pointer; padding: 6px 9px; border-radius: 8px; }
.sidex:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebody { overflow-y: auto; padding: 6px 8px 24px; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sidesec { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: rgba(255,255,255,.5); padding: 14px 10px 6px; }
.sgrp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.92); }
.sgrp summary::-webkit-details-marker { display: none; }
.sgrp summary:hover { background: rgba(255,255,255,.08); }
.sgrp[open] summary { color: #fff; }
.sgrp .sic { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; }
.sgrp .scnt { margin-inline-start: auto; font-size: 11.5px; color: rgba(255,255,255,.45); }
.sgrp a { display: block; color: rgba(255,255,255,.78); text-decoration: none; font-size: 13.5px; padding: 6px 10px 6px 10px; margin: 1px 0 1px 0; margin-inline-start: 34px; border-radius: 7px; border-inline-start: 2px solid transparent; }
.sgrp a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sgrp a.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; border-inline-start-color: var(--red); }
.sidetog { font: inherit; font-size: 18px; line-height: 1; border: 1px solid var(--line); background: var(--panel); color: var(--navy); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.sidetog:hover { border-color: var(--blue); }
@media (max-width: 1099px) {
  body.has-side { padding-inline-start: 0; }
  body.has-side:not(.side-off)::after { content: ""; position: fixed; inset: 0; background: rgba(15,16,40,.35); z-index: 19; }
}
/* زر البحث فوق + نافذة البحث */
.kbtn { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 10px; padding: 7px 12px; cursor: pointer; min-width: 240px; }
.kbtn:hover { border-color: var(--blue); color: var(--navy); }
.kbtn kbd, .palin kbd { margin-inline-start: auto; font-family: var(--f-num, inherit); font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: var(--panel); color: var(--muted); }
@media (max-width: 760px) { .kbtn { min-width: 0; } .kbtn kbd { display: none; } }
.pal { position: fixed; inset: 0; z-index: 50; background: rgba(15,16,40,.45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.pal[hidden] { display: none; }
.palbox { width: min(640px, 100%); background: var(--panel); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; max-height: 75vh; }
.palin { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 18px; color: var(--muted); }
.palin input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--ink); background: none; }
.palres { overflow-y: auto; padding: 6px; }
.palk { font-size: 12px; font-weight: 800; color: var(--muted); padding: 10px 10px 4px; }
.palres a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.palres a .note { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.palres a[aria-selected="true"], .palres a:hover { background: var(--blue-wash); color: var(--navy); }
.palfoot { padding: 8px 16px; border-top: 1px solid var(--line); }
@media print { .side, .sidetog, .kbtn, .pal { display: none !important; } body.has-side { padding: 0 !important; } }
.noperm { max-width: 460px; margin: 10vh auto; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 32px 24px; display: grid; gap: 10px; justify-items: center; }
.noperm .ic { font-size: 40px; } .noperm h1 { margin: 0; font-size: 21px; color: var(--navy); } .noperm p { margin: 0 0 6px; color: var(--muted); }

/* الجرس */
.bellw { position: relative; }
.bell { font: inherit; font-size: 17px; line-height: 1; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 7px 10px; cursor: pointer; position: relative; }
.bell:hover { border-color: var(--blue); }
.bell b { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; font-family: var(--f-num, inherit); }
.bell.hot b { background: var(--red); }
.bellbox { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: 330px; max-width: 86vw; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(20,22,60,.18); z-index: 30; overflow: hidden; }
.bellh { font-weight: 800; color: var(--navy); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bellbox a { display: flex; gap: 10px; align-items: center; padding: 9px 14px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--wash); }
.bellbox a:hover { background: var(--blue-wash); }
/* المستند على جنب الشاشة */
.docpane { position: fixed; inset: 0; z-index: 40; background: rgba(15,16,40,0); pointer-events: none; transition: background .18s; }
.docpane.on { background: rgba(15,16,40,.4); pointer-events: auto; }
.docpane > .docbar, .docpane > iframe { position: absolute; inset-inline-end: 0; width: min(880px, 100vw); transform: translateX(-105%); transition: transform .2s ease; }
.docpane.on > .docbar, .docpane.on > iframe { transform: none; }
.docbar { top: 0; height: 52px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.docbar b { color: var(--navy); font-family: var(--f-num, inherit); }
.docpane > iframe { top: 52px; height: calc(100% - 52px); border: 0; background: #e9ebf2; box-shadow: 8px 0 30px rgba(0,0,0,.2); }
/* قائمة الاختصارات */
.keys { padding: 8px 16px; display: grid; gap: 8px; }
.keys div { display: flex; gap: 12px; align-items: center; font-size: 14.5px; }
.keys kbd { min-width: 120px; text-align: center; font-family: var(--f-num, inherit); font-size: 12.5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 3px 8px; background: var(--bg); }
@media print { .bellw, .docpane { display: none !important; } }

/* الرئيسية: القائمة الجانبية ظاهرة (كمبيوتر) = المربعات المكررة تحت تنخفي — تسكّر القائمة بـ ☰ ترجع تطلع */
@media (min-width: 1100px) { body.has-side:not(.side-off) .hometiles { display: none; } }

/* إطار الطباعة المخفي (printDoc) — برا الشاشة بمقاس صفحة عشان التنسيق يطلع صح */
.printf { position: fixed; left: -10000px; top: 0; width: 900px; height: 1200px; border: 0; }
.req { color: var(--bad); font-weight: 800; }
/* شاشة البيع: الزبون إلزامي — بحث + «عميل نقدي» + «＋ جديد» في سطر واحد */
.custrow { display: flex; gap: 6px; align-items: stretch; }
.custrow input { flex: 1; min-width: 0; }
.custrow .btn { white-space: nowrap; }
/* نافذة صغيرة فوق الصفحة (عميل جديد) */
.dlg { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; width: min(560px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); box-shadow: 0 18px 50px rgba(20, 22, 60, .25); }
.dlg::backdrop { background: rgba(20, 22, 60, .35); }
.dlg h3 { margin: 0 0 10px; font-size: 18px; color: var(--navy); }
.dlg form { display: grid; gap: 10px; }
.dlgbar { display: flex; gap: 8px; justify-content: flex-start; margin-top: 4px; }
.extras { margin-bottom: 8px; }
/* زر «حفظ وطباعة» وجنبه «حفظ + إشعار تسليم» */
.savebar { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
@media (max-width: 520px) { .savebar { grid-template-columns: 1fr; } }

/* ---------- شاشة البيع (ترتيب 2026-10-19، طلب عبدالله): الأصناف أكبر مساحة، والدفع لوحة ثابتة على الجنب ----------
   الترتيب في اللوحة: الإجمالي ← طريقة الدفع ← المستلم والباقي ← الخصم والتوصيل ← الحفظ */
.pos2 { display: grid; gap: 12px; }
.poshead { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.poshead h1 { margin: 0; font-size: 21px; color: var(--navy); }
.poshead .who { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; }
.posgrid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.poscol { display: grid; gap: 14px; min-width: 0; }
.pcard { padding: 14px 16px; gap: 10px; }
.pcard .stephead h2 { font-size: 16.5px; }
.pcard .req { color: var(--red); font-style: normal; }
.custfld { position: relative; }
.custrow { gap: 8px; }
.custrow input { font-size: 15.5px; padding: 10px 12px; }
.custrow .btn { padding-inline: 16px; }
.pos2 .ccard:empty { display: none; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.extra-fields { padding-top: 8px; border-top: 1px dashed var(--line); }
.extra-fields .fld > span { font-size: 12.5px; color: var(--muted); }
.extra-fields input { padding: 7px 10px; font-size: 14px; }
.items .search input { font-size: 16px; padding-block: 12px; }
.items .tw { min-height: 260px; }
.pos2 .lines-t { min-width: 0; }
.pos2 .lines-t th:not(:nth-child(2)), .pos2 .lines-t td:not(:nth-child(2)) { text-align: center; }
.pos2 .lines-t td input { text-align: center; margin-inline: auto; display: block; }
.pos2 .lines-t .hint { justify-content: center; }
.payside { position: sticky; top: 76px; gap: 12px; }
.payside .totals { padding: 14px 18px; }
.payside .totals .v { font-size: 36px; line-height: 1.15; }
.payside .paytabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; }
.payside .paytabs button { font-size: 15.5px; font-weight: 700; padding: 11px 6px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); }
.payside .paytabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.payside .paytabs button:not(:disabled):hover { border-color: var(--blue); }
.payside .paybox { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.payside .paybox:empty { display: none; }
.payside .paybox label { font-weight: 700; }
.payside .paybox input { width: 160px; font-size: 16px; padding: 8px 10px; }
.payside .extras { margin: 0; }
.payside .extras .fld > span { font-size: 12.5px; }
.payside .extras input, .payside .extras select { padding: 8px 10px; }
.payside .savebar { grid-template-columns: 1fr; gap: 8px; }
.payside #save { font-size: 18px; padding-block: 15px; }
.payside #save kbd { font-size: 12px; opacity: .8; margin-inline-start: 6px; }
.btn.ghost { background: var(--panel); color: var(--navy); border: 1.5px solid var(--navy); }
.btn.ghost:hover { background: var(--wash); }
.savenote { margin: 0; font-size: 12px; text-align: center; }
@media (max-width: 1100px) { .posgrid { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 900px) { .posgrid { grid-template-columns: minmax(0, 1fr); } .payside { position: static; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .g3 { grid-template-columns: 1fr; } .custrow { flex-wrap: wrap; } .custrow input { flex-basis: 100%; } }
/* الأصناف: اسم الصنف ياخذ المساحة، والأعمدة الثانية على قد أرقامها */
.posgrid { grid-template-columns: minmax(0, 1fr) 360px; }
.pos2 .lines-t { table-layout: auto; }
.pos2 .lines-t th:nth-child(2), .pos2 .lines-t td:nth-child(2) { width: 42%; min-width: 220px; }
.pos2 .lines-t th:nth-child(1), .pos2 .lines-t td:nth-child(1), .pos2 .lines-t th:nth-child(8), .pos2 .lines-t td:nth-child(8) { width: 34px; }
.pos2 .lines-t td input[data-qty] { width: 64px; }
.pos2 .lines-t td input[data-price] { width: 86px; }
.pos2 .lines-t td { padding-block: 8px; }
/* الأكثر بيعاً: أزرار أصغر في سطر */
.pos2 .quick { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pos2 .quick button { padding: 6px 8px; min-height: 0; }
.pos2 .quick b { font-size: 12px; min-height: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pos2 .quick span { font-size: 11.5px; }
@media (max-width: 1100px) { .posgrid { grid-template-columns: minmax(0, 1fr) 330px; } }
.pos2 .lines-t th:nth-child(2), .pos2 .lines-t td:nth-child(2) { width: 36%; min-width: 180px; }
.pos2 .lines-t td input[data-price] { width: 78px; }
.payside .paybox input { width: 130px; }
.payside .paybox label { white-space: nowrap; }

/* ---------- شاشة البيع بالعرض (طلب عبدالله: «عرضي مو طولي») ----------
   الزبون سطر واحد (البحث + المندوب + PO + المشروع)، الأصناف بعرض الشاشة، والدفع شريط عرضي تحتها:
   [طريقة الدفع + المستلم] [الخصم والتوصيل] [الإجمالي] [الحفظ] */
.posgrid { grid-template-columns: minmax(0, 1fr); }
.payside { position: static; display: grid; gap: 10px 14px; align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr);
  grid-template-areas: "h h h h" "tabs ex tot save" "pay who tot save" "msg msg msg rec"; }
.payside > .stephead { grid-area: h; }
.payside > .paytabs { grid-area: tabs; }
.payside > .paybox { grid-area: pay; }
.payside > .extras:not(#dlvwho) { grid-area: ex; }
.payside > #dlvwho { grid-area: who; }
.payside > .totals { grid-area: tot; align-self: stretch; align-content: center; }
.payside > .savebar { grid-area: save; align-self: stretch; grid-template-rows: 1fr auto auto; }
.payside > #msg { grid-area: msg; }
.payside > .savenote { grid-area: msg; align-self: end; text-align: start; }
.payside > .recent { grid-area: rec; }
.payside #save { height: 100%; min-height: 64px; }
/* الزبون: البحث يمين وجنبه المندوب وPO والمشروع */
.pcard:first-child { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr); grid-template-areas: "h h" "cust extra" "card extra"; column-gap: 14px; }
.pcard:first-child > .stephead { grid-area: h; }
.pcard:first-child > .custfld { grid-area: cust; }
.pcard:first-child > .ccard { grid-area: card; }
.pcard:first-child > .extra-fields { grid-area: extra; border-top: 0; padding-top: 0; align-self: start; }
@media (max-width: 1150px) {
  .payside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h h" "tabs tot" "pay tot" "ex save" "who save" "msg rec"; }
  .pcard:first-child { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "cust" "card" "extra"; }
}
@media (max-width: 640px) {
  .payside { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "tot" "tabs" "pay" "ex" "who" "save" "msg" "rec"; }
}
/* شريط الدفع ثابت أسفل الشاشة (دايماً ظاهر وأنت تضيف أصناف) */
.payside { position: sticky; bottom: 0; z-index: 4; box-shadow: 0 -6px 18px rgba(20, 22, 60, .10); padding-block: 10px 12px; }
.payside > .stephead { display: none; }
.payside .totals { padding: 10px 14px; }
.payside .totals .v { font-size: 30px; }
.payside .totals .r { font-size: 13px; }
.items .tw { min-height: 120px; }
.payside .paytabs button { padding: 9px 6px; font-size: 14.5px; }
@media (max-width: 640px) { .payside { position: static; box-shadow: none; } }
.payside { grid-template-areas: "tabs ex tot save" "pay who tot save" "msg msg msg rec"; }
@media (max-width: 1150px) { .payside { grid-template-areas: "tabs tot" "pay tot" "ex save" "who save" "msg rec"; } }
@media (max-width: 640px) { .payside { grid-template-areas: "tot" "tabs" "pay" "ex" "who" "save" "msg" "rec"; } }
/* الملاحظة تاخذ سطر كامل تحت المندوب وPO والمشروع */
.extra-fields .notefld { grid-column: 1 / -1; }
/* عمود «سعر الوحدة شامل الضريبة» — زر الحذف صار العمود التاسع */
.pos2 .lines-t th:nth-child(8), .pos2 .lines-t td:nth-child(8) { width: auto; }
.pos2 .lines-t th:nth-child(9), .pos2 .lines-t td:nth-child(9) { width: 34px; }
.pos2 .lines-t td input[data-pincl] { width: 86px; }
.pos2 .lines-t th:nth-child(2), .pos2 .lines-t td:nth-child(2) { width: 32%; }
/* شريط الدفع ثابت أسفل الشاشة دايماً (طلب عبدالله «خله ثابت») — والصفحة تترك مكانه تحت عشان ما يغطي الأصناف */
@media (min-width: 641px) {
  .payside { position: fixed; top: auto; bottom: 0; left: 24px; right: 24px; border-radius: 12px 12px 0 0; margin: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pos2 { padding-bottom: calc(var(--paybar-h, 250px) + 12px); }
}
/* الدفع قسم عادي مثل الزبون والأصناف (طلب عبدالله) — مو ثابت ولا لاصق، بعنوانه «3 الدفع» */
.payside, .payside[class] { position: static; top: auto; bottom: auto; left: auto; right: auto; box-shadow: 0 1px 3px rgba(20,22,60,.05);
  border-radius: 12px; padding: 14px 16px; z-index: auto; }
.pos2 { padding-bottom: 0; }
.payside > .stephead { display: flex; }
.payside { grid-template-areas: "h h h h" "tabs ex tot save" "pay who tot save" "msg msg msg rec"; }
@media (max-width: 1150px) { .payside { grid-template-areas: "h h" "tabs tot" "pay tot" "ex save" "who save" "msg rec"; } }
@media (max-width: 640px) { .payside { grid-template-areas: "h" "tot" "tabs" "pay" "ex" "who" "save" "msg" "rec"; } }
@media (min-width: 641px) { .payside { position: static; padding-bottom: 14px; } .pos2 { padding-bottom: 0; } }
.hint .first { color: var(--muted); font-weight: 500; }

/* ================= الرئيسية بأسلوب أبل (body.ios) — هدوء ومساحة ولون واحد ================= */
body.ios { --ios-bg: #f2f2f7; --ios-card: #ffffff; --ios-ink: #1c1c1e; --ios-sub: #8e8e93; --ios-sep: rgba(60,60,67,.12);
  --ios-accent: #212250; --ios-bar: #d1d1d6; --ios-tint: #2f5bd3;
  background: var(--ios-bg); color: var(--ios-ink); font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { body.ios { --ios-bg: #000000; --ios-card: #1c1c1e; --ios-ink: #f2f2f7; --ios-sub: #98989f;
  --ios-sep: rgba(84,84,88,.6); --ios-accent: #8fa2ff; --ios-bar: #3a3a3c; --ios-tint: #8fa9ff; } }
body.ios .top { background: color-mix(in srgb, var(--ios-card) 78%, transparent); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ios-sep); }
body.ios .stripe { height: 3px; opacity: .9; }
body.ios .wrap { max-width: 1240px; margin: 0 auto; padding: 22px 24px 60px; display: grid; gap: 22px; }
body.ios .hello h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.2px; color: var(--ios-ink); }
body.ios .hello p { margin: 2px 0 0; font-size: 15px; color: var(--ios-sub); }
/* الأزرار الكبيرة */
.bigacts2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bigacts2 a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px; background: var(--ios-card);
  color: var(--ios-ink); text-decoration: none; font-size: 17px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease; }
.bigacts2 a .bi { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--ios-bg); color: var(--ios-accent); flex: none; }
.bigacts2 a .bi svg { width: 24px; height: 24px; }
.bigacts2 a.pri { background: var(--ios-accent); color: #fff; }
.bigacts2 a.pri .bi { background: rgba(255,255,255,.16); color: #fff; }
@media (prefers-color-scheme: dark) { .bigacts2 a.pri { color: #0b0c1f; } .bigacts2 a.pri .bi { color: #0b0c1f; background: rgba(0,0,0,.12); } }
.bigacts2 a:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 14px 30px rgba(0,0,0,.07); }
/* الويدجت */
.widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.widget { background: var(--ios-card); border-radius: 22px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); min-width: 0; }
.widget.wide { grid-column: span 2; }
.widget h2 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ios-sub); letter-spacing: .2px; }
.widget .big { margin: 2px 0; font-size: 34px; font-weight: 700; color: var(--ios-ink); line-height: 1.15; }
.widget .big small { font-size: 15px; font-weight: 500; color: var(--ios-sub); }
.widget .wsub { margin: 4px 0 0; font-size: 13.5px; color: var(--ios-sub); }
/* قوائم مثل إعدادات الآيفون */
.glist { list-style: none; margin: 0; padding: 0; }
.glist li { border-bottom: 1px solid var(--ios-sep); }
.glist li:last-child { border-bottom: 0; }
.glist li > a, .glist li > span, .glist li.off { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; color: var(--ios-ink); text-decoration: none; font-size: 15px; }
.glist li.off { color: var(--ios-sub); }
.glist li small { color: var(--ios-sub); font-size: 12.5px; }
.glist li a i { font-style: normal; color: var(--ios-sub); font-size: 20px; line-height: 1; }
.glist li a em { font-style: normal; color: var(--ios-tint); font-size: 13.5px; font-weight: 600; }
.glist li a:hover { color: var(--ios-tint); }
.glist.flat li > a, .glist.flat li > span { padding: 9px 0; }
/* شريط الأقسام (Segmented Control) */
.appsbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--ios-bar); border-radius: 11px; padding: 3px; gap: 2px; }
@media (prefers-color-scheme: dark) { .seg { background: #2c2c2e; } }
.seg button { font: inherit; font-size: 14.5px; font-weight: 600; border: 0; background: none; color: var(--ios-ink); padding: 7px 18px; border-radius: 9px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--ios-card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.btn.pill { border-radius: 999px; padding: 8px 16px; font-weight: 600; }
/* الأقسام مثل مكتبة التطبيقات */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 12px; }
.app { font: inherit; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 8px; color: var(--ios-ink); padding: 4px; border-radius: 16px; }
.app span:last-child { font-size: 13.5px; font-weight: 500; text-align: center; line-height: 1.35; }
.app:hover .ico { transform: scale(1.06); }
.ico { --c: #495057; width: 64px; height: 64px; border-radius: 16px; display: inline-grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 100%); box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform .15s ease; }
.ico svg { width: 30px; height: 30px; }
/* كل القوائم: مجموعات مثل الإعدادات */
.glists { columns: 3 300px; column-gap: 14px; }
.gcard { break-inside: avoid; background: var(--ios-card); border-radius: 18px; padding: 12px 16px 4px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gcard h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.gcard h3 .ico { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
.gcard h3 .ico svg { width: 18px; height: 18px; }
/* النافذة (Sheet) لما تضغط قسم */
.sheet { border: 0; border-radius: 22px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--ios-card); color: var(--ios-ink); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.sheet::backdrop { background: rgba(0,0,0,.28); backdrop-filter: blur(6px); }
.sheethd { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.sheethd .ico { width: 44px; height: 44px; border-radius: 12px; }
.sheethd .ico svg { width: 24px; height: 24px; }
.sheethd h3 { margin: 0; font-size: 19px; font-weight: 700; flex: 1; }
.sheethd .x { font: inherit; border: 0; background: var(--ios-bg); color: var(--ios-sub); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.sheet .glist { padding: 4px 18px 14px; max-height: 60vh; overflow: auto; }
@media (max-width: 1000px) { .bigacts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .widgets { grid-template-columns: minmax(0, 1fr); } .widget.wide { grid-column: auto; } body.ios .hello h1 { font-size: 28px; }
  .apps { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .ico { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .bigacts2 a, .ico { transition: none; } }
@media (prefers-color-scheme: dark) { body.ios .btn.pill:not(.pri) { background: var(--ios-card); color: var(--ios-ink); border-color: var(--ios-sep); } }
/* الرئيسية بعرض الشاشة كاملة (طلب عبدالله) */
body.ios .wrap { max-width: none; margin: 0; padding: 22px 32px 40px; }
body.ios .apps { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.widget.w3 { grid-column: span 3; }
@media (max-width: 1000px) { .widget.w3 { grid-column: span 2; } }
@media (max-width: 560px) { .widget.w3 { grid-column: auto; } }
/* الشاشات الكبيرة (كمبيوتر الفرع): كل شي أكبر عشان يعبي الشاشة */
@media (min-width: 1500px) {
  body.ios .wrap { gap: 28px; padding: 28px 40px 40px; }
  body.ios .hello h1 { font-size: 42px; }
  body.ios .hello p { font-size: 17px; }
  .bigacts2 { gap: 18px; }
  .bigacts2 a { padding: 26px 26px; font-size: 20px; border-radius: 26px; }
  .bigacts2 a .bi { width: 56px; height: 56px; border-radius: 16px; }
  .bigacts2 a .bi svg { width: 30px; height: 30px; }
  .widgets { gap: 18px; }
  .widget { padding: 22px 26px; border-radius: 26px; }
  .widget h2 { font-size: 14.5px; }
  .widget .big { font-size: 46px; }
  .glist li > a, .glist li > span { font-size: 16.5px; }
  .seg button { font-size: 16px; padding: 9px 24px; }
  body.ios .apps { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 16px; }
  .ico { width: 84px; height: 84px; border-radius: 21px; }
  .ico svg { width: 40px; height: 40px; }
  .app span:last-child { font-size: 15.5px; }
}
/* مسافة بين الأزرار الكبيرة والويدجت، والمبالغ في «آخر فواتيري» تحت بعض */
body.ios #dash { display: grid; gap: 14px; }
@media (min-width: 1500px) { body.ios #dash { gap: 18px; } }
.widget .glist.flat li > a { display: grid; grid-template-columns: minmax(0, 1fr) 110px 44px; align-items: center; gap: 12px; }
.widget .glist.flat li > a > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget .glist.flat li > a > .num { text-align: left; font-variant-numeric: tabular-nums; font-weight: 600; }
.widget .glist.flat li > a > em { text-align: left; }

/* ================= أسلوب أبل لكل شاشات نقطة البيع (body.ios من common.js) =================
   خلفية iOS رمادية، بطاقات بيضاء بزوايا 18، أزرار وخانات ناعمة، جداول بخطوط شعرية، والهيدر الملوّن صار عنوان كبير
   بأيقونة ملونة (اللون يميّز المستند مثل قبل). للاسترجاع: git checkout ui-before-apple-2026-10-19 -- static */
body.ios { --bg: var(--ios-bg); --panel: var(--ios-card); --line: rgba(60,60,67,.14); --wash: #f2f2f7; --muted: #6e6e73; --label: #3a3a3c;
  --f-body: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; --f-num: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { body.ios { --line: rgba(84,84,88,.6); --wash: #2c2c2e; --muted: #98989f; --label: #d1d1d6; --ink: #f2f2f7;
  --blue-wash: rgba(100,140,255,.16); --navy-ink: #fff; color-scheme: dark; } }
body.ios { font-family: var(--f-body); }
body.ios .wrap { padding: 22px 32px 48px; }
/* العنوان الملوّن ← عنوان كبير مع أيقونة ملونة */
body.ios .doc { --dc: #212250; background: transparent; color: var(--ios-ink); padding: 4px 0 6px; margin-bottom: 14px; gap: 14px; }
body.ios .doc .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; flex: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--dc) 75%, #fff), var(--dc)); box-shadow: 0 4px 12px color-mix(in srgb, var(--dc) 28%, transparent); }
body.ios .doc h1 { color: var(--ios-ink); font-size: 28px; font-weight: 700; letter-spacing: -.2px; }
body.ios .doc p { color: var(--ios-sub); opacity: 1; font-size: 14px; }
body.ios .doc .who { background: var(--ios-card); color: var(--ios-ink); border: 1px solid var(--line); font-weight: 600; }
body.ios .doc-sale { --dc: #212250; } body.ios .doc-return { --dc: #c8102e; } body.ios .doc-purchase { --dc: #4265B9; } body.ios .doc-receipt { --dc: #1e7d4f; }
body.ios .doc-transfer { --dc: #b26a00; } body.ios .doc-damage { --dc: #6b4e3d; } body.ios .doc-count { --dc: #5b3f8f; } body.ios .doc-shift { --dc: #0f5a6b; }
body.ios .doc-acc { --dc: #2d2f6b; } body.ios .doc-reg { --dc: #3c4257; } body.ios .doc-sreturn { --dc: #a3245f; } body.ios .doc-exchange { --dc: #c2410c; }
body.ios .doc-quote { --dc: #0e7490; } body.ios .doc-order { --dc: #4d7c0f; } body.ios .doc-report { --dc: #334155; } body.ios .doc-product { --dc: #7c2d12; }
body.ios .doc-delivery { --dc: #0f766e; } body.ios .doc-stock { --dc: #155e75; }
/* البطاقات */
body.ios .step, body.ios .waiting, body.ios .tile, body.ios .pcard { background: var(--ios-card); border: 0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); }
body.ios .step { padding: 18px 20px; }
body.ios .stephead h2, body.ios .waiting h2 { color: var(--ios-ink); font-weight: 700; }
body.ios .stephead .sn { background: var(--ios-accent); color: #fff; }
body.ios .box { background: var(--wash); border: 0; border-radius: 14px; }
/* الخانات */
body.ios .fld > span { color: var(--label); font-weight: 600; font-size: 13.5px; }
body.ios .fld input, body.ios .fld select, body.ios .fld textarea, body.ios .custrow input { border: 1px solid var(--line); border-radius: 11px; background: var(--ios-card); padding: 10px 12px; }
body.ios .fld input:focus, body.ios .fld select:focus, body.ios .fld textarea:focus, body.ios .custrow input:focus { border-color: var(--ios-tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-tint) 18%, transparent); }
body.ios .search { border: 1px solid var(--line); border-radius: 14px; background: var(--ios-card); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body.ios .search:focus-within { border-color: var(--ios-tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ios-tint) 18%, transparent); }
/* الأزرار */
body.ios .btn { border-radius: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--ios-card); }
body.ios .btn.pri { background: var(--ios-accent); border-color: var(--ios-accent); color: #fff; }
@media (prefers-color-scheme: dark) { body.ios .btn.pri { color: #0b0c1f; } }
body.ios .btn.big { border-radius: 16px; }
body.ios .btn:hover:not(:disabled) { border-color: var(--ios-tint); }
/* الجداول: خطوط شعرية، رأس رمادي هادي */
body.ios .lines-t th { background: transparent; color: var(--ios-sub); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--line); }
body.ios .lines-t td { border-bottom: 1px solid var(--line); }
body.ios .lines-t tbody tr:nth-child(even) td { background: transparent; }
body.ios .lines-t tbody tr:hover td { background: color-mix(in srgb, var(--ios-tint) 6%, transparent); }
body.ios .lines-t tfoot td { background: var(--wash); border-top: 1px solid var(--line); }
body.ios .lines-t input { border-radius: 9px; border: 1px solid var(--line); background: var(--wash); }
body.ios .tw:has(> .reg) { border: 0; border-radius: 16px; background: var(--ios-card); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body.ios .reg th:last-child { background: var(--ios-card); }
body.ios .reg td:last-child { background: var(--ios-card); box-shadow: none; }
/* التبويبات ← شريط اختيار ناعم */
body.ios .tabsbar { border-bottom: 0; background: var(--ios-bar); border-radius: 12px; padding: 3px; gap: 2px; display: inline-flex; }
@media (prefers-color-scheme: dark) { body.ios .tabsbar { background: #2c2c2e; } }
body.ios .tabsbar button, body.ios .tabsbar a { border-bottom: 0; border-radius: 9px; padding: 7px 16px; color: var(--ios-ink); font-weight: 600; }
body.ios .tabsbar button[aria-selected="true"], body.ios .tabsbar a[aria-selected="true"] { background: var(--ios-card); box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--ios-ink); }
/* التنبيهات والشرائح */
body.ios .alert { border-radius: 14px; }
body.ios .err, body.ios .warnbox { border-radius: 11px; }
body.ios .chip { font-weight: 600; }
/* طريقة الدفع في شاشة البيع */
body.ios .payside .paytabs button { border-radius: 12px; border: 1px solid var(--line); background: var(--ios-card); color: var(--ios-ink); }
body.ios .payside .paytabs button[aria-pressed="true"] { background: var(--ios-accent); border-color: var(--ios-accent); color: #fff; }
body.ios .payside .totals { background: var(--ios-accent); border-radius: 16px; }
body.ios .payside .paybox { background: var(--wash); border: 0; border-radius: 14px; }
body.ios .dlg { border: 0; border-radius: 22px; background: var(--ios-card); }
/* الطباعة من الشاشات: بدون ظلال */
@media print { body.ios .step, body.ios .waiting, body.ios .tile, body.ios .pcard { box-shadow: none; } }
/* ترتيب الشبكة بمسافات للرئيسية بس — باقي الشاشات ترتيبها مثل ما هو */
body.ios .wrap { display: block; }
body.ios .wrap:has(> .hello) { display: grid; }
body.ios .tabsbar { margin-bottom: 14px; }
/* أزرار طريقة الدفع/الإرجاع في باقي الشاشات (المرتجع، التبديل...) — شريط اختيار ناعم */
body.ios .paytabs:not(.payside .paytabs) { border-bottom: 0; background: var(--ios-bar); border-radius: 12px; padding: 3px; gap: 2px; display: inline-flex; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { body.ios .paytabs:not(.payside .paytabs) { background: #2c2c2e; } }
body.ios .paytabs:not(.payside .paytabs) button { border-bottom: 0; border-radius: 9px; padding: 7px 14px; color: var(--ios-ink); font-weight: 600; }
body.ios .paytabs:not(.payside .paytabs) button[aria-pressed="true"] { background: var(--ios-card); box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--ios-ink); }
/* الصفحة فاتحة دايماً حتى لو الجهاز ليلي (طلب عبدالله القديم) — نلغي ألوان الليل في أسلوب أبل */
@media (prefers-color-scheme: dark) {
  body.ios { --ios-bg: #f2f2f7; --ios-card: #ffffff; --ios-ink: #1c1c1e; --ios-sub: #8e8e93; --ios-sep: rgba(60,60,67,.12);
    --ios-accent: #212250; --ios-bar: #e3e3e8; --ios-tint: #2f5bd3;
    --line: rgba(60,60,67,.14); --wash: #f2f2f7; --muted: #6e6e73; --label: #3a3a3c; --ink: #1a1b33; --blue-wash: #e8edf8; color-scheme: light; }
  body.ios .seg, body.ios .tabsbar, body.ios .paytabs:not(.payside .paytabs) { background: var(--ios-bar); }
  body.ios .btn.pri, .bigacts2 a.pri { color: #fff; }
  .bigacts2 a.pri .bi { color: #fff; background: rgba(255,255,255,.16); }
  body.ios .btn.pill:not(.pri) { background: var(--ios-card); color: var(--ios-ink); }
}

/* قوائم الاختيار داخل الجداول وجنب «أظهر … مدخلات» + خانة «استلمت من العميل» — نفس زوايا الخانات */
body.ios table select, body.ios .note select, body.ios #given { border: 1px solid var(--line); border-radius: 9px; background: var(--ios-card); padding: 6px 10px; }

/* ================= الشريط اللي فوق بأسلوب أبل (طلب عبدالله 2026-10-19) =================
   سطر واحد خفيف: القائمة والشعار والبحث — وعلى الطرف الثاني الوقت والجرس ودائرة الحساب.
   الاسم والوظيفة والفرع والرئيسية والخروج كلها داخل دائرة الحساب (ما انشال شي) */
body.ios .top { flex-wrap: nowrap; gap: 12px; padding: 8px 20px; min-height: 58px; }
body.ios .top img { height: 34px; }
body.ios .sidetog, body.ios .bell { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ios-ink); }
body.ios .sidetog:hover, body.ios .bell:hover, body.ios .bell[aria-expanded="true"] { background: var(--wash); }
body.ios .sidetog svg, body.ios .bell svg { width: 21px; height: 21px; }
body.ios .bell b { top: 2px; inset-inline-end: 0; min-width: 17px; height: 17px; font-size: 10.5px; background: #ff3b30; box-shadow: 0 0 0 2px var(--ios-card); }
body.ios .kbtn { border: 0; background: rgba(118,118,128,.12); color: var(--ios-sub); border-radius: 11px; padding: 8px 12px; min-width: 300px; gap: 8px; }
body.ios .kbtn:hover { background: rgba(118,118,128,.18); color: var(--ios-ink); }
body.ios .kbtn svg { width: 17px; height: 17px; flex: none; }
body.ios .kbtn kbd { border: 0; background: var(--ios-card); }
body.ios .topend { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
body.ios .top .clock { color: var(--ios-sub); font-size: 13px; gap: 8px; margin-inline-end: 6px; white-space: nowrap; }
body.ios .top .clock .num:last-child { color: var(--ios-ink); font-weight: 600; }
body.ios .bellbox, body.ios .acctbox { inset-inline-start: auto; inset-inline-end: 0; border: 0; border-radius: 16px;
  background: var(--ios-card); box-shadow: 0 0 0 1px var(--ios-sep), 0 18px 50px rgba(0,0,0,.16); }
/* دائرة الحساب */
body.ios .acct { position: relative; }
body.ios .avatar { font: inherit; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #4b4d8a, #212250); }
body.ios .avatar:hover, body.ios .avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, #212250 22%, transparent); }
body.ios .avatar.big { width: 46px; height: 46px; font-size: 20px; cursor: default; }
body.ios .acctbox { position: absolute; top: calc(100% + 10px); width: 280px; max-width: 88vw; z-index: 30; padding: 8px; display: grid; gap: 2px; }
body.ios .acctme { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--ios-sep); margin-bottom: 4px; }
body.ios .acctme b { display: block; font-size: 15.5px; color: var(--ios-ink); }
body.ios .acctme small { color: var(--ios-sub); font-size: 13px; }
body.ios .acctrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; font-size: 14px; color: var(--ios-sub); }
body.ios .acctrow b { color: var(--ios-ink); }
body.ios .acctrow .branch { font: inherit; font-weight: 600; color: var(--ios-ink); border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; background: var(--ios-card); max-width: 170px; }
body.ios .acctlink { font: inherit; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; border: 0; background: none;
  color: var(--ios-ink); text-decoration: none; font-size: 14.5px; font-weight: 500; cursor: pointer; text-align: start; width: 100%; }
body.ios .acctlink:hover { background: var(--wash); }
body.ios .acctlink svg { width: 19px; height: 19px; color: var(--ios-sub); }
body.ios .acctlink.out, body.ios .acctlink.out svg { color: #ff3b30; }
/* عناوين الشاشات: أيقونة أبل جنب العنوان */
body.ios .doc .ic { color: #fff; }
body.ios .doc .ic svg { width: 25px; height: 25px; }
body.ios .poshead h1, body.ios .ihead h1 { display: flex; align-items: center; gap: 12px; color: var(--ios-ink); }
body.ios .poshead h1 .ico, body.ios .ihead h1 .ico { width: 42px; height: 42px; border-radius: 12px; }
body.ios .poshead h1 .ico svg, body.ios .ihead h1 .ico svg { width: 23px; height: 23px; }
@media (max-width: 900px) { body.ios .top .clock { display: none; } body.ios .kbtn { min-width: 0; } }
@media (max-width: 560px) { body.ios .top { padding: 8px 12px; gap: 6px; } body.ios .kbtn span, body.ios .kbtn kbd { display: none; }
  body.ios .kbtn { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; } }

/* ================= رسائل الحفظ ونوافذ التأكيد مثل الآيفون (طلب عبدالله 2026-10-19) ================= */
body.ios .toast { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--ios-card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: var(--ios-ink);
  border-radius: 16px; padding: 11px 18px 11px 14px; font-weight: 600; font-size: 15px; max-width: min(520px, calc(100vw - 32px));
  box-shadow: 0 0 0 1px var(--ios-sep), 0 14px 40px rgba(0,0,0,.18); z-index: 60; opacity: 0; transform: translate(-50%, 16px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.9,.3,1.2); }
body.ios .toast.on { opacity: 1; transform: translate(-50%, 0); }
body.ios .toast .ti { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800; flex: none; }
body.ios .toast .ti.ok { background: #34c759; } body.ios .toast .ti.warn { background: #ff9500; }
.iosalert { border: 0; padding: 0; border-radius: 16px; width: min(300px, calc(100vw - 48px)); background: color-mix(in srgb, #fff 94%, transparent);
  color: #1c1c1e; box-shadow: 0 20px 60px rgba(0,0,0,.28); font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; overflow: hidden; }
.iosalert::backdrop { background: rgba(0,0,0,.32); }
.iosalert[open] { animation: iapop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes iapop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.iosalert p { margin: 0; padding: 20px 18px 16px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.6; }
.iosalert .ia-in { display: block; width: calc(100% - 32px); margin: 0 16px 16px; font: inherit; font-size: 15px; border: 1px solid rgba(60,60,67,.25);
  border-radius: 9px; padding: 8px 10px; background: #fff; box-sizing: border-box; }
.iosalert .ia-btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(60,60,67,.2); }
.iosalert .ia-btns button { font: inherit; font-size: 16px; border: 0; background: none; padding: 12px; cursor: pointer; color: #007aff; }
.iosalert .ia-btns button + button { border-inline-start: 1px solid rgba(60,60,67,.2); }
.iosalert .ia-ok { font-weight: 700; } .iosalert .ia-ok.danger { color: #ff3b30; }
.iosalert .ia-btns button:hover { background: rgba(0,0,0,.04); }
@media (prefers-reduced-motion: reduce) { body.ios .toast, .iosalert[open] { transition: none; animation: none; } }

/* ================= لمسات أبل الأخيرة (طلب عبدالله 2026-10-19) ================= */
/* سطر الأقسام: سطر واحد ينسحب يمين ويسار (كل الأقسام موجودة — ما انشال شي) */
body.ios .tabsbar { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
body.ios .tabsbar::-webkit-scrollbar { display: none; }
body.ios .tabsbar button, body.ios .tabsbar a { white-space: nowrap; flex: none; scroll-snap-align: center; }
/* الجداول: صفوف أوسع، أرقام مصفوفة وأوضح، وخط فاصل خفيف */
body.ios .lines-t th { background: var(--ios-card); padding: 11px 12px; letter-spacing: .1px; }
body.ios .lines-t td { padding: 12px; border-bottom: 1px solid var(--ios-sep); }
body.ios .lines-t tbody tr:last-child td { border-bottom: 0; }
body.ios .lines-t td.num, body.ios .lines-t td .num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ios-ink); }
body.ios .lines-t tfoot td { font-weight: 700; }
/* الأزرار: الزر الرئيسي بلون واضح، والباقي فاتح بدون حدود */
body.ios .btn:not(.pri):not(.ghost):not(.ok):not(.no) { border-color: transparent; background: rgba(118,118,128,.12); color: var(--ios-ink); }
body.ios .btn:not(.pri):not(.ghost):not(.ok):not(.no):hover:not(:disabled) { border-color: transparent; background: rgba(118,118,128,.2); }
body.ios .btn.pri { box-shadow: 0 4px 14px color-mix(in srgb, var(--ios-accent) 28%, transparent); }
body.ios .btn.pri:hover:not(:disabled) { filter: brightness(1.12); }
/* شريط الجوال تحت */
.tabbar { display: none; }
@media (max-width: 760px) {
  body.ios .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--ios-card) 85%, transparent);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--ios-sep); }
  body.ios .tabbar a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--ios-sub); font-size: 11px; font-weight: 600; padding: 2px 0; }
  body.ios .tabbar a svg { width: 25px; height: 25px; }
  body.ios .tabbar a[aria-current="page"] { color: var(--ios-tint); }
  body.ios.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.ios.has-tabbar .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .tabbar { display: none !important; } }
/* عمود الإجراءات الثابت في السجلات: خلفيته صلبة حتى وقت مرور الماوس (عشان ما يبان الكلام من وراه) */
body.ios .reg tbody tr:hover td:last-child { background: color-mix(in srgb, var(--ios-tint) 6%, var(--ios-card)); }
/* سطر الأقسام لما يكون فيه أقسام زيادة: تلاشي خفيف على الطرف عشان يبان إنه ينسحب */
body.ios .tabsbar.more { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 48px); mask-image: linear-gradient(to left, transparent 0, #000 48px); }
body.ios .reg tbody tr:nth-child(n) td:last-child { background: var(--ios-card); }
body.ios .reg tbody tr:nth-child(n):hover td:last-child { background: color-mix(in srgb, var(--ios-tint) 6%, var(--ios-card)); }

/* ================= طباعة الشاشات (السجلات والتقارير) بأسلوب أبل — طلب عبدالله 2026-10-19 =================
   الجدول كامل بعرض الورقة (بدون سحب ولا تقطيع)، الورقة بالعرض للجداول، بدون عمود الإجراءات وأسهم الترتيب */
.printmeta { display: none; }
@page wide { size: A4 landscape; margin: 10mm; }
@media print {
  body.ios { background: #fff !important; padding: 0 !important; }
  body.ios .wrap { padding: 0 !important; max-width: none; }
  html:has(.reg), body.ios:has(.reg) { page: wide; }   /* على الصفحة كلها (لو على جزء منها تطلع ورقة فاضية بالطول قبله) */
  body.ios .doc { margin-bottom: 4px; padding: 0; }
  body.ios .doc h1 { font-size: 20px; }
  body.ios .doc .ic { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; width: 36px; height: 36px; border-radius: 10px; }
  body.ios .doc .ic svg { width: 20px; height: 20px; }
  .printmeta { display: block; font-size: 10.5px; color: #6e6e73; margin: 0 0 8px; }
  body.ios .step { box-shadow: none !important; border: 0 !important; padding: 0 !important; background: #fff !important; }
  label.note:has(#size), .toast, .iosalert, .tabbar { display: none !important; }
  body.ios .tw, body.ios .tw:has(> .reg) { max-height: none !important; overflow: visible !important; box-shadow: none !important; border-radius: 0 !important; border: 0 !important; }
  body.ios .reg { width: 100% !important; min-width: 0 !important; font-size: 10px; border-collapse: collapse; }
  body.ios .reg th, body.ios .reg td { position: static !important; box-shadow: none !important; padding: 5px 6px !important; white-space: normal; border-bottom: .5pt solid #d1d1d6; background: #fff !important; }
  body.ios .reg td.num, body.ios .reg th.num { white-space: nowrap; }
  body.ios .reg thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #f2f2f7 !important; color: #3a3a3c; font-weight: 700; }
  body.ios .reg thead { display: table-header-group; }      /* رأس الجدول يتكرر في كل ورقة */
  body.ios .reg tr { break-inside: avoid; }
  body.ios .reg tfoot td { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #f2f2f7 !important; font-weight: 800; border-top: 1pt solid #8e8e93; }
  body.ios .reg .acts-c, body.ios .reg .sa { display: none !important; }
}

/* المخزون: قيمة المخزون بالطرق الثلاث (للمحاسب) */
.vcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.vcard { background: var(--wash); border-radius: 14px; padding: 12px 16px; display: grid; gap: 2px; }
.vcard span { color: var(--muted); font-size: 13px; font-weight: 600; }
.vcard b { font-size: 22px; color: var(--ink); }
.vcard small { font-size: 12.5px; color: var(--muted); }
.vnote { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }