/* _base.css — FabrixERP base structure — import this in theme files */ :root { --sidebar-width: 260px; --sidebar-collapsed: calc(44px + 2.3rem); --right-panel-w: 300px; --content-header: 52px; --footer-height: 48px; --radius-box: 10px; --radius-card: 14px; --color-dark: #1a2332; --color-border: #e9ecef; --color-border2: #dee2e6; --color-bg: #f4f6f9; --color-text: #1a2332; --color-muted: #6c757d; --color-idle: #adb5bd; --color-primary: #2563eb; --color-surface: #ffffff; --color-surface2: #f8f9fa; --color-sidebar: var(--color-surface); --color-active: #f0f2f6; --color-hover-bg: #f8f9fa; --color-icon: #6c757d; --color-scrollbar: #dee2e6; --color-logo-bg: #1a2332; --color-logo-text: #ffffff; --color-avatar-from: #e9ecef; --color-avatar-to: #dee2e6; --color-avatar-text: #1a2332; --color-badge-bg: #fef3c7; --color-badge-text: #92400e; --color-table-row-border: #f1f3f5; --color-table-hover: #f8f9ff; --sidebar-transition: width 0.22s ease; --main-transition: margin-left 0.22s ease; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 110%; } /* Enquanto o estado salvo do sidebar (localStorage) ainda não foi aplicado pelo script inline no , desliga as transições de layout — evita o flash de abrir/fechar do menu a cada refresh/troca de página. Removida pelo próprio script assim que a classe correta é aplicada. */ html.preload .app-sidebar, html.preload .right-sidebar, html.preload .app-main { transition: none !important; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); font-size: 0.9375rem; } a { text-decoration: none; color: inherit; } /* Delete icon used in image_field thumbnail overlay */ .image-delete-btn { width: 33px; height: 33px; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: .9rem; } /* ── Layout shell ───────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; /* dvh acompanha a barra de endereço/teclado no mobile; 100vh acima fica como fallback para navegadores sem suporte a dvh. */ min-height: 100dvh; /* Notch/home-indicator do iPhone/iPad quando instalado como PWA (viewport-fit=cover no base.html) — env() resolve pra 0 em navegadores sem notch ou fora do modo standalone, então isso não muda nada hoje. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* ── Sidebar desktop (fixo, colapsável) ─────────────────────── */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); overflow: visible; z-index: 200; transition: var(--sidebar-transition); } /* Conteúdo interno do sidebar esquerdo */ .app-sidebar-inner { position: absolute; inset: 0; background: var(--color-sidebar); border-right: 1px solid var(--color-border); overflow: visible !important; display: flex; flex-direction: column; } /* ── Aba de colapso (esquerdo e direito) ─────────────────────── */ .sidebar-tab { position: absolute; top: calc(var(--content-header) + 5px); right: -20px; width: 20px; height: 48px; background: var(--color-sidebar); border: 1px solid var(--color-border); border-left: none; border-radius: 0 6px 6px 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-muted); font-size: .72rem; transition: background .13s, color .13s; z-index: 1; padding: 0; } .sidebar-tab:hover { background: var(--color-hover-bg); color: var(--color-dark); } /* Aba direita (espelho) */ .sidebar-tab-right { right: auto; left: -20px; border-left: 1px solid var(--color-border); border-right: none; border-radius: 6px 0 0 6px; } /* ── Mensageria: bolinha piscando de "mensagem nova não lida" ───────── */ @keyframes fabrix-msg-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .msg-unread-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #dc3545; box-shadow: 0 0 0 2px var(--color-sidebar, #fff); animation: fabrix-msg-blink 1.3s ease-in-out infinite; display: none; pointer-events: none; } .msg-unread-dot.show { display: block; } /* Na aba de colapsar (a setinha "<"), a bolinha fica centralizada no meio da borda do botão (metade dentro, metade fora), na mesma direção em que o botão já se projeta para fora do painel. */ .sidebar-tab .msg-unread-dot { top: 50%; right: auto; left: 0; transform: translate(-50%, -50%); } /* No avatar do cabeçalho mobile, a bolinha fica no canto inferior esquerdo em vez do padrão superior direito. */ .canvas-toggle-btn-avatar .msg-unread-dot { top: auto; right: auto; bottom: -2px; left: -2px; } .rp-msg-view { min-height: 0; } .rp-msg-unread-banner { background: var(--color-hover-bg); } /* Botões dos filtros de conversa (status/tipo) — .btn-group-sm já reduz em relação ao padrão, mas no painel lateral (estreito) ainda ficava grande demais pra caber "Não lidas" numa linha só sem quebrar feio. */ .rp-msg-filter-group .btn { font-size: .72rem; padding: .2rem .5rem; } .rp-conv-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--color-avatar-from), var(--color-avatar-to)); display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: var(--color-avatar-text); } .rp-conv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .rp-conv-toggle-read { font-size: .9rem; line-height: 1; padding: 0; background: transparent; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rp-conv-toggle-read:hover { opacity: .7; } .rp-conv-icon-unread { color: var(--color-primary); } .rp-conv-icon-urgent { color: #dc3545; } .rp-conv-icon-read { color: var(--color-icon); } /* ── Banners de mensageria (fixos no topo, só fecham ao marcar como lida) ── */ .fabrix-banner-stack { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; display: flex; flex-direction: column; } .fabrix-banner { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; background: var(--color-primary); color: #fff; font-size: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .2); } .fabrix-banner.fabrix-banner-urgente { background: #dc3545; } .fabrix-banner .fabrix-banner-icon { font-size: 1rem; flex-shrink: 0; } .fabrix-banner .fabrix-banner-body { flex-grow: 1; min-width: 0; } .fabrix-banner .fabrix-banner-sender { font-weight: 700; margin-right: .35rem; } .fabrix-banner .fabrix-banner-close { flex-shrink: 0; white-space: nowrap; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .4); color: #fff; } .fabrix-banner .fabrix-banner-close:hover { background: rgba(255, 255, 255, .28); } .msg-bubble { max-width: 88%; border-radius: var(--radius-box); padding: .4rem .6rem; margin-bottom: .4rem; font-size: .82rem; word-break: break-word; background: var(--color-surface2); border: 1px solid var(--color-border); } .msg-bubble.msg-mine { margin-left: auto; background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .msg-bubble.msg-urgente { border-color: #dc3545; background: #fdecea; color: #58151c; } .msg-bubble.msg-mine.msg-urgente { background: #dc3545; color: #fff; border-color: #dc3545; } .msg-bubble .msg-bubble-meta { display: block; font-size: .68rem; opacity: .75; margin-top: .15rem; } .msg-bubble .msg-bubble-read { display: block; font-size: .68rem; opacity: .85; margin-top: .1rem; text-align: right; } .rp-conv-item { cursor: pointer; border-left: 3px solid transparent; } .rp-conv-datahora { display: block; font-size: .68rem; color: var(--color-muted); margin-top: .1rem; } .rp-conv-item.has-unread { border-left-color: var(--color-primary); background: var(--color-hover-bg); } .rp-conv-item.has-urgent { border-left-color: #dc3545; } /* Estado colapsado — esconde texto, ícones não se movem */ .app-layout.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); } .app-layout.sidebar-collapsed .sidebar-nav-item > span { opacity: 0; max-width: 0; } .app-layout.sidebar-collapsed .sidebar-user-info { opacity: 0; max-width: 0; } .app-layout.sidebar-collapsed .sidebar-user-dropdown { min-width: 250px; } /* ── Sidebar direito (fixo desktop, fecha totalmente) ────────── */ .right-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: var(--right-panel-w); overflow: visible; z-index: 200; transition: width .22s ease; } .app-layout.right-collapsed .right-sidebar { width: 0; } /* Conteúdo interno (overflow oculto) */ .rp-inner { position: absolute; inset: 0; background: var(--color-sidebar); border-left: 1px solid var(--color-border); overflow: hidden; } /* ── App Main ───────────────────────────────────────────────── */ .app-main { margin-left: var(--sidebar-width); margin-right: var(--right-panel-w); flex: 1; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; transition: margin-left .22s ease, margin-right .22s ease; } .app-layout.sidebar-collapsed .app-main { margin-left: var(--sidebar-collapsed); } .app-layout.right-collapsed .app-main { margin-right: 0; } @media (max-width: 991.98px) { .app-main { margin-left: 0; margin-right: 0; } } /* ── Offcanvas mobile (navegação e painel) ──────────────────── */ #leftSidebar { width: var(--sidebar-width) !important; border-right: 1px solid var(--color-border); background: var(--color-sidebar); } #rightPanel { width: var(--right-panel-w) !important; border-left: 1px solid var(--color-border); background: var(--color-sidebar); } /* Celular: offcanvas ocupa 100% da tela (tablet mantém a largura fixa acima) */ @media (max-width: 767.98px) { #leftSidebar, #rightPanel { width: 100% !important; } } /* Botão de fechar do lado oposto ao qual o painel abre: o painel direito abre pela direita, então fecha pela esquerda (o esquerdo já fica correto com o padrão do Bootstrap, que empurra o .btn-close para a direita via margin-left:auto — aqui só invertemos essa margem no painel direito). */ #rightPanel .btn-close { margin-left: 0; margin-right: auto; } /* Ícone de fechar (X) descido uma linha: uma linha vazia (spacer) força a quebra e o botão cai para a segunda linha do cabeçalho. */ .offcanvas-header-spacer { flex-basis: 100%; height: 1.5rem; } /* Celular: campos do tipo radiobutton_field/buttongroup_field (grupo de botões tipo "toggle") empilham verticalmente em vez de ficar lado a lado — com 3+ opções e labels longos (ex.: "Usuário de Perfil"), o texto quebra em várias linhas dentro do botão e a linha fica desalinhada. Reproduz manualmente o visual do .btn-group-vertical do Bootstrap (o grupo horizontal usa margin-left/border-radius pensados pra lado a lado). */ @media (max-width: 767.98px) { [data-radiobutton-field], [data-buttongroup-field] > .btn-group { flex-direction: column; align-items: stretch; } [data-radiobutton-field] > .btn, [data-radiobutton-field] > label, [data-buttongroup-field] > .btn-group > .btn { width: 100%; margin-left: 0 !important; } [data-radiobutton-field] > .btn:not(:first-child), [data-radiobutton-field] > label:not(:first-child), [data-buttongroup-field] > .btn-group > .btn:not(:first-child) { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } [data-radiobutton-field] > .btn:not(:last-child), [data-radiobutton-field] > label:not(:last-child), [data-buttongroup-field] > .btn-group > .btn:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } /* ── Sidebar — conteúdo interno ─────────────────────────────── */ /* Logo area */ .sidebar-logo-area { padding: 0.875rem 1rem 0.875rem 1.15rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; overflow: hidden; transition: padding .22s ease, justify-content .22s ease; } .sidebar-logo-link { display: flex; align-items: center; text-decoration: none; color: inherit; } .sidebar-logo-image { display: block; object-fit: contain; max-width: 100%; transition: max-width .22s ease, max-height .22s ease; } /* Estado colapsado — logo encolhe pra caber sem sobrepor o conteúdo */ .app-layout.sidebar-collapsed .sidebar-logo-area { padding-left: 0.5rem; padding-right: 0.5rem; justify-content: center; } .app-layout.sidebar-collapsed .sidebar-logo-image { max-width: 44px; max-height: 44px; } .sidebar-logo-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-logo-bg); display: flex; align-items: center; justify-content: center; color: var(--color-logo-text); font-size: 1.1rem; flex-shrink: 0; } /* Nav */ .sidebar-nav { flex: 1; padding: 0.75rem 0.65rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .sidebar-nav::-webkit-scrollbar { width: 3px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 2px; } .sidebar-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.33rem 0.5rem; border-radius: 10px; color: var(--color-muted); font-size: .9rem; font-weight: 400; margin-bottom: 2px; transition: background .13s, color .13s, padding .22s ease, justify-content .22s ease; cursor: pointer; text-align: left; } .sidebar-nav-item:hover { background: var(--color-hover-bg); color: var(--color-dark); } .sidebar-nav-item.active { color: var(--color-dark); background: var(--color-active); } .sidebar-nav-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Rótulo do item de nav */ .sidebar-nav-item > span { white-space: nowrap; overflow: hidden; transition: opacity .15s ease, max-width .22s ease; max-width: 160px; } /* Icon box */ .sidebar-icon-box { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; color: var(--color-icon); transition: background .13s, border-color .13s, color .13s; } .sidebar-nav-item:hover .sidebar-icon-box { border-color: var(--color-border2); color: var(--color-dark); } .sidebar-nav-item.active .sidebar-icon-box { background: var(--color-logo-bg); border-color: var(--color-logo-bg); color: var(--color-logo-text); } /* User section (bottom do sidebar esquerdo) */ .sidebar-user-area { padding: 0.875rem 0.75rem 0.875rem 1.15rem; border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; transition: padding .22s ease, justify-content .22s ease; } .sidebar-user-menu-btn { padding: 0.4rem !important; margin-left: auto; background: transparent !important; border: 0 !important; color: var(--color-muted) !important; font-size: 1.1rem !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; transition: color .13s, background .13s; min-width: auto !important; height: auto !important; line-height: 1; } .sidebar-user-menu-btn::after { display: none !important; content: none !important; } .sidebar-user-menu-btn:hover { color: var(--color-dark) !important; background: var(--color-hover-bg) !important; border-radius: 6px; } .sidebar-user-menu-btn:focus, .sidebar-user-menu-btn.show, .sidebar-user-menu-btn:active { color: var(--color-dark) !important; background: transparent !important; box-shadow: none !important; outline: none !important; border: 0 !important; } .sidebar-user-menu { position: relative; overflow: visible !important; } .sidebar-avatar-trigger { display: none; } /* Sem overflow:hidden aqui (propositalmente, mesmo motivo do .canvas-toggle-btn-avatar acima) — só no wrapper cortaria a bolinha de mensagem não lida (.msg-unread-dot), que fica levemente pra fora da borda do avatar; o recorte redondo da imagem continua vindo do overflow:hidden do próprio .sidebar-user-avatar, um nível abaixo. */ .sidebar-user-avatar-wrap { position: relative; flex-shrink: 0; cursor: pointer; } .sidebar-user-avatar { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--color-avatar-from), var(--color-avatar-to)); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; color: var(--color-avatar-text); } .sidebar-user-avatar-image { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-user-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; overflow: hidden; transition: opacity .15s ease, max-width .22s ease; max-width: 160px; } .sidebar-user-name { font-size: .78rem; font-weight: 500; color: var(--color-dark); line-height: 1.2; } .sidebar-user-sub { font-size: .68rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-badge { display: inline-block; font-size: .65rem; font-weight: 700; background: var(--color-badge-bg); color: var(--color-badge-text); padding: 1px 8px; border-radius: 20px; margin-top: 2px; } .sidebar-user-dropdown { min-width: 270px; padding: 0; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16); z-index: 1200; } .sidebar-user-dropdown-title { display: block; padding: .55rem .75rem .25rem; font-size: .72rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; } /* ── Content Header ─────────────────────────────────────────── */ .content-header { height: var(--content-header); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 1rem; gap: 0.75rem; position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .header-brand { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header-brand-logo { width: 28px; height: 28px; object-fit: contain; display: block; } .header-brand-name { font-size: 0.8rem; font-weight: 700; color: var(--color-dark); white-space: nowrap; } @media (max-width: 991.98px) { .header-brand-name { display: none; } } /* Botões de toggle dos offcanvas */ .canvas-toggle-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); cursor: pointer; font-size: 1.2rem; transition: background .13s, color .13s, border-color .13s; flex-shrink: 0; } /* Botão do painel direito com avatar do usuário em vez de ícone genérico. Sem overflow:hidden aqui (propositalmente) — cortaria a bolinha de mensagem não lida (.msg-unread-dot), que fica levemente pra fora da borda do botão; a imagem do avatar fica redonda por conta própria (border-radius abaixo). */ .canvas-toggle-btn.canvas-toggle-btn-avatar { padding: 0; border-radius: 50%; border-color: transparent; background: linear-gradient(135deg, var(--color-avatar-from), var(--color-avatar-to)); color: var(--color-avatar-text); font-weight: 700; font-size: .875rem; } .canvas-toggle-btn-avatar-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .canvas-toggle-btn:hover { background: var(--color-hover-bg); border-color: var(--color-border2); color: var(--color-dark); } /* Breadcrumb in header */ .content-header .breadcrumb { margin: 0; font-size: .875rem; align-items: center; } .content-header .breadcrumb-item a { color: var(--color-muted); display: inline-flex; align-items: center; gap: 3px; transition: color .13s; } .content-header .breadcrumb-item a:hover { color: var(--color-dark); } .content-header .breadcrumb-item.active { font-weight: 600; color: var(--color-dark); } .content-header .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--color-border2); } /* Celular: breadcrumb menor pra não cortar/truncar em telas estreitas (iPhone) */ @media (max-width: 767.98px) { .content-header .breadcrumb { font-size: .75rem; } } .content-header .breadcrumb-close-btn { width: 2rem; height: 2rem; border-radius: 999px; background: transparent; color: var(--color-muted); font-size: 1rem; font-weight: 500; line-height: 1; border: 0; box-shadow: none; transition: color .13s; } .content-header .breadcrumb-close-btn:hover, .content-header .breadcrumb-close-btn:focus-visible { background: transparent; color: var(--color-dark); box-shadow: none; } /* ── Page Content ───────────────────────────────────────────── */ .page-content { flex: 1; /* Cor de superfície do tema (branco no claro, escuro no escuro) em vez do cinza padrão do fundo da página (--color-bg, herdado do body) — mesma cor dos cards/caixas (.card, .app-card, .card-views etc.) que ficam dentro do conteúdo, pra não sobrar um cinza ao redor deles. Vale pra toda tela do sistema (listagens, formulários, dashboards, hubs de módulo etc.), já que .page-content = #main-content é o wrapper genérico do layout em main/base.html. */ background-color: var(--color-surface); /* Sem isso, um item flex não encolhe abaixo da largura do próprio conteúdo — com uma tabela larga dentro, .page-content tentava crescer em vez de deixar o .fixed-table-body (que tem overflow-x próprio) rolar sozinho, e como o overflow-x abaixo é hidden, ficava cortado em vez de rolável em lugar nenhum. */ min-width: 0; height: 0; overflow-y: auto; /* Sem overflow-x explícito, o navegador computa "auto" pro eixo X também (regra do spec: overflow-y != visible força overflow-x pra auto) — daí qualquer conteúdo 1px mais largo que o container (borda, scrollbar, etc.) habilitava scroll/bounce lateral no iOS. .page-content nunca deve rolar horizontalmente; conteúdo largo (tabelas etc.) rola no próprio container. */ overflow-x: hidden; overscroll-behavior: contain; padding: 1.75rem; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .page-content::-webkit-scrollbar { width: 5px; } .page-content::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 3px; } .page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .page-title { font-size: 1.2rem; font-weight: 700; color: var(--color-dark); margin: 0; } /* ── Footer ─────────────────────────────────────────────────── */ .app-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); height: var(--footer-height); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; font-size: .78rem; color: var(--color-muted); flex-shrink: 0; } /* ── Right Panel ─────────────────────────────────────────────── */ /* Área fixa: botão de colapso */ .rp-fixed-top { flex-shrink: 0; padding: 0.5rem 0.65rem 0; } /* Botão de colapso direito */ .rp-collapse-btn { color: var(--color-muted); flex-direction: row-reverse; } .rp-collapse-btn:hover { background: var(--color-hover-bg); color: var(--color-dark); } .rp-collapse-btn .sidebar-icon-box { margin-left: auto; } /* Estado colapsado — direito */ .app-layout.right-collapsed .rp-fixed-top { padding-left: 0.25rem; padding-right: 0.25rem; } .app-layout.right-collapsed .rp-collapse-btn { justify-content: center; padding: 0.33rem 0; flex-direction: row; } .app-layout.right-collapsed .rp-collapse-btn .sidebar-icon-box { margin-left: 0; } .app-layout.right-collapsed .rp-user-section { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; } .app-layout.right-collapsed .rp-user-info { opacity: 0; max-width: 0; } .app-layout.right-collapsed .rp-body { display: none; } /* Perfil */ .rp-user-section { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; transition: padding .22s ease, justify-content .22s ease; } .rp-user-info { overflow: hidden; white-space: nowrap; transition: opacity .15s ease, max-width .22s ease; max-width: 200px; } /* Corpo rolável do painel direito */ .rp-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .rp-body::-webkit-scrollbar { width: 3px; } .rp-body::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 2px; } .rp-alert-item { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .75rem; } .rp-alert-item:last-child { margin-bottom: 0; } .rp-alert-icon { font-size: .95rem; margin-top: 1px; flex-shrink: 0; } .rp-alert-title { font-size: .8375rem; font-weight: 600; color: var(--color-dark); line-height: 1.2; } .rp-alert-desc { font-size: .78rem; color: var(--color-muted); margin-top: 1px; } .rp-quick-link { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 8px; font-size: .8375rem; font-weight: 500; color: var(--color-dark); margin-bottom: 2px; transition: background .13s; } .rp-quick-link i:first-child { font-size: 1rem; color: var(--color-muted); width: 20px; text-align: center; } .rp-quick-link:hover { background: var(--color-hover-bg); color: var(--color-dark); } .rp-footer { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; } .rp-footer-link { display: flex; align-items: center; gap: .65rem; padding: .45rem .65rem; border-radius: 8px; font-size: .8375rem; font-weight: 500; color: var(--color-muted); transition: background .13s, color .13s; } .rp-footer-link i { font-size: 1rem; } .rp-footer-link:hover { background: var(--color-hover-bg); color: var(--color-dark); } .rp-footer-link.text-danger { color: #dc3545 !important; } .rp-footer-link.text-danger:hover { background: #fff5f5; } /* ── Module Cards (settings page) ───────────────────────────── */ .modules-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1.5rem; } .modules-filter { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.4rem 0.75rem; font-size: .8375rem; color: var(--color-muted); min-width: 200px; } .modules-filter i { font-size: 1rem; } .modules-filter input { border: none; outline: none; background: transparent; font-size: .8375rem; color: var(--color-dark); flex: 1; min-width: 0; } .modules-filter input::placeholder { color: var(--color-muted); } .view-toggle-btn { width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-muted); cursor: pointer; font-size: 1rem; transition: background .13s, color .13s, border-color .13s; } .view-toggle-btn:hover, .view-toggle-btn.active { background: var(--color-logo-bg); border-color: var(--color-logo-bg); color: var(--color-logo-text); } .module-card { display: flex; flex-direction: column; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 2rem 1rem 1.5rem; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; text-decoration: none; color: var(--color-dark); height: 100%; } .module-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.07); transform: translateY(-2px); border-color: var(--color-border2); text-decoration: none; color: var(--color-dark); } .module-icon-box { width: 76px; height: 76px; border: 1px solid var(--color-border); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: var(--color-surface); transition: border-color .15s; } .module-card:hover .module-icon-box { border-color: var(--color-border2); } .module-icon-box i { font-size: 1.9rem; color: var(--color-dark); } .module-label { font-size: .8375rem; font-weight: 600; color: var(--color-dark); text-align: center; line-height: 1.35; } /* ── Stat Cards ─────────────────────────────────────────────── */ .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; transition: box-shadow .15s; } .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-box); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem; color: #fff; } .stat-icon.blue { background: #2563eb; } .stat-icon.green { background: #059669; } .stat-icon.orange { background: #d97706; } .stat-icon.purple { background: #7c3aed; } .stat-value { font-size: 1.65rem; font-weight: 800; color: var(--color-dark); line-height: 1; letter-spacing: -.4px; } .stat-label { font-size: .8rem; color: var(--color-muted); margin-top: .25rem; } .stat-trend { font-size: .72rem; font-weight: 600; color: #059669; display: flex; align-items: center; gap: 2px; margin-top: .3rem; } /* ── App Card (generic) ─────────────────────────────────────── */ .app-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; } .app-card > .card-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: .875rem 1.25rem; font-weight: 700; font-size: .9375rem; color: var(--color-dark); display: flex; align-items: center; justify-content: space-between; } .app-card > .card-footer { background: var(--color-surface2); border-top: 1px solid var(--color-border); padding: .65rem 1.25rem; } /* ── Table ──────────────────────────────────────────────────── */ .table { font-size: .875rem; margin: 0; } .table thead th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); background: var(--color-surface2); border-bottom: 2px solid var(--color-border); padding: .65rem 1.25rem; white-space: nowrap; } .table tbody td { padding: .75rem 1.25rem; vertical-align: middle; border-bottom: 1px solid var(--color-table-row-border); } .table tbody tr:last-child td { border-bottom: none; } .table-hover tbody tr:hover td { background: var(--color-table-hover); } /* ── Badges ─────────────────────────────────────────────────── */ .badge-soft-success { background: #d1fae5; color: #065f46; } .badge-soft-warning { background: #fef3c7; color: #92400e; } .badge-soft-danger { background: #fee2e2; color: #991b1b; } .badge-soft-info { background: #dbeafe; color: #1e40af; } .badge-soft-secondary{ background: #f1f3f5; color: #6c757d; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { font-size: .82rem; line-height: 1.2; min-height: calc(1.5em + 0.75rem + 2px); display: inline-flex; align-items: center; justify-content: center; } .btn-dark-custom { background: var(--color-logo-bg); color: var(--color-logo-text); border: none; border-radius: 9px; padding: .44rem .99rem; font-size: .84rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; transition: opacity .13s; cursor: pointer; } .btn-dark-custom:hover { opacity: .85; color: var(--color-logo-text); } .btn-outline-custom { background: var(--color-surface); color: var(--color-dark); border: 1px solid var(--color-border); border-radius: 9px; padding: .44rem .99rem; font-size: .84rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .4rem; transition: background .13s, border-color .13s; cursor: pointer; } .btn-outline-custom:hover { background: var(--color-hover-bg); border-color: var(--color-border2); } .btn-check:checked + .btn-outline-custom, .btn-check:active + .btn-outline-custom, .btn-outline-custom.active, .btn-outline-custom.dropdown-toggle.show { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } .btn-check:focus + .btn-outline-custom, .btn-outline-custom:focus { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-primary) 28%, transparent); } .btn-check:disabled + .btn-outline-custom, .btn-outline-custom.disabled, .btn-outline-custom:disabled { opacity: .65; pointer-events: none; } /* Bootstrap primary palette aligned with theme */ .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 88%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 78%, #000); --bs-btn-disabled-bg: color-mix(in srgb, var(--color-primary) 65%, #fff); --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-primary) 65%, #fff); } .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 85%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 85%, #000); --bs-btn-disabled-color: color-mix(in srgb, var(--color-primary) 60%, #fff); --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-primary) 60%, #fff); } .text-primary, .link-primary { color: var(--color-primary) !important; } .link-primary:hover, .link-primary:focus { color: color-mix(in srgb, var(--color-primary) 85%, #000) !important; } .bg-primary { background-color: var(--color-primary) !important; } .border-primary { border-color: var(--color-primary) !important; } /* ── Progress ───────────────────────────────────────────────── */ .progress { height: 5px; border-radius: 3px; background: var(--color-border); } /* ── Empty State ────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 3.5rem 2rem; } .empty-state i { font-size: 3rem; color: var(--color-border2); display: block; margin-bottom: 1rem; } .empty-state h5 { color: var(--color-dark); font-weight: 700; } /* ── Error Pages ────────────────────────────────────────────── */ .error-page-icon { font-size: 3rem; display: block; margin-bottom: 1rem; } .error-page-icon.muted { color: var(--color-border2); } .error-page-icon.danger { color: #fa5252; } .error-page-desc { font-size: .875rem; } /* ── Table search (inline na card-header) ───────────────────── */ .table-search { display: flex; align-items: center; gap: .5rem; background: var(--color-surface2); border: 1px solid var(--color-border); border-radius: 8px; padding: .35rem .75rem; } .table-search i { font-size: .9rem; } .table-search-input { border: none; background: transparent; outline: none; font-size: .8375rem; width: 160px; } .pagination-info { font-size: .8rem; } /* ── Module list view ───────────────────────────────────────── */ .module-list-item { cursor: pointer; font-size: .875rem; } .module-list-icon { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; } .module-list-icon i { font-size: 1.1rem; } .module-list-chevron { font-size: .8rem; } /* ── Dashboard ──────────────────────────────────────────────── */ .btn-xs { font-size: .78rem; padding: .25rem .7rem; } .prod-line-label { font-size: .8rem; } .alert-icon { flex-shrink: 0; } .alert-title { font-size: .8375rem; } .alert-desc { font-size: .78rem; } /* ── Bootstrap component overrides — usa variáveis do tema ───── */ /* Card */ .card { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .card-header { background-color: var(--color-surface2); border-bottom-color: var(--color-border); color: var(--color-dark); } .card-footer { background-color: var(--color-surface2); border-top-color: var(--color-border); } /* Form controls */ .form-control, .form-select { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .form-select { --bs-form-select-focus-border-color: var(--color-primary); --bs-form-select-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 20%, transparent); } .form-control:focus, .form-select:focus { background-color: var(--color-surface); border-color: var(--color-primary); color: var(--color-text); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 20%, transparent); } .form-select option { background-color: var(--color-surface); color: var(--color-text); } .form-select option:checked, .form-select option:hover { background-color: var(--color-primary); color: #fff; } /* Dropdowns em linhas de CRUD (contatos, atributos, itens de orçamento etc.): largura ajustada ao texto da opção selecionada, em vez de esticar para 100% da coluna/container (padrão do Bootstrap .form-select). */ .form-select-auto { width: auto; min-width: 6rem; max-width: 100%; } /* Better selection paint for multi-select in Chromium/Firefox */ select.form-select[multiple] option:checked { background: linear-gradient(var(--color-primary), var(--color-primary)); color: #fff; } .form-control::placeholder { color: var(--color-muted); } .form-label { color: var(--color-dark); margin-bottom: 0.25rem; } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .form-check-label { color: var(--color-text); } /* Botões de refresh (query/table): alinhamento no topo dentro de flex containers */ .query-refresh-btn, #btnRefresh, [data-query-refresh-btn] { align-self: flex-start; } /* Botões refresh e add lado a lado no dropdown_field: forçar tamanho idêntico */ [data-query-refresh-btn], [data-dropdown-add-btn] { height: 2.1rem; min-height: 0; padding: 0 0.75rem; font-size: 0.82rem; line-height: 1; flex-shrink: 0; } /* Range (slider) */ .form-range { --bs-form-range-thumb-bg: var(--color-primary); --bs-form-range-thumb-active-bg: var(--color-primary); --bs-form-range-track-bg: var(--color-border); --bs-form-range-thumb-focus-box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 .25rem color-mix(in srgb, var(--color-primary) 25%, transparent); } .form-range::-webkit-slider-thumb { background-color: var(--color-primary); } .form-range::-moz-range-thumb { background-color: var(--color-primary); border-color: var(--color-primary); } .form-range::-moz-range-progress { background-color: color-mix(in srgb, var(--color-primary) 55%, transparent); } .slider-field-vertical { position: relative; width: 2rem; height: 170px; margin: 0; } .slider-field { position: relative; } .slider-field-show-value:not(.slider-field-vertical) { margin-bottom: 2.15rem; } .slider-field-vertical .slider-vertical-input { position: absolute; top: 50%; left: 50%; width: 170px; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; } .slider-value-badge, .range-value-badge { position: absolute; z-index: 6; min-width: 2rem; padding: .1rem .35rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .72rem; line-height: 1.2; text-align: center; pointer-events: none; white-space: nowrap; } /* Dual range (duas bolinhas no mesmo trilho) */ .dual-range { position: relative; height: 30px; } .dual-range-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: .5rem; border-radius: 999px; background: var(--color-border); z-index: 1; } .dual-range-selected { position: absolute; top: 50%; transform: translateY(-50%); height: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 70%, #fff); z-index: 2; } .range-field-vertical .dual-range { width: 30px; height: 170px; margin: 0; } .range-field-show-value:not(.range-field-vertical) { margin-bottom: 2.65rem; } .range-field-vertical .dual-range-track { top: 0; bottom: 0; left: 50%; right: auto; width: .5rem; height: auto; transform: translateX(-50%); } .range-field-vertical .dual-range-selected { top: auto; left: 50%; width: .5rem; transform: translateX(-50%); } .dual-range-input { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; z-index: 2; } .range-field-vertical .dual-range-input { top: 50%; left: 50%; width: 170px; height: 30px; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; } .dual-range-start { z-index: 3; } .dual-range-end { z-index: 4; } .dual-range-input::-webkit-slider-runnable-track { height: .5rem; background: transparent; border: 0; } .dual-range-input::-moz-range-track { height: .5rem; background: transparent; border: 0; } .dual-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-primary); border: 0; margin-top: calc((.5rem - 1rem) / 2); pointer-events: auto; } .dual-range-input::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-primary); border: 0; pointer-events: auto; } /* List group */ .list-group-item { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--color-hover-bg); color: var(--color-dark); } .list-group-item.active { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .list-group-item.disabled { color: var(--color-muted); background-color: var(--color-surface); } /* Nav tabs — cada aba vira uma "etiqueta" com borda nos 4 lados (inclusive embaixo) quando inativa, pra ficar clara mesmo sem hover; a ativa se destaca com fundo próprio, texto em negrito e um traço colorido no topo, e apaga só a borda de baixo pra parecer "colada" ao conteúdo abaixo. */ .nav-tabs { border-bottom-color: var(--color-border); gap: 4px; } .nav-tabs .nav-link { color: var(--color-muted); background-color: var(--color-surface2); border: 1px solid var(--color-border); border-bottom-color: var(--color-border); border-top-left-radius: .375rem; border-top-right-radius: .375rem; } .nav-tabs .nav-link:hover { border-color: var(--color-border2); border-bottom-color: var(--color-border2); background-color: var(--color-active); color: var(--color-dark); } .nav-tabs .nav-link.active { background-color: var(--color-surface); border-color: var(--color-border) var(--color-border) var(--color-surface); box-shadow: inset 0 2px 0 var(--color-dark); color: var(--color-dark); font-weight: 600; } /* Celular: só muda o layout (abas empilhadas em largura total em vez de lado a lado) — cores, fundo, borda e fonte continuam as mesmas regras de .nav-tabs/.nav-link/.nav-link.active de cima, sem overrides. */ @media (max-width: 767.98px) { .nav-tabs { flex-direction: column; flex-wrap: nowrap; } .nav-tabs .nav-item { width: 100%; } .nav-tabs .nav-link { width: 100%; text-align: left; } } /* Nav pills */ .nav-pills .nav-link { color: var(--color-muted); } .nav-pills .nav-link.active { background-color: var(--color-primary); color: #fff; } /* Accordion */ .accordion-item { background-color: var(--color-surface); border-color: var(--color-border); } .accordion-button { background-color: var(--color-surface); color: var(--color-dark); } .accordion-button:not(.collapsed) { background-color: var(--color-active); color: var(--color-dark); box-shadow: inset 0 -1px 0 var(--color-border); } .accordion-button::after { filter: none; } .accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 20%, transparent); border-color: var(--color-primary); } .accordion-body { color: var(--color-text); } /* Modal */ .modal-content { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .modal-header { border-bottom-color: var(--color-border); color: var(--color-dark); } .modal-footer { border-top-color: var(--color-border); background-color: var(--color-surface2); } .modal-title { color: var(--color-dark); } /* Alert — tint usando color-mix */ .alert-primary { background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); color: var(--color-dark); } .alert-success { background-color: color-mix(in srgb, #16a34a 12%, var(--color-surface)); border-color: color-mix(in srgb, #16a34a 30%, transparent); color: #064e3b; } .alert-warning { background-color: color-mix(in srgb, #d97706 12%, var(--color-surface)); border-color: color-mix(in srgb, #d97706 30%, transparent); color: #78350f; } .alert-danger { background-color: color-mix(in srgb, #dc2626 12%, var(--color-surface)); border-color: color-mix(in srgb, #dc2626 30%, transparent); color: #7f1d1d; } .alert-info { background-color: color-mix(in srgb, #0891b2 12%, var(--color-surface)); border-color: color-mix(in srgb, #0891b2 30%, transparent); color: #0c4a6e; } /* Progress */ .progress { background-color: var(--color-surface2); } .progress-bar { background-color: var(--color-primary); } /* Table */ .table { color: var(--color-text); } .table thead th { background-color: var(--color-surface2); color: var(--color-muted); border-bottom-color: var(--color-border); } .table tbody td { border-bottom-color: var(--color-table-row-border); } .table-hover tbody tr:hover td { background-color: var(--color-table-hover); } .table > :not(caption) > * > * { background-color: transparent; } /* Buttons — primary usa a cor do tema */ .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: color-mix(in srgb, var(--color-primary) 85%, #000); border-color: color-mix(in srgb, var(--color-primary) 85%, #000); color: #fff; } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Badge primary */ .badge.bg-primary { background-color: var(--color-primary) !important; } /* Dropdown menu items — use theme color instead of Bootstrap blue */ .dropdown-item { color: var(--color-text) !important; background-color: transparent !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important; color: var(--color-text) !important; } .dropdown-item.active, .dropdown-item:active { background-color: var(--color-primary) !important; color: #fff !important; } .dropdown-item.disabled, .dropdown-item:disabled { color: var(--color-muted) !important; background-color: transparent !important; } /* Extra specificity for button.dropdown-item */ button.dropdown-item { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; color: var(--color-text) !important; background-color: transparent !important; } button.dropdown-item:hover, button.dropdown-item:focus { background-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important; color: var(--color-text) !important; } button.dropdown-item.active, button.dropdown-item:active { background-color: var(--color-primary) !important; color: #fff !important; } /* Remove spacing from dropdown-menu with only dropdown-items */ .dropdown-menu.position-static { padding: 0 !important; } /* Coluna "Designer" da listagem de Artes: texto clicável simples (sem visual de botão nem sublinhado) que abre o modal de atribuição — ver designerAssignFormatter / openDesignerAssignModal em table.js. */ .designer-assign-trigger, .designer-assign-trigger:hover, .designer-assign-trigger:focus { text-decoration: none; } /* Menu de ações do grid (bootstrap-table): largura adaptável ao texto mais longo, sem quebrar linha nem cortar o conteúdo. */ .dropdown-menu-actions { width: max-content; min-width: 10rem; max-width: none; } .dropdown-menu-actions .dropdown-item { white-space: nowrap; } /* Scrollbar mobile offcanvas */ .offcanvas { background-color: var(--color-sidebar, var(--color-surface)); color: var(--color-text); } .offcanvas-header { border-bottom-color: var(--color-border); } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 991.98px) { .page-content { padding: 1.25rem; } /* Altura extra no topo pra não cortar sob o notch/dynamic island do iPhone */ .content-header { min-height: calc(var(--content-header) + 1.25rem); height: auto; padding: 1.25rem .875rem .625rem; flex-wrap: wrap; row-gap: .375rem; } /* Breadcrumb sempre na linha de baixo, sem espremer/quebrar no meio junto com os botões de menu/perfil (evita quebra estranha em trilhas longas) */ .content-header > .header-breadcrumb-wrap { order: 1; flex-basis: 100%; } /* Sem o breadcrumb (flex-grow) na linha 1, o botão de avatar precisa do próprio empurrão pra continuar encostado na direita */ .content-header > .canvas-toggle-btn:last-of-type { margin-left: auto; } .app-footer { justify-content: center; text-align: center; } } @media (max-width: 575.98px) { .page-content { padding: 1rem; } .modules-filter { min-width: 140px; } .stat-value { font-size: 1.35rem; } .app-footer .footer-right { display: none; } } /* Celular: aproveitar a largura real da tela — o espaçamento lateral acumulava várias camadas (page-content + gutter do container-fluid + cards + cabeçalho), somando até ~50px de cada lado. Reduz tudo pra 5px, mantendo o espaçamento vertical como está. */ @media (max-width: 767.98px) { .page-content { padding-left: 5px !important; padding-right: 5px !important; } .content-header { padding-left: 5px !important; padding-right: 5px !important; } .container-fluid { padding-left: 5px !important; padding-right: 5px !important; } #main-content > .page-heading { padding-left: 5px !important; padding-right: 5px !important; } .app-card { padding-left: 5px !important; padding-right: 5px !important; } .card-body { padding-left: 5px !important; padding-right: 5px !important; } /* Botões de visualização dos módulos (card/redondo/lista + tamanho): ficam colados na direita (justify-content-end) — centralizados no celular. */ #modulesViewToggle { justify-content: center !important; } } /* ── Modules Cards ──────────────────────────────────────────── */ .modules-wrapper { --modules-tile-size: 7.6rem; --modules-icon-size: 3.2rem; --modules-icon-round-size: 2.4rem; --modules-card-label-size: calc(.85rem - 1pt); --modules-list-label-size: calc(.95rem - 1pt); } /* Tamanhos dinâmicos via botões +/- */ .modules-wrapper[data-size="sm"] { --modules-tile-size: 6.4rem; --modules-icon-size: 2.6rem; --modules-icon-round-size: 2rem; --modules-card-label-size: calc(.79rem - 1pt); --modules-list-label-size: calc(.89rem - 1pt); } .modules-wrapper[data-size="lg"] { --modules-tile-size: 9rem; --modules-icon-size: 3.8rem; --modules-icon-round-size: 2.9rem; --modules-card-label-size: calc(.91rem - 1pt); --modules-list-label-size: calc(1.01rem - 1pt); } .modules-cards-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 1rem; } /* Tablet mantém o mesmo alinhamento do desktop (flex-start). No celular: o alinhamento entre linhas continua sempre flex-start (a última linha fica embaixo da linha de cima) — o que muda aqui é só se o BLOCO inteiro da grade fica encostado à esquerda ou centralizado como um todo na tela; a largura exata do bloco (pra centralizar sem "esticar" e sem descentralizar o alinhamento entre linhas) é calculada e aplicada via JS — ver _modules_cards.html. */ @media (max-width: 767.98px) { .modules-cards-grid.modules-cards-grid--center-block { margin-left: auto; margin-right: auto; } } .modules-cards-grid > .col { flex: 0 0 var(--modules-tile-size); width: var(--modules-tile-size); max-width: var(--modules-tile-size); padding-right: 0; padding-left: 0; } /* ── Modo card (padrão) ── */ .modules-card { aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--color-border); border-radius: var(--border-radius, .5rem); background-color: var(--color-surface); color: var(--color-text); box-shadow: none; transition: box-shadow .18s ease, transform .18s ease; cursor: pointer; } .modules-card .card-body { padding: 1rem; } .modules-card:hover, .modules-card:focus-visible { box-shadow: 0 8px 24px rgba(0,0,0,.22); transform: translateY(-3px); outline: none; } .modules-card-icon { font-size: var(--modules-icon-size); line-height: 1; } .modules-card-label { line-height: 1.3; font-size: var(--modules-card-label-size); } /* Tiles de produção (Locais/Setores/Máquinas/Serviços): o fundo do card segue o status em cascata — vermelho (algum setor/máquina abaixo dele está em parada, o mais crítico), verde (tem item em andamento) ou amarelo (parado/sem nada acontecendo). Um nível herda o pior status de tudo que está abaixo dele (ver campo "parada" cascateado e _status_cor em _modules_cards.html). Tiles fora de produção (Home, Vendas...) nunca recebem nenhuma dessas classes, então não são afetados. */ .modules-card.modules-card-status-red, .modules-list-item.modules-list-item-status-red { background-color: #dc3545; border-color: #dc3545; } .modules-card.modules-card-status-red .modules-card-icon, .modules-card.modules-card-status-red .modules-card-label, .modules-list-item.modules-list-item-status-red .modules-list-icon, .modules-list-item.modules-list-item-status-red .modules-list-label { color: #fff; } .modules-card.modules-card-status-red:hover, .modules-card.modules-card-status-red:focus-visible { background-color: #b02a37; border-color: #b02a37; color: #fff; } .modules-card.modules-card-status-yellow, .modules-list-item.modules-list-item-status-yellow { background-color: #ffc107; border-color: #ffc107; } .modules-card.modules-card-status-yellow .modules-card-icon, .modules-card.modules-card-status-yellow .modules-card-label, .modules-list-item.modules-list-item-status-yellow .modules-list-icon, .modules-list-item.modules-list-item-status-yellow .modules-list-label { color: #000; } .modules-card.modules-card-status-yellow:hover, .modules-card.modules-card-status-yellow:focus-visible { background-color: #e0a800; border-color: #e0a800; color: #000; } .modules-card.modules-card-status-green, .modules-list-item.modules-list-item-status-green { background-color: #198754; border-color: #198754; } .modules-card.modules-card-status-green .modules-card-icon, .modules-card.modules-card-status-green .modules-card-label, .modules-list-item.modules-list-item-status-green .modules-list-icon, .modules-list-item.modules-list-item-status-green .modules-list-label { color: #fff; } .modules-card.modules-card-status-green:hover, .modules-card.modules-card-status-green:focus-visible { background-color: #157347; border-color: #157347; color: #fff; } .modules-count-fila { background-color: #000; color: #fff; } .modules-count-fila-idle { background-color: transparent; color: var(--color-idle, #adb5bd); border: 1px solid var(--color-border); } .modules-card.disabled, .modules-list-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Cluster de avatares sobrepostos ("quem trabalha aqui" — usuários ligados aos estágios de produção deste Local/Setor/Máquina/Serviço, ver estagios_producao_usuarios). Clique abre o modal com a lista completa (nome + avatar de cada um); z-index acima do card para ficar clicável. */ .modules-avatars-trigger { display: inline-flex; align-items: center; cursor: pointer; margin-top: 2px; position: relative; z-index: 2; } .modules-avatars-thumb { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--color-surface2, #e9ecef); border: 2px solid var(--color-bg, #fff); margin-left: -8px; } .modules-avatars-thumb:first-child { margin-left: 0; } .modules-avatars-more { width: 20px; height: 20px; border-radius: 50%; background: var(--color-muted, #6c757d); color: #fff; font-size: calc(.62rem - 1pt); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; border: 2px solid var(--color-bg, #fff); } .modules-avatars-modal-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--color-surface2, #e9ecef); flex-shrink: 0; } /* Destaque de quem está com uma fase em andamento agora (não só "pode trabalhar aqui" — ver campo "ativo" em _USUARIOS_POR_*_SQL). */ .modules-avatars-thumb-ativo { border-color: #28a745; box-shadow: 0 0 0 1px #28a745; } .modules-avatars-modal-row-ativo { background-color: rgba(40, 167, 69, .12); } /* Box abaixo do ícone/card com a fila (itens ou nº de filas) — largura igual à do item (o .col já é a largura fixa do tile). Cor vem só das classes Bootstrap (bg-info/bg-warning + text-dark), as mesmas do modo lista, para não ter uma paleta diferente por modo de visualização. */ .modules-count-box { font-size: calc(.72rem - 1pt); line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Modo redondo ── */ [data-view="round"] .modules-card { border-radius: 50% !important; border-width: 2px; } [data-view="round"] .modules-card .card-body { padding: .5rem; } [data-view="round"] .modules-card-label { display: block; } [data-view="round"] .modules-card-icon { font-size: var(--modules-icon-round-size); } /* ── Modo lista ── */ .modules-list-view { border: 1px solid var(--color-border); border-radius: var(--border-radius, .5rem); overflow: hidden; background-color: var(--color-surface); } .modules-list-item { color: var(--color-text); border-bottom: 1px solid var(--color-border); transition: background-color .15s ease; } .modules-list-item:last-child { border-bottom: none; } .modules-list-item:hover, .modules-list-item:focus-visible { background-color: var(--color-primary-subtle, rgba(0,0,0,.05)); outline: none; } .modules-list-icon { font-size: 1.4rem; width: 1.6rem; text-align: center; flex-shrink: 0; } .modules-list-label { font-size: var(--modules-list-label-size); } /* ── Catálogo de produtos (drill-down, campo catalog_field) ────────────────── */ .catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; } .catalogo-grid.is-invalid { outline: 1px solid var(--color-danger, #dc3545); outline-offset: .4rem; border-radius: .6rem; } .catalogo-card { position: relative; border: 1.5px solid var(--color-border); border-radius: .6rem; padding: .5rem; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; } .catalogo-card:hover { border-color: var(--color-primary); } .catalogo-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent); } .catalogo-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-surface2, var(--color-surface)); border-radius: .45rem; display: block; } .catalogo-img-placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-surface2, var(--color-surface)); color: var(--color-muted); font-size: 1.8rem; } .catalogo-label { margin-top: .4rem; font-size: .82rem; color: var(--color-text); line-height: 1.25; display: flex; flex-direction: column; gap: .1rem; } .catalogo-produto { font-weight: 600; } .catalogo-meta { font-size: .73rem; color: var(--color-muted); } .catalogo-check { position: absolute; top: .35rem; right: .35rem; color: var(--color-primary); font-size: 1.1rem; background: var(--color-surface); border-radius: 50%; line-height: 1; display: none; } .catalogo-card.is-selected .catalogo-check { display: block; } /* ── Estrutura de nível do produto, abaixo da imagem dentro do card ──── */ .catalogo-specs-row { font-size: .95rem; font-weight: 700; color: var(--color-text); } .grupo-stack { position: relative; width: 100%; padding-top: 100%; } .grupo-stack-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .grupo-stack-img { position: absolute; width: 78%; height: 78%; object-fit: contain; background: var(--color-surface2, var(--color-surface)); border-radius: .45rem; border: 2px solid var(--color-surface); box-shadow: 0 2px 6px rgba(0,0,0,.14); } .grupo-stack-img:nth-child(4) { transform: rotate(-9deg) translate(-9%, 8%); z-index: 1; } .grupo-stack-img:nth-child(3) { transform: rotate(-5deg) translate(-5%, 4%); z-index: 2; } .grupo-stack-img:nth-child(2) { transform: rotate(-2deg) translate(-2%, 2%); z-index: 3; } .grupo-stack-img:nth-child(1) { transform: rotate( 0deg); z-index: 4; } .grupo-stack-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-surface2, var(--color-surface)); border-radius: .45rem; color: var(--color-muted); font-size: 2rem; } .catalogo-card:hover .grupo-stack-img { filter: brightness(.95); } .cat-nav { display: flex; align-items: center; gap: .35rem; font-size: .875rem; margin-bottom: .75rem; flex-wrap: wrap; } .cat-nav-item { color: var(--color-muted); cursor: pointer; text-decoration: none; background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; transition: color .13s; } .cat-nav-item:hover { color: var(--color-dark, var(--color-text)); } .cat-nav-item:last-child { color: var(--color-dark, var(--color-text)); cursor: default; font-weight: 600; } .cat-nav-sep { color: var(--color-border2, var(--color-border)); } /* ── bootstrap-table (vendor): contém o scroll interno do grid e corrige 100vh do modo fullscreen — não editar o CSS minificado do vendor. */ .bootstrap-table .fixed-table-container .fixed-table-body { overscroll-behavior: contain; } .bootstrap-table.fullscreen { height: 100dvh; } /* ── color_field (Pickr): sem isso, uma cor branca/muito clara escolhida fica praticamente invisível dentro de um card branco — sem nenhuma borda, dá a impressão de que o campo de cor sumiu/não está funcionando. */ .pcr-button { border: 1px solid var(--color-border, #dee2e6); }