/* ============================================================ Tema (claro/escuro) — variáveis CSS, trocadas via [data-theme] no (ver theme.js e Components/Shared/ThemeToggle.razor). ============================================================ */ :root { --cor-fundo: #f2f3f5; --cor-fundo-cartao: #ffffff; --cor-fundo-sidebar-topo: rgba(5, 39, 103, 0.95); --cor-texto: #1a1d21; --cor-texto-secundario: #5a6169; --cor-borda: #dcdfe3; --cor-primaria: #1b6ec2; --cor-primaria-hover: #15599c; --cor-sucesso: #1e7e34; --cor-sucesso-fundo: #e6f4ea; --cor-erro: #c00000; --cor-erro-fundo: #fde8e8; --cor-aviso: #8a6d00; --cor-aviso-fundo: #fff6da; --cor-info: #1f5c99; --cor-info-fundo: #e6f0fa; --sombra-cartao: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --sombra-cartao-elevada: 0 4px 12px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06); --raio-borda: 10px; /* Zebrado das listas — branco / cinza mais evidente, sem matiz de cor, para dar destaque real às linhas sem competir com os indicadores de cor (saldo devedor, cancelado etc.). */ --cor-zebra-par: #e9edf2; --cor-linha-hover: #d8dee6; } [data-theme="dark"] { --cor-fundo: #12151a; --cor-fundo-cartao: #1b1f26; --cor-fundo-sidebar-topo: rgba(0, 0, 0, 0.45); --cor-texto: #e8e9eb; --cor-texto-secundario: #9aa1a9; --cor-borda: #2c313a; --cor-primaria: #4c93e0; --cor-primaria-hover: #6ba6e8; --cor-sucesso: #4caf50; --cor-sucesso-fundo: #17301b; --cor-erro: #ff6b6b; --cor-erro-fundo: #3a1414; --cor-aviso: #ffc94d; --cor-aviso-fundo: #3a2f0d; --cor-info: #6ba6e8; --cor-info-fundo: #142a3a; --sombra-cartao: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-cartao-elevada: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --cor-zebra-par: #262c36; --cor-linha-hover: #313847; } html, body { font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--cor-fundo); color: var(--cor-texto); } a, .btn-link { color: var(--cor-primaria); } .btn-primary { color: #fff; background-color: var(--cor-primaria); border-color: var(--cor-primaria); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15); } .btn-primary:hover { background-color: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--cor-fundo-cartao), 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid var(--cor-erro); } .validation-message { color: var(--cor-erro); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ============================================================ Componentes de negócio genéricos (tabelas, cards, formulários) ============================================================ */ h1, h2, h3 { color: var(--cor-texto); } .table { color: var(--cor-texto); background-color: var(--cor-fundo-cartao); border-radius: var(--raio-borda); overflow: hidden; box-shadow: var(--sombra-cartao-elevada); border-collapse: separate; border-spacing: 0; } .table > :not(caption) > * > * { background-color: var(--cor-fundo-cartao); color: var(--cor-texto); border-bottom-color: var(--cor-borda); padding: 0.65rem 0.85rem; /* O Bootstrap pinta o fundo das células com "box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)" — um shadow interno gigante que cobre o background-color. Hoje essa variável vem transparente, mas basta uma classe/versão do Bootstrap definir uma cor para o zebrado abaixo virar invisível. Neutralizado aqui de propósito. */ box-shadow: none; } .table thead { font-weight: 600; } /* Cabeçalho com leve separação visual do corpo — evita que a primeira linha de dados "grude" no título das colunas. */ .table thead > tr > * { background-color: var(--cor-fundo); border-bottom: 2px solid var(--cor-borda); } /* ============================================================ Zebrado das listas (REQ-04) — padrão reutilizável via .table, aplicado só a linhas de tbody (nunca em formulários/cards/menus). Especificidade (0,2,2) > a regra base (0,1,1) acima; a ordem no arquivo garante hover > zebrado e foco-por-teclado > hover. ============================================================ */ .table tbody tr:nth-child(even) > * { background-color: var(--cor-zebra-par); } .table tbody tr:hover > * { background-color: var(--cor-linha-hover); } .table tbody tr:focus-within > * { outline: 2px solid var(--cor-primaria); outline-offset: -2px; } /* Evita scroll horizontal da página inteira — tabelas largas rolam só dentro do próprio contêiner, mantendo o layout responsivo em qualquer tamanho de janela (celular, tablet, monitor ultrawide). */ .table-responsive-wrapper { overflow-x: auto; width: 100%; } .alert-success { background-color: var(--cor-sucesso-fundo); color: var(--cor-sucesso); } .alert-danger { background-color: var(--cor-erro-fundo); color: var(--cor-erro); } .alert-warning { background-color: var(--cor-aviso-fundo); color: var(--cor-aviso); } /* Formulário em grade — responsivo por padrão: quantas colunas couberem, nunca menos de ~220px de largura cada (empilha em 1 coluna no celular). */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .form-grid label { display: flex; flex-direction: column; font-size: .85rem; color: var(--cor-texto-secundario); } .form-grid .full-width { grid-column: 1 / -1; } .form-grid input, .form-grid select, .form-grid textarea { margin-top: .25rem; padding: .45rem .6rem; border: 1px solid var(--cor-borda); border-radius: 6px; background: var(--cor-fundo-cartao); color: var(--cor-texto); } /* Foco sempre visível (REQ-05, regra 7) — reforça o outline nativo do navegador para garantir contraste consistente nos dois temas. */ .form-grid input:focus-visible, .form-grid select:focus-visible, .form-grid textarea:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; } input, select, textarea, button { font-family: inherit; } button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle) { border: 1px solid var(--cor-borda); border-radius: 6px; padding: .45rem .9rem; background: var(--cor-fundo-cartao); color: var(--cor-texto); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; } button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):hover { background: var(--cor-borda); } button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):active { transform: scale(0.97); } button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-danger { background-color: var(--cor-erro) !important; border-color: var(--cor-erro) !important; color: #fff !important; } /* ============================================================ Tema — botão de alternância claro/escuro ============================================================ */ .theme-toggle { border: none; background: rgba(255, 255, 255, 0.12); color: #fff; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.25); } .login-theme-toggle { position: fixed; top: 1rem; right: 1rem; } .login-theme-toggle .theme-toggle { background: rgba(0, 0, 0, 0.08); color: var(--cor-texto); } /* ============================================================ Toast — mensageria global de sucesso/erro (ver NotificationService) ============================================================ */ .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: min(90vw, 380px); } .toast-item { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: var(--raio-borda); box-shadow: var(--sombra-cartao); animation: toast-entrar .2s ease-out; color: #fff; } .toast-sucesso { background: var(--cor-sucesso); } .toast-erro { background: var(--cor-erro); } .toast-icone { font-weight: bold; } .toast-texto { flex: 1; font-size: .9rem; } .toast-fechar { background: none; border: none; color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; } @keyframes toast-entrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Modal — cadastro/edição e resultados de busca ============================================================ */ .modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; z-index: 1500; overflow-y: auto; } .modal-box { background: var(--cor-fundo-cartao); color: var(--cor-texto); border-radius: var(--raio-borda); box-shadow: var(--sombra-cartao); width: 100%; max-width: 720px; max-height: calc(100vh - 4rem); display: flex; flex-direction: column; } .modal-header-custom { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cor-borda); } .modal-header-custom h3 { margin: 0; font-size: 1.1rem; } .modal-fechar { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--cor-texto-secundario); } .modal-body-custom { padding: 1.25rem; overflow-y: auto; } .modal-actions { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; } /* Diálogo de confirmação (keyboard-nav.js). Substitui o window.confirm nativo, que o navegador ancora no topo da viewport e não permite estilizar. Classes próprias — e não .modal-box — porque ele pode abrir POR CIMA de um modal Blazor já aberto (ex.: salvar edição dentro do modal de rol), e os handlers de Esc/Tab do keyboard-nav.js buscam o primeiro .modal-box do documento. */ .confirmacao-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 2000; } .confirmacao-box { background: var(--cor-fundo-cartao); color: var(--cor-texto); border-radius: var(--raio-borda); box-shadow: var(--sombra-cartao); width: 100%; max-width: 420px; padding: 1.5rem; text-align: center; } .confirmacao-box p { margin: 0 0 1.25rem; font-size: 1.05rem; } .confirmacao-acoes { display: flex; gap: .5rem; justify-content: center; } @media (max-width: 640px) { .modal-backdrop-custom { padding: 0; align-items: stretch; } .modal-box { max-width: 100%; max-height: 100vh; border-radius: 0; } } /* Relatório analítico agrupado (GrupoAnalitico.razor) */ .grupo-analitico { margin-top: .75rem; } .grupo-analitico-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem .5rem; border-left: 3px solid var(--cor-borda); background: var(--cor-fundo); } .grupo-analitico-rotulo { font-weight: 600; } .grupo-analitico-subtotal { color: var(--cor-texto-secundario); white-space: nowrap; font-variant-numeric: tabular-nums; } .grupo-analitico-itens { margin: .25rem 0 0; } .grupo-analitico-itens td { border-top: none; padding-top: .2rem; padding-bottom: .2rem; } .agrupamento-opcoes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .75rem; } .agrupamento-opcoes label { display: flex; align-items: center; gap: .35rem; margin: 0; } /* ============================================================ Lavanderia Cislav - estilos das telas de negócio ============================================================ */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--cor-fundo); padding: 1rem; } .login-box { background: var(--cor-fundo-cartao); color: var(--cor-texto); padding: 2rem 2.5rem; border-radius: var(--raio-borda); box-shadow: var(--sombra-cartao); width: 100%; max-width: 380px; } .login-box h1 { font-size: 1.6rem; color: var(--cor-primaria); margin-bottom: .1rem; } .login-subtitulo { color: var(--cor-texto-secundario); margin-bottom: 1.25rem; font-size: .95rem; } .login-box label { display: block; margin-bottom: .75rem; font-size: .9rem; } .login-box input { display: block; width: 100%; padding: .55rem .6rem; margin-top: .25rem; border: 1px solid var(--cor-borda); border-radius: 6px; background: var(--cor-fundo-cartao); color: var(--cor-texto); } .login-box button { width: 100%; padding: .65rem; background: var(--cor-primaria); color: #fff; border: none; border-radius: 6px; margin-top: .5rem; font-weight: 600; } .login-box button:hover { background: var(--cor-primaria-hover); } .login-box .alert { background: var(--cor-erro-fundo); color: var(--cor-erro); padding: .5rem .75rem; border-radius: 6px; margin-bottom: 1rem; font-size: .85rem; } /* ============================================================ Seleção de empresa — lista de opções em estilo cartão ============================================================ */ .login-box-empresa { max-width: 440px; } .selecionar-empresa-ajuda { color: var(--cor-texto-secundario); font-size: .85rem; margin-bottom: 1.25rem; } .empresa-lista { display: flex; flex-direction: column; gap: .6rem; max-height: 45vh; overflow-y: auto; margin-bottom: 1.25rem; } .empresa-opcao { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; margin: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .empresa-opcao:hover { border-color: var(--cor-primaria); } .empresa-opcao:has(input:checked) { border-color: var(--cor-primaria); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); } .empresa-opcao input[type="radio"] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--cor-primaria); flex-shrink: 0; } .empresa-opcao-nome { font-size: .95rem; color: var(--cor-texto); } /* ============================================================ Saldo Devedor — REQ-07: cor + texto (não só cor) para cada situação, legível nos dois temas via variáveis CSS. ============================================================ */ /* Especificidade de elemento+classe: precisa empatar (e vencer por ordem no arquivo) a regra ".table > :not(caption) > * > *" que já fixa a cor padrão das células — uma classe sozinha (0,1,0) perde para ela (0,1,1). */ td.saldo-falta-devolver { color: var(--cor-erro); font-weight: bold; } td.saldo-entregou-a-mais { color: var(--cor-info); font-weight: bold; } td.saldo-zero { color: var(--cor-texto); font-weight: normal; } /* ============================================================ SeletorEmpresas (REQ-08) — linha inteira destacada quando a empresa está selecionada, legível nos dois temas. ============================================================ */ tr.linha-selecionada > * { background-color: var(--cor-info-fundo) !important; } /* ============================================================ Administração de usuários — ações padronizadas (mesmo tamanho, alinhadas) e badge compacto de empresas vinculadas (evita distorcer a linha quando o usuário acessa muitas empresas). ============================================================ */ .acoes-usuario { display: flex; flex-wrap: wrap; gap: 0.4rem; } .acoes-usuario button { min-width: 108px; text-align: center; } .badge-empresas { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--cor-borda); background: var(--cor-fundo-cartao); color: var(--cor-texto); font-size: 0.85rem; white-space: nowrap; } button.badge-empresas { cursor: pointer; } button.badge-empresas:hover { background: var(--cor-borda); } .badge-empresas-todas { background: var(--cor-info-fundo); color: var(--cor-info); border-color: transparent; font-weight: 600; } .saldo-legenda { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .75rem 0 1rem; font-size: .9rem; } .saldo-legenda-item { display: flex; align-items: center; gap: .4rem; } .saldo-legenda-marcador { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; flex-shrink: 0; } /* Saldo exibido como badge: o fundo semântico deixa a cor inequívoca mesmo em telas de baixo contraste ou impressão, sem recorrer a sinais +/- (que o usuário pediu para não usar). O significado continua reforçado pelo texto acessível em .visually-hidden dentro da célula. */ .saldo-valor { display: inline-block; min-width: 3.25rem; padding: .2rem .6rem; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } td.saldo-falta-devolver .saldo-valor { background: var(--cor-erro-fundo); color: var(--cor-erro); } td.saldo-entregou-a-mais .saldo-valor { background: var(--cor-info-fundo); color: var(--cor-info); } td.saldo-zero .saldo-valor { background: var(--cor-fundo); color: var(--cor-texto); font-weight: 600; } .th-ordenavel { cursor: pointer; user-select: none; } .th-ordenavel:hover { color: var(--cor-primaria); }