/* Pixmart POS-style sidebar repair v7
   Controlled fix: keep every page layout intact, reserve only collapsed sidebar width,
   and let the open menu overlay the page without pushing or hiding content. */
:root {
  --pix-sidebar-closed: 86px;
  --pix-sidebar-open: 252px;
  --pix-sidebar-mobile: 68px;
  --pix-purple: #4318ff;
  --pix-purple-2: #681dff;
  --pix-navy: #050642;
  --pix-navy-deep: #010421;
  --pix-line: #e8ebf4;
  --pix-text: #09114a;
  --pix-soft: #5c689a;
}

html, body { overflow-x: hidden; }

/* Stable page grid: content always starts after the collapsed POS-style rail. */
.inventory-app,
.history-app,
.payments-app,
.reports-app,
.expenses-app,
.returns-app,
.ai-app,
.settings-app,
body.sidebar-collapsed .inventory-app,
body.sidebar-collapsed .history-app,
body.sidebar-collapsed .payments-app,
body.sidebar-collapsed .reports-app,
body.sidebar-collapsed .expenses-app,
body.sidebar-collapsed .returns-app,
body.sidebar-collapsed .ai-app,
body.sidebar-collapsed .settings-app,
body:not(.sidebar-collapsed) .inventory-app,
body:not(.sidebar-collapsed) .history-app,
body:not(.sidebar-collapsed) .payments-app,
body:not(.sidebar-collapsed) .reports-app,
body:not(.sidebar-collapsed) .expenses-app,
body:not(.sidebar-collapsed) .returns-app,
body:not(.sidebar-collapsed) .ai-app,
body:not(.sidebar-collapsed) .settings-app {
  display: grid !important;
  grid-template-columns: var(--pix-sidebar-closed) minmax(0, 1fr) !important;
  min-height: 100svh !important;
}

.inventory-sidebar,
.history-sidebar,
.payments-sidebar,
.reports-sidebar,
.expenses-sidebar,
.returns-sidebar,
.ai-sidebar,
.settings-sidebar {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  z-index: 120 !important;
  width: var(--pix-sidebar-closed) !important;
  height: 100svh !important;
  min-height: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background:
    radial-gradient(circle at 42px 38px, rgba(112, 38, 255, .40), transparent 76px),
    linear-gradient(180deg, var(--pix-navy) 0%, #03083d 48%, var(--pix-navy-deep) 100%) !important;
  box-shadow: 18px 0 44px rgba(4, 11, 51, .12) !important;
  transition: width .22s ease, box-shadow .22s ease, padding .22s ease !important;
}

.inventory-sidebar::-webkit-scrollbar,
.history-sidebar::-webkit-scrollbar,
.payments-sidebar::-webkit-scrollbar,
.reports-sidebar::-webkit-scrollbar,
.expenses-sidebar::-webkit-scrollbar,
.returns-sidebar::-webkit-scrollbar,
.ai-sidebar::-webkit-scrollbar,
.settings-sidebar::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body:not(.sidebar-collapsed) .inventory-sidebar,
body:not(.sidebar-collapsed) .history-sidebar,
body:not(.sidebar-collapsed) .payments-sidebar,
body:not(.sidebar-collapsed) .reports-sidebar,
body:not(.sidebar-collapsed) .expenses-sidebar,
body:not(.sidebar-collapsed) .returns-sidebar,
body:not(.sidebar-collapsed) .ai-sidebar,
body:not(.sidebar-collapsed) .settings-sidebar {
  width: var(--pix-sidebar-open) !important;
  box-shadow: 30px 0 70px rgba(3, 8, 47, .30) !important;
}

.sidebar-top,
.sidebar-bottom {
  min-width: 0 !important;
}

.sidebar-brand-row {
  position: relative !important;
  min-height: 64px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.sidebar-brand {
  min-width: 0 !important;
  height: 64px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-radius: 18px !important;
}

.sidebar-brand-icon {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2e00ff 0%, #761dff 100%) !important;
  box-shadow: 0 18px 28px rgba(67, 14, 255, .34) !important;
  transform-origin: center !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
  animation: pixCartIdle 5.4s ease-in-out infinite;
}

.sidebar-brand-icon:hover {
  transform: translateY(-1px) rotate(-3deg) scale(1.03) !important;
  box-shadow: 0 18px 34px rgba(74, 23, 255, .46) !important;
}

.sidebar-brand-icon svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.35 !important;
  vector-effect: non-scaling-stroke;
}

@keyframes pixCartIdle {
  0%, 72%, 100% { transform: translateY(0) rotate(0deg); }
  78% { transform: translateY(-1px) rotate(-4deg); }
  84% { transform: translateY(0) rotate(4deg); }
  90% { transform: translateY(-1px) rotate(-2deg); }
}

.brand-copy strong {
  display: block !important;
  color: #fff !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.04em !important;
}

.brand-copy small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

.sidebar-toggle {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #07114a !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(228,232,245,.95) !important;
  box-shadow: 0 10px 26px rgba(1, 7, 42, .24) !important;
  transition: opacity .18s ease, transform .2s ease, background .2s ease, color .2s ease !important;
}

.sidebar-toggle svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.45 !important;
  transition: transform .22s ease !important;
  vector-effect: non-scaling-stroke;
}

/* Hidden by default. It appears only when hovering the top cart/logo area. */
body.sidebar-collapsed .sidebar-toggle {
  position: absolute !important;
  top: 14px !important;
  left: 50px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-6px) scale(.86) !important;
}

body.sidebar-collapsed .sidebar-brand-row:hover .sidebar-toggle,
body.sidebar-collapsed .sidebar-toggle:focus-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) scale(1) !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle svg {
  transform: rotate(180deg) !important;
}

.sidebar-toggle:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pix-purple), var(--pix-purple-2)) !important;
}

.inventory-nav,
.history-nav,
.payments-nav,
.reports-nav,
.expenses-nav,
.returns-nav,
.ai-nav,
.settings-nav {
  min-height: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: hidden !important;
}

.nav-item,
.logout-link {
  height: 43px !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 15px !important;
  color: rgba(255,255,255,.88) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.nav-item:hover,
.logout-link:hover {
  transform: translateX(2px) !important;
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

.nav-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, #3500ee 0%, #5e1cff 100%) !important;
  box-shadow: 0 14px 26px rgba(67, 14, 255, .26) !important;
}

.nav-icon,
.logout-link .nav-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.96) !important;
  background: rgba(255,255,255,.08) !important;
}

.nav-icon svg,
.logout-link .nav-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.15 !important;
  vector-effect: non-scaling-stroke;
}

.nav-item.active .nav-icon {
  background: rgba(255,255,255,.16) !important;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .assist-copy,
body.sidebar-collapsed .assist-bottom-row button,
body.sidebar-collapsed .sidebar-mini-card div,
body.sidebar-collapsed .logout-link .nav-text {
  display: none !important;
}

body.sidebar-collapsed .sidebar-brand {
  justify-content: center !important;
}

body.sidebar-collapsed .sidebar-brand-row {
  justify-content: center !important;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .logout-link {
  width: 62px !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 15px !important;
}

body.sidebar-collapsed .nav-item[href="./index.html"] {
  display: none !important;
}

body.sidebar-collapsed .nav-icon,
body.sidebar-collapsed .logout-link .nav-icon {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

body.sidebar-collapsed .nav-item.active .nav-icon {
  background: rgba(255,255,255,.12) !important;
}

.assist-card,
.sidebar-mini-card {
  display: none !important;
}

.sidebar-bottom {
  flex: 0 0 auto !important;
  padding-top: 8px !important;
}

.logout-link {
  margin-top: 0 !important;
}

/* Page content protection: do not hide, shift, or blank the modules. */
.inventory-main,
.history-main,
.payments-main,
.reports-main,
.expenses-main,
.returns-main,
.ai-main,
.settings-main {
  min-width: 0 !important;
  width: 100% !important;
  padding: clamp(14px, 1.45vw, 22px) clamp(14px, 1.55vw, 24px) 18px !important;
}

.page-head,
.settings-head,
.ai-head {
  margin-bottom: 14px !important;
}

.table-shell,
.table-wrap,
.log-table,
.payments-table-wrap,
.inventory-panel,
.table-panel,
.returns-panel,
.expenses-panel,
.reports-panel {
  max-width: 100% !important;
}

.table-shell,
.table-wrap,
.log-table,
.payments-table-wrap {
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
}

/* Keep metric cards on one clean row on laptop/desktop. Long KES values shrink instead of wrapping into a second row. */
@media (min-width: 900px) {
  .stats-grid,
  .summary-grid,
  .payments-summary-grid,
  .settings-overview {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: clamp(10px, 1.1vw, 16px) !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }

  .stats-grid::-webkit-scrollbar,
  .summary-grid::-webkit-scrollbar,
  .payments-summary-grid::-webkit-scrollbar,
  .settings-overview::-webkit-scrollbar {
    display: none !important;
  }

  .stat-card,
  .summary-card,
  .overview-card,
  .payments-summary-grid .summary-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .stat-card h2,
  .summary-card h2,
  .overview-card strong,
  .payments-summary-grid .summary-card h2 {
    max-width: 100% !important;
    font-size: clamp(14px, 1.45vw, 22px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stat-label,
  .card-label,
  .overview-card span,
  .stat-card p,
  .summary-card p,
  .overview-card p,
  .mini-count {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 760px) {
  :root { --pix-sidebar-closed: var(--pix-sidebar-mobile); }

  .inventory-app,
  .history-app,
  .payments-app,
  .reports-app,
  .expenses-app,
  .returns-app,
  .ai-app,
  .settings-app {
    grid-template-columns: var(--pix-sidebar-mobile) minmax(0, 1fr) !important;
  }

  .inventory-sidebar,
  .history-sidebar,
  .payments-sidebar,
  .reports-sidebar,
  .expenses-sidebar,
  .returns-sidebar,
  .ai-sidebar,
  .settings-sidebar {
    width: var(--pix-sidebar-mobile) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body:not(.sidebar-collapsed) .inventory-sidebar,
  body:not(.sidebar-collapsed) .history-sidebar,
  body:not(.sidebar-collapsed) .payments-sidebar,
  body:not(.sidebar-collapsed) .reports-sidebar,
  body:not(.sidebar-collapsed) .expenses-sidebar,
  body:not(.sidebar-collapsed) .returns-sidebar,
  body:not(.sidebar-collapsed) .ai-sidebar,
  body:not(.sidebar-collapsed) .settings-sidebar {
    width: min(var(--pix-sidebar-open), calc(100vw - 10px)) !important;
  }

  .sidebar-brand-icon,
  body.sidebar-collapsed .sidebar-brand-icon {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .sidebar-brand-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  body.sidebar-collapsed .sidebar-toggle {
    left: 42px !important;
    top: 10px !important;
  }

  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .logout-link {
    width: 52px !important;
  }

  .inventory-main,
  .history-main,
  .payments-main,
  .reports-main,
  .expenses-main,
  .returns-main,
  .ai-main,
  .settings-main {
    padding: 12px 10px 14px !important;
  }

  .stats-grid,
  .summary-grid,
  .payments-summary-grid,
  .settings-overview {
    overflow-x: auto !important;
  }

  .stat-card,
  .summary-card,
  .overview-card,
  .payments-summary-grid .summary-card {
    flex: 0 0 min(235px, 74vw) !important;
  }
}

/* ===== Pixmart POS Sidebar Unification v8 =====
   Same collapsed POS rail style on every page, full menu opens as an overlay.
   The page grid remains fixed to the collapsed rail width so content is never pushed or broken. */
:root {
  --pix-sidebar-closed: 86px;
  --pix-sidebar-open: 254px;
}

.inventory-app,
.history-app,
.payments-app,
.reports-app,
.expenses-app,
.returns-app,
.ai-app,
.settings-app {
  grid-template-columns: var(--pix-sidebar-closed) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.inventory-sidebar,
.history-sidebar,
.payments-sidebar,
.reports-sidebar,
.expenses-sidebar,
.returns-sidebar,
.ai-sidebar,
.settings-sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 220 !important;
  width: var(--pix-sidebar-closed) !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  padding: 12px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background:
    radial-gradient(circle at 43px 37px, rgba(112, 38, 255, .38), transparent 76px),
    linear-gradient(180deg, #050642 0%, #03083d 50%, #010421 100%) !important;
  box-shadow: 18px 0 44px rgba(4, 11, 51, .12) !important;
  transition: width .24s ease, box-shadow .24s ease !important;
}

.inventory-sidebar::-webkit-scrollbar,
.history-sidebar::-webkit-scrollbar,
.payments-sidebar::-webkit-scrollbar,
.reports-sidebar::-webkit-scrollbar,
.expenses-sidebar::-webkit-scrollbar,
.returns-sidebar::-webkit-scrollbar,
.ai-sidebar::-webkit-scrollbar,
.settings-sidebar::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body:not(.sidebar-collapsed) .inventory-sidebar,
body:not(.sidebar-collapsed) .history-sidebar,
body:not(.sidebar-collapsed) .payments-sidebar,
body:not(.sidebar-collapsed) .reports-sidebar,
body:not(.sidebar-collapsed) .expenses-sidebar,
body:not(.sidebar-collapsed) .returns-sidebar,
body:not(.sidebar-collapsed) .ai-sidebar,
body:not(.sidebar-collapsed) .settings-sidebar {
  width: var(--pix-sidebar-open) !important;
  box-shadow: 30px 0 70px rgba(3, 8, 47, .30) !important;
}

.sidebar-brand-row {
  min-height: 64px !important;
  margin-bottom: 6px !important;
}

.sidebar-brand {
  cursor: pointer !important;
  text-decoration: none !important;
}

.sidebar-brand-icon {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  border-radius: 14px !important;
}

.sidebar-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  cursor: pointer !important;
}

body.sidebar-collapsed .sidebar-toggle {
  display: none !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle {
  display: grid !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle svg {
  transform: none !important;
}

.inventory-nav,
.history-nav,
.payments-nav,
.reports-nav,
.expenses-nav,
.returns-nav,
.ai-nav,
.settings-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-top: 7px !important;
  gap: 3px !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
}

.nav-item,
.logout-link {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .logout-link {
  width: 62px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  justify-content: center !important;
}

body.sidebar-collapsed .nav-item[href="./index.html"] {
  display: none !important;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .logout-link .nav-text {
  display: none !important;
}

body:not(.sidebar-collapsed) .brand-copy,
body:not(.sidebar-collapsed) .nav-text,
body:not(.sidebar-collapsed) .logout-link .nav-text {
  display: inline-block !important;
}

.nav-icon,
.logout-link .nav-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 12px !important;
}

.nav-icon svg,
.logout-link .nav-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.assist-card,
.sidebar-mini-card {
  display: none !important;
}

.sidebar-bottom {
  flex: 0 0 auto !important;
  padding-top: 7px !important;
}

.logout-link {
  height: 42px !important;
  min-height: 42px !important;
}

@media (max-height: 740px) {
  .sidebar-brand-row { min-height: 56px !important; }
  .sidebar-brand-icon { width: 54px !important; height: 54px !important; flex-basis: 54px !important; }
  .sidebar-brand-icon svg { width: 30px !important; height: 30px !important; }
  .inventory-nav,
  .history-nav,
  .payments-nav,
  .reports-nav,
  .expenses-nav,
  .returns-nav,
  .ai-nav,
  .settings-nav { gap: 1px !important; padding-top: 4px !important; }
  .nav-item,
  .logout-link { height: 38px !important; min-height: 38px !important; }
  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .logout-link { height: 38px !important; min-height: 38px !important; }
  .nav-icon,
  .logout-link .nav-icon { width: 35px !important; height: 35px !important; flex-basis: 35px !important; }
  .nav-icon svg,
  .logout-link .nav-icon svg { width: 20px !important; height: 20px !important; }
}

@media (max-width: 760px) {
  :root { --pix-sidebar-closed: 68px; --pix-sidebar-open: min(254px, calc(100vw - 10px)); }
  .inventory-app,
  .history-app,
  .payments-app,
  .reports-app,
  .expenses-app,
  .returns-app,
  .ai-app,
  .settings-app {
    grid-template-columns: var(--pix-sidebar-closed) minmax(0, 1fr) !important;
  }
  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .logout-link { width: 52px !important; }
}

/* Open-state hide arrow points left; collapsed has no visible hide icon. */
body:not(.sidebar-collapsed) .sidebar-toggle svg {
  transform: rotate(180deg) !important;
}