/* ==========================================================================
   LIT BILLBOOK — "LGX" standard theme  (proof of concept)
   --------------------------------------------------------------------------
   A modern SaaS-billing look benchmarked against Zoho Books / Vyapar /
   MyBillBook: calm neutral surfaces, one confident brand accent, a clear
   page-header band, KPI strip, quiet tables and consistent 8px spacing.

   OPT-IN: everything is scoped to  body.lgx  — no page changes appearance
   until that class is added, so this can be trialled page-by-page and
   removed instantly.
   ========================================================================== */

body.lgx{
	/* ---- design tokens ----
	   Soft cool-grey canvas (#f5f7fa) with white cards on top: low-glare, and the
	   panels lift clearly instead of the old white-on-near-white. Hairlines are
	   faintly warm, which keeps card edges soft rather than clinical. The accent is
	   a clay/terracotta dual-tone gradient: warm against the cool navy/grey shell,
	   free to carry meaning (money collected vs outstanding). */
	--lgx-brand:#c9613c;          /* clay/terracotta accent (solid)           */
	--lgx-brand-lt:#e0895f;       /* lighter end of the gradient              */
	--lgx-grad:linear-gradient(135deg,#e0895f 0%,#c15334 100%);  /* dual tone   */
	--lgx-brand-dk:#a8482a;
	--lgx-brand-sf:#fbeee8;       /* brand surface (tints, active states)     */
	--lgx-ink:#0f172a;            /* headings                                 */
	--lgx-body:#334155;           /* body text                                */
	--lgx-muted:#64748b;          /* secondary text                           */
	--lgx-faint:#94a3b8;          /* labels, placeholders                     */
	--lgx-line:#e6e1d6;           /* hairlines / card borders (warm)          */
	--lgx-line-2:#efebe1;         /* internal hairlines (rows, dividers)      */
	--lgx-surface:#ffffff;        /* cards / panels                           */
	--lgx-canvas:#f5f7fa;         /* page background — soft cool grey         */
	--lgx-canvas-2:#f7f8fa;       /* cool grey — footer band                  */
	--lgx-nav:#0f0f0f;            /* sidebar — near black (Ledgerflow style)  */
	--lgx-nav-2:#1e1e1e;
	--lgx-ok:#0e9f6e;   --lgx-ok-sf:#e6f7f0;
	--lgx-warn:#b45309; --lgx-warn-sf:#fef3c7;
	--lgx-bad:#be123c;  --lgx-bad-sf:#ffe4e6;
	--lgx-info:#1d4ed8; --lgx-info-sf:#e0e7ff;
	--lgx-r:10px;                 /* radius                                   */
	--lgx-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
	--lgx-shadow-md:0 4px 16px rgba(16,24,40,.08);

	font-family:"Inter","Public Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
	background:var(--lgx-canvas) !important;
	color:var(--lgx-body);
	-webkit-font-smoothing:antialiased;
}
body.lgx .content,
body.lgx .content-page,
body.lgx #wrapper{ background:var(--lgx-canvas) !important; }
/* footer action bar: same card treatment as the page-header band */
body.lgx .fixedbottom,
body.lgx .container-fluid.fixedbottom,
body.lgx .footer{
	background:transparent !important;
	border-top:0 !important;
	box-shadow:none !important;
	padding:0 !important;
}
body.lgx .container-fluid.fixedbottom > .container,
body.lgx .fixedbottom > .container{
	width:auto !important; max-width:none !important;
	background:var(--lgx-surface);
	/* flush to the left, right and bottom edges — only the top edge is drawn */
	border:0 !important;
	border-top:1px solid var(--lgx-line) !important;
	border-radius:0 !important;
	box-shadow:var(--lgx-shadow);
	padding:9px 14px !important;
	margin:0 !important;
}
/* Entry/buttons pages whose action bar has NO inner .container (they render
   .fixedbottom > .row directly, e.g. customer/item/employee "new" screens) still
   need the surface bar. Paint it on the .fixedbottom itself so their footer matches
   the list-page footers (which use .fixedbottom > .container). */
body.lgx .fixedbottom:not(:has(> .container)){
	background:var(--lgx-surface) !important;
	border-top:1px solid var(--lgx-line) !important;
	box-shadow:var(--lgx-shadow) !important;
	padding:9px 14px !important;
}
/* table head / row hover use the alt surface, a shade off the canvas */
body.lgx table.table > tbody > tr:hover{ background:#faf8f3; }
body.lgx table.table > thead > tr > th,
body.lgx table#datatables > thead > tr > th{ background:#faf8f3 !important; }
body.lgx h1,body.lgx h2,body.lgx h3,body.lgx h4,body.lgx h5{ color:var(--lgx-ink); }

/* ==========================================================================
   1. SIDEBAR — Ledgerflow pattern (v2)
   Full-bleed rows (no side gutters), flat icons with no tile behind them,
   single-line labels, and a highlight ONLY on the active sub-item. The open
   parent is shown by brighter text alone, so exactly one thing in the nav
   ever carries a filled background.
   ========================================================================== */
body.lgx .left.side-menu,
body.lgx #sidebar-menu,
body.lgx .side-menu.left{ background:var(--lgx-nav) !important; }

/* --- top-level items: full width, no side margin --- */
body.lgx #sidebar-menu ul li a{
	display:flex !important; align-items:center; gap:11px;
	color:#c2c2c2 !important;
	font-size:13.5px !important; font-weight:500; line-height:1.4;
	padding:10px 16px !important;
	margin:0 !important; border-radius:0 !important;
	/* one line, always — long labels ellipsise instead of wrapping */
	white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
	transition:background .12s ease, color .12s ease;
}
/* flat icons — strip the tile/background the base theme paints behind them */
body.lgx #sidebar-menu ul li a i,
body.lgx #sidebar-menu ul li a i.menu-icon,
body.lgx #sidebar-menu ul li a > i:first-child{
	background:none !important; background-image:none !important;
	box-shadow:none !important; border:0 !important; border-radius:0 !important;
	width:18px !important; height:auto !important; min-width:0 !important;
	padding:0 !important; margin:0 !important; line-height:inherit !important;
	flex:0 0 18px; text-align:center;
	color:#8a8a8a !important; font-size:16px !important;
}
/* chevron hard right */
body.lgx #sidebar-menu ul li a .fa-angle-down,
body.lgx #sidebar-menu ul li a > .pull-right{
	margin-left:auto !important; float:none !important; flex:0 0 auto;
	font-size:11px !important; color:#6f6f6f !important;
}

/* hover */
body.lgx #sidebar-menu ul li a:hover{ background:#1b1b1b !important; color:#ffffff !important; }
body.lgx #sidebar-menu ul li a:hover i{ color:#cfcfcf !important; }

/* OPEN PARENT: brighter text only — deliberately no filled background, so the
   active child is the single highlighted row in the nav. */
body.lgx #sidebar-menu > ul > li.active > a,
body.lgx #sidebar-menu > ul > li > a.active,
body.lgx #sidebar-menu > ul > li > a.subdrop{
	background:transparent !important;
	color:#ffffff !important; font-weight:600 !important; box-shadow:none !important;
}
body.lgx #sidebar-menu > ul > li.active > a i,
body.lgx #sidebar-menu > ul > li > a.active i,
body.lgx #sidebar-menu > ul > li > a.subdrop i{ color:#e2e2e2 !important; }
body.lgx #sidebar-menu ul li.active > a:before,
body.lgx #sidebar-menu ul li a.active:before{ content:none !important; }
/* keep hover feedback on the parent */
body.lgx #sidebar-menu > ul > li.active > a:hover,
body.lgx #sidebar-menu > ul > li > a.subdrop:hover{ background:#1b1b1b !important; }

/* --- submenu: plain indented column, no rail --- */
body.lgx #sidebar-menu ul ul{
	background:transparent !important;
	margin:0 0 4px 0 !important; padding:0; border-left:0 !important;
}
body.lgx #sidebar-menu ul ul li a{
	display:block !important;
	font-size:13px !important; font-weight:400;
	color:#9a9a9a !important;
	padding:8px 16px 8px 20px !important;
	margin:0 !important; border-radius:0 !important;
	line-height:1.4;
	white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
}
body.lgx #sidebar-menu ul ul li a:hover{ background:#1b1b1b !important; color:#ffffff !important; }

/* THE one highlighted row: the active sub-item */
body.lgx #sidebar-menu ul ul li.active > a,
body.lgx #sidebar-menu ul ul li a.active{
	background:#2c2c2c !important; color:#ffffff !important;
	font-weight:500 !important; box-shadow:none !important;
}

/* --- modern polish ------------------------------------------------------- */
/* a 2px accent indicator on the active sub-item: one small piece of colour
   that makes the current page findable at a glance without tinting the row */
body.lgx #sidebar-menu ul ul li.active > a,
body.lgx #sidebar-menu ul ul li a.active{ position:relative; }
body.lgx #sidebar-menu ul ul li.active > a:before,
body.lgx #sidebar-menu ul ul li a.active:before{
	content:"" !important; position:absolute; left:0; top:0; bottom:0;
	width:2px; background:var(--lgx-brand);
}
/* hairline separators so long menus read as groups, not one long list */
body.lgx #sidebar-menu > ul > li{ border-bottom:1px solid rgba(255,255,255,.035); }
body.lgx #sidebar-menu > ul > li:last-child{ border-bottom:0; }
/* thin, unobtrusive scrollbar */
body.lgx .left.side-menu{ scrollbar-width:thin; scrollbar-color:#3a3a3a transparent; }
body.lgx .left.side-menu::-webkit-scrollbar{ width:6px; }
body.lgx .left.side-menu::-webkit-scrollbar-track{ background:transparent; }
body.lgx .left.side-menu::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:3px; }
body.lgx .left.side-menu::-webkit-scrollbar-thumb:hover{ background:#4d4d4d; }
/* brand header blends into the panel instead of a white block */
body.lgx .topbar .topbar-left,
body.lgx .left.side-menu .logo,
body.lgx #sidebar-menu > .logo{ background:var(--lgx-nav) !important; border-right:0 !important; }


/* wrapper padding removed so rows sit flush to the panel edges */
body.lgx .sidebar-inner,
body.lgx .sidebar-inner.slimscrollleft,
body.lgx .side-menu.left .scroll-y .sidebar-inner{ padding:0 !important; }
/* no vertical rule anywhere down the submenu column */
body.lgx #sidebar-menu ul ul,
body.lgx #sidebar-menu ul ul li,
body.lgx #sidebar-menu ul ul li a{ border-left:0 !important; box-shadow:none !important; }
body.lgx #sidebar-menu ul ul li a:after{ content:none !important; }
body.lgx #sidebar-menu ul ul li:not(.active) > a:before{ content:none !important; }

/* the base theme draws a 2px rgba(255,255,255,.14) rail via #sidebar-menu ul ul::before */
body.lgx #sidebar-menu ul ul:before,
body.lgx #sidebar-menu ul ul:after{ content:none !important; display:none !important; }

/* ==========================================================================
   2. TOP BAR — thin, white, clear separation
   ========================================================================== */
body.lgx .topbar .topbar-left,
body.lgx .topbar-main,
body.lgx .topbar{ background:var(--lgx-surface) !important; box-shadow:none !important;
	border-bottom:1px solid var(--lgx-line) !important; }
body.lgx .topbar .topbar-left{ border-right:1px solid var(--lgx-line) !important; }
body.lgx .topbar .nav > li > a{ color:var(--lgx-body) !important; }

/* topbar clearance -------------------------------------------------------
   The base theme clears the 50px fixed topbar with
     .content-page > .content { margin-top:50px }
   a DIRECT-child selector, so any page whose .content sits one level deeper
   gets no clearance at all and its first card (the .lgx-head band) is partly
   covered by the top menu. Same value, matched at any depth. */
body.lgx .content-page .content{ margin-top:50px; }
body.lgx .content-page .content > .row:first-child,
body.lgx .content-page .content > .lgx-head:first-child{ margin-top:4px; }

/* ==========================================================================
   3. PAGE HEADER BAND — title + subtitle + primary action (Zoho pattern)
   ========================================================================== */
body.lgx .lgx-head{
	display:flex; align-items:center; gap:12px; flex-wrap:wrap;
	background:var(--lgx-surface); border:1px solid var(--lgx-line);
	border-radius:12px; padding:9px 14px; margin-bottom:12px; box-shadow:var(--lgx-shadow);
}
body.lgx .lgx-head .lgx-h-ic{
	width:34px; height:34px; border-radius:9px; flex:0 0 auto;
	background:var(--lgx-grad); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:17px;
}
body.lgx .lgx-head .lgx-h-tx{ flex:1 1 auto; min-width:0; }
body.lgx .lgx-head h1{ font-size:16px; font-weight:700; margin:0; letter-spacing:-.2px; line-height:1.25; }
body.lgx .lgx-head p{ font-size:12px; color:var(--lgx-muted); margin:1px 0 0; line-height:1.3; }
body.lgx .lgx-head .lgx-h-act{ display:flex; gap:8px; flex-wrap:wrap; }

/* ==========================================================================
   4. KPI STRIP — the summary tiles every billing SaaS opens with
   ========================================================================== */
body.lgx .lgx-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:12px; }
body.lgx .lgx-kpi{
	background:var(--lgx-surface); border:1px solid var(--lgx-line); border-radius:10px;
	padding:8px 12px; box-shadow:var(--lgx-shadow); position:relative; overflow:hidden;
	/* compact: label and value on one line, caption tucked underneath */
	display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px;
}
body.lgx .lgx-kpi .k-l{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
	text-transform:uppercase; letter-spacing:.03em; color:var(--lgx-faint); flex:1 1 auto; min-width:0; }
body.lgx .lgx-kpi .k-l i{ font-size:12px; }
body.lgx .lgx-kpi .k-v{ font-size:17px; font-weight:800; color:var(--lgx-ink); margin:0;
	font-variant-numeric:tabular-nums; letter-spacing:-.3px; white-space:nowrap; }
body.lgx .lgx-kpi .k-s{ flex:1 0 100%; font-size:10.5px; color:var(--lgx-muted); margin-top:1px; line-height:1.3; }
body.lgx .lgx-kpi.ok   .k-l{ color:var(--lgx-ok);   } body.lgx .lgx-kpi.ok   .k-v{ color:var(--lgx-ok); }
body.lgx .lgx-kpi.warn .k-l{ color:var(--lgx-warn); } body.lgx .lgx-kpi.warn .k-v{ color:var(--lgx-warn); }
body.lgx .lgx-kpi.bad  .k-l{ color:var(--lgx-bad);  } body.lgx .lgx-kpi.bad  .k-v{ color:var(--lgx-bad); }

/* ==========================================================================
   5. PANELS / WIDGETS — flat cards, no gradients
   ========================================================================== */
body.lgx .widget{
	background:var(--lgx-surface) !important; border:1px solid var(--lgx-line) !important;
	border-radius:14px !important; box-shadow:var(--lgx-shadow) !important; overflow:hidden;
}
body.lgx .widget-header,
body.lgx .widget-header.transparent{
	background:var(--lgx-surface) !important; background-image:none !important;
	border-bottom:1px solid var(--lgx-line) !important;
	padding:14px 18px !important; min-height:0 !important; box-shadow:none !important;
}
body.lgx .widget-header h2{
	font-size:14.5px !important; font-weight:700 !important; color:var(--lgx-ink) !important;
	text-transform:none !important; margin:0 !important;
}
body.lgx .widget-content{ padding:16px 18px !important; }

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
body.lgx .btn{
	border-radius:9px !important; font-weight:600 !important; font-size:13.5px !important;
	padding:8px 15px !important; border:1px solid transparent !important;
	box-shadow:none !important; transition:all .13s ease;
}
body.lgx .btn-sm,body.lgx .btn-xs{ padding:6px 12px !important; font-size:12.5px !important; }
body.lgx .btn-primary,body.lgx .btn-info,body.lgx .btn-success,body.lgx .btn-sea-green{
	background:var(--lgx-grad) !important; border-color:transparent !important; color:#fff !important;
	box-shadow:0 2px 8px rgba(201,97,60,.28) !important;
}
body.lgx .btn-primary:hover,body.lgx .btn-info:hover,body.lgx .btn-success:hover,body.lgx .btn-sea-green:hover{
	background:linear-gradient(135deg,#d47a51 0%,#a8482a 100%) !important; border-color:transparent !important;
}
body.lgx .btn-default{
	background:var(--lgx-surface) !important; border-color:#d7dde8 !important; color:var(--lgx-body) !important;
}
body.lgx .btn-default:hover{ background:#f4f7fb !important; }
body.lgx .btn-danger{ background:var(--lgx-bad) !important; border-color:var(--lgx-bad) !important; color:#fff !important; }
body.lgx .btn-warning{ background:#d97706 !important; border-color:#d97706 !important; color:#fff !important; }

/* --------------------------------------------------------------------------
   Bottom action-bar: a distinct colour per button.
   The generic .btn-primary/.btn-info/.btn-success/.btn-sea-green are flattened
   to the brand gradient above so primary actions read as "the brand". Inside the
   fixed bottom action bar each action instead gets its own colour so the buttons
   are easy to tell apart at a glance. `.fixedbottom .btn-x` raises specificity
   over the flatten rule (and, placed after it, wins the equal-specificity :hover
   too) without affecting list/toolbar buttons anywhere else.
   -------------------------------------------------------------------------- */
body.lgx .fixedbottom .btn-sea-green{ background:#0d9488 !important; border-color:#0d9488 !important; color:#fff !important; } /* Return  - teal   */
body.lgx .fixedbottom .btn-orange-3 { background:#ea580c !important; border-color:#ea580c !important; color:#fff !important; } /* New     - orange */
body.lgx .fixedbottom .btn-success  { background:#16a34a !important; border-color:#16a34a !important; color:#fff !important; } /* Edit    - green  */
body.lgx .fixedbottom .btn-warning  { background:#d97706 !important; border-color:#d97706 !important; color:#fff !important; } /* Restore/MakeInv - amber */
body.lgx .fixedbottom .btn-violet   { background:#7c3aed !important; border-color:#7c3aed !important; color:#fff !important; } /* Payment - violet */
body.lgx .fixedbottom .btn-info     { background:#2563eb !important; border-color:#2563eb !important; color:#fff !important; } /* Print/English - blue */
body.lgx .fixedbottom .btn-primary  { background:#4338ca !important; border-color:#4338ca !important; color:#fff !important; } /* Email   - indigo */
body.lgx .fixedbottom .btn-danger   { background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important; } /* Cancel/PDF - red */
body.lgx .fixedbottom .btn-dribbble { background:#db2777 !important; border-color:#db2777 !important; color:#fff !important; } /* Go Back - pink   */
body.lgx .fixedbottom .btn-teal     { background:#0891b2 !important; border-color:#0891b2 !important; color:#fff !important; } /* Barcode - cyan   */
body.lgx .fixedbottom .btn:hover    { filter:brightness(1.08); }

/* ==========================================================================
   7. FORMS
   ========================================================================== */
body.lgx label,body.lgx .control-label{
	font-size:12px !important; font-weight:600 !important; color:var(--lgx-body) !important;
	letter-spacing:.01em;
}
body.lgx .form-control,body.lgx select.form-control,body.lgx input.form-control{
	min-height:36px !important; height:auto !important;
	border:1px solid #d7dde8 !important; border-radius:9px !important;
	padding:7px 12px !important; font-size:13.5px !important; color:var(--lgx-ink) !important;
	background:var(--lgx-surface) !important; box-shadow:none !important;
	transition:border-color .13s ease, box-shadow .13s ease;
}
body.lgx .form-control:focus{
	border-color:var(--lgx-brand) !important;
	box-shadow:0 0 0 3px rgba(201,97,60,.17) !important;
}
body.lgx .form-control::placeholder{ color:var(--lgx-faint) !important; }

/* ==========================================================================
   8. TABLES — quiet header, borderless rows, tabular numerals
   ========================================================================== */
body.lgx table.table > thead > tr > th,
body.lgx table#datatables > thead > tr > th{
	background:#f8fafc !important; color:var(--lgx-muted) !important;
	font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.05em;
	border:0 !important; border-bottom:1px solid var(--lgx-line) !important; padding:11px 12px !important;
}
body.lgx table.table > tbody > tr > td{
	border:0 !important; border-bottom:1px solid var(--lgx-line-2) !important;
	padding:11px 12px !important; font-size:13.5px; color:var(--lgx-body); vertical-align:middle;
}
body.lgx table.table > tbody > tr:hover{ background:#f8fafc; }
body.lgx table.table td[align="right"],
body.lgx table.table .text-right{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   9. STATUS PILLS
   ========================================================================== */
body.lgx .lgx-pill{
	display:inline-flex; align-items:center; gap:5px;
	font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; line-height:1.6;
}
body.lgx .lgx-pill:before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
body.lgx .lgx-pill.ok{   background:var(--lgx-ok-sf);   color:var(--lgx-ok); }
body.lgx .lgx-pill.warn{ background:var(--lgx-warn-sf); color:var(--lgx-warn); }
body.lgx .lgx-pill.bad{  background:var(--lgx-bad-sf);  color:var(--lgx-bad); }
body.lgx .lgx-pill.info{ background:var(--lgx-info-sf); color:var(--lgx-info); }

/* ==========================================================================
   10. CARD LISTS — align the existing card components to the theme
   ========================================================================== */
body.lgx .prod-card,
body.lgx .lg-user-card,
body.lgx .lg-cards table tbody > tr{
	background:var(--lgx-surface) !important;
	border:1px solid var(--lgx-line) !important;
	border-radius:14px !important;
	box-shadow:var(--lgx-shadow) !important;
}
body.lgx .prod-card:hover,
body.lgx .lg-user-card:hover,
body.lgx .lg-cards table tbody > tr:hover{
	box-shadow:var(--lgx-shadow-md) !important; border-color:#d7dde8 !important; transform:none;
}
body.lgx .lg-cards table tbody > tr:before{ background:var(--lgx-brand) !important; opacity:.9; }

/* ==========================================================================
   10b. FILTER PANEL — every control on ONE compact row
   The markup is Bootstrap "form-horizontal" in stacked col-* wrappers. Rather
   than rewrite six fields, the grid is unwound here into a single flex row:
   label on top, field under it, all sharing one baseline. Search and the
   record count are siblings of the form, so the row is built on their shared
   parent to pull everything onto the same line.
   ========================================================================== */
body.lgx #lgxFilterPanel .widget-content{ padding:10px 14px !important; }

/* the shared parent becomes the row: [ form fields ][ search ][ count ] */
body.lgx #lgxFilterPanel .widget-content > .col-md-12{
	display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px;
	width:100% !important; padding:0 !important; float:none !important;
}
body.lgx #lgxFilterPanel form{
	display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px;
	flex:1 1 auto; min-width:0; margin:0;
}
/* each Bootstrap column becomes an equal-ish flex cell */
body.lgx #lgxFilterPanel form > div[class*="col-"]{
	float:none !important; width:auto !important; min-width:0;
	flex:1 1 120px; padding:0 !important; margin:0 !important;
}
/* the Get List cell hugs its button */
body.lgx #lgxFilterPanel form > .col-md-1{ flex:0 0 auto; }

body.lgx #lgxFilterPanel .form-group{ margin:0 !important; }
body.lgx #lgxFilterPanel .control-label{
	float:none !important; display:block !important; width:100% !important;
	text-align:left !important; padding:0 0 3px !important;
	font-size:10px !important; font-weight:700 !important;
	text-transform:uppercase; letter-spacing:.04em; color:var(--lgx-faint) !important;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.lgx #lgxFilterPanel .form-group > div[class*="col-"]{
	float:none !important; width:100% !important; padding:0 !important;
}
/* compact controls */
body.lgx #lgxFilterPanel .form-control,
body.lgx #lgxFilterPanel select.form-control{
	width:100% !important; min-height:32px !important; height:32px !important;
	padding:4px 9px !important; font-size:12.5px !important; border-radius:7px !important;
}
body.lgx #lgxFilterPanel .btn{
	height:32px; padding:0 14px !important; font-size:12.5px !important; white-space:nowrap;
}
body.lgx #lgxFilterPanel br{ display:none; }

/* search + count ride on the same row (no divider, no wrap) */
body.lgx .lgx-searchrow{
	display:flex; align-items:flex-end; gap:8px;
	flex:1 1 220px; min-width:0;
	border-top:0 !important; margin:0 !important; padding:0 !important; clear:none !important;
}
body.lgx .lgx-searchfld{ flex:1 1 auto; min-width:0; max-width:none; }
body.lgx .lgx-searchfld label{
	display:block; font-size:10px !important; font-weight:700 !important;
	text-transform:uppercase; letter-spacing:.04em; color:var(--lgx-faint) !important;
	margin-bottom:3px;
}
body.lgx .lgx-searchfld .form-control{
	min-height:32px !important; height:32px !important;
	padding:4px 9px !important; font-size:12.5px !important; border-radius:7px !important;
}
body.lgx .lgx-reccount{
	flex:0 0 auto; font-size:11.5px; color:var(--lgx-muted); font-weight:600;
	padding-bottom:8px; white-space:nowrap;
}

@media (max-width:1200px){
	body.lgx #lgxFilterPanel form > div[class*="col-"]{ flex:1 1 140px; }
}

/* toolbar above a list: search + count + filters on one line */
body.lgx .lgx-toolbar{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	margin-bottom:14px;
}
body.lgx .lgx-toolbar .lgx-count{ font-size:13px; color:var(--lgx-muted); font-weight:600; }
body.lgx .lgx-toolbar .lgx-spacer{ flex:1 1 auto; }

/* DataTables chrome */
body.lgx .dataTables_wrapper .dt-buttons .btn{ margin-right:6px; }
body.lgx .dataTables_filter input{ border-radius:20px !important; min-width:220px; }
body.lgx .dataTables_paginate .paginate_button{ border-radius:8px !important; }

/* ==========================================================================
   11. EMPTY STATE
   ========================================================================== */
body.lgx .lgx-empty{ text-align:center; padding:48px 16px; color:var(--lgx-muted); }
body.lgx .lgx-empty i{ font-size:40px; color:#cbd5e1; display:block; margin-bottom:10px; }
body.lgx .lgx-empty h4{ font-size:15px; font-weight:700; margin:0 0 4px; }
body.lgx .lgx-empty p{ font-size:13px; margin:0 0 14px; }

/* ==========================================================================
   12. EMERALD SWEEP — retint legacy accent greens to the theme accent
   --------------------------------------------------------------------------
   The app hard-codes emerald (#10b981 / #0e9e6e / #34d399) in ~75 views and in
   custom.css for DECORATIVE accents: edit buttons, focus rings, card hovers,
   role pills, rate chips. Those are re-pointed at the clay accent here.

   Deliberately NOT touched — green carries meaning in a billing app and must
   keep doing so:
     .qc-tpb .p        paid amount on invoice cards
     .psl-stat.net     net salary
     .lgx-kpi.ok       "Collected"
     .lgx-pill.ok / .badge.a / .prod-stock.ok / .text-success
     .prod-card.qc-paid:before   paid status bar
   ========================================================================== */
/* primary/edit action buttons that were emerald gradients */
body.lgx .lg-user-actions .lg-uact.edit{
	background:var(--lgx-grad) !important; border-color:transparent !important; color:#fff !important;
}
body.lgx .prod-rate{ background:var(--lgx-grad) !important; box-shadow:0 1px 3px rgba(201,97,60,.28) !important; }
/* role / category pills that used emerald text */
body.lgx .lg-user-role{ color:var(--lgx-brand) !important; background:var(--lgx-brand-sf) !important; border-color:#f0dcd2 !important; }
body.lgx .ptag, body.lgx .psl-badge.type{ color:var(--lgx-brand) !important; background:var(--lgx-brand-sf) !important; }
/* focus rings + card hover borders */
body.lgx .emp-search:focus,
body.lgx #qsearch:focus,
body.lgx .search input:focus{ border-color:var(--lgx-brand) !important; box-shadow:0 0 0 3px rgba(201,97,60,.15) !important; }
body.lgx .prod-card:hover,
body.lgx .lg-user-card:hover{ border-color:#e0c3b6 !important; box-shadow:var(--lgx-shadow-md) !important; }
/* the card left accent bar (non-status lists) */
body.lgx .lg-cards table tbody > tr:before{ background:var(--lgx-grad) !important; }
/* legacy "sea green" buttons already map to the accent via the button rules;
   make sure their hover/focus states follow too */
body.lgx .btn-sea-green:focus,
body.lgx .btn-sea-green:active{ background:var(--lgx-brand-dk) !important; color:#fff !important; }
/* links that used the emerald */
body.lgx a.text-sea-green,
body.lgx .lg-foot a,
body.lgx .reg-help a{ color:var(--lgx-brand) !important; }

/* ==========================================================================
   13. TOP BAR + SETTINGS PANEL — global, applies to every themed page
   --------------------------------------------------------------------------
   header.php hard-codes emerald in an inline <style> (incl. an emerald
   gradient across the whole topbar). These override it to the theme accent.
   ========================================================================== */
/* the bar itself: flat white with a hairline, not a green gradient */
body.lgx .topbar{
	background:var(--lgx-surface) !important; background-image:none !important;
	box-shadow:none !important; border-bottom:1px solid var(--lgx-line) !important;
}
/* brand block matches the bar - white, not the sidebar's near-black, so the logo
   is not sitting on a dark island at the top-left */
body.lgx .topbar .topbar-left{
	background:var(--lgx-surface) !important;
	border-right:1px solid var(--lgx-line) !important;
	display:flex !important; align-items:center; justify-content:space-between;
}
/* contrast has to follow the background or these disappear on white */
body.lgx .topbar .topbar-left .button-menu-mobile,
body.lgx .topbar .topbar-left .button-menu-mobile i{ color:var(--lgx-ink) !important; }
body.lgx .topbar .topbar-left a,
body.lgx .topbar .topbar-left .logo,
body.lgx .topbar .topbar-left .logo span{ color:var(--lgx-ink) !important; }

/* support number: hard right, vertically centred. The markup fakes centring with
   an inline padding-top:18px, which the flex rules below override. */
body.lgx .topbar li.language_bar > a{
	display:flex !important; align-items:center; gap:5px;
	padding-top:0 !important; padding-bottom:0 !important; height:50px; line-height:normal !important;
}

/* topbar text/links read dark on the white bar */
body.lgx .topbar .nav > li > a,
body.lgx .topbar .navbar-right a,
body.lgx .topbar .topbar-profile > a{ color:var(--lgx-body) !important; }
body.lgx .topbar .navbar-right .badge{ background:var(--lgx-brand) !important; color:#fff !important; }

/* quick-menu (grid) + right-panel toggle icons */
body.lgx #quickmenutt > a i,
body.lgx .topbar .iconify > a i,
body.lgx .topbar .lg-rs-topbtn > a i{ color:var(--lgx-muted) !important; }
body.lgx #quickmenutt > a:hover i,
body.lgx .topbar .iconify > a:hover i,
body.lgx .topbar .lg-rs-topbtn > a:hover i,
body.lgx.rs-open .topbar .lg-rs-topbtn > a{ color:var(--lgx-brand) !important; }
body.lgx #quickmenutt .grid-dropdown a.clickable:hover i{ color:var(--lgx-brand) !important; }
body.lgx .topbar .topbar-left .button-menu-mobile{ color:#c2c2c2 !important; }
body.lgx .topbar .topbar-left .button-menu-mobile:hover{
	color:#ffffff !important; background:rgba(255,255,255,.08) !important;
}
/* profile avatar ring */
body.lgx .topbar-profile-image{ border-color:var(--lgx-line) !important; }

/* dropdown menus (profile, quick grid) share the card look */
body.lgx .topbar .dropdown-menu{
	border:1px solid var(--lgx-line) !important; border-radius:10px !important;
	box-shadow:var(--lgx-shadow-md) !important; padding:6px !important;
}
body.lgx .topbar .dropdown-menu > li > a{ border-radius:7px; padding:8px 12px; font-size:13px; }
body.lgx .topbar .dropdown-menu > li > a:hover{ background:var(--lgx-canvas) !important; color:var(--lgx-ink) !important; }

/* ---- right settings panel ---- */
body.lgx .right.side-menu{
	background:var(--lgx-surface) !important;
	border-left:1px solid var(--lgx-line) !important; box-shadow:var(--lgx-shadow-md) !important;
}
body.lgx .right.side-menu .settingsbar > li > a{
	color:var(--lgx-body) !important; font-size:13px; padding:9px 14px; border-radius:8px;
}
body.lgx .right.side-menu .settingsbar > li > a:hover{
	background:var(--lgx-canvas) !important; color:var(--lgx-ink) !important;
}
body.lgx .right.side-menu .settingsbar > li > a i{ color:var(--lgx-muted) !important; }
body.lgx .right.side-menu .settingsbar > li > a:hover i,
body.lgx .right.side-menu .settingsbar > li.rightactive > a,
body.lgx .right.side-menu .settingsbar > li.rightactive > a i{ color:var(--lgx-brand) !important; }
body.lgx .right.side-menu .settingsbar > li.rightactive > a{ background:var(--lgx-brand-sf) !important; }

/* ---- modals + sweetalert: retint emerald headers/buttons ---- */
body.lgx .modal-header{
	background:var(--lgx-surface) !important; background-image:none !important;
	border-bottom:1px solid var(--lgx-line) !important; color:var(--lgx-ink) !important;
}
body.lgx .modal-header .modal-title,
body.lgx .modal-header h4{ color:var(--lgx-ink) !important; }
body.lgx .modal-header .close{ color:var(--lgx-muted) !important; opacity:.9; text-shadow:none; }
body.lgx .modal-content{ border:1px solid var(--lgx-line) !important; border-radius:12px !important; box-shadow:var(--lgx-shadow-md) !important; }
body.lgx .modal-footer{ border-top:1px solid var(--lgx-line) !important; }
body.lgx .sweet-alert button.confirm,
body.lgx .swal2-confirm{ background:var(--lgx-grad) !important; border-color:transparent !important; }

/* ==========================================================================
   14. FOOTER ACTION BAR — hide it when it has no buttons left
   The "Alt+N New" button was removed app-wide (the page header band carries
   the primary action now). Pages whose footer held only that button would be
   left with an empty white strip, so those collapse; footers that still have
   real actions (Save, Damaged List, ...) keep the card styling.
   ========================================================================== */
body.lgx .container-fluid.fixedbottom:not(:has(a, button, input[type="submit"], input[type="button"])),
body.lgx .fixedbottom:not(:has(a, button, input[type="submit"], input[type="button"])){
	display:none !important;
}

/* ==========================================================================
   15. Invoice header - single row of fields
   Add class "lgx-invhead" to the header <div class="row"> of any invoice
   entry screen (sales, purchase, DC, quotation, returns...).

   Those screens lay out 8+ fields as col-md-2 / col-md-1 siblings, which
   totals more than Bootstrap's 12 columns and wraps onto a second row.
   Flexing the row makes every field column share one line whatever its
   col-md-* span, so no column classes have to be re-spanned per screen.
   A full-width child (the bill info strip) keeps its own line.
   Hidden children are skipped by flex, so conditionally shown fields
   collapse cleanly instead of leaving a gap.
   ========================================================================== */
/* disabled - broke layout */ .lgx-invhead--disabled{display:flex;flex-wrap:wrap;align-items:flex-end;margin-left:-4px;margin-right:-4px}
/* disabled - broke layout */ .lgx-invhead--disabled > .col-md-12,
/* disabled - broke layout */ .lgx-invhead--disabled > .col-sm-12{flex:0 0 100%;max-width:100%}
/* disabled - broke layout */ .lgx-invhead--disabled > div:not(.col-md-12):not(.col-sm-12){flex:1 1 0;width:auto!important;max-width:none;min-width:0;padding-left:4px;padding-right:4px}
/* disabled - broke layout */ .lgx-invhead--disabled .form-group{margin-bottom:4px}
/* disabled - broke layout */ .lgx-invhead--disabled label{font-size:11px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* disabled - broke layout */ .lgx-invhead--disabled .form-control{height:32px;padding:4px 8px;font-size:13px}
/* 11 field columns share this row, so keep the basis small enough that they
   stay on one line at normal window widths; only very narrow screens wrap. */
@media (max-width:1100px){.lgx-invhead--disabled > div:not(.col-md-12):not(.col-sm-12){flex:1 1 96px}}
/* disabled - broke layout */ .lgx-invhead--disabled label{font-size:10.5px}

/* Disc block holds a nested grid (Bill/Item checkboxes + %/currency radios), so
   size it to its content instead of letting it shrink until the label clips.
   Same for the CESS/Pkg-Fwd/TCS checkbox group. */
/* disabled - broke layout */ .lgx-invhead--disabled > .lgx-discblk{flex:0 0 auto!important;min-width:186px}
/* disabled - broke layout */ .lgx-invhead--disabled .checkbox,.lgx-invhead .radio{white-space:nowrap;margin-top:2px;margin-bottom:2px}
/* disabled - broke layout */ .lgx-invhead--disabled .checkbox label,.lgx-invhead .radio label{font-size:12px}
/* disabled - broke layout */ .lgx-invhead--disabled select.form-control{text-overflow:ellipsis}

/* --- invoice header, revised: fixed narrow columns, natural left flow -------
   Equal-share flex squeezed every field to the same width and clipped labels.
   Instead give each field a col-md-1 width and let Bootstrap's float flow fill
   left to right, wrapping to a second row only once the first is full - so a
   screen with few fields shows one row, and extra fields spill over cleanly.
   Customer and Disc keep col-md-2: one holds a name + edit button, the other a
   nested checkbox/radio grid.                                               */
/* disabled - broke layout */ .lgx-invhead--disabled{display:block}
/* disabled - broke layout */ .lgx-invhead--disabled > div:not(.col-md-12):not(.col-sm-12){
	float:left;width:8.3333%!important;max-width:none;min-width:0;
	padding-left:4px;padding-right:4px}
/* disabled - broke layout */ .lgx-invhead--disabled > .lgx-custblk,
/* disabled - broke layout */ .lgx-invhead--disabled > .lgx-discblk{width:16.6667%!important;min-width:0}
/* short labels such as "Disc" must never be clipped */
/* disabled - broke layout */ .lgx-invhead--disabled label{overflow:visible;text-overflow:clip}
/* disabled - broke layout */ .lgx-invhead--disabled > .lgx-discblk label{white-space:nowrap}

/* ==========================================================================
   16. Filter panel - one-row layout, project wide
   Scoped to #lgxFilterPanel so every converted list page picks it up with no
   markup change. Controls sit on a single line, search first (left of the
   Business selector), wrapping only when the window is genuinely too narrow.
   ========================================================================== */
#lgxFilterPanel .widget-content{padding:10px 12px}
#lgxFilterPanel .lgx-fltrow,
#lgxFilterPanel .prod-toolbar,
#lgxFilterPanel form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0}
#lgxFilterPanel .lgx-fltrow > *,
#lgxFilterPanel .prod-toolbar > *{flex:0 1 auto;margin:0}
/* search always leftmost, whatever order the page happens to declare it in */
#lgxFilterPanel .lgx-fltrow > :has(input[id*="search"]),
#lgxFilterPanel .prod-toolbar > :has(input[id*="search"]){order:-1}
#lgxFilterPanel input[id*="search"]{min-width:240px}
/* the Business selector ships as a pull-right col-md-4/col-md-8 pair - undo
   that so it lines up inline with everything else instead of floating away */
#lgxFilterPanel .pull-right{float:none!important}
#lgxFilterPanel [class*="col-md-"],
#lgxFilterPanel [class*="col-sm-"]{width:auto!important;float:none!important;padding-left:0;padding-right:0}
#lgxFilterPanel label{font-size:11px;margin-bottom:2px;display:block;white-space:nowrap}
#lgxFilterPanel .form-group{margin-bottom:0}
#lgxFilterPanel .form-control{height:32px;padding:4px 8px;font-size:13px;display:inline-block;width:auto;min-width:150px}
#lgxFilterPanel .btn{height:32px;padding:5px 14px}
#lgxFilterPanel .clearfix{display:none}
@media (max-width:900px){#lgxFilterPanel .form-control{min-width:130px}}

/* Correction to section 16: the search input is often a DIRECT child of the
   flex row (no wrapper), so the :has() rule above never matched it. Target the
   input itself as well, and pin its typography - it was inheriting a tiny font
   from the page rather than the panel's own .form-control sizing. */
#lgxFilterPanel input[id*="search"],
#lgxFilterPanel input[type="search"]{
	order:-1!important;
	font-size:13px!important;
	height:32px!important;
	line-height:20px!important;
	padding:5px 10px!important;
	min-width:240px;
	max-width:320px;
	align-self:flex-end}
/* the Business label sits above its select, search has none - keep baselines level */
#lgxFilterPanel .lgx-fltrow,
#lgxFilterPanel .prod-toolbar{align-items:flex-end}
/* trim the dead space left behind where lifted markup used to sit */
#lgxFilterPanel .widget-content{padding:10px 12px!important;min-height:0}
#lgxFilterPanel .widget-content > .col-md-12{padding:0}
#lgxFilterPanel br{display:none}

/* Filter card: strictly one row, always.
   flex-wrap:nowrap keeps every control on a single line whatever the mix of
   fields a page declares; if the set is genuinely wider than the panel it
   scrolls horizontally rather than stacking into a second row. The card also
   hugs its content so no dead space is left where lifted markup used to sit. */
#lgxFilterPanel .lgx-fltrow,
#lgxFilterPanel .prod-toolbar,
#lgxFilterPanel form{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:visible;padding-bottom:2px}
#lgxFilterPanel .lgx-fltrow > *,
#lgxFilterPanel .prod-toolbar > *{flex:0 0 auto!important}
#lgxFilterPanel{margin-bottom:12px}
#lgxFilterPanel .widget-content{overflow:visible}
#lgxFilterPanel .widget-content > div:empty,
#lgxFilterPanel .lgx-fltrow > div:empty{display:none}