/* ============================================================ Fluxion — design tokens & primitives Concept: instrument-panel. Zero border-radius. Mono for data. ============================================================ */ :root { /* Surfaces (dark-first; light theme below) */ --canvas: #0A0E14; --row: #11161E; --row-2: #161D27; --elev: #1A2230; --rule: #1F2A37; --rule-2: #2A3A4F; /* Ink */ --ink: #D6DEE8; --ink-2: #95A0AE; --muted: #818C9A; --dim: #5A6575; /* Signals */ --go: #6FD08A; --wait: #E6B450; --stop: #E5484D; --info: #7DD3FC; /* Aliases for the semantic role names used across components. Keep them in sync with --go / --stop so a future palette swap touches one place. */ --ok: var(--go); --fail: var(--stop); --warn: var(--wait); /* Brand mark / one accent */ --mark: #3B82F6; /* Quarantine — used by DLQ badges and the evidence card */ --quarantine: #C97064; /* Type */ --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px; --t-xl: 20px; --row-h: 28px; --gutter: 16px; /* #109 · tokens compostos pra hover/row backgrounds. Antes hardcoded rgba(...) em 6+ lugares — sem reagir ao theme. Agora deriva de --stop/--wait/--quarantine pra ambos os temas escolherem alpha adequado ao próprio canvas. */ --hover-strong: rgba(255, 255, 255, 0.08); --hover-soft: rgba(255, 255, 255, 0.04); --row-dlq-bg: rgba(201, 112, 100, 0.05); --row-dlq-bg-hover: rgba(201, 112, 100, 0.10); --row-slow-bg: rgba(216, 163, 46, 0.04); --row-fail-bg: rgba(178, 34, 48, 0.04); --row-pass-bg: rgba(46, 125, 69, 0.05); color-scheme: dark; } [data-theme="light"] { /* Surfaces — push more separation between canvas and the elevated bars so the top nav and footer feel anchored. Rules deepen to ~10% darker than the dark theme's proportional contrast against the brighter background. */ --canvas: #E8E6DE; --row: #F4F2EA; --row-2: #EDEAE0; --elev: #FBF9F2; --rule: #BFBCAE; --rule-2: #A09D8E; /* Ink — keep near-black for legibility; tighten muted/dim ladder so secondary text stays readable on cream (the dark theme's --dim becomes invisible on light). */ --ink: #1A1F26; --ink-2: #3A434E; --muted: #5F6A75; --dim: #6E7883; /* Signals — the dark theme uses neon-bright accents that work on near-black but wash out on cream. Light theme uses deeper, saturated variants of each hue. Picked to keep semantic identity (green=ok, red=fail) while landing readable. */ --go: #2E7D45; /* forest green, contrast ratio ~5:1 on cream */ --wait: #9A6B17; /* dark goldenrod — same family as the --warn yellow */ --stop: #B22230; /* deeper crimson, less neon than #E5484D */ --info: #1E5FA8; /* saturated blue (cyan #7DD3FC was invisible) */ /* Brand mark — slightly deepen the coral so it reads against cream without looking pale. Same hue, ~15% more saturated. */ --mark: #2563EB; /* Quarantine — match the deeper coral palette of stop/mark. Maintains the "quarantine ward" identity without competing with the brand mark. */ --quarantine: #A53E33; /* #109 · light theme — overrides com alpha mais sutil (cream base é menos tolerante a overlay branco/escuro). Sources mais escuras pra contrast. */ --hover-strong: rgba(0, 0, 0, 0.06); --hover-soft: rgba(0, 0, 0, 0.03); --row-dlq-bg: rgba(165, 62, 51, 0.07); --row-dlq-bg-hover: rgba(165, 62, 51, 0.12); --row-slow-bg: rgba(154, 107, 23, 0.07); --row-fail-bg: rgba(165, 62, 51, 0.05); --row-pass-bg: rgba(46, 125, 69, 0.07); color-scheme: light; } /* ---- Accent presets do --mark · AZUL é o default · settável pra ÍNDIGO ---- Espelha o mecanismo de tema (localStorage 'fluxion-accent' → data-accent no ). Cada preset redefine --mark nos 2 temas: dark (sem data-theme) e light. */ [data-accent="indigo"] { --mark: #8B5CF6; } /* índigo · dark */ [data-theme="light"][data-accent="indigo"] { --mark: #6D28D9; } /* índigo · light */ /* Reset Bootstrap’s rounded everywhere ---------------------- */ *, *::before, *::after { border-radius: 0 !important; } html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: var(--t-md); line-height: 1.4; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "ss02"; } /* Trava o scroll do DOCUMENTO nas telas com shell (o scroll vive dentro do .canvas, height:100dvh). Sem isto o Safari RESTAURA um scroll fantasma do document (herdado de um estado antigo que transbordava) no reload e empurra o .app-shell pra fora do viewport → o fundo do html aparece = "sobra" cinza no embed (incidente 2026-08-14, diagnosticado por medição no Safari real: scrollY=799 num document de 609px). :has() escopa pra NÃO afetar páginas sem shell (login/erro), que rolam normal. */ html:has(.app-shell), body:has(.app-shell) { height: 100%; overflow: hidden; } code, pre, .mono { font-family: var(--mono); } a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ Shell: command-bar header / canvas / instrument footer ============================================================ */ /* Shell em COLUNA-FLEX (fix "preview não ocupa toda a altura" · v2 2026-08-14): header e footer têm altura NATURAL (flex:0 0 auto); o .canvas é o ÚNICO esticável (flex:1 1 auto) — ele é quem sobra depois do header/footer, SEMPRE, não importa quanto o header cresce (crumbs, badge de demo...) nem o que precede o conteúdo dentro dele (page-head, flow-picker...). min-height:0 no item flexível é OBRIGATÓRIO (o default min-height:auto do flexbox usa o CONTEÚDO como piso e o item nunca encolhe pra caber — raiz de 4 tentativas anteriores que só mexiam num calc(100vh-Npx) local sem consertar a cadeia). Substitui o grid antigo (auto 1fr auto), que não tinha essa trava e deixava o 1fr crescer com o conteúdo em vez de ficar preso ao viewport. */ .app-shell { height: 100dvh; display: flex; flex-direction: column; } .cmdbar { display: flex; align-items: center; gap: 12px; height: 36px; flex: 0 0 auto; padding: 0 16px; background: var(--row); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: var(--t-sm); } .cmdbar .mark { color: var(--mark); font-weight: 600; letter-spacing: 0.02em; } .cmdbar .crumb { color: var(--ink); } .cmdbar .sep { color: var(--dim); } .cmdbar .grow { flex: 1; } .cmdbar .cmd-actions { display: flex; gap: 4px; align-items: center; } .cmdbar .theme-toggle { font-family: var(--mono); width: 28px; padding: 0; justify-content: center; } .cmdbar .appearance-gear { width: 28px; padding: 0; justify-content: center; font-size: 13px; color: var(--muted); text-decoration: none; } .cmdbar .appearance-gear:hover, .cmdbar .appearance-gear.active { color: var(--ink); } /* Nav groups (Onda 1 · F-03) — 4 cognitive groups + aria-current on active link */ .nav-group { position: relative; display: inline-flex; align-items: center; } .nav-group-trigger { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; font-family: var(--sans); font-size: var(--t-sm); background: transparent; color: var(--ink-2); border: 1px solid transparent; cursor: pointer; } .nav-group-trigger:hover { background: var(--row-2); color: var(--ink); border-color: var(--rule-2); } .nav-group-trigger:focus-visible { outline: 1px solid var(--info); outline-offset: 1px; } .nav-group.is-active .nav-group-trigger { color: var(--mark); } .nav-group-trigger .chev-down { font-size: 9px; color: var(--dim); margin-left: 2px; } .nav-group.is-active .nav-group-trigger .chev-down { color: var(--mark); } .nav-group-menu { position: absolute; top: 100%; left: 0; min-width: 224px; background: var(--elev); border: 1px solid var(--rule-2); padding: 4px 0; z-index: 100; display: none; flex-direction: column; margin-top: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } [data-theme="light"] .nav-group-menu { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* grupos da direita (Governance/Security) abrem ancorados à direita pra o dropdown (com badge) não estourar a viewport */ .nav-group-alignright .nav-group-menu { left: auto; right: 0; } .nav-group:hover .nav-group-menu, .nav-group:focus-within .nav-group-menu { display: flex; } .nav-group-menu a { padding: 6px 14px; font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; } .nav-group-menu a:hover { background: var(--row-2); color: var(--ink); text-decoration: none; } /* foco de teclado visível nos itens de menu + triggers (F-02 · WCAG 2.4.7) */ .nav-group-menu a:focus-visible, .nav-group-trigger:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; } /* item de feature paga não licenciada: dimmed + pill com o tier mínimo (leva ao /upgrade). grid 1fr/auto alinha o pill numa coluna consistente; label trunca em vez de quebrar linha (F-04). */ .nav-group-menu a.nav-locked { color: var(--muted); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .nav-group-menu a.nav-locked:hover { color: var(--ink-2); } .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* pill do tier: sem borda (contraste falhava) — fundo sutil + tier em --ink-2 (F-06) */ .nav-lock { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; padding: 1px 7px; background: var(--row-2); border-radius: 10px; letter-spacing: 0.02em; } /* separador "Desbloqueie com um plano" que agrupa os itens bloqueados no fim do dropdown (F-05) */ .nav-upsell-head { margin: 6px 0 0; padding: 6px 14px 3px; border-top: 1px solid var(--rule-2); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } /* sub-cabeçalho de PLANO dentro da seção de upsell (agrupa os bloqueados por tier) */ .nav-upsell-tier { padding: 4px 14px 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-2); } /* glifo de cadeado do item agrupado (sem o pill de tier — o cabeçalho já diz o plano) */ .nav-lock-glyph { font-size: 11px; opacity: 0.65; } .nav-group-menu a.active, .nav-group-menu a[aria-current="page"] { border-left-color: var(--mark); color: var(--mark); background: var(--row); } .canvas { /* Inset horizontal de TODO o conteúdo (24px) — nada de texto/tabela encostando na borda. O .page-head "estoura" com margin negativa pra manter a régua (border-bottom) full-width. flex:1 1 auto + min-height:0: é o item esticável do .app-shell — ocupa TODO o espaço que sobra entre cmdbar e footbar, e nunca menos (min-height:0 destrava o encolhimento). É também um container de flex-COLUNA pros próprios filhos (page-head/flow-picker/.editor empilham em ordem normal — nenhum ganha flex-grow a menos que peça, então páginas comuns seguem exatamente como block/grid antes). overflow-y:auto: quando o conteúdo de uma página comum (lista, tabela) é mais alto que o canvas, ELA rola — o header/footer ficam fixos, não o document inteiro (troca o scroll de página por scroll de canvas). */ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 24px; overflow-x: auto; overflow-y: auto; } .footbar { display: flex; align-items: center; gap: 16px; height: 24px; flex: 0 0 auto; padding: 0 16px; background: var(--row); border-top: 1px solid var(--rule); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); } .footbar .seg + .seg::before { content: "·"; color: var(--dim); margin-right: 16px; margin-left: 0; } /* ============================================================ Buttons — flat, sharp, two ranks ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font-family: var(--sans); font-size: var(--t-sm); background: transparent; color: var(--ink); border: 1px solid var(--rule-2); cursor: pointer; } .btn:hover { background: var(--row-2); border-color: var(--ink-2); } .btn:focus-visible { outline: 1px solid var(--info); outline-offset: 1px; } .btn[disabled] { color: var(--dim); border-color: var(--rule); cursor: not-allowed; background: transparent; } /* Disabled do primary: neutraliza o fundo (o .btn-primary do Bootstrap deixava fundo azul + texto dim = ilegível). Especificidade sobe pra vencer o bundle do Bootstrap. */ .btn-primary:disabled, .btn-primary[disabled] { background: transparent; color: var(--muted); border-color: var(--rule); } .btn-primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); font-weight: 500; } .btn-primary:hover { background: var(--mark); border-color: var(--mark); color: var(--canvas); } .btn-ghost { border-color: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--row-2); color: var(--ink); border-color: var(--rule-2); } .btn-danger { color: var(--stop); border-color: var(--rule-2); } .btn-danger:hover { background: rgba(229, 72, 77, .1); border-color: var(--stop); color: var(--stop); } /* ============================================================ Table — signature: left-rail, vertical-only rules, dense ============================================================ */ .itable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--t-sm); background: var(--canvas); } .itable thead th { text-align: left; font-family: var(--sans); font-weight: 500; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 14px 8px; border-bottom: 1px solid var(--rule); background: var(--row); position: sticky; top: 0; } .itable thead th + th { border-left: 1px solid var(--rule); } .itable tbody td { padding: 0 14px; height: var(--row-h); color: var(--ink); vertical-align: middle; white-space: nowrap; } .itable tbody td + td { border-left: 1px solid var(--rule); } .itable tbody tr { border-left: 2px solid transparent; } /* Cells that should ellipsis when content is long (e.g. name) opt-in via class. */ .itable td.col-truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .itable tbody tr:hover { background: var(--row); } .itable tbody tr.go { border-left-color: var(--go); } .itable tbody tr.wait { border-left-color: var(--wait); } .itable tbody tr.stop { border-left-color: var(--stop); } .itable tbody tr.idle { border-left-color: var(--dim); } .itable tbody tr.off { border-left-color: var(--rule); } .itable tbody tr.off td { color: var(--ink-2); } .itable .col-actions { text-align: right; white-space: nowrap; } .itable .col-actions .btn + .btn { margin-left: 4px; } .itable .col-num { text-align: right; font-variant-numeric: tabular-nums; } .itable .col-narrow { width: 1px; } .itable .col-center { text-align: center; } /* Linha-agrupadora dentro de uma tabela densa (ex.: matriz RBAC, PII) — subhead sem hover. */ .itable tbody tr.group-row td { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--row-2); border-left-color: var(--rule); padding-top: 8px; } .itable tbody tr.group-row:hover td { background: var(--row-2); } /* Header de grupo colapsável dentro da tabela (abstração do colapso do editor de job). */ .grp-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; padding: 0; font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .grp-toggle:hover { color: var(--ink); } .grp-toggle .chev { font-size: 9px; } .grp-toggle .grp-count { color: var(--muted); text-transform: none; letter-spacing: 0; } /* Edição-no-lugar: a coluna de um papel vira editável; as outras esmaecem (foco na ação). */ .itable .col-dim { opacity: 0.4; } .cell-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 4px; cursor: pointer; font-family: var(--mono); font-size: var(--t-sm); background: transparent; border: 1px solid var(--rule-2); color: var(--ink-2); } .cell-toggle.on { color: var(--go); border-color: var(--go); background: color-mix(in srgb, var(--go) 12%, transparent); } .cell-toggle:hover { border-color: var(--ink-2); } .cell-toggle.on:hover { border-color: var(--go); } /* marca de alteração não-salva (accent) — some ao salvar/cancelar */ .cell-toggle.changed { box-shadow: 0 0 0 1px var(--mark); border-color: var(--mark); } .role-edit { background: transparent; border: 0; cursor: pointer; color: var(--ink-2); font-size: 11px; margin-left: 4px; padding: 0 2px; } .role-edit:hover { color: var(--mark); } .role-edit.active { color: var(--mark); } /* barra de ação do modo-edição (papel), colada ao topo do conteúdo */ .rbac-editbar { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: var(--t-sm); } .rbac-editbar .grow { flex: 1; } .rbac-editbar .unsaved { color: var(--mark); } .empty { padding: 40px 24px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: var(--t-sm); } .empty .hint { color: var(--ink-2); margin-top: 8px; } /* ============================================================ Status: 8×8 square (not pill, not circle) ============================================================ */ .dot { display: inline-block; width: 8px; height: 8px; vertical-align: -1px; margin-right: 8px; background: var(--dim); } .dot.go { background: var(--go); } .dot.wait { background: var(--wait); } .dot.stop { background: var(--stop); } .dot.idle { background: var(--dim); } .dot.off { background: transparent; border: 1px solid var(--dim); } .tag { display: inline-block; font-family: var(--mono); font-size: var(--t-xs); padding: 1px 6px; background: var(--row-2); color: var(--ink-2); border: 1px solid var(--rule); } .tag.go { color: var(--go); border-color: rgba(111, 208, 138, .35); } .tag.wait { color: var(--wait); border-color: rgba(230, 180, 80, .35); } .tag.stop { color: var(--stop); border-color: rgba(229, 72, 77, .35); } .arrow { color: var(--dim); margin: 0 6px; font-family: var(--mono); } /* ============================================================ Editor layout: two panes, denser left form + live JSON right ============================================================ 3 states (driven by class on .editor + optional inline --side-w). The grid always declares 5 named columns so transitions don't reflow elements: 1 reopen-left strip (visible only when --expanded) 2 form 3 resize handle (4px) 4 preview 5 reopen-right strip (visible only when --collapsed) - default → form 1fr · sidebar 480px (or custom via --side-w) - --expanded → form FULLY HIDDEN · sidebar 1fr · reopen strip on the LEFT - --collapsed → sidebar hidden · form 1fr · reopen strip on the RIGHT Resize handle drives --side-w via window.fluxionSidebar in wwwroot/sidebar-resize.js. */ .editor { display: grid; grid-template-columns: 0 minmax(0, 1fr) 4px minmax(0, var(--side-w, 480px)) 0; /* fill-the-canvas (v2 2026-08-14): era `min-height: calc(100vh - 60px)` — um chute fixo que ignorava tudo que o .canvas já tinha renderizado ACIMA do .editor (page-head, flow-picker, banners) e tudo que o header/footer somam além dos 60px assumidos (crumbs, badge de demo, modo embed). Sempre sobrava/faltava — a "faixa morta" abaixo do preview (curto demais) ou overflow (alto demais). Com o .canvas agora bounded+flex-column (acima), .editor só precisa pedir o que SOBRA dele: flex:1 esparrama até o fim real do canvas, min-height:0 permite encolher abaixo do conteúdo (senão o grid nunca cede). O single-row grid implícito (sem grid-template-rows) estica os 5 itens de coluna — inclusive .editor-preview — pra preencher essa altura via align-items:stretch (default), então o preview passa a crescer JUNTO. */ flex: 1 1 auto; min-height: 0; } .editor.editor--expanded { /* Form vanishes. Sidebar takes the canvas. 24px reopen strip on the LEFT keeps a way back visible at all times. */ grid-template-columns: 24px 0 0 minmax(0, 1fr) 0; } .editor.editor--collapsed { /* Mirror image — preview vanishes, form takes the canvas, reopen strip on the RIGHT. */ grid-template-columns: 0 minmax(0, 1fr) 0 0 24px; } /* Explicit grid placement so child order in markup doesn't fight the columns. */ .editor-reopen-left { grid-column: 1; } .editor-form { grid-column: 2; } .editor-resize-handle{ grid-column: 3; } .editor-preview { grid-column: 4; } .editor-reopen { grid-column: 5; } .editor-form { padding: 20px 24px 80px; border-right: 1px solid var(--rule); overflow-y: auto; } .editor.editor--expanded .editor-form { display: none; } .editor.editor--collapsed .editor-form { border-right: 0; } /* Drag handle between form and preview. 4px-wide hot zone that grows visually on hover. Hidden in both preset states (nothing to resize when one side is gone). */ .editor-resize-handle { cursor: col-resize; background: var(--rule); position: relative; transition: background 120ms; } .editor-resize-handle:hover, .editor-resize-handle:active { background: var(--mark); } .editor-resize-handle::after { content: ""; position: absolute; inset: 0 -4px; } .editor.editor--expanded .editor-resize-handle, .editor.editor--collapsed .editor-resize-handle { display: none; } /* Re-open strips. Both are 24px column · single chevron · same visual language; they just sit on opposite sides of the editor. */ .editor-reopen-left, .editor-reopen { background: var(--row); display: none; align-items: flex-start; justify-content: center; padding-top: 12px; } .editor-reopen-left { border-right: 1px solid var(--rule); } .editor-reopen { border-left: 1px solid var(--rule); } .editor.editor--expanded .editor-reopen-left { display: flex; } .editor.editor--collapsed .editor-reopen { display: flex; } .editor-reopen-left button, .editor-reopen button { background: transparent; border: 0; cursor: pointer; font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); width: 24px; height: 24px; padding: 0; } .editor-reopen-left button:hover, .editor-reopen button:hover { color: var(--ink); } .editor.editor--expanded .editor-preview { display: block; } /* Pane-control cluster pinned to the right of the preview-tabs header. 3 icon buttons: expand toggle / collapse / reset-width. */ .preview-tabs .pane-controls { margin-left: auto; display: flex; gap: 0; padding-right: 4px; } .preview-tabs .pane-ctl { background: transparent; border: 0; cursor: pointer; width: 28px; height: 32px; padding: 0; font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); } .preview-tabs .pane-ctl:hover { color: var(--ink); background: var(--row-2); } .preview-tabs .pane-ctl.active { color: var(--mark); } .editor-preview { background: var(--row); padding: 0; overflow-y: auto; position: relative; } .editor.editor--collapsed .editor-preview { display: none; } .editor-preview header { position: sticky; top: 0; background: var(--row); border-bottom: 1px solid var(--rule); padding: 8px 14px; font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .editor-preview pre { margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: var(--t-sm); color: var(--ink); white-space: pre-wrap; word-break: break-all; } /* Form blocks ----------------------------------------------- */ .section { margin-bottom: 22px; /* toda seção é uma CAIXA com borda de contorno (datasheet panel), igual o header */ border: 1px solid var(--rule); padding: 12px 16px; } /* seção aninhada não vira caixa-dentro-de-caixa */ .section .section { border: 0; padding: 0; margin-bottom: 14px; } /* tabela de lista (Template A) TEM contorno nos 4 lados, SEM padding extra. Envelopada num .list-frame com `border` REAL — MESMA espessura das outras caixas (.section/.page-head). Por que não `border` no nem box-shadow: com border-collapse o border-left 2px das linhas vence o border da tabela (o lado esquerdo some), e box-shadow renderiza mais fino que o border — o PO pegou a diferença de espessura. O wrapper é um elemento à parte: não colapsa. */ .canvas > .list-frame { border: 1px solid var(--rule); overflow-x: auto; margin: 0 0 22px; } .canvas > .list-frame > table.itable { width: 100%; margin: 0; } /* Config/Security (Template C): a .itable dentro de uma .section COLA na borda da caixa — mesmo contorno tight das listas. O padding da section (12/16) é só pra label/texto respirar; a tabela já tem o padding das células, então ela é puxada de volta até a borda. */ .section > table.itable { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); } .section > table.itable:first-child { margin-top: -12px; } .section > table.itable:last-child { margin-bottom: -12px; } /* quando há um section-label logo acima da tabela, o underline dele acompanha a largura total (alinha com a tabela) */ .section > .section-label:has(+ table.itable) { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } /* Paginador canônico (Paginator.razor) — rodapé abaixo da tabela, padrão datasheet */ .pager { display: flex; align-items: center; gap: 6px; margin: 10px 2px 22px; font-size: var(--t-xs); color: var(--muted); } .pager .grow { flex: 1 1 auto; } .pager-range { letter-spacing: 0.04em; } .pager .pg-btn { min-width: 26px; height: 26px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); font-size: var(--t-xs); line-height: 1; cursor: pointer; } .pager .pg-btn:hover:not(:disabled) { border-color: var(--mark); color: var(--ink); } .pager .pg-btn:disabled { opacity: 0.4; cursor: default; } .pager .pg-num.on { border-color: var(--mark); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mark); } .pager .pg-gap { padding: 0 2px; color: var(--ink-2); } .pager-size { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; white-space: nowrap; } /* especificidade (0,4,0) pra vencer o `.fx-select.select.dropdown { width:100% }` (mais abaixo no arquivo) */ .pager .pager-size .fx-select.pg-size { min-width: 78px; width: 78px; flex: 0 0 auto; } /* cabeçalho de coluna ordenável (SortHeader.razor) */ .itable th.sortable { cursor: pointer; user-select: none; } .itable th.sortable:hover { color: var(--ink); } .itable th.sortable.sorted { color: var(--ink); } .itable th.sortable:focus-visible { outline: 1px solid var(--info); outline-offset: -2px; } .itable th.sortable .sort-ind { margin-left: 4px; color: var(--mark); font-size: 9px; display: inline-block; min-width: 8px; vertical-align: middle; } .section-label { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); } .field { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; padding: 6px 0; } .field > label { color: var(--ink-2); font-size: var(--t-sm); font-family: var(--mono); } .input, .select, .textarea { width: 100%; height: 26px; padding: 0 8px; font-family: var(--mono); font-size: var(--t-sm); background: var(--row); color: var(--ink); border: 1px solid var(--rule-2); outline: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--info); background: var(--canvas); } .textarea { height: auto; padding: 6px 8px; min-height: 64px; resize: vertical; } /* ============================================================ BootstrapBlazor