/* Cores pelos tokens do Fluent UI, que o <fluent-design-theme mode="system"> troca entre claro e
   escuro. O segundo valor de cada var() vale até o JS do Fluent carregar, e segue o sistema também.
   Mesma base do GFNexus.Admin. */
:root {
    color-scheme: light dark;
    --bg: var(--neutral-layer-2, #f5f5f5);
    --surface: var(--neutral-layer-1, #ffffff);
    --text: var(--neutral-foreground-rest, #242424);
    --muted: var(--neutral-foreground-hint, #616161);
    --stroke: var(--neutral-stroke-rest, #d1d1d1);
    --accent: var(--accent-fill-rest, #0f6cbd);
    /* O texto em cima do destaque: o mesmo token do botão do Fluent (no escuro, o destaque é claro e o
       texto é escuro — branco ali não tem contraste, achado no navegador na S-131). */
    --on-accent: var(--foreground-on-accent-rest, #ffffff);
}

/* Escuro do sistema, quando ninguém escolheu claro; e escuro escolhido em Configurações (S-132). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --bg: var(--neutral-layer-2, #1b1b1b);
        --surface: var(--neutral-layer-1, #292929);
        --text: var(--neutral-foreground-rest, #ffffff);
        --muted: var(--neutral-foreground-hint, #adadad);
        --stroke: var(--neutral-stroke-rest, #4d4d4d);
        --accent: var(--accent-fill-rest, #479ef5);
        --on-accent: var(--foreground-on-accent-rest, #000000);
    }
}
:root[data-theme=dark] {
        --bg: var(--neutral-layer-2, #1b1b1b);
        --surface: var(--neutral-layer-1, #292929);
        --text: var(--neutral-foreground-rest, #ffffff);
        --muted: var(--neutral-foreground-hint, #adadad);
        --stroke: var(--neutral-stroke-rest, #4d4d4d);
        --accent: var(--accent-fill-rest, #479ef5);
        --on-accent: var(--foreground-on-accent-rest, #000000);
    }


html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body-font, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif);
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h1:focus { outline: none; }
.muted { color: var(--muted); }

/* Menu à esquerda e conteúdo à direita; no celular, o menu sobe para baixo do topo. O quadro
   (S-127) precisa da largura toda, por isso o menu é estreito. */
.shell {
    display: grid;
    grid-template-columns: 13rem 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--stroke);
}

.brand {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: var(--surface);
    border-right: 1px solid var(--stroke);
}

.sidebar a {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
}

.sidebar a.active {
    background: var(--bg);
    font-weight: 600;
}

.page { padding: 1.5rem; min-width: 0; }

@media (max-width: 720px) {
    .shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
    .sidebar { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--stroke); }
    .page { padding: 1rem; }
}

/* Quem está logado, no topo. */
.who {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.who-name { font-weight: 600; }
/* Nome de escritório longo não empurra o "Sair" para fora da tela no celular. */
.who-tenant {
    color: var(--muted);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.logout { margin: 0; }

/* Login e escolha de escritório. */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 24rem;
    padding: 2rem;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: 8px;
}

.login-form, .tenant-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-form input {
    padding: 0.5rem 0.6rem;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--stroke);
    border-radius: 4px;
}

.login-form label { margin-top: 0.5rem; font-weight: 600; }
.login-form fluent-button { margin-top: 1rem; }

.tenant-option {
    padding: 0.75rem 1rem;
    font: inherit;
    text-align: left;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--stroke);
    border-radius: 6px;
    cursor: pointer;
}

button.tenant-option:hover, button.tenant-option:focus-visible { border-color: var(--accent); }
.tenant-option.current { cursor: default; font-weight: 600; }

.validation-message, .form-error { color: var(--bad, #c50f1f); margin: 0.25rem 0 0; }

/* Escuro do sistema, quando ninguém escolheu claro; e escuro escolhido em Configurações (S-132). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .validation-message, :root:not([data-theme=light]) .form-error { color: #f1707b; }
}
:root[data-theme=dark] .validation-message, :root[data-theme=dark] .form-error { color: #f1707b; }



/* ---------- Quadro (S-127) ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.board-header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.board-readonly { color: var(--muted); font-size: 0.9rem; }

.board-message {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--stroke);
    background: var(--surface);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
}

.board-message-close {
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
}

/* O quadro como no Trello (S-142): a página com quadro tem a altura da tela, o quadro ocupa o que
   sobra abaixo do cabeçalho e dos filtros, e quem rola é cada coluna, por dentro. A coluna desenhada
   tem a altura dos cards dela, então o "+ Adicionar tarefa" fica logo abaixo do último card, à vista.
   A section continua ocupando a altura toda, transparente: soltar abaixo dos cards ainda é soltar
   na coluna. Cabeçalho alto demais (projeto com descrição longa): a página rola, e o quadro guarda
   uma altura mínima. */
.shell:has(.board) { height: 100vh; height: 100dvh; }
.shell:has(.board) .page { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

.board {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 20rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.board-column {
    flex: 0 0 17rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 8px;
}

.board-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    max-height: 100%;
    min-height: 0;
}

.board-column.closed { flex-basis: 15rem; }
.board-column.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

.board-column-header { display: flex; align-items: center; gap: 0.5rem; }
.board-column-header h2 { font-size: 0.95rem; margin: 0; }
.board-count { color: var(--muted); font-size: 0.85rem; }

.board-toggle {
    margin-left: auto;
    font: inherit;
    font-size: 0.85rem;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
}

.board-cards { flex: 0 1 auto; list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 0.5rem; min-height: 1rem; overflow-y: auto; }

.board-card {
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--stroke);
    cursor: default;
}

.board-card[draggable="true"] { cursor: grab; }
.board-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.board-card.dragging { opacity: 0.4; }
.board-card.cancelled { opacity: 0.6; }
.board-card.cancelled .board-card-title { text-decoration: line-through; }

.board-card-title { overflow-wrap: anywhere; }

.board-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.board-card-meta:empty { display: none; }

/* O selo de prazo da T2-D9: vermelho quando passou, âmbar quando está perto. */
.deadline { padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
.deadline.late { color: #fff; background: #c50f1f; }
.deadline.soon { color: #3d2a00; background: #fcd34d; }

/* Os chips das labels: a mesma paleta fechada do app (T2-D11), texto na cor e fundo tonal. */
.label-chip {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}

.label-0 { --ink: #5F6368; }
.label-1 { --ink: #C5221F; }
.label-2 { --ink: #B45309; }
.label-3 { --ink: #8A6D00; }
.label-4 { --ink: #137333; }
.label-5 { --ink: #00796B; }
.label-6 { --ink: #1A63C7; }
.label-7 { --ink: #4338CA; }
.label-8 { --ink: #7E22CE; }
.label-9 { --ink: #BE185D; }

.subtasks { color: var(--muted); }

.avatar {
    margin-left: auto;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--muted);
}

.board-add input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: var(--text);
    background: transparent;
    border: 1px dashed var(--stroke);
    border-radius: 6px;
}

.board-add input:focus { border-style: solid; border-color: var(--accent); outline: none; }

/* Escuro do sistema, quando ninguém escolheu claro; e escuro escolhido em Configurações (S-132). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .label-0 { --ink: #BDC1C6; }
    :root:not([data-theme=light]) .label-1 { --ink: #F28B82; }
    :root:not([data-theme=light]) .label-2 { --ink: #FDBA74; }
    :root:not([data-theme=light]) .label-3 { --ink: #FDD663; }
    :root:not([data-theme=light]) .label-4 { --ink: #81C995; }
    :root:not([data-theme=light]) .label-5 { --ink: #78D9CC; }
    :root:not([data-theme=light]) .label-6 { --ink: #8AB4F8; }
    :root:not([data-theme=light]) .label-7 { --ink: #A5B4FC; }
    :root:not([data-theme=light]) .label-8 { --ink: #D8B4FE; }
    :root:not([data-theme=light]) .label-9 { --ink: #F9A8D4; }
    :root:not([data-theme=light]) .label-chip { background: color-mix(in srgb, var(--ink) 20%, transparent); }
    :root:not([data-theme=light]) .deadline.late { color: #2b0004; background: #f1707b; }
}
:root[data-theme=dark] .label-0 { --ink: #BDC1C6; }
:root[data-theme=dark] .label-1 { --ink: #F28B82; }
:root[data-theme=dark] .label-2 { --ink: #FDBA74; }
:root[data-theme=dark] .label-3 { --ink: #FDD663; }
:root[data-theme=dark] .label-4 { --ink: #81C995; }
:root[data-theme=dark] .label-5 { --ink: #78D9CC; }
:root[data-theme=dark] .label-6 { --ink: #8AB4F8; }
:root[data-theme=dark] .label-7 { --ink: #A5B4FC; }
:root[data-theme=dark] .label-8 { --ink: #D8B4FE; }
:root[data-theme=dark] .label-9 { --ink: #F9A8D4; }
:root[data-theme=dark] .label-chip { background: color-mix(in srgb, var(--ink) 20%, transparent); }
:root[data-theme=dark] .deadline.late { color: #2b0004; background: #f1707b; }


/* Lista de projetos na Início. */
.project-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.project-list a {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--stroke);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}
.project-list a:hover, .project-list a:focus-visible { border-color: var(--accent); }

/* ---------- Detalhe do card (S-128) ---------- */

.board-card { cursor: pointer; }

.task-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: min(30rem, 100vw);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
    background: var(--surface);
    border-left: 1px solid var(--stroke);
    box-shadow: -8px 0 24px rgb(0 0 0 / 0.18);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.task-panel-header h2 { margin: 0; font-size: 1.2rem; }
.task-panel-parent { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.9rem; }

.task-panel-close {
    font: inherit;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
}

button.link {
    padding: 0;
    font: inherit;
    color: var(--accent);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.task-form { display: flex; flex-direction: column; gap: 0.35rem; }
.task-form label, .task-form legend { margin-top: 0.5rem; font-weight: 600; }

.task-form input:not([type]), .task-form input[type="text"], .task-form input[type="date"], .task-form textarea, .task-form select,
.task-new-label input {
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--stroke);
    border-radius: 4px;
}

.task-form textarea { resize: vertical; }
.task-form :disabled { opacity: 0.75; }

.task-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.task-form-row > div { display: flex; flex-direction: column; gap: 0.35rem; }

.task-stages { margin-top: 0.5rem; }
.task-stages summary { cursor: pointer; font-weight: 600; }
.task-stage-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.5rem;
}

.task-stage-grid label { margin: 0; font-weight: 400; }

.task-labels { border: 0; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.task-labels legend { padding: 0; margin-bottom: 0.4rem; font-size: 1rem; float: none; width: auto; }
.label-toggle { font: inherit; font-size: 0.85rem; cursor: pointer; }
.label-toggle:not(.on) { background: transparent; }
.label-toggle.on { font-weight: 600; }

.task-new-label { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.task-new-label input { flex: 1 1 10rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.swatch {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid transparent;
    cursor: pointer;
}

.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }

.deadline-line { margin: 0.25rem 0 0; font-size: 0.85rem; }

.task-panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.task-delete-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--stroke);
}

.task-conflict {
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #c50f1f;
}

.task-conflict h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.task-conflict table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.task-conflict th, .task-conflict td { padding: 0.3rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); overflow-wrap: anywhere; }

.task-subtasks h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.task-subtasks ul { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.task-subtasks li { display: flex; align-items: center; gap: 0.5rem; }
.task-subtasks li .muted { margin-left: auto; font-size: 0.8rem; }
.task-subtasks li.cancelled button { text-decoration: line-through; }

@media (max-width: 720px) {
    .task-form-row { grid-template-columns: 1fr; }
}

/* ---------- Filtros e "Minhas tarefas" (S-129) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
.filter-bar input[type=search], .filter-bar select {
    font: inherit;
    padding: 0.3rem 0.5rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: 4px;
}
.filter-search { min-width: 12rem; flex: 0 1 16rem; }
.filter-bar .label-toggle { cursor: pointer; font: inherit; font-size: 0.85rem; }
.filter-count { color: var(--muted); font-size: 0.9rem; }

.board-card-context { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.small { font-size: 0.85rem; }

.view-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--stroke); border-radius: 6px; overflow: hidden; }
.view-toggle button { font: inherit; padding: 0.3rem 0.8rem; border: 0; color: var(--text); background: var(--surface); cursor: pointer; }
.view-toggle button[aria-pressed=true] { color: var(--on-accent); background: var(--accent); }

.task-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--stroke); border-radius: 8px; }
.task-table th, .task-table td { padding: 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); overflow-wrap: anywhere; }
.task-table th button.link { font-weight: 600; color: var(--text); }
.due-by-project { max-width: 40rem; }
.due-summary a.late { color: #c50f1f; font-weight: 600; }

/* ---------- Projetos (S-130) ---------- */
.button-link, .button-secondary, .button-danger, .button-danger-outline {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font: inherit;
    border-radius: 4px;
    border: 1px solid var(--accent);
    text-decoration: none;
    cursor: pointer;
}
.button-link { color: var(--on-accent); background: var(--accent); }
.button-secondary { color: var(--accent); background: transparent; }
.button-danger { color: #fff; background: #c50f1f; border-color: #c50f1f; }
.button-danger-outline { color: #c50f1f; background: transparent; border-color: #c50f1f; }
.button-link:focus-visible, .button-secondary:focus-visible, .button-danger:focus-visible, .button-danger-outline:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
button:disabled { opacity: 0.6; cursor: default; }
.board-header .button-link { margin-left: auto; }

.check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; }

.status-chip { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--stroke); color: var(--muted); }
.badge-inactive { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; color: var(--surface); background: var(--muted); }

.project-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.project-card { padding: 0.8rem 1rem; border-radius: 8px; border: 1px solid var(--stroke); background: var(--surface); display: flex; flex-direction: column; gap: 0.35rem; }
.project-card.inactive { opacity: 0.75; border-style: dashed; }
.project-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.project-card-title { font-weight: 600; margin-right: auto; overflow-wrap: anywhere; }
.progress-line { display: flex; align-items: center; gap: 0.5rem; }
progress { width: 8rem; height: 0.6rem; accent-color: var(--accent); }

.pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

.project-summary { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--stroke); background: var(--surface); }
.project-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.project-facts dt { font-size: 0.8rem; color: var(--muted); }
.project-facts dd { margin: 0; overflow-wrap: anywhere; }
.project-description { margin: 0.6rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.project-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.project-actions:empty { display: none; }
.confirm { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid #c50f1f; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.confirm p { margin: 0; flex-basis: 100%; }

.project-form { max-width: 44rem; }
.project-links { max-width: 44rem; border: 1px solid var(--stroke); border-radius: 8px; padding: 0.6rem 1rem; margin: 1rem 0 0; background: var(--surface); }
.project-links legend { font-weight: 600; padding: 0 0.3rem; float: none; width: auto; font-size: 1rem; }
.project-links ul { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.project-links li { display: flex; align-items: center; gap: 0.6rem; }
.project-links .chosen li span { font-weight: 600; }
.project-links input[type=search] {
    font: inherit; width: 100%; box-sizing: border-box; margin-top: 0.3rem; padding: 0.4rem 0.6rem;
    color: var(--text); background: var(--bg); border: 1px solid var(--stroke); border-radius: 4px;
}
.project-form ~ .task-panel-actions { margin-top: 1rem; max-width: 44rem; }
.task-form [aria-invalid=true] { border-color: #c50f1f; }

/* ---------- Clientes (S-131) ---------- */
.client-table tr.inactive td { color: var(--muted); }
.client-table td .badge-inactive { margin-left: 0.4rem; }
.project-facts .wide { grid-column: 1 / -1; }
.client-address { display: flex; flex-direction: column; gap: 0.35rem; }
.client-address label { margin-top: 0.4rem; font-weight: 600; }
.cep-row { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.cep-row > div { display: flex; flex-direction: column; gap: 0.35rem; }
.client-address input, .project-form input[type=tel], .project-form input[type=email] {
    padding: 0.45rem 0.6rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--stroke); border-radius: 4px;
}
.client-address [aria-invalid=true] { border-color: #c50f1f; }
.confirm .check { flex-basis: 100%; }

/* No celular, a tabela de clientes vira um bloco por cliente, com o rótulo de cada dado. */
@media (max-width: 720px) {
    .client-table thead { display: none; }
    .client-table tr { display: block; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--stroke); }
    .client-table td { display: block; border: 0; padding: 0.1rem 0; }
    .client-table td[data-label]:not(:empty)::before { content: attr(data-label) ": "; color: var(--muted); }
}

/* ---------- Fora do login (S-132) ---------- */
.login-links { margin: 1rem 0 0; font-size: 0.9rem; text-align: center; line-height: 1.8; }
.login-notice { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--accent); }
.login-form.resend { margin-top: 0.5rem; }
.privacy { max-width: 46rem; }
.privacy h2 { font-size: 1.05rem; margin: 1.2rem 0 0.3rem; }
.privacy p { margin: 0 0 0.6rem; line-height: 1.5; }

/* O tema escolhido em Configurações (S-132) vale também para os controles nativos. */
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
.theme-options { border: 0; padding: 0; margin: 0.5rem 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.label-new, .label-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.label-editor input[type=text] { font: inherit; padding: 0.35rem 0.6rem; color: var(--text); background: var(--surface); border: 1px solid var(--stroke); border-radius: 4px; }
.label-editor .validation-message { flex-basis: 100%; margin: 0; }
.label-catalog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-width: 44rem; }
.label-catalog li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: var(--surface); border: 1px solid var(--stroke); border-radius: 6px; }
.label-actions { margin-left: auto; display: inline-flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
button.link.danger { color: #c50f1f; }
.confirm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-width: 52rem; }
.team-list > li { padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--stroke); border-radius: 8px; }
.team-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.team-head .avatar { margin-left: 0; }
.team-edit { margin-left: auto; }
.team-permissions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.permission-checks { border: 0; padding: 0; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.permission-checks legend, .role-options legend { font-weight: 600; padding: 0; float: none; width: auto; font-size: 1rem; }
.role-options { border: 0; padding: 0; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.check { align-items: flex-start; }
.invite-form { max-width: 44rem; margin-bottom: 1rem; }
.invite-form input[type=email] { font: inherit; width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; color: var(--text); background: var(--bg); border: 1px solid var(--stroke); border-radius: 4px; }
.invite-form h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }

/* O aviso de reconexão (ReconnectModal.razor, S-133). O Blazor troca as classes do <dialog>; cada
   parágrafo aparece só no estado dele. Modal de verdade: enquanto não há servidor, a tela por trás
   não recebe clique nem arrasto. */
.reconnect {
    max-width: 26rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
}
.reconnect::backdrop { background: rgb(0 0 0 / 0.35); }
.reconnect h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.reconnect p { margin: 0 0 0.75rem; }
.reconnect .reconnect-first, .reconnect .reconnect-retrying, .reconnect .reconnect-failed { display: none; }
/* O Blazor deixa o "show" junto do "retrying" e do "failed": o primeiro texto é só o da primeira tentativa. */
.reconnect.components-reconnect-show:not(.components-reconnect-retrying, .components-reconnect-failed) .reconnect-first,
.reconnect.components-reconnect-retrying:not(.components-reconnect-failed) .reconnect-retrying,
.reconnect.components-reconnect-failed .reconnect-failed { display: block; }
.reconnect.components-reconnect-failed button.reconnect-failed { display: inline-block; }

/* As abas do detalhe do card e a atividade (S-134). */
.task-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--stroke); margin-bottom: 0.75rem; }
.task-tabs button { font: inherit; padding: 0.4rem 0.8rem; background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.task-tabs button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.task-tabs button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.task-activity-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.task-activity-list li { display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.6rem; border-left: 2px solid var(--stroke); }

/* Comentários (S-135): na mesma linha do tempo, com a borda da cor de destaque para não se confundir
   com o histórico. O texto é o que a pessoa digitou: quebra de linha respeitada, palavra longa quebrada. */
.task-activity-list li.task-comment { border-left-color: var(--accent); gap: 0.2rem; }
.task-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.task-comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.mention { color: var(--accent); font-weight: 600; }
.comment-box { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }
.comment-box textarea { font: inherit; width: 100%; box-sizing: border-box; padding: 0.5rem; resize: vertical; color: var(--text); background: var(--surface); border: 1px solid var(--stroke); border-radius: 6px; }
.comment-box textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.comment-box-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.comment-box-actions > :first-child { margin-right: auto; }
.mention-suggestions { list-style: none; margin: 0; padding: 0.25rem 0; border: 1px solid var(--stroke); border-radius: 6px; background: var(--surface); max-height: 12rem; overflow-y: auto; }
.mention-suggestions li { padding: 0.15rem 0.6rem; }

/* Avisos (S-136): o sino no topo e a lista em /avisos. */
.bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: inherit;
    padding: 0.25rem;
    border-radius: 6px;
}
.bell:hover, .bell:focus-visible { color: var(--accent); }
.bell-count {
    position: absolute;
    top: -0.3rem;
    right: -0.45rem;
    min-width: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #c50f1f;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}
.notification-list { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 46rem; }
.notification { border-left: 3px solid transparent; }
.notification a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--stroke);
}
.notification a:hover, .notification a:focus-visible { background: rgba(127, 127, 127, 0.08); }
.notification.unread { border-left-color: var(--accent); }
.notification.unread .notification-text { font-weight: 600; }

/* O botão de envio de fora do login (S-139): o Enter envia, e enquanto envia ele trava e gira. */
.button-submit { padding: 0.55rem 1rem; font-weight: 600; }
.button-submit[aria-busy=true] { cursor: progress; opacity: 0.85; }
.button-submit[aria-busy=true]::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin 0.8s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button-submit[aria-busy=true]::before { animation: none; } }

/* Labels sem poluir a tela (S-141): no card, até três e "+N", nome longo cortado; no filtro, uma lista
   com busca, e na barra só as marcadas. */
.card-label { display: inline-block; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.label-more { font-size: 0.8rem; color: var(--muted); padding: 0.1rem 0.35rem; border: 1px solid var(--stroke); border-radius: 999px; }

.label-picker { position: relative; }
.label-picker > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--stroke);
    border-radius: 4px;
    background: var(--surface);
    font-size: 0.9rem;
    user-select: none;
}
.label-picker > summary::-webkit-details-marker { display: none; }
.label-picker > summary::after { content: " ▾"; color: var(--muted); }
.label-picker[open] > summary { border-color: var(--accent); }
.label-picker.align-right .label-picker-panel { left: auto; right: 0; }
.label-picker-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 16rem;
    max-height: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid var(--stroke);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.label-picker-search { padding: 0.35rem 0.5rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--stroke); border-radius: 4px; }
.label-picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.label-picker-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.3rem 0.35rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}
.label-picker-option:hover, .label-picker-option:focus-visible { background: var(--bg); }
.label-picker-check { width: 1rem; color: var(--accent); font-weight: 700; }
.label-picker-option .card-label { max-width: 12rem; }