/* ================================================================
   Chamados TI — Kanban Board (estilo Trello)
   Paleta base CCB: primary #2D9CDB | dark #1A7CC5 | darker #1570C4
   ================================================================ */

:root {
    --kb-bg:            #eef2f7;
    --kb-col-bg:        #f1f3f8;
    --kb-col-header:    #ffffff;
    --kb-card-bg:       #ffffff;
    --kb-border:        #e3e6f0;
    --kb-text:          #3a3b45;
    --kb-text-muted:    #858796;
    --kb-shadow:        0 1px 2px rgba(9, 30, 66, 0.10), 0 0 1px rgba(9, 30, 66, 0.12);
    --kb-shadow-hover:  0 6px 14px rgba(9, 30, 66, 0.18);
    --kb-radius:        12px;

    /* Cores por coluna / status */
    --kb-open:      #f6a609;
    --kb-progress:  #2D9CDB;
    --kb-done:      #34b37e;

    /* Cores por prioridade */
    --kb-prio-urgente: #e74a3b;
    --kb-prio-alta:    #f6a609;
    --kb-prio-media:   #2D9CDB;
    --kb-prio-baixa:   #34b37e;
}

/* ---------- Toolbar do módulo ---------- */
.kanban-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.kanban-toolbar__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.kanban-toolbar__title .kb-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #2D9CDB 0%, #1570C4 100%);
    box-shadow: 0 4px 12px rgba(45, 156, 219, 0.35);
}

.kanban-toolbar__title h4 {
    margin: 0;
    font-weight: 800;
    color: var(--kb-text);
    letter-spacing: -0.3px;
}

.kanban-toolbar__title small {
    color: var(--kb-text-muted);
    font-weight: 600;
}

.kanban-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.kb-btn:active { transform: translateY(1px); }

.kb-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #2D9CDB 0%, #1A7CC5 100%);
    box-shadow: 0 4px 12px rgba(45, 156, 219, 0.30);
}
.kb-btn--primary:hover { box-shadow: 0 6px 16px rgba(45, 156, 219, 0.40); color: #fff; }

.kb-btn--ghost {
    color: var(--kb-text);
    background: #fff;
    border: 1px solid var(--kb-border);
    box-shadow: var(--kb-shadow);
}
.kb-btn--ghost:hover { background: #f8f9fc; color: var(--kb-text); }

.kb-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.kb-mode-badge--admin { background: rgba(52, 179, 126, 0.15); color: #1f8a5c; }
.kb-mode-badge--view  { background: rgba(45, 156, 219, 0.15); color: #1A7CC5; }

/* ---------- Board ---------- */
.kanban-board-modern {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--kb-bg);
    border-radius: var(--kb-radius);
    overflow-x: auto;
    min-height: 60vh;
}

/* ---------- Coluna ---------- */
.kb-column {
    flex: 1 1 0;
    min-width: 300px;
    background: var(--kb-col-bg);
    border-radius: var(--kb-radius);
    display: flex;
    flex-direction: column;
    max-height: 74vh;
    box-shadow: var(--kb-shadow);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.kb-column__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-top-left-radius: var(--kb-radius);
    border-top-right-radius: var(--kb-radius);
    border-bottom: 2px solid transparent;
    position: sticky;
    top: 0;
    background: var(--kb-col-header);
    z-index: 2;
}

.kb-column__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kb-column__name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--kb-text);
    letter-spacing: 0.2px;
    margin: 0;
    text-transform: uppercase;
}
.kb-column__name i {
    margin-right: 0.45rem;
    opacity: 0.65;
}

.kb-column__count {
    margin-left: auto;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eceef3;
    color: var(--kb-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kb-column[data-col="aberto"]      .kb-column__header { border-bottom-color: var(--kb-open); }
.kb-column[data-col="aberto"]      .kb-column__dot    { background: var(--kb-open); }
.kb-column[data-col="em_andamento"] .kb-column__header { border-bottom-color: var(--kb-progress); }
.kb-column[data-col="em_andamento"] .kb-column__dot    { background: var(--kb-progress); }
.kb-column[data-col="resolvido"]   .kb-column__header { border-bottom-color: var(--kb-done); }
.kb-column[data-col="resolvido"]   .kb-column__dot    { background: var(--kb-done); }

/* Lista de cards (área de drop) */
.kb-column__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 120px;
    transition: background 0.15s ease;
}

.kb-column__body.drag-over {
    background: rgba(45, 156, 219, 0.08);
    box-shadow: inset 0 0 0 2px rgba(45, 156, 219, 0.35);
    border-radius: 0 0 var(--kb-radius) var(--kb-radius);
}

/* Scrollbar discreta */
.kb-column__body::-webkit-scrollbar { width: 8px; }
.kb-column__body::-webkit-scrollbar-thumb {
    background: #d3d8e4;
    border-radius: 8px;
}
.kb-column__body::-webkit-scrollbar-track { background: transparent; }

.kb-empty {
    text-align: center;
    color: var(--kb-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 2rem 0.5rem;
    border: 2px dashed #d5dae6;
    border-radius: 10px;
}
.kb-empty i { display: block; font-size: 1.4rem; margin-bottom: 0.4rem; opacity: 0.6; }

/* ---------- Card ---------- */
.kb-card {
    position: relative;
    background: var(--kb-card-bg);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.7rem;
    box-shadow: var(--kb-shadow);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
    border: 1px solid transparent;
}
.kb-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--kb-shadow-hover);
    border-color: rgba(45, 156, 219, 0.25);
}
.kb-card[draggable="true"] { cursor: grab; }
.kb-card.dragging {
    opacity: 0.55;
    transform: rotate(2deg) scale(1.02);
    box-shadow: var(--kb-shadow-hover);
    cursor: grabbing;
}

/* Label de prioridade (barra estilo Trello) */
.kb-card__label {
    display: inline-block;
    height: 8px;
    width: 44px;
    border-radius: 4px;
    margin-bottom: 0.55rem;
}
.kb-label--urgente { background: var(--kb-prio-urgente); }
.kb-label--alta    { background: var(--kb-prio-alta); }
.kb-label--media   { background: var(--kb-prio-media); }
.kb-label--baixa   { background: var(--kb-prio-baixa); }

.kb-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.kb-card__num {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--kb-text-muted);
    letter-spacing: 0.4px;
}

.kb-prio-chip {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 999px;
}
.kb-prio-chip--urgente { background: rgba(231, 74, 59, 0.14);  color: #c0392b; }
.kb-prio-chip--alta    { background: rgba(246, 166, 9, 0.16);  color: #b9770a; }
.kb-prio-chip--media   { background: rgba(45, 156, 219, 0.14); color: #1A7CC5; }
.kb-prio-chip--baixa   { background: rgba(52, 179, 126, 0.16); color: #1f8a5c; }

.kb-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--kb-text);
    line-height: 1.3;
    margin: 0 0 0.35rem;
}

.kb-card__desc {
    font-size: 0.8rem;
    color: var(--kb-text-muted);
    line-height: 1.4;
    margin: 0 0 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}
.kb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #5a5c69;
    background: #eef1f6;
    border-radius: 6px;
    padding: 2px 7px;
    text-transform: capitalize;
}
.kb-tag--done   { background: rgba(52, 179, 126, 0.15);  color: #1f8a5c; }
.kb-tag--warn   { background: rgba(246, 166, 9, 0.16);   color: #b9770a; }

.kb-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.55rem;
    border-top: 1px solid #f0f1f5;
}

.kb-avatar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.kb-avatar__circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2D9CDB 0%, #1570C4 100%);
}
.kb-avatar__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.kb-card__time {
    font-size: 0.7rem;
    color: var(--kb-text-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ---------- Aviso modo visualização ---------- */
.kb-view-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(45, 156, 219, 0.08);
    border: 1px solid rgba(45, 156, 219, 0.2);
    color: #1A7CC5;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.83rem;
    margin-bottom: 1rem;
}
.kb-view-alert i { font-size: 1rem; }

/* ---------- Skeleton loading ---------- */
.kb-skeleton {
    height: 96px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f0f1f5 25%, #e6e9f0 37%, #f0f1f5 63%);
    background-size: 400% 100%;
    animation: kb-shimmer 1.4s ease infinite;
}
@keyframes kb-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 992px) {
    .kanban-board-modern {
        flex-direction: column;
    }
    .kb-column {
        max-width: 100%;
        width: 100%;
        max-height: none;
    }
}

/* ================================================================
   Extensões compartilhadas — Solicitações entre Setores
   ================================================================ */

/* Alternador de caixa (Recebidos / Enviados / Todos) */
.kb-caixa-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    padding: 3px;
    box-shadow: var(--kb-shadow);
}
.kb-caixa-toggle button {
    border: none;
    background: transparent;
    color: var(--kb-text-muted);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.kb-caixa-toggle button.active {
    background: linear-gradient(135deg, #2D9CDB 0%, #1A7CC5 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(45, 156, 219, 0.3);
}

/* Rota entre setores no card */
.kb-route {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5a5c69;
    margin-bottom: 0.5rem;
}
.kb-route .kb-setor {
    background: #eef1f6;
    border-radius: 6px;
    padding: 2px 7px;
}
.kb-route .kb-arrow { color: var(--kb-text-muted); }

/* Badge de SLA */
.kb-sla {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}
.kb-sla--ok    { background: rgba(52, 179, 126, 0.15); color: #1f8a5c; }
.kb-sla--atraso{ background: rgba(231, 74, 59, 0.14);  color: #c0392b; }

/* Coluna extra: aguardando */
.kb-column[data-col="aguardando"] .kb-column__header { border-bottom-color: #9b59b6; }
.kb-column[data-col="aguardando"] .kb-column__dot    { background: #9b59b6; }

/* ---- Thread de comentários (modal de detalhe) ---- */
.kb-thread {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.kb-comment {
    background: #f7f8fb;
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}
.kb-comment__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.kb-comment__author {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--kb-text);
}
.kb-comment__time { font-size: 0.7rem; color: var(--kb-text-muted); }
.kb-comment__body { font-size: 0.85rem; color: #4a4b57; white-space: pre-wrap; }
.kb-comment--mine { background: rgba(45, 156, 219, 0.07); border-color: rgba(45, 156, 219, 0.25); }

/* Timeline de status no detalhe */
.kb-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.kb-detail-meta .item {
    background: #f7f8fb;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.kb-detail-meta .item .lbl {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--kb-text-muted);
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.kb-detail-meta .item .val { font-size: 0.85rem; font-weight: 600; color: var(--kb-text); }