/* Tema Meetcall - Cores personalizadas */
/* Cores:
   - Laranja (Primary): #FA732D - R250 G115 B45
   - Roxo (Secondary): #783CA0 - R120 G60 B160
   - Rosa (Tertiary): #C878B9 - R200 G120 B185
   - Azul (Accent): #2D4B96 - R45 G75 B150
*/

:root {
    --meetcall-orange: #FA732D;
    --meetcall-orange-light: #FB8F53;
    --meetcall-orange-lighter: #FCAB79;
    --meetcall-orange-dark: #E85F1A;
    --meetcall-orange-darker: #C94E0D;
    
    --meetcall-purple: #783CA0;
    --meetcall-purple-light: #9055B8;
    --meetcall-purple-lighter: #A86ECF;
    --meetcall-purple-dark: #612F82;
    
    --meetcall-pink: #C878B9;
    --meetcall-pink-light: #D494C9;
    --meetcall-pink-lighter: #E0B0D9;
    
    --meetcall-blue: #2D4B96;
    --meetcall-blue-light: #4565B0;
    --meetcall-blue-lighter: #5D7FCA;
    
    --primary-color: #FA732D !important;
    --secondary-color: #783CA0 !important;
    --accent-color: #2D4B96 !important;
    --background-color: #ffffff !important;
    --text-color: #374151 !important;
    --text-light: #6b7280 !important;
    --border-color: #e5e7eb !important;
    --hover-color: #FFF5F0 !important;
}

/* Meetcall specific colors */
html.meetcall {
    --primary-color: #FA732D !important;
    --secondary-color: #783CA0 !important;
    --accent-color: #2D4B96 !important;
    --background-color: #ffffff !important;
    --text-color: #374151 !important;
    --text-light: #6b7280 !important;
    --border-color: #e5e7eb !important;
    --hover-color: #FFF5F0 !important;
}

/* Override específico para botões roxos -> laranja */
html.meetcall .bg-purple-600,
html.meetcall .bg-purple-500,
html.meetcall .bg-purple-700 {
    background-color: var(--meetcall-orange) !important;
    color: #ffffff !important;
}

html.meetcall .hover\:bg-purple-700:hover,
html.meetcall .hover\:bg-purple-600:hover {
    background-color: var(--meetcall-orange-dark) !important;
    color: #ffffff !important;
}

/* Texto laranja - apenas onde NÃO é botão com fundo laranja */
html.meetcall .text-purple-600:not(.bg-purple-600):not(.bg-purple-500):not(.bg-purple-700),
html.meetcall .text-purple-500:not(.bg-purple-600):not(.bg-purple-500):not(.bg-purple-700) {
    color: var(--meetcall-orange) !important;
}

/* Garantir texto branco em TODOS os botões com fundo laranja */
html.meetcall button.bg-purple-600,
html.meetcall button.bg-purple-500,
html.meetcall button.bg-purple-700,
html.meetcall a.bg-purple-600,
html.meetcall a.bg-purple-500,
html.meetcall a.bg-purple-700,
html.meetcall .btn-primary,
html.meetcall [class*="bg-purple-"][class*="text-white"],
html.meetcall .bg-purple-600 *,
html.meetcall .bg-purple-500 *,
html.meetcall .bg-purple-700 * {
    color: #ffffff !important;
}

/* Sidebar específico para Meetcall */
html.meetcall #sidebar-main {
    background-color: var(--background-color) !important;
}

html.meetcall #sidebar-main .border-gray-200 {
    border-color: var(--border-color) !important;
}

html.meetcall #sidebar-main img {
    max-height: 40px !important;
}

/* Menu items específicos */
html.meetcall .bg-gray-100 {
    background-color: #FFF5F0 !important;
}

html.meetcall .text-gray-700 {
    color: var(--text-color) !important;
}

html.meetcall .hover\:bg-gray-50:hover {
    background-color: var(--hover-color) !important;
}

html.meetcall .hover\:text-gray-600:hover {
    color: var(--meetcall-orange) !important;
}

html.meetcall .text-gray-600 {
    color: var(--meetcall-orange) !important;
}

html.meetcall .text-gray-400 {
    color: #9ca3af !important;
}

html.meetcall .group-hover\:text-gray-500:hover {
    color: var(--text-light) !important;
}

html.meetcall .border-gray-600 {
    border-color: var(--meetcall-orange) !important;
}

html.meetcall .bg-gray-50 {
    background-color: var(--hover-color) !important;
}

/* Avatar e perfil do usuário específicos para Meetcall */
html.meetcall .bg-gray-500 {
    background-color: var(--meetcall-orange) !important;
}

html.meetcall .text-gray-400:hover {
    color: var(--meetcall-orange) !important;
}

html.meetcall .hover\:text-gray-600:hover {
    color: var(--meetcall-orange) !important;
}

/* Dropdown menu específico */
html.meetcall .hover\:bg-gray-100:hover {
    background-color: var(--hover-color) !important;
}

/* Formulários */
html.meetcall .border-gray-300 {
    border-color: var(--border-color) !important;
}

html.meetcall .focus\:border-gray-500:focus {
    border-color: var(--meetcall-orange) !important;
}

html.meetcall .focus\:ring-gray-500:focus {
    --tw-ring-color: var(--meetcall-orange) !important;
}

/* Texto */
html.meetcall .text-gray-900 {
    color: var(--text-color) !important;
}

html.meetcall .text-gray-500 {
    color: var(--text-light) !important;
}

/* Cards e containers */
html.meetcall .bg-white {
    background-color: var(--background-color) !important;
}

html.meetcall .border {
    border-color: var(--border-color) !important;
}

/* Badges e labels */
html.meetcall .badge-primary {
    background-color: var(--meetcall-orange) !important;
    color: white !important;
}

html.meetcall .badge-secondary {
    background-color: var(--meetcall-purple) !important;
    color: white !important;
}

/* Alertas */
html.meetcall .alert-info {
    background-color: #FFF5F0 !important;
    color: var(--text-color) !important;
    border-color: var(--meetcall-orange-light) !important;
}

/* Navegação */
html.meetcall .nav-item.active {
    background-color: #FFF5F0 !important;
    color: var(--meetcall-orange) !important;
}

html.meetcall .nav-item:hover {
    background-color: var(--hover-color) !important;
}

/* Tabelas */
html.meetcall .table th {
    background-color: #FFF5F0 !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.meetcall .table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Paginação */
html.meetcall .pagination .page-link {
    color: var(--meetcall-orange) !important;
    border-color: var(--border-color) !important;
}

html.meetcall .pagination .page-link:hover {
    background-color: var(--hover-color) !important;
    color: var(--meetcall-orange-dark) !important;
}

html.meetcall .pagination .page-item.active .page-link {
    background-color: var(--meetcall-orange) !important;
    border-color: var(--meetcall-orange) !important;
    color: white !important;
}

/* Modals */
html.meetcall .modal-header {
    background-color: #FFF5F0 !important;
    border-color: var(--border-color) !important;
}

html.meetcall .modal-footer {
    background-color: #FFF5F0 !important;
    border-color: var(--border-color) !important;
}

/* Dropdowns */
html.meetcall .dropdown-menu {
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

html.meetcall .dropdown-item:hover {
    background-color: var(--hover-color) !important;
    color: var(--meetcall-orange) !important;
}

/* Progress bars */
html.meetcall .progress {
    background-color: #FFF5F0 !important;
}

html.meetcall .progress-bar {
    background-color: var(--meetcall-orange) !important;
}

/* Gradientes em botões de autenticação */
html.meetcall .bg-gradient-to-r.from-blue-500.to-purple-600 {
    background: linear-gradient(to right, var(--meetcall-orange), var(--meetcall-purple)) !important;
}

html.meetcall .hover\:from-blue-600:hover.hover\:to-purple-700:hover {
    background: linear-gradient(to right, var(--meetcall-orange-dark), var(--meetcall-purple-dark)) !important;
}

/* Focus rings personalizados */
html.meetcall .focus\:ring-purple-500:focus {
    --tw-ring-color: var(--meetcall-orange) !important;
}

html.meetcall .focus\:border-purple-500:focus {
    border-color: var(--meetcall-orange) !important;
}

/* Formulários e inputs */
html.meetcall .border-purple-500 {
    border-color: var(--meetcall-orange) !important;
}

html.meetcall .ring-purple-500 {
    --tw-ring-color: var(--meetcall-orange) !important;
}

/* Botões com cores específicas */
html.meetcall .bg-purple-600 {
    background-color: var(--meetcall-orange) !important;
    color: #ffffff !important;
}

html.meetcall .hover\:bg-purple-700:hover {
    background-color: var(--meetcall-orange-dark) !important;
    color: #ffffff !important;
}

html.meetcall .bg-purple-100 {
    background-color: #FFF5F0 !important;
}

/* Texto em elementos que não são botões */
html.meetcall .bg-purple-100 .text-purple-700,
html.meetcall .bg-purple-50 .text-purple-700 {
    color: var(--meetcall-orange-dark) !important;
}

html.meetcall .bg-purple-50 {
    background-color: var(--hover-color) !important;
}

html.meetcall .border-purple-600 {
    border-color: var(--meetcall-orange) !important;
}

/* Links e texto hover */
html.meetcall .hover\:text-purple-600:hover {
    color: var(--meetcall-orange) !important;
}

html.meetcall .group-hover\:text-purple-500:hover {
    color: var(--meetcall-orange-light) !important;
}

/* Conteúdo interno - botões e elementos comuns */
html.meetcall .bg-purple-600,
html.meetcall .bg-purple-500,
html.meetcall .bg-purple-700 {
    background-color: var(--meetcall-orange) !important;
    color: #ffffff !important;
}

html.meetcall .hover\:bg-purple-700:hover,
html.meetcall .hover\:bg-purple-600:hover {
    background-color: var(--meetcall-orange-dark) !important;
    color: #ffffff !important;
}

/* Texto laranja apenas para elementos que NÃO são botões */
html.meetcall span.text-purple-600,
html.meetcall span.text-purple-500,
html.meetcall span.text-purple-700,
html.meetcall p.text-purple-600,
html.meetcall p.text-purple-500,
html.meetcall div.text-purple-600:not([class*="bg-purple"]),
html.meetcall i.text-purple-600,
html.meetcall i.text-purple-500 {
    color: var(--meetcall-orange) !important;
}

/* Cards e painéis */
html.meetcall .border-purple-600,
html.meetcall .border-purple-500 {
    border-color: var(--meetcall-orange) !important;
}

/* Estados de foco */
html.meetcall .focus\:ring-purple-500:focus {
    --tw-ring-color: var(--meetcall-orange) !important;
}

html.meetcall .focus\:border-purple-500:focus,
html.meetcall .focus\:border-purple-600:focus {
    border-color: var(--meetcall-orange) !important;
}

/* Elementos de loading e estados */
html.meetcall .ring-purple-500 {
    --tw-ring-color: var(--meetcall-orange) !important;
}

/* Badges e indicadores */
html.meetcall .bg-purple-100 {
    background-color: #FFF5F0 !important;
}

html.meetcall .text-purple-700 {
    color: var(--meetcall-orange-dark) !important;
}

/* Bordas e separadores */
html.meetcall .border-purple-600 {
    border-color: var(--meetcall-orange) !important;
}

/* Ícones e símbolos */
html.meetcall .text-purple-600 {
    color: var(--meetcall-orange) !important;
}

/* Overlay e estados especiais */
html.meetcall .bg-purple-50 {
    background-color: var(--hover-color) !important;
}

html.meetcall .hover\:bg-purple-25:hover {
    background-color: var(--hover-color) !important;
}

/* ===== BOTÕES SECUNDÁRIOS COM ROXO ===== */
html.meetcall .btn-secondary {
    background-color: var(--meetcall-purple) !important;
    border-color: var(--meetcall-purple) !important;
    color: #ffffff !important;
}

html.meetcall .btn-secondary:hover {
    background-color: var(--meetcall-purple-dark) !important;
    border-color: var(--meetcall-purple-dark) !important;
}

/* ===== ELEMENTOS COM AZUL (ACCENT) ===== */
html.meetcall .btn-info {
    background-color: var(--meetcall-blue) !important;
    border-color: var(--meetcall-blue) !important;
    color: #ffffff !important;
}

html.meetcall .btn-info:hover {
    background-color: var(--meetcall-blue-light) !important;
    border-color: var(--meetcall-blue-light) !important;
}

html.meetcall .text-info {
    color: var(--meetcall-blue) !important;
}

/* ===== LINKS ===== */
html.meetcall a {
    color: var(--meetcall-orange);
}

html.meetcall a:hover {
    color: var(--meetcall-orange-dark);
}

/* ===== CHECKBOX E RADIO ===== */
html.meetcall input[type="checkbox"]:checked {
    background-color: var(--meetcall-orange) !important;
    border-color: var(--meetcall-orange) !important;
}

html.meetcall input[type="radio"]:checked {
    background-color: var(--meetcall-orange) !important;
    border-color: var(--meetcall-orange) !important;
}

/* ===== SWITCH/TOGGLE ===== */
html.meetcall .toggle-input:checked + .toggle-label {
    background-color: var(--meetcall-orange) !important;
}

/* ===== FOCUS STATES ===== */
html.meetcall input:focus,
html.meetcall select:focus,
html.meetcall textarea:focus {
    border-color: var(--meetcall-orange) !important;
    box-shadow: 0 0 0 3px rgba(250, 115, 45, 0.15) !important;
}

/* ===== PRIMARY BUTTONS ===== */
html.meetcall .btn-primary,
html.meetcall button.bg-orange-500,
html.meetcall button.bg-orange-600 {
    background-color: var(--meetcall-orange) !important;
    border-color: var(--meetcall-orange) !important;
}

html.meetcall .btn-primary:hover,
html.meetcall button.bg-orange-500:hover,
html.meetcall button.bg-orange-600:hover {
    background-color: var(--meetcall-orange-dark) !important;
    border-color: var(--meetcall-orange-dark) !important;
}

/* ===== GRADIENTES ESPECÍFICOS ===== */
html.meetcall .gradient-primary {
    background: linear-gradient(135deg, var(--meetcall-orange) 0%, var(--meetcall-purple) 100%) !important;
}

html.meetcall .gradient-bg {
    background: linear-gradient(135deg, #ffffff 0%, #FFF5F0 100%) !important;
}

/* ===== SIDEBAR ATIVO ===== */
html.meetcall .sidebar-item.active,
html.meetcall .menu-item.active > a {
    background-color: #FFF5F0 !important;
    border-left: 3px solid var(--meetcall-orange) !important;
    color: var(--meetcall-orange) !important;
}

html.meetcall .sidebar-item.active .icon,
html.meetcall .menu-item.active > a .icon {
    color: var(--meetcall-orange) !important;
}

/* ===== SPINNER/LOADING ===== */
html.meetcall .spinner-border {
    border-color: var(--meetcall-orange) !important;
    border-right-color: transparent !important;
}

/* ===== TABS ===== */
html.meetcall .nav-tabs .nav-link.active {
    color: var(--meetcall-orange) !important;
    border-bottom-color: var(--meetcall-orange) !important;
}

html.meetcall .nav-tabs .nav-link:hover {
    color: var(--meetcall-orange-dark) !important;
}

/* ===== CARDS DESTACADOS ===== */
html.meetcall .card-primary {
    border-color: var(--meetcall-orange) !important;
}

html.meetcall .card-primary .card-header {
    background-color: var(--meetcall-orange) !important;
    color: #ffffff !important;
}

/* ===== TOOLTIP ===== */
html.meetcall .tooltip .tooltip-inner {
    background-color: var(--meetcall-purple) !important;
}

html.meetcall .tooltip .arrow::before {
    border-top-color: var(--meetcall-purple) !important;
}

/* ===== SELECTION ===== */
html.meetcall ::selection {
    background-color: var(--meetcall-orange) !important;
    color: #ffffff !important;
}

/* ===== SCROLLBAR ===== */
html.meetcall ::-webkit-scrollbar-thumb {
    background-color: var(--meetcall-orange-light) !important;
}

html.meetcall ::-webkit-scrollbar-thumb:hover {
    background-color: var(--meetcall-orange) !important;
}