:root { --doce-verde: #2e7d32; --doce-verde-escuro: #1b5e20; --doce-verde-vivo: #43a047; --doce-laranja: #ef6c00; --doce-cinza: #f4f6f5; --sidebar-bg-top: #163925; --sidebar-bg-bottom: #0b2015; --sidebar-text: rgba(255,255,255,.72); --sidebar-text-active: #ffffff; --sidebar-item-hover: rgba(255,255,255,.06); --sidebar-item-active: rgba(255,255,255,.1); --sidebar-border: rgba(255,255,255,.08); --app-bg: var(--doce-cinza); --app-text: #1c2521; --app-text-muted: #6c757d; --surface: #ffffff; --th-bg: #eef3f0; --row0-bg: #fbfbfb; --row0-hover: #eef6ee; --row1-bg: #ffffff; --row1-hover: #f6f9ff; --row2-bg: #fafafa; --row2-text: #495057; --dropdown-border: #eee; --badge-comentario-bg: #fff3cd; --badge-comentario-text: #7a5c00; --card-shadow: 0 1px 3px rgba(16,40,26,.06), 0 1px 2px rgba(16,40,26,.08); } [data-bs-theme="dark"] { --app-bg: #10161a; --app-text: #e6e8ea; --app-text-muted: #9aa4a9; --surface: #151b1d; --th-bg: #1e2b26; --row0-bg: #182022; --row0-hover: #1f2f27; --row1-bg: #151b1d; --row1-hover: #1a2630; --row2-bg: #121719; --row2-text: #b7c0c3; --dropdown-border: #2b3538; --badge-comentario-bg: #4a3c0f; --badge-comentario-text: #ffdf80; --card-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3); } body { background-color: var(--app-bg); color: var(--app-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .card { background-color: var(--surface); box-shadow: var(--card-shadow); } .card-header { background-color: var(--th-bg); border-bottom-color: var(--dropdown-border); font-weight: 600; color: var(--app-text); } /* --- Estrutura: sidebar + conteúdo ------------------------------------ */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: 244px; flex-shrink: 0; background: linear-gradient(180deg, var(--sidebar-bg-top), var(--sidebar-bg-bottom)); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width .2s ease; z-index: 10; } .sidebar-brand { padding: 1.25rem 1.1rem 1rem; } .sidebar-logo { width: 100%; max-width: 128px; height: auto; display: block; /* A logo é fornecida em preto sólido; como fica sobre o fundo escuro da barra lateral, invertemos para branco em vez de colocar uma prancheta de fundo atrás dela. */ filter: invert(1); } .sidebar-subtitle { color: rgba(255,255,255,.5); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .6rem; padding-left: .15rem; } .sidebar-brand-mini { display: none; width: 2.2rem; height: 2.2rem; border-radius: 9px; background: linear-gradient(135deg, var(--doce-verde-vivo), var(--doce-laranja)); color: #fff; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; letter-spacing: .02em; margin: 0 auto; } html.sidebar-colapsada .sidebar-brand-mini { display: flex; } .sidebar-toggle { position: absolute; top: 1.35rem; right: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--dropdown-border); background: var(--surface); color: var(--app-text); display: flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); z-index: 6; transition: right .2s ease; } .sidebar-toggle:hover { background: var(--row1-hover); } /* --- Barra lateral recolhida (classe aplicada em ) --------------- */ html.sidebar-colapsada .app-sidebar { width: 76px; } html.sidebar-colapsada .sidebar-nav-item span, html.sidebar-colapsada .sidebar-subtitle, html.sidebar-colapsada .sidebar-footer, html.sidebar-colapsada .sidebar-logo { display: none; } html.sidebar-colapsada .sidebar-brand { display: flex; justify-content: center; padding: 1.25rem 0 1rem; } html.sidebar-colapsada .sidebar-nav-item { justify-content: center; } .sidebar-nav { flex: 1; padding: .5rem .7rem; display: flex; flex-direction: column; gap: .15rem; } .sidebar-nav-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 8px; color: var(--sidebar-text); text-decoration: none; font-size: .89rem; font-weight: 500; border-left: 3px solid transparent; transition: background .12s ease, color .12s ease; } .sidebar-nav-item i { font-size: 1.05rem; width: 1.2rem; text-align: center; } .sidebar-nav-item:hover { background: var(--sidebar-item-hover); color: var(--sidebar-text-active); } .sidebar-nav-item.active { background: var(--sidebar-item-active); color: var(--sidebar-text-active); border-left-color: var(--doce-laranja); font-weight: 600; } .sidebar-conta { padding: .5rem .7rem; border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: .15rem; } .sidebar-footer { padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--sidebar-border); color: rgba(255,255,255,.42); font-size: .72rem; line-height: 1.4; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { background-color: var(--surface); border-bottom: 1px solid var(--dropdown-border); padding: .85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 5; } .app-topbar-titulo { font-size: 1.05rem; font-weight: 700; margin: 0; } .app-topbar-sub { font-size: .78rem; color: var(--app-text-muted); } .app-content { padding: 1.25rem 1.5rem 2rem; } /* --- Botão de tema (agora na topbar) ----------------------------------- */ .btn-tema { background: var(--th-bg); border: 1px solid var(--dropdown-border); color: var(--app-text); border-radius: 50%; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s ease; flex-shrink: 0; } .btn-tema:hover { background: var(--row1-hover); } /* --- Tela de login ------------------------------------------------------ */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--sidebar-bg-top), var(--sidebar-bg-bottom)); padding: 1rem; } .login-card { background: var(--surface); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.35); padding: 2rem 2rem 1.5rem; width: 100%; max-width: 380px; } .login-logo-plate { text-align: center; margin-bottom: .25rem; } .login-logo-plate img { max-width: 190px; width: 100%; height: auto; } [data-bs-theme="dark"] .login-logo-plate img { filter: invert(1); } .login-subtitle { text-align: center; color: var(--app-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.4rem; } .login-footer { text-align: center; color: var(--app-text-muted); font-size: .72rem; margin: 1.2rem 0 0; } .btn-tema:disabled { opacity: .6; cursor: default; } .btn-tema i.girando { animation: girar .7s linear infinite; } @keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn-doce { background-color: var(--doce-laranja); border-color: var(--doce-laranja); color: #fff; } .btn-doce:hover { background-color: #d45f00; border-color: #d45f00; color: #fff; } .filter-card { border: 1px solid var(--dropdown-border); border-radius: 12px; } .kpi-card { border: none; border-radius: 12px; } .kpi-card .card-body { display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.2rem; } .kpi-icone { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .kpi-icone.icone-v0 { background: #eef2f5; color: #55636d; } .kpi-icone.icone-r2 { background: #e3f2fd; color: #1565c0; } .kpi-icone.icone-var-valor { background: #fff3e0; color: var(--doce-laranja); } .kpi-icone.icone-var-pct { background: #e8f5e9; color: var(--doce-verde); } [data-bs-theme="dark"] .kpi-icone.icone-v0 { background: #232c31; color: #b6c2c9; } [data-bs-theme="dark"] .kpi-icone.icone-r2 { background: #142c3d; color: #6fb8f2; } [data-bs-theme="dark"] .kpi-icone.icone-var-valor { background: #3a2812; color: #ffb877; } [data-bs-theme="dark"] .kpi-icone.icone-var-pct { background: #16321a; color: #7fd68a; } .kpi-label { font-size: .74rem; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; font-weight: 600; } .kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--app-text); letter-spacing: -.01em; } .kpi-value.positivo { color: var(--doce-verde); } .kpi-value.negativo { color: #c62828; } .cascata-table th { background-color: var(--th-bg); color: var(--app-text); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; position: sticky; top: 0; } .col-ordenavel { cursor: pointer; user-select: none; white-space: nowrap; } .col-ordenavel:hover { color: var(--doce-verde-escuro); } .sort-icon { display: inline-block; width: .9em; font-size: .9em; opacity: .35; } .col-ordenavel.sort-ativo .sort-icon { opacity: 1; color: var(--doce-laranja); } .cascata-table td, .cascata-table th { vertical-align: middle; font-size: .87rem; } /* Tabela do Custo por Colaborador: uma linha por Centro de Custo, sem níveis de cascata para expandir — aqui vale mais consistência de altura entre linhas do que mostrar o nome inteiro sempre por extenso. Trunca com reticências e mostra o texto completo no title (tooltip). */ .tabela-custo-colaborador { table-layout: fixed; } .tabela-custo-colaborador td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-nivel-0 { cursor: pointer; font-weight: 600; background-color: var(--row0-bg); color: var(--app-text); } .row-nivel-0:hover { background-color: var(--row0-hover); } .row-nivel-1 { cursor: pointer; background-color: var(--row1-bg); color: var(--app-text); } .row-nivel-1:hover { background-color: var(--row1-hover); } .row-nivel-2 { background-color: var(--row2-bg); color: var(--row2-text); } .expansivel { cursor: pointer; } .row-nivel-2.expansivel:hover { background-color: var(--row1-hover); } .toggle-icon { display: inline-block; width: 1em; transition: transform .15s ease; } .toggle-icon.expanded { transform: rotate(90deg); } .indent-1 { padding-left: 1.6rem !important; } .indent-2 { padding-left: 3.1rem !important; } .text-pos { color: var(--doce-verde); font-weight: 600; } .text-neg { color: #c62828; font-weight: 600; } .badge-categoria { font-size: .68rem; font-weight: 500; padding: .25em .5em; } .badge-comentario { font-size: .68rem; font-weight: 500; padding: .25em .5em; background-color: var(--badge-comentario-bg); color: var(--badge-comentario-text); cursor: help; } .ordem-cascata-lista { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; } .ordem-chip { display: flex; align-items: center; gap: .4rem; background: var(--row1-bg); border: 1px solid var(--dropdown-border); border-radius: 8px; padding: .35rem .6rem; font-size: .85rem; color: var(--app-text); cursor: grab; user-select: none; transition: background .15s ease, box-shadow .15s ease, opacity .15s ease; } .ordem-chip:active { cursor: grabbing; } .ordem-chip.arrastando { opacity: .4; } .ordem-chip.arrasto-sobre { box-shadow: inset 0 0 0 2px var(--doce-laranja); } .ordem-chip-numero { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--doce-verde); color: #fff; font-size: .72rem; font-weight: 700; flex-shrink: 0; } .ordem-chip-handle { color: var(--app-text-muted); font-size: .9rem; line-height: 1; } .ordem-chip-setas { display: flex; flex-direction: column; margin-left: .2rem; line-height: 1; } .ordem-chip-setas button { border: none; background: none; color: var(--app-text-muted); font-size: .6rem; padding: 0 .15rem; cursor: pointer; line-height: 1.1; } .ordem-chip-setas button:hover { color: var(--doce-verde-escuro); } .ordem-chip-setas button:disabled { opacity: .25; cursor: default; } .filtro-dropdown-menu { max-height: 280px; overflow-y: auto; min-width: 260px; } .filtro-dropdown-menu .form-check { padding-left: 1.6rem; margin-bottom: 2px; } .filtro-dropdown-menu .form-check-input { margin-left: -1.6rem; } .filtro-dropdown-menu .form-check-label { font-size: .85rem; cursor: pointer; } .filtro-dropdown-actions { display: flex; justify-content: space-between; padding: 0 .25rem .4rem; border-bottom: 1px solid var(--dropdown-border); margin-bottom: .4rem; } .filtro-dropdown-actions a { font-size: .75rem; cursor: pointer; color: var(--doce-verde-escuro); text-decoration: none; } [data-bs-theme="dark"] .filtro-dropdown-actions a { color: #6fcf7a; } .filtro-dropdown-actions a:hover { text-decoration: underline; }