/* Context selection stays in its original DOM order. Only the toolbar layout
   changes; the application owns actions, selected values and authorization. */
.topbar .period-controls>.icon-btn{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px}
.topbar .top-profile-button,.topbar .niwus-launcher,.topbar>.mobile-menu{min-height:44px}

/* A normal laptop has room for one bounded row, including the real launcher. */
@media(min-width:1101px) and (max-width:1400px){
 .topbar{height:auto;min-height:88px;align-items:flex-end}
 .topbar>.breadcrumb{display:none}
 .topbar>.top-actions{display:grid;grid-template-columns:minmax(160px,250px) minmax(284px,320px) auto auto;align-items:end;justify-content:end;gap:10px;flex:1;min-width:0}
 .topbar>.top-actions>.context-filter{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:250px}
 .topbar>.top-actions>.period-controls{grid-column:2;grid-row:1;display:grid;grid-template-columns:44px minmax(98px,1fr) 80px 44px;gap:6px;width:100%;max-width:320px;min-width:0;align-items:end}
 .topbar>.top-actions>.niwus-launcher{grid-column:3;grid-row:1}
 .topbar>.top-actions>.top-profile-button{grid-column:4;grid-row:1}
 .topbar .period-controls .context-filter,.topbar .period-controls select{min-width:0;width:100%}
 .topbar .period-controls #year-filter{min-width:0;width:100%}
}

/* Narrow laptop with its sidebar: keep the club bounded and the period left. */
@media(min-width:851px) and (max-width:1100px){
 .topbar{height:auto;align-items:flex-end}
 .topbar>.breadcrumb{display:none}
 .topbar>.top-actions{display:grid;grid-template-columns:minmax(160px,250px) auto auto;justify-content:space-between;align-items:end;gap:10px;flex:1;min-width:0}
 .topbar>.top-actions>.context-filter{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:250px}
 .topbar>.top-actions>.niwus-launcher{grid-column:2;grid-row:1}
 .topbar>.top-actions>.top-profile-button{grid-column:3;grid-row:1}
 .topbar>.top-actions>.period-controls{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:44px minmax(98px,1fr) 80px 44px;gap:6px;width:320px;max-width:100%;min-width:0;justify-self:start;align-items:end}
 .topbar .period-controls .context-filter,.topbar .period-controls select{min-width:0;width:100%}
 .topbar .period-controls #year-filter{min-width:0;width:100%}
}

/* Tablet: actions on the first line, balanced club and period on the second. */
@media(min-width:641px) and (max-width:850px){
 .topbar{display:grid;grid-template-columns:44px minmax(0,1fr) 152px 134px;align-items:end;gap:10px;height:auto;min-height:0;padding:12px 16px!important}
 .topbar>.mobile-menu{display:inline-flex;grid-column:1;grid-row:1;width:44px;min-width:44px;height:44px;margin:0;align-self:center}
 .topbar>.breadcrumb{display:block;grid-column:2;grid-row:1;align-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
 .topbar>.top-actions{display:contents}
 .topbar>.top-actions>.niwus-launcher{grid-column:3;grid-row:1;justify-self:end;max-width:152px}
 .topbar>.top-actions>.top-profile-button{grid-column:4;grid-row:1;justify-self:end;min-width:44px;max-width:134px}
 .topbar>.top-actions>.context-filter{grid-column:1/3;grid-row:2;width:100%;min-width:0;max-width:none}
 .topbar>.top-actions>.period-controls{grid-column:3/5;grid-row:2;display:grid;grid-template-columns:44px minmax(98px,1fr) 80px 44px;gap:6px;width:100%;max-width:none;min-width:0;align-items:end}
 .topbar .period-controls .context-filter,.topbar .period-controls select{min-width:0;width:100%}
 .topbar .period-controls #year-filter{min-width:0;width:100%}
 .topbar .context-filter select{font-size:13px}
}

/* Phone: one compact action line, a full club line, then a complete period. */
@media(max-width:640px){
 .topbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:end;gap:8px;height:auto;min-height:0;position:static;padding:10px 12px!important}
 .topbar>.mobile-menu{display:inline-flex;grid-column:1;grid-row:1;width:44px;min-width:44px;height:44px;margin:0;align-self:center}
 .topbar>.breadcrumb{display:none}
 .topbar>.top-actions{display:contents}
 .topbar>.top-actions>.niwus-launcher{grid-column:2;grid-row:1;justify-self:start;min-width:0;max-width:100%;height:44px;gap:4px}
 .topbar .niwus-launcher .niwus-portrait{width:44px;height:44px;margin:0}
 .topbar>.top-actions>.top-profile-button{grid-column:3;grid-row:1;width:44px;min-width:44px;height:44px;padding:10px}
 .topbar .top-profile-button .profile-button-label{display:none}
 .topbar>.top-actions>.context-filter{grid-column:1/-1;grid-row:2;min-width:0;width:100%;max-width:none}
 .topbar .context-filter{min-width:0;gap:4px}
 .topbar .context-filter>span{font-size:11px;line-height:1.2}
 .topbar .context-filter select{min-width:0;min-height:44px;font-size:14px}
 .topbar>.top-actions>.period-controls{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:44px minmax(0,1fr) 80px 44px;gap:6px;width:100%;max-width:none;min-width:0;align-items:end}
 .topbar .period-controls .context-filter,.topbar .period-controls select{min-width:0;width:100%}
 .topbar .period-controls #year-filter{min-width:0;width:100%}
}