/* ═══════════════════════════════════════════════════════════════════════ FlowDesck — Mobile CSS Breakpoints: ≤768px (tablet/phone), ≤480px (phone only) Estratégia: desktop-first → override em mobile ═══════════════════════════════════════════════════════════════════════ */ /* ── DETECÇÃO JS ─────────────────────────────────────────────────────── */ /* Adicionado via JS: ou */ /* ── SHARED TOPBAR ───────────────────────────────────────────────────── */ @media (max-width: 768px) { .topbar, .top-bar { padding: 0 12px !important; height: 50px !important; } .topbar-name, .top-name { display: none !important; } .sector-badge { font-size: 10px !important; padding: 2px 8px !important; } } /* ── MODAIS — BOTTOM SHEET ───────────────────────────────────────────── */ @media (max-width: 768px) { /* Modal genérico → bottom sheet */ .modal-overlay { align-items: flex-end !important; padding: 0 !important; } .modal-d, .modal, .modal-card { border-radius: 16px 16px 0 0 !important; max-height: 92vh !important; width: 100% !important; max-width: 100% !important; } /* Modal imóvel leilão */ .modal-bg { padding: 0 !important; align-items: flex-end !important; } .modal-imovel-wrap { flex-direction: column !important; max-width: 100% !important; gap: 0 !important; } .modal-imovel-main { border-radius: 16px 16px 0 0 !important; max-height: 92vh !important; overflow-y: auto !important; } .modal-imovel-sidebar { display: none !important; /* sidebar vira bottom bar no modal */ } /* Barra de ações rápidas inline no modal mobile */ .mi-mobile-actions { display: flex !important; } /* Popover de mover, etiquetas, data → centralizado */ #moveCardPopover, #labelPopover, #datePopover { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; right: auto !important; width: 90vw !important; max-width: 340px !important; z-index: 600 !important; } } /* ── DASHBOARD LEILÃO ────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Rail lateral → bottom nav */ .rail { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; height: 56px !important; flex-direction: row !important; justify-content: space-around !important; align-items: center !important; border-right: none !important; border-top: 0.5px solid var(--border) !important; padding: 0 !important; z-index: 90 !important; background: var(--surface) !important; } .rail-btn { width: 44px !important; height: 44px !important; } .rail-sep { display: none !important; } /* Sidebar imóveis → oculta (abre via botão) */ .imoveis-sidebar { position: fixed !important; left: -100% !important; top: 50px !important; bottom: 56px !important; z-index: 80 !important; transition: left .25s ease !important; width: 80vw !important; max-width: 280px !important; } .imoveis-sidebar.open { left: 0 !important; box-shadow: 4px 0 24px rgba(0,0,0,.5) !important; } /* Main — padding bottom para o rail fixo */ .main, .page > .main { padding-bottom: 56px !important; } /* Dashboard métricas → scroll horizontal */ .dash-metrics { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; } .dash-metric { min-width: 120px !important; flex-shrink: 0 !important; } .dash-metric-val { font-size: 22px !important; } /* Dashboard body → coluna única */ .dash-body { grid-template-columns: 1fr !important; overflow-y: auto !important; } .dash-col-side { border-left: none !important; border-top: 0.5px solid var(--border) !important; } /* Kanban imóveis → 1 coluna */ .k-col-body { grid-template-columns: 1fr !important; } .kanban-imoveis { padding: 10px !important; } /* Kanban demandas */ .kanban-demand { padding: 10px !important; gap: 10px !important; } .d-col { width: 260px !important; } /* Calendário → ocultar painel lateral */ .cal-day-panel { display: none !important; } .cal-day-panel.open { display: flex !important; position: fixed !important; bottom: 56px !important; left: 0 !important; right: 0 !important; height: 50vh !important; width: 100% !important; border-left: none !important; border-top: 0.5px solid var(--border) !important; z-index: 70 !important; } .cal-grid-wrap { padding: 8px !important; } .cal-cell { min-height: 60px !important; padding: 4px 5px !important; } .cal-event { font-size: 9px !important; padding: 1px 4px !important; } .cal-topbar { padding: 8px 12px !important; flex-wrap: wrap !important; gap: 6px !important; } .cal-legend { display: none !important; } } /* ── DASHBOARD DESENVOLVIMENTO ───────────────────────────────────────── */ @media (max-width: 768px) { /* Sidebar nav → bottom tab bar */ .sidebar-dev { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 56px !important; flex-direction: row !important; border-right: none !important; border-top: 0.5px solid var(--border) !important; z-index: 90 !important; } .projects-grid { grid-template-columns: 1fr !important; } .metrics-row { flex-wrap: wrap !important; } .metric-card { flex: 1 !important; min-width: 130px !important; } } /* ── ADMIN ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .admin-rail { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 56px !important; flex-direction: row !important; justify-content: space-around !important; border-right: none !important; border-top: 0.5px solid var(--border) !important; z-index: 90 !important; padding: 0 !important; } .admin-sidenav { display: none !important; } .admin-content { padding-bottom: 56px !important; } } /* ── KANBAN PROJETO ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .kanban-board { padding: 10px !important; gap: 10px !important; } .kanban-col { width: 260px !important; flex-shrink: 0 !important; } } /* ── LOGIN / INDEX ───────────────────────────────────────────────────── */ @media (max-width: 480px) { .login-card, .auth-card { margin: 16px !important; padding: 24px 20px !important; border-radius: 16px !important; } } /* ── OVERLAY SIDEBAR (toque fora fecha) ──────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 79; } .sidebar-overlay.open { display: block; } /* ── TOUCH IMPROVEMENTS ──────────────────────────────────────────────── */ @media (max-width: 768px) { /* Touch targets mínimos de 44px */ button, .rail-btn, .mis-btn, .sub-btn, .group-row { min-height: 40px !important; } /* Sem hover em touch */ .t-card:hover { transform: none !important; } .d-card:hover { transform: none !important; } /* Scroll suave */ .kanban, .kanban-demand, .kanban-imoveis, .sb-body, .modal-imovel-main { -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory; } .d-col, .k-col { scroll-snap-align: start; } }