/*
 * «تاریخچه تغییرات اطلاعات» — تسک ۱۴۰۵/۰۶/۱۳/۰۱
 *
 * سه چیز اینجا تعریف می‌شود و بیشتر از این نه:
 *   ۱. خط وضعیت زیر هر فیلد، سبز یا قرمز (الزام فیلد-۰۰۲، ۱۷ و ۱۸)؛
 *   ۲. آواتار کارمند در هر ردیف تاریخچه، با یک اندازه واحد در کل پروژه
 *      (الزام کارمند-۰۰۱، ۱۱ و ظاهر-۰۰۱)؛
 *   ۳. رنگ ردیف‌های یکی‌درمیان، از همان پالت استاندارد پنل (الزام ظاهر-۰۰۲).
 *
 * رنگ‌ها همگی از توکن‌های `--std-color-*` گرفته می‌شوند — همان پالتی که
 * «استانداردسازی نمای پنل» اداره می‌کند — تا تغییر رنگ هویت آژانس اینجا هم
 * دیده شود و رنگ خامی در این فایل تصمیم‌گیرنده نباشد.
 */

/* ── خط وضعیت زیر فیلد (الزام فیلد-۰۰۱ … ۰۰۳) ──────────────────────────── */

/*
 * دکمه است، نه متن: با کلیک، پنجره تاریخچه همان فیلد باز می‌شود. اما باید
 * مثل یک یادداشت کوچک زیر فیلد دیده شود، نه مثل دکمه — پس همه ظاهر دکمه‌ای
 * از آن گرفته شده و فقط نشانگر دست باقی مانده است.
 */
.fi-data-history-note {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
    text-align: start;
}

.fi-data-history-note:hover {
    text-decoration: underline;
}

/* سبز: دست‌کم یک سابقه واقعی ثبت شده است (الزام ۱۸). */
.fi-data-history-note-present {
    color: var(--std-color-success-600, #16a34a);
}

.dark .fi-data-history-note-present {
    color: var(--std-color-success-400, #4ade80);
}

/*
 * قرمز: سابقه‌ای ثبت نشده است. این خطا نیست و نباید مثل خطا دیده شود
 * (الزام ۱۷) — به همین دلیل نازک و کوچک است، نه ضخیم.
 */
.fi-data-history-note-absent {
    color: var(--std-color-danger-600, #dc2626);
}

.dark .fi-data-history-note-absent {
    color: var(--std-color-danger-400, #f87171);
}

/* ── «؟» به‌جای یک جمله کامل (سابقه‌سراسری-۰۰۳ تا ۰۰۶ و ۰۲۴) ──────────────
 *
 * حالت «بدون سابقه» پیش از این نُه کلمه بود، قرمز، روی یک خط مستقل، زیر تک‌تک
 * فیلدهای فرم. مدیریتی با چهل فیلد چهل بار همان جمله را می‌کشید و فرم به دیواری
 * از یک جمله تبدیل می‌شد که فقط می‌گفت هیچ اتفاقی نیفتاده است.
 *
 * حالا یک علامت سؤال است و در ردیف برچسب فیلد کشیده می‌شود، نه زیر آن — پس هیچ
 * ارتفاعی به فرم اضافه نمی‌کند. حاشیه خودکار همان چیزی است که آن را کنار برچسب
 * نگه می‌دارد: جایگاه «بعد از برچسب» به انتهای ردیف چسبانده می‌شود و بدون این
 * حاشیه، علامت به آن‌سوی ردیف پرتاب می‌شد؛ دور از فیلدی که درباره آن است
 * (سابقه‌سراسری-۰۲۲). */

.fi-fo-field-label-ctn:has(.fi-data-history-mark) {
    column-gap: 0.375rem;
}

.fi-data-history-mark {
    margin-top: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.fi-data-history-mark:hover {
    text-decoration: none;
    transform: scale(1.15);
}

/* ── کارمند هر ردیف تاریخچه (الزام کارمند-۰۰۱، ۱۱ و ظاهر-۰۰۱) ──────────── */

/*
 * سلول جدول یک ردیف flex است؛ بدون عرض کامل، تصویر به لبه ستون می‌چسبد و
 * از هم‌ترازی خود ستون پیروی نمی‌کند.
 */
.fi-data-history-employee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/*
 * ۲ رem — همان اندازه‌ای که `AuthorColumns` برای آواتار کارمند در جدول‌های
 * دیگر پنل می‌کشد. یک اندازه، در همه صفحه‌ها و همه مدیریت‌ها.
 */
.fi-data-history-avatar,
.fi-data-history-system-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.fi-data-history-avatar {
    object-fit: cover;
}

/*
 * تغییری که کارمندی پشت آن نبوده است: نشان استاندارد «سیستم» به‌جای چهره‌ای
 * که وجود ندارد (الزام ثبت-۰۰۳). جای آن هرگز خالی نمی‌ماند (الزام ۱۱).
 */
.fi-data-history-system-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--std-color-gray-100, #f3f4f6);
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-data-history-system-icon {
    background: var(--std-color-gray-700, #374151);
    color: var(--std-color-gray-300, #d1d5db);
}

.fi-data-history-system-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.fi-data-history-employee-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── بازگشت از صفحه مرکزی به خود مدیریت ────────────────────────────────── */

.fi-data-history-back {
    display: flex;
    justify-content: flex-start;
}

/*
 * جای خط وضعیت: زیر فیلد، نه بالای آن (الزام فیلد-۰۰۱).
 *
 * این خط در جایگاه «بالای محتوا» به فیلد وصل می‌شود، چون در این نسخه فیلامنت
 * «متن راهنما» خودش همان جایگاه «زیر محتوا» است و اگر خط وضعیت آنجا نوشته
 * می‌شد، روی هر فیلدی که راهنما دارد — یعنی بیشتر فیلدهای پنل — بی‌صدا پاک
 * می‌شد. ستون محتوای فیلد یک grid است، پس با `order` می‌شود این یک قلم را به
 * انتهای آن فرستاد بدون آنکه به بقیه دست بخورد.
 */
.fi-fo-field-content-col > *:has(.fi-data-history-note) {
    order: 99;
}

/*
 * ── پنجره تاریخچه روی عرض موبایل (الزام واکنش‌گرایی، بند ۲۱) ────────────
 *
 * جدول تاریخچه هشت ستون دارد و در عرض کوچک، پهنای طبیعی خودش پنجره را از دو
 * طرف از صفحه بیرون می‌برد: در آزمون مرورگری روی عرض ۳۹۰ پیکسل، پنجره ۵۰۱
 * پیکسل عرض می‌گرفت و ستون «مقدار قبلی» از لبه بیرون می‌افتاد.
 *
 * راه‌حل کمینه است و فقط همین یک جعبه را می‌گیرد: خودِ جدول مثل هر جدول دیگر
 * پنل در جای خودش افقی اسکرول می‌شود و پنجره داخل صفحه می‌ماند. هیچ ستونی حذف
 * یا جمع نمی‌شود و در عرض دسکتاپ هیچ چیز تغییر نمی‌کند.
 */
/*
 * خودِ پنجره به اندازه محتوایش بزرگ می‌شد: در عرض ۳۹۰ پیکسل، ۶۲۷ پیکسل عرض
 * می‌گرفت و ۸۷ پیکسل از هر طرف بیرون صفحه می‌ماند. این قید فقط همین یک پنجره
 * را می‌گیرد — با `:has()` به جدول تاریخچه داخلش شناخته می‌شود — و در عرض
 * دسکتاپ که پنجره از قبل کوچک‌تر از صفحه است هیچ اثری ندارد.
 */
.fi-modal-window:has(.fi-data-history-modal-table) {
    /*
     * `100%` کافی نیست: پنجره فرزند یک چیدمان شبکه‌ای است و خانه‌اش خودش به
     * اندازه محتوا بزرگ می‌شود، پس «صد درصد» یعنی صد درصدِ همان اندازه بزرگ.
     * عرض دیده‌شدنی صفحه یک طول قطعی است و این حلقه را می‌شکند؛ `min-width: 0`
     * هم لازم است، چون فرزند شبکه به‌طور پیش‌فرض کوچک‌تر از محتوایش نمی‌شود.
     */
    min-width: 0;
    max-width: 100vw;
}

.fi-data-history-modal-table {
    /*
     * `min-width: 0` هم لازم است: این جعبه فرزند یک چیدمان انعطاف‌پذیر است و
     * پیش‌فرض `min-width: auto` نمی‌گذارد کوچک‌تر از محتوایش شود — بدون آن،
     * `overflow-x` هیچ اثری ندارد.
     */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}