/* فواتيري — فوق app.css (نفس ستايل القطة). القسم الأول للتطبيق، والثاني للفاتورة نفسها (ثابتة فاتحة دايماً). */

/* لون فواتيري الأزرق مكان أحمر القطة (--red يمشي على الزر العائم والتحديد والقائمة وغير المدفوع).
   الأحمر يبقى بس لنصوص الأخطاء وزر الحذف (--danger)؛ الرسائل المنبثقة بالأزرق. */
:root {
  --red: #5471FD;
  --red-hover: #3F5BE6;
  --badge-red-bg: #EAEEFF;
  --badge-red-ink: #3A52D9;
  --danger: #E00000;
  --danger-hover: #B80000;
  --danger-bg: #FFE5E5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --red: #6F88FF;
    --red-hover: #8A9EFF;
    --badge-red-bg: rgba(84, 113, 253, .22);
    --badge-red-ink: #A9B8FF;
    --danger: #FF5C5C;
    --danger-hover: #FF7A7A;
    --danger-bg: rgba(255, 0, 0, .18);
  }
}
.error, .danger-text { color: var(--danger); }
/* الرسائل المنبثقة (تنبيه الخطأ ونوافذ التأكيد) بلون فواتيري */
.toast.err { background: var(--red); color: #FFFFFF; }
.btn.danger { color: var(--danger); }
.btn.danger-fill { background: var(--red); color: #FFFFFF; }
.btn.danger-fill:hover { background: var(--red-hover); }
.dialog-icon { background: var(--badge-red-bg); color: var(--red); box-shadow: 0 0 0 8px color-mix(in srgb, var(--badge-red-bg) 45%, transparent); }
.drawer-logout:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

/* ── التطبيق ─────────────────────────────────────────── */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sync-line { display: flex; align-items: center; gap: var(--s2); }
.sync-line .grow { flex: 1; min-width: 0; }
.spin svg { animation: spin .8s linear infinite; }

.item-row { align-items: center; }
.item-row.pick { cursor: pointer; }
.item-row input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.item-row .amt { min-width: 4.5em; text-align: end; }
.item-row.off { opacity: .5; }
.item-row .tags { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: 2px; }

/* الرسمة خطوطها سوداء: في الوضع الداكن تنعرض على بطاقة بيضاء */
.hero-banner { border-radius: var(--r-large); }
@media (prefers-color-scheme: dark) { .hero-banner { background: #FFFFFF; } }

.drawer-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: none; }

.pill-btn { border: 0; background: none; padding: 0; display: inline-flex; cursor: pointer; }
.pill-btn .pill { box-shadow: inset 0 0 0 1px currentColor; }
.pill-btn:disabled { cursor: default; }

.filter-bar { display: flex; gap: var(--s2); }

/* محرّر بنود الفاتورة */
.line-edit { display: grid; grid-template-columns: 1fr 6.5em auto; gap: var(--s2); align-items: center; padding: var(--s2) 0; }
.line-edit + .line-edit { border-top: 1px solid var(--line); }
.line-edit .input { height: 40px; font-size: 15px; }
.line-edit .input.amount { text-align: center; direction: ltr; font-variant-numeric: tabular-nums; }
/* بند يدوي لعميل جديد: البند فوق، وتحته العدد × السعر = المبلغ والحالة */
.manual-item { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; }
.manual-item + .manual-item { border-top: 1px solid var(--line); }
.mi-top { display: flex; align-items: center; gap: var(--s2); }
.mi-top .input { height: 40px; font-size: 15px; }
.mi-calc { display: flex; align-items: flex-end; gap: var(--s2); flex-wrap: wrap; }
.mi-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.mi-field .input { width: 4.5em; height: 36px; font-size: 15px; text-align: center; direction: ltr; }
.mi-sum b { height: 36px; display: flex; align-items: center; font-size: 15px; color: var(--ink); white-space: nowrap; }
.mi-op { color: var(--muted); padding-bottom: 8px; }
.mi-status { margin-inline-start: auto; min-width: 6.5em; justify-content: center; }
.lines-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--s3); border-top: 2px solid var(--ink); font-weight: 700; font-size: 18px; }

.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.actions .btn { height: 44px; }
.actions .wide { grid-column: 1 / -1; }

/* رفع الصور في الإعدادات */
.asset-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.asset-row + .asset-row { border-top: 1px solid var(--line); }
.asset-thumb {
  width: 72px; height: 56px; flex: none; border-radius: var(--r-modal); background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden; color: #9e9e9e;
}
.asset-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.asset-row input[type=file] { display: none; }


/* ── معاينة الفاتورة ─────────────────────────────────── */
.doc-frame { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-modal); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); background: #fff; }
.doc-scale { width: 794px; transform-origin: top right; position: absolute; top: 0; right: 0; }
.doc-offscreen { position: fixed; top: 0; left: -10000px; width: 794px; pointer-events: none; }
.print-area { display: none; }

/* ── الفاتورة (A4 = 794×1123) ────────────────────────── */
.inv-doc {
  --d-ink: #3D3D3D; --d-text: #333333; --d-muted: #7A7A7A; --d-line: #DCDCDC; --d-line-strong: #C9C9C9;
  width: 794px; min-height: 1123px; background: #FFFFFF; color: var(--d-text);
  padding: 66px 56px 56px; box-sizing: border-box;
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif; font-size: 13px; line-height: 1.6;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.inv-doc .num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: normal; }
.inv-logo { height: 92px; display: flex; justify-content: flex-start; align-items: flex-start; }
.inv-logo img { max-height: 92px; max-width: 260px; object-fit: contain; }
.inv-logo-empty { height: 72px; padding: 0 20px; display: grid; place-items: center; border: 1.5px dashed #C8C8C8; color: #9E9E9E; font-size: 16px; font-weight: 600; }

.inv-meta { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 14px; color: var(--d-muted); font-size: 13.5px; }

.inv-head { display: flex; height: 70px; }
.inv-title {
  width: 47%; background: var(--d-ink); color: #FFFFFF;
  display: flex; align-items: center; gap: 12px; padding: 0 30px; font-size: 27px; font-weight: 500;
}
.inv-title small { font-size: 13px; font-weight: 400; color: #C4C4C4; margin-inline-start: auto; }
.inv-client {
  flex: 1; border: 1.5px solid #5A5A5A; border-right: 0; border-bottom-width: 3px;
  display: flex; flex-direction: column; justify-content: center; padding: 0 28px; color: #4A4A4A; font-size: 14px; line-height: 1.5;
}

.inv-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.inv-table th, .inv-table td { padding: 0; text-align: right; vertical-align: middle; }
.inv-table th { height: 52px; font-size: 14px; font-weight: 500; color: var(--d-text); }
.inv-table th.d { border-bottom: 2.5px solid var(--d-ink); width: 47%; }
.inv-table th.c { border-bottom: 1.5px solid #A8A8A8; }
.inv-table td { height: 46px; border-bottom: 1px solid var(--d-line); font-size: 13px; }
.inv-table td.d { position: relative; padding-left: 12px; }
.inv-table td.d::after { content: ''; position: absolute; right: 0; bottom: -1px; width: 88%; height: 2.5px; background: var(--d-line-strong); }
.inv-table .c { text-align: left; padding-left: 44px; }
.inv-table tr.inv-break td { border: 0; }
.inv-table tr.inv-break td::after { display: none; }
.inv-cost { display: inline-block; min-width: 96px; text-align: center; white-space: nowrap; }

.inv-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 22px; }
.inv-pay { display: flex; align-items: flex-start; gap: 18px; padding-top: 24px; }
.inv-pay-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--d-muted); }
.inv-pay-text > b { color: var(--d-text); font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.inv-pay-text b { color: var(--d-text); font-weight: 600; }
.inv-qr { width: 112px; height: 112px; object-fit: contain; border: 1px solid #EBEBEB; border-radius: 6px; padding: 3px; background: #fff; }

.inv-sum { width: 224px; display: flex; flex-direction: column; align-items: center; margin-left: 20px; }
.inv-total { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 6px; border-bottom: 1.5px solid #5A5A5A; font-size: 14px; color: var(--d-text); }
.inv-total > span:first-child { padding-right: 22px; font-weight: 500; }
.inv-total .inv-table tr.inv-break td { border: 0; }
.inv-table tr.inv-break td::after { display: none; }
.inv-cost { min-width: 0; font-size: 14.5px; }
.inv-sign { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 22px; font-size: 11.5px; color: var(--d-text); }
.inv-sign img { max-width: 190px; max-height: 72px; object-fit: contain; margin: 2px 0; }

/* ── الطباعة: الفاتورة بس، بمقاسها ───────────────────── */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block !important; }
  .print-area .inv-doc { min-height: 0; }
  .inv-table tr, .inv-foot { break-inside: avoid; }
}