/* ─── CSS VARIABLES ──────────────────────────────────────────────────────── */
:root {
  --primary: #c0392b;
  --primary-light: #e74c3c;
  --primary-dark: #96281b;
  --primary-bg: #fdf2f2;
  --sidebar-width: 220px;
  --sidebar-bg: #ffffff;
  --topbar-height: 60px;
  --bg: #f4f6fa;
  --card-bg: #ffffff;
  --text: #2d3748;
  --text-muted: #718096;
  --text-light: #a0aec0;
  --border: #e8ecf0;
  --shadow: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --radius: 10px;
  --green: #27ae60;
  --orange: #f39c12;
  --blue: #2980b9;
  --purple: #8e44ad;
  --font: 'Poppins', sans-serif;
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow-x: hidden;
  /* Matches the <meta name="color-scheme"> in base.html. */
  color-scheme: light;
}

/* ─── SIDEBAR ────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform 0.3s ease;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

.sidebar-header {
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 38px; height: 38px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.logo-img {
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ─── SIDEBAR NAV ────────────────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

.nav-item:hover {
  color: var(--primary);
  background: var(--primary-bg);
}

.nav-item.active {
  color: var(--primary);
  background: var(--primary-bg);
  border-left-color: var(--primary);
  font-weight: 600;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 16px;
}

/* ─── SIDEBAR FOOTER ─────────────────────────────────────────────────────── */
.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px; height: 34px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: capitalize;
}

/* ─── MAIN WRAPPER ───────────────────────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
}

/* ─── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  /* min-height, not height: the bar wraps whenever its contents stop fitting
     (see flex-wrap below), and a fixed height would push the wrapped row out
     of view instead of growing. With nothing to wrap it renders identically. */
  height: auto;
  min-height: var(--topbar-height);
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap at ANY width, not just on a phone. The action cluster is 562px on the
     till screens; beside a 220px sidebar that overflowed a 1024px tablet in
     landscape, and body{overflow-x:hidden} put the logout button out of reach.
     Wrapping only engages when there is genuinely no room. */
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 0 20px;
  z-index: 900;
  box-shadow: var(--shadow);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.sidebar-toggle:hover {
  background: var(--bg);
  color: var(--text);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  width: 320px;
  transition: all 0.2s;
}

.search-box:focus-within {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.08);
}

.search-box i {
  color: var(--text-muted);
  font-size: 13px;
}

.search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  font-family: var(--font);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-left { min-width: 0; }

.btn-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: all 0.2s;
}

.btn-pos {
  background: var(--primary);
  color: white;
}

.btn-pos:hover {
  background: var(--primary-dark);
  color: white;
}

.btn-logout {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-logout:hover {
  background: #fee;
  color: var(--primary);
  border-color: var(--primary-light);
}

.notification-bell {
  position: relative;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  transition: all 0.2s;
}

.notification-bell:hover {
  background: var(--bg);
  color: var(--primary);
}

.notification-bell .badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--primary);
  color: white;
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

/* ─── PAGE CONTENT ───────────────────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 24px;
}

.page-header {
  margin-bottom: 22px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.page-header p {
  font-size: 13px;
  color: var(--text-muted);
}

/* ─── STAT CARDS ─────────────────────────────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  background: white;
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.red { background: #fdecea; color: var(--primary); }
.stat-icon.green { background: #eafaf1; color: var(--green); }
.stat-icon.orange { background: #fef9ea; color: var(--orange); }
.stat-icon.blue { background: #eaf4fb; color: var(--blue); }
.stat-icon.purple { background: #f5eef8; color: var(--purple); }

.stat-info { flex: 1; }

.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* ─── CARDS ──────────────────────────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card-body {
  padding: 20px;
}

.view-all-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.view-all-link:hover { text-decoration: underline; }

/* ─── TABLES ─────────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:hover { background: #fafbfc; }
tbody tr:last-child td { border-bottom: none; }

/* ─── BADGES ─────────────────────────────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-paid { background: #eafaf1; color: #1e8449; }
.badge-unpaid { background: #fdecea; color: var(--primary); }
.badge-held { background: #fef9ea; color: #d4ac0d; }
.badge-cancelled { background: #f2f3f4; color: #636e72; }
.badge-active { background: #eafaf1; color: #1e8449; }
.badge-inactive { background: #f2f3f4; color: #636e72; }
.badge-low { background: #fdecea; color: var(--primary); }

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary-custom {
  background: var(--primary);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: background 0.2s;
  font-family: var(--font);
}

.btn-primary-custom:hover { background: var(--primary-dark); color: white; }

.btn-secondary-custom {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font);
}

.btn-secondary-custom:hover {
  background: var(--bg);
  color: var(--text);
}

.btn-sm-custom {
  padding: 5px 12px;
  font-size: 12px;
}

.btn-danger-custom {
  background: #fdecea;
  color: var(--primary);
  border: 1px solid #f5b7b1;
}

.btn-danger-custom:hover {
  background: var(--primary);
  color: white;
}

/* ─── FORMS ──────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.form-control-custom {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: white;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-custom:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.08);
}

/* ─── POS LAYOUT ─────────────────────────────────────────────────────────── */
.pos-layout {
  display: grid;
  /* The cart is the working column — item names, quantity, discount, total and
     the remove button all have to sit on one line — so it takes the extra
     width. The products grid gives it up; the payment panel is already tight. */
  grid-template-columns: 1fr 500px 280px;
  gap: 16px;
  height: calc(100vh - var(--topbar-height) - 48px);
}

.pos-layout > * {
  /* Also min-width:0. A grid item's automatic minimum is its content's
     min-content width, so the search + barcode row (312px) forced the whole
     column wider than the phone viewport and the till overflowed sideways. */
  min-width: 0;
  /* A flex/grid item defaults to min-height:auto, which refuses to shrink below
     its content — so .products-grid and .cart-items never actually scrolled,
     the columns grew to full content height, and the whole page overflowed past
     the footer instead. Every scrollable panel below needs this. */
  min-height: 0;
}

.pos-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.pos-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.pos-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: white;
  color: var(--text-muted);
  transition: all 0.2s;
}

.category-tab.active, .category-tab:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  gap: 10px;
  overflow-y: auto;
  padding: 4px 2px;
}

.product-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  position: relative;
}

.product-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(192,57,43,0.12);
  transform: translateY(-2px);
}

.product-card .product-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.product-card .product-stock {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.product-card.out-of-stock {
  opacity: 0.5;
  cursor: not-allowed;
}

.cart-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Heading row and item rows share one grid template — defined once so a
   column added to the row cannot slip out of line with its heading. */
.cart-cols,
.cart-item {
  display: grid;
  grid-template-columns: 1fr 92px 112px 76px 16px;
  align-items: center;
  gap: 8px;
}

.cart-cols {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cart-cols span:nth-child(2),
.cart-cols span:nth-child(3) { text-align: center; }
.cart-cols span:nth-child(4) { text-align: right; }

.cart-item {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 6px;
  transition: all 0.2s;
}

.cart-item:hover { background: var(--bg); }

.cart-item-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.cart-item-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  text-align: right;
}

.qty-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.qty-btn {
  width: 22px; height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.2s;
}

.qty-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.qty-input {
  width: 30px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px;
}

.cart-remove {
  color: var(--text-light);
  cursor: pointer;
  font-size: 13px;
  transition: color 0.2s;
  padding: 2px;
}

.cart-remove:hover { color: var(--primary); }

.cart-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}

.cart-total-row.total {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.payment-panel {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.payment-btn {
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  transition: all 0.2s;
  font-family: var(--font);
}

.payment-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pos-action-btns {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-complete {
  background: var(--green);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-family: var(--font);
  transition: background 0.2s;
}

.btn-complete:hover { background: #1e8449; }

.btn-hold {
  background: var(--orange);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  font-family: var(--font);
  transition: background 0.2s;
}

.btn-hold:hover { background: #d68910; }

/* ─── DASHBOARD GRID ─────────────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  margin-top: 0;
}

/* ─── QUICK ACTIONS ──────────────────────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.quick-action {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s;
}

.quick-action i {
  font-size: 20px;
  color: var(--primary);
}

.quick-action:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ─── PAGE FOOTER ────────────────────────────────────────────────────────── */
.page-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  background: white;
}

/* ─── MESSAGES ───────────────────────────────────────────────────────────── */
.messages-container {
  margin-bottom: 16px;
}

.alert-success { background: #eafaf1; border-color: #a9dfbf; color: #1e8449; }
.alert-error, .alert-danger { background: #fdecea; border-color: #f5b7b1; color: var(--primary); }
.alert-warning { background: #fef9ea; border-color: #f9e79f; color: #b7950b; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* ── Narrow desktop ───────────────────────────────────────────────────────
   Keep the three-column till as long as it can possibly fit. Windows display
   scaling at 125-150% makes a 1366 or 1920 monitor report a CSS viewport well
   under 1024, so a breakpoint there drops a perfectly ordinary desktop till
   into a stacked tablet layout. The columns tighten instead. */
@media (max-width: 1280px) {
  .pos-layout { grid-template-columns: 1fr 430px 250px; gap: 12px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 1024px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .pos-layout { grid-template-columns: 1fr 360px 220px; gap: 10px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}

/* ── Tablet ───────────────────────────────────────────────────────────────
   Only now is there genuinely no room for three columns: products and cart sit
   side by side and the customer/payment panel takes a full-width row beneath.
   It must NEVER be display:none — it is the only way to finish a sale, and
   hiding it made the till unusable on anything smaller than a laptop. */
@media (max-width: 900px) {
  .pos-layout {
    grid-template-columns: 1fr 300px;
    height: auto;
    min-height: calc(100vh - var(--topbar-height) - 48px);
  }
  .pos-right { grid-column: 1 / -1; }
}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); width: min(82vw, 300px); }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }

  /* Backdrop, so tapping beside the drawer closes it instead of hitting the
     page underneath. */
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(20,16,14,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dashboard-grid { grid-template-columns: 1fr; }

  /* Topbar: the quick-nav box is 280px of fixed width and pushes everything
     off-screen, so it collapses to the sidebar toggle plus the action icons. */
  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 10px;
    gap: 8px;
  }
  #awesomeBarWrap { display: none; }
  .sidebar-toggle { flex-shrink: 0; }
  .topbar h1, .topbar-left h1 { font-size: 15px; }

  .page-content { padding: 12px; }
  .page-header h1 { font-size: 20px; }
  .page-header p { font-size: 12.5px; }
  .page-header { flex-wrap: wrap; gap: 10px; }

  /* Wide tables scroll inside themselves rather than stretching the page. */
  /* Wide tables scroll inside their own card rather than widening the page.
     Scoped to .page-content so nothing outside the main column is affected. */
  .page-content table { min-width: 560px; }
  .page-content .card, .page-content .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .search-box { width: 100%; }
  /* .filter-bar is display:flex, so the form is a flex item and sized to its
     widest child — about 151px. Stretching the controls inside it just filled
     that 151px, leaving the filter row looking half-built. The form has to
     claim the row first. */
  .filter-bar { flex-wrap: wrap; }
  .filter-bar > * { flex: 1 1 100%; min-width: 0; }
  .filter-bar form { flex-direction: column; align-items: stretch; width: 100%; }
  .filter-bar .form-control-custom,
  .filter-bar input, .filter-bar select { width: 100% !important; }
  .filter-bar .btn-primary-custom, .filter-bar .btn-secondary-custom { justify-content: center; }

  /* Full-height sheets read better than centred boxes on a phone. */
  .pos-modal { max-height: 92vh; width: 100%; border-radius: 16px 16px 0 0; }
  .pos-modal-overlay { align-items: flex-end; padding: 0; }
  .pos-modal-body { padding: 16px; }
  .pos-modal-footer { padding: 12px 16px; }

  /* ── POS: three panels become three tabs ────────────────────────────────
     Stacking them would mean scrolling past the whole product grid to reach
     the total. Tabs keep every step one tap away. The tab bar is injected by
     main.js only when this breakpoint is active. */
  .pos-layout {
    grid-template-columns: 1fr;
    height: auto;
    padding-bottom: 62px;   /* clears the fixed tab bar */
  }
  /* Written as "hide the two that are not active" rather than "hide all, show
     one". If the tab bar never gets injected — JS blocked, an error earlier in
     main.js — no tab class is set, nothing matches, and all three panels simply
     stack. A broken script degrades to a scrollable till, never a blank one. */
  .pos-layout.tab-products > .pos-center,
  .pos-layout.tab-products > .pos-right,
  .pos-layout.tab-cart     > .pos-left,
  .pos-layout.tab-cart     > .pos-right,
  .pos-layout.tab-pay      > .pos-left,
  .pos-layout.tab-pay      > .pos-center { display: none; }

  .pos-left, .pos-center, .pos-right {
    min-height: calc(100vh - var(--topbar-height) - 130px);
    overflow: visible;          /* stacked: let the page scroll, not the panel */
  }
  .products-grid { overflow: visible; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }

  .pos-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .pos-tabbar button {
    flex: 1; border: 0; background: none; cursor: pointer;
    padding: 9px 4px 8px; font-family: var(--font); font-size: 10.5px;
    color: var(--text-muted); display: flex; flex-direction: column;
    align-items: center; gap: 3px; position: relative;
  }
  .pos-tabbar button i { font-size: 17px; }
  .pos-tabbar button.active { color: var(--primary); }
  .pos-tabbar button.active::before {
    content: ''; position: absolute; top: 0; left: 22%; right: 22%;
    height: 2.5px; background: var(--primary); border-radius: 0 0 3px 3px;
  }
  .pos-tabbar .tab-badge {
    position: absolute; top: 5px; right: 50%; margin-right: -20px;
    background: var(--primary); color: #fff; border-radius: 10px;
    min-width: 16px; height: 16px; font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
  }
}

/* ── Small phone ──────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .stat-cards { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 18px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Notched phones: the Android shell draws behind the status/nav bars. */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 768px) {
    /* height must become auto FIRST — .topbar sets a fixed 60px, and adding the
       status-bar inset as padding to a fixed-height box pushes its own contents
       out of view rather than moving the box down. */
    .topbar {
      height: auto;
      min-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
      padding-top: env(safe-area-inset-top, 0px);
    }
    .main-wrapper { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .pos-tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  }
}

/* ─── LOGIN PAGE ─────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf2f2 0%, #f4f6fa 100%);
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo .logo-circle {
  width: 64px; height: 64px;
  background: var(--primary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 28px;
  color: white;
}

.login-logo h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.login-logo p {
  font-size: 13px;
  color: var(--text-muted);
}

/* ─── MISC ───────────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.fw-600 { font-weight: 600; }
.gap-2 { gap: 8px; }

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.4;
}

.empty-state p {
  font-size: 14px;
}

/* Barcode tag */
.barcode-tag {
  width: 150px;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  font-family: var(--font);
  display: inline-block;
  margin: 6px;
}

.barcode-tag .tag-boutique {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
}

.barcode-tag .tag-product {
  font-size: 11px;
  font-weight: 600;
  margin: 4px 0;
}

.barcode-tag .tag-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.barcode-tag .tag-barcode-num {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* Scrollable content */
.scroll-content {
  overflow-y: auto;
  max-height: calc(100vh - 300px);
}

/* Tab navigation */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  font-family: var(--font);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── PAYMENT MODAL ─────────────────────────────────────────────────────── */
.pos-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.pos-modal-overlay.open { display: flex; }

.pos-modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  animation: modalIn 0.25s ease;
}

@keyframes modalIn {
  from { opacity:0; transform: scale(0.94) translateY(16px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  25%      { transform:translateX(-8px); }
  75%      { transform:translateX(8px); }
}

.pos-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pos-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.2s;
}
.modal-close-btn:hover { background: var(--bg); color: var(--text); }

.pos-modal-body { padding: 20px 24px; }
.pos-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

/* Payment tabs inside modal */
.modal-pay-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.modal-pay-tab {
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  transition: all 0.2s;
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.modal-pay-tab i { font-size: 18px; }
.modal-pay-tab.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}
.modal-pay-tab:hover:not(.active) { border-color: var(--primary-light); }

/* Total display in modal */
.modal-total-display {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-total-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.modal-total-value { font-size: 24px; font-weight: 800; color: var(--text); }

/* Amount input in modal */
.modal-amount-group {
  margin-bottom: 14px;
}
.modal-amount-input-wrap {
  position: relative;
}
.modal-currency-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
#modalAmountInput {
  width: 100%;
  padding: 14px 14px 14px 52px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  outline: none;
  font-family: var(--font);
  color: var(--text);
  transition: border-color 0.2s;
}
#modalAmountInput:focus { border-color: var(--primary-light); }

/* Split payment amount inputs — need room for the currency prefix */
.split-input {
  width: 100%;
  padding: 9px 12px 9px 46px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  outline: none;
  font-family: var(--font);
  color: var(--text);
}
.split-input:focus { border-color: var(--primary-light); }
.modal-amount-input-wrap .modal-currency-prefix { font-size: 12px; }

/* Quick cash buttons */
.quick-cash-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 14px;
}
.quick-cash-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font);
  transition: all 0.2s;
}
.quick-cash-btn.selected, .quick-cash-btn:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}
.quick-cash-btn.exact { border-style: dashed; }

/* Change row */
.modal-change-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
  transition: background 0.3s;
}

/* Confirm button */
.btn-confirm-sale {
  flex: 1;
  background: var(--green);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.btn-confirm-sale:hover:not(:disabled) { background: #1e8449; }
.btn-confirm-sale:disabled { opacity: 0.7; cursor: not-allowed; }

/* ─── SUCCESS MODAL ──────────────────────────────────────────────────────── */
.success-modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  text-align: center;
  animation: modalIn 0.25s ease;
  overflow: hidden;
}

.success-header {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  padding: 28px 24px 20px;
  color: white;
}
.success-checkmark {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 28px;
}
.success-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.success-invoice { font-size: 13px; opacity: 0.85; font-weight: 500; }

.success-body { padding: 20px 24px; }

.success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.success-row:last-child { border-bottom: none; }
.success-row span:first-child { color: var(--text-muted); }
.success-row span:last-child { font-weight: 600; }

.change-highlight {
  background: #eafaf1;
  border-radius: 10px;
  padding: 14px;
  margin: 14px 0;
  text-align: center;
}
.change-highlight .change-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.change-highlight .change-big {
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
}

.success-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  /* The action count varies — WhatsApp only appears when it is switched on.
     Without wrapping, the buttons were flex:1 (basis 0) and simply shrank until
     the last one, New Sale, was clipped off by the modal's overflow:hidden. */
  flex-wrap: wrap;
  gap: 10px;
}

/* Sized so three still sit on one row exactly as before; a fourth pushes the
   last action onto its own full-width row rather than squeezing all four. */
.success-footer > * {
  flex: 1 1 auto;
  min-width: 100px;
  justify-content: center;
}

/* ─── SIZE / COLOR MODAL ────────────────────────────────────────────────── */
#sizeColorModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
#sizeColorModal.open { display: flex; }

.sc-modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  animation: modalIn 0.22s ease;
  overflow: hidden;
}

.sc-modal-header {
  background: linear-gradient(135deg, var(--primary-bg), white);
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.sc-modal-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.sc-product-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
}

.sc-modal-body { padding: 18px 22px; }

.sc-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sc-option-btn {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sc-option-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary);
}

.sc-option-btn.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.sc-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
  flex-shrink: 0;
}

.sc-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

/* Per-line discount box in the cart row. Sits with the quantity controls
   because it is the same kind of edit — something about this line, not the
   sale as a whole. */
/* Two views of the same discount: a percentage and an amount. Whichever is
   typed fills the other, so they sit together as one control. */
.line-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
}
.line-disc input {
  width: 48px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: right;
  outline: none;
  font-family: var(--font);
  background: #fff;
  color: var(--text);
}
.line-disc input:focus { border-color: var(--primary); }

/* ─── FULLSCREEN / PWA MODE ─────────────────────────────────────────────── */
/* The sidebar becomes the same off-canvas drawer a phone gets, rather than
   disappearing. It used to be display:none, which ALSO killed the hamburger in
   the topbar — that toggles .open, and display:none beat it — so a till left in
   fullscreen had no way to reach the back office or Settings at all. The state
   is remembered in localStorage (boutique_fs), so it survived reloads and
   followed the machine, which is why it looked like the sidebar was simply gone
   on "some systems". */
body.app-fullscreen .sidebar {
  transform: translateX(-100%);
  width: min(82vw, 300px);
}
body.app-fullscreen .sidebar.open { transform: translateX(0); }

/* Backdrop so clicking beside the drawer closes it. Scoped to fullscreen (and
   the phone breakpoint below) rather than global: on a normal desktop the
   sidebar is pinned and there is nothing to dim. */
body.app-fullscreen .sidebar-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(20,16,14,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
body.app-fullscreen .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

body.app-fullscreen .main-wrapper { margin-left: 0 !important; }
body.app-fullscreen .topbar { left: 0 !important; }
body.app-fullscreen .page-content { padding-top: 76px; }

/* ─── NAV GROUP (collapsible submenu) ──────────────────────────────────── */
.nav-group { margin: 0; }

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 8px;
  margin: 1px 8px;
  user-select: none;
}

.nav-group-header:hover,
.nav-group-header.active {
  background: var(--primary-bg);
  color: var(--primary);
}

.nav-group-header.active {
  color: var(--primary);
}

.nav-arrow {
  font-size: 10px;
  transition: transform 0.25s ease;
  opacity: 0.6;
}

.nav-group-header.open .nav-arrow {
  transform: rotate(180deg);
}

.nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.nav-group-items.open {
  max-height: 200px;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 36px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  border-radius: 8px;
  margin: 1px 8px;
}

.nav-sub-item:hover {
  background: var(--primary-bg);
  color: var(--primary);
}

.nav-sub-item.active {
  background: var(--primary-bg);
  color: var(--primary);
}

.nav-sub-item i {
  width: 16px;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
}

/* ─── RESPONSIVE GRID UTILITIES ───────────────────────────────────────────
   Pages used to write their column counts into inline style attributes. An
   inline declaration outranks every stylesheet rule, media query or not, so
   those layouts could never be undone on a phone: a fixed 300px side column
   pushed the page sideways, and four equal columns on a 320px screen left
   each cell ~62px wide — narrower than a single currency amount, which then
   wrapped one digit per line. These carry the same layouts with breakpoints
   attached. Gap and max-width may still be set inline; only the column count
   has to be overridable. */
.grid-main-side { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
.grid-side-main { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }

/* Grid items default to min-width:auto, which lets a long unbroken value push
   its track wider than its share and overflow the row. */
.grid-main-side > *, .grid-side-main > *,
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  /* A fixed side column beside a fluid one stops fitting here; the side panel
     becomes a full-width row instead of forcing a horizontal scroll. */
  .grid-main-side, .grid-side-main { grid-template-columns: minmax(0,1fr); }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); gap: 12px; }
}

/* ─── POS CART ROW ON A PHONE ─────────────────────────────────────────────
   The five-column row needs 296px of fixed tracks plus 32px of gaps before
   the item name gets anything at all, so in the ~300px cart panel a phone
   gets it overflowed and the name column collapsed to nothing. The same five
   cells become two rows: the name across the top with the remove button, then
   quantity, line discount and line total beneath it. */
@media (max-width: 600px) {
  /* Column headings describe a single-row layout that no longer applies. */
  .cart-cols { display: none !important; }

  .cart-item {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas:
      "name name remove"
      "qty  disc price";
    gap: 8px;
    padding: 10px 8px;
  }
  .cart-item-name  { grid-area: name; }
  .cart-remove     { grid-area: remove; justify-self: end; }
  .qty-controls    { grid-area: qty;   justify-content: flex-start; }
  .line-disc       { grid-area: disc;  justify-content: flex-start; }
  .cart-item-price { grid-area: price; align-self: center; }
}

/* ─── SHRINKABLE TABLE CONTAINERS ─────────────────────────────────────────
   A grid or flex item defaults to min-width:auto, which refuses to shrink
   below its content's min-content width. The phone rule above gives tables
   min-width:560px, and that 560px propagated up through .table-wrapper, its
   card and its column, widening the whole page: on the dashboard both cards
   in the left column rendered 560px wide and the right column was pushed off
   screen entirely. body{overflow-x:hidden} then clipped the overspill rather
   than letting it scroll, so the cut-off content could not be reached at all.

   Letting these boxes shrink to their share puts the scrollbar back where it
   belongs — on .table-wrapper, which already has overflow-x:auto. The one wide
   table scrolls inside its own card and every other section stays put. */
.dashboard-grid > *,
.dashboard-grid > * > *,
.page-content .card,
.page-content .table-wrapper { min-width: 0; }

/* Revenue chart: an explicit box, so the canvas fills it instead of deriving a
   3:1 height from its width and flattening as the column narrows. */
.dash-chart-wrap { position: relative; height: 260px; }
@media (max-width: 600px) { .dash-chart-wrap { height: 210px; } }

/* Same shrink rule for the page-level two-column wrappers. Their grid items are
   plain divs rather than cards, so the rule above does not reach them, and a
   wide table inside one would widen the page instead of scrolling in place. */
.er-layout > *, .sr-two > *, .cd-two > *,
.rp-grid > *, .rp-wrap > *, .so-grid > *,
.tf-cols > *, .kb-app-grid > * { min-width: 0; }

/* ─── TOPBAR ACTIONS ON A PHONE ───────────────────────────────────────────
   .topbar wraps, but .topbar-right did not, so its six actions sat on one
   417px row on a 320px screen. body{overflow-x:hidden} then clipped the
   logout button and part of the mode switcher off the right edge on every
   page in the app, with no way to scroll to them. */
@media (max-width: 768px) {
  .topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    gap: 8px;
    min-width: 0;
  }
  .topbar-left { min-width: 0; }
  /* The mode switcher is the widest pair; let its labels shrink rather than
     force a row of its own. */
  .topbar-right .btn-topbar { flex-shrink: 1; min-width: 0; }
}

/* Four tiles across a 320px screen give each ~66px, narrower than labels like
   "New Purchase", so the row overflowed the page by ~15px. Two across fits. */
@media (max-width: 600px) {
  .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .quick-action { padding: 12px 8px; min-width: 0; }
}

/* ─── PHONE OVERFLOW FIXES ────────────────────────────────────────────────
   Each of these was measured overflowing a 320px viewport; body's
   overflow-x:hidden then clipped the overspill out of reach. */
@media (max-width: 768px) {
  /* Settings and Inventory tab strips: many fixed-width tabs on one nowrap
     row. Tabs are navigation, so the strip scrolls sideways rather than
     wrapping into a tall stack that pushes the panel off the first screen. */
  .tab-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; padding: 10px 14px; }

  /* Action clusters in a page header: the header itself wraps but the inner
     button row did not, so it ran off the right edge. */
  .page-header > div { min-width: 0; }
  .page-header > div[style*="display:flex"] { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  /* Filter/search rows: input plus submit on one nowrap line. */
  .page-content form[style*="display:flex"] { flex-wrap: wrap; }
  .page-content form[style*="display:flex"] > .form-control-custom { flex: 1 1 100%; width: 100% !important; }
}

@media (max-width: 420px) {
  /* .stat-cards collapses to a single column here, but a tile carrying
     grid-column:span 2 then asks for a second column that does not exist —
     the grid grew an implicit track and overflowed. */
  .stat-cards > .stat-card[style*="span 2"] { grid-column: auto !important; }
}

@media (max-width: 768px) {
  /* Search + barcode + camera on one nowrap row needs 312px; let it wrap and
     let each field shrink instead of widening the till. */
  .pos-left > div[style*="display:flex"] { flex-wrap: wrap; }
  .pos-left .search-box { width: auto !important; flex: 1 1 130px; min-width: 0; }
}

/* ─── TEXT-ONLY STAT CARDS ────────────────────────────────────────────────
   .stat-card is a flex ROW, built for [.stat-icon][.stat-info] as used on the
   dashboard and the expense list. The report pages put the label, the value
   and the sub-line directly inside instead, so those three sat side by side
   and the amount got a third of the card — which is what squeezed a currency
   value into a one-character-per-line column. These stack. */
.rs-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr)); gap: 14px; }

.pl-cards > .stat-card,
.sr-cards > .stat-card,
.cd-stats > .stat-card,
.rs-stats > .stat-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}

/* ─── ALWAYS-ON TABLE SCROLL ──────────────────────────────────────────────
   .table-wrapper scrolls at every width, but several pages put a table
   straight into a .card or .card-body instead. Those relied on the phone-only
   rule `.page-content .card { overflow-x: auto }`, so between 769px and about
   1000px — a tablet in landscape, where the sidebar is showing but the content
   column is still narrow — nothing scrolled them and the page overflowed.
   Same behaviour as .table-wrapper, applied where the markup has no wrapper. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}