@media (max-width:992px){
  .dash-grid{grid-template-columns:repeat(6,1fr);}
  .dash-card[data-size="12"]{grid-column:span 6;}
  .dash-card[data-size="8"]{grid-column:span 6;}
  .dash-card[data-size="6"]{grid-column:span 6;}
  .dash-card[data-size="4"]{grid-column:span 3;}
  .dash-card[data-size="3"]{grid-column:span 3;}
  .content{padding:14px; gap:14px}
  .grid-2{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
  .stat .ic{width:66px; height:66px; font-size:30px; border-radius:20px}
  .stat{gap:14px}
  .stat-value{font-size:19px}
  .cat-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dash-grid{grid-template-columns:1fr;}
  .dash-card{grid-column:span 1 !important;}
  .progress-ring-wrap{width:110px; height:110px;}
  .progress-ring-center .pr-pct{font-size:20px;}
  .progress-ring-center .pr-sub{font-size:9.5px;}
  .progress-flex{gap:14px; justify-content:center;}
  .progress-flex > .progress-main{min-width:100%;}
  .progress-style-seg button{padding:5px 8px; font-size:10.5px;}
  .site-footer{ padding:16px 12px 12px; }
  .site-footer-inner{ grid-template-columns:1fr; gap:12px; }
  .site-footer-section .sf-value{ font-size:12.5px; }
  .site-footer-copy{ font-size:11.5px; margin-top:12px; padding-top:10px; }
}
@media (max-width:768px){
  .inv-items-head{display:none;}
  .inv-item-row{grid-template-columns:1fr 1fr; gap:6px; padding:10px; background:var(--surface-2); border-radius:12px; margin-bottom:8px; position:relative;}
  .inv-item-row > .inv-desc-field{grid-column:1/-1;}
  .inv-item-row .rm-cell{position:absolute; top:6px; inset-inline-start:6px;}
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;padding:6px}
  .admin-tab{white-space:nowrap;font-size:12px;padding:7px 12px}
  .admin-stat{padding:12px;gap:10px}
  .admin-stat .ic{width:44px;height:44px;font-size:20px;border-radius:12px}
  .admin-stat .val{font-size:16px}
  .admin-stat .lbl{font-size:11px}
  .filter-grid{grid-template-columns:1fr 1fr; gap:8px}
  .filter-grid > *:first-child{grid-column:1/-1}
  .filter-grid .btn{grid-column:1/-1}

  .table-card-mobile { min-width: 100% !important; display: block; }
  .table-card-mobile thead { display: none; }
  .table-card-mobile tbody { display: block; }
  .table-card-mobile tr { display: block; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; background: var(--surface); padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .table-card-mobile td { display: flex; justify-content: space-between; align-items: center; border: none; border-bottom: 1px dashed var(--border); padding: 10px 0; font-size: 12.5px; }
  .table-card-mobile td:last-child { border-bottom: none; padding-bottom: 0; }
  .table-card-mobile td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 12px; white-space: nowrap; }
  .table-card-mobile td > * { text-align: right; flex: 1; }
  .table-card-mobile td[dir="ltr"] > * { text-align: left; }
  .table-card-mobile .amount { font-size: 13.5px; }
  .table-card-mobile .badge { display: inline-block; }
  .table-card-mobile .status-select { max-width: 100%; width: 120px; }

  body{font-size:13.5px}
  .topbar{padding:8px 10px; gap:6px}
  .topbar h1{font-size:13.5px}
  .month-picker-btn{padding:6px 10px;font-size:11.5px;}
  #btnAddTop{padding:6px 10px; font-size:12px}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .stat{gap:12px; padding:12px}
  .stat .ic{width:52px; height:52px; font-size:24px; border-radius:16px}
  .stat-value{font-size:16px}
  .stat-label{font-size:11.5px; margin-bottom:3px}
  .stat-sub{font-size:10.5px}
  .card{padding:14px; border-radius:14px}
  .card-head h3{font-size:13.5px}
  .chart-seg .seg-btn{padding:4px 10px; font-size:11px}
  .profile-cover{height:80px}
  .profile-avatar-lg{width:76px; height:76px; font-size:26px; bottom:-38px; inset-inline-start:16px; border-width:3px;}
  .profile-content{padding:46px 14px 14px; gap:12px}
  .profile-name{font-size:15px}
  .profile-subtitle{font-size:12px}
  .profile-contacts{grid-template-columns:1fr; gap:8px}
  .pc-item{font-size:12px}
  .row-2{grid-template-columns:1fr}
  .row-3{grid-template-columns:1fr}
  .input{padding:9px 11px; font-size:13px}
  .btn{padding:8px 14px; font-size:13px}
  .btn.small{padding:6px 10px; font-size:12px}
  .content .row-2[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr 1fr !important; gap:10px !important;}
  .content .row-2[style*="grid-template-columns:1.5fr"]{grid-template-columns:1fr !important; gap:10px !important;}
  table.table{min-width:640px; font-size:12.5px}
  table.table th{padding:9px 10px; font-size:11.5px}
  table.table td{padding:9px 10px}
  .receipt-thumb, .receipt-pdf{width:36px; height:36px}
  .modal-backdrop{padding:8px}
  .modal{max-width:100%; max-height:94dvh; border-radius:16px}
  .modal-head{padding:12px 14px}
  .modal-head h3{font-size:14.5px}
  .modal-body{padding:14px}
  .modal-foot{padding:12px 14px}
  .modal-foot .btn{flex:1; min-width:0}
  .chart-wrap{height:230px}
  .tx-row{padding:9px 10px; gap:10px}
  .tx-ic{width:34px; height:34px; font-size:14px; flex:0 0 34px}
  .cat-item{padding:9px 10px}
  .cat-icon-circle{width:28px;height:28px;min-width:28px}
  .cat-icon-circle svg{width:16px;height:16px}
  .cat-item .nm{font-size:12.5px}
  .cat-item .cnt{font-size:11px}
  .datepicker{width:calc(100vw - 16px); max-width:340px; left:50% !important; top:50% !important; transform:translate(-50%,-50%);}
  .content .row-2[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr !important; gap:10px !important;}
}
@media (max-width:900px){
  .sidebar{position:fixed !important; top:0; right:0 !important; left:auto !important; width:min(300px, 85vw); height:100dvh; transform:translateX(105%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-10px 0 40px rgba(0,0,0,.25); z-index:60; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
  .sidebar.open{ transform:translateX(0); }
  .hamburger{ display:flex }
  .sidebar-close{ display:flex }
  .topbar{padding:10px 12px; gap:8px}
  .topbar h1{font-size:14px}
  .content{padding:12px; gap:12px}
  .today-date { display: none; }
}
@media (max-width:560px){
  body{font-size:13px}
  .content{padding:10px; gap:10px}
  .topbar{padding:8px; gap:6px}
  #userNameTop{display:none}
  .user-chip{padding:3px; gap:0}
  .user-chip .av{width:28px; height:28px; font-size:11px}
  .topbar h1{font-size:13px; max-width:80px}
  .hamburger{width:36px; height:36px}
  .hamburger svg{width:22px; height:22px}
  .month-picker-panel { width: 210px; }
  .mp-month { font-size: 11px; padding: 6px 2px; }
  .stats-grid{grid-template-columns:1fr; gap:9px}
  .stat{padding:12px; gap:12px}
  .stat .ic{width:52px; height:52px; font-size:22px; border-radius:16px}
  .stat-value{font-size:17px}
  .stat-label{font-size:11.5px}
  .stat-sub{font-size:10.5px; white-space:normal; overflow:visible}
  .card{padding:12px; border-radius:13px}
  .card-head{margin-bottom:10px; gap:8px}
  .card-head h3{font-size:13px}
  .chart-seg{width:100%; justify-content:center}
  .chart-seg .seg-btn{flex:1; text-align:center; padding:6px 8px; font-size:11.5px}
  .profile-cover{height:70px}
  .profile-avatar-lg{width:68px; height:68px; font-size:24px; bottom:-34px; inset-inline-start:14px;}
  .profile-content{padding:42px 12px 12px; gap:10px}
  .profile-name{font-size:14.5px}
  .profile-head{flex-direction:column; align-items:stretch; gap:8px}
  .profile-head .btn{width:100%}
  .profile-photo-section{padding:10px; gap:12px}
  .profile-photo-preview{width:72px; height:72px; font-size:24px}
  .profile-photo-actions{min-width:0}
  .content .row-2[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr !important; gap:9px !important;}
  table.table{min-width:560px; font-size:12px}
  table.table th{padding:8px 9px; font-size:11px}
  table.table td{padding:8px 9px}
  .receipt-thumb, .receipt-pdf{width:34px; height:34px}
  .badge{font-size:10.5px; padding:2px 8px}
  .modal-backdrop{padding:0}
  .modal{max-width:100%; width:100%; max-height:100dvh; height:100dvh; border-radius:0; border:0;}
  .modal-head{padding:12px; border-radius:0}
  .modal-body{padding:12px}
  .modal-foot{padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); border-radius:0;}
  .chart-wrap{height:200px}
  .dp-cell{height:38px; font-size:13.5px}
  #toasts{inset-inline-start:8px; inset-inline-end:8px; bottom:8px; bottom:calc(8px + env(safe-area-inset-bottom,0px));}
  .toast{max-width:100%; font-size:12.5px; padding:10px 12px}
  .seg{width:100%; padding:3px}
  .seg-btn{padding:9px 12px; font-size:12.5px; flex:1}
  .export-actions{flex-direction:column}
  .export-actions .btn{width:100%}
  .auth-card{padding:24px 18px;}
  .auth-brand-logo{width:58px;height:58px;font-size:28px;}
  .auth-brand h1{font-size:19px;}
  .dropzone{padding:16px 10px;}
  .dropzone .dz-icon{font-size:24px;}
  .dropzone .dz-title{font-size:12.5px;}
  .inv-seller-section{padding:10px; gap:10px;}
  .inv-logo-preview{width:80px; height:80px; font-size:34px;}
  .share-grid{grid-template-columns:1fr}
}
@media (max-width:480px){ .filter-grid{grid-template-columns:1fr} .share-grid{grid-template-columns:1fr} }
@media (max-width:380px){
  body{font-size:12.5px}
  .topbar h1{display:none}
  #btnAddTop{padding:6px 8px; font-size:11.5px}
  .month-picker-btn { padding: 6px 8px; font-size: 11px; }
  .stat .ic{width:46px; height:46px; font-size:20px; border-radius:14px}
  .stat-value{font-size:16px}
  .stat-label{font-size:11px}
  .card{padding:10px}
  .profile-content{padding:40px 10px 10px}
  .btn{padding:7px 12px; font-size:12.5px}
}
@media (hover:none){
  .btn:hover{background:var(--surface)}
  .btn.primary:hover{filter:none}
  .card:hover, table.table tbody tr:hover{background:inherit}
  .receipt-thumb:hover{transform:none; border-color:var(--border)}
  .nav-item:hover{background:transparent}
  .nav-item.active{background:var(--menu-active-bg, var(--primary-soft));color:var(--menu-active-text, var(--primary))}
}
@media (max-width:768px){
  .tx-table-wrap{overflow:visible !important}
  .tx-table.table-card-mobile{min-width:100% !important}
  .tx-table.table-card-mobile tr{padding:12px 14px;box-shadow:var(--shadow)}
  .tx-table.table-card-mobile td{gap:8px;min-height:38px}
  .tx-table.table-card-mobile td::before{flex:0 0 auto}
  .tx-table.table-card-mobile td > *{min-width:0}
  .tx-table.table-card-mobile .tx-row-number{width:auto;text-align:initial !important}
  .tx-table.table-card-mobile .tx-row-number .tx-row-badge{margin-inline-start:auto}
  .tx-pagination{padding:12px;gap:10px}
  .tx-page-size{width:100%;justify-content:center}
  .tx-page-info{order:3;width:100%;min-width:0;flex-basis:100%}
  .tx-page-controls{width:100%;justify-content:center}
  .tx-page-controls .btn{min-width:36px}
}


@media (max-width:768px){
  .category-badge{width:26px;height:26px;min-width:26px}
  .category-badge svg{width:15px;height:15px}
  .category-cell{gap:7px}
  .category-select-icon{width:26px;height:26px;min-width:26px;inset-inline-start:8px}
  .category-select-icon svg{width:15px;height:15px}
  .category-select-wrap .category-select-input{padding-inline-start:38px}
}
@media (max-width:380px){
  .category-badge{width:24px;height:24px;min-width:24px}
  .category-badge svg{width:14px;height:14px}
  .category-select-icon{width:24px;height:24px;min-width:24px}
  .category-select-wrap .category-select-input{padding-inline-start:36px}
}

/* تراکنش: آیکون جداگانهٔ قدیمی حذف شده و فقط آیکون داخل گزینهٔ انتخابی نمایش داده می‌شود. */
#txCatPreview{display:none!important}

@media (max-width:768px){
  .loan-report-head{align-items:flex-start;flex-wrap:wrap}
  .loan-report-head .progress-style-seg{width:100%;justify-content:center}
  .loan-report-head .progress-style-seg button{flex:1}
}

/* واکنش‌گرایی جدول گزارش وام و اقساط در موبایل */
@media (max-width:768px){
  .loan-report-card,
  #lnList,
  .loan-table-wrap{width:100%;max-width:100%;min-width:0;overflow:visible!important}
  .loan-report-table{width:100%!important;min-width:0!important;table-layout:fixed;border-collapse:separate;border-spacing:0 12px}
  .loan-report-table thead{display:none}
  .loan-report-table tbody{display:block;width:100%;min-width:0}
  .loan-report-table tbody tr{display:block;width:100%;min-width:0;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);box-sizing:border-box}
  .loan-report-table tbody tr td{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);align-items:center;gap:10px;width:100%;min-width:0;padding:9px 0;border:0;border-bottom:1px solid var(--border);text-align:start!important;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box;font-size:12px}
  .loan-report-table tbody tr td:last-child{border-bottom:0}
  .loan-report-table tbody tr td::before{content:attr(data-label);display:block;min-width:0;color:var(--muted);font-size:11px;font-weight:600;line-height:1.6}
  .loan-report-table tbody tr td>*{min-width:0;max-width:100%;box-sizing:border-box}
  .loan-report-table tbody tr td.loan-row-number{width:100%;text-align:start!important}
  .loan-report-table tbody tr td.loan-row-number .loan-row-badge{margin:0}
  .loan-report-table .loan-progress-cell{min-width:0}
  .loan-report-table .loan-progress-cell>.progress-flex{min-width:0;max-width:100%;flex-wrap:wrap;gap:6px}
  .loan-report-table .loan-progress-cell>.progress-flex>.progress-main{min-width:0;width:100%;max-width:100%}
  .loan-report-table .loan-progress-cell .loan-progress-linear{min-width:0;width:100%;max-width:100%}
  .loan-report-table .loan-progress-cell .progress-ring-wrap{width:54px;height:54px}
  .loan-report-table .loan-progress-cell .progress-ring-container{padding:0}
  .loan-report-table .loan-progress-mini{min-width:0;width:100%}
  .loan-report-table .loan-actions{justify-content:flex-start;gap:6px;flex-wrap:wrap}
  .loan-report-table .loan-actions .btn{padding:6px 9px;font-size:11px}
  .loan-report-table .loan-actions .icon-btn{flex:0 0 auto}
  .loan-pagination{min-width:0;flex-wrap:wrap}
  .loan-pagination .tx-page-size select{max-width:100%}
}
@media (max-width:380px){
  .loan-report-table tbody tr{padding:8px 10px}
  .loan-report-table tbody tr td{grid-template-columns:minmax(78px,34%) minmax(0,1fr);gap:7px;font-size:11.5px}
  .loan-report-table tbody tr td::before{font-size:10.5px}
}