/* ============================================
   YTS Modern Design System
   A fresh, modern UI independent of Lepton theme
   ============================================ */

/* CSS Variables for theming */
:root {
    /* Primary Colors */
    --yts-primary: #6366f1;
    --yts-primary-hover: #4f46e5;
    --yts-primary-light: rgba(99, 102, 241, 0.1);
    
    /* Secondary Colors */
    --yts-secondary: #8b5cf6;
    --yts-success: #10b981;
    --yts-warning: #f59e0b;
    --yts-danger: #ef4444;
    --yts-info: #06b6d4;
    
    /* Background Colors */
    --yts-bg-primary: #0f172a;
    --yts-bg-secondary: #1e293b;
    --yts-bg-card: rgba(30, 41, 59, 0.8);
    --yts-bg-glass: rgba(255, 255, 255, 0.05);
    
    /* Text Colors */
    --yts-text-primary: #f8fafc;
    --yts-text-secondary: #94a3b8;
    --yts-text-muted: #64748b;
    
    /* Borders & Shadows */
    --yts-border: rgba(255, 255, 255, 0.1);
    --yts-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --yts-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --yts-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
    
    /* Border Radius */
    --yts-radius-sm: 8px;
    --yts-radius-md: 12px;
    --yts-radius-lg: 16px;
    --yts-radius-xl: 24px;
    
    /* Transitions */
    --yts-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Override */
[data-theme="light"], .yts-light {
    --yts-bg-primary: #f1f5f9;
    --yts-bg-secondary: #ffffff;
    --yts-bg-card: rgba(255, 255, 255, 0.9);
    --yts-bg-glass: rgba(255, 255, 255, 0.7);
    --yts-text-primary: #0f172a;
    --yts-text-secondary: #475569;
    --yts-text-muted: #94a3b8;
    --yts-border: rgba(0, 0, 0, 0.1);
}

/* ============================================
   Base Styles
   ============================================ */
html,
body {
    background-color: var(--yts-bg-primary) !important;
    color: var(--yts-text-primary) !important;
}

.yts-page {
    min-height: 100vh;
    background: var(--yts-bg-primary);
    color: var(--yts-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.yts-container {
    /* Use full width with a small horizontal gutter so pages utilize more screen space */
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 0.75rem; /* small horizontal gutters */
    box-sizing: border-box;
}

/* ============================================
   Glass Card Component
   ============================================ */
.yts-card {
    background: var(--yts-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-lg);
    padding: 1rem 0.75rem; /* reduced vertical and horizontal padding */
    margin-bottom: 1rem;
    transition: var(--yts-transition);
    position: relative;
    overflow: hidden;
}

.yts-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.yts-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--yts-shadow);
    border-color: rgba(99, 102, 241, 0.3);
}

/* ============================================
   Page Header Component
   ============================================ */
.yts-page-header {
    background: linear-gradient(135deg, var(--yts-primary) 0%, var(--yts-secondary) 100%);
    border-radius: var(--yts-radius-xl);
    /* Slightly reduced header padding to free horizontal space */
    padding: 1rem 0.75rem; /* less horizontal gutter */
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.yts-page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: rotate(-15deg);
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 0;
}

.yts-page-header .yts-flex-between,
.yts-page-header .yts-header-actions {
    position: relative;
    z-index: 1;
}

.yts-page-header .yts-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.yts-page-header .yts-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin: 0.5rem 0 0;
    font-size: 1rem;
}

.yts-page-header .yts-header-actions {
    display: flex;
    gap: 1rem;
}

/* ============================================
   Stats Cards
   ============================================ */
.yts-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.yts-stat-card {
    background: var(--yts-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-lg);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: var(--yts-transition);
}

.yts-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--stat-color, var(--yts-primary));
    opacity: 0.1;
    transform: translate(30%, -30%);
}

.yts-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--yts-shadow);
}

.yts-stat-card.pending { --stat-color: var(--yts-warning); }
.yts-stat-card.success { --stat-color: var(--yts-success); }
.yts-stat-card.primary { --stat-color: var(--yts-primary); }
.yts-stat-card.info { --stat-color: var(--yts-info); }

.yts-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--yts-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: var(--stat-color, var(--yts-primary));
    color: white;
}

.yts-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--yts-text-primary);
    margin: 0;
    line-height: 1.2;
}

.yts-stat-label {
    font-size: 0.875rem;
    color: var(--yts-text-secondary);
    margin: 0.25rem 0 0;
}

/* ============================================
   Filter Section
   ============================================ */
.yts-filters {
    background: var(--yts-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------
   Global fixes: enforce dark background for DataTables/cards on all pages
   and reduce horizontal spacing so tables use available width better
   ------------------------------------------------------------------ */
.dataTables_wrapper,
.dataTables_wrapper > .card,
.dataTables_wrapper .card,
.dataTables_wrapper .card-body,
.dataTables_scroll,
.dataTables_scrollBody,
.dataTables_scrollHeadInner,
.table-responsive,
.yts-table-container,
.lpx-content-container .card,
.lpx-content .card,
.content-wrapper .card,
.card.table-card,
.card,
.panel,
.panel-body {
    background-color: var(--yts-bg-card) !important;
    background-image: none !important;
    color: var(--yts-text-primary) !important;
    border-color: var(--yts-border) !important;
}

/* Ensure table headers and bodies are readable over dark card */
.dataTables_scrollHeadInner,
table.dataTable thead th,
table.table thead th {
    background-color: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
}

.dataTables_scrollBody table,
table.dataTable,
table.table,
.yts-table-container table {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Remove white backgrounds applied by utility classes */
.bg-white,
.card.bg-white,
.panel.bg-white {
    background-color: transparent !important;
}

/* Reduce horizontal paddings/margins for table cards to utilize space */
.yts-table-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.75rem !important;
    border-radius: var(--yts-radius-md) !important;
}

.dataTables_wrapper,
.dataTables_wrapper .card-body,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody,
.yts-table-container .dataTables_scroll,
.yts-table-container .dataTables_scrollBody {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.card .card-body,
.dataTables_wrapper .card-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Force tables to take full width available */
.dataTables_wrapper table.dataTable,
.yts-table-container table {
    width: 100% !important;
    table-layout: auto !important;
}

/* Allow horizontal scrolling inside table containers.
   Use auto table layout and nowrap to let table expand horizontally and
   scroll inside its container. Applies to all DataTables and YTS tables. */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody,
.yts-table-container,
.yts-table-container .dataTables_scroll,
.yts-table-container .dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper table.dataTable,
.yts-table-container table.yts-table,
.dataTables_wrapper .dataTables_scrollBody table {
    table-layout: auto !important;
    white-space: nowrap !important;
}

/* Prevent cell content from overflowing into adjacent columns */
.dataTables_wrapper table.dataTable td,
.dataTables_wrapper table.dataTable th,
.yts-table-container table td,
.yts-table-container table th {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 250px;
}

/* Actions column must allow overflow for dropdown menus (can be first or last column) */
.dataTables_wrapper table.dataTable td:first-child,
.dataTables_wrapper table.dataTable th:first-child,
.yts-table-container table td:first-child,
.yts-table-container table th:first-child,
.dataTables_wrapper table.dataTable td:last-child,
.dataTables_wrapper table.dataTable th:last-child,
.yts-table-container table td:last-child,
.yts-table-container table th:last-child,
td:has(.yts-actions-dropdown),
th:has(.yts-actions-dropdown) {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none;
}

/* Whatsapp pages: ensure tables inside yts-table-container use auto layout
   and enable horizontal scrolling so full cell content is reachable */
.yts-table-container .dataTables_scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.yts-table-container table.dataTable,
.yts-table-container table {
    table-layout: auto !important;
    white-space: nowrap !important;
}

.yts-table-container .dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.yts-table-container table.dataTable td,
.yts-table-container table.dataTable th,
.yts-table-container table td,
.yts-table-container table th {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 250px;
}

/* Actions column must remain visible for dropdown menus */
.yts-table-container table.dataTable td:first-child,
.yts-table-container table.dataTable th:first-child,
.yts-table-container table td:first-child,
.yts-table-container table th:first-child,
.yts-table-container table.dataTable td:last-child,
.yts-table-container table.dataTable th:last-child,
.yts-table-container table td:last-child,
.yts-table-container table th:last-child,
.yts-table-container td:has(.yts-actions-dropdown),
.yts-table-container th:has(.yts-actions-dropdown) {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none;
    width: 60px;
}


/* Smaller container padding on large screens to gain horizontal space */
@media (min-width: 1200px) {
    .yts-container {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
}

/* ===================================================================
   Extra strong overrides to catch remaining white table/card areas
   Applies only inside common content/table wrappers to avoid global side effects
 =================================================================== */
.lpx-content-container .card,
.lpx-content .card,
.content-wrapper .card,
.content .card,
.container-fluid > .card,
.dataTables_wrapper > .card,
.dataTables_wrapper .card,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.dataTables_scrollHeadInner,
.table-responsive {
    background-color: var(--yts-bg-card) !important;
    background-image: none !important;
    color: var(--yts-text-primary) !important;
    border-color: var(--yts-border) !important;
}

/* Inline-styled white backgrounds inside DataTables wrappers (often from server templates) */
.dataTables_wrapper [style*="background"],
.dataTables_wrapper [style*="background-color"] {
    background-color: var(--yts-bg-card) !important;
    background-image: none !important;
    color: var(--yts-text-primary) !important;
}

/* Reduce horizontal space around table cards to use more width */
.yts-table-container {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

.dataTables_wrapper,
.dataTables_wrapper .card-body,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody,
.yts-table-container .dataTables_scroll,
.yts-table-container .dataTables_scrollBody {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Tighten table cell padding slightly so more columns fit without horizontal scroll */
table.dataTable tbody td,
table.dataTable thead th,
table.table tbody td,
table.table thead th {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

/* Final fallback: if some element still shows pure white bg, make it transparent here
   but limit selector scope to common card/table wrappers to avoid breaking other UI */
.lpx-content-container [style*="background: rgb(255, 255, 255)"],
.lpx-content-container [style*="background: #ffffff"],
.content-wrapper [style*="background: rgb(255, 255, 255)"],
.content-wrapper [style*="#ffffff"],
.dataTables_wrapper [style*="rgb(255, 255, 255)"],
.dataTables_wrapper [style*="#ffffff"] {
    background-color: var(--yts-bg-card) !important;
    background-image: none !important;
}


.yts-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

/* ============================================
   Form Controls
   ============================================ */
.yts-form-group {
    margin-bottom: 0;
}

.yts-form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--yts-text-secondary);
    margin-bottom: 0.5rem;
}

.yts-input,
.yts-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--yts-bg-glass);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-sm);
    color: var(--yts-text-primary);
    font-size: 0.9375rem;
    transition: var(--yts-transition);
}

.yts-input:focus,
.yts-select:focus {
    outline: none;
    border-color: var(--yts-primary);
    box-shadow: 0 0 0 3px var(--yts-primary-light);
}

.yts-input::placeholder {
    color: var(--yts-text-muted);
}

/* ============================================
   Buttons
   ============================================ */
.yts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--yts-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--yts-transition);
    text-decoration: none;
}

.yts-btn-primary {
    background: linear-gradient(135deg, var(--yts-primary) 0%, var(--yts-secondary) 100%);
    color: white;
}

.yts-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--yts-shadow-glow);
    color: white;
}

.yts-btn-success {
    background: linear-gradient(135deg, var(--yts-success) 0%, #059669 100%);
    color: white;
}

.yts-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.3);
    color: white;
}

.yts-btn-outline {
    background: transparent;
    border: 1px solid var(--yts-border);
    color: var(--yts-text-primary);
}

.yts-btn-outline:hover {
    background: var(--yts-bg-glass);
    border-color: var(--yts-primary);
}

.yts-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.yts-btn-paypal {
    background: linear-gradient(135deg, #0070ba 0%, #003087 100%);
    color: white;
    border-radius: 25px;
}

.yts-btn-paypal:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 112, 186, 0.4);
    color: white;
}

/* ============================================
   Table Styles
   ============================================ */
.yts-table-container {
    background: var(--yts-bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-lg);
    overflow: hidden;
}

.yts-table {
    width: 100%;
    border-collapse: collapse;
}

.yts-table thead {
    background: var(--yts-bg-glass);
}

.yts-table th {
    padding: 0.5rem 0.75rem; /* tighter headers */
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--yts-text-secondary);
    border-bottom: 1px solid var(--yts-border);
}

.yts-table td {
    padding: 0.5rem 0.75rem; /* tighter cells to fit more columns */
    border-bottom: 1px solid var(--yts-border);
    color: var(--yts-text-primary);
    font-size: 0.9375rem;
}

.yts-table tbody tr {
    transition: var(--yts-transition);
}

.yts-table tbody tr:hover {
    background: var(--yts-bg-glass);
}

.yts-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================
   Status Badges
   ============================================ */
.yts-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.yts-badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.yts-badge-success,
.yts-badge-paid {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.yts-badge-danger,
.yts-badge-failed {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.yts-badge-cancelled {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.yts-badge-info,
.yts-badge-initiated {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

/* ============================================
   Animations
   ============================================ */
@keyframes yts-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes yts-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes yts-slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.yts-animate-fadeIn {
    animation: yts-fadeIn 0.5s ease-out forwards;
}

.yts-animate-stagger > * {
    opacity: 0;
    animation: yts-fadeIn 0.5s ease-out forwards;
}

.yts-animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.yts-animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.yts-animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.yts-animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }

/* ============================================
   Utility Classes
   ============================================ */
.yts-flex {
    display: flex;
}

.yts-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.yts-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yts-gap-1 { gap: 0.5rem; }
.yts-gap-2 { gap: 1rem; }
.yts-gap-3 { gap: 1.5rem; }

.yts-mb-0 { margin-bottom: 0; }
.yts-mb-1 { margin-bottom: 0.5rem; }
.yts-mb-2 { margin-bottom: 1rem; }
.yts-mb-3 { margin-bottom: 1.5rem; }
.yts-mb-4 { margin-bottom: 2rem; }

.yts-text-center { text-align: center; }
.yts-text-right { text-align: right; }

.yts-text-primary { color: var(--yts-primary) !important; }
.yts-text-success { color: var(--yts-success) !important; }
.yts-text-warning { color: var(--yts-warning) !important; }
.yts-text-danger { color: var(--yts-danger) !important; }
.yts-text-muted { color: var(--yts-text-muted) !important; }

/* ============================================
   DataTables Override for YTS Theme
   ============================================ */
.dataTables_wrapper {
    padding: 1rem;
    color: var(--yts-text-primary);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--yts-text-secondary);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--yts-text-secondary);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--yts-bg-secondary);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-sm);
    color: var(--yts-text-primary);
    padding: 0.5rem 0.75rem;
}

.dataTables_wrapper .dataTables_length select option {
    background: var(--yts-bg-secondary);
    color: var(--yts-text-primary);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--yts-primary);
}

.dataTables_wrapper .dataTables_info {
    color: var(--yts-text-secondary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--yts-bg-glass) !important;
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-sm) !important;
    color: var(--yts-text-primary) !important;
    margin: 0 2px;
    transition: var(--yts-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--yts-primary) !important;
    border-color: var(--yts-primary) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--yts-primary) !important;
    border-color: var(--yts-primary) !important;
    color: white !important;
}

/* DataTables Table Styling */
.yts-table-container table.dataTable,
table.dataTable {
    color: var(--yts-text-primary) !important;
    border-collapse: collapse !important;
}

/* Force dark background for all DataTables and their containers across the app */
html body .dataTables_wrapper,
html body .yts-table-container,
html body .dataTables_scroll,
html body .dataTables_scrollBody,
html body table.dataTable,
html body .lpx-content-container .dataTables_wrapper,
html body .lpx-content-container table.dataTable,
html body .content-wrapper .dataTables_wrapper,
html body .content-wrapper table.dataTable {
    background: transparent !important;
}

/* Ensure the card containing the table uses dark card background */
html body .lpx-content-container .card,
html body .lpx-content .card,
html body .content-wrapper .card,
html body .card.table-card,
.yts-table-container,
.yts-table-container .card-body {
    background: var(--yts-bg-card) !important;
    border-color: var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
}

/* Stronger overrides to prevent any white backgrounds in table cards/pages */
html body .card,
html body .card .card-body,
html body .panel,
html body .panel .panel-body,
html body .dataTables_wrapper,
html body .dataTables_wrapper .card-body,
html body .table-responsive,
html body .table-responsive .table {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Force tables themselves to be dark and text readable */
html body table.table,
html body table.dataTable,
html body .table:not(.table-dark) {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Header / body row colors */
html body table.dataTable thead th,
html body table.table thead th {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
}

html body table.dataTable tbody td,
html body table.table tbody td {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Remove any white backgrounds applied via utility classes */
.card .bg-white,
.bg-white {
    background: transparent !important;
}

/* Final strong overrides to ensure all table cards use dark background like Users page */
/* Apply to LeptonXLite and generic card wrappers */
html body .lpx-content-container .card,
html body .lpx-content .card,
html body .content-wrapper .card,
html body .card,
html body .panel,
html body .panel-default,
.yts-table-container,
.yts-table-container .card,
.yts-table-container .card-body {
    background: var(--yts-bg-card) !important;
    border-color: var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
}

/* Tables and DataTables scroll bodies */
html body .dataTables_wrapper,
html body .dataTables_scroll,
html body .dataTables_scrollBody,
html body table.dataTable,
html body table.table,
html body .table-responsive .table,
.yts-table-container table.yts-table {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Table header and rows */
html body table.dataTable thead th,
html body table.table thead th,
.yts-table-container table thead th {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
}

html body table.dataTable tbody td,
html body table.table tbody td,
.yts-table-container table tbody td {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Remove any inner white panels inside DataTables */
html body .dataTables_wrapper .card,
html body .dataTables_wrapper .card-body,
html body .dataTables_wrapper .panel,
html body .dataTables_wrapper .panel-body {
    background: transparent !important;
}

/* Ensure pagination / controls match dark theme */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--yts-bg-glass) !important;
    color: var(--yts-text-primary) !important;
    border: 1px solid var(--yts-border) !important;
}

/* Strong global override: force dark card/table containers across LeptonXLite pages */
.html-body-tight-gutters .content,
.html-body-tight-gutters .content-wrapper,
.html-body-tight-gutters .lpx-content,
.html-body-tight-gutters .lpx-content-container,
.html-body-tight-gutters .container-fluid,
.html-body-tight-gutters .card,
.html-body-tight-gutters .card-body,
.html-body-tight-gutters .panel,
.html-body-tight-gutters .panel-body,
.html-body-tight-gutters .box,
.html-body-tight-gutters .box-body,
.html-body-tight-gutters .dataTables_wrapper,
.html-body-tight-gutters .dataTables_wrapper > .card,
.html-body-tight-gutters .dataTables_wrapper .card-body,
.html-body-tight-gutters .dataTables_scrollBody,
.html-body-tight-gutters .yts-table-container {
    background-color: var(--yts-bg-card) !important;
    color: var(--yts-text-primary) !important;
    border-color: var(--yts-border) !important;
    padding-left: 0.5rem !important; /* reduce inner gutter */
    padding-right: 0.5rem !important;
}

/* If a white background is set inline or by utility class, override it */
html body [class*="bg-"] {
    background-color: unset !important;
}

/* Make table containers fully dark and remove inner white panels */
html body .dataTables_wrapper .card,
html body .dataTables_wrapper .card-body,
html body .table-responsive,
html body .table-responsive .card,
html body .table-responsive .card-body {
    background-color: transparent !important;
}

/* Ensure table rows and headers use dark scheme */
html body table.dataTable thead th,
html body table.table thead th,
.yts-table-container table thead th {
    background-color: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
}

html body table.dataTable tbody tr,
html body table.table tbody tr,
.yts-table-container table tbody tr {
    background-color: transparent !important;
}

/* Edge case: remove strong white backgrounds possibly applied to wrappers */
html body .card.bg-white,
html body .bg-white,
html body .card.bg-light,
html body .bg-light {
    background-color: transparent !important;
}


/* ===================================================================
   Force dark table/card styling (final override)
   This block ensures DataTables and their parent cards use the YTS dark
   background on all pages (highest priority)
   =================================================================== */
body:not(.yts-ignore-theme) .lpx-content-container .card,
body:not(.yts-ignore-theme) .lpx-content .card,
body:not(.yts-ignore-theme) .content-wrapper .card,
body:not(.yts-ignore-theme) .card,
body:not(.yts-ignore-theme) .panel,
body:not(.yts-ignore-theme) .panel-body,
body:not(.yts-ignore-theme) .box,
body:not(.yts-ignore-theme) .box-body,
body:not(.yts-ignore-theme) .dataTables_wrapper,
body:not(.yts-ignore-theme) .dataTables_wrapper > .card,
body:not(.yts-ignore-theme) .dataTables_wrapper .card-body,
body:not(.yts-ignore-theme) .dataTables_scrollBody,
body:not(.yts-ignore-theme) .table-responsive,
body:not(.yts-ignore-theme) .table-responsive .table,
.yts-table-container,
.yts-table-container .card,
.yts-table-container .card-body {
    background-color: var(--yts-bg-card) !important;
    color: var(--yts-text-primary) !important;
    border-color: var(--yts-border) !important;
}

/* Tables themselves */
body:not(.yts-ignore-theme) table.dataTable,
body:not(.yts-ignore-theme) table.table,
.yts-table-container table.yts-table {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Table header and rows */
body:not(.yts-ignore-theme) table.dataTable thead th,
body:not(.yts-ignore-theme) table.table thead th,
.yts-table-container table thead th {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
}

body:not(.yts-ignore-theme) table.dataTable tbody td,
body:not(.yts-ignore-theme) table.table tbody td,
.yts-table-container table tbody td {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Scroll bodies used by DataTables */
body:not(.yts-ignore-theme) .dataTables_scrollBody {
    background: transparent !important;
}

/* Controls (search, length, paginate) */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--yts-bg-glass) !important;
    color: var(--yts-text-primary) !important;
    border: 1px solid var(--yts-border) !important;
}

/* If some element sets an inline white background, override it */
body:not(.yts-ignore-theme) [style*="background"] {
    /* Only unset pure white backgrounds */
    background-color: unset !important;
}

/* Extra force: override any remaining white cards/container styles
   This targets common LeptonXLite and ABP card wrappers with highest
   specificity to ensure table areas use the YTS dark card background. */
html body .lpx-content-container .card,
html body .lpx-content .card,
html body .content-wrapper .card,
html body .content .card,
html body .container-fluid > .card,
html body .container > .card,
html body .card,
html body .card .card-body,
html body .card-body,
html body .panel,
html body .panel-body,
html body .box,
html body .box-body,
html body .dataTables_wrapper > .card,
html body .dataTables_wrapper .card,
html body .dataTables_wrapper .card-body,
html body .table-responsive .card {
    background: var(--yts-bg-card) !important;
    background-image: none !important;
    color: var(--yts-text-primary) !important;
    border-color: var(--yts-border) !important;
    box-shadow: none !important;
}

/* Make sure inner panel sections also inherit dark bg */
html body .card .panel-body,
html body .panel .panel-body,
html body .card .table,
html body .card .table-responsive,
html body .card .dataTables_wrapper {
    background: transparent !important;
}

/* Ensure the yts table container has padding and dark radius like Users page */
.yts-table-container {
    padding: 1.25rem !important;
    border-radius: var(--yts-radius-md) !important;
}

/* Strong page-specific overrides for DataTables wrappers by id and common patterns */
/* Targets tables like #CustomersTable and any DataTable wrapper to force dark card bg */
#CustomersTable_wrapper,
#CustomersTable_wrapper .dataTables_scroll,
#CustomersTable_wrapper .card,
#CustomersTable_wrapper .card-body,
.dataTables_wrapper,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper > .card,
.dataTables_wrapper .card-body {
    background-color: var(--yts-bg-card) !important;
    background-image: none !important;
    color: var(--yts-text-primary) !important;
    border: 1px solid var(--yts-border) !important;
}

/* ScrollBody must allow horizontal scroll – no border to avoid layout interference */
#CustomersTable_wrapper .dataTables_scrollBody,
#CustomersTable_wrapper .dataTables_scrollBody table,
.dataTables_wrapper .dataTables_scrollBody {
    background-color: var(--yts-bg-card) !important;
    background-image: none !important;
    color: var(--yts-text-primary) !important;
    border: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Ensure the scrolling body uses transparent table background and readable text */
.dataTables_wrapper .dataTables_scrollBody table,
.dataTables_wrapper table.dataTable,
.yts-table-container table {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Specific: override inline white backgrounds often added by server-side components */
#CustomersTable_wrapper[style],
.dataTables_wrapper[style] {
    background-color: var(--yts-bg-card) !important;
}

/* Make sure any immediate parent container with white bg is neutralized */
#CustomersTable_wrapper .card.bg-white,
#CustomersTable_wrapper .bg-white,
.dataTables_wrapper .card.bg-white,
.dataTables_wrapper .bg-white {
    background-color: transparent !important;
}





/* Table header and body colors */
html body table.dataTable thead th {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
}

html body table.dataTable tbody td {
    background: transparent !important;
    color: var(--yts-text-primary) !important;
}

/* Make sure scroll body isn't white */
html body .dataTables_scrollBody {
    background: transparent !important;
}

/* Pagination / length / filter wrappers dark */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--yts-text-secondary) !important;
}

/* Prevent inner elements from forcing a white background */
html body .dataTables_wrapper .card,
html body .dataTables_wrapper .card-body {
    background: transparent !important;
}

.yts-table-container table.dataTable thead th,
table.dataTable thead th {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-secondary) !important;
    border-bottom: 1px solid var(--yts-border) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.yts-table-container table.dataTable tbody td,
table.dataTable tbody td {
    background: transparent !important;
    color: #1e293b !important; /* Dark text for visibility */
    border-bottom: 1px solid var(--yts-border) !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
}

/* Dark theme table text - only apply when dark mode is explicitly set */
[data-bs-theme="dark"] table.dataTable tbody td {
    color: #f8fafc !important;
}

/* Fix: Ensure readable table text in LeptonXLite (Users/Tenants/Roles) pages
   Some ABP pages render DataTables without data-bs-theme so force colors
   for the LeptonXLite content areas to match YTS theme variables. */
html body .lpx-content-container table.dataTable tbody td,
html body .lpx-content-container table.dataTable tbody th,
html body .lpx-content table.dataTable tbody td,
html body .lpx-content table.dataTable tbody th,
html body .content-wrapper table.dataTable tbody td,
html body .content-wrapper table.dataTable tbody th,
html body .lpx-content-container table.dataTable thead th,
html body .lpx-content table.dataTable thead th,
html body .content-wrapper table.dataTable thead th {
    color: var(--yts-text-primary) !important;
}

html body .lpx-content-container table.dataTable thead th,
html body .lpx-content table.dataTable thead th,
html body .content-wrapper table.dataTable thead th {
    color: var(--yts-text-secondary) !important;
}

/* Prevent accidental horizontal overflow from long table content */
html body .lpx-content-container table.dataTable,
html body .lpx-content table.dataTable,
html body .content-wrapper table.dataTable {
    width: 100% !important;
}

html body .lpx-content-container table.dataTable td,
html body .lpx-content table.dataTable td,
html body .content-wrapper table.dataTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure yts table cells don't wrap and table scrolls horizontally on small screens */
.yts-table-container table.dataTable {
    min-width: 700px;
}

.yts-table-container table.dataTable thead th,
.yts-table-container table.dataTable tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.yts-table-container table.dataTable tbody tr,
table.dataTable tbody tr {
    background: transparent !important;
}

.yts-table-container table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover {
    background: var(--yts-bg-glass) !important;
}

.yts-table-container table.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover td {
    background: transparent !important;
}

/* ============================================
   Kebab Menu Actions (Three-dot dropdown)
   ============================================ */
.yts-actions-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.yts-kebab-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: var(--yts-bg-glass);
    color: var(--yts-text-secondary);
    position: relative;
}

.yts-kebab-btn:hover,
.yts-kebab-btn:focus {
    background: var(--yts-primary-light);
    color: var(--yts-primary);
    transform: scale(1.1);
    outline: none;
}

.yts-kebab-btn::after {
    display: none !important;
}

.yts-actions-menu {
    background: var(--yts-bg-secondary) !important;
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-md) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    padding: 0.375rem 0 !important;
    min-width: 180px !important;
    z-index: 1050 !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.yts-actions-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    color: var(--yts-text-primary) !important;
    transition: all 0.15s ease !important;
    border: none !important;
    background: transparent !important;
    width: 100%;
    text-align: start;
    cursor: pointer;
}

.yts-actions-menu .dropdown-item:hover,
.yts-actions-menu .dropdown-item:focus {
    background: var(--yts-primary-light) !important;
    color: var(--yts-primary) !important;
}

.yts-actions-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 0.8125rem;
}

.yts-actions-menu .dropdown-item.yts-action-danger:hover,
.yts-actions-menu .dropdown-item.yts-action-danger:focus {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--yts-danger) !important;
}

.yts-actions-menu .dropdown-item.yts-action-danger i {
    color: var(--yts-danger);
}

.yts-actions-menu .dropdown-divider {
    border-color: var(--yts-border) !important;
    margin: 0.25rem 0 !important;
}

/* Legacy fallback – keep old classes working if referenced elsewhere */
.yts-action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Large tablets / small desktops */
@media (max-width: 1200px) {
    .yts-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets */
@media (max-width: 992px) {
    .yts-container {
        padding: 0 0.5rem;
    }

    .yts-page-header {
        padding: 1.25rem;
    }

    .yts-page-header .yts-title {
        font-size: 1.375rem;
    }

    .yts-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .yts-header-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .yts-header-actions .yts-btn {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }

    .yts-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .yts-table-container table {
        table-layout: auto !important;
    }

    .yts-table-container .dataTables_wrapper,
    .yts-table-container .dataTables_scroll,
    .yts-table-container .dataTables_scrollBody {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile landscape / small tablets */
@media (max-width: 768px) {
    .yts-container {
        padding: 0 0.5rem;
    }
    
    .yts-page-header {
        padding: 1rem;
    }
    
    .yts-page-header .yts-title {
        font-size: 1.25rem;
    }

    .yts-page-header .yts-subtitle {
        font-size: 0.8125rem;
    }
    
    .yts-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    .yts-stat-card {
        padding: 0.875rem;
    }

    .yts-stat-value {
        font-size: 1.25rem;
    }
    
    .yts-filters-grid {
        grid-template-columns: 1fr;
    }
    
    .yts-flex-between {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .yts-header-actions {
        display: flex;
        justify-content: flex-start;
    }
    
    .yts-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--yts-radius-sm) !important;
        padding: 0.5rem !important;
    }

    .yts-table-container .dataTables_wrapper,
    .yts-table-container .dataTables_scroll,
    .yts-table-container .dataTables_scrollBody {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce cell padding on mobile */
    .yts-table-container table.dataTable thead th,
    table.dataTable thead th {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.6875rem !important;
    }

    .yts-table-container table.dataTable tbody td,
    table.dataTable tbody td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    .yts-card {
        padding: 0.875rem 0.625rem;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .yts-btn {
        font-size: 0.8125rem;
        padding: 0.5rem 0.875rem;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .yts-container {
        padding: 0 0.25rem;
    }

    .yts-page-header {
        padding: 0.75rem;
    }
    
    .yts-page-header .yts-title {
        font-size: 1.125rem;
    }

    .yts-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .yts-stat-card {
        padding: 0.75rem;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .yts-table-container {
        padding: 0.125rem !important;
        border-radius: var(--yts-radius-sm) !important;
    }

    /* Even smaller cells on phone portrait */
    .yts-table-container table.dataTable thead th,
    table.dataTable thead th {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.625rem !important;
    }

    .yts-table-container table.dataTable tbody td,
    table.dataTable tbody td {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .yts-card {
        padding: 0.75rem 0.5rem;
        border-radius: var(--yts-radius-sm);
    }

    .yts-header-actions .yts-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Modal Styling Override
   ============================================ */
.modal-content {
    background: var(--yts-bg-secondary) !important;
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-lg) !important;
    color: var(--yts-text-primary) !important;
}

.modal-header {
    border-bottom: 1px solid var(--yts-border) !important;
    background: var(--yts-bg-card) !important;
    border-radius: var(--yts-radius-lg) var(--yts-radius-lg) 0 0 !important;
}

.modal-header .modal-title {
    color: var(--yts-text-primary) !important;
    font-weight: 600;
}

.modal-header .btn-close {
    filter: invert(1);
}

.modal-body {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-primary) !important;
}

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

.modal-body .form-label {
    color: var(--yts-text-secondary) !important;
    font-weight: 500;
}

.modal-body .form-control,
.modal-body .form-select {
    background: var(--yts-bg-glass) !important;
    border: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
    border-radius: var(--yts-radius-sm) !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    border-color: var(--yts-primary) !important;
    box-shadow: 0 0 0 3px var(--yts-primary-light) !important;
}

.modal-body .form-control::placeholder {
    color: var(--yts-text-muted) !important;
}

/* Native select option dark theme */
select option,
.form-select option,
.form-control option,
.modal-body select option,
.auto-complete-select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

select optgroup {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* ============================================
   ABP Specific Overrides
   ============================================ */
.abp-confirm-dialog .modal-content,
.abp-message-dialog .modal-content {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-primary) !important;
}

.swal2-popup {
    background: var(--yts-bg-secondary) !important;
    color: var(--yts-text-primary) !important;
    border-radius: var(--yts-radius-lg) !important;
}

.swal2-title {
    color: var(--yts-text-primary) !important;
}

.swal2-html-container {
    color: var(--yts-text-secondary) !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, var(--yts-primary) 0%, var(--yts-secondary) 100%) !important;
    border: none !important;
    border-radius: var(--yts-radius-sm) !important;
}

.swal2-cancel {
    background: var(--yts-bg-glass) !important;
    border: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
    border-radius: var(--yts-radius-sm) !important;
}

/* ============================================
   Select2 Dark Theme Override
   ============================================ */
/* Main container */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--yts-bg-primary) !important;
    border: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
    border-radius: var(--yts-radius-sm) !important;
    min-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--yts-text-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--yts-text-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--yts-text-secondary) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--yts-text-secondary) transparent !important;
}

/* Dropdown panel */
.select2-dropdown {
    background-color: var(--yts-bg-secondary) !important;
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-sm) !important;
    z-index: 10060 !important;
}

/* Search box inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search--inline .select2-search__field {
    background-color: var(--yts-bg-primary) !important;
    border: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
    border-radius: var(--yts-radius-sm) !important;
    padding: 0.5rem !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-search--inline .select2-search__field:focus {
    border-color: var(--yts-primary) !important;
    outline: none !important;
}

/* Results list */
.select2-results__options {
    background-color: var(--yts-bg-secondary) !important;
}

.select2-container--default .select2-results__option {
    color: var(--yts-text-primary) !important;
    background-color: var(--yts-bg-secondary) !important;
    padding: 0.5rem 0.75rem !important;
}

/* Hover state */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--yts-primary) !important;
    color: #ffffff !important;
}

/* Disabled / no results */
.select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--yts-text-muted) !important;
    background-color: var(--yts-bg-secondary) !important;
}

/* "Searching..." / loading message */
.select2-results__message {
    color: var(--yts-text-secondary) !important;
}

/* Multiple select tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--yts-primary) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
}

/* Clear button */
.select2-container--default .select2-selection__clear {
    color: var(--yts-text-secondary) !important;
}

/* Inside modals - ensure proper z-index and styling */
.modal .select2-container--default .select2-selection--single,
.modal .select2-container--default .select2-selection--multiple {
    background-color: var(--yts-bg-glass) !important;
    border: 1px solid var(--yts-border) !important;
}

/* ============================================
   Loading/Busy State
   ============================================ */
.abp-busy-overlay {
    background: rgba(15, 23, 42, 0.8) !important;
}

.abp-busy-indicator {
    color: var(--yts-primary) !important;
}

/* ============================================
   Dropdown Menus Override
   ============================================ */
.dropdown-menu {
    background: var(--yts-bg-secondary) !important;
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-md) !important;
    box-shadow: var(--yts-shadow) !important;
}

.dropdown-item {
    color: var(--yts-text-primary) !important;
    transition: var(--yts-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--yts-bg-glass) !important;
    color: var(--yts-primary) !important;
}

.dropdown-divider {
    border-color: var(--yts-border) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--yts-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--yts-bg-card);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yts-primary);
}

/* ============================================
   Toast/Notification Override
   ============================================ */
.toast {
    background: var(--yts-bg-secondary) !important;
    border: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
}

/* ============================================
   Card hover effects enhancement
   ============================================ */
.yts-stat-card.info {
    --stat-color: var(--yts-info);
}

/* Ensure header buttons are clickable */
.yts-page-header * {
    position: relative;
    z-index: 1;
}

.yts-btn {
    position: relative;
    z-index: 2;
}

/* ============================================
   YTS Custom Login Page Styles
   ============================================ */
.yts-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--yts-bg-primary) 0%, #1a1a2e 50%, var(--yts-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.yts-login-page::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    animation: yts-float 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes yts-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, 2%) rotate(1deg); }
    50% { transform: translate(0, 4%) rotate(0deg); }
    75% { transform: translate(-2%, 2%) rotate(-1deg); }
}

/* ============================================
   Sidebar / Navigation Enhancements
   Targets common LeptonXLite/ABP sidebar classes
 ============================================ */
.main-sidebar,
aside.main-sidebar {
    background: linear-gradient(180deg, var(--yts-bg-secondary), rgba(30,41,59,0.6));
    border-right: 1px solid var(--yts-border);
    box-shadow: var(--yts-shadow-sm);
    width: 260px;
    transition: width 0.25s ease, transform 0.25s ease, background 0.25s ease;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
}

.main-sidebar .brand-link,
.brand-link {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    color: var(--yts-text-primary);
}

.brand-link .brand-image,
.main-sidebar .brand-image {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--yts-primary), var(--yts-secondary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--yts-shadow-sm);
}

.sidebar .user-panel {
    padding: 0.85rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    border-bottom: 1px solid var(--yts-border);
}

.sidebar .user-panel .image img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--yts-border);
}

.nav-sidebar .nav-link {
    color: var(--yts-text-secondary);
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    margin: 0.35rem 0;
    transition: background var(--yts-transition), color var(--yts-transition), transform .15s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-sidebar .nav-link:hover {
    background: var(--yts-bg-glass);
    color: var(--yts-text-primary);
    transform: translateX(6px);
}

.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link:active {
    background: linear-gradient(90deg, var(--yts-primary), var(--yts-secondary));
    color: #fff !important;
    box-shadow: var(--yts-shadow-glow);
}

.nav-sidebar .nav-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: inherit;
    background: transparent;
}

.nav-sidebar .right {
    margin-left: auto;
    color: var(--yts-text-muted);
    font-size: 0.85rem;
}

.nav-treeview {
    padding-left: 0.8rem;
    margin-top: 0.35rem;
}

.main-sidebar.collapsed {
    width: 78px;
}

/* Scrollbar inside sidebar */
.main-sidebar ::-webkit-scrollbar,
.sidebar ::-webkit-scrollbar {
    width: 8px;
}
.main-sidebar ::-webkit-scrollbar-thumb,
.sidebar ::-webkit-scrollbar-thumb {
    background: var(--yts-bg-card);
    border-radius: 6px;
}
.main-sidebar ::-webkit-scrollbar-thumb:hover,
.sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--yts-primary);
}

/* Hide visual scrollbars for sidebar while keeping scroll functionality */
.lpx-sidebar,
.main-sidebar,
.yts-sidebar,
.lpx-sidebar .lpx-sidebar-menu,
.lpx-sidebar-menu,
.nav-sidebar,
.yts-sidebar-nav,
.sidebar-menu {
    box-sizing: border-box;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    overflow-y: auto !important;   /* Allow vertical scroll but hide scrollbar visuals */
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

.lpx-sidebar ::-webkit-scrollbar,
.main-sidebar ::-webkit-scrollbar,
.yts-sidebar ::-webkit-scrollbar,
.lpx-sidebar .lpx-sidebar-menu ::-webkit-scrollbar,
.nav-sidebar ::-webkit-scrollbar,
.yts-sidebar-nav ::-webkit-scrollbar,
.sidebar-menu ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

/* Ensure inner menu items do not cause overflow */
.lpx-sidebar-menu .menu-item,
.nav-sidebar .nav-item,
.yts-nav-item,
.sidebar-menu li {
    max-width: 100%;
    box-sizing: border-box;
}


/* Responsive behavior */
@media (max-width: 991px) {
    .main-sidebar,
    aside.main-sidebar {
        position: fixed;
        z-index: 1030;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-6%);
        width: 260px;
    }
}


.yts-login-container {
    width: 100%;
    max-width: 450px;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.yts-login-card {
    background: var(--yts-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-xl);
    padding: 3rem;
    box-shadow: var(--yts-shadow), var(--yts-shadow-glow);
    position: relative;
    overflow: hidden;
}

.yts-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--yts-primary), var(--yts-secondary), var(--yts-info));
}

.yts-login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.yts-login-logo img {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.yts-login-logo h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--yts-text-primary);
    margin: 0;
    background: linear-gradient(135deg, var(--yts-primary), var(--yts-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.yts-login-logo p {
    color: var(--yts-text-secondary);
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.yts-login-form .form-group {
    margin-bottom: 1.5rem;
}

.yts-login-form .form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--yts-text-secondary);
    margin-bottom: 0.5rem;
}

.yts-login-form .form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--yts-bg-glass);
    border: 1px solid var(--yts-border);
    border-radius: var(--yts-radius-sm);
    color: var(--yts-text-primary);
    font-size: 1rem;
    transition: var(--yts-transition);
}

.yts-login-form .form-control:focus {
    outline: none;
    border-color: var(--yts-primary);
    box-shadow: 0 0 0 3px var(--yts-primary-light);
}

.yts-login-form .form-control::placeholder {
    color: var(--yts-text-muted);
}

.yts-login-form .input-group {
    position: relative;
}

.yts-login-form .input-group-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yts-text-muted);
    z-index: 1;
}

.yts-login-form .input-group .form-control {
    padding-left: 2.75rem;
}

.yts-login-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--yts-primary) 0%, var(--yts-secondary) 100%);
    border: none;
    border-radius: var(--yts-radius-sm);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--yts-transition);
    margin-top: 0.5rem;
}

.yts-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--yts-shadow-glow);
}

.yts-login-btn:active {
    transform: translateY(0);
}

.yts-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}

.yts-login-options .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.yts-login-options .form-check-input {
    width: 1rem;
    height: 1rem;
    background: var(--yts-bg-glass);
    border: 1px solid var(--yts-border);
    border-radius: 4px;
}

.yts-login-options .form-check-input:checked {
    background: var(--yts-primary);
    border-color: var(--yts-primary);
}

.yts-login-options .form-check-label {
    color: var(--yts-text-secondary);
    font-size: 0.875rem;
}

.yts-login-options a {
    color: var(--yts-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--yts-transition);
}

.yts-login-options a:hover {
    color: var(--yts-secondary);
}

.yts-login-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--yts-border);
}

.yts-login-footer p {
    color: var(--yts-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.yts-login-footer a {
    color: var(--yts-primary);
    text-decoration: none;
    font-weight: 500;
}

/* ============================================
   YTS Custom Sidebar Navigation
   ============================================ */
.yts-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    background: var(--yts-bg-secondary);
    border-right: 1px solid var(--yts-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: var(--yts-transition);
}

.yts-sidebar.collapsed {
    width: 70px;
}

.yts-sidebar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--yts-border);
}

.yts-sidebar-logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.yts-sidebar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--yts-text-primary);
    white-space: nowrap;
    overflow: hidden;
    background: linear-gradient(135deg, var(--yts-primary), var(--yts-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.yts-sidebar.collapsed .yts-sidebar-brand {
    display: none;
}

.yts-sidebar-toggle {
    position: absolute;
    right: -12px;
    top: 28px;
    width: 24px;
    height: 24px;
    background: var(--yts-bg-secondary);
    border: 1px solid var(--yts-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--yts-text-secondary);
    transition: var(--yts-transition);
    z-index: 10;
}

.yts-sidebar-toggle:hover {
    background: var(--yts-primary);
    color: white;
    border-color: var(--yts-primary);
}

.yts-sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.yts-nav-section {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.yts-nav-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yts-text-muted);
    padding: 0.5rem 0.75rem;
}

.yts-sidebar.collapsed .yts-nav-section-title {
    display: none;
}

.yts-nav-item {
    margin-bottom: 0.25rem;
}

.yts-nav-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    color: var(--yts-text-secondary);
    text-decoration: none;
    border-radius: var(--yts-radius-sm);
    transition: var(--yts-transition);
    position: relative;
    margin: 0 0.5rem;
}

.yts-nav-link:hover {
    background: var(--yts-bg-glass);
    color: var(--yts-text-primary);
}

.yts-nav-link.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: var(--yts-primary);
}

.yts-nav-link.active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, var(--yts-primary), var(--yts-secondary));
    border-radius: 3px;
}

.yts-nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.yts-nav-text {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.yts-sidebar.collapsed .yts-nav-text {
    display: none;
}

.yts-nav-badge {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    background: var(--yts-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
}

.yts-sidebar.collapsed .yts-nav-badge {
    display: none;
}

/* Submenu */
.yts-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.yts-nav-item.open .yts-nav-submenu {
    max-height: 500px;
}

.yts-nav-submenu .yts-nav-link {
    padding-left: 3rem;
    font-size: 0.85rem;
}

.yts-nav-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.yts-nav-item.open .yts-nav-arrow {
    transform: rotate(90deg);
}

.yts-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--yts-border);
}

.yts-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--yts-bg-glass);
    border-radius: var(--yts-radius-sm);
}

.yts-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yts-primary), var(--yts-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
}

.yts-user-details {
    flex: 1;
    min-width: 0;
}

.yts-user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yts-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yts-user-role {
    font-size: 0.75rem;
    color: var(--yts-text-muted);
}

.yts-sidebar.collapsed .yts-user-details {
    display: none;
}

/* ============================================
   YTS Top Navbar (with sidebar)
   ============================================ */
.yts-topbar {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    height: 64px;
    background: var(--yts-bg-secondary);
    border-bottom: 1px solid var(--yts-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 999;
    transition: var(--yts-transition);
}

.yts-sidebar.collapsed ~ .yts-topbar,
.yts-sidebar.collapsed ~ .yts-main-content .yts-topbar {
    left: 70px;
}

.yts-topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.yts-topbar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--yts-text-primary);
}

.yts-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.yts-topbar-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--yts-radius-sm);
    color: var(--yts-text-secondary);
    cursor: pointer;
    transition: var(--yts-transition);
    position: relative;
}

.yts-topbar-btn:hover {
    background: var(--yts-bg-glass);
    color: var(--yts-text-primary);
}

.yts-topbar-btn .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--yts-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Main Content Area (with sidebar)
   ============================================ */
.yts-main-content {
    margin-left: 280px;
    margin-top: 64px;
    min-height: calc(100vh - 64px);
    background: var(--yts-bg-primary);
    transition: var(--yts-transition);
}

.yts-sidebar.collapsed ~ .yts-main-content {
    margin-left: 70px;
}

/* ============================================
   Responsive Sidebar
   ============================================ */
@media (max-width: 992px) {
    .yts-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    
    .yts-sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .yts-topbar {
        left: 0;
    }
    
    .yts-main-content {
        margin-left: 0;
    }
    
    .yts-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: var(--yts-transition);
    }
    
    .yts-sidebar.mobile-open ~ .yts-sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
}

/* ============================================
   ABP Menu Override Styles (for existing layout)
   ============================================ */
.lpx-sidebar {
    background: var(--yts-bg-primary) !important;
    border-right: 1px solid var(--yts-border) !important;
}

.lpx-sidebar-menu {
    background: transparent !important;
}

.lpx-sidebar-menu .menu-item {
    margin: 0.25rem 0.5rem;
}

.lpx-sidebar-menu .menu-link {
    color: var(--yts-text-secondary) !important;
    border-radius: var(--yts-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    transition: var(--yts-transition) !important;
}

.lpx-sidebar-menu .menu-link:hover {
    background: var(--yts-bg-glass) !important;
    color: var(--yts-text-primary) !important;
}

.lpx-sidebar-menu .menu-link.active,
.lpx-sidebar-menu .menu-item.active > .menu-link {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    color: var(--yts-primary) !important;
}

.lpx-sidebar-menu .menu-icon {
    color: inherit !important;
}

.lpx-sidebar-menu .menu-title {
    color: inherit !important;
}

.lpx-brand-logo {
    padding: 1.5rem !important;
    border-bottom: 1px solid var(--yts-border) !important;
}

.lpx-footer {
    background: var(--yts-bg-primary) !important;
    border-top: 1px solid var(--yts-border) !important;
    color: var(--yts-text-muted) !important;
}

/* ABP Navbar Override */
.lpx-topbar {
    background: var(--yts-bg-primary) !important;
    border-bottom: 1px solid var(--yts-border) !important;
}

.lpx-topbar .nav-link {
    color: var(--yts-text-secondary) !important;
}

.lpx-topbar .nav-link:hover {
    color: var(--yts-text-primary) !important;
}

.lpx-topbar .dropdown-toggle::after {
    color: var(--yts-text-secondary) !important;
}

/* ABP Account Page Override */
.account-layout {
    background: linear-gradient(135deg, var(--yts-bg-primary) 0%, #1a1a2e 50%, var(--yts-bg-secondary) 100%) !important;
    min-height: 100vh;
}

.account-layout .card {
    background: var(--yts-bg-card) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-xl) !important;
    box-shadow: var(--yts-shadow), var(--yts-shadow-glow) !important;
}

.account-layout .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--yts-primary), var(--yts-secondary), var(--yts-info));
    border-radius: var(--yts-radius-xl) var(--yts-radius-xl) 0 0;
}

.account-layout .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--yts-border) !important;
}

.account-layout .card-title {
    color: var(--yts-text-primary) !important;
    font-weight: 600 !important;
}

.account-layout .card-body {
    color: var(--yts-text-primary) !important;
}

.account-layout .form-label {
    color: var(--yts-text-secondary) !important;
}

.account-layout .form-control {
    background: var(--yts-bg-glass) !important;
    border: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
    border-radius: var(--yts-radius-sm) !important;
}

.account-layout .form-control:focus {
    border-color: var(--yts-primary) !important;
    box-shadow: 0 0 0 3px var(--yts-primary-light) !important;
}

.account-layout .btn-primary {
    background: linear-gradient(135deg, var(--yts-primary) 0%, var(--yts-secondary) 100%) !important;
    border: none !important;
    border-radius: var(--yts-radius-sm) !important;
    font-weight: 600 !important;
    transition: var(--yts-transition) !important;
}

.account-layout .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--yts-shadow-glow) !important;
}

.account-layout a {
    color: var(--yts-primary) !important;
}

.account-layout .text-muted {
    color: var(--yts-text-muted) !important;
}

/* ============================================
   LeptonXLite Sidebar Complete Override
   ============================================ */

/* Main sidebar container */
.lpx-sidebar,
.lpx-sidemenu,
aside.lpx-sidebar,
.lpx-content-container .lpx-sidebar,
[class*="sidebar"],
.main-sidebar {
    background: var(--yts-bg-primary) !important;
    border-right: 1px solid var(--yts-border) !important;
}

/* Sidebar brand/logo area */
.lpx-sidebar .lpx-brand,
.lpx-brand,
.lpx-sidebar-header,
.sidebar-header,
.brand-link,
.navbar-brand {
    background: transparent !important;
    border-bottom: 1px solid var(--yts-border) !important;
    padding: 1rem 1.25rem !important;
}

.lpx-brand-logo img,
.brand-image,
.sidebar-logo img {
    filter: brightness(1.2);
}

.lpx-brand .brand-text,
.brand-text,
.sidebar-brand-text {
    color: var(--yts-text-primary) !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--yts-primary), var(--yts-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation menu container */
.lpx-sidebar-menu,
.lpx-menu,
.nav-sidebar,
.sidebar-menu,
.menu,
nav.mt-2 {
    background: transparent !important;
    padding: 0.5rem !important;
}

/* Menu section titles */
.lpx-sidebar-menu .menu-section,
.nav-header,
.menu-section-title,
.sidebar-heading {
    color: var(--yts-text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 1rem 1rem 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* Menu items */
.lpx-sidebar-menu .menu-item,
.nav-sidebar .nav-item,
.menu-item,
.sidebar-menu li {
    margin: 0.125rem 0.5rem !important;
}

/* Menu links - Normal state */
.lpx-sidebar-menu .menu-link,
.lpx-menu-link,
.nav-sidebar .nav-link,
.menu-link,
.sidebar-menu a,
.lpx-sidebar a.nav-link,
.nav-sidebar > .nav-item > .nav-link {
    color: var(--yts-text-secondary) !important;
    border-radius: var(--yts-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    transition: var(--yts-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
}

/* Menu links - Hover state */
.lpx-sidebar-menu .menu-link:hover,
.lpx-menu-link:hover,
.nav-sidebar .nav-link:hover,
.menu-link:hover,
.sidebar-menu a:hover,
.lpx-sidebar a.nav-link:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--yts-text-primary) !important;
}

/* Menu links - Active state */
.lpx-sidebar-menu .menu-link.active,
.lpx-sidebar-menu .menu-item.active > .menu-link,
.lpx-menu-link.active,
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-item.menu-open > .nav-link,
.menu-link.active,
.sidebar-menu .active > a,
.lpx-sidebar a.nav-link.active,
.lpx-sidebar .nav-item.active > a {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    color: var(--yts-primary) !important;
    font-weight: 500 !important;
}

/* Active indicator line */
.lpx-sidebar-menu .menu-link.active::before,
.nav-sidebar .nav-link.active::before,
.lpx-sidebar a.nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 60% !important;
    background: linear-gradient(180deg, var(--yts-primary), var(--yts-secondary)) !important;
    border-radius: 3px !important;
}

/* Menu icons */
.lpx-sidebar-menu .menu-icon,
.nav-sidebar .nav-icon,
.menu-icon,
.sidebar-menu i,
.lpx-sidebar .nav-link i,
.lpx-sidebar .nav-link .fa,
.lpx-sidebar .nav-link .fas,
.lpx-sidebar .nav-link .far,
.lpx-sidebar .nav-link .fab {
    color: inherit !important;
    font-size: 1rem !important;
    width: 1.5rem !important;
    text-align: center !important;
    opacity: 0.8 !important;
    transition: var(--yts-transition) !important;
}

.lpx-sidebar-menu .menu-link:hover .menu-icon,
.nav-sidebar .nav-link:hover .nav-icon,
.lpx-sidebar .nav-link:hover i {
    opacity: 1 !important;
    color: var(--yts-primary) !important;
}

/* Menu text */
.lpx-sidebar-menu .menu-title,
.nav-sidebar .nav-link p,
.menu-title,
.sidebar-menu span {
    color: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* Submenu/Treeview */
.nav-treeview,
.menu-sub,
.lpx-sidebar-menu .menu-sub,
.nav-sidebar .nav-treeview {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: var(--yts-radius-sm) !important;
    margin: 0.25rem 0 0.25rem 1rem !important;
    padding: 0.25rem 0 !important;
}

.nav-treeview .nav-link,
.menu-sub .menu-link,
.lpx-sidebar-menu .menu-sub .menu-link {
    padding: 0.5rem 1rem 0.5rem 1.5rem !important;
    font-size: 0.85rem !important;
}

/* Menu arrow/chevron */
.menu-arrow,
.nav-sidebar .nav-link .right,
.nav-sidebar .nav-link > p > i,
.lpx-sidebar .nav-link .menu-arrow {
    color: var(--yts-text-muted) !important;
    transition: transform 0.3s ease !important;
    margin-left: auto !important;
}

.menu-open > .nav-link .right,
.menu-open > .nav-link > p > i,
.nav-item.menu-open > .nav-link .menu-arrow {
    transform: rotate(90deg) !important;
}

/* Sidebar footer */
.lpx-sidebar-footer,
.sidebar-footer,
.lpx-footer {
    background: transparent !important;
    border-top: 1px solid var(--yts-border) !important;
    padding: 1rem !important;
}

/* ============================================
   LeptonXLite Topbar/Navbar Override
   ============================================ */
.lpx-topbar,
.lpx-navbar,
.main-header,
.navbar,
header.lpx-topbar {
    background: var(--yts-bg-primary) !important;
    border-bottom: 1px solid var(--yts-border) !important;
    box-shadow: none !important;
}

.lpx-topbar .nav-link,
.main-header .nav-link,
.navbar .nav-link {
    color: var(--yts-text-secondary) !important;
    transition: var(--yts-transition) !important;
}

.lpx-topbar .nav-link:hover,
.main-header .nav-link:hover,
.navbar .nav-link:hover {
    color: var(--yts-text-primary) !important;
    background: var(--yts-bg-glass) !important;
}

.lpx-topbar .dropdown-toggle::after,
.navbar .dropdown-toggle::after {
    color: var(--yts-text-secondary) !important;
}

/* User menu */
.lpx-topbar .user-menu,
.user-panel,
.navbar .user-menu {
    color: var(--yts-text-primary) !important;
}

/* Breadcrumb */
.lpx-topbar .breadcrumb,
.breadcrumb,
nav[aria-label="breadcrumb"] {
    background: transparent !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--yts-text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--yts-text-primary) !important;
}

/* ============================================
   LeptonXLite Content Area Override
   ============================================ */
.lpx-content-container,
.content-wrapper,
.lpx-wrapper,
main.lpx-content {
    background: var(--yts-bg-primary) !important;
}

.lpx-content,
.content,
.container-fluid {
    background: transparent !important;
}

/* ============================================
   LeptonXLite Footer Override
   ============================================ */
.lpx-footer,
.main-footer,
footer {
    background: var(--yts-bg-secondary) !important;
    border-top: 1px solid var(--yts-border) !important;
    color: var(--yts-text-muted) !important;
}

.lpx-footer a,
.main-footer a,
footer a {
    color: var(--yts-primary) !important;
}

/* ============================================
   LeptonXLite Card Override
   ============================================ */
.lpx-card,
.card {
    background: var(--yts-bg-card) !important;
    border: 1px solid var(--yts-border) !important;
    border-radius: var(--yts-radius-md) !important;
}

.card-header {
    background: var(--yts-bg-glass) !important;
    border-bottom: 1px solid var(--yts-border) !important;
    color: var(--yts-text-primary) !important;
}

.card-body {
    color: var(--yts-text-primary) !important;
}

.card-footer {
    background: var(--yts-bg-glass) !important;
    border-top: 1px solid var(--yts-border) !important;
}

/* ============================================
   FULL LeptonXLite Sidebar Override - YTS Theme
   Complete override for sidebar navigation
   ============================================ */

/* Main sidebar container */
html body .lpx-sidebar-container,
html body #lpx-sidebar,
html body .lpx-sidebar,
html body .lpx-aside,
html body aside.lpx-sidebar,
html body [class*="lpx-sidebar"],
html body .sidebar,
html body aside {
    background: var(--yts-bg-primary) !important;
    background-color: var(--yts-bg-primary) !important;
    border-right: 1px solid var(--yts-border) !important;
}

/* Inner sidebar scroll container and nav */
html body .lpx-sidebar-container .lpx-scroll-container,
html body .lpx-sidebar-container .lpx-nav,
html body .lpx-sidebar-container .lpx-nav-menu,
html body #lpx-sidebar .lpx-nav,
html body #lpx-sidebar .lpx-nav-menu {
    background: transparent !important;
    background-color: transparent !important;
}

/* Logo/Brand area */
html body .lpx-sidebar-header,
html body .lpx-brand,
html body .lpx-sidebar .brand-wrapper,
html body .sidebar-brand,
html body .lpx-sidebar-container .lpx-brand,
html body .lpx-sidebar-container .lpx-logo-container,
html body #lpx-sidebar .lpx-logo-container {
    background: transparent !important;
    border-bottom: 1px solid var(--yts-border) !important;
    padding: 1rem !important;
}

html body .lpx-sidebar-header .brand-logo img,
html body .lpx-brand img,
html body .sidebar-brand img {
    max-height: 40px !important;
    filter: brightness(1.1) !important;
}

/* Menu wrapper */
/*html body .lpx-sidebar-menu,
html body .lpx-menu,
html body .lpx-nav,
html body nav.lpx-sidebar-menu,
html body ul.lpx-menu,
html body .sidebar-menu,
html body .nav-sidebar {
    background: transparent !important;
    padding: 0.5rem !important;
}*/

/* All menu items container */
html body .lpx-sidebar-menu > ul,
html body .lpx-menu > ul,
html body .lpx-nav > ul,
html body .nav-sidebar > ul,
html body .lpx-sidebar ul.nav,
html body .lpx-sidebar .nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual menu item */
html body .lpx-sidebar-menu li,
html body .lpx-sidebar-menu .lpx-menu-item,
html body .lpx-sidebar-menu .nav-item,
html body .lpx-menu .lpx-menu-item,
html body .nav-sidebar .nav-item,
html body .lpx-sidebar li.nav-item,
html body .lpx-nav-menu .outer-menu-item,
html body .lpx-nav-menu .lpx-inner-menu-item {
    margin-bottom: 0.25rem !important;
    list-style: none !important;
}

/* Menu links - DEFAULT STATE */
html body .lpx-sidebar-menu a,
html body .lpx-sidebar-menu .lpx-menu-item > a,
html body .lpx-sidebar-menu .nav-item > a,
html body .lpx-sidebar-menu .nav-link,
html body .lpx-sidebar-menu .menu-link,
html body .lpx-menu .nav-link,
html body .lpx-sidebar .nav-link,
html body .nav-sidebar .nav-link,
html body .lpx-sidebar a.nav-link,
html body .lpx-sidebar li > a,
html body .lpx-menu-item-link,
html body .lpx-nav-menu .lpx-menu-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    background: transparent !important;
    border: none !important;
    margin: 0 0.5rem !important;
}

/* Menu links - HOVER STATE */
html body .lpx-sidebar-menu a:hover,
html body .lpx-sidebar-menu .lpx-menu-item > a:hover,
html body .lpx-sidebar-menu .nav-item > a:hover,
html body .lpx-sidebar-menu .nav-link:hover,
html body .lpx-sidebar-menu .menu-link:hover,
html body .lpx-menu .nav-link:hover,
html body .lpx-sidebar .nav-link:hover,
html body .nav-sidebar .nav-link:hover,
html body .lpx-sidebar a.nav-link:hover,
html body .lpx-sidebar li > a:hover,
html body .lpx-menu-item-link:hover,
html body .lpx-nav-menu .lpx-menu-item-link:hover {
    color: #ffffff !important;
    background: rgba(99, 102, 241, 0.15) !important;
    transform: translateX(4px) !important;
}

/* Menu links - ACTIVE STATE */
html body .lpx-sidebar-menu a.active,
html body .lpx-sidebar-menu .lpx-menu-item > a.active,
html body .lpx-sidebar-menu .nav-item > a.active,
html body .lpx-sidebar-menu .nav-link.active,
html body .lpx-sidebar-menu .menu-link.active,
html body .lpx-menu .nav-link.active,
html body .lpx-sidebar .nav-link.active,
html body .nav-sidebar .nav-link.active,
html body .lpx-sidebar a.nav-link.active,
html body .lpx-sidebar li > a.active,
html body .lpx-sidebar-menu .nav-item.active > a,
html body .lpx-sidebar-menu li.active > a,
html body .lpx-menu-item.active > a,
html body .nav-item.menu-is-opening > a,
html body .lpx-sidebar-menu .lpx-menu-item.selected > a,
html body .lpx-sidebar-menu .selected > a,
html body .lpx-menu-item-link.selected,
html body .lpx-nav-menu .lpx-menu-item-link.selected {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
    font-weight: 600 !important;
}

/* Menu links - ACTIVE STATE active indicator */
html body .lpx-sidebar-menu a.active::before,
html body .lpx-sidebar-menu .nav-link.active::before,
html body .lpx-sidebar .nav-link.active::before,
html body .lpx-sidebar-menu .selected > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 70% !important;
    background: #ffffff !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Menu icons */
html body .lpx-sidebar-menu i,
html body .lpx-sidebar-menu .lpx-menu-item i,
html body .lpx-sidebar-menu .nav-link i,
html body .lpx-sidebar-menu .menu-icon,
html body .lpx-sidebar-menu svg,
html body .lpx-sidebar .nav-link i,
html body .lpx-sidebar .nav-link svg,
html body .nav-sidebar .nav-link i,
html body .lpx-sidebar i.fa,
html body .lpx-sidebar i.fas,
html body .lpx-sidebar i.far,
html body .lpx-sidebar i.fab,
html body .lpx-sidebar i[class*="fa-"] {
    color: inherit !important;
    font-size: 1.1rem !important;
    width: 1.5rem !important;
    text-align: center !important;
    opacity: 0.9 !important;
    flex-shrink: 0 !important;
}

/* Menu text */
html body .lpx-sidebar-menu span,
html body .lpx-sidebar-menu .menu-title,
html body .lpx-sidebar-menu .nav-link span,
html body .lpx-sidebar .nav-link span,
html body .nav-sidebar .nav-link span,
html body .lpx-sidebar .menu-title {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Parent menu items with children */
html body .lpx-sidebar-menu .has-treeview > a,
html body .lpx-sidebar-menu .menu-parent > a,
html body .lpx-sidebar-menu .nav-item.has-children > a,
html body .lpx-sidebar-menu [data-bs-toggle="collapse"],
html body .lpx-sidebar .nav-link[data-bs-toggle="collapse"] {
    position: relative !important;
}

/* Dropdown arrow */
html body .lpx-sidebar-menu .menu-arrow,
html body .lpx-sidebar-menu .nav-link .right,
html body .lpx-sidebar-menu .nav-link > i.right,
html body .lpx-sidebar .nav-link .menu-arrow,
html body .lpx-sidebar .nav-link::after,
html body .lpx-sidebar-menu a[data-bs-toggle]::after {
    margin-left: auto !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    transition: transform 0.3s ease !important;
}

/* Dropdown arrow - open state */
html body .lpx-sidebar-menu .menu-open > a .menu-arrow,
html body .lpx-sidebar-menu .menu-open > a .right,
html body .lpx-sidebar-menu .nav-item.menu-open > a .right,
html body .lpx-sidebar .collapse.show + .nav-link::after,
html body .lpx-sidebar-menu a[aria-expanded="true"]::after {
    transform: rotate(90deg) !important;
}

/* Submenu container */
html body .lpx-sidebar-menu .nav-treeview,
html body .lpx-sidebar-menu .menu-sub,
html body .lpx-sidebar-menu ul.nav-treeview,
html body .lpx-sidebar .collapse,
html body .nav-sidebar .nav-treeview,
html body .lpx-sidebar-menu .submenu,
html body .lpx-sidebar-menu ul ul,
html body .lpx-inner-menu,
html body .lpx-nav-menu .lpx-inner-menu {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    margin: 0.25rem 0.5rem 0.25rem 1.5rem !important;
    padding: 0.5rem 0 !important;
    border-left: 2px solid rgba(99, 102, 241, 0.3) !important;
}

/* Submenu items */
html body .lpx-sidebar-menu .nav-treeview .nav-link,
html body .lpx-sidebar-menu .menu-sub .menu-link,
html body .lpx-sidebar-menu .nav-treeview > li > a,
html body .lpx-sidebar .collapse .nav-link,
html body .nav-sidebar .nav-treeview .nav-link,
html body .lpx-sidebar-menu .submenu a,
html body .lpx-inner-menu .lpx-menu-item-link,
html body .lpx-inner-menu .lpx-inner-menu-item .lpx-menu-item-link {
    padding: 0.5rem 1rem 0.5rem 1.5rem !important;
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    border-radius: 6px !important;
}

html body .lpx-sidebar-menu .nav-treeview .nav-link:hover,
html body .lpx-sidebar-menu .menu-sub .menu-link:hover,
html body .lpx-sidebar .collapse .nav-link:hover,
html body .nav-sidebar .nav-treeview .nav-link:hover,
html body .lpx-sidebar-menu .submenu a:hover,
html body .lpx-inner-menu .lpx-menu-item-link:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #e2e8f0 !important;
}

html body .lpx-sidebar-menu .nav-treeview .nav-link.active,
html body .lpx-sidebar-menu .menu-sub .menu-link.active,
html body .lpx-sidebar .collapse .nav-link.active,
html body .nav-sidebar .nav-treeview .nav-link.active,
html body .lpx-sidebar-menu .submenu a.active,
html body .lpx-inner-menu .lpx-menu-item-link.selected {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

/* Sidebar footer */
html body .lpx-sidebar-footer,
html body .lpx-sidebar .sidebar-footer,
html body .sidebar-footer {
    background: transparent !important;
    border-top: 1px solid rgba(99, 102, 241, 0.15) !important;
    padding: 1rem !important;
}

/* Menu section headers */
html body .lpx-sidebar-menu .menu-header,
html body .lpx-sidebar-menu .nav-header,
html body .lpx-sidebar .menu-section-title,
html body .nav-sidebar .nav-header {
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 1rem 0.5rem 1rem !important;
    margin-top: 0.5rem !important;
}

/* Badge in menu */
html body .lpx-sidebar-menu .badge,
html body .lpx-sidebar .nav-link .badge,
html body .nav-sidebar .nav-link .badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 10px !important;
    margin-left: auto !important;
}

/* Sidebar toggle button */
html body .lpx-sidebar-toggle,
html body .sidebar-toggle,
html body [data-widget="pushmenu"],
html body .lpx-sidebar-toggler {
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

html body .lpx-sidebar-toggle:hover,
html body .sidebar-toggle:hover,
html body [data-widget="pushmenu"]:hover,
html body .lpx-sidebar-toggler:hover {
    color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

/* Collapsed sidebar state */
html body .sidebar-mini .lpx-sidebar-menu .nav-link span,
html body .sidebar-collapse .lpx-sidebar-menu .nav-link span,
html body .lpx-sidebar.collapsed .nav-link span {
    display: none !important;
}

html body .sidebar-mini .lpx-sidebar-menu .nav-link,
html body .sidebar-collapse .lpx-sidebar-menu .nav-link,
html body .lpx-sidebar.collapsed .nav-link {
    justify-content: center !important;
    padding: 0.75rem !important;
}

/* Remove default LeptonX green/teal colors */
html body .lpx-sidebar-menu a,
html body .lpx-sidebar .nav-link,
html body .lpx-sidebar-menu .nav-link {
    --bs-nav-link-color: #94a3b8 !important;
    --bs-link-color: #94a3b8 !important;
}

html body .lpx-sidebar-menu a.active,
html body .lpx-sidebar .nav-link.active,
html body .lpx-sidebar-menu .nav-link.active {
    --bs-nav-link-color: #ffffff !important;
    --bs-link-color: #ffffff !important;
}

/* ============================================
   LeptonXLite Theme Variables Override
   Force purple theme instead of default green
   ============================================ */
:root,
[data-bs-theme],
[data-bs-theme="light"],
[data-bs-theme="dark"],
.lpx-theme-light,
.lpx-theme-dark {
    /* Override LeptonX primary colors */
    --lpx-primary: #6366f1 !important;
    --lpx-primary-rgb: 99, 102, 241 !important;
    --lpx-primary-hover: #4f46e5 !important;
    --lpx-secondary: #8b5cf6 !important;
    --lpx-success: #10b981 !important;
    
    /* Override Bootstrap primary */
    --bs-primary: #6366f1 !important;
    --bs-primary-rgb: 99, 102, 241 !important;
    --bs-link-color: #6366f1 !important;
    
    /* Sidebar specific overrides */
    --lpx-sidemenu-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    --lpx-sidemenu-item-color: #94a3b8 !important;
    --lpx-sidemenu-item-hover-color: #ffffff !important;
    --lpx-sidemenu-item-hover-bg: rgba(99, 102, 241, 0.15) !important;
    --lpx-sidemenu-item-active-color: #ffffff !important;
    --lpx-sidemenu-item-active-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

/* Force active menu item styling - highest specificity */
html body .lpx-sidebar .lpx-sidemenu .lpx-menu-item.active > .lpx-menu-link,
html body .lpx-sidebar .lpx-sidemenu .lpx-menu-item.selected > .lpx-menu-link,
html body .lpx-sidebar .lpx-sidemenu .lpx-menu-link.active,
html body .lpx-sidebar .lpx-sidemenu .active > .lpx-menu-link,
html body .lpx-sidemenu .lpx-menu-item.active > a,
html body .lpx-sidemenu .lpx-menu-link.active,
html body .lpx-sidemenu .active .lpx-menu-link,
html body .lpx-sidemenu-container .lpx-menu-item.active .lpx-menu-link,
html body .lpx-sidebar-menu .nav-link.active,
html body .lpx-sidebar .nav-link.active,
html body .lpx-sidebar .lpx-menu-link.active,
html body [class*="lpx"] .nav-link.active,
html body [class*="lpx"] .lpx-menu-link.active,
.lpx-sidemenu .lpx-menu-item.active > .lpx-menu-link,
.lpx-sidemenu .lpx-menu-link.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    background-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}

/* Override any green/teal colors from LeptonX */
html body .lpx-sidebar .lpx-menu-link.active,
html body .lpx-sidemenu .lpx-menu-item.active > .lpx-menu-link {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    background-color: #6366f1 !important;
}

/* LeptonXLite specific menu structure */
html body .lpx-sidebar,
html body .lpx-sidemenu-container {
    background: var(--yts-bg-primary) !important;
}

html body .lpx-sidemenu {
    background: transparent !important;
}

html body .lpx-sidemenu .lpx-menu-item {
    margin: 0.125rem 0.5rem !important;
}

html body .lpx-sidemenu .lpx-menu-link,
html body .lpx-sidebar .lpx-menu-link {
    color: #94a3b8 !important;
    border-radius: 8px !important;
    padding: 0.65rem 1rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

html body .lpx-sidemenu .lpx-menu-link:hover,
html body .lpx-sidebar .lpx-menu-link:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
}

html body .lpx-sidemenu .lpx-menu-icon,
html body .lpx-sidebar .lpx-menu-icon {
    color: inherit !important;
    font-size: 1rem !important;
}

html body .lpx-sidemenu .lpx-menu-text,
html body .lpx-sidebar .lpx-menu-text {
    color: inherit !important;
}

/* Submenu styling */
html body .lpx-sidemenu .lpx-menu-item .lpx-menu-items,
html body .lpx-sidemenu .lpx-menu-sub,
html body .lpx-sidebar .collapse {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
    margin-left: 1rem !important;
    padding: 0.25rem 0 !important;
}

html body .lpx-sidemenu .lpx-menu-item .lpx-menu-items .lpx-menu-link,
html body .lpx-sidemenu .lpx-menu-sub .lpx-menu-link {
    padding: 0.5rem 1rem 0.5rem 1.5rem !important;
    font-size: 0.875rem !important;
}

/* Ensure all menu items are visible */
html body .lpx-sidebar *,
html body .lpx-sidemenu *,
html body .lpx-sidemenu-container * {
    visibility: visible !important;
}

/* Menu section titles */
html body .lpx-sidemenu .lpx-menu-item.lpx-menu-section,
html body .lpx-sidemenu-section-title {
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 1rem 1rem 0.5rem !important;
}

/* Menu arrow */
html body .lpx-sidemenu .lpx-menu-arrow,
html body .lpx-sidebar .lpx-menu-arrow {
    color: #64748b !important;
    transition: transform 0.3s ease !important;
}

html body .lpx-sidemenu .lpx-menu-item.open > .lpx-menu-link .lpx-menu-arrow,
html body .lpx-sidemenu .lpx-menu-item.show > .lpx-menu-link .lpx-menu-arrow {
    transform: rotate(90deg) !important;
}

/* ============================================
   RTL (Arabic) DataTables Footer Fix
   ABP renders the DataTables footer / header as:
     .row.dataTable_footer > .col-auto  (dt-length)
                           > .col-auto.me-auto (dt-info)
                           > .col-auto  (dt-paging)
   In RTL the Bootstrap me-auto utility must flip so the
   auto-margin gap appears on the correct side.
   ============================================ */

/* Flip me-auto margin so the gap sits between Info and Paging in RTL */
[dir="rtl"] .dataTable_footer .col-auto.me-auto,
[dir="rtl"] .row.dataTable_footer .col-auto.me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
    margin-inline-end: 0 !important;
    margin-inline-start: auto !important;
}

/* Length selector label – right-align in RTL */
[dir="rtl"] .dt-length label {
    text-align: right !important;
}

[dir="rtl"] .dt-length select {
    margin-right: 0 !important;
    margin-left: 0.5em !important;
}

/* Info text – right-align in RTL */
[dir="rtl"] .dt-info {
    text-align: right !important;
}

/* Search box – left-align in RTL */
[dir="rtl"] .dt-search {
    text-align: left !important;
}

[dir="rtl"] .dt-search input {
    margin-left: 0 !important;
    margin-right: 0.5em !important;
}

/* Pagination – push to the start (left) in RTL */
[dir="rtl"] .dt-paging ul.pagination {
    justify-content: flex-start !important;
}