/* =========================================================
   NunuaNow Web POS — UI modernization layer
   Safe overlay: does not change business logic / React bundle.
   Brand: ink #0F172A + emerald #10B981 (existing NunuaNow)
   ========================================================= */

:root {
  --nn-ink: #0f172a;
  --nn-ink-soft: #1e293b;
  --nn-ink-muted: #334155;
  --nn-accent: #10b981;
  --nn-accent-deep: #059669;
  --nn-accent-soft: #d1fae5;
  --nn-accent-mist: rgba(16, 185, 129, 0.12);
  --nn-surface: #f4f7f5;
  --nn-surface-elevated: #ffffff;
  --nn-surface-muted: #eef2f0;
  --nn-border: #dce3de;
  --nn-border-strong: #c5d0c9;
  --nn-text: #0f172a;
  --nn-text-secondary: #475569;
  --nn-text-subtle: #64748b;
  --nn-danger: #dc2626;
  --nn-warning: #d97706;
  --nn-radius-sm: 8px;
  --nn-radius-md: 12px;
  --nn-radius-lg: 16px;
  --nn-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  --nn-shadow-panel: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06);
  --nn-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --nn-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --nn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nn-duration: 180ms;
}

html,
:host {
  font-family: var(--nn-font) !important;
  font-feature-settings: "ss01" on, "cv11" on, "tnum" on;
}

body {
  font-family: var(--nn-font) !important;
  color: var(--nn-text) !important;
  background-color: var(--nn-surface) !important;
  background-image:
    radial-gradient(1200px 600px at 8% -10%, rgba(16, 185, 129, 0.11), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(15, 23, 42, 0.06), transparent 50%),
    linear-gradient(180deg, #f7faf8 0%, #f1f5f3 48%, #eef2f0 100%) !important;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

#root {
  min-height: 100vh;
}

/* ---------- Hide download overlays on POS (never cover Pay) ---------- */
#pos-dl-bar,
#pos-download-banner,
[id="pos-download-banner"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
  border-radius: var(--nn-radius-md) !important;
  letter-spacing: 0.01em;
  transition: background var(--nn-duration) var(--nn-ease), border-color var(--nn-duration) var(--nn-ease),
    color var(--nn-duration) var(--nn-ease), transform var(--nn-duration) var(--nn-ease),
    box-shadow var(--nn-duration) var(--nn-ease) !important;
}

.btn-primary {
  background: var(--nn-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-primary:hover {
  background: var(--nn-ink-soft) !important;
}

.btn-success {
  background: linear-gradient(180deg, #12c48a 0%, var(--nn-accent-deep) 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 18px rgba(16, 185, 129, 0.22);
}

.btn-success:hover {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--nn-border) !important;
  backdrop-filter: blur(6px);
}

.btn:active,
.btn-primary:active,
.btn-success:active,
.btn-secondary:active {
  transform: translateY(1px) scale(0.99);
}

/* ---------- Inputs / cards ---------- */
.input {
  border-radius: var(--nn-radius-md) !important;
  border-color: var(--nn-border) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  transition: border-color var(--nn-duration) var(--nn-ease), box-shadow var(--nn-duration) var(--nn-ease) !important;
}

.input:focus {
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 0 3px var(--nn-accent-mist) !important;
}

.card {
  border-radius: var(--nn-radius-lg) !important;
  border-color: rgba(220, 227, 222, 0.9) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--nn-shadow-soft) !important;
  backdrop-filter: blur(8px);
}

/* ---------- Sidebar / chrome ---------- */
.bg-sidebar {
  background:
    linear-gradient(180deg, #0f172a 0%, #122033 55%, #0f1f1a 100%) !important;
}

.bg-gray-50 {
  background-color: transparent !important;
}

.bg-white {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

/* Keep solid white for drawers/modals where translucency hurts readability */
.cart-drawer,
.mobile-pos-cart-drawer,
.mobile-pos-checkout-drawer,
.fixed.inset-0 .bg-white,
[class*="max-h-"] .bg-white {
  background-color: #fff !important;
}

/* ---------- Product grid (cashier speed) ---------- */
.pos-product-card {
  border-radius: var(--nn-radius-md) !important;
  border-color: var(--nn-border) !important;
  background: var(--nn-surface-elevated) !important;
  padding: 0.65rem !important;
  box-shadow: none !important;
  transition: border-color var(--nn-duration) var(--nn-ease), transform var(--nn-duration) var(--nn-ease),
    background var(--nn-duration) var(--nn-ease), box-shadow var(--nn-duration) var(--nn-ease) !important;
  will-change: transform;
}

.pos-product-card:hover {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12), 0 10px 22px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px);
}

.pos-product-card:active {
  transform: scale(0.97) !important;
  background: #f3faf7 !important;
}

.pos-product-card .product-img-placeholder {
  border-radius: var(--nn-radius-sm) !important;
  background: var(--nn-surface-muted) !important;
  height: 3.25rem !important;
  width: 3.25rem !important;
  margin-bottom: 0.4rem !important;
}

.pos-product-card .product-name {
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  color: var(--nn-ink-soft) !important;
  line-height: 1.3 !important;
}

.pos-product-card .product-price {
  margin-top: 0.2rem !important;
  font-size: 0.84rem !important;
  font-weight: 760 !important;
  font-variant-numeric: tabular-nums;
  color: var(--nn-ink) !important;
}

.pos-product-card .product-stock {
  font-variant-numeric: tabular-nums;
}

/* ---------- Category chips (less pill-cluster) ---------- */
.cat-chip {
  border-radius: var(--nn-radius-sm) !important;
  padding: 0.42rem 0.78rem !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  transition: background var(--nn-duration) var(--nn-ease), color var(--nn-duration) var(--nn-ease),
    border-color var(--nn-duration) var(--nn-ease), transform var(--nn-duration) var(--nn-ease) !important;
}

.cat-chip-active {
  background: var(--nn-ink) !important;
  border-color: var(--nn-ink) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.cat-chip-inactive {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: var(--nn-border) !important;
  color: var(--nn-text-secondary) !important;
}

.cat-chip-inactive:hover {
  background: #fff !important;
  border-color: var(--nn-border-strong) !important;
  color: var(--nn-ink) !important;
}

.cat-chip:active {
  transform: scale(0.97);
}

/* ---------- Cart ---------- */
.cart-item {
  border-bottom-color: #edf2ef !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.cart-item .item-name {
  font-weight: 650 !important;
  color: var(--nn-ink-soft) !important;
}

.cart-item .item-sku {
  font-family: var(--nn-font-mono);
  letter-spacing: 0.02em;
}

.cart-item .qty-btn {
  border-radius: 8px !important;
  border-color: var(--nn-border) !important;
  transition: background var(--nn-duration) var(--nn-ease), border-color var(--nn-duration) var(--nn-ease) !important;
}

.cart-item .qty-btn:hover {
  background: #f3faf7 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

.cart-item .item-total {
  font-variant-numeric: tabular-nums;
  font-weight: 750 !important;
}

.cart-checkout-sticky {
  border-top-color: #e5ece8 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #fff 100%) !important;
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.06) !important;
  padding: 0.9rem 1rem !important;
}

.cart-checkout-sticky .btn-success,
.cart-checkout-sticky .btn-primary {
  min-height: 48px;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
}

/* Checkout CTA presence (motion 1) */
@keyframes nn-cta-glow {
  0%,
  100% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 18px rgba(16, 185, 129, 0.18);
  }
  50% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 10px 24px rgba(16, 185, 129, 0.3);
  }
}

.cart-checkout-sticky .btn-success:not(:disabled),
.mobile-cart-bar {
  animation: nn-cta-glow 2.8s var(--nn-ease) infinite;
}

.customer-select-btn {
  border-radius: var(--nn-radius-md) !important;
  border-color: var(--nn-border) !important;
  background: rgba(248, 250, 249, 0.9) !important;
}

.customer-select-btn:hover {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: #f3faf7 !important;
}

/* ---------- Payment methods ---------- */
.pay-method-btn {
  border-radius: var(--nn-radius-md) !important;
  transition: border-color var(--nn-duration) var(--nn-ease), background var(--nn-duration) var(--nn-ease),
    transform var(--nn-duration) var(--nn-ease) !important;
}

.pay-method-btn-active {
  border-color: var(--nn-ink) !important;
  background: #f3faf7 !important;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.pay-method-btn-inactive {
  border-color: var(--nn-border) !important;
  background: rgba(255, 255, 255, 0.85);
}

.pay-method-btn:active {
  transform: scale(0.98);
}

/* ---------- Mobile cart bar ---------- */
.mobile-cart-bar {
  background: linear-gradient(90deg, #0f172a 0%, #12261f 100%) !important;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.22) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.25);
}

.cart-drawer {
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18) !important;
}

.cart-drawer-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(3px);
}

/* ---------- Motion: panel enter (motion 2) ---------- */
@keyframes nn-rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-pop-in,
.cart-drawer,
.mobile-pos-cart-drawer,
.mobile-pos-checkout-drawer {
  animation: nn-rise-in 220ms var(--nn-ease) both;
}

/* ---------- Density helpers for tablet POS ---------- */
@media (min-width: 768px) and (max-width: 1280px) {
  .pos-product-card {
    padding: 0.55rem !important;
  }

  .pos-product-card .product-name {
    font-size: 0.7rem !important;
  }

  .pos-product-card .product-price {
    font-size: 0.8rem !important;
  }
}

/* Search row clarity */
input[type="search"],
input[placeholder*="Search" i],
input[placeholder*="Barcode" i] {
  font-variant-numeric: tabular-nums;
}

/* Totals / money */
.text-2xl,
.text-3xl,
.text-4xl,
.font-bold,
.font-extrabold {
  font-variant-numeric: tabular-nums;
}

/* Soften heavy utility shadows used as chrome */
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--nn-shadow-panel) !important;
}

/* Status dots keep contrast on atmospheric bg */
.bg-green-500,
.bg-emerald-50 {
  /* preserve utility colors */
}

/* Reduce purple accent leftovers toward brand ink/emerald where class is decorative */
.bg-purple-50 {
  background-color: #ecfdf5 !important;
}
.text-purple-600,
.text-purple-700 {
  color: var(--nn-accent-deep) !important;
}
.bg-purple-100 {
  background-color: var(--nn-accent-soft) !important;
}

/* Print must stay clean */
@media print {
  body {
    background: #fff !important;
    background-image: none !important;
  }

  #pos-dl-bar,
  .mobile-cart-bar {
    display: none !important;
    animation: none !important;
  }

  .cart-checkout-sticky .btn-success {
    animation: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Desktop sidebar: always independently scrollable ----------
   The app renders the sidebar as a block instead of a flex column, so the
   navigation area grows to its content height and bottom items (Business
   Profile / Owner Account / POS Devices / Branches) fall below the fold and
   can never be scrolled to at full screen. Make it a proper flex column so
   the header + footer stay fixed and the nav region scrolls on its own. */
aside.fixed.inset-y-0.left-0.bg-sidebar,
aside.w-72.bg-sidebar,
aside[class*="bg-sidebar"] {
  display: flex !important;
  flex-direction: column !important;
}
aside.fixed.inset-y-0.left-0.bg-sidebar > nav,
aside.w-72.bg-sidebar > nav,
aside[class*="bg-sidebar"] > nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}