/* ============================================================
   MRRECIPE — Responsive Stylesheet (Shared)
   قوانین ریسپانسیو مشترک بین پنل کاربر و پنل ادمین
   نسخه: 2.0.0
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   بخش ۱: لایه‌بندی اصلی (Layout)
   ═══════════════════════════════════════════════════════════════ */

/* ── تبلت (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .plans-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── تبلت اختصاصی (769px - 1024px) ────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {

    .table th:nth-child(4),
    .table th:nth-child(5),
    .table td:nth-child(4),
    .table td:nth-child(5) {
        display: none;
    }

    .table th,
    .table td {
        padding: 8px 8px !important;
        font-size: .82rem;
    }

    .recipe-layout {
        grid-template-columns: 1fr 1fr !important;
    }

    .analytics-charts-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .formula-layout {
        grid-template-columns: 1fr 1fr !important;
    }

    .simulator-layout {
        grid-template-columns: 260px 1fr !important;
    }

    .user-details-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── موبایل و تبلت کوچک (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sidebar-w: 260px;
    }

    /* سایدبار و لایه‌بندی */
    .sidebar {
        transform: translateX(100%);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-right: 0;
    }

    .sidebar-toggle {
        display: flex !important;
    }

    .page-content {
        padding: 16px;
    }

    .flash-container {
        padding: 0 16px 0;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header .btn {
        width: 100%;
        justify-content: center;
    }

    /* گریدها */
    .form-grid-2 {
        grid-template-columns: 1fr;
    }

    .form-grid-3 {
        grid-template-columns: 1fr;
    }

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

    .plans-grid {
        grid-template-columns: 1fr;
    }

    /* Modal و Auth */
    .modal-box {
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius);
    }

    .auth-box {
        padding: 24px 20px;
    }

    /* تب‌ها */
    .tab-list {
        gap: 0;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: .82rem;
    }

    /* نمودارها */
    .chart-container {
        height: 240px;
    }

    /* ═══════════════════════════════════════════════════════════
       تبدیل جدول به کارت (مشترک بین ادمین و کاربر)
       ═══════════════════════════════════════════════════════════ */
    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 16px;
        padding: 12px 16px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0 !important;
        border-bottom: 1px solid var(--border);
        font-size: .85rem;
        text-align: right;
    }

    .table tbody tr td:last-child {
        border-bottom: none;
        flex-wrap: wrap;
        gap: 6px;
    }

    .table tbody tr td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-muted);
        font-size: .78rem;
        margin-left: 10px;
        white-space: nowrap;
    }

    .table tbody tr td:first-child {
        display: none;
    }

    .table tbody tr td:last-child::before {
        display: none;
    }

    .tbl-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .tbl-actions .btn {
        font-size: .8rem;
        padding: 4px 10px;
    }

    /* Pagination */
    .pagination a,
    .pagination span {
        width: 32px;
        height: 32px;
        font-size: .82rem;
    }

    /* ═══════════════════════════════════════════════════════════
       صفحات اختصاصی کاربران
       ═══════════════════════════════════════════════════════════ */

    /* ─── رسپی (محصولات) ─────────────────────────────────── */
    .recipe-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .recipe-layout .card:last-child {
        position: relative !important;
        top: 0 !important;
        order: -1;
        margin-bottom: 16px;
    }

    .ingredient-row {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 8px;
        padding: 12px;
    }

    .ingredient-row .form-group {
        margin-bottom: 4px;
    }

    .ingredient-row .form-group label {
        font-size: .78rem;
        margin-bottom: 2px;
    }

    .ingredient-row .form-control {
        font-size: .85rem;
        padding: 6px 10px;
    }

    .ingredient-row .remove-ing {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
        width: 100%;
        margin-top: 4px;
        background: #fee2e2;
        color: var(--danger);
        border: 1px solid #fecaca;
        border-radius: var(--radius-sm);
        padding: 6px;
        font-size: .85rem;
    }

    .ingredient-row .remove-ing:hover {
        background: var(--danger);
        color: #fff;
    }

    #addIngredientRow {
        width: 100%;
        justify-content: center;
    }

    /* ─── داشبورد تحلیلی ─────────────────────────────────── */
    .analytics-charts-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .chart-container {
        height: 200px !important;
    }

    /* ─── نمودار فرمول ────────────────────────────────────── */
    .formula-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .formula-selector {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .formula-selector .form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    .formula-selector .btn {
        width: 100%;
        justify-content: center;
    }

    .formula-options {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .formula-options label {
        font-size: .78rem;
        padding: 4px 8px;
    }

    /* ─── شبیه‌ساز تورم ───────────────────────────────────── */
    .simulator-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .simulator-layout .card:first-child {
        order: -1;
        margin-bottom: 0;
    }

    .slider-group {
        margin-bottom: 14px;
    }

    .slider-label {
        font-size: .85rem;
    }

    /* ─── صفحه پشتیبانی ──────────────────────────────────── */
    .support-tabs .tab-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .support-tabs .tab-btn {
        flex: 1;
        min-width: calc(50% - 4px);
        text-align: center;
        font-size: .78rem;
        padding: 6px 8px;
    }

    .support-tabs .tab-panel .card-body {
        padding: 12px;
    }

    .faq-item h4 {
        font-size: .88rem !important;
    }

    .faq-item p {
        font-size: .82rem !important;
    }

    .receipt-upload-form .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .ticket-item {
        padding: 12px !important;
    }

    .ticket-item .ticket-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }

    .ticket-item .ticket-reply-form {
        flex-direction: column !important;
    }

    .ticket-item .ticket-reply-form textarea {
        min-width: 100% !important;
    }

    .ticket-item .ticket-reply-form .btn {
        width: 100%;
        justify-content: center;
    }

    /* ─── خریدهای برنامه‌ریزی‌شده ──────────────────────────── */
    .filter-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .shopping-table th,
    .shopping-table td {
        padding: 6px 8px;
        font-size: .82rem;
    }

    .shopping-table .item-actions .btn {
        font-size: .7rem;
        padding: 2px 6px;
    }

    .template-card .template-header {
        flex-direction: column;
        align-items: stretch;
    }

    .template-card .template-actions {
        justify-content: stretch;
    }

    .template-card .template-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .shopping-header .header-actions {
        justify-content: stretch;
        width: 100%;
    }

    .shopping-header .header-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .modal-shopping {
        margin: 10px;
        padding: 16px;
    }

    .modal-shopping .form-grid-2 {
        grid-template-columns: 1fr;
    }

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

    .shopping-container .stat-card .stat-sub {
        font-size: .6rem;
    }

    /* ─── دکمه برگشت به بالا ─────────────────────────────── */
    .back-to-top {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        bottom: 20px;
        right: 20px;
    }

    /* ─── سنجش قدرت رمز ──────────────────────────────────── */
    .strength-popover {
        min-width: 200px;
        max-width: 280px;
        padding: 14px 16px;
    }

    .strength-popover::before {
        right: 16px;
    }

    .strength-popover .popover-title {
        font-size: 0.75rem;
    }

    .strength-checklist .check-item {
        font-size: 0.72rem;
        padding: 2px 4px;
    }

    .strength-checklist .check-item .check-icon {
        font-size: 0.8rem;
        width: 18px;
    }

    .password-field .form-control {
        height: 42px;
        font-size: 0.88rem;
        padding-left: 38px;
    }

    .toggle-password {
        font-size: 0.9rem;
        padding: 4px;
        left: 10px;
    }

    .strength-meter-label {
        font-size: 0.65rem;
    }

    .confirm-match-msg {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* ─── منوی کشویی نوتیفیکیشن ─────────────────────────── */
    #notificationDropdown {
        min-width: 200px !important;
        max-width: 250px !important;
        right: 0 !important;
        left: auto !important;
    }

    /* ─── پاسخ تیکت ادمین ─────────────────────────────────── */
    .ticket-reply-layout {
        grid-template-columns: 1fr;
    }

    .ticket-message-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ticket-message-user,
    .ticket-message-admin,
    .ticket-message-user-alt {
        padding: 10px 12px;
        border-right-width: 2px;
    }

    .ticket-message-body {
        font-size: .88rem;
    }

    .ticket-info-grid {
        font-size: .85rem;
        line-height: 1.8;
    }

    .ticket-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ─── جزئیات کاربر (user_details.php) ─────────────────── */
    .user-details-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .user-details-grid .card:last-child {
        order: -1;
        margin-bottom: 0;
    }

    .user-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .user-info-grid div {
        font-size: .85rem;
        padding: 4px 0;
    }

    .subscription-form .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ── موبایل کوچک (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {

    /* آمار */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-value {
        font-size: 1rem;
    }

    /* برند و دکمه‌ها */
    .brand-name {
        font-size: 1.1rem;
    }

    .btn {
        padding: 8px 14px;
        font-size: .85rem;
    }

    .btn-sm {
        padding: 5px 10px;
        font-size: .78rem;
    }

    /* کارت */
    .card-header {
        flex-wrap: wrap;
    }

    .card-header h3 {
        font-size: .92rem;
    }

    /* فیلتر بار */
    .filter-bar {
        flex-direction: column;
    }

    .filter-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .search-input-wrap {
        width: 100%;
    }

    /* Pagination */
    .pagination a,
    .pagination span {
        width: 30px;
        height: 30px;
        font-size: .8rem;
    }

    /* Modal */
    .modal-overlay {
        padding: 10px;
    }

    .modal-box {
        padding: 0;
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Navbar */
    .navbar-title {
        font-size: .88rem;
    }

    /* جدول به کارت */
    .table tbody tr {
        padding: 10px 12px;
    }

    .table tbody tr td {
        font-size: .8rem;
        padding: 4px 0 !important;
    }

    .table tbody tr td::before {
        font-size: .7rem;
    }

    .tbl-actions .btn {
        font-size: .75rem;
        padding: 3px 8px;
    }

    /* رسپی */
    .ingredient-row {
        padding: 10px;
    }

    .ingredient-row .form-control {
        font-size: .8rem;
        padding: 5px 8px;
    }

    .ingredient-row .remove-ing {
        font-size: .8rem;
        padding: 5px;
    }

    /* نمودارها */
    .chart-container {
        height: 180px !important;
    }

    /* شبیه‌ساز */
    .simulator-layout .card:first-child {
        padding: 12px;
    }

    /* پشتیبانی */
    .support-tabs .tab-btn {
        font-size: .72rem;
        padding: 5px 6px;
        min-width: calc(50% - 4px);
    }

    .support-tabs .tab-btn i {
        font-size: .7rem;
    }

    /* خرید */
    .shopping-container .stats-grid {
        grid-template-columns: 1fr;
    }

    .shopping-container .stat-card .stat-value {
        font-size: 1.2rem;
    }

    .shopping-table th:nth-child(3),
    .shopping-table td:nth-child(3),
    .shopping-table th:nth-child(4),
    .shopping-table td:nth-child(4) {
        display: none;
    }

    /* دکمه برگشت به بالا */
    .back-to-top {
        width: 38px;
        height: 38px;
        font-size: .85rem;
        bottom: 16px;
        right: 16px;
    }

    /* سنجش قدرت رمز */
    .strength-popover {
        left: 0;
        right: 0;
        min-width: auto;
        max-width: none;
        padding: 12px 14px;
        border-radius: 10px;
        top: calc(100% + 6px);
    }

    .strength-popover::before {
        right: 14px;
        width: 10px;
        height: 10px;
        top: -5px;
    }

    .strength-popover .popover-title {
        font-size: 0.7rem;
        margin-bottom: 6px;
    }

    .strength-checklist {
        gap: 4px;
    }

    .strength-checklist .check-item {
        font-size: 0.68rem;
        padding: 2px 4px;
    }

    .strength-checklist .check-item .check-icon {
        font-size: 0.75rem;
        width: 16px;
    }

    .strength-checklist .check-item .check-text {
        font-size: 0.68rem;
    }

    .password-field .form-control {
        height: 38px;
        font-size: 0.85rem;
        padding-left: 34px;
        padding-right: 10px;
    }

    .toggle-password {
        font-size: 0.85rem;
        padding: 3px;
        left: 8px;
        width: 30px;
        height: 30px;
    }

    .strength-meter {
        height: 3px;
        margin-top: 6px;
    }

    .strength-meter-label {
        font-size: 0.6rem;
        margin-top: 2px;
    }

    .strength-meter-label .score-badge {
        font-size: 0.55rem;
        padding: 0 6px;
    }

    .confirm-match-msg {
        font-size: 0.65rem;
        padding: 2px 8px;
        margin-top: 4px;
    }

    .confirm-match-msg .match-icon {
        font-size: 0.8rem;
    }

    .strength-error {
        font-size: 0.7rem;
        padding: 6px 10px;
        margin-top: 4px;
    }

    /* پاسخ تیکت ادمین */
    .ticket-message-user,
    .ticket-message-admin,
    .ticket-message-user-alt {
        padding: 8px 10px;
    }

    .ticket-message-body {
        font-size: .82rem;
        line-height: 1.6;
    }

    .ticket-info-grid {
        font-size: .8rem;
        line-height: 1.6;
    }

    /* جزئیات کاربر */
    .user-info-grid {
        grid-template-columns: 1fr !important;
    }

    .user-info-grid div {
        font-size: .8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   بخش ۲: استایل چاپ (Print)
   ═══════════════════════════════════════════════════════════════ */
@media print {

    .sidebar,
    .top-navbar,
    .sidebar-overlay,
    .btn,
    .flash-container,
    .page-footer {
        display: none !important;
    }

    .main-content {
        margin-right: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .table th,
    .table td {
        border: 1px solid #ccc !important;
    }

    .chart-container {
        height: 200px !important;
    }

    @page {
        margin: 1.5cm;
        size: A4;
    }
}

/* ═══════════════════════════════════════════════════════════════
   بخش ۳: ترجیحات کاربر (Reduced Motion)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none !important;
    }

    .back-to-top.show {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Captcha — Responsive (Login Page)
   ═══════════════════════════════════════════════════════════════ */

/* ── موبایل و تبلت کوچک (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
    #captcha {
        font-size: 16px !important;
        letter-spacing: 6px;
        height: 44px !important;
        line-height: 42px !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .captcha-box {
        min-width: 130px;
        height: 44px;
    }

    .captcha-box img {
        width: 130px;
        height: 44px;
    }

    .captcha-refresh {
        font-size: 16px;
    }

    .field-error {
        font-size: 12px;
    }
}

/* ── موبایل کوچک (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
    #captcha {
        font-size: 15px !important;
        letter-spacing: 5px;
        height: 42px !important;
        line-height: 40px !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    #captcha::-webkit-input-placeholder,
    #captcha::-moz-placeholder {
        font-size: 12px;
    }

    .captcha-box {
        min-width: 110px;
        height: 42px;
        padding: 0 2px;
    }

    .captcha-box img {
        width: 110px;
        height: 42px;
    }

    .captcha-refresh {
        font-size: 14px;
    }

    .field-error {
        font-size: 11.5px;
        padding-right: 2px;
    }
	/* ═══════════════════════════════════════════════════════════════
   Register Page — Terms Modal Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── موبایل و تبلت کوچک (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
    .terms-accept-row {
        padding: 10px 12px;
        font-size: 0.88rem;
        line-height: 1.8;
        gap: 8px;
    }

    .terms-accept-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }

    #termsModal .modal-box {
        width: 94%;
        max-height: 90vh;
    }

    #termsModal .terms-modal-header {
        padding: 12px 14px;
    }

    #termsModal .terms-modal-header h3 {
        font-size: 0.98rem;
    }

    #termsModal .terms-modal-body {
        padding: 12px 14px;
        font-size: 0.88rem;
        line-height: 1.8;
    }

    #termsModal .terms-modal-footer {
        padding: 12px 14px;
        gap: 8px;
    }

    #termsModal .terms-modal-actions {
        flex-direction: column;
    }

    #termsModal .terms-modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── موبایل کوچک (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
    .terms-accept-row {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .terms-accept-row input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }

    #termsModal .modal-box {
        width: 96%;
        max-height: 92vh;
    }

    #termsModal .terms-modal-header {
        padding: 10px 12px;
    }

    #termsModal .terms-modal-header h3 {
        font-size: 0.9rem;
    }

    #termsModal .terms-modal-body {
        padding: 10px 12px;
        font-size: 0.82rem;
        line-height: 1.7;
    }

    #termsModal .terms-modal-body ul {
        margin-right: 16px;
    }

    #termsModal .terms-modal-footer {
        padding: 10px 12px;
    }

    #termsModal .terms-scroll-hint {
        font-size: 0.75rem;
        padding: 5px 8px;
    }
	/* ═══════════════════════════════════════════════════════════════
   Register Page — Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── تبلت و موبایل بزرگ (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
    .auth-box.register-page {
        padding: 1.8rem 1.5rem;
        margin: 1rem auto;
        border-radius: 12px;
    }

    .register-page .terms-accept-row {
        padding: 10px 12px;
        font-size: 0.88rem;
        line-height: 1.8;
        gap: 8px;
    }

    .register-page .terms-accept-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 5px;
    }

    #termsModal .modal-box {
        width: 94%;
        max-height: 90vh;
    }

    #termsModal .terms-modal-header {
        padding: 12px 14px;
    }

    #termsModal .terms-modal-header h3 {
        font-size: 0.98rem;
    }

    #termsModal .terms-modal-body {
        padding: 12px 14px;
        font-size: 0.88rem;
        line-height: 1.8;
    }

    #termsModal .terms-modal-footer {
        padding: 12px 14px;
        gap: 8px;
    }

    #termsModal .terms-modal-actions {
        flex-direction: column;
    }

    #termsModal .terms-modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── موبایل کوچک (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
    .auth-box.register-page {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }

    .register-page .auth-logo h1 {
        font-size: 1.35rem;
    }

    .register-page .terms-accept-row {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .register-page .terms-accept-row input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }

    #termsModal .modal-box {
        width: 96%;
        max-height: 92vh;
    }

    #termsModal .terms-modal-header {
        padding: 10px 12px;
    }

    #termsModal .terms-modal-header h3 {
        font-size: 0.9rem;
    }

    #termsModal .terms-modal-body {
        padding: 10px 12px;
        font-size: 0.82rem;
        line-height: 1.7;
    }

    #termsModal .terms-modal-body ul {
        margin-right: 16px;
    }

    #termsModal .terms-modal-footer {
        padding: 10px 12px;
    }

    #termsModal .terms-scroll-hint {
        font-size: 0.75rem;
        padding: 5px 8px;
    }

    #termsModal .terms-modal-body::-webkit-scrollbar {
        width: 5px;
    }
}
}