/* ===================== DigiWizr — style.css ===================== */

:root {
  /* --navy is the app's default text/border/box color (per the DigiWizr
     brand palette this is dark gray, not literal navy — the name is kept
     so we don't have to touch every selector that references it).
     --purple is the dedicated hover/active accent used across buttons,
     boxes, header/menu items, and links.
     --gray-panel is the header + slide-in menu background. */
  --navy: #383838;
  --purple: #695EA9;
  --purple-light: #7f75b8;
  --cyan: #5AC9E8;
  --gray-panel: #094444;
  --brand-teal: #094444;
  --white: #FFFFFF;
  --emerald: #2ECC71;
  --red: #E74C3C;
  --grey: #7F8C8D;
  --blue: #3498DB;
  --amber: #F39C12;
  --ribbon-gold: #D8AE44;
  --disabled-bg: #CCCCCC;
  --disabled-text: #888888;
}

* { box-sizing: border-box; }

/* Browsers don't let form controls (button/select/input/textarea) inherit the
   page's font-family by default (their own UA stylesheet wins) - this is why
   buttons were falling back to the OS system font instead of Hind Siliguri
   even though body.lang-bn sets it below. Force them to inherit explicitly. */
button, select, input, textarea { font-family: inherit; }

html {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 17px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

body.lang-bn {
  font-family: 'Hind Siliguri', 'Segoe UI', sans-serif;
  font-size: 16px;
}
body.lang-bn button, body.lang-bn .btn { font-size: 18px; }
body.lang-bn .section-title, body.lang-bn .list-title { font-weight: 600; }

#app { min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--cyan); text-decoration: none; }
a:hover, a:active { color: var(--purple); }

/* ---------- Header ---------- */
.app-header {
  background: var(--navy);
  color: var(--white);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-header .header-side { display: flex; align-items: center; min-width: 0; }
.app-header .header-side.left { justify-self: start; }
.app-header .header-side.right { justify-self: end; }
.app-header .back-btn { background: none; border: none; color: var(--white); cursor: pointer; display: flex; padding: 0; }
.app-header img.logo { height: 54px; width: auto; display: block; max-width: 100%; }
.header-center { justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 68px; }
.business-name-tag, .header-subtitle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-name-tag { color: var(--white); font-size: 15px; font-weight: 600; margin-top: 2px; }
.header-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Language / currency switcher */
.lang-switcher select {
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
}
.lang-switcher select:hover, .lang-switcher select:focus { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* Pre-login language control (sits where the burger is once signed in) */
.header-lang { display: flex; align-items: center; gap: 6px; }
.header-lang-icon { display: flex; align-items: center; }
.header-lang-icon svg { width: 20px; height: 20px; }
.header-lang .lang-switcher select { padding: 4px 4px; font-size: 14px; }

/* ---------- Burger menu button ---------- */
.menu-burger-btn { background: none; border: none; color: var(--white); cursor: pointer; display: flex; align-items: center; padding: 0; }

/* ---------- App menu (slide-in drawer) ---------- */
.app-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 150;
  visibility: hidden; transition: background 0.25s ease, visibility 0s linear 0.3s;
}
.app-menu-overlay.open { background: rgba(0,0,0,0.45); visibility: visible; transition: background 0.25s ease; }
.app-menu-drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 200px; max-width: 82vw;
  background: #383838; color: var(--white);
  box-shadow: -4px 0 18px rgba(0,0,0,0.25);
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 0 18px;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.app-menu-overlay.open .app-menu-drawer { transform: translateX(0); }
.app-menu-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px;
  background: none; border: none; color: var(--white); cursor: pointer; padding: 4px; line-height: 0; z-index: 1;
}
.app-menu-notification-bell {
  /* Sits in the same row as .app-menu-close, just to its left with a small
     gap: 12px (close's own right offset) + 26px (close's ~box size) + 8px
     gap = 46px from the drawer's right edge. */
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 46px;
  display: flex; align-items: center;
  background: none; border: none; color: var(--white); cursor: pointer;
  padding: 4px; line-height: 0; z-index: 1;
}
.app-menu-notification-bell .notification-badge {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; line-height: 15px;
  padding: 0 3px; font-size: 12px; text-align: center;
}
.app-menu-group { display: flex; flex-direction: column; }
/* Extra top padding clears the bell/close row (pinned at ~12px–38px from
   the drawer's top edge) so Dashboard isn't crowded underneath it. */
.app-menu-top { padding-top: 44px; gap: 6px; }
.app-menu-divider { height: 1px; background: rgba(255,255,255,0.18); margin: 0 18px; }
.app-menu-spacer { flex: 1; }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; background: none; border: none; color: var(--white);
  padding: 7px 18px; font-size: 16px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item:hover, .menu-item:active { background: rgba(105,94,169,0.18); color: var(--white); }
.menu-item:hover svg, .menu-item:active svg { color: var(--purple-light) !important; }
.menu-item-chevron { margin-left: auto; display: flex; flex-shrink: 0; }
.notification-badge { background: var(--red); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.modal-box.notifications-modal-box { max-height: 70vh; overflow-y: auto; text-align: left; }
.app-menu-submenu { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; display: flex; flex-direction: column; }
.app-menu-submenu.open { max-height: 220px; }
.app-menu-submenu.open.large { max-height: 420px; }
.app-menu-submenu .menu-item { padding-left: 40px; font-size: 15px; padding-top: 6px; padding-bottom: 6px; }
.app-menu-section-label {
  padding: 6px 18px 1px; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.55);
}
.app-menu-lang { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 40px; }
.app-menu-lang-label { display: flex; align-items: center; gap: 12px; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
.app-menu-branch-switcher { display: flex; align-items: center; gap: 10px; padding: 4px 18px 8px; }
.app-menu-branch-switcher select { flex: 1; padding: 6px 16px 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: #2b2b2b; color: #fff; font-size: 15px; }
.app-menu-branch-switcher select:hover, .app-menu-branch-switcher select:focus { background: var(--cyan); border-color: var(--cyan); color: var(--purple); }

/* ---------- Layout ---------- */
.screen-body { flex: 1; padding: 16px; padding-bottom: 90px; max-width: 640px; margin: 0 auto; width: 100%; }

.pin-screen-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 16px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.section-title {
  font-weight: bold;
  color: var(--navy);
  margin: 22px 0 10px;
  border-left: 4px solid var(--purple);
  padding-left: 8px;
}

.card {
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--white);
}

.muted { color: var(--grey); }
.italic { font-style: italic; }
.bold { font-weight: bold; }
.right { text-align: right; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--navy);
  color: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--purple); border-color: var(--purple); }
.btn.left-align { justify-content: flex-start; }
.btn.outline {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn.outline:hover { background: var(--purple); color: var(--white); border-color: var(--purple); }
.btn.outline.danger { color: var(--red); border-color: var(--red); }
.btn.outline.danger:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.btn.small { padding: 8px 14px; width: auto; font-size: 15px; }
.btn:disabled, .btn.disabled {
  background: var(--disabled-bg) !important;
  color: var(--disabled-text) !important;
  border-color: var(--disabled-bg) !important;
  cursor: not-allowed;
  position: relative;
}

.icon-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; color: var(--purple); }
.icon-btn.danger { color: var(--red); }

/* ---------- Inputs ---------- */
label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--navy); }
.field { margin-bottom: 14px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.date-selector-row { display: flex; align-items: center; gap: 8px; }
.date-selector-row .date-selector { flex: 1; }
.row-3-even { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.row-3-even .field { margin-bottom: 0; }
.row-3 { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 14px; }
.row-3 input[type="number"] { width: 100%; padding: 10px 8px; text-align: center; }
.row-2 .field, .row-3 .field { margin-bottom: 0; }
.search-scan-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 14px; }
.search-scan-row .scan-btn { margin: 0; }
.search-scan-row.has-load { grid-template-columns: 1fr auto auto; }
.search-scan-row.has-load:has(.view-toggle) { grid-template-columns: 1fr auto auto auto; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="date"], input[type="password"], textarea, select.form-select {
  width: 100%;
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 17px;
  outline: none;
  font-family: inherit;
  background: var(--white);
  color: var(--navy);
}
input:focus, textarea:focus, select.form-select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(56,56,56, 0.15);
}
.input-with-icon { position: relative; }
.input-with-icon input { padding-left: 38px; }
.input-with-icon .icon-left { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--grey); }
.phone-field-with-dial { display: flex; align-items: center; gap: 6px; }
.phone-field-with-dial input { flex: 1; min-width: 0; }
.phone-field-with-dial .dial-btn { flex-shrink: 0; }

.pin-input { text-align: center; font-size: 32px; letter-spacing: 12px; font-weight: bold; }

/* ---------- Chips (expense categories) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  border: 1.5px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 15px;
  cursor: pointer;
}
.chip.selected { background: var(--navy); color: var(--white); }

/* ---------- Stat cards (home) ---------- */
.stat-row { display: flex; gap: 10px; margin-bottom: 16px; }
.stat-card {
  flex: 1;
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stat-card .stat-label { font-size: 13px; color: var(--grey); margin-bottom: 4px; }
.stat-card .stat-value { font-size: 20px; font-weight: bold; }
.stat-card .stat-value.positive { color: var(--emerald); }
.stat-card .stat-value.negative { color: var(--red); }
.shimmer { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; height: 18px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Hot row (Sale / Booking / Expense) ---------- */
.hot-row { display: flex; gap: 10px; margin-bottom: 18px; }
.hot-btn {
  -webkit-appearance: none; appearance: none; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--navy); color: var(--white); border: 1.5px solid var(--navy); border-radius: 12px;
  padding: 14px 6px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s ease;
}
.hot-btn:hover { background: var(--purple); border-color: var(--purple); }
.hot-btn.disabled {
  background: var(--disabled-bg) !important; color: var(--disabled-text) !important;
  border-color: var(--disabled-bg) !important; cursor: not-allowed;
}

/* ---------- Home widgets (trend / best sellers / stocking-outs) ---------- */
.home-widget { margin-bottom: 20px; }
.home-widget-title { font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 8px; }
.home-trend-wrap { border: 1.5px solid var(--navy); border-radius: 10px; padding: 10px 12px 4px; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--white); }
.badge.sale { background: var(--emerald); }
.badge.expense { background: var(--red); }
.badge.collection { background: var(--blue); }
.badge.due { background: var(--amber); }

.entry-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.booking-card { cursor: pointer; }
.booking-card.live { border-color: var(--purple); }
.booking-card.live .entry-info, .booking-card.live .entry-info * { color: var(--purple); }
.booking-card.completed { border-color: var(--grey); }
.booking-card.completed .entry-info, .booking-card.completed .entry-info * { color: var(--grey); }
.entry-info { flex: 1; min-width: 0; }
.entry-desc { font-size: 15px; margin-top: 2px; }
.entry-amount { font-weight: 600; white-space: nowrap; }

/* ---------- Offline / sync banner ---------- */
.offline-banner {
  background: #FDEBD0;
  border: 1px solid var(--amber);
  color: var(--navy);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
}

/* ---------- Trial ribbon ---------- */
.trial-ribbon {
  background: var(--ribbon-gold);
  color: var(--white);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.trial-ribbon.expired { background: var(--red); cursor: default; }
.trial-ribbon .ribbon-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--white); cursor: pointer; }

/* ---------- Footer credit ---------- */
.footer-credit {
  text-align: center;
  padding: 16px 10px 24px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--grey);
}
.footer-credit .brand-digi, .footer-credit .brand-wizr { font-family: 'Syne', sans-serif; font-weight: 700; }
.footer-credit .brand-digi { color: var(--cyan); }
.footer-credit .brand-wizr { color: var(--purple); }
.footer-credit a { text-decoration: none; }

/* ---------- Messages ---------- */
.msg { border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 15px; }
.msg.success { background: #E9F9EF; color: var(--emerald); border: 1px solid var(--emerald); }
.msg.error { background: #FDEDEC; color: var(--red); border: 1px solid var(--red); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(56,56,56,0.65);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-box {
  background: var(--white); border-radius: 14px; padding: 26px 22px; max-width: 380px; width: 100%;
  text-align: center;
}
.modal-close-x {
  position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 4px; line-height: 0;
}
.recovery-pin-display { font-size: 36px; font-weight: 800; color: var(--purple); letter-spacing: 4px; margin: 14px 0; }

/* ---------- Tables ---------- */
table.report-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 15px; }
table.report-table th, table.report-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }
table.report-table th { color: var(--grey); font-weight: 600; font-size: 14px; }
table.report-table td.num, table.report-table th.num { text-align: right; }

.summary-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 16px; }
.summary-line.total { font-weight: bold; border-top: 1px solid var(--navy); margin-top: 6px; padding-top: 8px; }

/* ---------- Month picker ---------- */
.month-picker-card { border: 1.5px solid var(--navy); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.year-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.year-row .arrow-btn { background: none; border: none; color: var(--purple); cursor: pointer; }
.year-row .year-label { font-weight: bold; font-size: 19px; }
.month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.month-btn { border: 1.5px solid var(--navy); background: var(--white); color: var(--navy); border-radius: 8px; padding: 8px 4px; font-size: 14px; cursor: pointer; }
.month-btn.selected { background: var(--navy); color: var(--white); }
.week-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.week-chip-row .chip { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.week-chip-range { display: block; font-size: 12px; opacity: 0.75; margin-top: 2px; }

/* ---------- Status card (dashboard) ---------- */
.status-card { border-radius: 10px; padding: 14px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.status-card.active { background: #E9F9EF; color: var(--emerald); }
.status-card.trial { background: #FEF5E7; color: var(--amber); }
.status-card.expired { background: #FDEDEC; color: var(--red); }

/* ---------- Product select cards ---------- */
.product-card { cursor: pointer; }
.product-card.selected { background: var(--navy); color: var(--white); }
.product-card.selected .muted { color: #cfd6e0; }

/* ---------- Cart ---------- */
.cart-item { display: flex; flex-direction: column; gap: 6px; position: relative; }
.cart-item .cart-top { display: flex; justify-content: space-between; align-items: flex-start; }
.qty-row { display: flex; align-items: center; gap: 10px; }
.qty-row button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--navy); background: var(--white); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-row input[type="number"] { width: 56px; text-align: center; padding: 6px; }
.remove-x { position: absolute; top: 0; right: 0; background: none; border: none; color: var(--red); cursor: pointer; padding: 0; line-height: 0; display: flex; align-items: center; justify-content: center; }

/* ---------- Compact 2-line cart card ---------- */
.cart-item-v2 {
  position: relative; /* anchors the remove (X) button to its own card */
  padding: 8px 36px 8px 10px; /* right padding keeps the discount / cost box well clear of the X */
  margin-bottom: 8px;
  max-width: 100%;
}
.cart-v2-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cart-v2-name {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-v2-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cart-v2-qty button {
  width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--navy);
  background: var(--white); color: var(--navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cart-v2-qty button svg { width: 12px; height: 12px; }
.cart-v2-qty input[type="number"] { width: 34px; padding: 2px; text-align: center; font-size: 14px; border-radius: 5px; }
/* Purchases are often entered in tens or hundreds: give the quantity box room to show them. */
.cart-v2-qty.wide input[type="number"] { width: 68px; padding: 5px 4px; font-size: 16px; }
/* Purchase cart: name, quantity and cost stay on one row; a long name wraps inside its own space. */
.cart-item-v2.purchase-line .cart-v2-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.cart-item-v2.purchase-line .cart-v2-qty.wide input[type="number"] { width: 52px; }
.cart-item-v2.purchase-line .cart-v2-discount input { width: 48px; }
.cart-item-v2.purchase-line .chip-tag { display: inline-block; font-size: 10px; padding: 1px 6px; white-space: nowrap; }
/* Print Labels: picture + name on the first line, quantity and buttons wrap beneath when the card is narrow. */
.entry-row.label-row { flex-wrap: wrap; }
.entry-row.label-row .entry-info { flex: 1 1 130px; min-width: 0; }
.cart-v2-discount { flex-shrink: 0; }
.cart-v2-discount input[type="number"] {
  width: 56px; padding: 3px 4px; font-size: 13px; text-align: right; border-radius: 5px;
}
.cart-v2-row2 {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.cart-v2-meta { font-size: 13px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-v2-total { font-weight: 700; color: var(--purple); font-size: 15px; white-space: nowrap; }
.cart-item-v2 .remove-x { top: 6px; right: 5px; width: 22px; height: 22px; }
.cart-item-v2 .remove-x svg { width: 14px; height: 14px; }

/* ---------- iOS install banner ---------- */
.ios-banner {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); color: var(--white);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; z-index: 200; font-size: 15px;
}
.ios-banner button.close-x { margin-left: auto; background: none; border: none; color: var(--white); cursor: pointer; }

/* ---------- WhatsApp button ---------- */
.btn.whatsapp { background: var(--white); border: 1.5px solid var(--navy); color: var(--navy); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn.blue:hover { background: #2a80b9; border-color: #2a80b9; }

/* ---------- Charts ---------- */
.chart-wrap { background: var(--white); border: 1px solid #eee; border-radius: 10px; padding: 12px; margin-bottom: 16px; }
/* Expense Breakdown (doughnut) + Top 10 (bar): compact, side by side in one row */
.yearly-report-table { font-size: 14px; }
.yearly-report-table th, .yearly-report-table td { padding: 6px 5px; white-space: nowrap; }
.chart-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; }
.chart-row .chart-wrap { flex: 1 1 0; min-width: 0; margin-bottom: 0; padding: 8px; }
.chart-row .chart-box { position: relative; height: 220px; width: 100%; }
canvas { max-width: 100%; }

/* ---------- Utility ---------- */
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.divider { border: none; border-top: 1px solid #e0e0e0; margin: 18px 0; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-wrap { text-align: center; padding: 40px 0; color: var(--grey); }

/* ===================== Sale / Booking totals box ===================== */
.totals-box {
  background: #F7F9FA;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.totals-box .flex-between { padding: 4px 0; font-size: 16px; }
.total-payable-value { font-size: 20px; font-weight: 700; color: var(--purple); }
.partial-payment-label { font-weight: 700; color: var(--blue); }
.partial-payment-input {
  width: 110px !important; text-align: right; font-weight: 700; color: var(--blue);
  border-color: var(--blue) !important; padding: 6px 8px !important;
}
.payment-due-value { font-size: 20px; font-weight: 700; color: var(--red); }

/* Accordion toggle for the partial-payment / client-details section */
.accordion-toggle {
  background: none; border: 1.5px solid var(--grey); border-radius: 50%;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 4px 0 10px;
}
.accordion-panel { border-top: 1px solid #e0e0e0; padding-top: 10px; margin-bottom: 10px; }

/* ===================== Customer autocomplete ===================== */
.customer-autocomplete-wrap { position: relative; }
.autocomplete-results {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
}
.autocomplete-results.show { display: block; }
.autocomplete-item { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #eee; }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #F1EFF9; }

/* ===================== Small square icon buttons (Clear/Receipt etc.) ===================== */
.icon-square-row { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 10px; }
.icon-square-btn {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--navy); border-radius: 8px; cursor: pointer;
}
.icon-square-btn.blue { background: var(--blue); border-color: var(--blue); }
.icon-square-btn:disabled { opacity: 0.4; cursor: default; }

/* ===================== History screens: top toolbar + filter row ===================== */
.history-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.history-filter-row {
  display: flex; align-items: flex-end; gap: 6px; margin-bottom: 16px;
  flex-wrap: nowrap; width: 100%;
}
.history-filter-row > .field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.history-filter-row > .field input,
.history-filter-row > .field select { width: 100%; min-width: 0; padding: 8px 6px; font-size: 14px; }
.history-filter-row > .field label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-filter-row .icon-square-btn { width: 36px; height: 36px; flex: 0 0 36px; }
.list-branch-selector { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.list-branch-selector select { padding: 6px 10px; border-radius: 8px; border: 1px solid #D5D9DD; font-size: 14px; background: var(--white); }
.transfer-step-row { display: flex; gap: 8px; margin: 14px 0; }
.transfer-step-btn { flex: 1; border: none; border-radius: 8px; padding: 10px 6px; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.transfer-step-btn:disabled { cursor: default; opacity: 0.9; }
.history-empty-state { text-align: center; padding: 30px 10px; color: var(--muted, #8a94a6); font-style: italic; }
.history-card { position: relative; padding-right: 74px; }
.history-card-actions { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; }

/* ===================== Order Ready Schedule time picker ===================== */
.time-picker-row { display: flex; gap: 6px; }
.time-picker-row select {
  flex: 1; border: 1.5px solid var(--navy); border-radius: 8px; padding: 8px 4px;
  font-size: 15px; background: var(--white); color: var(--navy);
}
.compact-date-input { padding: 6px 6px !important; font-size: 14px !important; margin-bottom: 6px; }
.time-picker-row.compact { gap: 4px; }
.time-picker-row.compact select { padding: 5px 2px; font-size: 13px; border-radius: 6px; }

/* ===================== Subscription: benefits + payment channels ===================== */
.benefit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.benefit-text { font-size: 19px; }
.payment-channel-row { display: flex; justify-content: center; gap: 22px; margin: 14px 0; }
.payment-channel { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; color: var(--navy); }
.payment-channel-icon { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; display: block; }
.payment-number-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.payment-number-spacer { justify-self: start; width: 32px; height: 32px; }
.payment-number-row button.payment-number-spacer { justify-self: start; width: auto; height: auto; }
.payment-number-box {
  border: 1.5px solid var(--navy); border-radius: 8px; padding: 10px 18px;
  font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: 1px;
}

/* ===================== User permissions ===================== */
.perm-checkbox-row { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.perm-checkbox { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; }
.perm-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--purple); }

/* ===================== Barcode: scan toast ===================== */
.scan-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px);
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 20px;
  font-size: 15px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300; max-width: 80%; text-align: center;
}
.scan-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================== Barcode: camera scan modal ===================== */
.camera-scan-box { width: 100%; max-width: 360px; }
.camera-scan-box video { width: 100%; border-radius: 8px; background: #000; max-height: 60vh; }

/* ===================== Barcode Label Print ===================== */
.bc-label-sheet { display: flex; flex-wrap: wrap; }
.bc-label {
  border: 1px dashed #999;
  padding: 2mm;
  text-align: center;
  box-sizing: border-box;
  page-break-inside: avoid;
  font-family: Arial, sans-serif;
}
.bc-label-name { font-size: 8pt; font-weight: 700; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-label-size { font-size: 7pt; color: #444; }
.bc-label-svg { margin: 1mm 0; }
.bc-label-svg svg { width: 100%; height: auto; display: block; }
.bc-label-code { font-size: 7pt; color: #000; letter-spacing: 0.5px; }

/* ===================== Print styles ===================== */
@media print {
  .app-header, .back-btn, .date-selector, .download-pdf-btn, .lang-switcher,
  .trial-ribbon, .footer-credit, .no-print { display: none !important; }

  body { font-size: 12px; }
  .print-header { display: flex !important; justify-content: space-between; margin-bottom: 12px; }
  .print-footer { display: block !important; text-align: center; font-size: 11px; margin-top: 20px; }

  .section-title, table.report-table, .chart-wrap, .card {
    page-break-inside: avoid;
  }
  tr { page-break-inside: avoid; }

  .btn { background: none !important; color: var(--navy) !important; border: 1px solid var(--navy) !important; }

  @page { size: A4 portrait; margin: 14mm; }
}
.print-header, .print-footer { display: none; }

/* ===================== Inventory: Stock In highlight ===================== */
.stock-in-highlight { color: var(--emerald); }
.stock-in-highlight-input { border-color: var(--emerald) !important; background: #E9F9EF; }

/* ===================== POS Receipt ===================== */
.receipt-print-area { display: none; }
.receipt {
  /* Fluid up to 280px and border-box, so padding is INCLUDED in the width:
     the old fixed 280px + 16px padding was wider than an 80mm page's printable
     area (72mm ~ 272px) and got cut off at the right-hand margin. */
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  margin: 0 auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  color: #000;
  padding: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}
.receipt-business { font-weight: bold; text-align: center; font-size: 14px; }
.receipt-sub { text-align: center; font-size: 11px; }
.receipt-hr { border: none; border-top: 1px dashed #000; margin: 6px 0; }
.receipt-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.receipt-table th:nth-child(2), .receipt-table td:nth-child(2) { width: 14%; }
.receipt-table th:last-child, .receipt-table td:last-child { width: 30%; }
.receipt-table th, .receipt-table td { padding: 2px 0; text-align: left; overflow-wrap: anywhere; word-break: break-word; }
.receipt-table th:last-child, .receipt-table td:last-child,
.receipt-table th:nth-child(2), .receipt-table td:nth-child(2) { text-align: right; }
.receipt-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; }
.receipt-line span:first-child { flex-shrink: 0; }
.receipt-line span:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; word-break: break-word; }
.receipt-total { font-weight: bold; font-size: 13px; border-top: 1px dashed #000; margin-top: 4px; padding-top: 4px; }
.receipt-footer { text-align: center; font-size: 11px; margin-top: 6px; }
.receipt-brand { color: #555; font-size: 10px; margin-top: 2px; }

@media print {
  body.printing-receipt > *:not(.receipt-print-area) { display: none !important; }
  body.printing-receipt .receipt-print-area { display: block !important; position: fixed; top: 0; left: 0; width: 100%; }
}

/* ===================== Setup screen: 5-card stepper ===================== */
.setup-progress { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 4px 0 18px; }
.setup-progress .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line, #E3E8EE); transition: background 0.25s ease, transform 0.25s ease; }
.setup-progress .dot.active { background: var(--purple); transform: scale(1.3); }
.setup-progress .dot.done { background: var(--purple); opacity: 0.45; }

.setup-stepper { position: relative; }
.setup-card { display: none; }
.setup-card.active { display: block; animation: setupSlideIn 0.35s ease; }
@keyframes setupSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===================== Homepage quote ticker (setup screen only) ===================== */
#nq-root {
  --nq-green: var(--purple);
  --nq-navy: #383838;
}
#nq-root, #nq-root * { box-sizing: border-box; }
#nq-root {
  /* Two full lines of ticker text (line-height x 2 + the text box's vertical
     padding) are ALWAYS reserved, so a long verse wrapping to a second line
     never pushes the content below it down. initNqTicker() may raise this
     further (3 lines on very narrow phones) after measuring the longest
     quote at the real width. */
  --nq-line: 22.5px;
  --nq-pad-y: 16px;
}
#nq-root .nq-ticker {
  display: flex; justify-content: center; align-items: center;
  position: relative;
  height: calc(var(--nq-line) * 2 + var(--nq-pad-y)); min-height: calc(var(--nq-line) * 2 + var(--nq-pad-y));
  margin: 0 auto 18px; padding: 0 8px; overflow: hidden;
}
#nq-root .nq-ticker-text {
  display: inline-block; max-width: 100%;
  background: rgba(105,94,169,0.18);
  color: var(--nq-navy);
  font-family: 'Hind Siliguri', sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5;
  padding: 8px 16px; border-radius: 8px; text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#nq-root .nq-ticker-text.nq-show { opacity: 1; transform: translateY(0); }
@media (max-width: 560px) {
  #nq-root { --nq-line: 21px; --nq-pad-y: 14px; }
  #nq-root .nq-ticker-text { font-size: 16px; padding: 7px 12px; }
}

/* ===================== Restaurant Version: Recipe/BOM rows ===================== */
.supply-recipe-row {
  display: grid; grid-template-columns: 1.6fr 0.55fr 0.55fr 0.7fr auto;
  gap: 5px; align-items: center; margin-bottom: 8px;
}
.supply-recipe-row select, .supply-recipe-row input {
  width: 100%; min-width: 0; padding: 8px 4px; font-size: 14px;
}
.supply-recipe-row .narrow-num { padding-left: 2px; padding-right: 2px; text-align: center; }
.supply-recipe-row .recipe-row-cost {
  font-size: 14px; font-weight: 600; text-align: right; color: var(--navy); white-space: nowrap;
}
.supply-recipe-row .icon-btn { flex: 0 0 auto; margin-left: 6px; padding: 0; justify-self: end; }
@media (max-width: 420px) {
  .supply-recipe-row { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 4px 5px; }
  .supply-recipe-row select:first-child { grid-column: 1 / -1; }
}

/* Take Order cart item note (item 3: "add notes/instructions") */
.cart-item-note {
  width: 100%; margin-top: 6px; padding: 6px 8px; font-size: 14px;
  border: 1px solid var(--line, #E3E8EE); border-radius: 6px;
}

/* ===================== Restaurant Version: Purchase Supply/Product tags (item 10) ===================== */
.chip-tag {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.chip-tag.supply-tag { background: rgba(105,94,169,0.18); color: #4B4190; }
.chip-tag.product-tag { background: rgba(56,56,56,0.12); color: var(--navy); }

/* ===================== Desktop layout (PC browsers) =====================
   Everything in this block only takes effect at min-width: 900px, so phones
   and narrow tablets are completely unaffected - .screen-body keeps
   stacking in a single column below that width exactly as it always has.

   Above the breakpoint, .screen-body becomes a 4-track grid and every
   direct child defaults to spanning all 4 tracks (grid-column: 1 / -1) -
   i.e. it still renders as one full-width column, just inside a wider,
   centered shell. Only elements explicitly opted in with .col-2 / .col-3 /
   .col-1 (added per-screen, only to independent sibling sections that make
   sense side-by-side - forms, widgets, summary cards, not tables or lists)
   break out into multiple columns. This keeps every screen we haven't
   hand-reviewed behaving exactly as before, just wider.

   Reports screens (.screen-body.reports-body) opt out of the grid/column
   system entirely and stay a single column, per spec - they just get a
   little extra room for tables/charts to breathe. */
@media (min-width: 900px) {
  .screen-body {
    /* A plain, single-section screen (a form, a simple list) just gets a
       little more breathing room - not stretched edge-to-edge, which would
       make a lone input field awkwardly wide. Only screens explicitly split
       into side-by-side sections (below) use the full wide shell. */
    max-width: 760px;
  }
  .screen-body.reports-body {
    max-width: 900px;
  }
  /* Signup/setup, recovery and code-login screens: keep their original
     mobile width on desktop too, unchanged by the wider PC layout. */
  .screen-body.auth-body {
    max-width: 640px;
  }
  /* Only screens that actually have .col-1/.col-2/.col-3 sections become a
     grid at all. A plain, single-column screen (a simple form, a login
     screen) stays in normal block flow - exactly like mobile, just in a
     slightly wider shell - instead of picking up an extra row-gap on top
     of each element's own margin, which was stacking into oversized gaps
     between fields and buttons. */
  .screen-body:has(> .col-1), .screen-body:has(> .col-2), .screen-body:has(> .col-3) {
    max-width: 1180px;
  }
  .screen-body:not(.reports-body):has(> .col-1, > .col-2, > .col-3) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    /* .screen-body also has flex:1 (so it fills the viewport height below
       the header). Without this, the grid's default "normal" alignment
       behaves like stretch and spreads that leftover height across the
       auto-sized rows themselves - pushing later rows far down. Pinning
       everything to the top keeps rows at their natural content height,
       same as before, with any leftover space simply left below. */
    align-content: start;
    gap: 6px 24px;
  }
  .screen-body:not(.reports-body):has(> .col-1, > .col-2, > .col-3) > * { grid-column: 1 / -1; }
  .screen-body:not(.reports-body) > .col-1 { grid-column: span 1; }
  .screen-body:not(.reports-body) > .col-2 { grid-column: span 2; }
  .screen-body:not(.reports-body) > .col-3 { grid-column: span 3; }

  /* Rows/widgets that are already internally flex/grid (stat cards, hot
     action buttons, chip rows, etc.) get to breathe in the wider shell
     instead of being stretched into a handful of oversized items. */
  .screen-body:not(.reports-body) > .stat-row,
  .screen-body:not(.reports-body) > .hot-row { gap: 16px; }

  /* Dashboard: nav buttons become a tile grid instead of one long list. */
  .dashboard-btn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }

  /* Reusable 2-up form layout for long profile/settings-style forms.
     Opt-in per screen; mark any field that should keep the full row
     (chip pickers, textareas, etc.) with the extra "full" class. */
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .form-grid-2 > .field.full { grid-column: 1 / -1; }

  /* This divider exists to separate two stacked sections on mobile; once
     those sections sit side by side on desktop it's no longer needed. */
  .col2-top-divider { display: none; }
}

/* Slightly roomier again on large monitors. */
@media (min-width: 1400px) {
  .screen-body { max-width: 1320px; }
  .screen-body.reports-body { max-width: 980px; }
}


/* ===================== Payment method / change / invoice pop-up ===================== */
.change-amount-value { font-weight: 700; color: var(--purple); }
.payment-method-block { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d5dadd; }
.payment-method-label { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.payment-method-row { margin-bottom: 8px; }
.payment-method-row .chip { padding: 7px 14px; }
.payment-note-input { width: 100%; padding: 7px 10px; font-size: 15px; }

.invoice-clickable { cursor: pointer; transition: background 0.15s; }
.invoice-clickable:hover { background: #F7F9FA; }

.invoice-modal-box { max-width: 460px; max-height: 88vh; overflow-y: auto; text-align: left; position: relative; }
.invoice-meta .summary-line { padding: 2px 0; font-size: 15px; }
.invoice-item-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; }
.invoice-item-name { font-weight: 600; color: var(--navy); font-size: 16px; }
.invoice-item-sub { font-size: 14px; color: var(--grey); margin-top: 2px; }
.invoice-item-amt { font-weight: 700; white-space: nowrap; font-size: 16px; }
.invoice-items { margin-bottom: 10px; }
.invoice-legacy-items { font-size: 15px; margin-bottom: 10px; word-break: break-word; }

.invoice-actions { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.invoice-actions .btn { margin: 0; flex: 1 1 0; }
.invoice-actions .invoice-delete-btn { flex: 0 0 46px; width: 46px; height: auto; min-height: 44px; border-color: var(--red); }
.deleted-invoice-card { margin-bottom: 8px; }


/* ===================== Business logo in the header ===================== */
/* A fixed-size box: whatever logo is uploaded is scaled to FIT inside it with
   its original proportions (never stretched or cropped). */
.header-logo-slot { display: flex; align-items: center; justify-content: center; height: 54px; max-width: min(200px, 56vw); }
.client-logo-plate { display: flex; align-items: center; justify-content: center; height: 100%; max-width: 100%; box-sizing: border-box; padding: 4px 10px; background: #fff; border-radius: 8px; }
.client-logo-plate.transparent { background: transparent; padding: 4px 0; }
.client-logo { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.header-business-name { color: var(--white); font-weight: 700; font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-preview-strip { background: var(--navy); border-radius: 10px; padding: 10px; display: flex; justify-content: center; margin: 6px 0 10px; }
.logo-bg-check { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; cursor: pointer; margin: 0 0 8px; width: fit-content; }
.logo-bg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--purple); cursor: pointer; }
.logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.logo-actions .btn { margin: 0; cursor: pointer; }

/* ===================== Offline status chip + Sync queue panel ===================== */
.msg.info { background: #EAF4FB; color: var(--navy); border: 1px solid var(--blue); }
.nq-chip {
  position: fixed; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 250;
  display: none; max-width: calc(100% - 20px); padding: 7px 12px; border-radius: 16px;
  background: var(--navy); color: #fff; border: 0; font-size: 14px; font-weight: 600; font-family: inherit;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25); cursor: pointer; text-align: left;
}
.nq-chip.offline { background: var(--amber); color: var(--navy); }
.nq-chip.alert { background: var(--red); color: #fff; }
.nq-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.modal-box.nq-panel { max-height: 80vh; overflow-y: auto; text-align: left; }
.nq-list { margin: 10px 0; }
.nq-row { border-top: 1px solid #E3E7EB; padding: 10px 0; }
.nq-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.nq-sum { font-weight: 600; font-size: 16px; word-break: break-word; }
.nq-meta { font-size: 14px; color: var(--grey); margin-top: 2px; }
.nq-badge { flex-shrink: 0; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #EEE; color: var(--navy); }
.nq-badge.ok { background: #E9F9EF; color: var(--emerald); }
.nq-badge.bad { background: #FDEDEC; color: var(--red); }
.nq-badge.wait { background: #FEF5E7; color: #B9770E; }
.nq-problem { font-size: 14px; color: var(--red); margin-top: 4px; }
.nq-details { margin: 4px 0 0 16px; padding: 0; font-size: 14px; color: var(--navy); }
.nq-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.nq-btns .btn, .nq-foot .btn { width: auto; margin: 0; }
.nq-foot { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #E3E7EB; padding-top: 10px; }


/* ===================== Home dashboard: flashcards ===================== */
/* Very light brand-purple cards with a soft raised ("embossed") edge on a
   white page; purple + dark gray throughout, with the Sale / Collection / Due /
   Expense capsule hues reserved for chart accents. */
.home-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.home-lastsync { font-size: 13px; min-width: 0; flex: 0 1 auto; }
.home-clock { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; text-align: right; }

.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.fc {
  min-width: 0; display: flex; flex-direction: column;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, #F7F7F8 0%, #EDEDEF 100%);
  border: 1px solid #DCDCE0; border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 0 rgba(56,56,56,0.10),
    0 1px 2px rgba(56,56,56,0.06),
    0 8px 18px -8px rgba(56,56,56,0.25);
}
.fc-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.fc-title::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, var(--purple), var(--purple)); flex-shrink: 0; }
.fc-trend, .fc-rev, .fc-recent, .fc-stock { grid-column: 1 / -1; }
.fc-note { font-size: 12px; color: var(--grey); text-align: center; margin-top: 6px; }
.fc-more { margin-top: 6px; font-size: 15px; }

/* 7-day trend */
.home-trend-wrap { position: relative; height: 200px; border: 0; padding: 0; }
.home-trend-wrap canvas, .fc-chart canvas, .donut-wrap canvas { position: absolute; left: 0; top: 0; }

/* Sales progress gauge */
#homeGauge { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.gauge-wrap { position: relative; width: 100%; max-width: 250px; margin: 0 auto; }
.gauge-svg { display: block; width: 100%; height: auto; }
#hgValue { transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1); }
.gauge-center { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; line-height: 1.1; }
.gauge-count { font-size: 26px; font-weight: 800; color: var(--navy); }
.gauge-sub { font-size: 12px; color: var(--grey); margin-top: 1px; }
.gauge-chip { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.gauge-chip.up { background: rgba(105,94,169,0.20); color: #4B4190; }
.gauge-chip.down { background: rgba(231,76,60,0.14); color: #C0392B; }
.gauge-chip.flat { background: rgba(127,140,141,0.16); color: var(--grey); }
.gauge-chip .chip-note { font-weight: 500; opacity: 0.85; }
.gauge-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; }
.gauge-foot > div { display: flex; flex-direction: column; min-width: 0; }
.gauge-foot > div:last-child { text-align: right; }
.gauge-foot b { color: var(--navy); font-size: 14px; }

/* Top selling donut */
.donut-wrap { position: relative; width: 100%; max-width: 170px; aspect-ratio: 1 / 1; margin: 0 auto 10px; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; line-height: 1.15; }
.donut-center b { font-size: 22px; color: var(--navy); }
.donut-center span { font-size: 12px; color: var(--grey); }
.donut-legend { list-style: none; margin: 0; padding: 0; }
.donut-legend li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 3px 0; }
.donut-legend i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend b { color: var(--navy); }

/* Revenue comparison */
.fc-rev #homeRevCompare { flex: 1; display: flex; flex-direction: column; }
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rev-total { display: flex; flex-direction: column; line-height: 1.2; }
.rev-total span { font-size: 13px; }
.rev-total b { font-size: 20px; color: var(--navy); }
.fc-chart { position: relative; flex: 1; min-height: 200px; }

/* Stock-outs / recent entries: borderless rows inside their card */
.fc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 2px; }
.fc-row .entry-info { flex: 1; min-width: 0; }
.fc-row .entry-amount { font-weight: 700; white-space: nowrap; }

@media (max-width: 560px) {
  .gauge-count { font-size: 22px; }
  .gauge-sub { font-size: 10.5px; }
  .gauge-chip { font-size: 11px; padding: 1px 6px; margin-top: 3px; }
  .fc { padding: 12px 11px 10px; }
  .fc-gauge .fc-title, .fc-top .fc-title { font-size: 15px; }
}

@media (min-width: 900px) {
  .screen-body.home-body { max-width: 1180px; }
  .home-cards { grid-template-columns: repeat(10, 1fr); gap: 16px; }
  .fc { padding: 18px 20px 16px; }
  .fc-trend { grid-column: span 7; }
  .fc-gauge { grid-column: span 3; }
  .fc-top { grid-column: span 3; }
  .fc-rev { grid-column: span 7; }
  .fc-recent { grid-column: span 5; }
  .fc-stock { grid-column: span 5; }
  .home-trend-wrap { height: 250px; }
  .fc-chart { min-height: 250px; }
  .gauge-count { font-size: 34px; }
  .gauge-sub { font-size: 13px; }
  .gauge-chip { font-size: 13px; }
  .gauge-foot { font-size: 14px; } .gauge-foot b { font-size: 16px; }
  .donut-wrap { max-width: 190px; }
}

/* Dashboard top cards + hot buttons: slightly larger text, and the same light
   purple flashcard finish as the cards below them (scoped to Home only). */
.home-body .stat-card {
  background: linear-gradient(180deg, #F7F7F8 0%, #EDEDEF 100%);
  border: 1px solid #DCDCE0; border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 0 rgba(56,56,56,0.10),
    0 1px 2px rgba(56,56,56,0.06),
    0 8px 18px -8px rgba(56,56,56,0.25);
}
.home-body .stat-card .stat-label { font-size: 15px; }
.home-body .hot-btn { font-size: 17px; text-transform: uppercase; letter-spacing: 0.4px; }

/* ---------- Notification screen: running notifications (1 column on phone, 3 on PC) ---------- */
.notification-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.notification-card { background: linear-gradient(180deg, #F7F7F8 0%, #EDEDEF 100%); border: 1px solid #DCDCE0; border-radius: 14px; padding: 12px 14px; min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 0 rgba(56,56,56,0.10), 0 1px 2px rgba(56,56,56,0.06), 0 8px 18px -8px rgba(56,56,56,0.25); }
.notification-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.notification-subject { overflow-wrap: anywhere; }
.notification-actions { display: flex; gap: 6px; flex-shrink: 0; }
.notification-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; margin: 8px 0; }
.notification-to { font-size: 13px; color: var(--grey); }
@media (min-width: 900px) {
  .screen-body.notification-body { max-width: 1180px; }
  .notification-form { max-width: 760px; }
  .notification-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}


/* =====================================================================
   v6.6 ADDITIONS
   ===================================================================== */

/* Menu: sub-menus can hold the (now longer) Inventory list at the bigger font */
.app-menu-submenu.open { max-height: 280px; }
.app-menu-submenu.open.large { max-height: 640px; }
.menu-item.active { background: rgba(105,94,169,0.22); color: var(--white); font-weight: 600; }
.menu-item.active svg { color: var(--purple-light) !important; }

/* The PC sidebar and slim title bar never show on phones / before sign-in */
.desk-sidebar, .desk-titlebar { display: none; }

/* ---------- Categories Management ---------- */
.cat-tree-section { margin-top: 8px; }
.cat-tree-head { margin: 22px 0 10px; }
.cat-tree-head .icon-square-btn { margin: 0; }
.cat-tree { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cat-tree-cat { border: 1.5px solid var(--navy); border-radius: 10px; padding: 10px 14px; background: var(--white); min-width: 0; }
.cat-tree-cat-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.cat-tree-subs { list-style: none; margin: 8px 0 0 9px; padding: 0 0 0 16px; border-left: 2px solid rgba(105,94,169,0.45); }
.cat-tree-subs li { padding: 4px 0; overflow-wrap: anywhere; }
.cat-tree-empty { margin: 6px 0 0 26px; font-size: 14px; }
.cat-edit-row { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.cat-edit-row.sub { margin-left: 22px; }
.cat-edit-row input { flex: 1; min-width: 0; padding: 7px 10px; }
.cat-edit-row .icon-btn { padding: 4px; }
.cat-edit-row .icon-btn:disabled { opacity: 0.3; cursor: default; }
.cat-tree.edit .cat-tree-cat { border-color: var(--purple); }

/* ---------- Category / Subcategory picker (Add / Edit Product) ---------- */
.cat-picker { position: relative; }
.cat-picker-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  border: 1.5px solid var(--navy); border-radius: 8px; padding: 10px 12px; background: var(--white);
  color: var(--navy); font-size: 17px; text-align: left; cursor: pointer;
}
.cat-picker-btn:hover, .cat-picker-btn:focus { border-color: var(--purple); outline: none; }
.cat-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-picker-label.placeholder { color: var(--grey); }
.cat-picker-panel {
  position: absolute; z-index: 60; top: 100%; right: 0; margin-top: 4px;
  width: 320px; max-width: min(320px, 86vw); max-height: 320px; overflow-y: auto;
  background: var(--white); border: 1.5px solid var(--navy); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(56,56,56,0.22); text-align: left;
}
.cat-opt, .cat-pick-row { display: flex; align-items: center; gap: 4px; padding: 9px 12px; cursor: pointer; }
.cat-opt.sub { padding-left: 44px; }
.cat-opt:hover, .cat-pick-row:hover { background: #F1EFF9; }
.cat-opt.selected, .cat-pick-row.selected { background: rgba(105,94,169,0.18); font-weight: 700; }
.cat-opt.none { color: var(--grey); border-bottom: 1px solid #eee; }
.cat-pick-row { padding: 4px 8px; }
.cat-pick-name { flex: 1; padding: 5px 4px; font-weight: 600; overflow-wrap: anywhere; }
.cat-chev { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; }

/* ---------- Restaurant: Take Order menu (categories > subcategories > products) ---------- */
.menu-tree { margin-top: 4px; }
.menu-cat { border: 1.5px solid var(--navy); border-radius: 10px; margin-bottom: 8px; background: var(--white); overflow: hidden; }
.menu-cat-head, .menu-sub-head {
  display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer;
  color: var(--navy); text-align: left; padding: 11px 14px; font-size: 17px; font-weight: 700;
}
.menu-cat-head:hover, .menu-sub-head:hover { background: #F3FAF6; }
.menu-cat-head .menu-count, .menu-sub-head .menu-count { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--grey); }
.menu-cat.open > .menu-cat-head { background: #F1EFF9; }
.menu-cat-body { border-top: 1px solid #E3E8EE; padding: 4px 0 6px; }
.menu-sub-head { font-size: 16px; font-weight: 600; padding: 9px 14px 9px 30px; }
.menu-sub.open > .menu-sub-head { color: #4B4190; }
.menu-prod-list { padding: 0 10px 4px 30px; }
.menu-prod {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: #F7F9FA; border: 1px solid #E3E8EE; border-radius: 8px; margin: 5px 0; padding: 9px 12px; cursor: pointer;
  color: var(--navy); font-size: 16px; text-align: left;
}
.menu-prod:hover { background: #F1EFF9; border-color: var(--purple); }
.menu-prod .mp-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.menu-prod .mp-var { display: block; font-size: 13px; color: var(--grey); font-weight: 400; }
.menu-prod .mp-price { font-weight: 700; white-space: nowrap; color: #4B4190; }
.menu-empty { padding: 8px 14px 8px 30px; font-size: 14px; }

/* ---------- Restaurant: Order Status (Active on top, Completed below) ---------- */
.order-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-section-head .section-title { margin: 0; }
.order-sub-tools { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; margin: 8px 0 12px; }
.order-sub-tools .field { margin: 0; width: 100%; max-width: 280px; }
.order-sub-tools .icon-square-btn { margin: 0; flex: 0 0 40px; }
.order-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.order-grid > .card { margin-bottom: 0; min-width: 0; }
.order-load-more { margin: 12px auto 4px; max-width: 260px; }

/* ---------- Deleted Invoices: restore + delete permanently ---------- */
.deleted-invoice-actions { display: flex; gap: 6px; flex-shrink: 0; }
.deleted-invoice-actions .icon-square-btn { margin: 0; }
.icon-square-btn.danger { border-color: var(--red); }
.icon-square-btn.danger:hover { background: var(--red); }
.icon-square-btn.danger:hover svg { color: #fff !important; }

/* ---------- Business logo / bell in the PC sidebar ---------- */
@media (min-width: 900px) {
  :root { --sidebar-w: 300px; }

  /* The permanent left menu */
  body.desk-shell .desk-sidebar {
    display: flex; flex-direction: column;
    position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: #383838; color: var(--white);
    box-shadow: 4px 0 18px rgba(0,0,0,0.12);
  }
  .desk-sidebar-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.18);
  }
  .desk-sidebar-logo { min-width: 0; flex: 1; display: flex; align-items: center; }
  .desk-sidebar-logo .header-logo-slot { max-width: 100%; justify-content: flex-start; }
  .desk-sidebar-logo .header-business-name { font-size: 18px; }
  .desk-bell {
    position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--white); cursor: pointer; padding: 8px; line-height: 0; border-radius: 8px;
  }
  .desk-bell:hover { background: rgba(105,94,169,0.18); }
  .desk-bell svg { width: 22px !important; height: 22px !important; }
  .desk-bell .notification-badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; font-size: 11px; text-align: center; }
  .desk-sidebar-nav {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 10px 0 14px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent;
  }
  .desk-sidebar-nav .app-menu-top { padding-top: 4px; gap: 6px; }
  .desk-sidebar-nav .app-menu-submenu.open.large, .desk-sidebar-nav .app-menu-submenu.open { max-height: 900px; }
  .desk-sidebar-nav .menu-item { padding: 8px 20px; }
  .desk-sidebar-nav .app-menu-submenu .menu-item { padding-left: 46px; }
  .desk-sidebar-nav .app-menu-spacer { min-height: 8px; }

  /* Header is replaced by the sidebar + a slim title bar */
  body.desk-shell .app-header { display: none; }
  body.desk-shell .desk-titlebar {
    display: flex; align-items: center; position: sticky; top: 0; z-index: 20;
    height: 52px; padding: 0 4px; margin: 0 0 6px; background: var(--white);
    border-bottom: 1px solid #E3E8EE;
  }
  .desk-title { margin: 0; font-size: 21px; font-weight: 700; color: var(--navy); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.lang-bn .desk-title { font-size: 22px; }

  /* The content area fills everything to the right of the menu, with a
     comfortable gap on both sides, instead of being centred on the screen. */
  body.desk-shell #app { margin-left: var(--sidebar-w); padding: 0 36px; width: auto; min-width: 0; }
  body.desk-compact { --sidebar-w: 220px; }
  body.desk-compact #app { padding-left: 20px !important; padding-right: 20px !important; }
  body.desk-shell .screen-body { max-width: 860px; }
  body.desk-shell .screen-body.reports-body { max-width: 1100px; }
  body.desk-shell .screen-body.auth-body { max-width: 640px; }
  body.desk-shell .screen-body:has(> .col-1), body.desk-shell .screen-body:has(> .col-2), body.desk-shell .screen-body:has(> .col-3),
  body.desk-shell .screen-body.home-body, body.desk-shell .screen-body.notification-body, body.desk-shell .screen-body.orders-body { max-width: 1560px; }
  body.desk-shell .footer-credit { margin-left: 0; }

  /* Order Status: three orders per row */
  .screen-body.orders-body { max-width: 1180px; }
  .order-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-tree { grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
  .cat-picker-panel { width: 340px; }
}

@media (min-width: 1250px) {
  .order-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-tree { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .desk-sidebar, .desk-titlebar { display: none !important; }
  body.desk-shell #app { margin-left: 0 !important; padding: 0 !important; }
}
@media (min-width: 900px) {
  .cat-tree.edit { grid-template-columns: 1fr; max-width: 760px; }
}
@media (min-width: 1250px) {
  .cat-tree.edit { grid-template-columns: 1fr; }
}

/* Subtle divider + extra breathing room between the two sections of Order / Booking Status */
.section-divider { border: none; border-top: 1px solid #E3E6E8; margin: 38px 0 28px; }

/* Business name beside the logo, sitting on the logo's bottom edge */
.header-logo-row { display: flex; align-items: flex-end; gap: 10px; min-width: 0; max-width: 100%; }
.header-logo-name {
  color: var(--white); font-weight: 700; font-size: 16px; line-height: 1.15; min-width: 0;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 2px;
}
/* Only beside an uploaded logo — with no logo the name already stands in for it */
.header-logo-slot:not(:has(.client-logo-plate)) + .header-logo-name { display: none; }
.desk-sidebar-logo .header-logo-row { width: 100%; }
@media (min-width: 900px) { .desk-sidebar-logo .header-logo-name { max-width: none; flex: 1 1 0; font-size: 17px; } .desk-sidebar-logo .header-logo-slot { flex: 0 1 auto; } }


/* ===================== v6.8 — product pictures ===================== */
.pimg { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; border-radius: 10px; background: #EEF2F5; vertical-align: middle; line-height: 1; }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pimg-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.pimg.xs { width: 32px; height: 32px; border-radius: 8px; } .pimg.xs .pimg-letter { font-size: 14px; }
.pimg.sm { width: 44px; height: 44px; }
.pimg.md { width: 60px; height: 60px; } .pimg.md .pimg-letter { font-size: 22px; }
.pimg.lg { width: 104px; height: 104px; border-radius: 12px; } .pimg.lg .pimg-letter { font-size: 40px; }
.pimg.fill { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px 10px 0 0; } .pimg.fill .pimg-letter { font-size: 44px; }
.card.with-thumb { display: flex; align-items: center; gap: 12px; }
.with-thumb-body { min-width: 0; flex: 1; }
.product-img-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.product-img-actions { flex: 1; min-width: 200px; }
.search-scan-row:has(.view-toggle) { grid-template-columns: 1fr auto auto; }
.view-toggle { display: inline-flex; border: 1px solid #D5DCE3; border-radius: 10px; overflow: hidden; background: #fff; }
.view-toggle button { border: none; background: transparent; width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.view-toggle button.active { background: #F1EFF9; }
.view-toggle button + button { border-left: 1px solid #D5DCE3; }
.cart-with-thumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cart-with-thumb > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.product-grid { margin-bottom: 12px; }
.product-grid, .menu-prod-list.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.menu-prod-list.as-grid { padding: 6px 10px 8px 14px; }
.product-tile { background: #fff; border: 1px solid #E3E8EE; border-radius: 12px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(56,56,56,0.06); }
.product-tile:hover { border-color: var(--purple); }
.product-tile-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-tile-name { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.product-tile-meta { font-size: 13px; }
.product-tile-price { font-weight: 700; color: #4B4190; font-size: 15px; margin-top: 2px; }
.menu-prod.menu-prod-tile { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; margin: 0; overflow: hidden; border-radius: 12px; background: #fff; }
.menu-prod-tile .mp-tile-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.menu-prod-list.as-grid .menu-prod-tile { margin: 0; }

/* ===================== v6.8 - receipt logo ===================== */
.receipt-logo-wrap { display: flex; justify-content: center; margin-bottom: 4px; }
.receipt-logo { width: auto; height: auto; max-width: 160px; max-height: 80px; object-fit: contain; image-rendering: crisp-edges; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.receipt-logo-preview-strip { margin-top: 8px; }
.receipt-logo-preview { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 112px; background: #fff; border: 1px dashed #B8C2CC; border-radius: 8px; }
.receipt-logo-preview img { max-width: 100%; max-height: 100%; }
.receipt-logo-slider { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; font-size: 15px; }
.receipt-logo-slider input[type=range] { flex: 1; max-width: 260px; }

/* ===================== v6.9 - date fields ===================== */
.row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.row-4 .field { margin-bottom: 0; min-width: 0; }
.row-4 .date-field input[type="date"] { font-size: 14px; padding-left: 8px; padding-right: 6px; min-width: 0; }
.row-4 .date-field label { font-size: 14px; }
@media (max-width: 640px) { .row-4 { grid-template-columns: 1fr 1fr; } }

/* ===================== v6.9 - section cards on every screen ===================== */
.fc.fc-auto { display: block; padding: 14px 16px 12px; margin-bottom: 14px; min-width: 0; }
.fc.fc-auto > .section-title:first-child, .fc.fc-auto > .order-section-head:first-child { margin-top: 0; }
/* same green-bar title as the Dashboard cards */
.fc .section-title, .fc .list-title {
  margin: 0 0 10px; padding-left: 0; border-left: none; font-size: 16px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 8px;
}
.fc .section-title::before, .fc .list-title::before {
  content: ''; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, var(--purple), var(--purple-light)); flex-shrink: 0;
}
.fc.fc-auto .order-section-head .section-title { margin: 0; }
.fc.fc-auto > .col-2:last-child, .fc.fc-auto > :last-child { margin-bottom: 0; }
@media print {
  .fc, .fc.fc-auto { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 8px !important; }
}

/* ===================== v6.9 - roomier pop-ups & screens on PC ===================== */
@media (min-width: 900px) {
  .modal-box.modal-wide { max-width: 720px; padding: 30px 36px; }
  .modal-box.modal-wide .summary-line { font-size: 17px; padding: 6px 0; }
  .modal-box.modal-wide .row-2, .modal-box.modal-wide .row-3-even, .modal-box.modal-wide .row-4 { gap: 14px; }
  .invoice-modal-box { max-width: 820px; padding: 30px 36px; }
  .invoice-modal-box .invoice-item-name, .invoice-modal-box .invoice-item-amt { font-size: 17px; }
  .modal-box.notifications-modal-box { max-width: 680px; }
  body.desk-shell .screen-body { max-width: 1100px; }
  body.desk-shell .screen-body.reports-body { max-width: 1200px; }
}

/* ---------- VAT Settings ---------- */
.vat-rate-row { display: flex; align-items: center; gap: 8px; }
.vat-rate-box { max-width: 120px; text-align: center; font-weight: 700; }
.tax-note { margin-top: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--navy); background: #F1EFF9; border-left: 4px solid var(--purple); border-radius: 8px; }
.vat-rate-pct { font-weight: 700; color: var(--navy); }
.vat-radio { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; cursor: pointer; font-weight: 500; }
.vat-radio input { margin-top: 4px; width: auto; }

/* ---------- Category Tax Rule ---------- */
.cat-tax-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--navy); background: rgba(105,94,169,0.14); }
.cat-edit-row .cat-tax-input { width: 78px; flex: 0 0 78px; text-align: center; }

/* ---------- Purchase invoice ---------- */
.proc-table td, .proc-table th { padding: 8px 6px; }
.proc-invoice { font-family: Arial, sans-serif; color: #383838; padding: 4px; }
.proc-inv-head { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #383838; padding-bottom: 12px; margin-bottom: 14px; }
.proc-inv-logo { max-height: 70px; max-width: 120px; object-fit: contain; }
.proc-inv-biz { flex: 1; font-size: 13px; line-height: 1.5; }
.proc-inv-name { font-size: 22px; font-weight: 700; }
.proc-inv-title { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: right; }
.proc-inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; margin-bottom: 16px; }
.proc-inv-meta div, .proc-inv-totals div { display: flex; justify-content: space-between; border-bottom: 1px dotted #c9d1d9; padding: 3px 0; }
.proc-inv-table { width: 100%; margin-bottom: 12px; }
.proc-inv-totals { width: 50%; margin-left: auto; font-size: 15px; }

/* ---------- Reports: plain white, no cards ---------- */
body:has(.screen-body.reports-body) { background: #fff; }
.screen-body.reports-body, .screen-body.reports-body .fc, .screen-body.reports-body .fc.fc-auto { background: #fff; }
.reports-body .card, .reports-body .stat-card, .reports-body .chart-wrap, .reports-body .hot-card {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
}
.reports-body .chart-wrap { padding: 0; margin-bottom: 18px; }
.reports-body .chart-row .chart-wrap { padding: 0; }
.print-chart-img { display: none; }
@media print {
  body, .screen-body.reports-body { background: #fff !important; }
  .chart-wrap { border: none !important; box-shadow: none !important; padding: 0 !important; text-align: center; }
  .chart-wrap canvas { display: none !important; }
  .chart-wrap .print-chart-img { display: block !important; width: auto; height: auto; max-width: 100%; max-height: 85mm; margin: 0 auto; object-fit: contain; }
  .chart-row { display: flex; gap: 8mm; }
  .chart-row .chart-box { height: auto !important; }
  .chart-row .chart-wrap { flex: 1 1 0; min-width: 0; }
  .chart-row .chart-wrap .print-chart-img { max-height: 70mm; }
}

/* ---------- Sign-up / sign-in: plain white ---------- */
body:has(.screen-body.auth-body), .screen-body.auth-body { background: #fff; }

/* ---------- Report filters: Branch Access, Supplier, Brand in one row (PC) ---------- */
.report-filter-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.report-filter-row .field { margin-bottom: 12px; min-width: 0; }
@media (min-width: 700px) { .report-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.report-filter-row select.form-select { width: 100%; }

/* ---------- Settle Due (saved sale / booking) ---------- */
.settle-due-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #D5DCE3; }
.settle-due-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.settle-due-row input { flex: 1; min-width: 0; }
.settle-due-row .btn { width: auto; white-space: nowrap; }

/* ===================== v6.18 - device orientation card ===================== */
.layout-card { padding: 2px 0; }
.layout-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; margin: 0; }
.layout-toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.layout-toggle-text .muted, .layout-opt-help { font-size: 13px; font-weight: 400; }
.layout-opt-help { display: block; margin-top: 2px; }
.layout-switch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 46px !important; height: 26px; border-radius: 13px; background: #C9D1D9; position: relative; cursor: pointer; transition: background .2s; margin: 0; border: none; padding: 0; }
.layout-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.layout-switch:checked { background: var(--purple); }
.layout-switch:checked::after { transform: translateX(20px); }
.layout-manual { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E3E6E8; }
.layout-manual.is-off { opacity: 0.55; }
.layout-manual-title { font-weight: 600; margin-bottom: 4px; }
.layout-note { font-size: 13px; margin: 8px 0 0; }

/* ---------- Right-to-left languages (Arabic, Urdu) ---------- */
html[dir="rtl"] body { direction: rtl; }
body.lang-rtl .receipt-table th, body.lang-rtl .receipt-table td { text-align: right; }
body.lang-rtl .receipt-table th:last-child, body.lang-rtl .receipt-table td:last-child,
body.lang-rtl .receipt-table th:nth-child(2), body.lang-rtl .receipt-table td:nth-child(2) { text-align: left; }
body.lang-rtl .receipt-line span:last-child { text-align: left; }
.receipt[dir="rtl"] .receipt-table th, .receipt[dir="rtl"] .receipt-table td { text-align: right; }
.receipt[dir="rtl"] .receipt-table th:last-child, .receipt[dir="rtl"] .receipt-table td:last-child,
.receipt[dir="rtl"] .receipt-table th:nth-child(2), .receipt[dir="rtl"] .receipt-table td:nth-child(2) { text-align: left; }
.receipt[dir="rtl"] .receipt-line span:last-child { text-align: left; }
body.lang-rtl .menu-item-chevron { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
body.lang-rtl .app-menu-submenu .menu-item { padding-left: 18px; padding-right: 40px; }
body.lang-rtl .app-menu-lang { padding: 8px 40px 8px 18px; }
body.lang-rtl input, body.lang-rtl select, body.lang-rtl textarea { text-align: start; }
body.lang-rtl input[type="number"], body.lang-rtl input[type="tel"], body.lang-rtl input[type="email"] { direction: ltr; text-align: right; }

/* CJK / Arabic-script fallbacks so every language renders cleanly */
html[lang="zh-Hans"] body { font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
html[lang="zh-Hant"] body { font-family: 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
html[lang="ar"] body { font-family: 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, Arial, sans-serif; }
html[lang="ur"] body { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; line-height: 1.8; }
html[lang="ja"] body { font-family: 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif; }
html[lang="ko"] body { font-family: 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
html[lang="hi"] body { font-family: 'Segoe UI', 'Noto Sans Devanagari', 'Mangal', sans-serif; }


/* ===================== DigiWizr Dine theme =====================
   #094444 for the menu (slide-in drawer, desktop sidebar) and for buttons; #043332 for the title bar.
   Text, borders, the purple/cyan accents and the logo are the unchanged DigiWizr brand. */
.app-menu-drawer, body.desk-shell .desk-sidebar { background: #094444; }
.app-header { background: #043332; }
.app-menu-branch-switcher select { background: #063333; }
.btn, .hot-btn, .chip.selected, .month-btn.selected, .product-card.selected { background: #094444; border-color: #094444; color: var(--white); }
.btn.outline { background: var(--white); color: #094444; border-color: #094444; }
.lang-switcher select { background: #043332; }
.lang-switcher select:hover, .lang-switcher select:focus { background: var(--purple); border-color: var(--purple); }
.btn:hover, .hot-btn:hover { background: var(--purple); border-color: var(--purple); }
.btn.outline:hover { background: var(--purple); border-color: var(--purple); color: var(--white); }