/* ═══════════════════════════════════════════════════════════
   נדל״ן פרו — Tasks Module Styles
   Kanban board, List view, Task cards, Priority indicators
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. PAGE HEADER
   ───────────────────────────────────────────────────────── */

.tasks-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tasks-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.tasks-content {
    min-height: 200px;
}

/* ─── View Toggle ─── */

.tasks-view-toggle {
    display: flex;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid var(--border-default);
}

.tasks-view-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-tertiary);
    cursor: pointer;
    transition:
        background var(--duration-fast),
        color var(--duration-fast),
        box-shadow var(--duration-fast);
    white-space: nowrap;
}
.tasks-view-btn .material-icons-round { font-size: 16px; }
.tasks-view-btn:hover { color: var(--text-primary); }
.tasks-view-btn.active {
    background: var(--bg-surface);
    color: var(--navy-700);
    box-shadow: var(--shadow-xs);
}

/* ─────────────────────────────────────────────────────────
   2. KANBAN BOARD
   ───────────────────────────────────────────────────────── */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    min-height: 400px;
    align-items: flex-start;
}

.kanban-column {
    background: var(--gray-25);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition:
        background var(--duration-fast),
        border-color var(--duration-fast);
}
.kanban-column.drag-over {
    background: var(--navy-50);
    border-color: var(--navy-200);
}

/* ─── Column Header ─── */

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    margin-bottom: var(--space-3);
}

.kanban-column-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kanban-column-dot.navy    { background: var(--navy-500); }
.kanban-column-dot.gold    { background: var(--gold-500); }
.kanban-column-dot.info    { background: var(--info-500); }
.kanban-column-dot.emerald { background: var(--emerald-500); }

.kanban-column-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    flex: 1;
}

.kanban-column-count {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    background: var(--gray-100);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Cards Container ─── */

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    flex: 1;
    min-height: 60px;
}

/* ─── Quick Add Button ─── */

.kanban-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: var(--space-2);
    margin-top: var(--space-2);
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition:
        border-color var(--duration-fast),
        color var(--duration-fast),
        background var(--duration-fast);
}
.kanban-add-btn .material-icons-round { font-size: 16px; }
.kanban-add-btn:hover {
    border-color: var(--navy-300);
    color: var(--navy-600);
    background: rgba(77,103,147,0.04);
}

/* ─────────────────────────────────────────────────────────
   3. KANBAN CARD
   ───────────────────────────────────────────────────────── */

.kanban-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(0,0,0,0.04);
    cursor: grab;
    overflow: hidden;
    transition:
        box-shadow var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring),
        opacity var(--duration-fast);
}
.kanban-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.4; transform: rotate(-1deg); }

.kanban-card.overdue {
    border-color: rgba(239,68,68,0.2);
}

/* Priority top strip */
.kanban-card-priority {
    height: 3px;
    width: 100%;
}
.kanban-card-priority.priority-urgent { background: var(--danger-500); }
.kanban-card-priority.priority-high   { background: var(--gold-500); }
.kanban-card-priority.priority-medium { background: var(--navy-300); }
.kanban-card-priority.priority-low    { background: var(--gray-200); }

.kanban-card-body { padding: var(--space-3); }

.kanban-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1-5);
}

.kanban-card-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

/* ─── Card Meta ─── */

.kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.kanban-card-tx,
.kanban-card-due {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.kanban-card-tx .material-icons-round,
.kanban-card-due .material-icons-round { font-size: 12px; }

.kanban-card-due.overdue {
    color: var(--danger-600);
    font-weight: var(--weight-bold);
}

/* ─── Card Footer ─── */

.kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.kanban-card-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
}
.kanban-card-priority-badge .material-icons-round { font-size: 11px; }

.kanban-card-priority-badge.priority-urgent { background: var(--danger-50); color: var(--danger-700); }
.kanban-card-priority-badge.priority-high   { background: var(--gold-50); color: var(--gold-700); }
.kanban-card-priority-badge.priority-medium { background: var(--gray-75); color: var(--gray-600); }
.kanban-card-priority-badge.priority-low    { background: var(--gray-50); color: var(--gray-400); }

.kanban-card-assignee {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-2xs);
    color: var(--text-muted);
}
.kanban-card-assignee .material-icons-round { font-size: 12px; }

/* ─────────────────────────────────────────────────────────
   4. LIST VIEW
   ───────────────────────────────────────────────────────── */

.tasks-table { min-width: 800px; }
.tasks-table th:first-child { width: 8px; padding-right: var(--space-2); }

.tasks-row {
    cursor: pointer;
    transition: background var(--duration-fast);
}
.tasks-row:hover { background: var(--gray-25); }
.tasks-row.done { opacity: 0.55; }
.tasks-row.done .tasks-title { text-decoration: line-through; }
.tasks-row.overdue { background: rgba(239,68,68,0.02); }

/* Priority dot in list */
.tasks-priority-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.tasks-priority-dot.priority-urgent { background: var(--danger-500); box-shadow: 0 0 4px rgba(239,68,68,0.4); }
.tasks-priority-dot.priority-high   { background: var(--gold-500); }
.tasks-priority-dot.priority-medium { background: var(--navy-300); }
.tasks-priority-dot.priority-low    { background: var(--gray-300); }

.tasks-title-cell { max-width: 280px; }

.tasks-title {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tasks-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.tasks-tx-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--navy-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    transition: background var(--duration-fast);
}
.tasks-tx-link .material-icons-round { font-size: 13px; }
.tasks-tx-link:hover { background: var(--navy-50); }

.tasks-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.tasks-priority-badge .material-icons-round { font-size: 12px; }

.tasks-priority-badge.priority-urgent { background: var(--danger-50); color: var(--danger-700); }
.tasks-priority-badge.priority-high   { background: var(--gold-50); color: var(--gold-700); }
.tasks-priority-badge.priority-medium { background: var(--gray-75); color: var(--gray-600); }
.tasks-priority-badge.priority-low    { background: var(--gray-50); color: var(--gray-400); }

.tasks-due-overdue {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--danger-600);
}
.tasks-due-overdue .material-icons-round { font-size: 14px; }

.tasks-status-select {
    appearance: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-family: var(--font-primary);
    color: var(--text-secondary);
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast);
    direction: rtl;
    min-width: 90px;
}
.tasks-status-select:hover { border-color: var(--navy-300); }
.tasks-status-select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}

/* ─────────────────────────────────────────────────────────
   5. MODAL FORM
   ───────────────────────────────────────────────────────── */

.tasks-modal {
    max-width: 600px;
    max-height: 90vh;
}

.tasks-modal .modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: flex-end;
}

.tasks-form { display: flex; flex-direction: column; gap: var(--space-1); }

.tasks-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.tasks-form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ─────────────────────────────────────────────────────────
   6. TASK FILTER — Transaction Dropdown
   ───────────────────────────────────────────────────────── */

.tasks-tx-filter {
    height: 36px;
    font-size: var(--text-xs);
    min-width: 180px;
}

/* ─────────────────────────────────────────────────────────
   7. RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .kanban-board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .kanban-board { grid-template-columns: 1fr; }
    .tasks-header-actions { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .tasks-toolbar { flex-direction: column; }
    .tasks-form-row,
    .tasks-form-row-3 { grid-template-columns: 1fr; }
}