/* Painel BHT — visual v2 (prévia, 2026-10-06).
   Só carrega com body.ui-v2 (link ?ui=v2, cookie por navegador). ?ui=off volta ao atual.
   Ideia: tirar a cara de "Laravel Breeze padrão / sistema anos 2000" sem mudar nenhuma tela:
   fonte própria, fundo neutro, bordas finas no lugar de sombras, roxo do logo só no que está ativo. */

@font-face { font-family: 'IBM Plex Sans'; src: url('plex-sans.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }

body.ui-v2 {
	--v2-bg: #f4f4f2;
	--v2-surface: #ffffff;
	--v2-ink: #18171c;
	--v2-text: #3b3a42;
	--v2-muted: #6e6c78;
	--v2-line: #e3e2e7;
	--v2-line-strong: #cfcdd6;
	--v2-brand: #4b2bb8;      /* roxo do logo */
	--v2-brand-soft: #efecfb;
	--v2-green: #17824a;
	--v2-radius: 10px;
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
	font-feature-settings: "tnum" 1; /* números alinhados nas tabelas */
	color: var(--v2-text);
	background: var(--v2-bg);
}
body.ui-v2:not(.ui-v2-keep-main) .font-sans,
body.ui-v2:not(.ui-v2-keep-main) button, body.ui-v2:not(.ui-v2-keep-main) input, body.ui-v2:not(.ui-v2-keep-main) select, body.ui-v2:not(.ui-v2-keep-main) textarea { font-family: inherit !important; }

/* fundo geral */
body.ui-v2:not(.ui-v2-keep-main) .bg-gray-100 { background-color: var(--v2-bg) !important; }
body.ui-v2:not(.ui-v2-keep-main) .min-h-screen.bg-gray-100 { background: var(--v2-bg) !important; }

/* títulos */
body.ui-v2:not(.ui-v2-keep-main) :is(h1, h2, h3):not(.viz-root *) { color: var(--v2-ink); letter-spacing: -0.01em; }
body.ui-v2 header.bg-white { background: transparent !important; box-shadow: none !important; }
body.ui-v2 header.bg-white > div { padding-top: 28px !important; padding-bottom: 8px !important; }
body.ui-v2 header h2 { font-size: 26px !important; font-weight: 600 !important; color: var(--v2-ink) !important; }

/* barra de navegação: escura, compacta, item ativo em pílula */
body.ui-v2 nav.bg-white { background: var(--v2-ink) !important; border-bottom: 0 !important; }
body.ui-v2 nav.bg-white .h-16 { height: 60px !important; }
body.ui-v2 nav.bg-white .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 4px !important; }
body.ui-v2 nav.bg-white a.inline-flex,
body.ui-v2 nav.bg-white button.inline-flex {
	border-bottom: 0 !important;
	padding: 7px 12px !important;
	margin: auto 0;
	height: auto !important;
	border-radius: 8px;
	color: rgba(255,255,255,.72) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
}
body.ui-v2 nav.bg-white a.inline-flex:hover,
body.ui-v2 nav.bg-white button.inline-flex:hover { color: #fff !important; background: rgba(255,255,255,.08); }
body.ui-v2 nav.bg-white a.inline-flex.border-indigo-400,
body.ui-v2 nav.bg-white button.inline-flex.border-indigo-400 { color: #fff !important; background: rgba(255,255,255,.14); }
body.ui-v2 nav.bg-white #usd-today-badge { background: rgba(255,255,255,.1) !important; color: #fff !important; }
body.ui-v2 nav.bg-white #usd-today-badge span:first-child { display: none; } /* emoji 💵 */
body.ui-v2 nav.bg-white .text-gray-500,
body.ui-v2 nav.bg-white .text-gray-600 { color: rgba(255,255,255,.75) !important; }
body.ui-v2 nav.bg-white button.bg-white { background: transparent !important; }
body.ui-v2 nav.bg-white svg.text-gray-400, body.ui-v2 nav.bg-white .text-gray-400 { color: rgba(255,255,255,.75) !important; }
/* logo sobre fundo escuro */
body.ui-v2 nav.bg-white .shrink-0 svg, body.ui-v2 nav.bg-white .shrink-0 img { filter: brightness(1.05); }
/* menu do celular */
body.ui-v2 nav.bg-white .sm\:hidden.bg-white,
body.ui-v2 nav.bg-white [class*="sm:hidden"] { background: var(--v2-ink); }
body.ui-v2 nav.bg-white [class*="sm:hidden"] a { color: rgba(255,255,255,.85) !important; border-left-color: transparent !important; }
body.ui-v2 nav.bg-white [class*="sm:hidden"] a.border-indigo-400 { background: rgba(255,255,255,.12) !important; color: #fff !important; }
body.ui-v2 nav.bg-white [class*="sm:hidden"] .border-gray-200 { border-color: rgba(255,255,255,.12) !important; }
body.ui-v2 nav.bg-white [class*="sm:hidden"] .text-gray-800 { color: #fff !important; }

/* menus suspensos (continuam brancos) */
body.ui-v2:not(.ui-v2-keep-main) .rounded-md.ring-1 { border-radius: var(--v2-radius) !important; box-shadow: 0 12px 32px rgba(24,23,28,.14) !important; border: 1px solid var(--v2-line); }
body.ui-v2:not(.ui-v2-keep-main) .rounded-md.ring-1 a { font-size: 14.5px !important; color: var(--v2-text) !important; }
body.ui-v2:not(.ui-v2-keep-main) .rounded-md.ring-1 a:hover { background: var(--v2-brand-soft) !important; color: var(--v2-ink) !important; }

/* cartões: borda fina no lugar de sombra */
body.ui-v2:not(.ui-v2-keep-main) .bg-white.shadow-sm,
body.ui-v2:not(.ui-v2-keep-main) .bg-white.shadow,
body.ui-v2:not(.ui-v2-keep-main) .bg-white.shadow-md,
body.ui-v2:not(.ui-v2-keep-main) .bg-white.shadow-lg,
body.ui-v2:not(.ui-v2-keep-main) .bg-white.sm\:rounded-lg,
body.ui-v2:not(.ui-v2-keep-main) .bg-white.rounded-lg {
	box-shadow: none !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius) !important;
}

/* botões: sem caixa alta e letras espaçadas */
body.ui-v2:not(.ui-v2-keep-main) button.uppercase, body.ui-v2:not(.ui-v2-keep-main) a.uppercase, body.ui-v2:not(.ui-v2-keep-main) .uppercase.tracking-widest {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}
body.ui-v2:not(.ui-v2-keep-main) .bg-gray-800 { background-color: var(--v2-ink) !important; }
body.ui-v2:not(.ui-v2-keep-main) .bg-gray-800:hover, body.ui-v2:not(.ui-v2-keep-main) .hover\:bg-gray-700:hover { background-color: var(--v2-brand) !important; }
body.ui-v2:not(.ui-v2-keep-main) .bg-blue-600, body.ui-v2:not(.ui-v2-keep-main) .bg-indigo-600 { background-color: var(--v2-brand) !important; }
body.ui-v2:not(.ui-v2-keep-main) .hover\:bg-blue-700:hover, body.ui-v2:not(.ui-v2-keep-main) .hover\:bg-indigo-700:hover { background-color: #3a2190 !important; }
body.ui-v2:not(.ui-v2-keep-main) .text-blue-600, body.ui-v2:not(.ui-v2-keep-main) .text-indigo-600 { color: var(--v2-brand) !important; }
body.ui-v2:not(.ui-v2-keep-main) button.rounded-md, body.ui-v2:not(.ui-v2-keep-main) a.rounded-md.inline-flex { border-radius: 8px !important; }

/* campos */
body.ui-v2:not(.ui-v2-keep-main) input[type=text]:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) input[type=email]:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) input[type=password]:not(.viz-root *),
body.ui-v2:not(.ui-v2-keep-main) input[type=number]:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) input[type=date]:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) input[type=search]:not(.viz-root *),
body.ui-v2:not(.ui-v2-keep-main) select:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) textarea:not(.viz-root *) {
	border-color: var(--v2-line-strong) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}
body.ui-v2:not(.ui-v2-keep-main) input:focus:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) select:focus:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) textarea:focus:not(.viz-root *) {
	border-color: var(--v2-brand) !important;
	box-shadow: 0 0 0 3px rgba(75,43,184,.15) !important;
	outline: none !important;
}
body.ui-v2:not(.ui-v2-keep-main) .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(75,43,184,.35) !important; }
body.ui-v2:not(.ui-v2-keep-main) label.text-gray-700:not(.viz-root *), body.ui-v2:not(.ui-v2-keep-main) label:not(.viz-root *) { color: var(--v2-ink); }
body.ui-v2:not(.ui-v2-keep-main) .text-indigo-600[type=checkbox] { color: var(--v2-brand) !important; }

/* tabelas HTML comuns */
body.ui-v2:not(.ui-v2-keep-main) table:not(.viz-root table) thead th, body.ui-v2:not(.ui-v2-keep-main) table:not(.viz-root table) thead td {
	background: #f7f7f5 !important;
	color: var(--v2-muted) !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 13px !important;
	border-bottom: 1px solid var(--v2-line) !important;
}
body.ui-v2:not(.ui-v2-keep-main) table:not(.viz-root table) tbody tr:hover > td { background-color: #faf9fd; }
body.ui-v2:not(.ui-v2-keep-main) .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--v2-line) !important; }

/* selos/avisos: cantos e cores mais calmas */
body.ui-v2:not(.ui-v2-keep-main) .rounded-full.bg-gray-100 { background: #ecebef !important; }
body.ui-v2:not(.ui-v2-keep-main) .bg-green-50, body.ui-v2:not(.ui-v2-keep-main) .bg-green-100 { background: #e9f6ee !important; }
body.ui-v2:not(.ui-v2-keep-main) .text-green-600, body.ui-v2:not(.ui-v2-keep-main) .text-green-700, body.ui-v2:not(.ui-v2-keep-main) .text-green-800 { color: var(--v2-green) !important; }

/* tela de login */
body.ui-v2.ui-v2-guest .min-h-screen { background: var(--v2-bg) !important; }
body.ui-v2.ui-v2-guest .sm\:max-w-md { border: 1px solid var(--v2-line) !important; box-shadow: none !important; border-radius: 14px !important; padding: 28px !important; }

/* aviso da prévia */
.ui-v2-badge { position: fixed; left: 12px; bottom: 12px; z-index: 9999; background: var(--v2-ink); color: #fff; font: 600 12.5px/1 'IBM Plex Sans', system-ui, sans-serif; padding: 8px 12px; border-radius: 999px; text-decoration: none; opacity: .85; }
.ui-v2-badge:hover { opacity: 1; color: #fff; }

/* Pedidos: o retângulo da lista fica exatamente como era (pedido do dono, 2026-10-06).
   Só o menu de cima e o título usam o visual novo nessa tela. */
body.ui-v2.ui-v2-keep-main main { font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important; font-feature-settings: normal; color: #111827; }

/* 2026-10-06: telas com tema claro/escuro próprio (.viz-root: Relatórios, Pedidos por Dia, Horas,
   Atividades, Metas, Livros, Treinos, Logs) ficam com o estilo delas por dentro — o v2 só muda
   menu, fundo e botões. Antes, cabeçalho de tabela e linha tocada ficavam claros no tema escuro. */