* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Tahoma, sans-serif; background: #f0f2f5; direction: rtl; padding: 20px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.toolbar button, .logout-btn {
    margin-left: 10px; padding: 8px 16px; cursor: pointer; background: #0d6efd; color: #fff; border: none; border-radius: 6px;
}
.logout-btn { background: #dc3545; text-decoration: none; display: inline-block; }
.board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; align-items: flex-start; min-height: 60vh; }
.column {
    min-width: 280px; max-width: 320px; background: #ebecf0; border-radius: 8px; padding: 12px;
    display: flex; flex-direction: column; flex-shrink: 0;
}
.column-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
.col-name { font-weight: bold; background: transparent; border: none; outline: none; padding: 4px; }
.delete-col-btn { background: none; border: none; cursor: pointer; color: red; font-size: 18px; }
.task-list { min-height: 60px; }
.task-card {
    background: white; border-radius: 6px; padding: 10px; margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: grab; position: relative;
}
.task-card:active { cursor: grabbing; }
.priority { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; color: #fff; }
.priority.low { background: #28a745; }
.priority.medium { background: #ffc107; color: #000; }
.priority.high { background: #dc3545; }
.card-actions { margin-top: 8px; display: flex; gap: 6px; }
.card-actions button { border: none; background: #eee; cursor: pointer; padding: 4px; border-radius: 4px; }

.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center; z-index: 1000;
}
.modal.hidden { display: none; }
.modal-content { background: #fff; padding: 24px; border-radius: 12px; min-width: 320px; max-width: 500px; width: 100%; position: relative; }
.close-modal { position: absolute; top: 8px; left: 12px; font-size: 24px; cursor: pointer; }
form input, form select, form textarea { width: 100%; padding: 8px; margin: 8px 0; border: 1px solid #ccc; border-radius: 6px; }
form button { padding: 10px 20px; background: #0d6efd; color: #fff; border: none; border-radius: 6px; cursor: pointer; }

@media (max-width: 768px) {
    .board { flex-direction: column; overflow-x: hidden; }
    .column { max-width: 100%; min-width: 100%; }
}