:root {
    --m3-primary: #FF9800;
    --m3-primary-container: #FFE0B2;
    --m3-on-primary: #FFFFFF;
    --m3-on-primary-container: #E65100;
    --m3-surface: #FFFFFF;
    --m3-surface-variant: #F5F5F5;
    --m3-on-surface: #1D1B16;
    --m3-on-surface-variant: #5C5850;
    --m3-outline: #E0DDD5;
    --m3-outline-variant: #ECE9E1;
    --m3-error: #BA1A1A;
    --m3-radius-sm: 8px;
    --m3-radius-md: 16px;
    --m3-radius-lg: 28px;
    --m3-radius-pill: 999px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: var(--m3-surface);
    color: var(--m3-on-surface);
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    /* O CSS que o próprio Google serve pra essa fonte só define a versão
       -webkit- prefixada disso (confirmado 2026-08-18 direto na resposta
       deles) — sem essa propriedade a substituição de ligadura (o que
       transforma o texto "notifications" no glifo do sino) não acontece,
       e o navegador mostra a palavra literal em vez do ícone. Redundante
       em navegadores que já honram o -webkit-, mas necessário nos que
       exigem a versão sem prefixo. */
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}

/* Top app bar */
.m3-topbar {
    height: 64px;
    border-bottom: 1px solid var(--m3-outline-variant);
}

/* Conteúdo do topbar alinhado ao mesmo eixo/largura do .m3-content abaixo
   (2026-08-22, pedido do dono) — a barra em si continua full-bleed (a
   borda inferior vai de ponta a ponta), só o logo+menu ficam centralizados
   dentro do mesmo max-width, sem esticar 100% em telas largas. O padding
   horizontal mora AQUI, não em .m3-topbar (2026-08-22, correção) — se os
   dois tivessem padding próprio, o max-width:auto centralizaria dentro da
   área já descontada do padding do pai, deslocando logo/"Sair" ~24px pra
   dentro em relação ao título/tabela de .m3-content (que centraliza contra
   a viewport inteira, padding incluso na própria caixa) — mesmo padding
   nos dois, um só nível de aninhamento, pra centralizar sobre o mesmo
   eixo que .m3-content usa. */
.m3-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
}

.m3-topbar__brand {
    display: flex;
    /* center, não baseline (2026-08-19) — baseline fazia sentido só
       quando a logo era texto; a imagem (elemento substituído) não tem
       uma baseline de texto real pra alinhar com o badge "novo" do lado. */
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Logo animada (2026-08-19, era o texto "Mestri" em <span>) — GIF
   recortado pro conteúdo real (711×190, ~3,74:1), a margem transparente
   enorme do arquivo original (960×540, quase 3 vezes mais "vazio" que
   logo) foi cortada. Como a proporção mudou bastante (era 16:9), a
   altura foi recalculada pra manter a MESMA largura visual que já
   tinha sido aprovada antes do recorte, não o mesmo número de altura
   (que agora renderizaria bem mais largo). Login usa um valor próprio
   maior, sobrescrito no <style> de cada tela de login. */
.m3-topbar__logo-img {
    display: block;
    height: 35px;
    width: auto;
}

.m3-topbar__badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--m3-on-primary-container);
    background: var(--m3-primary-container);
    padding: 2px 8px;
    border-radius: var(--m3-radius-pill);
}

.m3-hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--m3-radius-pill);
    color: var(--m3-on-surface);
    cursor: pointer;
}

.m3-hamburger-btn:hover {
    background: var(--m3-surface-variant);
}

.m3-topbar__nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.m3-topbar__nav::-webkit-scrollbar {
    display: none;
}

.m3-nav-link {
    flex-shrink: 0;
    white-space: nowrap;
}

.m3-nav-link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--m3-on-surface-variant);
    padding: 8px 16px;
    border-radius: var(--m3-radius-pill);
    transition: background-color .15s ease, color .15s ease;
}

.m3-nav-link:hover {
    background: var(--m3-surface-variant);
    color: var(--m3-on-surface);
}

.m3-nav-link.is-active {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.m3-topbar__user {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    color: var(--m3-on-surface-variant);
    padding: 8px 4px 8px 16px;
    margin-left: 8px;
    border-left: 1px solid var(--m3-outline-variant);
}

.m3-topbar__logout-form {
    flex-shrink: 0;
    display: contents;
}

.m3-topbar__logout-btn {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* Content */
.m3-content {
    max-width: 1420px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* Página Projetos ganha mais largura (2026-08-27, teste a pedido do dono)
   -- mais espaco pra coluna "Acao do projeto" mostrar mais texto sem
   truncar tanto. Escopado so a esta pagina (body.page-projetos-wide) pra
   nao alterar o max-width das outras telas; o topbar acompanha o mesmo
   valor pra manter o alinhamento do eixo com .m3-content (ver comentario
   de .m3-topbar__inner acima). */
body.page-projetos-wide .m3-topbar__inner,
body.page-projetos-wide .m3-content {
    max-width: 1680px;
}

.m3-page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
}

.m3-page-subtitle {
    font-size: 13px;
    color: var(--m3-on-surface-variant);
    margin: 0 0 24px;
}

.m3-page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.m3-page-header-row .m3-page-subtitle {
    margin-bottom: 0;
}

.m3-page-header-row .m3-btn {
    flex-shrink: 0;
}

.m3-page-header-row a.m3-btn {
    text-decoration: none;
}

/* "Trabalhos do mesmo cliente" quick-jump — Projeto edit page header. */
.m3-outros-trabalhos {
    flex-shrink: 0;
    width: 260px;
}

.m3-outros-trabalhos label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--m3-on-surface-variant);
    margin-bottom: 4px;
}

.m3-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.m3-input--compact {
    width: 150px;
    padding: 10px 12px;
    font-size: 13px;
}

/* Select "Em andamento / Em backup / Todos" da listagem de Projetos
   (2026-08-21, teste) — 150px do .m3-input--compact padrão quebrava a
   palavra "andamento" em duas linhas. Só este select, não a classe
   compartilhada (Empresas e Dashboard usam a mesma classe em campos
   onde 150px está certo). */
#f-trabalhos {
    width: 190px;
}

.m3-alert-success {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    padding: 12px 20px;
    border-radius: var(--m3-radius-sm);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.m3-alert-error {
    background: #FCE8E6;
    color: var(--m3-error);
    padding: 16px 20px;
    border-radius: var(--m3-radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
}

.m3-alert-error ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.m3-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--m3-on-surface-variant);
    text-decoration: none;
    margin-bottom: 12px;
}

.m3-back-link:hover {
    color: var(--m3-on-surface);
}

.m3-back-link .material-symbols-outlined {
    font-size: 18px;
}

/* Full-page form ("página própria" pattern) */
.m3-form-section {
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.m3-form-section__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.m3-form-section__subtitle {
    font-size: 12px;
    color: var(--m3-on-surface-variant);
    margin: 0 0 20px;
}

/* Gestão/Tarefas (2026-08-19): espaço reduzido entre o subtítulo e o
   conteúdo — 20px (subtítulo) + 24px (.m3-page-header-row, que envolve
   título+subtítulo nessas duas seções) era demais somado. Escopado só a
   --destaque pra não mexer no cabeçalho de página, que reusa a mesma
   .m3-page-header-row com o espaçamento original. */
.m3-form-section--destaque .m3-form-section__subtitle {
    margin-bottom: 10px;
}

.m3-form-section--destaque .m3-page-header-row {
    margin-bottom: 10px;
}

.m3-form-section .m3-panel-row,
.m3-form-section .m3-panel-field {
    margin-bottom: 16px;
}

.m3-form-section .m3-panel-row:last-child,
.m3-form-section > .m3-panel-field:last-child {
    margin-bottom: 0;
}

.m3-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px 0 40px;
}

/* Dentro do bloco macro (2026-08-21): os 40px de baixo eram pensados pra
   quando os botões ficavam soltos, fora de qualquer card — somados ao
   padding do próprio .m3-form-section (24px) sobrava espaço demais até a
   borda de baixo do box. */
.m3-form-section--info-projeto .m3-form-actions {
    padding-bottom: 0;
}

/* Gestão's own "Salvar posição" — sits inside the section itself, not at
   the page's bottom, so it doesn't need that same generous bottom padding. */
.m3-form-actions--inline {
    padding: 4px 0 0;
}

/* Projeto edit page: two genuinely independent-height columns — Identifi-
   cação/Detalhes/Equipe (edited far less often after creation) stack in a
   narrow sidebar, Gestão and Tarefas stack in a wide column next to it.
   Plain flexbox, not CSS Grid: a shared-row-track grid forces both columns'
   rows to match height, which either strands empty space under whichever
   column is shorter or stretches its rows to match the taller one — neither
   is right when one column (Tarefas, with a potentially long comment
   thread) can be many times taller than the other. Flex columns have no
   such coupling; each side is exactly as tall as its own content.
   Only applied on edit (create has no Tarefas/Equipe yet, so the plain
   single-column form is still the right shape there). */
.m3-projeto-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Gestão's fields and Tarefas both need to stay inside the same <form> as
   Identificação/Detalhes/Equipe (one save action for the project record;
   Tarefas itself saves via its own AJAX calls and has no name= attributes,
   so nesting it in the form is harmless) — display:contents lets the two
   column <div>s below join the outer flex layout directly as if the <form>
   itself weren't there. */
.m3-projeto-layout__form {
    display: contents;
}

.m3-projeto-layout__col-left {
    flex: 0 0 340px;
    min-width: 0;
}

.m3-projeto-layout__col-right {
    flex: 1 1 0%;
    min-width: 0;
}

.m3-projeto-layout .m3-form-section {
    margin-bottom: 20px;
}

.m3-projeto-layout .m3-form-section:last-child {
    margin-bottom: 0;
}

/* Coluna esquerda como "bloco macro" (2026-08-21) — tentativa anterior de
   tingir cada sub-box com uma cor de fundo diferente não ficou perceptível
   ("todos em um tom só"). Segunda tentativa: agrupar os 4 sub-blocos
   (Identificação/Gestão de horas/Equipe/Detalhes) dentro de UM card só,
   com a mesma barra lateral colorida de Gestão/Tarefas
   (.m3-form-section--destaque) — tom neutro, não ligado a status, mesmo
   princípio do border-left cinza de #tarefas (não é status, então não
   ganha cor de status). */
.m3-form-section--destaque.m3-form-section--info-projeto {
    border-left-color: #989898;
    background: #FBFBFB;
}

/* Sub-blocos dentro do bloco macro acima: perdem a própria borda/fundo/
   cantos arredondados/margem (que .m3-form-section normalmente dá) e
   viram seções internas separadas por uma linha fina — não mais 4 cards
   empilhados. Especificidade batendo de propósito com as regras que está
   sobrescrevendo (.m3-projeto-layout .m3-form-section, .m3-form-section
   base), pra vencer independente da ordem no arquivo. */
.m3-projeto-layout .m3-form-section.m3-form-section--sub {
    border: none;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding: 20px 0;
    border-top: 1px solid var(--m3-outline-variant);
}

.m3-projeto-layout .m3-form-section.m3-form-section--sub:first-child {
    padding-top: 0;
    border-top: none;
}

/* Gestão and Tarefas: the two sections this layout is built to feature.
   Base rule is Gestão's own default (no status chosen yet) — the same
   orange it always had. Tarefas overrides this to a flat gray below (not
   status-tied at all), and Gestão gets 6 more specific status-color
   overrides layered on top once a real status is set (see
   .m3-gestao-status--* below and applyStatusColor() in projetos.js, which
   toggles these classes the same way it already colors the Status
   <select> itself). Confirmed 2026-08-17: previously both sections shared
   this one static orange look with no distinction between them. */
.m3-form-section--destaque {
    border-left: 4px solid var(--m3-primary);
    background: linear-gradient(to right, var(--m3-primary-container) 0%, var(--m3-surface) 240px);
}

.m3-form-section--destaque .m3-form-section__title {
    font-size: 18px;
}

/* Tarefas — deliberately not status-tinted (only Gestão is): plain gray
   accent, no background wash, same gray already used for the "Backup"
   status elsewhere in the app (not inventing a new gray). */
#tarefas.m3-form-section--destaque {
    border-left-color: #757575;
    background: var(--m3-surface);
}

/* Gestão — border + background tint match the project's current Status
   value, reusing .m3-project-status-badge--*/.m3-status-select--*'s exact
   palette (same principle already established for the Dashboard's status
   colors: this palette means something specific everywhere in the app, not
   redefined per screen). */
/* Paleta de status (2026-08-21, teste): Novidade/Programado/Com terceiro
   testando tons novos a pedido do dono — Com cliente/Backup/Pronto
   mantidos como estavam. Essa paleta é compartilhada com
   .m3-status-select--*, .m3-project-status-badge--* e
   .m3-cal-status-chip--* (ver mais abaixo no arquivo) — mudar aqui sem
   mudar lá quebraria a consistência entre as telas. */
.m3-form-section--destaque.m3-gestao-status--novidade {
    border-left-color: #D4A017;
    background: linear-gradient(to right, #FFF7D6 0%, var(--m3-surface) 240px);
}

.m3-form-section--destaque.m3-gestao-status--backup {
    border-left-color: #757575;
    background: linear-gradient(to right, #F1F1F1 0%, var(--m3-surface) 240px);
}

.m3-form-section--destaque.m3-gestao-status--com_cliente {
    border-left-color: var(--m3-on-primary-container);
    background: linear-gradient(to right, var(--m3-primary-container) 0%, var(--m3-surface) 240px);
}

.m3-form-section--destaque.m3-gestao-status--com_terceiro {
    border-left-color: #2E5266;
    background: linear-gradient(to right, #E8EEF2 0%, var(--m3-surface) 240px);
}

.m3-form-section--destaque.m3-gestao-status--programado {
    border-left-color: #C62828;
    background: linear-gradient(to right, #FFEBEE 0%, var(--m3-surface) 240px);
}

.m3-form-section--destaque.m3-gestao-status--pronto {
    border-left-color: #2E7D32;
    background: linear-gradient(to right, #E8F5E9 0%, var(--m3-surface) 240px);
}

/* Identificação/Detalhes/Equipe: still fully usable, just visually quieter
   so Gestão/Tarefas read as the primary content. */
.m3-form-section--sidebar {
    padding: 20px;
}

.m3-form-section--sidebar .m3-form-section__title {
    font-size: 13px;
    color: var(--m3-on-surface-variant);
}

@media (max-width: 880px) {
    .m3-projeto-layout {
        display: block;
    }

    .m3-projeto-layout__form {
        display: block;
    }

    .m3-projeto-layout__col-left,
    .m3-projeto-layout__col-right {
        flex-basis: auto;
    }
}

.m3-maps-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--m3-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.m3-maps-link:hover {
    text-decoration: underline;
}

.m3-checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-checkbox-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--m3-on-surface);
}

.m3-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.m3-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--m3-on-surface);
    cursor: pointer;
    flex: 0 0 auto;
}

/* Tarefas section (Projeto edit page): dynamic add/remove cards, distinct
   from the static pre-rendered Equipe checklist above. Composer sempre
   visível (2026-08-18, sem botão de abrir/fechar) — coluna em vez de
   linha porque agora inclui um editor de Descritivo, que precisa de
   altura própria. Fundo branco + contorno cinza (em vez do preenchido
   igual Horas/Conversa) pra diferenciar visualmente esse composer dos
   demais — é o único que cria um registro novo, não só edita um já
   existente. */
.m3-tarefa-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--m3-surface-variant);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

/* Mesmo caso do .m3-hora-novo[hidden] — display:flex acima vence o
   display:none implícito do atributo [hidden] (2026-08-21, teste). */
.m3-tarefa-new[hidden] {
    display: none;
}

/* .m3-panel-field's próprio flex:1 1 130px (definido pra layout em LINHA,
   como no formulário de Identificação) vira flex-basis de ALTURA aqui
   dentro — com o container em coluna, isso forçava o campo Solicitante
   (só label + select, bem mais baixo que 130px) a abrir um vão enorme
   até o Descritivo. Zerado só neste escopo. */
.m3-tarefa-new .m3-panel-field {
    flex: 0 1 auto;
    margin-bottom: 0;
}

.m3-tarefa-new__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m3-tarefa-new__actions-right {
    display: flex;
    gap: 8px;
}

/* Como teste (2026-08-19): sem moldura nem seta por padrão, mesmo
   tratamento de Identificação — o placeholder ("Solicitante") já dentro
   da própria option faz as vezes de rótulo, sem <label> acima. */
#f-nova-tarefa-contato {
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

#f-nova-tarefa-contato:hover,
#f-nova-tarefa-contato:focus {
    background: var(--m3-surface);
}

/* Contato field label + "Novo contato" trigger button, side by side —
   Identificação section (see form.blade.php's #f-contato field). Botão
   tirado do fluxo (position:absolute) de propósito (2026-08-19): um
   <label> normal sozinho e este label+botão precisam ter exatamente a
   mesma altura de linha pra não desalinhar quando aparecem lado a lado
   na mesma .m3-panel-row (ex.: Contato ao lado de Tipo do trabalho) —
   com o botão fora do fluxo, a altura da linha passa a depender só do
   texto do label, igual a qualquer outro campo. */
.m3-field-label-row {
    position: relative;
    padding-right: 26px;
}

.m3-field-label-row .m3-icon-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
}

.m3-field-label-row .m3-icon-btn .material-symbols-outlined {
    font-size: 16px;
}

.m3-tarefas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m3-tarefa-card {
    /* A background fill (not just a thin border) is what actually reads as
       "a separate card" at a glance — bordered-but-transparent cards sitting
       directly on the section's own white background blend together too
       easily once each one has real height (Descritivo + a comment thread). */
    background: var(--m3-surface);
    /* on-surface-variant, não outline (2026-08-19) — outline/outline-
       variant são propositalmente muito claros no M3 pra separar cartões
       cheios de conteúdo; on-surface-variant é o próximo tom mais escuro
       já definido na paleta, sem inventar uma cor nova. */
    border: 1px solid var(--m3-on-surface-variant);
    border-radius: var(--m3-radius-md);
    padding: 16px;
}

.m3-tarefa-card--concluida {
    opacity: .6;
}

/* "Bloco fechado" (2026-08-21) — agrupa título+Descritivo (as informações
   principais da tarefa) num painel com fundo levemente destacado, colado
   nas bordas superior/laterais do card (margin negativo cancelando o
   padding do .m3-tarefa-card) e arredondado só embaixo — isso, mais o
   border-bottom escuro (mesma cor do contorno do card), é o "fechamento"
   visual pedido, separando esse bloco da lista de Horas/Conversa abaixo.
   Cantos de cima com o mesmo raio do card (--m3-radius-md) pra continuar
   sem emenda visível; embaixo um raio menor (--m3-radius-sm) pra ler como
   um fechamento mais "apertado", não mais uma continuação do card. */
.m3-tarefa-card__bloco-fechado {
    background: var(--m3-surface-variant);
    margin: -16px -16px 16px;
    padding: 16px;
    border-radius: var(--m3-radius-md) var(--m3-radius-md) var(--m3-radius-sm) var(--m3-radius-sm);
    border-bottom: 1px solid var(--m3-on-surface-variant);
}

.m3-tarefa-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.m3-tarefa-card__info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.m3-tarefa-card__titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--m3-on-surface);
}

/* Clicável desde 2026-08-21 — é o gatilho pra habilitar edição do
   Descritivo (que agora fica contenteditable=false por padrão, pra um
   link dentro do texto navegar num clique só). */
.m3-tarefa-card__titulo.js-tarefa-titulo-toggle {
    cursor: pointer;
    border-radius: var(--m3-radius-sm);
}

.m3-tarefa-card__titulo.js-tarefa-titulo-toggle:hover {
    text-decoration: underline;
}

.m3-tarefa-card__solicitante {
    font-size: 13px;
    color: var(--m3-on-surface);
}

.m3-tarefa-card__data {
    font-size: 12px;
    color: var(--m3-on-surface-variant);
}

.m3-tarefa-card__cobrado {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--m3-on-surface-variant);
    cursor: pointer;
    white-space: nowrap;
}

/* Equipe: collapsed accordion instead of always listing every user */
.m3-accordion__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: var(--m3-on-surface);
}

.m3-accordion__toggle .material-symbols-outlined:first-child {
    color: var(--m3-on-surface-variant);
    font-size: 18px;
}

.m3-accordion__summary {
    flex: 1;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.m3-accordion__chevron {
    font-size: 18px;
    color: var(--m3-on-surface-variant);
    transition: transform .15s ease;
}

.m3-accordion.is-open .m3-accordion__chevron {
    transform: rotate(180deg);
}

.m3-accordion__panel {
    padding-top: 10px;
}

/* Equipe (Projeto EDIT, 2026-08-19) — mesmo tratamento de Identificação:
   sem fundo cinza nem seta por padrão, borda só no hover/focus. Escopado
   a #equipe-accordion de propósito — o "Com quem" do Calendário reusa a
   mesma marcação (.m3-accordion__toggle/__chevron) e continua do jeito
   que já foi validado, sem mexer aqui. */
#equipe-accordion .m3-accordion__toggle {
    background: transparent;
    border-color: transparent;
}

#equipe-accordion .m3-accordion__toggle:hover,
#equipe-accordion .m3-accordion__toggle:focus {
    /* #FBFBFB (2026-08-21) — mesmo fundo do bloco macro, padronizado com
       Identificação/Gestão de horas (só a borda aparece no hover/foco). */
    background: #FBFBFB;
    border-color: var(--m3-outline-variant);
}

#equipe-accordion .m3-accordion__chevron {
    display: none;
}

/* Histórico de posição: read-only timeline, newest first — lives inside
   .m3-panel__body, which already scrolls the whole panel; no nested scroll
   area needed here. */
.m3-posicoes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m3-posicao-item {
    /* Surface-variant, not surface — this now lives inside .m3-panel, which
       is itself surface (white); needs the tint to still read as a card. */
    border-left: 3px solid var(--m3-outline);
    background: var(--m3-surface-variant);
    border-radius: 0 var(--m3-radius-sm) var(--m3-radius-sm) 0;
    padding: 10px 12px;
}

.m3-posicao-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.m3-posicao-item__data {
    font-size: 11px;
    color: var(--m3-on-surface-variant);
}

.m3-posicao-item__campos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--m3-on-surface-variant);
    margin-bottom: 6px;
}

.m3-posicao-item__campos strong {
    color: var(--m3-on-surface);
    font-weight: 600;
}

.m3-posicao-item__texto {
    font-size: 13px;
    color: var(--m3-on-surface);
}

.m3-posicao-item__texto p {
    margin: 0 0 6px;
}

.m3-posicao-item__texto p:last-child {
    margin-bottom: 0;
}

/* Gestão: Status select colored like the listing's own status badges */
.m3-status-select {
    font-weight: 600;
}

/* Two classes each (.m3-input.m3-status-select--*) deliberately — .m3-input's
   own background rule appears later in this file, and single-class rules
   here would lose to it regardless of source order otherwise. */
.m3-input.m3-status-select--novidade { background: #FFF7D6; color: #D4A017; border-color: #D4A017; }
.m3-input.m3-status-select--backup { background: #F1F1F1; color: #757575; border-color: #757575; }
.m3-input.m3-status-select--com_cliente { background: var(--m3-primary-container); color: var(--m3-on-primary-container); border-color: var(--m3-on-primary-container); }
.m3-input.m3-status-select--com_terceiro { background: #E8EEF2; color: #2E5266; border-color: #2E5266; }
.m3-input.m3-status-select--programado { background: #FFEBEE; color: #C62828; border-color: #C62828; }
.m3-input.m3-status-select--pronto { background: #E8F5E9; color: #2E7D32; border-color: #2E7D32; }

/* Box próprio na coluna esquerda (2026-08-21) — antes vivia dentro do
   card "Gestão"; movido pro dono a pedido, entre Identificação e Equipe.
   Mesmo tratamento do campo de Equipe (#equipe-accordion .m3-accordion__
   toggle, 2026-08-19): sem contorno/fundo por padrão, só no hover. */
.m3-gestao-horas {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--m3-radius-sm);
    color: var(--m3-on-surface);
}

.m3-gestao-horas:hover {
    border-color: var(--m3-outline-variant);
    /* #FBFBFB (2026-08-21) — mesmo fundo do bloco macro, não mais o
       cinza de --m3-surface-variant (padronizado com Identificação e
       Equipe: só a borda aparece no hover, sem mudar o preenchimento). */
    background: #FBFBFB;
}

.m3-gestao-horas .material-symbols-outlined {
    font-size: 18px;
    color: var(--m3-on-surface-variant);
}

.m3-gestao-horas__resumo {
    font-size: 13px;
    font-weight: 600;
}

/* Rich text editor (bold/italic only) — "Ação do projeto" and comment composers */
/* Colapsado por padrão (2026-08-19) — toolbar/borda/fundo só aparecem
   com foco em algum campo de dentro (:focus-within cobre clicar no
   texto, digitar, e usar os botões da toolbar sem perder o foco do
   editável). Mesma lógica de "chrome só na interação" já usada em
   Identificação — aqui vale pro Descritivo de cada Tarefa, pro corpo da
   Conversa e também pra "Ação do projeto" (Gestão), que reaproveitam a
   mesma marcação .m3-richtext. */
.m3-richtext {
    border: 1px solid transparent;
    border-radius: var(--m3-radius-sm);
    overflow: hidden;
    background: transparent;
}

/* :not(.js-tarefa-descritivo-wrap) nos três seletores :focus-within desse
   bloco (2026-08-21) — Descritivo de uma Tarefa já cadastrada tem link de
   verdade dentro do texto; clicar num link dá foco nativo do navegador
   no <a>, o que disparava :focus-within e abria a caixa (borda/toolbar)
   mesmo sem estar editando de verdade. Esse wrapper usa a regra
   :has([contenteditable="true"]) logo abaixo em vez disso, presa ao
   estado real de edição — não a qualquer foco de descendente. */
.m3-richtext:not(.js-tarefa-descritivo-wrap):focus-within {
    border-color: var(--m3-outline);
    background: var(--m3-surface);
}

.js-tarefa-descritivo-wrap:has(> .js-tarefa-descritivo[contenteditable="true"]) {
    border-color: var(--m3-outline);
    background: var(--m3-surface);
}

.m3-richtext__toolbar {
    display: none;
}

.m3-richtext:not(.js-tarefa-descritivo-wrap):focus-within .m3-richtext__toolbar {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface-variant);
}

.js-tarefa-descritivo-wrap:has(> .js-tarefa-descritivo[contenteditable="true"]) .m3-richtext__toolbar {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface-variant);
}

.m3-richtext__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--m3-radius-sm);
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 13px;
    color: var(--m3-on-surface);
}

.m3-richtext__btn .material-symbols-outlined {
    font-size: 17px;
}

.m3-richtext__btn:hover {
    background: var(--m3-outline-variant);
}

.m3-richtext__sep {
    width: 1px;
    margin: 4px 2px;
    background: var(--m3-outline-variant);
}

/* Altura acompanha o conteúdo quando não está em foco — o texto real
   (Descritivo já preenchido, por exemplo) continua todo visível, só não
   sobra espaço vazio reservado à toa. Expande pra uma área confortável
   de edição só com foco (regras logo abaixo). */
.m3-richtext__body {
    min-height: 0;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: var(--m3-on-surface);
    outline: none;
}

.m3-richtext:not(.m3-richtext--comment):not(.js-tarefa-descritivo-wrap):focus-within .m3-richtext__body {
    min-height: 72px;
}

.js-tarefa-descritivo-wrap:has(> .js-tarefa-descritivo[contenteditable="true"]) .m3-richtext__body {
    min-height: 72px;
}

/* Nova tarefa (2026-08-21, teste): a seção inteira já fica escondida até
   clicar em "+ Nova tarefa" — pedir um SEGUNDO clique (focar o campo)
   só pra abrir a caixa de texto lá dentro virou redundante. Aqui o
   Descritivo abre direto com toolbar/borda/altura, sem depender de
   :focus-within. Escopado só a este composer — Ação do projeto e
   Conversa continuam colapsados até foco. */
.m3-tarefa-new .m3-richtext {
    border-color: var(--m3-outline);
    background: var(--m3-surface);
}

.m3-tarefa-new .m3-richtext__toolbar {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface-variant);
}

.m3-tarefa-new .m3-richtext__body {
    min-height: 72px;
}

.m3-richtext__body p {
    margin: 0 0 8px;
}

.m3-richtext__body p:last-child {
    margin-bottom: 0;
}

.m3-richtext__body ul,
.m3-richtext__body ol {
    margin: 0 0 8px;
    padding-left: 24px;
}

.m3-richtext__body a,
.m3-comentario__texto a {
    color: var(--m3-primary);
    text-decoration: underline;
    word-break: break-word;
}

.m3-richtext__body:empty::before {
    content: attr(data-placeholder);
    color: var(--m3-on-surface-variant);
}

/* Uma linha só até ganhar foco (2026-08-19) — parece um campo de texto
   comum ("Escreva um comentário...") em vez de reservar a altura de uma
   caixa de comentário mesmo vazia. */
.m3-richtext--comment .m3-richtext__body {
    min-height: 22px;
}

.m3-richtext--comment:focus-within .m3-richtext__body {
    min-height: 48px;
}

/* Editor não fecha mais se o :focus-within que muda for o do <select> de
   autor, não o do corpo do texto (2026-08-24, reportado pelo dono) —
   antes a borda/toolbar/altura do editor só ficavam abertas com foco
   dentro do PRÓPRIO .m3-richtext--comment; escolher primeiro "quem está
   comentando" move o foco pro <select>, que é irmão (não descendente) do
   richtext, então as três regras acima paravam de bater e o editor
   fechava sozinho — precisando de outro clique pra reabrir. Estas três
   regras repetem exatamente as de cima, só que presas ao
   :focus-within do composer INTEIRO (.m3-comentario-novo, que já é a
   mesma condição usando pro autor/Anexar/Comentar ficarem visíveis) —
   agora autor, editor e ações abrem e fecham juntos, por um único
   critério. */
.m3-comentario-novo:focus-within .m3-richtext--comment {
    border-color: var(--m3-outline);
    background: var(--m3-surface);
}

.m3-comentario-novo:focus-within .m3-richtext--comment .m3-richtext__toolbar {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface-variant);
}

.m3-comentario-novo:focus-within .m3-richtext--comment .m3-richtext__body {
    min-height: 48px;
}

/* Checklist items inside a rich-text body ("Lista de verificação") — a
   plain <li> tagged with a class, not a stored <input type=checkbox> (see
   projetos.js's toggleChecklist for why). The checkbox glyph is pure CSS. */
.m3-richtext__body li.m3-rt-check {
    position: relative;
    list-style: none;
    margin-left: -24px;
    padding-left: 26px;
    cursor: pointer;
}

.m3-richtext__body li.m3-rt-check::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--m3-outline);
    border-radius: 4px;
    background: var(--m3-surface);
}

.m3-richtext__body li.m3-rt-check--done::before {
    background: var(--m3-primary);
    border-color: var(--m3-primary);
}

.m3-richtext__body li.m3-rt-check--done::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 6px;
    height: 3px;
    border-left: 2px solid var(--m3-on-primary);
    border-bottom: 2px solid var(--m3-on-primary);
    transform: rotate(-45deg);
}

.m3-richtext__body li.m3-rt-check--done {
    color: var(--m3-on-surface-variant);
    text-decoration: line-through;
}

/* Any <img> inside a rich text body — inserted via the "Inserir imagem"
   toolbar button (Descritivo and, as of 2026-08-17, the comment composer),
   OR carried over as real HTML from legacy migrated content (data já
   existente, sem a classe .m3-rt-img — 2026-08-21: era esse o motivo de
   imagens migradas aparecerem maiores que a coluna, sem redimensionar).
   Bare img selector de propósito, não mais restrito a .m3-rt-img, pra
   cobrir os dois casos com uma regra só. Two selectors, not one shared
   class on the body: .m3-richtext__body covers both editors *while
   composing* (and Descritivo's own read-only display, which reuses that
   same class — see portal/projetos/show.blade.php); .m3-comentario__texto
   covers a comment *after* it's posted, which renders via a different
   wrapper class. */
.m3-richtext__body img,
.m3-comentario__texto img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--m3-radius-sm);
    margin: 8px 0;
}

/* Tarefas: comment thread ("Conversa") — internal team + client, per the
   future client-portal use case, distinguished by a colored left border. */
/* Tarefas: hour log ("Gestão de horas") — one row per person per day,
   matches the legacy encarregadostarefa scoping (per-Tarefa, not per-
   Projeto directly; Gestão only shows the summed total). */
.m3-tarefa-horas {
    /* Sem border-top próprio (2026-08-21) — o "bloco fechado" acima já
       tem seu próprio border-bottom fazendo essa divisão; uma segunda
       linha cinza logo depois ficava redundante/apertada. */
    margin-top: 16px;
    padding-top: 4px;
}

.m3-tarefa-horas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.m3-tarefa-horas__total {
    font-size: 12px;
    font-weight: 700;
    color: var(--m3-primary);
    background: var(--m3-primary-container);
    border-radius: var(--m3-radius-pill);
    padding: 2px 10px;
}

.m3-horas-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 10px;
}

/* Espaçamento reduzido 2026-08-17 (era gap:4px / padding:6px 8px) — mais
   compacto entre linhas de apontamento. */
.m3-hora-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    border-radius: var(--m3-radius-sm);
    font-size: 12px;
}

.m3-hora-item:hover {
    background: var(--m3-surface);
}

/* Sem isso, o "×" (.m3-icon-btn de 36px por padrão) força cada linha de
   apontamento a ficar bem mais alta que o texto dela, o que parecia um
   espaço grande entre uma hora e outra — mesmo tratamento já usado no
   meta de Conversa (.m3-comentario__meta .m3-icon-btn). */
.m3-hora-item .m3-icon-btn {
    width: 24px;
    height: 24px;
}

.m3-hora-item .m3-icon-btn .material-symbols-outlined {
    font-size: 15px;
}

.m3-hora-item__usuario {
    font-weight: 600;
    color: var(--m3-on-surface);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-hora-item__data,
.m3-hora-item__valor {
    color: var(--m3-on-surface-variant);
    white-space: nowrap;
}

.m3-hora-item__valor {
    font-weight: 600;
    min-width: 44px;
    text-align: right;
}

.m3-hora-novo {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* display:flex acima vence o display:none implícito do atributo [hidden]
   (CSS de autor sempre bate o stylesheet padrão do navegador, mesmo em
   especificidade igual) — sem isso, "+ Apontar hora" escondia o atributo
   mas os campos continuavam visíveis. */
.m3-hora-novo[hidden] {
    display: none;
}

/* Mesmo estilo do nome nas linhas de hora já lançadas (2026-08-19) —
   nada de moldura de botão/pílula, só um texto clicável alinhado com a
   lista acima dele. Seletor composto (.m3-btn.js-hora-novo-toggle, não
   só .js-hora-novo-toggle) de propósito: .m3-btn/.m3-btn--text (mesma
   especificidade de classe única) vêm depois no arquivo e venciam o
   padding/fonte/cor daqui, mesmo essas regras aparecendo primeiro. */
.m3-btn.js-hora-novo-toggle {
    display: block;
    padding: 3px 8px;
    background: transparent;
    color: var(--m3-on-surface);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.m3-btn.js-hora-novo-toggle:hover {
    background: var(--m3-surface);
}

.m3-hora-novo .js-hora-usuario {
    flex: 1;
    min-width: 0;
}

.m3-hora-novo .js-hora-data {
    flex: 0 0 140px;
}

.m3-hora-novo .js-hora-valor {
    flex: 0 0 80px;
}

.m3-tarefa-comentarios {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--m3-outline-variant);
}

.m3-tarefa-comentarios__title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
}

.m3-comentarios-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.m3-comentarios-vazio {
    font-size: 12px;
    color: var(--m3-on-surface-variant);
    margin: 0 0 12px;
}

.m3-comentario {
    /* Surface (white), not surface-variant — .m3-tarefa-card itself is now
       surface-variant, so a comment needs the lighter tone to still read as
       a distinct bubble instead of blending into its own card. */
    border-left: 3px solid var(--m3-outline);
    background: var(--m3-surface);
    border-radius: 0 var(--m3-radius-sm) var(--m3-radius-sm) 0;
    padding: 10px 12px;
}

/* Confirmado 2026-08-17: cliente e equipe agora só se distinguem pelo selo
   CLIENTE/EQUIPE (m3-comentario__badge) e por um tom de cinza mais forte,
   não mais por cor de marca — antes usava a cor "primary" (laranja), lida
   como se fosse um alerta/destaque, não só uma autoria diferente. */
.m3-comentario--contato {
    border-left-color: var(--m3-on-surface-variant);
    background: var(--m3-surface-variant);
}

.m3-comentario__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.m3-comentario__autor {
    font-size: 12px;
    font-weight: 700;
}

.m3-comentario__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--m3-on-surface-variant);
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-pill);
    padding: 2px 8px;
}

.m3-comentario__data {
    font-size: 11px;
    color: var(--m3-on-surface-variant);
    flex: 1;
}

.m3-comentario__meta .m3-icon-btn {
    width: 24px;
    height: 24px;
}

.m3-comentario__meta .m3-icon-btn .material-symbols-outlined {
    font-size: 15px;
}

.m3-comentario__texto {
    font-size: 13px;
    color: var(--m3-on-surface);
}

.m3-comentario__texto p {
    margin: 0 0 6px;
}

.m3-comentario__texto p:last-child {
    margin-bottom: 0;
}

.m3-comentario__anexos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.m3-anexo-imagem img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--m3-radius-sm);
    border: 1px solid var(--m3-outline-variant);
}

.m3-anexo-arquivo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--m3-primary);
    text-decoration: none;
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-sm);
    padding: 6px 10px;
}

.m3-anexo-arquivo:hover {
    text-decoration: underline;
}

.m3-anexo-arquivo .material-symbols-outlined {
    font-size: 16px;
}

/* Audio anexo (e.g. a WhatsApp voice note downloaded as .ogg) — a real
   inline player, not just a download link like the generic-file case. */
.m3-anexo-audio {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-sm);
    padding: 6px 10px;
}

.m3-anexo-audio audio {
    height: 32px;
    max-width: 240px;
}

.m3-anexo-audio__nome {
    font-size: 12px;
    color: var(--m3-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* margin-bottom adicionada 2026-08-17 — o composer agora vem ANTES da lista
   de comentários (era depois), então precisa da sua própria separação em
   vez de herdar o espaçamento que .m3-comentarios-list dava de graça por
   estar por cima dela. */
.m3-comentario-novo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

/* Autor e a barra Anexar/Comentar só aparecem junto com o corpo do texto
   em foco (2026-08-19) — por padrão o composer inteiro parece só um
   campo de uma linha ("Escreva um comentário..."), não uma caixa
   completa reservando espaço em toda Tarefa da lista. */
.m3-comentario-novo > select.js-comentario-autor,
.m3-comentario-novo > .m3-field-static {
    display: none;
}

.m3-comentario-novo:focus-within > select.js-comentario-autor {
    display: block;
}

.m3-comentario-novo:focus-within > .m3-field-static {
    display: block;
}

.m3-comentario-novo__anexos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.m3-anexo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-pill);
    padding: 4px 6px 4px 10px;
    color: var(--m3-on-surface-variant);
}

/* Tira só aquele arquivo da seleção antes de enviar (2026-08-18) — sem
   isso não tinha como corrigir um anexo errado/grande demais sem dar F5
   na página inteira. */
.m3-anexo-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--m3-on-surface-variant);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.m3-anexo-chip__remove:hover {
    background: var(--m3-outline-variant);
    color: var(--m3-on-surface);
}

/* Escondida até o composer ganhar foco (ver regra logo acima, junto do
   autor) — display:none aqui vence porque vem depois no arquivo. */
.m3-comentario-novo__actions {
    display: none;
    justify-content: space-between;
    align-items: center;
}

.m3-comentario-novo:focus-within .m3-comentario-novo__actions {
    display: flex;
}

.m3-anexo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.m3-anexo-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Card */
.m3-card {
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    overflow: hidden;
}

/* Table */
.m3-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.m3-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.u-hidden {
    display: none;
}

.m3-table thead th {
    text-align: left;
    vertical-align: top;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--m3-on-surface-variant);
    padding: 14px 20px;
    padding-left: 28px;
    border-bottom: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface-variant);
}

.m3-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.m3-sort-link:hover {
    color: var(--m3-on-surface);
}

.m3-sort-icon {
    font-size: 14px !important;
    opacity: 0;
    transition: opacity .1s ease;
}

.m3-sort-link:hover .m3-sort-icon,
.m3-sort-link.is-active .m3-sort-icon {
    opacity: 1;
}

.m3-sort-link.is-active {
    color: var(--m3-on-surface);
}

/* Column-header filter select (e.g. Ramo) — same idea as the legacy Mestri's
   per-column filter, sits below the sort link inside the same <th>. Reset
   the uppercase/letter-spacing/bold the header itself sets, since these are
   real option labels (e.g. "Advocacia"), not header chrome. */
/* Altura fixa + box-sizing igual pro <select> (.m3-th-filter) e pro
   <input> (.m3-th-search) — sem isso, o <select> nativo renderiza mais
   alto que o input mesmo com padding/border idênticos (chrome interno
   do navegador), ficando desalinhado quando os dois aparecem lado a
   lado no cabeçalho. Altura tirada do select, que é o mais alto dos
   dois por padrão. */
.m3-th-filter,
.m3-th-search {
    display: block;
    box-sizing: border-box;
    height: 24px;
    width: 100%;
    max-width: 130px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 400;
    padding: 3px 4px;
    border-radius: var(--m3-radius-sm);
    border: 1px solid var(--m3-outline);
    background: var(--m3-surface);
    color: var(--m3-on-surface);
}

/* Nome (Empresas, 2026-08-19): pelo menos o dobro da largura padrão —
   nome de empresa costuma ser bem mais longo que os outros campos de
   busca do cabeçalho. */
.col-cliente-razao .m3-th-search {
    max-width: 260px;
}

.m3-th-filter {
    margin-top: 4px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* Column-header text search (Nº/Cliente/Título, 2026-08-18) — mesmo
   espaço/proporção de .m3-th-filter, só que um <input> dentro do próprio
   <form> de um só campo (Enter já submete nativamente). */
.m3-th-search-form {
    margin-top: 4px;
}

.m3-table tbody tr {
    transition: background-color .12s ease;
}

.m3-table tbody tr:hover {
    background: #FFF8EE;
}

.m3-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--m3-outline-variant);
}

.m3-table td {
    padding: 10px 20px;
    font-size: 14px;
    vertical-align: middle;
}

.m3-table tr.is-new-row td {
    background: var(--m3-surface-variant);
}

/* This table lives nested inside .m3-form-section (which already has its own
   24px padding on each side) rather than a top-level .m3-card — the default
   20px horizontal cell padding leaves too little room for a 9-column table
   at that budget. Scoped modifier, not a base-rule change, so the top-level
   listings (which do have the room) keep their normal spacing. */
.m3-table--compact thead th,
.m3-table--compact td {
    padding-left: 10px;
    padding-right: 10px;
}

/* Same +8px-for-.m3-field-content reasoning as the base table's header
   fix, applied to this table's compact 10px padding instead of the base's
   20px — every column here except Nome (plain text) and the trailing
   action column uses .m3-field, whose own padding shifts its text 8px
   right of the header otherwise. */
.m3-table--compact thead th.col-contato-cargo,
.m3-table--compact thead th.col-contato-email,
.m3-table--compact thead th.col-contato-telefone,
.m3-table--compact thead th.col-contato-newsletter,
.m3-table--compact thead th.col-contato-brindes,
.m3-table--compact thead th.col-contato-status,
.m3-table--compact thead th.col-projeto-comquem,
.m3-table--compact thead th.col-projeto-andamento,
.m3-table--compact thead th.col-projeto-paraquando,
.m3-table--compact thead th.col-projeto-status,
.m3-table--compact thead th.col-projeto-ordem,
.m3-table--compact thead th.col-projeto-adm {
    padding-left: 18px;
}

.m3-drag-cell {
    padding-left: 8px !important;
    padding-right: 0 !important;
    width: 26px;
}

.col-drag { width: 26px; }
.col-categoria { width: 168px; }
.col-ordem { width: 78px; }
.col-action { width: 48px; }
.col-usuario-status { width: 150px; }
.col-cliente-cadastro { width: 150px; }
.col-cliente-ramo { width: 175px; }
.col-cliente-cidade { width: 140px; }
.col-cliente-site { width: 190px; }
.col-cliente-projetos { width: 100px; }
.col-action-wide { width: 124px; }
.col-contato-cargo { width: 125px; }
.col-contato-email { width: 220px; }
.col-contato-telefone { width: 125px; }
.col-contato-newsletter { width: 100px; }
.col-contato-brindes { width: 85px; }
.col-contato-status { width: 130px; }
.col-projeto-id { width: 65px; }
.col-projeto-proposta { width: 80px; }
.col-projeto-cliente { width: 150px; }
.col-projeto-tipo { width: 90px; }
.col-projeto-titulo { width: 130px; }
.col-projeto-comquem { width: 130px; }
.col-projeto-andamento { width: 435px; }
.col-projeto-paraquando { width: 100px; }
.col-projeto-status { width: 140px; }
.col-projeto-ordem { width: 55px; }
.col-projeto-adm { width: 85px; }

/* "Ação do projeto" não tem select/busca embaixo do título, então o
   box do cabeçalho fica mais alto que o conteúdo dele sozinho (os
   vizinhos têm 2 linhas). Diferente do padrão top-align dos demais,
   aqui o título fica centralizado na altura toda do box. */
.m3-table thead th.col-projeto-andamento,
/* Mesmo caso em Empresas (2026-08-19): "Nº Projetos" é o único
   cabeçalho sem filtro/busca embaixo. */
.m3-table thead th.col-cliente-projetos {
    vertical-align: middle;
}

.m3-field-static {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A .m3-field-static that's also a real link (e.g. a stat that navigates
   somewhere on click) — same look as plain listing text at rest, so it
   doesn't read as a stray blue link, with a color hint only on hover. */
.m3-link-cell {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.m3-link-cell:hover {
    color: var(--m3-primary);
    text-decoration: underline;
}

/* Base-table headers assume an 8px allowance for .m3-field's own padding
   (thead th's padding-left is 8px more than td's) so field text lines up
   with header text. .m3-field-static has no padding of its own, so without
   this it sits 8px left of its header — desktop-only (mobile uses a flat,
   already-matching padding scheme) and excluded from the compact Contatos
   table (its own header padding doesn't carry that +8px assumption). */
@media (min-width: 601px) {
    .m3-table:not(.m3-table--compact) .m3-field-static {
        padding-left: 8px;
    }
}

.m3-status-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

.m3-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--m3-radius-pill);
    background: var(--m3-surface-variant);
    color: var(--m3-on-surface-variant);
}

.m3-status-badge--1 {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.m3-status-badge--3 {
    background: #1D1B16;
    color: #fff;
}

.m3-status-badge--0 {
    background: #F1F1F1;
    color: #9E9E9E;
}

.m3-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--m3-radius-pill);
    margin-right: 6px;
}

.m3-type-badge--cliente {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.m3-type-badge--fornecedor {
    background: #E3F2FD;
    color: #1565C0;
}

.m3-type-badge--contato {
    background: #F1F1F1;
    color: #616161;
}

.m3-project-status-badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--m3-radius-pill);
}

.m3-project-status-badge--novidade {
    background: #FFF7D6;
    color: #D4A017;
}

.m3-project-status-badge--backup {
    background: #F1F1F1;
    color: #757575;
}

.m3-project-status-badge--com_cliente {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.m3-project-status-badge--com_terceiro {
    background: #E8EEF2;
    color: #2E5266;
}

.m3-project-status-badge--programado {
    background: #FFEBEE;
    color: #C62828;
}

.m3-project-status-badge--pronto {
    background: #E8F5E9;
    color: #2E7D32;
}

.m3-table tbody tr.is-archived-row .m3-field-static {
    color: var(--m3-on-surface-variant);
}

/* Toggle button reads as a plain, low-emphasis icon while active; once the
   row IS archived, color it so the archived state is obvious at a glance,
   not just inferable from which icon (archive vs unarchive) is showing. */
.m3-icon-btn.btn-toggle-ativo.is-archived {
    color: var(--m3-primary);
}

.m3-icon-btn.btn-toggle-ativo.is-archived:hover {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.drag-handle {
    cursor: grab;
    color: var(--m3-outline);
    transition: color .15s ease;
}

.drag-handle:hover {
    color: var(--m3-on-surface-variant);
}

.m3-table tbody tr.is-dragging {
    opacity: .4;
}

.m3-table tbody tr[data-id] {
    cursor: default;
}

.m3-ordem-display {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 8px;
    color: var(--m3-on-surface-variant);
}

/* Inline editable field */
.m3-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: var(--m3-radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-field:hover {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

/* While editing, the telefone popover is an absolutely positioned
   descendant that needs to escape the ellipsis clipping above — the
   column is often too narrow (~100px) to fit real inputs otherwise. */
.m3-field:focus-within {
    overflow: visible;
}

.m3-telefone-edit {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    align-items: center;
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-radius-sm);
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    z-index: 60;
}

.m3-telefone-edit__input {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--m3-on-surface);
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-radius-sm);
    background: var(--m3-surface);
    padding: 5px 6px;
    width: 84px;
}

.m3-telefone-edit__input--narrow {
    width: 40px;
}

/* Saved, but the row's position/visibility under the current sort or
   filter won't reflect it until the page reloads — see inline-edit.js. */
.m3-field.is-stale-position {
    color: var(--m3-primary);
    font-weight: 700;
}

.m3-field.is-stale-position .m3-status-badge {
    outline: 2px solid var(--m3-primary);
    outline-offset: 1px;
}

.m3-field__input {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--m3-on-surface);
    border: none;
    border-bottom: 2px solid var(--m3-primary);
    background: transparent;
    padding: 4px 2px;
    min-height: 32px;
    outline: none;
    width: 100%;
}

.m3-field__input:focus {
    background: #FFF8EE;
}

select.m3-field__input {
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-radius-sm);
    padding: 6px 8px;
}

/* Ordem (2026-08-27) -- a coluna e estreita (55px) e o input <number> fica
   do tamanho do conteudo (~21px pra 1 digito), menor que a largura minima
   que o navegador reserva pras setas nativas de incrementar/decrementar --
   elas ficavam sobrepostas em cima do proprio digito, tornando o valor
   ilegivel durante a edicao. Removidas; o campo continua aceitando
   digitacao normal e as setas do teclado (arrow up/down ja incrementam
   nativamente em input type=number mesmo sem o controle visual). */
.m3-field__input[type=number] {
    appearance: none;
    -moz-appearance: textfield;
}
.m3-field__input[type="number"]::-webkit-outer-spin-button,
.m3-field__input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Confirmado 2026-08-16, ajustado no mesmo dia: caixa de edição maior é
   opt-in (data-editor="expand" no campo) — testado em todo select primeiro,
   mas ficou "demais" pra opções curtas; mantido só pra campos de texto
   livre mais longo (ex.: Ação do projeto). Mesmo escape-da-célula do popover de
   telefone (.m3-field:focus-within já desliga o clip da célula). Alargado
   de novo no mesmo dia — "ainda maior" pedido depois de ver a primeira
   versão (220–320px). */
.m3-field__input--floating {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: auto;
    min-width: 320px;
    max-width: min(440px, calc(100vw - 32px));
    background: var(--m3-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    z-index: 60;
    font-size: 14px;
}

/* Textarea, não só input mais largo — o texto quebra em várias linhas
   visíveis em vez de rolar na horizontal dentro de uma caixa de uma
   linha só. */
.m3-field__input--textarea {
    top: 0;
    transform: none;
    resize: vertical;
    line-height: 1.4;
    white-space: normal;
    font-family: 'Montserrat', sans-serif;
}


/* Buttons */
.m3-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--m3-radius-pill);
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

/* Mesmo caso do .m3-hora-novo[hidden] acima — display:inline-flex vence
   o display:none do atributo [hidden] em qualquer .m3-btn (era o caso
   do próprio botão "+ Apontar hora", que devia sumir ao clicar). */
.m3-btn[hidden] {
    display: none;
}

.m3-btn--filled {
    background: var(--m3-primary);
    color: var(--m3-on-primary);
}

.m3-btn--filled:hover {
    background: #FB8C00;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.m3-btn--filled:disabled {
    background: var(--m3-outline);
    color: var(--m3-on-surface-variant);
    cursor: not-allowed;
}

.m3-btn--icon-only {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 50%;
}

.m3-btn--icon-only .material-symbols-outlined {
    font-size: 20px;
}

.m3-action-cell {
    padding: 4px 6px !important;
    text-align: right;
}

.m3-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--m3-radius-pill);
    color: var(--m3-on-surface-variant);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.m3-icon-btn:hover {
    background: #FBE9E7;
    color: var(--m3-error);
}

/* New-row form */
.m3-new-row-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.m3-input {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-radius-sm);
    padding: 8px 12px;
    background: var(--m3-surface);
    color: var(--m3-on-surface);
    outline: none;
    max-width: 100%;
    box-sizing: border-box;
}

/* Identificação/Detalhes (Projeto EDIT, 2026-08-19) — chrome do input
   (borda + fundo) só aparece no hover/focus, não o tempo todo. Mesmo
   campo por baixo (continua um <input>/<select>/<textarea> de verdade,
   grava igual), só reduzindo o quanto a tela parece "cheia de caixa
   aberta" quando não está em uso — mesmo princípio já usado na listagem
   de Projetos, onde nada parece caixa até você interagir. border-color
   (não `border`) pra manter a mesma largura de borda sempre e não pular
   o layout ao passar o mouse. Escopado a .m3-projeto-layout (só existe
   na tela de EDIÇÃO) — a tela de "Novo projeto" mantém o estilo de
   sempre, de propósito. */
.m3-projeto-layout #identificacao .m3-input,
.m3-projeto-layout #f-dados {
    border-color: transparent;
    background: transparent;
}

.m3-projeto-layout #identificacao .m3-input:hover,
.m3-projeto-layout #identificacao .m3-input:focus,
.m3-projeto-layout #f-dados:hover,
.m3-projeto-layout #f-dados:focus {
    border-color: var(--m3-outline);
    /* #FBFBFB (2026-08-21), não var(--m3-surface)/branco — mesmo fundo do
       bloco macro que envolve esses campos, pra só a borda aparecer no
       hover/foco, sem "acender" uma cor diferente da caixa em volta. */
    background: #FBFBFB;
}

/* Sem seta nativa nos selects de Identificação — reforça a leitura de
   "texto", não "caixa de escolha", enquanto não está em foco. */
.m3-projeto-layout #identificacao select.m3-input {
    appearance: none;
    -webkit-appearance: none;
}

/* Cresce junto com o conteúdo (JS em projetos.js calcula a altura) em
   vez de rolar por dentro de uma caixa de tamanho fixo. */
.m3-projeto-layout #f-dados {
    resize: none;
    overflow-y: hidden;
}

.m3-table td > .m3-input {
    width: 100%;
}

.m3-input:focus {
    border-color: var(--m3-primary);
    box-shadow: 0 0 0 3px var(--m3-primary-container);
}

.m3-input--grow {
    flex: 1;
    min-width: 160px;
}

.m3-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: #322F27;
    color: #fff;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: var(--m3-radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.m3-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.m3-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--m3-on-surface-variant);
    font-size: 13px;
}

/* Row clickable to open the side panel */
.m3-row-clickable {
    cursor: pointer;
}

/* Side panel (Material 3 "side sheet") */
.m3-scrim {
    position: fixed;
    inset: 0;
    background: rgba(29, 27, 22, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 40;
}

.m3-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.m3-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: var(--m3-surface);
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 41;
}

.m3-panel.is-open {
    transform: translateX(0);
}

.m3-panel > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.m3-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--m3-outline-variant);
    flex-shrink: 0;
}

.m3-panel__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.m3-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.m3-panel__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--m3-outline-variant);
    flex-shrink: 0;
}

.m3-panel-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.m3-panel-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 130px;
}

.m3-panel-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    /* Altura de linha fixa (2026-08-19) — sem isso, o label do Contato
       (dentro de .m3-field-label-row, um <div>) e um label solto como o
       de "Tipo do trabalho" podiam calcular uma altura de linha
       ligeiramente diferente dependendo do contexto, desalinhando os
       dois quando ficam lado a lado na mesma .m3-panel-row. */
    line-height: 16px;
    color: var(--m3-on-surface-variant);
}

.m3-panel-field .m3-input {
    width: 100%;
}

.m3-panel-field small {
    font-size: 11px;
    color: var(--m3-on-surface-variant);
}

.m3-panel-field .m3-field-error {
    font-size: 11px;
    color: var(--m3-error);
    display: none;
}

.m3-panel-field.has-error .m3-input {
    border-color: var(--m3-error);
}

.m3-panel-field.has-error .m3-field-error {
    display: block;
}

.m3-btn--text {
    background: transparent;
    color: var(--m3-on-surface-variant);
}

.m3-btn--text:hover {
    background: var(--m3-surface-variant);
}

/* Tighter spacing on narrow screens so tables fit without horizontal scroll */
@media (max-width: 600px) {
    .m3-content {
        padding: 20px 12px 48px;
    }

    .m3-page-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .m3-header-actions {
        width: 100%;
        /* A 2-item row (filter + button) fit fine, but a 3rd item (the
           Empresas export select) no longer does — stack instead of
           shrinking everything into an unreadable sliver. */
        flex-direction: column;
        align-items: stretch;
    }

    .m3-input--compact {
        width: 100%;
    }

    .m3-tarefa-card__header {
        flex-wrap: wrap;
    }

    .m3-tarefa-card__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .m3-topbar__inner {
        padding: 0 12px;
    }

    .m3-topbar__logo-img {
        height: 28px;
    }

    .m3-hamburger-btn {
        display: flex;
    }

    .m3-topbar__nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--m3-surface);
        border-bottom: 1px solid var(--m3-outline-variant);
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
        padding: 8px;
        z-index: 50;
    }

    .m3-topbar__nav.is-open {
        display: flex;
    }

    .m3-nav-link {
        font-size: 14px;
        padding: 12px 16px;
        border-radius: var(--m3-radius-sm);
        width: 100%;
    }

    .m3-table thead th,
    .m3-table td {
        padding: 8px 10px;
    }

    .m3-table thead th {
        font-size: 10px;
    }

    .m3-table td {
        font-size: 12px;
    }

    .u-hide-mobile {
        display: none !important;
    }

    .col-cliente-cadastro { width: 126px; }
    .col-action-wide { width: 104px; }

    /* Ramos has no drag-handle inset, so its content sits closer to the
       card edge than Tipos' — give it extra breathing room specifically. */
    .m3-table--roomy thead th,
    .m3-table--roomy td {
        padding: 8px 16px;
    }

    .col-drag { width: 24px; }
    .col-categoria { width: 112px; }
    .col-ordem { width: 54px; }
    .col-action { width: 40px; }
    .col-usuario-status { width: 130px; }
    .col-contato-email { width: 90px; }
    .col-contato-status { width: 90px; }
    .col-projeto-id { width: 55px; }
    .col-projeto-proposta { width: 65px; }
    .col-projeto-cliente { width: 100px; }
    .col-projeto-status { width: 100px; }

    .m3-drag-cell {
        width: 24px;
        padding-left: 8px !important;
    }

    .m3-drag-cell .drag-handle {
        font-size: 16px;
    }

    .m3-field,
    .m3-ordem-display {
        display: flex;
        max-width: none;
        width: 100%;
        min-width: 0;
        padding: 4px;
        margin-left: -4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .m3-table td > .m3-input {
        margin-left: -6px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .m3-icon-btn,
    .m3-btn--icon-only {
        width: 28px;
        height: 28px;
    }

    .m3-icon-btn .material-symbols-outlined,
    .m3-btn--icon-only .material-symbols-outlined {
        font-size: 18px;
    }

    .m3-btn--filled {
        padding: 8px 12px;
        font-size: 12px;
    }

    .m3-action-cell {
        padding: 6px 8px !important;
    }

    .m3-panel {
        width: 100vw;
    }

    .m3-panel-row {
        flex-direction: column;
        gap: 16px;
    }

    /* Fields with a fixed desktop width (inline style="flex: 0 0 Npx") would
       otherwise apply that Npx to the now-vertical main axis — i.e. become
       Npx tall instead of wide — once the row stacks. Force natural height. */
    .m3-panel-row .m3-panel-field {
        flex: 1 1 auto !important;
    }
}

/* Calendário */
.m3-cal-filtros {
    padding: 16px 20px;
    margin-bottom: 20px;
    /* overflow:visible + position/z-index (2026-08-18) — necessário pro
       painel de "Com quem" flutuar por cima do resto (position:absolute)
       em vez de ficar cortado pelo overflow:hidden que .m3-card usa por
       padrão (pra arredondar os cantos), e pra pintar acima do card da
       grade do calendário logo abaixo. */
    overflow: visible;
    position: relative;
    z-index: 5;
}

.m3-cal-filtros__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m3-cal-filtro-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
}

.m3-cal-filtro-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--m3-on-surface-variant);
}

.m3-cal-filtro-hint {
    font-weight: 400;
    text-transform: none;
    color: var(--m3-on-surface-variant);
    font-size: 11px;
}

/* Status: always-visible checkbox chips — the color dot on every chip
   (checked or not) doubles as a legend for the calendar's own item/event
   colors, so nothing needs a separate "what do the colors mean" key. */
/* Grade de 2 colunas (2026-08-18, era flex-wrap numa linha só de até
   340px) — força 3 linhas em vez de 2, deixando a caixa de Status mais
   estreita e sobrando largura pra Filtrar/Limpar caberem na mesma linha
   do resto sem precisar de scroll horizontal. */
.m3-cal-status-chips {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
}

.m3-cal-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--m3-on-surface-variant);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-pill);
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    user-select: none;
}

.m3-cal-status-chip input {
    display: none;
}

.m3-cal-status-chip__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-cor);
    flex: none;
}

/* Confirmado 2026-08-17: chip vem preenchida com o tom claro do status
   (mesmo par claro/escuro de .m3-project-status-badge--* na listagem de
   Projetos) mesmo sem estar selecionada — antes só a bolinha tinha cor, o
   resto da chip ficava neutro. Selecionada continua 100% da cor (regra
   :has(input:checked) abaixo, inalterada). */
/* label. prefix (element+class, not just class) needed to out-specificity
   the pre-existing ".m3-cal-filtro-item label" rule (class+element, same
   0-1-1 weight as a bare class would lose to) which otherwise keeps every
   chip's text on the neutral gray regardless of source order — confirmed
   via the live page's matched CSSOM rules, not guessed. */
label.m3-cal-status-chip--novidade { background: #FFF7D6; color: #D4A017; border-color: #FFF7D6; }
label.m3-cal-status-chip--backup { background: #F1F1F1; color: #757575; border-color: #F1F1F1; }
label.m3-cal-status-chip--com_cliente { background: var(--m3-primary-container); color: var(--m3-on-primary-container); border-color: var(--m3-primary-container); }
label.m3-cal-status-chip--com_terceiro { background: #E8EEF2; color: #2E5266; border-color: #E8EEF2; }
label.m3-cal-status-chip--programado { background: #FFEBEE; color: #C62828; border-color: #FFEBEE; }
label.m3-cal-status-chip--pronto { background: #E8F5E9; color: #2E7D32; border-color: #E8F5E9; }

.m3-cal-status-chip:has(input:checked) {
    border-color: var(--chip-cor);
    background: var(--chip-cor);
    color: #fff;
}

/* Com quem: accordion, same visual language as Equipe's on the Projeto
   form — collapsed by default, a summary line instead of always listing
   every option. */
/* Largura fixa (2026-08-18, era só min-width) — sem isso o campo crescia
   junto com o texto do resumo (nomes selecionados), empurrando Filtrar/
   Limpar. Texto que não cabe corta com reticências em vez de esticar a
   caixa. */
.m3-cal-filtro-comquem {
    width: 160px;
    flex-shrink: 0;
}

.m3-cal-filtro-comquem .m3-accordion__summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Painel flutua por cima em vez de empurrar o resto do formulário pra
   baixo (2026-08-18) — .m3-accordion precisa de position:relative pra
   servir de referência ao position:absolute do painel. */
.m3-cal-filtro-comquem .m3-accordion {
    position: relative;
}

.m3-cal-filtro-comquem .m3-accordion__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    width: 240px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-md);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    padding: 6px;
}

/* Lista limpa, uma linha por nome com destaque no hover (2026-08-18) —
   em vez da grade do checklist padrão (pensada pra caber vários nomes
   lado a lado numa área larga, como Equipe). Continua um checkbox de
   verdade do lado do nome, só que ocupando a linha inteira. */
.m3-cal-filtro-comquem .m3-checklist {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.m3-cal-filtro-comquem .m3-checklist-item {
    width: 100%;
    padding: 8px 8px;
    border-radius: var(--m3-radius-sm);
    font-weight: 400;
}

.m3-cal-filtro-comquem .m3-checklist-item:hover {
    background: var(--m3-surface-variant);
}

.m3-cal-filtro-acoes {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    margin-left: auto;
}

.m3-cal-vazio {
    padding: 40px;
    text-align: center;
    color: var(--m3-on-surface-variant);
}

/* Grid view — deliberately NOT .m3-table (that class forces table-layout:
   fixed + width:100%, which would squeeze N day columns to fit the
   viewport instead of letting the table grow wide and scroll). */
.m3-cal-grade-wrap {
    overflow: hidden;
}

.m3-cal-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
}

.m3-cal-scroll-top div {
    height: 1px;
}

.m3-cal-scroll-main {
    overflow-x: auto;
    max-height: calc(100vh - 320px);
}

.m3-cal-table {
    /* separate, not collapse — position:sticky silently does nothing on
       table cells when border-collapse:collapse is set (a real CSS
       limitation, not just a quirk here); confirmed 2026-08-16 that both
       the sticky header and the sticky left columns needed this to work at
       all, not just to look right. border-spacing:0 + border-right/bottom
       only (below) avoids doubled grid lines that "separate" would
       otherwise produce between adjacent cells. */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.m3-cal-table th,
.m3-cal-table td {
    border-right: 1px solid var(--m3-outline-variant);
    border-bottom: 1px solid var(--m3-outline-variant);
    padding: 0;
    vertical-align: top;
}

.m3-cal-table thead th:first-child,
.m3-cal-table tbody td:first-child {
    border-left: 1px solid var(--m3-outline-variant);
}

.m3-cal-table thead th {
    border-top: 1px solid var(--m3-outline-variant);
}

.m3-cal-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--m3-surface-variant);
    font-size: 11px;
    font-weight: 700;
    color: var(--m3-on-surface-variant);
    padding: 8px 6px;
    white-space: nowrap;
}

/* Confirmado 2026-08-16, colunas ajustadas 2026-08-17 (duas vezes: Tipo do
   Trabalho trocado por Ação do projeto, depois Nº estreitado). Nº/Cliente/
   Tipo do Trabalho/Título (colunas 2-5) travadas na rolagem horizontal,
   junto com a coluna de arrastar (1ª). Offsets cumulativos das larguras
   fixas: handle 32px, Nº 64px (medido: "99999" em 13px precisa de ~40px de
   conteúdo, 64px de coluna com o padding padrão de 20px cobre com folga),
   depois três de 120px — 0 / 32 / 96 / 216 / 336. table-layout:fixed
   garante que essas larguras nunca mudam com o conteúdo, então os offsets
   ficam sempre corretos. thead (topo) já era sticky (top:0); aqui ganha
   sticky também em left, então o canto (linha de título × colunas travadas)
   fica preso nos dois eixos ao mesmo tempo — por isso o z-index maior que as
   outras células sticky de apenas um eixo. */
.m3-cal-table th:nth-child(1),
.m3-cal-table td:nth-child(1) {
    position: sticky;
    left: 0;
}

.m3-cal-table th:nth-child(2),
.m3-cal-table td:nth-child(2) {
    position: sticky;
    left: 32px;
}

.m3-cal-table th:nth-child(3),
.m3-cal-table td:nth-child(3) {
    position: sticky;
    left: 96px;
}

.m3-cal-table th:nth-child(4),
.m3-cal-table td:nth-child(4) {
    position: sticky;
    left: 216px;
}

.m3-cal-table th:nth-child(5),
.m3-cal-table td:nth-child(5) {
    position: sticky;
    left: 336px;
    /* Sombra sutil marcando onde a área travada termina e a rolagem
       horizontal começa — só na última coluna travada. */
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, .15);
}

.m3-cal-table tbody td:nth-child(-n+5) {
    z-index: 1;
    background: var(--m3-surface);
}

.m3-cal-table thead th:nth-child(-n+5) {
    z-index: 3;
}

.m3-cal-col-fixed {
    width: 120px;
    font-size: 13px;
    padding: 8px 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nº — bem mais estreita que as outras fixas, só precisa caber até 5
   dígitos (99999). */
.m3-cal-col-numero {
    width: 64px;
    font-size: 13px;
    padding: 8px 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m3-cal-col-handle {
    width: 32px;
    text-align: center;
    cursor: grab;
    color: var(--m3-on-surface-variant);
}

.m3-cal-col-handle .material-symbols-outlined {
    font-size: 18px;
}

/* Destrava as colunas fixas no mobile (2026-08-21) — os 456px travados
   (handle+Nº+Cliente+Tipo+Título) sozinhos já tomam a tela toda ou mais
   numa largura estreita, sem sobrar espaço nenhum pras colunas de data
   rolarem. Corpo das células perde o sticky por completo; cabeçalho
   mantém só o sticky vertical (linha do topo continua fixa ao rolar pra
   baixo), solta só o horizontal (left: auto, não position: static, pra
   não cancelar também o top:0 herdado da regra "thead th" mais acima). */
@media (max-width: 600px) {
    .m3-cal-table tbody td:nth-child(-n+5) {
        position: static;
    }

    .m3-cal-table thead th:nth-child(-n+5) {
        left: auto;
    }

    .m3-cal-table th:nth-child(5),
    .m3-cal-table td:nth-child(5) {
        box-shadow: none;
    }
}

.m3-cal-col-dia {
    width: 90px;
}

.m3-cal-col-dia.is-passada {
    background: #F1F1F1;
}

.m3-cal-cell {
    width: 90px;
    height: 56px;
}

.m3-cal-cell.is-passada {
    background: #FAFAFA;
}

/* Confirmed 2026-08-16: highlight non-working days (fim de semana +
   feriado nacional/estadual/municipal-SP) — deliberately placed after
   .is-passada above so it wins when a column is both (e.g. a holiday last
   week): a non-working day is still worth flagging even once it's past. */
.m3-cal-col-dia.is-fim-de-semana,
.m3-cal-cell.is-fim-de-semana {
    background: #EEF2F7;
}

.m3-cal-col-dia.is-feriado,
.m3-cal-cell.is-feriado {
    background: #FDECEA;
}

.m3-fc-fim-de-semana {
    background: #EEF2F7 !important;
}

.m3-fc-feriado {
    background: #FDECEA !important;
}

.m3-cal-item {
    height: 100%;
    padding: 6px 8px;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

.m3-cal-item__texto {
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Ação do projeto agora é editável direto no chip (clique abre a caixa
   grande — mesmo mecanismo genérico de .m3-field/inline-edit.js), mas o
   chip precisa manter seu próprio recorte em 2 linhas em vez do
   overflow:hidden + nowrap + padding/min-height padrão de .m3-field —
   seletor composto (maior especificidade) reafirma o que este chip precisa
   por cima da base genérica. */
.m3-cal-item__texto.m3-field {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    max-width: 100%;
}

.m3-cal-item__texto.m3-field:hover {
    background: transparent;
    color: inherit;
}

.m3-cal-item__resp {
    align-self: flex-end;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, .3);
    border-radius: var(--m3-radius-pill);
    padding: 1px 6px;
}

#cal-mes {
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    padding: 16px;
}

@media (max-width: 600px) {
    .m3-cal-filtro-item select[multiple] {
        min-width: 120px;
    }

    .m3-cal-filtro-acoes {
        margin-left: 0;
        width: 100%;
    }
}

/* Horas dashboard */
.m3-horas-filtros {
    padding: 16px 20px;
    margin-bottom: 20px;
}

.m3-horas-filtros__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.m3-horas-total-geral {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border-radius: var(--m3-radius-md);
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 14px;
}

.m3-horas-total-geral strong {
    font-size: 18px;
}

.m3-horas-total-geral__periodo {
    color: var(--m3-on-primary-container);
    opacity: .8;
    font-size: 12px;
}

.m3-page-title--sm {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.m3-horas-detalhe-header {
    margin-top: 32px;
    margin-bottom: 12px;
}

/* Portal do Cliente */
.m3-portal-tarefa {
    padding: 20px;
    margin-bottom: 20px;
}

.m3-posicoes-portal {
    margin-bottom: 20px;
    padding: 16px 20px;
}

.m3-posicoes-portal__summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--m3-on-surface);
}

.m3-posicoes-portal[open] .m3-posicoes-portal__summary {
    margin-bottom: 16px;
}

.m3-nova-solicitacao {
    margin-bottom: 20px;
    padding: 20px;
}

.m3-portal-tarefa__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--m3-outline-variant);
}

.m3-portal-tarefa__descritivo {
    flex: 1;
    min-width: 0;
}

.m3-aprovar-form {
    flex-shrink: 0;
}

.m3-aprovado-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #2E7D32;
    background: #E8F5E9;
    padding: 6px 12px;
    border-radius: var(--m3-radius-pill);
    white-space: nowrap;
}

.m3-aprovado-badge .material-symbols-outlined {
    font-size: 16px;
}

.m3-panel-divider {
    border: none;
    border-top: 1px solid var(--m3-outline-variant);
    margin: 8px 0;
}

.m3-panel-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--m3-on-surface-variant);
    margin: 0 0 4px;
}

.m3-panel-hint {
    font-size: 12px;
    color: var(--m3-on-surface-variant);
    margin: 0 0 12px;
}

/* Portal topbar nav — deliberately NOT .m3-topbar__nav: that class is
   display:none on mobile until a hamburger-button JS (which the portal
   layout doesn't load, having no page links to hide) toggles .is-open. The
   portal's nav is just identity + Sair, small enough to always stay
   visible instead of needing a collapse mechanism at all. */
.m3-topbar__portal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .m3-topbar__portal-nav .m3-topbar__user {
        display: none;
    }
}

/* Dashboard — bar-chart fill uses a fixed dataviz blue (#256abf), not the
   brand orange: categorical/quantitative chart color is deliberately kept
   separate from brand color (same principle the original mockup used).
   Status colors, by contrast, reuse .m3-project-status-badge--*'s exact
   palette everywhere in this screen, since those already mean something
   specific elsewhere in the app. */
.m3-dash-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.m3-dash-fgroup {
    display: flex;
    align-items: center;
    gap: 10px;
}

.m3-dash-flabel {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--m3-on-surface-variant);
}

.m3-dash-segmented {
    display: inline-flex;
    background: var(--m3-surface-variant);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.m3-dash-segmented__btn {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--m3-on-surface-variant);
    text-decoration: none;
}

.m3-dash-segmented__btn.is-active {
    background: var(--m3-primary);
    color: var(--m3-on-primary);
}

.m3-dash-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.m3-dash-tiles--2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 480px;
}

.m3-dash-tile {
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-md);
    padding: 16px 18px;
}

.m3-dash-tile__label {
    font-size: 11.5px;
    color: var(--m3-on-surface-variant);
    margin: 0 0 8px;
}

.m3-dash-tile__value {
    font-size: 26px;
    font-weight: 600;
    color: var(--m3-on-surface);
    line-height: 1;
    margin: 0;
}

.m3-dash-tile__value--sm {
    font-size: 16px;
}

.m3-dash-tile__value.is-critical {
    color: var(--m3-error);
}

.m3-dash-tile__sub {
    font-size: 11px;
    color: var(--m3-on-surface-variant);
    margin: 5px 0 0;
}

.m3-dash-panel {
    padding: 18px 20px 20px;
    margin-bottom: 18px;
}

.m3-dash-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.m3-dash-panel-head h2 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    color: var(--m3-on-surface);
}

.m3-dash-panel-head__hint {
    font-size: 11px;
    color: var(--m3-on-surface-variant);
    white-space: nowrap;
}

/* Agrupa hint + toggle de ordenação do lado direito do cabeçalho do painel
   (2026-08-23) — .m3-dash-panel-head é space-between com só 2 filhos
   esperados; isso vira o 2º filho pra caber hint+toggle juntos sem abrir
   um 3º espaço no meio. */
.m3-dash-panel-head__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* "Horas" (padrão) / "A-Z" — ordenação dos relatórios agregados
   (2026-08-23, pedido do dono): Visão geral, Pessoa›Todos, Projeto›Todos. */
.m3-dash-sort-toggle {
    display: flex;
    gap: 2px;
}

.m3-dash-sort-toggle a {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--m3-radius-pill);
    color: var(--m3-on-surface-variant);
    text-decoration: none;
}

.m3-dash-sort-toggle a:hover {
    background: var(--m3-surface-variant);
}

.m3-dash-sort-toggle a.is-active {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.m3-dash-barlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m3-dash-barrow {
    display: grid;
    grid-template-columns: 150px 1fr 60px;
    align-items: center;
    gap: 10px;
}

/* Mais espaço pro nome quando é "Cliente — Tipo — Título" em vez de só um
   nome de pessoa (2026-08-23, pedido do dono) — Pessoa>projeto e
   Projeto>Todos usam essa variante; as barras de "Horas por pessoa"
   continuam com a coluna padrão, mais estreita, que já basta pra um nome. */
.m3-dash-barlist--wide .m3-dash-barrow {
    grid-template-columns: 280px 1fr 60px;
}

/* Linha de "Horas por projeto" clicável (2026-08-23, pedido do dono) —
   expande o detalhamento por pessoa daquele projeto. .m3-dash-barrow já
   define o grid; isto só reseta a aparência de <button> por cima. */
.m3-dash-barrow--toggle {
    display: grid;
    border: none;
    background: none;
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
    padding: 4px 0;
    width: 100%;
    border-radius: var(--m3-radius-sm);
}

.m3-dash-barrow--toggle:hover {
    background: var(--m3-surface-variant);
}

.m3-dash-expand-icon {
    font-size: 15px;
    vertical-align: -3px;
    margin-right: 2px;
    color: var(--m3-on-surface-variant);
    transition: transform .15s ease;
}

.m3-dash-proj-accordion.is-open .m3-dash-expand-icon {
    transform: rotate(180deg);
}

.m3-dash-proj-accordion__panel {
    margin: 2px 0 6px;
    padding: 8px 12px;
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* [hidden] explícito (mesma pegadinha já documentada pro trigger de Horas)
   — display:flex acima venceria o display:none implícito do atributo
   [hidden] sem isto, deixando o painel sempre visível. */
.m3-dash-proj-accordion__panel[hidden] {
    display: none;
}

/* Barrinha por pessoa dentro do detalhamento (2026-08-23, pedido do dono)
   — mesmo espírito de .m3-dash-barrow/.m3-dash-bartrack, só mais fina e
   com coluna de nome mais estreita (já está dentro de um painel recuado). */
.m3-dash-proj-accordion__row {
    display: grid;
    grid-template-columns: 140px 1fr 55px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--m3-on-surface-variant);
}

.m3-dash-proj-accordion__row--empty {
    display: block;
    margin: 0;
}

.m3-dash-proj-accordion__nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-dash-proj-accordion__track {
    position: relative;
    height: 12px;
    background: var(--m3-surface);
    border-radius: 3px;
}

/* Cor própria pro 2º/3º nível (2026-08-23, pedido do dono — tom claro de
   laranja, mais claro que o laranja de marca #FF9800 e diferente do
   laranja de status "Com o cliente" #E65100, pra não confundir com
   nenhum dos dois). */
.m3-dash-proj-accordion__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #FFC97A;
    border-radius: 3px;
}

.m3-dash-proj-accordion__val {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Linha aninhada clicável (2026-08-23, pedido do dono) — Cliente:Todos usa
   isto pro projeto dentro do cliente, que expande de novo pra pessoa.
   Mesmo grid de .m3-dash-proj-accordion__row, só que <button> em vez de
   <div>, então precisa dos mesmos resets de aparência de
   .m3-dash-barrow--toggle. */
.m3-dash-proj-accordion__row--toggle {
    border: none;
    background: none;
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
    padding: 3px 4px;
    width: 100%;
    border-radius: var(--m3-radius-sm);
}

.m3-dash-proj-accordion__row--toggle:hover {
    background: var(--m3-surface);
}

.m3-dash-expand-icon--sm {
    font-size: 13px;
    vertical-align: -2px;
}

/* Recuo leve pra deixar a hierarquia Cliente › Projeto › Pessoa visível
   sem precisar de mais uma coluna no grid. */
.m3-dash-proj-accordion--nested {
    padding-left: 6px;
    border-left: 2px solid var(--m3-outline-variant);
}

.m3-dash-proj-accordion__panel--nested {
    background: var(--m3-surface);
    margin-left: 6px;
}

.m3-dash-barrow__name {
    font-size: 12px;
    color: var(--m3-on-surface-variant);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-dash-bartrack {
    position: relative;
    height: 20px;
    background: var(--m3-outline-variant);
    border-radius: 4px;
}

.m3-dash-barfill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #256abf;
    border-radius: 4px;
}

/* "Horas por pessoa" com 100% = capacidade do período, não mais o maior
   valor da amostra (2026-08-23) — pessoa na ou acima da capacidade (dias
   úteis × 7,5h) ganha a mesma cor de alerta já usada em Atrasados/Atenção
   necessária, não uma cor nova só pra isso. */
.m3-dash-barfill.is-critical {
    background: var(--m3-error);
}

.m3-dash-barrow__val {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
    font-size: 12px;
    font-weight: 600;
    color: var(--m3-on-surface);
    font-variant-numeric: tabular-nums;
}

/* % da capacidade (dias úteis × 7,5h) ao lado das horas — só nas barras
   de "Horas por pessoa" (2026-08-23), as únicas que têm esse conceito. */
.m3-dash-barrow__pct {
    font-size: 10px;
    font-weight: 400;
    color: var(--m3-on-surface-variant);
}

.m3-dash-stackbar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 14px;
}

.m3-dash-stackseg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
}

.m3-dash-stackseg span {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.m3-dash-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.m3-dash-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--m3-on-surface-variant);
}

.m3-dash-legend__item b {
    color: var(--m3-on-surface);
    font-variant-numeric: tabular-nums;
}

.m3-dash-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
    display: inline-block;
}

.m3-dash-item-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m3-dash-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--m3-outline-variant);
    text-decoration: none;
    color: inherit;
}

.m3-dash-item-row:last-child {
    border-bottom: none;
}

.m3-dash-item-row:hover {
    background: var(--m3-surface-variant);
}

.m3-dash-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
}

.m3-dash-item-dot.is-critical {
    background: var(--m3-error);
}

.m3-dash-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.m3-dash-item-title {
    font-size: 12.5px;
    color: var(--m3-on-surface);
    font-weight: 500;
}

.m3-dash-item-meta {
    font-size: 11px;
    color: var(--m3-on-surface-variant);
    margin-top: 1px;
}

.m3-dash-item-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: var(--m3-radius-pill);
    flex: none;
    color: #fff;
}

.m3-dash-item-tag.is-critical {
    background: var(--m3-error);
}

.m3-dash-progress-track {
    height: 10px;
    background: var(--m3-outline-variant);
    border-radius: var(--m3-radius-pill);
    overflow: hidden;
}

.m3-dash-progress-fill {
    height: 100%;
    background: #256abf;
    border-radius: var(--m3-radius-pill);
}

@media (max-width: 720px) {
    .m3-dash-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .m3-dash-barrow {
        grid-template-columns: 90px 1fr 50px;
    }

    .m3-dash-barlist--wide .m3-dash-barrow {
        grid-template-columns: 130px 1fr 50px;
    }

    .m3-dash-proj-accordion__row {
        grid-template-columns: 90px 1fr 45px;
    }

    .m3-dash-barrow__name {
        font-size: 11px;
    }
}

/* Notificações (topbar + página dedicada) — 2026-08-17, virou link de
   página normal em 2026-08-18 depois de um painel dropdown (dois
   mecanismos diferentes tentados, botão+JS e <details>/<summary> nativo)
   simplesmente não responder a clique em pelo menos um ambiente real de
   teste — ver project_novo_mestri_build.md pro histórico completo da
   investigação. Um link comum, reaproveitando .m3-nav-link, é o único
   padrão comprovadamente confiável nesse ambiente. */
.m3-notif__badge-inline {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: var(--m3-radius-pill);
    background: var(--m3-error);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

.m3-notif__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m3-outline-variant);
    font-size: 14px;
    font-weight: 600;
    color: var(--m3-on-surface);
}

.m3-notif__marcar-todas {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--m3-on-primary-container);
    cursor: pointer;
    padding: 0;
}

.m3-notif__list {
    overflow-y: auto;
}

.m3-notif__empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--m3-on-surface-variant);
}

.m3-notif__item {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid var(--m3-outline-variant);
    background: var(--m3-surface);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--m3-on-surface);
    cursor: pointer;
}

.m3-notif__item:last-child {
    border-bottom: none;
}

.m3-notif__item:hover {
    background: var(--m3-surface-variant);
}

.m3-notif__item--nao-lida {
    background: var(--m3-primary-container);
    font-weight: 600;
}

.m3-notif__item--nao-lida:hover {
    background: var(--m3-primary-container);
}

.m3-notif__item-data {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--m3-on-surface-variant);
}

/* Paginação (listagens grandes) — 2026-08-18 */
.m3-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
}

.m3-pagination__info {
    font-size: 13px;
    color: var(--m3-on-surface-variant);
}

.m3-pagination__nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.m3-pagination__page {
    font-size: 13px;
    color: var(--m3-on-surface);
    white-space: nowrap;
}

/* .m3-icon-btn's default hover (rosa/vermelho) faz sentido pra excluir,
   não pra "próxima página" — troca pro par primário aqui. */
.m3-pagination__nav .m3-icon-btn:hover {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.m3-pagination__nav .m3-icon-btn.is-disabled {
    color: var(--m3-outline);
    cursor: default;
}