/*
============================================================
Flow CRM - Design System Premium Global
Arquivo: flow/css/flow-premium.css
Bloco 10.2 - Etapa 3.2
Data: 29/06/2026

Objetivo:
- Centralizar tema claro/dark, fonte, modais, inputs, botões,
  cards, tabelas e responsividade em um único arquivo global.
- Corrigir inconsistências visuais entre módulos.
- Padronizar modais com tamanho premium próximo ao modal Campanhas.
============================================================
*/

:root {
    --flow-font-ui: "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

    --flow-radius-sm: 10px;
    --flow-radius-md: 12px;
    --flow-radius-lg: 16px;
    --flow-radius-xl: 20px;
    --flow-radius-modal: 22px;

    --flow-shadow-light: 0 20px 60px rgba(15, 23, 42, 0.12);
    --flow-shadow-dark: 0 24px 80px rgba(0, 0, 0, 0.50);

    --flow-modal-width: 640px;
    --flow-modal-width-lg: 680px;
    --flow-modal-width-sm: 420px;

    --flow-light-bg: #f8fafc;
    --flow-light-surface: #ffffff;
    --flow-light-surface-2: #f8fafc;
    --flow-light-border: #dbe4ef;
    --flow-light-title: #0f172a;
    --flow-light-text: #334155;
    --flow-light-muted: #64748b;

    --flow-dark-bg: #050505;
    --flow-dark-surface: #101010;
    --flow-dark-surface-2: #151515;
    --flow-dark-surface-3: #1a1a1a;
    --flow-dark-border: rgba(255, 255, 255, 0.13);
    --flow-dark-border-2: rgba(255, 255, 255, 0.22);
    --flow-dark-title: #eeeeee;
    --flow-dark-text: #d8d8d8;
    --flow-dark-muted: #b0b0b0;
    --flow-dark-soft: #8e8e8e;

    --flow-green: #10b981;
    --flow-blue: #3b82f6;
    --flow-red: #f43f5e;
    --flow-amber: #f59e0b;
    --flow-purple: #8b5cf6;
}

html,
body {
    font-family: var(--flow-font-ui) !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

body,
button,
input,
select,
textarea,
table,
#content-workspace {
    font-family: var(--flow-font-ui) !important;
}

button,
input,
select,
textarea {
    font-weight: 600;
}

/* ============================================================
   TEMA CLARO
============================================================ */

html.flow-theme-light body,
html.flow-theme-light #content-workspace {
    background: var(--flow-light-bg) !important;
    color: var(--flow-light-text) !important;
}

html.flow-theme-light .text-slate-400,
html.flow-theme-light .text-gray-400 {
    color: #64748b !important;
}

html.flow-theme-light .text-slate-500,
html.flow-theme-light .text-gray-500 {
    color: #475569 !important;
}

/* ============================================================
   TEMA DARK PREMIUM
============================================================ */

html.flow-theme-dark {
    color-scheme: dark;
    background: var(--flow-dark-bg) !important;
}

html.flow-theme-dark,
html.flow-theme-dark body,
html.flow-theme-dark #content-workspace {
    background: var(--flow-dark-bg) !important;
    background-image: none !important;
    color: var(--flow-dark-text) !important;
    text-shadow: none !important;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

html.flow-theme-dark *,
html.flow-theme-dark *::before,
html.flow-theme-dark *::after {
    text-shadow: none !important;
}

html.flow-theme-dark header,
html.flow-theme-dark footer {
    background: #0b0b0b !important;
    background-image: none !important;
    border-color: var(--flow-dark-border) !important;
    color: var(--flow-dark-muted) !important;
    box-shadow: none !important;
}

html.flow-theme-dark .sidebar-bg,
html.flow-theme-dark aside {
    background-color: #070707 !important;
    background-image: none !important;
    border-color: var(--flow-dark-border) !important;
    box-shadow: none !important;
}

html.flow-theme-dark .sidebar-bg::before {
    background: rgba(0, 0, 0, 0.72) !important;
}

/* Superfícies neutras */
html.flow-theme-dark [class*="bg-slate-"],
html.flow-theme-dark [class*="bg-gray-"],
html.flow-theme-dark [class*="bg-zinc-"],
html.flow-theme-dark [class*="bg-neutral-"],
html.flow-theme-dark [class*="bg-stone-"],
html.flow-theme-dark [class*="bg-[#"],
html.flow-theme-dark .bg-white,
html.flow-theme-dark .bg-white\/95,
html.flow-theme-dark .bg-white\/90,
html.flow-theme-dark .bg-white\/80,
html.flow-theme-dark .bg-white\/70,
html.flow-theme-dark .bg-white\/60,
html.flow-theme-dark .bg-white\/50,
html.flow-theme-dark .bg-white\/40 {
    background-color: var(--flow-dark-surface) !important;
    background-image: none !important;
    color: var(--flow-dark-text) !important;
}

html.flow-theme-dark [class*="hover:bg-slate-"]:hover,
html.flow-theme-dark [class*="hover:bg-gray-"]:hover,
html.flow-theme-dark [class*="hover:bg-zinc-"]:hover,
html.flow-theme-dark [class*="hover:bg-neutral-"]:hover,
html.flow-theme-dark [class*="hover:bg-stone-"]:hover,
html.flow-theme-dark .hover\:bg-white:hover {
    background-color: var(--flow-dark-surface-2) !important;
    background-image: none !important;
}

/* Destaques preservados */
html.flow-theme-dark .bg-emerald-50,
html.flow-theme-dark .bg-emerald-50\/40,
html.flow-theme-dark .bg-emerald-100,
html.flow-theme-dark .bg-green-50,
html.flow-theme-dark .bg-green-100 {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.36) !important;
    color: #bdf7df !important;
}

html.flow-theme-dark .bg-blue-50,
html.flow-theme-dark .bg-blue-50\/40,
html.flow-theme-dark .bg-blue-100,
html.flow-theme-dark .bg-indigo-50,
html.flow-theme-dark .bg-indigo-100 {
    background-color: rgba(59, 130, 246, 0.10) !important;
    border-color: rgba(96, 165, 250, 0.32) !important;
    color: #c6ddff !important;
}

html.flow-theme-dark .bg-rose-50,
html.flow-theme-dark .bg-rose-50\/40,
html.flow-theme-dark .bg-rose-100,
html.flow-theme-dark .bg-red-50,
html.flow-theme-dark .bg-red-100 {
    background-color: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(251, 113, 133, 0.36) !important;
    color: #ffd0d8 !important;
}

html.flow-theme-dark .bg-amber-50,
html.flow-theme-dark .bg-amber-50\/40,
html.flow-theme-dark .bg-amber-100,
html.flow-theme-dark .bg-yellow-50,
html.flow-theme-dark .bg-yellow-100 {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.38) !important;
    color: #ffe3a3 !important;
}

html.flow-theme-dark .bg-purple-50,
html.flow-theme-dark .bg-purple-50\/40,
html.flow-theme-dark .bg-purple-100,
html.flow-theme-dark .bg-violet-50,
html.flow-theme-dark .bg-violet-100 {
    background-color: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(167, 139, 250, 0.36) !important;
    color: #e2d7ff !important;
}

/* Bordas */
html.flow-theme-dark [class*="border-slate-"],
html.flow-theme-dark [class*="border-gray-"],
html.flow-theme-dark [class*="border-zinc-"],
html.flow-theme-dark [class*="border-neutral-"],
html.flow-theme-dark [class*="border-stone-"],
html.flow-theme-dark .border,
html.flow-theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.flow-theme-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--flow-dark-border) !important;
}

/* Textos */
html.flow-theme-dark .text-white {
    color: #e8e8e8 !important;
}

html.flow-theme-dark [class*="text-slate-9"],
html.flow-theme-dark [class*="text-gray-9"],
html.flow-theme-dark [class*="text-zinc-9"],
html.flow-theme-dark [class*="text-neutral-9"],
html.flow-theme-dark .text-black {
    color: var(--flow-dark-title) !important;
}

html.flow-theme-dark [class*="text-slate-8"],
html.flow-theme-dark [class*="text-gray-8"],
html.flow-theme-dark [class*="text-zinc-8"],
html.flow-theme-dark [class*="text-neutral-8"],
html.flow-theme-dark [class*="text-slate-7"],
html.flow-theme-dark [class*="text-gray-7"],
html.flow-theme-dark [class*="text-zinc-7"],
html.flow-theme-dark [class*="text-neutral-7"] {
    color: #d8d8d8 !important;
}

html.flow-theme-dark [class*="text-slate-6"],
html.flow-theme-dark [class*="text-gray-6"],
html.flow-theme-dark [class*="text-zinc-6"],
html.flow-theme-dark [class*="text-neutral-6"],
html.flow-theme-dark [class*="text-slate-5"],
html.flow-theme-dark [class*="text-gray-5"],
html.flow-theme-dark [class*="text-zinc-5"],
html.flow-theme-dark [class*="text-neutral-5"] {
    color: var(--flow-dark-muted) !important;
}

html.flow-theme-dark [class*="text-slate-4"],
html.flow-theme-dark [class*="text-gray-4"],
html.flow-theme-dark [class*="text-zinc-4"],
html.flow-theme-dark [class*="text-neutral-4"],
html.flow-theme-dark [class*="text-slate-3"],
html.flow-theme-dark [class*="text-gray-3"],
html.flow-theme-dark [class*="text-zinc-3"],
html.flow-theme-dark [class*="text-neutral-3"] {
    color: var(--flow-dark-soft) !important;
}

html.flow-theme-dark .text-emerald-500,
html.flow-theme-dark .text-emerald-600,
html.flow-theme-dark .text-emerald-700,
html.flow-theme-dark .text-green-500,
html.flow-theme-dark .text-green-600,
html.flow-theme-dark .text-green-700 {
    color: #18d58f !important;
}

html.flow-theme-dark .text-blue-500,
html.flow-theme-dark .text-blue-600,
html.flow-theme-dark .text-blue-700,
html.flow-theme-dark .text-indigo-500,
html.flow-theme-dark .text-indigo-600,
html.flow-theme-dark .text-indigo-700 {
    color: #7bb4ff !important;
}

html.flow-theme-dark .text-rose-500,
html.flow-theme-dark .text-rose-600,
html.flow-theme-dark .text-rose-700,
html.flow-theme-dark .text-red-500,
html.flow-theme-dark .text-red-600,
html.flow-theme-dark .text-red-700 {
    color: #ff778b !important;
}

html.flow-theme-dark .text-amber-500,
html.flow-theme-dark .text-amber-600,
html.flow-theme-dark .text-amber-700,
html.flow-theme-dark .text-yellow-500,
html.flow-theme-dark .text-yellow-600,
html.flow-theme-dark .text-yellow-700 {
    color: #ffc342 !important;
}

html.flow-theme-dark .text-purple-500,
html.flow-theme-dark .text-purple-600,
html.flow-theme-dark .text-purple-700,
html.flow-theme-dark .text-violet-500,
html.flow-theme-dark .text-violet-600,
html.flow-theme-dark .text-violet-700 {
    color: #b996ff !important;
}

/* Inputs */
html.flow-theme-dark input,
html.flow-theme-dark select,
html.flow-theme-dark textarea,
html.flow-theme-dark #global-search {
    background-color: #090909 !important;
    background-image: none !important;
    color: #dddddd !important;
    border-color: var(--flow-dark-border-2) !important;
    box-shadow: none !important;
}

html.flow-theme-dark input::placeholder,
html.flow-theme-dark textarea::placeholder,
html.flow-theme-dark #global-search::placeholder {
    color: #888888 !important;
}

html.flow-theme-dark option {
    background: #101010 !important;
    color: #dddddd !important;
}

/* Tabelas */
html.flow-theme-dark th {
    background-color: #111111 !important;
    color: #d6d6d6 !important;
    border-color: var(--flow-dark-border) !important;
}

html.flow-theme-dark td {
    color: #d6d6d6 !important;
    border-color: var(--flow-dark-border) !important;
}

html.flow-theme-dark tbody tr:hover {
    background-color: #171717 !important;
}

/* Sombras */
html.flow-theme-dark .shadow-sm,
html.flow-theme-dark .shadow,
html.flow-theme-dark .shadow-md,
html.flow-theme-dark .shadow-lg,
html.flow-theme-dark .shadow-xl,
html.flow-theme-dark .shadow-2xl {
    box-shadow: none !important;
}

/* ============================================================
   PADRÃO GLOBAL DE MODAIS PREMIUM
============================================================ */

/* Overlays diretos */
#financeiroModal,
#campaignModal,
#saleModal,
#vendaModal,
#actionModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: auto !important;
}

/* Overlays com wrapper interno */
#clientModal,
#clientDailyRouteModal,
#dailyRouteModal,
#dailyClientModal {
    padding: 0 !important;
    overflow: auto !important;
}

#clientModal > .flex,
#clientDailyRouteModal > .flex,
#dailyRouteModal > .min-h-screen,
#dailyClientModal > .min-h-screen {
    min-height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

/* Painéis */
#financeiroModal > div,
#campaignModal > div,
#saleModal > div,
#vendaModal > div,
#clientModal > .flex > div,
#clientDailyRouteModal > .flex > div,
#dailyRouteModal > .min-h-screen > div,
#dailyClientModal > .min-h-screen > div {
    width: min(94vw, var(--flow-modal-width)) !important;
    max-width: var(--flow-modal-width) !important;
    max-height: min(92dvh, 760px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: var(--flow-modal-radius) !important;
    box-shadow: var(--flow-shadow-light) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#financeiroModal > div::-webkit-scrollbar,
#campaignModal > div::-webkit-scrollbar,
#saleModal > div::-webkit-scrollbar,
#vendaModal > div::-webkit-scrollbar,
#clientModal > .flex > div::-webkit-scrollbar,
#clientDailyRouteModal > .flex > div::-webkit-scrollbar,
#dailyRouteModal > .min-h-screen > div::-webkit-scrollbar,
#dailyClientModal > .min-h-screen > div::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

/* Tamanhos por tipo */
#actionModal > div {
    width: min(94vw, var(--flow-modal-width-sm)) !important;
    max-width: var(--flow-modal-width-sm) !important;
}

#campaignModal > div,
#saleModal > div,
#vendaModal > div,
#financeiroModal > div {
    width: min(94vw, var(--flow-modal-width-lg)) !important;
    max-width: var(--flow-modal-width-lg) !important;
}

/* Fonte dos modais */
#financeiroModal,
#clientModal,
#campaignModal,
#saleModal,
#vendaModal,
#clientDailyRouteModal,
#dailyRouteModal,
#dailyClientModal {
    font-size: 14px !important;
}

#saleModal,
#vendaModal {
    font-size: 14px !important;
}

#saleModal label,
#vendaModal label,
#saleModal p,
#vendaModal p,
#saleModal input,
#vendaModal input,
#saleModal textarea,
#vendaModal textarea,
#saleModal select,
#vendaModal select {
    font-size: 13px !important;
}

#financeiroModal label,
#clientModal label,
#campaignModal label,
#saleModal label,
#vendaModal label,
#clientDailyRouteModal label,
#dailyRouteModal label,
#dailyClientModal label {
    letter-spacing: 0.02em !important;
    font-weight: 800 !important;
}

/* Campos dos modais */
#financeiroModal input,
#financeiroModal select,
#financeiroModal textarea,
#clientModal input,
#clientModal select,
#clientModal textarea,
#campaignModal input,
#campaignModal select,
#campaignModal textarea,
#saleModal input,
#saleModal select,
#saleModal textarea,
#vendaModal input,
#vendaModal select,
#vendaModal textarea,
#clientDailyRouteModal input,
#clientDailyRouteModal select,
#clientDailyRouteModal textarea,
#dailyRouteModal input,
#dailyRouteModal select,
#dailyRouteModal textarea,
#dailyClientModal input,
#dailyClientModal select,
#dailyClientModal textarea {
    min-height: 40px !important;
    border-radius: 12px !important;
}

/* Botões X */
#financeiroModal > div > div:first-child button,
#campaignModal > div > div:first-child button,
#saleModal > div > div:first-child button,
#vendaModal > div > div:first-child button,
#clientModal > .flex > div > div:first-child button,
#clientDailyRouteModal > .flex > div > div:first-child button,
#dailyRouteModal > .min-h-screen > div > div:first-child button,
#dailyClientModal > .min-h-screen > div > div:first-child button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.flow-theme-dark #financeiroModal > div,
html.flow-theme-dark #campaignModal > div,
html.flow-theme-dark #saleModal > div,
html.flow-theme-dark #vendaModal > div,
html.flow-theme-dark #clientModal > .flex > div,
html.flow-theme-dark #clientDailyRouteModal > .flex > div,
html.flow-theme-dark #dailyRouteModal > .min-h-screen > div,
html.flow-theme-dark #dailyClientModal > .min-h-screen > div,
html.flow-theme-dark #actionModal > div {
    background: #101010 !important;
    border: 1px solid var(--flow-dark-border-2) !important;
    color: var(--flow-dark-text) !important;
    box-shadow: var(--flow-shadow-dark) !important;
}

html.flow-theme-dark #financeiroModal > div > div:first-child button,
html.flow-theme-dark #campaignModal > div > div:first-child button,
html.flow-theme-dark #saleModal > div > div:first-child button,
html.flow-theme-dark #vendaModal > div > div:first-child button,
html.flow-theme-dark #clientModal > .flex > div > div:first-child button,
html.flow-theme-dark #clientDailyRouteModal > .flex > div > div:first-child button,
html.flow-theme-dark #dailyRouteModal > .min-h-screen > div > div:first-child button,
html.flow-theme-dark #dailyClientModal > .min-h-screen > div > div:first-child button {
    color: #b0b0b0 !important;
}

/* Responsividade */
@media (max-width: 768px) {
    #financeiroModal,
    #campaignModal,
    #saleModal,
    #vendaModal,
    #actionModal {
        align-items: flex-start !important;
        padding: 10px !important;
    }

    #clientModal > .flex,
    #clientDailyRouteModal > .flex,
    #dailyRouteModal > .min-h-screen,
    #dailyClientModal > .min-h-screen {
        align-items: flex-start !important;
        padding: 10px !important;
    }

    #financeiroModal > div,
    #campaignModal > div,
    #saleModal > div,
    #vendaModal > div,
    #clientModal > .flex > div,
    #clientDailyRouteModal > .flex > div,
    #dailyRouteModal > .min-h-screen > div,
    #dailyClientModal > .min-h-screen > div,
    #actionModal > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 18px !important;
    }
}

/* ============================================================
   NOTIFICAÇÕES
============================================================ */

html.flow-theme-dark #flowNotificationBell,
html.flow-theme-dark .flow-theme-toggle {
    background: #101010 !important;
    border-color: var(--flow-dark-border-2) !important;
    color: #d8d8d8 !important;
    box-shadow: none !important;
}

html.flow-theme-dark #flowNotificationBadge,
html.flow-theme-dark #flowNotificationUnreadCount,
html.flow-theme-dark #flowNotificationReadCount {
    background: #f43f5e !important;
    color: #ffffff !important;
    border: 2px solid #050505 !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.flow-theme-dark #flowNotificationPanel {
    background: #101010 !important;
    border-color: var(--flow-dark-border-2) !important;
    color: var(--flow-dark-text) !important;
    box-shadow: var(--flow-shadow-dark) !important;
}

/* ============================================================
   GRÁFICOS
============================================================ */

html.flow-theme-dark .apexcharts-tooltip,
html.flow-theme-dark .apexcharts-tooltip-title {
    background: #101010 !important;
    border-color: var(--flow-dark-border-2) !important;
    color: var(--flow-dark-text) !important;
}

html.flow-theme-dark .apexcharts-text,
html.flow-theme-dark .apexcharts-legend-text,
html.flow-theme-dark .apexcharts-title-text {
    fill: #d7d7d7 !important;
    color: #d7d7d7 !important;
}

/* LOG TÉCNICO
Data: 29/06/2026
Alterações:
- Arquivo global de design system criado.
- Tema claro/dark, fonte, modais, campos, notificações e responsividade centralizados.
- Correção do modal Cliente descentralizado.
- Correção do tamanho de fonte do modal Vendas.
- Correção do botão X do modal Financeiro.
*/

/* LOG TÉCNICO - Bloco 10.2 Etapa 3.2B
Data: 29/06/2026
Alterações:
- Arquivo posicionado na estrutura recomendada: flow/assets/css/flow-premium.css.
- global.css permanece preservado para login/legado.
*/

/* ============================================================
   Flow CRM — Revisão Visual Final do Bloco 10.2
   Data: 02/07/2026
   Objetivo:
   - Uniformizar cartões, abas, filtros, tabelas, botões e modais.
   - Melhorar leitura no tema claro/escuro.
   - Suavizar espaçamentos em notebook, tablet e celular.
   ============================================================ */

:root {
  --flow-radius-card: 1.5rem;
  --flow-radius-control: 0.9rem;
  --flow-border-soft: rgba(148, 163, 184, 0.24);
  --flow-shadow-soft: 0 14px 38px rgba(15, 23, 42, 0.06);
  --flow-shadow-hover: 0 20px 48px rgba(15, 23, 42, 0.10);
}

#content-workspace {
  letter-spacing: -0.01em;
}

#content-workspace section {
  animation: flowSectionIn 0.18s ease-out both;
}

@keyframes flowSectionIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards e blocos */
#content-workspace .rounded-2xl,
#content-workspace .rounded-3xl {
  border-color: var(--flow-border-soft);
}

#content-workspace .shadow-sm {
  box-shadow: var(--flow-shadow-soft);
}

#content-workspace article.bg-white,
#content-workspace div.bg-white.border {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

#content-workspace article.bg-white:hover,
#content-workspace div.bg-white.border:hover {
  border-color: rgba(100, 116, 139, 0.26);
}

/* Abas internas padronizadas */
#content-workspace .agenda-tab-btn,
#content-workspace .sales-tab-btn,
#content-workspace .campaign-tab-btn,
#content-workspace .report-tab-btn,
#content-workspace .finance-tab-btn,
#content-workspace .config-tab-btn {
  min-height: 42px;
  white-space: nowrap;
}

#content-workspace .agenda-tab-btn i,
#content-workspace .sales-tab-btn i,
#content-workspace .campaign-tab-btn i,
#content-workspace .report-tab-btn i,
#content-workspace .finance-tab-btn i,
#content-workspace .config-tab-btn i {
  opacity: 0.9;
}

/* Inputs, selects e filtros */
#content-workspace input,
#content-workspace select,
#content-workspace textarea {
  min-height: 40px;
}

#content-workspace input:focus,
#content-workspace select:focus,
#content-workspace textarea:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.11);
}

/* Botões */
#content-workspace button {
  letter-spacing: -0.005em;
}

#content-workspace button:active {
  transform: translateY(1px);
}

/* Tabelas e resultados */
#content-workspace table {
  border-collapse: separate;
  border-spacing: 0;
}

#content-workspace thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

#content-workspace tbody tr {
  transition: background-color 0.16s ease;
}

#content-workspace tbody tr:hover {
  background-color: rgba(241, 245, 249, 0.75);
}

/* Modais premium */
#content-workspace [id$="Modal"] > div,
#saleModal > div,
#campaignModal > div,
#clientModal > div {
  border-radius: 1.5rem;
}

#content-workspace [id$="Modal"] form label,
#saleModal form label,
#campaignModal form label,
#clientModal form label {
  letter-spacing: 0.02em;
}

/* Scroll interno mais discreto */
#content-workspace [class*="overflow-y-auto"]::-webkit-scrollbar,
#content-workspace [class*="overflow-x-auto"]::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

#content-workspace [class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
#content-workspace [class*="overflow-x-auto"]::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
}

/* Mobile/tablet */
@media (max-width: 768px) {
  #content-workspace {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #content-workspace h1 {
    font-size: 1.45rem;
    line-height: 1.2;
  }

  #content-workspace .rounded-3xl {
    border-radius: 1.25rem;
  }

  #content-workspace .agenda-tab-btn,
  #content-workspace .sales-tab-btn,
  #content-workspace .campaign-tab-btn,
  #content-workspace .report-tab-btn,
  #content-workspace .finance-tab-btn,
  #content-workspace .config-tab-btn {
    min-height: 40px;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  #saleModal,
  #campaignModal,
  #clientModal {
    padding: 0.75rem !important;
  }
}

/* Tema escuro: reforço final para módulos internos */
html.flow-theme-dark #content-workspace {
  color: #e5e7eb;
}

html.flow-theme-dark #content-workspace .bg-white {
  background-color: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(51, 65, 85, 0.86) !important;
}

html.flow-theme-dark #content-workspace .bg-slate-50,
html.flow-theme-dark #content-workspace .bg-slate-100 {
  background-color: rgba(30, 41, 59, 0.78) !important;
  border-color: rgba(51, 65, 85, 0.82) !important;
}

html.flow-theme-dark #content-workspace .text-slate-900,
html.flow-theme-dark #content-workspace .text-slate-800,
html.flow-theme-dark #content-workspace .text-slate-700 {
  color: #f8fafc !important;
}

html.flow-theme-dark #content-workspace .text-slate-600,
html.flow-theme-dark #content-workspace .text-slate-500,
html.flow-theme-dark #content-workspace .text-slate-400 {
  color: #cbd5e1 !important;
}

html.flow-theme-dark #content-workspace input,
html.flow-theme-dark #content-workspace select,
html.flow-theme-dark #content-workspace textarea {
  background-color: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(71, 85, 105, 0.86) !important;
  color: #f8fafc !important;
}

html.flow-theme-dark #content-workspace input::placeholder,
html.flow-theme-dark #content-workspace textarea::placeholder {
  color: #94a3b8 !important;
}

html.flow-theme-dark #content-workspace tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.70) !important;
}

html.flow-theme-dark #content-workspace .shadow-sm {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

/* LOG TÉCNICO - Bloco 10.2 Etapa 8
   Data: 02/07/2026
   Alterações:
   - Revisão visual final global do Bloco 10.2.
   - Padronização de cards, abas, filtros, botões, tabelas e modais.
   - Reforço de contraste no tema escuro.
   - Ajustes responsivos para mobile/tablet.
*/

/* ============================================================
   Flow CRM — Bloco 10.2 Etapa 9
   Login Google, boas-vindas diária e sino pulsante
   ============================================================ */

@keyframes flowNotificationPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.58);
  }
  50% {
    transform: scale(1.12);
    opacity: 0.72;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

@keyframes flowBellGlow {
  0%, 100% {
    color: inherit;
    filter: none;
  }
  50% {
    color: #ef4444;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.55));
  }
}

#flowNotificationBadge:not(.hidden),
#flowNotificationCount:not(.hidden),
#flowNotificationUnreadCount:not(.hidden),
.notification-count:not(.hidden),
.badge-count:not(.hidden) {
  animation: flowNotificationPulse 1.25s ease-in-out infinite;
  transform-origin: center;
}

#flowNotificationBell:has(#flowNotificationBadge:not(.hidden)) i,
#flowNotificationBell.flow-has-notifications i {
  animation: flowBellGlow 1.25s ease-in-out infinite;
}

.flow-daily-welcome-card {
  animation: flowSectionIn 0.22s ease-out both;
}

html.flow-theme-dark #flowDailyWelcomeModal .flow-daily-welcome-card {
  background: #101010 !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: #e7e7e7 !important;
}

html.flow-theme-dark #flowDailyWelcomeModal .bg-white {
  background: #141414 !important;
  border-color: rgba(255,255,255,0.13) !important;
}

html.flow-theme-dark #flowDailyWelcomeModal .bg-slate-50,
html.flow-theme-dark #flowDailyWelcomeModal .bg-slate-100 {
  background: #181818 !important;
  border-color: rgba(255,255,255,0.13) !important;
}

html.flow-theme-dark #flowDailyWelcomeModal .text-slate-900,
html.flow-theme-dark #flowDailyWelcomeModal .text-slate-800,
html.flow-theme-dark #flowDailyWelcomeModal .text-slate-700 {
  color: #f3f4f6 !important;
}

html.flow-theme-dark #flowDailyWelcomeModal .text-slate-500,
html.flow-theme-dark #flowDailyWelcomeModal .text-slate-400 {
  color: #b6b6b6 !important;
}

/* LOG TÉCNICO - Bloco 10.2 Etapa 9
   Data: 02/07/2026
   Alterações:
   - Sino de notificações recebe animação pulsante quando existe badge visível.
   - Modal diário de boas-vindas ajustado para tema claro e dark.
*/

/* LOG TÉCNICO - Bloco 10.2 Etapa 9 Final
   Data: 02/07/2026
   Alterações:
   - Mantida animação pulsante do sino quando houver notificações.
   - Mantido suporte visual ao modal diário no tema claro e escuro.
*/

/* LOG TÉCNICO - Bloco 10.2 Etapa 9.1
   Data: 02/07/2026
   Alterações:
   - Mantido visual da etapa 9 final.
   - Pacote republicado junto ao hotfix do Login Google.
*/

/* ============================================================
   Bloco 10.2 Etapa 3.3.1 - Correção premium de modais
   - Centraliza o modal de Cliente usando o Design System Global.
   - Corrige conflito com regra antiga em index.html que afetava o wrapper.
============================================================ */
#clientModal {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
}

#clientModal > .flex {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}

#clientModal > .flex > div {
    width: min(94vw, var(--flow-modal-width-lg)) !important;
    max-width: var(--flow-modal-width-lg) !important;
    max-height: min(92dvh, 780px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
    border-radius: var(--flow-modal-radius) !important;
    box-shadow: var(--flow-shadow-light) !important;
    scrollbar-width: thin !important;
}

#clientModal > .flex > div::-webkit-scrollbar {
    width: 7px !important;
}

#clientModal > .flex > div::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45) !important;
    border-radius: 999px !important;
}

html.flow-theme-dark #clientModal > .flex > div {
    background: #101010 !important;
    border: 1px solid var(--flow-dark-border-2) !important;
    color: var(--flow-dark-text) !important;
    box-shadow: var(--flow-shadow-dark) !important;
}

@media (max-width: 768px) {
    #clientModal > .flex {
        align-items: flex-start !important;
        padding: 10px !important;
    }

    #clientModal > .flex > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 18px !important;
    }
}

/* LOG TÉCNICO - Bloco 10.2 Etapa 3.3.1
   Data: 07/07/2026
   Alterações:
   - Corrigida centralização do modal Novo/Editar Cliente.
   - Mantido padrão visual premium centralizado no flow-premium.css.
*/

/* ============================================================
   Bloco 10.2 Etapa 3.4 - Central de Avisos e Comunicados
   - Letreiro superior premium sem bordas.
   - Movimento saindo do sino em direção à busca.
   - Tempo de exibição controlado por comunicado.
============================================================ */
.flow-announcement-ticker {
    width: clamp(280px, 30vw, 520px);
    height: 38px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    overflow: hidden;
    color: #0f172a;
    padding-inline: 0 !important;
    transform: translateZ(0);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.10) 8%, #000 22%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.10) 8%, #000 22%, #000 88%, transparent 100%);
}

.flow-announcement-ticker:hover {
    transform: translateY(-1px);
}

.flow-announcement-ticker::before {
    content: '';
    position: absolute;
    right: 3px;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 68%);
    pointer-events: none;
}

.flow-announcement-ticker::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.10) 50%, transparent 100%);
    opacity: .65;
    pointer-events: none;
}

.flow-announcement-ticker [data-flow-ticker-marker] {
    display: none !important;
}

.flow-announcement-marquee {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.flow-announcement-text {
    position: absolute;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    max-width: none;
    will-change: transform, opacity;
    animation: flowTickerFromBellToSearch var(--flow-ticker-duration, 30s) linear forwards;
}

.flow-announcement-ticker:hover .flow-announcement-text {
    animation-play-state: paused;
}

.flow-announcement-text strong,
.flow-announcement-text small {
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.flow-announcement-text strong::before {
    content: '•';
    margin-right: 8px;
    color: #10b981;
}

@keyframes flowTickerFromBellToSearch {
    0% {
        transform: translateX(108%);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    82% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(-1 * (100vw + 180px)));
        opacity: 0;
    }
}

.flow-admin-announcement-row {
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(248, 250, 252, 0.88);
    border-radius: 18px;
    padding: 13px;
    transition: 0.2s ease;
}

.flow-admin-announcement-row:hover {
    border-color: rgba(16, 185, 129, 0.28);
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.flow-admin-comm-modal-input,
.flow-admin-comm-modal-select,
.flow-admin-comm-modal-textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #f8fafc;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 750;
    color: #0f172a;
    outline: none;
    transition: 0.2s ease;
}

.flow-admin-comm-modal-textarea {
    min-height: 118px;
    resize: vertical;
    line-height: 1.55;
}

.flow-admin-comm-modal-input:focus,
.flow-admin-comm-modal-select:focus,
.flow-admin-comm-modal-textarea:focus {
    background: #ffffff;
    border-color: rgba(16, 185, 129, 0.72);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13);
}

.flow-admin-comm-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

html.flow-theme-dark .flow-announcement-ticker {
    color: #e2e8f0;
    background: transparent !important;
    box-shadow: none !important;
}

html.flow-theme-dark .flow-announcement-ticker::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.24), transparent 68%);
}

html.flow-theme-dark .flow-announcement-ticker::after {
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.16) 50%, transparent 100%);
}

html.flow-theme-dark .flow-announcement-text strong,
html.flow-theme-dark .flow-announcement-text small {
    text-shadow: 0 1px 0 rgba(2, 6, 23, .7);
}

html.flow-theme-dark .flow-admin-announcement-row {
    border-color: rgba(51, 65, 85, 0.9);
    background: rgba(15, 23, 42, 0.86);
}

html.flow-theme-dark .flow-admin-announcement-row:hover {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(16, 185, 129, 0.38);
}

html.flow-theme-dark .flow-admin-comm-modal-input,
html.flow-theme-dark .flow-admin-comm-modal-select,
html.flow-theme-dark .flow-admin-comm-modal-textarea {
    background: rgba(2, 6, 23, 0.76) !important;
    color: #e2e8f0 !important;
    border-color: rgba(51, 65, 85, 0.92) !important;
}

html.flow-theme-dark .flow-admin-comm-label {
    color: #94a3b8;
}

@media (max-width: 1280px) {
    .flow-announcement-ticker {
        display: none !important;
    }
}

/* LOG TÉCNICO - Bloco 10.2 Etapa 3.4.1
   Data: 07/07/2026
   Alterações:
   - Removidas bordas do ticker superior.
   - Criado letreiro sem caixa visual, com saída visual do sino em direção à busca.
   - Preparada duração variável de exibição por comunicado.
*/
/* LOG TÉCNICO - Bloco 10.2 Etapa 3.4
   Data: 07/07/2026
   Alterações:
   - Adicionado visual premium para ticker superior e comunicados administrativos.
*/


/* ============================================================
   LOG TÉCNICO - Bloco 10.2 Etapa 3.4.3
   Data: 07/07/2026
   Correções:
   - Letreiro passa a funcionar em ciclo contínuo.
   - A próxima mensagem começa quando a atual já avançou cerca de 50%.
   - Cores do título e texto variam conforme o tipo do comunicado.
============================================================ */
.flow-announcement-marquee {
    isolation: isolate;
}

.flow-announcement-text:not(.flow-announcement-runner) {
    display: none !important;
}

.flow-announcement-runner {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: max-content;
    max-width: none;
    transform: translate(112%, -50%);
    will-change: transform, opacity;
    animation: flowTickerRunner var(--flow-runner-duration, 30s) linear forwards;
    pointer-events: none;
}

.flow-announcement-runner strong {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: -0.01em;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255,255,255,.78);
}

.flow-announcement-runner small {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.flow-announcement-runner strong::before {
    content: '•';
    margin-right: 8px;
    color: currentColor;
    opacity: .82;
}

.flow-announcement-type-info strong { color: #2563eb; }
.flow-announcement-type-info small { color: #475569; }
.flow-announcement-type-aviso strong { color: #d97706; }
.flow-announcement-type-aviso small { color: #92400e; }
.flow-announcement-type-promocao strong { color: #7c3aed; }
.flow-announcement-type-promocao small { color: #6d28d9; }
.flow-announcement-type-urgente strong { color: #e11d48; }
.flow-announcement-type-urgente small { color: #be123c; }
.flow-announcement-type-manutencao strong { color: #334155; }
.flow-announcement-type-manutencao small { color: #475569; }
.flow-announcement-type-cobranca strong { color: #059669; }
.flow-announcement-type-cobranca small { color: #047857; }
.flow-announcement-type-atualizacao strong { color: #0d9488; }
.flow-announcement-type-atualizacao small { color: #0f766e; }
.flow-announcement-type-plan strong { color: #d97706; }
.flow-announcement-type-plan small { color: #92400e; }

.flow-announcement-ticker:hover .flow-announcement-runner {
    animation-play-state: paused;
}

@keyframes flowTickerRunner {
    0% {
        transform: translate(112%, -50%);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    74% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(-1 * (100vw + 220px)), -50%);
        opacity: 0;
    }
}

html.flow-theme-dark .flow-announcement-runner strong {
    text-shadow: 0 1px 0 rgba(2, 6, 23, .72);
}

html.flow-theme-dark .flow-announcement-runner small {
    text-shadow: 0 1px 0 rgba(2, 6, 23, .64);
}

html.flow-theme-dark .flow-announcement-type-info strong { color: #60a5fa; }
html.flow-theme-dark .flow-announcement-type-info small { color: #bfdbfe; }
html.flow-theme-dark .flow-announcement-type-aviso strong { color: #fbbf24; }
html.flow-theme-dark .flow-announcement-type-aviso small { color: #fde68a; }
html.flow-theme-dark .flow-announcement-type-promocao strong { color: #c4b5fd; }
html.flow-theme-dark .flow-announcement-type-promocao small { color: #ddd6fe; }
html.flow-theme-dark .flow-announcement-type-urgente strong { color: #fb7185; }
html.flow-theme-dark .flow-announcement-type-urgente small { color: #fecdd3; }
html.flow-theme-dark .flow-announcement-type-manutencao strong { color: #cbd5e1; }
html.flow-theme-dark .flow-announcement-type-manutencao small { color: #e2e8f0; }
html.flow-theme-dark .flow-announcement-type-cobranca strong { color: #34d399; }
html.flow-theme-dark .flow-announcement-type-cobranca small { color: #a7f3d0; }
html.flow-theme-dark .flow-announcement-type-atualizacao strong { color: #5eead4; }
html.flow-theme-dark .flow-announcement-type-atualizacao small { color: #99f6e4; }
html.flow-theme-dark .flow-announcement-type-plan strong { color: #fbbf24; }
html.flow-theme-dark .flow-announcement-type-plan small { color: #fde68a; }

/* ============================================================
   Bloco 10.2 Etapa 3.5 - Padronização SaaS Premium
   - Botões, modais administrativos, planos e letreiro premium.
   ============================================================ */
.flow-saas-modal-card {
    font-family: var(--flow-font, 'Inter', system-ui, sans-serif) !important;
    border-radius: 28px !important;
    box-shadow: 0 28px 86px rgba(15, 23, 42, .24) !important;
}

.flow-btn-primary,
.flow-btn-secondary,
.flow-premium-mini-btn {
    min-height: 46px;
    border-radius: 16px;
    border: 0;
    padding: 0 18px;
    font-family: var(--flow-font, 'Inter', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.flow-btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 16px 34px rgba(16, 185, 129, .22);
}

.flow-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 44px rgba(16, 185, 129, .30); }

.flow-btn-secondary {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.flow-btn-secondary:hover { background: #e2e8f0; color: #0f172a; transform: translateY(-1px); }

.flow-premium-mini-btn {
    min-height: 36px;
    border-radius: 14px;
    padding: 0 13px;
    font-size: 11px;
    background: rgba(15, 23, 42, .06);
    color: #334155;
    border: 1px solid rgba(148, 163, 184, .22);
}

.flow-premium-mini-btn:hover { background: rgba(15, 23, 42, .10); color: #0f172a; transform: translateY(-1px); }

.flow-admin-plan-row {
    border: 1px solid rgba(226, 232, 240, .95);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}

.flow-admin-module-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 850;
    color: #334155;
    cursor: pointer;
}

.flow-admin-module-check input { accent-color: #10b981; width: 15px; height: 15px; }
.flow-admin-module-check:has(input:checked) { border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.055); color: #047857; }
.flow-admin-module-check:has(input:disabled) { opacity: .74; cursor: not-allowed; }

.flow-announcement-runner strong,
.flow-announcement-runner small {
    font-family: var(--flow-font, 'Inter', system-ui, sans-serif) !important;
}

html.flow-theme-dark .flow-saas-modal-card {
    background: #101010 !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #f8fafc !important;
}

html.flow-theme-dark .flow-btn-secondary {
    background: rgba(255,255,255,.07);
    color: #e5e7eb;
    border-color: rgba(255,255,255,.12);
}

html.flow-theme-dark .flow-btn-secondary:hover { background: rgba(255,255,255,.11); color: #fff; }
html.flow-theme-dark .flow-premium-mini-btn { background: rgba(255,255,255,.07); color: #e5e7eb; border-color: rgba(255,255,255,.12); }
html.flow-theme-dark .flow-admin-plan-row { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
html.flow-theme-dark .flow-admin-module-check { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); color: #e5e7eb; }
html.flow-theme-dark .flow-admin-module-check:has(input:checked) { background: rgba(16,185,129,.13); color: #a7f3d0; border-color: rgba(16,185,129,.30); }

/* LOG TÉCNICO - Bloco 10.2 Etapa 3.5
   Data: 07/07/2026
   Alterações: adicionada camada de padronização premium para botões, modais, plano administrativo e letreiro. */


/* ============================================================
   Bloco 10.2 Etapa 3.5.1 - Padronização Global Final
   Data: 08/07/2026
   Objetivo:
   - Uniformizar modais operacionais, botões e formulários.
   - Ocultar barras de rolagem aparentes sem remover rolagem funcional.
   - Centralizar visual premium em um único design system.
============================================================ */
:root {
    --flow-premium-primary: #10b981;
    --flow-premium-primary-hover: #059669;
    --flow-premium-primary-soft: rgba(16, 185, 129, .10);
    --flow-premium-danger: #e11d48;
    --flow-premium-danger-soft: #fff1f2;
    --flow-premium-warning: #d97706;
    --flow-premium-warning-soft: #fffbeb;
    --flow-premium-neutral: #f1f5f9;
    --flow-premium-neutral-hover: #e2e8f0;
    --flow-premium-control-height: 44px;
    --flow-premium-modal-width: 720px;
    --flow-premium-modal-width-lg: 760px;
    --flow-premium-modal-max-height: min(88dvh, 760px);
    --flow-premium-modal-radius: 24px;
}

/* Esconde barras de rolagem em modais sem bloquear a rolagem */
#clientModal,
#campaignModal,
#saleModal,
#vendaModal,
#financeiroModal,
#contaPagarModal,
#cliReportsModal,
#clientDailyRouteModal,
#dailyRouteModal,
#dailyClientModal,
#actionModal,
#flowPremiumConfirmOverlay,
#flowAdminAnnouncementModal,
#flowAdminPlanModal,
#flowOnboardingView,
#userMenuDropdown {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#clientModal::-webkit-scrollbar,
#campaignModal::-webkit-scrollbar,
#saleModal::-webkit-scrollbar,
#vendaModal::-webkit-scrollbar,
#financeiroModal::-webkit-scrollbar,
#contaPagarModal::-webkit-scrollbar,
#cliReportsModal::-webkit-scrollbar,
#clientDailyRouteModal::-webkit-scrollbar,
#dailyRouteModal::-webkit-scrollbar,
#dailyClientModal::-webkit-scrollbar,
#actionModal::-webkit-scrollbar,
#flowPremiumConfirmOverlay::-webkit-scrollbar,
#flowAdminAnnouncementModal::-webkit-scrollbar,
#flowAdminPlanModal::-webkit-scrollbar,
#flowOnboardingView::-webkit-scrollbar,
#userMenuDropdown::-webkit-scrollbar,
#clientModal *::-webkit-scrollbar,
#campaignModal *::-webkit-scrollbar,
#saleModal *::-webkit-scrollbar,
#vendaModal *::-webkit-scrollbar,
#financeiroModal *::-webkit-scrollbar,
#contaPagarModal *::-webkit-scrollbar,
#cliReportsModal *::-webkit-scrollbar,
#clientDailyRouteModal *::-webkit-scrollbar,
#dailyRouteModal *::-webkit-scrollbar,
#dailyClientModal *::-webkit-scrollbar,
#flowAdminAnnouncementModal *::-webkit-scrollbar,
#flowAdminPlanModal *::-webkit-scrollbar,
#flowOnboardingView *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

#clientModal *,
#campaignModal *,
#saleModal *,
#vendaModal *,
#financeiroModal *,
#contaPagarModal *,
#cliReportsModal *,
#clientDailyRouteModal *,
#dailyRouteModal *,
#dailyClientModal *,
#flowAdminAnnouncementModal *,
#flowAdminPlanModal *,
#flowOnboardingView * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Overlay e centralização premium */
#clientModal,
#campaignModal,
#saleModal,
#vendaModal,
#financeiroModal,
#contaPagarModal,
#cliReportsModal,
#clientDailyRouteModal,
#dailyRouteModal,
#dailyClientModal,
#actionModal {
    background: rgba(2, 6, 23, .62) !important;
    backdrop-filter: blur(9px) saturate(1.05) !important;
    overflow: hidden !important;
}

#campaignModal,
#saleModal,
#vendaModal,
#financeiroModal,
#contaPagarModal,
#cliReportsModal,
#actionModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}

#clientModal > .flex,
#clientDailyRouteModal > .flex,
#dailyRouteModal > .min-h-screen,
#dailyClientModal > .min-h-screen {
    min-height: 100dvh !important;
    height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}

/* Painéis operacionais com padrão único */
#clientModal > .flex > div,
#campaignModal > div,
#saleModal > div,
#vendaModal > div,
#financeiroModal > div,
#contaPagarModal > div,
#clientDailyRouteModal > .flex > div,
#dailyRouteModal > .min-h-screen > div,
#dailyClientModal > .min-h-screen > div {
    width: min(94vw, var(--flow-premium-modal-width)) !important;
    max-width: var(--flow-premium-modal-width) !important;
    max-height: var(--flow-premium-modal-max-height) !important;
    overflow: hidden !important;
    border-radius: var(--flow-premium-modal-radius) !important;
    background: rgba(255, 255, 255, .985) !important;
    border: 1px solid rgba(226, 232, 240, .98) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .25) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#campaignModal > div,
#saleModal > div,
#vendaModal > div,
#financeiroModal > div {
    width: min(94vw, var(--flow-premium-modal-width-lg)) !important;
    max-width: var(--flow-premium-modal-width-lg) !important;
}

/* Cabeçalho dos modais */
#clientModal > .flex > div > div:first-child,
#campaignModal > div > div:first-child,
#saleModal > div > div:first-child,
#vendaModal > div > div:first-child,
#financeiroModal > div > div:first-child,
#contaPagarModal > div > div:first-child,
#clientDailyRouteModal > .flex > div > div:first-child,
#dailyRouteModal > .min-h-screen > div > div:first-child,
#dailyClientModal > .min-h-screen > div > div:first-child {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, .92) 100%) !important;
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
}

#clientModal h3,
#campaignModal h3,
#saleModal h3,
#vendaModal h3,
#financeiroModal h3,
#contaPagarModal h3,
#clientDailyRouteModal h3,
#dailyRouteModal h3,
#dailyClientModal h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    letter-spacing: -0.025em !important;
    color: #0f172a !important;
}

/* Corpo dos formulários operacionais */
#clientForm,
#campaignForm,
#saleForm,
#financeiroForm,
#finForm,
#contaPagarForm,
#clientDailyRouteForm,
#dailyRouteForm,
#dailyClientForm {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px 20px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#clientForm::-webkit-scrollbar,
#campaignForm::-webkit-scrollbar,
#saleForm::-webkit-scrollbar,
#financeiroForm::-webkit-scrollbar,
#finForm::-webkit-scrollbar,
#contaPagarForm::-webkit-scrollbar,
#clientDailyRouteForm::-webkit-scrollbar,
#dailyRouteForm::-webkit-scrollbar,
#dailyClientForm::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Rodapé dos formulários */
#clientForm > div:last-child,
#campaignForm > div:last-child,
#saleForm > div:last-child,
#financeiroForm > div:last-child,
#finForm > div:last-child,
#contaPagarForm > div:last-child,
#clientDailyRouteForm > div:last-child,
#dailyRouteForm > div:last-child,
#dailyClientForm > div:last-child {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.86), #ffffff 42%) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(226, 232, 240, .86) !important;
    padding-top: 14px !important;
    margin-bottom: -2px !important;
}

/* Labels, inputs, selects e textareas com mesma hierarquia */
#clientModal label,
#campaignModal label,
#saleModal label,
#vendaModal label,
#financeiroModal label,
#contaPagarModal label,
#clientDailyRouteModal label,
#dailyRouteModal label,
#dailyClientModal label,
#flowOnboardingView label {
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    color: #334155 !important;
    letter-spacing: .015em !important;
}

#clientModal input,
#clientModal select,
#clientModal textarea,
#campaignModal input,
#campaignModal select,
#campaignModal textarea,
#saleModal input,
#saleModal select,
#saleModal textarea,
#vendaModal input,
#vendaModal select,
#vendaModal textarea,
#financeiroModal input,
#financeiroModal select,
#financeiroModal textarea,
#contaPagarModal input,
#contaPagarModal select,
#contaPagarModal textarea,
#clientDailyRouteModal input,
#clientDailyRouteModal select,
#clientDailyRouteModal textarea,
#dailyRouteModal input,
#dailyRouteModal select,
#dailyRouteModal textarea,
#dailyClientModal input,
#dailyClientModal select,
#dailyClientModal textarea,
#flowOnboardingView input,
#flowOnboardingView select,
#flowOnboardingView textarea {
    min-height: var(--flow-premium-control-height) !important;
    border-radius: 14px !important;
    border: 1px solid #dbe4ef !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

#clientModal textarea,
#campaignModal textarea,
#saleModal textarea,
#vendaModal textarea,
#financeiroModal textarea,
#contaPagarModal textarea {
    min-height: 88px !important;
    resize: vertical !important;
}

#clientModal input:focus,
#clientModal select:focus,
#clientModal textarea:focus,
#campaignModal input:focus,
#campaignModal select:focus,
#campaignModal textarea:focus,
#saleModal input:focus,
#saleModal select:focus,
#saleModal textarea:focus,
#vendaModal input:focus,
#vendaModal select:focus,
#vendaModal textarea:focus,
#financeiroModal input:focus,
#financeiroModal select:focus,
#financeiroModal textarea:focus,
#contaPagarModal input:focus,
#contaPagarModal select:focus,
#contaPagarModal textarea:focus,
#flowOnboardingView input:focus,
#flowOnboardingView select:focus,
#flowOnboardingView textarea:focus {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, .78) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12) !important;
    outline: none !important;
}

#clientModal input[readonly],
#campaignModal input[readonly],
#saleModal input[readonly],
#vendaModal input[readonly],
#financeiroModal input[readonly],
#contaPagarModal input[readonly],
#clientModal input:disabled,
#campaignModal input:disabled,
#saleModal input:disabled,
#vendaModal input:disabled,
#financeiroModal input:disabled,
#contaPagarModal input:disabled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

/* Botões premium padronizados */
#content-workspace button,
#clientModal button,
#campaignModal button,
#saleModal button,
#vendaModal button,
#financeiroModal button,
#contaPagarModal button,
#flowOnboardingView button,
#userMenuDropdown button,
#userMenuDropdown a {
    font-family: var(--flow-font-ui) !important;
}

#content-workspace button[onclick*="openClientModal"],
#content-workspace button[onclick*="FlowVendasModule.openSaleModal"],
#content-workspace button[onclick*="FlowCampanhasModule.openModal"],
#content-workspace button[onclick*="FlowFinanceiroModule.openModal"],
#clientForm button[type="submit"],
#campaignForm button[type="submit"],
#saleForm button[type="submit"],
#financeiroForm button[type="submit"],
#finForm button[type="submit"],
#contaPagarForm button[type="submit"],
#clientDailyRouteForm button[type="submit"],
#dailyRouteForm button[type="submit"],
#dailyClientForm button[type="submit"],
#flowOnboardingView button[type="submit"],
.flow-btn-primary {
    min-height: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--flow-premium-primary), var(--flow-premium-primary-hover)) !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 0 18px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 14px 28px rgba(16, 185, 129, .20) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

#content-workspace button[onclick*="openClientModal"]:hover,
#content-workspace button[onclick*="FlowVendasModule.openSaleModal"]:hover,
#content-workspace button[onclick*="FlowCampanhasModule.openModal"]:hover,
#content-workspace button[onclick*="FlowFinanceiroModule.openModal"]:hover,
#clientForm button[type="submit"]:hover,
#campaignForm button[type="submit"]:hover,
#saleForm button[type="submit"]:hover,
#financeiroForm button[type="submit"]:hover,
#finForm button[type="submit"]:hover,
#contaPagarForm button[type="submit"]:hover,
.flow-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 38px rgba(16, 185, 129, .28) !important;
    filter: saturate(1.04) !important;
}

#clientForm button[onclick*="close"],
#campaignForm button[onclick*="close"],
#saleForm button[onclick*="close"],
#financeiroForm button[onclick*="close"],
#finForm button[onclick*="close"],
#contaPagarForm button[onclick*="close"],
#clientDailyRouteForm button[onclick*="close"],
#dailyRouteForm button[onclick*="close"],
#dailyClientForm button[onclick*="close"],
#content-workspace button[onclick*="clearFilters"],
.flow-btn-secondary {
    min-height: 44px !important;
    border-radius: 16px !important;
    background: var(--flow-premium-neutral) !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 18px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
}

#clientForm button[onclick*="close"]:hover,
#campaignForm button[onclick*="close"]:hover,
#saleForm button[onclick*="close"]:hover,
#financeiroForm button[onclick*="close"]:hover,
#finForm button[onclick*="close"]:hover,
#contaPagarForm button[onclick*="close"]:hover,
#content-workspace button[onclick*="clearFilters"]:hover,
.flow-btn-secondary:hover {
    background: var(--flow-premium-neutral-hover) !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

#btnDeleteSale,
#btnDeleteFin,
#btnDeleteClient,
#clientForm button[onclick*="delete"],
#saleForm button[onclick*="delete"],
#financeiroForm button[onclick*="delete"],
#finForm button[onclick*="delete"],
.flow-btn-danger {
    min-height: 44px !important;
    border-radius: 16px !important;
    background: var(--flow-premium-danger-soft) !important;
    color: var(--flow-premium-danger) !important;
    border: 1px solid rgba(225, 29, 72, .20) !important;
    padding: 0 18px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
}

#btnDeleteCamp,
.flow-btn-warning {
    min-height: 44px !important;
    border-radius: 16px !important;
    background: var(--flow-premium-warning-soft) !important;
    color: var(--flow-premium-warning) !important;
    border: 1px solid rgba(217, 119, 6, .22) !important;
    padding: 0 18px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
}

/* Botão X dos modais */
#clientModal > .flex > div > div:first-child button,
#campaignModal > div > div:first-child button,
#saleModal > div > div:first-child button,
#vendaModal > div > div:first-child button,
#financeiroModal > div > div:first-child button,
#contaPagarModal > div > div:first-child button,
#clientDailyRouteModal > .flex > div > div:first-child button,
#dailyRouteModal > .min-h-screen > div > div:first-child button,
#dailyClientModal > .min-h-screen > div > div:first-child button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: rgba(241, 245, 249, .82) !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    color: #64748b !important;
    box-shadow: none !important;
}

#clientModal > .flex > div > div:first-child button:hover,
#campaignModal > div > div:first-child button:hover,
#saleModal > div > div:first-child button:hover,
#vendaModal > div > div:first-child button:hover,
#financeiroModal > div > div:first-child button:hover,
#contaPagarModal > div > div:first-child button:hover,
#clientDailyRouteModal > .flex > div > div:first-child button:hover,
#dailyRouteModal > .min-h-screen > div > div:first-child button:hover,
#dailyClientModal > .min-h-screen > div > div:first-child button:hover {
    color: #e11d48 !important;
    background: #fff1f2 !important;
    border-color: rgba(225, 29, 72, .18) !important;
}

/* Padronização do modal de primeiro acesso */
#flowOnboardingView {
    background: radial-gradient(circle at top left, rgba(16,185,129,.10), transparent 32%), linear-gradient(135deg, #f8fafc, #edf5f4) !important;
}

#flowOnboardingView > div,
#flowOnboardingView .flow-onboarding-card {
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #0f172a !important;
    border: 1px solid rgba(226, 232, 240, .96) !important;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .18) !important;
}

/* Tema escuro preservado com o mesmo padrão */
html.flow-theme-dark #clientModal > .flex > div,
html.flow-theme-dark #campaignModal > div,
html.flow-theme-dark #saleModal > div,
html.flow-theme-dark #vendaModal > div,
html.flow-theme-dark #financeiroModal > div,
html.flow-theme-dark #contaPagarModal > div,
html.flow-theme-dark #clientDailyRouteModal > .flex > div,
html.flow-theme-dark #dailyRouteModal > .min-h-screen > div,
html.flow-theme-dark #dailyClientModal > .min-h-screen > div {
    background: rgba(16, 16, 16, .98) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 30px 95px rgba(0, 0, 0, .58) !important;
}

html.flow-theme-dark #clientModal > .flex > div > div:first-child,
html.flow-theme-dark #campaignModal > div > div:first-child,
html.flow-theme-dark #saleModal > div > div:first-child,
html.flow-theme-dark #vendaModal > div > div:first-child,
html.flow-theme-dark #financeiroModal > div > div:first-child,
html.flow-theme-dark #contaPagarModal > div > div:first-child,
html.flow-theme-dark #clientDailyRouteModal > .flex > div > div:first-child,
html.flow-theme-dark #dailyRouteModal > .min-h-screen > div > div:first-child,
html.flow-theme-dark #dailyClientModal > .min-h-screen > div > div:first-child {
    background: linear-gradient(180deg, #101010 0%, #151515 100%) !important;
    border-bottom-color: rgba(255,255,255,.12) !important;
}

html.flow-theme-dark #clientModal h3,
html.flow-theme-dark #campaignModal h3,
html.flow-theme-dark #saleModal h3,
html.flow-theme-dark #vendaModal h3,
html.flow-theme-dark #financeiroModal h3,
html.flow-theme-dark #contaPagarModal h3,
html.flow-theme-dark #clientDailyRouteModal h3,
html.flow-theme-dark #dailyRouteModal h3,
html.flow-theme-dark #dailyClientModal h3 {
    color: #f8fafc !important;
}

html.flow-theme-dark #clientModal label,
html.flow-theme-dark #campaignModal label,
html.flow-theme-dark #saleModal label,
html.flow-theme-dark #vendaModal label,
html.flow-theme-dark #financeiroModal label,
html.flow-theme-dark #contaPagarModal label,
html.flow-theme-dark #clientDailyRouteModal label,
html.flow-theme-dark #dailyRouteModal label,
html.flow-theme-dark #dailyClientModal label {
    color: #d8d8d8 !important;
}

html.flow-theme-dark #clientModal input,
html.flow-theme-dark #clientModal select,
html.flow-theme-dark #clientModal textarea,
html.flow-theme-dark #campaignModal input,
html.flow-theme-dark #campaignModal select,
html.flow-theme-dark #campaignModal textarea,
html.flow-theme-dark #saleModal input,
html.flow-theme-dark #saleModal select,
html.flow-theme-dark #saleModal textarea,
html.flow-theme-dark #vendaModal input,
html.flow-theme-dark #vendaModal select,
html.flow-theme-dark #vendaModal textarea,
html.flow-theme-dark #financeiroModal input,
html.flow-theme-dark #financeiroModal select,
html.flow-theme-dark #financeiroModal textarea,
html.flow-theme-dark #contaPagarModal input,
html.flow-theme-dark #contaPagarModal select,
html.flow-theme-dark #contaPagarModal textarea {
    background-color: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #f8fafc !important;
}

html.flow-theme-dark #clientModal input:focus,
html.flow-theme-dark #clientModal select:focus,
html.flow-theme-dark #clientModal textarea:focus,
html.flow-theme-dark #campaignModal input:focus,
html.flow-theme-dark #campaignModal select:focus,
html.flow-theme-dark #campaignModal textarea:focus,
html.flow-theme-dark #saleModal input:focus,
html.flow-theme-dark #saleModal select:focus,
html.flow-theme-dark #saleModal textarea:focus,
html.flow-theme-dark #vendaModal input:focus,
html.flow-theme-dark #vendaModal select:focus,
html.flow-theme-dark #vendaModal textarea:focus,
html.flow-theme-dark #financeiroModal input:focus,
html.flow-theme-dark #financeiroModal select:focus,
html.flow-theme-dark #financeiroModal textarea:focus,
html.flow-theme-dark #contaPagarModal input:focus,
html.flow-theme-dark #contaPagarModal select:focus,
html.flow-theme-dark #contaPagarModal textarea:focus {
    background-color: rgba(255,255,255,.075) !important;
    border-color: rgba(16,185,129,.58) !important;
    box-shadow: 0 0 0 4px rgba(16,185,129,.13) !important;
}

html.flow-theme-dark #clientForm > div:last-child,
html.flow-theme-dark #campaignForm > div:last-child,
html.flow-theme-dark #saleForm > div:last-child,
html.flow-theme-dark #financeiroForm > div:last-child,
html.flow-theme-dark #finForm > div:last-child,
html.flow-theme-dark #contaPagarForm > div:last-child {
    background: linear-gradient(180deg, rgba(16,16,16,.86), #101010 42%) !important;
    border-top-color: rgba(255,255,255,.12) !important;
}

html.flow-theme-dark #flowOnboardingView {
    background: radial-gradient(circle at top left, rgba(16,185,129,.11), transparent 34%), linear-gradient(135deg, #050505, #101010) !important;
}

html.flow-theme-dark #flowOnboardingView > div,
html.flow-theme-dark #flowOnboardingView .flow-onboarding-card {
    background: rgba(16,16,16,.98) !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 32px 90px rgba(0,0,0,.55) !important;
}

@media (max-width: 768px) {
    :root {
        --flow-premium-modal-width: 100%;
        --flow-premium-modal-width-lg: 100%;
        --flow-premium-modal-max-height: calc(100dvh - 18px);
    }

    #campaignModal,
    #saleModal,
    #vendaModal,
    #financeiroModal,
    #contaPagarModal,
    #cliReportsModal,
    #actionModal {
        align-items: flex-start !important;
        padding: 9px !important;
    }

    #clientModal > .flex,
    #clientDailyRouteModal > .flex,
    #dailyRouteModal > .min-h-screen,
    #dailyClientModal > .min-h-screen {
        align-items: flex-start !important;
        padding: 9px !important;
    }

    #clientModal > .flex > div,
    #campaignModal > div,
    #saleModal > div,
    #vendaModal > div,
    #financeiroModal > div,
    #contaPagarModal > div,
    #clientDailyRouteModal > .flex > div,
    #dailyRouteModal > .min-h-screen > div,
    #dailyClientModal > .min-h-screen > div {
        border-radius: 20px !important;
        max-height: calc(100dvh - 18px) !important;
    }
}

/* LOG TÉCNICO - Bloco 10.2 Etapa 3.5.1
   Data: 08/07/2026
   Alterações:
   - Padronizados modais operacionais de Clientes, Campanhas, Vendas, Financeiro e Rotas.
   - Ocultadas barras de rolagem aparentes em modais, mantendo rolagem funcional.
   - Uniformizados botões primários, secundários e de risco.
   - Uniformizados labels, campos, radius, fonte, sombra e cabeçalhos.
   - Refinado modal de primeiro acesso e preservado tema claro/escuro. */


/* ============================================================
   Bloco 10.2 Etapa 3.5.2 - Clean SaaS Premium
   - Tema claro obrigatório nesta fase.
   - Reforço visual do onboarding e ocultação de scrollbars aparentes.
   ============================================================ */
html, html.flow-theme-light, body, body.flow-theme-light {
    color-scheme: light !important;
}
html.flow-theme-dark, body.flow-theme-dark {
    color-scheme: light !important;
}
.flow-onboarding-overlay {
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: blur(16px) !important;
}
.flow-onboarding-card {
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    box-shadow: 0 34px 100px rgba(15,23,42,.22) !important;
    color: #0f172a !important;
}
.flow-onboarding-head {
    background: radial-gradient(circle at top right,rgba(16,185,129,.10),transparent 34%),linear-gradient(135deg,#ffffff,#f8fafc) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.flow-onboarding-head h2,
.flow-onboarding-user h3,
.flow-blocked-card h2 {
    color: #0f172a !important;
}
.flow-onboarding-head p,
.flow-onboarding-user p,
.flow-blocked-card p {
    color: #475569 !important;
}
.flow-onboarding-user,
.flow-optin {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
.flow-onboarding-field label {
    color: #334155 !important;
}
.flow-onboarding-field input {
    background: #fff !important;
    color: #0f172a !important;
    border-color: #dbe4ef !important;
}
.flow-onboarding-card,
.flow-saas-modal-card,
#clientModal > .flex > div,
#campaignModal > div,
#saleModal > div,
#vendaModal > div,
#financeiroModal > div,
#contaPagarModal > div {
    scrollbar-width: none !important;
}
.flow-onboarding-card::-webkit-scrollbar,
.flow-saas-modal-card::-webkit-scrollbar,
#clientModal > .flex > div::-webkit-scrollbar,
#campaignModal > div::-webkit-scrollbar,
#saleModal > div::-webkit-scrollbar,
#vendaModal > div::-webkit-scrollbar,
#financeiroModal > div::-webkit-scrollbar,
#contaPagarModal > div::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ============================================================
   Bloco 10.2 Etapa 3.5.5 - Ajustes finais SaaS
   - Botão sair premium no menu lateral.
   - Gestão de dados em submódulos.
   - Botões de configuração padronizados.
   ============================================================ */
#btnLogout {
    letter-spacing: .02em !important;
}
#btnLogout:hover {
    transform: translateY(-1px) !important;
}
.flow-data-action-group {
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 14px 36px rgba(15,23,42,.045);
}
.flow-data-action-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.flow-data-action-head h4 {
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: -.01em;
    margin: 0 0 2px;
}
.flow-data-action-head p {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}
.flow-data-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.flow-data-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    transition: all .18s ease;
    box-shadow: 0 8px 18px rgba(15,23,42,.035);
}
.flow-data-button:hover {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15,23,42,.07);
}
.flow-data-button-green { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.flow-data-button-blue { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.flow-data-button-dark { background: #0f172a; border-color: #0f172a; color: #ffffff; }
.flow-data-button-purple { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.flow-data-button-danger { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.flow-data-danger-zone {
    border-color: #fecdd3;
    background: linear-gradient(180deg,#fff7f7 0%,#fff1f2 100%);
}

/* ============================================================
   Bloco 10.3 Etapa 1 - Planos comerciais detalhados
   Data: 09/07/2026
   Objetivo: tela Meu Plano com comparativo SaaS premium e preparação de checkout.
============================================================ */
.flow-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #059669;
    background: rgba(16, 185, 129, .09);
    border: 1px solid rgba(16, 185, 129, .16);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.flow-plan-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 52px rgba(15, 23, 42, .06);
}

.flow-plan-hero h1 {
    color: #0f172a;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -.045em;
    margin-top: 12px;
}

.flow-plan-hero p:not(.flow-section-kicker) {
    color: #64748b;
    font-size: 14px;
    font-weight: 750;
    margin-top: 8px;
    max-width: 720px;
}

.flow-current-plan-card,
.flow-plan-usage-card,
.flow-plan-comparison-card,
.flow-plan-checkout-prep {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 26px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
}

.flow-current-plan-card {
    min-width: min(100%, 330px);
    padding: 18px;
}

.flow-current-plan-card > p {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.flow-current-plan-card strong {
    display: block;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.flow-current-plan-card span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-top: 1px;
}

.flow-current-plan-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flow-plan-usage-card { padding: 18px; }

.flow-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.flow-billing-toggle button {
    min-width: 92px;
    min-height: 38px;
    border-radius: 14px;
    color: #64748b;
    font-size: 12px;
    font-weight: 950;
    transition: all .18s ease;
}

.flow-billing-toggle button.active {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .18);
}

.flow-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.93));
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 30px;
    padding: 22px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .065);
    overflow: hidden;
}

.flow-plan-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--plan-color, #10b981);
    opacity: .95;
}

.flow-plan-card.is-featured {
    border-color: rgba(16, 185, 129, .42);
    box-shadow: 0 26px 70px rgba(16, 185, 129, .14);
    transform: translateY(-2px);
}

.flow-plan-featured-badge {
    position: absolute;
    top: 15px;
    right: 16px;
    z-index: 2;
    background: #10b981;
    color: #fff;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(16, 185, 129, .22);
}

.flow-plan-card-kicker {
    display: inline-flex;
    border: 1px solid;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.flow-plan-card-title {
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.flow-plan-card-desc {
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    margin-top: 8px;
}

.flow-plan-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 20px;
    flex-shrink: 0;
    font-size: 18px;
}

.flow-plan-price-box {
    border: 1px solid rgba(226, 232, 240, .8);
    background: rgba(255,255,255,.78);
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 14px;
}

.flow-plan-price {
    color: #0f172a;
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.flow-plan-cycle {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 850;
    margin-top: 7px;
}

.flow-plan-highlight-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 15px;
}

.flow-plan-highlight-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, .08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .16);
    border-radius: 999px;
    padding: 7px 9px;
    font-size: 10px;
    font-weight: 950;
}

.flow-plan-feature-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 15px;
    flex: 1;
}

.flow-plan-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.42;
}

.flow-plan-feature-list i { color: #10b981; margin-top: 2px; }

.flow-plan-blocked-box,
.flow-plan-premium-box {
    border-radius: 20px;
    padding: 13px;
    margin-bottom: 15px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.flow-plan-blocked-box {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.flow-plan-blocked-box p {
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 3px;
}

.flow-plan-premium-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.flow-plan-cta {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 17px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .20);
    transition: all .18s ease;
}

.flow-plan-cta:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, .24);
}

.flow-plan-cta.is-current,
.flow-plan-cta:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
    box-shadow: none;
}

.flow-plan-alert-card,
.flow-plan-privileged-card,
.flow-plan-checkout-prep {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border-radius: 28px;
    padding: 20px;
}

.flow-plan-alert-card {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #065f46;
}

.flow-plan-privileged-card {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #5b21b6;
}

.flow-plan-alert-card > i,
.flow-plan-privileged-card > i,
.flow-plan-checkout-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    flex-shrink: 0;
}

.flow-plan-alert-card > i { background: #10b981; color: #fff; }
.flow-plan-privileged-card > i { background: #8b5cf6; color: #fff; }
.flow-plan-checkout-icon { background: #e0f2fe; color: #0284c7; }

.flow-plan-alert-card h2,
.flow-plan-privileged-card h2,
.flow-plan-checkout-prep h2 {
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.flow-plan-alert-card p,
.flow-plan-privileged-card p {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
    margin-top: 4px;
}

.flow-plan-comparison-card { padding: 22px; }

.flow-plan-comparison-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
}

.flow-plan-comparison-table th,
.flow-plan-comparison-table td {
    padding: 14px 15px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    vertical-align: top;
}

.flow-plan-comparison-table th {
    background: #f8fafc;
    color: #0f172a;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .09em;
    text-align: left;
}

.flow-plan-comparison-table td {
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    background: #fff;
}

.flow-plan-comparison-table td:first-child {
    color: #0f172a;
    font-weight: 950;
    min-width: 190px;
}

.flow-plan-comparison-table td:first-child i {
    color: #10b981;
    margin-right: 9px;
}

.flow-clean-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.flow-clean-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (max-width: 1024px) {
    .flow-plan-hero { align-items: stretch; flex-direction: column; }
    .flow-current-plan-card { width: 100%; }
}

/* LOG TÉCNICO - Bloco 10.3 Etapa 1
   Data: 09/07/2026
   Alterações: adicionada camada visual da tela Meu Plano com cards, comparativo e preparação de checkout. */

/* ============================================================
   Bloco 10.3 Etapa 2 - Checkout Asaas
   ============================================================ */
.flow-plan-checkout-live {
    border-color: rgba(16, 185, 129, .18) !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(16, 185, 129, .12), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fffc 100%) !important;
}

.flow-checkout-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.flow-checkout-methods span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, .18);
    background: rgba(16, 185, 129, .08);
    color: #047857;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .02em;
}

.flow-plan-cta:not(.is-current) {
    position: relative;
    overflow: hidden;
}

.flow-plan-cta:not(.is-current)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
    transform: translateX(-120%);
    transition: transform .65s ease;
}

.flow-plan-cta:not(.is-current):hover::after {
    transform: translateX(120%);
}

/* LOG TÉCNICO - Bloco 10.3 Etapa 2
   Data: 09/07/2026
   Alterações: adicionada camada visual do checkout seguro Asaas na tela Meu Plano. */


/* ============================================================
   Bloco 10.3 Etapa 3.2 - Refinamento do menu do usuário
   ============================================================ */
.flow-sidebar-logout-btn {
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background:
        radial-gradient(circle at 14% 20%, rgba(244, 63, 94, 0.20), transparent 32%),
        radial-gradient(circle at 92% 80%, rgba(16, 185, 129, 0.28), transparent 36%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96) 48%, rgba(6, 78, 59, 0.94)) !important;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.flow-sidebar-logout-btn::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 38%, rgba(16,185,129,.12));
    opacity: .92;
    pointer-events: none;
}
.flow-sidebar-logout-btn:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(110, 231, 183, 0.35) !important;
    box-shadow: 0 22px 52px rgba(6, 95, 70, 0.23), 0 16px 36px rgba(2, 6, 23, 0.36) !important;
}
.flow-sidebar-logout-btn span span:last-child {
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    color: #f8fafc;
}
.flow-sidebar-logout-btn span span:first-child {
    background: rgba(255,255,255,.11) !important;
    color: #fecdd3 !important;
}