/* ======= SADOC layout base ======= */ /* 1) Define uma variável única para a altura do header (Bootstrap navbar). */ :root { --sadoc-header-h: 56px; /* se ainda fica espaço a mais/menos, ajusta aqui (ex.: 60px ou 64px) */ --topbar-h: 56px; /* 56px é o default do Bootstrap; se a tua navbar for maior, põe 60/64 */ } /* 2) Compensa o header .fixed-top para o conteúdo não ficar por baixo. */ html, body { height: 100%; margin: 0; } body { padding-top: var(--sadoc-header-h); /* empurra conteúdo exatamente a altura do header */ background: #f8f9fa; scrollbar-gutter: stable; /* evita salto quando aparece a scrollbar */ } /* 3) Garante que o header tem MESMO a altura definida e está centrado verticalmente. */ header.navbar.fixed-top { height: var(--sadoc-header-h); display: flex; align-items: center; /* alinha o texto no centro da barra */ box-shadow: 0 .125rem .25rem rgba(0,0,0,.15); /* sombra discreta */ } /* 4) Sidebar ocupa a área útil por baixo do header e tem scroll interno. */ .sidebar { min-height: calc(100vh - var(--sadoc-header-h)); overflow: hidden; } .sidebar-sticky { position: sticky; top: 0; /* já descontámos o header no padding do body */ height: calc(100vh - var(--sadoc-header-h)); overflow-y: auto; padding-bottom: 1rem; } /* Menu lateral sem “dança”: usa sombra interna em vez de border-left */ .sidebar .nav-link { display: block; /* garante bloco completo */ padding: 0.65rem 1rem; color: #333; /* removemos qualquer border-left para não alterar largura */ border-left: 0; box-shadow: inset 3px 0 0 0 transparent; /* placeholder para o estado normal */ } .sidebar .nav-link:hover { background: #f7f7f9; } .sidebar .nav-link.active { background: #eef4ff; /* destaque visual sem alterar o layout (não mexe na largura) */ box-shadow: inset 3px 0 0 0 #0d6efd; font-weight: 600; } /* opcional: remove outlines azuis que às vezes parecem “saltos” visuais ao clicar */ .sidebar .nav-link:focus { outline: none; box-shadow: inset 3px 0 0 0 #0d6efd, 0 0 0 0 rgba(13,110,253,0); /* mantém o marcador ativo */ } /* 6) Evita faixa branca por “margin collapse” no topo do conteúdo. */ main > *:first-child { margin-top: 0 !important; } main { min-height: calc(100vh - var(--sadoc-header-h)); } /* 7) Cartões de estatísticas (dashboard). */ .stat-card .stat-label { font-size: .9rem; color: #6c757d; } .stat-card .stat-value { font-size: 2rem; font-weight: 700; margin-top: .25rem; } /* 8) Mobile: sidebar sem sticky quando colapsada. */ @media (max-width: 767.98px) { .sidebar { min-height: auto; } .sidebar-sticky { position: static; height: auto; overflow: visible; } } /* === Evitar “dança” ao mudar de página (largura muda com scroll bar) === */ /* 1) Reservar sempre espaço para a scroll bar vertical (Chrome/Edge/Safari novos) */ @supports (scrollbar-gutter: stable) { html { scrollbar-gutter: stable both-edges; } } /* 2) Fallback universal: força presença da scroll bar (mesmo sem conteúdo) */ html { overflow-y: scroll; } /* 3) Extra segurança: garante que o conteúdo tem sempre pelo menos 100vh de altura */ main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 pt-0 pb-4" /* Zera qualquer acolchoamento no topo da sidebar e do conteúdo */ .sidebar { padding-top: 0 !important; } .sidebar-sticky { padding-top: 0 !important; } main { padding-top: 0 !important; } /* === Estado sem autenticação (login) ===================================== */ /* Quando o utilizador não está autenticado, o tem class="no-auth". - Escondemos o menu lateral (por redundância, caso o HTML não o tenha removido) - Fazemos o conteúdo ocupar a largura total. */ .no-auth .sadoc-sidebar { display: none !important; /* garante que o menu não ocupa espaço */ } .no-auth .sadoc-main { /* Se usas grid/colunas, isto ajuda o conteúdo a expandir a 100% */ width: 100%; max-width: 100%; } /* Linhas clicáveis na lista de relatórios */ .table tr.clickable-row { cursor: pointer; } .table tr.clickable-row:hover { background-color: rgba(0,0,0,.03); } .table tr.clickable-row:focus { outline: 2px solid var(--bs-primary); outline-offset: -2px; } /* ----------------------------------------------------------- Lista de relatórios: visual dos APAGADOS (admin-only) - Texto cinzento suave - Rasurado (strike-through) - Mantém badges legíveis (sem rasura) e ligeiramente esbatidos ----------------------------------------------------------- */ .table tr.is-deleted td { color: var(--bs-secondary-color, #6c757d); text-decoration: line-through; } .table tr.is-deleted:hover { background-color: rgba(0, 0, 0, .02); } /* Não rasurar badges e ícones da célula */ .table tr.is-deleted .badge, .table tr.is-deleted .bi { text-decoration: none; opacity: .7; } /* (Opcional) Tornar o cursor um pouco mais neutro nos apagados, mas manter clicável */ .table tr.is-deleted { cursor: pointer; } /* ----------------------------------------------------------- Lista > coluna "Folha Suporte" — dot minimal (clean) - .fd-dot: base do ponto - .fd-ok: existe Folha Suporte (azul) - .fd-missing: não existe (vermelho) ----------------------------------------------------------- */ .fd-dot{ display:inline-block; width:.66rem; /* ~10–11px */ height:.66rem; border-radius:50%; vertical-align:middle; background: var(--bs-secondary); /* fallback */ box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); /* aro subtil */ transform: translateY(-1px); /* alinha óptico com texto */ } .fd-ok{ background: var(--bs-primary); /* azul Bootstrap */ } .fd-missing{ background: var(--bs-danger); /* vermelho Bootstrap */ } /* Em linhas apagadas (rasuradas), manter dot legível e um pouco esbatido */ .table tr.is-deleted .fd-dot{ opacity:.7; } /* (Opcional) efeito hover muito discreto para linhas normais */ .table tr.clickable-row:hover .fd-dot{ box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); } /* ------------------------------------------------------------------ Folha Suporte (VIEW): molduras + tamanho fixo e imagem contida ------------------------------------------------------------------ */ /* Caixa onde a imagem vive — altura fixa para não “esticar” com imagens altas */ .detail-imgbox { height: 240px; /* ← ajusta aqui se quiseres maior/menor */ padding: 8px; /* respiro dentro da moldura */ border-radius: 8px; /* cantos suaves no ecrã */ background: #fff; overflow: hidden; /* garante que nada sai da caixa */ display: block; } /* Bordas mais grossas: verde (Verdadeiro) e vermelho (Falsificação) */ .detail-true .detail-imgbox { border: 3px solid #198754; } /* Bootstrap green */ .detail-false .detail-imgbox { border: 3px solid #dc3545; } /* Bootstrap red */ /* A imagem ocupa a caixa sem distorcer, sempre visível por completo */ .detail-imgbox img { width: 100%; height: 100%; display: block; /* remove gap de inline images */ object-fit: contain; /* contém a imagem dentro da caixa */ object-position: center; /* centra a imagem na caixa */ } /* ------------------------------------------------------------ Perícia (VIEW) – FACE: retrato (portrait), tamanho um pouco maior ------------------------------------------------------------ */ @media screen { .pericia-face-imgbox { /* Mantém-se centrado dentro da coluna */ margin: 0 auto; /* Tamanho controlado: cresce até 240px de largura ou 75% da coluna, mas nunca menos que 200px. A altura é calculada pela proporção. */ width: clamp(200px, 75%, 240px); /* Retrato (altura > largura): 3:4 = portrait */ aspect-ratio: 3 / 4; height: auto; /* derivada da aspect-ratio */ /* Moldura interna e cantos */ padding: 8px; border-radius: 8px; background: #fff; /* Centrar a imagem e impedir “fugas” */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .pericia-face-imgbox img { /* Preenche a caixa, sem distorcer, sempre visível por completo */ width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; } } /* Realce visual para grupo OK/NOT OK quando inválido */ .btn-check.is-invalid + .btn { border-color: #dc3545 !important; /* vermelho Bootstrap */ box-shadow: 0 0 0 .2rem rgba(220,53,69,.25); /* halo suave vermelho */ } /* === Sidebar recolhível — BLOCO FINAL (fixar larguras em px) =========== */ :root{ --sidebar-w-open: 260px; /* largura ABERTA (cabe “Consultar relatórios” numa linha) */ --sidebar-w-collapsed: 76px; /* largura FECHADA (rail com ícones) */ --nav-item-h: 44px; /* altura mínima de cada item do menu */ --sidebar-toggle-size: 36px; /* botão ☰ quadrado */ } /* Sidebar “fixa”: não é afetada pelo scroll da página */ #sidebar.sadoc-sidebar{ position: sticky; top: var(--topbar-h); /* cola imediatamente por baixo da topbar */ height: calc(100vh - var(--topbar-h)); /* ocupa o viewport menos a topbar */ display: flex; /* permite footer no fundo */ flex-direction: column; overflow: hidden; /* sem scroll no container, só nos filhos */ /* ABERTA: largura fixa em px (ignora colunas do Bootstrap) */ flex: 0 0 var(--sidebar-w-open) !important; max-width: var(--sidebar-w-open) !important; width: var(--sidebar-w-open) !important; } /* O bloco da lista rola por dentro (não a sidebar inteira) */ /* A lista rola por dentro; sem margens/paddings que “empurrem” o footer */ #sidebar .sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-top: .25rem; padding-bottom: .25rem; /* pequeno respiro, sem criar scroll desnecessário */ margin: 0; } /* Footer colado ao fundo e sem margens extras */ #sidebar .sidebar-footer { flex: 0 0 auto; margin: 0; } /* FECHADA: a sidebar vira rail com largura fixa em px */ body.sidebar-collapsed #sidebar.sadoc-sidebar{ flex: 0 0 var(--sidebar-w-collapsed) !important; max-width: var(--sidebar-w-collapsed) !important; width: var(--sidebar-w-collapsed) !important; } /* FECHADA: o main ocupa TODO o resto (sem “espaço morto”) */ /* ABERTA: só quando há #sidebar na página */ @media (min-width: 768px){ #sidebar.sadoc-sidebar ~ main.sadoc-main{ flex: 0 0 calc(100% - var(--sidebar-w-open)) !important; max-width: calc(100% - var(--sidebar-w-open)) !important; margin-left: 0 !important; } } /* FECHADA: idem, apenas com sidebar presente */ @media (min-width: 768px){ body.sidebar-collapsed #sidebar.sadoc-sidebar ~ main.sadoc-main{ flex: 0 0 calc(100% - var(--sidebar-w-collapsed)) !important; max-width: calc(100% - var(--sidebar-w-collapsed)) !important; margin-left: 0 !important; } } /* FECHADA: o main ocupa (100% - rail) */ @media (min-width: 768px){ body.sidebar-collapsed main.sadoc-main{ flex: 0 0 calc(100% - var(--sidebar-w-collapsed)) !important; max-width: calc(100% - var(--sidebar-w-collapsed)) !important; margin-left: 0 !important; } } /* Itens do menu: ícone + rótulo (aberta) */ #sidebar .nav-link{ display: flex; align-items: center; gap: .5rem; min-height: var(--nav-item-h); } #sidebar .nav-link .nav-icon{ display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; /* largura fixa ajuda a alinhar tudo */ height: 1.6rem; line-height: 1; font-size: 1.25rem; /* ícone ligeiramente maior */ margin-right: .25rem; } #sidebar .nav-link .nav-label{ display: inline; } /* Rail FECHADO: só o ícone visível (link continua clicável) */ body.sidebar-collapsed #sidebar .nav-link{ justify-content: center; gap: 0; padding-left: .25rem; padding-right: .25rem; } body.sidebar-collapsed #sidebar .nav-link .nav-label{ display: none !important; } body.sidebar-collapsed #sidebar .nav-link .nav-icon{ margin-right: 0 !important; } /* Esconder Administração e submenu no rail fechado */ body.sidebar-collapsed a[data-bs-target="#adminSubmenu"], body.sidebar-collapsed #adminSubmenu{ display: none !important; } /* Footer: “Sobre o projeto” + botão ☰ na mesma linha; botão à direita */ #sidebar .sidebar-footer{ display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; } #sidebar .sidebar-footer .sidebar-about{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sidebar .sidebar-footer .sidebar-toggle-btn{ width: var(--sidebar-toggle-size); height: var(--sidebar-toggle-size); padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; margin-left: auto; /* encosta à direita */ } /* No rail fechado, o “Sobre o projeto” desaparece (fica só o botão) */ body.sidebar-collapsed #sidebar .sidebar-footer .sidebar-about{ display: none !important; } /* === Sidebar (afinamentos finais) ===================================== */ /* 2.1 — Força rótulos numa só linha quando ABERTA (sem wraps) */ #sidebar .nav-link .nav-label { white-space: nowrap; } /* 2.2 — Normaliza o espaçamento vertical entre itens (elimina “buracos”) */ #sidebar .nav { gap: .25rem; /* controla o espaço entre linhas */ } #sidebar .nav .nav-item { margin: 0; /* remove margens herdadas */ } #sidebar .nav .nav-link { padding-top: .5rem; /* padding consistente */ padding-bottom: .5rem; min-height: 44px; /* igual ao restante da barra */ } /* 2.3 — Rail FECHADO: continua visível só o ícone, clicável, sem “buracos” */ body.sidebar-collapsed #sidebar .nav-link { justify-content: center; gap: 0; padding-left: .25rem; padding-right: .25rem; } body.sidebar-collapsed #sidebar .nav-link .nav-label { display: none !important; } /* === Sidebar: sem scroll horizontal em nenhuma condição ================= */ #sidebar { overflow-x: hidden; } #sidebar .sidebar-nav, #sidebar .sidebar-footer, #sidebar .nav { overflow-x: hidden; max-width: 100%; } /* Segurança extra: evita que algo “salte” a largura */ #sidebar .nav-link { width: 100%; box-sizing: border-box; } /* Main nunca leva margem à esquerda; o grid trata do layout */ .sadoc-main { margin-left: 0 !important; } #sidebar, #sidebar .sidebar-nav, #sidebar .sidebar-footer, #sidebar .nav { overflow-x: hidden; max-width: 100%; } #sidebar .nav-link { width: 100%; box-sizing: border-box; } /* === Main: containers sempre fluidos (usar toda a largura disponível) === */ .sadoc-main .container, .sadoc-main .container-sm, .sadoc-main .container-md, .sadoc-main .container-lg, .sadoc-main .container-xl, .sadoc-main .container-xxl { max-width: 100% !important; /* elimina limite de 1140/1320/etc */ width: 100% !important; margin-left: 0 !important; /* remove centragem */ margin-right: 0 !important; } /* Mantém um respiro lateral razoável dentro do main (opcional) */ @media (min-width: 768px) { .sadoc-main .container, .sadoc-main .container-fluid { padding-left: 1rem; padding-right: 1rem; } } /* === Remover o “gap” à direita do conteúdo ============================= */ /* 2.1 — Garante que o

não volta a ganhar padding-right em nenhum breakpoint */ @media (min-width: 768px) { .sadoc-main { padding-right: 0 !important; } } /* 2.2 — Neutraliza padding/margem à direita de containers internos (se existirem) */ .sadoc-main > .container, .sadoc-main > .container-fluid, .sadoc-main .container, .sadoc-main .container-fluid { max-width: 100% !important; margin-right: 0 !important; padding-right: 0 !important; /* remove o “respiro” que cria a faixa à direita */ } /* Login: contento estreito e centrado */ .auth-login{ max-width: 640px; /* 560–640 é um bom intervalo */ margin: 48px auto; /* centro horizontal + respiro superior */ padding: 0 16px; /* respiro nas laterais em ecrãs pequenos */ }