/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/pos-split.css
   Session: J-167 (D43 + D44 · D46)
   LastModified: 2026-10-04
   Module: M12 POS — split · move · merge windows · bills tab · tables map marks · discounts
   ============================================================
   🆕 NEW FILE — J-167 (D43 + D44)
   النوافذ خارج .pos-shell (تُرسم شقيقةً للصفحة) فتأخذ ألوان الثيم العامّة (--card-bg · --t1 …)
   مع ألوانٍ دلاليّة ثابتة من النموذج المعتمد: التمييز البرتقاليّ للمختار، والأخضر للمدفوع،
   والأزرق للطلب الواحد على عدّة طاولات، ولونٌ لكلّ شخصٍ في التقسيم.
   تبويب الفواتير داخل السلّة الداكنة (.pos-shell). أهداف اللمس ≥ 44px.
   ============================================================ */

.split-modal {
    --sp-accent: #FF8C42;
    --sp-accent-ink: #141a21;
    --sp-ok: #1f6b3a;
    --sp-blue: #2b6cb0;
    --sp-warn: #9a3412;
    --sp-soft: color-mix(in srgb, var(--t1) 6%, var(--card-bg));
    padding: 0;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-modal.split-wide { max-width: 1040px; width: calc(100% - 32px); }

.split-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--card-bdr); }
.split-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--t1); }
.split-head p { margin: 4px 0 0; font-size: .85rem; color: var(--t2); }
.split-close { min-width: 44px; min-height: 44px; border: 1px solid var(--card-bdr); background: transparent; color: var(--t1); }
.split-error { margin: 10px 20px 0; padding: 8px 12px; }

.split-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 20px; border-bottom: 1px solid var(--card-bdr); }
.split-spacer { flex: 1 1 auto; }
.split-due { font-size: .9rem; color: var(--t2); }
.split-due b { color: var(--t1); }
.split-link { background: transparent; border: 0; color: var(--sp-blue); font-weight: 700; min-height: 44px; padding: 0 6px; }
.split-link:disabled { opacity: .5; }

.split-seg { display: inline-flex; border: 1px solid var(--t1); }
.split-seg button { min-height: 44px; padding: 0 14px; border: 0; background: var(--card-bg); color: var(--t1); font-weight: 700; }
.split-seg button + button { border-inline-start: 1px solid var(--t1); }
.split-seg button.on { background: var(--t1); color: var(--card-bg); }
.split-seg button:disabled { opacity: .45; }

.split-stepper { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--t1); }
.split-stepper button { width: 44px; height: 44px; border: 1px solid var(--card-bdr); background: var(--card-bg); color: var(--t1); display: grid; place-items: center; }
.split-stepper button:disabled { opacity: .4; }
.split-stepper b { min-width: 2ch; text-align: center; font-size: 1.15rem; }
.split-stepper.big b { font-size: 1.5rem; }
.split-stepper.small button { width: 36px; height: 36px; }

.split-paid-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 20px; background: color-mix(in srgb, var(--sp-ok) 10%, var(--card-bg)); color: var(--t1); font-size: .85rem; }
.split-paid-chip { padding: 2px 8px; background: var(--sp-ok); color: #fff; font-weight: 700; }

.split-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px; color: var(--t1); }
.split-body h3 { font-size: .95rem; font-weight: 800; margin: 0 0 8px; }
.split-hint { font-size: .82rem; color: var(--t2); margin: 8px 0 0; }
.split-info { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; background: var(--sp-soft); font-size: .85rem; color: var(--t2); }
.split-warn { margin-top: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--sp-accent) 14%, var(--card-bg)); color: var(--sp-warn); font-size: .85rem; font-weight: 700; }

.split-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .split-cols { grid-template-columns: 1.15fr 1fr; } }
.split-col-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.split-col-head h3 { margin: 0; }
.split-col-head span { font-size: .8rem; color: var(--t2); }

/* ─── القطع وأرقام من يدفع ─── */
.split-piece { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--card-bdr); background: var(--card-bg); margin-bottom: 8px; }
.split-piece.free { border-color: #f5c9a6; background: color-mix(in srgb, var(--sp-accent) 8%, var(--card-bg)); }
.split-piece .info { display: flex; flex-direction: column; min-width: 0; }
.split-piece .name { font-weight: 700; }
.split-piece .meta { font-size: .8rem; color: var(--t2); }
.split-piece.free .meta { color: var(--sp-warn); }
.split-piece .amt { font-weight: 800; white-space: nowrap; }
.split-piece .chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

.chip { --g: #1f6b3a; min-width: 44px; height: 44px; border: 2px solid var(--g); background: var(--card-bg); color: var(--g); font-weight: 800; }
.chip.on { background: var(--g); color: #fff; }
.g0 { --g: #1f6b3a; } .g1 { --g: #2b6cb0; } .g2 { --g: #c2410c; } .g3 { --g: #7b5ea7; }
.g4 { --g: #0f766e; } .g5 { --g: #9f1239; } .g6 { --g: #854d0e; } .g7 { --g: #334155; }

/* ─── فواتير الأشخاص ─── */
.split-guest { --g: #1f6b3a; border: 1px solid var(--card-bdr); padding: 10px 12px; margin-bottom: 8px; background: var(--card-bg); }
.split-guest .head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.split-guest .badge-n { width: 28px; height: 28px; display: grid; place-items: center; background: var(--g); color: #fff; font-weight: 800; }
.split-guest .label { font-weight: 700; flex: 1 1 auto; }
.split-guest .total { font-weight: 800; font-size: 1.05rem; }
.split-guest .empty { font-size: .85rem; color: var(--t3); }
.split-guest .line { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.split-guest .line b { color: var(--g); }
.split-guest .sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--card-bdr); font-size: .8rem; color: var(--t2); }
.split-guest .sub.est { justify-content: flex-start; color: var(--sp-warn); }
.split-rest { margin-top: 6px; min-height: 40px; width: 100%; border: 1px dashed var(--g); background: transparent; color: var(--g); font-weight: 700; }

/* ─── بالتساوي ─── */
.split-equal .split-stepper { margin-bottom: 12px; flex-wrap: wrap; }
.split-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.split-share { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--card-bdr); background: var(--card-bg); }
.split-share .label { font-size: .85rem; color: var(--t2); font-weight: 700; }
.split-share .total { font-size: 1.25rem; font-weight: 800; }
.split-share .sub { font-size: .78rem; color: var(--t2); }
.split-share .note { font-size: .78rem; color: var(--sp-warn); font-weight: 700; }

/* ─── الذيل ─── */
.split-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; border-top: 1px solid var(--card-bdr); background: var(--sp-soft); }
.split-foot .btn { min-height: 44px; }
.split-status { flex: 1 1 260px; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: .88rem; font-weight: 700; }
.split-status:has(> i) { flex-direction: row; align-items: center; gap: 6px; }
.split-status.ok { color: var(--sp-ok); }
.split-status.warn { color: var(--sp-warn); }
.split-confirm { font-weight: 800; }

/* ─── قائمة الإجراءات ─── */
.split-actions-list { display: flex; flex-direction: column; gap: 8px; }
.split-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--card-bdr); background: var(--card-bg); color: var(--t1); text-align: start; }
.split-action:hover:not(:disabled) { border-color: var(--sp-blue); }
.split-action:disabled { opacity: .55; }
.split-action .ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--sp-soft); font-size: 1.2rem; flex-shrink: 0; }
.split-action .txt { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.split-action .t { font-weight: 800; }
.split-action .d { font-size: .82rem; color: var(--t2); }
.split-action .mark { font-size: .75rem; font-weight: 700; padding: 3px 8px; white-space: nowrap; }
.split-action .mark.direct { background: #e8f5ec; color: #166534; }
.split-action .mark.pin { background: #fff1e6; color: var(--sp-warn); }

/* ─── موافقة المدير برمزه ─── */
.split-approval { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.split-approval-head { display: flex; gap: 10px; align-items: center; }
.split-approval-head > i { width: 44px; height: 44px; display: grid; place-items: center; background: #fff1e6; color: var(--sp-warn); font-size: 1.3rem; }
.split-approval-desc { padding: 8px 12px; background: var(--sp-soft); font-weight: 700; }
.split-approvers { display: flex; flex-wrap: wrap; gap: 6px; }
.split-approver { min-height: 44px; padding: 0 12px; border: 1px solid var(--card-bdr); background: var(--card-bg); color: var(--t1); font-weight: 700; }
.split-approver.active { border-color: var(--t1); background: var(--t1); color: var(--card-bg); }
.split-pin-dots { display: flex; justify-content: center; gap: 10px; padding: 6px 0; }
.split-pin-dot { width: 16px; height: 16px; border: 2px solid var(--t1); background: transparent; border-radius: 50%; }
.split-pin-dot.on { background: var(--t1); }
.split-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.split-key { min-height: 56px; border: 1px solid var(--card-bdr); background: var(--card-bg); color: var(--t1); font-size: 1.4rem; font-weight: 800; }
.split-key.muted { font-size: 1.1rem; color: var(--t2); }
.split-key:disabled { opacity: .45; }
.split-actions { display: flex; justify-content: space-between; gap: 8px; }
.split-actions .btn { min-height: 48px; flex: 1 1 0; }

/* ─── النقل: الأصناف والطاولات ─── */
.split-move-group { margin-bottom: 14px; }
.split-move-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--card-bdr); background: var(--card-bg); margin-bottom: 6px; padding-inline-end: 10px; }
.split-move-row.on { border-color: var(--sp-ok); background: color-mix(in srgb, var(--sp-ok) 9%, var(--card-bg)); }
.split-move-row.locked { background: var(--sp-soft); }
.split-move-row .pick { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 0; background: transparent; color: var(--t1); text-align: start; }
.split-move-row .box { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid #7b8794; flex-shrink: 0; }
.split-move-row.on .box { background: var(--sp-ok); border-color: var(--sp-ok); color: #fff; }
.split-move-row.locked .box { border-color: transparent; color: var(--t3); }
.split-move-row .info { display: flex; flex-direction: column; min-width: 0; }
.split-move-row .name { font-weight: 700; }
.split-move-row .meta { font-size: .78rem; color: var(--t2); }
.split-move-row .amt { font-weight: 700; white-space: nowrap; }
.split-howpay { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.split-howpay .q { font-weight: 800; }

.split-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .split-tables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split-table { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #9aa5b1; background: var(--card-bg); color: var(--t1); }
.split-table .no { font-size: 1.2rem; font-weight: 800; }
.split-table .cap { font-size: .72rem; }
.split-table.busy { background: var(--sp-ok); border-color: #154d29; color: #fff; }
.split-table.on { background: var(--sp-accent); border-color: #c2410c; color: var(--sp-accent-ink); }
.split-table:disabled { background: var(--sp-soft); border-color: var(--card-bdr); color: var(--t3); }

/* ─── الدمج وفصله ─── */
.split-merge-parts { display: flex; flex-direction: column; border: 1px solid var(--card-bdr); }
.split-merge-parts .part { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--card-bdr); background: var(--card-bg); color: var(--t1); text-align: start; }
.split-merge-parts .part:last-child { border-bottom: 0; }
.split-merge-parts .part.total { font-weight: 800; background: color-mix(in srgb, var(--sp-blue) 10%, var(--card-bg)); }
.split-merge-parts .part.pick { min-height: 56px; }
.split-merge-parts .part .grow { flex: 1 1 auto; font-weight: 700; }
.split-merge-parts .part .box { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid #7b8794; flex-shrink: 0; }
.split-merge-parts .part.on .box { background: var(--sp-ok); border-color: var(--sp-ok); color: #fff; }

/* ─── السجلّ ─── */
.split-log-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--card-bdr); }
.split-log-row .at { font-weight: 800; min-width: 3.2rem; color: var(--t2); }
.split-log-row .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.split-log-row .text { font-weight: 700; }
.split-log-row .detail { font-size: .82rem; color: var(--t1); }
.split-log-row .ref { font-size: .8rem; color: var(--t2); }
.split-log-row .approver { font-size: .8rem; color: var(--sp-warn); font-weight: 700; }

/* ─── السلّة الداكنة: تبويبا الفواتير/الأصناف وبطاقات الفواتير ─── */
.pos-shell .cart-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.pos-shell .cart-tabs button { flex: 1 1 0; min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--pos-text-muted); font-weight: 700; }
.pos-shell .cart-tabs button.on { color: #fff; border-bottom-color: var(--pos-accent); }
.pos-shell .bills-panel { display: flex; flex-direction: column; gap: 10px; }
.pos-shell .bill-card { background: var(--pos-surface-darker); border: 1px solid rgba(255,255,255,0.08); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pos-shell .bill-card.next { border-color: var(--pos-accent); }
.pos-shell .bill-card.paid { border-color: var(--pos-primary); }
.pos-shell .bill-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pos-shell .bill-head .title { font-weight: 800; }
.pos-shell .bill-head .state { font-size: .72rem; font-weight: 700; padding: 2px 8px; background: rgba(255,255,255,0.12); color: #fff; }
.pos-shell .bill-card.paid .bill-head .state { background: var(--pos-primary); }
.pos-shell .bill-card .kind { font-size: .8rem; color: var(--pos-text-muted); }
.pos-shell .bill-line { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.pos-shell .bill-line b { color: #FFB27A; }
.pos-shell .bill-sub { display: flex; justify-content: space-between; font-size: .8rem; color: var(--pos-success); }
.pos-shell .bill-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed rgba(255,255,255,0.15); padding-top: 6px; font-size: .8rem; color: var(--pos-text-muted); }
.pos-shell .bill-total .sum { font-size: 1.05rem; font-weight: 800; color: var(--pos-text-on-dark); }
.pos-shell .bill-paid { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .75rem; color: #86d9a8; }
.pos-shell .bill-btn { min-height: 44px; border: 0; font-weight: 800; padding: 0 12px; }
.pos-shell .bill-btn.pay { background: var(--pos-accent); color: #141a21; width: 100%; }
.pos-shell .bill-btn.ghost { background: rgba(255,255,255,0.1); color: var(--pos-text-on-dark); }
.pos-shell .bill-note { font-size: .75rem; color: var(--pos-text-muted); }
.pos-shell .o-line .o-tag.moved { background: rgba(43,108,176,0.55); }
.pos-shell .summary-row.paid { color: #86d9a8; }
.pos-shell .summary-row.due { font-weight: 800; }

/* ─── خريطة الطاولات ─── */
.tile-linked { border-color: #2b6cb0 !important; border-width: 2px !important; }
.tile-linked-key { background: #2b6cb0; color: #fff; }
.tile-paid { background: #FF8C42; color: #141a21; }

/* ─── 🆕 D46: الخصم — ملخّص النوع في نافذة الكاشير · عمود الملاحظة في التقرير ─── */
.discount-summary { border: 1px solid var(--border-color, #dee2e6); border-inline-start: 4px solid #FF8C42; padding: 10px 12px; }
.discount-note-cell { max-width: 18rem; }

@media (prefers-reduced-motion: reduce) {
    .split-modal * { transition: none !important; animation: none !important; }
}