/* ============================================================
   Research Project Detail Modal (/Researches)
   Design tokens + component CSS — RTL / Persian.
   Theme aware: light tokens on :root, dark overrides under
   [data-bs-theme="dark"] (the attribute the public site toggles).
   ============================================================ */

:root {
    /* surfaces */
    --rm-ground: #efede6;
    --rm-surface: #faf9f5;
    --rm-card: #ffffff;
    --rm-muted-surface: #f5f3eb;
    --rm-chip: #f3f1e9;
    /* borders */
    --rm-border: #e8e4d9;
    --rm-border-strong: #dcd7c9;
    --rm-border-dashed: #d9d3c3;
    /* text */
    --rm-ink: #141413;
    --rm-ink-2: #3a3831;
    --rm-ink-3: #57544d;
    --rm-ink-4: #6b6862;
    --rm-ink-disabled: #8a867d;
    /* accent + semantic */
    --rm-accent: #406882;
    --rm-accent-hover: #2d4b5e;
    --rm-accent-soft: #eaf0f4;
    --rm-accent-soft-border: #d3e0e8;
    --rm-accent-contrast: #ffffff;
    --rm-success: #0f6f63;
    --rm-warning: #8a5a00;
    --rm-danger: #9b2c2c;
    --rm-info-fg: #34506b;
    --rm-info-bg: #e7eef5;
    --rm-neutral-bg: #f1efe6;
    --rm-track: #edeae0;
    --rm-track-empty: #dedace;
    --rm-avatar-fg: #2d4b5e;
    --rm-avatar-bg: #e3edf3;
    --rm-avatar-org-fg: #2d4b45;
    --rm-avatar-org-bg: #dceae6;
    --rm-cover-bg: #e4e7df;
    --rm-overlay: rgba(20, 20, 19, .45);
    --rm-shadow: 0 24px 60px rgba(20, 20, 19, .16);
    /* shape */
    --rm-r-sm: 10px;
    --rm-r-md: 12px;
    --rm-r-lg: 16px;
    --rm-r-xl: 20px;
    --rm-r-pill: 999px;
    /* spacing scale (4px base) */
    --rm-s1: 4px;
    --rm-s2: 8px;
    --rm-s3: 12px;
    --rm-s4: 16px;
    --rm-s5: 20px;
    --rm-s6: 24px;
    --rm-s7: 28px;
    --rm-s8: 40px;
}

[data-bs-theme="dark"] {
    --rm-ground: #14171a;
    --rm-surface: #1b1f23;
    --rm-card: #22272c;
    --rm-muted-surface: #1f2429;
    --rm-chip: #2a3036;
    --rm-border: #333a41;
    --rm-border-strong: #3d454d;
    --rm-border-dashed: #3d454d;
    --rm-ink: #f2f4f6;
    --rm-ink-2: #dfe3e8;
    --rm-ink-3: #c2c8d0;
    --rm-ink-4: #9aa3ad;
    --rm-ink-disabled: #7d868f;
    --rm-accent: #6f9ebc;
    --rm-accent-hover: #8ab4cf;
    --rm-accent-soft: #24313a;
    --rm-accent-soft-border: #35495a;
    --rm-accent-contrast: #10161b;
    --rm-success: #55c2b1;
    --rm-warning: #e0b460;
    --rm-danger: #e08585;
    --rm-info-fg: #9fc4e0;
    --rm-info-bg: #24313a;
    --rm-neutral-bg: #2a3036;
    --rm-track: #2c3238;
    --rm-track-empty: #2c3238;
    --rm-avatar-fg: #bcd8e8;
    --rm-avatar-bg: #2a3d49;
    --rm-avatar-org-fg: #a9d6cc;
    --rm-avatar-org-bg: #24382f;
    --rm-cover-bg: #2a3036;
    --rm-overlay: rgba(0, 0, 0, .6);
    --rm-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* ---------- shell (bootstrap modal host) ---------- */
#proposalModal.rm-host {
    --bs-modal-bg: transparent;
    --bs-modal-border-width: 0;
    --bs-modal-box-shadow: none;
    --bs-modal-padding: 0;
}

    #proposalModal.rm-host .modal-dialog {
        width: min(1100px, calc(100% - 2 * var(--rm-s8)));
        max-width: none;
        margin: var(--rm-s8) auto;
    }

.rm-modal {
    display: flex;
    flex-direction: column;
    max-height: min(800px, calc(100vh - 2 * var(--rm-s8)));
    background: var(--rm-surface);
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-r-xl);
    box-shadow: var(--rm-shadow);
    overflow: hidden;
    color: var(--rm-ink);
}

/* ---------- header ---------- */
.rm-header {
    display: flex;
    align-items: center;
    gap: var(--rm-s4);
    padding: var(--rm-s5) var(--rm-s7);
    background: var(--rm-card);
    border-block-end: 1px solid var(--rm-border);
    flex-shrink: 0;
}

.rm-header__titles {
    display: flex;
    flex-direction: column;
    gap: var(--rm-s1);
    flex-grow: 1;
    min-width: 0;
}

.rm-header__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--rm-ink);
}

.rm-header__meta {
    font-size: 13px;
    color: var(--rm-ink-4);
}

/* ---------- buttons ---------- */
.rm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rm-s2);
    min-height: 44px;
    padding: 0 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--rm-r-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .rm-btn:focus-visible {
        outline: 2px solid var(--rm-accent);
        outline-offset: 2px;
    }

.rm-btn--ghost {
    color: var(--rm-ink-2);
    background: var(--rm-card);
    border: 1px solid var(--rm-border-strong);
}

    .rm-btn--ghost:hover {
        color: var(--rm-ink);
        background: var(--rm-muted-surface);
    }

.rm-btn--primary {
    color: var(--rm-accent-contrast);
    background: var(--rm-accent);
    border: 1px solid var(--rm-accent);
    font-weight: 700;
    padding: 0 22px;
    min-height: 46px;
}

    .rm-btn--primary:hover {
        color: var(--rm-accent-contrast);
        background: var(--rm-accent-hover);
        border-color: var(--rm-accent-hover);
    }

.rm-btn--soft {
    color: var(--rm-accent);
    background: var(--rm-accent-soft);
    border: 1px solid var(--rm-accent-soft-border);
    font-size: 13px;
    min-height: 40px;
    padding: 0 var(--rm-s4);
}

    .rm-btn--soft:hover {
        color: var(--rm-accent);
        background: var(--rm-accent-soft-border);
    }

.rm-btn--icon {
    width: 44px;
    padding: 0;
    flex-shrink: 0;
    color: var(--rm-ink-2);
    background: var(--rm-chip);
    border: 1px solid var(--rm-border-strong);
}

    .rm-btn--icon:hover {
        color: var(--rm-ink);
        background: var(--rm-muted-surface);
    }

/* ---------- body layout ---------- */
.rm-body {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    gap: var(--rm-s6);
    padding: var(--rm-s7);
}

.rm-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rm-s5);
    min-width: 0;
}

.rm-side {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rm-s4);
}

/* ---------- title block ---------- */
.rm-titleblock {
    display: flex;
    flex-direction: column;
    gap: var(--rm-s3);
}

.rm-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rm-s2) 10px;
}

.rm-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 800;
    color: var(--rm-ink);
}

.rm-subtitle {
    font-size: 15px;
    color: var(--rm-ink-3);
}

/* ---------- badges ---------- */
.rm-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 var(--rm-s3);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--rm-r-pill);
}

.rm-badge--status {
    color: var(--rm-accent-contrast);
    background: var(--rm-accent);
}

    .rm-badge--status .rm-dot {
        width: 7px;
        height: 7px;
        background: currentColor;
        border-radius: var(--rm-r-pill);
    }

.rm-badge--info {
    color: var(--rm-info-fg);
    background: var(--rm-info-bg);
}

.rm-badge--neutral {
    color: var(--rm-ink-2);
    background: var(--rm-neutral-bg);
}

.rm-badge--done {
    color: var(--rm-accent-contrast);
    background: var(--rm-success);
}

.rm-badge--idle {
    color: var(--rm-accent-contrast);
    background: var(--rm-ink-4);
}

.rm-badge--warn {
    color: var(--rm-accent-contrast);
    background: var(--rm-warning);
}

.rm-badge--danger {
    color: var(--rm-accent-contrast);
    background: var(--rm-danger);
}

/* ---------- cards ---------- */
.rm-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--rm-s5) 22px;
    background: var(--rm-card);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-r-lg);
}

.rm-card__head {
    display: flex;
    align-items: center;
    gap: var(--rm-s2);
    color: var(--rm-ink-disabled);
}

.rm-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rm-ink);
}

.rm-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: var(--rm-ink-3);
    text-align: justify;
}

    .rm-card__text.is-empty {
        color: var(--rm-ink-disabled);
    }

/* ---------- progress ---------- */
.rm-progress__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.rm-progress__label {
    flex-grow: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--rm-ink);
}

.rm-progress__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--rm-accent);
    font-variant-numeric: tabular-nums;
}

.rm-progress__track {
    width: 100%;
    height: 10px;
    background: var(--rm-track);
    border-radius: var(--rm-r-pill);
    overflow: hidden;
}

.rm-progress__fill {
    height: 100%;
    background: var(--rm-accent);
    border-radius: var(--rm-r-pill);
    transition: width .3s ease;
}

.rm-steps {
    display: flex;
    gap: var(--rm-s2);
}

.rm-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rm-step__bar {
    height: 4px;
    background: var(--rm-track-empty);
    border-radius: var(--rm-r-pill);
}

.rm-step__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--rm-ink-disabled);
}

.rm-step__date {
    font-size: 12px;
    color: var(--rm-ink-disabled);
}

.rm-step.is-complete .rm-step__bar,
.rm-step.is-active .rm-step__bar {
    background: var(--rm-success);
}

.rm-step.is-complete .rm-step__name,
.rm-step.is-active .rm-step__name {
    color: var(--rm-success);
}

.rm-step.is-complete .rm-step__date,
.rm-step.is-active .rm-step__date {
    color: var(--rm-ink-4);
}

/* ---------- meta grid ---------- */
.rm-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rm-s3);
}

.rm-meta__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--rm-s4) 18px;
    background: var(--rm-card);
    border: 1px solid var(--rm-border);
    border-radius: 14px;
}

.rm-meta__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rm-ink-4);
}

.rm-meta__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--rm-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.rm-meta__value--empty {
    color: var(--rm-ink-disabled);
    font-weight: 600;
}

/* ---------- reports / empty state ---------- */
.rm-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    background: var(--rm-muted-surface);
    border: 1px dashed var(--rm-border-dashed);
    border-radius: var(--rm-r-lg);
}

.rm-empty__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rm-card);
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-r-md);
    color: var(--rm-ink-disabled);
    font-size: 20px;
}

.rm-empty__body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rm-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rm-ink);
}

.rm-empty__text {
    font-size: 13px;
    color: var(--rm-ink-4);
}

.rm-reports {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rm-s2);
}

    .rm-reports .rm-btn {
        min-height: 40px;
        font-size: 13px;
        max-width: 100%;
    }

    .rm-reports .rm-report__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 22ch;
    }

/* ---------- side panel ---------- */
.rm-cover {
    height: 210px;
    display: block;
    width: 100%;
    object-fit: cover;
    background: var(--rm-cover-bg) center/cover no-repeat;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-r-lg);
}

.rm-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rm-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--rm-r-pill);
    color: var(--rm-avatar-fg);
    background: var(--rm-avatar-bg);
}

.rm-avatar--org {
    color: var(--rm-avatar-org-fg);
    background: var(--rm-avatar-org-bg);
}

.rm-person__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rm-ink);
}

.rm-person__role {
    font-size: 12px;
    color: var(--rm-ink-4);
}

.rm-divider {
    height: 1px;
    background: var(--rm-border);
}

.rm-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .rm-list li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 13px;
        line-height: 1.9;
        color: var(--rm-ink-3);
    }

        .rm-list li::before {
            content: "";
            width: 8px;
            height: 8px;
            margin-top: .55em;
            flex-shrink: 0;
            background: var(--rm-accent);
            border-radius: var(--rm-r-pill);
        }

    .rm-list.is-empty li {
        color: var(--rm-ink-disabled);
    }

        .rm-list.is-empty li::before {
            background: var(--rm-ink-disabled);
        }

/* ---------- footer ---------- */
.rm-footer {
    display: flex;
    align-items: center;
    gap: var(--rm-s3);
    padding: var(--rm-s4) var(--rm-s7);
    background: var(--rm-card);
    border-block-start: 1px solid var(--rm-border);
    flex-shrink: 0;
}

.rm-footer__note {
    flex-grow: 1;
    font-size: 13px;
    color: var(--rm-ink-4);
}

/* ---------- responsive: bottom sheet under 720px ---------- */
@media (max-width: 720px) {
    #proposalModal.rm-host .modal-dialog {
        width: 100%;
        margin: 0;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
    }

    .rm-modal {
        width: 100%;
        max-height: calc(100vh - 64px);
        border-radius: var(--rm-r-xl) var(--rm-r-xl) 0 0;
        border-bottom: 0;
    }

    .rm-header {
        padding: var(--rm-s3) var(--rm-s5) 14px;
    }

    .rm-header__meta {
        display: none;
    }

    .rm-body {
        flex-direction: column;
        padding: 18px var(--rm-s5);
        gap: var(--rm-s4);
    }

    .rm-side {
        width: auto;
        order: -1;
    }

    .rm-cover {
        height: 140px;
    }

    .rm-title {
        font-size: 21px;
        line-height: 1.6;
    }

    .rm-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rm-steps {
        display: none;
    }

    .rm-footer {
        padding: 14px var(--rm-s5) 22px;
    }

    .rm-footer__note {
        display: none;
    }

        .rm-footer .rm-btn--primary,
        .rm-footer .rm-btn--ghost {
            flex-grow: 1;
        }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    #proposalModal.rm-host.show .rm-modal {
        animation: rm-rise .22s cubic-bezier(.2, .7, .3, 1);
    }

    @keyframes rm-rise {
        from {
            opacity: 0;
            transform: translateY(12px) scale(.99);
        }
    }
}