/* Largura padrão das colunas responsaveis (modo compacto) */
.coluna-responsavel {
    transition: width 0.0s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* width: 100px; */
    width: 100%;
    overflow: hidden; /* Oculta o conteúdo que excede */
    position: relative; /* Para posicionamento de sub-elementos */
}

/* Largura para o modo expandido (no hover/foco) */
.coluna-responsavel.coluna-expandida {
    /* width: 250px; */
    width: 100%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra mais destacada */
    z-index: 10; /* Para aparecer por cima das outras */
}

/* Estilo para a coluna do usuário logado (sempre expandida e destacada) */
.coluna-responsavel.coluna-logado {
    /* width: 250px; */
    width: 100%;
    border-color: #4f46e5; /* Cor da borda para destaque */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra destacada */
    z-index: 10; /* Para aparecer por cima das outras */
}

/* ======================================================= */
/* Regras para DESKTOP e TELAS MAIORES (a partir de md ou 768px) */
/* ======================================================= */
@media (min-width: 768px) {
    /* Largura padrão compacta em desktop */
    .coluna-responsavel {
        width: 100px;
    }

    /* Largura expandida em desktop */
    .coluna-responsavel.coluna-expandida,
    .coluna-responsavel.coluna-logado {
        width: 250px;
    }
}

#chamado-detalhes-modal{
    overflow: auto;
}

.chamado-acoes{
    justify-content: space-between;
}
/* Ajusta os detalhes do card para aparecerem no modo expandido */
.coluna-responsavel .chamado-detalhes,
.coluna-responsavel .chamado-acoes {
    display: none; /* Oculto por padrão no modo compacto */
}

.coluna-responsavel.coluna-expandida .chamado-detalhes,
.coluna-responsavel.coluna-logado .chamado-detalhes { /* Visível na coluna logada */
    display: block; /* Visível quando expandida */
}
.coluna-responsavel.coluna-expandida .chamado-acoes,
.coluna-responsavel.coluna-logado .chamado-acoes {
    display: flex;
}

#painel-chamados .coluna-compacta span.nome-expandido{
    display: none;
}
#painel-chamados .coluna-expandida span.nome-compacto{
    display: none;
}

.coluna-compacta .span-titulo{
    display: none;
}
.chamado-card .div-titulo{
    overflow: hidden;
}
.chamado-card .tem-notas-icon {
    width: 30px;
}

.chamado-card.is-resolved span.urgencia::after {
    content: '✓';
}
.chamado-card:not(.is-resolved) span.urgencia::after {
    content: 'U:' attr(data-urgencia);
}

/* Cores dos Cartões de Chamado por Urgência */
.chamado-card.urgency-critical { /* Urgencia 9-10 */
    background-color: #fef2f2; /* Tailwind red-50 */
    border-color: #ef4444;    /* Tailwind red-500 */
}

.chamado-card.urgency-high { /* Urgencia 6-8 */
    background-color: #fff7ed; /* Tailwind orange-50 */
    border-color: #f97316;    /* Tailwind orange-500 */
}

.chamado-card.urgency-medium { /* Urgencia 3-5 */
    background-color: #fefce8; /* Tailwind yellow-50 */
    border-color: #eab308;    /* Tailwind yellow-500 */
}

.chamado-card.urgency-low { /* Urgencia 0-2 */
    background-color: #eff6ff; /* Tailwind blue-50 */
    border-color: #3b82f6;    /* Tailwind blue-500 */
}

/* Cores para Chamados RESOLVIDOS (Com !important para garantir prioridade) */
.chamado-card.is-resolved {
    background-color: #ecfdf5 !important; /* Tailwind emerald-50 ou green-50 */
    border-color: #10b981 !important;    /* Tailwind emerald-500 ou green-500 */
    opacity: 0.8; /* Levemente mais translúcido */
    /* Pode adicionar um riscado ou outros efeitos visuais */
}