:root {
  --cyan: #02b3d7;
  --radius: 12px;
  --ctrl: 8px;
}
[data-theme="dark"] {
  --bg: #07090f; --panel: #0e141f; --panel-2: #121a28; --panel-3: #0b111b;
  --line: #1e2a3d; --line-soft: #172131;
  --text: #e7edf5; --muted: #8ea0b8;
  --cyan-ink: #04222b;
  --amber: #e6a636; --amber-dim: #2e2410; --amber-line: #43340f;
  --red: #e2564f; --red-dim: #2c1513; --red-line: #52201d;
  --green: #45c08a;
  --cyan-dim: #0a2a35; --cyan-line: #0c3a47; --cyan-soft: #6fd8ec;
}
[data-theme="light"] {
  --bg: #eef2f7; --panel: #ffffff; --panel-2: #f3f6fb; --panel-3: #f8fafc;
  --line: #d9e1ec; --line-soft: #e6ecf4;
  --text: #10233b; --muted: #5b6b82;
  --cyan-ink: #ffffff;
  --amber: #a76a08; --amber-dim: #fbf1dc; --amber-line: #ecd6a3;
  --red: #c0362f; --red-dim: #fbe9e8; --red-line: #f0c4c1;
  --green: #1f8f5f;
  --cyan-dim: #e0f5fa; --cyan-line: #b7e6f0; --cyan-soft: #0782a0;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Inter", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
button, input, select { font: inherit; }
button { color: inherit; }  /* buttons don't inherit color by default → dark-on-dark in dark theme */
.hidden { display: none !important; }

/* Buttons */
.btn {
  font-weight: 500; cursor: pointer; padding: 8px 14px; border-radius: var(--ctrl);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  transition: border-color .15s, background .15s, transform .05s;
}
.btn:hover { border-color: var(--cyan); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.block { width: 100%; }
.btn.danger { color: var(--red); border-color: var(--red-line); }
.btn.danger:hover { background: var(--red-dim); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible, .input:focus-visible, .tab:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.input {
  color: var(--text); background: var(--panel); width: 100%;
  border: 1px solid var(--line); border-radius: var(--ctrl); padding: 8px 12px;
}
.input:focus { border-color: var(--cyan); outline: none; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  background: var(--panel-3); position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mark { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--cyan);
  clip-path: polygon(50% 0, 100% 22%, 100% 60%, 50% 100%, 0 60%, 0 22%); }
.brand h1 { font-size: 18px; }
.brand .sub { color: var(--muted); font-size: 12px; margin-top: 1px; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.iconbtn {
  cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  width: 34px; height: 34px; border-radius: var(--ctrl); font-size: 13px; font-weight: 600;
}
.iconbtn:hover { border-color: var(--cyan); }

/* Segmented (currency) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--ctrl); overflow: hidden; }
.seg button { border: none; background: var(--panel-2); color: var(--muted); padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500; }
.seg button.on { background: var(--cyan); color: var(--cyan-ink); }

.userchip { display: flex; align-items: center; gap: 8px; padding-inline-start: 8px; border-inline-start: 1px solid var(--line); }
.userchip .who { font-size: 13px; line-height: 1.2; text-align: end; }
.userchip .who b { font-weight: 600; }
.userchip .who span { color: var(--muted); font-size: 11px; }

/* Tabs */
.tabs { display: flex; gap: 2px; padding: 10px 22px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { cursor: pointer; color: var(--muted); background: none; border: none; padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--cyan); }

main { padding: 20px 22px 60px; max-width: 1120px; margin: 0 auto; }

/* Toolbar */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; min-width: 200px; }
.window { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.window .input { width: auto; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.section-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

.banner { padding: 12px 14px; border-radius: var(--ctrl); margin-bottom: 16px; font-size: 14px;
  background: var(--red-dim); border: 1px solid var(--red-line); color: var(--red); }
.toast { position: fixed; inset-block-end: 20px; inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--cyan); color: var(--cyan-ink); padding: 10px 18px; border-radius: 999px; font-weight: 600; z-index: 40; }

/* Cards & tables */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line-soft); }
th { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); background: var(--panel-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
.name { font-weight: 500; }
.gen { color: var(--muted); font-size: 13px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }

.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge.controlled { background: var(--cyan-dim); color: var(--cyan-soft); border: 1px solid var(--cyan-line); }
.badge.low, .badge.soon { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-line); }
.badge.expired { background: var(--red-dim); color: var(--red); border: 1px solid var(--red-line); }
.stack { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.exp-expired { color: var(--red); } .exp-soon { color: var(--amber); } .exp-ok { color: var(--muted); }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 360px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.login-card .mark { width: 40px; height: 40px; margin-bottom: 16px; }
.login-card h1 { font-size: 22px; }
.login-card .sub { color: var(--muted); font-size: 14px; margin: 2px 0 22px; }

/* POS */
.pos-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.pos-list { display: flex; flex-direction: column; gap: 8px; max-height: 66vh; overflow: auto; padding-inline-end: 2px; }
.pcard { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--ctrl); padding: 12px 14px; cursor: pointer; }
.pcard:hover { border-color: var(--cyan); }
.pcard:disabled { cursor: not-allowed; opacity: .5; }
.pcard .p-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard .p-meta { color: var(--muted); font-size: 12px; }
.cart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  position: sticky; top: 84px; }
.cart h3 { font-size: 15px; margin-bottom: 12px; }
.cart-line { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line .cl-name { flex: 1; min-width: 0; font-size: 14px; }
.cart-line .cl-name small { color: var(--muted); display: block; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.stepper span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; font-size: 15px; }
.cart-total b { font-family: "Space Grotesk", sans-serif; font-size: 22px; }
.cart-empty { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }

.stat-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--ctrl); padding: 10px 14px; }
.stat b { font-family: "Space Grotesk", sans-serif; font-size: 18px; }
.stat span { color: var(--muted); font-size: 12px; display: block; }

/* Dynamic line rows (purchase entry, prescriptions) */
.pu-line { display: grid; grid-template-columns: 1fr 64px 90px 90px 130px 30px; gap: 6px; margin-bottom: 8px; align-items: center; }
.rx-line { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 6px; margin-bottom: 8px; align-items: center; }
@media (max-width: 720px) {
  .pu-line { grid-template-columns: 1fr 1fr 34px; }
  .pu-line select { grid-column: 1 / -1; }
}

/* Camera scanner */
.scan-video { width: 100%; max-height: 60vh; background: #000; border-radius: var(--ctrl); object-fit: cover; }
.bc-row { display: flex; gap: 6px; }
.bc-row .input { flex: 1; }

/* Modal */
.overlay { position: fixed; inset: 0; background: rgba(3,6,11,.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
.modal { width: 440px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-height: 90vh; overflow: auto; }
.modal h2 { font-size: 17px; margin-bottom: 16px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: 16px; height: 16px; accent-color: var(--cyan); }
.check label { margin: 0; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.receipt-lines { border-block: 1px solid var(--line); padding: 10px 0; margin: 12px 0; }
.receipt-lines .rl { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.receipt-total { display: flex; justify-content: space-between; font-weight: 600; font-size: 16px; margin-top: 6px; }

@media (max-width: 820px) { .pos-grid { grid-template-columns: 1fr; } .cart { position: static; } }
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; padding: 12px 14px; }
  .tabs { padding: 8px 14px 0; }
  main { padding: 14px 14px 40px; }
  .hide-sm { display: none; }
  /* 16px inputs stop iOS Safari zoom-on-focus */
  .input, select.input { font-size: 16px; }
  th, td { padding: 10px 8px; }
  .modal { padding: 16px; }
  /* bigger touch targets */
  .pcard { min-height: 56px; }
  .stepper button { width: 32px; height: 32px; }
  .btn { padding: 10px 14px; }
}