/**

 * Estilos específicos para o Kanban

 */



/* Layout de altura fixa para a página Kanban */

body.page-template-page-kanban,

html.page-template-page-kanban {

    height: 100vh;

    overflow: hidden;

    margin: 0;

    padding: 0;

}



/* Para WordPress - detectar automaticamente a página kanban */

body[class*="kanban"],

body.page-template-kanban-view,

body.kanban-page-layout {

    height: 100vh;

    overflow: hidden;

    margin: 0;

    padding: 0;

}



html.kanban-page-layout {

    height: 100vh;

    overflow: hidden;

}



.talaa2-kanban-board {

    height: 100vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.talaa2-kanban-board > .w-full {

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 1rem;

    gap: 1rem;

}



/* Header do Kanban com altura fixa */

.kanban-header {

    flex-shrink: 0;

    margin-bottom: 0;

}



/* Área principal do Kanban */

.kanban-main-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    gap: 1rem;

}



/* Container do Kanban com altura calculada */

#kanban-container {

    flex: 1;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none; /* Firefox */

    -ms-overflow-style: none; /* IE/Edge */

    min-height: 0; /* Important for flex child */

}



#kanban-container::-webkit-scrollbar {

    display: none; /* Chrome/Safari */

}



/* Stages com altura fixa */

.kanban-stage {

    height: auto; /* Permite que a altura se ajuste ao conteúdo */

    display: flex;

    flex-direction: column;

}



/* Conteúdo das stages com scroll */

.kanban-stage-content {

    flex: 1;

    overflow-y: auto;

    overflow-x: hidden;

    min-height: 0; /* Important for flex child */

    padding: 0.5rem;

    scrollbar-width: thin; /* Firefox */

    scrollbar-color: rgba(156, 163, 175, 0.5) transparent; /* Firefox */

    max-height: calc(100vh - 280px); /* Ajustado para considerar o header e espaçamentos */

}



/* Estilo quando está arrastando um item */

body.is-dragging {

    cursor: grabbing !important;

    overflow: hidden; /* Evita qualquer scroll durante drag */

    user-select: none;

}



body.is-dragging * {

    cursor: grabbing !important;

    user-select: none;

}



/* Animação para tarefas durante reordenação */

.kanban-task {

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 

                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform;

}



.kanban-task:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}



.dark .kanban-task:hover {

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

}



/* Indicador visual de que algo está sendo processado */

.kanban-stage.processing {

    position: relative;

    overflow: hidden;

}



.kanban-stage.processing::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg, transparent, #3b82f6, transparent);

    animation: loading-bar 1.5s infinite;

    z-index: 10;

}



@keyframes loading-bar {

    0% { left: -100%; }

    100% { left: 100%; }

}



/* Feedback visual durante o movimento */

.task-moving {

    opacity: 0.8;

    transform: scale(0.98);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    animation: task-pulse 1.5s infinite;

    border: 1px solid rgba(59, 130, 246, 0.3);

}



@keyframes task-pulse {

    0%, 100% { 

        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);

        transform: scale(0.98);

    }

    50% { 

        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);

        transform: scale(0.99);

    }

}



/* Animação de sucesso após movimento */

.task-move-success {

    animation: task-success 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



@keyframes task-success {

    0% { 

        transform: scale(1); 

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }

    50% { 

        transform: scale(1.03); 

        box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);

        border-color: #22c55e;

    }

    100% { 

        transform: scale(1); 

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }

}



/* Zonas invisíveis de detecção para rolagem automática */

#kanban-container::before,

#kanban-container::after {

    content: '';

    position: absolute;

    top: 0;

    width: 60px;

    height: 100%;

    z-index: 10;

    pointer-events: none;

}



/* Estilos para arrastar - fantasma */

.sortable-ghost {

    opacity: 0.3;

    background-color: var(--light-hover) !important;

    transform: scale(0.95);

    transition: all 0.2s ease;

    border: 2px dashed #3b82f6;

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);

}



.dark .sortable-ghost {

    background-color: var(--dark-hover) !important;

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

}



/* Elemento sendo arrastado */

.sortable-drag {
    opacity: 0.95;
    transform: rotate(2deg) scale(1.02) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999 !important;
    border: 2px solid #3b82f6;
}

/* Global loader overlay */
#global-loader.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, 0.35); /* dark overlay */
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

#global-loader.global-loader-overlay.show { display: flex; }

/* Global loader content aligned to Kanban loader visuals */
#global-loader .global-loader-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem; /* p-12 */
    color: #fff;
    gap: 0.75rem; /* mr-3 equivalent spacing */
}

#global-loader .kanban-spinner { 
    width: 32px; 
    height: 32px; 
    margin-right: 0.75rem; /* mr-3 */
    color: #f97316; /* text-orange-500 */
    filter: drop-shadow(0 0 6px rgba(249,115,22,0.6));
    animation: kanban-spin 1s linear infinite; /* animate-spin */
}

#global-loader .kanban-spinner-track { opacity: 0.25; }
#global-loader .kanban-spinner-head { opacity: 0.95; }

@keyframes kanban-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#global-loader .global-loader-text { 
    font-weight: 600; 
    letter-spacing: 0.2px; 
}

/* Light theme adjustments */
body:not(.dark) #global-loader.global-loader-overlay {
    background: rgba(255, 255, 255, 0.55);
}


.dark .sortable-drag {

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4) !important;

}



/* Estilo para coluna que está recebendo hover durante drag */

.kanban-stage.drag-over {

    background-color: rgba(59, 130, 246, 0.08);

    border: 2px dashed #3b82f6;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    transform: scale(1.01);

    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);

}



.dark .kanban-stage.drag-over {

    background-color: rgba(59, 130, 246, 0.12);

    border-color: #60a5fa;

    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);

}



/* Estilo para coluna de origem durante drag */

.kanban-stage.drag-source {

    opacity: 0.7;

    background-color: rgba(156, 163, 175, 0.05);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.dark .kanban-stage.drag-source {

    background-color: rgba(156, 163, 175, 0.1);

}



/* Ocultar texto "Nenhuma tarefa" quando arrastando sobre a coluna */

.kanban-stage.drag-over .kanban-empty-state {

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Mostrar texto "Nenhuma tarefa" quando não está arrastando */

.kanban-stage:not(.drag-over) .kanban-empty-state {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.sortable-fallback {

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);

}



/* Notifications */

#talaa-notifications {

    z-index: 9999;

}



#talaa-notifications > div {

    animation: slideIn 0.3s ease forwards;

}



@keyframes slideIn {

    0% {

        opacity: 0;

        transform: translateX(100%);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Botões de rolagem */

#scroll-left,

#scroll-right {

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

    transition: all 0.2s ease;

    z-index: 20;

    opacity: 1;

}



#scroll-left.disabled,

#scroll-right.disabled {

    opacity: 0.3;

    pointer-events: none;

    cursor: not-allowed;

}



#scroll-left:hover:not(.disabled),

#scroll-right:hover:not(.disabled) {

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    opacity: 0.8;

}



#scroll-left:active:not(.disabled),

#scroll-right:active:not(.disabled) {

    transform: scale(0.95); /* Efeito de "pressionar" em vez de mover para baixo */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



/* Estilos para arrasto horizontal do container */

#kanban-container {

    cursor: grab;

    scroll-behavior: auto; /* Remove smooth scroll para permitir rolagem fluida manual */

}



#kanban-container.grabbing-scroll {

    cursor: grabbing !important;

    scroll-behavior: auto;

}



/* Prevenir seleção de texto durante arrasto */

body.is-dragging,

#kanban-container.grabbing-scroll {

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



/* Indicador visual para área de arrasto */

#kanban-container:not(.grabbing-scroll):hover {

    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.1);

    transition: box-shadow 0.2s ease;

}



/* Scrollbar personalizada mais fina para altura fixa */

#kanban-container::-webkit-scrollbar {

    height: 6px;

}



#kanban-container::-webkit-scrollbar-track {

    background: rgba(229, 231, 235, 0.3);

    border-radius: 3px;

}



#kanban-container::-webkit-scrollbar-thumb {

    background-color: rgba(156, 163, 175, 0.4);

    border-radius: 3px;

    border: 1px solid transparent;

    background-clip: content-box;

}



#kanban-container::-webkit-scrollbar-thumb:hover {

    background-color: rgba(156, 163, 175, 0.6);

}



/* Dark mode scrollbars */

.dark #kanban-container::-webkit-scrollbar-track {

    background: rgba(75, 85, 99, 0.2);

}



.dark #kanban-container::-webkit-scrollbar-thumb {

    background-color: rgba(156, 163, 175, 0.3);

}



.dark #kanban-container::-webkit-scrollbar-thumb:hover {

    background-color: rgba(156, 163, 175, 0.5);

}



/* Melhorias para responsividade */

@media (max-width: 640px) {

    .kanban-stage {

        min-width: 260px;

        width: 260px;

    }

}



/* Estilos para o Modal Moderno */

#task-modal {

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}



#task-modal .bg-white {

    border: 1px solid rgba(229, 231, 235, 0.5);

}



.dark #task-modal .dark\:bg-gray-800 {

    border: 1px solid rgba(75, 85, 99, 0.5);

}



/* Animações suaves para inputs */

#task-modal input:focus,

#task-modal textarea:focus,

#task-modal select:focus {

    transform: translateY(-1px);

    transition: all 0.2s ease;

}



/* Estilo para drag and drop de anexos */

#task-attachments {

    position: relative;

    transition: all 0.3s ease;

}



#task-attachments.drag-hover {

    border-color: #6a00f5 !important;

    background-color: rgba(249, 115, 22, 0.05);

    transform: scale(1.02);

}



#task-attachments.drag-hover::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(249, 115, 22, 0.1) 50%, transparent 70%);

    animation: shimmer 1.5s infinite;

    border-radius: inherit;

}



@keyframes shimmer {

    0% { transform: translateX(-100%); }

    100% { transform: translateX(100%); }

}



/* Chips de anexos */

.attachment-chip {

    display: inline-flex;

    align-items: center;

    background: rgba(59, 130, 246, 0.1);

    border: 1px solid rgba(59, 130, 246, 0.2);

    border-radius: 8px;

    padding: 6px 12px;

    margin: 2px;

    font-size: 0.875rem;

    transition: all 0.2s ease;

}



.attachment-chip:hover {

    background: rgba(59, 130, 246, 0.15);

    transform: translateY(-1px);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.attachment-chip .remove-attachment {

    margin-left: 8px;

    color: #ef4444;

    cursor: pointer;

    border-radius: 50%;

    width: 16px;

    height: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}



.attachment-chip .remove-attachment:hover {

    background: rgba(239, 68, 68, 0.1);

}



/* Melhorias para selectores múltiplos */

#task-assignees {

    min-height: 42px;

}



/* Efeitos hover nos cartões de metadados */

.bg-gray-50:hover,

.dark\:bg-gray-700:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    transition: all 0.2s ease;

}



/* Gradientes sutis para botões */

#task-save {

    position: relative;

    overflow: hidden;

}



#task-save::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);

    transform: translateX(-100%);

    transition: transform 0.6s ease;

}



#task-save:hover::before {

    transform: translateX(100%);

}



/* Responsividade do modal */

@media (max-width: 1024px) {

    #task-modal .max-w-4xl {

        max-width: 90vw;

    }

    

    #task-modal .lg\:col-span-2 {

        grid-column: span 1;

    }

    

    #task-modal .grid-cols-1.lg\:grid-cols-3 {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 640px) {

    #task-modal {

        padding: 1rem;

        align-items: flex-start;

    }

    

    #task-modal .max-w-4xl {

        max-width: 100%;

    }

    

    #task-modal .p-6 {

        padding: 1rem;

    }

    

    #task-modal .space-y-6 > * + * {

        margin-top: 1rem;

    }

}



/* Assignees (Responsáveis) estilo Trello */

#assignees-avatars .assignee-avatar {

    position: relative;

    width: 36px;

    height: 36px;

    border-radius: 9999px;

    background: linear-gradient(135deg,#1f2937,#374151);

    color:#fff;

    font-size:0.75rem;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #fff;

    box-shadow:0 2px 4px rgba(0,0,0,0.25);

    cursor:pointer;

    transition:all .2s ease;

}



.dark #assignees-avatars .assignee-avatar { border-color:#1f2937; }



#assignees-avatars .assignee-avatar:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 4px 10px rgba(0,0,0,0.35); }



#assignees-avatars .assignee-avatar.add-avatar { background:#059669; border-color:#fff; }

#assignees-avatars .assignee-avatar.add-avatar:hover { background:#047857; }



#assignees-popover { animation: fadeInPop .18s ease; }

@keyframes fadeInPop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }



#assignees-list .assignee-item { display:flex; align-items:center; padding:6px 8px; border-radius:6px; cursor:pointer; transition:all .15s; }

#assignees-list .assignee-item:hover { background:rgba(16,185,129,0.1); }

.dark #assignees-list .assignee-item:hover { background:rgba(16,185,129,0.15); }



#assignees-list .assignee-item.active { background:#059669; color:#fff; }

#assignees-list .assignee-item.active .assignee-check { opacity:1; }



#assignees-list .assignee-avatar-sm { width:28px; height:28px; border-radius:9999px; background:#374151; color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:600; margin-right:8px; }



#assignees-list .assignee-check { margin-left:auto; width:16px; height:16px; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; color:#059669; box-shadow:0 0 0 1px rgba(0,0,0,0.1); opacity:0; transition:opacity .15s; }

.dark #assignees-list .assignee-check { background:#1f2937; }



/* Comentários da tarefa */

#task-comments-panel { position:relative; }

#comments-list::-webkit-scrollbar { width:6px; }

#comments-list::-webkit-scrollbar-thumb { background:rgba(107,114,128,0.4); border-radius:3px; }

#comments-list::-webkit-scrollbar-thumb:hover { background:rgba(107,114,128,0.6); }

.dark #comments-list::-webkit-scrollbar-thumb { background:rgba(156,163,175,0.3); }

.comment-item { background:rgba(255,255,255,0.6); border:1px solid rgba(229,231,235,0.8); padding:8px 10px; border-radius:8px; position:relative; }

.dark .comment-item { background:rgba(55,65,81,0.7); border-color:rgba(75,85,99,0.9); }

.comment-item:hover .comment-actions { opacity:1; visibility:visible; }

.comment-header { display:flex; align-items:center; font-size:11px; margin-bottom:4px; gap:6px; }

.comment-avatar { width:28px; height:28px; border-radius:9999px; overflow:hidden; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,0.3); }

.comment-avatar img { width:100%; height:100%; object-fit:cover; }

.comment-body { font-size:12px; line-height:1.35; color:#374151; }

.dark .comment-body { color:#e5e7eb; }

.comment-actions { position:absolute; top:4px; right:4px; display:flex; gap:4px; opacity:0; visibility:hidden; transition:.15s; }

.comment-actions button { background:rgba(0,0,0,0.05); color:#6b7280; border-radius:4px; padding:2px 6px; font-size:10px; }

.comment-actions button:hover { background:rgba(239,68,68,0.15); color:#dc2626; }



/* Action buttons Trello-style */

.action-button {

    background: #f1f2f4;

    border: none;

    color: #172b4d;

    padding: 8px 12px;

    border-radius: 3px;

    font-size: 14px;

    font-weight: 400;

    transition: all 0.2s;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}



.action-button:hover {

    background: #e4e6ea;

    color: #172b4d;

}



.action-button.active {

    background: #0079bf;

    color: white;

}



/* Toggle sections smooth animation */

.toggle-section {

    transition: all 0.3s ease;

    overflow: hidden;

}



.toggle-section.hidden {

    max-height: 0;

    opacity: 0;

    margin: 0;

    padding: 0;

}



.toggle-section:not(.hidden) {

    max-height: 500px;

    opacity: 1;

}



/* Contenteditable title styling */

#task-modal-title[contenteditable="true"] {

    outline: none;

    border-radius: 3px;

    transition: background-color 0.2s;

    min-height: 32px;

    padding: 4px 8px;

    margin: -4px -8px;

}



#task-modal-title[contenteditable="true"]:hover {

    background-color: #f1f2f4;

}



#task-modal-title[contenteditable="true"]:focus {

    background-color: white;

    box-shadow: 0 0 0 2px #0079bf;

}



/* User avatar improvements */

.user-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid transparent;

    transition: all 0.2s;

    cursor: pointer;

}



.user-avatar:hover {

    border-color: #0079bf;

}



.user-avatar.selected {

    border-color: #0079bf;

    box-shadow: 0 0 0 2px rgba(0, 121, 191, 0.2);

}



/* Modal de Membros estilo Trello */

#members-modal {

    z-index: 60;

}



#members-modal .bg-white {

    max-width: 320px;

    width: 100%;

    margin: 2rem;

}



.member-item {

    transition: all 0.2s;

    border-radius: 6px;

}



.member-item:hover {

    background-color: #f1f2f4;

}



.member-item.selected {

    background-color: #e4f3ff;

}



.member-item img {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

}



/* Scroll customizado para lista de membros */

#board-members-list {

    scrollbar-width: thin;

    scrollbar-color: #d1d5db #f9fafb;

}



#board-members-list::-webkit-scrollbar {

    width: 6px;

}



#board-members-list::-webkit-scrollbar-track {

    background: #f9fafb;

    border-radius: 3px;

}



#board-members-list::-webkit-scrollbar-thumb {

    background: #d1d5db;

    border-radius: 3px;

}



#board-members-list::-webkit-scrollbar-thumb:hover {

    background: #9ca3af;

}



/* Animação do modal */

#members-modal.hidden {

    opacity: 0;

    pointer-events: none;

}



#members-modal:not(.hidden) {

    opacity: 1;

    animation: fadeIn 0.2s ease-out;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: scale(0.95);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



#members-modal .bg-white {

    animation: slideIn 0.2s ease-out;

}



@keyframes slideIn {

    from {

        transform: translateY(-20px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



/* Modal de Datas estilo Trello */

#dates-modal {

    z-index: 60;

}



#dates-modal .bg-white {

    max-width: 320px;

    width: 100%;

    margin: 2rem;

}



/* Data display styling */

#due-date-display .bg-red-100 {

    background-color: #fee2e2 !important;

    color: #b91c1c !important;

}



#due-date-display .bg-yellow-100 {

    background-color: #fef3c7 !important;

    color: #d97706 !important;

}



#due-date-display .bg-orange-100 {

    background-color: #fed7aa !important;

    color: #ea580c !important;

}



#due-date-display .bg-gray-100 {

    background-color: #f3f4f6 !important;

    color: #374151 !important;

}



/* Input styling para modal de datas */

#dates-modal input[type="date"],

#dates-modal input[type="time"] {

    background-color: white;

    border: 2px solid #e5e7eb;

    border-radius: 6px;

    padding: 8px 12px;

    font-size: 14px;

    transition: all 0.2s;

}



#dates-modal input[type="date"]:focus,

#dates-modal input[type="time"]:focus {

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

    outline: none;

}



/* Dark mode para modal de datas */

.dark #dates-modal input[type="date"],

.dark #dates-modal input[type="time"] {

    background-color: #374151;

    border-color: #4b5563;

    color: white;

}



.dark #dates-modal input[type="date"]:focus,

.dark #dates-modal input[type="time"]:focus {

    border-color: #60a5fa;

}



/* Botões do modal de datas */

#dates-modal button {

    transition: all 0.2s;

    border-radius: 6px;

    font-weight: 500;

}



#save-date-btn:hover {

    background-color: #2563eb !important;

}



#remove-date-btn:hover {

    background-color: #fee2e2;

    color: #dc2626;

}



/* Estilos para CKEditor */

#description-editor-container .ck-editor {

    border: 2px solid #e5e7eb;

    border-radius: 8px;

}



#description-editor-container .ck-editor:focus-within {

    border-color: #6a00f5;

    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);

}



.dark #description-editor-container .ck-editor {

    border-color: #4b5563;

}



.dark #description-editor-container .ck-editor:focus-within {

    border-color: #6a00f5;

    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);

}



#description-editor-container .ck-toolbar {

    background: #f9fafb;

    border-bottom: 1px solid #e5e7eb;

}



.dark #description-editor-container .ck-toolbar {

    background: #374151 !important;

    border-bottom-color: #4b5563 !important;

}



.dark #description-editor-container .ck-toolbar .ck-button {

    color: #f3f4f6 !important;

}



.dark #description-editor-container .ck-toolbar .ck-button:hover {

    background: #4b5563 !important;

}



.dark #description-editor-container .ck-toolbar .ck-button.ck-on {

    background: #6b7280 !important;

    color: #ffffff !important;

}



.dark #description-editor-container .ck-toolbar .ck-dropdown__button {

    color: #f3f4f6 !important;

}



.dark #description-editor-container .ck-toolbar .ck-dropdown__button:hover {

    background: #4b5563 !important;

}



.dark #description-editor-container .ck-dropdown__panel {

    background: #374151 !important;

    border-color: #4b5563 !important;

}



.dark #description-editor-container .ck-list__item {

    color: #f3f4f6 !important;

}



.dark #description-editor-container .ck-list__item:hover {

    background: #4b5563 !important;

}



.dark #description-editor-container .ck-list__item.ck-on {

    background: #6b7280 !important;

}



#description-editor-container .ck-content {

    min-height: 120px;

    padding: 12px;

    background: white;

}



.dark #description-editor-container .ck-content {

    background: #1f2937 !important;

    color: #f9fafb !important;

}



.dark #description-editor-container .ck-content p {

    color: #f9fafb !important;

}



.dark #description-editor-container .ck-content h1,

.dark #description-editor-container .ck-content h2,

.dark #description-editor-container .ck-content h3 {

    color: #f9fafb !important;

}



.dark #description-editor-container .ck-content ul,

.dark #description-editor-container .ck-content ol {

    color: #f9fafb !important;

}



.dark #description-editor-container .ck-content blockquote {

    color: #d1d5db !important;

    border-left-color: #6a00f5 !important;

}



.dark #description-editor-container .ck-content a {

    color: #60a5fa !important;

}



/* Placeholder no modo escuro */

.dark #description-editor-container .ck-content .ck-placeholder::before {

    color: #9ca3af !important;

}



/* Estilos para diferentes tipos de títulos no editor */

#description-editor-container .ck-content h1 {

    font-size: 1.875rem !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    margin: 1rem 0 0.5rem 0 !important;

}



#description-editor-container .ck-content h2 {

    font-size: 1.5rem !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

    margin: 0.875rem 0 0.5rem 0 !important;

}



#description-editor-container .ck-content h3 {

    font-size: 1.25rem !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    margin: 0.75rem 0 0.5rem 0 !important;

}



#description-editor-container .ck-content p {

    font-size: 1rem !important;

    line-height: 1.6 !important;

    margin: 0.5rem 0 !important;

}



/* Listas com formatação adequada */

#description-editor-container .ck-content ul,

#description-editor-container .ck-content ol {

    margin: 0.75rem 0 !important;

    padding-left: 1.5rem !important;

}



#description-editor-container .ck-content ul li,

#description-editor-container .ck-content ol li {

    margin: 0.25rem 0 !important;

    line-height: 1.6 !important;

}



/* Citações */

#description-editor-container .ck-content blockquote {

    margin: 1rem 0 !important;

    padding: 0.75rem 1rem !important;

    border-left: 3px solid #6a00f5 !important;

    background: #f9fafb !important;

    font-style: italic !important;

}



.dark #description-editor-container .ck-content blockquote {

    background: #374151 !important;

    color: #e5e7eb !important;

}



/* Scrollbar do editor no modo escuro */

.dark #description-editor-container .ck-content::-webkit-scrollbar {

    width: 8px;

}



.dark #description-editor-container .ck-content::-webkit-scrollbar-track {

    background: #374151;

}



.dark #description-editor-container .ck-content::-webkit-scrollbar-thumb {

    background: #6b7280;

    border-radius: 4px;

}



.dark #description-editor-container .ck-content::-webkit-scrollbar-thumb:hover {

    background: #9ca3af;

}



/* Estilo global para elementos CKEditor em modo escuro */

.dark .ck-dropdown__panel {

    background: #374151 !important;

    border-color: #4b5563 !important;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;

}



.dark .ck-list__item {

    color: #f3f4f6 !important;

    background: transparent !important;

}



.dark .ck-list__item:hover {

    background: #4b5563 !important;

}



.dark .ck-list__item.ck-on {

    background: #6b7280 !important;

}



.dark .ck-list__item .ck-button {

    color: #f3f4f6 !important;

}



.dark .ck-list__item .ck-button:hover {

    background: transparent !important;

    color: #ffffff !important;

}



/* Estilos específicos para o dropdown de headings */

.dark .ck-heading-dropdown .ck-list__item {

    color: #f3f4f6 !important;

}



.dark .ck-heading-dropdown .ck-list__item:hover {

    background: #4b5563 !important;

}



.dark .ck-heading-dropdown .ck-button__label {

    color: #f3f4f6 !important;

}



/* Correção para títulos no dropdown */

.dark .ck-dropdown__panel .ck-heading_heading1,

.dark .ck-dropdown__panel .ck-heading_heading2,

.dark .ck-dropdown__panel .ck-heading_heading3,

.dark .ck-dropdown__panel .ck-heading_paragraph {

    color: #f3f4f6 !important;

}



.dark .ck-balloon-panel {

    background: #374151 !important;

    border-color: #4b5563 !important;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;

}



.dark .ck-balloon-panel .ck-button {

    color: #f3f4f6 !important;

}



.dark .ck-balloon-panel .ck-button:hover {

    background: #4b5563 !important;

}



.dark .ck-tooltip {

    background: #1f2937 !important;

    color: #f3f4f6 !important;

    border-color: #4b5563 !important;

}



/* Força aplicação dos estilos de dropdown */

.dark .ck.ck-dropdown__panel {

    background: #374151 !important;

    border: 1px solid #4b5563 !important;

}



.dark .ck.ck-dropdown__panel .ck.ck-list .ck.ck-list__item {

    background: transparent !important;

    color: #f3f4f6 !important;

}



.dark .ck.ck-dropdown__panel .ck.ck-list .ck.ck-list__item:hover {

    background: #4b5563 !important;

}



.dark .ck.ck-dropdown__panel .ck.ck-list .ck.ck-list__item.ck-on {

    background: #6b7280 !important;

}



/* Transições suaves para mudança de tema */

#description-editor-container .ck-editor,

#description-editor-container .ck-toolbar,

#description-editor-container .ck-content,

.ck-dropdown__panel,

.ck-list__item {

    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

}



/* Estilos para anexos */

#attachment-upload-area.drag-over {

    border-color: #6a00f5 !important;

    background-color: rgba(249, 115, 22, 0.1) !important;

}



.attachment-item {

    transition: all 0.2s ease;

}



.attachment-item:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.dark .attachment-item:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.attachment-item .download-attachment:hover,

.attachment-item .delete-attachment:hover {

    transform: scale(1.1);

}



/* Progress bar para upload */

#upload-progress {

    animation: fadeIn 0.3s ease;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(-10px); }

    to { opacity: 1; transform: translateY(0); }

}



#upload-progress-bar {

    transition: width 0.3s ease;

}



/* Drag and drop visual feedback */

#attachment-upload-area {

    transition: all 0.2s ease;

}



#attachment-upload-area:hover {

    border-color: #d1d5db;

    background-color: rgba(249, 250, 251, 0.5);

}



.dark #attachment-upload-area:hover {

    border-color: #6b7280;

    background-color: rgba(55, 65, 81, 0.5);

}



/* Estilos para miniaturas de imagem */

.attachment-item img {

    transition: transform 0.2s ease;

}



.attachment-item:hover img {

    transform: scale(1.05);

}



/* Responsivo para anexos */

@media (max-width: 640px) {

    .attachment-item {

        flex-direction: column;

        text-align: center;

    }

    

    .attachment-item .flex-shrink-0 {

        margin-right: 0;

        margin-bottom: 0.5rem;

    }

}



/* Exibição da descrição */

#task-description-display {

    transition: all 0.2s;

}



#task-description-display:hover {

    border-color: #d1d5db;

    cursor: text;

}



.dark #task-description-display:hover {

    border-color: #6b7280;

}



#task-description-display h1,

#task-description-display h2,

#task-description-display h3 {

    margin-top: 0.75rem;

    margin-bottom: 0.5rem;

    font-weight: 600;

}



#task-description-display h1 {

    font-size: 1.25rem;

}



#task-description-display h2 {

    font-size: 1.125rem;

}



#task-description-display h3 {

    font-size: 1rem;

}



#task-description-display p {

    margin-bottom: 0.75rem;

}



#task-description-display ul,

#task-description-display ol {

    margin-bottom: 0.75rem;

    padding-left: 1.5rem;

}



#task-description-display blockquote {

    margin: 0.75rem 0;

    padding-left: 1rem;

    border-left: 3px solid #6a00f5;

    font-style: italic;

    color: #6b7280;

}



.dark #task-description-display blockquote {

    color: #9ca3af;

    border-left-color: #6a00f5;

}



/* Estilos para anexos */

#add-attachment-btn {

    transition: all 0.2s ease;

    border: 1px solid transparent;

}



#add-attachment-btn:hover {

    background-color: #e5e7eb;

    border-color: #d1d5db;

}



.dark #add-attachment-btn:hover {

    background-color: #4b5563;

    border-color: #6b7280;

}



#no-attachments-message {

    transition: opacity 0.3s ease;

}



.attachment-item {

    animation: slideInFromRight 0.3s ease;

}



@keyframes slideInFromRight {

    from {

        opacity: 0;

        transform: translateX(20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



#attachment-upload-area {

    animation: slideInDown 0.3s ease;

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Modal de Visualização de Anexos */

#attachment-viewer-modal {

    backdrop-filter: blur(4px);

    animation: fadeIn 0.3s ease-out;

    z-index: 100;

}



#attachment-viewer-modal .bg-white {

    animation: modalSlideUp 0.3s ease-out;

    z-index: 100;

}



@keyframes modalSlideUp {

    from {

        opacity: 0;

        transform: translateY(20px) scale(0.95);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



/* Conteúdo do anexo */

#attachment-content img {

    max-width: 100%;

    max-height: 60vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



#attachment-content iframe,

#attachment-content video {

    max-width: 100%;

    max-height: 60vh;

    border-radius: 8px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



#attachment-content .file-preview {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px;

    border: 2px dashed #e5e7eb;

    border-radius: 12px;

    background: #f9fafb;

    min-height: 300px;

}



.dark #attachment-content .file-preview {

    border-color: #374151;

    background: #1f2937;

}



#attachment-content .file-icon {

    width: 80px;

    height: 80px;

    margin-bottom: 16px;

    opacity: 0.7;

}



/* Botões do modal */

#attachment-viewer-modal button {

    transition: all 0.2s ease;

}



#attachment-viewer-modal button:hover {

    transform: translateY(-1px);

}



/* Indicador de capa */

.attachment-item.is-cover {

    position: relative;

    border: 2px solid #3b82f6;

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));

}



.attachment-item.is-cover::before {

    content: "CAPA";

    position: absolute;

    top: -8px;

    right: -8px;

    background: #3b82f6;

    color: white;

    font-size: 10px;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 4px;

    z-index: 10;

}



/* Card da tarefa com capa */

.kanban-task.has-cover {

    position: relative;

}



.kanban-task .task-cover {

    width: 100%;

    height: 300px;

    object-fit: contain;

    border-radius: 6px 6px 0 0;

    margin-bottom: 8px;

}



.kanban-task.has-cover .task-content {

    padding: 8px 12px 12px 12px;

}



/* Responsividade do modal */

@media (max-width: 768px) {

    #attachment-viewer-modal .max-w-4xl {

        max-width: 95vw;

    }

    

    #attachment-content {

        padding: 16px;

        min-height: 300px;

    }

    

    #attachment-viewer-modal .flex.items-center.space-x-2 {

        flex-wrap: wrap;

        gap: 8px;

    }

}



/* Dropdown de Prioridade */

#priority-dropdown-btn {

    min-height: 40px;

    transition: all 0.2s ease;

}



#priority-dropdown-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



#priority-dropdown-btn:focus {

    outline: none;

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);

}



#priority-dropdown-menu {

    animation: dropdownSlideIn 0.2s ease-out;

    backdrop-filter: blur(8px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



@keyframes dropdownSlideIn {

    from {

        opacity: 0;

        transform: translateY(-8px) scale(0.95);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



#priority-chevron.rotate {

    transform: rotate(180deg);

}



.priority-option:hover {

    background: rgba(59, 130, 246, 0.1);

}



.priority-option.selected {

    background: rgba(59, 130, 246, 0.2);

    font-weight: 500;

}



/* Dark mode ajustes */

.dark #priority-dropdown-menu {

    background: rgba(55, 65, 81, 0.95);

    backdrop-filter: blur(12px);

}



.dark .priority-option:hover {

    background: rgba(59, 130, 246, 0.15);

}



.dark .priority-option.selected {

    background: rgba(59, 130, 246, 0.25);

}



/* Indicadores de prioridade com animação */

#priority-indicator {

    transition: all 0.3s ease;

}



#priority-indicator.pulse {

    animation: priorityPulse 2s infinite;

}



@keyframes priorityPulse {

    0%, 100% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.1);

        opacity: 0.8;

    }

}



/* Estilos para scroll nas colunas do Kanban */

.kanban-stage-content {

    max-height: calc(100vh - 200px); /* Altura máxima baseada na viewport */

    overflow-y: auto; /* Permitir scroll vertical */

    overflow-x: hidden; /* Evitar scroll horizontal nas colunas */

    scrollbar-width: thin; /* Firefox */

    scrollbar-color: rgba(156, 163, 175, 0.5) transparent; /* Firefox */

}



/* Webkit scrollbar styling */

.kanban-stage-content::-webkit-scrollbar {

    width: 6px;

}



.kanban-stage-content::-webkit-scrollbar-track {

    background: transparent;

}



.kanban-stage-content::-webkit-scrollbar-thumb {

    background-color: rgba(156, 163, 175, 0.5);

    border-radius: 3px;

    transition: background-color 0.2s ease;

}



.kanban-stage-content::-webkit-scrollbar-thumb:hover {

    background-color: rgba(156, 163, 175, 0.8);

}



/* Dark mode scrollbar */

.dark .kanban-stage-content::-webkit-scrollbar-thumb {

    background-color: rgba(75, 85, 99, 0.6);

}



.dark .kanban-stage-content::-webkit-scrollbar-thumb:hover {

    background-color: rgba(75, 85, 99, 0.9);

}



/* Container principal - desabilitar scroll lateral */

#kanban-container {

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none; /* Firefox */

    -ms-overflow-style: none; /* IE/Edge */

}



#kanban-container::-webkit-scrollbar {

    display: none; /* Chrome/Safari */

}



/* Cursor para arrastar no container principal */

#kanban-container:not(.grabbing-scroll) {

    cursor: grab;

}



#kanban-container.grabbing-scroll {

    cursor: grabbing;

    user-select: none;

}



/* ============================================

   CLASSES DINÂMICAS DE ALTURA DAS STAGES

   ============================================ */



/* Stage vazio - altura mínima */

.kanban-stage.stage-empty {

    min-height: 120px;

}



.kanban-stage.stage-empty .kanban-stage-content {

    min-height: 60px;

    background: linear-gradient(135deg, transparent 25%, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.02) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.02) 75%);

    background-size: 8px 8px;

    border: 2px dashed rgba(0,0,0,0.1);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.kanban-stage.stage-empty .kanban-stage-content:before {

    content: "Arraste cartões aqui";

    color: rgba(0,0,0,0.3);

    font-size: 0.875rem;

    font-style: italic;

    pointer-events: none;

}



/* Stage com poucas tarefas (1-3) */

.kanban-stage.stage-few {

    min-height: 200px;

}



.kanban-stage.stage-few .kanban-stage-content {

    min-height: 140px;

}



/* Stage com muitas tarefas (4-8) */

.kanban-stage.stage-many {

    min-height: 400px;

}



.kanban-stage.stage-many .kanban-stage-content {

    min-height: 340px;

}



/* Stage cheia (9+ tarefas) */

.kanban-stage.stage-full {

    min-height: 600px;

}



.kanban-stage.stage-full .kanban-stage-content {

    min-height: 540px;

}



/* ============================================

   MELHORIAS NO SCROLL HORIZONTAL

   ============================================ */



/* Smooth scroll behavior para botões */

#kanban-container.smooth-scrolling {

    scroll-behavior: smooth;

}



/* Indicadores visuais de scroll disponível */

.kanban-container-wrapper {

    position: relative;

}



.kanban-container-wrapper::before,

.kanban-container-wrapper::after {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    width: 20px;

    z-index: 10;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.kanban-container-wrapper::before {

    left: 0;

    background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);

}



.kanban-container-wrapper::after {

    right: 0;

    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);

}



.kanban-container-wrapper.can-scroll-left::before,

.kanban-container-wrapper.can-scroll-right::after {

    opacity: 1;

}



/* ============================================

   RESPONSIVIDADE APRIMORADA

   ============================================ */



@media (max-width: 768px) {

    /* Em mobile, reduzir alturas mínimas */

    .kanban-stage.stage-empty {

        min-height: 80px;

    }

    

    .kanban-stage.stage-few {

        min-height: 150px;

    }

    

    .kanban-stage.stage-many {

        min-height: 300px;

    }

    

    .kanban-stage.stage-full {

        min-height: 400px;

    }

    

    /* Scroll horizontal mais sensível em mobile */

    #kanban-container {

        -webkit-overflow-scrolling: touch;

    }

}



/* ============================================

   ANIMAÇÕES SUAVES

   ============================================ */



.kanban-stage {

    transition: min-height 0.3s ease-in-out;

}



.kanban-stage-content {

    transition: min-height 0.3s ease-in-out, background 0.3s ease-in-out;

}



/* Fade in/out para elementos dinâmicos */

.kanban-task {

    animation: fadeIn 0.3s ease-in-out;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ============================================

   ACESSIBILIDADE

   ============================================ */



/* Focus styles para botões de scroll */

#scroll-left:focus,

#scroll-right:focus {

    outline: 2px solid #3b82f6;

    outline-offset: 2px;

}



/* Reduzir animações para usuários que preferem */

@media (prefers-reduced-motion: reduce) {

    .kanban-stage,

    .kanban-stage-content,

    .kanban-task {

        transition: none !important;

        animation: none !important;

    }

}



/* ============================================

   UTILITY CLASSES

============================================ */



.hidden {

    display: none !important;

}



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



/* ============================================

   CHECKLIST STYLES

============================================ */



/* Checklist Container */

.checklist-container {

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 16px;

    margin-bottom: 16px;

}



.dark .checklist-container {

    background: #374151;

    border-color: #4b5563;

}



/* Checklist Header */

.checklist-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 12px;

}



.checklist-title-section {

    flex: 1;

}



.checklist-title-display {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    padding: 4px 8px;

    border-radius: 4px;

    transition: background-color 0.2s;

}



.checklist-title-display:hover {

    background: #f3f4f6;

}



.dark .checklist-title-display:hover {

    background: #4b5563;

}



.checklist-title-text {

    font-size: 14px;

    font-weight: 600;

    color: #374151;

    flex: 1;

}



.dark .checklist-title-text {

    color: #f3f4f6;

}



.checklist-progress-text {

    font-size: 12px;

    color: #6b7280;

    font-weight: 500;

}



.dark .checklist-progress-text {

    color: #9ca3af;

}



.checklist-title-input {

    font-size: 14px;

    font-weight: 600;

    padding: 4px 8px;

    border: 2px solid #3b82f6;

    border-radius: 4px;

    background: white;

    color: #374151;

    width: 100%;

}



.dark .checklist-title-input {

    background: #374151;

    color: #f3f4f6;

    border-color: #60a5fa;

}



.checklist-description {

    font-size: 12px;

    color: #6b7280;

    margin-top: 4px;

    margin-left: 32px;

}



.dark .checklist-description {

    color: #9ca3af;

}



.checklist-actions {

    display: flex;

    gap: 4px;

}



.checklist-actions button {

    padding: 4px;

    border: none;

    background: transparent;

    color: #6b7280;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s;

}



.checklist-actions button:hover {

    background: #f3f4f6;

    color: #374151;

}



.dark .checklist-actions button {

    color: #9ca3af;

}



.dark .checklist-actions button:hover {

    background: #4b5563;

    color: #f3f4f6;

}



/* Progress Bar */

.checklist-progress {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

}



.checklist-progress-bar {

    flex: 1;

    height: 8px;

    background: #e5e7eb;

    border-radius: 4px;

    overflow: hidden;

}



.dark .checklist-progress-bar {

    background: #4b5563;

}



.checklist-progress-fill {

    height: 100%;

    border-radius: 4px;

    transition: width 0.3s ease;

}



.checklist-progress-percent {

    font-size: 12px;

    color: #6b7280;

    font-weight: 500;

    min-width: 32px;

    text-align: right;

}



.dark .checklist-progress-percent {

    color: #9ca3af;

}



/* Checklist Items */

.checklist-items {

    margin-bottom: 12px;

}



.checklist-item {

    border-radius: 6px;

    margin-bottom: 8px;

    transition: all 0.2s;

}



.checklist-item:hover {

    background: #f9fafb;

}



.dark .checklist-item:hover {

    background: #4b5563;

}



.checklist-item-main {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 8px;

}



.checklist-item-completed .checklist-item-title {

    text-decoration: line-through;

    color: #9ca3af;

}



.checklist-item-completed .checklist-item-description {

    color: #9ca3af;

}



.dark .checklist-item-completed .checklist-item-title,

.dark .checklist-item-completed .checklist-item-description {

    color: #6b7280;

}



/* Custom Checkbox */

.checklist-item-checkbox-container {

    position: relative;

    cursor: pointer;

    display: flex;

    align-items: center;

    margin-top: 2px;

}



.checklist-item-checkbox {

    display: none;

}



.checklist-item-checkmark {

    width: 18px;

    height: 18px;

    border: 2px solid #d1d5db;

    border-radius: 4px;

    background: white;

    position: relative;

    transition: all 0.2s;

}



.dark .checklist-item-checkmark {

    border-color: #6b7280;

    background: #374151;

}



.checklist-item-checkbox:checked + .checklist-item-checkmark {

    background: #3b82f6;

    border-color: #3b82f6;

}



.checklist-item-checkbox:checked + .checklist-item-checkmark::after {

    content: '';

    position: absolute;

    left: 6px;

    top: 2px;

    width: 4px;

    height: 8px;

    border: solid white;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

}



.checklist-item-content {

    flex: 1;

}



.checklist-item-title {

    font-size: 14px;

    color: #374151;

    font-weight: 500;

    line-height: 1.4;

}



.dark .checklist-item-title {

    color: #f3f4f6;

}



.checklist-item-description {

    font-size: 12px;

    color: #6b7280;

    margin-top: 4px;

    line-height: 1.4;

}



.dark .checklist-item-description {

    color: #9ca3af;

}



.checklist-item-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 6px;

}



.checklist-item-assignee,

.checklist-item-due-date {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 11px;

    color: #6b7280;

    background: #f3f4f6;

    padding: 2px 6px;

    border-radius: 12px;

}



.dark .checklist-item-assignee,

.dark .checklist-item-due-date {

    color: #9ca3af;

    background: #4b5563;

}



.checklist-item-due-date-overdue {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 11px;

    color: #dc2626;

    background: #fee2e2;

    padding: 2px 6px;

    border-radius: 12px;

    font-weight: 500;

}



.dark .checklist-item-due-date-overdue {

    color: #fca5a5;

    background: #7f1d1d;

}



.checklist-item-actions {

    display: flex;

    gap: 4px;

    opacity: 0;

    transition: opacity 0.2s;

}



.checklist-item:hover .checklist-item-actions {

    opacity: 1;

}



.checklist-item-actions button {

    padding: 4px;

    border: none;

    background: transparent;

    color: #6b7280;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s;

}



.checklist-item-actions button:hover {

    background: #f3f4f6;

    color: #374151;

}



.dark .checklist-item-actions button {

    color: #9ca3af;

}



.dark .checklist-item-actions button:hover {

    background: #4b5563;

    color: #f3f4f6;

}



/* Add Item Button */

.checklist-add-item {

    margin-top: 8px;

}



.add-checklist-item-btn {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 8px 12px;

    background: transparent;

    border: 1px dashed #d1d5db;

    border-radius: 6px;

    color: #6b7280;

    font-size: 13px;

    cursor: pointer;

    transition: all 0.2s;

    width: 100%;

    text-align: left;

}



.add-checklist-item-btn:hover {

    background: #f9fafb;

    border-color: #9ca3af;

    color: #374151;

}



.dark .add-checklist-item-btn {

    border-color: #6b7280;

    color: #9ca3af;

}



.dark .add-checklist-item-btn:hover {

    background: #4b5563;

    border-color: #9ca3af;

    color: #f3f4f6;

}



/* Checklist Modal Styles */

#checklist-modal .checklist-form-group {

    margin-bottom: 16px;

}



#checklist-modal label {

    display: block;

    margin-bottom: 6px;

    font-weight: 500;

    color: #374151;

}



.dark #checklist-modal label {

    color: #f3f4f6;

}



#checklist-modal input,

#checklist-modal textarea,

#checklist-modal select {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-size: 14px;

    transition: border-color 0.2s;

}



.dark #checklist-modal input,

.dark #checklist-modal textarea,

.dark #checklist-modal select {

    background: #374151;

    border-color: #6b7280;

    color: #f3f4f6;

}



#checklist-modal input:focus,

#checklist-modal textarea:focus,

#checklist-modal select:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



/* Checklist Item Modal Styles */

#checklist-item-modal .form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



@media (max-width: 768px) {

    #checklist-item-modal .form-row {

        grid-template-columns: 1fr;

    }

}



/* Responsive Adjustments */

@media (max-width: 640px) {

    .checklist-header {

        flex-direction: column;

        gap: 8px;

    }

    

    .checklist-actions {

        align-self: flex-end;

    }

    

    .checklist-item-main {

        flex-direction: column;

        gap: 8px;

    }

    

    .checklist-item-actions {

        align-self: flex-end;

        opacity: 1;

    }

}



/* Animation for progress bar */

@keyframes progressFill {

    from {

        width: 0%;

    }

}



.checklist-progress-fill {

    animation: progressFill 0.5s ease-out;

}



/* Client card styles */

.kanban-task .client-card {

    transition: all 0.3s ease;

    backdrop-filter: blur(8px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.kanban-task .client-card:hover {

    transform: scale(1.02);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.dark .kanban-task .client-card {

    backdrop-filter: blur(8px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.dark .kanban-task .client-card:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

}



/* Client color dot animation */

.client-color-dot {

    transition: all 0.3s ease;

}



.client-card:hover .client-color-dot {

    transform: scale(1.1);

    box-shadow: 0 0 8px currentColor;

}