/* ========================================================================= */
/* چیدمان گوشی و صفحه‌ی باریک (عرض ۸۰۰ پیکسل و کمتر)                          */
/* این فایل در base.html با media="(max-width: 800px)" بار می‌شود و همه‌ی       */
/* قاعده‌هایش هم داخل همان شرط است؛ روی کامپیوتر هیچ اثری ندارد.               */
/* ========================================================================= */

@media (max-width: 800px) {
    :root { --topbar-height: 48px; --mnav-height: 58px; --mnav-safe: env(safe-area-inset-bottom, 0px); }

    /* ==================== پوسته: نوار کناری می‌رود، محتوا تمام‌عرض می‌شود ==================== */
    .sidebar { display: none !important; }
    .topbar { right: 0 !important; padding: 0 12px; gap: 8px; }
    .topbar-brand { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-strong); font-size: 18px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .topbar-brand svg { width: 24px; height: 24px; display: block; flex: none; }
    #userNameText { display: none; }
    .main-container { margin-right: 0 !important; padding: 16px 16px calc(var(--mnav-height) + var(--mnav-safe) + 24px); }

    /* ==================== نوار ناوبری پایین ==================== */
    .mnav {
        display: flex; position: fixed; right: 0; left: 0; bottom: 0; z-index: 1600;
        height: calc(var(--mnav-height) + var(--mnav-safe)); padding-bottom: var(--mnav-safe);
        background: var(--bg-card); border-top: 1px solid var(--border-color);
    }
    .mnav-item {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        background: none; border: 0; padding: 0; color: var(--text-muted); font-family: inherit; font-size: 14px; line-height: 1.3;
        text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .mnav-item .ui-icon { width: 22px; height: 22px; }
    .mnav-item.active { color: var(--accent-blue); }
    .mnav-item:focus-visible, .mnav-link:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }

    /* ==================== برگه‌ی «بیشتر» ==================== */
    .mnav-backdrop {
        display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1580; background: rgba(0, 0, 0, 0.55);
        opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s;
    }
    .mnav-sheet {
        display: block; position: fixed; right: 0; left: 0; bottom: calc(var(--mnav-height) + var(--mnav-safe)); z-index: 1590;
        max-height: calc(100vh - var(--mnav-height) - var(--topbar-height) - 24px); overflow-y: auto;
        background: var(--bg-card); border-top: 1px solid var(--border-strong); border-radius: 14px 14px 0 0; padding: 6px 8px 8px;
        transform: translateY(100%); visibility: hidden; transition: transform 0.22s ease, visibility 0.22s;
    }
    @supports (height: 100dvh) {
        .mnav-sheet { max-height: calc(100dvh - var(--mnav-height) - var(--topbar-height) - 24px); }
    }
    html.mnav-open .mnav-backdrop { opacity: 1; visibility: visible; }
    html.mnav-open .mnav-sheet { transform: none; visibility: visible; }
    html.mnav-open body { overflow: hidden; }
    .mnav-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 6px; }
    .mnav-link {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
        background: none; border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-light);
        font-family: inherit; font-size: 17px; text-align: right; text-decoration: none; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mnav-link .ui-icon { color: var(--text-muted); }
    .mnav-link.active, .mnav-link.active .ui-icon { color: var(--accent-blue); }
    .mnav-link.logout { border-bottom: 0; }
    .mnav-link.guest-only, html.is-guest .mnav-link.member-only { display: none; }
    html.is-guest .mnav-link.guest-only { display: flex; }
    .mnav-social { display: flex; justify-content: center; gap: 24px; padding: 12px 0 4px; border-top: 1px solid var(--border-color); }
    .mnav-social:not(:has(a[style*="inline-flex"])) { display: none; }

    /* ==================== چیزهای شناور بالای نوار پایین بایستند ==================== */
    #supportFab { left: 14px; bottom: calc(var(--mnav-height) + var(--mnav-safe) + 14px); width: 42px; height: 42px; }
    #copyToast { left: 16px; right: 16px; min-width: 0; bottom: calc(var(--mnav-height) + var(--mnav-safe) + 16px); }
    .alert-panel { position: fixed; top: calc(var(--topbar-height) + 6px); right: 8px; left: 8px; width: auto; max-height: calc(100vh - var(--topbar-height) - var(--mnav-height) - 24px); }

    /* ==================== دکمه و خانه‌ی ورودی به اندازه‌ی انگشت ==================== */
    .ui-btn, .ui-input { height: 40px; }
    .ui-btn.sm { height: 36px; }
    .ui-btn.icon-only { width: 40px; }
    .ui-btn.icon-only.sm { width: 36px; }
    .ui-seg button { height: 38px; }
    .icon-btn { width: 36px; height: 36px; }

    /* ==================== فهرست کارت‌های استراتژی ==================== */
    .strategy-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-header .search-box { width: 100%; }
    .tag.guide-tag { line-height: 2.2; padding: 0 12px; }

    /* ==================== خانه‌های ورودی: آیفون با نوشته‌ی کوچک‌تر از ۱۶ پیکسل صفحه را بزرگ‌نمایی می‌کند ==================== */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

    /* ==================== پنجره‌ها تمام‌صفحه: کارت اطلاعات نماد، پشتیبانی، نمودار نوسان داشبورد ==================== */
    .contract-card-modal, .support-modal-box, .iv-chart-modal-box {
        width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0;
    }
    .iv-chart-modal-box { display: flex; flex-direction: column; overflow-y: auto; }
    :is(.contract-card-modal, .support-modal-box) .modal-header { padding: 10px 14px; }
    :is(.contract-card-modal, .support-modal-box) .modal-header h3 { font-size: 18px; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
    .contract-card-modal .modal-header h3 small { flex-basis: 100%; margin-right: 0 !important; font-size: 13px !important; font-weight: 400; line-height: 1.7; }
    :is(.contract-card-modal, .support-modal-box) .modal-close-btn { min-width: 40px; min-height: 40px; flex: none; }
    .contract-card-modal .modal-tab-btn { padding: 10px 4px; font-size: 14px; line-height: 1.5; }
    .contract-card-modal .modal-body { padding: 14px; }
    .contract-card-modal .info-box { padding: 10px 6px; }
    .contract-card-modal .info-box .value { font-size: 17px; }
    .support-view { padding: 12px 14px; }

    /* ==================== پنل کاربری: اول طرح‌های اشتراک، بعد ویرایش حساب ==================== */
    .profile-container > * { order: 3; }
    .profile-container > :first-child { order: 0; }
    .profile-container > #user-view { order: 1; }
    .profile-container > :nth-child(2) { order: 2; }
    .profile-card, .summary-card { padding: 16px 14px; }
    #promo-code-input { margin-bottom: 0; }
    .plans-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px; text-align: right; }
    .plan-card h4 { margin: 0 !important; }
    .plan-card .plan-price { grid-column: 1; margin: 0; font-size: 20px; }
    .plan-card .btn-primary { grid-column: 2; grid-row: 1 / span 2; width: auto; min-height: 44px; padding: 0 18px; }
    .profile-container .btn-primary { min-height: 42px; }
    .profile-container :is(.btn-action, .btn-success, .btn-danger) { height: 36px; }
    .profile-container .form-input { height: 42px; }

    /* فاکتورهای کاربر: هر فاکتور یک کارت، به‌جای جدولی که باید به چپ و راست کشید */
    #user-view table, #user-view tbody { display: block; margin-top: 0; }
    #user-view thead { display: none; }
    #invoices-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
    #invoices-list tr:last-child { border-bottom: 0; }
    #invoices-list td { padding: 0; border: 0; background: none !important; }
    #invoices-list td:nth-child(1) { grid-column: 2; grid-row: 1; color: var(--text-muted); text-align: left; }
    #invoices-list td:nth-child(2) { grid-column: 1; grid-row: 1; color: var(--text-strong); font-weight: 500; }
    #invoices-list td:nth-child(3) { grid-column: 1; grid-row: 2; font-family: var(--font-data); }
    #invoices-list td:nth-child(3)::after { content: " تومان"; font-family: var(--font-text); font-size: 14px; color: var(--text-muted); }
    #invoices-list td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: left; }
    #invoices-list td:nth-child(5) { grid-column: 1; grid-row: 3; color: var(--text-muted); text-align: right; font-size: 14px; }
    #invoices-list td:nth-child(6) { grid-column: 2; grid-row: 3; text-align: left; color: transparent; }
    #invoices-list td:nth-child(6) > * { color: var(--text-light); }
    #invoices-list td[colspan] { grid-column: 1 / -1; grid-row: 1; color: var(--text-muted); text-align: center !important; }
    #invoices-list td[colspan]::after { content: none; }

    /* ==================== داشبورد: جدول‌های کوچک در عرض جا بگیرند ==================== */
    .tables-grid .table-section { overflow-x: auto; }
    .tables-grid th, .tables-grid td { padding: 8px 6px; }
    .tables-grid th { font-size: 14px; }
    .chart-header, .table-header-title { padding: 10px 12px; }

    /* ==================== موقعیت‌یاب ==================== */
    .pf-form, .pf-empty, .pf-summary, .pf-group-head, .pf-feedback { padding: 14px 12px; }
    .pf-card { padding: 12px; gap: 12px; }
    .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-actions .ui-btn { flex: 1 1 auto; }
    .pf-seg button { padding: 0 4px; }

    /* ==================== پرتفو ==================== */
    /* نوار بالا: هر برچسب کنار فهرست خودش، در سه ردیف مرتب */
    .pf-controls { width: 100%; gap: 8px 10px; }
    .pf-controls .sep { flex-basis: 100%; width: auto; height: 0; background: none; }
    #calcBasisSelect { flex: 1 1 55%; min-width: 0; }
    #globalGroupSelect { flex: 1 1 40%; min-width: 0; }
    #portfolioLastUpdate { flex: 1 1 0; min-width: 0; }
    .portfolio-tabs .pf-tabs { display: flex; width: 100%; }
    .portfolio-tabs .pf-tabs .ptab-btn { flex: 1 1 auto; justify-content: center; height: 40px; padding: 0 6px; }

    /* نمودارها: حاشیه‌ی کمتر، و جا برای راهنمای رنگ که در گوشی زیر نمودار می‌آید */
    #visual-dashboard-panel { padding: 12px !important; }
    #visual-dashboard-panel > div { gap: 12px !important; }
    #visual-dashboard-panel > div > div { min-width: 0 !important; flex-basis: 100% !important; padding: 12px !important; }
    #visual-dashboard-panel div:has(> #portfolioDonutChart) { height: 340px !important; }

    /* سربرگ هر گروه: نام در بالا، سه عدد زیر هم با برچسب در راست و عدد در چپ */
    .acc-header { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
    .acc-title { order: 1; width: auto; flex: 1 1 0; min-width: 0; font-size: 17px; }
    .acc-icon { order: 2; }
    .acc-summary { order: 3; width: 100%; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; }
    .acc-summary > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
    .acc-summary strong { margin-right: 0; font-size: 16px; }
    .acc-body { padding: 10px; }

    /* چهار کارت خلاصه‌ی گروه: هر کدام یک ردیف (عنوان در راست، عدد در چپ) */
    .acc-body .summary-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; margin-bottom: 14px !important; }
    .acc-body .summary-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 10px 12px; }
    .acc-body .summary-card .title { margin-bottom: 0; }
    .acc-body .summary-card .value { font-size: 18px; text-align: left; }
    .acc-body .summary-card .card-details { grid-column: 1 / -1; }

    /* دکمه‌های داخل گروه: دو تا در هر ردیف */
    .acc-body > div:has(> .btn-sub-positions) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; margin-bottom: 12px !important; }
    .acc-body .ptab-btn { justify-content: center; height: auto; min-height: 40px; padding: 4px 8px; font-size: 15px; line-height: 1.5; white-space: normal; text-align: center; }
    .acc-body .btn-send-lab { margin-right: 0 !important; }
    .acc-body .data-card { padding: 10px; margin-bottom: 10px; }

    /* موقعیت‌های باز: هر موقعیت یک کارت، به‌جای جدول نُه‌ستونه */
    .acc-body .card-positions { padding: 0; border: 0; background: none; }
    .card-positions .table-container { max-height: none; overflow: visible; border: 0; }
    .card-positions .port-table, .card-positions .port-table tbody { display: block; }
    .card-positions .port-table thead { display: none; }
    .card-positions .port-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-main); }
    .card-positions .port-table td { padding: 0; border: 0; background: none !important; text-align: right; font-size: 15px; }
    .card-positions .port-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-family: var(--font-text); font-size: 17px; }
    .card-positions .port-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: left; }
    .card-positions .port-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: -8px; font-family: var(--font-text); font-size: 14px; font-weight: 400 !important; color: var(--text-muted); }
    .card-positions .port-table td:nth-child(n+4)::before { display: block; font-family: var(--font-text); font-size: 13px; font-weight: 400; color: var(--text-muted); direction: rtl; }
    .card-positions .port-table td:nth-child(4)::before { content: "تعداد"; }
    .card-positions .port-table td:nth-child(5)::before { content: "حجم کاور شده"; }
    .card-positions .port-table td:nth-child(6)::before { content: "میانگین ورود"; }
    .card-positions .port-table td:nth-child(7)::before { content: "قیمت لحظه‌ای"; }
    .card-positions .port-table td:nth-child(8)::before { content: "سود/زیان"; }
    .card-positions .port-table td:nth-child(9)::before { content: "وجه تضمین"; }
    .card-positions .port-table td[colspan] { grid-column: 1 / -1; grid-row: 1; text-align: center; font-family: var(--font-text); }
}