/* ═══════════════════════════════════════════════════════════════
   Responsive — فرم ثبت‌نام (۱–۵) · فرم قرارداد · ادمین مدارک
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
    /* ورود / تأیید OTP */
    .app-page--auth .form-actions .btn {
        width: 100%;
    }

    .app-page--auth .form-footer {
        text-align: center;
    }

    .otp-box,
    .code-box {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* مرحله ۱ — ویدیو و گزینه‌ها */
    .step-video iframe,
    .step-video video {
        min-height: min(52vw, 220px);
        max-height: 280px;
    }

    .step-option {
        min-height: 72px;
        padding: 20px 16px;
    }

    .step-option-sub {
        line-height: 1.65;
    }

    /* مرحله ۲ — نتیجه و تگل‌ها */
    .step-result {
        padding: 14px;
    }

    .step-info-box--compact {
        padding: 12px;
    }

    /* مرحله ۴ — بررسی */
    .step-review-hero {
        padding: 18px 14px;
    }

    .step-review-hero-amount {
        font-size: clamp(1.5rem, 6vw, 2rem);
        word-break: break-word;
    }

    .step-review-item .value {
        font-size: 0.88rem;
        word-break: break-word;
    }

    /* مرحله ۵ — پرداخت */
    .step-pay-info-item {
        flex-wrap: wrap;
        gap: 8px;
    }

    .step-pay-info-value {
        word-break: break-all;
    }

    .step-pay-copy-mini {
        min-height: 40px;
        padding: 8px 12px;
    }

    /* ── فرم قرارداد ── */
    .app-page--contract .contract-progress {
        justify-content: flex-start;
        gap: 0;
        margin-bottom: 18px;
        padding: 4px 2px 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .app-page--contract .contract-progress-item {
        scroll-snap-align: center;
        min-width: 64px;
    }

    .app-page--contract .contract-progress-dot {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .app-page--contract .contract-progress-label {
        font-size: 0.62rem;
        max-width: 72px;
        white-space: normal;
        line-height: 1.35;
    }

    .app-page--contract .contract-progress-line {
        min-width: 10px;
        max-width: 20px;
        margin-top: 16px;
    }

    .contract-box {
        padding: 14px 16px;
        margin-bottom: 14px;
    }

    .contract-box h3 {
        font-size: 0.9rem;
        flex-wrap: wrap;
    }

    .contract-box p,
    .contract-note {
        font-size: 0.84rem;
        line-height: 1.75;
    }

    .contract-download-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .contract-download-card__info {
        min-width: 0;
    }

    .contract-download-card__btn,
    .contract-download-actions .contract-download-card__btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .contract-download-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .contract-invoice-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }

    .contract-invoice-row strong {
        font-size: 0.9rem;
        word-break: break-word;
    }

    .contract-invoice-payable {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 14px;
    }

    .contract-card-trigger {
        width: 100%;
        min-height: 56px;
        padding: 14px 16px;
    }

    .contract-card-trigger-text {
        min-width: 0;
    }

    .contract-receipts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .contract-receipt-add {
        min-height: 100px;
        padding: 20px 12px;
    }

    .contract-receipt-add-actions {
        flex-direction: column;
    }

    .contract-receipt-add-btn {
        width: 100%;
        min-width: 0;
    }

    .contract-receipt-delete,
    .contract-doc-delete {
        min-width: 40px;
        min-height: 40px;
    }

    .contract-doc-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .contract-doc-title-wrap {
        width: 100%;
    }

    .contract-doc-note {
        line-height: 1.6;
    }

    .contract-doc-pick {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .contract-doc-file-item {
        width: calc(50% - 4px);
    }

    .contract-check {
        align-items: flex-start;
        gap: 10px;
        font-size: 0.84rem;
        line-height: 1.65;
    }

    .contract-status-pill {
        width: 100%;
        text-align: center;
    }

    .app-page--contract .step-actions {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin: 20px calc(-1 * var(--space-4)) calc(-1 * var(--space-5));
        padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom));
        background: rgba(8, 8, 8, 0.94);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        flex-direction: column-reverse;
    }

    .app-page--contract .step-actions .btn-prev,
    .app-page--contract .step-actions .btn-next {
        width: 100%;
        min-height: 50px;
    }

    /* داشبورد — کارت دانلود */
    .dash-downloads .contract-download-card {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-downloads .contract-download-card__btn {
        width: 100%;
        justify-content: center;
    }

    /* ── ادمین مدارک ── */
    .admin-docs-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .admin-docs-tabs::-webkit-scrollbar {
        display: none;
    }

    .admin-docs-tab {
        flex-shrink: 0;
        min-height: 44px;
    }

    .admin-docs-card {
        padding: 14px;
    }

    .admin-docs-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .admin-docs-card-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-docs-files-grid {
        grid-template-columns: 1fr;
    }

    .admin-docs-file-actions {
        flex-wrap: wrap;
    }

    .admin-docs-receipt {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .admin-docs-receipt-actions {
        width: 100%;
    }

    .admin-docs-card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .admin-finance-group {
        padding: 12px;
    }

    .admin-review-export {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-docs-file-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-docs-file-card__actions .admin-btn,
    .admin-docs-file-card__actions form {
        width: 100%;
    }

    .admin-docs-card-actions__row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-docs-card-actions__row form,
    .admin-docs-card-actions__row .admin-btn,
    .admin-docs-card-actions__row a.admin-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-docs-card-actions form,
    .admin-docs-card-actions .admin-btn,
    .admin-docs-card-actions a.admin-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-docs-approve-form,
    .admin-contract-upload__form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .admin-contract-upload {
        width: 100%;
        min-width: 0;
    }

    .admin-docs-upload-label {
        width: 100%;
    }

    .admin-docs-upload-label input[type="file"] {
        width: 100%;
        max-width: 100%;
    }

    .admin-toolbar--docs {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-toolbar--docs > .admin-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── موبایل کوچک (≤480px) ── */
@media (max-width: 480px) {
    .step-progress-track {
        justify-content: flex-start;
    }

    .app-page--contract .contract-progress-label {
        display: none;
    }

    .app-page--contract .contract-progress-item.active .contract-progress-label,
    .app-page--contract .contract-progress-item.done .contract-progress-label {
        display: block;
    }

    .contract-receipts-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contract-doc-file-item {
        width: 72px;
    }

    .contract-doc-files {
        justify-content: flex-start;
    }

    .step-review-edit {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }

    .admin-stats {
        grid-template-columns: 1fr 1fr;
    }

    .admin-detail-panel {
        width: 100%;
        max-width: none;
    }
}

/* ── موبایل خیلی کوچک (≤400px) ── */
@media (max-width: 400px) {
    .contract-receipts-grid {
        grid-template-columns: 1fr;
    }

    .contract-doc-file-item {
        width: 64px;
    }

    .step-toggle-group {
        flex-direction: column;
    }

    .step-toggle {
        width: 100%;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }
}

/* جلوگیری از بیرون‌زدگی افقی */
.app-page--step .step-body,
.app-page--contract .step-body,
.admin-content {
    overflow-x: clip;
}

.contract-invoice-payable strong,
.step-pay-info-value--sheba {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    word-break: break-all;
}