/* ERP UI layer (shadcn-style): loaded after style.default.css / custom-*.css. Tokens drive light + dark; selectors are prefixed with `body` to beat legacy .dark-mode rules. */
:root {
  --erp-primary: #009444;
  --erp-primary-dark: #007a38;
  --erp-primary-soft: #e8f6ee;
  --erp-bg: #fff;
  --erp-side: #f7f7f8;
  --erp-surface: #fff;
  --erp-border: #e8e8ea;
  --erp-hover: #efeff1;
  --erp-text: #0f1411;
  --erp-muted: #6b7280;
  --erp-input: #fff;
  --erp-radius: 10px;
  --erp-radius-lg: 14px;
  --erp-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --erp-sidebar-w: 290px;
  --erp-topbar-h: 64px;
  --erp-focus: 0 0 0 3px rgba(0, 148, 68, .22);
}

body.dark-mode {
  --erp-bg: #0b0f0d;
  --erp-side: #101512;
  --erp-surface: #141a17;
  --erp-border: #26302b;
  --erp-hover: #1c2420;
  --erp-text: #ecf1ee;
  --erp-muted: #8a958f;
  --erp-input: #101512;
  --erp-primary-soft: rgba(0, 148, 68, .18);
  --erp-shadow: none;
}

body:not(.pos-page) {
  background: var(--erp-bg);
  color: var(--erp-text);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus, .side-navbar a:focus-visible { outline: 0; box-shadow: var(--erp-focus); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Sidebar ---------- */
body:not(.erp-x) .side-navbar { width: var(--erp-sidebar-w); background: var(--erp-side); border-right: 1px solid var(--erp-border); box-shadow: none; }
body:not(.erp-x) .side-navbar.shrink { width: 0; }
.side-navbar .brand-big { display: flex; align-items: center; padding: 0 24px; height: var(--erp-topbar-h); line-height: normal; }
body:not(.erp-x) .side-navbar { padding-bottom: 88px; }
.side-navbar .brand-big img { max-width: 100%; height: auto; max-height: 40px; object-fit: contain; }
.side-navbar .brand-big h1 { color: var(--erp-text); font-size: 1.15rem; font-weight: 700; margin: 0; }
body:not(.erp-x) .side-navbar li a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; margin: 2px 12px; border: 0; border-radius: var(--erp-radius-lg); font-weight: 400; font-size: 15px; color: var(--erp-muted); transition: background .15s, color .15s; }
body:not(.erp-x) .side-navbar li a i { margin: 0; width: 20px; text-align: center; color: var(--erp-muted); font-size: 16px; }
body:not(.erp-x) .side-navbar li a:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .side-navbar li a:hover i { color: var(--erp-text); }
body:not(.erp-x) .side-navbar li.active > a, body:not(.erp-x) .side-navbar li a[aria-expanded=true] { background: var(--erp-surface); box-shadow: none; color: var(--erp-primary); font-weight: 500; }
body:not(.erp-x) .side-navbar li.active > a i, body:not(.erp-x) .side-navbar li a[aria-expanded=true] i { color: var(--erp-primary); }
body:not(.erp-x) .side-navbar li ul { background: transparent; border: 0; border-left: 1px solid var(--erp-border); border-radius: 0; margin: 2px 12px 6px 28px; padding: 0; }
body:not(.erp-x) .side-navbar li ul li a { margin: 2px 0 2px 8px; padding: 6px 12px; min-height: 36px; border-radius: var(--erp-radius); font-size: 13px; font-weight: 400; }
body:not(.erp-x) .side-navbar li ul li.active a { background: var(--erp-primary-soft); border-color: transparent; box-shadow: none; color: var(--erp-primary); }
body:not(.erp-x) .side-navbar li a[data-toggle=collapse] { position: relative; padding-right: 30px; }
.side-navbar li a[data-toggle=collapse]::before { color: var(--erp-muted); }
.side-navbar .close { color: var(--erp-text); }

/* ---------- Topbar ---------- */
body:not(.erp-x) .page > header { background: var(--erp-bg); border-bottom: 1px solid var(--erp-border); position: sticky; top: 0; z-index: 990; padding: 0 32px 0 24px; }
body:not(.erp-x) nav.navbar { background: transparent; min-height: var(--erp-topbar-h); line-height: normal; padding: 0; box-shadow: none; flex-wrap: nowrap; }
body:not(.erp-x) nav.navbar a.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 16px; border-radius: var(--erp-radius); border: 0; color: var(--erp-muted); background: transparent; box-shadow: none; }
body:not(.erp-x) nav.navbar a.menu-btn:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) nav.navbar .nav-menu { margin: 0 0 0 auto; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
body:not(.erp-x) nav.navbar .nav-menu i { color: var(--erp-muted); }

/* ---------- Content ---------- */
.page { background: transparent; }
.page > section, .page > .container-fluid { padding-top: 24px; padding-bottom: 24px; }
body:not(.erp-x) .card, body:not(.erp-x) .colored-card { border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); box-shadow: none; background: var(--erp-surface); color: var(--erp-text); }
body:not(.erp-x) .card-header { background: transparent; border-bottom: 1px solid var(--erp-border); border-radius: 10px 10px 0 0; color: var(--erp-text); padding-left: 24px; padding-right: 24px; }
body:not(.erp-x) .card-footer { background: var(--erp-side); border-color: var(--erp-border); color: var(--erp-text); }
.card-header h3, .card-header h4 { font-size: 1rem; font-weight: 600; margin: 0; }

/* Section headers keep their legacy bg-* classes but render plain, like the reference */
body:not(.erp-x) .card[class*="bg-"], body:not(.erp-x) .card-header[class*="bg-"] { background: var(--erp-surface) !important; color: var(--erp-text) !important; border-left: 0 !important; }
body:not(.erp-x) .card-header[class*="bg-"] { background: transparent !important; }
body:not(.erp-x) .card[class*="bg-"] .text-white, body:not(.erp-x) .card-header[class*="bg-"] .text-white { color: var(--erp-text) !important; }

/* ---------- Buttons: solid primary, neutral outline for the rest ---------- */
.btn { border-radius: var(--erp-radius); font-weight: 500; min-height: 38px; padding: 6px 14px; transition: background .15s, border-color .15s, color .15s; }
.btn-sm { min-height: 32px; padding: 4px 10px; }
body:not(.erp-x) .btn-primary { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; box-shadow: none; }
body:not(.erp-x) .btn-primary:hover, body:not(.erp-x) .btn-primary:focus { background: var(--erp-primary-dark); border-color: var(--erp-primary-dark); color: #fff; }
body:not(.erp-x) .btn-info, body:not(.erp-x) .btn-secondary, body:not(.erp-x) .btn-light, body:not(.erp-x) .btn-dark { background: var(--erp-side); border: 1px solid transparent; color: var(--erp-text); box-shadow: none; }
body:not(.erp-x) .btn-info:hover, body:not(.erp-x) .btn-secondary:hover, body:not(.erp-x) .btn-light:hover, body:not(.erp-x) .btn-dark:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .btn-warning { background: #fff7e0; border: 1px solid #fde4a1; color: #7a5200; }
body:not(.erp-x) .btn-warning:hover { background: #ffefbd; color: #5c3d00; }
body:not(.erp-x) .btn-success { background: var(--erp-primary-soft); border: 1px solid transparent; color: var(--erp-primary-dark); }
body:not(.erp-x) .btn-success:hover { background: var(--erp-primary); color: #fff; }
body:not(.erp-x) .btn-danger { background: #e11d48; border-color: #e11d48; color: #fff; }
body:not(.erp-x) .btn-default, body:not(.erp-x) .btn-outline-default, body:not(.erp-x) .btn-outline-primary { background: var(--erp-surface); border: 1px solid var(--erp-border); color: var(--erp-text); }
body:not(.erp-x) .btn-default:hover, body:not(.erp-x) .btn-outline-primary:hover { background: var(--erp-hover); border-color: var(--erp-border); color: var(--erp-primary); }
body.dark-mode .btn-warning { background: rgba(245, 158, 11, .15); border-color: rgba(245, 158, 11, .35); color: #fbbf24; }

/* DataTables export buttons: small neutral icon buttons, delete in red */
body:not(.erp-x) .dt-buttons .btn-secondary { background: var(--erp-surface); border: 1px solid var(--erp-border); color: var(--erp-text); box-shadow: none; }
body:not(.erp-x) .dt-buttons .btn-secondary:hover { background: var(--erp-hover); }
body:not(.erp-x) .dt-buttons .btn-secondary.buttons-delete { color: #e11d48; border-color: #f5b5c2; }

/* ---------- Forms ---------- */
body:not(.erp-x) .form-control, body:not(.erp-x) .bootstrap-select > .dropdown-toggle { border: 1px solid var(--erp-border); border-radius: var(--erp-radius); min-height: 40px; background: var(--erp-input); color: var(--erp-text); box-shadow: none; }
body:not(.erp-x) .form-control:focus, body:not(.erp-x) .bootstrap-select > .dropdown-toggle:focus { border-color: var(--erp-primary); box-shadow: var(--erp-focus); }
body:not(.erp-x) .input-group-text { background: var(--erp-side); border-color: var(--erp-border); color: var(--erp-muted); }
label { font-weight: 500; font-size: 13px; color: var(--erp-text); }

/* ---------- Tables / DataTables ---------- */
body:not(.erp-x) .table { color: var(--erp-text); }
body:not(.erp-x) .table thead th { background: var(--erp-side); border-top: 0; border-bottom: 1px solid var(--erp-border); font-size: 12px; color: var(--erp-muted); font-weight: 600; white-space: nowrap; }
body:not(.erp-x) .table td, body:not(.erp-x) .table th { border-color: var(--erp-border); }
body:not(.erp-x) .table td { vertical-align: middle; }
body:not(.erp-x) .table td, body:not(.erp-x) .table td p, body:not(.erp-x) .table td span:not(.badge), body:not(.erp-x) .table td a:not(.btn) { color: var(--erp-text); }
body:not(.erp-x) .table-hover tbody tr:hover { background: var(--erp-hover); }
body:not(.erp-x) .dataTables_wrapper .dataTables_filter input, body:not(.erp-x) .dataTables_wrapper .dataTables_length select { border-radius: var(--erp-radius); border: 1px solid var(--erp-border); min-height: 36px; background: var(--erp-input); color: var(--erp-text); }
.table-responsive, .dataTables_wrapper { max-width: 100%; }
body:not(.erp-x) .page-link { border-radius: var(--erp-radius); margin: 0 2px; border: 1px solid var(--erp-border); background: var(--erp-surface); color: var(--erp-text); }
body:not(.erp-x) .page-item.active .page-link { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; }

/* ---------- Modals / alerts / badges / dropdowns ---------- */
body:not(.erp-x) .modal-content { border: 1px solid var(--erp-border); border-radius: 12px; box-shadow: 0 20px 40px rgba(16, 24, 40, .15); background: var(--erp-surface); color: var(--erp-text); }
body:not(.erp-x) .modal-header, body:not(.erp-x) .modal-footer { border-color: var(--erp-border); }
.alert { border-radius: var(--erp-radius); border: 0; }
.badge { border-radius: 6px; font-weight: 500; }
body:not(.erp-x) .dropdown-menu { border: 1px solid var(--erp-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .1); background: var(--erp-surface); color: var(--erp-text); }
body:not(.erp-x) .dropdown-item { color: var(--erp-text); }
body:not(.erp-x) .dropdown-item:hover { background: var(--erp-hover); }
body:not(.erp-x) .dropdown-menu .dropdown-item.active, body:not(.erp-x) .dropdown-menu .dropdown-item:active, body:not(.erp-x) .bootstrap-select .dropdown-menu li.selected a { background: var(--erp-primary); color: #fff; }

/* ---------- Brand green over legacy accents ---------- */
a { color: var(--erp-primary); }
a:hover { color: var(--erp-primary-dark); }
body.dark-mode a:not(.btn):not(.dropdown-item):not([class*="menu"]) { color: #4ade80; }
.dripicons-question, .bootstrap-select .btn-link, .text-primary, .brand-text h3, .brand-text h3 span, .date-btn { color: var(--erp-primary) !important; }
body.dark-mode .text-primary, body.dark-mode .brand-text h3, body.dark-mode .brand-text h3 span, body.dark-mode .date-btn { color: #4ade80 !important; }
body:not(.erp-x) .date-btn { background: var(--erp-input); border-color: var(--erp-border); }
.toggle-on.btn, .toggle .btn-primary { background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
.checkbox input[type="checkbox"]:checked + label::before, .checkbox-primary input[type="checkbox"]:checked + label::before { background: var(--erp-primary); border-color: var(--erp-primary); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }

/* ---------- Auth pages ---------- */
.login-page, .register-page, body.dark-mode .login-page, body.dark-mode .register-page { background: var(--erp-side); background-image: none; }
.login-page .form-inner, .register-page .form-inner, body.dark-mode .login-page .form-inner, body.dark-mode .register-page .form-inner { border: 1px solid var(--erp-border); border-radius: 12px; background: var(--erp-surface); box-shadow: 0 10px 30px rgba(16, 24, 40, .08); padding: 40px 32px; }
.login-page .logo img, .register-page .logo img { max-width: 100%; height: auto; margin-bottom: 8px; }
.login-page .logo span, .register-page .logo span, .login-page a.forgot-pass, .login-page a.signup, .register-page a.signup, .login-page .external { color: var(--erp-primary); }
.login-page .input-material, .register-page .input-material { color: var(--erp-text); }
.login-page .input-material:focus, .register-page .input-material:focus { border-color: var(--erp-primary); }
.login-page .input-material:focus ~ .label-material, .login-page .input-material.active ~ .label-material, .register-page .input-material:focus ~ .label-material, .register-page .input-material.active ~ .label-material { color: var(--erp-primary); }
.login-page .btn-primary, .register-page .btn-primary { min-height: 44px; font-weight: 600; }
.login-page .copyrights, .register-page .copyrights { color: var(--erp-muted); }

/* ---------- Mobile backdrop (element added by erp-ui.js) ---------- */
.erp-backdrop { display: none; position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 998; }
.erp-backdrop.show { display: block; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1199.98px) {
  body:not(.erp-x) .side-navbar { box-shadow: 0 0 40px rgba(16, 24, 40, .2); }
}
@media (max-width: 767.98px) {
  body:not(.erp-x) .page > header { padding: 0 12px; }
  body:not(.erp-x) .side-navbar { width: min(86vw, var(--erp-sidebar-w)); }
  body:not(.erp-x) .side-navbar.shrink { width: 0; }
  .page > section, .page > .container-fluid { padding-left: 12px; padding-right: 12px; }
  .btn, .form-control { min-height: 44px; }
  .dataTables_wrapper { overflow-x: auto; }
  .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
  body:not(.erp-x) nav.navbar .nav-menu .dropdown-menu { max-width: 92vw; }
}
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left; float: none; }
  .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .login-page .form-inner, .register-page .form-inner { padding: 28px 20px; }
  .login-page .form-outer, .register-page .form-outer { padding: 12px; }
}

/* Pages whose content is a bare .row (dashboard) have no container padding */
.page > .animate-bottom:has(> .row) { padding: 24px; }
@media (max-width: 767.98px) { .page > .animate-bottom:has(> .row) { padding: 16px 12px; } }

/* ---------- Reference parity: sidebar user card, search, page title, stat cards ---------- */
.side-user { position: fixed; left: 0; bottom: 0; width: var(--erp-sidebar-w); z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--erp-side); border-top: 1px solid var(--erp-border); }
.side-navbar.shrink + .side-user { display: none; }
.side-user-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--erp-primary-soft); color: var(--erp-primary); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.side-user-meta { min-width: 0; line-height: 1.25; }
.side-user-meta p { margin: 0; font-weight: 600; font-size: 14px; color: var(--erp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-meta small { display: block; color: var(--erp-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.erp-search { position: relative; width: 340px; max-width: 40vw; }
.erp-search > .fa-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--erp-muted); font-size: 13px; pointer-events: none; }
.erp-search input { width: 100%; height: 36px; padding: 0 44px 0 34px; border: 0; border-radius: var(--erp-radius); background: var(--erp-side); color: var(--erp-text); font-size: 14px; }
.erp-search input:focus { outline: 0; box-shadow: var(--erp-focus); }
.erp-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 6px; background: var(--erp-hover); color: var(--erp-muted); font-size: 11px; box-shadow: none; }
#erp-search-results { display: none; position: absolute; top: 42px; left: 0; width: 460px; max-width: 90vw; max-height: 320px; overflow: auto; margin: 0; padding: 6px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); box-shadow: 0 8px 24px rgba(16, 24, 40, .1); z-index: 1100; }
#erp-search-results.show { display: block; }
#erp-search-results a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 10px; line-height: 1.4; border-radius: var(--erp-radius); color: var(--erp-text); font-size: 14px; }
#erp-search-results a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#erp-search-results .erp-group { padding: 8px 10px 4px; color: var(--erp-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#erp-search-results .erp-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--erp-border); }
#erp-search-results a:hover, #erp-search-results a.active { background: var(--erp-hover); }
#erp-search-results small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--erp-muted); font-size: 12px; margin: 0; }

.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0; text-transform: none; }
.page-subtitle { margin: 4px 0 0; font-size: 1rem; color: var(--erp-muted); text-transform: none; }
body:not(.erp-x) .brand-text h1.page-title, body:not(.erp-x) .brand-text h1.page-title span { color: var(--erp-text) !important; text-transform: none; }

.stat-card .card-body { padding: 20px; }
.stat-head { display: flex; align-items: center; gap: 12px; }
.stat-icon { width: 32px; height: 32px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius); display: inline-flex; align-items: center; justify-content: center; color: var(--erp-primary); }
.stat-label { color: var(--erp-muted); font-size: 14px; }
.stat-value { margin-top: 24px; font-size: 2rem; line-height: 1.1; font-weight: 600; color: var(--erp-text); }
.stat-sub { margin-top: 8px; font-size: 12px; color: var(--erp-muted); }
@media (max-width: 1199.98px) { .erp-search { width: 240px; } }
@media (max-width: 767.98px) { .side-user { width: min(86vw, var(--erp-sidebar-w)); } }

/* Keep page offset in sync with the sidebar width (legacy css hard-codes 230px) */
@media (min-width: 1200px) {
  body:not(.erp-x) .page:not(.active):not(.login-page):not(.register-page) { margin-left: var(--erp-sidebar-w); width: calc(100% - var(--erp-sidebar-w)); }
}
body:not(.erp-x) .dt-buttons .btn-secondary i, body:not(.erp-x) .dt-buttons .btn-secondary span { color: inherit; }
.page-title { line-height: 1.3; }
.page-subtitle { line-height: 1.5; }

/* ---------- Loader: slim progress bar across the top ---------- */
body:not(.erp-x) #loader { position: fixed; left: 0; top: 0; right: 0; z-index: 1100; width: auto; height: 3px; margin: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent 0, var(--erp-primary) 50%, transparent 100%) 0 0 / 40% 100% no-repeat, rgba(0, 148, 68, .15); transform: none; box-shadow: none; animation: erp-bar 1.1s ease-in-out infinite; }
@keyframes erp-bar { 0% { background-position: -40% 0, 0 0; } 100% { background-position: 140% 0, 0 0; } }

/* ---------- Page entrance: quick fade, cards rise in one after another ---------- */
body:not(.erp-x) .animate-bottom { bottom: auto; animation: none !important; }
@keyframes erp-fade { from { opacity: 0; } to { opacity: 1; } }




/* ---------- Topbar popovers (user menu + notifications): replaces the legacy full-height slide-over ---------- */
body:not(.erp-x) .right-sidebar { position: fixed; top: calc(var(--erp-topbar-h) - 4px); right: 16px; left: auto; height: auto; max-height: calc(100vh - 90px); overflow-y: auto; width: auto; min-width: 230px; max-width: calc(100vw - 32px); margin: 0; padding: 6px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1200; list-style: none; }
body:not(.erp-x) .right-sidebar.open { visibility: visible; opacity: 1; transform: none; width: auto; min-width: 230px; }
body:not(.erp-x) .right-sidebar li { padding: 0; border: 0; line-height: normal; margin: 0; }
body:not(.erp-x) .right-sidebar li a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--erp-radius); color: var(--erp-text); font-size: 14px; white-space: normal; text-align: left; }
body:not(.erp-x) .right-sidebar li a:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .right-sidebar li a i { color: var(--erp-muted); width: 18px; text-align: center; }
body:not(.erp-x) .right-sidebar li.notifications { padding: 2px; }
body:not(.erp-x) .right-sidebar li.notifications a.btn-link { display: block; min-height: 0; width: 320px; max-width: 100%; line-height: 1.4; }
body:not(.erp-x) .right-sidebar li.notifications .text-muted { display: block; padding: 12px; width: 260px; max-width: 100%; }
body:not(.erp-x) .right-sidebar li a { line-height: 1.4; height: auto; }

/* ---------- Dropdown menus (table Action column etc.) ---------- */
body:not(.erp-x) .dropdown-menu:not(.inner) { min-width: 12rem; padding: 6px; }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > a, body:not(.erp-x) .dropdown-menu:not(.inner) > li > button, body:not(.erp-x) .dropdown-menu:not(.inner) > .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--erp-radius); color: var(--erp-text); font-size: 14px; line-height: 1.4; white-space: nowrap; background: transparent; border: 0; width: 100%; text-align: left; }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > a:hover, body:not(.erp-x) .dropdown-menu:not(.inner) > li > button:hover, body:not(.erp-x) .dropdown-menu:not(.inner) > .dropdown-item:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > a i, body:not(.erp-x) .dropdown-menu:not(.inner) > li > button i { color: var(--erp-muted); width: 16px; text-align: center; }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > a.text-danger, body:not(.erp-x) .dropdown-menu:not(.inner) > li > button.text-danger, body:not(.erp-x) .dropdown-menu:not(.inner) > li > a.text-danger i { color: #e11d48 !important; }
body:not(.erp-x) .table thead th, body:not(.erp-x) td .btn.dropdown-toggle { text-transform: capitalize; }
body:not(.erp-x) .dropdown-menu .btn-link, body:not(.erp-x) .dropdown-menu .btn-link:hover { color: var(--erp-text); text-decoration: none; }
body:not(.erp-x) button[type="submit"], body:not(.erp-x) input[type="submit"], body:not(.erp-x) .page .btn-primary { text-transform: capitalize; }

/* ===== ICONS BEGIN ===== */
/* Bootstrap Icons (MIT), self-hosted. Existing dripicons-* / fa-* classes are remapped, so markup is unchanged. */
@font-face { font-family: "bootstrap-icons"; src: url("../vendor/bootstrap-icons/fonts/bootstrap-icons.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: block; src: url("../vendor/inter/inter-latin.woff2") format("woff2"); }
[class^="dripicons-"], [class*=" dripicons-"], .fa { -webkit-font-smoothing: antialiased; }
.dripicons-meter::before { content: "\f580"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-view-list::before { content: "\f478"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-card::before { content: "\f2dc"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-cart::before { content: "\f244"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-user::before { content: "\f4e1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-document::before { content: "\f38b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-gear::before { content: "\f3e5"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-cross::before { content: "\f659"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-chevron-right::before { content: "\f285"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-chevron-left::before { content: "\f284"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-chevron-down::before { content: "\f282"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-chevron-up::before { content: "\f286"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-trash::before { content: "\f78b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-plus::before { content: "\f64d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-document-edit::before { content: "\f4ca"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-document-new::before { content: "\f37d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-question::before { content: "\f505"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-checkmark::before { content: "\f633"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-download::before { content: "\f30a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-print::before { content: "\f501"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-copy::before { content: "\f759"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-mail::before { content: "\f32f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-preview::before { content: "\f341"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-wallet::before { content: "\f615"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-brightness-max::before { content: "\f5a2"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-brightness-low::before { content: "\f496"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-stack::before { content: "\f45b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-calendar::before { content: "\f214"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-briefcase::before { content: "\f1cc"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-basket::before { content: "\f184"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-shopping-bag::before { content: "\f179"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-search::before { content: "\f52a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-return::before { content: "\f131"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-minus::before { content: "\f63b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-experiment::before { content: "\f3e1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-bell::before { content: "\f18a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-web::before { content: "\f3ef"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-view-apps::before { content: "\f3fc"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-vibrate::before { content: "\f4e6"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-user-group::before { content: "\f4d0"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-swap::before { content: "\f12b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-power::before { content: "\f4ff"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-list::before { content: "\f478"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-export::before { content: "\f1c5"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-box::before { content: "\f1c7"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-hourglass::before { content: "\f41f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-location::before { content: "\f3e8"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-expand::before { content: "\f14d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-menu::before { content: "\f479"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-warning::before { content: "\f33b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-information::before { content: "\f431"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-clock::before { content: "\f293"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-document-remove::before { content: "\f17c"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-document-delete::before { content: "\f38f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-link::before { content: "\f470"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-lock::before { content: "\f47b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-upload::before { content: "\f603"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-graph-bar::before { content: "\f17e"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-graph-line::before { content: "\f3f2"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-graph-pie::before { content: "\f4e9"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-store::before { content: "\f543"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-tag::before { content: "\f5b0"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-tags::before { content: "\f5b2"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-ticket::before { content: "\f6ca"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-folder::before { content: "\f3d9"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-pencil::before { content: "\f4cb"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-home::before { content: "\f425"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-inbox::before { content: "\f42d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-message::before { content: "\f24a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-pin::before { content: "\f4eb"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-star::before { content: "\f588"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-flag::before { content: "\f3cc"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-heart::before { content: "\f417"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-help::before { content: "\f505"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-wrong::before { content: "\f623"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-dots-::before { content: "\f5d4"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-view-thumb::before { content: "\f3f9"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-rocket::before { content: "\f845"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-location-pin::before { content: "\f3e8"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-to-do::before { content: "\f271"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-checklist::before { content: "\f224"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-clipboard::before { content: "\f290"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-camera::before { content: "\f220"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-phone::before { content: "\f5c1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-device-mobile::before { content: "\f4e7"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-device-tablet::before { content: "\f5ae"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-device-desktop::before { content: "\f302"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-scale::before { content: "\f57f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-pill::before { content: "\f7df"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-retweet::before { content: "\f130"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-clockwise::before { content: "\f116"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-loading::before { content: "\f130"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-arrow-down::before { content: "\f128"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-arrow-up::before { content: "\f148"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-arrow-left::before { content: "\f12f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-arrow-right::before { content: "\f138"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-enter::before { content: "\f1be"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-exit::before { content: "\f1c3"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-duplicate::before { content: "\f3c2"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-archive::before { content: "\f10d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-brush::before { content: "\f1d8"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-filter::before { content: "\f3e1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-lock-open::before { content: "\f600"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-pulse::before { content: "\f66b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-time-reverse::before { content: "\f292"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-trophy::before { content: "\f5e7"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.dripicons-wifi::before { content: "\f61c"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-eye::before { content: "\f341"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-eye-slash::before { content: "\f340"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-print::before { content: "\f501"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-file-text-o::before { content: "\f38b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-file-pdf-o::before { content: "\f63e"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-file-excel-o::before { content: "\f368"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-file-o::before { content: "\f392"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-barcode::before { content: "\f601"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-arrow-left::before { content: "\f12f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-arrow-right::before { content: "\f138"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-dollar::before { content: "\f636"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-money::before { content: "\f246"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-trash-alt::before { content: "\f78b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-trash::before { content: "\f78b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-trash-o::before { content: "\f78b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-upload::before { content: "\f603"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-download::before { content: "\f30a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-twitter::before { content: "\f5ef"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-bell::before { content: "\f18a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-thumbs-down::before { content: "\f405"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-thumbs-up::before { content: "\f407"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-check::before { content: "\f633"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-tablet::before { content: "\f5ae"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-sign-out::before { content: "\f1c3"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-search::before { content: "\f52a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-refresh::before { content: "\f116"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-random::before { content: "\f544"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-plus::before { content: "\f64d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-minus::before { content: "\f63b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-list::before { content: "\f478"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-check-square-o::before { content: "\f271"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-bars::before { content: "\f479"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-bar-chart::before { content: "\f17e"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-angle-down::before { content: "\f282"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-angle-up::before { content: "\f286"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-angle-left::before { content: "\f284"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-angle-right::before { content: "\f285"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-pencil::before { content: "\f4cb"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-edit::before { content: "\f4ca"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-times::before { content: "\f659"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-calendar::before { content: "\f214"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-cog::before { content: "\f3e5"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-envelope::before { content: "\f32f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-user::before { content: "\f4e1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-home::before { content: "\f425"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-info-circle::before { content: "\f431"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-exclamation-triangle::before { content: "\f33b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-copy::before { content: "\f759"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-filter::before { content: "\f3e1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-cloud-upload::before { content: "\f2c0"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-save::before { content: "\f525"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-shopping-cart::before { content: "\f244"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-credit-card::before { content: "\f2dc"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-camera::before { content: "\f220"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-external-link::before { content: "\f1c5"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-lock::before { content: "\f47b"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-facebook::before { content: "\f344"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-phone::before { content: "\f5c1"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-caret-down::before { content: "\f229"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-caret-up::before { content: "\f235"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-circle-o::before { content: "\f28a"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-circle::before { content: "\f287"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-file::before { content: "\f392"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-heart::before { content: "\f417"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-industry::before { content: "\f1dd"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-paper-plane::before { content: "\f6c0"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-plus-circle::before { content: "\f4fa"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-whatsapp::before { content: "\f618"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-wordpress::before { content: "\f669"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-xmark::before { content: "\f659"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-cart-plus::before { content: "\f23f"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-columns::before { content: "\f465"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.fa-expand::before { content: "\f14d"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.side-navbar li a[data-toggle=collapse]::before { content: "\f284"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
.side-navbar li a[aria-expanded=true][data-toggle=collapse]::before { content: "\f282"; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal; }
/* ===== ICONS END ===== */

/* Switch alignment: empty label has no height, so its track hung below the row centre */
body:not(.erp-x) .custom-switch .custom-control-label { display: block; min-height: 24px; }
body:not(.erp-x) .custom-switch .custom-control-label::before { top: 1px; }
body:not(.erp-x) .custom-switch .custom-control-label::after { top: 3px; }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > form { margin: 0; }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > form > button, body:not(.erp-x) .dropdown-menu:not(.inner) > li > form > a, body:not(.erp-x) .dropdown-menu:not(.inner) > li > a.btn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--erp-radius); color: var(--erp-text); font-size: 14px; line-height: 1.4; white-space: nowrap; background: transparent; border: 0; width: 100%; text-align: left; min-height: 0; text-transform: none; }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > form > button:hover, body:not(.erp-x) .dropdown-menu:not(.inner) > li > a.btn:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .dropdown-menu:not(.inner) > li > form > button i, body:not(.erp-x) .dropdown-menu:not(.inner) > li > a.btn i { color: var(--erp-muted); width: 16px; text-align: center; }
body:not(.erp-x) .dropdown-menu:not(.inner) > form { margin: 0; }
body:not(.erp-x) .dropdown-menu:not(.inner) > form > button, body:not(.erp-x) .dropdown-menu:not(.inner) > form > a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--erp-radius); color: var(--erp-text); font-size: 14px; line-height: 1.4; white-space: nowrap; background: transparent; border: 0; width: 100%; text-align: left; min-height: 0; text-transform: none; }
body:not(.erp-x) .dropdown-menu:not(.inner) > form > button:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .dropdown-menu:not(.inner) > form > button i { color: var(--erp-muted); width: 16px; text-align: center; }

/* DataTables responsive row-expand control: brand green instead of default blue */
body:not(.erp-x) table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, body:not(.erp-x) table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before, body:not(.erp-x) table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, body:not(.erp-x) table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before { background-color: var(--erp-primary) !important; box-shadow: none !important; border: 0 !important; }
body:not(.erp-x) table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before, body:not(.erp-x) table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before { background-color: #e11d48 !important; }
body:not(.erp-x) .badge-danger { background: #e11d48; color: #fff; }

/* Alerts: consistent soft styles (replace Bootstrap's default blue/teal/pink) */
body:not(.erp-x) .alert-info { background: var(--erp-side); color: var(--erp-text); border: 1px solid var(--erp-border); }
body:not(.erp-x) .alert-info i, body:not(.erp-x) .alert-info a { color: var(--erp-primary); }
body:not(.erp-x) .alert-success { background: var(--erp-primary-soft); color: var(--erp-primary-dark); border: 1px solid rgba(0, 148, 68, .25); }
body:not(.erp-x) .alert-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
body:not(.erp-x) .alert-warning { background: #fff7e0; color: #7a5200; border: 1px solid #fde4a1; }
body.dark-mode:not(.erp-x) .alert-danger { background: rgba(225, 29, 72, .15); color: #fda4af; border-color: rgba(225, 29, 72, .35); }
body.dark-mode:not(.erp-x) .alert-warning { background: rgba(245, 158, 11, .15); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
body.dark-mode:not(.erp-x) .alert-success { color: #4ade80; }

/* Info tooltip icon (components/info.blade.php) */
.erp-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--erp-primary-soft); color: var(--erp-primary); font-size: 13px; line-height: 1; cursor: help; vertical-align: middle; }

/* Topbar links are legacy .dropdown-item elements: keep them flat (no filled state) */
body:not(.erp-x) nav.navbar .nav-menu a.dropdown-item, body:not(.erp-x) nav.navbar .nav-menu a.dropdown-item:active, body:not(.erp-x) nav.navbar .nav-menu a.dropdown-item:focus { background: transparent; color: var(--erp-muted); box-shadow: none; }
body:not(.erp-x) nav.navbar .nav-menu a.dropdown-item:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) nav.navbar .nav-menu a.dropdown-item span:not(.badge) { color: var(--erp-text); font-weight: 500; }
body:not(.erp-x) nav.navbar .nav-menu > li { align-self: center; }

/* ---------- Status badges / pills: soft tinted pill with a leading status icon ---------- */
:root { --pill-ok-bg: #e3f6ec; --pill-ok-fg: #00793a; --pill-warn-bg: #fff0e3; --pill-warn-fg: #d9570b; --pill-bad-bg: #ffe9ed; --pill-bad-fg: #d6204a; --pill-info-bg: #eaf0fb; --pill-info-fg: #3f5f9f; --pill-mute-bg: #eef0f3; --pill-mute-fg: #5b6573; }
body.dark-mode { --pill-ok-bg: rgba(34, 197, 94, .14); --pill-ok-fg: #4ade80; --pill-warn-bg: rgba(249, 115, 22, .16); --pill-warn-fg: #fb923c; --pill-bad-bg: rgba(244, 63, 94, .16); --pill-bad-fg: #fb7185; --pill-info-bg: rgba(96, 135, 220, .16); --pill-info-fg: #8fb0f5; --pill-mute-bg: rgba(148, 163, 184, .14); --pill-mute-fg: #aab4c3; }
body:not(.erp-x) .badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .4em .95em; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0; text-shadow: none; white-space: nowrap; vertical-align: middle; border: 0; }
body:not(.erp-x) .badge-success, body:not(.erp-x) .badge.bg-success, body:not(.erp-x) .badge-primary, body:not(.erp-x) .badge.bg-primary { background: var(--pill-ok-bg); color: var(--pill-ok-fg); }
body:not(.erp-x) .badge-warning, body:not(.erp-x) .badge.bg-warning { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
body:not(.erp-x) .badge-danger, body:not(.erp-x) .badge.bg-danger { background: var(--pill-bad-bg); color: var(--pill-bad-fg); }
body:not(.erp-x) .badge-info, body:not(.erp-x) .badge.bg-info { background: var(--pill-info-bg); color: var(--pill-info-fg); }
body:not(.erp-x) .badge-secondary, body:not(.erp-x) .badge-dark, body:not(.erp-x) .badge-light, body:not(.erp-x) .badge.bg-secondary { background: var(--pill-mute-bg); color: var(--pill-mute-fg); }
/* status icons: BS4 .badge-* are the text statuses; .bg-* number badges stay icon-free */
body:not(.erp-x) .badge[class*="badge-"]:not(.notification-number)::before { font-family: "bootstrap-icons"; font-weight: normal; font-size: 13px; line-height: 1; }
body:not(.erp-x) .badge-success::before, body:not(.erp-x) .badge-primary::before { content: "\f26a"; }
body:not(.erp-x) .badge-warning::before { content: "\f333"; }
body:not(.erp-x) .badge-danger::before { content: "\f622"; }
body:not(.erp-x) .badge-info::before { content: "\f430"; }
body:not(.erp-x) .badge-secondary::before, body:not(.erp-x) .badge-dark::before, body:not(.erp-x) .badge-light::before { content: "\f2e6"; }
/* the notification counter stays a compact solid dot-pill */
body:not(.erp-x) .badge.notification-number { background: #e11d48; color: #fff; padding: .2em .5em; font-size: 11px; font-weight: 700; }
body:not(.erp-x) .badge.notification-number::before { content: none; }
/* legacy .bg-* utilities are !important: number badges (dashboard stock) need the same weight */
body:not(.erp-x) .badge.bg-success, body:not(.erp-x) .badge.bg-primary { background: var(--pill-ok-bg) !important; color: var(--pill-ok-fg) !important; }
body:not(.erp-x) .badge.bg-warning { background: var(--pill-warn-bg) !important; color: var(--pill-warn-fg) !important; }
body:not(.erp-x) .badge.bg-danger { background: var(--pill-bad-bg) !important; color: var(--pill-bad-fg) !important; }
body:not(.erp-x) .badge.bg-info { background: var(--pill-info-bg) !important; color: var(--pill-info-fg) !important; }
body:not(.erp-x) .badge.bg-secondary { background: var(--pill-mute-bg) !important; color: var(--pill-mute-fg) !important; }
body:not(.erp-x) label strong, body:not(.erp-x) label b { font-weight: inherit; }
/* Native checkboxes / radios / range inputs use the brand colour */
body:not(.erp-x) input[type="checkbox"], body:not(.erp-x) input[type="radio"], body:not(.erp-x) input[type="range"], body:not(.erp-x) progress { accent-color: var(--erp-primary); }

/* ---------- Product details modal ---------- */
#product-details .modal-header { align-items: center; padding: 16px 24px; }
#product-details .modal-title { font-size: 1.1rem; font-weight: 600; }
#product-details .modal-body { padding: 24px; }
#product-details #slider-content img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; padding: 8px; background: var(--erp-side); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); }
.pd-hero { padding-bottom: 14px; border-bottom: 1px solid var(--erp-border); }
.pd-name { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3; color: var(--erp-text); }
.pd-code { margin-top: 4px; font-size: 13px; color: var(--erp-muted); word-break: break-all; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-tags .badge { text-transform: capitalize; }
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pd-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--erp-side); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); min-width: 0; }
.pd-item span { font-size: 12px; color: var(--erp-muted); }
.pd-item strong { font-size: 15px; font-weight: 600; color: var(--erp-text); word-break: break-word; }
.pd-item .badge { align-self: flex-start; }
.pd-notes { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--erp-primary); background: var(--erp-primary-soft); border-radius: 0 var(--erp-radius) var(--erp-radius) 0; font-size: 14px; color: var(--erp-text); }
.pd-notes span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--erp-primary); text-transform: uppercase; letter-spacing: .04em; }
#product-details h5:not(.modal-title) { margin: 8px 0 12px; font-size: 1rem; font-weight: 600; }
#product-details .table-bordered { border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
#product-details .table-bordered th, #product-details .table-bordered td { border: 0; border-bottom: 1px solid var(--erp-border); }
#product-details .table-bordered tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 575.98px) { .pd-grid { grid-template-columns: 1fr; } #product-details .modal-body { padding: 16px; } }
#product-details #slider-content img { min-height: 220px; }
#product-details table:not(:has(tr)) { display: none; }
#product-details #combo-header:empty { display: none; }

/* ---------- Document-style detail modals (purchase / sale / return / quotation / transfer / delivery / stock count) ---------- */
.modal[id$="-details"]:not(#product-details) .modal-dialog { max-width: 940px; }
.modal[id$="-details"]:not(#product-details) .modal-content { overflow: hidden; }
.modal[id$="-details"]:not(#product-details) .modal-content > .container { max-width: none; margin: 0 !important; padding: 18px 24px 16px; background: var(--erp-side); border-bottom: 1px solid var(--erp-border) !important; }
.modal[id$="-details"]:not(#product-details) .modal-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.modal[id$="-details"]:not(#product-details) .modal-content > .container i { color: var(--erp-muted); font-size: 14px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.modal[id$="-details"]:not(#product-details) .modal-content > .container .close { opacity: 1; }
.modal[id$="-details"]:not(#product-details) .modal-body { padding: 20px 24px; font-size: 14px; line-height: 1.75; color: var(--erp-text); }
.modal[id$="-details"]:not(#product-details) .modal-body .row { margin-top: 6px; padding: 14px 6px; background: var(--erp-side); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); }
.modal[id$="-details"]:not(#product-details) .modal-body a { font-weight: 500; }
.modal[id$="-details"]:not(#product-details) .modal-content > br { display: none; }
.modal[id$="-details"]:not(#product-details) .modal-content > .table-responsive { width: auto; margin: 0 24px 16px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); }
.modal[id$="-details"]:not(#product-details) .modal-content .table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; }
.modal[id$="-details"]:not(#product-details) .table th, .modal[id$="-details"]:not(#product-details) .table td { border: 0; border-bottom: 1px solid var(--erp-border); padding: 10px 12px; vertical-align: middle; }
.modal[id$="-details"]:not(#product-details) .table thead th { background: var(--erp-side); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.modal[id$="-details"]:not(#product-details) .table tbody tr:last-child td { border-bottom: 0; }
.modal[id$="-details"]:not(#product-details) .table td[colspan] { text-align: right; font-weight: 500; color: var(--erp-muted); background: var(--erp-side); }
.modal[id$="-details"]:not(#product-details) .table tbody tr:last-child td, .modal[id$="-details"]:not(#product-details) .table td[colspan] + td { font-weight: 600; }
.modal[id$="-details"]:not(#product-details) [id$="-footer"] { padding-top: 4px; border-top: 0; color: var(--erp-muted); }
.modal[id$="-details"]:not(#product-details) [id$="-footer"] p { padding: 10px 14px; margin-bottom: 12px; background: var(--erp-primary-soft); border-left: 3px solid var(--erp-primary); border-radius: 0 var(--erp-radius) var(--erp-radius) 0; color: var(--erp-text); }


/* ---------- Customer / supplier detail pages ---------- */
#ledger-summery { text-align: left !important; }
#ledger-summery .bg-light { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px !important; background: var(--erp-surface) !important; border: 1px solid var(--erp-border) !important; border-radius: var(--erp-radius-lg) !important; text-align: left; height: 100%; }
#ledger-summery .bg-light strong { order: 1; font-size: 13px; font-weight: 500; color: var(--erp-muted); }
#ledger-summery .bg-light br { display: none; }
#ledger-summery .bg-light h5 { order: 2; margin: 4px 0 0; font-size: 1.5rem; font-weight: 600; color: var(--erp-text); }
#ledger-summery > [class*="col-"] { margin-bottom: 12px; }
.container-fluid > .card.mt-5 .card-header { align-items: flex-start; padding: 18px 22px; }
.container-fluid > .card.mt-5 .card-header h4 { font-size: 1.3rem; font-weight: 600; }
.nav-tabs { border-bottom: 1px solid var(--erp-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--erp-muted); font-weight: 500; padding: 10px 16px; }
.nav-tabs .nav-link:hover { color: var(--erp-text); }
.nav-tabs .nav-link.active { color: var(--erp-primary); border-bottom-color: var(--erp-primary); background: transparent; }

/* Image placeholder stays square wherever it is used */
img[src$="placeholder.svg"] { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--erp-radius-sm, 6px); }
#slider-content img[src$="placeholder.svg"] { width: 220px; height: 220px; max-width: 100%; margin: 0 auto; display: block; }
body:not(.erp-x) table img:not(.erp-x), body:not(.erp-x) img[src$="placeholder.svg"] { border-radius: 12px !important; }

/* Inline "Size:" inputs (print barcode) must shrink inside narrow columns */
body:not(.erp-x) .d-flex.justify-content-start > div:last-child { flex: 1; min-width: 0; }
body:not(.erp-x) .d-flex.justify-content-start input[type="number"] { width: 100%; min-width: 0; }

/* Dark mode: legacy navy table background and bright placeholder */
body.dark-mode:not(.erp-x) table.table { background-color: var(--erp-surface); }
body.dark-mode:not(.erp-x) img[src$="placeholder.svg"] { filter: brightness(.35); }
body.dark-mode:not(.erp-x) .table thead, body.dark-mode:not(.erp-x) .table thead th, body.dark-mode:not(.erp-x) .thead-light th { background-color: var(--erp-hover); }
body.dark-mode:not(.erp-x) .bootstrap-select.dropdown, body.dark-mode:not(.erp-x) .bootstrap-select { background-color: var(--erp-input); }
body.dark-mode:not(.erp-x) .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current), body.dark-mode:not(.erp-x) .page-item:not(.active) .page-link { background: var(--erp-hover) !important; color: var(--erp-text) !important; border-color: var(--erp-border) !important; }
body.dark-mode:not(.erp-x) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--erp-muted) !important; }

/* Dark mode sidebar: neutral text, green only as the active accent */
body.dark-mode:not(.erp-x) .side-navbar li a, body.dark-mode:not(.erp-x) .side-navbar li a i, body.dark-mode:not(.erp-x) .side-navbar li a::before { color: var(--erp-muted) !important; }
body.dark-mode:not(.erp-x) .side-navbar li a:hover, body.dark-mode:not(.erp-x) .side-navbar li a:hover i { color: var(--erp-text) !important; }
body.dark-mode:not(.erp-x) .side-navbar li.active > a, body.dark-mode:not(.erp-x) .side-navbar li a[aria-expanded=true], body.dark-mode:not(.erp-x) .side-navbar li ul li.active a { background: var(--erp-primary-soft); color: var(--erp-text) !important; }
body.dark-mode:not(.erp-x) .side-navbar li.active > a i, body.dark-mode:not(.erp-x) .side-navbar li a[aria-expanded=true] i { color: var(--erp-primary) !important; }

/* Sidebar hierarchy: an open group header is only emphasised (bold text, green icon); the active child gets the soft green pill. No guide line. */
body:not(.erp-x) .side-navbar li ul { border-left: 0; margin-left: 12px; }
body:not(.erp-x) .side-navbar li ul li a { margin-left: 20px; margin-right: 0; }
body:not(.erp-x) .side-navbar li a[data-toggle=collapse][aria-expanded=true], body:not(.erp-x) .side-navbar li.active > a[data-toggle=collapse] { background: transparent; color: var(--erp-text); font-weight: 600; }
body:not(.erp-x) .side-navbar li ul li.active > a { background: var(--erp-primary-soft); color: var(--erp-primary); font-weight: 500; }
body.dark-mode:not(.erp-x) .side-navbar li a[data-toggle=collapse][aria-expanded=true], body.dark-mode:not(.erp-x) .side-navbar li.active > a[data-toggle=collapse] { background: transparent; color: var(--erp-text) !important; }
body.dark-mode:not(.erp-x) .side-navbar li ul li.active > a { background: var(--erp-primary-soft); color: #4ade80 !important; }

body.dark-mode:not(.erp-x) table small, body.dark-mode:not(.erp-x) table .small { color: var(--erp-muted) !important; }
body.dark-mode:not(.erp-x) table.dataTable tbody td { color: var(--erp-text); }

/* "Add ..." buttons (btn-info): tinted green so they stand out from neutral buttons in both themes */
body:not(.erp-x) .btn-info { background: var(--erp-primary-soft); border: 1px solid var(--erp-primary); color: var(--erp-primary); font-weight: 500; }
body:not(.erp-x) .btn-info i { color: inherit; }
body:not(.erp-x) .btn-info:hover, body:not(.erp-x) .btn-info:focus, body:not(.erp-x) .btn-info:active { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; }
body.dark-mode:not(.erp-x) .btn-info { color: #4ade80; }
body.dark-mode:not(.erp-x) .btn-info:hover, body.dark-mode:not(.erp-x) .btn-info:focus { color: #fff; }

/* Content that sits beside a card's padded text (e.g. Product History tabs/tables): same left edge as the card text */
body:not(.erp-x) .erp-inset { margin-left: 20px; margin-right: 20px; }
body:not(.erp-x) .row.erp-inset { margin-left: 5px; margin-right: 5px; }
body:not(.erp-x) .d-flex.justify-content-start input[type="number"] { height: 36px; padding: 0 10px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius); background: var(--erp-input); color: var(--erp-text); }
body:not(.erp-x) .d-flex.justify-content-start input[type="number"]:focus { outline: 0; border-color: var(--erp-primary); box-shadow: var(--erp-focus); }

/* Sidebar sub-items: pill spans the same width as the parent pill, label aligned with the parent's label */
body:not(.erp-x) .side-navbar li ul { margin: 0 0 6px; padding: 0; }
body:not(.erp-x) .side-navbar li ul li a { margin: 2px 12px; padding: 6px 12px 6px 44px; }

/* DataTables toolbar: one rounded bar - page length left, search grows in the middle, export/column buttons right */
body:not(.erp-x) .dataTables_wrapper > .row:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 14px; padding: 10px 14px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); }
body:not(.erp-x) .dataTables_wrapper > .row:first-child > * { float: none; width: auto; max-width: none; padding: 0; margin: 0; }
body:not(.erp-x) .dataTables_length label, body:not(.erp-x) .dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--erp-muted); font-size: 13px; font-weight: 400; white-space: nowrap; }
body:not(.erp-x) .dataTables_length select { width: auto; padding: 0 28px 0 10px; color: var(--erp-text); }
body:not(.erp-x) .dataTables_wrapper > .row:first-child > .dataTables_filter { flex: 1 1 220px; }
body:not(.erp-x) .dataTables_filter label { font-size: 0; }
body:not(.erp-x) .dataTables_wrapper .dataTables_filter input { flex: 1; width: 100%; max-width: 420px; margin: 0; padding-left: 36px; font-size: 14px; color: var(--erp-text); background: var(--erp-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238a958f' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 12px center; }
body:not(.erp-x) .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
body:not(.erp-x) .dataTables_wrapper .dt-buttons .btn { margin: 0; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--erp-radius); display: inline-flex; align-items: center; justify-content: center; }
body:not(.erp-x) .dataTables_wrapper .dt-buttons .btn-group { margin: 0; }
body:not(.erp-x) .dataTables_wrapper .dataTables_filter input::placeholder { font-size: 14px; color: var(--erp-muted); opacity: 1; }

/* DataTables footer: "Showing ..." chip on the left, rounded page buttons on the right */
body:not(.erp-x) .dataTables_wrapper::after { content: ''; display: block; clear: both; }
body:not(.erp-x) .dataTables_wrapper > .dataTables_info { float: left; width: auto; padding: 6px 12px; margin: 14px 0 0; border-radius: var(--erp-radius); background: var(--erp-side); color: var(--erp-muted); font-size: 13px; }
body:not(.erp-x) .dataTables_wrapper > .dataTables_info small { color: inherit; font-size: inherit; }
body:not(.erp-x) .dataTables_wrapper > .dataTables_paginate { float: right; margin: 10px 0 0; padding: 0; }
body:not(.erp-x) .dataTables_paginate .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
body:not(.erp-x) .dataTables_paginate .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 0; padding: 0 10px; font-size: 13px; line-height: 1; border-radius: var(--erp-radius); transition: background .15s, color .15s, border-color .15s; }
body:not(.erp-x) .dataTables_paginate .page-link:hover { background: var(--erp-hover); border-color: var(--erp-primary); color: var(--erp-primary); }
body:not(.erp-x) .dataTables_paginate .page-item.active .page-link { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; font-weight: 600; }
body:not(.erp-x) .dataTables_paginate .page-item.disabled .page-link { opacity: .45; background: var(--erp-surface); border-color: var(--erp-border); color: var(--erp-muted); pointer-events: none; }
body:not(.erp-x) .dataTables_paginate .page-link i { color: inherit; font-size: 12px; }
@media (max-width: 991.98px) { body:not(.erp-x) .dataTables_wrapper > .dataTables_info, body:not(.erp-x) .dataTables_wrapper > .dataTables_paginate { float: none; display: block; width: 100%; max-width: 100%; text-align: center; } body:not(.erp-x) .dataTables_paginate .pagination { justify-content: center; } }
/* Legacy theme shifts padding on hover; keep labels still */
body:not(.erp-x) .side-navbar li a:hover, body:not(.erp-x) .side-navbar li a:focus { padding: 10px 12px; }
body:not(.erp-x) .side-navbar li ul li a:hover, body:not(.erp-x) .side-navbar li ul li a:focus { padding: 6px 12px 6px 44px; }
body:not(.erp-x) .side-navbar li a[data-toggle=collapse]:hover { padding-right: 30px; }

/* Status switches inside table cells: 40x22 pill, 18px knob centred, switch centred in the cell and level with the row text */
body:not(.erp-x) td .custom-switch { position: relative; display: block; width: 40px; height: 22px; min-height: 0; margin: 0 auto; padding: 0; line-height: 1; }
body:not(.erp-x) td .custom-switch .custom-control-input { left: 0; top: 0; width: 40px; height: 22px; }
body:not(.erp-x) td .custom-switch .custom-control-label { display: block; width: 40px; height: 22px; min-height: 0; margin: 0; cursor: pointer; }
body:not(.erp-x) td .custom-switch .custom-control-label::before { left: 0; top: 0; width: 40px; height: 22px; border-radius: 11px; }
body:not(.erp-x) td .custom-switch .custom-control-label::after { left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; }
body:not(.erp-x) td .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(18px); }
body:not(.erp-x) td:has(> .custom-switch) { vertical-align: middle; }

/* Bullet before every sidebar child item */
body:not(.erp-x) .side-navbar li ul li a { position: relative; }
body:not(.erp-x) .side-navbar li ul li a::before { content: ""; position: absolute; left: 19px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; transform: translateY(-50%); transition: opacity .15s; }
body:not(.erp-x) .side-navbar li ul li a:hover::before { opacity: .8; }
body:not(.erp-x) .side-navbar li ul li.active > a::before { opacity: 1; background: var(--erp-primary); }
body.dark-mode:not(.erp-x) .side-navbar li ul li.active > a::before { background: #4ade80; }
@media (max-width: 991.98px) { body:not(.erp-x) .dataTables_paginate .pagination { justify-content: center !important; } }

/* SweetAlert toasts (showAlert): neutral card, coloured accent edge and icon */
.swal2-popup.swal2-toast.colored-toast { --toast: #009444; display: flex; align-items: center; width: auto; min-width: 280px; max-width: 420px; padding: 12px 16px 12px 14px; background: var(--erp-surface, #fff); border: 1px solid var(--erp-border, #e5e7eb); border-left: 4px solid var(--toast); border-radius: var(--erp-radius, 8px); box-shadow: 0 10px 30px rgba(16, 24, 40, .14); }
.swal2-popup.colored-toast.swal2-icon-success { --toast: #009444; }
.swal2-popup.colored-toast.swal2-icon-error { --toast: #e11d48; }
.swal2-popup.colored-toast.swal2-icon-warning { --toast: #d97706; }
.swal2-popup.colored-toast.swal2-icon-info { --toast: #2563eb; }
.swal2-popup.colored-toast .swal2-icon { flex: none; width: 24px; height: 24px; min-width: 24px; margin: 0 12px 0 0; border: 0; background: none; color: var(--toast); }
.swal2-popup.colored-toast .swal2-icon > * { display: none !important; }
.swal2-popup.colored-toast .swal2-icon::before { font-family: "bootstrap-icons"; font-size: 22px; line-height: 24px; color: var(--toast); }
.swal2-popup.colored-toast.swal2-icon-success .swal2-icon::before { content: "\f26a"; }
.swal2-popup.colored-toast.swal2-icon-error .swal2-icon::before { content: "\f622"; }
.swal2-popup.colored-toast.swal2-icon-warning .swal2-icon::before { content: "\f333"; }
.swal2-popup.colored-toast.swal2-icon-info .swal2-icon::before { content: "\f430"; }
.swal2-popup.colored-toast .swal2-title { margin: 0; padding: 0; color: var(--erp-text, #111827); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; }
.swal2-popup.colored-toast .swal2-timer-progress-bar { height: 3px; background: var(--toast); opacity: .5; }
.swal2-popup.colored-toast .swal2-close { color: var(--erp-muted, #6b7280); }

/* SweetAlert confirm dialogs */
.swal2-popup:not(.swal2-toast) { border-radius: var(--erp-radius-lg, 10px); padding: 1.6rem 1.4rem 1.4rem; background: var(--erp-surface, #fff); color: var(--erp-text, #111827); }
.swal2-popup:not(.swal2-toast) .swal2-title { width: 100%; margin: 0 0 .5rem; padding: 0; text-align: center; font-size: 1.25rem; font-weight: 600; color: var(--erp-text, #111827); }
.swal2-popup:not(.swal2-toast) .swal2-html-container { color: var(--erp-muted, #6b7280); font-size: 14px; }
.swal2-actions { gap: 10px; }
.erp-swal-btn { min-width: 110px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--erp-radius, 8px); font-size: 14px; font-weight: 500; cursor: pointer; }
.erp-swal-ok { background: var(--erp-primary, #009444); color: #fff; }
.erp-swal-danger { background: #e11d48; color: #fff; }
.erp-swal-cancel { background: var(--erp-surface, #fff); border-color: var(--erp-border, #e5e7eb); color: var(--erp-text, #111827); }
.erp-swal-btn:focus { outline: 0; box-shadow: var(--erp-focus, 0 0 0 3px rgba(0, 148, 68, .25)); }
.swal2-popup:not(.swal2-toast) { display: flex; flex-direction: column; align-items: center; }
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-title { justify-self: center; width: auto; max-width: 100%; padding: 0 1rem; }
body .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions { justify-self: center; }
.swal2-popup:not(.swal2-toast) { border: 1px solid var(--erp-border, #e5e7eb); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }

/* Action dropdown items (links and buttons, with or without a form): one layout so icons and labels line up */
body:not(.erp-x) .dropdown-menu:not(.inner) li > .btn, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .btn, body:not(.erp-x) .dropdown-menu:not(.inner) > form > .btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--erp-radius); background: transparent; color: var(--erp-text); font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; text-decoration: none; }
body:not(.erp-x) .dropdown-menu:not(.inner) li > .btn:hover, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .btn:hover, body:not(.erp-x) .dropdown-menu:not(.inner) > form > .btn:hover { background: var(--erp-hover); color: var(--erp-text); }
body:not(.erp-x) .dropdown-menu:not(.inner) li > .btn i, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .btn i { flex: none; width: 16px; margin: 0; text-align: center; color: var(--erp-muted); }
body:not(.erp-x) .dropdown-menu:not(.inner) li > .btn.text-danger, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .btn.text-danger { color: #e11d48; }
body:not(.erp-x) .dropdown-menu:not(.inner) li > a, body:not(.erp-x) .dropdown-menu:not(.inner) li > button, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > button, body:not(.erp-x) .dropdown-menu:not(.inner) li > .btn, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .btn { min-height: 38px; }

/* Input + unit select (cost/weight/rate fields): one joined field, rounded only on the outer corners */
body:not(.erp-x) .input-group-append > select.form-control { min-width: 84px; margin-left: -1px; border-radius: 0 var(--erp-radius) var(--erp-radius) 0; }
body:not(.erp-x) .input-group-prepend > select.form-control { min-width: 84px; margin-right: -1px; border-radius: var(--erp-radius) 0 0 var(--erp-radius); }
body:not(.erp-x) .input-group-append > select.form-control:focus, body:not(.erp-x) .input-group-prepend > select.form-control:focus { position: relative; z-index: 3; }
body:not(.erp-x) .input-group-append > .input-group-text { margin-left: -1px; border-radius: 0 var(--erp-radius) var(--erp-radius) 0; }
body:not(.erp-x) .input-group-prepend > .input-group-text { margin-right: -1px; border-radius: var(--erp-radius) 0 0 var(--erp-radius); }

/* Saved product images in the edit modal: remove button on the card corner */
.existing-image .card { position: relative; overflow: visible; }
.existing-image .remove-existing-image { position: absolute; top: -8px; right: -8px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #e11d48; color: #fff; font-size: 16px; line-height: 24px; text-align: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.existing-image .remove-existing-image:hover { background: #be123c; }

/* Product details image carousel: round arrow buttons over the image edges, dot indicators underneath */
#product-details .carousel { position: relative; }
#product-details .carousel-control-prev, #product-details .carousel-control-next { top: 50%; bottom: auto; width: 34px; height: 34px; margin: -17px 10px 0; padding: 0; border-radius: 50%; background: rgba(17, 24, 39, .55); opacity: 1; transition: background .15s; }
#product-details .carousel-control-prev { left: 0; }
#product-details .carousel-control-next { right: 0; }
#product-details .carousel-control-prev:hover, #product-details .carousel-control-next:hover { background: var(--erp-primary); }
#product-details .carousel-control-prev-icon, #product-details .carousel-control-next-icon { width: auto; height: auto; background: none; }
#product-details .carousel-control-prev-icon::before, #product-details .carousel-control-next-icon::before { font-family: "bootstrap-icons"; font-size: 15px; line-height: 34px; color: #fff; }
#product-details .carousel-control-prev-icon::before { content: "\f284"; }
#product-details .carousel-control-next-icon::before { content: "\f285"; }
#product-details .carousel-indicators { position: static; display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
#product-details .carousel-indicators li { width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--erp-border); opacity: 1; text-indent: -999px; overflow: hidden; cursor: pointer; transition: background .15s, width .15s; }
#product-details .carousel-indicators li.active { width: 20px; border-radius: 4px; background: var(--erp-primary); }
#product-details .carousel-control-prev-icon::after, #product-details .carousel-control-next-icon::after { content: none; }

/* Product details: the image panel fills the column so there is no empty block under it */
#product-details #slider-content { display: flex; flex-direction: column; }
#product-details #slider-content > img { flex: 1 1 auto; width: 100%; height: 100%; min-height: 220px; max-height: none; object-fit: contain; }
#product-details #slider-content > .carousel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 240px; }
#product-details #slider-content .carousel-inner { flex: 1 1 auto; min-height: 220px; }
#product-details #slider-content .carousel-item { height: 100%; }
#product-details #slider-content .carousel-item img { height: 100%; max-height: none; min-height: 0; }

/* Image lightbox */
#product-details #slider-content img:not([src$="placeholder.svg"]), table td img:not([src$="placeholder.svg"]), .existing-image img, #image-preview img { cursor: zoom-in; }
.swal2-popup.erp-lightbox { max-width: 94vw; }
.erp-lb { position: relative; display: flex; align-items: center; justify-content: center; }
.erp-lb-img { display: block; max-width: 88vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: var(--erp-radius, 8px); }
.erp-lb-nav { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(17, 24, 39, .6); color: #fff; cursor: pointer; transition: background .15s; }
.erp-lb-nav:hover { background: var(--erp-primary); }
.erp-lb-nav::before { font-family: "bootstrap-icons"; font-size: 18px; line-height: 40px; }
.erp-lb-prev { left: 10px; }
.erp-lb-next { right: 10px; }
.erp-lb-prev::before { content: "\f284"; }
.erp-lb-next::before { content: "\f285"; }
.erp-lb-count { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: rgba(17, 24, 39, .6); color: #fff; font-size: 12px; }
.erp-lb-count:empty { display: none; }
.swal2-popup.erp-lightbox .swal2-close { top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(17, 24, 39, .65); color: #fff; font-size: 22px; line-height: 32px; z-index: 3; }
.swal2-popup.erp-lightbox .swal2-close:hover { background: var(--erp-primary); color: #fff; }

/* Delete item in action dropdowns: tinted danger (class added by erp-ui.js) */
body:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger, body:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger i, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger i { color: #e11d48; }
body:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger { background: rgba(225, 29, 72, .08); }
body:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger:hover, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger:hover { background: rgba(225, 29, 72, .16); color: #be123c; }
body:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger:hover i, body:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger:hover i { color: #be123c; }
body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger, body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger i, body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger, body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger i { color: #fb7185; }
body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger:hover, body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > .erp-danger.erp-danger:hover i, body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger:hover, body.dark-mode:not(.erp-x) .dropdown-menu:not(.inner) li > form > .erp-danger.erp-danger:hover i { color: #fda4af; }

/* Login: split layout (brand panel + form card) */
.login-page.erp-auth, body.dark-mode .login-page.erp-auth { display: flex; min-height: 100vh; background: var(--erp-bg); background-image: none; }
.erp-auth-brand { flex: 1 1 45%; display: flex; align-items: center; justify-content: center; padding: 48px; color: #fff; background: linear-gradient(145deg, var(--erp-primary) 0%, #005f2b 100%); position: relative; overflow: hidden; }
.erp-auth-brand::before, .erp-auth-brand::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.erp-auth-brand::before { width: 420px; height: 420px; top: -140px; right: -140px; }
.erp-auth-brand::after { width: 300px; height: 300px; bottom: -110px; left: -90px; }
.erp-auth-brand-inner { position: relative; max-width: 420px; z-index: 1; text-align: center; }
.erp-auth-logo { width: 260px; max-width: 100%; height: auto; padding: 18px; margin-bottom: 36px; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.erp-auth-brand h2 { font-size: 2.25rem; font-weight: 700; letter-spacing: .02em; color: #fff; margin-bottom: 14px; }
.login-page.erp-auth .erp-auth-brand p { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.erp-auth-main { flex: 1 1 55%; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--erp-bg); }
.erp-auth-card { width: 100%; max-width: 400px; }
.erp-auth-card h1 { font-size: 1.75rem; font-weight: 700; color: var(--erp-text); margin-bottom: 6px; }
.login-page.erp-auth .erp-auth-sub { font-size: .95rem; color: var(--erp-muted); margin-bottom: 28px; }
.login-page.erp-auth form { max-width: none; margin: 0 0 16px; }
.erp-auth-field { margin-bottom: 18px; }
.erp-auth-field label { display: block; font-size: .85rem; font-weight: 600; color: var(--erp-text); margin-bottom: 6px; }
.erp-auth-field input { width: 100%; height: 46px; padding: 0 14px; font-size: .95rem; color: var(--erp-text); background: var(--erp-input); border: 1px solid var(--erp-border); border-radius: var(--erp-radius); outline: 0; transition: border-color .15s, box-shadow .15s; }
.erp-auth-field input:focus { border-color: var(--erp-primary); box-shadow: var(--erp-focus); }
.erp-auth-pass { position: relative; }
.erp-auth-pass input { padding-right: 44px; }
#togglePassword { position: absolute; top: 0; right: 0; width: 44px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--erp-muted); cursor: pointer; }
#togglePassword:hover { color: var(--erp-primary); }
.erp-auth-error { display: block; margin-top: 6px; color: #dc2626; }
.login-page.erp-auth .btn-primary { height: 46px; border-radius: var(--erp-radius); }
.login-page.erp-auth a.forgot-pass { display: block; text-align: center; font-size: .875rem; margin-bottom: 16px; }
.login-page.erp-auth .register-section { text-align: center; font-size: .875rem; color: var(--erp-muted); }
.login-page.erp-auth .erp-auth-copy { margin-top: 32px; text-align: center; font-size: .75rem; color: var(--erp-muted); }
@media (max-width: 767.98px) {
  .login-page.erp-auth { flex-direction: column; }
  .erp-auth-brand { flex: 0 0 auto; padding: 28px 20px; }
  .erp-auth-brand::before, .erp-auth-brand::after { display: none; }
  .erp-auth-brand h2 { font-size: 1.4rem; margin-bottom: 4px; }
  .login-page.erp-auth .erp-auth-brand p { display: none; }
  .erp-auth-logo { width: 120px; padding: 10px; margin-bottom: 12px; border-radius: 14px; box-shadow: none; }
  .erp-auth-main { align-items: flex-start; padding: 28px 20px; }
}

/* Login brand panel polish */
.erp-auth-brand { background: radial-gradient(circle at 20% 15%, #12b560 0%, transparent 45%), linear-gradient(150deg, #00a34c 0%, #006b30 55%, #004d22 100%); }
.erp-auth-brand-inner::before { content: ""; position: absolute; inset: -80px -120px; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.5px, transparent 1.5px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); mask-image: radial-gradient(circle, #000 25%, transparent 70%); }
.erp-auth-logo { width: 300px; padding: 22px; margin-bottom: 40px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .14), 0 30px 60px rgba(0, 0, 0, .3); }
.erp-auth-brand h2 { font-size: 1.6rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-bottom: 24px; }
.erp-auth-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 0; list-style: none; }
.erp-auth-points li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: .85rem; font-weight: 500; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; backdrop-filter: blur(6px); }
@media (max-width: 767.98px) {
  .erp-auth-brand-inner::before, .erp-auth-brand h2, .erp-auth-points { display: none; }
  .erp-auth-logo { width: 130px; margin-bottom: 0; box-shadow: none; }
}
.erp-auth-brand-inner { max-width: 480px; }
.erp-auth-brand h2 { text-wrap: balance; }
.erp-auth-points { flex-wrap: nowrap; gap: 8px; }
.erp-auth-points li { padding: 8px 14px; white-space: nowrap; }

/* Login form polish */
.erp-auth-main { background: radial-gradient(circle at 80% 10%, var(--erp-primary-soft) 0%, transparent 40%), var(--erp-bg); }
.erp-auth-card { max-width: 420px; padding: 40px 36px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 20px; box-shadow: 0 24px 60px rgba(16, 24, 40, .1); }
.erp-auth-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; font-size: 1.25rem; color: #fff; background: linear-gradient(145deg, var(--erp-primary), #006b30); border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 148, 68, .35); }
.erp-auth-field { position: relative; }
.erp-auth-field label { padding-left: 2px; }
.erp-auth-pass, .erp-auth-field > .erp-auth-ico + input { position: relative; }
.erp-auth-ico { position: absolute; left: 14px; z-index: 1; bottom: 15px; font-size: .95rem; color: var(--erp-muted); pointer-events: none; transition: color .15s; }
.erp-auth-pass .erp-auth-ico { top: 15px; bottom: auto; }
.erp-auth-field input { height: 48px; padding-left: 40px; background: var(--erp-side); }
.erp-auth-field:focus-within .erp-auth-ico { color: var(--erp-primary); }
.erp-auth-field input:focus { background: var(--erp-input); }
.login-page.erp-auth .btn-primary { height: 48px; font-size: 1rem; background: linear-gradient(145deg, var(--erp-primary), var(--erp-primary-dark)); border: 0; box-shadow: 0 8px 20px rgba(0, 148, 68, .3); transition: transform .15s, box-shadow .15s; }
.login-page.erp-auth .btn-primary:hover { box-shadow: 0 12px 24px rgba(0, 148, 68, .38); }
.login-page.erp-auth .register-section { padding-top: 16px; border-top: 1px solid var(--erp-border); }
@media (max-width: 767.98px) { .erp-auth-card { padding: 28px 20px; box-shadow: none; border: 0; } }

.erp-auth-ico { width: 18px; height: 18px; bottom: 15px; }
.erp-auth-pass .erp-auth-ico { top: 15px; bottom: auto; }

/* Checked checkbox: white tick on the green box (legacy rule made it green-on-green) */
body:not(.erp-x) .checkbox input[type="checkbox"]:checked + label::after, body:not(.erp-x) .checkbox-primary input[type="checkbox"]:checked + label::after { color: #fff; }

/* DataTables "records per page" dropdown: compact menu, soft selected state */
body:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu { min-width: 0 !important; width: max-content !important; min-height: 0 !important; padding: 4px; }
body:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu .inner { min-height: 0 !important; }
body:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu .dropdown-item { min-width: 64px; padding: 6px 12px; border-radius: 6px; }
body:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu .dropdown-item.active, body:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu .dropdown-item.selected { background: var(--erp-primary-soft); color: var(--erp-primary); font-weight: 600; }
body.dark-mode:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu .dropdown-item.active, body.dark-mode:not(.erp-x) .dataTables_length .bootstrap-select .dropdown-menu .dropdown-item.selected { background: rgba(34, 197, 94, .16); color: #4ade80; }

/* Column visibility menu: stays inside the page (right-aligned to the toolbar) and shows which columns are on */
body:not(.erp-x) .dt-buttons .dt-button-collection.dropdown-menu { left: auto !important; right: 0 !important; margin-top: 6px; min-width: 200px; max-width: calc(100vw - 32px); padding: 6px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); }
body:not(.erp-x) .dt-button-collection .dropdown-item.buttons-columnVisibility { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--erp-muted); background: transparent; }
body:not(.erp-x) .dt-button-collection .dropdown-item.buttons-columnVisibility::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid var(--erp-border); border-radius: 5px; background: var(--erp-input); text-align: center; font-size: 12px; line-height: 15px; font-weight: 700; color: #fff; }
body:not(.erp-x) .dt-button-collection .dropdown-item.buttons-columnVisibility.active { color: var(--erp-text); background: transparent; }
body:not(.erp-x) .dt-button-collection .dropdown-item.buttons-columnVisibility.active::before { content: "✓"; background: var(--erp-primary); border-color: var(--erp-primary); }
body:not(.erp-x) .dt-button-collection .dropdown-item.buttons-columnVisibility:hover { background: var(--erp-hover); }

/* Sale list: compact product list (first two items, "+N more" chip) */
.erp-plist { list-style: none; margin: 0; padding: 0; }
.erp-plist li { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 3px 0; line-height: 1.35; }
.erp-plist li:nth-child(n+2) { display: none; }
.erp-plist li + li { border-top: 1px dashed var(--erp-border); }
.erp-plist li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.erp-plist li b { flex: none; min-width: 28px; padding: 1px 8px; font-size: .75rem; font-weight: 600; text-align: center; color: var(--erp-primary); background: var(--erp-primary-soft); border-radius: 999px; }
.erp-plist[data-more]::after { content: "+" attr(data-more) " more"; display: inline-block; margin-top: 4px; padding: 1px 8px; font-size: .72rem; font-weight: 600; color: var(--erp-muted); background: var(--erp-hover); border-radius: 999px; }
body.dark-mode:not(.erp-x) .erp-plist li b { background: rgba(34, 197, 94, .16); color: #4ade80; }

/* Row "Action" dropdown button: never wraps, column keeps room for it */
body:not(.erp-x) table td .btn-group > .dropdown-toggle { white-space: nowrap; }
body:not(.erp-x) table td:last-child:has(> .btn-group > .dropdown-toggle) { min-width: 110px; }

/* GSAP drives the modal entrance on motion-enabled pages, so drop Bootstrap's own slide */
body.erp-motion .modal.fade .modal-dialog { transition: none; transform: none; }
body.erp-motion .animate-bottom { animation: none; }

/* Dashboard charts: monochrome, brand-green tones */
.erp-chart-card { height: 100%; display: flex; flex-direction: column; padding: 20px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 20px; box-shadow: var(--erp-shadow); }
.erp-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.erp-chart-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); }
.erp-chart-tag { padding: 2px 10px; font-size: .65rem; font-weight: 600; color: var(--erp-muted); background: var(--erp-hover); border-radius: 999px; }
.erp-chart-big { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--erp-text); }
.erp-chart-big small { font-size: .8rem; font-weight: 500; color: var(--erp-muted); }
.erp-chart-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 190px; margin: 14px 0; color: var(--erp-muted); }
.erp-chart-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; font: 600 .7rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--erp-muted); border-top: 1px dashed var(--erp-border); }
.erp-chart-foot b { color: var(--erp-text); }
.erp-stroke-0 { stroke: var(--erp-primary); } .erp-stroke-1 { stroke: color-mix(in srgb, var(--erp-primary) 55%, transparent); } .erp-stroke-2 { stroke: color-mix(in srgb, var(--erp-primary) 25%, transparent); }
.erp-fill-0 { background: var(--erp-primary); } .erp-fill-1 { background: color-mix(in srgb, var(--erp-primary) 55%, transparent); } .erp-fill-2 { background: color-mix(in srgb, var(--erp-primary) 25%, transparent); }
.erp-track { stroke: var(--erp-hover); }
.erp-donut { width: 170px; height: 170px; margin: 0 auto 14px; } .erp-gauge { width: 200px; margin: 0 auto 8px; }
.erp-gauge-num { font-size: 26px; font-weight: 700; fill: var(--erp-text); }
.erp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.erp-legend li { display: flex; align-items: center; gap: 6px; } .erp-legend b { color: var(--erp-text); }
.erp-dot { width: 9px; height: 9px; border-radius: 50%; }
.erp-area { width: 100%; height: auto; overflow: visible; }
.erp-line { stroke: var(--erp-primary); } .erp-stop-a { stop-color: var(--erp-primary); stop-opacity: .35; } .erp-stop-b { stop-color: var(--erp-primary); stop-opacity: 0; }
.erp-grid { stroke: var(--erp-border); stroke-dasharray: 3 5; } .erp-axis { font-size: 11px; fill: var(--erp-muted); }
.erp-cross { stroke: var(--erp-muted); stroke-dasharray: 3 3; } .erp-dot-pt { fill: var(--erp-surface); stroke: var(--erp-primary); stroke-width: 3; }
.erp-tip { position: absolute; z-index: 2; padding: 6px 10px; font-size: .75rem; line-height: 1.35; color: #fff; background: #0f1411; border-radius: 10px; transform: translate(-50%, -100%); pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.erp-tip.on { opacity: 1; }
.erp-pills { display: flex; flex-direction: column; gap: 14px; }
.erp-pill-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: .8rem; }
.erp-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--erp-text); }
.erp-pill-track { height: 10px; overflow: hidden; background: var(--erp-hover); border-radius: 999px; }
.erp-pill-track i { display: block; height: 100%; background: var(--erp-primary); border-radius: 999px; }
.erp-pill-row b { min-width: 36px; text-align: right; color: var(--erp-text); }
.erp-heat { width: 100%; max-height: 190px; } .erp-heat rect { transform-box: fill-box; }
.erp-lv-0 { fill: var(--erp-hover); } .erp-lv-1 { fill: color-mix(in srgb, var(--erp-primary) 25%, transparent); } .erp-lv-2 { fill: color-mix(in srgb, var(--erp-primary) 50%, transparent); } .erp-lv-3 { fill: color-mix(in srgb, var(--erp-primary) 75%, transparent); } .erp-lv-4 { fill: var(--erp-primary); }

/* Dashboard redesign: hero band + bento tiles (overrides the first chart pass above) */
.erp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 40px; overflow: hidden; color: #fff; border-radius: 28px; background: radial-gradient(circle at 88% -10%, rgba(120, 255, 180, .28), transparent 45%), linear-gradient(135deg, #00240f 0%, #00532a 55%, #008a41 130%); box-shadow: 0 30px 60px -30px rgba(0, 80, 40, .55); }
.erp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 70%); mask-image: linear-gradient(160deg, #000 10%, transparent 70%); }
.erp-hero > * { position: relative; }
.erp-hero-eyebrow { margin: 0 0 14px; font-size: .85rem; letter-spacing: .02em; color: rgba(255, 255, 255, .65); }
.erp-hero-title { margin: 0; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.erp-hero-title span { color: #7dffb3; }
.erp-hero-lead { margin: 14px 0 0; max-width: 34ch; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.erp-hero-stats { display: flex; margin: 40px 0 0; }
.erp-hero-stats > div { flex: 1; padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .18); }
.erp-hero-stats > div:first-child { padding-left: 0; border-left: 0; }
.erp-hero-stats dt { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.erp-hero-stats dd { margin: 6px 0 0; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.erp-hero .erp-fill-0 { background: #7dffb3; } .erp-hero .erp-fill-1 { background: rgba(125, 255, 179, .55); } .erp-hero .erp-fill-2 { background: rgba(125, 255, 179, .25); }
.erp-hero-chart.erp-chart-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.erp-hero-chart .erp-chart-title, .erp-hero-chart .erp-chart-big { color: #fff; } .erp-hero-chart .erp-chart-sub, .erp-hero-chart .erp-chart-big small, .erp-hero-chart .erp-chart-foot, .erp-hero-chart .erp-axis { color: rgba(255, 255, 255, .6); fill: rgba(255, 255, 255, .6); }
.erp-hero-chart .erp-line { stroke: #7dffb3; } .erp-hero-chart .erp-stop-a { stop-color: #7dffb3; stop-opacity: .4; } .erp-hero-chart .erp-stop-b { stop-color: #7dffb3; stop-opacity: 0; }
.erp-hero-chart .erp-grid { stroke: rgba(255, 255, 255, .14); } .erp-hero-chart .erp-cross { stroke: rgba(255, 255, 255, .4); } .erp-hero-chart .erp-dot-pt { fill: #00532a; stroke: #7dffb3; }
.erp-hero-chart .erp-chart-body { min-height: 170px; margin: 8px 0; color: #fff; }
.erp-hero-chart .erp-tip { color: #00240f; background: #fff; }

.erp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.erp-span-4 { grid-column: span 4; } .erp-span-5 { grid-column: span 5; } .erp-span-7 { grid-column: span 7; }
.erp-bento .erp-chart-card { border-radius: 24px; padding: 26px; }
.erp-chart-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 14px; }
.erp-chart-title { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; text-transform: none; color: var(--erp-text); }
.erp-chart-sub { font-size: .8rem; color: var(--erp-muted); }
.erp-chart-big { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.erp-chart-big small { margin-left: 4px; font-size: .9rem; font-weight: 500; letter-spacing: 0; }
.erp-chart-foot { padding: 0; border: 0; font: 500 .8rem/1.3 inherit; font-family: inherit; color: var(--erp-muted); }
.erp-chart-foot b { font-weight: 600; }

.erp-t-solid { color: #fff; border: 0; background: radial-gradient(circle at 100% 0%, rgba(125, 255, 179, .3), transparent 55%), linear-gradient(160deg, #00a34c, #005f2b); box-shadow: 0 24px 48px -24px rgba(0, 120, 60, .7); }
.erp-t-solid .erp-chart-title, .erp-t-solid .erp-chart-big, .erp-t-solid .erp-legend b, .erp-t-solid .erp-gauge-num { color: #fff; fill: #fff; }
.erp-t-solid .erp-chart-sub, .erp-t-solid .erp-chart-big small, .erp-t-solid .erp-chart-foot, .erp-t-solid .erp-legend, .erp-t-solid .erp-chart-foot b { color: rgba(255, 255, 255, .72); }
.erp-t-solid .erp-stroke-0 { stroke: #fff; } .erp-t-solid .erp-stroke-1 { stroke: rgba(255, 255, 255, .55); } .erp-t-solid .erp-stroke-2 { stroke: rgba(255, 255, 255, .28); }
.erp-t-solid .erp-fill-0 { background: #fff; } .erp-t-solid .erp-fill-1 { background: rgba(255, 255, 255, .55); } .erp-t-solid .erp-fill-2 { background: rgba(255, 255, 255, .28); }
.erp-t-solid .erp-track { stroke: rgba(255, 255, 255, .16); }
.erp-t-tint { background: var(--erp-primary-soft); border-color: transparent; }
body.dark-mode .erp-t-tint { background: rgba(34, 197, 94, .08); border-color: var(--erp-border); }
.erp-t-tint .erp-track { stroke: color-mix(in srgb, var(--erp-primary) 14%, transparent); }

.erp-pills { gap: 18px; }
.erp-pill-row { display: flex; align-items: center; gap: 14px; }
.erp-pill-rank { flex: none; width: 2.2ch; font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--erp-primary) 45%, transparent); }
.erp-pill-main { flex: 1; min-width: 0; }
.erp-pill-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .88rem; }
.erp-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.erp-pill-top b { font-variant-numeric: tabular-nums; }
.erp-pill-track { height: 6px; }
.erp-heat { max-height: none; }
.erp-legend { margin-top: 4px; }

@media (max-width: 1199.98px) { .erp-hero { grid-template-columns: 1fr; padding: 32px; } .erp-span-4 { grid-column: span 6; } .erp-span-5, .erp-span-7 { grid-column: span 12; } }
@media (max-width: 767.98px) { .erp-hero { padding: 24px 20px; border-radius: 22px; } .erp-hero-stats > div { padding: 0 12px; } .erp-bento { gap: 14px; } .erp-span-4, .erp-span-5, .erp-span-7 { grid-column: span 12; } .erp-bento .erp-chart-card { padding: 20px; } }
.erp-hero-main { display: flex; flex-direction: column; }
.erp-hero-stats { margin-top: auto; padding-top: 36px; }
.erp-hero-alerts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.erp-hero-alerts:empty { display: none; }
.erp-hero-alerts span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; backdrop-filter: blur(6px); }
.erp-alert-dot { width: 8px; height: 8px; border-radius: 50%; } .erp-alert-dot.out { background: #ff6b6b; } .erp-alert-dot.low { background: #ffc857; } .erp-alert-dot.ok { background: #7dffb3; }
.erp-hero-chart .erp-chart-foot b { color: rgba(255, 255, 255, .75); }

/* Dashboard product tables: flat cards, no coloured headers, tinted stock pills */
.erp-ptables .card { margin-bottom: 24px; overflow: hidden; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 24px; box-shadow: none; }
.erp-ptables .card-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 6px; background: transparent !important; border: 0; }
.erp-ptables .card-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; color: var(--erp-text) !important; }
.erp-ptables .card-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--erp-primary); box-shadow: 0 0 0 4px var(--erp-primary-soft); }
.erp-ptables .bg-info .card-title::before { background: #0ea5a4; box-shadow: 0 0 0 4px rgba(14, 165, 164, .14); }
.erp-ptables .bg-warning .card-title::before { background: #f5a524; box-shadow: 0 0 0 4px rgba(245, 165, 36, .16); }
.erp-ptables .card-header .btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--erp-muted); background: transparent; border: 1px solid var(--erp-border); border-radius: 50%; }
.erp-ptables .card-header .btn:hover { color: var(--erp-primary); border-color: var(--erp-primary); background: var(--erp-primary-soft); }
.erp-ptables .card-body > .p-2 { padding: 10px 26px 14px !important; border: 0 !important; }
.erp-ptables .input-group { flex-wrap: nowrap; background: var(--erp-side); border: 1px solid var(--erp-border); border-radius: 999px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.erp-ptables .input-group:focus-within { border-color: var(--erp-primary); box-shadow: var(--erp-focus); }
.erp-ptables .input-group .form-control { height: 40px; padding-left: 18px; background: transparent; border: 0; box-shadow: none; }
.erp-ptables .input-group .input-group-text { padding-right: 16px; color: var(--erp-muted); background: transparent; border: 0; }
.erp-ptables .table-responsive { padding: 0 14px; }
.erp-ptables table { margin: 0; background: transparent; }
.erp-ptables thead th { position: sticky; top: 0; z-index: 1; padding: 12px 12px; font-size: .75rem; font-weight: 600; color: var(--erp-muted); background: var(--erp-surface); border: 0; border-bottom: 1px solid var(--erp-border); }
.erp-ptables tbody td { padding: 14px 12px; font-size: .88rem; color: var(--erp-text); border: 0; border-bottom: 1px solid color-mix(in srgb, var(--erp-border) 55%, transparent); vertical-align: middle; font-variant-numeric: tabular-nums; }
.erp-ptables tbody td:first-child { font-weight: 600; }
.erp-ptables tbody td:nth-child(2), .erp-ptables tbody td:nth-child(5) { color: var(--erp-muted); }
.erp-ptables .table-striped tbody tr:nth-of-type(odd), .erp-ptables .table-striped tbody tr { background: transparent; }
.erp-ptables tbody tr { transition: background .15s; }
.erp-ptables tbody tr:hover { background: var(--erp-primary-soft); }
body.dark-mode .erp-ptables tbody tr:hover { background: rgba(34, 197, 94, .07); }
.erp-ptables tbody tr:last-child td { border-bottom: 0; }
.erp-ptables .badge { display: inline-flex; align-items: center; gap: 6px; min-width: 56px; justify-content: center; padding: 5px 12px; font-size: .78rem; font-weight: 600; border-radius: 999px; }
.erp-ptables .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.erp-ptables .badge.bg-success { color: #0a7a3c; background: rgba(0, 148, 68, .12) !important; }
.erp-ptables .badge.bg-warning { color: #a86a00; background: rgba(245, 165, 36, .18) !important; }
.erp-ptables .badge.bg-danger { color: #c62828; background: rgba(229, 57, 53, .12) !important; }
body.dark-mode .erp-ptables .badge.bg-success { color: #4ade80; } body.dark-mode .erp-ptables .badge.bg-warning { color: #fbbf24; } body.dark-mode .erp-ptables .badge.bg-danger { color: #ff8a80; }
.erp-ptables .card-footer { padding: 14px 26px 20px !important; background: transparent; border-top: 1px dashed var(--erp-border); }
.erp-ptables .pagination { gap: 4px; }
.erp-ptables .page-link { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--erp-text); background: transparent; border: 1px solid var(--erp-border); border-radius: 10px !important; }
.erp-ptables .page-item.active .page-link { color: #fff; background: var(--erp-primary); border-color: var(--erp-primary); }
.erp-ptables .page-item.disabled .page-link { opacity: .45; }
.erp-ptables .card-footer, .erp-ptables .card-body { background: transparent !important; }
.erp-tip { border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

/* Forms & controls pass (ui-ux-pro-max audit): 3:1 field borders, real placeholders, clear labels, visible keyboard focus */
:root { --erp-field-border: #8d9791; }
body.dark-mode { --erp-field-border: #5f6e66; }
body:not(.erp-x) section form .form-control, body:not(.erp-x) section form .bootstrap-select > .dropdown-toggle, body:not(.erp-x) section form .custom-select, body:not(.erp-x) .modal form .form-control, body:not(.erp-x) .modal form .bootstrap-select > .dropdown-toggle { border-color: var(--erp-field-border); }
body:not(.erp-x) .form-control::placeholder { color: var(--erp-muted); opacity: 1; }
body:not(.erp-x) .form-control[readonly], body:not(.erp-x) .form-control:disabled { color: var(--erp-muted); background: var(--erp-hover); cursor: not-allowed; }
body:not(.erp-x) form .form-group { margin-bottom: 1.15rem; }
body:not(.erp-x) form .form-group > label, body:not(.erp-x) form label.control-label, body:not(.erp-x) form .form-group > label > strong { display: block; margin-bottom: 7px; font-size: .86rem; font-weight: 600; color: var(--erp-text); }
body:not(.erp-x) form input[type="checkbox"]:not(.dt-checkboxes):not(.custom-control-input), body:not(.erp-x) form input[type="radio"]:not(.custom-control-input) { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; cursor: pointer; }
body:not(.erp-x) section form button[type="submit"], body:not(.erp-x) .modal form button[type="submit"], body:not(.erp-x) section form input[type="submit"] { min-height: 44px; padding: 0 28px; font-weight: 600; border-radius: var(--erp-radius); }
body:not(.erp-x) section .card-header { padding: 20px 26px; border-bottom: 1px solid var(--erp-border); background: transparent; }
body:not(.erp-x) section .card-header h4, body:not(.erp-x) section .card-header h3, body:not(.erp-x) section .card-header h5 { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
body:not(.erp-x) section .card-body { padding: 24px 26px; }
body:not(.erp-x) section .card-body > p.italic { margin-bottom: 20px; font-style: normal; font-size: .8rem; color: var(--erp-muted); }
body:not(.erp-x) .form-control.is-invalid, body:not(.erp-x) .has-error .form-control { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
body:not(.erp-x) .invalid-feedback, body:not(.erp-x) .has-error .form-text { display: block; margin-top: 6px; font-size: .8rem; color: #dc2626; }
body:not(.erp-x) a:focus-visible, body:not(.erp-x) button:focus-visible, body:not(.erp-x) .btn:focus-visible, body:not(.erp-x) .dropdown-item:focus-visible, body:not(.erp-x) [tabindex]:focus-visible, body:not(.erp-x) input[type="checkbox"]:focus-visible, body:not(.erp-x) input[type="radio"]:focus-visible { outline: 2px solid var(--erp-primary) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
body:not(.erp-x) form .form-group > label > strong { display: inline; margin: 0; font: inherit; }
body:not(.erp-x) form .form-group > label:has(> input[type="checkbox"], > input[type="radio"]) { display: flex; align-items: center; margin-bottom: 0; cursor: pointer; }
body:not(.erp-x) form label:has(> input[type="checkbox"]:not(.dt-checkboxes)), body:not(.erp-x) form label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; }
body:not(.erp-x) form label:has(> input[type="checkbox"]) > *, body:not(.erp-x) form label:has(> input[type="radio"]) > * { margin-bottom: 0; }
body:not(.erp-x) form .form-group.d-inline-block { display: inline-flex !important; align-items: center; margin-top: 8px; }
body:not(.erp-x) form .form-group.d-inline-block > input, body:not(.erp-x) form .form-group.d-inline-block > label { display: inline-block; margin: 0 !important; }
body:not(.erp-x) form .form-group.d-inline-block > label { cursor: pointer; }
body:not(.erp-x) form input[type="checkbox"]:not(.dt-checkboxes) + label, body:not(.erp-x) form input[type="radio"] + label { display: inline-block !important; margin: 0 !important; vertical-align: middle; cursor: pointer; }
body:not(.erp-x) form .form-group.d-inline-block > input[type="checkbox"], body:not(.erp-x) form .form-group.d-inline-block > input[type="radio"] { margin-right: 8px !important; }

/* Modal forms pass (ui-ux-pro-max): header/body rhythm, neutral Close, styled selects and file input */
body:not(.erp-x) .modal-header { padding: 20px 26px; border-bottom: 1px solid var(--erp-border); }
body:not(.erp-x) .modal-title { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
body:not(.erp-x) .modal-body { padding: 24px 26px; }
body:not(.erp-x) .modal-body p.italic, body:not(.erp-x) .modal-body > form > p.italic { margin-bottom: 20px; font-style: normal; font-size: .8rem; color: var(--erp-muted); }
body:not(.erp-x) .modal-footer { gap: 10px; padding: 16px 26px; border-top: 1px solid var(--erp-border); }
body:not(.erp-x) select.form-control:not([multiple]), body:not(.erp-x) .custom-select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238a958f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
body:not(.erp-x) .input-group > select.form-control { border-color: var(--erp-field-border); }
body:not(.erp-x) .bootstrap-select > .dropdown-toggle.bs-placeholder, body:not(.erp-x) .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner { color: var(--erp-muted); font-weight: 400; }
body:not(.erp-x) input[type="file"] { width: 100%; padding: 8px 10px; color: var(--erp-muted); background: var(--erp-input); border: 1px dashed var(--erp-field-border); border-radius: var(--erp-radius); cursor: pointer; }
body:not(.erp-x) input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; font-weight: 600; color: var(--erp-primary); background: var(--erp-primary-soft); border: 0; border-radius: 8px; cursor: pointer; transition: background .15s; }
body:not(.erp-x) input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--erp-primary) 18%, transparent); }
body:not(.erp-x) input[type="file"] { height: auto; min-height: 52px; }

/* Add Sale / Add Purchase / list-top buttons / modal action buttons (ui-ux-pro-max pass) */
body:not(.erp-x) section > .container-fluid > .btn, body:not(.erp-x) section > .container-fluid > a.btn { margin: 0 10px 12px 0; }
body:not(.erp-x) #product-results-container { top: 100%; margin-top: 6px; padding: 6px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius); box-shadow: 0 16px 36px rgba(16, 24, 40, .16); }
body:not(.erp-x) #product-results-container:not(:has(.product-img)) { display: none; }
body:not(.erp-x) #product-results-container .product-img { padding: 9px 12px; color: var(--erp-text); border-radius: 8px; }
body:not(.erp-x) #product-results-container .product-img:hover { color: var(--erp-primary); background: var(--erp-primary-soft); }
body:not(.erp-x) .input-group.pos:has(> #product-search-input) .form-control { height: 40px; }
body:not(.erp-x) .input-group-append > .btn, body:not(.erp-x) .input-group-prepend > .btn { min-height: 40px; }
body:not(.erp-x) table.totals { margin: 8px 0 0; border: 0; border-collapse: separate; border-spacing: 10px 0; background: transparent; }
body:not(.erp-x) table.totals td { padding: 14px 18px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 14px; }
body:not(.erp-x) table.totals td strong { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 600; color: var(--erp-muted); }
body:not(.erp-x) table.totals td .pull-right { float: none !important; display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--erp-text); }
body:not(.erp-x) table.totals td:last-child { background: var(--erp-primary); border-color: var(--erp-primary); }
body:not(.erp-x) table.totals td:last-child strong, body:not(.erp-x) table.totals td:last-child .pull-right { color: #fff; }
body:not(.erp-x) .modal-footer { position: sticky; bottom: 0; z-index: 5; justify-content: flex-end; background: var(--erp-surface); border-radius: 0 0 var(--erp-radius-lg) var(--erp-radius-lg); }
body:not(.erp-x) .modal-footer .btn, body:not(.erp-x) .modal form button[type="submit"] { min-width: 116px; min-height: 46px; padding: 0 28px; font-size: .95rem; font-weight: 600; border-radius: 12px; transition: background .15s, box-shadow .15s, transform .15s; }
body:not(.erp-x) .modal-footer .btn-primary, body:not(.erp-x) .modal form button[type="submit"].btn-primary { color: #fff; background: var(--erp-primary); border: 1px solid var(--erp-primary); box-shadow: 0 6px 16px rgba(0, 148, 68, .28); }
body:not(.erp-x) .modal-footer .btn-primary:hover, body:not(.erp-x) .modal form button[type="submit"].btn-primary:hover { background: var(--erp-primary-dark); border-color: var(--erp-primary-dark); box-shadow: 0 10px 22px rgba(0, 148, 68, .34); }
body:not(.erp-x) .btn:disabled, body:not(.erp-x) .btn.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

/* Label followed by a help icon: keep both on one line so the input lines up with its neighbours */
body:not(.erp-x) form .form-group > label:has(+ i.dripicons-question) { display: inline-block; margin-right: 6px; }
body:not(.erp-x) form .form-group > label + i.dripicons-question { display: inline-block; margin-bottom: 7px; font-size: .9rem; vertical-align: middle; cursor: help; }

/* Matching product search bars (Add Sale / Add Purchase), uniform 40px field height, totals bar pinned to the bottom of the viewport */
body:not(.erp-x) .input-group.pos:has(> #product-search-input), body:not(.erp-x) .search-box.input-group { position: relative; flex-wrap: nowrap; }
body:not(.erp-x) .input-group.pos:has(> #product-search-input) > .btn, body:not(.erp-x) .search-box.input-group > .btn { position: absolute; z-index: 3; top: 0; left: 0; order: -1; width: 44px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--erp-muted); background: transparent !important; border: 0 !important; box-shadow: none; transform: none; }
body:not(.erp-x) .input-group.pos:has(> #product-search-input) > .btn:hover, body:not(.erp-x) .search-box.input-group > .btn:hover { color: var(--erp-primary); }
body:not(.erp-x) .input-group.pos:has(> #product-search-input) > .btn svg, body:not(.erp-x) .input-group.pos:has(> #product-search-input) > .btn svg * { fill: currentColor; }
body:not(.erp-x) .input-group.pos:has(> #product-search-input) > .form-control, body:not(.erp-x) .search-box.input-group > .form-control { width: 100%; height: 40px; padding-left: 44px; border-radius: var(--erp-radius) !important; border-color: var(--erp-field-border); }
body:not(.erp-x) input[type="file"] { height: 40px; min-height: 40px; padding: 4px 8px; line-height: 30px; }
body:not(.erp-x) input[type="file"]::file-selector-button { margin-right: 12px; padding: 4px 14px; }
body:not(.erp-x) section > .container-fluid:has(> .table-responsive > table.totals) { position: sticky; bottom: 0; z-index: 20; padding-top: 12px; padding-bottom: 14px; background: var(--erp-bg); border-top: 1px solid var(--erp-border); }
body:not(.erp-x) section > .container-fluid:has(> .table-responsive > table.totals) table.totals { margin: 0; }
@media (max-width: 767.98px) { body:not(.erp-x) table.totals td { padding: 9px 12px; } body:not(.erp-x) table.totals td .pull-right { font-size: .95rem; } }

/* Add Purchase: input fields on the left, sticky order summary on the right */
body:not(.erp-x) .erp-summary { position: sticky; top: 84px; padding: 22px; margin-top: 1.9rem; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 20px; box-shadow: var(--erp-shadow); }
body:not(.erp-x) .erp-summary-title { margin: 0 0 14px; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--erp-text); }
body:not(.erp-x) .erp-summary-list { margin: 0; }
body:not(.erp-x) .erp-summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--erp-border); }
body:not(.erp-x) .erp-summary-list dt { font-size: .85rem; font-weight: 500; color: var(--erp-muted); }
body:not(.erp-x) .erp-summary-list dd { margin: 0; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--erp-text); }
body:not(.erp-x) .erp-summary-list > .erp-summary-total { margin-top: 14px; padding: 16px 18px; background: var(--erp-primary); border: 0; border-radius: 14px; }
body:not(.erp-x) .erp-summary-list > .erp-summary-total dt { color: rgba(255, 255, 255, .8); }
body:not(.erp-x) .erp-summary-list > .erp-summary-total dd { font-size: 1.5rem; color: #fff; }
@media (max-width: 991.98px) { body:not(.erp-x) .erp-summary { position: static; margin-top: 8px; } }

/* File input: button sits inside the 40px field */
body:not(.erp-x) input[type="file"] { display: flex; align-items: center; height: 40px; min-height: 40px; padding: 0 6px; line-height: 40px; }
body:not(.erp-x) input[type="file"]::file-selector-button { height: 28px; margin: 0 12px 0 0; padding: 0 14px; line-height: 28px; }

/* Product details modal redesign */
#product-details .modal-dialog { max-width: 1080px; }
#product-details .modal-content { border-radius: 28px; overflow: hidden; }
#product-details .modal-header { padding: 22px 32px; }
#product-details .modal-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
#product-details #print-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; font-weight: 600; color: var(--erp-text); background: transparent; border: 1px solid var(--erp-field-border); border-radius: 999px; }
#product-details #print-btn:hover { color: var(--erp-primary); border-color: var(--erp-primary); background: var(--erp-primary-soft); }
#product-details .modal-header .close { width: 40px; height: 40px; margin: 0 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 1; }
#product-details .modal-header .close:hover { background: var(--erp-hover); }
#product-details .modal-body { padding: 28px 32px 32px; }
#product-details #slider-content { padding-right: 28px; }
#product-details #slider-content .carousel, #product-details #slider-content > img { overflow: hidden; background: radial-gradient(circle at 50% 0%, var(--erp-primary-soft), var(--erp-side) 70%); border: 1px solid var(--erp-border); border-radius: 24px; }
#product-details #slider-content img { max-height: 380px; padding: 18px; background: transparent; border: 0; border-radius: 0; }
.pd-hero { padding-bottom: 20px; border-bottom: 0; }
.pd-name { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.pd-code { display: inline-block; margin-top: 12px; padding: 4px 12px; font: 600 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--erp-muted); background: var(--erp-hover); border-radius: 999px; }
.pd-tags { margin-top: 16px; }
.pd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.pd-item { grid-column: span 2; gap: 6px; padding: 16px 18px; background: var(--erp-side); border: 1px solid transparent; border-radius: 18px; transition: border-color .15s, transform .15s; }
.pd-item:hover { border-color: var(--erp-border); }
.pd-item.pd-wide { grid-column: span 3; }
.pd-item span { font-size: .78rem; font-weight: 500; }
.pd-item strong { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pd-item.pd-key { background: var(--erp-primary-soft); }
.pd-item.pd-key strong { font-size: 1.35rem; color: var(--erp-primary); }
body.dark-mode .pd-item.pd-key { background: rgba(34, 197, 94, .1); }
.pd-notes { margin-top: 14px; border-radius: 0 14px 14px 0; }
#product-details h5:not(.modal-title) { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
#product-details h5:not(.modal-title)::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--erp-primary); box-shadow: 0 0 0 4px var(--erp-primary-soft); }
#product-details .table-bordered { border-radius: 18px; }
#product-details .table-bordered thead th { padding: 14px 18px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--erp-muted); background: var(--erp-side); }
#product-details .table-bordered td { padding: 16px 18px; font-variant-numeric: tabular-nums; }
#product-details .table-hover tbody tr:hover { background: var(--erp-primary-soft); }
@media (max-width: 991.98px) { #product-details #slider-content { padding-right: 15px; margin-bottom: 20px; } .pd-item, .pd-item.pd-wide { grid-column: span 3; } }
@media (max-width: 575.98px) { #product-details .modal-body { padding: 18px; } #product-details .modal-header { padding: 16px 18px; } .pd-item, .pd-item.pd-wide { grid-column: span 6; } }

/* Standard form actions: Cancel (danger) then Save/Update/Submit (primary), same size everywhere, right-aligned */
:root { --erp-danger: #e5484d; --erp-danger-dark: #c93a3f; }
body:not(.erp-x) .erp-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--erp-border); }
body:not(.erp-x) .erp-form-actions .btn, body:not(.erp-x) .modal-footer .btn { min-width: 116px; min-height: 46px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 600; border-radius: 12px; transition: background .15s, box-shadow .15s, transform .15s; }
body:not(.erp-x) .erp-form-actions .btn-primary, body:not(.erp-x) .modal-footer .btn-primary { order: 2; color: #fff; background: var(--erp-primary); border: 1px solid var(--erp-primary); box-shadow: 0 6px 16px rgba(0, 148, 68, .28); }
body:not(.erp-x) .erp-form-actions .btn-primary:hover, body:not(.erp-x) .modal-footer .btn-primary:hover { background: var(--erp-primary-dark); border-color: var(--erp-primary-dark); box-shadow: 0 10px 22px rgba(0, 148, 68, .34); }
body:not(.erp-x) .erp-form-actions .btn-danger, body:not(.erp-x) .modal-footer .btn-danger { order: 1; color: #fff; background: var(--erp-danger); border: 1px solid var(--erp-danger); box-shadow: 0 6px 16px rgba(229, 72, 77, .24); }
body:not(.erp-x) .erp-form-actions .btn-danger:hover, body:not(.erp-x) .modal-footer .btn-danger:hover { color: #fff; background: var(--erp-danger-dark); border-color: var(--erp-danger-dark); box-shadow: 0 10px 22px rgba(229, 72, 77, .32); }
@media (max-width: 575.98px) { body:not(.erp-x) .erp-form-actions { flex-direction: column-reverse; align-items: stretch; } body:not(.erp-x) .erp-form-actions .btn { width: 100%; } }
body:not(.erp-x) .erp-req { margin-left: 1px; font-weight: 700; color: var(--erp-danger); }

/* Searchable selects (bootstrap-select): single border on the button, menu as wide as the field, tidy search box */
body:not(.erp-x) .bootstrap-select.form-control { padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; height: 40px; }
body:not(.erp-x) .bootstrap-select.show > .dropdown-toggle, body:not(.erp-x) .bootstrap-select > .dropdown-toggle:focus { border-color: var(--erp-primary) !important; box-shadow: var(--erp-focus) !important; outline: 0 !important; }
body:not(.erp-x) .bootstrap-select > .dropdown-menu { min-width: 100% !important; margin-top: 6px; padding: 6px; }
body:not(.erp-x) .bootstrap-select .bs-searchbox { padding: 2px 2px 8px; }
body:not(.erp-x) .bootstrap-select .bs-searchbox .form-control { height: 38px; padding: 0 12px; background: var(--erp-side); border: 1px solid var(--erp-border); border-radius: 10px; }
body:not(.erp-x) .bootstrap-select .bs-searchbox .form-control:focus { border-color: var(--erp-primary); box-shadow: var(--erp-focus); }
body:not(.erp-x) .bootstrap-select .dropdown-menu .dropdown-item { padding: 8px 12px; border-radius: 8px; }

/* Skeletons: shown in place of content that is still loading (tables, dashboard charts) */
@keyframes erp-shimmer { to { background-position: -200% 0; } }
.erp-skel-bar, .erp-chart-big:empty::before, .erp-chart-body:empty::before { display: block; background: linear-gradient(90deg, var(--erp-hover) 25%, color-mix(in srgb, var(--erp-border) 70%, var(--erp-hover)) 50%, var(--erp-hover) 75%); background-size: 200% 100%; animation: erp-shimmer 1.3s linear infinite; }
.erp-skel-bar { height: 14px; width: 70%; border-radius: 7px; }
tr.erp-skel td:first-child .erp-skel-bar { width: 22px; height: 22px; border-radius: 6px; }
tr.erp-skel td:nth-child(3n) .erp-skel-bar { width: 85%; } tr.erp-skel td:nth-child(4n) .erp-skel-bar { width: 50%; } tr.erp-skel td:last-child .erp-skel-bar { width: 64px; height: 30px; border-radius: 10px; }
table.dataTable.erp-loading tbody { opacity: .45; transition: opacity .15s; }
.dataTables_processing { display: none !important; }
.erp-chart-big:empty::before { content: ""; width: 96px; height: 46px; border-radius: 10px; }
.erp-chart-foot { min-height: 13px; }
.erp-chart-body:empty::before { content: ""; width: 100%; height: 244px; border-radius: 16px; }
#chart-monthly .erp-chart-body:empty::before { height: 274px; }
#chart-categories .erp-chart-body:empty::before, #chart-heat .erp-chart-body:empty::before { height: 308px; }
.erp-hero .erp-chart-big:empty::before, .erp-hero .erp-chart-body:empty::before { background: linear-gradient(90deg, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .06) 75%); background-size: 200% 100%; }
.erp-t-solid .erp-chart-big:empty::before, .erp-t-solid .erp-chart-body:empty::before { background: linear-gradient(90deg, rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, .24) 50%, rgba(255, 255, 255, .1) 75%); background-size: 200% 100%; }

/* Dashboard filter (warehouse + date range): readable in light and dark */
body:not(.erp-x) .filter-toggle { display: inline-flex !important; align-items: center; gap: 10px; float: right; margin-top: 12px; }
body:not(.erp-x) .filter-toggle .dropdown-toggle { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--erp-text); background: var(--erp-surface); border: 1px solid var(--erp-field-border); border-radius: 999px; }
body:not(.erp-x) .filter-toggle .dropdown-toggle:hover, body:not(.erp-x) .filter-toggle .show > .dropdown-toggle { color: var(--erp-primary); background: var(--erp-primary-soft); border-color: var(--erp-primary); }
body:not(.erp-x) .filter-toggle .dropdown-menu { min-width: 190px; margin-top: 8px; padding: 6px; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 16px; box-shadow: 0 18px 40px rgba(16, 24, 40, .16); }
body:not(.erp-x) .filter-toggle .dropdown-menu .date-btn.date-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 10px 14px; font-size: .88rem; font-weight: 500; text-align: left; color: var(--erp-text) !important; background: transparent !important; border: 0 !important; border-radius: 10px; }
body:not(.erp-x) .filter-toggle .dropdown-menu .date-btn.date-btn:hover { background: var(--erp-hover) !important; }
body:not(.erp-x) .filter-toggle .dropdown-menu .date-btn.date-btn.active { font-weight: 650; color: var(--erp-primary) !important; background: var(--erp-primary-soft) !important; }
body:not(.erp-x) .filter-toggle .dropdown-menu .date-btn.active::after { content: "✓"; margin-left: auto; font-weight: 700; }
body.dark-mode:not(.erp-x) .filter-toggle .dropdown-menu .date-btn.date-btn.active { color: #4ade80 !important; background: rgba(34, 197, 94, .14) !important; }
/* Dark-mode pagination: clearer idle / hover / active / disabled states */
body.dark-mode:not(.erp-x) .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link { background: color-mix(in srgb, var(--erp-text) 6%, transparent) !important; border-color: color-mix(in srgb, var(--erp-text) 18%, transparent) !important; color: var(--erp-text) !important; }
body.dark-mode:not(.erp-x) .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover { background: color-mix(in srgb, var(--erp-primary) 18%, transparent) !important; border-color: var(--erp-primary) !important; color: #fff !important; }
body.dark-mode:not(.erp-x) .dataTables_paginate .page-item.active .page-link { background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; color: #fff !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-primary) 25%, transparent); }
body.dark-mode:not(.erp-x) .dataTables_paginate .page-item.disabled .page-link { background: transparent !important; border-color: color-mix(in srgb, var(--erp-text) 10%, transparent) !important; color: var(--erp-muted) !important; opacity: .5; }
body.dark-mode:not(.erp-x) .dataTables_paginate .page-link:focus-visible { outline: 2px solid var(--erp-primary); outline-offset: 2px; box-shadow: none; }

/* Details modals: Print + close share one toolbar strip at the top right */
body:not(.erp-x) .modal-content > .container:has(> .row > .col-md-6.d-print-none) { position: relative; padding-top: 60px !important; }
body:not(.erp-x) .modal-content > .container > .row > .col-md-6.d-print-none { position: absolute; top: 12px; width: auto; max-width: none; flex: none; padding: 0; }
body:not(.erp-x) .modal-content > .container > .row > .col-md-6.d-print-none:nth-child(1) { right: 70px; }
body:not(.erp-x) .modal-content > .container > .row > .col-md-6.d-print-none:nth-child(2) { right: 20px; }
body:not(.erp-x) .modal-content :is(#print-btn, #sale-print-btn, #quotation-print-btn, #return-print-btn) { display: inline-flex; align-items: center; gap: 6px; height: 38px; margin: 0; padding: 0 16px; font-weight: 600; color: var(--erp-text); background: transparent; border: 1px solid var(--erp-field-border); border-radius: 999px; }
body:not(.erp-x) .modal-content :is(#print-btn, #sale-print-btn, #quotation-print-btn, #return-print-btn):hover { color: var(--erp-primary); border-color: var(--erp-primary); background: var(--erp-primary-soft); }
body:not(.erp-x) .modal-content .d-print-none > .close { width: 38px; height: 38px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 1; float: none; }
body:not(.erp-x) .modal-content .d-print-none > .close:hover { background: var(--erp-hover); }

/* Product details: stock number is red at or below the alert quantity, green otherwise */
.pd-item.pd-key.pd-low strong { color: var(--erp-danger); }
body.dark-mode .pd-item.pd-key.pd-low { background: rgba(239, 68, 68, .12); }
.pd-item.pd-key.pd-low { background: color-mix(in srgb, var(--erp-danger) 10%, transparent); }

/* Customer / supplier detail column: bold name, one icon-led line per contact detail */
.erp-contact { display: flex; flex-direction: column; gap: 3px; min-width: 220px; line-height: 1.35; }
.erp-contact strong { font-size: .95rem; font-weight: 700; color: var(--erp-text); }
.erp-contact span { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--erp-muted); }
.erp-contact i { flex: none; width: 14px; margin-top: 2px; text-align: center; font-size: 13px; color: var(--erp-primary); }

/* Same toolbar for the col-md-3 / col-md-6 / col-md-3 header variant (customer, stock count) */
body:not(.erp-x) .modal-content .container:has(> .row > .col-md-3 > .btn[id$="print-btn"]) { position: relative; padding-top: 60px !important; }
body:not(.erp-x) .modal-content .row > .col-md-3:has(> .btn[id$="print-btn"]), body:not(.erp-x) .modal-content .row > .col-md-3:has(> .close) { position: absolute; top: 12px; width: auto; max-width: none; flex: none; padding: 0; }
body:not(.erp-x) .modal-content .row > .col-md-3:has(> .btn[id$="print-btn"]) { right: 70px; }
body:not(.erp-x) .modal-content .row > .col-md-3:has(> .close) { right: 20px; }
body:not(.erp-x) .modal-content .row:has(> .col-md-3 > .btn[id$="print-btn"]) > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
body:not(.erp-x) .modal-content .col-md-3 > .close { width: 38px; height: 38px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 1; float: none; }

/* Dashboard filter: the warehouse picker is hidden, so its lone pin icon goes too */
body:not(.erp-x) .filter-toggle .d-flex > i.dripicons-location { display: none; }

tr.erp-skel td { padding: 22px 12px !important; border-bottom: 1px solid var(--erp-border); }

/* Page boot: a card the size of the table's last real height holds the spot until DataTables is built */
@keyframes erp-pulse { 50% { opacity: .55; } }
/* Page boot: the real table header shows at once; only the rows are a skeleton, sized from the last real table height */
html.erp-boot body:not(.erp-x) section > .table-responsive > table.table:not(.dataTable) { margin: 82px 24px 0; width: calc(100% - 48px); }
html.erp-boot body:not(.erp-x) section > .table-responsive > table.table:not(.dataTable) tbody { display: none; }
html.erp-boot body:not(.erp-x) section > .table-responsive:has(> table.table:not(.dataTable))::after {
    content: ""; display: block; margin: 0 24px; height: calc(var(--erp-table-h, 640px) - 82px - 44px); animation: erp-pulse 1.2s ease-in-out infinite;
    --b: linear-gradient(transparent 28px, color-mix(in srgb, var(--erp-text, #888) 9%, transparent) 28px 42px, transparent 42px);
    background:
        var(--b) 2% 0 / 14% 70px repeat-y,
        var(--b) 38% 0 / 24% 70px repeat-y,
        var(--b) 80% 0 / 10% 70px repeat-y,
        repeating-linear-gradient(to bottom, transparent 0 69px, var(--erp-border) 69px 70px);
}

/* Invoice preview modal */
#invoice-preview .modal-content { overflow: hidden; }
#invoice-preview .modal-header { display: flex; align-items: center; padding: 16px 22px; }
#invoice-preview #invoice-print { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; font-weight: 600; color: var(--erp-text); background: transparent; border: 1px solid var(--erp-field-border); border-radius: 999px; }
#invoice-preview #invoice-print:hover { color: var(--erp-primary); border-color: var(--erp-primary); background: var(--erp-primary-soft); }
#invoice-preview .close { width: 40px; height: 40px; margin: 0 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 1; }
#invoice-preview .close:hover { background: var(--erp-hover); }
#invoice-preview .modal-dialog { max-width: 940px; }

/* Table footer (totals row) follows the theme */
body:not(.erp-x) table.dataTable tfoot th, body:not(.erp-x) table.dataTable tfoot td, body:not(.erp-x) .tfoot.active th { padding: 12px 10px; font-weight: 700; color: var(--erp-text); background: var(--erp-side) !important; border-top: 1px solid var(--erp-border) !important; border-bottom: 0; }
body:not(.erp-x) table.dataTable tfoot th:first-child { border-radius: 0 0 0 12px; }
body:not(.erp-x) table.dataTable tfoot th:last-child { border-radius: 0 0 12px 0; }

/* List tables clip to one rounded shape (header and footer corners included) */
body:not(.erp-x) section table.dataTable { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; }
body:not(.erp-x) table.dataTable tfoot th:first-child, body:not(.erp-x) table.dataTable tfoot th:last-child { border-radius: 0; }