/* ═══════════════════════════════════════════════════════════
   TAB BAR CSS — FlowManager
   Mobile bottom tab bar, FAB button, action sheets (Mais + Ações Rápidas)
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   BOTTOM TAB BAR
   ════════════════════════════════════════════════════════════ */

.mobile-bottom-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 0.25rem 0.5rem calc(0.3rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(28px) saturate(2);
    -webkit-backdrop-filter: blur(28px) saturate(2);
    border-top: 1px solid rgba(148,163,184,0.14);
    box-shadow: 0 -8px 32px rgba(15,23,42,0.09), 0 -1px 0 rgba(148,163,184,0.12);
}
.dark .mobile-bottom-tabbar {
    background: rgba(6,9,20,0.96);
    border-top-color: rgba(51,65,85,0.4);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.45), 0 -1px 0 rgba(51,65,85,0.3);
}

/* ─── Tab Item Base ─── */
.mobile-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    padding: 0.28rem 0.15rem;
    min-height: 3rem;
    border-radius: 0.75rem;
    color: #64748b;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1;
    transition: color 0.2s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.dark .mobile-tab-item { color: #94a3b8; }

.mobile-tab-item .tab-icon {
    width: 1.7rem; height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Active State ─── */
.mobile-tab-item.is-active { color: #4f46e5; }
.dark .mobile-tab-item.is-active { color: #818cf8; }

.mobile-tab-item.is-active .tab-icon {
    background: linear-gradient(135deg, rgba(79,70,229,.15), rgba(139,92,246,.22));
    transform: translateY(-4px) scale(1.13);
    box-shadow: 0 6px 18px rgba(99,102,241,.3), 0 0 0 1.5px rgba(99,102,241,.18);
}
.dark .mobile-tab-item.is-active .tab-icon {
    background: linear-gradient(135deg, rgba(79,70,229,.35), rgba(109,40,217,.4));
    box-shadow: 0 6px 18px rgba(99,102,241,.45), 0 0 0 1.5px rgba(129,140,248,.25);
}

/* Active indicator dot */
.mobile-tab-item.is-active::after {
    content: '';
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.32rem; height: 0.32rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 0 6px rgba(99,102,241,.7);
}

/* ─── FAB Center Button ─── */
.mobile-tab-fab { gap: 0.1rem !important; padding: 0.12rem 0.15rem 0.26rem !important; }

.mobile-tab-fab .fab-circle {
    width: 6rem; height: 6rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-14px) scale(1);
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
    overflow: visible;
}
.mobile-tab-fab:active .fab-circle,
.mobile-tab-fab:focus-visible .fab-circle {
    transform: translateY(-10px) scale(0.92);
}

/* ─── Notification Badge ─── */
.mobile-tab-badge {
    position: absolute;
    top: 0.08rem;
    right: calc(50% - 0.95rem);
    min-width: 1.05rem; height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 0 0 2px white;
    animation: mobile-badge-pulse 1.8s infinite;
    pointer-events: none;
}
.dark .mobile-tab-badge { box-shadow: 0 0 0 2px rgba(8,12,26,.95); }

@keyframes mobile-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
}

/* ─── iPad-only Tab ─── */
.tab-ipad-only { display: none !important; }

/* ─── iPad portrait (768-1024px): TabBar SEMPRE ativa, sem escolha ─── */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-bottom-tabbar {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        padding: 0 0.5rem env(safe-area-inset-bottom);
        overflow: visible !important;
        max-width: none;
        left: 0; right: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        align-items: stretch;
    }
    .tab-ipad-only { display: flex !important; }
    .mobile-tab-item {
        height: 3.8rem;       /* height fixo — não infla o grid */
        min-height: unset;
        font-size: 0.65rem;
        gap: 0.14rem;
        padding: 0.3rem 0.1rem;
    }
    .mobile-tab-item .tab-icon { width: 1.8rem; height: 1.8rem; border-radius: 0.55rem; }

    /* FAB: height igual aos demais, overflow visible, translateY sobe o círculo */
    .mobile-tab-fab {
        height: 3.8rem !important;
        overflow: visible !important;
        padding: 0 !important;
        position: relative !important;
    }
    .mobile-tab-fab .fab-circle {
        width: 4.8rem !important;
        height: 4.8rem !important;
        transform: translateY(-22px) scale(1) !important;
        transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
        position: static !important;
    }
    .mobile-tab-fab .fab-circle img {
        width: 4.8rem !important;
        height: 4.8rem !important;
    }
    .mobile-tab-fab:active .fab-circle,
    .mobile-tab-fab:focus-visible .fab-circle {
        transform: translateY(-18px) scale(0.92) !important;
    }

    /* ── FAB Sheet: layout moderno no iPad — grid uniforme 4 colunas ── */
    .mobile-sheet-panel {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
        max-height: 80dvh;
    }

    /* Header do FAB sheet mais compacto */
    .fab-sheet-header {
        margin-bottom: 0.65rem;
    }
    .fab-sheet-header-icon {
        width: 2.2rem !important;
        height: 2.2rem !important;
        border-radius: 0.65rem !important;
    }
    .fab-sheet-title { font-size: 0.92rem !important; }
    .fab-sheet-subtitle { font-size: 0.6rem !important; }

    /* Seção chips: linha horizontal scrollável com visual pill moderno */
    .fab-section-chip {
        font-size: 0.55rem !important;
        padding: 0.18rem 0.55rem 0.18rem 0.38rem !important;
        margin: 0.5rem 0 0.3rem !important;
    }

    /* Grid uniforme de 4 colunas em TUDO no FAB sheet */
    .fab-compact-pair-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.55rem !important;
    }
    .mobile-sheet-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }
    /* Override inline style repeat(2,1fr) */
    .mobile-sheet-grid[style*="repeat(2"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Cards de ação: compactos, proporcionais para 4 colunas */
    .fab-action-card {
        padding: 0.7rem 0.3rem 0.6rem !important;
        gap: 0.3rem !important;
        border-radius: 0.85rem !important;
    }
    .fab-action-card .action-icon {
        width: 2.4rem !important;
        height: 2.4rem !important;
        border-radius: 0.65rem !important;
    }
    .fab-card-name { font-size: 0.64rem !important; line-height: 1.2 !important; }
    .fab-card-chip { font-size: 0.42rem !important; padding: 0.08rem 0.32rem !important; }

    /* mobile-sheet-action (grid não-pair) */
    .mobile-sheet-action {
        padding: 0.7rem 0.3rem !important;
        font-size: 0.62rem !important;
        border-radius: 0.85rem !important;
        gap: 0.3rem !important;
    }
    .mobile-sheet-action .action-icon {
        width: 2.4rem !important;
        height: 2.4rem !important;
        border-radius: 0.65rem !important;
    }
    .mobile-sheet-action span { line-height: 1.2 !important; }

    /* More sheet: grid 5 colunas */
    .more-sheet-app-grid { grid-template-columns: repeat(5, 1fr) !important; }
    .more-ml-grid.more-sheet-app-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ─── iPad landscape (1024-1366): TabBar SEMPRE ativa (igual portrait) ─── */
/* pointer: coarse distingue iPads (touch) de notebooks (pointer: fine) no mesmo range */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    .mobile-bottom-tabbar {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        padding: 0 1.5rem env(safe-area-inset-bottom);
        overflow: visible !important;
        max-width: none;
        left: 0; right: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        align-items: stretch;
    }
    .tab-ipad-only { display: flex !important; }
    .mobile-tab-item {
        height: 3.8rem;
        min-height: unset;
        font-size: 0.65rem;
        gap: 0.14rem;
        padding: 0.3rem 0.1rem;
    }
    .mobile-tab-item .tab-icon { width: 1.8rem; height: 1.8rem; border-radius: 0.55rem; }
    /* FAB — landscape */
    .mobile-tab-fab {
        height: 3.8rem !important;
        overflow: visible !important;
        padding: 0 !important;
        position: relative !important;
    }
    .mobile-tab-fab .fab-circle {
        width: 4.8rem !important;
        height: 4.8rem !important;
        transform: translateY(-22px) scale(1) !important;
        transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
        position: static !important;
    }
    .mobile-tab-fab .fab-circle img {
        width: 4.8rem !important;
        height: 4.8rem !important;
    }
    .mobile-tab-fab:active .fab-circle,
    .mobile-tab-fab:focus-visible .fab-circle {
        transform: translateY(-18px) scale(0.92) !important;
    }
    /* FAB sheet expandido em landscape */
    .mobile-sheet-panel {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        max-height: 75dvh;
    }
    .fab-compact-pair-grid { grid-template-columns: repeat(5, 1fr) !important; }
    .mobile-sheet-grid { grid-template-columns: repeat(5, 1fr) !important; }
    .more-sheet-app-grid { grid-template-columns: repeat(6, 1fr) !important; }
}

/* ─── Desktop (>1366px): sidebar OU tabbar — nunca as duas ─── */
/* Usa 1367px para excluir iPad Pro 12.9" landscape (1366px) — tratado pelo bloco landscape acima */
@media (min-width: 1367px) {
    body.tablet-nav-sidebar .mobile-bottom-tabbar {
        display: none !important;
    }
    body.tablet-nav-sidebar .mobile-action-sheet {
        display: none !important;
    }
    body.tablet-nav-tabbar .mobile-bottom-tabbar {
        display: grid !important;
    }
    /* Default sem classe = sidebar */
    body:not(.tablet-nav-tabbar):not(.tablet-nav-sidebar) .mobile-bottom-tabbar {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   ACTION SHEETS (shared base)
   ════════════════════════════════════════════════════════════ */

.mobile-action-sheet {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 80;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.35s;
    /* IMPORTANTE: sem transform — transform em position:fixed quebra descendentes no iOS Safari */
}
.mobile-action-sheet.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.25s ease;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.mobile-action-sheet.is-open .mobile-sheet-backdrop { opacity: 1; }

.mobile-sheet-panel {
    /* position: fixed ancorado diretamente ao viewport — evita bug iOS Safari
       onde position:absolute dentro de fixed calcula bottom errado */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 81; /* acima do backdrop (z-index:80) */
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-radius: 1.75rem 1.75rem 0 0;
    padding: 0.4rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 -12px 60px rgba(15,23,42,.2), 0 -1px 0 rgba(148,163,184,.12);
    max-height: 88dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.dark .mobile-sheet-panel {
    background: rgba(8,14,36,0.97);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-top: 1px solid rgba(51,65,85,.3);
    box-shadow: 0 -12px 60px rgba(0,0,0,.55), 0 -1px 0 rgba(51,65,85,.25);
}
.mobile-action-sheet.is-open .mobile-sheet-panel {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.mobile-sheet-handle {
    width: 2.8rem; height: 0.26rem;
    border-radius: 9999px;
    background: rgba(148,163,184,.35);
    margin: 0.35rem auto 0.9rem;
}
.dark .mobile-sheet-handle { background: rgba(51,65,85,.7); }

.mobile-sheet-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
}
.dark .mobile-sheet-title { color: #f1f5f9; }

/* ─── Section Labels ─── */
.mobile-sheet-section-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0 0.3rem;
    margin: 0.75rem 0 0.3rem;
}
.mobile-sheet-section-label:first-of-type { margin-top: 0.1rem; }
.dark .mobile-sheet-section-label { color: #475569; }

/* Divider */
.mobile-sheet-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}
.dark .mobile-sheet-divider { background: #1e293b; }


/* ═══════════════════════════════════════════════════════════
   FAB SHEET — Ações Rápidas (grid layout)
   ════════════════════════════════════════════════════════════ */

.mobile-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-bottom: 0.2rem;
}
.mobile-sheet-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mobile-sheet-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 0.4rem;
    border-radius: 1.2rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}
.dark .mobile-sheet-action {
    background: rgba(30,41,59,.85);
    border-color: rgba(51,65,85,.5);
    color: #f1f5f9;
}
.mobile-sheet-action:active { transform: scale(0.91); }
.mobile-sheet-action:hover { transform: scale(1.03); border-color: rgba(99,102,241,.3); box-shadow: 0 4px 14px rgba(0,0,0,.1); }

.action-icon {
    width: 2.9rem; height: 2.9rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    flex-shrink: 0;
    position: relative;
}

/* ─── FAB Sheet Header ─── */
.fab-sheet-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

/* ─── Sheet Close Button ─── */
.fab-sheet-close-btn {
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    background: rgba(148,163,184,.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
}
.dark .fab-sheet-close-btn {
    background: rgba(51,65,85,.5);
    color: #94a3b8;
}
.fab-sheet-close-btn:hover,
.fab-sheet-close-btn:active {
    background: rgba(239,68,68,.14);
    color: #ef4444;
    transform: scale(1.08);
}
/* Posicionado absolutamente no more-sheet */
.fab-sheet-close-absolute {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    z-index: 2;
}

/* Mobile (<768px): reduz max-height para deixar backdrop tapável */
@media (max-width: 767px) {
    .mobile-sheet-panel {
        max-height: 76dvh;
    }
}
.fab-sheet-header-icon {
    width: 2.6rem; height: 2.6rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 55%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 5px 16px rgba(99,102,241,.38);
    flex-shrink: 0;
}
.fab-sheet-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}
.dark .fab-sheet-title { color: #f1f5f9; }
.fab-sheet-subtitle {
    font-size: 0.67rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 0.06rem;
}
.dark .fab-sheet-subtitle { color: #475569; }

/* ─── FAB Section Chips ─── */
.fab-section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem 0.22rem 0.42rem;
    border-radius: 9999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 0.75rem 0 0.38rem;
    border: 1px solid transparent;
}
.fab-section-chip svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

.fab-chip-emerald { background: rgba(16,185,129,.11); color: #059669; border-color: rgba(16,185,129,.2); }
.fab-chip-violet  { background: rgba(139,92,246,.11);  color: #7c3aed; border-color: rgba(139,92,246,.2); }
.fab-chip-amber   { background: rgba(245,158,11,.11);  color: #d97706; border-color: rgba(245,158,11,.2); }
.fab-chip-pink    { background: rgba(236,72,153,.11);  color: #db2777; border-color: rgba(236,72,153,.2); }
.fab-chip-cyan    { background: rgba(6,182,212,.11);   color: #0891b2; border-color: rgba(6,182,212,.2); }
.fab-chip-blue    { background: rgba(59,130,246,.11);  color: #1d4ed8; border-color: rgba(59,130,246,.2); }
.fab-chip-indigo  { background: rgba(99,102,241,.11);  color: #4f46e5; border-color: rgba(99,102,241,.2); }
.fab-chip-teal    { background: rgba(20,184,166,.11);  color: #0d9488; border-color: rgba(20,184,166,.2); }
.fab-chip-lime    { background: rgba(132,204,22,.11);  color: #65a30d; border-color: rgba(132,204,22,.2); }
.fab-chip-gold    { background: rgba(234,179,8,.11);   color: #a16207; border-color: rgba(234,179,8,.2); }

.dark .fab-chip-emerald { background: rgba(16,185,129,.15);  color: #34d399; border-color: rgba(16,185,129,.25); }
.dark .fab-chip-violet  { background: rgba(139,92,246,.15);  color: #a78bfa; border-color: rgba(139,92,246,.25); }
.dark .fab-chip-amber   { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(245,158,11,.25); }
.dark .fab-chip-pink    { background: rgba(236,72,153,.15);  color: #f472b6; border-color: rgba(236,72,153,.25); }
.dark .fab-chip-cyan    { background: rgba(6,182,212,.15);   color: #22d3ee; border-color: rgba(6,182,212,.25); }
.dark .fab-chip-blue    { background: rgba(59,130,246,.15);  color: #60a5fa; border-color: rgba(59,130,246,.25); }
.dark .fab-chip-indigo  { background: rgba(99,102,241,.15);  color: #818cf8; border-color: rgba(99,102,241,.25); }
.dark .fab-chip-teal    { background: rgba(20,184,166,.15);  color: #2dd4bf; border-color: rgba(20,184,166,.25); }
.dark .fab-chip-lime    { background: rgba(132,204,22,.15);  color: #a3e635; border-color: rgba(132,204,22,.25); }
.dark .fab-chip-gold    { background: rgba(234,179,8,.15);   color: #facc15; border-color: rgba(234,179,8,.25); }

/* ─── Wide action card (horizontal layout) ─── */
.fab-action-wide {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 0.72rem 0.9rem !important;
    gap: 0.75rem !important;
    text-align: left !important;
}
.fab-action-wide .action-icon {
    width: 2.5rem !important; height: 2.5rem !important;
    border-radius: 0.7rem !important;
    flex-shrink: 0;
}
.fab-action-wide .fab-action-text {
    flex: 1;
    min-width: 0;
}
.fab-action-wide .fab-action-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.dark .fab-action-wide .fab-action-name { color: #f1f5f9; }
.fab-action-wide .fab-action-tag {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-top: 0.06rem;
}
.dark .fab-action-wide .fab-action-tag { color: #475569; }
.fab-action-wide .fab-action-arrow {
    width: 1.3rem; height: 1.3rem;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.dark .fab-action-wide .fab-action-arrow { background: #1e293b; color: #475569; }
.fab-action-wide:active .fab-action-arrow,
.fab-action-wide:hover .fab-action-arrow { background: #e0e7ff; color: #4f46e5; }

/* ─── Upload badge overlay on action icon ─── */
.fab-upload-badge {
    position: absolute;
    bottom: -0.22rem;
    right: -0.22rem;
    width: 1.05rem; height: 1.05rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    pointer-events: none;
}
.dark .fab-upload-badge { background: #1e293b; border-color: #334155; }
.fab-upload-badge svg { width: 0.5rem; height: 0.5rem; color: #475569; }
.dark .fab-upload-badge svg { color: #64748b; }

/* ─── ML special card ─── */
.fab-ml-card {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(251,191,36,.11)) !important;
    border-color: rgba(245,158,11,.28) !important;
}
.dark .fab-ml-card {
    background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(251,191,36,.18)) !important;
    border-color: rgba(245,158,11,.35) !important;
}


/* ─── FAB Compact Pair Grid ─── */
.fab-compact-pair-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.fab-action-card {
    padding: 0.95rem 0.5rem 0.82rem !important;
    gap: 0.42rem !important;
}

.fab-card-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    text-align: center;
}
.dark .fab-card-name { color: #f1f5f9; }

.fab-card-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.42rem;
    border-radius: 9999px;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1.6;
    /* uses fab-chip-* color classes */
}


/* ═══════════════════════════════════════════════════════════
   MORE SHEET — App Grid (icon cards)
   ════════════════════════════════════════════════════════════ */

.more-sheet-app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.more-app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 0.4rem 0.8rem;
    border-radius: 1.1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.16s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.dark .more-app-card {
    background: #1e293b;
    border-color: rgba(51,65,85,.55);
    color: #e2e8f0;
}
.more-app-card.is-active {
    background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(99,102,241,.14));
    border-color: rgba(99,102,241,.3);
    color: #4f46e5;
}
.dark .more-app-card.is-active {
    background: linear-gradient(135deg, rgba(30,64,175,.25), rgba(79,70,229,.3));
    border-color: rgba(99,102,241,.4);
    color: #818cf8;
}
.more-app-card:active { transform: scale(0.91); opacity: 0.9; }
.more-app-card:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,.1); border-color: rgba(99,102,241,.25); }

.more-app-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
    flex-shrink: 0;
}

.more-app-label {
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.more-app-badge {
    position: absolute;
    top: 0.32rem;
    right: 0.32rem;
    min-width: 1.15rem; height: 1.15rem;
    padding: 0 0.22rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: white;
    font-size: 0.52rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ML app grid tint */
.more-ml-grid .more-app-card {
    background: linear-gradient(135deg, rgba(245,158,11,.07), rgba(251,191,36,.1));
    border-color: rgba(245,158,11,.22);
}
.dark .more-ml-grid .more-app-card {
    background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(251,191,36,.16));
    border-color: rgba(245,158,11,.3);
}

/* Legacy list (kept for fallback) */
.mobile-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mobile-sheet-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.72rem 0.6rem;
    border-radius: 0.85rem;
    text-decoration: none;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: left;
}
.dark .mobile-sheet-nav-item { color: #e2e8f0; }
.mobile-sheet-nav-item:active,
.mobile-sheet-nav-item:hover { background: #f1f5f9; }
.dark .mobile-sheet-nav-item:active,
.dark .mobile-sheet-nav-item:hover { background: #1e293b; }

.mobile-sheet-nav-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.mobile-sheet-nav-label { flex: 1; }

.mobile-sheet-badge {
    min-width: 1.35rem; height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: white;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    flex-shrink: 0;
}

/* Chevron */
.sheet-chevron {
    width: 1rem; height: 1rem;
    color: #cbd5e1;
    flex-shrink: 0;
}
.dark .sheet-chevron { color: #334155; }

/* ─── More Sheet: User Profile Card ─── */
.more-sheet-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem;
    margin-bottom: 0.65rem;
    border-radius: 1.35rem;
    background: radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 42%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,245,249,.95));
    border: 1px solid rgba(148,163,184,.22);
    box-shadow: 0 18px 34px -24px rgba(15,23,42,.35);
}
.dark .more-sheet-profile {
    background: radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 42%), linear-gradient(135deg, rgba(30,41,59,.98), rgba(15,23,42,.97));
    border-color: rgba(71,85,105,.5);
    box-shadow: 0 20px 36px -26px rgba(0,0,0,.5);
}

.more-sheet-avatar {
    width: 3.15rem; height: 3.15rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    font-size: 1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(99,102,241,.32);
    letter-spacing: 0.02em;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
}

.more-sheet-avatar.has-photo {
    background: linear-gradient(135deg, #1d4ed8, #4f46e5);
}

.more-sheet-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more-sheet-user-info { flex: 1; min-width: 0; }

.more-sheet-user-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.dark .more-sheet-user-name { color: #f1f5f9; }

.more-sheet-user-email {
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    margin-top: 0.05rem;
}
.dark .more-sheet-user-email { color: #94a3b8; }

.more-sheet-user-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    flex-wrap: wrap;
}

.more-sheet-user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.52rem;
    border-radius: 9999px;
    background: rgba(255,255,255,.72);
    color: #64748b;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
}

.more-sheet-user-chip.is-admin {
    background: rgba(236,72,153,.12);
    color: #db2777;
}

.dark .more-sheet-user-chip {
    background: rgba(15,23,42,.62);
    color: #cbd5e1;
}

.dark .more-sheet-user-chip.is-admin {
    background: rgba(236,72,153,.18);
    color: #f9a8d4;
}

.more-sheet-settings-btn {
    width: 2.35rem; height: 2.35rem;
    border-radius: 0.85rem;
    background: rgba(255,255,255,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    border: 1px solid rgba(148,163,184,.2);
    cursor: pointer;
    box-shadow: 0 10px 24px -18px rgba(15,23,42,.32);
}
.more-sheet-settings-btn:hover,
.more-sheet-settings-btn:active {
    background: rgba(99,102,241,.18);
    color: #6366f1;
    transform: translateY(-1px);
}
.dark .more-sheet-settings-btn {
    color: #94a3b8;
    background: rgba(15,23,42,.62);
    border-color: rgba(71,85,105,.48);
}
.dark .more-sheet-settings-btn:hover,
.dark .more-sheet-settings-btn:active {
    background: rgba(99,102,241,.25);
    color: #a5b4fc;
}

.more-sheet-account-panel {
    margin-bottom: 0.75rem;
    padding: 0.9rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(148,163,184,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
    box-shadow: 0 18px 34px -28px rgba(15,23,42,.28);
}

.dark .more-sheet-account-panel {
    border-color: rgba(71,85,105,.45);
    background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.95));
}

.more-sheet-account-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.more-sheet-account-heading span:first-child {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
}

.dark .more-sheet-account-heading span:first-child { color: #f8fafc; }

.more-sheet-account-caption {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.more-sheet-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.more-sheet-account-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.78rem;
    border-radius: 1rem;
    text-decoration: none;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(248,250,252,.92);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.more-sheet-account-link:hover,
.more-sheet-account-link:active {
    transform: translateY(-1px);
    border-color: rgba(99,102,241,.22);
    background: rgba(241,245,249,.98);
}

.dark .more-sheet-account-link {
    border-color: rgba(71,85,105,.38);
    background: rgba(15,23,42,.55);
}

.dark .more-sheet-account-link:hover,
.dark .more-sheet-account-link:active {
    background: rgba(30,41,59,.78);
    border-color: rgba(129,140,248,.26);
}

.more-sheet-account-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 12px 24px -18px rgba(15,23,42,.42);
}

.more-sheet-account-icon.is-slate { background: linear-gradient(135deg, #64748b, #475569); }
.more-sheet-account-icon.is-sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.more-sheet-account-icon.is-pink { background: linear-gradient(135deg, #ec4899, #db2777); }
.more-sheet-account-icon.is-violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.more-sheet-account-icon.is-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }

.more-sheet-account-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.more-sheet-account-copy strong {
    font-size: 0.76rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .more-sheet-account-copy strong { color: #f8fafc; }

.more-sheet-account-copy small {
    font-size: 0.63rem;
    line-height: 1.35;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .more-sheet-account-copy small { color: #94a3b8; }

@media (max-width: 420px) {
    .more-sheet-account-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── More Sheet: Logout Button ─── */
.more-sheet-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.72rem 0.6rem;
    border-radius: 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #ef4444;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
}
.more-sheet-logout-btn:hover,
.more-sheet-logout-btn:active { background: rgba(239,68,68,.07); }
.dark .more-sheet-logout-btn { color: #f87171; }
.dark .more-sheet-logout-btn:hover,
.dark .more-sheet-logout-btn:active { background: rgba(239,68,68,.12); }

/* ─── ML Brand Section ─── */
.more-sheet-ml-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d97706;
    padding: 0 0.3rem;
    margin: 0.75rem 0 0.3rem;
}
.dark .more-sheet-ml-label { color: #f59e0b; }


/* ═══════════════════════════════════════════════════════════
   TABBAR MODERNIZATION — Cores do App (indigo / purple / pink)
   ════════════════════════════════════════════════════════════ */

/* ── Linha de acento gradient no topo da tabbar ── */
.mobile-bottom-tabbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        #6366f1 0%,
        #8b5cf6 35%,
        #a855f7 65%,
        #ec4899 100%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.82;
}
.dark .mobile-bottom-tabbar::before { opacity: 0.55; }

/* ── FAB: apenas o SVG, sem fundo nem borda ── */
.mobile-tab-fab .fab-circle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Active tab icon: glow mais intenso com app colors ── */
.mobile-tab-item.is-active .tab-icon {
    background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.32)) !important;
    box-shadow:
        0 5px 20px rgba(99,102,241,.42),
        0 0 0 1.5px rgba(99,102,241,.28),
        0 0 14px rgba(139,92,246,.2) !important;
    transform: translateY(-4px) scale(1.15) !important;
}
.dark .mobile-tab-item.is-active .tab-icon {
    background: linear-gradient(135deg, rgba(79,70,229,.46), rgba(109,40,217,.52)) !important;
    box-shadow:
        0 8px 24px rgba(99,102,241,.58),
        0 0 0 1.5px rgba(129,140,248,.32) !important;
}

/* ── Active indicator dot: ligeiramente maior e mais vibrante ── */
.mobile-tab-item.is-active::after {
    width: 0.38rem !important;
    height: 0.38rem !important;
    box-shadow: 0 0 8px rgba(99,102,241,.9), 0 0 18px rgba(139,92,246,.45) !important;
}

/* ── Action sheets: linha de acento no topo ── */
.mobile-sheet-panel {
    overflow-x: hidden;
}
.mobile-sheet-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        #6366f1 0%,
        #8b5cf6 40%,
        #a855f7 70%,
        #ec4899 100%
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0.78;
}
.dark .mobile-sheet-panel::after { opacity: 0.5; }

/* ── FAB sheet: linha de acento emerald → indigo ── */
.fab-sheet {
    /* NOTA: position NÃO declarado aqui — herda position:fixed do .mobile-sheet-panel base.
       Declarar position:relative aqui QUEBRARIA o ancoramento ao bottom do viewport,
       pois ambas as classes têm especificidade 0-1-0 e a última declarada vence. */
    overflow-x: hidden; /* apenas eixo X — preserva overflow-y:auto (scroll) do .mobile-sheet-panel */
}
.fab-sheet::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        #10b981 0%,
        #3b82f6 40%,
        #6366f1 70%,
        #8b5cf6 100%
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0.72;
}
.dark .fab-sheet::after { opacity: 0.5; }

/* ── iPad: tabbar com cantos arredondados no topo ── */
@media (min-width: 768px) and (max-width: 1280px) {
    .mobile-bottom-tabbar {
        border-radius: 1.5rem 1.5rem 0 0;
        border-left: 1px solid rgba(99,102,241,.12) !important;
        border-right: 1px solid rgba(99,102,241,.12) !important;
    }
    .mobile-bottom-tabbar::before {
        border-radius: 1.5rem 1.5rem 0 0;
    }
    .mobile-tab-fab .fab-circle {
        width: 6.8rem !important;
        height: 6.8rem !important;
        transform: translateY(-18px) scale(1) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   FAB LABEL — Label "Criar" abaixo do botão FAB central
   ════════════════════════════════════════════════════════════ */

.fab-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #4f46e5;
    letter-spacing: 0.015em;
    line-height: 1;
    margin-top: 0.02rem;
    transition: color 0.2s ease;
}
.dark .fab-label { color: #818cf8; }

/* FAB aberto (sheet visível) → X vermelho rotacionado */
.mobile-tab-fab.fab-sheet-open .fab-circle {
    background: linear-gradient(145deg, #dc2626 0%, #ef4444 45%, #f97316 100%) !important;
    transform: translateY(-5px) rotate(45deg) !important;
    box-shadow:
        0 6px 24px rgba(239,68,68,.6),
        0 0 0 3px rgba(239,68,68,.22),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
    transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.mobile-tab-fab.fab-sheet-open .fab-label { color: #ef4444; }
.dark .mobile-tab-fab.fab-sheet-open .fab-label { color: #fca5a5; }


/* ═══════════════════════════════════════════════════════════
   FAB AREA CARDS — Quick Actions redesign (cards por área)
   ════════════════════════════════════════════════════════════ */

/* ─── Grid pai: 2 colunas no mobile ─── */
.fab-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin-top: 0.3rem;
}

/* Card full-width (span 2 colunas) */
.fab-area-full { grid-column: 1 / -1; }

/* ─── Card base ─── */
.fab-area-card {
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1.5px solid rgba(148,163,184,.18);
    background: #f8fafc;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.dark .fab-area-card {
    background: rgba(15,23,42,.72);
    border-color: rgba(51,65,85,.42);
}
.fab-area-card:hover { box-shadow: 0 4px 18px rgba(99,102,241,.1); }

/* ─── Header do card ─── */
.fab-area-header {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.58rem 0.7rem;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    border-bottom: 1px solid rgba(0,0,0,.055);
}
.dark .fab-area-header { border-bottom-color: rgba(255,255,255,.07); }

.fab-area-icon-wrap {
    width: 1.52rem;
    height: 1.52rem;
    border-radius: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.fab-area-icon-wrap svg { width: 0.8rem; height: 0.8rem; }

/* ─── Body do card (grid de ações) ─── */
.fab-area-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    padding: 0.52rem 0.48rem 0.58rem;
}
.fab-area-body-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fab-area-body-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ─── Botão de ação dentro do card ─── */
.fab-area-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.26rem;
    padding: 0.55rem 0.18rem 0.52rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(148,163,184,.14);
    text-decoration: none;
    color: #1e293b;
    font-size: 0.58rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.16s cubic-bezier(0.34,1.56,0.64,1);
    -webkit-tap-highlight-color: transparent;
    line-height: 1.25;
    position: relative;
}
.dark .fab-area-action {
    background: rgba(30,41,59,.72);
    border-color: rgba(71,85,105,.35);
    color: #e2e8f0;
}
.fab-area-action:active { transform: scale(0.88) !important; }
.fab-area-action:hover {
    background: rgba(99,102,241,.07);
    border-color: rgba(99,102,241,.28);
    transform: scale(1.04);
    box-shadow: 0 3px 10px rgba(99,102,241,.14);
}

/* Upload — indicador sutil */
.fab-area-action-upload::after {
    content: '↑';
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    font-size: 0.4rem;
    font-weight: 900;
    color: #94a3b8;
    line-height: 1;
}
.dark .fab-area-action-upload::after { color: #475569; }

/* ML card especial */
.fab-area-ml-action {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(251,191,36,.11)) !important;
    border-color: rgba(245,158,11,.26) !important;
}
.dark .fab-area-ml-action {
    background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(251,191,36,.18)) !important;
    border-color: rgba(245,158,11,.34) !important;
}

/* Ícone da ação */
.fab-area-action-icon {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.52rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 3px 8px rgba(0,0,0,.16);
    flex-shrink: 0;
}
.fab-area-action-icon svg { width: 0.9rem; height: 0.9rem; }

/* ─── Temas de cor dos headers ─── */
.fab-acolor-emerald {
    background: linear-gradient(135deg, rgba(16,185,129,.11), rgba(5,150,105,.07));
    color: #064e3b;
}
.dark .fab-acolor-emerald {
    background: linear-gradient(135deg, rgba(16,185,129,.24), rgba(5,150,105,.16));
    color: #6ee7b7;
}
.fab-acolor-amber {
    background: linear-gradient(135deg, rgba(245,158,11,.11), rgba(217,119,6,.07));
    color: #78350f;
}
.dark .fab-acolor-amber {
    background: linear-gradient(135deg, rgba(245,158,11,.24), rgba(217,119,6,.16));
    color: #fcd34d;
}
.fab-acolor-cyan {
    background: linear-gradient(135deg, rgba(6,182,212,.11), rgba(8,145,178,.07));
    color: #164e63;
}
.dark .fab-acolor-cyan {
    background: linear-gradient(135deg, rgba(6,182,212,.24), rgba(8,145,178,.16));
    color: #67e8f9;
}
.fab-acolor-pink {
    background: linear-gradient(135deg, rgba(236,72,153,.11), rgba(219,39,119,.07));
    color: #831843;
}
.dark .fab-acolor-pink {
    background: linear-gradient(135deg, rgba(236,72,153,.24), rgba(219,39,119,.16));
    color: #f9a8d4;
}
.fab-acolor-indigo {
    background: linear-gradient(135deg, rgba(99,102,241,.11), rgba(79,70,229,.07));
    color: #312e81;
}
.dark .fab-acolor-indigo {
    background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(79,70,229,.16));
    color: #a5b4fc;
}
.fab-acolor-lime {
    background: linear-gradient(135deg, rgba(132,204,22,.11), rgba(101,163,13,.07));
    color: #365314;
}
.dark .fab-acolor-lime {
    background: linear-gradient(135deg, rgba(132,204,22,.24), rgba(101,163,13,.16));
    color: #bef264;
}
.fab-acolor-blue {
    background: linear-gradient(135deg, rgba(59,130,246,.11), rgba(29,78,216,.07));
    color: #1e3a8a;
}
.dark .fab-acolor-blue {
    background: linear-gradient(135deg, rgba(59,130,246,.24), rgba(29,78,216,.16));
    color: #93c5fd;
}

/* ─── Seção Faturas por Banco ─── */
.fab-area-banks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.38rem;
    padding: 0.52rem 0.48rem 0.58rem;
}

.fab-area-bank-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.42rem 0.6rem;
    background: rgba(255,255,255,.82);
    border-radius: 0.65rem;
    border: 1px solid rgba(148,163,184,.14);
    min-width: 0;
}
.dark .fab-area-bank-card {
    background: rgba(30,41,59,.65);
    border-color: rgba(71,85,105,.35);
}

.fab-area-bank-name {
    font-size: 0.62rem;
    font-weight: 600;
    color: #334155;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .fab-area-bank-name { color: #e2e8f0; }

.fab-area-bank-actions {
    display: flex;
    gap: 0.28rem;
    flex-shrink: 0;
}

.fab-bank-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.42rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.fab-bank-btn svg { width: 0.75rem; height: 0.75rem; }
.fab-bank-btn:active { transform: scale(0.82); opacity: 0.9; }

.fab-bank-btn-upload {
    background: rgba(59,130,246,.14) !important;
    color: #1d4ed8 !important;
    box-shadow: none !important;
    border: 1px solid rgba(59,130,246,.22);
}
.dark .fab-bank-btn-upload {
    background: rgba(59,130,246,.22) !important;
    color: #60a5fa !important;
    border-color: rgba(59,130,246,.32);
}

/* ─── Responsivo: iPad portrait → 3 colunas ─── */
@media (min-width: 768px) and (max-width: 1024px) {
    .fab-areas-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .fab-area-full { grid-column: 1 / -1 !important; }
    .fab-area-banks-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .fab-area-header { padding: 0.52rem 0.62rem; font-size: 0.64rem; }
    .fab-area-body { padding: 0.48rem 0.42rem 0.52rem; gap: 0.38rem; }
    .fab-area-action-icon { width: 1.75rem; height: 1.75rem; }
}

/* ─── Responsivo: iPad landscape → 4 colunas ─── */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .fab-areas-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .fab-area-full { grid-column: 1 / -1 !important; }
    .fab-area-banks-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   TABBAR FINAL POLISH
   Consolida o visual premium do rodapé mobile e dos sheets.
   ════════════════════════════════════════════════════════════ */

.mobile-bottom-tabbar {
    gap: 0.2rem;
    padding: 0.42rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,251,.94));
    border-top-color: rgba(99,102,241,.12);
    box-shadow: 0 -16px 48px rgba(15,23,42,.10), 0 -1px 0 rgba(148,163,184,.12);
}

.dark .mobile-bottom-tabbar {
    background: linear-gradient(180deg, rgba(10,14,30,.98), rgba(7,10,20,.96));
    border-top-color: rgba(71,85,105,.5);
    box-shadow: 0 -18px 52px rgba(0,0,0,.5), 0 -1px 0 rgba(71,85,105,.35);
}

.mobile-bottom-tabbar::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 0%, rgba(59,130,246,.08), transparent 30%), radial-gradient(circle at 85% 0%, rgba(236,72,153,.06), transparent 28%);
    opacity: .95;
}

.mobile-tab-item {
    min-height: 3.28rem;
    gap: 0.22rem;
    border-radius: 1rem;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: color .18s ease, transform .18s cubic-bezier(0.34,1.56,0.64,1), background .18s ease;
}

.mobile-tab-item:hover,
.mobile-tab-item:active {
    background: rgba(255,255,255,.6);
}

.dark .mobile-tab-item:hover,
.dark .mobile-tab-item:active {
    background: rgba(30,41,59,.5);
}

.mobile-tab-item .tab-icon {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.82rem;
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(241,245,249,.72));
    border: 1px solid rgba(148,163,184,.14);
    box-shadow: 0 10px 20px -18px rgba(15,23,42,.35);
}

.dark .mobile-tab-item .tab-icon {
    background: linear-gradient(180deg, rgba(30,41,59,.84), rgba(15,23,42,.82));
    border-color: rgba(71,85,105,.4);
}

.mobile-tab-item span {
    position: relative;
    z-index: 1;
}

.mobile-tab-item.is-active {
    color: #4338ca;
}

.dark .mobile-tab-item.is-active {
    color: #a5b4fc;
}

.mobile-tab-item.is-active .tab-icon {
    background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.24)) !important;
    border-color: rgba(99,102,241,.26);
}

.mobile-tab-more.more-sheet-open {
    color: #7c3aed;
}

.mobile-tab-more.more-sheet-open .tab-icon {
    background: linear-gradient(135deg, rgba(167,139,250,.20), rgba(236,72,153,.18));
    border-color: rgba(167,139,250,.28);
    box-shadow: 0 10px 24px -16px rgba(139,92,246,.45);
}

.dark .mobile-tab-more.more-sheet-open {
    color: #c4b5fd;
}

.dark .mobile-tab-more.more-sheet-open .tab-icon {
    background: linear-gradient(135deg, rgba(109,40,217,.42), rgba(190,24,93,.28));
    border-color: rgba(167,139,250,.3);
}

.mobile-tab-fab {
    gap: 0.05rem !important;
}

.mobile-tab-fab .fab-circle {
    position: relative;
    width: 6.35rem;
    height: 6.35rem;
    transform: translateY(-16px) scale(1);
}

.mobile-tab-fab .fab-circle::before {
    content: '';
    position: absolute;
    inset: 0.68rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(99,102,241,.24), rgba(99,102,241,0) 72%);
    filter: blur(10px);
    z-index: 0;
}

.mobile-tab-fab .fab-circle img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 18px rgba(99,102,241,.22));
}

.fab-label {
    margin-top: -0.25rem;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-tab-fab.fab-sheet-open .fab-circle::before {
    background: radial-gradient(circle, rgba(239,68,68,.28), rgba(239,68,68,0) 72%);
}

.mobile-sheet-panel {
    border-radius: 2rem 2rem 0 0;
    padding: 0.55rem 1.05rem calc(1.45rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(244,247,251,.97));
    box-shadow: 0 -18px 60px rgba(15,23,42,.18), 0 -1px 0 rgba(148,163,184,.12);
}

.dark .mobile-sheet-panel {
    background: linear-gradient(180deg, rgba(10,14,30,.985), rgba(6,10,22,.975));
}

.mobile-sheet-handle {
    width: 3.2rem;
    height: 0.3rem;
    margin: 0.25rem auto 1rem;
    background: linear-gradient(90deg, rgba(148,163,184,.2), rgba(99,102,241,.42), rgba(148,163,184,.2));
}

.more-sheet-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.1rem 2.1rem 0.8rem 0;
    padding: 0.95rem 1rem;
    border-radius: 1.35rem;
    background: radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 38%), linear-gradient(135deg, rgba(248,250,252,.98), rgba(241,245,249,.96));
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 18px 34px -26px rgba(15,23,42,.28);
}

.dark .more-sheet-header {
    background: radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 38%), linear-gradient(135deg, rgba(30,41,59,.98), rgba(15,23,42,.96));
    border-color: rgba(71,85,105,.42);
}

.more-sheet-header-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 65%, #ec4899);
    box-shadow: 0 14px 26px -18px rgba(99,102,241,.6);
    flex-shrink: 0;
}

.more-sheet-title {
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.1;
    color: #0f172a;
}

.dark .more-sheet-title { color: #f8fafc; }

.more-sheet-subtitle {
    margin-top: 0.18rem;
    font-size: 0.68rem;
    line-height: 1.45;
    color: #64748b;
}

.dark .more-sheet-subtitle { color: #94a3b8; }

.mobile-sheet-section-label,
.more-sheet-ml-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.63rem;
    letter-spacing: 0.11em;
    margin: 0.95rem 0 0.42rem;
}

.mobile-sheet-section-label::after,
.more-sheet-ml-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(148,163,184,.28), transparent);
}

.dark .mobile-sheet-section-label::after,
.dark .more-sheet-ml-label::after {
    background: linear-gradient(90deg, rgba(71,85,105,.55), transparent);
}

.more-sheet-app-grid {
    gap: 0.62rem;
    margin-bottom: 0.25rem;
}

.more-app-card {
    gap: 0.5rem;
    padding: 0.92rem 0.46rem 0.84rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.95));
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 16px 28px -26px rgba(15,23,42,.24);
}

.dark .more-app-card {
    background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.90));
    border-color: rgba(71,85,105,.38);
    box-shadow: 0 18px 30px -26px rgba(0,0,0,.42);
}

.more-app-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 18px 30px -24px rgba(99,102,241,.24);
    border-color: rgba(99,102,241,.24);
}

.more-app-card:active {
    transform: scale(0.95);
}

.more-app-card.is-active {
    background: radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 45%), linear-gradient(180deg, rgba(255,255,255,.99), rgba(237,242,255,.98));
    border-color: rgba(99,102,241,.26);
    box-shadow: 0 20px 34px -24px rgba(99,102,241,.32);
}

.dark .more-app-card.is-active {
    background: radial-gradient(circle at top left, rgba(99,102,241,.22), transparent 45%), linear-gradient(180deg, rgba(30,41,59,.96), rgba(23,31,56,.96));
}

.more-app-icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.9rem;
    box-shadow: 0 16px 24px -18px rgba(15,23,42,.45);
}

.more-app-label {
    font-size: 0.66rem;
    font-weight: 800;
}

.fab-sheet-header,
.more-sheet-header {
    position: relative;
    z-index: 1;
}

.fab-sheet-header {
    margin-bottom: 1rem;
    padding: 0.1rem 2rem 0 0;
}

.fab-sheet-header-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.95rem;
    box-shadow: 0 16px 26px -18px rgba(99,102,241,.52);
}

.fab-sheet-title {
    font-size: 1.08rem;
}

.fab-sheet-subtitle {
    font-size: 0.69rem;
    line-height: 1.45;
}

.fab-sheet-close-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.8rem;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 10px 20px -18px rgba(15,23,42,.35);
}

.dark .fab-sheet-close-btn {
    background: rgba(15,23,42,.68);
    border-color: rgba(71,85,105,.42);
}

.fab-areas-grid {
    gap: 0.8rem;
}

.fab-area-card {
    border-radius: 1.35rem;
    border: 1px solid rgba(148,163,184,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    box-shadow: 0 22px 36px -30px rgba(15,23,42,.28);
}

.dark .fab-area-card {
    background: linear-gradient(180deg, rgba(30,41,59,.94), rgba(15,23,42,.92));
    border-color: rgba(71,85,105,.38);
}

.fab-area-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 38px -28px rgba(99,102,241,.24);
}

.fab-area-header {
    padding: 0.7rem 0.82rem;
    font-size: 0.69rem;
    border-bottom-color: rgba(148,163,184,.14);
}

.fab-area-icon-wrap {
    width: 1.72rem;
    height: 1.72rem;
    border-radius: 0.52rem;
}

.fab-area-body {
    gap: 0.48rem;
    padding: 0.62rem 0.58rem 0.66rem;
}

.fab-area-action {
    gap: 0.34rem;
    padding: 0.68rem 0.24rem 0.6rem;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 16px 26px -24px rgba(15,23,42,.18);
}

.dark .fab-area-action {
    background: linear-gradient(180deg, rgba(30,41,59,.8), rgba(15,23,42,.72));
}

.fab-area-action:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 18px 28px -22px rgba(99,102,241,.22);
}

.fab-area-action-icon {
    width: 2.08rem;
    height: 2.08rem;
    border-radius: 0.68rem;
    box-shadow: 0 16px 24px -20px rgba(15,23,42,.42);
}

.fab-area-banks-grid {
    gap: 0.48rem;
    padding: 0.65rem 0.58rem 0.66rem;
}

.fab-area-bank-card {
    padding: 0.52rem 0.68rem;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86));
    border-color: rgba(148,163,184,.15);
}

.dark .fab-area-bank-card {
    background: linear-gradient(180deg, rgba(30,41,59,.76), rgba(15,23,42,.72));
}

.fab-bank-btn {
    width: 1.88rem;
    height: 1.88rem;
    border-radius: 0.6rem;
}

@media (max-width: 420px) {
    .more-sheet-header {
        margin-right: 1.7rem;
        padding: 0.85rem 0.9rem;
    }

    .more-sheet-title {
        font-size: 0.9rem;
    }

    .more-sheet-subtitle {
        font-size: 0.64rem;
    }

    .more-sheet-app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fab-areas-grid {
        grid-template-columns: 1fr;
    }

    .fab-area-body-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .fab-area-full {
        grid-column: auto;
    }
}