/* WhatsJet Modern UI - visual layer only. No business logic changes. */
:root {
    --wj-primary: #168f55;
    --wj-primary-dark: #0e7042;
    --wj-accent: #25d366;
    --wj-ink: #172033;
    --wj-muted: #718096;
    --wj-border: #e8edf3;
    --wj-surface: #ffffff;
    --wj-surface-soft: #f7faf9;
    --wj-radius: 16px;
    --wj-shadow: 0 8px 30px rgba(22, 32, 51, .07);
    --wj-shadow-hover: 0 14px 36px rgba(22, 32, 51, .12);
}

html, body {
    font-family: "TikTok Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: -.01em;
}

body {
    background: #f5f8f7;
    color: var(--wj-ink);
}

.main-content {
    background: #f5f8f7;
    min-height: 100vh;
}

/* Sidebar */
.lw-sidebar-container {
    border: 0 !important;
    box-shadow: 5px 0 30px rgba(20, 35, 30, .06) !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(12px);
}

.lw-sidebar-container .navbar-nav .nav-link {
    margin: 3px 12px;
    padding: 11px 14px !important;
    border-radius: 12px;
    font-weight: 600;
    color: #5b6577 !important;
    transition: all .18s ease;
}

.lw-sidebar-container .navbar-nav .nav-link i {
    width: 22px;
    margin-right: 8px;
    text-align: center;
    color: #8792a5;
    transition: color .18s ease, transform .18s ease;
}

.lw-sidebar-container .navbar-nav .nav-link:hover,
.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link,
.lw-sidebar-container .navbar-nav .nav-link[aria-expanded="true"] {
    color: var(--wj-primary) !important;
    background: #eaf8f1 !important;
    box-shadow: none !important;
}

.lw-sidebar-container .navbar-nav .nav-link:hover i,
.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link i {
    color: var(--wj-primary) !important;
    transform: translateX(1px);
}

.lw-sidebar-container .navbar-brand {
    padding: 20px 18px 14px !important;
}

/* Top navigation */
.main-content .navbar-top {
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226,232,240,.8);
    box-shadow: 0 4px 20px rgba(15,23,42,.03);
}

/* Cards */
.card,
.card-stats {
    border: 1px solid var(--wj-border) !important;
    border-radius: var(--wj-radius) !important;
    box-shadow: var(--wj-shadow) !important;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover,
.card-stats:hover {
    box-shadow: var(--wj-shadow-hover) !important;
}

.card-header,
.card-footer {
    background: transparent;
}

.card-stats .card-body {
    padding: 22px !important;
}

.card-stats .card-title {
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
}

.card-stats .h2 {
    color: var(--wj-ink);
    font-size: 1.7rem !important;
    letter-spacing: -.035em;
}

.icon.icon-shape {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.bg-primary,
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--wj-primary), var(--wj-accent)) !important;
}

/* Page headers */
.header.bg-gradient-primary,
.bg-gradient-primary {
    background: linear-gradient(135deg, #117a49 0%, #25b96c 100%) !important;
}

.header-body h1,
.header-body h2,
.header-body h3 {
    font-weight: 800;
    letter-spacing: -.035em;
}

/* Buttons */
.btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    border-color: var(--wj-primary) !important;
    background: linear-gradient(135deg, var(--wj-primary), #20a960) !important;
    box-shadow: 0 6px 16px rgba(22,143,85,.18);
}

.btn-primary:hover {
    box-shadow: 0 9px 20px rgba(22,143,85,.24);
}

/* Forms */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
    min-height: 44px;
    border: 1px solid #dce4ea !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--wj-ink) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

textarea.form-control {
    min-height: 110px;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    border-color: rgba(22,143,85,.55) !important;
    box-shadow: 0 0 0 4px rgba(22,143,85,.10) !important;
}

label,
legend {
    font-weight: 700;
    color: #364152;
}

fieldset {
    border-color: var(--wj-border) !important;
    border-radius: 14px;
    background: rgba(255,255,255,.65);
}

/* Tables / DataTables */
.table-responsive {
    border-radius: 14px;
}

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 1px solid var(--wj-border) !important;
    background: #f8fafb;
    color: #687386;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td,
.table th {
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

.table tbody tr {
    transition: background .15s ease;
}

.table tbody tr:hover {
    background: #f8fcfa !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dce4ea !important;
    border-radius: 9px !important;
    padding: 7px 10px !important;
}

/* Campaigns */
#lwCampaignList_wrapper {
    padding: 4px;
}

.nav-tabs {
    border-bottom: 1px solid var(--wj-border) !important;
    gap: 6px;
    margin-bottom: 14px;
}

.nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 9px 9px 0 0 !important;
    color: #707b8d;
    font-weight: 700;
    padding: 11px 16px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    color: var(--wj-primary) !important;
    background: #eaf8f1 !important;
}

#lwCampaignList td .btn {
    margin: 2px;
    white-space: nowrap;
}

.badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: .45em .75em !important;
}

/* Alerts */
.alert {
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.05);
}

/* Modal */
.modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.20) !important;
}

.modal-header {
    border-bottom: 1px solid var(--wj-border) !important;
}

/* Upload/import areas */
input[type="file"] {
    border-radius: 11px !important;
    padding: 8px !important;
    border: 1px dashed #cbd6df !important;
    background: #fafcfc !important;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: .82rem;
    font-weight: 600;
}

/* Links */
a {
    transition: color .15s ease;
}

a:not(.btn):hover {
    color: var(--wj-primary);
}

/* Scrollbars */
html > body ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
html > body ::-webkit-scrollbar-thumb {
    background: #cbd5df;
    border-radius: 99px;
}

/* Mobile */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .card-stats .card-body {
        padding: 17px !important;
    }

    .card-stats .h2 {
        font-size: 1.45rem !important;
    }

    .table {
        min-width: 720px;
    }

    #lwCampaignList td .btn {
        display: inline-flex;
        align-items: center;
    }

    .lw-btn-block-mobile {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* Dark theme */
body.lw-app-theme-dark,
html[lw-theme-mode="dark"] body {
    background: #0e1513;
    color: #e8f0ec;
}

body.lw-app-theme-dark .main-content,
html[lw-theme-mode="dark"] .main-content {
    background: #0e1513;
}

body.lw-app-theme-dark .card,
html[lw-theme-mode="dark"] .card,
body.lw-app-theme-dark .card-stats,
html[lw-theme-mode="dark"] .card-stats,
body.lw-app-theme-dark fieldset,
html[lw-theme-mode="dark"] fieldset {
    background: #141d1a !important;
    border-color: #26342f !important;
}

body.lw-app-theme-dark .form-control,
html[lw-theme-mode="dark"] .form-control,
body.lw-app-theme-dark .custom-select,
html[lw-theme-mode="dark"] .custom-select,
body.lw-app-theme-dark textarea.form-control,
html[lw-theme-mode="dark"] textarea.form-control {
    background: #101815 !important;
    border-color: #2a3a34 !important;
    color: #e8f0ec !important;
}

body.lw-app-theme-dark .table thead th,
html[lw-theme-mode="dark"] .table thead th {
    background: #19231f;
    color: #aebbb4;
}

body.lw-app-theme-dark .table tbody tr:hover,
html[lw-theme-mode="dark"] .table tbody tr:hover {
    background: #18241f !important;
}

body.lw-app-theme-dark .lw-sidebar-container,
html[lw-theme-mode="dark"] .lw-sidebar-container {
    background: #101815 !important;
}

body.lw-app-theme-dark .lw-sidebar-container .navbar-nav .nav-link,
html[lw-theme-mode="dark"] .lw-sidebar-container .navbar-nav .nav-link {
    color: #aebbb4 !important;
}

body.lw-app-theme-dark .lw-sidebar-container .navbar-nav .nav-link:hover,
body.lw-app-theme-dark .lw-sidebar-container .navbar-nav .nav-item.active > .nav-link,
html[lw-theme-mode="dark"] .lw-sidebar-container .navbar-nav .nav-link:hover,
html[lw-theme-mode="dark"] .lw-sidebar-container .navbar-nav .nav-item.active > .nav-link {
    background: #173326 !important;
    color: #62e39a !important;
}


/* -------------------------------------------------------------------------
   WhatsJet Premium UI v2
   Visual-only layer. Keeps existing markup, routes and business logic intact.
   ------------------------------------------------------------------------- */
:root {
    --wj-surface-2: #fbfdfc;
    --wj-green-soft: rgba(37,211,102,.10);
    --wj-green-ring: rgba(37,211,102,.18);
    --wj-text-strong: #101828;
    --wj-text-soft: #667085;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Give the authenticated workspace a cleaner app-shell feel. */
.lw-authenticated-page .main-content {
    padding-bottom: 28px;
}

.lw-authenticated-page .container-fluid > .row {
    margin-left: -8px;
    margin-right: -8px;
}

.lw-authenticated-page .container-fluid > .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* Top bar */
.main-content #navbar-main {
    min-height: 68px;
    border-bottom: 1px solid rgba(226,232,240,.85) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 8px 28px rgba(16,24,40,.045) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.main-content #navbar-main .navbar-nav .nav-link {
    border-radius: 11px;
    font-weight: 650;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.main-content #navbar-main .navbar-nav .nav-link:hover {
    background: var(--wj-green-soft);
    transform: translateY(-1px);
}

/* Page heading */
.lw-page-title,
.header-body .h2,
.header-body h1,
.header-body h2,
.header-body h3 {
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

.lw-page-description {
    color: var(--wj-text-soft);
    line-height: 1.55;
}

/* Stat cards get a subtle premium highlight without changing their content. */
.card.card-stats {
    position: relative;
    isolation: isolate;
}

.card.card-stats::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -52px;
    top: -58px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,211,102,.14), rgba(37,211,102,0) 68%);
    pointer-events: none;
    z-index: -1;
}

.card.card-stats .card-body {
    position: relative;
    z-index: 1;
}

.card.card-stats .icon-shape {
    border: 1px solid rgba(37,211,102,.12);
    background: linear-gradient(145deg, #ecfff4, #dff9ea) !important;
    color: var(--wj-primary) !important;
}

/* Generic cards */
.card:not(.lw-whatsapp-chat-block-container) .card-header {
    padding-top: 18px;
    padding-bottom: 18px;
}

.card .card-header h3,
.card .card-header h4,
.card .card-header h5 {
    font-weight: 750;
    letter-spacing: -.02em;
}

/* Better table density and row separation */
.dataTables_wrapper .table,
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.dataTables_wrapper .table tbody tr,
.table tbody tr {
    border-bottom: 1px solid #eef2f1;
}

.dataTables_wrapper .table tbody tr:last-child,
.table tbody tr:last-child {
    border-bottom: 0;
}

/* Search and table controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper select,
.dataTables_wrapper input[type="search"] {
    min-height: 40px;
    background: #fff !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper input[type="search"]:focus {
    border-color: rgba(37,211,102,.55) !important;
    box-shadow: 0 0 0 4px rgba(37,211,102,.09) !important;
    outline: none;
}

/* Modern pagination */
.dataTables_wrapper .pagination .page-link,
.pagination .page-link {
    border: 0 !important;
    border-radius: 9px !important;
    font-weight: 700;
    color: #667085;
    margin: 0 2px;
    min-width: 36px;
    text-align: center;
    transition: all .15s ease;
}

.dataTables_wrapper .pagination .page-link:hover,
.pagination .page-link:hover {
    background: var(--wj-green-soft) !important;
    color: var(--wj-primary) !important;
}

/* Inputs / selects / upload controls */
.custom-file-label,
.custom-file-label::after {
    border-radius: 10px !important;
}

.custom-file-label {
    border-color: #dce4ea !important;
    min-height: 44px;
    padding: 11px 14px;
}

input[type="file"]:focus {
    outline: none;
    border-color: rgba(37,211,102,.65) !important;
    box-shadow: 0 0 0 4px rgba(37,211,102,.08);
}

/* Better dropdowns */
.dropdown-menu {
    border: 1px solid #edf1f0 !important;
    border-radius: 13px !important;
    box-shadow: 0 18px 50px rgba(16,24,40,.14) !important;
    padding: 7px !important;
}

.dropdown-menu .dropdown-item {
    border-radius: 9px;
    font-weight: 600;
    padding: 9px 12px;
    transition: background .14s ease, color .14s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--wj-green-soft) !important;
    color: var(--wj-primary) !important;
}

/* Toasts / alerts */
.mdtoast,
.alert,
.swal2-popup {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* WhatsApp conversation area */
.lw-whatsapp-chat-block-container {
    box-shadow: 0 14px 45px rgba(16,24,40,.10) !important;
}

.lw-whatsapp-chat-block-container .user-bar {
    background: linear-gradient(135deg, #0f7d48, #1cae61) !important;
}

/* Login / guest surfaces */
.lw-guest-page .card {
    box-shadow: 0 22px 60px rgba(16,24,40,.10) !important;
}

/* Mobile polish */
@media (max-width: 991.98px) {
    .main-content #navbar-main,
    body:not(.lw-minimized-menu) .main-content #navbar-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 15px !important;
    }

    .card {
        border-radius: 14px !important;
    }

    .btn {
        min-height: 40px;
    }
}

@media (max-width: 575.98px) {
    .card .card-header,
    .card .card-body {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .btn:not(.dropdown-item) {
        border-radius: 9px !important;
    }
}

/* Dark mode refinements */
html[lw-theme-mode="dark"] .main-content #navbar-main,
body.lw-app-theme-dark .main-content #navbar-main {
    background: rgba(15,24,21,.88) !important;
    border-color: #26342f !important;
}

html[lw-theme-mode="dark"] .dropdown-menu,
body.lw-app-theme-dark .dropdown-menu {
    background: #141d1a !important;
    border-color: #2a3a34 !important;
}

html[lw-theme-mode="dark"] .dropdown-menu .dropdown-item,
body.lw-app-theme-dark .dropdown-menu .dropdown-item {
    color: #d7e2dd !important;
}

html[lw-theme-mode="dark"] .dropdown-menu .dropdown-item:hover,
body.lw-app-theme-dark .dropdown-menu .dropdown-item:hover {
    background: #173326 !important;
    color: #62e39a !important;
}

html[lw-theme-mode="dark"] .table tbody tr,
body.lw-app-theme-dark .table tbody tr {
    border-bottom-color: #26342f;
}

html[lw-theme-mode="dark"] .card.card-stats .icon-shape,
body.lw-app-theme-dark .card.card-stats .icon-shape {
    background: #173326 !important;
    border-color: #28513e;
}

/* =========================================================
   5D PATCH v2 - visibility / shell fixes
   ========================================================= */

/* Keep the complete desktop sidebar dark, not only the logo area. */
#sidenav-main.lw-sidebar-container,
#sidenav-main.lw-sidebar-container.bg-white,
#sidenav-main.lw-sidebar-container .container-fluid,
#sidenav-main.lw-sidebar-container .navbar-collapse,
#sidenav-main.lw-sidebar-container .navbar-nav,
#sidenav-main.lw-sidebar-container .navbar-collapse-header,
#sidenav-main.lw-sidebar-container .navbar-collapse-header .row,
#sidenav-main.lw-sidebar-container .collapse-close,
#sidenav-main.lw-sidebar-container .collapse-brand {
    background: transparent !important;
}

#sidenav-main.lw-sidebar-container {
    background: linear-gradient(180deg,#0b1020 0%,#121a33 45%,#0d1428 100%) !important;
    color: #fff !important;
    min-height: 100vh !important;
}

#sidenav-main.lw-sidebar-container .container-fluid {
    min-height: 100vh !important;
    background: transparent !important;
}

#sidenav-main.lw-sidebar-container .navbar-collapse {
    min-height: calc(100vh - 96px) !important;
    background: transparent !important;
}

#sidenav-main.lw-sidebar-container .navbar-brand,
#sidenav-main.lw-sidebar-container .navbar-brand * {
    background: transparent !important;
}

/* Prevent inherited Bootstrap text-dark rules from making submenu icons black. */
#sidenav-main.lw-sidebar-container .text-dark,
#sidenav-main.lw-sidebar-container .nav-link,
#sidenav-main.lw-sidebar-container .nav-link-text {
    color: rgba(255,255,255,.80) !important;
}

#sidenav-main.lw-sidebar-container .nav-link i,
#sidenav-main.lw-sidebar-container .nav-link .fa,
#sidenav-main.lw-sidebar-container .nav-link .fas,
#sidenav-main.lw-sidebar-container .nav-link .far,
#sidenav-main.lw-sidebar-container .nav-link .fab {
    color: rgba(255,255,255,.68) !important;
}

#sidenav-main.lw-sidebar-container .nav-item.active > .nav-link,
#sidenav-main.lw-sidebar-container .nav-link.active,
#sidenav-main.lw-sidebar-container .nav-link[aria-expanded="true"] {
    color: #fff !important;
    background: linear-gradient(135deg,#6857ee 0%,#4b78ff 58%,#00b8df 100%) !important;
    box-shadow: 0 14px 30px rgba(78,86,230,.34), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

#sidenav-main.lw-sidebar-container .nav-item.active > .nav-link i,
#sidenav-main.lw-sidebar-container .nav-link.active i,
#sidenav-main.lw-sidebar-container .nav-link[aria-expanded="true"] i {
    color: #fff !important;
}

/* Expandable submenu must remain readable against the dark sidebar. */
#sidenav-main.lw-sidebar-container .lw-expandable-nav,
#sidenav-main.lw-sidebar-container .lw-expandable-nav > .nav,
#sidenav-main.lw-sidebar-container .lw-expandable-nav .nav-item {
    background: transparent !important;
}

#sidenav-main.lw-sidebar-container .lw-expandable-nav .nav-link {
    color: rgba(255,255,255,.68) !important;
    background: transparent !important;
}

#sidenav-main.lw-sidebar-container .lw-expandable-nav .nav-link:hover,
#sidenav-main.lw-sidebar-container .lw-expandable-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
}

/* Top navigation: force readable dark text on the glass-white header. */
.main-content #navbar-main,
.main-content #navbar-main.navbar-top {
    background: rgba(255,255,255,.82) !important;
    color: #172033 !important;
    min-height: 68px !important;
    z-index: 1000 !important;
}

.main-content #navbar-main .navbar-nav .nav-link,
.main-content #navbar-main .navbar-nav .nav-link span,
.main-content #navbar-main .navbar-nav .nav-link-text,
.main-content #navbar-main .navbar-text,
.main-content #navbar-main .text-white,
.main-content #navbar-main .text-light {
    color: #344054 !important;
}

.main-content #navbar-main .navbar-nav .nav-link:hover {
    color: #4f46e5 !important;
    background: rgba(105,87,232,.08) !important;
}

/* Keep the page content below the fixed top bar and avoid accidental clipping. */
.lw-authenticated-page .main-content {
    min-height: 100vh !important;
    overflow: visible !important;
}

.lw-authenticated-page .main-content .container-fluid {
    overflow: visible !important;
}

/* Do not let the new 5D pseudo strips cover card content. */
.card::before,
.card-stats::before {
    pointer-events: none !important;
}

/* More compact, readable 5D stat cards on the central console. */
.card.card-stats .card-body,
.card-stats .card-body {
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile sidebar: retain the dark surface when Bootstrap toggles collapse. */
@media (max-width: 991.98px) {
    #sidenav-main.lw-sidebar-container,
    #sidenav-main.lw-sidebar-container .navbar-collapse,
    #sidenav-main.lw-sidebar-container .container-fluid {
        background: linear-gradient(180deg,#0b1020,#121a33 55%,#0d1428) !important;
    }
}