/* ============================================
   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
   ============================================ */
.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: fixed !important;
}

/* Allow horizontal scrolling and show full cell content (no truncation)
   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;
}

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

/* Ensure cells are not clipped so horizontal scroll reveals full content */
.dataTables_wrapper table.dataTable td,
.dataTables_wrapper table.dataTable th,
.yts-table-container table td,
.yts-table-container table th {
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 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;
}

.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;
}

.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: visible !important;
    text-overflow: clip !important;
}


/* 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 .dataTables_scrollBody,
#CustomersTable_wrapper .dataTables_scrollBody table,
#CustomersTable_wrapper .card,
#CustomersTable_wrapper .card-body,
.dataTables_wrapper,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody,
.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;
}

/* 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 {
    table-layout: fixed !important;
    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;
}

.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;
}

/* ============================================
   Action Buttons (Icon Style)
   ============================================ */
.yts-action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.yts-action-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: 0.875rem;
}

.yts-action-btn:hover {
    transform: scale(1.15);
}

.yts-action-btn-view {
    background: linear-gradient(135deg, var(--yts-info) 0%, #0891b2 100%);
    color: white;
}

.yts-action-btn-view:hover {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.yts-action-btn-edit {
    background: linear-gradient(135deg, var(--yts-warning) 0%, #d97706 100%);
    color: white;
}

.yts-action-btn-edit:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.yts-action-btn-delete {
    background: linear-gradient(135deg, var(--yts-danger) 0%, #dc2626 100%);
    color: white;
}

.yts-action-btn-delete:hover {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.yts-action-btn-pay {
    background: linear-gradient(135deg, #0070ba 0%, #003087 100%);
    color: white;
}

.yts-action-btn-pay:hover {
    box-shadow: 0 0 20px rgba(0, 112, 186, 0.5);
}

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

.yts-action-btn-success:hover {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* Tooltip for action buttons */
.yts-action-btn[title] {
    position: relative;
}

.yts-action-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yts-bg-secondary);
    color: var(--yts-text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--yts-radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    margin-bottom: 8px;
    z-index: 1000;
    box-shadow: var(--yts-shadow-sm);
    border: 1px solid var(--yts-border);
}

.yts-action-btn[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--yts-bg-secondary);
    margin-bottom: -4px;
    z-index: 1001;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .yts-container {
        padding: 1rem;
    }
    
    .yts-page-header {
        padding: 1.5rem;
    }
    
    .yts-page-header .yts-title {
        font-size: 1.5rem;
    }
    
    .yts-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .yts-filters-grid {
        grid-template-columns: 1fr;
    }
    
    .yts-flex-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .yts-table-container {
        overflow-x: auto;
    }
}

/* ============================================
   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;
}

/* ============================================
   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;
}

/* ============================================
   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-secondary) !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-secondary) !important;
    border-top: 1px solid var(--yts-border) !important;
    color: var(--yts-text-muted) !important;
}

/* ABP Navbar Override */
.lpx-topbar {
    background: var(--yts-bg-secondary) !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: linear-gradient(180deg, var(--yts-bg-secondary) 0%, #0d1321 100%) !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-secondary) !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,
html body .lpx-aside,
html body aside.lpx-sidebar,
html body .lpx-sidebar-container,
html body [class*="lpx-sidebar"],
html body .sidebar,
html body aside {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    border-right: 1px solid rgba(99, 102, 241, 0.2) !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 {
    background: transparent !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15) !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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !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;
}