/* =============================================================================
   LBQ PAINEL — Hotfixes visuais
   Consolida fixes CSS de bugs do audit. Override com especificidade mínima
   onde possível; !important apenas em conflitos documentados.
   ============================================================================= */


/* =============================================================================
   1. FOUC fix (F-01, F-02)
   body com opacity:0 ficava indefinidamente se .app-loaded não chegasse
   ============================================================================= */
body,
body:not(.app-loaded) {
    opacity: 1 !important;
}

/* Page loader não ficar preso */
.page-loader {
    transition: opacity 0.3s ease;
}

.app-loaded .page-loader {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =============================================================================
   2. Missing keyframes (F-15): animation toastSlideIn não existia
   ============================================================================= */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
}


/* =============================================================================
   3. Hardcoded gold fixes (T-01, T-02, T-03, T-05, T-13)
   dashboard.css tem várias cores literais com !important que impedem
   o color customizer de funcionar. Este fix força uso das CSS vars.
   ============================================================================= */
:root {
    /* --gold-gradient dinâmico (antes era hardcoded linear-gradient(...D4AF37, F4D03F)) */
    --gold-gradient: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-hover, var(--primary-gold)) 100%) !important;
}

/* Sobreescreve regras com gradient hardcoded + !important em vários CSS */
.painel-task-item .task-checkbox.checked,
.task-checkbox.checked,
.btn-gold,
.btn-nova-tarefa.primary,
.btn-new-task.primary,
.gold-gradient {
    background: var(--gold-gradient, var(--primary-gold)) !important;
    border-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
}

.painel-task-item .task-checkbox.checked i,
.task-checkbox.checked i,
.btn-gold i,
.btn-gold svg {
    color: var(--text-dark) !important;
}


/* =============================================================================
   4. Flicker em admin launcher (F-06): transition coordenada
   ============================================================================= */
.admin-window,
.admin-launcher-card,
.launcher-card {
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    will-change: transform, opacity;
}

.admin-window[style*="display: none"],
.admin-window.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =============================================================================
   5. Modal overlay transition (F-17): display → opacity
   ============================================================================= */
.modal-overlay,
.modal-backdrop,
.dialog-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.modal-overlay.active,
.modal-overlay.open,
.modal-overlay.show,
.modal-backdrop.active,
.modal-backdrop.open,
.dialog-overlay.active,
.dialog-overlay.open,
body.modal-open .modal-overlay,
body:has(.modal-open) .modal-overlay {
    opacity: 1;
    pointer-events: auto;
}


/* =============================================================================
   6. Badge show/hide (F-12): display → opacity
   ============================================================================= */
.notification-badge[style*="display: none"],
.notification-badge.hidden,
.badge-dot[style*="display: none"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.85);
}

.notification-badge,
.badge-dot {
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =============================================================================
   7. Hover sem layout shift (F-07): remove scale que muda dimensions
   ============================================================================= */
.admin-launcher-card:hover,
.launcher-card:hover,
.card-link:hover {
    /* Troca scale por translateY */
    transform: translateY(-3px) !important;
}


/* =============================================================================
   8. Backdrop-filter stability (F-08): isolation para evitar repaint
   NOTE: .sidebar removido da lista — já tem will-change:transform em
   dashboard.css e o translateZ(0) aqui estava sobrescrevendo o
   translateX(-100%) do mobile, deixando o menu sempre visível.
   ============================================================================= */
.top-header,
.topbar,
.modal-overlay,
.dropdown-menu,
.notification-panel,
[class*="glass"] {
    isolation: isolate;
    transform: translateZ(0);
}

.sidebar {
    isolation: isolate;
}


/* =============================================================================
   9. Transition em classList loop (F-11, F-13): remove transition:all
   ============================================================================= */
.filter-chip,
.toggle-chip,
.status-toggle,
.tab-btn,
.pill-btn,
[class*="chip"] {
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}


/* =============================================================================
   10. Accessibility: focus visível em todo o painel
   ============================================================================= */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary-gold) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-gold-rgb, 212, 175, 55), 0.2) !important;
}


/* =============================================================================
   11. Kanban loading state (K-01, K-06)
   ============================================================================= */
.kanban-board.is-loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}

.kanban-board.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--border-dark, rgba(255,255,255,0.1));
    border-top-color: var(--primary-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

.kanban-board.is-empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* =============================================================================
   12. Reduced motion honorado globalmente
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =============================================================================
   13. Ghost drag elements (K-12): z-index alto para não ficar atrás de modals
   ============================================================================= */
.drag-ghost,
.task-drag-ghost,
.kanban-drag-ghost,
[class*="drag-ghost"] {
    z-index: 999999 !important;
    pointer-events: none !important;
}


/* =============================================================================
   13b. Touch drag support em kanban (K-10): mobile
   Sem touch-action: pan-y, o browser rouba o gesture antes do pointerdown.
   Durante drag, bloqueia scroll para permitir movimento livre.
   ============================================================================= */
.kanban-card,
.task-card,
[data-draggable="true"] {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.kanban-card.dragging,
.task-card.dragging,
.dragging[data-draggable="true"] {
    touch-action: none;
    cursor: grabbing;
}

/* Evita text selection durante drag globalmente */
body.is-dragging {
    -webkit-user-select: none;
    user-select: none;
    cursor: grabbing !important;
}

body.is-dragging * {
    cursor: grabbing !important;
}


/* =============================================================================
   14. RGB sync — remover uso de --primary-gold-rgb hardcoded
   (está no JS hotfix syncDerived que atualiza via mutation observer)
   ============================================================================= */


/* =============================================================================
   14b. Animação hover para texto truncado em cards de tarefa
   User quer ver o título/parte completo ao passar mouse.
   ============================================================================= */
.painel-task-item,
.task-card,
.kanban-card {
    transition:
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
    position: relative;
    overflow: visible;
}

.painel-task-item:hover,
.task-card:hover,
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.28),
                0 0 0 1px var(--primary-gold, #D4AF37);
    z-index: 5;
}

/* Marquee/animação no título quando overflow */
.painel-task-item .task-title,
.painel-task-item h3,
.painel-task-item h4,
.task-card .task-title,
.task-card h3,
.kanban-card .task-title,
.kanban-card h4 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color 0.2s ease;
}

/* Expand card inteiro no hover para mostrar título completo + adicional */
.painel-task-item:hover .task-title,
.painel-task-item:hover h3,
.painel-task-item:hover h4,
.task-card:hover .task-title,
.task-card:hover h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-height: none;
    color: var(--primary-gold, #D4AF37);
    line-height: 1.35;
}

/* Tooltip customizado em title attribute (fallback alem do native) */
.painel-task-item [title]:hover::after,
.task-card [title]:hover::after {
    /* Nao duplica tooltip nativo, apenas garante cursor */
    cursor: help;
}


/* =============================================================================
   15. Print safety (remove backdrop-filter que quebra print)
   ============================================================================= */
@media print {
    .sidebar,
    .top-header,
    .topbar,
    .modal-overlay,
    .dropdown-menu,
    .notification-panel,
    .fab,
    [class*="glass"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* =============================================================================
   16. MOBILE POLISH — ajustes globais de densidade/tipografia em <768px
   -----------------------------------------------------------------------------
   Páginas usam font-sizes e paddings pensados pra desktop. Esta camada
   uniformiza pra mobile: headers menores, padding reduzido, gaps menores,
   inputs com 16px (evita zoom iOS), touch targets 44px.
   ============================================================================= */
@media (max-width: 768px) {
    /* Tipografia — headers escalam suavemente */
    h1,
    .page-header h1,
    .page-title,
    .dashboard-header h1,
    .window-header h2 {
        font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
        line-height: 1.25 !important;
    }

    h2,
    .section-title,
    .card-header h3,
    .users-table-card h3 {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 0.98rem !important;
    }

    /* Sidebar mobile: padding generoso (30px) → densidade média */
    .sidebar {
        padding: 20px 18px !important;
    }

    .sidebar .logo {
        margin-bottom: 18px;
    }

    /* Cards / painéis: reduz padding agressivo de 24-40px — sem !important
       pra permitir override por página quando necessário */
    .widget-card,
    .stat-card,
    .kpi-card,
    .panel-card,
    .admin-stat-card,
    .content-area .card,
    .users-table-card {
        padding: 16px;
    }

    /* Widgets grandes (dashboards) */
    .big-card,
    .hero-card {
        padding: 18px !important;
    }

    /* Grids/Gaps — aperta para caber melhor em 375px */
    .stats-grid,
    .widgets-grid,
    .bottom-section,
    .middle-section,
    .admin-stats-grid {
        gap: 12px !important;
    }

    /* Força stats em 2 colunas (evita cards full-width gigantes empilhados) */
    .stats-mini,
    .contacts-stats,
    .contatos-stats,
    .monitor-stats,
    .atendimento-page .stats-mini,
    .contatos-page .stats-mini,
    .prazos-stats,
    .painel-stats,
    .adv-stats,
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* KPI cards (analise) compactos */
    .kpi-card {
        padding: 12px 14px !important;
    }

    .kpi-value {
        font-size: 1.4rem !important;
    }

    .kpi-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    /* Contatos cards compactos */
    .contatos-stat-card {
        padding: 12px 12px !important;
    }

    .contatos-stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }

    /* Page-actions (analise e outras): wrap pra botões não cortarem em mobile */
    .top-row .page-actions,
    .page-header .page-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Exceto atendimento que já tem scroll horizontal próprio */
    .atendimento-page .top-row .page-actions {
        flex-wrap: wrap !important;
    }

    /* Painel-card headers em mobile: wrap pra título e actions não atropelarem */
    .painel-card-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .painel-card-header h3 {
        font-size: 0.95rem !important;
        flex: 1 1 auto;
    }

    .painel-card-header .toggle-group {
        flex-shrink: 0;
    }

    .painel-card-header .toggle-group button {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }

    /* Bulk-actions bar: não renderizar quando nenhum item selecionado */
    .bulk-actions-bar:not(.visible):not(.active):not(.show) {
        display: none !important;
    }

    /* Filtros em wrap */
    .window-toolbar,
    .filter-bar,
    .logs-toolbar {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Inputs/selects — 16px evita zoom automático no iOS */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Chips e pills mantêm compactos mas legíveis */
    .filter-chip,
    .toggle-chip,
    .tag,
    .badge {
        font-size: 0.78rem !important;
    }

    /* Tabelas: células mais respiradas, texto legível */
    table.users-table th,
    table.users-table td,
    table.data-table th,
    table.data-table td,
    table.panel-table th,
    table.panel-table td {
        padding: 10px 10px !important;
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
    }

    /* Touch targets: só em back-btn / close-btn que são crítico */
    .back-btn,
    .window-close-btn {
        min-height: 44px;
    }

    /* Modais — margens reduzidas pra caber */
    .modal-container,
    .trello-modal,
    .task-modal,
    .icon-bank-container {
        margin: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .modal-footer,
    .dialog-footer {
        padding: 12px 16px !important;
    }

    .modal-footer .btn,
    .dialog-footer .btn {
        flex: 1 1 auto;
    }

    /* Botões FAB — afasta da safe-area do iOS */
    .fab,
    [class*="fab-"] {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
        right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
    }

    /* Search bars internas compactas */
    .admin-search input,
    .search-box input {
        font-size: 16px !important;
        padding: 10px 12px 10px 36px !important;
    }

    /* Stat icons não ficam gigantes */
    .admin-stat-icon,
    .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
    }

    /* Evita overflow horizontal por conteúdo largo */
    body, .main-content {
        overflow-x: hidden;
    }

    /* Tabelas que não cabem ganham scroll horizontal */
    .users-table-wrapper,
    .table-wrapper,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Telas muito estreitas (iPhone SE / 320px etc) */
@media (max-width: 480px) {
    h1,
    .page-header h1,
    .page-title,
    .dashboard-header h1 {
        font-size: 1.15rem !important;
    }

    .widget-card,
    .stat-card,
    .kpi-card,
    .panel-card,
    .admin-stat-card {
        padding: 12px 14px !important;
    }

    /* Grid de stats vira 1 coluna em telas estreitas */
    .admin-stats-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Window-header mobile compacto */
    .window-header {
        padding: 12px 14px !important;
    }

    .window-header h2 {
        font-size: 1rem !important;
    }

    /* Pagination menor */
    .table-pagination .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}