/* ============================================================================
   LOGISTI PROVIDER PANEL — DESIGN SYSTEM
   Implements the committed redesign: operator theme — black rail, red primary,
   Inter type, soft status hues. Loaded after adminlte.css / custom-css.css /
   site.css and overrides them.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Brand */
    --lg-primary: #E8112D;
    --lg-primary-hover: #C60F26;
    --lg-primary-soft: #FFF6F6;
    --lg-primary-glow: rgba(232, 17, 45, .3);
    --lg-primary-ring: rgba(232, 17, 45, .12);

    /* Ink & neutrals */
    --lg-ink: #16181D;
    --lg-text: #475467;
    --lg-muted: #667085;
    --lg-faint: #98A2B3;
    --lg-border: #E4E7EC;
    --lg-border-strong: #D0D5DD;
    --lg-divider: #F2F4F7;
    --lg-ground: #F4F5F7;
    --lg-panel: #F8F9FB;
    --lg-card: #ffffff;

    /* Rail (sidebar) */
    --lg-rail-bg: #0B0C0F;
    --lg-rail-border: #17191E;
    --lg-rail-fg: #9AA3B0;
    --lg-rail-hover: #181B21;
    --lg-rail-muted: #6B7280;
    --lg-rail-badge: #2A2E36;

    /* Status hues */
    --lg-success-fg: #047857;      --lg-success-bg: #ECFDF3;   --lg-success-line: #A7F3D0;
    --lg-success-deep: #059669;
    --lg-warning-fg: #B45309;      --lg-warning-bg: #FFFAEB;   --lg-warning-line: #FEDF89;
    --lg-danger-fg: #B91C1C;       --lg-danger-bg: #FEF3F2;    --lg-danger-line: #FECDCA;
    --lg-danger-deep: #B42318;
    --lg-info-fg: #1D4ED8;         --lg-info-bg: #EFF4FF;      --lg-info-line: #C7D7FE;
    --lg-violet-fg: #6941C6;       --lg-violet-bg: #F4F0FF;
    --lg-slate-fg: #363F72;        --lg-slate-bg: #F8F9FC;
    --lg-teal-fg: #0E9384;         --lg-teal-bg: #F0FDF9;

    /* Type */
    --lg-font: 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shape */
    --lg-radius-sm: 7px;
    --lg-radius: 9px;
    --lg-radius-lg: 10px;
    --lg-radius-xl: 14px;

    /* Elevation */
    --lg-shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
    --lg-shadow-pop: 0 12px 32px rgba(15, 17, 21, .14);
    --lg-shadow-modal: 0 30px 70px rgba(15, 17, 21, .18);
    --lg-shadow-primary: 0 8px 20px rgba(232, 17, 45, .3);

    /* Bootstrap bridge — recolors bootstrap + DMS coherently */
    --bs-primary: #E8112D;
    --bs-primary-rgb: 232, 17, 45;
    --bs-link-color: #E8112D;
    --bs-link-color-rgb: 232, 17, 45;
    --bs-link-hover-color: #C60F26;
    --bs-link-hover-color-rgb: 198, 15, 38;
    --bs-body-font-family: var(--lg-font);
    --bs-body-color: #475467;
    --bs-border-radius: .5rem;
}

html[dir="rtl"], body[dir="rtl"] {
    --lg-font: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ----------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
body {
    font-family: var(--lg-font);
    color: var(--lg-text);
    background-color: var(--lg-ground) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--lg-ink); }
a:hover { color: var(--lg-primary); }

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

::selection { background: rgba(232, 17, 45, .14); }

/* Slim modern scrollbars for inner panes */
.sidebar-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    background: #D0D5DD;
    border-radius: 4px;
}
.sidebar-wrapper::-webkit-scrollbar-thumb {
    background: #2A2E36;
    border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   3. TOPBAR (white operator header)
   ------------------------------------------------------------------------- */
.app-header.app-shell-header {
    background: #fff !important;
    border-bottom: 1px solid var(--lg-border) !important;
    box-shadow: none;
    min-height: 56px;
}

.app-shell-header .container-fluid {
    align-items: center;
    gap: .5rem;
    padding-inline: 1.25rem;
}

.app-shell-header .navbar-nav { align-items: center; }

.app-shell-header .navbar-nav > .nav-item > .nav-link,
.app-shell-header .navbar-nav .nav-link {
    color: var(--lg-ink) !important;
    border-radius: var(--lg-radius-sm);
    transition: color 160ms ease, background-color 160ms ease;
}

.app-shell-header .navbar-nav > .nav-item > .nav-link:hover,
.app-shell-header .navbar-nav .nav-link:hover,
.app-shell-header .navbar-nav .nav-link:focus-visible {
    color: var(--lg-ink) !important;
    background: var(--lg-divider);
}

/* Sidebar toggle button */
.app-header .app-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    margin-inline-end: .25rem;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-sm);
    background: #fff;
    color: var(--lg-text) !important;
}
.app-header .app-sidebar-toggle:hover,
.app-header .app-sidebar-toggle:focus-visible {
    background: var(--lg-panel);
    border-color: var(--lg-border-strong);
}

/* Page title inside the topbar */
.lg-topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--lg-ink);
    letter-spacing: -.01em;
    margin: 0 .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

/* Global quick search */
.lg-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--lg-border);
    background: var(--lg-panel);
    border-radius: 8px;
    padding: 7px 13px;
    width: 340px;
    color: var(--lg-faint);
    font-size: 12.5px;
    margin-inline-start: .75rem;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.lg-topbar-search:focus-within {
    background: #fff;
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px var(--lg-primary-ring);
}
.lg-topbar-search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
    font: 500 12.5px var(--lg-font);
    color: var(--lg-ink);
}
.lg-topbar-search input::placeholder { color: var(--lg-faint); font-weight: 400; }
.lg-topbar-search .lg-kbd {
    font: 600 10.5px var(--lg-font);
    border: 1px solid var(--lg-border);
    background: #fff;
    border-radius: 4px;
    padding: 2px 5px;
    color: var(--lg-faint);
    white-space: nowrap;
}

.lg-search-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    width: min(430px, 92vw);
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-xl);
    box-shadow: var(--lg-shadow-modal);
    overflow: hidden;
    z-index: 1090;
    display: none;
}
.lg-search-pop.show { display: block; }
.lg-search-pop .lg-search-group {
    font: 650 10px var(--lg-font);
    color: var(--lg-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 14px 4px;
}
.lg-search-pop .lg-search-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin: 0 6px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--lg-text);
    font: 500 12.5px var(--lg-font);
    text-decoration: none;
}
.lg-search-pop .lg-search-item:hover,
.lg-search-pop .lg-search-item.active {
    background: var(--lg-panel);
    color: var(--lg-ink);
}
.lg-search-pop .lg-search-item .lg-search-ic {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--lg-divider);
    color: var(--lg-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: none;
}
.lg-search-pop .lg-search-empty {
    padding: 18px 16px;
    font: 450 12.5px var(--lg-font);
    color: var(--lg-faint);
    text-align: center;
}
.lg-search-pop .lg-search-foot {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--lg-divider);
    background: var(--lg-panel);
    font: 500 10.5px var(--lg-font);
    color: var(--lg-faint);
}

/* Language switch */
.app-shell-header .language-selector-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    font: 600 12.5px var(--lg-font);
    color: var(--lg-text) !important;
}
.app-shell-header .language-selector-nav .dropdown-toggle:hover {
    background: var(--lg-panel);
    border-color: var(--lg-border-strong);
}

/* Notification bell */
.notification-bell .nav-link { font-size: 17px; }
.notification-bell .badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -4px;
    background: var(--lg-primary) !important;
    color: #fff;
    font: 700 9.5px var(--lg-font);
    border-radius: 8px;
    padding: 2px 5px;
    border: 2px solid #fff;
}

/* Header dropdowns — white cards */
.app-shell-header .app-header-dropdown {
    color: var(--lg-text);
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-xl);
    box-shadow: var(--lg-shadow-modal);
    overflow: hidden;
    margin-top: .5rem !important;
}

.app-shell-header .app-header-dropdown .dropdown-item {
    color: var(--lg-text);
    font: 500 13px var(--lg-font);
    padding: .55rem 1rem;
}
.app-shell-header .app-header-dropdown .dropdown-item:hover,
.app-shell-header .app-header-dropdown .dropdown-item:focus {
    color: var(--lg-ink);
    background: var(--lg-panel);
}
.app-shell-header .app-header-dropdown .dropdown-item.active,
.app-shell-header .app-header-dropdown .dropdown-item:active {
    color: var(--lg-primary);
    background: var(--lg-primary-soft);
    font-weight: 650;
}

/* Notification dropdown */
.notification-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--lg-divider);
    font: 700 13.5px var(--lg-font);
    color: var(--lg-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notification-header a { color: var(--lg-muted); font-weight: 600; text-decoration: none; }
.notification-header a:hover, .notification-header a:focus { color: var(--lg-primary); text-decoration: none; }

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lg-panel);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.notification-item .lg-notif-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: none;
}
.lg-notif-ic--info    { background: var(--lg-info-bg);    color: var(--lg-info-fg); }
.lg-notif-ic--success { background: var(--lg-success-bg); color: var(--lg-success-fg); }
.lg-notif-ic--warning { background: var(--lg-warning-bg); color: var(--lg-warning-fg); }
.lg-notif-ic--danger  { background: var(--lg-danger-bg);  color: var(--lg-danger-fg); }
.lg-notif-ic--violet  { background: var(--lg-violet-bg);  color: var(--lg-violet-fg); }
.lg-notif-ic--neutral { background: var(--lg-divider);    color: var(--lg-muted); }
.notification-item .lg-notif-body { min-width: 0; flex: 1; display: block; overflow: hidden; }
.notification-bell .dropdown-menu { overflow-x: hidden; }
.app-header-notifications-dropdown { max-width: calc(100vw - 24px); }

/* On small screens the panel is too wide to hang off the bell — pin it to the
   viewport instead of letting it run past the edge. */
@media (max-width: 575.98px) {
    .notification-bell .dropdown-menu.app-header-notifications-dropdown {
        position: fixed !important;
        top: 58px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none;
        transform: none !important;
        max-height: calc(100vh - 76px);
    }
}
.notification-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-item:hover { background: var(--lg-panel); }
.notification-item:last-child { border-bottom: none; }
.notification-item.unread { background: var(--lg-primary-soft); }
/* Titles stay on one line, bodies clamp to two — nothing escapes the panel. */
.notification-item .title {
    display: block;
    font: 650 12.5px var(--lg-font);
    color: var(--lg-ink);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification-item .body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font: 450 11.5px/1.5 var(--lg-font);
    color: var(--lg-muted);
    margin-bottom: 3px;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.notification-item .time { display: block; font: 450 10.5px var(--lg-font); color: var(--lg-faint); }
.notification-empty { padding: 30px; text-align: center; color: var(--lg-faint); }
.notification-footer { padding: 10px 16px; border-top: 1px solid var(--lg-divider); text-align: center; background: var(--lg-panel); }
.notification-footer a { font: 600 12px var(--lg-font); color: var(--lg-text); text-decoration: none; }
.notification-footer a:hover, .notification-footer a:focus { color: var(--lg-primary); text-decoration: none; }

/* Avatar + profile dropdown */
.lg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lg-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 11px var(--lg-font);
    flex: none;
    overflow: hidden;
}
.lg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.app-header-user-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: .55rem;
    font: 600 12.5px var(--lg-font);
    color: var(--lg-ink) !important;
    padding-block: .3rem;
}
.lg-user-id {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    min-width: 0;
}
.lg-user-id .lg-user-name,
.lg-menu-id .lg-user-name {
    font: 600 12.5px var(--lg-font);
    color: var(--lg-ink);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.lg-user-id .lg-user-sub,
.lg-menu-id .lg-user-sub {
    font: 450 10.5px var(--lg-font);
    color: var(--lg-faint);
    display: block;
}
.lg-menu-id { padding: 8px 10px 2px; }
.app-header-profile-dropdown { min-width: 220px; }
.app-header-user-toggle .user-image {
    border: 1px solid var(--lg-border);
    box-shadow: none !important;
}

.app-header-profile-dropdown .user-header {
    padding: 1.1rem 1rem;
    color: var(--lg-ink);
    background: var(--lg-panel);
    border-bottom: 1px solid var(--lg-divider);
    text-align: center;
}
.app-header-profile-dropdown .user-header img {
    border: 2px solid #fff;
    box-shadow: 0 8px 22px rgba(15, 17, 21, .12) !important;
}
.app-header-profile-dropdown .user-header p { margin: .65rem 0 0; color: var(--lg-muted); }
.app-header-profile-dropdown .user-display-name {
    display: block;
    color: var(--lg-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
.app-header-profile-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem !important;
    background: #fff;
    box-sizing: border-box;
}
.app-header-profile-actions > .btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    text-align: center;
    font: 600 12.5px var(--lg-font);
    border-radius: 8px;
    border-color: var(--lg-border-strong);
    color: var(--lg-text);
    background: #fff;
}
.app-header-profile-actions > .btn:hover,
.app-header-profile-actions > .btn:focus {
    color: var(--lg-ink);
    background: var(--lg-panel);
    border-color: var(--lg-border-strong);
}
.app-header-profile-actions > .btn-outline-danger {
    border-color: var(--lg-danger-line);
    color: var(--lg-danger-fg);
}
.app-header-profile-actions > .btn-outline-danger:hover,
.app-header-profile-actions > .btn-outline-danger:focus {
    color: #fff;
    background: var(--lg-primary);
    border-color: var(--lg-primary);
}

/* ----------------------------------------------------------------------------
   4. SIDEBAR — black rail
   ------------------------------------------------------------------------- */
:root, body {
    --lte-sidebar-width: 240px;
}

.app-shell-sidebar {
    --shell-sidebar-bg: var(--lg-rail-bg);
    --shell-sidebar-bg-deep: var(--lg-rail-bg);
    --lte-sidebar-hover-bg: var(--lg-rail-hover);
    --lte-sidebar-color: var(--lg-rail-fg);
    --lte-sidebar-hover-color: #fff;
    --lte-sidebar-active-color: #fff;
    --lte-sidebar-menu-active-bg: var(--lg-primary);
    --lte-sidebar-menu-active-color: #fff;
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: var(--lg-rail-fg);
    --lte-sidebar-submenu-hover-color: #fff;
    --lte-sidebar-submenu-hover-bg: var(--lg-rail-hover);
    --lte-sidebar-submenu-active-color: #fff;
    --lte-sidebar-submenu-active-bg: rgba(232, 17, 45, .9);
    color: var(--lg-rail-fg);
    background: var(--lg-rail-bg) !important;
    border-inline-end: 1px solid var(--lg-rail-border);
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
}

/* Brand */
.app-shell-sidebar .sidebar-brand {
    background: var(--lg-rail-bg);
    border-bottom: 1px solid var(--lg-rail-border);
    min-height: 56px;
    display: flex;
    align-items: center;
}
.app-shell-sidebar .brand-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 20px;
    color: #fff;
}
.app-shell-sidebar .brand-image {
    max-width: 150px;
    height: 24px;
    object-fit: contain;
    object-position: left center;
    opacity: 1 !important;
    filter: invert(1) hue-rotate(180deg) saturate(0);
}
body[dir="rtl"] .app-shell-sidebar .brand-image { object-position: right center; }
.app-shell-sidebar .brand-image-compact {
    display: none;
    width: 28px;
    height: 28px;
    filter: none;
}

/* Menu */
.app-shell-sidebar .sidebar-wrapper {
    padding-top: .4rem;
    flex: 1 1 auto;
}
.app-shell-sidebar .app-shell-sidebar-menu { padding: 0 .7rem 1rem; }
.app-shell-sidebar .sidebar-menu > .nav-item { margin-bottom: .15rem; }

.app-shell-sidebar .sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: .58rem .78rem;
    color: var(--lg-rail-fg) !important;
    font: 500 13.5px var(--lg-font);
    border-radius: 9px;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 180ms ease;
}
.app-shell-sidebar .sidebar-menu .nav-link .nav-icon {
    width: 19px;
    min-width: 19px;
    margin-inline-end: .7rem;
    font-size: 15px;
    text-align: center;
    transition: none;
}
.app-shell-sidebar .sidebar-menu .nav-link > p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    flex: 1;
    gap: .4rem;
}
.app-shell-sidebar .sidebar-menu .nav-link:hover,
.app-shell-sidebar .sidebar-menu .nav-link:focus-visible {
    color: #fff !important;
    background-color: var(--lg-rail-hover);
}
.app-shell-sidebar .sidebar-menu .nav-link:hover .nav-icon { transform: none; }
.app-shell-sidebar .sidebar-menu .nav-link:focus-visible {
    outline: 2px solid rgba(232, 17, 45, .7);
    outline-offset: 2px;
}
.app-shell-sidebar .sidebar-menu .nav-link.active {
    color: #fff !important;
    background-color: var(--lg-primary) !important;
    font-weight: 650;
    box-shadow: var(--lg-shadow-primary);
}

/* Pending badges in rail */
.app-shell-sidebar .nav-badge {
    margin-inline-start: auto;
    font: 650 10.5px var(--lg-font) !important;
    padding: 2.5px 8px !important;
    border-radius: 10px !important;
}
.app-shell-sidebar .nav-link .text-bg-secondary {
    background-color: var(--lg-rail-badge) !important;
    color: #fff !important;
}
.app-shell-sidebar .nav-link .text-bg-danger {
    background-color: var(--lg-primary) !important;
    color: #fff !important;
}
.app-shell-sidebar .nav-link.active .text-bg-danger,
.app-shell-sidebar .nav-link.active .text-bg-secondary {
    background-color: rgba(255, 255, 255, .22) !important;
}

/* Treeview (submenu) */
.app-shell-sidebar .nav-treeview { overflow: hidden; }
.app-shell-sidebar .nav-treeview .nav-link {
    min-height: 34px;
    padding-block: .4rem;
    padding-inline-start: 2.35rem;
    font-size: 12.5px;
    border-radius: 8px;
}
.app-shell-sidebar .nav-treeview .nav-link .nav-icon {
    display: none;
}
.app-shell-sidebar .nav-treeview .nav-treeview .nav-link {
    padding-inline-start: 3.1rem;
}
.app-shell-sidebar .nav-treeview .nav-link.active {
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none;
    position: relative;
}
.app-shell-sidebar .nav-treeview .nav-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 999px;
    background: var(--lg-primary);
}
.app-shell-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link:not(.active) {
    background-color: var(--lg-rail-hover) !important;
    color: #fff !important;
}
.app-shell-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link.active {
    background-color: var(--lg-primary) !important;
}
.app-shell-sidebar .nav-arrow {
    transition: transform 200ms ease;
    font-size: 11px;
    margin-inline-start: auto;
    color: var(--lg-rail-muted);
}

/* Section headers (DMS groups) */
.dms-sidebar .dms-sidebar-section,
.app-shell-sidebar .nav-header {
    display: flex;
    align-items: center;
    min-height: 1.4rem;
    margin: 1rem .55rem .3rem;
    padding: 0;
    color: #5C6470;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    background: transparent;
}

/* Rail footer — provider identity */
.lg-rail-user {
    flex: 0 0 auto;
    padding: 13px 16px;
    border-top: 1px solid var(--lg-rail-border);
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--lg-rail-bg);
}
.lg-rail-user .lg-rail-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--lg-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 11.5px var(--lg-font);
    flex: none;
    overflow: hidden;
}
.lg-rail-user .lg-rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lg-rail-user .lg-rail-meta { flex: 1; min-width: 0; }
.lg-rail-user .lg-rail-name {
    font: 600 12.5px var(--lg-font);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lg-rail-user .lg-rail-sub {
    font: 400 10.5px var(--lg-font);
    color: var(--lg-rail-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lg-rail-user .lg-rail-logout {
    color: var(--lg-rail-muted);
    font-size: 15px;
    flex: none;
    display: inline-flex;
    padding: 4px;
    border-radius: 6px;
}
.lg-rail-user .lg-rail-logout:hover { color: #fff; background: var(--lg-rail-hover); }

/* Collapsed (mini) rail */
@media (min-width: 992px) {
    body.sidebar-mini.sidebar-collapse .app-shell-sidebar:not(:hover) .lg-rail-user {
        justify-content: center;
        padding-inline: .4rem;
    }
    body.sidebar-mini.sidebar-collapse .app-shell-sidebar:not(:hover) .lg-rail-meta,
    body.sidebar-mini.sidebar-collapse .app-shell-sidebar:not(:hover) .lg-rail-logout {
        display: none;
    }
    body.sidebar-mini.sidebar-collapse .app-shell-sidebar:not(:hover) .brand-link {
        justify-content: center;
        padding-inline: .4rem;
    }
}

/* ----------------------------------------------------------------------------
   5. CONTENT AREA
   ------------------------------------------------------------------------- */
.app-main {
    background: var(--lg-ground);
}
.app-content { padding-top: 1.25rem; }
.app-content > .container-fluid { padding-inline: 1.5rem; }
@media (max-width: 767.98px) {
    .app-content > .container-fluid { padding-inline: 1rem; }
}

.app-content-header { display: none !important; }

.app-footer {
    background: transparent;
    border-top: 1px solid var(--lg-border);
    color: var(--lg-faint);
    font-size: 12px;
    padding: .85rem 1.5rem;
}
.app-footer a { color: var(--lg-muted); }

/* Instruction bar → quiet info card */
.sp-instruction-bar,
.alert.sp-instruction-bar {
    background: #fff;
    border: 1px solid var(--lg-border);
    border-inline-start: 3px solid var(--lg-warning-line);
    color: var(--lg-text);
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-card);
    font-size: 12.5px;
}
.sp-instruction-bar strong { color: var(--lg-ink); }

/* ----------------------------------------------------------------------------
   6. CARDS
   ------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--lg-border);
    --bs-card-border-radius: var(--lg-radius-lg);
    --bs-card-inner-border-radius: calc(var(--lg-radius-lg) - 1px);
    --bs-card-cap-bg: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    background: var(--lg-card);
    box-shadow: var(--lg-shadow-card);
    margin-bottom: 1.25rem;
}
.card.card-primary.card-outline,
.card.card-outline {
    border-top: 1px solid var(--lg-border) !important;
    border-color: var(--lg-border) !important;
}
.card > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg) var(--lg-radius-lg) 0 0 !important;
    padding: .85rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
/* AdminLTE clearfix pseudo becomes a flex item and breaks header layouts */
.card > .card-header::after { content: none !important; }
.card > .card-header .card-title {
    font: 700 13.5px var(--lg-font);
    color: var(--lg-ink);
    margin: 0;
}
.card > .card-body { padding: 1.1rem 1.15rem; }
.card > .card-footer {
    background: #FAFBFC;
    border-top: 1px solid var(--lg-divider);
    border-radius: 0 0 var(--lg-radius-lg) var(--lg-radius-lg) !important;
}

/* Count chip pattern: "Total records: N" */
.card-header .card-title label,
#lblTotal, [id^="lblTotal"] {
    font-weight: 650;
    color: var(--lg-ink);
}

/* ----------------------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 8px;
    font-family: var(--lg-font);
    font-weight: 600;
    font-size: 12.5px;
    padding: .5rem .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.btn:focus-visible { box-shadow: 0 0 0 4px var(--lg-primary-ring); }
.btn-sm, .btn-group-sm > .btn {
    font-size: 11.5px;
    padding: .32rem .7rem;
    border-radius: 7px;
}
.btn-lg { font-size: 14px; padding: .7rem 1.3rem; border-radius: 9px; }

.btn-primary {
    --bs-btn-bg: var(--lg-primary);
    --bs-btn-border-color: var(--lg-primary);
    --bs-btn-hover-bg: var(--lg-primary-hover);
    --bs-btn-hover-border-color: var(--lg-primary-hover);
    --bs-btn-active-bg: var(--lg-primary-hover);
    --bs-btn-active-border-color: var(--lg-primary-hover);
    --bs-btn-disabled-bg: #F5A6B1;
    --bs-btn-disabled-border-color: #F5A6B1;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--lg-primary);
    --bs-btn-border-color: var(--lg-danger-line);
    --bs-btn-hover-bg: var(--lg-primary-soft);
    --bs-btn-hover-color: var(--lg-primary-hover);
    --bs-btn-hover-border-color: var(--lg-primary);
    --bs-btn-active-bg: var(--lg-primary);
    --bs-btn-active-border-color: var(--lg-primary);
    --bs-btn-active-color: #fff;
}

/* Neutral secondary — bordered white (design's secondary action) */
.btn-secondary, .btn-default {
    --bs-btn-bg: #fff;
    --bs-btn-color: #344054;
    --bs-btn-border-color: var(--lg-border-strong);
    --bs-btn-hover-bg: var(--lg-panel);
    --bs-btn-hover-color: var(--lg-ink);
    --bs-btn-hover-border-color: var(--lg-border-strong);
    --bs-btn-active-bg: var(--lg-divider);
    --bs-btn-active-color: var(--lg-ink);
    --bs-btn-active-border-color: var(--lg-border-strong);
}
.btn-outline-secondary {
    --bs-btn-color: #344054;
    --bs-btn-border-color: var(--lg-border-strong);
    --bs-btn-hover-bg: var(--lg-panel);
    --bs-btn-hover-color: var(--lg-ink);
    --bs-btn-hover-border-color: var(--lg-border-strong);
    --bs-btn-active-bg: var(--lg-divider);
    --bs-btn-active-color: var(--lg-ink);
    --bs-btn-active-border-color: var(--lg-border-strong);
}

.btn-success {
    --bs-btn-bg: var(--lg-success-deep);
    --bs-btn-border-color: var(--lg-success-deep);
    --bs-btn-hover-bg: #047857;
    --bs-btn-hover-border-color: #047857;
    --bs-btn-active-bg: #047857;
    --bs-btn-active-border-color: #047857;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    color: #fff;
    background-color: var(--lg-success-deep);
    border-color: var(--lg-success-deep);
    box-shadow: none;
}
.btn-danger {
    --bs-btn-bg: var(--lg-primary);
    --bs-btn-border-color: var(--lg-primary);
    --bs-btn-hover-bg: var(--lg-primary-hover);
    --bs-btn-hover-border-color: var(--lg-primary-hover);
    --bs-btn-active-bg: var(--lg-primary-hover);
    --bs-btn-active-border-color: var(--lg-primary-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn-warning {
    --bs-btn-bg: var(--lg-warning-bg);
    --bs-btn-border-color: var(--lg-warning-line);
    --bs-btn-color: var(--lg-warning-fg);
    --bs-btn-hover-bg: #FEF0C7;
    --bs-btn-hover-border-color: var(--lg-warning-line);
    --bs-btn-hover-color: #93370D;
    --bs-btn-active-bg: #FEF0C7;
    --bs-btn-active-color: #93370D;
    --bs-btn-active-border-color: var(--lg-warning-line);
}
.btn-info {
    --bs-btn-bg: var(--lg-info-bg);
    --bs-btn-border-color: var(--lg-info-line);
    --bs-btn-color: var(--lg-info-fg);
    --bs-btn-hover-bg: #DBE4FF;
    --bs-btn-hover-border-color: var(--lg-info-line);
    --bs-btn-hover-color: var(--lg-info-fg);
    --bs-btn-active-bg: #DBE4FF;
    --bs-btn-active-color: var(--lg-info-fg);
    --bs-btn-active-border-color: var(--lg-info-line);
}

/* Legacy accent button used across old pages → brand primary */
.btn-yellow {
    background-color: var(--lg-primary) !important;
    border-color: var(--lg-primary) !important;
    color: #fff !important;
    font-weight: 650 !important;
    border-radius: 9px;
}
.btn-yellow:hover, .btn-yellow:focus {
    background-color: var(--lg-primary-hover) !important;
    color: #fff !important;
}

/* Dark button (design's "Call"/neutral emphasis) */
.btn-dark {
    --bs-btn-bg: var(--lg-ink);
    --bs-btn-border-color: var(--lg-ink);
    --bs-btn-hover-bg: var(--lg-primary);
    --bs-btn-hover-border-color: var(--lg-primary);
}

/* ----------------------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------------------- */
.form-label, label.form-label {
    font: 600 12px var(--lg-font);
    color: #344054;
    margin-bottom: .35rem !important;
}
.form-control, .form-select {
    font-family: var(--lg-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--lg-ink);
    border: 1px solid var(--lg-border-strong);
    border-radius: var(--lg-radius);
    padding: .5rem .8rem;
    background-color: #fff;
    min-height: 40px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control-sm, .form-select-sm { min-height: 0; }
.btn:not(.btn-sm):not(.btn-lg):not(.btn-tool):not(.btn-close) { min-height: 40px; }

/* ---- Dropdown surfaces: one consistent component -------------------------
   Native <select>, legacy select.form-control and select2 must all read as the
   same control — same height, radius, border, chevron and focus ring. */
.form-select,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2398A2B3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 15px 15px;
    padding-inline-end: 2.1rem;
}
[dir="rtl"] .form-select,
[dir="rtl"] select.form-control {
    background-position: left .75rem center;
    padding-inline-end: .8rem;
    padding-inline-start: 2.1rem;
}
.form-select:disabled, select.form-control:disabled { background-color: var(--lg-panel); opacity: 1; }
/* multi-selects have no chevron and grow with their content */
.form-select[multiple], select.form-control[multiple] {
    background-image: none;
    padding-inline-end: .8rem;
    min-height: 0;
}
.form-control::placeholder { color: var(--lg-faint); font-weight: 400; }
.form-control:focus, .form-select:focus {
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px var(--lg-primary-ring);
    outline: none;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--lg-panel);
    color: var(--lg-muted);
}
textarea.form-control { min-height: 84px; }

.form-check-input {
    width: 15px;
    height: 15px;
    border: 1px solid var(--lg-border-strong);
    margin-top: .2em;
}
.form-check-input:checked {
    background-color: var(--lg-primary);
    border-color: var(--lg-primary);
}
.form-check-input:focus {
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px var(--lg-primary-ring);
}
input[type="checkbox"] { accent-color: var(--lg-primary); }

.input-group-text {
    background: var(--lg-panel);
    border: 1px solid var(--lg-border-strong);
    color: var(--lg-text);
    font-size: 12.5px;
    border-radius: var(--lg-radius);
}

/* Input groups: square the joined inner corners (our radius overrides
   Bootstrap's own reset, so re-assert it with logical, RTL-safe props) */
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
    margin-inline-start: -1px;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

/* validation */
.needs-validation .input-validation-error,
.form-control.input-validation-error,
.form-control.is-invalid {
    border-color: var(--lg-primary) !important;
}
.text-danger, .field-validation-error {
    color: var(--lg-danger-deep) !important;
    font-size: 12px;
}
.invalid-feedback { font-size: 11.5px; }

/* Select2 (bootstrap-5 theme refinement) */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--lg-border-strong) !important;
    border-radius: var(--lg-radius) !important;
    font-family: var(--lg-font);
    font-size: 13px;
    min-height: 40px;
}
/* multi-select token chips (admin pattern) */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--lg-divider) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--lg-text) !important;
    font: 600 12px var(--lg-font) !important;
    padding: 2px 8px !important;
    margin: 3px 4px 3px 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--lg-faint) !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px;
    order: 2;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--lg-primary) !important;
    background: transparent !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px var(--lg-primary-ring);
}
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown {
    border: 1px solid var(--lg-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .28);
    font-family: var(--lg-font);
    font-size: 13px;
    overflow: hidden;
    padding: 4px;
}
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--default .select2-results__option {
    border-radius: 8px;
    padding: 8px 10px;
    margin: 1px 0;
}
/* single-select: vertically centre the value and align the chevron with native selects */
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4;
    padding-inline-start: .8rem;
    color: var(--lg-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    inset-inline-end: 6px;
    inset-inline-start: auto;
}
.select2-container--bootstrap-5 .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--lg-border-strong) !important;
    border-radius: 8px !important;
    font-size: 13px;
    padding: 7px 10px;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--lg-panel) !important;
    color: var(--lg-ink) !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: var(--lg-primary-soft) !important;
    color: var(--lg-primary) !important;
    font-weight: 600;
}

/* Daterangepicker */
.daterangepicker {
    font-family: var(--lg-font);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-pop);
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--lg-primary);
}
.daterangepicker td.in-range { background-color: var(--lg-primary-soft); }
.daterangepicker .btn-primary { background: var(--lg-primary); border-color: var(--lg-primary); }

/* ----------------------------------------------------------------------------
   9. TABLES + DATATABLES
   ------------------------------------------------------------------------- */
.table {
    --bs-table-color: var(--lg-text);
    --bs-table-hover-bg: var(--lg-panel);
    font-size: 12.5px;
    color: var(--lg-text);
    margin-bottom: .25rem;
}
.table > :not(caption) > * > * {
    padding: .65rem .75rem;
    border-bottom-color: var(--lg-divider);
    background-color: transparent;
}
.table thead th,
.table thead tr th,
.cus-table-header th,
.cus-table-header tr th {
    background-color: var(--lg-panel) !important;
    color: var(--lg-muted) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--lg-border) !important;
    padding: .55rem .75rem;
    text-align: start !important;
    white-space: nowrap;
}
.cus-table-header { background-color: transparent !important; }

.table tbody td {
    vertical-align: middle;
    color: var(--lg-text);
}
.table tbody tr { transition: background-color 120ms ease; }
.table-hover tbody tr:hover,
.table tbody tr:hover { background-color: var(--lg-panel); }

/* Neutralize legacy zebra striping — clean rows per design */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: transparent;
    background-color: transparent;
    box-shadow: none;
}
tr.rowstyle, tr.Altrowstyle { background-color: transparent; }
tr.rowstyle:hover, tr.Altrowstyle:hover { background-color: var(--lg-panel); }

.table-bordered { border-color: var(--lg-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--lg-divider); }

/* row action buttons align */
.table td .btn-sm { white-space: nowrap; }

/* DataTables chrome */
.dataTables_wrapper { padding: 0; }
.dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: .8rem .25rem .35rem;
    font-family: var(--lg-font);
}
.dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px !important;
    border-radius: 7px;
    font: 500 12px var(--lg-font);
    color: var(--lg-text) !important;
    cursor: pointer;
    text-decoration: none !important;
    border: 0;
    transition: background-color 130ms ease, color 130ms ease;
}
.dataTables_paginate .paginate_button:hover { background: var(--lg-divider); color: var(--lg-ink) !important; }
.dataTables_paginate .paginate_button.current {
    background: var(--lg-ink);
    color: #fff !important;
    font-weight: 600;
}
.dataTables_paginate .paginate_button.current:hover { background: var(--lg-ink); color: #fff !important; }
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    border: 1px solid var(--lg-border);
    color: var(--lg-text) !important;
    background: #fff;
}
.dataTables_paginate .paginate_button.previous:hover,
.dataTables_paginate .paginate_button.next:hover { background: var(--lg-panel); }
.dataTables_paginate .paginate_button.disabled {
    color: var(--lg-faint) !important;
    pointer-events: none;
    opacity: .6;
}
.dataTables_paginate .ellipsis { color: var(--lg-faint); padding: 0 4px; }
.dataTables_processing {
    font-family: var(--lg-font);
    color: var(--lg-muted);
    background: rgba(255, 255, 255, .85);
    border-radius: var(--lg-radius);
}

/* sort icons */
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
    opacity: .35;
}
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 1;
    color: var(--lg-primary);
}

/* ----------------------------------------------------------------------------
   10. STATUS BADGES / PILLS
   ------------------------------------------------------------------------- */
.lg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 650 10.5px var(--lg-font);
    border-radius: 12px;
    padding: 3.5px 9px;
    white-space: nowrap;
    line-height: 1.3;
    color: var(--lg-slate-fg);
    background: var(--lg-slate-bg);
}
.lg-badge--success  { color: var(--lg-success-fg);  background: var(--lg-success-bg); }
.lg-badge--warning  { color: var(--lg-warning-fg);  background: var(--lg-warning-bg); }
.lg-badge--danger   { color: var(--lg-danger-fg);   background: var(--lg-danger-bg); }
.lg-badge--info     { color: var(--lg-info-fg);     background: var(--lg-info-bg); }
.lg-badge--violet   { color: var(--lg-violet-fg);   background: var(--lg-violet-bg); }
.lg-badge--slate    { color: var(--lg-slate-fg);    background: var(--lg-slate-bg); }
.lg-badge--neutral  { color: var(--lg-text);        background: var(--lg-divider); }
.lg-badge--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Bootstrap badges follow the soft-hue system */
.badge.text-bg-success { color: var(--lg-success-fg) !important; background-color: var(--lg-success-bg) !important; }
.badge.text-bg-warning { color: var(--lg-warning-fg) !important; background-color: var(--lg-warning-bg) !important; }
.badge.text-bg-info    { color: var(--lg-info-fg) !important;    background-color: var(--lg-info-bg) !important; }

/* ----------------------------------------------------------------------------
   11. TABS & PILLS — segmented control (admin pattern)
   ------------------------------------------------------------------------- */
.app-main .nav.nav-tabs, .modal-body .nav.nav-tabs,
.app-main .nav.nav-pills, .modal-body .nav.nav-pills {
    display: inline-flex;
    border-bottom: 0;
    background: #EEF0F4;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
}
.nav-tabs .nav-link, .nav-pills .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: 500 13px var(--lg-font) !important;
    padding: 8px 15px !important;
    margin-bottom: 0;
    white-space: nowrap;
    transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.nav-tabs .nav-link:not(.active):not(.disabled):hover,
.nav-pills .nav-link:not(.active):not(.disabled):hover {
    color: var(--lg-ink) !important;
    background: rgba(255, 255, 255, .6) !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--lg-ink) !important;
    background: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.nav-tabs .nav-link.active i,
.nav-pills .nav-link.active i { color: var(--lg-primary); }
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    color: var(--lg-faint) !important;
}
/* count chip inside a tab */
.nav-tabs .nav-link .lg-tab-count,
.nav-pills .nav-link .lg-tab-count,
.lg-list-tabs .lg-tab .lg-tab-count {
    background: #E6E9EF;
    border-radius: 999px;
    padding: 2px 8px;
    font: 650 11px var(--lg-font);
    color: var(--lg-muted);
}
.nav-tabs .nav-link.active .lg-tab-count,
.nav-pills .nav-link.active .lg-tab-count,
.lg-list-tabs .lg-tab.active .lg-tab-count {
    background: var(--lg-primary-soft);
    color: var(--lg-primary);
}

/* Standalone status-tab strip for list pages (admin .lg-list-tabs) */
.lg-list-tabs {
    display: inline-flex;
    background: #EEF0F4;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.lg-list-tabs .lg-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--lg-muted);
    font: 500 13px var(--lg-font);
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
}
.lg-list-tabs .lg-tab:hover { color: var(--lg-ink); background: rgba(255, 255, 255, .6); }
.lg-list-tabs .lg-tab.active {
    color: var(--lg-ink);
    background: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.lg-list-tabs .lg-tab.active i { color: var(--lg-primary); }

/* ----------------------------------------------------------------------------
   11b. LIST-PAGE FILTER TOOLBAR (admin .lg-toolbar pattern)
   ------------------------------------------------------------------------- */
.lg-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
/* Search chip — usable anywhere (filter toolbars, the ticket inbox rail, panels),
   not just inside .lg-toolbar. */
.lg-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lg-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--lg-faint);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.lg-search:focus-within {
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px var(--lg-primary-ring);
}
.lg-search i { font-size: 13px; flex: none; }
.lg-search input {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 0;
    height: 100%;
    padding: 0;
    font: 500 13px var(--lg-font);
    color: var(--lg-ink);
    min-width: 0;
}
.lg-search input::placeholder { color: var(--lg-faint); font-weight: 400; }
.lg-toolbar .lg-search { width: 300px; }
.lg-toolbar .lg-filter,
.lg-toolbar select.form-select,
.lg-toolbar .form-select {
    height: 40px;
    min-height: 40px;
    width: auto;
    min-width: 150px;
    font-weight: 500;
    color: #344054;
    border-radius: 10px;
}
.lg-toolbar .lg-spacer { flex: 1; }

/* Outside a toolbar a converted select fills its container like a normal field. */
.select2-container { max-width: 100%; }
/* Converted selects must match the 40px field height of every other control. */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    display: flex !important;
    align-items: center;
    padding-block: 0;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    padding-block: 0;
}
.select2-container:not(.select2-container--open) { vertical-align: middle; }
.card-body .select2-container,
.modal-body .select2-container,
.lg-inbox-side .select2-container,
form .select2-container:not(.lg-toolbar .select2-container) { width: 100% !important; }

/* select2 inside the toolbar behaves like the other filter chips */
.lg-toolbar .select2-container {
    width: auto !important;
    min-width: 160px;
    max-width: 260px;
}
.lg-toolbar .select2-container--bootstrap-5 .select2-selection {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}
.lg-toolbar .select2-container--bootstrap-5 .select2-selection__rendered {
    padding-inline-start: 0;
    font-weight: 500;
    color: #344054;
}
.lg-toolbar .btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 10px;
}
@media (max-width: 767.98px) {
    .lg-toolbar .lg-search { width: 100%; }
    .lg-toolbar .lg-filter, .lg-toolbar .form-select { flex: 1 1 45%; min-width: 0; }
    .lg-toolbar .btn { flex: 1 1 auto; justify-content: center; }
    .lg-toolbar .lg-spacer { display: none; }
}

/* ----------------------------------------------------------------------------
   12. MODALS
   ------------------------------------------------------------------------- */
.modal-backdrop { --bs-backdrop-bg: rgba(15, 17, 21, .55); }
.modal-content {
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-xl);
    box-shadow: var(--lg-shadow-modal);
}
.modal-header {
    border-bottom: 1px solid var(--lg-divider);
    padding: 1rem 1.35rem;
}
.modal-title {
    font: 700 15px var(--lg-font);
    color: var(--lg-ink);
}
.modal-body { padding: 1.15rem 1.35rem; }
.modal-footer {
    border-top: 1px solid var(--lg-divider);
    background: #FAFBFC;
    border-radius: 0 0 var(--lg-radius-xl) var(--lg-radius-xl);
    padding: .85rem 1.35rem;
}
.btn-close:focus { box-shadow: 0 0 0 4px var(--lg-primary-ring); }

/* ----------------------------------------------------------------------------
   13. ALERTS
   ------------------------------------------------------------------------- */
.alert {
    border-radius: var(--lg-radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    padding: .8rem 1rem;
}
.alert-danger {
    color: #93370D;
    color: var(--lg-danger-fg);
    background-color: var(--lg-danger-bg);
    border-color: var(--lg-danger-line);
}
.alert-info {
    color: var(--lg-info-fg);
    background-color: var(--lg-info-bg);
    border-color: var(--lg-info-line);
}
.alert-warning {
    color: #93370D;
    background-color: var(--lg-warning-bg);
    border-color: var(--lg-warning-line);
}
.alert-success {
    color: var(--lg-success-fg);
    background-color: var(--lg-success-bg);
    border-color: var(--lg-success-line);
}

/* ----------------------------------------------------------------------------
   14. DROPDOWNS (generic) — admin popover language
   ------------------------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-border-color: var(--lg-border);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-link-hover-bg: var(--lg-panel);
    --bs-dropdown-link-active-bg: var(--lg-primary-soft);
    --bs-dropdown-link-active-color: var(--lg-primary);
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .28);
    font-size: 13px;
    min-width: 190px;
    padding: 6px;
}
.dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    font-weight: 500;
}
.dropdown-menu .dropdown-item i { width: 18px; text-align: center; color: var(--lg-muted); flex: none; }
.dropdown-menu .dropdown-divider { margin: .35rem .25rem; border-color: var(--lg-divider); }
.dropdown-menu .lg-menu-danger, .dropdown-menu .lg-menu-danger i { color: var(--lg-danger-deep); }
.dropdown-menu .lg-menu-danger:hover { background: var(--lg-danger-bg); color: var(--lg-danger-deep); }

/* Row-action kebab (⋯) trigger */
.lg-row-kebab {
    width: 32px;
    height: 32px;
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.lg-row-kebab:hover, .lg-row-kebab[aria-expanded="true"] {
    background: var(--lg-primary-soft);
    color: var(--lg-primary);
    border-color: var(--lg-danger-line);
}
.lg-row-menu li { list-style: none; }
.lg-row-actions { display: inline-flex; justify-content: flex-end; }
/* single-action rows: icon-only ghost button, same footprint as the kebab */
.table .lg-row-iconbtn, .table a.btn.lg-row-iconbtn, .table button.btn.lg-row-iconbtn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    /* clear any me-*/ms-* the original button carried so its right edge lines up
       exactly with the ⋯ button on neighbouring rows */
    margin: 0 !important;
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.table .lg-row-iconbtn i { margin: 0 !important; font-size: 14px; }
.table .lg-row-iconbtn:hover {
    background: var(--lg-primary-soft);
    color: var(--lg-primary);
    border-color: var(--lg-danger-line);
}
td:has(> .lg-row-actions) { text-align: end; }
/* a lone action button sits exactly where the ⋯ menu would, hard against the end */
td:has(> .lg-row-iconbtn) { text-align: end; }

/* Keep the ACTION header over its buttons instead of hugging the left edge. */
.table:has(tbody .lg-row-actions) thead th:last-child,
.table:has(tbody .lg-row-iconbtn) thead th:last-child,
.table:has(tbody td:last-child .btn) thead th:last-child {
    text-align: end !important;
}

/* Selection column: identical narrow, centred footprint in head and body. */
.table thead th:has(input[type="checkbox"]),
.table tbody td:has(> input[type="checkbox"]),
.table tbody td:has(> .form-check > input[type="checkbox"]) {
    width: 44px;
    text-align: center !important;
    padding-inline: 0;
    vertical-align: middle;
}
.table thead th input[type="checkbox"],
.table tbody td input[type="checkbox"] {
    margin: 0;
    float: none;
    vertical-align: middle;
}

/* moved action controls: flatten their button chrome into menu-row look */
.lg-row-menu > li > .dropdown-item {
    background: none;
    border: 0;
    box-shadow: none;
    min-height: 36px;
    width: 100%;
    text-align: start;
    justify-content: flex-start;
    color: var(--lg-text);
    font: 500 13px var(--lg-font);
    padding: 8px 10px;
    border-radius: 8px;
}
.lg-row-menu > li > .dropdown-item:hover { background: var(--lg-panel); color: var(--lg-ink); }
.lg-row-menu > li > .dropdown-item i { width: 18px; text-align: center; color: var(--lg-muted); margin-inline-end: 0; }
.lg-row-menu > li > .dropdown-item.lg-menu-danger,
.lg-row-menu > li > .dropdown-item.lg-menu-danger i { color: var(--lg-danger-deep); }
.lg-row-menu > li > .dropdown-item.lg-menu-danger:hover { background: var(--lg-danger-bg); }
/* unlock scroll containers while a row menu is open */
.lg-overflow-unlock { overflow: visible !important; }

/* Native date inputs inside a toolbar chip: hide the browser glyph and let the
   whole chip open the picker, so only our bi-calendar3 icon shows. */
.lg-toolbar .lg-search input[type="date"] { position: relative; }
.lg-toolbar .lg-search input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.lg-toolbar .lg-search input[type="date"]::-webkit-inner-spin-button,
.lg-toolbar .lg-search input[type="date"]::-webkit-clear-button { display: none; }

/* Page-info (help) popover — admin pattern */
.lg-info-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lg-faint);
    font-size: 16px;
    cursor: pointer;
    flex: none;
    transition: color 140ms ease, background 140ms ease;
}
.lg-info-btn.has-content { display: inline-flex; }
.lg-info-btn:hover, .lg-info-btn[aria-expanded="true"] {
    color: var(--lg-primary);
    background: var(--lg-primary-soft);
}
.lg-info-pop {
    position: fixed;
    top: 60px;
    inset-inline-start: auto;
    width: min(460px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-xl);
    box-shadow: var(--lg-shadow-modal);
    z-index: 1085;
    display: none;
    overflow: hidden;
}
.lg-info-pop.show { display: block; }
.lg-info-pop .lg-info-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lg-divider);
    font: 700 13.5px var(--lg-font);
    color: var(--lg-ink);
}
.lg-info-pop .lg-info-pop-head i { color: var(--lg-primary); }
.lg-info-pop .lg-info-pop-close {
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: var(--lg-faint);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.lg-info-pop .lg-info-pop-close:hover { color: var(--lg-ink); background: var(--lg-divider); }
.lg-info-pop .lg-info-pop-body {
    padding: 14px 16px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--lg-text);
}
.lg-info-pop .lg-info-pop-body strong { color: var(--lg-ink); display: block; margin-bottom: 2px; }
.lg-info-pop .lg-info-pop-body strong + p, .lg-info-pop .lg-info-pop-body p { margin-bottom: .6rem; }
.lg-info-pop .lg-info-pop-body ul { padding-inline-start: 1.1rem; margin-bottom: 0; }
.lg-info-pop .lg-info-pop-body li + li { margin-top: .25rem; }
/* the relocated instruction bar loses its card chrome inside the popover */
.lg-info-pop .sp-instruction-bar {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ----------------------------------------------------------------------------
   15. LOADING — skeletons + top progress bar (no spinners)
   ------------------------------------------------------------------------- */
/* Legacy overlay is retired — never shown */
.overlay { display: none !important; }

/* Slim indeterminate progress bar for full-page transitions */
.lg-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}
.lg-top-progress.active { opacity: 1; }
.lg-top-progress .lg-top-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--lg-primary), #FF5A6E);
    box-shadow: 0 0 8px rgba(232, 17, 45, .5);
    animation: lg-progress-slide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
.lg-top-progress.done .lg-top-progress-bar {
    animation: none;
    width: 100%;
    transition: width 250ms ease;
}
@keyframes lg-progress-slide {
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 46%; }
    100% { left: 100%; width: 40%; }
}

/* Shimmer skeleton primitives */
.lg-skel {
    display: inline-block;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #EEF1F5 25%, #F6F8FA 45%, #EEF1F5 65%);
    background-size: 200% 100%;
    animation: lg-shimmer 1.3s ease-in-out infinite;
    vertical-align: middle;
    max-width: 100%;
}
.lg-skel--lg { height: 14px; border-radius: 6px; }
.lg-skel--xl { height: 22px; border-radius: 7px; }
.lg-skel--circle { border-radius: 50%; }
.lg-skel--box { border-radius: 8px; }
@keyframes lg-shimmer {
    0% { background-position: 180% 0; }
    100% { background-position: -20% 0; }
}
.lg-skel-row td { padding: .78rem .75rem !important; }
.lg-skel-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 4px;
    align-items: stretch;
}
.lg-skel-stack .lg-skel-line { height: 11px; }

/* Card/chart placeholder block */
.lg-skel-card {
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    background: #fff;
    padding: 14px 16px;
}

/* Styled empty state used by DataTables zeroRecords/emptyTable */
.lg-table-empty {
    padding: 34px 16px;
    text-align: center;
}
.lg-table-empty .lg-table-empty-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lg-divider);
    color: var(--lg-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.lg-table-empty .lg-table-empty-title {
    font: 700 14px var(--lg-font);
    color: var(--lg-ink);
    margin-top: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.lg-table-empty .lg-table-empty-sub {
    font: 450 12px/1.6 var(--lg-font);
    color: var(--lg-muted);
    margin-top: 5px;
    text-transform: none;
    letter-spacing: 0;
}
td.dataTables_empty {
    background: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ----------------------------------------------------------------------------
   16. SWEETALERT2
   ------------------------------------------------------------------------- */
.swal2-popup {
    font-family: var(--lg-font) !important;
    border-radius: var(--lg-radius-xl) !important;
    box-shadow: var(--lg-shadow-modal) !important;
    font-size: 14px !important;
}
.swal2-title { color: var(--lg-ink) !important; font-weight: 700 !important; font-size: 18px !important; }
.swal2-html-container { color: var(--lg-text) !important; font-size: 13.5px !important; }
.swal2-styled.swal2-confirm {
    background-color: var(--lg-primary) !important;
    border-radius: 8px !important;
    font-weight: 650 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-confirm:hover { background-color: var(--lg-primary-hover) !important; }
.swal2-styled.swal2-cancel {
    background-color: #fff !important;
    color: #344054 !important;
    border: 1px solid var(--lg-border-strong) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 4px var(--lg-primary-ring) !important; }

/* Confirmation dialog — mirrors the design's cancel-order card */
.swal2-popup.lg-confirm-popup {
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 0 !important;
    border-radius: var(--lg-radius-xl) !important;
    text-align: start;
}
.lg-confirm-popup .swal2-html-container.lg-confirm-html {
    margin: 0 !important;
    padding: 20px 22px 4px !important;
    text-align: start !important;
}
.lg-confirm-head { display: flex; align-items: center; gap: 10px; }
.lg-confirm-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}
.lg-confirm-ic--danger { background: var(--lg-danger-bg); color: var(--lg-danger-deep); }
.lg-confirm-ic--info   { background: var(--lg-info-bg);   color: var(--lg-info-fg); }
.lg-confirm-title {
    font: 700 15px var(--lg-font);
    color: var(--lg-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.lg-confirm-body {
    font: 450 12.5px/1.65 var(--lg-font);
    color: var(--lg-muted);
    margin-top: 12px;
    overflow-wrap: anywhere;
}
.lg-confirm-popup .swal2-actions.lg-confirm-actions {
    justify-content: flex-end;
    gap: 10px;
    margin: 0 !important;
    padding: 18px 22px;
    width: 100%;
}
.lg-confirm-popup .swal2-actions.lg-confirm-actions .btn { margin: 0; }
.lg-confirm-popup .swal2-icon, .lg-confirm-popup .swal2-title { display: none !important; }

/* ----------------------------------------------------------------------------
   17. STAT / KPI CARDS (dashboard redesign)
   ------------------------------------------------------------------------- */
.kpi-card,
.kpi-tab--customers .kpi-card,
.kpi-tab--products .kpi-card,
.kpi-tab--tickets .kpi-card {
    position: relative;
    overflow: visible;
    isolation: auto;
    background: #fff !important;
    color: var(--lg-ink) !important;
    border: 1px solid var(--lg-border) !important;
    border-left: 1px solid var(--lg-border) !important;
    border-radius: var(--lg-radius-lg);
    padding: 1rem 1.1rem;
    min-height: 96px;
    box-shadow: var(--lg-shadow-card);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kpi-card:hover {
    transform: none;
    border-color: var(--lg-faint) !important;
    box-shadow: 0 4px 14px rgba(15, 17, 21, .07);
}
.kpi-card::after, .kpi-card::before,
.kpi-tab--products .kpi-card::before { display: none !important; }

.kpi-card .kpi-label,
.kpi-tab--customers .kpi-card .kpi-label,
.kpi-tab--products .kpi-card .kpi-label,
.kpi-tab--tickets .kpi-card .kpi-label {
    order: -1;
    font: 500 11px var(--lg-font);
    color: var(--lg-muted) !important;
    opacity: 1;
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.kpi-card .kpi-value,
.kpi-tab--customers .kpi-card .kpi-value,
.kpi-tab--products .kpi-card .kpi-value,
.kpi-tab--tickets .kpi-card .kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--lg-ink) !important;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin: 0;
    line-height: 1.1;
}
.kpi-card .kpi-icon,
.kpi-tab--customers .kpi-card .kpi-icon,
.kpi-tab--products .kpi-card .kpi-icon,
.kpi-tab--tickets .kpi-card .kpi-icon {
    position: absolute;
    top: .85rem;
    inset-inline-end: .9rem;
    left: auto;
    bottom: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lg-panel);
    color: var(--kpi-accent, var(--lg-muted));
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    box-shadow: none;
    pointer-events: none;
    transition: none;
}
.kpi-card:hover .kpi-icon { transform: none; opacity: 1; }
.kpi-card .kpi-label .bi-info-circle,
.kpi-tab--customers .kpi-card .kpi-label .bi-info-circle,
.kpi-tab--products .kpi-card .kpi-label .bi-info-circle,
.kpi-tab--tickets .kpi-card .kpi-label .bi-info-circle {
    color: var(--lg-faint);
    background: transparent;
    width: 15px;
    height: 15px;
    font-size: 12px;
}
.kpi-card .kpi-label .bi-info-circle:hover { background: var(--lg-divider); transform: none; }

/* KPI accents — map old variant names to flat hues for the icon chip */
.kpi-card--primary, .kpi-card--info, .kpi-card--sky, .kpi-card--ocean, .kpi-card--indigo { --kpi-accent: var(--lg-info-fg); }
.kpi-card--success, .kpi-card--emerald, .kpi-card--mint, .kpi-card--teal { --kpi-accent: var(--lg-success-fg); }
.kpi-card--warning, .kpi-card--amber, .kpi-card--gold, .kpi-card--coral { --kpi-accent: var(--lg-warning-fg); }
.kpi-card--danger, .kpi-card--crimson, .kpi-card--rose { --kpi-accent: var(--lg-danger-fg); }
.kpi-card--purple, .kpi-card--violet { --kpi-accent: var(--lg-violet-fg); }
.kpi-card--slate { --kpi-accent: var(--lg-slate-fg); }

/* Section wrap + titles */
.kpi-section-wrap {
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--lg-shadow-card);
}
.kpi-section-wrap > .kpi-section-title {
    font: 700 13.5px var(--lg-font);
    color: var(--lg-ink);
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.kpi-section-wrap > .kpi-section-title::before,
.kpi-tab--customers .kpi-section-wrap > .kpi-section-title::before,
.kpi-tab--orders .kpi-section-wrap > .kpi-section-title::before,
.kpi-tab--products .kpi-section-wrap > .kpi-section-title::before,
.kpi-tab--tickets .kpi-section-wrap > .kpi-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background: var(--lg-primary);
    border-radius: 2px;
}

/* Dashboard panels */
.dashboard-panel {
    border: 1px solid var(--lg-border) !important;
    border-radius: var(--lg-radius-lg) !important;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--lg-shadow-card);
    transition: box-shadow .18s ease;
}
.dashboard-panel:hover { box-shadow: 0 4px 14px rgba(15, 17, 21, .07); }
.dashboard-panel > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--lg-border);
    padding: .8rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.dashboard-panel > .card-header::before,
.kpi-tab--customers .dashboard-panel > .card-header::before,
.kpi-tab--orders .dashboard-panel > .card-header::before,
.kpi-tab--products .dashboard-panel > .card-header::before,
.kpi-tab--tickets .dashboard-panel > .card-header::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--lg-primary);
}
.dashboard-panel > .card-header > .card-title {
    font: 700 13.5px var(--lg-font);
    color: var(--lg-ink);
    margin: 0;
}
.dashboard-panel > .card-body { padding: 1rem 1.1rem; }
.dashboard-panel .table { margin-bottom: 0; }
.dashboard-panel .table thead th {
    background: var(--lg-panel);
    color: var(--lg-muted);
    font-weight: 650;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--lg-border);
}
.dashboard-panel .table tbody td {
    color: var(--lg-text);
    border-color: var(--lg-divider);
    vertical-align: middle;
}
.dashboard-panel .table tbody tr:hover { background: var(--lg-panel); }
.dashboard-panel--success > .card-header::before { background: var(--lg-success-deep); }
.dashboard-panel--warning > .card-header::before { background: #F59E0B; }
.dashboard-panel--danger  > .card-header::before { background: var(--lg-primary); }
.dashboard-panel--info    > .card-header::before { background: var(--lg-info-fg); }
.dashboard-panel--purple  > .card-header::before { background: var(--lg-violet-fg); }

/* ----------------------------------------------------------------------------
   18. AUTH PAGES (login / register / forgot / reset)
   ------------------------------------------------------------------------- */
body.lg-auth-page {
    margin: 0;
    min-height: 100vh;
    background: var(--lg-ground);
    font-family: var(--lg-font);
    display: flex;
    flex-direction: column;
}
.lg-auth-shell {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(380px, 44%) 1fr;
    min-height: 100vh;
    background: #fff;
}
.lg-auth-brand {
    background: var(--lg-rail-bg);
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.lg-auth-brand::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 17, 45, .22), transparent 70%);
    pointer-events: none;
}
[dir="rtl"] .lg-auth-brand::before { right: auto; left: -120px; }
.lg-auth-brand .lg-auth-logo {
    height: 26px;
    object-fit: contain;
    filter: invert(1) hue-rotate(180deg) saturate(0);
    align-self: flex-start;
    position: relative;
}
.lg-auth-brand .lg-auth-headline {
    font: 700 clamp(26px, 3vw, 38px)/1.2 var(--lg-font);
    color: #fff;
    letter-spacing: -.02em;
    margin-top: clamp(40px, 9vh, 90px);
}
.lg-auth-brand .lg-auth-sub {
    font: 450 14px/1.7 var(--lg-font);
    color: #9AA3B0;
    margin-top: 16px;
    max-width: 380px;
}
.lg-auth-points {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 40px;
}
.lg-auth-point { display: flex; align-items: center; gap: 12px; }
.lg-auth-point .lg-auth-point-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: var(--lg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none;
}
.lg-auth-point span:last-child { font: 500 13px var(--lg-font); color: #D0D5DD; }

.lg-auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFBFC;
    padding: 48px 24px;
    overflow-y: auto;
}
.lg-auth-form { width: 100%; max-width: 400px; }
.lg-auth-form--wide { max-width: 560px; }
.lg-auth-title {
    font: 700 24px var(--lg-font);
    color: var(--lg-ink);
    letter-spacing: -.02em;
}
.lg-auth-hint { font: 450 13px var(--lg-font); color: var(--lg-muted); margin-top: 6px; }
.lg-auth-fields { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }

.lg-auth-page .form-label { margin-bottom: .35rem !important; }
.lg-auth-page .form-control, .lg-auth-page .form-select { padding: .62rem .8rem; font-size: 13.5px; }

.lg-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font: 650 13.5px var(--lg-font);
    color: #fff !important;
    background: var(--lg-primary);
    border: 0;
    border-radius: 9px;
    padding: 12px 0;
    cursor: pointer;
    box-shadow: var(--lg-shadow-primary);
    transition: background 150ms ease;
}
.lg-auth-submit:hover, .lg-auth-submit:focus { background: var(--lg-primary-hover); color: #fff; }
.lg-auth-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font: 650 13px var(--lg-font);
    color: var(--lg-ink) !important;
    border: 1px solid var(--lg-border-strong);
    border-radius: 9px;
    padding: 11px 0;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease;
}
.lg-auth-alt:hover { border-color: var(--lg-ink); color: var(--lg-ink); }
.lg-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}
.lg-auth-divider::before, .lg-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lg-border);
}
.lg-auth-divider span {
    font: 500 11px var(--lg-font);
    color: var(--lg-faint);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.lg-auth-foot {
    font: 450 11.5px var(--lg-font);
    color: var(--lg-faint);
    margin-top: 22px;
    text-align: center;
}
.lg-auth-foot a, .lg-auth-link {
    color: var(--lg-primary) !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.lg-auth-foot a:hover, .lg-auth-link:hover { color: var(--lg-primary-hover) !important; text-decoration: underline; }

/* Language pill (top corner) */
.lg-auth-lang {
    position: absolute;
    top: 24px;
    inset-inline-end: 28px;
    display: inline-flex;
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    z-index: 20;
}
.lg-auth-lang a {
    padding: 6px 14px;
    font: 600 11.5px var(--lg-font);
    color: var(--lg-muted);
    text-decoration: none;
    background: #fff;
}
.lg-auth-lang a.active {
    background: var(--lg-ink);
    color: #fff;
    font-weight: 650;
}
.lg-auth-lang a:not(.active):hover { color: var(--lg-ink); }

/* Register stepper */
.lg-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 18px;
}
.lg-steps .lg-step .lg-step-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--lg-border);
}
.lg-steps .lg-step.done .lg-step-bar,
.lg-steps .lg-step.active .lg-step-bar { background: var(--lg-primary); }
.lg-steps .lg-step .lg-step-label {
    font: 600 11.5px var(--lg-font);
    color: var(--lg-faint);
    margin-top: 7px;
}
.lg-steps .lg-step.active .lg-step-label { color: var(--lg-ink); font-weight: 650; }

/* password strength meter (design) */
.lg-meter { display: flex; gap: 4px; margin-top: 7px; }
.lg-meter span { flex: 1; height: 3px; border-radius: 2px; background: var(--lg-border); }
.lg-meter span.on { background: var(--lg-success-fg); }
.lg-meter-hint { font: 450 10.5px var(--lg-font); margin-top: 4px; color: var(--lg-faint); }

/* Turnstile container spacing */
.lg-auth-fields .cf-turnstile { margin-top: 2px; }

/* Auth responsive */
@media (max-width: 991.98px) {
    .lg-auth-shell { grid-template-columns: 1fr; }
    .lg-auth-brand {
        min-height: 0;
        padding: 28px 28px 30px;
    }
    .lg-auth-brand .lg-auth-headline { margin-top: 22px; font-size: 24px; }
    .lg-auth-points { display: none; }
    .lg-auth-panel { padding: 36px 20px 48px; align-items: flex-start; }
    .lg-auth-lang { top: 16px; inset-inline-end: 16px; }
    .lg-auth-form { margin-top: 30px; }
}
[dir="rtl"] .lg-auth-submit .bi-arrow-right { transform: scaleX(-1); }

/* hideShowPassword plugin inside redesigned inputs */
.hideShowPassword-wrapper { width: 100% !important; }
.hideShowPassword-toggle {
    background: transparent;
    border: 0;
    color: var(--lg-faint);
}

/* ----------------------------------------------------------------------------
   19. TICKETS — thread / composer (detail page)
   ------------------------------------------------------------------------- */
.lg-thread { display: flex; flex-direction: column; gap: 12px; }
.lg-msg {
    display: flex;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: 12px;
    padding: 13px 15px;
}
.lg-msg .lg-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lg-warning-bg);
    color: var(--lg-warning-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 11px var(--lg-font);
    flex: none;
    text-transform: uppercase;
}
.lg-msg--own .lg-msg-avatar { background: var(--lg-danger-bg); color: var(--lg-danger-deep); }
.lg-msg .lg-msg-body { min-width: 0; flex: 1; }
.lg-msg .lg-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-msg .lg-msg-who { font: 700 12.5px var(--lg-font); color: var(--lg-ink); }
.lg-msg .lg-msg-role {
    font: 500 10.5px var(--lg-font);
    color: var(--lg-muted);
    background: var(--lg-divider);
    border-radius: 8px;
    padding: 1.5px 7px;
}
.lg-msg .lg-msg-time { margin-inline-start: auto; font: 450 10.5px var(--lg-font); color: var(--lg-faint); }
.lg-msg .lg-msg-text { font: 450 12.5px/1.6 var(--lg-font); color: var(--lg-text); margin-top: 6px; overflow-wrap: anywhere; }

.lg-composer {
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    overflow: hidden;
    background: #fff;
}
.lg-composer:focus-within { border-color: var(--lg-primary); box-shadow: 0 0 0 4px var(--lg-primary-ring); }
.lg-composer textarea, .lg-composer input[type="text"] {
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    padding: 11px 14px;
    font: 450 12.5px/1.5 var(--lg-font);
    color: var(--lg-ink);
    background: transparent;
    min-height: 40px;
}
.lg-composer .lg-composer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--lg-divider);
    background: var(--lg-panel);
}

/* ----------------------------------------------------------------------------
   20. MISC / LEGACY BRIDGES
   ------------------------------------------------------------------------- */
/* wizard circles on old register (bridge) */
.wizard .step-circle { background-color: var(--lg-border); color: var(--lg-muted); }
.wizard .step-circle.active { background-color: var(--lg-primary); color: #fff; }
.wizard-step .step-circle.active + .step-label { color: var(--lg-ink); font-weight: 650; }

/* payment result icons */
.font-40 { color: var(--lg-success-deep); }
.pay-failed { color: var(--lg-primary); }
.circle-with-tick { background-color: var(--lg-success-deep); }
.circle-with-x { background-color: var(--lg-primary); }

/* old dark-header dropdown vestiges neutralized */
.app-shell-header .dropdown-toggle::after { opacity: .6; }

/* breadcrumb (if used anywhere) */
.breadcrumb { font-size: 12px; }
.breadcrumb .breadcrumb-item a { color: var(--lg-faint); text-decoration: none; }
.breadcrumb .breadcrumb-item.active { color: var(--lg-ink); font-weight: 600; }

/* image gallery hover ring */
.img-gallery:hover, .imgSingle:hover { outline-color: var(--lg-primary); }

/* Highcharts font bridge */
.highcharts-container, .highcharts-root { font-family: var(--lg-font) !important; }

/* DMS bridge — recolor its primary-tinted glows to brand */
.dms-modern-page .btn-primary {
    box-shadow: 0 8px 18px rgba(232, 17, 45, .18);
}

/* ----------------------------------------------------------------------------
   21. RESPONSIVE / MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .lg-topbar-search { display: none; }
    .lg-topbar-title { max-width: 34vw; }
}
@media (max-width: 767.98px) {
    .app-shell-header .container-fluid { padding-inline: .75rem; }
    .lg-topbar-title { font-size: 14px; max-width: 38vw; }
    .app-header-user-toggle .d-none { display: none !important; }
    .language-selector-nav { margin-inline-end: 6px; }
    .notification-bell { margin-inline-end: 8px; }
    .notification-bell .dropdown-menu { width: min(330px, 92vw); }
    .card > .card-header { padding: .75rem .9rem; }
    .card > .card-body { padding: .9rem .9rem; }
    .dataTables_paginate { flex-wrap: wrap; justify-content: center; }
    .modal-dialog { margin: .75rem; }
    /* forms stack comfortably */
    #frmSearch .row > [class*="col-"] { margin-bottom: .25rem; }
}

/* Ensure tables never break the page width on mobile */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.card .table-responsive { margin: 0; }

@media (max-width: 767.98px) {
    /* Secondary columns drop out so the essentials fit without sideways scrolling */
    .lg-hide-sm { display: none !important; }
    /* Long values wrap/ellipsis instead of forcing the table wider */
    .table td, .table th { white-space: normal; }
    .table td { max-width: 190px; overflow-wrap: anywhere; }
    .table thead th { white-space: nowrap; }
}

/* ----------------------------------------------------------------------------
   22. UPLOADS (Dropzone + file inputs)
   ------------------------------------------------------------------------- */
.dropzone, .dropzone.dz-clickable {
    border: 1.5px dashed var(--lg-border-strong);
    border-radius: var(--lg-radius-lg);
    background: var(--lg-panel);
    min-height: 120px;
    transition: border-color 150ms ease, background 150ms ease;
}
.dropzone:hover, .dropzone.dz-drag-hover {
    border-color: var(--lg-primary);
    background: var(--lg-primary-soft);
}
.dropzone .dz-message {
    font: 500 13px var(--lg-font);
    color: var(--lg-muted);
}
.dropzone .dz-preview .dz-image { border-radius: 8px; }
.form-control[type="file"] { padding: .42rem .6rem; }
.form-control[type="file"]::file-selector-button {
    background: var(--lg-divider);
    border: 0;
    border-radius: 6px;
    color: var(--lg-text);
    font: 600 12px var(--lg-font);
    padding: .3rem .7rem;
    margin-inline-end: .7rem;
}

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