/* pos.css — تصميم الدخول، نقطة البيع، رابط الموظف، والطباعة 80×210 و A4 */

/* ================= عام ================= */
.spacer{flex:1}
.muted{color:var(--muted)}
.neg{color:var(--danger)}
.code{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:2;
  direction:ltr;text-align:left;overflow:auto}
.tips{margin:0;padding-inline-start:18px;line-height:2.1;color:#475569}
.progress{height:8px;border-radius:99px;background:#eef2f7;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}
.copy-row{display:flex;gap:6px;align-items:center}
.link-input{font-size:12px;direction:ltr;text-align:left;max-width:340px}
.btn-block{width:100%;justify-content:center}
.topbar-right{display:flex;align-items:center;gap:14px}
.user-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:6px 10px}
.user-chip b{display:block;font-size:13px}
.user-chip small{display:block;color:var(--muted);font-size:11px}

/* ================= تسجيل الدخول ================= */
.login-body{min-height:100vh;display:grid;place-items:center;font-family:Cairo,system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(79,70,229,.25),transparent),
             linear-gradient(160deg,#0f172a,#1e293b)}
.login-card{width:min(940px,94vw);display:grid;grid-template-columns:1fr 1fr;
  background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(2,6,23,.5)}
.login-side{padding:40px 32px;color:#fff;background:linear-gradient(160deg,var(--primary),var(--accent))}
.login-side img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:16px;padding:6px}
.login-side h2{margin:16px 0 4px;font-size:24px}
.login-side p{margin:0 0 22px;opacity:.9}
.login-side ul{list-style:none;margin:0;padding:0;line-height:2.4;font-size:14px;opacity:.95}
.logo-fallback.big{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.2);font-weight:800;font-size:22px}
.login-form{padding:44px 36px}
.login-form h1{margin:0 0 4px;font-size:24px}
.login-form .field{margin-top:16px}
.login-foot{margin-top:18px;font-size:12px;color:var(--muted);line-height:1.9}
@media(max-width:820px){.login-card{grid-template-columns:1fr}.login-side{display:none}}

/* ================= نقطة البيع ================= */
.pos-wrap{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
.pos-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pos-cats button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 16px;
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600}
.pos-cats button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pos-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;
  transition:.15s;display:flex;flex-direction:column;gap:6px;min-height:104px}
.pcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.09);border-color:var(--primary)}
.pcard .pn{font-weight:700;font-size:14px;line-height:1.5}
.pcard .pp{margin-top:auto;font-weight:800;color:var(--primary)}
.pcard .ps{font-size:11px;color:var(--muted)}
.pcard.out{opacity:.45}
.pos-cart{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;
  position:sticky;top:16px;display:flex;flex-direction:column;gap:10px}
.cart-items{max-height:38vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.citem{display:grid;grid-template-columns:1fr auto;gap:4px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.citem .cn{font-weight:700;font-size:13px}
.citem .cq{display:flex;align-items:center;gap:6px}
.citem .cq button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:#f8fafc;cursor:pointer;font-weight:800}
.citem input.qty{width:56px;text-align:center;padding:4px}
.cart-total{border-top:2px solid var(--line);padding-top:10px;font-size:13px;line-height:2.2}
.cart-total .grand{display:flex;justify-content:space-between;font-size:22px;font-weight:800;color:var(--primary)}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.change-box{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:10px;text-align:center;font-weight:800}

/* ================= رابط الموظف ================= */
.portal-body{font-family:Cairo,system-ui,sans-serif;background:#f1f5f9;margin:0;padding:18px}
.portal-wrap{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.portal-head{background:#fff;border-radius:20px;padding:18px 22px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 6px 22px rgba(15,23,42,.06)}
.ph-company{display:flex;align-items:center;gap:12px}
.ph-company img{width:48px;height:48px;object-fit:contain;border-radius:12px}
.ph-company small{display:block;color:var(--muted);font-size:12px}
.ph-emp{display:flex;align-items:center;gap:12px}
.ph-emp h1{margin:0;font-size:20px}
.avatar.big{width:56px;height:56px;font-size:18px}
.live-banner{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px 18px;
  border-inline-start:6px solid var(--muted);font-weight:600}
.live-banner.on{border-color:#10b981}.live-banner.brk{border-color:#f59e0b}.live-banner.off{border-color:#94a3b8}
.live-banner .dot{width:10px;height:10px;border-radius:99px;background:#94a3b8}
.live-banner.on .dot{background:#10b981;animation:pulse 1.4s infinite}
.live-banner.brk .dot{background:#f59e0b;animation:pulse 1.4s infinite}
.live-banner b{font-variant-numeric:tabular-nums;font-size:18px;direction:ltr}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.portal-card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 22px rgba(15,23,42,.06);
  border-top:4px solid var(--muted)}
.portal-card.accent{border-color:var(--accent)}.portal-card.ok{border-color:#10b981}
.portal-card.warn{border-color:#f59e0b}
.pc-title{font-weight:800}
.pc-sub{font-size:11px;color:var(--muted);margin-bottom:8px}
.pc-main{font-size:26px;font-weight:800;color:var(--primary);margin-bottom:8px}
.pc-main small{font-size:13px;color:var(--muted)}
.pc-rows div{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dashed #eef2f7}
.pc-rows span{color:var(--muted)}
.portal-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.portal-two{grid-template-columns:1fr}.pos-wrap{grid-template-columns:1fr}}
.panel{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 6px 22px rgba(15,23,42,.06)}
.panel h3{margin:0 0 10px}
.panel table{width:100%;border-collapse:collapse;font-size:13px}
.panel th{text-align:start;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding:8px 6px}
.panel td{padding:8px 6px;border-bottom:1px solid #f1f5f9}
.mini-kpis{display:flex;gap:22px;margin-bottom:10px;flex-wrap:wrap}
.mini-kpis span{display:block;font-size:12px;color:var(--muted)}
.mini-kpis b{font-size:18px}
.portal-foot{text-align:center;color:var(--muted);font-size:12px;line-height:2;padding:8px 0 22px}

/* ================= إيصال حراري 80×210 مم ================= */
.receipt80{width:76mm;margin:0 auto;background:#fff;padding:4mm 2mm;color:#000;
  font-family:Cairo,system-ui,sans-serif;font-size:16px;line-height:1.85;font-weight:600}
.receipt80 .r-center{text-align:center}
.receipt80 h2{margin:2px 0;font-size:23px;font-weight:800}
.receipt80 .r-logo{max-width:38mm;max-height:18mm;object-fit:contain;margin-bottom:2mm}
.receipt80 .r-sep{border-top:1px dashed #000;margin:2mm 0}
.receipt80 table{width:100%;border-collapse:collapse;font-size:15px}
.receipt80 th{border-bottom:1.4px solid #000;text-align:start;padding:1.2mm 0;font-size:13px}
.receipt80 td{padding:.8mm 0;vertical-align:top}
.receipt80 .num{text-align:end;font-variant-numeric:tabular-nums}
.receipt80 .r-total{font-size:21px;font-weight:800}
.receipt80 .r-foot{text-align:center;font-size:12px;margin-top:2mm}
.receipt80 .barcode{text-align:center;font-family:monospace;letter-spacing:2px;margin-top:2mm;font-size:14px}
.print-bar{display:flex;gap:8px;justify-content:center;margin:16px 0}

@media print{
  @page{size:80mm 210mm;margin:3mm 2mm}
  html,body{width:80mm}
  body.print80{margin:0;background:#fff}
  body.print80 .print-bar,.no-print{display:none!important}
  .receipt80{width:76mm;padding:0;font-size:16px;line-height:1.85;box-shadow:none;
    page-break-inside:auto;break-inside:auto}
  .receipt80 table{font-size:15px}
  .receipt80 h2{font-size:20px}
  .receipt80 .r-total{font-size:21px}
  .receipt80 tr,.receipt80 td,.receipt80 th,.receipt80 .r-center,.receipt80 .r-foot{
    page-break-inside:avoid;break-inside:avoid;page-break-after:auto;break-after:auto}
}

/* ================= فاتورة A4 ================= */
.a4{width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:16mm 14mm;
  color:#0f172a;font-family:Cairo,system-ui,sans-serif;box-shadow:0 10px 40px rgba(15,23,42,.15)}
.a4-head{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--primary);padding-bottom:12px}
.a4-head img{max-width:120px;max-height:70px;object-fit:contain}
.a4-title{text-align:end}
.a4-title h1{margin:0;font-size:26px;color:var(--primary)}
.a4-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.a4-box{border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:2}
.a4-box h4{margin:0 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase}
.a4 table.items{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.a4 table.items th{background:var(--primary);color:#fff;padding:9px 10px;text-align:start}
.a4 table.items td{padding:9px 10px;border-bottom:1px solid #eef2f7}
.a4 table.items tbody tr:nth-child(even){background:#f8fafc}
.a4-tot{width:60%;margin-inline-start:auto;margin-top:14px;border-collapse:collapse;font-size:15px}
.a4-tot td{padding:8px 10px;border-bottom:1px solid #eef2f7}
.a4-tot tr.grand td{background:var(--primary);color:#fff;font-size:17px;font-weight:800;border:0}
.a4-foot{margin-top:auto;padding-top:16px;border-top:1px solid #e2e8f0;font-size:11.5px;
  color:var(--muted);line-height:2;text-align:center}
.a4-stamp{position:relative}
.a4-stamp .paid{position:absolute;inset-inline-end:20mm;top:60mm;transform:rotate(-18deg);
  border:6px solid #10b981;color:#10b981;font-size:44px;font-weight:800;padding:6px 26px;
  border-radius:14px;opacity:.25}
@media print{
  @page{size:A4;margin:0}
  body.printa4{background:#fff;margin:0}
  body.printa4 .print-bar{display:none}
  .a4{box-shadow:none;margin:0}
}

/* ---- تكبير إضافي لإيصال 80×210مم (v9) ---- */
.receipt80{width:76mm;font-size:16px;line-height:1.85;font-weight:600}
.receipt80 h2{font-size:24px;font-weight:800}
.receipt80 table{font-size:15px}
.receipt80 th{font-size:14.5px}
.receipt80 .r-total{font-size:22px;font-weight:800}
.receipt80 .r-foot{font-size:13px}
.receipt80 .barcode{font-size:16px}
@media print{
  @page{size:80mm 210mm;margin:3mm 2mm}
  html,body{width:80mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body.print80 .print-bar,body.print80 .no-print{display:none!important}
  .receipt80{width:76mm!important;padding:0!important;font-size:16px!important;line-height:1.85!important;
    box-shadow:none!important;border:0!important;color:#000!important}
  .receipt80 h2{font-size:24px!important}
  .receipt80 table{font-size:15px!important}
  .receipt80 .r-total{font-size:22px!important}
  .receipt80,.receipt80 *{break-inside:avoid!important;page-break-inside:avoid!important}
  .receipt80 tr,.receipt80 div,.receipt80 p{page-break-after:auto!important;break-after:auto!important}
}

/* =========================================================================
   شريط الكمية العشرية وإنشاء الزبون السريع — شاشة البيع
   ========================================================================= */
.pos-qtybar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:10px; padding:10px 12px; border-radius:14px;
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  border:1px solid #e2e8f0;
}
.pos-qtybar .qb-lbl{font-size:12.5px; font-weight:800; color:#334155}
.pos-qtybar #qtyBox{
  width:120px; height:44px; text-align:center;
  font-size:22px; font-weight:800; letter-spacing:.5px;
  border-radius:12px; border:2px solid var(--primary,#4f46e5);
  font-variant-numeric:tabular-nums; background:#fff; color:#0f172a;
}
.pos-qtybar .qb-keys{display:grid; grid-template-columns:repeat(6,42px); gap:5px}
.pos-qtybar .qb-presets{display:flex; gap:5px; flex-wrap:wrap}
.pos-qtybar button{
  height:38px; min-width:42px; padding:0 10px; cursor:pointer;
  border:1px solid #cbd5e1; background:#fff; color:#0f172a;
  border-radius:10px; font-size:15px; font-weight:700; font-family:inherit;
  transition:transform .1s, background .15s;
}
.pos-qtybar button:hover{background:#eef2ff; border-color:var(--primary,#4f46e5)}
.pos-qtybar button:active{transform:scale(.94)}
.pos-qtybar .k-dot{font-size:20px}
.pos-qtybar .k-del{background:#fff1f2; border-color:#fecdd3}
.pos-qtybar .k-clr{background:#fef3c7; border-color:#fde68a; font-size:12.5px}
.pos-qtybar .qb-hint{font-size:11.5px; color:#64748b; flex:1 1 180px; min-width:150px}

.cust-row{display:flex; gap:6px; margin:8px 0 0; flex-wrap:wrap}
.cust-row .btn{flex:1 1 auto}
.quick-cust{
  margin-top:8px; padding:11px; border-radius:13px;
  background:#f8fafc; border:1px dashed #cbd5e1;
  display:flex; flex-direction:column; gap:7px;
}
.quick-cust input{height:38px; border-radius:10px; font-size:13.5px}
.quick-cust .qc-actions{display:flex; gap:6px}
.quick-cust .qc-actions .btn{flex:1}
.quick-cust .qc-msg{font-size:11.5px; font-weight:700; min-height:14px; color:#64748b}
.quick-cust .qc-msg.ok{color:#15803d}
.quick-cust .qc-msg.bad{color:#b91c1c}

@media (max-width:900px){
  .pos-qtybar .qb-keys{grid-template-columns:repeat(6,38px)}
  .pos-qtybar #qtyBox{width:100px; height:40px; font-size:19px}
}
@media print{ .pos-qtybar, .cust-row, .quick-cust{display:none !important} }
.pos-qtybar .qb-hint{transition:color .2s, background .2s; padding:2px 6px; border-radius:8px}
.pos-qtybar .qb-hint.qb-done{color:#065f46; background:#d1fae5; font-weight:800}