/* ============================================================
PipeDev — Componentes compartilhados
Depende de tokens.css. Nenhuma cor literal: sempre hsl(var()).
============================================================ */
/* ── Marca ─────────────────────────────────────────────── */
.brand {
display: flex;
align-items: center;
gap: 0.625rem;
justify-content: center;
margin-bottom: 1.75rem;
}
/* ── Card ──────────────────────────────────────────────── */
.card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
}
.card__title {
font-size: 1.125rem;
margin-bottom: 0.375rem;
}
.card__subtitle {
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
/* ── Página de erro (403/404/405/419/500) ─────────────────── */
.error-page { text-align: center; }
.error-page__status { font-size: 3.5rem; font-weight: 700; line-height: 1; margin-bottom: .5rem; }
.error-page__headline { font-size: 1.25rem; margin-bottom: .75rem; }
.error-page__message { color: hsl(var(--muted-foreground)); font-size: .9375rem; margin-bottom: 1.75rem; }
/* ── Formulário ────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field__label {
display: block;
font-size: 0.8125rem;
font-weight: 500;
margin-bottom: 0.375rem;
color: hsl(var(--secondary-foreground));
}
.input {
width: 100%;
min-height: 2.5rem;
padding: 0.5rem 0.75rem;
background: hsl(var(--background));
border: 1px solid hsl(var(--input));
border-radius: calc(var(--radius) - 0.125rem);
font-size: 0.875rem;
transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.input::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.input:focus {
outline: none;
border-color: hsl(var(--ring));
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}
.input--error { border-color: hsl(var(--destructive)); }
/* Sem isso, um campo travado (ex.: a URL de redirecionamento quando o
preset "Claude Desktop" está selecionado) parece editável normalmente —
quem tentar digitar ali fica sem entender por que não funciona. */
.input[readonly] {
background: hsl(var(--muted) / 0.4);
color: hsl(var(--muted-foreground));
cursor: not-allowed;
}
/* ── Campo de senha com botão mostrar/ocultar ─────────────── */
.password-field { position: relative; }
.password-field .input { padding-right: 2.75rem; }
.password-field__toggle {
position: absolute;
top: 50%;
right: .35rem;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: calc(var(--radius) - 4px);
background: transparent;
color: hsl(var(--muted-foreground));
cursor: pointer;
}
.password-field__toggle:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.5); }
.password-field__toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.password-field__toggle svg { width: 1.15rem; height: 1.15rem; }
.password-field__toggle .password-field__icon--off { display: none; }
.password-field__toggle.is-active .password-field__icon--on { display: none; }
.password-field__toggle.is-active .password-field__icon--off { display: block; }
.field__error {
display: block;
margin-top: 0.375rem;
font-size: 0.8125rem;
color: hsl(var(--destructive));
}
.field__hint {
display: block;
margin-top: 0.375rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
}
/* Sem isso, um link injetado dentro de .field__hint (ex.: o "clique aqui
para continuar" de assets/js/oauth-consent.js quando o popup é bloqueado)
herda a cor muda do texto ao redor e some visualmente — exatamente no
caminho de recuperação de uma falha. */
.field__hint a {
color: hsl(var(--primary));
text-decoration: underline;
}
/* ── Checkbox ──────────────────────────────────────────── */
.check {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.875rem;
cursor: pointer;
}
.check input[type="checkbox"],
.check input[type="radio"] {
width: 1rem;
height: 1rem;
margin-top: 0.1875rem;
accent-color: hsl(var(--primary));
cursor: pointer;
flex-shrink: 0;
}
/* ── Botões ────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.5rem;
padding: 0.5rem 1.25rem;
border-radius: calc(var(--radius) - 0.125rem);
font-size: 0.875rem;
font-weight: 500;
transition: opacity var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.btn:not(:disabled):active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):hover { opacity: 0.9; }
.btn--primary {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.btn--ghost {
background: transparent;
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
}
.btn--ghost:not(:disabled):hover { background: hsl(var(--secondary)); }
.btn--block { width: 100%; }
/* ── Modal compartilhado ────────────────────────────────── */
body.modal-open { overflow: hidden; }
.modal-layer {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
place-items: center;
padding: clamp(0.75rem, 3vw, 2rem);
}
.modal-layer:target,
.modal-layer.is-open { display: grid; }
.modal-backdrop {
position: absolute;
inset: 0;
background: hsl(var(--background) / 0.7);
backdrop-filter: blur(5px);
opacity: 0;
animation: modal-fade-in 0.18s ease-out forwards;
}
.modal-dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 34rem);
max-height: min(90vh, 56rem);
overflow: hidden;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 0.125rem);
box-shadow: var(--shadow-elevated);
animation: modal-rise-in 0.2s ease-out forwards;
}
.modal-dialog--sm { width: min(100%, 28rem); }
.modal-dialog--lg { width: min(100%, 48rem); }
.modal-dialog--xl { width: min(100%, 64rem); }
.document-preview__dialog {
width: min(100%, 72rem);
height: min(92dvh, 58rem);
}
.document-preview__body {
display: flex;
flex: 1;
padding: 1rem;
background: hsl(var(--background) / 0.55);
}
.document-preview__stage {
display: grid;
flex: 1;
min-width: 0;
min-height: 18rem;
place-items: center;
overflow: hidden;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--background));
}
.document-preview__image {
display: block;
max-width: 100%;
max-height: 70dvh;
object-fit: contain;
}
.document-preview__video {
display: block;
width: 100%;
max-width: 64rem;
max-height: 70dvh;
background: #000;
}
.document-preview__pdf {
width: 100%;
height: 100%;
min-height: 32rem;
border: 0;
background: #fff;
}
.document-preview__empty,
.document-preview__fallback {
padding: 2rem;
color: hsl(var(--muted-foreground));
text-align: center;
}
.document-preview__fallback {
display: grid;
gap: 0.4rem;
}
.document-preview__fallback strong { color: hsl(var(--foreground)); }
.modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.4rem 1.5rem 1rem;
border-bottom: 1px solid hsl(var(--border));
}
.modal-head__eyebrow {
margin-bottom: 0.25rem;
color: hsl(var(--primary));
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.modal-head h2 { font-size: 1.25rem; line-height: 1.25; }
.modal-head p:not(.modal-head__eyebrow) {
margin-top: 0.35rem;
color: hsl(var(--muted-foreground));
font-size: 0.8125rem;
line-height: 1.45;
}
.modal-close {
display: grid;
flex: 0 0 2.25rem;
width: 2.25rem;
height: 2.25rem;
place-items: center;
border: 1px solid hsl(var(--border));
border-radius: 9999px;
color: hsl(var(--muted-foreground));
font-size: 1.25rem;
line-height: 1;
}
.modal-close:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.modal-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.5rem;
}
.modal-body > :last-child { margin-bottom: 0; }
.modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.625rem;
padding: 1rem 1.5rem;
border-top: 1px solid hsl(var(--border));
background: hsl(var(--muted) / 0.4);
}
.modal-foot__hint { margin-right: auto; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
.modal-steps__indicator { margin: 0 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
@keyframes modal-fade-in { to { opacity: 1; } }
@keyframes modal-rise-in {
from { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
.modal-layer { align-items: end; padding: 0; }
.modal-dialog {
width: 100%;
max-height: 94dvh;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: calc(var(--radius) + 0.125rem) calc(var(--radius) + 0.125rem) 0 0;
}
.modal-head, .modal-body, .modal-foot { padding-right: 1rem; padding-left: 1rem; }
.modal-foot { flex-wrap: wrap; }
.modal-foot .btn { flex: 1; }
.document-preview__dialog { height: 94dvh; }
.document-preview__body { padding: 0.625rem; }
.document-preview__pdf { min-height: 24rem; }
}
@media (prefers-reduced-motion: reduce) {
.modal-backdrop, .modal-dialog { animation: none; opacity: 1; }
}
/* ── Alertas ───────────────────────────────────────────── */
.alert {
padding: 0.75rem 1rem;
border-radius: var(--radius);
border: 1px solid;
font-size: 0.875rem;
margin-bottom: 1.25rem;
line-height: 1.5;
}
.alert--error {
background: hsl(var(--destructive) / 0.1);
border-color: hsl(var(--destructive) / 0.3);
color: hsl(0 80% 76%);
}
.alert--success {
background: hsl(var(--success) / 0.1);
border-color: hsl(var(--success) / 0.3);
color: hsl(160 70% 62%);
}
.alert--warning {
background: hsl(var(--warning) / 0.1);
border-color: hsl(var(--warning) / 0.3);
color: hsl(38 90% 68%);
}
/* `--info` é o azul de estado do design system, o mesmo de
`.status-planejamento`. Antes, toda mensagem tipo `info` reaproveitava a
cor de aviso — um texto neutro parecia um alerta. */
.alert--info {
background: hsl(var(--info) / 0.1);
border-color: hsl(var(--info) / 0.3);
color: hsl(199 85% 68%);
}
.alert__title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.alert code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8125rem;
word-break: break-all;
}
/* ── Lista de verificação (instalador) ─────────────────── */
.checklist {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
overflow: hidden;
}
.checklist__item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.625rem 0.875rem;
font-size: 0.8125rem;
border-bottom: 1px solid hsl(var(--border));
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__icon {
flex-shrink: 0;
width: 1.125rem;
font-weight: 700;
line-height: 1.4;
}
.checklist__icon--ok { color: hsl(var(--success)); }
.checklist__icon--fail { color: hsl(var(--destructive)); }
.checklist__hint {
display: block;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
margin-top: 0.125rem;
}
/* ── Passos numerados ──────────────────────────────────── */
.steps {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
counter-reset: step;
}
.steps li {
counter-increment: step;
position: relative;
padding-left: 2rem;
margin-bottom: 0.75rem;
font-size: 0.875rem;
color: hsl(var(--secondary-foreground));
}
.steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0.0625rem;
display: grid;
place-items: center;
width: 1.375rem;
height: 1.375rem;
border-radius: 9999px;
background: hsl(var(--secondary));
color: hsl(var(--primary));
font-size: 0.6875rem;
font-weight: 700;
}
.steps code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8125rem;
background: hsl(var(--secondary));
padding: 0.0625rem 0.375rem;
border-radius: 0.25rem;
}
/* ── Shell: painéis flutuantes ─────────────────────────────
Barra lateral e conteúdo são dois painéis soltos sobre o fundo, com
vão de 12px. Só o conteúdo rola (design system KodeHUB, §4). */
.shell {
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: var(--shell-gap);
height: 100vh;
height: 100dvh;
padding: var(--shell-gap);
overflow: hidden;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-height: 0;
padding: 1rem 0.75rem;
background: hsl(var(--sidebar-background));
color: hsl(var(--sidebar-foreground));
border: 1px solid hsl(var(--sidebar-border));
border-radius: var(--radius);
box-shadow: var(--shadow-card);
overflow-y: auto;
}
.sidebar__brand {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.25rem;
}
.sidebar__nav {
display: flex;
flex-direction: column;
gap: 0.125rem;
flex: 1;
}
.sidebar__link {
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--sidebar-foreground) / 0.8);
transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.sidebar__link:hover {
background: hsl(var(--sidebar-accent));
color: hsl(var(--sidebar-accent-foreground));
}
/* Item ativo: placa de prata (design system KodeHUB, §4). */
.sidebar__link.is-active {
background: hsl(var(--sidebar-primary));
color: hsl(var(--sidebar-primary-foreground));
box-shadow: var(--shadow-md);
}
.sidebar__foot {
border-top: 1px solid hsl(var(--sidebar-border));
padding-top: 1rem;
}
.sidebar__user {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.75rem;
}
.sidebar__user-info { min-width: 0; }
.sidebar__user-info strong {
display: block;
font-size: 0.8125rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar__user-info small {
color: hsl(var(--sidebar-foreground) / 0.6);
font-size: 0.75rem;
}
.sidebar__logout {
display: block;
width: 100%;
padding: 0.4375rem;
margin-top: 0.375rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--sidebar-border));
font-size: 0.8125rem;
text-align: center;
color: hsl(var(--sidebar-foreground) / 0.6);
transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.sidebar__logout:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); }
/* Sair fica vermelho no hover (design system KodeHUB, §4). */
form .sidebar__logout:hover {
background: hsl(var(--destructive) / 0.1);
border-color: hsl(var(--destructive) / 0.3);
color: hsl(var(--destructive));
}
.avatar {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 9999px;
color: hsl(var(--primary-foreground));
font-size: 0.6875rem;
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
}
.sidebar__user .avatar {
width: 2.75rem;
height: 2.75rem;
}
.avatar > img,
.kanban-card__assignee > img {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.content {
--content-gutter: 1.5rem;
min-width: 0;
min-height: 0;
padding: 1.5rem var(--content-gutter);
background: hsl(var(--card));
color: hsl(var(--card-foreground));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: var(--shadow-card);
overflow: auto;
}
/* Celular: sem painel que rola por dentro — a página inteira rola. */
@media (max-width: 800px) {
.shell {
display: flex;
flex-direction: column;
height: auto;
min-height: 100vh;
padding: 0.5rem;
gap: 0.5rem;
overflow: visible;
}
.sidebar { overflow-y: visible; }
.sidebar__nav { flex-direction: row; flex-wrap: wrap; }
.content { --content-gutter: 0.75rem; padding: 0.875rem var(--content-gutter); overflow: visible; }
}
/* ── Cabeçalho de página ───────────────────────────────── */
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.75rem;
}
.page-head h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
@media (min-width: 640px) {
.page-head h1 { font-size: 1.875rem; }
}
.page-head__eyebrow {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--muted-foreground));
margin-bottom: 0.25rem;
}
.page-head p {
max-width: 42rem;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
}
.page-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.btn--sm { min-height: 2.25rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
/* ── Grade de projetos ─────────────────────────────────── */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
gap: 1rem;
}
.project-card {
display: block;
position: relative;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 1.25rem;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.project-card:hover {
border-color: hsl(var(--primary) / 0.5);
transform: translateY(-2px);
}
.project-card__client {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--muted-foreground));
}
.project-card__name {
font-size: 1rem;
font-weight: 600;
margin: 0.25rem 0 0.75rem;
}
.project-card__stats {
display: flex;
gap: 1.25rem;
margin: 1rem 0 0.75rem;
}
.stat__value { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.stat__label { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }
.stat--overdue .stat__value { color: hsl(var(--destructive)); }
.stat--done .stat__value { color: hsl(var(--success)); }
/* ── Barra de progresso ────────────────────────────────── */
.progress {
height: 6px;
border-radius: 9999px;
background: hsl(var(--muted));
overflow: hidden;
}
.progress__bar {
display: block;
width: 0;
height: 100%;
border-radius: 9999px;
background: hsl(var(--primary));
transition: width 0.3s ease;
}
.progress__label {
display: flex;
justify-content: space-between;
font-size: 0.6875rem;
color: hsl(var(--muted-foreground));
margin-bottom: 0.375rem;
}
/* ── Célula de entidade (nome + linha secundária) ─────────
Substitui `Nome
` repetido
à mão em cada tabela de admin. */
.entity-cell { display: grid; gap: .15rem; }
.entity-cell__meta { color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.text-muted { color: hsl(var(--muted-foreground)); }
/* ── Etiquetas de situação ─────────────────────────────── */
.badge {
display: inline-block;
padding: 0.1875rem 0.5rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.status-planejamento { background: hsl(var(--info) / 0.18); color: hsl(199 85% 68%); }
.status-em-andamento { background: hsl(var(--primary) / 0.18); color: hsl(var(--primary)); }
.status-pausado { background: hsl(var(--warning) / 0.18); color: hsl(38 90% 68%); }
.status-concluido { background: hsl(var(--success) / 0.18); color: hsl(160 70% 62%); }
.status-cancelado { background: hsl(var(--destructive) / 0.15); color: hsl(0 80% 76%); }
/* ── Tabela ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.table th {
text-align: left;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--muted-foreground));
font-weight: 600;
padding: 0.625rem 0.75rem;
border-bottom: 1px solid hsl(var(--border));
white-space: nowrap;
}
.table td {
padding: 0.75rem;
border-bottom: 1px solid hsl(var(--border));
vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table-cell--right { text-align: right; }
/* Tabelas com `.table--responsive` viram cards empilhados em telas
estreitas — usado nas listas de admin, onde a coluna de ações
(editar/senha/desativar) ficava espremida junto das outras 4 colunas
forçando rolagem horizontal. Cada precisa de `data-label`. */
@media (max-width: 700px) {
.table--responsive thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.table--responsive, .table--responsive tbody, .table--responsive tr, .table--responsive td { display: block; width: 100%; }
.table--responsive tr { margin-bottom: .75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.table--responsive tr:last-child { margin-bottom: 0; }
.table--responsive td { border-bottom: 1px solid hsl(var(--border)); }
.table--responsive td.table-cell--right { text-align: left; }
.table--responsive td:last-child { border-bottom: 0; }
.table--responsive td[data-label]::before {
content: attr(data-label);
display: block;
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .06em;
color: hsl(var(--muted-foreground));
margin-bottom: .3rem;
}
.table--responsive .client-actions { align-items: flex-start; }
.table--responsive .client-edit > form { right: auto; left: 0; }
}
/* ── Vazio ─────────────────────────────────────────────── */
.empty {
text-align: center;
padding: 3rem 1.5rem;
border: 1px dashed hsl(var(--border));
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
}
.empty strong { display: block; color: hsl(var(--foreground)); margin-bottom: 0.375rem; }
/* ── Pipeline (prévia das colunas) ─────────────────────── */
.pipeline {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.pipeline__step {
padding: 0.375rem 0.75rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--border));
background: hsl(var(--muted) / 0.4);
font-size: 0.8125rem;
}
.pipeline__step.is-done {
border-color: hsl(var(--success) / 0.4);
color: hsl(160 70% 62%);
}
/* ── Grade de formulário ───────────────────────────────── */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0 1rem;
}
.form-grid--full { grid-column: 1 / -1; }
.form-disclosure {
margin-top: 1rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--muted) / 0.25);
}
.form-disclosure > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
list-style: none;
}
.form-disclosure > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::after { content: '+'; color: hsl(var(--primary)); font-size: 1.1rem; }
.form-disclosure[open] > summary::after { content: '−'; }
.form-disclosure > summary small { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 400; }
.form-disclosure__body { padding: 0 1rem 1rem; border-top: 1px solid hsl(var(--border)); }
.form-disclosure__body > :first-child { margin-top: 1rem; }
@media (max-width: 520px) {
.form-disclosure > summary small { display: none; }
}
textarea.input { resize: vertical; min-height: 6rem; font-family: inherit; }
select.input { cursor: pointer; }
.check-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 0.5rem;
}
/* ── Divisor com rótulo ────────────────────────────────── */
.divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.5rem 0 1.25rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--muted-foreground));
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: hsl(var(--border));
}
/* ── Kanban ─────────────────────────────────────────────── */
.project-head__client {
margin-bottom: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.project-head__due {
margin-left: 0.375rem;
color: hsl(var(--muted-foreground));
}
.project-summary {
margin: -0.75rem 0 1.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.8125rem;
}
.project-summary summary {
width: max-content;
cursor: pointer;
color: hsl(var(--secondary-foreground));
font-weight: 600;
}
.project-summary p {
max-width: 52rem;
margin-top: 0.625rem;
padding-left: 0.875rem;
border-left: 2px solid hsl(var(--border));
}
.kanban-notice { margin-bottom: 1rem; }
.project-tabs {
display: flex;
gap: 0.25rem;
margin-bottom: 1rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid hsl(var(--border));
overflow-x: auto;
}
.project-tabs__item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 0.875rem;
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
}
.project-tabs__item.is-active {
background: hsl(var(--primary) / 0.12);
color: hsl(var(--primary));
}
.project-tabs__item.is-disabled { opacity: 0.55; }
.project-tabs__item small { font-size: 0.625rem; font-weight: 500; }
/* ── Filtros compartilhados do Kanban e da Lista ──────── */
.task-filters {
margin-bottom: 1rem;
padding: 0.875rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--muted) / 0.4);
}
.task-filters.is-active {
border-color: hsl(var(--primary) / 0.45);
box-shadow: inset 3px 0 0 hsl(var(--primary));
}
.task-filters__form {
display: grid;
grid-template-columns: minmax(12rem, 2fr) repeat(5, minmax(8rem, 1fr)) auto;
align-items: end;
gap: 0.625rem;
}
.task-filters label {
display: grid;
min-width: 0;
gap: 0.3rem;
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
font-weight: 600;
}
.task-filters .input {
min-width: 0;
height: 2.25rem;
padding: 0.4rem 0.55rem;
font-size: 0.75rem;
}
.task-filters__actions {
display: flex;
gap: 0.375rem;
padding-bottom: 0.05rem;
}
.task-filters__summary {
margin-top: 0.625rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.task-filters__summary strong { color: hsl(var(--primary)); }
/* ── Visão em lista ───────────────────────────────────── */
.task-list__table-wrap { margin-top: 0; }
.task-list__table { min-width: 52rem; }
.task-list__title {
display: block;
max-width: 30rem;
color: hsl(var(--foreground));
font-weight: 650;
}
.task-list__title:hover { color: hsl(var(--primary)); }
.task-list__meta {
display: block;
margin-top: 0.2rem;
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
}
.task-list__empty { margin-top: 0; }
.muted { color: hsl(var(--muted-foreground)); }
.text-overdue { color: hsl(var(--danger)); font-weight: 650; }
.badge--done { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.35); }
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 1rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
/* ── Dashboard ─────────────────────────────────────────────── */
.dashboard-head__eyebrow {
margin: 0 0 .35rem;
color: hsl(var(--primary));
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.dashboard-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.dashboard-metric {
display: grid;
gap: .55rem;
padding: 1.15rem 1.25rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
}
.dashboard-metric span {
color: hsl(var(--muted-foreground));
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
.dashboard-metric strong {
font-size: clamp(1.75rem, 3vw, 2.4rem);
line-height: 1;
}
.dashboard-metric.is-overdue strong { color: hsl(var(--destructive)); }
.dashboard-metric.is-done strong { color: hsl(var(--success)); }
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.dashboard-panel {
min-width: 0;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
overflow: hidden;
}
.dashboard-panel--wide { grid-column: 1 / -1; }
.dashboard-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.25rem;
border-bottom: 1px solid hsl(var(--border));
}
.dashboard-panel__head h2 { margin: 0; font-size: 1rem; }
.dashboard-panel__head p { margin: .28rem 0 0; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.dashboard-panel__head > a { color: hsl(var(--primary)); font-size: .8rem; }
.dashboard-panel__count {
display: grid;
place-items: center;
min-width: 1.8rem;
height: 1.8rem;
padding: 0 .35rem;
border-radius: 999px;
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
font-size: .78rem;
font-weight: 700;
}
.dashboard-empty { margin: 0; padding: 1.5rem 1.25rem; color: hsl(var(--muted-foreground)); }
.dashboard-task-list,
.dashboard-activity { margin: 0; padding: 0; list-style: none; }
.dashboard-task-list li + li,
.dashboard-activity li + li { border-top: 1px solid hsl(var(--border)); }
.dashboard-task-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .9rem 1.25rem;
color: inherit;
text-decoration: none;
}
.dashboard-task-list a:hover { background: hsl(var(--muted) / .42); }
.dashboard-task__main { display: grid; gap: .22rem; min-width: 0; }
.dashboard-task__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.dashboard-task__main small { color: hsl(var(--muted-foreground)); }
.dashboard-due { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: .76rem; font-weight: 600; }
.dashboard-due.is-overdue { color: hsl(var(--destructive)); }
.dashboard-activity li {
display: flex;
align-items: center;
gap: .85rem;
padding: .9rem 1.25rem;
}
.dashboard-activity__mark {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 1.9rem;
height: 1.9rem;
border-radius: 999px;
background: hsl(var(--success) / .13);
color: hsl(var(--success));
font-weight: 700;
}
.dashboard-activity__body { display: grid; gap: .2rem; min-width: 0; flex: 1; }
.dashboard-activity__body strong { font-size: .84rem; }
.dashboard-activity__body small { color: hsl(var(--muted-foreground)); }
.dashboard-projects {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: hsl(var(--border));
}
.dashboard-projects > a {
display: grid;
gap: .5rem;
padding: 1.1rem 1.25rem;
background: hsl(var(--card));
color: inherit;
text-decoration: none;
}
.dashboard-projects > a:hover { background: hsl(var(--muted) / .35); }
.dashboard-project__top { display: flex; justify-content: space-between; gap: 1rem; }
.dashboard-project__top > span { color: hsl(var(--primary)); font-size: .82rem; font-weight: 700; }
.dashboard-project__client,
.dashboard-project__numbers { color: hsl(var(--muted-foreground)); font-size: .76rem; }
.dashboard-projects .progress { height: .3rem; margin-top: .2rem; }
/* Estágio intermediário: sem isso, os 4 cartões de métrica e os 2
painéis lado a lado só reduziam de tamanho até 820px, ficando
espremidos em telas de tablet (~800-1100px) antes de finalmente
empilhar. */
@media (max-width: 1100px) {
.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid { grid-template-columns: 1fr; }
.dashboard-panel--wide { grid-column: auto; }
}
@media (max-width: 820px) {
.dashboard-projects { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.dashboard-metrics { grid-template-columns: 1fr 1fr; gap: .65rem; }
.dashboard-metric { padding: .9rem; }
.dashboard-task-list a { align-items: flex-start; }
.dashboard-activity li { align-items: flex-start; flex-wrap: wrap; }
.dashboard-activity .btn { margin-left: 2.75rem; }
}
/* ── Tokens MCP ────────────────────────────────────────────── */
.mcp-token-reveal { margin-bottom: 1rem; border-color: hsl(var(--primary)); }
.mcp-token-reveal > code,
.mcp-secret-value { display: block; padding: 1rem; border-radius: var(--radius); background: hsl(var(--background)); overflow-wrap: anywhere; user-select: all; }
.mcp-secret-value { margin-bottom: .75rem; border: 1px solid hsl(var(--border)); }
.mcp-connect-steps { display: grid; gap: .75rem; margin: 0; padding-left: 1.25rem; }
.mcp-connect-steps li { line-height: 1.5; }
.mcp-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.mcp-command-card, .mcp-agent-message { min-width: 0; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); }
.mcp-agent-message { margin-top: .85rem; }
.mcp-command-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.mcp-command-card__head h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; }
.mcp-command-card__head p { margin: .2rem 0 0; color: hsl(var(--muted-foreground)); font-size: .78rem; }
.mcp-command-card pre, .mcp-agent-message pre { margin: 0; padding: .85rem; overflow-x: auto; border-radius: calc(var(--radius) - 2px); background: hsl(var(--card)); white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-command-card pre code, .mcp-agent-message pre code { font-size: .76rem; user-select: all; }
.mcp-copy-status { min-height: 1.2em; margin-bottom: 0; }
.mcp-settings-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(22rem, 1.2fr); gap: 1rem; align-items: start; }
.mcp-settings-grid--single { grid-template-columns: minmax(0, 1fr); }
.mcp-scopes { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.mcp-scopes legend { padding: 0 .35rem; font-size: .82rem; font-weight: 700; }
.mcp-scopes .check span { display: grid; gap: .15rem; }
.mcp-scopes small { color: hsl(var(--muted-foreground)); }
.mcp-token-list { margin: 0; padding: 0; list-style: none; border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.mcp-token-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; }
.mcp-token-list li + li { border-top: 1px solid hsl(var(--border)); }
.mcp-token-list li > div { display: grid; gap: .22rem; min-width: 0; }
.mcp-token-list code, .mcp-token-list small { color: hsl(var(--muted-foreground)); font-size: .75rem; }
.mcp-token-list code { overflow-wrap: anywhere; user-select: all; }
.mcp-token-list .is-inactive { opacity: .62; }
.mcp-token-list__title { display: flex; align-items: center; gap: .5rem; }
.mcp-token-list__actions { display: flex; align-items: center; gap: .5rem; }
.oauth-diag-meta { margin: .5rem 0; padding: .6rem .75rem; border-radius: var(--radius); background: hsl(var(--background)); font-size: .78rem; overflow-x: auto; }
/* Ícone do app do outro lado da conexão (Claude, Codex...). Puramente
decorativo — a identificação de fato é o nome escolhido por quem
criou o token/conector, não este ícone. */
.mcp-app-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: .28rem; border-radius: 50%; flex-shrink: 0; }
.mcp-app-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Cor fixa de propósito, não um token: é o fundo de contraste da marca de
cada app (bege claro atrás do símbolo laranja do Claude, preto atrás do
símbolo branco do Codex) — não deve mudar com o tema claro/escuro daqui. */
.mcp-app-icon--claude { background: #f0eee6; }
.mcp-app-icon--codex { background: #0d0d0d; }
/* ── Abas "Via Terminal" / "Via Plugin/Conectores" ────────────
Puro CSS (radio + :checked), sem JavaScript: os dois inputs e os
dois rótulos vêm antes dos painéis no DOM para o seletor de irmão
geral (~) alcançar ambos. Os radios ficam escondidos com a classe
compartilhada `.sr-only` (tokens.css) — não uma regra própria. */
.mcp-tabs__list { display: flex; gap: .25rem; margin-bottom: 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.mcp-tabs__tab { padding: .65rem 1rem; margin-bottom: -1px; font-size: .85rem; font-weight: 600; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; cursor: pointer; }
#tab-terminal:focus-visible ~ .mcp-tabs__list label[for="tab-terminal"],
#tab-conectores:focus-visible ~ .mcp-tabs__list label[for="tab-conectores"] { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.mcp-tabs__panel { display: none; }
#tab-terminal:checked ~ #panel-terminal,
#tab-conectores:checked ~ #panel-conectores { display: block; }
#tab-terminal:checked ~ .mcp-tabs__list label[for="tab-terminal"],
#tab-conectores:checked ~ .mcp-tabs__list label[for="tab-conectores"] { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); }
.mcp-token-list__owner { color: hsl(var(--foreground)); font-weight: 600; }
.mcp-connector-consents { margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed hsl(var(--border)); }
.mcp-connector-consents__label { display: block; margin-bottom: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.mcp-token-list--nested { border: none; border-radius: 0; }
.mcp-token-list--nested li { padding: .5rem 0; }
.mcp-token-list--nested li + li { border-top: 1px solid hsl(var(--border)); }
.mcp-redirect-uris summary { cursor: pointer; font-size: .78rem; color: hsl(var(--muted-foreground)); }
.mcp-redirect-uris[open] summary { margin-bottom: .5rem; }
.mcp-redirect-uris form { display: grid; gap: .5rem; margin-top: .5rem; }
/* Preset de URL de redirecionamento — "plug and play" para quem não
sabe (e não tem como saber) o valor exigido pelo app de destino. */
.mcp-preset-field { display: grid; gap: .65rem; margin-bottom: 1rem; }
.mcp-preset-options { display: grid; gap: .6rem; padding: .85rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.mcp-preset-options .check span { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mcp-preset-options .mcp-app-icon { width: 1.15rem; height: 1.15rem; padding: .2rem; }
.mcp-preset-options small { display: block; width: 100%; color: hsl(var(--muted-foreground)); }
@media (max-width: 900px) { .mcp-settings-grid, .mcp-setup-grid { grid-template-columns: 1fr; } }
@media (max-width: 1180px) {
.task-filters__form { grid-template-columns: repeat(3, minmax(9rem, 1fr)); }
.task-filters__search { grid-column: span 2; }
}
@media (max-width: 700px) {
.task-filters__form { grid-template-columns: 1fr 1fr; }
.task-filters__search { grid-column: 1 / -1; }
.task-filters__actions { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
.task-filters__form { grid-template-columns: 1fr; }
.task-filters__search,
.task-filters__actions { grid-column: auto; }
}
.kanban-shell {
min-width: 0;
}
.kanban-page { min-width: 0; }
.kanban-toolbar {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.875rem;
}
.kanban-toolbar h2 { font-size: 1rem; }
.kanban-toolbar p {
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.kanban-toolbar kbd {
padding: 0.0625rem 0.3rem;
border: 1px solid hsl(var(--border));
border-radius: 0.25rem;
background: hsl(var(--background));
color: hsl(var(--secondary-foreground));
font: inherit;
}
/* ── Quadro ────────────────────────────────────────────── */
/* Cinco colunas somam mais de 1500 px e a área de conteúdo tem menos
que isso. Em vez de setas — que não existem em quadro Kanban —, o
quadro sangra até a borda direita da tela: a coluna seguinte aparece
cortada, que é o próprio sinal de que há mais adiante.
O padding à direita devolve o respiro quando a rolagem chega ao fim,
e a margem negativa é o que permite passar da área de conteúdo. */
.kanban-board {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 0.125rem 0.125rem 1rem;
margin-right: calc(-1 * var(--content-gutter, 2.5rem));
padding-right: var(--content-gutter, 2.5rem);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
}
.kanban-board:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
.kanban-board { scroll-behavior: auto; }
}
.kanban-column {
display: flex;
flex: 0 0 18.5rem;
flex-direction: column;
max-height: calc(100vh - 16.5rem);
min-height: 12rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--muted) / 0.4);
scroll-snap-align: start;
}
.kanban-column.is-terminal {
border-color: hsl(var(--success) / 0.35);
}
.kanban-column__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 0.875rem 0.75rem;
border-bottom: 1px solid hsl(var(--border));
}
.kanban-column__title {
display: flex;
align-items: center;
min-width: 0;
gap: 0.5rem;
}
.kanban-column__title h3 {
overflow: hidden;
font-size: 0.8125rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.kanban-column__dot {
width: 0.5rem;
height: 0.5rem;
flex-shrink: 0;
border-radius: 9999px;
background: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}
.is-terminal .kanban-column__dot {
background: hsl(var(--success));
box-shadow: 0 0 0 3px hsl(var(--success) / 0.12);
}
.kanban-column__count {
display: grid;
place-items: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.375rem;
border-radius: 9999px;
background: hsl(var(--secondary));
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
font-weight: 700;
}
.kanban-column__tasks {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.625rem;
min-height: 7rem;
padding: 0.75rem;
overflow-y: auto;
transition: background-color 0.15s ease;
}
.kanban-empty {
display: grid;
min-height: 5rem;
place-items: center;
border: 1px dashed hsl(var(--border));
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.kanban-card {
position: relative;
padding: 0.875rem;
border: 1px solid hsl(var(--border));
border-left: 3px solid hsl(var(--prio-media));
border-radius: var(--radius);
background: hsl(var(--card));
box-shadow: 0 5px 18px hsl(var(--background) / 0.18);
cursor: grab;
touch-action: none;
/* Sem isto, clicar e arrastar começa uma seleção de texto que se
espalha pelo quadro inteiro enquanto o ponteiro se move. Card de
Kanban é para arrastar; para copiar o texto, abre-se o drawer. */
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
[data-writable="0"] .kanban-card { cursor: pointer; touch-action: auto; }
.kanban-card.prio-baixa { border-left-color: hsl(var(--prio-baixa)); }
.kanban-card.prio-media { border-left-color: hsl(var(--prio-media)); }
.kanban-card.prio-alta { border-left-color: hsl(var(--prio-alta)); }
.kanban-card.prio-urgente { border-left-color: hsl(var(--prio-urgente)); }
.kanban-card:hover,
.kanban-card:focus-visible {
border-top-color: hsl(var(--primary) / 0.5);
border-right-color: hsl(var(--primary) / 0.5);
border-bottom-color: hsl(var(--primary) / 0.5);
box-shadow: 0 8px 24px hsl(var(--background) / 0.32);
}
.kanban-card.is-done h4 { color: hsl(var(--muted-foreground)); }
/* O card original não sai da lista: ele é o indicador de onde a tarefa
vai cair. A 25% de opacidade ele praticamente sumia, e a pessoa
perdia a referência do destino. Agora ele fica legível e claramente
marcado como espaço reservado, enquanto o fantasma sólido acompanha
o ponteiro. */
.kanban-card.is-dragging {
opacity: 0.5;
background: hsl(var(--primary) / 0.07);
border-color: hsl(var(--primary) / 0.55);
border-style: dashed;
border-left-style: solid;
box-shadow: none;
cursor: grabbing;
}
.kanban-card.is-saving { opacity: 0.6; cursor: progress; }
.kanban-card--ghost {
position: fixed;
z-index: 1000;
pointer-events: none;
opacity: 1;
transform: rotate(1.5deg);
box-shadow: 0 16px 36px hsl(var(--background) / 0.7);
}
.kanban-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
}
.kanban-card h4 {
overflow-wrap: anywhere;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.45;
}
.kanban-card__internal {
flex-shrink: 0;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
background: hsl(var(--warning) / 0.14);
color: hsl(var(--warning));
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
}
.kanban-card__meta {
display: flex;
align-items: center;
gap: 0.4375rem;
min-height: 1.375rem;
margin-top: 0.75rem;
}
.priority-badge {
padding: 0.125rem 0.4375rem;
border-radius: 9999px;
background: hsl(var(--prio-media) / 0.14);
color: hsl(var(--prio-media));
font-size: 0.625rem;
font-weight: 700;
}
.priority-badge.prio-baixa { background: hsl(var(--prio-baixa) / 0.14); color: hsl(var(--prio-baixa)); }
.priority-badge.prio-alta { background: hsl(var(--prio-alta) / 0.14); color: hsl(var(--prio-alta)); }
.priority-badge.prio-urgente { background: hsl(var(--prio-urgente) / 0.14); color: hsl(var(--prio-urgente)); }
.task-preview__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.task-preview__due { color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.task-preview__description { margin: 0 0 1rem; color: hsl(var(--foreground)); white-space: pre-wrap; overflow-wrap: anywhere; }
.task-preview__field { margin: 0 0 .5rem; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.task-preview__field strong { margin-right: .35rem; color: hsl(var(--foreground)); }
.kanban-card__due,
.kanban-card__checklist {
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
font-weight: 600;
}
.kanban-card__due.is-overdue { color: hsl(var(--destructive)); }
.kanban-card__assignee {
display: grid;
width: 1.75rem;
height: 1.75rem;
place-items: center;
border-radius: 9999px;
border: 2px solid hsl(var(--card));
color: hsl(var(--primary-foreground));
font-size: 0.5625rem;
font-weight: 800;
overflow: hidden;
}
.kanban-card__assignees {
display: flex;
margin-left: auto;
padding-left: 0.375rem;
}
.kanban-card__assignees .kanban-card__assignee + .kanban-card__assignee {
margin-left: -0.5rem;
}
.kanban-card__assignee--more {
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.task-drawer__assignees {
min-height: 7.5rem;
padding: 0.375rem;
}
.kanban-create {
padding: 0 0.75rem 0.75rem;
}
.kanban-create__toggle {
width: 100%;
padding: 0.5rem 0.625rem;
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
font-weight: 600;
text-align: left;
}
.kanban-create__toggle:hover {
background: hsl(var(--secondary));
color: hsl(var(--foreground));
}
.kanban-create__form {
padding-top: 0.25rem;
}
.kanban-create__form textarea.input {
min-height: 4.25rem;
font-size: 0.8125rem;
}
.kanban-create__error {
min-height: 1rem;
margin-top: 0.25rem;
color: hsl(var(--destructive));
font-size: 0.6875rem;
}
.kanban-create__actions {
display: flex;
gap: 0.375rem;
margin-top: 0.375rem;
}
@media (max-width: 800px) {
.kanban-toolbar { align-items: flex-start; }
.kanban-toolbar__hint { display: none; }
.kanban-column { max-height: 68vh; }
}
/* ── Drawer da tarefa ───────────────────────────────────── */
body.drawer-open { overflow: hidden; }
.drawer-layer {
position: fixed;
z-index: 100;
inset: 0;
}
.drawer-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: hsl(var(--background) / 0.68);
opacity: 0;
cursor: default;
transition: opacity 0.18s ease;
}
.task-drawer {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
width: min(36rem, 100vw);
height: 100%;
border-left: 1px solid hsl(var(--border));
background: hsl(var(--card));
box-shadow: -18px 0 50px hsl(var(--background) / 0.55);
transform: translateX(100%);
transition: transform 0.18s ease;
}
.drawer-layer.is-open .drawer-backdrop { opacity: 1; }
.drawer-layer.is-open .task-drawer { transform: translateX(0); }
.task-drawer__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid hsl(var(--border));
}
.task-drawer__head p {
margin-bottom: 0.25rem;
color: hsl(var(--primary));
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.task-drawer__head h2 {
overflow-wrap: anywhere;
font-size: 1.125rem;
}
.task-drawer__close {
display: grid;
width: 2rem;
height: 2rem;
flex-shrink: 0;
place-items: center;
border-radius: 9999px;
color: hsl(var(--muted-foreground));
font-size: 1.5rem;
line-height: 1;
}
.task-drawer__close:hover {
background: hsl(var(--secondary));
color: hsl(var(--foreground));
}
.task-drawer__loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
flex: 1;
color: hsl(var(--muted-foreground));
font-size: 0.8125rem;
}
.task-drawer__loading.is-error { color: hsl(var(--destructive)); }
.task-drawer__spinner {
width: 1rem;
height: 1rem;
border: 2px solid hsl(var(--border));
border-top-color: hsl(var(--primary));
border-radius: 9999px;
animation: drawer-spin 0.75s linear infinite;
}
@keyframes drawer-spin { to { transform: rotate(360deg); } }
.task-drawer__body {
flex: 1;
min-height: 0;
padding: 1.25rem 1.5rem 2rem;
overflow-y: auto;
}
.task-drawer__status {
min-height: 1.25rem;
margin-bottom: 0.625rem;
color: hsl(var(--primary));
font-size: 0.75rem;
}
.task-drawer__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.875rem;
}
.task-drawer__description { min-height: 7rem; }
.task-drawer__visibility {
margin: 0.25rem 0 1rem;
padding: 0.75rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
}
.task-drawer__visibility strong {
display: block;
font-size: 0.8125rem;
}
.task-drawer__visibility small {
display: block;
margin-top: 0.125rem;
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
}
.task-drawer__meta {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
}
.task-drawer__save-row {
display: flex;
justify-content: flex-end;
padding-bottom: 1.25rem;
}
.task-drawer input:disabled,
.task-drawer textarea:disabled,
.task-drawer select:disabled {
cursor: default;
opacity: 0.72;
}
.task-drawer.is-saving::after {
content: '';
position: absolute;
z-index: 3;
inset: 0;
background: hsl(var(--background) / 0.08);
pointer-events: none;
}
.drawer-checklist {
padding-top: 1.25rem;
border-top: 1px solid hsl(var(--border));
}
.drawer-checklist__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.drawer-checklist__head h3 { font-size: 0.9375rem; }
.drawer-checklist__head p {
margin-top: 0.125rem;
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
}
.drawer-checklist__list {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin: 0;
padding: 0;
list-style: none;
}
.drawer-checklist__empty {
padding: 1rem;
border: 1px dashed hsl(var(--border));
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
text-align: center;
}
.drawer-checklist__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
padding: 0.375rem 0.5rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
}
.drawer-checklist__item > input[type="checkbox"] {
width: 1rem;
height: 1rem;
accent-color: hsl(var(--primary));
}
.drawer-checklist__title {
width: 100%;
min-width: 0;
padding: 0.25rem;
border: 0;
border-radius: 0.25rem;
background: transparent;
font-size: 0.75rem;
}
.drawer-checklist__title:focus {
outline: 1px solid hsl(var(--ring));
background: hsl(var(--background));
}
.drawer-checklist__item.is-done .drawer-checklist__title {
color: hsl(var(--muted-foreground));
text-decoration: line-through;
}
.drawer-checklist__controls { display: flex; gap: 0.125rem; }
.drawer-checklist__controls button {
display: grid;
width: 1.625rem;
height: 1.625rem;
place-items: center;
border-radius: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.drawer-checklist__controls button:hover:not(:disabled) {
background: hsl(var(--secondary));
color: hsl(var(--foreground));
}
.drawer-checklist__controls button:disabled { opacity: 0.25; cursor: default; }
.drawer-checklist__create {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
margin-top: 0.75rem;
}
.drawer-checklist__create .input { font-size: 0.75rem; }
.task-drawer__actions {
display: flex;
justify-content: flex-start;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid hsl(var(--border));
}
.task-drawer__delete {
border-color: hsl(var(--destructive) / 0.45);
color: hsl(var(--destructive));
}
@media (max-width: 600px) {
.task-drawer { width: 100vw; }
.task-drawer__head { padding: 1rem 1.125rem; }
.task-drawer__body { padding: 1rem 1.125rem 1.5rem; }
.task-drawer__grid { grid-template-columns: 1fr; gap: 0; }
.task-drawer__meta { flex-direction: column; gap: 0.125rem; }
}
/* ── Drawer: documentos ────────────────────────────────── */
.drawer-docs,
.drawer-comments {
border-top: 1px solid hsl(var(--border));
padding-top: 1.25rem;
margin-top: 1.5rem;
}
.drawer-docs__list,
.drawer-comments__list {
list-style: none;
padding: 0;
margin: 0 0 0.875rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.drawer-docs__item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.5rem 0.75rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--muted) / 0.4);
}
.drawer-docs__info { flex: 1; min-width: 0; }
.drawer-docs__controls {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.25rem;
}
.drawer-docs__action {
padding: 0.25rem 0.4rem;
border-radius: calc(var(--radius) - 0.2rem);
color: hsl(var(--muted-foreground));
font-size: 0.6875rem;
text-decoration: none;
}
.drawer-docs__action:hover,
.drawer-docs__action:focus-visible {
background: hsl(var(--secondary));
color: hsl(var(--foreground));
}
.drawer-docs__name {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
overflow-wrap: anywhere;
}
.drawer-docs__name:hover { color: hsl(var(--primary)); text-decoration: underline; }
.drawer-docs__meta {
display: block;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
margin-top: 0.125rem;
}
.drawer-docs__badge {
display: inline-block;
padding: 0.0625rem 0.375rem;
border-radius: 9999px;
background: hsl(var(--primary) / 0.16);
color: hsl(var(--primary));
font-size: 0.6875rem;
font-weight: 600;
}
.drawer-docs__remove {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
font-size: 1rem;
line-height: 1;
}
.drawer-docs__remove:hover {
background: hsl(var(--destructive) / 0.12);
color: hsl(var(--destructive));
}
.drawer-docs__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem;
}
.drawer-docs__upload { cursor: pointer; }
.drawer-docs__upload .btn { pointer-events: none; }
/* O input some, mas o foco por teclado precisa continuar visível. */
.drawer-docs__upload:focus-within .btn {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
.drawer-docs__link {
display: flex;
gap: 0.5rem;
flex: 1;
min-width: 14rem;
}
.drawer-docs__link .input { flex: 1; padding: 0.4375rem 0.625rem; font-size: 0.8125rem; }
.drawer-docs__error {
margin-top: 0.5rem;
font-size: 0.8125rem;
color: hsl(var(--destructive));
}
.drawer-docs__error:empty { display: none; }
/* ── Drawer: comentários ───────────────────────────────── */
.drawer-comments__item {
display: flex;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius);
border-left: 2px solid hsl(var(--border));
background: hsl(var(--muted) / 0.4);
}
/* Comentário que o cliente enxerga fica marcado: quem escreve precisa
ver de relance o que saiu da conversa interna. */
.drawer-comments__item.is-public { border-left-color: hsl(var(--primary)); }
.drawer-comments__block { flex: 1; min-width: 0; }
.drawer-comments__head {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.8125rem;
margin-bottom: 0.25rem;
}
.drawer-comments__tag {
font-size: 0.6875rem;
color: hsl(var(--muted-foreground));
border: 1px solid hsl(var(--border));
border-radius: 9999px;
padding: 0.0625rem 0.4375rem;
}
.is-public .drawer-comments__tag {
border-color: hsl(var(--primary) / 0.4);
color: hsl(var(--primary));
}
.drawer-comments__body {
font-size: 0.875rem;
line-height: 1.55;
white-space: pre-line;
overflow-wrap: anywhere;
}
.drawer-comments__actions {
display: flex;
gap: 0.75rem;
margin-top: 0.375rem;
}
.drawer-comments__actions button {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.drawer-comments__actions button:hover { color: hsl(var(--primary)); }
.drawer-comments__create textarea { resize: vertical; }
.drawer-comments__submit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
/* ── Drawer: concluir e reabrir ────────────────────────── */
.task-drawer__save-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.task-drawer__done,
.task-drawer__reopen {
display: flex;
align-items: center;
gap: 0.5rem;
}
.task-drawer__reopen .input {
padding: 0.4375rem 0.625rem;
font-size: 0.8125rem;
max-width: 12rem;
}
/* ── Arrasto em andamento ──────────────────────────────── */
/* Enquanto um card está sendo movido, nada na página pode ser
selecionado: o ponteiro passa por cima de títulos de coluna e de
outros cards, e sem isto o navegador vai grifando tudo no caminho. */
body.is-dragging-board,
body.is-dragging-board * {
user-select: none !important;
-webkit-user-select: none !important;
}
body.is-dragging-board {
cursor: grabbing;
}
/* ── Tela de etapas ────────────────────────────────────── */
/* Escolha única entre as etapas, então o controle é redondo como um
rádio em vez de um botão com rótulo repetido linha a linha. */
.stage-flag {
display: inline-grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
border: 1.5px solid hsl(var(--border));
background: transparent;
color: hsl(var(--primary-foreground));
font-size: 0.75rem;
line-height: 1;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
button.stage-flag:not(:disabled):hover {
border-color: hsl(var(--primary));
background: hsl(var(--primary) / 0.15);
}
button.stage-flag:disabled { opacity: 0.4; cursor: not-allowed; }
.stage-flag.is-on {
border-color: hsl(var(--primary));
background: hsl(var(--primary));
}
.stage-flag.is-inline {
width: 1.125rem;
height: 1.125rem;
font-size: 0.625rem;
vertical-align: -0.2em;
}
.stage-remove {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.stage-remove__move {
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
.stage-remove__move strong { color: hsl(var(--foreground)); font-weight: 600; }
.stage-remove .input {
width: auto;
padding: 0.375rem 0.5rem;
font-size: 0.8125rem;
}
.stage-remove__button { color: hsl(var(--destructive)); }
.stage-remove__button:not(:disabled):hover { background: hsl(var(--destructive) / 0.1); }
/* ── Tabela de etapas (editor de colunas do quadro) ───────── */
.stage-table__th--order { width: 3rem; }
.stage-table__th--count, .stage-table__th--done { width: 6rem; }
.stage-table__move { display: flex; gap: .25rem; }
.stage-table__move .btn { padding: .25rem .5rem; }
.stage-table__name-form { display: flex; gap: .5rem; align-items: center; }
.stage-table__name-form .input { padding: .375rem .625rem; font-size: .875rem; }
.stage-table__no-terminal { margin-top: 1.25rem; }
/* Nova tentativa depois de falha de envio. Fica dentro da mensagem de
erro porque só existe enquanto ela existir. */
.drawer-docs__retry {
margin-left: 0.25rem;
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--primary));
text-decoration: underline;
}
.drawer-docs__retry:hover { opacity: 0.85; }
/* ── Pipeline no formulário de criação ─────────────────── */
.pipeline-draft {
list-style: none;
counter-reset: etapa;
padding: 0;
margin: 0 0 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pipeline-draft__row {
counter-increment: etapa;
display: flex;
align-items: center;
gap: 0.625rem;
}
.pipeline-draft__row::before {
content: counter(etapa);
flex-shrink: 0;
width: 1.5rem;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
text-align: right;
}
.pipeline-draft__row .input {
padding: 0.4375rem 0.625rem;
font-size: 0.875rem;
}
/* O rádio é escondido e o rótulo vira o alvo, para o controle ficar
igual ao da tela de etapas. O foco por teclado continua visível. */
.pipeline-draft__terminal {
flex-shrink: 0;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
border: 1.5px solid hsl(var(--border));
color: transparent;
font-size: 0.75rem;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pipeline-draft__terminal input { position: absolute; opacity: 0; pointer-events: none; }
.pipeline-draft__terminal:hover { border-color: hsl(var(--primary)); }
.pipeline-draft__terminal:has(input:checked) {
border-color: hsl(var(--primary));
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.pipeline-draft__terminal:has(input:focus-visible) {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
/* ── Central de Documentos ─────────────────────────────── */
.docs-layout {
display: grid;
grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
@media (max-width: 56rem) {
.docs-layout { grid-template-columns: minmax(0, 1fr); }
}
/* ── Árvore ── */
.docs-tree {
position: sticky;
top: 1.5rem;
padding: 0.5rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
}
@media (max-width: 56rem) {
.docs-tree { position: static; }
}
.docs-tree__empty {
margin: 0;
padding: 0.75rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
}
.docs-tree__folder,
.docs-tree__child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.625rem;
border-radius: calc(var(--radius) - 0.125rem);
color: hsl(var(--foreground));
font-size: 0.875rem;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.docs-tree__folder { font-weight: 600; }
.docs-tree__folder:hover,
.docs-tree__child:hover { background: hsl(var(--secondary)); }
.docs-tree__folder.is-open {
background: hsl(var(--primary) / 0.12);
color: hsl(var(--primary));
}
.docs-tree__name { overflow-wrap: anywhere; }
.docs-tree__count {
flex-shrink: 0;
font-size: 0.6875rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
}
.docs-tree__children {
display: flex;
flex-direction: column;
margin: 0.125rem 0 0.375rem 0.625rem;
padding-left: 0.625rem;
border-left: 1px solid hsl(var(--border));
}
.docs-tree__child { font-size: 0.8125rem; }
.docs-tree__child.is-on { color: hsl(var(--primary)); font-weight: 600; }
/* ── Conteúdo ── */
.docs-main { min-width: 0; }
.docs-crumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
margin-bottom: 1rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
}
.docs-crumb a { color: inherit; text-decoration: none; }
.docs-crumb a:hover { color: hsl(var(--primary)); }
.docs-crumb strong { color: hsl(var(--foreground)); font-weight: 600; }
.docs-filters,
.docs-upload {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
padding: 0.875rem 1rem;
margin-bottom: 1rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
}
.docs-filters__field,
.docs-upload__field {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 9rem;
}
.docs-filters__field > span {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
}
.docs-filters .input,
.docs-upload .input {
padding: 0.4375rem 0.625rem;
font-size: 0.875rem;
}
.docs-upload__field { flex: 1 1 18rem; }
.docs-upload__blocked { margin: 0 0 1rem; }
/* ── Linhas ── */
.docs-file {
color: hsl(var(--foreground));
font-weight: 500;
text-decoration: none;
overflow-wrap: anywhere;
}
.docs-file:hover { color: hsl(var(--primary)); text-decoration: underline; }
.docs-file__meta {
display: block;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.docs-file__controls {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 0.25rem;
}
.docs-file__action {
color: hsl(var(--primary));
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
}
.docs-file__action:hover,
.docs-file__action:focus-visible { text-decoration: underline; }
.badge--team {
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
}
.badge--client {
background: hsl(var(--info) / 0.18);
color: hsl(199 85% 68%);
}
.badge--muted {
background: hsl(var(--muted) / 0.6);
color: hsl(var(--muted-foreground));
}
.docs-actions {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
justify-content: flex-end;
}
.docs-actions form { display: contents; }
.btn--danger { color: hsl(var(--destructive)); }
.btn--danger:hover {
background: hsl(var(--destructive) / 0.12);
color: hsl(var(--destructive));
}
.docs-move { position: relative; }
.docs-move > summary {
display: inline-flex;
align-items: center;
padding: 0.3125rem 0.625rem;
border-radius: calc(var(--radius) - 0.125rem);
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
cursor: pointer;
list-style: none;
}
.docs-move > summary::-webkit-details-marker { display: none; }
.docs-move > summary:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.docs-move[open] > summary { color: hsl(var(--primary)); }
.docs-move > form {
display: flex;
gap: 0.375rem;
align-items: center;
margin-top: 0.375rem;
}
.docs-move .input {
padding: 0.3125rem 0.5rem;
font-size: 0.8125rem;
max-width: 12rem;
}
/* ── Ações da linha de cliente ─────────────────────────── */
.client-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.375rem;
}
/* `position: absolute` no formulário: dentro de uma célula de tabela, um
`` que expande em fluxo normal alarga a coluna inteira e move
as linhas abaixo — flutuando por cima, a tabela não muda de tamanho. */
.client-edit { position: relative; }
.client-edit > summary {
display: inline-flex;
padding: 0.3125rem 0.625rem;
border-radius: calc(var(--radius) - 0.125rem);
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
cursor: pointer;
list-style: none;
}
.client-edit > summary::-webkit-details-marker { display: none; }
.client-edit > summary:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.client-edit[open] > summary { color: hsl(var(--primary)); }
.client-edit > form {
position: absolute;
z-index: 20;
top: calc(100% + .25rem);
right: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0;
padding: 0.875rem;
width: 16rem;
max-width: min(16rem, calc(100vw - 2rem));
text-align: left;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--background));
box-shadow: 0 12px 28px hsl(0 0% 0% / 0.28);
}
.client-edit .field__label { margin-top: 0.375rem; }
.client-edit .field__label:first-of-type { margin-top: 0; }
.client-edit .input { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
.client-edit .btn { margin-top: 0.625rem; align-self: flex-start; }
/* ── Pular para o conteúdo ─────────────────────────────── */
/* Fica fora da tela até receber foco. É o primeiro elemento tabulável da
página, para quem navega por teclado não percorrer a barra lateral
inteira em toda tela. */
.skip-link {
position: absolute;
left: 0.75rem;
top: -3rem;
z-index: 200;
padding: 0.625rem 1rem;
border-radius: var(--radius);
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: top 0.15s ease;
}
.skip-link:focus-visible {
top: 0.75rem;
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
/* O alvo recebe foco por programa; a moldura seria ruído visual. */
.content:focus { outline: none; }
/* ── GitHub: vínculo de repositórios ───────────────────── */
.gh-link .form-grid { margin-bottom: 1rem; }
.gh-modes { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.gh-modes legend { margin-bottom: 0.5rem; padding: 0; }
.gh-modes .check span { display: grid; gap: 0.15rem; }
.gh-modes .check small { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }
.gh-repo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gh-repo__head .card__title { margin-bottom: 0.25rem; }
.gh-repo__head .card__title a:hover { text-decoration: underline; }
.gh-repo__status { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }
.gh-repo__status.is-ok { color: hsl(160 70% 62%); }
.gh-repo__status.is-warning { color: hsl(38 90% 68%); }
.gh-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.gh-meta dt { color: hsl(var(--muted-foreground)); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.gh-meta dd { margin: 0.2rem 0 0; font-size: 0.875rem; }
.gh-setup { margin-top: 0; }
.gh-setup + .gh-setup { margin-top: 0.75rem; }
.gh-setup summary { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.gh-setup__body { padding: 0 1rem 1rem; }
.gh-steps { display: grid; gap: 0.4rem; margin: 0 0 1rem 1.1rem; padding: 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.gh-danger { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
.gh-commits { margin-top: 1.25rem; }
.gh-commits h3 { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.gh-commits ul { margin: 0; padding: 0; list-style: none; }
.gh-commits li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid hsl(var(--border)); }
.gh-commits__sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
.gh-commits__msg { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
/* Commits do GitHub no drawer da tarefa */
.drawer-commits { margin-top: 1.5rem; }
.drawer-commits__list { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.drawer-commits__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.625rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid hsl(var(--border)); }
.drawer-commits__sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
a.drawer-commits__sha:hover { text-decoration: underline; }
.drawer-commits__title { min-width: 0; overflow-wrap: anywhere; }
.drawer-commits__meta { grid-column: 2; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
.gh-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.gh-sync .field__hint { margin: 0; }
/* ── Empresa atual e troca de empresa (barra lateral) ─────── */
.sidebar__org { margin-top: -0.5rem; }
.org-current { display: grid; gap: 0.1rem; padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--sidebar-border)); border-radius: var(--radius); }
.org-current small { color: hsl(var(--sidebar-foreground) / 0.5); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.org-current strong { overflow: hidden; font-size: 0.8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.org-menu > summary { cursor: pointer; list-style: none; position: relative; padding-right: 1.75rem; transition: background-color var(--duration-fast) ease; }
.org-menu > summary::-webkit-details-marker { display: none; }
.org-menu > summary::after { content: ""; position: absolute; top: 50%; right: 0.75rem; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: 0.6; }
.org-menu[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.org-menu > summary:hover { background: hsl(var(--sidebar-accent)); }
.org-menu__list { display: grid; gap: 0.125rem; margin-top: 0.375rem; }
.org-menu__item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0.5rem 0.75rem; border-radius: var(--radius); color: hsl(var(--sidebar-foreground) / 0.8); font-size: 0.8125rem; font-weight: 500; text-align: left; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.org-menu__item small { color: hsl(var(--sidebar-foreground) / 0.5); font-size: 0.6875rem; font-weight: 400; }
.org-menu__item:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); }
.org-menu__item--new { flex-direction: row; color: hsl(var(--sidebar-foreground) / 0.65); }
/* ── Onboarding: assistente e checklist persistente ──────────────────
Tudo com os tokens do design system KodeHUB; nenhuma cor nova. */
.onboarding { display: grid; gap: 1.25rem; }
.onboarding__head h1 { margin: 0.25rem 0 0.35rem; font-size: 1.5rem; }
.onboarding__head p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }
.onboarding__eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem !important; font-weight: 700; color: hsl(var(--primary)) !important; }
.onboarding__card { margin: 0; }
.onboarding__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
.onboarding__foot { display: flex; justify-content: space-between; gap: 0.75rem; }
.onboarding__next { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: hsl(var(--secondary-foreground)); font-size: 0.875rem; }
.onboarding-steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0; padding: 0; }
.onboarding-steps__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.onboarding-steps__item a { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.onboarding-steps__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); font-size: 0.6875rem; font-weight: 700; }
.onboarding-steps__item.is-current { color: hsl(var(--foreground)); font-weight: 600; }
.onboarding-steps__item.is-current .onboarding-steps__num { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.onboarding-steps__item.is-done .onboarding-steps__num { background: hsl(var(--success) / 0.18); color: hsl(var(--success)); }
.participant-list { display: grid; gap: 0.5rem; }
.participant-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 0.75rem; }
.participant-row .field { margin-bottom: 0; }
.participant-row:not(:first-child) .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.onboarding-pill { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1100; padding: 0.6rem 1rem; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 0.8125rem; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-elevated); }
.onboarding-pill[hidden] { display: none; }
.onboarding-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.onboarding-item { padding: 0.9rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); }
.onboarding-item.is-done, .onboarding-item.is-skipped { opacity: 0.65; }
.onboarding-item__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.onboarding-item__head strong { display: block; font-size: 0.9375rem; }
.onboarding-item__head small { display: block; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
.onboarding-item__state { color: hsl(var(--success)) !important; font-weight: 600; }
.onboarding-item__mark { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-top: 0.1rem; border: 2px solid hsl(var(--border)); border-radius: 9999px; font-size: 0.75rem; font-weight: 700; }
.onboarding-item.is-done .onboarding-item__mark { border-color: hsl(var(--success)); background: hsl(var(--success) / 0.18); color: hsl(var(--success)); }
.onboarding-item__body { margin-top: 0.85rem; padding-left: 2.1rem; display: grid; gap: 0.5rem; justify-items: start; }
.onboarding-item__body .mcp-setup-grid, .onboarding-item__body .mcp-agent-message, .onboarding-item__body .mcp-secret-value { width: 100%; }
.onboarding-item__choices, .onboarding-item__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.onboarding-item__foot { margin-top: 0.25rem; }
@media (max-width: 720px) {
.participant-row { grid-template-columns: 1fr; padding-bottom: 0.9rem; border-bottom: 1px solid hsl(var(--border)); }
.participant-row:last-child { padding-bottom: 0; border-bottom: 0; }
.participant-row:not(:first-child) .field__label { position: static; width: auto; height: auto; clip: auto; }
.onboarding__actions { flex-direction: column-reverse; }
.onboarding-pill { right: 0.75rem; bottom: 0.75rem; }
}
|