/* * MonoSeller — CSS global do painel * * REGRAS (ver CLAUDE.md): * - Nenhuma cor literal em componente/tela: sempre tokens (--ms-*) ou * variáveis do Bootstrap (--bs-*). * - --ms-brand é injetada no :root pelo layout a partir de BRAND_COLOR (.env). * - Temas claro/escuro via data-bs-theme no (Bootstrap 5.3). */ :root { /* --ms-brand e --ms-brand-rgb são definidas inline no layout (branding da instalação) */ --ms-sidebar-width: 240px; /* Tema claro */ --ms-sidebar-bg: #1e2530; --ms-sidebar-color: #aeb9c5; --ms-sidebar-active-color: #ffffff; --ms-topbar-bg: #ffffff; --ms-content-bg: #f4f6f9; } [data-bs-theme=dark] { --ms-sidebar-bg: #171c24; --ms-sidebar-color: #97a3b0; --ms-sidebar-active-color: #ffffff; --ms-topbar-bg: #212529; --ms-content-bg: #1a1d21; } /* Accent da marca aplicado aos componentes Bootstrap usados no sistema */ .btn-primary { --bs-btn-bg: var(--ms-brand); --bs-btn-border-color: var(--ms-brand); --bs-btn-hover-bg: color-mix(in srgb, var(--ms-brand) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--ms-brand) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--ms-brand) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--ms-brand) 75%, black); --bs-btn-disabled-bg: var(--ms-brand); --bs-btn-disabled-border-color: var(--ms-brand); } .btn-outline-primary { --bs-btn-color: var(--ms-brand); --bs-btn-border-color: var(--ms-brand); --bs-btn-hover-bg: var(--ms-brand); --bs-btn-hover-border-color: var(--ms-brand); --bs-btn-active-bg: var(--ms-brand); --bs-btn-active-border-color: var(--ms-brand); } a { color: var(--ms-brand); } .form-control:focus, .form-select:focus { border-color: var(--ms-brand); box-shadow: 0 0 0 .25rem rgba(var(--ms-brand-rgb), .25); } .form-check-input:checked { background-color: var(--ms-brand); border-color: var(--ms-brand); } /* ---------- Layout do painel ---------- */ body.ms-panel { background: var(--ms-content-bg); } .ms-sidebar { width: var(--ms-sidebar-width); min-height: 100vh; position: fixed; top: 0; left: 0; z-index: 1030; background: var(--ms-sidebar-bg); color: var(--ms-sidebar-color); display: flex; flex-direction: column; } .ms-sidebar .ms-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem 1rem; min-height: 84px; color: var(--ms-sidebar-active-color); font-size: 1.15rem; font-weight: 600; text-decoration: none; } /* Teto de altura e a largura da caixa inteira (a antiga max-width de 170px sobrava faixa vazia dentro dos 240px do sidebar). O logo é white-label: a imagem não é tocada, só ganha mais espaço para ocupar. */ .ms-sidebar .ms-brand img { max-width: 100%; max-height: 56px; } .ms-sidebar .nav-link { color: var(--ms-sidebar-color); display: flex; align-items: center; gap: .65rem; padding: .6rem 1.25rem; border-left: 3px solid transparent; } .ms-sidebar .nav-link:hover { color: var(--ms-sidebar-active-color); } .ms-sidebar .nav-link.active { color: var(--ms-sidebar-active-color); border-left-color: var(--ms-brand); background: rgba(var(--ms-brand-rgb), .15); } /* Rótulo de grupo do menu (ex.: Configurações): parece item, mas não é link */ .ms-sidebar .ms-nav-group { cursor: default; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin-top: .35rem; } .ms-sidebar .material-symbols-outlined { font-size: 20px; } .ms-topbar { margin-left: var(--ms-sidebar-width); background: var(--ms-topbar-bg); border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .5rem 1.5rem; min-height: 56px; } .ms-content { margin-left: var(--ms-sidebar-width); padding: 1.5rem; } /* ---------- Telas de autenticação ---------- */ body.ms-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ms-content-bg); } .ms-auth-card { width: 100%; max-width: 400px; } .ms-auth-card .ms-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; color: var(--bs-body-color); } .ms-auth-card .ms-brand img { max-height: 48px; max-width: 220px; } /* ---------- Utilitários ---------- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .ms-theme-toggle .material-symbols-outlined { font-size: 20px; } /* Logo white-label: versão clara/escura conforme o tema */ .ms-logo-dark { display: none; } [data-bs-theme=dark] .ms-logo-light:has(~ .ms-logo-dark) { display: none; } [data-bs-theme=dark] .ms-logo-dark { display: inline; } /* ---------- Cards de anúncio (tela Anúncios) ---------- */ /* Pilha financeira: pares label→valor em grid de 2 colunas */ .ms-finance-grid { display: grid; grid-template-columns: max-content max-content; gap: .25rem; justify-content: end; } .ms-finance-grid .badge { display: block; min-width: 5.5rem; text-align: center; } /* Form de custo (colapso do lápis) — não pode esticar a coluna financeira */ .ms-cost-form { max-width: 16rem; margin-left: auto; } .ms-ad-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); } /* ---------- Produtos ---------- */ .ms-product-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); } .ms-product-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); } /* Grid de imagens do formulário (arrastar para ordenar) */ .ms-image-item { position: relative; width: 120px; height: 120px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); cursor: grab; overflow: hidden; } .ms-image-item img { width: 100%; height: 100%; object-fit: cover; } .ms-image-item.dragging { opacity: .5; } .ms-image-item.drag-over { outline: 2px solid var(--ms-brand); } .ms-image-badge { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; font-size: .75rem; font-weight: 600; color: #fff; background-color: var(--ms-brand); } .ms-image-remove { position: absolute; top: 4px; right: 4px; padding: 0 4px; line-height: 1; display: none; } .ms-image-item:hover .ms-image-remove { display: inline-flex; } /* ---------- Expedição: indicador do app de impressão ---------- */ .ms-printer-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--bs-secondary-color); } .ms-printer-dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--bs-danger); } .ms-printer-status.online .ms-printer-dot { background-color: var(--bs-success); } .ms-printer-toast { position: sticky; top: 0; z-index: 1030; } /* Tabela densa da expedição */ .ms-picking-table td, .ms-picking-table th { padding: .4rem .5rem; font-size: .875rem; } /* Confirmação do painel (msConfirm) */ #ms-confirm-modal .modal-content { border: 0; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } #ms-confirm-modal .ms-confirm-message { white-space: pre-line; } /* Tela Canais: a linha inteira é o cabeçalho do acordeão de configurações */ .ms-channel-row { cursor: pointer; } .ms-channel-row .ms-chevron { font-size: 18px; transition: transform .2s ease-in-out; } .ms-channel-row[aria-expanded="true"] .ms-chevron { transform: rotate(180deg); } .ms-channel-body > td { background-color: transparent; } /* ---------- Chat interno ---------- */ /* A lista e a conversa rolam por dentro: com a página inteira rolando, o campo de escrever sairia da tela justamente quando o histórico cresce. */ .ms-chat-list { max-height: 60vh; overflow-y: auto; } .ms-chat-thread { height: 55vh; overflow-y: auto; background: var(--bs-tertiary-bg); } .ms-chat-bubble { max-width: 78%; padding: .5rem .75rem; border-radius: .75rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); } /* A minha mensagem em destaque: numa conversa de grupo é o que separa de relance o que eu disse do que me disseram. */ .ms-chat-mine { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); } /* overflow-wrap: URL ou código colado não pode esticar a bolha para fora da tela */ .ms-chat-text { overflow-wrap: anywhere; } .ms-chat-meta { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .15rem; } /* Citação dentro da bolha: barra à esquerda, como em qualquer mensageiro — é o padrão que o olho já reconhece como "isto é o que estou respondendo". */ .ms-chat-quote { border-left: 3px solid var(--bs-primary); background: rgba(var(--bs-emphasis-color-rgb), .05); padding: .25rem .5rem; border-radius: .25rem; margin-bottom: .3rem; color: inherit; } .ms-chat-quote-gone { border-left-color: var(--bs-secondary-color); color: var(--bs-secondary-color); } /* Botão de responder discreto: aparece de verdade no hover da bolha, para não poluir uma conversa longa com um ícone repetido em cada linha. */ .ms-chat-reply-btn { border: 0; background: none; padding: 0; line-height: 1; color: var(--bs-secondary-color); opacity: 0; transition: opacity .15s; } .ms-chat-bubble:hover .ms-chat-reply-btn, .ms-chat-reply-btn:focus { opacity: 1; } /* Mensagem só de emoji sai grande: um emoji sozinho em corpo de texto some. */ .ms-chat-emoji-only { font-size: 2rem; line-height: 1.2; } /* Destaque momentâneo ao pular para a mensagem citada */ .ms-chat-highlight { animation: ms-chat-flash 1.4s ease-out; } @keyframes ms-chat-flash { from { background: var(--bs-warning-bg-subtle); } to { background: transparent; } } .ms-chat-emoji-menu { max-height: 240px; overflow-y: auto; width: 300px; } .ms-chat-emoji-menu button { border: 0; background: none; font-size: 1.25rem; line-height: 1; padding: .2rem .25rem; border-radius: .25rem; } .ms-chat-emoji-menu button:hover { background: var(--bs-secondary-bg); } .ms-chat-emoji-menu .group { font-size: .7rem; color: var(--bs-secondary-color); margin: .35rem .15rem .1rem; } /* ---------- Funil de vendas ---------- */ /* Rola na horizontal: espremer as colunas até caber deixaria o cartão ilegível justamente quando há muitos atendimentos, que é quando importa. */ .ms-crm-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: stretch; } .ms-crm-column { flex: 0 0 260px; } .ms-crm-drop { min-height: 120px; max-height: 62vh; overflow-y: auto; } .ms-crm-over { background: var(--bs-primary-bg-subtle); border-radius: .375rem; } .ms-crm-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .5rem; margin-bottom: .5rem; cursor: grab; } .ms-crm-card:hover { border-color: var(--bs-primary); } .ms-crm-dragging { opacity: .5; } /* Atraso em vermelho na borda: é o que precisa saltar num quadro cheio. */ .ms-crm-overdue { border-left: 4px solid var(--bs-danger); } .ms-crm-timeline { max-height: 50vh; overflow-y: auto; } /* Mensagens prontas do WhatsApp: lista rolável com busca em cima */ .ms-wa-quick-menu { width: 340px; max-width: 90vw; } .ms-wa-quick-menu .list-group { max-height: 280px; overflow-y: auto; } .ms-wa-quick-menu .list-group-item.active { background: var(--bs-primary-bg-subtle); color: inherit; border-color: var(--bs-border-color); } /* Busca dentro da conversa (chat interno e WhatsApp): faixa de resultado fixa no topo do fio */ .ms-chat-search-bar { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); padding: .25rem 0; } .ms-chat-bubble mark { padding: 0 .1em; border-radius: .15rem; } /* Observação interna do WhatsApp: centralizada e amarelada, para ninguém confundir com mensagem enviada */ .ms-wa-note { max-width: 80%; margin: 0 auto .5rem; padding: .35rem .75rem; border-radius: .5rem; background: var(--bs-warning-bg-subtle); border: 1px dashed var(--bs-warning-border-subtle); font-size: .9rem; } .ms-wa-note .ms-chat-meta { justify-content: center; } .ms-wa-note-mode { background: var(--bs-warning-bg-subtle) !important; border-color: var(--bs-warning-border-subtle) !important; }