/**
 * پروژه: پنل مدیریت تسک با بات تلگرام و بله
 * فایل: public/assets/css/app.css
 * توضیح: استایل‌های اختصاصی پنل (فونت فارسی، تم روشن/تاریک، ظاهر کانبان و
 *        صفحه‌ی ورود). استایل پایه از Bootstrap RTL می‌آید؛ این فایل فقط
 *        تکمیل‌کننده است.
 *
 * نویسنده: Majid Rowshanzamir
 */

:root {
    --app-font: 'Vazirmatn', Tahoma, sans-serif;
}

body {
    font-family: var(--app-font);
}

/* ===================== صفحه‌ی ورود/راه‌اندازی ===================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #f8f9fa);
}
.auth-card {
    width: 100%;
    max-width: 380px;
}

/* ===================== تخته‌ی کانبان ===================== */
/* لیست‌ها دیگر تعداد ثابتی نیستند (هر کاربر لیست دلخواه خودش را اضافه می‌کند)،
   پس به‌جای گرید بوت‌استرپ از یک ردیف افقی با اسکرول استفاده می‌شود؛ هر ستون
   عرض ثابت دارد تا با اضافه‌شدن لیست جدید چیده‌مانی به‌هم نریزد. */
.kanban-column-wrap {
    flex: 0 0 300px;
    width: 300px;
}
.kanban-column {
    background: var(--bs-tertiary-bg);
    border-radius: 0.75rem;
    padding: 0.75rem;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
}
.kanban-column-header {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}
.kanban-column-header .list-name-text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kanban-column-body {
    flex-grow: 1;
    min-height: 100px;
}
.kanban-column-body.drag-over {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 4px;
    border-radius: 0.5rem;
}

.task-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-inline-start: 4px solid var(--card-accent, var(--bs-secondary));
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.task-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.task-card .task-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.task-card.overdue {
    border-inline-start-color: var(--bs-danger) !important;
}
.task-card .task-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sortable-ghost {
    opacity: 0.4;
}

.stat-card {
    height: 100%;
}

.category-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}