/* Application-wide typography and large-display layout */
html { font-family: "Avenir Next", Avenir, "Helvetica Neue", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body, button, input, select { font-family: inherit; font-weight: 500; }
body { letter-spacing: -.12px; }
h1, h2, h3, strong, b { font-weight: 700; }
.content { max-width: none; width: 100%; }
.dashboard-grid { grid-template-columns: minmax(720px, 1.75fr) minmax(410px, .82fr); }

/* QHD and 4K: fill the working area while retaining comfortable reading scale. */
@media (min-width: 2200px) {
  .sidebar { width: 248px; flex-basis: 248px; padding-top: 26px; }
  .brand { font-size: 31px; }
  .nav-item { height: 52px; font-size: 18px; }
  .subnav button { font-size: 17px; padding-top: 11px; padding-bottom: 11px; }
  .topbar { height: 72px; padding: 12px 28px; }
  .search { height: 46px; flex-basis: 430px; font-size: 24px; }
  .search input { font-size: 16px; }
  .quick-metrics, .rates span { font-size: 15px; }
  .tabs { height: 58px; padding: 8px 28px; }
  .tab { height: 42px; font-size: 16px; }
  .content { padding: 17px 30px 36px; }
  .overdue { height: 48px; font-size: 18px; }
  .title-row h1 { font-size: 36px; }
  .title-row p { font-size: 18px; }
  .ticker { height: 50px; font-size: 17px; }
  .dashboard-grid { grid-template-columns: minmax(980px, 1.8fr) minmax(500px, .82fr); gap: 20px; margin-top: 42px; }
  .card h2 { font-size: 24px; }
  .card-head { height: 56px; }
  .chart { height: 260px; }
  .chart-y, .axis { font-size: 14px; }
  .calendar-head { height: 56px; }
  .day { height: 57px; font-size: 14px; padding: 6px 9px; }
  .dow { font-size: 14px; padding: 7px; }
  .event { font-size: 11px; }
  .mail-card { min-height: 330px; }
  .mail-row { min-height: 74px; padding: 13px 15px; }
  .mail-row strong { font-size: 15px; }
  .mail-row small { font-size: 12px; }
  .messages { min-height: 330px; }
  .bubble p { font-size: 14px; }
}

@media (min-width: 3200px) {
  .dashboard-grid { grid-template-columns: minmax(1280px, 1.85fr) minmax(590px, .82fr); }
  .content { padding-left: 38px; padding-right: 38px; }
  .chart { height: 300px; }
  .day { height: 66px; }
}