/* @import url('https://fonts.cdnfonts.com/css/fe-font'); */ /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */ /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap'); */ @import "tailwindcss"; @plugin "tailwindcss-animate"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); } :root { /* Border Radius Base - Definido globalmente para garantir arredondamento */ --radius: 1vw; /* TIPOGRAFIA MODULAR E PERFORMÁTICA 1. --font-stack-system: Fontes nativas do sistema (Zero delay, sem layout shift) 2. --font-main: Variável mestra que pode ser sobrescrita por temas */ --font-stack-system: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-main: var(--font-stack-system); /* Alias para manter compatibilidade com classes utilitárias do Tailwind se necessário, mas o ideal é usar font-family: var(--font-main) no body */ --font-sans: var(--font-main); --font-mono: ui-monospace, 'Cascadia Code', monospace; --text-body: clamp(0.875rem, 1vw, 1rem); --text-label: clamp(0.875rem, 0.9vw, 0.9375rem); --text-caption: 0.875rem; --text-table: clamp(0.875rem, 0.9vw, 0.9375rem); --text-subtitle: 1.125rem; --text-title: clamp(1.5rem, 3vw, 2.25rem); --text-title-lg: clamp(1.5rem, 2.8vw, 2.25rem); --font-weight-body: 400; --font-weight-label: 500; --font-weight-title: 600; /* ... outras variáveis ... */ /* Paleta Workspace - Padrão Claro */ --workspace-sec-1-light: #22bb6c; --workspace-sec-2-light: #22c0a3; --workspace-sec-3-light: #26b1c7; --workspace-sec-4-light: #26c03a; --workspace-sec-5-light: #003153; --workspace-sec-6-light: #285d2a; /* Paleta Workspace - Padrão Escuro */ --workspace-sec-1-dark: #115834; --workspace-sec-2-dark: #125f51; --workspace-sec-3-dark: #1B7C8C; --workspace-sec-4-dark: #105018; --workspace-sec-5-dark: #0d253a; --workspace-sec-6-dark: #105018; /* Paleta Workspace - Ausência */ --workspace-empty-body: #c6c6c6; --workspace-empty-panel: #ebebeb; --workspace-empty-bg: #9a9a9a; /* Default light theme colors for Shadcn */ --background: #ffffff; --foreground: #020617; --card: #ffffff; --card-foreground: #020617; --popover: #ffffff; --popover-foreground: #020617; --primary: #22bb6c; --primary-foreground: #f8fafc; --secondary: #f1f5f9; --secondary-foreground: #0f172a; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #f1f5f9; --accent-foreground: #0f172a; --destructive: #fb7185; /* Soft Rose 400 */ --destructive-foreground: #f8fafc; --border: #e2e8f0; --input: #e2e8f0; --ring: #22bb6c; /* Soft Red Palette Helpers */ --soft-red: #fb7185; --soft-red-muted: #fecdd3; --soft-red-deep: #e11d48; } .workspace-theme { /* font-family: 'Lato', sans-serif; removed for standardization */ } .dark .workspace-theme { --background: var(--workspace-sec-5-dark); --foreground: #ffffff; --card: #151515; --card-foreground: #e0e0e0; --popover: #1a1a1a; --popover-foreground: #ffffff; --primary: var(--workspace-sec-1-light); --primary-foreground: #ffffff; --secondary: var(--workspace-sec-5-dark); --secondary-foreground: #ffffff; --muted: #1e1e1e; --muted-foreground: #a0a0a0; --accent: #2a2a2a; --accent-foreground: #ffffff; --destructive: #fb7185; --border: rgba(255, 255, 255, 0.05); --input: rgba(255, 255, 255, 0.08); --ring: var(--workspace-sec-3-light); /* Garantindo que o background do body dentro do workspace-theme em dark mode use a cor da paleta */ /* background-color: var(--workspace-sec-5-dark); */ color: #ffffff; } /* RH Theme */ .theme-rh { --radius: 0.625rem; ---primary: oklch(0.627 0.194 149.214); --primary: var(---primary); --primary-glow: oklch(0.627 0.194 149.214 / 15%); --ring: var(---primary); } .dark.theme-rh { ---primary: oklch(0.705 0.213 146.067); --primary: var(---primary); --primary-glow: oklch(0.705 0.213 146.067 / 30%); --ring: var(---primary); } /* Font Standardization for RH and GR */ .theme-rh, .theme-rh *, [class*="gr-"], [class*="gr-"] * { font-family: var(--font-main) !important; } /* Scoped Themes */ .theme-frota { --radius: 0.625rem; ---primary: oklch(0.627 0.194 149.214); /* Emerald 500 */ --primary: var(---primary); --primary-glow: oklch(0.627 0.194 149.214 / 15%); --ring: var(---primary); } .theme-financeiro { ---primary: oklch(0.627 0.194 149.214); /* Emerald 500 */ --primary: var(---primary); --primary-glow: oklch(0.627 0.194 149.214 / 15%); --ring: var(---primary); /* Dashboard Theme Colors - Adaptive */ --dashboard-bg: #f8fafc; --dashboard-card: #ffffff; --dashboard-border: #e2e8f0; --dashboard-text-muted: #64748b; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); /* Default for dark mode if not scoped */ --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.65 0.18 20); /* Softer red/rose */ --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); } .dark.theme-frota { --radius: 0.625rem; ---primary: oklch(0.705 0.213 146.067); /* Emerald 400 for dark mode */ --primary: var(---primary); --primary-glow: oklch(0.705 0.213 146.067 / 30%); --ring: var(---primary); } .dark.theme-financeiro { ---primary: oklch(0.705 0.213 146.067); /* Emerald 400 for dark mode */ --primary: var(---primary); --primary-glow: oklch(0.705 0.213 146.067 / 30%); --ring: var(---primary); --dashboard-bg: #030712; --dashboard-card: #0b1120; --dashboard-border: #1e293b; --dashboard-text-muted: #94a3b8; } .theme-cnab { --radius: 0.625rem; ---primary: oklch(0.627 0.194 149.214); --primary: var(---primary); --primary-glow: oklch(0.627 0.194 149.214 / 15%); --ring: var(---primary); } .dark.theme-cnab { ---primary: oklch(0.705 0.213 146.067); --primary: var(---primary); --primary-glow: oklch(0.705 0.213 146.067 / 30%); --ring: var(---primary); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; letter-spacing: 0.02em; } /* Custom subtle scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 20px; transition: background 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* Firefox support */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } /* Scrollbar oculto para tabs horizontais */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Garante que o tooltip do Recharts fique SEMPRE acima dos overlays dos gráficos */ .recharts-tooltip-wrapper { z-index: 9999 !important; } /* Native Select Dark Mode Fix */ select { @apply bg-white text-slate-900 border-slate-200 transition-all; } .dark select { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.1) !important; } .dark select option { background-color: #1a1a1a; color: #ffffff; } } .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); }