/* ============================================
   BillPOS - Mobile App Theme (over Bootstrap 5)
   ============================================ */
:root {
  --bp-primary: #360dd9;        /* DayBill indigo */
  --bp-primary-dark: #2a0ab0;
  --bp-primary-soft: #ece8fb;
  --bp-accent: #7ed957;         /* DayBill green */
  --bp-accent-dark: #5cb838;
  --bp-bg: #f4f4fa;
  --bp-surface: #ffffff;
  --bp-text: #1b1b2e;
  --bp-muted: #6d6d88;
  --bp-danger: #dc3545;
  --bp-radius: 16px;
  --bp-nav-h: 64px;
}

[data-theme="dark"] {
  --bp-bg: #121123;
  --bp-surface: #1c1b30;
  --bp-text: #eaeaf5;
  --bp-muted: #9b9ab8;
  --bp-primary: #5a36f0;
  --bp-primary-soft: #261d52;
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  overscroll-behavior-y: contain;
}

body { padding-bottom: calc(var(--bp-nav-h) + 16px); }
body.no-bottom-nav { padding-bottom: 0; }

/* ---------- Top bar ---------- */
.bp-topbar {
  background: var(--bp-primary);
  color: #fff;
  padding: 12px 16px;
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.bp-topbar h1 { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; }
.bp-topbar a, .bp-topbar button { color: #fff; }

/* ---------- Cards ---------- */
.bp-card {
  background: var(--bp-surface);
  border: none;
  border-radius: var(--bp-radius);
  box-shadow: 0 1px 4px rgba(27,27,70,.07);
}
.kpi-card { padding: 14px 16px; height: 100%; }
.kpi-card .kpi-label { font-size: .74rem; color: var(--bp-muted); text-transform: uppercase; letter-spacing: .4px; }
.kpi-card .kpi-value { font-size: 1.25rem; font-weight: 700; margin-top: 2px; }
.kpi-card .kpi-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 8px;
  background: var(--bp-primary-soft); color: var(--bp-primary);
}

/* ---------- Buttons / touch ---------- */
.btn { border-radius: 12px; }
.btn-lg, .btn-touch { min-height: 48px; font-size: 1rem; }
.btn-bp { background: var(--bp-primary); color: #fff; }
.btn-bp:hover, .btn-bp:focus { background: var(--bp-primary-dark); color: #fff; }
.form-control, .form-select { border-radius: 12px; min-height: 46px; }
.form-control:focus, .form-select:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 .2rem rgba(14,125,99,.15);
}

/* ---------- Bottom navigation (signature) ---------- */
.bp-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  height: var(--bp-nav-h);
  background: var(--bp-surface);
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: stretch;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.bp-bottomnav a {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--bp-muted); text-decoration: none; font-size: .68rem;
}
.bp-bottomnav a i { font-size: 1.3rem; }
.bp-bottomnav a.active { color: var(--bp-primary); font-weight: 600; }
.bp-bottomnav .nav-fab {
  margin-top: -22px;
}
.bp-bottomnav .nav-fab span.fab {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bp-accent), var(--bp-accent-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 4px 12px rgba(14,125,99,.45);
}

/* ---------- POS layout ---------- */
.pos-wrap { display: flex; flex-direction: column; height: calc(100dvh - 56px); }
.pos-search-row { padding: 8px 10px; display: flex; gap: 8px; background: var(--bp-surface); }
.pos-cat-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px;
  background: var(--bp-surface); scrollbar-width: none;
}
.pos-cat-tabs::-webkit-scrollbar { display: none; }
.pos-cat-tabs button {
  white-space: nowrap; border: 1px solid rgba(0,0,0,.1);
  background: var(--bp-bg); color: var(--bp-text);
  border-radius: 999px; padding: 8px 16px; font-size: .85rem;
}
.pos-cat-tabs button.active { background: var(--bp-primary); color: #fff; border-color: var(--bp-primary); }

.pos-grid {
  flex: 1; overflow-y: auto; padding: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px;
  align-content: start;
}
.pos-prod {
  background: var(--bp-surface); border-radius: 14px; padding: 10px 8px;
  text-align: center; border: 1px solid rgba(0,0,0,.05);
  cursor: pointer; user-select: none; min-height: 88px;
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .08s;
}
.pos-prod:active { transform: scale(.95); background: var(--bp-primary-soft); }
.pos-prod .pp-name { font-size: .78rem; font-weight: 600; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-prod .pp-price { font-size: .8rem; color: var(--bp-primary); font-weight: 700; margin-top: 4px; }
.pos-prod .pp-stock { font-size: .65rem; color: var(--bp-muted); }

.pos-cartbar {
  background: var(--bp-primary); color: #fff;
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  border-radius: 18px 18px 0 0; cursor: pointer;
}
.pos-cartbar .total { font-size: 1.25rem; font-weight: 700; margin-left: auto; }

/* Cart sheet */
.cart-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.cart-line .cl-name { flex: 1; font-size: .9rem; font-weight: 600; }
.cart-line .qty-box { display: flex; align-items: center; gap: 6px; }
.cart-line .qty-box button {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: var(--bp-primary-soft); color: var(--bp-primary);
  font-size: 1.1rem; font-weight: 700;
}
.cart-line .qty-box input { width: 52px; text-align: center; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; min-height: 36px; }

/* Numeric keypad */
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numpad button {
  min-height: 56px; font-size: 1.3rem; font-weight: 600;
  border: none; border-radius: 12px; background: var(--bp-bg); color: var(--bp-text);
}
.numpad button:active { background: var(--bp-primary-soft); }

/* ---------- Lists / tables ---------- */
.list-row {
  background: var(--bp-surface); border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .lr-sub { font-size: .76rem; color: var(--bp-muted); }
.badge-soft { background: var(--bp-primary-soft); color: var(--bp-primary); }

/* ---------- Misc ---------- */
.page-pad { padding: 14px; max-width: 1100px; margin: 0 auto; }
.section-title { font-size: .95rem; font-weight: 700; margin: 18px 0 10px; }
a { color: var(--bp-primary); }

@media (min-width: 992px) {
  body { padding-bottom: 16px; }
  .bp-bottomnav { display: none; }
  .bp-desktopnav { display: flex !important; gap: 4px; }
}
.bp-desktopnav { display: none; }
.bp-desktopnav a {
  color: rgba(255,255,255,.85); text-decoration: none;
  padding: 8px 14px; border-radius: 10px; font-size: .9rem;
}
.bp-desktopnav a.active, .bp-desktopnav a:hover { background: rgba(255,255,255,.15); color: #fff; }

@media print {
  .bp-topbar, .bp-bottomnav, .no-print { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ---------- DayBill branding ---------- */
.brand-logo-chip {
  background: #fff; border-radius: 10px; padding: 3px 8px;
  display: inline-flex; align-items: center;
}
.brand-logo-chip img { height: 24px; display: block; }
.ar-text { direction: rtl; font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; }
.pos-prod .pp-ar { font-size: .72rem; color: var(--bp-muted); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ar { font-size: 10px; direction: rtl; }