/* =============================================================================
   استاندارد واحد modalهای دلیج
   -----------------------------------------------------------------------------
   همه‌ی modalها سطح سفید، هدر و فوتر بدون رنگ زمینه و یک نوار معنایی در بالا
   دارند. رنگ نوار و دکمه‌ی اصلی از نوع پیام می‌آید:
   آبی = پرسش/عملیات معمول، زرد = هشدار، قرمز = خطا/اخطار.
   ========================================================================== */
:root {
    --dalij-modal-blue: #2f80ed;
    --dalij-modal-blue-dark: #2563c7;
    --dalij-modal-green: #24956a;
    --dalij-modal-yellow: #d99a00;
    --dalij-modal-yellow-dark: #a66d00;
    --dalij-modal-red: #d64545;
    --dalij-modal-red-dark: #b83232;
    --dalij-modal-surface: #ffffff;
    --dalij-modal-text: #1f2a33;
    --dalij-modal-muted: #68747d;
    --dalij-modal-line: #e7edf2;
    --dalij-modal-neutral: #eef2f5;
    --dalij-modal-neutral-hover: #e3e9ee;
}

/* Overlay مشترک */
body .dalij-dialog-backdrop,
body .adm-modal,
body .sel-modal,
body .pd-modal-backdrop,
body .cmp-modal,
body .sup-modal-backdrop,
body .dalij-image-crop-modal,
body .story-create-modal {
    background: rgba(15, 23, 42, .66);
}

body .pd-modal-backdrop,
body .sup-modal-backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* سطح سفید و نوار بالایی modalهای اختصاصی */
body .adm-modal-inner,
body .sel-modal-inner,
body .acc-modal-inner,
body .pd-modal-dialog,
body .cmp-modal-box,
body .sup-modal-dialog,
body .dalij-image-crop-modal-inner,
body .story-create-modal-inner,
body .broadcast-popup-card {
    background: var(--dalij-modal-surface);
    border-top: 4px solid var(--dalij-modal-blue);
    color: var(--dalij-modal-text);
}

/* modal مرکزی از accent داخلی استفاده می‌کند تا نوار با گوشه‌ها یکپارچه بماند */
body .dalij-dialog-panel {
    background: var(--dalij-modal-surface);
    border-top-color: transparent;
}

body .dalij-dialog-accent {
    height: 4px;
    background: var(--dalij-dialog-tone, var(--dalij-modal-blue));
}

body .dalij-dialog-panel.is-info,
body .dalij-dialog-panel.is-question {
    --dalij-dialog-tone: var(--dalij-modal-blue);
}

body .dalij-dialog-panel.is-success {
    --dalij-dialog-tone: var(--dalij-modal-green);
}

body .dalij-dialog-panel.is-warning {
    --dalij-dialog-tone: var(--dalij-modal-yellow);
}

body .dalij-dialog-panel.is-error {
    --dalij-dialog-tone: var(--dalij-modal-red);
}

/* هدر و فوتر فقط ساختار و فاصله دارند؛ رنگ زمینه از سطح سفید می‌آید */
body .dalij-dialog-header,
body .dalij-dialog-actions,
body .adm-modal-head,
body .adm-modal-inner .adm-actions,
body .sel-modal-head,
body .sel-modal-inner .sel-actions,
body .acc-modal-head,
body .acc-modal-inner .acc-actions,
body .pd-modal-head,
body .pd-review-form-footer,
body .cmp-modal-head,
body .cmp-modal-foot,
body .sup-modal-head,
body .dalij-image-crop-head,
body .dalij-image-crop-actions,
body .story-create-head,
body .story-create-actions,
body .broadcast-popup-head,
body .broadcast-popup-foot,
body .inv-sheet-head {
    background: transparent;
}

body .dalij-dialog-header,
body .adm-modal-head,
body .sel-modal-head,
body .acc-modal-head,
body .pd-modal-head,
body .cmp-modal-head,
body .sup-modal-head,
body .inv-sheet-head {
    border-bottom-color: var(--dalij-modal-line);
}

body .dalij-dialog-actions,
body .adm-modal-inner .adm-actions,
body .pd-review-form-footer,
body .cmp-modal-foot,
body .broadcast-popup-foot {
    border-top-color: var(--dalij-modal-line);
}

body .pd-review-form-footer {
    box-shadow: none;
}

/* close buttonها همیشه خنثی هستند و در hover با آبی modal هماهنگ می‌شوند */
body .dalij-dialog-close,
body .adm-modal-close,
body .sel-modal-close,
body .acc-modal-close,
body .pd-modal-close,
body .cmp-modal-close,
body .sup-modal-close,
body .dalij-image-crop-close,
body .story-create-close,
body .broadcast-popup-close,
body .inv-sheet-head button {
    background: var(--dalij-modal-neutral);
    color: var(--dalij-modal-muted);
}

body .dalij-dialog-close:hover,
body .adm-modal-close:hover,
body .sel-modal-close:hover,
body .acc-modal-close:hover,
body .pd-modal-close:hover,
body .cmp-modal-close:hover,
body .sup-modal-close:hover,
body .dalij-image-crop-close:hover,
body .story-create-close:hover,
body .broadcast-popup-close:hover,
body .inv-sheet-head button:hover {
    background: #eaf2ff;
    color: var(--dalij-modal-blue);
}

/* دکمه‌ی اصلی modal آبی است؛ دکمه‌های خطر و موفقیت معنای خود را حفظ می‌کنند */
body .dalij-dialog-btn.primary,
body .adm-modal-inner .adm-btn:not(.ghost):not(.danger):not(.success),
body .sel-modal-inner .sel-btn:not(.ghost):not(.danger):not(.success):not(.teal),
body .acc-modal-inner .acc-btn:not(.ghost):not(.danger):not(.gold),
body .pd-modal-primary,
body .cmp-modal-foot .cmp-btn:not(.ghost):not(.danger),
body .sup-modal-primary,
body .dalij-image-crop-btn.primary,
body .story-create-submit,
body .broadcast-popup-confirm,
body .inv-sheet .sel-btn:not(.ghost):not(.danger):not(.success):not(.teal) {
    background: var(--dalij-modal-blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(47, 128, 237, .2);
}

body .dalij-dialog-btn.primary:hover,
body .adm-modal-inner .adm-btn:not(.ghost):not(.danger):not(.success):hover,
body .sel-modal-inner .sel-btn:not(.ghost):not(.danger):not(.success):not(.teal):hover,
body .acc-modal-inner .acc-btn:not(.ghost):not(.danger):not(.gold):hover,
body .pd-modal-primary:hover:not(:disabled),
body .cmp-modal-foot .cmp-btn:not(.ghost):not(.danger):hover,
body .sup-modal-primary:hover,
body .dalij-image-crop-btn.primary:hover,
body .story-create-submit:hover:not(:disabled),
body .broadcast-popup-confirm:hover,
body .inv-sheet .sel-btn:not(.ghost):not(.danger):not(.success):not(.teal):hover {
    background: var(--dalij-modal-blue-dark);
}

body .dalij-dialog-btn.secondary,
body .adm-modal-inner .adm-btn.ghost,
body .sel-modal-inner .sel-btn.ghost,
body .acc-modal-inner .acc-btn.ghost,
body .pd-modal-secondary,
body .cmp-modal-foot .cmp-btn.ghost,
body .sup-modal-secondary,
body .dalij-image-crop-btn.ghost,
body .story-create-cancel,
body .inv-sheet .sel-btn.ghost {
    background: var(--dalij-modal-neutral);
    color: var(--dalij-modal-text) !important;
    box-shadow: none;
}

body .dalij-dialog-btn.secondary:hover,
body .adm-modal-inner .adm-btn.ghost:hover,
body .sel-modal-inner .sel-btn.ghost:hover,
body .acc-modal-inner .acc-btn.ghost:hover,
body .pd-modal-secondary:hover,
body .cmp-modal-foot .cmp-btn.ghost:hover,
body .sup-modal-secondary:hover,
body .dalij-image-crop-btn.ghost:hover,
body .story-create-cancel:hover,
body .inv-sheet .sel-btn.ghost:hover {
    background: var(--dalij-modal-neutral-hover);
    color: var(--dalij-modal-text) !important;
}

/* اخطارهای خطرناک در footer و دکمه‌ها قرمز می‌مانند، اما زمینه‌ی modal سفید است */
body .dalij-dialog-panel.is-error .dalij-dialog-header,
body .dalij-dialog-panel.is-error .dalij-dialog-actions {
    background: transparent;
}

body .adm-modal-inner .adm-btn.danger,
body .sel-modal-inner .sel-btn.danger,
body .acc-modal-inner .acc-btn.danger,
body .cmp-modal-foot .cmp-btn.danger,
body .sup-modal-danger {
    background: #fdecec;
    color: var(--dalij-modal-red-dark) !important;
    box-shadow: none;
}

body .adm-modal-inner .adm-btn.danger:hover,
body .sel-modal-inner .sel-btn.danger:hover,
body .acc-modal-inner .acc-btn.danger:hover,
body .cmp-modal-foot .cmp-btn.danger:hover,
body .sup-modal-danger:hover {
    background: #f8d9d9;
    color: #972727 !important;
}

/* برای modalهای اختصاصی، امکان تعیین هشدار/اخطار با یک attribute یا utility class */
body [data-modal-tone="warning"],
body .dalij-modal-warning {
    border-top-color: var(--dalij-modal-yellow) !important;
}

body [data-modal-tone="error"],
body .dalij-modal-error {
    border-top-color: var(--dalij-modal-red) !important;
}

body .inv-sheet {
    border-top: 0;
}

body .inv-sheet::before {
    background: var(--dalij-modal-blue);
}

/* =============================================================================
   پنجره انتخاب پنل پس از ورود کاربر چندنقشی — ماده ۱۳
   -----------------------------------------------------------------------------
   بر خلاف modalهای بالا، این پنجره ساختار پایه‌ای در فایل جداگانه‌ای ندارد؛ چون
   فقط در _Layout.cshtml (صفحه اصلی سایت، بلافاصله پس از ورود) رندر می‌شود، همین‌جا
   که همه‌ی layoutها آن را بارگذاری می‌کنند، ساختار کامل (نه فقط رنگ) تعریف می‌شود.
   ========================================================================== */
body .panel-chooser-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .66);
    animation: panelChooserFade .2s ease;
}

body .panel-chooser-card {
    width: 100%;
    max-width: 400px;
    background: var(--dalij-modal-surface);
    border-top: 4px solid var(--dalij-modal-blue);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    animation: panelChooserPop .22s ease;
}

body .panel-chooser-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--dalij-modal-line);
}

body .panel-chooser-kicker {
    display: block;
    font-size: 12px;
    color: var(--dalij-modal-blue);
    font-weight: 600;
    margin-bottom: 4px;
}

body .panel-chooser-head h3 {
    margin: 0;
    font-size: 17px;
    color: var(--dalij-modal-text);
}

body .panel-chooser-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: var(--dalij-modal-neutral);
    color: var(--dalij-modal-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .15s, color .15s;
}

body .panel-chooser-close:hover {
    background: #eaf2ff;
    color: var(--dalij-modal-blue);
}

body .panel-chooser-desc {
    margin: 10px 0 16px;
    font-size: 13px;
    color: var(--dalij-modal-muted);
    line-height: 1.9;
}

body .panel-chooser-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body .panel-chooser-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--dalij-modal-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--dalij-modal-text);
    transition: border-color .15s, background .15s;
}

body .panel-chooser-item:hover {
    border-color: var(--dalij-modal-blue);
    background: #f5f9ff;
}

body .panel-chooser-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: var(--dalij-modal-blue);
    font-size: 15px;
}

body .panel-chooser-title {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
}

body .panel-chooser-arrow {
    flex: 0 0 auto;
    color: var(--dalij-modal-muted);
    font-size: 12px;
}

@keyframes panelChooserFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes panelChooserPop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    body .dalij-dialog-panel,
    body .adm-modal-inner,
    body .sel-modal-inner,
    body .acc-modal-inner,
    body .pd-modal-dialog,
    body .cmp-modal-box,
    body .sup-modal-dialog,
    body .dalij-image-crop-modal-inner,
    body .story-create-modal-inner,
    body .broadcast-popup-card,
    body .panel-chooser-backdrop,
    body .panel-chooser-card {
        animation: none;
        transition: none;
    }
}