/* ===================================================================
   LIT BILLBOOK — modern table / DataTables theme (emerald)
   Scope everything under .lg-dt-card so it never leaks to other tables.
   Apply:  wrap the list widget in  <div class="lg-dt-card"> ... </div>
           and give the DataTables container the class  lg-dt
   =================================================================== */

.lg-dt-card{
	background:#ffffff;
	border:1px solid #e9edf3;
	border-radius:14px;
	box-shadow:0 1px 3px rgba(15,23,42,.06);
	margin-bottom:20px;
	overflow:hidden;
}
/* shared card header (used by BOTH table card and form widget card) */
.lg-dt-card .lg-dt-head, .lg-form-card .lg-dt-head{ padding:18px 22px 14px; border-bottom:1px solid #cbd5e1; margin-bottom:4px; }
.lg-dt-head h2{ font-size:16px; font-weight:700; color:#0f172a; margin:0; letter-spacing:.1px; }
.lg-dt-head .lg-dt-sub{ font-size:12.5px; color:#94a3b8; margin-top:4px; line-height:1.5; }
.lg-dt-card .lg-dt-body{ padding:6px 22px 16px; }

/* ---- toolbar (search + export buttons) ---- */
.lg-dt .dataTables_wrapper{ padding:0; }
.lg-dt .lg-dt-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0 12px; }
.lg-dt .lg-dt-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:8px; }
.lg-dt .lg-dt-toolbar .dt-buttons,
.lg-dt .lg-dt-toolbar .dataTables_filter{ float:none !important; margin:0 !important; }
.lg-dt .lg-dt-foot .dataTables_info,
.lg-dt .lg-dt-foot .dataTables_paginate{ float:none !important; margin:0 !important; padding-top:0 !important; }
.lg-dt .dataTables_filter{ float:right; text-align:right; margin:8px 0 12px; }
.lg-dt .dataTables_filter label{ font-size:0; color:transparent; margin:0; }
.lg-dt .dataTables_filter input{
	font-size:14px; color:#334155; border:1px solid #cbd5e1; border-radius:7px;
	padding:5px 10px 5px 30px; min-width:250px; min-height:32px; box-sizing:border-box; outline:none; margin:0;
	background:#ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
	transition:border-color .15s, box-shadow .15s;
}
.lg-dt .dataTables_filter input::placeholder{ color:#94a3b8; }
.lg-dt .dataTables_filter input:focus{ border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15); }

.lg-dt .dt-buttons{ float:left; margin:8px 0 12px; }
.lg-dt .dt-buttons .dt-button{
	background:#ffffff !important; border:1px solid #e2e8f0 !important; border-radius:9px !important;
	color:#475569 !important; font-size:12.5px !important; font-weight:600 !important;
	padding:7px 13px !important; margin:0 6px 0 0 !important; box-shadow:none !important;
	background-image:none !important; text-shadow:none !important; transition:.15s;
}
.lg-dt .dt-buttons .dt-button:hover{ background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#0f172a !important; }

/* ---- table ---- */
.lg-dt table.dataTable{ border-collapse:separate !important; border-spacing:0; width:100% !important; border:0 !important; margin:0 !important; clear:both; }
.lg-dt table.dataTable thead th,
.content .lg-dt table.dataTable thead th,
.content .lg-dt table.dataTable > thead > tr > th{
	background:#f1f5f9 !important;         /* plain light-gray header (overrides the emerald gradient) */
	background-image:none !important;
	border-top:1px solid #eef2f7 !important; border-bottom:1px solid #e9edf3 !important;
	color:#64748b !important; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
	padding:11px 14px !important; text-align:left; white-space:nowrap;
}
.lg-dt table.dataTable thead th:first-child{ border-top-left-radius:10px; }
.lg-dt table.dataTable thead th:last-child{ border-top-right-radius:10px; }
.lg-dt table.dataTable tbody td{
	border-bottom:1px solid #f1f5f9 !important; padding:12px 14px !important;
	font-size:13.5px; color:#334155; vertical-align:middle; background:transparent;
}
.lg-dt table.dataTable tbody tr:hover td{ background:#f8fafc; }
.lg-dt table.dataTable tbody tr:last-child td{ border-bottom:0 !important; }
.lg-dt table.dataTable td, .lg-dt table.dataTable th{ border-left:0 !important; border-right:0 !important; }
.lg-dt table.dataTable.no-footer{ border-bottom:0 !important; }

/* ---- sort arrows ---- */
.lg-dt table.dataTable thead th.sorting,
.lg-dt table.dataTable thead th.sorting_asc,
.lg-dt table.dataTable thead th.sorting_desc{
	background-image:none !important; position:relative; padding-right:26px !important; cursor:pointer;
}
.lg-dt table.dataTable thead th.sorting:after,
.lg-dt table.dataTable thead th.sorting_asc:after,
.lg-dt table.dataTable thead th.sorting_desc:after{
	position:absolute; right:10px; top:50%; transform:translateY(-50%);
	font-size:12px; line-height:1; opacity:1; content:"\2195"; color:#cbd5e1; font-weight:700;
}
.lg-dt table.dataTable thead th.sorting_asc:after{ content:"\2191"; color:#10b981; }
.lg-dt table.dataTable thead th.sorting_desc:after{ content:"\2193"; color:#10b981; }

/* ---- pagination + info ---- */
.lg-dt .dataTables_info{ float:left; font-size:12.5px; color:#94a3b8; padding-top:16px; }
.lg-dt .dataTables_paginate{ float:right; padding-top:12px; }
.lg-dt .dataTables_paginate .paginate_button{
	border:1px solid #e2e8f0 !important; border-radius:8px !important; background:#ffffff !important;
	color:#475569 !important; font-size:12.5px; padding:5px 11px !important; margin:0 3px !important;
	box-shadow:none !important;
}
.lg-dt .dataTables_paginate .paginate_button.current{ background:#10b981 !important; border-color:#10b981 !important; color:#ffffff !important; }
.lg-dt .dataTables_paginate .paginate_button:hover:not(.current){ background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#0f172a !important; }
.lg-dt .dataTables_paginate .paginate_button.disabled{ opacity:.45; }
.lg-dt .dataTables_length{ float:left; padding-top:14px; font-size:12.5px; color:#64748b; }
.lg-dt .dataTables_length select{ border:1px solid #cbd5e1; border-radius:8px; padding:4px 8px; margin:0 6px; color:#334155; }

/* ---- status badge (dot + text) ---- */
.lg-badge-status{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.lg-badge-status:before{ content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.lg-badge-status.active,   .lg-badge-status.paid{ color:#16a34a; }
.lg-badge-status.active:before,   .lg-badge-status.paid:before{ background:#16a34a; }
.lg-badge-status.inactive, .lg-badge-status.cancelled{ color:#dc2626; }
.lg-badge-status.inactive:before, .lg-badge-status.cancelled:before{ background:#dc2626; }
.lg-badge-status.pending{ color:#d97706; }
.lg-badge-status.pending:before{ background:#f59e0b; }

/* row action icons spacing */
.lg-dt table.dataTable tbody td .icon-edit,
.lg-dt table.dataTable tbody td .icon-trash-3{ font-size:15px; margin:0 4px; }

/* ===================================================================
   FORM CARD (left column form beside a table)
   =================================================================== */
.lg-form-card{ background:#ffffff; border:1px solid #e9edf3; border-radius:14px; box-shadow:0 1px 3px rgba(15,23,42,.06); overflow:hidden; margin-bottom:20px; }
.lg-form-body{ padding:14px 22px 20px; }
.lg-fld{ margin-bottom:16px; }
.lg-fld label{ display:block; font-size:13px; font-weight:600; color:#334155; margin-bottom:7px; }
/* SMALL input: ~30px tall, 11px text, 7px radius */
.lg-fld .form-control,
.lg-form-body .form-control,
.lg-form-body select.form-control{
	width:100%; height:auto; min-height:32px; box-sizing:border-box;
	border:1px solid #cbd5e1 !important; border-radius:7px;
	padding:5px 10px !important; font-size:14px; line-height:1.4; color:#1e293b;
	box-shadow:none !important; background:#fff; transition:border-color .15s, box-shadow .15s;
}
.lg-fld .form-control::placeholder,
.lg-form-body .form-control::placeholder{ color:#94a3b8; }
.lg-fld .form-control:focus,
.lg-form-body .form-control:focus{ border-color:#10b981 !important; box-shadow:0 0 0 3px rgba(16,185,129,.15) !important; outline:none; }
.lg-btn-block{ display:block !important; width:100%; text-align:center; justify-content:center; border:0; margin-top:4px; }

/* ===================================================================
   ENTITY-LIST variant components (customers / suppliers / items / staff)
   Avatars, category pills, checkboxes, row-action menus, header buttons.
   =================================================================== */

/* header action buttons (top-right of the page: Export / + Add) */
.lg-dt-actions{ display:inline-flex; gap:10px; align-items:center; }
.lg-btn-outline,
.lg-btn-primary{
	display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
	padding:9px 16px; border-radius:9px; cursor:pointer; text-decoration:none; line-height:1; transition:.15s;
}
.lg-btn-outline{ background:#fff; border:1px solid #e2e8f0; color:#334155; }
.lg-btn-outline:hover{ background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; text-decoration:none; }
.lg-btn-primary{ background:#10b981; border:1px solid #10b981; color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.28); }
.lg-btn-primary:hover{ filter:brightness(.97); color:#fff; text-decoration:none; }

/* avatar with initials (colored) */
.lg-av{
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:30px; height:30px; border-radius:50%; color:#fff; font-size:11.5px; font-weight:700;
	text-transform:uppercase; margin-right:10px; vertical-align:middle;
}
.lg-av.c1{ background:#10b981; } .lg-av.c2{ background:#3b82f6; } .lg-av.c3{ background:#8b5cf6; }
.lg-av.c4{ background:#f59e0b; } .lg-av.c5{ background:#ec4899; } .lg-av.c6{ background:#06b6d4; }
.lg-av.c7{ background:#ef4444; } .lg-av.c8{ background:#22c55e; }
.lg-cell-name{ display:inline-flex; align-items:center; font-weight:700; color:#0f172a; }

/* muted / link-style secondary text (company, email) */
.lg-muted-link{ color:#475569; }
a.lg-muted-link:hover{ color:#10b981; text-decoration:none; }

/* category / plan pill (outlined rounded) */
.lg-pill{
	display:inline-flex; align-items:center; padding:3px 11px; border-radius:20px;
	font-size:12px; font-weight:600; color:#475569; background:#fff; border:1px solid #e2e8f0; line-height:1.4;
}
.lg-pill.accent{ color:#7c3aed; border-color:#ddd6fe; background:#f5f3ff; }   /* highlight tier (e.g. Enterprise) */
.lg-pill.emerald{ color:#059669; border-color:#a7f3d0; background:#ecfdf5; }

/* right-aligned numeric column */
.lg-dt table.dataTable td.lg-num, .lg-dt table.dataTable th.lg-num{ text-align:right; font-variant-numeric:tabular-nums; }

/* select checkbox column */
.lg-dt table.dataTable td.lg-check, .lg-dt table.dataTable th.lg-check{ width:38px; text-align:center; padding-right:0 !important; }
.lg-dt input[type=checkbox].lg-cb{ width:15px; height:15px; accent-color:#10b981; cursor:pointer; vertical-align:middle; }

/* row action "..." menu trigger */
.lg-rowmenu{
	display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
	border-radius:8px; color:#94a3b8; cursor:pointer; border:0; background:transparent; transition:.15s;
}
.lg-rowmenu:hover{ background:#f1f5f9; color:#0f172a; }

@media (max-width:640px){
	.lg-dt .dataTables_filter{ float:none; text-align:left; }
	.lg-dt .dataTables_filter input{ width:100%; min-width:0; }
	.lg-dt .dt-buttons{ float:none; }
	.lg-dt .dataTables_info, .lg-dt .dataTables_paginate{ float:none; text-align:left; }
	.lg-dt-actions{ flex-wrap:wrap; }
}

/* ===================================================================
   GLOBAL list-table skin — applies to EVERY DataTables list inside
   .content (no .lg-dt-card wrapper needed). Loaded app-wide via
   head-script.php so all list pages get the modern look at once.
   Uses !important so it wins over the base + settings-modern styles.
   =================================================================== */
.content .dataTables_wrapper table.dataTable{ border-collapse:separate !important; border-spacing:0; width:100% !important; border:0 !important; margin:0 !important; }

/* header => plain light-gray (kills the old emerald gradient on LIST tables) */
.content .dataTables_wrapper table.dataTable thead th,
.content .dataTables_wrapper table.dataTable thead td{
	background:#f1f5f9 !important; background-image:none !important; color:#64748b !important;
	border:0 !important; border-bottom:1px solid #e9edf3 !important;
	font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.04em;
	padding:11px 12px !important; text-align:left; white-space:nowrap;
}
/* rows (force clean white rows even if table has .table-striped / .table-bordered) */
.content .dataTables_wrapper table.dataTable tbody tr{ background:#ffffff !important; }
.content .dataTables_wrapper table.dataTable tbody tr:hover{ background:#f8fafc !important; }
.content .dataTables_wrapper table.dataTable tbody td{
	border-top:0 !important; border-left:0 !important; border-right:0 !important;
	border-bottom:1px solid #f1f5f9 !important;
	padding:11px 12px !important; font-size:13px; color:#334155; vertical-align:middle; background:transparent !important;
}
.content .dataTables_wrapper table.dataTable tbody tr:last-child td{ border-bottom:0 !important; }

/* sort arrows */
.content .dataTables_wrapper table.dataTable thead th.sorting,
.content .dataTables_wrapper table.dataTable thead th.sorting_asc,
.content .dataTables_wrapper table.dataTable thead th.sorting_desc{ background-image:none !important; position:relative; padding-right:24px !important; cursor:pointer; }
.content .dataTables_wrapper table.dataTable thead th.sorting:after{ content:"\2195"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:#cbd5e1; font-size:11px; font-weight:700; }
.content .dataTables_wrapper table.dataTable thead th.sorting_asc:after{ content:"\2191"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:#10b981; font-size:11px; font-weight:700; }
.content .dataTables_wrapper table.dataTable thead th.sorting_desc:after{ content:"\2193"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:#10b981; font-size:11px; font-weight:700; }

/* search box (medium) */
.content .dataTables_wrapper .dataTables_filter input{
	border:1px solid #cbd5e1 !important; border-radius:7px !important; min-height:34px; height:34px;
	font-size:13px; padding:5px 11px !important; color:#334155; box-shadow:none !important;
}
.content .dataTables_wrapper .dataTables_filter input:focus{ border-color:#10b981 !important; box-shadow:0 0 0 3px rgba(16,185,129,.15) !important; outline:none; }
.content .dataTables_wrapper .dataTables_length select{ border:1px solid #cbd5e1 !important; border-radius:7px !important; height:34px; }

/* export buttons */
.content .dataTables_wrapper .dt-buttons .dt-button{
	background:#fff !important; border:1px solid #e2e8f0 !important; border-radius:8px !important; color:#475569 !important;
	font-size:12.5px !important; font-weight:600 !important; padding:6px 12px !important; margin:0 6px 6px 0 !important;
	background-image:none !important; text-shadow:none !important; box-shadow:none !important;
}
.content .dataTables_wrapper .dt-buttons .dt-button:hover{ background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#0f172a !important; }

/* pagination */
.content .dataTables_wrapper .dataTables_paginate .paginate_button{
	border:1px solid #e2e8f0 !important; border-radius:8px !important; background:#fff !important; color:#475569 !important;
	padding:5px 11px !important; margin:0 3px !important; box-shadow:none !important;
}
.content .dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:#10b981 !important; border-color:#10b981 !important; color:#fff !important; }
.content .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current){ background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#0f172a !important; }
.content .dataTables_wrapper .dataTables_info{ font-size:12.5px; color:#94a3b8; }

/* mobile: wide tables scroll instead of breaking */
@media (max-width:767px){
	.content .dataTables_wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.content .dataTables_wrapper .dataTables_filter{ float:none !important; text-align:left !important; margin-bottom:8px; }
	.content .dataTables_wrapper .dataTables_filter input{ width:100%; }
	.content .dataTables_wrapper .dt-buttons{ float:none !important; }
}

/* ===================================================================
   SETTINGS PAGES — mobile layout (GLOBAL, so it works on every settings
   page whether or not it loads settings-modern.css). The desktop layout
   pushes content with padding-right:240px for the forced-open right panel,
   which squishes content to a sliver on phones => blank. Fix below.
   =================================================================== */
.lg-rs-backdrop{ display:none; }
.lg-rs-fab{
	display:none; position:fixed; right:14px; bottom:16px; z-index:1140;
	width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
	background:linear-gradient(135deg,#10b981,#34d399); color:#fff; font-size:19px;
	align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(16,185,129,.45);
}
@media (max-width:767px){
	/* stop the right panel from pushing/squishing content */
	#wrapper.open-right-sidebar{ padding-right:0 !important; }
	.open-right-sidebar .topbar{ margin-right:0 !important; }
	/* content full-width, cleared past the 50px icon rail via padding (not margin) */
	#wrapper.open-right-sidebar .content-page{ margin-left:0 !important; padding-left:50px !important; padding-right:0 !important; }
	/* THE fix: the theme hides content with opacity:0 when the right panel is open — force it visible */
	#wrapper.open-right-sidebar .content-page > .content{ opacity:1 !important; padding:8px !important; }
	/* right "Application Settings" menu => off-canvas drawer, hidden by default */
	.side-menu.right{
		display:none !important; position:fixed !important; top:50px !important; right:0 !important; left:auto !important;
		height:calc(100vh - 50px) !important; width:min(300px,86vw) !important;
		z-index:1200 !important; overflow-y:auto; box-shadow:-8px 0 30px rgba(0,0,0,.35) !important;
	}
	body.rs-open .side-menu.right{ display:block !important; }
	.lg-rs-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1150; }
	body.rs-open .lg-rs-backdrop{ display:block; }
	/* form + table cards full-width, comfortable padding */
	.lg-dt-card .lg-dt-body{ padding:6px 12px 14px; }
	.lg-dt-card .lg-dt-head, .lg-form-card .lg-dt-head{ padding:14px 14px 12px; }
	.lg-form-body{ padding:12px 14px 16px; }
}

/* ===================================================================
   CARD-IFY every legacy .widget that contains a DataTables list, so ALL
   list pages match settings/discsettings (title + subtitle + divider +
   card) WITHOUT rewriting each page. Uses :has() (Chrome-only app).
   =================================================================== */
.content .widget:has(.dataTables_wrapper){
	background:#ffffff !important; border:1px solid #e9edf3 !important; border-radius:14px !important;
	box-shadow:0 1px 3px rgba(15,23,42,.06) !important; overflow:visible !important; margin-bottom:20px !important;
}
/* header => title + divider (matches .lg-dt-head) */
.content .widget:has(.dataTables_wrapper) .widget-header{
	background:transparent !important; border:0 !important; border-bottom:1px solid #cbd5e1 !important;
	padding:16px 20px 14px !important; min-height:0 !important; height:auto !important; overflow:visible !important; position:relative;
}
.content .widget:has(.dataTables_wrapper) .widget-header h2{ height:auto !important; overflow:visible !important; }
.content .widget:has(.dataTables_wrapper) .widget-header h2,
.content .widget:has(.dataTables_wrapper) .widget-header h4{
	font-size:16px !important; font-weight:700 !important; color:#0f172a !important; margin:0 !important;
	text-transform:none !important; letter-spacing:.1px; line-height:1.25;
}
.content .widget:has(.dataTables_wrapper) .widget-header h2 strong,
.content .widget:has(.dataTables_wrapper) .widget-header h4 strong{ font-weight:700 !important; }
.content .widget:has(.dataTables_wrapper) .widget-header h2 i,
.content .widget:has(.dataTables_wrapper) .widget-header h4 i{ color:#10b981 !important; }
/* subtitle under the title (generic, matches the discount concept) */
.content .widget:has(.dataTables_wrapper) .widget-header h2:after,
.content .widget:has(.dataTables_wrapper) .widget-header h4:after{
	content:"Sortable columns · search across all fields · paginated";
	display:block; font-size:12.5px; font-weight:400 !important; color:#94a3b8;
	margin-top:5px; letter-spacing:.1px; text-transform:none;
}
/* drop the old collapse toggle for a clean header — but KEEP real action buttons
   (Export / Add / View etc.). Only hide the collapse toggle and action groups that
   hold nothing but icon-links (no .btn), so e.g. the low-stock Excel/PDF buttons show. */
.content .widget:has(.dataTables_wrapper) .widget-header .additional-btn:not(:has(.btn)),
.content .widget:has(.dataTables_wrapper) .widget-header .widget-toggle{ display:none !important; }
.content .widget:has(.dataTables_wrapper) .widget-header .additional-btn:has(.btn){
	display:flex !important; align-items:center; gap:6px; position:absolute; top:12px; right:16px; z-index:3;
}
/* body padding matches the card */
.content .widget:has(.dataTables_wrapper) .widget-content{ padding:12px 20px 16px !important; background:transparent !important; }

/* ===================================================================
   Make DEFAULT-dom DataTables lists match the discount card layout:
   inset padding, buttons left + search right, hide length + "Search:"
   label, info left + pagination right. (No per-page dom changes.)
   =================================================================== */
.content .widget:has(.dataTables_wrapper) .widget-content{ padding:8px 22px 16px !important; background:transparent !important; }
.content .widget:has(.dataTables_wrapper) .table-responsive{ padding:0 !important; margin:0 !important; border:0 !important; }
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper{ padding:0 !important; }
/* top toolbar */
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper .dt-buttons{ float:left !important; margin:2px 0 12px !important; }
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper .dataTables_filter{ float:right !important; margin:2px 0 12px !important; text-align:right; }
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper .dataTables_length{
	float:left !important; display:block !important; margin:2px 0 12px 14px !important;
	font-size:12.5px; color:#64748b;
}
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper .dataTables_length select{
	border:1px solid #cbd5e1 !important; border-radius:7px !important; height:32px; padding:3px 8px; margin:0 6px; color:#334155; box-shadow:none !important;
}
/* search: hide the "Search:" label text, keep the input (styled) */
.content .widget:has(.dataTables_wrapper) .dataTables_filter label{ font-size:0 !important; color:transparent !important; margin:0 !important; }
.content .widget:has(.dataTables_wrapper) .dataTables_filter label input{
	font-size:13px !important; min-height:34px; height:34px; border:1px solid #cbd5e1 !important; border-radius:7px !important;
	padding:5px 11px !important; margin:0 !important; color:#334155; min-width:230px; box-shadow:none !important;
}
.content .widget:has(.dataTables_wrapper) .dataTables_filter label input:focus{ border-color:#10b981 !important; box-shadow:0 0 0 3px rgba(16,185,129,.15) !important; outline:none; }
/* bottom footer */
.content .widget:has(.dataTables_wrapper) .dataTables_info{ float:left !important; padding-top:14px !important; }
.content .widget:has(.dataTables_wrapper) .dataTables_paginate{ float:right !important; padding-top:12px !important; }
/* the dom's <"clear"> div drops search to a new row — remove it so buttons+search share one row */
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper > .clear{ display:none !important; }
/* table must clear the floated toolbar (buttons/search) so it starts below, full-width */
.content .widget:has(.dataTables_wrapper) .dataTables_wrapper table.dataTable{ clear:both !important; width:100% !important; }

/* ===================================================================
   MODERN BUTTONS (content + modals) — emerald brand, rounded, clean.
   Scoped to .content / .modal so topbar / sidebar / login keep theirs.
   =================================================================== */
/* SHAPE — rounded corners, no text-shadow, cleaner weight + hover.
   NOTE: `background-image:none` was REMOVED here. It silently stripped every
   gradient button (a gradient IS a background-image), leaving a transparent
   background with white text = invisible buttons. Colours are set by the
   gradient palette below. */
.content .btn, .modal .btn, .fixedbottom .btn,
.content input[type=submit].btn, .content button.btn{
	border-radius:8px !important; font-weight:600 !important; letter-spacing:.1px;
	text-shadow:none !important;
	transition:filter .12s ease, box-shadow .15s ease;
}
.content .btn-xs, .modal .btn-xs, .fixedbottom .btn-xs{ border-radius:7px !important; }
.content .btn:hover, .modal .btn:hover, .fixedbottom .btn:hover{ filter:brightness(.95); }
.content .btn:active, .modal .btn:active, .fixedbottom .btn:active{ filter:brightness(.90); }
.content .btn:focus, .modal .btn:focus, .fixedbottom .btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(100,116,139,.18) !important; }
.content .btn i, .modal .btn i, .fixedbottom .btn i{ margin-right:1px; }

/* =====================================================================
   GLOBAL default INPUT border (darker) — app-wide.
   table-modern.css is linked from inc/head-script.php on every page, but it
   loads BEFORE style.css/custom.css, so these need the .content prefix
   (specificity 0,2,0) to beat Bootstrap's plain .form-control (0,1,0).
   Only the default resting border is set — :focus and validation/error
   states are re-asserted below so they always win.
   ===================================================================== */
.content input.form-control,
.content select.form-control,
.content textarea.form-control,
.content .form-control,
.content input[type="text"],
.content input[type="number"],
.content input[type="password"],
.content input[type="email"],
.content input[type="tel"],
.content input[type="search"],
.content input[type="date"],
.content select,
.content textarea{
	border:1px solid #cbd5e1 !important;
}
/* validation / error states must stay visible */
.content .has-error .form-control,
.content .form-control.error,
.content input.error,
.content select.error,
.content textarea.error{ border-color:#e74c3c !important; }

/* =====================================================================
   MODERN GRADIENT BUTTON PALETTE
   Each theme button class gets its OWN gradient so neighbouring buttons in
   an action bar are always visually distinct. Scoped with .content/.modal/
   .fixedbottom (specificity 0,2,0) so it wins over page-level .btn-x rules.
   ===================================================================== */
.content .btn, .modal .btn, .fixedbottom .btn{
	border:0 !important; color:#fff !important;
	background-repeat:no-repeat;
}
.content .btn:hover, .modal .btn:hover, .fixedbottom .btn:hover{ filter:brightness(1.07); }
.content .btn:active, .modal .btn:active, .fixedbottom .btn:active{ filter:brightness(.92); }

/* --- primary action (Save / submit) : EMERALD --- */
.content .btn-info, .modal .btn-info, .fixedbottom .btn-info,
.content input[type=submit].btn-info, .content button.btn-info{
	background-image:linear-gradient(135deg,#059669,#34d399) !important; background-color:#10b981 !important;
	box-shadow:0 3px 10px rgba(16,185,129,.32) !important;
}
/* --- blue --- */
.content .btn-primary, .modal .btn-primary, .fixedbottom .btn-primary{
	background-image:linear-gradient(135deg,#2563eb,#60a5fa) !important; background-color:#3b82f6 !important;
	box-shadow:0 3px 10px rgba(59,130,246,.32) !important;
}
/* --- green --- */
.content .btn-success, .modal .btn-success, .fixedbottom .btn-success{
	background-image:linear-gradient(135deg,#15803d,#4ade80) !important; background-color:#16a34a !important;
	box-shadow:0 3px 10px rgba(22,163,74,.32) !important;
}
/* --- red --- */
.content .btn-danger, .modal .btn-danger, .fixedbottom .btn-danger{
	background-image:linear-gradient(135deg,#b91c1c,#f87171) !important; background-color:#dc2626 !important;
	box-shadow:0 3px 10px rgba(220,38,38,.30) !important;
}
/* --- amber --- */
.content .btn-warning, .modal .btn-warning, .fixedbottom .btn-warning{
	background-image:linear-gradient(135deg,#b45309,#fbbf24) !important; background-color:#d97706 !important;
	box-shadow:0 3px 10px rgba(217,119,6,.30) !important;
}
/* --- slate (neutral / back / cancel) --- */
.content .btn-default, .modal .btn-default, .fixedbottom .btn-default{
	background-image:linear-gradient(135deg,#475569,#94a3b8) !important; background-color:#64748b !important;
	box-shadow:0 3px 10px rgba(71,85,105,.26) !important;
}
/* --- theme accent classes, each a distinct hue --- */
.content .btn-dribbble, .modal .btn-dribbble, .fixedbottom .btn-dribbble{
	background-image:linear-gradient(135deg,#be185d,#f472b6) !important; background-color:#db2777 !important;
	box-shadow:0 3px 10px rgba(219,39,119,.30) !important;
}
.content .btn-green-3, .modal .btn-green-3, .fixedbottom .btn-green-3{
	background-image:linear-gradient(135deg,#0f766e,#2dd4bf) !important; background-color:#0d9488 !important;
	box-shadow:0 3px 10px rgba(13,148,136,.30) !important;
}
.content .btn-violet, .modal .btn-violet, .fixedbottom .btn-violet{
	background-image:linear-gradient(135deg,#6d28d9,#a78bfa) !important; background-color:#7c3aed !important;
	box-shadow:0 3px 10px rgba(124,58,237,.30) !important;
}
.content .btn-orange-3, .modal .btn-orange-3, .fixedbottom .btn-orange-3{
	background-image:linear-gradient(135deg,#c2410c,#fb923c) !important; background-color:#ea580c !important;
	box-shadow:0 3px 10px rgba(234,88,12,.30) !important;
}
.content .btn-sea-green, .modal .btn-sea-green, .fixedbottom .btn-sea-green{
	background-image:linear-gradient(135deg,#0e7490,#22d3ee) !important; background-color:#0891b2 !important;
	box-shadow:0 3px 10px rgba(8,145,178,.30) !important;
}
.content .btn-thunder-bird, .modal .btn-thunder-bird, .fixedbottom .btn-thunder-bird{
	background-image:linear-gradient(135deg,#991b1b,#f87171) !important; background-color:#b91c1c !important;
	box-shadow:0 3px 10px rgba(185,28,28,.30) !important;
}
/* export/toolbar + pagination buttons stay light & neutral (not action buttons) */
.content .dataTables_wrapper .dt-buttons .dt-button,
.content .dataTables_wrapper .dataTables_paginate .paginate_button,
.lg-dt .dt-buttons .dt-button, .lg-dt .dataTables_paginate .paginate_button{
	background-image:none !important; color:#475569 !important; border:1px solid #e2e8f0 !important;
	box-shadow:none !important;
}

/* =====================================================================
   ROW ACTION MENU — "⋮" 3-dot dropdown in list tables
   (matches the customers/entity-list reference: View + Edit stay inline,
    everything else collapses into the 3-dot menu)
   ===================================================================== */
.content table .lg-rowmenu, .lg-dt table .lg-rowmenu{
	display:inline-flex; align-items:center; justify-content:center;
	width:28px; height:28px; border-radius:8px; border:0; background:transparent;
	color:#94a3b8 !important; cursor:pointer; transition:.15s; vertical-align:middle;
	text-decoration:none !important; font-size:15px; line-height:1;
}
.content table .lg-rowmenu:hover, .content table .open > .lg-rowmenu{
	background:#f1f5f9; color:#0f172a !important;
}
/* the menu panel */
.content .lg-rowmenu-list, .lg-dt .lg-rowmenu-list{
	min-width:200px; padding:6px !important; margin-top:6px !important;
	border:1px solid #e9edf3 !important; border-radius:10px !important;
	box-shadow:0 10px 30px rgba(15,23,42,.14) !important; background:#fff !important;
}
.content .lg-rowmenu-list > li > a{
	display:flex !important; align-items:center; gap:9px;
	padding:8px 10px !important; border-radius:7px; font-size:13px; font-weight:500;
	color:#334155 !important; white-space:nowrap; line-height:1.3;
}
.content .lg-rowmenu-list > li > a:hover,
.content .lg-rowmenu-list > li > a:focus{ background:rgba(16,185,129,.10) !important; color:#059669 !important; }
.content .lg-rowmenu-list > li > a > i{ width:16px; text-align:center; font-size:13px; opacity:.85; }
/* keep the row's semantic colours (delete = red, etc.) */
.content .lg-rowmenu-list > li.text-danger > a{ color:#dc2626 !important; }
.content .lg-rowmenu-list > li.text-danger > a:hover{ background:rgba(220,38,38,.10) !important; color:#b91c1c !important; }
.content .lg-rowmenu-list > li.text-primary > a{ color:#334155 !important; }
.content .lg-rowmenu-list > li.divider{ margin:5px 2px !important; background:#eef1f5; }

/* =====================================================================
   COLUMN SPACING — keep every cell on ONE line (no wrapped 2nd row).
   Header cells already had white-space:nowrap; body cells did not, which
   is what made long values wrap. Padding is tightened so more columns fit
   before the table needs to scroll.
   NOTE: no overflow-x is set on .dataTables_wrapper on purpose — creating
   a scroll container there would clip the "⋮" row-action dropdown.
   .table-responsive (Bootstrap) already provides horizontal scrolling.
   ===================================================================== */
.content .dataTables_wrapper table.dataTable tbody td{
	white-space:nowrap;
}
.content .dataTables_wrapper table.dataTable thead th,
.content .dataTables_wrapper table.dataTable thead td,
.content .dataTables_wrapper table.dataTable tbody td{
	padding-left:9px !important; padding-right:9px !important;
}
/* numeric columns read better right-aligned and never need wrapping */
.content .dataTables_wrapper table.dataTable tbody td.lg-num,
.content .dataTables_wrapper table.dataTable thead th.lg-num{ text-align:right; }
/* opt-in: add class="lg-trunc" to a long free-text column (notes, address)
   to cap its width and show an ellipsis instead of stretching the table */
.content .dataTables_wrapper table.dataTable tbody td.lg-trunc{
	max-width:240px; overflow:hidden; text-overflow:ellipsis;
}
/* action column: never wrap, never shrink */
.content .dataTables_wrapper table.dataTable tbody td:last-child{ white-space:nowrap; width:1%; }

/* =====================================================================
   GLOBAL PAGE BACKGROUND — soft "half white" (#f8fafc)
   Scoped to body.fixed-left (the app shell) so the login screen
   (body.lg-body), the master-unlock screen (body.lgm-body) and the
   print/invoice pages keep their own deliberate backgrounds.
   ===================================================================== */
body.fixed-left,
body.fixed-left #wrapper,
body.fixed-left .content-page,
body.fixed-left .content-page > .content,
body.fixed-left .content{
	background-color:#f8fafc !important;
	background-image:none !important;   /* kills the theme's body background image */
}
/* cards / panels stay white so they lift off the half-white canvas */
body.fixed-left .content .widget,
body.fixed-left .content .panel{ background-color:#ffffff; }