/* Tarefas: extensao visual do design system do PlanetaJJ. */
.task-page-card { overflow: hidden; }

.task-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
    gap: 14px;
    align-items: end;
    margin: 20px 24px 0;
    padding: 16px;
    border: 1px solid #d9e3ec;
    border-radius: 14px;
    background: #f8fafc;
}

.task-filters .form-group { margin: 0; }
.task-clear-filter {
    display: inline-flex;
    height: 50px;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.task-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 18px;
    padding: 20px 24px 24px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.task-column {
    --task-status-color: #64748b;
    --task-status-border: #cbd5e1;
    --task-card-border: rgba(100,116,139,.3);
    --task-card-border-hover: rgba(100,116,139,.48);
    --task-status-soft: #f1f5f9;
    --task-status-glow: rgba(100,116,139,.16);
    --task-structure-border: #d8e2eb;
    min-width: 0;
    border: 1px solid var(--task-structure-border);
    border-radius: 18px;
    background: #f7f9fb;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(11,28,45,.05);
}

.task-column[data-task-status='A Fazer'] {
    --task-status-color: #EF4444;
    --task-status-border: #fecaca;
    --task-status-soft: #fff1f2;
    --task-status-glow: rgba(239,68,68,.17);
    --task-card-border: rgba(239,68,68,.3);
    --task-card-border-hover: rgba(239,68,68,.5);
}

.task-column[data-task-status='Em Andamento'] {
    --task-status-color: #F59E0B;
    --task-status-border: #fde68a;
    --task-status-soft: #fffbeb;
    --task-status-glow: rgba(245,158,11,.18);
    --task-card-border: rgba(245,158,11,.31);
    --task-card-border-hover: rgba(245,158,11,.51);
}

.task-column[data-task-status='Em Revisão'] {
    --task-status-color: #3B82F6;
    --task-status-border: #bfdbfe;
    --task-status-soft: #eff6ff;
    --task-status-glow: rgba(59,130,246,.17);
    --task-card-border: rgba(59,130,246,.3);
    --task-card-border-hover: rgba(59,130,246,.5);
}

.task-column[data-task-status='Concluída'] {
    --task-status-color: #10B981;
    --task-status-border: #a7f3d0;
    --task-status-soft: #ecfdf5;
    --task-status-glow: rgba(16,185,129,.17);
    --task-card-border: rgba(16,185,129,.3);
    --task-card-border-hover: rgba(16,185,129,.5);
}

.task-column-header {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--task-structure-border);
    background: rgba(255,255,255,.88);
}

.task-column-header h3 {
    margin: 0;
    color: var(--task-status-color);
    font-size: 14px;
    font-weight: 800;
}

.task-column-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--task-status-color);
    box-shadow: 0 0 0 3px var(--task-status-glow);
}

.task-column-count {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--task-status-color);
    background: var(--task-status-soft);
    border: 1px solid var(--task-status-border);
    font-size: 12px;
    font-weight: 800;
}

.task-column-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 360px;
    padding: 12px;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.task-column-body.task-drop-active {
    background: var(--task-status-soft);
    box-shadow: inset 0 0 0 2px var(--task-status-color);
}

.task-card {
    position: relative;
    display: grid;
    gap: 11px;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--task-card-border);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0, #edf3f7 0, #fff 49%);
    color: #0B1C2D;
    box-shadow: 0 3px 10px rgba(11,28,45,.045);
    cursor: grab;
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.task-card:hover,
.task-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--task-card-border-hover);
    box-shadow: 0 7px 18px rgba(11,28,45,.075);
    outline: none;
}

.task-card.is-overdue {
    background: radial-gradient(circle at 100% 0, #edf3f7 0, #fff 49%);
}
.task-card.is-dragging { opacity: .45; transform: rotate(1deg) scale(.98); cursor: grabbing; }
.task-card.is-saving { opacity: .58; pointer-events: none; }

.task-card-title {
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.task-card-top,
.task-card-meta,
.task-card-meta span {
    display: flex;
    align-items: center;
}

.task-card-top { justify-content: space-between; gap: 10px; }
.task-card-meta { flex-wrap: wrap; gap: 8px 12px; color: #64748b; font-size: 11px; font-weight: 650; }
.task-card-meta span { gap: 6px; min-width: 0; }
.task-card-meta .task-card-owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card-meta .overdue { color: #b91c1c; font-weight: 800; }

.task-priority {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    color: #475569;
    background: #eef2f6;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.task-priority.baixa { color: #047857; background: #d1fae5; }
.task-priority.media { color: #1d4ed8; background: #dbeafe; }
.task-priority.alta { color: #9a3412; background: #ffedd5; }
.task-priority.urgente { color: #b91c1c; background: #fee2e2; }

.task-empty {
    display: grid;
    place-items: center;
    min-height: 118px;
    padding: 20px 12px;
    border: 1px dashed var(--task-structure-border);
    border-radius: 12px;
    color: #8292a3;
    background: rgba(255,255,255,.34);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.task-modal-content { max-width: 760px; }
.task-modal-subtitle { margin: 5px 0 0; color: #64748b; font-size: 13px; }
.task-form-grid { margin-top: 4px; }

.task-metadata {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.task-metadata[hidden] { display: none; }
.task-metadata > div { min-width: 0; padding: 11px; border-radius: 11px; background: #f8fafc; }
.task-metadata span { display: block; margin-bottom: 5px; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.task-metadata strong { display: block; color: #0B1C2D; font-size: 12px; overflow-wrap: anywhere; }
.task-modal-footer-spacer { flex: 1; }

html[data-theme='dark'] .task-filters { border-color: #2d4254; background: #142433; }
html[data-theme='dark'] .task-column {
    --task-structure-border: #32495b;
    background: #142433;
}
html[data-theme='dark'] .task-column-header { background: rgba(16,32,46,.92); }
html[data-theme='dark'] .task-card-title,
html[data-theme='dark'] .task-metadata strong { color: #f8fafc; }
html[data-theme='dark'] .task-column-count {
    color: var(--task-status-color);
    background: color-mix(in srgb, var(--task-status-color) 7%, #172938);
    border-color: color-mix(in srgb, var(--task-status-color) 30%, #32495b);
}
html[data-theme='dark'] .task-column-body.task-drop-active { background: color-mix(in srgb, var(--task-status-color) 12%, #142433); }
html[data-theme='dark'] .task-card {
    border-color: var(--task-card-border);
    background: radial-gradient(circle at 100% 0, #1a3245 0, #10202e 50%);
    color: #f8fafc;
    box-shadow: 0 3px 10px rgba(0,0,0,.13);
}
html[data-theme='dark'] .task-card:hover {
    border-color: var(--task-card-border-hover);
    box-shadow: 0 7px 18px rgba(0,0,0,.2);
}
html[data-theme='dark'] .task-card.is-overdue {
    background: radial-gradient(circle at 100% 0, #1a3245 0, #10202e 50%);
}
html[data-theme='dark'] .task-card-meta,
html[data-theme='dark'] .task-modal-subtitle { color: #9fb0c3; }
html[data-theme='dark'] .task-card-meta .overdue { color: #fca5a5; }
html[data-theme='dark'] .task-empty { border-color: var(--task-structure-border); color: #8295a8; background: rgba(5,16,26,.16); }
html[data-theme='dark'] .task-metadata { border-color: #2d4254; }
html[data-theme='dark'] .task-metadata > div { background: #142433; }
html[data-theme='dark'] .task-metadata span { color: #8fa2b5; }

@media (max-width: 1180px) {
    .task-filters { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
    .task-clear-filter { grid-column: 1 / -1; justify-content: center; }
    .task-board { grid-template-columns: repeat(4, minmax(280px, 1fr)); }
}

@media (max-width: 760px) {
    .task-filters { grid-template-columns: 1fr; margin: 14px 14px 0; }
    .task-clear-filter { grid-column: auto; width: 100%; }
    .task-board {
        grid-template-columns: repeat(4, minmax(82vw, 82vw));
        gap: 12px;
        padding: 14px;
        scroll-snap-type: x mandatory;
    }
    .task-column { scroll-snap-align: start; }
    .task-column-body { min-height: 310px; }
    .task-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-modal-footer { flex-wrap: wrap; }
    .task-modal-footer-spacer { display: none; }
    .task-delete-button { margin-right: auto; }
}

@media (max-width: 430px) {
    .task-board { grid-template-columns: repeat(4, minmax(86vw, 86vw)); }
    .task-metadata { grid-template-columns: 1fr; }
    .task-modal-footer > button { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .task-card,
    .task-column-body { transition: none; }
}