/* ─────────────────────────────────────────────────────────────────────────────
   Variáveis de tema — altere aqui para mudar as cores do dashboard inteiro
───────────────────────────────────────────────────────────────────────────── */
:root {
    --color-purple: #7c3aed;
    --color-teal:   #0d9488;
    --color-orange: #f97316;
    --bs-body-bg:   #f1f5f9;
    --card-radius:  .75rem;
    --card-shadow:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

body { background-color: var(--bs-body-bg); }

/* ─── Login ──────────────────────────────────────────────────────────────── */
.login-bg {
    background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
}
.login-card {
    width: 380px;
    border: none;
    border-radius: var(--card-radius);
}
.login-icon { opacity: .9; }

/* ─── KPI cards ──────────────────────────────────────────────────────────── */
.kpi-card {
    border-top: 4px solid transparent;
    border-radius: var(--card-radius);
    transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }

.kpi-card.kpi-primary  { border-color: var(--bs-primary); }
.kpi-card.kpi-warning  { border-color: var(--bs-warning); }
.kpi-card.kpi-success  { border-color: var(--bs-success); }
.kpi-card.kpi-info     { border-color: var(--bs-info); }
.kpi-card.kpi-danger   { border-color: var(--bs-danger); }
.kpi-card.kpi-teal     { border-color: var(--color-teal); }
.kpi-card.kpi-purple   { border-color: var(--color-purple); }
.kpi-card.kpi-orange   { border-color: var(--color-orange); }

.kpi-icon { opacity: .8; }
.kpi-card.kpi-primary  .kpi-icon { color: var(--bs-primary)  !important; }
.kpi-card.kpi-warning  .kpi-icon { color: var(--bs-warning)  !important; }
.kpi-card.kpi-success  .kpi-icon { color: var(--bs-success)  !important; }
.kpi-card.kpi-info     .kpi-icon { color: var(--bs-info)     !important; }
.kpi-card.kpi-danger   .kpi-icon { color: var(--bs-danger)   !important; }
.kpi-card.kpi-teal     .kpi-icon { color: var(--color-teal)  !important; }
.kpi-card.kpi-purple   .kpi-icon { color: var(--color-purple)!important; }
.kpi-card.kpi-orange   .kpi-icon { color: var(--color-orange)!important; }

.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kpi-label { font-size: .75rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }

/* ─── Kanban board ───────────────────────────────────────────────────────── */
.kanban-board {
    align-items: flex-start !important;
    min-height: calc(100vh - 220px);
    overflow-x: auto;
    padding-bottom: 1.5rem;
}

.col-kanban {
    min-width: 280px;
    max-width: 320px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.kanban-col {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}

.kanban-col.drag-over { outline: 2px dashed var(--bs-primary); outline-offset: 2px; }

.kanban-col-header {
    padding: .75rem 1rem;
    font-weight: 600;
    font-size: .875rem;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

.kanban-cards {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-height: calc(100vh - 265px);
    overflow-y: auto;
    min-height: 60px;
}

/* Scrollbar fina nas colunas */
.kanban-cards::-webkit-scrollbar { width: 4px; }
.kanban-cards::-webkit-scrollbar-track { background: transparent; }
.kanban-cards::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.kanban-empty { color: #94a3b8; font-size: .8rem; text-align: center; padding: 1.5rem 0; }

/* Cards */
.kanban-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: .75rem;
    cursor: grab;
    transition: box-shadow .15s, transform .1s;
}
.kanban-card:hover  { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; cursor: grabbing; }
.kanban-card--overdue { border-left: 3px solid #dc3545; }

.kanban-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .4rem;
}
.kanban-card__title { font-weight: 600; font-size: .875rem; line-height: 1.35; }
.kanban-card__date  { font-size: .75rem; margin-top: .35rem; }
.kanban-card__actions { display: flex; gap: .375rem; flex-wrap: wrap; }

.btn-icon {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 .25rem;
    font-size: .85rem;
    transition: color .15s;
}
.btn-icon:hover { color: var(--bs-primary); }

/* ─── Histórico ──────────────────────────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: .5rem; max-height: 300px; overflow-y: auto; }
.history-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: .6rem .75rem;
}

/* ─── Botões extras ──────────────────────────────────────────────────────── */
.btn-xs { padding: .2rem .55rem; font-size: .78rem; }

.btn-purple { background-color: var(--color-purple); color: #fff; border: none; }
.btn-purple:hover { background-color: #6d28d9; color: #fff; }
.text-purple { color: var(--color-purple) !important; }
.bg-purple   { background-color: var(--color-purple) !important; }

/* ─── Cores adicionais de badge ──────────────────────────────────────────── */
.badge.bg-purple { background-color: var(--color-purple) !important; }

/* ─── Utilitários gerais ─────────────────────────────────────────────────── */
.card { border: none; border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.card-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: .875rem 1.25rem; }

/* Tabela mais limpa */
.table > :not(caption) > * > * { padding: .65rem .875rem; }

/* Scrollbar fina para o kanban */
.kanban-board::-webkit-scrollbar { height: 6px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ─── KPI cards clicáveis ────────────────────────────────────────────────── */
.kpi-clickable { cursor: pointer; }
.kpi-clickable:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.13) !important; }
.kpi-card.kpi-active { outline: 3px solid currentColor; outline-offset: 2px; transform: translateY(-3px); }
.kpi-card.kpi-primary.kpi-active  { outline-color: var(--bs-primary); }
.kpi-card.kpi-warning.kpi-active  { outline-color: var(--bs-warning); }
.kpi-card.kpi-success.kpi-active  { outline-color: var(--bs-success); }
.kpi-card.kpi-info.kpi-active     { outline-color: var(--bs-info); }
.kpi-card.kpi-danger.kpi-active   { outline-color: var(--bs-danger); }
.kpi-card.kpi-teal.kpi-active     { outline-color: var(--color-teal); }
.kpi-card.kpi-purple.kpi-active   { outline-color: var(--color-purple); }

/* ─── Paginação da equipe ────────────────────────────────────────────────── */
#teamPager { border-top: 1px solid #e2e8f0; background: #f8fafc; border-radius: 0 0 var(--card-radius) var(--card-radius); }

/* ─── Envolvidos no modal de tarefa ──────────────────────────────────────── */
#envolvidosList { max-height: 260px; overflow-y: auto; }
.envolvido-row .env-papel { flex-shrink: 0; }

/* Autocomplete de usuários */
.env-dropdown {
    top: 100%;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    border-radius: .375rem;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}
.env-dropdown .env-dropdown-item {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.env-dropdown .env-dropdown-item:hover { background: var(--bs-primary); color: #fff; }

/* ─── Transfer autocomplete dropdown ────────────────────────────────────── */
.transfer-dropdown {
    top: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    overflow: hidden;
}
.transfer-dropdown .list-group-item { border-radius: 0; border-left: 0; border-right: 0; }
.transfer-dropdown .list-group-item-action:not(.disabled):hover {
    background: var(--bs-primary);
    color: #fff;
}
.transfer-dropdown .list-group-item.disabled {
    background: #f8f9fa;
    cursor: default;
    pointer-events: none;
}

/* ─── Setup Wizard de E-mail ─────────────────────────────────────────────── */
#wizardSteps { justify-content: center; }

.setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.setup-step span {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    transition: background .25s, color .25s;
}
.setup-step small { font-size: .68rem; color: #6c757d; }
.setup-step.active span  { background: #0d6efd; color: #fff; }
.setup-step.active small { color: #0d6efd; font-weight: 600; }
.setup-step.done   span  { background: #198754; color: #fff; }
.setup-step.done   small { color: #198754; }

.setup-step-line {
    flex: 1; max-width: 80px; height: 2px; background: #dee2e6;
    align-self: center; margin-bottom: 18px;
}

/* ─── Módulo de E-mail ───────────────────────────────────────────────────── */
.email-row {
    padding: .6rem .75rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .12s;
}
.email-row:last-child  { border-bottom: none; }
.email-row:hover       { background: #f8f9ff; }
.email-row.active      { background: #e9f0ff; border-left: 3px solid #0d6efd; }
.email-row.em-unread   { background: #fffbf0; }
.email-row.em-tratado  { border-left: 3px solid #198754; opacity: .85; }
.email-row .em-from    { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.email-row .em-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-attachment {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: .2rem .5rem;
    font-size: .78rem;
    gap: .25rem;
}
.em-body { overflow: auto; }

/* ─── Card de Videochamada no chat interno ───────────────────────────────── */
.video-call-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 220px;
}
.video-call-card__icon {
    font-size: 1.4rem;
    color: #16a34a;
    flex-shrink: 0;
}
.video-call-card__body { flex: 1; min-width: 0; }
.video-call-card__title { font-weight: 700; font-size: .85rem; color: #15803d; }
.video-call-card__sub   { font-size: .72rem; color: #4ade80; }

/* ─── Visitante no chat interno ─────────────────────────────────────────── */
.chat-guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .62rem;
    font-weight: 600;
    color: #fff;
    background: #f59e0b;
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}
.chat-msg__bubble--guest {
    border-left: 3px solid #f59e0b !important;
    background: #fffbeb !important;
    color: #1e293b !important;
}
.chat-msg--visitor .chat-msg__name { color: #b45309; }

/* ─── Links Públicos no modal ────────────────────────────────────────────── */
.link-pub-row { border-radius: 8px; }
.link-pub-row:hover { background: #f8fafc; }

/* ─── Flatpickr — botão OK personalizado ─────────────────────────────────── */
.flatpickr-ok {
    display: block;
    width: calc(100% - 16px);
    margin: 4px 8px 8px;
    padding: 5px 0;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: .375rem;
    font-size: .85rem;
    cursor: pointer;
    font-weight: 500;
}
.flatpickr-ok:hover { background: #0b5ed7; }

/* ─── Avatares ────────────────────────────────────────────────────────────── */
.av {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #fff;
    vertical-align: middle;
    overflow: hidden;
}
.av-xs  { width: 24px; height: 24px; font-size: .6rem; }
.av-sm  { width: 32px; height: 32px; font-size: .72rem; }
.av-md  { width: 40px; height: 40px; font-size: .85rem; }
.av-lg  { width: 56px; height: 56px; font-size: 1.1rem; }
.av-text { line-height: 1; user-select: none; }

/* Grupo de avatares empilhados (kanban cards) */
.av-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.av-group .av       { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.av-group .av:first-child { margin-left: 0; }
.av-more {
    background: #64748b;
    font-size: .6rem;
    cursor: default;
}

/* ─── Chat da Tarefa ──────────────────────────────────────────────────────── */
.chat-modal-content { height: 580px; display: flex; flex-direction: column; }
.chat-modal-content .modal-body { min-height: 0; }

#chatMessages { flex: 1; }

/* Mensagem com avatar lado a lado */
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
}
.chat-msg--mine  { flex-direction: row-reverse; }
.chat-msg--other { flex-direction: row; }

/* Conteúdo textual da mensagem */
.chat-msg__body {
    display: flex;
    flex-direction: column;
    max-width: 72%;
}
.chat-msg--mine  .chat-msg__body { align-items: flex-end; }
.chat-msg--other .chat-msg__body { align-items: flex-start; }

.chat-msg__name {
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: .2rem;
    padding-left: .3rem;
}
.chat-msg__bubble {
    padding: .5rem .85rem;
    border-radius: 1.1rem;
    font-size: .875rem;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
}
.chat-msg--mine  .chat-msg__bubble {
    background: var(--bs-primary);
    color: #fff;
    border-bottom-right-radius: .25rem;
}
.chat-msg--other .chat-msg__bubble {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: .25rem;
}
.chat-msg__time { font-size: .65rem; color: #94a3b8; margin-top: .25rem; padding: 0 .3rem; }

/* ─── Conversas (chat overview) ──────────────────────────────────────────────*/
/* Remove o padding do container pai para a página de conversas */
main:has(.chat-ov-wrap) { padding: 0 !important; }

.chat-ov-wrap {
    display: flex;
    height: calc(100vh - 58px);   /* viewport menos navbar */
    overflow: hidden;
    background: #fff;
}

.chat-ov-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    background: #fff;
    transition: transform .25s;
}
.chat-ov-topbar { background: #f8fafc; }

.chat-ov-conv-item {
    padding: .7rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.chat-ov-conv-item:hover  { background: #f8fafc; }
.chat-ov-conv-item.active { background: #eff6ff; border-left: 3px solid var(--bs-primary); }
.chat-ov-conv-item .conv-title   { font-weight: 600; font-size: .875rem; max-width: 200px; }
.chat-ov-conv-item .conv-preview { font-size: .78rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.chat-ov-conv-item .conv-time    { font-size: .7rem; color: #94a3b8; white-space: nowrap; }

.chat-ov-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-ov-panel-header { background: #f8fafc; min-height: 52px; }

/* Mobile: sobrepõe o sidebar */
@media (max-width: 991px) {
    .chat-ov-sidebar { position: absolute; z-index: 200; height: 100%; }
    .chat-ov-sidebar--hidden { transform: translateX(-110%); }
    .chat-ov-main { width: 100%; }
}

/* ─── Agenda / FullCalendar ──────────────────────────────────────────────── */
#agCalendar .fc-event { cursor: pointer; font-size: .8rem; }
#agCalendar .fc-daygrid-event { border-radius: .35rem; }
#agCalendar .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; }
#agCalendar .fc-button { border-radius: .375rem !important; font-size: .8rem !important; }
#agCalendar .fc-today-button:not(:disabled) { background: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
#agCalendar .fc-col-header-cell-cushion { font-weight: 600; color: #475569; text-decoration: none; }
#agCalendar .fc-daygrid-day-number { text-decoration: none; color: #1e293b; }
#agCalendar .fc-day-today { background-color: #eff6ff !important; }

/* ─── Hierarquia modal tarefa ────────────────────────────────────────────── */
#taskProjetoSection label, #taskTarefaSection label { font-size: .875rem; }

/* ─── Chat: mensagem de sistema (transferência, etc.) ───────────────────── */
.chat-msg-system { display: flex; flex-direction: column; align-items: center;
                   gap: .15rem; margin: .6rem 0; }
.chat-msg-system__text { background: #f1f5f9; color: #475569; font-size: .75rem;
                          padding: .2rem .9rem; border-radius: 20px; text-align: center; }
.chat-msg-system__time { font-size: .65rem; color: #94a3b8; }

/* ─── Chat: mídia e anexos ───────────────────────────────────────────────── */
.chat-attach-media { display: inline-block; max-width: 280px; }
.chat-attach-name  { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; max-width: 280px; margin-top: .25rem; }

.chat-img-preview  { max-width: 260px; max-height: 220px; border-radius: 10px; display: block;
                     cursor: zoom-in; object-fit: cover;
                     border: 1px solid rgba(0,0,0,.08); transition: opacity .15s; }
.chat-img-preview:hover { opacity: .85; }

.chat-video-preview { max-width: 280px; border-radius: 10px; display: block;
                      border: 1px solid rgba(0,0,0,.08); }

.chat-attach-audio  { display: inline-block; max-width: 280px; }
.chat-audio-preview { max-width: 260px; display: block; }

.chat-file-link { background: rgba(0,0,0,.055); border-radius: 10px; padding: .5rem .75rem;
                  max-width: 260px; color: inherit; transition: background .15s; }
.chat-file-link:hover { background: rgba(0,0,0,.1); color: inherit; }

/* Bolha de arquivo: sem fundo/sombra, para que a mídia apareça limpa */
.chat-msg__bubble--file { padding: .25rem !important; background: transparent !important;
                           box-shadow: none !important; border: none !important; }