/* Kanban — dark professional theme */
:root {
    --bg:           #111113;
    --surface:      #1a1a1c;
    --surface-2:    #222224;
    --border:       #2e2e30;
    --text:         #dddde3;
    --muted:        #6a6a72;
    --accent:       #5b6ef5;
    --accent-hover: #4a5de4;
    --danger:       #e05555;
    --radius:       8px;
    --shadow:       0 1px 4px rgba(0,0,0,.4);
    --shadow-md:    0 6px 24px rgba(0,0,0,.55);

    --area-sette:      #3a5a96;
    --area-abfintechs: #246b4a;
    --area-trag:       #573a8a;
    --area-pessoal:    #8a4e22;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 14px;
}

/* ========================= Botões ========================= */
button {
    font: inherit; cursor: pointer; padding: 7px 14px;
    border: 1px solid transparent; background: var(--accent); color: #fff;
    border-radius: var(--radius); transition: background .15s, opacity .15s;
    white-space: nowrap;
}
button:hover { background: var(--accent-hover); }
button.secundario {
    background: var(--surface-2); color: var(--text);
    border-color: var(--border);
}
button.secundario:hover { background: var(--border); }

/* ========================= Campos ========================= */
input, select, textarea {
    font: inherit; width: 100%; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2); color: var(--text);
    transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    background: var(--surface-2);
}
/* Opções do select herdam fundo escuro */
option { background: var(--surface-2); color: var(--text); }

label { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: .3px; }
label input, label select, label textarea { margin-top: 4px; color: var(--text); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.erro { color: var(--danger); font-size: 13px; }
.stack > * + * { margin-top: 12px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; }
.row.acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ========================= Login ========================= */
.login-page {
    display: grid; place-items: center; min-height: 100vh;
    background: var(--bg);
}
.login-card {
    width: min(420px, 92vw);
    background: var(--surface); padding: 36px;
    border-radius: 14px; box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }

/* ========================= Topbar ========================= */
.topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
}

.brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.brand strong { font-size: 15px; letter-spacing: -.3px; color: var(--text); }
.nav-link-atas {
    font-size: 13px; color: var(--muted); text-decoration: none;
    padding: 4px 8px; border-radius: var(--radius);
    border: 1px solid transparent; transition: color .15s, background .15s;
}
.nav-link-atas:hover { color: var(--text); background: var(--surface-2); }

.topbar-actions {
    display: flex; align-items: center; gap: 8px;
    flex: 1; flex-wrap: wrap;
}

.legenda-grupo { display: flex; gap: 10px; align-items: center; }
.legenda {
    display: flex; gap: 5px; align-items: center;
    color: var(--muted); font-size: 12px; white-space: nowrap;
}
.legenda .dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.dot.sette      { background: var(--area-sette); }
.dot.abfintechs { background: var(--area-abfintechs); }
.dot.trag       { background: var(--area-trag); }
.dot.pessoal    { background: var(--area-pessoal); }

.filtro-select { width: auto; min-width: 130px; padding: 6px 10px; font-size: 13px; }

.btn-sync {
    background: transparent; color: var(--muted);
    border: 1px solid var(--border); font-size: 13px;
}
.btn-sync:hover { background: var(--surface-2); color: var(--text); }
.btn-sync:disabled { opacity: .4; cursor: not-allowed; }

/* ========================= Menu engrenagem ========================= */
.config-menu-wrap { position: relative; flex-shrink: 0; margin-left: auto; }

.btn-icon {
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); border-radius: var(--radius);
    padding: 6px 8px; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
.btn-icon.ativo  { background: var(--surface-2); color: var(--text); }

.config-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-md);
    list-style: none; margin: 0; padding: 6px;
    min-width: 210px; z-index: 200;
}
.config-menu li button {
    width: 100%; text-align: left;
    background: transparent; border: none; color: var(--text);
    padding: 8px 12px; border-radius: 6px; font-size: 13.5px;
    transition: background .1s;
}
.config-menu li button:hover { background: var(--surface-2); }
.config-menu li button.menu-item-danger { color: var(--danger); }
.config-menu li button.menu-item-danger:hover { background: rgba(224,85,85,.12); }
.menu-sep { border-top: 1px solid var(--border); margin: 5px 0; }

/* ========================= Filtros ========================= */
.filtros-bar {
    position: sticky; top: 56px; z-index: 90;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.filtro-texto {
    flex: 1 1 220px; min-width: 160px; max-width: 340px;
    padding: 7px 10px; font-size: 13px;
}
.filtro-select {
    flex: 0 0 auto; width: auto; padding: 7px 28px 7px 10px;
    font-size: 13px; appearance: auto;
}
.btn-filtros-limpar {
    flex: 0 0 auto; padding: 7px 12px; font-size: 12px;
    opacity: .7;
}
.btn-filtros-limpar:hover { opacity: 1; }

/* ========================= Kanban board ========================= */
.kanban {
    display: grid; gap: 12px;
    grid-template-columns: repeat(7, minmax(220px, 1fr));
    padding: 16px; overflow-x: auto; min-height: calc(100vh - 56px);
}

.coluna {
    background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
}
.coluna > h3 {
    margin: 0; padding: 11px 14px; font-size: 11px;
    color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.coluna > h3 span {
    background: var(--surface-2); color: var(--muted);
    font-size: 11px; padding: 1px 7px; border-radius: 10px;
}
.coluna .cards {
    padding: 8px; display: flex; flex-direction: column; gap: 6px;
    flex: 1; min-height: 80px;
}
.coluna.drop-ativa { background: var(--surface-2); }

/* ========================= Cards ========================= */
.card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-left: 3px solid var(--area-pessoal);
    border-radius: 7px; padding: 10px 12px; cursor: grab;
    transition: box-shadow .15s, border-color .15s;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: #32364a;
}
.card.arrastando { opacity: .35; cursor: grabbing; }
.card.area-sette      { border-left-color: var(--area-sette); }
.card.area-abfintechs { border-left-color: var(--area-abfintechs); }
.card.area-trag       { border-left-color: var(--area-trag); }
.card.area-pessoal    { border-left-color: var(--area-pessoal); }

.card .titulo {
    font-weight: 600; font-size: 13px; margin-bottom: 5px;
    line-height: 1.4; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .desc {
    color: var(--muted); font-size: 12px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.card .meta {
    display: flex; gap: 5px; flex-wrap: wrap;
    margin-top: 8px; font-size: 11px; color: var(--muted);
    align-items: center;
}
.card .tag {
    padding: 2px 7px; border-radius: 5px;
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--border);
}
.card .tag.prioridade-urgente { background: rgba(224,85,85,.15); color: #e88; border-color: rgba(224,85,85,.25); font-weight: 600; }
.card .tag.prioridade-alta    { background: rgba(240,139,58,.12); color: #d4915c; border-color: rgba(240,139,58,.2); }
.card .tag.fonte              { font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.card .tag.data-origem        { background: transparent; border: none; padding: 0; font-size: 11px; color: var(--muted); }
.card a { color: var(--accent); text-decoration: none; font-size: 11px; }
.card a:hover { text-decoration: underline; }

/* ========================= Badge de mensagens ========================= */
.msg-count {
    position: absolute; top: 7px; right: 28px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 18px;
    border-radius: 9px; text-align: center;
    pointer-events: none;
}

/* ========================= Seleção em lote ========================= */
.card { position: relative; }

.card-checkbox {
    position: absolute; top: 8px; right: 8px;
    width: 15px; height: 15px;
    accent-color: var(--accent);
    opacity: 0; cursor: pointer;
    transition: opacity .15s;
    z-index: 2;
}
.card:hover .card-checkbox,
.card.selecionado .card-checkbox { opacity: 1; }
.card.selecionado {
    outline: 2px solid var(--accent);
    background: rgba(91,110,245,.08);
}

.bulk-bar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 20px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    z-index: 300; white-space: nowrap;
    animation: slideUp .2s ease;
}
.bulk-bar.hidden { display: none; }
.bulk-acoes { display: flex; gap: 8px; }
.bulk-bar button { padding: 7px 16px; font-size: 13px; }
.bulk-bar button.secundario {
    background: var(--surface-2); color: var(--muted);
    border-color: var(--border);
}
.bulk-bar button.secundario:hover { background: var(--border); color: var(--text); }

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(12px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ========================= Modal ========================= */
dialog {
    border: none; border-radius: 12px; padding: 24px;
    width: min(640px, 92vw);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 16px 48px rgba(0,0,0,.7);
}
dialog::backdrop { background: rgba(0,0,5,.65); backdrop-filter: blur(3px); }
dialog#modal-regras { width: min(900px, 95vw); }
dialog h3 { margin: 0 0 4px; font-size: 17px; }

/* ========================= Modal IA ========================= */
.modal-header { display: flex; flex-direction: column; gap: 4px; }
.modal-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.modal-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 5px;
    background: var(--surface-2); color: var(--muted);
    border: 1px solid var(--border);
}
.modal-badge.fonte    { font-family: ui-monospace, monospace; }
.modal-badge.urgente  { background: rgba(224,85,85,.15); color: #e88; border-color: rgba(224,85,85,.25); }
.modal-badge.alta     { background: rgba(240,139,58,.12); color: #d4915c; border-color: rgba(240,139,58,.2); }

.remetente-info {
    font-size: 12.5px; color: var(--muted);
    padding: 7px 10px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 6px;
}
.remetente-info strong { color: var(--text); }

.ia-acoes {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px;
}
.btn-ia {
    font-size: 13px; padding: 7px 14px;
    background: linear-gradient(135deg, #4a5de4, #7c3aed);
    color: #fff; border: none; border-radius: var(--radius);
}
.btn-ia:hover { opacity: .85; background: linear-gradient(135deg, #4a5de4, #7c3aed); }
.btn-ia-sec {
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border);
}
.btn-ia-sec:hover { background: var(--border); }
.btn-ia:disabled { opacity: .4; cursor: not-allowed; }

/* ========================= Fontes no modal ========================= */
.fontes-section {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
}
.fontes-section h4 {
    margin: 0 0 8px; font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .8px;
}
#lista-fontes {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.fonte-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 12.5px; flex-wrap: wrap;
}
.fonte-tag {
    font-size: 10px; font-weight: 600; letter-spacing: .4px;
    padding: 2px 6px; border-radius: 4px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); text-transform: uppercase;
}
.fonte-data { color: var(--muted); font-size: 12px; }
.fonte-rem  { color: var(--text); flex: 1; }
.fonte-link {
    color: var(--accent); font-size: 12px; text-decoration: none;
    padding: 2px 8px; border: 1px solid rgba(91,110,245,.3);
    border-radius: 5px; background: rgba(91,110,245,.08);
    white-space: nowrap; transition: background .15s;
}
.fonte-link:hover { background: rgba(91,110,245,.18); }

.contexto-section, .mesclar-section {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
}
.contexto-section h4, .mesclar-section h4 {
    margin: 0 0 10px; font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .8px;
}
.contexto-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; padding: 8px 10px; background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px; margin-bottom: 6px; font-size: 13px;
}
.contexto-item-info { flex: 1; }
.contexto-item-titulo { font-weight: 600; margin-bottom: 2px; color: var(--text); }
.contexto-item-motivo { color: var(--muted); font-size: 12px; }
.contexto-item button { padding: 4px 10px; font-size: 12px; flex-shrink: 0; }

.mesclar-lista {
    list-style: none; padding: 0; margin: 8px 0;
    max-height: 180px; overflow-y: auto;
}
.mesclar-lista li {
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    font-size: 13px; transition: background .1s; color: var(--text);
}
.mesclar-lista li:hover { background: var(--surface-2); }
.mesclar-lista li.sel { background: rgba(91,110,245,.15); font-weight: 600; }
.mesclar-selecionado {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: rgba(91,110,245,.12);
    border: 1px solid rgba(91,110,245,.25);
    border-radius: 8px; font-size: 13px; flex-wrap: wrap;
}
.mesclar-selecionado span { flex: 1; font-weight: 600; }

/* ========================= Comentários ========================= */
.comentarios { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.comentarios h4 {
    margin: 0 0 10px; font-size: 11px;
    color: var(--muted); text-transform: uppercase; letter-spacing: .6px;
}
#lista-comentarios {
    list-style: none; padding: 0; margin: 0 0 12px;
    max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
#lista-comentarios li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px;
}
#lista-comentarios .com-data {
    color: var(--muted); font-size: 11.5px;
    white-space: nowrap; min-width: 82px; padding-top: 1px;
}
#lista-comentarios .com-desc { flex: 1; line-height: 1.5; }
#lista-comentarios .com-desc a {
    display: inline-block; margin-top: 4px;
    color: var(--accent); font-size: 12px; text-decoration: none;
    padding: 2px 8px; border: 1px solid rgba(91,110,245,.3);
    border-radius: 5px; background: rgba(91,110,245,.08);
    transition: background .15s;
}
#lista-comentarios .com-desc a:hover { background: rgba(91,110,245,.18); }
#lista-comentarios .com-excluir {
    background: transparent; color: var(--muted);
    padding: 2px 6px; font-size: 12px; border: none;
}
#lista-comentarios .com-excluir:hover { color: var(--danger); background: transparent; }
.novo-comentario {
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 10px; border-radius: 8px;
}

/* ========================= Página de Atas ========================= */
.atas-page .topbar .nav-back {
    color: var(--muted); text-decoration: none; font-size: 13px;
    padding: 4px 8px; border-radius: var(--radius);
    transition: color .15s, background .15s;
}
.atas-page .topbar .nav-back:hover { color: var(--text); background: var(--surface-2); }

.atas-main {
    max-width: 1200px; margin: 0 auto; padding: 20px 16px;
    display: flex; flex-direction: column; gap: 12px;
}

.atas-empty {
    text-align: center; padding: 60px 20px; color: var(--muted);
}

/* ---- Bloco de reunião ---- */
.reuniao-bloco {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.reuniao-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.reuniao-header:hover { background: var(--surface-2); }
.reuniao-header-info {
    display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap;
}
.reuniao-data  { color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 72px; }
.reuniao-titulo { font-weight: 600; font-size: 14px; }
.reuniao-duracao { font-size: 12px; }
.reuniao-badges { display: flex; gap: 6px; }

.badge {
    font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600;
    white-space: nowrap;
}
.badge-atrasada { background: rgba(224,85,85,.18); color: #e07070; }
.badge-aberto   { background: rgba(200,170,50,.15); color: #c8b050; }

.reuniao-header-acoes {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* ---- Tabela de tarefas ---- */
.tarefas-wrap { overflow-x: auto; }
.tarefas-vazia { padding: 14px 16px; color: var(--muted); font-size: 13px; }
.tarefas-vazia.hidden { display: none; }

.tbl-tarefas { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-tarefas th {
    background: var(--surface-2); color: var(--muted);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border);
}
.tbl-tarefas td {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.tbl-tarefas tr:last-child td { border-bottom: none; }
.tbl-tarefas tr:hover td { background: var(--surface-2); }

/* Status da linha */
.tarefa-row.status-atrasada .tarefa-responsavel { color: #e07070; }
.tarefa-row.status-feito    { opacity: .55; }
.tarefa-row.status-cancelado { opacity: .35; text-decoration: line-through; }

.tarefa-responsavel { font-weight: 600; white-space: nowrap; min-width: 100px; }
.tarefa-descricao   { max-width: 520px; }
.tarefa-notas       { font-size: 12px; margin-top: 4px; }
.tarefa-prazo       { white-space: nowrap; min-width: 80px; }

/* Badge de status */
.status-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.status-badge.status-aberto   { background: rgba(200,170,50,.15); color: #c8b050; }
.status-badge.status-atrasada { background: rgba(224,85,85,.18);  color: #e07070; }
.status-badge.status-feito    { background: rgba(50,180,80,.15);  color: #50b460; }
.status-badge.status-cancelado { background: var(--surface-2);    color: var(--muted); }

/* Botões de ação da tarefa */
.tarefa-acoes-cell { width: 96px; }
.tarefa-acoes { display: flex; gap: 4px; align-items: center; }

.btn-check {
    width: 26px; height: 26px; padding: 0; border-radius: 50%;
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); font-size: 13px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.btn-check:hover { border-color: #50b460; color: #50b460; background: rgba(50,180,80,.1); }
.btn-check.checked { border-color: #50b460; color: #50b460; background: rgba(50,180,80,.15); }

.btn-icon-sm {
    width: 26px; height: 26px; padding: 0;
    background: transparent; border: 1px solid transparent;
    color: var(--muted); font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.btn-icon-sm:hover { color: var(--text); background: var(--surface-2); }

.btn-danger-ghost {
    background: transparent; border: 1px solid transparent; color: var(--muted);
    border-radius: var(--radius);
}
.btn-danger-ghost:hover { color: var(--danger); background: rgba(224,85,85,.1); }
.btn-danger-ghost.btn-sm { padding: 4px 8px; font-size: 12px; }

.btn-sm  { padding: 5px 10px; font-size: 12px; }
.btn-link {
    font-size: 12px; color: var(--accent); text-decoration: none;
    padding: 4px 8px; border-radius: var(--radius);
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-link:hover { border-color: var(--accent); background: rgba(91,110,245,.1); }

/* ========================= Tabela de regras ========================= */
.tbl-regras { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-regras th, .tbl-regras td {
    padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.tbl-regras th {
    background: var(--surface-2); color: var(--muted);
    font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.tbl-regras tr.inativa td { opacity: .4; }
.tbl-regras .acoes-regra { display: flex; gap: 6px; }
.tbl-regras button { padding: 4px 10px; font-size: 12px; }