/* Small additions on top of Tabler. */
.object-cover { object-fit: cover; }
.card-link:hover { box-shadow: var(--tblr-box-shadow-card-hover, 0 2px 12px rgba(0,0,0,.08)); }
@media (min-width: 992px) {
  .navbar-vertical .navbar-collapse { display: flex !important; flex-direction: column; }
}
@media (max-width: 991.98px) {
  .navbar-vertical .navbar-collapse.show { max-height: calc(100vh - 56px); overflow-y: auto; }
}
.table td, .table th { vertical-align: middle; }
@media print {
  .navbar, .page-header .btn-list, .nav-tabs, .modal { display: none !important; }
  .page-wrapper { margin: 0 !important; }
  .tab-pane { display: block !important; opacity: 1 !important; }
}

/* ─── Colour palettes ─────────────────────────────────────────────────────────
 * <html data-scheme="…"> comes from the user's saved choice (app/color_schemes.php).
 * Each palette sets Tabler's primary colour and the sidebar colours; chart-1…4 colour
 * the charts and the background wash. Black & Gold also switches Tabler to dark. */
[data-scheme] {
  --tblr-primary-darken: color-mix(in srgb, var(--tblr-primary), #000 12%);
  --tblr-primary-lt: color-mix(in srgb, var(--tblr-primary) 10%, var(--tblr-bg-surface, #fff));
  --tblr-link-color: var(--tblr-primary);
  --tblr-link-color-rgb: var(--tblr-primary-rgb);
  --tblr-link-hover-color: var(--tblr-primary-darken);
  --tblr-primary-fg: #fff;
}
[data-scheme="ba-classic"] {
  --tblr-primary: #11b989; --tblr-primary-rgb: 17,185,137;
  --sidebar-bg: #ffffff; --sidebar-item: #64748b; --sidebar-item-active: #11b989; --sidebar-border: #e2e8f0;
  --chart-1: #11b989; --chart-2: #3b82f6; --chart-3: #f59e0b; --chart-4: #8b5cf6;
}
[data-scheme="black-gold"] {
  --tblr-primary: #fca311; --tblr-primary-rgb: 252,163,17; --tblr-primary-fg: #141414;
  --sidebar-bg: #000000; --sidebar-item: #e5e5e5; --sidebar-item-active: #fca311; --sidebar-border: #ffffff1a;
  --chart-1: #fca311; --chart-2: #2b4a8a; --chart-3: #b8860b; --chart-4: #5c6f99;
}
[data-scheme="fiery-ocean"] {
  --tblr-primary: #c1121f; --tblr-primary-rgb: 193,18,31;
  --sidebar-bg: #003049; --sidebar-item: #fdf0d5; --sidebar-item-active: #ff6b75; --sidebar-border: #ffffff1a;
  --chart-1: #c1121f; --chart-2: #003049; --chart-3: #669bbc; --chart-4: #780000;
}
[data-scheme="ocean-breeze"] {
  --tblr-primary: #0077b6; --tblr-primary-rgb: 0,119,182;
  --sidebar-bg: #03045e; --sidebar-item: #caf0f8; --sidebar-item-active: #00b4d8; --sidebar-border: #ffffff1a;
  --chart-1: #0077b6; --chart-2: #00b4d8; --chart-3: #03045e; --chart-4: #48cae4;
}
[data-scheme="earthy-tones"] {
  --tblr-primary: #4c956c; --tblr-primary-rgb: 76,149,108;
  --sidebar-bg: #2c6e49; --sidebar-item: #fefee3; --sidebar-item-active: #ffc9b9; --sidebar-border: #ffffff1a;
  --chart-1: #2c6e49; --chart-2: #4c956c; --chart-3: #d68c45; --chart-4: #b5651d;
}
[data-scheme="cool-coastal"] {
  --tblr-primary: #ef233c; --tblr-primary-rgb: 239,35,60;
  --sidebar-bg: #2b2d42; --sidebar-item: #edf2f4; --sidebar-item-active: #ef233c; --sidebar-border: #ffffff1a;
  --chart-1: #ef233c; --chart-2: #2b2d42; --chart-3: #8d99ae; --chart-4: #d90429;
}
[data-scheme="warm-earth"] {
  --tblr-primary: #f2542d; --tblr-primary-rgb: 242,84,45;
  --sidebar-bg: #562c2c; --sidebar-item: #f5dfbb; --sidebar-item-active: #f2542d; --sidebar-border: #ffffff1a;
  --chart-1: #f2542d; --chart-2: #0e9594; --chart-3: #562c2c; --chart-4: #127475;
}
[data-scheme="orange-sunset-sky"] {
  --tblr-primary: #ef8354; --tblr-primary-rgb: 239,131,84;
  --sidebar-bg: #2d3142; --sidebar-item: #bfc0c0; --sidebar-item-active: #ef8354; --sidebar-border: #ffffff1a;
  --chart-1: #ef8354; --chart-2: #4f5d75; --chart-3: #2d3142; --chart-4: #8d99ae;
}
[data-scheme="vibrant-summer"] {
  --tblr-primary: #2364aa; --tblr-primary-rgb: 35,100,170;
  --sidebar-bg: #2364aa; --sidebar-item: #ffffff; --sidebar-item-active: #fec601; --sidebar-border: #ffffff1a;
  --chart-1: #2364aa; --chart-2: #3da5d9; --chart-3: #73bfb8; --chart-4: #ea7317;
}
/* Tabler's .btn-primary / .bg-primary read fixed values; point them at the palette. */
[data-scheme] .btn-primary {
  --tblr-btn-bg: var(--tblr-primary); --tblr-btn-border-color: var(--tblr-primary); --tblr-btn-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: var(--tblr-primary-darken); --tblr-btn-hover-border-color: var(--tblr-primary-darken); --tblr-btn-hover-color: var(--tblr-primary-fg);
  --tblr-btn-active-bg: var(--tblr-primary-darken); --tblr-btn-active-border-color: var(--tblr-primary-darken);
  --tblr-btn-disabled-bg: var(--tblr-primary); --tblr-btn-disabled-border-color: var(--tblr-primary);
}
[data-scheme] .btn-outline-primary { --tblr-btn-color: var(--tblr-primary); --tblr-btn-border-color: var(--tblr-primary); --tblr-btn-hover-bg: var(--tblr-primary); --tblr-btn-hover-border-color: var(--tblr-primary); --tblr-btn-hover-color: var(--tblr-primary-fg); }
[data-scheme] .bg-primary { background-color: var(--tblr-primary) !important; color: var(--tblr-primary-fg) !important; }
[data-scheme] .bg-primary-lt { background-color: var(--tblr-primary-lt) !important; color: var(--tblr-primary) !important; }
[data-scheme] .text-primary { color: var(--tblr-primary) !important; }
[data-scheme] .border-primary { border-color: var(--tblr-primary) !important; }
[data-scheme] .nav-tabs .nav-link.active { border-bottom-color: var(--tblr-primary); }
[data-scheme] .form-control:focus, [data-scheme] .form-select:focus { border-color: color-mix(in srgb, var(--tblr-primary) 60%, transparent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--tblr-primary) 20%, transparent); }
[data-scheme] .form-check-input:checked { background-color: var(--tblr-primary); border-color: var(--tblr-primary); }

/* Sidebar in the palette's colours (Tabler's vertical navbar) */
.navbar-vertical {
  --tblr-navbar-bg: var(--sidebar-bg);
  --tblr-navbar-color: var(--sidebar-item);
  --tblr-navbar-hover-color: var(--sidebar-item-active);
  --tblr-navbar-active-color: var(--sidebar-item-active);
  --tblr-navbar-active-border-color: var(--sidebar-item-active);
  --tblr-navbar-active-bg: color-mix(in srgb, var(--sidebar-item-active) 12%, transparent);
  --tblr-navbar-border-color: var(--sidebar-border);
  --tblr-body-color: var(--sidebar-item);
  --tblr-navbar-brand-color: var(--sidebar-item);
  color: var(--sidebar-item);
}
.navbar-vertical .nav-link { color: var(--sidebar-item); }
.navbar-vertical .nav-item.active .nav-link, .navbar-vertical .nav-link:hover { color: var(--sidebar-item-active); }
.navbar-vertical .nav-link-icon { color: inherit; opacity: .85; }
.navbar-vertical .navbar-brand { color: var(--sidebar-item); }
.navbar-vertical .navbar-toggler { color: var(--sidebar-item); border-color: var(--sidebar-border); }
.navbar-vertical .navbar-toggler-icon { background-image: none; position: relative; height: 2px; background: currentColor; }
.navbar-vertical .navbar-toggler-icon::before, .navbar-vertical .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.navbar-vertical .navbar-toggler-icon::before { top: -6px; } .navbar-vertical .navbar-toggler-icon::after { top: 6px; }
.sidebar-muted { color: var(--sidebar-item); opacity: .7; }
a.sidebar-muted:hover, button.sidebar-muted:hover { opacity: 1; color: var(--sidebar-item-active); }
.sidebar-footer { border-top: 1px solid var(--sidebar-border); }
.btn-reset { background: none; border: 0; color: inherit; }

/* Palette picker */
.palette-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px) { .palette-grid { grid-template-columns: repeat(3, 1fr); } }
.palette-card { padding: 0; overflow: hidden; text-align: start; color: inherit; cursor: pointer; margin: 0; }
.palette-card.selected { border-color: var(--tblr-primary); box-shadow: 0 0 0 2px var(--tblr-primary); }
.palette-card:disabled { cursor: wait; }
.mini-dash { display: flex; height: 5rem; background: var(--tblr-bg-surface-secondary, #f6f8fb); }
.mini-side { display: flex; width: 2.5rem; flex-direction: column; align-items: center; gap: .375rem; padding: .5rem 0; background: var(--sidebar-bg); border-inline-end: 1px solid var(--sidebar-border); }
.mini-side span { height: .25rem; width: 1.25rem; border-radius: 9999px; background: var(--sidebar-item); opacity: .6; }
.mini-side span.ms-active { height: .375rem; background: var(--sidebar-item-active); opacity: 1; }
.mini-body { display: flex; flex: 1; flex-direction: column; gap: .375rem; padding: .5rem; }
.mini-top { height: .5rem; border-radius: 2px; background: var(--tblr-bg-surface, #fff); box-shadow: 0 0 0 1px var(--tblr-border-color); }
.mini-cards { display: flex; flex: 1; gap: .375rem; }
.mini-cards > div { flex: 1; border-radius: 2px; background: var(--tblr-bg-surface, #fff); box-shadow: 0 0 0 1px var(--tblr-border-color); }
.mini-cards span { display: block; margin: .25rem; height: .375rem; width: 1.5rem; border-radius: 9999px; }
.mini-btn { height: .625rem; width: 2.5rem; align-self: flex-end; border-radius: 2px; background: var(--tblr-primary); }
.palette-name { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-top: var(--tblr-border-width) solid var(--tblr-border-color); }
.swatch { width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 9999px; box-shadow: 0 0 0 1px var(--tblr-border-color); }
.palette-check { margin-inline-start: auto; display: none; width: 1.25rem; height: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--tblr-primary); color: var(--tblr-primary-fg); font-size: .75rem; }
.palette-card.selected .palette-check { display: flex; }

/* Background wash: each palette blends its chart colours softly behind the pages;
 * the sidebar is slightly see-through so it shows around the edges. */
[data-scheme] { --wash: 30%; }
[data-scheme="black-gold"] { --wash: 22%; }
body {
  background-color: var(--tblr-body-bg);
  background-image:
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--chart-1) var(--wash), transparent) 0, transparent 38%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--chart-2) var(--wash), transparent) 0, transparent 40%),
    radial-gradient(circle at 78% 92%, color-mix(in srgb, var(--chart-3) var(--wash), transparent) 0, transparent 42%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--chart-4) var(--wash), transparent) 0, transparent 38%);
  background-attachment: fixed;
}
.page, .page-wrapper { background: transparent; }
.navbar-vertical { --tblr-navbar-bg: color-mix(in srgb, var(--sidebar-bg) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media print { body { background: #fff !important; } }

/* Charts follow the palette */
.chart-sales { background: color-mix(in srgb, var(--chart-2) 35%, transparent); }
.chart-collected { background: var(--chart-1); }
.doc-thumb { width: 6.5rem; }
.doc-thumb .ratio img { border-top-left-radius: inherit; border-top-right-radius: inherit; }
/* Chosen customer on the sale form: one line, same height as the selects beside it. */
.customer-line { min-height: calc(1.4285714286em + 1.125rem + 2px); white-space: nowrap; overflow: hidden; }
.customer-file > summary { list-style: none; }
.customer-file > summary::-webkit-details-marker { display: none; }
/* Sidebar counters sit inline at the end of the row, vertically centred
   (Tabler floats badges inside nav links as corner dots by default). */
.navbar-vertical .nav-link { display: flex; align-items: center; }
.navbar-vertical .navbar-nav .nav-link > .badge { position: static !important; transform: none !important; top: auto !important; right: auto !important; left: auto !important; margin-inline-start: auto; align-self: center; line-height: 1; padding: .3em .55em; }

/* ── Urdu (right-to-left) ─────────────────────────────────────────────────
   Tabler's RTL stylesheet mirrors the layout; here: the Nastaliq font (it
   needs a taller line), arrows that point the reading way, and data entry,
   which is English only, kept left-to-right. */
[dir="rtl"] body, [dir="rtl"] .tooltip, [dir="rtl"] .toast, [dir="rtl"] .modal { font-family: "Noto Nastaliq Urdu", var(--tblr-font-sans-serif); }
[dir="rtl"] body { line-height: 2; }
[dir="rtl"] .page-title, [dir="rtl"] .card-title, [dir="rtl"] .modal-title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.9; }
[dir="rtl"] .subheader, [dir="rtl"] .page-pretitle, [dir="rtl"] .datagrid-title { text-transform: none; letter-spacing: 0; font-size: .8rem; }
[dir="rtl"] .badge { line-height: 2; padding-top: .1em; padding-bottom: .25em; overflow: visible; }
[dir="rtl"] .btn, [dir="rtl"] .nav-link, [dir="rtl"] .form-label, [dir="rtl"] .dropdown-item { line-height: 1.9; }
[dir="rtl"] .table th { text-transform: none; letter-spacing: 0; font-size: .75rem; }
[dir="rtl"] .ti-arrow-left, [dir="rtl"] .ti-arrow-right, [dir="rtl"] .ti-chevron-left, [dir="rtl"] .ti-chevron-right,
[dir="rtl"] .ti-arrow-narrow-right, [dir="rtl"] .ti-arrow-narrow-left, [dir="rtl"] .ti-logout, [dir="rtl"] .ti-door-exit { display: inline-block; transform: scaleX(-1); }
/* Everything typed is English: inputs, numbers, IMEIs, phones and CNICs stay LTR in the sans font. */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]), [dir="rtl"] textarea, [dir="rtl"] select,
[dir="rtl"] .ltr, [dir="rtl"] .font-monospace, [dir="rtl"] .counter { direction: ltr; unicode-bidi: isolate; font-family: var(--tblr-font-sans-serif); }
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]), [dir="rtl"] textarea { text-align: left; }
[dir="rtl"] select { direction: rtl; }
[dir="rtl"] select option { font-family: "Noto Nastaliq Urdu", var(--tblr-font-sans-serif); }
.input-lang-warning { font-size: .75rem; }
/* Count badges (sidebar, bell) hold only digits: keep the sans font so they sit centred. */
[dir="rtl"] .navbar-vertical .navbar-nav .nav-link > .badge, [dir="rtl"] .badge-notification {
  font-family: var(--tblr-font-sans-serif); line-height: 1 !important; padding: .3em .55em !important;
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em;
}