/* ══════════════════════════════════════════════════════════ Hermes — Light Theme Overrides Ativado quando possui a classe .light-mode Design: Clean, Flat, No Shadows, Subtle Borders ══════════════════════════════════════════════════════════ */ /* ── Fundo global ─────────────────────────────────────── */ .light-mode body { background-color: #f0f2f5 !important; color: #1a1a2e !important; } /* Mesh background mais suave */ .light-mode body::before { background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(124,107,255,.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(167,139,250,.04) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(220,220,235,.4) 0%, transparent 100%) !important; } /* ── Overrides de cores Tailwind ──────────────────────── */ .light-mode .text-white { color: #1a1a2e !important; } .light-mode .text-gray-200 { color: #2d3748 !important; } .light-mode .text-gray-300 { color: #3a3a4e !important; } .light-mode .text-gray-400 { color: #4a5568 !important; } .light-mode .text-gray-700 { color: #4a5568 !important; } .light-mode .bg-gray-900 { background-color: #f0f2f5 !important; } .light-mode .bg-gray-800 { background-color: #ffffff !important; } .light-mode .bg-gray-700 { background-color: #f7f8fa !important; } /* Custom Tailwind theme colors */ .light-mode .text-h-text { color: #1a1a2e !important; } .light-mode .text-h-sub { color: #5a5a7a !important; } .light-mode .text-h-accent2 { color: #5b4cc4 !important; } .light-mode .bg-h-surface { background-color: #f7f8fa !important; } .light-mode .bg-h-surface\/50 { background-color: rgba(247,248,250,.5) !important; } .light-mode .bg-h-card { background-color: #ffffff !important; } .light-mode .bg-h-border { background-color: #e2e4e8 !important; } .light-mode .bg-h-border\/20 { background-color: rgba(226,228,232,.2) !important; } .light-mode .bg-h-accent\/10 { background-color: rgba(124,107,255,.08) !important; } .light-mode .border-h-border { border-color: #d4d6dc !important; } .light-mode .border-h-accent\/20 { border-color: rgba(124,107,255,.15) !important; } .light-mode .border-h-accent\/30 { border-color: rgba(124,107,255,.2) !important; } .light-mode .bg-black\/90 { background-color: rgba(240,242,245,.92) !important; } .light-mode .bg-black\/60 { background-color: rgba(0,0,0,.15) !important; } /* Cores hex hardcoded */ .light-mode .bg-\[\#111118\] { background-color: #f7f8fa !important; } .light-mode .bg-\[\#0a0a0f\] { background-color: #f0f2f5 !important; } .light-mode .bg-\[\#16161f\] { background-color: #ffffff !important; } .light-mode .border-\[\#1e1e2e\] { border-color: #d4d6dc !important; } /* ── Remover sombras (Flat Design) ────────────────────── */ .light-mode .shadow-xl, .light-mode .shadow-2xl, .light-mode .shadow-lg, .light-mode .shadow-md, .light-mode .shadow-inner, .light-mode [class*="shadow-"] { box-shadow: none !important; } .light-mode .btn-primary:hover, .light-mode .btn-primary:active { box-shadow: none !important; } .light-mode .summary-card:hover { box-shadow: none !important; } .light-mode .item-card:hover { box-shadow: none !important; } /* ── Header ───────────────────────────────────────────── */ .light-mode #app-header { background: rgba(255,255,255,.92) !important; backdrop-filter: blur(20px); border-bottom: 1px solid #d4d6dc !important; } .light-mode #app-header .text-h-text\/80, .light-mode #app-header .text-gray-200 { color: #1a1a2e !important; } .light-mode .nav-btn { background: rgba(124,107,255,.06) !important; border-color: rgba(124,107,255,.2) !important; color: #5b4cc4 !important; } .light-mode .nav-btn:hover { background: rgba(124,107,255,.12) !important; color: #3d2fa0 !important; } .light-mode .nav-btn.danger { border-color: rgba(239,68,68,.25) !important; background: rgba(239,68,68,.04) !important; color: #d14343 !important; } .light-mode .logo-img { background: #f0f2f5 !important; box-shadow: none !important; } /* ── Glass ────────────────────────────────────────────── */ .light-mode .glass { background: rgba(255,255,255,.88) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid #d4d6dc !important; } .light-mode .glass-card { background: rgba(255,255,255,.9) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #d4d6dc !important; } /* ── Inputs / Selects ─────────────────────────────────── */ .light-mode .input-field { background: #ffffff !important; border: 1px solid #d4d6dc !important; color: #1a1a2e !important; caret-color: #7c6bff !important; } .light-mode .input-field::placeholder { color: #9a9ab0 !important; } .light-mode .input-field:focus { border-color: #7c6bff !important; box-shadow: none !important; } .light-mode select.input-field, .light-mode select#manual-sku { background-color: #ffffff !important; color: #1a1a2e !important; } .light-mode select.input-field option, .light-mode select#manual-sku option { background-color: #ffffff !important; color: #1a1a2e !important; } .light-mode .col-filter { background: #ffffff !important; border: 1px solid #d4d6dc !important; color: #1a1a2e !important; } .light-mode .col-filter::placeholder { color: #9a9ab0 !important; } .light-mode .col-filter:focus { border-color: #7c6bff !important; box-shadow: none !important; } /* ── Filter Mode Buttons ──────────────────────────────── */ .light-mode .filter-mode-btn { background: rgba(0,0,0,.03) !important; border-color: #d4d6dc !important; color: #5a5a7a !important; } .light-mode .filter-mode-btn.active { background: rgba(124,107,255,.1) !important; color: #5b4cc4 !important; border-color: rgba(124,107,255,.3) !important; } .light-mode .filter-mode-btn:hover:not(.active) { background: rgba(0,0,0,.06) !important; color: #1a1a2e !important; } /* ── Tabs ─────────────────────────────────────────────── */ .light-mode .tab-btn { background: rgba(0,0,0,.03) !important; color: #5a5a7a !important; border-color: transparent !important; } .light-mode .tab-btn.active { background: rgba(124,107,255,.1) !important; color: #5b4cc4 !important; border-color: rgba(124,107,255,.25) !important; } .light-mode .tab-btn:hover:not(.active) { background: rgba(0,0,0,.06) !important; color: #1a1a2e !important; } /* ── Summary Cards ────────────────────────────────────── */ .light-mode .summary-card { background: #ffffff !important; border: 1px solid #d4d6dc !important; } .light-mode .summary-card:hover { border-color: rgba(124,107,255,.3) !important; transform: translateY(-4px); } /* ── Item Cards ───────────────────────────────────────── */ .light-mode .item-card { background: #ffffff !important; border: 1px solid #d4d6dc !important; } .light-mode .item-card:hover { border-color: rgba(124,107,255,.3) !important; transform: translateY(-4px); } /* ── Badges ───────────────────────────────────────────── */ .light-mode .badge-accent { background: rgba(124,107,255,.1) !important; color: #5b4cc4 !important; border-color: rgba(124,107,255,.2) !important; } .light-mode .badge-green { background: rgba(52,211,153,.1) !important; color: #0d8a5e !important; border-color: rgba(52,211,153,.2) !important; } .light-mode .badge-yellow { background: rgba(251,191,36,.1) !important; color: #b0820a !important; border-color: rgba(251,191,36,.2) !important; } /* ── Stat Pill ────────────────────────────────────────── */ .light-mode .stat-pill { background: rgba(124,107,255,.06) !important; border: 1px solid rgba(124,107,255,.12) !important; } /* ── Matrix Table ─────────────────────────────────────── */ .light-mode .matrix-wrap { border: 1px solid #d4d6dc !important; } .light-mode .matrix-table { background: #ffffff !important; } .light-mode .matrix-table thead tr.header-row th { background: #f7f8fa !important; color: #5a5a7a !important; border-bottom: 1px solid #d4d6dc !important; } .light-mode .matrix-table thead tr.filter-row th { background: #fafbfc !important; border-bottom: 1px solid #d4d6dc !important; } .light-mode .order-row { border-bottom: 1px solid #e8eaef !important; } .light-mode .order-row:hover { background: rgba(124,107,255,.04) !important; } .light-mode .order-row td { color: #3a3a4e !important; } .light-mode .order-row td.num-col { color: #1a1a2e !important; } .light-mode .expand-toggle { background: rgba(124,107,255,.08) !important; border-color: rgba(124,107,255,.2) !important; color: #5b4cc4 !important; } .light-mode .expand-toggle:hover, .light-mode .expand-toggle.open { background: rgba(124,107,255,.18) !important; } .light-mode .detail-row { border-bottom-color: #d4d6dc !important; } .light-mode .detail-content h4 { color: #5a5a7a !important; } .light-mode .items-sub-table thead th { color: #5a5a7a !important; border-bottom-color: #d4d6dc !important; } .light-mode .items-sub-table tbody td { color: #3a3a4e !important; border-bottom-color: #e8eaef !important; } .light-mode .items-sub-table tbody tr:hover td { background: rgba(124,107,255,.03) !important; } .light-mode .items-sub-table td.desc-col { color: #1a1a2e !important; } .light-mode .matrix-count { color: #5a5a7a !important; } /* ── Toast ────────────────────────────────────────────── */ .light-mode .toast-error { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; } .light-mode .toast-success { background: rgba(52,211,153,.08) !important; border-color: rgba(52,211,153,.2) !important; } .light-mode .toast-info { background: rgba(124,107,255,.08) !important; border-color: rgba(124,107,255,.2) !important; } .light-mode .toast-warn { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.2) !important; } /* ── Dropdown (profile menu) ──────────────────────────── */ .light-mode .group-hover\:opacity-100[class*="bg-gray-800"] { background: #ffffff !important; border-color: #d4d6dc !important; } /* ── Modal ────────────────────────────────────────────── */ .light-mode #modalUsuario .glass { background: #ffffff !important; border-color: #d4d6dc !important; } .light-mode #listaDisponiveis, .light-mode #listaVinculados { background: #ffffff !important; border-color: #d4d6dc !important; color: #1a1a2e !important; } /* ── Overlay Inactive ─────────────────────────────────── */ .light-mode #overlay-inactive { background: rgba(240,242,245,.94) !important; } .light-mode #overlay-inactive h2, .light-mode #overlay-inactive .text-white { color: #1a1a2e !important; } .light-mode #overlay-inactive p, .light-mode #overlay-inactive .text-gray-400 { color: #4a5568 !important; } .light-mode #overlay-inactive strong, .light-mode #overlay-inactive .text-gray-300 { color: #2d3748 !important; } /* ── View Start (Loading) ─────────────────────────────── */ .light-mode #view-start { background-color: #f0f2f5 !important; } .light-mode #view-start p, .light-mode #view-start .text-white { color: #1a1a2e !important; } /* ── Header user avatar ───────────────────────────────── */ .light-mode #user-avatar-text { background-color: #d4d6dc !important; color: #1a1a2e !important; } /* ── FAB back-to-top ──────────────────────────────────── */ .light-mode #btn-back-to-top { box-shadow: none !important; } /* ── Botão hover effects (flat) ───────────────────────── */ .light-mode .hover\:bg-gray-700:hover { background-color: #e8eaef !important; } .light-mode .hover\:bg-h-surface:hover { background-color: #e8eaef !important; } .light-mode .hover\:bg-h-accent\/10:hover { background-color: rgba(124,107,255,.08) !important; } /* ── Divider ──────────────────────────────────────────── */ .light-mode .divider { border-color: #d4d6dc !important; } /* ── Borda sutil extra para separação de seções ──────── */ .light-mode .glass + .glass, .light-mode #order-header, .light-mode #search-card { border: 1px solid #d4d6dc !important; } /* ── Scanner area ─────────────────────────────────────── */ .light-mode #reader { background: #f7f8fa !important; border: 1px solid #d4d6dc !important; } /* ── Dropzone ─────────────────────────────────────────── */ .light-mode #dropzone-area { background: #f7f8fa !important; border-color: #d4d6dc !important; } .light-mode #dropzone-area:hover { border-color: rgba(124,107,255,.3) !important; } /* ── Alert Banner ─────────────────────────────────────── */ .light-mode #alert-banner { box-shadow: none !important; } /* ── Scrollbar ────────────────────────────────────────── */ .light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15) !important; } /* ── Transfer List ────────────────────────────────────── */ .light-mode #transfer-list-container label { background: #f7f8fa !important; border-color: #d4d6dc !important; color: #5a5a7a !important; }