:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --ink: #1c1a17;
  --ink-soft: #595752;
  --line: #e0dbd1;
  --accent: #0f6b52;
  --accent-dark: #0b4f3d;
  --accent-soft: #e7f2ee;
  --danger: #8c2f2f;
  --danger-soft: #fbeaea;
  --warn: #b9791a;
  --warn-soft: #fbeee0;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
}

/* --- PIN gate --- */
.pin-screen {
  height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
}
.pin-screen .logo-big {
  width: 64px; height: 64px; border-radius: 16px; background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.8rem;
}
.pin-screen h1 { margin: 0; font-size: 1.2rem; }
.pin-screen p { color: var(--ink-soft); font-size: 0.85rem; margin: 0; }
.pin-input {
  font-size: 1.6rem; letter-spacing: 0.5rem; text-align: center; width: 200px;
  padding: 0.7rem; border-radius: 10px; border: 1px solid var(--line);
}
.pin-btn {
  background: var(--accent); color: white; border: none; padding: 0.7rem 2rem;
  border-radius: 999px; font-weight: 700; cursor: pointer; font-size: 0.95rem;
}
.pin-error { color: var(--danger); font-size: 0.82rem; }

/* --- App shell --- */
.app { display: none; height: 100vh; flex-direction: column; }
.app.visible { display: flex; }

.pos-topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0.7rem 1.1rem; display: flex; align-items: center; justify-content: space-between;
}
.pos-brand { display: flex; align-items: center; gap: 0.6rem; }
.pos-brand .logo { width: 30px; height: 30px; border-radius: 7px; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.pos-brand .name { font-weight: 700; }
.pos-brand .sub { font-size: 0.7rem; color: var(--ink-soft); }
.nav-tabs { display: flex; gap: 0.4rem; }
.nav-tab {
  padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; color: var(--ink-soft);
}
.nav-tab.active { background: var(--accent-soft); color: var(--accent-dark); }
.topbar-right { display: flex; align-items: center; gap: 0.8rem; }
.sync-indicator { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--ink-soft); }
.dot { width: 9px; height: 9px; border-radius: 999px; background: #ccc; }
.dot.synced { background: #2e9e5b; }
.dot.syncing { background: #d8a230; animation: pulse 1s infinite; }
.dot.error { background: var(--danger); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.logout-btn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.78rem; cursor: pointer; color: var(--ink-soft); }

/* --- Sell view --- */
.sell-view { flex: 1; display: flex; overflow: hidden; }
.product-pane { flex: 1.5; padding: 1rem; overflow-y: auto; }
.search-box { margin-bottom: 0.9rem; }
.search-box input {
  width: 100%; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem;
}
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; }
.pos-product {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 0.25rem;
}
.pos-product:hover { border-color: var(--accent); }
.pos-product:disabled, .pos-product.disabled { opacity: 0.4; cursor: not-allowed; }
.pos-product .emoji { font-size: 1.6rem; }
.pos-product .pname { font-weight: 600; font-size: 0.82rem; line-height: 1.25; }
.pos-product .pprice { color: var(--accent-dark); font-weight: 700; font-size: 0.85rem; }
.pos-product .pstock { font-size: 0.68rem; color: var(--ink-soft); }

.cart-pane {
  flex: 1; max-width: 380px; background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.cart-pane-header { padding: 1rem 1.1rem 0.6rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.cart-pane-body { flex: 1; overflow-y: auto; padding: 0.6rem 1.1rem; }
.pos-cart-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.pos-cart-line .info { flex: 1; }
.pos-cart-line .name { font-size: 0.85rem; font-weight: 600; }
.pos-cart-line .unit { font-size: 0.72rem; color: var(--ink-soft); }
.line-qty { display: flex; align-items: center; gap: 0.3rem; }
.line-qty button { width: 22px; height: 22px; border: 1px solid var(--line); background: var(--bg); border-radius: 6px; cursor: pointer; }
.line-total { font-weight: 700; font-size: 0.85rem; min-width: 60px; text-align: right; }
.empty-pos-cart { text-align: center; color: var(--ink-soft); padding: 2.5rem 1rem; font-size: 0.85rem; }

.cart-pane-footer { border-top: 1px solid var(--line); padding: 1rem 1.1rem; }
.pos-totals-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--ink-soft); }
.pos-totals-row.grand { font-weight: 800; font-size: 1.15rem; color: var(--ink); margin-top: 0.4rem; }
.pay-method-row { display: flex; gap: 0.4rem; margin: 0.8rem 0; }
.pay-method {
  flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; text-align: center;
  cursor: pointer; font-size: 0.8rem; font-weight: 600;
}
.pay-method.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.charge-btn {
  width: 100%; background: var(--accent); color: white; border: none; border-radius: 9px;
  padding: 0.85rem; font-weight: 800; font-size: 1rem; cursor: pointer;
}
.charge-btn:disabled { background: #bbb; cursor: not-allowed; }
.clear-cart-btn { width: 100%; background: none; border: none; color: var(--danger); font-size: 0.78rem; cursor: pointer; padding: 0.4rem; }

/* --- Inventory view --- */
.inventory-view { flex: 1; padding: 1.25rem; overflow-y: auto; display: none; }
.inventory-view.active { display: block; }
.inv-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.inv-table th, .inv-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.inv-table th { background: var(--bg); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
.inv-table tr.low-stock { background: var(--warn-soft); }
.inv-adjust-btn { background: var(--accent); color: white; border: none; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer; }

/* --- Sell view visibility toggle --- */
.sell-view.active { display: flex; }
.sell-view:not(.active) { display: none; }

/* --- Receipt toast --- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--accent-dark); color: white; padding: 0.9rem 1.4rem; border-radius: 10px;
  font-weight: 600; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 50;
  display: none;
}
.toast.show { display: block; }

/* --- Modal (stock adjust) --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none;
  align-items: center; justify-content: center; z-index: 40;
}
.modal-overlay.open { display: flex; }
.modal-box { background: var(--surface); border-radius: 12px; padding: 1.5rem; width: 320px; }
.modal-box h3 { margin: 0 0 1rem; }
.modal-box .field { margin-bottom: 0.8rem; }
.modal-box label { font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.modal-box input { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; }
.modal-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.modal-actions button { flex: 1; padding: 0.6rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
.modal-cancel { background: var(--bg); color: var(--ink); }
.modal-save { background: var(--accent); color: white; }

@media (max-width: 800px) {
  .sell-view { flex-direction: column; }
  .cart-pane { max-width: none; border-left: none; border-top: 1px solid var(--line); }
}

/* --- Products view --- */
.products-view { flex: 1; padding: 1.25rem; overflow-y: auto; display: none; }
.products-view.active { display: block; }
.products-toolbar { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.products-toolbar input {
  flex: 1; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 8px;
}
.add-product-btn {
  background: var(--accent); color: white; border: none; border-radius: 8px;
  padding: 0.55rem 1rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.status-badge { padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.status-badge.active { background: var(--accent-soft); color: var(--accent-dark); }
.status-badge.inactive { background: #eee; color: #888; }
.row-actions { display: flex; gap: 0.4rem; }
.row-actions button {
  border: none; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer;
}
.row-actions .edit-btn { background: var(--bg); border: 1px solid var(--line); }
.row-actions .deactivate-btn { background: var(--danger); color: white; }
.row-actions .activate-btn { background: var(--accent); color: white; }
.inv-table tr.inactive-row { opacity: 0.55; }

.modal-box-lg { width: 460px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
.field-row { display: flex; gap: 0.7rem; }
.field-row .field { flex: 1; }
.modal-box select { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; }

/* --- Reports view --- */
.reports-view { flex: 1; padding: 1.25rem; overflow-y: auto; display: none; }
.reports-view.active { display: block; }
.reports-toolbar { margin-bottom: 1rem; }
.period-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.period-tab { padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: var(--surface); }
.period-tab.active { background: var(--accent); color: white; }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.stat-card { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 0.3rem; }
.stat-value { font-size: 1.4rem; font-weight: 800; }
.reports-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.report-panel { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; }
.report-panel.wide { grid-column: 1 / -1; }
.report-panel h3 { margin: 0 0 0.7rem; font-size: 0.95rem; }
.mini-row { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.mini-row:last-child { border-bottom: none; }
.coming-soon { color: var(--ink-soft); font-size: 0.85rem; font-style: italic; margin: 0; }

@media (max-width: 800px) {
  .reports-panels { grid-template-columns: 1fr; }
}

/* --- Nav tab badge (low stock count) --- */
.tab-badge {
  background: var(--danger); color: white; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; padding: 0.05rem 0.4rem; margin-left: 0.3rem;
}

/* --- Cart discount row --- */
.discount-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.82rem; margin: 0.6rem 0;
}
.discount-row .applied { color: var(--accent-dark); font-weight: 700; }
.discount-link { background: none; border: 1px dashed var(--line); border-radius: 8px; color: var(--accent-dark);
  font-size: 0.78rem; cursor: pointer; padding: 0.35rem 0.6rem; font-weight: 600; }
.discount-remove { background: none; border: none; color: var(--danger); font-size: 0.75rem; cursor: pointer; padding: 0; }
.pos-totals-row.discount { color: var(--accent-dark); }

/* --- Deliveries view --- */
.delivery-status-tab { padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: var(--surface); }
.delivery-status-tab.active { background: var(--accent); color: white; }
.order-card {
  background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 0.8rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.order-card .oc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.order-card .oc-top .oc-number { font-weight: 800; }
.order-card .oc-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.order-card .oc-items { font-size: 0.82rem; margin-bottom: 0.7rem; }
.order-status-badge { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.order-status-badge.paid { background: var(--warn-soft); color: var(--warn); }
.order-status-badge.out_for_delivery { background: #e4ecfb; color: #2d4f9e; }
.order-status-badge.delivered { background: var(--accent-soft); color: var(--accent-dark); }
.order-status-badge.cancelled { background: var(--danger-soft); color: var(--danger); }
.oc-actions { display: flex; gap: 0.5rem; }
.oc-actions button {
  border: none; border-radius: 8px; padding: 0.4rem 0.8rem; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  background: var(--accent); color: white;
}
.oc-actions button.secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }