:root {
  --color-primary: #1d5fa8;
  --color-primary-dark: #164a86;
  --color-primary-light: #e5eef8;
  --color-bg: #f4f6f8;
  --color-surface: #fff;
  --color-border: #dde3e9;
  --color-text: #1c2733;
  --color-text-muted: #64707c;
  --color-success: #1a7f37;
  --color-danger: #c0392b;
  --color-danger-light: #fdeceb;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(20, 30, 45, 0.08);
  --shadow-md: 0 4px 16px rgba(20, 30, 45, 0.12);
  --shadow-lg: 0 12px 40px rgba(20, 30, 45, 0.2);

  --font-sans: "Segoe UI", "Cairo", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}
/* height (not min-height): the pos screen must be a fixed viewport-height box
   so its flex children's own overflow:auto areas (cart-lines, results-grid)
   scroll internally instead of the whole page growing and pushing the
   pay button off-screen once the cart has many lines. */
.screen { height: 100vh; display: flex; align-items: center; justify-content: center; }

.login-screen-bg, #login-screen, #session-screen {
  background: linear-gradient(160deg, #f6f2f5 0%, var(--color-bg) 60%);
}

.login-box {
  background: var(--color-surface);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.login-box h1 {
  font-size: 21px; margin: 0 0 var(--space-2); text-align: center; font-weight: 700;
  color: var(--color-text);
}
.login-box::before {
  content: "🧾";
  display: block;
  width: 56px; height: 56px; margin: 0 auto var(--space-2);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: var(--shadow-md);
}
.login-box input, .login-box select {
  padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; background: var(--color-surface); color: var(--color-text);
  transition: border-color .15s;
}
.login-box input:focus, .login-box select:focus {
  outline: none; border-color: var(--color-primary);
}
.login-box button, .pay-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .05s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-box button:hover, .pay-btn:hover { background: var(--color-primary-dark); }
.login-box button:active, .pay-btn:active { transform: scale(0.98); }
.error { color: var(--color-danger); min-height: 18px; margin: 0; font-size: 13px; }
.other-sessions-title { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 6px; }
.other-sessions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.other-sessions-list li {
  display: flex; justify-content: space-between; gap: 8px; font-size: 13px;
  background: var(--color-bg); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--color-text-muted);
}
.other-sessions-list .os-config { color: var(--color-text); }
.other-sessions-list .os-user { font-weight: 600; }
.link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-btn:hover { background: var(--color-primary-light); }

/* ---------- icons ---------- */
.btn-icon {
  width: 17px;
  height: 17px;
  flex: none;
  vertical-align: middle;
}
.pay-btn .btn-icon { width: 19px; height: 19px; }
.pay-btn:disabled .btn-icon { opacity: .6; }

/* ---------- loading state ---------- */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- toasts ---------- */
#toast-container {
  position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--space-2); z-index: 100;
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--color-text); color: #fff; padding: 12px 20px; border-radius: var(--radius-md);
  font-size: 14px; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-error { background: var(--color-danger); }
.toast.toast-success { background: var(--color-success); }

.pos-layout { align-items: stretch; padding: 0; }
.pos-left { flex: 1; display: flex; flex-direction: column; padding: var(--space-3); overflow: hidden; min-width: 0; }
.pos-right {
  width: 360px; flex: none; background: var(--color-surface); display: flex; flex-direction: column;
  padding: var(--space-3); border-right: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* narrow screens (phone / small tablet in portrait): the fixed 360px cart
   panel next to a shrinking product grid is what squeezed cart-line text
   into unreadable wrapping. Below this width, stack product grid above cart
   instead of splitting them side by side. */
@media (max-width: 760px) {
  .pos-layout { flex-direction: column; }
  .pos-left { flex: 1 1 55%; min-height: 0; }
  .pos-right { width: 100%; flex: 1 1 45%; min-height: 0; border-right: none; border-top: 1px solid var(--color-border); }
  .results-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.customer-btn {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px; margin-bottom: var(--space-2); cursor: pointer; font-size: 14px; text-align: right;
  transition: background .15s;
  display: flex; align-items: center; gap: 8px; width: 100%; color: var(--color-text);
}
.customer-btn .btn-icon { color: var(--color-text-muted); }
.customer-btn:hover { background: var(--color-primary-light); }
#customer-search { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 15px; }

.topbar {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  flex-wrap: wrap; background: var(--color-surface); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
#search-input {
  flex: 1; min-width: 180px;
  padding: 12px 14px;
  font-size: 17px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
}
#search-input:focus { outline: none; border-color: var(--color-primary); }
.user-name { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.conn-indicator { display: inline-flex; align-items: center; flex: none; }
.conn-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted);
  transition: background-color .2s;
}
.conn-indicator.online .conn-dot { background: var(--color-success); }
.conn-indicator.offline .conn-dot { background: var(--color-danger); animation: connPulse 1.2s ease-in-out infinite; }
@keyframes connPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.topbar .link-btn {
  background: var(--color-bg); white-space: nowrap; font-size: 13px;
}
.topbar .link-btn:hover { background: var(--color-primary-light); text-decoration: none; }

.category-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--space-2); }
.category-chip {
  padding: 6px 16px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: 13px; cursor: pointer; white-space: nowrap; flex: none; transition: background .15s;
}
.category-chip:hover { background: var(--color-bg); }
.category-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.results-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  align-content: start;
  padding: 2px;
}
.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-height: 84px;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card:active { transform: translateY(0); }
.product-card .pimg { width: 100%; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg); margin-bottom: 2px; }
.product-card .pname { font-size: 14px; line-height: 1.35; flex: 1; }
.product-card.no-image .pname { font-size: 14.5px; font-weight: 600; }
.pcard-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.product-card .pprice { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.product-card .puom { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-badge {
  position: absolute; top: -6px; left: -6px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}

/* ---------- empty states ---------- */
.empty-state {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: var(--space-6) var(--space-3); color: var(--color-text-muted); text-align: center;
}
.empty-state svg { opacity: .5; }
.empty-state p { margin: 0; font-size: 14px; }
.cart-lines .empty-state { height: 100%; }

.cart-lines { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--space-3); }
/* two-row grid: name+delete on row 1 (name can wrap freely, never squeezed
   below readability), qty/price/discount/total on row 2. This layout can't
   collapse into the character-by-character wrap a single flex row got into
   on narrow screens, because nothing here fights the name column for width. */
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name remove" "meta meta";
  align-items: start;
  column-gap: var(--space-2);
  row-gap: 6px;
  border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3);
}
.cart-line .cl-name { grid-area: name; font-size: 14px; min-width: 0; line-height: 1.4; word-break: break-word; }
.cart-line .cl-name small { color: var(--color-text-muted); font-weight: 400; }
.cart-line .cl-remove { grid-area: remove; }
.cart-line .cl-meta {
  grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
}
.refund-line-check { width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.cart-line .cl-qty { display: flex; align-items: center; gap: 6px; flex: none; }
.cart-line .cl-qty button {
  width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-bg); cursor: pointer; font-size: 15px; line-height: 1; flex: none;
}
.cart-line .cl-qty button:hover { background: var(--color-primary-light); }
.cart-line .cl-total { margin-inline-start: auto; text-align: left; font-weight: 700; font-size: 14px; white-space: nowrap; }
.cl-editable {
  cursor: pointer; border-bottom: 1px dashed var(--color-text-muted); padding: 0 2px;
}
.cl-editable:hover { color: var(--color-primary); border-color: var(--color-primary); }
.cl-discount-val { font-size: 11px; color: var(--color-text-muted); }
.cl-price-val { min-width: 66px; text-align: center; font-size: 13px; white-space: nowrap; }
.cl-remove {
  border: none; background: none; cursor: pointer; font-size: 14px; color: #b8b0b6; padding: 4px;
  border-radius: var(--radius-sm);
}
.cl-remove:hover { color: var(--color-danger); background: var(--color-danger-light); }

.cart-total {
  display: flex; justify-content: space-between; font-size: 21px; font-weight: 700;
  padding: var(--space-3) 0; border-top: 2px solid var(--color-text); margin-top: var(--space-2);
}

.modal {
  position: fixed; inset: 0; background: rgba(20, 15, 20, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 10;
  animation: overlayIn .15s ease-out;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); width: 360px;
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-lg);
  animation: modalIn .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-box h2 { margin: 0; font-size: 18px; }
.modal-box label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.modal-box input[type="number"],
.modal-box input[type="email"],
.modal-box input[type="password"],
.modal-box input[type="text"] {
  padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit;
}
.modal-box input:focus { outline: none; border-color: var(--color-primary); }
.cs-summary { font-size: 14px; }
.cs-summary hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-2) 0; }
#new-customer-form { display: flex; flex-direction: column; gap: var(--space-2); }
.payment-methods { display: flex; flex-direction: column; gap: var(--space-2); }
.payment-methods button {
  padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); cursor: pointer; font-size: 15px; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.payment-methods button:hover { background: var(--color-primary-light); }
.payment-methods button.selected { border-color: var(--color-primary); background: var(--color-primary-light); font-weight: 600; }
.pay-btn:disabled { background: #d8d2d6; cursor: not-allowed; }

.payment-lines { display: flex; flex-direction: column; gap: 6px; }
.payment-line {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: 8px 12px; background: var(--color-bg); border-radius: var(--radius-sm); font-size: 14px;
}
.payment-line .pl-remove { border: none; background: none; color: var(--color-danger); cursor: pointer; font-size: 13px; }
.pay-status-row { display: flex; justify-content: space-between; font-size: 15px; margin: 0; }
.pay-change-row { color: var(--color-success); font-weight: 700; }

.numpad-box { width: 300px; align-items: stretch; }
.numpad-box h3 { margin: 0; text-align: center; font-size: 15px; color: var(--color-text-muted); }
.numpad-display {
  width: 100%; font-family: inherit;
  font-size: 30px; font-weight: 700; text-align: center; padding: var(--space-2);
  background: var(--color-bg); border-radius: var(--radius-sm); letter-spacing: 0.5px;
  border: 2px solid transparent;
}
.numpad-display:focus { outline: none; border-color: var(--color-primary); }
.numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.numpad-grid button {
  padding: 16px; font-size: 19px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; font-family: inherit;
}
.numpad-grid button:hover { background: var(--color-bg); }
.numpad-grid button:active { background: var(--color-primary-light); }

.orders-box { width: 460px; max-height: 82vh; overflow-y: auto; }
.orders-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.orders-empty { color: var(--color-text-muted); text-align: center; font-size: 14px; }
.order-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 4px; border-bottom: 1px solid var(--color-border); cursor: pointer;
  border-radius: var(--radius-sm);
}
.order-row:hover { background: var(--color-bg); }
.order-row .or-name { font-weight: 700; font-size: 14px; }
.order-row .or-date { font-size: 12px; color: var(--color-text-muted); }
.order-row .or-total { font-weight: 700; color: var(--color-primary); }
.od-date { color: var(--color-text-muted); font-size: 13px; margin: 0; }
.od-payment-change-label { font-size: 13px; color: var(--color-text-muted); margin: 4px 0; }

#receipt-content { font-family: "Courier New", monospace; font-size: 13px; }
/* table-layout:fixed + explicit column widths: without this, a browser
   sizes columns by content, so a long item name (e.g. "ظرف بني مقاس 14*10")
   squeezes the narrow numeric columns -- on an 80mm/58mm thermal strip
   that leaves too little room for "الإجمالي"/its value and either wraps
   into the row below or gets clipped by the printer instead of by the
   browser, which looks identical to missing data on the printed slip. */
#receipt-content table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#receipt-content th, #receipt-content td {
  border: 1px solid #000; padding: 2px 3px; text-align: center;
  overflow-wrap: break-word; word-break: break-word; line-height: 1.25;
}
#receipt-content th:first-child, #receipt-content td:first-child { text-align: right; }
#receipt-content th:nth-child(1), #receipt-content td:nth-child(1) { width: 36%; }
#receipt-content th:nth-child(2), #receipt-content td:nth-child(2) { width: 16%; }
#receipt-content th:nth-child(3), #receipt-content td:nth-child(3) { width: 22%; }
#receipt-content th:nth-child(4), #receipt-content td:nth-child(4) { width: 26%; }
/* Header labels are short, static, and never need to wrap -- forcing them
   onto one line (a wider qty column above gives "الكمية" enough room) beats
   a stray last letter dropping to its own line, which is what happened at
   14% width. Data cells keep wrapping (word-break above) since a long item
   name still legitimately needs it. */
#receipt-content thead th { font-size: 11px; white-space: nowrap; padding: 2px 2px; }
.receipt-item-name { font-size: 15px; font-weight: 700; }
.receipt-num { font-size: 14.5px; font-weight: 600; }
.receipt-grand-total { text-align: left; font-size: 19px; font-weight: 800; margin-top: 6px; }
.receipt-logo { display: block; max-width: 140px; max-height: 90px; margin: 0 auto; object-fit: contain; }
.receipt-company-footer {
  text-align: center; font-size: 11px; color: #333; margin-top: 10px;
  padding-top: 8px; border-top: 1px dashed #000;
}
.receipt-company-footer div { margin: 1px 0; }

@media print {
  /* Don't assert a physical width in mm here: a thermal printer's Windows
     driver commonly reports a printable width narrower than the nominal
     roll size (an "80mm" roll's driver here actually exposes 72mm of
     addressable width, confirmed from the print dialog's own paper-size
     field) -- forcing 80mm clipped the margin the driver reserves on each
     side, on every single line, regardless of the table-layout fix above.
     Filling whatever width the selected paper/printer actually gives
     avoids hardcoding a number that's wrong for this printer (or would be
     wrong again for a different one). */
  @page { size: auto; margin: 0; }
  html, body { width: 100%; margin: 0; padding: 0; }
  body * { visibility: hidden; }
  #receipt-content, #receipt-content * { visibility: visible; }
  #receipt-content { position: absolute; top: 0; right: 0; width: 100%; margin: 0; padding: 4px; box-sizing: border-box; }
}