/* =====================================================================
   Cloth Shop Manager - Professional Admin Theme
   ===================================================================== */

:root {
  --csm-primary: #2f5d8a;
  --csm-primary-rgb: 47, 93, 138;
  --csm-primary-dark: #1f4266;
  --csm-primary-light: #eaf1f8;
  --csm-accent: #d99a3c;
  --csm-sidebar-bg: #14243a;
  --csm-sidebar-bg-active: #1f3a5c;
  --csm-sidebar-text: #b8c6da;
  --csm-sidebar-text-active: #ffffff;
  --csm-success: #1e8a5f;
  --csm-danger: #c1403a;
  --csm-warning: #d99a3c;
  --csm-body-bg: #f4f6f9;
  --csm-card-radius: 0.6rem;
  --csm-sidebar-width: 250px;
  --csm-topbar-bg: #ffffff;
  --csm-topbar-border: #e5e9ef;
  --csm-card-border: #e9edf2;
  --csm-card-header-bg: #ffffff;
  --csm-card-header-border: #eef1f5;
  --csm-text: #2b2f36;
  --csm-table-hover: #f8fafc;
}

/* ---------------- Dark mode (relies on Bootstrap 5.3's native
   data-bs-theme color modes for all standard components; these
   overrides only cover our own custom classes) ---------------- */
html[data-bs-theme="dark"] {
  --csm-body-bg: #0d1526;
  --csm-topbar-bg: #101a2d;
  --csm-topbar-border: #1f2b42;
  --csm-primary-light: #182842;
  --csm-card-border: #1f2b42;
  --csm-card-header-bg: #101a2d;
  --csm-card-header-border: #1f2b42;
  --csm-text: #e4e9f2;
  --csm-table-hover: #16223a;
}

html[data-bs-theme="dark"] .csm-topbar .navbar-brand {
  color: #e4e9f2;
}

html[data-bs-theme="dark"] .csm-login-wrap {
  background: linear-gradient(135deg, #0b1220, #14243a);
}

html[data-bs-theme="dark"] .csm-required::after {
  color: #e0776f;
}

/* Theme toggle button: show only the icon relevant to switching *to* the other mode */
.csm-theme-icon-light { display: none; }
html[data-bs-theme="dark"] .csm-theme-icon-dark { display: none; }
html[data-bs-theme="dark"] .csm-theme-icon-light { display: inline-block; }

.csm-brand-logo {
  height: 28px;
  max-width: 140px;
  object-fit: contain;
}

.csm-login-logo {
  height: 48px;
  max-width: 220px;
  object-fit: contain;
}

html[lang="bn"] body,
body.lang-bn {
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}

body {
  font-family: 'Inter', 'Hind Siliguri', sans-serif;
  background-color: var(--csm-body-bg);
  color: var(--csm-text);
  min-height: 100vh;
}

/* ---------------- Topbar ---------------- */
.csm-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--csm-topbar-bg);
  border-bottom: 1px solid var(--csm-topbar-border);
  box-shadow: 0 1px 3px rgba(20, 36, 58, 0.04);
  height: 60px;
}

.csm-topbar .navbar-brand {
  color: var(--csm-primary-dark);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.csm-lang-toggle .btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
}

/* ---------------- Sidebar ---------------- */
.csm-sidebar {
  width: var(--csm-sidebar-width);
  min-width: var(--csm-sidebar-width);
  background: var(--csm-sidebar-bg);
  min-height: calc(100vh - 60px);
  transition: margin-left 0.2s ease;
}

.csm-sidebar .csm-nav-section {
  color: #6d84a3;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1rem 1.1rem 0.35rem;
  font-weight: 600;
}

.csm-sidebar .nav-link {
  color: var(--csm-sidebar-text);
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 0;
}

.csm-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--csm-sidebar-text-active);
}

.csm-sidebar .nav-link.active {
  background: var(--csm-sidebar-bg-active);
  color: var(--csm-sidebar-text-active);
  border-left-color: var(--csm-accent);
  font-weight: 600;
}

.csm-sidebar .nav-link i {
  font-size: 1.05rem;
  width: 1.2rem;
  text-align: center;
}

.csm-sidebar-version {
  color: #52698c;
  font-size: 0.68rem;
  text-align: center;
  padding: 1.1rem 1rem 1.3rem;
  opacity: 0.85;
}

@media (max-width: 991.98px) {
  .csm-sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    z-index: 1040;
    margin-left: calc(-1 * var(--csm-sidebar-width));
    box-shadow: 2px 0 10px rgba(0,0,0,0.15);
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    /* With top+bottom both pinned the browser can size this box to the
       viewport and actually apply overflow to it - without `bottom` the
       old rule only had `min-height`, which sets a floor, not a ceiling,
       so a role with many menu items (admin: Products/Sales/Accounts/
       Staff/Reports/Settings) rendered taller than the screen with no
       way to reach the lower items - not "not opening", just unreachable.
       overflow-y:auto turns this drawer into its own independently
       scrollable panel, like a native app's slide-in menu. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .csm-sidebar.show {
    margin-left: 0;
  }
  .csm-backdrop {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(0,0,0,0.35);
    z-index: 1035;
  }
  .csm-backdrop.show { display: block; }

  /* This becomes the "More" sheet opened from the bottom nav on mobile -
     give its links roomier, more obviously tappable touch targets than
     the always-visible desktop sidebar needs. */
  .csm-sidebar .nav-link {
    padding: 0.8rem 1.1rem;
    font-size: 0.98rem;
  }
}

/* ---------------- Bottom tab bar (mobile native-app style navigation) ----------------
   Shown only below the "lg" breakpoint (same cutoff the sidebar drawer uses,
   via the d-lg-none utility class in the markup) so mobile/tablet gets a
   thumb-reachable primary nav instead of depending on a hamburger menu. */
.csm-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1032;
  display: flex;
  background: var(--csm-topbar-bg);
  border-top: 1px solid var(--csm-topbar-border);
  box-shadow: 0 -1px 8px rgba(20, 36, 58, 0.07);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.csm-bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 56px;
  padding: 0.45rem 0.2rem 0.4rem;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--csm-text);
  opacity: 0.62;
  font-size: 0.68rem;
  line-height: 1.1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.csm-bottom-nav-item i {
  font-size: 1.3rem;
}

.csm-bottom-nav-item.active,
.csm-bottom-nav-item.csm-nav-toggle-open {
  color: var(--csm-primary);
  opacity: 1;
  font-weight: 600;
}

.csm-bottom-nav-item:active {
  opacity: 1;
}

@media (max-width: 991.98px) {
  .csm-main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  }
}

/* ---------------- Main content ---------------- */
.csm-main {
  flex: 1;
  min-width: 0;
  padding: 1.4rem 1.4rem 3rem;
}

.csm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.csm-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--csm-primary-dark);
  margin: 0;
}

/* ---------------- Cards ---------------- */
.card {
  border: 1px solid var(--csm-card-border);
  border-radius: var(--csm-card-radius);
  box-shadow: 0 1px 2px rgba(20, 36, 58, 0.03);
}

/* Bootstrap's .card is a flex column, which makes .card-body a flex item -
   and a flex item's default min-width is auto (its content's intrinsic
   width), not 0. A wide child (a many-column table, in particular) can then
   force the card - and with it the whole page - wider than the viewport
   instead of letting .csm-scroll-x/.table-responsive's own overflow-x:auto
   do its job. min-width: 0 here lets the card shrink to the available
   space so the scroll container inside it actually scrolls instead of the
   whole page. */
.card > .card-body {
  min-width: 0;
}

.card-header {
  background: var(--csm-card-header-bg);
  border-bottom: 1px solid var(--csm-card-header-border);
  font-weight: 600;
  color: var(--csm-primary-dark);
}

html[data-bs-theme="dark"] .card-header {
  color: #a9c2e0;
}

.csm-stat-card {
  border-radius: var(--csm-card-radius);
  padding: 1.1rem 1.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.csm-stat-card .csm-stat-icon {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  font-size: 2.1rem;
  opacity: 0.35;
}

.csm-stat-card .csm-stat-label {
  font-size: 0.8rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.csm-stat-card .csm-stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  margin-top: 0.15rem;
}

.csm-bg-blue { background: linear-gradient(135deg, #2f5d8a, #1f4266); }
.csm-bg-green { background: linear-gradient(135deg, #1e8a5f, #0f5a3d); }
.csm-bg-amber { background: linear-gradient(135deg, #d99a3c, #b5761f); }
.csm-bg-red { background: linear-gradient(135deg, #c1403a, #922c27); }
.csm-bg-purple { background: linear-gradient(135deg, #6a4c93, #4a3468); }

/* ---------------- Tables ---------------- */
.table-csm thead th {
  background: var(--csm-primary-light);
  color: var(--csm-primary-dark);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
  white-space: nowrap;
}

html[data-bs-theme="dark"] .table-csm thead th {
  color: #a9c2e0;
}

.table-csm tbody tr:hover {
  background-color: var(--csm-table-hover);
}

.badge-unit {
  background: var(--csm-primary-light);
  color: var(--csm-primary-dark);
  font-weight: 600;
}

/* ---------------- Mobile card-style tables (native-app list feel) ----------------
   Every .table-csm list/report table (not the letterhead-style invoice
   table, which keeps its own compact layout) turns into a stack of cards
   below 768px, one per row. Each cell shows a small "label" above its
   value; app.js (csmApplyTableCardLabels) sets that label from the
   column's own <thead> text at runtime, so no page's markup has to
   change - it also means a table degrades gracefully (plain block, no
   fake label) for any row whose cell count doesn't match the header,
   e.g. a colspan "no data" or "total" row. */
@media (max-width: 767.98px) {
  .table-csm:not(.csm-invoice-table) thead {
    display: none;
  }
  .table-csm:not(.csm-invoice-table),
  .table-csm:not(.csm-invoice-table) tbody,
  .table-csm:not(.csm-invoice-table) tr {
    display: block;
    width: 100%;
  }
  .table-csm:not(.csm-invoice-table) tr {
    margin-bottom: 0.7rem;
    border: 1px solid var(--csm-card-border);
    border-radius: 0.6rem;
    padding: 0.1rem 0.9rem;
    background: var(--csm-card-header-bg);
  }
  .table-csm:not(.csm-invoice-table) tr:last-child {
    margin-bottom: 0;
  }
  .table-csm:not(.csm-invoice-table) td {
    display: block;
    padding: 0.6rem 0;
    border: none !important;
    border-bottom: 1px solid var(--csm-card-border) !important;
  }
  .table-csm:not(.csm-invoice-table) td:last-child {
    border-bottom: none !important;
  }
  .table-csm:not(.csm-invoice-table) td[data-label]:not([data-label=""]) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    text-align: right;
  }
  .table-csm:not(.csm-invoice-table) td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--csm-text);
    opacity: 0.55;
  }
  /* A card row's own hover tint doesn't mean anything on a touch device -
     keep every card the same resting background. */
  .table-csm:not(.csm-invoice-table) tr:hover {
    background-color: var(--csm-card-header-bg);
  }
}

/* ---------------- Touch-friendly sizing (mobile/tablet) ----------------
   Bumps tap targets toward the ~44px comfortable-touch guideline without
   visually bloating the desktop layout, which is untouched above this
   breakpoint. */
@media (max-width: 767.98px) {
  .btn,
  .form-control,
  .form-select {
    min-height: 2.75rem;
  }
  .btn-sm,
  .form-control-sm,
  .form-select-sm {
    min-height: 2.3rem;
  }
  textarea.form-control {
    min-height: 4.5rem;
  }
  .csm-page-header {
    gap: 0.6rem;
  }
}

/* ---------------- Login page ---------------- */
.csm-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #14243a, #2f5d8a);
  padding: 1rem;
}

.csm-login-card {
  max-width: 400px;
  width: 100%;
  border-radius: 0.9rem;
  overflow: hidden;
}

.csm-login-card .card-header {
  background: var(--csm-primary-dark);
  color: #fff;
  text-align: center;
  padding: 2rem 1.5rem 1.2rem;
  border: none;
}

/* ---------------- Misc ---------------- */
.csm-required::after {
  content: " *";
  color: var(--csm-danger);
}

.csm-scroll-x {
  overflow-x: auto;
}

.cursor-pointer { cursor: pointer; }

/* ---------------- Shop-wide color themes (gradient palettes, admin-set) ----------------
   Independent from the per-viewer light/dark toggle above. Applied via
   html[data-theme-color="..."] which overrides the base --csm-primary* variables. */
html[data-theme-color="emerald"] {
  --csm-primary: #0f7a5e; --csm-primary-rgb: 15, 122, 94; --csm-primary-dark: #0a4f3d; --csm-primary-light: #e6f5f0;
  --csm-accent: #e0b84a; --csm-sidebar-bg: #0a2e24; --csm-sidebar-bg-active: #0f4a38;
}
html[data-theme-color="royal"] {
  --csm-primary: #5b3a94; --csm-primary-rgb: 91, 58, 148; --csm-primary-dark: #3a2564; --csm-primary-light: #efe9f8;
  --csm-accent: #e0a94a; --csm-sidebar-bg: #241a3d; --csm-sidebar-bg-active: #3a2564;
}
html[data-theme-color="sunset"] {
  --csm-primary: #c1543a; --csm-primary-rgb: 193, 84, 58; --csm-primary-dark: #8a3524; --csm-primary-light: #fbeae6;
  --csm-accent: #3a7ac1; --csm-sidebar-bg: #331e17; --csm-sidebar-bg-active: #5c2f22;
}
html[data-theme-color="rose"] {
  --csm-primary: #b5304f; --csm-primary-rgb: 181, 48, 79; --csm-primary-dark: #7a1f36; --csm-primary-light: #fbe9ed;
  --csm-accent: #4ab5a0; --csm-sidebar-bg: #35141c; --csm-sidebar-bg-active: #5c2130;
}
html[data-theme-color="slate"] {
  --csm-primary: #374151; --csm-primary-rgb: 55, 65, 81; --csm-primary-dark: #1f2937; --csm-primary-light: #eceef1;
  --csm-accent: #d99a3c; --csm-sidebar-bg: #111827; --csm-sidebar-bg-active: #1f2937;
}
html[data-theme-color="emerald"] .csm-bg-blue,
html[data-theme-color="royal"] .csm-bg-blue,
html[data-theme-color="sunset"] .csm-bg-blue,
html[data-theme-color="rose"] .csm-bg-blue,
html[data-theme-color="slate"] .csm-bg-blue {
  background: linear-gradient(135deg, var(--csm-primary), var(--csm-primary-dark));
}
html[data-theme-color] .csm-login-wrap {
  background: linear-gradient(135deg, var(--csm-sidebar-bg), var(--csm-primary));
}
html[data-theme-color] .csm-login-card .card-header {
  background: var(--csm-primary-dark);
}

/* ---------------- Wire Bootstrap's own "primary" components to the theme ----------------
   Bootstrap 5.3 sets each component's colors as LOCAL --bs-* custom properties with
   hardcoded literal hex values (e.g. .btn-primary{--bs-btn-bg:#0d6efd;...}) rather than
   referencing a shared variable, so redefining --csm-primary above (or --bs-primary)
   alone does nothing to buttons/links/badges/focus rings/etc. These rules override those
   local component variables so every standard Bootstrap "primary" element repaints with
   the selected admin theme color too, not just our own .csm-* chrome. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--csm-primary);
  --bs-btn-border-color: var(--csm-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--csm-primary-dark);
  --bs-btn-hover-border-color: var(--csm-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--csm-primary-dark);
  --bs-btn-active-border-color: var(--csm-primary-dark);
  --bs-btn-disabled-bg: var(--csm-primary);
  --bs-btn-disabled-border-color: var(--csm-primary);
  --bs-btn-focus-shadow-rgb: var(--csm-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--csm-primary);
  --bs-btn-border-color: var(--csm-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--csm-primary);
  --bs-btn-hover-border-color: var(--csm-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--csm-primary);
  --bs-btn-active-border-color: var(--csm-primary);
  --bs-btn-disabled-color: var(--csm-primary);
  --bs-btn-disabled-border-color: var(--csm-primary);
  --bs-btn-focus-shadow-rgb: var(--csm-primary-rgb);
  --bs-gradient: none;
}
.text-primary { color: var(--csm-primary) !important; }
.bg-primary { background-color: var(--csm-primary) !important; }
.text-bg-primary {
  color: #fff !important;
  background-color: var(--csm-primary) !important;
}
.border-primary { border-color: var(--csm-primary) !important; }
.link-primary {
  --bs-link-color-rgb: var(--csm-primary-rgb);
  --bs-link-hover-color-rgb: var(--csm-primary-rgb);
}
.card-body a:not(.btn),
.csm-main a:not(.btn):not(.csm-sidebar-link):not(.dropdown-item) {
  color: var(--csm-primary);
}
.card-body a:not(.btn):hover,
.csm-main a:not(.btn):not(.csm-sidebar-link):not(.dropdown-item):hover {
  color: var(--csm-primary-dark);
}
.form-check-input:checked {
  background-color: var(--csm-primary);
  border-color: var(--csm-primary);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--csm-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--csm-primary-rgb), 0.25);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--csm-primary);
}
.nav-tabs .nav-link.active {
  color: var(--csm-primary);
  border-color: var(--csm-card-border) var(--csm-card-border) var(--csm-topbar-bg);
}
.page-link { color: var(--csm-primary); }
.page-link:hover { color: var(--csm-primary-dark); }
.page-item.active .page-link {
  background-color: var(--csm-primary);
  border-color: var(--csm-primary);
}
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--csm-primary) !important; }
.progress-bar { background-color: var(--csm-primary); }
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--csm-primary);
}
.list-group-item.active {
  background-color: var(--csm-primary);
  border-color: var(--csm-primary);
}
.accordion-button:not(.collapsed) {
  color: var(--csm-primary-dark);
  background-color: var(--csm-primary-light);
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--csm-primary-rgb), 0.25);
}
::selection {
  background-color: var(--csm-primary);
  color: #fff;
}

/* Theme color picker swatches (settings page) */
.csm-theme-swatch {
  height: 56px;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.csm-theme-swatch:hover { transform: scale(1.04); }
.csm-theme-swatch-active { border-color: var(--csm-text); box-shadow: 0 0 0 2px var(--csm-body-bg), 0 0 0 4px var(--csm-primary); }

/* Receipt paper size picker cards (settings page) */
.csm-papersize-option {
  border: 2px solid var(--csm-card-border);
  border-radius: 0.6rem;
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--csm-text);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.csm-papersize-option:hover { transform: scale(1.02); background: var(--csm-body-bg); }
.csm-papersize-option i { color: var(--csm-text); opacity: 0.65; }
.csm-papersize-option-active {
  border-color: var(--csm-primary);
  background: var(--csm-primary-light);
}
.csm-papersize-option-active i { color: var(--csm-primary-dark); opacity: 1; }

/* ---------------- Invoice (sale/purchase view) ----------------
   Clean, white professional letterhead layout: shop letterhead on top,
   then a bill-to / document-info row, then the item table, then totals
   and a footer - rather than a heavy colored band. Accents (the document
   title, table header rule, totals emphasis) use the admin's selected
   theme color so the invoice stays visually consistent with the rest
   of the app whichever theme is active. */
.csm-invoice {
  overflow: hidden;
  background: #fff;
}
html[data-bs-theme="dark"] .csm-invoice {
  background: var(--csm-card-header-bg);
}

.csm-invoice-letterhead {
  padding: 2rem 2rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.csm-invoice-brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.csm-invoice-logo {
  height: 60px;
  max-width: 140px;
  object-fit: contain;
  border-radius: 0.4rem;
}

.csm-invoice-logo-fallback {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: var(--csm-primary-light);
  color: var(--csm-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
}

.csm-invoice-shopname {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--csm-text);
  line-height: 1.2;
}

.csm-invoice-tagline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csm-primary);
  margin-top: 0.15rem;
}

.csm-invoice-contact {
  font-size: 0.8rem;
  color: var(--csm-text);
  opacity: 0.75;
  margin-top: 0.35rem;
  line-height: 1.6;
}

.csm-invoice-doctitle {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--csm-primary);
  text-transform: uppercase;
  white-space: nowrap;
}

.csm-invoice-hr {
  border: none;
  border-top: 2px solid var(--csm-card-border);
  margin: 0 2rem;
}

.csm-invoice-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

.csm-invoice-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--csm-text);
  opacity: 0.55;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.csm-invoice-docinfo {
  text-align: right;
  font-size: 0.88rem;
}

.csm-invoice-docinfo > div {
  margin-bottom: 0.3rem;
}

.csm-invoice-docinfo .csm-invoice-label {
  display: inline-block;
  min-width: 8rem;
  margin-bottom: 0;
  text-align: left;
}

.csm-invoice-table {
  margin: 0 2rem;
  width: calc(100% - 4rem);
}

.csm-invoice-table thead th {
  background: var(--csm-body-bg);
  border-bottom: 2px solid var(--csm-card-border) !important;
  border-top: 1px solid var(--csm-card-border) !important;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--csm-text);
  opacity: 0.8;
}

.csm-invoice-table td,
.csm-invoice-table th {
  border: 1px solid var(--csm-card-border);
  vertical-align: middle;
}

.csm-invoice-table tbody tr:nth-child(even) td {
  background: var(--csm-body-bg);
}

.csm-invoice-totals-wrap {
  padding: 1.25rem 2rem 0;
}

.csm-invoice-totals {
  font-size: 0.92rem;
}

.csm-invoice-totals .csm-invoice-grandtotal {
  background: var(--csm-primary-light);
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0;
  color: var(--csm-primary-dark);
}

.csm-invoice-note {
  margin: 1.25rem 2rem 0;
  background: var(--csm-body-bg);
  border-left: 3px solid var(--csm-primary);
  padding: 0.6rem 0.9rem;
  border-radius: 0.3rem;
}

.csm-invoice-footer {
  text-align: center;
  margin: 2rem 2rem 0;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px dashed var(--csm-card-border);
  color: var(--csm-primary);
  font-weight: 700;
}

.csm-invoice-footer .csm-invoice-subfoot {
  color: var(--csm-text);
  opacity: 0.6;
  font-weight: 400;
  font-size: 0.78rem;
  margin-top: 0.35rem;
}

/* ---------------- Invoice size control (screen only) ----------------
   "-" / 100% / "+" buttons above the invoice let the cashier shrink a
   long invoice (many line items) so it prints on a single page, using
   the CSS `zoom` property applied to .csm-invoice via JS (assets/js/app.js)
   - zoom reflows every descendant (text, padding, table rows, images)
   together, unlike transform:scale which would just leave blank space. */
.csm-invoice-zoom-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: var(--csm-card-header-bg);
  border: 1px solid var(--csm-card-border);
  border-radius: 0.5rem;
}

.csm-invoice-zoom-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--csm-text);
  opacity: 0.85;
}

.csm-invoice-zoom-value {
  min-width: 3.6rem;
  font-weight: 700;
}

.csm-invoice-zoom-hint {
  font-size: 0.76rem;
}

/* ---------------- Receipt actions bar (screen only) ----------------
   Always shown below the zoom controls now (not just when Settings is set
   to a thermal size) - lets the width used by "Print (Receipt)", "Save as
   Image" and "Share" be picked right here, independent of the full A4
   invoice above and independent of whatever's saved in Settings. */
.csm-receipt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: var(--csm-card-header-bg);
  border: 1px solid var(--csm-card-border);
  border-radius: 0.5rem;
}

.csm-receipt-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.csm-receipt-actions-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--csm-text);
  opacity: 0.85;
}

@media print {
  .csm-invoice-table thead th,
  .csm-invoice-totals .csm-invoice-grandtotal { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Reclaim as much of the printed page as possible so invoices with
     many line items have the best chance of fitting on one page even
     before the manual size control is touched: tighter page margins,
     and every generous on-screen padding/margin/font-size inside the
     letterhead layout cut down to something print-appropriate. */
  @page { margin: 8mm 7mm; }

  .csm-invoice-letterhead { padding: 0 0 0.5rem; gap: 0.75rem; }
  .csm-invoice-logo, .csm-invoice-logo-fallback { height: 42px; width: 42px; min-height: 42px; }
  .csm-invoice-logo { width: auto; }
  .csm-invoice-shopname { font-size: 1.05rem; }
  .csm-invoice-contact { font-size: 0.72rem; margin-top: 0.15rem; line-height: 1.35; }
  .csm-invoice-doctitle { font-size: 1.3rem; }
  .csm-invoice-hr { margin: 0; }
  .csm-invoice-meta-row { padding: 0.6rem 0; gap: 0.75rem; }
  .csm-invoice-label { margin-bottom: 0.15rem; }
  .csm-invoice-docinfo { font-size: 0.78rem; }
  .csm-invoice-docinfo > div { margin-bottom: 0.12rem; }
  .csm-invoice-table { margin: 0; width: 100%; }
  .csm-invoice-table thead th { font-size: 0.68rem; padding: 0.3rem 0.5rem !important; }
  .csm-invoice-table td, .csm-invoice-table th { padding: 0.25rem 0.5rem !important; font-size: 0.82rem; }
  .csm-invoice-totals-wrap { padding: 0.5rem 0 0; }
  .csm-invoice-totals { font-size: 0.82rem; }
  .csm-invoice-totals .csm-invoice-grandtotal { padding: 0.4rem 0.6rem; margin: 0.25rem 0; }
  .csm-invoice-note { margin: 0.6rem 0 0; padding: 0.35rem 0.6rem; font-size: 0.82rem; }
  .csm-invoice-footer { margin: 0.75rem 0 0; padding: 0.4rem 0 0.2rem; font-size: 0.85rem; }
  .csm-invoice .pb-4 { padding-bottom: 0 !important; }
}

@media (max-width: 575.98px) {
  .csm-invoice-letterhead { flex-direction: column; }
  .csm-invoice-doctitle { text-align: left; }
  .csm-invoice-meta-row { flex-direction: column; }
  .csm-invoice-docinfo { text-align: left; }
  .csm-invoice-docinfo .csm-invoice-label { min-width: 0; margin-right: 0.4rem; }
  .csm-invoice-table { margin: 0 1rem; width: calc(100% - 2rem); }
}

/* ---------------- Compact thermal receipt (58mm / 80mm) ----------------
   Only ever present in the DOM when Settings -> Receipt Printing is set
   to a thermal size (sales/view.php decides server-side) - the full
   letterhead .csm-invoice above it is what shows on screen either way,
   so a cashier always reviews the same detailed view; this block is
   what actually prints instead of it. Always hidden on screen; the
   matching @page size/margin is set per-page via $inlineStyle (see
   includes/header.php + sales/view.php), which overrides the sitewide
   A4 @page rule above since it's declared later in the stylesheet
   cascade. Continuous roll paper has no fixed page height, so unlike
   the A4 invoice there is no "fit one page" control needed here - the
   receipt just prints as long as it needs to and the printer feeds/
   cuts after. */
.csm-receipt {
  display: none;
}

@media print {
  .csm-receipt {
    display: block;
    width: 100%;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #000;
  }
  .csm-receipt-center { text-align: center; }
  .csm-receipt-shopname { font-size: 13.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 1px; }
  .csm-receipt-hr { border: none; border-top: 1px solid #000; margin: 5px 0; }
  .csm-receipt-hr-dashed { border: none; border-top: 1px dashed #000; margin: 5px 0; }
  .csm-receipt-row { display: flex; justify-content: space-between; gap: 8px; }
  .csm-receipt-item-name { margin-top: 4px; font-weight: 700; }
  .csm-receipt-item-line { color: #000; }
  .csm-receipt-grandtotal { font-weight: 700; font-size: 12.5px; }
  .csm-receipt-note { margin-top: 4px; }

  /* The shared page title bar (e.g. "Invoice No: INV-...") sits above
     every page's content. It's useful in print for most pages (reports,
     statements, payslips etc.), but on the sale invoice page specifically
     it's pure repetition - the invoice number already appears in the A4
     letterhead, and the thermal receipt design doesn't have room for it
     - so it's dropped there only, on both print paths, via the
     .csm-invoice-page class that page always sets on <body>. */
  .csm-invoice-page .csm-page-header { display: none !important; }
}

/* Print styles for invoices */
@media print {
  .csm-no-print, .csm-topbar, .csm-sidebar, .csm-backdrop, .csm-bottom-nav { display: none !important; }
  .csm-main { padding: 0 !important; }
  body { background: #fff !important; }
  .card { border: none !important; box-shadow: none !important; }

  /* Printing (or exporting to PDF) while the session is in dark mode
     must not carry dark-mode colors onto paper: --csm-text and friends
     would otherwise still resolve to their near-white dark-mode values,
     leaving light-on-white, barely legible text. Force the light-mode
     values for anything printable back on, regardless of the active
     data-bs-theme - the chosen theme *color* (--csm-primary etc.) is
     untouched, so the printed invoice still prints in the shop's brand
     color, just always on a white, readable background. */
  html[data-bs-theme="dark"] {
    --csm-card-border: #e9edf2;
    --csm-card-header-bg: #ffffff;
    --csm-card-header-border: #eef1f5;
    --csm-text: #2b2f36;
    --csm-primary-light: #eaf1f8;
    --csm-table-hover: #f8fafc;
  }
}