/* ==========================================================================
   LUX MATKA — PREMIUM ADMIN THEME
   --------------------------------------------------------------------------
   File    : public/assets/admin/css/lux-premium.css
   Loaded  : LAST in masterMatkaAdmin/css_header.blade.php
   Brand   : #680E25
   Scope   : everything under body.admin-panel-page  (login/2FA handled at end)
   --------------------------------------------------------------------------
   RULES THIS FILE FOLLOWS
   1. Additive only. No old stylesheet is deleted or edited.
      Rollback = remove the one <link> line from css_header.blade.php.
   2. No PHP / JS / markup logic is touched.
   3. Selectors are scoped with `body.admin-panel-page` so they outrank
      inline <style> blocks inside page content (chat, declare_result).
   4. `!important` is used only where the legacy CSS or an inline style
      already uses it and we must win.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* brand */
    --lp-brand:        #680E25;
    --lp-brand-400:    #9C1538;
    --lp-brand-500:    #7D1230;
    --lp-brand-600:    #570C1F;
    --lp-brand-700:    #3F0815;
    --lp-brand-800:    #2B050F;
    --lp-brand-900:    #1A0309;

    /* tints */
    --lp-tint-50:      #FCF2F5;
    --lp-tint-100:     #F8E1E7;
    --lp-tint-200:     #F4CDD7;
    --lp-tint-300:     #EBA5B7;
    --lp-tint-400:     #DF738E;

    /* neutrals */
    --lp-app-bg:       #F5F6FA;
    --lp-surface:      #FFFFFF;
    --lp-surface-2:    #FAFAFC;
    --lp-surface-3:    #F3F4F8;
    --lp-border:       rgba(104, 14, 37, 0.09);
    --lp-border-2:     rgba(104, 14, 37, 0.16);
    --lp-text:         #1F2937;
    --lp-text-2:       #6B7280;
    --lp-text-3:       #9CA3AF;

    /* semantic */
    --lp-success:      #0F7B4F;
    --lp-success-bg:   #E8F6EF;
    --lp-danger:       #C0263C;
    --lp-danger-bg:    #FDECEF;
    --lp-warning:      #B7791F;
    --lp-warning-bg:   #FDF6E3;
    --lp-info:         #1D4ED8;
    --lp-info-bg:      #EAF0FE;

    /* shape */
    --lp-r-sm:         8px;
    --lp-r:            10px;
    --lp-r-lg:         14px;
    --lp-r-xl:         18px;
    --lp-r-pill:       999px;

    /* elevation */
    --lp-sh-1: 0 1px 2px rgba(16, 24, 40, 0.04);
    --lp-sh-2: 0 4px 16px rgba(104, 14, 37, 0.07);
    --lp-sh-3: 0 14px 38px rgba(104, 14, 37, 0.14);
    --lp-ring: 0 0 0 4px rgba(104, 14, 37, 0.12);

    /* layout */
    --lp-sidebar-w:    280px;
    --lp-font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* keep legacy --lux-* variables pointing at the refined palette, so any
       leftover lux-theme.css rule stays visually consistent */
    --lux-50:  #FCF2F5;
    --lux-100: #F8E1E7;
    --lux-200: #F4CDD7;
    --lux-300: #EBA5B7;
    --lux-400: #DF738E;
    --lux-500: #680E25;
    --lux-600: #570C1F;
    --lux-700: #3F0815;
    --lux-800: #2B050F;
    --lux-900: #1A0309;
}

/* ==========================================================================
   2. BASE — page background, typography, scrollbars
   ========================================================================== */
body.admin-panel-page {
    background: var(--lp-app-bg) !important;
    color: var(--lp-text) !important;
    font-family: var(--lp-font) !important;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.admin-panel-page *,
body.admin-panel-page *::before,
body.admin-panel-page *::after {
    box-sizing: border-box;
}

body.admin-panel-page h1,
body.admin-panel-page h2,
body.admin-panel-page h3,
body.admin-panel-page h4,
body.admin-panel-page h5,
body.admin-panel-page h6 {
    color: var(--lp-text);
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.admin-panel-page .container-fluid {
    width: 100%;
    max-width: 1640px;
}

body.admin-panel-page ::-webkit-scrollbar { width: 9px; height: 9px; }
body.admin-panel-page ::-webkit-scrollbar-track { background: transparent; }
body.admin-panel-page ::-webkit-scrollbar-thumb {
    background: var(--lp-tint-200);
    border-radius: var(--lp-r-pill);
}
body.admin-panel-page ::-webkit-scrollbar-thumb:hover { background: var(--lp-tint-300); }

/* keyboard focus ring, everywhere, without touching mouse users */
body.admin-panel-page a:focus-visible,
body.admin-panel-page button:focus-visible,
body.admin-panel-page input:focus-visible,
body.admin-panel-page select:focus-visible,
body.admin-panel-page textarea:focus-visible,
body.admin-panel-page [tabindex]:focus-visible {
    outline: 2px solid var(--lp-brand);
    outline-offset: 2px;
}

/* ==========================================================================
   3. SIDEBAR — dark maroon premium
   ========================================================================== */
body.admin-panel-page #sidebar {
    width: var(--lp-sidebar-w) !important;
    background: linear-gradient(180deg, var(--lp-brand-800) 0%, var(--lp-brand-700) 38%, var(--lp-brand) 100%) !important;
    box-shadow: 4px 0 28px rgba(43, 5, 15, 0.28) !important;
    border-right: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}
body.admin-panel-page #sidebar::-webkit-scrollbar { width: 6px; }
body.admin-panel-page #sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: var(--lp-r-pill);
}

/* brand block */
body.admin-panel-page #sidebar .sidebar-header {
    width: auto !important;
    margin: 0 !important;
    padding: 26px 22px 22px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-align: center;
    position: relative;
}
body.admin-panel-page #sidebar .sidebar-header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lp-tint-300), #ffffff);
    opacity: 0.85;
}
body.admin-panel-page #sidebar .sidebar-header h3,
body.admin-panel-page #sidebar .lux-logo-text {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 21px !important;
    letter-spacing: 4px !important;
    margin: 0 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}
/* Brand logo. One transparent PNG serves every surface: the supplied art was a
   flat colour on an opaque light background, so the background was knocked out
   to alpha and the ink pinned to a single flat colour. On light cards it is used
   as-is; on the dark sidebar `.lux-logo-img--on-dark` flattens it to pure white
   (brightness(0) makes every pixel black, invert(1) flips it to white, and the
   alpha channel is untouched so the knocked-out edges stay clean). */
.lux-logo-img {
    display: block;
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
}
.lux-logo-img--on-dark {
    filter: brightness(0) invert(1);
}

body.admin-panel-page #sidebar .sidebar-header h3 img {
    max-width: 190px !important;
}

/* mobile dismiss button.
   `z-index` is REQUIRED here, not cosmetic: `.sidebar-header` is given
   `position: relative` below (for its ::after underline), which makes it paint
   ABOVE `#dismiss` — both are positioned siblings with `z-index: auto`, so the
   later one in DOM order wins. Without this the close button sits underneath
   the header block and is unclickable, which is what broke closing on mobile. */
body.admin-panel-page #dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 15px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: var(--lp-r-sm) !important;
    backdrop-filter: blur(6px);
}
body.admin-panel-page #dismiss:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    color: #fff !important;
}

/* Mobile drawer scrim. The legacy .overlay is a plain black veil; tint it to the
   brand instead. It stays `display:none` until `.active` is applied, which is
   what assets/admin/js/lux-premium.js now mirrors from the drawer state. */
body.admin-panel-page .overlay {
    background: rgba(43, 5, 15, 0.55) !important;
}

/* nav list */
body.admin-panel-page #sidebar ul.list-unstyled.components {
    margin-top: 14px !important;
    padding: 0 14px 26px !important;
    width: 100%;
}
body.admin-panel-page #sidebar ul li {
    margin-bottom: 2px;
}

body.admin-panel-page #sidebar ul li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px !important;
    border-radius: var(--lp-r) !important;
    border-bottom: none !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.76) !important;
    background: transparent !important;
    position: relative;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease !important;
}
body.admin-panel-page #sidebar ul li a span {
    color: inherit !important;
    transition: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.admin-panel-page #sidebar ul li a i {
    width: 20px !important;
    margin-right: 0 !important;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62) !important;
    transition: color 0.22s ease, transform 0.22s ease !important;
}

body.admin-panel-page #sidebar ul li a:hover,
body.admin-panel-page #sidebar ul li a:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
    transform: translateX(2px);
}
body.admin-panel-page #sidebar ul li a:hover i,
body.admin-panel-page #sidebar ul li a:focus i {
    color: #FFFFFF !important;
    transform: scale(1.08);
}

/* active / expanded top-level item */
body.admin-panel-page #sidebar ul li a.active,
body.admin-panel-page #sidebar ul li.active > a,
body.admin-panel-page #sidebar a[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    transform: none !important;
}
body.admin-panel-page #sidebar ul li a.active span,
body.admin-panel-page #sidebar ul li.active > a span,
body.admin-panel-page #sidebar a[aria-expanded="true"] span {
    color: #FFFFFF !important;
}
body.admin-panel-page #sidebar ul li a.active i,
body.admin-panel-page #sidebar ul li.active > a i,
body.admin-panel-page #sidebar a[aria-expanded="true"] i {
    color: #FFFFFF !important;
}
/* left accent bar on the active row */
body.admin-panel-page #sidebar ul li a.active::before,
body.admin-panel-page #sidebar a[aria-expanded="true"]::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: #FFFFFF;
}

/* submenu */
body.admin-panel-page #sidebar ul.in_bg {
    background: rgba(0, 0, 0, 0.20) !important;
    border-radius: var(--lp-r) !important;
    margin: 4px 0 8px !important;
    padding: 6px 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.admin-panel-page #sidebar .in_bg a {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: var(--lp-r-sm) !important;
    color: rgba(255, 255, 255, 0.68) !important;
}
body.admin-panel-page #sidebar .in_bg li a span {
    color: inherit !important;
    font-weight: 400 !important;
}
body.admin-panel-page #sidebar .in_bg a:hover,
body.admin-panel-page #sidebar .in_bg a:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page #sidebar .in_bg a.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

/* count badges inside the sidebar */
body.admin-panel-page #sidebar .count,
body.admin-panel-page #sidebar .dropdown-pending .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px !important;
    margin-left: auto !important;
    border-radius: var(--lp-r-pill) !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0;
}
body.admin-panel-page #sidebar .count.text-success { background: rgba(52, 211, 153, 0.26) !important; color: #D7FBEB !important; }
body.admin-panel-page #sidebar .count.text-danger  { background: rgba(248, 113, 113, 0.26) !important; color: #FFE1E1 !important; }
body.admin-panel-page #sidebar .count.text-warning { background: rgba(251, 191, 36, 0.26) !important; color: #FFF3D6 !important; }
body.admin-panel-page #sidebar .count.text-primary { background: rgba(147, 197, 253, 0.26) !important; color: #E2EFFF !important; }

/* collapse caret */
body.admin-panel-page #sidebar .dropdown-toggle::after {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    border-top: 0.32em solid rgba(255, 255, 255, 0.7) !important;
    border-right: 0.32em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.32em solid transparent !important;
    transition: transform 0.24s ease;
}
body.admin-panel-page #sidebar .dropdown-toggle:hover::after,
body.admin-panel-page #sidebar .dropdown-toggle:focus::after {
    border-top-color: #FFFFFF !important;
}
body.admin-panel-page #sidebar a[aria-expanded="true"].dropdown-toggle::after {
    transform: rotate(180deg) !important;
    border-top-color: #FFFFFF !important;
}

/* chat unread pill in the sidebar */
body.admin-panel-page #sidebar-chat-unread-count {
    background: #25D366 !important;
    color: #FFFFFF !important;
    border-radius: var(--lp-r-pill) !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.42);
}

/* --------------------------------------------------------------------------
   Content offset — must mirror the legacy collapse contract exactly.
   The only thing the legacy JS toggles (public/assets/admin/js/custom.js) is
   the `.active` class:
     >1200px : #sidebar.active -> left:-100% (CLOSED), #content.active -> margin-left:0
     <=1200px: #sidebar.active -> left:0     (OPEN)  , #content        -> always 0
   The base margin needs `!important` to outrank style.css `#content`, so the
   `.active` states are re-declared with `!important` as well — without them the
   base rule wins and the content never slides back (dead 280px gutter).
   -------------------------------------------------------------------------- */
body.admin-panel-page #content {
    margin-left: var(--lp-sidebar-w) !important;
    width: calc(100% - var(--lp-sidebar-w));
    min-width: 0;
    min-height: 100vh;
    padding: 22px 22px 28px !important;
    transition: margin-left 0.3s ease;
}
body.admin-panel-page #content.active {
    margin-left: 0 !important;
    width: 100%;
}

/* Off-canvas contract at the LEGACY breakpoint. style.css switches at
   max-width:1200px (not 992px), so the content must stop being indented there
   or the 992–1200px band keeps a 280px gutter with the sidebar already gone. */
@media (max-width: 1200px) {
    body.admin-panel-page #content,
    body.admin-panel-page #content.active {
        margin-left: 0 !important;
        width: 100%;
    }
    body.admin-panel-page #dismiss { display: block; }

    /* #dismiss becomes visible here and sits in the top-right corner of the
       sidebar. The logo is centred, so it has to be narrow enough that its right
       edge clears the button — at the desktop size the two overlap. */
    body.admin-panel-page #sidebar .sidebar-header h3 img { max-width: 158px !important; }
}

/* ==========================================================================
   4. HEADER / NAVBAR
   ========================================================================== */
body.admin-panel-page #content > .navbar {
    background: var(--lp-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--lp-border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
    box-shadow: var(--lp-sh-1) !important;
    position: sticky;
    top: 0;
    z-index: 900;
}
body.admin-panel-page #content > .navbar .container-fluid {
    width: 100%;
    max-width: none;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    display: flex;
    align-items: center;
}

/* sidebar toggle */
body.admin-panel-page button#sidebarCollapse {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--lp-brand) !important;
    background: var(--lp-tint-50) !important;
    border: 1px solid var(--lp-tint-200) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
body.admin-panel-page button#sidebarCollapse:hover {
    background: var(--lp-brand) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

body.admin-panel-page #content .navbar-nav { align-items: center; }

body.admin-panel-page .navbar-light .navbar-nav .nav-link {
    color: var(--lp-text-2) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    padding: 9px 14px !important;
    border-radius: var(--lp-r) !important;
    transition: background 0.22s ease, color 0.22s ease;
}
body.admin-panel-page .navbar-light .navbar-nav .nav-link:hover {
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand) !important;
}

/* the bell: legacy inline style forces color:#fff on a light bar — override it */
body.admin-panel-page .admin-chat-bell {
    color: var(--lp-brand) !important;
    background: var(--lp-tint-50) !important;
    border: 1px solid var(--lp-tint-200) !important;
    border-radius: var(--lp-r) !important;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin-right: 10px !important;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
body.admin-panel-page .admin-chat-bell:hover {
    background: var(--lp-brand) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
body.admin-panel-page #header-chat-unread-count {
    background: #25D366 !important;
    color: #FFFFFF !important;
    border: 2px solid var(--lp-surface);
    border-radius: var(--lp-r-pill) !important;
    font-weight: 500 !important;
    top: -4px !important;
    right: -4px !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.42);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
body.admin-panel-page .btn {
    border-radius: var(--lp-r) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    padding: 9px 18px;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}
body.admin-panel-page .btn:active { transform: translateY(1px); }
body.admin-panel-page .btn:disabled,
body.admin-panel-page .btn.disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none !important; }

/* primary */
body.admin-panel-page .btn.btn-theme,
body.admin-panel-page .btn-theme,
body.admin-panel-page .submit-btn,
body.admin-panel-page button.btn-theme,
body.admin-panel-page a.btn-theme {
    background: var(--lp-brand) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid var(--lp-brand) !important;
    box-shadow: 0 4px 14px rgba(104, 14, 37, 0.22) !important;
    height: auto !important;
    line-height: 1.5 !important;
    max-width: none !important;
}
body.admin-panel-page .btn.btn-theme:hover,
body.admin-panel-page .btn-theme:hover,
body.admin-panel-page .submit-btn:hover,
body.admin-panel-page button.btn-theme:hover,
body.admin-panel-page a.btn-theme:hover,
body.admin-panel-page .btn.btn-theme:focus,
body.admin-panel-page .submit-btn:focus {
    background: var(--lp-brand-500) !important;
    color: #FFFFFF !important;
    border-color: var(--lp-brand-500) !important;
    box-shadow: 0 8px 22px rgba(104, 14, 37, 0.30) !important;
    transform: translateY(-1px);
}

/* logout */
body.admin-panel-page .logout_btn {
    background: var(--lp-brand) !important;
    border: 1px solid var(--lp-brand) !important;
    color: #FFFFFF !important;
    border-radius: var(--lp-r) !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 14px rgba(104, 14, 37, 0.22) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.admin-panel-page .logout_btn:hover,
body.admin-panel-page .logout_btn:focus {
    background: var(--lp-brand-500) !important;
    border-color: var(--lp-brand-500) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(104, 14, 37, 0.30) !important;
}
body.admin-panel-page .logout_btn i { color: #FFFFFF !important; }

/* secondary / light / outline */
body.admin-panel-page .btn-secondary,
body.admin-panel-page .btn-light {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border-2) !important;
    color: var(--lp-text) !important;
    box-shadow: var(--lp-sh-1) !important;
}
body.admin-panel-page .btn-secondary:hover,
body.admin-panel-page .btn-light:hover {
    background: var(--lp-tint-50) !important;
    border-color: var(--lp-tint-300) !important;
    color: var(--lp-brand) !important;
}

/* semantic */
body.admin-panel-page .btn-danger {
    background: var(--lp-danger) !important;
    border-color: var(--lp-danger) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(192, 38, 60, 0.24) !important;
}
body.admin-panel-page .btn-danger:hover {
    background: #A81F33 !important;
    border-color: #A81F33 !important;
    transform: translateY(-1px);
}
body.admin-panel-page .btn-success {
    background: var(--lp-success) !important;
    border-color: var(--lp-success) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page .btn-warning {
    background: var(--lp-warning) !important;
    border-color: var(--lp-warning) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page .btn-primary {
    background: var(--lp-brand) !important;
    border-color: var(--lp-brand) !important;
    color: #FFFFFF !important;
}

/* tiny / icon buttons used inside table rows */
body.admin-panel-page .btn-xs,
body.admin-panel-page .btn.btn-xs {
    padding: 5px 11px !important;
    font-size: 12px !important;
    border-radius: var(--lp-r-sm) !important;
    height: auto !important;
    line-height: 1.4 !important;
}
body.admin-panel-page .btn_admin_theme {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lp-r-sm) !important;
}

/* inline loading spinner next to buttons */
body.admin-panel-page .loading i,
body.admin-panel-page .fa-spinner { color: inherit; }
body.admin-panel-page .loading { margin-left: 8px; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
body.admin-panel-page .form-group { margin-bottom: 16px; }

body.admin-panel-page label,
body.admin-panel-page .col-form-label,
body.admin-panel-page .form-group label {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--lp-text-2) !important;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
body.admin-panel-page .label-title .col-form-label { display: block; }
body.admin-panel-page .form-group.label-title label { margin-right: 22px; }

body.admin-panel-page .form-control,
body.admin-panel-page .search-input-text,
body.admin-panel-page .custom-select {
    background: var(--lp-surface-2) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r) !important;
    color: var(--lp-text) !important;
    font-size: 13.5px !important;
    font-family: var(--lp-font) !important;
    padding: 9px 13px !important;
    height: auto !important;
    min-height: 40px;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.admin-panel-page .form-control::placeholder { color: var(--lp-text-3) !important; }
body.admin-panel-page .form-control:hover { border-color: var(--lp-tint-300) !important; }
body.admin-panel-page .form-control:focus,
body.admin-panel-page .search-input-text:focus,
body.admin-panel-page .custom-select:focus {
    background: var(--lp-surface) !important;
    border-color: var(--lp-brand) !important;
    box-shadow: var(--lp-ring) !important;
    outline: none !important;
}
body.admin-panel-page .form-control:disabled,
body.admin-panel-page .form-control[readonly] {
    background: var(--lp-surface-3) !important;
    color: var(--lp-text-2) !important;
    cursor: not-allowed;
}
body.admin-panel-page select.form-control,
body.admin-panel-page select.custom-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23680E25' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    padding-right: 34px !important;
}
body.admin-panel-page textarea.form-control { min-height: 96px; resize: vertical; }
body.admin-panel-page .form-text { font-size: 12px; color: var(--lp-text-3); }

/* browser autofill — legacy style.css paints a dark box */
body.admin-panel-page input:-webkit-autofill,
body.admin-panel-page input:-webkit-autofill:hover,
body.admin-panel-page input:-webkit-autofill:focus,
body.admin-panel-page textarea:-webkit-autofill,
body.admin-panel-page select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--lp-tint-50) inset !important;
    -webkit-text-fill-color: var(--lp-text) !important;
    caret-color: var(--lp-text);
}

/* file input */
body.admin-panel-page input[type="file"].form-control {
    padding: 7px 10px !important;
    line-height: 1.5;
}
body.admin-panel-page input[type="file"]::file-selector-button {
    background: var(--lp-tint-100);
    color: var(--lp-brand);
    border: none;
    border-radius: var(--lp-r-sm);
    padding: 6px 12px;
    margin-right: 10px;
    font-family: var(--lp-font);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

/* radio + checkbox */
body.admin-panel-page .radio-group input[type=checkbox],
body.admin-panel-page .radio-group input[type=radio] {
    accent-color: var(--lp-brand);
    margin-right: 7px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
}
body.admin-panel-page .radio-group label { margin-right: 15px; cursor: pointer; }
body.admin-panel-page input[type=checkbox],
body.admin-panel-page input[type=radio] { accent-color: var(--lp-brand); }

/* validation */
body.admin-panel-page .is-invalid,
body.admin-panel-page .form-control.error {
    border-color: var(--lp-danger) !important;
}
body.admin-panel-page .invalid-feedback,
body.admin-panel-page .error { color: var(--lp-danger) !important; font-size: 12px; }
body.admin-panel-page .text-danger { color: var(--lp-danger) !important; }
body.admin-panel-page .text-success { color: var(--lp-success) !important; }
body.admin-panel-page .text-warning { color: var(--lp-warning) !important; }
body.admin-panel-page .text-secondary { color: var(--lp-text-2) !important; }
body.admin-panel-page .text-muted { color: var(--lp-text-3) !important; }

/* select2 */
body.admin-panel-page .select2-container { width: 100% !important; }
body.admin-panel-page .select2-container--default .select2-selection--single,
body.admin-panel-page .select2-container--default .select2-selection--multiple {
    background: var(--lp-surface-2) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r) !important;
    min-height: 40px;
    padding: 4px 8px;
}
body.admin-panel-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--lp-text) !important;
    font-size: 13.5px;
    line-height: 30px;
    padding-left: 4px;
}
body.admin-panel-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
body.admin-panel-page .select2-container--default.select2-container--focus .select2-selection--single,
body.admin-panel-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--lp-brand) !important;
    box-shadow: var(--lp-ring) !important;
    background: var(--lp-surface) !important;
}
body.admin-panel-page .select2-dropdown {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: var(--lp-sh-3) !important;
    overflow: hidden;
    color: var(--lp-text) !important;
}
body.admin-panel-page .select2-dropdown .select2-results__option {
    padding: 9px 13px !important;
    font-size: 13.5px;
    color: var(--lp-text) !important;
}
body.admin-panel-page .select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--lp-tint-100) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .select2-container--default .select2-search--dropdown input.select2-search__field {
    background: var(--lp-surface-2) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r-sm) !important;
    color: var(--lp-text) !important;
    padding: 7px 11px !important;
}
body.admin-panel-page .select2-container--default .selection .select2-selection--multiple .select2-selection__choice {
    background: var(--lp-tint-100) !important;
    border: 1px solid var(--lp-tint-200) !important;
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-brand) !important;
    font-size: 12.5px;
    padding: 2px 8px;
}

/* datepicker (bootstrap-datepicker / gijgo) */
body.admin-panel-page .datepicker,
body.admin-panel-page .datetimepicker {
    border-radius: var(--lp-r-lg) !important;
    border: 1px solid var(--lp-border-2) !important;
    box-shadow: var(--lp-sh-3) !important;
    padding: 10px !important;
    background: var(--lp-surface) !important;
}
body.admin-panel-page .datepicker table tr td.active,
body.admin-panel-page .datepicker table tr td.active:hover,
body.admin-panel-page .datepicker table tr td span.active,
body.admin-panel-page .datetimepicker table tr td.active {
    background: var(--lp-brand) !important;
    background-image: none !important;
    border-radius: var(--lp-r-sm) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page .datepicker table tr td.today,
body.admin-panel-page .datetimepicker table tr td.today {
    background: var(--lp-tint-100) !important;
    border-radius: var(--lp-r-sm) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .datepicker table tr td.day:hover,
body.admin-panel-page .datetimepicker table tr td.day:hover {
    background: var(--lp-tint-50) !important;
    border-radius: var(--lp-r-sm) !important;
}
body.admin-panel-page .datepicker table tr th:hover { background: var(--lp-tint-50) !important; }

/* ==========================================================================
   7. CARDS, PANELS & DASHBOARD
   ========================================================================== */
body.admin-panel-page .card,
body.admin-panel-page .table_bg,
body.admin-panel-page .table-bg,
body.admin-panel-page .ibox,
body.admin-panel-page .bs_box,
body.admin-panel-page .bid_box,
body.admin-panel-page .payment_flex {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: var(--lp-sh-1) !important;
}

body.admin-panel-page .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--lp-border) !important;
    padding: 16px 20px !important;
    border-radius: var(--lp-r-lg) var(--lp-r-lg) 0 0 !important;
}
body.admin-panel-page .card-header h5,
body.admin-panel-page .card-header h6 {
    color: var(--lp-brand-600) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    margin: 0 !important;
}
body.admin-panel-page .card-body { padding: 20px !important; }

body.admin-panel-page .card,
body.admin-panel-page .ibox,
body.admin-panel-page .table_bg,
body.admin-panel-page .table-bg {
    min-width: 0;
}

body.admin-panel-page .ibox-title {
    background: transparent !important;
    border-bottom: 1px solid var(--lp-border) !important;
    padding: 14px 20px !important;
}
body.admin-panel-page .ibox-title h4,
body.admin-panel-page .ibox-title h5,
body.admin-panel-page .ibox-title h6 {
    color: var(--lp-brand-600) !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

body.admin-panel-page .model-form-title {
    border-bottom: 1px solid var(--lp-border) !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
}
body.admin-panel-page .model-form-title h6 { color: var(--lp-brand-600) !important; font-weight: 500 !important; }

body.admin-panel-page .main_head {
    background: transparent !important;
    border-bottom: 1px solid var(--lp-border) !important;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* section headings above the dashboard rows */
body.admin-panel-page .dash_row { margin-top: 6px; margin-bottom: 26px; }
body.admin-panel-page .dash_row > h2 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--lp-text-2) !important;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin: 0 0 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.admin-panel-page .dash_row > h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--lp-tint-200), transparent);
}

/* ==========================================================================
   DASHBOARD STAT CARDS (.dash_box)

   THE TRAP: the legacy sheet styles the INNER <i>, not the tile. style.css has
   `.dash_info .fa-users { font-size:37px; padding:0 15px 0 0;
   border-right:1px solid #c7c3c3; color:#355E3B !important }` and three
   siblings for .dash_success / .dash_danger / .dash_dark. Those declarations
   live on the <i> element, so styling the .d_icon <span> can never reach them.
   Measured result before this fix: a 37px glyph overflowing a 48px tile, pushed
   off-centre by 15px of right padding, with a stray 1px divider line, drawn in
   the OLD palette (green glyph on a blue tile, grey glyph on a maroon tile) and
   keeping that colour even when the tile filled with brand ink on hover.
   Hence step 1: the <i> is reset to inherit everything from its tile.
   ========================================================================== */

/* 1. the tile owns the icon; the <i> is reduced to a bare glyph */
body.admin-panel-page .dash_box .d_icon i,
body.admin-panel-page .dash_box .d_icon .fa,
body.admin-panel-page .dash_box .d_icon .fas,
body.admin-panel-page .dash_box .d_icon .far,
body.admin-panel-page .dash_box .d_icon .fab,
body.admin-panel-page .dash_box .d_icon [class*="fa-"] {
    font-size: inherit !important;
    line-height: 1 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}

/* 2. the card itself: quiet, flat, and it does NOT move under the cursor */
body.admin-panel-page .dash_box {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    height: calc(100% - 18px);
    padding: 16px 18px !important;
    margin-bottom: 18px !important;
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: var(--lp-sh-1) !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    /* colour-only transition: nothing here changes geometry */
    transition: box-shadow 0.24s ease, border-color 0.24s ease !important;
}
/* the legacy layer lifts the card 3-4px on hover (lux-theme.css:132 and the
   old rule here). The user asked for it to hold still, so the transform is
   pinned in every state — including the animation-filled one. */
body.admin-panel-page .dash_box,
body.admin-panel-page .dash_box:hover,
body.admin-panel-page .dash_box:focus,
body.admin-panel-page .dash_box:focus-visible {
    transform: none !important;
}
body.admin-panel-page .dash_box::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--lp-tint-300);
}
/* soft corner glow revealed on hover — adds depth without moving anything */
body.admin-panel-page .dash_box::after {
    content: '';
    position: absolute;
    top: -46px;
    right: -46px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-tint-100) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}
body.admin-panel-page .dash_box:hover {
    border-color: var(--lp-tint-300) !important;
    box-shadow: var(--lp-sh-3) !important;
}
body.admin-panel-page .dash_box:hover::after { opacity: 1; }
body.admin-panel-page .dash_box:focus-visible {
    outline: 2px solid var(--lp-brand) !important;
    outline-offset: 2px;
}

/* 3. icon tile. `.dash_left` becomes a flex box so the inline-flex tile no
      longer picks up line-box descender space, and its legacy 20px right
      margin is dropped — that plus the card gap plus .dash_right's 10px left
      padding was producing a measured 43px hole between icon and number. */
body.admin-panel-page .dash_left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 0 !important;
}
body.admin-panel-page .d_icon,
body.admin-panel-page .dash_left .d_icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: var(--lp-r) !important;
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color 0.24s ease, color 0.24s ease !important;
}

/* 4. tile tint per variant — the card class OR the icon's own text-* class */
body.admin-panel-page .d_icon.text-success,
body.admin-panel-page .dash_box.dash_success .d_icon {
    background: var(--lp-success-bg) !important;
    color: var(--lp-success) !important;
}
body.admin-panel-page .d_icon.text-danger,
body.admin-panel-page .dash_box.dash_danger .d_icon {
    background: var(--lp-danger-bg) !important;
    color: var(--lp-danger) !important;
}
body.admin-panel-page .d_icon.text-warning,
body.admin-panel-page .dash_box.dash_warning .d_icon {
    background: var(--lp-warning-bg) !important;
    color: var(--lp-warning) !important;
}
body.admin-panel-page .d_icon.text-primary,
body.admin-panel-page .dash_box.dash_info .d_icon {
    background: var(--lp-info-bg) !important;
    color: var(--lp-info) !important;
}
body.admin-panel-page .d_icon.text-dark,
body.admin-panel-page .dash_box.dash_dark .d_icon {
    background: var(--lp-tint-100) !important;
    color: var(--lp-brand) !important;
}

/* 5. hover must beat every variant tint above, so it is declared last with one
      extra class of specificity. Note there is NO scale() any more: the old
      `transform: scale(1.05)` was half of the "hover p hil rha h" complaint.
      The glyph now actually follows the tile, because step 1 made it inherit. */
body.admin-panel-page .dash_box:hover .d_icon,
body.admin-panel-page .dash_box:hover .d_icon.text-success,
body.admin-panel-page .dash_box:hover .d_icon.text-danger,
body.admin-panel-page .dash_box:hover .d_icon.text-warning,
body.admin-panel-page .dash_box:hover .d_icon.text-primary,
body.admin-panel-page .dash_box:hover .d_icon.text-dark,
body.admin-panel-page .dash_box:hover .d_icon.text-secondary,
body.admin-panel-page .dash_box:hover.dash_success .d_icon,
body.admin-panel-page .dash_box:hover.dash_danger .d_icon,
body.admin-panel-page .dash_box:hover.dash_warning .d_icon,
body.admin-panel-page .dash_box:hover.dash_info .d_icon,
body.admin-panel-page .dash_box:hover.dash_dark .d_icon {
    background: var(--lp-brand) !important;
    color: #FFFFFF !important;
    transform: none !important;
}
/* 6. text block. The number is the anchor and the label sits directly under it
      with a deliberate 4px gap, so each card reads as one unit ("6 / ACTIVE")
      instead of the number and label drifting apart. */
body.admin-panel-page .dash_right {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 0 !important;
}
body.admin-panel-page .dash_right h3 {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--lp-text) !important;
    margin: 0 0 4px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.admin-panel-page .dash_right p {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--lp-text-2) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The Balance Activity row colours its NUMBER with bootstrap text-* classes.
   `body.admin-panel-page .dash_right h3` and `body.admin-panel-page .text-success`
   have identical specificity, so the h3 rule above was silently winning and
   every amount rendered grey. Re-declared afterwards on purpose, with a class
   of extra specificity. */
body.admin-panel-page .dash_right h3.text-success   { color: var(--lp-success) !important; }
body.admin-panel-page .dash_right h3.text-danger    { color: var(--lp-danger) !important; }
body.admin-panel-page .dash_right h3.text-warning   { color: var(--lp-warning) !important; }
body.admin-panel-page .dash_right h3.text-primary   { color: var(--lp-info) !important; }
body.admin-panel-page .dash_right h3.text-secondary { color: var(--lp-text-2) !important; }
body.admin-panel-page .dash_right h3.text-dark      { color: var(--lp-text) !important; }

/* 7. variant accent strip. The colour belongs to the CARD, so it is the same at
      rest and under the cursor. It used to flip to brand maroon on hover for
      .dash_info only (via a generic `.dash_box:hover::before`), which made the
      four cards behave inconsistently. */
body.admin-panel-page .dash_box.dash_success::before { background: var(--lp-success); }
body.admin-panel-page .dash_box.dash_danger::before  { background: var(--lp-danger); }
body.admin-panel-page .dash_box.dash_dark::before    { background: var(--lp-brand-600); }
body.admin-panel-page .dash_box.dash_info::before    { background: var(--lp-info); }
body.admin-panel-page .dash_box.dash_warning::before { background: var(--lp-warning); }

/* legacy green link underline inside dash tables */
body.admin-panel-page .dash_table a {
    border-bottom: 1px dashed var(--lp-tint-300) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .dash_table tbody tr { border: 1px solid var(--lp-border) !important; }

/* payment / settings panels */
body.admin-panel-page .payment_flex { padding: 18px 20px !important; margin-bottom: 18px; }
body.admin-panel-page .payment_flex h5,
body.admin-panel-page .payment_flex h6 { color: var(--lp-brand-600) !important; font-weight: 500 !important; }
body.admin-panel-page .payment_flex h5 span { color: var(--lp-text-2) !important; }

/* small info tiles used on result pages */
body.admin-panel-page .bid_box,
body.admin-panel-page .bid_box.bs_box { padding: 12px 14px !important; }
body.admin-panel-page .bid_box_info .submit-btn { margin-top: 8px; }

/* ==========================================================================
   8. TABLES & DATATABLES
   ========================================================================== */
body.admin-panel-page .table-responsive {
    border-radius: var(--lp-r-lg);
    background: var(--lp-surface);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

body.admin-panel-page .table,
body.admin-panel-page table.dataTable,
body.admin-panel-page .report_table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--lp-surface) !important;
    color: var(--lp-text) !important;
    table-layout: auto;
}

body.admin-panel-page .table-responsive > .table,
body.admin-panel-page .table-responsive > table,
body.admin-panel-page .table-responsive .dataTables_wrapper table,
body.admin-panel-page .table-responsive .report_table {
    min-width: 920px;
}

body.admin-panel-page .table-responsive.table-bg .dataTables_wrapper table,
body.admin-panel-page .table-responsive.table-bg table.dataTable,
body.admin-panel-page .table_bg .report_table {
    min-width: 1040px;
}

body.admin-panel-page .table thead th,
body.admin-panel-page .table-striped thead th,
body.admin-panel-page table.dataTable thead th,
body.admin-panel-page #data-grid_wrapper table.dataTable thead th,
body.admin-panel-page #data-grid_wrapper table.dataTable tfoot th,
body.admin-panel-page .table-bordered thead th {
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand-600) !important;
    border: none !important;
    border-bottom: 1px solid var(--lp-tint-200) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 13px 14px !important;
    white-space: nowrap;
    vertical-align: middle;
}

body.admin-panel-page .table tbody td,
body.admin-panel-page table.dataTable tbody td,
body.admin-panel-page .report_table tbody td {
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--lp-border) !important;
    color: var(--lp-text) !important;
    font-size: 13.5px;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: normal;
}

body.admin-panel-page .table tbody td:last-child,
body.admin-panel-page table.dataTable tbody td:last-child,
body.admin-panel-page .report_table tbody td:last-child {
    white-space: nowrap;
}

body.admin-panel-page .table tbody td .btn,
body.admin-panel-page table.dataTable tbody td .btn,
body.admin-panel-page .report_table tbody td .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    white-space: nowrap;
    margin: 2px !important;
}
body.admin-panel-page .table-bordered,
body.admin-panel-page .table-bordered td,
body.admin-panel-page .table-bordered th {
    border-color: var(--lp-border) !important;
}

body.admin-panel-page .table-striped tbody tr:nth-of-type(odd) { background: var(--lp-surface-2) !important; }
body.admin-panel-page .table-striped tbody tr:nth-of-type(odd) td { background: transparent !important; }
body.admin-panel-page .table-hover tbody tr { transition: background 0.16s ease; }
body.admin-panel-page .table-hover tbody tr:hover,
body.admin-panel-page table.dataTable tbody tr:hover {
    background: var(--lp-tint-50) !important;
}
body.admin-panel-page table.dataTable tbody tr.selected,
body.admin-panel-page table.dataTable tbody tr.selected td {
    background: var(--lp-tint-100) !important;
    color: var(--lp-brand-600) !important;
}
body.admin-panel-page .table tbody tr:last-child td { border-bottom: none !important; }

/* the filter row (second thead with inputs) */
body.admin-panel-page .table thead .search-input-text {
    min-height: 34px;
    padding: 6px 11px !important;
    font-size: 12.5px !important;
    background: var(--lp-surface) !important;
}
body.admin-panel-page .table thead th:has(.search-input-text) {
    background: var(--lp-surface) !important;
    padding: 8px 10px !important;
    text-transform: none;
}

/* DataTables chrome */
body.admin-panel-page .dataTables_wrapper { padding: 0; }
body.admin-panel-page .dataTables_wrapper::after {
    content: '';
    display: block;
    clear: both;
}
body.admin-panel-page .dataTables_wrapper .dataTables_length,
body.admin-panel-page .dataTables_wrapper .dataTables_filter,
body.admin-panel-page .dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: var(--lp-text-2);
    padding: 12px 2px;
}
body.admin-panel-page .dataTables_wrapper .dataTables_length {
    float: left;
    max-width: 50%;
}
body.admin-panel-page .dataTables_wrapper .dataTables_filter {
    float: right;
    max-width: 50%;
    text-align: right;
}
body.admin-panel-page .dataTables_wrapper .dataTables_filter input,
body.admin-panel-page .dataTables_wrapper .dataTables_length select {
    background: var(--lp-surface-2) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r-sm) !important;
    color: var(--lp-text) !important;
    padding: 6px 11px !important;
    min-height: 34px;
    margin-left: 8px;
    font-size: 13px;
}
body.admin-panel-page .dataTables_wrapper .dataTables_filter input:focus,
body.admin-panel-page .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--lp-brand) !important;
    box-shadow: var(--lp-ring) !important;
    outline: none !important;
}
body.admin-panel-page .dataTables_wrapper .dataTables_paginate { padding: 12px 2px; }
body.admin-panel-page .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--lp-r-sm) !important;
    color: var(--lp-text-2) !important;
    font-size: 13px !important;
    padding: 6px 11px !important;
    margin: 0 2px !important;
    transition: background 0.18s ease, color 0.18s ease;
}
body.admin-panel-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--lp-tint-50) !important;
    border-color: var(--lp-tint-200) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.admin-panel-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--lp-brand) !important;
    border-color: var(--lp-brand) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(104, 14, 37, 0.22) !important;
}
body.admin-panel-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.admin-panel-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: var(--lp-text-3) !important;
    opacity: 0.6;
    cursor: not-allowed;
}
body.admin-panel-page .dataTables_wrapper .dataTables_processing {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: var(--lp-sh-2) !important;
    color: var(--lp-text-2) !important;
    font-size: 13px;
    padding: 14px 0 !important;
}
body.admin-panel-page table.dataTable thead .sorting:after,
body.admin-panel-page table.dataTable thead .sorting_asc:after,
body.admin-panel-page table.dataTable thead .sorting_desc:after { opacity: 0.45; }
body.admin-panel-page .data-grid-error,
body.admin-panel-page .data-grid-errors { color: var(--lp-danger) !important; }

/* export toolbar above tables */
body.admin-panel-page .export_div { margin-bottom: 14px; }
body.admin-panel-page .table_bg.card,
body.admin-panel-page .table-bg {
    padding: 20px !important;
    overflow: hidden;
}

body.admin-panel-page .table_bg.card > .table-responsive,
body.admin-panel-page .table-bg > .dataTables_wrapper,
body.admin-panel-page .table-bg > table {
    overflow-x: auto;
}

body.admin-panel-page .main_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

body.admin-panel-page .main_head .btn,
body.admin-panel-page .main_head button,
body.admin-panel-page .main_head a.btn {
    flex: 0 0 auto;
}

body.admin-panel-page .export_div label {
    color: var(--lp-text-2) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    margin-bottom: 5px;
}
body.admin-panel-page .export_div .form-group { margin-bottom: 10px; }
body.admin-panel-page .export_div .row {
    row-gap: 12px;
}
body.admin-panel-page .export_div .d-flex {
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}
body.admin-panel-page .export_div .btn,
body.admin-panel-page .date_form .btn,
body.admin-panel-page .export_flex .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ==========================================================================
   9. MODALS
   ========================================================================== */
body.admin-panel-page .modal-backdrop.show { opacity: 0.44; }
body.admin-panel-page .modal-content,
body.admin-panel-page .modal-bg {
    background: var(--lp-surface) !important;
    border: none !important;
    border-radius: var(--lp-r-xl) !important;
    box-shadow: 0 28px 70px rgba(43, 5, 15, 0.30) !important;
    overflow: hidden;
    max-height: calc(100vh - 48px);
}
body.admin-panel-page .modal-header {
    background: var(--lp-tint-50) !important;
    border-bottom: 1px solid var(--lp-border) !important;
    padding: 18px 24px !important;
    border-radius: 0 !important;
}
body.admin-panel-page .modal-title {
    color: var(--lp-brand-600) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}
body.admin-panel-page .modal-header .close {
    color: var(--lp-text-2) !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
    font-size: 26px !important;
    line-height: 1 !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    border-radius: var(--lp-r-sm);
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
body.admin-panel-page .modal-header .close:hover {
    background: var(--lp-tint-100) !important;
    color: var(--lp-brand) !important;
    opacity: 1 !important;
}
body.admin-panel-page .modal-dialog {
    max-width: min(94vw, 620px);
}
body.admin-panel-page .modal-dialog.modal-lg {
    max-width: min(94vw, 860px);
}
body.admin-panel-page .modal-dialog.modal-xl {
    max-width: min(96vw, 1180px);
}
body.admin-panel-page .modal-body {
    padding: 24px !important;
    overflow-y: auto;
}
body.admin-panel-page .modal-footer {
    background: var(--lp-surface-2);
    border-top: 1px solid var(--lp-border) !important;
    padding: 16px 24px !important;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ==========================================================================
   10. ALERTS, BADGES, LABELS
   ========================================================================== */
body.admin-panel-page .alert {
    border: 1px solid transparent !important;
    border-radius: var(--lp-r) !important;
    font-size: 13.5px;
    padding: 13px 16px !important;
}
body.admin-panel-page .alert-danger {
    background: var(--lp-danger-bg) !important;
    border-color: rgba(192, 38, 60, 0.22) !important;
    color: #8E1B2C !important;
}
body.admin-panel-page .alert-success {
    background: var(--lp-success-bg) !important;
    border-color: rgba(15, 123, 79, 0.22) !important;
    color: #0A5A3A !important;
}
body.admin-panel-page .alert-warning {
    background: var(--lp-warning-bg) !important;
    border-color: rgba(183, 121, 31, 0.24) !important;
    color: #8A5A15 !important;
}
body.admin-panel-page .alert-info {
    background: var(--lp-info-bg) !important;
    border-color: rgba(29, 78, 216, 0.20) !important;
    color: #1B3FA8 !important;
}

body.admin-panel-page .badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: var(--lp-r-pill) !important;
    letter-spacing: 0.02em;
}
body.admin-panel-page .badge-success { background: var(--lp-success-bg) !important; color: var(--lp-success) !important; }
body.admin-panel-page .badge-danger  { background: var(--lp-danger-bg) !important;  color: var(--lp-danger) !important; }
body.admin-panel-page .badge-warning { background: var(--lp-warning-bg) !important; color: var(--lp-warning) !important; }
body.admin-panel-page .badge-info    { background: var(--lp-info-bg) !important;    color: var(--lp-info) !important; }
body.admin-panel-page .badge-primary,
body.admin-panel-page .badge-secondary {
    background: var(--lp-tint-100) !important;
    color: var(--lp-brand) !important;
}

body.admin-panel-page .bg-light { background: var(--lp-surface-2) !important; }

/* ==========================================================================
   11. TABS, PAGINATION, DROPDOWNS
   ========================================================================== */
body.admin-panel-page .nav-tabs {
    border-bottom: 1px solid var(--lp-border) !important;
    gap: 4px;
}
body.admin-panel-page .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--lp-text-2) !important;
    font-size: 13.5px;
    font-weight: 500;
    padding: 11px 16px !important;
    background: transparent !important;
}
body.admin-panel-page .nav-tabs .nav-link:hover {
    color: var(--lp-brand) !important;
    border-bottom-color: var(--lp-tint-300) !important;
}
body.admin-panel-page .nav-tabs .nav-link.active {
    color: var(--lp-brand) !important;
    border-bottom-color: var(--lp-brand) !important;
    background: transparent !important;
}
body.admin-panel-page .nav-pills .nav-link {
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-text-2) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px !important;
}
body.admin-panel-page .nav-pills .nav-link.active {
    background: var(--lp-brand) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(104, 14, 37, 0.22);
}

body.admin-panel-page .pagination .page-link {
    border: 1px solid var(--lp-border-2) !important;
    color: var(--lp-text-2) !important;
    border-radius: var(--lp-r-sm) !important;
    margin: 0 3px;
    font-size: 13px;
    padding: 7px 12px;
}
body.admin-panel-page .pagination .page-link:hover {
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .pagination .page-item.active .page-link {
    background: var(--lp-brand) !important;
    border-color: var(--lp-brand) !important;
    color: #FFFFFF !important;
}

body.admin-panel-page .dropdown-menu {
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: var(--lp-sh-3) !important;
    padding: 6px !important;
    font-size: 13.5px;
}
body.admin-panel-page .dropdown-item {
    border-radius: var(--lp-r-sm) !important;
    padding: 9px 13px !important;
    color: var(--lp-text) !important;
}
body.admin-panel-page .dropdown-item:hover,
body.admin-panel-page .dropdown-item:focus {
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand) !important;
}

/* ==========================================================================
   12. PAGE TITLE / BREADCRUMB
   ========================================================================== */
body.admin-panel-page .page_title {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
}
body.admin-panel-page .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12.5px;
}
body.admin-panel-page .breadcrumb-item { color: var(--lp-text-3) !important; }
body.admin-panel-page .breadcrumb-item a {
    color: var(--lp-brand) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
body.admin-panel-page .breadcrumb-item a:hover { text-decoration: underline !important; }
body.admin-panel-page .breadcrumb-item.active { color: var(--lp-text-2) !important; }
body.admin-panel-page .breadcrumb-item + .breadcrumb-item::before {
    color: var(--lp-tint-300) !important;
    content: '/';
}

body.admin-panel-page .table-bg > h3,
body.admin-panel-page .table_bg > h3 {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--lp-brand-600) !important;
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--lp-border);
}

/* ==========================================================================
   13. LOADERS & EMPTY STATES
   ========================================================================== */
body.admin-panel-page .tbl_loader_bg,
body.admin-panel-page .loader_bg {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(2px);
}
body.admin-panel-page .loader {
    border-color: var(--lp-tint-200) !important;
    border-top-color: var(--lp-brand) !important;
}
body.admin-panel-page .loader:before,
body.admin-panel-page .loader:after { border-color: transparent !important; }
body.admin-panel-page .loader_load { color: var(--lp-text-2) !important; }

/* ==========================================================================
   14. CHAT SUPPORT  (page has its own inline gold theme — we outrank it)
   ========================================================================== */
body.admin-panel-page .chat-container {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r-xl) !important;
    box-shadow: var(--lp-sh-2) !important;
    margin: 0 0 22px !important;
    overflow: hidden;
}
body.admin-panel-page .chat-users {
    background: linear-gradient(180deg, var(--lp-brand-800) 0%, var(--lp-brand-600) 100%) !important;
    border-right: none !important;
}
body.admin-panel-page .chat-users-header {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 14px 16px !important;
}
body.admin-panel-page .chat-users-search-wrap {
    background: rgba(0, 0, 0, 0.16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.admin-panel-page .chat-users-search-wrap input {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid transparent !important;
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-text) !important;
    font-family: var(--lp-font);
}
body.admin-panel-page .chat-users-search-wrap input:focus {
    border-color: var(--lp-tint-300) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24) !important;
    outline: none !important;
}
body.admin-panel-page .chat-users-search-wrap .search-inner i { color: var(--lp-tint-300) !important; }

body.admin-panel-page .user-item {
    color: rgba(255, 255, 255, 0.80) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 400 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
body.admin-panel-page .user-item:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page .user-item.active,
body.admin-panel-page .user-item.selected {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    box-shadow: inset 3px 0 0 #FFFFFF;
}
body.admin-panel-page .chat-header {
    background: var(--lp-tint-50) !important;
    border-bottom: 1px solid var(--lp-border) !important;
    color: var(--lp-brand-600) !important;
    font-weight: 500 !important;
}
body.admin-panel-page .chat-messages { background: var(--lp-surface-2) !important; }
body.admin-panel-page .chat-box { background: var(--lp-surface-2) !important; }
body.admin-panel-page .chat-footer,
body.admin-panel-page .chat-input {
    background: var(--lp-surface) !important;
    border-top: 1px solid var(--lp-border) !important;
}
body.admin-panel-page .chat-input input,
body.admin-panel-page .chat-input textarea {
    background: var(--lp-surface-2) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-text) !important;
    font-family: var(--lp-font);
}
body.admin-panel-page .chat-input input:focus,
body.admin-panel-page .chat-input textarea:focus {
    border-color: var(--lp-brand) !important;
    box-shadow: var(--lp-ring) !important;
    outline: none !important;
}
body.admin-panel-page .chat-input button,
body.admin-panel-page .chat-footer button {
    background: var(--lp-brand) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--lp-r-pill) !important;
}
body.admin-panel-page .chat-placeholder { color: var(--lp-text-3) !important; }
body.admin-panel-page .msg-time { color: var(--lp-text-3) !important; font-size: 11px; }
body.admin-panel-page .chat-container .message.outgoing .bubble,
body.admin-panel-page .chat-container .message.sent .bubble {
    background: var(--lp-brand) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page .chat-container .message.incoming .bubble,
body.admin-panel-page .chat-container .message.received .bubble {
    background: var(--lp-surface) !important;
    color: var(--lp-text) !important;
    border: 1px solid var(--lp-border) !important;
}

/* ==========================================================================
   15. DECLARE RESULT — winner popups (inline gold theme override)
   ========================================================================== */
body.admin-panel-page .declare-action-group { gap: 8px; align-items: center; }
body.admin-panel-page .declare-action-group .btn { margin: 0 !important; }
body.admin-panel-page .declare-action-group .btn.btn-theme { min-width: 96px; }

body.admin-panel-page #winnerListPopup .modal-content,
body.admin-panel-page #winnerEditPopup .modal-content {
    background: var(--lp-surface) !important;
    color: var(--lp-text) !important;
    border-radius: var(--lp-r-xl) !important;
}
body.admin-panel-page #winnerListPopup .modal-header,
body.admin-panel-page #winnerEditPopup .modal-header {
    background: linear-gradient(135deg, var(--lp-brand-700), var(--lp-brand)) !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
}
body.admin-panel-page #winnerListPopup .modal-title,
body.admin-panel-page #winnerEditPopup .modal-title {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 17px !important;
}
body.admin-panel-page #winnerListPopup .close,
body.admin-panel-page #winnerEditPopup .close {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
}
body.admin-panel-page #winnerListPopup .close:hover,
body.admin-panel-page #winnerEditPopup .close:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page #winnerListPopup .modal-body,
body.admin-panel-page #winnerEditPopup .modal-body {
    background: var(--lp-surface) !important;
    color: var(--lp-text) !important;
}
body.admin-panel-page .winner-summary {
    color: var(--lp-text) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--lp-border);
    padding-bottom: 14px !important;
}
body.admin-panel-page .winner-summary span { color: var(--lp-brand) !important; font-weight: 500 !important; }

body.admin-panel-page .winner-table-wrap {
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r) !important;
    background: var(--lp-surface) !important;
}
body.admin-panel-page .winner-table-wrap .table {
    background: var(--lp-surface) !important;
    color: var(--lp-text) !important;
}
body.admin-panel-page .winner-table-wrap .table thead th {
    background: var(--lp-tint-50) !important;
    color: var(--lp-brand-600) !important;
    border-color: var(--lp-tint-200) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
}
body.admin-panel-page .winner-table-wrap .table tbody td {
    background: var(--lp-surface) !important;
    color: var(--lp-text) !important;
    border-color: var(--lp-border) !important;
}
body.admin-panel-page .winner-table-wrap .table tbody tr:nth-child(even) td {
    background: var(--lp-surface-2) !important;
}
body.admin-panel-page .winner-table-wrap .table tbody a { color: var(--lp-brand) !important; }

/* digit / bracket grids on result pages */
body.admin-panel-page ul.jodi-digit,
body.admin-panel-page ul.single-jodi-data {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: var(--lp-sh-1) !important;
}
body.admin-panel-page ul.jodi-digit li,
body.admin-panel-page .single-jodi-data li {
    color: var(--lp-brand-600) !important;
    background: var(--lp-tint-50) !important;
    border: 1px solid var(--lp-tint-200) !important;
    border-radius: var(--lp-r-sm);
    font-weight: 500 !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body.admin-panel-page ul.jodi-digit li:hover,
body.admin-panel-page .single-jodi-data li:hover {
    background: var(--lp-brand) !important;
    border-color: var(--lp-brand) !important;
    color: #FFFFFF !important;
}
body.admin-panel-page .main-box-info h6 { color: var(--lp-brand-600) !important; }

/* ==========================================================================
   16. LOGIN + TWO-STEP VERIFICATION
   These pages have no `admin-panel-page` class, so they are targeted by the
   unique .login_wrapper / .login_text classes instead. No markup change.
   ========================================================================== */
body:has(.login_wrapper) {
    background: radial-gradient(1100px 620px at 12% -10%, var(--lp-brand-700) 0%, transparent 58%),
                radial-gradient(900px 560px at 100% 110%, var(--lp-brand-600) 0%, transparent 55%),
                var(--lp-brand-900) !important;
    min-height: 100vh;
    font-family: var(--lp-font) !important;
    color: var(--lp-text) !important;
}

.login_wrapper {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 24px;
    z-index: 10;
    margin: 0 auto;
    background: transparent !important;   /* legacy style.css paints #f2f2f2 here */
}

.login_text {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--lp-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--lp-r-xl) !important;
    padding: 40px 34px 34px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
    text-align: center;
    overflow: hidden;
}
.login_text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--lp-brand-600), var(--lp-brand), var(--lp-tint-300));
    border-radius: 0;
}
.login_text .lux-logo-text {
    color: var(--lp-brand) !important;
    font-weight: 500 !important;
    font-size: 27px !important;
    letter-spacing: 5px !important;
    margin: 0 0 18px !important;
}
/* the h2 now wraps the logo image instead of the brand text */
.login_text .lux-logo-img { max-width: 262px; }
.login_text h4 {
    color: var(--lp-text-2) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em;
    margin-bottom: 28px !important;
}
.login_text .form-group { margin-bottom: 16px; text-align: left; }
.login_text .form-control {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px !important;
    background: var(--lp-surface-2) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r) !important;
    color: var(--lp-text) !important;
    font-size: 14.5px !important;
    font-family: var(--lp-font) !important;
    box-shadow: none !important;
}
.login_text .form-control:focus {
    background: var(--lp-surface) !important;
    border-color: var(--lp-brand) !important;
    box-shadow: var(--lp-ring) !important;
    outline: none !important;
}
.login_text .form-control::placeholder { color: var(--lp-text-3) !important; }
.login_text .btn.btn-theme,
.login_text .btn-theme {
    width: 100%;
    max-width: 100% !important;
    min-height: 50px;
    height: auto !important;
    line-height: 1.5 !important;
    background: var(--lp-brand) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--lp-r) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(104, 14, 37, 0.28) !important;
    margin-top: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.login_text .btn.btn-theme:hover,
.login_text .btn-theme:hover {
    background: var(--lp-brand-500) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(104, 14, 37, 0.36) !important;
}
.login_text .loading { margin-left: 8px; }

/* decorative blobs — tone down and re-colour */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 1;
    opacity: 0.22;
    pointer-events: none;
}
.bg-shape-1 { top: -140px; left: -140px; width: 440px; height: 440px; background: var(--lp-brand-400); }
.bg-shape-2 { bottom: -170px; right: -130px; width: 540px; height: 540px; background: var(--lp-brand-500); }

/* ==========================================================================
   16b. PAGE PATTERNS — user details, reports, settings
   ========================================================================== */
body.admin-panel-page .sec_title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--lp-brand-600) !important;
    margin: 0 0 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.admin-panel-page .sec_title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--lp-tint-200), transparent);
}

body.admin-panel-page .ibox-content { padding: 0 !important; color: inherit !important; }

/* user-details info panel */
body.admin-panel-page .per_info {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r-lg) !important;
    padding: 20px !important;
    box-shadow: var(--lp-sh-1) !important;
}
body.admin-panel-page .per_info .payment_flex {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-bottom: 1px solid var(--lp-border) !important;
    border-radius: 0 !important;
    padding: 11px 0 !important;
    margin-bottom: 0 !important;
    gap: 14px;
}
body.admin-panel-page .per_info .payment_flex:last-child { border-bottom: none !important; }

/* label / value typography inside the info rows */
body.admin-panel-page .payment_flex h5 {
    width: auto !important;
    flex: 0 0 auto;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--lp-text-2) !important;
    margin: 0 !important;
    letter-spacing: 0.02em;
}
body.admin-panel-page .payment_flex h5 span { float: none !important; }
body.admin-panel-page .payment_flex h6 {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--lp-text) !important;
    margin: 0 !important;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* nothing inside an info row should look like a link */
body.admin-panel-page .payment_flex h6 a,
body.admin-panel-page .payment_flex h6 span,
body.admin-panel-page .admin-user-mobile-text {
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit !important;
}

body.admin-panel-page .per_info .btn {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: var(--lp-r-sm) !important;
}

/* filter button strip */
body.admin-panel-page .detail-filter-btn {
    margin: 0 0 16px !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.admin-panel-page .detail-filter-btn button {
    background: var(--lp-surface) !important;
    border: 1px solid var(--lp-border-2) !important;
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-text-2) !important;
    font-size: 12.5px !important;
    font-weight: 500;
    padding: 8px 16px !important;
    margin: 0 !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.admin-panel-page .detail-filter-btn button:hover {
    background: var(--lp-tint-50) !important;
    border-color: var(--lp-tint-300) !important;
    color: var(--lp-brand) !important;
}
body.admin-panel-page .detail-filter-btn button.active,
body.admin-panel-page .detail-filter-btn button.btn-theme {
    background: var(--lp-brand) !important;
    border-color: var(--lp-brand) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(104, 14, 37, 0.22);
}

/* scrollable table wrapper — sticky header reads better than a flat 550px box */
body.admin-panel-page .table-responsive.dw-table.table-scroll,
body.admin-panel-page .table-responsive.table-scroll {
    max-height: 560px !important;
    overflow: auto !important;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-r-lg);
    background: var(--lp-surface);
}

body.admin-panel-page .table-responsive.dw-table.table-scroll table,
body.admin-panel-page .table-responsive.table-scroll table {
    min-width: 960px;
}
body.admin-panel-page .table-scroll thead th,
body.admin-panel-page .table-scroll .dataTables_scrollHead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* legacy style.css forces a 35px gap above every responsive table */
body.admin-panel-page #content .table-responsive { margin-top: 0 !important; }
body.admin-panel-page #content .card > .table-responsive,
body.admin-panel-page #content .table_bg > .table-responsive { margin-top: 0 !important; }
body.admin-panel-page #content > .container-fluid > .table-responsive,
body.admin-panel-page .table-responsive + .table-responsive { margin-top: 18px !important; }

/* tab strips used on detail pages */
body.admin-panel-page .tabs_common {
    justify-content: flex-start !important;
    margin-top: 0 !important;
    gap: 4px;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (min-width: 1600px) {
    body.admin-panel-page #content {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    body.admin-panel-page .container-fluid {
        max-width: 1660px;
    }
}

@media (min-width: 1201px) and (max-width: 1439.98px) {
    body.admin-panel-page #content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.admin-panel-page .container-fluid {
        max-width: 100%;
    }

    body.admin-panel-page .dash_box {
        padding: 14px 14px !important;
        gap: 11px;
    }

    body.admin-panel-page .d_icon,
    body.admin-panel-page .dash_left .d_icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    body.admin-panel-page .dash_right h3 {
        font-size: 22px !important;
    }

    body.admin-panel-page .dash_right p {
        font-size: 10px !important;
        letter-spacing: 0.06em;
    }

    body.admin-panel-page .table thead th,
    body.admin-panel-page .table-striped thead th,
    body.admin-panel-page table.dataTable thead th,
    body.admin-panel-page #data-grid_wrapper table.dataTable thead th,
    body.admin-panel-page #data-grid_wrapper table.dataTable tfoot th,
    body.admin-panel-page .table-bordered thead th,
    body.admin-panel-page .table tbody td,
    body.admin-panel-page table.dataTable tbody td,
    body.admin-panel-page .report_table tbody td {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}

@media (max-width: 1199.98px) {
    /* NB: the `.dash_left .d_icon` half of these selectors is mandatory — the
       base rule declares that form (0,3,1) and a bare `.d_icon` override
       (0,2,1) silently loses to it. Same trap as `li.mobile-logo img`. */
    body.admin-panel-page .dash_box { gap: 12px; min-height: 78px; }
    body.admin-panel-page .d_icon,
    body.admin-panel-page .dash_left .d_icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 16px !important;
    }
    body.admin-panel-page .dash_right h3 { font-size: 23px !important; }

    body.admin-panel-page .container-fluid {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    body.admin-panel-page #content {
        padding: 18px 14px 24px !important;
    }

    body.admin-panel-page .table_bg.card,
    body.admin-panel-page .table-bg {
        padding: 16px !important;
    }

    body.admin-panel-page .export_div [class*="col-"] {
        min-width: 0;
    }

    body.admin-panel-page .dataTables_wrapper .dataTables_length,
    body.admin-panel-page .dataTables_wrapper .dataTables_filter {
        float: none;
        max-width: 100%;
        text-align: left;
    }

    body.admin-panel-page .dataTables_wrapper .dataTables_filter input {
        max-width: min(100%, 260px);
    }
}

@media (max-width: 991.98px) {
    body.admin-panel-page #content { margin-left: 0 !important; padding: 16px 12px !important; }
    body.admin-panel-page #content > .navbar { margin: 0 0 16px !important; }
    body.admin-panel-page #dismiss { display: block; }
    body.admin-panel-page #sidebar { box-shadow: 8px 0 34px rgba(43, 5, 15, 0.4) !important; }
    body.admin-panel-page .chat-container { flex-direction: column; height: auto !important; }
    body.admin-panel-page .chat-users { width: 100% !important;}
    body.admin-panel-page .table thead th,
    body.admin-panel-page .table tbody td { padding: 10px 11px !important; }

    body.admin-panel-page #content > .navbar .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.admin-panel-page .navbar-collapse {
        min-width: 0;
    }

    body.admin-panel-page #content .navbar-nav {
        min-width: 0;
        gap: 6px;
    }

    body.admin-panel-page .logout_btn {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 767.98px) {
    body.admin-panel-page { font-size: 13.5px; }
    body.admin-panel-page .dash_box { padding: 14px 14px !important; gap: 11px; min-height: 72px; }
    body.admin-panel-page .d_icon,
    body.admin-panel-page .dash_left .d_icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 15px !important;
    }
    body.admin-panel-page .dash_right h3 { font-size: 20px !important; }
    body.admin-panel-page .dash_right p { font-size: 9.5px !important; letter-spacing: 0.06em; }
    body.admin-panel-page .dash_row > h2 { font-size: 12.5px !important; }
    body.admin-panel-page .modal-body { padding: 18px !important; }
    body.admin-panel-page .modal-header { padding: 15px 18px !important; }
    body.admin-panel-page .table-bg > h3 { font-size: 15.5px !important; }
    body.admin-panel-page .dataTables_wrapper .dataTables_filter,
    body.admin-panel-page .dataTables_wrapper .dataTables_length { text-align: left; }
    .login_text { padding: 32px 22px 26px !important; }
    .login_text .lux-logo-text { font-size: 23px !important; letter-spacing: 3px !important; }
}

@media (max-width: 575.98px) {
    body.admin-panel-page #content { padding: 12px 10px !important; }
    body.admin-panel-page #content > .navbar .container-fluid { padding: 10px 12px !important; }
    body.admin-panel-page .navbar-light .navbar-nav .nav-link { font-size: 12.5px !important; padding: 8px 10px !important; }
    body.admin-panel-page .logout_btn { padding: 8px 13px !important; font-size: 12.5px !important; }
}

/* ==========================================================================
   18. ACCESSIBILITY & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.admin-panel-page *,
    body.admin-panel-page *::before,
    body.admin-panel-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body.admin-panel-page #sidebar,
    body.admin-panel-page #content > .navbar,
    body.admin-panel-page .export_div,
    body.admin-panel-page .dataTables_wrapper .dataTables_paginate,
    body.admin-panel-page .dataTables_wrapper .dataTables_length,
    body.admin-panel-page .dataTables_wrapper .dataTables_filter,
    body.admin-panel-page .btn { display: none !important; }

    body.admin-panel-page #content { margin-left: 0 !important; padding: 0 !important; }
    body.admin-panel-page { background: #FFFFFF !important; }
    body.admin-panel-page .card,
    body.admin-panel-page .table_bg,
    body.admin-panel-page .table-bg { box-shadow: none !important; border: 1px solid #DDD !important; }
    body.admin-panel-page .table thead th {
        background: #F5F5F5 !important;
        color: #000000 !important;
    }
}