/* WABA Panel UI Patch v3.3 - Dashboard overlay fix + layout alignment + dark-theme overrides + vendor dashboard styling */

/* ===== FORCE LIGHT SIDEBAR ===== */
.navbar.lw-sidebar-container,
body .navbar.lw-sidebar-container,
.navbar.lw-sidebar-container.bg-white,
nav.lw-sidebar-container {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Override dark-theme's .navbar-collapse rule */
.navbar.lw-sidebar-container .navbar-collapse,
body .navbar-collapse {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* ===== SIDEBAR TEXT: BLACK ===== */
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa,
.navbar.lw-sidebar-container .navbar-nav .nav-link,
body .lw-sidebar-container .navbar-nav .nav-link,
body .lw-sidebar-container .nav-link,
.navbar.lw-sidebar-container .nav-link span,
.navbar.lw-sidebar-container .nav-link i {
    color: #1f2937 !important;
}

/* Override dark-theme's h headings white color in sidebar */
.navbar.lw-sidebar-container h1,
.navbar.lw-sidebar-container h2,
.navbar.lw-sidebar-container h3,
.navbar.lw-sidebar-container h4,
.navbar.lw-sidebar-container h5,
.navbar.lw-sidebar-container h6,
.navbar.lw-sidebar-container .h1,
.navbar.lw-sidebar-container .h2,
.navbar.lw-sidebar-container .h3,
.navbar.lw-sidebar-container .h4,
.navbar.lw-sidebar-container .h5,
.navbar.lw-sidebar-container .h6 {
    color: #1f2937 !important;
}

/* Active item */
.navbar.lw-sidebar-container .nav-link.active,
.navbar.lw-sidebar-container .active .nav-link,
body .lw-sidebar-container .nav-link.active {
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.08) !important;
    border-radius: 6px;
}

/* Hover */
.navbar.lw-sidebar-container .nav-link:hover,
body .lw-sidebar-container .nav-link:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-radius: 6px;
}

/* Submenu */
.navbar.lw-sidebar-container .lw-expandable-nav,
.navbar.lw-sidebar-container .collapse.show,
body .lw-sidebar-container .lw-expandable-nav {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
}
.navbar.lw-sidebar-container .lw-expandable-nav .nav-link {
    color: #4b5563 !important;
}

/* Collapse arrow */
.navbar.lw-sidebar-container .nav-link[data-toggle=collapse]:after,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after {
    color: #6b7280 !important;
}

/* ===== SIDEBAR: FIXED + WIDTH + ALIGNMENT FIX ===== */
@media (min-width: 768px) {
    .navbar.lw-sidebar-container,
    .navbar-vertical.navbar-expand-md.fixed-left {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1030 !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sidebar brand/logo area — match top navbar height */
    .navbar.lw-sidebar-container .container-fluid,
    .navbar-vertical.navbar-expand-md.fixed-left .container-fluid {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Logo/brand wrapper — fixed height to align with top header */
    .navbar.lw-sidebar-container .navbar-brand,
    .navbar-vertical.navbar-expand-md.fixed-left .navbar-brand {
        display: flex !important;
        align-items: center !important;
        min-height: 82px !important;
        height: 82px !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        flex-shrink: 0 !important;
    }

    .navbar.lw-sidebar-container .navbar-brand img {
        max-height: 40px !important;
    }

    /* Sidebar collapse toggle area */
    .navbar.lw-sidebar-container > .container-fluid > span:first-child {
        display: flex !important;
        align-items: center !important;
        min-height: 82px !important;
        height: 82px !important;
        padding: 16px 24px !important;
        border-bottom: 1px solid #e5e7eb !important;
        flex-shrink: 0 !important;
    }

    /* Navigation menu area — scrollable below header */
    .navbar.lw-sidebar-container .navbar-collapse,
    .navbar-vertical.navbar-expand-md.fixed-left .navbar-collapse {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px 12px !important;
    }

    /* Search input in sidebar */
    .navbar.lw-sidebar-container .navbar-collapse input[name="sidebar_xmenu_xfilter"] {
        margin: 4px 4px 12px 4px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        font-size: 13px !important;
    }

    /* Nav items spacing */
    .navbar.lw-sidebar-container .navbar-nav .nav-item {
        margin-bottom: 2px !important;
    }
    .navbar.lw-sidebar-container .navbar-nav .nav-link {
        padding: 10px 16px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: background 0.15s ease !important;
    }

    /* ===== RIGHT PANEL: NO OVERLAP ===== */
    .lw-minimized-menu .navbar-vertical.navbar-expand-md.fixed-left + .main-content,
    .lw-minimized-menu .navbar-vertical.navbar-expand-md + .main-content,
    .navbar-vertical.navbar-expand-md.fixed-left + .main-content,
    body .main-content,
    body.lw-minimized-menu .main-content,
    .main-content {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        overflow-x: hidden !important;
    }

    /* Fixed navbar at top also needs offset */
    .lw-minimized-menu .main-content #navbar-main,
    body .main-content #navbar-main,
    #navbar-main {
        left: 250px !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        margin-left: 0 !important;
    }
    .main-content .container-fluid {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .main-content .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* ===== DASHBOARD BODY-LEVEL SECTIONS: offset for sidebar ===== */
    /* ONLY body-level elements (outside .main-content) get sidebar offset */
    body > .vendor-stats-grid,
    body > .vendor-charts-row,
    body > .vendor-trends-container,
    body > .vendor-recent-table,
    body > .row {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Elements INSIDE .main-content must NOT have extra margin */
    .main-content .vendor-stats-grid,
    .main-content .vendor-charts-row,
    .main-content .vendor-trends-container,
    .main-content .vendor-recent-table {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ===== TOP NAVBAR ALIGNMENT ===== */
body .main-content .navbar-top,
.main-content .navbar-top,
.main-content nav.navbar-top {
    background: #ffffff !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Main content top offset — push content below fixed top navbar */
body .main-content .header,
.main-content .header {
    padding-top: 100px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Pin sidebar toggle button alignment */
.main-content .navbar-top [title="Pin sidebar"] {
    margin-left: 0 !important;
    padding: 8px !important;
}

/* ===== CARDS: FORCE WHITE (override dark-theme) ===== */
body .main-content .card,
body .main-content .card-header,
.main-content .card,
.main-content .card-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    color: #1f2937 !important;
}
.main-content .card-header:first-child {
    border-radius: 12px 12px 0 0 !important;
}
.main-content .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* Card text - override dark theme white text */
body .main-content .card .text-muted {
    color: #6b7280 !important;
}
body .main-content .text-dark,
body .main-content .card .h1,
body .main-content .card .h2,
body .main-content .card .h3,
body .main-content .card .h4,
body .main-content .card .h5,
body .main-content .card h1,
body .main-content .card h2,
body .main-content .card h3,
body .main-content .card h4,
body .main-content .card h5 {
    color: #1f2937 !important;
}

/* ===== GENERAL CONTENT AREA ===== */
body .main-content,
.main-content {
    background: #f8fafc !important;
}

/* ===== Override dark theme body bg ===== */
body.lw-authenticated-page {
    background: #f8fafc !important;
    background-image: none !important;
}

/* ===== TABLES ===== */
body .main-content .table thead th,
.main-content .thead-light th {
    background: #f8fafc !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}
body .main-content .table td,
body .main-content .table th {
    border-color: #f3f4f6 !important;
    color: #374151 !important;
}

/* ===== FORMS ===== */
body .main-content .form-control,
.main-content .form-control {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
}
.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
}

/* Labels */
body .form-control-label {
    color: #374151 !important;
}

/* ===== DROPDOWNS/MODALS ===== */
body .dropdown-menu {
    background-color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}
body .dropdown-menu a {
    color: #374151 !important;
}
body .modal-content {
    background-color: #ffffff !important;
    border-radius: 14px !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    border-radius: 8px !important;
}

/* Fieldsets override */
body .main-content fieldset {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* Scrollbar - light theme */
body.lw-authenticated-page ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ===== VENDOR DASHBOARD: Quick Start Section ===== */
.vendor-quick-start {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    color: #ffffff !important;
}
.vendor-quick-start h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}
.vendor-quick-start-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-reset: step-counter !important;
}
.vendor-quick-start-list li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
    counter-increment: step-counter !important;
    color: #ffffff !important;
}
.vendor-quick-start-list li::before {
    content: counter(step-counter) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.vendor-quick-start-list a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.vendor-quick-start-list a:hover {
    color: #fee140 !important;
}

/* ===== VENDOR DASHBOARD: Alert Styling ===== */
.vendor-alert {
    display: flex !important;
    align-items: flex-start !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}
.vendor-alert.danger {
    background: #fff5f5 !important;
    border-left: 4px solid #e53e3e !important;
}
.vendor-alert.danger i {
    color: #e53e3e !important;
    font-size: 24px !important;
    margin-right: 15px !important;
    margin-top: 2px !important;
}
.vendor-alert.danger strong {
    color: #c53030 !important;
    font-size: 16px !important;
}
.vendor-alert.danger p {
    color: #4a5568 !important;
    margin-top: 4px !important;
}

/* ===== VENDOR DASHBOARD: Stat Cards ===== */
.vendor-stat-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.vendor-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    text-decoration: none !important;
}
.vendor-stat-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    font-size: 20px !important;
    color: #ffffff !important;
}
.vendor-stat-card.contacts .vendor-stat-icon { background: #f97316 !important; }
.vendor-stat-card.groups .vendor-stat-icon { background: #10b981 !important; }
.vendor-stat-card.campaigns .vendor-stat-icon { background: #ef4444 !important; }
.vendor-stat-card.scheduled-campaigns .vendor-stat-icon { background: #f97316 !important; }
.vendor-stat-card.templates .vendor-stat-icon { background: #06b6d4 !important; }
.vendor-stat-card.bot-replies .vendor-stat-icon { background: #ec4899 !important; }
.vendor-stat-card.team .vendor-stat-icon { background: #14b8a6 !important; }
.vendor-stat-card.queue .vendor-stat-icon { background: #ef4444 !important; }
.vendor-stat-card.processed .vendor-stat-icon { background: #8b5cf6 !important; }
.vendor-stat-label {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
}
.vendor-stat-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}
.vendor-stat-link {
    font-size: 13px !important;
    color: #6366f1 !important;
    margin-top: 8px !important;
}

/* ===== VENDOR DASHBOARD: Stats Grid ===== */
.vendor-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* ===== VENDOR DASHBOARD: Charts Row ===== */
.vendor-charts-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}
.vendor-chart-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #f1f5f9 !important;
}
.vendor-chart-card h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 16px !important;
}

/* ===== VENDOR DASHBOARD: Trends ===== */
.vendor-trends-container {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #f1f5f9 !important;
}

/* ===== VENDOR DASHBOARD: Recent Table ===== */
.vendor-recent-table {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #f1f5f9 !important;
}

/* ===== VENDOR DASHBOARD: Features Row ===== */
.vendor-features-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* Hide stray HTML comment text ("-->") */
.vendor-dashboard-container {
    font-size: 0;
}
.vendor-dashboard-container > * {
    font-size: 16px;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 767px) {
    .navbar.lw-sidebar-container,
    .navbar-vertical.navbar-expand-md.fixed-left,
    .navbar-vertical.navbar-expand-md,
    nav.lw-sidebar-container,
    #sidenav-main {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s !important;
    }
    .navbar.lw-sidebar-container.lw-mobile-open,
    .navbar-vertical.navbar-expand-md.fixed-left.lw-mobile-open,
    nav.lw-sidebar-container.lw-mobile-open,
    #sidenav-main.lw-mobile-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: 4px 0 30px rgba(0,0,0,0.25) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s !important;
    }
    body .main-content,
    .main-content,
    body.lw-minimized-menu .main-content,
    .lw-minimized-menu .main-content,
    .navbar-vertical.navbar-expand-md.fixed-left + .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .main-content #navbar-main,
    body .main-content #navbar-main,
    #navbar-main {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .vendor-stats-grid,
    .vendor-charts-row,
    .vendor-trends-container,
    .vendor-recent-table,
    body > .row {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .vendor-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .vendor-stat-card {
        padding: 16px !important;
    }
    .vendor-stat-value {
        font-size: 24px !important;
    }
    .vendor-quick-start {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .vendor-quick-start h3 {
        font-size: 18px !important;
    }
    .vendor-charts-row {
        grid-template-columns: 1fr !important;
    }
    .vendor-chart-card {
        padding: 16px !important;
    }
    /* Hide original toggler — external one created by JS */
    nav#sidenav-main .navbar-toggler {
        display: none !important;
    }
    /* Header compact on mobile */
    body .main-content .header,
    .main-content .header {
        padding-top: 70px !important;
    }
    body .main-content .navbar-top,
    .main-content .navbar-top {
        height: auto !important;
        min-height: auto !important;
        padding: 8px 12px !important;
    }
}
@media (max-width: 480px) {
    .vendor-stats-grid {
        grid-template-columns: 1fr !important;
    }
}