/* ProjectManager — استایل اجزای اختصاصی: برد، تقویم، تایم لاین، تور */

/* ============================== Board (Kanban) ======================== */
.pm-board {
    display: flex; gap: 0.875rem; overflow-x: auto; align-items: flex-start;
    padding-bottom: 0.75rem; min-height: 60vh;
}
.pm-board-column {
    flex: 0 0 18.75rem; background: var(--surface-muted);
    border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; max-height: 78vh;
}
.pm-board-column.drag-over { outline: 0.125rem dashed var(--primary); outline-offset: -0.25rem; }
.pm-board-column-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 0.875rem; font-size: 0.8125rem; font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.pm-board-column-head .pm-col-count {
    margin-inline-start: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: 0.875rem; font-size: 0.6875rem; padding: 0 0.5rem; color: var(--text-muted); font-weight: 600;
}
.pm-board-column-head .pm-col-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.pm-board-cards { padding: 0.625rem; display: flex; flex-direction: column; gap: 0.625rem; overflow-y: auto; min-height: 5rem; }
.pm-board-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.75rem 0.875rem;
    box-shadow: var(--shadow-sm); cursor: grab;
    display: flex; flex-direction: column; gap: 0.5rem;
    transition: box-shadow .15s, opacity .15s;
}
.pm-board-card:hover { box-shadow: var(--shadow-md); }
.pm-board-card.dragging { opacity: .45; transform: rotate(2deg); }
.pm-board-card .pm-card-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); text-decoration: none; display: block; line-height: 1.6; }
.pm-board-card .pm-card-title:hover { color: var(--primary-dark); }
.pm-board-card .pm-card-foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pm-board-card .pm-card-due { font-size: 0.6875rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.25rem; }
.pm-board-card .pm-card-due.overdue { color: var(--danger); font-weight: 600; }
.pm-board-add {
    border: 0.09375rem dashed var(--border); background: transparent; color: var(--text-muted);
    border-radius: var(--radius-sm); padding: 0.5625rem; font-family: inherit; font-size: 0.78125rem;
    cursor: pointer; transition: all .15s;
}
.pm-board-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ============================== Calendar ============================== */
.pm-calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pm-calendar-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.pm-calendar-head .pm-cal-title { font-size: 0.90625rem; font-weight: 700; margin: 0; }
.pm-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pm-cal-weekday {
    text-align: center; font-size: 0.71875rem; font-weight: 600; color: var(--text-muted);
    padding: 0.5rem 0.25rem; background: var(--surface-muted); border-bottom: 1px solid var(--border);
}
.pm-cal-cell {
    min-height: 6.75rem; border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 0.375rem; font-size: 0.75rem; position: relative; transition: background .15s;
}
.pm-cal-cell:nth-child(7n) { border-inline-end: 0; }
.pm-cal-cell.other { color: var(--text-muted); opacity: .55; background: var(--surface-muted); }
.pm-cal-cell.today .pm-cal-daynum {
    background: var(--primary); color: #fff; border-radius: 50%;
    width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.pm-cal-cell.clickable { cursor: pointer; }
.pm-cal-cell.clickable:hover { background: var(--primary-soft); }
.pm-cal-daynum { font-weight: 600; display: inline-block; margin-bottom: 0.25rem; }
.pm-cal-events { display: flex; flex-direction: column; gap: 0.1875rem; }
.pm-cal-event {
    font-size: 0.65625rem; padding: 0.1875rem 0.4375rem; border-radius: 0.375rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; cursor: pointer; border: 0; text-align: start;
    font-family: inherit; display: block; width: 100%;
    color: #fff; background: var(--primary);
}
.pm-cal-event:hover { filter: brightness(.94); }
.pm-cal-event.st-done { opacity: .55; text-decoration: line-through; }
.pm-cal-event.st-in_progress { background: var(--info); }
.pm-cal-event.st-review { background: var(--warning); }
.pm-cal-event.st-blocked { background: var(--danger); }
.pm-cal-event.st-cancelled { background: #94a3b8; }
.pm-cal-more { font-size: 0.625rem; color: var(--text-muted); background: none; border: 0; padding: 1px 0.4375rem; font-family: inherit; }
/* نمای هفتگی */
.pm-calendar.week .pm-cal-cell { min-height: 26.25rem; }

/* ============================== Timeline ============================== */
.pm-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.125rem; overflow-x: auto; }
.pm-timeline-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.4375rem 0; min-width: 40rem; }
.pm-timeline-row .pm-tl-name {
    flex: 0 0 14.375rem; font-size: 0.78125rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-timeline-row .pm-tl-name a { color: inherit; }
.pm-timeline-row .pm-tl-name a:hover { color: var(--primary-dark); }
.pm-tl-track { flex: 1; height: 1.625rem; background: var(--surface-muted); border-radius: 0.5rem; position: relative; }
.pm-tl-bar {
    position: absolute; top: 0.25rem; height: 1.125rem; border-radius: 0.375rem;
    background: var(--primary); opacity: .9; min-width: 0.375rem;
    box-shadow: var(--shadow-sm);
}
.pm-tl-bar.done { background: var(--success); }
.pm-tl-bar.overdue { background: var(--danger); }
.pm-tl-bar:hover { opacity: 1; }
.pm-tl-axis { display: flex; gap: 0; margin-inline-start: 15.25rem; min-width: 0; font-size: 0.625rem; color: var(--text-muted); min-width: 40rem; padding: 0.125rem 0 0.375rem; }
.pm-tl-axis span { flex: 1; text-align: center; border-inline-start: 1px dashed var(--border); }

/* ============================== Product Tour =========================== */
.pm-tour-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(10, 25, 18, .62); backdrop-filter: blur(1px);
    transition: all .3s ease;
}
.pm-tour-highlight {
    position: fixed; z-index: 3001; border-radius: 0.75rem;
    box-shadow: 0 0 0 0.1875rem var(--primary), 0 0 0 9999px rgba(10, 25, 18, .62);
    transition: all .3s ease; pointer-events: none;
}
.pm-tour-popover {
    position: fixed; z-index: 3002; width: 20rem; max-width: calc(100vw - 2rem);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 1.125rem;
}
.pm-tour-popover .pm-tour-step { font-size: 0.6875rem; color: var(--text-muted); font-weight: 700; }
.pm-tour-popover h4 { font-size: 0.9375rem; margin: 0.375rem 0 0.375rem; }
.pm-tour-popover p { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.875rem; line-height: 1.9; }
.pm-tour-actions { display: flex; align-items: center; gap: 0.5rem; }
.pm-tour-actions .pm-tour-skip { margin-inline-end: auto; }

/* ============================== Onboarding ============================= */
.pm-onboard-slide { text-align: center; padding: 0.75rem 0.375rem; }
.pm-onboard-slide .pm-onboard-icon {
    width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 1.375rem;
    background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.875rem;
}
.pm-onboard-slide h4 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.pm-onboard-slide p { color: var(--text-muted); font-size: 0.84375rem; line-height: 2; }
.pm-onboard-dots { display: flex; gap: 0.375rem; justify-content: center; margin: 0.875rem 0; }
.pm-onboard-dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border); transition: all .2s; }
.pm-onboard-dots span.active { background: var(--primary); width: 1.25rem; border-radius: 0.375rem; }

/* ============================ Charts (SVG/CSS) ========================= */
.pm-donut-wrap { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; }
.pm-donut-legend { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.78125rem; }
.pm-donut-legend .pm-leg { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.pm-donut-legend .pm-leg b { color: var(--text); margin-inline-start: auto; font-weight: 700; }
.pm-donut-legend .pm-leg .pm-leg-dot { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; }
.pm-bars { display: flex; align-items: flex-end; gap: 0.3125rem; height: 7.5rem; padding-top: 0.5rem; }
.pm-bars .pm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; height: 100%; justify-content: flex-end; }
.pm-bars .pm-bar { width: 100%; max-width: 1.625rem; background: var(--primary); border-radius: 0.3125rem 0.3125rem 0 0; min-height: 0.1875rem; opacity: .85; transition: height .3s; }
.pm-bars .pm-bar:hover { opacity: 1; }
.pm-bars .pm-bar-label { font-size: 0.59375rem; color: var(--text-muted); }

/* ============================ Misc (attachments, comments) ============= */
.pm-attachment-item {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.75rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.pm-attachment-item .pm-att-icon {
    width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; background: var(--primary-soft);
    color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 0.9375rem;
}
.pm-comment { display: flex; gap: 0.625rem; padding: 0.75rem 0; border-bottom: 1px dashed var(--border); }
.pm-comment:last-child { border-bottom: 0; }
.pm-comment-body { font-size: 0.8125rem; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.pm-comment-body .pm-mention { color: var(--primary-dark); font-weight: 700; background: var(--primary-soft); border-radius: 0.25rem; padding: 0 0.25rem; }
[data-bs-theme="dark"] .pm-comment-body .pm-mention { color: var(--primary); }

/* کامپکت: تغییر وضعیت سریع در صفحه تسک */
.pm-status-pills { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.pm-status-pill {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    border-radius: 1.125rem; padding: 0.25rem 0.8125rem; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted); font-family: inherit; transition: all .15s;
}
.pm-status-pill:hover { border-color: var(--primary); color: var(--primary-dark); }
.pm-status-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* زیرتسک لیست */
.pm-subtask-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0; border-bottom: 1px dashed var(--border); }
.pm-subtask-row:last-child { border-bottom: 0; }
.pm-subtask-row .pm-subtask-title { font-size: 0.8125rem; flex: 1; }
.pm-subtask-row.done .pm-subtask-title { text-decoration: line-through; color: var(--text-muted); }

/* پاسخ گویی موبایل در responsive.css */

/* نمای هفتگی تقویم */
.pm-cal-cell.week-cell { min-height: 18.75rem; }
.pm-calendar.week .pm-calendar-grid { grid-template-columns: repeat(7, 1fr); }

/* ------------------------------ فاز ۲: ثبت زمان ------------------------------ */
.pm-time-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.6875rem; font-weight: 700; color: var(--text-muted);
    background: var(--surface-muted); border: 1px solid var(--border);
    border-radius: 0.75rem; padding: 1px 0.5rem; direction: ltr;
}
.pm-time-badge .pm-time-est { color: var(--text-muted); font-weight: 600; opacity: .85; }
.pm-timer-dot {
    width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: #dc2626;
    display: inline-block; animation: pm-pulse 1.2s ease-in-out infinite;
}
@keyframes pm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}
.pm-timer-active {
    background: var(--primary-soft);
    border: 1px solid var(--primary);
}
.pm-timer-clock { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.03125rem; }

/* نشانگر تایمر در نوار بالا */
.pm-timer-chip {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    border: 1px solid var(--border); background: var(--surface);
    border-radius: 1.25rem; padding: 0.25rem 0.75rem; font-size: 0.75rem;
    text-decoration: none; color: var(--text); max-width: 20rem;
    transition: border-color .15s;
}
.pm-timer-chip:hover { border-color: var(--primary); color: var(--text); }
.pm-timer-chip-title { max-width: 8.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pm-timer-chip-clock { font-weight: 700; color: var(--primary-dark); }
.pm-timer-chip-stop {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.375rem; height: 1.375rem; border-radius: 50%;
    background: #dc2626; color: #fff; cursor: pointer; font-size: 0.6875rem;
}
.pm-timer-chip-stop:hover { background: #b91c1c; color: #fff; }

/* سطل بازیافت */
.pm-trash-item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.25rem; border-bottom: 1px dashed var(--border);
}
.pm-trash-item:last-child { border-bottom: 0; }

/* انتخابگر تم رنگی (تنظیمات ← ظاهر، پروفایل و منوی تم) */
.pm-color-picker { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.pm-color-swatch {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 1px solid var(--border); background: var(--surface);
    border-radius: 1.25rem; padding: 0.375rem 0.875rem 0.375rem 0.4375rem;
    font-family: inherit; font-size: 0.78125rem; font-weight: 600; color: var(--text);
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.pm-color-swatch:hover { border-color: var(--primary); }
.pm-color-swatch.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
[data-bs-theme="dark"] .pm-color-swatch.active { color: var(--primary); }
.pm-color-dot {
    width: 1.25rem; height: 1.25rem; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.pm-color-swatch.active .pm-color-dot {
    box-shadow: 0 0 0 0.125rem var(--surface), 0 0 0 0.25rem currentColor;
}
/* دایره های کوچک تم در منوی بازشوی نوار بالا */
.pm-color-dot-btn {
    width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: transparent; display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s;
}
.pm-color-dot-btn:hover { transform: scale(1.15); }
.pm-color-dot-btn > span {
    display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.pm-color-dot-btn.active > span {
    box-shadow: 0 0 0 0.125rem var(--surface), 0 0 0 0.1875rem currentColor;
}

/* پایگاه دانش و مستندات تیم */
.hover-shadow { transition: transform .15s ease, box-shadow .15s ease; }
.hover-shadow:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; }
.pm-doc-content { line-height: 1.9; color: var(--text); }
.pm-doc-content p { margin-bottom: 1rem; }
.pm-doc-content .pm-code-block {
    background: #1e293b; color: #f8fafc; padding: 1rem; border-radius: 0.5rem;
    direction: ltr; text-align: left; overflow-x: auto; font-family: monospace;
}
.pm-doc-content .pm-inline-code { font-family: monospace; direction: ltr; display: inline-block; }
.pm-doc-content .pm-doc-quote {
    background: var(--surface-muted); padding: 0.75rem 1.25rem;
    border-radius: 0 0.5rem 0.5rem 0; margin: 1.25rem 0; color: var(--text-muted);
}
.pm-doc-content ul.pm-doc-list { padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.pm-doc-content ul.pm-doc-list li { margin-bottom: 0.375rem; }