/* ==========================================================================
   Timber Stores - application styles on top of Tabler (assets/tabler).
   Only what Tabler does not provide lives here; everything else uses
   Tabler components and utilities directly.
   ========================================================================== */

.kpi-value { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pre-line { white-space: pre-line; }
.container-narrow { max-width: 1040px; }

/* Brand logo (yellow wordmark) */
.app-logo { border-radius: 3px; }
.app-logo-lg { height: 2.5rem; width: auto; border-radius: 4px; }

/* Mobile stacked tables: keep action buttons inline (Tabler makes .btn block) */
@media (max-width: 767.98px) {
    .table-mobile-md .btn-list .btn { display: inline-flex; }
    .table-mobile-md td.cell-title { font-size: 1rem; font-weight: 600; }
    .table-mobile-md tfoot { display: none; }
    .table-mobile-md td.w-1 { width: auto !important; }
}
@media (min-width: 768px) {
    .table .cell-title, .table .cell-title a { white-space: nowrap; }
    .table .actions-cell .btn-list { flex-wrap: nowrap; justify-content: flex-end; }
}

/* Collapsible day cards (Bootstrap collapse) */
.day-toggle { cursor: pointer; user-select: none; }
.day-toggle .chev { transition: transform .2s; }
.day-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Customer picker: Tabler dropdown menu used as a listbox */
.combo { position: relative; }
.combo .dropdown-menu { width: 100%; max-height: 280px; overflow-y: auto; }
.combo .dropdown-item small { margin-left: auto; padding-left: .75rem; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }

/* Upload drop area */
.dropzone-area { display: block; border: 2px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); padding: 1.75rem 1rem; text-align: center; color: var(--tblr-secondary); cursor: pointer; background: var(--tblr-bg-surface-secondary); transition: border-color .15s, background .15s; }
.dropzone-area:hover, .dropzone-area.dragover { border-color: var(--tblr-primary); background: var(--tblr-primary-lt); }
.dropzone-area .icon { width: 2rem; height: 2rem; margin-bottom: .25rem; }
.file-thumb { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--tblr-bg-surface-secondary); border: 0; padding: 0; width: 100%; overflow: hidden; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb .icon { width: 2.5rem; height: 2.5rem; color: var(--tblr-red); }

/* Recovery codes */
.code-grid code { display: block; text-align: center; font-size: 1rem; padding: .5rem; letter-spacing: .06em; }

/* OTP input */
.otp-input { text-align: center; font-size: 1.5rem; letter-spacing: .4em; font-family: var(--tblr-font-monospace); }

/* Documents: delivery note, vouchers, petty cash, day end (includes/documents.php) */
.doc-logo { height: 3.5rem; width: auto; }
.doc-title { letter-spacing: .06em; font-weight: 800; }
.doc-rule { border-color: var(--tblr-body-color) !important; }
.doc-sign-name { min-height: 1.5rem; }
.doc-sign { border-bottom: 2px solid var(--tblr-body-color); max-width: 240px; margin: 2.5rem auto 0; }
.doc-empty-row td { height: 2.25rem; }
.doc-page + .doc-page { margin-top: 1.5rem; }
@media print {
    @page { size: A4; margin: 12mm; }
    .doc-print .page-body { margin: 0; }
    .doc-print .alert { display: none; }
    .doc-page .alert { display: inline-flex !important; }
    .doc-page { break-after: page; }
    .doc-page:last-child { break-after: auto; }
    .doc-page + .doc-page { margin-top: 0; }
}

.te-input { text-align: right; margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.usd-toggle .chev { transition: transform .2s; }
.usd-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Charts (assets/js/charts.js)
   -------------------------------------------------------------------------- */
.chart { position: relative; width: 100%; min-height: 220px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text { font-size: 11px; fill: var(--tblr-secondary); font-family: var(--tblr-font-sans-serif); }
.chart .grid-line { stroke: var(--tblr-border-color); stroke-width: 1; }
.chart .baseline { stroke: var(--tblr-border-color-dark, var(--tblr-border-color)); stroke-width: 1; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: var(--tblr-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.chart-legend i, .legend-swatch { width: .625rem; height: .625rem; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.chart-tip { position: absolute; pointer-events: none; background: var(--tblr-gray-900, #182433); color: #fff; font-size: .75rem; padding: .4rem .55rem; border-radius: var(--tblr-border-radius); box-shadow: var(--tblr-box-shadow); white-space: nowrap; z-index: 5; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .1s; }
.chart-tip.show { opacity: 1; }
.chart-tip .tip-row { display: flex; align-items: center; gap: .375rem; }
.chart-tip .tip-row i { width: .5rem; height: .5rem; border-radius: 2px; display: inline-block; }
.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--tblr-secondary); font-size: .875rem; }

@media print {
    .page-wrapper { margin: 0 !important; }
    .card { box-shadow: none; }
}

/* Card header with tabs: tabs scroll horizontally on phones; page-size control is desktop only.
   The tabs sit on the header's bottom edge (so the active tab joins the table) even when the
   page-size control makes the header taller; the control stays vertically centred. */
.card-header.tabs-header { align-items: flex-end; }
.card-header.tabs-header .card-actions { align-self: center; }
@media (max-width: 767.98px) {
    .card-header.tabs-header .card-actions { display: none; }
    .card-header.tabs-header .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
}

/* Centred pages (sign-in, two-factor, error pages): centre with auto margins instead of
   flex centring, so a page taller than the screen starts at the top and can be scrolled,
   instead of its top (logo, card header) being pushed out of reach. */
.page-center { justify-content: flex-start; }
.page-center > .container, .page-center > .container-tight { margin-top: auto; margin-bottom: auto; }

/* --------------------------------------------------------------------------
   Chart palette (includes/stats.php chart_colors). Validated with the dataviz
   palette checks: light mode on #ffffff, dark mode on the dark card #262626,
   where orange needs a darker step (#e8620b) to stay inside the lightness band.
   -------------------------------------------------------------------------- */
:root {
    --app-chart-1: #066fd1; --app-chart-2: #f76707; --app-chart-3: #0ca678;
    --app-chart-4: #ae3ec9; --app-chart-5: #17a2b8; --app-chart-6: #d6336c;
    --app-chart-hover: rgba(16, 24, 40, .04);
}
[data-bs-theme=dark] {
    --app-chart-2: #e8620b;
    --app-chart-hover: rgba(255, 255, 255, .06);
}
.chart .chart-hit { fill: transparent; }
.chart .chart-hit.is-hover { fill: var(--app-chart-hover); }
.chart .chart-center-label { fill: var(--tblr-secondary); }
.chart .chart-center-value { fill: var(--tblr-body-color); }
[data-bs-theme=dark] .chart-tip { border: 1px solid var(--tblr-border-color); }

/* Dark mode: Tabler's standard red and blue text (#d63939, #066fd1) read at about 3:1 on dark
   surfaces. These lighter steps of the same hues pass WCAG AA (4.5:1) on every dark surface
   used here, including table hover (#333333): red 4.78, blue 4.88. */
[data-bs-theme=dark] .text-red, [data-bs-theme=dark] .text-danger { color: #f27c7c !important; }
[data-bs-theme=dark] .text-blue { color: #5aa5f3 !important; }
[data-bs-theme=dark] .btn-outline-primary { --tblr-btn-color: #5aa5f3; --tblr-btn-border-color: #5aa5f3; }
[data-bs-theme=dark] .form-selectgroup-input:checked + .form-selectgroup-label { color: #5aa5f3; } /* selected option (e.g. Sign-in popup type) */

/* ==========================================================================
   Compact layout: tighter spacing on every app page (the delivery note and
   daily sales pages first of all). Measured against Tabler's defaults:
   table rows 57px -> 41px, card headers 65px -> 48px, fields and buttons
   40px -> 36px. Printable documents (card-lg, their own tables) keep their
   spacing, so printouts are unchanged.
   ========================================================================== */
:root, :root[data-bs-theme] {
    --tblr-page-padding-y: 1rem;          /* space above the page title and the content (was 1.5rem) */
    --tblr-btn-input-padding-y: 0.4375rem; /* text fields and selects (was 0.5625rem) */
}
.card:not(.card-lg) {
    --tblr-card-spacer-y: 1rem; --tblr-card-spacer-x: 1rem;
    --tblr-card-cap-padding-y: 0.75rem; --tblr-card-cap-padding-x: 1rem;
}
.btn:not(.btn-sm):not(.btn-lg) { --tblr-btn-padding-y: 0.4375rem; --tblr-btn-padding-x: 0.875rem; }
.btn-sm { --tblr-btn-padding-y: 0.3125rem; --tblr-btn-padding-x: 0.625rem; }
.form-label { margin-bottom: 0.3125rem; display: flow-root; } /* contains a wrapped .form-label-description float */

/* Tables inside cards: shorter rows, edges aligned with the card padding */
.card-table:not(.table-sm) > :not(caption) > * > * { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* table-sm keeps its own, smaller padding */
.card-table tr td:first-child, .card-table tr th:first-child { padding-inline-start: 1rem; }
.card-table tr td:last-child, .card-table tr th:last-child { padding-inline-end: 1rem; }

/* Summary tiles (kpi_tile) */
.kpi-card .card-body { padding: 0.875rem 1rem; }
.kpi-card .kpi-value { font-size: 1.375rem; line-height: 1.75rem; }

/* Status labels (Delivered, Collected, Pending, Active...): rectangular, not pill-shaped */
.status {
    --tblr-status-height: 1.375rem; --tblr-status-padding-x: 0.5rem; --tblr-status-gap: 0.375rem;
    border-radius: var(--tblr-border-radius-sm);
    font-size: 0.8125rem;
}

/* Daily records: one card with a divided list of days (was one card per day). Each day row is a grid with
   aligned columns (Day | Sales | Expenses | Vouchers | Status); a header row names them on wider screens. */
.day-list .day-list-header { flex-wrap: wrap; gap: 0.75rem; }
.day-list .day-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
.day-list .day-filters .input-group { width: auto; flex-wrap: nowrap; }
.day-list .day-filters .form-control, .day-list .day-filters .form-select { width: 11rem; }
.day-list .day-row { display: grid; grid-template-columns: minmax(10rem, 1.5fr) minmax(8rem, 1fr) minmax(8rem, 1fr) 5.5rem 9rem 1.25rem; align-items: center; column-gap: 1rem; padding: 0.625rem 1rem; }
.day-list .day-head { padding-top: 0.5rem; padding-bottom: 0.5rem; background: var(--tblr-bg-surface-tertiary); border-bottom: 1px solid var(--tblr-border-color); }
.day-list .day-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-list .day-chev { justify-self: end; display: flex; }
.day-list .day-cur { font-size: 0.75em; color: var(--tblr-secondary); }
.day-list .day-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.day-list .day-sum { margin: 0; }
.day-list .day-sum > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; }
.day-list .day-sum dt { font-weight: var(--tblr-font-weight-normal); color: var(--tblr-secondary); }
.day-list .day-sum dd { margin: 0; font-weight: var(--tblr-font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-list .day-sum .day-sum-total { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--tblr-border-color); }
.day-list .day-sum .day-sum-total dt { color: inherit; font-weight: var(--tblr-font-weight-medium); }
.day-list .day-sum .day-sum-total dd { font-weight: var(--tblr-font-weight-bold); }
@media (max-width: 767.98px) {
    .day-list .day-filters { width: 100%; margin-inline-start: 0; }
    .day-list .day-filters .input-group { flex: 1 1 12rem; }
    .day-list .day-filters .form-control, .day-list .day-filters .form-select { width: 100%; }
    .day-list .day-head { display: none; }
    .day-list .day-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr) 1.25rem; grid-template-areas: "date date status chev" "sales exp vch ."; row-gap: 0.5rem; column-gap: 0.75rem; }
    .day-list .day-date { grid-area: date; }
    .day-list .day-sales { grid-area: sales; }
    .day-list .day-exp { grid-area: exp; }
    .day-list .day-vch { grid-area: vch; }
    .day-list .day-status { grid-area: status; justify-self: end; }
    .day-list .day-chev { grid-area: chev; }
    .day-list .day-num { text-align: start; }
    .day-list .day-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: 0.625rem; font-weight: var(--tblr-font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tblr-secondary); }
}
.day-list .day-toggle:hover { background: var(--tblr-bg-surface-secondary); }
.day-list .day-toggle:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.day-list .day-today .day-toggle { box-shadow: inset 3px 0 0 var(--tblr-primary); }
.day-list .day-body { padding: 0.75rem 1rem 1rem; background: var(--tblr-bg-surface-secondary); border-top: 1px solid var(--tblr-border-color); }
.day-list .day-admin { padding: 0.5rem 1rem; background: var(--tblr-bg-surface-secondary); border-top: 1px dashed var(--tblr-border-color); }

/* One card split into two halves (delivery note forms): side by side from lg with a divider, stacked below */
.card-split > [class*="col-"] + [class*="col-"] { border-top: var(--tblr-card-border-width) solid var(--tblr-card-border-color); }
@media (min-width: 992px) {
    .card-split > [class*="col-"] + [class*="col-"] { border-top: 0; border-inline-start: var(--tblr-card-border-width) solid var(--tblr-card-border-color); }
}

/* Detailed delivery note list: one row per note; its items listed in one cell with quantity + unit on the right */
.dn-detail-table .dn-customer { min-width: 11rem; }
.dn-items { list-style: none; margin: 0; padding: 0; min-width: 15rem; }
.dn-items li { display: flex; align-items: baseline; gap: 1rem; }
.dn-items li + li { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px dashed var(--tblr-border-color); }
.dn-item-desc { flex: 1 1 auto; min-width: 0; }
.dn-item-qty { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dn-item-qty strong { display: inline-block; min-width: 2.5rem; text-align: end; }
.dn-item-unit { display: inline-block; width: 2.25rem; font-size: 0.75rem; color: var(--tblr-secondary); }
@media print {
    .dn-detail-wrap { overflow: visible; }
    .dn-detail-table { font-size: 8.5pt; }
    .dn-detail-table > :not(caption) > * > * { padding: 0.25rem 0.3rem; }
    .dn-detail-table tr { break-inside: avoid; }
    .dn-detail-table thead th { white-space: normal; }
    .dn-detail-table .dn-customer { min-width: 0; }
    .dn-detail-table .dn-customer, .dn-detail-table .dn-ref { overflow-wrap: anywhere; }
    .dn-items { min-width: 15em; }
    .dn-items li { gap: 0.5em; }
    .dn-item-qty strong { min-width: 2em; }
    .dn-item-unit { width: 2.6em; font-size: 0.85em; }
    .dn-detail-table .status { font-size: 0.85em; }
}
/* Phones: each delivery note as a compact block (DN + status | date, references, customer, items). Screen only, print keeps the table. */
@media screen and (max-width: 767.98px) {
    .dn-detail-table, .dn-detail-table tbody { display: block; }
    .dn-detail-table thead { display: none; }
    .dn-detail-table tbody > tr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem 0.75rem; padding: 0.875rem 1rem; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); }
    .dn-detail-table tbody > tr:last-child { border-bottom: 0; }
    .dn-detail-table tbody > tr > td { display: block; padding: 0 !important; border: 0; }
    .dn-detail-table tbody > tr > td:nth-child(1) { grid-area: 1 / 3; text-align: end; color: var(--tblr-secondary); }
    .dn-detail-table tbody > tr > td:nth-child(2) { grid-area: 1 / 1 / 2 / 3; }
    .dn-detail-table tbody > tr > td:nth-child(2) > div { display: inline-block; margin: 0 0 0 0.5rem !important; }
    .dn-detail-table tbody > tr > td.dn-customer, .dn-detail-table tbody > tr > td.dn-items-cell { grid-column: 1 / -1; min-width: 0; }
    .dn-detail-table tbody > tr > td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.125rem; font-size: 0.625rem; font-weight: var(--tblr-font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tblr-secondary); }
    .dn-detail-table .dn-ref { overflow-wrap: anywhere; }
    .dn-items { min-width: 0; }
}

/* Vouchers page: total row under the amounts */
.voucher-table tfoot td { padding-top: 0.75rem; padding-bottom: 0.75rem; border-top: var(--tblr-border-width) solid var(--tblr-border-color); border-bottom: 0; background: var(--tblr-bg-surface-secondary); }
.page-alerts > .alert { margin-bottom: 0; }

/* Total summary: petty cash sheet grouped into Other expenses and Vouchers with subtotals; editor rows as a grid */
.ts-table > tbody > tr > td { vertical-align: top; }
.ts-table .ts-group > td { padding-top: 0.5rem; padding-bottom: 0.5rem; background: var(--tblr-bg-surface-secondary); font-size: 0.75rem; font-weight: var(--tblr-font-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1rem; color: var(--tblr-secondary); }
.ts-table .ts-group > td.num { font-size: 0.875rem; text-transform: none; letter-spacing: 0; color: var(--tblr-body-color); font-weight: var(--tblr-font-weight-bold); }
.ts-table .ts-group-link { margin-inline-start: 0.5rem; text-transform: none; letter-spacing: 0; font-weight: var(--tblr-font-weight-normal); }
.ts-table tfoot td { padding-top: 0.75rem; padding-bottom: 0.75rem; border-top: 2px solid var(--tblr-border-color); border-bottom: 0; font-weight: var(--tblr-font-weight-bold); font-size: 1rem; }
.ts-table tfoot td.num { font-size: 1.25rem; }
.expense-grid { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 2.25rem; gap: 0.5rem; align-items: center; }
@media (max-width: 575.98px) { .expense-grid { grid-template-columns: minmax(0, 1fr) 6.5rem 2.25rem; } }

/* Day end report: cheque rows (amount | details | remove; on phones the details go under the amount) */
.cheque-entry { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; grid-template-areas: "amt desc rm"; gap: 0.5rem; align-items: start; margin-bottom: 0.5rem; }
.cheque-entry .cheque-amt-group { grid-area: amt; }
.cheque-entry .cheque-desc { grid-area: desc; }
.cheque-entry .cheque-remove { grid-area: rm; }
@media (max-width: 575.98px) { .cheque-entry { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "amt rm" "desc desc"; } }
/* Keep the day end preview (with its totals) in view while scrolling the form, on screens tall enough to show it */
@media (min-width: 992px) and (min-height: 760px) { .de-preview-col > .card { position: sticky; top: 1rem; } }

/* Account Security: profile picture file box shrinks on phones (the Upload button wraps below it) */
.avatar-file { flex: 1 1 14rem; min-width: 0; }