/*
 * لمسات هوية MirsalPay فوق تصميم Filament (الألوان الأساسية في App\Support\Brand).
 * لا يوجد build للـ CSS: هذا الملف يُحمَّل كما هو من public.
 */

:root {
    --mp-petrol: #073c45;
    --mp-deep-petrol: #052f39;
    --mp-coral: #f45d5c;
    --mp-ivory: #faf9f7;

    /* الحواف حسب الدليل: 10 للأزرار والحقول، 14 للبطاقات */
    --radius-lg: 10px;
    --radius-xl: 14px;
}

/* ── الشعار: ملوّن على الخلفيات الفاتحة، وأبيض (مع "Pay" مرجاني) على البترولي والوضع الليلي ── */
.mp-logo { display: inline-flex; align-items: center; gap: .55rem; height: 100%; direction: ltr; }
.mp-logo img { display: block; height: 100%; width: auto; }
.mp-logo .mp-logo-wordmark { height: 62%; }
.mp-logo .mp-on-dark { display: none; }
.fi-sidebar .mp-logo .mp-on-light, .dark .mp-logo .mp-on-light { display: none; }
.fi-sidebar .mp-logo .mp-on-dark, .dark .mp-logo .mp-on-dark { display: block; }

/* صفحة الدخول: الرمز فوق الاسم */
.mp-logo-stacked { flex-direction: column; gap: .7rem; height: auto; }
.mp-logo-stacked .mp-logo-mark { height: 3.6rem; }
.mp-logo-stacked .mp-logo-wordmark { height: 2.2rem; }
.fi-simple-header .fi-logo { height: auto !important; margin-bottom: .5rem; }
.mp-tagline { display: flex; align-items: center; gap: .6rem; margin-top: .1rem; font-size: 1rem; font-weight: 700; color: #566469; }
.mp-tagline::before, .mp-tagline::after { content: ''; width: 1.5rem; height: 2px; border-radius: 2px; background-color: var(--mp-coral); }
.dark .mp-tagline { color: rgb(255 255 255 / .75); }

/* ── القائمة الجانبية البترولية ── */
.fi-sidebar { background-color: var(--mp-deep-petrol) !important; color: #fff; }
.fi-sidebar-header { background-color: transparent !important; box-shadow: none !important; border-color: rgb(255 255 255 / .08) !important; }
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-btn { color: rgb(255 255 255 / .5) !important; }
.fi-sidebar .fi-sidebar-item-btn { color: rgb(255 255 255 / .8); border-radius: var(--radius-lg); }
.fi-sidebar .fi-sidebar-item-label { color: inherit !important; }
.fi-sidebar .fi-sidebar-item-icon { color: rgb(255 255 255 / .6) !important; }
.fi-sidebar .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item-btn:focus-visible { background-color: rgb(255 255 255 / .07) !important; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / .1) !important;
    color: #fff;
    box-shadow: inset -3px 0 0 var(--mp-coral);
}
[dir="ltr"] .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { box-shadow: inset 3px 0 0 var(--mp-coral); }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar .fi-sidebar-item-grouped-border-part { background-color: rgb(255 255 255 / .2) !important; }
.fi-sidebar .fi-icon-btn { color: rgb(255 255 255 / .7) !important; }

/* ── الأرقام المالية بعرض ثابت حتى تتحاذى في الجداول ── */
.fi-ta-text, .fi-in-text, .fi-wi-stats-overview-stat-value { font-variant-numeric: tabular-nums; }

/* ── على الكمبيوتر: العمود البترولي يمتد إلى الشريط العلوي (الشعار الأبيض أعلى القائمة) ── */
@media (min-width: 1024px) {
    .fi-topbar { position: relative; }
    .fi-topbar::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--sidebar-collapsed-width, 4.5rem);
        background-color: var(--mp-deep-petrol);
        pointer-events: none;
    }
    body:has(.fi-sidebar.fi-sidebar-open) .fi-topbar::before { width: var(--sidebar-width); }
    .fi-topbar-start { position: relative; z-index: 1; }
    .fi-topbar-start .mp-logo .mp-on-light { display: none; }
    .fi-topbar-start .mp-logo .mp-on-dark { display: block; }
    .fi-topbar-start .fi-icon-btn { color: rgb(255 255 255 / .75) !important; }
}

/* ── على الجوال: صف الجدول بطاقة واحدة (حوالة/دفعة/جهة؛ عمود البطاقة يظهر تحت عرض sm فقط) ── */
@media (max-width: 639px) {
    .fi-ta-cell:has(.mp-card) { width: 100%; padding-block: .65rem; }
    .fi-ta-cell:has(.mp-card) .fi-ta-col-wrp { display: block; }
    .fi-ta-cell:has(.mp-card) .fi-ta-view-column { display: block; }
    /* إجراءات الصف بالأيقونة فقط ليبقى العرض للبطاقة (مثل «فتح الصفحة» في الجهات) */
    .fi-ta-row .fi-ta-actions .fi-link-label { display: none; }
}

/* ── مسار حالة الحوالة (resources/views/filament/transfer-timeline.blade.php) ── */
.mp-timeline { display: flex; align-items: flex-start; }
.mp-tl-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: .25rem; min-width: 0; }
.mp-tl-step:not(:last-child)::after { content: ''; position: absolute; top: 17px; inset-inline-start: 50%; width: 100%; height: 3px; border-radius: 2px; background: var(--mp-tl-line); }
.mp-tl-dot { position: relative; z-index: 1; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mp-tl-c); color: #fff; }
.mp-tl-current .mp-tl-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mp-tl-c) 22%, transparent); }
.mp-tl-upcoming .mp-tl-dot { background: transparent; border: 2px dashed rgb(128 128 128 / .45); }
.mp-tl-label { margin-top: .45rem; font-weight: 700; font-size: .9rem; }
.mp-tl-upcoming .mp-tl-label { color: var(--gray-400); font-weight: 600; }
.mp-tl-cancelled .mp-tl-label { color: var(--danger-600); }
.mp-tl-meta { font-size: .75rem; color: var(--gray-500); unicode-bidi: plaintext; }
.mp-tl-note { margin-top: .15rem; font-size: .75rem; color: var(--danger-600); }

@media (max-width: 639px) {
    .mp-timeline { flex-direction: column; gap: .9rem; }
    .mp-tl-step { flex-direction: row; align-items: flex-start; text-align: start; gap: .75rem; padding-inline: 0; }
    .mp-tl-step:not(:last-child)::after { top: 36px; bottom: -.9rem; inset-inline-start: 16.5px; width: 3px; height: auto; }
    .mp-tl-label { margin-top: .4rem; }
}

/* ── بطاقات الاختيار (طريقة التحويل): أيقونة كبيرة واسم وما المطلوب ── */
.fi-fo-toggle-buttons.mp-choice-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .fi-fo-toggle-buttons.mp-choice-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mp-choice-cards .fi-fo-toggle-buttons-btn-ctn { display: flex; }
.mp-choice-cards .fi-fo-toggle-buttons-btn-ctn > .fi-btn {
    width: 100%; min-height: 92px; padding: .75rem .5rem; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center;
    font-weight: 700; line-height: 1.3; white-space: normal;
    background: rgb(128 128 128 / .05) !important; color: inherit !important;
    box-shadow: inset 0 0 0 1px rgb(128 128 128 / .28) !important;
    transition: box-shadow .15s, background-color .15s;
}
.mp-choice-cards .fi-fo-toggle-buttons-btn-ctn > .fi-btn .fi-icon { width: 30px; height: 30px; color: var(--primary-600); }
.mp-choice-cards .fi-fo-toggle-buttons-btn-ctn > .fi-btn:hover { background: rgb(8 107 113 / .06) !important; }
.mp-choice-cards .fi-fo-toggle-buttons-input:checked + .fi-btn { background: rgb(8 107 113 / .12) !important; box-shadow: inset 0 0 0 2px var(--primary-600) !important; }
.mp-choice-cards .fi-fo-toggle-buttons-input:focus-visible + .fi-btn { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.mp-choice-hint { display: block; font-size: .72rem; font-weight: 400; color: var(--gray-500); }
.dark .mp-choice-cards .fi-fo-toggle-buttons-btn-ctn > .fi-btn .fi-icon { color: var(--primary-400); }
.dark .mp-choice-cards .fi-fo-toggle-buttons-input:checked + .fi-btn { background: rgb(8 107 113 / .28) !important; box-shadow: inset 0 0 0 2px var(--primary-400) !important; }