/* =====================================================================
   LW Premium Theme — WhatsApp SaaS Design System
   Design tokens + premium components. Layered on top of Argon.
   Loaded last in app.blade.php so its rules win specificity ties.
   Scoped under .lw-premium-* utility wrappers where possible to avoid
   leaking into legacy pages that haven't been redesigned yet.
   ===================================================================== */

/* -------------------------------------------------- Design tokens -- */
:root {
    --lw-green-50:  #E7FFF6;
    --lw-green-100: #D1FAE5;
    --lw-green-200: #A7F3D0;
    --lw-green-300: #6EE7B7;
    --lw-green-400: #34D399;
    --lw-green-500: #00A884; /* primary brand */
    --lw-green-600: #009070;
    --lw-green-700: #075E54; /* dark brand */
    --lw-green-800: #054640;
    --lw-green-900: #033129;
    --lw-accent:    #25D366; /* WhatsApp accent */

    --lw-ink-900: #0B1F1B;
    --lw-ink-800: #102F28;
    --lw-ink-700: #1F2937;
    --lw-ink-500: #4B5563;
    --lw-ink-400: #6B7280;
    --lw-ink-300: #9CA3AF;
    --lw-ink-200: #E5E7EB;
    --lw-ink-100: #F1F5F4;
    --lw-ink-50:  #F8FBFA;

    --lw-danger:  #EF4444;
    --lw-warn:    #F59E0B;
    --lw-info:    #3B82F6;

    --lw-radius-sm: 8px;
    --lw-radius-md: 12px;
    --lw-radius-lg: 16px;
    --lw-radius-xl: 22px;
    --lw-radius-2xl: 28px;
    --lw-radius-pill: 9999px;

    --lw-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --lw-shadow-sm: 0 4px 12px rgba(15, 23, 42, .06);
    --lw-shadow-md: 0 12px 28px rgba(15, 23, 42, .08);
    --lw-shadow-lg: 0 24px 56px rgba(15, 23, 42, .12);
    --lw-shadow-xl: 0 36px 80px rgba(7, 94, 84, .22);
    --lw-shadow-glow: 0 18px 42px rgba(0, 168, 132, .28);

    --lw-grad-primary: linear-gradient(135deg, #00A884 0%, #25D366 100%);
    --lw-grad-deep:    linear-gradient(135deg, #075E54 0%, #00A884 60%, #25D366 100%);
    --lw-grad-mint:    linear-gradient(135deg, #E7FFF6 0%, #D1FAE5 100%);
    --lw-grad-soft:    linear-gradient(180deg, #FFFFFF 0%, #F4FBF8 100%);
    --lw-grad-glass:   linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.62));

    --lw-ease: cubic-bezier(.22, 1, .36, 1);
    --lw-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

    --lw-font: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Nunito", sans-serif;
}

/* -------------------------------------------------- Reusable utility classes -- */
.lw-glass-card {
    background: var(--lw-grad-glass);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: var(--lw-radius-2xl);
    box-shadow: var(--lw-shadow-lg);
}

.lw-soft-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--lw-radius-xl);
    box-shadow: var(--lw-shadow-sm);
    transition: transform .22s var(--lw-ease), box-shadow .22s var(--lw-ease), border-color .22s var(--lw-ease);
}
.lw-soft-card:hover {
    border-color: rgba(0, 168, 132, .28);
    box-shadow: var(--lw-shadow-md);
    transform: translateY(-2px);
}

/* Premium gradient primary button */
.btn.lw-btn-primary,
.lw-btn-primary {
    align-items: center;
    background: var(--lw-grad-primary);
    background-size: 180% 180%;
    background-position: 0% 50%;
    border: 0;
    border-radius: var(--lw-radius-md);
    box-shadow: 0 14px 30px rgba(0, 168, 132, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff !important;
    display: inline-flex;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: .01em;
    min-height: 44px;
    padding: .65rem 1.25rem;
    position: relative;
    transition: background-position .5s var(--lw-ease), transform .18s var(--lw-ease), box-shadow .22s var(--lw-ease);
}
.btn.lw-btn-primary::after,
.lw-btn-primary::after {
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .35s var(--lw-ease);
    pointer-events: none;
}
.btn.lw-btn-primary:hover,
.lw-btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 22px 44px rgba(0, 168, 132, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
    transform: translateY(-1px);
}
.btn.lw-btn-primary:hover::after,
.lw-btn-primary:hover::after { opacity: 1; }
.btn.lw-btn-primary:disabled,
.lw-btn-primary:disabled {
    background: linear-gradient(135deg, #c8efe2, #a7e8d4);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .8;
    transform: none;
}

.lw-btn-outline {
    background: #fff;
    border: 1.5px solid rgba(0, 168, 132, .35);
    border-radius: var(--lw-radius-md);
    color: var(--lw-green-700) !important;
    font-weight: 650;
    min-height: 44px;
    padding: .55rem 1.15rem;
    transition: all .22s var(--lw-ease);
}
.lw-btn-outline:hover {
    background: var(--lw-green-50);
    border-color: var(--lw-green-500);
    box-shadow: 0 10px 24px rgba(0, 168, 132, .14);
    transform: translateY(-1px);
}

.lw-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 0;
    border-radius: var(--lw-radius-md);
    box-shadow: 0 12px 26px rgba(239, 68, 68, .28);
    color: #fff !important;
    font-weight: 650;
    min-height: 44px;
    padding: .55rem 1.15rem;
    transition: all .22s var(--lw-ease);
}
.lw-btn-danger:hover {
    box-shadow: 0 18px 38px rgba(239, 68, 68, .36);
    transform: translateY(-1px);
}

/* Premium status badges */
.lw-badge {
    align-items: center;
    border-radius: var(--lw-radius-pill);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 700;
    gap: 6px;
    letter-spacing: .02em;
    padding: 4px 10px;
    text-transform: capitalize;
}
.lw-badge::before {
    background: currentColor;
    border-radius: var(--lw-radius-pill);
    box-shadow: 0 0 0 3px currentColor;
    content: "";
    height: 6px;
    opacity: .35;
    width: 6px;
}
.lw-badge--success { background: #DCFCE7; color: #15803D; }
.lw-badge--info    { background: #DBEAFE; color: #1D4ED8; }
.lw-badge--warn    { background: #FEF3C7; color: #B45309; }
.lw-badge--danger  { background: #FEE2E2; color: #B91C1C; }
.lw-badge--neutral { background: #F1F5F9; color: #475569; }
.lw-badge--brand   { background: var(--lw-green-50); color: var(--lw-green-700); }

/* Premium input fields */
.lw-premium-input,
.lw-premium-input-group .form-control {
    background: rgba(255, 255, 255, .85);
    border: 1.5px solid rgba(15, 23, 42, .08);
    border-radius: var(--lw-radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    color: var(--lw-ink-800);
    font-size: .95rem;
    font-weight: 500;
    height: 50px;
    padding: .65rem 1rem;
    transition: all .22s var(--lw-ease);
    width: 100%;
}
.lw-premium-input:focus,
.lw-premium-input-group .form-control:focus {
    background: #fff;
    border-color: var(--lw-green-500);
    box-shadow: 0 0 0 4px rgba(0, 168, 132, .14), 0 4px 14px rgba(0, 168, 132, .10);
    outline: 0;
}
.lw-premium-input::placeholder { color: var(--lw-ink-300); }

/* -------------------------------------------------- Premium Login (Split Stage) -- */
html.lw-login-premium-html,
html.lw-login-premium-html body.lw-login-premium-page,
body.lw-login-premium-page,
body.lw-guest-page.lw-login-premium-page {
    background: #0a3d35 !important;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}
.lw-login-premium-page .header,
.lw-login-premium-page .main-content > .navbar-top { display: none; }
.lw-login-premium-page .main-content {
    padding: 0;
    margin-left: 0 !important;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.lw-login-stage {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* ===== Hero panel (left) ===== */
.lw-login-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 56px;
    color: #fff;
    background:
        radial-gradient(ellipse at 18% 8%,  rgba(37, 211, 102, .28), transparent 55%),
        radial-gradient(ellipse at 92% 92%, rgba(0, 168, 132, .35), transparent 55%),
        linear-gradient(135deg, #033129 0%, #054640 28%, #075E54 60%, #00A884 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    max-height: 100vh;
}
.lw-login-hero__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 100%);
}
.lw-login-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.lw-login-hero__glow--a { background: rgba(37, 211, 102, .35); width: 460px; height: 460px; top: -140px; left: -140px; }
.lw-login-hero__glow--b { background: rgba(255, 255, 255, .15); width: 380px; height: 380px; bottom: -140px; right: -120px; }

.lw-login-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lw-login-hero__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lw-login-hero__logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    backdrop-filter: blur(10px);
}
.lw-login-hero__logo-img { max-height: 40px; max-width: 160px; object-fit: contain; }
.lw-login-hero__name {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: #fff;
}

.lw-login-hero__pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #D1FAE5;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    margin-bottom: 14px;
}
.lw-login-hero__pill i { color: #6EE7B7; }

.lw-login-hero__copy h2 {
    font-size: 2.1rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: #fff;
    background: linear-gradient(120deg, #fff 0%, #D1FAE5 60%, #6EE7B7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lw-login-hero__copy p {
    color: rgba(255, 255, 255, .78);
    font-size: .96rem;
    line-height: 1.55;
    margin: 0;
    max-width: 460px;
}

.lw-login-hero__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lw-login-hero__features li {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 10px 14px;
    backdrop-filter: blur(10px);
    transition: transform .25s var(--lw-ease), background .25s var(--lw-ease), border-color .25s var(--lw-ease);
}
.lw-login-hero__features li:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18);
    transform: translateX(4px);
}
.lw-feat__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--lw-grad-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 10px 22px rgba(37, 211, 102, .28);
    flex-shrink: 0;
}
.lw-login-hero__features strong {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.lw-login-hero__features small {
    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
}

.lw-login-hero__stats {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.lw-login-hero__stats > div { display: flex; flex-direction: column; }
.lw-login-hero__stats strong {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1;
}
.lw-login-hero__stats span {
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 5px;
}
.lw-login-hero__divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .18);
}

/* Floating WhatsApp bubbles (scoped to hero) */
.lw-login-hero .lw-login-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.lw-login-bubble {
    position: absolute;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px 18px 18px 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 13px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
    animation: lw-float 8s ease-in-out infinite;
    white-space: nowrap;
}
.lw-login-bubble i { color: var(--lw-green-300); margin-right: 6px; }
.lw-login-bubble--1 { top: 4%;   right: 3%; animation-delay: 0s; }
.lw-login-bubble--2 { top: 4%;   left: 3%;  animation-delay: 1.4s; border-radius: 18px 18px 4px 18px; }
.lw-login-bubble--3 { bottom: 4%; right: 3%; animation-delay: 2.8s; }
.lw-login-bubble--4 { bottom: 4%; left: 3%;  animation-delay: 4.2s; border-radius: 18px 18px 4px 18px; }
@media (max-width: 1280px) {
    .lw-login-hero .lw-login-bubbles { display: none; }
}
@keyframes lw-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-12px) rotate(1deg); }
}

/* ===== Form panel (right) ===== */
.lw-login-panel {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF8 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    position: relative;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.lw-login-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(7, 94, 84, .10), 0 8px 24px rgba(15, 23, 42, .04);
    padding: 32px 38px 28px;
    position: relative;
}

.lw-login-brand {
    text-align: center;
    margin-bottom: 20px;
}
.lw-login-brand-img {
    max-height: 44px;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 14px;
}
.lw-login-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--lw-grad-primary);
    color: #fff;
    font-size: 26px;
    margin-bottom: 14px;
    box-shadow: 0 14px 30px rgba(0, 168, 132, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lw-login-brand h1 {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--lw-ink-900);
    letter-spacing: -.015em;
    margin: 0 0 4px;
}
.lw-login-brand p {
    font-size: .92rem;
    color: var(--lw-ink-400);
    margin: 0;
}

/* Floating-label fields */
.lw-login-card .form-group.lw-field { margin-bottom: 16px; }
.lw-field { position: relative; }
.lw-field__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lw-ink-300);
    font-size: 14px;
    pointer-events: none;
    transition: color .22s var(--lw-ease), top .22s var(--lw-ease), transform .22s var(--lw-ease), font-size .22s var(--lw-ease), opacity .22s var(--lw-ease);
    z-index: 2;
}
.lw-field__input.form-control {
    width: 100%;
    height: 60px;
    background: #F8FBFA;
    border: 1.5px solid #E5E7EB;
    border-radius: 14px;
    padding: 22px 48px 8px 44px !important;
    font-size: .95rem;
    font-weight: 500;
    color: var(--lw-ink-800);
    transition: all .22s var(--lw-ease);
    box-shadow: none;
}
.lw-field--password .lw-field__input.form-control { padding-right: 56px !important; }
.lw-field:focus-within .lw-field__icon,
.lw-field:has(.lw-field__input:not(:placeholder-shown)) .lw-field__icon,
.lw-field:has(.lw-field__input:-webkit-autofill) .lw-field__icon,
.lw-field:has(.lw-field__input:autofill) .lw-field__icon {
    top: 12px;
    transform: translateY(0) scale(.85);
    opacity: .85;
}
.lw-field__input.form-control:focus {
    background: #fff;
    border-color: var(--lw-green-500);
    box-shadow: 0 0 0 4px rgba(0, 168, 132, .12);
    outline: 0;
}
.lw-field:focus-within .lw-field__icon { color: var(--lw-green-500); }
.lw-field__label {
    position: absolute;
    left: 44px;
    top: 19px;
    color: var(--lw-ink-400);
    font-size: .92rem;
    font-weight: 500;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .2s var(--lw-ease), color .2s var(--lw-ease);
    background: transparent;
    margin: 0;
    padding: 0;
}
.lw-field__input.form-control:focus + .lw-field__label,
.lw-field__input.form-control:not(:placeholder-shown) + .lw-field__label,
.lw-field__input.form-control:-webkit-autofill + .lw-field__label,
.lw-field__input.form-control:autofill + .lw-field__label {
    transform: translateY(-12px) scale(.78);
    color: var(--lw-green-700);
    font-weight: 650;
}
.lw-field__input.form-control:-webkit-autofill,
.lw-field__input.form-control:-webkit-autofill:hover,
.lw-field__input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #F8FBFA inset;
    -webkit-text-fill-color: var(--lw-ink-800);
    transition: background-color 9999s ease-in-out 0s;
}
.lw-field.is-invalid .lw-field__input.form-control,
.lw-field__input.form-control.is-invalid {
    border-color: var(--lw-danger);
    background: #FFF5F5;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .10);
}
.lw-field.is-invalid .lw-field__icon,
.lw-field.is-invalid:focus-within .lw-field__icon { color: var(--lw-danger); }
.lw-field__hint {
    display: block;
    color: var(--lw-ink-400);
    font-size: .76rem;
    margin-top: 6px;
    padding-left: 4px;
}
.lw-field__toggle {
    position: absolute;
    right: 6px;
    top: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--lw-ink-300);
    border-radius: 10px;
    cursor: pointer;
    transition: color .2s var(--lw-ease), background .2s var(--lw-ease);
    z-index: 3;
}
.lw-field__toggle:hover { color: var(--lw-green-600); background: rgba(0, 168, 132, .08); }
.lw-field__toggle:focus-visible { outline: 2px solid var(--lw-green-500); outline-offset: 2px; }

/* Login meta row */
.lw-login-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin: 12px 0 18px;
}
.lw-login-meta .custom-control { padding-left: 0; }
.lw-login-meta .custom-control-label {
    color: var(--lw-ink-500) !important;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 550;
    padding-left: 28px;
    position: relative;
}
.lw-login-meta .custom-control-label::before {
    background: #fff;
    border: 1.5px solid var(--lw-ink-200);
    border-radius: 6px;
    height: 18px;
    left: 0;
    top: 2px;
    transition: all .2s var(--lw-ease);
    width: 18px;
}
.lw-login-meta .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--lw-grad-primary);
    border-color: var(--lw-green-500);
    box-shadow: 0 6px 14px rgba(0, 168, 132, .25);
}
.lw-login-meta a { color: var(--lw-green-700) !important; font-size: .88rem; font-weight: 600; transition: color .18s ease; }
.lw-login-meta a:hover { color: var(--lw-green-500) !important; text-decoration: none; }

/* Submit button */
.lw-login-card .btn.lw-btn-primary,
.lw-login-card .lw-btn-primary {
    font-size: 1rem;
    height: 54px;
    width: 100%;
    border-radius: 14px;
    letter-spacing: 0;
}
.lw-login-submit i { transition: transform .22s var(--lw-ease); margin-left: 4px; }
.lw-login-submit:hover i { transform: translateX(4px); }

/* Divider */
.lw-login-divider {
    align-items: center;
    color: var(--lw-ink-300);
    display: flex;
    font-size: .72rem;
    font-weight: 650;
    gap: 12px;
    letter-spacing: .14em;
    margin: 24px 0 16px;
    text-transform: uppercase;
}
.lw-login-divider::before, .lw-login-divider::after {
    background: linear-gradient(90deg, transparent, var(--lw-ink-200), transparent);
    content: "";
    flex: 1;
    height: 1px;
}

/* Social */
.lw-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lw-social-grid > :only-child { grid-column: 1 / -1; }
.lw-social-btn {
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--lw-ink-200);
    border-radius: 12px;
    color: var(--lw-ink-700) !important;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 600;
    gap: 8px;
    height: 46px;
    justify-content: center;
    text-decoration: none;
    transition: all .22s var(--lw-ease);
    width: 100%;
}
.lw-social-btn:hover {
    border-color: var(--lw-green-500);
    box-shadow: 0 10px 24px rgba(0, 168, 132, .12);
    text-decoration: none;
    transform: translateY(-1px);
}
.lw-social-btn--google i { color: #DB4437; }
.lw-social-btn--facebook i { color: #1877F2; }

/* Footer */
.lw-login-foot {
    border-top: 1px solid var(--lw-ink-200);
    color: var(--lw-ink-400);
    font-size: .9rem;
    margin-top: 24px;
    padding-top: 20px;
    text-align: center;
}
.lw-login-foot a { color: var(--lw-green-700) !important; font-weight: 700; text-decoration: none; }
.lw-login-foot a:hover { color: var(--lw-green-500) !important; }

/* Demo block */
.lw-login-demo {
    background: linear-gradient(135deg, var(--lw-green-50) 0%, #fff 100%);
    border: 1px dashed var(--lw-green-300);
    border-radius: 14px;
    margin-bottom: 22px;
    padding: 14px;
    text-align: center;
}
.lw-login-demo small {
    color: var(--lw-green-700);
    display: block;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: .68rem;
}
.lw-login-demo .btn {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--lw-green-300);
    border-radius: 10px;
    color: var(--lw-green-700) !important;
    font-size: .78rem;
    font-weight: 650;
    margin: 4px;
    padding: 7px 12px;
    transition: all .2s var(--lw-ease);
}
.lw-login-demo .btn:hover {
    background: var(--lw-green-500);
    border-color: var(--lw-green-500);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Trust line below card */
.lw-login-trust {
    margin: 14px 0 0;
    color: var(--lw-ink-400);
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lw-login-trust i { color: var(--lw-green-500); }

/* ===== Responsive ===== */
@media (max-width: 1023px) {
    html.lw-login-premium-html,
    html.lw-login-premium-html body.lw-login-premium-page,
    body.lw-login-premium-page,
    body.lw-guest-page.lw-login-premium-page {
        height: auto;
        max-height: none;
        overflow: auto;
        background:
            radial-gradient(circle at 12% 10%, rgba(37, 211, 102, .25), transparent 38%),
            radial-gradient(circle at 88% 90%, rgba(7, 94, 84, .22), transparent 42%),
            linear-gradient(135deg, #0a3d35 0%, #075E54 35%, #00A884 100%) !important;
    }
    .lw-login-premium-page .main-content {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .lw-login-stage {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .lw-login-hero { display: none; }
    .lw-login-panel {
        background: transparent;
        height: auto;
        min-height: 100vh;
        max-height: none;
        overflow: visible;
        padding: 32px;
    }
    .lw-login-card {
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        box-shadow: 0 40px 90px rgba(3, 49, 41, .35);
    }
    .lw-login-trust { color: rgba(255, 255, 255, .75); }
    .lw-login-trust i { color: #6EE7B7; }
}
@media (max-width: 575px) {
    .lw-login-card { padding: 32px 22px 28px; border-radius: 20px; }
    .lw-login-brand h1 { font-size: 1.4rem; }
    .lw-login-panel { padding: 32px 16px; }
}

/* -------------------------------------------------- Premium dashboard polish -- */
/* Refines the existing .lw-saas-dashboard markup without restructuring it. */
.lw-authenticated-page .lw-saas-dashboard .lw-kpi-card,
.lw-authenticated-page .lw-saas-dashboard .lw-panel {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--lw-radius-xl);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
    transition: transform .22s var(--lw-ease), box-shadow .22s var(--lw-ease), border-color .22s var(--lw-ease);
}
.lw-authenticated-page .lw-saas-dashboard .lw-kpi-card:hover,
.lw-authenticated-page .lw-saas-dashboard .lw-panel:hover {
    border-color: rgba(0, 168, 132, .28);
    box-shadow: 0 28px 56px rgba(15, 23, 42, .10), 0 0 0 1px rgba(0, 168, 132, .08);
    transform: translateY(-3px);
}
.lw-authenticated-page .lw-saas-dashboard .lw-kpi-icon {
    background: var(--lw-green-50);
    border: 1px solid var(--lw-green-200);
    color: var(--lw-green-600);
}
.lw-authenticated-page .lw-saas-dashboard .lw-export-button {
    background: var(--lw-grad-primary);
    border: 0;
    box-shadow: 0 14px 30px rgba(0, 168, 132, .32);
    color: #fff !important;
    font-weight: 700;
}
.lw-authenticated-page .lw-saas-dashboard .lw-export-button:hover {
    box-shadow: 0 22px 44px rgba(0, 168, 132, .40);
    transform: translateY(-2px);
}
.lw-authenticated-page .lw-saas-dashboard .lw-kpi-value {
    background: linear-gradient(135deg, #0B1F1B 0%, #075E54 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------- Loaders -- */
.lw-loader-page {
    align-items: center;
    background: linear-gradient(135deg, #ECFDF5, #F8FBFA);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 9999;
}
.lw-loader-spinner {
    border: 4px solid rgba(0, 168, 132, .15);
    border-radius: 50%;
    border-top-color: var(--lw-green-500);
    height: 56px;
    width: 56px;
    animation: lw-spin .8s linear infinite;
}
@keyframes lw-spin { to { transform: rotate(360deg); } }

.lw-typing-dots {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}
.lw-typing-dots span {
    background: var(--lw-green-500);
    border-radius: 50%;
    height: 8px;
    width: 8px;
    animation: lw-bounce 1.2s ease-in-out infinite;
}
.lw-typing-dots span:nth-child(2) { animation-delay: .15s; }
.lw-typing-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes lw-bounce {
    0%, 80%, 100% { opacity: .3; transform: translateY(0); }
    40%           { opacity: 1;  transform: translateY(-6px); }
}

.lw-skeleton {
    background: linear-gradient(90deg, #eef2f0 25%, #f7faf8 50%, #eef2f0 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    display: block;
    animation: lw-shimmer 1.4s ease-in-out infinite;
}
.lw-skeleton--text  { height: 12px; width: 100%; margin: 6px 0; }
.lw-skeleton--title { height: 18px; width: 65%; margin: 8px 0; }
.lw-skeleton--card  { border-radius: var(--lw-radius-xl); height: 168px; width: 100%; }
.lw-skeleton--avatar{ border-radius: 50%; height: 44px; width: 44px; }
@keyframes lw-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Button loading state */
.lw-btn-primary.is-loading,
.btn.lw-btn-primary.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.lw-btn-primary.is-loading::before,
.btn.lw-btn-primary.is-loading::before {
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    border-top-color: #fff;
    content: "";
    height: 20px;
    left: 50%;
    margin: -10px 0 0 -10px;
    position: absolute;
    top: 50%;
    width: 20px;
    animation: lw-spin .7s linear infinite;
}

/* -------------------------------------------------- Empty states -- */
.lw-empty-state {
    align-items: center;
    background: var(--lw-grad-soft);
    border: 1px dashed rgba(0, 168, 132, .28);
    border-radius: var(--lw-radius-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 28px;
    text-align: center;
}
.lw-empty-state__icon {
    align-items: center;
    background: var(--lw-grad-mint);
    border: 1px solid rgba(0, 168, 132, .25);
    border-radius: var(--lw-radius-xl);
    box-shadow: 0 14px 30px rgba(0, 168, 132, .14);
    color: var(--lw-green-600);
    display: inline-flex;
    font-size: 28px;
    height: 84px;
    justify-content: center;
    margin-bottom: 20px;
    width: 84px;
}
.lw-empty-state__title {
    color: var(--lw-ink-900);
    font-size: 1.15rem;
    font-weight: 750;
    margin: 0 0 6px;
}
.lw-empty-state__desc {
    color: var(--lw-ink-400);
    font-size: .92rem;
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 420px;
}

/* =====================================================================
   Premium Inbox / Live Chat
   Layered over resources/css/whatsapp-chat.scss. Targets existing class
   names (.lw-contact, .message.sent, .message.received, etc.) so the
   chat.blade.php markup is untouched. Pusher/Alpine state preserved.
   ===================================================================== */

/* Outer wrapper — replace the framed card look with a flush dashboard panel */
.lw-authenticated-page .lw-chat-main-container {
    padding: 0 18px;
}
.lw-authenticated-page .card.lw-whatsapp-chat-block-container {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--lw-radius-2xl) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08), 0 0 0 1px rgba(0, 168, 132, .04);
    overflow: hidden;
}
.lw-authenticated-page .card.lw-whatsapp-chat-block-container > .card-header {
    background: var(--lw-grad-soft);
    border-bottom: 1px solid var(--lw-ink-200);
    padding: 14px 18px;
}
.lw-authenticated-page .card.lw-whatsapp-chat-block-container > .card-body.lw-whatsapp-chat-window {
    background: linear-gradient(180deg, #F4FBF8 0%, #EFF7F4 100%);
    padding: 0 !important;
}

/* ---- Contact list (left panel) ---- */
.lw-authenticated-page .lw-contact-list-block {
    background: rgba(255, 255, 255, .85);
    border-right: 1px solid var(--lw-ink-200);
    padding: 14px 12px;
}
.lw-authenticated-page .lw-contacts-header {
    align-items: center;
    background: #fff;
    border: 1px solid var(--lw-ink-200);
    border-radius: var(--lw-radius-md);
    box-shadow: var(--lw-shadow-xs);
    padding: 8px 10px;
}
.lw-authenticated-page .lw-contacts-header .nav-tabs {
    border: 0;
    gap: 4px;
}
.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--lw-ink-400);
    font-size: .82rem;
    font-weight: 650;
    padding: 6px 10px;
    transition: all .18s var(--lw-ease);
}
.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link:hover {
    background: var(--lw-green-50);
    color: var(--lw-green-700);
}
.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link.active {
    background: var(--lw-grad-primary);
    box-shadow: 0 8px 18px rgba(0, 168, 132, .26);
    color: #fff;
}
.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link .badge {
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: inherit !important;
    font-size: .65rem;
    font-weight: 700;
    margin-left: 4px;
    padding: 2px 6px;
}
.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link:not(.active) .badge {
    background: var(--lw-green-100);
    color: var(--lw-green-700) !important;
}

.lw-authenticated-page .lw-contact-list {
    margin-top: 10px;
    max-height: calc(78vh - 160px);
    overflow-y: auto;
    padding-right: 4px;
}
.lw-authenticated-page .lw-contact {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--lw-radius-md);
    cursor: pointer;
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    padding: 10px 12px;
    position: relative;
    transition: all .2s var(--lw-ease);
}
.lw-authenticated-page .lw-contact:hover {
    background: var(--lw-green-50);
    border-color: var(--lw-green-100);
}
.lw-authenticated-page .lw-contact-list .lw-contact-list-item-selected,
.lw-authenticated-page .lw-contact-list-item-selected .lw-contact {
    background: linear-gradient(135deg, rgba(0, 168, 132, .10), rgba(37, 211, 102, .06));
    border-color: rgba(0, 168, 132, .28);
    box-shadow: inset 3px 0 0 0 var(--lw-green-500);
}
.lw-authenticated-page .lw-contact .lw-contact-avatar {
    background: var(--lw-grad-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 168, 132, .22);
    color: #fff;
    font-weight: 700;
    height: 44px;
    min-width: 44px;
    width: 44px;
    overflow: hidden;
    position: relative;
}
.lw-authenticated-page .lw-contact .lw-contact-avatar img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.lw-authenticated-page .lw-contact .lw-last-message-at {
    color: var(--lw-ink-300);
    font-size: .72rem;
    font-weight: 600;
}
.lw-authenticated-page .lw-contact h4,
.lw-authenticated-page .lw-contact .h4 {
    color: var(--lw-ink-800);
    font-size: .92rem;
    font-weight: 700;
    margin: 0;
}
.lw-authenticated-page .lw-contact small,
.lw-authenticated-page .lw-contact p {
    color: var(--lw-ink-400);
    font-size: .8rem;
}
.lw-authenticated-page .lw-contact .badge {
    background: var(--lw-grad-primary);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 168, 132, .3);
    color: #fff !important;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 7px;
}

/* labels filter — premium pills */
.lw-authenticated-page .lw-contact-list-label-tag.btn.btn-outline-warning {
    background: #fff;
    border: 1px solid var(--lw-ink-200);
    border-radius: 999px;
    color: var(--lw-ink-500);
    font-size: .72rem;
    font-weight: 600;
    margin: 2px;
    padding: 4px 10px;
    transition: all .18s var(--lw-ease);
}
.lw-authenticated-page .lw-contact-list-label-tag.btn.btn-outline-warning:hover,
.lw-authenticated-page .lw-contact-list-label-tag.btn.btn-outline-warning.active {
    background: var(--lw-green-50);
    border-color: var(--lw-green-300);
    color: var(--lw-green-700);
}

/* ---- Message bubbles ---- */
.lw-authenticated-page .conversation .conversation-container {
    background: transparent;
    padding: 18px 22px !important;
}
.lw-authenticated-page .message {
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .04) !important;
    color: var(--lw-ink-800) !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    max-width: 72% !important;
    padding: 10px 14px !important;
}
.lw-authenticated-page .message.received {
    background: #fff !important;
    border-bottom-left-radius: 4px !important;
}
.lw-authenticated-page .message.received:after {
    border-color: transparent #fff transparent transparent !important;
    border-width: 8px 9px 0 0 !important;
    left: -8px !important;
    top: 0 !important;
}
.lw-authenticated-page .message.sent {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%) !important;
    border-bottom-right-radius: 4px !important;
    color: var(--lw-ink-900) !important;
}
.lw-authenticated-page .message.sent:after {
    border-color: transparent transparent transparent #BBF7D0 !important;
    border-width: 8px 0 0 9px !important;
    right: -8px !important;
    top: 0 !important;
}
.lw-authenticated-page .message .metadata .time {
    color: rgba(15, 23, 42, .45) !important;
    font-size: .68rem !important;
    font-weight: 550;
}
.lw-authenticated-page .message.sent .metadata .tick svg path {
    fill: var(--lw-green-600) !important;
}
.lw-authenticated-page .lw-highlight-replied-message {
    background: rgba(0, 168, 132, .12) !important;
    border-left: 3px solid var(--lw-green-500);
    border-radius: 8px;
    padding: 6px 10px;
}

/* date / system divider */
.lw-authenticated-page .lw-chat-history-container,
.lw-authenticated-page .lw-system-message-container {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 18px 0;
}
.lw-authenticated-page .lw-chat-history-container::before,
.lw-authenticated-page .lw-chat-history-container::after,
.lw-authenticated-page .lw-system-message-container::before,
.lw-authenticated-page .lw-system-message-container::after {
    background: linear-gradient(90deg, transparent, var(--lw-ink-200), transparent);
    content: "";
    flex: 1;
    height: 1px;
    max-width: 220px;
}
.lw-authenticated-page .lw-chat-history-message {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--lw-ink-200) !important;
    border-radius: 999px !important;
    box-shadow: var(--lw-shadow-xs);
    color: var(--lw-ink-500) !important;
    font-size: .74rem !important;
    font-weight: 650 !important;
    padding: 5px 14px !important;
}

/* ---- Compose bar ---- */
.lw-authenticated-page .conversation-compose {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--lw-ink-200);
    padding: 14px 20px !important;
}
.lw-authenticated-page .conversation-compose .input-msg,
.lw-authenticated-page .conversation-compose textarea,
.lw-authenticated-page .conversation-compose .lw-input-emoji {
    background: #F4FBF8 !important;
    border: 1.5px solid var(--lw-ink-200) !important;
    border-radius: var(--lw-radius-lg) !important;
    color: var(--lw-ink-800) !important;
    font-size: .92rem !important;
    padding: 10px 14px !important;
    transition: all .22s var(--lw-ease) !important;
}
.lw-authenticated-page .conversation-compose .input-msg:focus,
.lw-authenticated-page .conversation-compose textarea:focus,
.lw-authenticated-page .conversation-compose .lw-input-emoji:focus {
    background: #fff !important;
    border-color: var(--lw-green-500) !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 132, .12) !important;
}
.lw-authenticated-page .conversation-compose .lw-whatsapp-bar-icon-btn,
.lw-authenticated-page .lw-whatsapp-bar-icon-btn {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--lw-ink-200);
    border-radius: 12px;
    color: var(--lw-ink-500);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    transition: all .2s var(--lw-ease);
    width: 42px;
}
.lw-authenticated-page .conversation-compose .lw-whatsapp-bar-icon-btn:hover,
.lw-authenticated-page .lw-whatsapp-bar-icon-btn:hover {
    background: var(--lw-green-50);
    border-color: var(--lw-green-300);
    color: var(--lw-green-600);
    transform: translateY(-1px);
}
.lw-authenticated-page .conversation-compose .send,
.lw-authenticated-page .conversation-compose button[type="submit"] {
    background: var(--lw-grad-primary) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0, 168, 132, .32) !important;
    color: #fff !important;
    font-weight: 700 !important;
    height: 42px !important;
    padding: 0 16px !important;
    transition: all .2s var(--lw-ease) !important;
}
.lw-authenticated-page .conversation-compose .send:hover,
.lw-authenticated-page .conversation-compose button[type="submit"]:hover {
    box-shadow: 0 16px 36px rgba(0, 168, 132, .42) !important;
    transform: translateY(-1px);
}

/* Quick reply dropdown / template chips */
.lw-authenticated-page .lw-template-message {
    background: linear-gradient(135deg, #FFFFFF, #F4FBF8) !important;
    border: 1px solid var(--lw-ink-200) !important;
    border-radius: 14px !important;
    box-shadow: var(--lw-shadow-xs);
    padding: 10px 12px;
}

/* ---- Right CRM / contact details panel ---- */
.lw-authenticated-page .lw-contact-crm-block {
    background: rgba(255, 255, 255, .85);
    border-left: 1px solid var(--lw-ink-200);
    padding: 16px;
}
.lw-authenticated-page .lw-contact-crm-block .card,
.lw-authenticated-page .lw-contact-crm-block fieldset {
    background: #fff;
    border: 1px solid var(--lw-ink-200);
    border-radius: var(--lw-radius-lg);
    box-shadow: var(--lw-shadow-xs);
    margin-bottom: 12px;
    padding: 14px;
}
.lw-authenticated-page .lw-contact-crm-block legend {
    color: var(--lw-ink-500);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .06em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.lw-authenticated-page .lw-contact-crm-block h3,
.lw-authenticated-page .lw-contact-crm-block .h3 {
    color: var(--lw-ink-800);
    font-size: .98rem;
    font-weight: 700;
}

/* AI suggestion chip (decorative — appears when markup uses .lw-ai-suggestion) */
.lw-ai-suggestion {
    background: linear-gradient(135deg, rgba(0, 168, 132, .08), rgba(37, 211, 102, .04));
    border: 1px dashed rgba(0, 168, 132, .35);
    border-radius: 12px;
    color: var(--lw-green-700);
    font-size: .85rem;
    font-weight: 550;
    padding: 10px 12px;
}
.lw-ai-suggestion::before {
    background: var(--lw-grad-primary);
    border-radius: 50%;
    color: #fff;
    content: "\f0eb"; /* lightbulb */
    display: inline-flex;
    font-family: "Font Awesome 5 Free";
    font-size: .7rem;
    height: 18px;
    margin-right: 6px;
    padding: 3px;
    width: 18px;
}

/* Mobile: stack panels */
@media (max-width: 991.98px) {
    .lw-authenticated-page .lw-contact-list-block,
    .lw-authenticated-page .lw-contact-crm-block {
        border-left: 0;
        border-right: 0;
    }
    .lw-authenticated-page .message {
        max-width: 88% !important;
    }
}

/* =====================================================================
   Premium Authenticated Layout (page bg, top navbar, sidebar)
   Replaces the previous inline <style> block in layouts/app.blade.php.
   Targets the same class names — no Blade markup changes required.
   ===================================================================== */

/* Page background */
.lw-authenticated-page {
    background:
        radial-gradient(circle at 18% 6%, rgba(0, 168, 132, .12), transparent 32%),
        radial-gradient(circle at 92% 96%, rgba(37, 211, 102, .08), transparent 36%),
        linear-gradient(180deg, #EEF6F2 0%, #F8FBFA 54%, #EEF6F2 100%) !important;
    color: var(--lw-ink-700);
    font-family: var(--lw-font);
}
.lw-authenticated-page .main-content { min-height: 100vh; padding: 20px 22px 32px 0; }

/* Top navbar (header) */
.lw-authenticated-page .main-content .navbar-top {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--lw-radius-lg);
    box-shadow: var(--lw-shadow-sm);
    margin: 0 !important;
    min-height: 66px;
    overflow: hidden;
    position: relative;
}
.lw-authenticated-page .main-content .navbar-top::before {
    background: linear-gradient(135deg, rgba(0, 168, 132, .08), rgba(7, 94, 84, .03));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.lw-authenticated-page .main-content .navbar-top .container-fluid { position: relative; z-index: 1; }
.lw-authenticated-page .main-content .navbar-top .h3,
.lw-authenticated-page .main-content .navbar-top .h4,
.lw-authenticated-page .main-content .navbar-top .nav-link {
    color: var(--lw-ink-800) !important;
    font-weight: 700;
}
.lw-authenticated-page .header { padding-top: 1.5rem !important; }
.lw-authenticated-page .lw-page-title {
    color: var(--lw-ink-900);
    font-size: 1.85rem;
    font-weight: 750;
    letter-spacing: -.01em;
}
.lw-authenticated-page .main-content > .container-fluid { padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------ Sidebar */
.navbar-vertical.lw-sidebar-container {
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 255, 255, .14), transparent 36%),
        linear-gradient(180deg, #075E54 0%, #045A4E 38%, #00A884 100%) !important;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 70px rgba(3, 49, 41, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: width .35s var(--lw-ease), transform .35s var(--lw-ease);
}
.navbar-vertical.lw-sidebar-container::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%);
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

@media (min-width: 768px) {
    .navbar-vertical.lw-sidebar-container {
        border-radius: 22px;
        bottom: 18px;
        left: 18px;
        overflow: visible;
        top: 18px;
        width: 264px;
    }
    .navbar-vertical.navbar-expand-md.lw-sidebar-container.fixed-left + .main-content,
    .lw-authenticated-page .main-content {
        margin-left: 300px;
    }
}

/* Brand block */
.navbar-vertical.lw-sidebar-container .navbar-brand {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    display: flex;
    height: 68px;
    justify-content: center;
    margin: 14px 14px 8px;
    padding: 0;
    position: relative;
    width: auto;
    z-index: 2;
}
.navbar-vertical.lw-sidebar-container .navbar-brand-img {
    filter: brightness(0) invert(1);
    max-height: 38px;
    max-width: 180px;
    object-fit: contain;
}

/* Nav scroll */
.navbar-vertical.lw-sidebar-container .navbar-collapse {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 0;
    position: relative;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
    scrollbar-width: thin;
    z-index: 2;
}
.navbar-vertical.lw-sidebar-container .navbar-collapse::-webkit-scrollbar { width: 5px; }
.navbar-vertical.lw-sidebar-container .navbar-collapse::-webkit-scrollbar-track { background: transparent; }
.navbar-vertical.lw-sidebar-container .navbar-collapse::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 4px; }
.navbar-vertical.lw-sidebar-container .navbar-collapse::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .42); }

.navbar-vertical.lw-sidebar-container .navbar-nav {
    gap: 4px;
    padding: 6px 12px 18px;
}

/* Nav links — main level */
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgba(255, 255, 255, .85) !important;
    display: flex;
    font-size: .9rem;
    font-weight: 600;
    gap: 11px;
    letter-spacing: .005em;
    margin: 2px 0;
    min-height: 42px;
    padding: .55rem .75rem !important;
    position: relative;
    transition: background .22s var(--lw-ease), border-color .22s var(--lw-ease), transform .22s var(--lw-ease);
}

/* Nav icons */
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link > i,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-link > i {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    color: rgba(255, 255, 255, .92) !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .88rem;
    height: 30px;
    justify-content: center;
    margin: 0;
    min-width: 30px;
    transition: all .22s var(--lw-ease);
    width: 30px;
}

/* Hover */
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link:hover,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-link:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .14);
    color: #fff !important;
    transform: translateX(2px);
}
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link:hover > i,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-link:hover > i {
    background: rgba(255, 255, 255, .2);
    color: #fff !important;
}

/* Active */
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link.active,
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item.active > .nav-link,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-link.active,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-item.active > .nav-link {
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .12));
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff !important;
}
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link.active > i,
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item.active > .nav-link > i,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-link.active > i,
.navbar-vertical.lw-sidebar-container .navbar-nav .lw-expandable-nav .nav-item.active > .nav-link > i {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .38);
    box-shadow: 0 0 18px rgba(255, 255, 255, .18);
    color: #fff !important;
}

/* Active indicator stripe (left) */
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > .nav-link.active::before,
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item.active > .nav-link::before {
    background: #fff;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px rgba(255, 255, 255, .55);
    content: "";
    height: 22px;
    left: -12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
}

/* Submenu container */
.navbar-vertical.lw-sidebar-container .lw-expandable-nav,
.navbar-vertical.lw-sidebar-container .lw-configuration-nav {
    background: rgba(0, 0, 0, .14);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    margin: 4px 0 8px;
    padding: 6px;
}
.navbar-vertical.lw-sidebar-container .lw-expandable-nav .nav-link,
.navbar-vertical.lw-sidebar-container .lw-configuration-nav .nav-link {
    font-size: .84rem;
    min-height: 36px;
    padding: .42rem .6rem !important;
}
.navbar-vertical.lw-sidebar-container .lw-expandable-nav .nav-link > i,
.navbar-vertical.lw-sidebar-container .lw-configuration-nav .nav-link > i {
    border-radius: 7px;
    font-size: .76rem;
    height: 24px;
    min-width: 24px;
    width: 24px;
}
/* Bootstrap collapse handles show/hide — we just style what's open */
.navbar-vertical.lw-sidebar-container .lw-expandable-nav.collapsing,
.navbar-vertical.lw-sidebar-container .lw-configuration-nav.collapsing {
    transition: height .28s var(--lw-ease);
}

/* Submenu chevron — added via ::after on the parent <a data-toggle="collapse"> */
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > a[data-toggle="collapse"]::after {
    color: rgba(255, 255, 255, .55);
    content: "\f107"; /* fa chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    transition: transform .25s var(--lw-ease);
}
.navbar-vertical.lw-sidebar-container .navbar-nav > .nav-item > a[data-toggle="collapse"][aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Sidebar badges (e.g., unread count, pending subs) */
.navbar-vertical.lw-sidebar-container .navbar-nav .badge,
.navbar-vertical.lw-sidebar-container .navbar-nav .badge-success,
.navbar-vertical.lw-sidebar-container .navbar-nav .badge-danger {
    background: var(--lw-grad-primary) !important;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    color: #fff !important;
    font-size: .65rem;
    font-weight: 700;
    margin-left: auto;
    padding: 3px 8px;
}
.navbar-vertical.lw-sidebar-container .navbar-nav .badge-danger {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
}

/* WhatsApp setup warning state on Settings link */
.navbar-vertical.lw-sidebar-container .nav-link.text-warning {
    color: #FCD34D !important;
}
.navbar-vertical.lw-sidebar-container .nav-link.text-warning > i {
    background: rgba(252, 211, 77, .2);
    border-color: rgba(252, 211, 77, .35);
    color: #FCD34D !important;
}

/* Dark / coloured icon overrides from blade — neutralize so they read on green bg */
.navbar-vertical.lw-sidebar-container .nav-link > i.text-dark,
.navbar-vertical.lw-sidebar-container .nav-link > i.text-blue,
.navbar-vertical.lw-sidebar-container .nav-link > i.text-danger {
    color: #fff !important;
}

/* Toggler (mobile / collapsed-mode hamburger) */
.navbar-vertical.lw-sidebar-container .navbar-toggler {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    display: flex;
    height: 42px;
    justify-content: center;
    transition: all .22s var(--lw-ease);
    width: 42px;
}
.navbar-vertical.lw-sidebar-container .navbar-toggler:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .32);
}
.navbar-vertical.lw-sidebar-container .navbar-toggler-icon {
    background: none;
    height: 18px;
    position: relative;
    width: 22px;
}
.navbar-vertical.lw-sidebar-container .navbar-toggler-icon::before,
.navbar-vertical.lw-sidebar-container .navbar-toggler-icon::after {
    background: #fff;
    border-radius: 2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
}
.navbar-vertical.lw-sidebar-container .navbar-toggler-icon::before { top: 4px; box-shadow: 0 6px 0 #fff; }
.navbar-vertical.lw-sidebar-container .navbar-toggler-icon::after  { bottom: 4px; }

/* Collapsed (mini) state — opt-in via .sidebar-closed */
.navbar-vertical.lw-sidebar-container.sidebar-closed { width: 84px; }
.navbar-vertical.lw-sidebar-container.sidebar-closed .navbar-brand {
    height: 56px;
    justify-content: center;
    margin: 12px 12px 6px;
}
.navbar-vertical.lw-sidebar-container.sidebar-closed .navbar-brand-img { max-width: 36px; }
.navbar-vertical.lw-sidebar-container.sidebar-closed .navbar-nav .nav-link {
    justify-content: center;
    padding: .55rem .4rem !important;
}
.navbar-vertical.lw-sidebar-container.sidebar-closed .navbar-nav .nav-link > span,
.navbar-vertical.lw-sidebar-container.sidebar-closed .navbar-nav .nav-link > .nav-link-text,
.navbar-vertical.lw-sidebar-container.sidebar-closed .navbar-nav > .nav-item > a[data-toggle="collapse"]::after {
    display: none !important;
}
.navbar-vertical.lw-sidebar-container.sidebar-closed .lw-expandable-nav { display: none !important; }
.navbar-vertical.lw-sidebar-container.sidebar-closed + .main-content,
.lw-authenticated-page.lw-sidebar-collapsed .main-content {
    margin-left: 116px;
}

/* Mobile */
@media (max-width: 767px) {
    .lw-authenticated-page .main-content { margin-left: 0; padding: 0 0 92px; }
    .navbar-vertical.lw-sidebar-container {
        border-radius: 0;
        left: 0;
        max-width: 100% !important;
        position: relative !important;
        top: 0;
        width: 100% !important;
    }
    .lw-authenticated-page .main-content .navbar-top { border-radius: 0; margin: 0; }
}

@media (min-width: 1400px) {
    .lw-authenticated-page .main-content { padding-right: 28px; }
}

/* =====================================================================
   Premium Tables, Tabs, Badges, Buttons
   Layered over Argon — covers all DataTables pages (campaigns, contacts,
   vendors, templates, etc.) without touching their Blade markup.
   ===================================================================== */

/* ---- Tabs (used on campaigns Active/Archive, contact list, etc.) ---- */
.lw-authenticated-page .nav-tabs {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--lw-ink-200);
    border-radius: var(--lw-radius-md);
    box-shadow: var(--lw-shadow-xs);
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 18px;
}
.lw-authenticated-page .nav-tabs .nav-item { margin-bottom: 0; }
.lw-authenticated-page .nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--lw-ink-500);
    font-size: .86rem;
    font-weight: 650;
    padding: .5rem 1.05rem;
    transition: all .2s var(--lw-ease);
}
.lw-authenticated-page .nav-tabs .nav-link:hover {
    background: var(--lw-green-50);
    border: 0;
    color: var(--lw-green-700);
}
.lw-authenticated-page .nav-tabs .nav-link.active {
    background: var(--lw-grad-primary);
    border: 0;
    box-shadow: 0 8px 18px rgba(0, 168, 132, .26);
    color: #fff;
}

/* ---- Buttons — upgrade legacy .btn-primary / .btn-secondary / .btn-default ---- */
.lw-authenticated-page .btn {
    border-radius: var(--lw-radius-md);
    font-weight: 650;
    letter-spacing: .005em;
    transition: all .22s var(--lw-ease);
}
.lw-authenticated-page .btn-primary,
.lw-authenticated-page .lw-btn.btn-primary {
    background: var(--lw-grad-primary) !important;
    border: 0 !important;
    box-shadow: 0 12px 28px rgba(0, 168, 132, .28) !important;
    color: #fff !important;
}
.lw-authenticated-page .btn-primary:hover,
.lw-authenticated-page .lw-btn.btn-primary:hover {
    box-shadow: 0 18px 38px rgba(0, 168, 132, .38) !important;
    transform: translateY(-1px);
}
.lw-authenticated-page .btn-secondary,
.lw-authenticated-page .lw-btn.btn-secondary {
    background: #fff !important;
    border: 1.5px solid rgba(0, 168, 132, .3) !important;
    color: var(--lw-green-700) !important;
}
.lw-authenticated-page .btn-secondary:hover,
.lw-authenticated-page .lw-btn.btn-secondary:hover {
    background: var(--lw-green-50) !important;
    border-color: var(--lw-green-500) !important;
    box-shadow: 0 10px 22px rgba(0, 168, 132, .14) !important;
}
.lw-authenticated-page .btn-success {
    background: var(--lw-grad-primary) !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(0, 168, 132, .26) !important;
    color: #fff !important;
}
.lw-authenticated-page .btn-success:hover {
    box-shadow: 0 16px 34px rgba(0, 168, 132, .36) !important;
    transform: translateY(-1px);
}
.lw-authenticated-page .btn-danger {
    background: linear-gradient(135deg, #F87171 0%, #DC2626 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, .24) !important;
    color: #fff !important;
}
.lw-authenticated-page .btn-danger:hover {
    box-shadow: 0 16px 32px rgba(220, 38, 38, .34) !important;
    transform: translateY(-1px);
}
.lw-authenticated-page .btn-dark {
    background: linear-gradient(135deg, var(--lw-green-800) 0%, var(--lw-green-700) 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(7, 94, 84, .26) !important;
    color: #fff !important;
}
.lw-authenticated-page .btn-dark:hover {
    box-shadow: 0 16px 32px rgba(7, 94, 84, .36) !important;
    transform: translateY(-1px);
}
.lw-authenticated-page .btn-default,
.lw-authenticated-page .btn-light {
    background: #fff !important;
    border: 1px solid var(--lw-ink-200) !important;
    color: var(--lw-ink-700) !important;
}
.lw-authenticated-page .btn-default:hover,
.lw-authenticated-page .btn-light:hover {
    background: var(--lw-green-50) !important;
    border-color: var(--lw-green-300) !important;
    color: var(--lw-green-700) !important;
}
.lw-authenticated-page .btn-warning {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(245, 158, 11, .26) !important;
    color: #fff !important;
}
.lw-authenticated-page .btn-sm {
    border-radius: 8px;
    font-size: .76rem;
    padding: .35rem .7rem;
}

/* Disabled */
.lw-authenticated-page .btn:disabled,
.lw-authenticated-page .btn.disabled,
.lw-authenticated-page .lw-disabled {
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: .55;
    transform: none !important;
}

/* ---- Status badges — upgrade Bootstrap variants to gradient pills ---- */
.lw-authenticated-page .badge {
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 11px;
    text-transform: capitalize;
}
.lw-authenticated-page .badge-success {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%) !important;
    color: #15803D !important;
}
.lw-authenticated-page .badge-warning {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
    color: #B45309 !important;
}
.lw-authenticated-page .badge-danger {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
    color: #B91C1C !important;
}
.lw-authenticated-page .badge-info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%) !important;
    color: #1D4ED8 !important;
}
.lw-authenticated-page .badge-primary {
    background: var(--lw-grad-primary) !important;
    color: #fff !important;
}
.lw-authenticated-page .badge-secondary,
.lw-authenticated-page .badge-light {
    background: var(--lw-ink-100) !important;
    color: var(--lw-ink-500) !important;
}
.lw-authenticated-page .badge-yellow {
    background: linear-gradient(135deg, #FEF08A 0%, #FACC15 100%) !important;
    color: #854D0E !important;
}

/* ---- Cards ---- */
.lw-authenticated-page .card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--lw-radius-xl);
    box-shadow: var(--lw-shadow-sm);
    transition: box-shadow .22s var(--lw-ease), border-color .22s var(--lw-ease);
}
.lw-authenticated-page .card:hover { box-shadow: var(--lw-shadow-md); }
.lw-authenticated-page .card > .card-header {
    background: var(--lw-grad-soft);
    border-bottom: 1px solid var(--lw-ink-200);
    border-radius: var(--lw-radius-xl) var(--lw-radius-xl) 0 0 !important;
    padding: 16px 20px;
}
.lw-authenticated-page .card > .card-header h1,
.lw-authenticated-page .card > .card-header h2,
.lw-authenticated-page .card > .card-header h3 {
    color: var(--lw-ink-800);
    font-weight: 750;
    margin: 0;
}
.lw-authenticated-page .card > .card-body { padding: 20px; }

/* ---- DataTables (used by x-lw.datatable everywhere) ---- */
.lw-authenticated-page .dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--lw-ink-200);
    border-radius: var(--lw-radius-xl);
    box-shadow: var(--lw-shadow-sm);
    padding: 16px;
    overflow: hidden;
}
.lw-authenticated-page .dataTables_wrapper .dataTables_length,
.lw-authenticated-page .dataTables_wrapper .dataTables_filter {
    color: var(--lw-ink-500);
    font-size: .85rem;
    margin-bottom: 12px;
}
.lw-authenticated-page .dataTables_wrapper .dataTables_filter input,
.lw-authenticated-page .dataTables_wrapper .dataTables_length select {
    background: var(--lw-ink-50);
    border: 1.5px solid var(--lw-ink-200);
    border-radius: 10px;
    color: var(--lw-ink-800);
    font-size: .88rem;
    margin-left: 8px;
    padding: 6px 12px;
    transition: all .2s var(--lw-ease);
}
.lw-authenticated-page .dataTables_wrapper .dataTables_filter input:focus,
.lw-authenticated-page .dataTables_wrapper .dataTables_length select:focus {
    background: #fff;
    border-color: var(--lw-green-500);
    box-shadow: 0 0 0 3px rgba(0, 168, 132, .14);
    outline: 0;
}

.lw-authenticated-page .dataTables_wrapper table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}
.lw-authenticated-page .dataTables_wrapper table.dataTable thead th {
    background: var(--lw-grad-soft);
    border-bottom: 1px solid var(--lw-ink-200);
    border-top: 1px solid var(--lw-ink-200);
    color: var(--lw-ink-500);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .06em;
    padding: 12px 14px;
    text-transform: uppercase;
}
.lw-authenticated-page .dataTables_wrapper table.dataTable thead th:first-child { border-top-left-radius: 10px; border-left: 1px solid var(--lw-ink-200); }
.lw-authenticated-page .dataTables_wrapper table.dataTable thead th:last-child { border-top-right-radius: 10px; border-right: 1px solid var(--lw-ink-200); }
.lw-authenticated-page .dataTables_wrapper table.dataTable tbody td {
    background: #fff;
    border-bottom: 1px solid var(--lw-ink-100);
    color: var(--lw-ink-700);
    font-size: .9rem;
    padding: 14px;
    vertical-align: middle;
}
.lw-authenticated-page .dataTables_wrapper table.dataTable tbody tr {
    transition: background .18s var(--lw-ease);
}
.lw-authenticated-page .dataTables_wrapper table.dataTable tbody tr:hover td {
    background: rgba(0, 168, 132, .035);
}
.lw-authenticated-page .dataTables_wrapper table.dataTable tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.lw-authenticated-page .dataTables_wrapper table.dataTable tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.lw-authenticated-page .dataTables_wrapper table.dataTable tbody td .btn {
    margin: 2px;
}

/* DT pagination */
.lw-authenticated-page .dataTables_wrapper .dataTables_paginate { margin-top: 12px; }
.lw-authenticated-page .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff !important;
    border: 1px solid var(--lw-ink-200) !important;
    border-radius: 8px !important;
    color: var(--lw-ink-500) !important;
    font-size: .82rem;
    margin: 0 2px;
    padding: 6px 12px !important;
    transition: all .2s var(--lw-ease);
}
.lw-authenticated-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--lw-green-50) !important;
    border-color: var(--lw-green-300) !important;
    color: var(--lw-green-700) !important;
}
.lw-authenticated-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.lw-authenticated-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--lw-grad-primary) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(0, 168, 132, .26) !important;
    color: #fff !important;
}
.lw-authenticated-page .dataTables_wrapper .dataTables_info {
    color: var(--lw-ink-400);
    font-size: .82rem;
    padding-top: 12px;
}

/* ---- Premium page header (auto-applies to users.partials.header) ---- */
.lw-authenticated-page .header {
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 168, 132, .06) 0%, rgba(37, 211, 102, .03) 100%);
    border: 1px solid rgba(0, 168, 132, .14);
    border-radius: var(--lw-radius-xl);
    margin-bottom: 18px;
    padding: 22px 24px !important;
    position: relative;
    overflow: hidden;
}
.lw-authenticated-page .header::after {
    background: radial-gradient(circle, rgba(0, 168, 132, .14), transparent 60%);
    border-radius: 50%;
    content: "";
    height: 220px;
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
}
.lw-authenticated-page .header .container-fluid { padding: 0; position: relative; z-index: 1; }
.lw-authenticated-page .header .lw-page-title.display-2 {
    color: var(--lw-ink-900);
    font-size: 1.85rem !important;
    font-weight: 750;
    letter-spacing: -.01em;
    margin-top: 0 !important;
}
.lw-authenticated-page .header p {
    color: var(--lw-ink-400);
    font-size: .92rem;
    margin: 4px 0 0;
}

/* ---- Campaign-list specific touches ---- */
.lw-campaign-toolbar {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--lw-ink-200);
    border-radius: var(--lw-radius-lg);
    box-shadow: var(--lw-shadow-xs);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 12px 16px;
}
.lw-campaign-toolbar .lw-toolbar-left {
    align-items: center;
    color: var(--lw-ink-500);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 600;
    gap: 8px;
}
.lw-campaign-toolbar .lw-toolbar-left i {
    align-items: center;
    background: var(--lw-grad-primary);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 168, 132, .28);
    color: #fff;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}
.lw-campaign-toolbar .lw-toolbar-actions { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* ---- Form controls — premium polish (used by inputs/selects across pages) ---- */
.lw-authenticated-page .form-control {
    background: #fff;
    border: 1.5px solid var(--lw-ink-200);
    border-radius: 10px;
    color: var(--lw-ink-800);
    font-size: .92rem;
    padding: .55rem .85rem;
    transition: all .22s var(--lw-ease);
}
.lw-authenticated-page .form-control:focus {
    background: #fff;
    border-color: var(--lw-green-500);
    box-shadow: 0 0 0 3px rgba(0, 168, 132, .12);
    outline: 0;
}
.lw-authenticated-page .input-group-text {
    background: var(--lw-ink-50);
    border: 1.5px solid var(--lw-ink-200);
    color: var(--lw-ink-500);
}

/* =====================================================================
   Premium Templates page + WhatsApp message preview
   ===================================================================== */

/* Reuse .lw-campaign-toolbar for the template page action strip — see prior block */

/* Template status pill — converts the legacy <span class="text-success"> markup
   used in templatesStatusColumnTemplate into proper gradient pills. */
.lw-authenticated-page #lwTemplatesList .text-success,
.lw-authenticated-page #lwTemplatesList .text-warning,
.lw-authenticated-page #lwTemplatesList .text-danger {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 700;
    gap: 6px;
    letter-spacing: .02em;
    padding: 4px 11px;
    text-transform: uppercase;
}
.lw-authenticated-page #lwTemplatesList .text-success {
    background: linear-gradient(135deg, #DCFCE7, #BBF7D0) !important;
    color: #15803D !important;
}
.lw-authenticated-page #lwTemplatesList .text-success i { color: #15803D !important; }
.lw-authenticated-page #lwTemplatesList .text-warning {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
    color: #B45309 !important;
}
.lw-authenticated-page #lwTemplatesList .text-warning i { color: #B45309 !important; }
.lw-authenticated-page #lwTemplatesList .text-danger {
    background: linear-gradient(135deg, #FEE2E2, #FECACA) !important;
    color: #B91C1C !important;
}
.lw-authenticated-page #lwTemplatesList .text-danger i { color: #B91C1C !important; }

/* Template action button group — tighten spacing and grouping */
.lw-authenticated-page #lwTemplatesList .btn-group .dropdown-toggle-split {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding: .35rem .55rem;
}

/* ---- WhatsApp message preview (templates modal + builder previews) ---- */
.lw-authenticated-page .lw-whatsapp-preview-container {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .35), transparent 38%),
        radial-gradient(circle at 80% 90%, rgba(0, 168, 132, .12), transparent 42%),
        linear-gradient(135deg, #DAD3CB 0%, #E5DDD5 60%, #DBD5CD 100%) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
    padding: 24px !important;
    overflow: hidden;
    position: relative;
}
.lw-authenticated-page .lw-whatsapp-preview-container::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 Q10 10 20 20 T40 20' stroke='%23ffffff' stroke-opacity='0.05' fill='none'/%3E%3C/svg%3E");
    inset: 0;
    opacity: .4;
    pointer-events: none;
    position: absolute;
}

.lw-authenticated-page .lw-whatsapp-preview .card {
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    border-top-left-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06) !important;
    margin-bottom: 0;
    overflow: hidden;
    padding: 4px !important;
    position: relative;
}
.lw-authenticated-page .lw-whatsapp-preview .card::after {
    border-color: transparent #fff transparent transparent !important;
    border-style: solid;
    border-width: 0 10px 10px 0 !important;
    content: "";
    height: 0;
    left: -9px !important;
    position: absolute;
    top: 0 !important;
    width: 0;
}

.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-body {
    color: #303030;
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 14px 6px !important;
}
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-body strong {
    color: #111827;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-footer {
    color: #8696a0 !important;
    font-size: 12px;
    padding: 4px 14px 10px !important;
}

/* Header media placeholder — gradient tile instead of flat grey */
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-header-placeholder,
.lw-authenticated-page .lw-whatsapp-preview a.lw-wa-message-document-link {
    align-items: center;
    background: linear-gradient(135deg, #54656F 0%, #3B4A54 100%) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, .8);
    display: flex;
    height: 140px !important;
    justify-content: center;
    width: 100%;
}
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-header-placeholder i.fa {
    font-size: 2.6rem !important;
    opacity: .8;
}

/* Buttons (CTA list at the bottom of a template preview) */
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-buttons {
    background: transparent !important;
    border-top: 1px solid #f0efed !important;
    color: #00A5F4 !important;
    margin: 6px 0 0;
    padding: 0 !important;
}
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-buttons .list-group-item {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #f0efed !important;
    color: #00A5F4 !important;
    display: flex;
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    padding: 9px 12px !important;
    text-align: center;
}
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-buttons .list-group-item:last-child {
    border-bottom: 0 !important;
}
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-buttons .list-group-item i {
    color: #00A5F4 !important;
    font-size: 13px;
}

/* Location preview */
.lw-authenticated-page .lw-whatsapp-preview .lw-whatsapp-location-meta {
    background: #f7f7f5 !important;
    color: #303030;
    font-size: 12.5px;
    padding: 8px 12px !important;
}

/* Carousel (multi-card template preview) */
.lw-authenticated-page .lw-carousel-wrapper {
    margin-top: 12px;
    position: relative;
}
.lw-authenticated-page .lw-carousel-arrow {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
    color: var(--lw-ink-700);
    cursor: pointer;
    display: inline-flex;
    font-size: 22px;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s var(--lw-ease);
    width: 36px;
    z-index: 3;
}
.lw-authenticated-page .lw-carousel-arrow.prev { left: -4px; }
.lw-authenticated-page .lw-carousel-arrow.next { right: -4px; }
.lw-authenticated-page .lw-carousel-arrow:hover {
    background: var(--lw-grad-primary);
    border-color: transparent;
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.lw-authenticated-page .lw-carousel-card {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
}
.lw-authenticated-page .lw-card-media {
    align-items: center;
    background: linear-gradient(135deg, #54656F 0%, #3B4A54 100%) !important;
    display: flex;
    height: 140px;
    justify-content: center;
}

/* Template preview modal — mint backdrop and clean spacing */
#lwTemplatePreview .modal-content {
    border: 0;
    border-radius: var(--lw-radius-2xl);
    overflow: hidden;
}
#lwTemplatePreview .modal-header {
    background: var(--lw-grad-soft);
    border-bottom: 1px solid var(--lw-ink-200);
}
#lwTemplatePreview .modal-footer {
    background: var(--lw-grad-soft);
    border-top: 1px solid var(--lw-ink-200);
}

/* ---- Templates page: empty/loading guard for sync button ---- */
.lw-authenticated-page .btn[href*="templates.write.sync"] i,
.lw-authenticated-page .btn[href*="templates.write.sync"]::before {
    margin-right: 4px;
}

/* -------------------------------------------------- Misc polish -- */
.lw-authenticated-page .alert {
    border-radius: var(--lw-radius-md);
    border-width: 1px;
    font-weight: 550;
}

/* Scrollbar polish for the whole authenticated app */
.lw-authenticated-page ::-webkit-scrollbar { height: 10px; width: 10px; }
.lw-authenticated-page ::-webkit-scrollbar-track { background: transparent; }
.lw-authenticated-page ::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 132, .25);
    border-radius: 999px;
}
.lw-authenticated-page ::-webkit-scrollbar-thumb:hover { background: rgba(0, 168, 132, .45); }

/* =====================================================================
   v2 Design System — applied alongside the existing green theme.
   - Adds canvas (warm cream) page bg, neutral/ink scales
   - Maps "brand" to existing WhatsApp green so utility shims stay green
   - Sidebar = dark 220px shell. Topbar = sticky cream bar.
   - Token-driven cards, stat cards, badges, buttons, inputs.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    /* brand mapped to existing green palette */
    --v2-brand-50:  #e7fff6;
    --v2-brand-100: #d1fae5;
    --v2-brand-400: #34d399;
    --v2-brand-500: #00a884; /* primary WhatsApp green */
    --v2-brand-600: #009070;
    --v2-brand-700: #075e54;

    --v2-ink-900: #0b1f1b;
    --v2-ink-800: #102f28;
    --v2-ink-700: #1f2937;

    --v2-canvas-50:  #fbfaf6;
    --v2-canvas-100: #f5f5f2; /* warm cream page bg */
    --v2-canvas-200: #eeede9;

    --v2-neutral-100: #f5f5f5;
    --v2-neutral-200: #e9e9e9;
    --v2-neutral-300: #d4d4d4;
    --v2-neutral-400: #a3a3a3;
    --v2-neutral-500: #737373;
    --v2-neutral-600: #525252;
    --v2-neutral-700: #404040;
    --v2-neutral-900: #171717;

    --v2-radius-lg:  0.75rem;
    --v2-radius-2xl: 1rem;
    --v2-radius-3xl: 1.5rem;
    --v2-radius-4xl: 2rem;

    --v2-shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --v2-shadow-card-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);

    --v2-font-sans: "Inter","Manrope","TikTok Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

    --v2-sidebar-w: 220px;
    --v2-topbar-h:  60px;
}

/* -------------------------------------------------- App-wide base layer -- */
body.lw-authenticated-page {
    background: var(--v2-canvas-100);
    color: var(--v2-ink-900);
    font-family: var(--v2-font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------- Dark mode (theme toggle) -- */
/* Activated when getUserAppTheme() returns 'dark', which sets html[lw-theme-mode="dark"].
   Also supports system_default by listening to prefers-color-scheme. The legacy
   dist/css/dark-theme.css loads first; these rules layer v2 darks on top. */
html[lw-theme-mode="dark"] body.lw-authenticated-page,
html[lw-theme-mode="system_default"] body.lw-authenticated-page {
    background: #0b0f0d;
    color: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
    html[lw-theme-mode="system_default"] body.lw-authenticated-page {
        background: #0b0f0d;
        color: #e5e7eb;
    }
}
html[lw-theme-mode="dark"] body.lw-authenticated-page h1,
html[lw-theme-mode="dark"] body.lw-authenticated-page h2,
html[lw-theme-mode="dark"] body.lw-authenticated-page h3,
html[lw-theme-mode="dark"] body.lw-authenticated-page h4,
html[lw-theme-mode="dark"] body.lw-authenticated-page h5,
html[lw-theme-mode="dark"] body.lw-authenticated-page h6 { color: #f3f4f6; }

/* Topbar in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-topbar {
    background: #11161a !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-topbar-title { color: #f3f4f6; }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-topbar-subtitle { color: rgba(255,255,255,.5); }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-icon-btn { color: rgba(255,255,255,.65); }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-icon-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-account { color: #f3f4f6; }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-account:hover { background: rgba(255,255,255,.06); }

/* Cards / fieldsets / panels in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-card,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-stat,
html[lw-theme-mode="dark"] body.lw-authenticated-page fieldset,
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content .card {
    background: #161b1f !important;
    border-color: rgba(255,255,255,.06) !important;
    color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
}
html[lw-theme-mode="dark"] body.lw-authenticated-page fieldset > legend,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-section-title,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-stat-value { color: #f3f4f6; }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-section-sub,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-stat-label,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-stat-hint,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-neutral-500,
html[lw-theme-mode="dark"] body.lw-authenticated-page label,
html[lw-theme-mode="dark"] body.lw-authenticated-page .form-control-label { color: rgba(255,255,255,.55); }

/* Form controls in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .form-control,
html[lw-theme-mode="dark"] body.lw-authenticated-page .custom-select,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-input {
    background: #0d1114;
    border-color: rgba(255,255,255,.1);
    color: #e5e7eb;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .form-control:focus,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-input:focus {
    background: #11161a;
    border-color: var(--v2-brand-500);
    box-shadow: 0 0 0 2px rgba(0,168,132,.2);
}

/* Tables in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content table.table thead th {
    background: #0d1114;
    border-color: rgba(255,255,255,.06);
    color: rgba(255,255,255,.5);
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content table.table tbody td {
    border-color: rgba(255,255,255,.05);
    color: #e5e7eb;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content table.table tbody tr:hover {
    background: rgba(255,255,255,.03) !important;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-table thead th { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.06); }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-table tbody td { color: #e5e7eb; border-color: rgba(255,255,255,.05); }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* Modals in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .modal-content {
    background: #161b1f;
    color: #e5e7eb;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .modal-header,
html[lw-theme-mode="dark"] body.lw-authenticated-page .modal-footer {
    border-color: rgba(255,255,255,.06);
}

/* Dropdown menus in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .dropdown-menu {
    background: #161b1f;
    border: 1px solid rgba(255,255,255,.08);
    color: #e5e7eb;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .dropdown-item { color: #e5e7eb; }
html[lw-theme-mode="dark"] body.lw-authenticated-page .dropdown-item:hover,
html[lw-theme-mode="dark"] body.lw-authenticated-page .dropdown-item:focus {
    background: rgba(255,255,255,.05);
    color: #fff;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .dropdown-divider { border-color: rgba(255,255,255,.08); }

/* Badges keep their color but shift contrast slightly */
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-badge-neutral { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }

/* Alerts in dark mode — soften to fit dark surface */
html[lw-theme-mode="dark"] body.lw-authenticated-page .alert-default,
html[lw-theme-mode="dark"] body.lw-authenticated-page .alert-dark,
html[lw-theme-mode="dark"] body.lw-authenticated-page .alert-light {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
}

/* Nav tabs in dark mode */
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content .nav-tabs {
    border-bottom-color: rgba(255,255,255,.08);
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content .nav-tabs .nav-link { color: rgba(255,255,255,.5); }
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content .nav-tabs .nav-link:hover { color: #fff; }
html[lw-theme-mode="dark"] body.lw-authenticated-page .main-content .nav-tabs .nav-link.active {
    color: #fff;
    border-bottom-color: var(--v2-brand-500);
}

/* Buttons in dark mode keep their tints but flip surface buttons */
html[lw-theme-mode="dark"] body.lw-authenticated-page .btn-default,
html[lw-theme-mode="dark"] body.lw-authenticated-page .btn-secondary,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-btn-outline {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    color: #e5e7eb;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .btn-default:hover,
html[lw-theme-mode="dark"] body.lw-authenticated-page .btn-secondary:hover,
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-btn-outline:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-btn-ghost { color: rgba(255,255,255,.6); }
html[lw-theme-mode="dark"] body.lw-authenticated-page .v2-btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
body.lw-authenticated-page h1,
body.lw-authenticated-page h2,
body.lw-authenticated-page h3,
body.lw-authenticated-page h4,
body.lw-authenticated-page h5,
body.lw-authenticated-page h6 {
    letter-spacing: -0.02em;
    font-family: var(--v2-font-sans);
    color: var(--v2-ink-900);
}

@keyframes v2-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: v2-fade-up .3s ease both; }

/* -------------------------------------------------- v2 Shell layout -- */
/* Reset main-content padding so the topbar sits flush at the top. */
body.lw-authenticated-page .main-content {
    padding: 0 !important;
    min-height: 100vh;
}
/* Offset main-content for the 220px fixed sidebar at lg+. Below lg, sidebar
   slides off-screen and main-content takes the full width. */
@media (min-width: 1024px) {
    body.lw-authenticated-page .main-content {
        margin-left: var(--v2-sidebar-w) !important;
    }
}
@media (max-width: 1023.98px) {
    body.lw-authenticated-page .main-content {
        margin-left: 0 !important;
    }
}

.v2-page {
    padding: 24px 24px 40px;
    animation: v2-fade-up .3s ease both;
}
@media (min-width: 1024px) { .v2-page { padding: 24px 32px 40px; } }

/* -------------------------------------------------- v2 Sidebar -- */
body.lw-authenticated-page #sidenav-main.v2-sidebar {
    background: #111111 !important;
    background-image: none !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.7);
    padding: 0;
    margin: 0;
    /* take it out of normal flow so it doesn't push main-content down */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: var(--v2-sidebar-w);
    max-width: var(--v2-sidebar-w);
    min-width: var(--v2-sidebar-w);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
}
body.lw-authenticated-page #sidenav-main.v2-sidebar > .v2-nav-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}
body.lw-authenticated-page #sidenav-main.v2-sidebar .v2-nav { flex: 1 1 auto; }
body.lw-authenticated-page #sidenav-main.v2-sidebar .v2-status-card { flex: 0 0 auto; }
/* Kill any decorative overlay the legacy sidebar styles add */
body.lw-authenticated-page #sidenav-main.v2-sidebar::before,
body.lw-authenticated-page #sidenav-main.v2-sidebar::after {
    background: transparent !important;
    content: none !important;
    display: none !important;
}
@media (max-width: 1023.98px) {
    body.lw-authenticated-page #sidenav-main.v2-sidebar {
        transform: translateX(-100%);
        z-index: 1050;
    }
    body.lw-authenticated-page #sidenav-main.v2-sidebar.v2-open { transform: translateX(0); }
    body.lw-authenticated-page .v2-sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.4);
        z-index: 1049; opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    body.lw-authenticated-page #sidenav-main.v2-sidebar.v2-open + .v2-sidebar-backdrop {
        opacity: 1; pointer-events: auto;
    }
}

.v2-sidebar .v2-brand-row {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 18px 16px 22px;
}
.v2-sidebar .v2-brand-mark {
    align-items: center;
    background: rgba(255,255,255,.1);
    border-radius: 0.5rem;
    color: #fff;
    display: inline-flex;
    height: 32px; width: 32px;
    justify-content: center;
}
.v2-sidebar .v2-brand-mark i { font-size: 15px; }
.v2-sidebar .v2-brand-text {
    color: #fff;
    font-family: var(--v2-font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.v2-sidebar .v2-brand-text .v2-brand-accent { color: var(--v2-brand-500); }
.v2-sidebar .v2-brand-tag {
    color: rgba(255,255,255,.35);
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-top: 3px;
    text-transform: uppercase;
}
.v2-sidebar .v2-brand-row--logo {
    justify-content: center;
    padding: 18px 12px 22px;
}
.v2-sidebar .v2-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
}
.v2-sidebar .v2-brand-logo:hover { text-decoration: none; }
.v2-sidebar .v2-brand-logo-img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    display: block;
}

.v2-sidebar .v2-nav { padding: 4px 12px 12px; }
.v2-sidebar .v2-nav-group { margin-top: 14px; }
.v2-sidebar .v2-nav-group:first-child { margin-top: 0; }
.v2-sidebar .v2-nav-group-label {
    color: rgba(255,255,255,.28);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0 12px 6px;
    text-transform: uppercase;
}
.v2-sidebar .v2-nav-item {
    align-items: center;
    border-radius: 0.5rem;
    color: rgba(255,255,255,.55);
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 12px;
    padding: 8px 12px;
    position: relative;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.v2-sidebar .v2-nav-item > i,
.v2-sidebar .v2-nav-item > svg {
    color: rgba(255,255,255,.45);
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
}
.v2-sidebar .v2-nav-item:hover {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
    text-decoration: none;
}
.v2-sidebar .v2-nav-item:hover > i,
.v2-sidebar .v2-nav-item:hover > svg { color: rgba(255,255,255,.85); }
.v2-sidebar .v2-nav-item.active {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.v2-sidebar .v2-nav-item.active > i,
.v2-sidebar .v2-nav-item.active > svg { color: #fff; }
.v2-sidebar .v2-nav-item.active::after {
    background: #fff;
    border-radius: 999px;
    content: "";
    height: 5px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
}
.v2-sidebar .v2-nav-item .v2-nav-badge {
    background: var(--v2-brand-500);
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    padding: 3px 7px;
}
.v2-sidebar .v2-nav-item .v2-chevron {
    color: rgba(255,255,255,.35);
    margin-left: auto;
    font-size: 10px;
    transition: transform .2s ease;
}
.v2-sidebar .v2-nav-item[aria-expanded="true"] .v2-chevron { transform: rotate(180deg); }
.v2-sidebar .v2-subnav { margin: 2px 0 4px 28px; padding: 0; }
.v2-sidebar .v2-subnav .v2-nav-item {
    font-size: 12.5px;
    padding: 6px 10px;
    color: rgba(255,255,255,.45);
}
.v2-sidebar .v2-subnav .v2-nav-item.active {
    background: transparent;
    color: #fff;
}
.v2-sidebar .v2-subnav .v2-nav-item.active::after { display: none; }
.v2-sidebar .v2-subnav .v2-nav-item.active::before {
    background: var(--v2-brand-500);
    border-radius: 999px;
    content: "";
    height: 4px;
    left: -12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
}

.v2-sidebar .v2-status-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 0.75rem;
    margin: 16px 14px 18px;
    padding: 14px;
}
.v2-sidebar .v2-status-card .v2-status-label {
    align-items: center;
    color: rgba(255,255,255,.5);
    display: flex;
    font-size: 10px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.v2-sidebar .v2-status-card .v2-status-value {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}
.v2-sidebar .v2-status-card .v2-status-bar {
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    height: 3px;
    margin-top: 10px;
    overflow: hidden;
}
.v2-sidebar .v2-status-card .v2-status-bar > span {
    background: #10b981;
    display: block;
    height: 100%;
    width: 85%;
}

/* Status dots */
.v2-dot {
    border-radius: 999px;
    display: inline-block;
    height: 6px;
    width: 6px;
    flex: 0 0 6px;
}
.v2-dot.v2-dot-online  { background: #10b981; }
.v2-dot.v2-dot-active  { background: var(--v2-brand-500); }
.v2-dot.v2-dot-queued  { background: #f59e0b; }
.v2-dot.v2-dot-failed  { background: #ef4444; }
.v2-dot.v2-pulse { animation: v2-pulse 1.6s ease-in-out infinite; }
@keyframes v2-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 4px rgba(16,185,129,0); opacity: .55; }
}

/* -------------------------------------------------- v2 Topbar -- */
body.lw-authenticated-page nav.v2-topbar,
body.lw-authenticated-page .v2-topbar {
    background: var(--v2-canvas-100) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--v2-ink-900) !important;
    height: var(--v2-topbar-h) !important;
    min-height: var(--v2-topbar-h) !important;
    margin: 0 !important;
    padding: 0 24px !important;
    position: sticky;
    top: 0;
    z-index: 1020;
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    overflow: visible;
}
/* Kill any pseudo-overlay (e.g. existing .navbar-top::before green tint) */
body.lw-authenticated-page nav.v2-topbar::before,
body.lw-authenticated-page nav.v2-topbar::after,
body.lw-authenticated-page .v2-topbar::before,
body.lw-authenticated-page .v2-topbar::after {
    background: transparent !important;
    content: none !important;
    display: none !important;
}
@media (min-width: 1024px) { body.lw-authenticated-page .v2-topbar { padding: 0 32px; } }
.v2-topbar .v2-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2-topbar .v2-topbar-title {
    color: var(--v2-ink-900);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
.v2-topbar .v2-topbar-subtitle {
    color: var(--v2-neutral-400);
    font-size: 12px;
    margin: 1px 0 0;
}
.v2-topbar .v2-topbar-right {
    align-items: center;
    display: flex;
    gap: 10px;
}
.v2-topbar .v2-pill-live {
    align-items: center;
    background: rgba(16,185,129,.1);
    border-radius: 999px;
    color: #047857;
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    text-transform: uppercase;
}
.v2-topbar .v2-icon-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--v2-neutral-600);
    display: inline-flex;
    height: 36px; width: 36px;
    justify-content: center;
    transition: background-color .15s ease;
}
.v2-topbar .v2-icon-btn:hover { background: rgba(0,0,0,.05); color: var(--v2-ink-900); }
.v2-topbar .v2-account {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--v2-ink-900);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    transition: background-color .15s ease;
}
.v2-topbar .v2-account:hover { background: rgba(0,0,0,.04); }
.v2-topbar .v2-avatar {
    align-items: center;
    background: #111;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 28px; width: 28px;
    justify-content: center;
    text-transform: uppercase;
}
.v2-topbar .v2-mobile-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--v2-ink-900);
    display: inline-flex;
    height: 36px; width: 36px;
    justify-content: center;
}
@media (min-width: 1024px) { .v2-topbar .v2-mobile-toggle { display: none; } }
@media (max-width: 575.98px) { .v2-topbar .v2-pill-live { display: none; } }

/* -------------------------------------------------- v2 Card primitives -- */
.v2-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--v2-radius-2xl);
    box-shadow: var(--v2-shadow-card);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.v2-card:hover { box-shadow: var(--v2-shadow-card-md); }
.v2-card-p5 { padding: 20px; }
.v2-card-p6 { padding: 24px; }

/* -------------------------------------------------- v2 Section eyebrow -- */
.v2-eyebrow {
    color: var(--v2-brand-500);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.v2-eyebrow + .v2-section-title,
.v2-section-title {
    color: var(--v2-ink-900);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}
.v2-section-sub {
    color: var(--v2-neutral-500);
    font-size: 13px;
    margin: 0 0 16px;
}

/* -------------------------------------------------- v2 Stat card -- */
.v2-stat {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--v2-radius-2xl);
    box-shadow: var(--v2-shadow-card);
    padding: 20px;
    transition: box-shadow .15s ease;
}
.v2-stat:hover { box-shadow: var(--v2-shadow-card-md); }
.v2-stat-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}
.v2-stat-label {
    color: var(--v2-neutral-400);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.v2-stat-icon {
    align-items: center;
    background: rgba(0,0,0,.04);
    border-radius: 0.5rem;
    color: var(--v2-ink-900);
    display: inline-flex;
    height: 28px; width: 28px;
    justify-content: center;
    font-size: 13px;
}
.v2-stat-value {
    color: var(--v2-ink-900);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2-stat-hint {
    color: var(--v2-neutral-400);
    font-size: 12px;
    margin-top: 6px;
}
.v2-stat-hint .v2-trend-up   { color: #047857; }
.v2-stat-hint .v2-trend-down { color: #b91c1c; }

/* -------------------------------------------------- v2 Brand hero card -- */
.v2-hero {
    background: var(--v2-brand-500);
    border-radius: var(--v2-radius-2xl);
    color: #fff;
    overflow: hidden;
    padding: 24px;
    position: relative;
}
.v2-hero .v2-hero-bg-icon {
    color: rgba(255,255,255,.18);
    font-size: 140px;
    pointer-events: none;
    position: absolute;
    right: -28px;
    top: -36px;
    transform: rotate(-12deg) translateY(-4px);
    transition: transform .35s ease;
}
.v2-hero:hover .v2-hero-bg-icon { transform: rotate(-12deg) translateY(0); }
.v2-hero .v2-hero-eyebrow {
    color: rgba(255,255,255,.7);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.v2-hero .v2-hero-value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 8px 0 6px;
}
.v2-hero .v2-hero-text {
    color: rgba(255,255,255,.85);
    font-size: 13px;
    margin: 0;
}

/* -------------------------------------------------- v2 Badges -- */
.v2-badge {
    align-items: center;
    border-radius: 0.375rem;
    display: inline-flex;
    font-size: 11px;
    font-weight: 500;
    gap: 4px;
    line-height: 1;
    padding: 4px 8px;
}
.v2-badge-neutral { background: rgba(0,0,0,.05); color: var(--v2-neutral-600); }
.v2-badge-success { background: #ecfdf5;        color: #047857; }
.v2-badge-warn    { background: #fffbeb;        color: #b45309; }
.v2-badge-danger  { background: #fef2f2;        color: #b91c1c; }
.v2-badge-brand   { background: rgba(0,168,132,.1); color: var(--v2-brand-700); }

/* -------------------------------------------------- v2 Buttons / Inputs -- */
.v2-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    line-height: 1;
    padding: 9px 16px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}
.v2-btn:focus-visible {
    outline: 2px solid var(--v2-brand-500);
    outline-offset: 2px;
}
.v2-btn-primary {
    background: var(--v2-brand-500);
    color: #fff;
}
.v2-btn-primary:hover { background: var(--v2-brand-600); color: #fff; text-decoration: none; }
.v2-btn-ghost {
    background: transparent;
    color: var(--v2-neutral-600);
}
.v2-btn-ghost:hover { background: rgba(0,0,0,.05); color: var(--v2-ink-900); text-decoration: none; }
.v2-btn-outline {
    background: #fff;
    border-color: rgba(0,0,0,.12);
    color: var(--v2-ink-900);
}
.v2-btn-outline:hover { background: rgba(0,0,0,.03); }

.v2-input {
    background: #fff;
    border: 1px solid var(--v2-neutral-200);
    border-radius: 0.5rem;
    color: var(--v2-ink-900);
    font-size: 13px;
    line-height: 1.5;
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}
.v2-input:focus {
    border-color: var(--v2-brand-500);
    box-shadow: 0 0 0 2px rgba(0,168,132,.15);
    outline: none;
}

/* -------------------------------------------------- Tables inside cards -- */
.v2-table { width: 100%; border-collapse: collapse; }
.v2-table thead th {
    color: var(--v2-neutral-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    text-align: left;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.v2-table tbody td {
    color: var(--v2-ink-900);
    font-size: 13px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    vertical-align: middle;
}
.v2-table tbody tr:hover { background: var(--v2-canvas-50); }
.v2-table tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------- Argon overrides under v2 shell -- */
/* Hide Argon's old top dark bar when v2 topbar is rendered */
body.lw-authenticated-page .main-content > nav.navbar-top { display: none !important; }
/* Reset Argon padding-top on main-content */
body.lw-authenticated-page .main-content { padding-top: 0; }

/* =====================================================================
   v2 Live Chat polish — sits ON TOP of the existing premium chat block.
   Goals:
     - drop the outer card chrome so chat fits the new flat cream shell
     - solid brand bubble for outbound (real WhatsApp look + prompt spec)
     - restyle contact-list label / unread badge with v2 tokens
   Existing markup, classes, Alpine bindings, and JS hooks stay untouched.
   ===================================================================== */

/* Outer wrapper — flat, no shadow halo, sits on cream */
body.lw-authenticated-page .lw-chat-main-container { padding: 24px 24px 32px; }
@media (min-width: 1024px) { body.lw-authenticated-page .lw-chat-main-container { padding: 24px 32px 40px; } }
body.lw-authenticated-page .card.lw-whatsapp-chat-block-container {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--v2-radius-2xl) !important;
    box-shadow: var(--v2-shadow-card);
    overflow: hidden;
}
body.lw-authenticated-page .card.lw-whatsapp-chat-block-container > .card-body.lw-whatsapp-chat-window {
    background: var(--v2-canvas-100);
    padding: 0 !important;
}

/* Left rail — slimmer 320px feel, brighter list */
body.lw-authenticated-page .lw-contact-list-block {
    background: #fff;
    border-right: 1px solid rgba(0,0,0,.06);
    padding: 16px 14px;
}
body.lw-authenticated-page .lw-contacts-header {
    background: var(--v2-canvas-100);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 0.75rem;
}
body.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link.active {
    background: var(--v2-brand-500);
    box-shadow: 0 4px 14px rgba(0,168,132,.22);
    color: #fff;
}
body.lw-authenticated-page .lw-contacts-header .nav-tabs .nav-link:not(.active) .badge {
    background: rgba(0,168,132,.1);
    color: var(--v2-brand-700) !important;
}
body.lw-authenticated-page .lw-contact-list-item-selected,
body.lw-authenticated-page .lw-contact-list .lw-contact-list-item-selected {
    background: rgba(0,168,132,.08) !important;
    border-color: rgba(0,168,132,.22) !important;
    box-shadow: inset 3px 0 0 0 var(--v2-brand-500) !important;
}
body.lw-authenticated-page .lw-contact .badge {
    background: var(--v2-brand-500) !important;
    border-radius: 999px;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
}

/* Right rail (contact CRM) */
body.lw-authenticated-page .lw-contact-crm-block {
    background: #fff;
    border-left: 1px solid rgba(0,0,0,.06);
    padding: 16px 14px;
}

/* Outbound bubble — solid brand green with white text (matches WhatsApp + prompt spec) */
body.lw-authenticated-page .message.sent {
    background: var(--v2-brand-500) !important;
    color: #fff !important;
    border-radius: var(--v2-radius-2xl) !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: var(--v2-radius-2xl) !important;
}
body.lw-authenticated-page .message.sent:after {
    border-color: transparent transparent transparent var(--v2-brand-500) !important;
}
body.lw-authenticated-page .message.sent .metadata .time { color: rgba(255,255,255,.7) !important; }
body.lw-authenticated-page .message.sent .metadata .tick svg path,
body.lw-authenticated-page .message.sent .metadata .tick img { filter: brightness(0) invert(1); opacity: .85; }
body.lw-authenticated-page .message.sent .lw-plain-message-text,
body.lw-authenticated-page .message.sent .lw-plain-message-text a { color: #fff !important; }
body.lw-authenticated-page .message.sent .text-muted { color: rgba(255,255,255,.6) !important; }
body.lw-authenticated-page .message.sent .badge i { color: rgba(255,255,255,.85) !important; }

/* Inbound bubble — softer corners and 10px timestamp per spec */
body.lw-authenticated-page .message.received {
    border-radius: var(--v2-radius-2xl) !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: var(--v2-radius-2xl) !important;
}
body.lw-authenticated-page .message .metadata .time {
    color: var(--v2-neutral-400) !important;
    font-size: 10px !important;
}

/* "Bot is replying" indicator (3 pulsing brand dots) — opt-in via .v2-typing class */
.v2-typing { align-items: center; display: inline-flex; gap: 4px; padding: 8px 12px; }
.v2-typing span {
    background: var(--v2-brand-500);
    border-radius: 999px;
    height: 6px; width: 6px;
    animation: v2-typing-bounce 1.2s ease-in-out infinite;
}
.v2-typing span:nth-child(2) { animation-delay: .15s; }
.v2-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes v2-typing-bounce {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* =====================================================================
   v2 Global polish — auto-styles fieldset/legend, alerts, .card, form
   controls, and the legacy page-header banner. Lifts every page that
   uses these patterns without requiring per-page edits.
   ===================================================================== */

/* --- Suppress the old page-header banner everywhere; topbar carries the title.
       Hide the entire legacy `users/partials/header` and `layouts/headers/cards`
       wrappers (any `.main-content > .header[pb-*|py-*|pt-*]`) — leaving only
       the legitimate `.lw-breadcrumb-container` and content through. --- */
body.lw-authenticated-page .main-content .header.pb-0,
body.lw-authenticated-page .main-content .header.pb-5,
body.lw-authenticated-page .main-content .header.pb-8,
body.lw-authenticated-page .main-content .header.py-4,
body.lw-authenticated-page .main-content > .header[class*="pt-"],
body.lw-authenticated-page .main-content > div > .header[class*="pt-"] {
    display: none !important;
}

/* --- Page padding wrapper (when content uses .container-fluid) --- */
body.lw-authenticated-page .main-content > .container-fluid,
body.lw-authenticated-page .main-content > div > .container-fluid {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 32px;
}
@media (min-width: 1024px) {
    body.lw-authenticated-page .main-content > .container-fluid,
    body.lw-authenticated-page .main-content > div > .container-fluid {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* --- Fieldset/legend → card-like wrapper with section heading --- */
body.lw-authenticated-page fieldset {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--v2-radius-2xl);
    box-shadow: var(--v2-shadow-card);
    margin-bottom: 16px;
    padding: 24px !important;
    transition: box-shadow .15s ease;
}
body.lw-authenticated-page fieldset:hover { box-shadow: var(--v2-shadow-card-md); }
body.lw-authenticated-page fieldset > legend {
    border-bottom: 1px solid rgba(0,0,0,.05);
    color: var(--v2-ink-900);
    font-family: var(--v2-font-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: -4px 0 16px;
    padding-bottom: 12px;
    width: 100%;
}
/* Nested fieldsets shouldn't double-card; keep them flat */
body.lw-authenticated-page fieldset fieldset {
    background: var(--v2-canvas-50);
    border-color: rgba(0,0,0,.06);
    box-shadow: none;
    padding: 16px !important;
}
body.lw-authenticated-page fieldset fieldset > legend {
    font-size: 13px;
    border-bottom: 0;
    margin-bottom: 8px;
    padding-bottom: 4px;
}
/* Argon's labels-filter fieldset opt-out (chat list label filter) */
body.lw-authenticated-page .lw-labels-filter-fieldset {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.lw-authenticated-page .lw-labels-filter-fieldset > legend {
    border-bottom: 0;
    font-size: 12px;
    margin-bottom: 4px;
    padding-bottom: 2px;
}

/* --- Card chrome (Bootstrap/Argon .card) — v2 tokens --- */
body.lw-authenticated-page > .main-content .card,
body.lw-authenticated-page .main-content .card:not(.lw-whatsapp-chat-block-container) {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--v2-radius-2xl);
    box-shadow: var(--v2-shadow-card);
}
body.lw-authenticated-page .main-content .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.05);
    padding: 18px 24px;
}
body.lw-authenticated-page .main-content .card-body { padding: 20px 24px; }
body.lw-authenticated-page .main-content .card-footer {
    background: transparent;
    border-top: 1px solid rgba(0,0,0,.05);
}

/* --- Alerts --- */
body.lw-authenticated-page .alert {
    border-radius: var(--v2-radius-lg);
    border-width: 1px;
    border-style: solid;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 16px;
}
body.lw-authenticated-page .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
body.lw-authenticated-page .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
body.lw-authenticated-page .alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
body.lw-authenticated-page .alert-info {
    background: rgba(0,168,132,.08);
    border-color: rgba(0,168,132,.2);
    color: var(--v2-brand-700);
}
body.lw-authenticated-page .alert-default,
body.lw-authenticated-page .alert-dark {
    background: var(--v2-canvas-50);
    border-color: rgba(0,0,0,.08);
    color: var(--v2-neutral-700);
}
body.lw-authenticated-page .alert-light {
    background: var(--v2-canvas-100);
    border-color: rgba(0,0,0,.08);
    color: var(--v2-ink-900);
}

/* --- Form controls --- */
body.lw-authenticated-page .form-control,
body.lw-authenticated-page .custom-select {
    background: #fff;
    border: 1px solid var(--v2-neutral-200);
    border-radius: 0.5rem;
    color: var(--v2-ink-900);
    font-size: 13px;
    padding: 9px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.lw-authenticated-page .form-control:focus,
body.lw-authenticated-page .custom-select:focus {
    border-color: var(--v2-brand-500);
    box-shadow: 0 0 0 2px rgba(0,168,132,.15);
}
body.lw-authenticated-page label,
body.lw-authenticated-page .form-control-label {
    color: var(--v2-neutral-700);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* --- Bootstrap buttons → v2 token mapping --- */
body.lw-authenticated-page .btn {
    border-radius: 0.5rem;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 9px 16px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body.lw-authenticated-page .btn-sm { font-size: 12px; padding: 6px 12px; }
body.lw-authenticated-page .btn-primary {
    background: var(--v2-brand-500);
    border-color: var(--v2-brand-500);
    box-shadow: none;
}
body.lw-authenticated-page .btn-primary:hover,
body.lw-authenticated-page .btn-primary:focus {
    background: var(--v2-brand-600);
    border-color: var(--v2-brand-600);
    box-shadow: none;
}
body.lw-authenticated-page .btn-success {
    background: var(--v2-brand-500);
    border-color: var(--v2-brand-500);
}
body.lw-authenticated-page .btn-success:hover {
    background: var(--v2-brand-600);
    border-color: var(--v2-brand-600);
}
body.lw-authenticated-page .btn-default,
body.lw-authenticated-page .btn-secondary {
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    color: var(--v2-ink-900);
    box-shadow: none;
}
body.lw-authenticated-page .btn-default:hover,
body.lw-authenticated-page .btn-secondary:hover {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.18);
    color: var(--v2-ink-900);
}
body.lw-authenticated-page .btn-light {
    background: var(--v2-canvas-100);
    border-color: rgba(0,0,0,.08);
    color: var(--v2-ink-900);
}
body.lw-authenticated-page .btn-link { color: var(--v2-brand-700); }

/* --- Bootstrap badges → v2 styling --- */
body.lw-authenticated-page .badge {
    border-radius: 0.375rem;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 4px 8px;
}
body.lw-authenticated-page .badge-success { background: #ecfdf5; color: #047857; }
body.lw-authenticated-page .badge-warning { background: #fffbeb; color: #b45309; }
body.lw-authenticated-page .badge-danger  { background: #fef2f2; color: #b91c1c; }
body.lw-authenticated-page .badge-info    { background: rgba(0,168,132,.1); color: var(--v2-brand-700); }
body.lw-authenticated-page .badge-primary { background: var(--v2-brand-500); color: #fff; }

/* --- Breadcrumb under topbar --- */
body.lw-authenticated-page .lw-breadcrumb-container .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}
body.lw-authenticated-page .lw-breadcrumb-container .breadcrumb-item,
body.lw-authenticated-page .lw-breadcrumb-container .breadcrumb-item a {
    color: var(--v2-neutral-500) !important;
    font-size: 12px;
}
body.lw-authenticated-page .lw-breadcrumb-container .breadcrumb-item a { color: var(--v2-brand-700) !important; }

/* --- Tables outside chat --- */
body.lw-authenticated-page .main-content table.table:not(.lw-vendor-table) {
    color: var(--v2-ink-900);
}
body.lw-authenticated-page .main-content table.table thead th {
    background: var(--v2-canvas-50);
    border-bottom: 1px solid rgba(0,0,0,.06);
    border-top: 0;
    color: var(--v2-neutral-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    text-transform: uppercase;
}
body.lw-authenticated-page .main-content table.table tbody td {
    border-top: 1px solid rgba(0,0,0,.04);
    color: var(--v2-ink-900);
    font-size: 13px;
    padding: 14px 16px;
    vertical-align: middle;
}

/* --- Nav tabs (Active/Archive, page-level switchers) --- */
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) {
    border-bottom: 1px solid rgba(0,0,0,.06);
    gap: 4px;
    margin-bottom: 16px;
    padding: 0;
}
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) > .nav-item > .nav-link,
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) > .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--v2-neutral-500);
    font-size: 13px;
    font-weight: 500;
    margin: 0 4px -1px 0;
    padding: 10px 14px;
    transition: color .15s ease, border-color .15s ease;
}
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) > .nav-item > .nav-link:hover,
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) > .nav-link:hover {
    color: var(--v2-ink-900);
}
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) > .nav-item > .nav-link.active,
body.lw-authenticated-page .main-content .nav-tabs:not(.lw-contacts-header *) > .nav-link.active {
    background: transparent;
    border-bottom-color: var(--v2-brand-500);
    color: var(--v2-ink-900);
    font-weight: 600;
}

/* --- Tables: kill zebra striping per spec --- */
body.lw-authenticated-page .main-content table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
body.lw-authenticated-page .main-content table.table tbody tr:hover,
body.lw-authenticated-page .main-content table.table-striped tbody tr:hover {
    background: var(--v2-canvas-50) !important;
}

/* --- Modals — round corners --- */
body.lw-authenticated-page .modal-content {
    border: 0;
    border-radius: var(--v2-radius-2xl);
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

/* --- Kill the legacy 80vh inner-scroll cap.
       app.css defines `.lw-scrollable-main-card { height: 80vh; overflow-y: scroll }`
       which clips long forms (e.g. configuration/settings, vendor/settings) and
       hides anything beyond ~80% viewport height. With the new sticky topbar
       the whole page scrolls naturally — no need for an inner scrollbar. --- */
body.lw-authenticated-page .lw-scrollable-main-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}
body.lw-authenticated-page .modal-header {
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 18px 24px;
}
body.lw-authenticated-page .modal-body  { padding: 20px 24px; }
body.lw-authenticated-page .modal-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 16px 24px;
}

/* -------------------------------------------------- Quick action button row -- */
.lw-quick-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}
.lw-quick-actions--icons {
    min-width: max-content;
}
.lw-quick-actions > .btn {
    margin: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lw-quick-actions > .btn i { margin: 0; }

/* Make sure the table cell hosting the action row never collapses below content */
table.dataTable td:has(.lw-quick-actions--icons) {
    min-width: max-content;
    white-space: nowrap;
}

/* Icon-only buttons (use [title] for native tooltip on hover) */
.lw-icon-btn,
.lw-icon-btn.btn,
.lw-icon-btn.btn-sm {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 0 rgba(255, 255, 255, .4) inset;
    transition: transform .18s var(--lw-ease, cubic-bezier(.4,0,.2,1)),
                box-shadow .18s ease,
                filter .18s ease;
    border-width: 1px !important;
    position: relative;
}
.lw-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .12), 0 1px 0 rgba(255, 255, 255, .45) inset;
    filter: brightness(1.04);
    text-decoration: none;
}
.lw-icon-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12) inset;
}
.lw-icon-btn:focus-visible {
    outline: 2px solid rgba(0, 168, 132, .55);
    outline-offset: 2px;
}
.lw-icon-btn .lw-icon-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.lw-icon-btn i {
    font-size: 14px;
    line-height: 1;
    margin: 0 !important;
}

/* Per-color polish — solid fills with subtle gradient */
.lw-icon-btn.btn-light,
.lw-icon-btn.btn-default {
    background: #fff !important;
    border-color: #E5E7EB !important;
    color: var(--lw-ink-700, #334155) !important;
}
.lw-icon-btn.btn-light:hover,
.lw-icon-btn.btn-default:hover {
    background: #F8FBFA !important;
    border-color: var(--lw-green-300, #6EE7B7) !important;
    color: var(--lw-green-700, #047857) !important;
}
.lw-icon-btn.btn-primary {
    background: linear-gradient(135deg, #00A884 0%, #25D366 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.lw-icon-btn.btn-success {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.lw-icon-btn.btn-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.lw-icon-btn.btn-danger {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Keep action row inline in DataTables responsive child rows */
.dtr-details .lw-quick-actions,
.dtr-details td .lw-quick-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle;
}
.dtr-details li > .dtr-title { margin-right: 8px; }

/* -------------------------------------------------- Overall Health card -- */
body.lw-authenticated-page fieldset.lw-health-card { padding: 20px !important; }
.lw-health-card__action {
    margin: 4px 0 14px;
}
.lw-health-card__action .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    font-weight: 600;
}
.lw-health-list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid rgba(15, 23, 42, .06);
}
.lw-health-list dt,
.lw-health-list dd {
    margin: 0;
    padding: 10px 0;
    font-size: .88rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}
.lw-health-list dt {
    color: var(--lw-ink-500, #64748B);
    font-weight: 600;
    padding-bottom: 2px;
}
.lw-health-list dd {
    color: var(--lw-ink-800, #1E293B);
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    margin-bottom: 0;
}
.lw-health-list dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.lw-health-list dt:first-of-type { padding-top: 14px; }