/* ==========================================================================
   NexaPOS — Soft UI Dashboard theme
   Signature traits: pink/purple diagonal gradients, soft diffused shadows,
   large-radius cards, pastel "soft" badges, gradient icon avatars.
   ========================================================================== */

:root {
  /* Re-theme Bootstrap's own CSS variables so every utility class
     (.text-primary, .border-success, .bg-info-subtle, etc.) picks up
     the Soft UI palette automatically without per-template overrides. */
  --bs-primary: #cb0c9f;
  --bs-primary-rgb: 203, 12, 159;
  --bs-secondary: #8392ab;
  --bs-secondary-rgb: 131, 146, 171;
  --bs-success: #82d616;
  --bs-success-rgb: 130, 214, 22;
  --bs-info: #17c1e8;
  --bs-info-rgb: 23, 193, 232;
  --bs-warning: #fbcf33;
  --bs-warning-rgb: 251, 207, 51;
  --bs-danger: #ea0606;
  --bs-danger-rgb: 234, 6, 6;
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  --nx-bg: #f8f9fa;
  --nx-surface: #ffffff;
  --nx-surface-2: #f8f9fa;
  --nx-border: #e9ecef;
  --nx-text: #344767;
  --nx-text-muted: #67748e;
  --nx-heading: #252f40;

  /* Soft UI palette */
  --nx-primary: #cb0c9f;
  --nx-primary-2: #7928ca;
  --nx-secondary: #8392ab;
  --nx-info: #17c1e8;
  --nx-success: #82d616;
  --nx-warning: #fbcf33;
  --nx-danger: #ea0606;
  --nx-dark: #141727;

  --nx-gradient-primary: linear-gradient(310deg, #7928ca 0%, #ff0080 100%);
  --nx-gradient-secondary: linear-gradient(310deg, #627594 0%, #a8b8d8 100%);
  --nx-gradient-info: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);
  --nx-gradient-success: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  --nx-gradient-warning: linear-gradient(310deg, #f53939 0%, #fbcf33 100%);
  --nx-gradient-danger: linear-gradient(310deg, #ea0606 0%, #ff667c 100%);
  --nx-gradient-dark: linear-gradient(310deg, #141727 0%, #3a416f 100%);
  --nx-gradient-light: linear-gradient(310deg, #ced4da 0%, #ebeff4 100%);

  --nx-radius: 1rem;
  --nx-radius-sm: 0.5rem;
  --nx-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
  --nx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nx-shadow-primary: 0 4px 7px -1px rgba(203, 12, 159, 0.34), 0 2px 4px -1px rgba(203, 12, 159, 0.2);
  --nx-sidebar-bg: #ffffff;
  --nx-sidebar-text: #67748e;
}

[data-bs-theme="dark"] {
  --nx-bg: #1a1f37;
  --nx-surface: #25294a;
  --nx-surface-2: #2c3154;
  --nx-border: #3a4165;
  --nx-text: #d7d9e4;
  --nx-text-muted: #a2a5b9;
  --nx-heading: #ffffff;
  --nx-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.25);
  --nx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
  --nx-sidebar-bg: #1e2340;
  --nx-sidebar-text: #a2a5b9;
}

/* ---- Base ---------------------------------------------------------- */

body {
  background-color: var(--nx-bg);
  color: var(--nx-text);
  font-family: "Open Sans", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
  color: var(--nx-heading);
  font-weight: 700;
}

a { text-decoration: none; color: var(--nx-primary); }
a:hover { color: var(--nx-primary-2); }

.form-check-input:checked {
  background-color: var(--nx-primary) !important;
  border-color: var(--nx-primary) !important;
}
.form-check-input:focus {
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 2px rgba(203, 12, 159, 0.15);
}

::selection { background: rgba(203, 12, 159, 0.18); }

/* ---- Shell ------------------------------------------------------------ */

.nx-shell { display: flex; min-height: 100vh; }

.nx-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--nx-sidebar-bg);
  color: var(--nx-sidebar-text);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
  transition: margin-left 0.2s ease;
  padding: 0.75rem 0.75rem 1.5rem;
}

.nx-sidebar.collapsed { margin-left: -260px; }

.nx-sidebar .brand {
  padding: 0.75rem 0.5rem 1.25rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--nx-heading);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nx-sidebar .brand i {
  width: 34px; height: 34px; border-radius: 0.6rem;
  background: var(--nx-gradient-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--nx-shadow-primary);
  font-size: 1rem;
}

.nx-sidebar hr {
  border-color: var(--nx-border);
  opacity: 1;
  margin: 0.5rem 0;
}

.nx-sidebar .nav-section-title {
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--nx-text-muted);
  opacity: 0.65;
  padding: 1rem 0.75rem 0.4rem;
}

.nx-sidebar .nav-link {
  color: var(--nx-text);
  padding: 0.55rem 0.75rem;
  margin: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--nx-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nx-sidebar .nav-link .icon-shape {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-primary);
  font-size: 0.9rem;
}

.nx-sidebar .nav-link:hover {
  background: rgba(203, 12, 159, 0.06);
  color: var(--nx-primary);
}

.nx-sidebar .nav-link.active {
  background: var(--nx-gradient-primary);
  color: #fff;
  box-shadow: var(--nx-shadow-primary);
}

.nx-sidebar .nav-link.active .icon-shape {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: none;
}

.nx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.nx-topbar {
  background: var(--nx-bg);
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.btn-icon-soft {
  border-radius: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nx-topbar .dropdown-toggle.btn-outline-secondary {
  border-radius: 50rem;
}

.nx-content { padding: 0 1.5rem 1.5rem; flex: 1; }

/* ---- Cards -------------------------------------------------------- */

.nx-card {
  background: var(--nx-surface);
  border: none;
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
}

.nx-stat-card { padding: 1.25rem 1.35rem; }
.nx-stat-card .stat-label { color: var(--nx-text-muted); font-size: 0.8rem; font-weight: 600; }
.nx-stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--nx-heading); }
.nx-stat-card .stat-icon {
  width: 3.2rem; height: 3.2rem; border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff; flex-shrink: 0;
  box-shadow: var(--nx-shadow-primary);
}
.stat-icon.bg-primary { background: var(--nx-gradient-primary) !important; }
.stat-icon.bg-secondary { background: var(--nx-gradient-secondary) !important; }
.stat-icon.bg-info { background: var(--nx-gradient-info) !important; }
.stat-icon.bg-success { background: var(--nx-gradient-success) !important; }
.stat-icon.bg-warning { background: var(--nx-gradient-warning) !important; }
.stat-icon.bg-danger { background: var(--nx-gradient-danger) !important; }

/* ---- Buttons -------------------------------------------------------- */

.btn {
  border-radius: var(--nx-radius-sm);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { border-radius: 0.75rem; }
.btn-sm { border-radius: 0.5rem; }

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--nx-gradient-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--nx-shadow-primary) !important;
}
.btn-success, .btn-success:hover, .btn-success:focus {
  background: var(--nx-gradient-success) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 7px -1px rgba(82, 214, 22, 0.3) !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus {
  background: var(--nx-gradient-warning) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 7px -1px rgba(251, 207, 51, 0.3) !important;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus {
  background: var(--nx-gradient-danger) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 7px -1px rgba(234, 6, 6, 0.3) !important;
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
  background: var(--nx-gradient-secondary) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-outline-primary { color: var(--nx-primary); border-color: var(--nx-primary); }
.btn-outline-primary:hover { background: var(--nx-gradient-primary); border-color: transparent; color: #fff; }
.btn-outline-secondary { color: var(--nx-text-muted); border-color: var(--nx-border); background: var(--nx-surface); }
.btn-outline-secondary:hover { background: var(--nx-surface-2); color: var(--nx-heading); border-color: var(--nx-border); }
.btn-outline-success:hover { background: var(--nx-gradient-success); border-color: transparent; }
.btn-outline-warning:hover { background: var(--nx-gradient-warning); border-color: transparent; }
.btn-outline-danger:hover { background: var(--nx-gradient-danger); border-color: transparent; }

/* ---- Badges & alerts (soft/pastel) ---------------------------------- */

.badge { border-radius: 0.5rem; font-weight: 600; padding: 0.35em 0.65em; }

.text-bg-primary, .badge.text-bg-primary { background-color: rgba(203, 12, 159, 0.1) !important; color: var(--nx-primary) !important; }
.text-bg-secondary, .badge.text-bg-secondary { background-color: rgba(131, 146, 171, 0.15) !important; color: var(--nx-secondary) !important; }
.text-bg-success, .badge.text-bg-success { background-color: rgba(130, 214, 22, 0.15) !important; color: #439804 !important; }
.text-bg-warning, .badge.text-bg-warning { background-color: rgba(251, 207, 51, 0.15) !important; color: #a8710a !important; }
.text-bg-danger, .badge.text-bg-danger { background-color: rgba(234, 6, 6, 0.1) !important; color: var(--nx-danger) !important; }
.text-bg-info, .badge.text-bg-info { background-color: rgba(23, 193, 232, 0.12) !important; color: #0f88a3 !important; }
.text-bg-light, .badge.text-bg-light { background-color: var(--nx-surface-2) !important; color: var(--nx-text-muted) !important; }

/* Toasts stay solid/gradient (not pastel) — they need urgency + contrast
   for the white close icon, unlike inline badges. */
.toast { border: none; border-radius: var(--nx-radius-sm); box-shadow: var(--nx-shadow); }
.toast.text-bg-success { background: var(--nx-gradient-success) !important; color: #fff !important; }
.toast.text-bg-danger { background: var(--nx-gradient-danger) !important; color: #fff !important; }
.toast.text-bg-warning { background: var(--nx-gradient-warning) !important; color: #fff !important; }
.toast.text-bg-info { background: var(--nx-gradient-info) !important; color: #fff !important; }

.alert { border: none; border-radius: var(--nx-radius-sm); }
.alert-success { background: rgba(130, 214, 22, 0.12); color: #439804; }
.alert-danger { background: rgba(234, 6, 6, 0.1); color: var(--nx-danger); }
.alert-warning { background: rgba(251, 207, 51, 0.15); color: #a8710a; }
.alert-info { background: rgba(23, 193, 232, 0.12); color: #0f88a3; }

.badge-role { font-weight: 600; }

/* ---- Forms ------------------------------------------------------------ */

.form-control, .form-select {
  border-radius: var(--nx-radius-sm);
  border-color: var(--nx-border);
  background-color: var(--nx-surface);
  color: var(--nx-text);
  font-size: 0.875rem;
  padding: 0.55rem 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 2px rgba(203, 12, 159, 0.15);
  background-color: var(--nx-surface);
  color: var(--nx-text);
}
.form-label { font-weight: 600; font-size: 0.82rem; color: var(--nx-heading); }
.input-group-text { background: var(--nx-surface-2); border-color: var(--nx-border); border-radius: var(--nx-radius-sm); }

/* ---- Tables ------------------------------------------------------------ */

.table-nx thead th {
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--nx-text-muted);
  border-bottom-width: 1px;
  border-color: var(--nx-border);
}
.table-nx td { border-color: var(--nx-border); vertical-align: middle; font-size: 0.875rem; }
.table-nx tbody tr:hover { background-color: rgba(203, 12, 159, 0.03); }

/* ---- Modals & dropdowns ------------------------------------------------ */

.modal-content { border: none; border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); }
.dropdown-menu { border: none; border-radius: var(--nx-radius-sm); box-shadow: var(--nx-shadow); }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(203, 12, 159, 0.06); color: var(--nx-primary); }

/* ---- POS billing screen ------------------------------------------------ */

.pos-shell { height: calc(100vh - 56px); display: flex; overflow: hidden; }
.pos-products { flex: 1; overflow-y: auto; padding: 1rem; }
.pos-cart {
  width: 400px;
  flex-shrink: 0;
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 5;
}
.pos-cart-items { flex: 1; overflow-y: auto; }

/* Product list rows (billing screen product picker) */
.product-row {
  cursor: pointer;
  border: none;
  border-radius: var(--nx-radius-sm);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.product-row:hover { transform: translateX(2px); box-shadow: var(--nx-shadow); }
.product-row.disabled { cursor: not-allowed; opacity: 0.55; }
.product-row-icon {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 0.6rem;
  background: var(--nx-surface-2); color: var(--nx-text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.product-row-info { flex: 1; min-width: 0; }
.product-row-stock { flex-shrink: 0; }
.product-row-price { width: 7rem; flex-shrink: 0; text-align: right; }
.price { color: #000; font-weight: 700; }
[data-bs-theme="dark"] .price { color: #fff; }
.stock-badge { font-size: 0.68rem; }

@media (max-width: 575.98px) {
  .product-row-stock { display: none; }
  .product-row-price { width: auto; }
}

.cart-line { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--nx-border); }
.qty-btn { width: 26px; height: 26px; padding: 0; line-height: 1; border-radius: 0.4rem; }

.kbd { background: var(--nx-surface-2); border: 1px solid var(--nx-border); border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.75rem; }

.category-btn.btn-primary { background: var(--nx-gradient-primary); border-color: transparent; }

/* ---- Receipt (unchanged — thermal-printer style, print-only page) ----- */

.receipt-paper {
  width: 300px;
  background: #fff;
  color: #000;
  padding: 1rem;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  margin: 0 auto;
}
.receipt-paper hr { border-top: 1px dashed #000; }

@media print {
  .no-print { display: none !important; }
  .nx-shell, .nx-content { all: unset; display: block; }
}

@media (max-width: 991.98px) {
  .nx-sidebar { position: fixed; z-index: 1050; margin-left: -260px; }
  .nx-sidebar.show { margin-left: 0; }
  .pos-cart { width: 320px; }
}