/* ==========================================================================
   TraderSuite theme — "Ledger"
   Loaded after Bootstrap, DataTables, Select2, Flatpickr and site.css, so it
   restyles them through tokens rather than by editing each view.

   Sections
     1. Tokens
     2. Base & typography
     3. Buttons
     4. Forms (inputs, select2, flatpickr, validation)
     5. Page frame (cards, page header, breadcrumbs)
     6. Tables & DataTables (the ledger rule)
     7. Badges, alerts, modals, dropdowns
     8. App shell (sidebar, top bar)
     9. Receipt slip (invoice totals)
    10. Dashboard
    11. Sign-in
    12. nicelyalert + loader
    13. Responsive & motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* brand */
    --ts-green-700: #165433;
    --ts-green-600: #1d6b3f;   /* primary */
    --ts-green-500: #2a8552;
    --ts-leaf-500: #4fa55f;    /* "Suite" green from the logo */
    --ts-green-100: #e3f1e8;
    --ts-green-50: #f0f8f3;

    /* neutrals */
    --ts-ink: #1b2233;
    --ts-ink-2: #3b4457;
    --ts-ink-3: #5f697b;       /* muted text, 5.6:1 on white */
    --ts-ink-4: #8a93a3;       /* placeholders, disabled */
    --ts-rule: #dde3e0;
    --ts-rule-strong: #c4ccc8;
    --ts-chalk: #f3f5f4;       /* page */
    --ts-paper: #ffffff;       /* surface */
    --ts-hover: #f6f8f7;

    /* status */
    --ts-success: #247a4a;  --ts-success-bg: #e3f2e9;
    --ts-warning: #8f5500;  --ts-warning-bg: #fbefd5;
    --ts-danger:  #b3372b;  --ts-danger-bg:  #fbe6e3;
    --ts-info:    #1f5f9e;  --ts-info-bg:    #e1edf8;
    --ts-neutral: #4a5366;  --ts-neutral-bg: #e9ecef;

    /* shape */
    --ts-r-sm: 6px;
    --ts-r-md: 8px;
    --ts-r-lg: 12px;
    --ts-r-xl: 16px;
    --ts-shadow-float: 0 8px 24px rgba(27, 34, 51, .14), 0 1px 3px rgba(27, 34, 51, .08);
    --ts-focus: 0 0 0 3px rgba(79, 165, 95, .38);

    /* type */
    --ts-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* sizes */
    --ts-control-h: 2.25rem;    /* 34px; mouse. Touch screens get 2.75rem below */
    --ts-sidebar-w: 16rem;
    --ts-topbar-h: 3.5rem;

    /* Bootstrap bridge */
    --bs-body-font-family: var(--ts-font);
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--ts-ink);
    --bs-body-color-rgb: 27, 34, 51;
    --bs-body-bg: var(--ts-chalk);
    --bs-body-bg-rgb: 243, 245, 244;
    --bs-secondary-color: var(--ts-ink-3);
    --bs-border-color: var(--ts-rule);
    --bs-border-radius: var(--ts-r-md);
    --bs-border-radius-sm: var(--ts-r-sm);
    --bs-border-radius-lg: var(--ts-r-lg);
    --bs-link-color: var(--ts-green-600);
    --bs-link-color-rgb: 29, 107, 63;
    --bs-link-hover-color: var(--ts-green-700);
    --bs-link-hover-color-rgb: 22, 84, 51;
    --bs-primary: var(--ts-green-600);
    --bs-primary-rgb: 29, 107, 63;
    --bs-success: var(--ts-success);
    --bs-success-rgb: 36, 122, 74;
    --bs-warning: var(--ts-warning);
    --bs-warning-rgb: 143, 85, 0;
    --bs-danger: var(--ts-danger);
    --bs-danger-rgb: 179, 55, 43;
    --bs-info: var(--ts-info);
    --bs-info-rgb: 31, 95, 158;
    --bs-focus-ring-color: rgba(79, 165, 95, .38);

    /* DataTables 2 paints stripes/hover from these (no zebra; green hover) */
    --dt-row-stripe: 255, 255, 255;
    --dt-row-hover: 29, 107, 63;
    --dt-row-selected: 29, 107, 63;
    --dt-html-background: #ffffff;
}

@media (pointer: coarse) { :root { --ts-control-h: 2.75rem; } }

/* 2. Base & typography ----------------------------------------------------- */
html {
    font-size: 15px;              /* every rem in Bootstrap scales from here */
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 1400px) {
    html { font-size: 16px; }
}

body {
    font-family: var(--ts-font);
    background: var(--ts-chalk);
    color: var(--ts-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--ts-ink);
    letter-spacing: -.01em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* All money and quantities line up in columns */
.table, .form-control, .metric-value, .receipt-slip, .badge, .dt-paging, .dt-info {
    font-variant-numeric: tabular-nums;
}

.text-muted, .text-secondary { color: var(--ts-ink-3) !important; }
.text-primary { color: var(--ts-green-600) !important; }
.text-success { color: var(--ts-success) !important; }
.text-danger  { color: var(--ts-danger) !important; }
.text-dark    { color: var(--ts-ink) !important; }
.bg-light     { background-color: var(--ts-hover) !important; }

hr { border-color: var(--ts-rule); opacity: 1; }

:focus-visible {
    outline: 2px solid var(--ts-leaf-500);
    outline-offset: 2px;
}

::selection { background: var(--ts-green-100); }

/* 3. Buttons ---------------------------------------------------------------
   Views use btn-success for "save/create", btn-primary for "edit/add" and
   btn-secondary for "cancel/back". The theme resolves that into a clear
   hierarchy: solid green = the one main action, white = everything else.   */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--ts-r-md);
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .933rem;
    min-height: var(--ts-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    line-height: 1.25;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:focus-visible { box-shadow: var(--ts-focus); outline: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 3.25rem; --bs-btn-font-size: 1.067rem; --bs-btn-padding-x: 1.5rem; }
.btn-sm {
    --bs-btn-padding-x: .7rem;
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: .867rem;
    --bs-btn-border-radius: var(--ts-r-sm);
    min-height: 2.133rem;
}

.btn-primary, .btn-success, .btn-create {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ts-green-600);
    --bs-btn-border-color: var(--ts-green-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ts-green-700);
    --bs-btn-hover-border-color: var(--ts-green-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ts-green-700);
    --bs-btn-active-border-color: var(--ts-green-700);
    --bs-btn-disabled-bg: var(--ts-green-600);
    --bs-btn-disabled-border-color: var(--ts-green-600);
    --bs-btn-focus-shadow-rgb: 79, 165, 95;
    background-image: none;
}

.btn-secondary, .btn-outline-secondary, .btn-light {
    --bs-btn-color: var(--ts-ink);
    --bs-btn-bg: var(--ts-paper);
    --bs-btn-border-color: var(--ts-rule-strong);
    --bs-btn-hover-color: var(--ts-ink);
    --bs-btn-hover-bg: var(--ts-hover);
    --bs-btn-hover-border-color: var(--ts-ink-4);
    --bs-btn-active-color: var(--ts-ink);
    --bs-btn-active-bg: var(--ts-chalk);
    --bs-btn-active-border-color: var(--ts-ink-4);
    --bs-btn-disabled-color: var(--ts-ink-4);
    --bs-btn-disabled-bg: var(--ts-hover);
    --bs-btn-disabled-border-color: var(--ts-rule);
}

.btn-outline-primary {
    --bs-btn-color: var(--ts-green-600);
    --bs-btn-border-color: var(--ts-green-600);
    --bs-btn-hover-bg: var(--ts-green-50);
    --bs-btn-hover-color: var(--ts-green-700);
    --bs-btn-hover-border-color: var(--ts-green-700);
    --bs-btn-active-bg: var(--ts-green-100);
    --bs-btn-active-color: var(--ts-green-700);
    --bs-btn-active-border-color: var(--ts-green-700);
}

.btn-info {
    --bs-btn-color: var(--ts-info);
    --bs-btn-bg: var(--ts-info-bg);
    --bs-btn-border-color: var(--ts-info-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ts-info);
    --bs-btn-hover-border-color: var(--ts-info);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ts-info);
    --bs-btn-active-border-color: var(--ts-info);
}

.btn-warning, .btn-outline-warning {
    --bs-btn-color: var(--ts-warning);
    --bs-btn-bg: var(--ts-warning-bg);
    --bs-btn-border-color: var(--ts-warning-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ts-warning);
    --bs-btn-hover-border-color: var(--ts-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ts-warning);
    --bs-btn-active-border-color: var(--ts-warning);
}

.btn-danger {
    --bs-btn-color: var(--ts-danger);
    --bs-btn-bg: var(--ts-danger-bg);
    --bs-btn-border-color: var(--ts-danger-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ts-danger);
    --bs-btn-hover-border-color: var(--ts-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ts-danger);
    --bs-btn-active-border-color: var(--ts-danger);
}

/* Row-level action buttons inside tables are icon-sized, quiet until hovered */
table .btn-sm {
    min-height: 2rem;
    min-width: 2rem;
    padding: .2rem .5rem;
}

.btn-close:focus { box-shadow: var(--ts-focus); }

/* 4. Forms ----------------------------------------------------------------- */
.form-label {
    font-weight: 500;
    font-size: .867rem;
    color: var(--ts-ink-2);
    margin-bottom: .3rem;
}

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

.form-group { margin-bottom: .85rem; }

.form-control, .form-select, .input-group-text {
    min-height: var(--ts-control-h);
    border: 1px solid var(--ts-rule-strong);
    border-radius: var(--ts-r-md);
    background-color: var(--ts-paper);
    color: var(--ts-ink);
    font-size: .933rem;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control-sm, .form-select-sm {
    min-height: 2.133rem;
    border-radius: var(--ts-r-sm);
    font-size: .867rem;
}

.form-control::placeholder { color: var(--ts-ink-4); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--ts-ink-4); }

.form-control:focus, .form-select:focus {
    border-color: var(--ts-green-600);
    box-shadow: var(--ts-focus);
    background-color: var(--ts-paper);
}

.form-control[readonly], .form-control:disabled, .form-select:disabled {
    background-color: var(--ts-hover);
    color: var(--ts-ink-2);
    border-color: var(--ts-rule);
}

textarea.form-control { min-height: 5rem; }

.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    border-color: var(--ts-rule-strong);
}
.form-check-input:checked {
    background-color: var(--ts-green-600);
    border-color: var(--ts-green-600);
}
.form-check-input:focus { box-shadow: var(--ts-focus); border-color: var(--ts-green-600); }
.form-switch .form-check-input { width: 2.2em; height: 1.2rem; }

/* validation */
.text-danger.field-validation-error,
span.field-validation-error,
.invalid-feedback,
.validation-summary-errors { color: var(--ts-danger); font-size: .8rem; }
.input-validation-error, .form-control.is-invalid {
    border-color: var(--ts-danger) !important;
    background-image: none;
}
.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(179, 55, 43, .22); }

/* Select2 — match native control height, radius and focus */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
    min-height: var(--ts-control-h);
    height: auto;
    border: 1px solid var(--ts-rule-strong);
    border-radius: var(--ts-r-md);
    background-color: var(--ts-paper);
    font-size: .933rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--ts-ink);
    line-height: 1.5;
    padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ts-ink-4); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: .4rem; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ts-green-600);
    box-shadow: var(--ts-focus);
}
.select2-dropdown {
    border: 1px solid var(--ts-rule);
    border-radius: var(--ts-r-md);
    box-shadow: var(--ts-shadow-float);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--ts-rule-strong);
    border-radius: var(--ts-r-sm);
    min-height: 2.25rem;
    padding: .25rem .6rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none; border-color: var(--ts-green-600); box-shadow: var(--ts-focus);
}
.select2-results__option { padding: .55rem .8rem; font-size: .933rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--ts-green-600);
    color: #fff;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--ts-green-50);
    color: var(--ts-green-700);
}

/* Flatpickr (loaded with its neutral "light" theme) */
.flatpickr-calendar {
    border-radius: var(--ts-r-lg);
    border: 1px solid var(--ts-rule);
    box-shadow: var(--ts-shadow-float);
    font-family: var(--ts-font);
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-day { border-radius: var(--ts-r-md); }
.flatpickr-day.today { border-color: var(--ts-leaf-500); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover {
    background: var(--ts-green-600);
    border-color: var(--ts-green-600);
    color: #fff;
}
.flatpickr-day:hover { background: var(--ts-green-50); border-color: var(--ts-green-100); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday { color: var(--ts-ink); background: transparent; }
.flatpickr-input[readonly] { background-color: var(--ts-paper); }
.form-control.flatpickr-input.input:disabled { background-color: var(--ts-hover); }

/* 5. Page frame ------------------------------------------------------------
   Existing screens wrap everything in  .card > .card-header > .page-header
   plus a .card-body. The outer card becomes the page canvas (no box), the
   header becomes a real page title, and inner cards become flat panels.    */
.card {
    --bs-card-border-color: var(--ts-rule);
    --bs-card-border-radius: var(--ts-r-lg);
    --bs-card-inner-border-radius: calc(var(--ts-r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--ts-paper);
    --bs-card-cap-padding-y: .9rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: none !important;
}

.card-header, .card-footer { background: transparent; border-color: var(--ts-rule); }
.card-header h5, .card-header .h5 { font-size: 1rem; font-weight: 600; }

/* top-level screen card */
main > .card, main > .container-fluid > .card, main > form > .card {
    background: transparent;
    border: 0;
}

main > .card > .card-header.bg-light,
main > .card > .card-header {
    background: transparent !important;
    border: 0;
    padding: .25rem .25rem 1rem;
}

main > .card > .card-body {
    background: var(--ts-paper);
    border: 1px solid var(--ts-rule);
    border-radius: var(--ts-r-lg);
}

/* list screens: toolbar strip above the table, inside the panel */
main > .card > .card-body > .p-3.flex-shrink-0.border-bottom {
    padding: .85rem 1.25rem !important;
    border-color: var(--ts-rule) !important;
    display: flex;
    gap: .75rem;
    align-items: center;
}

.page-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem 1rem;
}
.page-header > .header-title { order: 1; }
.page-header > .ts-crumbs, .page-header > div[style*="font-size:small"] { order: 2; }

.header-title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}

.ts-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .8rem;
    color: var(--ts-ink-3);
}
.ts-crumbs i { font-size: .65rem; color: var(--ts-ink-4); }
.ts-crumbs .ts-crumb-current { color: var(--ts-ink-2); font-weight: 500; }

/* breadcrumb is rendered by the helper; this keeps the old markup tidy too */
.page-header > div[style*="font-size:small"] { font-size: .8rem !important; color: var(--ts-ink-3); }

/* nested panels (invoice items etc.) */
.card .card {
    border: 1px solid var(--ts-rule);
    border-radius: var(--ts-r-md);
    background: var(--ts-paper);
}
.card .card > .card-header {
    background: var(--ts-hover) !important;
    border-bottom: 1px solid var(--ts-rule);
    padding: .7rem 1rem;
}

main > .card > .card-body:not(.p-0) { padding: 1.5rem; }

.card-body .row + .row { margin-top: .15rem; }

/* 6. Tables & DataTables — the ledger rule ---------------------------------
   Header sits on a double rule (the bookkeeper's underline). Rows are
   separated by hairlines instead of zebra stripes. Amounts right-align.    */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--ts-ink);
    --bs-table-hover-bg: var(--ts-green-50);
    --bs-table-hover-color: var(--ts-ink);
    --bs-table-border-color: var(--ts-rule);
    --bs-table-color: var(--ts-ink);
    margin-bottom: 0;
    font-size: .933rem;
    border-color: var(--ts-rule);
}

.table > :not(caption) > * > * {
    padding: .6rem 1rem;
    border-bottom-color: var(--ts-rule);
}

.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }

.table > thead > tr > th,
.table > thead.table-light > tr > th,
.table-light {
    --bs-table-bg: var(--ts-hover);
    --bs-table-color: var(--ts-ink-2);
    background-color: var(--ts-hover);
    color: var(--ts-ink-2);
    font-weight: 600;
    font-size: .867rem;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 3px double var(--ts-rule-strong) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
.table-bordered > :not(caption) > * { border-width: 0 0 1px; }
.table-bordered > :not(caption) > * > * { border-width: 0; border-bottom: 1px solid var(--ts-rule); }
.table-bordered > thead > tr > th { border-bottom: 3px double var(--ts-rule-strong) !important; }

.table-hover > tbody > tr { transition: background-color .08s ease; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }

.table-responsive { font-size: inherit; }
.table-responsive > table > tbody > tr > td { user-select: text; }
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--ts-rule-strong) transparent; }

/* amounts line up on the right edge, like a ledger */
.text-end, table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric,
table.dataTable th.dt-right, table.dataTable td.dt-right { text-align: right; }
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-header { flex-direction: row-reverse; justify-content: flex-start; }
table.dataTable th.dt-type-date, table.dataTable td.dt-type-date { text-align: left; }
table.dataTable th.dt-type-date div.dt-column-header { flex-direction: row; }

/* empty states */
table.dataTable td.dt-empty, .dataTables_empty {
    padding: 3rem 1rem !important;
    color: var(--ts-ink-3);
    text-align: center !important;
}

/* DataTables 2 chrome: .dt-container > .row (search) / .row.dt-layout-table / .row (paging) */
.dt-container { padding: 0; }
.dt-container > .row { margin: 0; padding: .65rem 1.25rem; align-items: center; --bs-gutter-x: 0; }
.dt-container > .row.mt-2 { margin-top: 0 !important; }
.dt-container > .row.dt-layout-table { padding: 0; }
.dt-container > .row:first-child { border-bottom: 1px solid var(--ts-rule); }
.dt-container > .row:has(.dt-paging), .dt-container > .row:has(.dt-info) { border-top: 1px solid var(--ts-rule); }
.dt-container > .row:has(.dt-paging):not(:has(.dt-info)) > .dt-layout-start:empty { display: none; }
.dt-container .dt-autosize { display: none; }
.dt-container > .row > [class*="dt-layout-"] { padding-left: 0; padding-right: 0; }

/* search sits left, full width up to a comfortable measure, with a magnifier */
.dt-container .dt-layout-end:has(.dt-search),
.dt-container .dt-layout-start:has(.dt-search) {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    height: auto !important;
    display: flex;
    justify-content: flex-start;
}

.dt-container .dt-search { height: auto; width: 100%; display: flex; }
.dt-container .dt-search label { display: none; }

.dt-container .dt-search input[type="search"],
.dt-container .dt-search input {
    width: 100% !important;
    max-width: 26rem;
    margin: 0 !important;
    min-height: var(--ts-control-h);
    padding: .4rem .8rem .4rem 2.4rem;
    border: 1px solid var(--ts-rule-strong);
    border-radius: var(--ts-r-md);
    background: var(--ts-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center;
    font-size: .933rem;
}
.dt-container .dt-search input:focus {
    outline: none;
    border-color: var(--ts-green-600);
    box-shadow: var(--ts-focus);
}

.dt-container .dt-length select {
    min-height: 2.133rem;
    border: 1px solid var(--ts-rule-strong);
    border-radius: var(--ts-r-sm);
    padding: .15rem 1.8rem .15rem .6rem;
}

.dt-info { color: var(--ts-ink-3); font-size: .867rem; }

.dt-container .pagination { margin: 0; gap: .25rem; }
.dt-container .page-link {
    border: 1px solid transparent;
    border-radius: var(--ts-r-sm) !important;
    min-width: 2.133rem;
    min-height: 2.133rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-ink-2);
    background: transparent;
    font-size: .867rem;
}
.dt-container .page-link:hover { background: var(--ts-hover); border-color: var(--ts-rule); color: var(--ts-ink); }
.dt-container .page-item.active .page-link { background: var(--ts-green-600); border-color: var(--ts-green-600); color: #fff; }
.dt-container .page-item.disabled .page-link { color: var(--ts-ink-4); background: transparent; }

table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { padding-right: 1.6rem; }
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: 0; background-color: #eef2f0; }
table.dataTable tbody tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr > td.dtr-control::before,
table.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    background-color: var(--ts-green-600);
    border: 0;
    box-shadow: none;
}

/* 7. Badges, alerts, modals, dropdowns ------------------------------------- */
.badge {
    font-weight: 600;
    font-size: .767rem;
    padding: .3em .7em;
    border-radius: 999px;
    letter-spacing: 0;
}
.badge.fs-6 { font-size: .867rem !important; }

/* Soft status pills. The views choose bg-* by meaning (Draft=warning,
   Posted=success, Cancelled=danger...) so we re-skin those, not the markup. */
.badge.bg-success,   .badge.badge-success   { background-color: var(--ts-success-bg) !important; color: var(--ts-success) !important; }
.badge.bg-warning,   .badge.badge-warning   { background-color: var(--ts-warning-bg) !important; color: var(--ts-warning) !important; }
.badge.bg-danger,    .badge.badge-danger    { background-color: var(--ts-danger-bg)  !important; color: var(--ts-danger)  !important; }
.badge.bg-info,      .badge.badge-info      { background-color: var(--ts-info-bg)    !important; color: var(--ts-info)    !important; }
.badge.bg-primary,   .badge.badge-primary   { background-color: var(--ts-green-100)  !important; color: var(--ts-green-700) !important; }
.badge.bg-secondary, .badge.badge-secondary { background-color: var(--ts-neutral-bg) !important; color: var(--ts-neutral)  !important; }
.badge.bg-dark,      .badge.badge-dark      { background-color: var(--ts-ink)        !important; color: #fff              !important; }

.alert {
    border-radius: var(--ts-r-md);
    border-width: 1px;
    padding: .8rem 1rem;
    font-size: .933rem;
}
.alert-danger  { background: var(--ts-danger-bg);  border-color: #f0c4be; color: #7e231a; }
.alert-success { background: var(--ts-success-bg); border-color: #bfdfcb; color: #175334; }
.alert-warning { background: var(--ts-warning-bg); border-color: #efd7a0; color: #6b4000; }
.alert-info    { background: var(--ts-info-bg);    border-color: #bcd5ec; color: #174a7a; }

.modal-content {
    border: 0;
    border-radius: var(--ts-r-xl);
    box-shadow: var(--ts-shadow-float);
    background: var(--ts-paper);
}
.modal-content.p-3 { padding: 0 !important; }
.modal-header {
    border-bottom: 1px solid var(--ts-rule);
    padding: 1.1rem 1.5rem;
}
.modal-title { font-size: 1.15rem; font-weight: 600; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--ts-rule); padding: .9rem 1.5rem; gap: .5rem; }
.modal-backdrop { --bs-backdrop-bg: #1b2233; --bs-backdrop-opacity: .5; }

.dropdown-menu {
    --bs-dropdown-border-color: var(--ts-rule);
    --bs-dropdown-border-radius: var(--ts-r-md);
    --bs-dropdown-link-active-bg: var(--ts-green-100);
    --bs-dropdown-link-active-color: var(--ts-green-700);
    --bs-dropdown-padding-y: .35rem;
    box-shadow: var(--ts-shadow-float);
    font-size: .933rem;
}
.dropdown-item { padding: .55rem 1rem; border-radius: var(--ts-r-sm); margin: 0 .35rem; width: auto; display: flex; align-items: center; gap: .65rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ts-hover); color: var(--ts-ink); }
.dropdown-item i { width: 1.1rem; text-align: center; color: var(--ts-ink-3); }

.nav-tabs { border-bottom: 1px solid var(--ts-rule); }
.nav-tabs .nav-link { color: var(--ts-ink-3); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--ts-green-700); background: transparent; border-bottom-color: var(--ts-green-600); }
.nav-pills .nav-link.active { background: var(--ts-green-600); color: #fff; }

.pagination { --bs-pagination-active-bg: var(--ts-green-600); --bs-pagination-active-border-color: var(--ts-green-600); --bs-pagination-color: var(--ts-ink-2); }

.progress { background: var(--ts-neutral-bg); border-radius: 999px; }
.progress-bar { background: var(--ts-green-600); }

/* 8. App shell -------------------------------------------------------------- */
#wrapper { display: flex; min-height: 100vh; background: var(--ts-chalk); }

#sidebar {
    width: var(--ts-sidebar-w);
    min-width: var(--ts-sidebar-w);
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: var(--ts-paper);
    border-right: 1px solid var(--ts-rule);
    box-shadow: none !important;
    overflow: hidden;
    transition: margin-left .22s ease, transform .22s ease;
}

#sidebar .sidebar-header {
    flex: 0 0 var(--ts-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--ts-rule) !important;
    text-align: left !important;
}
#sidebar .sidebar-header img { max-height: 2.5rem !important; width: auto; }

#sidebar > ul.nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75rem .75rem 1.5rem !important;
    gap: .1rem;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--ts-rule) transparent;
}

#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    border-radius: var(--ts-r-md);
    font-size: .933rem;
    font-weight: 500;
    color: var(--ts-ink-2) !important;
    background: transparent;
    transition: background-color .12s ease, color .12s ease;
    min-height: 2.5rem;
    position: relative;
}
#sidebar .nav-link:hover { background: var(--ts-hover); color: var(--ts-ink) !important; text-decoration: none; }

#sidebar .nav-link .nav-ico {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    font-size: .95rem;
    color: var(--ts-ink-3);
}
#sidebar .nav-link .nav-label { flex: 1 1 auto; }

/* parent (module) rows */
#sidebar .parent-nav-link { font-weight: 600; }
#sidebar .parent-nav-link.active {
    background: transparent;
    color: var(--ts-green-700) !important;
}
#sidebar .parent-nav-link.active .nav-ico { color: var(--ts-green-600); }

#sidebar .parent-nav-link .rotate-icon {
    margin-left: auto;
    font-size: .75rem;
    color: var(--ts-ink-4);
    transform: rotate(-90deg);
    transition: transform .2s ease;
}
#sidebar .parent-nav-link .rotate-icon.rotated,
#sidebar .parent-nav-link[aria-expanded="true"] .rotate-icon { transform: rotate(0deg); }

/* child (page) rows sit on a quiet guide line */
#sidebar .collapse > ul.nav, #sidebar .collapsing > ul.nav {
    margin: .1rem 0 .4rem 1.5rem !important;
    padding-left: .5rem;
    border-left: 1px solid var(--ts-rule);
}
#sidebar .child-nav-link {
    font-weight: 400;
    min-height: 2.25rem;
    padding: .45rem .75rem;
    font-size: .9rem;
    color: var(--ts-ink-3) !important;
}
#sidebar .child-nav-link.active {
    background: var(--ts-green-100);
    color: var(--ts-green-700) !important;
    font-weight: 600;
}
#sidebar .child-nav-link.active::before {
    content: "";
    position: absolute;
    left: -.5rem;
    top: .4rem;
    bottom: .4rem;
    width: 3px;
    border-radius: 3px;
    background: var(--ts-leaf-500);
    margin-left: -1px;
}
#sidebar .nav-link.active:not(.parent-nav-link):not(.child-nav-link),
#sidebar .parent-nav-link:not([data-bs-toggle]).active { background: var(--ts-green-100); color: var(--ts-green-700) !important; }

/* collapsed state (desktop) */
#wrapper.toggled #sidebar { margin-left: calc(var(--ts-sidebar-w) * -1); }

/* column to the right of the sidebar */
#wrapper > .ts-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.ts-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    flex: 0 0 var(--ts-topbar-h);
    height: var(--ts-topbar-h);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--ts-rule);
}

#sidebarToggle {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ts-r-md);
    background: transparent;
    color: var(--ts-ink-2);
    cursor: pointer;
    font-size: 1.05rem;
}
#sidebarToggle:hover { background: var(--ts-hover); color: var(--ts-ink); }

.ts-topbar .ts-top-actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

.ts-newsale { white-space: nowrap; }

#userDropdown {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .5rem .25rem .25rem;
    border-radius: 999px;
    color: var(--ts-ink) !important;
    border: 1px solid transparent;
}
#userDropdown:hover, #userDropdown[aria-expanded="true"] { background: var(--ts-hover); border-color: var(--ts-rule); text-decoration: none; }
#userDropdown img { width: 2.25rem !important; height: 2.25rem !important; object-fit: cover; border: 2px solid var(--ts-paper); box-shadow: 0 0 0 1px var(--ts-rule); }
#userDropdown .ts-username { font-size: .9rem; font-weight: 500; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-toggle::after { display: none !important; }
#userMenu { min-width: 13rem; top: calc(100% + .5rem) !important; padding: .35rem 0 !important; border-radius: var(--ts-r-md) !important; }
#userMenu .dropdown-item:hover { background: var(--ts-hover); color: var(--ts-ink); }
#userMenu button.dropdown-item { background: transparent; border: 0; width: calc(100% - .7rem); text-align: left; }

main.ts-content { flex: 1 1 auto; padding: 1.5rem 1.75rem 2rem !important; overflow: visible !important; }
main.ts-content > .card.h-100 { height: auto !important; }

.ts-footer {
    flex: 0 0 auto;
    padding: .9rem 1.75rem;
    font-size: .8rem;
    color: var(--ts-ink-4);
    text-align: center;
    border-top: 1px solid var(--ts-rule);
}
.footer.ts-footer { position: static; line-height: 1.4; }

#sidebarBackdrop { display: none; }

/* 9. Receipt slip — invoice totals -----------------------------------------
   Any totals block that has the SubTotal / TotalAmount inputs is drawn as a
   till receipt: paper, a torn lower edge (echoing the logo), and a double
   rule above the amount due. Markup is unchanged; :has() finds the block.  */
table:has(input[name="SubTotal"]), table:has(input[name="TotalAmount"]), .receipt-slip {
    --slip-edge: 10px;
    width: 100%;
    background: var(--ts-paper);
    border: 1px solid var(--ts-rule);
    border-bottom: 0;
    border-radius: var(--ts-r-md) var(--ts-r-md) 0 0;
    padding-bottom: var(--slip-edge);
    position: relative;
    margin-bottom: 1rem;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
            mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
table:has(input[name="SubTotal"]) td, table:has(input[name="TotalAmount"]) td { padding: .5rem 1rem; border-bottom: 0; vertical-align: middle; }
table:has(input[name="SubTotal"]) td:first-child { color: var(--ts-ink-3); width: 45%; }
table:has(input[name="SubTotal"]) td:first-child strong { font-weight: 500; }
table:has(input[name="SubTotal"]) .form-control {
    border: 0;
    background: transparent !important;
    text-align: right;
    font-size: 1rem;
    padding-right: 0;
    min-height: 2rem;
}
table:has(input[name="SubTotal"]) tr:last-child td {
    border-top: 3px double var(--ts-ink-2);
    padding-top: .85rem;
    padding-bottom: .85rem;
}
table:has(input[name="SubTotal"]) tr:last-child td:first-child strong { color: var(--ts-ink); font-weight: 600; }
table:has(input[name="SubTotal"]) tr:last-child .form-control {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ts-green-700);
    min-height: 2.6rem;
}

/* Invoice line items: the working surface of the sale screen */
#itemsTable { --bs-table-hover-bg: var(--ts-green-50); }
#itemsTable .form-control, #itemsTable .form-select { min-height: 2.25rem; }

/* 10. Dashboard ------------------------------------------------------------- */
.ts-dash { display: grid; gap: 1.25rem; }

.ts-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.ts-dash-head h1 { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: -.02em; }
.ts-dash-head p { margin: .15rem 0 0; color: var(--ts-ink-3); font-size: .933rem; }

.ts-metrics { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ts-metric {
    background: var(--ts-paper);
    border: 1px solid var(--ts-rule);
    border-radius: var(--ts-r-lg);
    padding: 1.1rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.ts-metric-label { font-size: .867rem; font-weight: 500; color: var(--ts-ink-3); }
.ts-metric-value {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.ts-metric-foot { font-size: .8rem; color: var(--ts-ink-3); margin-top: .25rem; }
/* the day's sales is the number the owner opens the app for */
.ts-metric.is-lead { background: var(--ts-green-600); border-color: var(--ts-green-600); }
.ts-metric.is-lead .ts-metric-label, .ts-metric.is-lead .ts-metric-foot { color: rgba(255, 255, 255, .8); }
.ts-metric.is-lead .ts-metric-value { color: #fff; }

.ts-panels { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-panel { background: var(--ts-paper); border: 1px solid var(--ts-rule); border-radius: var(--ts-r-lg); display: flex; flex-direction: column; min-width: 0; }
.ts-panel.is-wide { grid-column: 1 / -1; }
.ts-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--ts-rule); }
.ts-panel-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.ts-panel-body { padding: .35rem 0; }
.ts-chart { position: relative; height: 15rem; padding: 1rem 1.25rem 1.25rem; }

.ts-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--ts-rule); }
.ts-row:last-child { border-bottom: 0; }
.ts-row:hover { background: var(--ts-hover); }
.ts-row-main { min-width: 0; }
.ts-row-title { font-weight: 600; font-size: .933rem; }
.ts-row-sub { font-size: .8rem; color: var(--ts-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-row-end { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.ts-amount { font-weight: 600; font-variant-numeric: tabular-nums; }

.ts-empty { padding: 2.25rem 1.25rem; text-align: center; color: var(--ts-ink-3); font-size: .933rem; }
.ts-empty i { display: block; font-size: 1.4rem; color: var(--ts-ink-4); margin-bottom: .5rem; }

/* 11. Sign-in --------------------------------------------------------------- */
.ts-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--ts-paper); }

.ts-auth-brand {
    position: relative;
    background: var(--ts-green-700);
    color: #fff;
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
/* ruled-paper texture: faint ledger lines */
.ts-auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 2.4rem, rgba(255, 255, 255, .07) 2.4rem calc(2.4rem + 1px));
    pointer-events: none;
}
.ts-auth-brand > * { position: relative; }
.ts-auth-logo { display: inline-flex; align-self: flex-start; background: #fff; padding: .7rem 1rem; border-radius: var(--ts-r-lg); }
.ts-auth-logo img { height: 2.6rem; width: auto; display: block; }
.ts-auth-pitch h2 { color: #fff; font-size: 2.1rem; line-height: 1.2; font-weight: 600; max-width: 20ch; letter-spacing: -.02em; }
.ts-auth-pitch p { margin: 1rem 0 0; color: rgba(255, 255, 255, .78); max-width: 38ch; font-size: 1.05rem; }
.ts-auth-brand small { color: rgba(255, 255, 255, .6); }

.ts-auth-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: var(--ts-paper); }
.ts-auth-form { width: 100%; max-width: 24rem; }
.ts-auth-form h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.ts-auth-form .lead { color: var(--ts-ink-3); font-size: .975rem; margin-bottom: 1.75rem; }
.ts-auth-form .form-control { min-height: 3rem; font-size: 1rem; }
.ts-auth-form .btn-primary { min-height: 3rem; font-size: 1rem; width: 100%; }
.ts-pw { position: relative; }
.ts-pw .form-control { padding-right: 3rem; }
.ts-pw button { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--ts-ink-3); border-radius: var(--ts-r-md); }
.ts-pw button:hover { color: var(--ts-ink); background: var(--ts-hover); }
.ts-auth-foot { margin-top: 2rem; font-size: .8rem; color: var(--ts-ink-4); text-align: center; }

/* 12. nicelyalert + loader --------------------------------------------------
   nicelyalert ships its own :root palette (indigo, 16px radius, blur). We
   remap its variables so confirmations match the rest of the app.          */
:root {
    --primary: var(--ts-green-600);
    --primary-dark: var(--ts-green-700);
    --success: var(--ts-success);
    --warning: #c98a1b;
    --danger: var(--ts-danger);
    --info: var(--ts-info);
    --dark: var(--ts-ink);
    --light: var(--ts-hover);
    --gray: var(--ts-ink-3);
    --radius: var(--ts-r-xl);
    --shadow: var(--ts-shadow-float);
}
[class*="nicelyalert"] { font-family: var(--ts-font) !important; }
.nicelyalert-backdrop { background: rgba(27, 34, 51, .5) !important; backdrop-filter: none !important; }
.nicelyalert-content { padding: 2rem !important; }
.nicelyalert-icon { animation: none !important; font-size: 3.25rem !important; }
.success-icon, .error-icon { animation: none !important; }

#ajaxLoaderOverlay { background: rgba(243, 245, 244, .78) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#ajaxLoaderOverlay .spinner-border { color: var(--ts-green-600) !important; border-width: .22em; }
#ajaxLoaderOverlay p { color: var(--ts-ink-2); font-weight: 500; font-size: .933rem; }

/* 13. Responsive & motion ---------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ts-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tablet and below: sidebar becomes a drawer; "toggled" now means "open" */
@media (max-width: 991.98px) {
    #sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        margin-left: 0 !important;
        transform: translateX(-102%);
        z-index: 1060;
    }
    #wrapper.toggled #sidebar { transform: translateX(0); margin-left: 0; box-shadow: var(--ts-shadow-float) !important; }
    #sidebarBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(27, 34, 51, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    #wrapper.toggled #sidebarBackdrop { opacity: 1; pointer-events: auto; }
    main.ts-content { padding: 1.1rem 1rem 1.5rem !important; }
    .ts-topbar { padding: 0 .75rem; }
    .ts-footer { padding: .75rem 1rem; }
    .ts-auth { grid-template-columns: 1fr; }
    .ts-auth-brand { display: none; }
    .ts-auth-panel { min-height: 100vh; align-items: flex-start; padding-top: 12vh; }
}

@media (max-width: 767.98px) {
    html { font-size: 15px; }
    .header-title { font-size: 1.35rem; }
    .ts-panels { grid-template-columns: 1fr; }
    .ts-metrics { gap: .75rem; }
    .ts-metric { padding: .9rem 1rem; }
    .ts-metric-value { font-size: 1.45rem; }
    #userDropdown .ts-username { display: none; }
    .ts-newsale .ts-newsale-text { display: none; }
    main > .card > .card-body:not(.p-0) { padding: 1rem; }
    .modal-body, .modal-header, .modal-footer { padding-left: 1rem; padding-right: 1rem; }
    .modal-dialog { margin: .5rem; }
    .dt-container .dt-layout-row { padding: .75rem 1rem; }
    .dt-container .dt-search input { max-width: none; }
    .table > :not(caption) > * > * { padding: .65rem .75rem; }
}

@media (max-width: 479.98px) {
    .ts-metrics { grid-template-columns: 1fr 1fr; }
    .ts-metric-value { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Reports, receipts and anything printed keep their own stylesheet */
@media print {
    #sidebar, .ts-topbar, .ts-footer, #sidebarBackdrop { display: none !important; }
    body { background: #fff; }
    main.ts-content { padding: 0 !important; }
}

/* Additions: ledger "net" line, empty validation summary */
.ts-net { border-top: 3px double var(--ts-ink-2); border-bottom: 0; padding-top: .9rem; padding-bottom: .9rem; }
.ts-row:has(+ .ts-net) { border-bottom: 0; }
.ts-net .ts-row-title { font-size: 1rem; }
.ts-net .ts-amount { font-size: 1.3rem; letter-spacing: -.02em; color: var(--ts-green-700); }

.validation-summary-valid { display: none !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* Row actions inside tables stay quiet: one solid green per screen, not one per row.
   Edit/Print are neutral, Post is soft green, Details is soft blue, Delete/FBR soft red. */
table .btn-primary, table .btn-secondary {
    --bs-btn-color: var(--ts-ink-2);
    --bs-btn-bg: var(--ts-paper);
    --bs-btn-border-color: var(--ts-rule-strong);
    --bs-btn-hover-color: var(--ts-ink);
    --bs-btn-hover-bg: var(--ts-hover);
    --bs-btn-hover-border-color: var(--ts-ink-4);
    --bs-btn-active-color: var(--ts-ink);
    --bs-btn-active-bg: var(--ts-chalk);
    --bs-btn-active-border-color: var(--ts-ink-4);
}
table .btn-success {
    --bs-btn-color: var(--ts-green-700);
    --bs-btn-bg: var(--ts-green-100);
    --bs-btn-border-color: var(--ts-green-100);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ts-green-600);
    --bs-btn-hover-border-color: var(--ts-green-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ts-green-700);
    --bs-btn-active-border-color: var(--ts-green-700);
}
table .btn-sm { gap: .35rem; }
td > .btn + .btn { margin-left: .25rem; }

/* 14. Fit to viewport -------------------------------------------------------
   On desktop-class screens the page itself never scrolls. The top bar, page
   title, Create button, search and paging stay put; only the table rows (or
   an overlong form) scroll inside their own panel. On phones and very short
   windows the layout cannot fit, so it falls back to normal scrolling.       */
.ts-remarks { display: flex; flex-direction: column; }
.ts-remarks textarea { flex: 1 1 auto; resize: none; min-height: 5rem; }

.ts-dash { display: flex; flex-direction: column; }
.ts-side { display: contents; }

/* legacy "card-header with title + tools" used by the voucher screens */
main > .card > .card-header:has(.card-tools) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
main > .card > .card-header .card-title { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
main > .card > .card-header .card-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
main > .card > form > .card-body { background: var(--ts-paper); border: 1px solid var(--ts-rule); border-radius: var(--ts-r-lg); }

/* Create button rides on the title row instead of taking its own strip */
@media (min-width: 768px) {
    main.ts-content > .card { position: relative; }
    main.ts-content > .card > .card-body > .p-3.flex-shrink-0.border-bottom:first-child {
        position: absolute;
        top: 0;
        right: .25rem;
        z-index: 3;
        padding: 0 !important;
        border: 0 !important;
        background: none;
    }
    main.ts-content > .card:has(> .card-body > .p-3.flex-shrink-0.border-bottom) > .card-header { padding-right: 11.5rem; }
    .btn-create.btn-sm { min-height: var(--ts-control-h); --bs-btn-padding-x: 1rem; --bs-btn-font-size: .933rem; }
}

@media (min-width: 992px) and (min-height: 560px) {
    html, body.ts-app { height: 100%; overflow: hidden; }
    body.ts-app #wrapper { height: 100vh; height: 100dvh; min-height: 0; }
    body.ts-app #sidebar { position: relative; top: auto; height: 100%; }
    body.ts-app .ts-main { height: 100%; min-height: 0; overflow: hidden; }
    .ts-topbar { position: relative; }

    main.ts-content {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        padding: .75rem 1.25rem .5rem !important;
    }
    .ts-footer { padding: .3rem 1.25rem; font-size: .75rem; }

    /* screen frame: header fixed, panel fills the rest */
    main.ts-content > .card,
    main.ts-content > .card.h-100 { flex: 1 1 auto; min-height: 0; height: auto !important; display: flex; flex-direction: column; }
    main.ts-content > .card > .card-header { flex: 0 0 auto; padding: .1rem .25rem .6rem; }
    main.ts-content > .card > .card-body,
    main.ts-content > .card > form > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
    main.ts-content > .card > .card-body:not(.p-0),
    main.ts-content > .card > form > .card-body { padding: .9rem 1.25rem; }
    main.ts-content > .card > form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    main.ts-content .card-body:not(.p-0) .mb-3 { margin-bottom: .55rem !important; }
    main.ts-content .card-body:not(.p-0) .form-group { margin-bottom: .55rem; }
    main.ts-content .card-body:not(.p-0) textarea.form-control { min-height: 3.5rem; }
    .header-title { font-size: 1.45rem; }

    /* list screens: search + paging fixed, rows scroll */
    main.ts-content > .card > .card-body.p-0 { overflow: hidden; }
    main.ts-content > .card > .card-body.p-0 > .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }
    main.ts-content .table-responsive > .dt-container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    main.ts-content .dt-container > .row { flex: 0 0 auto; }
    main.ts-content .dt-container > .row.dt-layout-table { flex: 1 1 auto; min-height: 0; overflow: auto; align-items: flex-start; }
    main.ts-content .dt-container table.dataTable { border-collapse: separate; border-spacing: 0; }
    main.ts-content .dt-container .dt-layout-table thead th { position: sticky; top: 0; z-index: 2; }
    main.ts-content .dt-container > .row { padding-top: .45rem; padding-bottom: .45rem; }

    /* invoice / return forms: header fields, a flexible items table, totals + notes, buttons */
    main.ts-content .card-body:not(.p-0) > form:has(#itemsTable, #returnItemsTable) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    form:has(#itemsTable, #returnItemsTable) > .row { flex: 0 0 auto; }
    form:has(#itemsTable, #returnItemsTable) > .card {
        flex: 1 1 0;
        min-height: 9rem;
        display: flex;
        flex-direction: column;
        margin-bottom: .55rem !important;
    }
    form:has(#itemsTable, #returnItemsTable) > .card > .card-header { flex: 0 0 auto; padding: .4rem .9rem; }
    form:has(#itemsTable, #returnItemsTable) > .card > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0; }
    form:has(#itemsTable, #returnItemsTable) .table-responsive { overflow: visible; }
    form:has(#itemsTable, #returnItemsTable) :is(#itemsTable, #returnItemsTable) thead th { position: sticky; top: 0; z-index: 2; }
    form:has(#itemsTable, #returnItemsTable) :is(#itemsTable, #returnItemsTable) { border-collapse: separate; border-spacing: 0; margin: 0; }
    form:has(#itemsTable, #returnItemsTable) :is(#noItemsRow, #noReturnItemsRow) td { padding: .9rem; }
    form:has(#itemsTable, #returnItemsTable) :is(#noItemsRow, #noReturnItemsRow) i { display: none; }
    form:has(#itemsTable, #returnItemsTable) :is(#noItemsRow, #noReturnItemsRow) p { margin: 0; }
    form:has(#itemsTable, #returnItemsTable) > .d-flex.justify-content-end { flex: 0 0 auto; padding-top: .35rem; }
    form:has(#itemsTable, #returnItemsTable) table:has(input[name="SubTotal"]) { margin-bottom: .3rem; }
    form:has(#itemsTable, #returnItemsTable) table:has(input[name="SubTotal"]) td { padding: .12rem .9rem; }
    form:has(#itemsTable, #returnItemsTable) table:has(input[name="SubTotal"]) .form-control { min-height: 1.75rem; font-size: .933rem; }
    form:has(#itemsTable, #returnItemsTable) table:has(input[name="SubTotal"]) tr:last-child td { padding-top: .4rem; padding-bottom: .4rem; }
    form:has(#itemsTable, #returnItemsTable) table:has(input[name="SubTotal"]) tr:last-child .form-control { font-size: 1.35rem; min-height: 2.1rem; }
    form:has(#itemsTable, #returnItemsTable) .ts-remarks textarea { min-height: 4.5rem; }

    /* dashboard: everything on one screen, lists scroll inside their panel */
    .ts-dash { height: 100%; min-height: 0; gap: .75rem; }
    .ts-dash-head h1 { font-size: 1.3rem; }
    .ts-dash-head p { margin: 0; font-size: .867rem; }
    .ts-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; flex: 0 0 auto; }
    .ts-metric { padding: .65rem 1rem .6rem; }
    .ts-metric-value { font-size: 1.55rem; }
    .ts-panels {
        flex: 1 1 0;
        min-height: 0;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: .75rem;
    }
    .ts-panels > .ts-panel.is-wide:first-child { grid-column: 1 / span 8; grid-row: 1; }
    .ts-panels > .ts-panel:nth-child(2) { grid-column: 1 / span 4; grid-row: 2; }
    .ts-panels > .ts-panel:nth-child(3) { grid-column: 5 / span 4; grid-row: 2; }
    .ts-side { display: grid; grid-column: 9 / -1; grid-row: 1 / span 2; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; min-height: 0; }
    .ts-side > .ts-panel, .ts-side > .ts-panel.is-wide { grid-column: auto; }
    .ts-panel { min-height: 0; overflow: hidden; }
    .ts-panel-head { padding: .5rem 1rem; }
    .ts-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0; }
    .ts-chart { flex: 1 1 auto; min-height: 0; height: auto; padding: .5rem 1rem .75rem; overflow: hidden; }
    .ts-row { padding: .4rem 1rem; }
    .ts-net { padding-top: .6rem; padding-bottom: .6rem; }
    .ts-empty { padding: .9rem 1rem; }
}

/* Touch-ups found while testing the real screens ------------------------------ */
/* Old inline light-blue gradient headers (report filters and a few forms) */
[style*="#a3d2e9"] {
    background: var(--ts-hover) !important;
    border-bottom: 1px solid var(--ts-rule);
    color: var(--ts-ink);
}
/* Status ticks in lists are rendered with a hard-coded teal */
table.dataTable i.fa-check[style] { color: var(--ts-success) !important; }
table.dataTable i.fa-xmark[style], table.dataTable i.fa-times[style] { color: var(--ts-danger) !important; }
/* Rows that open an edit dialog on double-click carry the record id */
table.dataTable tbody tr[id] { cursor: pointer; }

/* 15. FBR Integration screen -------------------------------------------------
   Two panels side by side (connection, checklist) and a strip of results below.
   On desktop the page does not scroll: a panel that runs out of room scrolls
   inside itself. Phones and short windows stack the panels.                   */
.ts-integ { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ts-integ > .ts-panel { grid-column: 1 / -1; min-width: 0; }
.ts-integ-form { padding: .85rem 1.25rem 1rem; }

.ts-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0 0 .25rem; min-width: 0; }
.ts-mode {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .6rem;
    align-items: start;
    padding: .6rem .8rem;
    margin: 0;
    background: var(--ts-paper);
    border: 1px solid var(--ts-rule-strong);
    border-radius: var(--ts-r-md);
    cursor: pointer;
}
.ts-mode input { margin-top: .22rem; accent-color: var(--ts-green-600); }
.ts-mode:has(input:checked) { background: var(--ts-green-50); border-color: var(--ts-green-600); box-shadow: inset 0 0 0 1px var(--ts-green-600); }
.ts-mode:has(input:focus-visible) { box-shadow: var(--ts-focus); }
.ts-mode:has(input:disabled) { cursor: default; opacity: .8; }
.ts-mode-name { font-weight: 600; }
.ts-mode-note { grid-column: 2; font-size: .8rem; line-height: 1.35; color: var(--ts-ink-3); }

.ts-token { border-top: 1px solid var(--ts-rule); margin-top: .7rem; padding-top: .65rem; }
.ts-token-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; }
.ts-token-head label { margin: 0; font-weight: 600; }
.ts-token-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ts-token-msg { min-height: 1.3rem; margin-top: .35rem; font-size: .867rem; overflow-wrap: anywhere; }

.ts-check { justify-content: flex-start; }
.ts-check > i { flex: 0 0 auto; font-size: 1.1rem; }
.ts-check.is-ok > i { color: var(--ts-success); }
.ts-check.is-todo > i { color: var(--ts-warning); }
.ts-check .ts-row-main { flex: 1 1 auto; }
.ts-check .ts-row-sub { white-space: normal; overflow: visible; }

.ts-activity { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: .5rem 2rem; padding: .6rem 1.25rem .85rem; }
.ts-stats { --bs-table-bg: transparent; }
.ts-stats th, .ts-stats td { text-align: right; font-variant-numeric: tabular-nums; padding: .3rem .5rem; }
.ts-stats th:first-child, .ts-stats td:first-child { text-align: left; padding-left: 0; }
.ts-stats thead th { font-size: .8rem; font-weight: 500; color: var(--ts-ink-3); }
.ts-stats tbody th { font-weight: 600; }
.ts-problems { min-width: 0; }
.ts-problems h3 { margin: 0 0 .25rem; font-size: .933rem; font-weight: 600; }
.ts-problems-empty { margin: .35rem 0 0; color: var(--ts-ink-3); font-size: .933rem; }
.ts-problems-empty i { color: var(--ts-success); margin-right: .35rem; }
.ts-problem { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--ts-rule); }
.ts-problem:last-child { border-bottom: 0; }
.ts-problem .ts-row-main { flex: 1 1 auto; }
.ts-problem .ts-row-sub { color: var(--ts-danger); }

@media (min-width: 992px) {
    .ts-integ > .ts-panel:nth-child(1) { grid-column: 1 / span 7; }
    .ts-integ > .ts-panel:nth-child(2) { grid-column: 8 / -1; }
}
@media (max-width: 575.98px) {
    .ts-modes, .ts-activity { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 992px) and (min-height: 560px) {
    .ts-integ { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; }
    .ts-integ > .ts-panel { overflow: hidden; }
    .ts-integ .ts-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
    .ts-integ > .ts-panel.is-wide .ts-panel-body { flex: 0 0 auto; overflow: visible; }
    .ts-integ .ts-panel-head { padding: .5rem 1rem; }
    .ts-integ-form { padding: .7rem 1rem .8rem; }
    .ts-token { margin-top: .5rem; padding-top: .5rem; }
}