/* Estilos personalizados da aplicação. O layout e os componentes vêm do Tabler (css/tabler.min.css). */

/* Logotipo (_logo.html): a altura vem do estilo do próprio elemento (o Tabler troca o atributo height por
   "auto"); a largura acompanha a proporção do SVG */
.safira-logo {
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* Menu lateral: o logotipo com a mesma margem lateral dos itens do menu */
.navbar-vertical .navbar-brand {
    padding-inline: var(--tblr-sidebar-nav-padding-x, 0.75rem);
}

.navbar-vertical .sidebar-folded-only,
.sidebar-rail-brand,
.context-rail-item.sidebar-restore {
    display: none;
}

.sidebar-rail-brand {
    align-items: center;
    justify-content: center;
    padding-block: 0.25rem;
    flex-shrink: 0;
}

.sidebar-toggle {
    width: 100%;
    border: 0;
    background: none;
    text-align: start;
}

/* Barra de contexto (_menu.html): as áreas do sistema (Espaços, Follow-up, Configurações), com ícone e texto
   pequeno abaixo. Em telas grandes é uma coluna de 64 px à esquerda do menu lateral, separada por uma linha: o
   menu (.navbar-context) fica mais largo, com a barra no espaço do padding, e o conteúdo da página anda a mesma
   distância (--tblr-sidebar-gap do Tabler). Nas telas pequenas é a primeira linha do menu aberto pela barra do
   topo. Passar o mouse e a opção selecionada têm o mesmo destaque: fundo e borda suaves na cor principal. */
:root {
    --context-rail-width: 4rem;
}

.context-rail,
.context-rail-tabs {
    display: flex;
    gap: 0.25rem;
}

.context-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.5rem 0.125rem 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius-lg);
    background: none;
    color: color-mix(in oklab, var(--tblr-navbar-color) 80%, transparent);
    font-size: 0.625rem;
    font-weight: var(--tblr-font-weight-medium);
    line-height: 1.15;
    text-align: center;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.context-rail-item .icon {
    width: 1.375rem;
    height: 1.375rem;
}

/* Palavras longas ("Configurações") quebram com hífen em vez de vazar da coluna */
.context-rail-label {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: manual;
}

.context-rail-item:hover,
.context-rail-item.active {
    border-color: color-mix(in srgb, var(--tblr-primary) 55%, transparent);
    background: color-mix(in srgb, var(--tblr-primary) 20%, transparent);
    color: var(--tblr-navbar-active-color, #fff);
}

.context-rail-item.active {
    background: color-mix(in srgb, var(--tblr-primary) 32%, transparent);
}

.context-rail-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tblr-primary) 70%, white);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .context-rail-item {
        transition: none;
    }
}

/* Submenus das áreas que ainda não existem */
.navbar-vertical .context-soon {
    cursor: default;
    color: color-mix(in oklab, var(--tblr-navbar-color) 70%, transparent);
}

@media (min-width: 992px) {
    .navbar-vertical.navbar-context {
        width: calc(var(--tblr-sidebar-width) + var(--context-rail-width));
        padding-inline-start: var(--context-rail-width);
    }

    .navbar-context ~ .page-wrapper {
        --tblr-sidebar-gap: var(--context-rail-width);
    }

    .navbar-context.sidebar-submenu-hidden {
        width: var(--context-rail-width);
        padding-inline-start: 0;
    }

    .navbar-context.sidebar-submenu-hidden ~ .page-wrapper {
        --tblr-sidebar-width: 0px;
    }

    .navbar-context.sidebar-submenu-hidden .navbar-brand,
    .navbar-context.sidebar-submenu-hidden .navbar-footer,
    .navbar-context.sidebar-submenu-hidden [data-context-panel],
    .navbar-context.sidebar-submenu-hidden .navbar-side {
        display: none;
    }

    .navbar-context.sidebar-submenu-hidden .sidebar-restore,
    .navbar-context.sidebar-submenu-hidden .sidebar-rail-brand {
        display: flex;
    }

    .navbar-context .context-rail-tabs {
        flex-direction: column;
    }

    /* Posicionada no <aside> (fixo), fora da rolagem do submenu */
    .navbar-context .context-rail {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        flex-direction: column;
        width: var(--context-rail-width);
        padding: 0.75rem 0.25rem;
        overflow-y: auto;
        border-inline-end: var(--tblr-navbar-border-width, 1px) var(--tblr-border-style) var(--tblr-navbar-border-color);
        background: rgba(0, 0, 0, 0.18);
    }
}

@media (max-width: 991.98px) {
    .navbar-context .context-rail {
        padding: 0.5rem;
        margin-bottom: 0.25rem;
        border-bottom: var(--tblr-navbar-border-width, 1px) var(--tblr-border-style) var(--tblr-navbar-border-color);
    }

    .navbar-context .context-rail-item {
        flex: 1 1 0;
    }

    .navbar-context .context-rail-tabs {
        flex: 1;
    }
}

/* Árvore da seção "Espaços" no menu lateral (_explorer_tree.html) */
.explorer-tree .tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.explorer-tree .tree-row {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0 var(--tblr-sidebar-nav-padding-x, 0.75rem) 0 calc(var(--tblr-sidebar-nav-padding-x, 0.75rem) + var(--tree-level, 0) * 1rem);
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-navbar-color);
}

.explorer-tree .tree-row:hover {
    background: var(--tblr-navbar-hover-bg, rgba(var(--tblr-emphasis-color-rgb), 0.06));
}

.explorer-tree .tree-row.active {
    background: var(--tblr-navbar-active-bg);
    color: var(--tblr-navbar-active-color);
    font-weight: var(--tblr-font-weight-medium);
}

.explorer-tree .tree-toggle,
.explorer-tree .tree-toggle-spacer {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
}

.explorer-tree .tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--tblr-border-radius-sm);
    background: none;
    color: inherit;
    opacity: 0.7;
}

.explorer-tree .tree-toggle:hover {
    opacity: 1;
}

.explorer-tree .tree-toggle .icon {
    width: 1rem;
    height: 1rem;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.explorer-tree .tree-toggle.collapsed .icon {
    transform: rotate(0deg);
}

.explorer-tree .tree-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.375rem 0;
    color: inherit;
    text-decoration: none;
}

.explorer-tree .tree-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.8;
}

/* Botões "+" do título Espaços e das linhas de workspace/pasta */
.tree-add {
    display: inline-flex;
    flex: 0 0 1.5rem;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--tblr-border-radius-sm);
    background: none;
    color: inherit;
    opacity: 0;
}

.tree-add .icon {
    width: 1rem;
    height: 1rem;
}

.tree-add:hover {
    background: rgba(var(--tblr-emphasis-color-rgb), 0.1);
}

/* Aparece ao passar o mouse na linha, com foco do teclado ou com o menu aberto; sempre visível em telas de toque */
.explorer-tree .tree-row:hover .tree-add,
.tree-add:focus-visible,
.tree-add[aria-expanded="true"],
.explorer-add {
    opacity: 0.8;
}

@media (hover: none) {
    .tree-add {
        opacity: 0.8;
    }
}

.explorer-section-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* Menu da hierarquia (_hierarchy_menu.html), posicionado pelo app.js */
.create-menu {
    position: fixed;
    z-index: 1060;
    min-width: 13rem;
    max-width: 18rem;
}

/* Página de tela cheia (body.page-fill, ex.: editor do mapa mental): a página tem a altura da janela e o
   conteúdo ocupa todo o espaço abaixo do cabeçalho, sem margens laterais nem inferior. */
.page-fill .page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.page-fill .page-wrapper {
    min-height: 0;
}

.page-fill .page-header {
    padding-bottom: 0.75rem;
}

.page-fill .page-body {
    min-height: 0;
    margin: 0;
}

.page-fill .page-body > [class^="container"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    padding-inline: 0 !important;
}

.page-fill .page-body .alert {
    margin: 0 0.75rem 0.75rem;
}

/* Canvas do X6: mapa mental (_mind_map_canvas.html, classes mm-) e fluxograma (_flowchart_canvas.html,
   classes fc-). Cores padrão seguem o tema; cores escolhidas pelo usuário vêm do documento como estilo
   inline e prevalecem sobre estas regras. */
.mind-map-canvas,
.flowchart-canvas {
    /* Grade quadriculada dos dois editores (lida pelo x6_helpers.js): linhas finas e, a cada 5, mais fortes.
       As cores precisam ser simples, que o <canvas> entenda. */
    --canvas-grid-dot: #c9c9c9;
    --canvas-grid-line: #e6e6e6;
    --canvas-grid-line-major: #d4d4d4;
    position: relative;
    overflow: hidden;
    background: var(--tblr-bg-surface-secondary);
    cursor: grab;
    touch-action: none;
}

[data-bs-theme="dark"] .mind-map-canvas,
[data-bs-theme="dark"] .flowchart-canvas {
    --canvas-grid-dot: #2b2b2b;
    --canvas-grid-line: #232323;
    --canvas-grid-line-major: #2e2e2e;
}

.mind-map-canvas:active,
.flowchart-canvas:active {
    cursor: grabbing;
}

.mind-map-surface,
.flowchart-surface {
    position: absolute;
    inset: 0;
}

.mind-map-canvas .mm-node-body,
.flowchart-canvas .fc-node-body {
    fill: var(--tblr-bg-surface);
    stroke: var(--tblr-primary);
    stroke-width: 1.5;
}

/* Mídia solta (forma "media"): só a imagem; a caixa aparece na seleção */
.mind-map-canvas .mm-node-body.mm-media-body {
    fill: transparent;
    stroke: none;
}

/* Botão de play dos vídeos (abre o player do YouTube) */
.mm-media-play {
    cursor: pointer;
}

.mm-media-play-circle {
    fill: rgba(0, 0, 0, 0.6);
    stroke: #ffffff;
    stroke-width: 2;
    transition: fill 0.15s;
}

.mm-media-play:hover .mm-media-play-circle {
    fill: var(--tblr-primary);
}

.mm-media-play-icon {
    fill: #ffffff;
}

/* Texto livre (forma "text"): sem borda; fundo só se o usuário escolher (estilo inline) */
.mind-map-canvas .mm-node-body.mm-text-body {
    fill: transparent;
    stroke: none;
}

.mind-map-canvas .mm-node-lines,
.flowchart-canvas .fc-node-lines {
    fill: none;
    stroke: var(--tblr-primary);
    stroke-width: 1.5;
}

.mind-map-canvas .mm-node-label,
.flowchart-canvas .fc-node-label {
    fill: var(--tblr-body-color);
    font-family: var(--tblr-font-sans-serif);
}

/* Texto com trechos formatados (node.spans): HTML num foreignObject (diagram_format.js); cor e fonte do tema quando o
   elemento não tem as suas. Não recebe o mouse: clique e duplo clique vão para o elemento */
.mind-map-canvas .mm-node-rich,
.flowchart-canvas .fc-node-rich {
    overflow: hidden;
    pointer-events: none;
}

.diagram-rich-label,
.diagram-rich-box {
    width: 100%;
    height: 100%;
}

.diagram-rich-box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--tblr-body-color);
    font-family: var(--tblr-font-sans-serif);
}

.diagram-rich-text {
    overflow-wrap: normal;
    word-break: normal;
}

.mind-map-canvas .mm-frame-rich .diagram-rich-box,
.flowchart-canvas .fc-frame-rich .diagram-rich-box {
    color: var(--tblr-secondary);
    font-weight: var(--tblr-font-weight-medium);
}

.mind-map-canvas .fc-editing .mm-node-rich,
.flowchart-canvas .fc-editing .fc-node-rich {
    visibility: hidden;
}

/* A espessura das conexões vem do documento (atributo stroke-width): não defina stroke-width aqui, o CSS venceria */
.mind-map-canvas .mm-edge-line,
.flowchart-canvas .fc-edge-line {
    stroke: var(--tblr-secondary);
}

.mind-map-canvas .mm-edge-label,
.flowchart-canvas .fc-edge-label {
    fill: var(--tblr-secondary);
    font-size: 12px;
}

.mind-map-canvas .mm-edge-label-bg,
.flowchart-canvas .fc-edge-label-bg {
    fill: var(--tblr-bg-surface-secondary);
}

.mind-map-canvas .mm-port,
.flowchart-canvas .fc-port {
    fill: var(--tblr-bg-surface);
    stroke: var(--tblr-primary);
    stroke-width: 1.5;
    visibility: hidden;
}

/* Pontos de conexão aparecem ao passar o mouse no nó (editor) */
.mind-map-canvas[data-editable="true"] .x6-node:hover .mm-port,
.flowchart-canvas[data-editable="true"] .x6-node:hover .fc-port {
    visibility: visible;
}

.mind-map-canvas .x6-widget-selection-box,
.mind-map-canvas .x6-widget-selection-rubberband,
.flowchart-canvas .x6-widget-selection-box,
.flowchart-canvas .x6-widget-selection-rubberband {
    border-color: var(--tblr-primary);
}

.mind-map-canvas .x6-widget-selection-rubberband,
.flowchart-canvas .x6-widget-selection-rubberband {
    background: rgba(var(--tblr-primary-rgb), 0.08);
}

/* Halo de seleção sem esconder a cor configurada na conexão. */
.flowchart-canvas .x6-edge-selected .fc-edge-line,
.mind-map-canvas .x6-edge-selected .mm-edge-line {
    filter: drop-shadow(0 0 2px var(--tblr-primary));
}

/* Pontos do trajeto (ferramenta "vertices" do X6) e alças dos trechos das duas dobras ("segments") */
.mind-map-canvas .mm-vertex-handle {
    fill: var(--tblr-bg-surface);
    stroke: var(--tblr-primary);
    stroke-width: 2;
    cursor: move;
}

.mind-map-canvas .mm-segment-handle {
    fill: var(--tblr-primary);
    stroke: var(--tblr-bg-surface);
    stroke-width: 1.5;
}

/* Fluxograma (_flowchart_canvas.html): canvas com as ações do código Mermaid e o painel de código flutuantes */
.flowchart-component {
    position: relative;
}

.flowchart-canvas {
    min-height: 320px;
    margin-bottom: 0;
}

.flowchart-error {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 6;
    white-space: pre-line;
}

.flowchart-code-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    display: flex;
    flex-direction: row;
    gap: 0.125rem;
    padding: 0.25rem;
    margin: 0;
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.flowchart-code-actions [aria-expanded="true"],
.flowchart-code-actions .is-copied {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

.flowchart-code {
    position: absolute;
    top: 3.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    width: min(28rem, calc(100% - 1.5rem));
    margin: 0;
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.flowchart-code[hidden] {
    display: none;
}

.flowchart-code .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0.75rem;
}

.flowchart-code-message {
    white-space: pre-line;
    font-size: 0.8125rem;
}

.flowchart-code-input {
    flex: 1 1 auto;
    min-height: 10rem;
    font-family: var(--tblr-font-monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre;
    resize: none;
}

.flowchart-code-preview {
    flex: 1 1 auto;
    min-height: 10rem;
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
}

.flowchart-code-preview svg {
    max-width: 100%;
    height: auto;
}

.flowchart-code-preview.is-invalid {
    color: var(--tblr-danger);
    white-space: pre-line;
    font-size: 0.8125rem;
}

/* Lista só para leitura (sem permissão de editar, ADR 0016): sem os botões de criar tarefa e gerenciar status */
.list-page[data-readonly] [data-new-task],
.list-page[data-readonly] [data-open-statuses],
.list-page[data-readonly] [data-quick-add-open],
.list-page[data-readonly] .kanban-add {
    display: none !important;
}

/* Mapa mental ou fluxograma só para leitura (sem permissão de editar, ADR 0016): o canvas ocupa a área do editor */
.diagram-readonly {
    position: relative;
    flex: 1 1 auto;
    min-height: 360px;
}

.diagram-readonly .mind-map-canvas,
.diagram-readonly .flowchart-component,
.diagram-readonly .flowchart-canvas {
    position: absolute;
    inset: 0;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
}

/* Editor do mapa mental (_mind_map_editor.html): ferramentas flutuantes sobre o canvas, como no Miro */
.mind-map-editor {
    position: relative;
    flex: 1 1 auto;
    min-height: 360px;
}

.diagram-editor {
    min-width: 0;
    container: diagram-editor / inline-size;
}

/* O canvas preenche o editor de borda a borda (só a linha superior separa do cabeçalho) */
.mind-map-editor .mind-map-canvas {
    position: absolute;
    inset: 0;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
}

.mind-map-editor[data-mode="node"] .mind-map-canvas,
.mind-map-editor[data-mode="connect"] .mind-map-canvas {
    cursor: crosshair;
}

.mind-map-editor[data-mode="text"] .mind-map-canvas {
    cursor: text;
}

.mm-toolbar,
.mm-zoom,
.mm-style-panel,
.mm-status {
    position: absolute;
    z-index: 5;
    margin: 0;
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.mm-toolbar {
    top: 50%;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem;
    transform: translateY(-50%);
    max-height: calc(100% - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mm-toolbar > .btn,
.mm-toolbar > .mm-toolbar-divider {
    flex-shrink: 0;
}

.diagram-editor .mm-style-panel {
    width: min(17rem, calc(100% - 5rem));
}

.diagram-editor .mm-style-panel .btn-group,
.mm-padding-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.diagram-editor .mm-style-panel .btn-group .btn {
    flex: 1 0 auto;
}

.diagram-editor .mm-text-toolbar {
    max-width: calc(100% - 1rem);
    flex-wrap: wrap;
}

.mind-map-canvas .fc-editing .mm-node-label {
    visibility: hidden;
}

.mind-map-editor[data-mode="node"] .mind-map-canvas {
    cursor: crosshair;
}

.mm-toolbar .btn.active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

.mm-toolbar-divider {
    height: 1px;
    margin: 0.25rem 0.125rem;
    background: var(--tblr-border-color);
}

.mm-style-panel {
    top: 50%;
    left: 4.25rem;
    width: 17rem;
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
    transform: translateY(-50%);
}

/* Opções numéricas do painel (ex.: tamanho da fonte) em grade, para caberem na largura do painel */
.mm-style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}


.mm-style-panel .card-body {
    padding: 0.75rem;
}

.mm-style-label {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.75rem;
    font-weight: var(--tblr-font-weight-medium);
    color: var(--tblr-secondary);
}

.mm-style-label:first-child {
    margin-top: 0;
}

.mm-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
}

.mm-swatch {
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-sm);
    background: var(--mm-swatch);
}

.mm-swatch:hover,
.mm-swatch:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 1px;
}

/* "Tema": sem cor própria (segue o tema claro/escuro) */
.mm-swatch-theme {
    background: linear-gradient(135deg, var(--tblr-bg-surface) 50%, var(--tblr-body-color) 50%);
}

/* "Sem cor" (ex.: texto sem fundo): fundo vazio cortado por uma diagonal */
.mm-swatch-none,
.mm-text-color-bar.is-none {
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--tblr-danger) 50%, transparent calc(50% + 1px)),
        var(--tblr-bg-surface);
}

/* "Transparente": fundo transparente (xadrez, como nos editores de imagem) */
.mm-swatch-transparent {
    background: repeating-conic-gradient(var(--tblr-border-color) 0% 25%, var(--tblr-bg-surface) 0% 50%) 50% / 8px 8px;
}

/* Cor em uso no item selecionado */
.mm-swatch.active {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 1px;
}

/* Fontes do mapa mental (FONT_STACKS no format.js): cada opção aparece na própria fonte */
[data-style-key="font"][data-style-value="serif"],
.mm-text-font option[value="serif"] {
    font-family: Georgia, Cambria, "Times New Roman", serif;
}

[data-style-key="font"][data-style-value="mono"],
.mm-text-font option[value="mono"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

[data-style-key="font"][data-style-value="hand"],
.mm-text-font option[value="hand"] {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Chalkboard SE", cursive;
}

/* Aviso do editor do mapa (ex.: imagem arrastada que não pôde ser enviada), no alto e ao centro */
.mm-message {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 6;
    max-width: calc(100% - 2rem);
    margin: 0;
    transform: translateX(-50%);
    box-shadow: var(--tblr-box-shadow-dropdown);
}

/* Diálogo de mídia enviando a imagem */
[data-media-dialog].is-busy .modal-content {
    cursor: progress;
}

/* Menu do espaçamento interno: mesmo visual e lugar do painel de estilo, mais estreito */
.mm-padding-panel {
    width: 15rem;
}

/* Espessuras das conexões: 5 por linha, cada uma com uma amostra da linha (até 16 px) acima do número */
.mm-width-grid {
    grid-template-columns: repeat(5, 1fr);
}

.mm-width-option {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem 0.25rem;
}

/* Faixa fixa de 16 px (a maior espessura), com a linha centrada: todos os botões ficam da mesma altura */
.mm-width-sample {
    display: flex;
    align-items: center;
    width: 100%;
    height: 1rem;
}

.mm-width-sample::before {
    content: "";
    width: 100%;
    height: var(--mm-width);
    border-radius: calc(var(--mm-width) / 2);
    background: currentColor;
}

.mm-style-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Barra do texto livre (editor.js posiciona sobre o texto): fonte, tamanho, cor e fundo */
.mm-text-toolbar {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: row; /* .card do Tabler usa coluna */
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.25rem;
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.mm-text-toolbar.is-editing {
    z-index: 1071; /* acima do .mm-inline-editor */
}

.mm-text-font {
    width: 9rem;
}

.mm-text-size {
    width: 4.75rem;
}

/* Botões de cor: o ícone com uma faixa embaixo na cor escolhida */
.mm-text-color-button {
    position: relative;
}

.mm-text-color-bar {
    position: absolute;
    right: 0.375rem;
    bottom: 0.1875rem;
    left: 0.375rem;
    height: 0.25rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 2px;
}

.mm-text-swatches {
    width: 15rem;
    padding: 0.5rem;
}

.mm-zoom {
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-direction: row; /* .card do Tabler usa coluna */
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
}

.mm-zoom-level {
    min-width: 3rem;
    font-size: 0.8125rem;
    text-align: center;
}

.mm-zoom [data-grid-toggle].active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

.mm-status {
    bottom: 0.75rem;
    left: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: none;
}

/* Indicador do salvamento automático (static/js/autosave.js grava o estado em data-save-state) */
[data-save-state="saved"] [data-save-status] {
    color: var(--tblr-success);
    background: rgba(var(--tblr-success-rgb), 0.12);
}

[data-save-state="pending"] [data-save-status],
[data-save-state="saving"] [data-save-status] {
    color: var(--tblr-warning);
    background: rgba(var(--tblr-warning-rgb), 0.15);
}

[data-save-state="error"] [data-save-status],
[data-save-state="conflict"] [data-save-status] {
    color: var(--tblr-danger);
    background: rgba(var(--tblr-danger-rgb), 0.12);
}

/* Conflito de revisão: o aviso quebra a linha e os botões Recarregar / Copiar meu conteúdo ficam ao lado */
[data-save-state="conflict"] [data-save-status] {
    white-space: normal;
    text-align: start;
}

.save-conflict-actions {
    display: inline-flex;
    gap: 0.25rem;
}

/* Editores gráficos: o aviso de conflito ocupa o rodapé no lugar da dica de atalhos */
.diagram-editor[data-save-state="conflict"] .mm-hint {
    visibility: hidden;
}

.diagram-editor[data-save-state="conflict"] .mm-status {
    max-width: calc(100% - 18rem);
}

.mm-hint {
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    z-index: 4;
    /* Entre a barra de salvamento/ferramentas e o zoom: quebra a linha em vez de passar por baixo deles */
    width: max-content;
    max-width: calc(100% - 24rem);
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .mm-hint {
        display: none;
    }
}

/* Retângulo de seleção próprio (contorno do X6 em canvas.js) */
.mm-rubberband {
    position: fixed;
    z-index: 1060;
    pointer-events: none;
    border: 1px solid var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.08);
}

/* Edição do texto no próprio nó */
.mm-inline-editor {
    position: fixed;
    z-index: 1070;
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--tblr-primary);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    font-family: var(--tblr-font-sans-serif);
    line-height: 1.2;
    text-align: center;
    resize: none;
    outline: none;
}

.mind-map-canvas .mm-editing .mm-node-label {
    visibility: hidden;
}

/* Texto livre em edição: o campo tem a cara do texto (fonte, cor e fundo vêm do estilo), sem quebra automática */
/* Campo dos elementos (contenteditable, com trechos formatados): quebra por palavra, como no desenho */
div.mm-inline-editor {
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
    cursor: text;
}

.mm-inline-editor.mm-inline-text {
    box-sizing: border-box;
    overflow: hidden;
    border-width: 1px;
    border-style: dashed;
    border-radius: 4px;
    line-height: 1.3;
    white-space: pre;
}

/* Origem da conexão (ferramenta Conectar); a conexão selecionada tem um halo (regra junto do canvas) */
.mind-map-canvas .mm-connect-source .mm-node-body {
    stroke: var(--tblr-warning);
    stroke-width: 3;
}

/* Editor de fluxograma (_flowchart_editor.html): tela cheia como o do mapa mental. A barra, o painel de
   estilo, o zoom e o indicador reaproveitam as classes mm- do editor de mapa mental. */
.flowchart-editor {
    position: relative;
    flex: 1 1 auto;
    min-height: 360px;
}

.flowchart-editor .flowchart-component,
.flowchart-editor .flowchart-canvas {
    position: absolute;
    inset: 0;
}

.flowchart-editor .flowchart-canvas {
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
}

.flowchart-editor[data-mode="node"] .flowchart-canvas,
.flowchart-editor[data-mode="connect"] .flowchart-canvas {
    cursor: crosshair;
}

/* Sentido do fluxo e "Organizar", no topo do canvas */
.fc-flowbar {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 5;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0;
    transform: translateX(-50%);
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.fc-flowbar .btn.active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

.fc-flowbar-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.125rem;
}

/* Paleta com todas as formas (botão "Mais formas") */
.fc-shapes {
    position: absolute;
    top: 50%;
    left: 4.25rem;
    z-index: 5;
    width: 17rem;
    margin: 0;
    transform: translateY(-50%);
    box-shadow: var(--tblr-box-shadow-dropdown);
    max-width: calc(100% - 5rem);
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
}

@container diagram-editor (max-width: 42rem) {
    .fc-flowbar {
        top: 3.75rem;
        left: auto;
        right: 0.75rem;
        max-width: calc(100% - 6rem);
        transform: none;
        flex-wrap: wrap;
    }

    .flowchart-code {
        top: 6.75rem;
    }
}

.fc-shapes .card-body {
    padding: 0.75rem;
}

.fc-shape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}

.fc-shape-grid .btn {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    white-space: normal;
}

.fc-shape-grid .btn .icon {
    margin: 0;
}

.fc-shape-grid .btn.active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

.mm-style-panel .btn.active {
    color: var(--tblr-primary);
    border-color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.08);
}

.flowchart-canvas .fc-editing .fc-node-label {
    visibility: hidden;
}

/* Frame do fluxograma (forma "frame"): área atrás dos elementos, com fundo suave, borda e título no alto. Cores
   escolhidas vêm do estilo do elemento e vencem estas. */
.flowchart-canvas .fc-frame-body {
    fill: color-mix(in srgb, var(--tblr-body-color) 3%, transparent);
    stroke: var(--tblr-border-color);
    stroke-width: 1.5;
}

.flowchart-canvas .fc-frame-title {
    fill: var(--tblr-secondary);
    font-weight: var(--tblr-font-weight-medium);
}

/* Frame que vai receber o elemento arrastado */
.flowchart-canvas .fc-frame-target .fc-frame-body {
    stroke: var(--tblr-primary) !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 6 4;
}

.mm-inline-editor.fc-inline-title {
    text-align: start;
    background: var(--tblr-bg-surface);
    border: 1px dashed var(--tblr-primary);
    border-radius: 4px;
}

/* Imagem solta do fluxograma (forma "image"): só a imagem; a caixa (transparente) aparece na seleção */
.flowchart-canvas .fc-image-body {
    fill: transparent;
    stroke: none;
}

/* Texto livre do fluxograma (forma "text"): sem borda; o fundo, se houver, vem do estilo do elemento */
.flowchart-canvas .fc-text-body {
    fill: transparent;
    stroke: none;
}

/* Divisória vertical entre as cores e os botões de formatação da barra de texto */
.mm-text-toolbar .fc-text-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.125rem;
}

.mm-text-toolbar [data-text-toggle].active,
.mm-text-toolbar [data-text-align].active {
    color: var(--tblr-primary);
    background: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
}

.flowchart-editor[data-mode="text"] .flowchart-canvas {
    cursor: text;
}

/* Frame do mapa mental (forma "frame"): área atrás dos nós, com fundo suave, borda e título no alto */
.mind-map-canvas .mm-frame-body {
    fill: color-mix(in srgb, var(--tblr-body-color) 3%, transparent);
    stroke: var(--tblr-border-color);
    stroke-width: 1.5;
}

.mind-map-canvas .mm-frame-title {
    fill: var(--tblr-secondary);
    font-weight: var(--tblr-font-weight-medium);
}

.mind-map-canvas .mm-frame-target .mm-frame-body {
    stroke: var(--tblr-primary) !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 6 4;
}

.mind-map-editor[data-mode="frame"] .mind-map-canvas {
    cursor: crosshair;
}

/* Prévia do frame sendo desenhado no mapa mental (ferramenta Frame; editor.js) */
.mm-draw-preview {
    position: fixed;
    z-index: 1060;
    pointer-events: none;
    border: 1.5px dashed var(--tblr-primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tblr-primary) 6%, transparent);
}

/* Título do frame em edição (mapa mental e fluxograma) */
.mm-inline-editor.mm-inline-title {
    text-align: start;
    border-width: 1px;
    border-style: dashed;
    border-radius: 4px;
}

/* Prévia da caixa sendo desenhada (arrastar com uma forma escolhida; editor.js): o contorno da forma, tracejado */
.fc-draw-preview {
    position: fixed;
    z-index: 1060;
    overflow: visible;
    pointer-events: none;
}

.fc-draw-preview > * {
    fill: color-mix(in srgb, var(--tblr-primary) 8%, transparent);
    stroke: var(--tblr-primary);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.flowchart-editor[data-mode="node"] .flowchart-canvas {
    cursor: crosshair;
}

/* Texto da caixa em edição: o campo é transparente e fica sobre a área do texto da forma (posição, tamanho e
   espaço de cima calculados no editor.js), para a forma já desenhada aparecer em volta, sem um retângulo por cima */
.mm-inline-editor.fc-inline-editor {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* !important: a cor e a espessura escolhidas ficam no estilo do elemento (format.js) e venceriam o destaque */
.flowchart-canvas .fc-connect-source .fc-node-body {
    stroke: var(--tblr-warning) !important;
    stroke-width: 3 !important;
}

/* Editor de Markdown (_markdown_editor.html, Milkdown). A tipografia vem da classe .markdown do Tabler;
   aqui ficam só o que o Tabler não cobre (o conteúdo editável, tabelas do ProseMirror e a barra). */
.markdown-editor {
    position: relative;
}

.markdown-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    background: var(--tblr-bg-surface);
}

.markdown-editor-toolbar .btn.active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

/* Tipo de bloco (texto normal / títulos): o menu mostra cada título no tamanho dele */
.markdown-editor-block-type {
    min-width: 8.5rem;
    justify-content: space-between;
}

.markdown-editor-block-menu .dropdown-item {
    font-weight: var(--tblr-font-weight-medium);
}

.markdown-editor-block-menu .markdown-editor-heading-1 { font-size: 1.5rem; }
.markdown-editor-block-menu .markdown-editor-heading-2 { font-size: 1.25rem; }
.markdown-editor-block-menu .markdown-editor-heading-3 { font-size: 1.125rem; }
.markdown-editor-block-menu .markdown-editor-heading-4 { font-size: 1rem; }
.markdown-editor-block-menu .markdown-editor-heading-5 { font-size: 0.875rem; }
.markdown-editor-block-menu .markdown-editor-heading-6 { font-size: 0.75rem; text-transform: uppercase; }

.markdown-editor-block-menu .dropdown-item.active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

.markdown-editor-toolbar-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.markdown-editor-message {
    border-radius: 0;
}

.markdown-editor-dialog.is-uploading {
    cursor: progress;
    opacity: 0.7;
}

.markdown-editor-divider {
    align-self: stretch;
    width: 1px;
    margin: 0.25rem 0.125rem;
    background: var(--tblr-border-color);
}

.markdown-editor-dialog {
    position: absolute;
    top: 3rem;
    left: 50%;
    z-index: 4;
    width: min(22rem, calc(100% - 1rem));
    transform: translateX(-50%);
    box-shadow: var(--tblr-box-shadow-dropdown);
}

/* Página do documento: título editável no cabeçalho, com cara de título até receber o foco */
.document-title-input {
    width: 100%;
    min-width: 0;
    padding: 0.125rem 0.375rem;
    margin-left: -0.375rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius);
    background: transparent;
    color: inherit;
    font: inherit;
}

.document-title-input:hover {
    border-color: var(--tblr-border-color);
}

.document-title-input:focus {
    border-color: var(--tblr-primary);
    outline: none;
    background: var(--tblr-bg-surface);
}

.document-title-input.is-invalid {
    border-color: var(--tblr-danger);
}

.page-header .page-title:has(.document-title-input) {
    display: block;
}

.document-editor .markdown-editor-body,
.document-editor .markdown-editor-source {
    min-height: 60vh;
}

/* Modo Markdown: o código-fonte no lugar do texto formatado, em fonte monoespaçada */
.markdown-editor-source {
    display: block;
    width: 100%;
    min-height: 12rem;
    overflow: hidden;
    resize: none;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--tblr-body-color);
    font-family: var(--tblr-font-monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    tab-size: 4;
}

.markdown-editor-mode-toggle {
    gap: 0.25rem;
}

.markdown-editor-body {
    min-height: 12rem;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.markdown-editor-body ul,
.markdown-editor-body ol {
    padding-left: 1.5rem;
}

/* No ProseMirror, cada item de lista tem um <p>: sem a margem dele, a lista fica compacta como no Markdown */
.markdown-editor-body li > p {
    margin: 0;
}

.markdown-editor-body li + li,
.markdown-editor-body li > ul,
.markdown-editor-body li > ol {
    margin-top: 0.25rem;
}

.markdown-editor-body blockquote {
    border-left: 3px solid var(--tblr-border-color);
    color: var(--tblr-secondary);
}

.markdown-editor-body pre {
    padding: 0.75rem 1rem;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    white-space: pre;
}

.markdown-editor-body code {
    padding: 0.125rem 0.25rem;
    border-radius: var(--tblr-border-radius-sm);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}

.markdown-editor-body pre code {
    padding: 0;
    background: none;
}

.markdown-editor-body img {
    max-width: 100%;
}

/* Tabelas: no editor, cada célula tem borda (fica claro onde clicar para editar). Os seletores repetem
   .markdown para vencer as regras ".markdown > table" do Tabler (sem bordas laterais, sem recuo na 1ª coluna). */
.markdown-editor-body.markdown > table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.markdown-editor-body.markdown > table :is(th, td) {
    min-width: 4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--tblr-border-color);
    vertical-align: top;
}

.markdown-editor-body.markdown > table th {
    background: var(--tblr-bg-surface-secondary);
    font-size: inherit;
    font-weight: var(--tblr-font-weight-medium);
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
}

.markdown-editor-body th > p,
.markdown-editor-body td > p {
    margin: 0;
}

/* Células selecionadas (linha/coluna destacada pelo menu); vence também o fundo do cabeçalho */
.markdown-editor-body.markdown > table .selectedCell {
    background: rgba(var(--tblr-primary-rgb), 0.12);
}

/* Controles de linhas e colunas (table_tools.js): posicionados sobre a tabela, a partir do .markdown-editor.
   Alças: pílulas na borda de cima da coluna e na borda esquerda da linha. "+": faixas na borda direita e de baixo. */
.markdown-editor-table-tools {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
}

.markdown-editor-table-handle,
.markdown-editor-table-add {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    color: var(--tblr-secondary);
    box-shadow: var(--tblr-box-shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.markdown-editor-table-handle .icon,
.markdown-editor-table-add .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.markdown-editor-table-handle.is-col {
    width: 1.75rem;
    height: 1rem;
}

.markdown-editor-table-handle.is-row {
    width: 1rem;
    height: 1.75rem;
}

.markdown-editor-table-add.is-col {
    width: 1rem;
}

.markdown-editor-table-add.is-row {
    height: 1rem;
}

/* Os "+" ficam discretos até o mouse passar */
.markdown-editor-table-add {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
    opacity: 0.6;
}

.markdown-editor-table-handle:hover,
.markdown-editor-table-handle.active,
.markdown-editor-table-add:hover {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary);
    color: var(--tblr-primary-fg);
    opacity: 1;
}

.markdown-editor-table-handle:focus-visible,
.markdown-editor-table-add:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
    opacity: 1;
}

.markdown-editor-table-menu {
    position: absolute;
    min-width: 13rem;
}

.markdown-editor-table-menu .dropdown-item .icon {
    margin-right: 0.5rem;
}

.markdown-editor-table-menu .dropdown-item:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

/* Toque: alças maiores, fáceis de acertar com o dedo */
@media (pointer: coarse) {
    .markdown-editor-table-handle.is-col {
        width: 2.25rem;
        height: 1.375rem;
    }

    .markdown-editor-table-handle.is-row {
        width: 1.375rem;
        height: 2.25rem;
    }

    .markdown-editor-table-add.is-col {
        width: 1.375rem;
    }

    .markdown-editor-table-add.is-row {
        height: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .markdown-editor-table-handle,
    .markdown-editor-table-add {
        transition: none;
    }
}

.markdown-editor-body .ProseMirror-selectednode {
    outline: 2px solid var(--tblr-primary);
}

.markdown-editor-body hr.ProseMirror-selectednode {
    outline-offset: 0.25rem;
}

.markdown-editor-body .ProseMirror-gapcursor:after {
    border-top-color: var(--tblr-body-color);
}

@media (prefers-reduced-motion: reduce) {
    .explorer-tree .tree-toggle .icon {
        transition: none;
    }
}

/* ======================================================================================================
   Módulo Listas (lists/list.html, static/js/lists/): barra, visualização em lista (grupos por status) e Kanban.
   Cores só por tokens do Tabler (claro e escuro); a cor de cada status vem do dado (--status-color).
   ====================================================================================================== */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Visualização ativa (Lista/Kanban): preenchida na cor principal, diferente do hover */
.list-toolbar [data-view].active {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary);
    color: var(--tblr-primary-fg);
}

.list-search {
    flex: 1 1 14rem;
    max-width: 22rem;
}

.list-sort {
    display: flex;
    gap: 0.25rem;
}

.list-sort .form-select {
    width: auto;
}

.list-toolbar-end {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.list-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0.75rem;
}

.list-message {
    margin-bottom: 0.75rem;
}

.list-filters-menu {
    width: min(24rem, calc(100vw - 2rem));
    max-height: 70vh;
    overflow-y: auto;
}

.list-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 0.5rem 1rem;
}

.list-filter-group legend {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: var(--tblr-font-weight-medium);
    color: var(--tblr-secondary);
    text-transform: uppercase;
}

.list-filter-group:last-child {
    grid-column: 1 / -1;
}

.list-status-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--status-color);
    vertical-align: middle;
}

/* ---------- Visualização em lista ---------- */
.list-status-group {
    margin-bottom: 0.75rem;
}

.list-status-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.list-status-toggle {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: var(--tblr-border-radius);
    background: none;
    color: inherit;
    font-weight: var(--tblr-font-weight-medium);
    text-align: left;
}

.list-status-toggle:hover {
    background: var(--tblr-bg-surface-secondary);
}

.list-status-chevron {
    transition: transform 0.15s;
}

.list-status-toggle[aria-expanded="false"] .list-status-chevron {
    transform: rotate(-90deg);
}

.list-status-count,
.kanban-column-count {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}

/* Grupo sem tarefas: nome esmaecido (no Kanban, o nome tem cor fixa por tema); status inativo: borda tracejada */
.list-status-group.is-empty .list-status-name {
    color: var(--tblr-secondary);
}

.list-status-group.is-inactive,
.kanban-column.is-inactive {
    border-style: dashed;
}

.list-status-body {
    border-top: 1px solid var(--tblr-border-color);
}

.list-group-empty {
    padding: 0.75rem 1rem;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
}

.list-table td,
.list-table th {
    white-space: nowrap;
}

.list-table .list-task-title-cell {
    min-width: 12rem;
    white-space: normal;
}

/* Larguras fixas: as colunas ficam alinhadas entre os grupos (cada grupo é uma tabela) */
@media (min-width: 768px) {
    .list-table {
        table-layout: fixed;
    }

    .list-table .list-col-priority { width: 8rem; }
    .list-table .list-col-date { width: 6rem; }
    .list-table .list-col-tags { width: 14rem; }
    .list-table .list-col-time { width: 6.5rem; }
}

.list-table .list-col-actions {
    width: 3.5rem;
}

.list-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-task-row {
    cursor: pointer;
}

.list-task-title,
.kanban-card-title {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: var(--tblr-font-weight-medium);
    text-align: left;
    overflow-wrap: anywhere;
}

.list-task-title:hover,
.kanban-card-title:hover {
    color: var(--tblr-primary);
    text-decoration: underline;
}

.list-task-row.is-pending,
.kanban-card.is-pending {
    opacity: 0.6;
}

.list-table .list-tags-cell {
    white-space: normal;
}

.list-row-meta,
.list-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

.list-table .list-actions-cell {
    overflow: visible;
}

.list-priority,
.list-date,
.list-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
}

.list-priority .icon,
.list-date .icon,
.list-time .icon {
    width: 1rem;
    height: 1rem;
}

.list-date.is-overdue,
.list-time.is-over {
    color: var(--tblr-danger);
    font-weight: var(--tblr-font-weight-medium);
}

.list-tag {
    font-weight: var(--tblr-font-weight-normal);
}

.list-quick-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
}

.list-quick-add .form-control {
    flex: 1 1 12rem;
}

.list-quick-add-actions {
    display: flex;
    gap: 0.25rem;
}

/* ---------- Assistente de IA: janela de chat flutuante (templates/_ai_chat.html, static/js/ai_chat.js) ---------- */
/* À direita do editor, entre a barra do topo e os controles de zoom; no celular, ocupa a largura da tela */
.ai-chat {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    bottom: 4rem;
    z-index: 8;
    display: flex;
    flex-direction: column;
    width: min(23rem, calc(100% - 1.5rem));
    max-height: 40rem;
    margin: 0;
    overflow: hidden;
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.ai-chat[hidden] {
    display: none;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

.ai-chat-title {
    margin: 0;
    font-size: var(--tblr-font-size-h4, 1rem);
    font-weight: var(--tblr-font-weight-bold, 600);
}

.ai-chat-messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    padding: 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-chat-empty {
    margin: auto 0;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
    text-align: center;
}

.ai-chat-message {
    max-width: 88%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--tblr-border-radius-lg, 0.5rem);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ai-chat-message > :last-child,
.ai-chat-message p:last-child,
.ai-chat-message ul:last-child,
.ai-chat-message ol:last-child {
    margin-bottom: 0;
}

.ai-chat-message p,
.ai-chat-message ul,
.ai-chat-message ol {
    margin-bottom: 0.5rem;
}

.ai-chat-message ul,
.ai-chat-message ol {
    padding-left: 1.25rem;
}

.ai-chat-user {
    align-self: flex-end;
    background: var(--tblr-primary);
    color: var(--tblr-primary-fg, #fff);
}

.ai-chat-assistant {
    align-self: flex-start;
    background: var(--tblr-bg-surface-secondary);
}

.ai-chat-error {
    align-self: stretch;
    max-width: none;
    background: var(--tblr-danger-lt, rgba(214, 57, 57, 0.1));
    color: var(--tblr-danger);
}

.ai-chat-note {
    margin-top: 0.375rem;
    color: var(--tblr-secondary);
    font-size: 0.75rem;
}

/* "Pensando": três pontos animados */
.ai-chat-thinking {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.ai-chat-thinking span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--tblr-secondary);
    animation: ai-chat-dot 1.2s infinite ease-in-out;
}

.ai-chat-thinking span:nth-child(2) { animation-delay: 0.2s; }
.ai-chat-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-chat-dot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-thinking span { animation: none; }
}

.ai-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--tblr-border-color);
}

.ai-chat-form textarea {
    flex: 1 1 auto;
    min-height: 2.5rem;
    max-height: 10rem;
    resize: none;
}

.ai-chat-form .btn-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
}

@media (max-width: 575.98px) {
    .ai-chat {
        top: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: none;
    }
}

/* ---------- Kanban: colunas lado a lado, com rolagem horizontal quando não cabem ---------- */
.kanban-board {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    overflow-x: auto;
}

/* Coluna sem bordas, com o fundo na cor do status em rgba (alpha 0.1). --status-rgb ("r, g, b") vem do
   kanban_view.js; sem cor, o cinza do tema */
.kanban-column {
    --status-rgb: var(--tblr-secondary-rgb);
    display: flex;
    flex: 0 0 18rem;
    flex-direction: column;
    max-width: 85vw;
    overflow: hidden;
    border: 0;
    border-radius: var(--tblr-border-radius-lg);
    background: rgba(var(--status-rgb), 0.1);
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem 0.5rem;
    font-weight: var(--tblr-font-weight-medium);
}

/* Nome do status: cinza escuro no tema claro e branco no escuro (também numa coluna vazia) */
.kanban-column .kanban-column-name {
    color: #1f2937;
}

[data-bs-theme="dark"] .kanban-column .kanban-column-name {
    color: #fff;
}

/* Contador de tarefas: a cor do status em rgba (alpha 0.5) */
.kanban-column .kanban-column-count {
    background: rgba(var(--status-rgb), 0.5);
    color: #1f2937;
}

[data-bs-theme="dark"] .kanban-column .kanban-column-count {
    color: #fff;
}

/* Área dos cards: altura mínima para soltar cards numa coluna vazia */
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 0.5rem 0.5rem;
}

.kanban-card {
    margin: 0;
    border: 0;
    cursor: grab;
}

.kanban-card:focus-within {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 1px;
}

.kanban-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
}

.kanban-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.kanban-card-title {
    flex: 1 1 auto;
    min-width: 0;
}

.kanban-card-meta,
.kanban-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.kanban-card-tags {
    gap: 0.25rem;
}

.kanban-card-ghost {
    opacity: 0.4;
    border-style: dashed;
}

.kanban-card-chosen {
    box-shadow: var(--tblr-box-shadow-dropdown);
}

/* Coluna vazia: aviso por cima da área de soltar (não bloqueia o arraste) */
.kanban-column-empty {
    margin: -3rem 0.5rem 0.5rem;
    padding: 0.75rem;
    border: 1px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    text-align: center;
    pointer-events: none;
}

/* "Adicionar tarefa" na cor do status (alpha 1) */
.kanban-add {
    --tblr-btn-color: rgb(var(--status-rgb));
    --tblr-btn-hover-color: rgb(var(--status-rgb));
    --tblr-btn-active-color: rgb(var(--status-rgb));
    justify-content: flex-start;
    margin: 0 0.5rem 0.5rem;
    color: rgb(var(--status-rgb));
}

.kanban-column .list-quick-add {
    padding: 0 0.5rem 0.5rem;
}

/* ---------- Detalhes da tarefa e configuração dos status ---------- */
/* Modal da tarefa, no layout do ClickUp: 80% da largura (até 1600px) e 95% da altura. À esquerda, título, propriedades
   e descrição (que rola sozinha); à direita, os comentários (a lista rola sozinha e o campo de comentar fica fixo
   embaixo). No celular, o modal é de tela cheia (modal-fullscreen-md-down) e as duas partes ficam uma abaixo da outra */
@media (min-width: 768px) {
    .modal-dialog.task-modal {
        --tblr-modal-width: min(80vw, 1600px);
        width: min(80vw, 1600px);
        max-width: min(80vw, 1600px);
        height: 95dvh;
        margin: 2.5dvh auto;
    }

    .task-modal .modal-content {
        height: 100%;
    }
}

.task-modal-header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Workspace → lista no topo do modal */
.task-modal-path {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: var(--tblr-secondary);
    font-size: var(--tblr-font-size-h5, 0.875rem);
    font-weight: var(--tblr-font-weight-medium, 500);
}

.task-modal-path .icon {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
}

/* Código da tarefa (uid) depois da lista; o botão de copiar aparece ao passar o mouse no código (ou com o foco) */
.task-modal-uid-group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.task-modal-uid-group[hidden] {
    display: none;
}

.task-modal-uid {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.task-modal-uid-code {
    color: var(--tblr-body-color);
    font-family: var(--tblr-font-monospace);
}

.task-modal-uid-copy {
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.task-modal-uid-copy .icon {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
}

.task-modal-uid:hover .task-modal-uid-copy,
.task-modal-uid-copy:focus-visible,
.task-modal-uid-copy.is-copied {
    opacity: 1;
}

@media (hover: none) {
    .task-modal-uid-copy {
        opacity: 1;
    }
}

.task-modal-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.task-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 1rem 1.5rem;
}

.task-title-input {
    font-size: var(--tblr-font-size-h1, 1.5rem);
    font-weight: var(--tblr-font-weight-bold, 600);
}

/* Propriedades em duas colunas enquanto couberem (container: a largura da coluna da tarefa, não da tela) */
.task-main {
    container-type: inline-size;
}

.task-properties {
    margin-top: 0.75rem;
}

.task-properties .property {
    grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
}

/* As duas datas quebram a linha quando não cabem lado a lado (nunca ficam por cima da coluna vizinha) */
.task-properties .property-value[role="group"] {
    flex-wrap: wrap;
}

.task-properties .property-value > .form-control[type="date"] {
    flex: 0 1 7.5rem;
    min-width: 6.75rem;
    padding-right: 0.25rem;
    padding-left: 0.375rem;
}

@container (max-width: 44rem) {
    .task-properties {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Descrição: ocupa a altura que sobra e rola sozinha */
.task-description {
    flex: 1 1 auto;
    min-height: 8rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    overflow-y: auto;
    border-top: 1px solid var(--tblr-border-color);
}

/* Editor de texto rico inline (static/js/rich_text.js): a área toda é clicável; borda só ao passar o mouse e no foco,
   como os campos ghost */
.task-description-editor {
    min-height: 12rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius);
    outline: none;
    cursor: text;
}

.task-description-editor:hover {
    border-color: var(--tblr-border-color);
}

.task-description-editor:focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

.task-description-editor > :last-child,
.task-comment-editor > :last-child,
.task-comment-body > :last-child {
    margin-bottom: 0;
}

/* Tabelas do texto rico (descrição e comentários): cada célula com borda (clara onde clicar), como no editor de
   documentos. .mce-content-body vence a regra do HugeRTE que desenha tracejadas as tabelas sem o atributo border */
:is(.task-description-editor, .task-comment-editor, .task-comment-body).markdown table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

:is(.task-description-editor, .task-comment-editor).markdown.mce-content-body :is(th, td),
:is(.task-description-editor, .task-comment-editor, .task-comment-body).markdown :is(th, td) {
    min-width: 3rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--tblr-border-color);
    vertical-align: top;
}

/* Texto de ajuda do editor vazio (HugeRTE: data-mce-placeholder) */
/* Mais específico que a regra do HugeRTE (left: 1px), para o texto de ajuda respeitar o espaçamento do campo */
.mce-content-body:not([dir="rtl"]):is(.task-description-editor, .task-comment-editor)[data-mce-placeholder]:not(.mce-visualblocks)::before {
    left: calc(0.75rem + 1px);
    color: var(--tblr-secondary);
}

/* Valor clicável numa propriedade (ex.: "Rastrear tempo"), alinhado com o texto dos campos */
.property-button {
    justify-content: flex-start;
    font-size: inherit;
    padding-left: calc(var(--tblr-btn-input-padding-x, 0.75rem) + var(--tblr-border-width, 1px));
    font-weight: var(--tblr-font-weight-normal, 400);
}

/* Janela de registro de tempo, ao lado de "Rastrear tempo": campos e registros em letra pequena */
.task-time-anchor {
    position: relative;
}

.task-time-popover {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    width: min(28rem, 80vw);
    padding: 0.75rem;
    font-size: 0.6rem;
    box-shadow: var(--tblr-box-shadow-dropdown, 0 1rem 2rem rgba(0, 0, 0, 0.15));
}

.task-time-popover :is(.form-label, .form-control, .table, .table th, .table td, .btn) {
    font-size: 0.6rem;
}

.task-time-popover .form-label {
    margin-bottom: 0.125rem;
}

.task-time-popover .form-control {
    min-height: 0;
    padding: 0.25rem 0.375rem;
}

.task-time-form {
    display: grid;
    grid-template-columns: 4.5rem 7rem minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.375rem;
}

/* Botões de ícone na altura dos campos */
.task-time-popover .btn-icon {
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    padding: 0;
}

.task-time-popover .btn-icon .icon {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
}

.task-time-total {
    margin: 0.5rem 0 0.25rem;
    color: var(--tblr-secondary);
}

.task-time-table {
    max-height: 12rem;
    overflow-y: auto;
}

/* Comentários (ADR 0021) */
.task-activity {
    display: flex;
    flex: 0 0 clamp(18rem, 30%, 26rem);
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
}

.task-activity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

.task-activity-title {
    margin: 0;
    font-size: var(--tblr-font-size-h4, 1rem);
    font-weight: var(--tblr-font-weight-bold, 600);
}

/* A lista rola sozinha; com poucos comentários, eles ficam junto do campo de comentar (o primeiro empurra para baixo) */
.task-comments-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    padding: 0.75rem 1rem;
    overflow-y: auto;
}

.task-comments-list > :first-child {
    margin-top: auto;
}

.task-comments-empty {
    margin: auto 0;
    color: var(--tblr-secondary);
    font-size: 0.875em;
    text-align: center;
}

.task-comment {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg, 0.5rem);
    background: var(--tblr-bg-surface);
}

.task-comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.task-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
}

.task-comment-author {
    font-weight: var(--tblr-font-weight-bold, 600);
}

/* Excluir aparece só ao passar o mouse no comentário (ou com o foco nele; em telas de toque, sempre) */
.task-comment-delete {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}

.task-comment:hover .task-comment-delete,
.task-comment:focus-within .task-comment-delete {
    opacity: 1;
}

@media (hover: none) {
    .task-comment-delete {
        opacity: 1;
    }
}

.task-comment-body {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* Imagens: ajustadas à largura do painel; ao clicar, abrem ampliadas (task_comments.js) */
.task-comment-body img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}

.task-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    cursor: zoom-out;
}

.task-image-viewer[hidden] {
    display: none;
}

.task-image-viewer img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--tblr-border-radius);
    background: #fff;
    cursor: default;
}

.task-image-viewer .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Campo de comentar, fixo embaixo do painel */
.task-comment-form {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}

.task-comment-editor {
    min-height: 2.75rem;
    max-height: 12rem;
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-forms);
    font-size: 0.875rem;
    outline: none;
    cursor: text;
}

.task-comment-editor:focus {
    border-color: var(--tblr-primary);
}

/* Campo de comentar e botão de enviar na mesma linha; com várias linhas de texto, o botão fica embaixo */
.task-comment-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.task-comment-row .task-comment-editor {
    flex: 1 1 auto;
    min-width: 0;
}

.task-comment-send {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
}

.task-comment-error {
    display: block;
    margin-top: 0.375rem;
}

@media (max-width: 767.98px) {
    .task-modal-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .task-main {
        flex: 0 0 auto;
        padding: 1rem;
    }

    .task-description {
        overflow-y: visible;
    }

    .task-activity {
        flex: 0 0 auto;
        border-top: 1px solid var(--tblr-border-color);
        border-left: 0;
    }

    .task-comments-list {
        max-height: 60vh;
    }

    .task-time-form {
        grid-template-columns: 1fr 1fr;
    }
}

.list-status-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}

.list-status-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.list-status-row-main [data-field="name"] {
    flex: 1 1 10rem;
    width: auto;
}

.list-status-row-main [data-field="phase"] {
    width: auto;
}

.list-status-row.is-inactive [data-field="name"] {
    color: var(--tblr-secondary);
}

.list-status-handle {
    padding: 0 0.25rem;
    color: var(--tblr-secondary);
    cursor: grab;
    letter-spacing: -0.2em;
}

.list-status-confirm {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
}

.list-status-new {
    margin-top: 1rem;
}

@media (max-width: 575.98px) {
    .list-search {
        max-width: none;
    }

    .list-toolbar-end {
        width: 100%;
        margin-left: 0;
    }

    .list-filters {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================================================
   Extensões do Tabler: componentes no mesmo padrão do Tabler (tokens --tblr-*, nomes no estilo dele), para
   reutilizar em qualquer página. Documentados em .ai/FRONTEND.md ("Extensões do Tabler").
   ====================================================================================================== */

/* Campo "fantasma" (como btn-ghost-*): sem borda nem fundo até passar o mouse ou receber o foco. Uso:
   class="form-control form-control-ghost" / class="form-select form-select-ghost" */
.form-control-ghost,
.form-select-ghost {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.form-control-ghost::placeholder {
    color: var(--tblr-secondary);
}

.form-control-ghost:hover,
.form-select-ghost:hover {
    background-color: var(--tblr-bg-surface-secondary);
}

.form-control-ghost:focus,
.form-select-ghost:focus {
    border-color: var(--tblr-primary);
    background-color: var(--tblr-bg-forms);
}

/* Campo sem borda do Tabler (form-control-flush): o contorno de foco fica afastado do texto */
.form-control-flush:focus-visible {
    outline-offset: 0.25rem;
    border-radius: var(--tblr-border-radius);
}

/* A seta do select aparece só ao passar o mouse ou com o foco (em repouso, o valor parece texto) */
.form-select-ghost:not(:hover):not(:focus) {
    background-image: none;
}

/* Lista de propriedades (como os campos de uma tarefa no ClickUp): ícone + rótulo à esquerda e o valor à
   direita, em duas colunas em telas médias e uma no celular. Uso:
   <div class="property-list">
     <div class="property">
       <label class="property-label" for="x"><svg class="icon">...</svg> Rótulo</label>
       <div class="property-value"><input class="form-control form-control-ghost" id="x"></div>
     </div>
   </div> */
.property-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem 2rem;
}

.property {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
}

.property-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--tblr-secondary);
    font-size: var(--tblr-font-size-h4, 0.875rem);
}

.property-label .icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.property-value {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.property-value > .form-control,
.property-value > .form-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Datas lado a lado (início → término): cada uma com a largura da data, sem cortar */
.property-value > .form-control[type="date"] {
    flex: 0 1 9.5rem;
    min-width: 8.5rem;
}

/* Texto ou link no lugar de um campo (ex.: "Tempo utilizado"), alinhado com o texto dos campos */
.property-text {
    padding: 0.25rem calc(var(--tblr-btn-input-padding-x, 0.75rem) + var(--tblr-border-width, 1px));
}

.property-separator {
    color: var(--tblr-secondary);
}

/* Lista de propriedades compacta: linhas mais baixas (mais espaço para o conteúdo abaixo, ex.: uma descrição) */
.property-list-compact .property {
    min-height: 1.875rem;
}

.property-list-compact .property-value > .form-control,
.property-list-compact .property-value > .form-select {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

/* Campo de etiquetas em badges (static/js/tag_input.js): os badges e, no fim, o campo para digitar mais.
   Combina com .form-control (e .form-control-ghost): a borda é a do campo */
.tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    cursor: text;
}

.property-value > .tag-input {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.tag-input-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: var(--tblr-font-weight-normal);
}

.tag-input-remove {
    padding: 0 0.125rem;
    border: 0;
    border-radius: var(--tblr-border-radius-sm);
    background: none;
    color: inherit;
    line-height: 1;
    opacity: 0.6;
}

.tag-input-remove:hover,
.tag-input-remove:focus-visible {
    opacity: 1;
    background: rgba(var(--tblr-body-color-rgb), 0.1);
}

.tag-input-field {
    flex: 1 1 5rem;
    min-width: 5rem;
    padding: 0.125rem 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
}

/* Sem foco: o campo vazio atrás dos badges não aparece (o ghost mostra só as etiquetas) */
.tag-input:has(.tag-input-badge):not(:focus-within) .tag-input-field {
    flex-basis: 1rem;
    min-width: 1rem;
}

@media (max-width: 767.98px) {
    .property-list {
        grid-template-columns: 1fr;
    }

    /* Celular: rótulo mais estreito e valores que quebram linha (ex.: as duas datas) em vez de serem cortados */
    .property {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .property-value {
        flex-wrap: wrap;
    }
}

/* Contagens do dashboard (dashboard.html): três cards por linha; seis quando a própria linha tem espaço para os
   nomes inteiros ("Fluxogramas", "Mapas mentais"). Medido pela linha, e não pela janela, porque o menu lateral
   (com a barra de contexto) ocupa larguras diferentes, aberto ou recolhido. */
.dashboard-counts {
    container-type: inline-size;
}

@container (min-width: 72rem) {
    .dashboard-counts > .col-6 {
        flex: 1 0 0;
        width: auto;
    }
}