/* 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: erp-fade .3s ease-out backwards; }
body:not(.erp-x) .animate-bottom .card { animation: erp-rise .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.animate-bottom .row > [class*="col-"]:nth-child(2) .card { animation-delay: .06s; }
.animate-bottom .row > [class*="col-"]:nth-child(3) .card { animation-delay: .12s; }
.animate-bottom .row > [class*="col-"]:nth-child(4) .card { animation-delay: .18s; }
@keyframes erp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes erp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }




/* ---------- 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: swap; }
[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 { transform: translateY(-1px); 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; }