/* JSKD ERP — application theme on top of Bootstrap 5.3 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/inter/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  --app-primary: #2563eb;
  --app-primary-dark: #1d4ed8;
  --app-accent: #0ea5e9;
  --app-gradient: linear-gradient(135deg, #1e3a8a 0%, #2563eb 65%, #3b82f6 100%);

  --app-bg: #f4f6fb;
  --app-surface: #ffffff;
  --app-border: #e6e9f2;
  --app-text: #1e293b;
  --app-muted: #64748b;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);

  --menu-bg: #1e3a8a;
  --menu-text: #fff;
  --radius: 14px;

  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--app-primary-dark);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: .925rem;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-bg);
  --bs-border-color: var(--app-border);
  --bs-border-radius: .6rem;
}

[data-bs-theme='dark'] {
  --app-bg: #0b1120;
  --app-surface: #131c31;
  --app-border: #23304d;
  --app-text: #e2e8f0;
  --app-muted: #94a3b8;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --menu-bg: #172554;
  --bs-link-color: #93c5fd;
  --bs-link-color-rgb: 147, 197, 253;
  --bs-link-hover-color: #bfdbfe;
}

/* Every size in this file is in rem, so this one value scales all text (and spacing) together. */
html { font-size: 112.5%; }

body {
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

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

/* ---------- Buttons & forms ---------- */

.btn { font-weight: 600; padding: .55rem 1.1rem; }
.btn-sm { padding: .35rem .75rem; }

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-muted);
  font-size: 1.1rem;
}
.btn-icon:hover { color: var(--app-primary); border-color: var(--app-primary); }

.form-control, .form-select {
  padding: .6rem .85rem;
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.pi-date-input { border-radius: var(--bs-border-radius) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.form-label { font-weight: 600; font-size: .85rem; }
/* number boxes are typed into: no up/down arrows (the mouse wheel is switched off in app.js) */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ---------- date boxes and their calendar (calendar.js) ---------- */
.date-box { cursor: pointer; background-color: var(--app-surface) !important; }
.cal {
  position: fixed;
  z-index: 2000;   /* above entry popups */
  width: 22rem;
  padding: .75rem;
  background: var(--app-surface);
  border: 2px solid var(--app-primary);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .28);
  color: var(--app-text);
}
.cal button { border: 0; background: transparent; color: inherit; font: inherit; }
.cal-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
.cal-title { flex: 1; text-align: center; font-size: 1.1rem; font-weight: 700; }
.cal-nav { width: 2.3rem; height: 2.3rem; border-radius: 8px; font-size: 1.4rem; line-height: 1; color: var(--app-primary) !important; }
.cal-nav:hover, .cal-link:hover { background: rgba(37, 99, 235, .12); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; }
.cal-day-name { text-align: center; font-size: .8rem; font-weight: 700; color: var(--app-muted); padding: .2rem 0; }
.cal-day { height: 2.6rem; border-radius: 8px; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day:hover { background: rgba(245, 158, 11, .25); }
.cal-day.is-other { color: var(--app-muted); font-weight: 400; opacity: .6; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--app-primary); }
.cal-day.is-picked, .cal-day.is-picked:hover { background: var(--app-primary); color: #fff; opacity: 1; }
.cal-foot { display: flex; justify-content: space-between; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--app-border); }
.cal-link { padding: .3rem .9rem; border-radius: 8px; font-weight: 700; color: var(--app-primary) !important; }
[data-bs-theme='dark'] .cal-nav, [data-bs-theme='dark'] .cal-link { color: #93c5fd !important; }

/* ---------- journal voucher entry, laid out like Tally's voucher screen (journal.js) ---------- */
.tally { overflow: hidden; background: #f4f9fd; }
[data-bs-theme='dark'] .tally { background: #101a2e; }
.tally-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding: .55rem 1.25rem;
  background: var(--menu-bg);
  color: #fff;
}
.tally-kind { font-size: 1.15rem; font-weight: 800; }
.tally-kind span { margin-left: .6rem; padding: .1rem .6rem; border-radius: 6px; background: rgba(255, 255, 255, .18); font-size: .9rem; font-weight: 700; }
.tally-ref { display: flex; align-items: center; gap: .5rem; margin: 0 auto 0 0; font-size: .85rem; font-weight: 600; }
.tally-ref .form-control { width: 15rem; padding: .3rem .6rem; }
.tally-date { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.tally-date .form-control { width: 9.5rem; padding: .3rem .6rem; font-weight: 700; text-align: center; }
.tally-table { --bs-table-bg: transparent; font-size: 1rem; }
.tally-table th {
  padding: .45rem 1.25rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(100, 116, 139, .55);
  background: rgba(100, 116, 139, .2);
}
.tally-table td { padding: .3rem 1.25rem; border: 0; vertical-align: top; }
/* a line between the columns, as on the paper voucher */
.tally-table th + th, .tally-table td + td { border-left: 1px solid rgba(100, 116, 139, .4); padding-left: .6rem; padding-right: .6rem; }
.tally-table tbody tr:first-child td { padding-top: .6rem; }
.tally-table tbody tr:last-child td { padding-bottom: 1.5rem; }
.tally-table tfoot td { padding-top: .5rem; padding-bottom: .5rem; border-top: 2px solid rgba(100, 116, 139, .55); background: rgba(100, 116, 139, .2); font-weight: 800; vertical-align: middle; }
.tally-table .form-select-sm, .tally-table .form-control-sm { font-size: 1rem; padding-top: .3rem; padding-bottom: .3rem; }
.tally-table input[type=number] { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the amount box of the other side: shut, and no more than a faint outline */
.tally-table input[type=number]:disabled { background: transparent; border-style: dashed; opacity: .45; }
.tally-side { flex: 0 0 4.6rem; width: 4.6rem; font-weight: 800; }
.tally-foot { padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--app-border); }
.tally-narration { display: flex; align-items: flex-start; gap: .75rem; margin: 0; }
.tally-narration span { padding-top: .5rem; font-weight: 700; white-space: nowrap; }
.tally-keys { font-size: .78rem; color: var(--app-muted); }

/* field name on the left, box beside it */
.field-inline { display: flex; align-items: flex-start; gap: .6rem; }
.field-inline > .form-label { flex: 0 0 6.2rem; margin: 0; padding-top: .55rem; white-space: nowrap; }
.field-inline-body { flex: 1; min-width: 0; }
.field-inline .form-control, .field-inline .form-select { padding-top: .45rem; padding-bottom: .45rem; }
.field-inline .form-text:empty { display: none; }
/* a field set apart from those around it: its name bold, its box tinted with a stronger edge */
.field-mark .form-label { font-weight: 700; }
.field-mark .form-control, .field-mark .form-select { border-color: rgba(245, 158, 11, .9); background-color: rgba(245, 158, 11, .14); font-weight: 600; }
/* the same, very lightly: a faint tint and edge, and the box rounded at its ends */
.field-mark-soft .form-control, .field-mark-soft .form-select { border-color: rgba(245, 158, 11, .45); background-color: rgba(245, 158, 11, .06); border-radius: 999px; padding-left: .9rem; padding-right: .9rem; }
/* by its line alone: a green edge and rounded ends, with no tint in the box. The edge and the figure
   turn red where what is typed is more than the store has (over-stock, see chem.js). */
.field-mark-line .form-control, .field-mark-line .form-select { border: 2px solid #16a34a; border-radius: 999px; }
.field-mark-line .form-control:focus, .field-mark-line .form-select:focus { border-color: #16a34a; box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .2); }
.field-mark-line .over-stock, .field-mark-line .over-stock:focus { border-color: var(--bs-danger); color: var(--bs-danger); font-weight: 700; }
.field-mark-line .over-stock:focus { box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .2); }
.field-mark-line .stock-note { margin-top: .1rem; font-size: .7rem; font-weight: 600; color: var(--bs-danger); white-space: nowrap; }
/* a block of inline fields whose names are long ("Supplier name *"): more room for the name, so the boxes line up */
.fields-wide-label .field-inline > .form-label { flex-basis: 7.6rem; }
/* ... and longer still ("Last shipment date") */
.fields-xwide-label .field-inline > .form-label { flex-basis: 9.5rem; }
/* four boxes on one line (an issue's batch, client, recipe and date): a label is as wide as its words */
.fields-fit-label .field-inline > .form-label { flex-basis: auto; }
/* a list of things to tick (the proforma invoices of an LC): side by side, a few to a line */
.check-list > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .3rem 1rem; padding: .5rem .75rem; border: 1px solid var(--app-border); border-radius: .6rem; max-height: 12rem; overflow-y: auto; }
.check-list > div label { display: flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; }
/* a block of inline fields with lower rows */
.fields-tight .form-control, .fields-tight .form-select { padding-top: .22rem; padding-bottom: .22rem; }
.fields-tight .field-inline > .form-label { padding-top: .3rem; }
.header-date { display: flex; align-items: center; gap: .6rem; }
.date-locked {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border: 1px solid var(--app-border);
  border-radius: .6rem;
  background: rgba(100, 116, 139, .1);
  font-weight: 700;
}
.date-locked i { color: var(--app-muted); font-size: .8rem; }
/* The AI assistant's page: a note, the conversation (the technician's questions on the right, the
   answers on the left), and the box the question is typed in at the foot. */
.assistant-card { display: flex; flex-direction: column; gap: .75rem; }
.assistant-note { padding: .5rem .75rem; border-radius: .6rem; background: rgba(37, 99, 235, .08); color: var(--app-muted); font-size: .85rem; }
.assistant-talk { display: flex; flex-direction: column; gap: .6rem; min-height: 16rem; max-height: 58vh; overflow-y: auto; padding: .25rem; }
.assistant-empty { margin: auto; max-width: 34rem; text-align: center; color: var(--app-muted); }
.assistant-bubble { max-width: 85%; padding: .6rem .85rem; border-radius: .9rem; font-size: .92rem; overflow-wrap: anywhere; }
.assistant-bubble p { margin: 0 0 .4rem; }
.assistant-bubble p:last-child, .assistant-bubble ul:last-child, .assistant-bubble ol:last-child { margin-bottom: 0; }
.assistant-bubble ul, .assistant-bubble ol { margin: 0 0 .4rem; padding-left: 1.25rem; }
.assistant-user { align-self: flex-end; background: var(--app-primary); color: #fff; border-bottom-right-radius: .25rem; }
.assistant-assistant { align-self: flex-start; background: rgba(100, 116, 139, .14); border-bottom-left-radius: .25rem; }
.assistant-error { align-self: flex-start; background: rgba(220, 38, 38, .12); color: #b91c1c; }
[data-bs-theme='dark'] .assistant-error { color: #fca5a5; }
.assistant-heading { margin: .5rem 0 .25rem; font-weight: 800; }
.assistant-heading:first-child { margin-top: 0; }
.assistant-used { margin-top: .35rem; font-size: .75rem; opacity: .8; }
.assistant-form { padding-top: .5rem; border-top: 1px solid var(--app-border); }

/* a locked box that keeps to one line: a name too long for it (a party's) is cut off at its right edge */
.date-locked.locked-one-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.order-free { color: #16a34a !important; font-weight: 600; }
.order-taken { color: #dc2626 !important; font-weight: 600; }

/* ---------- Layout ---------- */

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-content { flex: 1; width: 100%; margin: 0 auto; padding: .15rem 1.25rem 1.5rem; }

.app-footer {
  padding: 1rem 1.75rem;
  color: var(--app-muted);
  font-size: .8rem;
  border-top: 1px solid var(--app-border);
  text-align: center;
}

/* ---------- Header ---------- */

.app-header { position: sticky; top: 0; z-index: 1030; box-shadow: 0 4px 18px rgba(15, 23, 42, .08); }

.header-top {
  height: 34px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}
.header-top .brand { gap: .55rem; white-space: nowrap; }
.header-top .brand-mark { width: 22px; height: 22px; border-radius: 6px; font-size: .75rem; box-shadow: none; }
.header-top .brand-name { font-size: .95rem; }
.header-top .btn-icon { width: 24px; height: 24px; border-radius: 6px; font-size: .8rem; }
.header-top .avatar { width: 22px; height: 22px; font-size: .6rem; }
.header-top .user-menu { gap: .45rem; padding: 0; white-space: nowrap; }
.brand-logo { height: 22px; width: auto; max-width: 120px; object-fit: contain; }

.brand { display: flex; align-items: center; gap: .75rem; color: var(--app-text); text-decoration: none; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--app-gradient);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .4);
}
.brand-name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { font-size: .7rem; color: var(--app-muted); font-weight: 500; }

/* ---------- Main menu ---------- */

.app-menu { background: var(--menu-bg); padding: 0 .75rem; }
.app-menu .navbar-nav { gap: .15rem; padding: .25rem 0; }
.app-menu .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--menu-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.app-menu .nav-link i { font-size: 1rem; }
.app-menu .nav-link:hover,
.app-menu .nav-link.show { color: #fff; background: rgba(255, 255, 255, .14); }
.app-menu .nav-link.active {
  color: #1e3a8a;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.app-menu .dropdown-toggle::after { margin-left: .15rem; opacity: .7; }
.app-menu .dropdown-menu { min-width: 250px; margin-top: 0; }
.app-menu .dropdown-item { display: flex; align-items: center; font-size: .875rem; }
.app-menu .dropdown-item i { color: var(--app-primary); width: 1.25rem; }
.app-menu .dropdown-item:hover { background: rgba(37, 99, 235, .08); color: var(--app-primary); }
[data-bs-theme='dark'] .app-menu .dropdown-item i,
[data-bs-theme='dark'] .app-menu .dropdown-item:hover { color: #93c5fd; }

/* second-level menu: flies out beside its parent on desktop, sits indented below it on mobile */
.submenu { position: relative; }
.submenu-toggle { cursor: default; }
.submenu-arrow { margin: 0 0 0 auto !important; width: auto !important; font-size: .7rem; color: var(--app-muted) !important; }
.submenu > .dropdown-menu { position: static; display: block; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 1.5rem; background: transparent; }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--app-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  flex-shrink: 0;
}
.user-menu {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .25rem;
  color: var(--app-text);
  text-align: left;
}
.user-menu .user-name { font-weight: 600; font-size: .85rem; }
.user-menu .user-role {
  font-size: .68rem;
  font-weight: 600;
  color: var(--app-primary);
  background: rgba(37, 99, 235, .1);
  border-radius: 999px;
  padding: .1rem .5rem;
}
[data-bs-theme='dark'] .user-menu .user-role { color: #93c5fd; }

.dropdown-menu {
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: var(--app-shadow);
  padding: .4rem;
  background: var(--app-surface);
}
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; }
.dropdown-item i { margin-right: .5rem; color: var(--app-muted); }

.breadcrumb { font-size: .8rem; margin-bottom: 0; }
.breadcrumb a { text-decoration: none; }

/* ---------- Cards & page elements ---------- */

.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow);
}

.page-header { margin-bottom: .4rem; }
.page-header h1 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0; }

.data-table { --bs-table-bg: transparent; font-size: .9rem; }
.data-table th {
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-muted);
  padding: .75rem .7rem;
  border-bottom: 1px solid var(--app-border);
}
.data-table td { padding: .5rem .7rem; vertical-align: middle; border-color: var(--app-border); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.pi-list-table thead th { background-color: #e9eef7; }
[data-bs-theme='dark'] .pi-list-table thead th { background-color: #1d2a42; }
.data-table tbody td { transition: background-color .15s ease; }
.data-table tbody tr:hover { --bs-table-bg-state: #ffe4e6; }
.data-table tbody tr:hover > td { background-color: #ffe4e6; box-shadow: inset 0 0 0 9999px #ffe4e6; }
[data-bs-theme='dark'] .data-table tbody tr:hover { --bs-table-bg-state: #4a2630; }
[data-bs-theme='dark'] .data-table tbody tr:hover > td { background-color: #4a2630; box-shadow: inset 0 0 0 9999px #4a2630; }
.data-table tbody tr:nth-child(even) td { background: rgba(100, 116, 139, .07); }
.data-table tbody tr:hover td { background: rgba(37, 99, 235, .09); }
.tracking-table td.tracking-edit-cell { cursor: pointer; }
.tracking-table td.tracking-edit-cell:hover { box-shadow: inset 0 -2px rgba(37, 99, 235, .55); }
.tracking-head { border-bottom-width: 2px !important; }
.tracking-head.tracking-party { color: #1d4ed8; background: rgba(59, 130, 246, .08); }
.tracking-head.tracking-bank { color: #6d28d9; background: rgba(139, 92, 246, .09); }
.tracking-head.tracking-maturity { color: #a16207; background: rgba(245, 158, 11, .11); }
.tracking-head.tracking-payment { color: #047857; background: rgba(16, 185, 129, .1); }
.tracking-date { display: inline-block; padding: .12rem .42rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.tracking-date.tracking-party { color: #1d4ed8; background: rgba(59, 130, 246, .1); }
.tracking-date.tracking-bank { color: #6d28d9; background: rgba(139, 92, 246, .12); }
.tracking-date.tracking-maturity { color: #a16207; background: rgba(245, 158, 11, .14); }
.tracking-date.tracking-payment { color: #047857; background: rgba(16, 185, 129, .12); }
.tracking-payment-overdue { display: inline-block; padding: .12rem .42rem; border-radius: 999px; color: #b91c1c; background: rgba(239, 68, 68, .14); font-size: .82rem; font-weight: 700; }
.tracking-payment-normal { color: var(--app-text); font-size: .82rem; font-weight: 600; }
.tracking-payment-received { display: inline-block; padding: .12rem .42rem; border-radius: 999px; color: #047857; background: rgba(16, 185, 129, .12); font-size: .82rem; font-weight: 600; }
.tracking-elapsed { display: inline-block; margin-top: .08rem; font-size: .62rem; font-weight: 600; white-space: nowrap; }
.tracking-table { width: 100%; min-width: 0; table-layout: fixed; font-size: .75rem; }
.tracking-table thead th { background-color: #e1e7f0; }
[data-bs-theme='dark'] .tracking-table thead th { background-color: #26344b; }
.tracking-table th, .tracking-table td { padding-left: .22rem; padding-right: .22rem; }
.tracking-table th { white-space: normal; line-height: 1.15; font-size: .68rem; }
.tracking-table th:nth-child(1), .tracking-table td:nth-child(1) { width: 3%; }
.tracking-table th:nth-child(2), .tracking-table td:nth-child(2) { width: 6%; }
.tracking-table th:nth-child(3), .tracking-table td:nth-child(3) { width: 6%; }
.tracking-table th:nth-child(4), .tracking-table td:nth-child(4) { width: 6%; }
.tracking-table th:nth-child(5), .tracking-table td:nth-child(5) { width: 12%; }
.tracking-table th:nth-child(6), .tracking-table td:nth-child(6) { width: 11%; }
.tracking-table th:nth-child(7), .tracking-table td:nth-child(7) { width: 6%; }
.tracking-table th:nth-child(8), .tracking-table td:nth-child(8) { width: 7%; }
.tracking-table th:nth-child(9), .tracking-table td:nth-child(9) { width: 9%; }
.tracking-table th:nth-child(10), .tracking-table td:nth-child(10) { width: 7%; }
.tracking-table th:nth-child(11), .tracking-table td:nth-child(11) { width: 7%; }
.tracking-table th:nth-child(12), .tracking-table td:nth-child(12) { width: 7%; }
.tracking-table th:nth-child(13), .tracking-table td:nth-child(13) { width: 6%; }
.tracking-table th:nth-child(14), .tracking-table td:nth-child(14) { width: 7%; }
.tracking-table td:nth-child(5), .tracking-table td:nth-child(6), .tracking-table td:nth-child(7) {
  overflow: hidden; text-overflow: ellipsis;
}
.tracking-table .btn-action { width: 17px; height: 20px; }
.tracking-table td:last-child { padding-right: .35rem; }
.tracking-date-entry .date-box { width: 100%; min-height: 2.5rem; cursor: pointer; }
.tracking-modal-dialog { margin: 4vh auto 1rem; }
@media (max-width: 575.98px) { .tracking-modal-dialog { margin: 1rem .5rem; } }
.tracking-modal-head { flex: 1; min-width: 0; }
.tracking-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: .45rem; }
.tracking-summary > div { display: flex; align-items: baseline; gap: .3rem; min-width: 0; padding: .32rem .45rem; border: 1px solid var(--app-border); border-radius: 7px; background: rgba(100, 116, 139, .06); }
.tracking-summary span { flex: 0 0 auto; color: var(--app-muted); font-size: .68rem; }
.tracking-summary strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.data-table .row-group td { font-weight: 700; background: rgba(100, 116, 139, .06); }
.data-table .row-group i { color: var(--app-primary); }

.btn-action {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  text-decoration: none;
}
/* the buttons of a table row set close together: no space between them, and each a little narrower */
.row-actions { display: inline-flex; align-items: center; vertical-align: middle; }
.row-actions .btn-action { width: 24px; }
/* tree rows: one colour per main group, fading as the level gets deeper */
.tone-row-asset { --row-tone: 37, 99, 235; }
.tone-row-expense { --row-tone: 244, 63, 94; }
.tone-row-income { --row-tone: 16, 185, 129; }
.tone-row-liability { --row-tone: 245, 158, 11; }
/* trees without a fixed nature take a colour by position */
.tone-row-1 { --row-tone: 37, 99, 235; }
.tone-row-2 { --row-tone: 16, 185, 129; }
.tone-row-3 { --row-tone: 245, 158, 11; }
.tone-row-4 { --row-tone: 244, 63, 94; }
.tone-row-5 { --row-tone: 124, 58, 237; }
.tone-row-6 { --row-tone: 6, 182, 212; }

.tree { overflow: hidden; }
.tree-head {
  display: flex;
  align-items: center;
  padding: .6rem 1.25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-muted);
  border-bottom: 1px solid var(--app-border);
}
.tree-head .btn-chip { text-transform: none; letter-spacing: 0; }
/* each row's colour starts where its indent starts */
.tree-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  margin-left: calc(var(--depth) * 1.75rem);
  padding: .1rem 1.25rem .1rem .75rem;
  border-left: 4px solid rgb(var(--row-tone));
  font-size: .9rem;
  border-bottom: 1px solid var(--app-border);
  background: rgba(var(--row-tone), max(.03, calc(.26 - var(--depth) * .07)));
}
.tree-row.has-kids { cursor: pointer; }
.tree-row.has-kids:hover { background: rgba(var(--row-tone), max(.08, calc(.32 - var(--depth) * .07))); }
.tree-row-main { font-weight: 800; }
/* every group is bold; the text steps down in size with each level */
.tree-name { flex: 1; min-width: 0; font-weight: 700; font-size: max(.82rem, calc(1.12rem - var(--depth) * .1rem)); }
.tree-row-main .tree-name { font-weight: 800; }
.tree-actions { white-space: nowrap; }
.tree-actions .btn-chip { padding: .05rem .55rem; }
.tree-actions .btn-action { width: 26px; height: 26px; }
.tree-toggle {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgb(var(--row-tone));
  font-size: .8rem;
}
.tree-toggle i { transition: transform .25s ease; }
.tree-leaf { color: var(--app-muted); }
.tree-node.open > .tree-row .tree-toggle i { transform: rotate(90deg); }
.tree-count {
  margin-left: .4rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: rgba(var(--row-tone), .18);
  color: rgb(var(--row-tone));
  font-size: .7rem;
  font-weight: 700;
}
/* slide open / closed */
.tree-children { display: grid; grid-template-rows: 0fr; }
.tree-ready .tree-children { transition: grid-template-rows .28s ease; }
.tree-node.open > .tree-children { grid-template-rows: 1fr; }
.tree-children-inner { overflow: hidden; min-height: 0; }

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--app-border);
}
.table-toolbar .form-select { width: auto; min-width: 11rem; }
/* a report's search choices share one line, however long the chosen names are */
.table-toolbar .report-filter { flex: 1 1 0; min-width: 9rem; max-width: 18rem; }
/* a report's choices, each with its name above the box (ledger: account, date from, date to) */
.report-toolbar { align-items: flex-end; }
.report-field { display: flex; flex-direction: column; gap: .2rem; margin: 0; flex: 0 0 11rem; }
.report-field span { font-size: .78rem; font-weight: 700; color: var(--app-muted); }
.report-field-wide { flex: 1 1 18rem; max-width: 30rem; }
.report-check { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.report-check .form-check-input { margin: 0; border: 2px solid #475569; cursor: pointer; }
.report-check .form-check-label { cursor: pointer; }
.report-shows {
  display: grid; grid-template-columns: auto repeat(3, auto); align-items: center; gap: .15rem 1rem;
  padding: .3rem .75rem; border: 1px solid var(--app-border); border-radius: .5rem;
}
.report-shows > span { grid-row: span 2; font-size: .78rem; font-weight: 700; color: var(--app-muted); }
.report-shows .form-check { margin: 0; }
.report-shows .form-check-input { border: 2px solid #475569; cursor: pointer; }
.report-shows .form-check-label { cursor: pointer; }
.report-field .form-select { width: 100%; min-width: 0; }
.report-head { padding: .6rem 1.25rem; border-bottom: 1px solid var(--app-border); }
/* the company at the head of a report, and the report's own name under it */
.company-head { text-align: center; margin-bottom: .35rem; }
.company-head-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.company-head-line { font-size: .85rem; color: var(--app-muted); white-space: pre-line; }
.report-title { display: inline-block; margin: .15rem 0 .35rem; padding: .1rem 1rem; border: 1.5px solid currentColor; border-radius: 6px; font-size: .9rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* under the company and the report's name: what the report is of on the left, its dates on the right */
.report-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 2rem; margin-top: .25rem; font-size: .92rem; }
/* a name and its value on one line: "Account: B.M. Textile", "From 02-10-2026 To 05-10-2026" */
.report-period { color: var(--app-muted); font-weight: 600; }
/* A recipe's printed copy is one A4 page, however many lines it has. The page hands over how close
   it is to be set (--fit-size, --fit-pad, --fit-leading: the type, the padding of a row and the
   space between lines of type; --fit-zoom for a recipe too long even for the closest setting). */
/* Its page has a deeper top margin than the other printed pages (.25in there), which a printer
   that cannot reach the edge of the paper cut the company's name off at; what the top gains the
   foot gives up, so the sheet has the same height to fill as before. */
@page recipe { size: A4; margin: 11mm 10mm 7.35mm; }
@media print {
  .recipe-sheet { page: recipe; zoom: var(--fit-zoom, 1); }
  /* more room for a remark on the printed copy (not beside the prices: no room there); the SL
     column gives it up, so the names beside it still stand on one line */
  .recipe-sheet .recipe-lines .data-table:not(.recipe-priced) th.recipe-remarks { width: 45mm; }
  .recipe-sheet .recipe-lines .data-table:not(.recipe-priced) th.col-sl { width: 6mm; }
  /* (and the other columns stand closer, in type a little smaller, each row still on one line) */
  .recipe-sheet .recipe-lines .data-table:not(.recipe-priced) { font-size: calc(var(--fit-size, 9.5pt) * .95) !important; }
  .recipe-sheet .recipe-lines .data-table:not(.recipe-priced) th, .recipe-sheet .recipe-lines .data-table:not(.recipe-priced) td { padding: var(--fit-pad, 1.2mm) 1.1mm !important; }
  .recipe-sheet .recipe-lines .data-table:not(.recipe-priced) td:not(:last-child):not([colspan]) { white-space: nowrap; }
  .recipe-sheet .data-table { font-size: var(--fit-size, 9.5pt) !important; line-height: var(--fit-leading, 1.5); }
  .recipe-sheet .data-table th, .recipe-sheet .data-table td { padding: var(--fit-pad, 1.2mm) 1.8mm !important; }
  .recipe-sheet .data-table th { font-size: calc(var(--fit-size, 9.5pt) - 1pt) !important; }
  .recipe-sheet .card { margin-bottom: 2mm !important; }
  /* the places to sign: nearer the table than on a report, to keep to the page */
  .recipe-sheet .recipe-signs .report-signs { margin-top: 16mm; }
  /* A recipe set close fills its page (fit-stretch): the sheet is as high as the page inside its
     margins (100vh on paper: 273 mm with the margins set here, the whole 297 mm when the print
     dialog is set to no margins; less a little so that it never runs onto a second), the table of dyes and
     chemicals takes what room the rest leaves, and its rows share that out among them. The places
     to sign then stand at the foot of the page. (Not for a sheet that is scaled down, --fit-zoom
     under 1: there the rows keep their own height.) */
  .recipe-sheet.fit-stretch { display: flex; flex-direction: column; height: 268mm; height: calc(100vh - 5mm); }
  .recipe-sheet.fit-stretch > * { flex: 0 0 auto; }
  .recipe-sheet.fit-stretch > .recipe-lines { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .recipe-sheet.fit-stretch > .recipe-lines > .table-responsive { flex: 1 1 auto; display: flex; flex-direction: column; }
  .recipe-sheet.fit-stretch > .recipe-lines table { flex: 1 1 auto; height: 100%; }
  .recipe-sheet.fit-stretch > .recipe-lines td { vertical-align: middle; }
}
/* On a recipe's page: the total line of a recipe, and the heading of an additional / topping that
   follows it in the same table. The heading stands out as the start of another recipe. */
.data-table tr.recipe-total td { background: rgba(100, 116, 139, .1) !important; }
/* a recipe opened with its prices has two columns more: every row still stays on one line */
.data-table.recipe-priced th, .data-table.recipe-priced td { white-space: nowrap; padding-left: .55rem; padding-right: .55rem; }
@media print {
  /* on paper the two columns more must not push the table past the right margin: its cells stand
     closer side by side and its type is a little smaller, each row still on one line */
  .recipe-sheet .data-table.recipe-priced { font-size: calc(var(--fit-size, 9.5pt) * .88) !important; }
  .recipe-sheet .data-table.recipe-priced th, .recipe-sheet .data-table.recipe-priced td { padding: var(--fit-pad, 1.2mm) .8mm !important; }
  .recipe-sheet .data-table.recipe-priced th { font-size: calc(var(--fit-size, 9.5pt) * .88 - 1pt) !important; letter-spacing: 0; }
  .recipe-sheet .data-table.recipe-priced th.col-sl { width: auto; }
}
/* the grand total of a recipe and its additional / toppings: the last line, under a heavy rule */
.data-table tr.recipe-grand-total td { background: rgba(100, 116, 139, .18) !important; border-top: 2px solid var(--app-text) !important; font-size: 1.02em; }
@media print {
  .data-table tr.recipe-grand-total td { background: #e5e7eb !important; border-top: 1.5pt solid #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* an additional / topping is marked in red: its heading stands on light red, its name in red */
.data-table tr.recipe-category td { background: rgba(220, 38, 38, .12) !important; border-top: 2px solid #dc2626 !important; }
.data-table tr.recipe-category .category-name { color: #b91c1c; }
[data-bs-theme='dark'] .data-table tr.recipe-category .category-name { color: #fca5a5; }
@media print {
  .data-table tr.recipe-total td { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* the printed copy has no colour behind it: there the heading is told by a heavy line over it and its name in red */
  .data-table tr.recipe-category td { background: transparent !important; border-top: 1.5pt solid #000 !important; }
  .data-table tr.recipe-category .category-name { color: #b91c1c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* the head of a recipe's page: close set, so the fabric table under it stands near it */
.form-card.recipe-top { padding: .75rem 1.25rem; }
@media print {
  .form-card.recipe-top { padding: 0 !important; margin-bottom: 3mm !important; }
  .form-card.recipe-top .print-info { padding-bottom: 0; }
}
/* the fabrics of a batch on a recipe: a small table, each column only as wide as what it holds */
.table.fabric-table { width: auto; min-width: 0; }
.fabric-table th, .fabric-table td { white-space: nowrap; }
.fabric-table th:not(:first-child), .fabric-table td:not(:first-child) { padding-left: .9rem; padding-right: .9rem; }
/* The details of a printed document in columns, side by side. In a column each line is a name, a
   colon and a value: the names stand under each other, and so do the colons and the values. */
.print-info { display: grid; grid-template-columns: 1fr .9fr 1.3fr; gap: 0 2rem; font-size: .92rem; }
/* on a batch card's page, as on the printed card: two columns of details, one at each side */
.card-sides { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 3rem; font-size: .92rem; }
.card-under { padding: .75rem 1.25rem; border-top: 1px solid var(--app-border); }
/* under the Daily Production Report: a small table of its own, half the page wide, kept whole on a printed page */
.category-summary { max-width: 36rem; padding: .5rem 1.25rem 1.25rem; break-inside: avoid; }
.category-summary-title { margin-bottom: .4rem; font-weight: 800; }
.category-summary-note { margin-top: .3rem; font-size: .8rem; color: var(--app-muted); }
/* its rows are close set: a short table of figures */
.category-summary .data-table th, .category-summary .data-table td { padding-top: .1rem !important; padding-bottom: .1rem !important; line-height: 1.3; }
@media print {
  .category-summary .data-table th, .category-summary .data-table td { padding-top: .4mm !important; padding-bottom: .4mm !important; }
  .category-summary { max-width: 115mm; padding: 2.5mm 0 0; }
  .category-summary-title { font-size: 10.5pt; }
  .category-summary-note { font-size: 8pt; }
}
/* as on the printed batch card: a label and a dotted line to write on by hand */
.hand-fields { display: flex; gap: 3rem; margin-top: 1rem; font-size: .92rem; }
.hand-fields div { flex: 1; display: flex; align-items: flex-end; gap: .5rem; }
.hand-fields span { color: var(--app-muted); font-weight: 600; white-space: nowrap; }
.hand-fields span::after { content: ':'; }
.hand-fields i { flex: 1; min-height: 1.5rem; border-bottom: 1px dotted var(--app-muted); }
/* on a production: the middle column (shift, times, operator) is as wide as what it holds, so a time stays on its one line */
.print-info.run-info { grid-template-columns: 1fr auto 1.3fr; }
.print-pairs { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .5rem; margin: 0; align-content: start; }
.print-pairs dt { display: flex; justify-content: space-between; gap: .75rem; font-weight: 600; color: var(--app-muted); }
@media print {
  /* a barcode under a column: black bars that must print even when the browser leaves backgrounds out */
  .print-info .barcode { display: block; fill: #000; max-width: 100%; margin-top: 1.5mm; }
  .print-info { gap: 0 8mm; padding-bottom: 1mm; font-size: 10pt; }
  .print-pairs { gap: .6mm 2mm; }
  .print-pairs dt { color: #000; }
}
.print-pairs dt::after { content: ':'; }
.print-pairs dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
/* a head of one line: something at the left, the title in the middle, something at the right */
.report-head-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.report-head-line .report-title { margin: 0; }
.report-head-line .report-period strong { margin-right: 0; }
/* a number or a date at the side of the title stays on its one line, however long the title */
.report-head-line .report-period { white-space: nowrap; }
/* The same line as a band, on the screen only: a light wash of the app's blue with a line of the
   full colour at its left, the title in the middle in blue spaced capitals. The printed copy has
   no colour: there the line is plain, the title in its ruled box. */
@media screen {
  .report-head-line.head-bar {
    padding: .55rem 1rem; border-radius: .6rem;
    border: 1px solid rgba(37, 99, 235, .18); border-left: 4px solid var(--app-primary);
    background: linear-gradient(90deg, rgba(37, 99, 235, .10) 0%, rgba(14, 165, 233, .07) 55%, rgba(37, 99, 235, .03) 100%);
  }
  .report-head-line.head-bar .report-period { font-size: .88rem; }
  .report-head-line.head-bar .report-period strong { font-size: 1rem; margin-left: .3rem; }
  .report-head-line.head-bar .report-title {
    padding: 0; border: 0; font-size: 1.02rem; letter-spacing: .14em; color: var(--app-primary-dark);
  }
  [data-bs-theme='dark'] .report-head-line.head-bar .report-title { color: #93c5fd; }
}
.report-period strong { margin: 0 .5rem 0 .2rem; color: var(--app-text); }
/* the ledger printed with room at the top (and on every page after), so a printer that cannot print to
   the edge cuts nothing of its head */
@page ledger-report { size: A4; margin: 15mm 10mm 12mm; }
@media print { .ledger-report-page { page: ledger-report; } }
/* the ledger's columns: room for the particulars, the figures in two equal columns on the right */
.ledger-table th:nth-child(1) { width: 9%; }
.ledger-table th:nth-child(2) { width: 38%; }   /* particulars: the widest */
.ledger-table th:nth-child(3) { width: 11%; }
.ledger-table th:nth-child(4) { width: 9%; }
.ledger-table th:nth-child(5) { width: 9%; }
.ledger-table th:nth-child(6), .ledger-table th:nth-child(7) { width: 12%; }
/* the stock ledger has one column more: the challan no, after the date */
.stock-ledger-table th:nth-child(1) { width: 8%; }
.stock-ledger-table th:nth-child(2) { width: 12%; }
.stock-ledger-table th:nth-child(3) { width: 30%; }   /* particulars: the widest */
.stock-ledger-table th:nth-child(4) { width: 10%; }
.stock-ledger-table th:nth-child(5) { width: 8%; }
.stock-ledger-table th:nth-child(n+6) { width: 10.6%; }
/* the stock ledger with price: a green heading in two rows (Received, Issued and Balance over their
   Qty, Rate and Value), kept at the top of the table's own box while its lines are scrolled */
.stock-value-table { border-collapse: separate; border-spacing: 0; }
/* the whole table on the page; its heading sticks just below the app header while the page is scrolled
   (--sticky-top: that header's height, set by app.js) */
.stock-value-table thead { position: sticky; top: var(--sticky-top, 0px); z-index: 3; }
@media (min-width: 1200px) { .stock-value-wrap { overflow: visible; } }
/* on a narrow screen the table scrolls sideways in its own box, and the heading sticks to that box's top */
@media (max-width: 1199.98px) { .stock-value-wrap { max-height: 75vh; overflow: auto; } .stock-value-table thead { top: 0; } }
.stock-value-table thead th {
  background: #15803d; color: #fff; vertical-align: middle; text-align: center;
  border: 0; border-right: 1px solid rgba(255, 255, 255, .3); border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.stock-value-table thead th:last-child { border-right: 0; }
.stock-value-table thead th.th-group { border-left: 0; letter-spacing: .1em; }
.stock-value-table thead th.th-sub { border-left: 0; text-align: right; }
.stock-value-table thead tr:last-child th, .stock-value-table thead th[rowspan] { border-bottom: 2px solid #0f5132; }
.stock-value-table thead th.col-particulars { text-align: left; }
/* Particulars: a narrow column on one line; what is longer is cut off at the right with "…" (the whole of it shows on hover) */
.stock-value-table .col-particulars { width: 12rem; min-width: 9rem; max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-value-table td.col-particulars .ledger-note { overflow: hidden; text-overflow: ellipsis; }
[data-bs-theme="dark"] .stock-value-table thead th { background: #166534; }
/* a low heading: little room above and below its words */
.stock-value-table thead th { padding-top: .2rem; padding-bottom: .2rem; line-height: 1.2; }

/* any report whose heading stays in sight while its lines are scrolled (the stock summary, ...):
   table.sticky-head in a div.table-responsive.sticky-head-wrap. On screen only: printed pages repeat
   the heading on their own. The heading is made solid (the card's colour under its own grey), so the
   lines do not show through it. */
@media screen {
  .sticky-head { border-collapse: separate; border-spacing: 0; }
  /* the whole table on the page; its heading sticks just below the app header (--sticky-top, app.js) */
  .sticky-head thead { position: sticky; top: var(--sticky-top, 0px); z-index: 3; }
  .sticky-head.data-table-deep thead th {
    background: linear-gradient(rgba(100, 116, 139, .24), rgba(100, 116, 139, .24)), var(--app-surface);
  }
}
@media screen and (min-width: 1200px) { .sticky-head-wrap { overflow: visible; } }
/* on a narrow screen the table scrolls sideways in its own box, and the heading sticks to that box's top */
@media screen and (max-width: 1199.98px) { .sticky-head-wrap { max-height: 75vh; overflow: auto; } .sticky-head thead { top: 0; } }
/* each of Received, Issued and Balance its own colour, its heading and the Qty, Rate, Value under it */
.stock-value-table thead th.th-received { background: #0369a1; }
.stock-value-table thead th.th-issued { background: #b45309; }
.stock-value-table thead th.th-balance { background: #6d28d9; }
.stock-value-table thead th.th-sub.th-received { background: #0284c7; }
.stock-value-table thead th.th-sub.th-issued { background: #d97706; }
.stock-value-table thead th.th-sub.th-balance { background: #7c3aed; }
/* printed on A4 portrait, the same margin all round, the table one page wide (its heading again on every
   page): small type, and a heading of more than one word may break onto two lines */
@page stock-value { size: A4 portrait; margin: 8mm; }
@media print {
  /* (under .stock-value-page: these win over the printed report's own sizes, further down) */
  .stock-value-page { page: stock-value; }
  .stock-value-page .stock-value-wrap { max-height: none; overflow: visible; }
  .stock-value-page .stock-value-table { width: 100%; font-size: 6.8pt; }
  .stock-value-page .stock-value-table thead { position: static; }
  .stock-value-page .stock-value-table th, .stock-value-page .stock-value-table td { padding: .6mm .8mm !important; }
  .stock-value-page .stock-value-table th { font-size: 6.2pt; letter-spacing: 0; white-space: normal; }
  .stock-value-page .stock-value-table .col-particulars { width: 26mm; min-width: 0; max-width: 26mm; }
  .stock-value-page .stock-value-table tr { break-inside: avoid; }
  /* the stock summary: a long item name breaks onto more lines rather than widening the table */
  .stock-value-page .stock-value-table .col-item { white-space: normal; min-width: 0; }
}
/* A report heading in two rows (Closing Balance Summary, Group Summary) in clear, bright tones with white words: SL and
   Particulars in slate, Closing Balance (Tk.) in green, Fabric Stock (Kg.) in blue, the columns under each
   group a step lighter. Each cell is lit a little from the top; fine light lines part the cells, a dark
   line closes the heading, and the corners at its top are rounded. */
.tinted-head-table { border-collapse: separate; border-spacing: 0; }
.tinted-head-table thead th {
  --head-bg: #3d5a80; --head-fg: #ffffff; --head-line: #22344d;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0)) var(--head-bg);
  color: var(--head-fg); vertical-align: middle; text-align: center; letter-spacing: .06em; font-weight: 700;
  padding-top: .2rem !important; padding-bottom: .2rem !important; line-height: 1.15;
  border: 0; border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.tinted-head-table thead th:last-child { border-right: 0; }
.tinted-head-table thead tr:first-child th:first-child { border-top-left-radius: .45rem; }
.tinted-head-table thead tr:first-child th:last-child { border-top-right-radius: .45rem; }
.tinted-head-table thead th.th-group { font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.tinted-head-table thead th.th-sub { text-align: right; font-size: .7rem; font-weight: 600; color: rgba(255, 255, 255, .92); }
.tinted-head-table thead th[rowspan], .tinted-head-table thead tr:last-child th { border-bottom: 2px solid var(--head-line); }
.tinted-head-table thead th.th-money { --head-bg: #2f855a; --head-line: #1c5c3c; }
.tinted-head-table thead th.th-sub.th-money { --head-bg: #38a169; }
.tinted-head-table thead th.th-fabric { --head-bg: #2b6cb0; --head-line: #1c4a80; }
.tinted-head-table thead th.th-sub.th-fabric { --head-bg: #3182ce; }
[data-bs-theme="dark"] .tinted-head-table thead th { --head-bg: #1c2a3d; }
[data-bs-theme="dark"] .tinted-head-table thead th.th-money { --head-bg: #245741; }
[data-bs-theme="dark"] .tinted-head-table thead th.th-sub.th-money { --head-bg: #33785a; }
[data-bs-theme="dark"] .tinted-head-table thead th.th-fabric { --head-bg: #24456e; }
[data-bs-theme="dark"] .tinted-head-table thead th.th-sub.th-fabric { --head-bg: #2f5788; }
/* Voucher Audit Trail: each change marked by its kind (created green, edited violet, deleted red),
   a voucher entered dated back amber; the counts of each over the table; the values field by field */
.audit-counts { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: 0 0 .6rem; }
.audit-flag { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.audit-flag.flag-created { background: #dcfce7; color: #166534; }
.audit-flag.flag-edited { background: #ede9fe; color: #5b21b6; }
.audit-flag.flag-deleted { background: #fee2e2; color: #b91c1c; }
.audit-flag.flag-back { background: #fef3c7; color: #92400e; }
[data-bs-theme="dark"] .audit-flag.flag-created { background: rgba(34, 197, 94, .2); color: #86efac; }
[data-bs-theme="dark"] .audit-flag.flag-edited { background: rgba(139, 92, 246, .22); color: #c4b5fd; }
[data-bs-theme="dark"] .audit-flag.flag-deleted { background: rgba(239, 68, 68, .2); color: #fca5a5; }
[data-bs-theme="dark"] .audit-flag.flag-back { background: rgba(245, 158, 11, .2); color: #fcd34d; }
.audit-table td { vertical-align: top; }
.audit-table tr.audit-created td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.audit-table tr.audit-edited td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; }
.audit-table tr.audit-deleted td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.audit-table td.audit-values { min-width: 14rem; max-width: 26rem; font-size: .82rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.audit-table .audit-field { font-weight: 700; color: var(--app-muted); }
@media print { .audit-flag { padding: 0; background: none !important; color: #000 !important; } }
/* Group Summary: light lines between the cells */
.group-summary-table td { border-color: rgba(100, 116, 139, .16) !important; }
.group-summary-table thead th.th-sub { text-align: right; }
.group-summary-table th:nth-child(n+2) { width: auto; }
.group-summary-table thead tr:last-child th { width: 11%; }
@media print { .group-summary-table td { border-color: #b8bec7 !important; } }
/* a financial report: a line further in the tree stands further in; a total line is shaded */
.statement-table th:nth-child(n+2) { width: 16%; }
/* a T account (profit & loss): two sides of equal width, a heavy line down the middle */
.statement-t th:nth-child(1), .statement-t th:nth-child(3) { width: 34%; }
.statement-t th:nth-child(2), .statement-t th:nth-child(4) { width: 16%; }
.statement-t .statement-divide { border-right: 3px solid rgba(100, 116, 139, .7) !important; }
/* a T account with a sub total column on each side (Profit & Loss): the sub totals left of the totals, quieter */
.statement-t-sub th:nth-child(1), .statement-t-sub th:nth-child(4) { width: 28%; }
.statement-t-sub th:nth-child(2), .statement-t-sub th:nth-child(5) { width: 11%; }
.statement-t-sub th:nth-child(3), .statement-t-sub th:nth-child(6) { width: 11%; }
.statement-t-sub td.statement-sub { color: var(--app-muted); font-weight: 400 !important; font-size: .92em; }
.statement-t tbody tr:hover td { background: transparent; }
/* Details-2: a 2nd sub column on each side (the 2nd step, left of the 1st step's): 8 columns */
.statement-t-sub2 { table-layout: fixed; }
.statement-t-sub2 th:nth-child(1), .statement-t-sub2 th:nth-child(5) { width: 23%; }
.statement-t-sub2 th:nth-child(2), .statement-t-sub2 th:nth-child(3),
.statement-t-sub2 th:nth-child(6), .statement-t-sub2 th:nth-child(7) { width: 8.5%; }
.statement-t-sub2 th:nth-child(4), .statement-t-sub2 th:nth-child(8) { width: 10%; }
.statement-t-sub2 td.num { white-space: nowrap; }
.statement-t-sub2 td.statement-name { overflow-wrap: anywhere; }
/* a T account's lines set close: low rows, so more of it is seen (and printed) at once */
.statement-t td { padding-top: .1rem !important; padding-bottom: .1rem !important; line-height: 1.3; }
.statement-t th { padding-top: .35rem !important; padding-bottom: .35rem !important; }
/* a statement in parts (trial balance: opening, transaction, balance), each over a debit and a
   credit column: six narrow figure columns, a heavier line between one part and the next */
.statement-parts { font-size: .86rem; }
.statement-parts th:nth-child(n+2) { width: 11.5%; }
.statement-parts thead tr:first-child th:first-child { width: auto; }
.statement-parts .statement-part { border-left: 2px solid rgba(100, 116, 139, .6); border-bottom: 1px solid rgba(100, 116, 139, .5); }
.statement-parts thead tr + tr th:nth-child(odd), .statement-parts tbody td:nth-child(even) { border-left: 2px solid rgba(100, 116, 139, .6); }
/* each level of group stands a small step further in than the one above it */
.statement-name.depth-1 { padding-left: 1.9rem !important; }
.statement-name.depth-2 { padding-left: 2.55rem !important; }
.statement-name.depth-3 { padding-left: 3.2rem !important; }
.statement-name.depth-4 { padding-left: 3.85rem !important; }
.statement-name.depth-5 { padding-left: 4.5rem !important; }
.data-table-deep tbody tr.statement-total td { background: rgba(100, 116, 139, .22); border-top: 2px solid rgba(100, 116, 139, .55); }
@media print {
  .statement-name.depth-1 { padding-left: 4mm !important; }
  .statement-name.depth-2 { padding-left: 6.2mm !important; }
  .statement-name.depth-3 { padding-left: 8.4mm !important; }
  .statement-name.depth-4 { padding-left: 10.6mm !important; }
  .statement-name.depth-5 { padding-left: 12.8mm !important; }
  .data-table tbody tr.statement-total td { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* day book: a line above each voucher's first line, so its accounts stand together */
.data-table-deep tbody tr.voucher-first td { border-top: 2px solid rgba(100, 116, 139, .5); }
/* the collection & payment report's columns */
.collection-table th:nth-child(1) { width: 9%; }
.collection-table th:nth-child(3) { width: 20%; }
.collection-table th:nth-child(4) { width: 10%; }
.collection-table th:nth-child(5) { width: 9%; }
.collection-table th:nth-child(6), .collection-table th:nth-child(7) { width: 12%; }
/* the narration of a ledger line, under its particulars */
.ledger-note { font-size: .8rem; font-style: italic; color: var(--app-muted); line-height: 1.25; }
/* the group summary's columns: the names on the left, four equal columns of figures */
.summary-table th:nth-child(n+2) { width: 15%; }

/* A report printed from its own page ("Print" button): one clean A4 sheet in black on white,
   whatever the theme on screen. Only the report is printed: its head, its table with every line
   ruled, and its foot; not the menu, the buttons, the search or the page numbers. */
@page { size: A4; margin: .25in 10mm 12mm; }
@media print {
  :root, [data-bs-theme='dark'] {
    --app-bg: #fff; --app-surface: #fff; --app-text: #000; --app-muted: #374151; --app-border: #6b7280;
    --bs-body-bg: #fff; --bs-body-color: #000; --bs-link-color: #000; --bs-link-color-rgb: 0, 0, 0;
  }
  html { font-size: 10pt; }
  body { background: #fff; color: #000; }
  .app-header, .app-footer, .table-toolbar, .page-header .breadcrumb, .page-header .btn, .pagination { display: none !important; }
  .app-content { padding: 0; }
  .card { border: 0; box-shadow: none; background: #fff; }
  .table-responsive { overflow: visible; }
  .print-export-docs th:last-child, .print-export-docs td:last-child { display: none; }
  a { color: #000 !important; text-decoration: none; }

  .report-head { padding: 0 0 3mm; border: 0; }
  /* the company's name and its address, sized to go together: the address about two thirds of the name */
  .company-head-name { font-size: 15pt; }
  .company-head-line { font-size: 10.5pt; color: #000; }
  .company-head { padding-bottom: 2mm; margin-bottom: 2.5mm; border-bottom: 2px solid #000; }
  .report-title { font-size: 11pt; margin-bottom: 2.5mm; }
  .report-meta { font-size: 10pt; }

  /* every line ruled; the heading repeats on each page; no row is cut in two */
  .report-table, .data-table { font-size: 9.5pt; color: #000; border-collapse: collapse; }
  .data-table th, .data-table td { border: 1px solid #374151 !important; padding: 1.2mm 1.8mm !important; color: #000 !important; background: transparent !important; }
  .data-table th { background: #e5e7eb !important; font-size: 8.5pt; letter-spacing: .02em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table tfoot td { font-weight: 800; background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table thead { display: table-header-group; }
  /* the total line is printed once, under the last row; not at the foot of every page */
  .data-table tfoot { display: table-row-group; }
  .data-table tr { break-inside: avoid; }

  /* the foot of the printed report: places to sign, then who printed it and when */
  .report-print-foot { break-inside: avoid; }
  .report-signs { display: flex; justify-content: space-between; gap: 8mm; margin-top: 22mm; }
  .report-signs div { flex: 1; padding-top: 1.5mm; border-top: 1px solid #000; text-align: center; font-size: 9.5pt; font-weight: 600; }
  .report-printed { margin-top: 5mm; font-size: 7.5pt; color: #4b5563; text-align: right; }

  /* A document's details, printed in little room: four to a line, each as "Name: value" on the one
     line, close set, where the screen has the name over the value in wide boxes. */
  .print-compact { padding: 0 0 2mm !important; margin-bottom: 2mm !important; }
  .print-compact .detail-grid { grid-template-columns: repeat(4, 1fr); gap: 1mm 5mm; }
  .print-compact .detail-grid > div { display: flex; align-items: baseline; gap: 1.5mm; min-width: 0; }
  .print-compact .detail-grid dt { flex: none; font-size: 9pt; }
  .print-compact .detail-grid dt::after { content: ':'; }
  .print-compact .detail-grid dd { font-size: 9.5pt; overflow-wrap: anywhere; }
  .print-compact dl.mt-3 { margin-top: 1.5mm !important; font-size: 9.5pt; }
}
/* Details-2 of the profit & loss (eight columns) printed upright: a little less margin at the sides
   than other pages (top and bottom as theirs, which the one-page fit counts on), and smaller type */
@page statement-wide { size: A4 portrait; margin: .25in 7mm 12mm; }
@media print {
  .statement-wide-page { page: statement-wide; }
  .data-table.statement-t.statement-t-sub2 { font-size: 7.5pt !important; }
  .data-table.statement-t.statement-t-sub2 th { font-size: 7.3pt; }
  .data-table.statement-t.statement-t-sub2 th, .data-table.statement-t.statement-t-sub2 td { padding: .6mm 1mm !important; }
  .data-table.statement-t.statement-t-sub2 td.num, .data-table.statement-t.statement-t-sub2 th.text-end { padding-left: 1.5mm !important; }
  .data-table.statement-t.statement-t-sub2 td.statement-sub { font-size: 7.2pt; }
}
/* a T account on paper (profit & loss, balance sheet), as a printed statement: framed, one line
   down the middle between the two sides; the heading on a grey band between two solid lines; a
   thin line under every row, the whole width; each head of a side (statement-head: Opening Stock,
   Purchase Accounts ...) on a light band, what is under it plain below; the sub totals in
   grey; the total on a grey band over a line and under a double one. Small type, low rows, the
   amounts on one line as wide as they need, each step of the names a little further in. (After the
   printed report's own rules, so these win.) */
@media print {
  .data-table.statement-t { font-size: 8.5pt !important; table-layout: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table.statement-t th, .data-table.statement-t td {
    padding: .7mm 1.4mm !important; line-height: 1.25;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    border-bottom: .5px solid #c3c8d0 !important;   /* a thin line under every row, the whole width */
  }
  .data-table.statement-t th {
    background: #e5e7eb !important; font-size: 8pt; letter-spacing: .02em;
    border-top: 1.2px solid #000 !important; border-bottom: 1.2px solid #000 !important;
  }
  .data-table.statement-t td.num, .data-table.statement-t th.text-end { padding-left: 2.5mm !important; white-space: nowrap; }
  .data-table.statement-t th.text-end, .data-table.statement-t th.statement-sub { width: 1% !important; }
  .data-table.statement-t th.statement-name-head { width: auto !important; }
  .data-table.statement-t .statement-divide { border-right: .8px solid #000 !important; }
  /* and a line down each side of the table, as the one down the middle */
  .data-table.statement-t tr > :first-child { border-left: .8px solid #000 !important; }
  .data-table.statement-t tr > :last-child { border-right: .8px solid #000 !important; }
  /* a head of a side: a light band, a thin line over it, a little room above */
  .data-table.statement-t td.statement-head {
    background: #f3f4f6 !important; border-top: .5px solid #9ca3af !important;
  }
  .data-table.statement-t tbody tr:first-child td.statement-head { border-top: 0 !important; }
  .data-table.statement-t td.statement-sub { font-size: 8pt; color: #4b5563 !important; }
  .data-table.statement-t tbody tr.statement-total td {
    background: #e5e7eb !important;
    border-top: 1px solid #000 !important; border-bottom: 2.5px double #000 !important;
  }
  .data-table.statement-t .statement-name.depth-1 { padding-left: 4mm !important; }
  .data-table.statement-t .statement-name.depth-2 { padding-left: 6.6mm !important; }
  .data-table.statement-t .statement-name.depth-3 { padding-left: 9.2mm !important; }
}
/* a table of many figure columns: long headings break onto two lines instead of forcing a scroll */
.table-head-wrap th { white-space: normal; vertical-align: bottom; }
/* a heading over several columns of a list: centred, with a line under it and at its sides, and those of its columns */
.data-table th.th-group { text-align: center; border-left: 1px solid var(--app-border); border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); }
.data-table th.th-group ~ th, .data-table th.th-sub { border-left: 1px solid var(--app-border); }
.table-toolbar .toolbar-search { width: auto; flex: 1 1 16rem; max-width: 26rem; }
/* a switch on the search line: one of a few choices, the chosen one raised (issues: batch / requisition / all) */
.toolbar-switch { display: inline-flex; flex: 0 0 auto; align-self: center; align-items: center; gap: .1rem; padding: .18rem; border-radius: .75rem; background: rgba(100, 116, 139, .14); }
.toolbar-switch input { position: absolute; opacity: 0; pointer-events: none; }
.toolbar-switch label { display: inline-flex; align-items: center; gap: .28rem; margin: 0; padding: .24rem .5rem; border-radius: .55rem; font-size: .8rem; font-weight: 600; color: var(--app-muted); white-space: nowrap; cursor: pointer; transition: background-color .18s, color .18s, box-shadow .18s; }
.toolbar-switch label:hover { color: var(--app-text); background: rgba(100, 116, 139, .12); }
.toolbar-switch input:checked + label { background: var(--app-surface); color: var(--app-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 3px 8px rgba(15, 23, 42, .1); }
.toolbar-switch input:focus-visible + label { outline: 2px solid var(--app-primary); outline-offset: 2px; }
/* A price quotation's sheet, laid out as the paper quotation is: tables with a filled heading, a
   box in every cell, and the lists of included processes behind an "N selected" box. */
.quote-heading { margin: .75rem 0 .4rem; font-size: .82rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.quote-table { font-size: .85rem; }
.quote-table th { padding: .45rem .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: center; vertical-align: middle; white-space: nowrap; }
.quote-table td { padding: .15rem .2rem; vertical-align: middle; border-color: var(--app-border); }
/* the heading in two tones, in the app's own blue: the groups (Shade Range, Approved Price, ...)
   solid navy, and under them the columns of each group a pale blue tint with a brand-blue rule;
   a one-line heading of the lighter tables the pale tint */
.quote-table thead tr:first-child th { background: #1e3a8a; color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.quote-table thead tr + tr th,
.quote-table.quote-table-light thead tr th {
  background: #eef3ff; color: #1e3a8a; border: 1px solid #d9e2f7; border-bottom: 2px solid var(--app-primary);
}
.quote-table thead tr:first-child th[rowspan] { border-bottom: 2px solid var(--app-primary); }
[data-bs-theme="dark"] .quote-table thead tr:first-child th { background: #1e3a8a; border-color: rgba(255, 255, 255, .1); }
[data-bs-theme="dark"] .quote-table thead tr + tr th,
[data-bs-theme="dark"] .quote-table.quote-table-light thead tr th { background: #1a2742; color: #c7d2fe; border-color: #2a3a5c; border-bottom-color: #3b82f6; }
/* each group of columns its own colour, the group deep and its columns a tint of it: shade range
   violet, approved price green (money), process included amber */
.quote-table thead tr:first-child th.qh-shade { background: #5b21b6; }
.quote-table thead tr:first-child th.qh-price { background: #047857; }
.quote-table thead tr:first-child th.qh-incl  { background: #b45309; }
.quote-table thead tr + tr th.qh-shade { background: #ddd6fe; color: #4c1d95; border-color: #c4b5fd; border-bottom: 3px solid #7c3aed; }
.quote-table thead tr + tr th.qh-price { background: #a7f3d0; color: #064e3b; border-color: #6ee7b7; border-bottom: 3px solid #059669; }
.quote-table thead tr + tr th.qh-incl  { background: #fde68a; color: #78350f; border-color: #fcd34d; border-bottom: 3px solid #d97706; }
/* a clear gap between the groups, down both rows of the heading */
.quote-table thead tr:first-child th.qh-shade, .quote-table thead tr:first-child th.qh-price, .quote-table thead tr:first-child th.qh-incl,
.quote-table thead th.qh-start { border-left: 3px solid var(--app-surface); }
.quote-table thead tr:first-child th.qh-incl, .quote-table thead th.qh-end { border-right: 3px solid var(--app-surface); }
[data-bs-theme="dark"] .quote-table thead tr + tr th.qh-start { border-left-color: var(--app-surface); }
[data-bs-theme="dark"] .quote-table thead tr + tr th.qh-end { border-right-color: var(--app-surface); }
[data-bs-theme="dark"] .quote-table thead tr + tr th.qh-shade { background: #2a1f4d; color: #ddd6fe; border-color: #3b2f66; border-bottom-color: #8b5cf6; }
[data-bs-theme="dark"] .quote-table thead tr + tr th.qh-price { background: #0f3b30; color: #a7f3d0; border-color: #1a4d40; border-bottom-color: #10b981; }
[data-bs-theme="dark"] .quote-table thead tr + tr th.qh-incl  { background: #3f2a0e; color: #fde68a; border-color: #5a3d14; border-bottom-color: #f59e0b; }
.quote-table .form-control-sm, .quote-table .form-select-sm { padding-top: .2rem; padding-bottom: .2rem; font-size: .85rem; }
.quote-table input[type="number"] { min-width: 5rem; }
.quote-table input.quote-serial { min-width: 3.5rem; width: 4rem; }
/* the entry sheet's top: its fields close together, and the dyeing table close under them */
.quote-top .field-inline > .form-label { min-width: 3.2rem; }
.quote-top + .quote-heading { margin-top: .35rem; }
/* the dyeing prices on the entry sheet: as wide as the page and no wider, each column its share
   (the <colgroup>), and every box filling its cell */
#linesTable { table-layout: fixed; width: 100%; }
#linesTable th { white-space: normal; padding: .3rem .25rem; }
#linesTable td { padding: .15rem .15rem; }
#linesTable select, #linesTable input[type="number"], #linesTable input[type="text"], #linesTable .quote-multi .form-select {
  width: 100%; min-width: 0; padding-left: .3rem; padding-right: .3rem; text-overflow: ellipsis;
}
#linesTable select, #linesTable .quote-multi .form-select { padding-right: 1.3rem; background-position: right .3rem center; }
#linesTable input.quote-serial { width: 100%; min-width: 0; }
/* (no arrows in the number boxes: room for the number) */
#linesTable input[type="number"] { -moz-appearance: textfield; }
#linesTable input[type="number"]::-webkit-inner-spin-button, #linesTable input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#linesTable .btn-sm { padding: .2rem .4rem; }
/* a small screen cannot hold it: there it keeps a width to work in, and scrolls */
@media (max-width: 1199.98px) { #linesTable { min-width: 72rem; } }
.quote-table select { min-width: 8rem; }
/* a quotation shown to read (its view page): text in the cells, not boxes */
.quote-table-view td { padding: .35rem .5rem; }
.quote-table-view .quote-included { min-width: 9rem; font-size: .78rem; color: var(--app-muted); }
.quote-history-current > td { background: rgba(14, 116, 144, .08); }
/* the list's tabs: current and old quotations */
.quote-tabs { padding: .5rem .75rem 0; }
.quote-tabs .nav-link { font-weight: 600; }
.quote-tabs .badge { font-weight: 600; }
/* the standard rate, pinned on top of the list */
.quote-standard > tr > td { background: rgba(14, 116, 144, .08); }
.quote-standard > tr:last-child > td { border-bottom: 2px solid rgba(14, 116, 144, .45); }
.quote-multi > button { white-space: nowrap; min-width: 7.2rem; }
.quote-multi .dropdown-menu { max-height: 18rem; overflow-y: auto; min-width: 13rem; font-size: .85rem; }
.quote-multi .dropdown-menu > div > div { padding: .1rem 0; white-space: nowrap; }
.quote-multi .dropdown-menu label { display: flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; }
.quote-multi input.quote-check { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--app-primary); }
/* the list is in two groups, the dyeing processes then the finishing processes: each under its heading */
.quote-multi .dropdown-menu > div > div > label { padding: .2rem 0 .1rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0e7490; cursor: default; border-bottom: 1px solid var(--app-border); margin-bottom: .15rem; }
.quote-multi .dropdown-menu > div > div + div { margin-top: .4rem; }
.quote-multi .dropdown-menu > div > div > div { padding: .1rem 0; white-space: nowrap; }
/* The lab dip list printed is the report of the step it shows: on its side, for its many columns,
   in small type, without the paging line under the table. */
@page lab-report { size: A4 landscape; margin: 10mm; }
@media print {
  .lab-report { page: lab-report; }
  .lab-report .data-table { font-size: 8.5pt !important; }
  .lab-report .data-table th, .lab-report .data-table td { padding: 1mm 1.5mm !important; white-space: nowrap; }
  .lab-report .table-footer { display: none !important; }
}
/* the step a lab dip stands at, as a small label: grey while it waits, then by how far it has got */
.lab-stage { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgba(100, 116, 139, .16); color: var(--app-muted); }
.lab-stage-lab-done { background: rgba(14, 165, 233, .16); color: #0369a1; }
.lab-stage-submitted { background: rgba(245, 158, 11, .2); color: #b45309; }
.lab-stage-approved, .lab-stage-recipe-recorded { background: rgba(16, 185, 129, .18); color: #047857; }
.lab-stage-rejected { background: rgba(244, 63, 94, .16); color: #be123c; }
.table-toolbar .input-group-text { background: var(--app-surface); border-color: var(--app-border); color: var(--app-muted); }
.table-toolbar .form-control, .table-toolbar .form-select, .table-toolbar .btn { padding-top: .4rem; padding-bottom: .4rem; }
.table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--app-border);
  font-size: .85rem;
}
.pagination { --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-color: var(--app-text); --bs-pagination-bg: var(--app-surface); --bs-pagination-border-color: var(--app-border); }
.pagination .page-link { min-width: 2.1rem; text-align: center; font-weight: 600; }
.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: var(--app-primary); }
.data-table th:first-child, .data-table td:first-child { padding-left: 1.25rem; }
.data-table th:last-child, .data-table td:last-child { padding-right: 1.25rem; }
/* dense list tables: short rows */
.data-table-compact td { padding-top: .15rem; padding-bottom: .15rem; }
.data-table-compact th { padding-top: .5rem; padding-bottom: .5rem; }
.data-table-compact .btn-action { width: 26px; height: 26px; }
/* On every list the buttons of a row stand close together: each a little narrower, and the space
   the line breaks between them leave taken back. (A table that sets its own, as the two below,
   keeps it: :where() adds no weight to these rules.) */
.data-table:where(:not(.tracking-table)) :where(td) > .btn-action,
.data-table:where(:not(.tracking-table)) :where(td > form.d-inline) > .btn-action { width: 22px; }
.data-table :where(td) > .btn-action + .btn-action,
.data-table :where(td) > .btn-action + form.d-inline,
.data-table :where(td) > form.d-inline + .btn-action,
.data-table :where(td) > form.d-inline + form.d-inline { margin-left: -.22em; }
.data-table-compact .pi-action-cell { padding-left: .1rem; padding-right: .5rem; }
.data-table-compact .pi-action-cell .btn-action { width: 20px; height: 24px; }
.data-table-compact .pi-action-cell form { margin: 0; }
.data-table-compact .status { padding-top: .08rem; padding-bottom: .08rem; }
/* a document's product table: deeper heading, lines and row shades than a plain list */
.data-table-deep th { color: var(--app-text); background: rgba(100, 116, 139, .24); border-bottom: 2px solid rgba(100, 116, 139, .55); }
.data-table-deep td { border-color: rgba(100, 116, 139, .35); }
.data-table-deep tbody tr:hover td { background: rgba(245, 158, 11, .22); }
/* a heading line and the lines under it read as one row: no line between them, told apart by shade only */
.data-table-deep tbody.row-set tr td { background: transparent; }
.data-table-deep tbody.row-set:hover tr td { background: rgba(245, 158, 11, .22); }
.data-table-deep tbody.row-set tr.row-group td { border-bottom: 0; background: rgba(37, 99, 235, .16); }
.data-table-deep tbody.row-set tr:last-child td { border-bottom: 1px solid rgba(100, 116, 139, .55); }
.data-table-deep tfoot td { background: rgba(100, 116, 139, .24); border-top: 2px solid rgba(100, 116, 139, .55); }
.cell-clip-name { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; }
.cell-clip { max-width: 10rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { font-variant-numeric: tabular-nums; }

.status {
  display: inline-block;
  min-width: 4.6rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
.status-active { background: #16a34a; }
.status-inactive { background: #dc2626; }
.side { font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; }
.side-dr { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.side-cr { background: rgba(245, 158, 11, .18); color: #b45309; }
[data-bs-theme='dark'] .side-dr { color: #93c5fd; }
[data-bs-theme='dark'] .side-cr { color: #fcd34d; }

.modal-content { border: 3px solid var(--app-primary-dark); border-radius: var(--radius); overflow: hidden; background: var(--app-surface); box-shadow: 0 24px 60px rgba(15, 23, 42, .25); }
.modal-header, .modal-footer { border-color: var(--app-border); padding: .9rem 1.25rem; }
.modal-header { background: rgba(37, 99, 235, .08); border-bottom: 2px solid var(--app-primary-dark); }
.modal-body { padding: 1.25rem; }
.modal-title { font-size: 1.05rem; font-weight: 700; }
.pi-delete-modal .modal-content {
  border: 1px solid rgba(220, 38, 38, .16);
  border-radius: 1.15rem;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}
.pi-delete-modal.fade .pi-delete-dialog {
  transform: translateY(18px) scale(.96);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.pi-delete-modal.show .pi-delete-dialog { transform: translateY(0) scale(1); }
.pi-delete-modal .modal-body { padding: 2rem 2rem 1.25rem; }
.pi-delete-icon {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 1.1rem;
  place-items: center;
  border: 1px solid rgba(220, 38, 38, .14);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  color: #dc2626;
  font-size: 1.65rem;
  animation: pi-delete-pop .38s cubic-bezier(.2, .8, .2, 1) both;
}
.pi-delete-title { margin: 0 0 .55rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; }
.pi-delete-copy { color: var(--app-text, #334155); }
.pi-delete-copy strong { color: var(--app-primary-dark, #1e3a8a); }
.pi-delete-note { color: var(--app-muted, #64748b); font-size: .85rem; }
.pi-delete-modal .modal-footer { gap: .5rem; padding: 0 2rem 1.5rem; border: 0; }
.pi-delete-modal .btn-danger { box-shadow: 0 5px 12px rgba(220, 38, 38, .18); }
@keyframes pi-delete-pop {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pi-delete-modal.fade .pi-delete-dialog { transition: none; }
  .pi-delete-icon { animation: none; }
}
@media (min-width: 992px) { .modal-wide { max-width: 1000px; } }
/* master-detail entry (booking sheet): order info on top, product rows below */
@media (min-width: 992px) { .modal-xwide { max-width: min(1340px, 97vw); } }
.item-table { --bs-table-bg: transparent; font-size: .85rem; min-width: 980px; table-layout: fixed; }
/* two of them side by side on a conversion's entry page: each as wide as its half of the page */
.item-table.item-table-half { min-width: 30rem; }
/* on an issue: the heading over the rows of a batch's additional / topping, after its dyeing recipe's */
.item-table tr.group-head td {
  padding: .3rem .7rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--app-primary-dark); background: rgba(37, 99, 235, .12); border-top: 2px solid rgba(37, 99, 235, .4);
}
[data-bs-theme='dark'] .item-table tr.group-head td { color: #93c5fd; }
.item-table tr.group-head + tr.item-row td { padding-top: .45rem; }
/* a quantity over what the recipe comes to of the item */
.item-table .over-recipe, .item-table .over-recipe:focus { color: var(--bs-danger); border-color: var(--bs-danger); font-weight: 700; }
.item-table td.over-recipe { border: 0; }
.item-table th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--menu-bg);
  white-space: nowrap;
  padding: .5rem .45rem;
  border: 0;
}
.item-table th:first-child { border-radius: 8px 0 0 8px; }
.item-table th:last-child { border-radius: 0 8px 8px 0; }
.item-table th .text-danger { color: #fca5a5 !important; }
.item-table tbody tr:first-child td { padding-top: .45rem; }
.item-table td { padding: .2rem .25rem; border: 0; vertical-align: top; }
.item-table tfoot td { padding-top: .5rem; border-top: 1px solid var(--app-border); vertical-align: middle; }
.item-table .form-control-sm, .item-table .form-select-sm { padding: .3rem .5rem; font-size: .85rem; }
.item-table .form-select-sm { padding-right: 1.75rem; }
.item-table input[type=number] { text-align: right; }
/* a voucher's account names are read off a long list: larger type in the box and in its list */
.voucher-table .form-select-sm { font-size: 1rem; }
/* its rows stand on a deeper shade, so the white boxes show up; the total line is deeper still */
.voucher-table tbody td { background: rgba(100, 116, 139, .16); }
.voucher-table tfoot td { background: rgba(100, 116, 139, .26); border-top: 0; padding-bottom: .5rem; }
.item-table .invalid-feedback { font-size: .7rem; }
/* a field marked wrong in a table row: the red edge only, as the warning sign would cover what is typed */
.item-table .form-control.is-invalid, .item-table .form-select.is-invalid { background-image: none; padding-right: .5rem; }
.item-table .form-select.is-invalid { padding-right: 1.75rem; --bs-form-select-bg-icon: none; }
/* a box of tick boxes of which one must be ticked, and none is (app.js) */
.modal-fieldset.is-invalid { border-color: var(--bs-danger); box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .18); }
.modal-fieldset.is-invalid > legend { color: var(--bs-danger); }
/* A finish delivery's rows are batch by batch: each batch has a heading line (its batch no, typed, with
   its order no and buyer) over its fabrics (deliveries.js). The heading stands a little off the batch above. */
.item-table tr.batch-head td {
  padding: .35rem .5rem; vertical-align: middle;
  border-top: .5rem solid transparent; background: rgba(37, 99, 235, .3); background-clip: padding-box;
  box-shadow: inset 0 2px 0 var(--app-primary);
}
.item-table tbody tr.batch-head:first-child td { border-top-width: .25rem; }
/* the batches are banded in two colours in turn, blue then green: the rows of a batch stand on a
   light shade of its heading's colour */
.item-table tr.batch-head ~ tr.item-row td { background: rgba(37, 99, 235, .05); }
.item-table tr.batch-head.batch-alt td { background-color: rgba(13, 148, 136, .32); box-shadow: inset 0 2px 0 #0d9488; }
/* the fabric type of a row is the batch's, shown in a locked box: it is sent, but cannot be opened or changed */
.item-table select.select-locked {
  pointer-events: none; background-image: none; padding-right: .5rem;
  background-color: transparent; color: var(--app-text); font-weight: 600;
}
.item-table tr.batch-head ~ tr.item-row.batch-alt td { background: rgba(13, 148, 136, .07); }
/* The entry page of a received LC, laid out as the LC is: the labels in one width whatever the box
   takes (one place or two of the three on a line), the currency a short list before the value, the
   days of the draft a short box before what they are counted from; and the table of its papers. */
.lc-fields .field-inline > .form-label { flex-basis: 8.4rem; white-space: normal; padding-top: .35rem; line-height: 1.2; }
/* its five parts each stand on a light shade of their own colour, with the heading and the frame in
   that colour: blue, teal, amber, violet, green. The shades are see-through, so they sit on the
   light and on the dark page alike. */
.lc-part { --part: 37, 99, 235; background: rgba(var(--part), .08); border-color: rgba(var(--part), .35); }
.modal-fieldset.lc-part > legend { color: rgb(var(--part)); }
.lc-part-2 { --part: 13, 148, 136; }
.lc-part-3 { --part: 217, 119, 6; }
.lc-part-4 { --part: 124, 58, 237; }
.lc-part-5 { --part: 22, 163, 74; }
.lc-part .form-control:not(.field-locked), .lc-part .form-select:not(.field-locked), .lc-part .input-group-text { background-color: var(--app-surface); }
.lc-part .data-table { --bs-table-bg: transparent; }
/* The item table of an export document: a heading in the colour of its part, the lines on the
   page's surface, and the totals on a shade of the colour. */
.export-items { --bs-table-bg: var(--app-surface); border: 1px solid rgba(13, 148, 136, .35); border-radius: .5rem; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.export-items thead th { background: #0d9488; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; padding: .55rem .6rem; border: 0; }
.export-items td { vertical-align: middle; padding: .35rem .6rem; }
.export-items td .form-control { min-width: 6.5rem; padding-top: .3rem; padding-bottom: .3rem; }
.export-items tfoot td { background: rgba(13, 148, 136, .14); font-weight: 700; border-bottom: 0; }
/* the New Ship box is the one to fill in: marked so it stands out from the rest of the line */
.export-items .export-new-ship { background: #fef3c7; border: 2px solid #f59e0b; font-weight: 700; color: #78350f; }
.export-items .export-new-ship:focus { border-color: #d97706; box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .3); }
[data-bs-theme='dark'] .export-items .export-new-ship { background: rgba(245, 158, 11, .16); color: #fde68a; }
.export-items .export-new-ship.over-recipe { border-color: var(--bs-danger); color: var(--bs-danger); }
/* what the LC of the invoice says, at a glance: a row of small cards */
.lc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
@media (min-width: 992px) { .lc-facts { grid-template-columns: repeat(4, 1fr); } }
/* the box a proforma invoice is picked in: narrow buttons, so its number has the room */
#piPicked { padding-left: .55rem; padding-right: .35rem; }
#piClear, #piClear + #piPicked + .btn { padding-left: .7rem; padding-right: .7rem; }
.lc-facts > div { background: var(--app-surface); border: 1px solid rgba(37, 99, 235, .25); border-left: 3px solid var(--app-primary); border-radius: .5rem; padding: .35rem .6rem; min-width: 0; }
.lc-facts span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--app-muted); }
.lc-facts strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.header-bank > div { width: 19rem; }
.lc-value .form-select { flex: 0 0 5.2rem; padding-right: 1.6rem; }
.lc-days { flex: 0 0 9rem; width: 9rem; }
.lc-documents th:not(:first-child), .lc-documents td:not(:first-child) { width: 6.5rem; }
.lc-documents td { vertical-align: middle; padding-top: .2rem; padding-bottom: .2rem; }
.lc-documents .form-control { padding-top: .25rem; padding-bottom: .25rem; }
/* a box of an entry form that is filled from elsewhere (a received LC's client and value, from its
   proforma invoices): it is sent, but cannot be opened or typed in */
.field-locked, .field-locked:focus {
  pointer-events: none; background-color: var(--bs-secondary-bg); background-image: none; box-shadow: none;
}
.item-table tr.batch-head .form-control { width: 10rem; }
/* a recipe's treatment heading: its name stands out, and its liquor ratio is a short box */
.item-table tr.stage-head .form-select.stage-treatment { width: 15rem; font-weight: 700; }
/* a recipe's treatments are each a <tbody>: the heading of one after the first stands off the one above, as a batch's does */
.item-table tbody[data-part] ~ tbody[data-part] tr.batch-head td { border-top-width: .5rem; }
.item-table tr.stage-head .form-control.stage-ratio { width: 5.5rem; text-align: right; }
.item-table tr.batch-head .batch-meta { margin-left: .75rem; font-size: .82rem; color: var(--app-text); }
.item-table tr.batch-head .batch-note { margin-left: .75rem; font-size: .8rem; font-weight: 600; color: var(--bs-danger); }
/* a warning on a batch's heading line: it is taken all the same, so in amber, not in the red of what is refused */
.item-table tr.batch-head .batch-warning { margin-left: .75rem; padding: .1rem .5rem; border-radius: 6px; font-size: .8rem; font-weight: 700; color: #92400e; background: rgba(245, 158, 11, .25); }
.item-table tr.batch-head .batch-warning:empty { display: none; }
[data-bs-theme='dark'] .item-table tr.batch-head .batch-warning { color: #fcd34d; }
/* the reminder that a batch is only dyed (delivered without finishing): bright yellow, dark letters on it in both themes */
.item-table tr.batch-head .batch-warning.batch-reminder { color: #422006; background: #fde047; }
[data-bs-theme='dark'] .item-table tr.batch-head .batch-warning.batch-reminder { color: #422006; }
.item-table tr.batch-head ~ tr.item-row td:first-child { padding-left: 1.25rem; }
/* a row with no batch yet: only its heading line is seen */
.item-table tr.item-row.no-batch { display: none; }

.chip { display: inline-block; margin: .1rem .25rem .1rem 0; padding: .05rem .55rem; border-radius: 999px; background: rgba(37, 99, 235, .1); color: var(--app-primary-dark); font-size: .78rem; font-weight: 600; }
[data-bs-theme='dark'] .chip { color: #93c5fd; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .35rem 1rem; padding-top: .25rem; }
.check-grid .form-check-input { border: 2px solid #475569; cursor: pointer; }
.check-grid .form-check-label { cursor: pointer; }
.check-grid-single { grid-template-columns: 1fr; }
.check-bold .form-check-label { font-weight: 700; }
.check-large .form-check-label { font-size: 1.15em; }
/* tick boxes side by side in one row, and lists of them side by side as columns */
.check-row { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.check-row-tint { background: rgba(100, 116, 139, .18); border-radius: .4rem; padding: .45rem .7rem; margin-top: .25rem; }
/* a select that stands out from the boxes around it: the one that sets all the rows of a table */
.select-tint { background-color: rgba(37, 99, 235, .14); border-color: rgba(37, 99, 235, .45); font-weight: 600; }
/* a report whose lines share cells (one batch, several fabrics): a line round every cell, the shared ones in the middle */
.report-lined th, .report-lined td { border: 1px solid rgba(100, 116, 139, .4); }
.report-lined td[rowspan] { vertical-align: middle; }
/* a date box beside a report's title: no wider than a date (the class, not a style, as the box shown
   in its place copies the classes of the field: see calendar.js) */
.form-control.date-narrow { width: 9.5rem; }
/* narrower still, with less room at its sides: where a line holds many boxes (Grey Stock) */
.form-control.date-tight { width: 7.6rem; padding-left: .6rem; padding-right: .6rem; }
/* a head of two rows (Party Summary): each row lower, so the two stand little higher than one */
.report-head-tight thead th { padding-top: .2rem; padding-bottom: .2rem; }
/* a heading with a light shade behind it, and its words a little darker to be read on it */
.report-head-shade thead th { background: rgba(100, 116, 139, .16); color: var(--app-text); }
/* and one in colours: each set of its columns has a tint of its own, with a line of that colour under it */
.report-head-shade thead th[class*="th-tone-"] { background: rgba(var(--th-tone), .2); border-bottom-color: rgba(var(--th-tone), .6); }
.th-tone-blue { --th-tone: 37, 99, 235; }
.th-tone-green { --th-tone: 16, 185, 129; }
.th-tone-amber { --th-tone: 245, 158, 11; }
.th-tone-violet { --th-tone: 124, 58, 237; }
.th-tone-cyan { --th-tone: 6, 182, 212; }
/* no stripes, nor a row lit under the mouse: a shared cell is of several lines at once; and a line's
   first cell is not always the table's first */
.report-lined.data-table tbody tr td, .report-lined.data-table tbody tr:hover td { background: transparent; }
.report-lined.data-table th:first-child, .report-lined.data-table td:first-child { padding-left: .5rem; }
/* Daily Production Report: columns of set widths, so that it fits a portrait page. What is too long
   for a .cell-cut column is cut off at the column's right edge. */
.daily-report { table-layout: fixed; min-width: 70rem; }
.daily-report th { overflow-wrap: normal; word-break: normal; padding-left: .5rem; padding-right: .5rem; }
.cell-cut { white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* the re-dyeing report: every cell has the same small padding at both sides, so each column has the
   whole of its width for what it holds; a long name breaks inside its column */
.redyeing-report th, .redyeing-report td { padding-left: .45rem !important; padding-right: .45rem !important; overflow-wrap: anywhere; }
.redyeing-report th { white-space: nowrap; }
@media print {
  .redyeing-report th, .redyeing-report td { padding-left: .8mm !important; padding-right: .8mm !important; }
}
@media print {
  .daily-report { min-width: 0; width: 100%; font-size: 7pt; }
  .daily-report th, .daily-report td { padding: .8mm 1mm !important; overflow: hidden; }
  .daily-report th { padding: .8mm .6mm !important; font-size: 6pt; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
}
/* the fabrics of a batch on a production: a line round every cell, so each fabric is told from the next */
.item-table.item-table-lined tbody td { padding: .4rem .5rem; border: 1px solid rgba(100, 116, 139, .5); }
.item-table.item-table-lined tbody tr:first-child td { border-top: 0; }
.item-table.item-table-lined .process-line:last-of-type { margin-bottom: .35rem; }
/* a fabric's finishing processes on a finishing production, one to a line: tick, process, times */
.process-line { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; }
.process-line .form-check-input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; border: 2px solid #475569; cursor: pointer; }
.process-line .form-control { flex: none; width: 4.2rem; }
.process-line .form-select:disabled, .process-line .form-control:disabled { opacity: .5; }
/* deeper still: the box an entry page starts from (the batch no of a production) */
.input-deep, .input-deep:focus { background-color: rgba(37, 99, 235, .2); border-color: var(--app-primary); font-weight: 700; }
.input-deep::placeholder { color: var(--app-text); opacity: .65; font-weight: 400; }
.check-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem 2.5rem; }
/* tight enough for ten names on one line of a laptop screen */
.check-rows .check-row { column-gap: .55rem; }
.check-rows.check-large .form-check-label { font-size: 1.05em; }
.check-rows .check-row + .check-row { margin-top: .5rem; padding-top: .35rem; border-top: 1px dashed rgba(100, 116, 139, .4); }
.check-columns-below { margin-top: .6rem; padding-top: .35rem; border-top: 1px dashed rgba(100, 116, 139, .4); }
.alert-lock { background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .45); color: var(--app-text); padding: .6rem .9rem; font-size: .88rem; }
.alert-lock i { color: #d97706; }
/* The list of items under a box an item's name is typed in (chem.js): a card over the page, a line
   to an item with its name at the left and what the store has of it at the right. */
.item-menu {
  position: fixed; z-index: 1080; max-height: 300px; overflow-y: auto; padding: .3rem;
  background: var(--bs-body-bg); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: .7rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
  font-size: .86rem;
}
.item-menu-line {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .4rem .65rem; border-radius: .45rem; cursor: pointer;
}
.item-menu-line + .item-menu-line { margin-top: 1px; }
.item-menu-line:hover { background: rgba(37, 99, 235, .08); }
.item-menu-line.is-active { background: #2563eb; color: #fff; }
.item-menu-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-menu-name mark { padding: 0; background: rgba(245, 158, 11, .35); color: inherit; border-radius: 2px; }
.item-menu-stock {
  flex: none; padding: .05rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums; background: rgba(5, 150, 105, .14); color: #047857;
}
.item-menu-stock.is-none { background: rgba(100, 116, 139, .16); color: #64748b; }
.item-menu-line.is-active .item-menu-stock { background: rgba(255, 255, 255, .22); color: #fff; }
.item-menu-note { padding: .5rem .65rem; color: #64748b; font-size: .8rem; text-align: center; }
[data-bs-theme='dark'] .item-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
[data-bs-theme='dark'] .item-menu-line:hover { background: rgba(96, 165, 250, .16); }
[data-bs-theme='dark'] .item-menu-stock { color: #6ee7b7; }
[data-bs-theme='dark'] .item-menu-stock.is-none { color: #94a3b8; }
/* what the last action came to ("... saved."), at the head of a page: as wide as what it says, with its close button */
.alert-message { display: inline-block; max-width: 100%; margin-bottom: .5rem; padding: .4rem 2.5rem .4rem .8rem; font-size: .9rem; font-weight: 600; }
.alert-message .btn-close { padding: .65rem .75rem; font-size: .7rem; }
/* Its colour says how it went: green saved, red refused, amber a warning, blue a note. A soft wash
   of the colour running a little deeper to the right, dark writing of the same colour, its sign in
   a round of the full colour at the left, and a light shadow that lifts it off the page. */
.alert-message {
  --from: #f8fafc; --to: #e2e8f0; --edge: #cbd5e1; --ink: #334155; --sign: #64748b; --glow: 100, 116, 139;
  display: inline-flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, var(--from), var(--to)); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(var(--glow), .22), 0 1px 2px rgba(15, 23, 42, .06);
  padding-left: .4rem;
}
.alert-message > .bi {
  display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--sign); color: #fff; font-size: .85rem;
}
.alert-message.alert-success { --from: #ecfdf5; --to: #d1fae5; --edge: #6ee7b7; --ink: #065f46; --sign: #059669; --glow: 5, 150, 105; }
.alert-message.alert-danger { --from: #fef2f2; --to: #fee2e2; --edge: #fca5a5; --ink: #991b1b; --sign: #dc2626; --glow: 220, 38, 38; }
.alert-message.alert-warning { --from: #fffbeb; --to: #fef3c7; --edge: #fcd34d; --ink: #92400e; --sign: #d97706; --glow: 217, 119, 6; }
.alert-message.alert-info { --from: #eff6ff; --to: #dbeafe; --edge: #93c5fd; --ink: #1e40af; --sign: #2563eb; --glow: 37, 99, 235; }
/* on the dark theme: the same colours, deep, with light writing */
[data-bs-theme='dark'] .alert-message { --from: #1e293b; --to: #0f172a; --edge: #475569; --ink: #e2e8f0; }
[data-bs-theme='dark'] .alert-message.alert-success { --from: #064e3b; --to: #022c22; --edge: #047857; --ink: #a7f3d0; }
[data-bs-theme='dark'] .alert-message.alert-danger { --from: #7f1d1d; --to: #450a0a; --edge: #b91c1c; --ink: #fecaca; }
[data-bs-theme='dark'] .alert-message.alert-warning { --from: #78350f; --to: #451a03; --edge: #b45309; --ink: #fde68a; }
[data-bs-theme='dark'] .alert-message.alert-info { --from: #1e3a8a; --to: #172554; --edge: #1d4ed8; --ink: #bfdbfe; }
[data-bs-theme='dark'] .alert-message .btn-close { filter: invert(1) grayscale(1) brightness(2); }
/* a form's own error, as wide as what it says and one line high */
.alert-fit { display: inline-block; max-width: 100%; margin-bottom: .5rem; padding: .35rem .75rem; font-size: .88rem; font-weight: 600; }
.alert-fit .errorlist { margin: 0; padding: 0; list-style: none; }
.row-lock { display: inline-grid; place-items: center; width: 30px; height: 30px; color: #d97706; }.form-select:disabled { background-color: rgba(100, 116, 139, .1); cursor: not-allowed; }
.item-table .col-info { color: var(--app-text); font-size: .82rem; padding-top: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-inline .date-locked { margin-top: .15rem; }

.item-table .col-stock { color: var(--app-text); font-size: .82rem; font-weight: 600; padding-top: .5rem; text-align: right; white-space: nowrap; }
/* two-line heading: only the outer corners of the whole block are rounded */
.item-table thead tr + tr th:first-child,
.item-table thead tr + tr th:last-child { border-radius: 0; }
.item-table .col-wrap { white-space: normal; }
.item-table th.th-group { text-align: center; border-left: 1px solid rgba(255, 255, 255, .25); border-right: 1px solid rgba(255, 255, 255, .25); }
/* coloured lines between the heading cells, for a heading of two rows */
.item-table-lined th { border-right: 1px solid rgba(96, 165, 250, .75); padding-top: .2rem; padding-bottom: .2rem; text-align: center !important; vertical-align: middle; }
.item-table-lined thead tr:first-child th:last-child { border-right: 0; }
.item-table-lined th.th-group { border-left: 0; border-right: 1px solid rgba(96, 165, 250, .75); border-bottom: 1px solid rgba(96, 165, 250, .75); }
.item-table th small { display: block; font-size: .62rem; font-weight: 600; opacity: .85; letter-spacing: .04em; }
/* the greige transfer form: what a row takes from is told from what it gives to by a tint each */
.transfer-table tbody td.transfer-from { background: rgba(249, 115, 22, .1); }
.transfer-table tbody td.transfer-to { background: rgba(13, 148, 136, .1); }
/* and its heading has the two in colours of their own, orange and teal, over the headings of their columns */
.transfer-table thead th.th-from { background: linear-gradient(135deg, #f97316, #ea580c); }
.transfer-table thead th.th-to { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.transfer-table thead th.th-from.th-under { background: #c2410c; }
.transfer-table thead th.th-to.th-under { background: #0f766e; }
.transfer-table thead th.th-from, .transfer-table thead th.th-to { border-color: rgba(255, 255, 255, .45); }
.transfer-table thead th.th-from .text-danger, .transfer-table thead th.th-to .text-danger { color: #fff !important; }
.transfer-table tbody td { vertical-align: middle; }
/* a fabric is said at length (type, colour, GSM and width): a little smaller, and its box set close, to be read whole */
.transfer-table [data-fabric-select] { font-size: .76rem; padding-left: .4rem; padding-right: 1.4rem; background-position: right .35rem center; }
.transfer-table [data-order-select] { padding-left: .4rem; padding-right: 1.3rem; background-position: right .3rem center; }
.transfer-table tbody td { padding-left: .3rem; padding-right: .3rem; }
.transfer-table thead th { padding-left: .25rem; padding-right: .25rem; }
.balance-table { font-size: .85rem; }
.balance-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--menu-bg); white-space: nowrap; }
.balance-table th, .balance-table td { padding: .35rem .5rem; vertical-align: middle; }
.balance-table tr.is-off td { color: var(--app-muted); }
.balance-table .form-check-input { width: 1.2em; height: 1.2em; margin-top: .1em; border: 2px solid #475569; cursor: pointer; }
.balance-table th .form-check-input { border-color: #fff; background-color: transparent; }
.balance-table .form-check-input:disabled { border-color: #cbd5e1; cursor: not-allowed; }
.balance-table tbody tr:not(.is-off) { cursor: pointer; }
.balance-table tbody tr.is-picked td { background: rgba(37, 99, 235, .1); }
/* a dyeing batch is of one color: a fabric of another cannot be ticked */
.balance-table tbody tr.is-other-color td { color: var(--app-muted); opacity: .55; cursor: not-allowed; }
.auto-field { background-color: rgba(100, 116, 139, .1) !important; }
/* "Bill Received": the items of one challan stand together, a line between one challan and the next */
.bill-table { font-size: .92rem; }
.bill-table tbody tr { cursor: default !important; }
.bill-table th { padding: .5rem .75rem; }
.bill-table td { padding: .4rem .75rem; vertical-align: middle; border-color: rgba(100, 116, 139, .22); }
.bill-table tbody.challan tr:first-child td { border-top: 2px solid rgba(100, 116, 139, .5); }
.bill-table tbody.challan tr:hover td { background: rgba(245, 158, 11, .14); }
.bill-item { font-weight: 700; }
.bill-unit { color: var(--app-muted); font-size: .8rem; }
/* the unit price box keeps to the right of its column, under its heading */
.bill-table td .form-control-sm { max-width: 9.5rem; margin-left: auto; font-weight: 700; }
.bill-table td .invalid-feedback { text-align: right; }
.bill-table tfoot td { background: rgba(100, 116, 139, .2); border-top: 2px solid rgba(100, 116, 139, .5); }
/* the items and the account lines together: the figure the bill comes to */
.net-bill {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1.5rem;
  margin-top: .75rem;
  padding: .6rem 1.25rem;
  border-radius: .6rem;
  background: rgba(37, 99, 235, .12);
  font-size: 1.15rem;
  font-weight: 800;
}
.net-bill .num { min-width: 10rem; text-align: right; }
/* the net bill amount in words, under it */
.net-bill-words { margin-top: .35rem; padding: 0 1.25rem; text-align: right; font-size: .9rem; font-weight: 600; font-style: italic; }
.net-bill-words-label { font-style: normal; font-weight: 700; color: var(--app-muted); }
.bill-table tbody + tbody { border-top: 2px solid rgba(100, 116, 139, .4); }
/* a bill issue's delivery lines: as wide as the page and no wider, each column its share (the
   <colgroup>), long words wrapping and the boxes filling their cells */
.bill-lines { table-layout: fixed; width: 100%; }
.bill-lines th { white-space: normal; padding: .4rem .35rem; line-height: 1.2; }
.bill-lines td { padding: .35rem .35rem; overflow-wrap: anywhere; }
.bill-lines td .form-control-sm, .bill-lines td .input-group { width: 100%; max-width: none; }
.bill-lines td .input-group .form-control { min-width: 0; padding-left: .3rem; padding-right: .3rem; }
.bill-lines td .input-group-text { padding-left: .3rem; padding-right: .3rem; }
.bill-lines td .form-control-sm { padding-left: .3rem; padding-right: .3rem; }
/* (no arrows in the number boxes: room for the number) */
.bill-lines input[type="number"] { -moz-appearance: textfield; }
.bill-lines input[type="number"]::-webkit-inner-spin-button, .bill-lines input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* a small screen cannot hold it: there it keeps a width to work in, and scrolls */
@media (max-width: 1199.98px) { .bill-lines { min-width: 88rem; } }
/* a line's price: where it is from, as a link to how it is made (the price details) */
.bill-lines .price-how { display: block; width: 100%; padding: 0; margin-top: .1rem; font-size: .75rem; text-align: right; text-decoration: none; line-height: 1.2; }
.bill-lines .price-how:hover { text-decoration: underline; }
/* a fabric's W-Type as a round tag, a colour for each: tube blue, open green */
.wtype-pill {
  display: inline-block; padding: .18rem .65rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
.wtype-tube { background: #0284c7; }
.wtype-open { background: #16a34a; }
[data-bs-theme="dark"] .wtype-tube { background: #0ea5e9; color: #082f49; }
[data-bs-theme="dark"] .wtype-open { background: #22c55e; color: #052e16; }
/* Kept compact, so the whole sum down to the price per unit is in view without scrolling: the
   facts each a label and its value on one line, the processes a line of their own across the box */
#priceModal .price-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-bottom: .6rem; padding: .45rem .75rem; border-radius: .5rem; background: rgba(100, 116, 139, .1); font-size: .85rem; }
#priceModal .price-facts > div { display: flex; align-items: baseline; gap: .4rem; }
#priceModal .price-facts dt { font-size: .72rem; font-weight: 600; color: var(--app-muted); }
#priceModal .price-facts dd { margin: 0; font-weight: 600; }
#priceModal .price-facts .price-fact-wide { flex-basis: 100%; flex-wrap: wrap; gap: .1rem .4rem; padding-top: .3rem; border-top: 1px solid rgba(100, 116, 139, .2); }
/* Costing (Accounts > Costing): the figures at a glance, the batch's facts, the cost by category */
.costing-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.costing-tile {
  display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: .6rem;
  border: 1px solid var(--app-border); border-left-width: 4px; background: var(--app-surface);
}
.costing-tile span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.costing-tile strong { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.costing-tile small { font-size: .78rem; color: var(--app-muted); font-weight: 600; }
.costing-tile.tile-chem { border-left-color: #0d9488; }
.costing-tile.tile-overhead { border-left-color: #8b5cf6; }
.costing-tile.tile-redyeing { border-left-color: #e11d48; }
.costing-heading.costing-heading-redyeing { color: #be123c; }
.costing-tile.tile-cost { border-left-color: #f59e0b; }
.costing-tile.tile-billed { border-left-color: #2563eb; }
.costing-tile.tile-profit { border-left-color: #16a34a; }
.costing-tile.tile-profit strong { color: #15803d; }
.costing-tile.tile-loss { border-left-color: #dc2626; }
.costing-tile.tile-loss strong { color: #b91c1c; }
[data-bs-theme="dark"] .costing-tile.tile-profit strong { color: #4ade80; }
[data-bs-theme="dark"] .costing-tile.tile-loss strong { color: #f87171; }
.costing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .4rem 1.25rem; margin: .5rem 0 0; }
.costing-facts dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.costing-facts dd { margin: 0; font-weight: 600; }
/* the process, the longest: three columns' width on a wide screen, the whole row on a narrow one */
.costing-facts .costing-fact-wide { grid-column: span 3; }
@media (max-width: 991.98px) { .costing-facts .costing-fact-wide { grid-column: 1 / -1; } }
.costing-heading { font-size: .95rem; font-weight: 800; margin: 1rem 0 .4rem; color: var(--app-primary); }
/* Batch Costing: the batch search on the heading's line */
.batch-costing-search { width: 17rem; max-width: 100%; }
@media (max-width: 575.98px) { .batch-costing-search { width: 100%; } }
/* a heading with its "Details" button at the right */
.costing-heading-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0 .4rem; }
.costing-heading-row .costing-heading { margin: 0; }
.costing-bar { height: .55rem; border-radius: 999px; background: rgba(100, 116, 139, .15); overflow: hidden; }
.costing-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #ea580c); }
/* Batch Costing, laid out: the batch and its four figures (left), the costing (right), then a section
   for each part, each with the same head (its name, per kg and total, and "Details") */
/* room inside the card: its row of two columns reaches out by its gutter, which would cut the
   batch's facts off at the left */
.costing-page { padding: .75rem 1.25rem 1.25rem; }
/* one left and right edge for the whole page: the head takes the card's, and its title line is its only rule */
.costing-page .report-head { padding: 0; border-bottom: 0; }
.costing-page .costing-note { margin-top: 1rem; }
@media (max-width: 575.98px) { .costing-page { padding-left: .75rem; padding-right: .75rem; } }
.costing-top { margin-top: 0; }
.costing-top .costing-facts { margin-top: 0; }
/* the title line: the batch no at the left, "Batch Costing" in the middle, the date at the right */
.costing-title-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0 0 .7rem; margin-bottom: .9rem; border-bottom: 1px solid var(--app-border); }
.costing-title-side { font-size: .95rem; }
.costing-title-side span { color: var(--app-muted); font-weight: 600; }
.costing-title-side strong { font-size: 1.05rem; font-weight: 800; }
@media (max-width: 575.98px) { .costing-title-row { grid-template-columns: 1fr 1fr; } .costing-title-row .report-title { grid-column: 1 / -1; grid-row: 1; text-align: center; } }
.costing-facts .costing-fact-full { grid-column: 1 / -1; }
.costing-sheet-box { height: 100%; border: 1px solid var(--app-border); border-radius: .6rem; padding: .75rem .9rem; background: var(--app-surface); }
.costing-sheet-title { font-weight: 800; color: var(--app-primary); margin-bottom: .5rem; }
.costing-sheet-title span { font-weight: 500; font-size: .8rem; color: var(--app-muted); margin-left: .35rem; }
.costing-split { display: flex; height: .65rem; border-radius: 999px; overflow: hidden; background: rgba(100, 116, 139, .15); margin-bottom: .6rem; }
.costing-split span { display: block; height: 100%; }
.costing-split .split-chem, .dot-chem { background: #0d9488; }
.costing-split .split-redyeing, .dot-redyeing { background: #e11d48; }
.costing-split .split-overhead, .dot-overhead { background: #8b5cf6; }
.costing-sheet .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .45rem; vertical-align: .05em; }
.costing-section { margin-top: 1rem; border: 1px solid var(--app-border); border-left-width: 4px; border-radius: .6rem; overflow: hidden; break-inside: avoid; }
.costing-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem .9rem; background: rgba(100, 116, 139, .07); border-bottom: 1px solid var(--app-border); }
.costing-section-head h2 { margin: 0 auto 0 0; font-size: .98rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; }
.costing-section-head h2 small { font-size: .78rem; font-weight: 500; color: var(--app-muted); }
.costing-section-figures { display: flex; align-items: baseline; gap: .75rem; font-variant-numeric: tabular-nums; }
.costing-section-figures span { font-size: .82rem; font-weight: 600; color: var(--app-muted); }
.costing-section-figures strong { font-size: 1.1rem; font-weight: 800; }
.costing-section .costing-details { border-top: 1px dashed var(--app-border); background: rgba(100, 116, 139, .04); }
/* "Details" of Dyes & Chemical and of Re-Dyeing, alike: a bar (the re-dyeing batch, the issue numbers,
   how many items), then SL / Item / Qty / Rate / Amount; the head and the bar in the section's
   color (--tone: teal for the dyes & chemicals, rose for the re-dyeing) */
.section-chem { --tone: 13, 148, 136; }
.section-redyeing { --tone: 225, 29, 72; }
.costing-items table { table-layout: fixed; width: 100%; }
.costing-items th:nth-child(1) { width: 3.2rem; }
.costing-items th:nth-child(2) { width: auto; }
.costing-items th:nth-child(3) { width: 8.5rem; }
.costing-items th:nth-child(4) { width: 7rem; }
.costing-items th:nth-child(5) { width: 9rem; }
.costing-items th, .costing-items td { padding: .45rem .75rem !important; vertical-align: middle; }
.costing-items thead th { background: rgba(var(--tone), .1); color: rgb(var(--tone)); border-bottom: 2px solid rgba(var(--tone), .35); font-size: .72rem; }
.costing-items tbody tr:nth-child(even) td { background: rgba(100, 116, 139, .045); }
.costing-items tbody tr:hover td { background: rgba(var(--tone), .06); }
.costing-items .costing-item-name { font-weight: 600; overflow-wrap: anywhere; }
.costing-items .costing-unit { font-size: .75rem; color: var(--app-muted); }
.costing-items tfoot td { font-weight: 800; background: rgba(var(--tone), .06); border-top: 2px solid rgba(var(--tone), .35); }
/* the issue numbers on a section's head line, beside its name */
.costing-head-issues { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-left: .6rem; font-size: .8rem; font-weight: 500; }
.costing-items-label { color: var(--app-muted); font-weight: 600; }
.costing-chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid rgba(var(--tone), .4); background: rgba(var(--tone), .08); font-weight: 700; font-size: .78rem; }
.costing-items + .costing-items { border-top: 3px solid rgba(var(--tone), .25); }
/* a section showing nothing under its head (none, or its details closed): the head alone, unruled */
.costing-section-head:last-child, .costing-section-head:has(+ .collapse:not(.show):not(.collapsing)) { border-bottom: 0; }
.costing-section.section-chem { border-left-color: #0d9488; }
.costing-section.section-chem h2 i { color: #0d9488; }
.costing-section.section-redyeing { border-left-color: #e11d48; }
.costing-section.section-redyeing h2 i { color: #e11d48; }
.costing-section.section-overhead { border-left-color: #8b5cf6; }
.costing-section.section-overhead h2 i { color: #8b5cf6; }
.costing-section.section-billed { border-left-color: #2563eb; }
.costing-section.section-billed h2 i { color: #2563eb; }
/* the costing, total and per kg: its totals stand out */
.costing-sheet td { font-size: .95rem; }
.costing-sheet .costing-sheet-total td { font-weight: 800; border-top: 2px solid var(--app-text); }
.costing-sheet .is-profit td { color: #15803d; }
.costing-sheet .is-loss td { color: #b91c1c; }
[data-bs-theme="dark"] .costing-sheet .is-profit td { color: #4ade80; }
[data-bs-theme="dark"] .costing-sheet .is-loss td { color: #f87171; }
/* Costing Summary: its choices on one line (party, batch type, billing, search, the dates and the
   buttons), each as wide as it needs; the party and the search share what is left. On a narrow
   screen they wrap. */
.costing-toolbar .form-select { min-width: 0; }
.costing-toolbar .report-field { flex: 0 0 auto; }
.costing-toolbar .report-field-wide { flex: 1 1 11rem; min-width: 9rem; max-width: 20rem; }
.costing-toolbar .field-kind { width: 8.5rem; }
.costing-toolbar .field-billing { width: 7.5rem; }
.costing-toolbar .field-search { flex: 1 1 9rem; min-width: 8rem; max-width: 14rem; }
.costing-toolbar .field-date { width: 9.25rem; }
.costing-toolbar .btn { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 1200px) { .costing-toolbar { flex-wrap: nowrap; } }
/* Costing Summary: the party on one line, cut at the right where it is long */
.costing-party { max-width: 13rem; }
@media print { .costing-party { max-width: 40mm; } }
/* Costing Summary: the table on one page. Its headings may take two lines (the figures do not), the
   cells are close set, and the party gives way first; on a narrow screen it still scrolls. */
.costing-summary-table { width: 100%; font-size: .84rem; }
.costing-summary-table th { white-space: normal; line-height: 1.15; vertical-align: bottom; padding: .4rem .45rem !important; }
.costing-summary-table td { padding: .35rem .45rem !important; white-space: nowrap; }
.costing-summary-table td.costing-party { max-width: 11rem; }
/* Batch Price: a fabric a section, how its price is made (as the bill's price details), its bill lines beside */
.batch-price-fabric { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--app-border); break-inside: avoid; }
.batch-price-fabric-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.batch-price-fabric-title small { font-size: .8rem; font-weight: 600; color: var(--app-muted); }
.batch-price-page .price-sum, .batch-price-page .price-steps { font-size: .86rem; }
.batch-price-page .price-sum td, .batch-price-page .price-steps td { padding: .22rem .5rem; }
.batch-price-page .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.batch-price-page .price-base td { font-weight: 700; background: rgba(37, 99, 235, .07); padding-top: .35rem; padding-bottom: .35rem; }
.batch-price-page .price-row-info { margin-left: .35rem; font-size: .8rem; font-weight: 600; color: var(--app-primary); }
.batch-price-page .item-add .num { color: var(--bs-success-text-emphasis); font-weight: 600; }
.batch-price-page .item-off .num { color: #dc2626; font-weight: 700; }
.batch-price-page .price-total td { font-weight: 800; border-top: 2px solid var(--app-text); vertical-align: middle; }
.batch-price-page .price-final { font-size: 1.05rem; }
.batch-price-page .price-amount td { color: var(--app-muted); font-weight: 600; }
.batch-price-page .price-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.batch-price-page .tag-free { background: #dcfce7; color: #15803d; }
.batch-price-page .tag-nominus { background: #fef3c7; color: #92400e; }
.batch-price-page .tag-noprice { background: rgba(100, 116, 139, .15); color: var(--app-muted); }
.batch-price-page .price-steps tr.is-current td { background: rgba(14, 116, 144, .14); font-weight: 700; }
.batch-price-total { max-width: 36rem; margin-left: auto; }
/* the batch's facts in a box, three to a line: each its label and its value side by side */
.batch-price-page .batch-price-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0;
  border: 1px solid var(--app-border); border-radius: .4rem; overflow: hidden; }
.batch-price-page .batch-price-facts > div { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .65rem; border-bottom: 1px solid var(--app-border); }
.batch-price-page .batch-price-facts > div:nth-child(3n+2), .batch-price-page .batch-price-facts > div:nth-child(3n+3) { border-left: 1px solid var(--app-border); }
.batch-price-page .batch-price-facts > div:nth-last-child(-n+3) { border-bottom: 0; }
.batch-price-page .batch-price-facts dt { flex: none; width: 7.5rem; }
.batch-price-page .batch-price-facts dd { min-width: 0; }
@media (max-width: 767.98px) {
  .batch-price-page .batch-price-facts { grid-template-columns: 1fr; }
  .batch-price-page .batch-price-facts > div { border-left: 0 !important; border-bottom: 1px solid var(--app-border) !important; }
}
@media print {
  .batch-price-page .batch-price-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-color: #6b7280; }
  .batch-price-page .batch-price-facts > div { padding: 1.2mm 2mm; border-color: #6b7280 !important; }
  .batch-price-page .batch-price-facts dt { width: 24mm; font-size: 7.5pt; }
  .batch-price-page .batch-price-facts dd { font-size: 9pt; }
  /* the price and the bill lines side by side, as on a wide screen */
  .batch-price-fabric > .row { display: flex; flex-wrap: nowrap; }
  .batch-price-fabric > .row > .col-lg-7 { flex: 0 0 58%; max-width: 58%; }
  .batch-price-fabric > .row > .col-lg-5 { flex: 0 0 42%; max-width: 42%; }
  .batch-price-page .price-sum, .batch-price-page .price-steps { font-size: 8.5pt; }
  .batch-price-page .price-sum td, .batch-price-page .price-steps td, .batch-price-page .price-steps th { padding: .8mm 1.5mm; }
  .batch-price-fabric-title { font-size: 10pt; }
}
@media (min-width: 1400px) { .costing-summary-wrap { overflow-x: visible; } }
/* printed on A4 landscape, the table one page wide */
@page costing-summary { size: A4 landscape; margin: 8mm; }
@media print {
  .costing-summary-page { page: costing-summary; }
  .costing-summary-table { font-size: 8pt; table-layout: auto; }
  .costing-summary-table th, .costing-summary-table td { padding: .9mm 1.2mm !important; }
  .costing-summary-table th { font-size: 7.5pt; }
  .costing-summary-table td.costing-party { max-width: 38mm; }
}
.costing-note { margin: .75rem 0 0; font-size: .78rem; color: var(--app-muted); }
@media print { .costing-tile { break-inside: avoid; } }
/* Batch Costing printed as it is on the screen: the batch and the costing side by side, the colored
   bar, dots and section frames, the category bars and the profit's color (the print keeps colors) */
@media print {
  .costing-page, .costing-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .costing-page { padding: 0 1mm; }
  .costing-page .report-head { padding: 0; }
  .costing-page .costing-top { display: flex; flex-wrap: nowrap; }
  .costing-page .costing-top > .col-xl-5 { flex: 0 0 40%; max-width: 40%; }
  .costing-page .costing-top > .col-xl-7 { flex: 0 0 60%; max-width: 60%; }
  .costing-page .costing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5mm 4mm; }
  .costing-page .costing-facts dd { font-size: 9.5pt; }
  .costing-page .costing-sheet-box { border-color: #9ca3af; padding: 2.5mm 3mm; }
  .costing-page .costing-section { margin-top: 4mm; border-color: #9ca3af; }
  .costing-page .costing-section.section-chem { border-left-color: #0d9488; }
  .costing-page .costing-section.section-redyeing { border-left-color: #e11d48; }
  .costing-page .costing-section.section-overhead { border-left-color: #8b5cf6; }
  .costing-page .costing-section.section-billed { border-left-color: #2563eb; }
  .costing-page .costing-section-head { background: #f3f4f6; padding: 1.8mm 3mm; }
  .costing-page .costing-section .data-table { margin: 0; }
  .costing-page .costing-section .data-table th:first-child, .costing-page .costing-section .data-table td:first-child { border-left: 0 !important; }
  .costing-page .costing-section .data-table th:last-child, .costing-page .costing-section .data-table td:last-child { border-right: 0 !important; }
  .costing-page .costing-sheet .costing-sheet-total td { border-top: 2px solid #000 !important; }
  .costing-page .costing-sheet .is-profit td { color: #15803d !important; }
  .costing-page .costing-sheet .is-loss td { color: #b91c1c !important; }
  .costing-page .costing-sheet .text-muted { color: #4b5563 !important; }
}
/* Bill Issue view: a line's price, a link that opens how it is made */
.price-open { padding: 0; border: 0; font: inherit; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--app-primary); white-space: nowrap; }
.price-open:hover { text-decoration: underline; }
.price-open i { font-size: .75em; opacity: .7; }
/* Bill Issue: the challan-edit option, one row (a switch, what it allows beside it) */
.challan-edit-option {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .75rem; padding: .5rem .75rem;
  border: 1px dashed var(--app-border); border-radius: .5rem; background: rgba(100, 116, 139, .06);
}
.challan-edit-option .form-check-label { font-weight: 600; font-size: .88rem; cursor: pointer; }
.challan-edit-option .form-check-input { cursor: pointer; }
.challan-edit-help { font-size: .78rem; color: var(--app-muted); }
/* Bill Issue: less room above the lines table; its header stays at the top of the page while it is scrolled
   (below the app header: --sticky-top is set by bill_issue.js) */
.bill-lines-set { padding-top: .1rem; }
.bill-lines-toolbar { margin-bottom: .4rem; }
.bill-lines thead th { position: sticky; top: var(--sticky-top, 0px); z-index: 3; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15); }
/* its own colour (teal), so the header, stuck below the main menu, is told from it (navy) */
.bill-lines thead th { background: #0f766e; border-color: #0d5f59; }
[data-bs-theme="dark"] .bill-lines thead th { background: #115e59; border-color: #134e4a; }
/* a wrapper that scrolls sideways would hold the header in itself: on a wide screen (the table fits) it does not */
@media (min-width: 1200px) { .bill-lines-wrap { overflow: visible; } }
/* on a narrow one it scrolls both ways, so the header sticks to the top of the table's own box */
@media (max-width: 1199.98px) { .bill-lines-wrap { max-height: 75vh; overflow: auto; } .bill-lines thead th { top: 0; } }
/* Bill Issue: a line's boxes (Dyes %, Price, Adjust) on one line, whatever is under them (the price's
   details link, an error): the row goes by its top, and a cell of text is let down to the middle of a
   box (a small box is 1.5em + .5rem + 2px high; a line of text 1.5em) */
.bill-lines .line-row > td { vertical-align: top; }
/* Process: shown whole, in 3 lines at most: it has the width the others leave, and where that is not
   enough bill_issue.js makes its font smaller until it fits */
.bill-lines td.cell-process { font-size: .92rem; line-height: 1.3; overflow-wrap: normal; word-break: normal; }
.bill-lines .process-fit { line-height: 1.3; }
/* Description: 3 lines at most, the rest cut off with "…" (the whole of it shows on hover) */
.bill-lines .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Adjust: an adjustment entered is coloured, yellow when it adds to the price, reddish when it takes off */
#billIssueForm input.adjust-plus { border-color: #eab308; background-color: #fef08a; color: #713f12; font-weight: 800; }
#billIssueForm input.adjust-minus { border-color: #ef4444; background-color: #fecaca; color: #991b1b; font-weight: 800; }
[data-bs-theme="dark"] #billIssueForm input.adjust-plus { background-color: rgba(234, 179, 8, .3); color: #fde047; }
[data-bs-theme="dark"] #billIssueForm input.adjust-minus { background-color: rgba(239, 68, 68, .3); color: #fca5a5; }
/* Net Price: the price with its adjustment; coloured as the adjustment, and red-marked when not above 0 */
.bill-lines td.net-price { font-weight: 800; font-size: .98rem; }
.bill-lines td.net-up { color: #a16207; }
.bill-lines td.net-down { color: #b91c1c; }
[data-bs-theme="dark"] .bill-lines td.net-up { color: #facc15; }
[data-bs-theme="dark"] .bill-lines td.net-down { color: #f87171; }
.bill-lines td.net-bad { color: #fff !important; background: #dc2626 !important; }
/* zebra: every other line (bill_issue.js counts them across the challans); a hovered line still shows its own colour */
.bill-lines .line-row.row-alt:not(:hover) > td { background: #e0f7f2; }
[data-bs-theme="dark"] .bill-lines .line-row.row-alt:not(:hover) > td { background: rgba(45, 212, 191, .12); }
.bill-lines .line-row > td:not(.cell-input) { padding-top: calc(.35rem + .25rem + 1px); }
/* Bill Issue: the price is locked (Adjust changes what is billed); a line with no price found has its price box marked red */
#billIssueForm input[name^="rate-"][readonly] { background-color: #e8f0fe; border-color: #93b4f5; color: #1e3a8a; cursor: not-allowed; }
[data-bs-theme="dark"] #billIssueForm input[name^="rate-"][readonly] { background-color: rgba(59, 130, 246, .18); border-color: rgba(147, 180, 245, .5); color: #bfdbfe; }
/* the price, read at a glance: larger than the other boxes of the line */
#billIssueForm input[name^="rate-"] {
  font-size: 1.05rem; font-weight: 800; line-height: 1.2;
  /* as high as the line's other small boxes (Adjust beside it), so they stay on one line */
  min-height: 0; height: calc(1.5 * .875rem + .5rem + 2px); padding-top: 0; padding-bottom: 0;
}
#billIssueForm input[name^="rate-"].price-missing { border-color: var(--bs-danger); background-color: rgba(220, 38, 38, .08); box-shadow: 0 0 0 .15rem rgba(220, 38, 38, .25); }
#priceModal .price-source { font-size: .92rem; font-weight: 700; margin-bottom: .4rem; }
#priceModal .price-sum { font-size: .86rem; }
#priceModal .price-sum td { padding: .22rem .5rem; }
#priceModal .price-sum .price-base td, #priceModal .price-sum .price-total td { padding-top: .35rem; padding-bottom: .35rem; }
#priceModal .price-sum .num, #priceModal .price-steps .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#priceModal .price-add td { color: var(--bs-success-text-emphasis); }
#priceModal .price-off td { color: var(--bs-danger-text-emphasis); }
#priceModal .price-total td { font-weight: 800; border-top: 2px solid var(--app-text); }
#priceModal .price-base td { font-weight: 700; background: rgba(37, 99, 235, .07); }
#priceModal .price-total td { vertical-align: middle; }
#priceModal .price-final {
  display: inline-block; padding: .25rem .85rem; border-radius: 999px; background: var(--app-primary); color: #fff;
  font-size: 1rem; font-weight: 800; box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}
#priceModal .price-row-info { margin-left: .35rem; font-size: .8rem; font-weight: 600; color: var(--app-primary); }
#priceModal .item-add .num { color: var(--bs-success-text-emphasis); font-weight: 600; }
#priceModal .item-off .num { color: #dc2626; font-weight: 700; }
[data-bs-theme="dark"] #priceModal .item-off .num { color: #f87171; }
#priceModal .price-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
#priceModal .tag-free { background: #dcfce7; color: #15803d; }
#priceModal .tag-nominus { background: #fef3c7; color: #92400e; }
#priceModal .tag-noprice { background: rgba(100, 116, 139, .15); color: var(--app-muted); }
[data-bs-theme="dark"] #priceModal .tag-free { background: rgba(34, 197, 94, .18); color: #86efac; }
[data-bs-theme="dark"] #priceModal .tag-nominus { background: rgba(245, 158, 11, .18); color: #fcd34d; }
#priceModal .price-steps tr.is-current td { background: rgba(14, 116, 144, .14); font-weight: 700; }

/* top of a document's view page, laid out like its printed sheet: the addressee on the left, reference and date on the right */
.doc-intro { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; align-items: baseline; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem 1.5rem; }
.detail-grid dt { color: var(--app-muted); font-weight: 600; font-size: .78rem; }
.detail-grid dd { margin: 0; font-weight: 600; }
/* each detail on one line, the name then its value, where the plain grid has the name over the value */
.detail-grid.detail-inline { gap: .4rem 1.5rem; }
.detail-grid.detail-inline > div { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.detail-grid.detail-inline dt { flex: none; font-size: .85rem; }
.detail-grid.detail-inline dt::after { content: ':'; }
.detail-grid.detail-inline dd { overflow-wrap: anywhere; }
.modal-title i { color: var(--app-primary); }
.modal-fieldset {
  border: 1px solid var(--app-border);
  border-radius: .6rem;
  padding: .25rem 1rem 1rem;
  margin-bottom: 1rem;
}
.modal-fieldset legend {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--app-primary);
}
/* a heading with something to choose beside it, on the one line: the heading at the left, the box at the right */
.modal-fieldset legend.legend-row { display: flex; align-items: center; gap: .6rem; width: 100%; margin-bottom: .5rem; }
.modal-fieldset legend.legend-row .form-label { font-size: .8rem; white-space: nowrap; }
.modal-fieldset legend.legend-row .form-select { width: 22rem; max-width: 50%; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-control:disabled { background-color: rgba(100, 116, 139, .1); cursor: not-allowed; }

.audit-line { display: inline-block; font-size: .75rem; color: var(--app-muted); line-height: 1.5; }
.audit-line strong { color: var(--app-text); }
.audit-line i { margin-right: .3rem; }
.audit-sep { margin: 0 .4rem; }

.detail-list { display: grid; grid-template-columns: 11rem 1fr; gap: .7rem 1rem; }
/* in a narrow column the labels take less room */
.detail-list-narrow { grid-template-columns: 7.5rem 1fr; gap: .35rem .75rem; align-content: start; }
.detail-list dt { color: var(--app-muted); font-weight: 600; font-size: .85rem; }
.detail-list dd { margin: 0; font-weight: 500; }

.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  margin-right: .15rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
}
.btn-chip:hover { border-color: var(--app-primary); color: var(--app-primary); }
.data-table .row-group .btn-chip i { color: inherit; }
.btn-action:hover { background: rgba(37, 99, 235, .1); color: var(--app-primary); }
/* one that cannot be used here: the remove button of a recipe's row on an issue */
.btn-action:disabled, .btn-action:disabled:hover { opacity: .3; cursor: not-allowed; background: transparent; color: inherit; }
.btn-action-danger:hover { background: rgba(244, 63, 94, .12); color: #e11d48; }
/* a delete that cannot be used (the row is in use elsewhere): red, so it is told from one that can */
.btn-action-danger:disabled, .btn-action-danger:disabled:hover { opacity: .6; color: #e11d48; }
.data-table .row-group .btn-action i { color: inherit; }

.form-card { padding: 1.5rem; }
.form-card-compact { padding: 1rem .75rem; }
/* a long entry form: less empty space above its first box */
.form-card-tight { padding-top: .5rem; }
/* an entry form of two tables side by side (a chemical conversion): less room at the card's sides and
   at those of each table's box, so the tables are the wider */
.form-card-wide { padding-left: .6rem; padding-right: .6rem; }
.modal-fieldset.fieldset-wide { padding-left: .45rem; padding-right: .45rem; }
.form-section {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  margin: 1.75rem 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--app-border);
}
.form-section:first-of-type { margin-top: 0; }
.form-section i { color: var(--app-primary); }
[data-bs-theme='dark'] .form-section i { color: #93c5fd; }

.logo-preview {
  height: 180px;
  border: 2px dashed var(--app-border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-size: .85rem;
}
.logo-preview img { max-height: 148px; object-fit: contain; }
.pad-preview { height: 260px; }
.pad-preview img { max-height: 228px; border: 1px solid var(--app-border); }
.col-sl { width: 4rem; }
/* columns take the widths given on the headings; text too long for its column is cut with … */
.data-table.table-fixed { table-layout: fixed; }
.data-table .cell-fit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* column only as wide as its content, so the next column starts right after it */
.data-table .col-fit { width: 1%; white-space: nowrap; }
/* a little air between columns that sit close together */
.data-table th.col-fit, .data-table th.col-fit ~ th, .data-table td { padding-right: 1.1rem; }
/* a heading on the right ends where the figures under it end */
.data-table th.text-end:not(:last-child) { padding-right: 1.1rem; }
/* a report of many columns (Order Summary): every heading and every cell on its one line, with less
   room at their sides, so the rows are low and the table is no wider than it need be */
.report-one-line.data-table.table th, .report-one-line.data-table.table td { white-space: nowrap; padding-left: .28rem; padding-right: .28rem; }
.report-one-line.data-table.table td { font-size: .82rem; }
.report-one-line.data-table.table th { font-size: .62rem; letter-spacing: 0; }
/* ... and closer still where there are eighteen of them (Batchwise Report) */
.report-one-line.report-dense.data-table.table th, .report-one-line.report-dense.data-table.table td { padding-left: .2rem; padding-right: .2rem; }
.report-one-line.report-dense.data-table.table td { font-size: .76rem; }
.report-one-line.report-dense.data-table.table th { font-size: .58rem; }
/* its one column of names is kept narrow, a longer name cut short at the right: the room goes to
   the columns of figures, and the table is as wide as the page, never wider */
.report-one-line.data-table.table .cell-fill { width: 11rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
/* ... a little wider where the names are longer: a fabric type with what it is made of */
.report-one-line.data-table.table .cell-fill.cell-fill-wide { width: 17rem; max-width: 17rem; }
/* ... and narrower where there are many columns beside it (Batchwise Report) */
.report-one-line.data-table.table .cell-fill.cell-fill-short { width: 8.5rem; max-width: 8.5rem; }
/* ... or as wide as the room the other columns leave, whatever that is: the table then never passes the page */
.report-one-line.data-table.table .cell-fill.cell-fill-rest { width: 100%; max-width: 0; min-width: 6rem; }
@media print {
  /* on paper the headings may fold and the names are written out in full */
  .report-one-line.data-table.table th { white-space: normal; }
  .report-one-line.data-table.table .cell-fill, .report-one-line.data-table.table .cell-fill.cell-fill-rest { width: auto; max-width: none; min-width: 32mm; white-space: normal; }
  /* A list printed with each of its lines on one line of the paper (the Dyes & Chemical Stock: an
     item to a line): nothing breaks, and the letters and the room in each cell are a little
     smaller so that the sheet still holds all the columns. */
  .print-one-line.data-table th, .print-one-line.data-table td { white-space: nowrap; padding: 1mm 1.2mm !important; }
  .print-one-line.data-table td { font-size: 8.5pt; }
  .print-one-line.data-table th { font-size: 7.5pt; letter-spacing: 0; }
  /* A report of very many columns (the Batchwise Report: twenty) on paper: smaller letters and less
     room in each cell, so that all of it is on the sheet and none runs off its right edge. */
  .report-dense.data-table.table th, .report-dense.data-table.table td { padding: .9mm .9mm !important; }
  .report-dense.data-table.table td { font-size: 7.5pt; }
  .report-dense.data-table.table th { font-size: 6.2pt; letter-spacing: 0; }
  .report-dense.data-table.table .cell-fill { min-width: 20mm; }
  /* one that stays on its one line on paper too (a party's name), taking the room from the columns that may break */
  /* in smaller letters, set close, so that its one line takes little of the sheet's width */
  .report-one-line.data-table.table .cell-fill.cell-keep-line { white-space: nowrap; min-width: 0; font-size: 7.5pt; letter-spacing: -.01em; padding-left: 1mm !important; padding-right: 1mm !important; }
}

.hero {
  background: var(--app-gradient);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(37, 99, 235, .28);
}
.hero::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.hero h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem; }
.hero p { margin: 0; opacity: .9; }
.hero-date {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .9rem;
}

.section-title { font-size: 1rem; font-weight: 700; margin: 2rem 0 1rem; }

.module-card { height: 100%; padding: 1.25rem; transition: transform .18s ease, box-shadow .18s ease; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15, 23, 42, .12); }
.module-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.module-card h3 { font-size: .98rem; font-weight: 700; margin-bottom: .3rem; }
.module-card p { color: var(--app-muted); font-size: .84rem; margin: 0; }
.module-sublist { list-style: none; padding: 0; margin: .75rem 0 0; border-top: 1px solid var(--app-border); }
.module-sublist li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0 0; font-size: .875rem; font-weight: 500; }
.module-sublist i { margin-right: .5rem; color: var(--app-muted); }
.module-sublist a { text-decoration: none; }
a.module-card { display: block; color: var(--app-text); text-decoration: none; }
.module-count { font-size: .75rem; font-weight: 600; color: var(--app-muted); }

.tone-indigo { background: rgba(99, 102, 241, .12); color: #6366f1; }
.tone-cyan { background: rgba(6, 182, 212, .14); color: #0891b2; }
/* a part of a menu of its own (menu.Section): its name in the menu, a heading on the module page, and
   its items in sky blue (icon, a light ground, a line at the left) to tell them from the rest */
.menu-section-head { margin-top: .1rem; padding-top: .3rem; padding-bottom: .3rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #0284c7; }
.dropdown-menu .menu-alt > .dropdown-item { background: rgba(14, 165, 233, .07); box-shadow: inset 3px 0 0 rgba(14, 165, 233, .55); }
.dropdown-menu .menu-alt > .dropdown-item:hover, .dropdown-menu .menu-alt > .dropdown-item:focus { background: rgba(14, 165, 233, .16); }
.dropdown-menu .menu-alt > .dropdown-item > .bi:first-child { color: #0284c7; }
[data-bs-theme='dark'] .menu-section-head, [data-bs-theme='dark'] .dropdown-menu .menu-alt > .dropdown-item > .bi:first-child { color: #7dd3fc; }
.module-section { margin-top: 1.25rem; }
.module-section h2 { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: .8rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #0284c7; }
.module-section h2::after { content: ""; flex: 1; height: 1px; background: rgba(14, 165, 233, .35); }
[data-bs-theme='dark'] .module-section h2 { color: #7dd3fc; }
.module-card-alt { border-left: 3px solid rgba(14, 165, 233, .6); background: linear-gradient(180deg, rgba(14, 165, 233, .05), transparent 60%), var(--app-surface); }
.tone-violet { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.tone-emerald { background: rgba(16, 185, 129, .14); color: #059669; }
.tone-amber { background: rgba(245, 158, 11, .16); color: #d97706; }
.tone-rose { background: rgba(244, 63, 94, .12); color: #e11d48; }
.tone-sky { background: rgba(14, 165, 233, .14); color: #0284c7; }
.tone-teal { background: rgba(20, 184, 166, .14); color: #0d9488; }
.tone-slate { background: rgba(100, 116, 139, .16); color: #475569; }
[data-bs-theme='dark'] .tone-indigo { color: #93c5fd; }
[data-bs-theme='dark'] .tone-cyan { color: #67e8f9; }
[data-bs-theme='dark'] .tone-violet { color: #c4b5fd; }
[data-bs-theme='dark'] .tone-emerald { color: #6ee7b7; }
[data-bs-theme='dark'] .tone-amber { color: #fcd34d; }
[data-bs-theme='dark'] .tone-rose { color: #fda4af; }
[data-bs-theme='dark'] .tone-sky { color: #7dd3fc; }
[data-bs-theme='dark'] .tone-teal { color: #5eead4; }
[data-bs-theme='dark'] .tone-slate { color: #cbd5e1; }

/* ---------- Home page overview: the month's figures as tiles, and charts ---------- */

/* The colours of a chart, by what they do: two series (blue, then orange: an order that keeps them
   apart for a colour-blind reader too), the lines of the scale, and its words. The dark steps are
   the same hues chosen for the dark surface. */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834;
  --viz-grid: #e6e9f2; --viz-base: #c3c9d6; --viz-ink: #64748b;
}
[data-bs-theme='dark'] {
  --viz-1: #3987e5; --viz-2: #d95926;
  --viz-grid: #23304d; --viz-base: #3a486a; --viz-ink: #94a3b8;
}

.stat-tile { display: flex; flex-direction: row; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; }
.stat-tile .module-icon { flex: none; margin: 0; }
.stat-body { min-width: 0; }
.stat-label { font-size: .8rem; font-weight: 600; color: var(--app-muted); }
.stat-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--app-text); }
.stat-value small { font-size: .85rem; font-weight: 600; color: var(--app-muted); }
.stat-caption { font-size: .76rem; color: var(--app-muted); }
.chart-empty { display: flex; align-items: center; justify-content: center; height: 240px; margin: 0; color: var(--app-muted); font-size: .88rem; }

.chart-card { position: relative; height: 100%; padding: 1rem 1.1rem .8rem; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chart-head h3 { margin: 0; font-size: .98rem; font-weight: 700; }
.chart-head p { margin: .1rem 0 0; font-size: .8rem; color: var(--app-muted); }
.chart-link { flex: none; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .6rem 0 .2rem; font-size: .8rem; color: var(--app-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-key { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; }
.chart-key-1, .chart-bar-1 { background: var(--viz-1); fill: var(--viz-1); }
.chart-key-2, .chart-bar-2 { background: var(--viz-2); fill: var(--viz-2); }
.chart-plot svg { display: block; }
.chart-grid { stroke: var(--viz-grid); stroke-width: 1; }
.chart-base { stroke: var(--viz-base); stroke-width: 1; }
.chart-tick { fill: var(--viz-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-hit { fill: transparent; }
.chart-group:hover .chart-hit { fill: rgba(100, 116, 139, .1); }
/* what a group stands at, shown over the plot while the pointer is on it */
.chart-tip {
  position: absolute; z-index: 5; display: flex; flex-direction: column; gap: .15rem; min-width: 9rem;
  padding: .5rem .65rem; border: 1px solid var(--app-border); border-radius: .5rem;
  background: var(--app-surface); box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  font-size: .78rem; color: var(--app-muted); pointer-events: none;
}
.chart-tip[hidden] { display: none; }
.chart-tip strong { color: var(--app-text); }
.chart-tip span { display: flex; align-items: center; gap: .35rem; }
.chart-tip b { margin-left: auto; padding-left: .8rem; color: var(--app-text); font-variant-numeric: tabular-nums; }
.chart-table { margin-top: .3rem; font-size: .8rem; }
.chart-table summary { color: var(--app-muted); cursor: pointer; width: fit-content; }
.chart-table table { margin-top: .4rem; }

/* the items the store holds most of: a name, a bar as long as its share of the biggest, its quantity */
.rank-list { display: grid; gap: .55rem; margin-top: .9rem; }
.rank-row { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr auto; align-items: center; gap: .7rem; font-size: .84rem; }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-text); }
.rank-track { height: .7rem; }
.rank-bar { display: block; min-width: 2px; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.rank-value { min-width: 5.5rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--app-text); }
.rank-value small { font-weight: 500; color: var(--app-muted); }

.badge-soft {
  background: rgba(100, 116, 139, .14);
  color: var(--app-muted);
  font-weight: 600;
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .7rem;
}

/* ---------- Login ---------- */

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--app-surface); }
.auth-aside {
  background: var(--app-gradient);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-aside::before, .auth-aside::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.auth-aside::before { width: 420px; height: 420px; right: -140px; top: -140px; }
.auth-aside::after { width: 300px; height: 300px; left: -110px; bottom: -110px; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .brand { color: #fff; }
.auth-aside .brand-mark { background: rgba(255, 255, 255, .2); box-shadow: none; }
.auth-aside .brand-sub { color: rgba(255, 255, 255, .75); }
.auth-aside h2 { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; max-width: 460px; }
.auth-aside .lead { opacity: .88; max-width: 440px; font-size: 1rem; }
.auth-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .7rem; }
.auth-points li { display: flex; align-items: center; gap: .7rem; font-weight: 500; }
.auth-points i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
}
.auth-form-wrap { display: grid; place-items: center; padding: 2rem; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.auth-form .input-group-text { background: var(--app-surface); border-color: var(--app-border); color: var(--app-muted); }

/* ---------- Responsive ---------- */

@media (min-width: 992px) {
  /* open menus on hover, like a desktop application menu bar */
  .app-menu .dropdown:hover > .dropdown-menu { display: block; }

  .submenu > .dropdown-menu {
    position: absolute;
    display: none;
    top: -.4rem;
    left: 100%;
    min-width: 220px;
    padding: .4rem;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
    background: var(--app-surface);
  }
  .submenu:hover > .dropdown-menu,
  .submenu:focus-within > .dropdown-menu { display: block; }
  /* menus near the right edge hang from their right side, leaving room for the fly-out */
  .app-menu .nav-item:nth-last-child(-n+2) > .dropdown-menu { left: auto; right: 0; }
}

@media (max-width: 991.98px) {
  .header-top, .app-content, .app-footer { padding-left: 1rem; padding-right: 1rem; }
  .app-menu { padding: 0 .5rem; }
  .app-menu .navbar-collapse { max-height: calc(100vh - 34px); overflow-y: auto; padding-bottom: .5rem; }
  .app-menu .dropdown-menu { border-radius: 10px; margin: .25rem 0 .5rem; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
/* Costing Summary: what is not billed yet, priced as a bill would start it (an estimate), told apart */
.costing-estimate { font-style: italic; color: #2563eb; }
[data-bs-theme="dark"] .costing-estimate { color: #93c5fd; }
.costing-estimate-tag { display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: .25rem; font-size: .66rem; font-style: normal; font-weight: 700; line-height: 1.35; color: #1d4ed8; background: rgba(37, 99, 235, .12); vertical-align: middle; }
[data-bs-theme="dark"] .costing-estimate-tag { color: #bfdbfe; background: rgba(147, 197, 253, .16); }
@media print { .costing-estimate { color: inherit; } .costing-estimate-tag { background: none; padding: 0; } }
.costing-estimate-line { line-height: 1.1; margin-top: .1rem; }
.costing-estimate-line .costing-estimate-tag { margin-left: 0; }
/* Costing Summary: an amount not billed yet in the color of how far its batch has gone */
.costing-stage.stage-finishing { --stage: #2563eb; }
.costing-stage.stage-dyeing { --stage: #9333ea; }
.costing-stage.stage-batch { --stage: #d97706; }
[data-bs-theme="dark"] .costing-stage.stage-finishing { --stage: #60a5fa; }
[data-bs-theme="dark"] .costing-stage.stage-dyeing { --stage: #c084fc; }
[data-bs-theme="dark"] .costing-stage.stage-batch { --stage: #fbbf24; }
td.costing-stage { color: var(--stage); font-weight: 700; font-style: italic; }
.costing-stage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .4rem 1rem; font-size: .8rem; font-weight: 600; }
.costing-stage-legend .legend-title { color: var(--app-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.costing-stage-legend .costing-stage { color: var(--stage); }
.stage-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: baseline; background: var(--stage, var(--app-muted)); }
.stage-dot.stage-billed { background: var(--bs-body-color); }
/* Costing tiles: a long figure breaks onto the next line rather than running out of its tile */
.costing-tile { min-width: 0; }
.costing-tile strong { overflow-wrap: anywhere; line-height: 1.2; }
.costing-tile small { overflow-wrap: anywhere; }
.costing-tile.tile-estimate { border-left-color: #9333ea; }
.costing-tile .tile-stage-line { display: flex; align-items: center; gap: .25rem; color: var(--stage); }
.costing-tile .tile-stage-line b { margin-left: auto; font-variant-numeric: tabular-nums; }
.costing-tile .tile-stage-line .stage-dot { margin-right: 0; }
/* Bill Issue: its two switches side by side on one line (wrapping only on a narrow screen) */
.bill-options { gap: .35rem 2rem; }
.bill-options .challan-edit-help { cursor: help; }
.bill-options { justify-content: space-between; }
/* Bill Issue view: the delivery challans across the whole row, a chip each (number, date) */
.detail-grid > .detail-full { grid-column: 1 / -1; }
.challan-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem !important; }
.challan-chip { display: inline-flex; align-items: baseline; gap: .4rem; padding: .2rem .55rem; border: 1px solid var(--app-border); border-radius: .4rem; background: rgba(100, 116, 139, .07); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.challan-chip small { color: var(--app-muted); font-weight: 500; font-size: .75rem; }
/* Bill Issue view: its six facts side by side on one line, each as wide as it needs (Bill type, the
   longest, takes what is left); two or three a line on a narrower screen */
@media (min-width: 992px) {
  .bill-facts { grid-template-columns: auto auto auto minmax(12rem, 1fr) auto auto; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .bill-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Bill Issue list: on the page without a sideways scroll; a bill's challans wrap in their cell as chips */
.bill-list td { vertical-align: top; }
.bill-list .bill-list-client { min-width: 9rem; max-width: 14rem; }
.bill-list .bill-list-challans { max-width: 20rem; }
.bill-list .bill-list-challans .challan-chip { margin: 0 .25rem .25rem 0; padding: .05rem .4rem; font-size: .78rem; }
/* a page that keeps a little room above its title and buttons (the recipe page) */
.page-header.page-header-spaced { margin-top: .9rem; margin-bottom: .9rem; }