/* Global Red Theme Override - Replace all blue colors with #c71e23 */

/* Main admin theme colors */
.tk-admin > .tk-header > .tk-admin-nav > div > a:hover,
.tk-admin > .tk-header > .tk-admin-nav > div > a.tk-active,
.tk-admin > .tk-header > .tk-admin-nav-right > div > a:hover {
    color: #c71e23 !important;
}

/* Button colors */
.tk-btn,
a.tk-btn,
.tk-btn:hover,
.tk-btn:active,
a.tk-btn:hover,
a.tk-btn:active {
    background-color: #c71e23 !important;
    border-color: #c71e23 !important;
}

.tk-btn:hover,
.tk-btn:active,
a.tk-btn:hover,
a.tk-btn:active {
    background-color: #a11b1f !important;
}

/* Link colors */
.tk-btn-text:hover,
a:hover {
    color: #c71e23 !important;
}

/* Active states and highlights */
.tk-menu-wide ul li.tk-active,
.tk-menu-wide ul li:hover,
.tk-tab > .tk-nav > ul li.tk-active,
.tk-tab > .tk-nav > ul li:hover {
    color: #c71e23 !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li.tk-active,
.tk-user-conversations > li.tk-active {
    border-left-color: #c71e23 !important;
}

/* Input focus states */
.tk-setting input:focus,
.tk-setting select:focus,
.tk-setting textarea:focus,
.tk-input-setting input:focus,
.tk-input-setting select:focus,
.tk-input-setting textarea:focus,
.tk-input > input:focus,
.tk-input > input.tk-focus,
.tk-input > select:focus,
.tk-input > select.tk-focus,
.tk-input > textarea:focus,
.tk-input > textarea.tk-focus {
    border-color: #c71e23 !important;
    box-shadow: 0 0 5px rgba(199, 30, 35, 0.3) !important;
}

/* Checkbox states */
.tk-setting input[type="checkbox"]:checked,
.tk-table input[type="checkbox"]:checked,
.tk-setting input[type="checkbox"]:checked:before,
.tk-input-setting input[type="checkbox"]:checked:before,
.tk-table input[type="checkbox"]:checked:before {
    border-color: #c71e23 !important;
    background-color: #c71e23 !important;
    color: #c71e23 !important;
}

/* Search and filter buttons */
.tk-search-btn i:hover,
.tk-search-btn.tk-active i,
.tk-filter-btn i:hover,
.tk-filter-btn.tk-active i {
    color: #c71e23 !important;
}

/* Loading and notification states */
.tk-loading:before {
    color: #c71e23 !important;
}

/* Notification badge - bottom right corner */
.tk-board > .tk-admin-list .tk-scroll-area li {
    position: relative;
}

.tk-board > .tk-admin-list .tk-scroll-area li > .tk-notification-counter {
    position: absolute !important;
    bottom: 8px !important;
    right: 10px !important;
    left: auto !important;
}

/* RTL support for notification counter */
[dir="rtl"] .tk-board > .tk-admin-list .tk-scroll-area li > .tk-notification-counter,
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li > .tk-notification-counter {
    right: auto !important;
    left: 10px !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li > .tk-notification-counter {
    background-color: #c71e23 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}


/* ============================================
   RTL FIX: Admin Navigation
   ============================================ */

/* Header - RTL layout */
.tk-rtl.tk-admin > .tk-header,
.tk-rtl .tk-admin > .tk-header {
    flex-direction: row-reverse !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
    overflow: visible !important;
}

/* Logo - ensure fully visible on right side */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav > img,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav > img {
    order: -1 !important;
    margin: 0 30px 0 30px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
}

/* Admin nav - don't overflow */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav {
    overflow: visible !important;
    max-width: none !important;
}

/* Navigation container - reverse order */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav {
    flex-direction: row-reverse !important;
}

/* Nav items container - reverse direction */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav > div,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav > div {
    flex-direction: row-reverse !important;
}

/* Nav item icons - move to right side of text */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav > div > a,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav > div > a {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

/* Icon inside nav items - proper spacing for RTL */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav > div > a > i,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav > div > a > i {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Text span inside nav - no overlap */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav > div > a > span,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav > div > a > span {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
}

/* Submenu positioning for RTL */
.tk-rtl .tk-nav-submenu {
    right: auto !important;
    left: 0 !important;
    text-align: right !important;
}

.tk-rtl .tk-nav-submenu a {
    text-align: right !important;
    flex-direction: row-reverse !important;
}

/* Right side nav (account, lang) - move to left in RTL */
.tk-rtl.tk-admin > .tk-header > .tk-admin-nav-right,
.tk-rtl .tk-admin > .tk-header > .tk-admin-nav-right {
    flex-direction: row-reverse !important;
}

/* ============================================
   RTL FIX: Platform source colors on RIGHT side
   ============================================ */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li {
    border-left: none !important;
    border-right: 2px solid transparent !important;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li.tk-active {
    border-right-color: #c71e23 !important;
}

/* WhatsApp */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="whatsapp"],
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="wa"] {
    border-left-color: transparent !important;
    border-right-color: #25D366 !important;
}

/* Facebook */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="facebook"],
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="fb"] {
    border-left-color: transparent !important;
    border-right-color: #1877F2 !important;
}

/* Messenger */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="messenger"] {
    border-left-color: transparent !important;
    border-right-color: #0084FF !important;
}

/* Telegram */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="telegram"],
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="tg"] {
    border-left-color: transparent !important;
    border-right-color: #0088CC !important;
}

/* Instagram */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="inst"],
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="ig"] {
    border-left-color: transparent !important;
    border-right-color: #E1306C !important;
}

/* Email */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source="em"] {
    border-left-color: transparent !important;
    border-right-color: #FFA500 !important;
}

/* ::before pseudo element - move to right */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-source]::before {
    left: auto !important;
    right: 0 !important;
}

/* ============================================
   RTL FIX: Conversation header (.tk-top)
   ============================================ */
.tk-rtl .tk-board .tk-conversation > .tk-top {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Back button - far right in RTL */
.tk-rtl .tk-board .tk-conversation > .tk-top > .tk-btn-back {
    order: 1 !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}

/* Name link - after back button */
.tk-rtl .tk-board .tk-conversation > .tk-top > a {
    order: 2 !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Page/connection name badge - after name link */
.tk-rtl .tk-board .tk-conversation > .tk-top > .tk-top-page-name {
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* Labels - middle */
.tk-rtl .tk-board .tk-conversation > .tk-top > .tk-labels {
    order: 4 !important;
    margin-left: auto !important;
    margin-right: 10px !important;
}

/* Mobile menu - far left in RTL */
.tk-rtl .tk-board .tk-conversation > .tk-top > .tk-menu-mobile {
    order: 5 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Date label */
.tk-rtl .tk-board .tk-conversation > .tk-top > .tk-label-date-top {
    order: 6 !important;
}


/* Conversation and user interface elements */
.tk-board .tk-conversation > .tk-top a:hover i,
.tk-panel-details > i:hover,
.tk-board .tk-conversation > .tk-top > a:hover {
    color: #c71e23 !important;
}

/* Profile and location hover states */
.tk-profile-list [data-id="wp-id"]:hover,
.tk-profile-list [data-id="wp-id"]:hover label,
.tk-profile-list [data-id="conversation-source"]:hover,
.tk-profile-list [data-id="conversation-source"]:hover label,
.tk-profile-list [data-id="location"]:hover,
.tk-profile-list [data-id="location"]:hover label,
.tk-profile-list [data-id="timezone"]:hover,
.tk-profile-list [data-id="timezone"]:hover label,
.tk-profile-list [data-id="current_url"]:hover,
.tk-profile-list [data-id="current_url"]:hover label,
.tk-profile-list [data-id="envato-purchase-code"]:hover,
.tk-profile-list [data-id="envato-purchase-code"]:hover label {
    color: #c71e23 !important;
}

/* Menu and select hover states */
div ul.tk-menu li.tk-active:not(:hover),
.tk-select ul li.tk-active:not(:hover),
div ul.tk-menu li:hover,
.tk-select ul li:hover {
    color: #c71e23 !important;
}

.tk-select p:hover {
    color: #c71e23 !important;
}

/* Board and conversation states */
.tk-board .tk-conversation .tk-list > div .tk-menu-btn:hover {
    color: #c71e23 !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"] .tk-time {
    color: #c71e23 !important;
}

/* Button icon hover states */
.tk-btn-icon:hover {
    border-color: #c71e23 !important;
    color: #c71e23 !important;
}

.tk-tags-cnt > span:hover {
    border-color: #c71e23 !important;
    color: #c71e23 !important;
}

/* Language switcher */
.tk-language-switcher > i:hover {
    color: #c71e23 !important;
}

/* Tab navigation */
.tk-tab > .tk-nav > ul li.tk-active,
.tk-tab > .tk-nav > ul li:hover {
    color: #c71e23 !important;
}

/* Upload image hover states */
.tk-setting.tk-type-upload-image .image:hover,
.tk-setting [data-type="upload-image"] .image:hover,
.tk-input-setting.tk-type-upload-image .image:hover,
.tk-input-setting [data-type="upload-image"] .image:hover {
    border-color: #c71e23 !important;
}

/* Account menu hover states */
.tk-admin > .tk-header > .tk-admin-nav-right .tk-account .tk-menu li:hover,
.tk-admin > .tk-header > .tk-admin-nav-right .tk-account .tk-menu li.tk-active:hover {
    color: #c71e23 !important;
}

/* Settings area button hover */
.tk-area-settings .tk-tab .tk-btn:hover,
.tk-btn-white:hover,
.tk-lightbox .tk-btn-white:hover {
    background-color: #c71e23 !important;
    border-color: #c71e23 !important;
}

/* Date picker active states */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background-color: #c71e23 !important;
}

/* Progress bars and loading states */
.tk-progress-bar {
    background-color: #c71e23 !important;
}

/* Toggle switches */
.tk-toggle.tk-active {
    background-color: #c71e23 !important;
}

/* Notification dots */
.tk-notification-dot {
    background-color: #c71e23 !important;
}

/* Links in general */
a {
    color: inherit !important;
}

a:hover {
    color: #c71e23 !important;
}

/* Focus outlines */
*:focus {
    outline-color: #c71e23 !important;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: #c71e23 !important;
}

/* Custom select dropdowns */
.tk-select.tk-active,
.tk-select:focus {
    border-color: #c71e23 !important;
}

/* Tooltip borders */
.tk-tooltip {
    border-color: #c71e23 !important;
}

/* Badge colors */
.tk-badge {
    background-color: #c71e23 !important;
}

/* Status indicators */
.tk-status-online {
    color: #c71e23 !important;
}

/* Modal and popup accents */
.tk-popup .tk-header {
    border-color: #c71e23 !important;
}

/* Card and panel borders on hover */
.tk-card:hover,
.tk-panel:hover {
    border-color: #c71e23 !important;
}

/* Text selection */
::selection {
    background-color: rgba(199, 30, 35, 0.3) !important;
}

::-moz-selection {
    background-color: rgba(199, 30, 35, 0.3) !important;
}

/* Fix checkbox blue background */
.tk-setting input[type=checkbox]:checked,
.tk-input-setting input[type=checkbox]:checked {
    background: #c71e23 !important;
    border-color: #c71e23 !important;
}
