/* =========================================================
   TechnoTrader - app.css
   Our additions on top of the Khamba theme (lib/khamba/css/style.css).
   Always build on the theme tokens: --bg --card --border --text
   --muted --hover --primary --r --shadow. Add new rules to the
   matching section below.

    1. Tokens + Bootstrap variable mapping
    2. Base helpers
    3. Shell (sidebar, topbar, location pill, theme toggle)
    4. Buttons
    5. Forms (inputs, labels, validation, sections, action bars)
    6. Lists & tables (filters, sortable headers, loading, pager)
    7. Status badges (+ dark variants)
    8. Empty / state cards
    9. Permission matrix
   10. Bootstrap components: modal, offcanvas, dropdown, tooltip, toast
   11. Confirm dialog
   12. Auth pages (login, setup wizard)
   13. Print + reduced motion
   14. Products
   15. Documents: line grid, totals panel, reason dialog, stock report
   16. Accounts: voucher lines, ledgers, outstanding, day book
   17. Reports & dashboard: report tabs, registers, profit, trial balance, GST, KPI tiles, chart
   18. Searchable dropdowns (Select2) in the theme's look
   19. Picture editor (Cropper.js) and branding
   20. Developer settings (PIN lock, feature switches) and racks
   ========================================================= */

/* ===== 1. Tokens + Bootstrap variable mapping ===== */
:root {
  --danger: #dc2626;
  --success: #059669;
  --warning: #d97706;
  --ring: rgba(79, 70, 229, .14);
  --ring-danger: rgba(220, 38, 38, .14);
  --check-bd: #c9ced6;
  /* Warehouse (indigo) and godown (green) tints */
  --wh-bg: #eef2ff;
  --wh-fg: #4338ca;
  --wh-bd: #c7d2fe;
  --gd-bg: #ecfdf5;
  --gd-fg: #047857;
  --gd-bd: #a7f3d0;
}

[data-bs-theme=dark] {
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --ring: rgba(129, 140, 248, .24);
  --ring-danger: rgba(248, 113, 113, .22);
  --check-bd: #3b414d;
  --wh-bg: #1e1b4b;
  --wh-fg: #a5b4fc;
  --wh-bd: #312e81;
  --gd-bg: #0d2a20;
  --gd-fg: #6ee7b7;
  --gd-bd: #14532d;
}

/* Point Bootstrap's own variables at the theme tokens so Bootstrap
   components (inputs, modals, dropdowns, tooltips) follow light/dark. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-body-font-family: var(--font);
  --bs-body-bg: var(--card);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--hover);
  --bs-tertiary-bg: var(--hover);
  --bs-focus-ring-color: var(--ring);
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
}

[data-bs-theme=dark] {
  --bs-link-color: #818cf8;
  --bs-link-color-rgb: 129, 140, 248;
  --bs-link-hover-color: #a5b4fc;
  --bs-link-hover-color-rgb: 165, 180, 252;
}

/* ===== 2. Base helpers ===== */
/* Bootstrap's grey (#6c757d) is too dark on the dark theme; use the theme's muted colour. */
.text-secondary {
  color: var(--muted) !important
}

.text-danger {
  color: var(--danger) !important
}

.text-success {
  color: var(--success) !important
}

.text-warning {
  color: var(--warning) !important
}

.num,
.text-num {
  font-variant-numeric: tabular-nums
}

.fw-semibold {
  font-weight: 600 !important
}

::selection {
  background: rgba(79, 70, 229, .2)
}

.page-head .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.card-head .sub {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px
}

/* Key / value rows (detail cards) */
.kv-list>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px
}

.kv-list>div:last-child {
  border-bottom: 0
}

.kv-list span {
  color: var(--muted)
}

.kv-list b {
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere
}

/* ===== 3. Shell ===== */
/* Logout in the sidebar is a <button form="logoutForm"> that looks like a link */
button.sb-link {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  text-align: left
}

.sb-link>span {
  overflow: hidden;
  text-overflow: ellipsis
}

.sb-link:focus-visible,
.sb-toggle:focus-visible,
.brand-link:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: -2px
}

/* Mobile: the theme's drawer shadow bled onto the page while the drawer was closed */
@media(max-width:991.98px) {
  .sidebar {
    box-shadow: none !important
  }

  body.drawer .sidebar {
    box-shadow: 0 0 40px rgba(0, 0, 0, .3) !important
  }
}

/* Collapse button arrow points the other way when collapsed */
.sb-toggle svg {
  transition: transform .25s
}

body.collapsed .sb-toggle svg {
  transform: scaleX(-1)
}

/* Location card at the bottom of the sidebar */
.loc-card>div {
  min-width: 0
}

.loc-card b {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis
}

.loc-card .logo svg {
  width: 16px;
  height: 16px
}

.loc-card.wh .logo {
  background: rgba(99, 102, 241, .3);
  color: #c7d2fe
}

.loc-card.gd .logo {
  background: rgba(16, 185, 129, .24);
  color: #6ee7b7
}

/* Topbar: company name + location pill (left), page search slot, actions (right) */
.tb-context {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 auto
}

.tb-company {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px
}

.topbar .search {
  margin-left: 8px
}

/* Company switch (topbar, the Super Admin only - decision 19): the company being worked in, or "All companies". The menu
   uses the financial-year menu's look (.fy-menu). */
.co-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: 320px;
  padding: 0 8px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer
}

.co-pill:hover,
.co-pill[aria-expanded=true] {
  background: var(--hover)
}

.co-pill:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring)
}

.co-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted)
}

.co-pill .co-text {
  overflow: hidden;
  text-overflow: ellipsis
}

.co-menu {
  max-height: 60vh;
  overflow-y: auto
}

@media (max-width: 575.98px) {
  .co-pill {
    max-width: 150px
  }
}

/* Financial-year switch (topbar): the year being worked in; a locked year shows a lock in amber. */
.fy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer
}

.fy-pill:hover,
.fy-pill[aria-expanded=true] {
  background: var(--hover)
}

.fy-pill:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring)
}

.fy-pill svg {
  width: 15px;
  height: 15px;
  color: var(--muted)
}

.fy-pill .fy-caret {
  width: 14px;
  height: 14px
}

.fy-pill.locked {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border))
}

.fy-pill .fy-lock {
  color: var(--warning)
}

.fy-menu {
  min-width: 250px;
  padding: 6px
}

.fy-menu .fy-head {
  padding: 6px 10px 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted)
}

.fy-menu .fy-none {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted)
}

.fy-menu .fy-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  border-radius: 8px
}

.fy-menu .fy-item .fy-code {
  font-weight: 700
}

.fy-menu .fy-item small {
  color: var(--muted);
  font-size: 11.5px
}

.fy-menu .fy-item svg {
  width: 15px;
  height: 15px
}

.fy-menu .fy-item.active,
.fy-menu .fy-item:active {
  background: var(--wh-bg);
  color: var(--wh-fg)
}

.fy-menu .fy-item.active small {
  color: inherit
}

.fy-menu .fy-manage {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px
}

.fy-menu .fy-manage svg {
  width: 15px;
  height: 15px
}

/* Banner while working in a closed or locked year (above the page). */
.fy-banner {
  align-items: center
}

.fy-banner>span {
  min-width: 0
}

/* Phones: the pill keeps only the year. */
@media (max-width: 575.98px) {
  .fy-pill .fy-pre,
  .fy-pill .fy-caret {
    display: none
  }
}

/* Location pill: warehouse = indigo, godown = green. Add .sm inside tables. */
.loc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  max-width: 100%;
  min-width: 0;
  padding: 0 10px;
  border-radius: 20px;
  border: 1px solid var(--wh-bd);
  background: var(--wh-bg);
  color: var(--wh-fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap
}

.loc-pill.gd {
  border-color: var(--gd-bd);
  background: var(--gd-bg);
  color: var(--gd-fg)
}

.loc-pill svg {
  width: 15px;
  height: 15px
}

.loc-pill .lp-text {
  overflow: hidden;
  text-overflow: ellipsis
}

.loc-pill em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7)
}

[data-bs-theme=dark] .loc-pill em {
  background: rgba(255, 255, 255, .08)
}

.loc-pill.sm {
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  gap: 5px
}

.loc-pill.sm svg {
  width: 13px;
  height: 13px
}

@media(max-width:575.98px) {
  .topbar {
    gap: 8px
  }

  .loc-pill {
    max-width: 150px
  }

  .loc-pill em {
    display: none
  }
}

/* Theme toggle shows the moon in light mode and the sun in dark mode */
.theme-toggle .ico-dark {
  display: none
}

[data-bs-theme=dark] .theme-toggle .ico-light {
  display: none
}

[data-bs-theme=dark] .theme-toggle .ico-dark {
  display: inline-block
}

/* User avatar (initials) */
.avatar {
  font-size: 14px;
  letter-spacing: .02em
}

[data-bs-theme=dark] .avatar {
  background: #1e1b4b;
  color: #a5b4fc
}

.um-head b {
  display: block;
  font-weight: 600
}

/* ===== 4. Buttons ===== */
.btn-soft,
.btn-dark-x {
  justify-content: center;
  white-space: nowrap;
  cursor: pointer
}

/* Anchors styled as buttons keep their colour on hover */
a.btn-soft:hover,
a.btn-soft:focus {
  color: var(--text)
}

a.btn-dark-x:hover,
a.btn-dark-x:focus {
  color: var(--card)
}

a.icon-btn:hover,
a.icon-btn:focus {
  color: var(--text)
}

.btn-danger-x {
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #fff;
  transition: .15s
}

.btn-danger-x:hover,
a.btn-danger-x:hover {
  opacity: .9;
  color: #fff
}

.btn-soft.text-danger:hover {
  background: rgba(220, 38, 38, .08)
}

/* Small variants */
.btn-soft.sm,
.btn-dark-x.sm,
.btn-danger-x.sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 9px
}

.btn-soft.sm svg,
.btn-dark-x.sm svg,
.btn-danger-x.sm svg,
.icon-btn.sm svg {
  width: 16px;
  height: 16px
}

/* Row delete buttons go red on hover */
.icon-btn.danger:hover {
  color: var(--danger);
  border-color: rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .07)
}

.btn-soft:disabled,
.btn-dark-x:disabled,
.btn-danger-x:disabled,
.icon-btn:disabled,
.auth-submit:disabled {
  opacity: .55;
  cursor: not-allowed
}

.btn-soft:focus-visible,
.btn-dark-x:focus-visible,
.btn-danger-x:focus-visible,
.icon-btn:focus-visible,
.pill-btn:focus-visible,
.avatar:focus-visible,
.pg button:focus-visible,
.auth-submit:focus-visible,
.tabs button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ring)
}

/* Busy state (form[data-loading] submit, data-post / data-delete buttons) */
.is-busy {
  pointer-events: none
}

.is-busy>svg.lucide {
  display: none
}

.is-busy .spinner-border {
  width: 15px;
  height: 15px;
  border-width: 2px;
  flex-shrink: 0
}

/* ===== 5. Forms ===== */
.form-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text)
}

.form-label.required::after {
  content: " *";
  color: var(--danger)
}

.form-control,
.form-select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--text);
  font-size: 14px
}

.form-control {
  padding: 8px 12px
}

.form-select {
  padding: 8px 36px 8px 12px
}

.form-control-sm,
.form-select-sm {
  min-height: 32px;
  font-size: 13px;
  border-radius: 8px;
  padding-top: 4px;
  padding-bottom: 4px
}

.form-control::placeholder {
  color: var(--muted);
  opacity: .8
}

.form-control:focus,
.form-select:focus,
.sel-x:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
  background-color: var(--card);
  color: var(--text);
  outline: 0
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--hover);
  color: var(--muted);
  opacity: 1
}

.form-text {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.form-text svg {
  width: 14px;
  height: 14px
}

.input-group-text {
  background: var(--hover);
  border-color: var(--border);
  color: var(--muted);
  font-size: 13px
}

/* Typed upper-case (GSTIN, codes): data-uppercase also upper-cases the value in site.js */
[data-uppercase] {
  text-transform: uppercase
}

[data-uppercase]::placeholder {
  text-transform: none
}

/* Checkboxes / radios. The theme sized every .form-check-input as a switch; restore normal boxes. */
.form-check-input {
  width: 18px;
  height: 18px;
  border-color: var(--check-bd);
  background-color: var(--card);
  cursor: pointer
}

.form-switch .form-check-input {
  width: 38px;
  height: 22px
}

.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring)
}

.form-check-label {
  cursor: pointer
}

/* Checkbox / radio + label (.form-check): 18px box centred on the first text line */
.form-check:not(.form-switch) {
  min-height: 21px;
  padding-left: 28px
}

.form-check:not(.form-switch) .form-check-input {
  margin-top: 1.5px;
  margin-left: -28px
}

/* Labelled switch: <div class="form-check form-switch"><input class="form-check-input" role="switch"><label class="form-check-label">.
   The theme sets .form-switch { padding-left: 0 } for its label-less switches (settings rows), so
   Bootstrap's floated input slid out of the box. Restore room for the 38x22 switch + a 10px gap.
   Label-less switches keep the theme behaviour. */
.form-check.form-switch:has(.form-check-label) {
  min-height: 22px;
  padding-left: 48px
}

.form-check.form-switch:has(.form-check-label) .form-check-input {
  margin-top: 0;
  margin-left: -48px
}

.form-check.form-switch:has(.form-check-label) .form-check-label {
  line-height: 22px
}

.chk-x {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer
}

/* Validation (ASP.NET Core tag helpers + jquery.validate.unobtrusive) */
.field-validation-error {
  display: block;
  margin-top: 5px;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 500
}

.field-validation-valid {
  display: none
}

.input-validation-error,
.input-validation-error:focus {
  border-color: var(--danger) !important
}

.input-validation-error:focus {
  box-shadow: 0 0 0 4px var(--ring-danger) !important
}

.validation-summary-errors ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.validation-summary-errors li+li {
  margin-top: 2px
}

.validation-summary-valid {
  display: none !important
}

/* Page-level alert (the auth pages use the theme's .auth-alert) */
.alert-x {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 13.5px
}

.alert-x>svg {
  width: 18px;
  height: 18px;
  margin-top: 1px
}

.alert-x.err {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c
}

.alert-x.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857
}

.alert-x.warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309
}

.alert-x.info {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca
}

[data-bs-theme=dark] .alert-x.err {
  background: #2a1414;
  border-color: #4c1d1d;
  color: #fca5a5
}

[data-bs-theme=dark] .alert-x.ok {
  background: #0d2a20;
  border-color: #14532d;
  color: #6ee7b7
}

[data-bs-theme=dark] .alert-x.warn {
  background: #2a2110;
  border-color: #4d3a12;
  color: #fcd34d
}

[data-bs-theme=dark] .alert-x.info {
  background: #1e1b4b;
  border-color: #312e81;
  color: #c7d2fe
}

.auth-alert.validation-summary-errors {
  align-items: flex-start
}

.auth-alert>svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px
}

/* Numbered / titled section header inside a form card */
.form-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border)
}

.form-section:not(:first-child) {
  margin-top: 28px
}

.form-section h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700
}

.form-section small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px
}

.form-section .fs-num,
.form-section .fs-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--hover);
  color: var(--text);
  font-size: 13px;
  font-weight: 700
}

.form-section .fs-ico svg {
  width: 16px;
  height: 16px
}

/* Save / Cancel row at the bottom of a form card */
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border)
}

/* Sticky action bar for long forms: put it OUTSIDE .card-x (cards clip overflow) */
.form-actionbar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, .08)
}

[data-bs-theme=dark] .form-actionbar {
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .45)
}

.form-actionbar .hint {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px
}

@media(max-width:575.98px) {

  .form-actions>.btn-soft,
  .form-actions>.btn-dark-x,
  .form-actionbar>.btn-soft,
  .form-actionbar>.btn-dark-x {
    flex: 1
  }

  .form-actionbar .hint {
    flex-basis: 100%
  }
}

/* Password field with show / hide eye */
.pw-wrap {
  position: relative
}

.pw-wrap .form-control {
  padding-right: 44px
}

.pw-wrap input::-ms-reveal,
.pw-wrap input::-ms-clear {
  display: none
}

.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 0 10px 10px 0
}

.pw-toggle:hover {
  color: var(--text)
}

.pw-toggle:focus-visible {
  outline: 0;
  color: var(--primary)
}

.pw-toggle svg {
  width: 17px;
  height: 17px
}

.pw-toggle .ico-hide,
.pw-wrap.is-shown .pw-toggle .ico-show {
  display: none
}

.pw-wrap.is-shown .pw-toggle .ico-hide {
  display: inline-block
}

/* ===== 6. Lists & tables ===== */
.card-x>.ord-filters:first-child {
  margin-top: 0
}

/* Flush list card: <div class="card-x p-0" data-list> - table runs edge to edge */
.card-x.p-0>.ord-filters {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border)
}

.card-x.p-0 .table-x th {
  border-radius: 0 !important
}

.card-x.p-0 .table-x th:first-child,
.card-x.p-0 .table-x td:first-child {
  padding-left: 20px
}

.card-x.p-0 .table-x th:last-child,
.card-x.p-0 .table-x td:last-child {
  padding-right: 20px
}

.card-x.p-0 .pg-bar {
  margin-top: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--border)
}

@media(max-width:575.98px) {
  .card-x.p-0>.ord-filters {
    padding: 14px 16px
  }

  .card-x.p-0 .pg-bar {
    padding: 12px 16px
  }
}

.sel-x {
  cursor: pointer
}

.ord-filters .sel-x {
  min-width: 130px
}

/* Many filters wrap onto a second row: keep the search box usable instead of shrinking it */
.ord-filters.flex-wrap .search {
  min-width: min(100%, 260px)
}

/* Hide the "/" hint once something is typed, and on touch screens */
.search input:not(:placeholder-shown)~kbd {
  display: none
}

@media(hover:none) {
  .search kbd {
    display: none
  }
}

@media(max-width:575.98px) {
  .ord-filters .search {
    max-width: none;
    flex: 1 1 100%
  }

  .ord-filters .sel-x {
    flex: 1 1 130px
  }
}

/* Table helpers */
.table-x th.num,
.table-x td.num,
.table-x th.text-end,
.table-x td.text-end {
  text-align: right;
  font-variant-numeric: tabular-nums
}

.table-x td.wrap {
  white-space: normal;
  min-width: 200px
}

.table-x td.actions {
  width: 1%;
  text-align: right
}

.table-x.no-min {
  min-width: 0
}

.table-x.dense td {
  padding-top: 9px;
  padding-bottom: 9px
}

.table-x tfoot td {
  font-weight: 700;
  background: var(--bg);
  border-bottom: 0
}

.row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px
}

/* Sortable headers: <th data-sort="Name">. site.js adds .sorted-asc / .sorted-desc */
.table-x th[data-sort] {
  --sort-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0 8 4.5H0zM4 12 0 7.5h8z'/%3E%3C/svg%3E");
  cursor: pointer;
  user-select: none;
  transition: color .15s
}

.table-x th[data-sort]:hover,
.table-x th.sorted-asc,
.table-x th.sorted-desc {
  color: var(--text)
}

.table-x th[data-sort]::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 11px;
  margin-left: 6px;
  vertical-align: -1px;
  background-color: currentColor;
  opacity: .35;
  -webkit-mask: var(--sort-ico) no-repeat center / contain;
  mask: var(--sort-ico) no-repeat center / contain
}

.table-x th.sorted-asc {
  --sort-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 3.5 8 8.5H0z'/%3E%3C/svg%3E")
}

.table-x th.sorted-desc {
  --sort-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M0 3.5h8L4 8.5z'/%3E%3C/svg%3E")
}

.table-x th.sorted-asc::after,
.table-x th.sorted-desc::after {
  opacity: .9
}

.table-x th[data-sort]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px
}

/* List loading state (data-list component) */
[data-list-body] {
  position: relative;
  transition: opacity .15s
}

[data-list].is-loading [data-list-body] {
  opacity: .5;
  pointer-events: none
}

/* First load: spinner instead of a faded empty box */
[data-list].is-loading:not(.is-ready) [data-list-body] {
  opacity: 1;
  min-height: 160px
}

[data-list].is-loading:not(.is-ready) [data-list-body]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: tt-spin .7s linear infinite
}

@keyframes tt-spin {
  to {
    transform: rotate(360deg)
  }
}

/* Pager (theme .pg-bar / .pg) */
.pg {
  align-items: center;
  flex-wrap: wrap
}

.pg button {
  min-width: 32px;
  width: auto;
  padding: 0 8px;
  display: inline-grid;
  place-items: center
}

.pg button svg {
  width: 16px;
  height: 16px
}

.pg-gap {
  min-width: 18px;
  text-align: center;
  color: var(--muted)
}

.pg-bar small b {
  font-weight: 600;
  color: var(--text)
}

/* ===== 7. Status badges ===== */
/* Theme statuses get dark variants; new statuses for this app added. */
.s-Active,
.s-Approved,
.s-Closed {
  background: #d1fae5;
  color: #047857
}

.s-Inactive,
.s-Draft {
  background: #e5e7eb;
  color: #374151
}

.s-Rejected {
  background: #fee2e2;
  color: #b91c1c
}

.s-Open {
  background: #dbeafe;
  color: #1d4ed8
}

.s-Partial {
  background: #fef3c7;
  color: #b45309
}

.s-Info,
.s-Warehouse {
  background: #e0e7ff;
  color: #4338ca
}

.s-Godown {
  background: #d1fae5;
  color: #047857
}

[data-bs-theme=dark] .s-Delivered,
[data-bs-theme=dark] .s-Active,
[data-bs-theme=dark] .s-Approved,
[data-bs-theme=dark] .s-Closed,
[data-bs-theme=dark] .s-Godown {
  background: #0d2a20;
  color: #34d399
}

[data-bs-theme=dark] .s-Pending,
[data-bs-theme=dark] .s-Low,
[data-bs-theme=dark] .s-Partial {
  background: #2a2110;
  color: #fbbf24
}

[data-bs-theme=dark] .s-Cancelled,
[data-bs-theme=dark] .s-Critical,
[data-bs-theme=dark] .s-Rejected {
  background: #2a1414;
  color: #f87171
}

[data-bs-theme=dark] .s-Processing,
[data-bs-theme=dark] .s-Open {
  background: #0f1d33;
  color: #60a5fa
}

[data-bs-theme=dark] .s-Shipped {
  background: #1f1633;
  color: #a78bfa
}

[data-bs-theme=dark] .s-Inactive,
[data-bs-theme=dark] .s-Draft {
  background: #242832;
  color: #cbd5e1
}

[data-bs-theme=dark] .s-Info,
[data-bs-theme=dark] .s-Warehouse {
  background: #1e1b4b;
  color: #a5b4fc
}

.badge-x.sm {
  font-size: 11px;
  padding: 2px 8px
}

.badge-x.no-dot:before {
  display: none
}

/* ===== 8. Empty / state cards ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
  color: var(--muted)
}

.empty-state .es-ico {
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--hover);
  color: var(--muted)
}

.empty-state .es-ico svg {
  width: 24px;
  height: 24px
}

.empty-state .es-ico.danger {
  background: #fee2e2;
  color: #b91c1c
}

[data-bs-theme=dark] .empty-state .es-ico.danger {
  background: #2a1414;
  color: #f87171
}

.empty-state .es-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted)
}

.empty-state .es-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text)
}

.empty-state p {
  max-width: 440px;
  margin: 0;
  font-size: 14px
}

.empty-state .es-meta {
  font-size: 12.5px
}

.empty-state .es-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px
}

.state-card {
  max-width: 560px;
  margin: 32px auto
}

.auth-card .state-card {
  margin: 0 0 8px
}

/* ===== 9. Permission matrix (godown rights) ===== */
.perm-matrix-wrap {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px
}

/* Inside a card the card already draws the frame */
.card-x>.perm-matrix-wrap {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0
}

.perm-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px
}

.perm-matrix th,
.perm-matrix td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--card)
}

.perm-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center
}

.perm-matrix th:first-child,
.perm-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left
}

.perm-matrix thead th:first-child {
  z-index: 3
}

.perm-matrix td:not(:first-child) {
  width: 84px;
  text-align: center
}

.perm-matrix thead th label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer
}

.perm-matrix tbody tr:hover td {
  background: var(--hover)
}

.perm-matrix tr.pm-group td,
.perm-matrix tr.pm-group:hover td {
  padding-top: 14px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left
}

.perm-matrix tbody tr:last-child td {
  border-bottom: 0
}

.perm-matrix .pm-module b {
  font-weight: 600
}

.perm-matrix .pm-module small {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.perm-matrix input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--primary);
  cursor: pointer
}

.perm-matrix input[type=checkbox]:disabled {
  opacity: .35;
  cursor: not-allowed
}

/* ===== 10. Bootstrap components (theme look + dark-mode fixes) ===== */
/* Modal */
.modal-content {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 24px 48px rgba(16, 24, 40, .18)
}

.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border)
}

.modal-title {
  font-size: 16px;
  font-weight: 600
}

.modal-body {
  padding: 20px
}

.modal-footer {
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border)
}

.modal-footer>* {
  margin: 0
}

.modal-backdrop.show {
  opacity: .45
}

[data-bs-theme=dark] .modal-content {
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55)
}

[data-bs-theme=dark] .modal-backdrop.show {
  opacity: .65
}

/* Offcanvas */
.offcanvas {
  --bs-offcanvas-border-color: var(--border);
  background: var(--card);
  color: var(--text)
}

.offcanvas-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border)
}

.offcanvas-title {
  font-size: 16px;
  font-weight: 600
}

/* Dropdown */
.dropdown-menu {
  color: var(--text)
}

.dropdown-divider {
  margin: 6px 0;
  border-top-color: var(--border);
  opacity: 1
}

.dropdown-item svg {
  width: 16px;
  height: 16px
}

.dropdown-item:focus {
  background: var(--hover);
  color: var(--text)
}

.dropdown-item:active,
.dropdown-item.active {
  background: var(--primary);
  color: #fff
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
  background: rgba(220, 38, 38, .08)
}

.dropdown-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

[data-bs-theme=dark] .dropdown-menu {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5)
}

/* Tooltip */
.tooltip {
  --bs-tooltip-font-size: 12.5px;
  font-family: var(--font)
}

/* Toasts (App.toast) */
.tt-toast-host {
  z-index: 1090
}

.tt-toast {
  --tt-accent: var(--primary);
  --bs-toast-max-width: 380px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tt-accent);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  font-size: 14px
}

.tt-toast .toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px
}

.tt-toast .toast-ico {
  color: var(--tt-accent);
  margin-top: 1px
}

.tt-toast .toast-msg {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere
}

.tt-toast .btn-close {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin: 3px 0 0 4px;
  padding: 4px;
  background-size: 10px;
  opacity: .45
}

.tt-toast-success {
  --tt-accent: var(--success)
}

.tt-toast-error {
  --tt-accent: var(--danger)
}

.tt-toast-warning {
  --tt-accent: var(--warning)
}

[data-bs-theme=dark] .tt-toast {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5)
}

[data-bs-theme=dark] .tt-toast-info {
  --tt-accent: #818cf8
}

/* ===== 11. Confirm dialog (App.confirm) ===== */
.confirm-x .modal-dialog {
  max-width: 420px
}

.confirm-x .modal-body {
  display: flex;
  gap: 14px;
  padding: 22px 22px 8px
}

.confirm-x .modal-footer {
  padding: 14px 22px 20px;
  border-top: 0
}

.confirm-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef2ff;
  color: var(--primary)
}

.confirm-x .ico-danger,
.confirm-x.is-danger .ico-normal {
  display: none
}

.confirm-x.is-danger .ico-danger {
  display: inline-block
}

.confirm-x.is-danger .confirm-ico {
  background: #fee2e2;
  color: #dc2626
}

[data-bs-theme=dark] .confirm-ico {
  background: #1e1b4b;
  color: #a5b4fc
}

[data-bs-theme=dark] .confirm-x.is-danger .confirm-ico {
  background: #2a1414;
  color: #f87171
}

.confirm-text {
  min-width: 0
}

.confirm-text .modal-title {
  margin: 2px 0 6px
}

.confirm-text p {
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: pre-line
}

/* ===== 12. Auth pages ===== */
.auth-art .brand-link {
  flex: 0 0 auto;
  align-self: flex-start
}

.auth-points {
  display: grid;
  gap: 18px;
  max-width: 420px;
  margin: 0;
  padding: 0;
  list-style: none
}

.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px
}

.auth-points .ap-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #c7d2fe
}

.auth-points b {
  display: block;
  font-weight: 600;
  color: #fff
}

.auth-points small {
  display: block;
  margin-top: 2px;
  color: #9aa1ae;
  font-size: 13px
}

.auth-card .form-control,
.auth-card .form-select {
  height: 44px;
  margin-bottom: 0;
  border-radius: 11px
}

.auth-card textarea.form-control {
  height: auto;
  min-height: 72px
}

.auth-card .form-text {
  font-size: 12px
}

.auth-field {
  margin-bottom: 16px
}

.auth-card label.auth-check {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer
}

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.auth-copy {
  margin-top: 28px;
  font-size: 12px
}

/* Wide card (setup wizard): ViewData["AuthWide"] = true */
.auth-card-wide {
  max-width: 820px
}

.auth-wide .auth-form-wrap {
  align-items: flex-start;
  padding: 40px 32px
}

.setup-step+.setup-step {
  margin-top: 32px
}

@media(min-width:992px) {
  .auth-wide .auth-art {
    position: sticky;
    top: 0;
    flex: 0 0 360px;
    align-self: flex-start;
    height: 100vh;
    padding: 40px
  }

  .auth-wide .auth-art h2 {
    font-size: 26px
  }
}

@media(min-width:1400px) {
  .auth-wide .auth-art {
    flex-basis: 440px
  }
}

@media(max-width:575.98px) {

  .auth-form-wrap,
  .auth-wide .auth-form-wrap {
    padding: 24px 16px
  }
}

/* ===== 13. Print + reduced motion ===== */
@media print {

  .sidebar,
  .backdrop,
  .topbar,
  .footer-x,
  .tt-toast-host,
  .form-actions,
  .form-actionbar,
  .page-head .actions,
  [data-print-hide],
  .ord-filters {
    display: none !important
  }

  .main,
  body.collapsed .main {
    margin-left: 0 !important
  }

  .content {
    padding: 0
  }

  .card-x {
    box-shadow: none
  }
}

@media(prefers-reduced-motion:reduce) {

  .sidebar,
  .main,
  .sb-toggle svg,
  [data-list-body] {
    transition: none
  }
}

/* ===== 14. Products ===== */
/* Thumbnail in the product list (an <img> using the theme's .thumb size) */
img.thumb.prod-thumb {
  object-fit: cover;
  padding: 0;
  background: var(--hover)
}

/* Picture preview on the product form */
.prod-image-box {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--hover);
  overflow: hidden
}

.prod-image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.prod-image-box span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

/* ===== 15. Documents: line grid, totals panel, reason dialog ===== */
/* Header extras */
.party-info {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted)
}

.party-info b.text-dr {
  color: var(--danger)
}

.party-info b.text-cr {
  color: var(--success)
}

.form-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px
}

.date-x {
  width: auto;
  min-width: 140px
}

.row-muted td {
  opacity: .55
}

.row-muted td.actions {
  opacity: 1
}

/* Line grid (wwwroot/js/doc-grid.js) */
.doc-grid-wrap {
  overflow-x: auto
}

.doc-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px
}

.doc-grid th {
  padding: 10px 6px;
  background: var(--hover);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border)
}

.doc-grid th:first-child {
  padding-left: 16px
}

.doc-grid td {
  padding: 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top
}

.doc-grid td:first-child {
  padding-left: 16px
}

.doc-grid .num {
  text-align: right
}

.doc-grid .g-no {
  width: 36px;
  padding-top: 14px;
  color: var(--muted);
  font-size: 12px
}

.doc-grid .g-product-cell {
  min-width: 220px
}

.doc-grid .g-batch {
  min-width: 150px
}

.doc-grid .g-grade {
  min-width: 110px
}

.doc-grid td.num {
  width: 1%
}

.doc-grid .g-in.g-qty {
  width: 58px
}

.doc-grid .g-in.g-rate {
  width: 88px
}

.doc-grid .g-in.g-disc {
  width: 56px
}

.doc-grid .g-act {
  width: 40px;
  padding-top: 9px;
  text-align: right
}

.doc-grid .g-in {
  width: 100%;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: 0;
  transition: border-color .12s, background .12s
}

.doc-grid td.num .g-in {
  text-align: right
}

/* Editable cells always show a light frame, so an empty quantity is easy to find */
.doc-grid .g-in:not([disabled]) {
  border-color: var(--border);
  background: var(--card)
}

.doc-grid tr:hover .g-in:not([disabled]) {
  border-color: var(--muted)
}

.doc-grid .g-in:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px var(--ring)
}

.doc-grid .g-in[disabled] {
  color: var(--muted)
}

.doc-grid select.g-in {
  padding-right: 4px;
  cursor: pointer
}

.doc-grid input[type=number].g-in {
  -moz-appearance: textfield
}

.doc-grid input[type=number].g-in::-webkit-outer-spin-button,
.doc-grid input[type=number].g-in::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.doc-grid .g-upper {
  text-transform: uppercase
}

.doc-grid .g-prod small {
  display: block;
  padding: 0 9px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35
}

.doc-grid .g-prod>b {
  display: block;
  padding: 7px 9px 0
}

.doc-grid .g-product {
  font-weight: 600
}

.doc-grid .g-fixed,
.doc-grid .g-muted {
  display: block;
  padding: 7px 9px;
  color: var(--muted)
}

.doc-grid .g-fixed {
  color: var(--text);
  font-weight: 500
}

.doc-grid .g-calc {
  padding-top: 13px;
  white-space: nowrap
}

.doc-grid .g-calc small {
  display: block;
  color: var(--muted);
  font-size: 11px
}

.doc-grid .g-strong {
  font-weight: 700
}

.doc-grid tr.is-over td {
  background: rgba(220, 38, 38, .06)
}

.doc-grid tr.is-over [data-f=boxes],
.doc-grid tr.is-over [data-f=pcs] {
  color: var(--danger);
  font-weight: 700
}

.transfer-header-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.transfer-header-grid > div { min-width:0; }
.transfer-header-grid .transfer-header-remark { grid-column:1 / -1; }
.transfer-header-grid .select2-container { width:100%!important; max-width:100%; }
.transfer-header-grid .transfer-location { min-height:40px; height:auto; font-weight:600; background:var(--hover); overflow-wrap:anywhere; }
@media (max-width:991.98px) { .transfer-header-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { .transfer-header-grid { grid-template-columns:minmax(0,1fr); } }

.doc-grid-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px
}

/* Transaction master shortcuts share the input row and a separate product toolbar. */
.doc-account-picker { display:flex; align-items:center; gap:8px; }
.doc-account-picker > select,
.doc-account-picker > .select2-container { flex:1 1 0; min-width:0; width:0!important; order:0; }
.doc-account-picker > .doc-account-add { order:1; width:40px; height:40px; }
.doc-product-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.doc-product-toolbar .btn-soft { white-space:nowrap; }
.doc-quick-modal iframe { display:block; width:100%; height:75vh; border:0; background:var(--bg); }
@media (max-width:575.98px) {
  .doc-quick-modal .modal-content { height:100%; }
  .doc-quick-modal .modal-body { display:flex; min-height:0; }
  .doc-quick-modal iframe { height:100%; flex:1; }
}

.doc-grid-foot .hint {
  color: var(--muted);
  font-size: 12px
}

.doc-grid-foot kbd,
.form-actionbar kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--hover);
  color: var(--text);
  font-size: 11px;
  box-shadow: none
}

/* Product picker list (appended to <body>) */
.g-menu {
  position: absolute;
  z-index: 1080;
  max-width: min(560px, 96vw);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .16)
}

[data-bs-theme=dark] .g-menu {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5)
}

.g-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer
}

.g-opt small {
  display: block;
  color: var(--muted);
  font-size: 11.5px
}

.g-opt.active,
.g-opt:hover {
  background: var(--hover)
}

.g-code {
  color: var(--muted);
  font-size: 12px
}

.g-stock {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gd-bg);
  color: var(--gd-fg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap
}

.g-stock.none {
  background: var(--hover);
  color: var(--muted)
}

.g-menu-empty {
  padding: 12px;
  color: var(--muted);
  text-align: center
}

/* Totals panel */
.doc-totals {
  position: sticky;
  top: 84px
}

.doc-totals .dt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px
}

.doc-totals .dt-row>span,
.doc-totals .dt-row>label {
  color: var(--muted)
}

.doc-totals .dt-input input,
.doc-totals .dt-input select {
  max-width: 150px;
  text-align: right
}

.doc-totals .dt-sep {
  margin: 8px 0;
  border-top: 1px dashed var(--border)
}

/* "GST on freight" tick under the freight box */
.doc-totals .dt-check {
  justify-content: flex-end;
  padding-top: 0
}

.doc-totals .dt-check .form-check-label {
  color: var(--muted);
  font-size: 12.5px
}

.doc-totals .dt-net {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--hover)
}

.doc-totals .dt-net span {
  font-weight: 600
}

.doc-totals .dt-net b {
  font-size: 20px;
  font-weight: 800
}

.doc-totals .dt-due b {
  font-weight: 700
}

/* Requested lines of a transfer (read-only list beside the approval grid) */
.req-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.req-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px
}

.req-list li:last-child {
  border-bottom: 0
}

.req-list small {
  display: block;
  color: var(--muted)
}

/* Kind switch (stock add / less, transfer type) */
.seg-x {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--hover)
}

.seg-x input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.seg-x label {
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer
}

.seg-x input:checked+label {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .1)
}

.seg-x input:focus-visible+label {
  box-shadow: 0 0 0 3px var(--ring)
}

.seg-x input:disabled+label {
  cursor: default
}

/* Reason dialog (App.prompt): the text box spans the dialog */
.confirm-x .prompt-field {
  margin-top: 12px
}

.confirm-x .prompt-field textarea {
  resize: vertical
}

/* Stock report */
.stock-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 13.5px
}

.stock-totals span {
  color: var(--muted)
}

.qty-cell small {
  display: block;
  color: var(--muted);
  font-size: 11.5px
}

.txt-in {
  color: var(--success)
}

.txt-out {
  color: var(--danger)
}

/* ===== 16. Accounts: voucher lines, ledgers, outstanding ===== */
.voucher-grid .v-account {
  min-width: 280px
}

.voucher-grid .v-info {
  display: block;
  min-height: 16px;
  padding: 2px 9px 0;
  color: var(--muted);
  font-size: 11.5px
}

.doc-grid tfoot td {
  padding: 12px 6px;
  border-top: 1px solid var(--border);
  border-bottom: 0
}

.doc-grid tfoot td:first-child {
  padding-left: 16px
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px
}

.stat-row .card-x small {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.stat-row .card-x b {
  font-size: 18px
}

.amt-dr {
  color: var(--danger)
}

.amt-cr {
  color: var(--success)
}

.ledger-table td.num,
.ledger-table th.num {
  white-space: nowrap
}

.ledger-table tr.row-total td {
  background: var(--hover);
  font-weight: 700
}

.daybook-doc td {
  background: var(--hover);
  font-weight: 600
}

.daybook-doc td small {
  font-weight: 400;
  color: var(--muted)
}

.age-cell {
  white-space: nowrap
}

.age-cell.zero {
  color: var(--muted)
}

/* ===== 17. Reports & dashboard ===== */
/* Stock report tabs: the theme's .tabs, as links */
.report-tabs {
  margin: 0 0 16px
}

.tabs a {
  color: var(--muted);
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none
}

.tabs a svg {
  width: 16px;
  height: 16px
}

.tabs a:hover {
  background: var(--hover);
  color: var(--text)
}

.tabs a.on {
  background: var(--text);
  color: var(--card)
}

.tabs a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ring)
}

/* Two filter rows in one list card: no rule between them */
.card-x.p-0>.ord-filters.joined {
  border-bottom: 0;
  padding-bottom: 0
}

.ord-filters input[type=month].sel-x {
  min-width: 150px
}

/* A long segmented switch (register "show by") scrolls inside itself on phones instead of pushing the filters wider */
.ord-filters .seg-x {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none
}

.ord-filters .seg-x::-webkit-scrollbar {
  display: none
}

.ord-filters .seg-x label {
  white-space: nowrap
}

/* Stock by location: location column headers */
.table-x th.loc-col {
  white-space: nowrap
}

/* Registers */
.register-table tfoot tr.register-gst-split td {
  border-top: 0;
  padding-top: 0;
  font-weight: 400
}

/* Profit: headline figures, products + statement side by side on wide screens */
.profit-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-bottom: 1px solid var(--border)
}

.profit-figures>div {
  padding: 16px 20px;
  border-right: 1px solid var(--border)
}

.profit-figures>div:last-child {
  border-right: 0
}

.profit-figures small {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.profit-figures b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: 2px
}

.profit-figures em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 12px
}

.profit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px
}

.profit-products {
  min-width: 0;
  border-right: 1px solid var(--border)
}

.profit-title {
  margin: 0;
  padding: 16px 20px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

.profit-statement .pl-table td {
  padding: 8px 20px
}

.pl-table td small {
  color: var(--muted)
}

.pl-table tr.pl-sub td {
  font-weight: 700;
  border-top: 1px solid var(--border)
}

.pl-table tr.pl-total td {
  font-weight: 800;
  font-size: 15px;
  background: var(--hover)
}

.profit-note {
  padding: 12px 20px 16px;
  margin: 0;
  color: var(--muted);
  font-size: 12px
}

@media (max-width: 1199.98px) {
  .profit-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .profit-products {
    border-right: 0;
    border-bottom: 1px solid var(--border)
  }
}

/* Trial balance */
.tb-table tr.tb-group td {
  background: var(--hover);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted)
}

.tb-table tr.tb-sub td {
  font-weight: 700;
  border-top: 1px solid var(--border)
}

.tb-table tr.tb-diff td {
  font-style: italic
}

.tb-table tr.tb-diff td small {
  font-style: normal
}

/* GST returns */
.gst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px
}

.gst-head h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700
}

.gst-head small {
  color: var(--muted)
}

.gst-section {
  border-top: 1px solid var(--border);
  padding-bottom: 6px
}

.gst-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 14px 20px 8px
}

.gst-section-head h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 700
}

.gst-section-head h6 small {
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px
}

.gst-note {
  margin: 0;
  padding: 8px 20px 12px;
  color: var(--muted);
  font-size: 12.5px
}

/* Dashboard: clickable KPI tiles and stats, list thumbs, empty lines */
.kpi-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease
}

.kpi-link:hover {
  color: inherit;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .08)
}

.kpi-link:focus-visible,
.stat-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ring)
}

.kpi .foot .badge-x svg {
  width: 12px;
  height: 12px
}

.stat-link {
  display: block;
  color: inherit;
  text-decoration: none
}

.stat-link:hover {
  color: inherit;
  background: var(--hover)
}

.dash-thumb {
  background: var(--hover);
  color: var(--muted)
}

.dash-thumb.warn {
  background: rgba(217, 119, 6, .12);
  color: var(--warning)
}

.row-item .end b {
  white-space: nowrap
}

.dash-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  color: var(--muted)
}

.dash-empty svg {
  width: 16px;
  height: 16px;
  color: var(--success)
}

/* Dashboard chart: series colours validated (dataviz checks) on the theme's card surfaces, light #fff and dark #14171d */
.dash-chart {
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --chart-grid: #eef0f3;
  --chart-axis: #dfe2e7;
  --chart-tick: #6b7280;
  --chart-tip: #111827;
  --chart-tip-text: #fff
}

[data-bs-theme=dark] .dash-chart {
  --series-1: #3987e5;
  --series-2: #d95926;
  --chart-grid: #242832;
  --chart-axis: #2f3440;
  --chart-tick: #9aa1ae;
  --chart-tip: #f3f4f6;
  --chart-tip-text: #111827
}

.dash-chart .legend {
  align-items: center;
  flex-wrap: wrap
}

.dash-chart .legend b {
  color: var(--text);
  font-weight: 600;
  margin-left: 2px
}

.dash-chart .legend small {
  color: var(--muted)
}

/* Legend keys mirror the mark: small squares for columns */
.dash-chart .legend i.key {
  width: 10px;
  height: 10px;
  border-radius: 2px
}

.dash-chart .legend i.key-1 {
  background: var(--series-1)
}

.dash-chart .legend i.key-2 {
  background: var(--series-2)
}

.dash-chart .seg button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring)
}

@media print {
  .report-tabs,
  .ord-filters .btn-soft,
  .ord-filters [data-list-pagesize],
  .ord-filters .search,
  .gst-head .btn-soft,
  .gst-section-head .btn-soft,
  .pg-bar {
    display: none !important
  }

  .profit-layout {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* ===== 18. Searchable dropdowns (Select2) ===== */
/* Every <select> is a Select2 box (site.js section 11). Variants by the select's class:
   .s2-form (.form-select), .s2-sm (.form-select-sm), .s2-filter (.sel-x in list filters), .s2-grid (.g-sel in line grids). */
.select2-container {
  font: inherit;
  max-width: 100%
}

.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  outline: 0
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1;
  min-width: 0;
  padding: 0 30px 0 12px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 8px;
  width: 18px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent transparent
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--muted) transparent
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring)
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background: var(--hover);
  cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection__rendered,
.select2-selection__rendered .s2-empty {
  color: var(--muted)
}

/* Dropdown */
.select2-dropdown {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  overflow: hidden;
  z-index: 1080
}

.select2-container--open .select2-dropdown--below {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 10px
}

.select2-container--open .select2-dropdown--above {
  margin-top: -4px;
  border-bottom: 1px solid var(--border);
  border-radius: 10px
}

.select2-search--dropdown {
  padding: 8px
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 13.5px;
  outline: 0
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring)
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 280px;
  padding: 0 4px 6px
}

.select2-results__option {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  line-height: 1.35
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--hover);
  color: var(--text)
}

.select2-container--default .select2-results__option--selected {
  background: var(--ring);
  color: var(--text);
  font-weight: 600
}

.select2-container--default .select2-results__option--disabled {
  color: var(--muted)
}

.select2-container--default .select2-results__group {
  padding: 8px 10px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em
}

.select2-results__message {
  color: var(--muted)
}

/* Sizes */
.select2-container.s2-filter {
  min-width: 140px;
  max-width: 280px
}

.select2-container.s2-filter .select2-selection--single,
.select2-container.s2-sm .select2-selection--single {
  font-size: 13px
}

.select2-container.s2-filter .select2-selection__rendered,
.select2-container.s2-sm .select2-selection__rendered {
  font-size: 13px
}

.select2-container.s2-sm .select2-selection--single {
  height: 32px;
  border-radius: 8px
}

.select2-container.s2-grid .select2-selection--single {
  height: 34px;
  border-radius: 8px
}

.select2-container.s2-grid .select2-selection__rendered {
  padding-left: 8px;
  font-size: 13px
}

.select2-container.s2-grid.select2-container--focus .select2-selection--single,
.select2-container.s2-grid.select2-container--open .select2-selection--single {
  box-shadow: 0 0 0 3px var(--ring)
}

.s2-grid-drop,
.s2-filter-drop {
  min-width: 220px
}

.auth-card .select2-container.s2-form .select2-selection--single {
  height: 44px;
  border-radius: 11px
}

/* Validation */
select.input-validation-error+.select2-container .select2-selection--single,
select.is-invalid+.select2-container .select2-selection--single {
  border-color: var(--danger)
}

select.input-validation-error+.select2-container--focus .select2-selection--single,
select.is-invalid+.select2-container--focus .select2-selection--single {
  box-shadow: 0 0 0 4px var(--ring-danger)
}

@media print {
  .select2-selection__arrow {
    display: none
  }
}

/* ===== 19. Picture editor (Cropper.js) and branding ===== */
/* Picture field (Views/Shared/_ImageField.cshtml) */
.img-field .img-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--hover);
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease
}

.img-field .img-box.photo {
  aspect-ratio: 4 / 3
}

.img-field .img-box.wide {
  aspect-ratio: 3 / 1;
  max-height: 140px
}

.img-field .img-box.icon {
  width: 112px;
  aspect-ratio: 1 / 1
}

.img-field .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.img-field .img-box.is-drop {
  border-color: var(--primary);
  background: var(--ring)
}

.img-field .img-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 8px
}

.img-field .img-empty svg {
  width: 22px;
  height: 22px
}

.img-field .img-empty small {
  font-size: 11.5px;
  opacity: .8
}

.img-field .img-box.icon .img-empty small {
  display: none
}

.img-field .img-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px
}

.img-field .img-info {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px
}

/* Editor modal */
.img-editor .ie-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px
}

.img-editor .ie-stage {
  height: min(62vh, 560px);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--hover);
  background-image: linear-gradient(45deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .04) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .04) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px
}

.img-editor .ie-stage img {
  display: block;
  max-width: 100%
}

.img-editor .ie-side {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.img-editor .ie-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600
}

.img-editor .ie-label b {
  color: var(--text);
  font-weight: 600
}

.img-editor .ie-chips,
.img-editor .ie-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.img-editor .ie-chips button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 600
}

.img-editor .ie-chips button.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--card)
}

.img-editor .ie-chips button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring)
}

.img-editor .ie-out {
  margin: auto 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hover);
  color: var(--text);
  font-size: 13px;
  font-weight: 600
}

@media (max-width: 991.98px) {
  .img-editor .ie-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .img-editor .ie-stage {
    height: 52vh
  }
}

/* Brand logo in the sidebar / sign-in panel when the Admin uploaded one */
.logo.logo-img {
  background: #fff;
  padding: 3px;
  overflow: hidden
}

.logo.logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

/* A wide logo (word mark) stands in for the name: on a white plate, as wide as the menu allows. */
.logo-wordmark {
  display: flex;
  align-items: center;
  height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 10px;
  background: #fff;
  border-radius: 10px
}

.logo-wordmark img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain
}

.logo-mini {
  display: none !important
}

@media(min-width:992px) {
  body.collapsed .sidebar .logo-wordmark {
    display: none
  }

  body.collapsed .sidebar .logo-mini {
    display: grid !important
  }
}

/* Settings: what the menu will look like */
.brand-preview .bp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sb);
  color: #fff
}

.brand-preview .bp-bar .brand {
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Number series */
.series-table td.font-monospace,
.series-table td .font-monospace {
  letter-spacing: .02em
}

.series-example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hover)
}

.series-example b {
  font-size: 17px
}

.series-example small {
  color: var(--muted)
}


/* ===== 20. Developer settings (PIN lock, feature switches) and racks ===== */
.dev-lock {
  max-width: 560px;
  padding: 28px
}

.dev-lock h5 {
  margin: 14px 0 4px;
  font-size: 16px
}

.dev-lock p {
  color: var(--muted);
  font-size: 13.5px
}

.dev-lock-ico,
.feat-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--hover);
  color: var(--text)
}

.dev-lock-ico svg,
.feat-ico svg {
  width: 19px;
  height: 19px
}

.feat-ico.on {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary)
}

.dev-pin {
  max-width: 360px
}

.dev-code {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hover);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word
}

.feat-list {
  padding-top: 4px;
  padding-bottom: 4px
}

.feat-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border)
}

.feat-row:last-child {
  border-bottom: 0
}

.feat-body {
  flex: 1;
  min-width: 0
}

.feat-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px
}

.feat-title h5 {
  margin: 0;
  font-size: 15px
}

.feat-body p {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--muted)
}

.feat-body p b {
  color: var(--text);
  font-weight: 600
}

.feat-body .feat-usage {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px
}

.feat-usage svg {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0
}

.feat-act {
  flex-shrink: 0
}

.feat-act .btn-soft,
.feat-act .btn-dark-x {
  white-space: nowrap
}

@media (max-width: 575.98px) {
  .feat-row {
    flex-wrap: wrap
  }

  .feat-act {
    width: 100%;
    padding-left: 54px
  }
}

/* ---------- Folding menu groups (sidebar) ---------- */
.sb-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s;
}
.sb-fold:hover,
.sb-sect.has-active > .sb-fold { color: #a3a9b5; }
.sb-fold:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
.sb-fold .sb-chev { width: 14px; height: 14px; transition: transform .2s; transform: rotate(-90deg); }
.sb-sect.open > .sb-fold .sb-chev { transform: none; }
.sb-items { display: none; }
.sb-sect.open > .sb-items { display: block; }
@media (min-width: 992px) {
  /* Icons only: no folding, every screen shows; the heading is the thin divider line. */
  body.collapsed .sb-items { display: block; }
  body.collapsed .sb-fold { pointer-events: none; }
}

/* A picture field below the form (narrow screens, the quick-add popup): a modest box, not a full-width 4:3 one. */
@media (max-width: 991.98px) {
  .img-field .img-box.photo { max-width: 360px; max-height: 240px; margin-inline: auto; }
}

/* Price List (decision 18): rates changed in place, saved as soon as the box is left. */
.price-table .pl-rate { width: 118px; margin-left: auto; text-align: right; }
.price-table .pl-rate.is-special { font-weight: 600; }
.price-table .pl-rate.is-saving { opacity: .6; }
.price-table .pl-rate.is-saved { border-color: var(--success); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--success) 22%, transparent); }
.price-table .pl-rate.is-error { border-color: var(--danger); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--danger) 18%, transparent); }
.price-table .pl-rate::placeholder { font-weight: 400; opacity: .55; }
/* A bill line whose rate is the party's special one (its price list). */
.doc-grid .g-in.g-rate.g-rate-party { font-weight: 600; color: var(--success); }
/* A bill line whose rate is the bill's named price list's (decision 31). */
.doc-grid .g-in.g-rate.g-rate-list { font-weight: 600; color: var(--bs-link-color); }

/* "Discount on all lines" on a sale invoice (decision 33), at the right of the grid's foot. */
.doc-disc-all { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.doc-disc-all label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.doc-disc-all label svg { width: 15px; height: 15px; color: var(--muted); }
.doc-disc-all .input-group { width: 176px; flex-wrap: nowrap; }
.doc-disc-all .input-group .form-control { text-align: right; }
.doc-disc-all .input-group > .btn-soft { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
@media (max-width: 575.98px) {
  .doc-disc-all { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------- Sales and Purchase stand out in the sidebar (decision 32) ---------- */
/* A tinted card with a coloured heading and icons: green for sales, amber for purchase (the sidebar is dark in both themes). */
.sb-sect.sb-hl {
  --hl: #34d399;
  --hl-soft: rgba(52, 211, 153, .10);
  --hl-line: rgba(52, 211, 153, .32);
  margin: 10px 0 6px;
  padding: 2px 4px 4px;
  border-radius: 12px;
  background: var(--hl-soft);
  border: 1px solid var(--hl-line);
}
.sb-sect.sb-hl-purchase { --hl: #fbbf24; --hl-soft: rgba(251, 191, 36, .09); --hl-line: rgba(251, 191, 36, .30); }
.sb-sect.sb-hl > .sb-group { color: var(--hl); padding: 10px 8px 6px; font-weight: 700; }
.sb-sect.sb-hl > .sb-fold:hover { color: #fff; }
.sb-sect.sb-hl .sb-link { color: #e5e7eb; }
.sb-sect.sb-hl .sb-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-sect.sb-hl .sb-link.active { background: rgba(255, 255, 255, .15); color: #fff; }
.sb-sect.sb-hl .sb-link i,
.sb-sect.sb-hl .sb-link svg { color: var(--hl); }
@media (min-width: 992px) {
  /* Icons only: the tinted card is the divider; the coloured icons stay. */
  body.collapsed .sb-sect.sb-hl { padding: 2px 0; margin: 8px 0; }
  body.collapsed .sb-sect.sb-hl > .sb-group { display: none; }
}

/* ---------- Stock Dashboard (decision 30) ---------- */
.sd-search { position: relative; padding: 18px 20px 0; }
.sd-search > i,
.sd-search > svg { position: absolute; left: 36px; top: calc(18px + 26px); transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.sd-search input {
  width: 100%; height: 52px; padding: 0 56px 0 50px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: 0; transition: .15s;
}
.sd-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); background: var(--card); }
.sd-search kbd {
  position: absolute; right: 34px; top: calc(18px + 26px); transform: translateY(-50%); padding: 1px 7px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--muted); font-size: 12px; box-shadow: none;
}
.card-x.p-0 > .ord-filters.sd-filters { border-bottom: 0; padding-bottom: 6px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip { position: relative; margin: 0; cursor: pointer; }
.sd-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sd-chip span {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; transition: .15s; white-space: nowrap;
}
.sd-chip:hover span { background: var(--hover); }
.sd-chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--ring); }
.sd-chip input:checked + span { background: var(--text); border-color: var(--text); color: var(--card); }
.sd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 8px 20px 16px; }
.sd-tile { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.sd-tile .val { font-size: 26px; margin: 8px 0 8px; }
.sd-tile.is-on { box-shadow: 0 0 0 2px var(--text); }
.sd-tile .foot { min-width: 0; }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 0 20px 20px; }
.sd-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--card); border-left: 4px solid var(--success);
}
.sd-card.st-low { border-left-color: var(--warning); }
.sd-card.st-out { border-left-color: var(--border); }
.sd-card.st-below { border-left-color: var(--danger); }
.sd-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.sd-img {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--hover); color: var(--muted);
}
.sd-img img { width: 100%; height: 100%; object-fit: cover; }
.sd-img svg { width: 22px; height: 22px; }
.sd-name { min-width: 0; }
.sd-name b { display: block; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-name small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-qty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sd-big { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sd-card.st-out .sd-big { color: var(--muted); }
.sd-card.st-below .sd-big { color: var(--danger); }
.sd-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: -4px; color: var(--muted); font-size: 12px; }
.sd-sub:empty { display: none; }
.sd-places { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--border); display: grid; gap: 6px; font-size: 13px; }
.sd-places li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sd-place {
  display: inline-grid; place-items: center; min-width: 36px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: var(--wh-bg); color: var(--wh-fg); border: 1px solid var(--wh-bd);
}
.sd-place.gd { background: var(--gd-bg); color: var(--gd-fg); border-color: var(--gd-bd); }
.sd-lots { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.sd-place + b + .sd-lots { padding-left: 42px; }
.sd-lot { display: inline-flex; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--hover); font-size: 12px; color: var(--muted); }
.sd-lot b { color: var(--text); font-weight: 600; }
.sd-lot.neg b { color: var(--danger); }
.sd-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--muted); }
.sd-foot b { color: var(--text); font-weight: 600; }
.sd-card-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sd-card-link svg { width: 14px; height: 14px; }
.sd-wrap .empty-state { margin: 0 20px 20px; }
@media (max-width: 991.98px) {
  .sd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .sd-search { padding: 14px 16px 0; }
  .sd-search > i, .sd-search > svg { left: 32px; top: calc(14px + 26px); }
  .sd-search kbd { display: none; }
  .sd-search input { padding-right: 16px; }
  .sd-tiles { padding: 8px 16px 14px; gap: 10px; }
  .sd-tile .val { font-size: 22px; }
  .sd-grid { padding: 0 16px 16px; grid-template-columns: minmax(0, 1fr); }
}