/* GreatFlow - overrides mínimos. Mantenha enxuto: a base é Bootstrap 5. */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

.card {
    border: 0;
}

/* ---------------------------------------------------------------- */
/* Menu lateral responsivo — abaixo de md o menu vira offcanvas      */
/* (aberto pelo ícone hambúrguer da navbar). A coluna do menu fica   */
/* vazia no fluxo e não deve gerar espaçamento extra no grid.        */
/* ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .gf-sidebar-col {
        margin-top: 0;
        padding: 0;
    }
}

/* ---------------------------------------------------------------- */
/* Menu lateral — cabeçalhos de seção (agrupamento dos itens).       */
/* Fundo tingido com a cor primária + filete superior e barra à      */
/* esquerda para diferenciar claramente dos itens clicáveis.         */
/* ---------------------------------------------------------------- */
.gf-nav-section {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
    border-top: 2px solid color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
    border-left: 3px solid var(--bs-primary);
    /* compensa a barra de 3px para o texto alinhar com os itens */
    padding: .6rem 1rem .35rem calc(1rem - 3px);
}
[data-bs-theme="dark"] .gf-nav-section {
    color: color-mix(in srgb, var(--bs-primary) 60%, #fff);
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
}

/* ---------------------------------------------------------------- */
/* Widget de anexos (tickets) — drag-drop, paste, file picker.       */
/* ---------------------------------------------------------------- */
.gf-attachments .gf-att-dropzone {
    border: 2px dashed #ced4da;
    border-radius: .5rem;
    padding: .75rem;
    background: #fafbfc;
    transition: border-color .15s, background .15s;
}
.gf-attachments .gf-att-dropzone.dragging {
    border-color: #0d6efd;
    background: #e7f1ff;
}
.gf-attachments .gf-att-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}
.gf-attachments.has-attachments .gf-att-list { margin-bottom: .25rem; }
.gf-att-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    font-size: .8rem;
    max-width: 100%;
}
.gf-att-thumb {
    width: 24px; height: 24px;
    object-fit: cover;
    border-radius: 4px;
}
.gf-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Anexos exibidos abaixo de mensagens no histórico. */
.chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}
.chat-attachments .att-thumb {
    max-width: 180px;
    max-height: 180px;
    border-radius: .35rem;
    border: 1px solid rgba(0,0,0,.08);
    cursor: zoom-in;
}
.chat-attachments .att-file {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 999px;
    font-size: .78rem;
    color: inherit;
    text-decoration: none;
}
.chat-bubble-sent .chat-attachments .att-file {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

/* ---------------------------------------------------------------- */
/* Dark mode — overrides para elementos com cores fixas.            */
/* Bootstrap 5.3 cobre a maioria via data-bs-theme="dark".          */
/* ---------------------------------------------------------------- */
[data-bs-theme="dark"] .gf-attachments .gf-att-dropzone {
    border-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .gf-attachments .gf-att-dropzone.dragging {
    border-color: var(--bs-primary);
    background: rgba(13, 110, 253, .12);
}
[data-bs-theme="dark"] .gf-att-chip {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .chat-attachments .att-thumb {
    border-color: rgba(255,255,255,.1);
}
[data-bs-theme="dark"] .chat-attachments .att-file {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
}

/* ---------------------------------------------------------------- */
/* Editor rico (Quill) e conteúdo HTML das mensagens.                */
/* ---------------------------------------------------------------- */
/*
 * Editor rico (Quill) — estrutura real no DOM após init:
 *
 *   div.gf-rich-wrapper          ← criado pelo nosso JS; pai de ambos
 *   ├── div.ql-toolbar.ql-snow   ← inserido pelo Quill ANTES do holder
 *   └── div.gf-rich-holder       ← holder original; Quill ADICIONA .ql-container.ql-snow a ele
 *       └── div.ql-editor
 *
 * Sem o wrapper, os seletores ".gf-rich-holder .ql-container" e
 * ".gf-rich-holder .ql-toolbar" nunca casam (container=holder, toolbar=irmão),
 * tornando qualquer override de height ineficaz.
 */

/* Wrapper: espaçamento inferior entre editor e o campo seguinte. */
.gf-rich-wrapper {
    margin-bottom: 0.75rem;
}

/* Toolbar é filho direto do wrapper — corrige bordas e cantos. */
.gf-rich-wrapper > .ql-toolbar.ql-snow {
    border-color: var(--bs-border-color);
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

/* Container (= gf-rich-holder após Quill init) — corrige height e cantos. */
.gf-rich-wrapper > .ql-container.ql-snow {
    height: auto !important;
    border-color: var(--bs-border-color);
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
    font-size: .9rem;
}

/* Área de edição: cresce com o conteúdo, nunca colapsa abaixo de 6 linhas. */
.gf-rich-wrapper .ql-editor {
    height: auto !important;
    min-height: 6rem;
    overflow-y: auto;
    overflow-x: hidden;       /* impede que imagens largas expandam o editor na horizontal */
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Imagens dentro do editor: limitadas à largura da área de edição.
   display:block elimina o espaço extra em linha abaixo da imagem. */
.gf-rich-wrapper .ql-editor img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: .35rem;
    margin: .35rem 0;
}

/* Ícones da toolbar em modo escuro. */
[data-bs-theme="dark"] .gf-rich-wrapper .ql-toolbar .ql-stroke { stroke: var(--bs-body-color); }
[data-bs-theme="dark"] .gf-rich-wrapper .ql-toolbar .ql-fill { fill: var(--bs-body-color); }
[data-bs-theme="dark"] .gf-rich-wrapper .ql-toolbar .ql-picker { color: var(--bs-body-color); }

/* Conteúdo HTML renderizado (descrição, solução e bolhas de chat).
   overflow:hidden + min-width:0 garantem que o conteúdo não ultrapasse a
   borda do container pai mesmo em contexto flex. */
.gf-richtext-content {
    overflow: hidden;
    min-width: 0;
}

/* Imagens inline: limitadas ao container, nunca expandem o box na horizontal.
   display:block remove o espaço extra gerado por imagens inline (4px em alguns
   navegadores) e permite que margin funcione como esperado. */
.gf-richtext-content img,
.chat-bubble img {
    max-width: 100% !important;  /* sobrescreve width/style inline que o Quill possa inserir */
    height: auto !important;
    display: block;
    border-radius: .35rem;
    margin: .35rem 0;
}
.gf-richtext-content p:last-child,
.chat-bubble p:last-child { margin-bottom: 0; }
.gf-richtext-content blockquote,
.chat-bubble blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: .75rem;
    margin-left: 0;
    color: var(--bs-secondary-color);
}

/* Indicador "editado" nas bolhas. */
.chat-edited {
    font-style: italic;
    opacity: .7;
}

/* ---------------------------------------------------------------- */
/* Ajuda contextual — ícone tooltip e banner de próximo passo.       */
/* ---------------------------------------------------------------- */
.gf-help-icon {
    cursor: help;
    font-size: .85em;
    opacity: .55;
    vertical-align: middle;
    transition: opacity .15s;
}
.gf-help-icon:hover,
.gf-help-icon:focus {
    opacity: 1;
    outline: none;
}

/* Banner "Próximo passo" — tamanho compacto, sem margin-bottom extra. */
.gf-flow-hint {
    font-size: .875rem;
}

/* ---------------------------------------------------------------- */
/* Portal do cliente — leitura de status por cor (projetos e board). */
/* A cor de cada status vem inline do filtro `customer_column_color` */
/* para manter uma única fonte da paleta (work_extras.py).           */
/* ---------------------------------------------------------------- */

/* Chip de contagem por status no resumo do projeto. */
.gf-status-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-left-width: 3px;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    font-size: .8rem;
    line-height: 1.2;
}
.gf-status-chip-label {
    color: var(--bs-secondary-color);
}
.gf-status-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Item de tarefa (lista do projeto e card do board): filete colorido
   à esquerda indicando o status. A cor chega por `border-left-color`
   inline; o `transparent` aqui é só o fallback. Precisa vir depois de
   `.card { border: 0 }` para vencer no cascade. */
.gf-task-item {
    border-left: 4px solid transparent;
}

/* Barra de atribuição em massa: destacada enquanto há tarefas marcadas,
   para deixar claro que a ação vale para a seleção atual. */
.gf-bulk-bar {
    transition: border-color .15s, background .15s;
}
.gf-bulk-active .gf-bulk-bar {
    border-color: var(--bs-primary) !important;
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg)) !important;
}

/* Sprint selecionada no filtro lateral do detalhe do projeto. */
.gf-sprint-item {
    border-left: 3px solid transparent;
    padding-left: .75rem;
}
.gf-sprint-item-active {
    border-left-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
}