/* Estilos globais da UI de Tarefas (tema escuro ajustado para cores mais amigáveis) */
/* Comentários em PT para facilitar a manutenção. */
/* Ajustes: Tons de azul e cinza mais suaves e quentes para maior conforto visual, reduzindo o contraste excessivo e tornando a interface mais acolhedora para um sistema de tarefas. */

/* 1) Base -------------------------------------------------------------- */
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;margin:0;background-color:#1f2937;background-image:linear-gradient(180deg,#1f2937 0%,#111827 100%)}
a{color:inherit}

/* 2) Container de layout ---------------------------------------------- */
.container{max-width:1440px;margin:24px auto;padding:0 16px}
@media (min-width:1600px){.container{max-width:1600px}}
@media (max-width:576px){.container{margin:16px auto;padding:0 12px}}

/* 3) Estilos legados de card/campos (mantidos por compatibilidade) ---- */
h1{font-size:28px;margin:0 0 16px}
.card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:16px;margin-bottom:16px}
.row{margin-bottom:8px}
input[type=text],textarea{width:100%;padding:10px;border-radius:12px;border:1px solid #475569;background:#0f172a;color:#f1f5f9}
button{padding:10px 14px;border-radius:12px;border:1px solid #475569;background:#0f172a;color:#f1f5f9;cursor:pointer}
button:hover{filter:brightness(1.2)}
button.danger{border-color:#991b1b}

/* 4) Blocos antigos de lista/tarefa (não padrão, ainda usados) -------- */
.list{display:flex;flex-direction:column;gap:12px}
.task{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#1e293b;border:1px solid #334155;border-radius:16px;padding:12px}
.task.done{opacity:.7}
.task .desc{margin-top:6px;white-space:pre-wrap}
.task .meta{margin-top:6px;color:#9ca3af}
.task-actions{display:flex;gap:8px}

/* 5) Utilitários de texto --------------------------------------------- */
.muted{opacity:.6}
.text-muted{color:#d1d5db!important}
.text-body-secondary{color:#d1d5db!important}

/* 6) Estilos do Kanban (usados em /tarefas) --------------------------- */
.kanban-col{background:linear-gradient(180deg,#0b1220 0%, #0f1726 100%)!important;border:1px solid rgba(255,255,255,0.04)!important;border-radius:14px;padding:14px;min-height:220px;box-shadow:0 6px 18px rgba(2,6,23,0.6);transition:transform .18s ease, box-shadow .18s ease}
.kanban-card{background:linear-gradient(180deg,#0f1726,#0b1220)!important;border:1px solid rgba(255,255,255,0.03)!important;border-radius:12px;padding:12px;margin-bottom:12px;box-shadow:0 4px 12px rgba(2,6,23,0.5);transition:transform .14s ease, box-shadow .14s ease}
.kanban-col.drag-over{outline:2px dashed #60a5fa; outline-offset: -6px;transform:scale(1.01);}

/* card hover lift */
.kanban-card:hover{transform:translateY(-6px);box-shadow:0 10px 26px rgba(2,6,23,0.65)}

/* Task header / title inside kanban-card */
.kanban-card h6{margin:0 0 6px;font-size:14px}
.kanban-card .task-meta{font-size:12px;color:rgba(255,255,255,0.7);margin-bottom:8px}

/* Priority badges */
.task-priority{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.task-priority.crit{background:#dc2626;color:#fff}
.task-priority.high{background:#f59e0b;color:#111827}
.task-priority.med{background:#64748b;color:#fff}
.task-priority.low{background:#60a5fa;color:#04202a}
.task-priority.min{background:#e2e8f0;color:#111827;border:1px solid rgba(0,0,0,0.06)}

/* make task description clearer */
.kanban-card .desc{color:#e6eef8;background:transparent;padding:6px 8px;border-radius:8px}

/* subtle spacing between columns */
.kanban-board{display:flex;gap:18px;align-items:flex-start}

@media (max-width:992px){
	.kanban-board{flex-direction:column;gap:12px}
	.kanban-col{min-height:160px}
}

/* 7) Correções de contraste de badges --------------------------------- */
/* Garante texto legível para fundos claros (light/info) no tema escuro */
.badge.bg-light{color:#111827!important;border:1px solid rgba(0,0,0,.2)}
.badge.bg-info{color:#0f172a!important}

/* Atualização visual quando tarefa é alterada por outro usuário */
.kanban-card.updated{outline:2px solid #60a5fa; outline-offset:-2px; animation: pulse-outline 1.5s ease-out 3}
@keyframes pulse-outline{0%{box-shadow:0 0 0 0 rgba(96,165,250,.5)}100%{box-shadow:0 0 0 12px rgba(96,165,250,0)}}

/* ------------------ Messages UI tweaks ------------------ */
/* Chat list (left column) */
.list-group .chat-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;border:1px solid transparent;background:transparent;color:#e6eef8}
.list-group .chat-user:hover{background:linear-gradient(90deg, rgba(96,165,250,0.06), rgba(96,165,250,0.03));border-color:rgba(96,165,250,0.08);}
.list-group .chat-user.active{background:linear-gradient(90deg, rgba(96,165,250,0.12), rgba(96,165,250,0.06));border-color:rgba(96,165,250,0.16);}

/* Small circular avatar generated from data-username attribute */
.chat-user::before{content:attr(data-initials);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font-weight:700;font-size:13px;color:#0f172a;background:#93c5fd;border:1px solid rgba(255,255,255,0.04);margin-right:8px;text-transform:uppercase}
.chat-user::before{ /* ensure initials don't overflow */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* unread dot (already used) */
.unread-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,0.25);border:2px solid #111827}

/* Chat thread area */
#chatThread{display:flex;flex-direction:column;gap:8px;padding:12px;background:linear-gradient(180deg,#071124 0%, #06101a 100%);border-radius:8px}

/* Message bubbles: left (others) and right (mine) */
#chatThread .small{display:inline-block;max-width:72%;padding:10px 12px;border-radius:12px;color:#e6eef8;background:#072433;border:1px solid rgba(255,255,255,0.02)}
#chatThread .small.text-end{margin-left:auto;background:linear-gradient(90deg,#0ea5a4,#60a5fa);color:#06121a;border:1px solid rgba(255,255,255,0.04)}
#chatThread .small .text-muted{display:block;font-size:11px;color:rgba(255,255,255,0.55);margin-top:6px}

/* make thread scroll nicer */
#chatThread::-webkit-scrollbar{height:8px;width:8px}
#chatThread::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:6px}

/* responsive tweaks */
@media (max-width:768px){
	.chat-user::before{width:30px;height:30px;font-size:12px}
	#chatThread{height:320px}
}

/* subtle separators in chat list */
.list-group .chat-user + .chat-user{border-top:1px solid rgba(255,255,255,0.02)}

/* small helper for notification bar inside messages */
#notifBar .open-chat{margin-left:8px}