/* =====================================================================
   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;
    z-index: 1040;
    margin-left: calc(-1 * var(--csm-sidebar-width));
    box-shadow: 2px 0 10px rgba(0,0,0,0.15);
  }
  .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; }
}

/* ---------------- 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;
}

/* ---------------- 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); }

/* ---------------- 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;
}

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

@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); }
}

/* Print styles for invoices */
@media print {
  .csm-no-print, .csm-topbar, .csm-sidebar, .csm-backdrop { 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;
  }
}