/* =====================================================================
   LogiPulse Design System  ·  logipulse.css
   ---------------------------------------------------------------------
   One consistent premium theme for the whole application. Loaded LAST
   (after the Vuexy/Bootstrap base) so it owns every visual decision.
   Structure:
     01 Tokens (light + dark)          08 Tables & DataTables
     02 Base & typography              09 Tabs (primary + segmented)
     03 App shell (sidebar/topbar)     10 Badges, alerts, chips
     04 Page header                    11 Modals, drawers, dropdowns
     05 Cards & sections               12 Vendor widgets (select2, flatpickr,
     06 Buttons                           jQuery UI, SweetAlert2, summernote)
     07 Forms                          13 States (loading/empty/error)
                                       14 Utilities · 15 Mobile · 16 Print
   ===================================================================== */

/* ============================ 01 TOKENS ============================ */
:root {
  --lp-font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lp-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* brand — LogiPulse (from the logo): navy #0C2D5E · sky #7EC8E3 · orange #E8852B */
  --lp-navy: #0c2d5e;
  --lp-navy-2: #0a2248;
  --lp-sky: #7ec8e3;
  --lp-orange: #e8852b;
  --lp-orange-soft: #fdf0e3;
  --lp-p-50:  #ebf5fb;
  --lp-p-100: #d6ebf7;
  --lp-p-200: #acd5ef;
  --lp-p-300: #7ec8e3;
  --lp-p-500: #2b8ad6;   /* BN Tech blue */
  --lp-p-600: #1f74bd;
  --lp-p-700: #145a99;
  --lp-bn-yellow: #ffc300; /* BN Tech accent */
  --lp-primary: var(--lp-p-600);
  --lp-primary-hover: var(--lp-p-700);
  --lp-primary-soft: var(--lp-p-50);
  --lp-primary-soft-2: var(--lp-p-100);
  --lp-ring: 0 0 0 3px rgba(26, 111, 176, .18);

  /* neutrals */
  --lp-bg: #f3f6fa;
  --lp-surface: #ffffff;
  --lp-surface-2: #f9fafb;
  --lp-surface-3: #f2f4f7;
  --lp-hover: #f5f7fb;
  --lp-border: #d3ebf5;      /* cards & panels: soft sky */
  --lp-border-2: #a9d8ea;    /* inputs: sky */
  --lp-text: #0e1d38;
  --lp-text-2: #3f4a5e;
  --lp-text-3: #667085;
  --lp-text-4: #98a2b3;
  --lp-readonly: #f6f7f9;
  /* separators & table lines — light brand blue so rows/sections read clearly */
  --lp-line: #7ec8e3;        /* LogiPulse sky blue (logo "LOGI") */
  --lp-line-soft: #bfe3f1;   /* same blue, lighter — row lines */
  --lp-thead: #eaf6fb;
  --lp-thead-ink: #0c2d5e;   /* LogiPulse navy */
  --lp-zebra: #f6fbfd;

  /* semantic */
  --lp-success: #0f9d6b; --lp-success-soft: #e7f7f0; --lp-success-ink: #0a6e4b;
  --lp-warning: #e8852b; --lp-warning-soft: #fdf0e3; --lp-warning-ink: #9a4f0c;
  --lp-danger:  #e0413c; --lp-danger-soft:  #fdecec; --lp-danger-ink:  #b42318;
  --lp-info:    #0b86c9; --lp-info-soft:    #e6f4fb; --lp-info-ink:    #075985;
  --lp-violet:  #1591b8; --lp-violet-soft: #e3f4fa; --lp-violet-ink: #0b6a8a;
  --lp-teal:    #0e9a9a; --lp-teal-soft:    #e3f6f6;

  /* sidebar (always dark ink) */
  --lp-sb-bg: #0c2d5e;
  --lp-sb-bg-2: #123a72;
  --lp-sb-border: rgba(255,255,255,.06);
  --lp-sb-text: #a9b4c8;
  --lp-sb-text-strong: #eef2f8;
  --lp-sb-muted: #5d6a82;
  --lp-sb-active: rgba(126, 200, 227, .18);
  --lp-rail-w: 92px;
  --lp-rail-gap: 12px;
  --lp-sb-w: calc(var(--lp-rail-w) + var(--lp-rail-gap) * 2);
  --lp-sb-w-rail: 64px;
  --lp-topbar-h: 52px;

  /* shape & elevation */
  --lp-r-xs: 4px; --lp-r-sm: 6px; --lp-r: 8px; --lp-r-lg: 12px; --lp-r-xl: 16px;
  --lp-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --lp-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --lp-shadow-md: 0 8px 20px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --lp-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22);

  /* density */
  --lp-ctl-h: 32px;
  --lp-ctl-h-sm: 28px;
  --lp-ctl-fs: 13px;
  --lp-label-fs: 11.5px;
  --lp-gap: 12px;
  --lp-card-pad: 14px;
  --lp-page-pad: 20px;
  --lp-ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

html.lp-dark {
  --lp-p-50: rgba(126, 200, 227, .12);
  --lp-p-100: rgba(126, 200, 227, .2);
  --lp-primary: #2b8ad6;
  --lp-primary-hover: #4aa3e8;
  --lp-primary-soft: rgba(79, 168, 224, .14);
  --lp-primary-soft-2: rgba(79, 168, 224, .24);
  --lp-ring: 0 0 0 3px rgba(79, 168, 224, .3);

  --lp-bg: #0a0e16;
  --lp-surface: #111723;
  --lp-surface-2: #151c2a;
  --lp-surface-3: #1a2233;
  --lp-hover: #182031;
  --lp-border: #232c3d;
  --lp-border-2: #2f3a4f;
  --lp-text: #e8ecf3;
  --lp-text-2: #c1c9d6;
  --lp-text-3: #8d98ab;
  --lp-text-4: #647087;
  --lp-readonly: #141b28;
  --lp-line: rgba(126, 200, 227, .45);
  --lp-line-soft: rgba(126, 200, 227, .2);
  --lp-thead: rgba(126, 200, 227, .08);
  --lp-thead-ink: #9fd3ea;
  --lp-zebra: rgba(126, 200, 227, .03);

  --lp-success-soft: rgba(15,157,107,.16); --lp-success-ink: #4ad6a3;
  --lp-warning-soft: rgba(232,133,43,.18);  --lp-warning-ink: #f5a95e;
  --lp-danger-soft:  rgba(224,65,60,.16);  --lp-danger-ink:  #ff8a85;
  --lp-info-soft:    rgba(11,134,201,.18); --lp-info-ink:    #6cc7f5;
  --lp-violet-soft:  rgba(21,145,184,.2); --lp-violet-ink:  #7ec8e3;
  --lp-teal-soft:    rgba(14,154,154,.18);

  --lp-sb-bg: #081d3d;
  --lp-sb-bg-2: #0d2a55;
  --lp-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --lp-shadow-md: 0 10px 24px -8px rgba(0,0,0,.6);
  --lp-shadow-lg: 0 28px 56px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ====================== 02 BASE & TYPOGRAPHY ======================= */
/* kill the legacy "* { text-transform: uppercase }" and Montserrat */
*, *::before, *::after, button, table, label, input, select, textarea { text-transform: none; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; }
html, html body { height: auto !important; min-height: 100%; }
html body, body.vertical-layout, body.lp-body {
  font-family: var(--lp-font) !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-text-2);
  background: var(--lp-bg) !important;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.003em;
}
body, input, button, select, textarea, .form-control, .btn, .table, .dropdown-menu, .modal, .tooltip, .popover {
  font-family: var(--lp-font) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lp-font) !important;
  color: var(--lp-text) !important;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}
h1, .h1 { font-size: 22px; } h2, .h2 { font-size: 19px; } h3, .h3 { font-size: 17px; }
h4, .h4 { font-size: 15px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 13px; }
p { margin-bottom: .6rem; }
a { color: var(--lp-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--lp-primary-hover); }
small, .small { font-size: 12px; }
strong, b, .fw-bold, .fw-bolder, .bolder { font-weight: 600 !important; }
.text-muted { color: var(--lp-text-3) !important; }
.text-dark, .text-body { color: var(--lp-text) !important; }
.text-primary { color: var(--lp-primary) !important; }
.text-success { color: var(--lp-success) !important; }
.text-danger  { color: var(--lp-danger) !important; }
.text-warning { color: var(--lp-warning) !important; }
.text-info    { color: var(--lp-info) !important; }
.text-theme   { color: var(--lp-text) !important; }
.lp-mono, code, kbd, .font-monospace { font-family: var(--lp-mono) !important; font-feature-settings: "zero"; }
code { color: var(--lp-violet-ink); background: var(--lp-violet-soft); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
hr { border-color: var(--lp-border); opacity: 1; margin: 12px 0; }
::selection { background: var(--lp-p-200); color: var(--lp-text); }
.bg-white, .bg-body { background: var(--lp-surface) !important; }
.bg-light { background: var(--lp-surface-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--lp-border) !important; }

/* legacy style.css oddities */
.mb-0 { margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; }
th, td { white-space: normal; }
table { table-layout: auto; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--lp-border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--lp-border-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--lp-text-4); }
*::-webkit-scrollbar-track { background: transparent; }

/* feather icons: lighter, elegant stroke */
svg.feather { stroke-width: 1.85; flex: none; }
.btn svg.feather, .nav-link svg.feather { width: 15px; height: 15px; }

/* ========================== 03 APP SHELL =========================== */
/* neutralise Vuexy shell */
.header-navbar-shadow, .content-overlay, .drag-target, .sidenav-overlay { display: none !important; }
body.vertical-layout .main-menu:not(.lp-sidebar) { display: none !important; }
html body .app-content,
body.vertical-layout.vertical-menu-modern .app-content,
body.vertical-layout .app-content {
  margin-left: var(--lp-sb-w) !important;
  padding: 0 !important;
  min-height: calc(100vh - var(--lp-topbar-h));
  background: transparent;
  transition: margin-left .25s var(--lp-ease);
}
html body .app-content .content-wrapper,
html body .content-wrapper.container-xxl {
  padding: 14px var(--lp-page-pad) 28px !important;
  margin: 0 auto !important;
  max-width: 1680px !important;
}
html body .app-content .content-wrapper .content-body { margin: 0; }
html body .navbar-floating .navbar-container, .floating-nav { margin: 0 !important; }
body.lp-rail .app-content { margin-left: var(--lp-sb-w-rail) !important; }
.footer { display: none; }

#erp-overlay-loader, .overlay-loader { display: none !important; }

/* ---- sidebar ---- */
.lp-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1031;
  width: var(--lp-sb-w);
  background: var(--lp-sb-bg);
  color: var(--lp-sb-text);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--lp-sb-border);
  transition: width .25s var(--lp-ease), transform .28s var(--lp-ease);
}
.lp-sb-brand {
  height: var(--lp-topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--lp-sb-border);
  flex: none;
}
.lp-sb-brand a { display: flex; align-items: center; gap: 10px; color: var(--lp-sb-text-strong); min-width: 0; }
.lp-sb-brand .lp-logo { width: 28px; height: 28px; flex: none; }
.lp-sb-brand .lp-wordmark { font-weight: 650; font-size: 15px; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.lp-sb-brand .lp-wordmark span { color: #7ec8e3; }
.lp-sb-collapse {
  margin-left: auto; width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center; color: var(--lp-sb-muted);
  background: transparent; border: 0; transition: .15s;
}
.lp-sb-collapse:hover { background: var(--lp-sb-bg-2); color: var(--lp-sb-text-strong); }
.lp-sb-collapse svg { width: 16px; height: 16px; transition: transform .25s; }

.lp-sb-search { padding: 10px 12px 4px; flex: none; }
.lp-sb-search button {
  width: 100%; height: 32px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 10px; border-radius: 8px;
  background: var(--lp-sb-bg-2); border: 1px solid var(--lp-sb-border);
  color: var(--lp-sb-muted); font-size: 12.5px; text-align: left; transition: .15s;
}
.lp-sb-search button:hover { border-color: rgba(255,255,255,.14); color: var(--lp-sb-text); }
.lp-sb-search svg { width: 14px; height: 14px; }
.lp-sb-search kbd { margin-left: auto; font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--lp-sb-muted); border: 0; box-shadow: none; }

.lp-sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 16px; scrollbar-color: rgba(255,255,255,.1) transparent; }
.lp-sb-nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.1); }
.lp-sb-section {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase !important;
  color: var(--lp-sb-muted); padding: 14px 8px 5px; white-space: nowrap;
}
.lp-sb-nav ul { list-style: none; margin: 0; padding: 0; }
.lp-sb-link {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 8px; margin: 1px 0;
  border-radius: 7px; color: var(--lp-sb-text) !important;
  font-size: 13px; font-weight: 450; white-space: nowrap;
  position: relative; transition: background .15s, color .15s;
  cursor: pointer; width: 100%; background: transparent; border: 0; text-align: left;
}
.lp-sb-link svg { width: 16px; height: 16px; color: var(--lp-sb-muted); transition: color .15s; }
.lp-sb-link:hover { background: var(--lp-sb-bg-2); color: var(--lp-sb-text-strong) !important; }
.lp-sb-link:hover svg { color: var(--lp-sb-text); }
.lp-sb-link.active {
  background: var(--lp-sb-active); color: #fff !important; font-weight: 550;
}
.lp-sb-link.active svg { color: #7ec8e3; }
.lp-sb-link.active::before {
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: #7ec8e3;
}
.lp-sb-label { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.lp-sb-caret { margin-left: auto; width: 14px !important; height: 14px !important; transition: transform .2s; }
.lp-sb-group.open > .lp-sb-link .lp-sb-caret { transform: rotate(90deg); }
.lp-sb-sub { display: none; padding: 2px 0 4px 17px !important; margin-left: 8px !important; border-left: 1px solid var(--lp-sb-border); }
.lp-sb-group.open > .lp-sb-sub { display: block; }
.lp-sb-sub .lp-sb-link { height: 30px; font-size: 12.5px; padding-left: 10px; }
.lp-sb-sub .lp-sb-link.active::before { left: -18px; }

.lp-sb-footer { flex: none; padding: 10px 12px; border-top: 1px solid var(--lp-sb-border); }
.lp-sb-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 9px; color: var(--lp-sb-text-strong); }
.lp-sb-user:hover { background: var(--lp-sb-bg-2); color: #fff; }
.lp-sb-user .lp-avatar { width: 30px; height: 30px; font-size: 11.5px; }
.lp-sb-user-meta { min-width: 0; line-height: 1.25; }
.lp-sb-user-meta b { display: block; font-size: 12.5px; font-weight: 550 !important; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-sb-user-meta small { font-size: 11px; color: var(--lp-sb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* collapsed rail (desktop) */
body.lp-rail .lp-sidebar { width: var(--lp-sb-w-rail); }
body.lp-rail .lp-sidebar .lp-wordmark,
body.lp-rail .lp-sidebar .lp-sb-label,
body.lp-rail .lp-sidebar .lp-sb-caret,
body.lp-rail .lp-sidebar .lp-sb-search kbd,
body.lp-rail .lp-sidebar .lp-sb-search span,
body.lp-rail .lp-sidebar .lp-sb-user-meta,
body.lp-rail .lp-sidebar .lp-sb-sub { display: none !important; }
body.lp-rail .lp-sidebar .lp-sb-section { font-size: 0; padding: 10px 0 4px; }
body.lp-rail .lp-sidebar .lp-sb-section::after { content: ""; display: block; height: 1px; background: var(--lp-sb-border); margin: 0 10px; }
body.lp-rail .lp-sidebar .lp-sb-link { justify-content: center; padding: 0; }
body.lp-rail .lp-sidebar .lp-sb-brand { padding: 0; justify-content: center; }
body.lp-rail .lp-sidebar .lp-sb-brand a { display: none; }
body.lp-rail .lp-sidebar .lp-sb-collapse { margin: 0; }
body.lp-rail .lp-sidebar .lp-sb-collapse svg { transform: rotate(180deg); }
body.lp-rail .lp-sidebar .lp-sb-search button { justify-content: center; padding: 0; }
body.lp-rail .lp-sidebar .lp-sb-user { justify-content: center; }
/* hover flyout label in rail mode */
body.lp-rail .lp-sb-link[data-tip]:hover::after {
  content: attr(data-tip); position: fixed; left: calc(var(--lp-sb-w-rail) + 6px);
  background: #1b2438; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 6px;
  white-space: nowrap; box-shadow: var(--lp-shadow-md); pointer-events: none; z-index: 2000;
  transform: translateY(-2px);
}

.lp-sb-backdrop { display: none; }

/* ---- topbar ---- */
.lp-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--lp-topbar-h);
  margin-left: var(--lp-sb-w);
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--lp-page-pad);
  background: color-mix(in srgb, var(--lp-bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: margin-left .25s var(--lp-ease), border-color .2s;
}
body.lp-scrolled .lp-topbar { border-bottom-color: var(--lp-border); 
}
body.lp-rail .lp-topbar { margin-left: var(--lp-sb-w-rail); }
.lp-topbar .lp-topbar-menu { display: none; }
.lp-topbar-brand { display: none; }
.lp-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--lp-text-3); }
.lp-crumbs a { color: var(--lp-text-3); }
.lp-crumbs a:hover { color: var(--lp-text); }
.lp-crumbs .sep { color: var(--lp-text-4); }
.lp-crumbs .cur { color: var(--lp-text); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-topbar-search {
  margin-left: auto; height: 32px; width: 280px; max-width: 34vw;
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px;
  background: var(--lp-surface-2); border: 1px solid var(--lp-border); border-radius: 8px;
  color: var(--lp-text-4); font-size: 12.5px; transition: .15s; cursor: pointer;
}
.lp-topbar-search:hover { border-color: var(--lp-border-2); color: var(--lp-text-3); }
.lp-topbar-search svg { width: 15px; height: 15px; }
.lp-topbar-search kbd { margin-left: auto; }
.lp-topbar-actions { display: flex; align-items: center; gap: 4px; }
.lp-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center;
  color: var(--lp-text-3); background: transparent; border: 0; transition: .15s; position: relative;
}
.lp-icon-btn:hover { background: var(--lp-surface-3); color: var(--lp-text); }
.lp-icon-btn svg { width: 17px; height: 17px; }
.lp-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #1a6fb0, #0c2d5e); color: #fff !important;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; flex: none; text-transform: uppercase !important;
}
.lp-user-btn { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 20px; border: 1px solid transparent; background: transparent; color: var(--lp-text); }
.lp-user-btn:hover { background: var(--lp-surface-3); }
.lp-user-btn .meta { text-align: left; line-height: 1.15; }
.lp-user-btn .meta b { font-size: 12.5px; font-weight: 550 !important; display: block; color: var(--lp-text); }
.lp-user-btn .meta small { font-size: 11px; color: var(--lp-text-3); }
.lp-divider-v { width: 1px; height: 22px; background: var(--lp-border); margin: 0 6px; }

.lp-theme-dark-icon { display: none; }
html.lp-dark .lp-theme-dark-icon { display: inline; }
html.lp-dark .lp-theme-light-icon { display: none; }


/* ====================== 03b FLOATING NAV RAIL ======================= */
.lp-navrail {
  position: fixed; z-index: 1031;
  top: var(--lp-rail-gap); bottom: var(--lp-rail-gap); left: var(--lp-rail-gap);
  width: var(--lp-rail-w);
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #0f356c 0%, #0c2d5e 45%, #0a2248 100%);
  border-radius: 26px;
  box-shadow: 0 18px 40px -18px rgba(12, 45, 94, .6), 0 2px 6px rgba(12, 45, 94, .2);
  padding: 14px 0 12px;
}
html.lp-dark .lp-navrail { background: linear-gradient(180deg, #0b2750 0%, #081d3d 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 40px -18px rgba(0,0,0,.8); }
.lp-navrail-logo { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 0 0 2px rgba(126, 200, 227, .35), 0 10px 22px -10px rgba(0, 0, 0, .6); }
.lp-navrail-logo:hover { transform: translateY(-1px) rotate(-4deg); box-shadow: 0 0 0 2px rgba(126, 200, 227, .6), 0 12px 24px -10px rgba(0, 0, 0, .6); }
.lp-navrail-logo .lp-logo { width: 60px; height: 60px; display: block; border-radius: 50%; }
.lp-navrail-nav {
  flex: 1; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.lp-navrail-nav::-webkit-scrollbar { display: none; }
.lp-navrail-item {
  position: relative; flex: none;
  width: 78px; min-height: 64px; padding: 9px 4px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 18px; border: 0; background: transparent;
  color: #b7c9e2 !important; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, transform .12s;
}
.lp-navrail-item .ic svg { width: 21px; height: 21px; stroke-width: 1.7; }
.lp-navrail-item .lb { font-size: 11px; font-weight: 550; line-height: 1.2; letter-spacing: -.005em; max-width: 72px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.lp-navrail-item:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.lp-navrail-item:active { transform: scale(.97); }
.lp-navrail-item.active, .lp-navrail-item.is-open {
  background: linear-gradient(135deg, #9ad6ec 0%, #7ec8e3 100%); color: var(--lp-navy) !important;
  box-shadow: 0 10px 22px -10px rgba(126, 200, 227, .75), inset 0 1px 0 rgba(255,255,255,.45);
}
.lp-navrail-item.is-open:not(.active) { background: rgba(255,255,255,.1); box-shadow: none; color: #fff !important; }
.lp-navrail-item.active::after { content: ""; position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-orange); box-shadow: 0 0 0 2px var(--lp-sky); }
.lp-navrail-item .has-sub { position: absolute; right: 7px; bottom: 9px; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .55; }
.lp-navrail-sep { flex: none; width: 34px; height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }
.lp-navrail-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
.lp-navrail-mini { width: 44px; height: 44px; border-radius: 14px; border: 0; display: grid; place-items: center; color: #aeb8cc; background: rgba(255,255,255,.06); transition: .15s; }
.lp-navrail-mini:hover { background: rgba(255,255,255,.12); color: #fff; }
.lp-navrail-mini svg { width: 19px; height: 19px; }
.lp-navrail-me .lp-avatar { width: 40px; height: 40px; font-size: 13px; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }

/* flyout for items with sub-menus */
.lp-fly {
  position: fixed; z-index: 1040; display: none; min-width: 230px; max-width: 280px;
  left: calc(var(--lp-rail-w) + var(--lp-rail-gap) + 10px);
  background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 16px;
  box-shadow: var(--lp-shadow-lg); padding: 6px; animation: lp-fly-in .16s var(--lp-ease);
}
.lp-fly.open { display: block; }
@keyframes lp-fly-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.lp-fly-h { padding: 8px 10px 6px; font-size: 13.5px; font-weight: 650; color: var(--lp-text); }
.lp-fly-h .sec { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase !important; color: var(--lp-text-4); margin-bottom: 1px; }
.lp-fly-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--lp-text) !important; font-size: 13px; font-weight: 500; }
.lp-fly-link svg { width: 16px; height: 16px; color: var(--lp-text-3); }
.lp-fly-link:hover { background: var(--lp-surface-3); }
.lp-fly-link.active { background: var(--lp-primary-soft); color: var(--lp-primary) !important; }
.lp-fly-link.active svg { color: var(--lp-primary); }

/* mobile dock (hidden on desktop) */
.lp-dock { display: none; }
.lp-sheet-item.is-active { border-color: var(--lp-primary); background: var(--lp-primary-soft); }

@media (max-width: 991.98px) {
  :root { --lp-sb-w: 0px; }
  .lp-navrail, .lp-fly { display: none !important; }
  html body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .lp-dock {
    display: flex; gap: 4px; position: fixed; z-index: 1025;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 8px; border-radius: 24px;
    background: linear-gradient(180deg, #0f356c 0%, #0a2248 100%);
    box-shadow: 0 16px 36px -12px rgba(12, 45, 94, .6), 0 2px 8px rgba(12,45,94,.25);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html.lp-dark .lp-dock { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 16px 36px -12px rgba(0,0,0,.8); }
  .lp-dock::-webkit-scrollbar { display: none; }
  .lp-dock-item {
    flex: none; scroll-snap-align: center; min-width: 76px; height: 64px; padding: 0 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-radius: 18px; border: 0; background: transparent; color: #b7c9e2 !important;
    font-size: 11.5px; font-weight: 550; white-space: nowrap; transition: background-color .15s, color .15s;
  }
  .lp-dock-item svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .lp-dock-item:active { transform: scale(.96); }
  .lp-dock-item.active {
    background: linear-gradient(135deg, #9ad6ec 0%, #7ec8e3 100%); color: var(--lp-navy) !important;
    box-shadow: 0 10px 22px -10px rgba(126, 200, 227, .8), inset 0 1px 0 rgba(255,255,255,.45);
  }
}
@media (max-width: 767.98px) {
  html body, body.vertical-layout { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* bottom navigation (legacy, replaced by .lp-dock) */
.lp-bottomnav { display: none; }

/* scroll-to-top */
.scroll-top { display: none !important; }

/* top loading bar */
.lp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 3000; pointer-events: none; }
.lp-progress::before {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--lp-primary), var(--lp-sky), var(--lp-orange));
  transition: transform .3s var(--lp-ease), opacity .3s;
  opacity: 0;
}
.lp-progress.is-active::before { opacity: 1; animation: lp-progress 1.6s var(--lp-ease) infinite; }
@keyframes lp-progress { 0% { transform: scaleX(0); } 60% { transform: scaleX(.75); } 100% { transform: scaleX(.95); } }

/* ========================== 04 PAGE HEADER ========================= */
html body .content-header,
html body .content-header.row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin: 0 0 12px !important; padding: 0 !important;
  --bs-gutter-x: 0;
}
html body .content-header > .row { display: contents; }
html body .content-header .content-header-left,
html body .content-header .content-header-right {
  width: auto !important; max-width: none; flex: 0 1 auto; padding: 0 !important; margin: 0 !important;
}
html body .content-header .content-header-left { flex: 1 1 260px; min-width: 0; }
html body .content-header .breadcrumbs-top, html body .content-header .breadcrumbs-top > .col-12 { margin: 0; padding: 0; display: block; }
html body .content-header .content-header-title {
  float: none !important; display: block;
  font-size: 19px !important; font-weight: 650 !important; letter-spacing: -.02em;
  color: var(--lp-text) !important; border: 0 !important; padding: 0 !important; margin: 0 0 1px !important;
}
html body .breadcrumb-wrapper { display: block; padding: 0 !important; margin: 0 !important; }
html body .breadcrumb {
  padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important;
  font-size: 12px; display: flex; flex-wrap: wrap; gap: 0;
}
html body .breadcrumb .breadcrumb-item, html body .breadcrumb .breadcrumb-item a { color: var(--lp-text-3); font-weight: 450; font-size: 12px; }
html body .breadcrumb .breadcrumb-item a:hover { color: var(--lp-primary); }
html body .breadcrumb .breadcrumb-item.active { color: var(--lp-text-2); }
html body .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 6px; }
html body .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important; background: none !important; color: var(--lp-text-4); padding-right: 6px; width: auto; height: auto; font-size: 12px; margin: 0; top: 0;
}
html body .content-header .breadcrumb-right,
html body .content-header .content-header-right .form-group {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 0 !important;
}
html body .content-header .breadcrumb-right .btn { margin: 0 !important; }
/* sticky page header on form pages */
html body .content-header.pocreate-sticky, .lp-page-sticky {
  position: sticky; top: var(--lp-topbar-h); z-index: 1010;
  background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin: -14px calc(-1 * var(--lp-page-pad)) 12px !important;
  padding: 10px var(--lp-page-pad) !important;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.lp-stuck { border-bottom-color: var(--lp-border) !important; box-shadow: 0 6px 14px -12px rgba(16,24,40,.25); }

/* new, richer page header (opt-in markup used by redesigned modules) */
.lp-ph { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-ph-main { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.lp-ph-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--lp-primary-soft); color: var(--lp-primary); border: 1px solid var(--lp-primary-soft-2);
}
.lp-ph-icon svg { width: 19px; height: 19px; }
.lp-ph-title { font-size: 19px; font-weight: 650; color: var(--lp-text); letter-spacing: -.02em; margin: 0; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-ph-sub { font-size: 12.5px; color: var(--lp-text-3); margin: 2px 0 0; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.lp-ph-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--lp-text-4); display: inline-block; }
.lp-ph-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }

/* ======================= 05 CARDS & SECTIONS ======================= */
html body .card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border) !important;
  border-radius: var(--lp-r-lg) !important;
  box-shadow: var(--lp-shadow-xs) !important;
  margin-bottom: 12px;
  color: var(--lp-text-2);
}
html body .card .card { box-shadow: none !important; }
html body .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--lp-border) !important;
  padding: 10px var(--lp-card-pad) !important;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  min-height: 44px;
}
html body .card-header.newheader, html body .newheader { border-left: 0 !important; }
html body .card-header .card-title, html body .card-title, html body .newheader .card-title {
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--lp-text) !important;
  margin: 0 !important; letter-spacing: -.01em; border: 0 !important; padding: 0 !important;
  display: flex; align-items: center; gap: 8px;
}
html body .newheader h4.card-title::before, html body .card-title.text-theme::before { display: none !important; }
html body .card-text { color: var(--lp-text-3); font-size: 12px; }
html body .card-body { padding: var(--lp-card-pad) !important; }
html body .card-footer { background: var(--lp-surface-2); border-top: 1px solid var(--lp-border); padding: 10px var(--lp-card-pad); }
html body .quation-card { border: 1px solid var(--lp-border) !important; }
html body .card > .table-responsive:first-child, html body .card > .dataTables_wrapper { border-radius: var(--lp-r-lg); }
html body .customernewsection-form .newheader { padding-bottom: 8px !important; margin-bottom: 10px !important; }
html body .step-custhomapp { background: transparent !important; padding: 0 !important; margin: 0 0 10px !important; }

/* opt-in section blocks used in forms */
.lp-card { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-r-lg); box-shadow: var(--lp-shadow-xs); margin-bottom: 12px; }
.lp-card-h { display: flex; align-items: center; gap: 10px; padding: 10px var(--lp-card-pad); border-bottom: 1px solid var(--lp-border); min-height: 44px; flex-wrap: wrap; }
.lp-card-h h3, .lp-card-h h4, .lp-card-h .t { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--lp-text); display: flex; align-items: center; gap: 8px; }
.lp-card-h .t svg { width: 15px; height: 15px; color: var(--lp-text-3); }
.lp-card-h .d { font-size: 12px; color: var(--lp-text-3); }
.lp-card-h .r { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-card-b { padding: var(--lp-card-pad); }
.lp-card-b.p0 { padding: 0; }
.lp-card-f { padding: 10px var(--lp-card-pad); border-top: 1px solid var(--lp-border); background: var(--lp-surface-2); border-radius: 0 0 var(--lp-r-lg) var(--lp-r-lg); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.lp-sec-title {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase !important; color: var(--lp-text-3);
}
.lp-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--lp-border); }
.lp-sec-title svg { width: 13px; height: 13px; }
.lp-divide { height: 1px; background: var(--lp-border); margin: 12px calc(-1 * var(--lp-card-pad)); }

/* field grid: dense auto-fit layout for forms */
.lp-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.lp-grid.c2 { --cols: 2; } .lp-grid.c3 { --cols: 3; } .lp-grid.c4 { --cols: 4; } .lp-grid.c5 { --cols: 5; } .lp-grid.c6 { --cols: 6; }
.lp-grid .span-2 { grid-column: span 2; } .lp-grid .span-3 { grid-column: span 3; } .lp-grid .span-all { grid-column: 1 / -1; }
.lp-grid > * { min-width: 0; }
@media (max-width: 1399.98px) { .lp-grid.c6 { --cols: 4; } .lp-grid.c5 { --cols: 4; } }
@media (max-width: 1099.98px) { .lp-grid.c6, .lp-grid.c5, .lp-grid.c4 { --cols: 3; } }
@media (max-width: 859.98px)  { .lp-grid.c6, .lp-grid.c5, .lp-grid.c4, .lp-grid.c3 { --cols: 2; } .lp-grid .span-3 { grid-column: span 2; } }
@media (max-width: 575.98px)  { .lp-grid { --cols: 1 !important; } .lp-grid .span-2, .lp-grid .span-3 { grid-column: 1 / -1; } }

/* key/value strip (read-only facts) */
.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; border: 1px solid var(--lp-border); border-radius: var(--lp-r); overflow: hidden; background: var(--lp-surface); }
.lp-fact { padding: 8px 12px; border-right: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); margin: 0 -1px -1px 0; min-width: 0; }
.lp-fact .k { font-size: 11px; color: var(--lp-text-3); font-weight: 500; display: block; margin-bottom: 1px; white-space: nowrap; }
.lp-fact .v { font-size: 13px; color: var(--lp-text); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ============================ 06 BUTTONS =========================== */
html body .btn {
  --lp-btn-h: var(--lp-ctl-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--lp-btn-h); padding: 0 12px !important;
  font-size: 13px !important; font-weight: 550 !important; line-height: 1 !important;
  border-radius: var(--lp-r) !important; border: 1px solid transparent;
  box-shadow: none !important; letter-spacing: -.005em;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
  white-space: nowrap; text-shadow: none;
}
html body .btn:active { transform: translateY(.5px); }
html body .btn:focus-visible { box-shadow: var(--lp-ring) !important; outline: 0; }
html body .btn-sm, html body .btn-group-sm > .btn { --lp-btn-h: 30px; padding: 0 10px !important; font-size: 12.5px !important; }
html body .btn-lg { --lp-btn-h: 40px; padding: 0 18px !important; font-size: 14px !important; }
html body .btn i[data-feather], html body .btn svg { width: 15px; height: 15px; margin: 0 !important; }
html body .btn-sm svg { width: 14px; height: 14px; }
html body .btn.me-50 svg, html body .btn .me-50 { margin-right: 0 !important; }
/* icon-only buttons */
html body .btn.btn-icon, html body .btn.lp-icon-only { width: var(--lp-btn-h); padding: 0 !important; flex: none; }

html body .btn-primary, html body .btn-primary:visited {
  background: var(--lp-primary) !important; border-color: var(--lp-primary) !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(12,45,94,.18), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html body .btn-primary:hover, html body .btn-primary:focus { background: var(--lp-primary-hover) !important; border-color: var(--lp-primary-hover) !important; color: #fff !important; }
html body .btn-secondary, html body .btn-light, html body .btn-outline-secondary, html body .btn-outline-dark, html body .btn-default {
  background: var(--lp-surface) !important; border-color: var(--lp-border-2) !important; color: var(--lp-text) !important;
  box-shadow: var(--lp-shadow-xs) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-outline-secondary:hover, html body .btn-outline-dark:hover {
  background: var(--lp-surface-3) !important; border-color: var(--lp-border-2) !important; color: var(--lp-text) !important;
}
html body .btn-success { background: var(--lp-success) !important; border-color: var(--lp-success) !important; color: #fff !important; }
html body .btn-success:hover { filter: brightness(.94); }
html body .btn-danger { background: var(--lp-surface) !important; border-color: var(--lp-border-2) !important; color: var(--lp-danger) !important; box-shadow: var(--lp-shadow-xs) !important; }
html body .btn-danger:hover { background: var(--lp-danger-soft) !important; border-color: color-mix(in srgb, var(--lp-danger) 35%, var(--lp-border)) !important; color: var(--lp-danger-ink) !important; }
html body .btn-danger.lp-solid, html body .swal2-popup .btn-danger { background: var(--lp-danger) !important; border-color: var(--lp-danger) !important; color: #fff !important; }
html body .btn-warning { background: var(--lp-warning) !important; border-color: var(--lp-warning) !important; color: #fff !important; }
html body .btn-info { background: var(--lp-info) !important; border-color: var(--lp-info) !important; color: #fff !important; }
html body .btn-dark { background: var(--lp-text) !important; border-color: var(--lp-text) !important; color: var(--lp-surface) !important; }
html body .btn-dark:hover { opacity: .9; }
html body .btn-outline-primary { background: var(--lp-surface) !important; border-color: var(--lp-p-200) !important; color: var(--lp-primary) !important; }
html body .btn-outline-primary:hover { background: var(--lp-primary-soft) !important; }
html body .btn-outline-success { background: var(--lp-surface) !important; border-color: color-mix(in srgb, var(--lp-success) 40%, var(--lp-border)) !important; color: var(--lp-success) !important; }
html body .btn-outline-success:hover { background: var(--lp-success-soft) !important; }
html body .btn-outline-danger { background: var(--lp-surface) !important; border-color: color-mix(in srgb, var(--lp-danger) 35%, var(--lp-border)) !important; color: var(--lp-danger) !important; }
html body .btn-outline-danger:hover { background: var(--lp-danger-soft) !important; }
html body .btn-outline-info, html body .btn-outline-warning { background: var(--lp-surface) !important; border-color: var(--lp-border-2) !important; }
html body .btn-link { background: transparent !important; border-color: transparent !important; color: var(--lp-primary) !important; padding: 0 4px !important; box-shadow: none !important; }
html body .btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--lp-text-2) !important; box-shadow: none !important; }
html body .btn-ghost:hover { background: var(--lp-surface-3) !important; color: var(--lp-text) !important; }
html body .btn-soft { background: var(--lp-primary-soft) !important; border-color: transparent !important; color: var(--lp-primary) !important; }
html body .btn-soft:hover { background: var(--lp-primary-soft-2) !important; }
html body .btn:disabled, html body .btn.disabled { opacity: .55; pointer-events: none; }
html body .btn-group > .btn { border-radius: 0 !important; }
html body .btn-group > .btn:first-child { border-radius: var(--lp-r) 0 0 var(--lp-r) !important; }
html body .btn-group > .btn:last-child { border-radius: 0 var(--lp-r) var(--lp-r) 0 !important; }
html body .btn-close { width: 28px; height: 28px; padding: 0 !important; border-radius: 7px; opacity: .6; background-size: 10px; margin: 0 !important; }
html body .btn-close:hover { opacity: 1; background-color: var(--lp-surface-3); }
html.lp-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
/* "+" add buttons attached to inputs */
html body .input-group > .btn { height: var(--lp-ctl-h); }
html body .input-group > .btn.openPartyModal, html body .input-group > .btn-primary:last-child {
  width: var(--lp-ctl-h); padding: 0 !important;
  background: var(--lp-surface-2) !important; color: var(--lp-text-3) !important;
  border: 1px solid var(--lp-border-2) !important; border-left: 0 !important; box-shadow: none !important;
}
html body .input-group > .btn.openPartyModal:hover, html body .input-group > .btn-primary:last-child:hover { background: var(--lp-primary-soft) !important; color: var(--lp-primary) !important; }

/* action-button cluster in tables */
.lp-actions { display: inline-flex; align-items: center; gap: 2px; }
.lp-act {
  width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center;
  color: var(--lp-text-3) !important; background: transparent; border: 0; transition: .15s; position: relative; cursor: pointer;
}
.lp-act svg { width: 15px !important; height: 15px !important; }
.lp-act:hover { background: var(--lp-surface-3); color: var(--lp-text) !important; }
.lp-act.danger:hover { background: var(--lp-danger-soft); color: var(--lp-danger) !important; }
.lp-act.primary:hover { background: var(--lp-primary-soft); color: var(--lp-primary) !important; }
.lp-act.success:hover { background: var(--lp-success-soft); color: var(--lp-success) !important; }
.lp-act[title]:hover::after {
  content: attr(title); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #101828; color: #fff; font-size: 11.5px; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; z-index: 20; box-shadow: var(--lp-shadow-md);
}

/* doc/quick-action tiles */
.lp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.lp-tile {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; min-height: 44px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r); background: var(--lp-surface);
  color: var(--lp-text) !important; font-size: 12.5px; font-weight: 500; transition: .15s; cursor: pointer; text-align: left;
}
.lp-tile:hover { border-color: var(--lp-p-200); background: var(--lp-primary-soft); color: var(--lp-primary) !important; transform: translateY(-1px); box-shadow: var(--lp-shadow-sm); }
.lp-tile .ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--lp-surface-3); color: var(--lp-text-3); flex: none; }
.lp-tile:hover .ic { background: var(--lp-surface); color: var(--lp-primary); }
.lp-tile .ic svg { width: 15px; height: 15px; }
.lp-tile.is-danger { color: var(--lp-danger) !important; }
.lp-tile.is-danger:hover { background: var(--lp-danger-soft); border-color: color-mix(in srgb, var(--lp-danger) 30%, var(--lp-border)); }
.lp-tile.is-danger .ic { background: var(--lp-danger-soft); color: var(--lp-danger); }
.lp-tile .soon { margin-left: auto; font-size: 10px; color: var(--lp-text-4); font-weight: 500; }

/* ============================= 07 FORMS ============================ */
html body label, html body .form-label, html body .col-form-label {
  font-size: var(--lp-label-fs) !important; font-weight: 550 !important; color: var(--lp-text-2) !important;
  margin-bottom: 4px !important; letter-spacing: 0; line-height: 1.3; display: inline-flex; align-items: center; gap: 3px;
}
html body .form-check-label { font-size: 13px !important; font-weight: 450 !important; color: var(--lp-text) !important; margin: 0 !important; }
html body label .text-danger, html body .form-label .text-danger { color: var(--lp-danger) !important; font-weight: 600; }

html body .form-control, html body .form-select, html body select.form-control,
html body .dataTables_filter input, html body .dataTables_length select {
  height: var(--lp-ctl-h);
  padding: 0 10px !important;
  font-size: var(--lp-ctl-fs) !important; font-weight: 450;
  color: var(--lp-text) !important;
  background-color: var(--lp-surface) !important;
  border: 1px solid var(--lp-border-2) !important;
  border-radius: var(--lp-r) !important;
  box-shadow: var(--lp-shadow-xs) !important;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  max-width: 100%;
}
html body textarea.form-control { height: auto; min-height: 64px; padding: 7px 10px !important; line-height: 1.45; resize: vertical; }
html body .form-control::placeholder { color: var(--lp-text-4) !important; opacity: 1; font-weight: 400; }
html body .form-control:hover, html body .form-select:hover { border-color: color-mix(in srgb, var(--lp-text-4) 70%, var(--lp-border-2)) !important; }
html body .form-control:focus, html body .form-select:focus, html body .dataTables_filter input:focus {
  border-color: var(--lp-primary) !important; box-shadow: var(--lp-ring) !important; outline: 0;
}
html body .form-control[readonly], html body .form-control:disabled, html body .form-select:disabled, html body .tk-frozen {
  background-color: var(--lp-readonly) !important; color: var(--lp-text-2) !important; box-shadow: none !important;
  border-color: var(--lp-border) !important; cursor: default;
}
html body .form-control-sm, html body .form-select-sm { height: var(--lp-ctl-h-sm); font-size: 12.5px !important; padding: 0 8px !important; }
html body textarea.form-control-sm { height: auto; padding: 5px 8px !important; }
html body .form-select, html body select.form-control, html body .dataTables_length select {
  padding-right: 28px !important;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important; background-position: right 7px center !important; background-size: 15px !important;
}
html body select.form-control[multiple], html body select[size] { height: auto; background-image: none !important; padding: 6px !important; }
html body input[type="date"].form-control, html body input[type="datetime-local"].form-control, html body input[type="time"].form-control { padding-right: 6px !important; }
html body input[type="date"]::-webkit-calendar-picker-indicator, html body input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: .5; cursor: pointer; padding: 2px; margin-left: 2px; border-radius: 4px;
}
html body input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; background: var(--lp-surface-3); }
html.lp-dark input[type="date"]::-webkit-calendar-picker-indicator, html.lp-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); }
html body input[type="number"].form-control { font-variant-numeric: tabular-nums; }
html body input[type="file"].form-control { padding: 0 !important; line-height: calc(var(--lp-ctl-h) - 2px); }
html body input[type="file"].form-control::file-selector-button {
  height: 100%; margin: 0 10px 0 0; padding: 0 12px; border: 0; border-right: 1px solid var(--lp-border-2);
  background: var(--lp-surface-2); color: var(--lp-text); font-weight: 550; font-size: 12.5px;
}
html body .mw-100 { max-width: 100% !important; }

html body .error-border, html body .is-invalid { border-color: var(--lp-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-danger) 14%, transparent) !important; }
html body .invalid-feedback { font-size: 11.5px; color: var(--lp-danger); margin-top: 3px; }

/* input groups */
html body .input-group { flex-wrap: nowrap; }
html body .input-group > .form-control, html body .input-group > .form-select { box-shadow: none !important; }
html body .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
html body .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html body .input-group-text { height: var(--lp-ctl-h); background: var(--lp-surface-2) !important; border: 1px solid var(--lp-border-2) !important; color: var(--lp-text-3) !important; font-size: 12.5px; padding: 0 10px; border-radius: var(--lp-r) !important; }
/* x-autocomplete renders label+input inside .input-group (label flex row) -> make those groups wrap correctly */
html body .input-group:has(> .d-flex > .form-label) { flex-wrap: wrap; }
html body .input-group:has(> .d-flex > .form-label) > .d-flex { flex: 0 0 100%; width: 100%; margin-bottom: 4px; }
html body .input-group:has(> .d-flex > .form-label) > input[type="hidden"] + .d-flex { flex: 0 0 100%; }
html body .input-group:has(> .d-flex > .form-label) > .form-control { flex: 1 1 0; min-width: 0; border-radius: var(--lp-r) 0 0 var(--lp-r) !important; margin-left: 0 !important; }
html body .input-group:has(> .d-flex > .form-label) > .d-flex .form-label { margin-bottom: 0 !important; }
html body .input-group:has(> .d-flex > .form-label) > .btn { border-radius: 0 var(--lp-r) var(--lp-r) 0 !important; }
html body .input-group:has(> .d-flex > .form-label) > .input-group { flex: 1 1 100%; }

/* checks, radios, switches */
html body .form-check { min-height: 20px; padding-left: 24px; margin-bottom: 0; display: inline-flex; align-items: center; gap: 7px; }
html body .form-check .form-check-input { margin-left: -24px; float: none; margin-top: 0; }
html body .form-check-inline { margin-right: 14px; }
html body .form-check-input {
  width: 16px; height: 16px; border: 1.5px solid var(--lp-border-2) !important; background-color: var(--lp-surface) !important;
  box-shadow: none !important; cursor: pointer; transition: .15s; flex: none;
}
html body .form-check-input[type="checkbox"] { border-radius: 4.5px !important; }
html body .form-check-input:checked { background-color: var(--lp-primary) !important; border-color: var(--lp-primary) !important; }
html body .form-check-input:focus { box-shadow: var(--lp-ring) !important; border-color: var(--lp-primary) !important; }
html body .form-switch { padding-left: 40px; }
html body .form-switch .form-check-input { width: 32px; height: 18px; margin-left: -40px; border-radius: 20px !important; }
html body input[type="checkbox"]:not(.form-check-input), html body input[type="radio"]:not(.form-check-input) { accent-color: var(--lp-primary); width: 15px; height: 15px; vertical-align: middle; cursor: pointer; }

/* inline label legacy pattern -> stacked (cleaner, denser in grids) */
html body .inline-label, html body .inline-group { display: block !important; }
html body .inline-label > label, html body .inline-group > label { width: auto !important; margin-right: 0 !important; display: flex !important; }
html body .inline-label .input-group { flex-wrap: wrap; }
html body .mb-1 { margin-bottom: 10px !important; }
html body .row.g-2 { --bs-gutter-y: 10px; --bs-gutter-x: 12px; }
html body .row.g-3 { --bs-gutter-y: 12px; --bs-gutter-x: 12px; }

/* segmented radio (opt-in) */
.lp-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--lp-surface-3); border: 1px solid var(--lp-border); border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lp-seg::-webkit-scrollbar { display: none; }
.lp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lp-seg label, .lp-seg .lp-seg-btn {
  margin: 0 !important; height: 26px; padding: 0 12px; border-radius: 7px !important;
  display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font-size: 12.5px !important; font-weight: 550 !important; color: var(--lp-text-3) !important; transition: .15s; border: 0; background: transparent;
}
.lp-seg label:hover, .lp-seg .lp-seg-btn:hover { color: var(--lp-text) !important; }
.lp-seg input:checked + label, .lp-seg .lp-seg-btn.active { background: var(--lp-surface); color: var(--lp-text) !important; box-shadow: var(--lp-shadow-sm); }
.lp-seg input:focus-visible + label { box-shadow: var(--lp-ring); }

/* field with inline helper */
.lp-field { min-width: 0; }
.lp-field > label, .lp-field > .form-label { display: flex !important; }
.lp-hint { font-size: 11px; color: var(--lp-text-4); margin-top: 3px; line-height: 1.35; }
.lp-label-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.lp-label-row > label, .lp-label-row .form-label { margin-bottom: 0 !important; }

/* party block (name + address) */
.lp-party { border: 1px solid var(--lp-border); border-radius: var(--lp-r); padding: 10px; background: var(--lp-surface-2); min-width: 0; }
.lp-party textarea.form-control { min-height: 58px; margin-top: 6px !important; background: var(--lp-surface) !important; font-size: 12.5px !important; }
.lp-party .input-group > .form-control { background: var(--lp-surface) !important; }

/* ================== 08 TABLES & DATATABLES ========================= */
html body .table {
  --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-bg: transparent;
  color: var(--lp-text-2); margin-bottom: 0; font-size: 13px; border-color: var(--lp-border);
}
html body .table > :not(caption) > * > * { padding: 8px 12px; border-bottom-color: var(--lp-border); background: transparent; box-shadow: none; }
html body .table thead th, html body .table > thead > tr > th, html body table.dataTable thead th {
  background: var(--lp-surface-2) !important;
  color: var(--lp-text-3) !important;
  font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .01em;
  border-top: 0 !important; border-bottom: 1px solid var(--lp-border) !important;
  padding-top: 8px !important; padding-bottom: 8px !important; white-space: nowrap; vertical-align: middle;
  text-transform: none !important;
}
html body .table-light, html body .table thead.table-light th { --bs-table-bg: var(--lp-surface-2); }
html body .table tbody tr { transition: background-color .12s; }
html body .table tbody tr:hover > * { background: var(--lp-hover) !important; }
html body .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
html body .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
html body .table-bordered { border: 1px solid var(--lp-border); border-radius: var(--lp-r); overflow: hidden; border-collapse: separate; border-spacing: 0; }
html body .table td { vertical-align: middle; color: var(--lp-text); }
html body .vs-table td:first-child { white-space: nowrap; font-family: var(--lp-mono); font-size: 12px; }
html body table.dataTable tbody td { white-space: nowrap; }
html body .table tbody tr:last-child > td { border-bottom: 0; }
html body .table tfoot th, html body .table tfoot td { background: var(--lp-surface-2); color: var(--lp-text); font-weight: 600; border-top: 1px solid var(--lp-border); border-bottom: 0; }
html body .table .text-end, html body .table .num { font-variant-numeric: tabular-nums; }

/* editable grid tables (pricing, routing, containers) */
html body .po-order-detail, html body .newdesignerptable, html body .vs-table, html body .lp-edit-table {
  border: 1px solid var(--lp-border) !important; border-radius: var(--lp-r); border-collapse: separate; border-spacing: 0; overflow: hidden;
}
html body .po-order-detail > :not(caption) > * > *, html body .vs-table > :not(caption) > * > *, html body .lp-edit-table > :not(caption) > * > * { padding: 4px 5px !important; border-bottom: 1px solid var(--lp-border) !important; border-right: 1px solid var(--lp-border); }
html body .po-order-detail > :not(caption) > * > *:last-child, html body .vs-table > :not(caption) > * > *:last-child { border-right: 0; }
html body .po-order-detail thead th, html body .vs-table thead th,
html body .newdesignerptable.po-order-detail tr th, html body .custnewpo-detail.po-order-detail tr th {
  padding: 7px 8px !important; background: var(--lp-surface-2) !important; color: var(--lp-text-3) !important;
  font-size: 11.5px !important; font-weight: 600 !important; border: 0 !important; border-bottom: 1px solid var(--lp-border) !important; border-right: 1px solid var(--lp-border) !important;
}
html body .newdesignerptable.po-order-detail tfoot tr th, html body .custnewpo-detail.po-order-detail tfoot tr th { background: var(--lp-surface-2) !important; color: var(--lp-text) !important; border-top: 1px solid var(--lp-border) !important; border-bottom: 0 !important; }
html body .po-order-detail tr td .form-control, html body .po-order-detail tr td .form-select { max-width: none; }
html body .po-order-detail tbody tr td:first-of-type .form-control { min-width: 170px; }
html body .po-order-detail tbody td .form-control, html body .po-order-detail tbody td .form-select { min-width: 96px; }
html body .newdesignerptable.po-order-detail.border { border: 1px solid var(--lp-border) !important; }
html body .po-order-detail tr td { border-color: var(--lp-border); }
html body .po-order-detail .form-control, html body .po-order-detail .form-select, html body .vs-table .form-control,
html body .lp-edit-table .form-control {
  height: 30px; min-width: 88px; font-size: 12.5px !important; box-shadow: none !important; border-color: transparent !important; background-color: transparent !important; border-radius: 6px !important; padding: 0 7px !important;
}
html body .po-order-detail .form-control:hover, html body .vs-table .form-control:hover { border-color: var(--lp-border-2) !important; background-color: var(--lp-surface) !important; }
html body .po-order-detail .form-control:focus, html body .vs-table .form-control:focus { border-color: var(--lp-primary) !important; background-color: var(--lp-surface) !important; box-shadow: var(--lp-ring) !important; }
html body .po-order-detail .form-control[readonly] { background: var(--lp-readonly) !important; color: var(--lp-text) !important; font-weight: 550; font-variant-numeric: tabular-nums; }
html body .po-order-detail select.form-control { padding-right: 24px !important; background-position: right 4px center !important; }
html body .po-order-detail tbody tr:hover > * { background: var(--lp-surface-2) !important; }
html body .po-order-detail .btn-sm.btn-danger, html body .po-order-detail .remove-row, html body .po-order-detail .remove-debit-row, html body .po-order-detail .remove-credit-row {
  width: 28px; height: 28px; padding: 0 !important; background: transparent !important; border-color: transparent !important; color: var(--lp-text-4) !important; box-shadow: none !important;
}
html body .po-order-detail .btn-sm.btn-danger:hover, html body .po-order-detail .remove-row:hover { background: var(--lp-danger-soft) !important; color: var(--lp-danger) !important; }
html body .po-order-detail tfoot th { padding: 6px 8px !important; }
html body .po-order-detail tfoot .form-control { font-weight: 650; color: var(--lp-text) !important; background: transparent !important; }
tr.lp-row-actual > td { background: var(--lp-info-soft) !important; }
tr.lp-row-actual .form-control { color: var(--lp-info-ink) !important; }
.lp-table-scroll { overflow-x: auto; border-radius: var(--lp-r); -webkit-overflow-scrolling: touch; }
.lp-edit-hint { font-size: 11.5px; color: var(--lp-text-3); display: flex; align-items: center; gap: 6px; }
.lp-edit-hint .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--lp-info-soft); border: 1px solid color-mix(in srgb, var(--lp-info) 35%, transparent); }

/* DataTables */
html body .dataTables_wrapper { padding: 0; }
html body .dataTables_wrapper > .row, html body .dataTables_wrapper > .d-flex { margin: 0 !important; padding: 10px 12px; align-items: center; --bs-gutter-x: 8px; row-gap: 8px; }
html body .dataTables_wrapper > .row:first-child, html body .dataTables_wrapper > .d-flex:first-child { border-bottom: 1px solid var(--lp-border); }
html body .dataTables_wrapper > .row:last-child, html body .dataTables_wrapper > .d-flex:last-child { border-top: 1px solid var(--lp-border); }
html body .dataTables_wrapper .dataTables_length label, html body .dataTables_wrapper .dataTables_filter label, html body .dataTables_info {
  font-size: 12.5px !important; color: var(--lp-text-3) !important; font-weight: 450 !important; margin: 0 !important; gap: 8px; display: inline-flex; align-items: center;
}
html body .dataTables_length select { width: 72px !important; height: 30px; margin: 0 2px !important; }
html body .dataTables_filter { text-align: right; }
html body .dataTables_filter input {
  width: 240px !important; height: 32px; margin: 0 !important; padding-left: 32px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 15px !important;
}
html body .dataTables_filter label { font-size: 0 !important; }
html body .dataTables_wrapper .dt-buttons { gap: 6px; }
html body .dataTables_wrapper .dt-buttons .btn, html body .dt-button-collection .dropdown-item { font-size: 12.5px !important; }
html body .dataTables_wrapper .dt-buttons .btn { height: 32px; }
html body .dataTables_wrapper .dt-buttons .btn svg { margin-right: 2px !important; }
html body div.dt-button-collection { border: 1px solid var(--lp-border) !important; border-radius: var(--lp-r) !important; box-shadow: var(--lp-shadow-md) !important; padding: 4px !important; background: var(--lp-surface) !important; }
html body .dataTables_scroll { border: 0; }
html body .dataTables_scrollHead, html body .dataTables_scrollBody { border: 0 !important; }
html body .dataTables_scrollBody { border-bottom: 0 !important; }
html body table.dataTable { margin: 0 !important; border-collapse: collapse !important; }
html body table.dataTable thead .sorting, html body table.dataTable thead .sorting_asc, html body table.dataTable thead .sorting_desc { cursor: pointer; padding-right: 22px !important; }
html body table.dataTable thead .sorting::before, html body table.dataTable thead .sorting::after,
html body table.dataTable thead .sorting_asc::before, html body table.dataTable thead .sorting_asc::after,
html body table.dataTable thead .sorting_desc::before, html body table.dataTable thead .sorting_desc::after {
  font-size: 9px !important; opacity: .35 !important; right: 8px !important; content: "" !important;
}
html body table.dataTable thead .sorting::after { content: "↕" !important; bottom: auto !important; top: 50% !important; transform: translateY(-50%); font-size: 11px !important; }
html body table.dataTable thead .sorting_asc::after { content: "↑" !important; opacity: .9 !important; bottom: auto !important; top: 50% !important; transform: translateY(-50%); font-size: 11px !important; color: var(--lp-primary); }
html body table.dataTable thead .sorting_desc::after { content: "↓" !important; opacity: .9 !important; bottom: auto !important; top: 50% !important; transform: translateY(-50%); font-size: 11px !important; color: var(--lp-primary); }
html body table.dataTable td.dataTables_empty { padding: 0 !important; }
html body .dataTables_scrollBody thead tr { height: 0 !important; }
html body .dataTables_wrapper .dataTables_scrollBody table.dataTable thead th, html body .dataTables_wrapper .dataTables_scrollBody table thead td { font-size: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; height: 0 !important; line-height: 0 !important; }
html body .dataTables_scrollBody thead th::before, html body .dataTables_scrollBody thead th::after { display: none !important; }
html body .page-item .page-link::after { display: none !important; }
html body .dataTables_processing { background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; border-radius: var(--lp-r) !important; box-shadow: var(--lp-shadow-md) !important; color: var(--lp-text-2) !important; font-size: 12.5px; }
/* pagination */
html body .pagination { gap: 3px; margin: 0 !important; justify-content: flex-end; flex-wrap: wrap; }
html body .page-item .page-link {
  min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 7px !important;
  border: 1px solid transparent !important; background: transparent !important; color: var(--lp-text-2) !important; font-size: 12.5px; font-weight: 500; box-shadow: none !important; margin: 0 !important;
}
html body .page-item .page-link:hover { background: var(--lp-surface-3) !important; color: var(--lp-text) !important; }
html body .page-item.active .page-link { background: var(--lp-surface) !important; border-color: var(--lp-border-2) !important; color: var(--lp-text) !important; font-weight: 650; box-shadow: var(--lp-shadow-xs) !important; }
html body .page-item.disabled .page-link { opacity: .4; }
html body .page-item.previous .page-link, html body .page-item.next .page-link, html body .page-item.prev .page-link { font-size: 0 !important; }
html body .page-item.previous .page-link::before, html body .page-item.prev .page-link::before { content: "‹"; font-size: 17px; line-height: 1; }
html body .page-item.next .page-link::before { content: "›"; font-size: 17px; line-height: 1; }
html body .page-item:first-child .page-link, html body .page-item:last-child .page-link { background-image: none !important; }
html body .dataTables_paginate { display: flex; justify-content: flex-end; }
/* fixed last column (legacy .tableistlastcolumnfixed) */
html body .tableistlastcolumnfixed tbody td:last-child, html body .tableistlastcolumnfixed thead th:last-child { position: sticky; right: 0; background: var(--lp-surface) !important; box-shadow: -8px 0 10px -10px rgba(16,24,40,.25); z-index: 1; }
html body .tableistlastcolumnfixed thead th:last-child { background: var(--lp-surface-2) !important; }
html body .tableistlastcolumnfixed tbody td:last-child { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--lp-border) !important; }
html body .tableistlastcolumnfixed tbody tr:hover td:last-child { background: var(--lp-hover) !important; }

/* =========================== 09 TABS =============================== */
/* primary tabs: clean underline, horizontal scroll, never wraps */
html body .nav-tabs {
  display: flex; flex-wrap: nowrap !important; gap: 2px;
  border-bottom: 1px solid var(--lp-border) !important;
  margin: 0 !important; padding: 0 !important;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; background: transparent !important;
  box-shadow: none !important;
}
html body .nav-tabs::-webkit-scrollbar { display: none; }
html body .nav-tabs .nav-item { flex: none; margin: 0 !important; }
html body .nav-tabs .nav-link, html body .nav-tabs button.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--lp-text-3) !important; font-size: 13px !important; font-weight: 550 !important; white-space: nowrap;
  box-shadow: none !important; transition: color .15s;
}
html body .nav-tabs .nav-link::after, html body .quation-card .nav-tabs .nav-link.active::after {
  content: "" !important; position: absolute; left: 8px; right: 8px; top: auto; bottom: -1px; width: auto; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--lp-primary) !important; transform: scaleX(0); transition: transform .2s var(--lp-ease); display: block !important;
}
html body .nav-tabs .nav-link:hover { color: var(--lp-text) !important; }
html body .nav-tabs .nav-link.active, html body .quation-card .nav-tabs .nav-link.active, html body .customernewsection-form .custapploannav.nav-tabs .nav-link.active { color: var(--lp-text) !important; background: transparent !important; border-radius: 0 !important; }
html body .nav-tabs .nav-link.active::after, html body .quation-card .nav-tabs .nav-link.active::after { transform: scaleX(1); }
html body .custapploannav span.lp-count, html body .nav-tabs span.lp-count { display: inline-grid; font-size: 11px; position: static; }
html body .custapploannav span.dot, html body .nav-tabs span.dot { display: inline-block; position: static; }
html body .nav-tabs .nav-link svg { width: 15px; height: 15px; color: var(--lp-text-4); }
html body .nav-tabs .nav-link.active svg { color: var(--lp-primary); }
html body .nav-tabs .nav-link .lp-count { font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lp-surface-3); color: var(--lp-text-3); display: inline-grid; place-items: center; }
html body .nav-tabs .nav-link.active .lp-count { background: var(--lp-primary-soft); color: var(--lp-primary); }
html body .custapploannav { margin: 0 !important; }
/* legacy vuexy pill look reset */
html body .nav-tabs .nav-link.active, html body .custapploannav .nav-link.active { box-shadow: none !important; }
html body .nav-tabs .nav-link.active::before { display: none; }

/* tab container with overflow fades + arrows (added by JS) */
.lp-tabs { position: relative; display: flex; align-items: stretch; min-width: 0; }
.lp-tabs > .nav-tabs { flex: 1; min-width: 0; }
.lp-tabs-arrow {
  position: absolute; top: 0; bottom: 1px; width: 36px; border: 0; z-index: 2; display: none; place-items: center;
  color: var(--lp-text-2); cursor: pointer;
}
.lp-tabs-arrow svg { width: 16px; height: 16px; }
.lp-tabs-arrow.l { left: 0; background: linear-gradient(90deg, var(--lp-tabs-bg, var(--lp-surface)) 55%, transparent); justify-content: start; padding-left: 4px; }
.lp-tabs-arrow.r { right: 0; background: linear-gradient(-90deg, var(--lp-tabs-bg, var(--lp-surface)) 55%, transparent); justify-content: end; padding-right: 4px; }
.lp-tabs.can-l .lp-tabs-arrow.l, .lp-tabs.can-r .lp-tabs-arrow.r { display: grid; }
.lp-tab-select { display: none; }

/* segmented sub-tabs (debit/credit/summary etc.) */
html body .lp-subtabs, html body .step-custhomapp .nav-tabs {
  display: inline-flex !important; gap: 2px; padding: 2px !important; border: 1px solid var(--lp-border) !important;
  background: var(--lp-surface-3) !important; border-radius: 9px; overflow-x: auto; max-width: 100%;
}
html body .lp-subtabs .nav-link, html body .step-custhomapp .nav-tabs .nav-link {
  height: 28px; padding: 0 12px !important; border-radius: 7px !important; font-size: 12.5px !important;
}
html body .lp-subtabs .nav-link::after, html body .step-custhomapp .nav-tabs .nav-link::after, html body .quation-card .lp-subtabs .nav-link.active::after { display: none !important; }
html body .lp-subtabs .nav-link.active, html body .step-custhomapp .nav-tabs .nav-link.active, html body .quation-card .lp-subtabs .nav-link.active, html body .quation-card .step-custhomapp .nav-tabs .nav-link.active {
  background: var(--lp-surface) !important; box-shadow: var(--lp-shadow-sm) !important; color: var(--lp-text) !important;
}
.lp-subtabs .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

html body .tab-content > .tab-pane { outline: 0; }
html body .tab-content > .tab-pane.fade { transition: opacity .18s ease; }

/* sticky tab bar */
.lp-tabbar-sticky { position: sticky; top: var(--lp-sticky-top, var(--lp-topbar-h)); z-index: 1005; background: var(--lp-surface); border-radius: var(--lp-r-lg) var(--lp-r-lg) 0 0; }

/* =================== 10 BADGES, ALERTS, CHIPS ====================== */
html body .badge {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px !important;
  font-size: 11.5px !important; font-weight: 550 !important; letter-spacing: 0; border-radius: 6px !important;
  background: var(--lp-surface-3); color: var(--lp-text-2) !important; border: 1px solid var(--lp-border); line-height: 1; white-space: nowrap;
}
html body .badge.rounded-pill { border-radius: 20px !important; }
html body .badge.bg-primary, html body .badge-light-primary { background: var(--lp-primary-soft) !important; color: var(--lp-primary) !important; border-color: transparent; }
html body .badge.bg-success, html body .badge-light-success { background: var(--lp-success-soft) !important; color: var(--lp-success-ink) !important; border-color: transparent; }
html body .badge.bg-danger, html body .badge-light-danger { background: var(--lp-danger-soft) !important; color: var(--lp-danger-ink) !important; border-color: transparent; }
html body .badge.bg-warning, html body .badge-light-warning { background: var(--lp-warning-soft) !important; color: var(--lp-warning-ink) !important; border-color: transparent; }
html body .badge.bg-info, html body .badge-light-info { background: var(--lp-info-soft) !important; color: var(--lp-info-ink) !important; border-color: transparent; }
html body .badge.bg-secondary, html body .badge-light-secondary, html body .badge.bg-light { background: var(--lp-surface-3) !important; color: var(--lp-text-2) !important; }
html body .badge.bg-dark { background: var(--lp-text) !important; color: var(--lp-surface) !important; }
html body .badge.text-dark { color: inherit !important; }
.lp-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 20px; font-size: 11.5px; font-weight: 550; white-space: nowrap; background: var(--lp-surface-3); color: var(--lp-text-2); }
.lp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.lp-status.ok { background: var(--lp-success-soft); color: var(--lp-success-ink); }
.lp-status.warn { background: var(--lp-warning-soft); color: var(--lp-warning-ink); }
.lp-status.bad { background: var(--lp-danger-soft); color: var(--lp-danger-ink); }
.lp-status.info { background: var(--lp-info-soft); color: var(--lp-info-ink); }
.lp-status.muted { background: var(--lp-surface-3); color: var(--lp-text-3); }
.lp-status.violet { background: var(--lp-violet-soft); color: var(--lp-violet-ink); }

.lp-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--lp-text); white-space: nowrap; }
.lp-type .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.lp-type .ic svg { width: 13px; height: 13px; }
.lp-type.sea .ic { background: var(--lp-info-soft); color: var(--lp-info); }
.lp-type.air .ic { background: var(--lp-violet-soft); color: var(--lp-violet); }
.lp-type.exp .ic { background: var(--lp-teal-soft); color: var(--lp-teal); }
.lp-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--lp-surface-3); color: var(--lp-text-2); border: 1px solid var(--lp-border); font-family: var(--lp-mono); white-space: nowrap; }
.lp-ref { font-family: var(--lp-mono); font-size: 12.5px; font-weight: 550; color: var(--lp-text); letter-spacing: -.01em; white-space: nowrap; }
a .lp-ref, a.lp-ref { color: var(--lp-primary); }
.lp-route { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--lp-text); }
.lp-route svg { width: 13px; height: 13px; color: var(--lp-text-4); }
.lp-sub { display: block; font-size: 11.5px; color: var(--lp-text-3); font-weight: 400; }

html body .alert {
  border-radius: var(--lp-r) !important; border: 1px solid var(--lp-border) !important; box-shadow: none !important;
  padding: 10px 12px !important; font-size: 12.5px; color: var(--lp-text-2) !important; background: var(--lp-surface-2) !important;
}
html body .alert:has(> svg), html body .alert:has(> i[data-feather]) { display: flex; gap: 8px; align-items: flex-start; }
html body .alert .alert-body { padding: 0 !important; }
html body .alert-success { background: var(--lp-success-soft) !important; border-color: color-mix(in srgb, var(--lp-success) 25%, transparent) !important; color: var(--lp-success-ink) !important; }
html body .alert-danger  { background: var(--lp-danger-soft) !important; border-color: color-mix(in srgb, var(--lp-danger) 25%, transparent) !important; color: var(--lp-danger-ink) !important; }
html body .alert-warning { background: var(--lp-warning-soft) !important; border-color: color-mix(in srgb, var(--lp-warning) 25%, transparent) !important; color: var(--lp-warning-ink) !important; }
html body .alert-info    { background: var(--lp-info-soft) !important; border-color: color-mix(in srgb, var(--lp-info) 25%, transparent) !important; color: var(--lp-info-ink) !important; }
html body .alert.d-none { display: none !important; }
html body .alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* chips / filter pills */
.lp-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.lp-chips::-webkit-scrollbar { display: none; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 20px;
  border: 1px solid var(--lp-border-2); background: var(--lp-surface); color: var(--lp-text-2);
  font-size: 12.5px; font-weight: 550; white-space: nowrap; cursor: pointer; transition: .15s; flex: none;
}
.lp-chip:hover { border-color: var(--lp-text-4); color: var(--lp-text); }
.lp-chip.active { background: var(--lp-navy); border-color: var(--lp-navy); color: #fff; }
html.lp-dark .lp-chip.active { background: var(--lp-sky); border-color: var(--lp-sky); color: var(--lp-navy); }
.lp-chip .n { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 10px; background: var(--lp-surface-3); color: var(--lp-text-3); line-height: 17px; }
.lp-chip.active .n { background: rgba(255,255,255,.18); color: inherit; }
html.lp-dark .lp-chip.active .n { background: rgba(0,0,0,.15); }
.lp-chip svg { width: 14px; height: 14px; }

/* toolbar above lists */
.lp-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--lp-border); flex-wrap: wrap; }
.lp-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.lp-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--lp-text-4); pointer-events: none; }
.lp-search input.form-control { padding-left: 32px !important; }
.lp-toolbar .sp { flex: 1; }

/* KPI stat tiles */
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lp-stat {
  background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-r-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--lp-shadow-xs); min-width: 0; position: relative; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.lp-stat:hover { border-color: var(--lp-border-2); box-shadow: var(--lp-shadow-sm); }
.lp-stat .k { font-size: 12px; color: var(--lp-text-3); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.lp-stat .k .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--lp-surface-3); color: var(--lp-text-3); }
.lp-stat .k .ic svg { width: 13px; height: 13px; }
.lp-stat .v { font-size: 22px; font-weight: 650; color: var(--lp-text); letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lp-stat .s { font-size: 11.5px; color: var(--lp-text-3); }
.lp-stat.primary .ic { background: var(--lp-primary-soft); color: var(--lp-primary); }
.lp-stat.success .ic { background: var(--lp-success-soft); color: var(--lp-success); }
.lp-stat.warning .ic { background: var(--lp-warning-soft); color: var(--lp-warning); }
.lp-stat.danger .ic { background: var(--lp-danger-soft); color: var(--lp-danger); }
.lp-stat.violet .ic { background: var(--lp-violet-soft); color: var(--lp-violet); }
.lp-stat.info .ic { background: var(--lp-info-soft); color: var(--lp-info); }
.lp-stat .trend { font-size: 11.5px; font-weight: 600; }
.lp-stat .trend.up { color: var(--lp-success); } .lp-stat .trend.down { color: var(--lp-danger); }

/* ============== 11 MODALS, DRAWERS, DROPDOWNS, POPOVERS ============ */
html body .modal-backdrop { background: #0b1220; }
html body .modal-backdrop.show { opacity: .45; }
html body .modal-content {
  background: var(--lp-surface); border: 1px solid var(--lp-border) !important; border-radius: var(--lp-r-xl) !important;
  box-shadow: var(--lp-shadow-lg) !important; overflow: hidden; color: var(--lp-text-2);
}
html body .modal-header {
  padding: 14px 16px !important; border-bottom: 1px solid var(--lp-border) !important; background: var(--lp-surface) !important;
  align-items: center; gap: 10px;
}
html body .modal-header[style*="background"] { background: var(--lp-surface) !important; }
html body .modal-header .modal-title, html body .modal-header h4, html body .modal-header h5 { font-size: 15px !important; font-weight: 650 !important; color: var(--lp-text) !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; }
html body .modal-header .modal-title.text-white { color: var(--lp-text) !important; }
html body .modal-header .btn-close-white { filter: none; }
html body .modal-header p { font-size: 12px; color: var(--lp-text-3); margin: 1px 0 0 !important; }
html body .modal-header .btn-close { margin-left: auto !important; }
html body .modal-body { padding: 16px !important; }
html body .modal-footer { padding: 12px 16px !important; border-top: 1px solid var(--lp-border) !important; background: var(--lp-surface-2); gap: 8px; }
html body .modal-footer > * { margin: 0 !important; }
html body .modal.fade .modal-dialog { transform: translateY(12px) scale(.985); transition: transform .22s var(--lp-ease), opacity .2s; }
html body .modal.show .modal-dialog { transform: none; }
/* slide-in drawer (vuexy .modal-slide-in) */
html body .modal-slide-in .modal-dialog { position: fixed; right: 0; top: 0; bottom: 0; margin: 0 !important; height: 100%; width: 380px; max-width: 100%; transform: translateX(100%) !important; transition: transform .28s var(--lp-ease) !important; }
html body .modal-slide-in.show .modal-dialog { transform: none !important; }
html body .modal-slide-in .modal-content { height: 100%; border-radius: var(--lp-r-xl) 0 0 var(--lp-r-xl) !important; border-right: 0 !important; }
html body .modal-slide-in .modal-body { overflow-y: auto; }
html body .offcanvas { background: var(--lp-surface); border-color: var(--lp-border) !important; box-shadow: var(--lp-shadow-lg); }
html body .offcanvas-header { border-bottom: 1px solid var(--lp-border); padding: 14px 16px; }

html body .dropdown-menu {
  background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; border-radius: 10px !important;
  box-shadow: var(--lp-shadow-md) !important; padding: 4px !important; min-width: 190px; font-size: 13px; margin-top: 4px !important;
  animation: lp-pop .14s var(--lp-ease);
}
@keyframes lp-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html body .dropdown-item {
  display: flex !important; align-items: center; gap: 9px; padding: 7px 10px !important; border-radius: 6px;
  color: var(--lp-text) !important; font-size: 13px; font-weight: 450;
}
html body .dropdown-item svg { width: 15px; height: 15px; color: var(--lp-text-3); }
html body .dropdown-item:hover, html body .dropdown-item:focus { background: var(--lp-surface-3) !important; color: var(--lp-text) !important; }
html body .dropdown-item.text-danger, html body .dropdown-item.text-danger svg { color: var(--lp-danger) !important; }
html body .dropdown-item.text-danger:hover { background: var(--lp-danger-soft) !important; }
html body .dropdown-divider { border-color: var(--lp-border); margin: 4px 0; }
html body .dropdown-header { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase !important; color: var(--lp-text-4); padding: 8px 10px 4px; }
html body .dropdown-toggle::after { border: 0 !important; width: 14px; height: 14px; margin-left: 2px !important; vertical-align: middle;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3e%3c/svg%3e") center/14px no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3e%3c/svg%3e") center/14px no-repeat; opacity: .7; }
html body .lp-no-caret::after { display: none !important; }
html body .tooltip-inner { background: #101828; font-size: 11.5px; padding: 5px 8px; border-radius: 6px; }

/* legacy right-click context menu on job booking cards */
#contextMenu.context-menu {
  all: unset; position: absolute; z-index: 1080; display: none; min-width: 210px;
  background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 10px; box-shadow: var(--lp-shadow-md); padding: 4px; font-size: 13px;
  list-style: none;
}
#contextMenu.context-menu ul { list-style: none; margin: 0; padding: 0; }
#contextMenu.context-menu li { position: relative; list-style: none; }
#contextMenu.context-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--lp-text); }
#contextMenu.context-menu a:hover { background: var(--lp-surface-3); color: var(--lp-text); }
#contextMenu.context-menu .divider { height: 1px; background: var(--lp-border); margin: 4px 2px; }
#contextMenu.context-menu > li.has-submenu > .submenu { position: static; display: block; box-shadow: none; border: 0; padding: 0; }
#contextMenu.context-menu .submenu .has-submenu > a::after { content: "›"; color: var(--lp-text-4); font-size: 15px; }
#contextMenu.context-menu .submenu .has-submenu > .submenu {
  display: none; position: absolute; left: 100%; top: -5px; min-width: 180px; background: var(--lp-surface);
  border: 1px solid var(--lp-border); border-radius: 10px; box-shadow: var(--lp-shadow-md); padding: 4px; margin-left: 4px;
}
#contextMenu.context-menu .submenu .has-submenu:hover > .submenu { display: block; }
#contextMenu .lp-ctx-h { font-size: 11px; font-weight: 600; color: var(--lp-text-4); padding: 6px 10px 3px; letter-spacing: .04em; text-transform: uppercase !important; }

/* command palette */
.lp-cmdk { position: fixed; inset: 0; z-index: 3000; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(11,18,32,.45); backdrop-filter: blur(3px); }
.lp-cmdk.open { display: flex; animation: lp-fade .15s; }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.lp-cmdk-box { width: 600px; max-width: 100%; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 14px; box-shadow: var(--lp-shadow-lg); overflow: hidden; animation: lp-pop .18s var(--lp-ease); }
.lp-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--lp-border); }
.lp-cmdk-in svg { width: 18px; height: 18px; color: var(--lp-text-4); }
.lp-cmdk-in input { flex: 1; height: 50px; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--lp-text); }
.lp-cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.lp-cmdk-group { font-size: 11px; font-weight: 600; color: var(--lp-text-4); padding: 8px 10px 4px; letter-spacing: .05em; text-transform: uppercase !important; }
.lp-cmdk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--lp-text); font-size: 13.5px; cursor: pointer; }
.lp-cmdk-item svg { width: 16px; height: 16px; color: var(--lp-text-3); }
.lp-cmdk-item .hint { margin-left: auto; font-size: 11.5px; color: var(--lp-text-4); }
.lp-cmdk-item.sel, .lp-cmdk-item:hover { background: var(--lp-primary-soft); color: var(--lp-primary); }
.lp-cmdk-item.sel svg { color: var(--lp-primary); }
.lp-cmdk-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--lp-border); font-size: 11.5px; color: var(--lp-text-4); background: var(--lp-surface-2); }
kbd { font-family: var(--lp-mono) !important; font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: var(--lp-surface-3); color: var(--lp-text-3); border: 1px solid var(--lp-border); box-shadow: none; font-weight: 500; }

/* mobile action sheet */
.lp-sheet { position: fixed; inset: 0; z-index: 2500; display: none; }
.lp-sheet.open { display: block; }
.lp-sheet-bg { position: absolute; inset: 0; background: rgba(11,18,32,.45); animation: lp-fade .2s; }
.lp-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--lp-surface); border-radius: 18px 18px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow: var(--lp-shadow-lg); animation: lp-up .26s var(--lp-ease); max-height: 85vh; overflow-y: auto; }
@keyframes lp-up { from { transform: translateY(100%); } to { transform: none; } }
.lp-sheet-grip { width: 38px; height: 4px; border-radius: 4px; background: var(--lp-border-2); margin: 2px auto 10px; }
.lp-sheet-title { font-size: 15px; font-weight: 650; color: var(--lp-text); padding: 0 4px 8px; }
.lp-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-sheet-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--lp-border); border-radius: 12px; color: var(--lp-text) !important; font-weight: 550; font-size: 13.5px; background: var(--lp-surface); }
.lp-sheet-item .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--lp-primary-soft); color: var(--lp-primary); }
.lp-sheet-item .ic svg { width: 18px; height: 18px; }
.lp-sheet-item small { font-size: 11.5px; color: var(--lp-text-3); font-weight: 400; margin-top: -6px; }

/* ================= 12 VENDOR WIDGETS ============================== */
/* jQuery UI autocomplete */
html body .ui-autocomplete, html body ul.ui-menu {
  background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; border-radius: 10px !important;
  box-shadow: var(--lp-shadow-md) !important; padding: 4px !important; max-height: 280px; overflow-y: auto; overflow-x: hidden; z-index: 2100 !important;
  font-family: var(--lp-font) !important; font-size: 13px !important; list-style: none;
}
html body .ui-menu .ui-menu-item { margin: 0; list-style: none; }
html body .ui-menu .ui-menu-item-wrapper, html body .ui-menu .ui-menu-item a {
  padding: 7px 10px !important; border-radius: 6px !important; border: 0 !important; color: var(--lp-text) !important; margin: 0 !important; font-weight: 450; background: transparent;
}
html body .ui-menu .ui-menu-item-wrapper.ui-state-active, html body .ui-menu .ui-state-focus, html body .ui-menu .ui-menu-item-wrapper:hover {
  background: var(--lp-primary-soft) !important; color: var(--lp-primary) !important; border: 0 !important; margin: 0 !important;
}
html body .ui-helper-hidden-accessible { display: none; }
/* select2 */
html body .select2-container--default .select2-selection--single, html body .select2-container--classic .select2-selection--single {
  height: var(--lp-ctl-h) !important; border: 1px solid var(--lp-border-2) !important; border-radius: var(--lp-r) !important; background: var(--lp-surface) !important; box-shadow: var(--lp-shadow-xs);
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--lp-ctl-h) - 2px) !important; padding-left: 10px !important; color: var(--lp-text) !important; font-size: 13px; }
html body .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--lp-ctl-h) - 2px) !important; }
html body .select2-container--default .select2-selection--multiple { min-height: var(--lp-ctl-h); border: 1px solid var(--lp-border-2) !important; border-radius: var(--lp-r) !important; background: var(--lp-surface) !important; }
html body .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--lp-primary-soft) !important; border: 0 !important; color: var(--lp-primary) !important; border-radius: 5px !important; font-size: 12px; }
html body .select2-container--focus .select2-selection, html body .select2-container--open .select2-selection { border-color: var(--lp-primary) !important; box-shadow: var(--lp-ring) !important; }
html body .select2-dropdown { border: 1px solid var(--lp-border) !important; border-radius: 10px !important; box-shadow: var(--lp-shadow-md); background: var(--lp-surface) !important; overflow: hidden; }
html body .select2-results__option { padding: 7px 10px !important; font-size: 13px; color: var(--lp-text); }
html body .select2-container--default .select2-results__option--highlighted[aria-selected], html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--lp-primary-soft) !important; color: var(--lp-primary) !important; }
html body .select2-search--dropdown .select2-search__field { border: 1px solid var(--lp-border-2) !important; border-radius: 7px; height: 30px; background: var(--lp-surface); color: var(--lp-text); }
/* flatpickr */
html body .flatpickr-calendar { background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; border-radius: 12px !important; box-shadow: var(--lp-shadow-md) !important; font-family: var(--lp-font) !important; }
html body .flatpickr-day { border-radius: 8px !important; color: var(--lp-text) !important; }
html body .flatpickr-day:hover { background: var(--lp-surface-3) !important; border-color: transparent !important; }
html body .flatpickr-day.selected, html body .flatpickr-day.startRange, html body .flatpickr-day.endRange { background: var(--lp-primary) !important; border-color: var(--lp-primary) !important; color: #fff !important; }
html body .flatpickr-day.inRange { background: var(--lp-primary-soft) !important; box-shadow: none !important; border-color: transparent !important; }
html body .flatpickr-day.today { border-color: var(--lp-p-300) !important; }
html body .flatpickr-months .flatpickr-month, html body .flatpickr-current-month, html body span.flatpickr-weekday { color: var(--lp-text) !important; fill: var(--lp-text) !important; background: transparent !important; }
/* SweetAlert2 */
html body .swal2-popup { border-radius: 16px !important; padding: 20px 20px 16px !important; background: var(--lp-surface) !important; border: 1px solid var(--lp-border); font-family: var(--lp-font) !important; box-shadow: var(--lp-shadow-lg) !important; width: 26em !important; }
html body .swal2-title { font-size: 17px !important; font-weight: 650 !important; color: var(--lp-text) !important; padding: 4px 0 0 !important; }
html body .swal2-html-container { font-size: 13px !important; color: var(--lp-text-2) !important; margin: 8px 0 0 !important; line-height: 1.55; }
html body .swal2-html-container ul { text-align: left; padding-left: 18px; margin: 0; }
html body .swal2-icon { transform: scale(.72); margin: 4px auto 0 !important; }
html body .swal2-actions { gap: 8px; margin-top: 18px !important; }
html body .swal2-styled { border-radius: 8px !important; height: 34px; padding: 0 16px !important; font-size: 13px !important; font-weight: 550 !important; margin: 0 !important; box-shadow: none !important; }
html body .swal2-styled.swal2-confirm { background: var(--lp-primary) !important; }
html body .swal2-styled.swal2-cancel { background: var(--lp-surface) !important; color: var(--lp-text) !important; border: 1px solid var(--lp-border-2) !important; }
html body .swal2-styled.swal2-deny { background: var(--lp-danger) !important; }
html body .swal2-popup.swal2-toast { width: auto !important; min-width: 280px; max-width: 420px; padding: 10px 14px !important; border-radius: 12px !important; box-shadow: var(--lp-shadow-md) !important; }
html body .swal2-popup.swal2-toast .swal2-title { font-size: 13px !important; font-weight: 550 !important; margin: 0 6px !important; }
html body .swal2-popup.swal2-toast .swal2-icon { transform: none; margin: 0 !important; width: 1.4em !important; height: 1.4em !important; min-width: 1.4em; }
html body .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: .9em !important; }
html body .swal2-timer-progress-bar { background: var(--lp-primary) !important; opacity: .35; }
html body .swal2-container.swal2-backdrop-show { background: rgba(11,18,32,.45) !important; }
/* summernote / quill */
html body .note-editor.note-frame, html body .ql-toolbar, html body .ql-container { border-color: var(--lp-border-2) !important; border-radius: var(--lp-r); background: var(--lp-surface); }
html body .note-toolbar { background: var(--lp-surface-2) !important; border-bottom: 1px solid var(--lp-border) !important; }

/* ============ 13 STATES (loading / empty / error) ================== */
.lp-empty { text-align: center; padding: 36px 16px; color: var(--lp-text-3); }
.lp-empty .art {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px; display: grid; place-items: center;
  background: var(--lp-surface-3); color: var(--lp-text-3); border: 1px solid var(--lp-border);
}
.lp-empty .art svg { width: 24px; height: 24px; }
.lp-empty h6 { font-size: 14px; margin: 0 0 3px; color: var(--lp-text) !important; }
.lp-empty p { font-size: 12.5px; margin: 0 auto; max-width: 340px; }
.lp-empty .btn { margin-top: 12px; }
.lp-error { border: 1px dashed color-mix(in srgb, var(--lp-danger) 40%, var(--lp-border)); border-radius: var(--lp-r); background: var(--lp-danger-soft); color: var(--lp-danger-ink); padding: 14px; text-align: center; font-size: 12.5px; }
.lp-skel { position: relative; overflow: hidden; background: var(--lp-surface-3); border-radius: 6px; height: 12px; }
.lp-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: lp-shimmer 1.3s infinite; }
html.lp-dark .lp-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes lp-shimmer { to { transform: translateX(100%); } }
.lp-skel-rows td { padding: 12px !important; }
.lp-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: lp-rot .7s linear infinite; vertical-align: -3px; }
@keyframes lp-rot { to { transform: rotate(360deg); } }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: lp-rot .7s linear infinite; }
.btn-secondary.is-loading::after, .btn-light.is-loading::after { border-color: var(--lp-text-3); border-right-color: transparent; }
td.lp-loading-cell { padding: 22px !important; color: var(--lp-text-3); text-align: center; }

/* ============================ 14 UTILITIES ========================== */
.lp-muted { color: var(--lp-text-3) !important; }
.lp-num { font-variant-numeric: tabular-nums; }
.lp-gap-6 { gap: 6px !important; } .lp-gap-8 { gap: 8px !important; }
.lp-hide-desktop { display: none !important; }
.lp-flex { display: flex; align-items: center; gap: 8px; }
.lp-grow { flex: 1; min-width: 0; }
.lp-pill-note { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--lp-surface-3); color: var(--lp-text-3); font-size: 12px; }
.lp-pill-note svg { width: 14px; height: 14px; }
.lp-kv-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lp-text-3); }
.lp-kv-inline b { color: var(--lp-text); font-weight: 600; }
.lp-box { border: 1px solid var(--lp-border); border-radius: var(--lp-r); padding: 10px 12px; background: var(--lp-surface-2); }
.w-auto-important { width: auto !important; }
.lp-sticky-bottom { position: sticky; bottom: 0; z-index: 5; }

/* legacy classes from theme/style.css we still see in some pages */
html body .newheader.border-bottom { border-color: var(--lp-border) !important; }
html body .pocreate-sticky .content-header-title { margin-bottom: 0 !important; }
html body .footerplogo { display: none; }
html body .headerlogo, html body .left-baricontop, html body .erpnewheader { display: none !important; }
html body .inline-label textarea { width: 100%; }

/* dark-mode fixes for Bootstrap bits that hardcode white */
html.lp-dark .table { color: var(--lp-text-2); }
html.lp-dark .bg-white, html.lp-dark .card, html.lp-dark .modal-content, html.lp-dark .dropdown-menu { background: var(--lp-surface) !important; }
html.lp-dark [style*="background:#fff"], html.lp-dark [style*="background: #fff"], html.lp-dark [style*="background-color: #fff"], html.lp-dark [style*="background:white"] { background: var(--lp-surface) !important; }
html.lp-dark .text-dark { color: var(--lp-text) !important; }
html.lp-dark .shadow-sm { box-shadow: var(--lp-shadow-sm) !important; }
html.lp-dark .form-select, html.lp-dark select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d98ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3e%3c/svg%3e") !important; }
html.lp-dark .apexcharts-text, html.lp-dark .apexcharts-legend-text { fill: var(--lp-text-3) !important; color: var(--lp-text-3) !important; }

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- dense generic forms (all other modules): more fields per row at 100% zoom ---- */
html body form .card-body .row > [class*="col-"].mb-3, html body .card-body form .row > [class*="col-"].mb-3,
html body .customernewsection-form .row > [class*="col-"].mb-3 { margin-bottom: 10px !important; }
html body form .card-body .row, html body .customernewsection-form .row { --bs-gutter-x: 14px; }
@media (min-width: 1200px) {
  html body form .card-body .row > .col-md-6:not(.lp-keep):not(:has(textarea)):not(:has(table)),
  html body .customernewsection-form .row > .col-md-6:not(.lp-keep):not(:has(textarea)):not(:has(table)) { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 1500px) {
  html body form .card-body .row > .col-md-4:not(.lp-keep):not(:has(textarea)):not(:has(table)),
  html body .customernewsection-form .row > .col-md-4:not(.lp-keep):not(:has(textarea)):not(:has(table)) { flex: 0 0 25%; max-width: 25%; }
}

/* ====================== 15 RESPONSIVE / MOBILE ====================== */
@media (max-width: 1199.98px) {
  :root { --lp-page-pad: 16px; }
  .lp-topbar-search { width: 200px; }
  .lp-user-btn .meta { display: none; }
}

/* tablet & phone: sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {
  html body .app-content, body.lp-rail .app-content,
  body.vertical-layout.vertical-menu-modern .app-content, body.vertical-layout .app-content, html body.lp-rail .app-content { margin-left: 0 !important; }
  .lp-topbar, body.lp-rail .lp-topbar { margin-left: 0; }
  .lp-sidebar { transform: translateX(-102%); width: min(300px, 86vw) !important; box-shadow: var(--lp-shadow-lg); }
  body.lp-rail .lp-sidebar * { } /* rail disabled on mobile */
  body.lp-rail .lp-sidebar .lp-wordmark, body.lp-rail .lp-sidebar .lp-sb-label, body.lp-rail .lp-sidebar .lp-sb-user-meta,
  body.lp-rail .lp-sidebar .lp-sb-search span, body.lp-rail .lp-sidebar .lp-sb-caret { display: initial !important; }
  body.lp-rail .lp-sidebar .lp-sb-link { justify-content: flex-start; padding: 0 8px; }
  body.lp-rail .lp-sidebar .lp-sb-brand a { display: flex; }
  body.lp-drawer .lp-sidebar { transform: none; }
  .lp-sb-collapse { display: none; }
  .lp-sb-backdrop { display: block; position: fixed; inset: 0; z-index: 1030; background: rgba(11,18,32,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.lp-drawer .lp-sb-backdrop { opacity: 1; pointer-events: auto; }
  body.lp-drawer { overflow: hidden; }
  .lp-sb-link { height: 40px; font-size: 14px; }
  .lp-sb-sub .lp-sb-link { height: 38px; font-size: 13.5px; }
  .lp-topbar .lp-topbar-menu { display: inline-grid; margin-left: -6px; }
  .lp-topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--lp-text); font-size: 15px; letter-spacing: -.02em; }
  .lp-topbar-brand .lp-logo { width: 30px; height: 30px; border-radius: 50%; }
  .lp-crumbs { display: none; }
  .lp-topbar-search { width: auto; max-width: none; margin-left: auto; padding: 0; border: 0; background: transparent; }
  .lp-topbar-search span, .lp-topbar-search kbd { display: none; }
  .lp-topbar-search { width: 34px; height: 34px; justify-content: center; border-radius: 8px; color: var(--lp-text-3); }
  .lp-hide-tablet { display: none !important; }
}

@media (max-width: 767.98px) {
  :root { --lp-page-pad: 12px; --lp-ctl-h: 40px; --lp-ctl-h-sm: 36px; --lp-ctl-fs: 16px; --lp-label-fs: 12.5px; --lp-card-pad: 12px; --lp-topbar-h: 54px; }
  html { font-size: 15px; }
  html, html body { overflow-x: clip; }
  html body .card-body > table.table:not(.lp-cardify), html body .modal-body > table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html body, body.vertical-layout { font-size: 14px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .lp-hide-mobile { display: none !important; }
  .lp-hide-desktop { display: initial !important; }
  .lp-show-mobile-flex { display: flex !important; }
  html body .content-wrapper.container-xxl, html body .app-content .content-wrapper { padding: 10px 12px 20px !important; }

  /* page header -> app style */
  html body .content-header .content-header-title, .lp-ph-title { font-size: 20px !important; }
  html body .content-header { align-items: flex-start; }
  html body .content-header .content-header-right { width: 100% !important; }
  html body .content-header .breadcrumb-right { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; width: 100%; }
  html body .content-header .breadcrumb-right::-webkit-scrollbar { display: none; }
  html body .content-header .breadcrumb-right .btn { flex: none; }
  html body .content-header .breadcrumb-right .btn-secondary:first-child:has(svg) { display: none; } /* "Back" is redundant on mobile – browser/OS back */
  html body .breadcrumb-wrapper { display: none; }
  html body .content-header.pocreate-sticky, .lp-page-sticky { margin: -10px -12px 10px !important; padding: 8px 12px !important; }
  .lp-ph { gap: 10px; }
  .lp-ph-actions { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lp-ph-actions::-webkit-scrollbar { display: none; }
  .lp-ph-actions .btn { flex: none; }
  .lp-ph-icon { width: 34px; height: 34px; }
  .lp-page-sticky.lp-stuck .lp-ph-sub, .lp-page-sticky.lp-stuck .lp-ph-icon, .lp-page-sticky.lp-stuck .lp-ph-title .badge { display: none !important; }
  .lp-page-sticky.lp-stuck .lp-ph-title { font-size: 16px !important; }
  .lp-page-sticky.lp-stuck .lp-ph { gap: 6px; }
  .lp-job-tabbar { position: static !important; }

  /* touch-friendly controls */
  html body .btn { --lp-btn-h: 40px; font-size: 14px !important; padding: 0 14px !important; border-radius: 10px !important; }
  html body .btn-sm { --lp-btn-h: 36px; font-size: 13.5px !important; }
  html body .form-control, html body .form-select { border-radius: 10px !important; }
  html body textarea.form-control { font-size: 16px !important; }
  html body .form-check-input { width: 20px; height: 20px; }
  html body .form-check { min-height: 32px; padding-left: 30px; }
  html body .form-check .form-check-input { margin-left: -30px; }
  html body .nav-tabs .nav-link { height: 44px; font-size: 14px !important; padding: 0 14px !important; }
  .lp-act { width: 36px; height: 36px; }
  html body .card { border-radius: 14px !important; }
  html body .card-header { padding: 10px 12px !important; }

  /* grid: bootstrap columns collapse to single column naturally */
  html body .row > [class*="col-md-"], html body .row > [class*="col-lg-"], html body .row > [class*="col-xl-"] { flex: 0 0 100%; max-width: 100%; }
  html body .row > .col-6[class*="col-md-"], html body .row > .col-sm-6[class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }
  html body .ms-5 { margin-left: 0 !important; }

  /* tab selector for long tab sets (added by JS) */
  .lp-tabs.has-select .lp-tab-select { display: block; }
  .lp-tabs.has-select:not(.is-seg) { display: none !important; }
  .lp-tab-select { padding-bottom: 10px; border-bottom: 1px solid var(--lp-border); }
  .lp-tab-select { position: relative; padding: 8px 12px 0; }
  .lp-tab-select select.form-select { font-weight: 600; background-color: var(--lp-surface-2) !important; }
  .lp-tab-select .lbl { font-size: 11px; color: var(--lp-text-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase !important; margin-bottom: 4px; display: block; }
  .lp-tabs-arrow { display: none !important; }

  /* datatables toolbar stacks */
  html body .dataTables_wrapper > .row > [class*="col-"], html body .dataTables_wrapper > .d-flex > [class*="col-"] { flex: 0 0 100%; max-width: 100%; text-align: left !important; }
  html body .dataTables_filter input { width: 100% !important; }
  html body .dataTables_filter label { width: 100%; }
  html body .dataTables_length { display: none; }
  html body .dataTables_wrapper .dt-action-buttons { display: none; }
  html body .dataTables_info { font-size: 12px !important; }
  html body .dataTables_paginate { justify-content: center; }

  /* table -> card list on phones (JS adds .lp-cardify + data-label) */
  html body table.lp-cardify, html body table.lp-cardify tbody, html body table.lp-cardify tr, html body table.lp-cardify td { display: block; width: 100% !important; }
  html body table.lp-cardify thead { display: none; }
  html body .lp-cardify-wrap .dataTables_scrollHead { display: none !important; }
  html body .lp-cardify-wrap .dataTables_scrollBody { overflow: visible !important; height: auto !important; max-height: none !important; }
  html body .lp-cardify-wrap .dataTables_scrollBody thead { display: none; }
  html body table.lp-cardify tbody tr {
    position: relative; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--lp-border); border-radius: 12px;
    background: var(--lp-surface); box-shadow: var(--lp-shadow-xs);
  }
  html body table.lp-cardify tbody { padding: 10px; }
  html body table.lp-cardify tbody tr:hover > * { background: transparent !important; }
  html body table.lp-cardify tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 5px 0 !important; border: 0 !important; text-align: right; font-size: 13.5px; min-height: 28px;
    position: static !important; box-shadow: none !important; background: transparent !important;
  }
  html body table.lp-cardify tbody td::before { content: attr(data-label); font-size: 12px; font-weight: 500; color: var(--lp-text-3); text-align: left; flex: none; max-width: 45%; }
  html body table.lp-cardify tbody td[data-label=""]::before, html body table.lp-cardify tbody td[data-label="#"]::before { display: none; }
  html body table.lp-cardify tbody td[data-label="#"] { display: none; }
  html body table.lp-cardify tbody td.lp-card-title { font-size: 15px; font-weight: 650; justify-content: flex-start; text-align: left; padding-bottom: 6px !important; border-bottom: 1px solid var(--lp-border) !important; margin-bottom: 4px; }
  html body table.lp-cardify tbody td.lp-card-title::before { display: none; }
  html body table.lp-cardify tbody td:last-child { justify-content: flex-end; border-top: 1px solid var(--lp-border) !important; margin-top: 6px; padding-top: 8px !important; }
  html body table.lp-cardify tbody td:last-child::before { display: none; }
  html body table.lp-cardify tbody td:last-child .d-flex, html body table.lp-cardify tbody td:last-child .lp-actions { justify-content: flex-end !important; flex-wrap: wrap; width: 100%; gap: 4px !important; }
  html body table.lp-cardify tbody td.dataTables_empty { display: block; text-align: center; }
  html body table.lp-cardify tbody td.dataTables_empty::before { display: none; }
  html body table.lp-cardify tbody tr:has(td.dataTables_empty) { border: 0; box-shadow: none; background: transparent; padding: 0; }

  /* edit-grid tables stay horizontally scrollable with sticky first column */
  html body .po-order-detail .form-control, html body .vs-table .form-control { height: 38px; font-size: 15px !important; min-width: 110px; }
  html body .table-responsive { -webkit-overflow-scrolling: touch; }

  /* modals become bottom sheets */
  html body .modal-dialog:not(.modal-fullscreen) { margin: 0 !important; max-width: 100% !important; position: fixed; left: 0; right: 0; bottom: 0; min-height: 0 !important; display: block; }
  html body .modal-dialog-centered { align-items: flex-end; }
  html body .modal-content { border-radius: 18px 18px 0 0 !important; max-height: 92vh; border-bottom: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }
  .lp-bk-head .acts { flex-wrap: wrap; }
  .lp-bk-head .lp-bk-jobno { flex: 1 1 100%; }
  html body .modal-body { overflow-y: auto; }
  html body .modal.fade .modal-dialog { transform: translateY(100%); }
  html body .modal.show .modal-dialog { transform: none; }
  html body .modal-header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; border-radius: 4px; background: var(--lp-border-2); transform: translateX(-50%); }
  html body .modal-header { position: relative; padding-top: 18px !important; }
  html body .modal-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  html body .modal-footer .btn { flex: 1; }
  html body .modal-slide-in .modal-dialog { width: 100%; top: auto; height: auto; transform: translateY(100%) !important; }
  html body .modal-slide-in .modal-content { border-radius: 18px 18px 0 0 !important; }

  /* bottom nav */
  .lp-bottomnav {
    display: none !important; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--lp-surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--lp-border);
  }
  .lp-bottomnav a, .lp-bottomnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--lp-text-3) !important; font-size: 10.5px; font-weight: 550; background: transparent; border: 0; position: relative;
  }
  .lp-bottomnav svg { width: 21px; height: 21px; stroke-width: 1.8; }
  .lp-bottomnav .active { color: var(--lp-primary) !important; }
  .lp-bottomnav .active::before { content: ""; position: absolute; top: 0; width: 26px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--lp-primary); }
  .lp-bottomnav .lp-fab .ring { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--lp-primary); color: #fff; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--lp-primary) 60%, transparent); margin-top: -14px; }
  .lp-bottomnav .lp-fab .ring svg { width: 22px; height: 22px; }
  .lp-bottomnav .lp-fab { color: var(--lp-text-2) !important; }

  .lp-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lp-stat { padding: 10px 12px; }
  .lp-stat .v { font-size: 19px; }
  .lp-tiles { grid-template-columns: 1fr 1fr; }
  .lp-toolbar { padding: 10px; }
  .lp-search { max-width: none; flex-basis: 100%; }
  .swal2-popup:not(.swal2-toast) { width: calc(100vw - 24px) !important; }
  .swal2-popup.swal2-toast { max-width: calc(100vw - 24px); }
  #contextMenu.context-menu { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  #contextMenu.context-menu .submenu .has-submenu > .submenu { position: static; display: block; box-shadow: none; border: 0; margin: 0 0 0 10px; }
}

@media (min-width: 768px) {
  .lp-show-mobile-flex { display: none !important; }
}

/* ============================ 16 PRINT ============================ */
@media print {
  .lp-sidebar, .lp-topbar, .lp-bottomnav, .content-header .breadcrumb-right, .lp-ph-actions { display: none !important; }
  html body .app-content { margin: 0 !important; }
  html body .card { box-shadow: none !important; border-color: #ddd !important; }
}

/* ---------------- "LogiPulse by BN Tech" credit ---------------- */
.lp-credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-left: var(--lp-sb-w); padding: 14px var(--lp-page-pad) 18px; font-size: 12px; color: var(--lp-text-4); }
.lp-credit a { color: var(--lp-text-3); font-weight: 600; }
.lp-credit a:hover { color: var(--lp-primary); }
.lp-credit .bn { display: inline-flex; align-items: center; gap: 7px; }
.lp-bn-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lp-bn-yellow); display: inline-grid; place-items: center; color: var(--lp-bn-yellow); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.lp-credit .tag { letter-spacing: .14em; text-transform: uppercase !important; font-size: 10.5px; font-weight: 600; }
.lp-credit .tag b, .lp-credit .tag { text-transform: uppercase !important; } .lp-credit .tag b { color: var(--lp-primary); font-weight: 700; }

@media (max-width: 991.98px) { .lp-credit { margin-left: 0; justify-content: center; text-align: center; padding-bottom: 8px; } }

/* ---------------- uniform row actions (applied by logipulse-ui.js) ---------------- */
html body .btn.lp-act, html body a.btn.lp-act, html body button.btn.lp-act {
  width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 1px !important;
  display: inline-grid !important; place-items: center; flex: none;
  border-radius: 8px !important; border: 1px solid transparent !important;
  background: transparent !important; color: var(--lp-text-3) !important; box-shadow: none !important;
}
html body .btn.lp-act svg { width: 15px !important; height: 15px !important; margin: 0 !important; }
html body .btn.lp-act:hover { background: var(--lp-surface-3) !important; color: var(--lp-text) !important; border-color: var(--lp-border) !important; }
html body .btn.lp-act.primary:hover { background: var(--lp-primary-soft) !important; color: var(--lp-primary) !important; border-color: transparent !important; }
html body .btn.lp-act.danger:hover { background: var(--lp-danger-soft) !important; color: var(--lp-danger) !important; border-color: transparent !important; }
html body .btn.lp-act.success:hover { background: var(--lp-success-soft) !important; color: var(--lp-success) !important; border-color: transparent !important; }
html body td.lp-actions-cell { white-space: nowrap; }
html body td.lp-actions-cell > form, html body td.lp-actions-cell .d-flex > form, html body .lp-actions > form { display: inline-flex !important; margin: 0 !important; }
html body td.lp-actions-cell > .d-flex, html body td.lp-actions-cell > div { gap: 2px !important; justify-content: flex-start; flex-wrap: nowrap; }
/* same look for the hand-built .lp-act links */
.lp-act { border: 1px solid transparent; }
.lp-act:hover { border-color: var(--lp-border); }
.lp-act.primary:hover, .lp-act.danger:hover, .lp-act.success:hover { border-color: transparent; }
@media (max-width: 767.98px) { html body .btn.lp-act { width: 38px !important; height: 38px !important; } }

/* rail credit: BN Tech mark */
.lp-navrail-by { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 12px; position: relative; transition: background-color .15s; }
.lp-navrail-by:hover { background: rgba(255,255,255,.07); }
.lp-navrail-by svg { width: 26px; height: 26px; display: block; }
.lp-navrail-by::after { content: "LogiPulse by BN Tech"; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px);
  white-space: nowrap; background: #0e1d38; color: #fff; font-size: 12px; font-weight: 550; padding: 6px 10px; border-radius: 8px; box-shadow: var(--lp-shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.lp-navrail-by:hover::after { opacity: 1; transform: translateY(-50%); }
.lp-navrail-by b { display: none; }

/* =============== separators & table lines (light blue, all pages) =============== */
hr, html body hr { border-color: var(--lp-line) !important; opacity: 1; }
.lp-sec-title { color: var(--lp-thead-ink); }
.lp-sec-title::after { background: var(--lp-line) !important; height: 1px; }
.lp-divide, .lp-navrail-sep { }
html body .card-header, .lp-card-h, html body .modal-header { border-bottom-color: var(--lp-line) !important; }
html body .card-footer, .lp-card-f, html body .modal-footer { border-top-color: var(--lp-line) !important; }
html body .nav-tabs { border-bottom-color: var(--lp-line) !important; }
.lp-toolbar, html body .dataTables_wrapper > .row:first-child, html body .dataTables_wrapper > .d-flex:first-child { border-bottom-color: var(--lp-line) !important; }
html body .dataTables_wrapper > .row:last-child, html body .dataTables_wrapper > .d-flex:last-child { border-top-color: var(--lp-line) !important; }
.lp-facts { border-color: var(--lp-line) !important; }
.lp-fact { border-color: var(--lp-line) !important; }
.lp-party, .lp-box { border-color: var(--lp-line) !important; }
.lp-tab-select { border-bottom-color: var(--lp-line) !important; }
.lp-bk-head { border-bottom-color: var(--lp-line) !important; }
.lp-job-route .line { background: repeating-linear-gradient(90deg, var(--lp-line) 0 5px, transparent 5px 9px) !important; }

/* tables: blue-tinted header, clear row lines, soft zebra */
html body .table { border-color: var(--lp-line); }
html body .table > :not(caption) > * > * { border-bottom-color: var(--lp-line-soft) !important; }
html body .table tbody tr > * { border-bottom: 1px solid var(--lp-line-soft) !important; }
html body .table thead th, html body .table > thead > tr > th, html body table.dataTable thead th,
html body .newdesignerptable.po-order-detail tr th, html body .custnewpo-detail.po-order-detail tr th, html body .po-order-detail thead th, html body .vs-table thead th {
  background: var(--lp-thead) !important; color: var(--lp-thead-ink) !important; border-bottom: 1px solid var(--lp-line) !important;
}
html body .table tbody tr:nth-of-type(even) > * { background: var(--lp-zebra); }
html body .table tbody tr:hover > * { background: var(--lp-hover) !important; }
html body .table tfoot th, html body .table tfoot td { border-top: 1px solid var(--lp-line) !important; }
html body .table-bordered, html body .po-order-detail, html body .newdesignerptable, html body .vs-table, html body .lp-edit-table { border-color: var(--lp-line) !important; }
html body .table-bordered > :not(caption) > * > *, html body .po-order-detail > :not(caption) > * > *, html body .vs-table > :not(caption) > * > *, html body .lp-edit-table > :not(caption) > * > * { border-right-color: var(--lp-line-soft) !important; border-bottom-color: var(--lp-line) !important; }
html body .newdesignerptable.po-order-detail.border { border-color: var(--lp-line) !important; }
html body .table-responsive[style*="border"] { border-color: var(--lp-line) !important; }
html body .tableistlastcolumnfixed tbody td:last-child { border-bottom-color: var(--lp-line-soft) !important; }
html body .tableistlastcolumnfixed thead th:last-child { background: var(--lp-thead) !important; }
/* mobile cards */
@media (max-width: 767.98px) {
  html body table.lp-cardify tbody tr { border-color: var(--lp-line) !important; }
  html body table.lp-cardify tbody tr > * { background: transparent !important; border-bottom: 0 !important; }
  html body table.lp-cardify tbody td.lp-card-title, html body table.lp-cardify tbody td:last-child { border-color: var(--lp-line-soft) !important; }
}
html body .tableistlastcolumnfixed tbody tr:nth-of-type(even) td:last-child { background: linear-gradient(var(--lp-zebra), var(--lp-zebra)), var(--lp-surface) !important; }
html body .tableistlastcolumnfixed tbody tr:hover td:last-child { background: var(--lp-hover) !important; }

/* =============== thicker, clearly visible separators (LogiPulse sky) =============== */
:root { --lp-line-w: 2px; --lp-row-w: 1.5px; }
hr, html body hr { border-top-width: var(--lp-line-w) !important; }
.lp-sec-title::after { height: var(--lp-line-w) !important; border-radius: 2px; }
html body .card-header, .lp-card-h, html body .modal-header, .lp-bk-head, .lp-toolbar,
html body .dataTables_wrapper > .row:first-child, html body .dataTables_wrapper > .d-flex:first-child { border-bottom-width: var(--lp-line-w) !important; }
html body .card-footer, .lp-card-f, html body .modal-footer,
html body .dataTables_wrapper > .row:last-child, html body .dataTables_wrapper > .d-flex:last-child { border-top-width: var(--lp-line-w) !important; }
html body .nav-tabs { border-bottom-width: var(--lp-line-w) !important; }
html body .nav-tabs .nav-link::after { height: 3px !important; bottom: calc(-1 * var(--lp-line-w)) !important; }
/* cards & panels */
html body .card, .lp-card, .lp-stat, .lp-party, .lp-facts, .lp-box { border-width: 1.5px !important; border-color: var(--lp-line-soft) !important; }
.lp-fact { border-right-width: 1.5px !important; border-bottom-width: 1.5px !important; margin: 0 -1.5px -1.5px 0 !important; }
/* tables */
html body .table thead th, html body .table > thead > tr > th, html body table.dataTable thead th,
html body .newdesignerptable.po-order-detail tr th, html body .custnewpo-detail.po-order-detail tr th, html body .po-order-detail thead th, html body .vs-table thead th {
  border-bottom: var(--lp-line-w) solid var(--lp-line) !important;
}
html body .table tbody tr > *, html body .table > :not(caption) > * > * { border-bottom: var(--lp-row-w) solid var(--lp-line-soft) !important; }
html body .table tbody tr:last-child > * { border-bottom-width: 0 !important; }
html body .table tfoot th, html body .table tfoot td { border-top: var(--lp-line-w) solid var(--lp-line) !important; }
html body .po-order-detail, html body .newdesignerptable, html body .vs-table, html body .lp-edit-table, html body .table-bordered { border: 1.5px solid var(--lp-line) !important; }
html body .po-order-detail > :not(caption) > * > *, html body .vs-table > :not(caption) > * > *, html body .lp-edit-table > :not(caption) > * > *, html body .table-bordered > :not(caption) > * > * {
  border-right: var(--lp-row-w) solid var(--lp-line-soft) !important; border-bottom: var(--lp-row-w) solid var(--lp-line) !important;
}
html body .table-responsive[style*="border"] { border-width: 1.5px !important; }
@media (max-width: 767.98px) {
  html body table.lp-cardify tbody tr { border-width: 1.5px !important; }
  html body table.lp-cardify tbody td.lp-card-title, html body table.lp-cardify tbody td:last-child { border-width: 0 !important; border-top-width: 0 !important; }
  html body table.lp-cardify tbody td.lp-card-title { border-bottom: 1.5px solid var(--lp-line-soft) !important; }
  html body table.lp-cardify tbody td:last-child { border-top: 1.5px solid var(--lp-line-soft) !important; }
}

/* =====================================================================
   Light theme surfaces: white page · light-grey cards · light-blue inputs
   (approved "ib white" look — dark mode keeps its own palette)
   ===================================================================== */
html:not(.lp-dark) {
  --lp-bg: #ffffff;
  --lp-surface: #f1f3f6;      /* cards, panels, tables */
  --lp-surface-2: #e9ecf0;
  --lp-thead: #e3f1f8;
  --lp-zebra: #edf0f4;
  --lp-readonly: #d9e8f1;
  --lp-input: #e8f4fb;        /* input boxes: light LogiPulse blue */
  --lp-input-border: #a9d8ea;
}
html:not(.lp-dark) body, html:not(.lp-dark) body.lp-body { background: #ffffff !important; }
html:not(.lp-dark) .lp-topbar { background: color-mix(in srgb, #ffffff 88%, transparent); }
html:not(.lp-dark) .lp-page-sticky, html:not(.lp-dark) body .content-header.pocreate-sticky { background: color-mix(in srgb, #ffffff 92%, transparent); }

/* input boxes */
html:not(.lp-dark) body .form-control, html:not(.lp-dark) body .form-select, html:not(.lp-dark) body select.form-control,
html:not(.lp-dark) body .dataTables_filter input, html:not(.lp-dark) body .dataTables_length select,
html:not(.lp-dark) body .input-group-text, html:not(.lp-dark) body .select2-container--default .select2-selection--single,
html:not(.lp-dark) body .select2-container--default .select2-selection--multiple, html:not(.lp-dark) .lp-topbar-search {
  background-color: var(--lp-input) !important; border-color: var(--lp-input-border) !important;
}
html:not(.lp-dark) body .form-control:focus, html:not(.lp-dark) body .form-select:focus, html:not(.lp-dark) body .dataTables_filter input:focus { background-color: #ffffff !important; }
html:not(.lp-dark) body .form-control[readonly], html:not(.lp-dark) body .form-control:disabled, html:not(.lp-dark) body .form-select:disabled, html:not(.lp-dark) body .tk-frozen {
  background-color: var(--lp-readonly) !important; color: #3f4a5e !important; border-color: #c4dfec !important;
}
/* grid-editing tables keep transparent cells until hovered/focused */
html:not(.lp-dark) body .po-order-detail .form-control, html:not(.lp-dark) body .vs-table .form-control { background-color: transparent !important; border-color: transparent !important; }
html:not(.lp-dark) body .po-order-detail .form-control:hover, html:not(.lp-dark) body .po-order-detail .form-control:focus,
html:not(.lp-dark) body .vs-table .form-control:hover, html:not(.lp-dark) body .vs-table .form-control:focus { background-color: var(--lp-input) !important; border-color: var(--lp-input-border) !important; }
html:not(.lp-dark) body .po-order-detail .form-control[readonly] { background-color: var(--lp-readonly) !important; }
html:not(.lp-dark) body .input-group > .btn.openPartyModal, html:not(.lp-dark) body .input-group > .btn-primary:last-child { background: #d9ecf6 !important; border-color: var(--lp-input-border) !important; }
html:not(.lp-dark) .lp-party { background: #e7eaee !important; }
html:not(.lp-dark) .lp-party textarea.form-control, html:not(.lp-dark) .lp-party .input-group > .form-control { background-color: var(--lp-input) !important; }
/* keep pop-ups, menus and secondary buttons crisp white */
html:not(.lp-dark) body .modal-content, html:not(.lp-dark) body .dropdown-menu, html:not(.lp-dark) .lp-fly, html:not(.lp-dark) .lp-cmdk-box,
html:not(.lp-dark) body .ui-autocomplete, html:not(.lp-dark) body .select2-dropdown, html:not(.lp-dark) body .swal2-popup, html:not(.lp-dark) .lp-sheet-panel { background: #ffffff !important; }
html:not(.lp-dark) body .modal-body .card, html:not(.lp-dark) body .modal-body .lp-card { background: var(--lp-surface) !important; }
html:not(.lp-dark) body .btn-secondary, html:not(.lp-dark) body .btn-light, html:not(.lp-dark) body .btn-outline-secondary { background: #ffffff !important; }
html:not(.lp-dark) body .btn-secondary:hover, html:not(.lp-dark) body .btn-light:hover, html:not(.lp-dark) body .btn-outline-secondary:hover { background: #eef3f7 !important; }
html:not(.lp-dark) .lp-chip:not(.active) { background: #ffffff; }
html:not(.lp-dark) .lp-chip.active { background: var(--lp-navy); border-color: var(--lp-navy); color: #fff; }
html:not(.lp-dark) .lp-tile { background: #ffffff; }
html:not(.lp-dark) .lp-bk-pill { background: #ffffff; }
html:not(.lp-dark) .lp-bk-pill.active { background: var(--lp-primary-soft); }
html:not(.lp-dark) .lp-seg { background: #e3e7ec; }
html:not(.lp-dark) .lp-seg input:checked + label, html:not(.lp-dark) .lp-seg .lp-seg-btn.active,
html:not(.lp-dark) body .lp-subtabs .nav-link.active, html:not(.lp-dark) body .quation-card .lp-subtabs .nav-link.active { background: #ffffff !important; }
html:not(.lp-dark) body .lp-subtabs { background: #e3e7ec !important; }
html:not(.lp-dark) .lp-stat .k .ic, html:not(.lp-dark) .lp-tile .ic { background: #e6eaef; }
html:not(.lp-dark) body .page-item.active .page-link { background: #ffffff !important; }
html:not(.lp-dark) .lp-auth-main .form-control { background-color: var(--lp-input) !important; }
html:not(.lp-dark) .lp-auth-main .form-control:focus { background-color: #fff !important; }