/* ============================================================================= vpbx — painel do nó Sistema de design copiado do app.gasai.com.br: tokens OKLCH no padrão shadcn, Geist Variable, dark por classe .dark no . Sem build: CSS à mão usando os mesmos tokens. ========================================================================== */ @font-face { font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/geist-latin-wght-normal-Dm3htQBi.woff2) format('woff2-variations'); } @font-face { font-family: 'Geist Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/geist-mono-latin-wght-normal-Cjtb1TV-.woff2) format('woff2-variations'); } :root { --background: oklch(99% .005 105); --foreground: oklch(15% .015 105); --card: oklch(100% 0 0); --card-foreground: oklch(15% .015 105); --subtle: oklch(98% .005 105); --muted: oklch(96.5% .006 105); --muted-foreground: oklch(46% .022 105); --border: oklch(91% .012 105); --input: oklch(91% .012 105); --secondary: oklch(96% .008 105); --secondary-foreground: oklch(14% .012 105); --accent: oklch(97% .04 122); --accent-foreground: oklch(24% .03 122); --primary: oklch(94% .27 122); --primary-hover: oklch(90% .255 122); --primary-pressed: oklch(86% .24 122); --primary-foreground: oklch(15% .04 122); --ring: oklch(94% .27 122); --success: oklch(67% .18 142); --warning: oklch(78% .17 75); --info: oklch(68% .14 230); --destructive: oklch(60% .22 25); --destructive-foreground: oklch(99% .005 105); --radius-sm: .25rem; --radius-md: .375rem; --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace; --t: .15s cubic-bezier(.4, 0, .2, 1); } .dark { --background: oklch(14% .012 105); --foreground: oklch(96% .008 105); --card: oklch(17% .013 105); --card-foreground: oklch(96% .008 105); --subtle: oklch(16% .012 105); --muted: oklch(21% .013 105); --muted-foreground: oklch(67% .022 105); --border: oklch(26% .015 105); --input: oklch(26% .015 105); --secondary: oklch(15% .015 105); --secondary-foreground: oklch(99% .005 105); --accent: oklch(24% .03 122); --accent-foreground: oklch(94% .27 122); } * { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light dark; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } code, .mono, kbd { font-family: var(--font-mono); } /* ---------------------------------------------------------------- login --- */ .login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; } .login-card { width: 100%; max-width: 380px; } .brand { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.75rem; } .brand-mark { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; font-weight: 700; font-size: 15px; } .brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; line-height: 1.25; } /* a lateral tem 224px: o nome do produto quebra em duas linhas ali, e é para quebrar mesmo — cortar com reticências esconderia parte da marca */ .side .brand-name { font-size: 14px; } .brand-sub { color: var(--muted-foreground); font-size: 12px; } /* ----------------------------------------------------------------- app ---- */ .app { display: grid; grid-template-columns: 224px 1fr; min-height: 100dvh; } .side { background: var(--subtle); border-right: 1px solid var(--border); padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; } .side .brand { margin: .25rem .25rem 1.25rem; } .nav-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .55rem; border-radius: var(--radius-md); color: var(--muted-foreground); background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: background var(--t), color var(--t); } .nav-item:hover { background: var(--muted); color: var(--foreground); } .nav-item[aria-current='page'] { background: var(--accent); color: var(--accent-foreground); font-weight: 500; } .nav-count { margin-left: auto; font-size: 11px; color: var(--muted-foreground); font-family: var(--font-mono); } .nav-grupo + .nav-grupo { margin-top: .85rem; } .nav-grupo-titulo { padding: 0 .55rem .3rem; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); opacity: .7; } .side-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border); } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--background); position: sticky; top: 0; z-index: 5; } .topbar h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .spacer { flex: 1; } .content { padding: 1.25rem; overflow-x: auto; } /* --------------------------------------------------------------- peças ---- */ .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); } .card-pad { padding: 1.25rem; } .card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .card-title { font-size: 14px; font-weight: 600; } .card-desc { font-size: 12px; color: var(--muted-foreground); margin-top: .125rem; } label { display: block; font-size: 12px; font-weight: 500; margin-bottom: .35rem; } /* IMPORTANTE: só campos de texto levam width:100% e padding. Antes a regra pegava TODO input — a checkbox virava um retângulo de largura total e empurrava o rótulo para a linha de baixo. */ input:not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea { width: 100%; padding: .45rem .625rem; font: inherit; font-size: 13px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); transition: border-color var(--t), box-shadow var(--t); } input[type='checkbox'], input[type='radio'] { width: 15px; height: 15px; flex: none; margin: 0; accent-color: var(--primary); cursor: pointer; } input[type='file'] { width: 100%; font: inherit; font-size: 12px; color: var(--muted-foreground); padding: .35rem 0; } input[type='file']::file-selector-button { font: inherit; font-size: 12px; margin-right: .6rem; cursor: pointer; padding: .35rem .7rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--foreground); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); } /* rótulo ao lado da caixa: não pode herdar o display:block do label */ label.row { display: flex; align-items: center; gap: .5rem; margin-bottom: 0; } label.row > span { font-size: 13px; font-weight: 400; line-height: 1.35; } /* select nunca deve estourar o container (barra lateral tem 224px) */ select { max-width: 100%; text-overflow: ellipsis; } /* linha de widget composto: quebra em vez de espremer no celular */ .row { flex-wrap: wrap; } .row > select, .row > input { min-width: 0; } textarea { font-family: var(--font-mono); font-size: 12px; min-height: 220px; resize: vertical; } .field { margin-bottom: .875rem; } .hint { font-size: 11px; color: var(--muted-foreground); margin-top: .3rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .8rem; font: inherit; font-size: 13px; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--t), border-color var(--t), opacity var(--t); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); } .btn-primary:active:not(:disabled) { background: var(--primary-pressed); } .btn-ghost { background: none; color: var(--muted-foreground); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--muted); color: var(--foreground); } .btn-outline { background: var(--card); color: var(--foreground); border-color: var(--border); } .btn-outline:hover:not(:disabled) { background: var(--muted); } .btn-danger { background: var(--destructive); color: var(--destructive-foreground); } .btn-sm { padding: .275rem .55rem; font-size: 12px; } .btn-block { width: 100%; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); padding: .5rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background var(--t); } tbody tr:hover { background: var(--subtle); } .t-mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); } .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; font-family: var(--font-mono); background: var(--muted); color: var(--muted-foreground); } .badge-tipo { background: var(--accent); color: var(--accent-foreground); } .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .on { color: var(--success); } .off { color: var(--muted-foreground); } .warn { color: var(--warning); } .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; } .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); } .stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: .25rem; } .msg { padding: .6rem .75rem; border-radius: var(--radius-md); font-size: 12px; margin-bottom: .875rem; border: 1px solid; } .msg-erro { background: color-mix(in oklch, var(--destructive) 10%, transparent); border-color: color-mix(in oklch, var(--destructive) 35%, transparent); color: var(--destructive); } .msg-ok { background: color-mix(in oklch, var(--success) 10%, transparent); border-color: color-mix(in oklch, var(--success) 35%, transparent); color: var(--success); } .modal-bg { position: fixed; inset: 0; background: oklch(0% 0 0 / .5); display: grid; place-items: center; padding: 1.5rem; z-index: 50; } .modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); width: 100%; max-width: 560px; max-height: 85dvh; display: flex; flex-direction: column; } .modal-body { padding: 1.25rem; overflow-y: auto; } .modal-foot { padding: .875rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; } .row { display: flex; align-items: center; gap: .5rem; } .vazio { padding: 2.5rem; text-align: center; color: var(--muted-foreground); font-size: 13px; } /* menu de telas estreitas: escondido no desktop, é a navegação no celular */ .nav-mobile { display: none; } @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .side { display: none; } .nav-mobile { display: block; width: auto; max-width: 55vw; } .content { padding: .875rem; } .topbar { padding: .625rem .875rem; } .topbar h1 { font-size: 14px; } .modal { max-width: 100% !important; max-height: 92dvh; } .grid-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } } /* tabela larga rola dentro do próprio cartão, não empurra a página */ .card > table { display: block; overflow-x: auto; white-space: nowrap; } .card > table thead, .card > table tbody { display: table; width: 100%; } /* o modal precisa rolar por dentro quando o formulário é longo (fila tem 24 campos) */ .modal-body { overscroll-behavior: contain; } /* alvo de toque decente no celular */ @media (pointer: coarse) { .btn-sm { padding: .4rem .7rem; } .nav-item { padding: .55rem .55rem; } }