/* WhatsApp Theme v91 - Clean fixes for OTP and Checkbox */
:root {
    --wa-header: #075E54;
    --wa-header-alt: #128C7E;
    --wa-send: #25D366;
    --wa-outgoing: #DCF8C6;
    --wa-incoming: #FFFFFF;
    --wa-bg: #f0e9e3;
    --wa-grey-bg: #f0f2f5;
    --wa-white: #ffffff;
    --text: #111;
    --muted: #6b6b6b;
    --divider: #e6e6e6;
}

/* Main chat container background */
.sb-main.sb-admin {
    background: var(--wa-bg) !important;
}

/* Fix login/account page background to be white */
.sb-main:not(.sb-admin) {
    background: #fff !important;
}

.sb-chat {
    background: var(--wa-bg) !important;
}

/* FIX: Scroll areas should be WHITE like WhatsApp Web */
.sb-scroll-area {
    background: var(--wa-white) !important;
}

/* Top app/header bar - FORCE GREEN EVERYWHERE */
.sb-header,
.sb-topbar,
.sb-navbar,
.header,
.topbar,
.sb-admin .sb-header,
.sb-area-conversations .sb-header,
.sb-area-users .sb-header,
.sb-area-settings .sb-header,
.sb-area-reports .sb-header {
    background: var(--wa-header) !important;
    color: #fff !important;
    border-bottom: none !important;
}

.sb-scroll-area .sb-header {
    background: var(--wa-header-alt) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Ensure all icons and text in headers are white */
.sb-header .icon,
.sb-topbar .icon,
.topbar .icon,
.sb-header .sb-title,
.sb-header .title,
.sb-header span,
.sb-header div {
    color: #fff !important;
}

.sb-header a,
.sb-header button {
    color: #fff !important;
}

.sb-header .sb-icon-user,
.sb-header .sb-icon-close {
    color: #fff !important;
}

/* Left sidebar and conversation list - WHITE BACKGROUND */
.sb-sidebar,
.sidebar,
.conversations-list {
    background: var(--wa-white) !important;
    border-right: 1px solid var(--divider);
}

.sb-user-conversations {
    background: var(--wa-white) !important;
}

.conversation-item,
.sb-conversation,
.sb-user-conversations>li {
    background: transparent;
    border-radius: 0;
    border-left: none !important;
    border-bottom: 1px solid #f0f0f0;
}

.conversation-item.active,
.sb-conversation.active,
.conversation-item:hover,
.sb-user-conversations>li:hover,
.sb-user-conversations>li.sb-active {
    background: #f0f2f5 !important;
    border-left: none !important;
}

/* Active chat highlight */
.sb-user-conversations>li.sb-active {
    background: #f0f2f5 !important;
}

.conversation-item .name,
.sb-conversation .name {
    color: var(--text);
    font-weight: 500;
}

.conversation-item .meta,
.sb-conversation .meta,
.conversation-item .preview {
    color: var(--muted);
}

/* Chat area background - BEIGE */
.sb-chat,
.chat,
.chat-body {
    background: var(--wa-bg) !important;
}

.sb-list {
    background: var(--wa-bg) !important;
}

/* FIX: Conversation container background */
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation {
    background: var(--wa-bg) !important;
}

/* FIX: All sb-top elements - GREY BACKGROUND */
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-admin-list>div.sb-top,
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation>div.sb-top,
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-user-details.sb-active>div.sb-top,
.sb-top {
    background: var(--wa-grey-bg) !important;
    border-bottom: 1px solid var(--divider) !important;
}

/* FIX: Date label at top of conversation */
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation>div.sb-top>div.sb-label-date-top,
.sb-label-date-top {
    background: #f0e9e3 !important;
}

body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation>div.sb-top>div.sb-label-date-top span,
.sb-label-date-top span {
    background: #c5e2ee !important;
    color: #1a1a1a !important;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Incoming bubbles (left) - From support agents */
.sb-list>div:not(.sb-right),
.message.incoming,
.bubble.incoming {
    background: var(--wa-incoming) !important;
    color: var(--text) !important;
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    border: none !important;
}

.sb-list>div:not(.sb-right) .sb-message,
.sb-list>div:not(.sb-right) .sb-message a {
    color: var(--text) !important;
}

/* Outgoing bubbles (right) - From customer */
.sb-list>div.sb-right,
.message.outgoing,
.bubble.outgoing,
.sb-message-right {
    background: var(--wa-outgoing) !important;
    color: var(--text) !important;
    border-radius: 12px 0 12px 12px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    border: none !important;
}

.sb-list>div.sb-right .sb-message,
.sb-list>div.sb-right .sb-message a {
    color: var(--text) !important;
}

/* Bubble timestamps */
.sb-message .sb-time,
.sb-message .time,
.message .time,
.bubble .time {
    color: var(--muted) !important;
    font-size: 11px !important;
    opacity: 0.6;
    margin-top: 2px;
    display: block;
    text-align: right;
}

/* Composer/Editor area - WHITE BACKGROUND */
.sb-editor {
    background: var(--wa-grey-bg) !important;
    border-top: 1px solid var(--divider);
    padding: 10px 15px;
}

.sb-input,
.composer input,
.message-input textarea {
    background: #fff !important;
    color: var(--text) !important;
    border: none !important;
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.sb-input::placeholder,
.message-input::placeholder {
    color: #9aa0a6;
}

.sb-input:focus {
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Send button */
.sb-submit,
.sb-send,
.send-button,
button.send {
    background: transparent !important;
    color: var(--wa-header) !important;
    border: none !important;
    width: 40px;
    height: 40px;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-submit i,
.sb-send i {
    color: var(--wa-header) !important;
    font-size: 20px;
}

/* Top conversation title bar inside chat */
.sb-conversation-header,
.chat-header {
    background: var(--wa-header-alt) !important;
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sb-conversation-header .title,
.sb-conversation-header .sb-message,
.chat-header .title {
    color: #fff !important;
}

.sb-conversation-header .sb-icon,
.sb-conversation-header i {
    color: #fff !important;
}

/* Right info panel - WHITE BACKGROUND like WhatsApp Web */
.sb-right-panel,
.right-panel,
.sb-user-details,
.sb-user-details.sb-active {
    background: var(--wa-white) !important;
    border-left: 1px solid var(--divider);
}

/* FIX: User details scroll area - WHITE */
.sb-user-details .sb-scroll-area,
.sb-user-details.sb-active .sb-scroll-area {
    background: var(--wa-white) !important;
}

/* FIX: Profile list panels - WHITE */
.sb-panel-conversation-details,
.sb-profile-list,
.sb-panel-details {
    background: var(--wa-white) !important;
}

/* FIX: User details lists - WHITE */
.sb-profile-list ul,
.sb-profile-list ul li {
    background: transparent !important;
}

/* Misc icons */
.sb-icon,
.icon {
    color: var(--muted);
}

/* Settings Icon Fix - MAKE IT WHITE */
#sb-settings>i,
.sb-icon-settings,
.sb-admin-nav .sb-icon-settings,
.sb-nav .sb-icon-settings {
    color: #fff !important;
    opacity: 1 !important;
}

/* Make other sidebar icons white too if they are on the dark strip */
.sb-admin-nav i,
.sb-nav i {
    color: #fff !important;
}

/* Override blue links to green scheme */
a,
.link,
.sb-link {
    color: var(--wa-header-alt) !important;
}

/* FIX: Sidebar icons on hover */
.sb-admin-nav a:hover i,
.sb-nav a:hover i {
    color: #fff !important;
}

/* FIX: Sidebar tooltip text color */
.sb-admin-nav a span,
.sb-nav a span {
    color: #000 !important;
    font-weight: 500 !important;
}

a:hover {
    color: var(--wa-header) !important;
}

/* Dividers */
.hr,
.divider,
.sb-user-conversations>li {
    border-color: var(--divider);
}

/* Compact bubble padding */
.sb-list>div {
    padding: 6px 7px 8px 9px !important;
    margin-bottom: 2px !important;
}

.sb-list>div.sb-right {
    margin-bottom: 2px !important;
}

/* Round avatars */
.avatar,
.sb-avatar,
.sb-list .sb-thumb>img {
    border-radius: 50%;
}

/* Loading indicator color */
.sb-loading:after {
    border-top-color: var(--wa-header) !important;
}

/* Focus and active states */
input:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* Remove default blue color from shared.scss */
.sb-list>div {
    background-color: var(--wa-incoming) !important;
}

.sb-list>div.sb-right {
    background-color: var(--wa-outgoing) !important;
    color: var(--text) !important;
}

/* Message text colors */
.sb-message {
    color: var(--text) !important;
}

.sb-list>div.sb-right .sb-message {
    color: var(--text) !important;
}

/* Fix for User Menu Dropdown Visibility - White background, dark text */
.sb-account .sb-menu,
.sb-menu {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.sb-account .sb-menu li,
.sb-menu li {
    color: var(--text) !important;
    background: transparent !important;
}

.sb-account .sb-menu li:hover,
.sb-menu li:hover {
    background-color: #f5f5f5 !important;
    color: var(--text) !important;
}

.sb-account .sb-name {
    color: var(--text) !important;
}

/* FIX: Mobile menu text color */
.sb-mobile,
.sb-mobile a,
.sb-menu-mobile .sb-mobile a,
.sb-header .sb-mobile a {
    color: #000 !important;
}

/* FIX: Date label background and text color - Override incoming message styles */
.sb-list>div.sb-label-date,
.sb-label-date-top {
    background: #f0e9e3 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    float: none !important;
}

.sb-list>div.sb-label-date span,
.sb-label-date-top span {
    background: #c5e2ee !important;
    color: #1a1a1a !important;
    padding: 5px 12px !important;
    border-radius: 7px !important;
    display: inline-block !important;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.1) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   USER REQUESTED FIXES (v91)
   1. Hide Dark Mode
   2. Green Colors  
   3. Google Sign In
   4. Rich Message Forms
   5. Checkbox Styling
   ========================================================================== */

/* 1. HIDE DARK MODE OPTION */
.sb-menu li[data-value="dark-mode"],
.sb-menu-mobile li[data-value="dark-mode"],
li.sb-dark-mode-switcher {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. BLUE -> GREEN REPLACEMENTS */
.sb-btn,
button.sb-btn,
a.sb-btn {
    background-color: var(--wa-send) !important;
    color: #fff !important;
}

.sb-tab.sb-active {
    color: var(--wa-send) !important;
    border-color: var(--wa-send) !important;
}

.sb-switch input:checked+span {
    background-color: var(--wa-send) !important;
    border-color: var(--wa-send) !important;
}

/* 3. CHECKBOX STYLING - Kill default appearance completely */
.sb-main input[type="checkbox"],
.sb-setting input[type="checkbox"],
input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    border: 2px solid #8696a0 !important;
    border-radius: 4px !important;
    outline: none !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Reset any pseudo-elements ON unchecked state */
.sb-main input[type="checkbox"]::before,
.sb-setting input[type="checkbox"]::before,
input[type="checkbox"]::before {
    content: none !important;
    display: none !important;
}

.sb-main input[type="checkbox"]:checked,
.sb-setting input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--wa-send) !important;
    background: var(--wa-send) !important;
    border-color: var(--wa-send) !important;
}

/* Custom white checkmark */
.sb-main input[type="checkbox"]:checked::after,
.sb-setting input[type="checkbox"]:checked::after,
input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
}

/* Radio Button Styling */
.sb-main input[type="radio"],
input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    border: 2px solid #8696a0 !important;
    border-radius: 50% !important;
    outline: none !important;
    background: #fff !important;
    background-image: none !important;
    cursor: pointer !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}

.sb-main input[type="radio"]:checked,
input[type="radio"]:checked {
    border: 6px solid var(--wa-send) !important;
    background: #fff !important;
}

/* 4. GOOGLE SIGN IN BUTTON */
.sb-apps-login .sb-btn[data-app="google"] {
    background-color: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
    box-shadow: none !important;
}

.sb-apps-login .sb-btn[data-app="google"]:hover {
    background-color: #f7f8f8 !important;
    border-color: #d2d2d2 !important;
}

/* 5. RICH MESSAGE FORMS - Clean layout with labels above */
.sb-rich-message .sb-input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 15px !important;
    display: block;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
}

/* HIDE OTP FIELD BY DEFAULT */
#otp {
    display: none !important;
}

/* Labels */
.sb-rich-message .sb-input>span {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    padding-left: 2px !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
}

/* Input boxes */
.sb-rich-message .sb-input input,
.sb-rich-message .sb-input .sb-select-phone,
.sb-rich-message .sb-input textarea {
    background-color: #ffffff !important;
    border: 1px solid #dadce0 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 45px !important;
    color: #111 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    margin: 0 !important;
}

/* Email field with arrow button */
.sb-rich-message .sb-input.sb-input-btn {
    display: block !important;
}

.sb-rich-message .sb-input.sb-input-btn input {
    padding-right: 45px !important;
}

.sb-rich-message .sb-input .sb-submit {
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    top: auto !important;
    height: 35px !important;
    width: 35px !important;
}

.sb-rich-message .sb-input input:focus {
    border-color: var(--wa-header-alt) !important;
    box-shadow: 0 0 0 2px rgba(18, 140, 126, 0.1) !important;
}