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


/* ==========================================================================
   WhatsJet 3D AURORA UI — visual-only enhancement
   Adds depth, glass, colorful accents and premium motion.
   No routes, controllers, API logic or business logic are changed.
   ========================================================================== */

:root {
    --wj-aurora-blue: #4f7cff;
    --wj-aurora-purple: #8b5cf6;
    --wj-aurora-cyan: #06b6d4;
    --wj-aurora-pink: #ec4899;
    --wj-aurora-orange: #f59e0b;
    --wj-3d-bg: #f4f7fb;
    --wj-3d-glass: rgba(255,255,255,.78);
    --wj-3d-shadow: 0 16px 45px rgba(30,41,59,.10), 0 3px 10px rgba(30,41,59,.05);
    --wj-3d-shadow-hover: 0 24px 65px rgba(30,41,59,.16), 0 8px 18px rgba(79,124,255,.10);
}

/* Premium application background */
body {
    background:
        radial-gradient(circle at 8% 8%, rgba(79,124,255,.12), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(139,92,246,.10), transparent 25%),
        radial-gradient(circle at 82% 88%, rgba(6,182,212,.08), transparent 28%),
        var(--wj-3d-bg) !important;
}

.main-content {
    background: transparent !important;
}

/* Glass / 3D sidebar */
.lw-sidebar-container {
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-right: 1px solid rgba(255,255,255,.9) !important;
    box-shadow: 8px 0 45px rgba(30,41,59,.08), inset -1px 0 0 rgba(255,255,255,.7) !important;
}

.lw-sidebar-container .navbar-brand {
    position: relative;
}

.lw-sidebar-container .navbar-brand::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 5px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--wj-aurora-blue), var(--wj-aurora-purple), var(--wj-aurora-cyan));
    opacity: .75;
}

.lw-sidebar-container .navbar-nav .nav-link {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.lw-sidebar-container .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(79,124,255,.10), rgba(139,92,246,.07), rgba(6,182,212,.08));
    opacity: 0;
    transition: opacity .2s ease;
}

.lw-sidebar-container .navbar-nav .nav-link:hover::before,
.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link::before {
    opacity: 1;
}

/* Colorful top navigation */
.main-content #navbar-main,
.main-content .navbar-top {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 10px 35px rgba(30,41,59,.06) !important;
}

/* 3D cards */
.card,
.card-stats {
    position: relative;
    background: var(--wj-3d-glass) !important;
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    border: 1px solid rgba(255,255,255,.9) !important;
    box-shadow: var(--wj-3d-shadow) !important;
    transform: translateZ(0);
    transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease;
}

.card:hover,
.card-stats:hover {
    transform: translateY(-4px);
    box-shadow: var(--wj-3d-shadow-hover) !important;
    border-color: rgba(79,124,255,.18) !important;
}

.card::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: -28px;
    height: 55px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(79,124,255,.09), transparent 70%);
    pointer-events: none;
}

/* Stat cards get different accent colors */
.card.card-stats:nth-of-type(4n+1) .icon-shape {
    background: linear-gradient(145deg, #e8efff, #dbe6ff) !important;
    color: var(--wj-aurora-blue) !important;
}
.card.card-stats:nth-of-type(4n+2) .icon-shape {
    background: linear-gradient(145deg, #f2eaff, #e9dcff) !important;
    color: var(--wj-aurora-purple) !important;
}
.card.card-stats:nth-of-type(4n+3) .icon-shape {
    background: linear-gradient(145deg, #e4fbff, #d5f6fb) !important;
    color: var(--wj-aurora-cyan) !important;
}
.card.card-stats:nth-of-type(4n+4) .icon-shape {
    background: linear-gradient(145deg, #fff4df, #ffebc4) !important;
    color: var(--wj-aurora-orange) !important;
}

.card.card-stats .icon-shape {
    box-shadow: 0 10px 22px rgba(30,41,59,.10) !important;
    border: 1px solid rgba(255,255,255,.95) !important;
}

/* Headers with aurora depth */
.header.bg-gradient-primary,
.bg-gradient-primary {
    background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,.20), transparent 22%),
        radial-gradient(circle at 88% 15%, rgba(255,255,255,.16), transparent 20%),
        linear-gradient(125deg, #2563eb 0%, #7c3aed 52%, #0891b2 100%) !important;
    box-shadow: 0 14px 38px rgba(79,124,255,.20);
}

/* 3D buttons */
.btn {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    box-shadow: 0 7px 16px rgba(30,41,59,.10);
}

.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    transition: left .55s ease;
    pointer-events: none;
}

.btn:hover::after {
    left: 130%;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 10px 22px rgba(79,124,255,.24) !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #06b6d4) !important;
    box-shadow: 0 10px 22px rgba(6,182,212,.20) !important;
}

.btn-info {
    background: linear-gradient(135deg, #06b6d4, #2563eb) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #ec4899) !important;
}

/* Inputs with elevated focus */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.03), 0 2px 8px rgba(15,23,42,.025) !important;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    border-color: rgba(79,124,255,.55) !important;
    box-shadow: 0 0 0 4px rgba(79,124,255,.11), 0 8px 24px rgba(79,124,255,.08) !important;
}

/* Tables */
.table thead th {
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.84)) !important;
}

.table tbody tr {
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.table tbody tr:hover {
    background: rgba(239,246,255,.72) !important;
    transform: translateX(2px);
    box-shadow: inset 3px 0 0 var(--wj-aurora-blue);
}

/* Badges / pills */
.badge {
    box-shadow: 0 3px 8px rgba(30,41,59,.07);
}

/* Tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    background: linear-gradient(135deg, rgba(79,124,255,.11), rgba(139,92,246,.10)) !important;
    color: #4f46e5 !important;
    box-shadow: inset 0 -2px 0 #6366f1;
}

/* Modals */
.modal-content {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 90px rgba(15,23,42,.22) !important;
}

/* Upload areas */
input[type="file"] {
    background: linear-gradient(135deg, rgba(239,246,255,.82), rgba(250,245,255,.82)) !important;
    border: 1px dashed rgba(79,124,255,.40) !important;
}

/* WhatsApp chat header retains brand identity but gets depth */
.lw-whatsapp-chat-block-container .user-bar {
    background: linear-gradient(135deg, #075e54, #128c7e, #25d366) !important;
    box-shadow: 0 8px 25px rgba(18,140,126,.18);
}

/* Scrollbar */
html > body ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #4f7cff, #06b6d4);
}

/* Dark mode: richer 3D aurora */
html[lw-theme-mode="dark"] body,
body.lw-app-theme-dark {
    background:
        radial-gradient(circle at 8% 10%, rgba(79,124,255,.16), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(139,92,246,.14), transparent 26%),
        #0b1120 !important;
}

html[lw-theme-mode="dark"] .card,
body.lw-app-theme-dark .card,
html[lw-theme-mode="dark"] .card-stats,
body.lw-app-theme-dark .card-stats {
    background: rgba(15,23,42,.82) !important;
    border-color: rgba(148,163,184,.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.25) !important;
}

html[lw-theme-mode="dark"] .form-control,
body.lw-app-theme-dark .form-control,
html[lw-theme-mode="dark"] .custom-select,
body.lw-app-theme-dark .custom-select,
html[lw-theme-mode="dark"] textarea.form-control,
body.lw-app-theme-dark textarea.form-control {
    background: rgba(15,23,42,.88) !important;
    border-color: rgba(148,163,184,.18) !important;
}

html[lw-theme-mode="dark"] .table thead th,
body.lw-app-theme-dark .table thead th {
    background: rgba(30,41,59,.90) !important;
}

html[lw-theme-mode="dark"] .table tbody tr:hover,
body.lw-app-theme-dark .table tbody tr:hover {
    background: rgba(30,41,59,.72) !important;
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .card-stats,
    .btn,
    .table tbody tr {
        transition: none !important;
    }
}


/* ==========================================================================
   WhatsJet 3D AURORA UI v2 — visibility + scrolling fix
   Fixes light-theme top-bar text contrast and restores document scrolling.
   ========================================================================== */

/* ---- Global page scrolling ------------------------------------------------
   Some Argon/layout combinations use fixed navigation and can leave the
   document itself unable to scroll. Keep the page as the scroll container.
---------------------------------------------------------------------------- */
html,
html body,
body {
    min-height: 100% !important;
}

html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#app,
.lw-authenticated-page,
.lw-authenticated-page > .wrapper,
.wrapper {
    min-height: 100vh !important;
}

.lw-authenticated-page,
.lw-authenticated-page .wrapper {
    height: auto !important;
    overflow: visible !important;
}

.main-content {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
}

/* Do not clip the page's main content with the visual card layer. */
.main-content .container-fluid {
    overflow: visible !important;
}

/* Fixed top navigation should not become the page's scroll container. */
.main-content #navbar-main,
.main-content .navbar-top {
    overflow: visible !important;
}

/* ---- Light-theme top navigation text ------------------------------------- */
body:not(.lw-app-theme-dark) .main-content #navbar-main .navbar-nav .nav-link,
body:not(.lw-app-theme-dark) .main-content .navbar-top .navbar-nav .nav-link,
html:not([lw-theme-mode="dark"]) .main-content #navbar-main .navbar-nav .nav-link,
html:not([lw-theme-mode="dark"]) .main-content .navbar-top .navbar-nav .nav-link {
    color: #344054 !important;
    text-shadow: none !important;
}

body:not(.lw-app-theme-dark) .main-content #navbar-main .navbar-nav .nav-link i,
body:not(.lw-app-theme-dark) .main-content .navbar-top .navbar-nav .nav-link i,
html:not([lw-theme-mode="dark"]) .main-content #navbar-main .navbar-nav .nav-link i,
html:not([lw-theme-mode="dark"]) .main-content .navbar-top .navbar-nav .nav-link i {
    color: #475467 !important;
}

body:not(.lw-app-theme-dark) .main-content #navbar-main .navbar-nav .nav-link:hover,
body:not(.lw-app-theme-dark) .main-content .navbar-top .navbar-nav .nav-link:hover,
html:not([lw-theme-mode="dark"]) .main-content #navbar-main .navbar-nav .nav-link:hover,
html:not([lw-theme-mode="dark"]) .main-content .navbar-top .navbar-nav .nav-link:hover {
    color: #4f46e5 !important;
    background: rgba(79,124,255,.08) !important;
}

body:not(.lw-app-theme-dark) .main-content #navbar-main .navbar-text,
body:not(.lw-app-theme-dark) .main-content .navbar-top .navbar-text,
body:not(.lw-app-theme-dark) .main-content #navbar-main .dropdown-toggle,
body:not(.lw-app-theme-dark) .main-content .navbar-top .dropdown-toggle,
html:not([lw-theme-mode="dark"]) .main-content #navbar-main .navbar-text,
html:not([lw-theme-mode="dark"]) .main-content .navbar-top .navbar-text,
html:not([lw-theme-mode="dark"]) .main-content #navbar-main .dropdown-toggle,
html:not([lw-theme-mode="dark"]) .main-content .navbar-top .dropdown-toggle {
    color: #344054 !important;
    text-shadow: none !important;
}

/* Header utilities/icons */
body:not(.lw-app-theme-dark) .main-content #navbar-main .text-white,
body:not(.lw-app-theme-dark) .main-content .navbar-top .text-white,
html:not([lw-theme-mode="dark"]) .main-content #navbar-main .text-white,
html:not([lw-theme-mode="dark"]) .main-content .navbar-top .text-white {
    color: #344054 !important;
}

/* ---- Light-theme general text safety ------------------------------------ */
body:not(.lw-app-theme-dark) .main-content .text-white,
html:not([lw-theme-mode="dark"]) .main-content .text-white {
    color: #344054 !important;
}

/* Keep intentionally white text on colorful/gradient buttons and headers. */
body:not(.lw-app-theme-dark) .main-content .btn-primary,
body:not(.lw-app-theme-dark) .main-content .btn-success,
body:not(.lw-app-theme-dark) .main-content .btn-info,
body:not(.lw-app-theme-dark) .main-content .btn-warning,
html:not([lw-theme-mode="dark"]) .main-content .btn-primary,
html:not([lw-theme-mode="dark"]) .main-content .btn-success,
html:not([lw-theme-mode="dark"]) .main-content .btn-info,
html:not([lw-theme-mode="dark"]) .main-content .btn-warning {
    color: #fff !important;
}

/* Improve readability of common body text in the light UI. */
body:not(.lw-app-theme-dark) .main-content,
html:not([lw-theme-mode="dark"]) .main-content {
    color: #344054;
}

@media (max-width: 767.98px) {
    html,
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .main-content {
        overflow: visible !important;
    }
}


/* ==========================================================================
   GLOBAL PAGE SCROLL FIX — keep the whole application scrollable
   This intentionally leaves modals/overlays to their own Bootstrap rules.
   ========================================================================== */

/* The authenticated application must grow with its content. */
html,
html body,
body,
body.lw-app-theme-light,
body.lw-app-theme-dark,
#app,
#app > div,
.lw-authenticated-page,
.lw-authenticated-page > .wrapper,
.lw-authenticated-page .wrapper,
.wrapper,
.wrapper > .main-content,
.main-content {
    height: auto !important;
    min-height: 100vh !important;
}

/* Make the document the primary vertical scroll container. */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

html body,
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

/* Some application layouts use Bootstrap's overflow-hidden class on an
   ancestor. Do not allow it to lock the page itself. */
body.overflow-hidden,
#app.overflow-hidden,
.lw-authenticated-page.overflow-hidden,
.lw-authenticated-page > .wrapper.overflow-hidden,
.wrapper.overflow-hidden,
.main-content.overflow-hidden {
    overflow: visible !important;
    overflow-y: visible !important;
}

/* Main content should never become a nested, locked scroll area. */
.main-content,
.main-content > .container-fluid,
.main-content > .container,
.main-content .container-fluid {
    overflow: visible !important;
    height: auto !important;
}

/* Keep the top bar visual, but don't let it create a clipped viewport. */
.main-content #navbar-main,
.main-content .navbar-top {
    overflow: visible !important;
}

/* Fixed sidebar can have its own navigation scroll, while page content
   remains independently scrollable. */
.lw-sidebar-container {
    max-height: 100vh;
}

/* Avoid accidental clipping from the decorative UI layer. */
.lw-authenticated-page,
.lw-authenticated-page > .wrapper,
.wrapper {
    overflow: visible !important;
}

/* Long tables/forms/cards must expand the document rather than clipping it. */
.main-content .row,
.main-content .card,
.main-content .card-body,
.main-content .tab-content,
.main-content .tab-pane {
    max-height: none !important;
}

/* Mobile: always use the document for vertical scrolling. */
@media (max-width: 991.98px) {
    html,
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #app,
    .lw-authenticated-page,
    .lw-authenticated-page > .wrapper,
    .wrapper,
    .main-content {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }
}


/* ================================================================
   GLOBAL SCROLL V2 — FINAL DOCUMENT SCROLL
   The application uses a fixed sidebar/topbar, but the document
   itself must remain the vertical scroll container on every page.
   ================================================================ */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    scrollbar-width: auto !important;
}

html::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

html::-webkit-scrollbar-track {
    background: rgba(148,163,184,.16) !important;
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #2563eb, #06b6d4) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255,255,255,.65) !important;
}

body,
body.lw-authenticated-page,
body.lw-app-theme-light,
body.lw-app-theme-dark {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

#app,
#app > div,
.lw-authenticated-page,
.lw-authenticated-page > .wrapper,
.wrapper,
.main-content,
.main-content > .container,
.main-content > .container-fluid {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* Never turn the main page into a nested scroll box. */
.main-content,
.main-content > .container,
.main-content > .container-fluid,
.main-content .row,
.main-content .tab-content,
.main-content .tab-pane,
.main-content .card,
.main-content .card-body {
    max-height: none !important;
}

/* Keep only the navigation itself independently scrollable. */
.lw-sidebar-container {
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Preserve modal scrolling when a Bootstrap modal is open. */
body.modal-open {
    overflow: hidden !important;
}

/* Long page content gets enough bottom breathing room to scroll past fixed UI. */
.main-content {
    padding-bottom: 48px !important;
}

/* Ensure fixed top navigation never becomes a clipping ancestor. */
.main-content #navbar-main {
    overflow: visible !important;
}

/* ==========================================================================
   GLOBAL SCROLL V3 — actual wheel/document scroll owner
   ========================================================================== */
html {
    height: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: auto !important;
}
html::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
html::-webkit-scrollbar-track { background: rgba(148,163,184,.16) !important; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7c3aed, #2563eb, #06b6d4) !important; border-radius: 999px !important; border: 2px solid rgba(255,255,255,.65) !important; }
body.lw-authenticated-page { height: auto !important; min-height: 100vh !important; overflow-x: hidden !important; overflow-y: visible !important; }
body.lw-authenticated-page > .main-content,
.lw-authenticated-page .main-content,
.lw-authenticated-page .main-content > .container,
.lw-authenticated-page .main-content > .container-fluid { height: auto !important; min-height: 100vh !important; max-height: none !important; overflow: visible !important; }
.main-content .card, .main-content .card-body, .main-content .row, .main-content .tab-content, .main-content .tab-pane { max-height: none !important; }
.lw-scrollable-main-card, .lw-webhook-payload-container .card-body, .lw-stripe-payment-list-container, .lw-contact-crm-block, .lw-contact-list-block { overscroll-behavior: contain; }
@media (max-width: 991.98px) {
    html, body { overflow-x: hidden !important; overflow-y: auto !important; }
    body.lw-authenticated-page, body.lw-authenticated-page > .main-content, .lw-authenticated-page .main-content { min-height: 100vh !important; height: auto !important; overflow: visible !important; }
}


/* ==========================================================================
   WhatsJet GLOBAL SCROLL V4 — remove fixed-height main cards
   The original application defines .lw-scrollable-main-card as 80vh with
   overflow-y:scroll. That creates a nested scroll box and clips long pages.
   The application shell now uses the document as the primary scroll owner.
   ========================================================================== */
.lw-scrollable-main-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* The settings/vendor/template wrappers that use this card must expand too. */
.main-content .lw-scrollable-main-card,
.main-content .lw-scrollable-main-card .card-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Keep genuine inner data widgets scrollable; only the outer page card is unlocked. */
.lw-scrollable-main-card .lw-datatable-fixed-height .dt-row,
.lw-scrollable-main-card .lw-analytic-datatable-fixed-height .dt-row,
.lw-scrollable-main-card .lw-stripe-payment-list-container,
.lw-scrollable-main-card .lw-webhook-payload-container .card-body {
    overflow: auto !important;
}

/* Compact typography V5 - visual only */
body, html { font-size: 14px !important; }
body { line-height: 1.45 !important; }
.lw-sidebar-container .navbar-nav .nav-link { font-size: 14px !important; }
.navbar, .navbar-nav, .nav-link { font-size: 14px !important; }
.card, .card-body, .form-control, .custom-select, select, textarea, button, .btn, label, .table, .table td, .table th { font-size: 14px !important; }
h1 { font-size: 1.65rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.2rem !important; }
h4 { font-size: 1.05rem !important; }
h5, h6 { font-size: .95rem !important; }
.card-header, .card-title { font-size: 14px !important; }

/* ==========================================================================
   WhatsJet Signature UI — Obsidian Emerald / Champagne
   Premium visual refresh, CSS-only. No routes, APIs, or business logic changed.
   ========================================================================== */
:root {
    --wj-signature-ink: #0b1220;
    --wj-signature-ink-2: #111c2f;
    --wj-signature-primary: #0b8f62;
    --wj-signature-primary-2: #16b978;
    --wj-signature-primary-dark: #06704c;
    --wj-signature-gold: #c9a45b;
    --wj-signature-gold-soft: rgba(201,164,91,.13);
    --wj-signature-mint: #e9fbf3;
    --wj-signature-bg: #f5f8f7;
    --wj-signature-border: rgba(15,23,42,.075);
    --wj-signature-shadow: 0 14px 42px rgba(11,18,32,.075), 0 2px 8px rgba(11,18,32,.035);
    --wj-signature-shadow-hover: 0 22px 58px rgba(11,18,32,.12), 0 6px 16px rgba(11,143,98,.08);
}

body:not(.lw-app-theme-dark) {
    background:
        radial-gradient(circle at 0% 0%, rgba(11,143,98,.085), transparent 25%),
        radial-gradient(circle at 100% 8%, rgba(201,164,91,.075), transparent 22%),
        linear-gradient(180deg, #f8faf9 0%, var(--wj-signature-bg) 48%, #f3f7f5 100%) !important;
    color: var(--wj-signature-ink) !important;
}

body:not(.lw-app-theme-dark) .main-content {
    background: transparent !important;
}

/* Subtle premium top edge */
body.lw-authenticated-page::before {
    content: "";
    position: fixed;
    z-index: 1100;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--wj-signature-primary-dark), var(--wj-signature-primary-2) 55%, var(--wj-signature-gold));
    pointer-events: none;
}

/* Sidebar */
body:not(.lw-app-theme-dark) .lw-sidebar-container {
    background: rgba(255,255,255,.88) !important;
    border-right: 1px solid rgba(11,18,32,.06) !important;
    box-shadow: 10px 0 42px rgba(11,18,32,.055), inset -1px 0 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.lw-sidebar-container .navbar-brand::after {
    left: 18px;
    right: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--wj-signature-primary), var(--wj-signature-gold)) !important;
    opacity: .85;
}

body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-link {
    color: #667085 !important;
    border: 1px solid transparent !important;
}

body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-link i {
    color: #98a2b3 !important;
}

body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-link:hover,
body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-item.active > .nav-link,
body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-link[aria-expanded="true"] {
    color: var(--wj-signature-primary-dark) !important;
    background: linear-gradient(90deg, rgba(11,143,98,.10), rgba(201,164,91,.035)) !important;
    border-color: rgba(11,143,98,.10) !important;
    box-shadow: inset 3px 0 0 var(--wj-signature-primary) !important;
}

body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-link:hover i,
body:not(.lw-app-theme-dark) .lw-sidebar-container .navbar-nav .nav-item.active > .nav-link i {
    color: var(--wj-signature-primary) !important;
}

/* Top bar */
body:not(.lw-app-theme-dark) .main-content #navbar-main,
body:not(.lw-app-theme-dark) .main-content .navbar-top {
    background: rgba(255,255,255,.76) !important;
    border-bottom: 1px solid rgba(15,23,42,.055) !important;
    box-shadow: 0 10px 34px rgba(11,18,32,.045) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

body:not(.lw-app-theme-dark) .main-content #navbar-main .navbar-nav .nav-link:hover {
    background: var(--wj-signature-mint) !important;
    color: var(--wj-signature-primary-dark) !important;
}

/* Cards */
body:not(.lw-app-theme-dark) .card,
body:not(.lw-app-theme-dark) .card-stats {
    background: rgba(255,255,255,.88) !important;
    border: 1px solid var(--wj-signature-border) !important;
    box-shadow: var(--wj-signature-shadow) !important;
    border-radius: 18px !important;
}

body:not(.lw-app-theme-dark) .card:hover,
body:not(.lw-app-theme-dark) .card-stats:hover {
    border-color: rgba(11,143,98,.12) !important;
    box-shadow: var(--wj-signature-shadow-hover) !important;
    transform: translateY(-3px);
}

body:not(.lw-app-theme-dark) .card .card-header {
    border-bottom-color: rgba(15,23,42,.055) !important;
}

/* Stat cards: clean premium accent instead of rainbow */
body:not(.lw-app-theme-dark) .card.card-stats .icon-shape,
body:not(.lw-app-theme-dark) .card-stats .icon-shape {
    background: linear-gradient(145deg, #f0fff8, #dcf8eb) !important;
    color: var(--wj-signature-primary-dark) !important;
    border: 1px solid rgba(11,143,98,.10) !important;
    box-shadow: 0 10px 24px rgba(11,143,98,.10) !important;
}

body:not(.lw-app-theme-dark) .card.card-stats::after {
    background: radial-gradient(circle, rgba(11,143,98,.13), rgba(11,143,98,0) 68%) !important;
}

/* Page hero / header */
body:not(.lw-app-theme-dark) .header.bg-gradient-primary,
body:not(.lw-app-theme-dark) .bg-gradient-primary {
    background:
        radial-gradient(circle at 12% 15%, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 88% 8%, rgba(201,164,91,.17), transparent 24%),
        linear-gradient(120deg, #062f24 0%, #0b6f4d 48%, #10a66e 100%) !important;
    box-shadow: 0 18px 45px rgba(6,112,76,.18) !important;
}

/* Primary actions */
body:not(.lw-app-theme-dark) .btn-primary {
    background: linear-gradient(135deg, var(--wj-signature-primary-dark), var(--wj-signature-primary-2)) !important;
    border-color: transparent !important;
    box-shadow: 0 9px 22px rgba(11,143,98,.20) !important;
}

body:not(.lw-app-theme-dark) .btn-primary:hover {
    background: linear-gradient(135deg, #056342, #12a86c) !important;
    box-shadow: 0 13px 28px rgba(11,143,98,.25) !important;
}

body:not(.lw-app-theme-dark) .btn-outline-primary {
    color: var(--wj-signature-primary-dark) !important;
    border: 1px solid rgba(11,143,98,.35) !important;
    background: rgba(255,255,255,.55) !important;
}

body:not(.lw-app-theme-dark) .btn-outline-primary:hover {
    color: #fff !important;
    background: var(--wj-signature-primary) !important;
    border-color: var(--wj-signature-primary) !important;
}

/* Gold accents for premium/finance surfaces */
.wj-premium-accent,
.badge-premium {
    color: #725817 !important;
    background: linear-gradient(135deg, #fff8e8, #f9edc9) !important;
    border: 1px solid rgba(201,164,91,.25) !important;
}

/* Forms */
body:not(.lw-app-theme-dark) .form-control,
body:not(.lw-app-theme-dark) .custom-select,
body:not(.lw-app-theme-dark) select.form-control,
body:not(.lw-app-theme-dark) textarea.form-control {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(15,23,42,.10) !important;
    border-radius: 11px !important;
}

body:not(.lw-app-theme-dark) .form-control:focus,
body:not(.lw-app-theme-dark) .custom-select:focus,
body:not(.lw-app-theme-dark) textarea.form-control:focus {
    border-color: rgba(11,143,98,.48) !important;
    box-shadow: 0 0 0 4px rgba(11,143,98,.09), 0 8px 22px rgba(11,143,98,.055) !important;
}

body:not(.lw-app-theme-dark) label,
body:not(.lw-app-theme-dark) legend {
    color: #344054 !important;
    font-weight: 700;
}

/* Tables */
body:not(.lw-app-theme-dark) .table thead th {
    background: #f7faf8 !important;
    color: #667085 !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
}

body:not(.lw-app-theme-dark) .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(11,143,98,.045), rgba(201,164,91,.02)) !important;
}

/* Tabs */
body:not(.lw-app-theme-dark) .nav-tabs .nav-link {
    color: #667085 !important;
}

body:not(.lw-app-theme-dark) .nav-tabs .nav-link:hover,
body:not(.lw-app-theme-dark) .nav-tabs .nav-link.active {
    color: var(--wj-signature-primary-dark) !important;
    background: var(--wj-signature-mint) !important;
}

/* Dropdowns / modals */
body:not(.lw-app-theme-dark) .dropdown-menu,
body:not(.lw-app-theme-dark) .modal-content {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(15,23,42,.07) !important;
    box-shadow: 0 24px 70px rgba(11,18,32,.16) !important;
}

body:not(.lw-app-theme-dark) .dropdown-menu .dropdown-item:hover,
body:not(.lw-app-theme-dark) .dropdown-menu .dropdown-item:focus {
    color: var(--wj-signature-primary-dark) !important;
    background: var(--wj-signature-mint) !important;
}

/* Alerts / status pills */
body:not(.lw-app-theme-dark) .alert {
    border: 1px solid rgba(15,23,42,.055) !important;
    box-shadow: 0 10px 28px rgba(11,18,32,.055) !important;
}

.badge {
    letter-spacing: .01em;
}

/* Premium scrollbars */
html > body ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0b8f62, #16b978, #c9a45b) !important;
}

/* Dark theme — obsidian with emerald glow */
html[lw-theme-mode="dark"] body,
body.lw-app-theme-dark {
    background:
        radial-gradient(circle at 8% 0%, rgba(11,143,98,.12), transparent 26%),
        radial-gradient(circle at 92% 8%, rgba(201,164,91,.07), transparent 22%),
        #080e12 !important;
    color: #e8f2ee !important;
}

html[lw-theme-mode="dark"] .main-content,
body.lw-app-theme-dark .main-content {
    background: transparent !important;
}

html[lw-theme-mode="dark"] .lw-sidebar-container,
body.lw-app-theme-dark .lw-sidebar-container {
    background: rgba(10,18,22,.92) !important;
    border-right-color: rgba(255,255,255,.055) !important;
    box-shadow: 10px 0 42px rgba(0,0,0,.22) !important;
}

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,
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 {
    color: #6fe0ad !important;
    background: linear-gradient(90deg, rgba(11,143,98,.18), rgba(201,164,91,.04)) !important;
    box-shadow: inset 3px 0 0 #16b978 !important;
}

html[lw-theme-mode="dark"] .main-content #navbar-main,
body.lw-app-theme-dark .main-content #navbar-main {
    background: rgba(9,16,20,.82) !important;
    border-bottom-color: rgba(255,255,255,.055) !important;
}

html[lw-theme-mode="dark"] .card,
html[lw-theme-mode="dark"] .card-stats,
body.lw-app-theme-dark .card,
body.lw-app-theme-dark .card-stats {
    background: rgba(16,26,30,.88) !important;
    border-color: rgba(255,255,255,.065) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.20) !important;
}

html[lw-theme-mode="dark"] .card:hover,
body.lw-app-theme-dark .card:hover {
    border-color: rgba(22,185,120,.20) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.27) !important;
}

html[lw-theme-mode="dark"] .card.card-stats .icon-shape,
body.lw-app-theme-dark .card.card-stats .icon-shape {
    background: linear-gradient(145deg, #123c2d, #0d2a21) !important;
    color: #6fe0ad !important;
    border-color: rgba(22,185,120,.18) !important;
}

html[lw-theme-mode="dark"] .form-control,
html[lw-theme-mode="dark"] .custom-select,
html[lw-theme-mode="dark"] textarea.form-control,
body.lw-app-theme-dark .form-control,
body.lw-app-theme-dark .custom-select,
body.lw-app-theme-dark textarea.form-control {
    background: #0c1519 !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #e8f2ee !important;
}

html[lw-theme-mode="dark"] .table thead th,
body.lw-app-theme-dark .table thead th {
    background: #111d21 !important;
    color: #aebdb7 !important;
}

html[lw-theme-mode="dark"] .table tbody tr:hover,
body.lw-app-theme-dark .table tbody tr:hover {
    background: rgba(11,143,98,.075) !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .card, .card-stats, .btn, .nav-link, .dropdown-item {
        transition: none !important;
    }
    .btn::after { display: none !important; }
}