/* Month navigation: visible controls grouped with the month, at every viewport. */
body.mbc-ux-review .topbar.ux-dashboard-header .month-row {
 display:grid!important; grid-template-columns:44px minmax(0,auto) 44px; width:fit-content; max-width:100%; min-width:0; gap:8px 12px; align-items:center; justify-content:center; justify-self:center;
}
body.mbc-ux-review .topbar.ux-dashboard-header .month-row>div { grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
body.mbc-ux-review .topbar.ux-dashboard-header #monthLabel { width:auto; margin:0; text-align:center; white-space:normal; overflow-wrap:normal; line-height:1.35; }
body.mbc-ux-review .topbar.ux-dashboard-header :is(#prevMonth,#nextMonth) { display:grid; place-items:center; grid-row:1; width:44px; min-width:44px; height:44px; min-height:44px; padding:10px; border:1px solid #94a3b8; border-radius:10px; background:var(--ux-card,#fff); color:var(--ux-text,#172437); box-shadow:0 1px 2px #1018270d; }
body.mbc-ux-review .topbar.ux-dashboard-header #prevMonth { grid-column:1; justify-self:end; }
body.mbc-ux-review .topbar.ux-dashboard-header #nextMonth { grid-column:3; justify-self:start; }
body.mbc-ux-review .topbar.ux-dashboard-header :is(#prevMonth,#nextMonth) img { width:12px; height:22px; object-fit:contain; opacity:1; }
body.mbc-ux-review .topbar.ux-dashboard-header :is(#prevMonth,#nextMonth):hover { background:var(--ux-selection,#e8f3fb); border-color:var(--ux-blue,#0669ff); }
body.mbc-ux-review .topbar.ux-dashboard-header :is(#prevMonth,#nextMonth):focus-visible { outline:3px solid var(--ux-blue,#0669ff); outline-offset:3px; }
body.mbc-ux-review .topbar.ux-dashboard-header :is(#prevMonth,#nextMonth):active { background:var(--ux-selection,#e8f3fb); box-shadow:none; }
body.mbc-ux-review .topbar.ux-dashboard-header #uxCurrentMonth { grid-column:1/-1; grid-row:2; width:100%; text-align:center; }
/* On narrow web screens, give the month its own row instead of squeezing it between logo and add action. */
@media(max-width:700px){
 body.mbc-ux-review:not(.mbc-native) .topbar.ux-dashboard-header:has(>.mbc-topbar-mark)>div:first-of-type {grid-column:1/-1;grid-row:2;justify-self:center;width:100%;min-width:0;}
 body.mbc-ux-review:not(.mbc-native) .topbar.ux-dashboard-header .month-row {margin:0 auto;}
 body.mbc-ux-review:not(.mbc-native) .topbar.ux-dashboard-header #uxSyncRetry:not(.hidden) {grid-row:3;}
}