/***************************************
		Estilos globais de quadros Kanban
		***************************************/

		/*Espaços para a criação dos quadros*/
        kanban space{ 
            display: flex; 
            overflow-x: auto; 
			overflow-y: hidden;
			/*justify-content: center; Centraliza se tiver poucos, mas não gostei.*/ 
            gap: 10px; 
            padding: 20px; 
            align-items: flex-start; 
            height: 100% ;
            user-select: none; 
            background: #f4f5f7; 
        }
		kanban space::after,
		kanban space::before {
			content: '';
			display: block;
			flex-basis: 0px;
			flex-shrink: 0;
		}

		/***************************************
		Criação do cabeçalho
		***************************************/
		kanban .header {
			display: flex;
			justify-content: space-between; /* Empurra um pra cada lado */
			align-items: center;
			padding: 1rem 2rem;
			background-color: #f8f9fa;
			box-shadow: 0 2px 10px rgba(0,0,0,0.05);
		}


		/***************************************
		Caixa de pesquisa
		***************************************/
		kanban .filters{
			display: flex;
			align-items: center;
			gap: 8px;
		}

		/*Input de busca*/
		kanban .search-container {
			display: flex;
			align-items: center;
			background: #f4f4f7;
			padding: 8px 15px;
			border-radius: 20px;
			border:#EEE solid 1px;
			width: 300px;
		}
		kanban .search-container .search-icon {
			width: 18px;
			height: 18px;
			margin-right: 10px;
			color: #666;
		}
		kanban .search-container input {
			border: none;
			background: transparent;
			outline: none;
			width: 100%;
			font-size: 14px;
		}

		/*Botões auxiliares de pesquisa*/
		kanban .aux {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 26px; 
			height: 26px;
			background: #f4f4f7;
			border: 1px solid #e1e4e8;
			border-radius: 50%;
			cursor: pointer;
			color: #666;
			transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
			padding: 0;
		}
		kanban .aux svg {
			width: 14px;
			height: 14px;
		}
		kanban .aux:hover {
			background: #ebebed;
			color: #333;
		}
		kanban .aux.active {
			background: #007bff; /* Cor de destaque */
			color: #fff;        /* Ícone branco para contraste */
			border-color: #0056b3;
			box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
			transform: scale(1.05); /* Leve pulo para indicar ativação */
		}
		

		/***************************************
		Container onde serão carregadas as colunas e cards
		***************************************/
        kanban column container { 
            padding: 10px; 
            overflow-y: auto; 
            flex-grow: 1; 
            min-height: 50px; 
        }

		
			
        kanban column { 
            background: #ebedf0; 
            min-width: 300px; 
            max-width: 300px; 
            border-radius: 8px; 
            display: flex; 
            flex-direction: column; 
            max-height: calc(100% - 54px); 
            border-top: 5px solid var(--col-color, #ccc); 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
            overflow:hidden;
        }
        kanban column.wip-limit { 
            background: #ffdada; 
            border-top-color: #ff4d4d; 
        }
        kanban column header { 
            padding: 12px; 
            font-weight: bold; 
            display: flex; 
            justify-content: space-between; 
        }
        kanban column header span {
            display: flex;
            align-items: center; 
            gap: 8px;           
        }
        kanban column header span section{
            background: #666;
            color: #FFF;
            font-size: 8px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            border-radius: 50%;
        }



		
       
 
	
    	kanban card, .ghost-card{ 
			background: white; 
			border-radius: 5px; 
			padding: 12px;
			margin-bottom: 8px; 
			box-shadow: 0 1px 3px rgba(0,0,0,0.12); 
			cursor: pointer; 
			display: block; 
			position: relative; touch-action: none; 
			transition: transform 0.1s; border-left: 4px solid transparent; 
			transition: transform 0.2s, box-shadow 0.2s;
		}
		kanban card.overdue { 
			border:solid 1px #dfa8a8; 
		}




		kanban container card .summary {
			font-size: 14px; 
			font-weight: 600; 
			color: #333; 
			margin-bottom: 5px;
			display: flex;
			align-items: center; 
			gap: 5px; 
		}

		kanban container card .summary .dot {
			width: 8px; 
			height: 8px;
			background: #CCC;
			border-radius: 50%;
			flex-shrink: 0; 
		}

		/* Estilo do Card Arquivado (Dica anterior) */
		kanban container card.strikethrough .summary {
			text-decoration: line-through;
			opacity: 0.5;
		}

	
		kanban card .timing {
			margin-top: 8px;
			font-size: 11px;
			color: #666;
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

		kanban card .timing .timestamp, 
		kanban card .timing .deadline {
			display: flex;
			align-items: center;
			width: 100%;
		}

		kanban card .timing div svg {
			width: 14px;
			height: 14px;
			margin-right: 6px; 
			flex-shrink: 0;    
		}
		



		kanban card .details{
			margin-top:6px;
			margin-bottom:6px;
			font-size:12px;
			color:#333;
			width:100%;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp:3;     
			-webkit-box-orient: vertical;

		}

		



		/***************************************
		Estilo do rodapé do card
		***************************************/
		kanban card footer {
			display: flex !important;
			flex-direction: row !important;
			justify-content: space-between !important;
			align-items: center !important;
			margin-top: 4px;
			border-top: 1px solid #eee;
			padding-top: 10px;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden; /* Garante que nada vaze do card */
		}

		/* Tags*/
		kanban card footer .tags {
			font-size: 11px;
			color: #888;
			white-space: nowrap;      
			overflow: hidden;         
			text-overflow: ellipsis;  
			flex-grow: 1;             
			margin-right: 10px;      
			min-width: 0;             
		}

		/* Grupo de botões */
		kanban card footer .buttons {
			display: flex !important;
			flex-direction: row !important;
			align-items: center !important;
			gap: 6px;                /* Espaçamento entre os ícones */
			flex-shrink: 0;           /* Bloqueia o encolhimento: os botões nunca somem */
		}

		/* Icones */
		kanban card footer .actions {
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			line-height: 0;
		}

		kanban card footer .actions svg {
			width: 14px;
			height: 14px;
		}






		/***************************************
		Efeitos personalizados dos botões auxiliares
		***************************************/

		/*Botão Arquivar*/
		kanban .btn-archived:hover {
			background: #ebebed;
			color: #333;
		}
		kanban .btn-archived.active {
			background: #007bff; 
			color: #fff;        
			border-color: #0056b3;
			box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
			transform: scale(1.05); /* Leve pulo para indicar ativação */
		}

		/*Botão notificações*/
		.notify.active .bell-svg {
			fill: #FFD700;   
			stroke: #DAA520;  
			filter: drop-shadow(0 0 2px rgba(218, 165, 32, 0.4));
		}
		.bell-svg {
			transition: all 0.3s ease;
		}

		/* Hover individual por tipo de ação */
		kanban card footer .actions.archive:hover { color: #3498db; } /* Laranja ao arquivar */
		kanban card footer .actions.participants:hover { color: #50db34; }    /* Azul ao editar */
		kanban card footer .actions.remove:hover { color: #e74c3c; }  /* Vermelho ao deletar */







		/***************************************
		Estilo do menu dropdown
		***************************************/
		kanban card .dropdown {
			position: fixed;
			width: 145px; /* Se precisar altere direto no elemento*/
			max-height: 250px; /* Use max-height em vez de height fixo */
			background: #fff;
			border: 1px solid #ddd;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.15);
			z-index: 10000;
			display: none;
			flex-direction: column; /* Essencial para o search ficar fixo no topo */
			overflow: hidden;
		}

		/***Tipo participants */
		kanban card .dropdown[type="participants"]{
			 padding:8px;
        width:260px;
		}

		/* Container que recebe os participantes */
		kanban card .dropdown .container {
			margin-top:5px;
			display: block; 
			overflow-y: auto !important; 
			overflow-x: hidden;
			width: 100%;
		}

		kanban card .dropdown .option {
			position: relative;
			padding: 8px 12px;
			font-size: 13px;
			cursor: pointer;
			display: flex; /* Flex para alinhar foto e texto */
			align-items: center; /* Centraliza verticalmente sem gambiarra */
			transition: background 0.2s;
			color: #333;
			flex-shrink: 0;
		}

		kanban card .dropdown .option:hover {
			background: #f5f5f5;
		}

		kanban card .dropdown .option img {
			border-radius: 50%;
			width: 24px;
			height: 24px;
			margin-right: 10px; /* Espaço entre foto e nome */
			flex-shrink: 0; /* Impede a imagem de amassar */
		}

		kanban card .dropdown .option .check-icon {
			position: absolute; 
			bottom:3px; 
			left: 26px; 
			background: #2ecc71; 
			border-radius: 50%; 
			width: 15px; 
			height: 15px; 
			display: flex; 
			align-items: center; 
			justify-content: center; 
			border: 2px solid #fff;
		}

		kanban card .dropdown .option span {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis; /* Corta nome muito grande com ... */
		}



		


	




		kanban card.dragging { 
			opacity: 0.5;
		}
		kanban card.floating { 
			position: fixed; 
			pointer-events: none; 
			z-index: 1000; 
			width: 280px; 
			transform: rotate(3deg); 
			opacity: 0.9; 
			box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
		}

	 	kanban card.dragging-original, 
		kanban column.dragging-original {
			visibility: hidden !important;
			display: none;
			opacity: 0 !important;
			pointer-events: none;

		}

		/* Ghost: O card que voa */
		.ghost-card {
			position: fixed !important;
			pointer-events: none !important;
			z-index: 99999 !important;
			margin: 0 !important; /* Remove margens que podem deslocar o ghost */
			box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
			transition: none !important; /* CRÍTICO: remove lag no movimento */
		}

		/* Placeholder: O rastro na coluna */
		card.placeholder, 
		column.placeholder {
			opacity: 0.3 !important;
			background: #ccc !important;
			border: 1px solid #666 !important;
			box-shadow: none !important;
			pointer-events: none !important;
		}

		/*Cards ocultos*/
		card.invisible{
			display:none;
		}