* { box-sizing: border-box; }
:root {
  --bg: #eef3ff;
  --surface: #ffffff;
  --surface-soft: #f7f9ff;
  --text: #0f172a;
  --text-muted: #475569;
  --border: #d9e1ff;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --success: #059669;
  --danger: #dc2626;
  --nav-bg: #0f172a;
  --nav-text: #cbd5e1;
  --table-alt: #f8faff;
}

body.theme-dark {
  --bg: #020617;
  --surface: #0b1220;
  --surface-soft: #111a2d;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #24324f;
  --primary: #38bdf8;
  --primary-strong: #0ea5e9;
  --success: #34d399;
  --danger: #f87171;
  --nav-bg: #020617;
  --nav-text: #94a3b8;
  --table-alt: #101a30;
}

body {
  margin: 0;
  font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}
#app {
  width: 100%;
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
h1,h2,h3 { margin: 0 0 16px; font-weight: 700; color: var(--text); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; color: var(--text-muted); }

/* ── Login ───────────────────────────────────────────────────── */
.login-full {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
}
.login-wrap { width: min(420px, 94vw); }
.login-wrap h1 { text-align: center; color: #6366f1; margin-bottom: 24px; }
.login-theme-row { display: flex; justify-content: flex-start; margin-bottom: 10px; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(120deg, #f1f5f9 60%, #e0e7ff 100%);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 2px 12px 0 rgba(80,110,255,0.07);
  margin-bottom: 18px;
}
label { display: block; margin-top: 10px; font-weight: 500; color: #475569; font-size: .93rem; }
input, select, textarea {
  width: 100%; padding: 10px 12px; margin-top: 5px;
  border: 1.5px solid #c7d2fe; border-radius: 8px;
  font-size: 1rem; background: #ffffff; color: #111827;
  transition: border .2s, box-shadow .2s;
  font-family: inherit;
}
input::placeholder { color: #9ca3af; }
input:focus, select:focus, textarea:focus {
  border-color: #6366f1; outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
  background: #fff;
}
button {
  cursor: pointer; margin-top: 10px; padding: 10px 12px;
  font-weight: 600; font-size: 1rem;
  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
  color: #fff; border: none; border-radius: 7px; width: 100%;
  box-shadow: 0 2px 8px 0 rgba(80,110,255,0.08);
  transition: background .2s, transform .1s;
}
button:hover { background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%); transform: translateY(-1px); }
button.primary { background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%); }
button.primary:hover { background: linear-gradient(90deg, #6366f1 0%, #0ea5e9 100%); }
button.danger { background: linear-gradient(90deg, #ef4444 0%, #f97316 100%); }
button.danger:hover { background: linear-gradient(90deg, #f97316 0%, #ef4444 100%); }
.small, .tiny {
  padding: 4px 10px; font-size: 12px; margin: 0 2px;
  border-radius: 5px; background: #f1f5f9; color: #334155;
  border: 1px solid #c7d2fe; width: auto; display: inline-block;
}
.small.danger, .tiny.danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.small.primary { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.small.print-btn { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; min-width: 2.2rem; }
.error { color: #ef4444; margin-top: 8px; font-weight: 500; }
.success { color: #059669; margin-top: 8px; font-weight: 500; }

/* ── Nav ─────────────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: var(--nav-bg);
  padding: 0 12px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.app-brand {
  font-weight: 800; font-size: 1.1rem; color: #fff;
  padding: 14px 14px 14px 0;
  margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}
.topnav button {
  background: none; color: var(--nav-text);
  border: none; border-radius: 6px;
  font-weight: 600; font-size: .88rem;
  margin: 6px 2px; padding: 7px 14px;
  cursor: pointer; width: auto;
  transition: background .15s, color .15s;
  box-shadow: none;
}
.topnav button:hover { background: rgba(255,255,255,0.08); color: #fff; transform: none; }
.topnav button.active { background: #6366f1; color: #fff; }
.nav-theme-btn {
  width: auto !important;
  margin-left: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  color: #e2e8f0 !important;
}

/* Global theme readability overrides */
body.theme-light .card,
body.theme-light .tile,
body.theme-light .sales-card,
body.theme-light .pos-card,
body.theme-light .s2-card,
body.theme-light .detail-box,
body.theme-light .modal-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

body.theme-dark .login-full,
body.theme-dark .content-area {
  background: var(--bg) !important;
}

body.theme-dark .card,
body.theme-dark .tile,
body.theme-dark .sales-card,
body.theme-dark .pos-card,
body.theme-dark .s2-card,
body.theme-dark .detail-box,
body.theme-dark .modal-box,
body.theme-dark .pay-summary,
body.theme-dark .payment-summary,
body.theme-dark .totals-highlight,
body.theme-dark .search-list,
body.theme-dark .p-results,
body.theme-dark .pos2-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .p-input-main,
body.theme-dark .search-inp,
body.theme-dark .bc-input,
body.theme-dark .payment-input,
body.theme-dark .td-input,
body.theme-dark .pay-inp,
body.theme-dark .mini-inp,
body.theme-dark .mini-sel,
body.theme-dark .qty-e,
body.theme-dark .price-e,
body.theme-dark .s2-card input,
body.theme-dark .s2-card select {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.theme-dark label,
body.theme-dark .tile-label,
body.theme-dark .tot-lbl,
body.theme-dark .payment-label,
body.theme-dark .td-label,
body.theme-dark .field-lbl,
body.theme-dark .search-hint,
body.theme-dark .bc-hint,
body.theme-dark .pay-unit,
body.theme-dark .payment-unit,
body.theme-dark .td-unit {
  color: var(--text-muted) !important;
}

body.theme-dark .tile-value,
body.theme-dark .cart-name,
body.theme-dark .p-result-name,
body.theme-dark .si-name,
body.theme-dark .grand-lbl,
body.theme-dark .total-amt,
body.theme-dark .ps-grand,
body.theme-dark .s2-table td,
body.theme-dark .s2-table th {
  color: var(--text) !important;
}

body.theme-dark table,
body.theme-dark .s2-table {
  background: var(--surface) !important;
}

body.theme-dark th {
  background: #0b3b66 !important;
  color: #f8fafc !important;
}

body.theme-dark td,
body.theme-dark th,
body.theme-dark .cart-table th,
body.theme-dark .cart-table td {
  border-bottom-color: var(--border) !important;
}

body.theme-dark tr:nth-child(even) td,
body.theme-dark .cart-table tr:hover td {
  background: var(--table-alt) !important;
}

body.theme-dark .topnav button.active {
  background: var(--primary) !important;
  color: #03263b !important;
}

body.theme-dark .small,
body.theme-dark .tiny,
body.theme-dark .s2-ghost,
body.theme-dark .fill-btn,
body.theme-dark .td-fill-btn,
body.theme-dark .pick-btn {
  background: #16223a !important;
  color: #cbd5e1 !important;
  border-color: var(--border) !important;
}

body.theme-dark .s2-inline-badge {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #bae6fd !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
}

body.theme-dark .s2-primary,
body.theme-dark .btn-secondary,
body.theme-dark button.primary {
  background: linear-gradient(90deg, #0891b2, #0ea5e9) !important;
  color: #022c43 !important;
}

body.theme-dark #s2Save,
body.theme-light #s2Save {
  background: #16a34a !important;
  color: #fff !important;
}

body.theme-dark #s2Save:hover,
body.theme-light #s2Save:hover {
  background: #15803d !important;
}

body.theme-dark .btn-primary,
body.theme-dark .btn-finalize {
  background: linear-gradient(90deg, #10b981, #34d399) !important;
  color: #052e2b !important;
}

body.theme-dark .btn-danger,
body.theme-dark button.danger,
body.theme-dark .s2-danger,
body.theme-dark .rm-btn,
body.theme-dark .s2-remove {
  background: linear-gradient(90deg, #991b1b, #dc2626) !important;
  color: #fee2e2 !important;
}

body.theme-light .s2-search-item,
body.theme-light .s2-variant-btn,
body.theme-light .s2-card input,
body.theme-light .s2-card select,
body.theme-light .s2-totals,
body.theme-light .s2-pay-summary,
body.theme-light .s2-manual-box,
body.theme-light .s2-overlay-card {
  background: #f8fbff !important;
  color: #0f172a !important;
  border-color: #d7e3ff !important;
}

body.theme-light .s2-ghost {
  background: #e8efff !important;
  color: #1e3a8a !important;
}

body.theme-light .s2-primary {
  background: linear-gradient(90deg, #38bdf8, #2563eb) !important;
  color: #eff6ff !important;
}

body.theme-light .s2-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
}
.nav-logout {
  margin-right: 0 !important; margin-left: auto !important;
  color: #fca5a5 !important;
}
.nav-logout:hover { background: rgba(239,68,68,0.15) !important; color: #ef4444 !important; }

/* ── Content Area ────────────────────────────────────────────── */
.content-area {
  padding: 24px 28px 40px;
  flex: 1;
}

/* ── Tiles ───────────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.tile {
  background: linear-gradient(120deg, #f1f5f9 60%, #e0e7ff 100%);
  border-radius: 12px; padding: 18px 14px;
  box-shadow: 0 2px 8px rgba(80,110,255,0.07);
  text-align: center;
}
.tile-label { font-size: .85rem; color: #64748b; font-weight: 500; margin-bottom: 4px; }
.tile-value { font-size: 1.55rem; font-weight: 800; color: #1e293b; }
.danger-tile .tile-value { color: #dc2626; }
.budget-tile .tile-value { color: #6366f1; }

/* ── Table ───────────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; margin-top: 14px; border-radius: 10px;
  overflow: hidden; box-shadow: 0 1px 8px rgba(80,110,255,0.06);
}
th, td { padding: 11px 10px; border-bottom: 1px solid #e0e7ff; text-align: right; }
th {
  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
  color: #fff; font-weight: 700; font-size: 1rem;
}
tr:nth-child(even) td { background: #f8faff; }
tr:hover td { background: #e0e7ff33; }
tr:last-child td { border-bottom: none; }
.small-table { font-size: 92%; }

/* ── Form row ────────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; align-items: end; margin-bottom: 10px;
}
.form-row > * { margin-top: 0; }
.form-row button { margin-top: 0; }

/* ── Sale card ───────────────────────────────────────────────── */
.sale-card { margin-bottom: 24px; }
.sale-total-row {
  text-align: left; padding: 10px 0; font-size: 1.15rem;
  font-weight: 700; color: #6366f1;
}

/* ── Budget cards ────────────────────────────────────────────── */
.bcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.bcard {
  background: linear-gradient(135deg, #6366f1 0%, #2563eb 100%);
  color: #fff; border-radius: 14px; padding: 20px 16px;
  text-align: center; cursor: pointer;
  box-shadow: 0 4px 16px rgba(99,102,241,0.2);
  transition: transform .15s, box-shadow .15s;
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99,102,241,0.3); }
.bcard.personal {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  box-shadow: 0 4px 16px rgba(5,150,105,0.2);
}
.bcard.personal:hover { box-shadow: 0 8px 24px rgba(5,150,105,0.3); }
.bcard-name { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.bcard-balance { font-size: 1.75rem; font-weight: 800; margin-bottom: 4px; }
.bcard-label { font-size: .78rem; opacity: .8; }

/* ── Detail box ──────────────────────────────────────────────── */
.detail-box {
  background: #ffffff; border: 1px solid #e0e7ff;
  border-radius: 12px; padding: 20px; margin-top: 14px;
}
.bal { color: #6366f1; font-size: 1.2rem; font-weight: 800; }

/* ── Transaction rows ────────────────────────────────────────── */
.txn-deposit .txn-amt { color: #059669; font-weight: 700; }
.txn-withdrawal .txn-amt { color: #dc2626; font-weight: 700; }
.txn-sale .txn-amt { color: #2563eb; font-weight: 700; }
.txn-deposit td:nth-child(2)::before { content: ''; }

/* ── Debts ───────────────────────────────────────────────────── */
.debt-banner {
  font-size: 1.05rem; padding: 12px 16px; margin-bottom: 16px;
  background: #fff7ed; border-radius: 8px;
  border-right: 4px solid #f97316;
}
.rem-val { color: #dc2626; font-weight: 700; }
.debt-paid td { opacity: .45; }
.paid-badge {
  background: #d1fae5; color: #059669;
  border-radius: 20px; padding: 2px 10px;
  font-size: 11px; font-weight: 700;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-box {
  background: #f8fafc; border-radius: 16px;
  padding: 28px 24px; width: min(400px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.modal-box h3 { margin-bottom: 12px; }

/* ── POS Layout ──────────────────────────────────────────────── */
.pos-wrap { display: flex; flex-direction: column; gap: 0; }
.pos-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
  color: #fff; border-radius: 14px; padding: 14px 20px; margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.2);
}
.pos-header h2 { color: #fff; margin: 0; font-size: 1.3rem; }
.pos-clock { font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; opacity: .92; }
.pos-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px; align-items: start;
}
.pos-main-col, .pos-side-col { display: flex; flex-direction: column; gap: 14px; }
.pos-card {
  background: #fff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(80,110,255,0.09);
  overflow: hidden;
}
.pos-card-hd {
  background: linear-gradient(90deg, #f1f5f9, #e0e7ff);
  padding: 10px 16px; font-weight: 700; color: #475569;
  font-size: .95rem; border-bottom: 1px solid #e0e7ff;
  display: flex; align-items: center; gap: 8px;
}
.pos-card-hd span { font-size: 1.1rem; }

/* ── Product Entry Tabs ──────────────────────────────────────── */
.stabs {
  display: flex; border-bottom: 2px solid #e0e7ff;
  background: #f8fafc;
}
.stab {
  padding: 10px 18px; font-weight: 600; font-size: .9rem;
  color: #64748b; cursor: pointer; border: none;
  background: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: color .2s, border-color .2s;
}
.stab.active { color: #6366f1; border-bottom-color: #6366f1; background: #fff; }
.stab-pane { padding: 14px 16px; }

/* ── Barcode Tab ─────────────────────────────────────────────── */
.bc-row { display: flex; gap: 8px; align-items: center; }
.bc-field-wrap { display: flex; align-items: center; gap: 6px; flex: 1; }
.bc-icon { font-size: 1.2rem; }
.bc-qty { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.bc-qty label { font-size: .8rem; color: #64748b; margin: 0; }
.bc-qty input { width: 70px; text-align: center; }
.bc-not-found { color: #dc2626; font-size: .9rem; }
.bc-pick-label { color: #475569; font-size: .88rem; margin-bottom: 6px; font-weight: 600; }
.pick-btn {
  display: inline-block; margin: 3px 4px 3px 0; padding: 5px 12px;
  background: #e0e7ff; color: #3730a3; border: none; border-radius: 6px;
  font-size: .88rem; cursor: pointer; font-weight: 600; width: auto;
}
.pick-btn:hover { background: #c7d2fe; }
.bc-input {
  flex: 1; padding: 11px 14px; border: 2px solid #c7d2fe;
  border-radius: 9px; font-size: 1.05rem; background: #ffffff;
  transition: border .2s, box-shadow .2s;
}
.bc-input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px #a5b4fc33; }
.bc-hint { font-size: .82rem; color: #94a3b8; margin-top: 6px; }
.bc-msg { margin-top: 8px; font-weight: 600; font-size: .9rem; min-height: 22px; }
.bc-msg.ok { color: #059669; }
.bc-msg.err { color: #dc2626; }

/* ── Search Tab ──────────────────────────────────────────────── */
.search-list { max-height: 220px; overflow-y: auto; margin-top: 10px; border-radius: 8px; border: 1px solid #e0e7ff; }
.search-item {
  padding: 10px 14px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  border-bottom: 1px solid #f1f5f9; transition: background .15s;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: #e0e7ff55; }
.search-item .si-name { font-weight: 600; color: #1e293b; }
.search-item .si-bc { font-size: .75rem; color: #94a3b8; display: block; }
.search-item .si-price { color: #6366f1; font-weight: 700; font-size: .95rem; }
.search-item .si-stock { font-size: .78rem; color: #94a3b8; }
.search-item .si-stock.out { color: #dc2626; }
.search-hint { font-size: .85rem; color: #94a3b8; margin-bottom: 8px; }
.search-inp {
  width: 100%; padding: 10px 14px; border: 2px solid #c7d2fe;
  border-radius: 9px; font-size: 1rem; background: #ffffff;
  transition: border .2s, box-shadow .2s;
}
.search-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px #a5b4fc33; }
.search-none { padding: 14px; text-align: center; color: #94a3b8; font-size: .9rem; }

/* ── Grid Tab ────────────────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; max-height: 280px; overflow-y: auto; padding: 4px 2px;
}
.pgrid-item {
  background: linear-gradient(135deg, #f1f5f9 60%, #e0e7ff 100%);
  border-radius: 10px; padding: 12px 8px; text-align: center;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color .2s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 4px rgba(80,110,255,0.07);
}
.pgrid-item:hover { border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.18); }
.pgrid-item .pg-name { font-weight: 700; font-size: .82rem; color: #1e293b; margin-bottom: 4px; word-break: break-word; }
.pgrid-item .pg-price { font-size: .95rem; font-weight: 800; color: #6366f1; }
.pgrid-item .pg-stock { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
.pgrid-item.oos { opacity: .45; cursor: not-allowed; }

/* ── Cart ────────────────────────────────────────────────────── */
.cart-scroll { max-height: 300px; overflow-y: auto; }
.cart-name { font-weight: 600; color: #1e293b; font-size: .88rem; }
.line-total { color: #6366f1; font-weight: 700; }
.cart-empty { text-align: center; padding: 30px 10px; color: #94a3b8; font-size: .95rem; }
.cart-badge {
  background: #6366f1; color: #fff; border-radius: 20px;
  padding: 1px 8px; font-size: .78rem; font-weight: 700;
}
.qty-e, .price-e {
  width: 70px; padding: 5px 7px; border: 1.5px solid #c7d2fe;
  border-radius: 6px; font-size: .9rem; text-align: center;
  background: #ffffff; transition: border .2s;
}
.qty-e:focus, .price-e:focus { border-color: #6366f1; outline: none; }
.price-e { width: 90px; }

/* ── Totals Card ─────────────────────────────────────────────── */
.totals-card { padding: 16px; }
.tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #f1f5f9;
}
.tot-row:last-child { border-bottom: none; }
.tot-lbl { color: #64748b; font-size: .9rem; font-weight: 500; }
.tot-amt { font-weight: 700; color: #1e293b; font-size: .95rem; }
.mini-sel, .mini-inp {
  padding: 4px 8px; border: 1.5px solid #c7d2fe; border-radius: 6px;
  font-size: .85rem; background: #ffffff; color: #1e293b;
}
.mini-inp { width: 80px; text-align: center; }
.tot-grand-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 4px; margin-top: 4px; border-top: 2px solid #6366f1;
}
.grand-lbl { font-size: 1.05rem; font-weight: 800; color: #1e293b; }
.grand-val { font-size: 1.5rem; font-weight: 900; color: #6366f1; }

/* ── Payment Card ────────────────────────────────────────────── */
.pay-card { padding: 16px; }
.pay-method-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.pay-method-row:last-child { border-bottom: none; }
.pay-ico { font-size: 1.3rem; }
.pay-lbl { font-weight: 600; color: #475569; font-size: .92rem; min-width: 70px; }
.pay-inp-g { display: flex; align-items: center; gap: 6px; flex: 1; }
.pay-inp {
  flex: 1; padding: 8px 10px; border: 1.5px solid #c7d2fe;
  border-radius: 8px; font-size: 1rem; background: #ffffff;
  text-align: center; transition: border .2s;
}
.pay-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 2px #a5b4fc33; }
.pay-unit { font-size: .82rem; color: #94a3b8; white-space: nowrap; }
.fill-btn {
  padding: 5px 10px; font-size: .78rem; border-radius: 6px;
  background: #e0e7ff; color: #4338ca; border: none;
  cursor: pointer; font-weight: 600; width: auto; margin: 0;
  transition: background .2s;
}
.fill-btn:hover { background: #c7d2fe; }

/* ── Payment Summary ─────────────────────────────────────────── */
.pay-summary {
  margin-top: 12px; background: #ffffff; border-radius: 10px;
  padding: 12px 14px; border: 1px solid #e0e7ff;
}
.pay-s-row {
  display: flex; justify-content: space-between;
  font-size: .88rem; padding: 3px 0; color: #64748b;
}
.ps-grand { font-weight: 800; color: #1e293b; font-size: 1rem; }
.ps-rem { color: #dc2626; font-weight: 700; }
.ps-change { color: #059669; font-weight: 700; }
.mixed-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
  background: #fef3c7; color: #92400e;
}

/* ── POS Action Buttons ──────────────────────────────────────── */
.pos-actions { display: flex; gap: 10px; padding: 14px 16px; }
.btn-finalize {
  flex: 2; padding: 13px; font-size: 1.05rem; font-weight: 800;
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(5,150,105,0.25);
  transition: transform .15s, box-shadow .15s;
}
.btn-finalize:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); }
.btn-print {
  flex: 1; padding: 13px; font-size: .95rem; font-weight: 700;
  background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: transform .15s;
}
.btn-print:hover { transform: translateY(-2px); }
.btn-clear {
  flex: 1; padding: 13px; font-size: .95rem; font-weight: 700;
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: transform .15s;
}
.btn-clear:hover { transform: translateY(-2px); }
.s-msg { padding: 10px 16px; font-weight: 600; font-size: .95rem; }
.s-msg.ok { color: #059669; }
.s-msg.error { color: #dc2626; }
.s-msg.warn { color: #d97706; }

/* ── Field helpers ───────────────────────────────────────────── */
.field-g { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 0; }
.field-g label, .field-lbl { margin-top: 0; font-weight: 600; color: #475569; font-size: .9rem; }
.field-hint { font-size: .75rem; color: #94a3b8; font-weight: 400; margin-right: 4px; }
.req { color: #dc2626; }
.hint-lbl { font-size: .78rem; color: #94a3b8; margin-top: 2px; }
.tot-amt.neg { color: #dc2626; }
.tot-amt.pos { color: #059669; }

/* ── Sales Page Layout ───────────────────────────────────────── */
.sales-wrap { display: flex; flex-direction: column; gap: 0; height: 100%; }
.sales-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
  color: #fff; border-radius: 14px; padding: 14px 20px; margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.2);
}

/* ── Sales 2 (Beta) ─────────────────────────────────────────────────────── */
.sales2-shell {
  padding: 12px;
  display: grid;
  gap: 16px;
}

.sales2-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0f172a 0%, #065f46 60%, #14532d 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.sales2-hero h2 {
  margin: 0;
  color: #ecfeff;
  font-size: 1.3rem;
  font-weight: 800;
}

.sales2-hero p {
  display: none;
}

.sales2-beta {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #14532d;
  background: #bbf7d0;
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

.sales2-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d1fae5;
  font-size: 0.82rem;
}

.sales2-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.7fr 1fr;
}

/* Cards are fully theme-aware via CSS vars */
.s2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.s2-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  padding-right: 10px;
  border-right: 3px solid var(--primary);
}

.s2-card h3 + h3,
.s2-side h3 + h3 {
  margin-top: 16px;
}

.s2-card h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.s2-help { display: none; }
.s2-help-top { display: none; }
.s2-inline-notes { display: none; }
.s2-inline-badge { display: none; }

.s2-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
}

.s2-row.two {
  grid-template-columns: 1fr 1fr;
}

.s2-search-list {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 5px;
}

.s2-search-item {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}

.s2-search-item:hover {
  border-color: var(--primary);
  background: var(--bg);
}

.s2-manual-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.s2-manual-grid {
  display: grid;
  grid-template-columns: 1fr 130px 110px;
  gap: 8px;
  align-items: end;
}

.s2-manual-name {
  margin-top: 0;
}

.s2-field-stack {
  display: grid;
  gap: 4px;
}

.s2-field-stack label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.s2-cart-head {
  margin-top: 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.s2-table-wrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.s2-table {
  width: 100%;
  border-collapse: collapse;
}

.s2-table th {
  background: var(--surface-soft);
  padding: 9px 8px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.s2-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  text-align: right;
  font-size: 0.86rem;
  color: var(--text);
}

.s2-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

.s2-mini-inp {
  width: 78px;
}

.s2-remove {
  border: none;
  background: transparent;
  color: var(--danger);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}

.s2-remove:hover {
  background: var(--danger);
  color: #fff;
}

.s2-side label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 10px 0 4px;
  font-weight: 600;
}

.s2-side input,
.s2-side select,
.s2-card input,
.s2-card select {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 9px;
  padding: 9px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.s2-side input:focus,
.s2-card input:focus,
.s2-card select:focus,
.s2-side select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.s2-totals,
.s2-pay-summary {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.s2-totals > div,
.s2-pay-summary > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.s2-totals > div strong,
.s2-pay-summary > div strong {
  color: var(--text);
}

.s2-totals .grand {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
  color: var(--success);
  font-size: 1rem;
}

.s2-totals .grand strong {
  color: var(--success);
  font-size: 1.15rem;
}

.s2-actions {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.s2-primary,
.s2-ghost,
.s2-danger {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.92rem;
  transition: opacity 0.15s, background 0.15s;
}

/* Save button — large and prominent green */
#s2Save {
  padding: 14px;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  background: #16a34a;
  color: #fff;
  border-radius: 12px;
  border: none;
}

#s2Save:hover {
  background: #15803d;
  opacity: 1;
}

.s2-primary {
  background: var(--primary);
  color: #fff;
}

.s2-ghost {
  background: var(--surface-soft);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.s2-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.s2-danger:hover {
  background: var(--danger);
  color: #fff;
  opacity: 1;
}

.s2-msg {
  margin-top: 10px;
  min-height: 20px;
  font-size: 0.88rem;
  padding: 6px 0;
}

.s2-msg.ok { color: var(--success); }
.s2-msg.err { color: var(--danger); }

.s2-nores {
  color: var(--text-muted);
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  font-size: 0.88rem;
}

.s2-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.s2-overlay-card {
  width: min(520px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  color: var(--text);
}

.s2-variant-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  max-height: 320px;
  overflow: auto;
}

.s2-var-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

body.theme-dark .s2-var-badge {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

.s2-var-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}

.s2-var-header strong {
  font-size: 1rem;
  color: var(--text);
}

.s2-var-header span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.s2-var-attr {
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.s2-variant-btn {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  text-align: right;
}

.s2-variant-btn:hover {
  border-color: var(--primary);
  background: var(--bg);
}

.s2-var-oos {
  opacity: 0.5;
  cursor: not-allowed;
}

.s2-var-oos:hover {
  border-color: var(--border) !important;
  background: var(--surface-soft) !important;
}

.s2-var-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.s2-var-stock {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.s2-var-stock.ok {
  background: rgba(5, 150, 105, 0.12);
  color: var(--success);
}

.s2-var-stock.oos {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

@media (max-width: 980px) {
  .sales2-grid { grid-template-columns: 1fr; }
  .s2-manual-grid { grid-template-columns: 1fr 1fr; }
  .s2-manual-name { grid-column: 1 / -1; }
  .sales2-hero { flex-direction: column; align-items: stretch; }
  .sales2-draft { justify-content: flex-start; }
}
.sales-header h2 { color: #fff; margin: 0; font-size: 1.3rem; }
.sales-clock { font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; opacity: .92; }
.sales-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px; align-items: start; flex: 1; overflow: hidden;
}
.sales-left, .sales-right { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.sales-left { flex: 1; }
.sales-right { max-height: calc(100vh - 180px); }

/* ── Sales Card ──────────────────────────────────────────────── */
.sales-card {
  background: #fff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(80,110,255,0.09);
  overflow: hidden;
}
.sales-card-title {
  background: linear-gradient(90deg, #f1f5f9, #e0e7ff);
  padding: 10px 16px; font-weight: 700; color: #475569;
  font-size: .95rem; border-bottom: 1px solid #e0e7ff;
  display: flex; align-items: center; gap: 8px;
}

/* ── Product Entry Tabs ──────────────────────────────────────── */
.p-tabs {
  display: flex; border-bottom: 2px solid #e0e7ff;
  background: #f8fafc;
}
.p-tab {
  padding: 10px 18px; font-weight: 600; font-size: .9rem;
  color: #64748b; cursor: pointer; border: none;
  background: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: color .2s, border-color .2s;
}
.p-tab.active { color: #6366f1; border-bottom-color: #6366f1; background: #fff; }
.p-tab-pane { padding: 14px 16px; display: none; }
.p-tab-pane.active { display: block; }

/* ── Barcode Tab ─────────────────────────────────────────────── */
.p-input-main {
  width: 100%; padding: 11px 14px; border: 2px solid #c7d2fe;
  border-radius: 9px; font-size: 1.05rem; background: #ffffff;
  transition: border .2s, box-shadow .2s; margin-top: 8px;
}
.p-input-main:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px #a5b4fc33; }
.p-qty-row { 
  display: flex; gap: 8px; align-items: center;
  margin-top: 10px; padding: 8px 0;
}
.p-qty-label { color: #475569; font-weight: 600; font-size: .9rem; min-width: 60px; }
.p-qty {
  flex: 1; padding: 8px 10px; border: 1.5px solid #c7d2fe;
  border-radius: 8px; font-size: 1rem; background: #ffffff;
  text-align: center; transition: border .2s;
}
.p-qty:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 2px #a5b4fc33; }
.p-msg { margin-top: 10px; font-weight: 600; font-size: .9rem; min-height: 22px; }
.p-msg.ok { color: #059669; }
.p-msg.err { color: #dc2626; }

/* ── Search Results  ─────────────────────────────────────────── */
.p-results { max-height: 220px; overflow-y: auto; margin-top: 10px; border-radius: 8px; border: 1px solid #e0e7ff; }
.p-result-item {
  padding: 10px 14px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  border-bottom: 1px solid #f1f5f9; transition: background .15s;
}
.p-result-item:last-child { border-bottom: none; }
.p-result-item:hover { background: #e0e7ff55; }
.p-result-name { font-weight: 600; color: #1e293b; }
.p-result-price { color: #6366f1; font-weight: 700; font-size: .95rem; }
.p-result-stock { font-size: .78rem; color: #94a3b8; }

/* ── Product Grid ────────────────────────────────────────────── */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; max-height: 280px; overflow-y: auto; padding: 4px 2px;
}
.pgrid-item {
  background: linear-gradient(135deg, #f1f5f9 60%, #e0e7ff 100%);
  border-radius: 10px; padding: 12px 8px; text-align: center;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color .2s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 4px rgba(80,110,255,0.07);
}
.pgrid-item:hover { border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.18); }
.pgrid-item .pg-name { font-weight: 700; font-size: .82rem; color: #1e293b; margin-bottom: 4px; word-break: break-word; }
.pgrid-item .pg-price { font-size: .95rem; font-weight: 800; color: #6366f1; }
.pgrid-item .pg-stock { font-size: .72rem; color: #94a3b8; margin-top: 2px; }

/* ── Cart Table ──────────────────────────────────────────────── */
.cart-container { padding: 14px 16px; }
.cart-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: none; margin: 0; border-radius: 0;
  overflow: visible; box-shadow: none; font-size: .88rem;
}
.cart-table th, .cart-table td {
  padding: 8px 6px; border-bottom: 1px solid #e0e7ff;
  text-align: right; font-size: .85rem;
}
.cart-table th {
  background: #f1f5f9; color: #475569; font-weight: 700;
  border-bottom: 2px solid #c7d2fe;
}
.cart-table tr:nth-child(even) td { background: transparent; }
.cart-table tr:hover td { background: #f8faff; }
.cart-table tr:last-child td { border-bottom: none; }
.cart-empty { text-align: center; padding: 30px 10px; color: #94a3b8; font-size: .95rem; }

/* ── Totals Highlight Card ───────────────────────────────────– */
.totals-highlight { background: linear-gradient(135deg, #f1f5f9 0%, #e0e7ff 100%); }
.totals-highlight .sales-card-title { background: linear-gradient(90deg, #6366f1, #2563eb); color: #fff; }
.total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid #d1d5db;
  font-size: .92rem;
}
.total-row:last-child { border-bottom: none; }
.total-row .total-label { color: #64748b; font-weight: 500; }
.total-row .total-amt { font-weight: 700; color: #1e293b; }
.grand-total {
  display: flex; justify-content: space-between;
  padding: 12px 16px 16px; margin-top: 4px; border-top: 2px solid #6366f1;
}
.grand-total .gt-label { font-size: 1.05rem; font-weight: 800; color: #1e293b; }
.grand-total .gt-value { font-size: 1.5rem; font-weight: 900; color: #6366f1; }

/* ── Tax/Discount Controls ───────────────────────────────────── */
.td-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid #e0e7ff;
}
.td-row:last-child { border-bottom: none; }
.td-label { font-weight: 600; color: #475569; font-size: .9rem; min-width: 70px; }
.td-input-g { display: flex; align-items: center; gap: 6px; flex: 1; }
.td-input {
  flex: 1; padding: 6px 8px; border: 1.5px solid #c7d2fe;
  border-radius: 6px; font-size: .9rem; background: #ffffff;
  text-align: center; transition: border .2s;
}
.td-input:focus { border-color: #6366f1; outline: none; }
.td-unit { font-size: .78rem; color: #94a3b8; white-space: nowrap; }
.td-fill-btn {
  padding: 5px 10px; font-size: .78rem; border-radius: 6px;
  background: #e0e7ff; color: #4338ca; border: none;
  cursor: pointer; font-weight: 600; width: auto; margin: 0;
  transition: background .2s;
}
.td-fill-btn:hover { background: #c7d2fe; }

/* ── Payment Card ────────────────────────────────────────────── */
.payment-card { padding: 16px 0; }
.payment-method {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #f1f5f9;
}
.payment-method:last-child { border-bottom: none; }
.payment-icon { font-size: 1.3rem; }
.payment-label { font-weight: 600; color: #475569; font-size: .92rem; min-width: 70px; }
.payment-input-group { display: flex; align-items: center; gap: 6px; flex: 1; }
.payment-input {
  flex: 1; padding: 8px 10px; border: 1.5px solid #c7d2fe;
  border-radius: 8px; font-size: 1rem; background: #ffffff;
  text-align: center; transition: border .2s;
}
.payment-input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 2px #a5b4fc33; }
.payment-unit { font-size: .82rem; color: #94a3b8; white-space: nowrap; }

/* ── Payment Summary ─────────────────────────────────────────– */
.payment-summary {
  margin: 12px 16px 0; background: #ffffff; border-radius: 10px;
  padding: 12px 14px; border: 1px solid #e0e7ff;
}
.ps-row {
  display: flex; justify-content: space-between;
  font-size: .88rem; padding: 4px 0; color: #64748b;
}
.ps-row:last-child { margin-top: 6px; padding-top: 8px; border-top: 1px solid #e0e7ff; }
.ps-grand { font-weight: 800; color: #1e293b; font-size: 1rem; }
.ps-rem { color: #dc2626; font-weight: 700; }
.ps-change { color: #059669; font-weight: 700; }
.mixed-payment-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
  background: #fef3c7; color: #92400e;
}

/* ── Sales Action Buttons ────────────────────────────────────── */
.sales-actions { display: flex; gap: 10px; padding: 14px 16px; }
.btn-primary, .btn-secondary, .btn-danger {
  padding: 13px; font-size: 1.05rem; font-weight: 800;
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn-primary {
  flex: 2; background: linear-gradient(90deg, #059669 0%, #10b981 100%);
  box-shadow: 0 4px 14px rgba(5,150,105,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); }
.btn-secondary {
  flex: 1; background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);
  font-size: .95rem;
}
.btn-secondary:hover { transform: translateY(-2px); }
.btn-danger {
  flex: 1; background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
  font-size: .95rem;
}
.btn-danger:hover { transform: translateY(-2px); }
.sales-msg { padding: 10px 16px; font-weight: 600; font-size: .95rem; }

/* ── Invoice Info ────────────────────────────────────────────── */
.invoice-info { padding: 16px; font-size: .9rem; }
.invoice-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #f1f5f9;
}
.invoice-row:last-child { border-bottom: none; }
.invoice-label { color: #64748b; font-weight: 500; }
.invoice-value { font-weight: 700; color: #1e293b; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .sales-body { grid-template-columns: 1fr 320px; }
  .sales-right { max-height: calc(100vh - 200px); }
}

@media (max-width: 900px) {
  .pos-body { grid-template-columns: 1fr; }
  .sales-body { grid-template-columns: 1fr; }
  .sales-right { max-height: none; }
}

@media (max-width: 640px) {
  .container { padding: 8px 4px 18px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .bcard-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .topnav button { max-width: 100%; font-size: .85rem; }
  table, th, td { font-size: 88%; }
  .pos-header { flex-direction: column; gap: 6px; text-align: center; }
  .pos-actions { flex-direction: column; }
  .btn-finalize, .btn-print, .btn-clear { flex: none; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .sales-header { flex-direction: column; gap: 6px; text-align: center; }
  .sales-body { grid-template-columns: 1fr; }
  .sales-left, .sales-right { max-height: auto; }
  .sales-actions { flex-direction: column; }
  .btn-primary, .btn-secondary, .btn-danger { flex: none; width: 100%; }
  .p-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .p-tabs { flex-wrap: wrap; }
  .p-tab { flex: 1; padding: 8px 4px; font-size: .8rem; }
  .content-area { padding: 16px 12px 32px; }
  .topnav { padding: 0 8px; }
  .app-brand { font-size: .95rem; padding: 12px 10px 12px 0; }
  .topnav button { padding: 6px 10px; font-size: .8rem; }
}

/* ── Daily Sales ─────────────────────────────────────────────── */
.day-grand {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(90deg, #059669, #10b981);
  color: #fff; padding: 14px 20px; border-radius: 12px;
  margin-bottom: 24px; font-size: 1.05rem; font-weight: 700;
}
.day-section { margin-bottom: 28px; }
.day-header {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(90deg, #1e293b, #334155);
  color: #fff; padding: 10px 18px;
  border-radius: 10px 10px 0 0; font-weight: 700;
}
.day-label { font-size: .95rem; }
.day-total { font-size: .95rem; color: #a5f3fc; }
.day-section table { margin-top: 0; border-radius: 0 0 10px 10px; }

/* ── Manual Item ─────────────────────────────────────────────── */
.manual-form { padding: 4px 0; }
.manual-row {
  display: flex; gap: 10px; margin-top: 10px;
}
.manual-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.manual-field label { font-size: .82rem; color: #64748b; font-weight: 600; }
.manual-field input { padding: 8px 10px; border: 1.5px solid #c7d2fe; border-radius: 8px; font-size: .95rem; text-align: center; }
/* ── Attribute Chips ─────────────────────────────────────────────────────────── */
.attr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e0e7ff; border: 1px solid #c7d2fe;
  border-radius: 20px; padding: 3px 10px;
  font-size: .85rem; font-weight: 600; color: #3730a3;
}

.attr-chip-inp { border: 1px solid #6366f1; border-radius: 4px; padding: 2px 5px; font-size: .82rem; background: #fff; }
.attr-chip-edit, .attr-chip-del {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: .78rem; line-height: 1; margin: 0; width: auto; color: #6366f1;
  box-shadow: none; transition: none;
}
.attr-chip-edit:hover, .attr-chip-del:hover { transform: none; background: none; }
.attr-chip-del { color: #dc2626; }
.attr-quick-btn { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.attr-quick-btn:hover { background: #c7d2fe; transform: none; }

.custom-badge {
  display: inline-block; font-size: .7rem; background: #e0e7ff;
  color: #4338ca; padding: 1px 6px; border-radius: 10px;
  font-weight: 700; margin-right: 4px; vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   NEW POS REDESIGN — all classes used by the new pg-sales.js
   ══════════════════════════════════════════════════════════════ */

/* ── POS Top Bar ─────────────────────────────────────────────── */
.pos-topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
  color: #fff; padding: 10px 18px; border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.pos-topbar-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.1rem; font-weight: 800; white-space: nowrap;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.2);
}
.pos-icon { font-size: 1.3rem; }
.pos-clock-inline {
  font-size: .8rem; font-weight: 600; opacity: .75;
  white-space: nowrap; color: #a5b4fc;
}
.pos-topbar-fields {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; flex: 1;
}
.pos-field-wrap {
  display: flex; flex-direction: column; gap: 3px; min-width: 140px;
}
.pos-field-wrap label {
  font-size: .75rem; color: #94a3b8; font-weight: 600;
  margin: 0; display: block;
}
.pos-field-notes { flex: 2; min-width: 200px; }
.pos-select, .pos-input {
  padding: 7px 10px; border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 8px; font-size: .9rem;
  background: rgba(255,255,255,0.1); color: #fff;
  transition: border .2s, background .2s;
  width: 100%;
}
.pos-select option { background: #1e293b; color: #fff; }
.pos-select:focus, .pos-input:focus {
  border-color: #a5b4fc; outline: none;
  background: rgba(255,255,255,0.18);
}
.pos-input::placeholder { color: rgba(255,255,255,0.4); }

/* ── PCard (panel card) ──────────────────────────────────────── */
.pcard {
  background: #fff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(80,110,255,0.09);
  overflow: hidden; margin-bottom: 0;
}
.pcard-tabs {
  display: flex; background: #f1f5f9;
  border-bottom: 2px solid #e0e7ff;
}
.ptab {
  flex: 1; padding: 10px 6px; font-weight: 700; font-size: .82rem;
  color: #64748b; cursor: pointer; border: none; background: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
}
.ptab.active {
  color: #6366f1; border-bottom-color: #6366f1; background: #fff;
}
.ptab:hover:not(.active) { color: #1e293b; background: #e0e7ff55; }
.ptab-pane { padding: 14px 16px; }
.ptab-msg {
  margin-top: 8px; font-size: .88rem; font-weight: 600; min-height: 20px;
}
.ptab-msg.ok { color: #059669; }
.ptab-msg.warn { color: #d97706; }
.ptab-msg.err { color: #dc2626; }

/* ── Manual Entry ────────────────────────────────────────────── */
.manual-entry { display: flex; flex-direction: column; gap: 10px; }
.manual-main-row {
  display: flex; gap: 8px; align-items: center;
}
.manual-name-inp {
  flex: 1; padding: 10px 14px; border: 2px solid #c7d2fe;
  border-radius: 9px; font-size: 1rem; background: #ffffff;
  transition: border .2s, box-shadow .2s;
}
.manual-name-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px #a5b4fc33; }
.manual-add-btn {
  padding: 10px 16px; font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
  color: #fff; border: none; border-radius: 9px; cursor: pointer;
  width: auto; margin: 0; line-height: 1;
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
  transition: transform .15s, box-shadow .15s;
}
.manual-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.35); }
.manual-meta-row {
  display: flex; gap: 10px;
}
.manual-meta-field {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.manual-meta-field label {
  font-size: .78rem; color: #64748b; font-weight: 600; margin: 0;
}
.manual-meta-field input {
  padding: 8px 10px; border: 1.5px solid #c7d2fe;
  border-radius: 8px; font-size: .95rem; text-align: center;
  background: #f8fafc;
}

/* ── Search Entry ────────────────────────────────────────────── */
.search-entry { display: flex; flex-direction: column; gap: 8px; }
.search-main-inp {
  width: 100%; padding: 10px 14px; border: 2px solid #c7d2fe;
  border-radius: 9px; font-size: 1rem; background: #ffffff;
  transition: border .2s, box-shadow .2s;
}
.search-main-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px #a5b4fc33; }
.search-results-list {
  max-height: 240px; overflow-y: auto; border-radius: 8px;
  border: 1px solid #e0e7ff;
}

/* ── Barcode Entry ───────────────────────────────────────────── */
.barcode-entry { display: flex; flex-direction: column; gap: 8px; }

/* ── Cart pcard ──────────────────────────────────────────────── */
.pcard-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #f1f5f9, #e0e7ff);
  padding: 10px 16px; font-weight: 700; color: #475569;
  font-size: .95rem; border-bottom: 1px solid #e0e7ff;
}
.cart-count-badge {
  background: #6366f1; color: #fff; border-radius: 20px;
  padding: 2px 10px; font-size: .78rem; font-weight: 700;
}
.cart-scroll { max-height: 280px; overflow-y: auto; }
.cart-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: none; margin: 0; border-radius: 0;
  overflow: visible; box-shadow: none; font-size: .85rem;
}
.cart-tbl th, .cart-tbl td {
  padding: 8px 6px; border-bottom: 1px solid #e0e7ff; text-align: right;
}
.cart-tbl th {
  background: #f1f5f9; color: #475569; font-weight: 700;
  border-bottom: 2px solid #c7d2fe; font-size: .82rem;
}
.cart-tbl tr:last-child td { border-bottom: none; }
.cart-tbl tr:hover td { background: #f8faff; }
.cart-row td { vertical-align: middle; }
.cart-idx { color: #94a3b8; font-size: .78rem; text-align: center; }
.cart-name-cell { font-weight: 600; color: #1e293b; font-size: .88rem; }
.cart-empty-row { text-align: center; padding: 28px 10px; color: #94a3b8; font-size: .9rem; }
.rm-btn {
  background: #fee2e2; color: #dc2626; border: none; border-radius: 6px;
  padding: 3px 8px; cursor: pointer; font-size: .8rem;
  font-weight: 700; width: auto; margin: 0; line-height: 1.4;
  transition: background .2s;
}
.rm-btn:hover { background: #fecaca; }

/* ── Totals pcard ────────────────────────────────────────────── */
.totals-pcard { padding: 14px 18px; }
.tot-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid #f1f5f9;
}
.tot-line:last-child { border-bottom: none; }
.tot-label { color: #64748b; font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tot-value { font-weight: 700; color: #1e293b; font-size: .9rem; }
.tot-neg { color: #dc2626; }
.tot-pos { color: #059669; }
.tot-grand-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 4px; margin-top: 6px; border-top: 2px solid #6366f1;
  font-weight: 800; font-size: 1rem; color: #1e293b;
}
.grand-number { font-size: 1.45rem; font-weight: 900; color: #6366f1; }

/* ── Payment pcard ───────────────────────────────────────────── */
.pay-pcard { padding-bottom: 4px; }
.pay-method {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #f1f5f9;
}
.pay-method:last-of-type { border-bottom: none; }
.pay-ico { font-size: 1.2rem; }
.pay-name { font-weight: 600; color: #475569; font-size: .9rem; min-width: 52px; }
.pay-inp {
  flex: 1; padding: 8px 10px; border: 1.5px solid #c7d2fe;
  border-radius: 8px; font-size: 1rem; background: #ffffff;
  text-align: center; transition: border .2s;
}
.pay-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 2px #a5b4fc33; }
.pay-cur { font-size: .8rem; color: #94a3b8; white-space: nowrap; }
.pay-summary-box {
  margin: 10px 16px; background: #ffffff; border-radius: 10px;
  padding: 10px 14px; border: 1px solid #e0e7ff;
}
.ps-row {
  display: flex; justify-content: space-between;
  font-size: .88rem; padding: 3px 0; color: #64748b;
}
.ps-grand { font-weight: 800; color: #1e293b; font-size: 1rem; }
.ps-rem { color: #dc2626; font-weight: 700; }
.ps-change { color: #059669; font-weight: 700; }
.fill-cash-btn {
  display: block; width: calc(100% - 32px); margin: 8px 16px 14px;
  padding: 8px; font-size: .85rem; font-weight: 700;
  background: #e0e7ff; color: #4338ca; border: none; border-radius: 8px;
  cursor: pointer; text-align: center; transition: background .2s;
}
.fill-cash-btn:hover { background: #c7d2fe; }

/* ── Actions pcard ───────────────────────────────────────────── */
.actions-pcard { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.btn-save {
  width: 100%; padding: 13px; font-size: 1.05rem; font-weight: 800;
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
  color: #fff; border: none; border-radius: 10px; cursor: pointer; margin: 0;
  box-shadow: 0 4px 14px rgba(5,150,105,0.25);
  transition: transform .15s, box-shadow .15s;
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); }
.action-row-2 { display: flex; gap: 8px; }
.btn-print2 {
  flex: 1; padding: 11px; font-size: .9rem; font-weight: 700; margin: 0;
  background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: transform .15s;
}
.btn-print2:hover { transform: translateY(-2px); }
.btn-clear2 {
  flex: 1; padding: 11px; font-size: .9rem; font-weight: 700; margin: 0;
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: transform .15s;
}
.btn-clear2:hover { transform: translateY(-2px); }
.pos-msg { font-weight: 600; font-size: .92rem; min-height: 20px; text-align: center; }
.pos-msg.ok { color: #059669; }
.pos-msg.warn { color: #d97706; }
.pos-msg.err { color: #dc2626; }

/* ── Sales History ───────────────────────────────────────────── */
.pos-history {
  margin-top: 24px; background: #fff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(80,110,255,0.09); overflow: hidden;
}
.history-hd {
  background: linear-gradient(90deg, #f1f5f9, #e0e7ff);
  padding: 12px 18px; font-weight: 700; color: #475569;
  border-bottom: 1px solid #e0e7ff; font-size: .95rem;
}
.history-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: none; margin: 0; border-radius: 0;
  overflow: visible; box-shadow: none;
}
.history-tbl th, .history-tbl td {
  padding: 10px 10px; border-bottom: 1px solid #e0e7ff; text-align: right;
}
.history-tbl th {
  background: #f8fafc; color: #475569; font-weight: 700;
  font-size: .85rem; border-bottom: 2px solid #c7d2fe;
}
.history-tbl tr:hover td { background: #f8faff; }
.history-tbl tr:last-child td { border-bottom: none; }
.hist-id { color: #94a3b8; font-size: .8rem; }
.hist-date { color: #64748b; font-size: .85rem; }
.hist-total { font-weight: 800; color: #6366f1; }
.edit-sale-btn {
  background: #e0e7ff; color: #4338ca; border: none; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: .82rem; font-weight: 700;
  width: auto; margin: 0; line-height: 1.5; transition: background .2s;
}
.edit-sale-btn:hover { background: #c7d2fe; transform: none; }
.no-data { text-align: center; padding: 24px; color: #94a3b8; font-size: .9rem; }

/* ── Sale Editor Modal ───────────────────────────────────────── */
.editor-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; padding: 16px;
}
.editor-modal {
  background: #fff; border-radius: 18px;
  width: min(1000px, 96vw); max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  overflow: hidden;
}
.editor-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #1e293b, #334155);
  color: #fff; padding: 14px 20px; font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
}
.editor-close {
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 1rem;
  font-weight: 700; width: auto; margin: 0;
  transition: background .2s;
}
.editor-close:hover { background: rgba(239,68,68,0.45); }
.editor-body {
  display: flex; gap: 0; flex: 1; overflow: hidden;
}
.editor-left {
  flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; border-left: 1px solid #e0e7ff;
}
.editor-right {
  width: 280px; padding: 18px; display: flex; flex-direction: column;
  gap: 14px; overflow-y: auto; background: #f8fafc;
  flex-shrink: 0;
}
.editor-section { display: flex; flex-direction: column; gap: 8px; }
.esec-title {
  font-weight: 700; color: #475569; font-size: .9rem;
  padding-bottom: 6px; border-bottom: 1px solid #e0e7ff;
}
.editor-cart-scroll { max-height: 220px; overflow-y: auto; border-radius: 8px; border: 1px solid #e0e7ff; }
.editor-cart-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: none; margin: 0; border-radius: 0;
  box-shadow: none; font-size: .85rem;
}
.editor-cart-tbl th, .editor-cart-tbl td {
  padding: 7px 8px; border-bottom: 1px solid #f1f5f9; text-align: right;
}
.editor-cart-tbl th {
  background: #f1f5f9; color: #475569; font-size: .8rem; font-weight: 700;
  border-bottom: 2px solid #c7d2fe;
}
.editor-cart-tbl tr:last-child td { border-bottom: none; }
.editor-add-row { display: flex; flex-direction: column; gap: 8px; }
.editor-search-row { display: flex; gap: 8px; align-items: center; }
.ed-inp {
  flex: 1; padding: 8px 10px; border: 1.5px solid #c7d2fe;
  border-radius: 8px; font-size: .9rem; background: #fff;
  transition: border .2s;
}
.ed-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 2px #a5b4fc33; }
.ed-sel {
  padding: 8px 10px; border: 1.5px solid #c7d2fe; border-radius: 8px;
  font-size: .9rem; background: #fff; color: #1e293b; transition: border .2s;
}
.ed-sel:focus { border-color: #6366f1; outline: none; }
.ed-add-btn {
  padding: 8px 14px; background: linear-gradient(90deg, #6366f1, #2563eb);
  color: #fff; border: none; border-radius: 8px; cursor: pointer;
  font-size: .9rem; font-weight: 700; width: auto; margin: 0;
  white-space: nowrap; transition: transform .15s;
}
.ed-add-btn:hover { transform: translateY(-1px); }
.ed-search-res {
  max-height: 160px; overflow-y: auto; border-radius: 8px;
  border: 1px solid #e0e7ff;
}
.ed-search-res-item {
  padding: 8px 12px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  border-bottom: 1px solid #f1f5f9; font-size: .88rem;
  transition: background .15s;
}
.ed-search-res-item:last-child { border-bottom: none; }
.ed-search-res-item:hover { background: #e0e7ff55; }
.ed-field { display: flex; flex-direction: column; gap: 4px; }
.ed-field label { font-size: .78rem; color: #64748b; font-weight: 600; margin: 0; }
.ed-pay-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #f1f5f9; gap: 8px;
}
.ed-pay-row:last-of-type { border-bottom: none; }
.ed-pay-row label { font-size: .88rem; font-weight: 600; color: #475569; white-space: nowrap; }
.ed-pay-inp {
  width: 100px; padding: 6px 8px; border: 1.5px solid #c7d2fe;
  border-radius: 7px; font-size: .9rem; text-align: center; background: #fff;
}
.ed-pay-inp:focus { border-color: #6366f1; outline: none; }
.ed-pay-warn { color: #dc2626; font-size: .82rem; font-weight: 600; margin-top: 4px; }
.editor-totals { background: #f1f5f9; border-radius: 10px; padding: 12px 14px; }
.ed-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem; padding: 4px 0; color: #64748b;
}
.ed-grand-row {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; color: #1e293b; font-size: 1rem;
  padding-top: 8px; margin-top: 4px; border-top: 2px solid #6366f1;
}
.ed-grand-row span:last-child { color: #6366f1; font-size: 1.15rem; }
.editor-actions {
  display: flex; gap: 8px; padding: 14px 18px;
  border-top: 1px solid #e0e7ff; background: #ffffff; flex-shrink: 0;
}
.editor-actions button {
  flex: 1; padding: 11px; font-size: .95rem; font-weight: 700; margin: 0;
}

/* ── POS body grid (new layout) ──────────────────────────────── */
.pos-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px; align-items: start;
}
.pos-main-col, .pos-side-col { display: flex; flex-direction: column; gap: 14px; }
.pos-side-col { max-height: calc(100vh - 200px); overflow-y: auto; }

/* ── Responsive (new POS) ────────────────────────────────────── */
@media (max-width: 900px) {
  .pos-body { grid-template-columns: 1fr; }
  .pos-side-col { max-height: none; }
  .pos-topbar { flex-direction: column; align-items: flex-start; }
  .pos-topbar-brand { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px; width: 100%; }
  .editor-body { flex-direction: column; }
  .editor-right { width: 100%; border-top: 1px solid #e0e7ff; }
}
@media (max-width: 640px) {
  .pos-topbar-fields { gap: 8px; }
  .pos-field-wrap { min-width: 0; flex: 1; }
  .ptab { font-size: .75rem; padding: 8px 4px; }
  .editor-modal { border-radius: 12px; max-height: 95vh; }
}

/* ══════════════════════════════════════════════════════════════
   Audit Log & Users pages
   ══════════════════════════════════════════════════════════════ */

/* ── Navigation extras ───────────────────────────────────────── */
.nav-user-info {
  margin-right: auto; color: #94a3b8; font-size: .82rem;
  padding: 6px 10px; white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.nav-role-admin {
  background: #6366f1; color: #fff; border-radius: 10px;
  padding: 1px 8px; font-size: .72rem; font-weight: 700;
}
.nav-role-cashier {
  background: #475569; color: #cbd5e1; border-radius: 10px;
  padding: 1px 8px; font-size: .72rem; font-weight: 700;
}

/* ── Page header row ─────────────────────────────────────────── */
.page-header-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.page-header-row h2 { margin: 0; }

/* ── Permission denied ───────────────────────────────────────── */
.perm-denied {
  text-align: center; padding: 60px 20px;
  font-size: 1.2rem; color: #ef4444; font-weight: 700;
}

/* ── Users table ─────────────────────────────────────────────── */
.users-add-card { margin-bottom: 24px; }
.users-tbl { width: 100%; }
.users-tbl .u-name-inp, .users-tbl .u-role-sel {
  padding: 6px 8px; border: 1.5px solid #c7d2fe; border-radius: 7px;
  font-size: .9rem; background: #ffffff; width: 100%;
}
.users-tbl .u-name-inp:focus, .users-tbl .u-role-sel:focus { border-color: #6366f1; outline: none; }
.users-tbl .u-pass-wrap { margin-top: 4px; }
.users-tbl .u-pass-inp {
  padding: 6px 8px; border: 1.5px solid #c7d2fe; border-radius: 7px;
  font-size: .85rem; background: #ffffff; width: 100%;
}
.users-tbl .u-actions { white-space: nowrap; }
.users-tbl .u-self-badge {
  font-size: .78rem; color: #6366f1; background: #e0e7ff;
  padding: 2px 8px; border-radius: 10px; font-weight: 700;
}
.u-date { font-size: .82rem; color: #94a3b8; }
.role-badge {
  display: inline-block; border-radius: 10px; padding: 2px 10px;
  font-size: .78rem; font-weight: 700;
}
.role-badge.admin { background: #e0e7ff; color: #4338ca; }
.role-badge.cashier { background: #f1f5f9; color: #475569; }

/* ── Audit log table ─────────────────────────────────────────── */
.audit-filter-row { margin-bottom: 14px; }
.audit-tbl { width: 100%; }
.audit-id { color: #94a3b8; font-size: .8rem; }
.audit-user { font-weight: 600; color: #1e293b; }
.audit-amt { font-weight: 700; color: #6366f1; }
.audit-note { font-size: .82rem; color: #64748b; max-width: 200px; }
.audit-date { font-size: .82rem; color: #64748b; white-space: nowrap; }
.audit-sale-link { color: #6366f1; font-weight: 700; text-decoration: none; }
.audit-sale-link:hover { text-decoration: underline; }
.audit-row-delete td { background: #fff5f5 !important; }
.audit-row-edit td { background: #fffbeb !important; }
.audit-badge {
  display: inline-block; border-radius: 8px; padding: 2px 10px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.audit-badge.create { background: #d1fae5; color: #065f46; }
.audit-badge.edit   { background: #fef3c7; color: #92400e; }
.audit-badge.delete { background: #fee2e2; color: #991b1b; }
.loading-msg { padding: 24px; text-align: center; color: #94a3b8; }

/* ── History table extras ────────────────────────────────────── */
.hist-by { font-size: .82rem; color: #64748b; }
.hist-actions { white-space: nowrap; }
.del-sale-btn {
  background: #fee2e2; color: #dc2626; border: none; border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: .82rem; font-weight: 700;
  width: auto; margin: 0 0 0 4px; line-height: 1.5; transition: background .2s;
}
.del-sale-btn:hover { background: #fecaca; transform: none; }

/* ── Editor audit section ────────────────────────────────────── */
.editor-audit {
  border-top: 1px solid #e0e7ff; background: #ffffff; flex-shrink: 0;
  max-height: 180px; overflow-y: auto;
}
.editor-audit-hd {
  padding: 8px 18px; font-weight: 700; color: #475569; font-size: .85rem;
  border-bottom: 1px solid #e0e7ff; background: #f1f5f9; position: sticky; top: 0;
}
.editor-audit-body { padding: 8px 16px; }
.audit-loading { font-size: .82rem; color: #94a3b8; }
.audit-tbl-mini {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: none; margin: 0; box-shadow: none; font-size: .82rem;
}
.audit-tbl-mini th, .audit-tbl-mini td {
  padding: 6px 8px; border-bottom: 1px solid #f1f5f9; text-align: right;
}
.audit-tbl-mini th {
  background: #ffffff; color: #64748b; font-weight: 700; font-size: .78rem;
  border-bottom: 1px solid #e0e7ff;
}
.audit-tbl-mini tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   v1.3 — أنواع العمليات + الدرج
   ═══════════════════════════════════════════════════════════════ */

/* ── أزرار نوع العملية ── */
.pos-topbar-optype {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 16px; background: #1e293b;
  border-top: 1px solid #334155; flex-wrap: wrap;
}
.optype-btn {
  padding: 7px 16px; border: 1.5px solid #334155;
  background: #0f172a; color: #94a3b8;
  border-radius: 8px; cursor: pointer; font-size: .9rem;
  transition: all .15s; font-weight: 600;
}
.optype-btn:hover { border-color: #6366f1; color: #a5b4fc; }
.optype-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ── لوحات العمليات ── */
.op-panel { padding: 0 20px 20px; }
.op-pcard { max-width: 520px; margin: 0 auto; }
.op-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0 0; }
.op-field { display: flex; flex-direction: column; gap: 5px; }
.op-field label { font-size: .82rem; color: #94a3b8; font-weight: 600; }
.op-field-full { grid-column: 1 / -1; }
.op-hint {
  grid-column: 1 / -1; font-size: .82rem; color: #f59e0b;
  background: #1e1a0a; border: 1px solid #78350f;
  border-radius: 8px; padding: 8px 12px; margin: 0;
}
.btn-op-save {
  grid-column: 1 / -1; padding: 12px; background: #6366f1;
  color: #fff; border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.btn-op-save:hover { background: #4f46e5; }
.btn-op-save:disabled { opacity: .6; cursor: not-allowed; }
.btn-damaged { background: #dc2626; }
.btn-damaged:hover { background: #b91c1c; }
.btn-exchange { background: #0891b2; }
.btn-exchange:hover { background: #0e7490; }
.btn-simcard { background: #7c3aed; }
.btn-simcard:hover { background: #6d28d9; }

/* راديو بطاقة الشحن */
.sc-pay-row { display: flex; gap: 18px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.sc-radio { display: flex; align-items: center; gap: 6px; font-size: .95rem;
  color: #e2e8f0; cursor: pointer; font-weight: 600; }
.sc-radio input[type="radio"] { width: auto; margin: 0; accent-color: #7c3aed; }

.selected-product-label {
  font-size: .85rem; color: #94a3b8; padding: 4px 0;
}
.selected-product-label.ok { color: #10b981; font-weight: 700; }

/* ── لوحة الدرج (اليومية) ── */
.drawer-panel {
  background: #1e293b; border: 1px solid #334155;
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.drawer-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 1rem; color: #e2e8f0; margin-bottom: 14px;
}
.drawer-status { font-size: .88rem; font-weight: 700; }
.drawer-open  { color: #10b981; }
.drawer-closed { color: #f87171; }

.drawer-warning {
  background: #1e1a0a; border: 1px solid #78350f;
  border-radius: 8px; padding: 10px 14px; color: #fbbf24;
  font-size: .85rem; margin-bottom: 14px;
}
.warn-days { font-weight: 700; margin-right: 6px; }

.drawer-session-info {
  background: #0f172a; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px;
}
.dsi-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid #1e293b;
  font-size: .88rem; color: #94a3b8;
}
.dsi-row:last-child { border-bottom: none; }
.dsi-row strong { color: #e2e8f0; }

.drawer-open-form, .drawer-close-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.drawer-open-form label, .drawer-close-form label {
  grid-column: 1 / -1; font-size: .82rem; color: #94a3b8;
  font-weight: 600; margin-top: 4px; margin-bottom: -4px;
}
.drawer-open-form .pos-input, .drawer-close-form .pos-input { grid-column: 1 / -1; }

.btn-open-drawer {
  grid-column: 1 / -1; padding: 11px; background: #10b981;
  color: #fff; border: none; border-radius: 10px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.btn-open-drawer:hover { background: #059669; }
.btn-open-drawer:disabled { opacity: .6; cursor: not-allowed; }

.btn-close-drawer {
  grid-column: 1 / -1; padding: 11px; background: #dc2626;
  color: #fff; border: none; border-radius: 10px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.btn-close-drawer:hover { background: #b91c1c; }
.btn-close-drawer:disabled { opacity: .6; cursor: not-allowed; }

/* ── سجل جلسات الدرج ── */
.drawer-history { margin-top: 28px; }
.drawer-history-hd {
  font-weight: 700; font-size: .95rem; color: #94a3b8;
  padding: 10px 0; border-bottom: 1px solid #334155;
  margin-bottom: 10px;
}
.drawer-status-badge {
  font-size: .78rem; font-weight: 700; padding: 2px 10px;
  border-radius: 20px; display: inline-block;
}
.badge-open   { background: #064e3b; color: #10b981; }
.badge-closed { background: #1e293b; color: #64748b; }

.diff-neg  { color: #f87171; font-weight: 700; }
.diff-pos  { color: #10b981; font-weight: 700; }
.diff-zero { color: #94a3b8; }

/* ── تحسينات pos-msg ── */
.pos-msg.warn { color: #f59e0b; background: #1e1a0a; border: 1px solid #78350f; }

/* ═══════════════════════════════════════════════════════════════
   v1.4 — التصنيفات + الأجهزة
   ═══════════════════════════════════════════════════════════════ */

/* ── شارات التصنيف ── */
.cat-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
}
.cat-phones   { background: #1e3a5f; color: #60a5fa; }
.cat-repair   { background: #1c2f1c; color: #4ade80; }
.cat-sims     { background: #2d1b4e; color: #c084fc; }
.cat-software { background: #1e2a3a; color: #38bdf8; }
.cat-other    { background: #1e293b; color: #94a3b8; }
.stock-zero   { color: #f87171; font-weight: 700; }

/* ── اختيار جهاز عند الدفع بالبطاقة ── */
.pay-device-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #0f172a;
  border: 1px solid #334155; border-radius: 8px; margin-top: 4px;
}
.pay-device-label { font-size: .82rem; color: #94a3b8; white-space: nowrap; }
.pay-device-sel {
  flex: 1; background: #1e293b; border: 1px solid #334155;
  color: #e2e8f0; border-radius: 6px; padding: 5px 8px; font-size: .85rem;
}

/* ── كروت الأجهزة ── */
.ncard-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 12px;
}
.ncard {
  background: #1e293b; border: 1px solid #334155;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  cursor: default; transition: border-color .15s;
}
.ncard-icon  { font-size: 2rem; margin-bottom: 8px; }
.ncard-name  { font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
.ncard-balance { font-size: 1.6rem; font-weight: 900; color: #6366f1; }
.ncard-label { font-size: .75rem; color: #64748b; margin-top: 2px; }
.ncard-restricted {
  margin-top: 8px; font-size: .72rem; color: #f59e0b;
  background: #1e1a0a; border-radius: 6px; padding: 3px 8px;
}
.ncard-total {
  display: flex; justify-content: space-between; align-items: center;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 10px; padding: 12px 18px; margin-bottom: 24px;
  color: #94a3b8; font-size: .9rem;
}
.ncard-total strong { color: #6366f1; font-size: 1.1rem; }

/* ── أقسام صفحة الأجهزة ── */
.net-section {
  background: #1e293b; border: 1px solid #334155;
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.net-section-title {
  font-weight: 700; font-size: .95rem; color: #94a3b8;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid #334155;
}
.net-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px; align-items: end;
}
.net-field { display: flex; flex-direction: column; gap: 5px; }
.net-field label { font-size: .8rem; color: #64748b; font-weight: 600; }

.btn-net-transfer {
  padding: 10px 18px; background: #0891b2; color: #fff;
  border: none; border-radius: 8px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-net-transfer:hover { background: #0e7490; }
.btn-net-deposit {
  padding: 10px 18px; background: #10b981; color: #fff;
  border: none; border-radius: 8px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-net-deposit:hover { background: #059669; }
.btn-net-withdraw {
  padding: 10px 18px; background: #dc2626; color: #fff;
  border: none; border-radius: 8px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-net-withdraw:hover { background: #b91c1c; }

/* ── تبويبات الأجهزة ── */
.net-device-tabs {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.net-dev-tab {
  padding: 6px 16px; background: #0f172a;
  border: 1.5px solid #334155; color: #94a3b8;
  border-radius: 8px; cursor: pointer; font-size: .85rem; font-weight: 600;
}
.net-dev-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; }

@media (max-width: 600px) {
  .net-form { grid-template-columns: 1fr 1fr; }
  .ncard-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   v1.5 — المشتريات + العمولات + شحن اليوزرات
   ═══════════════════════════════════════════════════════════════ */

/* ── شحن اليوزر ── */
.sim-charge-box {
  background: #0f172a; border: 1px solid #334155;
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.sim-charge-title {
  font-weight: 700; color: #a78bfa; margin-bottom: 12px; font-size: .95rem;
}
.sim-charge-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; align-items: end;
}
.sim-field { display: flex; flex-direction: column; gap: 4px; }
.sim-field label { font-size: .78rem; color: #64748b; font-weight: 600; }
.btn-sim-charge {
  padding: 10px 14px; background: #7c3aed; color: #fff;
  border: none; border-radius: 8px; font-weight: 700;
  cursor: pointer; white-space: nowrap; grid-column: 1 / -1;
}
.btn-sim-charge:hover { background: #6d28d9; }
.btn-sim-charge:disabled { opacity: .6; cursor: not-allowed; }

/* ── العمولات ── */
.comm-tiles { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.comm-summary {
  background: #1e293b; border: 1px solid #334155;
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.comm-summary-title {
  font-weight: 700; color: #94a3b8; margin-bottom: 12px; font-size: .9rem;
}
.comm-cashier-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid #334155;
}
.comm-cashier-row:last-child { border-bottom: none; }
.comm-cashier-name  { font-weight: 700; color: #e2e8f0; flex: 1; }
.comm-cashier-total { color: #f59e0b; font-weight: 700; }
.btn-pay-all {
  padding: 7px 14px; background: #10b981; color: #fff;
  border: none; border-radius: 8px; font-size: .85rem;
  font-weight: 700; cursor: pointer;
}
.btn-pay-all:hover { background: #059669; }
.btn-pay-all:disabled { opacity: .6; cursor: not-allowed; }

.comm-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.comm-tab {
  padding: 7px 18px; background: #0f172a;
  border: 1.5px solid #334155; color: #94a3b8;
  border-radius: 8px; cursor: pointer; font-weight: 600;
}
.comm-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; }

.comm-amount { color: #10b981; font-size: 1rem; }
.comm-badge {
  display: inline-block; padding: 2px 10px;
  border-radius: 20px; font-size: .78rem; font-weight: 700;
}
.comm-pending { background: #1e1a0a; color: #f59e0b; }
.comm-paid    { background: #064e3b; color: #10b981; }

/* ── Reports ─────────────────────────────────────────────────────────────────── */
.profit-pos-tile { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); }
.tile-sub { font-size: .78rem; color: #94a3b8; margin-top: 2px; }

/* Bar chart */
.chart-container {
  display: flex; align-items: flex-end; gap: 4px;
  height: 160px; overflow-x: auto; padding: 8px 0 0;
  margin-bottom: 20px;
}
.chart-bar-wrap {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 28px; max-width: 60px; height: 100%;
  cursor: default;
}
.chart-bar {
  width: 100%; background: #6366f1; border-radius: 4px 4px 0 0;
  transition: background .2s;
}
.chart-bar-wrap:hover .chart-bar { background: #818cf8; }
.chart-label { font-size: 10px; color: #64748b; margin-top: 4px; white-space: nowrap; }

/* ── Sales history search bar ────────────────────────────────────────────────── */
.history-search-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; background: #0f172a; border-bottom: 1px solid #334155;
}

/* ── Low stock ───────────────────────────────────────────────────────────────── */
.lowstock-banner {
  background: #1c0a0a; border: 1px solid #dc2626; color: #fca5a5;
  border-radius: 8px; padding: 10px 16px; margin-bottom: 12px;
  font-size: .9rem;
}
.stock-low { color: #f59e0b; font-weight: 700; }

/* ── Account page ────────────────────────────────────────────────────────────── */
.pos-msg.ok   { color: #10b981; }
.pos-msg.warn { color: #f59e0b; }
.pos-msg.error { color: #ef4444; }

/* ── POS: الميزانية التلقائية ────────────────────────────────────────────────── */
.pos-budget-label {
  display: inline-block; padding: 5px 14px;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 8px; color: #818cf8; font-weight: 700;
  font-size: .9rem; min-width: 90px; text-align: center;
}

/* ── POS: tab موحد بحث/قائمة/باركود ─────────────────────────────────────────── */
.lookup-entry { padding: 10px 12px; }
.lookup-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.lookup-row .search-main-inp { flex: 1; }
.lookup-grid-header { margin: 8px 0 4px; }

/* ── اليوزرات ────────────────────────────────────────────────────────────────── */
.sim-users-total {
  padding: 10px 16px; background: #0f172a;
  border: 1px solid #334155; border-radius: 8px;
  margin-bottom: 12px; font-size: .95rem; color: #cbd5e1;
}
.sim-users-total strong { color: #10b981; font-size: 1.1rem; }

.su-amount { color: #f59e0b; font-weight: 700; font-size: 1rem; }
.su-edit-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.su-inp {
  padding: 6px 10px; border: 1.5px solid #6366f1; border-radius: 7px;
  background: #fff; color: #111827; font-size: .95rem;
  width: 110px; margin: 0;
}
.su-inp:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* ── ميزانية الشبكة (card خاص) ───────────────────────────────────────────────── */
.network-budget-card {
  background: linear-gradient(135deg, #0c1a2e 0%, #1e3a5f 100%);
  border-color: #2563eb; cursor: default;
}
.network-budget-card .bcard-balance { color: #60a5fa; }

/* ── تبويبات التقارير ──────────────────────────────────────────────────────── */
.report-tabs {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.rtab {
  padding: 8px 18px; border-radius: 8px; border: 1px solid #334155;
  background: #1e293b; color: #94a3b8; cursor: pointer; font-size: .9rem;
  transition: all .15s;
}
.rtab:hover { background: #334155; color: #e2e8f0; }
.rtab.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* ── التقرير الشهري ────────────────────────────────────────────────────────── */
.month-day-card {
  background: #1e293b; border: 1px solid #334155; border-radius: 10px;
  margin-bottom: 16px; overflow: hidden;
}
.month-day-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #0f172a; font-size: .95rem;
  border-bottom: 1px solid #334155;
}
.month-day-total { color: #10b981; font-weight: 700; font-size: 1rem; }
.month-day-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.month-day-table th, .month-day-table td {
  padding: 7px 12px; border-bottom: 1px solid #0f172a; text-align: right;
}
.month-day-table thead th { background: #151f30; color: #94a3b8; font-weight: 600; }
.month-items-cell { max-width: 400px; }
.month-item {
  display: inline-block; background: #0f172a; border: 1px solid #334155;
  border-radius: 4px; padding: 2px 6px; margin: 2px; font-size: .8rem; color: #cbd5e1;
}
.num-cell { color: #f59e0b; font-weight: 600; }

/* ── منتجات أساسية tab ───────────────────────────────────────── */
.pos2-basics { padding: 12px 14px; }
.pos2-basics-hint { font-size: .82rem; color: #94a3b8; margin: 0 0 10px; }
.pos2-basics-empty { color: #94a3b8; font-size: .9rem; padding: 10px 0; }
.pos2-basics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.pos2-basics-item {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 1.5px solid #4f46e5;
  border-radius: 10px; padding: 12px 10px;
  text-align: center; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.pos2-basics-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99,102,241,0.35); }
.pos2-basics-name { font-weight: 700; font-size: .88rem; color: #e0e7ff; margin-bottom: 4px; }
.pos2-basics-price { font-size: 1rem; font-weight: 800; color: #a5b4fc; }
.pos2-basics-cat { font-size: .72rem; color: #6366f1; margin-top: 4px; }

/* ── شرائح tab ───────────────────────────────────────────────── */
.pos2-sims { padding: 12px 14px; }
.pos2-sims-form { display: flex; flex-direction: column; gap: 10px; }
.pos2-sims-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ══════════════════════════════════════════════════════════════
   POS2 — تصميم صفحة المبيعات الكامل
   ══════════════════════════════════════════════════════════════ */

.pos2-wrap {
  display: flex; flex-direction: column; gap: 0;
  background: #0f172a; min-height: calc(100vh - 56px);
  padding: 0; margin: -18px -18px 0;
}

/* ── هيدر ── */
.pos2-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
  position: sticky; top: 56px; z-index: 50;
}
.pos2-brand { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid #334155; }
.pos2-brand-icon { font-size: 1.5rem; }
.pos2-brand-name { font-weight: 800; font-size: 1rem; color: #f1f5f9; }
.pos2-clock { font-size: .75rem; color: #64748b; margin-top: 1px; }
.pos2-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.pos2-op {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 16px; background: #1e293b; color: #94a3b8;
  border: 1.5px solid #334155; border-radius: 10px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  width: auto; margin: 0; transition: all .15s;
}
.pos2-op:hover { background: #334155; color: #e2e8f0; border-color: #475569; transform: none; box-shadow: none; }
.pos2-op.active { background: #6366f1; border-color: #6366f1; color: #fff; box-shadow: 0 2px 10px rgba(99,102,241,0.35); }
.pos2-op-icon { font-size: 1.1rem; }

/* ── panel ── */
.pos2-body {
  display: grid; grid-template-columns: 1fr 340px; gap: 14px;
  padding: 14px 16px; align-items: start;
}
@media (max-width: 860px) { .pos2-body { grid-template-columns: 1fr; } }

.pos2-left { display: flex; flex-direction: column; gap: 12px; }
.pos2-right { display: flex; flex-direction: column; gap: 10px; }

/* ── card داخل POS ── */
.pos2-card {
  background: #1e293b; border: 1px solid #334155;
  border-radius: 14px; overflow: hidden;
}
.pos2-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #0f172a;
  border-bottom: 1px solid #334155;
  font-weight: 700; font-size: .9rem; color: #e2e8f0;
}
.pos2-cart-badge {
  background: #6366f1; color: #fff; border-radius: 20px;
  padding: 2px 10px; font-size: .75rem; font-weight: 700;
}

/* ── تبويبات الإضافة ── */
.pos2-card-tabs {
  display: flex; background: #0f172a;
  border-bottom: 1px solid #334155; overflow-x: auto;
}
.pos2-tab {
  flex: 1; padding: 10px 8px; font-weight: 700; font-size: .78rem;
  color: #64748b; cursor: pointer; border: none; background: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s; white-space: nowrap;
  width: auto; margin-top: 0; box-shadow: none;
}
.pos2-tab:hover:not(.active) { color: #cbd5e1; background: #1e293b44; transform: none; }
.pos2-tab.active { color: #a5b4fc; border-bottom-color: #6366f1; background: #1e293b; }
.pos2-tab-pane { padding: 14px 16px; }

/* ── يدوي ── */
.pos2-manual { display: flex; flex-direction: column; gap: 10px; }
.pos2-manual-top { display: flex; gap: 8px; align-items: center; }
.pos2-main-inp {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid #334155; border-radius: 9px;
  font-size: 1rem; background: #0f172a; color: #f1f5f9;
  transition: border .2s; width: auto; margin: 0;
}
.pos2-main-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.pos2-main-inp::placeholder { color: #475569; }
.pos2-add-btn {
  padding: 10px 18px; font-size: 1rem; font-weight: 800;
  background: linear-gradient(90deg, #6366f1, #2563eb);
  color: #fff; border: none; border-radius: 9px; cursor: pointer;
  width: auto; margin: 0; transition: transform .15s;
}
.pos2-add-btn:hover { transform: translateY(-1px); }
.pos2-manual-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.pos2-meta-field { flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: 4px; }
.pos2-meta-field label { font-size: .75rem; color: #64748b; font-weight: 600; margin: 0; }
.pos2-meta-field input, .pos2-meta-field select {
  padding: 8px 10px; border: 1.5px solid #334155;
  border-radius: 8px; font-size: .9rem;
  background: #0f172a; color: #f1f5f9; margin: 0;
}
.pos2-meta-field input:focus, .pos2-meta-field select:focus { border-color: #6366f1; outline: none; }

/* ── بحث ── */
.pos2-lookup { display: flex; flex-direction: column; gap: 8px; }
.pos2-lookup-top { display: flex; gap: 8px; align-items: center; }
.pos2-qty-wrap { display: flex; flex-direction: column; gap: 3px; }
.pos2-qty-wrap label { font-size: .72rem; color: #64748b; font-weight: 600; }
.pos2-qty-wrap input { width: 72px; padding: 8px 8px; border: 1.5px solid #334155; border-radius: 8px; background: #0f172a; color: #f1f5f9; font-size: .95rem; margin: 0; text-align: center; }
.pos2-search-results { max-height: 220px; overflow-y: auto; border-radius: 8px; border: 1px solid #334155; }
.pos2-search-results .search-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid #1e293b;
  cursor: pointer; transition: background .12s;
}
.pos2-search-results .search-item:hover { background: #334155; }
.pos2-search-results .search-item:last-child { border-bottom: none; }
.pos2-search-results .si-name { font-weight: 600; color: #e2e8f0; font-size: .9rem; }
.pos2-search-results .si-bc { font-size: .72rem; color: #64748b; display: block; }
.pos2-search-results .si-price { color: #a5b4fc; font-weight: 700; font-size: .9rem; }
.pos2-search-results .si-stock { font-size: .75rem; color: #64748b; }
.pos2-search-results .si-stock.out { color: #f87171; }
.pos2-search-results .si-right { text-align: left; }
.pos2-grid-toggle {
  background: #334155; color: #94a3b8; border: 1px solid #475569;
  border-radius: 8px; padding: 7px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; width: auto; margin: 0; transition: background .15s;
}
.pos2-grid-toggle:hover { background: #475569; color: #e2e8f0; transform: none; }
.pos2-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 4px;
}
.pos2-grid .pgrid-item {
  background: #0f172a; border: 1.5px solid #334155;
  border-radius: 10px; padding: 10px 8px; text-align: center;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.pos2-grid .pgrid-item:hover { border-color: #6366f1; transform: translateY(-2px); }
.pos2-grid .pgrid-item .pg-name { font-weight: 700; font-size: .78rem; color: #e2e8f0; margin-bottom: 4px; word-break: break-word; }
.pos2-grid .pgrid-item .pg-price { font-size: .9rem; font-weight: 800; color: #a5b4fc; }
.pos2-grid .pgrid-item .pg-stock { font-size: .7rem; color: #64748b; margin-top: 2px; }
.pos2-grid .pgrid-item.oos { opacity: .4; cursor: not-allowed; }
.pos2-msg { font-size: .85rem; font-weight: 600; min-height: 18px; padding: 2px 0; }
.pos2-msg.ok { color: #4ade80; }
.pos2-msg.warn { color: #fbbf24; }
.pos2-msg.error { color: #f87171; }

/* ── سلة ── */
.pos2-cart-scroll { max-height: 300px; overflow-y: auto; }
.pos2-cart-tbl {
  width: 100%; border-collapse: collapse; margin: 0; background: none;
  font-size: .83rem; box-shadow: none; border-radius: 0;
}
.pos2-cart-tbl th, .pos2-cart-tbl td {
  padding: 8px 8px; border-bottom: 1px solid #334155; text-align: right;
}
.pos2-cart-tbl th { background: #0f172a; color: #64748b; font-size: .75rem; font-weight: 700; border-bottom: 2px solid #334155; }
.pos2-cart-tbl tr:last-child td { border-bottom: none; }
.pos2-cart-tbl tr:hover td { background: #ffffff08; }
.pos2-cart-empty { text-align: center; padding: 28px 10px; color: #475569; font-size: .9rem; }
.pos2-cart-tbl .qty-e, .pos2-cart-tbl .price-e {
  width: 70px; padding: 5px 6px; border: 1.5px solid #334155; border-radius: 6px;
  background: #0f172a; color: #f1f5f9; font-size: .85rem; text-align: center; margin: 0;
}
.pos2-cart-tbl .qty-e:focus, .pos2-cart-tbl .price-e:focus { border-color: #6366f1; outline: none; }
.pos2-cart-tbl .rm-btn {
  background: #450a0a; color: #f87171; border: 1px solid #7f1d1d;
  border-radius: 6px; padding: 3px 8px; cursor: pointer;
  font-size: .78rem; font-weight: 700; width: auto; margin: 0; line-height: 1.4;
}
.pos2-cart-tbl .rm-btn:hover { background: #7f1d1d; }
.pos2-cart-tbl .cart-idx { color: #475569; font-size: .75rem; text-align: center; }
.pos2-cart-tbl .cart-name-cell { font-weight: 600; color: #e2e8f0; }

/* ── يمين: ميزانية + ملاحظة ── */
.pos2-meta-card { padding: 12px 14px; }
.pos2-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos2-meta-lbl { font-size: .82rem; color: #64748b; font-weight: 600; white-space: nowrap; }
.pos2-budget-chip {
  background: #1e1b4b; border: 1px solid #4f46e5; color: #a5b4fc;
  border-radius: 20px; padding: 3px 12px; font-size: .82rem; font-weight: 700;
}
.pos2-notes-inp {
  flex: 1; padding: 6px 10px; border: 1.5px solid #334155; border-radius: 8px;
  background: #0f172a; color: #f1f5f9; font-size: .88rem; margin: 0;
}
.pos2-notes-inp:focus { border-color: #6366f1; outline: none; }

/* ── إجماليات ── */
.pos2-totals-card { padding: 12px 16px; }
.pos2-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #334155; font-size: .88rem;
}
.pos2-tot-row:last-child { border-bottom: none; }
.pos2-tot-row span { color: #94a3b8; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pos2-tot-val { font-weight: 700; color: #e2e8f0; }
.pos2-tot-neg { font-weight: 700; color: #f87171; }
.pos2-tot-pos { font-weight: 700; color: #4ade80; }
.pos2-grand-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 4px; margin-top: 6px; border-top: 2px solid #6366f1;
  font-weight: 800; font-size: .95rem; color: #e2e8f0;
}
.pos2-grand-val { font-size: 1.4rem; font-weight: 900; color: #a5b4fc; }
.pos2-mini-sel {
  padding: 3px 6px; border: 1px solid #334155; border-radius: 5px;
  background: #0f172a; color: #94a3b8; font-size: .78rem; margin: 0; width: auto;
}
.pos2-mini-inp {
  width: 60px; padding: 4px 6px; border: 1px solid #334155; border-radius: 5px;
  background: #0f172a; color: #f1f5f9; font-size: .82rem; margin: 0; text-align: center;
}

/* ── الدفع ── */
.pos2-pay-grid { display: flex; flex-direction: column; }
.pos2-pay-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid #334155;
}
.pos2-pay-item span { font-weight: 600; color: #94a3b8; font-size: .88rem; min-width: 52px; }
.pos2-pay-inp {
  flex: 1; padding: 7px 10px; border: 1.5px solid #334155; border-radius: 8px;
  background: #0f172a; color: #f1f5f9; font-size: 1rem; text-align: center; margin: 0;
  transition: border .2s;
}
.pos2-pay-inp:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
.pos2-pay-summary {
  margin: 10px 14px; background: #0f172a; border-radius: 10px;
  padding: 10px 12px; border: 1px solid #334155;
}
.pos2-ps-row {
  display: flex; justify-content: space-between;
  font-size: .85rem; padding: 3px 0; color: #64748b;
}
.pos2-ps-grand { font-weight: 800; color: #a5b4fc; font-size: .95rem; }
.pos2-ps-rem { color: #f87171; font-weight: 700; }
.pos2-ps-chg { color: #4ade80; font-weight: 700; }
.pos2-fill-btn {
  display: block; width: calc(100% - 28px); margin: 6px 14px 12px;
  padding: 7px; font-size: .82rem; font-weight: 700;
  background: #1e293b; color: #64748b; border: 1px solid #334155;
  border-radius: 8px; cursor: pointer; text-align: center; transition: background .15s;
}
.pos2-fill-btn:hover { background: #334155; color: #e2e8f0; transform: none; }

/* ── أزرار الحفظ ── */
.pos2-actions { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pos2-btn-save {
  width: 100%; padding: 14px; font-size: 1.05rem; font-weight: 800;
  background: linear-gradient(90deg, #059669, #10b981);
  color: #fff; border: none; border-radius: 12px; cursor: pointer; margin: 0;
  box-shadow: 0 4px 16px rgba(5,150,105,0.3); transition: transform .15s, box-shadow .15s;
}
.pos2-btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.4); }
.pos2-btn-save:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.pos2-actions-row2 { display: flex; gap: 8px; }
.pos2-btn-print {
  flex: 1; padding: 10px; font-size: .88rem; font-weight: 700; margin: 0;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: transform .15s;
}
.pos2-btn-print:hover { transform: translateY(-1px); }
.pos2-btn-clear {
  flex: 1; padding: 10px; font-size: .88rem; font-weight: 700; margin: 0;
  background: linear-gradient(90deg, #ef4444, #f97316);
  color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: transform .15s;
}
.pos2-btn-clear:hover { transform: translateY(-1px); }

/* ── سجل ── */
.pos2-history {
  margin: 0 16px 20px; background: #1e293b; border: 1px solid #334155;
  border-radius: 14px; overflow: hidden;
}
.pos2-history-hd {
  padding: 12px 16px; background: #0f172a; font-weight: 700;
  color: #94a3b8; border-bottom: 1px solid #334155; font-size: .9rem;
}
.pos2-history-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; background: #0f172a; border-bottom: 1px solid #334155;
}
.pos2-history-filters input, .pos2-history-filters select {
  background: #1e293b; border: 1.5px solid #334155; color: #e2e8f0;
  border-radius: 8px; padding: 7px 10px; font-size: .85rem; margin: 0;
}
.pos2-history-filters input:focus, .pos2-history-filters select:focus { border-color: #6366f1; outline: none; }

/* ── العمليات الأخرى (سحب/تالف/استبدال/شحن) ── */
.pos2-op-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 24px 16px; min-height: 300px;
}
.pos2-op-card {
  background: #1e293b; border: 1px solid #334155; border-radius: 16px;
  padding: 24px; width: min(480px, 100%);
}
.pos2-op-title {
  font-size: 1.15rem; font-weight: 800; color: #e2e8f0; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid #334155;
}
.pos2-op-simcard { border-color: #0e7490; }
.pos2-op-withdrawal { border-color: #b45309; }
.pos2-op-damaged { border-color: #b91c1c; }
.pos2-op-exchange { border-color: #0e7490; }
.pos2-op-form { display: flex; flex-direction: column; gap: 12px; }
.pos2-op-field { display: flex; flex-direction: column; gap: 5px; }
.pos2-op-field label { font-size: .82rem; color: #64748b; font-weight: 600; }
.pos2-op-field input, .pos2-op-field select {
  padding: 9px 12px; border: 1.5px solid #334155; border-radius: 9px;
  background: #0f172a; color: #f1f5f9; font-size: .95rem; margin: 0;
}
.pos2-op-field input:focus, .pos2-op-field select:focus { border-color: #6366f1; outline: none; }
.pos2-op-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pos2-radio-row { display: flex; gap: 16px; padding: 6px 0; }
.pos2-radio { display: flex; align-items: center; gap: 6px; color: #94a3b8; font-size: .9rem; font-weight: 600; cursor: pointer; }
.pos2-radio input[type="radio"] { width: auto; margin: 0; }
.pos2-op-btn {
  padding: 12px; font-size: .95rem; font-weight: 800; border: none;
  border-radius: 10px; cursor: pointer; color: #fff; transition: transform .15s; margin: 4px 0 0;
}
.pos2-op-btn:hover { transform: translateY(-1px); }
.pos2-op-btn-purple { background: linear-gradient(90deg, #7c3aed, #6366f1); }
.pos2-op-btn-red    { background: linear-gradient(90deg, #dc2626, #f97316); }
.pos2-op-btn-orange { background: linear-gradient(90deg, #d97706, #ef4444); }
.pos2-op-btn-teal   { background: linear-gradient(90deg, #0891b2, #0ea5e9); }
.pos2-hint { font-size: .83rem; color: #64748b; background: #0f172a; border-radius: 8px; padding: 8px 12px; margin: 0; }
.pos2-selected-lbl { font-size: .85rem; font-weight: 600; color: #4ade80; }
.selected-product-label.ok { color: #4ade80; }

/* ── شرائح ── */
.pos2-sims { padding: 4px 0; }
.pos2-sims-form { display: flex; flex-direction: column; gap: 12px; }
.pos2-sims-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pos2-sims label { font-size: .82rem; color: #64748b; font-weight: 600; margin: 0; }
.pos2-sims input, .pos2-sims select {
  padding: 9px 12px; border: 1.5px solid #334155; border-radius: 8px;
  background: #0f172a; color: #f1f5f9; font-size: .9rem; margin: 0;
}
.pos2-sims input:focus, .pos2-sims select:focus { border-color: #6366f1; outline: none; }