/*!
 * WhatsJet ↔ Tabler integration overrides
 * Loaded only when body has class `lw-tabler-ui`.
 *
 * Purpose:
 * 1. Glue Tabler's vertical navbar with the existing `<div class="main-content">` wrapper
 * 2. Patch a few Argon BS4 ↔ Tabler BS5 visual mismatches on legacy pages
 * 3. Set the global font to Tabler's Inter
 */

/* ========================================================================
   1. PAGE LAYOUT GLUE  (acts as Tabler's .page-wrapper)
   ======================================================================== */
@media (min-width: 992px) {
    body.lw-tabler-ui .main-content {
        margin-left: 15rem !important;  /* matches Tabler navbar-vertical width */
        background: transparent !important;
    }
}
@media (max-width: 991.98px) {
    body.lw-tabler-ui .main-content {
        margin-left: 0 !important;
        background: transparent !important;
    }
}

body.lw-tabler-ui {
    background: var(--tblr-body-bg, #f5f7fb) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Hide Argon's old top navbar when Tabler is on */
body.lw-tabler-ui #navbar-main:not(.tabler-keep) { display: none !important; }

/* ========================================================================
   2. TYPOGRAPHY (override Argon's Open Sans default)
   ======================================================================== */
body.lw-tabler-ui,
body.lw-tabler-ui h1, body.lw-tabler-ui h2, body.lw-tabler-ui h3,
body.lw-tabler-ui h4, body.lw-tabler-ui h5, body.lw-tabler-ui h6,
body.lw-tabler-ui p, body.lw-tabler-ui label,
body.lw-tabler-ui .form-control, body.lw-tabler-ui .btn,
body.lw-tabler-ui .nav-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ========================================================================
   3. PAGE HEADER (kill Argon's blue gradient bands)
   ======================================================================== */
body.lw-tabler-ui .header.bg-default,
body.lw-tabler-ui .header.bg-info,
body.lw-tabler-ui .header.bg-primary,
body.lw-tabler-ui .header.bg-gradient-default,
body.lw-tabler-ui .header.bg-gradient-info,
body.lw-tabler-ui .header.bg-gradient-primary,
body.lw-tabler-ui .header-body.bg-default,
body.lw-tabler-ui .header-body.bg-info {
    background: transparent !important;
    background-image: none !important;
    color: var(--tblr-body-color, #1d273b) !important;
    padding-top: 24px !important;
    padding-bottom: 16px !important;
    box-shadow: none !important;
}
body.lw-tabler-ui .header h1, body.lw-tabler-ui .header h2,
body.lw-tabler-ui .header h3, body.lw-tabler-ui .header .text-white,
body.lw-tabler-ui .header .display-2, body.lw-tabler-ui .header .display-3 {
    color: var(--tblr-body-color, #1d273b) !important;
    font-weight: 700 !important;
}
body.lw-tabler-ui .header p,
body.lw-tabler-ui .header .lead {
    color: var(--tblr-secondary, #66758c) !important;
}
body.lw-tabler-ui .header .separator,
body.lw-tabler-ui .header .separator-bottom { display: none !important; }

/* ========================================================================
   4. ARGON BS4 → TABLER BS5 CLASS BRIDGE
   Argon uses .float-right / .ml-2 / .text-right (BS4 names).
   Tabler ships only BS5 names. Without these, layouts on legacy pages may break.
   These rules re-implement the BS4 utility behavior.
   ======================================================================== */
body.lw-tabler-ui .float-right { float: right !important; }
body.lw-tabler-ui .float-left  { float: left !important; }
body.lw-tabler-ui .text-right  { text-align: right !important; }
body.lw-tabler-ui .text-left   { text-align: left !important; }

/* ml-* / mr-* / pl-* / pr-* (BS4 → BS5 logical) */
body.lw-tabler-ui .ml-1 { margin-left: 0.25rem !important; }
body.lw-tabler-ui .ml-2 { margin-left: 0.5rem !important; }
body.lw-tabler-ui .ml-3 { margin-left: 1rem !important; }
body.lw-tabler-ui .ml-4 { margin-left: 1.5rem !important; }
body.lw-tabler-ui .ml-5 { margin-left: 3rem !important; }
body.lw-tabler-ui .ml-auto { margin-left: auto !important; }
body.lw-tabler-ui .mr-1 { margin-right: 0.25rem !important; }
body.lw-tabler-ui .mr-2 { margin-right: 0.5rem !important; }
body.lw-tabler-ui .mr-3 { margin-right: 1rem !important; }
body.lw-tabler-ui .mr-4 { margin-right: 1.5rem !important; }
body.lw-tabler-ui .mr-5 { margin-right: 3rem !important; }
body.lw-tabler-ui .mr-auto { margin-right: auto !important; }
body.lw-tabler-ui .pl-1 { padding-left: 0.25rem !important; }
body.lw-tabler-ui .pl-2 { padding-left: 0.5rem !important; }
body.lw-tabler-ui .pl-3 { padding-left: 1rem !important; }
body.lw-tabler-ui .pl-4 { padding-left: 1.5rem !important; }
body.lw-tabler-ui .pl-5 { padding-left: 3rem !important; }
body.lw-tabler-ui .pr-1 { padding-right: 0.25rem !important; }
body.lw-tabler-ui .pr-2 { padding-right: 0.5rem !important; }
body.lw-tabler-ui .pr-3 { padding-right: 1rem !important; }
body.lw-tabler-ui .pr-4 { padding-right: 1.5rem !important; }
body.lw-tabler-ui .pr-5 { padding-right: 3rem !important; }

/* fieldset / legend (Argon styles them as cards) */
body.lw-tabler-ui fieldset {
    background: var(--tblr-card-bg, #ffffff) !important;
    border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
    border-radius: var(--tblr-card-border-radius, 4px) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    padding: 20px !important;
    margin-bottom: 20px;
}
body.lw-tabler-ui fieldset legend {
    color: var(--tblr-body-color, #1d273b) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px;
    width: auto;
}

/* ========================================================================
   5. INPUT GROUP APPEND/PREPEND (BS4-only, use prepend/append)
   Argon templates use .input-group-append; Tabler/BS5 don't have it but we keep behavior
   ======================================================================== */
body.lw-tabler-ui .input-group-append .btn,
body.lw-tabler-ui .input-group-prepend .btn {
    z-index: 2;
}

/* ========================================================================
   6. CHAT — WhatsApp Web 2024 exact theme  (HIGH SPECIFICITY)
   Colors match WA Web: header #f0f2f5, sent bubble #d9fdd3, received #fff,
   thread backdrop #efeae2, composer bar #f0f2f5, accent green #00a884.
   Original whatsapp-chat.css uses 4-class deep selectors:
     `.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .X`
   We mirror + body.lw-tabler-ui prefix to win cascade.
   ======================================================================== */

/* --- Outer frame: KILL IT (full-bleed) --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container {
    background: #ffffff !important;
    background-image: none !important;
    color: #111b21 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    margin: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .card-body {
    background: transparent !important;
    color: #111b21 !important;
    padding: 0 !important;
}

/* Container wrapper — full height, no extra margin */
body.lw-tabler-ui .lw-whatsapp-chat-window,
body.lw-tabler-ui #lwWhatsAppChatWindow {
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden;
    height: calc(100vh - 110px);
    min-height: 600px;
}

/* --- Kill the marvel-device phone-frame entirely --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device.nexus5 {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    height: 100% !important;
    max-height: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    flex: 1 1 auto !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device::before,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device::after,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .top-bar,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .bottom-bar,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .home-button,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .sleep,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .volume,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .speaker,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .camera,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .sensors,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .more-sensors,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .status-bar {
    display: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .screen {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: 100% !important;
    text-align: left !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .screen-container {
    height: 100% !important;
    background: transparent !important;
}

/* chat-container had dark forest. Kill it */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .chat-container {
    background: transparent !important;
    background-image: none !important;
    height: 100% !important;
    border-left: 1px solid #e9edef;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .chat,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window #lwChatWindowBox {
    background: transparent !important;
    background-image: none !important;
    height: 100% !important;
}

/* --- USER BAR (top of message thread) — WhatsApp Web light gray header --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
    background: #f0f2f5 !important;
    background-image: none !important;
    color: #111b21 !important;
    border-bottom: 1px solid #e9edef !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 16px !important;
    min-height: 59px !important;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar > div {
    float: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .avatar {
    background: linear-gradient(135deg, #00a884, #008069) !important;
    background-image: linear-gradient(135deg, #00a884, #008069) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name {
    color: #111b21 !important;
    flex: 1 1 auto;
    margin: 0 !important;
    width: auto !important;
    overflow: hidden;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name > span,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name > span > span {
    color: #111b21 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    display: block;
    line-height: 1.3;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name small {
    color: #667781 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name a {
    color: #667781 !important;
    text-decoration: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .status,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .status.text-success,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .status.text-yellow,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .status.text-warning,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name .status {
    color: #667781 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    display: block;
    line-height: 1.3;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .status.text-success { color: #008069 !important; }
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .actions {
    color: #54656f !important;
    margin: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .actions i {
    color: #54656f !important;
}

/* Edit Contact button + other action buttons in user-bar — clean ghost style */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .btn,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .lw-btn {
    background: transparent !important;
    background-image: none !important;
    color: #54656f !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    box-shadow: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .btn:hover {
    background: rgba(11, 20, 26, 0.08) !important;
    color: #111b21 !important;
}
/* The Edit Contact button text label — keep it visible if there's text */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .btn-light {
    background: transparent !important;
    color: #54656f !important;
    border: 1px solid #d1d7db !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    width: auto;
    height: auto;
    font-size: 12.5px;
    font-weight: 500;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .btn-light:hover {
    background: #f5f6f6 !important;
    color: #111b21 !important;
}

/* --- Conversation pane: WhatsApp Web's iconic cream backdrop with subtle pattern --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
    background: #efeae2 !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='1' fill='%23000' fill-opacity='0.025'/></svg>") !important;
    background-color: #efeae2 !important;
    border-radius: 0 !important;
    height: calc(100% - 60px - 64px) !important;
    padding: 12px 6% 16px !important;
}

/* --- MESSAGES: WhatsApp Web bubbles --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message {
    color: #111b21 !important;
    font-size: 14.2px !important;
    line-height: 1.4 !important;
    margin: 4px 0 !important;
    max-width: 65% !important;
    padding: 6px 9px 8px !important;
    border-radius: 7.5px !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13) !important;
    backdrop-filter: none !important;
    transition: none !important;
    position: relative;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message:hover {
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13) !important;
}
/* Received: white bubble */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.received {
    background: #ffffff !important;
    background-image: none !important;
    color: #111b21 !important;
    border: none !important;
    border-radius: 7.5px 7.5px 7.5px 0 !important;
    float: left !important;
}
/* Sent: WA Web's iconic light green bubble #d9fdd3 with dark text */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.sent {
    background: #d9fdd3 !important;
    background-image: none !important;
    color: #111b21 !important;
    border: none !important;
    border-radius: 7.5px 7.5px 0 7.5px !important;
    float: right !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13) !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.sent a {
    color: #027eb5 !important;
    text-decoration: underline;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.received a {
    color: #027eb5 !important;
    text-decoration: underline;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.received .metadata .time,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.sent .metadata .time {
    color: #667781 !important;
    font-size: 11px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .metadata .tick,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .metadata .tick svg {
    color: #53bdeb !important;
    fill: #53bdeb !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.sent .lw-template-message,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.sent .lw-template-message * {
    color: #111b21 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.received .lw-template-message,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message.received .lw-template-message * {
    color: #111b21 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message .lw-whatsapp-preview,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message .lw-whatsapp-preview .card,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message .lw-whatsapp-preview .card-body {
    background: rgba(255,255,255,.55) !important;
    background-image: none !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    color: #111b21 !important;
    border-radius: 6px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .lw-highlight-replied-message {
    background: rgba(0, 168, 132, .12) !important;
    outline: 1px solid rgba(0, 168, 132, .30) !important;
}

/* --- COMPOSER (input bar) — WA Web light gray --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose {
    background: #f0f2f5 !important;
    background-image: none !important;
    border-top: none !important;
    padding: 10px 16px !important;
    height: auto !important;
    min-height: 64px;
    align-items: center;
    gap: 8px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose > div,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose input {
    background: transparent !important;
    background-image: none !important;
    color: #111b21 !important;
    height: auto !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .input-msg {
    background: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    color: #111b21 !important;
    padding: 9px 16px !important;
    font-size: 15px !important;
    flex: 1 1 auto !important;
    min-height: 42px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .04);
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .input-msg::placeholder {
    color: #54656f !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .input-msg:focus {
    background: #ffffff !important;
    border: none !important;
    outline: none;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .04), 0 0 0 1px #00a884 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .emoji,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .photo {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    margin: 0 !important;
    width: auto !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .emoji i,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .photo i,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .lw-whatsapp-bar-icon-btn i {
    color: #54656f !important;
    font-size: 22px !important;
    transition: color 150ms ease !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .lw-whatsapp-bar-icon-btn:hover i {
    color: #111b21 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send {
    margin: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
    background: #00a884 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle:hover {
    background: #008069 !important;
}

/* --- CONTACT LIST PANEL (left) — WA Web style --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block {
    background: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #e9edef !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: calc(100vh - 110px);
    min-height: 600px;
    overflow: auto;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header {
    background: #f0f2f5 !important;
    background-image: none !important;
    border-bottom: none !important;
    color: #111b21 !important;
    padding: 14px 16px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header h1 {
    color: #111b21 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header h2,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header h5,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header label,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header span,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header strong,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header small {
    color: #111b21 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header .text-muted {
    color: #667781 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header .form-control,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header input[type="search"],
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header input[type="text"] {
    background: #ffffff !important;
    border: 1px solid #e9edef !important;
    color: #111b21 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 14px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header .form-control::placeholder {
    color: #667781 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header .form-control:focus {
    border-color: #00a884 !important;
    box-shadow: 0 0 0 3px rgba(0,168,132,.15) !important;
    background: #ffffff !important;
}

/* Contact items */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact {
    background: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #f5f6f6 !important;
    color: #111b21 !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    transition: background 150ms ease;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact:hover {
    background: #f5f6f6 !important;
    color: #111b21 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact.lw-contact-list-item-selected,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-item-selected {
    background: #f0f2f5 !important;
    color: #111b21 !important;
    border-left: none !important;
    padding-left: 16px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact h3,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact h3 span {
    color: #111b21 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    margin: 0;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact .lw-contact-avatar {
    background: #d1d7db !important;
    background-image: linear-gradient(135deg, #00a884, #008069) !important;
    color: #ffffff !important;
    width: 49px !important;
    height: 49px !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    box-shadow: none;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact .lw-last-message-at {
    color: #667781 !important;
    font-size: 12px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact .badge.bg-success,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact .badge {
    background: #25d366 !important;
    color: #ffffff !important;
    font-size: 11px;
}

/* Tabs (All / Mine / Unassigned) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .nav-tabs {
    border-bottom: 1px solid #e9edef !important;
    margin-bottom: 0;
    background: #ffffff;
    padding: 0 8px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    color: #54656f !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    margin-bottom: -1px;
    background: transparent !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .nav-tabs .nav-link.active {
    color: #00a884 !important;
    border-bottom: 3px solid #00a884 !important;
    background: transparent !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .nav-tabs .nav-link:hover {
    color: #111b21 !important;
    background: transparent !important;
}

/* --- CRM right panel — kill the dark header bar --- */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block {
    background: #ffffff !important;
    background-image: none !important;
    border-left: 1px solid #e9edef !important;
    color: #111b21 !important;
    height: calc(100vh - 110px);
    min-height: 600px;
    overflow: auto;
    padding: 0 !important;
}
/* Kill the header bar (dark Argon header that shows at top of CRM panel) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .header,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .header-body,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .bg-default,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .bg-info,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .bg-primary {
    background: #f0f2f5 !important;
    background-image: none !important;
    color: #111b21 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e9edef !important;
}
/* Inner cards */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .card,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .card-body {
    background: #ffffff !important;
    background-image: none !important;
    color: #111b21 !important;
    border: none !important;
    box-shadow: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block fieldset {
    background: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f5f6f6 !important;
    padding: 14px 16px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block legend {
    color: #008069 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: auto;
    padding: 0 !important;
    border: none;
    margin: 0 0 8px 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block dt {
    color: #667781 !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    margin-top: 8px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block dd,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h2,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h3,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h4,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h5,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h6,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block label,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block strong,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block p,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block span:not(.badge),
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block small {
    color: #111b21 !important;
    font-weight: 500;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .text-muted {
    color: #667781 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .form-control,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block input,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block textarea,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block select {
    background: #ffffff !important;
    border: 1px solid #e9edef !important;
    color: #111b21 !important;
    border-radius: 8px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block hr {
    border-color: #f5f6f6 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .btn-light,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .btn-secondary {
    background: #ffffff !important;
    background-image: none !important;
    color: #111b21 !important;
    border: 1px solid #e9edef !important;
    border-radius: 8px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .btn-light:hover,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .btn-secondary:hover {
    background: #f5f6f6 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .btn-primary {
    background: #00a884 !important;
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block .btn-primary:hover {
    background: #008069 !important;
}

/* "CONTACT INFO" header text in CRM */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h1,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block h2 {
    color: #111b21 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* Loading state */
body.lw-tabler-ui .lw-contact-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 200ms ease;
}

/* Reduce outer margins on the chat row to remove extra page padding */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window > .row {
    margin: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window > .row > [class*="col-"] {
    padding: 0 !important;
}

/* Kill any extra mb-4 padding on the chat container col */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .chat-container.mb-4,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .page.chat-container {
    margin-bottom: 0 !important;
}

/* ========================================================================
   7. UI MODE TOGGLE CHIP
   ======================================================================== */
.lw-ui-mode-toggle {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    color: #334155;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lw-ui-mode-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    text-decoration: none;
    color: #0F172A;
}
.lw-ui-mode-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #2fb344, #1f9d54);
    box-shadow: 0 0 8px rgba(47, 179, 68, 0.5);
}
@media (max-width: 768px) {
    .lw-ui-mode-toggle { bottom: 12px; right: 12px; padding: 6px 12px; font-size: 11px; }
}

/* ========================================================================
   8. FONTAWESOME ICON SIZING INSIDE TABLER NAV LINKS
   When we render Tabler nav-links with FontAwesome icons, Tabler expects ti
   icons with a specific size. Match it.
   ======================================================================== */
body.lw-tabler-ui .navbar-vertical .nav-link-icon i.fa,
body.lw-tabler-ui .navbar-vertical .nav-link-icon i.fas,
body.lw-tabler-ui .navbar-vertical .nav-link-icon i.fab {
    font-size: 16px;
    width: 1.25rem;
    text-align: center;
}

/* ========================================================================
   9. BADGE NOTIFICATION DOT (Tabler's badge-blink)
   ======================================================================== */
body.lw-tabler-ui .badge-notification {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--tblr-bg-surface, #ffffff);
    padding: 0;
}
@keyframes lw-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
body.lw-tabler-ui .badge-blink { animation: lw-blink 2s ease-in-out infinite; }

/* ========================================================================
   10. SUPPRESS ARGON'S OLD INLINE LUXURY-SHELL CSS WHEN TABLER IS ON
   The old <style> block in app.blade.php still loads — these rules undo it
   ======================================================================== */
body.lw-tabler-ui.lw-authenticated-page {
    background: var(--tblr-body-bg, #f5f7fb) !important;
}
body.lw-tabler-ui .lw-sidebar-container,
body.lw-tabler-ui #sidenav-main {
    /* hide the old Argon sidebar — we have Tabler navbar-vertical instead */
    display: none !important;
}

/* ========================================================================
   23. CHAT FULL-VIEWPORT MODE  (WhatsApp Web exact layout)
   When .lw-whatsapp-chat-block-container exists on the page, position it
   fixed below the navbar and to the right of the sidebar — fills the
   entire remaining viewport. No outer card frame, no scroll on the page,
   each panel scrolls independently. Same as WA Web.
   ======================================================================== */

/* Hide the page-header band on chat page (the empty gray area above the chat) */
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .ms-page,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .header,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .header-body,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .page-header,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .users-partials-header {
    display: none !important;
}

/* Kill outer container padding on chat page so chat goes edge-to-edge */
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .main-content > .container,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .main-content > .container-fluid,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .main-content .container,
body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) .main-content .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Pin the chat frame to viewport: fills below navbar, right of sidebar */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container {
    position: fixed !important;
    top: 60px !important;          /* below Tabler navbar (height ~60px) */
    left: 15rem !important;        /* right of sidebar (15rem = 240px) */
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    overflow: hidden !important;
    z-index: 5;
}

/* Mobile: sidebar collapses, chat fills entire viewport below navbar */
@media (max-width: 991.98px) {
    body.lw-tabler-ui .card.lw-whatsapp-chat-block-container {
        left: 0 !important;
    }
}

/* Card body fills the fixed parent */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container > .card-body {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The chat window wrapper */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* The 3-column row inside */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window > .row {
    height: 100% !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window > .row > [class*="col-"] {
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* LEFT — contact list panel takes full column height, scrolls inside */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    flex: 1 1 auto;
}

/* MIDDLE — chat-container takes full column height */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .chat-container,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .page.chat-container {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid #e9edef;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .marvel-device .screen,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .screen-container,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .chat,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window #lwChatWindowBox {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window #lwChatWindowBox > div {
    height: 100% !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* User-bar (top of message thread) — fixed height inside chat column */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
    flex: 0 0 auto;
}

/* Conversation pane — flex grow, scrolls internally */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation .conversation-container {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Composer — fixed at bottom of chat column */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose {
    flex: 0 0 auto;
}

/* RIGHT — CRM panel takes full column height, scrolls inside */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    flex: 1 1 auto;
}

/* Contact list internal items shouldn't force overflow on parent */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header {
    flex: 0 0 auto;
}


/* ========================================================================
   24. CONTACT LIST PANEL — patch specific gold/white-on-dark holdovers
   The old whatsapp-chat.css set `.lw-contact-list-block > h1 { color:#fff }`
   plus `.lw-contacts-header { background: dark navy gradient }` plus
   `.lw-labels-filter-fieldset legend { color: gold #c9a84c }`. Override.
   ======================================================================== */

/* "WhatsApp Chat" h1 inside contact list — was white-on-dark, make it dark */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block > h1 {
    color: #111b21 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    margin: 14px 16px 8px !important;
    padding: 0 !important;
}

/* The hr separator below the h1 — was gold border */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block > hr {
    margin: 0 16px 8px !important;
    border: none !important;
    border-top: 1px solid #e9edef !important;
}

/* Sticky H2.lw-contacts-header (the "back arrow + ?" header inside the contact panel) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .lw-contacts-header,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #f0f2f5 !important;
    background-image: none !important;
    color: #111b21 !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e9edef !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
/* The "?" abbreviation icon next to the header */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header abbr,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block abbr {
    color: #54656f !important;
    text-decoration: none !important;
    cursor: help;
    font-size: 13px;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
}

/* "Show all" toggle label */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .form-group label,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .form-group label span {
    color: #54656f !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* "Filter by labels" fieldset (legend + Expand pill) — was gold */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid #e9edef !important;
    border-radius: 8px !important;
    padding: 8px 10px 6px !important;
    margin: 8px 12px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset legend {
    color: #54656f !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    width: auto !important;
    padding: 0 8px !important;
    border: none !important;
    margin-bottom: 0 !important;
    float: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset legend small {
    color: #54656f !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset legend sup a {
    color: #00a884 !important;
    text-decoration: none !important;
    margin-left: 6px !important;
    font-size: 11px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    padding: 1px 8px !important;
    border: 1px solid #00a884 !important;
    border-radius: 12px !important;
    background: transparent !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset legend sup a:hover {
    color: #ffffff !important;
    background: #00a884 !important;
    border-color: #00a884 !important;
}

/* Search input */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block input[type="text"],
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block input[type="search"] {
    background: #ffffff !important;
    border: 1px solid #e9edef !important;
    color: #111b21 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13.5px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block input[type="text"]::placeholder,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block input[type="search"]::placeholder {
    color: #667781 !important;
}

/* Kill dark background on .lw-contact-list-block itself */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block {
    background: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #e9edef !important;
}

/* Tabs (All/Mine/Unassigned) badges — they have bg-yellow class which is gold */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .nav-tabs .nav-link .badge.bg-yellow,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .badge.bg-yellow {
    background: #00a884 !important;
    color: #ffffff !important;
}

/* The hr inside contact list */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block hr,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact hr {
    border: none !important;
    border-top: 1px solid #f1f3f4 !important;
    margin: 0 !important;
}

/* Back-arrow button on mobile (.btn.btn-light inside lw-contacts-header) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contacts-header .btn,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .btn-light {
    background: #ffffff !important;
    color: #111b21 !important;
    border: 1px solid #e9edef !important;
}


/* ========================================================================
   25. FINAL POLISH — duplicate title, composer, selected contact, datatables
   ======================================================================== */

/* (1) Hide duplicate "WhatsApp Chat" h1 inside contact list (navbar shows it) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block > h1,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block > h1 + hr {
    display: none !important;
}

/* (2) Composer — flat full-width, no floating phone-bubble shape */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose {
    background: #f0f2f5 !important;
    background-image: none !important;
    border-top: 1px solid #e9edef !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .input-msg {
    background: #ffffff !important;
    border: 1px solid #e9edef !important;
    border-radius: 8px !important;
    color: #111b21 !important;
    -webkit-text-fill-color: #111b21 !important;
    caret-color: #111b21 !important;
    padding: 9px 14px !important;
    font-size: 15px !important;
    flex: 1 1 auto !important;
    min-height: 42px;
    box-shadow: none !important;
    margin: 0 !important;
}
/* (3) Make TYPED text visibly dark (was inheriting white/light from old theme) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .input-msg,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose textarea,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .emojionearea .emojionearea-editor,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .emojionearea-editor {
    color: #111b21 !important;
    -webkit-text-fill-color: #111b21 !important;
    caret-color: #111b21 !important;
    background: #ffffff !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .emojionearea {
    background: #ffffff !important;
    border: 1px solid #e9edef !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
/* The wrapper around emoji + input that had rounded pill appearance */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose > div {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* (4) Selected contact — higher contrast, clear green left bar */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact.lw-contact-list-item-selected,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-item-selected {
    background: #e7f3ee !important;
    color: #111b21 !important;
    border-left: 4px solid #00a884 !important;
    padding-left: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(0, 168, 132, 0.10);
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact.lw-contact-list-item-selected h3,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact.lw-contact-list-item-selected h3 span,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact.lw-contact-list-item-selected .lw-last-message-at {
    color: #111b21 !important;
    font-weight: 600 !important;
}

/* (5) DataTables length dropdown — fix overlap with pagination
   Old style had `select` floated with no margin; pagination buttons crashed into it.
   Add proper spacing. */
body.lw-tabler-ui .dataTables_wrapper .dataTables_length {
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.lw-tabler-ui .dataTables_wrapper .dataTables_length label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 13px;
    color: #54656f;
}
body.lw-tabler-ui .dataTables_wrapper .dataTables_length select {
    background: #ffffff !important;
    border: 1px solid #e9edef !important;
    border-radius: 6px !important;
    padding: 4px 28px 4px 10px !important;
    font-size: 13px;
    color: #111b21;
    min-width: 70px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2354656f' d='M6 8L2 4h8z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    margin: 0 !important;
}
body.lw-tabler-ui .dataTables_wrapper .dataTables_filter {
    margin-left: auto;
}
body.lw-tabler-ui .dataTables_wrapper .dataTables_filter input {
    margin-left: 8px !important;
    min-width: 200px;
}
body.lw-tabler-ui .dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
    margin-top: 12px;
}
/* Top toolbar row — keep length + filter on one line, no overlap */
body.lw-tabler-ui .dataTables_wrapper > .row:first-child {
    align-items: center;
    margin-bottom: 12px;
}
/* Bottom row: info + pagination — clear separation */
body.lw-tabler-ui .dataTables_wrapper > .row:last-child {
    align-items: center;
    margin-top: 12px;
    border-top: 1px solid #f5f6f6;
    padding-top: 8px;
}

/* Selectize dropdowns — fix the overlap problem (was already in original CSS) */
body.lw-tabler-ui .selectize-control + .selectize-dropdown {
    margin-top: 4px !important;
}


/* ========================================================================
   26. SIDEBAR DROPDOWN ACTIVE STATE — readable text on selected sub-item
   Tabler's default .dropdown-item.active is white-on-light which is invisible.
   Force dark readable text for sidebar dropdown items.
   ======================================================================== */
body.lw-tabler-ui aside.navbar-vertical .dropdown-menu .dropdown-item {
    color: #1d273b !important;
    -webkit-text-fill-color: #1d273b !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    margin: 1px 4px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 150ms ease, color 150ms ease;
}
body.lw-tabler-ui aside.navbar-vertical .dropdown-menu .dropdown-item:hover {
    background: #f5f7fb !important;
    color: #1d273b !important;
    -webkit-text-fill-color: #1d273b !important;
}
body.lw-tabler-ui aside.navbar-vertical .dropdown-menu .dropdown-item.active,
body.lw-tabler-ui aside.navbar-vertical .dropdown-menu .dropdown-item:active {
    background: rgba(0, 168, 132, 0.12) !important;
    color: #00795f !important;
    -webkit-text-fill-color: #00795f !important;
    font-weight: 600 !important;
    border-left: 3px solid #00a884 !important;
    padding-left: 11px !important;
}
/* Parent nav-link.active when dropdown contains an active child */
body.lw-tabler-ui aside.navbar-vertical .nav-item.active > .nav-link.dropdown-toggle {
    color: #00795f !important;
    -webkit-text-fill-color: #00795f !important;
    font-weight: 600;
}
body.lw-tabler-ui aside.navbar-vertical .nav-item.active > .nav-link.dropdown-toggle .nav-link-icon i {
    color: #00795f !important;
}

/* ========================================================================
   27. PAGE HEADER TITLE — shrink Argon's huge display-2 (was overlapping
   action buttons on Campaign Status / similar pages)
   ======================================================================== */
body.lw-tabler-ui .header .display-1,
body.lw-tabler-ui .header .display-2,
body.lw-tabler-ui .header .display-3,
body.lw-tabler-ui .header .display-4,
body.lw-tabler-ui .header .lw-page-title,
body.lw-tabler-ui .header h1.lw-page-title.display-2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.015em;
}

/* Header container — ensure buttons can sit beside title without overlap */
body.lw-tabler-ui .header.pb-0,
body.lw-tabler-ui .header-body {
    overflow: visible;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
body.lw-tabler-ui .header .container-fluid.d-flex {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Header action buttons — flex inline with gap so multiple buttons don't crash into title */
body.lw-tabler-ui .header .float-right,
body.lw-tabler-ui .header .float-left,
body.lw-tabler-ui .header .lw-header-actions {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
@media (max-width: 767px) {
    body.lw-tabler-ui .header .float-right { float: none !important; margin-top: 8px; }
}

/* The .mb-4 wrapper around h1 in users.partials.header — tighten so buttons align */
body.lw-tabler-ui .header .col-12 .mb-4 {
    margin-bottom: 0 !important;
}