/* ============================================================
   hf-wide.css — نظم چیدمان در نمایشگرهای بزرگ
   ============================================================ */
:root{ --hf-max: 1440px; --hf-gut: 28px; }

/* ۱) محتوا وسط‌چین با عرض مهارشده (به‌جای کشیده‌شدن تا لبه) */
@media (min-width:1400px){
  .content, .main, .page, main, .app-main, .container,
  .toolbar, #letterLanes, #ltBar,
  .bn-grid, .nw-grid, .board, .at-stats{
    max-width:var(--hf-max) !important;
    margin-inline:auto !important;
  }
}
@media (min-width:1800px){
  :root{ --hf-max: 1600px; }
}

/* ۲) شبکه‌ها خودتنظیم — نه ۳ ستون ثابت */
#letterLanes{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap:var(--hf-gut) !important;
  align-items:start !important;
}
.bn-grid, .nw-grid, .board, .at-stats, .ch-admin-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap:20px !important;
}

/* ۳) کارت‌ها در عرض زیاد نفس بکشند */
@media (min-width:1400px){
  .card{ border-radius:16px; }
  .card-pad{ padding:22px 26px !important; }
}

/* ۴) تایپوگرافی متناسب با عرض */
@media (min-width:1600px){
  body{ font-size:15px; }
  .card-title, h3{ font-size:1.06em; }
}

/* ۵) کارتابل/توضیح بالای صفحه: متن تا لبه کشیده نشود */
.card .muted{ max-width:78ch; }

/* ۶) نوار ابزار نامه‌ها هم‌تراز شبکه */
#ltBar{ padding-inline:0 !important; }

/* ۷) قاب گفتگو در عرض زیاد: ستون کنار پهن‌تر نشود */
@media (min-width:1400px){
  body.kx-page .kx{
    max-width:var(--hf-max) !important; margin-inline:auto !important;
    grid-template-columns:minmax(0,1fr) 320px !important;
  }
}
@media (min-width:1900px){
  body.kx-page .kx{ grid-template-columns:minmax(0,1fr) 360px !important; }
}

/* ۸) خوانایی خط متن پیام در مانیتور بزرگ */
@media (min-width:1600px){
  .kx .kx-msg{ max-width:64% !important; }
  .kx .kx-txt{ font-size:15px !important; }
}

/* ۹) پاپ‌آپ زنگ هرگز بیرون نزند (مهار با عرض دید) */
#hfBell .hf-bell-pop{
  width:min(320px, calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
}

/* ۱۰) جدول‌ها در عرض زیاد */
@media (min-width:1400px){
  .table{ width:100% !important; }
  .table td, .table th{ padding:12px 14px !important; }
}