/*
 * Klienz CRM — Custom Styles
 * Floating navbar + Sidebar personalizado
 * No afecta compact-view-active
 */

/* ============================================
   NAVBAR TOOLTIPS (Bootstrap)
   ============================================ */

.tooltip .tooltip-inner {
    background: #1e293b;
    color: #f1f5f9;
    font-size: 11.5px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.2px;
    max-width: 200px;
}

.tooltip .tooltip-arrow::before {
    border-bottom-color: #1e293b;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #1e293b;
}

/* ============================================
   MENU SVG ICONS
   ============================================ */

.menu-svg-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}

.sub-menu-svg-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: middle;
}

/* ============================================
   FLOATING NAVBAR
   ============================================ */

@media (min-width: 991px) {

    /* Navbar flotante — solo cuando NO hay compact-view activo */
    body:not(.compact-view-active) .navbar-custom {
        top: 0.85rem !important;
        left: calc(250px + 1.2rem) !important;
        right: 1.2rem !important;
        width: auto !important;
        border-radius: 0.5rem;
        box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.12);
        border-bottom: none !important;
        padding: 0 0.5rem !important;
        min-height: 62px;
        transition: left 0.3s ease, width 0.3s ease;
        z-index: 1006;
    }

    /* Sidebar colapsado — navbar se ajusta */
    body.sidebar-toggled:not(.compact-view-active) .navbar-custom {
        left: calc(70px + 1.2rem) !important;
    }

    /* Contenido empieza mas abajo para no taparse con navbar flotante */
    body:not(.compact-view-active) .page-container {
        padding-top: 14px !important;
    }
}


/* ============================================
   SIDEBAR — Personalizado
   ============================================ */

@media (min-width: 991px) {

    /* Sin borde derecho + esquina redondeada superior */
    body:not(.compact-view-active) .sidebar {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border-right: none !important;
        border-top-right-radius: 16px !important;
    }

    /* Area del logo: fondo coral suave */
    body:not(.compact-view-active) .sidebar .sidebar-brand,
    body:not(.compact-view-active) .sidebar-brand {
        background-color: #fff9f6 !important;
        border: none !important;
    }

    /* Scrollbar oculto en sidebar */
    .sidebar-scroll {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .sidebar-scroll::-webkit-scrollbar {
        display: none !important;
    }
}


/* ============================================
   SIDEBAR — Active state Klienz
   ============================================ */

/* Light mode: active item con color magenta suave */
.sidebar-menu li.active > a {
    color: #a22749 !important;
    background-color: rgba(162, 39, 73, 0.08) !important;
}

/* Light mode: active submenu */
.sidebar-menu li.active-submenu > a {
    color: #a22749 !important;
    background-color: rgba(162, 39, 73, 0.06) !important;
}

/* Mantener color del icono cuando esta activo (no heredar magenta) */
.sidebar-menu li.active > a .menu-icon-colored,
.sidebar-menu li.active > a .menu-icon-colored .icon {
    opacity: 1;
}


/* ============================================
   SIDEBAR — Iconos y puntos de color
   ============================================ */

/* Iconos del menu principal a 16px */
.sidebar-menu li a .menu-icon-colored .icon,
.sidebar-menu li a .menu-icon-colored svg {
    width: 16px !important;
    height: 16px !important;
}

/* Punto de color en submenus */
.sidebar-menu ul li a .sub-icon-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Submenus con flex para alinear badge */
.sidebar-menu li ul li a {
    display: flex !important;
    align-items: center;
}
.sidebar-menu li ul li a .badge {
    float: none !important;
    margin-left: 8px !important;
    margin-top: 0 !important;
}

/* Ocultar icono minus legacy en submenus */
.sidebar-menu ul li a [data-feather="minus"] {
    display: none !important;
}


/* ============================================
   DARK MODE — Overrides
   ============================================ */

@media (min-width: 991px) {

    /* Navbar: sombra mas intensa en dark */
    body[data-color="1E202D"]:not(.compact-view-active) .navbar-custom,
    body[data-color="1d2632"]:not(.compact-view-active) .navbar-custom,
    body[data-color="2e4053"]:not(.compact-view-active) .navbar-custom {
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
    }

    /* Sidebar logo area en dark */
    body[data-color="1E202D"]:not(.compact-view-active) .sidebar .sidebar-brand,
    body[data-color="1E202D"]:not(.compact-view-active) .sidebar-brand,
    body[data-color="1d2632"]:not(.compact-view-active) .sidebar .sidebar-brand,
    body[data-color="1d2632"]:not(.compact-view-active) .sidebar-brand,
    body[data-color="2e4053"]:not(.compact-view-active) .sidebar .sidebar-brand,
    body[data-color="2e4053"]:not(.compact-view-active) .sidebar-brand {
        background-color: #1C1F26 !important;
        border: none !important;
    }
}

/* Dark mode active state */
body[data-color="1E202D"] .sidebar-menu li.active > a,
body[data-color="1d2632"] .sidebar-menu li.active > a,
body[data-color="2e4053"] .sidebar-menu li.active > a {
    color: #fff !important;
    background-color: rgba(162, 39, 73, 0.25) !important;
}

body[data-color="1E202D"] .sidebar-menu li.active-submenu > a,
body[data-color="1d2632"] .sidebar-menu li.active-submenu > a,
body[data-color="2e4053"] .sidebar-menu li.active-submenu > a {
    color: #e2e8f0 !important;
    background-color: rgba(162, 39, 73, 0.15) !important;
}

/* ============================================
   DARK MODE — Messaging Inbox & Kanban
   ============================================ */

/* Inbox container border */
body[data-color="1E202D"] .messaging-inbox-container,
body[data-color="1d2632"] .messaging-inbox-container,
body[data-color="2e4053"] .messaging-inbox-container {
    border-color: #2f3541;
}

/* Sidebar */
body[data-color="1E202D"] .messaging-sidebar,
body[data-color="1d2632"] .messaging-sidebar,
body[data-color="2e4053"] .messaging-sidebar {
    background: #252932 !important;
    border-right-color: #2f3541;
}

body[data-color="1E202D"] .messaging-sidebar-header,
body[data-color="1d2632"] .messaging-sidebar-header,
body[data-color="2e4053"] .messaging-sidebar-header {
    border-bottom-color: #2f3541;
}

/* Sidebar search, filters, selects */
body[data-color="1E202D"] .messaging-sidebar-header .form-control,
body[data-color="1d2632"] .messaging-sidebar-header .form-control,
body[data-color="2e4053"] .messaging-sidebar-header .form-control,
body[data-color="1E202D"] .messaging-sidebar-header .form-select,
body[data-color="1d2632"] .messaging-sidebar-header .form-select,
body[data-color="2e4053"] .messaging-sidebar-header .form-select {
    background-color: #1C1F26 !important;
    border-color: #2f3541 !important;
    color: #ccc !important;
}

body[data-color="1E202D"] .chat-filter-group,
body[data-color="1d2632"] .chat-filter-group,
body[data-color="2e4053"] .chat-filter-group {
    background: #1C1F26;
}

body[data-color="1E202D"] .chat-filter-btn,
body[data-color="1d2632"] .chat-filter-btn,
body[data-color="2e4053"] .chat-filter-btn {
    color: #898fa9;
}

body[data-color="1E202D"] .chat-filter-btn:hover,
body[data-color="1d2632"] .chat-filter-btn:hover,
body[data-color="2e4053"] .chat-filter-btn:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.06);
}

body[data-color="1E202D"] .chat-filter-btn.active,
body[data-color="1d2632"] .chat-filter-btn.active,
body[data-color="2e4053"] .chat-filter-btn.active {
    background: #252932 !important;
    color: #ddd !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Floating inbox tab pills — dark mode override */
body[data-color="1E202D"] .fi-tab-group,
body[data-color="1d2632"] .fi-tab-group,
body[data-color="2e4053"] .fi-tab-group {
    background: rgba(255, 255, 255, 0.06);
}

body[data-color="1E202D"] .fi-tab,
body[data-color="1d2632"] .fi-tab,
body[data-color="2e4053"] .fi-tab {
    color: rgba(255, 255, 255, 0.55);
}

body[data-color="1E202D"] .fi-tab:hover,
body[data-color="1d2632"] .fi-tab:hover,
body[data-color="2e4053"] .fi-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
}

body[data-color="1E202D"] .fi-tab.active,
body[data-color="1d2632"] .fi-tab.active,
body[data-color="2e4053"] .fi-tab.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

body[data-color="1E202D"] .messaging-sidebar-header .form-check-label,
body[data-color="1d2632"] .messaging-sidebar-header .form-check-label,
body[data-color="2e4053"] .messaging-sidebar-header .form-check-label {
    color: #898fa9;
}

/* Chat items */
body[data-color="1E202D"] .messaging-chat-item,
body[data-color="1d2632"] .messaging-chat-item,
body[data-color="2e4053"] .messaging-chat-item {
    background: #252932 !important;
    border-bottom-color: #2f3541;
}

body[data-color="1E202D"] .messaging-chat-item:hover,
body[data-color="1d2632"] .messaging-chat-item:hover,
body[data-color="2e4053"] .messaging-chat-item:hover {
    background: #20242C !important;
}

body[data-color="1E202D"] .messaging-chat-item.active,
body[data-color="1d2632"] .messaging-chat-item.active,
body[data-color="2e4053"] .messaging-chat-item.active {
    background: rgba(59, 130, 246, 0.15) !important;
}

body[data-color="1E202D"] .messaging-chat-list,
body[data-color="1d2632"] .messaging-chat-list,
body[data-color="2e4053"] .messaging-chat-list {
    background: #252932 !important;
}

body[data-color="1E202D"] .messaging-chat-avatar,
body[data-color="1d2632"] .messaging-chat-avatar,
body[data-color="2e4053"] .messaging-chat-avatar {
    background: #2f3541;
    color: #898fa9;
}

body[data-color="1E202D"] .messaging-chat-name,
body[data-color="1d2632"] .messaging-chat-name,
body[data-color="2e4053"] .messaging-chat-name {
    color: #ccc;
}

body[data-color="1E202D"] .messaging-chat-preview,
body[data-color="1d2632"] .messaging-chat-preview,
body[data-color="2e4053"] .messaging-chat-preview {
    color: #898fa9;
}

body[data-color="1E202D"] .messaging-chat-time,
body[data-color="1d2632"] .messaging-chat-time,
body[data-color="2e4053"] .messaging-chat-time {
    color: #6b7280;
}

/* Main message area */
body[data-color="1E202D"] .messaging-main,
body[data-color="1d2632"] .messaging-main,
body[data-color="2e4053"] .messaging-main {
    background: #1C1F26;
}

body[data-color="1E202D"] .messaging-main-header,
body[data-color="1d2632"] .messaging-main-header,
body[data-color="2e4053"] .messaging-main-header {
    background: #252932;
    border-bottom-color: #2f3541;
}

body[data-color="1E202D"] .messaging-main-header h6,
body[data-color="1d2632"] .messaging-main-header h6,
body[data-color="2e4053"] .messaging-main-header h6 {
    color: #ccc;
}

body[data-color="1E202D"] .messaging-contact-avatar,
body[data-color="1d2632"] .messaging-contact-avatar,
body[data-color="2e4053"] .messaging-contact-avatar {
    background: #2f3541;
    color: #898fa9;
}

/* Message bubbles */
body[data-color="1E202D"] .message-bubble.incoming .bubble-content,
body[data-color="1d2632"] .message-bubble.incoming .bubble-content,
body[data-color="2e4053"] .message-bubble.incoming .bubble-content {
    background: #272B35;
    border-color: #2f3541;
    color: #ccc;
}

body[data-color="1E202D"] .message-bubble .bubble-meta,
body[data-color="1d2632"] .message-bubble .bubble-meta,
body[data-color="2e4053"] .message-bubble .bubble-meta {
    color: #6b7280;
}

body[data-color="1E202D"] .message-bubble .bubble-document,
body[data-color="1d2632"] .message-bubble .bubble-document,
body[data-color="2e4053"] .message-bubble .bubble-document {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
}

/* No chat selected placeholder */
body[data-color="1E202D"] #no-chat-selected,
body[data-color="1d2632"] #no-chat-selected,
body[data-color="2e4053"] #no-chat-selected {
    color: #6b7280;
}

/* Input area */
body[data-color="1E202D"] .messaging-input-area,
body[data-color="1d2632"] .messaging-input-area,
body[data-color="2e4053"] .messaging-input-area {
    background: #252932;
    border-top-color: #2f3541;
}

body[data-color="1E202D"] .messaging-input-field textarea,
body[data-color="1d2632"] .messaging-input-field textarea,
body[data-color="2e4053"] .messaging-input-field textarea {
    background: #1C1F26;
    border-color: #2f3541;
    color: #ccc;
}

body[data-color="1E202D"] .messaging-media-preview,
body[data-color="1d2632"] .messaging-media-preview,
body[data-color="2e4053"] .messaging-media-preview {
    background: #2f3541;
}

/* Info panel */
body[data-color="1E202D"] .messaging-info-panel,
body[data-color="1d2632"] .messaging-info-panel,
body[data-color="2e4053"] .messaging-info-panel {
    background: #252932;
    border-left-color: #2f3541;
}

/* Typing indicator */
body[data-color="1E202D"] .typing-indicator,
body[data-color="1d2632"] .typing-indicator,
body[data-color="2e4053"] .typing-indicator {
    background: #2f3541;
}

body[data-color="1E202D"] .typing-indicator span,
body[data-color="1d2632"] .typing-indicator span,
body[data-color="2e4053"] .typing-indicator span {
    background: #6b7280;
}

/* ═══════════════════════════════════════════════════
   Kanban Pipelines — Dark Mode
   Covers both classic (kanban-col) and modern (kanban-column) layouts
   ═══════════════════════════════════════════════════ */

/* --- Modern kanban (Meta + Telegram): columns --- */
body[data-color="1E202D"] .kanban-column,
body[data-color="1d2632"] .kanban-column,
body[data-color="2e4053"] .kanban-column {
    background: #1C1F26;
}

body[data-color="1E202D"] .kanban-column-header,
body[data-color="1d2632"] .kanban-column-header,
body[data-color="2e4053"] .kanban-column-header {
    background: #252932;
}

body[data-color="1E202D"] .kanban-column-header h6,
body[data-color="1d2632"] .kanban-column-header h6,
body[data-color="2e4053"] .kanban-column-header h6 {
    color: #ccc;
}

body[data-color="1E202D"] .kanban-column-header .badge,
body[data-color="1d2632"] .kanban-column-header .badge,
body[data-color="2e4053"] .kanban-column-header .badge {
    background: #3a3f4b !important;
    color: #ccc;
}

/* --- Classic kanban (Baileys): columns --- */
body[data-color="1E202D"] .kanban-col .kanban-col-title,
body[data-color="1d2632"] .kanban-col .kanban-col-title,
body[data-color="2e4053"] .kanban-col .kanban-col-title {
    background: #252932;
    color: #ccc;
}

body[data-color="1E202D"] .kanban-col .kanban-col-title .status-title,
body[data-color="1d2632"] .kanban-col .kanban-col-title .status-title,
body[data-color="2e4053"] .kanban-col .kanban-col-title .status-title {
    color: #ddd;
}

body[data-color="1E202D"] .kanban-col .kanban-col-title .kanban-item-count,
body[data-color="1d2632"] .kanban-col .kanban-col-title .kanban-item-count,
body[data-color="2e4053"] .kanban-col .kanban-col-title .kanban-item-count {
    color: #898fa9;
}

body[data-color="1E202D"] .kanban-col.kanban-col-collapsed .kanban-col-title,
body[data-color="1d2632"] .kanban-col.kanban-col-collapsed .kanban-col-title,
body[data-color="2e4053"] .kanban-col.kanban-col-collapsed .kanban-col-title {
    background-color: #252932;
}

/* --- Shared: kanban items (cards) --- */
body[data-color="1E202D"] .kanban-item,
body[data-color="1d2632"] .kanban-item,
body[data-color="2e4053"] .kanban-item {
    background: #252932 !important;
    border-color: #2f3541 !important;
    color: #898fa9;
}

body[data-color="1E202D"] .kanban-item:hover,
body[data-color="1d2632"] .kanban-item:hover,
body[data-color="2e4053"] .kanban-item:hover {
    background: #2c313b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #b0b6c3;
}

body[data-color="1E202D"] .kanban-item:active,
body[data-color="1d2632"] .kanban-item:active,
body[data-color="2e4053"] .kanban-item:active,
body[data-color="1E202D"] .kanban-item:focus,
body[data-color="1d2632"] .kanban-item:focus,
body[data-color="2e4053"] .kanban-item:focus {
    background: #2c313b !important;
    color: #b0b6c3;
}

body[data-color="1E202D"] .kanban-item-checked,
body[data-color="1d2632"] .kanban-item-checked,
body[data-color="2e4053"] .kanban-item-checked {
    background: #2c313b !important;
}

body[data-color="1E202D"] .kanban-item-title,
body[data-color="1d2632"] .kanban-item-title,
body[data-color="2e4053"] .kanban-item-title {
    color: #ddd;
}

body[data-color="1E202D"] .kanban-item-sub,
body[data-color="1d2632"] .kanban-item-sub,
body[data-color="2e4053"] .kanban-item-sub {
    color: #ddd;
}

body[data-color="1E202D"] .kanban-item .text-off,
body[data-color="1d2632"] .kanban-item .text-off,
body[data-color="2e4053"] .kanban-item .text-off,
body[data-color="1E202D"] .kanban-item .text-muted,
body[data-color="1d2632"] .kanban-item .text-muted,
body[data-color="2e4053"] .kanban-item .text-muted {
    color: #6b7280 !important;
}

/* --- Avatar fallback inside kanban cards --- */
body[data-color="1E202D"] .kanban-item .kanban-avatar-fallback,
body[data-color="1d2632"] .kanban-item .kanban-avatar-fallback,
body[data-color="2e4053"] .kanban-item .kanban-avatar-fallback {
    background: #3a3f4b !important;
    color: #ccc !important;
}

/* --- Sortable placeholder --- */
body[data-color="1E202D"] .sortable-placeholder,
body[data-color="1d2632"] .sortable-placeholder,
body[data-color="2e4053"] .sortable-placeholder,
body[data-color="1E202D"] .kanban-item-placeholder,
body[data-color="1d2632"] .kanban-item-placeholder,
body[data-color="2e4053"] .kanban-item-placeholder {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

/* --- Kanban sortable ghost/chosen --- */
body[data-color="1E202D"] .kanban-sortable-ghost,
body[data-color="1d2632"] .kanban-sortable-ghost,
body[data-color="2e4053"] .kanban-sortable-ghost {
    opacity: 0.4;
}

body[data-color="1E202D"] .kanban-sortable-chosen,
body[data-color="1d2632"] .kanban-sortable-chosen,
body[data-color="2e4053"] .kanban-sortable-chosen {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* --- Floating chat buttons (Telegram, WhatsApp) --- */
body[data-color="1E202D"] .floating-chat-btn,
body[data-color="1d2632"] .floating-chat-btn,
body[data-color="2e4053"] .floating-chat-btn {
    background-color: #252932 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid #2f3541;
}

body[data-color="1E202D"] .floating-chat-btn:hover,
body[data-color="1d2632"] .floating-chat-btn:hover,
body[data-color="2e4053"] .floating-chat-btn:hover {
    background-color: #2c313b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body[data-color="1E202D"] .floating-chat-btn.has-message,
body[data-color="1d2632"] .floating-chat-btn.has-message,
body[data-color="2e4053"] .floating-chat-btn.has-message {
    background-color: #f5325c !important;
    border-color: #f5325c;
}

/* --- Kanban wrapper/board background --- */
body[data-color="1E202D"] #kanban-wrapper,
body[data-color="1d2632"] #kanban-wrapper,
body[data-color="2e4053"] #kanban-wrapper {
    background: transparent;
}

body[data-color="1E202D"] .kanban-board,
body[data-color="1d2632"] .kanban-board,
body[data-color="2e4053"] .kanban-board {
    background: transparent;
}

/* Account filter select */
body[data-color="1E202D"] #whatsapp-account-filter,
body[data-color="1d2632"] #whatsapp-account-filter,
body[data-color="2e4053"] #whatsapp-account-filter {
    background-color: #252932;
    border-color: #2f3541;
    color: #ccc;
}

/* Outline buttons inside messaging */
body[data-color="1E202D"] .messaging-main-actions .btn-outline-secondary,
body[data-color="1d2632"] .messaging-main-actions .btn-outline-secondary,
body[data-color="2e4053"] .messaging-main-actions .btn-outline-secondary {
    border-color: #2f3541;
    color: #898fa9;
}

body[data-color="1E202D"] .messaging-main-actions .btn-outline-secondary:hover,
body[data-color="1d2632"] .messaging-main-actions .btn-outline-secondary:hover,
body[data-color="2e4053"] .messaging-main-actions .btn-outline-secondary:hover {
    background: #2f3541;
    color: #ccc;
}

body[data-color="1E202D"] .messaging-input-actions .btn-outline-secondary,
body[data-color="1d2632"] .messaging-input-actions .btn-outline-secondary,
body[data-color="2e4053"] .messaging-input-actions .btn-outline-secondary {
    border-color: #2f3541;
    color: #898fa9;
}

/* Dropdown menu inside messaging */
body[data-color="1E202D"] .messaging-main-actions .dropdown-menu,
body[data-color="1d2632"] .messaging-main-actions .dropdown-menu,
body[data-color="2e4053"] .messaging-main-actions .dropdown-menu {
    background: #252932;
    border-color: #2f3541;
}

body[data-color="1E202D"] .messaging-main-actions .dropdown-item,
body[data-color="1d2632"] .messaging-main-actions .dropdown-item,
body[data-color="2e4053"] .messaging-main-actions .dropdown-item {
    color: #ccc;
}

body[data-color="1E202D"] .messaging-main-actions .dropdown-item:hover,
body[data-color="1d2632"] .messaging-main-actions .dropdown-item:hover,
body[data-color="2e4053"] .messaging-main-actions .dropdown-item:hover {
    background: #20242C;
    color: #fff;
}

/* Context menu dark mode */
body[data-color="1E202D"] .inbox-ctx-menu,
body[data-color="1d2632"] .inbox-ctx-menu,
body[data-color="2e4053"] .inbox-ctx-menu {
    background: #2a3441;
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

body[data-color="1E202D"] .inbox-ctx-item,
body[data-color="1d2632"] .inbox-ctx-item,
body[data-color="2e4053"] .inbox-ctx-item {
    color: #ddd;
}

body[data-color="1E202D"] .inbox-ctx-item:hover,
body[data-color="1d2632"] .inbox-ctx-item:hover,
body[data-color="2e4053"] .inbox-ctx-item:hover {
    background: rgba(255,255,255,.08);
}

/* Reaction picker dark mode */
body[data-color="1E202D"] #inbox-reaction-picker,
body[data-color="1d2632"] #inbox-reaction-picker,
body[data-color="2e4053"] #inbox-reaction-picker {
    background: #2a3441;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* Reply bar dark mode */
body[data-color="1E202D"] #inbox-reply-bar,
body[data-color="1d2632"] #inbox-reply-bar,
body[data-color="2e4053"] #inbox-reply-bar {
    background: rgba(255,255,255,.04);
    border-top-color: #2f3541;
    color: #ccc;
}

/* Search bar dark mode */
body[data-color="1E202D"] #inbox-search-bar,
body[data-color="1d2632"] #inbox-search-bar,
body[data-color="2e4053"] #inbox-search-bar {
    background: #252932;
    border-bottom-color: #2f3541;
}

/* Templates bar dark mode */
body[data-color="1E202D"] #inbox-templates-bar,
body[data-color="1d2632"] #inbox-templates-bar,
body[data-color="2e4053"] #inbox-templates-bar {
    border-top-color: #2f3541;
}

/* Voice recorder dark mode */
body[data-color="1E202D"] #inbox-recorder,
body[data-color="1d2632"] #inbox-recorder,
body[data-color="2e4053"] #inbox-recorder {
    background: #252932;
    border-top-color: #2f3541;
    color: #ccc;
}

/* Emoji panel dark mode */
body[data-color="1E202D"] #inbox-emoji-panel,
body[data-color="1d2632"] #inbox-emoji-panel,
body[data-color="2e4053"] #inbox-emoji-panel {
    background: #252932;
    border-color: #2f3541;
}

/* Quoted bubble dark mode */
body[data-color="1E202D"] .bubble-quoted,
body[data-color="1d2632"] .bubble-quoted,
body[data-color="2e4053"] .bubble-quoted {
    background: rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════
   DARK MODE — General .card fix for themes missing it
   (1d2632 and 2e4053 don't have card dark mode in their color file)
   ═══════════════════════════════════════════════════ */
body[data-color="1d2632"] .card,
body[data-color="2e4053"] .card {
    background-color: #252932 !important;
    transition: none !important;
    border-color: #2f3541 !important;
}

body[data-color="1d2632"] .card .card-header,
body[data-color="2e4053"] .card .card-header {
    background-color: #252932 !important;
    border-color: #2f3541 !important;
    color: #898fa9;
}

body[data-color="1d2632"] .card-body,
body[data-color="2e4053"] .card-body {
    background-color: #252932 !important;
}

/* WhatsApp Chat Modal styles are now inline in item_modal_form.php */