/* ==================== تقویم نوبت‌ها (نمای ماهانه‌ی شمسی) ==================== */
/* متغیرهای غایب در تم پنل را روی wrapper تعریف می‌کنیم (این فایل فقط همین صفحه لود می‌شود). */
.appt-cal {
    --border-color: #e5e7eb;
    --bg-white: #ffffff;
    --text-secondary: #6b7280;
    --text-primary: #111827;
    --border-radius: 12px;
    --primary-gradient: linear-gradient(135deg, #5b7dff, #8b5cf6);
    --gray-50: #f9fafb;
}

.appt-cal .cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.appt-cal .cal-title { font-size: 18px; font-weight: 800; margin: 0; color: var(--text-primary); min-width: 150px; text-align: center; }
.appt-cal #calToday { margin-inline-start: auto; }

.appt-cal .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.appt-cal .cal-loading, .appt-cal .cal-error { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 32px 8px; }
.appt-cal .cal-dow { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); padding: 6px 0; }
.appt-cal .cal-cell { position: relative; min-height: 64px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-white); padding: 6px 8px; cursor: pointer; transition: all .15s; }
.appt-cal .cal-cell:hover { border-color: #5b7dff; box-shadow: 0 2px 8px rgba(91,125,255,.12); }
.appt-cal .cal-cell.empty { border: none; background: transparent; cursor: default; box-shadow: none; }
.appt-cal .cal-num { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.appt-cal .cal-cell.today { border-color: #5b7dff; }
.appt-cal .cal-cell.today .cal-num { color: #5b7dff; }
.appt-cal .cal-cell.selected { background: var(--primary-gradient); border-color: transparent; }
.appt-cal .cal-cell.selected .cal-num { color: #fff; }
.appt-cal .cal-badge { position: absolute; bottom: 6px; inset-inline-end: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 50px; background: #5b7dff; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.appt-cal .cal-cell.selected .cal-badge { background: rgba(255,255,255,.9); color: #5b7dff; }
.appt-cal .cal-cell.has:not(.selected) { background: var(--gray-50); }

.appt-cal .cal-day { margin-top: 22px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.appt-cal .cal-day-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; }
.appt-cal .cal-empty { color: var(--text-secondary); font-size: 14px; padding: 12px 0; }

.appt-cal .cal-appt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 10px; background: var(--bg-white); transition: all .15s; }
.appt-cal .cal-appt:hover { border-color: #5b7dff; box-shadow: var(--shadow-sm); }
.appt-cal .cal-appt-time { font-weight: 800; font-size: 16px; color: var(--text-primary); direction: ltr; min-width: 52px; text-align: center; }
.appt-cal .cal-appt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.appt-cal .cal-appt-main b { font-size: 14.5px; color: var(--text-primary); }
.appt-cal .cal-appt-car { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.appt-cal .cal-appt-svc { font-size: 12.5px; color: var(--text-secondary); }

@media (max-width: 576px) {
    .appt-cal .cal-cell { min-height: 52px; padding: 4px 5px; }
    .appt-cal .cal-num { font-size: 13px; }
    .appt-cal .cal-appt { flex-wrap: wrap; }
}