/* نقطة البيع — ترتيب 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; } }