/* ============================================
 * Giraffe360 - Overrides CSS v7.0
 * Correções de layout conforme feedback do cliente
 * ============================================ */

/* ============================================ */
/* MOD 6 & 7: Sidebar esquerdo - Colapsar para dar espaço */
/* ============================================ */
nav[class*="sc-af3b4037-2"] {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    overflow: hidden !important;
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease !important;
}
nav[class*="sc-af3b4037-2"]:hover {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}
nav[class*="sc-af3b4037-2"] span,
nav[class*="sc-af3b4037-2"] p {
    opacity: 0 !important;
    white-space: nowrap !important;
    transition: opacity 0.2s ease !important;
    overflow: hidden !important;
}
nav[class*="sc-af3b4037-2"]:hover span,
nav[class*="sc-af3b4037-2"]:hover p {
    opacity: 1 !important;
}
nav[class*="sc-af3b4037-2"] svg {
    flex-shrink: 0 !important;
    min-width: 20px !important;
}

/* Fix: Painel de filtros de conversas - textos cortados */
.sc-a55e1b02-0,
[class*="sc-a55e1b02-0"] {
    width: 240px !important;
    min-width: 240px !important;
    overflow: visible !important;
}
button[class*="sc-a55e1b02-4"] span:first-child {
    font-size: 11.5px !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
}

/* ============================================ */
/* MOD 8: Abas de filtro (Todas/Não atribuídas/Minhas) */
/* Sem sobreposição, com scroll horizontal */
/* ============================================ */
[class*="sc-983b542e-10"],
[class*="sc-983b542e-8"] {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 8px 12px 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
[class*="sc-983b542e-10"]::-webkit-scrollbar,
[class*="sc-983b542e-8"]::-webkit-scrollbar {
    display: none !important;
}

[class*="sc-983b542e-11"],
[class*="sc-983b542e-9"] {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    border: 1px solid #e0e0e0 !important;
    background: #f8f8f8 !important;
    transition: all 0.2s ease !important;
}
[class*="sc-983b542e-11"]:hover,
[class*="sc-983b542e-9"]:hover {
    background: #FF980020 !important;
    border-color: #FF9800 !important;
}

/* ============================================ */
/* MOD 9: Chat Header - Compacto */
/* ============================================ */
[class*="sc-983b542e-3"],
[class*="sc-983b542e-4"] {
    padding: 8px 12px !important;
    min-height: auto !important;
}

/* ============================================ */
/* Cards de conversa - Layout limpo sem encavalamento */
/* ============================================ */
[class*="sc-4f7527a1-0"] {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    overflow: visible !important;
    min-height: auto !important;
}

[class*="sc-4f7527a1-3"] {
    overflow: hidden !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

[class*="sc-4f7527a1-4"] {
    width: 100% !important;
    overflow: hidden !important;
}

[class*="sc-4f7527a1-7"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    max-width: 100% !important;
}

[class*="sc-4f7527a1-8"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    color: #666 !important;
    max-width: 100% !important;
}

[class*="sc-4f7527a1-5"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.7rem !important;
    color: #888 !important;
    max-width: 100% !important;
}

/* Tags dentro dos cards */
[class*="sc-4f7527a1-3"] > div:not([class*="sc-4f7527a1"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    max-height: 22px !important;
    overflow: hidden !important;
}

/* ============================================ */
/* MOD 10: Tags - Badges coloridos arredondados */
/* ============================================ */
.giraffe-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: default !important;
}
.giraffe-tag-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* ============================================ */
/* MOD 11: Prioridade - Dropdown */
/* ============================================ */
.giraffe-priority-dropdown {
    width: 100% !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    background-color: #fff !important;
    appearance: auto !important;
    outline: none !important;
    color: #333 !important;
}
.giraffe-priority-dropdown:focus {
    border-color: #FF9800 !important;
    box-shadow: 0 0 0 2px rgba(255,152,0,0.15) !important;
}

/* ============================================ */
/* MOD 12: Indicador de salvamento */
/* ============================================ */
.giraffe-save-indicator {
    position: absolute !important;
    top: 4px !important;
    right: 8px !important;
    font-size: 0.65rem !important;
    color: #4CAF50 !important;
    font-weight: 600 !important;
    z-index: 10 !important;
}

/* ============================================ */
/* MOD 15: Disparos Programados - Layout correto */
/* ============================================ */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}
table td, table th {
    padding: 0.5rem 0.75rem !important;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================ */
/* MOD 17 & 18: CRM Edit Modal */
/* ============================================ */
.giraffe-crm-tags-section {
    margin: 0.75rem 0 !important;
    padding: 0.6rem !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
}
.giraffe-lead-actions {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #eee !important;
}
.giraffe-lead-actions .btn-ganho {
    flex: 1 !important;
    padding: 0.6rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    background-color: #4CAF50 !important;
    color: white !important;
    transition: opacity 0.2s !important;
}
.giraffe-lead-actions .btn-perdido {
    flex: 1 !important;
    padding: 0.6rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    background-color: #F44336 !important;
    color: white !important;
    transition: opacity 0.2s !important;
}
.giraffe-lead-actions button:hover {
    opacity: 0.85 !important;
}

/* ============================================ */
/* MOD 19: QR Code */
/* ============================================ */
img[src*="base64"] {
    max-width: 280px !important;
    margin: 1rem auto !important;
    display: block !important;
    image-rendering: pixelated !important;
}

/* ============================================ */
/* Tags display container */
/* ============================================ */
.giraffe-tags-display {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 24px !important;
}

/* ============================================ */
/* Toast notifications */
/* ============================================ */
.giraffe-toast {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    color: #fff !important;
    max-width: 350px !important;
}

/* ============================================ */
/* Painel lateral direito (detalhes do contato) */
/* ============================================ */
[class*="sc-983b542e-14"],
[class*="sc-983b542e-15"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 60px) !important;
}

/* ============================================ */
/* React-Select customização */
/* ============================================ */
[class*="sc-a94906b9"] {
    min-height: auto !important;
}

/* ============================================ */
/* Kanban cards - cursor e hover */
/* ============================================ */
.sc-907ae6db-0[draggable="true"] {
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.sc-907ae6db-0[draggable="true"]:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* ============================================ */
/* Animações */
/* ============================================ */
@keyframes giraffeSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}