/* ==========================================================================
   AWK Inventory Dashboard — Design tokens
   Dark is the DEFAULT theme. Light mode = <html data-theme="light">.
   Brand language login page se liya gaya hai: violet → cyan gradient,
   glass surfaces, soft glow shadows.
   ========================================================================== */

:root {
  /* Brand — theme ke saath nahi badalta */
  --brand: #6a11cb;
  --brand-2: #00c9ff;
  --accent: #00b4d8;
  --grad: linear-gradient(135deg, var(--brand), var(--brand-2));
  --grad-soft: linear-gradient(135deg, rgba(106, 17, 203, 0.18), rgba(0, 201, 255, 0.18));

  --success: #2dce89;
  --danger: #f5576c;
  --warning: #ffb547;
  --info: #00c9ff;

  /* Shape & motion */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --pill: 999px;
  --blur: blur(18px) saturate(180%);
  --t-fast: 0.18s ease;
  --t: 0.3s ease;

  /* ---- DARK (default) ---- */
  color-scheme: dark;
  --bg: #08080d;
  --bg-grad:
    radial-gradient(1200px 600px at 0% 0%, rgba(106, 17, 203, 0.16), transparent 60%),
    radial-gradient(1000px 600px at 100% 100%, rgba(0, 201, 255, 0.12), transparent 55%),
    #08080d;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.09);
  --surface-3: rgba(255, 255, 255, 0.13);
  /* --surface-card: OPAQUE hona zaroori hai — cards modals ko host karte hain,
     to un par backdrop-filter nahi lag sakta (neeche .card ka note dekho). */
  --surface-card: #14141d;
  --surface-solid: #12121b;
  --surface-solid-2: #171722;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #f8f9fa;
  --text-muted: #adb5bd;
  --text-dim: #7f8894;
  --shadow: 0 15px 35px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 8px 24px rgba(106, 17, 203, 0.35);
  --sidebar-bg: rgba(255, 255, 255, 0.04);
  --input-bg: rgba(255, 255, 255, 0.07);
  --scrollbar: rgba(255, 255, 255, 0.16);
}

/* ---- LIGHT ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --bg-grad:
    radial-gradient(1200px 600px at 0% 0%, rgba(106, 17, 203, 0.07), transparent 60%),
    radial-gradient(1000px 600px at 100% 100%, rgba(0, 201, 255, 0.07), transparent 55%),
    #f4f5f7;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.95);
  --surface-3: rgba(0, 0, 0, 0.04);
  --surface-card: #ffffff;
  --surface-solid: #ffffff;
  --surface-solid-2: #f8f9fb;
  --border: rgba(16, 24, 40, 0.1);
  --border-strong: rgba(16, 24, 40, 0.18);
  --text: #1c2130;
  --text-muted: #5b6472;
  --text-dim: #7d8694;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.1);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-glow: 0 8px 24px rgba(106, 17, 203, 0.18);
  --sidebar-bg: #12121b;
  --input-bg: #ffffff;
  --scrollbar: rgba(16, 24, 40, 0.2);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--brand-2);
}

::selection {
  background: rgba(106, 17, 203, 0.4);
  color: #fff;
}

*:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: var(--pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ==========================================================================
   Layout / sidebar  (structure bilkul wahi — sirf skin badli hai)
   ========================================================================== */

#wrapper {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  transition: margin 0.25s ease-out;
  background: var(--sidebar-bg) !important;
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--border);
}

#sidebar-wrapper .sidebar-heading {
  padding: 1.1rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  border-bottom: 1px solid var(--border);
}

#sidebar-wrapper .list-group {
  width: 15rem;
  padding: 0.75rem 0.6rem;
  background: transparent;
}

#page-content-wrapper {
  min-width: 100vw;
  padding-bottom: 2rem;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

/* Sidebar links */
#sidebar-wrapper .list-group-item {
  border: none;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.15rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}

#sidebar-wrapper .list-group-item i {
  width: 1.25rem;
  text-align: center;
  opacity: 0.85;
}

#sidebar-wrapper .list-group-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

/* Active page — JS ya template `active` class laga sakta hai */
#sidebar-wrapper .list-group-item.active {
  background: var(--grad-soft) !important;
  color: #fff !important;
  font-weight: 600;
}

#sidebar-wrapper .list-group-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: var(--pill);
  background: var(--grad);
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

/* ==========================================================================
   Topbar
   ========================================================================== */

/* z-index zaroori hai: backdrop-filter apna stacking context banata hai, aur
   navbar DOM me content se pehle aata hai. Bagair iske page ke cards navbar ke
   dropdowns (bell / profile) ke UPAR paint hote hain. */
#page-content-wrapper > .navbar {
  position: relative;
  z-index: 1030;
  background: var(--surface) !important;
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border) !important;
  padding: 0.6rem 0;
}

#page-content-wrapper > .navbar .navbar-brand {
  color: var(--text) !important;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#menu-toggle {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-xs);
}
#menu-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* Topbar dropdown buttons (bell + profile) */
.navbar .btn-light {
  background: var(--surface-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), transform var(--t-fast);
}
.navbar .btn-light:hover {
  background: var(--surface-2) !important;
  transform: translateY(-1px);
}

/* Theme toggle */
#themeToggle .fa-sun {
  display: none;
}
:root[data-theme="light"] #themeToggle .fa-sun {
  display: inline-block;
}
:root[data-theme="light"] #themeToggle .fa-moon {
  display: none;
}

/* ==========================================================================
   Surfaces: cards, dropdowns, modals
   ========================================================================== */

/* NOTE: `.card` par backdrop-filter JAAN BOOJH KAR nahi hai.
   Templates (inventory.html, *_record.html) modals ko card ke ANDAR render karte
   hain. backdrop-filter stacking context + containing block banata hai, jisse
   `position: fixed` wala modal card ke andar trap ho jata hai aur apne hi
   backdrop ke peeche chala jata hai. Isi wajah se card opaque surface use karta hai.
   Agar kabhi glass look chahiye, pehle modals ko card se bahar nikalo. */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

/* dashboard.html ke inline gradient backgrounds ko theme ke saath align karta hai */
.card.hover-animate,
.card[style*="linear-gradient"] {
  background: var(--surface-card) !important;
  border: 1px solid var(--border) !important;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.card-body {
  color: var(--text);
}

.dropdown-menu {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.4rem;
}
.dropdown-item {
  color: var(--text);
  border-radius: var(--radius-xs);
  padding: 0.5rem 0.75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-3);
  color: var(--text);
}
.dropdown-header {
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dropdown-divider {
  border-color: var(--border);
}

.modal-content {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}
.modal-header,
.modal-footer {
  border-color: var(--border);
}
.modal-title {
  color: var(--text);
}
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.6;
}
:root[data-theme="light"] .btn-close {
  filter: none;
}

.modal.show {
  display: block;
}

/* Lamba modal (jaise Stock ka edit form with 75vh image) viewport se bahar nikal
   jata tha, jisse Save/Close buttons tak pohanchne ke liye poora scroll karna padta.
   Ab header/footer thehre rehte hain aur sirf body scroll hoti hai.
   `modal-fullscreen-sm-down` sm se neeche full-screen rehta hai, isliye
   ye rule sirf sm se upar lagta hai. */
@media (min-width: 576px) {
  .modal-dialog .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-content > .modal-body {
    overflow-y: auto;
  }
}

/* Bootstrap 5.3 ke apne z-index: backdrop 1050, modal 1055.
   Pehle yahan 1040 hardcoded tha — usko Bootstrap ke saath align rakho, warna
   backdrop modal ke upar aa sakta hai. `width: 100vw` bhi hataya kyunki wo
   scrollbar wali screens par horizontal scroll paida karta tha. */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  background-color: #000;
}

body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--text);
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: var(--surface-3);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: var(--surface-3);
}

.table th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid var(--border);
  /* sticky header OPAQUE hona chahiye, warna scroll par rows peeche se jhalakti hain */
  background: var(--surface-solid-2);
  position: sticky;
  top: 0;
  z-index: 2;
}

.table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-top: 1px solid var(--border);
  color: var(--text);
}

.table-responsive {
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.form-control:focus,
.form-select:focus {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--brand);
  box-shadow: 0 0 0 0.22rem rgba(106, 17, 203, 0.28);
}

.form-control::placeholder {
  color: var(--text-dim);
}

.form-label,
.form-check-label,
.col-form-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.input-group-text {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.form-floating > label {
  padding: 1rem 0.75rem;
  color: var(--text-dim);
}

.form-check-input {
  background-color: var(--input-bg);
  border-color: var(--border-strong);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--grad);
  border: none;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 26px rgba(106, 17, 203, 0.5);
}

.btn-secondary {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn-success {
  background: var(--success);
  border: none;
  color: #04231a;
}
.btn-danger {
  background: var(--danger);
  border: none;
  color: #fff;
}
.btn-warning {
  background: var(--warning);
  border: none;
  color: #2a1d00;
}

.btn-outline-primary {
  border-color: var(--brand);
  color: var(--brand-2);
}
.btn-outline-primary:hover {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   Badges, alerts, misc utilities
   ========================================================================== */

.badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3em 0.55em;
  border-radius: var(--pill);
}

.bg-success-soft {
  background-color: rgba(45, 206, 137, 0.16) !important;
  color: var(--success) !important;
}

.bg-danger-soft {
  background-color: rgba(245, 87, 108, 0.16) !important;
  color: var(--danger) !important;
}

.alert {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  backdrop-filter: var(--blur);
}
.alert-success {
  border-left: 3px solid var(--success);
}
.alert-danger {
  border-left: 3px solid var(--danger);
}
.alert-warning {
  border-left: 3px solid var(--warning);
}
.alert-info {
  border-left: 3px solid var(--info);
}

.hover-animate {
  transition: transform var(--t), box-shadow var(--t);
  cursor: pointer;
}

.hover-animate:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.icon-shape {
  transition: transform var(--t);
}

.hover-animate:hover .icon-shape {
  transform: rotate(12deg) scale(1.05);
}

/* Bootstrap text utilities jo templates me hardcoded hain */
.text-dark {
  color: var(--text) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
.border-bottom,
.border-right,
.border-top {
  border-color: var(--border) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  width: 100%;
  padding: 0.85rem 0;
  margin-top: 2rem;
  background: var(--surface);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.footer .text-muted {
  color: var(--text-dim) !important;
}

/* ==========================================================================
   Charts
   ========================================================================== */

.chart-area {
  position: relative;
  height: 20rem;
  width: 100%;
}

.chart-pie {
  position: relative;
  height: 15rem;
  width: 100%;
}

/* ==========================================================================
   POS — product browser + cart  (sales.html / purchases.html)
   ========================================================================== */

.sales-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
}

.product-browser {
  flex: 7;
}

.cart-summary {
  flex: 3;
  background: var(--surface);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  max-height: 90vh;
  overflow-y: auto;
  color: var(--text);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

/* Base product card — POS grid aur products_overview dono ke liye */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* opaque: grid me 100+ cards par backdrop-filter bhaari padta hai,
     aur hover transform ke saath repaint mehnga ho jata hai */
  background: var(--surface-card);
  padding: 15px;
  cursor: pointer;
  overflow: hidden;
  color: var(--text);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

/* products_overview.html ke image cards — padding nahi chahiye */
.product-card:has(.img-wrap) {
  padding: 0;
}

.product-card .img-wrap {
  height: 220px;
  overflow: hidden;
  display: block;
  background: var(--surface-3);
}

.product-card img.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.product-card:hover img.card-img-top {
  transform: scale(1.04);
}

.card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05));
  color: #fff;
}

.badge-stock {
  font-weight: 700;
  padding: 0.45rem 0.6rem;
  border-radius: var(--pill);
}

.card-footer-compact {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 0.6rem 0.85rem;
}

.modal-img,
.modal-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto;
  border-radius: var(--radius-sm);
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--grad);
  color: #fff;
  padding: 3px 9px;
  border-radius: var(--pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.product-image {
  width: 100%;
  height: 120px;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: var(--radius-xs);
}

.product-image i {
  font-size: 2rem;
  color: var(--text-dim);
}

.product-label {
  font-weight: 500;
  margin-bottom: 5px;
  flex-grow: 1;
  color: var(--text);
}

.product-stock {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---- Cart items ---- */

.cart-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.cart-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 5px;
  cursor: pointer;
}

.toggle-details {
  background: none;
  border: none;
  margin-right: 8px;
  cursor: pointer;
  color: var(--text-muted);
}

.cart-item-title {
  flex-grow: 1;
  font-weight: 500;
  color: var(--text);
}

.cart-item-price {
  margin: 0 10px;
  font-weight: 700;
  color: var(--text);
}

.cart-item-details {
  padding: 10px 0 10px 30px;
  border-top: 1px solid var(--border);
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast);
}

.quantity-btn:first-child {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
.quantity-btn:last-child {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.quantity-btn:hover {
  background: var(--surface-2);
}

.quantity-input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  background: var(--input-bg);
  color: var(--text);
}

.price-input {
  width: 80px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
}

.remove-item {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
}

.cart-item-notes textarea {
  margin-top: 8px;
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
}

.empty-cart {
  text-align: center;
  padding: 24px 20px;
  color: var(--text-dim);
}

.totals-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.pay-btn {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(106, 17, 203, 0.5);
}

.utility-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.utility-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast);
  padding: 5px;
}

.utility-btn:hover {
  color: var(--brand-2);
}

.branch-search {
  margin-bottom: 15px;
}

/* ==========================================================================
   Mobile cart / purchase drawer
   ========================================================================== */

@media (max-width: 768px) {
  .sales-container {
    flex-direction: column;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cart-summary {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* navbar ab 1030 par hai — full-screen cart usse upar hona chahiye */
    z-index: 1040;
    background: var(--surface-solid);
    border-radius: 0;
    max-height: none;
    overflow-y: auto;
    padding: 20px;
    display: none;
  }

  .cart-summary.open {
    display: block;
  }

  .mobile-cart-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--grad);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
    z-index: 1000;
  }

  .mobile-cart-icon .cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
  }

  /* Cart/drawer ka ✕ — pehle ye do alag blocks me tha jo ek dusre ko
     overwrite kar rahe the. Ab ek jagah, absolute top-right. */
  .close-cart-mobile {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    z-index: 1;
  }

  #purchaseDrawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: var(--surface-solid);
    z-index: 1050;
    padding: 20px;
    overflow-y: auto;
  }

  #purchaseDrawer.open {
    right: 0;
  }
}

@media (min-width: 769px) {
  .mobile-cart-icon,
  .close-cart-mobile {
    display: none;
  }
}

#purchaseDrawer {
  transition: transform var(--t);
}

#mobilePurchaseIcon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--grad);
  color: #fff;
  padding: 15px;
  border-radius: 50%;
  box-shadow: var(--shadow-glow);
  cursor: pointer;
  transition: transform var(--t);
}

#mobilePurchaseIcon:hover {
  transform: scale(1.08);
}

#mobilePurchaseIcon .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--danger);
  color: #fff;
  border-radius: var(--pill);
  padding: 4px 8px;
  font-size: 0.75em;
}

.badge-pulse {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   Print — hamesha light, ink bachane ke liye
   ========================================================================== */

@media print {
  .no-print,
  .modal-footer,
  .btn-close,
  .actions-column,
  #sidebar-wrapper,
  .navbar,
  .footer,
  #themeToggle {
    display: none !important;
  }

  body {
    padding: 20px;
    font-size: 12px;
    background: #fff !important;
    color: #000 !important;
  }

  .card,
  .table,
  .table td,
  .table th {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

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

  th,
  td {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2 !important;
    position: static;
  }
}