/* ============================================================
   Logisti Admin Redesign theme
   Loaded last: overrides AdminLTE 4 / Bootstrap 5 / custom-css.
   Tokens and patterns come from "Logisti Admin Redesign.dc.html".
   ============================================================ */

:root {
  --lg-red: #d50000;
  --lg-red-dark: #ad0202;
  --lg-red-soft: #fff0ef;
  --lg-red-border: #ffd7d3;
  --lg-ink: #10172a;
  --lg-body: #475467;
  --lg-muted: #667085;
  --lg-faint: #98a2b3;
  --lg-line: #eceef2;
  --lg-line-strong: #e3e6ec;
  --lg-line-faint: #f2f4f7;
  --lg-bg: #f5f6f8;
  --lg-bg-thead: #fafbfc;
  --lg-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --lg-pop-shadow: 0 16px 40px -12px rgba(16, 24, 40, 0.28);
  --lg-radius: 16px;
  --lg-radius-sm: 10px;
  --lg-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lg-green-bg: #ecfdf3;
  --lg-green-fg: #027a48;
  --lg-amber-bg: #fffaeb;
  --lg-amber-fg: #b54708;
  --lg-blue-bg: #eef4ff;
  --lg-blue-fg: #2d5bd7;
  --lg-violet-bg: #f4f3ff;
  --lg-violet-fg: #5d4bd7;
  --lg-rose-bg: #fef3f2;
  --lg-rose-fg: #b42318;
  --lg-grey-bg: #f2f4f7;
  --lg-grey-fg: #475467;
}

/* ---------- Base ---------- */

body {
  font-family: var(--lg-font) !important;
  background-color: var(--lg-bg) !important;
  color: var(--lg-ink);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lg-font);
  letter-spacing: -0.02em;
  color: var(--lg-ink);
}

a {
  color: var(--lg-red);
  text-decoration: none;
}

a:not(.btn):hover {
  color: var(--lg-red-dark) !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #d7dbe2;
  border-radius: 999px;
  border: 3px solid var(--lg-bg);
}

::-webkit-scrollbar-track {
  background: transparent;
}

input::placeholder,
textarea::placeholder {
  color: var(--lg-faint) !important;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lg-red);
  outline-offset: 2px;
}

.bg-body-tertiary {
  background-color: var(--lg-bg) !important;
}

/* ---------- App header ---------- */

.app-header.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--lg-line);
  box-shadow: none;
  min-height: 72px;
}

.app-header .container-fluid {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  gap: 12px;
}

.app-header .nav-link {
  color: #344054 !important;
}

/* icon buttons in the header (sidebar toggle, fullscreen) */
.app-header .navbar-nav .nav-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm);
  background: #ffffff;
  color: #344054 !important;
  padding: 0;
  margin: 0 2px;
  font-size: 15px;
}

.app-header .navbar-nav .nav-link:hover {
  background: var(--lg-bg);
  color: var(--lg-ink) !important;
}

/* page identity block inside the header */
.lg-page-head {
  min-width: 0;
  line-height: 1.25;
  margin-left: 8px;
}

.lg-page-head h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--lg-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-page-head .breadcrumb {
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  font-size: 12.5px;
  --bs-breadcrumb-divider-color: var(--lg-faint);
}

.lg-page-head .breadcrumb-item,
.lg-page-head .breadcrumb-item a {
  color: var(--lg-faint);
  font-weight: 500;
}

.lg-page-head .breadcrumb-item.active {
  color: var(--lg-muted);
}

/* page info popover (moved Overview/Instructions blocks) */
.lg-info-btn {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lg-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  flex: none;
}

.lg-info-btn:hover,
.lg-info-btn.open {
  color: var(--lg-red);
}

.lg-info-pop {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: 0;
  z-index: 80;
  width: 430px;
  max-width: 90vw;
  background: #ffffff;
  border: 1px solid var(--lg-line);
  border-radius: 14px;
  box-shadow: var(--lg-pop-shadow);
  padding: 18px 20px;
  font-size: 13.5px;
  color: var(--lg-body);
  white-space: normal;
}

.lg-info-pop strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lg-muted);
  margin: 14px 0 6px;
}

.lg-info-pop strong:first-child {
  margin-top: 0;
}

.lg-info-pop p {
  margin: 0 0 4px;
  line-height: 1.5;
}

.lg-info-pop ul {
  margin: 0;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}

.lg-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm);
  font-size: 13px;
  color: #344054;
  background: #ffffff;
}

.lg-date-chip i {
  color: var(--lg-muted);
  font-size: 14px;
}

.lg-header-divider {
  width: 1px;
  height: 30px;
  background: var(--lg-line);
  align-self: center;
  margin: 0 6px;
}

/* language toggle (EN / ع) */
.lg-lang-toggle {
  display: inline-flex;
  background: #f1f3f6;
  border-radius: 10px;
  padding: 3px;
}

.lg-lang-toggle button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--lg-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--lg-muted);
  cursor: pointer;
  padding: 6px 11px;
}

.lg-lang-toggle button.active {
  background: #ffffff;
  color: var(--lg-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* notifications bell */
.lg-bell-dot {
  position: absolute;
  top: 8px;
  inset-inline-end: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lg-red);
  border: 1.5px solid #ffffff;
}

.lg-bell-menu {
  width: 380px;
  max-width: 92vw;
  padding: 0 !important;
  overflow: hidden;
}

.lg-bell-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lg-ink);
  padding: 14px 16px;
  border-bottom: 1px solid var(--lg-line-faint);
}

.lg-bell-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}

.lg-bell-item {
  display: flex;
  gap: 11px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--lg-ink);
  text-decoration: none;
}

.lg-bell-item:hover {
  background: var(--lg-bg);
  color: var(--lg-ink) !important;
}

.lg-bell-item .lg-bell-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--lg-red-soft);
  color: var(--lg-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 15px;
}

.lg-bell-item.read .lg-bell-ic {
  background: var(--lg-grey-bg);
  color: var(--lg-muted);
}

.lg-bell-item .lg-bell-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.lg-bell-item .lg-bell-desc {
  font-size: 12.5px;
  color: var(--lg-muted);
  margin-top: 2px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lg-bell-item .lg-bell-time {
  font-size: 11.5px;
  color: var(--lg-faint);
  margin-top: 3px;
}

.lg-bell-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--lg-faint);
  font-size: 13.5px;
}

.lg-bell-foot {
  display: flex;
  justify-content: flex-end;
  padding: 11px 16px;
  background: var(--lg-bg-thead);
  border-top: 1px solid var(--lg-line-faint);
}

.lg-bell-foot a {
  font-size: 12.5px;
  font-weight: 700;
}

.lg-bell-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lg-red);
  flex: none;
  margin-top: 6px;
}

/* unread count in the bell head (was unstyled — .lg-tab-count is scoped to tabs) */
.lg-bell-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lg-red);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lg-bell-markall {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--lg-muted);
  text-decoration: none;
}

.lg-bell-markall:hover {
  color: var(--lg-red);
}

/* Realtime notification toaster (admin-notify.js) — same visual language as
   the bell items: icon chip + title + body, stacked below the header on the
   inline-end side (flips automatically in RTL). Auto-closes with a progress
   bar; × closes immediately; hover pauses the timer. */
#lgToastStack {
  position: fixed;
  top: 64px;
  inset-inline-end: 16px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.lg-toast {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px 14px;
  background: #fff;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm);
  box-shadow: var(--lg-pop-shadow);
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: var(--lg-font);
}

.lg-toast .lg-bell-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--lg-red-soft);
  color: var(--lg-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 15px;
}

.lg-toast--in {
  opacity: 1;
  transform: translateY(0);
}

.lg-toast--out {
  opacity: 0;
  transform: translateY(-8px);
}

.lg-toast-body {
  min-width: 0;
  flex: 1;
}

.lg-toast-title {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--lg-ink);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-toast-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--lg-muted);
  overflow: hidden;
  overflow-wrap: anywhere;
}

.lg-toast-close {
  flex: none;
  border: none;
  background: transparent;
  color: var(--lg-faint);
  font-size: 12px;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.lg-toast-close:hover {
  color: var(--lg-ink);
  background: var(--lg-bg);
}

.lg-toast-progress {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  background: var(--lg-red);
  transition-property: width;
  transition-timing-function: linear;
}

.lg-inbox-list .lg-bell-item {
  border-bottom: 1px solid var(--lg-line-faint);
  border-radius: 0;
  padding: 13px 16px;
}

.lg-inbox-list .lg-bell-item:last-child {
  border-bottom: 0;
}

/* user chip */
.app-header .user-menu > .nav-link {
  width: auto;
  height: auto;
  border: 0;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
}

.app-header .user-menu .user-image {
  width: 36px;
  height: 36px;
  margin: 0;
  box-shadow: none !important;
}

.app-header .user-menu .lg-user-meta {
  line-height: 1.3;
  text-align: start;
}

.app-header .user-menu .lg-user-meta .lg-user-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lg-ink);
  display: block;
}

.app-header .user-menu .lg-user-meta .lg-user-role {
  font-size: 12px;
  color: var(--lg-faint);
  display: block;
}

.app-header .user-menu .dropdown-menu {
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  box-shadow: var(--lg-pop-shadow);
  padding: 6px;
  min-width: 220px;
  margin-top: 10px;
}

.app-header .user-menu .dropdown-menu .dropdown-item,
.app-header .user-menu .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lg-ink);
  padding: 9px 10px;
}

.app-header .user-menu .dropdown-menu a:hover {
  background: var(--lg-bg);
  color: var(--lg-ink) !important;
}

.app-header .user-menu .dropdown-menu .lg-menu-danger {
  color: var(--lg-rose-fg);
}

.app-header .user-menu .dropdown-menu .lg-menu-danger:hover {
  background: var(--lg-rose-bg);
  color: var(--lg-rose-fg) !important;
}

.app-header .user-menu .dropdown-divider {
  margin: 4px 6px;
  border-color: var(--lg-line-faint);
  opacity: 1;
}

/* ---------- Sidebar ---------- */

.app-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid var(--lg-line);
  box-shadow: none !important;
}

.app-sidebar .sidebar-brand {
  background-color: #ffffff !important;
  border-bottom: 0;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.app-sidebar .sidebar-brand .brand-link {
  padding: 0;
}

.app-sidebar .sidebar-brand .brand-image {
  height: 26px;
  max-height: 26px;
  width: auto;
  margin: 0;
}

.lg-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lg-faint);
  padding: 10px 14px 8px;
}

.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .lg-sidebar-label {
  visibility: hidden;
}

.app-sidebar .sidebar-wrapper {
  padding: 0 10px 16px;
}

.app-sidebar .nav-link,
.app-sidebar .sidebar-menu > .nav-item > .nav-link {
  color: var(--lg-body) !important;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--lg-radius-sm);
  margin: 1px 0;
  padding-top: 0.52rem;
  padding-bottom: 0.52rem;
  position: relative;
}

.app-sidebar .nav-link:hover {
  background-color: var(--lg-bg) !important;
  color: var(--lg-ink) !important;
}

.app-sidebar .nav-icon {
  color: var(--lg-faint);
  font-size: 1.05rem;
}

.app-sidebar .nav-link:hover .nav-icon {
  color: var(--lg-muted);
}

/* active state: soft red pill + left marker */
.app-sidebar .sidebar-menu .nav-item > .nav-link.active {
  background-color: var(--lg-red-soft) !important;
  color: var(--lg-red) !important;
  font-weight: 700;
  box-shadow: none;
}

.app-sidebar .sidebar-menu .nav-item > .nav-link.active .nav-icon {
  color: var(--lg-red);
}

.app-sidebar .sidebar-menu > .nav-item > .nav-link.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 999px;
  background: var(--lg-red);
}

/* open parents of the active submenu keep a quiet style */
.app-sidebar .sidebar-menu .nav-item.menu-open > .nav-link.active:not(:hover) {
  background-color: transparent !important;
  color: var(--lg-ink) !important;
}

.app-sidebar .sidebar-menu .nav-item.menu-open > .nav-link.active::before {
  display: none;
}

/* submenu tree — v4 design: level 1 sits in a soft grey container,
   level 2+ hangs off a thin inline rule */
.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview {
  margin: 3px 0 6px;
  padding: 4px;
  background: #f7f8fa;
  border-radius: 10px;
  border-left: 0;
}

.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-link {
  font-size: 13px;
  min-height: 34px;
  border-radius: 8px;
}

.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active {
  background-color: #ffffff !important;
  color: var(--lg-red) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* third level and deeper */
.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-treeview {
  background: transparent;
  border-radius: 0;
  margin: 1px 0 4px;
  margin-inline-start: 15px;
  padding: 0 0 0 12px;
  border-inline-start: 1.5px solid #e6e9ef;
}

.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-treeview .nav-link {
  min-height: 30px;
  font-size: 12.5px;
  border-radius: 7px;
}

.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-treeview .nav-treeview .nav-link.active {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* bullet placeholder for icon-less items */
.sidebar-wrapper .sidebar-menu.sidebar-structured .nav-icon.nav-bullet::before {
  background-color: #cbd2dd;
  width: 0.32rem;
  height: 0.32rem;
}

.app-sidebar .nav-link.active .nav-bullet::before {
  background-color: var(--lg-red) !important;
}

.app-sidebar .nav-arrow {
  color: #b6bece;
}

/* pending-count badges (design: red pill after the menu label) */
.app-sidebar .badge,
.app-sidebar .badge-red,
.app-sidebar .lg-nav-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--lg-red);
  background-color: var(--lg-red-soft) !important;
  border-radius: 999px;
  padding: 2px 7px;
}

.app-sidebar .lg-nav-badge {
  display: inline-block;
  line-height: 1.45;
  margin-inline-start: 6px;
  vertical-align: middle;
}

.app-sidebar .lg-nav-badge:empty {
  display: none;
}

/* AdminLTE truncates the whole <p>, so a long title used to eat the badge and
   the chevron with it. Lay the row out instead: only the label may ellipsize,
   the count and arrow always keep their space. */
.app-sidebar .sidebar-menu .nav-link > p.lg-nav-text {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

/* the label gives up width first; it never grows, so the count stays beside the
   title rather than drifting to the far edge */
.app-sidebar .sidebar-menu .nav-link > p.lg-nav-text > .lg-nav-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar .sidebar-menu .nav-link > p.lg-nav-text > .lg-nav-badge {
  flex: 0 0 auto;
  margin-inline-start: 0;
}

/* the chevron closes the row */
.app-sidebar .sidebar-menu .nav-link > p.lg-nav-text > .nav-arrow {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* sidebar footer: fixed sign-out (design) */
.app-sidebar {
  display: flex;
  flex-direction: column;
}

.app-sidebar .sidebar-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.lg-sidebar-footer {
  border-top: 1px solid var(--lg-line);
  padding: 0 12px;
  height: 62px;
  min-height: 62px;
  display: flex;
  align-items: center;
  flex: none;
  background: #ffffff;
}

.lg-sidebar-footer .lg-sidebar-signout {
  width: 100%;
}

.lg-sidebar-signout {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--lg-muted) !important;
  text-decoration: none;
}

.lg-sidebar-signout i {
  font-size: 16px;
  color: var(--lg-faint);
}

.lg-sidebar-signout:hover {
  background: var(--lg-rose-bg);
  color: var(--lg-rose-fg) !important;
}

.lg-sidebar-signout:hover i {
  color: var(--lg-rose-fg);
}

.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .lg-sidebar-signout span {
  display: none;
}

/* collapsed rail keeps a clean white look */
.sidebar-mini.sidebar-collapse .app-sidebar {
  background-color: #ffffff !important;
}

/* ---------- Content & footer ---------- */

.app-content {
  padding-top: 8px;
}

.app-main {
  background-color: var(--lg-bg);
}

.app-footer {
  background-color: #ffffff;
  border-top: 1px solid var(--lg-line);
  color: var(--lg-faint);
  font-size: 12.5px;
  font-weight: 400;
  height: 62px;
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 0 28px;
}

.app-footer strong {
  font-weight: 400;
}

.app-footer a {
  font-weight: 600;
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-card-shadow);
  background: #ffffff;
}

.card.card-outline,
.card.card-primary.card-outline {
  border-top: 1px solid var(--lg-line) !important;
}

.card > .card-header {
  background: #ffffff;
  border-bottom: 1px solid var(--lg-line-faint);
  border-radius: var(--lg-radius) var(--lg-radius) 0 0 !important;
  padding: 16px 20px;
}

.card .card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--lg-ink);
  /* AdminLTE floats the title. Any description put beside it in the same header
     then wrapped AROUND the title instead of starting underneath, which is how
     "Campaign Basics" ended up with its helper text running along its right.
     Nothing in this app uses .card-tools, so the float buys us nothing. */
  float: none;
  display: block;
}

.card > .card-body {
  padding: 20px;
}

.card > .card-footer {
  background: var(--lg-bg-thead);
  border-top: 1px solid var(--lg-line);
  border-radius: 0 0 var(--lg-radius) var(--lg-radius) !important;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--lg-font);
  border-radius: var(--lg-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0.52rem 1rem;
  box-shadow: none !important;
  /* match the 42px form controls so filter/search rows line up */
  min-height: 42px;
}

.btn-sm,
.btn-close,
.table .btn,
table.dataTable .btn {
  min-height: 0;
}

.btn-sm {
  border-radius: 8px;
  font-size: 12.5px;
  padding: 0.32rem 0.75rem;
}

.btn-primary,
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lg-red);
  --bs-btn-border-color: var(--lg-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lg-red-dark);
  --bs-btn-hover-border-color: var(--lg-red-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lg-red-dark);
  --bs-btn-active-border-color: var(--lg-red-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e98a8a;
  --bs-btn-disabled-border-color: #e98a8a;
  font-weight: 700;
}

.btn-secondary,
.btn-default,
.btn-light,
.btn-outline-secondary {
  --bs-btn-color: #344054;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--lg-line-strong);
  --bs-btn-hover-color: var(--lg-ink);
  --bs-btn-hover-bg: var(--lg-bg);
  --bs-btn-hover-border-color: var(--lg-line-strong);
  --bs-btn-active-color: var(--lg-ink);
  --bs-btn-active-bg: var(--lg-bg);
  --bs-btn-active-border-color: var(--lg-line-strong);
  --bs-btn-disabled-color: var(--lg-faint);
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: var(--lg-line-strong);
}

.btn-danger {
  --bs-btn-bg: #b42318;
  --bs-btn-border-color: #b42318;
  --bs-btn-hover-bg: #912018;
  --bs-btn-hover-border-color: #912018;
  --bs-btn-active-bg: #912018;
  --bs-btn-active-border-color: #912018;
}

.btn-outline-primary {
  --bs-btn-color: var(--lg-red);
  --bs-btn-border-color: var(--lg-red-border);
  --bs-btn-hover-color: var(--lg-red);
  --bs-btn-hover-bg: var(--lg-red-soft);
  --bs-btn-hover-border-color: var(--lg-red-border);
  --bs-btn-active-color: var(--lg-red);
  --bs-btn-active-bg: var(--lg-red-soft);
  --bs-btn-active-border-color: var(--lg-red-border);
}

.btn-info,
.btn-warning {
  border-radius: var(--lg-radius-sm);
}

/* ---------- Forms ---------- */

label,
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--lg-ink);
  margin-bottom: 7px;
}

.form-control,
.form-select {
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm);
  font-family: var(--lg-font);
  font-size: 13.5px;
  color: var(--lg-ink);
  min-height: 42px;
  padding: 0.5rem 0.85rem;
}

textarea.form-control {
  min-height: 88px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--lg-red);
  box-shadow: 0 0 0 3px rgba(213, 0, 0, 0.08);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--lg-bg-thead);
  color: var(--lg-muted);
}

.form-floating > .form-control {
  min-height: 52px;
}

.form-floating > label {
  color: var(--lg-faint);
  font-weight: 500;
}

.form-check-input {
  width: 16px;
  height: 16px;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  margin-top: 0.18em;
}

.form-check-input:checked {
  background-color: var(--lg-red);
  border-color: var(--lg-red);
}

.form-check-input:focus {
  border-color: var(--lg-red);
  box-shadow: 0 0 0 3px rgba(213, 0, 0, 0.08);
}

.form-switch .form-check-input {
  width: 2.6em;
  height: 1.45em;
  border-radius: 999px;
}

/* Bootstrap reserves 2.5em for the track and starts the label at its right edge.
   Our track is wider than that, so the label was sitting on top of the switch.
   Reserve the real width plus a gap, in logical units so RTL flips with it. */
.form-switch {
  padding-inline-start: 3.35em;
}

.form-switch .form-check-input {
  margin-inline-start: -3.35em;
  margin-left: 0;
}

/* checkboxes and radios: keep a readable gap between control and label */
.form-check .form-check-label {
  padding-inline-start: 2px;
}

.input-group-text {
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm) 0 0 var(--lg-radius-sm);
  background: var(--lg-bg-thead);
  color: var(--lg-muted);
  font-size: 13px;
  /* site.css sets height:100%, which collapses to content height inside the
     flex group and detaches the icon box — stretch to the input instead */
  height: auto;
  align-self: stretch;
  min-height: 42px;
  display: flex;
  align-items: center;
}

/* legacy selects use .form-control — give them the .form-select chevron so
   they read as dropdowns, not dead inputs */
select.form-control {
  -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'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 13px 13px;
  padding-inline-end: 2.3rem;
}

select.form-control[multiple] {
  background-image: none;
  padding-inline-end: 0.85rem;
}

[dir="rtl"] select.form-control {
  background-position: left 0.85rem center;
}

.required-label::after {
  color: var(--lg-red);
}

/* select2 to match inputs */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--lg-line-strong) !important;
  border-radius: var(--lg-radius-sm) !important;
  min-height: 42px;
  font-family: var(--lg-font);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  color: var(--lg-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}

.select2-dropdown {
  border: 1px solid var(--lg-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--lg-pop-shadow);
  overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--lg-red-soft);
  color: var(--lg-red);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--lg-grey-bg);
  border: 0;
  border-radius: 6px;
  color: var(--lg-grey-fg);
  font-size: 12px;
  font-weight: 600;
}

/* A multi-select with nothing chosen used to look like a plain text box - no hint
   it was a dropdown at all ("All roles" read as a disabled input). Give it the
   same caret a single select has, and room for it. The bootstrap-5 theme draws
   no arrow on multiples, so draw one. */
.select2-container--bootstrap-5 .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  position: relative;
  padding-inline-end: 28px;
  cursor: pointer;
}

.select2-container--bootstrap-5 .select2-selection--multiple::after,
.select2-container--default .select2-selection--multiple::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border-inline-start: 5px solid transparent;
  border-inline-end: 5px solid transparent;
  border-top: 6px solid var(--lg-faint);
  pointer-events: none;
}

/* the placeholder should read like a prompt, not disabled text */
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--lg-faint);
  opacity: 1;
}

/* validation */
.text-danger,
.field-validation-error {
  color: #b42318 !important;
  font-size: 12.5px;
}

.needs-validation .input-validation-error:not([type="checkbox"]) {
  border-color: #f04438;
}

.needs-validation .input-validation-error:focus {
  border-color: #f04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}

.needs-validation .valid:not([type="checkbox"]) {
  border-color: var(--lg-line-strong);
  background-image: none;
}

.needs-validation .valid:focus {
  border-color: var(--lg-red);
  box-shadow: 0 0 0 3px rgba(213, 0, 0, 0.08);
}

/* ---------- Tables / DataTables ---------- */

.table {
  font-size: 13.5px;
  color: var(--lg-ink);
  --bs-table-striped-bg: transparent;
  margin-bottom: 0.4rem;
}

.table > :not(caption) > * > * {
  padding: 13px 14px;
  border-bottom-color: var(--lg-line-faint);
}

/* header: quiet grey instead of the legacy red */
.cus-table-header,
.cus-table-header th,
.cus-table-header tr th,
.table thead th,
table.dataTable thead th {
  background-color: var(--lg-bg-thead) !important;
  color: var(--lg-muted) !important;
  font-size: 12.5px;
  font-weight: 600 !important;
  text-align: start;
  border-bottom: 1px solid var(--lg-line) !important;
  white-space: nowrap;
  padding: 12px 14px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
}

.table tbody tr:hover > * {
  background-color: var(--lg-bg-thead);
}

.table td {
  vertical-align: middle;
  color: var(--lg-ink);
}

/* legacy zebra classes applied by dataTablesHelper */
tr.rowstyle td,
tr.Altrowstyle td {
  background-color: transparent;
}

/* kill striping across bootstrap/adminlte variable generations — design rows are white */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  --bs-table-bg-type: transparent;
  --bs-table-accent-bg: transparent;
  background-color: transparent;
}

/* tables stay inside the card; cells compress instead of creating horizontal scroll */
.card-body > .dataTables_wrapper > .row > [class*="col-"]:has(> .dataTable),
.card-body > .dataTables_wrapper > .row > [class*="col-"]:has(> table) {
  overflow: visible;
  min-width: 0;
}

.card-body > .dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* fallback containment: whatever still leaks gets clipped, never scrolled */
.card-body:has(> table),
.card-body:has(> .dataTables_wrapper),
.card-body:has(> .table-responsive) {
  overflow-x: clip;
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  min-width: 0;
}

.dataTables_wrapper,
.dataTables_wrapper .row,
.dataTables_wrapper [class*="col-"] {
  max-width: 100%;
  min-width: 0;
}

.table,
table.dataTable {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
}

.table th,
.table td,
table.dataTable th,
table.dataTable td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* opt-out for cells that read better wrapped over two lines (set per view) */
.table th.lg-wrap,
.table td.lg-wrap,
table.dataTable th.lg-wrap,
table.dataTable td.lg-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere; /* IBANs, emails: break long tokens instead of overlapping */
}

.table td img,
table.dataTable td img {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

/* wrap-opted cells (QR previews, thumbnails that stack) may run larger */
.table td.lg-wrap img,
table.dataTable td.lg-wrap img {
  max-width: 64px;
  max-height: 64px;
}

.table td .badge,
table.dataTable td .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.table td.large-value,
table.dataTable td.large-value {
  cursor: help;
}

/* sort glyphs */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
  color: var(--lg-faint);
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 0 !important;
  background: transparent !important;
  padding: 0;
  margin: 0 2px;
}

.page-item .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lg-line-strong);
  border-radius: 8px !important;
  background: #ffffff;
  color: var(--lg-grey-fg) !important;
  font-size: 12.5px;
  font-weight: 500;
  margin: 0 2px;
  padding: 0 8px;
  box-shadow: none !important;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a {
  background-color: var(--lg-red) !important;
  border-color: var(--lg-red) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.page-item.disabled .page-link {
  color: var(--lg-faint) !important;
  background: #ffffff;
  border-color: var(--lg-line);
}

.dataTables_wrapper .dataTables_info {
  color: var(--lg-muted);
  font-size: 12.5px;
}

.dataTables_wrapper .dataTables_processing {
  border-radius: 12px;
  border: 1px solid var(--lg-line);
  box-shadow: var(--lg-pop-shadow);
  color: var(--lg-muted);
  font-size: 13px;
}

/* ---------- Table row actions (design: quiet 32px white buttons) ---------- */

/* the compacted actions column: one 32px ⋯ button (or a lone icon control) */
.table th.lg-table-actions-head,
table.dataTable th.lg-table-actions-head {
  width: 64px !important;
  /* legacy "Actions" caption is noise next to a ⋯ column; needs !important
     to beat the .cus-table-header th color */
  color: transparent !important;
  overflow: hidden;
}

.table td.lg-table-actions-cell,
table.dataTable td.lg-table-actions-cell {
  overflow: visible; /* the menu must escape the cell */
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
}

.table td.lg-table-actions-cell a:not(.btn):not(.dropdown-item):has(> i:only-child),
table.dataTable td.lg-table-actions-cell a:not(.btn):not(.dropdown-item):has(> i:only-child) {
  margin-inline-end: 0;
}

.table .btn,
table.dataTable .btn {
  height: 32px;
  padding: 2px 12px;
  border: 1px solid var(--lg-line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  box-shadow: none !important;
}

.table .btn:hover,
table.dataTable .btn:hover {
  background: var(--lg-bg);
  border-color: var(--lg-line-strong);
  color: var(--lg-ink);
}

/* destructive row actions keep a red hint without going solid */
.table .btn-danger,
table.dataTable .btn-danger {
  color: #b42318;
  border-color: #fecdca;
}

.table .btn-danger:hover,
table.dataTable .btn-danger:hover {
  background: var(--lg-rose-bg);
  color: #912018;
  border-color: #fecdca;
}

/* bare icon links in action columns (legacy `<a><i class="bi bi-pencil"/></a>` pattern)
   become the design's quiet 32px icon buttons */
.table td a:not(.btn):not(.dropdown-item):has(> i:only-child),
table.dataTable td a:not(.btn):not(.dropdown-item):has(> i:only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lg-line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: #344054 !important;
  margin-inline-end: 4px;
  font-size: 14px;
  vertical-align: middle;
}

.table td a:not(.btn):not(.dropdown-item):has(> i:only-child):hover,
table.dataTable td a:not(.btn):not(.dropdown-item):has(> i:only-child):hover {
  background: var(--lg-bg);
  color: var(--lg-ink) !important;
  border-color: #d0d5dd;
}

/* ---------- Badges / status tags ---------- */

.badge {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  letter-spacing: 0;
}

.badge.bg-success,
.badge.text-bg-success,
.badge.badge-success {
  background-color: var(--lg-green-bg) !important;
  color: var(--lg-green-fg) !important;
}

.badge.bg-danger,
.badge.text-bg-danger,
.badge.badge-danger {
  background-color: var(--lg-rose-bg) !important;
  color: var(--lg-rose-fg) !important;
}

.badge.bg-warning,
.badge.text-bg-warning,
.badge.badge-warning {
  background-color: var(--lg-amber-bg) !important;
  color: var(--lg-amber-fg) !important;
}

.badge.bg-info,
.badge.text-bg-info,
.badge.badge-info {
  background-color: var(--lg-blue-bg) !important;
  color: var(--lg-blue-fg) !important;
}

.badge.bg-primary,
.badge.text-bg-primary,
.badge.badge-primary {
  background-color: var(--lg-red-soft) !important;
  color: var(--lg-red) !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.badge-secondary {
  background-color: var(--lg-grey-bg) !important;
  color: var(--lg-grey-fg) !important;
}

/* list chips (recipients, channels, tags): quiet grey squares per design */
.badge.bg-light,
.badge.bg-info-subtle,
.badge.text-bg-light {
  background-color: var(--lg-grey-bg) !important;
  color: var(--lg-grey-fg) !important;
  border: 0 !important;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
}

/* ---------- Alerts (soft note cards) ---------- */

.alert {
  border-radius: 12px;
  font-size: 13.5px;
  border-width: 1px;
}

.alert-warning {
  background-color: #fff8f7 !important;
  border-color: #ffe0dd !important;
  color: #98443c !important;
}

.alert-warning strong {
  color: #7c1005;
}

.alert-info {
  background-color: var(--lg-blue-bg);
  border-color: #d9e4ff;
  color: #2d5bd7;
}

.alert-success {
  background-color: var(--lg-green-bg);
  border-color: #bbf0d0;
  color: var(--lg-green-fg);
}

.alert-danger {
  background-color: var(--lg-rose-bg);
  border-color: #fecdca;
  color: var(--lg-rose-fg);
}

.alert-light {
  background-color: var(--lg-bg-thead);
  border-color: var(--lg-line) !important;
  color: var(--lg-muted);
}

/* ---------- Tabs ---------- */

/* bootstrap tab navs = the design's segmented control (dashboard-style).
   List-page filter tabs use .lg-list-tabs (underline style) instead. */
.nav-tabs {
  display: inline-flex;
  border-bottom: 0;
  background: #eef0f4;
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  flex-wrap: wrap;
}

.nav-tabs .nav-item {
  margin-bottom: 0;
}

.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--lg-muted) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  margin-bottom: 0;
}

.nav-tabs .nav-link .lg-tab-ic {
  font-size: 14px;
  color: var(--lg-faint);
}

.nav-tabs .nav-link:hover {
  color: var(--lg-ink) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--lg-ink) !important;
  background-color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.nav-tabs .nav-link.active .lg-tab-ic {
  color: var(--lg-red);
}

/* nav-pills become the design's segmented control (detail-page tabs) */
.nav-pills {
  display: inline-flex;
  background: #eef0f4;
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}

.nav-pills .nav-link {
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lg-muted);
  padding: 8px 15px;
}

.nav-pills .nav-link:hover {
  color: var(--lg-ink);
  background: rgba(255, 255, 255, 0.6);
}

.nav-pills .nav-link.active {
  background-color: #ffffff;
  color: var(--lg-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* ---------- Modals ---------- */

.modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 32px 64px -16px rgba(16, 24, 40, 0.36);
  overflow: hidden;
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--lg-line-faint);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--lg-ink);
}

.modal-header .close,
.modal-header .btn-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lg-line-strong);
  border-radius: 9px;
  background-color: #ffffff;
  color: var(--lg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-size: 15px;
}

.modal-header .close:hover {
  color: var(--lg-ink) !important;
  background: var(--lg-bg);
}

.modal-body {
  padding: 22px 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--lg-line-faint);
  background: var(--lg-bg-thead);
}

.modal-backdrop.show {
  opacity: 0.45;
  background-color: #101828;
}

/* ---------- Notification editor (design modal) ---------- */

.lg-lang-panel {
  background: var(--lg-bg-thead);
  border: 1px solid var(--lg-line);
  border-radius: 14px;
  padding: 16px 18px;
  height: 100%;
}

.lg-lang-panel .form-control {
  background: #ffffff;
}

.lg-lang-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lg-muted);
  margin-bottom: 14px;
}

.lg-matrix-wrap {
  border: 1px solid var(--lg-line);
  border-radius: 14px;
  overflow: hidden;
}

.lg-matrix-table thead th {
  padding: 11px 16px;
}

.lg-matrix-table tbody td {
  padding: 11px 16px;
  vertical-align: middle;
}

.lg-matrix-table tbody tr:last-child td {
  border-bottom: 0;
}

.lg-matrix-table .form-check-input {
  width: 17px;
  height: 17px;
  margin-top: 0;
  vertical-align: middle;
  float: none;
}

.lg-matrix-table td .form-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

.lg-matrix-table td .form-check .form-check-input {
  margin-left: 0;
}

/* ---------- Dropdown menus (generic) ---------- */

.dropdown-menu {
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  box-shadow: var(--lg-pop-shadow);
  font-size: 13px;
}

.dropdown-menu .dropdown-item {
  border-radius: 8px;
  font-weight: 500;
  color: var(--lg-ink);
}

.dropdown-menu .dropdown-item:hover {
  background: var(--lg-bg);
}

.dropdown-menu .lg-menu-danger {
  color: var(--lg-rose-fg);
}

.dropdown-menu .lg-menu-danger:hover {
  color: var(--lg-rose-fg);
  background: var(--lg-rose-bg);
}

/* ---------- Table row actions (⋯ menu, design rowMenu template) ---------- */

.lg-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  vertical-align: middle;
}

.lg-row-actions .btn.lg-kebab {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--lg-body);
}

.lg-row-actions .btn.lg-kebab[aria-expanded="true"] {
  background: var(--lg-red-soft);
  border-color: var(--lg-red-border);
  color: var(--lg-red);
}

.lg-row-actions .dropdown-menu {
  min-width: 190px;
  padding: 6px;
}

/* menu entries — covers both server-rendered .dropdown-item anchors and
   controls MOVED in from the cell, which keep their .btn classes */
.lg-row-actions .dropdown-menu .dropdown-item,
.lg-row-actions .dropdown-menu .btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px 10px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none !important;
  color: var(--lg-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-row-actions .dropdown-menu .dropdown-item:hover,
.lg-row-actions .dropdown-menu .dropdown-item:focus,
.lg-row-actions .dropdown-menu .btn:hover,
.lg-row-actions .dropdown-menu .btn:focus {
  background: var(--lg-bg);
  border: 0;
  color: var(--lg-ink);
}

.lg-row-actions .dropdown-menu i {
  width: 18px;
  flex: none;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  color: var(--lg-muted);
}

/* destructive entries — red text, soft red hover, no solid fill */
.lg-row-actions .dropdown-menu .lg-menu-danger,
.lg-row-actions .dropdown-menu .lg-menu-danger i {
  color: var(--lg-rose-fg);
}

.lg-row-actions .dropdown-menu .lg-menu-danger:hover,
.lg-row-actions .dropdown-menu .lg-menu-danger:focus {
  background: var(--lg-rose-bg);
  color: var(--lg-rose-fg);
}

/* ---------- Dashboard: "Needs attention" queues (design list) ---------- */

.lg-attention-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.lg-attention-lead {
  font-size: 13px;
  color: var(--lg-faint);
  margin: 3px 0 6px;
}

@media (min-width: 992px) {
  .lg-queue-list {
    column-count: 2;
    column-gap: 48px;
  }
}

.lg-queue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lg-line-faint);
  color: var(--lg-ink);
  text-decoration: none;
  break-inside: avoid;
}

.lg-queue-row:hover .lg-queue-label {
  color: var(--lg-red);
}

.lg-queue-row.is-empty {
  opacity: 0.45;
}

.lg-queue-tile {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 17px;
}

.lg-queue-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-queue-count {
  font-size: 15px;
  font-weight: 800;
  color: var(--lg-ink);
}

.lg-queue-chevron {
  color: #b6bece;
  font-size: 15px;
}

.lg-tile-red { background: var(--lg-red-soft); color: var(--lg-red); }
.lg-tile-blue { background: var(--lg-blue-bg); color: var(--lg-blue-fg); }
.lg-tile-violet { background: var(--lg-violet-bg); color: var(--lg-violet-fg); }
.lg-tile-green { background: var(--lg-green-bg); color: var(--lg-green-fg); }
.lg-tile-amber { background: var(--lg-amber-bg); color: var(--lg-amber-fg); }
.lg-tile-rose { background: var(--lg-rose-bg); color: var(--lg-rose-fg); }
.lg-tile-grey { background: var(--lg-grey-bg); color: var(--lg-grey-fg); }

/* ---------- Misc plugin chrome ---------- */

.daterangepicker {
  font-family: var(--lg-font);
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  box-shadow: var(--lg-pop-shadow);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--lg-red);
}

.swal2-popup {
  font-family: var(--lg-font) !important;
  border-radius: 18px !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--lg-red) !important;
  border-radius: var(--lg-radius-sm) !important;
  box-shadow: none !important;
}

/* ---------- Loading: skeletons + slim top progress (design) ---------- */

@keyframes lgSkelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.lg-skel-bar {
  display: block;
  max-width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%);
  background-size: 200% 100%;
  animation: lgSkelShimmer 1.4s ease-in-out infinite;
}

.lg-skel-bar.sub {
  height: 10px;
  margin-top: 7px;
}

tr.lg-skel-row td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--lg-line-faint);
}

/* refresh-in-place: keep current rows visible but dimmed while new data loads */
table.lg-refreshing tbody {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}

/* legacy overlay (ShowLoader/HideLoader): transparent click-shield +
   slim indeterminate top progress bar — the gif spinner is gone */
.overlay {
  background: transparent !important;
  opacity: 1 !important;
}

.overlay::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2001;
  background: linear-gradient(90deg, transparent 0%, #d50000 30%, #ff6b5e 50%, #d50000 70%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: lgTopBar 1.1s linear infinite;
}

@keyframes lgTopBar {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

#loading-img {
  background: none !important;
}

/* breadcrumb (any page still rendering its own) */
.breadcrumb {
  font-size: 12.5px;
}

.breadcrumb-item a {
  color: var(--lg-faint);
}

.breadcrumb-item.active {
  color: var(--lg-muted);
}

/* progress bars */
.progress {
  border-radius: 999px;
  background-color: var(--lg-line-faint);
}

.progress-bar {
  background-color: var(--lg-red);
}

/* list groups */
.list-group-item:hover {
  background-color: var(--lg-bg-thead);
  color: var(--lg-ink);
}

.list-group-item.active {
  background-color: var(--lg-red-soft);
  border-color: var(--lg-red-border);
  color: var(--lg-red);
}

/* ---------- KPI cards + audience pills (referrals, finance) ---------- */

.lg-kpi-card {
  background: #ffffff;
  border: 1px solid var(--lg-line);
  border-radius: 16px;
  box-shadow: var(--lg-card-shadow);
  padding: 16px 18px;
}

.lg-kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg-kpi-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 15px;
}

.lg-kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lg-ink);
  margin-top: 12px;
}

.lg-kpi-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--lg-muted);
}

.lg-aud-pill {
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.lg-aud-pill.aud-user {
  background: var(--lg-blue-bg);
  color: var(--lg-blue-fg);
}

.lg-aud-pill.aud-freelancer {
  background: var(--lg-violet-bg);
  color: var(--lg-violet-fg);
}

/* ============================================================
   List pages: status tabs + filter toolbar (design list pattern)
   ============================================================ */

/* list status tabs — segmented control with icons + count pills (design) */
.lg-list-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  background: #eef0f4;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}

.lg-list-tabs .lg-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: var(--lg-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--lg-muted);
  cursor: pointer;
  padding: 8px 14px;
  text-decoration: none;
}

.lg-list-tabs .lg-tab i {
  font-size: 14px;
  color: var(--lg-faint);
}

.lg-list-tabs .lg-tab:hover {
  color: var(--lg-ink) !important;
  background: rgba(255, 255, 255, 0.6);
}

.lg-list-tabs .lg-tab .lg-tab-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lg-muted);
  background: #e6e9ef;
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 18px;
  text-align: center;
}

.lg-list-tabs .lg-tab.active {
  color: var(--lg-ink) !important;
  font-weight: 700;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.lg-list-tabs .lg-tab.active i {
  color: var(--lg-red);
}

.lg-list-tabs .lg-tab.active .lg-tab-count {
  color: var(--lg-red);
  background: var(--lg-red-soft);
}

.lg-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.lg-toolbar .lg-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 300px;
  max-width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm);
  background: #ffffff;
  /* the search gives up width first so the filters beside it stay on one row
     instead of wrapping onto three */
  flex: 1 1 200px;
  min-width: 170px;
}

.lg-toolbar .lg-search i {
  color: var(--lg-faint);
  font-size: 14px;
  flex: none;
}

.lg-toolbar .lg-search input,
.lg-toolbar .lg-search input.form-control {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--lg-font);
  font-size: 13.5px;
  outline: none !important;
  box-shadow: none !important;
  color: var(--lg-ink);
  min-height: 0;
  height: 100%;
  padding: 0;
}

.lg-toolbar .lg-filter {
  height: 40px;
  min-height: 40px;
}

.lg-toolbar select.lg-filter,
.lg-toolbar .lg-filter.form-select,
.lg-toolbar .lg-filter.form-control {
  width: auto;
  /* shrinkable: a row of filters compresses before it wraps */
  flex: 0 1 auto;
  min-width: 132px;
  font-weight: 500;
  color: #344054;
}

/* date range sits in an input group, so size the group rather than the input */
.lg-toolbar .lg-filter-date {
  flex: 0 1 auto;
  width: auto;
  min-width: 190px;
  max-width: 240px;
}

.lg-toolbar .lg-filter-date .form-control {
  height: 40px;
  min-height: 40px;
  min-width: 0;
  border-radius: 0 var(--lg-radius-sm) var(--lg-radius-sm) 0;
}

.lg-toolbar .lg-spacer {
  /* search pills grow to fill the row now; the spacer only separates CTAs */
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.lg-toolbar .btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ============================================================
   Filter bar (search cards): one compact row — fields, then
   Search/Reset; page CTAs (Add/Create) push to the row end.
   Replaces the legacy row/col search-card grids; apply the
   class to the #frmSearch form itself.
   ============================================================ */

.lg-filters {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.lg-filters > .form-control,
.lg-filters > .form-select,
.lg-filters > .form-group,
.lg-filters > .input-group,
.lg-filters > .lg-filter-field {
  flex: 1 1 200px;
  min-width: 170px;
}

.lg-filters .form-group {
  margin-bottom: 0;
  position: relative;
}

.lg-filters > .input-group {
  width: auto;
  flex-wrap: nowrap;
}

.lg-filters .input-group .form-control {
  min-width: 0;
}

/* selects grow with the row too — filter rows always span full width */
.lg-filters > select.form-control,
.lg-filters > .form-select,
.lg-filters > .select2-container {
  flex: 1 1 180px;
  min-width: 160px;
  font-weight: 500;
  color: #344054;
}

/* select2 replaces the select element; keep the container flexing and let
   the widget fill it */
.lg-filters > .select2-container {
  width: auto !important;
}

.lg-filters .lg-filter-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.lg-filters .btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* page-level CTAs (Add / Create) sit at the far end of the row */
.lg-filters .lg-filter-add {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

/* A filter that arrived with the link (a dashboard card, say) and has no control of
   its own on the page: shown as a chip so it is visible, and dismissible. */
.lg-preset-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 14px;
}

.lg-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 6px 5px 11px;
  border: 1px solid var(--lg-red-border);
  border-radius: 999px;
  background: var(--lg-red-soft);
  color: var(--lg-red-dark);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.lg-preset-chip .lg-preset-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 10px;
  cursor: pointer;
}

.lg-preset-chip .lg-preset-clear:hover {
  background: rgba(213, 0, 0, 0.12);
}

/* blank data cells show a muted dash (filled by lgFillEmptyCells) */
td.lg-cell-empty {
  color: var(--lg-faint);
}

/* ---------- Quick-view detail popups (PopupController partials) ---------- */

.lg-popup-link {
  color: var(--lg-ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lg-popup-link:hover {
  color: var(--lg-red);
}

.lg-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--lg-line);
}

.lg-detail-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--lg-red-soft, rgba(213, 0, 0, 0.08));
  color: var(--lg-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: none;
}

.lg-detail-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--lg-ink);
}

.lg-detail-sub {
  font-size: 12.5px;
  color: var(--lg-muted);
}

.lg-detail-status {
  margin-inline-start: auto;
}

.lg-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 18px;
}

.lg-detail-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lg-faint);
  margin-bottom: 2px;
}

.lg-detail-value {
  font-size: 13.5px;
  color: var(--lg-ink);
  overflow-wrap: anywhere;
}

/* empty-state block for lists with no rows */
.lg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 42px 16px;
  text-align: center;
}

.lg-empty-state i {
  font-size: 30px;
  color: var(--lg-faint);
  line-height: 1;
  margin-bottom: 6px;
}

.lg-empty-state .lg-empty-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--lg-ink);
}

.lg-empty-state .lg-empty-hint {
  font-size: 13px;
  color: var(--lg-muted);
}

/* SearchableDropdown suggestions float over the row, not inside it */
.lg-filters .autoSearchResult {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 30;
  margin-top: 0 !important;
}

/* ============================================================
   Design components (v3): KPI tiles, claims grid, upload,
   confirm dialog, toast, empty state, date range
   ============================================================ */

/* Payments KPI cards (PaymentRequests) */
.pr-kpi-card {
  border: 1px solid var(--lg-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--lg-card-shadow) !important;
}

.pr-kpi-card .pr-kpi-icon.bg-primary-subtle {
  background: var(--lg-red-soft) !important;
  color: var(--lg-red) !important;
}

.pr-kpi-card .pr-kpi-icon.bg-warning-subtle {
  background: var(--lg-amber-bg) !important;
  color: var(--lg-amber-fg) !important;
}

.pr-kpi-card .pr-kpi-icon.bg-success-subtle {
  background: var(--lg-green-bg) !important;
  color: var(--lg-green-fg) !important;
}

.pr-kpi-card .pr-kpi-icon.bg-danger-subtle {
  background: var(--lg-rose-bg) !important;
  color: var(--lg-rose-fg) !important;
}

.pr-kpi-card .pr-kpi-icon.bg-info-subtle {
  background: var(--lg-blue-bg) !important;
  color: var(--lg-blue-fg) !important;
}

.pr-kpi-card .text-primary { color: var(--lg-red) !important; }
.pr-kpi-card .text-warning { color: var(--lg-amber-fg) !important; }
.pr-kpi-card .text-success { color: var(--lg-green-fg) !important; }
.pr-kpi-card .text-danger { color: var(--lg-rose-fg) !important; }
.pr-kpi-card .text-info { color: var(--lg-blue-fg) !important; }

.pr-offcanvas {
  border-inline-start: 1px solid var(--lg-line);
}

/* Roles & claims permission cards (Masonry grid) */
.grid-item .list-group {
  border: 1px solid var(--lg-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lg-card-shadow);
}

.grid-item .list-group-item {
  border-color: var(--lg-line-faint);
  font-size: 13.5px;
  padding: 9px 14px;
}

.grid-item .list-group-item.active,
.grid-item .list-group-item.active.disabled {
  background: var(--lg-bg-thead);
  border-color: var(--lg-line);
  color: var(--lg-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1;
}

.grid-item .form-check {
  margin-bottom: 0;
}

/* Upload zones (dropzone + custom drops) */
.dropzone,
.pm-drop {
  border: 1.5px dashed #d0d5dd !important;
  border-radius: 14px !important;
  background: var(--lg-bg-thead) !important;
  color: var(--lg-muted);
  font-family: var(--lg-font);
}

.dropzone:hover,
.pm-drop:hover {
  background: var(--lg-bg) !important;
  border-color: var(--lg-faint) !important;
}

.dropzone .dz-message {
  color: var(--lg-muted);
  font-size: 13.5px;
  font-weight: 500;
}

/* Confirm dialog + toast (sweetalert2 / bootstrap-notify) */
.swal2-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--lg-ink) !important;
}

.swal2-html-container {
  font-size: 14px !important;
  color: var(--lg-muted) !important;
}

.swal2-styled.swal2-cancel {
  background-color: #ffffff !important;
  color: #344054 !important;
  border: 1px solid var(--lg-line-strong) !important;
  border-radius: var(--lg-radius-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.swal2-styled.swal2-deny {
  border-radius: var(--lg-radius-sm) !important;
  box-shadow: none !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--lg-amber-fg) !important;
  color: var(--lg-amber-fg) !important;
}

[data-notify="container"] {
  border-radius: 12px !important;
  border: 1px solid var(--lg-line) !important;
  box-shadow: var(--lg-pop-shadow) !important;
  font-family: var(--lg-font) !important;
  font-size: 13.5px;
}

/* Empty states (DataTables + generic) */
.dataTables_empty {
  padding: 44px 20px !important;
  color: var(--lg-faint) !important;
  font-size: 13.5px;
  text-align: center;
}

/* Date range picker */
.daterangepicker .calendar-table {
  font-family: var(--lg-font);
}

.daterangepicker td.in-range {
  background-color: var(--lg-red-soft);
  color: var(--lg-ink);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--lg-red) !important;
  border-radius: 8px;
}

.daterangepicker .ranges li.active {
  background-color: var(--lg-red);
}

.daterangepicker .drp-buttons .btn.applyBtn {
  background-color: var(--lg-red);
  border-color: var(--lg-red);
  border-radius: 8px;
}

/* ============================================================
   Auth screens (login / forgot / reset) — split card
   ============================================================ */

body.lg-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--lg-bg) !important;
}

.lg-auth-card {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 60px -24px rgba(16, 24, 40, 0.22);
  overflow: hidden;
}

.lg-auth-card.lg-auth-wide {
  max-width: 1080px;
}

.lg-auth-form {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lg-auth-form .lg-auth-logo {
  height: 26px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 36px;
}

.lg-auth-form h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 6px;
}

.lg-auth-form .lg-auth-lead,
.lg-auth-form .login-box-msg {
  font-size: 14px !important;
  color: var(--lg-muted);
  margin: 0 0 26px;
  padding: 0;
  text-align: start;
}

.lg-auth-side {
  background: linear-gradient(160deg, #d50000 0%, #8a0000 100%);
  color: #ffffff;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

/* decorative brand mark bleeding off the panel, sits under the copy */
.lg-auth-side .lg-auth-mark {
  position: absolute;
  inset-inline-end: -24%;
  bottom: -16%;
  width: 95%;
  max-width: none;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  transform: rotate(-8deg);
}

.lg-auth-side > :not(.lg-auth-mark) {
  position: relative;
  z-index: 1;
}

.lg-auth-side .lg-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

.lg-auth-side h3 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #ffffff;
}

.lg-auth-side p {
  font-size: 14px;
  opacity: 0.85;
  margin: 0;
}

.lg-auth-side .lg-auth-stats {
  display: flex;
  gap: 28px;
}

.lg-auth-side .lg-auth-stats .lg-stat-value {
  font-size: 22px;
  font-weight: 800;
}

.lg-auth-side .lg-auth-stats .lg-stat-label {
  font-size: 12px;
  opacity: 0.8;
}

@media (max-width: 860px) {
  .lg-auth-card {
    grid-template-columns: 1fr;
  }

  .lg-auth-side {
    display: none;
  }
}

/* ============================================================
   Command palette (sidebar search)
   ============================================================ */

.lg-search-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 28px);
  margin: 2px 14px 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-sm);
  background: #ffffff;
  font-family: var(--lg-font);
  font-size: 13.5px;
  color: var(--lg-faint);
  cursor: pointer;
  text-align: start;
}

.lg-search-btn:hover {
  border-color: #d0d5dd;
  color: var(--lg-muted);
}

.lg-search-btn .lg-kbd {
  font-size: 11px;
  font-weight: 600;
  color: var(--lg-faint);
  background: var(--lg-bg);
  border-radius: 6px;
  padding: 2px 6px;
  margin-inline-start: auto;
}

.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .lg-search-btn span {
  display: none;
}

.lg-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13vh;
  z-index: 2000;
}

.lg-palette-overlay.open {
  display: flex;
}

.lg-palette {
  width: 620px;
  max-width: 92vw;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(16, 24, 40, 0.32);
  overflow: hidden;
}

.lg-palette-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lg-line);
}

.lg-palette-head i {
  color: var(--lg-faint);
  font-size: 16px;
}

.lg-palette-head input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--lg-font);
  font-size: 15px;
  outline: none;
  color: var(--lg-ink);
}

.lg-palette-head .lg-kbd {
  font-size: 11px;
  font-weight: 600;
  color: var(--lg-faint);
  background: var(--lg-bg);
  border-radius: 6px;
  padding: 3px 7px;
}

.lg-palette-list {
  padding: 8px;
  max-height: 46vh;
  overflow-y: auto;
}

.lg-palette-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lg-faint);
  padding: 8px 12px 6px;
}

.lg-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--lg-ink);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.lg-palette-item:hover,
.lg-palette-item.focused {
  background: var(--lg-bg);
  color: var(--lg-ink) !important;
}

.lg-palette-item .lg-palette-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--lg-bg);
  color: var(--lg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.lg-palette-item .lg-palette-title {
  flex: 1;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-palette-item .lg-palette-group {
  font-size: 12px;
  color: var(--lg-faint);
}

.lg-palette-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--lg-faint);
  font-size: 13.5px;
}

/* ============================================================
   Empty state — shown inside the table body when a query
   returns no rows. DataTables drops the markup into a single
   full-width cell, so it centres itself.
   ============================================================ */

.lg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
  color: var(--lg-muted);
}

.lg-empty-state .bi {
  font-size: 28px;
  color: var(--lg-faint);
  line-height: 1;
  margin-bottom: 4px;
}

.lg-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lg-ink);
}

.lg-empty-hint {
  font-size: 12.5px;
  color: var(--lg-faint);
}

/* the cell DataTables builds for it carries the default centring/italics */
.table td.dataTables_empty,
table.dataTable td.dataTables_empty {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-style: normal;
  padding: 0;
}

/* Header cells must sit on one baseline. A title long enough to wrap used to
   push its own cell's text to the top of a taller row while the rest stayed
   put, which is how "Country Code" ended up sitting above its neighbours. */
.table thead th,
table.dataTable thead th,
.cus-table-header th {
  vertical-align: middle;
}

/* ============================================================
   See more / See less — a clipped cell can be opened in place
   instead of hiding the rest of its value in a tooltip.
   ============================================================ */

/* The cell keeps the clipping; only the text span is clipped, so the toggle
   beside it always stays visible. */
.table td.lg-has-more,
table.dataTable td.lg-has-more {
  white-space: nowrap;
  overflow: hidden;
}

.table td.lg-has-more > .lg-cell-text,
table.dataTable td.lg-has-more > .lg-cell-text {
  display: inline-block;
  max-width: calc(100% - 62px); /* room the toggle needs */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.table td.lg-has-more.lg-cell-open,
table.dataTable td.lg-has-more.lg-cell-open {
  white-space: normal;
  overflow: visible;
  vertical-align: top;
}

.table td.lg-has-more.lg-cell-open > .lg-cell-text,
table.dataTable td.lg-has-more.lg-cell-open > .lg-cell-text {
  display: block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lg-cell-more {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lg-red);
  cursor: pointer;
  white-space: nowrap;
  margin-inline-start: 6px;
  vertical-align: bottom;
}

.table td.lg-cell-open > .lg-cell-more,
table.dataTable td.lg-cell-open > .lg-cell-more {
  display: inline-block;
  margin-inline-start: 0;
  margin-top: 2px;
}

.lg-cell-more:hover {
  text-decoration: underline;
}

/* A status pill is short and meaningful; clipping it to "Acti…" helps nobody.
   Long free-text badges (recipient and channel chips) still ellipsize. */
.table td .badge.lg-status-badge,
table.dataTable td .badge.lg-status-badge {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  white-space: nowrap;
}

/* ============================================================
   Sortable header glyphs.

   site.css floats the ::after arrow. Inside a th that also has
   white-space:nowrap and a fixed width, a title long enough to
   fill the cell pushes the float onto a second line — which is
   how "Country Code" ended up clipped with its arrow sitting
   underneath, out of line with every other header.

   Pin the glyph instead and reserve its width, so the label
   truncates on one line and the arrows stay on one baseline.
   ============================================================ */

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
.cus-table-header th.sorting,
.cus-table-header th.sorting_asc,
.cus-table-header th.sorting_desc {
  position: relative;
  padding-inline-end: 28px;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  padding-left: 0;
  line-height: 1;
  pointer-events: none;
}

/* ============================================================
   Status pills — one look for every Yes/No and status value.
   Applied by dataTablesHelper.js (lgStatusPill) to boolean
   cells and to recognised words in Status / Active columns.
   ============================================================ */

.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}

.lg-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Bootstrap's alert palette - proven-readable dark text on a soft fill. */
.lg-pill--pos     { color: #0f5132 !important; background: #d1e7dd; border-color: #a3cfbb; }
.lg-pill--neg     { color: #842029 !important; background: #f8d7da; border-color: #f1aeb5; }
.lg-pill--warn    { color: #664d03 !important; background: #fff3cd; border-color: #ffe69c; }
.lg-pill--neutral { color: #41464b !important; background: #e2e3e5; border-color: #c4c8cb; }

/* pills must not be clipped by the cell ellipsis rules */
.table td .lg-pill,
table.dataTable td .lg-pill {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  vertical-align: middle;
}

/* a cell holding a pill must show it in full - the ellipsis/See-more rules were
   clipping the pill and appending a "…" toggle after it */
.table td.lg-pill-cell,
table.dataTable td.lg-pill-cell {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Some pages render status server-side as Bootstrap badges (bg-success, bg-warning,
   ...), which the JS pill pass leaves alone because the cell already has markup.
   Bootstrap's own colours are inconsistent and low-contrast (white on yellow for
   bg-warning). Restyle those badges to the same readable pill palette so status
   looks the same however it was produced. */
.badge.bg-success, .badge.bg-success-subtle,
.badge.text-bg-success {
  color: #0f5132 !important; background-color: #d1e7dd !important; border: 1px solid #a3cfbb !important;
}
.badge.bg-danger, .badge.bg-danger-subtle,
.badge.text-bg-danger {
  color: #842029 !important; background-color: #f8d7da !important; border: 1px solid #f1aeb5 !important;
}
.badge.bg-warning, .badge.bg-warning-subtle,
.badge.text-bg-warning {
  color: #664d03 !important; background-color: #fff3cd !important; border: 1px solid #ffe69c !important;
}
.badge.bg-secondary, .badge.bg-light, .badge.bg-light.text-dark,
.badge.text-bg-secondary {
  color: #41464b !important; background-color: #e2e3e5 !important; border: 1px solid #c4c8cb !important;
}
.badge.bg-info, .badge.bg-info-subtle,
.badge.text-bg-info {
  color: #055160 !important; background-color: #cff4fc !important; border: 1px solid #9eeaf9 !important;
}

/* give restyled badges the pill shape too */
.badge.bg-success, .badge.bg-danger, .badge.bg-warning, .badge.bg-secondary,
.badge.bg-info, .badge.bg-light,
.badge.bg-success-subtle, .badge.bg-danger-subtle, .badge.bg-warning-subtle,
.badge.bg-info-subtle {
  border-radius: 999px;
  font-weight: 600;
  padding: 3px 10px;
}

/* The admin UI is light-only, so the pills must NOT follow the OS colour scheme.
   A @media (prefers-color-scheme: dark) override was painting light-yellow text
   on the white page for anyone whose OS was in dark mode - the "wrong colours".
   Only an explicit in-app dark toggle ([data-theme="dark"]) should recolour them. */
:root[data-theme="dark"] .lg-pill--pos     { color: #6ee7b7 !important; background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.30); }
:root[data-theme="dark"] .lg-pill--neg     { color: #fca5a5 !important; background: rgba(239,68,68,.16);  border-color: rgba(239,68,68,.30); }
:root[data-theme="dark"] .lg-pill--warn    { color: #fcd34d !important; background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.30); }
:root[data-theme="dark"] .lg-pill--neutral { color: #cbd5e1 !important; background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.30); }

/* Roles inline rename: input + Update/Cancel sit together in the wide Name
   column (they used to overflow the narrow action column). The Name cell
   inherits white-space:nowrap from the global table rule, which stops the row
   wrapping and pushes the buttons past the table edge - override it here. */
.table td:has(.lg-role-rename),
table.dataTable td:has(.lg-role-rename) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.lg-role-rename {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.lg-role-rename .form-control {
  width: auto;
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 55%;
}
.lg-role-rename #confirmEditSpan {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

/* ============================================================
   Product image previews in tables + shared lightbox
   Thumbnails render in the cell (up to 3 + a "+N" tile); clicking
   opens #lgLightbox, which pages through the row's full image list.
   ============================================================ */
.lg-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  line-height: 0;
}
.lg-thumbs:focus-visible {
  outline: 2px solid var(--lg-red);
  outline-offset: 2px;
  border-radius: var(--lg-radius-sm);
}
.lg-thumbs.is-empty {
  cursor: default;
}
.lg-thumb {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--lg-line-strong);
  background: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.lg-thumbs:not(.is-empty):hover .lg-thumb {
  border-color: var(--lg-red-border);
}
.lg-thumbs:not(.is-empty):hover .lg-thumb:first-child {
  box-shadow: 0 4px 12px -6px rgba(16, 24, 40, 0.35);
}
.lg-thumbs.is-empty .lg-thumb {
  opacity: 0.55;
  filter: grayscale(1);
}
.lg-thumb-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--lg-grey-bg, #f2f4f7);
  border: 1px solid var(--lg-line-strong);
  color: var(--lg-muted);
  font: 700 12px var(--lg-font);
  line-height: 1;
}

/* ---- Lightbox overlay ---- */
#lgLightbox {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 40, 0.86);
  backdrop-filter: blur(2px);
  padding: 40px 16px;
}
#lgLightbox.is-open {
  display: flex;
}
#lgLightbox .lg-lb-stage {
  position: relative;
  max-width: min(96vw, 1480px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lgLightbox .lg-lb-img {
  max-width: 100%;
  max-height: 92vh;
  min-width: min(60vw, 720px); /* a small source photo still opens at a readable size */
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  background: #fff;
  object-fit: contain;
}
#lgLightbox .lg-lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--lg-ink);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background 0.12s ease, transform 0.12s ease;
}
#lgLightbox .lg-lb-btn:hover {
  background: #fff;
}
#lgLightbox .lg-lb-prev { left: -22px; }
#lgLightbox .lg-lb-next { right: -22px; }
#lgLightbox .lg-lb-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--lg-ink);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
#lgLightbox .lg-lb-count {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font: 600 13px var(--lg-font);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#lgLightbox .lg-lb-btn[hidden] { display: none; }
@media (max-width: 640px) {
  #lgLightbox .lg-lb-prev { left: 4px; }
  #lgLightbox .lg-lb-next { right: 4px; }
  #lgLightbox .lg-lb-close { top: 4px; right: 4px; }
}

/* ============================================================
   Driver details: profile photo, document cards, vehicle cell
   ============================================================ */
.lg-driver-avatar {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--lg-line-strong);
  background: #fff;
  box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.45);
  cursor: zoom-in;
}
.lg-driver-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg-driver-avatar.is-empty {
  cursor: default;
  background: var(--lg-grey-bg, #f2f4f7);
}
.lg-driver-avatar.is-empty img {
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
  padding: 28px;
}
.lg-driver-avatar:focus-visible {
  outline: 2px solid var(--lg-red);
  outline-offset: 2px;
}
.lg-driver-status {
  font-size: 12.5px;
  padding: 6px 12px;
}

.lg-doc-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius, 12px);
  background: var(--lg-grey-bg, #f8f9fb);
}

.lg-doc-card {
  height: 100%;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius, 12px);
  background: #fff;
  overflow: hidden;
}
.lg-doc-card.is-missing {
  background: var(--lg-grey-bg, #f8f9fb);
  border-style: dashed;
}
.lg-doc-card.is-expired {
  border-color: rgba(220, 53, 69, 0.55);
  box-shadow: inset 3px 0 0 #dc3545;
}
.lg-doc-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lg-line);
}
.lg-doc-card.is-missing .lg-doc-card-head {
  border-bottom: 0;
}
.lg-doc-card-head > i {
  font-size: 22px;
  color: var(--lg-red);
  line-height: 1;
}
.lg-doc-card.is-missing .lg-doc-card-head > i {
  color: var(--lg-faint);
}
.lg-doc-card-type {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--lg-ink);
}
.lg-doc-card-kind {
  font-size: 11.5px;
  color: var(--lg-muted);
}
.lg-doc-card-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}
.lg-doc-thumbs .lg-thumb {
  width: 56px;
  height: 56px;
}

/* vehicles tab: thumbnail + name/plate in one cell */
.lg-vehicle-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.lg-vehicle-cell .lg-thumbs {
  flex: 0 0 auto;
}
.lg-vehicle-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.lg-vehicle-name {
  font-weight: 600;
  color: var(--lg-ink);
}
.lg-vehicle-plate {
  font-size: 12px;
  color: var(--lg-muted);
}

/* quick-view popups: logo avatar + footer action */
.lg-detail-avatar.lg-detail-avatar-img {
  overflow: hidden;
  padding: 0;
  background: #fff;
}
.lg-detail-avatar.lg-detail-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lg-detail-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--lg-line);
  display: flex;
  justify-content: flex-end;
}
.lg-nowrap { white-space: nowrap; }

/* clickable preset chips (quick views) */
.lg-preset-chip.lg-preset-btn {
  cursor: pointer;
  padding: 5px 12px;
  background: #fff;
  color: var(--lg-ink);
  border-color: var(--lg-line-strong);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lg-preset-chip.lg-preset-btn:hover {
  border-color: var(--lg-red-border);
  color: var(--lg-red-dark);
}
.lg-preset-chip.lg-preset-btn.active {
  background: var(--lg-red-soft);
  border-color: var(--lg-red-border);
  color: var(--lg-red-dark);
}
.lg-preset-filter.mt-2 { margin: 10px 0 0; }
.lg-detail-section {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lg-muted);
}

/* order number cell: never clip the number - slimmer padding, no ellipsis */
.table td.lg-orderno,
table.dataTable td.lg-orderno {
  padding-left: 10px;
  padding-right: 10px;
  text-overflow: clip;
}
.table td.lg-orderno a,
table.dataTable td.lg-orderno a {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* provider details: operating countries read like the fields around them */
ul.grid-list.lg-country-list {
  margin-top: 4px;
  gap: 8px;
}
ul.grid-list.lg-country-list li {
  font-size: 13.5px;
  line-height: 1.4;
  padding: 8px 12px;
  color: var(--lg-ink);
  background: var(--lg-grey-bg, #f2f4f7);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-sm, 8px);
}

/* ============================================================
   Vehicle maintenance: summary blocks (quick filters) + row states
   ============================================================ */
.lg-maint-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 767px) { .lg-maint-summary { grid-template-columns: 1fr; } }
.lg-maint-block {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius, 12px);
  box-shadow: var(--lg-card-shadow);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.lg-maint-block:hover { border-color: var(--lg-line-strong); transform: translateY(-1px); }
.lg-maint-block:focus-visible { outline: 2px solid var(--lg-red); outline-offset: 2px; }
.lg-maint-block-ic {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.lg-maint-block.is-overdue .lg-maint-block-ic { background: var(--lg-rose-bg, #fde8e8); color: #b42318; }
.lg-maint-block.is-upcoming .lg-maint-block-ic { background: var(--lg-amber-bg, #fff4e5); color: #b54708; }
.lg-maint-block.is-scheduled .lg-maint-block-ic { background: var(--lg-grey-bg, #f2f4f7); color: var(--lg-muted); }
.lg-maint-block-body { display: flex; flex-direction: column; min-width: 0; }
.lg-maint-block-value { font: 800 22px/1.1 var(--lg-font); color: var(--lg-ink); font-variant-numeric: tabular-nums; }
.lg-maint-block-label { font: 600 12.5px/1.3 var(--lg-font); color: var(--lg-muted); margin-top: 3px; }
.lg-maint-block.is-active { border-color: var(--lg-red-border); background: var(--lg-red-soft); }
.lg-maint-block.is-overdue.is-active { border-color: #f04438; background: #fff1f0; }
.lg-maint-block.is-upcoming.is-active { border-color: #f79009; background: #fff8ec; }

/* overdue rows read red, upcoming rows amber - in every state the stripe/hover would paint */
table.dataTable > tbody > tr.lg-maint-row-overdue > td,
.table > tbody > tr.lg-maint-row-overdue > td {
  background-color: #fff1f0 !important;
  color: #b42318;
  box-shadow: inset 3px 0 0 #dc3545;
}
table.dataTable > tbody > tr.lg-maint-row-overdue > td:not(:first-child) { box-shadow: none; }
table.dataTable > tbody > tr.lg-maint-row-upcoming > td,
.table > tbody > tr.lg-maint-row-upcoming > td {
  background-color: #fff8ec !important;
}
.lg-maint-status { font-size: 11.5px; padding: 5px 9px; }

/* violations: GPS link, per-driver count badge, map popup */
.lg-geo-link { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-count-badge { font-size: 12.5px; padding: 6px 10px; text-decoration: none; }
.lg-geo-map { width: 100%; height: min(70vh, 520px); background: var(--lg-grey-bg, #f2f4f7); }

/* ============================================================
   Product ratings & reviews
   ============================================================ */
.lg-stars { color: #f5a524; letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.lg-stars .bi-star { color: #d0d5dd; }
.lg-stars-lg { font-size: 20px; letter-spacing: 2px; }
.lg-rating { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.lg-rating:hover .lg-rating-count { text-decoration: underline; }
.lg-rating-count { font-size: 12px; color: var(--lg-muted); font-variant-numeric: tabular-nums; }
.lg-review-count { font-weight: 600; }
.lg-product-link { font-weight: 600; }
/* product name: wrap instead of clipping */
.table td.lg-product-name, table.dataTable td.lg-product-name { white-space: normal; overflow: visible; text-overflow: clip; }
.table td.lg-nowrap-cell, table.dataTable td.lg-nowrap-cell { white-space: nowrap; }

.lg-reviews-summary {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 16px 18px; margin-bottom: 16px;
  border: 1px solid var(--lg-line); border-radius: var(--lg-radius, 12px); background: var(--lg-grey-bg, #f8f9fb);
}
@media (max-width: 640px) { .lg-reviews-summary { grid-template-columns: 1fr; } }
.lg-reviews-average { text-align: center; }
.lg-reviews-average-value { font: 800 36px/1 var(--lg-font); color: var(--lg-ink); margin-bottom: 6px; }
.lg-reviews-bars { display: grid; gap: 6px; }
.lg-reviews-bar-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--lg-muted); }
.lg-reviews-bar-label i { color: #f5a524; font-size: 11px; }
.lg-reviews-bar-track { display: block; height: 8px; border-radius: 999px; background: #e4e7ec; overflow: hidden; }
.lg-reviews-bar-fill { display: block; height: 100%; background: #f5a524; border-radius: 999px; }
.lg-reviews-bar-count { text-align: right; font-variant-numeric: tabular-nums; }

.lg-review-list { display: grid; gap: 12px; }
.lg-review { padding: 14px 16px; border: 1px solid var(--lg-line); border-radius: var(--lg-radius, 12px); background: #fff; }
.lg-review-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--lg-red-soft); color: var(--lg-red); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lg-review-who { min-width: 0; flex: 1 1 200px; }
.lg-review-name { font-weight: 600; color: var(--lg-ink); }
.lg-review-email { font-size: 12px; color: var(--lg-muted); }
.lg-review-meta { display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.lg-review-rating { font-weight: 700; color: var(--lg-ink); }
.lg-review-date { font-size: 12.5px; color: var(--lg-muted); white-space: nowrap; }
.lg-review-comment { margin: 10px 0 8px; color: var(--lg-body); white-space: pre-line; }

/* ---------- Service Providers list: logo cell ---------- */
.lg-sp-logo,
.lg-sp-initials {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.lg-sp-logo {
  object-fit: cover;
  background: #fff;
  border: 1px solid #eceef2;
}

.lg-sp-initials {
  background: var(--lg-red-soft, rgba(213, 0, 0, 0.08));
  color: var(--lg-red, #d50000);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.lg-sp-country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lg-sp-country {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  line-height: 18px;
  white-space: normal; /* long names wrap inside the pill rather than clipping the cell */
}

.lg-sp-country.is-more {
  background: #eef0f4;
  color: #475467;
  cursor: help;
}

.lg-sp-country.is-registration {
  background: transparent;
  border: 1px dashed #d0d5dd;
  color: #667085;
}

/* ---------- OTP lookup: WhatsApp delivery log ---------- */
.lg-wa-card { margin-top: 18px; }
.lg-wa-card .lg-otp-table td { vertical-align: top; }
.lg-wa-outcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.lg-wa-outcome.is-ok   { background: #ecfdf3; color: #027a48; }
.lg-wa-outcome.is-warn { background: #fffaeb; color: #b54708; }
.lg-wa-outcome.is-bad  { background: #fef3f2; color: #b42318; }
.lg-wa-outcome.is-muted{ background: #f2f4f7; color: #475467; }
.lg-wa-error { font-size: 12px; color: #b42318; margin-top: 2px; }
.lg-wa-times { font-size: 12px; color: #667085; white-space: nowrap; }
.lg-wa-hint  { font-size: 12.5px; color: #667085; margin: 6px 0 0; }