/*
 * «ادغام دو شخص» و «بانک اسامی اشخاص» — the guidance card and the empty records
 * (تسک ۱۴۰۵/۰۶/۰۹/۱۶).
 *
 * Loaded at the end of the head, after the compiled theme, so a rule of equal weight
 * here is the one that applies.
 */

/* ── The guidance card (ادغام ـ ۰۱ و ۰۲) ─────────────────────────────────────── */

.merge-people-guidance {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;

    /* بند ۱: حاشیه قرمز، پس‌زمینه داخلی سفید. The attached reference has a red fill
       as well, and the task says in as many words not to repeat it here. */
    border: 2px solid #dc2626;
    border-radius: 0.75rem;
    padding: 1.25rem 1.25rem;
    background: #ffffff;

    margin-bottom: 1.5rem;
}

/* The panel is a dark one. Pure white is what the task asks for and what light mode
   gets; in dark mode it is the panel's own light surface, because a sheet of #fff in a
   dark page is a torch rather than a card — the instruction that matters is that the
   inside must not be red, and it is not. */
.dark .merge-people-guidance {
    background: #f8fafc;
}

.merge-people-guidance__icon {
    flex: 0 0 auto;
    /* آیکون هشدار مثلثی زرد */
    color: #eab308;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.125rem;
}

.merge-people-guidance__icon svg {
    width: 100%;
    height: 100%;
}

.merge-people-guidance__body {
    flex: 1 1 auto;
    min-width: 0;

    /* «بین مورد اول و دوم فاصله کافی وجود داشته باشد تا دو مفهوم در نگاه اول از هم
       تفکیک شوند» — a full line of air, not a paragraph break. */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.merge-people-guidance__title {
    font-weight: 700;
    font-size: 0.975rem;
    line-height: 1.9;
    margin: 0 0 0.25rem;
}

/* «عنوان سبز و بولد باشد» */
.merge-people-guidance__title--merge {
    color: #15803d;
}

/* «عنوان قرمز و بولد باشد» */
.merge-people-guidance__title--empty {
    color: #dc2626;
}

.merge-people-guidance__text {
    margin: 0;
    color: #1f2937;
    font-size: 0.9rem;
    line-height: 2.1;
    text-align: justify;
}

/* The same card inside the modal on entry (ادغام ـ ۰۳) sits flush in the window. */
.merge-people-entry-modal .merge-people-guidance {
    margin-bottom: 0;
}

/* ── Empty records in «بانک اسامی اشخاص» (ادغام ـ ۱۱ و ۱۲) ───────────────────── */

/*
 * «رنگ زمینه کل ردیف این اشخاص قرمز باشد … این رنگ فقط روی یک ستون یا عنوان اعمال
 * نشود» — so the colour is painted on every cell of the row rather than on the row
 * element, whose background a striped table draws over each cell anyway.
 */
.fi-ta-row.person-row-available,
.fi-ta-row.person-row-available:hover {
    background-color: #b91c1c !important;
}

.fi-ta-row.person-row-available > .fi-ta-cell,
.fi-ta-row.person-row-available > .fi-ta-cell:hover {
    background-color: #b91c1c !important;
}

/*
 * «رنگ متن، لینک‌ها، آیکون‌ها و دکمه‌های داخل ردیف نیز طوری تنظیم شوند که روی زمینه
 * قرمز همچنان کاملاً خوانا و قابل استفاده باشند.» White on #b91c1c is 7.0:1, well past
 * the 4.5:1 an ordinary reader needs.
 */
.fi-ta-row.person-row-available,
.fi-ta-row.person-row-available .fi-ta-text-item-label,
.fi-ta-row.person-row-available .fi-ta-record-checkbox,
.fi-ta-row.person-row-available a,
.fi-ta-row.person-row-available button,
.fi-ta-row.person-row-available svg {
    color: #ffffff !important;
}

/* The row's own action buttons keep their shape and gain a readable outline. */
.fi-ta-row.person-row-available .fi-btn,
.fi-ta-row.person-row-available .fi-link {
    color: #ffffff !important;
}

.fi-ta-row.person-row-available .fi-btn:hover,
.fi-ta-row.person-row-available .fi-link:hover {
    color: #fee2e2 !important;
}

/* The badge that carries the words, so the colour alone never has to (ادغام ـ ۱۲). */
.person-available-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #b91c1c !important;
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ── «انتخاب رکورد برای شخص جدید» (ادغام ـ ۱۵ تا ۲۱) ─────────────────────────── */

.person-reuse-choice {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.person-reuse-choice__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgb(var(--gray-700));
    border-radius: 0.75rem;
    background: rgb(var(--gray-900));
}

.person-reuse-choice__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.person-reuse-choice__id {
    font-weight: 700;
    color: rgb(var(--gray-100));
}

/*
 * The two panels these screens add.
 *
 * Written here rather than as Tailwind utilities on purpose: `public/build` is not
 * committed, so the server keeps whatever css was last built there, and a utility whose
 * first use in the whole repository is a new Blade view is simply absent from it — the
 * page then ships unstyled and nothing says so. A plain stylesheet has no such step.
 */
.person-reuse-panel {
    border-radius: 0.75rem;
    background: rgb(var(--gray-900));
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    border: 1px solid rgb(var(--gray-700));
}

.person-reuse-panel__text {
    margin: 0;
    line-height: 2;
    color: rgb(var(--gray-200));
}

.person-reuse-panel__text--spaced {
    margin-top: 0.5rem;
}

.person-reuse-choice__use {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    background: #16a34a;
    color: #ffffff;
    transition: background-color .15s ease;
}

.person-reuse-choice__use:hover {
    background: #15803d;
}

/* «ایجاد رکورد جدید» is the secondary way, and looks it (ادغام ـ ۲۱). */
.person-reuse-choice__secondary {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.person-reuse-choice__new {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--gray-400));
    text-decoration: underline;
}

.person-reuse-choice__new:hover {
    color: rgb(var(--gray-200));
}