/* ============================================================
   OminiHub 360 — Admin Dark Mode Fixes
   Sobrescreve estilos inline problemáticos nas páginas custom
   ============================================================ */

/* ===== Fundos brancos hardcoded → cor de card escura ===== */
.dark .fi-main-ctn [style*="background:#fff"],
.dark .fi-main-ctn [style*="background: #fff"],
.dark .fi-main-ctn [style*="background:#ffffff"],
.dark .fi-main-ctn [style*="background: #ffffff"],
.dark .fi-main-ctn [style*="background-color:#fff"],
.dark .fi-main-ctn [style*="background-color: #fff"],
.dark .fi-main-ctn [style*="background-color:#ffffff"],
.dark .fi-main-ctn [style*="background-color: #ffffff"],
.dark .fi-main-ctn [style*="background:#f4f4f5"],
.dark .fi-main-ctn [style*="background: #f4f4f5"],
.dark .fi-main-ctn [style*="background:#f8f9fb"],
.dark .fi-main-ctn [style*="background:#fafafa"],
.dark .fi-main-ctn [style*="background:#f6f5fb"] {
    background: rgb(17 24 39) !important;
}

/* ===== Cabeçalhos de tabela light hardcoded ===== */
.dark .fi-main-ctn thead tr[style*="background:#f4f4f5"],
.dark .fi-main-ctn thead tr[style*="background:#f8f9fb"],
.dark .fi-main-ctn thead tr[style*="background:#f9fafb"] {
    background: rgb(31 41 55) !important;
}

/* ===== Texto escuro hardcoded → texto claro ===== */
.dark .fi-main-ctn [style*="color:#18181b"],
.dark .fi-main-ctn [style*="color: #18181b"],
.dark .fi-main-ctn [style*="color:#13151c"],
.dark .fi-main-ctn [style*="color: #13151c"],
.dark .fi-main-ctn [style*="color:#111827"],
.dark .fi-main-ctn [style*="color:#000"],
.dark .fi-main-ctn [style*="color:black"] {
    color: rgb(243 244 246) !important;
}

/* ===== Texto cinza secundário hardcoded → cinza claro ===== */
.dark .fi-main-ctn [style*="color:#71717a"],
.dark .fi-main-ctn [style*="color: #71717a"],
.dark .fi-main-ctn [style*="color:#6b7280"],
.dark .fi-main-ctn [style*="color: #6b7280"],
.dark .fi-main-ctn [style*="color:#8a90a0"],
.dark .fi-main-ctn [style*="color:#454b59"],
.dark .fi-main-ctn [style*="color:#2c3142"],
.dark .fi-main-ctn [style*="color:#374151"] {
    color: rgb(156 163 175) !important;
}

/* ===== Bordas claras hardcoded → bordas escuras ===== */
.dark .fi-main-ctn [style*="border:1px solid #e4e4e7"],
.dark .fi-main-ctn [style*="border: 1px solid #e4e4e7"],
.dark .fi-main-ctn [style*="border:1px solid #e5e7eb"],
.dark .fi-main-ctn [style*="border:1px solid #e8eaef"],
.dark .fi-main-ctn [style*="border:1px solid #eee"],
.dark .fi-main-ctn [style*="border:1px solid #f1f3f7"],
.dark .fi-main-ctn [style*="border-color:#e4e4e7"],
.dark .fi-main-ctn [style*="border-color:#e5e7eb"] {
    border-color: rgb(55 65 81) !important;
}
.dark .fi-main-ctn [style*="border-top:1px solid #e4e4e7"],
.dark .fi-main-ctn [style*="border-top:1px solid #e5e7eb"] {
    border-top-color: rgb(55 65 81) !important;
}

/* ===== Inputs e selects light hardcoded ===== */
.dark .fi-main-ctn select[style*="background:#fff"],
.dark .fi-main-ctn input[style*="background:#fff"],
.dark .fi-main-ctn textarea[style*="background:#fff"] {
    background: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
    color: rgb(243 244 246) !important;
}

/* ===== Padronização visual avançada ===== */
/* Tabelas: zebra com cor da marca */
.fi-ta-table tbody tr:nth-child(even) {
    background: rgb(249 250 251 / 0.4);
}
.dark .fi-ta-table tbody tr:nth-child(even) {
    background: rgb(15 23 42 / 0.5);
}

/* Hover destacado em violeta da marca */
.fi-ta-table tbody tr:hover {
    background: rgb(245 243 255) !important;
}
.dark .fi-ta-table tbody tr:hover {
    background: rgb(46 16 101 / 0.3) !important;
}

/* Stats overview do dashboard: garantir contraste */
.dark .fi-wi-stats-overview-stat-value {
    color: rgb(255 255 255) !important;
}
.dark .fi-wi-stats-overview-stat-label {
    color: rgb(156 163 175) !important;
}
.dark .fi-wi-stats-overview-stat-description {
    color: rgb(107 114 128) !important;
}

/* Page header bolder */
.fi-page-header-heading,
.fi-section-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Tabular numbers — padrão financeiro/bancário */
.fi-ta-table td,
.fi-wi-stats-overview-stat-value,
[class*="tabular"],
.tnum {
    font-variant-numeric: tabular-nums;
}

/* Animação suave em cards hover */
.fi-wi-stats-overview-stat {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.10);
}
.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.4);
}

/* Login page bonito */
.fi-simple-page {
    background: linear-gradient(135deg, rgb(245 243 255) 0%, rgb(238 242 255) 100%);
}
.dark .fi-simple-page {
    background: linear-gradient(135deg, rgb(15 23 42) 0%, rgb(30 41 59) 100%);
}

/* Botões primários com sombra colorida */
.fi-btn-color-primary {
    box-shadow: 0 4px 12px -2px rgb(124 58 237 / 0.25);
}
.fi-btn-color-primary:hover {
    box-shadow: 0 8px 16px -4px rgb(124 58 237 / 0.35);
}

/* Inputs com focus violeta */
.fi-input:focus,
.fi-select:focus {
    box-shadow: 0 0 0 3px rgb(124 58 237 / 0.15);
    border-color: rgb(124 58 237);
}

/* Code blocks legíveis no dark */
.dark code {
    background: rgb(31 41 55) !important;
    color: rgb(196 181 253) !important;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ============================================================
   MOBILE — sidebar como drawer overlay (não cobre conteúdo)
   ============================================================ */
@media (max-width: 1023px) {
    /* Sidebar começa fechada e desliza por cima — não empurra o conteúdo */
    .fi-sidebar.fi-main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 50 !important;
        width: 280px !important;
        max-width: 85vw !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease-out !important;
        box-shadow: 0 8px 32px rgba(0,0,0,.35);
    }
    .fi-sidebar.fi-main-sidebar.fi-sidebar-open {
        transform: translateX(0) !important;
    }
    /* Conteúdo principal usa largura total — não fica com margem do sidebar */
    .fi-main-ctn,
    .fi-topbar,
    main.fi-main,
    .fi-main {
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    /* Backdrop quando sidebar está aberto */
    .fi-sidebar.fi-main-sidebar.fi-sidebar-open::after {
        content: '';
        position: fixed;
        top: 0; left: 280px; right: -100vw; bottom: 0;
        background: rgba(0,0,0,.55);
        z-index: -1;
        backdrop-filter: blur(2px);
    }
    /* Botão hambúrguer SEMPRE visível no topo */
    .fi-topbar .fi-sidebar-open-btn,
    .fi-topbar [aria-label*="menu" i],
    .fi-topbar button[x-on\:click*="sidebar"] {
        display: inline-flex !important;
    }
    /* Reduzir padding interno de cards */
    .fi-section,
    .fi-wi-stats-overview-stat,
    .fi-modal-content {
        padding: 12px !important;
    }
    /* Tabelas com scroll horizontal */
    .fi-ta-content,
    .fi-ta-table-ctn {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Topbar mais alto pra dedo */
    .fi-topbar {
        min-height: 56px !important;
    }
    /* Botão Instalar app menor no mobile */
    #oh-pwa-install {
        bottom: 12px;
        right: 12px;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ============================================================
   PWA — botão flutuante "Instalar app"
   ============================================================ */
#oh-pwa-install {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 60;
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(124,58,237,.4);
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
}
#oh-pwa-install:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(124,58,237,.5);
}
#oh-pwa-install.show {
    display: inline-flex;
}
#oh-pwa-install svg {
    width: 18px; height: 18px;
}
/* iOS install hint (Safari não dispara beforeinstallprompt) */
#oh-pwa-ios-hint {
    position: fixed;
    bottom: 18px; left: 12px; right: 12px;
    z-index: 60;
    background: rgba(17,24,39,.96);
    color: #fff;
    border: 1px solid rgba(139,92,246,.4);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    display: none;
}
#oh-pwa-ios-hint.show { display: block; }
#oh-pwa-ios-hint .close {
    position: absolute; top: 8px; right: 10px;
    background: transparent; border: 0; color: #9ca3af; font-size: 18px; cursor: pointer;
}